@sulesky/next-core 1.0.3

package/src/events/viewport/ViewportScrollEvent.ts

@@ -0,0 +1,9 @@
+import { ICustomEvent } from '@sulesky/next-shared'
+import { AbstractViewportEvent } from './AbstractViewportEvent'
+
+export class ViewportScrollEvent
+  extends AbstractViewportEvent
+  implements ICustomEvent
+{
+  type = 'viewport:scroll'
+}

package/src/events/viewport/index.ts

@@ -0,0 +1,2 @@
+export * from './ViewportResizeEvent'
+export * from './ViewportScrollEvent'

package/src/events/workbench/AbstractWorkspaceEvent.ts

@@ -0,0 +1,10 @@
+import { Workspace } from '../../models'
+import { IEngineContext } from '../../types'
+
+export class AbstractWorkspaceEvent {
+  data: Workspace
+  context: IEngineContext
+  constructor(data: Workspace) {
+    this.data = data
+  }
+}

package/src/events/workbench/AddWorkspaceEvent.ts

@@ -0,0 +1,8 @@
+import { ICustomEvent } from '@sulesky/next-shared'
+import { AbstractWorkspaceEvent } from './AbstractWorkspaceEvent'
+export class AddWorkspaceEvent
+  extends AbstractWorkspaceEvent
+  implements ICustomEvent
+{
+  type = 'add:workspace'
+}

package/src/events/workbench/RemoveWorkspaceEvent.ts

@@ -0,0 +1,9 @@
+import { ICustomEvent } from '@sulesky/next-shared'
+import { AbstractWorkspaceEvent } from './AbstractWorkspaceEvent'
+
+export class RemoveWorkspaceEvent
+  extends AbstractWorkspaceEvent
+  implements ICustomEvent
+{
+  type = 'remove:workspace'
+}

package/src/events/workbench/SwitchWorkspaceEvent.ts

@@ -0,0 +1,9 @@
+import { ICustomEvent } from '@sulesky/next-shared'
+import { AbstractWorkspaceEvent } from './AbstractWorkspaceEvent'
+
+export class SwitchWorkspaceEvent
+  extends AbstractWorkspaceEvent
+  implements ICustomEvent
+{
+  type = 'switch:workspace'
+}

package/src/events/workbench/index.ts

@@ -0,0 +1,3 @@
+export * from './AddWorkspaceEvent'
+export * from './RemoveWorkspaceEvent'
+export * from './SwitchWorkspaceEvent'

package/src/exports.ts

@@ -0,0 +1,5 @@
+export * from './externals'
+export * from './registry'
+export * from './models'
+export * from './events'
+export * from './types'

package/src/externals.ts

