From 633a4e700dcabc47d9499afa7dbd944c34361606 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Mime=20=C4=8Cuvalo?= Date: Mon, 3 Jun 2024 09:35:57 +0100 Subject: [PATCH] chore: cleanup z-indices so that they're all clearly listed (#3855) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit minor thing that was bugging me. we had a bunch of z-index vars that were "unregistered". this brings them back into a consistent place so we can see from a bird's eye view easily the stacking order of everything. also, a drive-by fix to not duplicate `--tl-text-outline` inside of `DefaultCanvas` ### Change Type - [x] `sdk` — Changes the tldraw SDK - [ ] `dotcom` — Changes the tldraw.com web app - [ ] `docs` — Changes to the documentation, examples, or templates. - [ ] `vs code` — Changes to the vscode plugin - [ ] `internal` — Does not affect user-facing stuff - [ ] `bugfix` — Bug fix - [ ] `feature` — New feature - [ ] `improvement` — Improving existing features - [x] `chore` — Updating dependencies, other boring stuff - [ ] `galaxy brain` — Architectural changes - [ ] `tests` — Changes to any test code - [ ] `tools` — Changes to infrastructure, CI, internal scripts, debugging tools, etc. - [ ] `dunno` — I don't know --- packages/editor/editor.css | 78 ++++++++++++------- .../default-components/DefaultCanvas.tsx | 6 +- packages/tldraw/src/lib/ui.css | 22 +++--- 3 files changed, 63 insertions(+), 43 deletions(-) diff --git a/packages/editor/editor.css b/packages/editor/editor.css index 93e9289a5..e5027e963 100644 --- a/packages/editor/editor.css +++ b/packages/editor/editor.css @@ -22,13 +22,31 @@ --radius-3: 9px; --radius-4: 11px; /* Z Index */ + --layer-hidden: -999999; + --layer-behind: -1; + --layer-culled-shape: 0; + --layer-text-label: 10; + --layer-collaborator-scribble: 10; + --layer-collaborator-brush: 20; + --layer-collaborator-shape-indicator: 30; + --layer-user-scribble: 40; + --layer-user-brush: 50; + --layer-user-indicator-selected: 60; + --layer-user-indicator-hovered: 70; + --layer-user-handles: 80; + --layer-user-snapline: 90; --layer-background: 100; + --layer-user-indicator-hint: 110; + --layer-collaborator-cursor-hint: 120; + --layer-collaborator-cursor: 130; --layer-grid: 150; --layer-culled-shapes: 175; --layer-canvas: 200; --layer-shapes: 300; --layer-overlays: 400; - --layer-in-front: 500; + --layer-in-front-overlay: 500; + --layer-in-front: 600; + --layer-bookmark-link: 999; --layer-following-indicator: 1000; --layer-blocker: 10000; @@ -93,9 +111,11 @@ /* fext outline */ --a: calc(min(0.5, 1 / var(--tl-zoom)) * 2px); --b: calc(min(0.5, 1 / var(--tl-zoom)) * -2px); - --tl-text-outline: 0 var(--b) 0 var(--color-background), 0 var(--a) 0 var(--color-background), - var(--b) var(--b) 0 var(--color-background), var(--a) var(--b) 0 var(--color-background), - var(--a) var(--a) 0 var(--color-background), var(--b) var(--a) 0 var(--color-background); + --tl-text-outline-reference: 0 var(--b) 0 var(--color-background), + 0 var(--a) 0 var(--color-background), var(--b) var(--b) 0 var(--color-background), + var(--a) var(--b) 0 var(--color-background), var(--a) var(--a) 0 var(--color-background), + var(--b) var(--a) 0 var(--color-background); + --tl-text-outline: var(--tl-text-outline-reference); /* own properties */ position: relative; inset: 0px; @@ -294,7 +314,7 @@ input, } .tl-front { - z-index: 600; + z-index: var(--layer-in-front); position: absolute; inset: 0px; height: 100%; @@ -386,7 +406,7 @@ input, transform-origin: top left; contain: size layout; background-color: var(--color-culled); - z-index: 0; + z-index: var(--layer-culled-shape); } /* ---------------- Shape Containers ---------------- */ @@ -420,58 +440,58 @@ input, /* back of the stack, behind user's stuff */ .tl-collaborator__scribble { - z-index: 10; + z-index: var(--layer-collaborator-scribble); } .tl-collaborator__brush { - z-index: 20; + z-index: var(--layer-collaborator-brush); } .tl-collaborator__shape-indicator { - z-index: 30; + z-index: var(--layer-collaborator-shape-indicator); } .tl-user-scribble { - z-index: 40; + z-index: var(--layer-user-scribble); } .tl-user-brush { - z-index: 50; + z-index: var(--layer-user-brush); } .tl-user-indicator__selected { - z-index: 60; + z-index: var(--layer-user-indicator-selected); } .tl-user-indicator__hovered { - z-index: 70; + z-index: var(--layer-user-indicator-hovered); } .tl-user-handles { - z-index: 80; + z-index: var(--layer-user-handles); } .tl-user-snapline { - z-index: 90; + z-index: var(--layer-user-snapline); } .tl-selection__fg { pointer-events: none; - z-index: 100; + z-index: var(--layer-background); } .tl-user-indicator__hint { - z-index: 110; + z-index: var(--layer-user-indicator-hint); stroke-width: calc(2.5px * var(--tl-scale)); } /* behind collaborator cursor */ .tl-collaborator__cursor-hint { - z-index: 120; + z-index: var(--layer-collaborator-cursor-hint); } .tl-collaborator__cursor { - z-index: 130; + z-index: var(--layer-collaborator-cursor); } .tl-cursor { @@ -824,7 +844,7 @@ input, .tl-text-measure { position: absolute; - z-index: -999999; + z-index: var(--layer-hidden); top: 0px; left: 0px; opacity: 0; @@ -984,7 +1004,7 @@ input, .tl-bookmark__link { font-size: 14px; pointer-events: all; - z-index: 999; + z-index: var(--layer-bookmark-link); overflow: hidden; display: block; color: var(--color-text); @@ -1007,7 +1027,7 @@ input, display: flex; align-items: center; justify-content: center; - z-index: 200; + z-index: var(--layer-canvas); font-size: 12px; font-weight: 400; color: var(--color-text-1); @@ -1020,7 +1040,7 @@ input, .tl-hyperlink-button::after { content: ''; - z-index: -1; + z-index: var(--layer-behind); position: absolute; right: 6px; bottom: 6px; @@ -1060,7 +1080,7 @@ input, inset: 0px; height: 100%; width: 100%; - z-index: 10; + z-index: var(--layer-text-label); } .tl-text-label[data-hastext='false'][data-isediting='false'] > .tl-text-label__inner { @@ -1370,7 +1390,7 @@ input, background-color: var(--color-background); color: var(--color-text-1); position: absolute; - z-index: 600; + z-index: var(--layer-in-front); } .tl-error-boundary__overlay { @@ -1378,7 +1398,7 @@ input, inset: 0px; height: 100%; width: 100%; - z-index: 500; + z-index: var(--layer-in-front-overlay); background-color: var(--color-overlay); } @@ -1394,7 +1414,7 @@ input, inset: 0px; height: 100%; width: 100%; - z-index: -1; + z-index: var(--layer-behind); } /* some browsers seem to have some weird interactions between stacking contexts and pointer-events. this ::after pseudo element covers the canvas and prevents @@ -1406,7 +1426,7 @@ it from receiving any pointer events or affecting the cursor. */ inset: 0px; height: 100%; width: 100%; - z-index: 600; + z-index: var(--layer-in-front); pointer-events: all; } @@ -1425,7 +1445,7 @@ it from receiving any pointer events or affecting the cursor. */ display: flex; flex-direction: column; overflow: auto; - z-index: 600; + z-index: var(--layer-in-front); gap: 12px; } diff --git a/packages/editor/src/lib/components/default-components/DefaultCanvas.tsx b/packages/editor/src/lib/components/default-components/DefaultCanvas.tsx index 6daa49f0e..41f257d17 100644 --- a/packages/editor/src/lib/components/default-components/DefaultCanvas.tsx +++ b/packages/editor/src/lib/components/default-components/DefaultCanvas.tsx @@ -69,11 +69,7 @@ export function DefaultCanvas({ className }: TLCanvasComponentProps) { const lodDisableTextOutline = z < editor.options.textShadowLod container.style.setProperty( '--tl-text-outline', - lodDisableTextOutline - ? 'none' - : `0 var(--b) 0 var(--color-background), 0 var(--a) 0 var(--color-background), - var(--b) var(--b) 0 var(--color-background), var(--a) var(--b) 0 var(--color-background), - var(--a) var(--a) 0 var(--color-background), var(--b) var(--a) 0 var(--color-background)` + lodDisableTextOutline ? 'none' : `var(--tl-text-outline-reference)` ) rMemoizedStuff.current.lodDisableTextOutline = lodDisableTextOutline } diff --git a/packages/tldraw/src/lib/ui.css b/packages/tldraw/src/lib/ui.css index 61c8f4f68..22bd96f59 100644 --- a/packages/tldraw/src/lib/ui.css +++ b/packages/tldraw/src/lib/ui.css @@ -1,11 +1,15 @@ /* @tldraw/ui */ .tl-container { + --layer-behind: -1; + --layer-above: 1; + --layer-focused-input: 10; --layer-panels: 300; --layer-menus: 400; --layer-overlays: 500; --layer-toasts: 650; --layer-cursor: 700; + --layer-header-footer: 999; } /* -------------------------------------------------- */ @@ -48,7 +52,7 @@ .tlui-button > * { position: relative; - z-index: 1; + z-index: var(--layer-above); } .tlui-button__label { @@ -688,7 +692,7 @@ background: none; margin: 0px; position: relative; - z-index: 1; + z-index: var(--layer-above); height: 40px; max-height: 40px; display: flex; @@ -771,7 +775,7 @@ display: flex; align-items: center; flex: 0; - z-index: 999; + z-index: var(--layer-header-footer); padding-left: var(--space-4); color: var(--color-text); height: 44px; @@ -801,7 +805,7 @@ .tlui-dialog__footer { position: relative; - z-index: 999; + z-index: var(--layer-header-footer); } .tlui-dialog__footer__actions { @@ -843,7 +847,7 @@ /* Row of controls + lock button */ .tlui-toolbar__extras { position: relative; - z-index: 1; + z-index: var(--layer-above); width: 100%; pointer-events: none; top: 6px; @@ -858,7 +862,7 @@ display: flex; position: relative; flex-direction: row; - z-index: 1; + z-index: var(--layer-above); background-color: var(--color-low); border-top-left-radius: var(--radius-4); border-top-right-radius: var(--radius-4); @@ -1154,7 +1158,7 @@ content: ''; display: block; position: absolute; - z-index: -1; + z-index: var(--layer-behind); inset: -2px -2px 0px 0px; border-radius: 0; border-top: 2px solid var(--color-background); @@ -1329,7 +1333,7 @@ flex-direction: row; align-items: center; overflow: hidden; - z-index: 1; + z-index: var(--layer-above); } .tlui-page_menu__item__sortable__title { @@ -1341,7 +1345,7 @@ } .tlui-page_menu__item__sortable:focus-within { - z-index: 10; + z-index: var(--layer-focused-input); } .tlui-page_menu__item__sortable__handle {