From 66ea3b1b648f205a4b3bf14c5f6e3961d75d90d3 Mon Sep 17 00:00:00 2001 From: Eric Nguyen Date: Mon, 22 Aug 2022 14:37:25 +0000 Subject: [PATCH] Merged PR 163: Remove the static form + rename some components for clarity The static form is hard to maintain so I am removing it + rename some components for clarity + moved some utils files --- docs/ComponentStructure.drawio | 4 +- src/Components/App/{ => Actions}/Load.ts | 4 +- .../App/{ => Actions}/MenuActions.ts | 10 +- src/Components/App/App.tsx | 4 +- .../ContainerForm.tsx} | 7 +- .../ContainerProperties.test.tsx} | 5 +- .../ContainerProperties.tsx} | 19 +- .../{ => Actions}/ContainerOperations.ts | 120 ++++++++-- src/Components/Editor/{ => Actions}/Save.ts | 10 +- .../Editor/{ => Actions}/Shortcuts.ts | 4 +- .../Editor/{ => Actions}/SymbolOperations.ts | 18 +- src/Components/Editor/Editor.tsx | 17 +- src/Components/Editor/PropertiesOperations.ts | 223 ------------------ .../ElementsSidebar/ElementsSidebar.test.tsx | 5 - .../ElementsSidebar/ElementsSidebar.tsx | 4 +- src/Components/Properties/Form.tsx | 27 --- src/Components/Properties/StaticForm.tsx | 159 ------------- src/Components/SymbolProperties/Form.tsx | 17 -- .../{DynamicForm.tsx => SymbolForm.tsx} | 6 +- .../SymbolProperties/SymbolProperties.tsx | 8 +- src/Components/UI/UI.tsx | 2 - 21 files changed, 150 insertions(+), 523 deletions(-) rename src/Components/App/{ => Actions}/Load.ts (72%) rename src/Components/App/{ => Actions}/MenuActions.ts (85%) rename src/Components/{Properties/DynamicForm.tsx => ContainerProperties/ContainerForm.tsx} (97%) rename src/Components/{Properties/Properties.test.tsx => ContainerProperties/ContainerProperties.test.tsx} (96%) rename src/Components/{Properties/Properties.tsx => ContainerProperties/ContainerProperties.tsx} (54%) rename src/Components/Editor/{ => Actions}/ContainerOperations.ts (73%) rename src/Components/Editor/{ => Actions}/Save.ts (90%) rename src/Components/Editor/{ => Actions}/Shortcuts.ts (84%) rename src/Components/Editor/{ => Actions}/SymbolOperations.ts (91%) delete mode 100644 src/Components/Editor/PropertiesOperations.ts delete mode 100644 src/Components/Properties/Form.tsx delete mode 100644 src/Components/Properties/StaticForm.tsx delete mode 100644 src/Components/SymbolProperties/Form.tsx rename src/Components/SymbolProperties/{DynamicForm.tsx => SymbolForm.tsx} (92%) diff --git a/docs/ComponentStructure.drawio b/docs/ComponentStructure.drawio index e4ee4af..547eb5c 100644 --- a/docs/ComponentStructure.drawio +++ b/docs/ComponentStructure.drawio @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:b8156818d0348ba0edefc52d6ed8fc84b65305c7eca275a37d3ff1733391bb1d -size 19858 +oid sha256:52c70be0c74420ab5f591a2edd380399f4c163816dd871f137ac762ac4d25b2e +size 24103 diff --git a/src/Components/App/Load.ts b/src/Components/App/Actions/Load.ts similarity index 72% rename from src/Components/App/Load.ts rename to src/Components/App/Actions/Load.ts index 909dfc9..3905b19 100644 --- a/src/Components/App/Load.ts +++ b/src/Components/App/Actions/Load.ts @@ -1,6 +1,6 @@ import { Dispatch, SetStateAction } from 'react'; -import { Revive } from '../../utils/saveload'; -import { IEditorState } from '../../Interfaces/IEditorState'; +import { IEditorState } from '../../../Interfaces/IEditorState'; +import { Revive } from '../../../utils/saveload'; export function LoadState( editorState: IEditorState, diff --git a/src/Components/App/MenuActions.ts b/src/Components/App/Actions/MenuActions.ts similarity index 85% rename from src/Components/App/MenuActions.ts rename to src/Components/App/Actions/MenuActions.ts index 4c0c8aa..46bb2e1 100644 --- a/src/Components/App/MenuActions.ts +++ b/src/Components/App/Actions/MenuActions.ts @@ -1,10 +1,10 @@ import { Dispatch, SetStateAction } from 'react'; -import { IConfiguration } from '../../Interfaces/IConfiguration'; -import { ContainerModel } from '../../Interfaces/IContainerModel'; -import { fetchConfiguration } from '../API/api'; -import { IEditorState } from '../../Interfaces/IEditorState'; +import { IConfiguration } from '../../../Interfaces/IConfiguration'; +import { ContainerModel } from '../../../Interfaces/IContainerModel'; +import { fetchConfiguration } from '../../API/api'; +import { IEditorState } from '../../../Interfaces/IEditorState'; import { LoadState } from './Load'; -import { DEFAULT_MAINCONTAINER_PROPS } from '../../utils/default'; +import { DEFAULT_MAINCONTAINER_PROPS } from '../../../utils/default'; export function NewEditor( setEditorState: Dispatch>, diff --git a/src/Components/App/App.tsx b/src/Components/App/App.tsx index 1041814..a77f8cb 100644 --- a/src/Components/App/App.tsx +++ b/src/Components/App/App.tsx @@ -4,8 +4,8 @@ import { MainMenu } from '../MainMenu/MainMenu'; import { ContainerModel } from '../../Interfaces/IContainerModel'; import Editor from '../Editor/Editor'; import { IEditorState } from '../../Interfaces/IEditorState'; -import { LoadState } from './Load'; -import { LoadEditor, NewEditor } from './MenuActions'; +import { LoadState } from './Actions/Load'; +import { LoadEditor, NewEditor } from './Actions/MenuActions'; import { DEFAULT_CONFIG, DEFAULT_MAINCONTAINER_PROPS } from '../../utils/default'; // App will never have props diff --git a/src/Components/Properties/DynamicForm.tsx b/src/Components/ContainerProperties/ContainerForm.tsx similarity index 97% rename from src/Components/Properties/DynamicForm.tsx rename to src/Components/ContainerProperties/ContainerForm.tsx index be59200..61a1a9f 100644 --- a/src/Components/Properties/DynamicForm.tsx +++ b/src/Components/ContainerProperties/ContainerForm.tsx @@ -8,7 +8,7 @@ import { InputGroup } from '../InputGroup/InputGroup'; import { RadioGroupButtons } from '../RadioGroupButtons/RadioGroupButtons'; import { Select } from '../Select/Select'; -interface IDynamicFormProps { +interface IContainerFormProps { properties: IContainerProperties symbols: Map onChange: (key: string, value: string | number | boolean, isStyle?: boolean) => void @@ -34,7 +34,7 @@ const getCSSInputs = ( return groupInput; }; -const DynamicForm: React.FunctionComponent = (props) => { +const ContainerForm: React.FunctionComponent = (props) => { return (
= (props) => { ); }; - -export default DynamicForm; +export default ContainerForm; diff --git a/src/Components/Properties/Properties.test.tsx b/src/Components/ContainerProperties/ContainerProperties.test.tsx similarity index 96% rename from src/Components/Properties/Properties.test.tsx rename to src/Components/ContainerProperties/ContainerProperties.test.tsx index 426f21a..f4835b1 100644 --- a/src/Components/Properties/Properties.test.tsx +++ b/src/Components/ContainerProperties/ContainerProperties.test.tsx @@ -3,14 +3,13 @@ import * as React from 'react'; import { expect, describe, it, vi } from 'vitest'; import { XPositionReference } from '../../Enums/XPositionReference'; import IContainerProperties from '../../Interfaces/IContainerProperties'; -import { Properties } from './Properties'; +import { Properties } from './ContainerProperties'; describe.concurrent('Properties', () => { it('No properties', () => { render( {}} - onSubmit={() => {}} symbols={new Map()} />); @@ -43,7 +42,6 @@ describe.concurrent('Properties', () => { const { container, rerender } = render( {}} symbols={new Map()} />); @@ -78,7 +76,6 @@ describe.concurrent('Properties', () => { rerender( {}} symbols={new Map()} />); diff --git a/src/Components/Properties/Properties.tsx b/src/Components/ContainerProperties/ContainerProperties.tsx similarity index 54% rename from src/Components/Properties/Properties.tsx rename to src/Components/ContainerProperties/ContainerProperties.tsx index a643535..357c900 100644 --- a/src/Components/Properties/Properties.tsx +++ b/src/Components/ContainerProperties/ContainerProperties.tsx @@ -1,38 +1,25 @@ -import React, { useState } from 'react'; +import React from 'react'; import IContainerProperties from '../../Interfaces/IContainerProperties'; import { ISymbolModel } from '../../Interfaces/ISymbolModel'; -import { ToggleButton } from '../ToggleButton/ToggleButton'; -import { Form } from './Form'; +import ContainerForm from './ContainerForm'; interface IPropertiesProps { properties?: IContainerProperties symbols: Map onChange: (key: string, value: string | number | boolean, isStyle?: boolean) => void - onSubmit: (event: React.FormEvent) => void } export const Properties: React.FC = (props: IPropertiesProps) => { - const [isDynamicInput, setIsDynamicInput] = useState(true); - if (props.properties === undefined) { return
; } return (
- setIsDynamicInput(!isDynamicInput)} - /> -
); diff --git a/src/Components/Editor/ContainerOperations.ts b/src/Components/Editor/Actions/ContainerOperations.ts similarity index 73% rename from src/Components/Editor/ContainerOperations.ts rename to src/Components/Editor/Actions/ContainerOperations.ts index 018c39d..691a12d 100644 --- a/src/Components/Editor/ContainerOperations.ts +++ b/src/Components/Editor/Actions/ContainerOperations.ts @@ -1,14 +1,14 @@ import { Dispatch, SetStateAction } from 'react'; -import { IHistoryState } from '../../Interfaces/IHistoryState'; -import { IConfiguration } from '../../Interfaces/IConfiguration'; -import { ContainerModel, IContainerModel } from '../../Interfaces/IContainerModel'; -import { findContainerById, MakeIterator } from '../../utils/itertools'; -import { getCurrentHistory, UpdateCounters } from './Editor'; -import { AddMethod } from '../../Enums/AddMethod'; -import { IAvailableContainer } from '../../Interfaces/IAvailableContainer'; -import { GetDefaultContainerProps, DEFAULTCHILDTYPE_ALLOW_CYCLIC, DEFAULTCHILDTYPE_MAX_DEPTH } from '../../utils/default'; -import { ApplyBehaviors } from './Behaviors/Behaviors'; -import { ISymbolModel } from '../../Interfaces/ISymbolModel'; +import { IHistoryState } from '../../../Interfaces/IHistoryState'; +import { IConfiguration } from '../../../Interfaces/IConfiguration'; +import { ContainerModel, IContainerModel } from '../../../Interfaces/IContainerModel'; +import { findContainerById, MakeIterator } from '../../../utils/itertools'; +import { getCurrentHistory, UpdateCounters } from '../Editor'; +import { AddMethod } from '../../../Enums/AddMethod'; +import { IAvailableContainer } from '../../../Interfaces/IAvailableContainer'; +import { GetDefaultContainerProps, DEFAULTCHILDTYPE_ALLOW_CYCLIC, DEFAULTCHILDTYPE_MAX_DEPTH } from '../../../utils/default'; +import { ApplyBehaviors } from '../Behaviors/Behaviors'; +import { ISymbolModel } from '../../../Interfaces/ISymbolModel'; /** * Select a container @@ -71,7 +71,8 @@ export function DeleteContainer( if (container === null || container === undefined) { throw new Error('[DeleteContainer] Container model was not found among children of the main container!'); } - const newSymbols = structuredClone(current.Symbols) + + const newSymbols = structuredClone(current.Symbols); UnlinkSymbol(newSymbols, container); const index = container.parent.children.indexOf(container); @@ -83,10 +84,12 @@ export function DeleteContainer( // Select the previous container // or select the one above - const SelectedContainer = findContainerById(mainContainerClone, current.SelectedContainerId) ?? - container.parent.children.at(index - 1) ?? - container.parent; - const SelectedContainerId = SelectedContainer.properties.id; + const SelectedContainerId = GetSelectedContainerOnDelete( + mainContainerClone, + current.SelectedContainerId, + container.parent, + index + ); history.push({ LastAction: `Delete ${containerId}`, @@ -100,6 +103,14 @@ export function DeleteContainer( setHistoryCurrentStep(history.length - 1); } +function GetSelectedContainerOnDelete(mainContainerClone: IContainerModel, selectedContainerId: string, parent: IContainerModel, index: number): string { + const SelectedContainer = findContainerById(mainContainerClone, selectedContainerId) ?? + parent.children.at(index - 1) ?? + parent; + const SelectedContainerId = SelectedContainer.properties.id; + return SelectedContainerId; +} + function UnlinkSymbol(symbols: Map, container: IContainerModel): void { const it = MakeIterator(container); for (const child of it) { @@ -327,3 +338,82 @@ function ApplyAddMethod(index: number, containerConfig: IAvailableContainer, par } return x; } + +/** + * Handled the property change event in the properties form + * @param key Property name + * @param value New value of the property + * @returns void + */ +export function OnPropertyChange( + key: string, + value: string | number | boolean, + isStyle: boolean = false, + selected: IContainerModel | undefined, + fullHistory: IHistoryState[], + historyCurrentStep: number, + setHistory: Dispatch>, + setHistoryCurrentStep: Dispatch> +): void { + const history = getCurrentHistory(fullHistory, historyCurrentStep); + const current = history[history.length - 1]; + + if (selected === null || + selected === undefined) { + throw new Error('[OnPropertyChange] Property was changed before selecting a Container'); + } + + const mainContainerClone: IContainerModel = structuredClone(current.MainContainer); + const container: ContainerModel | undefined = findContainerById(mainContainerClone, selected.properties.id); + + if (container === null || container === undefined) { + throw new Error('[OnPropertyChange] Container model was not found among children of the main container!'); + } + + const oldSymbolId = container.properties.linkedSymbolId; + + if (isStyle) { + (container.properties.style as any)[key] = value; + } else { + (container.properties as any)[key] = value; + } + + LinkSymbol( + container.properties.id, + oldSymbolId, + container.properties.linkedSymbolId, + current.Symbols + ); + + ApplyBehaviors(container, current.Symbols); + + history.push({ + LastAction: `Change ${key} of ${container.properties.id}`, + MainContainer: mainContainerClone, + SelectedContainerId: container.properties.id, + TypeCounters: Object.assign({}, current.TypeCounters), + Symbols: structuredClone(current.Symbols), + SelectedSymbolId: current.SelectedSymbolId + }); + setHistory(history); + setHistoryCurrentStep(history.length - 1); +} + +function LinkSymbol( + containerId: string, + oldSymbolId: string, + newSymbolId: string, + symbols: Map +): void { + const oldSymbol = symbols.get(oldSymbolId); + const newSymbol = symbols.get(newSymbolId); + + if (newSymbol === undefined) { + if (oldSymbol !== undefined) { + oldSymbol.linkedContainers.delete(containerId); + } + return; + } + + newSymbol.linkedContainers.add(containerId); +} diff --git a/src/Components/Editor/Save.ts b/src/Components/Editor/Actions/Save.ts similarity index 90% rename from src/Components/Editor/Save.ts rename to src/Components/Editor/Actions/Save.ts index 0b355b7..101f95c 100644 --- a/src/Components/Editor/Save.ts +++ b/src/Components/Editor/Actions/Save.ts @@ -1,8 +1,8 @@ -import { IHistoryState } from '../../Interfaces/IHistoryState'; -import { IConfiguration } from '../../Interfaces/IConfiguration'; -import { getCircularReplacer } from '../../utils/saveload'; -import { ID } from '../SVG/SVG'; -import { IEditorState } from '../../Interfaces/IEditorState'; +import { IHistoryState } from '../../../Interfaces/IHistoryState'; +import { IConfiguration } from '../../../Interfaces/IConfiguration'; +import { getCircularReplacer } from '../../../utils/saveload'; +import { ID } from '../../SVG/SVG'; +import { IEditorState } from '../../../Interfaces/IEditorState'; export function SaveEditorAsJSON( history: IHistoryState[], diff --git a/src/Components/Editor/Shortcuts.ts b/src/Components/Editor/Actions/Shortcuts.ts similarity index 84% rename from src/Components/Editor/Shortcuts.ts rename to src/Components/Editor/Actions/Shortcuts.ts index f7d7b5b..12dd597 100644 --- a/src/Components/Editor/Shortcuts.ts +++ b/src/Components/Editor/Actions/Shortcuts.ts @@ -1,6 +1,6 @@ import { Dispatch, SetStateAction } from 'react'; -import { IHistoryState } from '../../Interfaces/IHistoryState'; -import { ENABLE_SHORTCUTS } from '../../utils/default'; +import { IHistoryState } from '../../../Interfaces/IHistoryState'; +import { ENABLE_SHORTCUTS } from '../../../utils/default'; export function onKeyDown( event: KeyboardEvent, diff --git a/src/Components/Editor/SymbolOperations.ts b/src/Components/Editor/Actions/SymbolOperations.ts similarity index 91% rename from src/Components/Editor/SymbolOperations.ts rename to src/Components/Editor/Actions/SymbolOperations.ts index 01844ab..aeb6119 100644 --- a/src/Components/Editor/SymbolOperations.ts +++ b/src/Components/Editor/Actions/SymbolOperations.ts @@ -1,13 +1,13 @@ import { Dispatch, SetStateAction } from 'react'; -import { IConfiguration } from '../../Interfaces/IConfiguration'; -import { IContainerModel } from '../../Interfaces/IContainerModel'; -import { IHistoryState } from '../../Interfaces/IHistoryState'; -import { ISymbolModel } from '../../Interfaces/ISymbolModel'; -import { DEFAULT_SYMBOL_HEIGHT, DEFAULT_SYMBOL_WIDTH } from '../../utils/default'; -import { findContainerById } from '../../utils/itertools'; -import { restoreX } from '../../utils/svg'; -import { ApplyBehaviors } from './Behaviors/Behaviors'; -import { getCurrentHistory, UpdateCounters } from './Editor'; +import { IConfiguration } from '../../../Interfaces/IConfiguration'; +import { IContainerModel } from '../../../Interfaces/IContainerModel'; +import { IHistoryState } from '../../../Interfaces/IHistoryState'; +import { ISymbolModel } from '../../../Interfaces/ISymbolModel'; +import { DEFAULT_SYMBOL_HEIGHT, DEFAULT_SYMBOL_WIDTH } from '../../../utils/default'; +import { findContainerById } from '../../../utils/itertools'; +import { restoreX } from '../../../utils/svg'; +import { ApplyBehaviors } from '../Behaviors/Behaviors'; +import { getCurrentHistory, UpdateCounters } from '../Editor'; export function AddSymbol( name: string, diff --git a/src/Components/Editor/Editor.tsx b/src/Components/Editor/Editor.tsx index f7df902..aed34ab 100644 --- a/src/Components/Editor/Editor.tsx +++ b/src/Components/Editor/Editor.tsx @@ -4,14 +4,13 @@ import { IConfiguration } from '../../Interfaces/IConfiguration'; import { SVG } from '../SVG/SVG'; import { IHistoryState } from '../../Interfaces/IHistoryState'; import { UI } from '../UI/UI'; -import { SelectContainer, DeleteContainer, AddContainerToSelectedContainer, AddContainer } from './ContainerOperations'; -import { SaveEditorAsJSON, SaveEditorAsSVG } from './Save'; -import { onKeyDown } from './Shortcuts'; -import { OnPropertyChange, OnPropertiesSubmit } from './PropertiesOperations'; +import { SelectContainer, DeleteContainer, AddContainerToSelectedContainer, AddContainer, OnPropertyChange } from './Actions/ContainerOperations'; +import { SaveEditorAsJSON, SaveEditorAsSVG } from './Actions/Save'; +import { onKeyDown } from './Actions/Shortcuts'; import EditorEvents from '../../Events/EditorEvents'; import { IEditorState } from '../../Interfaces/IEditorState'; import { MAX_HISTORY } from '../../utils/default'; -import { AddSymbol, OnPropertyChange as OnSymbolPropertyChange, DeleteSymbol, SelectSymbol } from './SymbolOperations'; +import { AddSymbol, OnPropertyChange as OnSymbolPropertyChange, DeleteSymbol, SelectSymbol } from './Actions/SymbolOperations'; import { findContainerById } from '../../utils/itertools'; interface IEditorProps { @@ -113,14 +112,6 @@ const Editor: React.FunctionComponent = (props) => { setHistory, setHistoryCurrentStep )} - OnPropertiesSubmit={(event) => OnPropertiesSubmit( - event, - selected, - history, - historyCurrentStep, - setHistory, - setHistoryCurrentStep - )} AddContainerToSelectedContainer={(type) => AddContainerToSelectedContainer( type, selected, diff --git a/src/Components/Editor/PropertiesOperations.ts b/src/Components/Editor/PropertiesOperations.ts deleted file mode 100644 index d939213..0000000 --- a/src/Components/Editor/PropertiesOperations.ts +++ /dev/null @@ -1,223 +0,0 @@ -import { Dispatch, SetStateAction } from 'react'; -import { IContainerModel, ContainerModel } from '../../Interfaces/IContainerModel'; -import { IHistoryState } from '../../Interfaces/IHistoryState'; -import { findContainerById } from '../../utils/itertools'; -import { getCurrentHistory } from './Editor'; -import { ApplyBehaviors } from './Behaviors/Behaviors'; -import { restoreX } from '../../utils/svg'; -import { ISymbolModel } from '../../Interfaces/ISymbolModel'; - -/** - * Handled the property change event in the properties form - * @param key Property name - * @param value New value of the property - * @returns void - */ -export function OnPropertyChange( - key: string, - value: string | number | boolean, - isStyle: boolean = false, - selected: IContainerModel | undefined, - fullHistory: IHistoryState[], - historyCurrentStep: number, - setHistory: Dispatch>, - setHistoryCurrentStep: Dispatch> -): void { - const history = getCurrentHistory(fullHistory, historyCurrentStep); - const current = history[history.length - 1]; - - if (selected === null || - selected === undefined) { - throw new Error('[OnPropertyChange] Property was changed before selecting a Container'); - } - - const mainContainerClone: IContainerModel = structuredClone(current.MainContainer); - const container: ContainerModel | undefined = findContainerById(mainContainerClone, selected.properties.id); - - if (container === null || container === undefined) { - throw new Error('[OnPropertyChange] Container model was not found among children of the main container!'); - } - - const oldSymbolId = container.properties.linkedSymbolId; - - if (isStyle) { - (container.properties.style as any)[key] = value; - } else { - (container.properties as any)[key] = value; - } - - LinkSymbol( - container.properties.id, - oldSymbolId, - container.properties.linkedSymbolId, - current.Symbols - ); - - ApplyBehaviors(container, current.Symbols); - - history.push({ - LastAction: `Change ${key} of ${container.properties.id}`, - MainContainer: mainContainerClone, - SelectedContainerId: container.properties.id, - TypeCounters: Object.assign({}, current.TypeCounters), - Symbols: structuredClone(current.Symbols), - SelectedSymbolId: current.SelectedSymbolId - }); - setHistory(history); - setHistoryCurrentStep(history.length - 1); -} - -function LinkSymbol( - containerId: string, - oldSymbolId: string, - newSymbolId: string, - symbols: Map -): void { - const oldSymbol = symbols.get(oldSymbolId); - const newSymbol = symbols.get(newSymbolId); - - if (newSymbol === undefined) { - if (oldSymbol !== undefined) { - oldSymbol.linkedContainers.delete(containerId); - } - return; - } - - newSymbol.linkedContainers.add(containerId); -} - -/** - * Handled the property change event in the properties form - * @param key Property name - * @param properties Properties of the selected container - * @returns void - */ -export function OnPropertiesSubmit( - event: React.SyntheticEvent, - selected: IContainerModel | undefined, - fullHistory: IHistoryState[], - historyCurrentStep: number, - setHistory: Dispatch>, - setHistoryCurrentStep: Dispatch> -): void { - event.preventDefault(); - const history = getCurrentHistory(fullHistory, historyCurrentStep); - const current = history[history.length - 1]; - - if (selected === null || - selected === undefined) { - throw new Error('[OnPropertyChange] Property was changed before selecting a Container'); - } - - const mainContainerClone: IContainerModel = structuredClone(current.MainContainer); - const container: ContainerModel | undefined = findContainerById(mainContainerClone, selected.properties.id); - - if (container === null || container === undefined) { - throw new Error('[OnPropertyChange] Container model was not found among children of the main container!'); - } - - // Assign container properties - const form: HTMLFormElement = event.target as HTMLFormElement; - for (const property in container.properties) { - const input: HTMLInputElement | HTMLDivElement | null = form.querySelector(`#${property}`); - - if (input === null) { - continue; - } - - if (input instanceof HTMLInputElement) { - submitHTMLInput(input, container, property, form); - continue; - } - - if (input instanceof HTMLDivElement) { - submitRadioButtons(input, container, property); - continue; - } - } - - // Assign cssproperties - for (const styleProperty in container.properties.style) { - submitCSSForm(form, styleProperty, container); - } - - // Apply the behaviors - ApplyBehaviors(container, current.Symbols); - - history.push({ - LastAction: `Change properties of ${container.properties.id}`, - MainContainer: mainContainerClone, - SelectedContainerId: container.properties.id, - TypeCounters: Object.assign({}, current.TypeCounters), - Symbols: structuredClone(current.Symbols), - SelectedSymbolId: current.SelectedSymbolId - }); - setHistory(history); - setHistoryCurrentStep(history.length - 1); -} - -const submitHTMLInput = ( - input: HTMLInputElement, - container: IContainerModel, - property: string, - form: HTMLFormElement -): void => { - if (input.type !== 'number') { - (container.properties as any)[property] = input.value; - return; - } - - if (property === 'x') { - // Hardcoded fix for XPositionReference - const x = RestoreX(form, input); - (container.properties as any)[property] = x; - return; - } - - (container.properties as any)[property] = Number(input.value); -}; - -const submitCSSForm = (form: HTMLFormElement, styleProperty: string, container: ContainerModel): void => { - const input: HTMLInputElement | null = form.querySelector(`#${styleProperty}`); - if (input === null) { - return; - } - (container.properties.style as any)[styleProperty] = input.value; -}; - -const RestoreX = ( - form: HTMLFormElement, - input: HTMLInputElement -): number => { - const inputWidth: HTMLInputElement | null = form.querySelector('#width'); - const inputRadio: HTMLDivElement | null = form.querySelector('#XPositionReference'); - if (inputWidth === null || inputRadio === null) { - throw new Error('[OnPropertiesSubmit] Missing inputs for width or XPositionReference'); - } - - const radiobutton: HTMLInputElement | null = inputRadio.querySelector('input[name="XPositionReference"]:checked'); - if (radiobutton === null) { - throw new Error('[OnPropertiesSubmit] Missing inputs for XPositionReference'); - } - - return restoreX(Number(input.value), Number(inputWidth.value), Number(radiobutton.value)); -}; - -const submitRadioButtons = ( - div: HTMLDivElement, - container: IContainerModel, - property: string -): void => { - const radiobutton: HTMLInputElement | null = div.querySelector(`input[name="${property}"]:checked`); - if (radiobutton === null) { - return; - } - - if (radiobutton.type === 'radio') { - (container.properties as any)[property] = Number(radiobutton.value); - return; - } - - (container.properties as any)[property] = radiobutton.value; -}; - diff --git a/src/Components/ElementsSidebar/ElementsSidebar.test.tsx b/src/Components/ElementsSidebar/ElementsSidebar.test.tsx index 8badea7..c7d19b2 100644 --- a/src/Components/ElementsSidebar/ElementsSidebar.test.tsx +++ b/src/Components/ElementsSidebar/ElementsSidebar.test.tsx @@ -33,7 +33,6 @@ describe.concurrent('Elements sidebar', () => { isHistoryOpen={false} SelectedContainer={undefined} OnPropertyChange={() => {}} - OnPropertiesSubmit={() => {}} SelectContainer={() => {}} DeleteContainer={() => {}} AddContainer={() => {}} @@ -72,7 +71,6 @@ describe.concurrent('Elements sidebar', () => { isHistoryOpen={false} SelectedContainer={MainContainer} OnPropertyChange={() => {}} - OnPropertiesSubmit={() => {}} SelectContainer={() => {}} DeleteContainer={() => {}} AddContainer={() => {}} @@ -178,7 +176,6 @@ describe.concurrent('Elements sidebar', () => { isHistoryOpen={false} SelectedContainer={MainContainer} OnPropertyChange={() => {}} - OnPropertiesSubmit={() => {}} SelectContainer={() => {}} DeleteContainer={() => {}} AddContainer={() => {}} @@ -246,7 +243,6 @@ describe.concurrent('Elements sidebar', () => { isHistoryOpen={false} SelectedContainer={SelectedContainer} OnPropertyChange={() => {}} - OnPropertiesSubmit={() => {}} SelectContainer={selectContainer} DeleteContainer={() => {}} AddContainer={() => {}} @@ -271,7 +267,6 @@ describe.concurrent('Elements sidebar', () => { isHistoryOpen={false} SelectedContainer={SelectedContainer} OnPropertyChange={() => {}} - OnPropertiesSubmit={() => {}} SelectContainer={selectContainer} DeleteContainer={() => {}} AddContainer={() => {}} diff --git a/src/Components/ElementsSidebar/ElementsSidebar.tsx b/src/Components/ElementsSidebar/ElementsSidebar.tsx index 40da1f9..bade0d9 100644 --- a/src/Components/ElementsSidebar/ElementsSidebar.tsx +++ b/src/Components/ElementsSidebar/ElementsSidebar.tsx @@ -1,6 +1,6 @@ import * as React from 'react'; import { FixedSizeList as List } from 'react-window'; -import { Properties } from '../Properties/Properties'; +import { Properties } from '../ContainerProperties/ContainerProperties'; import { IContainerModel } from '../../Interfaces/IContainerModel'; import { getDepth, MakeIterator } from '../../utils/itertools'; import { Menu } from '../Menu/Menu'; @@ -16,7 +16,6 @@ interface IElementsSidebarProps { isHistoryOpen: boolean SelectedContainer: IContainerModel | undefined OnPropertyChange: (key: string, value: string | number | boolean, isStyle?: boolean) => void - OnPropertiesSubmit: (event: React.FormEvent) => void SelectContainer: (containerId: string) => void DeleteContainer: (containerid: string) => void AddContainer: (index: number, type: string, parent: string) => void @@ -144,7 +143,6 @@ export const ElementsSidebar: React.FC = (props: IElement properties={props.SelectedContainer?.properties} symbols={props.symbols} onChange={props.OnPropertyChange} - onSubmit={props.OnPropertiesSubmit} />
); diff --git a/src/Components/Properties/Form.tsx b/src/Components/Properties/Form.tsx deleted file mode 100644 index 34da049..0000000 --- a/src/Components/Properties/Form.tsx +++ /dev/null @@ -1,27 +0,0 @@ -import * as React from 'react'; -import IContainerProperties from '../../Interfaces/IContainerProperties'; -import { ISymbolModel } from '../../Interfaces/ISymbolModel'; -import DynamicForm from './DynamicForm'; -import StaticForm from './StaticForm'; - -interface IFormProps { - properties: IContainerProperties - symbols: Map - isDynamicInput: boolean - onChange: (key: string, value: string | number | boolean, isStyle?: boolean) => void - onSubmit: (event: React.FormEvent) => void -} - -export const Form: React.FunctionComponent = (props) => { - if (props.isDynamicInput) { - return ; - } - return ; -}; diff --git a/src/Components/Properties/StaticForm.tsx b/src/Components/Properties/StaticForm.tsx deleted file mode 100644 index a2f7c89..0000000 --- a/src/Components/Properties/StaticForm.tsx +++ /dev/null @@ -1,159 +0,0 @@ -import { MenuAlt2Icon, MenuIcon, MenuAlt3Icon } from '@heroicons/react/outline'; -import * as React from 'react'; -import { XPositionReference } from '../../Enums/XPositionReference'; -import IContainerProperties from '../../Interfaces/IContainerProperties'; -import { transformX } from '../../utils/svg'; -import { InputGroup } from '../InputGroup/InputGroup'; -import { RadioGroupButtons } from '../RadioGroupButtons/RadioGroupButtons'; - -interface IStaticFormProps { - properties: IContainerProperties - onSubmit: (event: React.FormEvent) => void -} - -const getCSSInputs = (properties: IContainerProperties): JSX.Element[] => { - const groupInput: JSX.Element[] = []; - for (const key in properties.style) { - groupInput.push(); - } - return groupInput; -}; - -const StaticForm: React.FunctionComponent = (props) => { - return ( props.onSubmit(event)} - > - -
- - - - - - - - - - - - -
- ), - value: XPositionReference.Left.toString() - }, - { - text: ( -
- -
- ), - value: XPositionReference.Center.toString() - }, - { - text: ( -
- -
- ), - value: XPositionReference.Right.toString() - } - ]} - /> - { getCSSInputs(props.properties) } - - ); -}; - -export default StaticForm; diff --git a/src/Components/SymbolProperties/Form.tsx b/src/Components/SymbolProperties/Form.tsx deleted file mode 100644 index a70c7dc..0000000 --- a/src/Components/SymbolProperties/Form.tsx +++ /dev/null @@ -1,17 +0,0 @@ -import * as React from 'react'; -import { ISymbolModel } from '../../Interfaces/ISymbolModel'; -import DynamicForm from './DynamicForm'; - -interface IFormProps { - symbol: ISymbolModel - symbols: Map - onChange: (key: string, value: string | number | boolean, isStyle?: boolean) => void -} - -export const Form: React.FunctionComponent = (props) => { - return ; -}; diff --git a/src/Components/SymbolProperties/DynamicForm.tsx b/src/Components/SymbolProperties/SymbolForm.tsx similarity index 92% rename from src/Components/SymbolProperties/DynamicForm.tsx rename to src/Components/SymbolProperties/SymbolForm.tsx index 8e969b5..01182d8 100644 --- a/src/Components/SymbolProperties/DynamicForm.tsx +++ b/src/Components/SymbolProperties/SymbolForm.tsx @@ -3,12 +3,12 @@ import { ISymbolModel } from '../../Interfaces/ISymbolModel'; import { restoreX, transformX } from '../../utils/svg'; import { InputGroup } from '../InputGroup/InputGroup'; -interface IDynamicFormProps { +interface ISymbolFormProps { symbol: ISymbolModel symbols: Map onChange: (key: string, value: string | number | boolean) => void } -const DynamicForm: React.FunctionComponent = (props) => { +const SymbolForm: React.FunctionComponent = (props) => { return (
= (props) => { ); }; -export default DynamicForm; +export default SymbolForm; diff --git a/src/Components/SymbolProperties/SymbolProperties.tsx b/src/Components/SymbolProperties/SymbolProperties.tsx index b58e3cf..5e65206 100644 --- a/src/Components/SymbolProperties/SymbolProperties.tsx +++ b/src/Components/SymbolProperties/SymbolProperties.tsx @@ -1,8 +1,6 @@ -import React, { useState } from 'react'; -import IContainerProperties from '../../Interfaces/IContainerProperties'; +import React from 'react'; import { ISymbolModel } from '../../Interfaces/ISymbolModel'; -import { ToggleButton } from '../ToggleButton/ToggleButton'; -import { Form } from './Form'; +import SymbolForm from './SymbolForm'; interface ISymbolPropertiesProps { symbol?: ISymbolModel @@ -17,7 +15,7 @@ export const SymbolProperties: React.FC = (props: ISymbo return (
-
void DeleteContainer: (containerId: string) => void OnPropertyChange: (key: string, value: string | number | boolean, isStyle?: boolean) => void - OnPropertiesSubmit: (event: React.FormEvent) => void AddContainerToSelectedContainer: (type: string) => void AddContainer: (index: number, type: string, parentId: string) => void AddSymbol: (type: string) => void @@ -90,7 +89,6 @@ export const UI: React.FunctionComponent = (props: IUIProps) => { isOpen={isSidebarOpen} isHistoryOpen={isHistoryOpen} OnPropertyChange={props.OnPropertyChange} - OnPropertiesSubmit={props.OnPropertiesSubmit} SelectContainer={props.SelectContainer} DeleteContainer={props.DeleteContainer} AddContainer={props.AddContainer}