Eric NGUYEN d368641200 Revert "Move settings to public/svgld-settings.js"

This reverts commit 2cf56632155f5378c8819991b1b42ab135cbe384.

2022-10-12 18:08:35 +02:00

5.4 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 les options de build

Il y a deux fichiers principaux à configurer :

.env.production.local: pour configurer les URLs d'API
src/utils/default.ts: pour configurer les fonctionnalités

Copiez .env.production vers .env.production.local et modifiez-le comme bon vous semble :

VITE_API_FETCH_URL=https://localhost/SmartMenuiserieTemplate/Service.svc/GetSVGLayoutConfiguration
VITE_API_SET_CONTAINER_LIST_URL=https://localhost/SmartMenuiserieTemplate/Service.svc/SetContainerList
VITE_API_GET_FEEDBACK_URL=https://localhost/SmartMenuiserieTemplate/Service.svc/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.4 KiB Raw Blame History