@idraw/core 0.4.2 → 1.0.0-alpha.1

package/dist/esm/index.d.ts

@@ -1,65 +1,16 @@
-import type { Data, PointSize, CoreOptions, Middleware, ViewSizeInfo, CoreEventMap, ViewScaleInfo, LoadItemMap, ElementType, RecursivePartial, Element, ModifyRecord, ElementPosition, DataLayout, DataGlobal } from '@idraw/types';
-import { Board, Sharer, Calculator } from './board';
-export { coreEventKeys } from './config';
-export type { CoreEventKeys } from './config';
-export { Board, Sharer, Calculator };
-export { MiddlewareSelector } from './middlewares/selector';
-export { MiddlewareScroller } from './middlewares/scroller';
+export { coreEventKeys } from './static';
+export type { CoreEventKeys } from './static';
+export { Board, Sharer, Calculator } from './board';
+export { MiddlewareCreator, getMiddlewareCreatorStyles } from './middlewares/creator';
+export { MiddlewareSelector, getMiddlewareSelectorStyles } from './middlewares/selector';
+export { MiddlewareScroller, getMiddlewareScrollerStyles } from './middlewares/scroller';
 export { MiddlewareScaler } from './middlewares/scaler';
-export { MiddlewareRuler } from './middlewares/ruler';
-export { MiddlewareTextEditor } from './middlewares/text-editor';
+export { MiddlewareRuler, getMiddlewareRulerStyles } from './middlewares/ruler';
+export { MiddlewareTextEditor, getMiddlewareTextEditorStyles } from './middlewares/text-editor';
 export { MiddlewareDragger } from './middlewares/dragger';
-export { MiddlewareInfo } from './middlewares/info';
+export { MiddlewareInfo, getMiddlewareInfoStyles } from './middlewares/info';
 export { MiddlewareLayoutSelector } from './middlewares/layout-selector';
 export { MiddlewarePointer } from './middlewares/pointer';
-export declare class Core<E extends CoreEventMap = CoreEventMap> {
-    #private;
-    constructor(container: HTMLDivElement, opts: CoreOptions);
-    isDestroyed(): boolean;
-    destroy(): void;
-    use<C extends any = any>(middleware: Middleware<any, any, any>, config?: C): void;
-    disuse(middleware: Middleware<any, any, any>): void;
-    resetMiddlewareConfig<C extends any = any>(middleware: Middleware<any, any, any>, config?: Partial<C>): void;
-    setData(data: Data): void;
-    getData(): Data | null;
-    scale(opts: {
-        scale: number;
-        point: PointSize;
-    }): void;
-    resize(newViewSize: Partial<ViewSizeInfo>): void;
-    clear(): void;
-    on<T extends keyof E>(name: T, callback: (e: E[T]) => void): void;
-    off<T extends keyof E>(name: T, callback: (e: E[T]) => void): void;
-    trigger<T extends keyof E>(name: T, e: E[T]): void;
-    getViewInfo(): {
-        viewSizeInfo: ViewSizeInfo;
-        viewScaleInfo: ViewScaleInfo;
-    };
-    refresh(): void;
-    forceRender(): void;
-    setViewScale(opts: {
-        scale: number;
-        offsetX: number;
-        offsetY: number;
-    }): void;
-    getLoadItemMap(): LoadItemMap;
-    onBoardWatcherEvents(): void;
-    offBoardWatcherEvents(): void;
-    createElement<T extends ElementType = ElementType>(type: T, element: RecursivePartial<Element<T>>, opts?: {
-        viewCenter?: boolean;
-    }): Element<T>;
-    updateElement(element: Element): ModifyRecord<'updateElement'> | null;
-    modifyElement(element: RecursivePartial<Omit<Element, 'uuid'>> & Pick<Element, 'uuid'>): ModifyRecord<'modifyElement'> | null;
-    modifyElements(elements: Array<RecursivePartial<Omit<Element, 'uuid'>> & Pick<Element, 'uuid'>>): ModifyRecord<'modifyElements'> | null;
-    addElement(element: Element, opts?: {
-        position: ElementPosition;
-    }): ModifyRecord<'addElement'>;
-    deleteElement(uuid: string): ModifyRecord<'deleteElement'>;
-    moveElement(uuid: string, to: ElementPosition): ModifyRecord<'moveElement'>;
-    modifyLayout(layout: RecursivePartial<DataLayout> | null): ModifyRecord<'modifyLayout'>;
-    modifyGlobal(global: RecursivePartial<DataGlobal> | null): {
-        type: "modifyGlobal";
-        time: number;
-        content: import("@idraw/types").ModifyContentMap["modifyGlobal"];
-    };
-}
+export { MiddlewarePathEditor, getMiddlewarePathEditorStyles } from './middlewares/path-editor';
+export { MiddlewarePathCreator, getMiddlewarePathCreatorStyles } from './middlewares/path-creator';
+export { Core } from './core';

