159 lines
No EOL
5.6 KiB
Markdown
159 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)
|
|
- [Générer des fichiers de définition pour SmartModeler](#générer-des-fichiers-de-définition-pour-smartmodeler)
|
|
- [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
|
|
|
|
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`.
|
|
|
|
Copiez-le enfin dans `public/` et écrasez le fichier existant.
|
|
|
|
Lorsque vous ferez `npm run build`, ce fichier sera copié dans `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).
|
|
|
|
- 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);
|
|
})
|
|
}
|
|
``` |