@idraw/core 0.4.0-beta.17 → 0.4.0-beta.19

package/dist/esm/middleware/layout-selector/util.js

@@ -0,0 +1,93 @@
+import { selectColor, disableColor } from './config';
+function drawControllerBox(ctx, boxVertexes) {
+    ctx.setLineDash([]);
+    ctx.fillStyle = '#FFFFFF';
+    ctx.beginPath();
+    ctx.moveTo(boxVertexes[0].x, boxVertexes[0].y);
+    ctx.lineTo(boxVertexes[1].x, boxVertexes[1].y);
+    ctx.lineTo(boxVertexes[2].x, boxVertexes[2].y);
+    ctx.lineTo(boxVertexes[3].x, boxVertexes[3].y);
+    ctx.closePath();
+    ctx.fill();
+    ctx.strokeStyle = selectColor;
+    ctx.lineWidth = 2;
+    ctx.beginPath();
+    ctx.moveTo(boxVertexes[0].x, boxVertexes[0].y);
+    ctx.lineTo(boxVertexes[1].x, boxVertexes[1].y);
+    ctx.lineTo(boxVertexes[2].x, boxVertexes[2].y);
+    ctx.lineTo(boxVertexes[3].x, boxVertexes[3].y);
+    ctx.closePath();
+    ctx.stroke();
+}
+function drawControllerCross(ctx, opts) {
+    const { vertexes, strokeStyle, lineWidth } = opts;
+    ctx.setLineDash([]);
+    ctx.strokeStyle = strokeStyle;
+    ctx.lineWidth = lineWidth;
+    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();
+}
+function drawControllerLine(ctx, opts) {
+    const { start, end, centerVertexes, disabled } = opts;
+    const lineWidth = disabled === true ? 1 : 2;
+    const strokeStyle = disabled === true ? disableColor : selectColor;
+    ctx.setLineDash([]);
+    ctx.strokeStyle = strokeStyle;
+    ctx.lineWidth = lineWidth;
+    ctx.beginPath();
+    ctx.moveTo(start.x, start.y);
+    ctx.lineTo(end.x, end.y);
+    ctx.closePath();
+    ctx.stroke();
+    if (disabled === true) {
+        drawControllerCross(ctx, {
+            vertexes: centerVertexes,
+            lineWidth,
+            strokeStyle
+        });
+    }
+}
+export function drawLayoutController(ctx, opts) {
+    const { controller, operations } = opts;
+    const { topLeft, topRight, bottomLeft, bottomRight, topMiddle, rightMiddle, bottomMiddle, leftMiddle } = controller;
+    drawControllerLine(ctx, { start: topLeft.center, end: topRight.center, centerVertexes: topMiddle.vertexes, disabled: !!(operations === null || operations === void 0 ? void 0 : operations.disableTop) });
+    drawControllerLine(ctx, { start: topRight.center, end: bottomRight.center, centerVertexes: rightMiddle.vertexes, disabled: !!(operations === null || operations === void 0 ? void 0 : operations.disableRight) });
+    drawControllerLine(ctx, { start: bottomRight.center, end: bottomLeft.center, centerVertexes: bottomMiddle.vertexes, disabled: !!(operations === null || operations === void 0 ? void 0 : operations.disableBottom) });
+    drawControllerLine(ctx, { start: bottomLeft.center, end: topLeft.center, centerVertexes: leftMiddle.vertexes, disabled: !!(operations === null || operations === void 0 ? void 0 : operations.disableLeft) });
+    const disabledOpts = {
+        lineWidth: 1,
+        strokeStyle: disableColor
+    };
+    if ((operations === null || operations === void 0 ? void 0 : operations.disableTopLeft) === true) {
+        drawControllerCross(ctx, Object.assign({ vertexes: topLeft.vertexes }, disabledOpts));
+    }
+    else {
+        drawControllerBox(ctx, topLeft.vertexes);
+    }
+    if ((operations === null || operations === void 0 ? void 0 : operations.disableTopRight) === true) {
+        drawControllerCross(ctx, Object.assign({ vertexes: topRight.vertexes }, disabledOpts));
+    }
+    else {
+        drawControllerBox(ctx, topRight.vertexes);
+    }
+    if ((operations === null || operations === void 0 ? void 0 : operations.disableBottomRight) === true) {
+        drawControllerCross(ctx, Object.assign({ vertexes: bottomRight.vertexes }, disabledOpts));
+    }
+    else {
+        drawControllerBox(ctx, bottomRight.vertexes);
+    }
+    if ((operations === null || operations === void 0 ? void 0 : operations.disableBottomLeft) === true) {
+        drawControllerCross(ctx, Object.assign({ vertexes: bottomLeft.vertexes }, disabledOpts));
+    }
+    else {
+        drawControllerBox(ctx, bottomLeft.vertexes);
+    }
+}

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

