From b94b06965eef741dba4923267e46f2669c8ba97c Mon Sep 17 00:00:00 2001 From: "lihao.ylh" Date: Thu, 5 Aug 2021 16:33:25 +0800 Subject: [PATCH 1/2] =?UTF-8?q?fix:=20=E4=BF=AE=E5=A4=8D=E5=9C=A8=E6=A0=87?= =?UTF-8?q?=E5=87=86=E7=89=88=E5=9C=BA=E6=99=AF=E4=B8=8B,=20className=20?= =?UTF-8?q?=E8=AE=BE=E7=BD=AE=E5=A4=B1=E6=95=88?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/vision-polyfill/src/props-reducers/style-reducer.ts | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/packages/vision-polyfill/src/props-reducers/style-reducer.ts b/packages/vision-polyfill/src/props-reducers/style-reducer.ts index b6856f439..cd0e52805 100644 --- a/packages/vision-polyfill/src/props-reducers/style-reducer.ts +++ b/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; } From c6446d87dc05809269f9bc89163fdfbc1c55f550 Mon Sep 17 00:00:00 2001 From: "lihao.ylh" Date: Thu, 5 Aug 2021 16:36:23 +0800 Subject: [PATCH 2/2] =?UTF-8?q?refactor:=20=E4=BC=98=E5=8C=96=E7=94=BB?= =?UTF-8?q?=E5=B8=83=E9=94=81=E6=9C=BA=E5=88=B6?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../builtin-simulator/bem-tools/border-detecting.tsx | 3 ++- .../builtin-simulator/bem-tools/border-selecting.tsx | 2 +- packages/designer/src/builtin-simulator/host.ts | 5 +---- .../designer/src/builtin-simulator/utils/clickable.ts | 9 +++++---- packages/designer/src/component-meta.ts | 10 ++++------ packages/designer/src/document/node/node.ts | 4 ++-- packages/plugin-outline-pane/src/tree-node.ts | 8 ++------ 7 files changed, 17 insertions(+), 24 deletions(-) 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 {