@sulesky/next-core 1.0.3

package/src/models/Workspace.ts

@@ -0,0 +1,142 @@
+import { Engine } from './Engine'
+import { Viewport } from './Viewport'
+import { Operation, IOperation } from './Operation'
+import { History } from './History'
+import { uid, ICustomEvent, EventContainer } from '@sulesky/next-shared'
+import {
+  HistoryGotoEvent,
+  HistoryRedoEvent,
+  HistoryUndoEvent,
+  HistoryPushEvent,
+} from '../events'
+import { IEngineContext } from '../types'
+export interface IViewportMatcher {
+  contentWindow?: Window
+  viewportElement?: HTMLElement
+}
+
+export interface IWorkspace {
+  id?: string
+  title?: string
+  description?: string
+  operation: IOperation
+}
+
+export interface IWorkspaceProps {
+  id?: string
+  title?: string
+  description?: string
+  contentWindow?: Window
+  viewportElement?: HTMLElement
+}
+
+//工作区模型
+export class Workspace {
+  id: string
+
+  title: string
+
+  description: string
+
+  engine: Engine
+
+  viewport: Viewport
+
+  outline: Viewport
+
+  operation: Operation
+
+  history: History<Workspace>
+
+  props: IWorkspaceProps
+
+  constructor(engine: Engine, props: IWorkspaceProps) {
+    this.engine = engine
+    this.props = props
+    this.id = props.id || uid()
+    this.title = props.title
+    this.description = props.description
+    this.viewport = new Viewport({
+      engine: this.engine,
+      workspace: this,
+      viewportElement: props.viewportElement,
+      contentWindow: props.contentWindow,
+      nodeIdAttrName: this.engine.props.nodeIdAttrName,
+      moveSensitive: true,
+      moveInsertionType: 'all',
+    })
+    this.outline = new Viewport({
+      engine: this.engine,
+      workspace: this,
+      viewportElement: props.viewportElement,
+      contentWindow: props.contentWindow,
+      nodeIdAttrName: this.engine.props.outlineNodeIdAttrName,
+      moveSensitive: false,
+      moveInsertionType: 'block',
+    })
+    this.operation = new Operation(this)
+    this.history = new History(this, {
+      onPush: (item) => {
+        this.operation.dispatch(new HistoryPushEvent(item))
+      },
+      onRedo: (item) => {
+        this.operation.hover.clear()
+        this.operation.dispatch(new HistoryRedoEvent(item))
+      },
+      onUndo: (item) => {
+        this.operation.hover.clear()
+        this.operation.dispatch(new HistoryUndoEvent(item))
+      },
+      onGoto: (item) => {
+        this.operation.hover.clear()
+        this.operation.dispatch(new HistoryGotoEvent(item))
+      },
+    })
+  }
+
+  getEventContext(): IEngineContext {
+    return {
+      workbench: this.engine.workbench,
+      workspace: this,
+      engine: this.engine,
+      viewport: this.viewport,
+    }
+  }
+
+  attachEvents(container: EventContainer, contentWindow: Window) {
+    this.engine.attachEvents(container, contentWindow, this.getEventContext())
+  }
+
+  detachEvents(container: EventContainer) {
+    this.engine.detachEvents(container)
+  }
+
+  dispatch(event: ICustomEvent) {
+    return this.engine.dispatch(event, this.getEventContext())
+  }
+
+  serialize(): IWorkspace {
+    return {
+      id: this.id,
+      title: this.title,
+      description: this.description,
+      operation: this.operation.serialize(),
+    }
+  }
+
+  from(workspace?: IWorkspace) {
+    if (!workspace) return
+    if (workspace.operation) {
+      this.operation.from(workspace.operation)
+    }
+    if (workspace.id) {
+      this.id = workspace.id
+    }
+    if (workspace.title) {
+      this.title = workspace.title
+    }
+    if (workspace.description) {
+      this.description = workspace.description
+    }
+  }
+}

package/src/models/index.ts

@@ -0,0 +1,13 @@
+export * from './Engine'
+export * from './Screen'
+export * from './Cursor'
+export * from './Operation'
+export * from './Viewport'
+export * from './TreeNode'
+export * from './Workbench'
+export * from './Workspace'
+export * from './Selection'
+export * from './MoveHelper'
+export * from './Keyboard'
+export * from './Shortcut'
+export * from './History'

package/src/presets.ts

