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

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('nonzero');
+}
+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('nonzero');
+    }
+}
+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('nonzero');
+    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,72 @@
-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;
@@ -63,16 +86,17 @@ export function drawElementListShadows(ctx, elements, opts) {
             }
             ctx.closePath();
             ctx.stroke();
-            ctx.fill();
+            ctx.fill('nonzero');
         }
     });
 }
 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);
@@ -80,15 +104,16 @@ export function drawArea(ctx, opts) {
     ctx.lineTo(start.x, end.y);
     ctx.closePath();
     ctx.stroke();
-    ctx.fill();
+    ctx.fill('nonzero');
 }
 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);
@@ -96,12 +121,19 @@ export function drawListArea(ctx, opts) {
     ctx.lineTo(x, y + h);
     ctx.closePath();
     ctx.stroke();
-    ctx.fill();
+    ctx.fill('nonzero');
 }
 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 { Middleware, 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: Middleware<DeepSelectorSharedStorage, CoreEventMap & {
+    [MIDDLEWARE_INTERNAL_EVENT_SHOW_INFO_ANGLE]: {
+        show: boolean;
+    };
+}, MiddlewareSelectorConfig>;