@sulesky/next-core 1.0.3

package/src/models/Keyboard.ts

@@ -0,0 +1,126 @@
+import { observable, define, action } from '@formily/reactive'
+import { KeyCode } from '@sulesky/next-shared'
+import { Engine } from './Engine'
+import { Shortcut } from './Shortcut'
+import { AbstractKeyboardEvent } from '../events/keyboard/AbstractKeyboardEvent'
+import { IEngineContext } from '../types'
+
+const Modifiers: [string, KeyCode][] = [
+  ['metaKey', KeyCode.Meta],
+  ['shiftKey', KeyCode.Shift],
+  ['ctrlKey', KeyCode.Control],
+  ['altKey', KeyCode.Alt],
+]
+
+export interface IKeyboard {
+  engine: Engine
+}
+
+export class Keyboard {
+  engine: Engine
+  shortcuts: Shortcut[] = []
+  sequence: KeyCode[] = []
+  keyDown: KeyCode = null
+  modifiers = {}
+  requestTimer = null
+
+  constructor(engine?: Engine) {
+    this.engine = engine
+    this.shortcuts = engine.props?.shortcuts || []
+    this.makeObservable()
+  }
+
+  matchCodes(context: IEngineContext) {
+    for (let i = 0; i < this.shortcuts.length; i++) {
+      const shortcut = this.shortcuts[i]
+      if (shortcut.match(this.sequence, context)) {
+        return true
+      }
+    }
+    return false
+  }
+
+  preventCodes() {
+    return this.shortcuts.some((shortcut) => {
+      return shortcut.preventCodes(this.sequence)
+    })
+  }
+
+  includes(key: KeyCode) {
+    return this.sequence.some((code) => Shortcut.matchCode(code, key))
+  }
+
+  excludes(key: KeyCode) {
+    this.sequence = this.sequence.filter(
+      (code) => !Shortcut.matchCode(key, code)
+    )
+  }
+
+  addKeyCode(key: KeyCode) {
+    if (!this.includes(key)) {
+      this.sequence.push(key)
+    }
+  }
+
+  removeKeyCode(key: KeyCode) {
+    if (this.includes(key)) {
+      this.excludes(key)
+    }
+  }
+
+  isModifier(code: KeyCode) {
+    return Modifiers.some((modifier) => Shortcut.matchCode(modifier[1], code))
+  }
+
+  handleModifiers(event: AbstractKeyboardEvent) {
+    Modifiers.forEach(([key, code]) => {
+      if (event[key]) {
+        if (!this.includes(code)) {
+          this.sequence = [code].concat(this.sequence)
+        }
+      }
+    })
+  }
+
+  handleKeyboard(event: AbstractKeyboardEvent, context: IEngineContext) {
+    if (event.eventType === 'keydown') {
+      this.keyDown = event.data
+      this.addKeyCode(this.keyDown)
+      this.handleModifiers(event)
+      if (this.matchCodes(context)) {
+        this.sequence = []
+      }
+      this.requestClean(4000)
+      if (this.preventCodes()) {
+        event.preventDefault()
+        event.stopPropagation()
+      }
+    } else {
+      if (this.isModifier(event.data)) {
+        this.sequence = []
+      }
+      this.keyDown = null
+    }
+  }
+
+  isKeyDown(code: KeyCode) {
+    return this.keyDown === code
+  }
+
+  requestClean(duration = 320) {
+    clearTimeout(this.requestTimer)
+    this.requestTimer = setTimeout(() => {
+      this.keyDown = null
+      this.sequence = []
+      clearTimeout(this.requestTimer)
+    }, duration)
+  }
+
+  makeObservable() {
+    define(this, {
+      sequence: observable.shallow,
+      keyDown: observable.ref,
+      handleKeyboard: action,
+    })
+  }
+}

package/src/models/MoveHelper.ts

