@sulesky/next-core 1.0.3

package/src/models/Selection.ts

@@ -0,0 +1,177 @@
+import { observable, define, action } from '@formily/reactive'
+import { Operation } from './Operation'
+import { SelectNodeEvent, UnSelectNodeEvent } from '../events'
+import { TreeNode } from './TreeNode'
+import { isStr, isArr } from '@sulesky/next-shared'
+
+export interface ISelection {
+  selected?: string[]
+  operation?: Operation
+}
+
+export class Selection {
+  operation: Operation
+  selected: string[] = []
+  indexes: Record<string, boolean> = {}
+
+  constructor(props?: ISelection) {
+    if (props.selected) {
+      this.selected = props.selected
+    }
+    if (props.operation) {
+      this.operation = props.operation
+    }
+    this.makeObservable()
+  }
+
+  makeObservable() {
+    define(this, {
+      selected: observable,
+      select: action,
+      batchSelect: action,
+      add: action,
+      remove: action,
+      clear: action,
+      crossAddTo: action,
+    })
+  }
+
+  trigger(type = SelectNodeEvent) {
+    return this.operation.dispatch(
+      new type({
+        target: this.operation.tree,
+        source: this.selectedNodes,
+      })
+    )
+  }
+
+  select(id: string | TreeNode) {
+    if (isStr(id)) {
+      if (this.selected.length === 1 && this.selected.includes(id)) {
+        this.trigger(SelectNodeEvent)
+        return
+      }
+      this.selected = [id]
+      this.indexes = { [id]: true }
+      this.trigger(SelectNodeEvent)
+    } else {
+      this.select(id?.id)
+    }
+  }
+
+  safeSelect(id: string | TreeNode) {
+    if (!id) return
+    this.select(id)
+  }
+
+  mapIds(ids: any) {
+    return isArr(ids)
+      ? ids.map((node: any) => (isStr(node) ? node : node?.id))
+      : []
+  }
+
+  batchSelect(ids: string[] | TreeNode[]) {
+    this.selected = this.mapIds(ids)
+    this.indexes = this.selected.reduce((buf, id) => {
+      buf[id] = true
+      return buf
+    }, {})
+    this.trigger(SelectNodeEvent)
+  }
+
+  batchSafeSelect(ids: string[] | TreeNode[]) {
+    if (!ids?.length) return
+    this.batchSelect(ids)
+  }
+
+  get selectedNodes() {
+    return this.selected.map((id) => this.operation.tree.findById(id))
+  }
+
+  get first() {
+    if (this.selected && this.selected.length) return this.selected[0]
+  }
+
+  get last() {
+    if (this.selected && this.selected.length)
+      return this.selected[this.selected.length - 1]
+  }
+
+  get length() {
+    return this.selected.length
+  }
+
+  add(...ids: string[] | TreeNode[]) {
+    this.mapIds(ids).forEach((id) => {
+      if (isStr(id)) {
+        if (!this.selected.includes(id)) {
+          this.selected.push(id)
+          this.indexes[id] = true
+        }
+      } else {
+        this.add(id?.id)
+      }
+    })
+    this.trigger()
+  }
+
+  crossAddTo(node: TreeNode) {
+    if (node.parent) {
+      const selectedNodes = this.selectedNodes
+      if (this.has(node)) {
+        this.remove(node)
+      } else {
+        const minDistanceNode = selectedNodes.reduce(
+          (minDistanceNode, item) => {
+            return item.distanceTo(node) < minDistanceNode.distanceTo(node)
+              ? item
+              : minDistanceNode
+          },
+          selectedNodes[0]
+        )
+        if (minDistanceNode) {
+          const crossNodes = node.crossSiblings(minDistanceNode)
+          crossNodes.forEach((node) => {
+            if (!this.has(node.id)) {
+              this.selected.push(node.id)
+              this.indexes[node.id] = true
+            }
+          })
+        }
+        if (!this.has(node.id)) {
+          this.selected.push(node.id)
+          this.indexes[node.id] = true
+        }
+      }
+    }
+  }
+
+  remove(...ids: string[] | TreeNode[]) {
+    this.mapIds(ids).forEach((id) => {
+      if (isStr(id)) {
+        this.selected = this.selected.filter((item) => item !== id)
+        delete this.indexes[id]
+      } else {
+        this.remove(id?.id)
+      }
+    })
+    this.trigger(UnSelectNodeEvent)
+  }
+
+  has(...ids: string[] | TreeNode[]) {
+    return this.mapIds(ids).some((id) => {
+      if (isStr(id)) {
+        return this.indexes[id]
+      } else {
+        if (!id?.id) return false
+        return this.has(id?.id)
+      }
+    })
+  }
+
+  clear() {
+    this.selected = []
+    this.indexes = {}
+    this.trigger(UnSelectNodeEvent)
+  }
+}

