diff --git a/package.json b/package.json index 8804ff9..f71df57 100644 --- a/package.json +++ b/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": { diff --git a/src/Components/App/App.tsx b/src/Components/App/App.tsx index 54d13d9..22870cc 100644 --- a/src/Components/App/App.tsx +++ b/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 { > ); diff --git a/src/Components/Editor/Actions/AddContainer.ts b/src/Components/Editor/Actions/AddContainer.ts index 721a651..600edd8 100644 --- a/src/Components/Editor/Actions/AddContainer.ts +++ b/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, - fullHistory: IHistoryState[], - historyCurrentStep: number + editorState: IEditorState ): IHistoryState[] { return AddContainer( selected.children.length, type, selected.properties.id, - configuration, - fullHistory, - historyCurrentStep + editorState ); } @@ -56,9 +53,11 @@ export function AddContainers( index: number, availableContainers: IAvailableContainer[], parentId: string, - configuration: IConfiguration, - fullHistory: IHistoryState[], - historyCurrentStep: number + { + configuration, + history: fullHistory, + historyCurrentStep + }: IEditorState ): { history: IHistoryState[] newContainers: IContainerModel[] @@ -240,9 +239,7 @@ export function AddContainer( index: number, type: string, parentId: string, - configuration: IConfiguration, - fullHistory: IHistoryState[], - historyCurrentStep: number + editorState: IEditorState ): 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, - fullHistory, - historyCurrentStep + editorState ); return history; } diff --git a/src/Components/Editor/Actions/ContainerOperations.ts b/src/Components/Editor/Actions/ContainerOperations.ts index 5282ec4..480922e 100644 --- a/src/Components/Editor/Actions/ContainerOperations.ts +++ b/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, - fullHistory: IHistoryState[], - historyCurrentStep: number + editorState: IEditorState ): 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, - fullHistory, - historyCurrentStep + editorState ); - 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]; diff --git a/src/Components/Editor/Actions/ContextMenuActions.ts b/src/Components/Editor/Actions/ContextMenuActions.ts index 53949d2..f5ca166 100644 --- a/src/Components/Editor/Actions/ContextMenuActions.ts +++ b/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, - configuration: IConfiguration, - history: IHistoryState[], - historyCurrentStep: number, + editorState: IEditorState, setNewHistory: (newHistory: IHistoryState[]) => void, setHistoryCurrentStep: Dispatch>, setIsReplacingContainer: Dispatch> ): 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, - historyCurrentStep + editorState ); setNewHistory(newHistory); } @@ -100,8 +100,7 @@ export function InitActions( const id = target.id; const newHistory = DeleteSymbol( id, - history, - historyCurrentStep + editorState ); setNewHistory(newHistory); } @@ -130,9 +129,7 @@ export function InitActions( action: GetAction( action, currentState, - configuration, - history, - historyCurrentStep, + editorState, setNewHistory ) }; @@ -145,9 +142,7 @@ export function InitActions( function GetAction( action: IAction, currentState: IHistoryState, - configuration: IConfiguration, - history: IHistoryState[], - historyCurrentStep: number, + editorState: IEditorState, 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, - history, - historyCurrentStep, + editorState, setNewHistory ); }); @@ -215,13 +211,14 @@ function HandleSetContainerList( action: IAction, selectedContainer: IContainerModel, response: ISetContainerListResponse, - configuration: IConfiguration, - history: IHistoryState[], - historyCurrentStep: number, + editorState: IEditorState, 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, - history, - historyCurrentStep + editorState ); setNewHistory(newHistory); @@ -246,9 +241,7 @@ function HandleSetContainerList( containers, selectedContainer, response, - configuration, - history, - historyCurrentStep + editorState )); break; case AddMethod.ReplaceParent: { @@ -265,9 +258,7 @@ function HandleSetContainerList( containers, parent, response, - configuration, - history, - historyCurrentStep + editorState )); break; } @@ -278,9 +269,7 @@ function HandleReplace( containers: Map, selectedContainer: IContainerModel, response: ISetContainerListResponse, - configuration: IConfiguration, - history: IHistoryState[], - historyCurrentStep: number + editorState: IEditorState ): 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, - historyCurrentStep + editorState ); + 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, - newHistoryAfterDelete, - newHistoryAfterDelete.length - 1 + newEditorStateAfterDelete ); // Remove AddContainers from history diff --git a/src/Components/Editor/Actions/Save.ts b/src/Components/Editor/Actions/Save.ts index 4546999..2fe9c14 100644 --- a/src/Components/Editor/Actions/Save.ts +++ b/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[], - historyCurrentStep: number, - configuration: IConfiguration + editorState: IEditorState ): 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) { diff --git a/src/Components/Editor/Actions/SymbolOperations.ts b/src/Components/Editor/Actions/SymbolOperations.ts index ddd4af4..4be232d 100644 --- a/src/Components/Editor/Actions/SymbolOperations.ts +++ b/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[], - historyCurrentStep: number + { + configuration, + 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, - historyCurrentStep + 1 + { + configuration, + 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]; diff --git a/src/Components/Editor/Editor.tsx b/src/Components/Editor/Editor.tsx index 2859ef4..45987bf 100644 --- a/src/Components/Editor/Editor.tsx +++ b/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 - history: IHistoryState[] - historyCurrentStep: number + editorState: IEditorState } function UseShortcuts( @@ -73,8 +71,8 @@ function UseNewHistoryState( export function Editor(props: IEditorProps): JSX.Element { // States - const [history, setHistory] = React.useState(structuredClone(props.history)); - const [historyCurrentStep, setHistoryCurrentStep] = React.useState(props.historyCurrentStep); + const [history, setHistory] = React.useState(structuredClone(props.editorState.history)); + const [historyCurrentStep, setHistoryCurrentStep] = React.useState(props.editorState.historyCurrentStep); const [ replaceContainer, setReplaceContainer @@ -86,6 +84,13 @@ export function Editor(props: IEditorProps): JSX.Element { const eventCallbackQueue = useRef([]); 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, - historyCurrentStep, - props.configuration, + editorState, editorRef, setNewHistory ); UseEditorListener( props.root, - history, - historyCurrentStep, - props.configuration + editorState ); // Context Menu const menuActions = new Map(); InitActions( menuActions, - props.configuration, - history, - historyCurrentStep, + editorState, setNewHistory, setHistoryCurrentStep, setReplaceContainer ); // Render - const configuration = props.configuration; const current = GetCurrentHistoryState(history, historyCurrentStep); const selected = FindContainerById(current.containers, selectedContainerId); return (
{ setNewHistory(DeleteContainer( containerId, - history, - historyCurrentStep + editorState )); }} onPropertyChange={(key, value, type) => { @@ -160,8 +153,7 @@ export function Editor(props: IEditorProps): JSX.Element { value, type, selected, - history, - historyCurrentStep + editorState )); }} addOrReplaceContainer={(type) => { @@ -172,9 +164,7 @@ export function Editor(props: IEditorProps): JSX.Element { const newHistory = ReplaceByContainer( replaceContainer.id, type, - configuration, - history, - historyCurrentStep + editorState ); 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, - history, - historyCurrentStep + editorState )); } }} @@ -193,17 +181,13 @@ export function Editor(props: IEditorProps): JSX.Element { index, type, parent, - configuration, - history, - historyCurrentStep + editorState )); }} addSymbol={(type) => { setNewHistory(AddSymbol( type, - configuration, - history, - historyCurrentStep + editorState )); }} onSymbolPropertyChange={(key, value) => { @@ -211,8 +195,7 @@ export function Editor(props: IEditorProps): JSX.Element { key, value, selectedSymbolId, - history, - historyCurrentStep + editorState )); }} selectSymbol={(symbolId) => { @@ -221,16 +204,11 @@ export function Editor(props: IEditorProps): JSX.Element { deleteSymbol={(symbolId) => { setNewHistory(DeleteSymbol( symbolId, - history, - historyCurrentStep + editorState )); }} saveEditorAsJSON={() => { - SaveEditorAsJSON( - history, - historyCurrentStep, - configuration - ); + SaveEditorAsJSON(editorState); }} saveEditorAsSVG={() => { SaveEditorAsSVG(); }} loadState={(move) => { setHistoryCurrentStep(move); }} diff --git a/src/Events/EditorEvents.ts b/src/Events/EditorEvents.ts index 7bca82a..42f2deb 100644 --- a/src/Events/EditorEvents.ts +++ b/src/Events/EditorEvents.ts @@ -43,18 +43,11 @@ export const events: IEditorEvent[] = [ export function UseCustomEvents( callbackQueue: React.RefObject, root: Element | Document, - history: IHistoryState[], - historyCurrentStep: number, - configuration: IConfiguration, + editorState: IEditorState, editorRef: React.RefObject, 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[], - historyCurrentStep: number, - configuration: IConfiguration + editorState: IEditorState ): 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, - history, - editorState.historyCurrentStep + editorState ); setNewHistory(newHistory); @@ -249,9 +232,7 @@ function AppendContainer({ parent?.children.length ?? 0, type, parentId, - editorState.configuration, - history, - editorState.historyCurrentStep + editorState ); 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.historyCurrentStep + editorState ); setNewHistory(newHistory); @@ -302,13 +279,9 @@ function AddSymbol({ name } = eventInitDict?.detail; - const history = GetCurrentHistory(editorState.history, editorState.historyCurrentStep); - const newHistory = AddSymbolAction( name, - editorState.configuration, - history, - editorState.historyCurrentStep + editorState ); setNewHistory(newHistory); @@ -331,11 +304,9 @@ function DeleteSymbol({ symbolId } = eventInitDict?.detail; - const history = GetCurrentHistory(editorState.history, editorState.historyCurrentStep); const newHistory = DeleteSymbolAction( symbolId, - history, - editorState.historyCurrentStep + editorState ); setNewHistory(newHistory); diff --git a/src/Interfaces/IEditorState.ts b/src/Interfaces/IEditorState.ts index 90d01ae..870d9a4 100644 --- a/src/Interfaces/IEditorState.ts +++ b/src/Interfaces/IEditorState.ts @@ -5,4 +5,5 @@ export interface IEditorState { history: IHistoryState[] historyCurrentStep: number configuration: IConfiguration + version: string } diff --git a/src/utils/default.ts b/src/utils/default.ts index d9c95cc..d1d11d3 100644 --- a/src/utils/default.ts +++ b/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 }; } diff --git a/src/vite-env.d.ts b/src/vite-env.d.ts index 1430cee..52a1895 100644 --- a/src/vite-env.d.ts +++ b/src/vite-env.d.ts @@ -11,3 +11,5 @@ interface ImportMetaEnv { interface ImportMeta { readonly env: ImportMetaEnv } + +declare const APP_VERSION: string; diff --git a/vite.config.ts b/vite.config.ts index 5a4dc91..d6fa774 100644 --- a/vite.config.ts +++ b/vite.config.ts @@ -6,5 +6,8 @@ export default defineConfig({ plugins: [ react() ], - base: './' + base: './', + define: { + APP_VERSION: JSON.stringify(process.env.npm_package_version) + } });