@@ -0,0 +1,383 @@
+import { Operation } from './Operation'
+import { TreeNode } from './TreeNode'
+import { observable, define, action } from '@formily/reactive'
+import {
+  calcDistanceOfPointToRect,
+  calcDistancePointToEdge,
+  isNearAfter,
+  isPointInRect,
+  IPoint,
+  Rect,
+} from '@sulesky/next-shared'
+import { DragNodeEvent, DropNodeEvent } from '../events'
+import { Viewport } from './Viewport'
+import { CursorDragType } from './Cursor'
+
+export enum ClosestPosition {
+  Before = 'BEFORE',
+  ForbidBefore = 'FORBID_BEFORE',
+  After = 'After',
+  ForbidAfter = 'FORBID_AFTER',
+  Upper = 'UPPER',
+  ForbidUpper = 'FORBID_UPPER',
+  Under = 'UNDER',
+  ForbidUnder = 'FORBID_UNDER',
+  Inner = 'INNER',
+  ForbidInner = 'FORBID_INNER',
+  InnerAfter = 'INNER_AFTER',
+  ForbidInnerAfter = 'FORBID_INNER_AFTER',
+  InnerBefore = 'INNER_BEFORE',
+  ForbidInnerBefore = 'FORBID_INNER_BEFORE',
+  Forbid = 'FORBID',
+}
+
+export interface IMoveHelperProps {
+  operation: Operation
+}
+
+export interface IMoveHelperDragStartProps {
+  dragNodes: TreeNode[]
+}
+
+export interface IMoveHelperDragDropProps {
+  dropNode: TreeNode
+}
+export interface IMoveHelperDragMoveProps {
+  touchNode: TreeNode
+  point: IPoint
+}
+
+export class MoveHelper {
+  operation: Operation
+
+  rootNode: TreeNode
+
+  dragNodes: TreeNode[] = []
+
+  touchNode: TreeNode = null
+
+  closestNode: TreeNode = null
+
+  activeViewport: Viewport = null
+
+  viewportClosestRect: Rect = null
+
+  outlineClosestRect: Rect = null
+
+  viewportClosestOffsetRect: Rect = null
+
+  outlineClosestOffsetRect: Rect = null
+
+  viewportClosestDirection: ClosestPosition = null
+
+  outlineClosestDirection: ClosestPosition = null
+
+  dragging = false
+
+  constructor(props: IMoveHelperProps) {
+    this.operation = props.operation
+    this.rootNode = this.operation.tree
+    this.makeObservable()
+  }
+
+  get cursor() {
+    return this.operation.engine.cursor
+  }
+
+  get viewport() {
+    return this.operation.workspace.viewport
+  }
+
+  get outline() {
+    return this.operation.workspace.outline
+  }
+
+  get hasDragNodes() {
+    return this.dragNodes.length > 0
+  }
+
+  get closestDirection() {
+    if (this.activeViewport === this.outline) {
+      return this.outlineClosestDirection
+    }
+    return this.viewportClosestDirection
+  }
+
+  getClosestLayout(viewport: Viewport) {
+    return viewport.getValidNodeLayout(this.closestNode)
+  }
+
+  calcClosestPosition(point: IPoint, viewport: Viewport): ClosestPosition {
+    const closestNode = this.closestNode
+    if (!closestNode || !viewport.isPointInViewport(point))
+      return ClosestPosition.Forbid
+    const closestRect = viewport.getValidNodeRect(closestNode)
+    const isInline = this.getClosestLayout(viewport) === 'horizontal'
+    if (!closestRect) {
+      return
+    }
+    const isAfter = isNearAfter(
+      point,
+      closestRect,
+      viewport.moveInsertionType === 'block' ? false : isInline
+    )
+    const getValidParent = (node: TreeNode) => {
+      if (!node) return
+      if (node.parent?.allowSibling(this.dragNodes)) return node.parent
+      return getValidParent(node.parent)
+    }
+    if (isPointInRect(point, closestRect, viewport.moveSensitive)) {
+      if (!closestNode.allowAppend(this.dragNodes)) {
+        if (!closestNode.allowSibling(this.dragNodes)) {
+          const parentClosestNode = getValidParent(closestNode)
+          if (parentClosestNode) {
+            this.closestNode = parentClosestNode
+          }
+          if (isInline) {
+            if (parentClosestNode) {
+              if (isAfter) {
+                return ClosestPosition.After
+              }
+              return ClosestPosition.Before
+            }
+            if (isAfter) {
+              return ClosestPosition.ForbidAfter
+            }
+            return ClosestPosition.ForbidBefore
+          } else {
+            if (parentClosestNode) {
+              if (isAfter) {
+                return ClosestPosition.Under
+              }
+              return ClosestPosition.Upper
+            }
+            if (isAfter) {
+              return ClosestPosition.ForbidUnder
+            }
+            return ClosestPosition.ForbidUpper
+          }
+        } else {
+          if (isInline) {
+            return isAfter ? ClosestPosition.After : ClosestPosition.Before
+          } else {
+            return isAfter ? ClosestPosition.Under : ClosestPosition.Upper
+          }
+        }
+      }
+      if (closestNode.contains(...this.dragNodes)) {
+        if (isAfter) {
+          return ClosestPosition.InnerAfter
+        }
+        return ClosestPosition.InnerBefore
+      } else {
+        return ClosestPosition.Inner
+      }
+    } else if (closestNode === closestNode.root) {
+      return isAfter ? ClosestPosition.InnerAfter : ClosestPosition.InnerBefore
+    } else {
+      if (!closestNode.allowSibling(this.dragNodes)) {
+        const parentClosestNode = getValidParent(closestNode)
+        if (parentClosestNode) {
+          this.closestNode = parentClosestNode
+        }
+        if (isInline) {
+          if (parentClosestNode) {
+            if (isAfter) {
+              return ClosestPosition.After
+            }
+            return ClosestPosition.Before
+          }
+          return isAfter
+            ? ClosestPosition.ForbidAfter
+            : ClosestPosition.ForbidBefore
+        } else {
+          if (parentClosestNode) {
+            if (isAfter) {
+              return ClosestPosition.Under
+            }
+            return ClosestPosition.Upper
+          }
+          return isAfter
+            ? ClosestPosition.ForbidUnder
+            : ClosestPosition.ForbidUpper
+        }
+      }
+      if (isInline) {
+        return isAfter ? ClosestPosition.After : ClosestPosition.Before
+      } else {
+        return isAfter ? ClosestPosition.Under : ClosestPosition.Upper
+      }
+    }
+  }
+
+  calcClosestNode(point: IPoint, viewport: Viewport): TreeNode {
+    if (this.touchNode) {
+      const touchNodeRect = viewport.getValidNodeRect(this.touchNode)
+      if (!touchNodeRect) return
+      if (this.touchNode?.children?.length) {
+        const touchDistance = calcDistancePointToEdge(point, touchNodeRect)
+        let minDistance = touchDistance
+        let minDistanceNode = this.touchNode
+        this.touchNode.eachChildren((node) => {
+          const rect = viewport.getElementRectById(node.id)
+          if (!rect) return
+          const distance = isPointInRect(point, rect, viewport.moveSensitive)
+            ? 0
+            : calcDistanceOfPointToRect(point, rect)
+          if (distance <= minDistance) {
+            minDistance = distance
+            minDistanceNode = node
+          }
+        })
+        return minDistanceNode
+      } else {
+        return this.touchNode
+      }
+    }
+    return this.operation.tree
+  }
+
+  calcClosestRect(viewport: Viewport, closestDirection: ClosestPosition): Rect {
+    const closestNode = this.closestNode
+    if (!closestNode || !closestDirection) return
+    const closestRect = viewport.getValidNodeRect(closestNode)
+    if (
+      closestDirection === ClosestPosition.InnerAfter ||
+      closestDirection === ClosestPosition.InnerBefore
+    ) {
+      return viewport.getChildrenRect(closestNode)
+    } else {
+      return closestRect
+    }
+  }
+
+  calcClosestOffsetRect(
+    viewport: Viewport,
+    closestDirection: ClosestPosition
+  ): Rect {
+    const closestNode = this.closestNode
+    if (!closestNode || !closestDirection) return
+    const closestRect = viewport.getValidNodeOffsetRect(closestNode)
+    if (
+      closestDirection === ClosestPosition.InnerAfter ||
+      closestDirection === ClosestPosition.InnerBefore
+    ) {
+      return viewport.getChildrenOffsetRect(closestNode)
+    } else {
+      return closestRect
+    }
+  }
+
+  dragStart(props: IMoveHelperDragStartProps) {
+    const nodes = TreeNode.filterDraggable(props?.dragNodes)
+    if (nodes.length) {
+      this.dragNodes = nodes
+      this.trigger(
+        new DragNodeEvent({
+          target: this.operation.tree,
+          source: this.dragNodes,
+        })
+      )
+      this.viewport.cacheElements()
+      this.cursor.setDragType(CursorDragType.Move)
+      this.dragging = true
+    }
+  }
+
+  dragMove(props: IMoveHelperDragMoveProps) {
+    const { point, touchNode } = props
+    if (!this.dragging) return
+    if (this.outline.isPointInViewport(point, false)) {
+      this.activeViewport = this.outline
+      this.touchNode = touchNode
+      this.closestNode = this.calcClosestNode(point, this.outline)
+    } else if (this.viewport.isPointInViewport(point, false)) {
+      this.activeViewport = this.viewport
+      this.touchNode = touchNode
+      this.closestNode = this.calcClosestNode(point, this.viewport)
+    }
+    if (!this.activeViewport) return
+
+    if (this.activeViewport === this.outline) {
+      this.outlineClosestDirection = this.calcClosestPosition(
+        point,
+        this.outline
+      )
+      this.viewportClosestDirection = this.outlineClosestDirection
+    } else {
+      this.viewportClosestDirection = this.calcClosestPosition(
+        point,
+        this.viewport
+      )
+      this.outlineClosestDirection = this.viewportClosestDirection
+    }
+    if (this.outline.mounted) {
+      this.outlineClosestRect = this.calcClosestRect(
+        this.outline,
+        this.outlineClosestDirection
+      )
+      this.outlineClosestOffsetRect = this.calcClosestOffsetRect(
+        this.outline,
+        this.outlineClosestDirection
+      )
+    }
+    if (this.viewport.mounted) {
+      this.viewportClosestRect = this.calcClosestRect(
+        this.viewport,
+        this.viewportClosestDirection
+      )
+      this.viewportClosestOffsetRect = this.calcClosestOffsetRect(
+        this.viewport,
+        this.viewportClosestDirection
+      )
+    }
+  }
+
+  dragDrop(props: IMoveHelperDragDropProps) {
+    this.trigger(
+      new DropNodeEvent({
+        target: this.operation.tree,
+        source: props?.dropNode,
+      })
+    )
+  }
+
+  dragEnd() {
+    this.dragging = false
+    this.dragNodes = []
+    this.touchNode = null
+    this.closestNode = null
+    this.activeViewport = null
+    this.outlineClosestDirection = null
+    this.outlineClosestOffsetRect = null
+    this.outlineClosestRect = null
+    this.viewportClosestDirection = null
+    this.viewportClosestOffsetRect = null
+    this.viewportClosestRect = null
+    this.viewport.clearCache()
+  }
+
+  trigger(event: any) {
+    if (this.operation) {
+      return this.operation.dispatch(event)
+    }
+  }
+
+  makeObservable() {
+    define(this, {
+      dragging: observable.ref,
+      dragNodes: observable.ref,
+      touchNode: observable.ref,
+      closestNode: observable.ref,
+      outlineClosestDirection: observable.ref,
+      outlineClosestOffsetRect: observable.ref,
+      outlineClosestRect: observable.ref,
+      viewportClosestDirection: observable.ref,
+      viewportClosestOffsetRect: observable.ref,
+      viewportClosestRect: observable.ref,
+      dragStart: action,
+      dragMove: action,
+      dragEnd: action,
+    })
+  }
+}

