GitHub/jsoncrack.com
1
0
Fork 0
mirror of https://github.com/AykutSarac/jsoncrack.com.git synced 2025-01-27 15:22:56 +08:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #203 from dogukanuhn/main

Browse Source 
Canvas should fit into view on click Center icon at toolbar
This commit is contained in:
Aykut Saraç 2022-09-24 16:05:44 +03:00 committed by GitHub
commit 6a8ff533b7
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 11 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
src/components/Graph/index.tsx
View File

@ -41,6 +41,7 @@ const StyledEditorWrapper = styled.div<{ isWidget: boolean }>`
`;
const GraphComponent = ({ isWidget, openModal, setSelectedNode }: LayoutProps) => {
const [minScale, setMinScale] = React.useState(0.3);
const setGraphValue = useGraph(state => state.setGraphValue);
const setConfig = useConfig(state => state.setConfig);
const loading = useGraph(state => state.loading);
@ -71,7 +72,11 @@ const GraphComponent = ({ isWidget, openModal, setSelectedNode }: LayoutProps) =
const onLayoutChange = React.useCallback(
(layout: ElkRoot) => {
if (layout.width && layout.height) {
const areaSize = layout.width * layout.height;
setMinScale((1_000_000 * 0.5) / areaSize);
setSize({ width: layout.width + 400, height: layout.height + 400 });
requestAnimationFrame(() => {
setTimeout(() => {
setGraphValue("loading", false);
@ -94,9 +99,9 @@ const GraphComponent = ({ isWidget, openModal, setSelectedNode }: LayoutProps) =
{loading && <Loading message="Painting graph..." />}
<TransformWrapper
maxScale={2}
minScale={0.25}
initialScale={0.7}
wheel={{ step: 0.05 }}
minScale={minScale}
initialScale={0.4}
wheel={{ step: 0.08 }}
zoomAnimation={{ animationType: "linear" }}
doubleClick={{ disabled: true }}
onInit={onInit}
@ -114,6 +119,7 @@ const GraphComponent = ({ isWidget, openModal, setSelectedNode }: LayoutProps) =
}}
>
<Canvas
className="jsoncrack-canvas"
nodes={nodes}
edges={edges}
maxWidth={size.width}

3
src/hooks/store/useConfig.tsx
View File

@ -51,7 +51,8 @@ const useConfig = create<Config & ConfigActions>()((set, get) => ({
},
centerView: () => {
const zoomPanPinch = get().zoomPanPinch;
if (zoomPanPinch) zoomPanPinch.centerView(0.4);
const canvas = document.querySelector(".jsoncrack-canvas") as HTMLElement;
if (zoomPanPinch && canvas) zoomPanPinch.zoomToElement(canvas);
},
setConfig: (setting: keyof Config, value: unknown) => set({ [setting]: value }),
}));