feat: add attr operation

packages/core/examples/features/lib/data/rect.js

@@ -23,7 +23,9 @@ const data = {
       h: 120,
       // angle: 30,
       type: "rect",
-      lock: true,
+      operation: {
+        lock: true,
+      },
       desc: {
         color: "#cccccc",
         borderRadius: 60,

packages/core/examples/features/lib/data/text.js

@@ -44,8 +44,10 @@ const data = {
       w: 200,
       h: 100,
       type: "text",
-      invisible: true,
-      lock: true,
+      operation: {
+        invisible: true,
+        lock: true,
+      },
       desc: {
         fontSize: 20,
         color: "#333333",

packages/core/examples/test/elements.html

@@ -433,7 +433,9 @@
           y: 20,
           w: 200,
           h: 60,
-          lock: true,
+          operation: {
+            lock: true,
+          },
           type: "rect",
           desc: {
             color: "#c6e0f5",

packages/core/src/index.ts

@@ -312,7 +312,7 @@ class Core {
         this[_tempData].set('selectedUUID', uuid);
       } else {
         const [index, uuid] = this[_element].isPointInElement(point, this[_data]);
-        if (index >= 0 && this[_data].elements[index]?.invisible !== true) {
+        if (index >= 0 && this[_data].elements[index]?.operation?.invisible !== true) {
           // Controll Element
           this.selectElementByIndex(index, { useMode: true });
           if (typeof uuid === 'string' && this[_coreEvent].has('screenSelectElement')) {
@@ -433,7 +433,7 @@ class Core {
         const index: number | null = this[_helper].getElementIndexByUUID(elementUUID);
         if (index !== null && index >= 0) {
           const elem = this[_data].elements[index];
-          if (elem.lock === true || elem.invisible === true) {
+          if (elem?.operation?.lock === true || elem?.operation?.invisible === true) {
             this[_board].resetCursor();
             return;
           }
@@ -471,7 +471,7 @@ class Core {
       const idx = this[_helper].getElementIndexByUUID(uuid);
       if (idx === null) return;
       const elem = this[_data].elements[idx];
-      if (elem.lock !== true && elem.invisible !== true) {
+      if (elem?.operation?.lock !== true && elem?.operation?.invisible !== true) {
         this[_element].dragElement(this[_data], uuid, point, prevPoint, this[_board].getContext().getTransform().scale);
       }
     });

packages/core/src/lib/element.ts

@@ -93,7 +93,7 @@ export class Element {
     if (!data.elements[index]) {
       return null;
     }
-    if (data.elements[index].lock === true) {
+    if (data.elements[index]?.operation?.lock === true) {
       return null;
     }
     const moveX = (point.x - prevPoint.x) / scale;

packages/core/src/lib/helper.ts

@@ -164,7 +164,7 @@ export class Helper implements TypeHelper {
     // ctx.rect(x, y, w, h);
     ctx.closePath();
     data.elements.forEach((elem) => {
-      if (elem.invisible !== true) {
+      if (elem?.operation?.invisible !== true) {
         const centerX = elem.x + elem.w / 2;
         const centerY = elem.y + elem.h / 2;
         if (ctx.isPointInPathWithoutScroll(centerX, centerY)) {
@@ -214,7 +214,7 @@ export class Helper implements TypeHelper {
     }
     const index: number = this._helperConfig.elementIndexMap[uuid];
     const elem = data.elements[index];
-    if (elem.invisible === true) {
+    if (elem?.operation?.invisible === true) {
       return;
     }
     const wrapper = this._createSelectedElementWrapper(elem, opts);
@@ -250,7 +250,7 @@ export class Helper implements TypeHelper {
     const wrapper: TypeHeplerSelectedElementWrapper = {
       uuid: elem.uuid,
       dotSize: dotSize,
-      lock: elem.lock === true,
+      lock: elem?.operation?.lock === true,
       dots: {
         topLeft: {
           x: elem.x - dotSize - bw,
@@ -291,7 +291,7 @@ export class Helper implements TypeHelper {
       },
       lineWidth: lineWidth,
       lineDash: lineDash,
-      color: elem.lock === true ? elemWrapper.lockColor : elemWrapper.color,
+      color: elem?.operation?.lock === true ? elemWrapper.lockColor : elemWrapper.color,
     };
 
     if (typeof elem.angle === 'number' && (elem.angle > 0 || elem.angle < 0)) {

packages/types/src/lib/element.ts

@@ -6,14 +6,17 @@ type TypeElementAttrs = {
   w: number;
   h: number;
   angle: number;
+  operation?: {
+    lock?: boolean,
+    invisible?: boolean,
+  }
+  extension?: {[key: string]: any} | any;
 }
 
 type TypeElementBase <T extends keyof TypeElemDesc | TypeElemType> = TypeElementAttrs & {
   name?: string;
   uuid?: string;
   type: T | TypeElemType;
-  lock?: boolean;
-  invisible?: boolean;
   desc: TypeElemDesc[T];
 }