@thienvu18/designable-core 2.0.0

package/lib/drivers/DragDropDriver.js

@@ -0,0 +1,115 @@
+"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,
+};
+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);
+            }
+        };
+    }
+    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;

package/lib/drivers/KeyboardDriver.d.ts

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

package/lib/drivers/KeyboardDriver.js

@@ -0,0 +1,50 @@
+"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;
+}
+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',
+        });
+    }
+    detach() {
+        this.removeEventListener('keydown', this.onKeyDown, {
+            mode: 'onlyParent',
+        });
+        this.removeEventListener('keyup', this.onKeyUp, {
+            mode: 'onlyParent',
+        });
+    }
+}
+exports.KeyboardDriver = KeyboardDriver;

package/lib/drivers/MouseClickDriver.d.ts

@@ -0,0 +1,8 @@
+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;
+}

package/lib/drivers/MouseClickDriver.js

@@ -0,0 +1,55 @@
+"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,
+            }));
+        };
+    }
+    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;

package/lib/drivers/MouseMoveDriver.d.ts

@@ -0,0 +1,8 @@
+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;
+}

package/lib/drivers/MouseMoveDriver.js

@@ -0,0 +1,35 @@
+"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',
+        });
+    }
+}
+exports.MouseMoveDriver = MouseMoveDriver;

package/lib/drivers/ViewportResizeDriver.d.ts

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

package/lib/drivers/ViewportResizeDriver.js

@@ -0,0 +1,68 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ViewportResizeDriver = void 0;
+const designable_shared_1 = require("@thienvu18/designable-shared");
+const events_1 = require("../events");
+const resize_observer_1 = require("@juggle/resize-observer");
+const designable_shared_2 = require("@thienvu18/designable-shared");
+class ViewportResizeDriver extends designable_shared_1.EventDriver {
+    constructor() {
+        super(...arguments);
+        this.request = null;
+        this.resizeObserver = null;
+        this.resizeTarget = null;
+        this.onResize = (event) => {
+            const target = Array.isArray(event)
+                ? event[0]?.target
+                : event.target;
+            this.resizeTarget = target ?? this.container;
+            if (this.request !== null)
+                return;
+            this.request = designable_shared_2.globalThisPolyfill.requestAnimationFrame(() => {
+                this.request = null;
+                const target = this.resizeTarget ?? this.container;
+                this.resizeTarget = null;
+                this.dispatch(new events_1.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,
+                }));
+            });
+        };
+    }
+    attach() {
+        if (this.contentWindow && this.contentWindow !== designable_shared_2.globalThisPolyfill) {
+            this.addEventListener('resize', this.onResize);
+        }
+        else {
+            if (this.container && this.container !== document) {
+                const ResizeObserverImpl = designable_shared_2.globalThisPolyfill.ResizeObserver || resize_observer_1.ResizeObserver;
+                this.resizeObserver = new ResizeObserverImpl(this.onResize);
+                this.resizeObserver.observe(this.container);
+            }
+        }
+    }
+    detach() {
+        if (this.request !== null) {
+            designable_shared_2.globalThisPolyfill.cancelAnimationFrame(this.request);
+            this.request = null;
+        }
+        this.resizeTarget = null;
+        if (this.contentWindow && this.contentWindow !== designable_shared_2.globalThisPolyfill) {
+            this.removeEventListener('resize', this.onResize);
+        }
+        else if (this.resizeObserver) {
+            if (this.container && this.container !== document) {
+                this.resizeObserver.unobserve(this.container);
+                this.resizeObserver.disconnect();
+            }
+            this.resizeObserver = null;
+        }
+    }
+}
+exports.ViewportResizeDriver = ViewportResizeDriver;

package/lib/drivers/ViewportScrollDriver.d.ts

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

package/lib/drivers/ViewportScrollDriver.js

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

package/lib/drivers/index.d.ts

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

package/lib/drivers/index.js

@@ -0,0 +1,22 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./DragDropDriver"), exports);
+__exportStar(require("./MouseClickDriver"), exports);
+__exportStar(require("./MouseMoveDriver"), exports);
+__exportStar(require("./ViewportResizeDriver"), exports);
+__exportStar(require("./ViewportScrollDriver"), exports);
+__exportStar(require("./KeyboardDriver"), exports);

