@idraw/core 0.4.2 → 1.0.0-alpha.1

package/dist/esm/middlewares/layout-selector/styles.js

@@ -0,0 +1,127 @@
+import { injectStyles, removeStyles, getMiddlewareValidStyles } from '@idraw/util';
+import { classNameMap, cornerHandlerBorderWidth, cornerHandlerSize, edgeHandlerSize, hoverBoxBorderWidth, selectedBoxBorderWidth, } from './static';
+export function initStyles(rootClassName, styles) {
+    const cls = (str) => `.${str}`;
+    const stylesProps = {
+        zIndex: styles.zIndex,
+        position: 'absolute',
+        background: 'transparent',
+        [`&${cls(classNameMap.hover)}`]: {
+            [`&${cls(classNameMap.cornerHandler)}`]: {
+                display: 'none',
+            },
+            [`&${cls(classNameMap.edgeHandler)}`]: {
+                width: `${hoverBoxBorderWidth}px`,
+                height: `${hoverBoxBorderWidth}px`,
+                [`&${cls(classNameMap.edgeLeftHandler)}`]: {
+                    width: `${hoverBoxBorderWidth}px`,
+                },
+                [`&${cls(classNameMap.edgeRightHandler)}`]: {
+                    width: `${hoverBoxBorderWidth}px`,
+                },
+                [`&${cls(classNameMap.edgeTopHandler)}`]: {
+                    height: `${hoverBoxBorderWidth}px`,
+                },
+                [`&${cls(classNameMap.edgeBottomHandler)}`]: {
+                    height: `${hoverBoxBorderWidth}px`,
+                },
+            },
+        },
+        [`&${cls(classNameMap.cornerHandler)}`]: {
+            outline: `${cornerHandlerBorderWidth}px solid ${styles.handlerBorderColor}`,
+            background: styles.handlerBackground,
+            width: `${cornerHandlerSize}px`,
+            height: `${cornerHandlerSize}px`,
+            top: 'unset',
+            bottom: 'unset',
+            left: 'unset',
+            right: 'unset',
+            ['&:hover']: {
+                background: styles.handlerHoverBackground,
+            },
+            ['&:active']: {
+                background: styles.handlerActiveBackground,
+            },
+            [`&${cls(classNameMap.cornerTopLeftHandler)}`]: {
+                transform: 'translate(-50%, -50%)',
+            },
+            [`&${cls(classNameMap.cornerTopRightHandler)}`]: {
+                transform: 'translate(-50%, -50%)',
+            },
+            [`&${cls(classNameMap.cornerBottomLeftHandler)}`]: {
+                transform: 'translate(-50%, -50%)',
+            },
+            [`&${cls(classNameMap.cornerBottomRightHandler)}`]: {
+                transform: 'translate(-50%, -50%)',
+            },
+        },
+        [`&${cls(classNameMap.edgeHandler)}`]: {
+            width: `${cornerHandlerSize}px`,
+            height: `${cornerHandlerSize}px`,
+            ['&:after']: {
+                position: 'absolute',
+                content: '""',
+                background: styles.handlerBorderColor,
+            },
+            [`&${cls(classNameMap.edgeLeftHandler)}`]: {
+                width: `${edgeHandlerSize}px`,
+                transform: 'translateX(-50%)',
+                ['&:after']: {
+                    top: 0,
+                    bottom: 0,
+                    left: '50%',
+                    right: 'unset',
+                    width: selectedBoxBorderWidth,
+                },
+            },
+            [`&${cls(classNameMap.edgeRightHandler)}`]: {
+                width: `${edgeHandlerSize}px`,
+                transform: 'translateX(-50%)',
+                ['&:after']: {
+                    top: 0,
+                    bottom: 0,
+                    left: '50%',
+                    right: 'unset',
+                    width: selectedBoxBorderWidth,
+                },
+            },
+            [`&${cls(classNameMap.edgeTopHandler)}`]: {
+                height: `${edgeHandlerSize}px`,
+                transform: 'translateY(-50%)',
+                ['&:after']: {
+                    left: 0,
+                    right: 0,
+                    top: '50%',
+                    bottom: 'unset',
+                    height: selectedBoxBorderWidth,
+                },
+            },
+            [`&${cls(classNameMap.edgeBottomHandler)}`]: {
+                height: `${edgeHandlerSize}px`,
+                transform: 'translateY(-50%)',
+                ['&:after']: {
+                    left: 0,
+                    right: 0,
+                    top: '50%',
+                    bottom: 'unset',
+                    height: selectedBoxBorderWidth,
+                },
+            },
+        },
+    };
+    injectStyles({ styles: stylesProps, rootClassName, type: 'element' });
+}
+export function destroyStyles(rootClassName) {
+    removeStyles({ rootClassName, type: 'element' });
+}
+export function getMiddlewareLayoutSelectorStyles(config) {
+    const styles = getMiddlewareValidStyles(config, [
+        'zIndex',
+        'activeColor',
+        'handlerBorderColor',
+        'handlerBackground',
+        'handlerHoverBackground',
+        'handlerActiveBackground',
+    ]);
+    return styles;
+}

