@sulesky/next-core 1.0.3

package/lib/types.d.ts

@@ -0,0 +1,131 @@
+import { IEventProps, Event } from '@sulesky/next-shared';
+import { ISchema } from '@formily/json-schema';
+import { Engine, ITreeNode, ScreenType, Shortcut, Viewport, Workbench, Workspace, TreeNode } from './models';
+export type IEngineProps<T = Event> = IEventProps<T> & {
+    shortcuts?: Shortcut[];
+    sourceIdAttrName?: string;
+    nodeIdAttrName?: string;
+    contentEditableAttrName?: string;
+    contentEditableNodeIdAttrName?: string;
+    clickStopPropagationAttrName?: string;
+    outlineNodeIdAttrName?: string;
+    nodeSelectionIdAttrName?: string;
+    nodeDragHandlerAttrName?: string;
+    screenResizeHandlerAttrName?: string;
+    nodeResizeHandlerAttrName?: string;
+    nodeTranslateAttrName?: string;
+    defaultComponentTree?: ITreeNode;
+    defaultScreenType?: ScreenType;
+    rootComponentName?: string;
+};
+export type IEngineContext = {
+    workspace: Workspace;
+    workbench: Workbench;
+    engine: Engine;
+    viewport: Viewport;
+};
+export type IResizable = {
+    width?: (node: TreeNode, element: Element) => {
+        plus: () => void;
+        minus: () => void;
+    };
+    height?: (node: TreeNode, element: Element) => {
+        plus: () => void;
+        minus: () => void;
+    };
+};
+export type ITranslate = {
+    x: (node: TreeNode, element: HTMLElement, diffX: string | number) => {
+        translate: () => void;
+    };
+    y: (node: TreeNode, element: HTMLElement, diffY: string | number) => {
+        translate: () => void;
+    };
+};
+export interface IDesignerProps {
+    package?: string;
+    registry?: string;
+    version?: string;
+    path?: string;
+    title?: string;
+    description?: string;
+    icon?: string;
+    droppable?: boolean;
+    draggable?: boolean;
+    deletable?: boolean;
+    cloneable?: boolean;
+    resizable?: IResizable;
+    translatable?: ITranslate;
+    inlineChildrenLayout?: boolean;
+    selfRenderChildren?: boolean;
+    propsSchema?: ISchema;
+    defaultProps?: any;
+    getDragNodes?: (node: TreeNode) => TreeNode | TreeNode[];
+    getDropNodes?: (node: TreeNode, parent: TreeNode) => TreeNode | TreeNode[];
+    getComponentProps?: (node: TreeNode) => any;
+    allowAppend?: (target: TreeNode, sources?: TreeNode[]) => boolean;
+    allowSiblings?: (target: TreeNode, sources?: TreeNode[]) => boolean;
+    allowDrop?: (target: TreeNode) => boolean;
+    [key: string]: any;
+}
+export type IDesignerPropsMap = Record<string, IDesignerProps>;
+export type IDesignerControllerProps = IDesignerProps | ((node: TreeNode) => IDesignerProps);
+export type IDesignerControllerPropsMap = Record<string, IDesignerControllerProps>;
+export interface IDesignerLocales {
+    [ISOCode: string]: {
+        [key: string]: any;
+    };
+}
+export interface IDesignerMiniLocales {
+    [ISOCode: string]: string;
+}
+export interface IDesignerBehaviors {
+    [key: string]: IBehaviorHost;
+}
+export interface IDesignerStore<P> {
+    value: P;
+}
+export type IDesignerIcons = Record<string, any>;
+export type IDesignerIconsStore = IDesignerStore<IDesignerIcons>;
+export type IDesignerLocaleStore = IDesignerStore<IDesignerLocales>;
+export type IDesignerBehaviorStore = IDesignerStore<IBehavior[]>;
+export type IDesignerLanguageStore = IDesignerStore<string>;
+export type WorkbenchTypes = 'DESIGNABLE' | 'PREVIEW' | 'JSONTREE' | 'MARKUP' | (string & {});
+export interface IBehavior {
+    name: string;
+    extends?: string[];
+    selector: (node: TreeNode) => boolean;
+    designerProps?: IDesignerControllerProps;
+    designerLocales?: IDesignerLocales;
+}
+export interface IBehaviorCreator {
+    name: string;
+    extends?: string[];
+    selector: string | ((node: TreeNode) => boolean);
+    designerProps?: IDesignerControllerProps;
+    designerLocales?: IDesignerLocales;
+}
+export interface IBehaviorHost {
+    Behavior?: IBehavior[];
+}
+export type IBehaviorLike = IBehavior[] | IBehaviorHost;
+export interface IResource {
+    title?: string | IDesignerMiniLocales;
+    description?: string | IDesignerMiniLocales;
+    icon?: any;
+    thumb?: string;
+    span?: number;
+    node?: TreeNode;
+}
+export interface IResourceHost {
+    Resource?: IResource[];
+}
+export type IResourceLike = IResource[] | IResourceHost;
+export interface IResourceCreator {
+    title?: string | IDesignerMiniLocales;
+    description?: string | IDesignerMiniLocales;
+    icon?: any;
+    thumb?: string;
+    span?: number;
+    elements?: ITreeNode[];
+}

