GitHub/jsoncrack.com
1
0
Fork 0
mirror of https://github.com/AykutSarac/jsoncrack.com.git synced 2025-02-04 01:32:54 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix: canvas scaling

Browse Source
This commit is contained in:
AykutSarac 2022-11-01 12:18:12 +03:00
parent fb6d8a55f5
commit d3bbc6d813
1 changed files with 31 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -31,7 +31,8 @@ const StyledEditorWrapper = styled.div<{ isWidget: boolean }>`
cursor: move; cursor: move;
} }
.dragging, .dragging button { .dragging,
.dragging button {
pointer-events: none; pointer-events: none;
} }
@ -45,7 +46,6 @@ const GraphComponent = ({
openModal, openModal,
setSelectedNode, setSelectedNode,
}: LayoutProps) => { }: LayoutProps) => {
const [minScale, setMinScale] = React.useState(0.4);
const setLoading = useGraph(state => state.setLoading); const setLoading = useGraph(state => state.setLoading);
const setConfig = useConfig(state => state.setConfig); const setConfig = useConfig(state => state.setConfig);
const centerView = useConfig(state => state.centerView); const centerView = useConfig(state => state.centerView);
@ -82,23 +82,45 @@ const GraphComponent = ({
(areaSize * 100) / (size.width * size.height) - 100 (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 }); setSize({ width: layout.width + 400, height: layout.height + 400 });
requestAnimationFrame(() => { requestAnimationFrame(() => {
setTimeout(() => { setTimeout(() => {
setLoading(false); setLoading(false);
setTimeout(() => (changeRatio > 100 || isWidget) && centerView(), 0); setTimeout(() => (changeRatio > 75 || isWidget) && centerView(), 0);
}, 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 onCanvasClick = React.useCallback(() => {
const input = document.querySelector("input:focus") as HTMLInputElement; const input = document.querySelector("input:focus") as HTMLInputElement;
if (input) input.blur(); if (input) input.blur();
@ -111,7 +133,7 @@ const GraphComponent = ({
{loading && <Loading message="Painting graph..." />} {loading && <Loading message="Painting graph..." />}
<TransformWrapper <TransformWrapper
maxScale={2} maxScale={2}
minScale={minScale} minScale={0.05}
initialScale={0.4} initialScale={0.4}
wheel={{ step: 0.08 }} wheel={{ step: 0.08 }}
zoomAnimation={{ animationType: "linear" }} zoomAnimation={{ animationType: "linear" }}