Merge branch 'dev' of https://techformsa.visualstudio.com/SmartConfigurator/_git/SVGLayoutDesignerReact into dev

csharp/SVGLDLibs/SVGLDLibs/Models/AvailableSymbolModel.cs

@@ -7,13 +7,26 @@ namespace SVGLDLibs.Models
     {
         [DataMember(EmitDefaultValue = false)]
         public string Name { get; set; }
+
         [DataMember(EmitDefaultValue = false)]
         public ImageModel Image { get; set; }
+
         [DataMember(EmitDefaultValue = false)]
-        public PositionReferenceEnumModel PositionReference { get; set; }
+        public double X { get; set; }
+
+        [DataMember(EmitDefaultValue = false)]
+        public double Y { get; set; }
+
         [DataMember(EmitDefaultValue = false)]
         public double Width { get; set; }
+
         [DataMember(EmitDefaultValue = false)]
         public double Height { get; set; }
+
+        [DataMember(EmitDefaultValue = false)]
+        public PositionReferenceEnumModel PositionReference { get; set; }
+
+        [DataMember(EmitDefaultValue = false)]
+        public AvailableContainerModel AssociatedContainer { get; set; }
     }
 }

csharp/SVGLDLibs/SVGLDLibs/Models/SymbolModel.cs

@@ -8,16 +8,22 @@ namespace SVGLDLibs.Models
     {
         [DataMember(EmitDefaultValue = false)]
         public string id { get; set; }
+
         [DataMember(EmitDefaultValue = false)]
         public string type { get; set; }
+
         [DataMember(EmitDefaultValue = false)]
         public AvailableSymbolModel config { get; set; }
+
         [DataMember(EmitDefaultValue = false)]
         public double x { get; set; }
+
         [DataMember(EmitDefaultValue = false)]
         public double width { get; set; }
+
         [DataMember(EmitDefaultValue = false)]
         public double height { get; set; }
+
         [DataMember(EmitDefaultValue = false)]
         public List<string> linkedContainers { get; set; }
     }

src/Components/Canvas/Selector.ts