@@ -0,0 +1,73 @@
+import {
+  DragDropDriver,
+  MouseClickDriver,
+  MouseMoveDriver,
+  ViewportResizeDriver,
+  ViewportScrollDriver,
+  KeyboardDriver,
+} from './drivers'
+import {
+  useCursorEffect,
+  useViewportEffect,
+  useDragDropEffect,
+  useSelectionEffect,
+  useResizeEffect,
+  useKeyboardEffect,
+  useAutoScrollEffect,
+  useWorkspaceEffect,
+  useFreeSelectionEffect,
+  useContentEditableEffect,
+  useTranslateEffect,
+} from './effects'
+import {
+  SelectNodes,
+  SelectAllNodes,
+  SelectSameTypeNodes,
+  DeleteNodes,
+  CopyNodes,
+  PasteNodes,
+  UndoMutation,
+  RedoMutation,
+  CursorSwitchSelection,
+  PreventCommandX,
+  SelectPrevNode,
+  SelectNextNode,
+} from './shortcuts'
+
+export const DEFAULT_EFFECTS = [
+  useFreeSelectionEffect,
+  useCursorEffect,
+  useViewportEffect,
+  useDragDropEffect,
+  useSelectionEffect,
+  useKeyboardEffect,
+  useAutoScrollEffect,
+  useWorkspaceEffect,
+  useContentEditableEffect,
+  useTranslateEffect,
+  useResizeEffect,
+]
+
+export const DEFAULT_DRIVERS = [
+  MouseMoveDriver,
+  DragDropDriver,
+  MouseClickDriver,
+  ViewportResizeDriver,
+  ViewportScrollDriver,
+  KeyboardDriver,
+]
+
+export const DEFAULT_SHORTCUTS = [
+  PreventCommandX,
+  SelectNodes,
+  SelectAllNodes,
+  SelectSameTypeNodes,
+  DeleteNodes,
+  CopyNodes,
+  PasteNodes,
+  SelectPrevNode,
+  SelectNextNode,
+  UndoMutation,
+  RedoMutation,
+  CursorSwitchSelection,
+]

package/src/registry.ts

@@ -0,0 +1,147 @@
+import { each } from '@sulesky/next-shared'
+import { Path } from '@formily/path'
+import { observable } from '@formily/reactive'
+import {
+  IDesignerBehaviorStore,
+  IDesignerIconsStore,
+  IDesignerLocaleStore,
+  IDesignerLanguageStore,
+  IDesignerBehaviors,
+  IDesignerLocales,
+  IDesignerIcons,
+  IBehaviorLike,
+  IBehavior,
+} from './types'
+import { mergeLocales, lowerSnake, getBrowserLanguage } from './internals'
+import { isBehaviorHost } from './externals'
+import { TreeNode } from './models'
+import { isBehaviorList } from './externals'
+
+const getISOCode = (language: string) => {
+  let isoCode = DESIGNER_LANGUAGE_STORE.value
+  let lang = lowerSnake(language)
+  if (DESIGNER_LOCALES_STORE.value[lang]) {
+    return lang
+  }
+  each(DESIGNER_LOCALES_STORE.value, (_, key: string) => {
+    if (key.indexOf(lang) > -1 || String(lang).indexOf(key) > -1) {
+      isoCode = key
+      return false
+    }
+  })
+  return isoCode
+}
+
+const reSortBehaviors = (target: IBehavior[], sources: IDesignerBehaviors) => {
+  const findTargetBehavior = (behavior: IBehavior) => target.includes(behavior)
+  const findSourceBehavior = (name: string) => {
+    for (let key in sources) {
+      const { Behavior } = sources[key]
+      for (let i = 0; i < Behavior.length; i++) {
+        if (Behavior[i].name === name) return Behavior[i]
+      }
+    }
+  }
+  each(sources, (item) => {
+    if (!item) return
+    if (!isBehaviorHost(item)) return
+    const { Behavior } = item
+    each(Behavior, (behavior) => {
+      if (findTargetBehavior(behavior)) return
+      const name = behavior.name
+      each(behavior.extends, (dep) => {
+        const behavior = findSourceBehavior(dep)
+        if (!behavior)
+          throw new Error(`No ${dep} behavior that ${name} depends on`)
+        if (!findTargetBehavior(behavior)) {
+          target.unshift(behavior)
+        }
+      })
+      target.push(behavior)
+    })
+  })
+}
+
+const DESIGNER_BEHAVIORS_STORE: IDesignerBehaviorStore = observable.ref([])
+
+const DESIGNER_ICONS_STORE: IDesignerIconsStore = observable.ref({})
+
+const DESIGNER_LOCALES_STORE: IDesignerLocaleStore = observable.ref({})
+
+const DESIGNER_LANGUAGE_STORE: IDesignerLanguageStore = observable.ref(
+  getBrowserLanguage()
+)
+
+const DESIGNER_GlobalRegistry = {
+  setDesignerLanguage: (lang: string) => {
+    DESIGNER_LANGUAGE_STORE.value = lang
+  },
+
+  setDesignerBehaviors: (behaviors: IBehaviorLike[]) => {
+    DESIGNER_BEHAVIORS_STORE.value = behaviors.reduce<IBehavior[]>(
+      (buf, behavior) => {
+        if (isBehaviorHost(behavior)) {
+          return buf.concat(behavior.Behavior)
+        } else if (isBehaviorList(behavior)) {
+          return buf.concat(behavior)
+        }
+        return buf
+      },
+      []
+    )
+  },
+
+  getDesignerBehaviors: (node: TreeNode) => {
+    return DESIGNER_BEHAVIORS_STORE.value.filter((pattern) =>
+      pattern.selector(node)
+    )
+  },
+
+  getDesignerIcon: (name: string) => {
+    return DESIGNER_ICONS_STORE[name]
+  },
+
+  getDesignerLanguage: () => {
+    return getISOCode(DESIGNER_LANGUAGE_STORE.value)
+  },
+
+  getDesignerMessage: (token: string, locales?: IDesignerLocales) => {
+    const lang = getISOCode(DESIGNER_LANGUAGE_STORE.value)
+    const locale = locales ? locales[lang] : DESIGNER_LOCALES_STORE.value[lang]
+    if (!locale) {
+      for (let key in DESIGNER_LOCALES_STORE.value) {
+        const message = Path.getIn(
+          DESIGNER_LOCALES_STORE.value[key],
+          lowerSnake(token)
+        )
+        if (message) return message
+      }
+      return
+    }
+    return Path.getIn(locale, lowerSnake(token))
+  },
+
+  registerDesignerIcons: (map: IDesignerIcons) => {
+    Object.assign(DESIGNER_ICONS_STORE, map)
+  },
+
+  registerDesignerLocales: (...packages: IDesignerLocales[]) => {
+    packages.forEach((locales) => {
+      mergeLocales(DESIGNER_LOCALES_STORE.value, locales)
+    })
+  },
+
+  registerDesignerBehaviors: (...packages: IDesignerBehaviors[]) => {
+    const results: IBehavior[] = []
+    packages.forEach((sources) => {
+      reSortBehaviors(results, sources)
+    })
+    if (results.length) {
+      DESIGNER_BEHAVIORS_STORE.value = results
+    }
+  },
+}
+
+export type IDesignerRegistry = typeof DESIGNER_GlobalRegistry
+
+export const GlobalRegistry: IDesignerRegistry = DESIGNER_GlobalRegistry

