@idraw/core 0.4.0-alpha.5 → 0.4.0-alpha.7

package/dist/esm/index.d.ts

@@ -1,10 +1,10 @@
-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 {
+export declare class Core<E extends CoreEvent = CoreEvent> {
     #private;
     constructor(container: HTMLDivElement, opts: CoreOptions);
     use(middleware: BoardMiddleware<any, any>): void;
@@ -16,7 +16,17 @@ export declare class Core {
     }): void;
     resize(newViewSize: Partial<ViewSizeInfo>): void;
     clear(): void;
-    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;
+    on<T extends keyof E>(name: T, callback: (e: E[T]) => void): void;
+    off<T extends keyof E>(name: T, callback: (e: E[T]) => void): void;
+    trigger<T extends keyof E>(name: T, e: E[T]): void;
+    getViewInfo(): {
+        viewSizeInfo: ViewSizeInfo;
+        viewScaleInfo: ViewScaleInfo;
+    };
+    refresh(): void;
+    setViewScale(opts: {
+        scale: number;
+        offsetX: number;
+        offsetY: number;
+    }): void;
 }

package/dist/esm/index.js

@@ -11,7 +11,7 @@ var __classPrivateFieldGet = (this && this.__classPrivateFieldGet) || function (
 };
 var _Core_instances, _Core_board, _Core_container, _Core_initContainer;
 import { Board } from '@idraw/board';
-import { createBoardContexts, validateElements } from '@idraw/util';
+import { createViewContent, validateElements } from '@idraw/util';
 import { Cursor } from './lib/cursor';
 export { MiddlewareSelector, middlewareEventSelect } from './middleware/selector';
 export { MiddlewareScroller } from './middleware/scroller';
@@ -28,8 +28,7 @@ export class Core {
         const canvas = document.createElement('canvas');
         __classPrivateFieldGet(this, _Core_instances, "m", _Core_initContainer).call(this);
         container.appendChild(canvas);
-        const ctx = canvas.getContext('2d');
-        const viewContent = createBoardContexts(ctx, { devicePixelRatio });
+        const viewContent = createViewContent(canvas, { width, height, devicePixelRatio, offscreen: true });
         const board = new Board({ viewContent, container });
         const sharer = board.getSharer();
         sharer.setActiveViewSizeInfo({
@@ -82,6 +81,22 @@ export class Core {
         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();
+    }
+    setViewScale(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");

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

@@ -7,8 +7,8 @@ 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;

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

@@ -43,17 +43,12 @@ export const MiddlewareScroller = (opts) => {
     };
     return {
         mode: key,
-        wheelX: (e) => {
-            if (e.deltaX >= 0 || e.deltaX < 0) {
-                viewer.scroll({ moveX: 0 - e.deltaX });
-                viewer.drawFrame();
-            }
-        },
-        wheelY: (e) => {
-            if (e.deltaY >= 0 || e.deltaY < 0) {
-                viewer.scroll({ moveY: 0 - e.deltaY });
-                viewer.drawFrame();
-            }
+        wheel: (e) => {
+            viewer.scroll({
+                moveX: 0 - e.deltaX,
+                moveY: 0 - e.deltaY
+            });
+            viewer.drawFrame();
         },
         pointStart: (e) => {
             const { point } = e;

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

@@ -1,4 +1,4 @@
-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';
@@ -9,10 +9,16 @@ export const MiddlewareSelector = (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');

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

@@ -75,13 +75,24 @@ export const MiddlewareTextEditor = (opts) => {
             parent = createBox({ size, parent });
         }
         const detail = Object.assign(Object.assign({}, defaultElementDetail), element.detail);
+        let elemX = element.x * scale + offsetLeft;
+        let elemY = element.y * scale + offsetTop;
+        let elemW = element.w * scale;
+        let elemH = element.h * scale;
+        if (groupQueue.length > 0) {
+            elemX = element.x * scale;
+            elemY = element.y * scale;
+            elemW = element.w * scale;
+            elemH = element.h * scale;
+        }
         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.left = `${elemX}px`;
+        textarea.style.top = `${elemY}px`;
+        textarea.style.width = `${elemW}px`;
+        textarea.style.height = `${elemH}px`;
         textarea.style.transform = `rotate(${limitAngle(element.angle || 0)}deg)`;
-        textarea.style.border = 'none';
+        textarea.style.boxSizing = 'border-box';
+        textarea.style.border = '1px solid #1973ba';
         textarea.style.resize = 'none';
         textarea.style.overflow = 'hidden';
         textarea.style.wordBreak = 'break-all';