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

dynamically update canvas size & style cursor

Browse Source
This commit is contained in:
AykutSarac 2022-04-20 15:57:02 +03:00
parent 4d489905b9
commit 7b7e743bf8
1 changed files with 21 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

25
src/containers/LiveEditor/index.tsx
View File

@ -5,7 +5,7 @@ import {
TransformComponent,
ReactZoomPanPinchRef,
} from "react-zoom-pan-pinch";
import { Canvas } from "reaflow";
import { Canvas, ElkRoot } from "reaflow";
import { getEdgeNodes } from "./helpers";
import { CustomNode } from "./CustomNode";
@ -21,6 +21,10 @@ const StyledLiveEditor = styled.div`
const StyledEditorWrapper = styled.div`
position: absolute;
:active {
cursor: move;
}
rect {
fill: ${({ theme }) => theme.BACKGROUND_NODE};
}
@ -40,6 +44,12 @@ export const LiveEditor: React.FC = React.memo(function LiveEditor() {
nodes: [],
edges: [],
});
const [canvasSize, setCanvasSize] = React.useState({
width: 2000,
height: 2000,
});
console.log(canvasSize);
React.useEffect(() => {
const { nodes, edges } = getEdgeNodes(json, settings.expand);
@ -75,7 +85,7 @@ export const LiveEditor: React.FC = React.memo(function LiveEditor() {
?.closest("foreignObject")
?.classList.toggle("searched");
settings.zoomPanPinch?.setTransform(newPositionX, newPositionY, newScale);
settings.zoomPanPinch?.setTransform(newPositionX, newPositionY, newScale);
}
}, [settings.searchNode, settings.zoomPanPinch]);
@ -84,6 +94,12 @@ export const LiveEditor: React.FC = React.memo(function LiveEditor() {
if (input) input.blur();
};
const onLayoutChange = (layout: ElkRoot) =>
setCanvasSize({
width: layout.width ?? 2000,
height: layout.height ?? 2000,
});
const onInit = (ref: ReactZoomPanPinchRef) => {
dispatch({
type: ConfigActionType.SET_ZOOM_PAN_PICNH_REF,
@ -109,8 +125,8 @@ export const LiveEditor: React.FC = React.memo(function LiveEditor() {
nodes={data.nodes}
node={(props) => <CustomNode {...props} />}
edges={data.edges}
maxWidth={20000}
maxHeight={20000}
maxWidth={canvasSize.width}
maxHeight={canvasSize.height}
center={false}
zoomable={false}
fit={true}
@ -118,6 +134,7 @@ export const LiveEditor: React.FC = React.memo(function LiveEditor() {
readonly
key={settings.layout}
onCanvasClick={onCanvasClick}
onLayoutChange={onLayoutChange}
/>
</TransformComponent>
</TransformWrapper>