SolidDesigner

Bienvenue dans le projet SolidDesigner, un éditeur SVG basé sur Angular et exposé sous forme de Web Component.

Démarrer l'application

Pour lancer l'application en mode développement (sur votre machine locale), vous pouvez utiliser la commande suivante :

npm run start

(Cette commande exécute en arrière-plan ng serve)

Une fois le serveur démarré, ouvrez votre navigateur et accédez à l'adresse suivante : http://localhost:4200/ Le projet se rechargera automatiquement à chaque modification d'un fichier source.

Publier l'application sur npm

Le projet a pour vocation d'être packagé et réutilisable. Pour préparer une version et la publier, suivez ces étapes :

1. Mettre à jour la version : Dans le fichier package.json, mettez à jour le numéro de "version": "x.y.z".

2. Builder le projet : Compilez l'application Angular pour la production.

   npm run build
   ng build --configuration production

   Les fichiers compilés se placeront dans le dossier dist/soliddesigner/browser/ (qui est ciblé par le champ "files" et "main" du package.json).

3. Générer un paquet local (Test) : Si vous souhaitez tester l'installation localement (cela génère un fichier .tgz comme on le voit dans le projet) :

   npm pack

4. Publier sur npm : Pour créer un token de bypass dans https://www.npmjs.com/settings/solidpepper/tokens, créer un nouveau token avec le bypass A2F activé et les autorisations necessaires sur le projet soliddesigner Dans le fichier .npmrc (à la racine du projet), ajoutez le token npm : //registry.npmjs.org/:_authToken=LE_TOKEN_ICI pour bypass l'A2F

   npm publish

Architecture et utilité des dossiers/fichiers

Voici un guide pour vous repérer facilement dans le projet et comprendre la structure des dossiers et fichiers principaux :

Code source : /src

Contient tout le code de l'application.

• /src/index.html : Point d'entrée HTML principal qui charge l'application.
• /src/main.ts : Fichier principal qui initialise l'application Angular.
• /src/styles/ (styles.scss) : Fichiers de styles CSS/SCSS globaux et variables CSS mutualisées.

Cœur de l'application : /src/app/

• /app/components/ : L'interface utilisateur de ce composant de création graphique.

  • widgets/ : Les éléments principaux d'interaction : canvas-area (zone de dessin SVG), properties-panel (le panneau d'inspection à droite), global-panel (la barre d'outils), menus, rulers (les règles de guidage) ou encore overlays.
  • modals/ : Fenêtres d'édition nécessitant une interuption majeure du flux utilisateur (ex: edit-table-modal pour configurer le tableau, dynamic-attributes-modal).
  • popups/ : Menus contextuels, flottants, et sélecteurs : color-picker, attributes-list-popup (liste de variables/composants), table-size-popup.
  • shared/ : Composants réutilisables d'UI.

• /app/engine/ : La logique métier complexe ("Le Moteur"). Il s'occupe de gérer le SVG de façon isolée de l'interface visuelle.

  • core/ : Les fondations de l'outil et de la persistance : canvas.service.ts (initialisation de la grille de création), history.service.ts (pile de Undo/Redo), save.service.ts & open.service.ts (logique d'export/d'import).
  • features/ : Différentes "briques" modulaires manipulant le rendu SVG : gestion des transformations (transform/), édition de styles complexes (style/), gestion des calques/éléments (layers/, elements/), et identification des variables (variables/).
  • state/ : Les données vivantes en mémoire de l'utilisateur. Par exemple selection.store.ts (quoi cibler actuellement pour modification) et clipboard.service.ts.
  • tools/ : Le code de chaque "outil" de création. Guidés par le tool-manager.service.ts, chaque outil hérite de abstract-tool.ts et encapsule sa logique d'évènements (tracé de rectangles, sélection, outil texte, etc.).
  • api/ : Point d'accès aux services distants.

• /app/services/ : Services non liés directement à l'édition d'image (ouverture d'une modale via modal.service.ts, gestion des thèmes ou langages via translation.service.ts).

• /app/utils/ : Des algorithmes purs ou librairies de fonctions sans injections :

  • svg-dom.ts : Fonctions pour interagir avec le shadow-root et cibler le SVG.
  • math-geometry.ts : Calculs de collision, d'angles.
  • svg-migration.ts : Maintien de versions pour assurer la rétrocompatibilité des SVG générés précédemment.

• app.component.* : Composant de base. Représente l'enveloppe extérieure de l'application (en tant que Web Component). Il insère la logique générale et injecte les contextes majeurs au moment du rendu.

Autres choses à retenir

• L'encapsulation Shadow DOM : Le projet a été adapté pour utiliser le Shadow DOM et isoler ses composants visuels. Prenez garde à utiliser les utilitaires adaptés qui parcourent ce Shadow DOM lorsque vous essayez de cibler des éléments (attention aux erreurs de ciblage avec document.querySelector par exemple). De plus, les styles présents dans style.scss s'appliquent aussi à l'application qui utilisera le composant web