package/src/models/Operation.ts

@@ -0,0 +1,91 @@
+import { Workspace } from './Workspace'
+import { Engine } from './Engine'
+import { TreeNode, ITreeNode } from './TreeNode'
+import { Selection } from './Selection'
+import { Hover } from './Hover'
+import { TransformHelper } from './TransformHelper'
+import { MoveHelper } from './MoveHelper'
+import { cancelIdle, ICustomEvent, isFn, requestIdle } from '@sulesky/next-shared'
+
+export interface IOperation {
+  tree?: ITreeNode
+  selected?: string[]
+}
+
+export class Operation {
+  workspace: Workspace
+
+  engine: Engine
+
+  tree: TreeNode
+
+  selection: Selection
+
+  hover: Hover
+
+  transformHelper: TransformHelper
+
+  moveHelper: MoveHelper
+
+  requests = {
+    snapshot: null,
+  }
+
+  constructor(workspace: Workspace) {
+    this.engine = workspace.engine
+    this.workspace = workspace
+    this.tree = new TreeNode({
+      componentName: this.engine.props.rootComponentName,
+      ...this.engine.props.defaultComponentTree,
+      operation: this,
+    })
+    this.hover = new Hover({
+      operation: this,
+    })
+    this.selection = new Selection({
+      operation: this,
+    })
+    this.moveHelper = new MoveHelper({
+      operation: this,
+    })
+    this.transformHelper = new TransformHelper({
+      operation: this,
+    })
+    this.selection.select(this.tree)
+  }
+
+  dispatch(event: ICustomEvent, callback?: () => void) {
+    if (this.workspace.dispatch(event) === false) return
+    if (isFn(callback)) return callback()
+  }
+
+  snapshot(type?: string) {
+    cancelIdle(this.requests.snapshot)
+    if (
+      !this.workspace ||
+      !this.workspace.history ||
+      this.workspace.history.locking
+    )
+      return
+    this.requests.snapshot = requestIdle(() => {
+      this.workspace.history.push(type)
+    })
+  }
+
+  from(operation?: IOperation) {
+    if (!operation) return
+    if (operation.tree) {
+      this.tree.from(operation.tree)
+    }
+    if (operation.selected) {
+      this.selection.selected = operation.selected
+    }
+  }
+
+  serialize(): IOperation {
+    return {
+      tree: this.tree.serialize(),
+      selected: [this.tree.id],
+    }
+  }
+}

