diff --git a/src/components/flow/FlowEditor.vue b/src/components/flow/FlowEditor.vue index 748ad80..c2c4de8 100644 --- a/src/components/flow/FlowEditor.vue +++ b/src/components/flow/FlowEditor.vue @@ -159,12 +159,13 @@ function applyMetaToModel(model: BaseNodeModel, metaInput?: Record) } function applyStyleToModel(model: BaseNodeModel, styleInput?: Record) { - const style = normalizeNodeStyle(styleInput, { width: model.width, height: model.height }); - if (style.width && model.width !== style.width) { - model.width = style.width; + // 只有当 style 中明确指定了 width/height 时才更新 model + // 避免用默认值覆盖用户的手动缩放操作 + if (styleInput?.width != null && model.width !== styleInput.width) { + model.width = styleInput.width; } - if (style.height && model.height !== style.height) { - model.height = style.height; + if (styleInput?.height != null && model.height !== styleInput.height) { + model.height = styleInput.height; } } @@ -174,25 +175,33 @@ function normalizeNodeModel(model: BaseNodeModel) { const props = (model.getProperties?.() as any) ?? (model as any)?.properties ?? {}; const incomingMeta = ensureMeta(props.meta); + + // 优先使用 model 的实际尺寸(用户可能刚刚手动缩放了节点) const normalized = normalizePropertiesWithStyle( { ...props, meta: incomingMeta }, - { width: props.width ?? model.width, height: props.height ?? model.height } + { width: model.width, height: model.height } ); + const currentMeta = ensureMeta((model as any)?.properties?.meta); const metaChanged = currentMeta.visible !== incomingMeta.visible || currentMeta.locked !== incomingMeta.locked || currentMeta.groupId !== incomingMeta.groupId; - const styleChanged = - !styleEquals(props.style, normalized.style) || - props.width !== normalized.width || - props.height !== normalized.height; + + // 只检查 style 的其他属性变化,不检查 width/height + // 因为 width/height 应该由 LogicFlow 的缩放控制,而不是由 properties 控制 + const styleChanged = !styleEquals(props.style, normalized.style); if (metaChanged || styleChanged) { - lfInstance.setProperties(model.id, normalized); + // 同步 style 到 properties,但保持 width/height 与 model 一致 + lfInstance.setProperties(model.id, { + ...normalized, + width: model.width, + height: model.height + }); } applyMetaToModel(model, normalized.meta); - applyStyleToModel(model, normalized.style); + // 不再调用 applyStyleToModel,因为 width/height 应该由 LogicFlow 控制 } function normalizeAllNodes() { diff --git a/src/ts/useNodeAppearance.ts b/src/ts/useNodeAppearance.ts index 5a2afa0..0dfaff1 100644 --- a/src/ts/useNodeAppearance.ts +++ b/src/ts/useNodeAppearance.ts @@ -12,9 +12,13 @@ export function useNodeAppearance(options?: { onPropsChange?: PropsChangeHandler const syncFromProps = (props?: any, node?: any) => { const target = props ?? node?.properties ?? {}; + // 优先使用 node 的实际尺寸,因为用户缩放时 node.width/height 会先更新 + const currentWidth = node?.width ?? target.width; + const currentHeight = node?.height ?? target.height; + style.value = normalizeNodeStyle(target.style, { - width: target.width ?? node?.width, - height: target.height ?? node?.height + width: currentWidth, + height: currentHeight }); options?.onPropsChange?.(target, node); };