package/dist/esm/index.js

@@ -1,393 +1,15 @@
-var __classPrivateFieldSet = (this && this.__classPrivateFieldSet) || function (receiver, state, value, kind, f) {
-    if (kind === "m") throw new TypeError("Private method is not writable");
-    if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a setter");
-    if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot write private member to an object whose class did not declare it");
-    return (kind === "a" ? f.call(receiver, value) : f ? f.value = value : state.set(receiver, value)), value;
-};
-var __classPrivateFieldGet = (this && this.__classPrivateFieldGet) || function (receiver, state, kind, f) {
-    if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a getter");
-    if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot read private member from an object whose class did not declare it");
-    return kind === "m" ? f : kind === "a" ? f.call(receiver) : f ? f.value : state.get(receiver);
-};
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
-var _Core_instances, _Core_board, _Core_canvas, _Core_container, _Core_initContainer, _Core_resetData;
-import { deepClone, createElement, getElementPositionFromList, toFlattenElement, deleteElementInList, findElementFromListByPosition, updateElementInListByPosition, insertElementToListByPosition, moveElementPosition, toFlattenLayout, toFlattenGlobal, get, mergeLayout, mergeGlobal } from '@idraw/util';
-import { Board, Sharer, Calculator } from './board';
-import { createBoardContent, validateElements } from '@idraw/util';
-import { Cursor } from './cursor/cursor';
-import { getModifyElementRecord } from './record';
-export { coreEventKeys } from './config';
-export { Board, Sharer, Calculator };
-export { MiddlewareSelector } from './middlewares/selector';
-export { MiddlewareScroller } from './middlewares/scroller';
+export { coreEventKeys } from './static';
+export { Board, Sharer, Calculator } from './board';
+export { MiddlewareCreator, getMiddlewareCreatorStyles } from './middlewares/creator';
+export { MiddlewareSelector, getMiddlewareSelectorStyles } from './middlewares/selector';
+export { MiddlewareScroller, getMiddlewareScrollerStyles } from './middlewares/scroller';
 export { MiddlewareScaler } from './middlewares/scaler';
-export { MiddlewareRuler } from './middlewares/ruler';
-export { MiddlewareTextEditor } from './middlewares/text-editor';
+export { MiddlewareRuler, getMiddlewareRulerStyles } from './middlewares/ruler';
+export { MiddlewareTextEditor, getMiddlewareTextEditorStyles } from './middlewares/text-editor';
 export { MiddlewareDragger } from './middlewares/dragger';
-export { MiddlewareInfo } from './middlewares/info';
+export { MiddlewareInfo, getMiddlewareInfoStyles } from './middlewares/info';
 export { MiddlewareLayoutSelector } from './middlewares/layout-selector';
 export { MiddlewarePointer } from './middlewares/pointer';
