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

Move selectedContainerId and selectedSymbolId to Editor component

Browse source
This commit is contained in:
Eric NGUYEN 2023-02-24 14:18:53 +01:00
parent f74405f002
commit c725b107a4
11 changed files with 165 additions and 252 deletions
Download patch file Download diff file Expand all files Collapse all files

6
csharp/SVGLDLibs/SVGLDLibs/Models/HistoryState.cs
View file

@ -15,16 +15,10 @@ namespace SVGLDLibs.Models
[DataMember(EmitDefaultValue = false)] [DataMember(EmitDefaultValue = false)]
public Dictionary<string, ContainerModel> containers; public Dictionary<string, ContainerModel> containers;
[DataMember(EmitDefaultValue = false)]
public string selectedContainerId;
[DataMember(EmitDefaultValue = false)] [DataMember(EmitDefaultValue = false)]
public Dictionary<string, string> typeCounters; public Dictionary<string, string> typeCounters;
[DataMember(EmitDefaultValue = false)] [DataMember(EmitDefaultValue = false)]
public Dictionary<string, SymbolModel> symbols; public Dictionary<string, SymbolModel> symbols;
[DataMember(EmitDefaultValue = false)]
public string selectedSymbolId;
} }
} }

4
src/Components/API/api.test.tsx
View file

@ -102,12 +102,10 @@ describe.concurrent('Models test suite', () => {
lastAction: 'string', lastAction: 'string',
mainContainer: mainContainer.properties.id, mainContainer: mainContainer.properties.id,
containers, containers,
selectedContainerId: '3',
typeCounters: { typeCounters: {
main: 1 main: 1
}, },
symbols: new Map(), symbols: new Map()
selectedSymbolId: ''
}; };
it('ApplicationStateModel', async() => { it('ApplicationStateModel', async() => {

4
src/Components/App/App.tsx
View file

@ -59,10 +59,8 @@ export function App(props: IAppProps): JSX.Element {
lastAction: '', lastAction: '',
mainContainer: defaultMainContainer.properties.id, mainContainer: defaultMainContainer.properties.id,
containers, containers,
selectedContainerId: defaultMainContainer.properties.id,
typeCounters: {}, typeCounters: {},
symbols: new Map(), symbols: new Map()
selectedSymbolId: ''
}], }],
historyCurrentStep: 0 historyCurrentStep: 0
}); });

4
src/Components/Editor/Actions/AddContainer.ts
View file

