@h4md1/visual-image-tool 0.1.5 → 0.2.1

package/README.md

@@ -1,15 +1,15 @@
-# VisualImageTool
+# <img src="demo/android-chrome-192x192.png" alt="Visual Image Tool logo" width="48" height="48" style="vertical-align:middle; margin-right: 0.5em; border-radius: 8px;"> Visual Image Tool
 
-Un outil léger en JavaScript vanilla pour définir des points focaux et zones de recadrage sur des images.
+A lightweight vanilla JavaScript tool to define focus points and crop zones on images.
 
-## Fonctionnalités
+## Features
 
-- **Point focal** : Définissez un point d'intérêt sur l'image avec un marqueur visuel
-- **Zone de recadrage** : Définissez une zone de recadrage avec poignées de redimensionnement
-- **Sans dépendances** : Fonctionne sans bibliothèques externes
-- **API simple** : Interface claire et facile à utiliser
-- **Personnalisable** : Options de configuration flexibles
-- **Responsive** : S'adapte aux redimensionnements d'écran
+- **Focus point**: Set a point of interest on the image with a visual marker
+- **Crop zone**: Define a crop zone with resize handles
+- **No dependencies**: Works without external libraries
+- **Simple API**: Clear and easy-to-use interface
+- **Customizable**: Flexible configuration options
+- **Responsive**: Adapts to screen resizing
 
 ## Installation
 
@@ -17,179 +17,198 @@ Un outil léger en JavaScript vanilla pour définir des points focaux et zones d
 npm install @h4md1/visual-image-tool
 ```
 
-## Guide de démarrage rapide
+## Quick Start Guide
 
-### 1. Importation
+### 1. Import
 
 ```javascript
-// Importation ES modules (recommandé)
-import VisualImageTool from '@h4md1/visual-image-tool';
+// ES modules import (recommended)
+import VisualImageTool from "@h4md1/visual-image-tool";
 
-// OU importation CommonJS
-const VisualImageTool = require('@h4md1/visual-image-tool');
+// OR CommonJS import
+const VisualImageTool = require("@h4md1/visual-image-tool");
 
-// OU utilisation directe via balise script (UMD)
+// OR direct usage via script tag (UMD)
 // <script src="node_modules/image-tool/dist/image-tool.umd.js"></script>
 ```
 
-### 2. Initialisation
+### 2. Initialization
 
 ```javascript
-// Créer une instance avec une image
+// Create an instance with an image
 const imageTool = new VisualImageTool.VisualImageTool({
-  imageElement: document.getElementById('myImage'),
+  imageElement: document.getElementById("myImage"),
+  debug: true, // Enable debug logs for overlay positioning (optional)
   onChange: (data) => {
-    console.log('Point focal:', data.focusPoint);
-    console.log('Zone de recadrage:', data.cropZone);
-  }
+    console.log("Focus point:", data.focusPoint);
+    console.log("Crop zone:", data.cropZone);
+  },
 });
 ```
 
-### 3. Utilisation des fonctionnalités
+### 3. Using the Features
 
 ```javascript
-// Activer le point focal
+// Enable the focus point
 imageTool.toggleFocusPoint(true);
 
-// Activer la zone de recadrage
+// Enable the crop zone
 imageTool.toggleCropZone(true);
 
-// Définir manuellement un point focal
+// Manually set a focus point
 imageTool.setFocusPoint(x, y);
 
-// Définir manuellement une zone de recadrage
+// Manually set a crop zone
 imageTool.setCropZone(x, y, width, height);
 
-// Obtenir les valeurs actuelles
+// Get current values
 const focusPoint = imageTool.getFocusPoint();
 const cropZone = imageTool.getCropZone();
 ```
 
-## Options de configuration
+## Configuration Options
 
 ```javascript
 const imageTool = new VisualImageTool.VisualImageTool({
-  // Élément image (obligatoire) - peut être un sélecteur CSS ou un élément DOM
-  imageElement: '#myImage',
-  
-  // Configuration du point focal (optionnel)
+  // Image element (required) - can be a CSS selector or a DOM element
+  imageElement: "#myImage",
+
+  // Enable debug logs for overlay positioning (optional)
+  debug: true, // Set to true to see overlay positioning logs in the console
+
+  // Focus point configuration (optional)
   focusPoint: {
-    enabled: true, // Activer/désactiver la fonctionnalité
+    enabled: true, // Enable/disable the feature
     style: {
-      width: '30px',
-      height: '30px',
-      border: '3px solid white',
-      boxShadow: '0 0 0 2px black, 0 0 5px rgba(0,0,0,0.5)',
-      backgroundColor: 'rgba(255, 0, 0, 0.5)'
-    }
+      width: "30px",
+      height: "30px",
+      border: "3px solid white",
+      boxShadow: "0 0 0 2px black, 0 0 5px rgba(0,0,0,0.5)",
+      backgroundColor: "rgba(255, 0, 0, 0.5)",
+    },
   },
-  
-  // Configuration de la zone de recadrage (optionnel)
+
+  // Crop zone configuration (optional)
   cropZone: {
-    enabled: true, // Activer/désactiver la fonctionnalité
+    enabled: true, // Enable/disable the feature
     style: {
-      border: '1px dashed #fff',
-      backgroundColor: 'rgba(0, 0, 0, 0.4)'
+      border: "1px dashed #fff",
+      backgroundColor: "rgba(0, 0, 0, 0.4)",
     },
     handleStyle: {
-      width: '14px',
-      height: '14px',
-      backgroundColor: 'white',
-      border: '2px solid black',
-      boxShadow: '0 0 3px rgba(0,0,0,0.5)'
-    }
+      width: "14px",
+      height: "14px",
+      backgroundColor: "white",
+      border: "2px solid black",
+      boxShadow: "0 0 3px rgba(0,0,0,0.5)",
+    },
+  },
+
+  // Callback called on changes (optional)
+  onChange: function (data) {
+    // data contains focusPoint, cropZone, focusActive, cropActive
   },
