@idraw/core 0.4.0-beta.9 → 0.4.0

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

@@ -0,0 +1,139 @@
+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 { 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 { 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);
+    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 size = calcViewElementSize({ x, y, w, h }, opts);
+            x = size.x;
+            y = size.y;
+            w = size.w;
+            h = size.h;
+        }
+        const vertexes = rotateElementVertexes({ x, y, w, h, angle });
+        if (vertexes.length >= 2) {
+            ctx.setLineDash([]);
+            ctx.lineWidth = 1;
+            ctx.strokeStyle = '#aaaaaa';
+            ctx.fillStyle = '#0000001A';
+            ctx.beginPath();
+            ctx.moveTo(vertexes[0].x, vertexes[0].y);
+            for (let i = 0; i < vertexes.length; i++) {
+                const p = vertexes[i];
+                ctx.lineTo(p.x, p.y);
+            }
+            ctx.closePath();
+            ctx.stroke();
+            ctx.fill('nonzero');
+        }
+    });
+}
+export function drawArea(ctx, opts) {
+    const { start, end, style } = opts;
+    const { activeColor, activeAreaColor } = style;
+    ctx.setLineDash([]);
+    ctx.lineWidth = areaBorderWidth;
+    ctx.strokeStyle = activeColor;
+    ctx.fillStyle = activeAreaColor;
+    ctx.beginPath();
+    ctx.moveTo(start.x, start.y);
+    ctx.lineTo(end.x, start.y);
+    ctx.lineTo(end.x, end.y);
+    ctx.lineTo(start.x, end.y);
+    ctx.closePath();
+    ctx.stroke();
+    ctx.fill('nonzero');
+}
+export function drawListArea(ctx, opts) {
+    const { areaSize, style } = opts;
+    const { activeColor, activeAreaColor } = style;
+    const { x, y, w, h } = areaSize;
+    ctx.setLineDash([]);
+    ctx.lineWidth = areaBorderWidth;
+    ctx.strokeStyle = activeColor;
+    ctx.fillStyle = activeAreaColor;
+    ctx.beginPath();
+    ctx.moveTo(x, y);
+    ctx.lineTo(x + w, y);
+    ctx.lineTo(x + w, y + h);
+    ctx.lineTo(x, y + h);
+    ctx.closePath();
+    ctx.stroke();
+    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: activeColor,
+            borderWidth: selectWrapperBorderWidth,
+            background: 'transparent',
+            lineDash: [4, 4]
+        };
+        drawVertexes(ctx, calcViewVertexes(vertexes, opts), wrapperOpts);
+    }
+}

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

@@ -0,0 +1,11 @@
+import type { CoreEventMap, MiddlewareSelectorConfig } from '@idraw/types';
+import type { Middleware, ActionType, DeepSelectorSharedStorage } from './types';
+import { keyActionType, keyResizeType, keyGroupQueue, keyHoverElement, keySelectedElementList } from './config';
+import { 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>;