package/src/models/Shortcut.ts

@@ -0,0 +1,81 @@
+import { isFn, KeyCode } from '@sulesky/next-shared'
+import { IEngineContext } from '../types'
+
+export { KeyCode }
+
+export interface IShortcutProps {
+  codes?: KeyCode[] | KeyCode[][]
+  matcher?: (codes: KeyCode[]) => boolean
+  handler?: (context: IEngineContext) => void
+}
+
+export class Shortcut {
+  codes: KeyCode[][]
+  handler: (context: IEngineContext) => void
+  matcher: (codes: KeyCode[]) => boolean
+  constructor(props: IShortcutProps) {
+    this.codes = this.parseCodes(props.codes)
+    this.handler = props.handler
+    this.matcher = props.matcher
+  }
+
+  parseCodes(codes: Array<KeyCode | KeyCode[]>) {
+    const results: KeyCode[][] = []
+    codes.forEach((code) => {
+      if (Array.isArray(code)) {
+        results.push(code)
+      } else {
+        results.push([code])
+      }
+    })
+    return results
+  }
+
+  preventCodes(codes: KeyCode[]) {
+    if (this.codes.length) {
+      for (let i = 0; i < codes.length; i++) {
+        const sequence = this.codes[i] ?? []
+        for (let j = 0; j < sequence.length; j++) {
+          if (!Shortcut.matchCode(codes[j], sequence[j])) {
+            return false
+          }
+        }
+      }
+      return true
+    }
+    return false
+  }
+
+  matched(matched: boolean, context: IEngineContext) {
+    if (isFn(this.handler) && matched) {
+      this.handler(context)
+    }
+    return matched
+  }
+
+  match(codes: KeyCode[], context: IEngineContext) {
+    return this.codes.some((sequence) => {
+      const sortedSelf = Shortcut.sortCodes(sequence)
+      const sortedTarget: KeyCode[] = Shortcut.sortCodes(codes)
+      if (isFn(this.matcher)) {
+        return this.matched(this.matcher(sortedTarget), context)
+      }
+      if (sortedTarget.length !== sortedSelf.length)
+        return this.matched(false, context)
+      for (let i = 0; i < sortedSelf.length; i++) {
+        if (!Shortcut.matchCode(sortedTarget[i], sortedSelf[i])) {
+          return this.matched(false, context)
+        }
+      }
+      return this.matched(true, context)
+    })
+  }
+
+  static matchCode = (code1: KeyCode, code2: KeyCode) => {
+    return code1?.toLocaleLowerCase?.() === code2?.toLocaleLowerCase?.()
+  }
+
+  static sortCodes = (codes: KeyCode[]): KeyCode[] => {
+    return codes.map((code) => code.toLocaleLowerCase()).sort() as any
+  }
+}

package/src/models/SnapLine.ts

