@thienvu18/designable-core 2.0.1 → 2.0.2

package/esm/models/History.js

@@ -1,96 +1,95 @@
-import { define, observable, action } from '@formily/reactive';
+import { action, define, observable } from '@formily/reactive'
 export class History {
-    constructor(context, props) {
-        this.current = 0;
-        this.history = [];
-        this.updateTimer = null;
-        this.maxSize = 100;
-        this.locking = false;
-        this.context = context;
-        this.props = props;
-        this.push();
-        this.makeObservable();
+  constructor(context, props) {
+    this.current = 0
+    this.history = []
+    this.updateTimer = null
+    this.maxSize = 100
+    this.locking = false
+    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) {
+    if (this.locking) return
+    if (this.current < this.history.length - 1) {
+      this.history = this.history.slice(0, this.current + 1)
     }
-    makeObservable() {
-        define(this, {
-            current: observable.ref,
-            history: observable.shallow,
-            push: action,
-            undo: action,
-            redo: action,
-            goTo: action,
-            clear: action,
-        });
+    const item = {
+      data: this.context.serialize(),
+      timestamp: Date.now(),
+      type,
     }
-    list() {
-        return this.history;
+    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
     }
-    push(type) {
-        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);
-        }
+    if (this.props?.onPush) {
+      this.props.onPush(item)
     }
-    get allowUndo() {
-        return this.history.length > 0 && this.current - 1 >= 0;
+  }
+  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)
+      }
     }
-    get allowRedo() {
-        return this.history.length > this.current + 1;
+  }
+  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)
+      }
     }
-    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) {
-        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;
+  }
+  goTo(index) {
+    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/esm/models/Hover.d.ts

@@ -1,14 +1,14 @@
-import { Operation } from './Operation';
-import { TreeNode } from './TreeNode';
+import { Operation } from './Operation'
+import { TreeNode } from './TreeNode'
 export interface IHoverProps {
-    operation: Operation;
+  operation: Operation
 }
 export declare class Hover {
-    node: TreeNode;
-    operation: Operation;
-    constructor(props?: IHoverProps);
-    setHover(node?: TreeNode): void;
-    clear(): void;
-    trigger(): any;
-    makeObservable(): void;
+  node: TreeNode
+  operation: Operation
+  constructor(props?: IHoverProps)
+  setHover(node?: TreeNode): void
+  clear(): void
+  trigger(): any
+  makeObservable(): void
 }

package/esm/models/Hover.js

@@ -1,36 +1,37 @@
-import { observable, define, action } from '@formily/reactive';
-import { HoverNodeEvent } from '../events';
+import { action, define, observable } from '@formily/reactive'
+import { HoverNodeEvent } from '../events'
 export class Hover {
-    constructor(props) {
-        this.node = null;
-        this.operation = props?.operation;
-        this.makeObservable();
+  constructor(props) {
+    this.node = null
+    this.operation = props?.operation
+    this.makeObservable()
+  }
+  setHover(node) {
+    if (node) {
+      this.node = node
+    } else {
+      this.node = null
     }
-    setHover(node) {
-        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,
-        });
+    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,
+    })
+  }
 }

package/esm/models/Keyboard.d.ts

@@ -1,29 +1,29 @@
-import { KeyCode } from '@thienvu18/designable-shared';
-import { Engine } from './Engine';
-import { Shortcut } from './Shortcut';
-import { AbstractKeyboardEvent } from '../events/keyboard/AbstractKeyboardEvent';
-import { IEngineContext } from '../types';
+import { KeyCode } from '@thienvu18/designable-shared'
+import { AbstractKeyboardEvent } from '../events/keyboard/AbstractKeyboardEvent'
+import { IEngineContext } from '../types'
+import { Engine } from './Engine'
+import { Shortcut } from './Shortcut'
 export interface IKeyboard {
-    engine: Engine;
+  engine: Engine
 }
 export declare class Keyboard {
-    engine: Engine;
-    shortcuts: Shortcut[];
-    sequence: KeyCode[];
-    keyDown: KeyCode;
-    modifiers: {};
-    requestTimer: any;
-    constructor(engine?: Engine);
-    matchCodes(context: IEngineContext): boolean;
-    preventCodes(): boolean;
-    includes(key: KeyCode): boolean;
-    excludes(key: KeyCode): void;
-    addKeyCode(key: KeyCode): void;
-    removeKeyCode(key: KeyCode): void;
-    isModifier(code: KeyCode): boolean;
-    handleModifiers(event: AbstractKeyboardEvent): void;
-    handleKeyboard(event: AbstractKeyboardEvent, context: IEngineContext): void;
-    isKeyDown(code: KeyCode): boolean;
-    requestClean(duration?: number): void;
-    makeObservable(): void;
+  engine: Engine
+  shortcuts: Shortcut[]
+  sequence: KeyCode[]
+  keyDown: KeyCode
+  modifiers: {}
+  requestTimer: any
+  constructor(engine?: Engine)
+  matchCodes(context: IEngineContext): boolean
+  preventCodes(): boolean
+  includes(key: KeyCode): boolean
+  excludes(key: KeyCode): void
+  addKeyCode(key: KeyCode): void
+  removeKeyCode(key: KeyCode): void
+  isModifier(code: KeyCode): boolean
+  handleModifiers(event: AbstractKeyboardEvent): void
+  handleKeyboard(event: AbstractKeyboardEvent, context: IEngineContext): void
+  isKeyDown(code: KeyCode): boolean
+  requestClean(duration?: number): void
+  makeObservable(): void
 }

