Sort documentation

2022-10-17 12:19:40 +02:00 · 2022-10-17 12:19:40 +02:00 · 3627a9718e
commit 3627a9718e
parent b64bc8cb6a
23 changed files with 18 additions and 1 deletions
--- a/docs/#Project/Pages/SmartComponent.md
+++ b/docs/#Project/Pages/SmartComponent.md
@ -0,0 +1,146 @@
+- [Préface](#préface)
+- [Customiser et build le projet (recommandé)](#customiser-et-build-le-projet-(recommandé))
+  * [Configurer les options de build](#configurer-les-options-de-build)
+  * [Build le projet](#build-le-projet)
+- [Télécharger les défauts](#télécharger-les-défauts)
+  * [Télécharger les ressources](#télécharger-les-ressources)
+- [Utiliser dans modeler](#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](https://developer.mozilla.org/en-US/docs/Web/API/CustomEvent/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](https://techformsa.visualstudio.com/SmartConfigurator/_build?definitionId=9)
+
+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`:
+![image.png](/.attachments/image-28004315-69f2-4452-ab83-7f3823f42699.png)
+
+Cliquez sur le menu hamburger et cliquez sur **Download Artifacts** :
+![image.png](/.attachments/image-76f5786f-ef6a-4fd9-8bb7-b7b294c140b6.png)
+
+
+# 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:
+
+```diff
+<!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 :
+
+```diff
+-<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 :
+
+```typescript
+ConfiguratorViewModel.ts
+...
+
+private OSVGLayoutDesigner: KnockoutObservable<Components.SVGLayoutDesigner> = ko.observable<Components.SVGLayoutDesigner>(null);
+
+...
+```
+
+![image.png](/.attachments/image-63b863d7-9793-459f-b940-a1a26d905053.png)
+
+- Exemple d'utilisation:
+
+```typescript
+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);
+    })
+}
+```