package/lib/types.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/package.json

@@ -0,0 +1,43 @@
+{
+  "name": "@sulesky/next-core",
+  "version": "1.0.3",
+  "license": "MIT",
+  "main": "lib",
+  "types": "lib/index.d.ts",
+  "engines": {
+    "npm": ">=3.0.0"
+  },
+  "module": "esm",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/kapelan/designable.git"
+  },
+  "bugs": {
+    "url": "https://github.com/kapelan/designable/issues"
+  },
+  "homepage": "https://github.com/kapelan/designable#readme",
+  "scripts": {
+    "build": "rimraf -rf lib esm dist && npm run build:cjs && npm run build:esm && npm run build:umd",
+    "build:cjs": "tsc --project tsconfig.build.json",
+    "build:esm": "tsc --project tsconfig.build.json --module es2015 --outDir esm",
+    "build:umd": "rollup --config rollup.config.mjs"
+  },
+  "devDependencies": {
+    "@formily/json-schema": "^2.3.0",
+    "@formily/path": "^2.3.0",
+    "@formily/reactive": "^2.3.0"
+  },
+  "peerDependencies": {
+    "@formily/json-schema": "^2.3.0",
+    "@formily/path": "^2.3.0",
+    "@formily/reactive": "^2.3.0"
+  },
+  "dependencies": {
+    "@juggle/resize-observer": "^3.3.1",
+    "@sulesky/next-shared": "1.0.3"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "gitHead": "c352e7550efc1420491dfc18b9418ec4fcfcc4ae"
+}

package/rollup.config.mjs

@@ -0,0 +1,3 @@
+import baseConfig from '../../scripts/rollup.base.mjs'
+
+export default baseConfig('designable.core', 'Designable.Core')

package/src/drivers/DragDropDriver.ts

