+
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}
/>
);
+
+ function Row({ index, style }: { index: number, style: React.CSSProperties }): JSX.Element {
+ const symbol = symbols[index];
+ const key = symbol.id;
+ const text = symbol.displayedText;
+ const selectedClass: string = props.selectedSymbolId !== '' &&
+ props.selectedSymbolId === symbol.id
+ ? 'border-l-4 bg-slate-400/60 hover:bg-slate-400'
+ : 'bg-slate-300/60 hover:bg-slate-300';
+
+ return (
+
+ );
+ }
}
diff --git a/src/Components/UI/UI.tsx b/src/Components/UI/UI.tsx
index f85b63c..840f1dd 100644
--- a/src/Components/UI/UI.tsx
+++ b/src/Components/UI/UI.tsx
@@ -4,26 +4,29 @@ import { History } from '../History/History';
import { Bar, BAR_WIDTH } from '../Bar/Bar';
import { Symbols } from '../Symbols/Symbols';
import { SymbolsSidebar } from '../SymbolsList/SymbolsSidebar';
-import { PropertyType } from '../../Enums/PropertyType';
+import { type PropertyType } from '../../Enums/PropertyType';
import { Messages } from '../Messages/Messages';
import { Sidebar } from '../Sidebar/Sidebar';
import { Components } from '../Components/Components';
import { Viewer } from '../Viewer/Viewer';
import { Settings } from '../Settings/Settings';
-import { IMessage } from '../../Interfaces/IMessage';
+import { type IMessage } from '../../Interfaces/IMessage';
import { DISABLE_API } from '../../utils/default';
import { UseWorker, UseAsync } from './UseWorker';
import { FindContainerById } from '../../utils/itertools';
-import { IEditorState } from '../../Interfaces/IEditorState';
+import { type IEditorState } from '../../Interfaces/IEditorState';
import { GetCurrentHistoryState } from '../Editor/Editor';
import { Text } from '../Text/Text';
+import { IReplaceContainer } from '../../Interfaces/IReplaceContainer';
+import { Dispatch } from 'react';
export interface IUIProps {
editorState: IEditorState
+ replaceContainer: IReplaceContainer
selectContainer: (containerId: string) => void
deleteContainer: (containerId: string) => void
onPropertyChange: (key: string, value: string | number | boolean | number[], type?: PropertyType) => void
- addContainer: (type: string) => void
+ addOrReplaceContainer: (type: string) => void
addContainerAt: (index: number, type: string, parent: string) => void
addSymbol: (type: string) => void
onSymbolPropertyChange: (key: string, value: string | number | boolean) => void
@@ -32,6 +35,8 @@ export interface IUIProps {
saveEditorAsJSON: () => void
saveEditorAsSVG: () => void
loadState: (move: number) => void
+ setReplaceContainer: Dispatch
>
+
}
export enum SidebarType {
@@ -59,7 +64,7 @@ function UseSetOrToggleSidebar(
};
}
-export function UI({ editorState, ...methods }: IUIProps): JSX.Element {
+export function UI({ editorState, replaceContainer, setReplaceContainer, ...methods }: IUIProps): JSX.Element {
const [selectedSidebar, setSelectedSidebar] = React.useState(SidebarType.Components);
const [messages, setMessages] = React.useState([]);
@@ -96,16 +101,19 @@ export function UI({ editorState, ...methods }: IUIProps): JSX.Element {
}
const selectedContainer = FindContainerById(current.containers, current.selectedContainerId);
+ const selectedSymbol = current.symbols.get(current.selectedSymbolId);
switch (selectedSidebar) {
case SidebarType.Components:
leftSidebarTitle = Text({ textId: '@Components' });
+
leftChildren = ;
+ buttonOnClick={methods.addOrReplaceContainer}
+ replaceContainer={replaceContainer}
+ setReplaceContainer={setReplaceContainer}/>;
rightSidebarTitle = Text({ textId: '@Elements' });
rightChildren = setOrToggleSidebar(SidebarType.ComponentsExpanded) }
+ onExpandChange={() => { setOrToggleSidebar(SidebarType.ComponentsExpanded); } }
/>;
break;
case SidebarType.ComponentsExpanded:
@@ -125,8 +133,9 @@ export function UI({ editorState, ...methods }: IUIProps): JSX.Element {
selectedContainer={selectedContainer}
componentOptions={configuration.AvailableContainers}
categories={configuration.Categories}
- buttonOnClick={methods.addContainer}
- />;
+ buttonOnClick={methods.addOrReplaceContainer}
+ replaceContainer={replaceContainer}
+ setReplaceContainer={setReplaceContainer}/>;
rightSidebarTitle = Text({ textId: '@Elements' });
rightChildren = setOrToggleSidebar(SidebarType.Components) }
+ onExpandChange={() => { setOrToggleSidebar(SidebarType.Components); } }
/>;
break;
case SidebarType.Symbols:
@@ -153,7 +162,7 @@ export function UI({ editorState, ...methods }: IUIProps): JSX.Element {
onPropertyChange={methods.onSymbolPropertyChange}
selectSymbol={methods.selectSymbol}
isExpanded ={false}
- onExpandChange={() => setOrToggleSidebar(SidebarType.SymbolsExpanded) }
+ onExpandChange={() => { setOrToggleSidebar(SidebarType.SymbolsExpanded); } }
/>;
break;
case SidebarType.SymbolsExpanded:
@@ -169,7 +178,7 @@ export function UI({ editorState, ...methods }: IUIProps): JSX.Element {
onPropertyChange={methods.onSymbolPropertyChange}
selectSymbol={methods.selectSymbol}
isExpanded ={true}
- onExpandChange={() => setOrToggleSidebar(SidebarType.Symbols)}
+ onExpandChange={() => { setOrToggleSidebar(SidebarType.Symbols); }}
/>;
break;
@@ -187,7 +196,7 @@ export function UI({ editorState, ...methods }: IUIProps): JSX.Element {
leftChildren = setMessages([])}
+ clearMessage={() => { setMessages([]); }}
/>;
break;
@@ -242,11 +251,16 @@ export function UI({ editorState, ...methods }: IUIProps): JSX.Element {
isLeftSidebarOpenClasses.add('left-sidebar-single');
}
+ const clickRestrictionsClasses = replaceContainer.isReplacing ? 'pointer-events-none opacity-50' : '';
+ const isComponentsOpen = selectedSidebar === SidebarType.Components || selectedSidebar === SidebarType.ComponentsExpanded;
+ const isSymbolsOpen = selectedSidebar === SidebarType.Symbols || selectedSidebar === SidebarType.SymbolsExpanded;
+
return (
<>
{ rightChildren }
diff --git a/src/Components/Viewer/Viewer.tsx b/src/Components/Viewer/Viewer.tsx
index cdf630e..a6092c4 100644
--- a/src/Components/Viewer/Viewer.tsx
+++ b/src/Components/Viewer/Viewer.tsx
@@ -1,23 +1,27 @@
import * as React from 'react';
-import { IContainerModel } from '../../Interfaces/IContainerModel';
-import { IHistoryState } from '../../Interfaces/IHistoryState';
-import { IPoint } from '../../Interfaces/IPoint';
+import { type IContainerModel } from '../../Interfaces/IContainerModel';
+import { type IHistoryState } from '../../Interfaces/IHistoryState';
+import { type IPoint } from '../../Interfaces/IPoint';
import { DIMENSION_MARGIN, USE_EXPERIMENTAL_CANVAS_API } from '../../utils/default';
import { FindContainerById, MakeRecursionDFSIterator } from '../../utils/itertools';
import { BAR_WIDTH } from '../Bar/Bar';
import { Canvas } from '../Canvas/Canvas';
import { AddDimensions } from '../Canvas/DimensionLayer';
import { RenderSelector } from '../Canvas/Selector';
-import { SVG } from '../SVG/SVG';
+import { SelectorMode, SVG } from '../SVG/SVG';
import { RenderSymbol } from '../Canvas/Symbol';
import { useState } from 'react';
+import { type ISymbolModel } from '../../Interfaces/ISymbolModel';
interface IViewerProps {
- className?: string
+ className: string
current: IHistoryState
selectedContainer: IContainerModel | undefined
selectContainer: (containerId: string) => void
+ selectedSymbol: ISymbolModel | undefined
margin: number
+ isComponentsOpen: boolean
+ isSymbolsOpen: boolean
}
export function Viewer({
@@ -25,7 +29,10 @@ export function Viewer({
current,
selectedContainer,
selectContainer,
- margin
+ selectedSymbol,
+ margin,
+ isComponentsOpen,
+ isSymbolsOpen
}: IViewerProps): JSX.Element {
function computeWidth(margin: number): number {
return window.innerWidth - (window.innerWidth < 768 ? BAR_WIDTH : margin);
@@ -64,6 +71,13 @@ export function Viewer({
return <>;
}
+ let selectorMode = SelectorMode.Nothing;
+ if (isComponentsOpen) {
+ selectorMode = SelectorMode.Containers;
+ } else if (isSymbolsOpen) {
+ selectorMode = SelectorMode.Symbols;
+ }
+
if (USE_EXPERIMENTAL_CANVAS_API) {
function Draw(ctx: CanvasRenderingContext2D, frameCount: number, scale: number, translatePos: IPoint): void {
if (mainContainer === undefined) {
@@ -119,7 +133,7 @@ export function Viewer({
return (
@@ -134,11 +148,12 @@ export function Viewer({
width={mainContainer.properties.width}
height={mainContainer.properties.height}
containers={current.containers}
- selected={selectedContainer}
+ selectedContainer={selectedContainer}
symbols={current.symbols}
+ selectedSymbol={selectedSymbol}
+ selectorMode={selectorMode}
selectContainer={selectContainer}
>
-
{mainContainer}
);
diff --git a/src/Enums/PropertyType.ts b/src/Enums/PropertyType.ts
index edd78ff..f57d2b9 100644
--- a/src/Enums/PropertyType.ts
+++ b/src/Enums/PropertyType.ts
@@ -27,6 +27,6 @@ export enum PropertyType {
SelfMarginDimension,
ChildrenDimensions,
DimensionWithMarks,
- DimensionOptions
+ DimensionOptions
}
diff --git a/src/Interfaces/IAvailableContainer.ts b/src/Interfaces/IAvailableContainer.ts
index dab4e59..d655ab2 100644
--- a/src/Interfaces/IAvailableContainer.ts
+++ b/src/Interfaces/IAvailableContainer.ts
@@ -1,12 +1,12 @@
/* eslint-disable @typescript-eslint/naming-convention */
-import { AddMethod } from '../Enums/AddMethod';
-import { PositionReference } from '../Enums/PositionReference';
-import { IAction } from './IAction';
-import { IMargin } from './IMargin';
-import { Orientation } from '../Enums/Orientation';
-import { IKeyValue } from './IKeyValue';
-import { IStyle } from './IStyle';
-import { IDimensions } from './IDimensions';
+import { type AddMethod } from '../Enums/AddMethod';
+import { type PositionReference } from '../Enums/PositionReference';
+import { type IAction } from './IAction';
+import { type IMargin } from './IMargin';
+import { type Orientation } from '../Enums/Orientation';
+import { type IKeyValue } from './IKeyValue';
+import { type IStyle } from './IStyle';
+import { type IDimensions } from './IDimensions';
/** Model of available container used in application configuration */
export interface IAvailableContainer {
diff --git a/src/Interfaces/IDimensionOptions.ts b/src/Interfaces/IDimensionOptions.ts
index 4c44adf..a12865a 100644
--- a/src/Interfaces/IDimensionOptions.ts
+++ b/src/Interfaces/IDimensionOptions.ts
@@ -1,10 +1,17 @@
-import { Position } from '../Enums/Position';
+import { type Position } from '../Enums/Position';
export interface IDimensionOptions {
positions: Position[]
+
/**
- * Stroke color
- */
- color: string
+ * Stroke color
+ */
+ color?: string
+
+ /** stroke-width */
+ width?: number
+
+ /** stroke-dasharray */
+ dashArray?: string
}
diff --git a/src/Interfaces/IReplaceContainer.ts b/src/Interfaces/IReplaceContainer.ts
new file mode 100644
index 0000000..c1c8a71
--- /dev/null
+++ b/src/Interfaces/IReplaceContainer.ts
@@ -0,0 +1,5 @@
+export interface IReplaceContainer {
+ id: string | undefined
+ isReplacing: boolean
+ category: string | undefined
+}
diff --git a/src/Interfaces/ISymbolModel.ts b/src/Interfaces/ISymbolModel.ts
index 3a71290..ca0604b 100644
--- a/src/Interfaces/ISymbolModel.ts
+++ b/src/Interfaces/ISymbolModel.ts
@@ -1,4 +1,4 @@
-import { IAvailableSymbol } from './IAvailableSymbol';
+import { type IAvailableSymbol } from './IAvailableSymbol';
export interface ISymbolModel {
/** Identifier */
diff --git a/src/Translations/translation.en.json b/src/Translations/translation.en.json
index b9d78ed..65d7410 100644
--- a/src/Translations/translation.en.json
+++ b/src/Translations/translation.en.json
@@ -59,11 +59,14 @@
"@ContainerAlignmentInput": "Alignment",
"@ContainerAlignWithSymbol": "Align to symbol",
"@ContainerDimensions": "Dimensions",
- "@ContainerShowDimension": "Show Dimension",
- "@ContainerShowChildrenDimension": "Show surrounding dimension of children",
+ "@ContainerShowDimension": "Show dimensions",
+ "@ContainerShowChildrenDimension": "Show surrounding dimensions of children",
"@ContainerMarkPosition": "Mark the position for the parents",
- "@ContainerShowDimensionWithMarks": "Show dimension with marked children",
+ "@ContainerShowDimensionWithMarks": "Show dimensions with marked children",
+ "@ContainerShowMarginsDimension": "Show margins dimensions",
"@ContainerStyle": "Style",
+ "@StyleStrokeColor": "Stroke Color",
+ "@StyleStrokeDashArray": "Stroke Dash Array",
"@StyleStroke": "Stroke",
"@StyleStrokeOpacity": "Stroke Opacity",
"@StyleStrokeWidth": "Stroke Width",
diff --git a/src/Translations/translation.fr.json b/src/Translations/translation.fr.json
index 3d71f2c..3d2ce91 100644
--- a/src/Translations/translation.fr.json
+++ b/src/Translations/translation.fr.json
@@ -63,7 +63,10 @@
"@ContainerShowChildrenDimension": "Afficher les cotations englobante des enfants",
"@ContainerMarkPosition": "Marquer la position pour les parents",
"@ContainerShowDimensionWithMarks": "Afficher les cotations avec les enfants marqués",
+ "@ContainerShowMarginsDimension": "Afficher les cotations des marges",
"@ContainerStyle": "Style",
+ "@StyleStrokeColor": "Couleur du tracé",
+ "@StyleStrokeDashArray": "Tableau de traits",
"@StyleStroke": "Tracé",
"@StyleStrokeOpacity": "Opacité du tracé",
"@StyleStrokeWidth": "Epaisseur du tracé",
diff --git a/src/utils/default.ts b/src/utils/default.ts
index 632c12a..5977edd 100644
--- a/src/utils/default.ts
+++ b/src/utils/default.ts
@@ -1,13 +1,14 @@
import { PositionReference } from '../Enums/PositionReference';
-import { IAvailableContainer } from '../Interfaces/IAvailableContainer';
-import { IAvailableSymbol } from '../Interfaces/IAvailableSymbol';
-import { IConfiguration } from '../Interfaces/IConfiguration';
-import { ContainerModel, IContainerModel } from '../Interfaces/IContainerModel';
-import { IContainerProperties } from '../Interfaces/IContainerProperties';
-import { IEditorState } from '../Interfaces/IEditorState';
-import { ISymbolModel } from '../Interfaces/ISymbolModel';
+import { type IAvailableContainer } from '../Interfaces/IAvailableContainer';
+import { type IAvailableSymbol } from '../Interfaces/IAvailableSymbol';
+import { type IConfiguration } from '../Interfaces/IConfiguration';
+import { ContainerModel, type IContainerModel } from '../Interfaces/IContainerModel';
+import { type IContainerProperties } from '../Interfaces/IContainerProperties';
+import { type IEditorState } from '../Interfaces/IEditorState';
+import { type ISymbolModel } from '../Interfaces/ISymbolModel';
import { Orientation } from '../Enums/Orientation';
import { AppState } from '../Enums/AppState';
+import { type IDimensionOptions } from '../Interfaces/IDimensionOptions';
/// EDITOR DEFAULTS ///
@@ -65,7 +66,6 @@ export const SHOW_SELF_DIMENSIONS = true;
export const SHOW_SELF_MARGINS_DIMENSIONS = true;
export const SHOW_CHILDREN_DIMENSIONS = true;
export const SHOW_BORROWER_DIMENSIONS = true;
-export const SHOW_DIMENSIONS_PER_DEPTH = false;
export const DIMENSION_MARGIN = 50;
export const SYMBOL_MARGIN = 25;
export const NOTCHES_LENGTH = 10;
@@ -187,6 +187,12 @@ const DEFAULT_CONTAINER_STYLE = {
strokeWidth: 2
};
+export const DEFAULT_DIMENSION_OPTION: IDimensionOptions = {
+ positions: [],
+ color: '#000000',
+ width: 2
+};
+
/**
* Default Main container properties
*/
@@ -211,23 +217,11 @@ export const DEFAULT_MAINCONTAINER_PROPS: IContainerProperties = {
positionReference: PositionReference.TopLeft,
hideChildrenInTreeview: false,
dimensionOptions: {
- childrenDimensions: {
- color: '#000000',
- positions: []
- },
- selfDimensions: {
- color: '#000000',
- positions: []
- },
- selfMarginsDimensions: {
- color: '#000000',
- positions: []
- },
+ childrenDimensions: clone(DEFAULT_DIMENSION_OPTION),
+ selfDimensions: clone(DEFAULT_DIMENSION_OPTION),
+ selfMarginsDimensions: clone(DEFAULT_DIMENSION_OPTION),
markPosition: [],
- dimensionWithMarks: {
- color: '#000000',
- positions: []
- }
+ dimensionWithMarks: clone(DEFAULT_DIMENSION_OPTION)
},
warning: '',
style: DEFAULT_CONTAINER_STYLE
@@ -276,20 +270,20 @@ export function GetDefaultContainerProps(type: string,
hideChildrenInTreeview: containerConfig.HideChildrenInTreeview ?? false,
dimensionOptions: {
childrenDimensions: {
- color: containerConfig.DimensionOptions?.childrenDimensions.color ?? '#000000',
+ ...containerConfig.DimensionOptions?.selfDimensions,
positions: containerConfig.DimensionOptions?.childrenDimensions.positions ?? []
},
selfDimensions: {
- color: containerConfig.DimensionOptions?.selfDimensions.color ?? '#000000',
+ ...containerConfig.DimensionOptions?.selfDimensions,
positions: containerConfig.DimensionOptions?.selfDimensions.positions ?? []
},
selfMarginsDimensions: {
- color: containerConfig.DimensionOptions?.selfMarginsDimensions.color ?? '#000000',
+ ...containerConfig.DimensionOptions?.selfMarginsDimensions,
positions: containerConfig.DimensionOptions?.selfMarginsDimensions.positions ?? []
},
markPosition: containerConfig.DimensionOptions?.markPosition ?? [],
dimensionWithMarks: {
- color: containerConfig.DimensionOptions?.dimensionWithMarks.color ?? '#000000',
+ ...containerConfig.DimensionOptions?.dimensionWithMarks,
positions: containerConfig.DimensionOptions?.dimensionWithMarks.positions ?? []
}
},
@@ -317,3 +311,10 @@ export function GetDefaultSymbolModel(name: string,
showDimension: false
};
}
+
+/**
+ * Macro function for JSON.parse(JSON.stringify(obj))
+ */
+function clone(object: T): T {
+ return JSON.parse(JSON.stringify(object));
+}