From 522cd722c01af8183f66a2b215efe0ab5bec20b8 Mon Sep 17 00:00:00 2001 From: Siklos Date: Mon, 15 Aug 2022 22:07:08 +0200 Subject: [PATCH] Added AddMethod and Default x,y,width,height on Add --- src/Components/Editor/ContainerOperations.ts | 44 ++++++++++++------- .../Properties/PropertiesInputTypes.tsx | 3 +- src/Enums/AddMethod.ts | 10 +++++ src/Interfaces/IAvailableContainer.ts | 8 +++- test-server/http.js | 20 +++++++-- 5 files changed, 63 insertions(+), 22 deletions(-) create mode 100644 src/Enums/AddMethod.ts diff --git a/src/Components/Editor/ContainerOperations.ts b/src/Components/Editor/ContainerOperations.ts index f1736fc..e2df160 100644 --- a/src/Components/Editor/ContainerOperations.ts +++ b/src/Components/Editor/ContainerOperations.ts @@ -1,10 +1,12 @@ -import { Dispatch, SetStateAction } from 'react'; +import React, { Dispatch, SetStateAction } from 'react'; import { IHistoryState } from '../../Interfaces/IHistoryState'; import { IConfiguration } from '../../Interfaces/IConfiguration'; import { ContainerModel, IContainerModel } from '../../Interfaces/IContainerModel'; import { findContainerById } from '../../utils/itertools'; import { getCurrentHistory } from './Editor'; import IProperties from '../../Interfaces/IProperties'; +import { AddMethod } from '../../Enums/AddMethod'; +import { IAvailableContainer } from '../../Interfaces/IAvailableContainer'; /** * Select a container @@ -169,10 +171,10 @@ export function AddContainer( } // Get the preset properties from the API - const properties = configuration.AvailableContainers + const containerConfig = configuration.AvailableContainers .find(option => option.Type === type); - if (properties === undefined) { + if (containerConfig === undefined) { throw new Error(`[AddContainer] Object type not found. Found: ${type}`); } @@ -198,27 +200,25 @@ export function AddContainer( throw new Error('[AddContainer] Container model was not found among children of the main container!'); } - let x = 0; - if (index > 0) { - const lastChild: IContainerModel | undefined = parentClone.children.at(index - 1); - if (lastChild !== undefined) { - x = lastChild.properties.x + Number(lastChild.properties.width); - } - } + let x = containerConfig.DefaultX ?? 0; + const y = containerConfig.DefaultY ?? 0; + const width = containerConfig.Width ?? parentClone.properties.width; + const height = containerConfig.Height ?? parentClone.properties.height; + + x = ApplyAddMethod(index, containerConfig, parentClone, x); const defaultProperties: IProperties = { id: `${type}-${count}`, parentId: parentClone.properties.id, x, - y: 0, - width: properties.Width, - height: parentClone.properties.height, + y, + width, + height, isRigidBody: false, isAnchor: false, - XPositionReference: properties.XPositionReference, - ...properties.Style + XPositionReference: containerConfig.XPositionReference, + ...containerConfig.Style }; - // Create the container const newContainer = new ContainerModel( parentClone, @@ -247,3 +247,15 @@ export function AddContainer( setHistory(history); setHistoryCurrentStep(history.length - 1); } + +function ApplyAddMethod(index: number, containerConfig: IAvailableContainer, parentClone: IContainerModel, x: number): number { + if (index > 0 && ( + containerConfig.AddMethod === undefined || + containerConfig.AddMethod === AddMethod.Append)) { + const lastChild: IContainerModel | undefined = parentClone.children.at(index - 1); + if (lastChild !== undefined) { + x += lastChild.properties.x + Number(lastChild.properties.width); + } + } + return x; +} diff --git a/src/Components/Properties/PropertiesInputTypes.tsx b/src/Components/Properties/PropertiesInputTypes.tsx index d91ddbc..b8f29d3 100644 --- a/src/Components/Properties/PropertiesInputTypes.tsx +++ b/src/Components/Properties/PropertiesInputTypes.tsx @@ -4,5 +4,6 @@ export const INPUT_TYPES: Record = { width: 'number', height: 'number', isRigidBody: 'checkbox', - isAnchor: 'checkbox' + isAnchor: 'checkbox', + XPositionReference: 'number' }; diff --git a/src/Enums/AddMethod.ts b/src/Enums/AddMethod.ts new file mode 100644 index 0000000..c0d1e37 --- /dev/null +++ b/src/Enums/AddMethod.ts @@ -0,0 +1,10 @@ +/** + * Add method when creating a container + * - Append will append to the last children in list + * - Insert will always place it at the begining + * (default: Append) + */ +export enum AddMethod { + Append, + Insert +} diff --git a/src/Interfaces/IAvailableContainer.ts b/src/Interfaces/IAvailableContainer.ts index c7ad3c1..2f4a011 100644 --- a/src/Interfaces/IAvailableContainer.ts +++ b/src/Interfaces/IAvailableContainer.ts @@ -1,11 +1,15 @@ import React from 'react'; +import { AddMethod } from '../Enums/AddMethod'; import { XPositionReference } from '../Enums/XPositionReference'; /** Model of available container used in application configuration */ export interface IAvailableContainer { Type: string - Width: number - Height: number + Width?: number + Height?: number + DefaultX?: number + DefaultY?: number + AddMethod?: AddMethod XPositionReference?: XPositionReference Style: React.CSSProperties } diff --git a/test-server/http.js b/test-server/http.js index 69088c9..3c54590 100644 --- a/test-server/http.js +++ b/test-server/http.js @@ -62,20 +62,34 @@ const GetSVGLayoutConfiguration = () => { }, { Type: 'Trou', - Width: 300, + DefaultX: 10, + DefaultY: 10, + Width: 480, + Height: 180, Style: { fillOpacity: 0, borderWidth: 2, stroke: 'green' } }, + { + Type: 'Remplissage', + Style: { + fillOpacity: 1, + borderWidth: 2, + stroke: '#bfdbfe', + fill: '#bfdbfe' + } + }, { Type: 'Montant', - Width: 100, + Width: 10, + XPositionReference: 1, Style: { fillOpacity: 0, borderWidth: 2, - stroke: 'blue', + stroke: '#713f12', + fill: '#713f12' } } ],