Merge commit 'c6446d87dc05809269f9bc89163fdfbc1c55f550' into def_releases_202108031430088_ali-lowcode_ali-lowcode-engine/1.0.62

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) => {
-      return node?.getExtraProp('isLocked')?.getValue() === true;
-    });
-    // const isLocked = dropContainer?.container?.getExtraProp('isLocked')?.getValue();
+    const lockedNode = getClosestNode(dropContainer?.container as Node, (node) => node.isLocked);
     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() && isLocked !== true);
+      return (engineConfig.get('enableCanvasLock', false) && node.isContainer() && !node.isLocked);
     },
     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() && isLocked === true);
+      return (engineConfig.get('enableCanvasLock', false) && node.isContainer() && node.isLocked);
     },
     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 {
-    return this.props.add(value, getConvertedExtraKey(key), spread, options) || null;
+  setExtraProp(key: string, value: CompositeValue) {
+    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.getExtraProp('isLocked', true)?.setValue(true);
-    } else {
-      this.node.getExtraProp('isLocked', false)?.remove();
-    }
+    this.node.lock(flag);
   }
 
   @computed get selected(): boolean {

packages/vision-polyfill/src/props-reducers/style-reducer.ts

@@ -12,20 +12,23 @@ export function stylePropsReducer(props: any, node: any) {
     cssClass = `_css_pseudo_${node.id.replace(/\$/g, '_')}`;
     styleProp = props.__style__;
     appendStyleNode(props, styleProp, cssClass, cssId);
+    props.className = cssClass;
   }
   if (props.pageStyle) {
     cssId = '_style_pseudo_engine-document';
     cssClass = 'engine-document';
     styleProp = props.pageStyle;
     appendStyleNode(props, styleProp, cssClass, cssId);
+    props.className = cssClass;
   }
   if (props.containerStyle) {
     cssId = `_style_pseudo_${node.id}`;
     cssClass = `_css_pseudo_${node.id.replace(/\$/g, '_')}`;
     styleProp = props.containerStyle;
     appendStyleNode(props, styleProp, cssClass, cssId);
+    props.className = cssClass;
   }
-  props.className = cssClass;
+
   return props;
 }