Eric Nguyen c256a76e01 Merged PR 212: Optimize FindChildrenById from O(n) to O(1)

Optimize FindChildrenById from O(n) to O(1):
- Deprecate FindContainerByIdDFS
- Container: Replace Children to string[]
- Add HashMap to IHistoryState that contains all containers

To access a container by id now cost O(1) without any additional cost

+ Implement CICD for SVGLibs

2022-10-12 09:39:54 +00:00

5.3 KiB

Raw Blame History

Préface
Customiser et build le projet (recommandé)
- Configurer les options de build
- Build le projet
Télécharger les défauts
- Télécharger les ressources
Utiliser dans modeler

Préface

Ce document a pour but d'expliquer comment intégrer SVGLayoutDesigner dans un projet.

Le projet se compile avec npm run build grace à Vite. Avec les fichiers générés dans dist nous allons créer un nouveau composant modeler par injection. (Plus tard les fichiers "Release" seront fournies par azure-pipeline par artefacts).

Il utilise le framework JS React pour faire le rendu.

Les projets modeler vont communiquer avec le composant par CustomEvent et par REST via un webservice dans les options de build.

Il y deux manières de récupérer les builds du projets:

Rebuild le projet (recommandé)
Récupérer des prébuild

Customiser et build le projet (recommandé)

Customiser le build du projet permet de modifier les urls de l'API et de personnaliser des fonctionnalités.

Configurer l'API

Il y a deux fichiers principaux à configurer :

src/assets/svgld-settings.js: pour configurer les URLs d'API
src/utils/default.ts: pour configurer les fonctionnalités

Modifiez public/svgld-settings.js

export const API_FETCH_URL = 'http://localhost:5000';
export const API_SET_CONTAINER_LIST_URL = 'http://localhost:5000/SetContainerList';
export const API_GET_FEEDBACK_URL = 'http://localhost:5000/GetFeedback';

Vous pouvez modifiez src/utils/default.ts mais ne le committez pas.

Build le projet

Lancer la commande npm run build dans le projet.

Les fichiers seront fournis dans dist.

Télécharger les défauts

Les defauts utilise l'API de SmartMenuiserieTemplate sur localhost

Télécharger les ressources

Sur Azure DevOps, dans ce projet SmartConfigurator, allez dans Pipelines. Cliquez sur la pipeline SVGLayoutDesignerReact

Cliquez sur le dernier run de la branche dev ou (master pour une version stable).

Cliquez sur Job (s'il a un statut Success)

Cliquez sur 1 artifact:

Cliquez sur le menu hamburger et cliquez sur Download Artifacts :

Utiliser dans modeler

Créez un dossier svg-layout-designer dans le dossier Component.
Puis copier les fichiers de build dans le dossier. (copiez l'entièreté du dossier dist ou extrayez le zip selon la méthode).
Modifiez le fichier index.html du composant pour changer les chemins absolus en relatifs:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
    <link rel="stylesheet" href="style.css">
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Vite + React + TS</title>
-   <script type="module" crossorigin src="/assets/index.acd801d1.js"></script>
+   <script type="module" crossorigin src="./assets/index.acd801d1.js"></script>
-   <link rel="stylesheet" href="/assets/index.859481c4.css">
+   <link rel="stylesheet" href="./assets/index.859481c4.css">
  </head>
  <body>
    <div id="root"></div>

  </body>
</html>

Si besoin, modifier le fichier smartcomponent/svg-layout-designer.html pour avoir la bonne url relative à la basename de l'url :

-<iframe src="./Components/svg-layout-designer/index.html" style="border:none; width:100%; height:100%">
+<iframe src="./Components/SVGLayoutDesigner/index.html" style="border:none; width:100%; height:100%">
</iframe>

Ensuite dans Visual Studio, incluez les fichiers et compilez.
Enfin sur Modeler, un nouveau composant devrait être disponible.
Pour l'utiliser dans un viewModel, créez un observable de type SVGLayoutDesigner et assignez-le dans les propriétés du composant :

ConfiguratorViewModel.ts
...

private OSVGLayoutDesigner: KnockoutObservable<Components.SVGLayoutDesigner> = ko.observable<Components.SVGLayoutDesigner>(null);

...

Exemple d'utilisation:

public AddContainer() {
    // Récupère la configuration de l'éditeur
    this.OSVGLayoutDesigner().GetEditorState((state: SVGLD.IEditorState) => {
        // Création d'un nouveau conteneur du premier type de container de la config dans le conteneur sélectionné
        const config = state.configuration;
        const containerConfig = config.AvailableContainers.shift();
        const type = containerConfig.Type;
        this.OSVGLayoutDesigner().AppendContainerToSelectedContainer(type);
    });
}

public DeleteContainer() {
    // Supprime le conteneur sélectionné
    this.OSVGLayoutDesigner().GetCurrentHistoryState((state: SVGLD.IHistoryState) => {
        const selectedContainer = state.selectedContainerId;
        this.OSVGLayoutDesigner().DeleteContainer(selectedContainer);
    })
}

5.3 KiB Raw Blame History