@thienvu18/designable-core 2.0.0 → 2.0.2

package/lib/drivers/DragDropDriver.js

@@ -1,115 +1,137 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.DragDropDriver = void 0;
-const designable_shared_1 = require("@thienvu18/designable-shared");
-const events_1 = require("../events");
+'use strict'
+Object.defineProperty(exports, '__esModule', { value: true })
+exports.DragDropDriver = void 0
+const designable_shared_1 = require('@thienvu18/designable-shared')
+const events_1 = require('../events')
 const GlobalState = {
-    dragging: false,
-    onMouseDownAt: 0,
-    startEvent: null,
-    moveEvent: null,
-};
+  dragging: false,
+  onMouseDownAt: 0,
+  startEvent: null,
+  moveEvent: null,
+}
 class DragDropDriver extends designable_shared_1.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 events_1.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 events_1.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 events_1.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 events_1.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 events_1.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 events_1.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
+    )
+  }
 }
-exports.DragDropDriver = DragDropDriver;
+exports.DragDropDriver = DragDropDriver

package/lib/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/lib/drivers/KeyboardDriver.js

@@ -1,50 +1,51 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.KeyboardDriver = void 0;
-const designable_shared_1 = require("@thienvu18/designable-shared");
-const events_1 = require("../events");
+'use strict'
+Object.defineProperty(exports, '__esModule', { value: true })
+exports.KeyboardDriver = void 0
+const designable_shared_1 = require('@thienvu18/designable-shared')
+const events_1 = require('../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
 }
 class KeyboardDriver extends designable_shared_1.EventDriver {
-    constructor() {
-        super(...arguments);
-        this.onKeyDown = (e) => {
-            if (!filter(e))
-                return;
-            this.dispatch(new events_1.KeyDownEvent(e));
-        };
-        this.onKeyUp = (e) => {
-            this.dispatch(new events_1.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 events_1.KeyDownEvent(e))
     }
-    detach() {
-        this.removeEventListener('keydown', this.onKeyDown, {
-            mode: 'onlyParent',
-        });
-        this.removeEventListener('keyup', this.onKeyUp, {
-            mode: 'onlyParent',
-        });
+    this.onKeyUp = (e) => {
+      this.dispatch(new events_1.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',
+    })
+  }
 }
-exports.KeyboardDriver = KeyboardDriver;
+exports.KeyboardDriver = KeyboardDriver

package/lib/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/lib/drivers/MouseClickDriver.js

@@ -1,55 +1,63 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.MouseClickDriver = void 0;
-const designable_shared_1 = require("@thienvu18/designable-shared");
-const events_1 = require("../events");
+'use strict'
+Object.defineProperty(exports, '__esModule', { value: true })
+exports.MouseClickDriver = void 0
+const designable_shared_1 = require('@thienvu18/designable-shared')
+const events_1 = require('../events')
 class MouseClickDriver extends designable_shared_1.EventDriver {
-    constructor() {
-        super(...arguments);
-        this.onMouseClick = (e) => {
-            const target = e.target;
-            if (target?.closest(`*[${this.engine.props.clickStopPropagationAttrName}]`)) {
-                return;
-            }
-            this.dispatch(new events_1.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 events_1.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 events_1.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 events_1.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',
+    })
+  }
 }
-exports.MouseClickDriver = MouseClickDriver;
+exports.MouseClickDriver = MouseClickDriver

package/lib/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/lib/drivers/MouseMoveDriver.js

@@ -1,35 +1,37 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.MouseMoveDriver = void 0;
-const designable_shared_1 = require("@thienvu18/designable-shared");
-const events_1 = require("../events");
+'use strict'
+Object.defineProperty(exports, '__esModule', { value: true })
+exports.MouseMoveDriver = void 0
+const designable_shared_1 = require('@thienvu18/designable-shared')
+const events_1 = require('../events')
 class MouseMoveDriver extends designable_shared_1.EventDriver {
-    constructor() {
-        super(...arguments);
-        this.request = null;
-        this.onMouseMove = (e) => {
-            this.request = requestAnimationFrame(() => {
-                cancelAnimationFrame(this.request);
-                this.dispatch(new events_1.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 events_1.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',
+    })
+  }
 }
-exports.MouseMoveDriver = MouseMoveDriver;
+exports.MouseMoveDriver = MouseMoveDriver

package/lib/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
 }