package/dist/esm/middlewares/layout-selector/types.d.ts

@@ -1,15 +1,15 @@
-import type { LayoutSizeController, Element } from '@idraw/types';
-import { keyLayoutActionType, keyLayoutControlType, keyLayoutController, keyLayoutIsHoverContent, keyLayoutIsHoverController, keyLayoutIsSelected, keyLayoutIsBusyMoving } from './config';
-import { keyActionType as keyElementActionType, keyHoverElement } from '../selector';
-import type { ActionType as ElementActionType } from '../selector';
+import type { LayoutSizeController, Material } from '@idraw/types';
+import { keyLayoutActionType, keyLayoutControlType, keyLayoutController, keyLayoutIsHoverContent, keyLayoutIsHoverController, keyLayoutIsSelected, keyLayoutIsBusyMoving } from './static';
+import { keyActionType as keyMaterialActionType, keyHoverMaterial } from '../selector';
+import type { ActionType as MaterialActionType } from '../selector';
 export type ActionType = 'resize' | null;
 export type ControlType = 'left' | 'right' | 'top' | 'bottom' | 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';
 export type LayoutSelectorSharedStorage = {
     [keyLayoutActionType]: ActionType | null;
     [keyLayoutControlType]: ControlType | null;
     [keyLayoutController]: LayoutSizeController | null;
-    [keyElementActionType]: ElementActionType | null;
-    [keyHoverElement]: Element | null;
+    [keyMaterialActionType]: MaterialActionType | null;
+    [keyHoverMaterial]: Material | null;
     [keyLayoutIsHoverContent]: boolean | null;
     [keyLayoutIsHoverController]: boolean | null;
     [keyLayoutIsSelected]: boolean | null;

package/dist/esm/middlewares/layout-selector/types.js

@@ -1,2 +1,2 @@
-import { keyLayoutActionType, keyLayoutControlType, keyLayoutController, keyLayoutIsHoverContent, keyLayoutIsHoverController, keyLayoutIsSelected, keyLayoutIsBusyMoving } from './config';
-import { keyActionType as keyElementActionType, keyHoverElement } from '../selector';
+import { keyLayoutActionType, keyLayoutControlType, keyLayoutController, keyLayoutIsHoverContent, keyLayoutIsHoverController, keyLayoutIsSelected, keyLayoutIsBusyMoving, } from './static';
+import { keyActionType as keyMaterialActionType, keyHoverMaterial } from '../selector';

package/dist/esm/middlewares/layout-selector/util.d.ts

@@ -1,9 +1,9 @@
-import type { ViewContext2D, LayoutSizeController, ElementSize, MiddlewareLayoutSelectorStyle } from '@idraw/types';
+import type { ViewContext2D, LayoutSizeController, MaterialSize, MiddlewareLayoutSelectorStyles } from '@idraw/types';
 export declare function drawLayoutController(ctx: ViewContext2D, opts: {
     controller: LayoutSizeController;
-    style: MiddlewareLayoutSelectorStyle;
+    styles: MiddlewareLayoutSelectorStyles;
 }): void;
 export declare function drawLayoutHover(ctx: ViewContext2D, opts: {
-    layoutSize: ElementSize;
-    style: MiddlewareLayoutSelectorStyle;
+    layoutSize: MaterialSize;
+    styles: MiddlewareLayoutSelectorStyles;
 }): void;

package/dist/esm/middlewares/layout-selector/util.js

@@ -1,5 +1,5 @@
-function drawControllerBox(ctx, boxVertexes, style) {
-    const { activeColor } = style;
+function drawControllerBox(ctx, boxVertexes, styles) {
+    const { activeColor } = styles;
     ctx.setLineDash([]);
     ctx.fillStyle = '#FFFFFF';
     ctx.beginPath();
@@ -20,8 +20,8 @@ function drawControllerBox(ctx, boxVertexes, style) {
     ctx.stroke();
 }
 function drawControllerLine(ctx, opts) {
-    const { start, end, style } = opts;
-    const { activeColor } = style;
+    const { start, end, styles } = opts;
+    const { activeColor } = styles;
     const lineWidth = 2;
     const strokeStyle = activeColor;
     ctx.setLineDash([]);
@@ -34,44 +34,44 @@ function drawControllerLine(ctx, opts) {
     ctx.stroke();
 }
 export function drawLayoutController(ctx, opts) {
-    const { controller, style } = opts;
+    const { controller, styles } = opts;
     const { topLeft, topRight, bottomLeft, bottomRight, topMiddle, rightMiddle, bottomMiddle, leftMiddle } = controller;
-    drawControllerLine(ctx, { start: topLeft.center, end: topRight.center, centerVertexes: topMiddle.vertexes, style });
+    drawControllerLine(ctx, { start: topLeft.center, end: topRight.center, centerVertexes: topMiddle.vertexes, styles });
     drawControllerLine(ctx, {
         start: topRight.center,
         end: bottomRight.center,
         centerVertexes: rightMiddle.vertexes,
-        style
+        styles,
     });
     drawControllerLine(ctx, {
         start: bottomRight.center,
         end: bottomLeft.center,
         centerVertexes: bottomMiddle.vertexes,
-        style
+        styles,
     });
     drawControllerLine(ctx, {
         start: bottomLeft.center,
         end: topLeft.center,
         centerVertexes: leftMiddle.vertexes,
-        style
+        styles,
     });
-    drawControllerBox(ctx, topLeft.vertexes, style);
-    drawControllerBox(ctx, topRight.vertexes, style);
-    drawControllerBox(ctx, bottomRight.vertexes, style);
-    drawControllerBox(ctx, bottomLeft.vertexes, style);
+    drawControllerBox(ctx, topLeft.vertexes, styles);
+    drawControllerBox(ctx, topRight.vertexes, styles);
+    drawControllerBox(ctx, bottomRight.vertexes, styles);
+    drawControllerBox(ctx, bottomLeft.vertexes, styles);
 }
 export function drawLayoutHover(ctx, opts) {
-    const { layoutSize, style } = opts;
-    const { activeColor } = style;
-    const { x, y, w, h } = layoutSize;
+    const { layoutSize, styles } = opts;
+    const { activeColor } = styles;
+    const { x, y, width, height } = layoutSize;
     ctx.setLineDash([]);
     ctx.strokeStyle = activeColor;
     ctx.lineWidth = 1;
     ctx.beginPath();
     ctx.moveTo(x, y);
-    ctx.lineTo(x + w, y);
-    ctx.lineTo(x + w, y + h);
-    ctx.lineTo(x, y + h);
+    ctx.lineTo(x + width, y);
+    ctx.lineTo(x + width, y + height);
+    ctx.lineTo(x, y + height);
     ctx.lineTo(x, y);
     ctx.closePath();
     ctx.stroke();

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

@@ -0,0 +1,29 @@
+import type { Point, ViewScaleInfo, MiddlewarePathCreatorStyles } from '@idraw/types';
+export declare function initStyles(rootClassName: string, styles: MiddlewarePathCreatorStyles): void;
+export declare function destroyStyles(rootClassName: string): void;
+export declare function initRoot(container: HTMLElement, opts: {
+    id: string;
+    rootClassName: string;
+}): HTMLDivElement | undefined;
+export declare function createAnchorElement(opts: {
+    id: string;
+    index: number;
+    point: Point;
+    commandType: string;
+    viewScaleInfo: ViewScaleInfo;
+    styles: MiddlewarePathCreatorStyles;
+}): HTMLElement;
+export declare function appendAnchorElement(root: HTMLElement, opts: {
+    point: Point;
+    viewScaleInfo: ViewScaleInfo;
+    styles: MiddlewarePathCreatorStyles;
+}): {
+    id: string;
+};
+export declare function updateAnchorsStyle(root: HTMLDivElement, opts: {
+    viewScaleInfo: ViewScaleInfo;
+    styles: MiddlewarePathCreatorStyles;
+}): void;
+export declare function isAnchorElement(elem: HTMLElement): boolean;
+export declare function getIndexFromAnchorElement(elem: HTMLElement): number | null;
+export declare function clearRoot(root: HTMLElement | null): void;

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

@@ -0,0 +1,145 @@
+import { injectStyles, removeStyles, createHTMLElement, setHTMLCSSProps, createId, calcViewPoint, ATTR_VALID_WATCH, } from '@idraw/util';
+import { ATTR_X, ATTR_Y, ATTR_AHCHOR_CMD_TYPE, ATTR_AHCHOR_INDEX, ATTR_AHCHOR_ID, ATTR_HELPER_TYPE, HELPER_ANCHOR, classNameMap, } from './static';
+export function initStyles(rootClassName, styles) {
+    const stylesProps = {
+        display: 'flex',
+        position: 'absolute',
+        top: 0,
+        left: 0,
+        right: 0,
+        bottom: 0,
+        overflow: 'hidden',
+        justifyContent: 'center',
+        alignItems: 'center',
+        [`.${classNameMap.anchor}`]: {
+            position: 'absolute',
+            width: styles.anchorSize,
+            height: styles.anchorSize,
+            background: styles.anchorBackground,
+            border: `${styles.anchorBorderWidth}px solid ${styles.anchorBorderColor}`,
+            borderRadius: '50%',
+            overflow: 'hidden',
+            ['&:hover']: {
+                borderColor: styles.anchorHoverBorderColor,
+                background: styles.anchorHoverBackground,
+            },
+            ['&:active']: {
+                borderColor: styles.anchorActiveBorderColor,
+                background: styles.anchorActiveBackground,
+            },
+            [`&.${classNameMap.selected}`]: {
+                borderColor: styles.anchorActiveBorderColor,
+                background: styles.anchorActiveBackground,
+            },
+        },
+    };
+    injectStyles({
+        styles: stylesProps,
+        rootClassName,
+        type: 'element',
+    });
+}
+export function destroyStyles(rootClassName) {
+    removeStyles({ rootClassName, type: 'element' });
+}
+export function initRoot(container, opts) {
+    const { id, rootClassName } = opts;
+    if (!container) {
+        return;
+    }
+    const root = createHTMLElement('div', {
+        id,
+        className: [classNameMap.hide, rootClassName].join(' '),
+        [ATTR_VALID_WATCH]: 'true',
+    });
+    if (!container.contains(root)) {
+        container.appendChild(root);
+    }
+    return root;
+}
+const getAnchorPosition = (opts) => {
+    const { x, y, size, borderWidth } = opts;
+    return {
+        left: x - size / 2 - borderWidth,
+        top: y - size / 2 - borderWidth,
+    };
+};
+export function createAnchorElement(opts) {
+    const { id, index, point, commandType, viewScaleInfo, styles } = opts;
+    const viewPoint = calcViewPoint(point, { viewScaleInfo });
+    const $anchor = createHTMLElement('div', {
+        [ATTR_HELPER_TYPE]: HELPER_ANCHOR,
+        [ATTR_AHCHOR_CMD_TYPE]: commandType,
+        [ATTR_AHCHOR_INDEX]: index,
+        [ATTR_AHCHOR_ID]: id,
+        [ATTR_VALID_WATCH]: 'true',
+        [ATTR_X]: point.x,
+        [ATTR_Y]: point.y,
+        className: classNameMap.anchor,
+        style: Object.assign(Object.assign({}, getAnchorPosition({
+            x: viewPoint.x,
+            y: viewPoint.y,
+            size: styles.anchorSize,
+            borderWidth: styles.anchorBorderWidth,
+        })), { display: 'block' }),
+    });
+    return $anchor;
+}
+export function appendAnchorElement(root, opts) {
+    const { point, viewScaleInfo, styles } = opts;
+    const $existedAnchors = Array.from(root.querySelectorAll(`[${ATTR_HELPER_TYPE}="${HELPER_ANCHOR}"]`));
+    const index = $existedAnchors.length;
+    const id = createId();
+    const $anchor = createAnchorElement({
+        index,
+        id,
+        point,
+        styles,
+        viewScaleInfo,
+        commandType: index === 0 ? 'M' : 'C',
+    });
+    if (index === 0) {
+        root.appendChild($anchor);
+    }
+    else {
+        const $lastAnchor = $existedAnchors[$existedAnchors.length - 1];
+        $lastAnchor.after($anchor);
+    }
+    return { id };
+}
+const getAnchorElementInfo = (elem) => {
+    const id = elem.getAttribute(ATTR_AHCHOR_ID) || '';
+    const type = elem.getAttribute(ATTR_HELPER_TYPE) || '';
+    const x = parseFloat(elem.getAttribute(ATTR_X) || '0');
+    const y = parseFloat(elem.getAttribute(ATTR_Y) || '0');
+    const info = { id, type, x, y };
+    return info;
+};
+export function updateAnchorsStyle(root, opts) {
+    const { viewScaleInfo, styles } = opts;
+    const $anchors = Array.from(root.querySelectorAll(`[${ATTR_HELPER_TYPE}="${HELPER_ANCHOR}"]`));
+    $anchors.forEach(($anchor) => {
+        const info = getAnchorElementInfo($anchor);
+        const viewPoint = calcViewPoint({ x: info.x, y: info.y }, { viewScaleInfo });
+        setHTMLCSSProps($anchor, getAnchorPosition(Object.assign(Object.assign({}, viewPoint), { size: styles.anchorSize, borderWidth: styles.anchorBorderWidth })));
+    });
+}
+export function isAnchorElement(elem) {
+    return elem.getAttribute(ATTR_HELPER_TYPE) === HELPER_ANCHOR;
+}
+export function getIndexFromAnchorElement(elem) {
+    const index = elem.getAttribute(ATTR_AHCHOR_INDEX);
+    if (typeof index === 'string') {
+        return parseInt(index);
+    }
+    return index;
+}
+export function clearRoot(root) {
+    if (!root) {
+        return;
+    }
+    const children = Array.from(root.children);
+    children.forEach((child) => {
+        child.remove();
+    });
+}

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

@@ -0,0 +1,5 @@
+import type { Middleware, CoreEventMap, MiddlewarePathCreatorConfig } from '@idraw/types';
+import type { PathSharedStorage } from './types';
+import { getMiddlewarePathCreatorStyles } from './static';
+export { getMiddlewarePathCreatorStyles };
+export declare const MiddlewarePathCreator: Middleware<PathSharedStorage, CoreEventMap, MiddlewarePathCreatorConfig>;

package/dist/esm/middlewares/path-creator/index.js

@@ -0,0 +1,203 @@
+import { createId, getHTMLElementRectInPage, calcPointFromView, createUUID, convertLineToExactCurveCommand, updateMaterialInList, refinePathMaterial, deepClone, } from '@idraw/util';
+import { coreEventKeys } from '../../static';
+import { initRoot, clearRoot, appendAnchorElement, updateAnchorsStyle, isAnchorElement, getIndexFromAnchorElement, initStyles, destroyStyles, } from './dom';
+import { defaultConfig, getRootClassName, getMiddlewarePathCreatorStyles } from './static';
+import { triggerChangeEvent } from '../common';
+export { getMiddlewarePathCreatorStyles };
+export const MiddlewarePathCreator = (opts, config) => {
+    const innerConfig = Object.assign(Object.assign({}, defaultConfig), config);
+    const { defaultStrokeWidth, defaultStroke } = innerConfig;
+    const styles = getMiddlewarePathCreatorStyles(innerConfig);
+    const rootClassName = getRootClassName();
+    const { viewer, eventHub, sharer, calculator } = opts;
+    const container = opts.container;
+    const id = rootClassName;
+    let root = null;
+    let pathCommandIndex = -1;
+    let createdPathMaterial = null;
+    let prevPoint = null;
+    const clearData = () => {
+        clearRoot(root);
+        prevPoint = null;
+        createdPathMaterial = null;
+        pathCommandIndex = -1;
+    };
+    const refineData = () => {
+        if (!createdPathMaterial) {
+            return;
+        }
+        createdPathMaterial = refinePathMaterial(createdPathMaterial);
+        const data = sharer.getActiveStorage('data');
+        updateMaterialInList(createdPathMaterial.id, {
+            x: createdPathMaterial.x,
+            y: createdPathMaterial.y,
+            width: createdPathMaterial.width,
+            height: createdPathMaterial.height,
+            commands: createdPathMaterial.commands,
+        }, data.materials);
+        calculator.modifyVirtualAttributes(createdPathMaterial, {
+            viewScaleInfo: sharer.getActiveViewScaleInfo(),
+            viewSizeInfo: sharer.getActiveViewSizeInfo(),
+            groupQueue: [],
+        });
+        calculator.forceVisiable(createdPathMaterial.id);
+        viewer.drawFrame();
+    };
+    const refreshMaterials = () => {
+        var _a;
+        if (!createdPathMaterial) {
+            return;
+        }
+        const data = sharer.getActiveStorage('data');
+        if (pathCommandIndex > 0) {
+            updateMaterialInList(createdPathMaterial.id, {
+                x: createdPathMaterial.x,
+                y: createdPathMaterial.y,
+                width: createdPathMaterial.width,
+                height: createdPathMaterial.height,
+                commands: createdPathMaterial.commands,
+            }, data.materials);
+        }
+        else {
+            data.materials.push(createdPathMaterial);
+            const modifyRecord = {
+                type: 'addMaterial',
+                time: Date.now(),
+                content: {
+                    method: 'addMaterial',
+                    id: createdPathMaterial.id,
+                    position: [(_a = data.materials) === null || _a === void 0 ? void 0 : _a.length],
+                    material: deepClone(createdPathMaterial),
+                },
+            };
+            triggerChangeEvent(eventHub, { data, type: 'addMaterial', modifyRecord });
+        }
+        calculator.modifyVirtualAttributes(createdPathMaterial, {
+            viewScaleInfo: sharer.getActiveViewScaleInfo(),
+            viewSizeInfo: sharer.getActiveViewSizeInfo(),
+            groupQueue: [],
+        });
+        calculator.forceVisiable(createdPathMaterial.id);
+        viewer.drawFrame();
+    };
+    const mouseDownEvent = (e) => {
+        const $target = e.target;
+        if (isAnchorElement($target)) {
+            const index = getIndexFromAnchorElement($target);
+            if (index === 0 && pathCommandIndex > 1 && createdPathMaterial) {
+                createdPathMaterial.commands.push({
+                    id: createId(),
+                    type: 'Z',
+                    params: [],
+                });
+                refineData();
+                clearData();
+            }
+            return;
+        }
+        const rootRect = getHTMLElementRectInPage(root);
+        const viewPoint = {
+            x: e.pageX - rootRect.pageX,
+            y: e.pageY - rootRect.pageY,
+        };
+        const viewScaleInfo = sharer.getActiveViewScaleInfo();
+        const viewSizeInfo = sharer.getActiveViewSizeInfo();
+        const point = calcPointFromView(viewPoint, {
+            viewScaleInfo,
+        });
+        const { id } = appendAnchorElement(root, { point, viewScaleInfo, styles });
+        if (pathCommandIndex < 0 || !createdPathMaterial) {
+            pathCommandIndex = 0;
+            createdPathMaterial = {
+                id: createUUID(),
+                type: 'path',
+                x: 0,
+                y: 0,
+                width: viewSizeInfo.width,
+                height: viewSizeInfo.height,
+                strokeWidth: defaultStrokeWidth,
+                stroke: defaultStroke,
+                commands: [{ id, type: 'M', params: [point.x, point.y] }],
+            };
+        }
+        else {
+            pathCommandIndex++;
+            createdPathMaterial.commands.push(Object.assign(Object.assign({}, convertLineToExactCurveCommand(prevPoint, point)), { id }));
+        }
+        prevPoint = point;
+        refreshMaterials();
+    };
+    const mouseMoveEvent = () => {
+    };
+    const mouseUpEvent = () => {
+        window.removeEventListener('mousemove', mouseMoveEvent);
+    };
+    const mouseLeaveEvent = () => {
+        window.removeEventListener('mousemove', mouseMoveEvent);
+    };
+    const onEvents = () => {
+        root === null || root === void 0 ? void 0 : root.addEventListener('mousedown', mouseDownEvent);
+        window.addEventListener('mouseup', mouseUpEvent);
+        window.addEventListener('mouseleave', mouseLeaveEvent);
+    };
+    const offEvents = () => {
+        root === null || root === void 0 ? void 0 : root.removeEventListener('mousedown', mouseDownEvent);
+        window.removeEventListener('mouseup', mouseUpEvent);
+        window.removeEventListener('mouseleave', mouseLeaveEvent);
+    };
+    const init = () => {
+        if (!container) {
+            return;
+        }
+        root = initRoot(container, { id, rootClassName });
+        if (!container.contains(root)) {
+            container.appendChild(root);
+        }
+    };
+    const destroy = () => {
+        offEvents();
+        root === null || root === void 0 ? void 0 : root.remove();
+        root = null;
+    };
+    const pathCreateCallback = () => {
+        onEvents();
+        viewer.drawFrame();
+    };
+    const clearPathCreateCallback = () => {
+        refineData();
+        offEvents();
+        clearData();
+    };
+    const clear = () => {
+        clearData();
+        viewer.drawFrame();
+    };
+    return {
+        name: '@middleware/pen-create',
+        use() {
+            initStyles(rootClassName, styles);
+            eventHub.on(coreEventKeys.PATH_CREATE, pathCreateCallback);
+            eventHub.on(coreEventKeys.CLEAR_PATH_CREATE, clearPathCreateCallback);
+            init();
+        },
+        disuse() {
+            destroyStyles(rootClassName);
+            eventHub.off(coreEventKeys.PATH_CREATE, pathCreateCallback);
+            eventHub.off(coreEventKeys.CLEAR_PATH_CREATE, clearPathCreateCallback);
+            clear();
+            destroy();
+        },
+        beforeDrawFrame() {
+            updateAnchorsStyle(root, {
+                viewScaleInfo: sharer.getActiveViewScaleInfo(),
+                styles,
+            });
+        },
+        hover() {
+            eventHub.trigger(coreEventKeys.CURSOR, {
+                type: 'pen',
+            });
+            return false;
+        },
+    };
+};

package/dist/esm/middlewares/path-creator/static.d.ts

@@ -0,0 +1,23 @@
+import type { MiddlewarePathCreatorConfig, MiddlewarePathCreatorStyles } from '@idraw/types';
+export declare const key = "PATH-CREATOR";
+export declare const getRootClassName: () => string;
+export declare const classNameMap: {
+    hide: string;
+    anchor: string;
+    director: string;
+    directorLines: string;
+    pathLine: string;
+    selected: string;
+};
+export declare const ATTR_X = "data-x";
+export declare const ATTR_Y = "data-y";
+export declare const ATTR_ANGLE = "data-angle";
+export declare const ATTR_TYPE = "data-type";
+export declare const ATTR_HELPER_TYPE = "data-helper-type";
+export declare const ATTR_AHCHOR_CMD_TYPE = "data-anchor-cmd-type";
+export declare const ATTR_AHCHOR_INDEX = "data-anchor-index";
+export declare const ATTR_AHCHOR_ID = "data-anchor-id";
+export declare const HELPER_ROOT = "root";
+export declare const HELPER_ANCHOR = "anchor";
+export declare const defaultConfig: MiddlewarePathCreatorConfig;
+export declare function getMiddlewarePathCreatorStyles<C = MiddlewarePathCreatorConfig, S = MiddlewarePathCreatorStyles>(config: C): S;