@thienvu18/designable-core 2.0.0

package/lib/models/Viewport.d.ts

@@ -0,0 +1,90 @@
+import { IPoint, Rect, IRect } from '@thienvu18/designable-shared';
+import { Workspace } from './Workspace';
+import { Engine } from './Engine';
+import { TreeNode } from './TreeNode';
+export interface IViewportProps {
+    engine: Engine;
+    workspace: Workspace;
+    viewportElement: HTMLElement;
+    contentWindow: Window;
+    nodeIdAttrName: string;
+    moveSensitive?: boolean;
+    moveInsertionType?: IViewportMoveInsertionType;
+}
+export interface IViewportData {
+    scrollX?: number;
+    scrollY?: number;
+    width?: number;
+    height?: number;
+}
+export type IViewportMoveInsertionType = 'all' | 'inline' | 'block';
+/**
+ * 视口模型
+ */
+export declare class Viewport {
+    workspace: Workspace;
+    engine: Engine;
+    contentWindow: Window;
+    viewportElement: HTMLElement;
+    dragStartSnapshot: IViewportData;
+    scrollX: number;
+    scrollY: number;
+    width: number;
+    height: number;
+    mounted: boolean;
+    attachRequest: number;
+    nodeIdAttrName: string;
+    moveSensitive: boolean;
+    moveInsertionType: IViewportMoveInsertionType;
+    nodeElementsStore: Record<string, HTMLElement[]>;
+    constructor(props: IViewportProps);
+    get isScrollLeft(): boolean;
+    get isScrollTop(): boolean;
+    get isScrollRight(): boolean;
+    get isScrollBottom(): boolean;
+    get viewportRoot(): HTMLElement;
+    get isMaster(): boolean;
+    get isIframe(): boolean;
+    get scrollContainer(): Window | HTMLElement;
+    get rect(): DOMRect;
+    get innerRect(): Rect;
+    get offsetX(): number;
+    get offsetY(): number;
+    get scale(): number;
+    get dragScrollXDelta(): number;
+    get dragScrollYDelta(): number;
+    cacheElements(): void;
+    clearCache(): void;
+    getCurrentData(): IViewportData;
+    takeDragStartSnapshot(): void;
+    digestViewport(): void;
+    elementFromPoint(point: IPoint): Element;
+    matchViewport(target: HTMLElement | Element | Window | Document | EventTarget): boolean;
+    attachEvents(): void;
+    detachEvents(): void;
+    onMount(element: HTMLElement, contentWindow: Window): void;
+    onUnmount(): void;
+    isPointInViewport(point: IPoint, sensitive?: boolean): boolean;
+    isRectInViewport(rect: IRect): boolean;
+    isPointInViewportArea(point: IPoint, sensitive?: boolean): boolean;
+    isOffsetPointInViewport(point: IPoint, sensitive?: boolean): boolean;
+    isOffsetRectInViewport(rect: IRect): boolean;
+    makeObservable(): void;
+    findElementById(id: string): HTMLElement;
+    findElementsById(id: string): HTMLElement[];
+    containsElement(element: HTMLElement | Element | EventTarget): boolean;
+    getOffsetPoint(topPoint: IPoint): {
+        x: number;
+        y: number;
+    };
+    getElementRect(element: HTMLElement | Element): Rect;
+    getElementRectById(id: string): Rect;
+    getElementOffsetRect(element: HTMLElement | Element): Rect;
+    getElementOffsetRectById(id: string): Rect;
+    getValidNodeElement(node: TreeNode): Element;
+    getChildrenRect(node: TreeNode): Rect;
+    getChildrenOffsetRect(node: TreeNode): Rect;
+    getValidNodeRect(node: TreeNode): Rect;
+    getValidNodeOffsetRect(node: TreeNode): Rect;
+    getValidNodeLayout(node: TreeNode): "vertical" | "horizontal";
+}

package/lib/models/Viewport.js

