diff --git a/src/App.tsx b/src/App.tsx index ee638f9..e6ea857 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -9,6 +9,7 @@ import { Configuration } from './Interfaces/Configuration'; export interface IHistoryState { MainContainer: IContainerModel | null, SelectedContainer: IContainerModel | null, + SelectedContainerId: string, TypeCounters: Record } @@ -157,12 +158,11 @@ export async function fetchConfiguration(): Promise { function Revive(editorState: IEditorState): void { const history = editorState.history; for (const state of history) { - if (state.MainContainer === null) { + if (state.MainContainer === null || state.MainContainer === undefined) { continue; } const it = MakeIterator(state.MainContainer); - state.SelectedContainer = state.MainContainer; for (const container of it) { const parentId = container.properties.parentId; if (parentId === null) { @@ -175,5 +175,12 @@ 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 ef82066..0920586 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, IContainerModel, MakeIterator } from './Components/SVG/Elements/ContainerModel'; +import { ContainerModel, findContainerById, 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, - isSVGSidebarOpen: boolean, + isElementsSidebarOpen: boolean, isHistoryOpen: boolean, history: Array, historyCurrentStep: number, @@ -34,7 +34,7 @@ class Editor extends React.Component { super(props); this.state = { isSidebarOpen: true, - isSVGSidebarOpen: false, + isElementsSidebarOpen: false, isHistoryOpen: false, configuration: Object.assign({}, props.configuration), history: [...props.history], @@ -59,7 +59,7 @@ class Editor extends React.Component { */ public ToggleElementsSidebar() { this.setState({ - isSVGSidebarOpen: !this.state.isSVGSidebarOpen + isElementsSidebarOpen: !this.state.isElementsSidebarOpen } as IEditorState); } @@ -79,11 +79,24 @@ 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: current.MainContainer, - TypeCounters: current.TypeCounters, - SelectedContainer: container + MainContainer: mainContainerClone, + TypeCounters: Object.assign({}, current.TypeCounters), + SelectedContainer, + SelectedContainerId: SelectedContainer.properties.id }]), historyCurrentStep: history.length } as IEditorState); @@ -110,30 +123,25 @@ class Editor extends React.Component { } if (parent === null) { - const clone: IContainerModel = structuredClone(current.SelectedContainer); - (clone.properties as any)[key] = value; + const selectedContainerClone: IContainerModel = structuredClone(current.SelectedContainer); + (selectedContainerClone.properties as any)[key] = value; this.setState({ history: history.concat([{ - SelectedContainer: clone, - MainContainer: clone, - TypeCounters: current.TypeCounters + SelectedContainer: selectedContainerClone, + SelectedContainerId: selectedContainerClone.properties.id, + MainContainer: selectedContainerClone, + TypeCounters: Object.assign({}, current.TypeCounters) }]), historyCurrentStep: history.length } as IEditorState); return; } - 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; - } - } + const mainContainerClone: IContainerModel = structuredClone(current.MainContainer); + const it = MakeIterator(mainContainerClone); + const container: ContainerModel | undefined = findContainerById(current.MainContainer, current.SelectedContainer.properties.id); - if (container === null) { + if (container === null || container === undefined) { throw new Error('[OnPropertyChange] Container model was not found among children of the main container!'); } @@ -143,8 +151,9 @@ class Editor extends React.Component { { history: history.concat([{ SelectedContainer: container, - MainContainer: clone, - TypeCounters: current.TypeCounters + SelectedContainerId: container.properties.id, + MainContainer: mainContainerClone, + TypeCounters: Object.assign({}, current.TypeCounters) }]), historyCurrentStep: history.length } as IEditorState); @@ -230,7 +239,8 @@ class Editor extends React.Component { history: history.concat([{ MainContainer: clone, TypeCounters: newCounters, - SelectedContainer: parent + SelectedContainer: parent, + SelectedContainerId: parent.properties.id }]), historyCurrentStep: history.length } as IEditorState); @@ -259,6 +269,13 @@ 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)} @@ -307,7 +324,7 @@ class Editor extends React.Component { { current.MainContainer }