@sulesky/next-core 1.0.3

package/src/effects/useContentEditableEffect.ts

@@ -0,0 +1,207 @@
+import { Path } from '@formily/path'
+import { requestIdle, globalThisPolyfill } from '@sulesky/next-shared'
+import { Engine, TreeNode } from '../models'
+import { MouseDoubleClickEvent, MouseClickEvent } from '../events'
+
+type GlobalState = {
+  activeElements: Map<HTMLInputElement, TreeNode>
+  requestTimer: any
+  isComposition: boolean
+  queue: (() => void)[]
+}
+
+function getAllRanges(sel: Selection) {
+  const ranges = []
+  for (let i = 0; i < sel.rangeCount; i++) {
+    const range = sel.getRangeAt(i)
+    ranges[i] = {
+      collapsed: range.collapsed,
+      startOffset: range.startOffset,
+      endOffset: range.endOffset,
+    }
+  }
+  return ranges
+}
+
+function setEndOfContenteditable(contentEditableElement: Element) {
+  const range = document.createRange()
+  range.selectNodeContents(contentEditableElement)
+  range.collapse(false)
+  const selection = globalThisPolyfill.getSelection()
+  selection.removeAllRanges()
+  selection.addRange(range)
+}
+
+function createCaretCache(el: Element) {
+  const currentSelection = globalThisPolyfill.getSelection()
+  if (currentSelection.containsNode(el)) return
+  const ranges = getAllRanges(currentSelection)
+  return (offset = 0) => {
+    const sel = globalThisPolyfill.getSelection()
+    const firstNode = el.childNodes[0]
+    if (!firstNode) return
+    sel.removeAllRanges()
+    ranges.forEach((item) => {
+      const range = document.createRange()
+      range.collapse(item.collapsed)
+      range.setStart(firstNode, item.startOffset + offset)
+      range.setEnd(firstNode, item.endOffset + offset)
+      sel.addRange(range)
+    })
+  }
+}
+
+export const useContentEditableEffect = (engine: Engine) => {
+  const globalState: GlobalState = {
+    activeElements: new Map(),
+    queue: [],
+    requestTimer: null,
+    isComposition: false,
+  }
+
+  function onKeyDownHandler(event: KeyboardEvent) {
+    if (event.key === 'Enter') {
+      event.stopPropagation()
+      event.preventDefault()
+    }
+  }
+
+  function onInputHandler(event: InputEvent) {
+    const node = globalState.activeElements.get(this)
+    event.stopPropagation()
+    event.preventDefault()
+    if (node) {
+      const target = event.target as Element
+      const handler = () => {
+        globalState.queue.length = 0
+        if (globalState.isComposition) return
+        const restore = createCaretCache(target)
+        Path.setIn(
+          node.props,
+          this.getAttribute(engine.props.contentEditableAttrName),
+          target?.textContent
+        )
+        requestIdle(() => {
+          node.takeSnapshot('update:node:props')
+          restore()
+        })
+      }
+      globalState.queue.push(handler)
+      clearTimeout(globalState.requestTimer)
+      globalState.requestTimer = setTimeout(handler, 600)
+    }
+  }
+
+  function onSelectionChangeHandler() {
+    clearTimeout(globalState.requestTimer)
+    globalState.requestTimer = setTimeout(
+      globalState.queue[globalState.queue.length - 1],
+      600
+    )
+  }
+
+  function onCompositionHandler(event: CompositionEvent) {
+    if (event.type === 'compositionend') {
+      globalState.isComposition = false
+      onInputHandler(event as any)
+    } else {
+      clearTimeout(globalState.requestTimer)
+      globalState.isComposition = true
+    }
+  }
+
+  function onPastHandler(event: ClipboardEvent) {
+    event.preventDefault()
+    const node = globalState.activeElements.get(this)
+    const text = event.clipboardData.getData('text')
+    const selObj = globalThisPolyfill.getSelection()
+    const target = event.target as Element
+    const selRange = selObj.getRangeAt(0)
+    const restore = createCaretCache(target)
+    selRange.deleteContents()
+    selRange.insertNode(document.createTextNode(text))
+    Path.setIn(
+      node.props,
+      this.getAttribute(engine.props.contentEditableAttrName),
+      target.textContent
+    )
+    restore(text.length)
+  }
+
+  function findTargetNodeId(element: Element) {
+    if (!element) return
+    const nodeId = element.getAttribute(
+      engine.props.contentEditableNodeIdAttrName
+    )
+    if (nodeId) return nodeId
+    const parent = element.closest(`*[${engine.props.nodeIdAttrName}]`)
+    if (parent) return parent.getAttribute(engine.props.nodeIdAttrName)
+  }
+
+  engine.subscribeTo(MouseClickEvent, (event) => {
+    const target = event.data.target as Element
+    const editableElement = target?.closest?.(
+      `*[${engine.props.contentEditableAttrName}]`
+    )
+    if (
+      editableElement &&
+      editableElement.getAttribute('contenteditable') === 'true'
+    )
+      return
+    globalState.activeElements.forEach((node, element) => {
+      globalState.activeElements.delete(element)
+      element.removeAttribute('contenteditable')
+      element.removeAttribute('spellcheck')
+      element.removeEventListener('input', onInputHandler)
+      element.removeEventListener('compositionstart', onCompositionHandler)
+      element.removeEventListener('compositionupdate', onCompositionHandler)
+      element.removeEventListener('compositionend', onCompositionHandler)
+      element.removeEventListener('past', onPastHandler)
+      document.removeEventListener('selectionchange', onSelectionChangeHandler)
+    })
+  })
+
+  engine.subscribeTo(MouseDoubleClickEvent, (event) => {
+    const target = event.data.target as Element
+    const editableElement = target?.closest?.(
+      `*[${engine.props.contentEditableAttrName}]`
+    ) as HTMLInputElement
+    const workspace = engine.workbench.activeWorkspace
+    const tree = workspace.operation.tree
+    if (editableElement) {
+      const editable = editableElement.getAttribute('contenteditable')
+      if (editable === 'false' || !editable) {
+        const nodeId = findTargetNodeId(editableElement)
+        if (nodeId) {
+          const targetNode = tree.findById(nodeId)
+          if (targetNode) {
+            globalState.activeElements.set(editableElement, targetNode)
+            editableElement.setAttribute('spellcheck', 'false')
+            editableElement.setAttribute('contenteditable', 'true')
+            editableElement.focus()
+            editableElement.addEventListener('input', onInputHandler)
+            editableElement.addEventListener(
+              'compositionstart',
+              onCompositionHandler
+            )
+            editableElement.addEventListener(
+              'compositionupdate',
+              onCompositionHandler
+            )
+            editableElement.addEventListener(
+              'compositionend',
+              onCompositionHandler
+            )
+            editableElement.addEventListener('keydown', onKeyDownHandler)
+            editableElement.addEventListener('paste', onPastHandler)
+            document.addEventListener(
+              'selectionchange',
+              onSelectionChangeHandler
+            )
+            setEndOfContenteditable(editableElement)
+          }
+        }
+      }
+    }
+  })
+}

