@idraw/core 0.4.0-beta.30 → 0.4.0-beta.31

package/dist/esm/middleware/selector/config.js

@@ -23,11 +23,17 @@ export const keyDebugEnd0 = Symbol(`${key}_debug_end0`);
 export const selectWrapperBorderWidth = 2;
 export const resizeControllerBorderWidth = 4;
 export const areaBorderWidth = 1;
-export const wrapperColor = '#1973ba';
-export const lockColor = '#5b5959b5';
 export const controllerSize = 10;
-export const auxiliaryColor = '#f7276e';
-export const referenceColor = '#f7276e';
+const activeColor = '#1973ba';
+const activeAreaColor = '#1976d21c';
+const lockedColor = '#5b5959b5';
+const referenceColor = '#f7276e';
+export const defaultStyle = {
+    activeColor,
+    activeAreaColor,
+    lockedColor,
+    referenceColor
+};
 export const middlewareEventSelect = '@middleware/select';
 export const middlewareEventSelectClear = '@middleware/select-clear';
 export const middlewareEventSelectInGroup = '@middleware/select-in-group';

package/dist/esm/middleware/selector/draw-auxiliary.d.ts

@@ -1,7 +1 @@
-import type { ViewContext2D, Element, ViewScaleInfo, ViewSizeInfo, ViewCalculator } from '@idraw/types';
-export declare function drawAuxiliaryExperimentBox(ctx: ViewContext2D, opts: {
-    calculator: ViewCalculator;
-    element: Element | null;
-    viewScaleInfo: ViewScaleInfo;
-    viewSizeInfo: ViewSizeInfo;
-}): void;
+export {};

package/dist/esm/middleware/selector/draw-auxiliary.js