@@ -0,0 +1,143 @@
+import { EventDriver } from '@sulesky/next-shared'
+import { Engine } from '../models/Engine'
+import { DragStartEvent, DragMoveEvent, DragStopEvent } from '../events'
+
+const GlobalState = {
+  dragging: false,
+  onMouseDownAt: 0,
+  startEvent: null,
+  moveEvent: null,
+}
+
+export class DragDropDriver extends EventDriver<Engine> {
+  mouseDownTimer = null
+
+  startEvent: MouseEvent
+
+  onMouseDown = (e: MouseEvent) => {
+    if (e.button !== 0 || e.ctrlKey || e.metaKey) {
+      return
+    }
+    if (
+      e.target['isContentEditable'] ||
+      e.target['contentEditable'] === 'true'
+    ) {
+      return true
+    }
+    if (e.target?.['closest']?.('.monaco-editor')) return
+    GlobalState.startEvent = e
+    GlobalState.dragging = false
+    GlobalState.onMouseDownAt = Date.now()
+    this.batchAddEventListener('mouseup', this.onMouseUp)
+    this.batchAddEventListener('dragend', this.onMouseUp)
+    this.batchAddEventListener('dragstart', this.onStartDrag)
+    this.batchAddEventListener('mousemove', this.onDistanceChange)
+  }
+
+  onMouseUp = (e: MouseEvent) => {
+    if (GlobalState.dragging) {
+      this.dispatch(
+        new DragStopEvent({
+          clientX: e.clientX,
+          clientY: e.clientY,
+          pageX: e.pageX,
+          pageY: e.pageY,
+          target: e.target,
+          view: e.view,
+        })
+      )
+    }
+    this.batchRemoveEventListener(
+      'contextmenu',
+      this.onContextMenuWhileDragging,
+      true
+    )
+    this.batchRemoveEventListener('mouseup', this.onMouseUp)
+    this.batchRemoveEventListener('mousedown', this.onMouseDown)
+    this.batchRemoveEventListener('dragover', this.onMouseMove)
+    this.batchRemoveEventListener('mousemove', this.onMouseMove)
+    this.batchRemoveEventListener('mousemove', this.onDistanceChange)
+    GlobalState.dragging = false
+  }
+
+  onMouseMove = (e: MouseEvent | DragEvent) => {
+    if (
+      e.clientX === GlobalState.moveEvent?.clientX &&
+      e.clientY === GlobalState.moveEvent?.clientY
+    )
+      return
+    this.dispatch(
+      new DragMoveEvent({
+        clientX: e.clientX,
+        clientY: e.clientY,
+        pageX: e.pageX,
+        pageY: e.pageY,
+        target: e.target,
+        view: e.view,
+      })
+    )
+    GlobalState.moveEvent = e
+  }
+
+  onContextMenuWhileDragging = (e: MouseEvent) => {
+    e.preventDefault()
+  }
+
+  onStartDrag = (e: MouseEvent | DragEvent) => {
+    if (GlobalState.dragging) return
+    GlobalState.startEvent = GlobalState.startEvent || e
+    this.batchAddEventListener('dragover', this.onMouseMove)
+    this.batchAddEventListener('mousemove', this.onMouseMove)
+    this.batchAddEventListener(
+      'contextmenu',
+      this.onContextMenuWhileDragging,
+      true
+    )
+    this.dispatch(
+      new DragStartEvent({
+        clientX: GlobalState.startEvent.clientX,
+        clientY: GlobalState.startEvent.clientY,
+        pageX: GlobalState.startEvent.pageX,
+        pageY: GlobalState.startEvent.pageY,
+        target: GlobalState.startEvent.target,
+        view: GlobalState.startEvent.view,
+      })
+    )
+    GlobalState.dragging = true
+  }
+
+  onDistanceChange = (e: MouseEvent) => {
+    const distance = Math.sqrt(
+      Math.pow(e.pageX - GlobalState.startEvent.pageX, 2) +
+        Math.pow(e.pageY - GlobalState.startEvent.pageY, 2)
+    )
+    const timeDelta = Date.now() - GlobalState.onMouseDownAt
+    if (timeDelta > 10 && e !== GlobalState.startEvent && distance > 4) {
+      this.batchRemoveEventListener('mousemove', this.onDistanceChange)
+      this.onStartDrag(e)
+    }
+  }
+
+  attach() {
+    this.batchAddEventListener('mousedown', this.onMouseDown, true)
+  }
+
+  detach() {
+    GlobalState.dragging = false
+    GlobalState.moveEvent = null
+    GlobalState.onMouseDownAt = null
+    GlobalState.startEvent = null
+    this.batchRemoveEventListener('mousedown', this.onMouseDown, true)
+    this.batchRemoveEventListener('dragstart', this.onStartDrag)
+    this.batchRemoveEventListener('dragend', this.onMouseUp)
+    this.batchRemoveEventListener('dragover', this.onMouseMove)
+    this.batchRemoveEventListener('mouseup', this.onMouseUp)
+    this.batchRemoveEventListener('mousemove', this.onMouseMove)
+    this.batchRemoveEventListener('mousemove', this.onDistanceChange)
+    this.batchRemoveEventListener(
+      'contextmenu',
+      this.onContextMenuWhileDragging,
+      true
+    )
+  }
+}

