From d21cdae3ea8e3a9df67c943fdec9897d266abb2b Mon Sep 17 00:00:00 2001 From: xiamidaxia Date: Wed, 18 Jun 2025 21:58:07 +0800 Subject: [PATCH] fix(editor): fix zoom and disableScrollLimit -> enableScrollLimit (#390) * fix(core): flow-nodes-content-layer auto resize * fix(editor): fix zoom and disableScrollLimit -> enableScrollLimit --- .../src/components/tools/zoom-select.tsx | 2 +- .../src/hooks/use-editor-props.ts | 7 ++++ .../src/components/tools/zoom-select.tsx | 2 +- .../condition/condition-inputs/index.tsx | 2 +- .../layer/config/playground-config-entity.ts | 2 +- .../fixed-layout-core/src/flow-registers.ts | 6 +--- .../src/layers/flow-nodes-content-layer.tsx | 2 +- .../client/editor/src/preset/editor-props.ts | 2 +- .../src/hooks/use-playground-tools.ts | 34 +++++++++---------- .../src/preset/fixed-layout-preset.ts | 2 +- .../src/preset/fixed-layout-props.ts | 7 +++- .../src/hooks/use-playground-tools.ts | 28 +++++++++++---- .../src/preset/free-layout-preset.ts | 2 +- .../src/hooks/use-playground-tools.ts | 26 +++++++------- 14 files changed, 74 insertions(+), 50 deletions(-) diff --git a/apps/demo-fixed-layout/src/components/tools/zoom-select.tsx b/apps/demo-fixed-layout/src/components/tools/zoom-select.tsx index 60af0408..6528b7a3 100644 --- a/apps/demo-fixed-layout/src/components/tools/zoom-select.tsx +++ b/apps/demo-fixed-layout/src/components/tools/zoom-select.tsx @@ -6,7 +6,7 @@ import { Divider, Dropdown } from '@douyinfe/semi-ui'; import { SelectZoom } from './styles'; export const ZoomSelect = () => { - const tools = usePlaygroundTools(); + const tools = usePlaygroundTools({ maxZoom: 2, minZoom: 0.25 }); const [dropDownVisible, openDropDown] = useState(false); return ( { bind(CustomService).toSelf().inSingletonScope(); }, + scroll: { + /** + * 限制滚动，防止节点都看不到 + * Limit scrolling so that none of the nodes can see it + */ + enableScrollLimit: true, + }, /** * Playground init */ diff --git a/apps/demo-free-layout/src/components/tools/zoom-select.tsx b/apps/demo-free-layout/src/components/tools/zoom-select.tsx index b7007371..7fa24b88 100644 --- a/apps/demo-free-layout/src/components/tools/zoom-select.tsx +++ b/apps/demo-free-layout/src/components/tools/zoom-select.tsx @@ -6,7 +6,7 @@ import { Divider, Dropdown } from '@douyinfe/semi-ui'; import { SelectZoom } from './styles'; export const ZoomSelect = () => { - const tools = usePlaygroundTools(); + const tools = usePlaygroundTools({ maxZoom: 2, minZoom: 0.25 }); const playground = usePlayground(); const [dropDownVisible, openDropDown] = useState(false); return ( diff --git a/apps/demo-free-layout/src/nodes/condition/condition-inputs/index.tsx b/apps/demo-free-layout/src/nodes/condition/condition-inputs/index.tsx index 682d1ee9..ca2b0cfc 100644 --- a/apps/demo-free-layout/src/nodes/condition/condition-inputs/index.tsx +++ b/apps/demo-free-layout/src/nodes/condition/condition-inputs/index.tsx @@ -1,6 +1,6 @@ import { nanoid } from 'nanoid'; import { Field, FieldArray } from '@flowgram.ai/free-layout-editor'; -import { ConditionRow, ConditionRowValueType, VariableSelector } from '@flowgram.ai/form-materials'; +import { ConditionRow, ConditionRowValueType } from '@flowgram.ai/form-materials'; import { Button } from '@douyinfe/semi-ui'; import { IconPlus, IconCrossCircleStroked } from '@douyinfe/semi-icons'; diff --git a/packages/canvas-engine/core/src/core/layer/config/playground-config-entity.ts b/packages/canvas-engine/core/src/core/layer/config/playground-config-entity.ts index 600a36d3..97981ffe 100644 --- a/packages/canvas-engine/core/src/core/layer/config/playground-config-entity.ts +++ b/packages/canvas-engine/core/src/core/layer/config/playground-config-entity.ts @@ -101,7 +101,7 @@ export class PlaygroundConfigEntity extends ConfigEntity { + React.useEffect(() => { // 第一次加载需要把宽高通知 if (!entity.getNodeMeta().autoResizeDisable && node.clientWidth && node.clientHeight) { const transform = entity.getData(FlowNodeTransformData); diff --git a/packages/client/editor/src/preset/editor-props.ts b/packages/client/editor/src/preset/editor-props.ts index f71c45ed..c6b47a98 100644 --- a/packages/client/editor/src/preset/editor-props.ts +++ b/packages/client/editor/src/preset/editor-props.ts @@ -87,7 +87,7 @@ export interface EditorProps< reduxDevTool?: ReduxDevToolPluginOptions; scroll?: { - disableScrollLimit?: boolean; // 关闭滚动限制 + enableScrollLimit?: boolean; // 开启滚动限制 disableScrollBar?: boolean; // 关闭滚动条 }; diff --git a/packages/client/fixed-layout-editor/src/hooks/use-playground-tools.ts b/packages/client/fixed-layout-editor/src/hooks/use-playground-tools.ts index 0f948061..eee50acf 100644 --- a/packages/client/fixed-layout-editor/src/hooks/use-playground-tools.ts +++ b/packages/client/fixed-layout-editor/src/hooks/use-playground-tools.ts @@ -72,7 +72,7 @@ export interface PlaygroundTools { } export function usePlaygroundTools(props?: PlaygroundToolsPropsType): PlaygroundTools { - const { maxZoom = 2, minZoom = 0.25, padding = 30 } = props || {}; + const { maxZoom, minZoom, padding = 30 } = props || {}; const playground = usePlayground(); const container = usePlaygroundContainer(); const historyService = container.isBound(HistoryService) @@ -85,12 +85,6 @@ export function usePlaygroundTools(props?: PlaygroundToolsPropsType): Playground const [canUndo, setCanUndo] = useState(false); const [canRedo, setCanRedo] = useState(false); - const fitViewOptions = { - maxZoom, - minZoom, - padding, - }; - const changeLayout = useCallback( (newLayout?: FlowLayoutDefault) => { const allNodes = doc.getAllNodes(); @@ -105,8 +99,10 @@ export function usePlaygroundTools(props?: PlaygroundToolsPropsType): Playground }); setTimeout(() => { fitView(doc, playground.config, { - ...fitViewOptions, easingDuration: 300, + padding, + maxZoom: playground.config.config.maxZoom, + minZoom: playground.config.config.minZoom, }); }, 10); setTimeout(() => { @@ -118,14 +114,11 @@ export function usePlaygroundTools(props?: PlaygroundToolsPropsType): Playground doc.setLayout(newLayout); updateLayout(doc.layout); }, - [doc, playground] + [doc, playground, padding] ); const handleZoomOut = useCallback( (easing?: boolean) => { - if (zoom < minZoom) { - return; - } playground?.config.zoomout(easing); }, [zoom, playground] @@ -133,9 +126,6 @@ export function usePlaygroundTools(props?: PlaygroundToolsPropsType): Playground const handleZoomIn = useCallback( (easing?: boolean) => { - if (zoom > maxZoom) { - return; - } playground?.config.zoomin(easing); }, [zoom, playground] @@ -145,12 +135,14 @@ export function usePlaygroundTools(props?: PlaygroundToolsPropsType): Playground const handleFitView = useCallback( (easing?: boolean, easingDuration?: number) => { fitView(doc, playground.config, { - ...fitViewOptions, easing, easingDuration, + padding, + maxZoom: playground.config.config.maxZoom, + minZoom: playground.config.config.minZoom, }); }, - [doc, playground] + [doc, playground, padding] ); const handleUpdateZoom = useCallback( @@ -179,6 +171,14 @@ export function usePlaygroundTools(props?: PlaygroundToolsPropsType): Playground return () => dispose.dispose(); }, [playground, historyService]); + useEffect(() => { + const config = playground.config.config; + playground.config.updateConfig({ + maxZoom: maxZoom !== undefined ? maxZoom : config.maxZoom, + minZoom: minZoom !== undefined ? minZoom : config.minZoom, + }); + }, [playground, maxZoom, minZoom]); + return { zoomin: handleZoomIn, zoomout: handleZoomOut, diff --git a/packages/client/fixed-layout-editor/src/preset/fixed-layout-preset.ts b/packages/client/fixed-layout-editor/src/preset/fixed-layout-preset.ts index 6dd0509a..712a32fc 100644 --- a/packages/client/fixed-layout-editor/src/preset/fixed-layout-preset.ts +++ b/packages/client/fixed-layout-editor/src/preset/fixed-layout-preset.ts @@ -141,7 +141,7 @@ export function createFixedLayoutPreset( FlowNodesContentLayer, // 节点内容渲染 FlowNodesTransformLayer // 节点位置偏移计算 ); - if (!opts.scroll?.disableScrollLimit) { + if (opts.scroll?.enableScrollLimit) { // 控制滚动范围 ctx.playground.registerLayer(FlowScrollLimitLayer); } diff --git a/packages/client/fixed-layout-editor/src/preset/fixed-layout-props.ts b/packages/client/fixed-layout-editor/src/preset/fixed-layout-props.ts index 3b18da75..413e4f2d 100644 --- a/packages/client/fixed-layout-editor/src/preset/fixed-layout-props.ts +++ b/packages/client/fixed-layout-editor/src/preset/fixed-layout-props.ts @@ -41,5 +41,10 @@ export namespace FixedLayoutProps { /** * 默认配置 */ - export const DEFAULT: FixedLayoutProps = EditorProps.DEFAULT as FixedLayoutProps; + export const DEFAULT: FixedLayoutProps = { + ...EditorProps.DEFAULT, + scroll: { + enableScrollLimit: true, + }, + } as FixedLayoutProps; } diff --git a/packages/client/free-layout-editor/src/hooks/use-playground-tools.ts b/packages/client/free-layout-editor/src/hooks/use-playground-tools.ts index 0dc6aac0..813f31ef 100644 --- a/packages/client/free-layout-editor/src/hooks/use-playground-tools.ts +++ b/packages/client/free-layout-editor/src/hooks/use-playground-tools.ts @@ -44,7 +44,19 @@ export interface PlaygroundTools { setMouseScrollDelta: (mouseScrollDelta: number | ((zoom: number) => number)) => void; } -export function usePlaygroundTools(): PlaygroundTools { +export interface PlaygroundToolsPropsType { + /** + * 最大缩放比，默认 2 + */ + maxZoom?: number; + /** + * 最小缩放比，默认 0.25 + */ + minZoom?: number; +} + +export function usePlaygroundTools(props?: PlaygroundToolsPropsType): PlaygroundTools { + const { maxZoom, minZoom } = props || {}; const playground = usePlayground(); const doc = useService(WorkflowDocument); @@ -55,9 +67,6 @@ export function usePlaygroundTools(): PlaygroundTools { const handleZoomOut = useCallback( (easing?: boolean) => { - if (zoom < 0.1) { - return; - } playground?.config.zoomout(easing); }, [zoom, playground] @@ -65,9 +74,6 @@ export function usePlaygroundTools(): PlaygroundTools { const handleZoomIn = useCallback( (easing?: boolean) => { - if (zoom > 1.9) { - return; - } playground?.config.zoomin(easing); }, [zoom, playground] @@ -171,6 +177,14 @@ export function usePlaygroundTools(): PlaygroundTools { }); } + useEffect(() => { + const config = playground.config.config; + playground.config.updateConfig({ + maxZoom: maxZoom !== undefined ? maxZoom : config.maxZoom, + minZoom: minZoom !== undefined ? minZoom : config.minZoom, + }); + }, [playground, maxZoom, minZoom]); + return { zoomin: handleZoomIn, zoomout: handleZoomOut, diff --git a/packages/client/free-layout-editor/src/preset/free-layout-preset.ts b/packages/client/free-layout-editor/src/preset/free-layout-preset.ts index 5942ea53..ca583344 100644 --- a/packages/client/free-layout-editor/src/preset/free-layout-preset.ts +++ b/packages/client/free-layout-editor/src/preset/free-layout-preset.ts @@ -181,7 +181,7 @@ export function createFreeLayoutPreset( } }, }); - if (!opts.scroll?.disableScrollLimit) { + if (opts.scroll?.enableScrollLimit) { // 控制滚动范围 ctx.playground.registerLayer(FlowScrollLimitLayer); } diff --git a/packages/client/playground-react/src/hooks/use-playground-tools.ts b/packages/client/playground-react/src/hooks/use-playground-tools.ts index 620cddff..caf0ce4b 100644 --- a/packages/client/playground-react/src/hooks/use-playground-tools.ts +++ b/packages/client/playground-react/src/hooks/use-playground-tools.ts @@ -1,5 +1,6 @@ import { useCallback, useEffect, useState } from 'react'; +import { DisposableCollection } from '@flowgram.ai/utils'; import { EditorState, EditorStateConfigEntity, @@ -7,7 +8,6 @@ import { useConfigEntity, usePlayground, } from '@flowgram.ai/core'; -import { DisposableCollection } from '@flowgram.ai/utils'; export interface PlaygroundToolsPropsType { /** @@ -49,7 +49,7 @@ export interface PlaygroundTools { } export function usePlaygroundTools(props?: PlaygroundToolsPropsType): PlaygroundTools { - const { maxZoom = 2, minZoom = 0.25 } = props || {}; + const { maxZoom, minZoom } = props || {}; const playground = usePlayground(); const editorState = useConfigEntity(EditorStateConfigEntity, true); @@ -57,29 +57,23 @@ export function usePlaygroundTools(props?: PlaygroundToolsPropsType): Playground const handleZoomOut = useCallback( (easing?: boolean) => { - if (zoom < minZoom) { - return; - } playground.config.zoomout(easing); }, - [zoom, playground, minZoom], + [playground] ); const handleZoomIn = useCallback( (easing?: boolean) => { - if (zoom > maxZoom) { - return; - } playground.config.zoomin(easing); }, - [zoom, playground, maxZoom], + [playground] ); const handleUpdateZoom = useCallback( (value: number, easing?: boolean, easingDuration?: number) => { playground.config.updateZoom(value, easing, easingDuration); }, - [playground], + [playground] ); const handleToggleIneractiveType = useCallback(() => { @@ -92,10 +86,18 @@ export function usePlaygroundTools(props?: PlaygroundToolsPropsType): Playground useEffect(() => { const dispose = new DisposableCollection(); - dispose.push(playground.onZoom(z => setZoom(z))); + dispose.push(playground.onZoom((z) => setZoom(z))); return () => dispose.dispose(); }, [playground]); + useEffect(() => { + const config = playground.config.config; + playground.config.updateConfig({ + maxZoom: maxZoom !== undefined ? maxZoom : config.maxZoom, + minZoom: minZoom !== undefined ? minZoom : config.minZoom, + }); + }, [playground, maxZoom, minZoom]); + return { zoomin: handleZoomIn, zoomout: handleZoomOut,