@@ -0,0 +1,87 @@
+import { isArr } from '@sulesky/next-shared'
+import { untracked } from '@formily/reactive'
+import { DEFAULT_DRIVERS, DEFAULT_EFFECTS, DEFAULT_SHORTCUTS } from './presets'
+import { Engine, TreeNode } from './models'
+import {
+  IEngineProps,
+  IResourceCreator,
+  IBehaviorCreator,
+  IDesignerLocales,
+  IResource,
+  IBehavior,
+  IBehaviorHost,
+  IResourceHost,
+} from './types'
+import { mergeLocales } from './internals'
+
+export const isBehaviorHost = (val: any): val is IBehaviorHost =>
+  val?.Behavior && isBehaviorList(val.Behavior)
+
+export const isBehaviorList = (val: any): val is IBehavior[] =>
+  Array.isArray(val) && val.every(isBehavior)
+
+export const isBehavior = (val: any): val is IBehavior =>
+  val?.name ||
+  val?.selector ||
+  val?.extends ||
+  val?.designerProps ||
+  val?.designerLocales
+
+export const isResourceHost = (val: any): val is IResourceHost =>
+  val?.Resource && isResourceList(val.Resource)
+
+export const isResourceList = (val: any): val is IResource[] =>
+  Array.isArray(val) && val.every(isResource)
+
+export const isResource = (val: any): val is IResource =>
+  val?.node && !!val.node.isSourceNode && val.node instanceof TreeNode
+
+export const createLocales = (...packages: IDesignerLocales[]) => {
+  const results = {}
+  packages.forEach((locales) => {
+    mergeLocales(results, locales)
+  })
+  return results
+}
+
+export const createBehavior = (
+  ...behaviors: Array<IBehaviorCreator | IBehaviorCreator[]>
+): IBehavior[] => {
+  return behaviors.reduce((buf: any[], behavior) => {
+    if (isArr(behavior)) return buf.concat(createBehavior(...behavior))
+    const { selector } = behavior || {}
+    if (!selector) return buf
+    if (typeof selector === 'string') {
+      behavior.selector = (node) => node.componentName === selector
+    }
+    return buf.concat(behavior)
+  }, [])
+}
+
+export const createResource = (...sources: IResourceCreator[]): IResource[] => {
+  return sources.reduce((buf, source) => {
+    return buf.concat({
+      ...source,
+      node: new TreeNode({
+        componentName: '$$ResourceNode$$',
+        isSourceNode: true,
+        children: source.elements || [],
+      }),
+    })
+  }, [])
+}
+
+export const createDesigner = (props: IEngineProps<Engine> = {}) => {
+  const drivers = props.drivers || []
+  const effects = props.effects || []
+  const shortcuts = props.shortcuts || []
+  return untracked(
+    () =>
+      new Engine({
+        ...props,
+        effects: [...effects, ...DEFAULT_EFFECTS],
+        drivers: [...drivers, ...DEFAULT_DRIVERS],
+        shortcuts: [...shortcuts, ...DEFAULT_SHORTCUTS],
+      })
+  )
+}

package/src/index.ts

@@ -0,0 +1,15 @@
+import * as Core from './exports'
+export * from './exports'
+import { globalThisPolyfill } from '@sulesky/next-shared'
+
+if (globalThisPolyfill?.['Designable']?.['Core']) {
+  if (module.exports) {
+    module.exports = {
+      __esModule: true,
+      ...globalThisPolyfill['Designable']['Core'],
+    }
+  }
+} else {
+  globalThisPolyfill['Designable'] = globalThisPolyfill['Designable'] || {}
+  globalThisPolyfill['Designable'].Core = Core
+}

package/src/internals.ts

@@ -0,0 +1,37 @@
+import { each, isPlainObj } from '@sulesky/next-shared'
+import { globalThisPolyfill } from '@sulesky/next-shared'
+
+export const lowerSnake = (str: string) => {
+  return String(str).replace(/\s+/g, '_').toLocaleLowerCase()
+}
+
+export const mergeLocales = (target: any, source: any) => {
+  if (isPlainObj(target) && isPlainObj(source)) {
+    each(source, function (value, key) {
+      const token = lowerSnake(key)
+      const messages = mergeLocales(target[key] || target[token], value)
+      target[token] = messages
+    })
+    return target
+  } else if (isPlainObj(source)) {
+    const result = Array.isArray(source) ? [] : {}
+    each(source, function (value, key) {
+      const messages = mergeLocales(undefined, value)
+      result[lowerSnake(key)] = messages
+    })
+    return result
+  }
+  return source
+}
+
+export const getBrowserLanguage = () => {
+  /* istanbul ignore next */
+  if (!globalThisPolyfill.navigator) {
+    return 'en'
+  }
+  return (
+    globalThisPolyfill.navigator['browserlanguage'] ||
+    globalThisPolyfill.navigator?.language ||
+    'en'
+  )
+}

package/src/models/Cursor.ts

