feat: nested material removal and designer actions

Author: hackycy

packages/core/src/command.test.ts

@@ -2,7 +2,7 @@ import type { DocumentSchema, MaterialNode } from '@easyink/schema'
 import type { Command } from './command'
 import { describe, expect, it } from 'vitest'
 import { CommandManager } from './command'
-import { AddElementGroupCommand, RemoveElementGroupCommand, RemoveMaterialCommand } from './commands'
+import { AddElementGroupCommand, RemoveElementGroupCommand, RemoveMaterialCommand, UpdateMaterialMetaCommand } from './commands'
 
 function makeCommand(id: string, log: string[]): Command {
   return {
@@ -338,4 +338,28 @@ describe('logical element group commands', () => {
     expect(schema.elements.map(node => node.id)).toEqual(['a', 'b', 'c'])
     expect(schema.groups).toEqual([{ id: 'grp_1', memberIds: ['a', 'b', 'c'] }])
   })
+
+  it('updates and removes child elements through undoable commands', () => {
+    const schema = makeSchema()
+    schema.elements = [
+      {
+        ...makeNode('parent'),
+        children: [makeNode('child')],
+      },
+    ]
+    const manager = new CommandManager()
+
+    manager.execute(new UpdateMaterialMetaCommand(schema.elements, 'child', { hidden: true }))
+    expect(schema.elements[0]!.children![0]!.hidden).toBe(true)
+
+    manager.execute(new RemoveMaterialCommand(schema.elements, 'child', schema))
+    expect(schema.elements[0]!.children).toEqual([])
+
+    manager.undo()
+    expect(schema.elements[0]!.children!.map(node => node.id)).toEqual(['child'])
+    expect(schema.elements[0]!.children![0]!.hidden).toBe(true)
+
+    manager.undo()
+    expect(schema.elements[0]!.children![0]!.hidden).toBeUndefined()
+  })
 })

packages/core/src/commands/document.ts

@@ -3,7 +3,7 @@ import type { Command } from '../command'
 import type { EditorSurfacePlan } from '../editor-surface-plan'
 import type { MaterialResizeSideEffect } from '../material-extension'
 import { deepClone, generateId } from '@easyink/shared'
-import { asRecord, findNode, getByPath, setByPath } from './helpers'
+import { asRecord, findNode, findNodeLocation, getByPath, setByPath } from './helpers'
 
 // ─── Document Commands ──────────────────────────────────────────────
 
@@ -34,30 +34,37 @@ export class RemoveMaterialCommand implements Command {
   readonly description = 'Remove material'
   private snapshot: MaterialNode | undefined
   private groupsSnapshot: ElementGroupSchema[] | undefined
+  private collection: MaterialNode[]
+  private parentPath: number[] = []
   private index = -1
 
   constructor(
     private elements: MaterialNode[],
     private nodeId: string,
     private schema?: DocumentSchema,
-  ) {}
+  ) {
+    this.collection = elements
+  }
 
   execute(): void {
-    const idx = this.elements.findIndex(el => el.id === this.nodeId)
-    if (idx < 0)
+    const location = findNodeLocation(this.elements, this.nodeId)
+    if (!location)
       return
-    this.index = idx
-    this.snapshot = deepClone(this.elements[idx]!)
-    this.elements.splice(idx, 1)
+    this.index = location.index
+    this.collection = location.collection
+    this.parentPath = location.path.slice(0, -1)
+    this.snapshot = deepClone(location.node)
+    location.collection.splice(location.index, 1)
     if (this.schema?.groups) {
       this.groupsSnapshot = deepClone(this.schema.groups)
       pruneElementFromGroups(this.schema, this.nodeId)
     }
   }
 
   undo(): void {
+    const collection = resolveCollectionByPath(this.elements, this.parentPath) ?? this.collection
     if (this.snapshot)
-      this.elements.splice(this.index, 0, this.snapshot)
+      collection.splice(this.index, 0, this.snapshot)
     if (this.schema && this.groupsSnapshot)
       this.schema.groups = deepClone(this.groupsSnapshot)
   }
@@ -127,6 +134,17 @@ function pruneElementFromGroups(schema: DocumentSchema, elementId: string): void
   schema.groups = nextGroups
 }
 
