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 {
private _hooks: Record<string, (e: CustomEvent) => void>;
public App: AppController;
public Editor: EditorController;
@ -14,6 +15,7 @@
super(componentInfo, params);
this.App = new AppController(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 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 listener = (e: CustomEvent) => {
e.target.removeEventListener(e.type, listener);
@ -41,6 +43,40 @@
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 ///
@ -99,7 +135,7 @@
*/
public SetEditor(newEditor: IEditorState, callback?: (state: IEditorState) => void) {
const eventType = 'setEditor';
this.app.AddEventListener(callback, eventType);
this.app.AddEventListener(eventType, callback);
const component = this.GetAppComponent();
component.dispatchEvent(new CustomEvent(eventType, { detail: newEditor }))
}
@ -112,7 +148,7 @@
*/
public SetLoaded(isLoaded: boolean, callback?: (state: IEditorState) => void) {
const eventType = 'setLoaded';
this.app.AddEventListener(callback, eventType);
this.app.AddEventListener(eventType, callback);
const component = this.GetAppComponent();
component.dispatchEvent(new CustomEvent(eventType, { detail: isLoaded }))
}
@ -122,12 +158,10 @@
class EditorController {
app: SVGLayoutDesigner;
$component: JQuery;
private _hooks: Record<string, (e: CustomEvent) => void>;
constructor(app: SVGLayoutDesigner, $component: JQuery) {
this.app = app;
this.$component = $component;
this._hooks = {};
}
/**
@ -154,7 +188,7 @@
*/
public GetCurrentHistoryState(callback: (state: IHistoryState) => void) {
const eventType = 'getCurrentHistoryState';
this.app.AddEventListener(callback, eventType);
this.app.AddEventListener(eventType, callback);
const component = this.GetEditorComponent();
component.dispatchEvent(new CustomEvent(eventType));
}
@ -165,7 +199,7 @@
*/
public GetEditorState(callback: (state: IEditorState) => void) {
const eventType = 'getEditorState';
this.app.AddEventListener(callback, eventType);
this.app.AddEventListener(eventType, callback);
const component = this.GetEditorComponent();
component.dispatchEvent(new CustomEvent(eventType));
}
@ -177,7 +211,7 @@
*/
public SetHistory(history: IHistoryState[], callback?: (state: IEditorState) => void) {
const eventType = 'setHistory';
this.app.AddEventListener(callback, eventType);
this.app.AddEventListener(eventType, callback);
const component = this.GetEditorComponent();
component.dispatchEvent(new CustomEvent(eventType, { detail: history }));
}
@ -190,7 +224,7 @@
*/
public ReviveEditorState(editorState: IEditorState, callback: (state: IEditorState) => void) {
const eventType = 'reviveEditorState';
this.app.AddEventListener(callback, eventType);
this.app.AddEventListener(eventType, callback);
const component = this.GetEditorComponent();
component.dispatchEvent(new CustomEvent(eventType, { detail: editorState }));
}
@ -203,7 +237,7 @@
*/
public ReviveHistory(history: IHistoryState[], callback: (state: IHistoryState[]) => void) {
const eventType = 'reviveHistory';
this.app.AddEventListener(callback, eventType);
this.app.AddEventListener(eventType, callback);
const component = this.GetEditorComponent();
component.dispatchEvent(new CustomEvent(eventType, { detail: history }));
}
@ -215,7 +249,7 @@
*/
public AppendNewHistoryState(historyState: IHistoryState, callback?: (state: IEditorState) => void) {
const eventType = 'appendNewState';
this.app.AddEventListener(callback, eventType);
this.app.AddEventListener(eventType, callback);
this.GetEditorComponent().dispatchEvent(new CustomEvent(eventType, { detail: historyState }));
}
@ -228,7 +262,7 @@
*/
public AddContainer(index: number, type: string, parentId: string, callback?: (state: IEditorState) => void) {
const eventType = 'addContainer';
this.app.AddEventListener(callback, eventType);
this.app.AddEventListener(eventType, callback);
const detail = {
index,
type,
@ -245,7 +279,7 @@
*/
public AddContainerToSelectedContainer(index: number, type: string, callback?: (state: IEditorState) => void) {
const eventType = 'addContainerToSelectedContainer';
this.app.AddEventListener(callback, eventType);
this.app.AddEventListener(eventType, callback);
const detail = {
index,
type
@ -261,7 +295,7 @@
*/
public AppendContainer(type: string, parentId: string, callback?: (state: IEditorState) => void) {
const eventType = 'appendContainer';
this.app.AddEventListener(callback, eventType);
this.app.AddEventListener(eventType, callback);
const detail = {
type,
parentId
@ -277,7 +311,7 @@
*/
public AppendContainerToSelectedContainer(type: string, callback?: (state: IEditorState) => void) {
const eventType = 'appendContainerToSelectedContainer';
this.app.AddEventListener(callback, eventType);
this.app.AddEventListener(eventType, callback);
const detail = {
type
}
@ -291,7 +325,7 @@
*/
public SelectContainer(containerId: string, callback?: (state: IEditorState) => void) {
const eventType = 'selectContainer';
this.app.AddEventListener(callback, eventType);
this.app.AddEventListener(eventType, callback);
const detail = {
containerId
}
@ -305,7 +339,7 @@
*/
public DeleteContainer(containerId: string, callback?: (state: IEditorState) => void) {
const eventType = 'deleteContainer';
this.app.AddEventListener(callback, eventType);
this.app.AddEventListener(eventType, callback);
const detail = {
containerId
}
@ -320,7 +354,7 @@
*/
public AddSymbol(name: string, callback?: (state: IEditorState) => void) {
const eventType = 'addSymbol';
this.app.AddEventListener(callback, eventType);
this.app.AddEventListener(eventType, callback);
const detail = {
name
}
@ -334,7 +368,7 @@
*/
public SelectSymbol(symbolId: string, callback?: (state: IEditorState) => void) {
const eventType = 'selectSymbol';
this.app.AddEventListener(callback, eventType);
this.app.AddEventListener(eventType, callback);
const detail = {
symbolId
}
@ -348,49 +382,12 @@
*/
public DeleteSymbol(symbolId: string, callback?: (state: IEditorState) => void) {
const eventType = 'deleteSymbol';
this.app.AddEventListener(callback, eventType);
this.app.AddEventListener(eventType, callback);
const detail = {
symbolId
}
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', {

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

@ -3,12 +3,17 @@ import { IConfiguration } from '../../../Interfaces/IConfiguration';
import { FetchConfiguration } from '../../API/api';
import { IEditorState } from '../../../Interfaces/IEditorState';
import { LoadState } from './Load';
import { GetDefaultEditorState } from '../../../utils/default';
import { DISABLE_API, GetDefaultEditorState } from '../../../utils/default';
export function NewEditor(
setEditorState: Dispatch<SetStateAction<IEditorState>>,
setLoaded: Dispatch<SetStateAction<boolean>>
): void {
if (DISABLE_API) {
setLoaded(true);
return;
}
// Fetch the configuration from the API
FetchConfiguration()
.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 */
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];
}
}
const { prev, next } = GetPreviousAndNextSiblings(container);
const request: ISetContainerListRequest = {
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(
action: IAction,
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 { events as EVENTS } from '../../Events/EditorEvents';
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 { FindContainerById } from '../../utils/itertools';
import { IMenuAction, Menu } from '../Menu/Menu';
@ -62,6 +62,10 @@ function InitActions(
);
// API Actions
if (DISABLE_API) {
return;
}
for (const availableContainer of configuration.AvailableContainers) {
if (availableContainer.Actions === undefined || availableContainer.Actions === null) {
continue;

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

@ -6,6 +6,7 @@ import { IGetFeedbackRequest } from '../../Interfaces/IGetFeedbackRequest';
import { IGetFeedbackResponse } from '../../Interfaces/IGetFeedbackResponse';
import { IHistoryState } from '../../Interfaces/IHistoryState';
import { IMessage } from '../../Interfaces/IMessage';
import { DISABLE_API } from '../../utils/default';
import { GetCircularReplacerKeepDataStructure } from '../../utils/saveload';
interface IMessagesSidebarProps {
@ -68,12 +69,12 @@ export function MessagesSidebar(props: IMessagesSidebarProps): JSX.Element {
const [messages, setMessages] = React.useState<IMessage[]>([]);
// eslint-disable-next-line @typescript-eslint/strict-boolean-expressions
if (window.Worker) {
if (window.Worker && !DISABLE_API) {
UseWorker(
props.historyState,
setMessages
);
} else {
} else if (!DISABLE_API) {
UseAsync(
props.historyState,
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])?);"
)
filter_directories = ["./Enums", "./Interfaces"]
filter_directories = ["./dist\Enums", "./dist\Interfaces"]
def main():
'''
@ -37,6 +37,7 @@ def main():
output_file.write(('declare namespace {} {{\n'.format(namespace)))
for root, subdirs, files in os.walk('./'):
if root not in filter_directories:
print('SKIP ' + root)
continue
print('--\nroot = ' + root)

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

@ -135,6 +135,8 @@ export interface IAvailableContainer {
* DefaultChildType will be disabled for this container and the children
*/
Pattern?: string;
/** Hide the children in the treeview */
HideChildrenInTreeview?: boolean;
/** if true, show the dimension of the container */
ShowSelfDimensions?: boolean;
/** if true show the overall dimensions of its children */
@ -270,6 +272,8 @@ export interface IContainerProperties {
isFlex: boolean;
/** Horizontal alignment, also determines the visual location of x {Left = 0, Center, Right } */
xPositionReference: XPositionReference;
/** Hide the children in the treeview */
hideChildrenInTreeview: boolean;
/** if true, show the dimension of the container */
showSelfDimensions: boolean;
/** if true show the overall dimensions of its children */

73
src/utils/default.ts
View file

@ -9,10 +9,22 @@ import { ISymbolModel } from '../Interfaces/ISymbolModel';
/// 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;
/** Size of the history */
export const MAX_HISTORY = 200;
/** Apply beheviors on children */
export const APPLY_BEHAVIORS_ON_CHILDREN = true;
/** Framerate of the svg controller */
export const MAX_FRAMERATE = 60;
/// CONTAINER DEFAULTS ///
@ -53,15 +65,58 @@ export const DEFAULT_SYMBOL_HEIGHT = 32;
* Returns the default editor state given the configuration
*/
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(
null,
{
...DEFAULT_MAINCONTAINER_PROPS,
width: Number(configuration.MainContainer.Width),
height: Number(configuration.MainContainer.Height)
}
mainContainerConfig
);
const typeCounters = {};
(typeCounters as any)[mainContainer.properties.type] = 0;
return {
configuration,
history: [
@ -69,7 +124,7 @@ export function GetDefaultEditorState(configuration: IConfiguration): IEditorSta
lastAction: '',
mainContainer,
selectedContainerId: mainContainer.properties.id,
typeCounters: {},
typeCounters,
symbols: new Map(),
selectedSymbolId: ''
}
@ -152,7 +207,7 @@ export const DEFAULT_MAINCONTAINER_PROPS: IContainerProperties = {
*/
export function GetDefaultContainerProps(type: string,
typeCount: number,
parent: IContainerModel,
parent: IContainerModel | undefined | null,
x: number,
y: number,
width: number,
@ -161,7 +216,7 @@ export function GetDefaultContainerProps(type: string,
return ({
id: `${type}-${typeCount}`,
type,
parentId: parent.properties.id,
parentId: parent?.properties.id ?? '',
linkedSymbolId: '',
displayedText: `${containerConfig.DisplayedText ?? type}-${typeCount}`,
x,

18
test-server/http.js
View file

@ -83,8 +83,6 @@ const GetSVGLayoutConfiguration = () => {
{
Type: 'Trou',
Blacklist: ["Chassis"],
DefaultX: 0,
DefaultY: 0,
Margin: {
left: 10,
bottom: 10,
@ -112,10 +110,14 @@ const GetSVGLayoutConfiguration = () => {
,
Actions: [
{
Id: "SplitRemplissage",
Action: "SplitRemplissage",
Label: "Diviser le remplissage",
Description: "Diviser le remplissage en insérant un montant",
CustomLogo: {
Base64Image: null,
Name: 'Image1',
Svg: null,
Url: ""
},
AddingBehavior: 2
@ -186,7 +188,7 @@ const GetSVGLayoutConfiguration = () => {
Height: 32,
Image: {
Base64Image: null,
Name: null,
Name: 'Image1',
Svg: null,
Url: 'https://www.manutan.fr/img/S/GRP/ST/AIG3930272.jpg'
},
@ -198,7 +200,7 @@ const GetSVGLayoutConfiguration = () => {
Height: 32,
Image: {
Base64Image: null,
Name: null,
Name: 'Image2',
Svg: null,
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"
}
],
Patterns: [],
MainContainer: {
Height: 200,
Width: 800
Type: 'main',
Width: 800,
Height: 200
}
}
};
};
const FillHoleWithChassis = (request) => {

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

@ -81,7 +81,6 @@ const GetSVGLayoutConfiguration = () => {
stroke: 'red',
fill: '#d3c9b7',
},
HideChildrenInTreeview: true,
ShowSelfDimensions: true,
IsDimensionBorrower: true,
Category: "Stuff"
@ -89,8 +88,6 @@ const GetSVGLayoutConfiguration = () => {
{
Type: 'Trou',
Blacklist: ["Chassis"],
DefaultX: 0,
DefaultY: 0,
Margin: {
left: 10,
bottom: 10,
@ -118,10 +115,14 @@ const GetSVGLayoutConfiguration = () => {
,
Actions: [
{
Id: "SplitRemplissage",
Action: "SplitRemplissage",
Label: "Diviser le remplissage",
Description: "Diviser le remplissage en insérant un montant",
CustomLogo: {
Base64Image: null,
Name: 'Image1',
Svg: null,
Url: ""
},
AddingBehavior: 2
@ -192,7 +193,7 @@ const GetSVGLayoutConfiguration = () => {
Height: 32,
Image: {
Base64Image: null,
Name: null,
Name: 'Image1',
Svg: null,
Url: 'https://www.manutan.fr/img/S/GRP/ST/AIG3930272.jpg'
},
@ -204,7 +205,7 @@ const GetSVGLayoutConfiguration = () => {
Height: 32,
Image: {
Base64Image: null,
Name: null,
Name: 'Image2',
Svg: null,
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"
}
],
Patterns: [],
MainContainer: {
Height: 200,
Width: 800
Type: 'main',
Width: 800,
Height: 200
}
}
};
};
const FillHoleWithChassis = (request) => {