@@ -0,0 +1,198 @@
+import { Engine } from './Engine'
+import { action, define, observable } from '@formily/reactive'
+import { globalThisPolyfill, isValidNumber } from '@sulesky/next-shared'
+
+export enum CursorStatus {
+  Normal = 'NORMAL',
+  DragStart = 'DRAG_START',
+  Dragging = 'DRAGGING',
+  DragStop = 'DRAG_STOP',
+}
+
+export enum CursorDragType {
+  Move = 'MOVE',
+  Resize = 'RESIZE',
+  Rotate = 'ROTATE',
+  Scale = 'SCALE',
+  Translate = 'TRANSLATE',
+  Round = 'ROUND',
+}
+
+export enum CursorType {
+  Normal = 'NORMAL',
+  Selection = 'SELECTION',
+  Sketch = 'SKETCH',
+}
+
+export interface ICursorPosition {
+  pageX?: number
+
+  pageY?: number
+
+  clientX?: number
+
+  clientY?: number
+
+  topPageX?: number
+
+  topPageY?: number
+
+  topClientX?: number
+
+  topClientY?: number
+}
+
+export interface ICursor {
+  status?: CursorStatus
+
+  position?: ICursorPosition
+
+  dragStartPosition?: ICursorPosition
+
+  dragEndPosition?: ICursorPosition
+
+  view?: Window
+}
+
+const DEFAULT_POSITION = {
+  pageX: 0,
+  pageY: 0,
+  clientX: 0,
+  clientY: 0,
+  topPageX: 0,
+  topPageY: 0,
+  topClientX: 0,
+  topClientY: 0,
+}
+
+const setCursorStyle = (contentWindow: Window, style: string) => {
+  const currentRoot = document?.getElementsByTagName?.('html')?.[0]
+  const root = contentWindow?.document?.getElementsByTagName('html')?.[0]
+  if (root && root.style.cursor !== style) {
+    root.style.cursor = style
+  }
+  if (currentRoot && currentRoot.style.cursor !== style) {
+    currentRoot.style.cursor = style
+  }
+}
+
+const calcPositionDelta = (
+  end: ICursorPosition,
+  start: ICursorPosition
+): ICursorPosition => {
+  return Object.keys(end || {}).reduce((buf, key) => {
+    if (isValidNumber(end?.[key]) && isValidNumber(start?.[key])) {
+      buf[key] = end[key] - start[key]
+    } else {
+      buf[key] = end[key]
+    }
+    return buf
+  }, {})
+}
+
+export class Cursor {
+  engine: Engine
+
+  type: CursorType | string = CursorType.Normal
+
+  dragType: CursorDragType | string = CursorDragType.Move
+
+  status: CursorStatus = CursorStatus.Normal
+
+  position: ICursorPosition = DEFAULT_POSITION
+
+  dragStartPosition: ICursorPosition
+
+  dragEndPosition: ICursorPosition
+
+  dragAtomDelta: ICursorPosition = DEFAULT_POSITION
+
+  dragStartToCurrentDelta: ICursorPosition = DEFAULT_POSITION
+
+  dragStartToEndDelta: ICursorPosition = DEFAULT_POSITION
+
+  view: Window = globalThisPolyfill
+
+  constructor(engine: Engine) {
+    this.engine = engine
+    this.makeObservable()
+  }
+
+  makeObservable() {
+    define(this, {
+      type: observable.ref,
+      dragType: observable.ref,
+      status: observable.ref,
+      position: observable.ref,
+      dragStartPosition: observable.ref,
+      dragEndPosition: observable.ref,
+      dragAtomDelta: observable.ref,
+      dragStartToCurrentDelta: observable.ref,
+      dragStartToEndDelta: observable.ref,
+      view: observable.ref,
+      setStyle: action,
+      setPosition: action,
+      setStatus: action,
+      setType: action,
+    })
+  }
+
+  get speed() {
+    return Math.sqrt(
+      Math.pow(this.dragAtomDelta.clientX, 2) +
+        Math.pow(this.dragAtomDelta.clientY, 2)
+    )
+  }
+
+  setStatus(status: CursorStatus) {
+    this.status = status
+  }
+
+  setType(type: CursorType | string) {
+    this.type = type
+  }
+
+  setDragType(type: CursorDragType | string) {
+    this.dragType = type
+  }
+
+  setStyle(style: string) {
+    this.engine.workbench.eachWorkspace((workspace) => {
+      setCursorStyle(workspace.viewport.contentWindow, style)
+    })
+  }
+
+  setPosition(position?: ICursorPosition) {
+    this.dragAtomDelta = calcPositionDelta(this.position, position)
+    this.position = { ...position }
+    if (this.status === CursorStatus.Dragging) {
+      this.dragStartToCurrentDelta = calcPositionDelta(
+        this.position,
+        this.dragStartPosition
+      )
+    }
+  }
+
+  setDragStartPosition(position?: ICursorPosition) {
+    if (position) {
+      this.dragStartPosition = { ...position }
+    } else {
+      this.dragStartPosition = null
+      this.dragStartToCurrentDelta = DEFAULT_POSITION
+    }
+  }
+
+  setDragEndPosition(position?: ICursorPosition) {
+    if (!this.dragStartPosition) return
+    if (position) {
+      this.dragEndPosition = { ...position }
+      this.dragStartToEndDelta = calcPositionDelta(
+        this.dragStartPosition,
+        this.dragEndPosition
+      )
+    } else {
+      this.dragEndPosition = null
+      this.dragStartToEndDelta = DEFAULT_POSITION
+    }
+  }
+}

