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

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;
}
.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 && <Loading message="Painting graph..." />}
<TransformWrapper
maxScale={2}
minScale={minScale}
minScale={0.05}
initialScale={0.4}
wheel={{ step: 0.08 }}
zoomAnimation={{ animationType: "linear" }}