@overtone-art/canvas-editor-core 0.0.1

package/dist/index.js

@@ -0,0 +1,657 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.ts
+var index_exports = {};
+__export(index_exports, {
+  CanvasEditor: () => CanvasEditor,
+  EventEmitter: () => EventEmitter,
+  HistoryManager: () => HistoryManager,
+  Layer: () => Layer,
+  LayerManager: () => LayerManager,
+  UnitConverter: () => UnitConverter,
+  clamp: () => clamp,
+  deserializeEditor: () => deserializeEditor,
+  exportDataURL: () => exportDataURL,
+  exportPNG: () => exportPNG,
+  exportSVG: () => exportSVG,
+  generateId: () => generateId,
+  round2: () => round2,
+  serializeEditor: () => serializeEditor
+});
+module.exports = __toCommonJS(index_exports);
+
+// src/editor.ts
+var import_fabric2 = require("fabric");
+
+// src/events.ts
+var EventEmitter = class {
+  listeners = /* @__PURE__ */ new Map();
+  on(event, handler) {
+    if (!this.listeners.has(event)) {
+      this.listeners.set(event, /* @__PURE__ */ new Set());
+    }
+    this.listeners.get(event).add(handler);
+  }
+  off(event, handler) {
+    this.listeners.get(event)?.delete(handler);
+  }
+  once(event, handler) {
+    const wrapped = (data) => {
+      this.off(event, wrapped);
+      handler(data);
+    };
+    this.on(event, wrapped);
+  }
+  emit(event, data) {
+    const handlers = this.listeners.get(event);
+    if (!handlers) return;
+    for (const handler of handlers) {
+      handler(data);
+    }
+  }
+  removeAllListeners(event) {
+    if (event) {
+      this.listeners.delete(event);
+    } else {
+      this.listeners.clear();
+    }
+  }
+};
+
+// src/utils/id.ts
+var import_nanoid = require("nanoid");
+var generateId = () => (0, import_nanoid.nanoid)(12);
+
+// src/layer.ts
+var Layer = class {
+  id;
+  type;
+  name;
+  visible;
+  locked;
+  opacity;
+  fabricObject;
+  constructor(type, fabricObject, name, id) {
+    this.id = id ?? generateId();
+    this.type = type;
+    this.name = name ?? `${type}-${this.id.slice(0, 4)}`;
+    this.visible = true;
+    this.locked = false;
+    this.opacity = 1;
+    this.fabricObject = fabricObject;
+    this.fabricObject._layerId = this.id;
+  }
+  toData() {
+    return {
+      id: this.id,
+      type: this.type,
+      name: this.name,
+      visible: this.visible,
+      locked: this.locked,
+      opacity: this.opacity
+    };
+  }
+  serialize() {
+    return {
+      ...this.toData(),
+      fabricObject: this.fabricObject.toObject()
+    };
+  }
+};
+var LayerManager = class {
+  constructor(canvas, events) {
+    this.canvas = canvas;
+    this.events = events;
+  }
+  canvas;
+  events;
+  layers = [];
+  add(type, fabricObject, name, id) {
+    const layer = new Layer(type, fabricObject, name, id);
+    this.layers.push(layer);
+    this.canvas.add(fabricObject);
+    this.events.emit("layer:added", { layer: layer.toData() });
+    this.emitChanged();
+    return layer;
+  }
+  remove(id) {
+    const index = this.layers.findIndex((l) => l.id === id);
+    if (index === -1) return false;
+    const layer = this.layers[index];
+    this.canvas.remove(layer.fabricObject);
+    this.layers.splice(index, 1);
+    this.events.emit("layer:removed", { layerId: id });
+    this.emitChanged();
+    return true;
+  }
+  reorder(id, newIndex) {
+    const oldIndex = this.layers.findIndex((l) => l.id === id);
+    if (oldIndex === -1) return false;
+    const clamped = Math.max(0, Math.min(this.layers.length - 1, newIndex));
+    const [layer] = this.layers.splice(oldIndex, 1);
+    this.layers.splice(clamped, 0, layer);
+    this.layers.forEach((l, i) => {
+      this.canvas.moveObjectTo(l.fabricObject, i);
+    });
+    this.events.emit("layer:reordered", { layerIds: this.layers.map((l) => l.id) });
+    this.emitChanged();
+    return true;
+  }
+  select(id) {
+    if (id === null) {
+      this.canvas.discardActiveObject();
+    } else {
+      const layer = this.get(id);
+      if (layer) {
+        this.canvas.setActiveObject(layer.fabricObject);
+      }
+    }
+    this.canvas.requestRenderAll();
+    this.events.emit("layer:selected", { layerId: id });
+  }
+  get(id) {
+    return this.layers.find((l) => l.id === id);
+  }
+  getAll() {
+    return [...this.layers];
+  }
+  findByObject(obj) {
+    const layerId = obj._layerId;
+    if (layerId) return this.get(layerId);
+    return this.layers.find((l) => l.fabricObject === obj);
+  }
+  setVisibility(id, visible) {
+    const layer = this.get(id);
+    if (!layer) return;
+    layer.visible = visible;
+    layer.fabricObject.visible = visible;
+    this.canvas.requestRenderAll();
+    this.emitChanged();
+  }
+  setLocked(id, locked) {
+    const layer = this.get(id);
+    if (!layer) return;
+    layer.locked = locked;
+    layer.fabricObject.selectable = !locked;
+    layer.fabricObject.evented = !locked;
+    this.canvas.requestRenderAll();
+    this.emitChanged();
+  }
+  setOpacity(id, opacity) {
+    const layer = this.get(id);
+    if (!layer) return;
+    layer.opacity = opacity;
+    layer.fabricObject.opacity = opacity;
+    this.canvas.requestRenderAll();
+    this.emitChanged();
+  }
+  setName(id, name) {
+    const layer = this.get(id);
+    if (!layer) return;
+    layer.name = name;
+    this.emitChanged();
+  }
+  clear() {
+    for (const layer of this.layers) {
+      this.canvas.remove(layer.fabricObject);
+    }
+    this.layers = [];
+    this.emitChanged();
+  }
+  count() {
+    return this.layers.length;
+  }
+  emitChanged() {
+    this.events.emit("layers:changed", {
+      layers: this.layers.map((l) => l.toData())
+    });
+  }
+};
+
+// src/history.ts
+var HistoryManager = class {
+  undoStack = [];
+  redoStack = [];
+  maxSize;
+  paused = false;
+  debounceTimer = null;
+  debounceMs;
+  getState;
+  restoreState;
+  events;
+  constructor(opts) {
+    this.getState = opts.getState;
+    this.restoreState = opts.restoreState;
+    this.events = opts.events;
+    this.maxSize = opts.maxSize ?? 50;
+    this.debounceMs = opts.debounceMs ?? 300;
+  }
+  save() {
+    if (this.paused) return;
+    if (this.debounceTimer) {
+      clearTimeout(this.debounceTimer);
+    }
+    this.debounceTimer = setTimeout(() => {
+      this.saveImmediate();
+    }, this.debounceMs);
+  }
+  saveImmediate() {
+    if (this.paused) return;
+    const state = this.getState();
+    this.undoStack.push(state);
+    if (this.undoStack.length > this.maxSize) {
+      this.undoStack.shift();
+    }
+    this.redoStack = [];
+    this.emitChanged();
+  }
+  async undo() {
+    const state = this.undoStack.pop();
+    if (!state) return;
+    this.redoStack.push(this.getState());
+    this.paused = true;
+    await this.restoreState(state);
+    this.paused = false;
+    this.emitChanged();
+  }
+  async redo() {
+    const state = this.redoStack.pop();
+    if (!state) return;
+    this.undoStack.push(this.getState());
+    this.paused = true;
+    await this.restoreState(state);
+    this.paused = false;
+    this.emitChanged();
+  }
+  pause() {
+    this.paused = true;
+  }
+  resume() {
+    this.paused = false;
+  }
+  canUndo() {
+    return this.undoStack.length > 0;
+  }
+  canRedo() {
+    return this.redoStack.length > 0;
+  }
+  clear() {
+    this.undoStack = [];
+    this.redoStack = [];
+    this.emitChanged();
+  }
+  dispose() {
+    if (this.debounceTimer) {
+      clearTimeout(this.debounceTimer);
+    }
+  }
+  emitChanged() {
+    this.events.emit("history:changed", {
+      canUndo: this.canUndo(),
+      canRedo: this.canRedo()
+    });
+  }
+};
+
+// src/utils/units.ts
+var MM_PER_INCH = 25.4;
+var UnitConverter = class {
+  constructor(unit = "px", dpi = 72) {
+    this.unit = unit;
+    this.dpi = dpi;
+  }
+  unit;
+  dpi;
+  setUnit(unit) {
+    this.unit = unit;
+  }
+  setDpi(dpi) {
+    this.dpi = dpi;
+  }
+  getUnit() {
+    return this.unit;
+  }
+  getDpi() {
+    return this.dpi;
+  }
+  toPixels(value, fromUnit) {
+    const u = fromUnit ?? this.unit;
+    switch (u) {
+      case "px":
+        return value;
+      case "in":
+        return value * this.dpi;
+      case "mm":
+        return value / MM_PER_INCH * this.dpi;
+    }
+  }
+  fromPixels(px, toUnit) {
+    const u = toUnit ?? this.unit;
+    switch (u) {
+      case "px":
+        return px;
+      case "in":
+        return px / this.dpi;
+      case "mm":
+        return px / this.dpi * MM_PER_INCH;
+    }
+  }
+};
+
+// src/serialization.ts
+var import_fabric = require("fabric");
+var VERSION = "1.0.0";
+function serializeEditor(editor) {
+  return {
+    version: VERSION,
+    canvas: {
+      width: editor.canvas.getWidth(),
+      height: editor.canvas.getHeight()
+    },
+    layers: editor.layers.getAll().map((layer) => layer.serialize()),
+    background: editor.canvas.backgroundColor
+  };
+}
+async function deserializeEditor(editor, state) {
+  editor.layers.clear();
+  editor.canvas.setDimensions({ width: state.canvas.width, height: state.canvas.height });
+  if (state.background) {
+    editor.canvas.backgroundColor = state.background;
+  }
+  for (const serializedLayer of state.layers) {
+    await restoreLayer(editor, serializedLayer);
+  }
+  editor.canvas.requestRenderAll();
+}
+async function restoreLayer(editor, serialized) {
+  const objects = await import_fabric.util.enlivenObjects([serialized.fabricObject]);
+  const fabricObject = objects[0];
+  const layer = editor.layers.add(
+    serialized.type,
+    fabricObject,
+    serialized.name,
+    serialized.id
+  );
+  if (!serialized.visible) {
+    editor.layers.setVisibility(layer.id, false);
+  }
+  if (serialized.locked) {
+    editor.layers.setLocked(layer.id, true);
+  }
+  if (serialized.opacity !== 1) {
+    editor.layers.setOpacity(layer.id, serialized.opacity);
+  }
+  return layer;
+}
+
+// src/export.ts
+async function exportPNG(canvas, options = {}) {
+  const { multiplier = 1, format = "png", quality = 1 } = options;
+  const dataUrl = canvas.toDataURL({
+    format,
+    multiplier,
+    quality
+  });
+  const response = await fetch(dataUrl);
+  return response.blob();
+}
+function exportSVG(canvas) {
+  return canvas.toSVG();
+}
+function exportDataURL(canvas, format = "png", multiplier = 1) {
+  return canvas.toDataURL({ format, multiplier });
+}
+
+// src/utils/clamp.ts
+function clamp(v, min, max) {
+  return Math.min(max, Math.max(min, v));
+}
+function round2(v) {
+  return Math.round(v * 100) / 100;
+}
+
+// src/editor.ts
+var CanvasEditor = class {
+  canvas;
+  layers;
+  history;
+  events;
+  units;
+  fileAdapter;
+  imageProvider;
+  constructor(canvasElement, config) {
+    this.events = new EventEmitter();
+    this.units = new UnitConverter(config.unit ?? "px", config.dpi ?? 72);
+    const widthPx = this.units.toPixels(config.width);
+    const heightPx = this.units.toPixels(config.height);
+    this.canvas = new import_fabric2.Canvas(canvasElement, {
+      width: widthPx,
+      height: heightPx,
+      backgroundColor: config.backgroundColor ?? "#ffffff",
+      preserveObjectStacking: config.preserveObjectStacking ?? true,
+      selection: true
+    });
+    this.layers = new LayerManager(this.canvas, this.events);
+    this.fileAdapter = config.fileAdapter;
+    this.imageProvider = config.imageProvider;
+    this.history = new HistoryManager({
+      getState: () => JSON.stringify(this.toJSON()),
+      restoreState: async (state) => {
+        const parsed = JSON.parse(state);
+        await this.fromJSON(parsed);
+      },
+      events: this.events
+    });
+    this.setupCanvasEvents();
+    this.history.saveImmediate();
+  }
+  // ─── Layer Operations ────────────────────────────────
+  async addImage(url, options) {
+    const img = await import_fabric2.FabricImage.fromURL(url, {}, options);
+    const layer = this.layers.add("image", img);
+    this.history.save();
+    return layer;
+  }
+  addText(text, options) {
+    const textbox = new import_fabric2.Textbox(text, {
+      fontSize: 32,
+      fontFamily: "Arial",
+      fill: "#000000",
+      width: 200,
+      ...options
+    });
+    const layer = this.layers.add("text", textbox);
+    this.history.save();
+    return layer;
+  }
+  addShape(plugin, options) {
+    const obj = plugin.create(options);
+    const layer = this.layers.add("shape", obj, plugin.name);
+    this.history.save();
+    return layer;
+  }
+  async addTemplate(template, _params) {
+    const { Textbox: TextboxClass } = await import("fabric");
+    const placeholder = new TextboxClass(`[Template: ${template.name}]`, {
+      fontSize: 24,
+      fontFamily: "Arial",
+      fill: "#666666",
+      width: 300
+    });
+    const layer = this.layers.add("template", placeholder, template.name);
+    this.history.save();
+    return layer;
+  }
+  removeLayer(id) {
+    this.layers.remove(id);
+    this.history.save();
+  }
+  selectLayer(id) {
+    this.layers.select(id);
+  }
+  getSelectedLayer() {
+    const active = this.canvas.getActiveObject();
+    if (!active) return null;
+    return this.layers.findByObject(active) ?? null;
+  }
+  // ─── Serialization ──────────────────────────────────
+  toJSON() {
+    return serializeEditor(this);
+  }
+  async fromJSON(state) {
+    await deserializeEditor(this, state);
+  }
+  // ─── Export ──────────────────────────────────────────
+  async toPNG(options) {
+    this.events.emit("export:start", { format: "png" });
+    const blob = await exportPNG(this.canvas, options);
+    this.events.emit("export:complete", { format: "png" });
+    return blob;
+  }
+  toSVG() {
+    this.events.emit("export:start", { format: "svg" });
+    const svg = exportSVG(this.canvas);
+    this.events.emit("export:complete", { format: "svg" });
+    return svg;
+  }
+  toDataURL(format = "png", multiplier = 1) {
+    return exportDataURL(this.canvas, format, multiplier);
+  }
+  toPrintifyPositioning() {
+    const result = {};
+    const canvasW = this.canvas.getWidth();
+    const canvasH = this.canvas.getHeight();
+    const imageLayers = this.layers.getAll().filter((l) => l.type === "image");
+    if (imageLayers.length === 0) {
+      result["front"] = { x: 0.5, y: 0.5, scale: 1, angle: 0 };
+      return result;
+    }
+    for (const layer of imageLayers) {
+      const obj = layer.fabricObject;
+      const center = obj.getCenterPoint();
+      result[layer.name] = {
+        x: round2(center.x / canvasW),
+        y: round2(center.y / canvasH),
+        scale: round2(obj.scaleX ?? 1),
+        angle: round2(obj.angle ?? 0)
+      };
+    }
+    return result;
+  }
+  // ─── File Operations ────────────────────────────────
+  async save(filename, format) {
+    if (!this.fileAdapter) return void 0;
+    let data;
+    if (format === "png") {
+      data = await this.toPNG();
+    } else if (format === "svg") {
+      data = this.toSVG();
+    } else {
+      data = JSON.stringify(this.toJSON(), null, 2);
+    }
+    return this.fileAdapter.save(data, filename, format);
+  }
+  async uploadImage(file) {
+    if (!this.imageProvider) return void 0;
+    return this.imageProvider.upload(file);
+  }
+  async browseImages() {
+    if (!this.imageProvider?.browse) return null;
+    return this.imageProvider.browse();
+  }
+  setFileAdapter(adapter) {
+    this.fileAdapter = adapter;
+  }
+  setImageProvider(provider) {
+    this.imageProvider = provider;
+  }
+  // ─── Canvas Operations ──────────────────────────────
+  setBackground(color) {
+    this.canvas.backgroundColor = color;
+    this.canvas.requestRenderAll();
+    this.history.save();
+  }
+  resize(width, height) {
+    const widthPx = this.units.toPixels(width);
+    const heightPx = this.units.toPixels(height);
+    this.canvas.setDimensions({ width: widthPx, height: heightPx });
+    this.canvas.requestRenderAll();
+  }
+  zoom(level) {
+    this.canvas.setZoom(level);
+    this.canvas.requestRenderAll();
+  }
+  // ─── Cleanup ────────────────────────────────────────
+  dispose() {
+    this.history.dispose();
+    this.events.removeAllListeners();
+    this.canvas.dispose();
+  }
+  // ─── Private ────────────────────────────────────────
+  setupCanvasEvents() {
+    this.canvas.on("object:modified", (e) => {
+      if (!e.target) return;
+      const layer = this.layers.findByObject(e.target);
+      if (layer) {
+        this.events.emit("layer:modified", { layerId: layer.id });
+        this.history.save();
+      }
+    });
+    this.canvas.on("selection:created", (e) => {
+      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) => {
+      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:cleared", () => {
+      this.events.emit("selection:changed", { selected: [] });
+    });
+  }
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  CanvasEditor,
+  EventEmitter,
+  HistoryManager,
+  Layer,
+  LayerManager,
+  UnitConverter,
+  clamp,
+  deserializeEditor,
+  exportDataURL,
+  exportPNG,
+  exportSVG,
+  generateId,
+  round2,
+  serializeEditor
+});
+//# sourceMappingURL=index.js.map