@idraw/core 0.4.0-alpha.4 → 0.4.0-alpha.6

package/dist/esm/index.d.ts

@@ -1,13 +1,11 @@
-import type { Data, PointSize, CoreOptions, BoardMiddleware, ViewSizeInfo, CoreEvent } from '@idraw/types';
+import type { Data, PointSize, CoreOptions, BoardMiddleware, ViewSizeInfo, CoreEvent, ViewScaleInfo } from '@idraw/types';
 export { MiddlewareSelector, middlewareEventSelect } from './middleware/selector';
 export { MiddlewareScroller } from './middleware/scroller';
 export { MiddlewareScaler, middlewareEventScale } from './middleware/scaler';
 export { MiddlewareRuler, middlewareEventRuler } from './middleware/ruler';
+export { MiddlewareTextEditor, middlewareEventTextEdit } from './middleware/text-editor';
 export declare class Core {
-    private _board;
-    private _opts;
-    private _container;
-    private _canvas;
+    #private;
     constructor(container: HTMLDivElement, opts: CoreOptions);
     use(middleware: BoardMiddleware<any, any>): void;
     setData(data: Data): void;
@@ -21,4 +19,14 @@ export declare class Core {
     on<T extends keyof CoreEvent>(name: T, callback: (e: CoreEvent[T]) => void): void;
     off<T extends keyof CoreEvent>(name: T, callback: (e: CoreEvent[T]) => void): void;
     trigger<T extends keyof CoreEvent>(name: T, e: CoreEvent[T]): void;
+    getViewInfo(): {
+        viewSizeInfo: ViewSizeInfo;
+        viewScaleInfo: ViewScaleInfo;
+    };
+    refresh(): void;
+    updateViewScale(opts: {
+        scale: number;
+        offsetX: number;
+        offsetY: number;
+    }): void;
 }

package/dist/esm/index.js

@@ -1,3 +1,15 @@
+var __classPrivateFieldSet = (this && this.__classPrivateFieldSet) || function (receiver, state, value, kind, f) {
+    if (kind === "m") throw new TypeError("Private method is not writable");
+    if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a setter");
+    if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot write private member to an object whose class did not declare it");
+    return (kind === "a" ? f.call(receiver, value) : f ? f.value = value : state.set(receiver, value)), value;
+};
+var __classPrivateFieldGet = (this && this.__classPrivateFieldGet) || function (receiver, state, kind, f) {
+    if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a getter");
+    if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot read private member from an object whose class did not declare it");
+    return kind === "m" ? f : kind === "a" ? f.call(receiver) : f ? f.value : state.get(receiver);
+};
+var _Core_instances, _Core_board, _Core_container, _Core_initContainer;
 import { Board } from '@idraw/board';
 import { createBoardContexts, validateElements } from '@idraw/util';
 import { Cursor } from './lib/cursor';
@@ -5,17 +17,20 @@ export { MiddlewareSelector, middlewareEventSelect } from './middleware/selector
 export { MiddlewareScroller } from './middleware/scroller';
 export { MiddlewareScaler, middlewareEventScale } from './middleware/scaler';
 export { MiddlewareRuler, middlewareEventRuler } from './middleware/ruler';
+export { MiddlewareTextEditor, middlewareEventTextEdit } from './middleware/text-editor';
 export class Core {
     constructor(container, opts) {
+        _Core_instances.add(this);
+        _Core_board.set(this, void 0);
+        _Core_container.set(this, void 0);
         const { devicePixelRatio = 1, width, height } = opts;
-        this._opts = opts;
-        this._container = container;
+        __classPrivateFieldSet(this, _Core_container, container, "f");
         const canvas = document.createElement('canvas');
-        this._canvas = canvas;
+        __classPrivateFieldGet(this, _Core_instances, "m", _Core_initContainer).call(this);
         container.appendChild(canvas);
         const ctx = canvas.getContext('2d');
         const viewContent = createBoardContexts(ctx, { devicePixelRatio });
-        const board = new Board({ viewContent });
+        const board = new Board({ viewContent, container });
         const sharer = board.getSharer();
         sharer.setActiveViewSizeInfo({
             width,
@@ -24,7 +39,7 @@ export class Core {
             contextWidth: width,
             contextHeight: height
         });
-        this._board = board;
+        __classPrivateFieldSet(this, _Core_board, board, "f");
         this.resize(sharer.getActiveViewSizeInfo());
         const eventHub = board.getEventHub();
         new Cursor(container, {
@@ -32,39 +47,59 @@ export class Core {
         });
     }
     use(middleware) {
-        this._board.use(middleware);
+        __classPrivateFieldGet(this, _Core_board, "f").use(middleware);
     }
     setData(data) {
         validateElements((data === null || data === void 0 ? void 0 : data.elements) || []);
-        this._board.setData(data);
+        __classPrivateFieldGet(this, _Core_board, "f").setData(data);
     }
     getData() {
-        return this._board.getData();
+        return __classPrivateFieldGet(this, _Core_board, "f").getData();
     }
     scale(opts) {
-        this._board.scale(opts);
-        const viewer = this._board.getViewer();
+        __classPrivateFieldGet(this, _Core_board, "f").scale(opts);
+        const viewer = __classPrivateFieldGet(this, _Core_board, "f").getViewer();
         viewer.drawFrame();
     }
     resize(newViewSize) {
-        const { _board: board } = this;
+        const board = __classPrivateFieldGet(this, _Core_board, "f");
         const sharer = board.getSharer();
         const viewSizeInfo = sharer.getActiveViewSizeInfo();
         board.resize(Object.assign(Object.assign({}, viewSizeInfo), newViewSize));
     }
     clear() {
-        this._board.clear();
+        __classPrivateFieldGet(this, _Core_board, "f").clear();
     }
     on(name, callback) {
-        const eventHub = this._board.getEventHub();
+        const eventHub = __classPrivateFieldGet(this, _Core_board, "f").getEventHub();
         eventHub.on(name, callback);
     }
     off(name, callback) {
-        const eventHub = this._board.getEventHub();
+        const eventHub = __classPrivateFieldGet(this, _Core_board, "f").getEventHub();
         eventHub.off(name, callback);
     }
     trigger(name, e) {
-        const eventHub = this._board.getEventHub();
+        const eventHub = __classPrivateFieldGet(this, _Core_board, "f").getEventHub();
         eventHub.trigger(name, e);
     }
+    getViewInfo() {
+        const board = __classPrivateFieldGet(this, _Core_board, "f");
+        const sharer = board.getSharer();
+        const viewSizeInfo = sharer.getActiveViewSizeInfo();
+        const viewScaleInfo = sharer.getActiveViewScaleInfo();
+        return {
+            viewSizeInfo,
+            viewScaleInfo
+        };
+    }
+    refresh() {
+        __classPrivateFieldGet(this, _Core_board, "f").getViewer().drawFrame();
+    }
+    updateViewScale(opts) {
+        __classPrivateFieldGet(this, _Core_board, "f").updateViewScaleInfo(opts);
+    }
 }
+_Core_board = new WeakMap(), _Core_container = new WeakMap(), _Core_instances = new WeakSet(), _Core_initContainer = function _Core_initContainer() {
+    const container = __classPrivateFieldGet(this, _Core_container, "f");
+    container.style.position = 'relative';
+};

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

@@ -5,10 +5,16 @@ export const MiddlewareRuler = (opts) => {
     const key = 'RULE';
     const { viewContent, viewer, eventHub } = opts;
     const { helperContext, underContext } = viewContent;
-    let showRuler = true;
+    let show = true;
+    let showGrid = true;
     eventHub.on(middlewareEventRuler, (e) => {
         if (typeof (e === null || e === void 0 ? void 0 : e.show) === 'boolean') {
-            showRuler = e.show;
+            show = e.show;
+        }
+        if (typeof (e === null || e === void 0 ? void 0 : e.showGrid) === 'boolean') {
+            showGrid = e.showGrid;
+        }
+        if (typeof (e === null || e === void 0 ? void 0 : e.show) === 'boolean' || typeof (e === null || e === void 0 ? void 0 : e.showGrid) === 'boolean') {
             viewer.drawFrame();
         }
     });
@@ -16,7 +22,7 @@ export const MiddlewareRuler = (opts) => {
         mode: key,
         isDefault: true,
         beforeDrawFrame: ({ snapshot }) => {
-            if (showRuler === true) {
+            if (show === true) {
                 const viewScaleInfo = getViewScaleInfoFromSnapshot(snapshot);
                 const viewSizeInfo = getViewSizeInfoFromSnapshot(snapshot);
                 drawRulerBackground(helperContext, { viewScaleInfo, viewSizeInfo });
@@ -24,12 +30,14 @@ export const MiddlewareRuler = (opts) => {
                 drawXRuler(helperContext, { scaleList: xList });
                 const yList = calcYRulerScaleList({ viewScaleInfo, viewSizeInfo });
                 drawYRuler(helperContext, { scaleList: yList });
-                drawUnderGrid(underContext, {
-                    xList,
-                    yList,
-                    viewScaleInfo,
-                    viewSizeInfo
-                });
+                if (showGrid === true) {
+                    drawUnderGrid(underContext, {
+                        xList,
+                        yList,
+                        viewScaleInfo,
+                        viewSizeInfo
+                    });
+                }
             }
         }
     };

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

@@ -7,14 +7,15 @@ const textColor = '#00000080';
 const fontFamily = 'monospace';
 const fontSize = 10;
 const fontWeight = 100;
-const gridColor = '#AAAAAA30';
-const gridKeyColor = '#AAAAAA70';
+const gridColor = '#AAAAAA20';
+const gridKeyColor = '#AAAAAA40';
+const lineSize = 1;
 function calcRulerScaleList(opts) {
     const { scale, viewLength, viewOffset } = opts;
     const list = [];
     let rulerUnit = 10;
     rulerUnit = formatNumber(rulerUnit / scale, { decimalPlaces: 0 });
-    rulerUnit = Math.max(1, Math.min(rulerUnit, 1000));
+    rulerUnit = Math.max(10, Math.min(rulerUnit, 1000));
     const rulerKeyUnit = rulerUnit * 10;
     const rulerSubKeyUnit = rulerUnit * 5;
     let index = 0;
@@ -77,6 +78,8 @@ export function drawXRuler(ctx, opts) {
         ctx.moveTo(item.position, scaleDrawStart);
         ctx.lineTo(item.position, item.isKeyNum ? keyScaleDrawEnd : item.isSubKeyNum ? subKeyScaleDrawEnd : scaleDrawEnd);
         ctx.closePath();
+        ctx.lineWidth = lineSize;
+        ctx.setLineDash([]);
         ctx.fillStyle = scaleColor;
         ctx.stroke();
         if (item.isKeyNum) {
@@ -108,6 +111,8 @@ export function drawYRuler(ctx, opts) {
         ctx.lineTo(item.isKeyNum ? keyScaleDrawEnd : item.isSubKeyNum ? subKeyScaleDrawEnd : scaleDrawEnd, item.position);
         ctx.closePath();
         ctx.fillStyle = scaleColor;
+        ctx.lineWidth = lineSize;
+        ctx.setLineDash([]);
         ctx.stroke();
         if (item.showNum === true) {
             const textX = fontStart;
@@ -140,6 +145,8 @@ export function drawRulerBackground(ctx, opts) {
     ctx.closePath();
     ctx.fillStyle = background;
     ctx.fill();
+    ctx.lineWidth = lineSize;
+    ctx.setLineDash([]);
     ctx.strokeStyle = borderColor;
     ctx.stroke();
 }
@@ -157,8 +164,9 @@ export function drawUnderGrid(ctx, opts) {
         else {
             ctx.strokeStyle = gridColor;
         }
-        ctx.lineWidth = 1;
         ctx.closePath();
+        ctx.lineWidth = lineSize;
+        ctx.setLineDash([]);
         ctx.stroke();
     }
     for (let i = 0; i < yList.length; i++) {

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

@@ -3,6 +3,8 @@ export const middlewareEventScale = '@middleware/scale';
 export const MiddlewareScaler = (opts) => {
     const key = 'SCALE';
     const { viewer, sharer, eventHub } = opts;
+    const maxScale = 50;
+    const minScale = 0.05;
     return {
         mode: key,
         isDefault: true,
@@ -16,6 +18,9 @@ export const MiddlewareScaler = (opts) => {
             else if (deltaY > 0) {
                 newScaleNum = scale * 0.9;
             }
+            if (newScaleNum < minScale || newScaleNum > maxScale) {
+                return;
+            }
             const { moveX, moveY } = viewer.scale({ scale: newScaleNum, point });
             viewer.scroll({ moveX, moveY });
             viewer.drawFrame();

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

@@ -49,11 +49,11 @@ function calcScrollerInfo(viewScaleInfo, viewSizeInfo) {
     const lineSize = scrollerLineWidth;
     let xSize = 0;
     let ySize = 0;
-    xSize = Math.max(sliderMinSize, width - (Math.abs(offsetLeft) + Math.abs(offsetRight)));
+    xSize = Math.max(sliderMinSize, width - lineSize * 2 - (Math.abs(offsetLeft) + Math.abs(offsetRight)));
     if (xSize >= width) {
         xSize = width;
     }
-    ySize = Math.max(sliderMinSize, height - (Math.abs(offsetTop) + Math.abs(offsetBottom)));
+    ySize = Math.max(sliderMinSize, height - lineSize * 2 - (Math.abs(offsetTop) + Math.abs(offsetBottom)));
     if (ySize >= height) {
         ySize = height;
     }

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

@@ -1,17 +1,24 @@
-import { calcElementsViewInfo, calcElementVertexesInGroup, calcElementQueueVertexesQueueInGroup, calcElementSizeController, rotatePointInGroup, getGroupQueueFromList, findElementsFromList } from '@idraw/util';
+import { calcElementsViewInfo, calcElementVertexesInGroup, calcElementQueueVertexesQueueInGroup, calcElementSizeController, rotatePointInGroup, getGroupQueueFromList, findElementsFromList, findElementsFromListByPositions } from '@idraw/util';
 import { drawHoverVertexesWrapper, drawArea, drawListArea, drawGroupQueueVertexesWrappers, drawSelectedElementControllersVertexes } from './draw-wrapper';
 import { getPointTarget, resizeElement, getSelectedListArea, calcSelectedElementsArea, isElementInGroup, isPointInViewActiveGroup, calcMoveInGroup } from './util';
 import { key, keyActionType, keyResizeType, keyAreaStart, keyAreaEnd, keyGroupQueue, keyGroupQueueVertexesList, keyHoverElement, keyHoverElementVertexes, keySelectedElementList, keySelectedElementListVertexes, keySelectedElementController } from './config';
+import { middlewareEventTextEdit } from '../text-editor';
 export const middlewareEventSelect = '@middleware/select';
 export const MiddlewareSelector = (opts) => {
     const { viewer, sharer, viewContent, calculator, eventHub } = opts;
     const { helperContext } = viewContent;
     let prevPoint = null;
     let inBusyMode = null;
-    eventHub.on(middlewareEventSelect, ({ uuids }) => {
+    eventHub.on(middlewareEventSelect, ({ uuids, positions }) => {
+        let elements = [];
         const actionType = sharer.getSharedStorage(keyActionType);
         const data = sharer.getActiveStorage('data');
-        const elements = findElementsFromList(uuids, (data === null || data === void 0 ? void 0 : data.elements) || []);
+        if (positions && Array.isArray(positions)) {
+            elements = findElementsFromListByPositions(positions, (data === null || data === void 0 ? void 0 : data.elements) || []);
+        }
+        else {
+            elements = findElementsFromList(uuids, (data === null || data === void 0 ? void 0 : data.elements) || []);
+        }
         let needRefresh = false;
         if (!actionType && elements.length === 1) {
             sharer.setSharedStorage(keyActionType, 'select');
@@ -385,7 +392,7 @@ export const MiddlewareSelector = (opts) => {
             viewer.drawFrame();
         },
         doubleClick(e) {
-            var _a;
+            var _a, _b;
             const target = getPointTarget(e.point, pointTargetBaseOptions());
             if (target.elements.length === 1 && ((_a = target.elements[0]) === null || _a === void 0 ? void 0 : _a.type) === 'group') {
                 const pushResult = pushGroupQueue(target.elements[0]);
@@ -395,6 +402,13 @@ export const MiddlewareSelector = (opts) => {
                     return;
                 }
             }
+            else if (target.elements.length === 1 && ((_b = target.elements[0]) === null || _b === void 0 ? void 0 : _b.type) === 'text') {
+                eventHub.trigger(middlewareEventTextEdit, {
+                    element: target.elements[0],
+                    groupQueue: sharer.getSharedStorage(keyGroupQueue) || [],
+                    viewScaleInfo: sharer.getActiveViewScaleInfo()
+                });
+            }
             sharer.setSharedStorage(keyActionType, null);
         },
         beforeDrawFrame({ snapshot }) {

package/dist/esm/middleware/text-editor/index.d.ts

@@ -0,0 +1,3 @@
+import type { BoardMiddleware, CoreEvent } from '@idraw/types';
+export declare const middlewareEventTextEdit = "@middleware/text-edit";
+export declare const MiddlewareTextEditor: BoardMiddleware<Record<string, any>, CoreEvent>;

package/dist/esm/middleware/text-editor/index.js

@@ -0,0 +1,132 @@
+import { limitAngle, getDefaultElementDetailConfig } from '@idraw/util';
+export const middlewareEventTextEdit = '@middleware/text-edit';
+const defaultElementDetail = getDefaultElementDetailConfig();
+export const MiddlewareTextEditor = (opts) => {
+    const key = 'SELECT';
+    const { eventHub, viewContent, viewer } = opts;
+    const canvas = viewContent.boardContext.canvas;
+    const textarea = document.createElement('textarea');
+    const canvasWrapper = document.createElement('div');
+    const container = opts.container || document.body;
+    const mask = document.createElement('div');
+    let activeElem = null;
+    canvasWrapper.appendChild(textarea);
+    canvasWrapper.style.position = 'absolute';
+    mask.appendChild(canvasWrapper);
+    mask.style.position = 'fixed';
+    mask.style.top = '0';
+    mask.style.bottom = '0';
+    mask.style.left = '0';
+    mask.style.right = '0';
+    mask.style.display = 'none';
+    container.appendChild(mask);
+    const showTextArea = (e) => {
+        resetCanvasWrapper();
+        resetTextArea(e);
+        mask.style.display = 'block';
+    };
+    const hideTextArea = () => {
+        mask.style.display = 'none';
+        activeElem = null;
+    };
+    const getCanvasRect = () => {
+        const clientRect = canvas.getBoundingClientRect();
+        const { left, top, width, height } = clientRect;
+        return { left, top, width, height };
+    };
+    const createBox = (opts) => {
+        const { size, parent } = opts;
+        const div = document.createElement('div');
+        const { x, y, w, h } = size;
+        const angle = limitAngle(size.angle || 0);
+        div.style.position = 'absolute';
+        div.style.left = `${x}px`;
+        div.style.top = `${y}px`;
+        div.style.width = `${w}px`;
+        div.style.height = `${h}px`;
+        div.style.transform = `rotate(${angle}deg)`;
+        parent.appendChild(div);
+        return div;
+    };
+    const resetTextArea = (e) => {
+        const { viewScaleInfo, element, groupQueue } = e;
+        const { scale, offsetTop, offsetLeft } = viewScaleInfo;
+        if (canvasWrapper.children) {
+            Array.from(canvasWrapper.children).forEach((child) => {
+                child.remove();
+            });
+        }
+        let parent = canvasWrapper;
+        for (let i = 0; i < groupQueue.length; i++) {
+            const group = groupQueue[i];
+            const { x, y, w, h } = group;
+            const angle = limitAngle(group.angle || 0);
+            const size = {
+                x: x * scale,
+                y: y * scale,
+                w: w * scale,
+                h: h * scale,
+                angle
+            };
+            if (i === 0) {
+                size.x += offsetLeft;
+                size.y += offsetTop;
+            }
+            parent = createBox({ size, parent });
+        }
+        const detail = Object.assign(Object.assign({}, defaultElementDetail), element.detail);
+        textarea.style.position = 'absolute';
+        textarea.style.left = `${element.x * scale}px`;
+        textarea.style.top = `${element.y * scale}px`;
+        textarea.style.width = `${element.w * scale}px`;
+        textarea.style.height = `${element.h * scale}px`;
+        textarea.style.transform = `rotate(${limitAngle(element.angle || 0)}deg)`;
+        textarea.style.border = 'none';
+        textarea.style.resize = 'none';
+        textarea.style.overflow = 'hidden';
+        textarea.style.wordBreak = 'break-all';
+        textarea.style.background = '#FFFFFF';
+        textarea.style.color = '#333333';
+        textarea.style.fontSize = `${detail.fontSize * scale}px`;
+        textarea.style.lineHeight = `${detail.lineHeight * scale}px`;
+        textarea.style.fontFamily = detail.fontFamily;
+        textarea.style.fontWeight = `${detail.fontWeight}`;
+        textarea.value = detail.text || '';
+        parent.appendChild(textarea);
+    };
+    const resetCanvasWrapper = () => {
+        const { left, top, width, height } = getCanvasRect();
+        canvasWrapper.style.position = 'absolute';
+        canvasWrapper.style.overflow = 'hidden';
+        canvasWrapper.style.top = `${top}px`;
+        canvasWrapper.style.left = `${left}px`;
+        canvasWrapper.style.width = `${width}px`;
+        canvasWrapper.style.height = `${height}px`;
+    };
+    mask.addEventListener('click', () => {
+        hideTextArea();
+    });
+    textarea.addEventListener('click', (e) => {
+        e.stopPropagation();
+    });
+    textarea.addEventListener('input', (e) => {
+        if (activeElem) {
+            activeElem.detail.text = e.target.value || '';
+            viewer.drawFrame();
+        }
+    });
+    textarea.addEventListener('blur', () => {
+        hideTextArea();
+    });
+    eventHub.on(middlewareEventTextEdit, (e) => {
+        var _a;
+        if ((e === null || e === void 0 ? void 0 : e.element) && ((_a = e === null || e === void 0 ? void 0 : e.element) === null || _a === void 0 ? void 0 : _a.type) === 'text') {
+            activeElem = e.element;
+        }
+        showTextArea(e);
+    });
+    return {
+        mode: key,
+        isDefault: true
+    };
+};