package/src/effects/useCursorEffect.ts

@@ -0,0 +1,62 @@
+import { Engine, CursorStatus } from '../models'
+import {
+  MouseMoveEvent,
+  DragStartEvent,
+  DragMoveEvent,
+  DragStopEvent,
+} from '../events'
+import { requestIdle } from '@sulesky/next-shared'
+
+export const useCursorEffect = (engine: Engine) => {
+  engine.subscribeTo(MouseMoveEvent, (event) => {
+    engine.cursor.setStatus(
+      engine.cursor.status === CursorStatus.Dragging ||
+        engine.cursor.status === CursorStatus.DragStart
+        ? engine.cursor.status
+        : CursorStatus.Normal
+    )
+    if (engine.cursor.status === CursorStatus.Dragging) return
+    engine.cursor.setPosition(event.data)
+  })
+  engine.subscribeTo(DragStartEvent, (event) => {
+    engine.cursor.setStatus(CursorStatus.DragStart)
+    engine.cursor.setDragStartPosition(event.data)
+  })
+  engine.subscribeTo(DragMoveEvent, (event) => {
+    engine.cursor.setStatus(CursorStatus.Dragging)
+    engine.cursor.setPosition(event.data)
+  })
+  engine.subscribeTo(DragStopEvent, (event) => {
+    engine.cursor.setStatus(CursorStatus.DragStop)
+    engine.cursor.setDragEndPosition(event.data)
+    engine.cursor.setDragStartPosition(null)
+    requestIdle(() => {
+      engine.cursor.setStatus(CursorStatus.Normal)
+    })
+  })
+  engine.subscribeTo(MouseMoveEvent, (event) => {
+    const currentWorkspace = event?.context?.workspace
+    if (!currentWorkspace) return
+    const operation = currentWorkspace.operation
+    if (engine.cursor.status !== CursorStatus.Normal) {
+      operation.hover.clear()
+      return
+    }
+    const target = event.data.target as HTMLElement
+    const el = target?.closest?.(`
+      *[${engine.props.nodeIdAttrName}],
+      *[${engine.props.outlineNodeIdAttrName}]
+    `)
+    if (!el?.getAttribute) {
+      return
+    }
+    const nodeId = el.getAttribute(engine.props.nodeIdAttrName)
+    const outlineNodeId = el.getAttribute(engine.props.outlineNodeIdAttrName)
+    const node = operation.tree.findById(nodeId || outlineNodeId)
+    if (node) {
+      operation.hover.setHover(node)
+    } else {
+      operation.hover.clear()
+    }
+  })
+}

