@thienvu18/designable-core 2.0.0

package/LICENSE.md

@@ -0,0 +1,20 @@
+The MIT License (MIT)
+
+Copyright (c) 2015-present, Alibaba Group Holding Limited. All rights reserved.
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of
+this software and associated documentation files (the "Software"), to deal in
+the Software without restriction, including without limitation the rights to
+use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of
+the Software, and to permit persons to whom the Software is furnished to do so,
+subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS
+FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR
+COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER
+IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
+CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

package/README.md

@@ -0,0 +1 @@
+# @thienvu18/designable-core

package/esm/drivers/DragDropDriver.d.ts

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

package/esm/drivers/DragDropDriver.js

@@ -0,0 +1,111 @@
+import { EventDriver } from '@thienvu18/designable-shared';
+import { DragStartEvent, DragMoveEvent, DragStopEvent } from '../events';
+const GlobalState = {
+    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);
+            }
+        };
+    }
+    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

@@ -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/esm/drivers/KeyboardDriver.js

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

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

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

@@ -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/esm/drivers/MouseMoveDriver.js

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

package/esm/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/esm/drivers/ViewportResizeDriver.js

@@ -0,0 +1,64 @@
+import { EventDriver } from '@thienvu18/designable-shared';
+import { ViewportResizeEvent } from '../events';
+import { ResizeObserver } from '@juggle/resize-observer';
+import { globalThisPolyfill } from '@thienvu18/designable-shared';
+export class ViewportResizeDriver extends 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 = globalThisPolyfill.requestAnimationFrame(() => {
+                this.request = null;
+                const target = this.resizeTarget ?? this.container;
+                this.resizeTarget = null;
+                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,
+                }));
+            });
+        };
+    }
+    attach() {
+        if (this.contentWindow && this.contentWindow !== globalThisPolyfill) {
+            this.addEventListener('resize', this.onResize);
+        }
+        else {
+            if (this.container && this.container !== document) {
+                const ResizeObserverImpl = globalThisPolyfill.ResizeObserver || ResizeObserver;
+                this.resizeObserver = new ResizeObserverImpl(this.onResize);
+                this.resizeObserver.observe(this.container);
+            }
+        }
+    }
+    detach() {
+        if (this.request !== null) {
+            globalThisPolyfill.cancelAnimationFrame(this.request);
+            this.request = null;
+        }
+        this.resizeTarget = null;
+        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);
+                this.resizeObserver.disconnect();
+            }
+            this.resizeObserver = null;
+        }
+    }
+}

package/esm/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/esm/drivers/ViewportScrollDriver.js

@@ -0,0 +1,30 @@
+import { EventDriver, globalThisPolyfill } from '@thienvu18/designable-shared';
+import { ViewportScrollEvent } from '../events';
+export class ViewportScrollDriver extends EventDriver {
+    constructor() {
+        super(...arguments);
+        this.request = null;
+        this.onScroll = (e) => {
+            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/esm/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/esm/drivers/index.js

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

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

@@ -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/esm/effects/useAutoScrollEffect.d.ts

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

package/esm/effects/useAutoScrollEffect.js

@@ -0,0 +1,65 @@
+import { CursorStatus } from '../models';
+import { DragMoveEvent, DragStartEvent, DragStopEvent } from '../events';
+import { calcAutoScrollBasicInfo, scrollAnimate, Point, } from '@thienvu18/designable-shared';
+export const useAutoScrollEffect = (engine) => {
+    let xScroller = null;
+    let yScroller = null;
+    let xScrollerAnimationStop = null;
+    let yScrollerAnimationStop = null;
+    const scrolling = (point, 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();
+        }
+    });
+};

package/esm/effects/useContentEditableEffect.d.ts

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