Siklos/svg-layout-designer-react
1
1
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity

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

Browse source
This commit is contained in:
Guillaume Tauzin 2022-11-07 10:32:16 +01:00
commit 95769f4718
13 changed files with 243 additions and 86 deletions
Download patch file Download diff file Expand all files Collapse all files

15
csharp/SVGLDLibs/SVGLDLibs/Models/AvailableSymbolModel.cs
View file

@ -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; }
}
}

6
csharp/SVGLDLibs/SVGLDLibs/Models/SymbolModel.cs
View file

@ -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; }
}

2
src/Components/Canvas/Selector.ts
View file

@ -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;

43
src/Components/Editor/Actions/AddContainer.ts
View file

@ -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
);

17
src/Components/Editor/Actions/ContainerOperations.ts
View file

@ -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,
container.properties.linkedSymbolId,
symbols
oldSymbol,
newSymbol
);
// 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,
newSymbolId: string,
symbols: Map<string, ISymbolModel>
oldSymbol: ISymbolModel | undefined,
newSymbol: ISymbolModel | undefined
): void {
const oldSymbol = symbols.get(oldSymbolId);
const newSymbol = symbols.get(newSymbolId);
if (newSymbol === undefined) {
if (oldSymbol !== undefined) {
oldSymbol.linkedContainers.delete(containerId);

67
src/Components/Editor/Actions/ContextMenuActions.ts
View file

@ -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:
setNewHistory(
AddContainers(
case AddMethod.Insert:
case AddMethod.Append: {
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',
@ -249,6 +252,7 @@ function HandleSetContainerList(
);
break;
}
}
}
function HandleReplace(
@ -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,

61
src/Components/Editor/Actions/SymbolOperations.ts
View file

@ -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);
UpdateCounters(newCounters, type);
const typeCounters = structuredClone(current.typeCounters);
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),
containers: structuredClone(current.containers),
mainContainer: current.mainContainer,
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 : '';
}

9
src/Components/UI/UseWorker.tsx
View file

@ -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
@ -47,9 +48,9 @@ export function UseAsync(
}),
body: dataParsed
})
.then(async (response) => await response.json()
.then(async(response) => await response.json()
)
.then(async (json: IGetFeedbackResponse) => {
.then(async(json: IGetFeedbackResponse) => {
setMessages(json.messages);
});
}, [state]);

4
src/Interfaces/IAvailableContainer.ts
View file

@ -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

12
src/Interfaces/IAvailableSymbol.ts
View file

@ -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
}

5
src/Interfaces/IContainerProperties.ts
View file

@ -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[]

2
src/Interfaces/ISymbolModel.ts
View file

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

74
test-server/http.js
View file

@ -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
};
};