- [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`:
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:
```diff
Vite + React + TS
-
+
-
+
```
- Si **besoin**, modifier le fichier `smartcomponent/svg-layout-designer.html` pour avoir la bonne url relative à la basename de l'url :
```diff
-
```
- 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 = ko.observable(null);
...
```
- 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);
})
}
```