Added more documentation
This commit is contained in:
Eric NGUYEN
parent
74debbf90c
commit
e5e9f7f7c0
9 changed files with 1049 additions and 5 deletions
146
docs/DevDocs/Pages/SmartComponent.md
Normal file
146
docs/DevDocs/Pages/SmartComponent.md
Normal file
|
|
@ -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`:
|
||||
|
||||
|
||||
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);
|
||||
})
|
||||
}
|
||||
```
|
||||
Loading…
Add table
Add a link
Reference in a new issue