chore: cleanup z-indices so that they're all clearly listed (#3855)
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 <!-- ❗ Please select a 'Scope' label ❗️ --> - [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 <!-- ❗ Please select a 'Type' label ❗️ --> - [ ] `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
This commit is contained in:
Mime Čuvalo
GitHub
parent
cd96c35f72
commit
633a4e700d
3 changed files with 63 additions and 43 deletions
|
|
@ -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;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -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
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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 {
|
||||
|
|
|
|||
Loading…
Reference in a new issue