refactor: 优化画布锁机制

packages/designer/src/builtin-simulator/bem-tools/border-detecting.tsx

@@ -112,7 +112,8 @@ export class BorderDetecting extends Component<{ host: BuiltinSimulatorHost }> {
     }
 
     const lockedNode = getClosestNode(current, (n) => {
-      return n?.getExtraProp('isLocked')?.getValue() === true;
+      // 假如当前节点就是 locked 状态，要从当前节点的父节点开始查找
+      return !!(current?.isLocked ? n.parent?.isLocked : n.isLocked);
     });
     if (lockedNode && lockedNode.getId() !== current.getId()) {
       // 选中父节锁定的节点

packages/designer/src/builtin-simulator/bem-tools/border-selecting.tsx

@@ -135,7 +135,7 @@ function createAction(content: ReactNode | ComponentType<any> | ActionContentObj
         className="lc-borders-action"
         onClick={() => {
           action && action(node);
-          const editor = globalContext.get(Editor);
+          const editor = globalContext.get('editor');
           const npm = node?.componentMeta?.npm;
           const selected =
             [npm?.package, npm?.componentName].filter((item) => !!item).join('-') ||

packages/designer/src/builtin-simulator/host.ts

@@ -1218,10 +1218,7 @@ export class BuiltinSimulatorHost implements ISimulatorHost<BuiltinSimulatorProp
     }
     const dropContainer = this.getDropContainer(e);
     const canDropIn = dropContainer?.container?.componentMeta?.prototype?.options?.canDropIn;
-    const lockedNode = getClosestNode(dropContainer?.container as Node, (node) => {
+    const lockedNode = getClosestNode(dropContainer?.container as Node, (node) => node.isLocked);
-      return node?.getExtraProp('isLocked')?.getValue() === true;
-    });
-    // const isLocked = dropContainer?.container?.getExtraProp('isLocked')?.getValue();
     if (lockedNode) return null;
     if (
       !dropContainer ||

packages/designer/src/builtin-simulator/utils/clickable.ts

@@ -11,12 +11,13 @@ export const getClosestClickableNode = (
   event: MouseEvent,
 ) => {
   let node = currentNode;
-  // 执行 onClickHook 来判断当前节点是否可点击
   while (node) {
-    const lockedNode = getClosestNode(node, (n) => {
+    // 判断当前节点是否可点击
-      return n?.getExtraProp('isLocked')?.getValue() === true;
-    });
     let canClick = canClickNode(node, event);
+    const lockedNode = getClosestNode(node!, (n) => {
+      // 假如当前节点就是 locked 状态，要从当前节点的父节点开始查找
+      return !!(node?.isLocked ? n.parent?.isLocked : n.isLocked);
+    });
     if (lockedNode && lockedNode.getId() !== node.getId()) {
       canClick = false;
     }

packages/designer/src/component-meta.ts

@@ -474,12 +474,11 @@ const builtinComponentActions: ComponentAction[] = [
       icon: IconUnlock, // 解锁icon
       title: intlNode('lock'),
       action(node: Node) {
-        node.getExtraProp('isLocked', true)?.setValue(true);
+        node.lock();
       },
     },
     condition: (node: Node) => {
-      const isLocked = node.getExtraProp('isLocked')?.getValue();
+      return (engineConfig.get('enableCanvasLock', false) && node.isContainer() && !node.isLocked);
-      return (engineConfig.get('enableCanvasLock', false) && node.isContainer() && isLocked !== true);
     },
     important: true,
   },
@@ -489,12 +488,11 @@ const builtinComponentActions: ComponentAction[] = [
       icon: IconLock, // 锁定icon
       title: intlNode('unlock'),
       action(node: Node) {
-        node.getExtraProp('isLocked', true)?.setValue(false);
+        node.lock(false);
       },
     },
     condition: (node: Node) => {
-      const isLocked = node.getExtraProp('isLocked')?.getValue();
+      return (engineConfig.get('enableCanvasLock', false) && node.isContainer() && node.isLocked);
-      return (engineConfig.get('enableCanvasLock', false) && node.isContainer() && isLocked === true);
     },
     important: true,
   },

packages/designer/src/document/node/node.ts

@@ -561,8 +561,8 @@ export class Node<Schema extends NodeSchema = NodeSchema> {
     return this.props.get(getConvertedExtraKey(key), stash) || null;
   }
 
-  setExtraProp(key: string, value: CompositeValue, spread = false, options: any = {}): Prop | null {
+  setExtraProp(key: string, value: CompositeValue) {
-    return this.props.add(value, getConvertedExtraKey(key), spread, options) || null;
+    this.getProp(getConvertedExtraKey(key), true)?.setValue(value);
   }
 
   /**

packages/plugin-outline-pane/src/tree-node.ts

@@ -87,15 +87,11 @@ export default class TreeNode {
   }
 
   @computed get locked(): boolean {
-    return this.node.getExtraProp('isLocked', false)?.getValue() === true;
+    return this.node.isLocked;
   }
 
   setLocked(flag: boolean) {
-    if (flag) {
+    this.node.lock(flag);
-      this.node.getExtraProp('isLocked', true)?.setValue(true);
-    } else {
-      this.node.getExtraProp('isLocked', false)?.remove();
-    }
   }
 
   @computed get selected(): boolean {

packages/rax-simulator-renderer/package.json

@@ -55,6 +55,6 @@
   "publishConfig": {
     "registry": "https://registry.npm.alibaba-inc.com"
   },
-  "homepage": "https://unpkg.alibaba-inc.com/@ali/lowcode-rax-simulator-renderer@1.0.60/build/index.html",
+  "homepage": "https://unpkg.alibaba-inc.com/@ali/lowcode-rax-simulator-renderer@1.0.61/build/index.html",
   "gitHead": "3bfd7df92985ec6c9d2ccb8ba95d7b0829fa2b1d"
 }

packages/utils/src/node-helper.ts

@@ -15,8 +15,8 @@ export const getClosestNode = (node: Node, until: (node: Node) => boolean): Node
 
 /**
  * 判断节点是否可被点击
- * @param {unknown} e 点击事件
  * @param {Node} node 节点
+ * @param {unknown} e 点击事件
  * @returns {boolean} 是否可点击，true表示可点击
  */
 export const canClickNode = (node: Node, e: unknown): boolean => {