@ -100,11 +100,9 @@ export function AddContainers(
history.push({ history.push({
lastAction: `Add [${containersIds.join(', ')}] in ${parentClone.properties.id}`, lastAction: `Add [${containersIds.join(', ')}] in ${parentClone.properties.id}`,
mainContainer: current.mainContainer, mainContainer: current.mainContainer,
selectedContainerId: parentClone.properties.id,
containers, containers,
typeCounters: newCounters, typeCounters: newCounters,
symbols: structuredClone(current.symbols), symbols: structuredClone(current.symbols)
selectedSymbolId: current.selectedSymbolId
}); });
return { return {

52
src/Components/Editor/Actions/ContainerOperations.ts
View file

@ -11,33 +11,6 @@ import { Orientation } from '../../../Enums/Orientation';
import { type IConfiguration } from '../../../Interfaces/IConfiguration'; import { type IConfiguration } from '../../../Interfaces/IConfiguration';
import { AddContainers } from './AddContainer'; import { AddContainers } from './AddContainer';
/**
* Select a container
* @returns New history
* @param containerId
* @param fullHistory
* @param historyCurrentStep
*/
export function SelectContainer(
containerId: string,
fullHistory: IHistoryState[],
historyCurrentStep: number
): IHistoryState[] {
const history = GetCurrentHistory(fullHistory, historyCurrentStep);
const current = history[history.length - 1];
history.push({
lastAction: `Select ${containerId}`,
mainContainer: current.mainContainer,
containers: structuredClone(current.containers),
selectedContainerId: containerId,
typeCounters: Object.assign({}, current.typeCounters),
symbols: structuredClone(current.symbols),
selectedSymbolId: current.selectedSymbolId
});
return history;
}
/** /**
* Deselect a container * Deselect a container
* @returns New history * @returns New history
@ -54,10 +27,8 @@ export function DeselectContainer(
lastAction: `Deselect ${containerId}`, lastAction: `Deselect ${containerId}`,
mainContainer: current.mainContainer, mainContainer: current.mainContainer,
containers: structuredClone(current.containers), containers: structuredClone(current.containers),
selectedContainerId: 'undefined',
typeCounters: Object.assign({}, current.typeCounters), typeCounters: Object.assign({}, current.typeCounters),
symbols: structuredClone(current.symbols), symbols: structuredClone(current.symbols)
selectedSymbolId: current.selectedSymbolId
}); });
return history; return history;
} }
@ -116,23 +87,12 @@ export function DeleteContainer(
ApplyBehaviorsOnSiblings(containers, container, current.symbols); ApplyBehaviorsOnSiblings(containers, container, current.symbols);
// Select the previous container
// or select the one above
const selectedContainerId = GetSelectedContainerOnDelete(
containers,
current.selectedContainerId,
parent,
index
);
history.push({ history.push({
lastAction: `Delete ${containerId}`, lastAction: `Delete ${containerId}`,
mainContainer: current.mainContainer, mainContainer: current.mainContainer,
containers, containers,
selectedContainerId,
typeCounters: Object.assign({}, current.typeCounters), typeCounters: Object.assign({}, current.typeCounters),
symbols: newSymbols, symbols: newSymbols
selectedSymbolId: current.selectedSymbolId
}); });
return history; return history;
} }
@ -182,10 +142,8 @@ export function ReplaceByContainer(
lastAction: `Replace ${containerId} by ${newContainerId}`, lastAction: `Replace ${containerId} by ${newContainerId}`,
mainContainer: currentDelete.mainContainer, mainContainer: currentDelete.mainContainer,
containers: currentDelete.containers, containers: currentDelete.containers,
selectedContainerId: currentDelete.selectedContainerId,
typeCounters: Object.assign({}, currentDelete.typeCounters), typeCounters: Object.assign({}, currentDelete.typeCounters),
symbols: current.symbols, symbols: current.symbols
selectedSymbolId: current.selectedSymbolId
}); });
return fullHistory; return fullHistory;
@ -276,10 +234,8 @@ export function OnPropertyChange(
lastAction: `Change ${key} of ${container.properties.id}`, lastAction: `Change ${key} of ${container.properties.id}`,
mainContainer: current.mainContainer, mainContainer: current.mainContainer,
containers, containers,
selectedContainerId: container.properties.id,
typeCounters: Object.assign({}, current.typeCounters), typeCounters: Object.assign({}, current.typeCounters),
symbols: structuredClone(current.symbols), symbols: structuredClone(current.symbols)
selectedSymbolId: current.selectedSymbolId
}); });
return history; return history;
} }

37
src/Components/Editor/Actions/SymbolOperations.ts
View file

@ -45,10 +45,8 @@ export function AddSymbol(
lastAction: `Add ${name}`, lastAction: `Add ${name}`,
mainContainer: current.mainContainer, mainContainer: current.mainContainer,
containers, containers,
selectedContainerId: current.selectedContainerId,
typeCounters, typeCounters,
symbols: newSymbols, symbols: newSymbols
selectedSymbolId: newSymbol.id
}); });
if (symbolConfig.AssociatedContainer !== undefined) { if (symbolConfig.AssociatedContainer !== undefined) {
@ -76,26 +74,6 @@ export function AddSymbol(
return history; return history;
} }
export function SelectSymbol(
symbolId: string,
fullHistory: IHistoryState[],
historyCurrentStep: number
): IHistoryState[] {
const history = GetCurrentHistory(fullHistory, historyCurrentStep);
const current = history[history.length - 1];
history.push({
lastAction: `Select ${symbolId}`,
mainContainer: current.mainContainer,
containers: structuredClone(current.containers),
selectedContainerId: current.selectedContainerId,
typeCounters: structuredClone(current.typeCounters),
symbols: structuredClone(current.symbols),
selectedSymbolId: symbolId
});
return history;
}
export function DeleteSymbol( export function DeleteSymbol(
symbolId: string, symbolId: string,
fullHistory: IHistoryState[], fullHistory: IHistoryState[],
@ -120,10 +98,8 @@ export function DeleteSymbol(
lastAction: `Select ${symbolId}`, lastAction: `Select ${symbolId}`,
mainContainer: current.mainContainer, mainContainer: current.mainContainer,
containers, containers,
selectedContainerId: current.selectedContainerId,
typeCounters: structuredClone(current.typeCounters), typeCounters: structuredClone(current.typeCounters),
symbols: newSymbols, symbols: newSymbols
selectedSymbolId: symbolId
}); });
return history; return history;
} }
@ -154,18 +130,19 @@ function UnlinkSymbolFromContainers(containers: Map<string, IContainerModel>, sy
export function OnPropertyChange( export function OnPropertyChange(
key: string, key: string,
value: string | number | boolean, value: string | number | boolean,
selectedSymbolId: string,
fullHistory: IHistoryState[], fullHistory: IHistoryState[],
historyCurrentStep: number historyCurrentStep: number
): IHistoryState[] { ): IHistoryState[] {
const history = GetCurrentHistory(fullHistory, historyCurrentStep); const history = GetCurrentHistory(fullHistory, historyCurrentStep);
const current = history[history.length - 1]; const current = history[history.length - 1];
if (current.selectedSymbolId === '') { if (selectedSymbolId === '') {
throw new Error('[OnSymbolPropertyChange] Property was changed before selecting a symbol'); throw new Error('[OnSymbolPropertyChange] Property was changed before selecting a symbol');
} }
const newSymbols: Map<string, ISymbolModel> = structuredClone(current.symbols); const newSymbols: Map<string, ISymbolModel> = structuredClone(current.symbols);
const symbol = newSymbols.get(current.selectedSymbolId); const symbol = newSymbols.get(selectedSymbolId);
if (symbol === null || symbol === undefined) { if (symbol === null || symbol === undefined) {
throw new Error('[OnSymbolPropertyChange] Symbol model was not found in state!'); throw new Error('[OnSymbolPropertyChange] Symbol model was not found in state!');
@ -190,10 +167,8 @@ export function OnPropertyChange(
lastAction: `Change ${key} of ${symbol.id}`, lastAction: `Change ${key} of ${symbol.id}`,
mainContainer: current.mainContainer, mainContainer: current.mainContainer,
containers, containers,
selectedContainerId: current.selectedContainerId,
typeCounters: Object.assign({}, current.typeCounters), typeCounters: Object.assign({}, current.typeCounters),
symbols: newSymbols, symbols: newSymbols
selectedSymbolId: symbol.id
}); });
return history; return history;
} }

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

@ -8,14 +8,13 @@ import { MAX_HISTORY } from '../../utils/default';
import { FindContainerById } from '../../utils/itertools'; import { FindContainerById } from '../../utils/itertools';
import { Menu } from '../Menu/Menu'; import { Menu } from '../Menu/Menu';
import { type IReplaceContainer } from '../../Interfaces/IReplaceContainer'; import { type IReplaceContainer } from '../../Interfaces/IReplaceContainer';
import { SelectContainer, DeleteContainer, OnPropertyChange, ReplaceByContainer } from './Actions/ContainerOperations'; import { DeleteContainer, OnPropertyChange, ReplaceByContainer } from './Actions/ContainerOperations';
import { SaveEditorAsJSON, SaveEditorAsSVG } from './Actions/Save'; import { SaveEditorAsJSON, SaveEditorAsSVG } from './Actions/Save';
import { OnKey } from './Actions/Shortcuts'; import { OnKey } from './Actions/Shortcuts';
import { import {
AddSymbol, AddSymbol,
OnPropertyChange as OnSymbolPropertyChange, OnPropertyChange as OnSymbolPropertyChange,
DeleteSymbol, DeleteSymbol
SelectSymbol
} from './Actions/SymbolOperations'; } from './Actions/SymbolOperations';
import { InitActions } from './Actions/ContextMenuActions'; import { InitActions } from './Actions/ContextMenuActions';
import { AddContainerToSelectedContainer, AddContainer } from './Actions/AddContainer'; import { AddContainerToSelectedContainer, AddContainer } from './Actions/AddContainer';
@ -80,6 +79,8 @@ export function Editor(props: IEditorProps): JSX.Element {
replaceContainer, replaceContainer,
setReplaceContainer setReplaceContainer
] = React.useState<IReplaceContainer>({ isReplacing: false, id: undefined, category: undefined }); ] = React.useState<IReplaceContainer>({ isReplacing: false, id: undefined, category: undefined });
const [selectedContainerId, setSelectedContainerId] = React.useState('');
const [selectedSymbolId, setSelectedSymbolId] = React.useState('');
const editorRef = useRef<HTMLDivElement>(null); const editorRef = useRef<HTMLDivElement>(null);
const setNewHistory = UseNewHistoryState(setHistory, setHistoryCurrentStep); const setNewHistory = UseNewHistoryState(setHistory, setHistoryCurrentStep);
@ -94,8 +95,7 @@ export function Editor(props: IEditorProps): JSX.Element {
historyCurrentStep, historyCurrentStep,
setHistoryCurrentStep, setHistoryCurrentStep,
() => { () => {
const current = GetCurrentHistoryState(history, historyCurrentStep); setNewHistory(DeleteContainer(selectedContainerId, history, historyCurrentStep));
setNewHistory(DeleteContainer(current.selectedContainerId, history, historyCurrentStep));
}, },
ResetState ResetState
); );
@ -129,7 +129,7 @@ export function Editor(props: IEditorProps): JSX.Element {
// Render // Render
const configuration = props.configuration; const configuration = props.configuration;
const current = GetCurrentHistoryState(history, historyCurrentStep); const current = GetCurrentHistoryState(history, historyCurrentStep);
const selected = FindContainerById(current.containers, current.selectedContainerId); const selected = FindContainerById(current.containers, selectedContainerId);
return ( return (
<div ref={editorRef} className="Editor font-sans h-full "> <div ref={editorRef} className="Editor font-sans h-full ">
@ -140,12 +140,10 @@ export function Editor(props: IEditorProps): JSX.Element {
historyCurrentStep historyCurrentStep
}} }}
replaceContainer={replaceContainer} replaceContainer={replaceContainer}
selectedContainerId={selectedContainerId}
selectedSymbolId={selectedSymbolId}
selectContainer={(container) => { selectContainer={(container) => {
setNewHistory(SelectContainer( setSelectedContainerId(container);
container,
history,
historyCurrentStep
));
}} }}
deleteContainer={(containerId: string) => { deleteContainer={(containerId: string) => {
setNewHistory(DeleteContainer( setNewHistory(DeleteContainer(
@ -210,16 +208,13 @@ export function Editor(props: IEditorProps): JSX.Element {
setNewHistory(OnSymbolPropertyChange( setNewHistory(OnSymbolPropertyChange(
key, key,
value, value,
selectedSymbolId,
history, history,
historyCurrentStep historyCurrentStep
)); ));
}} }}
selectSymbol={(symbolId) => { selectSymbol={(symbolId) => {
setNewHistory(SelectSymbol( setSelectedSymbolId(symbolId);
symbolId,
history,
historyCurrentStep
));
}} }}
deleteSymbol={(symbolId) => { deleteSymbol={(symbolId) => {
setNewHistory(DeleteSymbol( setNewHistory(DeleteSymbol(

17
src/Components/UI/UI.tsx
View file

@ -23,6 +23,8 @@ import { UseWorker, UseAsync } from './UseWorker';
export interface IUIProps { export interface IUIProps {
editorState: IEditorState editorState: IEditorState
replaceContainer: IReplaceContainer replaceContainer: IReplaceContainer
selectedContainerId: string
selectedSymbolId: string
selectContainer: (containerId: string) => void selectContainer: (containerId: string) => void
deleteContainer: (containerId: string) => void deleteContainer: (containerId: string) => void
onPropertyChange: (key: string, value: string | number | boolean | number[], type?: PropertyType) => void onPropertyChange: (key: string, value: string | number | boolean | number[], type?: PropertyType) => void
@ -67,7 +69,14 @@ function UseSetOrToggleSidebar(
}; };
} }
export function UI({ editorState, replaceContainer, setReplaceContainer, ...methods }: IUIProps): JSX.Element { export function UI({
editorState,
replaceContainer,
selectedContainerId,
selectedSymbolId,
setReplaceContainer,
...methods
}: IUIProps): JSX.Element {
const [selectedSidebar, setSelectedSidebar] = React.useState<SidebarType>(SidebarType.Components); const [selectedSidebar, setSelectedSidebar] = React.useState<SidebarType>(SidebarType.Components);
const [ const [
selectedExtendedSidebar, selectedExtendedSidebar,
@ -107,8 +116,8 @@ export function UI({ editorState, replaceContainer, setReplaceContainer, ...meth
throw new Error('Tried to initialized UI but there is no main container!'); throw new Error('Tried to initialized UI but there is no main container!');
} }
const selectedContainer = FindContainerById(current.containers, current.selectedContainerId); const selectedContainer = FindContainerById(current.containers, selectedContainerId);
const selectedSymbol = current.symbols.get(current.selectedSymbolId); const selectedSymbol = current.symbols.get(selectedSymbolId);
switch (selectedSidebar) { switch (selectedSidebar) {
case SidebarType.Components: case SidebarType.Components:
@ -143,7 +152,7 @@ export function UI({ editorState, replaceContainer, setReplaceContainer, ...meth
/>; />;
rightSidebarTitle = Text({ textId: '@SymbolsRight' }); rightSidebarTitle = Text({ textId: '@SymbolsRight' });
rightChildren = <SymbolsSidebar rightChildren = <SymbolsSidebar
selectedSymbolId={current.selectedSymbolId} selectedSymbolId={selectedSymbolId}
symbols={current.symbols} symbols={current.symbols}
onPropertyChange={methods.onSymbolPropertyChange} onPropertyChange={methods.onSymbolPropertyChange}
selectSymbol={methods.selectSymbol} selectSymbol={methods.selectSymbol}

210
src/Events/EditorEvents.ts
View file

@ -4,13 +4,11 @@ import {
AddContainerToSelectedContainer as AddContainerToSelectedContainerAction AddContainerToSelectedContainer as AddContainerToSelectedContainerAction
} from '../Components/Editor/Actions/AddContainer'; } from '../Components/Editor/Actions/AddContainer';
import { import {
DeleteContainer as DeleteContainerAction, DeleteContainer as DeleteContainerAction
SelectContainer as SelectContainerAction
} from '../Components/Editor/Actions/ContainerOperations'; } from '../Components/Editor/Actions/ContainerOperations';
import { import {
AddSymbol as AddSymbolAction, AddSymbol as AddSymbolAction,
DeleteSymbol as DeleteSymbolAction, DeleteSymbol as DeleteSymbolAction
SelectSymbol as SelectSymbolAction
} from '../Components/Editor/Actions/SymbolOperations'; } from '../Components/Editor/Actions/SymbolOperations';
import { GetCurrentHistory } from '../Components/Editor/Editor'; import { GetCurrentHistory } from '../Components/Editor/Editor';
import { type IConfiguration } from '../Interfaces/IConfiguration'; import { type IConfiguration } from '../Interfaces/IConfiguration';
@ -37,13 +35,13 @@ export const events: IEditorEvent[] = [
{ name: 'getCurrentHistoryState', func: GetCurrentHistoryState }, { name: 'getCurrentHistoryState', func: GetCurrentHistoryState },
{ name: 'appendNewState', func: AppendNewState }, { name: 'appendNewState', func: AppendNewState },
{ name: 'addContainer', func: AddContainer }, { name: 'addContainer', func: AddContainer },
{ name: 'addContainerToSelectedContainer', func: AddContainerToSelectedContainer }, // { name: 'addContainerToSelectedContainer', func: AddContainerToSelectedContainer },
{ name: 'appendContainer', func: AppendContainer }, { name: 'appendContainer', func: AppendContainer },
{ name: 'appendContainerToSelectedContainer', func: AppendContainerToSelectedContainer }, // { name: 'appendContainerToSelectedContainer', func: AppendContainerToSelectedContainer },
{ name: 'selectContainer', func: SelectContainer }, // { name: 'selectContainer', func: SelectContainer },
{ name: 'deleteContainer', func: DeleteContainer }, { name: 'deleteContainer', func: DeleteContainer },
{ name: 'addSymbol', func: AddSymbol }, { name: 'addSymbol', func: AddSymbol },
{ name: 'selectSymbol', func: SelectSymbol }, // { name: 'selectSymbol', func: SelectSymbol },
{ name: 'deleteSymbol', func: DeleteSymbol } { name: 'deleteSymbol', func: DeleteSymbol }
]; ];
@ -203,36 +201,36 @@ function AddContainer({
root.dispatchEvent(customEvent); root.dispatchEvent(customEvent);
} }
function AddContainerToSelectedContainer({ // function AddContainerToSelectedContainer({
root, // root,
editorState, // editorState,
setNewHistory, // setNewHistory,
eventInitDict // eventInitDict
}: IEditorEventParams): void { // }: IEditorEventParams): void {
const { // const {
index, // index,
type // type
} = eventInitDict?.detail; // } = eventInitDict?.detail;
const history = GetCurrentHistory(editorState.history, editorState.historyCurrentStep); // const history = GetCurrentHistory(editorState.history, editorState.historyCurrentStep);
const currentState = history[editorState.historyCurrentStep]; // const currentState = history[editorState.historyCurrentStep];
const newHistory = AddContainerAction( // const newHistory = AddContainerAction(
index, // index,
type, // type,
currentState.selectedContainerId, // currentState.selectedContainerId,
editorState.configuration, // editorState.configuration,
history, // history,
editorState.historyCurrentStep // editorState.historyCurrentStep
); // );
setNewHistory(newHistory); // setNewHistory(newHistory);
const customEvent = new CustomEvent<IHistoryState>( // const customEvent = new CustomEvent<IHistoryState>(
'addContainerToSelectedContainer', // 'addContainerToSelectedContainer',
{ detail: structuredClone(editorState.history[editorState.historyCurrentStep]) } // { detail: structuredClone(editorState.history[editorState.historyCurrentStep]) }
); // );
root.dispatchEvent(customEvent); // root.dispatchEvent(customEvent);
} // }
function AppendContainer({ function AppendContainer({
root, root,
@ -267,63 +265,63 @@ function AppendContainer({
root.dispatchEvent(customEvent); root.dispatchEvent(customEvent);
} }
function AppendContainerToSelectedContainer({ // function AppendContainerToSelectedContainer({
root, // root,
editorState, // editorState,
setNewHistory, // setNewHistory,
eventInitDict // eventInitDict
}: IEditorEventParams): void { // }: IEditorEventParams): void {
const { // const {
type // type
} = eventInitDict?.detail; // } = eventInitDict?.detail;
const history = GetCurrentHistory(editorState.history, editorState.historyCurrentStep); // const history = GetCurrentHistory(editorState.history, editorState.historyCurrentStep);
const currentState = history[editorState.historyCurrentStep]; // const currentState = history[editorState.historyCurrentStep];
const selected = FindContainerById(currentState.containers, currentState.selectedContainerId); // const selected = FindContainerById(currentState.containers, currentState.selectedContainerId);
if (selected !== null && selected !== undefined) { // if (selected !== null && selected !== undefined) {
setNewHistory(AddContainerToSelectedContainerAction( // setNewHistory(AddContainerToSelectedContainerAction(
type, // type,
selected, // selected,
editorState.configuration, // editorState.configuration,
history, // history,
editorState.historyCurrentStep // editorState.historyCurrentStep
)); // ));
} // }
const customEvent = new CustomEvent<IHistoryState>( // const customEvent = new CustomEvent<IHistoryState>(
'appendContainerToSelectedContainer', // 'appendContainerToSelectedContainer',
{ detail: structuredClone(editorState.history[editorState.historyCurrentStep]) } // { detail: structuredClone(editorState.history[editorState.historyCurrentStep]) }
); // );
root.dispatchEvent(customEvent); // root.dispatchEvent(customEvent);
} // }
function SelectContainer({ // function SelectContainer({
root, // root,
editorState, // editorState,
setNewHistory, // setNewHistory,
eventInitDict // eventInitDict
}: IEditorEventParams): void { // }: IEditorEventParams): void {
const { // const {
containerId // containerId
} = eventInitDict?.detail; // } = eventInitDict?.detail;
const history = GetCurrentHistory(editorState.history, editorState.historyCurrentStep); // const history = GetCurrentHistory(editorState.history, editorState.historyCurrentStep);
const newHistory = SelectContainerAction( // const newHistory = SelectContainerAction(
containerId, // containerId,
history, // history,
editorState.historyCurrentStep // editorState.historyCurrentStep
); // );
setNewHistory(newHistory); // setNewHistory(newHistory);
const customEvent = new CustomEvent<IHistoryState>( // const customEvent = new CustomEvent<IHistoryState>(
'selectContainer', // 'selectContainer',
{ detail: structuredClone(editorState.history[editorState.historyCurrentStep]) } // { detail: structuredClone(editorState.history[editorState.historyCurrentStep]) }
); // );
root.dispatchEvent(customEvent); // root.dispatchEvent(customEvent);
} // }
function DeleteContainer({ function DeleteContainer({
root, root,
@ -378,31 +376,31 @@ function AddSymbol({
root.dispatchEvent(customEvent); root.dispatchEvent(customEvent);
} }
function SelectSymbol({ // function SelectSymbol({
root, // root,
editorState, // editorState,
setNewHistory, // setNewHistory,
eventInitDict // eventInitDict
}: IEditorEventParams): void { // }: IEditorEventParams): void {
const { // const {
symbolId // symbolId
} = eventInitDict?.detail; // } = eventInitDict?.detail;
const history = GetCurrentHistory(editorState.history, editorState.historyCurrentStep); // const history = GetCurrentHistory(editorState.history, editorState.historyCurrentStep);
const newHistory = SelectSymbolAction( // const newHistory = SelectSymbolAction(
symbolId, // symbolId,
history, // history,
editorState.historyCurrentStep // editorState.historyCurrentStep
); // );
setNewHistory(newHistory); // setNewHistory(newHistory);
const customEvent = new CustomEvent<IHistoryState>( // const customEvent = new CustomEvent<IHistoryState>(
'SelectSymbol', // 'SelectSymbol',
{ detail: structuredClone(editorState.history[editorState.historyCurrentStep]) } // { detail: structuredClone(editorState.history[editorState.historyCurrentStep]) }
); // );
root.dispatchEvent(customEvent); // root.dispatchEvent(customEvent);
} // }
function DeleteSymbol({ function DeleteSymbol({
root, root,

6
src/Interfaces/IHistoryState.ts
View file

@ -13,15 +13,9 @@ export interface IHistoryState {
// TODO: Update addContainers and deleteContainer to update the hashmap // TODO: Update addContainers and deleteContainer to update the hashmap
containers: Map<string, IContainerModel> containers: Map<string, IContainerModel>
/** Id of the selected container */
selectedContainerId: string
/** Counter of type of container. Used for ids. */ /** Counter of type of container. Used for ids. */
typeCounters: Record<string, number> typeCounters: Record<string, number>
/** List of symbols */ /** List of symbols */
symbols: Map<string, ISymbolModel> symbols: Map<string, ISymbolModel>
/** Selected symbols id */
selectedSymbolId: string
} }

4
src/utils/default.ts
View file

@ -147,10 +147,8 @@ export function GetDefaultEditorState(configuration: IConfiguration): IEditorSta
lastAction: '', lastAction: '',
mainContainer: mainContainer.properties.id, mainContainer: mainContainer.properties.id,
containers, containers,
selectedContainerId: mainContainer.properties.id,
typeCounters, typeCounters,
symbols: new Map(), symbols: new Map()
selectedSymbolId: ''
} }
], ],
historyCurrentStep: 0 historyCurrentStep: 0