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

package/dist/esm/index.d.ts

@@ -1,4 +1,4 @@
-import type { Data, PointSize, CoreOptions, BoardMiddleware, ViewSizeInfo, CoreEventMap, ViewScaleInfo, LoadItemMap } from '@idraw/types';
+import type { Data, PointSize, CoreOptions, BoardMiddleware, ViewSizeInfo, CoreEventMap, ViewScaleInfo, LoadItemMap, ModifyOptions } from '@idraw/types';
 export { MiddlewareSelector, middlewareEventSelect, middlewareEventSelectClear } from './middleware/selector';
 export { MiddlewareScroller } from './middleware/scroller';
 export { MiddlewareScaler, middlewareEventScale } from './middleware/scaler';
@@ -12,7 +12,9 @@ export declare class Core<E extends CoreEventMap = CoreEventMap> {
     destroy(): void;
     use(middleware: BoardMiddleware<any, any>): void;
     disuse(middleware: BoardMiddleware<any, any>): void;
-    setData(data: Data): void;
+    setData(data: Data, opts?: {
+        modifiedOptions?: ModifyOptions;
+    }): void;
     getData(): Data | null;
     scale(opts: {
         scale: number;

package/dist/esm/index.js

@@ -61,9 +61,9 @@ export class Core {
     disuse(middleware) {
         __classPrivateFieldGet(this, _Core_board, "f").disuse(middleware);
     }
-    setData(data) {
+    setData(data, opts) {
         validateElements((data === null || data === void 0 ? void 0 : data.elements) || []);
-        __classPrivateFieldGet(this, _Core_board, "f").setData(data);
+        __classPrivateFieldGet(this, _Core_board, "f").setData(data, opts);
     }
     getData() {
         return __classPrivateFieldGet(this, _Core_board, "f").getData();

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

@@ -8,6 +8,9 @@ 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 keySelectedReferenceXLines: unique symbol;
+export declare const keySelectedReferenceYLines: unique symbol;
 export declare const keyGroupQueue: unique symbol;
 export declare const keyGroupQueueVertexesList: unique symbol;
 export declare const keyIsMoving: unique symbol;
@@ -24,3 +27,4 @@ export declare const wrapperColor = "#1973ba";
 export declare const lockColor = "#5b5959b5";
 export declare const controllerSize = 10;
 export declare const auxiliaryColor = "#f7276e";
+export declare const referenceColor = "#f7276e";

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

@@ -8,6 +8,9 @@ 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 keySelectedReferenceXLines = Symbol(`${key}_selectedReferenceXLines`);
+export const keySelectedReferenceYLines = Symbol(`${key}_selectedReferenceYLines`);
 export const keyGroupQueue = Symbol(`${key}_groupQueue`);
 export const keyGroupQueueVertexesList = Symbol(`${key}_groupQueueVertexesList`);
 export const keyIsMoving = Symbol(`${key}_isMoving`);
@@ -24,3 +27,4 @@ export const wrapperColor = '#1973ba';
 export const lockColor = '#5b5959b5';
 export const controllerSize = 10;
 export const auxiliaryColor = '#f7276e';
+export const referenceColor = '#f7276e';

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

@@ -1,7 +1,7 @@
-import type { ViewContext2D, ViewRectVertexes, Element, ViewScaleInfo } from '@idraw/types';
-export declare function drawAuxiliaryLines(ctx: ViewContext2D, opts: {
-    vertexes: ViewRectVertexes;
+import type { ViewContext2D, Element, ViewScaleInfo, ViewSizeInfo, ViewCalculator } from '@idraw/types';
+export declare function drawAuxiliaryExperimentBox(ctx: ViewContext2D, opts: {
+    calculator: ViewCalculator;
     element: Element | null;
-    groupQueue: Element<'group'>[];
     viewScaleInfo: ViewScaleInfo;
+    viewSizeInfo: ViewSizeInfo;
 }): void;

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

@@ -1,25 +1,40 @@
-import { getElementViewRectInfo } from './auxiliary';
 import { auxiliaryColor } from './config';
 import { drawLine, drawCrossByCenter } from './draw-base';
-export function drawAuxiliaryLines(ctx, opts) {
-    const { element, groupQueue, viewScaleInfo } = opts;
+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 function drawAuxiliaryExperimentBox(ctx, opts) {
+    const { element, viewScaleInfo, viewSizeInfo, calculator } = opts;
     if (!element) {
         return;
     }
-    const viewRectInfo = getElementViewRectInfo(element, {
-        groupQueue,
-        viewScaleInfo
-    });
+    const viewRectInfo = calculator.calcViewRectInfoFromRange(element.uuid, { viewScaleInfo, viewSizeInfo });
+    if (!viewRectInfo) {
+        return;
+    }
     const lineOpts = {
         borderColor: auxiliaryColor,
         borderWidth: 1,
         lineDash: []
     };
-    drawLine(ctx, viewRectInfo.topLeft, viewRectInfo.topRight, lineOpts);
-    drawLine(ctx, viewRectInfo.topRight, viewRectInfo.bottomRight, lineOpts);
-    drawLine(ctx, viewRectInfo.bottomRight, viewRectInfo.bottomLeft, lineOpts);
-    drawLine(ctx, viewRectInfo.bottomLeft, viewRectInfo.topLeft, lineOpts);
+    const boxInfo = getViewBoxInfo(viewRectInfo);
+    const { width, height } = viewSizeInfo;
+    drawLine(ctx, { x: boxInfo.minX, y: 0 }, { x: boxInfo.minX, y: height }, lineOpts);
+    drawLine(ctx, { x: boxInfo.midX, y: 0 }, { x: boxInfo.midX, y: height }, lineOpts);
+    drawLine(ctx, { x: boxInfo.maxX, y: 0 }, { x: boxInfo.maxX, y: height }, lineOpts);
+    drawLine(ctx, { x: 0, y: boxInfo.minY }, { x: width, y: boxInfo.minY }, lineOpts);
+    drawLine(ctx, { x: 0, y: boxInfo.midY }, { x: width, y: boxInfo.midY }, lineOpts);
+    drawLine(ctx, { x: 0, y: boxInfo.maxY }, { x: width, y: boxInfo.maxY }, lineOpts);
     const crossOpts = Object.assign(Object.assign({}, lineOpts), { size: 6 });
+    drawCrossByCenter(ctx, viewRectInfo.center, crossOpts);
     drawCrossByCenter(ctx, viewRectInfo.topLeft, crossOpts);
     drawCrossByCenter(ctx, viewRectInfo.topRight, crossOpts);
     drawCrossByCenter(ctx, viewRectInfo.bottomLeft, crossOpts);

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

@@ -0,0 +1,5 @@
+import type { ViewContext2D, PointSize } from '@idraw/types';
+export declare function drawReferenceLines(ctx: ViewContext2D, opts: {
+    xLines?: Array<PointSize[]>;
+    yLines?: Array<PointSize[]>;
+}): void;

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

@@ -0,0 +1,31 @@
+import { referenceColor } from './config';
+import { drawLine, drawCrossByCenter } from './draw-base';
+export function drawReferenceLines(ctx, opts) {
+    const { xLines, yLines } = opts;
+    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,4 +1,4 @@
-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 } from '@idraw/types';
 import type { AreaSize } from './types';
 export declare function drawHoverVertexesWrapper(ctx: ViewContext2D, vertexes: ViewRectVertexes | null, opts: {
     viewScaleInfo: ViewScaleInfo;
@@ -14,7 +14,7 @@ export declare function drawSelectedElementControllersVertexes(ctx: ViewContext2
     viewScaleInfo: ViewScaleInfo;
     viewSizeInfo: ViewSizeInfo;
     element: Element | null;
-    groupQueue: Element<'group'>[];
+    calculator: ViewCalculator;
 }): void;
 export declare function drawElementListShadows(ctx: ViewContext2D, elements: Element<ElementType>[], opts?: Omit<RendererDrawElementOptions, 'loader'>): void;
 export declare function drawArea(ctx: ViewContext2D, opts: {

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

@@ -1,4 +1,4 @@
-import { rotateElementVertexes, calcViewPointSize, calcViewVertexes } from '@idraw/util';
+import { rotateElementVertexes, calcViewPointSize, calcViewVertexes, calcViewElementSize } from '@idraw/util';
 import { resizeControllerBorderWidth, areaBorderWidth, wrapperColor, selectWrapperBorderWidth, lockColor, controllerSize } from './config';
 import { drawVertexes, drawLine, drawCircleController, drawCrossVertexes } from './draw-base';
 export function drawHoverVertexesWrapper(ctx, vertexes, opts) {
@@ -51,8 +51,7 @@ export function drawElementListShadows(ctx, elements, opts) {
         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;

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

@@ -1,7 +1,9 @@
-import { calcElementsViewInfo, calcElementVertexesInGroup, calcElementQueueVertexesQueueInGroup, calcElementSizeController, calcElementCenterFromVertexes, rotatePointInGroup, getGroupQueueFromList, findElementsFromList, findElementsFromListByPositions, getElementPositionFromList, deepResizeGroupElement } from '@idraw/util';
+import { is, calcElementsViewInfo, calcElementVertexesInGroup, calcElementQueueVertexesQueueInGroup, calcElementSizeController, calcElementCenterFromVertexes, rotatePointInGroup, getGroupQueueFromList, findElementsFromList, findElementsFromListByPositions, getElementPositionFromList, deepResizeGroupElement } from '@idraw/util';
 import { drawHoverVertexesWrapper, drawLockVertexesWrapper, drawArea, drawListArea, drawGroupQueueVertexesWrappers, drawSelectedElementControllersVertexes } from './draw-wrapper';
+import { drawReferenceLines } from './draw-reference';
 import { getPointTarget, resizeElement, rotateElement, getSelectedListArea, calcSelectedElementsArea, isElementInGroup, isPointInViewActiveGroup, calcMoveInGroup } from './util';
-import { keyActionType, keyResizeType, keyAreaStart, keyAreaEnd, keyGroupQueue, keyGroupQueueVertexesList, keyHoverElement, keyHoverElementVertexes, keySelectedElementList, keySelectedElementListVertexes, keySelectedElementController, keyIsMoving, controllerSize } from './config';
+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 const middlewareEventSelect = '@middleware/select';
 export const middlewareEventSelectClear = '@middleware/select-clear';
@@ -46,6 +48,7 @@ export const MiddlewareSelector = (opts) => {
         sharer.setSharedStorage(keyHoverElementVertexes, vertexes);
     };
     const updateSelectedElementList = (list, opts) => {
+        var _a;
         sharer.setSharedStorage(keySelectedElementList, list);
         if (list.length === 1) {
             const controller = calcElementSizeController(list[0], {
@@ -54,9 +57,11 @@ export const MiddlewareSelector = (opts) => {
                 viewScaleInfo: sharer.getActiveViewScaleInfo()
             });
             sharer.setSharedStorage(keySelectedElementController, controller);
+            sharer.setSharedStorage(keySelectedElementPosition, getElementPositionFromList(list[0].uuid, ((_a = sharer.getActiveStorage('data')) === null || _a === void 0 ? void 0 : _a.elements) || []));
         }
         else {
             sharer.setSharedStorage(keySelectedElementController, null);
+            sharer.setSharedStorage(keySelectedElementPosition, []);
         }
         if ((opts === null || opts === void 0 ? void 0 : opts.triggerEvent) === true) {
             eventHub.trigger(middlewareEventSelect, { uuids: list.map((elem) => elem.uuid) });
@@ -72,7 +77,8 @@ export const MiddlewareSelector = (opts) => {
             viewSizeInfo: sharer.getActiveViewSizeInfo(),
             groupQueue: sharer.getSharedStorage(keyGroupQueue),
             areaSize: null,
-            selectedElementController: sharer.getSharedStorage(keySelectedElementController)
+            selectedElementController: sharer.getSharedStorage(keySelectedElementController),
+            selectedElementPosition: sharer.getSharedStorage(keySelectedElementPosition)
         };
     };
     const clear = () => {
@@ -87,6 +93,9 @@ export const MiddlewareSelector = (opts) => {
         sharer.setSharedStorage(keySelectedElementList, []);
         sharer.setSharedStorage(keySelectedElementListVertexes, null);
         sharer.setSharedStorage(keySelectedElementController, null);
+        sharer.setSharedStorage(keySelectedElementPosition, []);
+        sharer.setSharedStorage(keySelectedReferenceXLines, []);
+        sharer.setSharedStorage(keySelectedReferenceYLines, []);
         sharer.setSharedStorage(keyIsMoving, null);
     };
     clear();
@@ -285,6 +294,8 @@ export const MiddlewareSelector = (opts) => {
         },
         pointMove: (e) => {
             var _a, _b, _c;
+            sharer.setSharedStorage(keySelectedReferenceXLines, []);
+            sharer.setSharedStorage(keySelectedReferenceYLines, []);
             sharer.setSharedStorage(keyIsMoving, true);
             const data = sharer.getActiveStorage('data');
             const elems = getActiveElements();
@@ -300,9 +311,44 @@ export const MiddlewareSelector = (opts) => {
                 inBusyMode = 'drag';
                 if (data && (elems === null || elems === void 0 ? void 0 : elems.length) === 1 && start && end && ((_b = (_a = elems[0]) === null || _a === void 0 ? void 0 : _a.operations) === null || _b === void 0 ? void 0 : _b.lock) !== true) {
                     const { moveX, moveY } = calcMoveInGroup(start, end, groupQueue);
-                    elems[0].x += moveX / scale;
-                    elems[0].y += moveY / scale;
+                    let totalMoveX = calculator.toGridNum(moveX / scale);
+                    let totalMoveY = calculator.toGridNum(moveY / scale);
+                    const referenceInfo = calcReferenceInfo(elems[0].uuid, {
+                        calculator,
+                        data,
+                        groupQueue,
+                        viewScaleInfo,
+                        viewSizeInfo
+                    });
+                    try {
+                        if (referenceInfo) {
+                            if (is.x(referenceInfo.offsetX) && referenceInfo.offsetX !== null) {
+                                totalMoveX = calculator.toGridNum(totalMoveX + referenceInfo.offsetX);
+                            }
+                            if (is.y(referenceInfo.offsetY) && referenceInfo.offsetY !== null) {
+                                totalMoveY = calculator.toGridNum(totalMoveY + referenceInfo.offsetY);
+                            }
+                            sharer.setSharedStorage(keySelectedReferenceXLines, referenceInfo.xLines);
+                            sharer.setSharedStorage(keySelectedReferenceYLines, referenceInfo.yLines);
+                        }
+                    }
+                    catch (err) {
+                        console.error(err);
+                    }
+                    elems[0].x = calculator.toGridNum(elems[0].x + totalMoveX);
+                    elems[0].y = calculator.toGridNum(elems[0].y + totalMoveY);
                     updateSelectedElementList([elems[0]]);
+                    calculator.modifyViewVisibleInfoMap(data, {
+                        modifyOptions: {
+                            type: 'updateElement',
+                            content: {
+                                element: elems[0],
+                                position: sharer.getSharedStorage(keySelectedElementPosition) || []
+                            }
+                        },
+                        viewSizeInfo,
+                        viewScaleInfo
+                    });
                 }
                 viewer.drawFrame();
             }
@@ -314,8 +360,19 @@ export const MiddlewareSelector = (opts) => {
                     elems.forEach((elem) => {
                         var _a;
                         if (elem && ((_a = elem === null || elem === void 0 ? void 0 : elem.operations) === null || _a === void 0 ? void 0 : _a.lock) !== true) {
-                            elem.x += moveX;
-                            elem.y += moveY;
+                            elem.x = calculator.toGridNum(elem.x + moveX);
+                            elem.y = calculator.toGridNum(elem.y + moveY);
+                            calculator.modifyViewVisibleInfoMap(data, {
+                                modifyOptions: {
+                                    type: 'updateElement',
+                                    content: {
+                                        element: elem,
+                                        position: sharer.getSharedStorage(keySelectedElementPosition) || []
+                                    }
+                                },
+                                viewSizeInfo,
+                                viewScaleInfo
+                            });
                         }
                     });
                     sharer.setActiveStorage('data', data);
@@ -364,20 +421,31 @@ export const MiddlewareSelector = (opts) => {
                     }
                     else {
                         const resizedElemSize = resizeElement(elems[0], { scale, start: resizeStart, end: resizeEnd, resizeType, sharer });
-                        elems[0].x = resizedElemSize.x;
-                        elems[0].y = resizedElemSize.y;
+                        elems[0].x = calculator.toGridNum(resizedElemSize.x);
+                        elems[0].y = calculator.toGridNum(resizedElemSize.y);
                         if (elems[0].type === 'group' && ((_c = elems[0].operations) === null || _c === void 0 ? void 0 : _c.deepResize) === true) {
                             deepResizeGroupElement(elems[0], {
-                                w: resizedElemSize.w,
-                                h: resizedElemSize.h
+                                w: calculator.toGridNum(resizedElemSize.w),
+                                h: calculator.toGridNum(resizedElemSize.h)
                             });
                         }
                         else {
-                            elems[0].w = resizedElemSize.w;
-                            elems[0].h = resizedElemSize.h;
+                            elems[0].w = calculator.toGridNum(resizedElemSize.w);
+                            elems[0].h = calculator.toGridNum(resizedElemSize.h);
                         }
                     }
                     updateSelectedElementList([elems[0]]);
+                    calculator.modifyViewVisibleInfoMap(data, {
+                        modifyOptions: {
+                            type: 'updateElement',
+                            content: {
+                                element: elems[0],
+                                position: sharer.getSharedStorage(keySelectedElementPosition) || []
+                            }
+                        },
+                        viewSizeInfo,
+                        viewScaleInfo
+                    });
                     viewer.drawFrame();
                 }
             }
@@ -390,6 +458,8 @@ export const MiddlewareSelector = (opts) => {
         },
         pointEnd(e) {
             inBusyMode = null;
+            sharer.setSharedStorage(keySelectedReferenceXLines, []);
+            sharer.setSharedStorage(keySelectedReferenceYLines, []);
             sharer.setSharedStorage(keyIsMoving, false);
             const data = sharer.getActiveStorage('data');
             const resizeType = sharer.getSharedStorage(keyResizeType);
@@ -536,7 +606,15 @@ export const MiddlewareSelector = (opts) => {
                     }
                 }
                 if (!isLock && elem && ['select', 'drag', 'resize'].includes(actionType)) {
-                    drawSelectedElementControllersVertexes(helperContext, selectedElementController, Object.assign(Object.assign({}, drawBaseOpts), { element: elem, groupQueue, hideControllers: !!isMoving && actionType === 'drag' }));
+                    drawSelectedElementControllersVertexes(helperContext, selectedElementController, Object.assign(Object.assign({}, drawBaseOpts), { element: elem, calculator, hideControllers: !!isMoving && actionType === 'drag' }));
+                    if (actionType === 'drag') {
+                        const xLines = sharer.getSharedStorage(keySelectedReferenceXLines);
+                        const yLines = sharer.getSharedStorage(keySelectedReferenceYLines);
+                        drawReferenceLines(helperContext, {
+                            xLines,
+                            yLines
+                        });
+                    }
                 }
             }
             else {
@@ -553,7 +631,15 @@ export const MiddlewareSelector = (opts) => {
                     }
                 }
                 if (!isLock && elem && ['select', 'drag', 'resize'].includes(actionType)) {
-                    drawSelectedElementControllersVertexes(helperContext, selectedElementController, Object.assign(Object.assign({}, drawBaseOpts), { element: elem, groupQueue, hideControllers: !!isMoving && actionType === 'drag' }));
+                    drawSelectedElementControllersVertexes(helperContext, selectedElementController, Object.assign(Object.assign({}, drawBaseOpts), { element: elem, calculator, hideControllers: !!isMoving && actionType === 'drag' }));
+                    if (actionType === 'drag') {
+                        const xLines = sharer.getSharedStorage(keySelectedReferenceXLines);
+                        const yLines = sharer.getSharedStorage(keySelectedReferenceYLines);
+                        drawReferenceLines(helperContext, {
+                            xLines,
+                            yLines
+                        });
+                    }
                 }
                 else if (actionType === 'area' && areaStart && areaEnd) {
                     drawArea(helperContext, { start: areaStart, end: areaEnd });

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

@@ -0,0 +1,13 @@
+import type { Data, Element, PointSize, ViewScaleInfo, ViewSizeInfo, ViewCalculator } from '@idraw/types';
+export declare function calcReferenceInfo(uuid: string, opts: {
+    data: Data;
+    groupQueue: Element<'group'>[];
+    calculator: ViewCalculator;
+    viewScaleInfo: ViewScaleInfo;
+    viewSizeInfo: ViewSizeInfo;
+}): {
+    offsetX: number | null;
+    offsetY: number | null;
+    yLines: PointSize[][];
+    xLines: PointSize[][];
+} | null;