@idraw/core - npm Package Compare versions

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

dist/esm/index.js

@@ -12,3 +12,3 @@ var __classPrivateFieldSet = (this && this.__classPrivateFieldSet) || function (receiver, state, value, kind, f) {
 };
-var _Core_instances, _Core_board, _Core_container, _Core_initContainer;
+var _Core_instances, _Core_board, _Core_canvas, _Core_container, _Core_initContainer;
 import { Board } from '@idraw/board';
@@ -27,9 +27,11 @@ import { createBoardContent, validateElements } from '@idraw/util';
         _Core_board.set(this, void 0);
+        _Core_canvas.set(this, void 0);
         _Core_container.set(this, void 0);
-        const { devicePixelRatio = 1, width, height } = opts;
+        const { devicePixelRatio = 1, width, height, createCustomContext2D } = opts;
         __classPrivateFieldSet(this, _Core_container, container, "f");
         const canvas = document.createElement('canvas');
+        __classPrivateFieldSet(this, _Core_canvas, canvas, "f");
         __classPrivateFieldGet(this, _Core_instances, "m", _Core_initContainer).call(this);
         container.appendChild(canvas);
-        const boardContent = createBoardContent(canvas, { width, height, devicePixelRatio, offscreen: true });
+        const boardContent = createBoardContent(canvas, { width, height, devicePixelRatio, offscreen: true, createCustomContext2D });
         const board = new Board({ boardContent, container });
@@ -53,2 +55,3 @@ const sharer = board.getSharer();
         __classPrivateFieldGet(this, _Core_board, "f").destroy();
+        __classPrivateFieldGet(this, _Core_canvas, "f").remove();
     }
@@ -114,5 +117,5 @@ use(middleware) {
 }
-_Core_board = new WeakMap(), _Core_container = new WeakMap(), _Core_instances = new WeakSet(), _Core_initContainer = function _Core_initContainer() {
+_Core_board = new WeakMap(), _Core_canvas = 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';
 };

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

@@ -23,1 +23,2 @@ export declare const key = "SELECT";
 export declare const wrapperColor = "#1973ba";
+export declare const lockColor = "#5b5959b5";

dist/esm/middleware/selector/config.js

@@ -23,1 +23,2 @@ export const key = 'SELECT';
 export const wrapperColor = '#1973ba';
+export const lockColor = '#5b5959b5';

dist/esm/middleware/selector/draw-wrapper.d.ts

@@ -7,2 +7,7 @@ import type { Element, ElementType, PointSize, RendererDrawElementOptions, ViewContext2D, ViewRectVertexes, ViewScaleInfo, ViewSizeInfo, ElementSizeController } from '@idraw/types';
 }): void;