@@ -0,0 +1,129 @@
+import {
+  calcRectOfAxisLineSegment,
+  ILineSegment,
+  IPoint,
+  calcOffsetOfSnapLineSegmentToEdge,
+  Rect,
+} from '@sulesky/next-shared'
+import { TreeNode } from './TreeNode'
+import { TransformHelper } from './TransformHelper'
+
+export type ISnapLineType = 'ruler' | 'space-block' | 'normal'
+
+export type ISnapLine = ILineSegment & {
+  type?: ISnapLineType
+  distance?: number
+  id?: string
+  refer?: TreeNode
+}
+
+export class SnapLine {
+  _id: string
+  type: ISnapLineType
+  distance: number
+  refer: TreeNode
+  start: IPoint
+  end: IPoint
+  helper: TransformHelper
+  constructor(helper: TransformHelper, line: ISnapLine) {
+    this.helper = helper
+    this.type = line.type || 'normal'
+    this._id = line.id
+    this.refer = line.refer
+    this.start = { ...line.start }
+    this.end = { ...line.end }
+    this.distance = line.distance
+  }
+
+  get id() {
+    return (
+      this._id ?? `${this.start.x}-${this.start.y}-${this.end.x}-${this.end.y}`
+    )
+  }
+
+  get direction() {
+    if (this.start?.x === this.end?.x) return 'v'
+    return 'h'
+  }
+
+  get closest() {
+    return this.distance < TransformHelper.threshold
+  }
+
+  get rect() {
+    return calcRectOfAxisLineSegment(this)
+  }
+
+  translate(node: TreeNode, translate: IPoint) {
+    if (!node || !node?.parent) return
+    const parent = node.parent
+    const dragNodeRect = node.getValidElementOffsetRect()
+    const parentRect = parent.getValidElementOffsetRect()
+    const edgeOffset = calcOffsetOfSnapLineSegmentToEdge(this, dragNodeRect)
+    if (this.direction === 'h') {
+      translate.y = this.start.y - parentRect.y - edgeOffset.y
+    } else {
+      translate.x = this.start.x - parentRect.x - edgeOffset.x
+    }
+  }
+
+  resize(node: TreeNode, rect: Rect) {
+    if (!node || !node?.parent) return
+    const parent = node.parent
+    const dragNodeRect = node.getValidElementOffsetRect()
+    const parentRect = parent.getValidElementOffsetRect()
+    const edgeOffset = calcOffsetOfSnapLineSegmentToEdge(this, dragNodeRect)
+    const cursorRect = this.helper.cursorDragNodesRect
+    const snapEdge = this.snapEdge(rect)
+    if (this.direction === 'h') {
+      const y = this.start.y - parentRect.y - edgeOffset.y
+      switch (this.helper.direction) {
+        case 'left-top':
+        case 'center-top':
+        case 'right-top':
+          if (snapEdge !== 'ht') return
+          rect.y = y
+          rect.height = cursorRect.bottom - y
+          break
+        case 'left-bottom':
+        case 'center-bottom':
+        case 'right-bottom':
+          if (snapEdge !== 'hb') return
+          rect.height = this.start.y - cursorRect.top
+          break
+      }
+    } else {
+      const x = this.start.x - parentRect.x - edgeOffset.x
+      switch (this.helper.direction) {
+        case 'left-top':
+        case 'left-bottom':
+        case 'left-center':
+          if (snapEdge !== 'vl') return
+          rect.x = x
+          rect.width = cursorRect.right - x
+          break
+        case 'right-center':
+        case 'right-top':
+        case 'right-bottom':
+          if (snapEdge !== 'vr') return
+          rect.width = this.start.x - cursorRect.left
+          break
+      }
+    }
+  }
+
+  snapEdge(rect: Rect) {
+    const threshold = TransformHelper.threshold
+    if (this.direction === 'h') {
+      if (Math.abs(this.start.y - rect.top) < threshold) return 'ht'
+      if (Math.abs(this.start.y - (rect.top + rect.height / 2)) < threshold)
+        return 'hc'
+      if (Math.abs(this.start.y - rect.bottom) < threshold) return 'hb'
+    } else {
+      if (Math.abs(this.start.x - rect.left) < threshold) return 'vl'
+      if (Math.abs(this.start.x - (rect.left + rect.width / 2)) < threshold)
+        return 'vc'
+      if (Math.abs(this.start.x - rect.right) < threshold) return 'vr'
+    }
+  }
+}

package/src/models/SpaceBlock.ts

