@overtone-art/canvas-editor-core 0.3.0 → 0.3.2

package/dist/index.js

@@ -26,6 +26,7 @@ __export(index_exports, {
   CropController: () => CropController,
   DEFAULT_LAYER_SHADOW: () => DEFAULT_LAYER_SHADOW,
   DEFAULT_PATTERN_CONFIG: () => DEFAULT_PATTERN_CONFIG,
+  DEFAULT_SELECTION_STYLE: () => DEFAULT_SELECTION_STYLE,
   DEFAULT_TEXT_CURVE: () => DEFAULT_TEXT_CURVE,
   EventEmitter: () => EventEmitter,
   FontRegistry: () => FontRegistry,
@@ -47,7 +48,9 @@ __export(index_exports, {
   UnitConverter: () => UnitConverter,
   applyAspectLock: () => applyAspectLock,
   applyLayerShadow: () => applyLayerShadow,
+  applyObjectSelectionStyle: () => applyObjectSelectionStyle,
   applyPatternLocks: () => applyPatternLocks,
+  applySelectionStyle: () => applySelectionStyle,
   buildCurvePathData: () => buildCurvePathData,
   buildPatternDataURL: () => buildPatternDataURL,
   captureLocks: () => captureLocks,
@@ -304,6 +307,38 @@ var LayerManager = class {
     this.emitChanged();
     this.onPropertyChanged?.();
   }
+  /**
+   * Patch a layer's host metadata. A key whose value is `undefined` is removed.
+   *
+   * `meta` is part of `LayerData` and is serialized, so a host that assigns
+   * `layer.meta.x` directly gets neither of the two things every other setter
+   * here provides: `layers:changed` (so `useLayers()` keeps returning the old
+   * meta) and the history checkpoint (so an undo silently reverts the write —
+   * the state IS versioned, it was just never committed at the moment it
+   * changed). Going through this method is what makes metadata behave like
+   * every other layer property.
+   */
+  setMeta(id, patch) {
+    const layer = this.get(id);
+    if (!layer) return;
+    const next = { ...layer.meta };
+    let changed = false;
+    for (const [key, value] of Object.entries(patch)) {
+      if (value === void 0) {
+        if (key in next) {
+          delete next[key];
+          changed = true;
+        }
+        continue;
+      }
+      if (next[key] !== value) changed = true;
+      next[key] = value;
+    }
+    if (!changed) return;
+    layer.meta = next;
+    this.emitChanged();
+    this.onPropertyChanged?.();
+  }
   clear() {
     for (const layer of this.layers) {
       this.canvas.remove(layer.fabricObject);
@@ -1657,6 +1692,43 @@ function applyLayerShadow(object, config) {
   });
 }
 
+// src/selection-style.ts
+var DEFAULT_SELECTION_STYLE = {
+  borderColor: "#c9a96e",
+  cornerColor: "#c9a96e",
+  cornerStrokeColor: "#101010",
+  cornerSize: 11,
+  cornerStyle: "circle",
+  borderWidth: 1,
+  borderDashArray: null,
+  padding: 0,
+  marqueeFill: "rgba(201, 169, 110, 0.12)"
+};
+function applyObjectSelectionStyle(object, style, zoom) {
+  const scale = zoom > 0 ? 1 / zoom : 1;
+  object.set({
+    cornerSize: style.cornerSize * scale,
+    cornerStyle: style.cornerStyle,
+    cornerColor: style.cornerColor,
+    cornerStrokeColor: style.cornerStrokeColor,
+    // A filled handle is what makes the stroke colour visible at all.
+    transparentCorners: false,
+    borderColor: style.borderColor,
+    borderScaleFactor: style.borderWidth * scale,
+    borderDashArray: style.borderDashArray?.map((segment) => segment * scale) ?? null,
+    padding: style.padding * scale
+  });
+}
+function applySelectionStyle(canvas, style, zoom) {
+  for (const object of canvas.getObjects()) applyObjectSelectionStyle(object, style, zoom);
+  const active = canvas.getActiveObject();
+  if (active) applyObjectSelectionStyle(active, style, zoom);
+  canvas.selectionColor = style.marqueeFill;
+  canvas.selectionBorderColor = style.borderColor;
+  canvas.selectionLineWidth = style.borderWidth * (zoom > 0 ? 1 / zoom : 1);
+  canvas.requestRenderAll();
+}
+
 // src/transform.ts
 var SIDE_CONTROLS = ["ml", "mr", "mt", "mb"];
 function applyAspectLock(object, locked) {
@@ -2664,6 +2736,7 @@ var CanvasEditor = class {
   fileAdapter;
   imageProvider;
   zoomLevel = 1;
+  selectionStyle = { ...DEFAULT_SELECTION_STYLE };
   mockup = null;
   // The design's configured background. The live canvas background is forced
   // transparent while a mockup preview is shown, so this is the source of truth
@@ -2711,6 +2784,7 @@ var CanvasEditor = class {
     this.curves = new TextCurveManager(this.canvas, this.layers, this.history, this.events);
     this.maskPresets = new MaskPresetManager(this.canvas, this.layers, this.history, this.events);
     this.setupCanvasEvents();
+    this.refreshSelectionStyle();
     this.history.saveImmediate();
     this.pages = new ProjectManager(this);
     this.masks = new MaskController(this);
@@ -3381,6 +3455,7 @@ var CanvasEditor = class {
     const next = clamp(round2(level), MIN_ZOOM, MAX_ZOOM);
     if (next === this.zoomLevel) return;
     this.zoomLevel = next;
+    this.refreshSelectionStyle();
     this.events.emit("zoom:changed", { zoom: next });
   }
   /** @deprecated use setZoom — kept for backward compatibility. */
@@ -3529,8 +3604,31 @@ var CanvasEditor = class {
     this.events.removeAllListeners();
     this.canvas.dispose();
   }
+  // ─── Selection style ────────────────────────────────
+  /** Current look of the selection frame and its handles. */
+  getSelectionStyle() {
+    return { ...this.selectionStyle };
+  }
+  /**
+   * Restyles the selection frame and resize handles. Sizes are in screen
+   * pixels and stay constant across zoom levels (see `SelectionStyle`).
+   */
+  setSelectionStyle(style) {
+    this.selectionStyle = { ...this.selectionStyle, ...style };
+    this.refreshSelectionStyle();
+  }
+  refreshSelectionStyle() {
+    applySelectionStyle(this.canvas, this.selectionStyle, this.zoomLevel);
+  }
   // ─── Private ────────────────────────────────────────
   setupCanvasEvents() {
+    this.canvas.on("object:added", (e) => {
+      if (e.target) applyObjectSelectionStyle(e.target, this.selectionStyle, this.zoomLevel);
+    });
+    const styleActive = () => {
+      const active = this.canvas.getActiveObject();
+      if (active) applyObjectSelectionStyle(active, this.selectionStyle, this.zoomLevel);
+    };
     this.canvas.on("object:modified", (e) => {
       if (!e.target) return;
       const layer = this.layers.findByObject(e.target);
@@ -3540,10 +3638,12 @@ var CanvasEditor = class {
       }
     });
     this.canvas.on("selection:created", (e) => {
+      styleActive();
       const selected = (e.selected ?? []).map((obj) => this.layers.findByObject(obj)?.id).filter((id) => id !== void 0);
       this.events.emit("selection:changed", { selected });
     });
     this.canvas.on("selection:updated", (e) => {
+      styleActive();
       const selected = (e.selected ?? []).map((obj) => this.layers.findByObject(obj)?.id).filter((id) => id !== void 0);
       this.events.emit("selection:changed", { selected });
     });
@@ -3625,6 +3725,7 @@ var AnnotationOverlay = class {
   CropController,
   DEFAULT_LAYER_SHADOW,
   DEFAULT_PATTERN_CONFIG,
+  DEFAULT_SELECTION_STYLE,
   DEFAULT_TEXT_CURVE,
   EventEmitter,
   FontRegistry,
@@ -3646,7 +3747,9 @@ var AnnotationOverlay = class {
   UnitConverter,
   applyAspectLock,
   applyLayerShadow,
+  applyObjectSelectionStyle,
   applyPatternLocks,
+  applySelectionStyle,
   buildCurvePathData,
   buildPatternDataURL,
   captureLocks,