diff --git a/src/App.tsx b/src/App.tsx index e6ea857..ee638f9 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -9,7 +9,6 @@ import { Configuration } from './Interfaces/Configuration'; export interface IHistoryState { MainContainer: IContainerModel | null, SelectedContainer: IContainerModel | null, - SelectedContainerId: string, TypeCounters: Record } @@ -158,11 +157,12 @@ export async function fetchConfiguration(): Promise { function Revive(editorState: IEditorState): void { const history = editorState.history; for (const state of history) { - if (state.MainContainer === null || state.MainContainer === undefined) { + if (state.MainContainer === null) { continue; } const it = MakeIterator(state.MainContainer); + state.SelectedContainer = state.MainContainer; for (const container of it) { const parentId = container.properties.parentId; if (parentId === null) { @@ -175,12 +175,5 @@ function Revive(editorState: IEditorState): void { } container.parent = parent; } - - const selected = findContainerById(state.MainContainer, state.SelectedContainerId); - if (selected === undefined) { - state.SelectedContainer = null; - continue; - } - state.SelectedContainer = selected; } -} +} \ No newline at end of file diff --git a/src/Editor.tsx b/src/Editor.tsx index 0920586..ef82066 100644 --- a/src/Editor.tsx +++ b/src/Editor.tsx @@ -6,7 +6,7 @@ import { ElementsSidebar } from './Components/ElementsSidebar/ElementsSidebar'; import { Configuration } from './Interfaces/Configuration'; import { SVG } from './Components/SVG/SVG'; import { History } from './Components/History/History'; -import { ContainerModel, findContainerById, IContainerModel, MakeIterator } from './Components/SVG/Elements/ContainerModel'; +import { ContainerModel, IContainerModel, MakeIterator } from './Components/SVG/Elements/ContainerModel'; import Properties from './Interfaces/Properties'; import { IHistoryState } from './App'; @@ -18,7 +18,7 @@ interface IEditorProps { export interface IEditorState { isSidebarOpen: boolean, - isElementsSidebarOpen: boolean, + isSVGSidebarOpen: boolean, isHistoryOpen: boolean, history: Array, historyCurrentStep: number, @@ -34,7 +34,7 @@ class Editor extends React.Component { super(props); this.state = { isSidebarOpen: true, - isElementsSidebarOpen: false, + isSVGSidebarOpen: false, isHistoryOpen: false, configuration: Object.assign({}, props.configuration), history: [...props.history], @@ -59,7 +59,7 @@ class Editor extends React.Component { */ public ToggleElementsSidebar() { this.setState({ - isElementsSidebarOpen: !this.state.isElementsSidebarOpen + isSVGSidebarOpen: !this.state.isSVGSidebarOpen } as IEditorState); } @@ -79,24 +79,11 @@ class Editor extends React.Component { public SelectContainer(container: ContainerModel) { const history = this.getCurrentHistory(); const current = history[history.length - 1]; - - if (current.MainContainer === null) { - throw new Error('[SelectContainer] Tried to select a container while there is no main container!'); - } - - const mainContainerClone = structuredClone(current.MainContainer); - const SelectedContainer = findContainerById(mainContainerClone, container.properties.id); - - if (SelectedContainer === undefined) { - throw new Error('[SelectContainer] Cannot find container among children of main container!'); - } - this.setState({ history: history.concat([{ - MainContainer: mainContainerClone, - TypeCounters: Object.assign({}, current.TypeCounters), - SelectedContainer, - SelectedContainerId: SelectedContainer.properties.id + MainContainer: current.MainContainer, + TypeCounters: current.TypeCounters, + SelectedContainer: container }]), historyCurrentStep: history.length } as IEditorState); @@ -123,25 +110,30 @@ class Editor extends React.Component { } if (parent === null) { - const selectedContainerClone: IContainerModel = structuredClone(current.SelectedContainer); - (selectedContainerClone.properties as any)[key] = value; + const clone: IContainerModel = structuredClone(current.SelectedContainer); + (clone.properties as any)[key] = value; this.setState({ history: history.concat([{ - SelectedContainer: selectedContainerClone, - SelectedContainerId: selectedContainerClone.properties.id, - MainContainer: selectedContainerClone, - TypeCounters: Object.assign({}, current.TypeCounters) + SelectedContainer: clone, + MainContainer: clone, + TypeCounters: current.TypeCounters }]), historyCurrentStep: history.length } as IEditorState); return; } - const mainContainerClone: IContainerModel = structuredClone(current.MainContainer); - const it = MakeIterator(mainContainerClone); - const container: ContainerModel | undefined = findContainerById(current.MainContainer, current.SelectedContainer.properties.id); + const clone: IContainerModel = structuredClone(current.MainContainer); + const it = MakeIterator(clone); + let container: ContainerModel | null = null; + for (const child of it) { + if (child.properties.id === current.SelectedContainer.properties.id) { + container = child as ContainerModel; + break; + } + } - if (container === null || container === undefined) { + if (container === null) { throw new Error('[OnPropertyChange] Container model was not found among children of the main container!'); } @@ -151,9 +143,8 @@ class Editor extends React.Component { { history: history.concat([{ SelectedContainer: container, - SelectedContainerId: container.properties.id, - MainContainer: mainContainerClone, - TypeCounters: Object.assign({}, current.TypeCounters) + MainContainer: clone, + TypeCounters: current.TypeCounters }]), historyCurrentStep: history.length } as IEditorState); @@ -239,8 +230,7 @@ class Editor extends React.Component { history: history.concat([{ MainContainer: clone, TypeCounters: newCounters, - SelectedContainer: parent, - SelectedContainerId: parent.properties.id + SelectedContainer: parent }]), historyCurrentStep: history.length } as IEditorState); @@ -269,13 +259,6 @@ class Editor extends React.Component { */ render() { const current = this.getCurrentHistoryState(); - let buttonRightOffsetClasses = 'right-12'; - if (this.state.isElementsSidebarOpen || this.state.isHistoryOpen) { - buttonRightOffsetClasses = 'right-72'; - } - if (this.state.isHistoryOpen && this.state.isElementsSidebarOpen) { - buttonRightOffsetClasses = 'right-[544px]'; - } return (
{ this.ToggleElementsSidebar()} onPropertyChange={(key: string, value: string) => this.OnPropertyChange(key, value)} @@ -324,7 +307,7 @@ class Editor extends React.Component { { current.MainContainer }