@idraw/core 0.4.2 → 1.0.0-alpha.1

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

@@ -0,0 +1,395 @@
+import { ATTR_VALID_WATCH, createHTMLElement, calcViewMaterialSize, assembleHTMLElement, addClassName, removeClassName, getMaterialSize, calcMaterialListSize, calcViewPoint, setHTMLCSSProps, bubbleHTMLElement, } from '@idraw/util';
+import { classNameMap, ATTR_BOX_TYPE, ATTR_MATERIAL_ID, ATTR_HANDLER_TYPE, BOX_TARGET, BOX_GROUP, cornerHandlerSize, } from './static';
+function createNestedBox(opts) {
+    const { viewMaterialSize, viewGroupSizeQueue, className, targetClassName } = opts;
+    let $target = null;
+    if (viewMaterialSize) {
+        $target = createHTMLElement('div', {
+            [ATTR_BOX_TYPE]: BOX_TARGET,
+            [ATTR_VALID_WATCH]: 'true',
+            [ATTR_MATERIAL_ID]: viewMaterialSize.id,
+            className: classNameMap.materialBox,
+            style: {
+                display: 'block',
+                position: 'absolute',
+                top: viewMaterialSize.y,
+                left: viewMaterialSize.x,
+                width: viewMaterialSize.width,
+                height: viewMaterialSize.height,
+                transform: `rotate(${viewMaterialSize.angle || 0}deg)`,
+            },
+        });
+        addClassName($target, [targetClassName]);
+    }
+    let $result = $target;
+    for (let i = viewGroupSizeQueue.length - 1; i >= 0; i--) {
+        const groupSize = viewGroupSizeQueue[i];
+        const children = [];
+        if ($result) {
+            children.push($result);
+        }
+        $result = createHTMLElement('div', {
+            [ATTR_BOX_TYPE]: BOX_GROUP,
+            [ATTR_VALID_WATCH]: 'true',
+            [ATTR_MATERIAL_ID]: groupSize.id,
+            className: `${classNameMap.materialBox} ${classNameMap.groupBox}`,
+            style: {
+                position: 'absolute',
+                top: groupSize.y,
+                left: groupSize.x,
+                width: groupSize.width,
+                height: groupSize.height,
+                transform: `rotate(${groupSize.angle || 0}deg)`,
+            },
+        }, children);
+    }
+    if ($result) {
+        addClassName($result, [className]);
+    }
+    return $result;
+}
+function calcBoxSizes(opts) {
+    const { material, groupQueue, viewScaleInfo } = opts;
+    let viewMaterialSize = material ? getMaterialSize(material) : null;
+    const viewGroupSizeQueue = groupQueue.map((group) => getMaterialSize(group));
+    if (Array.isArray(viewGroupSizeQueue) && viewGroupSizeQueue.length > 0) {
+        viewMaterialSize = viewMaterialSize
+            ? calcViewMaterialSize(viewMaterialSize, { viewScaleInfo: { scale: viewScaleInfo.scale } })
+            : null;
+        viewGroupSizeQueue[0] = calcViewMaterialSize(viewGroupSizeQueue[0], { viewScaleInfo });
+        for (let i = 1; i < viewGroupSizeQueue.length; i++) {
+            viewGroupSizeQueue[i] = calcViewMaterialSize(viewGroupSizeQueue[i], {
+                viewScaleInfo: { scale: viewScaleInfo.scale },
+            });
+        }
+    }
+    else {
+        viewMaterialSize = viewMaterialSize ? calcViewMaterialSize(viewMaterialSize, { viewScaleInfo }) : null;
+    }
+    return {
+        viewMaterialSize: viewMaterialSize,
+        viewGroupSizeQueue: viewGroupSizeQueue,
+    };
+}
+function generateBoxsBySizes($root, opts) {
+    if (!$root) {
+        return null;
+    }
+    const { className, targetClassName, viewMaterialSize, viewGroupSizeQueue } = opts;
+    const $box = createNestedBox({
+        viewMaterialSize,
+        viewGroupSizeQueue,
+        className,
+        targetClassName,
+    });
+    if ($box) {
+        assembleHTMLElement($root, {}, [$box]);
+    }
+    return $box;
+}
+function generateBoxs($root, opts) {
+    if (!$root) {
+        return null;
+    }
+    const { className, targetClassName } = opts;
+    const { viewMaterialSize, viewGroupSizeQueue } = calcBoxSizes(opts);
+    return generateBoxsBySizes($root, {
+        viewMaterialSize,
+        viewGroupSizeQueue,
+        className,
+        targetClassName,
+    });
+}
+function resetBoxs($root, opts) {
+    var _a, _b;
+    if (!$root) {
+        return null;
+    }
+    const { className, targetClassName, renderTargetInner, destoryTargetInner, afterRender } = opts;
+    const $boxs = $root.getElementsByClassName(className);
+    const { viewMaterialSize, viewGroupSizeQueue } = calcBoxSizes(opts);
+    const remove = () => {
+        Array.from($boxs).forEach(($box) => {
+            $box.remove();
+        });
+    };
+    if (!viewMaterialSize && !viewGroupSizeQueue.length) {
+        remove();
+    }
+    if ($boxs.length === 1) {
+        const $box = $boxs[0];
+        addClassName($box, [className]);
+        if (viewGroupSizeQueue.length > 0) {
+            let index = 0;
+            let $current = $boxs[0];
+            let $parent = $current.parentElement;
+            while (index < viewGroupSizeQueue.length) {
+                const groupSize = viewGroupSizeQueue[index];
+                if ($current) {
+                    removeClassName($current, [targetClassName]);
+                    assembleHTMLElement($current, {
+                        [ATTR_BOX_TYPE]: BOX_GROUP,
+                        [ATTR_VALID_WATCH]: 'true',
+                        [ATTR_MATERIAL_ID]: groupSize.id,
+                        style: {
+                            position: 'absolute',
+                            top: groupSize.y,
+                            left: groupSize.x,
+                            width: groupSize.width,
+                            height: groupSize.height,
+                            transform: `rotate(${groupSize.angle || 0}deg)`,
+                        },
+                    });
+                }
+                else {
+                    $current = createHTMLElement('div', {
+                        [ATTR_BOX_TYPE]: BOX_GROUP,
+                        [ATTR_VALID_WATCH]: 'true',
+                        [ATTR_MATERIAL_ID]: groupSize.id,
+                        className: `${classNameMap.materialBox} ${classNameMap.groupBox}`,
+                        style: {
+                            position: 'absolute',
+                            top: groupSize.y,
+                            left: groupSize.x,
+                            width: groupSize.width,
+                            height: groupSize.height,
+                            transform: `rotate(${groupSize.angle || 0}deg)`,
+                        },
+                    });
+                    $parent === null || $parent === void 0 ? void 0 : $parent.appendChild($current);
+                }
+                $parent = $current;
+                if (index + 1 === viewGroupSizeQueue.length) {
+                    break;
+                }
+                $current = (_a = $current === null || $current === void 0 ? void 0 : $current.children) === null || _a === void 0 ? void 0 : _a[0];
+                index++;
+            }
+            if (viewMaterialSize) {
+                let $target = (_b = $current === null || $current === void 0 ? void 0 : $current.children) === null || _b === void 0 ? void 0 : _b[0];
+                if (!$target) {
+                    $target = createHTMLElement('div');
+                    $parent === null || $parent === void 0 ? void 0 : $parent.appendChild($target);
+                }
+                assembleHTMLElement($target, {
+                    [ATTR_BOX_TYPE]: BOX_TARGET,
+                    [ATTR_VALID_WATCH]: 'true',
+                    [ATTR_MATERIAL_ID]: viewMaterialSize.id,
+                    style: {
+                        display: 'block',
+                        position: 'absolute',
+                        top: viewMaterialSize.y,
+                        left: viewMaterialSize.x,
+                        width: viewMaterialSize.width,
+                        height: viewMaterialSize.height,
+                        transform: `rotate(${viewMaterialSize.angle || 0}deg)`,
+                    },
+                });
+                renderTargetInner === null || renderTargetInner === void 0 ? void 0 : renderTargetInner($target);
+            }
+            else {
+                destoryTargetInner === null || destoryTargetInner === void 0 ? void 0 : destoryTargetInner($current);
+            }
+        }
+        else {
+            if (viewMaterialSize) {
+                destoryTargetInner === null || destoryTargetInner === void 0 ? void 0 : destoryTargetInner($box);
+                assembleHTMLElement($box, {
+                    [ATTR_BOX_TYPE]: BOX_TARGET,
+                    [ATTR_VALID_WATCH]: 'true',
+                    [ATTR_MATERIAL_ID]: viewMaterialSize.id,
+                    style: {
+                        display: 'block',
+                        position: 'absolute',
+                        top: viewMaterialSize.y,
+                        left: viewMaterialSize.x,
+                        width: viewMaterialSize.width,
+                        height: viewMaterialSize.height,
+                        transform: `rotate(${viewMaterialSize.angle || 0}deg)`,
+                    },
+                });
+                addClassName($box, [targetClassName]);
+                renderTargetInner === null || renderTargetInner === void 0 ? void 0 : renderTargetInner($box);
+            }
+            else {
+                remove();
+            }
+        }
+        afterRender === null || afterRender === void 0 ? void 0 : afterRender({ $rootBox: $box, viewGroupSizeQueue, viewMaterialSize });
+        return $box;
+    }
+    else {
+        remove();
+        const $box = generateBoxsBySizes($root, {
+            viewMaterialSize,
+            viewGroupSizeQueue,
+            className,
+            targetClassName,
+        });
+        addClassName($box, [targetClassName]);
+        renderTargetInner === null || renderTargetInner === void 0 ? void 0 : renderTargetInner($box);
+        afterRender === null || afterRender === void 0 ? void 0 : afterRender({ $rootBox: $box, viewGroupSizeQueue, viewMaterialSize });
+    }
+}
+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;
+}
+function clearMaterialNestedBox($root) {
+    return destroyBoxs($root, { className: classNameMap.nestedBox });
+}
+export function resetMaterialNestedBox($root, opts) {
+    const { groupQueue } = opts;
+    if (Array.isArray(groupQueue) && groupQueue.length) {
+        resetBoxs($root, Object.assign(Object.assign({}, opts), { className: classNameMap.nestedBox, targetClassName: classNameMap.nestedTargetBox }));
+    }
+    else {
+        clearMaterialNestedBox($root);
+    }
+}
+export function clearMaterialHoverBox($root) {
+    return destroyBoxs($root, { className: classNameMap.hoverBox });
+}
+export function renderMaterialHoverBox($root, opts) {
+    clearMaterialHoverBox($root);
+    resetBoxs($root, Object.assign(Object.assign({}, opts), { className: classNameMap.hoverBox, targetClassName: classNameMap.hoverTargetBox }));
+}
+export function clearMaterialLockedBox($root) {
+    return destroyBoxs($root, { className: classNameMap.lockedBox });
+}
+export function renderMaterialLockedBox($root, opts) {
+    clearMaterialLockedBox($root);
+    generateBoxs($root, Object.assign(Object.assign({}, opts), { className: classNameMap.lockedBox, targetClassName: classNameMap.lockedTargetBox }));
+}
+function clearMaterialSelectedBox($root) {
+    return destroyBoxs($root, { className: classNameMap.selectedBox });
+}
+function renderSelectedBoxInnerHandlers($target) {
+    const $existHandlers = $target.querySelectorAll(`[${ATTR_HANDLER_TYPE}]`);
+    if ($existHandlers.length > 0) {
+        return;
+    }
+    const create = createHTMLElement;
+    const baseAttrs = {
+        [ATTR_VALID_WATCH]: 'true',
+    };
+    assembleHTMLElement($target, {}, [
+        create('div', Object.assign(Object.assign({ [ATTR_HANDLER_TYPE]: 'left' }, baseAttrs), { className: `${classNameMap.edgeHandler} ${classNameMap.edgeLeftHandler}` })),
+        create('div', Object.assign(Object.assign({ [ATTR_HANDLER_TYPE]: 'top' }, baseAttrs), { className: `${classNameMap.edgeHandler} ${classNameMap.edgeTopHandler}` })),
+        create('div', Object.assign(Object.assign({ [ATTR_HANDLER_TYPE]: 'right' }, baseAttrs), { className: `${classNameMap.edgeHandler} ${classNameMap.edgeRightHandler}` })),
+        create('div', Object.assign(Object.assign({ [ATTR_HANDLER_TYPE]: 'bottom' }, baseAttrs), { className: `${classNameMap.edgeHandler} ${classNameMap.edgeBottomHandler}` })),
+        create('div', Object.assign(Object.assign({ [ATTR_HANDLER_TYPE]: 'top-left' }, baseAttrs), { className: `${classNameMap.cornerHandler} ${classNameMap.cornerTopLeftHandler}` })),
+        create('div', Object.assign(Object.assign({ [ATTR_HANDLER_TYPE]: 'top-right' }, baseAttrs), { className: `${classNameMap.cornerHandler} ${classNameMap.cornerTopRightHandler}` })),
+        create('div', Object.assign(Object.assign({ [ATTR_HANDLER_TYPE]: 'bottom-left' }, baseAttrs), { className: `${classNameMap.cornerHandler} ${classNameMap.cornerBottomLeftHandler}` })),
+        create('div', Object.assign(Object.assign({ [ATTR_HANDLER_TYPE]: 'bottom-right' }, baseAttrs), { className: `${classNameMap.cornerHandler} ${classNameMap.cornerBottomRightHandler}` })),
+        create('div', Object.assign(Object.assign({ [ATTR_HANDLER_TYPE]: 'rotate' }, baseAttrs), { className: classNameMap.rotateHandler })),
+    ]);
+}
+export function resetMaterialSelectedBox($root, opts) {
+    const { material } = opts;
+    if (material) {
+        resetBoxs($root, Object.assign(Object.assign({}, opts), { className: classNameMap.selectedBox, targetClassName: classNameMap.selectedTargetBox, renderTargetInner: renderSelectedBoxInnerHandlers, destoryTargetInner: ($target) => ($target.innerHTML = ''), afterRender: ({ $rootBox, viewMaterialSize }) => {
+                if (viewMaterialSize && $rootBox) {
+                    const { width, height } = viewMaterialSize;
+                    const size = Math.min(width, height);
+                    if (size > cornerHandlerSize * 4) {
+                        removeClassName($rootBox, [classNameMap.hideHandler]);
+                    }
+                    else {
+                        addClassName($rootBox, [classNameMap.hideHandler]);
+                    }
+                }
+            } }));
+    }
+    else {
+        clearMaterialSelectedBox($root);
+    }
+}
+export function clearMaterialSelectionAreaBox($root) {
+    return destroyBoxs($root, { className: classNameMap.selectionAreaBox });
+}
+function getSelectionAreaBox($root) {
+    const $boxs = $root.getElementsByClassName(classNameMap.selectionAreaBox);
+    if ($boxs[0]) {
+        return $boxs[0];
+    }
+    const $box = createHTMLElement('div', { [ATTR_VALID_WATCH]: 'true', className: classNameMap.selectionAreaBox });
+    assembleHTMLElement($root, {}, [$box]);
+    return $box;
+}
+export function resetMaterialSelectionAreaBox($root, opts) {
+    if (!$root) {
+        return;
+    }
+    const { areaStart, areaEnd, selectedMaterials, viewScaleInfo } = opts;
+    let start = null;
+    let end = null;
+    let needCalcInView = false;
+    if (selectedMaterials.length > 1 || (selectedMaterials.length === 1 && areaStart && areaEnd)) {
+        const listSize = calcMaterialListSize(selectedMaterials);
+        const { x, y, width, height } = listSize;
+        start = { x, y };
+        end = {
+            x: x + width,
+            y: y + height,
+        };
+        needCalcInView = true;
+    }
+    else if (areaStart && areaEnd) {
+        start = Object.assign({}, areaStart);
+        end = Object.assign({}, areaEnd);
+    }
+    if (start && end) {
+        const $box = getSelectionAreaBox($root);
+        if (needCalcInView) {
+            start = calcViewPoint(start, { viewScaleInfo });
+            end = calcViewPoint(end, { viewScaleInfo });
+        }
+        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 {
+        clearMaterialSelectionAreaBox($root);
+    }
+}
+export function isPointInActiveGroup(e, opts) {
+    const { groupQueue, $root } = opts;
+    if (!groupQueue || !((groupQueue === null || groupQueue === void 0 ? void 0 : groupQueue.length) > 0) || !$root) {
+        return false;
+    }
+    const id = groupQueue[groupQueue.length - 1].id;
+    const $target = e.target;
+    if (typeof id === 'string' && id) {
+        if (($target === null || $target === void 0 ? void 0 : $target.getAttribute(ATTR_BOX_TYPE)) === BOX_GROUP && ($target === null || $target === void 0 ? void 0 : $target.getAttribute(ATTR_MATERIAL_ID)) === id) {
+            return true;
+        }
+        const $targetGroup = bubbleHTMLElement($target, $root, {
+            [ATTR_BOX_TYPE]: BOX_GROUP,
+        });
+        if (($targetGroup === null || $targetGroup === void 0 ? void 0 : $targetGroup.getAttribute(ATTR_BOX_TYPE)) === BOX_GROUP &&
+            ($targetGroup === null || $targetGroup === void 0 ? void 0 : $targetGroup.getAttribute(ATTR_MATERIAL_ID)) === id) {
+            return true;
+        }
+    }
+    return false;
+}

package/dist/esm/middlewares/selector/draw-base.d.ts

@@ -1,30 +1,18 @@
-import type { PointSize, ViewContext2D, ViewRectVertexes } from '@idraw/types';
+import type { Point, ViewContext2D, ViewRectVertexes } from '@idraw/types';
 export declare function drawVertexes(ctx: ViewContext2D, vertexes: ViewRectVertexes, opts: {
-    borderColor: string;
-    borderWidth: number;
+    stroke: string;
+    strokeWidth: number;
     background: string;
     lineDash: number[];
 }): void;
-export declare function drawLine(ctx: ViewContext2D, start: PointSize, end: PointSize, opts: {
-    borderColor: string;
-    borderWidth: number;
+export declare function drawLine(ctx: ViewContext2D, start: Point, end: Point, opts: {
+    stroke: string;
+    strokeWidth: number;
     lineDash: number[];
 }): void;
-export declare function drawCircleController(ctx: ViewContext2D, circleCenter: PointSize, opts: {
-    borderColor: string;
-    borderWidth: number;
-    background: string;
-    lineDash: number[];
-    size: number;
-}): void;
-export declare function drawCrossVertexes(ctx: ViewContext2D, vertexes: ViewRectVertexes, opts: {
-    borderColor: string;
-    borderWidth: number;
-    lineDash: number[];
-}): void;
-export declare function drawCrossByCenter(ctx: ViewContext2D, center: PointSize, opts: {
+export declare function drawCrossByCenter(ctx: ViewContext2D, center: Point, opts: {
     size: number;
-    borderColor: string;
-    borderWidth: number;
+    stroke: string;
+    strokeWidth: number;
     lineDash: number[];
 }): void;

package/dist/esm/middlewares/selector/draw-base.js

@@ -1,8 +1,8 @@
 export function drawVertexes(ctx, vertexes, opts) {
-    const { borderColor, borderWidth, background, lineDash } = opts;
+    const { stroke, strokeWidth, background, lineDash } = opts;
     ctx.setLineDash([]);
-    ctx.lineWidth = borderWidth;
-    ctx.strokeStyle = borderColor;
+    ctx.lineWidth = strokeWidth;
+    ctx.strokeStyle = stroke;
     ctx.fillStyle = background;
     ctx.setLineDash(lineDash);
     ctx.beginPath();
@@ -16,10 +16,10 @@ export function drawVertexes(ctx, vertexes, opts) {
     ctx.fill('nonzero');
 }
 export function drawLine(ctx, start, end, opts) {
-    const { borderColor, borderWidth, lineDash } = opts;
+    const { stroke, strokeWidth, lineDash } = opts;
     ctx.setLineDash([]);
-    ctx.lineWidth = borderWidth;
-    ctx.strokeStyle = borderColor;
+    ctx.lineWidth = strokeWidth;
+    ctx.strokeStyle = stroke;
     ctx.setLineDash(lineDash);
     ctx.beginPath();
     ctx.moveTo(start.x, start.y);
@@ -27,35 +27,11 @@ export function drawLine(ctx, start, end, opts) {
     ctx.closePath();
     ctx.stroke();
 }
-export function drawCircleController(ctx, circleCenter, opts) {
-    const { size, borderColor, borderWidth, background } = opts;
-    const center = circleCenter;
-    const r = size / 2;
-    const a = r;
-    const b = r;
-    if (a >= 0 && b >= 0) {
-        if (typeof borderWidth === 'number' && borderWidth > 0) {
-            const ba = borderWidth / 2 + a;
-            const bb = borderWidth / 2 + b;
-            ctx.beginPath();
-            ctx.strokeStyle = borderColor;
-            ctx.lineWidth = borderWidth;
-            ctx.circle(center.x, center.y, ba, bb, 0, 0, 2 * Math.PI);
-            ctx.closePath();
-            ctx.stroke();
-        }
-        ctx.beginPath();
-        ctx.fillStyle = background;
-        ctx.circle(center.x, center.y, a, b, 0, 0, 2 * Math.PI);
-        ctx.closePath();
-        ctx.fill('nonzero');
-    }
-}
-export function drawCrossVertexes(ctx, vertexes, opts) {
-    const { borderColor, borderWidth, lineDash } = opts;
+function drawCrossVertexes(ctx, vertexes, opts) {
+    const { stroke, strokeWidth, lineDash } = opts;
     ctx.setLineDash([]);
-    ctx.lineWidth = borderWidth;
-    ctx.strokeStyle = borderColor;
+    ctx.lineWidth = strokeWidth;
+    ctx.strokeStyle = stroke;
     ctx.setLineDash(lineDash);
     ctx.beginPath();
     ctx.moveTo(vertexes[0].x, vertexes[0].y);
@@ -69,7 +45,7 @@ export function drawCrossVertexes(ctx, vertexes, opts) {
     ctx.stroke();
 }
 export function drawCrossByCenter(ctx, center, opts) {
-    const { size, borderColor, borderWidth, lineDash } = opts;
+    const { size, stroke, strokeWidth, lineDash } = opts;
     const minX = center.x - size / 2;
     const maxX = center.x + size / 2;
     const minY = center.y - size / 2;
@@ -77,24 +53,24 @@ export function drawCrossByCenter(ctx, center, opts) {
     const vertexes = [
         {
             x: minX,
-            y: minY
+            y: minY,
         },
         {
             x: maxX,
-            y: minY
+            y: minY,
         },
         {
             x: maxX,
-            y: maxY
+            y: maxY,
         },
         {
             x: minX,
-            y: maxY
-        }
+            y: maxY,
+        },
     ];
     drawCrossVertexes(ctx, vertexes, {
-        borderColor,
-        borderWidth,
-        lineDash
+        stroke,
+        strokeWidth,
+        lineDash,
     });
 }

package/dist/esm/middlewares/selector/draw-reference.d.ts

@@ -1,7 +1,6 @@
-import type { ViewContext2D, PointSize } from '@idraw/types';
-import { MiddlewareSelectorStyle } from './types';
+import type { ViewContext2D, Point, MiddlewareSelectorStyles } from '@idraw/types';
 export declare function drawReferenceLines(ctx: ViewContext2D, opts: {
-    xLines?: Array<PointSize[]>;
-    yLines?: Array<PointSize[]>;
-    style: MiddlewareSelectorStyle;
+    xLines?: Array<Point[]>;
+    yLines?: Array<Point[]>;
+    styles: MiddlewareSelectorStyles;
 }): void;

package/dist/esm/middlewares/selector/draw-reference.js

@@ -1,11 +1,11 @@
 import { drawLine, drawCrossByCenter } from './draw-base';
 export function drawReferenceLines(ctx, opts) {
-    const { xLines, yLines, style } = opts;
-    const { referenceColor } = style;
+    const { xLines, yLines, styles } = opts;
+    const { referenceColor } = styles;
     const lineOpts = {
-        borderColor: referenceColor,
-        borderWidth: 1,
-        lineDash: []
+        stroke: referenceColor,
+        strokeWidth: 1,
+        lineDash: [],
     };
     const crossOpts = Object.assign(Object.assign({}, lineOpts), { size: 6 });
     if (xLines) {

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

@@ -1,9 +1,11 @@
 import type { CoreEventMap, MiddlewareSelectorConfig } from '@idraw/types';
 import type { Middleware, ActionType, DeepSelectorSharedStorage } from './types';
-import { keyActionType, keyResizeType, keyGroupQueue, keyHoverElement, keySelectedElementList } from './config';
+import { keyActionType, keyResizeType, keyGroupQueue, keyHoverMaterial, keySelectedMaterialList } from './static';
 import { MIDDLEWARE_INTERNAL_EVENT_SHOW_INFO_ANGLE } from '../info';
-export { keySelectedElementList, keyHoverElement, keyActionType, keyResizeType, keyGroupQueue };
+import { getMiddlewareSelectorStyles } from './styles';
+export { keySelectedMaterialList, keyHoverMaterial, keyActionType, keyResizeType, keyGroupQueue };
 export type { DeepSelectorSharedStorage, ActionType };
+export { getMiddlewareSelectorStyles };
 export declare const MiddlewareSelector: Middleware<DeepSelectorSharedStorage, CoreEventMap & {
     [MIDDLEWARE_INTERNAL_EVENT_SHOW_INFO_ANGLE]: {
         show: boolean;