@anu3ev/fabric-image-editor 0.6.7 → 0.6.12

package/readme.md

@@ -175,6 +175,71 @@ editor.textManager.updateText({
 })
 ```
 
+### Working with Shapes
+
+`ShapeManager` works with composite objects: an outer shape plus an inner text node that stay in sync during layout, scaling, history restore, copy/paste, and template rehydration.
+
+Built-in preset keys: `circle`, `triangle`, `square`, `diamond`, `pentagon`, `hexagon`, `star`, `sparkle`, `heart`, `arrow-right-fat`, `arrow-up-fat`, `arrow-right`, `arrow-down-fat`, `arrow-up-down`, `arrow-left-right`, `drop`, `cross`, `gear`, `badge`, `bookmark`, `tag`, `moon`.
+
+```javascript
+// Create a shape group with text
+const badge = await editor.shapeManager.add({
+  presetKey: 'badge',
+  options: {
+    id: 'promo-badge',
+    width: 220,
+    height: 160,
+    text: 'SALE',
+    fill: '#111827',
+    stroke: '#f59e0b',
+    strokeWidth: 6,
+    textStyle: {
+      fontSize: 34,
+      color: '#ffffff',
+      bold: true
+    },
+    alignH: 'center',
+    alignV: 'middle'
+  }
+})
+
+// Update shape-only styling
+editor.shapeManager.setOpacity({
+  target: badge,
+  opacity: 0.9
+})
+
+editor.shapeManager.setStroke({
+  target: badge,
+  stroke: '#22c55e',
+  strokeWidth: 4,
+  dash: [12, 6]
+})
+
+// Update inner text with layout-aware recalculation
+editor.shapeManager.updateTextStyle({
+  target: 'promo-badge',
+  style: {
+    text: 'LIMITED',
+    uppercase: true,
+    fontSize: 30,
+    color: '#f9fafb'
+  }
+})
+
+// Swap preset while preserving text, transforms, and metadata
+await editor.shapeManager.update({
+  target: badge,
+  presetKey: 'tag',
+  options: {
+    fill: '#dc2626',
+    width: 240
+  }
+})
+```
+
+All mutating `ShapeManager` methods save to history by default. Pass `withoutSave: true` for internal or batched updates.
+
 ### Configuring Fonts
 
 By default the editor ships with a curated Google Fonts collection (Latin + Cyrillic coverage).
@@ -242,7 +307,7 @@ The editor follows a modular architecture with specialized managers:
 - **`ClipboardManager`** - Copy/paste with system clipboard integration
 - **`GroupingManager`** - Object grouping and ungrouping operations
 - **`DeletionManager`** - Object deletion with group handling
-- **`ShapeManager`** - Shape creation (rectangles, circles, triangles)
+- **`ShapeManager`** - Preset-based shape groups with inner text, layout, scaling, and style controls
 - **`ObjectLockManager`** - Object locking and unlocking functionality
 - **`SnappingManager`** - Alignment guides and equal-spacing snaps while moving objects
 - **`MeasurementManager`** - ALT-triggered distance guides to hovered objects or the montage area
@@ -351,6 +416,71 @@ editor.layerManager.sendBackwards(object)
 editor.layerManager.bringForward(object)
 ```
 
