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

package/dist/esm/index.d.ts

@@ -5,6 +5,7 @@ export { MiddlewareScaler, middlewareEventScale } from './middleware/scaler';
 export { MiddlewareRuler, middlewareEventRuler } from './middleware/ruler';
 export { MiddlewareTextEditor, middlewareEventTextEdit, middlewareEventTextChange } from './middleware/text-editor';
 export { MiddlewareDragger } from './middleware/dragger';
+export { MiddlewareInfo } from './middleware/info';
 export declare class Core<E extends CoreEventMap = CoreEventMap> {
     #private;
     constructor(container: HTMLDivElement, opts: CoreOptions);

package/dist/esm/index.js

@@ -19,6 +19,7 @@ export { MiddlewareScaler, middlewareEventScale } from './middleware/scaler';
 export { MiddlewareRuler, middlewareEventRuler } from './middleware/ruler';
 export { MiddlewareTextEditor, middlewareEventTextEdit, middlewareEventTextChange } from './middleware/text-editor';
 export { MiddlewareDragger } from './middleware/dragger';
+export { MiddlewareInfo } from './middleware/info';
 export class Core {
     constructor(container, opts) {
         _Core_instances.add(this);

package/dist/esm/middleware/info/draw-info.d.ts

@@ -0,0 +1,31 @@
+import type { PointSize, ViewContext2D } from '@idraw/types';
+export declare function drawSizeInfoText(ctx: ViewContext2D, opts: {
+    point: PointSize;
+    rotateCenter: PointSize;
+    angle: number;
+    text: string;
+    fontSize: number;
+    lineHeight: number;
+    color: string;
+    background: string;
+}): void;
+export declare function drawPositionInfoText(ctx: ViewContext2D, opts: {
+    point: PointSize;
+    rotateCenter: PointSize;
+    angle: number;
+    text: string;
+    fontSize: number;
+    lineHeight: number;
+    color: string;
+    background: string;
+}): void;
+export declare function drawAngleInfoText(ctx: ViewContext2D, opts: {
+    point: PointSize;
+    rotateCenter: PointSize;
+    angle: number;
+    text: string;
+    fontSize: number;
+    lineHeight: number;
+    color: string;
+    background: string;
+}): void;

package/dist/esm/middleware/info/draw-info.js

@@ -0,0 +1,110 @@
+import { rotateByCenter } from '@idraw/util';
+const fontFamily = 'monospace';
+export function drawSizeInfoText(ctx, opts) {
+    const { point, rotateCenter, angle, text, color, background, fontSize, lineHeight } = opts;
+    rotateByCenter(ctx, angle, rotateCenter, () => {
+        ctx.$setFont({
+            fontWeight: '300',
+            fontSize,
+            fontFamily
+        });
+        const padding = (lineHeight - fontSize) / 2;
+        const textWidth = ctx.$undoPixelRatio(ctx.measureText(text).width);
+        const bgStart = {
+            x: point.x - textWidth / 2 - padding,
+            y: point.y
+        };
+        const bgEnd = {
+            x: bgStart.x + textWidth + padding * 2,
+            y: bgStart.y + fontSize + padding
+        };
+        const textStart = {
+            x: point.x - textWidth / 2,
+            y: point.y
+        };
+        ctx.setLineDash([]);
+        ctx.fillStyle = background;
+        ctx.beginPath();
+        ctx.moveTo(bgStart.x, bgStart.y);
+        ctx.lineTo(bgEnd.x, bgStart.y);
+        ctx.lineTo(bgEnd.x, bgEnd.y);
+        ctx.lineTo(bgStart.x, bgEnd.y);
+        ctx.closePath();
+        ctx.fill();
+        ctx.fillStyle = color;
+        ctx.textBaseline = 'top';
+        ctx.fillText(text, textStart.x, textStart.y + padding);
+    });
+}
+export function drawPositionInfoText(ctx, opts) {
+    const { point, rotateCenter, angle, text, color, background, fontSize, lineHeight } = opts;
+    rotateByCenter(ctx, angle, rotateCenter, () => {
+        ctx.$setFont({
+            fontWeight: '300',
+            fontSize,
+            fontFamily
+        });
+        const padding = (lineHeight - fontSize) / 2;
+        const textWidth = ctx.$undoPixelRatio(ctx.measureText(text).width);
+        const bgStart = {
+            x: point.x,
+            y: point.y
+        };
+        const bgEnd = {
+            x: bgStart.x + textWidth + padding * 2,
+            y: bgStart.y + fontSize + padding
+        };
+        const textStart = {
+            x: point.x + padding,
+            y: point.y
+        };
+        ctx.setLineDash([]);
+        ctx.fillStyle = background;
+        ctx.beginPath();
+        ctx.moveTo(bgStart.x, bgStart.y);
+        ctx.lineTo(bgEnd.x, bgStart.y);
+        ctx.lineTo(bgEnd.x, bgEnd.y);
+        ctx.lineTo(bgStart.x, bgEnd.y);
+        ctx.closePath();
+        ctx.fill();
+        ctx.fillStyle = color;
+        ctx.textBaseline = 'top';
+        ctx.fillText(text, textStart.x, textStart.y + padding);
+    });
+}
+export function drawAngleInfoText(ctx, opts) {
+    const { point, rotateCenter, angle, text, color, background, fontSize, lineHeight } = opts;
+    rotateByCenter(ctx, angle, rotateCenter, () => {
+        ctx.$setFont({
+            fontWeight: '300',
+            fontSize,
+            fontFamily
+        });
+        const padding = (lineHeight - fontSize) / 2;
+        const textWidth = ctx.$undoPixelRatio(ctx.measureText(text).width);
+        const bgStart = {
+            x: point.x,
+            y: point.y
+        };
+        const bgEnd = {
+            x: bgStart.x + textWidth + padding * 2,
+            y: bgStart.y + fontSize + padding
+        };
+        const textStart = {
+            x: point.x + padding,
+            y: point.y
+        };
+        ctx.setLineDash([]);
+        ctx.fillStyle = background;
+        ctx.beginPath();
+        ctx.moveTo(bgStart.x, bgStart.y);
+        ctx.lineTo(bgEnd.x, bgStart.y);
+        ctx.lineTo(bgEnd.x, bgEnd.y);
+        ctx.lineTo(bgStart.x, bgEnd.y);
+        ctx.closePath();
+        ctx.fill();
+        ctx.fillStyle = color;
+        ctx.textBaseline = 'top';
+        ctx.fillText(text, textStart.x, textStart.y + padding);
+    });
+}

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

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

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

@@ -0,0 +1,110 @@
+import { formatNumber, getViewScaleInfoFromSnapshot, getViewSizeInfoFromSnapshot, createUUID, limitAngle, rotatePoint, parseAngleToRadian } from '@idraw/util';
+import { keySelectedElementList, keyActionType, keyGroupQueue } from '../selector';
+import { drawSizeInfoText, drawPositionInfoText, drawAngleInfoText } from './draw-info';
+const infoBackground = '#1973bac6';
+const infoTextColor = '#ffffff';
+const infoFontSize = 10;
+const infoLineHeight = 16;
+export const MiddlewareInfo = (opts) => {
+    const { boardContent, calculator } = opts;
+    const { helperContext } = boardContent;
+    return {
+        name: '@middleware/info',
+        beforeDrawFrame({ snapshot }) {
+            const { sharedStore } = snapshot;
+            const selectedElementList = sharedStore[keySelectedElementList];
+            const actionType = sharedStore[keyActionType];
+            const groupQueue = sharedStore[keyGroupQueue] || [];
+            if (selectedElementList.length === 1) {
+                const elem = selectedElementList[0];
+                if (elem && ['select', 'drag', 'resize'].includes(actionType)) {
+                    const viewScaleInfo = getViewScaleInfoFromSnapshot(snapshot);
+                    const viewSizeInfo = getViewSizeInfoFromSnapshot(snapshot);
+                    const { x, y, w, h, angle } = elem;
+                    const totalGroupQueue = [
+                        ...groupQueue,
+                        ...[
+                            {
+                                uuid: createUUID(),
+                                x,
+                                y,
+                                w,
+                                h,
+                                angle,
+                                type: 'group',
+                                detail: { children: [] }
+                            }
+                        ]
+                    ];
+                    const calcOpts = { viewScaleInfo, viewSizeInfo };
+                    const rangeRectInfo = calculator.calcViewRectInfoFromOrigin(elem.uuid, calcOpts);
+                    let totalAngle = 0;
+                    totalGroupQueue.forEach((group) => {
+                        totalAngle += group.angle || 0;
+                    });
+                    const totalRadian = parseAngleToRadian(limitAngle(0 - totalAngle));
+                    if (rangeRectInfo) {
+                        const elemCenter = rangeRectInfo === null || rangeRectInfo === void 0 ? void 0 : rangeRectInfo.center;
+                        const rectInfo = {
+                            topLeft: rotatePoint(elemCenter, rangeRectInfo.topLeft, totalRadian),
+                            topRight: rotatePoint(elemCenter, rangeRectInfo.topRight, totalRadian),
+                            bottomRight: rotatePoint(elemCenter, rangeRectInfo.bottomRight, totalRadian),
+                            bottomLeft: rotatePoint(elemCenter, rangeRectInfo.bottomLeft, totalRadian),
+                            center: rotatePoint(elemCenter, rangeRectInfo.center, totalRadian),
+                            top: rotatePoint(elemCenter, rangeRectInfo.top, totalRadian),
+                            right: rotatePoint(elemCenter, rangeRectInfo.right, totalRadian),
+                            bottom: rotatePoint(elemCenter, rangeRectInfo.bottom, totalRadian),
+                            left: rotatePoint(elemCenter, rangeRectInfo.left, totalRadian)
+                        };
+                        const x = formatNumber(elem.x, { decimalPlaces: 2 });
+                        const y = formatNumber(elem.y, { decimalPlaces: 2 });
+                        const w = formatNumber(elem.w, { decimalPlaces: 2 });
+                        const h = formatNumber(elem.h, { decimalPlaces: 2 });
+                        const xyText = `${formatNumber(x, { decimalPlaces: 0 })},${formatNumber(y, { decimalPlaces: 0 })}`;
+                        const whText = `${formatNumber(w, { decimalPlaces: 0 })}x${formatNumber(h, { decimalPlaces: 0 })}`;
+                        const angleText = `${formatNumber(elem.angle || 0, { decimalPlaces: 0 })}°`;
+                        drawSizeInfoText(helperContext, {
+                            point: {
+                                x: rectInfo.bottom.x,
+                                y: rectInfo.bottom.y + infoFontSize
+                            },
+                            rotateCenter: rectInfo.center,
+                            angle: totalAngle,
+                            text: whText,
+                            fontSize: infoFontSize,
+                            lineHeight: infoLineHeight,
+                            color: infoTextColor,
+                            background: infoBackground
+                        });
+                        drawPositionInfoText(helperContext, {
+                            point: {
+                                x: rectInfo.topLeft.x,
+                                y: rectInfo.topLeft.y - infoFontSize * 2
+                            },
+                            rotateCenter: rectInfo.center,
+                            angle: totalAngle,
+                            text: xyText,
+                            fontSize: infoFontSize,
+                            lineHeight: infoLineHeight,
+                            color: infoTextColor,
+                            background: infoBackground
+                        });
+                        drawAngleInfoText(helperContext, {
+                            point: {
+                                x: rectInfo.top.x + infoFontSize,
+                                y: rectInfo.top.y - infoFontSize * 2
+                            },
+                            rotateCenter: rectInfo.center,
+                            angle: totalAngle,
+                            text: angleText,
+                            fontSize: infoFontSize,
+                            lineHeight: infoLineHeight,
+                            color: infoTextColor,
+                            background: infoBackground
+                        });
+                    }
+                }
+            }
+        }
+    };
+};

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

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

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

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

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 { keyActionType, keyResizeType, keyGroupQueue, keySelectedElementList } from './config';
+export { keySelectedElementList, keyActionType, keyResizeType, keyGroupQueue };
+export type { DeepSelectorSharedStorage };
 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,7 @@ 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';
+export { keySelectedElementList, keyActionType, keyResizeType, keyGroupQueue };
 export const middlewareEventSelect = '@middleware/select';
 export const middlewareEventSelectClear = '@middleware/select-clear';
 export const MiddlewareSelector = (opts) => {
@@ -367,7 +368,7 @@ export const MiddlewareSelector = (opts) => {
                                     type: 'updateElement',
                                     content: {
                                         element: elem,
-                                        position: sharer.getSharedStorage(keySelectedElementPosition) || []
+                                        position: getElementPositionFromList(elem.uuid, data.elements) || []
                                     }
                                 },
                                 viewSizeInfo,
@@ -417,21 +418,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]]);