package/src/drivers/KeyboardDriver.ts

@@ -0,0 +1,49 @@
+import { EventDriver } from '@sulesky/next-shared'
+import { KeyDownEvent, KeyUpEvent } from '../events'
+
+function filter(event: KeyboardEvent) {
+  const target: any = event.target
+  const { tagName } = target
+  let flag = true
+  // ignore: isContentEditable === 'true', <input> and <textarea> when readOnly state is false, <select>、Web Components
+  if (
+    target['isContentEditable'] ||
+    ((tagName === 'INPUT' ||
+      tagName === 'TEXTAREA' ||
+      tagName === 'SELECT' ||
+      customElements.get(tagName.toLocaleLowerCase())) &&
+      !target.readOnly)
+  ) {
+    flag = false
+  }
+  return flag
+}
+
+export class KeyboardDriver extends EventDriver {
+  onKeyDown = (e: KeyboardEvent) => {
+    if (!filter(e)) return
+    this.dispatch(new KeyDownEvent(e))
+  }
+
+  onKeyUp = (e: KeyboardEvent) => {
+    this.dispatch(new KeyUpEvent(e))
+  }
+
+  attach() {
+    this.addEventListener('keydown', this.onKeyDown, {
+      mode: 'onlyParent',
+    })
+    this.addEventListener('keyup', this.onKeyUp, {
+      mode: 'onlyParent',
+    })
+  }
+
+  detach() {
+    this.removeEventListener('keydown', this.onKeyDown, {
+      mode: 'onlyParent',
+    })
+    this.removeEventListener('keyup', this.onKeyUp, {
+      mode: 'onlyParent',
+    })
+  }
+}

package/src/drivers/MouseClickDriver.ts

@@ -0,0 +1,61 @@
+import { EventDriver } from '@sulesky/next-shared'
+import { Engine } from '../models/Engine'
+import { MouseClickEvent, MouseDoubleClickEvent } from '../events'
+
+export class MouseClickDriver extends EventDriver<Engine> {
+  onMouseClick = (e: MouseEvent) => {
+    const target = e.target as HTMLElement
+    if (
+      target?.closest(`*[${this.engine.props.clickStopPropagationAttrName}]`)
+    ) {
+      return
+    }
+    this.dispatch(
+      new MouseClickEvent({
+        clientX: e.clientX,
+        clientY: e.clientY,
+        pageX: e.pageX,
+        pageY: e.pageY,
+        target: e.target,
+        view: e.view,
+      })
+    )
+  }
+
+  onMouseDoubleClick = (e: MouseEvent) => {
+    const target = e.target as HTMLElement
+    if (
+      target?.closest(`*[${this.engine.props.clickStopPropagationAttrName}]`)
+    ) {
+      return
+    }
+    this.dispatch(
+      new MouseDoubleClickEvent({
+        clientX: e.clientX,
+        clientY: e.clientY,
+        pageX: e.pageX,
+        pageY: e.pageY,
+        target: e.target,
+        view: e.view,
+      })
+    )
+  }
+
+  attach() {
+    this.addEventListener('click', this.onMouseClick, {
+      mode: 'onlyChild',
+    })
+    this.addEventListener('dblclick', this.onMouseDoubleClick, {
+      mode: 'onlyChild',
+    })
+  }
+
+  detach() {
+    this.removeEventListener('click', this.onMouseClick, {
+      mode: 'onlyChild',
+    })
+    this.removeEventListener('dblclick', this.onMouseDoubleClick, {
+      mode: 'onlyChild',
+    })
+  }
+}