@@ -0,0 +1,397 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Viewport = void 0;
+const designable_shared_1 = require("@thienvu18/designable-shared");
+const reactive_1 = require("@formily/reactive");
+/**
+ * 视口模型
+ */
+class Viewport {
+    constructor(props) {
+        this.scrollX = 0;
+        this.scrollY = 0;
+        this.width = 0;
+        this.height = 0;
+        this.mounted = false;
+        this.nodeElementsStore = {};
+        this.workspace = props.workspace;
+        this.engine = props.engine;
+        this.moveSensitive = props.moveSensitive ?? false;
+        this.moveInsertionType = props.moveInsertionType ?? 'all';
+        this.viewportElement = props.viewportElement;
+        this.contentWindow = props.contentWindow;
+        this.nodeIdAttrName = props.nodeIdAttrName;
+        this.digestViewport();
+        this.makeObservable();
+        this.attachEvents();
+    }
+    get isScrollLeft() {
+        return this.scrollX === 0;
+    }
+    get isScrollTop() {
+        return this.scrollY === 0;
+    }
+    get isScrollRight() {
+        if (this.isIframe) {
+            return (this.width + this.contentWindow.scrollX >=
+                this.contentWindow?.document?.body?.scrollWidth);
+        }
+        else if (this.viewportElement) {
+            return (this.viewportElement.offsetWidth + this.scrollX >=
+                this.viewportElement.scrollWidth);
+        }
+    }
+    get isScrollBottom() {
+        if (this.isIframe) {
+            if (!this.contentWindow?.document?.body)
+                return false;
+            return (this.height + this.contentWindow.scrollY >=
+                this.contentWindow.document.body.scrollHeight);
+        }
+        else if (this.viewportElement) {
+            if (!this.viewportElement)
+                return false;
+            return (this.viewportElement.offsetHeight + this.viewportElement.scrollTop >=
+                this.viewportElement.scrollHeight);
+        }
+    }
+    get viewportRoot() {
+        return this.isIframe
+            ? this.contentWindow?.document?.body
+            : this.viewportElement;
+    }
+    get isMaster() {
+        return this.contentWindow === designable_shared_1.globalThisPolyfill;
+    }
+    get isIframe() {
+        return !!this.contentWindow?.frameElement && !this.isMaster;
+    }
+    get scrollContainer() {
+        return this.isIframe ? this.contentWindow : this.viewportElement;
+    }
+    get rect() {
+        const viewportElement = this.viewportElement;
+        if (viewportElement)
+            return viewportElement.getBoundingClientRect();
+    }
+    get innerRect() {
+        const rect = this.rect;
+        return new designable_shared_1.Rect(0, 0, rect?.width, rect?.height);
+    }
+    get offsetX() {
+        const rect = this.rect;
+        if (!rect)
+            return 0;
+        return rect.x;
+    }
+    get offsetY() {
+        const rect = this.rect;
+        if (!rect)
+            return 0;
+        return rect.y;
+    }
+    get scale() {
+        if (!this.viewportElement)
+            return 1;
+        const clientRect = this.viewportElement.getBoundingClientRect();
+        const offsetWidth = this.viewportElement.offsetWidth;
+        if (!clientRect.width || !offsetWidth)
+            return 1;
+        return Math.round(clientRect.width / offsetWidth);
+    }
+    get dragScrollXDelta() {
+        return this.scrollX - this.dragStartSnapshot.scrollX;
+    }
+    get dragScrollYDelta() {
+        return this.scrollY - this.dragStartSnapshot.scrollY;
+    }
+    cacheElements() {
+        this.nodeElementsStore = {};
+        this.viewportRoot
+            ?.querySelectorAll(`*[${this.nodeIdAttrName}]`)
+            .forEach((element) => {
+            const id = element.getAttribute(this.nodeIdAttrName);
+            this.nodeElementsStore[id] = this.nodeElementsStore[id] || [];
+            this.nodeElementsStore[id].push(element);
+        });
+    }
+    clearCache() {
+        this.nodeElementsStore = {};
+    }
+    getCurrentData() {
+        const data = {};
+        if (this.isIframe) {
+            data.scrollX = this.contentWindow?.scrollX || 0;
+            data.scrollY = this.contentWindow?.scrollY || 0;
+            data.width = this.contentWindow?.innerWidth || 0;
+            data.height = this.contentWindow?.innerHeight || 0;
+        }
+        else if (this.viewportElement) {
+            data.scrollX = this.viewportElement?.scrollLeft || 0;
+            data.scrollY = this.viewportElement?.scrollTop || 0;
+            data.width = this.viewportElement?.clientWidth || 0;
+            data.height = this.viewportElement?.clientHeight || 0;
+        }
+        return data;
+    }
+    takeDragStartSnapshot() {
+        this.dragStartSnapshot = this.getCurrentData();
+    }
+    digestViewport() {
+        Object.assign(this, this.getCurrentData());
+    }
+    elementFromPoint(point) {
+        if (this.contentWindow?.document) {
+            return this.contentWindow.document.elementFromPoint(point.x, point.y);
+        }
+    }
+    matchViewport(target) {
+        if (this.isIframe) {
+            return (target === this.viewportElement ||
+                target === this.contentWindow ||
+                target === this.contentWindow?.document);
+        }
+        else {
+            return target === this.viewportElement;
+        }
+    }
+    attachEvents() {
+        const engine = this.engine;
+        (0, designable_shared_1.cancelIdle)(this.attachRequest);
+        this.attachRequest = (0, designable_shared_1.requestIdle)(() => {
+            if (!engine)
+                return;
+            if (this.isIframe) {
+                this.workspace.attachEvents(this.contentWindow, this.contentWindow);
+            }
+            else if ((0, designable_shared_1.isHTMLElement)(this.viewportElement)) {
+                this.workspace.attachEvents(this.viewportElement, this.contentWindow);
+            }
+        });
+    }
+    detachEvents() {
+        if (this.isIframe) {
+            this.workspace.detachEvents(this.contentWindow);
+            this.workspace.detachEvents(this.viewportElement);
+        }
+        else if (this.viewportElement) {
+            this.workspace.detachEvents(this.viewportElement);
+        }
+    }
+    onMount(element, contentWindow) {
+        this.mounted = true;
+        this.viewportElement = element;
+        this.contentWindow = contentWindow;
+        this.attachEvents();
+        this.digestViewport();
+    }
+    onUnmount() {
+        this.mounted = false;
+        this.detachEvents();
+    }
+    isPointInViewport(point, sensitive) {
+        if (!this.rect)
+            return false;
+        if (!this.containsElement(document.elementFromPoint(point.x, point.y))) {
+            return false;
+        }
+        return (0, designable_shared_1.isPointInRect)(point, this.rect, sensitive);
+    }
+    isRectInViewport(rect) {
+        if (!this.rect)
+            return false;
+        if (!this.containsElement(document.elementFromPoint(rect.x, rect.y))) {
+            return false;
+        }
+        return (0, designable_shared_1.isRectInRect)(rect, this.rect);
+    }
+    isPointInViewportArea(point, sensitive) {
+        if (!this.rect)
+            return false;
+        return (0, designable_shared_1.isPointInRect)(point, this.rect, sensitive);
+    }
+    isOffsetPointInViewport(point, sensitive) {
+        if (!this.innerRect)
+            return false;
+        if (!this.containsElement(document.elementFromPoint(point.x, point.y)))
+            return false;
+        return (0, designable_shared_1.isPointInRect)(point, this.innerRect, sensitive);
+    }
+    isOffsetRectInViewport(rect) {
+        if (!this.innerRect)
+            return false;
+        if (!this.containsElement(document.elementFromPoint(rect.x, rect.y))) {
+            return false;
+        }
+        return (0, designable_shared_1.isRectInRect)(rect, this.innerRect);
+    }
+    makeObservable() {
+        (0, reactive_1.define)(this, {
+            scrollX: reactive_1.observable.ref,
+            scrollY: reactive_1.observable.ref,
+            width: reactive_1.observable.ref,
+            height: reactive_1.observable.ref,
+            digestViewport: reactive_1.action,
+            viewportElement: reactive_1.observable.ref,
+            contentWindow: reactive_1.observable.ref,
+        });
+    }
+    findElementById(id) {
+        if (!id)
+            return;
+        if (this.nodeElementsStore[id])
+            return this.nodeElementsStore[id][0];
+        return this.viewportRoot?.querySelector(`*[${this.nodeIdAttrName}='${id}']`);
+    }
+    findElementsById(id) {
+        if (!id)
+            return [];
+        if (this.nodeElementsStore[id])
+            return this.nodeElementsStore[id];
+        return Array.from(this.viewportRoot?.querySelectorAll(`*[${this.nodeIdAttrName}='${id}']`) ?? []);
+    }
+    containsElement(element) {
+        let root = this.viewportElement;
+        if (root === element)
+            return true;
+        return root?.contains(element);
+    }
+    getOffsetPoint(topPoint) {
+        const data = this.getCurrentData();
+        return {
+            x: topPoint.x - this.offsetX + data.scrollX,
+            y: topPoint.y - this.offsetY + data.scrollY,
+        };
+    }
+    //相对于页面
+    getElementRect(element) {
+        const rect = element.getBoundingClientRect();
+        const offsetWidth = element['offsetWidth']
+            ? element['offsetWidth']
+            : rect.width;
+        const offsetHeight = element['offsetHeight']
+            ? element['offsetHeight']
+            : rect.height;
+        return new designable_shared_1.Rect(rect.x, rect.y, this.scale !== 1 ? offsetWidth : rect.width, this.scale !== 1 ? offsetHeight : rect.height);
+    }
+    //相对于页面
+    getElementRectById(id) {
+        const elements = this.findElementsById(id);
+        const rect = (0, designable_shared_1.calcBoundingRect)(elements.map((element) => this.getElementRect(element)));
+        if (rect) {
+            if (this.isIframe) {
+                return new designable_shared_1.Rect(rect.x + this.offsetX, rect.y + this.offsetY, rect.width, rect.height);
+            }
+            else {
+                return new designable_shared_1.Rect(rect.x, rect.y, rect.width, rect.height);
+            }
+        }
+    }
+    //相对于视口
+    getElementOffsetRect(element) {
+        const elementRect = element.getBoundingClientRect();
+        if (elementRect) {
+            if (this.isIframe) {
+                return new designable_shared_1.Rect(elementRect.x + this.contentWindow.scrollX, elementRect.y + this.contentWindow.scrollY, elementRect.width, elementRect.height);
+            }
+            else {
+                return new designable_shared_1.Rect((elementRect.x - this.offsetX + this.viewportElement.scrollLeft) /
+                    this.scale, (elementRect.y - this.offsetY + this.viewportElement.scrollTop) /
+                    this.scale, elementRect.width, elementRect.height);
+            }
+        }
+    }
+    //相对于视口
+    getElementOffsetRectById(id) {
+        const elements = this.findElementsById(id);
+        if (!elements.length)
+            return;
+        const elementRect = (0, designable_shared_1.calcBoundingRect)(elements.map((element) => this.getElementRect(element)));
+        if (elementRect) {
+            if (this.isIframe) {
+                return new designable_shared_1.Rect(elementRect.x + this.contentWindow.scrollX, elementRect.y + this.contentWindow.scrollY, elementRect.width, elementRect.height);
+            }
+            else {
+                return new designable_shared_1.Rect((elementRect.x - this.offsetX + this.viewportElement.scrollLeft) /
+                    this.scale, (elementRect.y - this.offsetY + this.viewportElement.scrollTop) /
+                    this.scale, elementRect.width, elementRect.height);
+            }
+        }
+    }
+    getValidNodeElement(node) {
+        const getNodeElement = (node) => {
+            if (!node)
+                return;
+            const ele = this.findElementById(node.id);
+            if (ele) {
+                return ele;
+            }
+            else {
+                return getNodeElement(node.parent);
+            }
+        };
+        return getNodeElement(node);
+    }
+    getChildrenRect(node) {
+        if (!node?.children?.length)
+            return;
+        return (0, designable_shared_1.calcBoundingRect)(node.children.reduce((buf, child) => {
+            const rect = this.getValidNodeRect(child);
+            if (rect) {
+                return buf.concat(rect);
+            }
+            return buf;
+        }, []));
+    }
+    getChildrenOffsetRect(node) {
+        if (!node?.children?.length)
+            return;
+        return (0, designable_shared_1.calcBoundingRect)(node.children.reduce((buf, child) => {
+            const rect = this.getValidNodeOffsetRect(child);
+            if (rect) {
+                return buf.concat(rect);
+            }
+            return buf;
+        }, []));
+    }
+    getValidNodeRect(node) {
+        if (!node)
+            return;
+        const rect = this.getElementRectById(node.id);
+        if (node && node === node.root && node.isInOperation) {
+            if (!rect)
+                return this.rect;
+            return (0, designable_shared_1.calcBoundingRect)([this.rect, rect]);
+        }
+        if (rect) {
+            return rect;
+        }
+        else {
+            return this.getChildrenRect(node);
+        }
+    }
+    getValidNodeOffsetRect(node) {
+        if (!node)
+            return;
+        const rect = this.getElementOffsetRectById(node.id);
+        if (node && node === node.root && node.isInOperation) {
+            if (!rect)
+                return this.innerRect;
+            return (0, designable_shared_1.calcBoundingRect)([this.innerRect, rect]);
+        }
+        if (rect) {
+            return rect;
+        }
+        else {
+            return this.getChildrenOffsetRect(node);
+        }
+    }
+    getValidNodeLayout(node) {
+        if (!node)
+            return 'vertical';
+        if (node.parent?.designerProps?.inlineChildrenLayout)
+            return 'horizontal';
+        return (0, designable_shared_1.calcElementLayout)(this.findElementById(node.id));
+    }
+}
+exports.Viewport = Viewport;

