props.onChange('isAnchor', event.target.checked)}/>
+ onChange={(event) => { props.onChange('isAnchor', event.target.checked); }}/>
@@ -334,7 +338,7 @@ export function ContainerForm(props: IContainerFormProps): JSX.Element {
value: symbol.id
}))}
value={props.properties.linkedSymbolId ?? ''}
- onChange={(event) => props.onChange('linkedSymbolId', event.target.value)}/>
+ onChange={(event) => { props.onChange('linkedSymbolId', event.target.value); }}/>
@@ -347,168 +351,244 @@ export function ContainerForm(props: IContainerFormProps): JSX.Element {
{
SHOW_SELF_DIMENSIONS &&
-
-
props.onChange(key, value, PropertyType.SelfDimension)}
- />
- props.onChange('color', e.target.value, PropertyType.SelfDimension)}/>
-
+
+
{ props.onChange(key, value, PropertyType.SelfDimension); }}
+ />
+ { props.onChange('color', e.target.value, PropertyType.SelfDimension); }}/>
+ { props.onChange('width', Number(value), PropertyType.SelfDimension); }}/>
+ { props.onChange('dashArray', value, PropertyType.SelfDimension); }}/>
+
}
{
SHOW_SELF_MARGINS_DIMENSIONS &&
-
-
props.onChange(key, value, PropertyType.SelfMarginDimension)}
- />
- props.onChange('color', e.target.value, PropertyType.SelfMarginDimension)}/>
-
+
+
{ props.onChange(key, value, PropertyType.SelfMarginDimension); }}
+ />
+ { props.onChange('color', e.target.value, PropertyType.SelfMarginDimension); }}/>
+ { props.onChange('width', Number(value), PropertyType.SelfMarginDimension); }}/>
+ { props.onChange('dashArray', value, PropertyType.SelfMarginDimension); }}/>
+
}
{
SHOW_CHILDREN_DIMENSIONS &&
-
-
props.onChange(key, value, PropertyType.ChildrenDimensions)}
- />
- props.onChange('color', e.target.value, PropertyType.ChildrenDimensions)}/>
-
+
+
{ props.onChange(key, value, PropertyType.ChildrenDimensions); }}
+ />
+ { props.onChange('color', e.target.value, PropertyType.ChildrenDimensions); }}/>
+ { props.onChange('width', Number(value), PropertyType.ChildrenDimensions); }}/>
+ { props.onChange('dashArray', value, PropertyType.ChildrenDimensions); }}/>
+
}
{
SHOW_BORROWER_DIMENSIONS &&
- <>
-
- props.onChange(key, value, PropertyType.DimensionOptions)}
- />
-
-
-
props.onChange(key, value, PropertyType.DimensionWithMarks)}
- />
- props.onChange('color', e.target.value, PropertyType.DimensionWithMarks)}/>
-
-
+ <>
+
+ { props.onChange(key, value, PropertyType.DimensionOptions); }}
+ />
+
+
+
{ props.onChange(key, value, PropertyType.DimensionWithMarks); }}
+ />
+ { props.onChange('color', e.target.value, PropertyType.DimensionWithMarks); }}/>
+ { props.onChange('width', Number(value), PropertyType.DimensionWithMarks); }}/>
+ { props.onChange('dashArray', value, PropertyType.DimensionWithMarks); }}/>
+
+
}
- props.onChange('stroke', value, PropertyType.Style)}
- />
- props.onChange('strokeOpacity', Number(event.target.value), PropertyType.Style)}
- />
- props.onChange('strokeWidth', Number(value), PropertyType.Style)}
- />
- props.onChange('fill', value, PropertyType.Style)}
- />
- props.onChange('fillOpacity', Number(event.target.value), PropertyType.Style)}
- />
-
-
+
+
+ { props.onChange('stroke', value, PropertyType.Style); }}
+ />
+ { props.onChange('strokeOpacity', Number(event.target.value), PropertyType.Style); }}
+ />
+ { props.onChange('strokeWidth', Number(value), PropertyType.Style); }}
+ />
+ { props.onChange('fill', value, PropertyType.Style); }}
+ />
+ { props.onChange('fillOpacity', Number(event.target.value), PropertyType.Style); }}
+ />
+
+
}
);
diff --git a/src/Components/ContainerProperties/ContainerProperties.test.tsx b/src/Components/ContainerProperties/ContainerProperties.test.tsx
index cd2da15..01c36bd 100644
--- a/src/Components/ContainerProperties/ContainerProperties.test.tsx
+++ b/src/Components/ContainerProperties/ContainerProperties.test.tsx
@@ -5,6 +5,7 @@ import { PositionReference } from '../../Enums/PositionReference';
import { IContainerProperties } from '../../Interfaces/IContainerProperties';
import { Orientation } from '../../Enums/Orientation';
import { ContainerProperties } from './ContainerProperties';
+import { DEFAULT_DIMENSION_OPTION } from '../../utils/default';
describe.concurrent('Properties', () => {
it('No properties', () => {
@@ -43,23 +44,11 @@ describe.concurrent('Properties', () => {
warning: '',
hideChildrenInTreeview: false,
dimensionOptions: {
- childrenDimensions: {
- color: '#000000',
- positions: []
- },
- selfDimensions: {
- color: '#000000',
- positions: []
- },
- selfMarginsDimensions: {
- color: '#000000',
- positions: []
- },
+ childrenDimensions: DEFAULT_DIMENSION_OPTION,
+ selfDimensions: DEFAULT_DIMENSION_OPTION,
+ selfMarginsDimensions: DEFAULT_DIMENSION_OPTION,
markPosition: [],
- dimensionWithMarks: {
- color: '#000000',
- positions: []
- }
+ dimensionWithMarks: DEFAULT_DIMENSION_OPTION
}
};
diff --git a/src/Components/Editor/Actions/ContainerOperations.ts b/src/Components/Editor/Actions/ContainerOperations.ts
index 82162e3..684b443 100644
--- a/src/Components/Editor/Actions/ContainerOperations.ts
+++ b/src/Components/Editor/Actions/ContainerOperations.ts
@@ -8,6 +8,8 @@ import Swal from 'sweetalert2';
import { PropertyType } from '../../../Enums/PropertyType';
import { TransformX, TransformY } from '../../../utils/svg';
import { Orientation } from '../../../Enums/Orientation';
+import { AddContainers } from './AddContainer';
+import { IConfiguration } from '../../../Interfaces/IConfiguration';
/**
* Select a container
@@ -133,6 +135,58 @@ export function DeleteContainer(
return history;
}
+/**
+ * Replace a container
+ * @param containerId containerId of the container to delete
+ * @param newContainerId
+ * @param configuration
+ * @param fullHistory History of the editor
+ * @param historyCurrentStep Current step
+ * @returns New history
+ */
+export function ReplaceByContainer(
+ containerId: string,
+ newContainerId: string,
+ configuration: IConfiguration,
+ fullHistory: IHistoryState[],
+ historyCurrentStep: number
+): IHistoryState[] {
+ const history = GetCurrentHistory(fullHistory, historyCurrentStep);
+ const current = history[history.length - 1];
+
+ const containerToReplace = FindContainerById(current.containers, containerId);
+ if (containerToReplace === undefined) {
+ return history;
+ }
+
+ const containerParent = FindContainerById(current.containers, containerToReplace.properties.parentId);
+ if (containerParent === undefined) {
+ return history;
+ }
+
+ const historyAdd = AddContainers(
+ containerParent.children.indexOf(containerId),
+ [{ Type: newContainerId }],
+ containerParent.properties.id,
+ configuration, fullHistory, historyCurrentStep
+ );
+
+ const historyDelete = DeleteContainer(containerId, historyAdd.history, historyCurrentStep + 1);
+ const currentDelete = historyDelete[historyDelete.length - 1];
+
+ fullHistory.push({
+ lastAction: `Replace ${containerId} by ${newContainerId}`,
+ mainContainer: currentDelete.mainContainer,
+ containers: currentDelete.containers,
+ selectedContainerId: currentDelete.selectedContainerId,
+ typeCounters: Object.assign({}, currentDelete.typeCounters),
+ symbols: current.symbols,
+ selectedSymbolId: current.selectedSymbolId
+ });
+
+ return fullHistory;
+}
+
/**
* Returns the next container that will be selected
* after the selectedContainer is removed.
diff --git a/src/Components/Editor/Actions/ContextMenuActions.ts b/src/Components/Editor/Actions/ContextMenuActions.ts
index 69a3121..9fb86f4 100644
--- a/src/Components/Editor/Actions/ContextMenuActions.ts
+++ b/src/Components/Editor/Actions/ContextMenuActions.ts
@@ -16,6 +16,7 @@ import { AddContainers } from './AddContainer';
import { DeleteContainer } from './ContainerOperations';
import { DeleteSymbol } from './SymbolOperations';
import { Text } from '../../Text/Text';
+import { IReplaceContainer } from '../../../Interfaces/IReplaceContainer';
export function InitActions(
menuActions: Map,
@@ -23,7 +24,8 @@ export function InitActions(
history: IHistoryState[],
historyCurrentStep: number,
setNewHistory: (newHistory: IHistoryState[]) => void,
- setHistoryCurrentStep: Dispatch>
+ setHistoryCurrentStep: Dispatch>,
+ setIsReplacingContainer: Dispatch>
): void {
menuActions.set(
'',
@@ -56,9 +58,24 @@ export function InitActions(
menuActions.set(
'elements-sidebar-row',
[{
+ text: Text({ textId: '@ReplaceByContainer' }),
+ title: Text({ textId: '@ReplaceByContainerTitle' }),
+ shortcut: 'R',
+ action: (target: HTMLElement) => {
+ const targetContainer = FindContainerById(history[historyCurrentStep].containers, target.id);
+ const targetAvailableContainer = configuration.AvailableContainers.find((availableContainer) => availableContainer.Type === targetContainer?.properties.type);
+
+ if (targetAvailableContainer === undefined) {
+ return;
+ }
+
+ setIsReplacingContainer({ isReplacing: true, id: target.id, category: targetAvailableContainer.Category });
+ }
+ }, {
text: Text({ textId: '@DeleteContainer' }),
title: Text({ textId: '@DeleteContainerTitle' }),
shortcut: 'Suppr',
+
action: (target: HTMLElement) => {
const id = target.id;
const newHistory = DeleteContainer(
diff --git a/src/Components/Editor/Actions/Save.ts b/src/Components/Editor/Actions/Save.ts
index ae7b4e9..2dc2f95 100644
--- a/src/Components/Editor/Actions/Save.ts
+++ b/src/Components/Editor/Actions/Save.ts
@@ -53,6 +53,7 @@ export function SaveEditorAsSVG(): void {
svg.replaceChildren(...mainSvg);
// remove the selector
+ // TODO: Fix this with SelectorMode != Nothing or with some html magic
const group = svg.children[svg.children.length - 1];
group.removeChild(group.children[group.children.length - 1]);
if (SHOW_SELECTOR_TEXT) {
diff --git a/src/Components/Editor/Actions/Shortcuts.ts b/src/Components/Editor/Actions/Shortcuts.ts
index a81660c..082770e 100644
--- a/src/Components/Editor/Actions/Shortcuts.ts
+++ b/src/Components/Editor/Actions/Shortcuts.ts
@@ -7,7 +7,8 @@ export function OnKey(
history: IHistoryState[],
historyCurrentStep: number,
setHistoryCurrentStep: Dispatch>,
- deleteAction: () => void
+ deleteAction: () => void,
+ resetState: () => void
): void {
if (!ENABLE_SHORTCUTS) {
return;
@@ -27,5 +28,7 @@ export function OnKey(
setHistoryCurrentStep(historyCurrentStep + 1);
} else if (event.key === 'Delete') {
deleteAction();
+ } else if (event.key === 'Escape') {
+ resetState();
}
}
diff --git a/src/Components/Editor/Editor.tsx b/src/Components/Editor/Editor.tsx
index 372ab06..095f644 100644
--- a/src/Components/Editor/Editor.tsx
+++ b/src/Components/Editor/Editor.tsx
@@ -1,9 +1,9 @@
-import React, { Dispatch, SetStateAction, useEffect, useRef } from 'react';
+import React, { type Dispatch, type SetStateAction, useEffect, useRef } from 'react';
import './Editor.scss';
-import { IConfiguration } from '../../Interfaces/IConfiguration';
-import { IHistoryState } from '../../Interfaces/IHistoryState';
+import { type IConfiguration } from '../../Interfaces/IConfiguration';
+import { type IHistoryState } from '../../Interfaces/IHistoryState';
import { UI } from '../UI/UI';
-import { SelectContainer, DeleteContainer, OnPropertyChange } from './Actions/ContainerOperations';
+import { SelectContainer, DeleteContainer, OnPropertyChange, ReplaceByContainer } from './Actions/ContainerOperations';
import { SaveEditorAsJSON, SaveEditorAsSVG } from './Actions/Save';
import { OnKey } from './Actions/Shortcuts';
import { UseCustomEvents, UseEditorListener } from '../../Events/EditorEvents';
@@ -13,6 +13,7 @@ import { FindContainerById } from '../../utils/itertools';
import { Menu } from '../Menu/Menu';
import { InitActions } from './Actions/ContextMenuActions';
import { AddContainerToSelectedContainer, AddContainer } from './Actions/AddContainer';
+import { type IReplaceContainer } from '../../Interfaces/IReplaceContainer';
interface IEditorProps {
root: Element | Document
@@ -25,16 +26,18 @@ function UseShortcuts(
history: IHistoryState[],
historyCurrentStep: number,
setHistoryCurrentStep: Dispatch>,
- deleteAction: () => void
+ deleteAction: () => void,
+ resetState: () => void
): void {
useEffect(() => {
function OnKeyUp(event: KeyboardEvent): void {
- return OnKey(
+ OnKey(
event,
history,
historyCurrentStep,
setHistoryCurrentStep,
- deleteAction
+ deleteAction,
+ resetState
);
}
@@ -62,13 +65,20 @@ 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 [replaceContainer, setReplaceContainer] = React.useState({ isReplacing: false, id: undefined, category: undefined });
+
const editorRef = useRef(null);
const setNewHistory = UseNewHistoryState(setHistory, setHistoryCurrentStep);
+ function ResetState(): void {
+ setReplaceContainer({ isReplacing: false, id: undefined, category: undefined });
+ }
+
// Events
UseShortcuts(
history,
@@ -79,7 +89,8 @@ export function Editor(props: IEditorProps): JSX.Element {
setNewHistory(
DeleteContainer(current.selectedContainerId, history, historyCurrentStep)
);
- }
+ },
+ ResetState
);
UseCustomEvents(
props.root,
@@ -104,7 +115,8 @@ export function Editor(props: IEditorProps): JSX.Element {
history,
historyCurrentStep,
setNewHistory,
- setHistoryCurrentStep
+ setHistoryCurrentStep,
+ setReplaceContainer
);
// Render
@@ -113,87 +125,118 @@ export function Editor(props: IEditorProps): JSX.Element {
const selected = FindContainerById(current.containers, current.selectedContainerId);
return (
-
+
setNewHistory(
- SelectContainer(
- container,
- history,
- historyCurrentStep
- ))}
- deleteContainer={(containerId: string) => setNewHistory(
- DeleteContainer(
- containerId,
- history,
- historyCurrentStep
- ))}
- onPropertyChange={(key, value, type) => setNewHistory(
- OnPropertyChange(
- key, value, type,
- selected,
- history,
- historyCurrentStep
- ))}
- addContainer={(type) => {
+ replaceContainer={replaceContainer}
+ selectContainer={(container) => {
+ setNewHistory(
+ SelectContainer(
+ container,
+ history,
+ historyCurrentStep
+ ));
+ }}
+ deleteContainer={(containerId: string) => {
+ setNewHistory(
+ DeleteContainer(
+ containerId,
+ history,
+ historyCurrentStep
+ ));
+ }}
+ onPropertyChange={(key, value, type) => {
+ setNewHistory(
+ OnPropertyChange(
+ key, value, type,
+ selected,
+ history,
+ historyCurrentStep
+ ));
+ }}
+ addOrReplaceContainer={(type) => {
if (selected === null || selected === undefined) {
return;
}
-
- setNewHistory(AddContainerToSelectedContainer(
- type,
- selected,
- configuration,
- history,
- historyCurrentStep
- ));
+ if (replaceContainer.isReplacing && replaceContainer.id !== undefined) {
+ const newHistory = ReplaceByContainer(
+ replaceContainer.id,
+ type,
+ configuration,
+ history,
+ historyCurrentStep
+ );
+ setReplaceContainer({ isReplacing: false, id: undefined, category: undefined });
+ setNewHistory(newHistory);
+ } else {
+ setNewHistory(AddContainerToSelectedContainer(
+ type,
+ selected,
+ configuration,
+ history,
+ historyCurrentStep
+ ));
+ }
}}
- addContainerAt={(index, type, parent) => setNewHistory(
- AddContainer(
- index,
- type,
- parent,
- configuration,
+ addContainerAt={(index, type, parent) => {
+ setNewHistory(
+ AddContainer(
+ index,
+ type,
+ parent,
+ configuration,
+ history,
+ historyCurrentStep
+ )
+ );
+ }}
+ addSymbol={(type) => {
+ setNewHistory(
+ AddSymbol(
+ type,
+ configuration,
+ history,
+ historyCurrentStep
+ ));
+ }}
+ onSymbolPropertyChange={(key, value) => {
+ setNewHistory(
+ OnSymbolPropertyChange(
+ key, value,
+ history,
+ historyCurrentStep
+ ));
+ }}
+ selectSymbol={(symbolId) => {
+ setNewHistory(
+ SelectSymbol(
+ symbolId,
+ history,
+ historyCurrentStep
+ ));
+ }}
+ deleteSymbol={(symbolId) => {
+ setNewHistory(
+ DeleteSymbol(
+ symbolId,
+ history,
+ historyCurrentStep
+ ));
+ }}
+ saveEditorAsJSON={() => {
+ SaveEditorAsJSON(
history,
- historyCurrentStep
- )
- )}
- addSymbol={(type) => setNewHistory(
- AddSymbol(
- type,
- configuration,
- history,
- historyCurrentStep
- ))}
- onSymbolPropertyChange={(key, value) => setNewHistory(
- OnSymbolPropertyChange(
- key, value,
- history,
- historyCurrentStep
- ))}
- selectSymbol={(symbolId) => setNewHistory(
- SelectSymbol(
- symbolId,
- history,
- historyCurrentStep
- ))}
- deleteSymbol={(symbolId) => setNewHistory(
- DeleteSymbol(
- symbolId,
- history,
- historyCurrentStep
- ))}
- saveEditorAsJSON={() => SaveEditorAsJSON(
- history,
- historyCurrentStep,
- configuration
- )}
- saveEditorAsSVG={() => SaveEditorAsSVG()}
- loadState={(move) => setHistoryCurrentStep(move)}
+ historyCurrentStep,
+ configuration
+ );
+ }}
+ saveEditorAsSVG={() => { SaveEditorAsSVG(); }}
+ loadState={(move) => { setHistoryCurrentStep(move); }}
+ setReplaceContainer={setReplaceContainer}
/>