Improve stacking order

neocafe · Jan 16, 2023 · f4580b0 · f4580b0
1 parent 3e45ea0
commit f4580b0
Show file tree

Hide file tree

Showing 3 changed files with 24 additions and 4 deletions.
diff --git a/packages/site/src/ayon/Content.tsx b/packages/site/src/ayon/Content.tsx
@@ -9,6 +9,7 @@ import styled from 'styled-components';
 import { DOMRenderer } from './DOMRenderer';
 import { inferBlockType, inferBlockTypes } from './inferBlock';
 import { Panel } from './Panel';
+import { Stacking } from './stacking';
 import { buttonSymbol } from './symbols';
 import { DrawingWidget, Widget } from './Widget';
 
@@ -98,11 +99,18 @@ export const Content = memo(function Content() {
               <Design.Root>
                 <Design.BoundingRect />
                 <Design.LayerHighlight />
+              </Design.Root>
+            </RenderingModeProvider>
+          </SVGRenderer>
+        </Overlay>
+        <Overlay style={{ zIndex: Stacking.level.overlay }}>
+          <SVGRenderer size={canvasSize}>
+            <RenderingModeProvider value="interactive">
+              <Design.Root>
                 <Design.DrawLayer />
                 <Design.SnapGuides />
                 <Design.MeasurementGuides />
                 <Design.DragHandles />
-                <Design.Rulers />
               </Design.Root>
             </RenderingModeProvider>
           </SVGRenderer>

diff --git a/packages/site/src/ayon/Widget.tsx b/packages/site/src/ayon/Widget.tsx
@@ -6,6 +6,7 @@ import { LockClosedIcon, MagicWandIcon } from 'noya-icons';
 import { DrawableLayerType, Layers, Selectors } from 'noya-state';
 import * as React from 'react';
 import { useEffect, useRef } from 'react';
+import { Stacking } from './stacking';
 import {
   allAyonSymbols,
   heading1SymbolId,
@@ -22,17 +23,20 @@ function WidgetContainer({
   frame,
   children,
   transform,
+  zIndex,
 }: {
   frame: Rect;
   children: React.ReactNode;
   transform?: string;
+  zIndex?: number;
 }) {
   return (
     <div
       style={{
         position: 'absolute',
         pointerEvents: 'none',
         transform,
+        zIndex,
       }}
     >
       <div
@@ -71,7 +75,6 @@ function WidgetLabel({
         padding: '2px 4px',
         whiteSpace: 'pre',
         borderRadius: '2px',
-        zIndex: 1,
         fontSize: 13,
         display: 'flex',
         lineHeight: '1.2',
@@ -144,7 +147,11 @@ export function Widget({
   const slashWords = words.filter((word) => word[0] === '/' && word !== '/');
 
   return (
-    <WidgetContainer frame={rect} transform={canvasTransform.toString()}>
+    <WidgetContainer
+      frame={rect}
+      transform={canvasTransform.toString()}
+      zIndex={showWidgetUI ? Stacking.level.interactive : undefined}
+    >
       <textarea
         ref={textareaRef}
         style={{
@@ -305,7 +312,6 @@ export function Widget({
               whiteSpace: 'pre',
               borderRadius: '2px',
               fontSize: 13,
-              zIndex: 1,
             }}
           >
             {blockTypes.map((blockType, index) => {

diff --git a/packages/site/src/ayon/stacking.ts b/packages/site/src/ayon/stacking.ts
@@ -0,0 +1,6 @@
+export const Stacking = {
+  level: {
+    interactive: 1,
+    overlay: 2,
+  },
+};