@@ -1,3 +1,4 @@
 import type { BoardMiddleware, CoreEventMap } from '@idraw/types';
+import type { DeepRulerSharedStorage } from './types';
 export declare const middlewareEventRuler = "@middleware/show-ruler";
-export declare const MiddlewareRuler: BoardMiddleware<Record<string, any>, CoreEventMap>;
+export declare const MiddlewareRuler: BoardMiddleware<DeepRulerSharedStorage, CoreEventMap>;

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

@@ -1,8 +1,8 @@
 import { getViewScaleInfoFromSnapshot, getViewSizeInfoFromSnapshot } from '@idraw/util';
-import { drawRulerBackground, drawXRuler, drawYRuler, calcXRulerScaleList, calcYRulerScaleList, drawUnderGrid } from './util';
+import { drawRulerBackground, drawXRuler, drawYRuler, calcXRulerScaleList, calcYRulerScaleList, drawUnderGrid, drawScrollerSelectedArea } from './util';
 export const middlewareEventRuler = '@middleware/show-ruler';
 export const MiddlewareRuler = (opts) => {
-    const { boardContent, viewer, eventHub } = opts;
+    const { boardContent, viewer, eventHub, calculator } = opts;
     const { helperContext, underContext } = boardContent;
     let show = true;
     let showGrid = true;
@@ -29,6 +29,7 @@ export const MiddlewareRuler = (opts) => {
             if (show === true) {
                 const viewScaleInfo = getViewScaleInfoFromSnapshot(snapshot);
                 const viewSizeInfo = getViewSizeInfoFromSnapshot(snapshot);
+                drawScrollerSelectedArea(helperContext, { snapshot, calculator });
                 drawRulerBackground(helperContext, { viewScaleInfo, viewSizeInfo });
                 const xList = calcXRulerScaleList({ viewScaleInfo, viewSizeInfo });
                 drawXRuler(helperContext, { scaleList: xList });

package/dist/esm/middleware/ruler/types.d.ts

@@ -0,0 +1,3 @@
+import { keySelectedElementList, keyActionType } from '../selector';
+import type { DeepSelectorSharedStorage } from '../selector';
+export type DeepRulerSharedStorage = Pick<DeepSelectorSharedStorage, typeof keySelectedElementList | typeof keyActionType>;

package/dist/esm/middleware/ruler/types.js

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

package/dist/esm/middleware/ruler/util.d.ts

@@ -1,4 +1,5 @@
-import type { ViewScaleInfo, ViewSizeInfo, ViewContext2D } from '@idraw/types';
+import type { ViewScaleInfo, ViewSizeInfo, ViewContext2D, BoardViewerFrameSnapshot, ViewCalculator } from '@idraw/types';
+import type { DeepRulerSharedStorage } from './types';
 interface RulerScale {
     num: number;
     showNum: boolean;
@@ -30,4 +31,8 @@ export declare function drawUnderGrid(ctx: ViewContext2D, opts: {
     viewScaleInfo: ViewScaleInfo;
     viewSizeInfo: ViewSizeInfo;
 }): void;
+export declare function drawScrollerSelectedArea(ctx: ViewContext2D, opts: {
+    snapshot: BoardViewerFrameSnapshot<DeepRulerSharedStorage>;
+    calculator: ViewCalculator;
+}): void;
 export {};

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

@@ -1,4 +1,5 @@
-import { formatNumber, rotateByCenter } from '@idraw/util';
+import { formatNumber, rotateByCenter, getViewScaleInfoFromSnapshot, getViewSizeInfoFromSnapshot } from '@idraw/util';
+import { keySelectedElementList, keyActionType } from '../selector';
 const rulerSize = 16;
 const background = '#FFFFFFA8';
 const borderColor = '#00000080';
@@ -10,6 +11,7 @@ const fontWeight = 100;
 const gridColor = '#AAAAAA20';
 const gridKeyColor = '#AAAAAA40';
 const lineSize = 1;
+const selectedAreaColor = '#196097';
 function calcRulerScaleList(opts) {
     const { scale, viewLength, viewOffset } = opts;
     const list = [];
@@ -185,3 +187,55 @@ export function drawUnderGrid(ctx, opts) {
         ctx.stroke();
     }
 }
+export function drawScrollerSelectedArea(ctx, opts) {
+    const { snapshot, calculator } = opts;
+    const { sharedStore } = snapshot;
+    const selectedElementList = sharedStore[keySelectedElementList];
+    const actionType = sharedStore[keyActionType];
+    if (['select', 'drag', 'drag-list', 'drag-list-end'].includes(actionType) && selectedElementList.length > 0) {
+        const viewScaleInfo = getViewScaleInfoFromSnapshot(snapshot);
+        const viewSizeInfo = getViewSizeInfoFromSnapshot(snapshot);
+        const rangeRectInfoList = [];
+        const xAreaStartList = [];
+        const xAreaEndList = [];
+        const yAreaStartList = [];
+        const yAreaEndList = [];
+        selectedElementList.forEach((elem) => {
+            const rectInfo = calculator.calcViewRectInfoFromRange(elem.uuid, {
+                viewScaleInfo,
+                viewSizeInfo
+            });
+            if (rectInfo) {
+                rangeRectInfoList.push(rectInfo);
+                xAreaStartList.push(rectInfo.left.x);
+                xAreaEndList.push(rectInfo.right.x);
+                yAreaStartList.push(rectInfo.top.y);
+                yAreaEndList.push(rectInfo.bottom.y);
+            }
+        });
+        if (!(rangeRectInfoList.length > 0)) {
+            return;
+        }
+        const xAreaStart = Math.min(...xAreaStartList);
+        const xAreaEnd = Math.max(...xAreaEndList);
+        const yAreaStart = Math.min(...yAreaStartList);
+        const yAreaEnd = Math.max(...yAreaEndList);
+        ctx.globalAlpha = 1;
+        ctx.beginPath();
+        ctx.moveTo(xAreaStart, 0);
+        ctx.lineTo(xAreaEnd, 0);
+        ctx.lineTo(xAreaEnd, rulerSize);
+        ctx.lineTo(xAreaStart, rulerSize);
+        ctx.fillStyle = selectedAreaColor;
+        ctx.closePath();
+        ctx.fill();
+        ctx.beginPath();
+        ctx.moveTo(0, yAreaStart);
+        ctx.lineTo(rulerSize, yAreaStart);
+        ctx.lineTo(rulerSize, yAreaEnd);
+        ctx.lineTo(0, yAreaEnd);
+        ctx.fillStyle = selectedAreaColor;
+        ctx.closePath();
+        ctx.fill();
+    }
+}

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

@@ -1,2 +1,3 @@
 import type { BoardMiddleware } from '@idraw/types';
-export declare const MiddlewareScroller: BoardMiddleware;
+import type { DeepScrollerSharedStorage } from './types';
+export declare const MiddlewareScroller: BoardMiddleware<DeepScrollerSharedStorage>;

package/dist/esm/middleware/scroller/types.d.ts

@@ -0,0 +1,9 @@
+import type { Point, ElementSize } from '@idraw/types';
+import { keyXThumbRect, keyYThumbRect, keyPrevPoint, keyActivePoint, keyActiveThumbType } from './config';
+export type DeepScrollerSharedStorage = {
+    [keyXThumbRect]: null | ElementSize;
+    [keyYThumbRect]: null | ElementSize;
+    [keyPrevPoint]: null | Point;
+    [keyActivePoint]: null | Point;
+    [keyActiveThumbType]: null | 'X' | 'Y';
+};

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

@@ -0,0 +1 @@
+import { keyXThumbRect, keyYThumbRect, keyPrevPoint, keyActivePoint, keyActiveThumbType } from './config';

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

@@ -2,7 +2,7 @@ import { getViewScaleInfoFromSnapshot, getViewSizeInfoFromSnapshot } from '@idra
 import { keyActivePoint, keyActiveThumbType, keyPrevPoint, keyXThumbRect, keyYThumbRect } from './config';
 const minScrollerWidth = 12;
 const scrollerLineWidth = 16;
-const scrollerThumbAlpha = 0.36;
+const scrollerThumbAlpha = 0.3;
 const scrollConfig = {
     width: minScrollerWidth,
     thumbColor: '#000000AA',

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

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

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

@@ -5,6 +5,8 @@ import { getPointTarget, resizeElement, rotateElement, getSelectedListArea, calc
 import { keyActionType, keyResizeType, keyAreaStart, keyAreaEnd, keyGroupQueue, keyGroupQueueVertexesList, keyHoverElement, keyHoverElementVertexes, keySelectedElementList, keySelectedElementListVertexes, keySelectedElementController, keySelectedElementPosition, keySelectedReferenceXLines, keySelectedReferenceYLines, keyIsMoving, controllerSize } from './config';
 import { calcReferenceInfo } from './reference';
 import { middlewareEventTextEdit } from '../text-editor';
+import { eventChange } from '../../config';
+export { keySelectedElementList, keyActionType, keyResizeType, keyGroupQueue };
 export const middlewareEventSelect = '@middleware/select';
 export const middlewareEventSelectClear = '@middleware/select-clear';
 export const MiddlewareSelector = (opts) => {
@@ -200,6 +202,11 @@ export const MiddlewareSelector = (opts) => {
                 }) }));
             triggerCursor(target);
             if (target.type === null) {
+                if (sharer.getSharedStorage(keyHoverElement) || sharer.getSharedStorage(keyHoverElementVertexes)) {
+                    sharer.setSharedStorage(keyHoverElement, null);
+                    sharer.setSharedStorage(keyHoverElementVertexes, null);
+                    viewer.drawFrame();
+                }
                 return;
             }
             if (target.type === 'over-element' &&
@@ -367,7 +374,7 @@ export const MiddlewareSelector = (opts) => {
                                     type: 'updateElement',
                                     content: {
                                         element: elem,
-                                        position: sharer.getSharedStorage(keySelectedElementPosition) || []
+                                        position: getElementPositionFromList(elem.uuid, data.elements) || []
                                     }
                                 },
                                 viewSizeInfo,
@@ -417,21 +424,22 @@ export const MiddlewareSelector = (opts) => {
                             resizeType,
                             sharer
                         });
-                        elems[0].angle = resizedElemSize.angle;
+                        elems[0].angle = calculator.toGridNum(resizedElemSize.angle || 0);
                     }
                     else {
                         const resizedElemSize = resizeElement(elems[0], { scale, start: resizeStart, end: resizeEnd, resizeType, sharer });
-                        elems[0].x = calculator.toGridNum(resizedElemSize.x);
-                        elems[0].y = calculator.toGridNum(resizedElemSize.y);
+                        const calcOpts = { ignore: !!elems[0].angle };
+                        elems[0].x = calculator.toGridNum(resizedElemSize.x, calcOpts);
+                        elems[0].y = calculator.toGridNum(resizedElemSize.y, calcOpts);
                         if (elems[0].type === 'group' && ((_c = elems[0].operations) === null || _c === void 0 ? void 0 : _c.deepResize) === true) {
                             deepResizeGroupElement(elems[0], {
-                                w: calculator.toGridNum(resizedElemSize.w),
-                                h: calculator.toGridNum(resizedElemSize.h)
+                                w: calculator.toGridNum(resizedElemSize.w, calcOpts),
+                                h: calculator.toGridNum(resizedElemSize.h, calcOpts)
                             });
                         }
                         else {
-                            elems[0].w = calculator.toGridNum(resizedElemSize.w);
-                            elems[0].h = calculator.toGridNum(resizedElemSize.h);
+                            elems[0].w = calculator.toGridNum(resizedElemSize.w, calcOpts);
+                            elems[0].h = calculator.toGridNum(resizedElemSize.h, calcOpts);
                         }
                     }
                     updateSelectedElementList([elems[0]]);
@@ -528,7 +536,7 @@ export const MiddlewareSelector = (opts) => {
                     if (type === 'resize') {
                         type = 'resizeElement';
                     }
-                    eventHub.trigger('change', { data, type });
+                    eventHub.trigger(eventChange, { data, type });
                 }
                 viewer.drawFrame();
             };