package/src/effects/useDragDropEffect.ts

@@ -0,0 +1,185 @@
+import {
+  Engine,
+  ClosestPosition,
+  CursorType,
+  CursorDragType,
+  TreeNode,
+} from '../models'
+import {
+  DragStartEvent,
+  DragMoveEvent,
+  DragStopEvent,
+  ViewportScrollEvent,
+} from '../events'
+import { Point } from '@sulesky/next-shared'
+
+export const useDragDropEffect = (engine: Engine) => {
+  engine.subscribeTo(DragStartEvent, (event) => {
+    if (engine.cursor.type !== CursorType.Normal) return
+    const target = event.data.target as HTMLElement
+    const el = target?.closest(`
+       *[${engine.props.nodeIdAttrName}],
+       *[${engine.props.sourceIdAttrName}],
+       *[${engine.props.outlineNodeIdAttrName}]
+      `)
+    const handler = target?.closest(
+      `*[${engine.props.nodeDragHandlerAttrName}]`
+    )
+    const helper = handler?.closest(
+      `*[${engine.props.nodeSelectionIdAttrName}]`
+    )
+    if (!el?.getAttribute && !handler) return
+    const sourceId = el?.getAttribute(engine.props.sourceIdAttrName)
+    const outlineId = el?.getAttribute(engine.props.outlineNodeIdAttrName)
+    const handlerId = helper?.getAttribute(engine.props.nodeSelectionIdAttrName)
+    const nodeId = el?.getAttribute(engine.props.nodeIdAttrName)
+    engine.workbench.eachWorkspace((currentWorkspace) => {
+      const operation = currentWorkspace.operation
+      const moveHelper = operation.moveHelper
+      if (nodeId || outlineId || handlerId) {
+        const node = engine.findNodeById(outlineId || nodeId || handlerId)
+        if (node) {
+          if (!node.allowDrag()) return
+          if (node === node.root) return
+          const validSelected = engine
+            .getAllSelectedNodes()
+            .filter((node) => node.allowDrag())
+          if (validSelected.some((selectNode) => selectNode === node)) {
+            moveHelper.dragStart({ dragNodes: TreeNode.sort(validSelected) })
+          } else {
+            moveHelper.dragStart({ dragNodes: [node] })
+          }
+        }
+      } else if (sourceId) {
+        const sourceNode = engine.findNodeById(sourceId)
+        if (sourceNode) {
+          moveHelper.dragStart({ dragNodes: [sourceNode] })
+        }
+      }
+    })
+    engine.cursor.setStyle('move')
+  })
+
+  engine.subscribeTo(DragMoveEvent, (event) => {
+    if (engine.cursor.type !== CursorType.Normal) return
+    if (engine.cursor.dragType !== CursorDragType.Move) return
+    const target = event.data.target as HTMLElement
+    const el = target?.closest(`
+      *[${engine.props.nodeIdAttrName}],
+      *[${engine.props.outlineNodeIdAttrName}]
+    `)
+    const point = new Point(event.data.topClientX, event.data.topClientY)
+    const nodeId = el?.getAttribute(engine.props.nodeIdAttrName)
+    const outlineId = el?.getAttribute(engine.props.outlineNodeIdAttrName)
+    engine.workbench.eachWorkspace((currentWorkspace) => {
+      const operation = currentWorkspace.operation
+      const moveHelper = operation.moveHelper
+      const dragNodes = moveHelper.dragNodes
+      const tree = operation.tree
+      if (!dragNodes.length) return
+      const touchNode = tree.findById(outlineId || nodeId)
+      moveHelper.dragMove({
+        point,
+        touchNode,
+      })
+    })
+  })
+
+  engine.subscribeTo(ViewportScrollEvent, (event) => {
+    if (engine.cursor.type !== CursorType.Normal) return
+    if (engine.cursor.dragType !== CursorDragType.Move) return
+    const point = new Point(
+      engine.cursor.position.topClientX,
+      engine.cursor.position.topClientY
+    )
+    const currentWorkspace =
+      event?.context?.workspace ?? engine.workbench.activeWorkspace
+    if (!currentWorkspace) return
+    const operation = currentWorkspace.operation
+    const moveHelper = operation.moveHelper
+    if (!moveHelper.dragNodes.length) return
+    const tree = operation.tree
+    const viewport = currentWorkspace.viewport
+    const outline = currentWorkspace.outline
+    const viewportTarget = viewport.elementFromPoint(point)
+    const outlineTarget = outline.elementFromPoint(point)
+    const viewportNodeElement = viewportTarget?.closest(`
+      *[${engine.props.nodeIdAttrName}],
+      *[${engine.props.outlineNodeIdAttrName}]
+    `)
+    const outlineNodeElement = outlineTarget?.closest(`
+    *[${engine.props.nodeIdAttrName}],
+    *[${engine.props.outlineNodeIdAttrName}]
+  `)
+    const nodeId = viewportNodeElement?.getAttribute(
+      engine.props.nodeIdAttrName
+    )
+    const outlineNodeId = outlineNodeElement?.getAttribute(
+      engine.props.outlineNodeIdAttrName
+    )
+    const touchNode = tree.findById(outlineNodeId || nodeId)
+    moveHelper.dragMove({ point, touchNode })
+  })
+
+  engine.subscribeTo(DragStopEvent, () => {
+    if (engine.cursor.type !== CursorType.Normal) return
+    if (engine.cursor.dragType !== CursorDragType.Move) return
+    engine.workbench.eachWorkspace((currentWorkspace) => {
+      const operation = currentWorkspace.operation
+      const moveHelper = operation.moveHelper
+      const dragNodes = moveHelper.dragNodes
+      const closestNode = moveHelper.closestNode
+      const closestDirection = moveHelper.closestDirection
+      const selection = operation.selection
+      if (!dragNodes.length) return
+      if (dragNodes.length && closestNode && closestDirection) {
+        if (
+          closestDirection === ClosestPosition.After ||
+          closestDirection === ClosestPosition.Under
+        ) {
+          if (closestNode.allowSibling(dragNodes)) {
+            selection.batchSafeSelect(
+              closestNode.insertAfter(
+                ...TreeNode.filterDroppable(dragNodes, closestNode.parent)
+              )
+            )
+          }
+        } else if (
+          closestDirection === ClosestPosition.Before ||
+          closestDirection === ClosestPosition.Upper
+        ) {
+          if (closestNode.allowSibling(dragNodes)) {
+            selection.batchSafeSelect(
+              closestNode.insertBefore(
+                ...TreeNode.filterDroppable(dragNodes, closestNode.parent)
+              )
+            )
+          }
+        } else if (
+          closestDirection === ClosestPosition.Inner ||
+          closestDirection === ClosestPosition.InnerAfter
+        ) {
+          if (closestNode.allowAppend(dragNodes)) {
+            selection.batchSafeSelect(
+              closestNode.append(
+                ...TreeNode.filterDroppable(dragNodes, closestNode)
+              )
+            )
+            moveHelper.dragDrop({ dropNode: closestNode })
+          }
+        } else if (closestDirection === ClosestPosition.InnerBefore) {
+          if (closestNode.allowAppend(dragNodes)) {
+            selection.batchSafeSelect(
+              closestNode.prepend(
+                ...TreeNode.filterDroppable(dragNodes, closestNode)
+              )
+            )
+            moveHelper.dragDrop({ dropNode: closestNode })
+          }
+        }
+      }
+      moveHelper.dragEnd()
+    })
+    engine.cursor.setStyle('')
+  })
+}

