svg-layout-designer-react/docs/#Project/Pages/SmartComponent.md

Source: https://dev.azure.com/techformsa/SmartConfigurator/_wiki?pageId=122&friendlyName=Int%C3%A9grer-le-projet-en-tant-que-composant-dans-Modeler#

• 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

Mais avant tout cela il faut mettre à jour le fichier de types à fournir.

Générer des fichiers de définition pour SmartModeler

Pré-requis : typescript, python3

Allez dans le répertoire src/dts et exécutez la commande suivante

npx tsc --project tsconfig.dts.json

Ou si l'installation est globale

tsc --projet tsconfig.dts.json

Ensuite, exécutez python3 (ou py sous Windows) sur generate_dts.py :

python3 generate_dts.py SVGLD svgld.d.ts

Une définition sera générée sous la forme svgld.d.ts avec l'espace de nom SVGLD.

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).

• 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);
    })
}