package/src/drivers/MouseMoveDriver.ts

@@ -0,0 +1,34 @@
+import { EventDriver } from '@sulesky/next-shared'
+import { Engine } from '../models/Engine'
+import { MouseMoveEvent } from '../events'
+export class MouseMoveDriver extends EventDriver<Engine> {
+  request = null
+
+  onMouseMove = (e: MouseEvent) => {
+    this.request = requestAnimationFrame(() => {
+      cancelAnimationFrame(this.request)
+      this.dispatch(
+        new MouseMoveEvent({
+          clientX: e.clientX,
+          clientY: e.clientY,
+          pageX: e.pageX,
+          pageY: e.pageY,
+          target: e.target,
+          view: e.view,
+        })
+      )
+    })
+  }
+
+  attach() {
+    this.addEventListener('mousemove', this.onMouseMove, {
+      mode: 'onlyOne',
+    })
+  }
+
+  detach() {
+    this.removeEventListener('mouseover', this.onMouseMove, {
+      mode: 'onlyOne',
+    })
+  }
+}

package/src/drivers/ViewportResizeDriver.ts

@@ -0,0 +1,52 @@
+import { EventDriver } from '@sulesky/next-shared'
+import { Engine } from '../models/Engine'
+import { ViewportResizeEvent } from '../events'
+import { ResizeObserver } from '@juggle/resize-observer'
+import { globalThisPolyfill } from '@sulesky/next-shared'
+
+export class ViewportResizeDriver extends EventDriver<Engine> {
+  request = null
+
+  resizeObserver: ResizeObserver = null
+
+  onResize = (e: any) => {
+    if (e.preventDefault) e.preventDefault()
+    this.request = requestAnimationFrame(() => {
+      cancelAnimationFrame(this.request)
+      this.dispatch(
+        new ViewportResizeEvent({
+          scrollX: this.contentWindow.scrollX,
+          scrollY: this.contentWindow.scrollY,
+          width: this.contentWindow.innerWidth,
+          height: this.contentWindow.innerHeight,
+          innerHeight: this.contentWindow.innerHeight,
+          innerWidth: this.contentWindow.innerWidth,
+          view: this.contentWindow,
+          target: e.target || this.container,
+        })
+      )
+    })
+  }
+
+  attach() {
+    if (this.contentWindow && this.contentWindow !== globalThisPolyfill) {
+      this.addEventListener('resize', this.onResize)
+    } else {
+      if (this.container && this.container !== document) {
+        this.resizeObserver = new ResizeObserver(this.onResize)
+        this.resizeObserver.observe(this.container as HTMLElement)
+      }
+    }
+  }
+
+  detach() {
+    if (this.contentWindow && this.contentWindow !== globalThisPolyfill) {
+      this.removeEventListener('resize', this.onResize)
+    } else if (this.resizeObserver) {
+      if (this.container && this.container !== document) {
+        this.resizeObserver.unobserve(this.container as HTMLElement)
+        this.resizeObserver.disconnect()
+      }
+    }
+  }
+}

package/src/drivers/ViewportScrollDriver.ts

@@ -0,0 +1,34 @@
+import { EventDriver, globalThisPolyfill } from '@sulesky/next-shared'
+import { Engine } from '../models/Engine'
+import { ViewportScrollEvent } from '../events'
+
+export class ViewportScrollDriver extends EventDriver<Engine> {
+  request = null
+
+  onScroll = (e: UIEvent) => {
+    e.preventDefault()
+    this.request = globalThisPolyfill.requestAnimationFrame(() => {
+      this.dispatch(
+        new ViewportScrollEvent({
+          scrollX: this.contentWindow.scrollX,
+          scrollY: this.contentWindow.scrollY,
+          width: this.contentWindow.document.body.clientWidth,
+          height: this.contentWindow.document.body.clientHeight,
+          innerHeight: this.contentWindow.innerHeight,
+          innerWidth: this.contentWindow.innerWidth,
+          view: this.contentWindow,
+          target: e.target,
+        })
+      )
+      cancelAnimationFrame(this.request)
+    })
+  }
+
+  attach() {
+    this.addEventListener('scroll', this.onScroll)
+  }
+
+  detach() {
+    this.removeEventListener('scroll', this.onScroll)
+  }
+}