@@ -1,5 +1,3 @@
-import { auxiliaryColor } from './config';
-import { drawLine, drawCrossByCenter } from './draw-base';
 function getViewBoxInfo(rectInfo) {
     const boxInfo = {
         minX: rectInfo.topLeft.x,
@@ -11,36 +9,4 @@ function getViewBoxInfo(rectInfo) {
     };
     return boxInfo;
 }
-export function drawAuxiliaryExperimentBox(ctx, opts) {
-    const { element, viewScaleInfo, viewSizeInfo, calculator } = opts;
-    if (!element) {
-        return;
-    }
-    const viewRectInfo = calculator.calcViewRectInfoFromRange(element.uuid, { viewScaleInfo, viewSizeInfo });
-    if (!viewRectInfo) {
-        return;
-    }
-    const lineOpts = {
-        borderColor: auxiliaryColor,
-        borderWidth: 1,
-        lineDash: []
-    };
-    const boxInfo = getViewBoxInfo(viewRectInfo);
-    const { width, height } = viewSizeInfo;
-    drawLine(ctx, { x: boxInfo.minX, y: 0 }, { x: boxInfo.minX, y: height }, lineOpts);
-    drawLine(ctx, { x: boxInfo.midX, y: 0 }, { x: boxInfo.midX, y: height }, lineOpts);
-    drawLine(ctx, { x: boxInfo.maxX, y: 0 }, { x: boxInfo.maxX, y: height }, lineOpts);
-    drawLine(ctx, { x: 0, y: boxInfo.minY }, { x: width, y: boxInfo.minY }, lineOpts);
-    drawLine(ctx, { x: 0, y: boxInfo.midY }, { x: width, y: boxInfo.midY }, lineOpts);
-    drawLine(ctx, { x: 0, y: boxInfo.maxY }, { x: width, y: boxInfo.maxY }, lineOpts);
-    const crossOpts = Object.assign(Object.assign({}, lineOpts), { size: 6 });
-    drawCrossByCenter(ctx, viewRectInfo.center, crossOpts);
-    drawCrossByCenter(ctx, viewRectInfo.topLeft, crossOpts);
-    drawCrossByCenter(ctx, viewRectInfo.topRight, crossOpts);
-    drawCrossByCenter(ctx, viewRectInfo.bottomLeft, crossOpts);
-    drawCrossByCenter(ctx, viewRectInfo.bottomRight, crossOpts);
-    drawCrossByCenter(ctx, viewRectInfo.top, crossOpts);
-    drawCrossByCenter(ctx, viewRectInfo.right, crossOpts);
-    drawCrossByCenter(ctx, viewRectInfo.bottom, crossOpts);
-    drawCrossByCenter(ctx, viewRectInfo.left, crossOpts);
-}
+export {};

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

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

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

@@ -1,7 +1,7 @@
-import { referenceColor } from './config';
 import { drawLine, drawCrossByCenter } from './draw-base';
 export function drawReferenceLines(ctx, opts) {
-    const { xLines, yLines } = opts;
+    const { xLines, yLines, style } = opts;
+    const { referenceColor } = style;
     const lineOpts = {
         borderColor: referenceColor,
         borderWidth: 1,

package/dist/esm/middleware/selector/draw-wrapper.d.ts

@@ -1,13 +1,15 @@
 import type { Element, ElementType, PointSize, RendererDrawElementOptions, ViewContext2D, ViewRectVertexes, ViewScaleInfo, ViewSizeInfo, ElementSizeController, ViewCalculator } from '@idraw/types';
-import type { AreaSize } from './types';
+import type { AreaSize, MiddlewareSelectorStyle } from './types';
 export declare function drawHoverVertexesWrapper(ctx: ViewContext2D, vertexes: ViewRectVertexes | null, opts: {
     viewScaleInfo: ViewScaleInfo;
     viewSizeInfo: ViewSizeInfo;
+    style: MiddlewareSelectorStyle;
 }): void;
 export declare function drawLockVertexesWrapper(ctx: ViewContext2D, vertexes: ViewRectVertexes | null, opts: {
     viewScaleInfo: ViewScaleInfo;
     viewSizeInfo: ViewSizeInfo;
     controller?: ElementSizeController | null;
+    style: MiddlewareSelectorStyle;
 }): void;
 export declare function drawSelectedElementControllersVertexes(ctx: ViewContext2D, controller: ElementSizeController | null, opts: {
     hideControllers: boolean;
@@ -15,16 +17,20 @@ export declare function drawSelectedElementControllersVertexes(ctx: ViewContext2
     viewSizeInfo: ViewSizeInfo;
     element: Element | null;
     calculator: ViewCalculator;
+    style: MiddlewareSelectorStyle;
 }): void;
 export declare function drawElementListShadows(ctx: ViewContext2D, elements: Element<ElementType>[], opts?: Omit<RendererDrawElementOptions, 'loader'>): void;
 export declare function drawArea(ctx: ViewContext2D, opts: {
     start: PointSize;
     end: PointSize;
+    style: MiddlewareSelectorStyle;
 }): void;
 export declare function drawListArea(ctx: ViewContext2D, opts: {
     areaSize: AreaSize;
+    style: MiddlewareSelectorStyle;
 }): void;
 export declare function drawGroupQueueVertexesWrappers(ctx: ViewContext2D, vertexesList: ViewRectVertexes[], opts: {
     viewScaleInfo: ViewScaleInfo;
     viewSizeInfo: ViewSizeInfo;
+    style: MiddlewareSelectorStyle;
 }): void;

package/dist/esm/middleware/selector/draw-wrapper.js

@@ -1,23 +1,27 @@
 import { rotateElementVertexes, calcViewPointSize, calcViewVertexes, calcViewElementSize } from '@idraw/util';
-import { resizeControllerBorderWidth, areaBorderWidth, wrapperColor, selectWrapperBorderWidth, lockColor, controllerSize } from './config';
+import { resizeControllerBorderWidth, areaBorderWidth, selectWrapperBorderWidth, controllerSize } from './config';
 import { drawVertexes, drawLine, drawCircleController, drawCrossVertexes } from './draw-base';
 export function drawHoverVertexesWrapper(ctx, vertexes, opts) {
     if (!vertexes) {
         return;
     }
-    const wrapperOpts = { borderColor: wrapperColor, borderWidth: 1, background: 'transparent', lineDash: [] };
+    const { style } = opts;
+    const { activeColor } = style;
+    const wrapperOpts = { borderColor: activeColor, borderWidth: 1, background: 'transparent', lineDash: [] };
     drawVertexes(ctx, calcViewVertexes(vertexes, opts), wrapperOpts);
 }
 export function drawLockVertexesWrapper(ctx, vertexes, opts) {
     if (!vertexes) {
         return;
     }
-    const wrapperOpts = { borderColor: lockColor, borderWidth: 1, background: 'transparent', lineDash: [] };
+    const { style } = opts;
+    const { lockedColor } = style;
+    const wrapperOpts = { borderColor: lockedColor, borderWidth: 1, background: 'transparent', lineDash: [] };
     drawVertexes(ctx, calcViewVertexes(vertexes, opts), wrapperOpts);
     const { controller } = opts;
     if (controller) {
         const { topLeft, topRight, bottomLeft, bottomRight, topMiddle, bottomMiddle, leftMiddle, rightMiddle } = controller;
-        const ctrlOpts = Object.assign(Object.assign({}, wrapperOpts), { borderWidth: 1, background: lockColor });
+        const ctrlOpts = Object.assign(Object.assign({}, wrapperOpts), { borderWidth: 1, background: lockedColor });
         drawCrossVertexes(ctx, calcViewVertexes(topMiddle.vertexes, opts), ctrlOpts);
         drawCrossVertexes(ctx, calcViewVertexes(bottomMiddle.vertexes, opts), ctrlOpts);
         drawCrossVertexes(ctx, calcViewVertexes(leftMiddle.vertexes, opts), ctrlOpts);
@@ -32,9 +36,10 @@ export function drawSelectedElementControllersVertexes(ctx, controller, opts) {
     if (!controller) {
         return;
     }
-    const { hideControllers } = opts;
+    const { hideControllers, style } = opts;
+    const { activeColor } = style;
     const { elementWrapper, topLeft, topRight, bottomLeft, bottomRight, top, rotate } = controller;
-    const wrapperOpts = { borderColor: wrapperColor, borderWidth: selectWrapperBorderWidth, background: 'transparent', lineDash: [] };
+    const wrapperOpts = { borderColor: activeColor, borderWidth: selectWrapperBorderWidth, background: 'transparent', lineDash: [] };
     const ctrlOpts = Object.assign(Object.assign({}, wrapperOpts), { borderWidth: resizeControllerBorderWidth, background: '#FFFFFF' });
     drawVertexes(ctx, calcViewVertexes(elementWrapper, opts), wrapperOpts);
     if (!hideControllers) {
@@ -76,11 +81,12 @@ export function drawElementListShadows(ctx, elements, opts) {
     });
 }
 export function drawArea(ctx, opts) {
-    const { start, end } = opts;
+    const { start, end, style } = opts;
+    const { activeColor, activeAreaColor } = style;
     ctx.setLineDash([]);
     ctx.lineWidth = areaBorderWidth;
-    ctx.strokeStyle = wrapperColor;
-    ctx.fillStyle = '#1976d24f';
+    ctx.strokeStyle = activeColor;
+    ctx.fillStyle = activeAreaColor;
     ctx.beginPath();
     ctx.moveTo(start.x, start.y);
     ctx.lineTo(end.x, start.y);
@@ -91,12 +97,13 @@ export function drawArea(ctx, opts) {
     ctx.fill();
 }
 export function drawListArea(ctx, opts) {
-    const { areaSize } = opts;
+    const { areaSize, style } = opts;
+    const { activeColor, activeAreaColor } = style;
     const { x, y, w, h } = areaSize;
     ctx.setLineDash([]);
     ctx.lineWidth = areaBorderWidth;
-    ctx.strokeStyle = wrapperColor;
-    ctx.fillStyle = '#1976d21c';
+    ctx.strokeStyle = activeColor;
+    ctx.fillStyle = activeAreaColor;
     ctx.beginPath();
     ctx.moveTo(x, y);
     ctx.lineTo(x + w, y);
@@ -107,9 +114,11 @@ export function drawListArea(ctx, opts) {
     ctx.fill();
 }
 export function drawGroupQueueVertexesWrappers(ctx, vertexesList, opts) {
+    const { style } = opts;
+    const { activeColor } = style;
     for (let i = 0; i < vertexesList.length; i++) {
         const vertexes = vertexesList[i];
-        const wrapperOpts = { borderColor: wrapperColor, borderWidth: selectWrapperBorderWidth, background: 'transparent', lineDash: [4, 4] };
+        const wrapperOpts = { borderColor: activeColor, borderWidth: selectWrapperBorderWidth, background: 'transparent', lineDash: [4, 4] };
         drawVertexes(ctx, calcViewVertexes(vertexes, opts), wrapperOpts);
     }
 }

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

@@ -1,7 +1,7 @@
-import type { CoreEventMap } from '@idraw/types';
+import type { CoreEventMap, MiddlewareSelectorConfig } from '@idraw/types';
 import type { BoardMiddleware, ActionType, DeepSelectorSharedStorage } from './types';
 import { middlewareEventSelect, middlewareEventSelectClear, middlewareEventSelectInGroup, middlewareEventSnapToGrid, keyActionType, keyResizeType, keyGroupQueue, keyHoverElement, keySelectedElementList } from './config';
 export { keySelectedElementList, keyHoverElement, keyActionType, keyResizeType, keyGroupQueue };
 export type { DeepSelectorSharedStorage, ActionType };
 export { middlewareEventSelect, middlewareEventSelectClear, middlewareEventSelectInGroup, middlewareEventSnapToGrid };
-export declare const MiddlewareSelector: BoardMiddleware<DeepSelectorSharedStorage, CoreEventMap>;
+export declare const MiddlewareSelector: BoardMiddleware<DeepSelectorSharedStorage, CoreEventMap, MiddlewareSelectorConfig>;

package/dist/esm/middleware/selector/index.js

@@ -2,14 +2,17 @@ import { is, calcElementsViewInfo, calcElementVertexesInGroup, calcElementQueueV
 import { drawHoverVertexesWrapper, drawLockVertexesWrapper, drawArea, drawListArea, drawGroupQueueVertexesWrappers, drawSelectedElementControllersVertexes } from './draw-wrapper';
 import { drawReferenceLines } from './draw-reference';
 import { getPointTarget, resizeElement, rotateElement, getSelectedListArea, calcSelectedElementsArea, isElementInGroup, isPointInViewActiveGroup, calcMoveInGroup } from './util';
-import { middlewareEventSelect, middlewareEventSelectClear, middlewareEventSelectInGroup, middlewareEventSnapToGrid, keyActionType, keyResizeType, keyAreaStart, keyAreaEnd, keyGroupQueue, keyGroupQueueVertexesList, keyHoverElement, keyHoverElementVertexes, keySelectedElementList, keySelectedElementListVertexes, keySelectedElementController, keySelectedElementPosition, keyIsMoving, keyEnableSelectInGroup, keyEnableSnapToGrid, controllerSize } from './config';
+import { middlewareEventSelect, middlewareEventSelectClear, middlewareEventSelectInGroup, middlewareEventSnapToGrid, keyActionType, keyResizeType, keyAreaStart, keyAreaEnd, keyGroupQueue, keyGroupQueueVertexesList, keyHoverElement, keyHoverElementVertexes, keySelectedElementList, keySelectedElementListVertexes, keySelectedElementController, keySelectedElementPosition, keyIsMoving, keyEnableSelectInGroup, keyEnableSnapToGrid, controllerSize, defaultStyle } from './config';
 import { calcReferenceInfo } from './reference';
 import { middlewareEventTextEdit } from '../text-editor';
 import { eventChange } from '../../config';
 import { keyLayoutIsSelected } from '../layout-selector';
 export { keySelectedElementList, keyHoverElement, keyActionType, keyResizeType, keyGroupQueue };
 export { middlewareEventSelect, middlewareEventSelectClear, middlewareEventSelectInGroup, middlewareEventSnapToGrid };
-export const MiddlewareSelector = (opts) => {
+export const MiddlewareSelector = (opts, config) => {
+    const innerConfig = Object.assign(Object.assign({}, defaultStyle), config);
+    const { activeColor, activeAreaColor, lockedColor, referenceColor } = innerConfig;
+    const style = { activeColor, activeAreaColor, lockedColor, referenceColor };
     const { viewer, sharer, boardContent, calculator, eventHub } = opts;
     const { overlayContext } = boardContent;
     let prevPoint = null;
@@ -607,7 +610,7 @@ export const MiddlewareSelector = (opts) => {
             const groupQueueVertexesList = sharedStore[keyGroupQueueVertexesList];
             const isMoving = sharedStore[keyIsMoving];
             const enableSnapToGrid = sharedStore[keyEnableSnapToGrid];
-            const drawBaseOpts = { calculator, viewScaleInfo, viewSizeInfo };
+            const drawBaseOpts = { calculator, viewScaleInfo, viewSizeInfo, style };
             const selectedElementController = elem
                 ? calcElementSizeController(elem, {
                     groupQueue,
@@ -624,14 +627,14 @@ export const MiddlewareSelector = (opts) => {
                                 groupQueue,
                                 controllerSize: 10,
                                 viewScaleInfo
-                            }) }));
+                            }), style }));
                     }
                     else {
                         drawHoverVertexesWrapper(overlayContext, hoverElementVertexes, drawBaseOpts);
                     }
                 }
                 if (!isLock && elem && ['select', 'drag', 'resize'].includes(actionType)) {
-                    drawSelectedElementControllersVertexes(overlayContext, selectedElementController, Object.assign(Object.assign({}, drawBaseOpts), { element: elem, calculator, hideControllers: !!isMoving && actionType === 'drag' }));
+                    drawSelectedElementControllersVertexes(overlayContext, selectedElementController, Object.assign(Object.assign({}, drawBaseOpts), { element: elem, calculator, hideControllers: !!isMoving && actionType === 'drag', style }));
                     if (actionType === 'drag') {
                         if (enableSnapToGrid === true) {
                             const referenceInfo = calcReferenceInfo(elem.uuid, {
@@ -646,7 +649,8 @@ export const MiddlewareSelector = (opts) => {
                                 if (offsetX === 0 || offsetY === 0) {
                                     drawReferenceLines(overlayContext, {
                                         xLines,
-                                        yLines
+                                        yLines,
+                                        style
                                     });
                                 }
                             }
@@ -661,14 +665,14 @@ export const MiddlewareSelector = (opts) => {
                                 groupQueue,
                                 controllerSize: 10,
                                 viewScaleInfo
-                            }) }));
+                            }), style }));
                     }
                     else {
                         drawHoverVertexesWrapper(overlayContext, hoverElementVertexes, drawBaseOpts);
                     }
                 }
                 if (!isLock && elem && ['select', 'drag', 'resize'].includes(actionType)) {
-                    drawSelectedElementControllersVertexes(overlayContext, selectedElementController, Object.assign(Object.assign({}, drawBaseOpts), { element: elem, calculator, hideControllers: !!isMoving && actionType === 'drag' }));
+                    drawSelectedElementControllersVertexes(overlayContext, selectedElementController, Object.assign(Object.assign({}, drawBaseOpts), { element: elem, calculator, hideControllers: !!isMoving && actionType === 'drag', style }));
                     if (actionType === 'drag') {
                         if (enableSnapToGrid === true) {
                             const referenceInfo = calcReferenceInfo(elem.uuid, {
@@ -683,7 +687,8 @@ export const MiddlewareSelector = (opts) => {
                                 if (offsetX === 0 || offsetY === 0) {
                                     drawReferenceLines(overlayContext, {
                                         xLines,
-                                        yLines
+                                        yLines,
+                                        style
                                     });
                                 }
                             }
@@ -691,7 +696,7 @@ export const MiddlewareSelector = (opts) => {
                     }
                 }
                 else if (actionType === 'area' && areaStart && areaEnd) {
-                    drawArea(overlayContext, { start: areaStart, end: areaEnd });
+                    drawArea(overlayContext, { start: areaStart, end: areaEnd, style });
                 }
                 else if (['drag-list', 'drag-list-end'].includes(actionType)) {
                     const listAreaSize = calcSelectedElementsArea(getActiveElements(), {
@@ -700,7 +705,7 @@ export const MiddlewareSelector = (opts) => {
                         calculator
                     });
                     if (listAreaSize) {
-                        drawListArea(overlayContext, { areaSize: listAreaSize });
+                        drawListArea(overlayContext, { areaSize: listAreaSize, style });
                     }
                 }
             }