soliddesigner 0.1.2

package/README.md

@@ -0,0 +1,80 @@
+# 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 :
+
+```shell
+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/](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.
+   ```shell
+   npm run build
+   ```
+   *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) :
+   ```shell
+   npm pack
+   ```
+
+4. **Publier sur npm** :
+   ```shell
+   npm publish
+   ```
+   ⚠️ *Note : Dans le fichier `package.json`, l'attribut `"private": true` restreint la publication publique. S'il s'agit d'une publication sur un registre privé ou public, pensez à vérifier ce paramètre (le supprimer ou l'adapter) et assurez-vous que vous êtes bien authentifié via `npm login`.*
+
+## 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

package/dist/soliddesigner/browser/assets/i18n/en.json

@@ -0,0 +1,379 @@
+{
+  "PROPERTIES": {
+    "OBJECTS": {
+      "TITLE": "Objects",
+      "OPACITY": "Opacity",
+      "BLUR": "Blur",
+      "URL": "URL",
+      "NONE": "None"
+    },
+    "GEOMETRY": {
+      "TITLE": "Position / Geometry",
+      "X": "X",
+      "Y": "Y",
+      "WIDTH": "Width",
+      "HEIGHT": "Height",
+      "ROTATION": "Rotation",
+      "RADIUS_X": "Radius X",
+      "RADIUS_Y": "Radius Y",
+      "X1": "X1",
+      "Y1": "Y1",
+      "X2": "X2",
+      "Y2": "Y2"
+    },
+    "CANVAS": {
+      "TITLE": "Canvas",
+      "WIDTH": "Width",
+      "HEIGHT": "Height",
+      "HEADER": "Header",
+      "FOOTER": "Footer",
+      "LEFT_MARGIN": "Left margin",
+      "RIGHT_MARGIN": "Right margin",
+      "BLEED": "Bleed",
+      "BACKGROUND": "Background"
+    },
+    "VARIABLES": {
+      "TITLE": "Variables",
+      "ADD_VARIABLE": "Add Variable",
+      "CHANGE_ATTRIBUTE": "Change attribute",
+      "SHOW_TEXT": "Show Attribute text",
+      "SHOW_PICTO": "Show Attribute picto",
+      "PICTO_SIZE": "Picto Size",
+      "DELETE_LINE_EMPTY": "Delete line if empty",
+      "DELETE_BLOCK_EMPTY": "Delete block if empty",
+      "DOESNT_EXIST": "This attribute doesn't exist!"
+    },
+    "TABLE": {
+      "TITLE": "Table",
+      "BORDER_SIZE": "Border Size",
+      "BORDER_COLOR": "Border Color",
+      "BORDER_STYLE": "Border Style",
+      "EDIT_TABLE": "Edit Table",
+      "SOLID": "Solid",
+      "DASHED": "Dashed",
+      "DOTTED": "Dotted",
+      "DOUBLE": "Double"
+    },
+    "DYNAMIC_IMAGE": {
+      "SKU_IMAGES": "SKU Images"
+    }
+  },
+  "SETTINGS": {
+    "SHOW_GRID": "Show Grid",
+    "SNAP_GRID": "Snap to Grid",
+    "UNITS": "Units — ",
+    "SHOW_RULER": "Show Rulers",
+    "SHOW_WIREFRAME": "Show Wireframe",
+    "MANAGE_FONTS": "Manage Fonts",
+    "CHANGE_TEMPLATE_DIM": "Change Template Dimensions",
+    "AUTOSAVE": "Autosave",
+    "KEYBOARD_SHORTCUTS": "Keyboard shortcuts...",
+    "SHOW_DYNAMIC": "Show Dynamic Attributes",
+    "DARK_LIGHT": "Dark / Light Interface",
+    "PIXELS": "Pixels",
+    "MILLIMETERS": "Millimeters",
+    "CENTIMETERS": "Centimeters",
+    "INCHES": "Inches",
+    "UNTITLED_DOCUMENT": "Untitled Document"
+  },
+  "HELLO": "Hello",
+  "WELCOME": "Welcome to SolidDesigner",
+  "NONE": "None",
+  "CANCEL": "Cancel",
+  "CONFIRM": "Confirm",
+  "OK": "OK",
+  "GLOBAL": {
+    "LAYERS": {
+      "TITLE": "Layers",
+      "NO_LAYERS": "No layers",
+      "DUPLICATE_NAME": "A layer with this name already exists."
+    },
+    "PAGES": {
+      "TITLE": "Pages",
+      "ADD_PAGE": "Add page",
+      "DELETE": "Delete",
+      "GRID_VIEW": "Grid view",
+      "ORGANIZE": "Organize",
+      "UNSAVED_CHANGES_WARNING": "All changes not saved will be lost, are you sure to continue?",
+      "PAGE_NAME": "Page {{number}}"
+    },
+    "DOUBLE_PAGE": {
+      "LABEL": "Double page",
+      "LEFT": "Left",
+      "RIGHT": "Right"
+    },
+    "MODAL": {
+      "RENAME_TITLE": "Rename template",
+      "TEMPLATE_NAME": "Template name",
+      "RENAME_PLACEHOLDER": "Enter new name...",
+      "RENAME_SUCCESS": "Template renamed successfully!",
+      "RENAME_ERROR": "Error while renaming template.",
+      "RENAME_ALREADY_EXISTS": "A template with this name already exists.",
+      "TEMPLATE_DIMENSIONS": {
+        "TITLE": "Template dimensions",
+        "WIDTH": "Width",
+        "HEIGHT": "Height",
+        "RESOLUTION": "Resolution",
+        "OR": "OR",
+        "HELP_INFORMATIONS": "Help informations",
+        "BLOCK_PER_LINE": "Block per line:",
+        "BLOCK_PER_COLUMN": "Block per column:",
+        "WIDTH_ERROR": "Width need to be a positive number",
+        "HEIGHT_ERROR": "Height need to be a positive number",
+        "TOO_MANY_BLOCKS_LINE": "Too many blocks per line",
+        "TOO_MANY_BLOCKS_COLUMN": "Too many blocks per column",
+        "APPLY_CHANGES": "Apply Changes"
+      }
+    }
+  },
+  "SHORTCUTS": {
+    "TITLE": "Keyboard Shortcuts",
+    "CATEGORIES": {
+      "TOOLS": "Tools",
+      "ACTIONS": "Actions",
+      "VIEW": "View",
+      "ARRANGEMENT": "Arrangement"
+    },
+    "NAMES": {
+      "TOOL_PAN": "Pan tool",
+      "TOOL_SELECT": "Select tool",
+      "TOOL_TEXT": "Text tool",
+      "TOOL_RECT": "Rectangle tool",
+      "TOOL_ELLIPSE": "Ellipse tool",
+      "TOOL_LINE": "Line tool",
+      "TOOL_PENCIL": "Pencil tool",
+      "TOOL_PATH": "Path tool",
+      "TOOL_IMAGE": "Image tool",
+      "TOOL_BARCODE": "Barcode tool",
+      "TOOL_QRCODE": "QR Code tool",
+      "SAVE": "Save",
+      "UNDO": "Undo",
+      "REDO": "Redo",
+      "COPY": "Copy",
+      "CUT": "Cut",
+      "PASTE": "Paste",
+      "DUPLICATE": "Duplicate",
+      "DELETE": "Delete",
+      "SELECT_ALL": "Select All",
+      "GROUP": "Group selected",
+      "UNGROUP": "Ungroup",
+      "PLACE_IMAGE": "Place image",
+      "TEXT_BOLD": "Set bold text",
+      "TEXT_ITALIC": "Set italic text",
+      "ZOOM_IN": "Zoom in",
+      "ZOOM_OUT": "Zoom out",
+      "ZOOM_RESET": "Actual size",
+      "TOGGLE_RULERS": "Show/hide rulers",
+      "BRING_FORWARD": "Bring forward",
+      "SEND_BACKWARD": "Send backward",
+      "BRING_TO_FRONT": "Bring to front",
+      "SEND_TO_BACK": "Send to back",
+      "ROTATE_1": "Rotate 1°",
+      "ROTATE_5": "Rotate 5°",
+      "NUDGE": "Nudge (1px)",
+      "JUMP": "Jump (Snap)",
+      "INVERT_FILL": "Invert Fill",
+      "VIEW_SOURCE": "View Source",
+      "PLACE_IMAGE_ALT": "Place Image",
+      "NEXT_ELEMENT": "Next Element",
+      "PREV_ELEMENT": "Previous Element",
+      "PAN_CANVAS": "Pan Canvas",
+      "ESCAPE": "Escape mode / Deselect"
+    }
+  },
+  "BARCODE": {
+    "TITLE": "Barcode Settings",
+    "DATA_FIELD": "Data Field",
+    "FORMAT": "Format",
+    "BAR_WIDTH": "Bar Width",
+    "BAR_WIDTH_OPTIONS": {
+      "THIN": "Thin",
+      "MEDIUM": "Medium",
+      "THICK": "Thick",
+      "VERY_THICK": "Very thick"
+    },
+    "DISPLAY_VALUE": "Text under barcode",
+    "FONT_FAMILY": "Font Family",
+    "FONT_SIZE": "Font Size",
+    "LINE_COLOR": "Line Color",
+    "ALIGN": {
+      "LEFT": "Left",
+      "CENTER": "Center",
+      "RIGHT": "Right",
+      "TOP": "Top",
+      "BOTTOM": "Bottom"
+    },
+    "FONT_STYLE": {
+      "NORMAL": "Normal",
+      "BOLD": "Bold",
+      "ITALIC": "Italic",
+      "BOLD_ITALIC": "Bold Italic"
+    },
+    "NOM": "Name"
+  },
+  "QRCODE": {
+    "TITLE": "QR Code Settings",
+    "DATA_FIELD": "Data Field",
+    "MARGIN": "Margin",
+    "BACKGROUND": "Background Color",
+    "DOT_TYPE": "Dot options",
+    "DOT_COLOR": "Dot color",
+    "CORNERS_SQUARE_TYPE": "Corner options (square)",
+    "CORNERS_SQUARE_COLOR": "Corner color (square)",
+    "CORNERS_DOT_TYPE": "Corner options (dots)",
+    "CORNERS_DOT_COLOR": "Corner color (dots)",
+    "HIDE_DOTS": "Hide Background Dots",
+    "IMAGE_SIZE": "Image Size",
+    "IMAGE_MARGIN": "Image Margin",
+    "NOM": "Name"
+  },
+  "IMAGE": {
+    "TITLE": "Image Settings",
+    "TRANSFORM_DYNAMIC": "Return to dynamic image"
+  },
+  "DYNAMIC_IMAGE": {
+    "TITLE": "Dynamic Image",
+    "TRANSFORM_STATIC": "Transform into static image",
+    "IMAGE_NUMBER": "Image n°"
+  },
+  "FILL": {
+    "TITLE": "Fill"
+  },
+  "COLOR_PICKER": {
+    "HEADER_SOLID": "Solid Color",
+    "HEADER_GRADIENT": "Linear Gradient",
+    "VARIABLE_ALTERNATIVE": "Or based on",
+    "NEW": "New",
+    "CURRENT": "Current",
+    "OPACITY": "Opacity",
+    "HEX": "Hexadecimal"
+  },
+  "BORDER": {
+    "TITLE": "Border",
+    "WIDTH": "Size",
+    "DASHARRAY": "Dash",
+    "RADIUS": "Radius"
+  },
+  "GROUP": {
+    "TITLE": "Group",
+    "MULTIPLE_ELEMENTS": "Multiple Elements",
+    "UNGROUP": "Ungroup",
+    "GROUP_ACTION": "Group"
+  },
+  "ALIGN": {
+    "TITLE": "Alignment",
+    "LEFT": "Align Left",
+    "CENTER": "Align Center",
+    "RIGHT": "Align Right",
+    "TOP": "Align Top",
+    "MIDDLE": "Align Middle",
+    "BOTTOM": "Align Bottom",
+    "TO_PAGE": "Align to Page",
+    "TO_OBJECTS": "Align to Objects"
+  },
+  "TEXT": {
+    "TITLE": "Text",
+    "SIZE": "Size",
+    "ALIGN_LEFT": "Align Left",
+    "ALIGN_CENTER": "Align Center",
+    "ALIGN_RIGHT": "Align Right",
+    "ALIGN_TOP": "Align Top",
+    "ALIGN_MIDDLE": "Align Middle",
+    "ALIGN_BOTTOM": "Align Bottom",
+    "BOLD": "Bold",
+    "ITALIC": "Italic",
+    "UNDERLINE": "Underline",
+    "STRIKETHROUGH": "Strikethrough"
+  },
+  "MENU": {
+    "CUT": "Cut",
+    "COPY": "Copy",
+    "PASTE": "Paste",
+    "DELETE": "Delete",
+    "BRING_TO_FRONT": "Bring to Front",
+    "SEND_TO_BACK": "Send to Back"
+  },
+  "CONTEXT_BAR": {
+    "CHANGE_IMAGE": "Change image",
+    "SELECT_IMAGE_PC": "Select image from computer",
+    "CHANGE_TO_DYNAMIC": "Change to dynamic image",
+    "ADD_DYNAMIC_ATTR": "Add dynamic attribute",
+    "CLONE": "Clone",
+    "DELETE": "Delete",
+    "LOCK_UNLOCK": "Lock / Unlock",
+    "MORE": "More"
+  },
+  "TABLE": {
+    "PRODUCT_TITLE": "Product table",
+    "VARIANTS_TITLE": "Variants table",
+    "PARAMETERS": "Parameters",
+    "SET_SIZE": "Set Size",
+    "CLEAR_CONTENT": "Clear Content",
+    "CLEAR_STYLE": "Clear Style",
+    "COLUMNS": "Columns",
+    "ROWS": "Rows",
+    "ADD_LEFT": "Add Left",
+    "ADD_RIGHT": "Add Right",
+    "MOVE_LEFT": "Move Left",
+    "MOVE_RIGHT": "Move Right",
+    "ADD_ABOVE": "Add Above",
+    "ADD_BELOW": "Add Below",
+    "MOVE_UP": "Move Up",
+    "MOVE_DOWN": "Move Down",
+    "DELETE": "Delete",
+    "DIMENSIONS": "Dimensions",
+    "CELL_DIMENSIONS": "Cell Dimensions",
+    "COL_WIDTH": "Col Width",
+    "ROW_HEIGHT": "Row Height",
+    "AUTO": "Auto",
+    "CELL_STYLES": "Cell Styles",
+    "STYLE": "Style",
+    "PADDING": "Padding",
+    "VERTICAL": "Vertical",
+    "HORIZONTAL": "Horizontal",
+    "TEXT": "Text",
+    "BACKGROUND": "Background",
+    "BORDERS": "Borders",
+    "COLOR": "Color",
+    "VARIABLES": "Variables",
+    "ADD_VARIABLE": "Add Variable",
+    "HIDE_HEADER": "Hide Header",
+    "SHOW_IMAGE": "Show Image",
+    "HEADER_BACKGROUND": "Header Background",
+    "ROW_BACKGROUND": "Row Background",
+    "ROW_REMOVED_BACKGROUND": "Removed row background",
+    "TITLE_LABEL": "Title",
+    "VARIABLE_LABEL": "Variable",
+    "EDIT": "Edit",
+    "SHOW_AS": "Show as",
+    "FORMAT": "Format",
+    "TYPE_TEXT": "Text",
+    "TYPE_QRCODE": "QR Code",
+    "TYPE_BARCODE": "Barcode",
+    "OPTIONS_TABLE": "Options Table",
+    "TOGGLE_AUTO_WIDTH": "Toggle auto width",
+    "TOGGLE_AUTO_HEIGHT": "Toggle auto height",
+    "SHOW_HEADER": "Show Header",
+    "HIDE_EMPTY_CELLS": "Hide Empty Cells",
+    "VARIATION_BG": "Variation Bg",
+    "POSITIONS": {
+      "ALL": "All",
+      "TOP": "Top",
+      "BOTTOM": "Bottom",
+      "LEFT": "Left",
+      "RIGHT": "Right"
+    }
+  },
+  "BACKGROUND_PREVIEW": {
+    "TITLE": "Backgrounds",
+    "NO_BACKGROUNDS": "No backgrounds available or loading."
+  },
+  "ATTRIBUTES_POPUP": {
+    "TITLE": {
+      "ADD": "Add attribute",
+      "EDIT": "Modify attribute"
+    },
+    "SEARCH": "Search",
+    "NO_RESULTS": "No attributes found"
+  }
+}