@overtone-art/canvas-editor-core 0.6.0 → 0.6.2

package/dist/index.mjs

@@ -209,6 +209,19 @@ var LayerManager = class {
     this.layers = this.layers.filter((l) => l.id !== group.id);
     this.syncZOrder();
   }
+  /**
+   * Move existing layer records under a group, and announce the new tree.
+   * Assigning `group.children` directly emits nothing, and the reorder that
+   * follows a grouping is a no-op whenever the group already sits where it
+   * belongs — leaving `layers:changed` describing a childless group, so a panel
+   * built on it renders the group with nothing inside.
+   */
+  adoptChildren(group, children) {
+    for (const child of children) child.parentId = group.id;
+    group.children = children;
+    this.emitChanged();
+    this.onPropertyChanged?.();
+  }
   /**
    * Re-attach child records to an enlivened group. `data[i]` describes
    * `group._objects[i]` — the order fabric serializes and restores them in. A
@@ -1863,6 +1876,7 @@ var MEASURE_WIDTH = 1e5;
 var PATH_SLACK = 0.06;
 var FALLBACK_LINE_HEIGHT = 1.16;
 var patches = /* @__PURE__ */ new WeakMap();
+var authoredCaching = /* @__PURE__ */ new WeakMap();
 function isCurvable(object) {
   return !!object && typeof object.text === "string";
 }
@@ -1894,11 +1908,29 @@ var TextCurveManager = class {
     this.layers = layers;
     this.history = history;
     this.events = events;
+    this.canvas.on("text:changed", this.onTextChanged);
   }
   canvas;
   layers;
   history;
   events;
+  /**
+   * Typing on the canvas changes the run the paths were built for. Fabric drops
+   * a glyph whose centre falls past the end of the path, so without rebuilding
+   * here a longer replacement simply vanishes — select-all-and-retype rendered
+   * an empty box — and a shorter one piles up on a path built for the old text.
+   *
+   * No history entry: fabric records the edit when editing exits, and one save
+   * per keystroke would bury every earlier step under the typing.
+   */
+  onTextChanged = (event) => {
+    const layer = event.target ? this.layers.findByObject(event.target) : void 0;
+    if (!layer?.meta.curve) return;
+    this.refresh(layer.id, false);
+  };
+  dispose() {
+    this.canvas.off("text:changed", this.onTextChanged);
+  }
   /** Curve parameters for a layer, or null when it is not curved text. */
   get(layerId) {
     const layer = this.layers.get(layerId);
@@ -1958,11 +1990,21 @@ var TextCurveManager = class {
     if (!curve) return false;
     return this.apply(layerId, curve, save);
   }
-  /** Rebuild every curved layer — used after a state restore. */
+  /**
+   * Rebuild every curved layer — used after a state restore.
+   *
+   * `getAll` is the canvas stack, so this walks each group's children too:
+   * curved text inside a group would otherwise keep the path geometry it was
+   * restored with, and stop tracking its own text, font and size.
+   */
   refreshAll() {
-    for (const layer of this.layers.getAll()) {
-      if (layer.meta.curve) this.refresh(layer.id);
-    }
+    const visit = (layers) => {
+      for (const layer of layers) {
+        if (layer.meta.curve) this.refresh(layer.id);
+        if (layer.children.length > 0) visit(layer.children);
+      }
+    };
+    visit(this.layers.getAll());
   }
   /**
    * Puts every line's path on the object as one shape, and hooks per-line
@@ -1973,6 +2015,8 @@ var TextCurveManager = class {
    * outside the layer's box — where object caching clips it away.
    */
   attach(text, curves) {
+    if (!authoredCaching.has(text)) authoredCaching.set(text, text.objectCaching);
+    text.set({ objectCaching: false });
     const paths = curves.map(toFabricPath);
     const union = paths.length === 1 ? paths[0] : toFabricPath({ data: curves.map((c) => c.data).join(" "), length: 0 });
     text.set({
@@ -2035,6 +2079,11 @@ var TextCurveManager = class {
   }
   detach(text, authoredWidth) {
     this.unpatchLineMeasure(text);
+    const caching = authoredCaching.get(text);
+    if (caching !== void 0) {
+      text.set({ objectCaching: caching });
+      authoredCaching.delete(text);
+    }
     text.set({ path: null, pathStartOffset: 0 });
     if (authoredWidth !== void 0 && authoredWidth > 0) text.set({ width: authoredWidth });
   }
@@ -4184,8 +4233,7 @@ var CanvasEditor = class {
       }
       const group = new Group7(objects);
       const grouped = this.layers.add("group", group, name);
-      for (const child of children) child.parentId = grouped.id;
-      grouped.children = children;
+      this.layers.adoptChildren(grouped, children);
       this.layers.reorder(grouped.id, insertIndex);
       this.layers.select(grouped.id);
       this.history.save();
@@ -4794,6 +4842,7 @@ var CanvasEditor = class {
     this.crop.dispose();
     this.history.dispose();
     this.patterns.dispose();
+    this.curves.dispose();
     this.events.removeAllListeners();
     this.canvas.dispose();
   }