-export class Core {
-    constructor(container, opts) {
-        _Core_instances.add(this);
-        _Core_board.set(this, void 0);
-        _Core_canvas.set(this, void 0);
-        _Core_container.set(this, void 0);
-        const { devicePixelRatio = 1, width, height, disableWatcher = false } = opts;
-        __classPrivateFieldSet(this, _Core_container, container, "f");
-        const canvas = document.createElement('canvas');
-        canvas.setAttribute('tabindex', '0');
-        __classPrivateFieldSet(this, _Core_canvas, canvas, "f");
-        __classPrivateFieldGet(this, _Core_instances, "m", _Core_initContainer).call(this);
-        container.appendChild(canvas);
-        const boardContent = createBoardContent(canvas, { width, height, devicePixelRatio });
-        const board = new Board({ boardContent, container, disableWatcher });
-        const sharer = board.getSharer();
-        sharer.setActiveViewSizeInfo({
-            width,
-            height,
-            devicePixelRatio,
-            contextWidth: width,
-            contextHeight: height
-        });
-        __classPrivateFieldSet(this, _Core_board, board, "f");
-        this.resize(sharer.getActiveViewSizeInfo());
-        const eventHub = board.getEventHub();
-        new Cursor(container, {
-            eventHub
-        });
-    }
-    isDestroyed() {
-        return __classPrivateFieldGet(this, _Core_board, "f").isDestroyed();
-    }
-    destroy() {
-        __classPrivateFieldGet(this, _Core_board, "f").destroy();
-        __classPrivateFieldGet(this, _Core_canvas, "f").remove();
-    }
-    use(middleware, config) {
-        __classPrivateFieldGet(this, _Core_board, "f").use(middleware, config);
-    }
-    disuse(middleware) {
-        __classPrivateFieldGet(this, _Core_board, "f").disuse(middleware);
-    }
-    resetMiddlewareConfig(middleware, config) {
-        __classPrivateFieldGet(this, _Core_board, "f").resetMiddlewareConfig(middleware, config);
-    }
-    setData(data) {
-        const loader = __classPrivateFieldGet(this, _Core_board, "f").getRenderer().getLoader();
-        loader.reset();
-        __classPrivateFieldGet(this, _Core_instances, "m", _Core_resetData).call(this, data);
-    }
-    getData() {
-        return __classPrivateFieldGet(this, _Core_board, "f").getData();
-    }
-    scale(opts) {
-        __classPrivateFieldGet(this, _Core_board, "f").scale(opts);
-        const viewer = __classPrivateFieldGet(this, _Core_board, "f").getViewer();
-        viewer.drawFrame();
-    }
-    resize(newViewSize) {
-        const board = __classPrivateFieldGet(this, _Core_board, "f");
-        const sharer = board.getSharer();
-        const viewSizeInfo = sharer.getActiveViewSizeInfo();
-        board.resize(Object.assign(Object.assign({}, viewSizeInfo), newViewSize));
-    }
-    clear() {
-        __classPrivateFieldGet(this, _Core_board, "f").clear();
-    }
-    on(name, callback) {
-        const eventHub = __classPrivateFieldGet(this, _Core_board, "f").getEventHub();
-        eventHub.on(name, callback);
-    }
-    off(name, callback) {
-        const eventHub = __classPrivateFieldGet(this, _Core_board, "f").getEventHub();
-        eventHub.off(name, callback);
-    }
-    trigger(name, e) {
-        const eventHub = __classPrivateFieldGet(this, _Core_board, "f").getEventHub();
-        eventHub.trigger(name, e);
-    }
-    getViewInfo() {
-        const board = __classPrivateFieldGet(this, _Core_board, "f");
-        const sharer = board.getSharer();
-        const viewSizeInfo = sharer.getActiveViewSizeInfo();
-        const viewScaleInfo = sharer.getActiveViewScaleInfo();
-        return {
-            viewSizeInfo,
-            viewScaleInfo
-        };
-    }
-    refresh() {
-        __classPrivateFieldGet(this, _Core_board, "f").getViewer().drawFrame();
-    }
-    forceRender() {
-        const renderer = __classPrivateFieldGet(this, _Core_board, "f").getRenderer();
-        const calculator = renderer.getCalculator();
-        const loader = renderer.getLoader();
-        const data = this.getData();
-        if (data) {
-            const { viewScaleInfo, viewSizeInfo } = this.getViewInfo();
-            calculator.resetVirtualFlatItemMap(data, {
-                viewScaleInfo,
-                viewSizeInfo
-            });
-        }
-        loader.reset();
-        this.refresh();
-    }
-    setViewScale(opts) {
-        __classPrivateFieldGet(this, _Core_board, "f").updateViewScaleInfo(opts);
-    }
-    getLoadItemMap() {
-        return __classPrivateFieldGet(this, _Core_board, "f").getRenderer().getLoadItemMap();
-    }
-    onBoardWatcherEvents() {
-        __classPrivateFieldGet(this, _Core_board, "f").onWatcherEvents();
-    }
-    offBoardWatcherEvents() {
-        __classPrivateFieldGet(this, _Core_board, "f").offWatcherEvents();
-    }
-    createElement(type, element, opts) {
-        const { viewScaleInfo, viewSizeInfo } = this.getViewInfo();
-        return createElement(type, element || {}, (opts === null || opts === void 0 ? void 0 : opts.viewCenter) === true
-            ? {
-                viewScaleInfo,
-                viewSizeInfo
-            }
-            : undefined);
-    }
-    updateElement(element) {
-        const data = this.getData() || { elements: [] };
-        const uuid = element.uuid;
-        const position = getElementPositionFromList(uuid, data.elements);
-        const beforeElem = findElementFromListByPosition(position, data.elements);
-        if (!beforeElem) {
-            return null;
-        }
-        const before = toFlattenElement(beforeElem);
-        const updatedElement = updateElementInListByPosition(position, element, data.elements, { strict: true });
-        const after = toFlattenElement(updatedElement);
-        const loader = __classPrivateFieldGet(this, _Core_board, "f").getRenderer().getLoader();
-        loader.resetElementAsset(element);
-        __classPrivateFieldGet(this, _Core_instances, "m", _Core_resetData).call(this, data);
-        this.refresh();
-        const modifyRecord = {
-            type: 'updateElement',
-            time: Date.now(),
-            content: { method: 'updateElement', uuid, before, after }
-        };
-        return modifyRecord;
-    }
-    modifyElement(element) {
-        const { uuid } = element, restElement = __rest(element, ["uuid"]);
-        const data = this.getData() || { elements: [] };
-        const position = getElementPositionFromList(uuid, data.elements);
-        const beforeElem = findElementFromListByPosition(position, data.elements);
-        if (!beforeElem) {
-            return null;
-        }
-        const modifyRecord = getModifyElementRecord({
-            modifiedElement: element,
-            beforeElement: beforeElem
-        });
-        updateElementInListByPosition(position, restElement, data.elements);
-        const loader = __classPrivateFieldGet(this, _Core_board, "f").getRenderer().getLoader();
-        loader.resetElementAsset(Object.assign(Object.assign({}, element), { type: beforeElem.type }));
-        __classPrivateFieldGet(this, _Core_instances, "m", _Core_resetData).call(this, data);
-        this.refresh();
-        return modifyRecord;
-    }
-    modifyElements(elements) {
-        const data = this.getData() || { elements: [] };
-        let modifyRecord = null;
-        const before = [];
-        const after = [];
-        elements.forEach((element) => {
-            const { uuid } = element, restElement = __rest(element, ["uuid"]);
-            const position = getElementPositionFromList(uuid, data.elements);
-            const beforeElem = findElementFromListByPosition(position, data.elements);
-            if (!beforeElem) {
-                return null;
-            }
-            const tempRecord = getModifyElementRecord({
-                modifiedElement: element,
-                beforeElement: beforeElem
-            });
-            if (tempRecord.content) {
-                before.push(Object.assign(Object.assign({}, tempRecord.content.before), { uuid }));
-                after.push(Object.assign(Object.assign({}, tempRecord.content.after), { uuid }));
-            }
-            updateElementInListByPosition(position, restElement, data.elements);
-        });
-        modifyRecord = {
-            type: 'modifyElements',
-            time: Date.now(),
-            content: {
-                method: 'modifyElements',
-                before,
-                after
-            }
-        };
-        __classPrivateFieldGet(this, _Core_instances, "m", _Core_resetData).call(this, data);
-        this.refresh();
-        return modifyRecord;
-    }
-    addElement(element, opts) {
-        var _a;
-        const data = this.getData() || { elements: [] };
-        if (!opts || !((_a = opts === null || opts === void 0 ? void 0 : opts.position) === null || _a === void 0 ? void 0 : _a.length)) {
-            data.elements.push(element);
-        }
-        else if (opts === null || opts === void 0 ? void 0 : opts.position) {
-            const position = [...((opts === null || opts === void 0 ? void 0 : opts.position) || [])];
-            insertElementToListByPosition(element, position, data.elements);
-        }
-        const position = getElementPositionFromList(element.uuid, data.elements);
-        const modifyRecord = {
-            type: 'addElement',
-            time: Date.now(),
-            content: { method: 'addElement', uuid: element.uuid, position, element: deepClone(element) }
-        };
-        __classPrivateFieldGet(this, _Core_instances, "m", _Core_resetData).call(this, data);
-        this.refresh();
-        return modifyRecord;
-    }
-    deleteElement(uuid) {
-        const data = this.getData() || { elements: [] };
-        const position = getElementPositionFromList(uuid, data.elements);
-        const element = findElementFromListByPosition(position, data.elements);
-        const modifyRecord = {
-            type: 'deleteElement',
-            time: Date.now(),
-            content: { method: 'deleteElement', uuid, position, element: element ? deepClone(element) : null }
-        };
-        if (element) {
-            const loader = __classPrivateFieldGet(this, _Core_board, "f").getRenderer().getLoader();
-            loader.resetElementAsset(element);
-        }
-        deleteElementInList(uuid, data.elements);
-        __classPrivateFieldGet(this, _Core_instances, "m", _Core_resetData).call(this, data);
-        this.refresh();
-        return modifyRecord;
-    }
-    moveElement(uuid, to) {
-        const data = this.getData() || { elements: [] };
-        const from = getElementPositionFromList(uuid, data.elements);
-        const modifyRecord = {
-            type: 'moveElement',
-            time: Date.now(),
-            content: { method: 'moveElement', uuid, from: [...from], to: [...to] }
-        };
-        const { elements: list } = moveElementPosition(data.elements, { from, to });
-        data.elements = list;
-        __classPrivateFieldGet(this, _Core_instances, "m", _Core_resetData).call(this, data);
-        this.refresh();
-        return modifyRecord;
-    }
-    modifyLayout(layout) {
-        const data = this.getData() || { elements: [] };
-        const modifyRecord = {
-            type: 'modifyLayout',
-            time: Date.now(),
-            content: {
-                method: 'modifyLayout',
-                before: null,
-                after: null
-            }
-        };
-        if (layout === null) {
-            if (data.layout) {
-                modifyRecord.content.before = toFlattenLayout(data.layout);
-                delete data['layout'];
-                __classPrivateFieldGet(this, _Core_instances, "m", _Core_resetData).call(this, data);
-                this.refresh();
-                return modifyRecord;
-            }
-            else {
-                return modifyRecord;
-            }
-        }
-        const beforeLayout = data.layout;
-        let before = {};
-        const after = toFlattenLayout(layout);
-        if (data.layout) {
-            Object.keys(after).forEach((key) => {
-                let val = get(beforeLayout, key);
-                if (val === undefined && /(borderRadius|borderWidth)\[[0-9]{1,}\]$/.test(key)) {
-                    key = key.replace(/\[[0-9]{1,}\]$/, '');
-                    val = get(beforeLayout, key);
-                }
-                before[key] = val;
-            });
-            before = toFlattenLayout(before);
-            modifyRecord.content.before = before;
-        }
-        else {
-            data.layout = {};
-        }
-        modifyRecord.content.after = after;
-        mergeLayout(data.layout, layout);
-        __classPrivateFieldGet(this, _Core_instances, "m", _Core_resetData).call(this, data);
-        this.refresh();
-        return modifyRecord;
-    }
-    modifyGlobal(global) {
-        const data = this.getData() || { elements: [] };
-        const modifyRecord = {
-            type: 'modifyGlobal',
-            time: Date.now(),
-            content: {
-                method: 'modifyGlobal',
-                before: null,
-                after: null
-            }
-        };
-        if (global === null) {
-            if (data.global) {
-                modifyRecord.content.before = toFlattenGlobal(data.global);
-                delete data['global'];
-                __classPrivateFieldGet(this, _Core_instances, "m", _Core_resetData).call(this, data);
-                this.refresh();
-                return modifyRecord;
-            }
-            else {
-                return modifyRecord;
-            }
-        }
-        const beforeGlobal = data.global;
-        let before = {};
-        const after = toFlattenGlobal(global);
-        if (data.global) {
-            Object.keys(after).forEach((key) => {
-                before[key] = get(beforeGlobal, key);
-            });
-            before = toFlattenGlobal(before);
-            modifyRecord.content.before = before;
-        }
-        else {
-            data.global = {};
-        }
-        modifyRecord.content.after = after;
-        mergeGlobal(data.global, global);
-        __classPrivateFieldGet(this, _Core_instances, "m", _Core_resetData).call(this, data);
-        this.refresh();
-        return modifyRecord;
-    }
-}
-_Core_board = new WeakMap(), _Core_canvas = new WeakMap(), _Core_container = new WeakMap(), _Core_instances = new WeakSet(), _Core_initContainer = function _Core_initContainer() {
-    const container = __classPrivateFieldGet(this, _Core_container, "f");
-    container.style.position = 'relative';
-}, _Core_resetData = function _Core_resetData(data) {
-    validateElements((data === null || data === void 0 ? void 0 : data.elements) || []);
-    __classPrivateFieldGet(this, _Core_board, "f").setData(data);
-};
+export { MiddlewarePathEditor, getMiddlewarePathEditorStyles } from './middlewares/path-editor';
+export { MiddlewarePathCreator, getMiddlewarePathCreatorStyles } from './middlewares/path-creator';
+export { Core } from './core';