+function resolveCollectionByPath(elements: MaterialNode[], parentPath: number[]): MaterialNode[] | undefined {
+  let collection = elements
+  for (const index of parentPath) {
+    const node = collection[index]
+    if (!node)
+      return undefined
+    collection = node.children ?? (node.children = [])
+  }
+  return collection
+}
+
 export class MoveMaterialCommand implements Command {
   readonly id = generateId('cmd')
   readonly type = 'move-material'

packages/core/src/commands/helpers.ts

@@ -1,7 +1,29 @@
 import type { MaterialNode } from '@easyink/schema'
 
 export function findNode(elements: MaterialNode[], id: string): MaterialNode | undefined {
-  return elements.find(el => el.id === id)
+  return findNodeLocation(elements, id)?.node
+}
+
+export interface NodeLocation {
+  node: MaterialNode
+  collection: MaterialNode[]
+  index: number
+  path: number[]
+}
+
+export function findNodeLocation(elements: MaterialNode[], id: string, basePath: number[] = []): NodeLocation | undefined {
+  for (let index = 0; index < elements.length; index++) {
+    const node = elements[index]!
+    const path = [...basePath, index]
+    if (node.id === id)
+      return { node, collection: elements, index, path }
+    if (node.children) {
+      const child = findNodeLocation(node.children, id, path)
+      if (child)
+        return child
+    }
+  }
+  return undefined
 }
 
 export function asRecord(obj: unknown): Record<string, unknown> {

packages/designer/src/components/StructureTree.vue

@@ -1,11 +1,11 @@
 <script setup lang="ts">
 import type { MaterialNode } from '@easyink/schema'
 import type { TreeNode } from '@easyink/ui'
-import { UpdateMaterialMetaCommand } from '@easyink/core'
-import { IconHidden, IconLock } from '@easyink/icons'
+import { IconDelete, IconHidden, IconLock, IconPreview } from '@easyink/icons'
 import { EiIcon, EiTree } from '@easyink/ui'
 import { computed } from 'vue'
 import { useDesignerStore } from '../composables'
+import { deleteMaterialNodes, toggleMaterialHidden, updateMaterialMeta } from '../interactions/element-actions'
 import { selectOne } from '../interactions/selection-api'
 
 const store = useDesignerStore()
@@ -43,18 +43,20 @@ function handleSelect(node: TreeNode) {
   selectOne(store, node.id)
 }
 
-function updateNodeMeta(node: MaterialNode, updates: Partial<Record<'hidden' | 'locked', boolean | undefined>>) {
-  store.commands.execute(new UpdateMaterialMetaCommand(store.schema.elements, node.id, updates))
+function handleUnlock(node: MaterialNode) {
+  updateMaterialMeta(store, 'Unlock', [node], { locked: false })
 }
 
-function handleUnlock(node: MaterialNode) {
-  updateNodeMeta(node, { locked: false })
+function handleToggleHidden(node: MaterialNode) {
+  toggleMaterialHidden(store, node)
+}
+
+function handleDelete(node: MaterialNode) {
+  deleteMaterialNodes(store, [node])
 }
 
-function handleShow(node: MaterialNode) {
-  if (node.locked)
-    return
-  updateNodeMeta(node, { hidden: false })
+function visibilityTitle(node: MaterialNode): string {
+  return store.t(node.hidden ? 'designer.context.show' : 'designer.context.hide')
 }
 </script>
 
@@ -66,37 +68,86 @@ function handleShow(node: MaterialNode) {
     @select="handleSelect"
   >
     <template #suffix="{ node }">
-      <EiIcon
+      <button
         v-if="(node.data as MaterialNode)?.locked"
-        :icon="IconLock"
-        :size="12"
-        :stroke-width="1.5"
-        class="structure-tree__status structure-tree__status--action"
+        type="button"
+        class="structure-tree__action"
+        :title="store.t('designer.context.unlock')"
+        :aria-label="store.t('designer.context.unlock')"
         @click.stop="handleUnlock(node.data as MaterialNode)"
-      />
-      <EiIcon
-        v-if="(node.data as MaterialNode)?.hidden"
-        :icon="IconHidden"
-        :size="12"
-        :stroke-width="1.5"
-        class="structure-tree__status"
-        :class="{ 'structure-tree__status--action': !(node.data as MaterialNode)?.locked }"
-        @click.stop="handleShow(node.data as MaterialNode)"
-      />
+      >
+        <EiIcon
+          :icon="IconLock"
+          :size="12"
+          :stroke-width="1.5"
+        />
+      </button>
+      <button
+        type="button"
+        class="structure-tree__action"
+        :disabled="(node.data as MaterialNode)?.locked"
+        :title="visibilityTitle(node.data as MaterialNode)"
+        :aria-label="visibilityTitle(node.data as MaterialNode)"
+        @click.stop="handleToggleHidden(node.data as MaterialNode)"
+      >
+        <EiIcon
+          :icon="(node.data as MaterialNode)?.hidden ? IconHidden : IconPreview"
+          :size="12"
+          :stroke-width="1.5"
+        />
+      </button>
+      <button
+        type="button"
+        class="structure-tree__action structure-tree__action--danger"
+        :disabled="(node.data as MaterialNode)?.locked"
+        :title="store.t('designer.context.delete')"
+        :aria-label="store.t('designer.context.delete')"
+        @click.stop="handleDelete(node.data as MaterialNode)"
+      >
+        <EiIcon
+          :icon="IconDelete"
+          :size="12"
+          :stroke-width="1.5"
+        />
+      </button>
     </template>
   </EiTree>
 </template>
 
 <style scoped lang="scss">
-.structure-tree__status {
+.structure-tree__action {
+  width: 18px;
+  height: 18px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0;
   color: var(--ei-text-secondary, #999);
+  background: transparent;
+  border: 0;
+  border-radius: 4px;
+  cursor: pointer;
+
+  &:hover {
+    color: var(--ei-primary, #1890ff);
+    background: var(--ei-hover-bg, #f0f0f0);
+  }
 
-  &--action {
-    cursor: pointer;
+  &:disabled {
+    color: var(--ei-text-tertiary, #ccc);
+    cursor: not-allowed;
 
     &:hover {
-      color: var(--ei-primary, #1890ff);
+      background: transparent;
     }
   }
 }
+
+.structure-tree__action--danger {
+  color: var(--ei-text-secondary, #999);
+
+  &:hover:not(:disabled) {
+    color: var(--ei-danger, #ff4d4f);
+  }
+}
 </style>

packages/designer/src/interactions/element-actions.test.ts

@@ -0,0 +1,50 @@
+import type { MaterialNode } from '@easyink/schema'
+import { describe, expect, it, vi } from 'vitest'
+import { DesignerStore } from '../store/designer-store'
+import { deleteMaterialNodes, toggleMaterialHidden } from './element-actions'
+
+function makeNode(id: string, input: Partial<MaterialNode> = {}): MaterialNode {
+  return { id, type: 'rect', x: 0, y: 0, width: 10, height: 10, props: {}, ...input } as MaterialNode
+}
+
+function makeStore(elements: MaterialNode[], selected: string[] = []): DesignerStore {
+  const store = new DesignerStore({
+    unit: 'px',
+    page: { mode: 'fixed', width: 100, height: 100 },
+    guides: { x: [], y: [] },
+    elements,
+  })
+  if (selected.length > 0)
+    store.selection.selectMultiple(selected)
+  vi.spyOn(store.commands, 'beginTransaction')
+  vi.spyOn(store.commands, 'commitTransaction')
+  vi.spyOn(store.commands, 'rollbackTransaction')
+  return store
+}
+
+describe('element actions', () => {
+  it('toggles hidden state through an undoable transaction', () => {
+    const node = makeNode('a')
+    const store = makeStore([node])
+
+    expect(toggleMaterialHidden(store, node)).toBe(true)
+
+    expect(node.hidden).toBe(true)
+    expect(store.commands.beginTransaction).toHaveBeenCalledWith('Hide')
+    store.commands.undo()
+    expect(node.hidden).toBeUndefined()
+  })
+
+  it('deletes hidden unlocked nodes and removes them from selection', () => {
+    const hidden = makeNode('hidden', { hidden: true })
+    const locked = makeNode('locked', { locked: true })
+    const store = makeStore([hidden, locked], ['hidden', 'locked'])
+
+    expect(deleteMaterialNodes(store, [hidden, locked])).toBe(1)
+
+    expect(store.schema.elements.map(node => node.id)).toEqual(['locked'])
+    expect(store.selection.ids).toEqual(['locked'])
+    expect(store.commands.beginTransaction).toHaveBeenCalledWith('Delete')
+    expect(store.commands.rollbackTransaction).not.toHaveBeenCalled()
+  })
+})

packages/designer/src/interactions/element-actions.ts

@@ -0,0 +1,57 @@
+import type { MaterialNode } from '@easyink/schema'
+import type { DesignerStore } from '../store/designer-store'
+import { RemoveMaterialCommand, UpdateMaterialMetaCommand } from '@easyink/core'
+import { removeFromSelection } from './selection-api'
+
+type MaterialMetaUpdates = Partial<Record<'hidden' | 'locked', boolean | undefined>>
+
+function runTransaction<T>(store: DesignerStore, label: string, fn: () => T): T {
+  store.commands.beginTransaction(label)
+  try {
+    const result = fn()
+    store.commands.commitTransaction()
+    return result
+  }
+  catch (error) {
+    store.commands.rollbackTransaction()
+    throw error
+  }
+}
+
+export function updateMaterialMeta(
+  store: DesignerStore,
+  label: string,
+  nodes: readonly MaterialNode[],
+  updates: MaterialMetaUpdates,
+): number {
+  if (nodes.length === 0)
+    return 0
+
+  runTransaction(store, label, () => {
+    for (const node of nodes)
+      store.commands.execute(new UpdateMaterialMetaCommand(store.schema.elements, node.id, updates))
+  })
+  return nodes.length
+}
+
+export function toggleMaterialHidden(store: DesignerStore, node: MaterialNode): boolean {
+  if (node.locked)
+    return false
+  const hidden = node.hidden !== true
+  updateMaterialMeta(store, hidden ? 'Hide' : 'Show', [node], { hidden })
+  return true
+}
+
+export function deleteMaterialNodes(store: DesignerStore, nodes: readonly MaterialNode[]): number {
+  const deletableNodes = nodes.filter(node => !node.locked)
+  if (deletableNodes.length === 0)
+    return 0
+
+  runTransaction(store, 'Delete', () => {
+    for (const node of deletableNodes)
+      store.commands.execute(new RemoveMaterialCommand(store.schema.elements, node.id, store.schema))
+  })
+
+  removeFromSelection(store, deletableNodes.map(node => node.id))
+  return deletableNodes.length
+}