@thienvu18/designable-core 2.0.1 → 2.0.2

package/esm/drivers/DragDropDriver.d.ts

@@ -1,14 +1,14 @@
-import { EventDriver } from '@thienvu18/designable-shared';
-import { Engine } from '../models/Engine';
+import { EventDriver } from '@thienvu18/designable-shared'
+import { Engine } from '../models/Engine'
 export declare class DragDropDriver extends EventDriver<Engine> {
-    mouseDownTimer: any;
-    startEvent: MouseEvent;
-    onMouseDown: (e: MouseEvent) => boolean;
-    onMouseUp: (e: MouseEvent) => void;
-    onMouseMove: (e: MouseEvent | DragEvent) => void;
-    onContextMenuWhileDragging: (e: MouseEvent) => void;
-    onStartDrag: (e: MouseEvent | DragEvent) => void;
-    onDistanceChange: (e: MouseEvent) => void;
-    attach(): void;
-    detach(): void;
+  mouseDownTimer: any
+  startEvent: MouseEvent
+  onMouseDown: (e: MouseEvent) => boolean
+  onMouseUp: (e: MouseEvent) => void
+  onMouseMove: (e: MouseEvent | DragEvent) => void
+  onContextMenuWhileDragging: (e: MouseEvent) => void
+  onStartDrag: (e: MouseEvent | DragEvent) => void
+  onDistanceChange: (e: MouseEvent) => void
+  attach(): void
+  detach(): void
 }

package/esm/drivers/DragDropDriver.js

@@ -1,111 +1,133 @@
-import { EventDriver } from '@thienvu18/designable-shared';
-import { DragStartEvent, DragMoveEvent, DragStopEvent } from '../events';
+import { EventDriver } from '@thienvu18/designable-shared'
+import { DragMoveEvent, DragStartEvent, DragStopEvent } from '../events'
 const GlobalState = {
-    dragging: false,
-    onMouseDownAt: 0,
-    startEvent: null,
-    moveEvent: null,
-};
+  dragging: false,
+  onMouseDownAt: 0,
+  startEvent: null,
+  moveEvent: null,
+}
 export class DragDropDriver extends EventDriver {
-    constructor() {
-        super(...arguments);
-        this.mouseDownTimer = null;
-        this.onMouseDown = (e) => {
-            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);
-        };
-        this.onMouseUp = (e) => {
-            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;
-        };
-        this.onMouseMove = (e) => {
-            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;
-        };
-        this.onContextMenuWhileDragging = (e) => {
-            e.preventDefault();
-        };
-        this.onStartDrag = (e) => {
-            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;
-        };
-        this.onDistanceChange = (e) => {
-            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);
-            }
-        };
+  constructor() {
+    super(...arguments)
+    this.mouseDownTimer = null
+    this.onMouseDown = (e) => {
+      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)
+    }
+    this.onMouseUp = (e) => {
+      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
+    }
+    this.onMouseMove = (e) => {
+      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
+    }
+    this.onContextMenuWhileDragging = (e) => {
+      e.preventDefault()
     }
