Skip to content

Commit 525f4fa

Browse files
FrameMuseFrameMuse
authored
Update Explanation.md
1 parent 914d72d commit 525f4fa

1 file changed

Lines changed: 5 additions & 5 deletions

File tree

‎Explanation.md‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -176,17 +176,17 @@ While this may look confusing and not intuitive, in practice it's not bothering
176176
| Feature / Expectation | Figma / Photoshop | NodeGroup (logical `Group`) | Impact (what breaks in mental model) |
177177
| --------------------------------------------- | ----------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------: |
178178
| 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-
| 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. |
179+
| Empty group visible in UI | Empty folder shows in layers panel and can be selected. | No hints that there is group | Cannot anchor selectors or apply transforms; empty groups invisible. |
180180
| 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. |
181181
| 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. |
182182
| 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-
| 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. |
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. |
184184
| 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`. |
185185
| 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-
| 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. |
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. |
187187
| 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. |
188188
| 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-
| 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. |
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. |
190190
| 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. |
191191
| 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-
| 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. |
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. |

0 commit comments

Comments
 (0)