@anu3ev/fabric-image-editor 0.1.48 → 0.1.49

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (2) hide show
  1. package/package.json +1 -1
  2. package/readme.md +33 -32
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@anu3ev/fabric-image-editor",
3
- "version": "0.1.48",
3
+ "version": "0.1.49",
4
4
  "description": "JavaScript image editor built on FabricJS, allowing you to create instances with an integrated montage area and providing an API to modify and manage state.",
5
5
  "module": "dist/main.js",
6
6
  "files": [
package/readme.md CHANGED
@@ -1,24 +1,25 @@
1
1
  # Fabric Image Editor
2
2
 
3
- A browser image editor built on top of [FabricJS](https://fabricjs.com/). The project exposes a library `@anu3ev/fabric-image-editor` that can be embedded in any web page and comes with a small demo application.
3
+ Fabric Image Editor is a browser-based image editor powered by [FabricJS](https://fabricjs.com/). It is published as the library `@anu3ev/fabric-image-editor` and can be embedded into any web page. The repository also contains a small demo application that showcases the library's capabilities.
4
4
 
5
5
  ## Features
6
6
 
7
- - Built-in montage area and clipping region
8
- - Layer, history and selection management
9
- - Object transformation (zoom, rotation, flip, fit, etc.)
10
- - Clipboard and grouping helpers
11
- - Offloads heavy tasks to a Web Worker
7
+ - Montage area and clipping region for easy cropping
8
+ - Layer, history and selection managers
9
+ - Object transformation helpers (zoom, rotate, flip, fit)
10
+ - Copy/paste and grouping tools
11
+ - Heavy operations are executed in a Web Worker to keep the UI responsive
12
+ - Configurable toolbar with actions for selected objects
12
13
 
13
14
  ## Installation
14
15
 
15
- ```
16
+ ```bash
16
17
  npm install @anu3ev/fabric-image-editor
17
- ```
18
+ ````
18
19
 
19
- ## Usage
20
+ ## Quick Start
20
21
 
21
- Create a canvas container in your HTML and initialise the editor:
22
+ Create a container in your HTML and initialize the editor:
22
23
 
23
24
  ```html
24
25
  <div id="editor"></div>
@@ -29,49 +30,49 @@ import initEditor from '@anu3ev/fabric-image-editor'
29
30
 
30
31
  document.addEventListener('DOMContentLoaded', async () => {
31
32
  const editor = await initEditor('editor', {
32
- width: 800,
33
- height: 600,
34
- displayWidth: '800px',
35
- displayHeight: '600px'
33
+ montageAreaWidth: 512,
34
+ montageAreaHeight: 512,
35
+ editorContainerWidth: '100%',
36
+ editorContainerHeight: '100vh'
36
37
  })
37
38
 
38
- // use the `editor` instance...
39
+ // work with the `editor` instance...
39
40
  })
40
41
  ```
41
42
 
42
- ## Running the demo
43
+ ## Running the Demo
43
44
 
44
- Clone this repository and install the dependencies:
45
+ Clone this repository and install dependencies:
45
46
 
46
- ```
47
+ ```bash
47
48
  npm install
48
49
  npm run dev
49
50
  ```
50
51
 
51
- This starts a Vite dev server and opens the demo from `index.html`.
52
+ A Vite dev server will start and open the demo page from `index.html`.
52
53
 
53
- ## Building the library
54
+ ## Building the Library
54
55
 
55
- Run `npm run build` to produce the library build in the `dist/` folder. The output is an ES module that can be published or used directly in your projects.
56
+ Use `npm run build` to create the library build in the `dist/` directory. The output is an ES module that can be published to npm or used directly in other projects.
56
57
 
57
- ## Repository structure
58
+ ## Project Structure
58
59
 
59
60
  ```
60
61
  src/
61
- main.ts - library entry exporting `initEditor`
62
- demo/ - demo scripts and styles
63
- editor/ - ImageEditor class and feature managers
64
- index.html - demo page
65
- vite.config.js - Vite configuration
62
+ main.ts – entry point exporting `initEditor`
63
+ demo/ – demo scripts and styles
64
+ editor/ – ImageEditor class and feature managers
65
+ index.html – demo page
66
+ vite.config.js – Vite configuration
66
67
  ```
67
68
 
68
- The `editor` directory contains managers responsible for canvas manipulation, image handling, history, layers, shapes, clipboard and more.
69
+ The `editor` directory is divided into managers for canvas manipulation, image handling, history, layers, shapes, clipboard and more. Look inside these files to understand how each feature works.
69
70
 
70
- ## Further reading
71
+ ## Further Reading
71
72
 
72
- - Explore the manager classes in `src/editor` for details on how each feature works.
73
- - Look at TODO comments throughout the codebase for areas that could be extended.
74
- - Familiarise yourself with FabricJS to customise the editor's behaviour.
73
+ * Explore the manager classes under `src/editor` for implementation details
74
+ * Check TODO comments in the code for planned features and improvements
75
+ * Familiarize yourself with FabricJS to extend the editor
75
76
 
76
77
  ## License
77
78