package/lib/models/Workbench.d.ts

@@ -0,0 +1,23 @@
+import { Engine } from './Engine';
+import { Workspace, IWorkspaceProps } from './Workspace';
+import { IEngineContext, WorkbenchTypes } from '../types';
+export declare class Workbench {
+    workspaces: Workspace[];
+    currentWorkspace: Workspace;
+    activeWorkspace: Workspace;
+    engine: Engine;
+    type: WorkbenchTypes;
+    constructor(engine: Engine);
+    makeObservable(): void;
+    getEventContext(): IEngineContext;
+    switchWorkspace(id: string): Workspace;
+    setActiveWorkspace(workspace: Workspace): Workspace;
+    setWorkbenchType(type: WorkbenchTypes): void;
+    addWorkspace(props: IWorkspaceProps): Workspace;
+    removeWorkspace(id: string): void;
+    ensureWorkspace(props?: IWorkspaceProps): Workspace;
+    findWorkspaceById(id: string): Workspace;
+    findWorkspaceIndexById(id: string): number;
+    mapWorkspace<T>(callbackFn: (value: Workspace, index: number) => T): T[];
+    eachWorkspace<T>(callbackFn: (value: Workspace, index: number) => T): void;
+}

package/lib/models/Workbench.js

@@ -0,0 +1,99 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Workbench = void 0;
+const Workspace_1 = require("./Workspace");
+const reactive_1 = require("@formily/reactive");
+const events_1 = require("../events");
+class Workbench {
+    constructor(engine) {
+        this.type = 'DESIGNABLE';
+        this.engine = engine;
+        this.workspaces = [];
+        this.currentWorkspace = null;
+        this.activeWorkspace = null;
+        this.makeObservable();
+    }
+    makeObservable() {
+        (0, reactive_1.define)(this, {
+            currentWorkspace: reactive_1.observable.ref,
+            workspaces: reactive_1.observable.shallow,
+            activeWorkspace: reactive_1.observable.ref,
+            type: reactive_1.observable.ref,
+            switchWorkspace: reactive_1.action,
+            addWorkspace: reactive_1.action,
+            removeWorkspace: reactive_1.action,
+            setActiveWorkspace: reactive_1.action,
+            setWorkbenchType: reactive_1.action,
+        });
+    }
+    getEventContext() {
+        return {
+            engine: this.engine,
+            workbench: this.engine.workbench,
+            workspace: null,
+            viewport: null,
+        };
+    }
+    switchWorkspace(id) {
+        const finded = this.findWorkspaceById(id);
+        if (finded) {
+            this.currentWorkspace = finded;
+            this.engine.dispatch(new events_1.SwitchWorkspaceEvent(finded));
+        }
+        return this.currentWorkspace;
+    }
+    setActiveWorkspace(workspace) {
+        this.activeWorkspace = workspace;
+        return workspace;
+    }
+    setWorkbenchType(type) {
+        this.type = type;
+    }
+    addWorkspace(props) {
+        const finded = this.findWorkspaceById(props.id);
+        if (!finded) {
+            this.currentWorkspace = new Workspace_1.Workspace(this.engine, props);
+            this.workspaces.push(this.currentWorkspace);
+            this.engine.dispatch(new events_1.AddWorkspaceEvent(this.currentWorkspace));
+            return this.currentWorkspace;
+        }
+        return finded;
+    }
+    removeWorkspace(id) {
+        const findIndex = this.findWorkspaceIndexById(id);
+        if (findIndex > -1 && findIndex < this.workspaces.length) {
+            const findedWorkspace = this.workspaces[findIndex];
+            findedWorkspace.viewport.detachEvents();
+            this.workspaces.splice(findIndex, 1);
+            if (findedWorkspace === this.currentWorkspace) {
+                if (this.workspaces.length && this.workspaces[findIndex]) {
+                    this.currentWorkspace = this.workspaces[findIndex];
+                }
+                else {
+                    this.currentWorkspace = this.workspaces[this.workspaces.length - 1];
+                }
+            }
+            this.engine.dispatch(new events_1.RemoveWorkspaceEvent(findedWorkspace));
+        }
+    }
+    ensureWorkspace(props = {}) {
+        const workspace = this.findWorkspaceById(props.id);
+        if (workspace)
+            return workspace;
+        this.addWorkspace(props);
+        return this.currentWorkspace;
+    }
+    findWorkspaceById(id) {
+        return this.workspaces.find((item) => item.id === id);
+    }
+    findWorkspaceIndexById(id) {
+        return this.workspaces.findIndex((item) => item.id === id);
+    }
+    mapWorkspace(callbackFn) {
+        return this.workspaces.map(callbackFn);
+    }
+    eachWorkspace(callbackFn) {
+        this.workspaces.forEach(callbackFn);
+    }
+}
+exports.Workbench = Workbench;

