Siklos/svg-layout-designer-react
1
1
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity

Merged PR 165: Move useEffects to named functions

Browse source 
Move useEffects to named functions
This commit is contained in:
Eric Nguyen 2022-08-22 15:52:40 +00:00
parent 29625dce28
commit ec3fddec9d
6 changed files with 150 additions and 91 deletions
Download patch file Download diff file Expand all files Collapse all files

40
src/Components/Editor/Editor.tsx
View file

@ -1,4 +1,4 @@
import React, { useRef } from 'react';
import React, { Dispatch, SetStateAction, useEffect, useRef } from 'react';
import './Editor.scss';
import { IConfiguration } from '../../Interfaces/IConfiguration';
import { SVG } from '../SVG/SVG';
@ -36,12 +36,12 @@ export const getCurrentHistory = (history: IHistoryState[], historyCurrentStep:
export const getCurrentHistoryState = (history: IHistoryState[], historyCurrentStep: number): IHistoryState => history[historyCurrentStep];
const Editor: React.FunctionComponent<IEditorProps> = (props) => {
const [history, setHistory] = React.useState<IHistoryState[]>(structuredClone(props.history));
const [historyCurrentStep, setHistoryCurrentStep] = React.useState<number>(props.historyCurrentStep);
const editorRef = useRef<HTMLDivElement>(null);
React.useEffect(() => {
function useShortcuts(
history: IHistoryState[],
historyCurrentStep: number,
setHistoryCurrentStep: Dispatch<SetStateAction<number>>
): void {
useEffect(() => {
const onKeyUp = (event: KeyboardEvent): void => onKeyDown(
event,
history,
@ -50,12 +50,24 @@ const Editor: React.FunctionComponent<IEditorProps> = (props) => {
);
window.addEventListener('keyup', onKeyUp);
return () => {
window.removeEventListener('keyup', onKeyUp);
};
});
}
function useWindowEvents(
history: IHistoryState[],
historyCurrentStep: number,
configuration: IConfiguration,
editorRef: React.RefObject<HTMLDivElement>
): void {
useEffect(() => {
const events = EditorEvents;
const editorState: IEditorState = {
history,
historyCurrentStep,
configuration: props.configuration
configuration
};
const funcs = new Map<string, () => void>();
@ -64,10 +76,7 @@ const Editor: React.FunctionComponent<IEditorProps> = (props) => {
editorRef.current?.addEventListener(event.name, func);
funcs.set(event.name, func);
}
return () => {
window.removeEventListener('keyup', onKeyUp);
for (const event of events) {
const func = funcs.get(event.name);
if (func === undefined) {
@ -77,6 +86,15 @@ const Editor: React.FunctionComponent<IEditorProps> = (props) => {
}
};
});
}
const Editor: React.FunctionComponent<IEditorProps> = (props) => {
const [history, setHistory] = React.useState<IHistoryState[]>(structuredClone(props.history));
const [historyCurrentStep, setHistoryCurrentStep] = React.useState<number>(props.historyCurrentStep);
const editorRef = useRef<HTMLDivElement>(null);
useShortcuts(history, historyCurrentStep, setHistoryCurrentStep);
useWindowEvents(history, historyCurrentStep, props.configuration, editorRef);
const configuration = props.configuration;
const current = getCurrentHistoryState(history, historyCurrentStep);

38
src/Components/ElementsSidebar/ElementsSidebar.tsx
View file

@ -5,9 +5,10 @@ import { IContainerModel } from '../../Interfaces/IContainerModel';
import { getDepth, MakeIterator } from '../../utils/itertools';
import { Menu } from '../Menu/Menu';
import { MenuItem } from '../Menu/MenuItem';
import { handleDragLeave, handleDragOver, handleLeftClick, handleOnDrop, handleRightClick } from './MouseEventHandlers';
import { handleDragLeave, handleDragOver, handleLeftClick, handleOnDrop, handleRightClick, useMouseEvents } from './MouseEventHandlers';
import { IPoint } from '../../Interfaces/IPoint';
import { ISymbolModel } from '../../Interfaces/ISymbolModel';
import { Dispatch, RefObject, SetStateAction } from 'react';
interface IElementsSidebarProps {
MainContainer: IContainerModel
@ -33,43 +34,14 @@ export const ElementsSidebar: React.FC<IElementsSidebarProps> = (props: IElement
const elementRef = React.useRef<HTMLDivElement>(null);
// Event listeners
React.useEffect(() => {
const onContextMenu = (event: MouseEvent): void => handleRightClick(
event,
useMouseEvents(
isContextMenuOpen,
elementRef,
setIsContextMenuOpen,
setOnClickContainerId,
setContextMenuPosition
);
const onLeftClick = (): void => handleLeftClick(
isContextMenuOpen,
setIsContextMenuOpen,
setOnClickContainerId
);
elementRef.current?.addEventListener(
'contextmenu',
onContextMenu
);
window.addEventListener(
'click',
onLeftClick
);
return () => {
elementRef.current?.removeEventListener(
'contextmenu',
onContextMenu
);
window.removeEventListener(
'click',
onLeftClick
);
};
});
// Render
let isOpenClasses = '-right-64';
if (props.isOpen) {

46
src/Components/ElementsSidebar/MouseEventHandlers.ts
View file

@ -1,7 +1,53 @@
import React, { RefObject, Dispatch, SetStateAction, useEffect } from 'react';
import { IContainerModel } from '../../Interfaces/IContainerModel';
import { IPoint } from '../../Interfaces/IPoint';
import { findContainerById } from '../../utils/itertools';
export function useMouseEvents(
isContextMenuOpen: boolean,
elementRef: RefObject<HTMLDivElement>,
setIsContextMenuOpen: Dispatch<SetStateAction<boolean>>,
setOnClickContainerId: Dispatch<SetStateAction<string>>,
setContextMenuPosition: Dispatch<SetStateAction<IPoint>>
): void {
useEffect(() => {
const onContextMenu = (event: MouseEvent): void => handleRightClick(
event,
setIsContextMenuOpen,
setOnClickContainerId,
setContextMenuPosition
);
const onLeftClick = (): void => handleLeftClick(
isContextMenuOpen,
setIsContextMenuOpen,
setOnClickContainerId
);
elementRef.current?.addEventListener(
'contextmenu',
onContextMenu
);
window.addEventListener(
'click',
onLeftClick
);
return () => {
elementRef.current?.removeEventListener(
'contextmenu',
onContextMenu
);
window.removeEventListener(
'click',
onLeftClick
);
};
});
}
export function handleRightClick(
event: MouseEvent,
setIsContextMenuOpen: React.Dispatch<React.SetStateAction<boolean>>,

18
src/Components/SVG/SVG.tsx
View file

@ -33,12 +33,9 @@ function resizeViewBox(
});
}
export const SVG: React.FC<ISVGProps> = (props: ISVGProps) => {
const [viewer, setViewer] = React.useState<Viewer>({
viewerWidth: window.innerWidth - BAR_WIDTH,
viewerHeight: window.innerHeight
});
function useSVGAutoResizer(
setViewer: React.Dispatch<React.SetStateAction<Viewer>>
): void {
React.useEffect(() => {
const onResize = (): void => resizeViewBox(setViewer);
window.addEventListener('resize', onResize);
@ -47,6 +44,15 @@ export const SVG: React.FC<ISVGProps> = (props: ISVGProps) => {
window.removeEventListener('resize', onResize);
};
});
}
export const SVG: React.FC<ISVGProps> = (props: ISVGProps) => {
const [viewer, setViewer] = React.useState<Viewer>({
viewerWidth: window.innerWidth - BAR_WIDTH,
viewerHeight: window.innerHeight
});
useSVGAutoResizer(setViewer);
const xmlns = '<http://www.w3.org/2000/svg>';
const properties = {

46
src/Components/SymbolsSidebar/MouseEventHandlers.ts
View file

@ -1,5 +1,51 @@
import { RefObject, Dispatch, SetStateAction, useEffect } from 'react';
import { IPoint } from '../../Interfaces/IPoint';
export function useMouseEvents(
isContextMenuOpen: boolean,
elementRef: RefObject<HTMLDivElement>,
setIsContextMenuOpen: Dispatch<SetStateAction<boolean>>,
setOnClickSymbolId: Dispatch<SetStateAction<string>>,
setContextMenuPosition: Dispatch<SetStateAction<IPoint>>
): void {
useEffect(() => {
const onContextMenu = (event: MouseEvent): void => handleRightClick(
event,
setIsContextMenuOpen,
setOnClickSymbolId,
setContextMenuPosition
);
const onLeftClick = (): void => handleLeftClick(
isContextMenuOpen,
setIsContextMenuOpen,
setOnClickSymbolId
);
elementRef.current?.addEventListener(
'contextmenu',
onContextMenu
);
window.addEventListener(
'click',
onLeftClick
);
return () => {
elementRef.current?.removeEventListener(
'contextmenu',
onContextMenu
);
window.removeEventListener(
'click',
onLeftClick
);
};
});
}
export function handleRightClick(
event: MouseEvent,
setIsContextMenuOpen: React.Dispatch<React.SetStateAction<boolean>>,

37
src/Components/SymbolsSidebar/SymbolsSidebar.tsx
View file

@ -2,7 +2,7 @@ import * as React from 'react';
import { FixedSizeList as List } from 'react-window';
import { Menu } from '../Menu/Menu';
import { MenuItem } from '../Menu/MenuItem';
import { handleLeftClick, handleRightClick } from './MouseEventHandlers';
import { handleLeftClick, handleRightClick, useMouseEvents } from './MouseEventHandlers';
import { IPoint } from '../../Interfaces/IPoint';
import { ISymbolModel } from '../../Interfaces/ISymbolModel';
import { SymbolProperties } from '../SymbolProperties/SymbolProperties';
@ -29,43 +29,14 @@ export const SymbolsSidebar: React.FC<ISymbolsSidebarProps> = (props: ISymbolsSi
const elementRef = React.useRef<HTMLDivElement>(null);
// Event listeners
React.useEffect(() => {
const onContextMenu = (event: MouseEvent): void => handleRightClick(
event,
useMouseEvents(
isContextMenuOpen,
elementRef,
setIsContextMenuOpen,
setOnClickSymbolId,
setContextMenuPosition
);
const onLeftClick = (): void => handleLeftClick(
isContextMenuOpen,
setIsContextMenuOpen,
setOnClickSymbolId
);
elementRef.current?.addEventListener(
'contextmenu',
onContextMenu
);
window.addEventListener(
'click',
onLeftClick
);
return () => {
elementRef.current?.removeEventListener(
'contextmenu',
onContextMenu
);
window.removeEventListener(
'click',
onLeftClick
);
};
});
// Render
let isOpenClasses = '-right-64';
if (props.isOpen) {