+#### Shape Management
+```javascript
+// Add a new shape group
+const shape = await editor.shapeManager.add({
+  presetKey: 'hexagon',
+  options: {
+    text: 'Hello',
+    fill: '#2563eb',
+    width: 220,
+    height: 180
+  }
+})
+
+// Rebuild the same shape group with another preset
+await editor.shapeManager.update({
+  target: shape,
+  presetKey: 'diamond',
+  options: {
+    text: 'Updated',
+    alignH: 'center',
+    alignV: 'middle'
+  }
+})
+
+// Shape-only styling
+editor.shapeManager.setFill({ target: shape, fill: '#7c3aed' })
+editor.shapeManager.setStroke({ target: shape, stroke: '#111827', strokeWidth: 3 })
+editor.shapeManager.setOpacity({ target: shape, opacity: 0.85 })
+
+// Text styling inside the shape
+editor.shapeManager.updateTextStyle({
+  target: shape,
+  style: {
+    fontSize: 28,
+    color: '#ffffff',
+    bold: true
+  }
+})
+
+editor.shapeManager.setTextAlign({
+  target: shape,
+  horizontal: 'center',
+  vertical: 'middle'
+})
+
+await editor.shapeManager.setRounding({
+  target: shape,
+  rounding: 20
+})
+
+editor.shapeManager.remove({ target: shape })
+```
+
+`target` can be omitted to use the active shape group. You can also pass the shape group itself, an inner Fabric object from that group, or the group's `id` string.
+
+`ShapeManager` public methods:
+- `add()` creates a new shape group from a preset and optional text/style overrides.
+- `update()` swaps the preset while preserving existing text, transforms, and object metadata.
+- `remove()` deletes the shape group from canvas.
+- `setFill()`, `setStroke()`, and `setOpacity()` update the visual style of the outer shape node.
+- `getTextNode()` returns the inner `Textbox` so it can be inspected or passed into other APIs.
+- `updateTextStyle()` applies `TextManager`-style updates to the inner text and recalculates the group layout.
+- `setTextAlign()` changes horizontal and vertical alignment inside the shape bounds.
+- `setRounding()` enables or updates corner rounding for roundable presets.
+
 #### Alignment & Guides
 - Objects snap to montage area edges/centers and nearby objects while dragging, with guides for matches and equal spacing.
 - Hold `Ctrl` during drag to temporarily disable snapping (movement still follows the configured move step).

package/dist/assets/worker-2TM2HcqM.js

@@ -1,2 +0,0 @@
-var b=(m,a,n)=>new Promise((f,e)=>{var l=t=>{try{r(n.next(t))}catch(c){e(c)}},d=t=>{try{r(n.throw(t))}catch(c){e(c)}},r=t=>t.done?f(t.value):Promise.resolve(t.value).then(l,d);r((n=n.apply(m,a)).next())});(function(){"use strict";self.onmessage=m=>b(null,null,function*(){const{action:a,payload:n,requestId:f}=m.data;try{switch(a){case"resizeImage":{const{dataURL:e,maxWidth:l,maxHeight:d,minWidth:r,minHeight:t,contentType:c,quality:w,sizeType:g}=n,h=yield createImageBitmap(yield(yield fetch(e)).blob());let{width:s,height:o}=h,i=Math.min(l/s,d/o);g==="min"&&(i=Math.max(r/s,t/o)),s=Math.floor(s*i),o=Math.floor(o*i);const u=new OffscreenCanvas(s,o),p=u.getContext("2d");if(!p)throw new Error("Failed to get 2D context from OffscreenCanvas");p.drawImage(h,0,0,s,o);const y=yield u.convertToBlob({type:c,quality:w});self.postMessage({requestId:f,action:a,success:!0,data:y});break}case"toDataURL":{const{bitmap:e,contentType:l,quality:d,returnBlob:r}=n,{width:t,height:c}=e,w=new OffscreenCanvas(e.width,e.height),g=w.getContext("2d");if(!g)throw new Error("Failed to get 2D context from OffscreenCanvas");g.drawImage(e,0,0,t,c);const h=yield w.convertToBlob({type:l,quality:d});if(r){self.postMessage({requestId:f,action:a,success:!0,data:h});break}const s=yield new Promise(o=>{const i=new FileReader;i.onload=()=>o(i.result),i.readAsDataURL(h)});self.postMessage({requestId:f,action:a,success:!0,data:s});break}default:throw new Error(`Unknown action ${a}`)}}catch(e){self.postMessage({requestId:f,action:a,success:!1,error:e.message})}})})();
-//# sourceMappingURL=worker-2TM2HcqM.js.map