@idraw/core 0.4.0-beta.4 → 0.4.0-beta.40

package/dist/esm/middleware/scroller/util.js

@@ -1,16 +1,9 @@
 import { getViewScaleInfoFromSnapshot, getViewSizeInfoFromSnapshot } from '@idraw/util';
-import { keyActivePoint, keyActiveThumbType, keyPrevPoint, keyXThumbRect, keyYThumbRect } from './config';
-const minScrollerWidth = 12;
+import { keyActivePoint, keyActiveThumbType, keyPrevPoint, keyXThumbRect, keyYThumbRect, keyHoverXThumbRect, keyHoverYThumbRect } from './config';
 const scrollerLineWidth = 16;
-const scrollerThumbAlpha = 0.36;
-const scrollConfig = {
-    width: minScrollerWidth,
-    thumbColor: '#000000AA',
-    scrollBarColor: '#FFFFFF60',
-    showScrollBar: false
-};
-function isPointAtRect(helperContext, p, rect) {
-    const ctx = helperContext;
+const minThumbLength = scrollerLineWidth * 2.5;
+function isPointAtRect(overlayContext, p, rect) {
+    const ctx = overlayContext;
     const { x, y, w, h } = rect;
     ctx.beginPath();
     ctx.rect(x, y, w, h);
@@ -20,13 +13,13 @@ function isPointAtRect(helperContext, p, rect) {
     }
     return false;
 }
-export function isPointInScrollThumb(helperContext, p, opts) {
+export function isPointInScrollThumb(overlayContext, p, opts) {
     let thumbType = null;
     const { xThumbRect, yThumbRect } = opts;
-    if (xThumbRect && isPointAtRect(helperContext, p, xThumbRect)) {
+    if (xThumbRect && isPointAtRect(overlayContext, p, xThumbRect)) {
         thumbType = 'X';
     }
-    else if (yThumbRect && isPointAtRect(helperContext, p, yThumbRect)) {
+    else if (yThumbRect && isPointAtRect(overlayContext, p, yThumbRect)) {
         thumbType = 'Y';
     }
     return thumbType;
@@ -38,15 +31,19 @@ function getScrollInfoFromSnapshot(snapshot) {
         prevPoint: sharedStore[keyPrevPoint] || null,
         activeThumbType: sharedStore[keyActiveThumbType] || null,
         xThumbRect: sharedStore[keyXThumbRect] || null,
-        yThumbRect: sharedStore[keyYThumbRect] || null
+        yThumbRect: sharedStore[keyYThumbRect] || null,
+        hoverXThumb: sharedStore[keyHoverXThumbRect],
+        hoverYThumb: sharedStore[keyHoverYThumbRect]
     };
     return info;
 }
-function calcScrollerInfo(viewScaleInfo, viewSizeInfo) {
+function calcScrollerInfo(opts) {
+    const { viewScaleInfo, viewSizeInfo, hoverXThumb, hoverYThumb, style } = opts;
     const { width, height } = viewSizeInfo;
     const { offsetTop, offsetBottom, offsetLeft, offsetRight } = viewScaleInfo;
-    const sliderMinSize = scrollerLineWidth * 2.5;
+    const sliderMinSize = minThumbLength;
     const lineSize = scrollerLineWidth;
+    const { thumbBackground, thumbBorderColor, hoverThumbBackground, hoverThumbBorderColor } = style;
     let xSize = 0;
     let ySize = 0;
     xSize = Math.max(sliderMinSize, width - lineSize * 2 - (Math.abs(offsetLeft) + Math.abs(offsetRight)));
@@ -101,8 +98,10 @@ function calcScrollerInfo(viewScaleInfo, viewSizeInfo) {
         ySize,
         translateY,
         translateX,
-        thumbColor: scrollConfig.thumbColor,
-        scrollBarColor: scrollConfig.scrollBarColor,
+        xThumbBackground: hoverXThumb ? hoverThumbBackground : thumbBackground,
+        yThumbBackground: hoverYThumb ? hoverThumbBackground : thumbBackground,
+        xThumbBorderColor: hoverXThumb ? hoverThumbBorderColor : thumbBorderColor,
+        yThumbBorderColor: hoverYThumb ? hoverThumbBorderColor : thumbBorderColor,
         xThumbRect,
         yThumbRect
     };
@@ -110,13 +109,14 @@ function calcScrollerInfo(viewScaleInfo, viewSizeInfo) {
 }
 function drawScrollerThumb(ctx, opts) {
     let { x, y, h, w } = opts;
+    const { background, borderColor } = opts;
     ctx.save();
     ctx.shadowColor = '#FFFFFF';
     ctx.shadowOffsetX = 0;
     ctx.shadowOffsetY = 0;
     ctx.shadowBlur = 1;
     {
-        const { color, axis } = opts;
+        const { axis } = opts;
         if (axis === 'X') {
             y = y + h / 4 + 0;
             h = h / 2;
@@ -130,7 +130,7 @@ function drawScrollerThumb(ctx, opts) {
         if (w < r * 2 || h < r * 2) {
             r = 0;
         }
-        ctx.globalAlpha = scrollerThumbAlpha;
+        ctx.globalAlpha = 1;
         ctx.beginPath();
         ctx.moveTo(x + r, y);
         ctx.arcTo(x + w, y, x + w, y + h, r);
@@ -138,12 +138,11 @@ function drawScrollerThumb(ctx, opts) {
         ctx.arcTo(x, y + h, x, y, r);
         ctx.arcTo(x, y, x + w, y, r);
         ctx.closePath();
-        ctx.fillStyle = color;
+        ctx.fillStyle = background;
         ctx.fill();
-        ctx.globalAlpha = 1;
         ctx.beginPath();
         ctx.lineWidth = 1;
-        ctx.strokeStyle = color;
+        ctx.strokeStyle = borderColor;
         ctx.setLineDash([]);
         ctx.moveTo(x + r, y);
         ctx.arcTo(x + w, y, x + w, y + h, r);
@@ -155,12 +154,11 @@ function drawScrollerThumb(ctx, opts) {
     }
     ctx.restore();
 }
-function drawScrollerInfo(helperContext, opts) {
-    const ctx = helperContext;
-    const { viewScaleInfo, viewSizeInfo, scrollInfo } = opts;
-    const { activeThumbType, prevPoint, activePoint } = scrollInfo;
-    const { width, height } = viewSizeInfo;
-    const wrapper = calcScrollerInfo(viewScaleInfo, viewSizeInfo);
+function drawScrollerInfo(overlayContext, opts) {
+    const ctx = overlayContext;
+    const { viewScaleInfo, viewSizeInfo, scrollInfo, style } = opts;
+    const { activeThumbType, prevPoint, activePoint, hoverXThumb, hoverYThumb } = scrollInfo;
+    const wrapper = calcScrollerInfo({ viewScaleInfo, viewSizeInfo, hoverXThumb, hoverYThumb, style });
     let xThumbRect = Object.assign({}, wrapper.xThumbRect);
     let yThumbRect = Object.assign({}, wrapper.yThumbRect);
     if (activeThumbType && prevPoint && activePoint) {
@@ -173,27 +171,18 @@ function drawScrollerInfo(helperContext, opts) {
             yThumbRect.y = yThumbRect.y + (activePoint.y - prevPoint.y);
         }
     }
-    if (scrollConfig.showScrollBar === true) {
-        ctx.fillStyle = wrapper.scrollBarColor;
-        ctx.fillRect(0, height - wrapper.lineSize, width, wrapper.lineSize);
-    }
-    drawScrollerThumb(ctx, Object.assign(Object.assign({ axis: 'X' }, xThumbRect), { r: wrapper.lineSize / 2, color: wrapper.thumbColor }));
-    if (scrollConfig.showScrollBar === true) {
-        ctx.fillStyle = wrapper.scrollBarColor;
-        ctx.fillRect(width - wrapper.lineSize, 0, wrapper.lineSize, height);
-    }
-    drawScrollerThumb(ctx, Object.assign(Object.assign({ axis: 'Y' }, yThumbRect), { r: wrapper.lineSize / 2, color: wrapper.thumbColor }));
-    ctx.globalAlpha = 1;
+    drawScrollerThumb(ctx, Object.assign(Object.assign({ axis: 'X' }, xThumbRect), { r: wrapper.lineSize / 2, background: wrapper.xThumbBackground, borderColor: wrapper.xThumbBorderColor }));
+    drawScrollerThumb(ctx, Object.assign(Object.assign({ axis: 'Y' }, yThumbRect), { r: wrapper.lineSize / 2, background: wrapper.yThumbBackground, borderColor: wrapper.yThumbBorderColor }));
     return {
         xThumbRect,
         yThumbRect
     };
 }
 export function drawScroller(ctx, opts) {
-    const { snapshot } = opts;
+    const { snapshot, style } = opts;
     const viewSizeInfo = getViewSizeInfoFromSnapshot(snapshot);
     const viewScaleInfo = getViewScaleInfoFromSnapshot(snapshot);
     const scrollInfo = getScrollInfoFromSnapshot(snapshot);
-    const { xThumbRect, yThumbRect } = drawScrollerInfo(ctx, { viewSizeInfo, viewScaleInfo, scrollInfo });
+    const { xThumbRect, yThumbRect } = drawScrollerInfo(ctx, { viewSizeInfo, viewScaleInfo, scrollInfo, style });
     return { xThumbRect, yThumbRect };
 }

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

@@ -1,3 +1,4 @@
+import type { MiddlewareSelectorStyle } from '@idraw/types';
 export declare const key = "SELECT";
 export declare const keyActionType: unique symbol;
 export declare const keyResizeType: unique symbol;
@@ -8,8 +9,12 @@ export declare const keyHoverElementVertexes: unique symbol;
 export declare const keySelectedElementList: unique symbol;
 export declare const keySelectedElementListVertexes: unique symbol;
 export declare const keySelectedElementController: unique symbol;
+export declare const keySelectedElementPosition: unique symbol;
 export declare const keyGroupQueue: unique symbol;
 export declare const keyGroupQueueVertexesList: unique symbol;
+export declare const keyIsMoving: unique symbol;
+export declare const keyEnableSelectInGroup: unique symbol;
+export declare const keyEnableSnapToGrid: unique symbol;
 export declare const keyDebugElemCenter: unique symbol;
 export declare const keyDebugStartVertical: unique symbol;
 export declare const keyDebugEndVertical: unique symbol;
@@ -19,4 +24,7 @@ export declare const keyDebugEnd0: unique symbol;
 export declare const selectWrapperBorderWidth = 2;
 export declare const resizeControllerBorderWidth = 4;
 export declare const areaBorderWidth = 1;
-export declare const wrapperColor = "#1973ba";
+export declare const controllerSize = 10;
+export declare const rotateControllerSize = 20;
+export declare const rotateControllerPosition = 22;
+export declare const defaultStyle: MiddlewareSelectorStyle;

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

@@ -8,8 +8,12 @@ export const keyHoverElementVertexes = Symbol(`${key}_hoverElementVertexes`);
 export const keySelectedElementList = Symbol(`${key}_selectedElementList`);
 export const keySelectedElementListVertexes = Symbol(`${key}_selectedElementListVertexes`);
 export const keySelectedElementController = Symbol(`${key}_selectedElementController`);
+export const keySelectedElementPosition = Symbol(`${key}_selectedElementPosition`);
 export const keyGroupQueue = Symbol(`${key}_groupQueue`);
 export const keyGroupQueueVertexesList = Symbol(`${key}_groupQueueVertexesList`);
+export const keyIsMoving = Symbol(`${key}_isMoving`);
+export const keyEnableSelectInGroup = Symbol(`${key}_enableSelectInGroup`);
+export const keyEnableSnapToGrid = Symbol(`${key}_enableSnapToGrid`);
 export const keyDebugElemCenter = Symbol(`${key}_debug_elemCenter`);
 export const keyDebugStartVertical = Symbol(`${key}_debug_startVertical`);
 export const keyDebugEndVertical = Symbol(`${key}_debug_endVertical`);
@@ -19,4 +23,16 @@ 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 controllerSize = 10;
+export const rotateControllerSize = 20;
+export const rotateControllerPosition = 22;
+const activeColor = '#1973ba';
+const activeAreaColor = '#1976d21c';
+const lockedColor = '#5b5959b5';
+const referenceColor = '#f7276e';
+export const defaultStyle = {
+    activeColor,
+    activeAreaColor,
+    lockedColor,
+    referenceColor
+};

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

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1,12 @@
+function getViewBoxInfo(rectInfo) {
+    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
+    };
+    return boxInfo;
+}
+export {};

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

@@ -0,0 +1,30 @@
+import type { PointSize, ViewContext2D, ViewRectVertexes } from '@idraw/types';
+export declare function drawVertexes(ctx: ViewContext2D, vertexes: ViewRectVertexes, opts: {
+    borderColor: string;
+    borderWidth: number;
+    background: string;
+    lineDash: number[];
+}): void;
+export declare function drawLine(ctx: ViewContext2D, start: PointSize, end: PointSize, opts: {
+    borderColor: string;
+    borderWidth: 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: {
+    size: number;
+    borderColor: string;
+    borderWidth: number;
+    lineDash: number[];
+}): void;

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

@@ -0,0 +1,100 @@
+export function drawVertexes(ctx, vertexes, opts) {
+    const { borderColor, borderWidth, background, lineDash } = opts;
+    ctx.setLineDash([]);
+    ctx.lineWidth = borderWidth;
+    ctx.strokeStyle = borderColor;
+    ctx.fillStyle = background;
+    ctx.setLineDash(lineDash);
+    ctx.beginPath();
+    ctx.moveTo(vertexes[0].x, vertexes[0].y);
+    ctx.lineTo(vertexes[1].x, vertexes[1].y);
+    ctx.lineTo(vertexes[2].x, vertexes[2].y);
+    ctx.lineTo(vertexes[3].x, vertexes[3].y);
+    ctx.lineTo(vertexes[0].x, vertexes[0].y);
+    ctx.closePath();
+    ctx.stroke();
+    ctx.fill();
+}
+export function drawLine(ctx, start, end, opts) {
+    const { borderColor, borderWidth, lineDash } = opts;
+    ctx.setLineDash([]);
+    ctx.lineWidth = borderWidth;
+    ctx.strokeStyle = borderColor;
+    ctx.setLineDash(lineDash);
+    ctx.beginPath();
+    ctx.moveTo(start.x, start.y);
+    ctx.lineTo(end.x, end.y);
+    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();
+    }
+}
+export function drawCrossVertexes(ctx, vertexes, opts) {
+    const { borderColor, borderWidth, lineDash } = opts;
+    ctx.setLineDash([]);
+    ctx.lineWidth = borderWidth;
+    ctx.strokeStyle = borderColor;
+    ctx.setLineDash(lineDash);
+    ctx.beginPath();
+    ctx.moveTo(vertexes[0].x, vertexes[0].y);
+    ctx.lineTo(vertexes[2].x, vertexes[2].y);
+    ctx.closePath();
+    ctx.stroke();
+    ctx.beginPath();
+    ctx.moveTo(vertexes[1].x, vertexes[1].y);
+    ctx.lineTo(vertexes[3].x, vertexes[3].y);
+    ctx.closePath();
+    ctx.stroke();
+}
+export function drawCrossByCenter(ctx, center, opts) {
+    const { size, borderColor, borderWidth, lineDash } = opts;
+    const minX = center.x - size / 2;
+    const maxX = center.x + size / 2;
+    const minY = center.y - size / 2;
+    const maxY = center.y + size / 2;
+    const vertexes = [
+        {
+            x: minX,
+            y: minY
+        },
+        {
+            x: maxX,
+            y: minY
+        },
+        {
+            x: maxX,
+            y: maxY
+        },
+        {
+            x: minX,
+            y: maxY
+        }
+    ];
+    drawCrossVertexes(ctx, vertexes, {
+        borderColor,
+        borderWidth,
+        lineDash
+    });
+}

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

@@ -0,0 +1,5 @@
+import type { ElementSizeController, ViewContext2D, ViewSizeInfo, ViewScaleInfo } from '@idraw/types';
+export declare function drawDebugStoreSelectedElementController(ctx: ViewContext2D, controller: ElementSizeController | null, opts: {
+    viewSizeInfo: ViewSizeInfo;
+    viewScaleInfo: ViewScaleInfo;
+}): void;

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

@@ -0,0 +1,30 @@
+import { calcViewPointSize } from '@idraw/util';
+function drawDebugControllerVertexes(opts) {
+    const { ctx, viewScaleInfo, vertexes } = opts;
+    const v0 = calcViewPointSize(vertexes[0], { viewScaleInfo });
+    const v1 = calcViewPointSize(vertexes[1], { viewScaleInfo });
+    const v2 = calcViewPointSize(vertexes[2], { viewScaleInfo });
+    const v3 = calcViewPointSize(vertexes[3], { viewScaleInfo });
+    ctx.beginPath();
+    ctx.fillStyle = '#FF0000A1';
+    ctx.moveTo(v0.x, v0.y);
+    ctx.lineTo(v1.x, v1.y);
+    ctx.lineTo(v2.x, v2.y);
+    ctx.lineTo(v3.x, v3.y);
+    ctx.lineTo(v0.x, v0.y);
+    ctx.closePath();
+    ctx.fill();
+    return false;
+}
+export function drawDebugStoreSelectedElementController(ctx, controller, opts) {
+    if (!controller) {
+        return;
+    }
+    const { viewSizeInfo, viewScaleInfo } = opts;
+    const { left, right, top, bottom, topLeft, topRight, bottomLeft, bottomRight, rotate } = controller;
+    const ctrls = [left, right, top, bottom, topLeft, topRight, bottomLeft, bottomRight, rotate];
+    for (let i = 0; i < ctrls.length; i++) {
+        const ctrl = ctrls[i];
+        drawDebugControllerVertexes({ ctx, vertexes: ctrl.vertexes, viewSizeInfo, viewScaleInfo });
+    }
+}

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

@@ -0,0 +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

@@ -0,0 +1,31 @@
+import { drawLine, drawCrossByCenter } from './draw-base';
+export function drawReferenceLines(ctx, opts) {
+    const { xLines, yLines, style } = opts;
+    const { referenceColor } = style;
+    const lineOpts = {
+        borderColor: referenceColor,
+        borderWidth: 1,
+        lineDash: []
+    };
+    const crossOpts = Object.assign(Object.assign({}, lineOpts), { size: 6 });
+    if (xLines) {
+        xLines.forEach((line) => {
+            line.forEach((p, pIdx) => {
+                drawCrossByCenter(ctx, p, crossOpts);
+                if (line[pIdx + 1]) {
+                    drawLine(ctx, line[pIdx], line[pIdx + 1], lineOpts);
+                }
+            });
+        });
+    }
+    if (yLines) {
+        yLines.forEach((line) => {
+            line.forEach((p, pIdx) => {
+                drawCrossByCenter(ctx, p, crossOpts);
+                if (line[pIdx + 1]) {
+                    drawLine(ctx, line[pIdx], line[pIdx + 1], lineOpts);
+                }
+            });
+        });
+    }
+}

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

@@ -1,22 +1,37 @@
-import type { Element, ElementType, PointSize, RendererDrawElementOptions, ViewContext2D, ViewRectVertexes, ViewScaleInfo, ViewSizeInfo, ElementSizeController } from '@idraw/types';
+import type { Element, ElementType, PointSize, RendererDrawElementOptions, ViewContext2D, ViewRectVertexes, ViewScaleInfo, ViewSizeInfo, ElementSizeController, ViewCalculator, MiddlewareSelectorStyle } from '@idraw/types';
 import type { AreaSize } from './types';
 export declare function drawHoverVertexesWrapper(ctx: ViewContext2D, vertexes: ViewRectVertexes | null, opts: {
     viewScaleInfo: ViewScaleInfo;
     viewSizeInfo: ViewSizeInfo;
+    style: MiddlewareSelectorStyle;
+}): void;
+export declare function drawLockedVertexesWrapper(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;
     viewScaleInfo: ViewScaleInfo;
     viewSizeInfo: ViewSizeInfo;
+    element: Element | null;
+    calculator: ViewCalculator;
+    style: MiddlewareSelectorStyle;
+    rotateControllerPattern: ViewContext2D;
 }): 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,49 +1,67 @@
-import { rotateElementVertexes, calcViewVertexes } from '@idraw/util';
-import { resizeControllerBorderWidth, areaBorderWidth, wrapperColor, selectWrapperBorderWidth } from './config';
-function drawVertexes(ctx, vertexes, opts) {
-    const { borderColor, borderWidth, background, lineDash } = opts;
-    ctx.setLineDash([]);
-    ctx.lineWidth = borderWidth;
-    ctx.strokeStyle = borderColor;
-    ctx.fillStyle = background;
-    ctx.setLineDash(lineDash);
-    ctx.beginPath();
-    ctx.moveTo(vertexes[0].x, vertexes[0].y);
-    ctx.lineTo(vertexes[1].x, vertexes[1].y);
-    ctx.lineTo(vertexes[2].x, vertexes[2].y);
-    ctx.lineTo(vertexes[3].x, vertexes[3].y);
-    ctx.lineTo(vertexes[0].x, vertexes[0].y);
-    ctx.closePath();
-    ctx.stroke();
-    ctx.fill();
-}
+import { rotateElementVertexes, calcViewPointSize, calcViewVertexes, calcViewElementSize } from '@idraw/util';
+import { resizeControllerBorderWidth, areaBorderWidth, selectWrapperBorderWidth } from './config';
+import { drawVertexes, 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 drawLockedVertexesWrapper(ctx, vertexes, opts) {
+    if (!vertexes) {
+        return;
+    }
+    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: lockedColor });
+        drawCrossVertexes(ctx, calcViewVertexes(topMiddle.vertexes, opts), ctrlOpts);
+        drawCrossVertexes(ctx, calcViewVertexes(bottomMiddle.vertexes, opts), ctrlOpts);
+        drawCrossVertexes(ctx, calcViewVertexes(leftMiddle.vertexes, opts), ctrlOpts);
+        drawCrossVertexes(ctx, calcViewVertexes(rightMiddle.vertexes, opts), ctrlOpts);
+        drawCrossVertexes(ctx, calcViewVertexes(topLeft.vertexes, opts), ctrlOpts);
+        drawCrossVertexes(ctx, calcViewVertexes(topRight.vertexes, opts), ctrlOpts);
+        drawCrossVertexes(ctx, calcViewVertexes(bottomLeft.vertexes, opts), ctrlOpts);
+        drawCrossVertexes(ctx, calcViewVertexes(bottomRight.vertexes, opts), ctrlOpts);
+    }
 }
 export function drawSelectedElementControllersVertexes(ctx, controller, opts) {
+    var _a;
     if (!controller) {
         return;
     }
-    const { elementWrapper, topLeft, topRight, bottomLeft, bottomRight } = controller;
-    const wrapperOpts = { borderColor: wrapperColor, borderWidth: selectWrapperBorderWidth, background: 'transparent', lineDash: [] };
+    const { hideControllers, style, rotateControllerPattern, viewSizeInfo, element } = opts;
+    const { devicePixelRatio = 1 } = viewSizeInfo;
+    const { activeColor } = style;
+    const { elementWrapper, topLeft, topRight, bottomLeft, bottomRight, rotate } = controller;
+    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);
-    drawVertexes(ctx, calcViewVertexes(topLeft.vertexes, opts), ctrlOpts);
-    drawVertexes(ctx, calcViewVertexes(topRight.vertexes, opts), ctrlOpts);
-    drawVertexes(ctx, calcViewVertexes(bottomLeft.vertexes, opts), ctrlOpts);
-    drawVertexes(ctx, calcViewVertexes(bottomRight.vertexes, opts), ctrlOpts);
+    if (!hideControllers) {
+        drawVertexes(ctx, calcViewVertexes(topLeft.vertexes, opts), ctrlOpts);
+        drawVertexes(ctx, calcViewVertexes(topRight.vertexes, opts), ctrlOpts);
+        drawVertexes(ctx, calcViewVertexes(bottomLeft.vertexes, opts), ctrlOpts);
+        drawVertexes(ctx, calcViewVertexes(bottomRight.vertexes, opts), ctrlOpts);
+        if (((_a = element === null || element === void 0 ? void 0 : element.operations) === null || _a === void 0 ? void 0 : _a.rotatable) !== false) {
+            drawCircleController(ctx, calcViewPointSize(rotate.center, opts), Object.assign(Object.assign({}, ctrlOpts), { size: rotate.size, borderWidth: 0 }));
+            const rotateCenter = calcViewPointSize(rotate.center, opts);
+            ctx.drawImage(rotateControllerPattern.canvas, 0, 0, rotateControllerPattern.canvas.width / devicePixelRatio, rotateControllerPattern.canvas.height / devicePixelRatio, rotateCenter.x - rotate.size / 2, rotateCenter.y - rotate.size / 2, rotate.size, rotate.size);
+        }
+    }
 }
 export function drawElementListShadows(ctx, elements, opts) {
     elements.forEach((elem) => {
         let { x, y, w, h } = elem;
         const { angle = 0 } = elem;
         if (opts === null || opts === void 0 ? void 0 : opts.calculator) {
-            const { calculator } = opts;
-            const size = calculator.elementSize({ x, y, w, h }, opts.viewScaleInfo, opts.viewSizeInfo);
+            const size = calcViewElementSize({ x, y, w, h }, opts);
             x = size.x;
             y = size.y;
             w = size.w;
@@ -68,11 +86,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);
@@ -83,12 +102,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);
@@ -99,9 +119,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,4 +1,11 @@
-import type { CoreEvent } from '@idraw/types';
-import type { BoardMiddleware, DeepSelectorSharedStorage } from './types';
-export declare const middlewareEventSelect: string;
-export declare const MiddlewareSelector: BoardMiddleware<DeepSelectorSharedStorage, CoreEvent>;
+import type { CoreEventMap, MiddlewareSelectorConfig } from '@idraw/types';
+import type { BoardMiddleware, ActionType, DeepSelectorSharedStorage } from './types';
+import { keyActionType, keyResizeType, keyGroupQueue, keyHoverElement, keySelectedElementList } from './config';
+import { MIDDLEWARE_INTERNAL_EVENT_SHOW_INFO_ANGLE } from '../info';
+export { keySelectedElementList, keyHoverElement, keyActionType, keyResizeType, keyGroupQueue };
+export type { DeepSelectorSharedStorage, ActionType };
+export declare const MiddlewareSelector: BoardMiddleware<DeepSelectorSharedStorage, CoreEventMap & {
+    [MIDDLEWARE_INTERNAL_EVENT_SHOW_INFO_ANGLE]: {
+        show: boolean;
+    };
+}, MiddlewareSelectorConfig>;