package/lib/effects/index.d.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/lib/effects/index.js

@@ -0,0 +1,27 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./useCursorEffect"), exports);
+__exportStar(require("./useViewportEffect"), exports);
+__exportStar(require("./useDragDropEffect"), exports);
+__exportStar(require("./useResizeEffect"), exports);
+__exportStar(require("./useSelectionEffect"), exports);
+__exportStar(require("./useFreeSelectionEffect"), exports);
+__exportStar(require("./useKeyboardEffect"), exports);
+__exportStar(require("./useAutoScrollEffect"), exports);
+__exportStar(require("./useWorkspaceEffect"), exports);
+__exportStar(require("./useContentEditableEffect"), exports);
+__exportStar(require("./useTranslateEffect"), exports);

package/lib/effects/useAutoScrollEffect.d.ts

@@ -0,0 +1,2 @@
+import { Engine } from '../models';
+export declare const useAutoScrollEffect: (engine: Engine) => void;

package/lib/effects/useAutoScrollEffect.js

@@ -0,0 +1,69 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useAutoScrollEffect = void 0;
+const models_1 = require("../models");
+const events_1 = require("../events");
+const designable_shared_1 = require("@thienvu18/designable-shared");
+const useAutoScrollEffect = (engine) => {
+    let xScroller = null;
+    let yScroller = null;
+    let xScrollerAnimationStop = null;
+    let yScrollerAnimationStop = null;
+    const scrolling = (point, viewport) => {
+        if (engine.cursor.status === models_1.CursorStatus.Dragging) {
+            xScroller = (0, designable_shared_1.calcAutoScrollBasicInfo)(point, 'x', viewport.rect);
+            yScroller = (0, designable_shared_1.calcAutoScrollBasicInfo)(point, 'y', viewport.rect);
+            if (xScroller) {
+                if (xScrollerAnimationStop) {
+                    xScrollerAnimationStop();
+                }
+                xScrollerAnimationStop = (0, designable_shared_1.scrollAnimate)(viewport.scrollContainer, 'x', xScroller.direction, xScroller.speed);
+            }
+            else {
+                if (xScrollerAnimationStop) {
+                    xScrollerAnimationStop();
+                }
+            }
+            if (yScroller) {
+                if (yScrollerAnimationStop) {
+                    yScrollerAnimationStop();
+                }
+                yScrollerAnimationStop = (0, designable_shared_1.scrollAnimate)(viewport.scrollContainer, 'y', yScroller.direction, yScroller.speed);
+            }
+            else {
+                if (yScrollerAnimationStop) {
+                    yScrollerAnimationStop();
+                }
+            }
+        }
+    };
+    engine.subscribeTo(events_1.DragStartEvent, () => {
+        engine.workbench.eachWorkspace((workspace) => {
+            workspace.viewport.takeDragStartSnapshot();
+        });
+    });
+    engine.subscribeTo(events_1.DragMoveEvent, (event) => {
+        engine.workbench.eachWorkspace((workspace) => {
+            const viewport = workspace.viewport;
+            const outline = workspace.outline;
+            const point = new designable_shared_1.Point(event.data.topClientX, event.data.topClientY);
+            if (outline.isPointInViewport(point)) {
+                scrolling(point, outline);
+            }
+            else if (viewport.isPointInViewport(point)) {
+                scrolling(point, viewport);
+            }
+        });
+    });
+    engine.subscribeTo(events_1.DragStopEvent, () => {
+        xScroller = null;
+        yScroller = null;
+        if (xScrollerAnimationStop) {
+            xScrollerAnimationStop();
+        }
+        if (yScrollerAnimationStop) {
+            yScrollerAnimationStop();
+        }
+    });
+};
+exports.useAutoScrollEffect = useAutoScrollEffect;

package/lib/effects/useContentEditableEffect.d.ts

@@ -0,0 +1,2 @@
+import { Engine } from '../models';
+export declare const useContentEditableEffect: (engine: Engine) => void;