package/dist/esm/middlewares/common.d.ts

@@ -0,0 +1,4 @@
+import type { UtilEventEmitter, CoreEventMap, CoreEventChange } from '@idraw/types';
+type EventHub = UtilEventEmitter<CoreEventMap>;
+export declare function triggerChangeEvent(eventHub: EventHub, e: CoreEventChange, status?: 'continuous' | 'all'): void;
+export {};

package/dist/esm/middlewares/common.js

@@ -0,0 +1,13 @@
+import { coreEventKeys } from '../static';
+export function triggerChangeEvent(eventHub, e, status) {
+    if (status === 'continuous') {
+        eventHub.trigger(coreEventKeys.CHANGING, e);
+    }
+    else if (status === 'all') {
+        eventHub.trigger(coreEventKeys.CHANGING, e);
+        eventHub.trigger(coreEventKeys.CHANGE, e);
+    }
+    else {
+        eventHub.trigger(coreEventKeys.CHANGE, e);
+    }
+}

package/dist/esm/middlewares/creator/dom.d.ts

@@ -0,0 +1,11 @@
+import type { Point } from '@idraw/types';
+export declare function initRoot(opts: {
+    rootClassName: string;
+    $container: HTMLElement;
+}): HTMLDivElement;
+export declare function getCreationAreaBox($root: HTMLDivElement): HTMLElement;
+export declare function clearCreationAreaBox($root: HTMLDivElement | null): void;
+export declare function resetCreationAreaBox($root: HTMLDivElement | null, opts: {
+    start: Point;
+    end: Point;
+}): void;

