oleh/astrolabe
1
0
Fork 0
mirror of https://github.com/olehomelchenko/astrolabe.git synced 2026-08-08 02:02:33 +00:00
Code Issues Packages Projects Releases Wiki Activity

Editor: render a layer as one framed row of mark glyphs

Browse Source 
A layer is one plotting space with several marks stacked in z-order, so it now renders as a single frame holding its child marks as a row of glyphs, badged with a new 'layers' glyph — instead of offset stacked cards that read as separate spaces and hid the lower glyphs. Each mark stays an individual treeitem, so selection and Alt+up/down z-order reorder are unchanged.
This commit is contained in:
Oleh Omelchenko
2026-06-29 14:59:01 +03:00
parent 216797ff9b
commit 26b383ff33
7 changed files with 96 additions and 37 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/app/components/CompositionWireframe.module.css
+29 -14
View File
@@ -119,23 +119,38 @@
.grid > * {
flex: 1 1 84px;
}
/* Layer: children share one plotting area — overlap them in a single grid cell so
the stack reads as depth, not as siblings. */
/* Layer: one plotting space holding several marks (z-order). Render it as a single
frame — a row of the child mark glyphs, badged as layered — not as separate boxes,
so it reads as one space and the marks stay legible (vs. the concat box-per-view). */
.layerBox {
position: relative;
}
.layered {
display: grid;
padding: 0 14px 14px 0;
display: flex;
flex-flow: row wrap;
align-items: center;
justify-content: center;
gap: var(--space-3);
min-height: 40px;
}
.layered > * {
grid-area: 1 / 1;
/* A layer's mark is a bare glyph, not a boxed leaf — the frame is the box. The
transparent border keeps the hover/selection outline (from `.node`) consistent. */
.layerMark {
min-height: 0;
padding: var(--space-2) var(--space-3);
border-color: transparent;
background: transparent;
display: inline-flex;
align-items: center;
justify-content: center;
cursor: pointer;
}
.layered > *:nth-child(2) {
transform: translate(7px, 7px);
}
.layered > *:nth-child(3) {
transform: translate(14px, 14px);
}
.layered > *:nth-child(n + 4) {
transform: translate(21px, 21px);
.layerBadge {
position: absolute;
top: var(--space-2);
right: var(--space-2);
color: var(--text-placeholder);
pointer-events: none;
}
/* Facet / repeat: one authored child stands for many generated cells — a card