package/src/models/Screen.ts

@@ -0,0 +1,83 @@
+import { Engine } from './Engine'
+import { action, define, observable } from '@formily/reactive'
+
+export enum ScreenType {
+  PC = 'PC',
+  Responsive = 'Responsive',
+  Mobile = 'Mobile',
+  Sketch = 'Sketch',
+}
+
+export enum ScreenStatus {
+  Normal = 'Normal',
+  Resizing = 'Resizing',
+  Zooming = 'Zooming',
+}
+
+export class Screen {
+  type: ScreenType
+  scale = 1
+  width: number | string = '100%'
+  height: number | string = '100%'
+  engine: Engine
+  background = ''
+  flip = false
+  status = ScreenStatus.Normal
+  constructor(engine: Engine) {
+    this.engine = engine
+    this.type = engine.props.defaultScreenType
+    this.makeObservable()
+  }
+
+  makeObservable() {
+    define(this, {
+      type: observable.ref,
+      scale: observable.ref,
+      width: observable.ref,
+      height: observable.ref,
+      status: observable.ref,
+      flip: observable.ref,
+      background: observable.ref,
+      setType: action,
+      setScale: action,
+      setSize: action,
+      resetSize: action,
+      setBackground: action,
+      setFlip: action,
+    })
+  }
+
+  setStatus(status: ScreenStatus) {
+    this.status = status
+  }
+
+  setType(type: ScreenType) {
+    this.type = type
+  }
+
+  setScale(scale: number) {
+    this.scale = scale
+  }
+
+  setSize(width?: number | string, height?: number | string) {
+    if (width) {
+      this.width = width
+    }
+    if (height) {
+      this.height = height
+    }
+  }
+
+  resetSize() {
+    this.width = '100%'
+    this.height = '100%'
+  }
+
+  setBackground(background: string) {
+    this.background = background
+  }
+
+  setFlip(flip: boolean) {
+    this.flip = flip
+  }
+}