You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
| Group is a real parent / folder | Group is a first-class parent node in the layer tree. |`Group` is a logical owner; children remain real DOM nodes with real DOM parents. | Users expect `node.parent === group`. They get physical parents instead. Confusion and buggy assumptions. | Document clearly. Provide `group.contains(node)` and `group.indexOf(node)`. |
| Group is a real parent / folder | Group is a first-class parent node in the layer tree. |`Group` is a logical owner; children remain real DOM nodes with real DOM parents. | Users expect `node.parent === group`. They get physical parents instead. Confusion and buggy assumptions. |
179
179
| Empty group visible in UI | Empty folder shows in layers panel and can be selected. | Empty group is usually a no-op (no DOM node inserted). | Cannot anchor selectors or apply transforms; empty groups invisible. | Offer optional `relay` placeholder `<span data-group-relay>` or `group.wrap()` to create a container. |
180
-
| Move group = single operation | Move folder moves children as a single unit in UI and undo stacks. | Moving group inserts/moves each child individually in DOM (multiple DOM ops). | More DOM mutations, more expensive reflows, different undo behavior. | Batch moves with `DocumentFragment`, or provide `group.moveTo(parent, ref)` that batches operations. |
181
-
| Selection highlights group and children | Selecting folder selects all child layers visually. | Selecting group object is conceptual; DevTools selection targets physical nodes. | Tooling and keyboard UX differ; users cannot click a single folder to affect children. | Expose `group.select()` that annotates/highlights child nodes or toggles a relay class. |
182
-
| Folder-level transforms / masks / blend modes | Transform/mask applies once to the folder and cascades to children. | No inherent group-level composition; must apply transforms per child or wrap in container. | Hard to apply group transforms or masks efficiently. | Provide `group.wrap({tag, class})` or an optional relay that becomes the composition surface. |
180
+
| Move group = single operation | Move folder moves children as a single unit in UI and undo stacks. | Moving group inserts/moves each child individually in DOM (multiple DOM ops). | More DOM mutations, more expensive reflows, different undo behavior. |
181
+
| Selection highlights group and children | Selecting folder selects all child layers visually. | Selecting group object is conceptual; DevTools selection targets physical nodes. | Tooling and keyboard UX differ; users cannot click a single folder to affect children. |
182
+
| Folder-level transforms / masks / blend modes | Transform/mask applies once to the folder and cascades to children. | No inherent group-level composition; must apply transforms per child or wrap in container. | Hard to apply group transforms or masks efficiently. |
183
183
| Querying / CSS selectors | Layers/folders can be targeted by UI layer queries. | DOM selectors operate on physical DOM only; logical grouping is invisible to CSS selectors. | Selectors, `querySelector`, and CSS cannot target groups. | Document this; add `group.querySelector` that searches `group.children` logically. |
184
-
| Event path / pointer capture | Events and selection operate on the folder as a node. | Events follow physical DOM; group object does not appear in `composedPath()`. | Event handling assumptions break; `event.target` never shows `group`. | If you use a relay container, events will reflect that container. Provide `group.on()` helpers to add listeners to all children or the relay. |
185
-
| Instances / components | Components and instances are first-class: detach, reset, overrides. |`Group` is not a component system; no instance lifecycle. | Users expecting replaceable/reusable grouped components are disappointed. | Build a separate Component/Instance layer on top of Group for reuse semantics. |
184
+
| Event path / pointer capture | Events and selection operate on the folder as a node. | Events follow physical DOM; group object does not appear in `composedPath()`. | Event handling assumptions break; `event.target` never shows `group`. |
185
+
| Instances / components | Components and instances are first-class: detach, reset, overrides. |`Group` is not a component system; no instance lifecycle. | Users expecting replaceable/reusable grouped components are disappointed. |
186
186
| DevTools visibility | Layers panel shows the folder. | DevTools show only DOM nodes; Group object is invisible unless you add debugging hooks. | Harder to inspect group membership in browser tools. | Provide a dev-mode relay/class and `data-group-id` attributes for debugging. |
187
-
| Undo / History semantics | Single operation for moving/renaming a folder. | Multiple DOM mutations may produce multiple history entries in frameworks. | Harder to reason about undo, animations, or transitions. | Batch operations and expose high-level APIs that perform single logical mutations. |
188
-
| Performance for many children | Folder move is a single conceptual op; implementations may optimize. | Inserting many children may trigger many reflows/mutations if not batched. | Jank if naive; MutationObservers triggered many times. | Use `DocumentFragment` internally or use a relay swap strategy to minimize layout thrash. |
187
+
| Undo / History semantics | Single operation for moving/renaming a folder. | Multiple DOM mutations may produce multiple history entries in frameworks. | Harder to reason about undo, animations, or transitions. |
188
+
| Performance for many children | Folder move is a single conceptual op; implementations may optimize. | Inserting many children may trigger many reflows/mutations if not batched. | Jank if naive; MutationObservers triggered many times. |
189
189
| Accessibility | Folder can be exposed to assistive tech as a group. | No automatic ARIA grouping unless you wrap children in an element with ARIA attributes. | Screen readers will not see the logical group. | Offer `group.wrap({role:'group', 'aria-label':...})` helper. |
190
-
| Serialization / export | Groups serialize naturally in layer/export formats. | Group is a logical list; exporting DOM may lose the group unless you serialize group metadata. | Harder to export the group structure for tools or file formats. | Provide `group.serialize()` that emits a portable representation (children + metadata). |
191
-
| CSS layout / stacking context | Folder can create a stacking context / transform once for all children. | Without a wrapper each child may need its own stacking context; group-level stacking not automatic. | Visual composition differs from designer expectations. | Support optional wrapper/relay to host stacking context and transforms. |
190
+
| Serialization / export | Groups serialize naturally in layer/export formats. | Group is a logical list; exporting DOM may lose the group unless you serialize group metadata. | Harder to export the group structure for tools or file formats. |
191
+
| CSS layout / stacking context | Folder can create a stacking context / transform once for all children. | Without a wrapper each child may need its own stacking context; group-level stacking not automatic. | Visual composition differs from designer expectations. |
192
192
| Predictable `parentNode` / DOM navigation |`layer.parent` matches group. |`node.parentNode`, `nextSibling`, etc., always reflect physical DOM. | Code that navigates DOM expecting group semantics breaks. | Provide logical navigation helpers: `logicalNextSibling(group, node)` etc., and document the difference. |
0 commit comments