@idraw/core 0.4.2 → 1.0.0-alpha.1

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

@@ -1,13 +1,13 @@
-import type { Data, Element, PointSize, ViewScaleInfo, ViewSizeInfo, ViewCalculator } from '@idraw/types';
-export declare function calcReferenceInfo(uuid: string, opts: {
+import type { Data, StrictMaterial, Point, ViewScaleInfo, ViewSizeInfo, ViewCalculator } from '@idraw/types';
+export declare function calcReferenceInfo(id: string, opts: {
     data: Data;
-    groupQueue: Element<'group'>[];
+    groupQueue: StrictMaterial<'group'>[];
     calculator: ViewCalculator;
     viewScaleInfo: ViewScaleInfo;
     viewSizeInfo: ViewSizeInfo;
 }): {
     offsetX: number | null;
     offsetY: number | null;
-    yLines: PointSize[][];
-    xLines: PointSize[][];
+    yLines: Point[][];
+    xLines: Point[][];
 } | null;

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

@@ -1,13 +1,13 @@
 import { is } from '@idraw/util';
 const unitSize = 2;
-function getViewBoxInfo(rectInfo) {
+function getViewBoxInfo(boundingBox) {
     const boxInfo = {
-        minX: rectInfo.topLeft.x,
-        minY: rectInfo.topLeft.y,
-        maxX: rectInfo.bottomRight.x,
-        maxY: rectInfo.bottomRight.y,
-        midX: rectInfo.center.x,
-        midY: rectInfo.center.y
+        minX: boundingBox.topLeft.x,
+        minY: boundingBox.topLeft.y,
+        maxX: boundingBox.bottomRight.x,
+        maxY: boundingBox.bottomRight.y,
+        midX: boundingBox.center.x,
+        midY: boundingBox.center.y,
     };
     return boxInfo;
 }
@@ -38,27 +38,33 @@ const getClosestNumInSortedKeys = (sortedKeys, target) => {
     if (right < 0) {
         return sortedKeys[left];
     }
-    return Math.abs(sortedKeys[right] - target) <= Math.abs(sortedKeys[left] - target) ? sortedKeys[right] : sortedKeys[left];
+    return Math.abs(sortedKeys[right] - target) <= Math.abs(sortedKeys[left] - target)
+        ? sortedKeys[right]
+        : sortedKeys[left];
 };
 const isEqualNum = (a, b) => Math.abs(a - b) < 0.00001;
-export function calcReferenceInfo(uuid, opts) {
-    var _a, _b;
+export function calcReferenceInfo(id, opts) {
+    var _a;
     const { data, groupQueue, calculator, viewScaleInfo, viewSizeInfo } = opts;
-    let targetElements = data.elements || [];
+    let targetMaterials = data.materials || [];
     if ((groupQueue === null || groupQueue === void 0 ? void 0 : groupQueue.length) > 0) {
-        targetElements = ((_b = (_a = groupQueue[groupQueue.length - 1]) === null || _a === void 0 ? void 0 : _a.detail) === null || _b === void 0 ? void 0 : _b.children) || [];
+        targetMaterials = ((_a = groupQueue[groupQueue.length - 1]) === null || _a === void 0 ? void 0 : _a.children) || [];
     }
-    const siblingViewRectInfoList = [];
-    targetElements.forEach((elem) => {
-        if (elem.uuid !== uuid) {
-            const info = calculator.calcViewRectInfoFromRange(elem.uuid, { checkVisible: true, viewScaleInfo, viewSizeInfo });
+    const siblingBoundingInfoList = [];
+    targetMaterials.forEach((mtrl) => {
+        if (mtrl.id !== id) {
+            const info = calculator.calcViewBoundingInfoFromRange(mtrl.id, {
+                checkVisible: true,
+                viewScaleInfo,
+                viewSizeInfo,
+            });
             if (info) {
-                siblingViewRectInfoList.push(info);
+                siblingBoundingInfoList.push(info);
             }
         }
     });
-    const targetRectInfo = calculator.calcViewRectInfoFromRange(uuid, { viewScaleInfo, viewSizeInfo });
-    if (!targetRectInfo) {
+    const targetBoundingBox = calculator.calcViewBoundingInfoFromRange(id, { viewScaleInfo, viewSizeInfo });
+    if (!targetBoundingBox) {
         return null;
     }
     const vTargetLineDotMap = {};
@@ -69,14 +75,14 @@ export function calcReferenceInfo(uuid, opts) {
     const hHelperLineDotMapList = [];
     let sortedRefXKeys = [];
     let sortedRefYKeys = [];
-    const targetBox = getViewBoxInfo(targetRectInfo);
+    const targetBox = getViewBoxInfo(targetBoundingBox);
     vTargetLineDotMap[targetBox.minX] = [targetBox.minY, targetBox.midY, targetBox.maxY];
     vTargetLineDotMap[targetBox.midX] = [targetBox.minY, targetBox.midY, targetBox.maxY];
     vTargetLineDotMap[targetBox.maxX] = [targetBox.minY, targetBox.midY, targetBox.maxY];
     hTargetLineDotMap[targetBox.minY] = [targetBox.minX, targetBox.midX, targetBox.maxX];
     hTargetLineDotMap[targetBox.midY] = [targetBox.minX, targetBox.midX, targetBox.maxX];
     hTargetLineDotMap[targetBox.maxY] = [targetBox.minX, targetBox.midX, targetBox.maxX];
-    siblingViewRectInfoList.forEach((info) => {
+    siblingBoundingInfoList.forEach((info) => {
         const box = getViewBoxInfo(info);
         if (!vRefLineDotMap[box.minX]) {
             vRefLineDotMap[box.minX] = [];
@@ -174,7 +180,7 @@ export function calcReferenceInfo(uuid, opts) {
         if (isEqualNum(offsetX, closestMinX - targetBox.minX)) {
             const vLine = {
                 x: closestMinX,
-                yList: []
+                yList: [],
             };
             vLine.yList.push(newTargetBox.minY);
             vLine.yList.push(newTargetBox.maxY);
@@ -184,7 +190,7 @@ export function calcReferenceInfo(uuid, opts) {
         if (isEqualNum(offsetX, closestMidX - targetBox.minX)) {
             const vLine = {
                 x: closestMidX,
-                yList: []
+                yList: [],
             };
             vLine.yList.push(newTargetBox.minY);
             vLine.yList.push(newTargetBox.maxY);
@@ -194,7 +200,7 @@ export function calcReferenceInfo(uuid, opts) {
         if (isEqualNum(offsetX, closestMaxX - targetBox.minX)) {
             const vLine = {
                 x: closestMaxX,
-                yList: []
+                yList: [],
             };
             vLine.yList.push(newTargetBox.minY);
             vLine.yList.push(newTargetBox.maxY);
@@ -206,7 +212,7 @@ export function calcReferenceInfo(uuid, opts) {
         if (isEqualNum(offsetY, closestMinY - targetBox.minY)) {
             const hLine = {
                 y: closestMinY,
-                xList: []
+                xList: [],
             };
             hLine.xList.push(newTargetBox.minX);
             hLine.xList.push(newTargetBox.maxX);
@@ -216,7 +222,7 @@ export function calcReferenceInfo(uuid, opts) {
         if (isEqualNum(offsetY, closestMidY - targetBox.midY)) {
             const hLine = {
                 y: closestMidY,
-                xList: []
+                xList: [],
             };
             hLine.xList.push(newTargetBox.minX);
             hLine.xList.push(newTargetBox.maxX);
@@ -226,7 +232,7 @@ export function calcReferenceInfo(uuid, opts) {
         if (isEqualNum(offsetY, closestMaxY - targetBox.maxY)) {
             const hLine = {
                 y: closestMaxY,
-                xList: []
+                xList: [],
             };
             hLine.xList.push(newTargetBox.minX);
             hLine.xList.push(newTargetBox.maxX);
@@ -241,7 +247,7 @@ export function calcReferenceInfo(uuid, opts) {
             item.yList.forEach((y) => {
                 yLines[i].push({
                     x: item.x,
-                    y
+                    y,
                 });
             });
         });
@@ -253,7 +259,7 @@ export function calcReferenceInfo(uuid, opts) {
             item.xList.forEach((x) => {
                 xLines[i].push({
                     x,
-                    y: item.y
+                    y: item.y,
                 });
             });
         });
@@ -262,6 +268,6 @@ export function calcReferenceInfo(uuid, opts) {
         offsetX,
         offsetY,
         yLines,
-        xLines
+        xLines,
     };
 }

package/dist/esm/middlewares/selector/render-frame.d.ts

@@ -0,0 +1,11 @@
+import type { BoardViewerFrameSnapshot, BoardMiddlewareOptions, MiddlewareSelectorStyles } from '@idraw/types';
+import type { ActionType, DeepSelectorSharedStorage } from './types';
+import { keyActionType, keyResizeType, keyGroupQueue, keyHoverMaterial, keySelectedMaterialList } from './static';
+export { keySelectedMaterialList, keyHoverMaterial, keyActionType, keyResizeType, keyGroupQueue };
+export type { DeepSelectorSharedStorage, ActionType };
+export type RenderFrameOptions = Pick<BoardMiddlewareOptions<DeepSelectorSharedStorage>, 'sharer' | 'calculator' | 'boardContent'> & {
+    snapshot: BoardViewerFrameSnapshot<DeepSelectorSharedStorage>;
+    $root: HTMLDivElement | null;
+    styles: MiddlewareSelectorStyles;
+};
+export declare function renderFrame({ $root, styles, snapshot, sharer, calculator, boardContent }: RenderFrameOptions): void;

package/dist/esm/middlewares/selector/render-frame.js

@@ -0,0 +1,107 @@
+import { drawReferenceLines } from './draw-reference';
+import { calcSelectedMaterialsArea } from './util';
+import { keyActionType, keyResizeType, keyAreaStart, keyAreaEnd, keyGroupQueue, keyHoverMaterial, keySelectedMaterialList, keyEnableSnapToGrid, } from './static';
+import { calcReferenceInfo } from './reference';
+import { renderMaterialHoverBox, clearMaterialHoverBox, renderMaterialLockedBox, clearMaterialLockedBox, resetMaterialNestedBox, resetMaterialSelectedBox, resetMaterialSelectionAreaBox, } from './dom';
+export { keySelectedMaterialList, keyHoverMaterial, keyActionType, keyResizeType, keyGroupQueue };
+export function renderFrame({ $root, styles, snapshot, sharer, calculator, boardContent }) {
+    var _a, _b;
+    const { activeStore, sharedStore } = snapshot;
+    const { overlayContext } = boardContent;
+    const { scale, offsetLeft, offsetTop, offsetRight, offsetBottom, width, height, contextHeight, contextWidth, devicePixelRatio, } = activeStore;
+    const viewScaleInfo = { scale, offsetLeft, offsetTop, offsetRight, offsetBottom };
+    const viewSizeInfo = { width, height, contextHeight, contextWidth, devicePixelRatio };
+    const selectedMaterials = sharedStore[keySelectedMaterialList];
+    const mtrl = selectedMaterials[0];
+    const hoverMaterial = sharedStore[keyHoverMaterial];
+    const actionType = sharedStore[keyActionType];
+    const areaStart = sharedStore[keyAreaStart];
+    const areaEnd = sharedStore[keyAreaEnd];
+    const groupQueue = sharedStore[keyGroupQueue];
+    const enableSnapToGrid = sharedStore[keyEnableSnapToGrid];
+    const isHoverLocked = !!((_a = hoverMaterial === null || hoverMaterial === void 0 ? void 0 : hoverMaterial.operations) === null || _a === void 0 ? void 0 : _a.locked);
+    const helperOpts = {
+        material: null,
+        groupQueue: groupQueue || [],
+        viewScaleInfo,
+        viewSizeInfo,
+        calculator,
+    };
+    resetMaterialNestedBox($root, helperOpts);
+    clearMaterialHoverBox($root);
+    clearMaterialLockedBox($root);
+    if (hoverMaterial && (hoverMaterial === null || hoverMaterial === void 0 ? void 0 : hoverMaterial.id) !== ((_b = selectedMaterials[0]) === null || _b === void 0 ? void 0 : _b.id)) {
+        helperOpts.material = hoverMaterial;
+        if (isHoverLocked) {
+            renderMaterialLockedBox($root, helperOpts);
+        }
+        else {
+            renderMaterialHoverBox($root, helperOpts);
+        }
+    }
+    resetMaterialSelectedBox($root, Object.assign(Object.assign({}, helperOpts), { material: selectedMaterials.length === 1 ? selectedMaterials[0] : null }));
+    resetMaterialSelectionAreaBox($root, Object.assign(Object.assign({}, helperOpts), { areaStart,
+        areaEnd,
+        selectedMaterials }));
+    if ((groupQueue === null || groupQueue === void 0 ? void 0 : groupQueue.length) > 0) {
+        if (mtrl && ['select', 'drag', 'resize'].includes(actionType)) {
+            if (actionType === 'drag') {
+                if (enableSnapToGrid === true) {
+                    const referenceInfo = calcReferenceInfo(mtrl.id, {
+                        calculator,
+                        data: activeStore.data,
+                        groupQueue,
+                        viewScaleInfo,
+                        viewSizeInfo,
+                    });
+                    if (referenceInfo) {
+                        const { offsetX, offsetY, xLines, yLines } = referenceInfo;
+                        if (offsetX === 0 || offsetY === 0) {
+                            drawReferenceLines(overlayContext, {
+                                xLines,
+                                yLines,
+                                styles,
+                            });
+                        }
+                    }
+                }
+            }
+        }
+    }
+    else {
+        if (mtrl && ['select', 'drag', 'resize'].includes(actionType)) {
+            if (actionType === 'drag') {
+                if (enableSnapToGrid === true) {
+                    const referenceInfo = calcReferenceInfo(mtrl.id, {
+                        calculator,
+                        data: activeStore.data,
+                        groupQueue,
+                        viewScaleInfo,
+                        viewSizeInfo,
+                    });
+                    if (referenceInfo) {
+                        const { offsetX, offsetY, xLines, yLines } = referenceInfo;
+                        if (offsetX === 0 || offsetY === 0) {
+                            drawReferenceLines(overlayContext, {
+                                xLines,
+                                yLines,
+                                styles,
+                            });
+                        }
+                    }
+                }
+            }
+        }
+        else if (actionType === 'area' && areaStart && areaEnd) {
+        }
+        else if (['drag-list', 'drag-list-end'].includes(actionType)) {
+            const listAreaSize = calcSelectedMaterialsArea(sharer.getSharedStorage(keySelectedMaterialList), {
+                viewScaleInfo: sharer.getActiveViewScaleInfo(),
+                viewSizeInfo: sharer.getActiveViewSizeInfo(),
+                calculator,
+            });
+            if (listAreaSize) {
+            }
+        }
+    }
+}

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

@@ -0,0 +1,7 @@
+import type { Material } from '@idraw/types';
+export declare const dragAndResizeMaterial: (mtrl: Material, opts: {
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+}) => void;

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

@@ -0,0 +1,27 @@
+import { scalePathCommands } from '@idraw/util';
+export const dragAndResizeMaterial = (mtrl, opts) => {
+    const { x, y, width, height } = opts;
+    const prevWidth = mtrl.width;
+    const prevHeight = mtrl.height;
+    mtrl.x = x;
+    mtrl.y = y;
+    mtrl.width = width;
+    mtrl.height = height;
+    if (mtrl.type === 'circle') {
+        mtrl.cx = x + width / 2;
+        mtrl.cy = y + height / 2;
+        mtrl.r = Math.min(width, height) / 2;
+    }
+    else if (mtrl.type === 'ellipse') {
+        mtrl.cx = x + width / 2;
+        mtrl.cy = y + height / 2;
+        mtrl.rx = width / 2;
+        mtrl.ry = height / 2;
+    }
+    else if (mtrl.type === 'path') {
+        const scaleW = width / prevWidth;
+        const scaleH = height / prevHeight;
+        const svgMtrl = mtrl;
+        svgMtrl.commands = scalePathCommands(svgMtrl.commands, scaleW, scaleH);
+    }
+};

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

@@ -0,0 +1,67 @@
+import type { MiddlewareSelectorStyles, StoreSharer } from '@idraw/types';
+import type { DeepSelectorSharedStorage } from './types';
+export declare const key = "SELECTOR";
+export declare const prefix = "idraw-middleware-selector";
+export declare const getRootClassName: () => string;
+export declare const ATTR_BOX_TYPE = "data-idraw-box-type";
+export declare const ATTR_MATERIAL_ID = "data-idraw-material-id";
+export declare const ATTR_HANDLER_TYPE = "data-idraw-handler-type";
+export declare const BOX_GROUP = "box-group";
+export declare const BOX_TARGET = "box-material";
+export declare const classNameMap: {
+    materialBox: string;
+    groupBox: string;
+    nestedBox: string;
+    nestedTargetBox: string;
+    hoverBox: string;
+    hoverTargetBox: string;
+    lockedBox: string;
+    lockedTargetBox: string;
+    selectedBox: string;
+    selectedTargetBox: string;
+    hideHandler: string;
+    edgeHandler: string;
+    edgeTopHandler: string;
+    edgeRightHandler: string;
+    edgeBottomHandler: string;
+    edgeLeftHandler: string;
+    cornerHandler: string;
+    cornerTopLeftHandler: string;
+    cornerTopRightHandler: string;
+    cornerBottomLeftHandler: string;
+    cornerBottomRightHandler: string;
+    rotateHandler: string;
+    selectionAreaBox: string;
+};
+export declare const keyPrevPoint: unique symbol;
+export declare const keyPointStartMaterialSizeList: unique symbol;
+export declare const keyMoveOriginalStartPoint: unique symbol;
+export declare const keyMoveOriginalStartMaterialSize: unique symbol;
+export declare const keyInBusyMode: unique symbol;
+export declare const keyHasChangedData: unique symbol;
+export declare const keyStartResizeGroupRecord: unique symbol;
+export declare const keyEndResizeGroupRecord: unique symbol;
+export declare const keyActionType: unique symbol;
+export declare const keyResizeType: unique symbol;
+export declare const keyAreaStart: unique symbol;
+export declare const keyAreaEnd: unique symbol;
+export declare const keyHoverMaterial: unique symbol;
+export declare const keySelectedMaterialList: unique symbol;
+export declare const keySelectedMaterialListVertexes: unique symbol;
+export declare const keySelectedMaterialPosition: unique symbol;
+export declare const keyGroupQueue: unique symbol;
+export declare const keyIsMoving: unique symbol;
+export declare const keyEnableSelectInGroup: unique symbol;
+export declare const keyEnableSnapToGrid: unique symbol;
+export declare const selectedBoxBorderWidth = 1.5;
+export declare const selectedNestedBoxBorderWidth = 2;
+export declare const hoverBoxBorderWidth = 1;
+export declare const lockedBoxBorderWidth = 2;
+export declare const cornerHandlerSize = 10;
+export declare const cornerHandlerBorderWidth = 1.5;
+export declare const edgeHandlerSize = 10;
+export declare const selectionAreaBorderWidth = 1;
+export declare const rotateHandlerSize = 20;
+export declare const defaultStyle: MiddlewareSelectorStyles;
+export declare const getSvgRotate: (currentColor: string) => string;
+export declare const clearStorage: (sharer: StoreSharer<DeepSelectorSharedStorage>) => void;

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

@@ -0,0 +1,92 @@
+import { createId } from '@idraw/util';
+export const key = 'SELECTOR';
+export const prefix = `idraw-middleware-selector`;
+export const getRootClassName = () => `${prefix}-${createId()}`;
+export const ATTR_BOX_TYPE = 'data-idraw-box-type';
+export const ATTR_MATERIAL_ID = 'data-idraw-material-id';
+export const ATTR_HANDLER_TYPE = 'data-idraw-handler-type';
+export const BOX_GROUP = 'box-group';
+export const BOX_TARGET = 'box-material';
+export const classNameMap = {
+    materialBox: `${prefix}-materialBox`,
+    groupBox: `${prefix}-groupBox`,
+    nestedBox: `${prefix}-nestedBox`,
+    nestedTargetBox: `${prefix}-nestedTargetBox`,
+    hoverBox: `${prefix}-hoverBox`,
+    hoverTargetBox: `${prefix}-hoverTargetBox`,
+    lockedBox: `${prefix}-lockedBox`,
+    lockedTargetBox: `${prefix}-lockedTargetBox`,
+    selectedBox: `${prefix}-selectedBox`,
+    selectedTargetBox: `${prefix}-selectedTargetBox`,
+    hideHandler: `${prefix}-hideHandler`,
+    edgeHandler: `${prefix}-edgeHandler`,
+    edgeTopHandler: `${prefix}-edgeTopHandler`,
+    edgeRightHandler: `${prefix}-edgeRightandler`,
+    edgeBottomHandler: `${prefix}-edgeBottomHandler`,
+    edgeLeftHandler: `${prefix}-edgeLeftHandler`,
+    cornerHandler: `${prefix}-cornerHandler`,
+    cornerTopLeftHandler: `${prefix}-cornerTopLeftHandler`,
+    cornerTopRightHandler: `${prefix}-cornerTopRightHandler`,
+    cornerBottomLeftHandler: `${prefix}-cornerBottomLeftHandler`,
+    cornerBottomRightHandler: `${prefix}-cornerBottomRightHandler`,
+    rotateHandler: `${prefix}-rotateHandler`,
+    selectionAreaBox: `${prefix}-selectionAreaBox`,
+};
+export const keyPrevPoint = Symbol(`${key}_prevPoint`);
+export const keyPointStartMaterialSizeList = Symbol(`${key}_pointStartMaterialSizeList`);
+export const keyMoveOriginalStartPoint = Symbol(`${key}_moveOriginalStartPoint`);
+export const keyMoveOriginalStartMaterialSize = Symbol(`${key}_moveOriginalStartMaterialSize`);
+export const keyInBusyMode = Symbol(`${key}_inBusyMode`);
+export const keyHasChangedData = Symbol(`${key}_hasChangedData`);
+export const keyStartResizeGroupRecord = Symbol(`${key}_startResizeGroupRecord`);
+export const keyEndResizeGroupRecord = Symbol(`${key}_endResizeGroupRecord`);
+export const keyActionType = Symbol(`${key}_actionType`);
+export const keyResizeType = Symbol(`${key}_resizeType`);
+export const keyAreaStart = Symbol(`${key}_areaStart`);
+export const keyAreaEnd = Symbol(`${key}_areaEnd`);
+export const keyHoverMaterial = Symbol(`${key}_hoverMaterial`);
+export const keySelectedMaterialList = Symbol(`${key}_selectedMaterialList`);
+export const keySelectedMaterialListVertexes = Symbol(`${key}_selectedMaterialListVertexes`);
+export const keySelectedMaterialPosition = Symbol(`${key}_selectedMaterialPosition`);
+export const keyGroupQueue = Symbol(`${key}_groupQueue`);
+export const keyIsMoving = Symbol(`${key}_isMoving`);
+export const keyEnableSelectInGroup = Symbol(`${key}_enableSelectInGroup`);
+export const keyEnableSnapToGrid = Symbol(`${key}_enableSnapToGrid`);
+export const selectedBoxBorderWidth = 1.5;
+export const selectedNestedBoxBorderWidth = 2;
+export const hoverBoxBorderWidth = 1;
+export const lockedBoxBorderWidth = 2;
+export const cornerHandlerSize = 10;
+export const cornerHandlerBorderWidth = 1.5;
+export const edgeHandlerSize = 10;
+export const selectionAreaBorderWidth = 1;
+export const rotateHandlerSize = 20;
+export const defaultStyle = {
+    zIndex: 1,
+    activeColor: '#1973ba',
+    handlerBorderColor: '#1973ba',
+    handlerBackground: '#ffffff',
+    handlerHoverBackground: '#aad4f6',
+    handlerActiveBackground: '#63b8f8',
+    selectionAreaBorderColor: '#1973ba',
+    selectionAreaBackground: '#1973ba3f',
+    lockedColor: '#5b5959b5',
+    referenceColor: '#f7276e',
+};
+export const getSvgRotate = (currentColor) => `<svg viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200" fill="${currentColor}" >
+   <path d="M512 0c282.8 0 512 229.2 512 512s-229.2 512 -512 512S0 794.8 0 512 229.2 0 512 0zm309.8 253.8c0 -10.5 -6.5 -19.8 -15.7 -23.8 -9.7 -4 -21 -2 -28.2 5.6l-52.5 52c-56.9 -53.7 -133.9 -85.5 -213.4 -85.5 -170.7 0 -309.8 139.2 -309.8 309.8 0 170.6 139.2 309.8 309.8 309.8 92.4 0 179.5 -40.8 238.4 -111.8 4 -5.2 4 -12.9 -0.8 -17.3L694.3 637c-2.8 -2.4 -6.5 -3.6 -10.1 -3.6 -3.6 0.4 -7.3 2 -9.3 4.8 -39.5 51.2 -98.8 80.3 -163 80.3 -113.8 0 -206.5 -92.8 -206.5 -206.5 0 -113.8 92.8 -206.5 206.5 -206.5 52.8 0 102.9 20.2 140.8 55.3L597 416.5c-7.7 7.3 -9.7 18.6 -5.6 27.9 4 9.7 13.3 16.1 23.8 16.1H796c14.1 0 25.8 -11.7 25.8 -25.8V253.8z" />
+</svg>`;
+export const clearStorage = (sharer) => {
+    sharer.setSharedStorage(keyStartResizeGroupRecord, null);
+    sharer.setSharedStorage(keyEndResizeGroupRecord, null);
+    sharer.setSharedStorage(keyActionType, null);
+    sharer.setSharedStorage(keyResizeType, null);
+    sharer.setSharedStorage(keyAreaStart, null);
+    sharer.setSharedStorage(keyAreaEnd, null);
+    sharer.setSharedStorage(keyGroupQueue, []);
+    sharer.setSharedStorage(keyHoverMaterial, null);
+    sharer.setSharedStorage(keySelectedMaterialList, []);
+    sharer.setSharedStorage(keySelectedMaterialListVertexes, null);
+    sharer.setSharedStorage(keySelectedMaterialPosition, []);
+    sharer.setSharedStorage(keyIsMoving, null);
+};

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

@@ -0,0 +1,4 @@
+import type { MiddlewareSelectorStyles, MiddlewareSelectorConfig } from '@idraw/types';
+export declare function initStyles(rootClassName: string, styles: MiddlewareSelectorStyles): void;
+export declare function destroyStyles(rootClassName: string): void;
+export declare function getMiddlewareSelectorStyles<C = MiddlewareSelectorConfig, S = MiddlewareSelectorStyles>(config: C): S;

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

@@ -0,0 +1,153 @@
+import { injectStyles, removeStyles, getMiddlewareValidStyles } from '@idraw/util';
+import { classNameMap, getSvgRotate, selectedBoxBorderWidth, selectedNestedBoxBorderWidth, hoverBoxBorderWidth, lockedBoxBorderWidth, edgeHandlerSize, cornerHandlerSize, cornerHandlerBorderWidth, selectionAreaBorderWidth, rotateHandlerSize, } from './static';
+export function initStyles(rootClassName, styles) {
+    const cls = (str) => `.${str}`;
+    const stylesProps = {
+        display: 'flex',
+        position: 'absolute',
+        zIndex: styles.zIndex,
+        top: 0,
+        left: 0,
+        right: 0,
+        bottom: 0,
+        overflow: 'hidden',
+        [cls(classNameMap.hoverTargetBox)]: {
+            position: 'absolute',
+            outline: `${hoverBoxBorderWidth}px solid ${styles.activeColor}`,
+        },
+        [cls(classNameMap.nestedBox)]: {
+            position: 'absolute',
+            [`&${cls(classNameMap.groupBox)}`]: {
+                outline: `${selectedNestedBoxBorderWidth}px dashed ${styles.activeColor}`,
+            },
+            [cls(classNameMap.groupBox)]: {
+                outline: `${selectedNestedBoxBorderWidth}px dashed ${styles.activeColor}`,
+            },
+        },
+        [cls(classNameMap.lockedTargetBox)]: {
+            position: 'absolute',
+            outline: `${lockedBoxBorderWidth}px solid ${styles.lockedColor}`,
+        },
+        [cls(classNameMap.selectedBox)]: {
+            position: 'absolute',
+            [`&${cls(classNameMap.hideHandler)}`]: {
+                [cls(classNameMap.cornerHandler)]: {
+                    display: 'none',
+                },
+                [cls(classNameMap.edgeHandler)]: {
+                    display: 'none',
+                },
+                [cls(classNameMap.rotateHandler)]: {
+                    display: 'none',
+                },
+            },
+        },
+        [cls(classNameMap.selectedTargetBox)]: {
+            position: 'absolute',
+            outline: `${selectedBoxBorderWidth}px solid ${styles.handlerBorderColor}`,
+            [cls(classNameMap.cornerHandler)]: {
+                position: 'absolute',
+                outline: `${cornerHandlerBorderWidth}px solid ${styles.handlerBorderColor}`,
+                background: styles.handlerBackground,
+                width: `${cornerHandlerSize}px`,
+                height: `${cornerHandlerSize}px`,
+                ['&:hover']: {
+                    background: styles.handlerHoverBackground,
+                },
+                ['&:active']: {
+                    background: styles.handlerActiveBackground,
+                },
+                [`&${cls(classNameMap.cornerTopLeftHandler)}`]: {
+                    top: `${-cornerHandlerSize / 2}px`,
+                    left: `${-cornerHandlerSize / 2}px`,
+                },
+                [`&${cls(classNameMap.cornerTopRightHandler)}`]: {
+                    top: `${-cornerHandlerSize / 2}px`,
+                    right: `${-cornerHandlerSize / 2}px`,
+                },
+                [`&${cls(classNameMap.cornerBottomLeftHandler)}`]: {
+                    bottom: `${-cornerHandlerSize / 2}px`,
+                    left: `${-cornerHandlerSize / 2}px`,
+                },
+                [`&${cls(classNameMap.cornerBottomRightHandler)}`]: {
+                    bottom: `${-cornerHandlerSize / 2}px`,
+                    right: `${-cornerHandlerSize / 2}px`,
+                },
+            },
+            [cls(classNameMap.rotateHandler)]: {
+                position: 'absolute',
+                top: -40,
+                left: `50%`,
+                transform: `translateX(-50%)`,
+                width: rotateHandlerSize,
+                height: rotateHandlerSize,
+                background: '#FFFFFF',
+                borderRadius: `${rotateHandlerSize / 2}px`,
+                ['&::after']: {
+                    display: 'inline-block',
+                    content: '""',
+                    position: 'absolute',
+                    top: 0,
+                    bottom: 0,
+                    left: 0,
+                    right: 0,
+                    backgroundImage: `url(data:image/svg+xml,${encodeURIComponent(getSvgRotate(styles.activeColor))})`,
+                    backgroundPosition: 'center',
+                    backgroundSize: `${rotateHandlerSize}px`,
+                },
+            },
+            [cls(classNameMap.edgeHandler)]: {
+                position: 'absolute',
+                background: 'transparent',
+                [`&${cls(classNameMap.edgeLeftHandler)}`]: {
+                    width: `${edgeHandlerSize}px`,
+                    top: `${edgeHandlerSize / 2}px`,
+                    left: `${-edgeHandlerSize / 2}px`,
+                    bottom: `${edgeHandlerSize / 2}px`,
+                },
+                [`&${cls(classNameMap.edgeRightHandler)}`]: {
+                    width: `${edgeHandlerSize}px`,
+                    top: `${edgeHandlerSize / 2}px`,
+                    right: `${-edgeHandlerSize / 2}px`,
+                    bottom: `${edgeHandlerSize / 2}px`,
+                },
+                [`&${cls(classNameMap.edgeTopHandler)}`]: {
+                    height: `${edgeHandlerSize}px`,
+                    top: `${-edgeHandlerSize / 2}px`,
+                    left: `${edgeHandlerSize / 2}px`,
+                    right: `${edgeHandlerSize / 2}px`,
+                },
+                [`&${cls(classNameMap.edgeBottomHandler)}`]: {
+                    height: `${edgeHandlerSize}px`,
+                    bottom: `${-edgeHandlerSize / 2}px`,
+                    left: `${edgeHandlerSize / 2}px`,
+                    right: `${edgeHandlerSize / 2}px`,
+                },
+            },
+        },
+        [cls(classNameMap.selectionAreaBox)]: {
+            position: 'absolute',
+            outline: `${selectionAreaBorderWidth}px solid ${styles.selectionAreaBorderColor}`,
+            background: styles.selectionAreaBackground,
+        },
+    };
+    injectStyles({ styles: stylesProps, rootClassName, type: 'element' });
+}
+export function destroyStyles(rootClassName) {
+    removeStyles({ rootClassName, type: 'element' });
+}
+export function getMiddlewareSelectorStyles(config) {
+    const styles = getMiddlewareValidStyles(config, [
+        'zIndex',
+        'activeColor',
+        'handlerBorderColor',
+        'handlerBackground',
+        'handlerHoverBackground',
+        'handlerActiveBackground',
+        'selectionAreaBackground',
+        'selectionAreaBorderColor',
+        'lockedColor',
+        'referenceColor',
+    ]);
+    return styles;
+}