diff --git a/src/components/Graph/index.tsx b/src/components/Graph/index.tsx index 584182d..12411d8 100644 --- a/src/components/Graph/index.tsx +++ b/src/components/Graph/index.tsx @@ -31,7 +31,8 @@ const StyledEditorWrapper = styled.div<{ isWidget: boolean }>` cursor: move; } - .dragging, .dragging button { + .dragging, + .dragging button { pointer-events: none; } @@ -45,7 +46,6 @@ const GraphComponent = ({ openModal, setSelectedNode, }: LayoutProps) => { - const [minScale, setMinScale] = React.useState(0.4); const setLoading = useGraph(state => state.setLoading); const setConfig = useConfig(state => state.setConfig); const centerView = useConfig(state => state.centerView); @@ -82,23 +82,45 @@ const GraphComponent = ({ (areaSize * 100) / (size.width * size.height) - 100 ); - const MIN_SCALE = Math.round((450_000 / areaSize) * 100) / 100; - const scale = MIN_SCALE > 2 ? 1 : MIN_SCALE <= 0 ? 0.1 : MIN_SCALE; - - setMinScale(scale); setSize({ width: layout.width + 400, height: layout.height + 400 }); requestAnimationFrame(() => { setTimeout(() => { setLoading(false); - setTimeout(() => (changeRatio > 100 || isWidget) && centerView(), 0); + setTimeout(() => (changeRatio > 75 || isWidget) && centerView(), 0); }, 0); }); } }, - [centerView, isWidget, setLoading, size.height, size.width] + [size.width, size.height, setLoading, isWidget, centerView] ); + // const onLayoutChange = React.useCallback( + // (layout: ElkRoot) => { + // if (layout.width && layout.height) { + // const areaSize = layout.width * layout.height; + // const changeRatio = Math.abs( + // (areaSize * 100) / (size.width * size.height) - 100 + // ); + + // const MIN_SCALE = Math.round((400_000 / areaSize) * 100) / 100; + + // const scale = MIN_SCALE > 2 ? 1 : MIN_SCALE <= 0 ? 0.1 : MIN_SCALE; + + // setMinScale(scale); + // setSize({ width: layout.width + 400, height: layout.height + 400 }); + + // requestAnimationFrame(() => { + // setTimeout(() => { + // setLoading(false); + // setTimeout(() => (changeRatio > 50 || isWidget) && centerView(), 0); + // }, 0); + // }); + // } + // }, + // [centerView, isWidget, setLoading, size.height, size.width] + // ); + const onCanvasClick = React.useCallback(() => { const input = document.querySelector("input:focus") as HTMLInputElement; if (input) input.blur(); @@ -111,7 +133,7 @@ const GraphComponent = ({ {loading && }