diff --git a/.eslintrc.cjs b/.eslintrc.cjs index 33736e7..b72be75 100644 --- a/.eslintrc.cjs +++ b/.eslintrc.cjs @@ -17,7 +17,6 @@ module.exports = { project: './tsconfig.json' }, plugins: [ - 'only-warn', 'react', '@typescript-eslint' ], diff --git a/package.json b/package.json index 1c45135..148f302 100644 --- a/package.json +++ b/package.json @@ -37,7 +37,6 @@ "eslint-config-standard-with-typescript": "^22.0.0", "eslint-plugin-import": "^2.26.0", "eslint-plugin-n": "^15.2.4", - "eslint-plugin-only-warn": "^1.0.3", "eslint-plugin-promise": "^6.0.0", "eslint-plugin-react": "^7.30.1", "jsdom": "^20.0.0", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 10ead3b..f9bce2d 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -19,7 +19,6 @@ specifiers: eslint-config-standard-with-typescript: ^22.0.0 eslint-plugin-import: ^2.26.0 eslint-plugin-n: ^15.2.4 - eslint-plugin-only-warn: ^1.0.3 eslint-plugin-promise: ^6.0.0 eslint-plugin-react: ^7.30.1 framer-motion: ^6.5.1 @@ -59,7 +58,6 @@ devDependencies: eslint-config-standard-with-typescript: 22.0.0_mfupvx5msz6are6ggwiepter3m eslint-plugin-import: 2.26.0_wuikv5nqgdfyng42xxm7lklfmi eslint-plugin-n: 15.2.4_eslint@8.21.0 - eslint-plugin-only-warn: 1.0.3 eslint-plugin-promise: 6.0.0_eslint@8.21.0 eslint-plugin-react: 7.30.1_eslint@8.21.0 jsdom: 20.0.0 @@ -1726,11 +1724,6 @@ packages: semver: 7.3.7 dev: true - /eslint-plugin-only-warn/1.0.3: - resolution: {integrity: sha512-XQOX/TfLoLw6h8ky51d29uUjXRTQHqBGXPylDEmy5fe/w7LIOnp8MA24b1OSMEn9BQoKow1q3g1kLe5/9uBTvw==} - engines: {node: '>=6'} - dev: true - /eslint-plugin-promise/6.0.0_eslint@8.21.0: resolution: {integrity: sha512-7GPezalm5Bfi/E22PnQxDWH2iW9GTvAlUNTztemeHb6c1BniSyoeTrM87JkC0wYdi6aQrZX9p2qEiAno8aTcbw==} engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0} diff --git a/src/Components/App/App.tsx b/src/Components/App/App.tsx index c25c37e..fa725cf 100644 --- a/src/Components/App/App.tsx +++ b/src/Components/App/App.tsx @@ -23,7 +23,6 @@ export const App: React.FunctionComponent = (props) => { const [editorState, setEditorState] = useState({ configuration: DEFAULT_CONFIG, history: [{ - LastAction: '', MainContainer: defaultMainContainer, SelectedContainer: defaultMainContainer, SelectedContainerId: defaultMainContainer.properties.id, @@ -41,16 +40,14 @@ export const App: React.FunctionComponent = (props) => { return; } - if (!isLoaded) { - fetch(state) - .then( - async(response) => await response.json(), - (error) => { throw new Error(error); } - ) - .then((data: IEditorState) => { - LoadState(data, setEditorState, setLoaded); - }, (error) => { throw new Error(error); }); - } + fetch(state) + .then( + async(response) => await response.json(), + (error) => { throw new Error(error); } + ) + .then((data: IEditorState) => { + LoadState(data, setEditorState, setLoaded); + }, (error) => { throw new Error(error); }); }); if (isLoaded) { diff --git a/src/Components/App/MenuActions.ts b/src/Components/App/MenuActions.ts index 2669c1a..ce0cd7d 100644 --- a/src/Components/App/MenuActions.ts +++ b/src/Components/App/MenuActions.ts @@ -22,7 +22,6 @@ export function NewEditor( y: 0, width: configuration.MainContainer.Width, height: configuration.MainContainer.Height, - isRigidBody: false, fillOpacity: 0, stroke: 'black' } @@ -35,7 +34,6 @@ export function NewEditor( history: [ { - LastAction: '', MainContainer, SelectedContainer: MainContainer, SelectedContainerId: MainContainer.properties.id, diff --git a/src/Components/Editor/ContainerOperations.ts b/src/Components/Editor/ContainerOperations.ts index ea4db42..d9bdea5 100644 --- a/src/Components/Editor/ContainerOperations.ts +++ b/src/Components/Editor/ContainerOperations.ts @@ -1,10 +1,9 @@ import { Dispatch, SetStateAction } from 'react'; -import { HistoryState } from '../../Interfaces/HistoryState'; +import { HistoryState } from "../../Interfaces/HistoryState"; import { Configuration } from '../../Interfaces/Configuration'; import { ContainerModel, IContainerModel } from '../../Interfaces/ContainerModel'; import { findContainerById } from '../../utils/itertools'; import { getCurrentHistory } from './Editor'; -import { SizePointer } from '../../Interfaces/SizePointer'; /** * Select a container @@ -20,19 +19,22 @@ export function SelectContainer( const history = getCurrentHistory(fullHistory, historyCurrentStep); const current = history[history.length - 1]; - const mainContainerClone = structuredClone(current.MainContainer); - const selectedContainer = findContainerById(mainContainerClone, container.properties.id); + if (current.MainContainer === null) { + throw new Error('[SelectContainer] Tried to select a container while there is no main container!'); + } - if (selectedContainer === undefined) { + const mainContainerClone = structuredClone(current.MainContainer); + const SelectedContainer = findContainerById(mainContainerClone, container.properties.id); + + if (SelectedContainer === undefined) { throw new Error('[SelectContainer] Cannot find container among children of main container!'); } setHistory(history.concat([{ - LastAction: `Select container ${selectedContainer.properties.id}`, MainContainer: mainContainerClone, - SelectedContainer: selectedContainer, - SelectedContainerId: selectedContainer.properties.id, - TypeCounters: Object.assign({}, current.TypeCounters) + TypeCounters: Object.assign({}, current.TypeCounters), + SelectedContainer, + SelectedContainerId: SelectedContainer.properties.id }])); setHistoryCurrentStep(history.length); } @@ -47,6 +49,10 @@ export function DeleteContainer( const history = getCurrentHistory(fullHistory, historyCurrentStep); const current = history[historyCurrentStep]; + if (current.MainContainer === null) { + throw new Error('[DeleteContainer] Error: Tried to delete a container without a main container'); + } + const mainContainerClone: IContainerModel = structuredClone(current.MainContainer); const container = findContainerById(mainContainerClone, containerId); @@ -56,7 +62,7 @@ export function DeleteContainer( if (container === mainContainerClone) { // TODO: Implement alert - throw new Error('[DeleteContainer] Tried to delete the main container! Deleting the main container is not allowed!'); + throw new Error('[DeleteContainer] Tried to delete the main container! Deleting the main container is not allowed !'); } if (container === null || container === undefined) { @@ -71,10 +77,9 @@ export function DeleteContainer( } setHistory(history.concat([{ - LastAction: `Delete container ${containerId}`, - MainContainer: mainContainerClone, SelectedContainer: null, SelectedContainerId: '', + MainContainer: mainContainerClone, TypeCounters: Object.assign({}, current.TypeCounters) }])); setHistoryCurrentStep(history.length); @@ -163,7 +168,7 @@ export function AddContainer( } let x = 0; - if (index > 0) { + if (index !== 0) { const lastChild: IContainerModel | undefined = parentClone.children.at(index - 1); if (lastChild !== undefined) { x = lastChild.properties.x + Number(lastChild.properties.width); @@ -180,7 +185,6 @@ export function AddContainer( y: 0, width: properties?.Width, height: parentClone.properties.height, - isRigidBody: false, ...properties.Style }, [], @@ -198,11 +202,10 @@ export function AddContainer( // Update the state setHistory(history.concat([{ - LastAction: 'Add container', MainContainer: clone, + TypeCounters: newCounters, SelectedContainer: parentClone, - SelectedContainerId: parentClone.properties.id, - TypeCounters: newCounters + SelectedContainerId: parentClone.properties.id }])); setHistoryCurrentStep(history.length); } @@ -215,7 +218,7 @@ export function AddContainer( */ export function OnPropertyChange( key: string, - value: string | number | boolean, + value: string | number, fullHistory: HistoryState[], historyCurrentStep: number, setHistory: Dispatch>, @@ -229,14 +232,18 @@ export function OnPropertyChange( throw new Error('[OnPropertyChange] Property was changed before selecting a Container'); } + if (current.MainContainer === null || + current.MainContainer === undefined) { + throw new Error('[OnPropertyChange] Property was changed before the main container was added'); + } + if (parent === null) { const selectedContainerClone: IContainerModel = structuredClone(current.SelectedContainer); (selectedContainerClone.properties as any)[key] = value; setHistory(history.concat([{ - LastAction: 'Change property of main', - MainContainer: selectedContainerClone, SelectedContainer: selectedContainerClone, SelectedContainerId: selectedContainerClone.properties.id, + MainContainer: selectedContainerClone, TypeCounters: Object.assign({}, current.TypeCounters) }])); setHistoryCurrentStep(history.length); @@ -252,223 +259,11 @@ export function OnPropertyChange( (container.properties as any)[key] = value; - if (container.properties.isRigidBody) { - RecalculatePhysics(container); - } - setHistory(history.concat([{ - LastAction: `Change property of container ${container.properties.id}`, - MainContainer: mainContainerClone, SelectedContainer: container, SelectedContainerId: container.properties.id, + MainContainer: mainContainerClone, TypeCounters: Object.assign({}, current.TypeCounters) }])); setHistoryCurrentStep(history.length); } - -// TODO put this in a different file - -export function RecalculatePhysics(container: IContainerModel): IContainerModel { - container = constraintBodyInsideParent(container); - container = constraintBodyInsideUnallocatedWidth(container); - return container; -} - -/** - * Limit a rect inside a parent rect by applying the following rules : - * it cannot be bigger than the parent - * it cannot go out of bound - * @param container - * @returns - */ -function constraintBodyInsideParent(container: IContainerModel): IContainerModel { - if (container.parent === null || container.parent === undefined) { - return container; - } - - const parentProperties = container.parent.properties; - const parentWidth = Number(parentProperties.width); - const parentHeight = Number(parentProperties.height); - - return constraintBodyInsideSpace(container, 0, 0, parentWidth, parentHeight); -} - -function constraintBodyInsideSpace( - container: IContainerModel, - x: number, - y: number, - width: number, - height: number -): IContainerModel { - const containerProperties = container.properties; - const containerX = Number(containerProperties.x); - const containerY = Number(containerProperties.y); - const containerWidth = Number(containerProperties.width); - const containerHeight = Number(containerProperties.height); - - // Check size bigger than parent - const isBodyLargerThanParent = containerWidth > width; - const isBodyTallerThanParentHeight = containerHeight > height; - if (isBodyLargerThanParent || isBodyTallerThanParentHeight) { - if (isBodyLargerThanParent) { - containerProperties.x = x; - containerProperties.width = width; - } - if (isBodyTallerThanParentHeight) { - containerProperties.y = y; - containerProperties.height = height; - } - return container; - } - - // Check horizontal out of bound - if (containerX < x) { - containerProperties.x = x; - } - if (containerX + containerWidth > width) { - containerProperties.x = x + width - containerWidth; - } - - // Check vertical out of bound - if (containerY < y) { - containerProperties.y = y; - } - if (containerY + containerHeight > height) { - containerProperties.y = y + height - containerHeight; - } - - return container; -} - -/** - * Get the unallocated widths inside a container - * An allocated width is defined by its the widths of the children that are rigid bodies. - * An example of this allocation system is the disk space - * (except the fact that disk space is divided by block). - * @param container - * @returns {SizePointer[]} Array of unallocated widths (x=position of the unallocated space, width=size of the allocated space) - */ -function getAvailableWidths(container: IContainerModel, exception: IContainerModel): SizePointer[] { - const x = 0; - const width = Number(container.properties.width); - let unallocatedSpaces: SizePointer[] = [{ x, width }]; - - const rigidBodies = container.children.filter(child => child.properties.isRigidBody); - for (const child of rigidBodies) { - if (child === exception) { - continue; - } - - // get the space of the child that is inside the parent - let newUnallocatedSpace: SizePointer[] = []; - for (const unallocatedSpace of unallocatedSpaces) { - const newUnallocatedWidths = getAvailableWidthsTwoLines( - unallocatedSpace.x, - unallocatedSpace.x + unallocatedSpace.width, - child.properties.x, - child.properties.x + Number(child.properties.width)); - newUnallocatedSpace = newUnallocatedSpace.concat(newUnallocatedWidths); - } - unallocatedSpaces = newUnallocatedSpace; - } - - return unallocatedSpaces; -} - -/** - * Returns the unallocated widths between two lines in 1D - * @param min1 left of the first line - * @param max1 rigth of the first line - * @param min2 left of the second line - * @param max2 right of the second line - * @returns Available widths - */ -function getAvailableWidthsTwoLines(min1: number, max1: number, min2: number, max2: number): SizePointer[] { - if (min2 < min1 && max2 > max1) { - // object 2 is overlapping full width - return []; - } - - if (min1 >= min2) { - // object 2 is partially overlapping on the left - return [{ - x: max2, - width: max1 - max2 - }]; - } - - if (max2 >= max1) { - // object 2 is partially overlapping on the right - return [{ - x: min2, - width: max2 - min1 - }]; - } - - // object 2 is overlapping in the middle - return [ - { - x: min1, - width: min2 - min1 - }, - { - x: min2, - width: max1 - max2 - } - ]; -} - -/** - * - * @param container - * @returns - */ -function constraintBodyInsideUnallocatedWidth(container: IContainerModel): IContainerModel { - if (container.parent === null) { - return container; - } - - const availableWidths = getAvailableWidths(container.parent, container); - const containerX = Number(container.properties.x); - - // Sort the available width - availableWidths - .sort((width1, width2) => Math.abs(width1.x - containerX) - Math.abs(width2.x - containerX)); - - if (availableWidths.length === 0) { - throw new Error('No available space found on the parent container. Try to free the parent a little before placing it inside.'); - } - - const availableWidthFound = availableWidths.find( - width => isFitting(container, width) - ); - - if (availableWidthFound === undefined) { - // There is two way to reach this part of the code - // 1) toggle the isRigidBody such as width > availableWidth.width - // 2) resize a container such as width > availableWidth.width - // We want the container to fit automatically inside the available space - // even if it means to resize the container - // The end goal is that the code never show the error message no matter what action is done - // TODO: Actually give an option to not fit and show the error message shown below - const availableWidth = availableWidths[0]; - container.properties.x = availableWidth.x; - container.properties.width = availableWidth.width; - // throw new Error('[constraintBodyInsideUnallocatedWidth] BIGERR: No available space found on the parent container, even though there is some.'); - return container; - } - - return constraintBodyInsideSpace( - container, - availableWidthFound.x, - 0, - availableWidthFound.width, - Number(container.parent.properties.height) - ); -} - -function isFitting(container: IContainerModel, sizePointer: SizePointer): boolean { - const containerWidth = Number(container.properties.width); - - return containerWidth <= sizePointer.width; -} diff --git a/src/Components/Editor/Editor.tsx b/src/Components/Editor/Editor.tsx index ad27c22..cf67ed7 100644 --- a/src/Components/Editor/Editor.tsx +++ b/src/Components/Editor/Editor.tsx @@ -24,21 +24,24 @@ export const getCurrentHistory = (history: HistoryState[], historyCurrentStep: n export const getCurrentHistoryState = (history: HistoryState[], historyCurrentStep: number): HistoryState => history[historyCurrentStep]; const Editor: React.FunctionComponent = (props) => { - const [history, setHistory] = React.useState(structuredClone(props.history)); - const [historyCurrentStep, setHistoryCurrentStep] = React.useState(props.historyCurrentStep); + const [history, setHistory] = React.useState([...props.history]); + const [historyCurrentStep, setHistoryCurrentStep] = React.useState(0); React.useEffect(() => { - const onKeyUp = (event: KeyboardEvent): void => onKeyDown( + window.addEventListener('keyup', (event) => onKeyDown( event, history, historyCurrentStep, setHistoryCurrentStep - ); - - window.addEventListener('keyup', onKeyUp); + )); return () => { - window.removeEventListener('keyup', onKeyUp); + window.removeEventListener('keyup', (event) => onKeyDown( + event, + history, + historyCurrentStep, + setHistoryCurrentStep + )); }; }); diff --git a/src/Components/Editor/Shortcuts.ts b/src/Components/Editor/Shortcuts.ts index 8ac6790..00b449e 100644 --- a/src/Components/Editor/Shortcuts.ts +++ b/src/Components/Editor/Shortcuts.ts @@ -1,5 +1,5 @@ import { Dispatch, SetStateAction } from 'react'; -import { HistoryState } from '../../Interfaces/HistoryState'; +import { HistoryState } from "../../Interfaces/HistoryState"; export function onKeyDown( event: KeyboardEvent, diff --git a/src/Components/ElementsSidebar/ElementsSidebar.test.tsx b/src/Components/ElementsSidebar/ElementsSidebar.test.tsx index c1372b1..230949d 100644 --- a/src/Components/ElementsSidebar/ElementsSidebar.test.tsx +++ b/src/Components/ElementsSidebar/ElementsSidebar.test.tsx @@ -16,15 +16,14 @@ describe.concurrent('Elements sidebar', () => { x: 0, y: 0, width: 2000, - height: 100, - isRigidBody: false + height: 100 }, userData: {} }} isOpen={true} isHistoryOpen={false} SelectedContainer={null} - OnPropertyChange={() => {}} + onPropertyChange={() => {}} SelectContainer={() => {}} DeleteContainer={() => {}} AddContainer={() => {}} @@ -45,8 +44,7 @@ describe.concurrent('Elements sidebar', () => { x: 0, y: 0, width: 2000, - height: 100, - isRigidBody: false + height: 100 }, userData: {} }; @@ -56,7 +54,7 @@ describe.concurrent('Elements sidebar', () => { isOpen={true} isHistoryOpen={false} SelectedContainer={MainContainer} - OnPropertyChange={() => {}} + onPropertyChange={() => {}} SelectContainer={() => {}} DeleteContainer={() => {}} AddContainer={() => {}} @@ -100,8 +98,7 @@ describe.concurrent('Elements sidebar', () => { x: 0, y: 0, width: 2000, - height: 100, - isRigidBody: false + height: 100 }, userData: {} }; @@ -116,8 +113,7 @@ describe.concurrent('Elements sidebar', () => { x: 0, y: 0, width: 0, - height: 0, - isRigidBody: false + height: 0 }, userData: {} } @@ -133,8 +129,7 @@ describe.concurrent('Elements sidebar', () => { x: 0, y: 0, width: 0, - height: 0, - isRigidBody: false + height: 0 }, userData: {} } @@ -145,7 +140,7 @@ describe.concurrent('Elements sidebar', () => { isOpen={true} isHistoryOpen={false} SelectedContainer={MainContainer} - OnPropertyChange={() => {}} + onPropertyChange={() => {}} SelectContainer={() => {}} DeleteContainer={() => {}} AddContainer={() => {}} @@ -169,8 +164,7 @@ describe.concurrent('Elements sidebar', () => { x: 0, y: 0, width: 2000, - height: 100, - isRigidBody: false + height: 100 }, userData: {} }; @@ -184,8 +178,7 @@ describe.concurrent('Elements sidebar', () => { x: 0, y: 0, width: 0, - height: 0, - isRigidBody: false + height: 0 }, userData: {} }; @@ -201,7 +194,7 @@ describe.concurrent('Elements sidebar', () => { isOpen={true} isHistoryOpen={false} SelectedContainer={SelectedContainer} - OnPropertyChange={() => {}} + onPropertyChange={() => {}} SelectContainer={selectContainer} DeleteContainer={() => {}} AddContainer={() => {}} @@ -224,7 +217,7 @@ describe.concurrent('Elements sidebar', () => { isOpen={true} isHistoryOpen={false} SelectedContainer={SelectedContainer} - OnPropertyChange={() => {}} + onPropertyChange={() => {}} SelectContainer={selectContainer} DeleteContainer={() => {}} AddContainer={() => {}} diff --git a/src/Components/ElementsSidebar/ElementsSidebar.tsx b/src/Components/ElementsSidebar/ElementsSidebar.tsx index 873161d..f449960 100644 --- a/src/Components/ElementsSidebar/ElementsSidebar.tsx +++ b/src/Components/ElementsSidebar/ElementsSidebar.tsx @@ -13,7 +13,7 @@ interface IElementsSidebarProps { isOpen: boolean isHistoryOpen: boolean SelectedContainer: IContainerModel | null - OnPropertyChange: (key: string, value: string | number | boolean) => void + onPropertyChange: (key: string, value: string) => void SelectContainer: (container: IContainerModel) => void DeleteContainer: (containerid: string) => void AddContainer: (index: number, type: string, parent: string) => void @@ -71,39 +71,40 @@ export const ElementsSidebar: React.FC = (props: IElement // Event listeners React.useEffect(() => { - const onContextMenu = (event: MouseEvent): void => handleRightClick( - event, - setIsContextMenuOpen, - setOnClickContainerId, - setContextMenuPosition - ); - - const onLeftClick = (): void => handleLeftClick( - isContextMenuOpen, - setIsContextMenuOpen, - setOnClickContainerId - ); - elementRef.current?.addEventListener( 'contextmenu', - onContextMenu - ); + (event) => handleRightClick( + event, + setIsContextMenuOpen, + setOnClickContainerId, + setContextMenuPosition + )); window.addEventListener( 'click', - onLeftClick - ); + (event) => handleLeftClick( + isContextMenuOpen, + setIsContextMenuOpen, + setOnClickContainerId + )); return () => { - elementRef.current?.removeEventListener( + elementRef.current?.addEventListener( 'contextmenu', - onContextMenu - ); + (event) => handleRightClick( + event, + setIsContextMenuOpen, + setOnClickContainerId, + setContextMenuPosition + )); window.removeEventListener( 'click', - onLeftClick - ); + (event) => handleLeftClick( + isContextMenuOpen, + setIsContextMenuOpen, + setOnClickContainerId + )); }; }, []); @@ -140,12 +141,9 @@ export const ElementsSidebar: React.FC = (props: IElement y={contextMenuPosition.y} isOpen={isContextMenuOpen} > - { - setIsContextMenuOpen(false); - props.DeleteContainer(onClickContainerId); - }} /> + props.DeleteContainer(onClickContainerId)} /> - + ); }; diff --git a/src/Components/Properties/Properties.test.tsx b/src/Components/Properties/Properties.test.tsx index 9f0fe13..86a80e2 100644 --- a/src/Components/Properties/Properties.test.tsx +++ b/src/Components/Properties/Properties.test.tsx @@ -21,8 +21,7 @@ describe.concurrent('Properties', () => { id: 'stuff', parentId: 'parentId', x: 1, - y: 1, - isRigidBody: false + y: 1 }; const handleChange = vi.fn((key, value) => { diff --git a/src/Components/Properties/Properties.tsx b/src/Components/Properties/Properties.tsx index c1ac966..ca2056a 100644 --- a/src/Components/Properties/Properties.tsx +++ b/src/Components/Properties/Properties.tsx @@ -1,10 +1,9 @@ import * as React from 'react'; import ContainerProperties from '../../Interfaces/Properties'; -import { INPUT_TYPES } from './PropertiesInputTypes'; interface IPropertiesProps { properties?: ContainerProperties - onChange: (key: string, value: string | number | boolean) => void + onChange: (key: string, value: string) => void } export const Properties: React.FC = (props: IPropertiesProps) => { @@ -27,24 +26,11 @@ export const Properties: React.FC = (props: IPropertiesProps) const handleProperties = ( [key, value]: [string, string | number], groupInput: React.ReactNode[], - onChange: (key: string, value: string | number | boolean) => void + onChange: (key: string, value: string) => void ): void => { const id = `property-${key}`; - let type = 'text'; - let checked; - - /// hardcoded stuff for ergonomy /// - if (typeof value === 'boolean') { - checked = value; - } - - if (key in INPUT_TYPES) { - type = INPUT_TYPES[key]; - } - - const isDisabled = ['id', 'parentId'].includes(key); - /// - + const type = 'text'; + const isDisabled = key === 'id' || key === 'parentId'; // hardcoded groupInput.push(
@@ -57,14 +43,7 @@ const handleProperties = ( type={type} id={id} value={value} - checked={checked} - onChange={(event) => { - if (type === 'checkbox') { - onChange(key, event.target.checked); - return; - } - onChange(key, event.target.value); - }} + onChange={(event) => onChange(key, event.target.value)} disabled={isDisabled} />
diff --git a/src/Components/Properties/PropertiesInputTypes.tsx b/src/Components/Properties/PropertiesInputTypes.tsx deleted file mode 100644 index c62a8fd..0000000 --- a/src/Components/Properties/PropertiesInputTypes.tsx +++ /dev/null @@ -1,7 +0,0 @@ -export const INPUT_TYPES: Record = { - x: 'number', - y: 'number', - width: 'number', - height: 'number', - isRigidBody: 'checkbox' -}; diff --git a/src/Components/SVG/SVG.tsx b/src/Components/SVG/SVG.tsx index 94fb746..aaa3b22 100644 --- a/src/Components/SVG/SVG.tsx +++ b/src/Components/SVG/SVG.tsx @@ -35,11 +35,10 @@ export const SVG: React.FC = (props: ISVGProps) => { }); React.useEffect(() => { - const onResize = (): void => resizeViewBox(setViewer); - window.addEventListener('resize', onResize); + window.addEventListener('resize', () => resizeViewBox(setViewer)); return () => { - window.removeEventListener('resize', onResize); + window.addEventListener('resize', () => resizeViewBox(setViewer)); }; }); diff --git a/src/Components/UI/UI.tsx b/src/Components/UI/UI.tsx index 6d6adbe..7422471 100644 --- a/src/Components/UI/UI.tsx +++ b/src/Components/UI/UI.tsx @@ -4,7 +4,7 @@ import { Sidebar } from '../Sidebar/Sidebar'; import { History } from '../History/History'; import { AvailableContainer } from '../../Interfaces/AvailableContainer'; import { ContainerModel } from '../../Interfaces/ContainerModel'; -import { HistoryState } from '../../Interfaces/HistoryState'; +import { HistoryState } from "../../Interfaces/HistoryState"; import { PhotographIcon, UploadIcon } from '@heroicons/react/outline'; import { FloatingButton } from '../FloatingButton/FloatingButton'; import { Bar } from '../Bar/Bar'; @@ -16,7 +16,7 @@ interface IUIProps { AvailableContainers: AvailableContainer[] SelectContainer: (container: ContainerModel) => void DeleteContainer: (containerId: string) => void - OnPropertyChange: (key: string, value: string | number | boolean) => void + OnPropertyChange: (key: string, value: string) => void AddContainerToSelectedContainer: (type: string) => void AddContainer: (index: number, type: string, parentId: string) => void SaveEditorAsJSON: () => void @@ -58,7 +58,7 @@ export const UI: React.FunctionComponent = (props: IUIProps) => { SelectedContainer={props.current.SelectedContainer} isOpen={isElementsSidebarOpen} isHistoryOpen={isHistoryOpen} - OnPropertyChange={props.OnPropertyChange} + onPropertyChange={props.OnPropertyChange} SelectContainer={props.SelectContainer} DeleteContainer={props.DeleteContainer} AddContainer={props.AddContainer} diff --git a/src/Interfaces/HistoryState.ts b/src/Interfaces/HistoryState.ts index da1d74b..aa51638 100644 --- a/src/Interfaces/HistoryState.ts +++ b/src/Interfaces/HistoryState.ts @@ -1,7 +1,6 @@ import { IContainerModel } from './ContainerModel'; export interface HistoryState { - LastAction: string MainContainer: IContainerModel SelectedContainer: IContainerModel | null SelectedContainerId: string diff --git a/src/Interfaces/Properties.ts b/src/Interfaces/Properties.ts index ea5f54e..ed185f2 100644 --- a/src/Interfaces/Properties.ts +++ b/src/Interfaces/Properties.ts @@ -5,5 +5,4 @@ export default interface Properties extends React.CSSProperties { parentId: string | null x: number y: number - isRigidBody: boolean } diff --git a/src/Interfaces/SizePointer.ts b/src/Interfaces/SizePointer.ts deleted file mode 100644 index 9a80057..0000000 --- a/src/Interfaces/SizePointer.ts +++ /dev/null @@ -1,4 +0,0 @@ -export interface SizePointer { - x: number - width: number -} diff --git a/src/tests/resources/rigidbodytest.json b/src/tests/resources/rigidbodytest.json deleted file mode 100644 index 8430870..0000000 --- a/src/tests/resources/rigidbodytest.json +++ /dev/null @@ -1,436 +0,0 @@ -{ - "history": [ - { - "MainContainer": { - "children": [], - "properties": { - "id": "main", - "parentId": "null", - "x": 0, - "y": 0, - "width": 2000, - "height": 100, - "fillOpacity": 0, - "stroke": "black" - }, - "userData": {} - }, - "SelectedContainerId": "main", - "TypeCounters": {} - }, - { - "LastAction": "Add container", - "MainContainer": { - "children": [ - { - "children": [], - "properties": { - "id": "Container-0", - "parentId": "main", - "x": 0, - "y": 0, - "width": 75, - "height": 100, - "isRigidBody": false, - "fillOpacity": 0, - "stroke": "green" - }, - "userData": { - "type": "Container" - } - } - ], - "properties": { - "id": "main", - "parentId": "null", - "x": 0, - "y": 0, - "width": 2000, - "height": 100, - "fillOpacity": 0, - "stroke": "black" - }, - "userData": {} - }, - "SelectedContainerId": "main", - "TypeCounters": { - "Container": 0 - } - }, - { - "LastAction": "Select container Container-0", - "MainContainer": { - "children": [ - { - "children": [], - "properties": { - "id": "Container-0", - "parentId": "main", - "x": 0, - "y": 0, - "width": 75, - "height": 100, - "isRigidBody": false, - "fillOpacity": 0, - "stroke": "green" - }, - "userData": { - "type": "Container" - } - } - ], - "properties": { - "id": "main", - "parentId": "null", - "x": 0, - "y": 0, - "width": 2000, - "height": 100, - "fillOpacity": 0, - "stroke": "black" - }, - "userData": {} - }, - "SelectedContainerId": "Container-0", - "TypeCounters": { - "Container": 0 - } - }, - { - "LastAction": "Change property of container Container-0", - "MainContainer": { - "children": [ - { - "children": [], - "properties": { - "id": "Container-0", - "parentId": "main", - "x": 0, - "y": 0, - "width": "7", - "height": 100, - "isRigidBody": false, - "fillOpacity": 0, - "stroke": "green" - }, - "userData": { - "type": "Container" - } - } - ], - "properties": { - "id": "main", - "parentId": "null", - "x": 0, - "y": 0, - "width": 2000, - "height": 100, - "fillOpacity": 0, - "stroke": "black" - }, - "userData": {} - }, - "SelectedContainerId": "Container-0", - "TypeCounters": { - "Container": 0 - } - }, - { - "LastAction": "Change property of container Container-0", - "MainContainer": { - "children": [ - { - "children": [], - "properties": { - "id": "Container-0", - "parentId": "main", - "x": 0, - "y": 0, - "width": "", - "height": 100, - "isRigidBody": false, - "fillOpacity": 0, - "stroke": "green" - }, - "userData": { - "type": "Container" - } - } - ], - "properties": { - "id": "main", - "parentId": "null", - "x": 0, - "y": 0, - "width": 2000, - "height": 100, - "fillOpacity": 0, - "stroke": "black" - }, - "userData": {} - }, - "SelectedContainerId": "Container-0", - "TypeCounters": { - "Container": 0 - } - }, - { - "LastAction": "Change property of container Container-0", - "MainContainer": { - "children": [ - { - "children": [], - "properties": { - "id": "Container-0", - "parentId": "main", - "x": 0, - "y": 0, - "width": "2", - "height": 100, - "isRigidBody": false, - "fillOpacity": 0, - "stroke": "green" - }, - "userData": { - "type": "Container" - } - } - ], - "properties": { - "id": "main", - "parentId": "null", - "x": 0, - "y": 0, - "width": 2000, - "height": 100, - "fillOpacity": 0, - "stroke": "black" - }, - "userData": {} - }, - "SelectedContainerId": "Container-0", - "TypeCounters": { - "Container": 0 - } - }, - { - "LastAction": "Change property of container Container-0", - "MainContainer": { - "children": [ - { - "children": [], - "properties": { - "id": "Container-0", - "parentId": "main", - "x": 0, - "y": 0, - "width": "20", - "height": 100, - "isRigidBody": false, - "fillOpacity": 0, - "stroke": "green" - }, - "userData": { - "type": "Container" - } - } - ], - "properties": { - "id": "main", - "parentId": "null", - "x": 0, - "y": 0, - "width": 2000, - "height": 100, - "fillOpacity": 0, - "stroke": "black" - }, - "userData": {} - }, - "SelectedContainerId": "Container-0", - "TypeCounters": { - "Container": 0 - } - }, - { - "LastAction": "Change property of container Container-0", - "MainContainer": { - "children": [ - { - "children": [], - "properties": { - "id": "Container-0", - "parentId": "main", - "x": 0, - "y": 0, - "width": "200", - "height": 100, - "isRigidBody": false, - "fillOpacity": 0, - "stroke": "green" - }, - "userData": { - "type": "Container" - } - } - ], - "properties": { - "id": "main", - "parentId": "null", - "x": 0, - "y": 0, - "width": 2000, - "height": 100, - "fillOpacity": 0, - "stroke": "black" - }, - "userData": {} - }, - "SelectedContainerId": "Container-0", - "TypeCounters": { - "Container": 0 - } - }, - { - "LastAction": "Change property of container Container-0", - "MainContainer": { - "children": [ - { - "children": [], - "properties": { - "id": "Container-0", - "parentId": "main", - "x": 0, - "y": 0, - "width": "2000", - "height": 100, - "isRigidBody": false, - "fillOpacity": 0, - "stroke": "green" - }, - "userData": { - "type": "Container" - } - } - ], - "properties": { - "id": "main", - "parentId": "null", - "x": 0, - "y": 0, - "width": 2000, - "height": 100, - "fillOpacity": 0, - "stroke": "black" - }, - "userData": {} - }, - "SelectedContainerId": "Container-0", - "TypeCounters": { - "Container": 0 - } - }, - { - "LastAction": "Change property of container Container-0", - "MainContainer": { - "children": [ - { - "children": [], - "properties": { - "id": "Container-0", - "parentId": "main", - "x": 0, - "y": 0, - "width": "20000", - "height": 100, - "isRigidBody": false, - "fillOpacity": 0, - "stroke": "green" - }, - "userData": { - "type": "Container" - } - } - ], - "properties": { - "id": "main", - "parentId": "null", - "x": 0, - "y": 0, - "width": 2000, - "height": 100, - "fillOpacity": 0, - "stroke": "black" - }, - "userData": {} - }, - "SelectedContainerId": "Container-0", - "TypeCounters": { - "Container": 0 - } - }, - { - "LastAction": "Change property of container Container-0", - "MainContainer": { - "children": [ - { - "children": [], - "properties": { - "id": "Container-0", - "parentId": "main", - "x": 0, - "y": 0, - "width": 2000, - "height": 100, - "isRigidBody": true, - "fillOpacity": 0, - "stroke": "green" - }, - "userData": { - "type": "Container" - } - } - ], - "properties": { - "id": "main", - "parentId": "null", - "x": 0, - "y": 0, - "width": 2000, - "height": 100, - "fillOpacity": 0, - "stroke": "black" - }, - "userData": {} - }, - "SelectedContainerId": "Container-0", - "TypeCounters": { - "Container": 0 - } - } - ], - "historyCurrentStep": 10, - "configuration": { - "AvailableContainers": [ - { - "Type": "Container", - "Width": 75, - "Height": 100, - "Style": { - "fillOpacity": 0, - "stroke": "green" - } - } - ], - "AvailableSymbols": [], - "MainContainer": { - "Type": "Container", - "Width": 2000, - "Height": 100, - "Style": { - "fillOpacity": 0, - "stroke": "black" - } - } - } -} \ No newline at end of file diff --git a/src/utils/default.ts b/src/utils/default.ts index 552b8a0..60371fc 100644 --- a/src/utils/default.ts +++ b/src/utils/default.ts @@ -30,7 +30,6 @@ export const DEFAULT_MAINCONTAINER_PROPS: Properties = { parentId: 'null', x: 0, y: 0, - isRigidBody: false, width: DEFAULT_CONFIG.MainContainer.Width, height: DEFAULT_CONFIG.MainContainer.Height, fillOpacity: 0, diff --git a/src/utils/saveload.ts b/src/utils/saveload.ts index a33652e..de8b835 100644 --- a/src/utils/saveload.ts +++ b/src/utils/saveload.ts @@ -8,11 +8,6 @@ import { IEditorState } from '../Components/Editor/Editor'; */ export function Revive(editorState: IEditorState): void { const history = editorState.history; - - // restore last step - editorState.historyCurrentStep = history.length - 1; - - // restore the parents and the selected container for (const state of history) { if (state.MainContainer === null || state.MainContainer === undefined) { continue; @@ -48,10 +43,6 @@ export const getCircularReplacer = (): (key: any, value: object | null) => objec return; } - if (key === 'SelectedContainer') { - return; - } - if (typeof value === 'object' && value !== null) { if (seen.has(value)) { return;