148 lines
No EOL
5.6 KiB
Markdown
148 lines
No EOL
5.6 KiB
Markdown
Source: https://dev.azure.com/techformsa/SmartConfigurator/_wiki?pageId=122&friendlyName=Int%C3%A9grer-le-projet-en-tant-que-composant-dans-Modeler#
|
|
|
|
- [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
|
|
<!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);
|
|
|
|
...
|
|
```
|
|
|
|
|
|
|
|
- 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);
|
|
})
|
|
}
|
|
``` |