package/src/models/Engine.ts

@@ -0,0 +1,108 @@
+import { IEngineProps } from '../types'
+import { ITreeNode, TreeNode } from './TreeNode'
+import { Workbench } from './Workbench'
+import { Cursor } from './Cursor'
+import { Keyboard } from './Keyboard'
+import { Screen, ScreenType } from './Screen'
+import { Event, uid, globalThisPolyfill } from '@sulesky/next-shared'
+
+/**
+ * 设计器引擎
+ */
+
+export class Engine extends Event {
+  id: string
+
+  props: IEngineProps<Engine>
+
+  cursor: Cursor
+
+  workbench: Workbench
+
+  keyboard: Keyboard
+
+  screen: Screen
+
+  constructor(props: IEngineProps<Engine>) {
+    super(props)
+    this.props = {
+      ...Engine.defaultProps,
+      ...props,
+    }
+    this.init()
+    this.id = uid()
+  }
+
+  init() {
+    this.workbench = new Workbench(this)
+    this.screen = new Screen(this)
+    this.cursor = new Cursor(this)
+    this.keyboard = new Keyboard(this)
+  }
+
+  setCurrentTree(tree?: ITreeNode) {
+    if (this.workbench.currentWorkspace) {
+      this.workbench.currentWorkspace.operation.tree.from(tree)
+    }
+  }
+
+  getCurrentTree() {
+    return this.workbench?.currentWorkspace?.operation?.tree
+  }
+
+  getAllSelectedNodes() {
+    let results: TreeNode[] = []
+    for (let i = 0; i < this.workbench.workspaces.length; i++) {
+      const workspace = this.workbench.workspaces[i]
+      results = results.concat(workspace.operation.selection.selectedNodes)
+    }
+    return results
+  }
+
+  findNodeById(id: string) {
+    return TreeNode.findById(id)
+  }
+
+  findMovingNodes(): TreeNode[] {
+    const results = []
+    this.workbench.eachWorkspace((workspace) => {
+      workspace.operation.moveHelper.dragNodes?.forEach((node) => {
+        if (!results.includes(node)) {
+          results.push(node)
+        }
+      })
+    })
+    return results
+  }
+
+  createNode(node: ITreeNode, parent?: TreeNode) {
+    return new TreeNode(node, parent)
+  }
+
+  mount() {
+    this.attachEvents(globalThisPolyfill)
+  }
+
+  unmount() {
+    this.detachEvents()
+  }
+
+  static defaultProps: IEngineProps<Engine> = {
+    shortcuts: [],
+    effects: [],
+    drivers: [],
+    rootComponentName: 'Root',
+    sourceIdAttrName: 'data-designer-source-id',
+    nodeIdAttrName: 'data-designer-node-id',
+    contentEditableAttrName: 'data-content-editable',
+    contentEditableNodeIdAttrName: 'data-content-editable-node-id',
+    clickStopPropagationAttrName: 'data-click-stop-propagation',
+    nodeSelectionIdAttrName: 'data-designer-node-helpers-id',
+    nodeDragHandlerAttrName: 'data-designer-node-drag-handler',
+    screenResizeHandlerAttrName: 'data-designer-screen-resize-handler',
+    nodeResizeHandlerAttrName: 'data-designer-node-resize-handler',
+    outlineNodeIdAttrName: 'data-designer-outline-node-id',
+    nodeTranslateAttrName: 'data-designer-node-translate-handler',
+    defaultScreenType: ScreenType.PC,
+  }
+}

package/src/models/History.ts