package/src/shortcuts/CursorSwitch.ts

@@ -0,0 +1,11 @@
+import { CursorType, KeyCode, Shortcut } from '../models'
+
+export const CursorSwitchSelection = new Shortcut({
+  codes: [KeyCode.Shift, KeyCode.S],
+  handler(context) {
+    const engine = context?.engine
+    if (engine) {
+      engine.cursor.setType(CursorType.Selection)
+    }
+  },
+})

package/src/shortcuts/MultiSelection.ts

@@ -0,0 +1,31 @@
+import { KeyCode, Shortcut } from '../models'
+
+export const SelectNodes = new Shortcut({
+  codes: [[KeyCode.Meta], [KeyCode.Control]],
+})
+
+export const SelectSameTypeNodes = new Shortcut({
+  codes: [KeyCode.Shift],
+})
+
+export const PreventCommandX = new Shortcut({
+  codes: [
+    [KeyCode.Meta, KeyCode.X],
+    [KeyCode.Control, KeyCode.X],
+  ],
+})
+
+export const SelectAllNodes = new Shortcut({
+  codes: [
+    [KeyCode.Meta, KeyCode.A],
+    [KeyCode.Control, KeyCode.A],
+  ],
+  handler(context) {
+    const operation = context?.workspace.operation
+    if (operation) {
+      const tree = operation.tree
+      const selection = operation.selection
+      selection.batchSelect(tree.descendants)
+    }
+  },
+})

package/src/shortcuts/NodeMutation.ts

