@idraw/core - npm Package Compare versions

Comparing version 0.4.0-beta.10 to 0.4.0-beta.11

dist/esm/index.d.ts

@@ -11,2 +11,3 @@ import type { Data, PointSize, CoreOptions, BoardMiddleware, ViewSizeInfo, CoreEvent, ViewScaleInfo, LoadItemMap } from '@idraw/types';
     constructor(container: HTMLDivElement, opts: CoreOptions);
+    isDestroyed(): boolean;
     destroy(): void;
@@ -37,2 +38,4 @@ use(middleware: BoardMiddleware<any, any>): void;
     getLoadItemMap(): LoadItemMap;
+    onBoardWatcherEvents(): void;
+    offBoardWatcherEvents(): void;
 }

dist/esm/index.js

@@ -51,2 +51,5 @@ var __classPrivateFieldSet = (this && this.__classPrivateFieldSet) || function (receiver, state, value, kind, f) {
     }
+    isDestroyed() {
+        return __classPrivateFieldGet(this, _Core_board, "f").isDestroyed();
+    }
     destroy() {
@@ -114,2 +117,8 @@ __classPrivateFieldGet(this, _Core_board, "f").destroy();
     }
+    onBoardWatcherEvents() {
+        __classPrivateFieldGet(this, _Core_board, "f").onWatcherEvents();
+    }
+    offBoardWatcherEvents() {
+        __classPrivateFieldGet(this, _Core_board, "f").offWatcherEvents();
+    }
 }
