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

reset layout position on json edit

Browse Source
This commit is contained in:
Aykut Saraç 2022-02-09 13:15:27 +03:00
parent 6a94a2c86c
commit 1aa5d8aecd
1 changed files with 6 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -25,6 +25,7 @@ const StyledEditorWrapper = styled.div`
export const LiveEditor: React.FC = () => { export const LiveEditor: React.FC = () => {
const canvasRef = React.useRef<CanvasRef | null>(null); const canvasRef = React.useRef<CanvasRef | null>(null);
const wrapperRef = React.useRef<ReactZoomPanPinchRef | null>(null); const wrapperRef = React.useRef<ReactZoomPanPinchRef | null>(null);
const [json] = useLocalStorage("json", JSON.stringify(defaultValue)); const [json] = useLocalStorage("json", JSON.stringify(defaultValue));
const [config] = useLocalStorage<StorageConfig>("config", { const [config] = useLocalStorage<StorageConfig>("config", {
layout: "LEFT", layout: "LEFT",
@ -34,6 +35,10 @@ export const LiveEditor: React.FC = () => {
const { nodes, edges } = getEdgeNodes(json); const { nodes, edges } = getEdgeNodes(json);
const onLayoutChange = () => {
wrapperRef.current?.resetTransform();
};
return ( return (
<StyledLiveEditor> <StyledLiveEditor>
<StyledEditorWrapper> <StyledEditorWrapper>
@ -61,9 +66,7 @@ export const LiveEditor: React.FC = () => {
center={false} center={false}
readonly readonly
node={NodeWrapper} node={NodeWrapper}
onLayoutChange={() => { onLayoutChange={onLayoutChange}
canvasRef.current?.centerCanvas && canvasRef.current?.centerCanvas()
}}
/> />
</TransformComponent> </TransformComponent>
</TransformWrapper> </TransformWrapper>