-  
-  // Callback appelé lors des changements (optionnel)
-  onChange: function(data) {
-    // data contient focusPoint, cropZone, focusActive, cropActive
-  }
 });
 ```
 
-## API complète
+## Full API
 
-### Méthodes
+### Methods
 
 #### `toggleFocusPoint(active)`
-Active ou désactive le point focal.
-- `active` (boolean, optionnel): Si défini, force l'état à cette valeur. Si omis, inverse l'état actuel.
-- Retourne: L'instance VisualImageTool pour le chaînage.
+
+Enables or disables the focus point.
+
+- `active` (boolean, optional): If set, forces the state to this value. If omitted, toggles the current state.
+- Returns: The VisualImageTool instance for chaining.
 
 #### `toggleCropZone(active)`
-Active ou désactive la zone de recadrage.
-- `active` (boolean, optionnel): Si défini, force l'état à cette valeur. Si omis, inverse l'état actuel.
-- Retourne: L'instance VisualImageTool pour le chaînage.
+
+Enables or disables the crop zone.
+
+- `active` (boolean, optional): If set, forces the state to this value. If omitted, toggles the current state.
+- Returns: The VisualImageTool instance for chaining.
 
 #### `setFocusPoint(x, y)`
-Définit la position du point focal.
-- `x` (number): Coordonnée X en pixels originaux.
-- `y` (number): Coordonnée Y en pixels originaux.
-- Retourne: L'instance VisualImageTool pour le chaînage.
+
+Sets the position of the focus point.
+
+- `x` (number): X coordinate in original pixels.
+- `y` (number): Y coordinate in original pixels.
+- Returns: The VisualImageTool instance for chaining.
 
 #### `setCropZone(x, y, width, height)`
-Définit la position et les dimensions de la zone de recadrage.
-- `x` (number): Coordonnée X en pixels originaux.
-- `y` (number): Coordonnée Y en pixels originaux.
-- `width` (number): Largeur en pixels originaux.
-- `height` (number): Hauteur en pixels originaux.
-- Retourne: L'instance VisualImageTool pour le chaînage.
+
+Sets the position and dimensions of the crop zone.
+
+- `x` (number): X coordinate in original pixels.
+- `y` (number): Y coordinate in original pixels.
+- `width` (number): Width in original pixels.
+- `height` (number): Height in original pixels.
+- Returns: The VisualImageTool instance for chaining.
 
 #### `getFocusPoint()`
-Obtient la position actuelle du point focal.
-- Retourne: Un objet `{x, y}` avec les coordonnées en pixels originaux.
+
+Gets the current position of the focus point.
+
+- Returns: An object `{x, y}` with coordinates in original pixels.
 
 #### `getCropZone()`
-Obtient la position et les dimensions actuelles de la zone de recadrage.
-- Retourne: Un objet `{x, y, width, height}` avec les valeurs en pixels originaux.
+
+Gets the current position and dimensions of the crop zone.
+
+- Returns: An object `{x, y, width, height}` with values in original pixels.
 
 #### `getImageDimensions()`
-Obtient les dimensions originales de l'image.
-- Retourne: Un objet `{width, height}` avec les dimensions en pixels originaux.
+
+Gets the original dimensions of the image.
+
+- Returns: An object `{width, height}` with dimensions in original pixels.
 
 #### `destroy()`
-Détruit l'instance et nettoie les ressources.
 
-### Événements
+Destroys the instance and cleans up resources.
+
+### Events
 
-L'outil utilise le callback `onChange` pour notifier des changements. Ce callback reçoit un objet avec les propriétés suivantes:
+The tool uses the `onChange` callback to notify about changes. This callback receives an object with the following properties:
 
 ```javascript
 {
-  focusPoint: {x, y},           // Position du point focal
-  cropZone: {x, y, width, height}, // Position et dimensions de la zone de recadrage
-  focusActive: true|false,      // État d'activation du point focal
-  cropActive: true|false        // État d'activation de la zone de recadrage
+  focusPoint: {x, y},                // Position of the focus point
+  cropZone: {x, y, width, height},   // Position and dimensions of the crop zone
+  focusActive: true|false,           // Activation state of the focus point
+  cropActive: true|false             // Activation state of the crop zone
 }
 ```
 
-## Exemples d'intégration avec des frameworks
+## Integration Examples with Frameworks
 
 ### React
 
 ```jsx