@@ -0,0 +1,49 @@
+import { KeyCode, Shortcut, TreeNode } from '../models'
+
+/**
+ * 快捷删除，快捷复制粘贴
+ */
+
+export const DeleteNodes = new Shortcut({
+  codes: [[KeyCode.Backspace], [KeyCode.Delete]],
+  handler(context) {
+    const operation = context?.workspace.operation
+    if (operation) {
+      TreeNode.remove(operation.selection.selectedNodes)
+    }
+  },
+})
+
+interface IClipboard {
+  nodes: TreeNode[]
+}
+
+const Clipboard: IClipboard = {
+  nodes: [],
+}
+
+export const CopyNodes = new Shortcut({
+  codes: [
+    [KeyCode.Meta, KeyCode.C],
+    [KeyCode.Control, KeyCode.C],
+  ],
+  handler(context) {
+    const operation = context?.workspace.operation
+    if (operation) {
+      Clipboard.nodes = operation.selection.selectedNodes
+    }
+  },
+})
+
+export const PasteNodes = new Shortcut({
+  codes: [
+    [KeyCode.Meta, KeyCode.V],
+    [KeyCode.Control, KeyCode.V],
+  ],
+  handler(context) {
+    const operation = context?.workspace.operation
+    if (operation) {
+      TreeNode.clone(Clipboard.nodes)
+    }
+  },
+})

package/src/shortcuts/QuickSelection.ts

@@ -0,0 +1,81 @@
+import { KeyCode, Shortcut, TreeNode } from '../models'
+
+const findBottomLastChild = (node: TreeNode) => {
+  if (!node) return node
+  if (node.lastChild) {
+    return findBottomLastChild(node.lastChild)
+  }
+  return node
+}
+
+const findTopParentNext = (node: TreeNode) => {
+  if (!node.parent) return node
+  if (node.parent?.next) return node.parent.next
+  return findTopParentNext(node.parent)
+}
+
+export const SelectPrevNode = new Shortcut({
+  codes: [
+    [KeyCode.Up],
+    [KeyCode.PageUp],
+    [KeyCode.ArrowUp],
+    [KeyCode.Left],
+    [KeyCode.LeftWindowKey],
+    [KeyCode.ArrowLeft],
+  ],
+  handler(context) {
+    const operation = context?.workspace.operation
+    if (operation) {
+      const tree = operation.tree
+      const selection = operation.selection
+      const selectedNode = tree.findById(selection.last)
+      if (selectedNode) {
+        const previousNode = selectedNode.previous
+        if (previousNode) {
+          const bottom = findBottomLastChild(previousNode)
+          if (bottom) {
+            selection.select(bottom)
+          } else {
+            selection.select(previousNode)
+          }
+        } else if (selectedNode.parent) {
+          selection.select(selectedNode.parent)
+        } else {
+          const bottom = findBottomLastChild(selectedNode.lastChild)
+          if (bottom) {
+            selection.select(bottom)
+          }
+        }
+      }
+    }
+  },
+})
+
+export const SelectNextNode = new Shortcut({
+  codes: [
+    [KeyCode.Down],
+    [KeyCode.PageDown],
+    [KeyCode.ArrowDown],
+    [KeyCode.Right],
+    [KeyCode.RightWindowKey],
+    [KeyCode.ArrowRight],
+  ],
+  handler(context) {
+    const operation = context?.workspace.operation
+    if (operation) {
+      const tree = operation.tree
+      const selection = operation.selection
+      const selectedNode = tree.findById(selection.last)
+      if (selectedNode) {
+        const nextNode = selectedNode.firstChild
+          ? selectedNode.firstChild
+          : selectedNode.next
+        if (nextNode) {
+          selection.select(nextNode)
+        } else {
+          selection.select(findTopParentNext(selectedNode))
+        }
+      }
+    }
+  },
+})

package/src/shortcuts/UndoRedo.ts

@@ -0,0 +1,29 @@
+import { KeyCode, Shortcut } from '../models'
+
+export const UndoMutation = new Shortcut({
+  codes: [
+    [KeyCode.Meta, KeyCode.Z],
+    [KeyCode.Control, KeyCode.Z],
+  ],
+  handler(context) {
+    const workspace = context?.workspace
+    if (workspace) {
+      workspace.history.undo()
+    }
+    workspace.operation.hover.clear()
+  },
+})
+
+export const RedoMutation = new Shortcut({
+  codes: [
+    [KeyCode.Meta, KeyCode.Shift, KeyCode.Z],
+    [KeyCode.Control, KeyCode.Shift, KeyCode.Z],
+  ],
+  handler(context) {
+    const workspace = context?.workspace
+    if (workspace) {
+      workspace.history.redo()
+    }
+    workspace.operation.hover.clear()
+  },
+})

package/src/shortcuts/index.ts

@@ -0,0 +1,5 @@
+export * from './MultiSelection'
+export * from './NodeMutation'
+export * from './UndoRedo'
+export * from './CursorSwitch'
+export * from './QuickSelection'