package/esm/models/Keyboard.js

@@ -1,102 +1,103 @@
-import { observable, define, action } from '@formily/reactive';
-import { KeyCode } from '@thienvu18/designable-shared';
-import { Shortcut } from './Shortcut';
+import { action, define, observable } from '@formily/reactive'
+import { KeyCode } from '@thienvu18/designable-shared'
+import { Shortcut } from './Shortcut'
 const Modifiers = [
-    ['metaKey', KeyCode.Meta],
-    ['shiftKey', KeyCode.Shift],
-    ['ctrlKey', KeyCode.Control],
-    ['altKey', KeyCode.Alt],
-];
+  ['metaKey', KeyCode.Meta],
+  ['shiftKey', KeyCode.Shift],
+  ['ctrlKey', KeyCode.Control],
+  ['altKey', KeyCode.Alt],
+]
 export class Keyboard {
-    constructor(engine) {
-        this.shortcuts = [];
-        this.sequence = [];
-        this.keyDown = null;
-        this.modifiers = {};
-        this.requestTimer = null;
-        this.engine = engine;
-        this.shortcuts = engine.props?.shortcuts || [];
-        this.makeObservable();
+  constructor(engine) {
+    this.shortcuts = []
+    this.sequence = []
+    this.keyDown = null
+    this.modifiers = {}
+    this.requestTimer = null
+    this.engine = engine
+    this.shortcuts = engine.props?.shortcuts || []
+    this.makeObservable()
+  }
+  matchCodes(context) {
+    for (let i = 0; i < this.shortcuts.length; i++) {
+      const shortcut = this.shortcuts[i]
+      if (shortcut.match(this.sequence, context)) {
+        return true
+      }
     }
-    matchCodes(context) {
-        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);
-        });
+    return false
+  }
+  preventCodes() {
+    return this.shortcuts.some((shortcut) => {
+      return shortcut.preventCodes(this.sequence)
+    })
+  }
+  includes(key) {
+    return this.sequence.some((code) => Shortcut.matchCode(code, key))
+  }
+  excludes(key) {
+    this.sequence = this.sequence.filter(
+      (code) => !Shortcut.matchCode(key, code)
+    )
+  }
+  addKeyCode(key) {
+    if (!this.includes(key)) {
+      this.sequence.push(key)
     }
-    includes(key) {
-        return this.sequence.some((code) => Shortcut.matchCode(code, key));
+  }
+  removeKeyCode(key) {
+    if (this.includes(key)) {
+      this.excludes(key)
     }
-    excludes(key) {
-        this.sequence = this.sequence.filter((code) => !Shortcut.matchCode(key, code));
-    }
-    addKeyCode(key) {
-        if (!this.includes(key)) {
-            this.sequence.push(key);
+  }
+  isModifier(code) {
+    return Modifiers.some((modifier) => Shortcut.matchCode(modifier[1], code))
+  }
+  handleModifiers(event) {
+    Modifiers.forEach(([key, code]) => {
+      if (event[key]) {
+        if (!this.includes(code)) {
+          this.sequence = [code].concat(this.sequence)
         }
+      }
+    })
+  }
+  handleKeyboard(event, context) {
+    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
     }
-    removeKeyCode(key) {
-        if (this.includes(key)) {
-            this.excludes(key);
-        }
-    }
-    isModifier(code) {
-        return Modifiers.some((modifier) => Shortcut.matchCode(modifier[1], code));
-    }
-    handleModifiers(event) {
-        Modifiers.forEach(([key, code]) => {
-            if (event[key]) {
-                if (!this.includes(code)) {
-                    this.sequence = [code].concat(this.sequence);
-                }
-            }
-        });
-    }
-    handleKeyboard(event, context) {
-        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) {
-        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,
-        });
-    }
+  }
+  isKeyDown(code) {
+    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/esm/models/MoveHelper.d.ts

@@ -1,66 +1,69 @@
-import { Operation } from './Operation';
-import { TreeNode } from './TreeNode';
-import { IPoint, Rect } from '@thienvu18/designable-shared';
-import { Viewport } from './Viewport';
+import { IPoint, Rect } from '@thienvu18/designable-shared'
+import { Operation } from './Operation'
+import { TreeNode } from './TreeNode'
+import { Viewport } from './Viewport'
 export declare 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"
+  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;
+  operation: Operation
 }
 export interface IMoveHelperDragStartProps {
-    dragNodes: TreeNode[];
+  dragNodes: TreeNode[]
 }
 export interface IMoveHelperDragDropProps {
-    dropNode: TreeNode;
+  dropNode: TreeNode
 }
 export interface IMoveHelperDragMoveProps {
-    touchNode: TreeNode;
-    point: IPoint;
+  touchNode: TreeNode
+  point: IPoint
 }
 export declare class MoveHelper {
-    operation: Operation;
-    rootNode: TreeNode;
-    dragNodes: TreeNode[];
-    touchNode: TreeNode;
-    closestNode: TreeNode;
-    activeViewport: Viewport;
-    viewportClosestRect: Rect;
-    outlineClosestRect: Rect;
-    viewportClosestOffsetRect: Rect;
-    outlineClosestOffsetRect: Rect;
-    viewportClosestDirection: ClosestPosition;
-    outlineClosestDirection: ClosestPosition;
-    dragging: boolean;
-    constructor(props: IMoveHelperProps);
-    get cursor(): import("./Cursor").Cursor;
-    get viewport(): Viewport;
-    get outline(): Viewport;
-    get hasDragNodes(): boolean;
-    get closestDirection(): ClosestPosition;
-    getClosestLayout(viewport: Viewport): "vertical" | "horizontal";
-    calcClosestPosition(point: IPoint, viewport: Viewport): ClosestPosition;
-    calcClosestNode(point: IPoint, viewport: Viewport): TreeNode;
-    calcClosestRect(viewport: Viewport, closestDirection: ClosestPosition): Rect;
-    calcClosestOffsetRect(viewport: Viewport, closestDirection: ClosestPosition): Rect;
-    dragStart(props: IMoveHelperDragStartProps): void;
-    dragMove(props: IMoveHelperDragMoveProps): void;
-    dragDrop(props: IMoveHelperDragDropProps): void;
-    dragEnd(): void;
-    trigger(event: any): any;
-    makeObservable(): void;
+  operation: Operation
+  rootNode: TreeNode
+  dragNodes: TreeNode[]
+  touchNode: TreeNode
+  closestNode: TreeNode
+  activeViewport: Viewport
+  viewportClosestRect: Rect
+  outlineClosestRect: Rect
+  viewportClosestOffsetRect: Rect
+  outlineClosestOffsetRect: Rect
+  viewportClosestDirection: ClosestPosition
+  outlineClosestDirection: ClosestPosition
+  dragging: boolean
+  constructor(props: IMoveHelperProps)
+  get cursor(): import('./Cursor').Cursor
+  get viewport(): Viewport
+  get outline(): Viewport
+  get hasDragNodes(): boolean
+  get closestDirection(): ClosestPosition
+  getClosestLayout(viewport: Viewport): 'vertical' | 'horizontal'
+  calcClosestPosition(point: IPoint, viewport: Viewport): ClosestPosition
+  calcClosestNode(point: IPoint, viewport: Viewport): TreeNode
+  calcClosestRect(viewport: Viewport, closestDirection: ClosestPosition): Rect
+  calcClosestOffsetRect(
+    viewport: Viewport,
+    closestDirection: ClosestPosition
+  ): Rect
+  dragStart(props: IMoveHelperDragStartProps): void
+  dragMove(props: IMoveHelperDragMoveProps): void
+  dragDrop(props: IMoveHelperDragDropProps): void
+  dragEnd(): void
+  trigger(event: any): any
+  makeObservable(): void
 }