-import React, { useEffect, useRef } from 'react';
-import VisualImageTool from '@h4md1/visual-image-tool';
+import React, { useEffect, useRef } from "react";
+import VisualImageTool from "@h4md1/visual-image-tool";
 
 function ImageEditor() {
   const imageRef = useRef(null);
   const toolRef = useRef(null);
-  
+
   useEffect(() => {
     if (imageRef.current && !toolRef.current) {
       toolRef.current = new VisualImageTool({
         imageElement: imageRef.current,
         onChange: (data) => {
-          console.log('Données mises à jour:', data);
-        }
+          console.log("Updated data:", data);
+        },
       });
-      
-      // Activer les fonctionnalités
+
+      // Enable features
       toolRef.current.toggleFocusPoint(true);
       toolRef.current.toggleCropZone(true);
     }
-    
-    // Nettoyage
+
+    // Cleanup
     return () => {
       if (toolRef.current) {
         toolRef.current.destroy();
@@ -197,10 +216,10 @@ function ImageEditor() {
       }
     };
   }, []);
-  
+
   return (
     <div>
-      <img ref={imageRef} src="path/to/image.jpg" alt="Éditable" />
+      <img ref={imageRef} src="path/to/image.jpg" alt="Editable" />
     </div>
   );
 }
@@ -211,28 +230,28 @@ function ImageEditor() {
 ```vue
 <template>
   <div>
-    <img ref="editableImage" src="path/to/image.jpg" alt="Éditable" />
+    <img ref="editableImage" src="path/to/image.jpg" alt="Editable" />
   </div>
 </template>
 
 <script>
-import VisualImageTool from '@h4md1/visual-image-tool';
+import VisualImageTool from "@h4md1/visual-image-tool";
 
 export default {
   data() {
     return {
-      imageTool: null
+      imageTool: null,
     };
   },
   mounted() {
     this.imageTool = new VisualImageTool({
       imageElement: this.$refs.editableImage,
       onChange: (data) => {
-        console.log('Données mises à jour:', data);
-      }
+        console.log("Updated data:", data);
+      },
     });
-    
-    // Activer les fonctionnalités
+
+    // Enable features
     this.imageTool.toggleFocusPoint(true);
     this.imageTool.toggleCropZone(true);
   },
@@ -241,27 +260,45 @@ export default {
       this.imageTool.destroy();
       this.imageTool = null;
     }
-  }
+  },
 };
 </script>
 ```
 
-## Démos
+## Demos
+
+The `demo/` folder contains the following examples:
+
+- `basic-usage.html`: Basic usage example
+- `custom-config.html`: Custom configuration demo with live controls
+- `demo-esm.html`: ESM (ECMAScript Module) integration demo
+- `demo-umd.html`: UMD (Universal Module Definition) integration demo
+- `index2.html`: Alternate or experimental demo page
+- `preact-importmap-demo.html`: Preact integration using importmap
+- `react-integration.jsx`: React integration example
+- `vue-importmap-demo.html`: Vue integration using importmap
+- `vue-integration.js`: Vue integration script
+
+## Browser Compatibility
+
+- Chrome (latest versions)
+- Firefox (latest versions)
+- Safari (latest versions)
+- Edge (latest versions)
 
-Consultez le dossier `demos/` pour des exemples complets :
+## Code Formatting
 
-- `basic-usage.html` : Exemple d'utilisation basique
-- `custom-config.html` : Exemple avec configuration personnalisée
-- `react-integration.jsx` : Exemple d'intégration avec React
-- `vue-integration.js` : Exemple d'intégration avec Vue.js
+This project uses a combination of tools for code formatting and linting to ensure consistency:
 
-## Compatibilité navigateur
+- **[Biome](https://biomejs.dev/)**: Handles formatting and linting for JavaScript (`.js`, `.jsx`), TypeScript (`.ts`, `.tsx`), and JSON (`.json`) files.
+  - Check: `npm run lint:check` (`biome check .`)
+  - Fix: `npm run lint:fix` (`biome check --write .`)
+- **[Prettier](https://prettier.io/)**: Handles formatting for other file types like HTML, CSS, Markdown, etc.
+  - Check: `npm run format:check` (`prettier --check --ignore-unknown .`)
+  - Fix: `npm run format:write` (`prettier --write --ignore-unknown .`)
 
-- Chrome (dernières versions)
-- Firefox (dernières versions)
-- Safari (dernières versions)
-- Edge (dernières versions)
+These formatting checks are automatically enforced in the CI pipeline (see `.github/workflows/code-quality.yml`) to maintain code quality.
 
-## Licence
+## License
 
 MIT