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

Merged PR 194: Added option to disable any API call

Browse source 
Added option to disable any API call
Fix http.js and node-http.js
Fix MainContainer not using IAvailableContainer from MainContainer
Fix generate_dts.py script
More docs
Fix MainContainer default style. Extend config will now be taken into account. But Main container can still have its own type.
This commit is contained in:
Eric Nguyen 2022-09-23 15:59:42 +00:00
parent 8ba19cc96b
commit 3ecff4cf01
10 changed files with 648 additions and 570 deletions
Download patch file Download diff file Expand all files Collapse all files

111
public/smartcomponent/svg-layout-designer.ts
View file

@ -7,6 +7,7 @@
export class SVGLayoutDesigner extends Components.ComponentBase { export class SVGLayoutDesigner extends Components.ComponentBase {
private _hooks: Record<string, (e: CustomEvent) => void>;
public App: AppController; public App: AppController;
public Editor: EditorController; public Editor: EditorController;
@ -14,6 +15,7 @@
super(componentInfo, params); super(componentInfo, params);
this.App = new AppController(this, this.$component); this.App = new AppController(this, this.$component);
this.Editor = new EditorController(this, this.$component); this.Editor = new EditorController(this, this.$component);
this._hooks = {};
} }
/** /**
@ -32,7 +34,7 @@
* @param callback Callback function to call in the event listener * @param callback Callback function to call in the event listener
* @param eventType Event type for the listener to listen to * @param eventType Event type for the listener to listen to
*/ */
public AddEventListener(callback: ((...args: any[]) => void) | undefined, eventType: string) { public AddEventListener(eventType: string, callback: ((...args: any[]) => void) | undefined) {
const root = this.GetRootComponent(); const root = this.GetRootComponent();
const listener = (e: CustomEvent) => { const listener = (e: CustomEvent) => {
e.target.removeEventListener(e.type, listener); e.target.removeEventListener(e.type, listener);
@ -41,6 +43,40 @@
root.addEventListener(eventType, listener); root.addEventListener(eventType, listener);
} }
/// Hooks ///
private static EDITOR_LISTENER_TYPE = 'editorListener';
/**
* Add a hook to the editor state change.
* After every time an action is perform on the editor, the callback will be called
* @param callback Callback to add that listen to the event
*/
public AddEditorListenerHook(hookId: string, callback: (state: IEditorState) => void): void {
const root = this.GetRootComponent();
const customEvent = (e: CustomEvent) => {
callback(e.detail);
}
if (this._hooks[hookId] !== undefined) {
console.error(`HookId is already occupied. Please use a different HookId: ${hookId}`);
return;
}
this._hooks[hookId] = customEvent;
root.addEventListener(SVGLayoutDesigner.EDITOR_LISTENER_TYPE, customEvent);
}
/**
* Remove a hook to the editor state change.
* @param callback Callback to remove that listen to the event
*/
public RemoveEditorListenerHook(hookId): void {
const root = this.GetRootComponent();
root.removeEventListener(SVGLayoutDesigner.EDITOR_LISTENER_TYPE, this._hooks[hookId]);
delete this._hooks[hookId];
}
/// Macros /// /// Macros ///
@ -99,7 +135,7 @@
*/ */
public SetEditor(newEditor: IEditorState, callback?: (state: IEditorState) => void) { public SetEditor(newEditor: IEditorState, callback?: (state: IEditorState) => void) {
const eventType = 'setEditor'; const eventType = 'setEditor';
this.app.AddEventListener(callback, eventType); this.app.AddEventListener(eventType, callback);
const component = this.GetAppComponent(); const component = this.GetAppComponent();
component.dispatchEvent(new CustomEvent(eventType, { detail: newEditor })) component.dispatchEvent(new CustomEvent(eventType, { detail: newEditor }))
} }
@ -112,7 +148,7 @@
*/ */
public SetLoaded(isLoaded: boolean, callback?: (state: IEditorState) => void) { public SetLoaded(isLoaded: boolean, callback?: (state: IEditorState) => void) {
const eventType = 'setLoaded'; const eventType = 'setLoaded';
this.app.AddEventListener(callback, eventType); this.app.AddEventListener(eventType, callback);
const component = this.GetAppComponent(); const component = this.GetAppComponent();
component.dispatchEvent(new CustomEvent(eventType, { detail: isLoaded })) component.dispatchEvent(new CustomEvent(eventType, { detail: isLoaded }))
} }
@ -122,12 +158,10 @@
class EditorController { class EditorController {
app: SVGLayoutDesigner; app: SVGLayoutDesigner;
$component: JQuery; $component: JQuery;
private _hooks: Record<string, (e: CustomEvent) => void>;
constructor(app: SVGLayoutDesigner, $component: JQuery) { constructor(app: SVGLayoutDesigner, $component: JQuery) {
this.app = app; this.app = app;
this.$component = $component; this.$component = $component;
this._hooks = {};
} }
/** /**
@ -154,7 +188,7 @@
*/ */
public GetCurrentHistoryState(callback: (state: IHistoryState) => void) { public GetCurrentHistoryState(callback: (state: IHistoryState) => void) {
const eventType = 'getCurrentHistoryState'; const eventType = 'getCurrentHistoryState';
this.app.AddEventListener(callback, eventType); this.app.AddEventListener(eventType, callback);
const component = this.GetEditorComponent(); const component = this.GetEditorComponent();
component.dispatchEvent(new CustomEvent(eventType)); component.dispatchEvent(new CustomEvent(eventType));
} }
@ -165,7 +199,7 @@
*/ */
public GetEditorState(callback: (state: IEditorState) => void) { public GetEditorState(callback: (state: IEditorState) => void) {
const eventType = 'getEditorState'; const eventType = 'getEditorState';
this.app.AddEventListener(callback, eventType); this.app.AddEventListener(eventType, callback);
const component = this.GetEditorComponent(); const component = this.GetEditorComponent();
component.dispatchEvent(new CustomEvent(eventType)); component.dispatchEvent(new CustomEvent(eventType));
} }
@ -177,7 +211,7 @@
*/ */
public SetHistory(history: IHistoryState[], callback?: (state: IEditorState) => void) { public SetHistory(history: IHistoryState[], callback?: (state: IEditorState) => void) {
const eventType = 'setHistory'; const eventType = 'setHistory';
this.app.AddEventListener(callback, eventType); this.app.AddEventListener(eventType, callback);
const component = this.GetEditorComponent(); const component = this.GetEditorComponent();
component.dispatchEvent(new CustomEvent(eventType, { detail: history })); component.dispatchEvent(new CustomEvent(eventType, { detail: history }));
} }
@ -190,7 +224,7 @@
*/ */
public ReviveEditorState(editorState: IEditorState, callback: (state: IEditorState) => void) { public ReviveEditorState(editorState: IEditorState, callback: (state: IEditorState) => void) {
const eventType = 'reviveEditorState'; const eventType = 'reviveEditorState';
this.app.AddEventListener(callback, eventType); this.app.AddEventListener(eventType, callback);
const component = this.GetEditorComponent(); const component = this.GetEditorComponent();
component.dispatchEvent(new CustomEvent(eventType, { detail: editorState })); component.dispatchEvent(new CustomEvent(eventType, { detail: editorState }));
} }
@ -203,7 +237,7 @@
*/ */
public ReviveHistory(history: IHistoryState[], callback: (state: IHistoryState[]) => void) { public ReviveHistory(history: IHistoryState[], callback: (state: IHistoryState[]) => void) {
const eventType = 'reviveHistory'; const eventType = 'reviveHistory';
this.app.AddEventListener(callback, eventType); this.app.AddEventListener(eventType, callback);
const component = this.GetEditorComponent(); const component = this.GetEditorComponent();
component.dispatchEvent(new CustomEvent(eventType, { detail: history })); component.dispatchEvent(new CustomEvent(eventType, { detail: history }));
} }
@ -215,7 +249,7 @@
*/ */
public AppendNewHistoryState(historyState: IHistoryState, callback?: (state: IEditorState) => void) { public AppendNewHistoryState(historyState: IHistoryState, callback?: (state: IEditorState) => void) {
const eventType = 'appendNewState'; const eventType = 'appendNewState';
this.app.AddEventListener(callback, eventType); this.app.AddEventListener(eventType, callback);
this.GetEditorComponent().dispatchEvent(new CustomEvent(eventType, { detail: historyState })); this.GetEditorComponent().dispatchEvent(new CustomEvent(eventType, { detail: historyState }));
} }
@ -228,7 +262,7 @@
*/ */
public AddContainer(index: number, type: string, parentId: string, callback?: (state: IEditorState) => void) { public AddContainer(index: number, type: string, parentId: string, callback?: (state: IEditorState) => void) {
const eventType = 'addContainer'; const eventType = 'addContainer';
this.app.AddEventListener(callback, eventType); this.app.AddEventListener(eventType, callback);
const detail = { const detail = {
index, index,
type, type,
@ -245,7 +279,7 @@
*/ */
public AddContainerToSelectedContainer(index: number, type: string, callback?: (state: IEditorState) => void) { public AddContainerToSelectedContainer(index: number, type: string, callback?: (state: IEditorState) => void) {
const eventType = 'addContainerToSelectedContainer'; const eventType = 'addContainerToSelectedContainer';
this.app.AddEventListener(callback, eventType); this.app.AddEventListener(eventType, callback);
const detail = { const detail = {
index, index,
type type
@ -261,7 +295,7 @@
*/ */
public AppendContainer(type: string, parentId: string, callback?: (state: IEditorState) => void) { public AppendContainer(type: string, parentId: string, callback?: (state: IEditorState) => void) {
const eventType = 'appendContainer'; const eventType = 'appendContainer';
this.app.AddEventListener(callback, eventType); this.app.AddEventListener(eventType, callback);
const detail = { const detail = {
type, type,
parentId parentId
@ -277,7 +311,7 @@
*/ */
public AppendContainerToSelectedContainer(type: string, callback?: (state: IEditorState) => void) { public AppendContainerToSelectedContainer(type: string, callback?: (state: IEditorState) => void) {
const eventType = 'appendContainerToSelectedContainer'; const eventType = 'appendContainerToSelectedContainer';
this.app.AddEventListener(callback, eventType); this.app.AddEventListener(eventType, callback);
const detail = { const detail = {
type type
} }
@ -291,7 +325,7 @@
*/ */
public SelectContainer(containerId: string, callback?: (state: IEditorState) => void) { public SelectContainer(containerId: string, callback?: (state: IEditorState) => void) {
const eventType = 'selectContainer'; const eventType = 'selectContainer';
this.app.AddEventListener(callback, eventType); this.app.AddEventListener(eventType, callback);
const detail = { const detail = {
containerId containerId
} }
@ -305,7 +339,7 @@
*/ */
public DeleteContainer(containerId: string, callback?: (state: IEditorState) => void) { public DeleteContainer(containerId: string, callback?: (state: IEditorState) => void) {
const eventType = 'deleteContainer'; const eventType = 'deleteContainer';
this.app.AddEventListener(callback, eventType); this.app.AddEventListener(eventType, callback);
const detail = { const detail = {
containerId containerId
} }
@ -320,7 +354,7 @@
*/ */
public AddSymbol(name: string, callback?: (state: IEditorState) => void) { public AddSymbol(name: string, callback?: (state: IEditorState) => void) {
const eventType = 'addSymbol'; const eventType = 'addSymbol';
this.app.AddEventListener(callback, eventType); this.app.AddEventListener(eventType, callback);
const detail = { const detail = {
name name
} }
@ -334,7 +368,7 @@
*/ */
public SelectSymbol(symbolId: string, callback?: (state: IEditorState) => void) { public SelectSymbol(symbolId: string, callback?: (state: IEditorState) => void) {
const eventType = 'selectSymbol'; const eventType = 'selectSymbol';
this.app.AddEventListener(callback, eventType); this.app.AddEventListener(eventType, callback);
const detail = { const detail = {
symbolId symbolId
} }
@ -348,49 +382,12 @@
*/ */
public DeleteSymbol(symbolId: string, callback?: (state: IEditorState) => void) { public DeleteSymbol(symbolId: string, callback?: (state: IEditorState) => void) {
const eventType = 'deleteSymbol'; const eventType = 'deleteSymbol';
this.app.AddEventListener(callback, eventType); this.app.AddEventListener(eventType, callback);
const detail = { const detail = {
symbolId symbolId
} }
this.GetEditorComponent().dispatchEvent(new CustomEvent(eventType, { detail })); this.GetEditorComponent().dispatchEvent(new CustomEvent(eventType, { detail }));
} }
/// Hooks ///
private static EDITOR_LISTENER_TYPE = 'editorListener';
/**
* Add a hook to the editor state change.
* After every time an action is perform on the editor, the callback will be called
* @param callback Callback to add that listen to the event
*/
public AddEditorListenerHook(hookId: string, callback: (state: IEditorState) => void): void {
const root = this.app.GetRootComponent();
const customEvent = (e: CustomEvent) => {
callback(e.detail);
}
if (this._hooks[hookId] !== undefined) {
console.error(`HookId is already occupied. Please use a different HookId: ${hookId}`);
return;
}
this._hooks[hookId] = customEvent;
root.addEventListener(EditorController.EDITOR_LISTENER_TYPE, customEvent);
}
/**
* Remove a hook to the editor state change.
* @param callback Callback to remove that listen to the event
*/
public RemoveEditorListenerHook(hookId): void {
const root = this.app.GetRootComponent();
root.removeEventListener(EditorController.EDITOR_LISTENER_TYPE, this._hooks[hookId]);
delete this._hooks[hookId];
}
} }
ko.components.register('svg-layout-designer', { ko.components.register('svg-layout-designer', {

7
src/Components/App/Actions/MenuActions.ts
View file

@ -3,12 +3,17 @@ import { IConfiguration } from '../../../Interfaces/IConfiguration';
import { FetchConfiguration } from '../../API/api'; import { FetchConfiguration } from '../../API/api';
import { IEditorState } from '../../../Interfaces/IEditorState'; import { IEditorState } from '../../../Interfaces/IEditorState';
import { LoadState } from './Load'; import { LoadState } from './Load';
import { GetDefaultEditorState } from '../../../utils/default'; import { DISABLE_API, GetDefaultEditorState } from '../../../utils/default';
export function NewEditor( export function NewEditor(
setEditorState: Dispatch<SetStateAction<IEditorState>>, setEditorState: Dispatch<SetStateAction<IEditorState>>,
setLoaded: Dispatch<SetStateAction<boolean>> setLoaded: Dispatch<SetStateAction<boolean>>
): void { ): void {
if (DISABLE_API) {
setLoaded(true);
return;
}
// Fetch the configuration from the API // Fetch the configuration from the API
FetchConfiguration() FetchConfiguration()
.then((configuration: IConfiguration) => { .then((configuration: IConfiguration) => {

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

@ -33,20 +33,7 @@ export function GetAction(
} }
/* eslint-disable @typescript-eslint/naming-convention */ /* eslint-disable @typescript-eslint/naming-convention */
let prev; const { prev, next } = GetPreviousAndNextSiblings(container);
let next;
if (container.parent !== undefined &&
container.parent !== null &&
container.parent.children.length > 1
) {
const index = container.parent.children.indexOf(container);
if (index > 0) {
prev = container.parent.children[index - 1];
}
if (index < container.parent.children.length - 1) {
next = container.parent.children[index + 1];
}
}
const request: ISetContainerListRequest = { const request: ISetContainerListRequest = {
Container: container, Container: container,
@ -72,6 +59,23 @@ export function GetAction(
}; };
} }
function GetPreviousAndNextSiblings(container: IContainerModel): { prev: IContainerModel | undefined; next: IContainerModel | undefined; } {
let prev;
let next;
if (container.parent !== undefined &&
container.parent !== null &&
container.parent.children.length > 1) {
const index = container.parent.children.indexOf(container);
if (index > 0) {
prev = container.parent.children[index - 1];
}
if (index < container.parent.children.length - 1) {
next = container.parent.children[index + 1];
}
}
return { prev, next };
}
function HandleSetContainerList( function HandleSetContainerList(
action: IAction, action: IAction,
selectedContainer: IContainerModel, selectedContainer: IContainerModel,

6
src/Components/Editor/Editor.tsx
View file

@ -9,7 +9,7 @@ import { SaveEditorAsJSON, SaveEditorAsSVG } from './Actions/Save';
import { OnKey } from './Actions/Shortcuts'; import { OnKey } from './Actions/Shortcuts';
import { events as EVENTS } from '../../Events/EditorEvents'; import { events as EVENTS } from '../../Events/EditorEvents';
import { IEditorState } from '../../Interfaces/IEditorState'; import { IEditorState } from '../../Interfaces/IEditorState';
import { MAX_HISTORY } from '../../utils/default'; import { DISABLE_API, MAX_HISTORY } from '../../utils/default';
import { AddSymbol, OnPropertyChange as OnSymbolPropertyChange, DeleteSymbol, SelectSymbol } from './Actions/SymbolOperations'; import { AddSymbol, OnPropertyChange as OnSymbolPropertyChange, DeleteSymbol, SelectSymbol } from './Actions/SymbolOperations';
import { FindContainerById } from '../../utils/itertools'; import { FindContainerById } from '../../utils/itertools';
import { IMenuAction, Menu } from '../Menu/Menu'; import { IMenuAction, Menu } from '../Menu/Menu';
@ -62,6 +62,10 @@ function InitActions(
); );
// API Actions // API Actions
if (DISABLE_API) {
return;
}
for (const availableContainer of configuration.AvailableContainers) { for (const availableContainer of configuration.AvailableContainers) {
if (availableContainer.Actions === undefined || availableContainer.Actions === null) { if (availableContainer.Actions === undefined || availableContainer.Actions === null) {
continue; continue;

5
src/Components/MessagesSidebar/MessagesSidebar.tsx
View file

@ -6,6 +6,7 @@ import { IGetFeedbackRequest } from '../../Interfaces/IGetFeedbackRequest';
import { IGetFeedbackResponse } from '../../Interfaces/IGetFeedbackResponse'; import { IGetFeedbackResponse } from '../../Interfaces/IGetFeedbackResponse';
import { IHistoryState } from '../../Interfaces/IHistoryState'; import { IHistoryState } from '../../Interfaces/IHistoryState';
import { IMessage } from '../../Interfaces/IMessage'; import { IMessage } from '../../Interfaces/IMessage';
import { DISABLE_API } from '../../utils/default';
import { GetCircularReplacerKeepDataStructure } from '../../utils/saveload'; import { GetCircularReplacerKeepDataStructure } from '../../utils/saveload';
interface IMessagesSidebarProps { interface IMessagesSidebarProps {
@ -68,12 +69,12 @@ export function MessagesSidebar(props: IMessagesSidebarProps): JSX.Element {
const [messages, setMessages] = React.useState<IMessage[]>([]); const [messages, setMessages] = React.useState<IMessage[]>([]);
// eslint-disable-next-line @typescript-eslint/strict-boolean-expressions // eslint-disable-next-line @typescript-eslint/strict-boolean-expressions
if (window.Worker) { if (window.Worker && !DISABLE_API) {
UseWorker( UseWorker(
props.historyState, props.historyState,
setMessages setMessages
); );
} else { } else if (!DISABLE_API) {
UseAsync( UseAsync(
props.historyState, props.historyState,
setMessages setMessages

3
src/dts/generate_dts.py
View file

@ -27,7 +27,7 @@ export_pattern = re.compile(
r"export ([*] from [\"'\s].*[\"'\s]|{.*}(?: from [\"'\s].*[\"'\s])?);" r"export ([*] from [\"'\s].*[\"'\s]|{.*}(?: from [\"'\s].*[\"'\s])?);"
) )
filter_directories = ["./Enums", "./Interfaces"] filter_directories = ["./dist\Enums", "./dist\Interfaces"]
def main(): def main():
''' '''
@ -37,6 +37,7 @@ def main():
output_file.write(('declare namespace {} {{\n'.format(namespace))) output_file.write(('declare namespace {} {{\n'.format(namespace)))
for root, subdirs, files in os.walk('./'): for root, subdirs, files in os.walk('./'):
if root not in filter_directories: if root not in filter_directories:
print('SKIP ' + root)
continue continue
print('--\nroot = ' + root) print('--\nroot = ' + root)

942
src/dts/svgld.d.ts vendored
View file

@ -1,469 +1,473 @@
declare namespace SVGLD { declare namespace SVGLD {
/** /**
* Add method when creating a container * Add method when creating a container
* - Append will append to the last children in list * - Append will append to the last children in list
* - Insert will always place it at the begining * - Insert will always place it at the begining
* - Replace will remove the selected container and insert a new one * - Replace will remove the selected container and insert a new one
* (default: Append) * (default: Append)
*/ */
export enum AddMethod { export enum AddMethod {
Append = 0, Append = 0,
Insert = 1, Insert = 1,
Replace = 2 Replace = 2
} }
export enum MessageType { export enum MessageType {
Normal = 0, Normal = 0,
Success = 1, Success = 1,
Warning = 2, Warning = 2,
Error = 3 Error = 3
} }
/** /**
* Describe the type of the property. * Describe the type of the property.
* Used for the assignation in the OnPropertyChange function * Used for the assignation in the OnPropertyChange function
* See ContainerOperations.ts's OnPropertyChange * See ContainerOperations.ts's OnPropertyChange
*/ */
export enum PropertyType { export enum PropertyType {
/** /**
* Simple property: is not inside any object: id, x, width... (default) * Simple property: is not inside any object: id, x, width... (default)
*/ */
Simple = 0, Simple = 0,
/** /**
* Style property: is inside the style object: stroke, fillOpacity... * Style property: is inside the style object: stroke, fillOpacity...
*/ */
Style = 1, Style = 1,
/** /**
* Margin property: is inside the margin property: left, bottom, top, right... * Margin property: is inside the margin property: left, bottom, top, right...
*/ */
Margin = 2 Margin = 2
} }
export enum XPositionReference { export enum XPositionReference {
Left = 0, Left = 0,
Center = 1, Center = 1,
Right = 2 Right = 2
} }
export interface IAction { export interface IAction {
Id: string; Id: string;
CustomLogo: IImage; CustomLogo: IImage;
Label: string; Label: string;
Description: string; Description: string;
Action: string; Action: string;
AddingBehavior: AddMethod; AddingBehavior: AddMethod;
} }
/** Model of available container used in application configuration */ /** Model of available container used in application configuration */
export interface IAvailableContainer { export interface IAvailableContainer {
/** type */ /** type */
Type: string; Type: string;
/** displayed text */ /** displayed text */
DisplayedText?: string; DisplayedText?: string;
/** category */ /** category */
Category?: string; Category?: string;
/** horizontal offset */ /** horizontal offset */
X?: number; X?: number;
/** vertical offset */ /** vertical offset */
Y?: number; Y?: number;
/** width */ /** width */
Width?: number; Width?: number;
/** height */ /** height */
Height?: number; Height?: number;
/** /**
* Minimum width (min=1) * Minimum width (min=1)
* Allows the container to set isRigidBody to false when it gets squeezed * Allows the container to set isRigidBody to false when it gets squeezed
* by an anchor * by an anchor
*/ */
MinWidth?: number; MinWidth?: number;
/** /**
* Maximum width * Maximum width
*/ */
MaxWidth?: number; MaxWidth?: number;
/** margin */ /** margin */
Margin?: IMargin; Margin?: IMargin;
/** true if anchor, false otherwise */ /** true if anchor, false otherwise */
IsAnchor?: boolean; IsAnchor?: boolean;
/** true if flex, false otherwise */ /** true if flex, false otherwise */
IsFlex?: boolean; IsFlex?: boolean;
/** Method used on container add */ /** Method used on container add */
AddMethod?: AddMethod; AddMethod?: AddMethod;
/** Horizontal alignment, also determines the visual location of x {Left = 0, Center, Right } */ /** Horizontal alignment, also determines the visual location of x {Left = 0, Center, Right } */
XPositionReference?: XPositionReference; XPositionReference?: XPositionReference;
/** /**
* (optional) * (optional)
* Replace a <rect> by a customized "SVG". It is not really an svg but it at least allows * Replace a <rect> by a customized "SVG". It is not really an svg but it at least allows
* to draw some patterns that can be bind to the properties of the container * to draw some patterns that can be bind to the properties of the container
* Use {prop} to bind a property. Use {{ styleProp }} to use an object. * Use {prop} to bind a property. Use {{ styleProp }} to use an object.
* Example : * Example :
* ``` * ```
* `<rect width="{width}" height="{height}" style="{style}"></rect> * `<rect width="{width}" height="{height}" style="{style}"></rect>
* <rect width="{width}" height="{height}" stroke="black" fill-opacity="0"></rect> * <rect width="{width}" height="{height}" stroke="black" fill-opacity="0"></rect>
* <line x1="0" y1="0" x2="{width}" y2="{height}" stroke="black" style='{{ "transform":"scaleY(0.5)"}}'></line> * <line x1="0" y1="0" x2="{width}" y2="{height}" stroke="black" style='{{ "transform":"scaleY(0.5)"}}'></line>
* <line x1="{width}" y1="0" x2="0" y2="{height}" stroke="black" style='{userData.styleLine}'></line> * <line x1="{width}" y1="0" x2="0" y2="{height}" stroke="black" style='{userData.styleLine}'></line>
* ` * `
* ``` * ```
*/ */
CustomSVG?: string; CustomSVG?: string;
/** /**
* (optional) * (optional)
* Disabled when Pattern is used. * Disabled when Pattern is used.
* *
* Replace a <rect> by a customized "SVG". It is not really an svg but it at least allows * Replace a <rect> by a customized "SVG". It is not really an svg but it at least allows
* to draw some patterns that can be bind to the properties of the container * to draw some patterns that can be bind to the properties of the container
* Use {prop} to bind a property. Use {{ styleProp }} to use an object. * Use {prop} to bind a property. Use {{ styleProp }} to use an object.
* Example : * Example :
* ``` * ```
* `<rect width="{width}" height="{height}" style="{style}"></rect> * `<rect width="{width}" height="{height}" style="{style}"></rect>
* <rect width="{width}" height="{height}" stroke="black" fill-opacity="0"></rect> * <rect width="{width}" height="{height}" stroke="black" fill-opacity="0"></rect>
* <line x1="0" y1="0" x2="{width}" y2="{height}" stroke="black" style='{{ "transform":"scaleY(0.5)"}}'></line> * <line x1="0" y1="0" x2="{width}" y2="{height}" stroke="black" style='{{ "transform":"scaleY(0.5)"}}'></line>
* <line x1="{width}" y1="0" x2="0" y2="{height}" stroke="black" style='{userData.styleLine}'></line> * <line x1="{width}" y1="0" x2="0" y2="{height}" stroke="black" style='{userData.styleLine}'></line>
* ` * `
* ``` * ```
*/ */
DefaultChildType?: string; DefaultChildType?: string;
/** /**
* Allow to use a Pattern to create the list of children * Allow to use a Pattern to create the list of children
* Cannot be used with DefaultChildType, * Cannot be used with DefaultChildType,
* DefaultChildType will be disabled for this container and the children * DefaultChildType will be disabled for this container and the children
*/ */
Pattern?: string; Pattern?: string;
/** if true, show the dimension of the container */ /** Hide the children in the treeview */
ShowSelfDimensions?: boolean; HideChildrenInTreeview?: boolean;
/** if true show the overall dimensions of its children */ /** if true, show the dimension of the container */
ShowChildrenDimensions?: boolean; ShowSelfDimensions?: boolean;
/** /** if true show the overall dimensions of its children */
* if true, allows a parent dimension borrower to uses its x coordinate for as a reference point for a dimension ShowChildrenDimensions?: boolean;
*/ /**
MarkPositionToDimensionBorrower?: boolean; * if true, allows a parent dimension borrower to uses its x coordinate for as a reference point for a dimension
/** */
* if true, show a dimension from the edge of the container to end MarkPositionToDimensionBorrower?: boolean;
* and insert dimensions marks at lift up children (see liftDimensionToBorrower) /**
*/ * if true, show a dimension from the edge of the container to end
IsDimensionBorrower?: boolean; * and insert dimensions marks at lift up children (see liftDimensionToBorrower)
/** */
* if true, hide the entry in the sidebar (default: false) IsDimensionBorrower?: boolean;
*/ /**
IsHidden?: boolean; * if true, hide the entry in the sidebar (default: false)
/** */
* Disable a list of available container to be added inside IsHidden?: boolean;
*/ /**
Blacklist?: string[]; * Disable a list of available container to be added inside
/** */
* Cannot be used with blacklist. Whitelist will be prioritized. Blacklist?: string[];
* To disable the whitelist, Whitelist must be undefined. /**
* Only allow a set of available container to be added inside * Cannot be used with blacklist. Whitelist will be prioritized.
*/ * To disable the whitelist, Whitelist must be undefined.
Whitelist?: string[]; * Only allow a set of available container to be added inside
/** */
* (optional) Whitelist?: string[];
* Style of the <rect> /**
*/ * (optional)
Style?: React.CSSProperties; * Style of the <rect>
/** */
* List of possible actions shown on right-click Style?: React.CSSProperties;
*/ /**
Actions?: IAction[]; * List of possible actions shown on right-click
/** */
* (optional) Actions?: IAction[];
* User data that can be used for data storage or custom SVG /**
*/ * (optional)
UserData?: object; * User data that can be used for data storage or custom SVG
} */
UserData?: object;
}
/**
* Model of available symbol to configure the application */
export interface IAvailableSymbol { /**
Name: string; * Model of available symbol to configure the application */
Image: IImage; export interface IAvailableSymbol {
Width?: number; Name: string;
Height?: number; Image: IImage;
XPositionReference?: XPositionReference; Width?: number;
} Height?: number;
XPositionReference?: XPositionReference;
export interface ICategory { }
Type: string;
DisplayedText?: string; export interface ICategory {
} Type: string;
DisplayedText?: string;
}
/** Model of configuration for the application to configure it */
export interface IConfiguration {
AvailableContainers: IAvailableContainer[]; /** Model of configuration for the application to configure it */
AvailableSymbols: IAvailableSymbol[]; export interface IConfiguration {
Categories: ICategory[]; AvailableContainers: IAvailableContainer[];
Patterns: IPattern[]; AvailableSymbols: IAvailableSymbol[];
MainContainer: IAvailableContainer; Categories: ICategory[];
} Patterns: IPattern[];
MainContainer: IAvailableContainer;
}
export interface IContainerModel {
children: IContainerModel[];
parent: IContainerModel | null; export interface IContainerModel {
properties: IContainerProperties; children: IContainerModel[];
userData: Record<string, string | number>; parent: IContainerModel | null;
} properties: IContainerProperties;
/** userData: Record<string, string | number>;
* Macro for creating the interface }
* Do not add methods since they will be lost during serialization /**
*/ * Macro for creating the interface
export class ContainerModel implements IContainerModel { * Do not add methods since they will be lost during serialization
children: IContainerModel[]; */
parent: IContainerModel | null; export class ContainerModel implements IContainerModel {
properties: IContainerProperties; children: IContainerModel[];
userData: Record<string, string | number>; parent: IContainerModel | null;
constructor(parent: IContainerModel | null, properties: IContainerProperties, children?: IContainerModel[], userData?: {}); properties: IContainerProperties;
} userData: Record<string, string | number>;
constructor(parent: IContainerModel | null, properties: IContainerProperties, children?: IContainerModel[], userData?: {});
}
/**
* Properties of a container
*/ /**
export interface IContainerProperties { * Properties of a container
/** id of the container */ */
id: string; export interface IContainerProperties {
/** type matching the configuration on construction */ /** id of the container */
type: string; id: string;
/** id of the parent container (null when there is no parent) */ /** type matching the configuration on construction */
parentId: string; type: string;
/** id of the linked symbol ('' when there is no parent) */ /** id of the parent container (null when there is no parent) */
linkedSymbolId: string; parentId: string;
/** Text displayed in the container */ /** id of the linked symbol ('' when there is no parent) */
displayedText: string; linkedSymbolId: string;
/** horizontal offset */ /** Text displayed in the container */
x: number; displayedText: string;
/** vertical offset */ /** horizontal offset */
y: number; x: number;
/** margin */ /** vertical offset */
margin: IMargin; y: number;
/** /** margin */
* Minimum width (min=1) margin: IMargin;
* Allows the container to set isRigidBody to false when it gets squeezed /**
* by an anchor * Minimum width (min=1)
*/ * Allows the container to set isRigidBody to false when it gets squeezed
minWidth: number; * by an anchor
/** */
* Maximum width minWidth: number;
*/ /**
maxWidth: number; * Maximum width
/** width */ */
width: number; maxWidth: number;
/** height */ /** width */
height: number; width: number;
/** true if anchor, false otherwise */ /** height */
isAnchor: boolean; height: number;
/** true if flex, false otherwise */ /** true if anchor, false otherwise */
isFlex: boolean; isAnchor: boolean;
/** Horizontal alignment, also determines the visual location of x {Left = 0, Center, Right } */ /** true if flex, false otherwise */
xPositionReference: XPositionReference; isFlex: boolean;
/** if true, show the dimension of the container */ /** Horizontal alignment, also determines the visual location of x {Left = 0, Center, Right } */
showSelfDimensions: boolean; xPositionReference: XPositionReference;
/** if true show the overall dimensions of its children */ /** Hide the children in the treeview */
showChildrenDimensions: boolean; hideChildrenInTreeview: boolean;
/** /** if true, show the dimension of the container */
* if true, allows a parent dimension borrower to borrow its x coordinate showSelfDimensions: boolean;
* as a reference point for a dimension /** if true show the overall dimensions of its children */
*/ showChildrenDimensions: boolean;
markPositionToDimensionBorrower: boolean; /**
/** * if true, allows a parent dimension borrower to borrow its x coordinate
* if true, show a dimension from the edge of the container to end * as a reference point for a dimension
* and insert dimensions marks at lift up children (see liftDimensionToBorrower) */
*/ markPositionToDimensionBorrower: boolean;
isDimensionBorrower: boolean; /**
/** * if true, show a dimension from the edge of the container to end
* Warnings of a container * and insert dimensions marks at lift up children (see liftDimensionToBorrower)
*/ */
warning: string; isDimensionBorrower: boolean;
/** /**
* (optional) * Warnings of a container
* Replace a <rect> by a customized "SVG". It is not really an svg but it at least allows */
* to draw some patterns that can be bind to the properties of the container warning: string;
* Use {prop} to bind a property. Use {{ styleProp }} to use an object. /**
* Example : * (optional)
* ``` * Replace a <rect> by a customized "SVG". It is not really an svg but it at least allows
* `<rect width="{width}" height="{height}" style="{style}"></rect> * to draw some patterns that can be bind to the properties of the container
* <rect width="{width}" height="{height}" stroke="black" fill-opacity="0"></rect> * Use {prop} to bind a property. Use {{ styleProp }} to use an object.
* <line x1="0" y1="0" x2="{width}" y2="{height}" stroke="black" style='{{ "transform":"scaleY(0.5)"}}'></line> * Example :
* <line x1="{width}" y1="0" x2="0" y2="{height}" stroke="black" style='{userData.styleLine}'></line> * ```
* ` * `<rect width="{width}" height="{height}" style="{style}"></rect>
* ``` * <rect width="{width}" height="{height}" stroke="black" fill-opacity="0"></rect>
*/ * <line x1="0" y1="0" x2="{width}" y2="{height}" stroke="black" style='{{ "transform":"scaleY(0.5)"}}'></line>
customSVG?: string; * <line x1="{width}" y1="0" x2="0" y2="{height}" stroke="black" style='{userData.styleLine}'></line>
/** * `
* (optional) * ```
* Style of the <rect> */
*/ customSVG?: string;
style?: React.CSSProperties; /**
/** * (optional)
* (optional) * Style of the <rect>
* User data that can be used for data storage or custom SVG */
*/ style?: React.CSSProperties;
userData?: object; /**
} * (optional)
* User data that can be used for data storage or custom SVG
*/
userData?: object;
export interface IEditorState { }
history: IHistoryState[];
historyCurrentStep: number;
configuration: IConfiguration;
} export interface IEditorState {
history: IHistoryState[];
historyCurrentStep: number;
export interface IGetFeedbackRequest { configuration: IConfiguration;
/** Current application state */ }
ApplicationState: IHistoryState;
}
export interface IGetFeedbackRequest {
/** Current application state */
export interface IGetFeedbackResponse { ApplicationState: IHistoryState;
messages: IMessage[]; }
}
export interface IGetFeedbackResponse {
messages: IMessage[];
export interface IHistoryState { }
/** Last editor action */
lastAction: string;
/** Reference to the main container */
mainContainer: IContainerModel; export interface IHistoryState {
/** Id of the selected container */ /** Last editor action */
selectedContainerId: string; lastAction: string;
/** Counter of type of container. Used for ids. */ /** Reference to the main container */
typeCounters: Record<string, number>; mainContainer: IContainerModel;
/** List of symbols */ /** Id of the selected container */
symbols: Map<string, ISymbolModel>; selectedContainerId: string;
/** Selected symbols id */ /** Counter of type of container. Used for ids. */
selectedSymbolId: string; typeCounters: Record<string, number>;
} /** List of symbols */
symbols: Map<string, ISymbolModel>;
/** /** Selected symbols id */
* Model of an image with multiple source selectedSymbolId: string;
* It must at least have one source. }
*
* If Url/Base64Image and Svg are set, /**
* Url/Base64Image will be shown in the menu while SVG will be drawn * Model of an image with multiple source
*/ * It must at least have one source.
export interface IImage { *
/** Name of the image */ * If Url/Base64Image and Svg are set,
Name: string; * Url/Base64Image will be shown in the menu while SVG will be drawn
/** (optional) Url of the image */ */
Url?: string; export interface IImage {
/** (optional) base64 data of the image */ /** Name of the image */
Base64Image?: string; Name: string;
/** (optional) SVG string */ /** (optional) Url of the image */
Svg?: string; Url?: string;
} /** (optional) base64 data of the image */
Base64Image?: string;
/** (optional) SVG string */
export interface IInputGroup { Svg?: string;
text: React.ReactNode; }
value: string;
}
export interface IInputGroup {
export interface IMargin { text: React.ReactNode;
left?: number; value: string;
bottom?: number; }
top?: number;
right?: number; export interface IMargin {
} left?: number;
bottom?: number;
top?: number;
export interface IMessage { right?: number;
text: string; }
type: MessageType;
}
export interface IMessage {
text: string;
export interface IPattern { type: MessageType;
/** }
* Unique id for the pattern
*/
id: string; export interface IPattern {
/** /**
* Text to display in the sidebar * Unique id for the pattern
*/ */
text: string; id: string;
/** /**
* IAvailableContainer id used to wrap the children. * Text to display in the sidebar
*/ */
wrapper: string; text: string;
/** /**
* List of ids of Pattern or IAvailableContainer * IAvailableContainer id used to wrap the children.
* If a IAvailableContainer and a Pattern have the same id, */
* IAvailableContainer will be prioritized wrapper: string;
*/ /**
children: string[]; * List of ids of Pattern or IAvailableContainer
} * If a IAvailableContainer and a Pattern have the same id,
export type ContainerOrPattern = IAvailableContainer | IPattern; * IAvailableContainer will be prioritized
export function GetPattern(id: string, configs: Map<string, IAvailableContainer>, patterns: Map<string, IPattern>): ContainerOrPattern | undefined; */
export function IsPattern(id: string, configs: Map<string, IAvailableContainer>, patterns: Map<string, IPattern>): boolean; children: string[];
}
export interface IPoint { export type ContainerOrPattern = IAvailableContainer | IPattern;
x: number; export function GetPattern(id: string, configs: Map<string, IAvailableContainer>, patterns: Map<string, IPattern>): ContainerOrPattern | undefined;
y: number; export function IsPattern(id: string, configs: Map<string, IAvailableContainer>, patterns: Map<string, IPattern>): boolean;
}
export interface IPoint {
x: number;
y: number;
export interface ISetContainerListRequest { }
/** Name of the action declared in the API */
Action: string;
/** Selected container */
Container: IContainerModel; export interface ISetContainerListRequest {
/** The previous sibling container */ /** Name of the action declared in the API */
PreviousContainer: IContainerModel | undefined; Action: string;
/** The next sibling container */ /** Selected container */
NextContainer: IContainerModel | undefined; Container: IContainerModel;
/** Current application state */ /** The previous sibling container */
ApplicationState: IHistoryState; PreviousContainer: IContainerModel | undefined;
} /** The next sibling container */
NextContainer: IContainerModel | undefined;
/** Current application state */
export interface ISetContainerListResponse { ApplicationState: IHistoryState;
Containers: IAvailableContainer[]; }
}
/** export interface ISetContainerListResponse {
* A SizePointer is a pointer in a 1 dimensional array of width/space Containers: IAvailableContainer[];
* x being the address where the pointer is pointing }
* width being the overall (un)allocated space affected to the address
*/ /**
export interface ISizePointer { * A SizePointer is a pointer in a 1 dimensional array of width/space
x: number; * x being the address where the pointer is pointing
width: number; * width being the overall (un)allocated space affected to the address
} */
export interface ISizePointer {
x: number;
export interface ISymbolModel { width: number;
/** Identifier */ }
id: string;
/** Type */
type: string; export interface ISymbolModel {
/** Configuration of the symbol */ /** Identifier */
config: IAvailableSymbol; id: string;
/** Horizontal offset */ /** Type */
x: number; type: string;
/** Width */ /** Configuration of the symbol */
width: number; config: IAvailableSymbol;
/** Height */ /** Horizontal offset */
height: number; x: number;
/** List of linked container id */ /** Width */
linkedContainers: Set<string>; width: number;
} /** Height */
height: number;
} /** List of linked container id */
linkedContainers: Set<string>;
}
}

73
src/utils/default.ts
View file

@ -9,10 +9,22 @@ import { ISymbolModel } from '../Interfaces/ISymbolModel';
/// EDITOR DEFAULTS /// /// EDITOR DEFAULTS ///
export const FAST_BOOT = import.meta.env.PROD; /** Enable fast boot and disable main menu */
export const FAST_BOOT = false;
/** Disable any call to the API */
export const DISABLE_API = false;
/** Enable keyboard shortcuts */
export const ENABLE_SHORTCUTS = true; export const ENABLE_SHORTCUTS = true;
/** Size of the history */
export const MAX_HISTORY = 200; export const MAX_HISTORY = 200;
/** Apply beheviors on children */
export const APPLY_BEHAVIORS_ON_CHILDREN = true; export const APPLY_BEHAVIORS_ON_CHILDREN = true;
/** Framerate of the svg controller */
export const MAX_FRAMERATE = 60; export const MAX_FRAMERATE = 60;
/// CONTAINER DEFAULTS /// /// CONTAINER DEFAULTS ///
@ -53,15 +65,58 @@ export const DEFAULT_SYMBOL_HEIGHT = 32;
* Returns the default editor state given the configuration * Returns the default editor state given the configuration
*/ */
export function GetDefaultEditorState(configuration: IConfiguration): IEditorState { export function GetDefaultEditorState(configuration: IConfiguration): IEditorState {
if (configuration.MainContainer.Width === undefined ||
configuration.MainContainer.Height === undefined) {
throw new Error('Cannot initialize project! Main container has an undefined size');
}
const containerConfig = configuration.AvailableContainers.find(config => config.Type === configuration.MainContainer.Type);
let mainContainerConfig: IContainerProperties;
if (containerConfig !== undefined) {
const clone = structuredClone(containerConfig);
const extendedContainerConfig = Object.assign(clone, configuration.MainContainer);
if (containerConfig.Style !== undefined) {
const styleClone = structuredClone(containerConfig.Style);
extendedContainerConfig.Style = Object.assign(styleClone, configuration.MainContainer.Style);
}
if (extendedContainerConfig.Width === undefined ||
extendedContainerConfig.Height === undefined) {
throw new Error('Cannot initialize project! Main container has an undefined size');
}
mainContainerConfig = GetDefaultContainerProps(
extendedContainerConfig.Type,
0,
null,
0,
0,
extendedContainerConfig.Width,
extendedContainerConfig.Height,
extendedContainerConfig
);
} else {
mainContainerConfig = GetDefaultContainerProps(
configuration.MainContainer.Type,
0,
null,
0,
0,
configuration.MainContainer.Width,
configuration.MainContainer.Height,
configuration.MainContainer
);
}
const mainContainer = new ContainerModel( const mainContainer = new ContainerModel(
null, null,
{ mainContainerConfig
...DEFAULT_MAINCONTAINER_PROPS,
width: Number(configuration.MainContainer.Width),
height: Number(configuration.MainContainer.Height)
}
); );
const typeCounters = {};
(typeCounters as any)[mainContainer.properties.type] = 0;
return { return {
configuration, configuration,
history: [ history: [
@ -69,7 +124,7 @@ export function GetDefaultEditorState(configuration: IConfiguration): IEditorSta
lastAction: '', lastAction: '',
mainContainer, mainContainer,
selectedContainerId: mainContainer.properties.id, selectedContainerId: mainContainer.properties.id,
typeCounters: {}, typeCounters,
symbols: new Map(), symbols: new Map(),
selectedSymbolId: '' selectedSymbolId: ''
} }
@ -152,7 +207,7 @@ export const DEFAULT_MAINCONTAINER_PROPS: IContainerProperties = {
*/ */
export function GetDefaultContainerProps(type: string, export function GetDefaultContainerProps(type: string,
typeCount: number, typeCount: number,
parent: IContainerModel, parent: IContainerModel | undefined | null,
x: number, x: number,
y: number, y: number,
width: number, width: number,
@ -161,7 +216,7 @@ export function GetDefaultContainerProps(type: string,
return ({ return ({
id: `${type}-${typeCount}`, id: `${type}-${typeCount}`,
type, type,
parentId: parent.properties.id, parentId: parent?.properties.id ?? '',
linkedSymbolId: '', linkedSymbolId: '',
displayedText: `${containerConfig.DisplayedText ?? type}-${typeCount}`, displayedText: `${containerConfig.DisplayedText ?? type}-${typeCount}`,
x, x,

18
test-server/http.js
View file

@ -83,8 +83,6 @@ const GetSVGLayoutConfiguration = () => {
{ {
Type: 'Trou', Type: 'Trou',
Blacklist: ["Chassis"], Blacklist: ["Chassis"],
DefaultX: 0,
DefaultY: 0,
Margin: { Margin: {
left: 10, left: 10,
bottom: 10, bottom: 10,
@ -112,10 +110,14 @@ const GetSVGLayoutConfiguration = () => {
, ,
Actions: [ Actions: [
{ {
Id: "SplitRemplissage",
Action: "SplitRemplissage", Action: "SplitRemplissage",
Label: "Diviser le remplissage", Label: "Diviser le remplissage",
Description: "Diviser le remplissage en insérant un montant", Description: "Diviser le remplissage en insérant un montant",
CustomLogo: { CustomLogo: {
Base64Image: null,
Name: 'Image1',
Svg: null,
Url: "" Url: ""
}, },
AddingBehavior: 2 AddingBehavior: 2
@ -186,7 +188,7 @@ const GetSVGLayoutConfiguration = () => {
Height: 32, Height: 32,
Image: { Image: {
Base64Image: null, Base64Image: null,
Name: null, Name: 'Image1',
Svg: null, Svg: null,
Url: 'https://www.manutan.fr/img/S/GRP/ST/AIG3930272.jpg' Url: 'https://www.manutan.fr/img/S/GRP/ST/AIG3930272.jpg'
}, },
@ -198,7 +200,7 @@ const GetSVGLayoutConfiguration = () => {
Height: 32, Height: 32,
Image: { Image: {
Base64Image: null, Base64Image: null,
Name: null, Name: 'Image2',
Svg: null, Svg: null,
Url: 'https://e7.pngegg.com/pngimages/647/127/png-clipart-svg-working-group-information-world-wide-web-internet-structure.png' Url: 'https://e7.pngegg.com/pngimages/647/127/png-clipart-svg-working-group-information-world-wide-web-internet-structure.png'
}, },
@ -216,11 +218,13 @@ const GetSVGLayoutConfiguration = () => {
DisplayedText: "Stuff not made here" DisplayedText: "Stuff not made here"
} }
], ],
Patterns: [],
MainContainer: { MainContainer: {
Height: 200, Type: 'main',
Width: 800 Width: 800,
Height: 200
} }
}; }
}; };
const FillHoleWithChassis = (request) => { const FillHoleWithChassis = (request) => {

21
test-server/node-http.js
View file

@ -2,7 +2,7 @@ import http from 'http';
const host = 'localhost'; const host = 'localhost';
const port = 5000; const port = 5000;
const requestListener = async(request, response) => { const requestListener = async (request, response) => {
response.setHeader('Access-Control-Allow-Origin', '*'); response.setHeader('Access-Control-Allow-Origin', '*');
response.setHeader('Access-Control-Allow-Headers', '*'); response.setHeader('Access-Control-Allow-Headers', '*');
response.setHeader('Access-Control-Allow-Methods', 'GET, POST, PUT, DELETE, PATCH, OPTIONS'); response.setHeader('Access-Control-Allow-Methods', 'GET, POST, PUT, DELETE, PATCH, OPTIONS');
@ -81,7 +81,6 @@ const GetSVGLayoutConfiguration = () => {
stroke: 'red', stroke: 'red',
fill: '#d3c9b7', fill: '#d3c9b7',
}, },
HideChildrenInTreeview: true,
ShowSelfDimensions: true, ShowSelfDimensions: true,
IsDimensionBorrower: true, IsDimensionBorrower: true,
Category: "Stuff" Category: "Stuff"
@ -89,8 +88,6 @@ const GetSVGLayoutConfiguration = () => {
{ {
Type: 'Trou', Type: 'Trou',
Blacklist: ["Chassis"], Blacklist: ["Chassis"],
DefaultX: 0,
DefaultY: 0,
Margin: { Margin: {
left: 10, left: 10,
bottom: 10, bottom: 10,
@ -118,10 +115,14 @@ const GetSVGLayoutConfiguration = () => {
, ,
Actions: [ Actions: [
{ {
Id: "SplitRemplissage",
Action: "SplitRemplissage", Action: "SplitRemplissage",
Label: "Diviser le remplissage", Label: "Diviser le remplissage",
Description: "Diviser le remplissage en insérant un montant", Description: "Diviser le remplissage en insérant un montant",
CustomLogo: { CustomLogo: {
Base64Image: null,
Name: 'Image1',
Svg: null,
Url: "" Url: ""
}, },
AddingBehavior: 2 AddingBehavior: 2
@ -192,7 +193,7 @@ const GetSVGLayoutConfiguration = () => {
Height: 32, Height: 32,
Image: { Image: {
Base64Image: null, Base64Image: null,
Name: null, Name: 'Image1',
Svg: null, Svg: null,
Url: 'https://www.manutan.fr/img/S/GRP/ST/AIG3930272.jpg' Url: 'https://www.manutan.fr/img/S/GRP/ST/AIG3930272.jpg'
}, },
@ -204,7 +205,7 @@ const GetSVGLayoutConfiguration = () => {
Height: 32, Height: 32,
Image: { Image: {
Base64Image: null, Base64Image: null,
Name: null, Name: 'Image2',
Svg: null, Svg: null,
Url: 'https://e7.pngegg.com/pngimages/647/127/png-clipart-svg-working-group-information-world-wide-web-internet-structure.png' Url: 'https://e7.pngegg.com/pngimages/647/127/png-clipart-svg-working-group-information-world-wide-web-internet-structure.png'
}, },
@ -222,11 +223,13 @@ const GetSVGLayoutConfiguration = () => {
DisplayedText: "Stuff not made here" DisplayedText: "Stuff not made here"
} }
], ],
Patterns: [],
MainContainer: { MainContainer: {
Height: 200, Type: 'main',
Width: 800 Width: 800,
Height: 200
} }
}; }
}; };
const FillHoleWithChassis = (request) => { const FillHoleWithChassis = (request) => {