-    attach() {
-        this.batchAddEventListener('mousedown', this.onMouseDown, true);
+    this.onStartDrag = (e) => {
+      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
     }
-    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);
+    this.onDistanceChange = (e) => {
+      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/esm/drivers/KeyboardDriver.d.ts

@@ -1,7 +1,7 @@
-import { EventDriver } from '@thienvu18/designable-shared';
+import { EventDriver } from '@thienvu18/designable-shared'
 export declare class KeyboardDriver extends EventDriver {
-    onKeyDown: (e: KeyboardEvent) => void;
-    onKeyUp: (e: KeyboardEvent) => void;
-    attach(): void;
-    detach(): void;
+  onKeyDown: (e: KeyboardEvent) => void
+  onKeyUp: (e: KeyboardEvent) => void
+  attach(): void
+  detach(): void
 }

package/esm/drivers/KeyboardDriver.js

@@ -1,46 +1,47 @@
-import { EventDriver } from '@thienvu18/designable-shared';
-import { KeyDownEvent, KeyUpEvent } from '../events';
+import { EventDriver } from '@thienvu18/designable-shared'
+import { KeyDownEvent, KeyUpEvent } from '../events'
 function filter(event) {
-    const target = 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;
+  const target = 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 {
-    constructor() {
-        super(...arguments);
-        this.onKeyDown = (e) => {
-            if (!filter(e))
-                return;
-            this.dispatch(new KeyDownEvent(e));
-        };
-        this.onKeyUp = (e) => {
-            this.dispatch(new KeyUpEvent(e));
-        };
-    }
-    attach() {
-        this.addEventListener('keydown', this.onKeyDown, {
-            mode: 'onlyParent',
-        });
-        this.addEventListener('keyup', this.onKeyUp, {
-            mode: 'onlyParent',
-        });
+  constructor() {
+    super(...arguments)
+    this.onKeyDown = (e) => {
+      if (!filter(e)) return
+      this.dispatch(new KeyDownEvent(e))
     }
-    detach() {
-        this.removeEventListener('keydown', this.onKeyDown, {
-            mode: 'onlyParent',
-        });
-        this.removeEventListener('keyup', this.onKeyUp, {
-            mode: 'onlyParent',
-        });
+    this.onKeyUp = (e) => {
+      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/esm/drivers/MouseClickDriver.d.ts

@@ -1,8 +1,8 @@
-import { EventDriver } from '@thienvu18/designable-shared';
-import { Engine } from '../models/Engine';
+import { EventDriver } from '@thienvu18/designable-shared'
+import { Engine } from '../models/Engine'
 export declare class MouseClickDriver extends EventDriver<Engine> {
-    onMouseClick: (e: MouseEvent) => void;
-    onMouseDoubleClick: (e: MouseEvent) => void;
-    attach(): void;
-    detach(): void;
+  onMouseClick: (e: MouseEvent) => void
+  onMouseDoubleClick: (e: MouseEvent) => void
+  attach(): void
+  detach(): void
 }

package/esm/drivers/MouseClickDriver.js

@@ -1,51 +1,59 @@
-import { EventDriver } from '@thienvu18/designable-shared';
-import { MouseClickEvent, MouseDoubleClickEvent } from '../events';
+import { EventDriver } from '@thienvu18/designable-shared'
+import { MouseClickEvent, MouseDoubleClickEvent } from '../events'
 export class MouseClickDriver extends EventDriver {
-    constructor() {
-        super(...arguments);
-        this.onMouseClick = (e) => {
-            const target = e.target;
-            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,
-            }));
-        };
-        this.onMouseDoubleClick = (e) => {
-            const target = e.target;
-            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,
-            }));
-        };
+  constructor() {
+    super(...arguments)
+    this.onMouseClick = (e) => {
+      const target = e.target
+      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,
+        })
+      )
     }
-    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',
-        });
+    this.onMouseDoubleClick = (e) => {
+      const target = e.target
+      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/esm/drivers/MouseMoveDriver.d.ts

@@ -1,8 +1,8 @@
-import { EventDriver } from '@thienvu18/designable-shared';
-import { Engine } from '../models/Engine';
+import { EventDriver } from '@thienvu18/designable-shared'
+import { Engine } from '../models/Engine'
 export declare class MouseMoveDriver extends EventDriver<Engine> {
-    request: any;
-    onMouseMove: (e: MouseEvent) => void;
-    attach(): void;
-    detach(): void;
+  request: any
+  onMouseMove: (e: MouseEvent) => void
+  attach(): void
+  detach(): void
 }

package/esm/drivers/MouseMoveDriver.js

@@ -1,31 +1,33 @@
-import { EventDriver } from '@thienvu18/designable-shared';
-import { MouseMoveEvent } from '../events';
+import { EventDriver } from '@thienvu18/designable-shared'
+import { MouseMoveEvent } from '../events'
 export class MouseMoveDriver extends EventDriver {
-    constructor() {
-        super(...arguments);
-        this.request = null;
-        this.onMouseMove = (e) => {
-            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',
-        });
+  constructor() {
+    super(...arguments)
+    this.request = null
+    this.onMouseMove = (e) => {
+      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/esm/drivers/ViewportResizeDriver.d.ts

@@ -1,11 +1,11 @@
-import { EventDriver } from '@thienvu18/designable-shared';
-import { Engine } from '../models/Engine';
-import { ResizeObserver } from '@juggle/resize-observer';
+import { ResizeObserver } from '@juggle/resize-observer'
+import { EventDriver } from '@thienvu18/designable-shared'
+import { Engine } from '../models/Engine'
 export declare class ViewportResizeDriver extends EventDriver<Engine> {
-    request: number | null;
-    resizeObserver: ResizeObserver;
-    resizeTarget: EventTarget | null;
-    onResize: (event: UIEvent | ResizeObserverEntry[]) => void;
-    attach(): void;
-    detach(): void;
+  request: number | null
+  resizeObserver: ResizeObserver
+  resizeTarget: EventTarget | null
+  onResize: (event: UIEvent | ResizeObserverEntry[]) => void
+  attach(): void
+  detach(): void
 }