diff --git a/packages/designer/src/builtin-simulator/bem-tools/border-detecting.tsx b/packages/designer/src/builtin-simulator/bem-tools/border-detecting.tsx index 3108d6956..c546ca9f9 100644 --- a/packages/designer/src/builtin-simulator/bem-tools/border-detecting.tsx +++ b/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()) { // 选中父节锁定的节点 diff --git a/packages/designer/src/builtin-simulator/bem-tools/border-selecting.tsx b/packages/designer/src/builtin-simulator/bem-tools/border-selecting.tsx index a55cb20a1..ea21f820b 100644 --- a/packages/designer/src/builtin-simulator/bem-tools/border-selecting.tsx +++ b/packages/designer/src/builtin-simulator/bem-tools/border-selecting.tsx @@ -135,7 +135,7 @@ function createAction(content: ReactNode | ComponentType | 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('-') || diff --git a/packages/designer/src/builtin-simulator/host.ts b/packages/designer/src/builtin-simulator/host.ts index 33a229341..7ce160fa4 100644 --- a/packages/designer/src/builtin-simulator/host.ts +++ b/packages/designer/src/builtin-simulator/host.ts @@ -1218,10 +1218,7 @@ export class BuiltinSimulatorHost implements ISimulatorHost { - 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 || diff --git a/packages/designer/src/builtin-simulator/utils/clickable.ts b/packages/designer/src/builtin-simulator/utils/clickable.ts index 0e3f05834..4531a7175 100644 --- a/packages/designer/src/builtin-simulator/utils/clickable.ts +++ b/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; } diff --git a/packages/designer/src/component-meta.ts b/packages/designer/src/component-meta.ts index 0da0d5f09..4c9363682 100644 --- a/packages/designer/src/component-meta.ts +++ b/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, }, diff --git a/packages/designer/src/document/node/node.ts b/packages/designer/src/document/node/node.ts index a634a8386..b480c5722 100644 --- a/packages/designer/src/document/node/node.ts +++ b/packages/designer/src/document/node/node.ts @@ -561,8 +561,8 @@ export class Node { 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); } /** diff --git a/packages/plugin-outline-pane/src/tree-node.ts b/packages/plugin-outline-pane/src/tree-node.ts index 75e715e92..a38aa44a4 100644 --- a/packages/plugin-outline-pane/src/tree-node.ts +++ b/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 {