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

add ref to context api

Browse Source
This commit is contained in:
AykutSarac 2022-04-10 16:05:05 +03:00
parent 564ecb1c77
commit 8df36cb5d6
2 changed files with 35 additions and 36 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -11,10 +11,11 @@ import { getEdgeNodes } from "./helpers";
import { CustomNode } from "./CustomNode";
import { useLoading } from "src/hooks/useLoading";
import { useConfig } from "src/hocs/config";
import { Tools } from "../Editor/Tools";
import { ConfigActionType } from "src/reducer/reducer";
const StyledLiveEditor = styled.div`
position: relative;
border-left: 3px solid ${({ theme }) => theme.SILVER_DARK};
`;
const StyledEditorWrapper = styled.div`
@ -40,9 +41,10 @@ const wheelOptions = {
step: 0.4,
};
export const LiveEditor: React.FC = React.memo(() => {
export const LiveEditor: React.FC = React.memo(function LiveEditor() {
const {
states: { json, settings },
dispatch,
} = useConfig();
const pageLoaded = useLoading();
const wrapperRef = React.useRef<ReactZoomPanPinchRef | null>(null);
@ -57,18 +59,6 @@ export const LiveEditor: React.FC = React.memo(() => {
setData({ nodes, edges });
}, [json, settings.expand]);
React.useEffect(() => {
wrapperRef.current?.setTransform(
wrapperRef.current.state.positionX,
wrapperRef.current.state.positionY,
settings.zoomScale
);
}, [settings.zoomScale]);
React.useEffect(() => {
wrapperRef.current?.resetTransform();
}, [settings.transform]);
React.useEffect(() => {
const wrapperRect = wrapperRef.current?.instance.wrapperComponent;
@ -100,9 +90,21 @@ export const LiveEditor: React.FC = React.memo(() => {
}
}, [settings.searchNode]);
const onCanvasClick = () => {
const input = document.querySelector("input:focus") as HTMLInputElement;
if (input) input.blur();
};
const onInit = (ref: ReactZoomPanPinchRef) =>
dispatch({
type: ConfigActionType.SET_ZOOM_PAN_PICNH_REF,
payload: ref,
});
if (pageLoaded)
return (
<StyledLiveEditor>
<Tools />
<StyledEditorWrapper>
<TransformWrapper
maxScale={1.8}
@ -111,6 +113,7 @@ export const LiveEditor: React.FC = React.memo(() => {
ref={wrapperRef}
limitToBounds={false}
wheel={wheelOptions}
onInit={onInit}
>
<TransformComponent>
<Canvas
@ -125,6 +128,7 @@ export const LiveEditor: React.FC = React.memo(() => {
direction={settings.layout}
readonly
key={settings.layout}
onCanvasClick={onCanvasClick}
/>
</TransformComponent>
</TransformWrapper>

39
src/reducer/reducer.ts
View File

@ -8,12 +8,12 @@ export enum ConfigActionType {
TOGGLE_EXPAND,
TOGGLE_AUTOFORMAT,
TOGGLE_DOCK,
TOGGLE_SEARCH,
ZOOM_IN,
ZOOM_OUT,
CENTER_VIEW,
SET_JSON,
SET_SEARCH_NODE,
SET_ZOOM_PAN_PICNH_REF,
}
export type ReducerAction = {
@ -29,13 +29,12 @@ export const useConfigReducer: React.Reducer<AppConfig, ReducerAction> = (
case ConfigActionType.SET_CONFIG:
return { ...state, settings: action.payload };
case ConfigActionType.TOGGLE_SEARCH:
case ConfigActionType.SET_ZOOM_PAN_PICNH_REF:
return {
...state,
settings: {
...state.settings,
showSearch: !state.settings.showSearch,
...(state.settings.showSearch && { searchNode: "" }),
zoomPanPinch: action.payload,
},
};
@ -49,28 +48,24 @@ export const useConfigReducer: React.Reducer<AppConfig, ReducerAction> = (
};
case ConfigActionType.CENTER_VIEW:
return {
...state,
settings: { ...state.settings, transform: Math.random() },
};
state.settings.zoomPanPinch.resetTransform();
return state;
case ConfigActionType.ZOOM_IN:
return {
...state,
settings: {
...state.settings,
zoomScale: state.settings.zoomScale + 0.2,
},
};
state.settings.zoomPanPinch.setTransform(
state.settings.zoomPanPinch.state.positionX,
state.settings.zoomPanPinch.state.positionY,
state.settings.zoomPanPinch.state.scale + 0.2
);
return state;
case ConfigActionType.ZOOM_OUT:
return {
...state,
settings: {
...state.settings,
zoomScale: state.settings.zoomScale - 0.2,
},
};
state.settings.zoomPanPinch.setTransform(
state.settings.zoomPanPinch.state.positionX,
state.settings.zoomPanPinch.state.positionY,
state.settings.zoomPanPinch.state.scale - 0.2
);
return state;
case ConfigActionType.TOGGLE_AUTOFORMAT:
return {