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

package/dist/esm/config.d.ts

@@ -0,0 +1 @@
+export declare const eventChange = "change";

package/dist/esm/config.js

@@ -0,0 +1 @@
+export const eventChange = 'change';

package/dist/esm/index.d.ts

@@ -1,4 +1,5 @@
 import type { Data, PointSize, CoreOptions, BoardMiddleware, ViewSizeInfo, CoreEventMap, ViewScaleInfo, LoadItemMap, ModifyOptions } from '@idraw/types';
+export { eventChange } from './config';
 export { MiddlewareSelector, middlewareEventSelect, middlewareEventSelectClear } from './middleware/selector';
 export { MiddlewareScroller } from './middleware/scroller';
 export { MiddlewareScaler, middlewareEventScale } from './middleware/scaler';
@@ -6,6 +7,7 @@ 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 { MiddlewareLayoutSelector } from './middleware/layout-selector';
 export declare class Core<E extends CoreEventMap = CoreEventMap> {
     #private;
     constructor(container: HTMLDivElement, opts: CoreOptions);

package/dist/esm/index.js

@@ -13,6 +13,7 @@ var _Core_instances, _Core_board, _Core_canvas, _Core_container, _Core_initConta
 import { Board } from '@idraw/board';
 import { createBoardContent, validateElements } from '@idraw/util';
 import { Cursor } from './lib/cursor';
+export { eventChange } from './config';
 export { MiddlewareSelector, middlewareEventSelect, middlewareEventSelectClear } from './middleware/selector';
 export { MiddlewareScroller } from './middleware/scroller';
 export { MiddlewareScaler, middlewareEventScale } from './middleware/scaler';
@@ -20,6 +21,7 @@ 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 { MiddlewareLayoutSelector } from './middleware/layout-selector';
 export class Core {
     constructor(container, opts) {
         _Core_instances.add(this);

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

@@ -0,0 +1,6 @@
+export declare const key = "LAYOUT_SELECT";
+export declare const keyLayoutActionType: unique symbol;
+export declare const keyLayoutControlType: unique symbol;
+export declare const keyLayoutController: unique symbol;
+export declare const selectColor = "#1973ba";
+export declare const disableColor = "#5b5959b5";

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

@@ -0,0 +1,6 @@
+export const key = 'LAYOUT_SELECT';
+export const keyLayoutActionType = Symbol(`${key}_layoutActionType`);
+export const keyLayoutControlType = Symbol(`${key}_layoutControlType`);
+export const keyLayoutController = Symbol(`${key}_layoutController`);
+export const selectColor = '#1973ba';
+export const disableColor = '#5b5959b5';

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

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

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

@@ -0,0 +1,251 @@
+import { calcLayoutSizeController, isViewPointInVertexes, getViewScaleInfoFromSnapshot } from '@idraw/util';
+import { keyLayoutActionType, keyLayoutController, keyLayoutControlType } from './config';
+import { keyActionType as keyElementActionType, middlewareEventSelectClear } from '../selector';
+import { drawLayoutController } from './util';
+import { eventChange } from '../../config';
+export const MiddlewareLayoutSelector = (opts) => {
+    const { sharer, boardContent, calculator, viewer, eventHub } = opts;
+    const { helperContext } = boardContent;
+    let prevPoint = null;
+    const clear = () => {
+        prevPoint = null;
+        sharer.setSharedStorage(keyLayoutActionType, null);
+        sharer.setSharedStorage(keyLayoutControlType, null);
+        sharer.setSharedStorage(keyLayoutController, null);
+    };
+    const isInElementAction = () => {
+        const elementType = sharer.getSharedStorage(keyElementActionType);
+        if (elementType) {
+            return true;
+        }
+        return false;
+    };
+    const isDisbaledControl = (controlType) => {
+        var _a;
+        const data = sharer.getActiveStorage('data');
+        if ((_a = data === null || data === void 0 ? void 0 : data.layout) === null || _a === void 0 ? void 0 : _a.operations) {
+            const operations = data.layout.operations;
+            if (controlType === 'left' && operations.disableLeft === true) {
+                return true;
+            }
+            if (controlType === 'top' && operations.disableTop === true) {
+                return true;
+            }
+            if (controlType === 'right' && operations.disableRight === true) {
+                return true;
+            }
+            if (controlType === 'bottom' && operations.disableBottom === true) {
+                return true;
+            }
+            if (controlType === 'top-left' && operations.disableTopLeft === true) {
+                return true;
+            }
+            if (controlType === 'top-right' && operations.disableTopRight === true) {
+                return true;
+            }
+            if (controlType === 'bottom-left' && operations.disableBottomLeft === true) {
+                return true;
+            }
+            if (controlType === 'bottom-right' && operations.disableBottomRight === true) {
+                return true;
+            }
+        }
+        return false;
+    };
+    const getLayoutSize = () => {
+        const data = sharer.getActiveStorage('data');
+        if (data === null || data === void 0 ? void 0 : data.layout) {
+            const { x, y, w, h } = data.layout;
+            return { x, y, w, h };
+        }
+        return null;
+    };
+    const resetController = () => {
+        const viewScaleInfo = sharer.getActiveViewScaleInfo();
+        const size = getLayoutSize();
+        if (size) {
+            const controller = calcLayoutSizeController(size, { viewScaleInfo, controllerSize: 10 });
+            sharer.setSharedStorage(keyLayoutController, controller);
+        }
+        else {
+            sharer.setSharedStorage(keyLayoutController, null);
+        }
+    };
+    const resetControlType = (e) => {
+        const data = sharer.getActiveStorage('data');
+        const controller = sharer.getSharedStorage(keyLayoutController);
+        if (controller && (data === null || data === void 0 ? void 0 : data.layout) && (e === null || e === void 0 ? void 0 : e.point)) {
+            let layoutControlType = null;
+            if (controller) {
+                const { topLeft, top, topRight, right, bottomRight, bottom, bottomLeft, left } = controller;
+                const list = [topLeft, top, topRight, right, bottomRight, bottom, bottomLeft, left];
+                for (let i = 0; i < list.length; i++) {
+                    const item = list[i];
+                    if (isViewPointInVertexes(e.point, item.vertexes)) {
+                        layoutControlType = `${item.type}`;
+                        break;
+                    }
+                }
+                if (layoutControlType) {
+                    sharer.setSharedStorage(keyLayoutControlType, layoutControlType);
+                    eventHub.trigger(middlewareEventSelectClear, {});
+                    return layoutControlType;
+                }
+            }
+        }
+        return null;
+    };
+    return {
+        name: '@middleware/layout-selector',
+        use: () => {
+            clear();
+            resetController();
+        },
+        hover: (e) => {
+            if (isInElementAction()) {
+                return;
+            }
+            const prevLayoutActionType = sharer.getSharedStorage(keyLayoutActionType);
+            const data = sharer.getActiveStorage('data');
+            if ((data === null || data === void 0 ? void 0 : data.layout) && prevLayoutActionType !== 'resize') {
+                resetController();
+                const layoutControlType = resetControlType(e);
+                if (layoutControlType) {
+                    sharer.setSharedStorage(keyLayoutActionType, 'hover');
+                    if (!isDisbaledControl(layoutControlType)) {
+                        eventHub.trigger('cursor', {
+                            type: `resize-${layoutControlType}`,
+                            groupQueue: [],
+                            element: getLayoutSize()
+                        });
+                    }
+                    viewer.drawFrame();
+                }
+                else {
+                    sharer.setSharedStorage(keyLayoutActionType, null);
+                }
+            }
+            if (['hover', 'resize'].includes(sharer.getSharedStorage(keyLayoutActionType))) {
+                return false;
+            }
+            if (prevLayoutActionType === 'hover' && !sharer.getSharedStorage(keyLayoutActionType)) {
+                viewer.drawFrame();
+            }
+        },
+        pointStart: (e) => {
+            if (isInElementAction()) {
+                return;
+            }
+            resetController();
+            const layoutControlType = resetControlType(e);
+            prevPoint = e.point;
+            if (layoutControlType) {
+                if (isDisbaledControl(layoutControlType)) {
+                    return;
+                }
+                sharer.setSharedStorage(keyLayoutActionType, 'resize');
+                return false;
+            }
+            const layoutActionType = sharer.getSharedStorage(keyLayoutActionType);
+            if (['hover', 'resize'].includes(layoutActionType)) {
+                return false;
+            }
+        },
+        pointMove: (e) => {
+            if (isInElementAction()) {
+                return;
+            }
+            const layoutActionType = sharer.getSharedStorage(keyLayoutActionType);
+            const layoutControlType = sharer.getSharedStorage(keyLayoutControlType);
+            const data = sharer.getActiveStorage('data');
+            if (layoutControlType && isDisbaledControl(layoutControlType)) {
+                return;
+            }
+            if (layoutActionType === 'resize' && layoutControlType && (data === null || data === void 0 ? void 0 : data.layout)) {
+                if (prevPoint) {
+                    const scale = sharer.getActiveStorage('scale');
+                    const moveX = (e.point.x - prevPoint.x) / scale;
+                    const moveY = (e.point.y - prevPoint.y) / scale;
+                    const { x, y, w, h } = data.layout;
+                    if (layoutControlType === 'top') {
+                        data.layout.y = calculator.toGridNum(y + moveY);
+                        data.layout.h = calculator.toGridNum(h - moveY);
+                    }
+                    else if (layoutControlType === 'right') {
+                        data.layout.w = calculator.toGridNum(w + moveX);
+                    }
+                    else if (layoutControlType === 'bottom') {
+                        data.layout.h = calculator.toGridNum(h + moveY);
+                    }
+                    else if (layoutControlType === 'left') {
+                        data.layout.x = calculator.toGridNum(x + moveX);
+                        data.layout.w = calculator.toGridNum(w - moveX);
+                    }
+                    else if (layoutControlType === 'top-left') {
+                        data.layout.x = calculator.toGridNum(x + moveX);
+                        data.layout.y = calculator.toGridNum(y + moveY);
+                        data.layout.w = calculator.toGridNum(w - moveX);
+                        data.layout.h = calculator.toGridNum(h - moveY);
+                    }
+                    else if (layoutControlType === 'top-right') {
+                        data.layout.y = calculator.toGridNum(y + moveY);
+                        data.layout.w = calculator.toGridNum(w + moveX);
+                        data.layout.h = calculator.toGridNum(h - moveY);
+                    }
+                    else if (layoutControlType === 'bottom-right') {
+                        data.layout.w = calculator.toGridNum(w + moveX);
+                        data.layout.h = calculator.toGridNum(h + moveY);
+                    }
+                    else if (layoutControlType === 'bottom-left') {
+                        data.layout.x = calculator.toGridNum(x + moveX);
+                        data.layout.w = calculator.toGridNum(w - moveX);
+                        data.layout.h = calculator.toGridNum(h + moveY);
+                    }
+                }
+                prevPoint = e.point;
+                resetController();
+                viewer.drawFrame();
+                return false;
+            }
+            if (['hover', 'resize'].includes(layoutActionType)) {
+                return false;
+            }
+        },
+        pointEnd: () => {
+            const layoutActionType = sharer.getSharedStorage(keyLayoutActionType);
+            const layoutControlType = sharer.getSharedStorage(keyLayoutControlType);
+            const data = sharer.getActiveStorage('data');
+            if (data && layoutActionType === 'resize' && layoutControlType && !isDisbaledControl(layoutControlType)) {
+                eventHub.trigger(eventChange, {
+                    type: 'changeLayout',
+                    data
+                });
+            }
+            clear();
+        },
+        beforeDrawFrame: ({ snapshot }) => {
+            var _a;
+            const { sharedStore, activeStore } = snapshot;
+            const layoutActionType = sharedStore[keyLayoutActionType];
+            const layoutControlType = sharedStore[keyLayoutControlType];
+            if (((_a = activeStore.data) === null || _a === void 0 ? void 0 : _a.layout) && layoutActionType && layoutControlType) {
+                if (['hover', 'resize'].includes(layoutActionType)) {
+                    const viewScaleInfo = getViewScaleInfoFromSnapshot(snapshot);
+                    const { x, y, w, h } = activeStore.data.layout;
+                    const size = { x, y, w, h };
+                    const controller = calcLayoutSizeController(size, { viewScaleInfo, controllerSize: 10 });
+                    drawLayoutController(helperContext, { controller, operations: activeStore.data.layout.operations || {} });
+                }
+            }
+        },
+        scrollX: () => {
+            clear();
+        },
+        scrollY: () => {
+            clear();
+        },
+        wheelScale: () => {
+            clear();
+        }
+    };
+};

package/dist/esm/middleware/layout-selector/types.d.ts

@@ -0,0 +1,12 @@
+import type { LayoutSizeController } from '@idraw/types';
+import { keyLayoutActionType, keyLayoutControlType, keyLayoutController } from './config';
+import { keyActionType as keyElementActionType } from '../selector';
+import type { ActionType as ElementActionType } from '../selector';
+export type ActionType = 'hover' | 'resize' | null;
+export type ControlType = 'left' | 'right' | 'top' | 'bottom' | 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';
+export type LayoutSelectorSharedStorage = {
+    [keyLayoutActionType]: ActionType | null;
+    [keyLayoutControlType]: ControlType | null;
+    [keyLayoutController]: LayoutSizeController | null;
+    [keyElementActionType]: ElementActionType | null;
+};

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

@@ -0,0 +1,2 @@
+import { keyLayoutActionType, keyLayoutControlType, keyLayoutController } from './config';
+import { keyActionType as keyElementActionType } from '../selector';

package/dist/esm/middleware/layout-selector/util.d.ts

@@ -0,0 +1,5 @@
+import type { ViewContext2D, LayoutSizeController, DataLayout } from '@idraw/types';
+export declare function drawLayoutController(ctx: ViewContext2D, opts: {
+    controller: LayoutSizeController;
+    operations: DataLayout['operations'];
+}): void;

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/selector/index.d.ts

@@ -1,8 +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 };
+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,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';
+import { eventChange } from '../../config';
 export { keySelectedElementList, keyActionType, keyResizeType, keyGroupQueue };
 export const middlewareEventSelect = '@middleware/select';
 export const middlewareEventSelectClear = '@middleware/select-clear';
@@ -201,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' &&
@@ -530,7 +536,7 @@ export const MiddlewareSelector = (opts) => {
                     if (type === 'resize') {
                         type = 'resizeElement';
                     }
-                    eventHub.trigger('change', { data, type });
+                    eventHub.trigger(eventChange, { data, type });
                 }
                 viewer.drawFrame();
             };