Refactor usage of EditorState + Add version to editorState + increment editorState to "v2.0.0"

package.json

@@ -1,7 +1,7 @@
 {
   "name": "svg-layout-designer-react",
   "private": true,
-  "version": "v1.0.0",
+  "version": "v2.0.0",
   "type": "module",
   "postinstall": "npx patch-package",
   "scripts": {

src/Components/App/App.tsx

@@ -63,7 +63,8 @@ export function App(props: IAppProps): JSX.Element {
       typeCounters: {},
       symbols: new Map()
     }],
-    historyCurrentStep: 0
+    historyCurrentStep: 0,
+    version: APP_VERSION
   });
 
   UseCustomEvents(
@@ -86,9 +87,7 @@ export function App(props: IAppProps): JSX.Element {
         >
           <Editor
             root={props.root}
-            configuration={editorState.configuration}
+            editorState={editorState}
-            history={editorState.history}
-            historyCurrentStep={editorState.historyCurrentStep}
           />
         </div>
       );

src/Components/Editor/Actions/AddContainer.ts

@@ -15,6 +15,7 @@ import { FindContainerById } from '../../../utils/itertools';
 import { ApplyMargin, RestoreX, RestoreY } from '../../../utils/svg';
 import { ApplyBehaviors, ApplyBehaviorsOnSiblingsChildren } from '../Behaviors/Behaviors';
 import { GetCurrentHistory, UpdateCounters } from '../Editor';
+import { type IEditorState } from '../../../Interfaces/IEditorState';
 import { SortChildren } from './ContainerOperations';
 
 /**
@@ -28,17 +29,13 @@ import { SortChildren } from './ContainerOperations';
 export function AddContainerToSelectedContainer(
   type: string,
   selected: IContainerModel,
-  configuration: IConfiguration,
+  editorState: IEditorState
-  fullHistory: IHistoryState[],
-  historyCurrentStep: number
 ): IHistoryState[] {
   return AddContainer(
     selected.children.length,
     type,
     selected.properties.id,
-    configuration,
+    editorState
-    fullHistory,
-    historyCurrentStep
   );
 }
 
@@ -56,9 +53,11 @@ export function AddContainers(
   index: number,
   availableContainers: IAvailableContainer[],
   parentId: string,
-  configuration: IConfiguration,
+  {
-  fullHistory: IHistoryState[],
+    configuration,
-  historyCurrentStep: number
+    history: fullHistory,
+    historyCurrentStep
+  }: IEditorState
 ): {
     history: IHistoryState[]
     newContainers: IContainerModel[]
@@ -240,9 +239,7 @@ export function AddContainer(
   index: number,
   type: string,
   parentId: string,
-  configuration: IConfiguration,
+  editorState: IEditorState
-  fullHistory: IHistoryState[],
-  historyCurrentStep: number
 ): IHistoryState[] {
   // just call AddContainers with an array on a single element
   const { history } = AddContainers(
@@ -250,9 +247,7 @@ export function AddContainer(
     // eslint-disable-next-line @typescript-eslint/naming-convention
     [{ Type: type }],
     parentId,
-    configuration,
+    editorState
-    fullHistory,
-    historyCurrentStep
   );
   return history;
 }

src/Components/Editor/Actions/ContainerOperations.ts

@@ -8,7 +8,7 @@ import { type ISymbolModel } from '../../../Interfaces/ISymbolModel';
 import { PropertyType } from '../../../Enums/PropertyType';
 import { TransformX, TransformY } from '../../../utils/svg';
 import { Orientation } from '../../../Enums/Orientation';
-import { type IConfiguration } from '../../../Interfaces/IConfiguration';
+import { type IEditorState } from '../../../Interfaces/IEditorState';
 import { AddContainers } from './AddContainer';
 
 /**
@@ -17,8 +17,10 @@ import { AddContainers } from './AddContainer';
  */
 export function DeselectContainer(
   containerId: string,
-  fullHistory: IHistoryState[],
+  {
-  historyCurrentStep: number
+    history: fullHistory,
+    historyCurrentStep
+  }: IEditorState
 ): IHistoryState[] {
   const history = GetCurrentHistory(fullHistory, historyCurrentStep);
   const current = history[history.length - 1];
@@ -42,8 +44,10 @@ export function DeselectContainer(
  */
 export function DeleteContainer(
   containerId: string,
-  fullHistory: IHistoryState[],
+  {
-  historyCurrentStep: number
+    history: fullHistory,
+    historyCurrentStep
+  }: IEditorState
 ): IHistoryState[] {
   const history = GetCurrentHistory(fullHistory, historyCurrentStep);
   const current = history[history.length - 1];
@@ -109,10 +113,10 @@ export function DeleteContainer(
 export function ReplaceByContainer(
   containerId: string,
   newContainerId: string,
-  configuration: IConfiguration,
+  editorState: IEditorState
-  fullHistory: IHistoryState[],
-  historyCurrentStep: number
 ): IHistoryState[] {
+  const fullHistory = editorState.history;
+  const historyCurrentStep = editorState.historyCurrentStep;
   const history = GetCurrentHistory(fullHistory, historyCurrentStep);
   const current = history[history.length - 1];
 
@@ -130,12 +134,18 @@ export function ReplaceByContainer(
     containerParent.children.indexOf(containerId),
     [{ Type: newContainerId }],
     containerParent.properties.id,
-    configuration,
+    editorState
-    fullHistory,
-    historyCurrentStep
   );
 
-  const historyDelete = DeleteContainer(containerId, historyAdd.history, historyCurrentStep + 1);
+  const historyDelete = DeleteContainer(
+    containerId,
+    {
+      configuration: editorState.configuration,
+      history: historyAdd.history,
+      historyCurrentStep: historyCurrentStep + 1,
+      version: editorState.version
+    }
+  );
   const currentDelete = historyDelete[historyDelete.length - 1];
 
   fullHistory.push({
@@ -186,8 +196,10 @@ export function OnPropertyChange(
   value: string | number | boolean | number[],
   type: PropertyType = PropertyType.Simple,
   selected: IContainerModel | undefined,
-  fullHistory: IHistoryState[],
+  {
-  historyCurrentStep: number
+    history: fullHistory,
+    historyCurrentStep
+  }: IEditorState
 ): IHistoryState[] {
   const history = GetCurrentHistory(fullHistory, historyCurrentStep);
   const current = history[history.length - 1];

src/Components/Editor/Actions/ContextMenuActions.ts

@@ -2,7 +2,6 @@ import Swal from 'sweetalert2';
 import { type Dispatch, type SetStateAction } from 'react';
 import { AddMethod } from '../../../Enums/AddMethod';
 import { type IAction } from '../../../Interfaces/IAction';
-import { type IConfiguration } from '../../../Interfaces/IConfiguration';
 import { type IContainerModel } from '../../../Interfaces/IContainerModel';
 import { type IHistoryState } from '../../../Interfaces/IHistoryState';
 import { type ISetContainerListRequest } from '../../../Interfaces/ISetContainerListRequest';
@@ -14,19 +13,21 @@ import { type IMenuAction } from '../../Menu/Menu';
 import { GetCurrentHistoryState } from '../Editor';
 import { Text } from '../../Text/Text';
 import { type IReplaceContainer } from '../../../Interfaces/IReplaceContainer';
+import { type IEditorState } from '../../../Interfaces/IEditorState';
 import { AddContainers } from './AddContainer';
 import { DeleteContainer } from './ContainerOperations';
 import { DeleteSymbol } from './SymbolOperations';
 
 export function InitActions(
   menuActions: Map<string, IMenuAction[]>,
-  configuration: IConfiguration,
+  editorState: IEditorState,
-  history: IHistoryState[],
-  historyCurrentStep: number,
   setNewHistory: (newHistory: IHistoryState[]) => void,
   setHistoryCurrentStep: Dispatch<SetStateAction<number>>,
   setIsReplacingContainer: Dispatch<SetStateAction<IReplaceContainer>>
 ): void {
+  const configuration = editorState.configuration;
+  const history = editorState.history;
+  const historyCurrentStep = editorState.historyCurrentStep;
   menuActions.set(
     '',
     [
@@ -82,8 +83,7 @@ export function InitActions(
         const id = target.id;
         const newHistory = DeleteContainer(
           id,
-          history,
+          editorState
-          historyCurrentStep
         );
         setNewHistory(newHistory);
       }
@@ -100,8 +100,7 @@ export function InitActions(
         const id = target.id;
         const newHistory = DeleteSymbol(
           id,
-          history,
+          editorState
-          historyCurrentStep
         );
         setNewHistory(newHistory);
       }
@@ -130,9 +129,7 @@ export function InitActions(
         action: GetAction(
           action,
           currentState,
-          configuration,
+          editorState,
-          history,
-          historyCurrentStep,
           setNewHistory
         )
       };
@@ -145,9 +142,7 @@ export function InitActions(
 function GetAction(
   action: IAction,
   currentState: IHistoryState,
-  configuration: IConfiguration,
+  editorState: IEditorState,
-  history: IHistoryState[],
-  historyCurrentStep: number,
   setNewHistory: (newHistory: IHistoryState[]) => void
 ): (target: HTMLElement) => void {
   return (target: HTMLElement) => {
@@ -175,15 +170,16 @@ function GetAction(
     };
     /* eslint-enable */
 
-    SetContainerList(request, configuration.APIConfiguration?.apiSetContainerListUrl)
+    SetContainerList(
+      request,
+      editorState.configuration.APIConfiguration?.apiSetContainerListUrl
+    )
       .then((response: ISetContainerListResponse) => {
         HandleSetContainerList(
           action,
           container,
           response,
-          configuration,
+          editorState,
-          history,
-          historyCurrentStep,
           setNewHistory
         );
       });
@@ -215,13 +211,14 @@ function HandleSetContainerList(
   action: IAction,
   selectedContainer: IContainerModel,
   response: ISetContainerListResponse,
-  configuration: IConfiguration,
+  editorState: IEditorState,
-  history: IHistoryState[],
-  historyCurrentStep: number,
   setNewHistory: (newHistory: IHistoryState[]) => void
 ): void {
   const addingBehavior = response.AddingBehavior ?? action.AddingBehavior;
-  const current = GetCurrentHistoryState(history, historyCurrentStep);
+  const current = GetCurrentHistoryState(
+    editorState.history,
+    editorState.historyCurrentStep
+  );
   const containers = current.containers;
   switch (addingBehavior) {
     case AddMethod.Insert:
@@ -233,9 +230,7 @@ function HandleSetContainerList(
         selectedContainer.children.length,
         response.Containers,
         selectedContainer.properties.id,
-        configuration,
+        editorState
-        history,
-        historyCurrentStep
       );
 
       setNewHistory(newHistory);
@@ -246,9 +241,7 @@ function HandleSetContainerList(
         containers,
         selectedContainer,
         response,
-        configuration,
+        editorState
-        history,
-        historyCurrentStep
       ));
       break;
     case AddMethod.ReplaceParent: {
@@ -265,9 +258,7 @@ function HandleSetContainerList(
         containers,
         parent,
         response,
-        configuration,
+        editorState
-        history,
-        historyCurrentStep
       ));
       break;
     }
@@ -278,9 +269,7 @@ function HandleReplace(
   containers: Map<string, IContainerModel>,
   selectedContainer: IContainerModel,
   response: ISetContainerListResponse,
-  configuration: IConfiguration,
+  editorState: IEditorState
-  history: IHistoryState[],
-  historyCurrentStep: number
 ): IHistoryState[] {
   const parent = FindContainerById(containers, selectedContainer.properties.parentId);
   if (parent === undefined || parent === null) {
@@ -291,17 +280,21 @@ function HandleReplace(
 
   const newHistoryAfterDelete = DeleteContainer(
     selectedContainer.properties.id,
-    history,
+    editorState
-    historyCurrentStep
   );
 
+  const newEditorStateAfterDelete: IEditorState = {
+    configuration: editorState.configuration,
+    history: newHistoryAfterDelete,
+    historyCurrentStep: newHistoryAfterDelete.length - 1,
+    version: editorState.version
+  };
+
   const { history: newHistoryBeforeDelete } = AddContainers(
     index,
     response.Containers,
     selectedContainer.properties.parentId,
-    configuration,
+    newEditorStateAfterDelete
-    newHistoryAfterDelete,
-    newHistoryAfterDelete.length - 1
   );
 
   // Remove AddContainers from history

src/Components/Editor/Actions/Save.ts

@@ -1,24 +1,15 @@
-import { type IHistoryState } from '../../../Interfaces/IHistoryState';
-import { type IConfiguration } from '../../../Interfaces/IConfiguration';
 import { GetCircularReplacer } from '../../../utils/saveload';
 import { ID } from '../../SVG/SVG';
 import { type IEditorState } from '../../../Interfaces/IEditorState';
 import { SHOW_SELECTOR_TEXT } from '../../../utils/default';
 
 export function SaveEditorAsJSON(
-  history: IHistoryState[],
+  editorState: IEditorState
-  historyCurrentStep: number,
-  configuration: IConfiguration
 ): void {
   const exportName = 'state.json';
   const spaces = import.meta.env.DEV
     ? 4
     : 0;
-  const editorState: IEditorState = {
-    history,
-    historyCurrentStep,
-    configuration
-  };
 
   // eslint-disable-next-line @typescript-eslint/strict-boolean-expressions
   if (window.Worker) {

src/Components/Editor/Actions/SymbolOperations.ts

@@ -1,5 +1,5 @@
-import { type IConfiguration } from '../../../Interfaces/IConfiguration';
 import { type IContainerModel } from '../../../Interfaces/IContainerModel';
+import { type IEditorState } from '../../../Interfaces/IEditorState';
 import { type IHistoryState } from '../../../Interfaces/IHistoryState';
 import { type ISymbolModel } from '../../../Interfaces/ISymbolModel';
 import { GetDefaultSymbolModel } from '../../../utils/default';
@@ -12,9 +12,12 @@ import { LinkSymbol } from './ContainerOperations';
 
 export function AddSymbol(
   name: string,
-  configuration: IConfiguration,
+  {
-  fullHistory: IHistoryState[],
+    configuration,
-  historyCurrentStep: number
+    history: fullHistory,
+    historyCurrentStep,
+    version
+  }: IEditorState
 ): IHistoryState[] {
   let history = GetCurrentHistory(fullHistory, historyCurrentStep);
   const current = history[history.length - 1];
@@ -57,9 +60,12 @@ export function AddSymbol(
       0,
       [symbolConfig.AssociatedContainer],
       current.mainContainer,
-      configuration,
+      {
-      history,
+        configuration,
-      historyCurrentStep + 1
+        history,
+        historyCurrentStep: historyCurrentStep + 1,
+        version
+      }
     );
 
     history = newHistory;
@@ -76,8 +82,10 @@ export function AddSymbol(
 
 export function DeleteSymbol(
   symbolId: string,
-  fullHistory: IHistoryState[],
+  {
-  historyCurrentStep: number
+    history: fullHistory,
+    historyCurrentStep
+  }: IEditorState
 ): IHistoryState[] {
   const history = GetCurrentHistory(fullHistory, historyCurrentStep);
   const current = history[history.length - 1];
@@ -131,8 +139,10 @@ export function OnPropertyChange(
   key: string,
   value: string | number | boolean,
   selectedSymbolId: string,
-  fullHistory: IHistoryState[],
+  {
-  historyCurrentStep: number
+    history: fullHistory,
+    historyCurrentStep
+  }: IEditorState
 ): IHistoryState[] {
   const history = GetCurrentHistory(fullHistory, historyCurrentStep);
   const current = history[history.length - 1];

src/Components/Editor/Editor.tsx

@@ -1,6 +1,5 @@
 import React, { type Dispatch, type SetStateAction, useEffect, useRef } from 'react';
 import './Editor.scss';
-import { type IConfiguration } from '../../Interfaces/IConfiguration';
 import { type IHistoryState } from '../../Interfaces/IHistoryState';
 import { UI } from '../UI/UI';
 import { UseCustomEvents, UseEditorListener } from '../../Events/EditorEvents';
@@ -8,6 +7,7 @@ import { MAX_HISTORY } from '../../utils/default';
 import { FindContainerById } from '../../utils/itertools';
 import { Menu } from '../Menu/Menu';
 import { type IReplaceContainer } from '../../Interfaces/IReplaceContainer';
+import { type IEditorState } from '../../Interfaces/IEditorState';
 import { DeleteContainer, OnPropertyChange, ReplaceByContainer } from './Actions/ContainerOperations';
 import { SaveEditorAsJSON, SaveEditorAsSVG } from './Actions/Save';
 import { OnKey } from './Actions/Shortcuts';
@@ -21,9 +21,7 @@ import { AddContainerToSelectedContainer, AddContainer } from './Actions/AddCont
 
 interface IEditorProps {
   root: Element | Document
-  configuration: IConfiguration
+  editorState: IEditorState
-  history: IHistoryState[]
-  historyCurrentStep: number
 }
 
 function UseShortcuts(
@@ -73,8 +71,8 @@ function UseNewHistoryState(
 
 export function Editor(props: IEditorProps): JSX.Element {
   // States
-  const [history, setHistory] = React.useState<IHistoryState[]>(structuredClone(props.history));
+  const [history, setHistory] = React.useState<IHistoryState[]>(structuredClone(props.editorState.history));
-  const [historyCurrentStep, setHistoryCurrentStep] = React.useState<number>(props.historyCurrentStep);
+  const [historyCurrentStep, setHistoryCurrentStep] = React.useState<number>(props.editorState.historyCurrentStep);
   const [
     replaceContainer,
     setReplaceContainer
@@ -86,6 +84,13 @@ export function Editor(props: IEditorProps): JSX.Element {
   const eventCallbackQueue = useRef<CustomEvent[]>([]);
   const setNewHistory = UseNewHistoryState(setHistory, setHistoryCurrentStep);
 
+  const editorState: IEditorState = {
+    configuration: props.editorState.configuration,
+    history,
+    historyCurrentStep,
+    version: props.editorState.version
+  };
+
   function ResetState(): void {
     setReplaceContainer({ isReplacing: false, id: undefined, category: undefined });
   }
@@ -96,51 +101,40 @@ export function Editor(props: IEditorProps): JSX.Element {
     historyCurrentStep,
     setHistoryCurrentStep,
     () => {
-      setNewHistory(DeleteContainer(selectedContainerId, history, historyCurrentStep));
+      setNewHistory(DeleteContainer(selectedContainerId, editorState));
     },
     ResetState
   );
   UseCustomEvents(
     eventCallbackQueue,
     props.root,
-    history,
+    editorState,
-    historyCurrentStep,
-    props.configuration,
     editorRef,
     setNewHistory
   );
   UseEditorListener(
     props.root,
-    history,
+    editorState
-    historyCurrentStep,
-    props.configuration
   );
 
   // Context Menu
   const menuActions = new Map();
   InitActions(
     menuActions,
-    props.configuration,
+    editorState,
-    history,
-    historyCurrentStep,
     setNewHistory,
     setHistoryCurrentStep,
     setReplaceContainer
   );
 
   // Render
-  const configuration = props.configuration;
   const current = GetCurrentHistoryState(history, historyCurrentStep);
   const selected = FindContainerById(current.containers, selectedContainerId);
 
   return (
     <div ref={editorRef} className="Editor font-sans h-full ">
       <UI
-        editorState={{
+        editorState={editorState}
-          configuration: props.configuration,
-          history,
-          historyCurrentStep
-        }}
         replaceContainer={replaceContainer}
         selectedContainerId={selectedContainerId}
         selectedSymbolId={selectedSymbolId}
@@ -150,8 +144,7 @@ export function Editor(props: IEditorProps): JSX.Element {
         deleteContainer={(containerId: string) => {
           setNewHistory(DeleteContainer(
             containerId,
-            history,
+            editorState
-            historyCurrentStep
           ));
         }}
         onPropertyChange={(key, value, type) => {
@@ -160,8 +153,7 @@ export function Editor(props: IEditorProps): JSX.Element {
             value,
             type,
             selected,
-            history,
+            editorState
-            historyCurrentStep
           ));
         }}
         addOrReplaceContainer={(type) => {
@@ -172,9 +164,7 @@ export function Editor(props: IEditorProps): JSX.Element {
             const newHistory = ReplaceByContainer(
               replaceContainer.id,
               type,
-              configuration,
+              editorState
-              history,
-              historyCurrentStep
             );
             setReplaceContainer({ isReplacing: false, id: undefined, category: undefined });
             setNewHistory(newHistory);
@@ -182,9 +172,7 @@ export function Editor(props: IEditorProps): JSX.Element {
             setNewHistory(AddContainerToSelectedContainer(
               type,
               selected,
-              configuration,
+              editorState
-              history,
-              historyCurrentStep
             ));
           }
         }}
@@ -193,17 +181,13 @@ export function Editor(props: IEditorProps): JSX.Element {
             index,
             type,
             parent,
-            configuration,
+            editorState
-            history,
-            historyCurrentStep
           ));
         }}
         addSymbol={(type) => {
           setNewHistory(AddSymbol(
             type,
-            configuration,
+            editorState
-            history,
-            historyCurrentStep
           ));
         }}
         onSymbolPropertyChange={(key, value) => {
@@ -211,8 +195,7 @@ export function Editor(props: IEditorProps): JSX.Element {
             key,
             value,
             selectedSymbolId,
-            history,
+            editorState
-            historyCurrentStep
           ));
         }}
         selectSymbol={(symbolId) => {
@@ -221,16 +204,11 @@ export function Editor(props: IEditorProps): JSX.Element {
         deleteSymbol={(symbolId) => {
           setNewHistory(DeleteSymbol(
             symbolId,
-            history,
+            editorState
-            historyCurrentStep
           ));
         }}
         saveEditorAsJSON={() => {
-          SaveEditorAsJSON(
+          SaveEditorAsJSON(editorState);
-            history,
-            historyCurrentStep,
-            configuration
-          );
         }}
         saveEditorAsSVG={() => { SaveEditorAsSVG(); }}
         loadState={(move) => { setHistoryCurrentStep(move); }}

src/Events/EditorEvents.ts

@@ -43,18 +43,11 @@ export const events: IEditorEvent[] = [
 export function UseCustomEvents(
   callbackQueue: React.RefObject<CustomEvent[]>,
   root: Element | Document,
-  history: IHistoryState[],
+  editorState: IEditorState,
-  historyCurrentStep: number,
-  configuration: IConfiguration,
   editorRef: React.RefObject<HTMLDivElement>,
   setNewHistory: (newHistory: IHistoryState[], historyCurrentStep?: number) => void
 ): void {
   useEffect(() => {
-    const editorState: IEditorState = {
-      history,
-      historyCurrentStep,
-      configuration
-    };
     const current = editorRef.current;
 
     if (current === null) {
@@ -110,16 +103,9 @@ export function UseCustomEvents(
 
 export function UseEditorListener(
   root: Element | Document,
-  history: IHistoryState[],
+  editorState: IEditorState
-  historyCurrentStep: number,
-  configuration: IConfiguration
 ): void {
   useEffect(() => {
-    const editorState: IEditorState = {
-      history,
-      historyCurrentStep,
-      configuration
-    };
     const event = new CustomEvent('editorListener', { detail: editorState });
     root.dispatchEvent(event);
   });
@@ -209,14 +195,11 @@ function AddContainer({
     parentId
   } = eventInitDict?.detail;
 
-  const history = GetCurrentHistory(editorState.history, editorState.historyCurrentStep);
   const newHistory = AddContainerAction(
     index,
     type,
     parentId,
-    editorState.configuration,
+    editorState
-    history,
-    editorState.historyCurrentStep
   );
   setNewHistory(newHistory);
 
@@ -249,9 +232,7 @@ function AppendContainer({
     parent?.children.length ?? 0,
     type,
     parentId,
-    editorState.configuration,
+    editorState
-    history,
-    editorState.historyCurrentStep
   );
   setNewHistory(newHistory);
 
@@ -273,13 +254,9 @@ function DeleteContainer({
   const {
     containerId
   } = eventInitDict?.detail;
-
-  const history = GetCurrentHistory(editorState.history, editorState.historyCurrentStep);
-
   const newHistory = DeleteContainerAction(
     containerId,
-    history,
+    editorState
-    editorState.historyCurrentStep
   );
   setNewHistory(newHistory);
 
@@ -302,13 +279,9 @@ function AddSymbol({
     name
   } = eventInitDict?.detail;
 
-  const history = GetCurrentHistory(editorState.history, editorState.historyCurrentStep);
-
   const newHistory = AddSymbolAction(
     name,
-    editorState.configuration,
+    editorState
-    history,
-    editorState.historyCurrentStep
   );
   setNewHistory(newHistory);
 
@@ -331,11 +304,9 @@ function DeleteSymbol({
     symbolId
   } = eventInitDict?.detail;
 
-  const history = GetCurrentHistory(editorState.history, editorState.historyCurrentStep);
   const newHistory = DeleteSymbolAction(
     symbolId,
-    history,
+    editorState
-    editorState.historyCurrentStep
   );
   setNewHistory(newHistory);
 

src/Interfaces/IEditorState.ts

@@ -5,4 +5,5 @@ export interface IEditorState {
   history: IHistoryState[]
   historyCurrentStep: number
   configuration: IConfiguration
+  version: string
 }

src/utils/default.ts

@@ -10,6 +10,7 @@ import { Orientation } from '../Enums/Orientation';
 import { AppState } from '../Enums/AppState';
 import { type IDimensionOptions } from '../Interfaces/IDimensionOptions';
 import { type IDimensionStyle } from '../Components/SVG/Elements/Dimension';
+import { version } from 'react';
 
 /// EDITOR DEFAULTS ///
 
@@ -151,7 +152,8 @@ export function GetDefaultEditorState(configuration: IConfiguration): IEditorSta
         symbols: new Map()
       }
     ],
-    historyCurrentStep: 0
+    historyCurrentStep: 0,
+    version: APP_VERSION
   };
 }
 

src/vite-env.d.ts

@@ -11,3 +11,5 @@ interface ImportMetaEnv {
 interface ImportMeta {
   readonly env: ImportMetaEnv
 }
+
+declare const APP_VERSION: string;

vite.config.ts

@@ -6,5 +6,8 @@ export default defineConfig({
   plugins: [
     react()
   ],
-  base: './'
+  base: './',
+  define: {
+    APP_VERSION: JSON.stringify(process.env.npm_package_version)
+  }
 });