@@ -116,0 +125,0 @@ _Core_board = new WeakMap(), _Core_canvas = new WeakMap(), _Core_container = new WeakMap(), _Core_instances = new WeakSet(), _Core_initContainer = function _Core_initContainer() {

dist/esm/lib/cursor.d.ts

 import type { UtilEventEmitter, CoreEvent } from '@idraw/types';
 export declare class Cursor {
-    private _eventHub;
-    private _container;
-    private _cursorType;
-    private _resizeCursorBaseImage;
-    private _cursorImageMap;
+    #private;
     constructor(container: HTMLDivElement, opts: {
         eventHub: UtilEventEmitter<CoreEvent>;
     });
-    private _init;
-    private _loadResizeCursorBaseImage;
-    private _resetCursor;
-    private _setCursorResize;
-    private _appendRotateResizeImage;
 }

dist/esm/lib/cursor.js

@@ -0,1 +1,13 @@
+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 _Cursor_instances, _Cursor_eventHub, _Cursor_container, _Cursor_cursorType, _Cursor_resizeCursorBaseImage, _Cursor_cursorImageMap, _Cursor_init, _Cursor_loadResizeCursorBaseImage, _Cursor_resetCursor, _Cursor_setCursorResize, _Cursor_appendRotateResizeImage;
 import { limitAngle, loadImage, parseAngleToRadian } from '@idraw/util';
@@ -5,5 +17,8 @@ import { CURSOR, CURSOR_RESIZE, CURSOR_DRAG_DEFAULT, CURSOR_DRAG_ACTIVE } from './cursor-image';
     constructor(container, opts) {
-        this._cursorType = null;
-        this._resizeCursorBaseImage = null;
-        this._cursorImageMap = {
+        _Cursor_instances.add(this);
+        _Cursor_eventHub.set(this, void 0);
+        _Cursor_container.set(this, void 0);
+        _Cursor_cursorType.set(this, null);
+        _Cursor_resizeCursorBaseImage.set(this, null);
+        _Cursor_cursorImageMap.set(this, {
             auto: CURSOR,
@@ -13,119 +28,120 @@ 'drag-default': CURSOR_DRAG_DEFAULT,
             'rotate-0': CURSOR_RESIZE
-        };
-        this._container = container;
-        this._eventHub = opts.eventHub;
-        this._init();
-        this._loadResizeCursorBaseImage();
-    }
-    _init() {
-        const { _eventHub: eventHub } = this;
-        this._resetCursor('auto');
-        eventHub.on('cursor', (e) => {
-            var _a;
-            if (e.type === 'over-element' || !e.type) {
-                this._resetCursor('auto');
-            }
-            else if (typeof e.type === 'string' && ((_a = e.type) === null || _a === void 0 ? void 0 : _a.startsWith('resize-'))) {
-                this._setCursorResize(e);
-            }
-            else if (e.type === 'drag-default') {
-                this._resetCursor('drag-default');
-            }
-            else if (e.type === 'drag-active') {
-                this._resetCursor('drag-active');
-            }
-            else {
-                this._resetCursor('auto');
-            }
         });
+        __classPrivateFieldSet(this, _Cursor_container, container, "f");
+        __classPrivateFieldSet(this, _Cursor_eventHub, opts.eventHub, "f");
+        __classPrivateFieldGet(this, _Cursor_instances, "m", _Cursor_init).call(this);
+        __classPrivateFieldGet(this, _Cursor_instances, "m", _Cursor_loadResizeCursorBaseImage).call(this);
     }
-    _loadResizeCursorBaseImage() {
-        loadImage(CURSOR_RESIZE)
-            .then((img) => {
-            this._resizeCursorBaseImage = img;
-        })
-            .catch((err) => {
-            console.error(err);
-        });
-    }
-    _resetCursor(cursorKey) {
-        if (this._cursorType === cursorKey) {
-            return;
-        }
-        this._cursorType = cursorKey;
-        const image = this._cursorImageMap[this._cursorType] || this._cursorImageMap['auto'];
-        let offsetX = 0;
-        let offsetY = 0;
-        if (cursorKey.startsWith('rotate-') && this._cursorImageMap[this._cursorType]) {
-            offsetX = 10;
-            offsetY = 10;
-        }
-        this._container.style.cursor = `image-set(url(${image})2x) ${offsetX} ${offsetY}, auto`;
-    }
-    _setCursorResize(e) {
+}
+_Cursor_eventHub = new WeakMap(), _Cursor_container = new WeakMap(), _Cursor_cursorType = new WeakMap(), _Cursor_resizeCursorBaseImage = new WeakMap(), _Cursor_cursorImageMap = new WeakMap(), _Cursor_instances = new WeakSet(), _Cursor_init = function _Cursor_init() {
+    const eventHub = __classPrivateFieldGet(this, _Cursor_eventHub, "f");
+    __classPrivateFieldGet(this, _Cursor_instances, "m", _Cursor_resetCursor).call(this, 'default');
+    eventHub.on('cursor', (e) => {
         var _a;
-        let totalAngle = 0;
-        if (e.type === 'resize-top') {
-            totalAngle += 0;
+        if (e.type === 'over-element' || !e.type) {
+            __classPrivateFieldGet(this, _Cursor_instances, "m", _Cursor_resetCursor).call(this, 'auto');
         }
-        else if (e.type === 'resize-top-right') {
-            totalAngle += 45;
+        else if (typeof e.type === 'string' && ((_a = e.type) === null || _a === void 0 ? void 0 : _a.startsWith('resize-'))) {
+            __classPrivateFieldGet(this, _Cursor_instances, "m", _Cursor_setCursorResize).call(this, e);
         }
-        else if (e.type === 'resize-right') {
-            totalAngle += 90;
+        else if (e.type === 'drag-default') {
+            __classPrivateFieldGet(this, _Cursor_instances, "m", _Cursor_resetCursor).call(this, 'drag-default');
         }
-        else if (e.type === 'resize-bottom-right') {
-            totalAngle += 135;
+        else if (e.type === 'drag-active') {
+            __classPrivateFieldGet(this, _Cursor_instances, "m", _Cursor_resetCursor).call(this, 'drag-active');
         }
-        else if (e.type === 'resize-bottom') {
-            totalAngle += 180;
+        else {
+            __classPrivateFieldGet(this, _Cursor_instances, "m", _Cursor_resetCursor).call(this, 'auto');
         }
-        else if (e.type === 'resize-bottom-left') {
-            totalAngle += 225;
-        }
-        else if (e.type === 'resize-left') {
-            totalAngle += 270;
-        }
-        else if (e.type === 'resize-top-left') {
-            totalAngle += 315;
-        }
-        totalAngle += limitAngle(((_a = e === null || e === void 0 ? void 0 : e.element) === null || _a === void 0 ? void 0 : _a.angle) || 0);
-        if (Array.isArray(e.groupQueue) && e.groupQueue.length > 0) {
-            e.groupQueue.forEach((group) => {
-                totalAngle += limitAngle(group.angle || 0);
-            });
-        }
-        totalAngle = limitAngle(totalAngle);
-        const cursorKey = this._appendRotateResizeImage(totalAngle);
-        this._resetCursor(cursorKey);
+    });
+}, _Cursor_loadResizeCursorBaseImage = function _Cursor_loadResizeCursorBaseImage() {
+    loadImage(CURSOR_RESIZE)
+        .then((img) => {
+        __classPrivateFieldSet(this, _Cursor_resizeCursorBaseImage, img, "f");
+    })
+        .catch((err) => {
+        console.error(err);
+    });
+}, _Cursor_resetCursor = function _Cursor_resetCursor(cursorKey) {
+    if (__classPrivateFieldGet(this, _Cursor_cursorType, "f") === cursorKey) {
+        return;
     }
-    _appendRotateResizeImage(angle) {
-        const key = `rotate-${angle}`;
-        if (!this._cursorImageMap[key]) {
-            const baseImage = this._resizeCursorBaseImage;
-            if (baseImage) {
-                const canvas = document.createElement('canvas');
-                const w = baseImage.width;
-                const h = baseImage.height;
-                const center = {
-                    x: w / 2,
-                    y: h / 2
-                };
-                canvas.width = w;
-                canvas.height = h;
-                const ctx = canvas.getContext('2d');
-                const radian = parseAngleToRadian(angle);
-                ctx.translate(center.x, center.y);
-                ctx.rotate(radian);
-                ctx.translate(-center.x, -center.y);
-                ctx.drawImage(baseImage, 0, 0, w, h);
-                ctx.translate(center.x, center.y);
-                ctx.rotate(-radian);
-                ctx.translate(-center.x, -center.y);
-                const base = canvas.toDataURL('image/png');
-                this._cursorImageMap[key] = base;
-            }
+    __classPrivateFieldSet(this, _Cursor_cursorType, cursorKey, "f");
+    const image = __classPrivateFieldGet(this, _Cursor_cursorImageMap, "f")[__classPrivateFieldGet(this, _Cursor_cursorType, "f")] || __classPrivateFieldGet(this, _Cursor_cursorImageMap, "f")['auto'];
+    let offsetX = 0;
+    let offsetY = 0;
+    if (cursorKey.startsWith('rotate-') && __classPrivateFieldGet(this, _Cursor_cursorImageMap, "f")[__classPrivateFieldGet(this, _Cursor_cursorType, "f")]) {
+        offsetX = 10;
+        offsetY = 10;
+    }
+    if (cursorKey === 'default') {
+        __classPrivateFieldGet(this, _Cursor_container, "f").style.cursor = 'default';
+    }
+    else {
+        __classPrivateFieldGet(this, _Cursor_container, "f").style.cursor = `image-set(url(${image})2x) ${offsetX} ${offsetY}, auto`;
+    }
+}, _Cursor_setCursorResize = function _Cursor_setCursorResize(e) {
+    var _a;
+    let totalAngle = 0;
+    if (e.type === 'resize-top') {
+        totalAngle += 0;
+    }
+    else if (e.type === 'resize-top-right') {
+        totalAngle += 45;
+    }
+    else if (e.type === 'resize-right') {
+        totalAngle += 90;
+    }
+    else if (e.type === 'resize-bottom-right') {
+        totalAngle += 135;
+    }
+    else if (e.type === 'resize-bottom') {
+        totalAngle += 180;
+    }
+    else if (e.type === 'resize-bottom-left') {
+        totalAngle += 225;
+    }
+    else if (e.type === 'resize-left') {
+        totalAngle += 270;
+    }
+    else if (e.type === 'resize-top-left') {
+        totalAngle += 315;
+    }
+    totalAngle += limitAngle(((_a = e === null || e === void 0 ? void 0 : e.element) === null || _a === void 0 ? void 0 : _a.angle) || 0);
+    if (Array.isArray(e.groupQueue) && e.groupQueue.length > 0) {
+        e.groupQueue.forEach((group) => {
+            totalAngle += limitAngle(group.angle || 0);
+        });
+    }
+    totalAngle = limitAngle(totalAngle);
+    const cursorKey = __classPrivateFieldGet(this, _Cursor_instances, "m", _Cursor_appendRotateResizeImage).call(this, totalAngle);
+    __classPrivateFieldGet(this, _Cursor_instances, "m", _Cursor_resetCursor).call(this, cursorKey);
+}, _Cursor_appendRotateResizeImage = function _Cursor_appendRotateResizeImage(angle) {
+    const key = `rotate-${angle}`;
+    if (!__classPrivateFieldGet(this, _Cursor_cursorImageMap, "f")[key]) {
+        const baseImage = __classPrivateFieldGet(this, _Cursor_resizeCursorBaseImage, "f");
+        if (baseImage) {
+            const canvas = document.createElement('canvas');
+            const w = baseImage.width;
+            const h = baseImage.height;
+            const center = {
+                x: w / 2,
+                y: h / 2
+            };
+            canvas.width = w;
+            canvas.height = h;
+            const ctx = canvas.getContext('2d');
+            const radian = parseAngleToRadian(angle);
+            ctx.translate(center.x, center.y);
+            ctx.rotate(radian);
+            ctx.translate(-center.x, -center.y);
+            ctx.drawImage(baseImage, 0, 0, w, h);
+            ctx.translate(center.x, center.y);
+            ctx.rotate(-radian);
+            ctx.translate(-center.x, -center.y);
+            const base = canvas.toDataURL('image/png');
+            __classPrivateFieldGet(this, _Cursor_cursorImageMap, "f")[key] = base;
         }
-        return key;
     }
-}
+    return key;
+};

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

@@ -88,6 +88,6 @@ import { limitAngle, getDefaultElementDetailConfig } from '@idraw/util';
         textarea.style.position = 'absolute';
-        textarea.style.left = `${elemX}px`;
-        textarea.style.top = `${elemY}px`;
-        textarea.style.width = `${elemW}px`;
-        textarea.style.height = `${elemH}px`;
+        textarea.style.left = `${elemX - 1}px`;
+        textarea.style.top = `${elemY - 1}px`;
+        textarea.style.width = `${elemW + 2}px`;
+        textarea.style.height = `${elemH + 2}px`;
         textarea.style.transform = `rotate(${limitAngle(element.angle || 0)}deg)`;
@@ -105,2 +105,5 @@ textarea.style.boxSizing = 'border-box';
         textarea.style.fontWeight = `${detail.fontWeight}`;
+        textarea.style.padding = '0';
+        textarea.style.margin = '0';
+        textarea.style.outline = 'none';
         textarea.value = detail.text || '';
@@ -107,0 +110,0 @@ parent.appendChild(textarea);

package.json

 {
   "name": "@idraw/core",
-  "version": "0.4.0-beta.10",
+  "version": "0.4.0-beta.11",
   "description": "",
@@ -24,9 +24,9 @@ "main": "dist/esm/index.js",
   "devDependencies": {
-    "@idraw/types": "^0.4.0-beta.10"
+    "@idraw/types": "^0.4.0-beta.11"
   },
   "dependencies": {},
   "peerDependencies": {
-    "@idraw/board": "^0.4.0-beta.10",
-    "@idraw/renderer": "^0.4.0-beta.10",
-    "@idraw/util": "^0.4.0-beta.10"
+    "@idraw/board": "^0.4.0-beta.11",
+    "@idraw/renderer": "^0.4.0-beta.11",
+    "@idraw/util": "^0.4.0-beta.11"
   },
@@ -33,0 +33,0 @@ "publishConfig": {

No alert changes

Improved metrics

Total package byte prevSize

544643

increased by1.59%

Lines of code

9036

increased by1.16%

No dependency changes