package/src/effects/useFreeSelectionEffect.ts

@@ -0,0 +1,66 @@
+import { DragStopEvent } from '../events'
+import { Engine, CursorType, TreeNode, CursorDragType } from '../models'
+import {
+  calcRectByStartEndPoint,
+  isCrossRectInRect,
+  isRectInRect,
+  Point,
+  Rect,
+} from '@sulesky/next-shared'
+
+export const useFreeSelectionEffect = (engine: Engine) => {
+  engine.subscribeTo(DragStopEvent, (event) => {
+    if (engine.cursor.dragType !== CursorDragType.Move) {
+      return
+    }
+    engine.workbench.eachWorkspace((workspace) => {
+      const viewport = workspace.viewport
+      const dragEndPoint = new Point(
+        event.data.topClientX,
+        event.data.topClientY,
+      )
+      const dragStartOffsetPoint = viewport.getOffsetPoint(
+        new Point(
+          engine.cursor.dragStartPosition.topClientX,
+          engine.cursor.dragStartPosition.topClientY,
+        ),
+      )
+      const dragEndOffsetPoint = viewport.getOffsetPoint(
+        new Point(
+          engine.cursor.position.topClientX,
+          engine.cursor.position.topClientY,
+        ),
+      )
+      if (!viewport.isPointInViewport(dragEndPoint, false)) return
+      const tree = workspace.operation.tree
+      const selectionRect = calcRectByStartEndPoint(
+        dragStartOffsetPoint,
+        dragEndOffsetPoint,
+        viewport.dragScrollXDelta,
+        viewport.dragScrollYDelta,
+      )
+      const selected: [TreeNode, Rect][] = []
+      tree.eachChildren((node) => {
+        const nodeRect = viewport.getValidNodeOffsetRect(node)
+        if (nodeRect && isCrossRectInRect(selectionRect, nodeRect)) {
+          selected.push([node, nodeRect])
+        }
+      })
+      const selectedNodes: TreeNode[] = selected.reduce(
+        (buf, [node, nodeRect]) => {
+          if (isRectInRect(nodeRect, selectionRect)) {
+            if (selected.some(([selectNode]) => selectNode.isMyParents(node))) {
+              return buf
+            }
+          }
+          return buf.concat(node)
+        },
+        [],
+      )
+      workspace.operation.selection.batchSafeSelect(selectedNodes)
+    })
+    if (engine.cursor.type === CursorType.Selection) {
+      engine.cursor.setType(CursorType.Normal)
+    }
+  })
+}

