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

Merged PR 171: Refactor the multiple context menus into a single component + Fix eslint

Browse source 
Refactor the multiple context menus into a single component + Fix eslint
This commit is contained in:
Eric Nguyen 2022-08-29 15:03:47 +00:00
parent ad126c6c28
commit 87c4ea1fe5
8 changed files with 173 additions and 269 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -12,6 +12,7 @@ import { IEditorState } from '../../Interfaces/IEditorState';
import { MAX_HISTORY } from '../../utils/default';
import { AddSymbol, OnPropertyChange as OnSymbolPropertyChange, DeleteSymbol, SelectSymbol } from './Actions/SymbolOperations';
import { FindContainerById } from '../../utils/itertools';
import { Menu } from '../Menu/Menu';
interface IEditorProps {
root: Element | Document
@ -20,24 +21,45 @@ interface IEditorProps {
historyCurrentStep: number
}
export function UpdateCounters(counters: Record<string, number>, type: string): void {
if (counters[type] === null ||
counters[type] === undefined) {
counters[type] = 0;
} else {
counters[type]++;
}
}
export function GetCurrentHistory(history: IHistoryState[], historyCurrentStep: number): IHistoryState[] {
return history.slice(
Math.max(0, history.length - MAX_HISTORY),
historyCurrentStep + 1
function InitActions(
menuActions: Map<any, any>,
history: IHistoryState[],
historyCurrentStep: number,
setHistory: React.Dispatch<React.SetStateAction<IHistoryState[]>>,
setHistoryCurrentStep: React.Dispatch<React.SetStateAction<number>>
): void {
menuActions.set(
'elements-sidebar-row',
[{
text: 'Delete',
action: (target: HTMLElement) => {
const id = target.id;
DeleteContainer(
id,
history,
historyCurrentStep,
setHistory,
setHistoryCurrentStep
);
}
}]
);
menuActions.set(
'symbols-sidebar-row',
[{
text: 'Delete',
action: (target: HTMLElement) => {
const id = target.id;
DeleteSymbol(
id,
history,
historyCurrentStep,
setHistory,
setHistoryCurrentStep
);
}
}]
);
}
export function GetCurrentHistoryState(history: IHistoryState[], historyCurrentStep: number): IHistoryState {
return history[historyCurrentStep];
}
function UseShortcuts(
@ -106,10 +128,12 @@ function UseWindowEvents(
}
export function Editor(props: IEditorProps): JSX.Element {
// States
const [history, setHistory] = React.useState<IHistoryState[]>(structuredClone(props.history));
const [historyCurrentStep, setHistoryCurrentStep] = React.useState<number>(props.historyCurrentStep);
const editorRef = useRef<HTMLDivElement>(null);
// Events
UseShortcuts(history, historyCurrentStep, setHistoryCurrentStep);
UseWindowEvents(
props.root,
@ -121,6 +145,11 @@ export function Editor(props: IEditorProps): JSX.Element {
setHistoryCurrentStep
);
// Context Menu
const menuActions = new Map();
InitActions(menuActions, history, historyCurrentStep, setHistory, setHistoryCurrentStep);
// Render
const configuration = props.configuration;
const current = GetCurrentHistoryState(history, historyCurrentStep);
const selected = FindContainerById(current.mainContainer, current.selectedContainerId);
@ -208,6 +237,31 @@ export function Editor(props: IEditorProps): JSX.Element {
>
{current.mainContainer}
</SVG>
<Menu
getListener={() => editorRef.current}
actions={menuActions}
className="z-30 transition-opacity rounded bg-slate-200 py-1 drop-shadow-xl"
/>
</div>
);
}
export function UpdateCounters(counters: Record<string, number>, type: string): void {
if (counters[type] === null ||
counters[type] === undefined) {
counters[type] = 0;
} else {
counters[type]++;
}
}
export function GetCurrentHistory(history: IHistoryState[], historyCurrentStep: number): IHistoryState[] {
return history.slice(
Math.max(0, history.length - MAX_HISTORY),
historyCurrentStep + 1
);
}
export function GetCurrentHistoryState(history: IHistoryState[], historyCurrentStep: number): IHistoryState {
return history[historyCurrentStep];
}