@@ -0,0 +1,199 @@
+import {
+  calcExtendsLineSegmentOfRect,
+  calcDistanceOfSnapLineToEdges,
+  LineSegment,
+  Rect,
+} from '@sulesky/next-shared'
+import { SnapLine } from './SnapLine'
+import { TransformHelper } from './TransformHelper'
+import { TreeNode } from './TreeNode'
+
+export type ISpaceBlockType =
+  | 'top'
+  | 'right'
+  | 'bottom'
+  | 'left'
+  | (string & {})
+
+export interface ISpaceBlock {
+  id?: string
+  refer?: TreeNode
+  rect?: Rect
+  distance?: number
+  type?: ISpaceBlockType
+}
+
+export type AroundSpaceBlock = Record<ISpaceBlockType, SpaceBlock>
+
+export class SpaceBlock {
+  _id: string
+  distance: number
+  refer: TreeNode
+  helper: TransformHelper
+  rect: Rect
+  type: ISpaceBlockType
+  constructor(helper: TransformHelper, box: ISpaceBlock) {
+    this.helper = helper
+    this.distance = box.distance
+    this.refer = box.refer
+    this.rect = box.rect
+    this.type = box.type
+  }
+
+  get referRect() {
+    if (!this.refer) return
+    return this.helper.getNodeRect(this.refer)
+  }
+
+  get id() {
+    return (
+      this._id ??
+      `${this.rect.x}-${this.rect.y}-${this.rect.width}-${this.rect.height}`
+    )
+  }
+
+  get next() {
+    const spaceBlock = this.helper.calcAroundSpaceBlocks(this.referRect)
+    return spaceBlock[this.type as any]
+  }
+
+  get extendsLine() {
+    if (!this.needExtendsLine) return
+    const dragNodesRect = this.helper.dragNodesRect
+    return calcExtendsLineSegmentOfRect(dragNodesRect, this.referRect)
+  }
+
+  get needExtendsLine() {
+    const targetRect = this.crossDragNodesRect
+    const referRect = this.crossReferRect
+    if (this.type === 'top' || this.type === 'bottom') {
+      const rightDelta = referRect.right - targetRect.left
+      const leftDelta = targetRect.right - referRect.left
+      return (
+        rightDelta < targetRect.width / 2 || leftDelta < targetRect.width / 2
+      )
+    } else {
+      const topDelta = targetRect.bottom - referRect.top
+      const bottomDelta = referRect.bottom - targetRect.top
+      return (
+        topDelta < targetRect.height / 2 || bottomDelta < targetRect.height / 2
+      )
+    }
+    return true
+  }
+
+  get crossReferRect() {
+    const referRect = this.referRect
+    if (this.type === 'top' || this.type === 'bottom') {
+      return new Rect(
+        referRect.x,
+        this.rect.y,
+        referRect.width,
+        this.rect.height
+      )
+    } else {
+      return new Rect(
+        this.rect.x,
+        referRect.y,
+        this.rect.width,
+        referRect.height
+      )
+    }
+  }
+
+  get crossDragNodesRect() {
+    const dragNodesRect = this.helper.dragNodesRect
+    if (this.type === 'top' || this.type === 'bottom') {
+      return new Rect(
+        dragNodesRect.x,
+        this.rect.y,
+        dragNodesRect.width,
+        this.rect.height
+      )
+    } else {
+      return new Rect(
+        this.rect.x,
+        dragNodesRect.y,
+        this.rect.width,
+        dragNodesRect.height
+      )
+    }
+  }
+
+  get isometrics() {
+    const results: SpaceBlock[] = []
+    let spaceBlock: SpaceBlock = this as any
+    while ((spaceBlock = spaceBlock.next)) {
+      if (
+        Math.abs(spaceBlock.distance - this.distance) <
+        TransformHelper.threshold
+      ) {
+        if (results.some((box) => box.distance !== spaceBlock.distance))
+          continue
+        results.push(spaceBlock)
+      }
+    }
+    return results
+  }
+
+  get snapLine() {
+    if (!this.isometrics.length) return
+    const nextRect = this.next.rect
+    const referRect = this.referRect
+    let line: LineSegment
+    if (this.type === 'top') {
+      line = new LineSegment(
+        {
+          x: nextRect.left,
+          y: referRect.bottom + nextRect.height,
+        },
+        {
+          x: nextRect.right,
+          y: referRect.bottom + nextRect.height,
+        }
+      )
+    } else if (this.type === 'bottom') {
+      line = new LineSegment(
+        {
+          x: nextRect.left,
+          y: referRect.top - nextRect.height,
+        },
+        {
+          x: nextRect.right,
+          y: referRect.top - nextRect.height,
+        }
+      )
+    } else if (this.type === 'left') {
+      line = new LineSegment(
+        {
+          x: referRect.right + nextRect.width,
+          y: nextRect.top,
+        },
+        {
+          x: referRect.right + nextRect.width,
+          y: nextRect.bottom,
+        }
+      )
+    } else {
+      line = new LineSegment(
+        {
+          x: referRect.left - nextRect.width,
+          y: nextRect.top,
+        },
+        {
+          x: referRect.left - nextRect.width,
+          y: nextRect.bottom,
+        }
+      )
+    }
+    const distance = calcDistanceOfSnapLineToEdges(
+      line,
+      this.helper.dragNodesEdgeLines
+    )
+    return new SnapLine(this.helper, {
+      ...line,
+      distance,
+      type: 'space-block',
+    })
+  }
+}