package/src/drivers/index.ts

@@ -0,0 +1,6 @@
+export * from './DragDropDriver'
+export * from './MouseClickDriver'
+export * from './MouseMoveDriver'
+export * from './ViewportResizeDriver'
+export * from './ViewportScrollDriver'
+export * from './KeyboardDriver'

package/src/effects/index.ts

@@ -0,0 +1,11 @@
+export * from './useCursorEffect'
+export * from './useViewportEffect'
+export * from './useDragDropEffect'
+export * from './useResizeEffect'
+export * from './useSelectionEffect'
+export * from './useFreeSelectionEffect'
+export * from './useKeyboardEffect'
+export * from './useAutoScrollEffect'
+export * from './useWorkspaceEffect'
+export * from './useContentEditableEffect'
+export * from './useTranslateEffect'

package/src/effects/useAutoScrollEffect.ts

@@ -0,0 +1,82 @@
+import { Engine, CursorStatus, Viewport } from '../models'
+import { DragMoveEvent, DragStartEvent, DragStopEvent } from '../events'
+import {
+  calcAutoScrollBasicInfo,
+  scrollAnimate,
+  IAutoScrollBasicInfo,
+  IPoint,
+  Point,
+} from '@sulesky/next-shared'
+
+export const useAutoScrollEffect = (engine: Engine) => {
+  let xScroller: IAutoScrollBasicInfo = null
+  let yScroller: IAutoScrollBasicInfo = null
+  let xScrollerAnimationStop = null
+  let yScrollerAnimationStop = null
+
+  const scrolling = (point: IPoint, viewport: Viewport) => {
+    if (engine.cursor.status === CursorStatus.Dragging) {
+      xScroller = calcAutoScrollBasicInfo(point, 'x', viewport.rect)
+      yScroller = calcAutoScrollBasicInfo(point, 'y', viewport.rect)
+      if (xScroller) {
+        if (xScrollerAnimationStop) {
+          xScrollerAnimationStop()
+        }
+        xScrollerAnimationStop = scrollAnimate(
+          viewport.scrollContainer,
+          'x',
+          xScroller.direction,
+          xScroller.speed
+        )
+      } else {
+        if (xScrollerAnimationStop) {
+          xScrollerAnimationStop()
+        }
+      }
+      if (yScroller) {
+        if (yScrollerAnimationStop) {
+          yScrollerAnimationStop()
+        }
+        yScrollerAnimationStop = scrollAnimate(
+          viewport.scrollContainer,
+          'y',
+          yScroller.direction,
+          yScroller.speed
+        )
+      } else {
+        if (yScrollerAnimationStop) {
+          yScrollerAnimationStop()
+        }
+      }
+    }
+  }
+
+  engine.subscribeTo(DragStartEvent, () => {
+    engine.workbench.eachWorkspace((workspace) => {
+      workspace.viewport.takeDragStartSnapshot()
+    })
+  })
+
+  engine.subscribeTo(DragMoveEvent, (event) => {
+    engine.workbench.eachWorkspace((workspace) => {
+      const viewport = workspace.viewport
+      const outline = workspace.outline
+      const point = new Point(event.data.topClientX, event.data.topClientY)
+      if (outline.isPointInViewport(point)) {
+        scrolling(point, outline)
+      } else if (viewport.isPointInViewport(point)) {
+        scrolling(point, viewport)
+      }
+    })
+  })
+  engine.subscribeTo(DragStopEvent, () => {
+    xScroller = null
+    yScroller = null
+    if (xScrollerAnimationStop) {
+      xScrollerAnimationStop()
+    }
+    if (yScrollerAnimationStop) {
+      yScrollerAnimationStop()
+    }
+  })
+}