package/lib/models/Workspace.d.ts

@@ -0,0 +1,41 @@
+import { Engine } from './Engine';
+import { Viewport } from './Viewport';
+import { Operation, IOperation } from './Operation';
+import { History } from './History';
+import { ICustomEvent, EventContainer } from '@thienvu18/designable-shared';
+import { IEngineContext } from '../types';
+export interface IViewportMatcher {
+    contentWindow?: Window;
+    viewportElement?: HTMLElement;
+}
+export interface IWorkspace {
+    id?: string;
+    title?: string;
+    description?: string;
+    operation: IOperation;
+}
+export interface IWorkspaceProps {
+    id?: string;
+    title?: string;
+    description?: string;
+    contentWindow?: Window;
+    viewportElement?: HTMLElement;
+}
+export declare class Workspace {
+    id: string;
+    title: string;
+    description: string;
+    engine: Engine;
+    viewport: Viewport;
+    outline: Viewport;
+    operation: Operation;
+    history: History<Workspace>;
+    props: IWorkspaceProps;
+    constructor(engine: Engine, props: IWorkspaceProps);
+    getEventContext(): IEngineContext;
+    attachEvents(container: EventContainer, contentWindow: Window): void;
+    detachEvents(container: EventContainer): void;
+    dispatch(event: ICustomEvent): boolean;
+    serialize(): IWorkspace;
+    from(workspace?: IWorkspace): void;
+}