package/dist/esm/middlewares/creator/dom.js

@@ -0,0 +1,52 @@
+import { ATTR_VALID_WATCH, createHTMLElement, assembleHTMLElement, setHTMLCSSProps } from '@idraw/util';
+import { classNameMap } from './static';
+function destroyBoxs($root, opts) {
+    if (!$root) {
+        return;
+    }
+    const { className } = opts;
+    const $prevBoxs = Array.from($root.getElementsByClassName(className));
+    $prevBoxs.forEach(($box) => {
+        $box.remove();
+    });
+}
+export function initRoot(opts) {
+    const { rootClassName, $container } = opts;
+    const create = createHTMLElement;
+    const $root = create('div', {
+        className: rootClassName,
+        [ATTR_VALID_WATCH]: 'true',
+    }, []);
+    $container.appendChild($root);
+    return $root;
+}
+export function getCreationAreaBox($root) {
+    const $boxs = $root.getElementsByClassName(classNameMap.creationAreaBox);
+    if ($boxs[0]) {
+        return $boxs[0];
+    }
+    const $box = createHTMLElement('div', { [ATTR_VALID_WATCH]: 'true', className: classNameMap.creationAreaBox });
+    assembleHTMLElement($root, {}, [$box]);
+    return $box;
+}
+export function clearCreationAreaBox($root) {
+    destroyBoxs($root, { className: classNameMap.creationAreaBox });
+}
+export function resetCreationAreaBox($root, opts) {
+    if (!$root) {
+        return;
+    }
+    const { start, end } = opts;
+    if (start && end) {
+        const $box = getCreationAreaBox($root);
+        setHTMLCSSProps($box, {
+            left: Math.min(start.x, end.x),
+            top: Math.min(start.y, end.y),
+            width: Math.abs(end.x - start.x),
+            height: Math.abs(end.y - start.y),
+        });
+    }
+    else {
+        clearCreationAreaBox($root);
+    }
+}

package/dist/esm/middlewares/creator/index.d.ts

@@ -0,0 +1,5 @@
+import type { Middleware, MiddlewareCreatorConfig, CoreEventMap } from '@idraw/types';
+import type { CreatorSharedStorage } from './types';
+import { getMiddlewareCreatorStyles } from './styles';
+export { getMiddlewareCreatorStyles };
+export declare const MiddlewareCreator: Middleware<CreatorSharedStorage, CoreEventMap, MiddlewareCreatorConfig>;