diff --git a/.github/workflows/code-quality.yml b/.github/workflows/code-quality.yml index 38b3379..e23d7b5 100644 --- a/.github/workflows/code-quality.yml +++ b/.github/workflows/code-quality.yml @@ -2,9 +2,9 @@ name: Code Quality Check on: push: - branches: [ main ] + branches: [main] pull_request: - branches: [ main ] + branches: [main] jobs: lint: @@ -15,11 +15,13 @@ jobs: - name: Setup Node.js uses: actions/setup-node@v4 with: - node-version: '22' - cache: 'npm' + node-version: "22" + cache: "npm" - name: Install dependencies run: npm ci - name: Run linting check - run: npm run lint:check \ No newline at end of file + run: npm run lint:check + - name: Check formatting (Prettier) + run: npm run format:check diff --git a/.github/workflows/npm-publish.yml b/.github/workflows/npm-publish.yml index a9c9cd3..dcd4c60 100644 --- a/.github/workflows/npm-publish.yml +++ b/.github/workflows/npm-publish.yml @@ -3,7 +3,7 @@ name: Publish to npm on tag on: push: tags: - - '*' + - "*" workflow_dispatch: jobs: @@ -14,9 +14,9 @@ jobs: - uses: actions/setup-node@v4 with: - node-version: '22' - registry-url: 'https://registry.npmjs.org' - + node-version: "22" + registry-url: "https://registry.npmjs.org" + - run: npm ci - run: npm run build @@ -25,4 +25,4 @@ jobs: - run: npm publish --access public env: - NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }} \ No newline at end of file + NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }} diff --git a/.prettierignore b/.prettierignore new file mode 100644 index 0000000..108b5cf --- /dev/null +++ b/.prettierignore @@ -0,0 +1,16 @@ +# Ignore dependencies +node_modules/ + +# Ignore lock files +package-lock.json + +# Ignore build output (if any) +# dist/ +# build/ + +# Ignore JS/TS files (handled by Biome) +*.js +*.jsx +*.ts +*.tsx +*.json \ No newline at end of file diff --git a/.prettierrc.json b/.prettierrc.json new file mode 100644 index 0000000..e0d63ae --- /dev/null +++ b/.prettierrc.json @@ -0,0 +1,11 @@ +{ + "printWidth": 80, + "tabWidth": 2, + "useTabs": false, + "semi": true, + "singleQuote": false, + "trailingComma": "es5", + "bracketSpacing": true, + "arrowParens": "always", + "endOfLine": "lf" +} diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md index 3e6d448..b899e08 100644 --- a/CONTRIBUTING.md +++ b/CONTRIBUTING.md @@ -12,12 +12,14 @@ Ce document est destiné aux développeurs qui maintiennent, modifient ou contri ### Installation locale 1. Clonez le dépôt : + ```bash git clone https://github.com/killerwolf/visual-image-tool.git cd visual-image-tool ``` 2. Installez les dépendances : + ```bash npm install ``` @@ -53,6 +55,7 @@ Le projet utilise Rollup pour générer trois formats de distribution : 3. **CommonJS** (`dist/visual-image-tool.js`) : Format pour Node.js Pour lancer le build : + ```bash npm run build ``` @@ -78,6 +81,7 @@ npm link visual-image-tool ### Préparation 1. Mettez à jour la version dans `package.json` selon les règles de [SemVer](https://semver.org/) : + - Patch (1.0.x) : Corrections de bugs - Minor (1.x.0) : Nouvelles fonctionnalités rétrocompatibles - Major (x.0.0) : Changements non rétrocompatibles @@ -89,16 +93,19 @@ npm link visual-image-tool ### Publication 1. Connectez-vous à npm : + ```bash npm login ``` 2. Publiez le package : + ```bash npm publish ``` Pour une version bêta ou release candidate : + ```bash npm publish --tag beta ``` diff --git a/README.md b/README.md index 88a084e..88c1fbf 100644 --- a/README.md +++ b/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) // @@ -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 (
@@ -220,22 +235,22 @@ function ImageEditor() {
```
@@ -271,12 +286,18 @@ The `demo/` folder contains the following examples:
- Safari (latest versions)
- Edge (latest versions)
-## Linting and Formatting
+## Code Formatting
+
+This project uses a combination of tools for code formatting and linting to ensure consistency:
-This project uses [Biome](https://biomejs.dev/) for code formatting and linting.
+- **[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 .`)
-- Run `npm run lint:check` to check for formatting and linting issues.
-- Run `npm run lint:fix` to automatically fix formatting and safe linting issues.
+These formatting checks are automatically enforced in the CI pipeline (see `.github/workflows/code-quality.yml`) to maintain code quality.
## License
diff --git a/demo/basic-usage.html b/demo/basic-usage.html
index 2f76cc7..dce039d 100644
--- a/demo/basic-usage.html
+++ b/demo/basic-usage.html
@@ -1,102 +1,110 @@
-
+
-
-
-
- + +++- - - - - - +Example Code
+// Import the library (in a module environment) // import ImageTool from 'image-tool'; @@ -141,58 +149,69 @@-Example Code
height ); }); -
- A lightweight vanilla JavaScript tool to define focus points and crop zones on images.
+
+
+ A lightweight vanilla JavaScript tool to define focus points and crop + zones on images.