package/src/effects/useKeyboardEffect.ts

@@ -0,0 +1,20 @@
+import { Engine } from '../models'
+import { KeyDownEvent, KeyUpEvent } from '../events'
+
+export const useKeyboardEffect = (engine: Engine) => {
+  engine.subscribeTo(KeyDownEvent, (event) => {
+    const keyboard = engine.keyboard
+    if (!keyboard) return
+    const workspace =
+      engine.workbench.activeWorkspace || engine.workbench.currentWorkspace
+    keyboard.handleKeyboard(event, workspace.getEventContext())
+  })
+
+  engine.subscribeTo(KeyUpEvent, (event) => {
+    const keyboard = engine.keyboard
+    if (!keyboard) return
+    const workspace =
+      engine.workbench.activeWorkspace || engine.workbench.currentWorkspace
+    keyboard.handleKeyboard(event, workspace.getEventContext())
+  })
+}

package/src/effects/useResizeEffect.ts

@@ -0,0 +1,92 @@
+import { Engine, CursorDragType } from '../models'
+import { DragStartEvent, DragMoveEvent, DragStopEvent } from '../events'
+
+export const useResizeEffect = (engine: Engine) => {
+  const findStartNodeHandler = (target: HTMLElement) => {
+    const handler = target?.closest(
+      `*[${engine.props.nodeResizeHandlerAttrName}]`
+    )
+    if (handler) {
+      const direction = handler.getAttribute(
+        engine.props.nodeResizeHandlerAttrName
+      )
+      if (direction) {
+        const element = handler.closest(
+          `*[${engine.props.nodeSelectionIdAttrName}]`
+        )
+        if (element) {
+          const nodeId = element.getAttribute(
+            engine.props.nodeSelectionIdAttrName
+          )
+          if (nodeId) {
+            const node = engine.findNodeById(nodeId)
+            if (node) {
+              return { direction, node, element }
+            }
+          }
+        }
+      }
+    }
+    return
+  }
+
+  engine.subscribeTo(DragStartEvent, (event) => {
+    const target = event.data.target as HTMLElement
+    const currentWorkspace =
+      event.context?.workspace ?? engine.workbench.activeWorkspace
+    if (!currentWorkspace) return
+    const handler = findStartNodeHandler(target)
+    const helper = currentWorkspace.operation.transformHelper
+    if (handler) {
+      const selectionElement = handler.element.closest(
+        `*[${engine.props.nodeSelectionIdAttrName}]`
+      ) as HTMLElement
+      if (selectionElement) {
+        const nodeId = selectionElement.getAttribute(
+          engine.props.nodeSelectionIdAttrName
+        )
+        if (nodeId) {
+          const node = engine.findNodeById(nodeId)
+          if (node) {
+            helper.dragStart({
+              dragNodes: [node],
+              type: 'resize',
+              direction: handler.direction,
+            })
+          }
+        }
+      }
+    }
+  })
+
+  engine.subscribeTo(DragMoveEvent, (event) => {
+    if (engine.cursor.dragType !== CursorDragType.Resize) return
+    const currentWorkspace =
+      event.context?.workspace ?? engine.workbench.activeWorkspace
+    const helper = currentWorkspace?.operation.transformHelper
+    const dragNodes = helper.dragNodes
+    if (!dragNodes.length) return
+    helper.dragMove()
+    dragNodes.forEach((node) => {
+      const element = node.getElement()
+      helper.resize(node, (rect) => {
+        element.style.width = rect.width + 'px'
+        element.style.height = rect.height + 'px'
+        element.style.position = 'absolute'
+        element.style.left = '0px'
+        element.style.top = '0px'
+        element.style.transform = `translate3d(${rect.x}px,${rect.y}px,0)`
+      })
+    })
+  })
+
+  engine.subscribeTo(DragStopEvent, (event) => {
+    if (engine.cursor.dragType !== CursorDragType.Resize) return
+    const currentWorkspace =
+      event.context?.workspace ?? engine.workbench.activeWorkspace
+    const helper = currentWorkspace?.operation.transformHelper
+    if (helper) {
+      helper.dragEnd()
+    }
+  })
+}

