@h4md1/visual-image-tool 0.2.0 → 0.2.1

package/README.md

@@ -23,10 +23,10 @@ npm install @h4md1/visual-image-tool
 
 ```javascript
 // ES modules import (recommended)
-import VisualImageTool from '@h4md1/visual-image-tool';
+import VisualImageTool from "@h4md1/visual-image-tool";
 
 // OR CommonJS import
-const VisualImageTool = require('@h4md1/visual-image-tool');
+const VisualImageTool = require("@h4md1/visual-image-tool");
 
 // OR direct usage via script tag (UMD)
 // <script src="node_modules/image-tool/dist/image-tool.umd.js"></script>
@@ -37,12 +37,12 @@ const VisualImageTool = require('@h4md1/visual-image-tool');
 ```javascript
 // 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('Focus point:', data.focusPoint);
-    console.log('Crop zone:', data.cropZone);
-  }
+    console.log("Focus point:", data.focusPoint);
+    console.log("Crop zone:", data.cropZone);
+  },
 });
 ```
 
@@ -71,7 +71,7 @@ const cropZone = imageTool.getCropZone();
 ```javascript
 const imageTool = new VisualImageTool.VisualImageTool({
   // Image element (required) - can be a CSS selector or a DOM element
-  imageElement: '#myImage',
+  imageElement: "#myImage",
 
   // Enable debug logs for overlay positioning (optional)
   debug: true, // Set to true to see overlay positioning logs in the console
@@ -80,34 +80,34 @@ const imageTool = new VisualImageTool.VisualImageTool({
   focusPoint: {
     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)",
+    },
   },
 
   // Crop zone configuration (optional)
   cropZone: {
     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) {
+  onChange: function (data) {
     // data contains focusPoint, cropZone, focusActive, cropActive
-  }
+  },
 });
 ```
 
@@ -116,23 +116,31 @@ const imageTool = new VisualImageTool.VisualImageTool({
 ### Methods
 
 #### `toggleFocusPoint(active)`
+
 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)`
+
 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)`
+
 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)`
+
 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.
@@ -140,18 +148,25 @@ Sets the position and dimensions of the crop zone.
 - Returns: The VisualImageTool instance for chaining.
 
 #### `getFocusPoint()`
+
 Gets the current position of the focus point.
+
 - Returns: An object `{x, y}` with coordinates in original pixels.
 
 #### `getCropZone()`
+
 Gets the current position and dimensions of the crop zone.
+
 - Returns: An object `{x, y, width, height}` with values in original pixels.
 
 #### `getImageDimensions()`
+
 Gets the original dimensions of the image.
+
 - Returns: An object `{width, height}` with dimensions in original pixels.
 
 #### `destroy()`
+
 Destroys the instance and cleans up resources.
 
 ### Events
@@ -172,27 +187,27 @@ The tool uses the `onChange` callback to notify about changes. This callback rec
 ### 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('Updated data:', data);
-        }
+          console.log("Updated data:", data);
+        },
       });
-      
+
       // Enable features
       toolRef.current.toggleFocusPoint(true);
       toolRef.current.toggleCropZone(true);
     }
-    
+
     // Cleanup
     return () => {
       if (toolRef.current) {
@@ -201,7 +216,7 @@ function ImageEditor() {
       }
     };
   }, []);
-  
+
   return (
     <div>
       <img ref={imageRef} src="path/to/image.jpg" alt="Editable" />
@@ -220,22 +235,22 @@ function ImageEditor() {
 </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('Updated data:', data);
-      }
+        console.log("Updated data:", data);
+      },
     });
-    
+
     // Enable features
     this.imageTool.toggleFocusPoint(true);
     this.imageTool.toggleCropZone(true);
@@ -245,7 +260,7 @@ export default {
       this.imageTool.destroy();
       this.imageTool = null;
     }
-  }
+  },
 };
 </script>
 ```
@@ -271,6 +286,19 @@ The `demo/` folder contains the following examples:
 - Safari (latest versions)
 - Edge (latest versions)
 
+## Code Formatting
+
+This project uses a combination of tools for code formatting and linting to ensure consistency:
+
+- **[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 .`)
+
+These formatting checks are automatically enforced in the CI pipeline (see `.github/workflows/code-quality.yml`) to maintain code quality.
+
 ## License
 
 MIT