@@ -0,0 +1,125 @@
+import { define, observable, action } from '@formily/reactive'
+
+export interface IHistoryProps<T> {
+  onPush?: (item: T) => void
+  onRedo?: (item: T) => void
+  onUndo?: (item: T) => void
+  onGoto?: (item: T) => void
+}
+
+export interface HistoryItem<T> {
+  data: T
+  type?: string
+  timestamp: number
+}
+
+export interface ISerializable {
+  from(json: any): void //导入数据
+  serialize(): any //序列化模型，用于历史记录保存
+}
+
+export class History<T extends ISerializable = any> {
+  context: ISerializable
+  props: IHistoryProps<HistoryItem<T>>
+  current = 0
+  history: HistoryItem<T>[] = []
+  updateTimer = null
+  maxSize = 100
+  locking = false
+  constructor(context: T, props?: IHistoryProps<HistoryItem<T>>) {
+    this.context = context
+    this.props = props
+    this.push()
+    this.makeObservable()
+  }
+
+  makeObservable() {
+    define(this, {
+      current: observable.ref,
+      history: observable.shallow,
+      push: action,
+      undo: action,
+      redo: action,
+      goTo: action,
+      clear: action,
+    })
+  }
+
+  list() {
+    return this.history
+  }
+
+  push(type?: string) {
+    if (this.locking) return
+    if (this.current < this.history.length - 1) {
+      this.history = this.history.slice(0, this.current + 1)
+    }
+    const item = {
+      data: this.context.serialize(),
+      timestamp: Date.now(),
+      type,
+    }
+    this.current = this.history.length
+    this.history.push(item)
+    const overSizeCount = this.history.length - this.maxSize
+    if (overSizeCount > 0) {
+      this.history.splice(0, overSizeCount)
+      this.current = this.history.length - 1
+    }
+    if (this.props?.onPush) {
+      this.props.onPush(item)
+    }
+  }
+
+  get allowUndo() {
+    return this.history.length > 0 && this.current - 1 >= 0
+  }
+
+  get allowRedo() {
+    return this.history.length > this.current + 1
+  }
+
+  redo() {
+    if (this.allowRedo) {
+      const item = this.history[this.current + 1]
+      this.locking = true
+      this.context.from(item.data)
+      this.locking = false
+      this.current++
+      if (this.props?.onRedo) {
+        this.props.onRedo(item)
+      }
+    }
+  }
+
+  undo() {
+    if (this.allowUndo) {
+      const item = this.history[this.current - 1]
+      this.locking = true
+      this.context.from(item.data)
+      this.locking = false
+      this.current--
+      if (this.props?.onUndo) {
+        this.props.onUndo(item)
+      }
+    }
+  }
+
+  goTo(index: number) {
+    const item = this.history[index]
+    if (item) {
+      this.locking = true
+      this.context.from(item.data)
+      this.locking = false
+      this.current = index
+      if (this.props?.onGoto) {
+        this.props.onGoto(item)
+      }
+    }
+  }
+
+  clear() {
+    this.history = []
+    this.current = 0
+  }
+}

package/src/models/Hover.ts

@@ -0,0 +1,49 @@
+import { observable, define, action } from '@formily/reactive'
+import { Operation } from './Operation'
+import { TreeNode } from './TreeNode'
+import { HoverNodeEvent } from '../events'
+
+export interface IHoverProps {
+  operation: Operation
+}
+
+export class Hover {
+  node: TreeNode = null
+  operation: Operation
+  constructor(props?: IHoverProps) {
+    this.operation = props?.operation
+    this.makeObservable()
+  }
+
+  setHover(node?: TreeNode) {
+    if (node) {
+      this.node = node
+    } else {
+      this.node = null
+    }
+    this.trigger()
+  }
+
+  clear() {
+    this.node = null
+  }
+
+  trigger() {
+    if (this.operation) {
+      return this.operation.dispatch(
+        new HoverNodeEvent({
+          target: this.operation.tree,
+          source: this.node,
+        })
+      )
+    }
+  }
+
+  makeObservable() {
+    define(this, {
+      node: observable.ref,
+      setHover: action,
+      clear: action,
+    })
+  }
+}