package/src/effects/useSelectionEffect.ts

@@ -0,0 +1,68 @@
+import { Engine, CursorStatus } from '../models'
+import { MouseClickEvent } from '../events'
+import { KeyCode, Point } from '@sulesky/next-shared'
+
+export const useSelectionEffect = (engine: Engine) => {
+  engine.subscribeTo(MouseClickEvent, (event) => {
+    if (engine.cursor.status !== CursorStatus.Normal) return
+    const target: HTMLElement = event.data.target as any
+    const el = target?.closest?.(`
+      *[${engine.props.nodeIdAttrName}],
+      *[${engine.props.outlineNodeIdAttrName}]
+    `)
+    const isHelpers = target?.closest?.(
+      `*[${engine.props.nodeSelectionIdAttrName}]`
+    )
+    const currentWorkspace =
+      event.context?.workspace ?? engine.workbench.activeWorkspace
+    if (!currentWorkspace) return
+    if (!el?.getAttribute) {
+      const point = new Point(event.data.topClientX, event.data.topClientY)
+      const operation = currentWorkspace.operation
+      const viewport = currentWorkspace.viewport
+      const outline = currentWorkspace.outline
+      const isInViewport = viewport.isPointInViewport(point, false)
+      const isInOutline = outline.isPointInViewport(point, false)
+      if (isHelpers) return
+      if (isInViewport || isInOutline) {
+        const selection = operation.selection
+        const tree = operation.tree
+        selection.select(tree)
+      }
+      return
+    }
+    const nodeId = el.getAttribute(engine.props.nodeIdAttrName)
+    const structNodeId = el.getAttribute(engine.props.outlineNodeIdAttrName)
+    const operation = currentWorkspace.operation
+    const selection = operation.selection
+    const tree = operation.tree
+    const node = tree.findById(nodeId || structNodeId)
+    if (node) {
+      engine.keyboard.requestClean()
+      if (
+        engine.keyboard.isKeyDown(KeyCode.Meta) ||
+        engine.keyboard.isKeyDown(KeyCode.Control)
+      ) {
+        if (selection.has(node)) {
+          if (selection.selected.length > 1) {
+            selection.remove(node)
+          }
+        } else {
+          selection.add(node)
+        }
+      } else if (engine.keyboard.isKeyDown(KeyCode.Shift)) {
+        if (selection.has(node)) {
+          if (selection.selected.length > 1) {
+            selection.remove(node)
+          }
+        } else {
+          selection.crossAddTo(node)
+        }
+      } else {
+        selection.select(node)
+      }
+    } else {
+      selection.select(tree)
+    }
+  })
+}