+export declare function drawLockVertexesWrapper(ctx: ViewContext2D, vertexes: ViewRectVertexes | null, opts: {
+    viewScaleInfo: ViewScaleInfo;
+    viewSizeInfo: ViewSizeInfo;
+    controller?: ElementSizeController | null;
+}): void;
 export declare function drawSelectedElementControllersVertexes(ctx: ViewContext2D, controller: ElementSizeController | null, opts: {
@@ -9,0 +14,0 @@ viewScaleInfo: ViewScaleInfo;

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

 import { rotateElementVertexes, calcViewVertexes } from '@idraw/util';
-import { resizeControllerBorderWidth, areaBorderWidth, wrapperColor, selectWrapperBorderWidth } from './config';
+import { resizeControllerBorderWidth, areaBorderWidth, wrapperColor, selectWrapperBorderWidth, lockColor } from './config';
 function drawVertexes(ctx, vertexes, opts) {
@@ -27,2 +27,40 @@ const { borderColor, borderWidth, background, lineDash } = opts;
 }
+function drawCrossVertexes(ctx, vertexes, opts) {
+    const { borderColor, borderWidth, background, lineDash } = opts;
+    ctx.setLineDash([]);
+    ctx.lineWidth = borderWidth;
+    ctx.strokeStyle = borderColor;
+    ctx.fillStyle = background;
+    ctx.setLineDash(lineDash);
+    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();
+}
+export function drawLockVertexesWrapper(ctx, vertexes, opts) {
+    if (!vertexes) {
+        return;
+    }
+    const wrapperOpts = { borderColor: lockColor, borderWidth: 1, background: 'transparent', lineDash: [] };
+    drawVertexes(ctx, calcViewVertexes(vertexes, opts), wrapperOpts);
+    const { controller } = opts;
+    if (controller) {
+        const { topLeft, topRight, bottomLeft, bottomRight, topMiddle, bottomMiddle, leftMiddle, rightMiddle } = controller;
+        const ctrlOpts = Object.assign(Object.assign({}, wrapperOpts), { borderWidth: 1, background: lockColor });
+        drawCrossVertexes(ctx, calcViewVertexes(topMiddle.vertexes, opts), ctrlOpts);
+        drawCrossVertexes(ctx, calcViewVertexes(bottomMiddle.vertexes, opts), ctrlOpts);
+        drawCrossVertexes(ctx, calcViewVertexes(leftMiddle.vertexes, opts), ctrlOpts);
+        drawCrossVertexes(ctx, calcViewVertexes(rightMiddle.vertexes, opts), ctrlOpts);
+        drawCrossVertexes(ctx, calcViewVertexes(topLeft.vertexes, opts), ctrlOpts);
+        drawCrossVertexes(ctx, calcViewVertexes(topRight.vertexes, opts), ctrlOpts);
+        drawCrossVertexes(ctx, calcViewVertexes(bottomLeft.vertexes, opts), ctrlOpts);
+        drawCrossVertexes(ctx, calcViewVertexes(bottomRight.vertexes, opts), ctrlOpts);
+    }
+}
 export function drawSelectedElementControllersVertexes(ctx, controller, opts) {
@@ -29,0 +67,0 @@ if (!controller) {

dist/esm/middleware/selector/index.js

 import { calcElementsViewInfo, calcElementVertexesInGroup, calcElementQueueVertexesQueueInGroup, calcElementSizeController, rotatePointInGroup, getGroupQueueFromList, findElementsFromList, findElementsFromListByPositions, deepResizeGroupElement } from '@idraw/util';
-import { drawHoverVertexesWrapper, drawArea, drawListArea, drawGroupQueueVertexesWrappers, drawSelectedElementControllersVertexes } from './draw-wrapper';
+import { drawHoverVertexesWrapper, drawLockVertexesWrapper, drawArea, drawListArea, drawGroupQueueVertexesWrappers, drawSelectedElementControllersVertexes } from './draw-wrapper';
 import { getPointTarget, resizeElement, getSelectedListArea, calcSelectedElementsArea, isElementInGroup, isPointInViewActiveGroup, calcMoveInGroup } from './util';
@@ -208,3 +208,2 @@ import { keyActionType, keyResizeType, keyAreaStart, keyAreaEnd, keyGroupQueue, keyGroupQueueVertexesList, keyHoverElement, keyHoverElementVertexes, keySelectedElementList, keySelectedElementListVertexes, keySelectedElementController } from './config';
             if (target.type === 'over-element' && ((_e = target === null || target === void 0 ? void 0 : target.elements) === null || _e === void 0 ? void 0 : _e.length) === 1) {
-                sharer.setSharedStorage(keyHoverElement, target.elements[0]);
                 updateHoverElement(target.elements[0]);
@@ -221,5 +220,4 @@ viewer.drawFrame();
         pointStart: (e) => {
-            var _a, _b, _c, _d;
+            var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
             prevPoint = e.point;
-            updateHoverElement(null);
             const groupQueue = sharer.getSharedStorage(keyGroupQueue);
@@ -234,8 +232,13 @@ if ((groupQueue === null || groupQueue === void 0 ? void 0 : groupQueue.length) > 0) {
                     const target = getPointTarget(e.point, pointTargetBaseOptions());
-                    updateHoverElement(null);
-                    if (target.type === 'over-element' && ((_a = target === null || target === void 0 ? void 0 : target.elements) === null || _a === void 0 ? void 0 : _a.length) === 1) {
+                    if (((_a = target === null || target === void 0 ? void 0 : target.elements) === null || _a === void 0 ? void 0 : _a.length) === 1 && ((_c = (_b = target.elements[0]) === null || _b === void 0 ? void 0 : _b.operations) === null || _c === void 0 ? void 0 : _c.lock) === true) {
+                        return;
+                    }
+                    else {
+                        updateHoverElement(null);
+                    }
+                    if (target.type === 'over-element' && ((_d = target === null || target === void 0 ? void 0 : target.elements) === null || _d === void 0 ? void 0 : _d.length) === 1) {
                         updateSelectedElementList([target.elements[0]], { triggerEvent: true });
                         sharer.setSharedStorage(keyActionType, 'drag');
                     }
-                    else if ((_b = target.type) === null || _b === void 0 ? void 0 : _b.startsWith('resize-')) {
+                    else if ((_e = target.type) === null || _e === void 0 ? void 0 : _e.startsWith('resize-')) {
                         sharer.setSharedStorage(keyResizeType, target.type);
@@ -260,10 +263,16 @@ sharer.setSharedStorage(keyActionType, 'resize');
             const target = getPointTarget(e.point, Object.assign(Object.assign({}, pointTargetBaseOptions()), { areaSize: listAreaSize, groupQueue: [] }));
+            if (((_f = target === null || target === void 0 ? void 0 : target.elements) === null || _f === void 0 ? void 0 : _f.length) === 1 && ((_h = (_g = target.elements[0]) === null || _g === void 0 ? void 0 : _g.operations) === null || _h === void 0 ? void 0 : _h.lock) === true) {
+                return;
+            }
+            else {
+                updateHoverElement(null);
+            }
             if (target.type === 'list-area') {
                 sharer.setSharedStorage(keyActionType, 'drag-list');
             }
-            else if (target.type === 'over-element' && ((_c = target === null || target === void 0 ? void 0 : target.elements) === null || _c === void 0 ? void 0 : _c.length) === 1) {
+            else if (target.type === 'over-element' && ((_j = target === null || target === void 0 ? void 0 : target.elements) === null || _j === void 0 ? void 0 : _j.length) === 1) {
                 updateSelectedElementList([target.elements[0]], { triggerEvent: true });
                 sharer.setSharedStorage(keyActionType, 'drag');
             }
-            else if ((_d = target.type) === null || _d === void 0 ? void 0 : _d.startsWith('resize-')) {
+            else if ((_k = target.type) === null || _k === void 0 ? void 0 : _k.startsWith('resize-')) {
                 sharer.setSharedStorage(keyResizeType, target.type);
@@ -281,3 +290,3 @@ sharer.setSharedStorage(keyActionType, 'resize');
         pointMove: (e) => {
-            var _a;
+            var _a, _b, _c;
             const data = sharer.getActiveStorage('data');
@@ -293,3 +302,3 @@ const elems = getActiveElements();
                 inBusyMode = 'drag';
-                if (data && (elems === null || elems === void 0 ? void 0 : elems.length) === 1 && start && end) {
+                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);
@@ -308,3 +317,4 @@ elems[0].x += moveX / scale;
                     elems.forEach((elem) => {
-                        if (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;
@@ -341,3 +351,3 @@ elem.y += moveY;
                     elems[0].y = resizedElemSize.y;
-                    if (elems[0].type === 'group' && ((_a = elems[0].operations) === null || _a === void 0 ? void 0 : _a.deepResize) === true) {
+                    if (elems[0].type === 'group' && ((_c = elems[0].operations) === null || _c === void 0 ? void 0 : _c.deepResize) === true) {
                         deepResizeGroupElement(elems[0], {
@@ -444,5 +454,10 @@ w: resizedElemSize.w,
         doubleClick(e) {
-            var _a, _b;
+            var _a, _b, _c, _d;
             const target = getPointTarget(e.point, pointTargetBaseOptions());
-            if (target.elements.length === 1 && ((_a = target.elements[0]) === null || _a === void 0 ? void 0 : _a.type) === 'group') {
+            sharer.setSharedStorage(keySelectedElementController, null);
+            sharer.setSharedStorage(keySelectedElementList, []);
+            if (target.elements.length === 1 && ((_b = (_a = target.elements[0]) === null || _a === void 0 ? void 0 : _a.operations) === null || _b === void 0 ? void 0 : _b.lock) === true) {
+                return;
+            }
+            if (target.elements.length === 1 && ((_c = target.elements[0]) === null || _c === void 0 ? void 0 : _c.type) === 'group') {
                 const pushResult = pushGroupQueue(target.elements[0]);
@@ -455,3 +470,3 @@ if (pushResult === true) {
             }
-            else if (target.elements.length === 1 && ((_b = target.elements[0]) === null || _b === void 0 ? void 0 : _b.type) === 'text') {
+            else if (target.elements.length === 1 && ((_d = target.elements[0]) === null || _d === void 0 ? void 0 : _d.type) === 'text') {
                 eventHub.trigger(middlewareEventTextEdit, {
@@ -466,2 +481,3 @@ element: target.elements[0],
         beforeDrawFrame({ snapshot }) {
+            var _a;
             const { activeStore, sharedStore } = snapshot;
@@ -489,8 +505,18 @@ const { scale, offsetLeft, offsetTop, offsetRight, offsetBottom, width, height, contextHeight, contextWidth, devicePixelRatio } = activeStore;
                 : null;
+            const isLock = !!((_a = hoverElement === null || hoverElement === void 0 ? void 0 : hoverElement.operations) === null || _a === void 0 ? void 0 : _a.lock);
             if ((groupQueue === null || groupQueue === void 0 ? void 0 : groupQueue.length) > 0) {
                 drawGroupQueueVertexesWrappers(helperContext, groupQueueVertexesList, drawBaseOpts);
                 if (hoverElement && actionType !== 'drag') {
-                    drawHoverVertexesWrapper(helperContext, hoverElementVertexes, drawBaseOpts);
+                    if (isLock) {
+                        drawLockVertexesWrapper(helperContext, hoverElementVertexes, Object.assign(Object.assign({}, drawBaseOpts), { controller: calcElementSizeController(hoverElement, {
+                                groupQueue,
+                                controllerSize: 10,
+                                viewScaleInfo
+                            }) }));
+                    }
+                    else {
+                        drawHoverVertexesWrapper(helperContext, hoverElementVertexes, drawBaseOpts);
+                    }
                 }
-                if (elem && ['select', 'drag', 'resize'].includes(actionType)) {
+                if (!isLock && elem && ['select', 'drag', 'resize'].includes(actionType)) {
                     drawSelectedElementControllersVertexes(helperContext, selectedElementController, Object.assign({}, drawBaseOpts));
@@ -501,5 +527,14 @@ }
                 if (hoverElement && actionType !== 'drag') {
-                    drawHoverVertexesWrapper(helperContext, hoverElementVertexes, drawBaseOpts);
+                    if (isLock) {
+                        drawLockVertexesWrapper(helperContext, hoverElementVertexes, Object.assign(Object.assign({}, drawBaseOpts), { controller: calcElementSizeController(hoverElement, {
+                                groupQueue,
+                                controllerSize: 10,
+                                viewScaleInfo
+                            }) }));
+                    }
+                    else {
+                        drawHoverVertexesWrapper(helperContext, hoverElementVertexes, drawBaseOpts);
+                    }
                 }
-                if (elem && ['select', 'drag', 'resize'].includes(actionType)) {
+                if (!isLock && elem && ['select', 'drag', 'resize'].includes(actionType)) {
                     drawSelectedElementControllersVertexes(helperContext, selectedElementController, Object.assign({}, drawBaseOpts));
@@ -506,0 +541,0 @@ }

dist/esm/middleware/selector/util.js

@@ -675,2 +675,3 @@ import { calcElementCenter, rotateElementVertexes, calcElementVertexesInGroup, calcElementQueueVertexesQueueInGroup, calcViewPointSize, rotatePointInGroup, rotatePoint, parseAngleToRadian, limitAngle } from '@idraw/util';
 export function getSelectedListArea(data, opts) {
+    var _a;
     const indexes = [];
@@ -687,3 +688,7 @@ const uuids = [];
     const endY = Math.max(start.y, end.y);
-    data.elements.forEach((elem, idx) => {
+    for (let idx = 0; idx < data.elements.length; idx++) {
+        const elem = data.elements[idx];
+        if (((_a = elem === null || elem === void 0 ? void 0 : elem.operations) === null || _a === void 0 ? void 0 : _a.lock) === true) {
+            continue;
+        }
         const elemSize = calculator.elementSize(elem, viewScaleInfo, viewSizeInfo);
@@ -707,3 +712,3 @@ const center = calcElementCenter(elemSize);
         }
-    });
+    }
     return { indexes, uuids, elements };
@@ -710,0 +715,0 @@ }

package.json

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

No alert changes

Improved metrics

Total package byte prevSize

536135

increased by2.76%

Lines of code

8932

increased by2.6%

No dependency changes