@@ -33,7 +33,7 @@ export function RenderSelector(ctx: CanvasRenderingContext2D, frameCount: number
 
   ctx.strokeStyle = '#3B82F6';
   ctx.lineWidth = 4 / scale;
-  ctx.globalAlpha = 0.25 * (Math.sin(frameCount * 0.0125) ** 2);
+  ctx.globalAlpha = (Math.sin(frameCount * 0.0450) ** 2);
   ctx.strokeRect(x, y, width, height);
   ctx.globalAlpha = 1;
   ctx.lineWidth = 1;

src/Components/Editor/Actions/AddContainer.ts

@@ -12,7 +12,7 @@ import { ISymbolModel } from '../../../Interfaces/ISymbolModel';
 import { Orientation } from '../../../Enums/Orientation';
 import { GetDefaultContainerProps } from '../../../utils/default';
 import { FindContainerById } from '../../../utils/itertools';
-import { ApplyMargin } from '../../../utils/svg';
+import { ApplyMargin, RestoreX, RestoreY } from '../../../utils/svg';
 import { ApplyBehaviors, ApplyBehaviorsOnSiblingsChildren } from '../Behaviors/Behaviors';
 import { GetCurrentHistory, UpdateCounters } from '../Editor';
 import { SortChildren } from './ContainerOperations';
@@ -59,7 +59,10 @@ export function AddContainers(
   configuration: IConfiguration,
   fullHistory: IHistoryState[],
   historyCurrentStep: number
-): IHistoryState[] {
+): {
+    history: IHistoryState[]
+    newContainers: IContainerModel[]
+  } {
   const history = GetCurrentHistory(fullHistory, historyCurrentStep);
   const current = history[history.length - 1];
 
@@ -77,18 +80,27 @@ export function AddContainers(
   // Deep clone the counters
   const newCounters = Object.assign({}, current.typeCounters);
 
-  // containerIds is used for logging purpose (see setHistory below)
-  const containerIds: string[] = [];
-
   // Iterate over the containers
+  const newContainers: IContainerModel[] = [];
   availableContainers.forEach((availableContainer, typeIndex) => {
     // Get the preset properties from the API
-    AddNewContainerToParent(availableContainer, configuration, containers, parentClone, index, typeIndex, newCounters, current.symbols, containerIds);
+    const newContainer = AddNewContainerToParent(
+      availableContainer,
+      configuration,
+      containers,
+      parentClone,
+      index,
+      typeIndex,
+      newCounters,
+      current.symbols
+    );
+    newContainers.push(newContainer);
   });
 
   // Update the state
+  const containersIds = newContainers.map(container => container.properties.id);
   history.push({
-    lastAction: `Add [${containerIds.join(', ')}] in ${parentClone.properties.id}`,
+    lastAction: `Add [${containersIds.join(', ')}] in ${parentClone.properties.id}`,
     mainContainer: current.mainContainer,
     selectedContainerId: parentClone.properties.id,
     containers,
@@ -97,7 +109,10 @@ export function AddContainers(
     selectedSymbolId: current.selectedSymbolId
   });
 
-  return history;
+  return {
+    history,
+    newContainers
+  };
 }
 
 function AddNewContainerToParent(
@@ -109,7 +124,6 @@ function AddNewContainerToParent(
   typeIndex: number,
   newCounters: Record<string, number>,
   symbols: Map<string, ISymbolModel>,
-  containerIds: string[] = [],
   initChilds: boolean = true
 ): ContainerModel {
   const type = availableContainer.Type;
@@ -130,10 +144,10 @@ function AddNewContainerToParent(
   const right: number = containerConfig.Margin?.right ?? 0;
 
   // Default coordinates
-  let x = containerConfig.X ?? 0;
-  let y = containerConfig.Y ?? 0;
   let width = containerConfig.Width ?? containerConfig.MaxWidth ?? containerConfig.MinWidth ?? parentClone.properties.width;
   let height = containerConfig.Height ?? containerConfig.MaxHeight ?? containerConfig.MinHeight ?? parentClone.properties.height;
+  let x = RestoreX(containerConfig.X ?? 0, width, containerConfig.PositionReference);
+  let y = RestoreY(containerConfig.Y ?? 0, height, containerConfig.PositionReference);
 
   ({ x, y, width, height } = ApplyMargin(x, y, width, height, left, bottom, top, right));
 
@@ -207,9 +221,6 @@ function AddNewContainerToParent(
     }
   }
 
-  // Add to the list of container id for logging purpose
-  containerIds.push(newContainer.properties.id);
-
   return newContainer;
 }
 
@@ -234,7 +245,7 @@ export function AddContainer(
   historyCurrentStep: number
 ): IHistoryState[] {
   // just call AddContainers with an array on a single element
-  return AddContainers(
+  const { history } = AddContainers(
     index,
     // eslint-disable-next-line @typescript-eslint/naming-convention
     [{ Type: type }],
@@ -243,6 +254,7 @@ export function AddContainer(
     fullHistory,
     historyCurrentStep
   );
+  return history;
 }
 
 /**
@@ -432,7 +444,6 @@ function AddContainerInLevel(
     0, 0,
     newCounters,
     symbols,
-    undefined,
     false
   );
 

src/Components/Editor/Actions/ContainerOperations.ts

@@ -282,11 +282,12 @@ function SetContainer(
   AssignProperty(container, key, value, type);
 
   // link the symbol if it exists
+  const oldSymbol = symbols.get(oldSymbolId);
+  const newSymbol = symbols.get(container.properties.linkedSymbolId);
   LinkSymbol(
     container.properties.id,
-    oldSymbolId,
+    oldSymbol,
-    container.properties.linkedSymbolId,
+    newSymbol
-    symbols
   );
 
   // Apply special behaviors: rigid, flex, symbol, anchor
@@ -357,15 +358,11 @@ function AssignProperty(container: ContainerModel, key: string, value: string |
  * @param symbols Current list of symbols
  * @returns
  */
-function LinkSymbol(
+export function LinkSymbol(
   containerId: string,
-  oldSymbolId: string,
+  oldSymbol: ISymbolModel | undefined,
-  newSymbolId: string,
+  newSymbol: ISymbolModel | undefined
-  symbols: Map<string, ISymbolModel>
 ): void {
-  const oldSymbol = symbols.get(oldSymbolId);
-  const newSymbol = symbols.get(newSymbolId);
-
   if (newSymbol === undefined) {
     if (oldSymbol !== undefined) {
       oldSymbol.linkedContainers.delete(containerId);

src/Components/Editor/Actions/ContextMenuActions.ts

@@ -201,21 +201,23 @@ function HandleSetContainerList(
   const addingBehavior = response.AddingBehavior ?? action.AddingBehavior;
   const current = GetCurrentHistoryState(history, historyCurrentStep);
   const containers = current.containers;
-  const parent = FindContainerById(containers, selectedContainer.properties.parentId);
   switch (addingBehavior) {
-    case AddMethod.Append:
+    case AddMethod.Insert:
-      setNewHistory(
+    case AddMethod.Append: {
-        AddContainers(
+      response.Containers.forEach(config => {
+        config.AddMethod = config.AddMethod ?? addingBehavior;
+      });
+      const { history: newHistory } = AddContainers(
         selectedContainer.children.length,
         response.Containers,
         selectedContainer.properties.id,
         configuration,
         history,
-          historyCurrentStep
+        historyCurrentStep);
-        ));
+
+      setNewHistory(newHistory);
       break;
-    case AddMethod.Insert:
+    }
-      throw new Error('Not yet supported');
     case AddMethod.Replace:
       setNewHistory(
         HandleReplace(
@@ -228,7 +230,8 @@ function HandleSetContainerList(
         )
       );
       break;
-    case AddMethod.ReplaceParent:
+    case AddMethod.ReplaceParent: {
+      const parent = FindContainerById(containers, selectedContainer.properties.parentId);
       if (parent === undefined || parent === null) {
         Swal.fire({
           title: 'Error',
@@ -250,6 +253,7 @@ function HandleSetContainerList(
       break;
     }
   }
+}
 
 function HandleReplace(
   containers: Map<string, IContainerModel>,
@@ -272,7 +276,50 @@ function HandleReplace(
     historyCurrentStep
   );
 
-  const newHistoryBeforeDelete = AddContainers(
+  const { history: newHistoryBeforeDelete } = AddContainers(
+    index,
+    response.Containers,
+    selectedContainer.properties.parentId,
+    configuration,
+    newHistoryAfterDelete,
+    newHistoryAfterDelete.length - 1
+  );
+
+  // Remove AddContainers from history
+  if (import.meta.env.PROD) {
+    newHistoryBeforeDelete.splice(newHistoryBeforeDelete.length - 2, 1);
+  }
+
+  // Rename the last action by Replace
+  const types = response.Containers.map(container => container.Type);
+  newHistoryBeforeDelete[newHistoryBeforeDelete.length - 1].lastAction =
+    `Replace ${selectedContainer.properties.id} by [${types.join(', ')}]`;
+
+  return newHistoryBeforeDelete;
+}
+
+function HandleInsert(
+  containers: Map<string, IContainerModel>,
+  selectedContainer: IContainerModel,
+  response: ISetContainerListResponse,
+  configuration: IConfiguration,
+  history: IHistoryState[],
+  historyCurrentStep: number
+): IHistoryState[] {
+  const parent = FindContainerById(containers, selectedContainer.properties.id);
+  if (parent === undefined || parent === null) {
+    throw new Error('[InsertContainer] Cannot insert in a container that does not exists');
+  }
+
+  const index = parent.children.indexOf(selectedContainer.properties.id);
+
+  const newHistoryAfterDelete = DeleteContainer(
+    selectedContainer.properties.id,
+    history,
+    historyCurrentStep
+  );
+
+  const { history: newHistoryBeforeDelete } = AddContainers(
     index,
     response.Containers,
     selectedContainer.properties.parentId,

src/Components/Editor/Actions/SymbolOperations.ts

@@ -6,7 +6,9 @@ import { GetDefaultSymbolModel } from '../../../utils/default';
 import { FindContainerById } from '../../../utils/itertools';
 import { RestoreX } from '../../../utils/svg';
 import { ApplyBehaviors, ApplyBehaviorsOnSiblingsChildren } from '../Behaviors/Behaviors';
-import { GetCurrentHistory, UpdateCounters } from '../Editor';
+import { GetCurrentHistory, GetCurrentHistoryState, UpdateCounters } from '../Editor';
+import { AddContainers } from './AddContainer';
+import { LinkSymbol } from './ContainerOperations';
 
 export function AddSymbol(
   name: string,
@@ -14,7 +16,7 @@ export function AddSymbol(
   fullHistory: IHistoryState[],
   historyCurrentStep: number
 ): IHistoryState[] {
-  const history = GetCurrentHistory(fullHistory, historyCurrentStep);
+  let history = GetCurrentHistory(fullHistory, historyCurrentStep);
   const current = history[history.length - 1];
 
   const symbolConfig = configuration.AvailableSymbols
@@ -24,24 +26,48 @@ export function AddSymbol(
     throw new Error('[AddSymbol] Symbol could not be found in the config');
   }
   const type = `symbol-${name}`;
-  const newCounters = structuredClone(current.typeCounters);
+  const typeCounters = structuredClone(current.typeCounters);
-  UpdateCounters(newCounters, type);
+  UpdateCounters(typeCounters, type);
 
   const newSymbols = structuredClone(current.symbols);
-  const newSymbol: ISymbolModel = GetDefaultSymbolModel(name, newCounters, type, symbolConfig);
+  const newSymbol: ISymbolModel = GetDefaultSymbolModel(name, typeCounters, type, symbolConfig);
+  const containers = structuredClone(current.containers);
   newSymbol.x = RestoreX(newSymbol.x, newSymbol.width, newSymbol.config.PositionReference);
 
   newSymbols.set(newSymbol.id, newSymbol);
 
   history.push({
     lastAction: `Add ${name}`,
-    mainContainer: structuredClone(current.mainContainer),
+    mainContainer: current.mainContainer,
-    containers: structuredClone(current.containers),
+    containers,
     selectedContainerId: current.selectedContainerId,
-    typeCounters: newCounters,
+    typeCounters,
     symbols: newSymbols,
     selectedSymbolId: newSymbol.id
   });
+
+  if (symbolConfig.AssociatedContainer !== undefined) {
+    const {
+      history: newHistory,
+      newContainers
+    } = AddContainers(
+      0,
+      [symbolConfig.AssociatedContainer],
+      current.mainContainer,
+      configuration,
+      history,
+      historyCurrentStep + 1
+    );
+
+    history = newHistory;
+    const newCurrent = GetCurrentHistoryState(newHistory, historyCurrentStep + 2);
+    const newerSymbol = newCurrent.symbols.get(newSymbol.id);
+
+    newContainers.forEach((newContainer) => {
+      LinkContainer(newerSymbol, newContainer, newSymbols);
+    });
+  }
+
   return history;
 }
 
@@ -55,7 +81,7 @@ export function SelectSymbol(
 
   history.push({
     lastAction: `Select ${symbolId}`,
-    mainContainer: structuredClone(current.mainContainer),
+    mainContainer: current.mainContainer,
     containers: structuredClone(current.containers),
     selectedContainerId: current.selectedContainerId,
     typeCounters: structuredClone(current.typeCounters),
@@ -166,3 +192,20 @@ export function OnPropertyChange(
   });
   return history;
 }
+
+/**
+ * Link a container to a symbol.
+ * If symbol is undefined, unlink the previous symbol of the container
+ * @param symbol
+ * @param container
+ * @param symbols
+ */
+function LinkContainer(
+  symbol: ISymbolModel | undefined,
+  container: IContainerModel,
+  symbols: Map<string, ISymbolModel>
+): void {
+  const oldSymbol = symbols.get(container.properties.linkedSymbolId);
+  LinkSymbol(container.properties.id, oldSymbol, symbol);
+  container.properties.linkedSymbolId = symbol !== undefined ? symbol.id : '';
+}

src/Components/UI/UseWorker.tsx

@@ -16,7 +16,7 @@ export function UseWorker(
     // use webworker for the stringify to avoid freezing
     myWorker.postMessage({
       state,
-      url: import.meta.env.VITE_API_GET_FEEDBACK_URL
+      url: configurationUrl ?? import.meta.env.VITE_API_GET_FEEDBACK_URL
     });
 
     return () => {
@@ -39,7 +39,8 @@ export function UseAsync(
       ApplicationState: state
     };
     const dataParsed = JSON.stringify(request, GetCircularReplacer());
-    fetch(import.meta.env.VITE_API_GET_FEEDBACK_URL, {
+    const url = configurationUrl ?? import.meta.env.VITE_API_GET_FEEDBACK_URL;
+    fetch(url, {
       method: 'POST',
       headers: new Headers({
         // eslint-disable-next-line @typescript-eslint/naming-convention

src/Interfaces/IAvailableContainer.ts

@@ -22,12 +22,14 @@ export interface IAvailableContainer {
   /** orientation */
   Orientation?: Orientation
 
+  // TODO: Refactor x, y in IPoint interface
   /** horizontal offset */
   X?: number
 
   /** vertical offset */
   Y?: number
 
+  // TODO: Refactor width, height, minWidth... in ISize interface
   /** width */
   Width?: number
 
@@ -57,6 +59,7 @@ export interface IAvailableContainer {
   /** margin */
   Margin?: IMargin
 
+  // TODO: Refactor isAnchor, isFlex in IBehaviors interface
   /** true if anchor, false otherwise */
   IsAnchor?: boolean
 
@@ -110,6 +113,7 @@ export interface IAvailableContainer {
    */
   Pattern?: string
 
+  // TODO: Refactor showSelf., showChildren., markPosition, showDimensionWithMarks in IDimensionOptions interface
   /** Hide the children in the treeview */
   HideChildrenInTreeview?: boolean
 

src/Interfaces/IAvailableSymbol.ts

@@ -1,13 +1,25 @@
 /* eslint-disable @typescript-eslint/naming-convention */
 import { PositionReference } from '../Enums/PositionReference';
+import { IAvailableContainer } from './IAvailableContainer';
 import { IImage } from './IImage';
 
 /**
  * Model of available symbol to configure the application */
 export interface IAvailableSymbol {
   Name: string
+
   Image: IImage
+
+  X?: number
+
+  Y?: number
+
   Width?: number
+
   Height?: number
+
   PositionReference?: PositionReference
+
+  /** An existing or new available container */
+  AssociatedContainer?: IAvailableContainer
 }

src/Interfaces/IContainerProperties.ts

@@ -27,6 +27,7 @@ export interface IContainerProperties {
   /** orientation */
   orientation: Orientation
 
+  // TODO: Refactor x, y in IPoint interface
   /** horizontal offset */
   x: number
 
@@ -36,6 +37,7 @@ export interface IContainerProperties {
   /** margin */
   margin: IMargin
 
+  // TODO: Refactor width, height, minWidth... in ISize interface
   /** width */
   width: number
 
@@ -62,6 +64,7 @@ export interface IContainerProperties {
    */
   maxHeight: number
 
+  // TODO: Refactor isAnchor, isFlex in IBehaviors interface
   /** true if anchor, false otherwise */
   isAnchor: boolean
 
@@ -71,9 +74,11 @@ export interface IContainerProperties {
   /** Horizontal alignment, also determines the visual location of x {Left = 0, Center, Right } */
   positionReference: PositionReference
 
+  // TODO: Refactor hideChildrenInTreeview in IUserInterface interface
   /** Hide the children in the treeview */
   hideChildrenInTreeview: boolean
 
+  // TODO: Refactor showSelf., showChildren., markPosition, showDimensionWithMarks in IDimensionOptions interface
   /** if true, show the dimension of the container */
   showSelfDimensions: Position[]
 

src/Interfaces/ISymbolModel.ts

@@ -13,6 +13,8 @@ export interface ISymbolModel {
   /** Horizontal offset */
   x: number
 
+  // TODO: Implement Y and verticality
+
   /** Width */
   width: number
 

test-server/http.js

@@ -22,6 +22,9 @@ const requestListener = async (request, response) => {
         case 'FillHoleWithChassis':
           json = FillHoleWithChassis(bodyParsed);
           break;
+        case 'Insert':
+          json = Insert(bodyParsed);
+          break;
         case 'SplitRemplissage':
           json = SplitRemplissage(bodyParsed);
           break;
@@ -118,6 +121,19 @@ const GetSVGLayoutConfiguration = () => {
         },
         Category: "Stuff",
         Actions: [
+          {
+            Id: "Insert",
+            Action: "Insert",
+            Label: "Insert containers",
+            Description: "Insert containers",
+            CustomLogo: {
+              Base64Image: null,
+              Name: 'Image1',
+              Svg: null,
+              Url: ""
+            },
+            AddingBehavior: 1
+          },
           {
             Id: "SplitRemplissage",
             Action: "SplitRemplissage",
@@ -131,32 +147,6 @@ const GetSVGLayoutConfiguration = () => {
             },
             AddingBehavior: 2
           },
-          {
-            Id: "SplitRemplissageParent",
-            Action: "SplitRemplissageParent",
-            Label: "Diviser le remplissage en insérant un montant",
-            Description: "Diviser le remplissage en insérant un montant",
-            CustomLogo: {
-              Base64Image: null,
-              Name: 'Image1',
-              Svg: null,
-              Url: ""
-            },
-            AddingBehavior: 3
-          },
-          {
-            Id: "SplitRemplissageParent",
-            Action: "SplitRemplissageParent",
-            Label: "Diviser le remplissage en insérant un montant",
-            Description: "Diviser le remplissage en insérant un montant",
-            CustomLogo: {
-              Base64Image: null,
-              Name: 'Image1',
-              Svg: null,
-              Url: ""
-            },
-            AddingBehavior: 3
-          },
           {
             Id: "SplitRemplissageParent",
             Action: "SplitRemplissageParent",
@@ -293,7 +283,10 @@ const GetSVGLayoutConfiguration = () => {
           Url: 'https://www.manutan.fr/img/S/GRP/ST/AIG3930272.jpg'
         },
         Name: 'Poteau structure',
-        PositionReference: 1
+        PositionReference: 1,
+        AssociatedContainer: {
+          Type: 'Montant'
+        }
       },
       {
         Width: 32,
@@ -369,13 +362,15 @@ const FillHoleWithChassis = (request) => {
 const SplitRemplissage = (request) => {
   const lstModels = [
     {
-      Type: 'Remplissage'
+      Type: 'Remplissage',
+      IsFlex: true
     },
     {
       Type: 'Montant'
     },
     {
-      Type: 'Remplissage'
+      Type: 'Remplissage',
+      IsFlex: true
     },
   ];
 
@@ -385,3 +380,24 @@ const SplitRemplissage = (request) => {
 };
 
 
+const Insert = (request) => {
+  const lstModels = [
+    {
+      Type: 'Remplissage',
+      IsFlex: true
+    },
+    {
+      Type: 'Montant',
+      X: 5,
+      IsAnchor: true
+    },
+    {
+      Type: 'Remplissage',
+      IsFlex: true
+    },
+  ];
+
+  return {
+    Containers: lstModels
+  };
+};