@pooder/core 0.0.2 → 0.1.0

package/CHANGELOG.md

@@ -1,7 +1,13 @@
-# @pooder/core
-
-## 0.0.2
-
-### Patch Changes
-
-- changeset release
+# @pooder/core
+
+## 0.1.0
+
+### Minor Changes
+
+- update
+
+## 0.0.2
+
+### Patch Changes
+
+- changeset release

package/dist/index.d.mts

@@ -1,5 +1,5 @@
 import { Canvas, FabricObject, Group } from 'fabric';
-export { Circle, Ellipse, Group, FabricImage as Image, Line, Path, Pattern, Point, Canvas as PooderCanvas, Group as PooderLayer, FabricObject as PooderObject, Rect, Text, filters } from 'fabric';
+export { Circle, Ellipse, Group, FabricImage as Image, Line, Path, Pattern, Point, Canvas as PooderCanvas, Group as PooderLayer, FabricObject as PooderObject, Rect, Text, filters, util } from 'fabric';
 
 declare module "fabric" {
     interface FabricObject {
@@ -26,7 +26,7 @@ declare class CommandMap extends Map<string, Command> {
 }
 
 interface CommandArgSchema {
-    type: 'string' | 'number' | 'boolean' | 'object' | 'any';
+    type: "string" | "number" | "boolean" | "object" | "any";
     label?: string;
     description?: string;
     required?: boolean;
@@ -42,7 +42,7 @@ interface CommandSchema {
     [argName: string]: CommandArgSchema;
 }
 interface Command {
-    execute(...args: any[]): boolean;
+    execute(...args: any[]): any;
     schema?: CommandSchema;
 }
 interface Event {
@@ -54,7 +54,7 @@ interface ExtensionOptions {
     [key: string]: any;
 }
 interface OptionSchema {
-    type: 'string' | 'number' | 'boolean' | 'color' | 'select';
+    type: "string" | "number" | "boolean" | "color" | "select";
     options?: string[] | {
         label: string;
         value: any;
@@ -75,6 +75,8 @@ interface Extension<T extends ExtensionOptions = ExtensionOptions> {
     onUpdate?(editor: Editor, state: EditorState): void;
     onUnmount?(editor: Editor): void;
     onDestroy?(editor: Editor): void;
+    toJSON?(): any;
+    loadFromJSON?(data: any): void | Promise<void>;
     commands?: Record<string, Command>;
 }
 interface EditorState {
@@ -132,7 +134,7 @@ declare class PooderEditor implements Editor {
     disableExtension(name: string): void;
     registerCommand(name: string, command: Command): void;
     unregisterCommand(name: string): void;
-    executeCommand(name: string, ...args: any[]): boolean;
+    executeCommand(name: string, ...args: any[]): any;
     on(event: string, handler: EventHandler, priority?: number): void;
     off(event: string, handler: EventHandler): void;
     emit(event: string, ...args: any[]): void;
@@ -145,6 +147,7 @@ declare class PooderEditor implements Editor {
         width: number;
         height: number;
         metadata: Record<string, any> | undefined;
+        extensions: Record<string, any>;
     };
     loadFromJSON(json: any): Promise<void>;
     getState(): EditorState;

package/dist/index.d.ts

@@ -1,5 +1,5 @@
 import { Canvas, FabricObject, Group } from 'fabric';
-export { Circle, Ellipse, Group, FabricImage as Image, Line, Path, Pattern, Point, Canvas as PooderCanvas, Group as PooderLayer, FabricObject as PooderObject, Rect, Text, filters } from 'fabric';
+export { Circle, Ellipse, Group, FabricImage as Image, Line, Path, Pattern, Point, Canvas as PooderCanvas, Group as PooderLayer, FabricObject as PooderObject, Rect, Text, filters, util } from 'fabric';
 
 declare module "fabric" {
     interface FabricObject {
@@ -26,7 +26,7 @@ declare class CommandMap extends Map<string, Command> {
 }
 
 interface CommandArgSchema {
-    type: 'string' | 'number' | 'boolean' | 'object' | 'any';
+    type: "string" | "number" | "boolean" | "object" | "any";
     label?: string;
     description?: string;
     required?: boolean;
@@ -42,7 +42,7 @@ interface CommandSchema {
     [argName: string]: CommandArgSchema;
 }
 interface Command {
-    execute(...args: any[]): boolean;
+    execute(...args: any[]): any;
     schema?: CommandSchema;
 }
 interface Event {
@@ -54,7 +54,7 @@ interface ExtensionOptions {
     [key: string]: any;
 }
 interface OptionSchema {
-    type: 'string' | 'number' | 'boolean' | 'color' | 'select';
+    type: "string" | "number" | "boolean" | "color" | "select";
     options?: string[] | {
         label: string;
         value: any;
@@ -75,6 +75,8 @@ interface Extension<T extends ExtensionOptions = ExtensionOptions> {
     onUpdate?(editor: Editor, state: EditorState): void;
     onUnmount?(editor: Editor): void;
     onDestroy?(editor: Editor): void;
+    toJSON?(): any;
+    loadFromJSON?(data: any): void | Promise<void>;
     commands?: Record<string, Command>;
 }
 interface EditorState {
@@ -132,7 +134,7 @@ declare class PooderEditor implements Editor {
     disableExtension(name: string): void;
     registerCommand(name: string, command: Command): void;
     unregisterCommand(name: string): void;
-    executeCommand(name: string, ...args: any[]): boolean;
+    executeCommand(name: string, ...args: any[]): any;
     on(event: string, handler: EventHandler, priority?: number): void;
     off(event: string, handler: EventHandler): void;
     emit(event: string, ...args: any[]): void;
@@ -145,6 +147,7 @@ declare class PooderEditor implements Editor {
         width: number;
         height: number;
         metadata: Record<string, any> | undefined;
+        extensions: Record<string, any>;
     };
     loadFromJSON(json: any): Promise<void>;
     getState(): EditorState;

package/dist/index.js

@@ -34,7 +34,8 @@ __export(index_exports, {
   PooderObject: () => import_fabric3.FabricObject,
   Rect: () => import_fabric4.Rect,
   Text: () => import_fabric4.Text,
-  filters: () => import_fabric4.filters
+  filters: () => import_fabric4.filters,
+  util: () => import_fabric4.util
 });
 module.exports = __toCommonJS(index_exports);
 
@@ -144,7 +145,9 @@ var DefaultExtensionManager = class {
   register(extension) {
     var _a, _b;
     if (this.editor.extensions.has(extension.name)) {
-      console.warn(`Plugin "${extension.name}" already registered. It will be overwritten.`);
+      console.warn(
+        `Plugin "${extension.name}" already registered. It will be overwritten.`
+      );
     }
     try {
       if (extension.enabled === void 0) {
@@ -153,7 +156,10 @@ var DefaultExtensionManager = class {
       this.editor.extensions.set(extension.name, extension);
       (_a = extension.onCreate) == null ? void 0 : _a.call(extension, this.editor);
     } catch (error) {
-      console.error(`Error in onCreate hook for plugin "${extension.name}":`, error);
+      console.error(
+        `Error in onCreate hook for plugin "${extension.name}":`,
+        error
+      );
     }
     if (extension.enabled) {
       this._registerCommands(extension);
@@ -161,7 +167,10 @@ var DefaultExtensionManager = class {
         try {
           (_b = extension.onMount) == null ? void 0 : _b.call(extension, this.editor);
         } catch (error) {
-          console.error(`Error in onMount hook for plugin "${extension.name}":`, error);
+          console.error(
+            `Error in onMount hook for plugin "${extension.name}":`,
+            error
+          );
         }
       }
     }
@@ -245,14 +254,37 @@ var DefaultExtensionManager = class {
       var _a;
       if (extension.enabled) {
         try {
+          console.log(`Mounting plugin "${extension.name}"`);
           (_a = extension.onMount) == null ? void 0 : _a.call(extension, this.editor);
         } catch (e) {
-          console.error(`Error in onMount hook for plugin "${extension.name}":`, e);
+          console.error(
+            `Error in onMount hook for plugin "${extension.name}":`,
+            e
+          );
         }
       }
     });
+    console.log(`Plugins mounted`);
     this.mounted = true;
   }
+  unmount() {
+    if (!this.mounted) return;
+    this.editor.extensions.forEach((extension) => {
+      var _a;
+      if (extension.enabled) {
+        try {
+          (_a = extension.onUnmount) == null ? void 0 : _a.call(extension, this.editor);
+        } catch (e) {
+          console.error(
+            `Error in onUnmount hook for plugin "${extension.name}":`,
+            e
+          );
+        }
+      }
+    });
+    console.log(`Plugins unmounted`);
+    this.mounted = false;
+  }
   update() {
     const state = this.editor.getState();
     this.editor.extensions.forEach((extension) => {
@@ -261,7 +293,10 @@ var DefaultExtensionManager = class {
         try {
           (_a = extension.onUpdate) == null ? void 0 : _a.call(extension, this.editor, state);
         } catch (e) {
-          console.error(`Error in onUpdate hook for plugin "${extension.name}":`, e);
+          console.error(
+            `Error in onUpdate hook for plugin "${extension.name}":`,
+            e
+          );
         }
       }
     });
@@ -286,7 +321,11 @@ var PooderEditor = class {
       width: options.width || 800,
       height: options.height || 600
     };
-    this.canvas = new import_fabric.Canvas(el, { width: this.state.width, height: this.state.height });
+    this.canvas = new import_fabric.Canvas(el, {
+      width: this.state.width,
+      height: this.state.height,
+      preserveObjectStacking: true
+    });
     this.eventBus = new EventBus();
     this.commandManager = new DefaultCommandManager(this);
     this.extensionManager = new DefaultExtensionManager(this);
@@ -294,7 +333,11 @@ var PooderEditor = class {
       options.extensions.forEach(this.extensionManager.register);
     }
     this.extensionManager.mount();
-    console.log("Editor initialized with", this.extensionManager.count(), "plugins");
+    console.log(
+      "Editor initialized with",
+      this.extensionManager.count(),
+      "plugins"
+    );
   }
   use(extension) {
     if (this.destroyed) {
@@ -365,7 +408,9 @@ var PooderEditor = class {
     });
   }
   getLayers() {
-    return this.getObjects().filter((obj) => obj.type === "group");
+    return this.getObjects().filter(
+      (obj) => obj.type === "group"
+    );
   }
   getLayer(id) {
     return this.getLayers().find((obj) => {
@@ -383,13 +428,44 @@ var PooderEditor = class {
     this.emit("update", this.state);
   }
   toJSON() {
+    const extensions = {};
+    this.extensionManager.list().forEach((ext) => {
+      if (ext.toJSON) {
+        extensions[ext.name] = ext.toJSON();
+      } else if (ext.options) {
+        extensions[ext.name] = ext.options;
+      }
+    });
     return {
       width: this.state.width,
       height: this.state.height,
-      metadata: this.state.metadata
+      metadata: this.state.metadata,
+      extensions
     };
   }
   async loadFromJSON(json) {
+    if (!json) return;
+    this.extensionManager.unmount();
+    this.canvas.clear();
+    this.extensionManager.mount();
+    if (json.extensions) {
+      for (const [name, data] of Object.entries(json.extensions)) {
+        const ext = this.extensionManager.get(name);
+        if (ext) {
+          if (ext.loadFromJSON) {
+            await ext.loadFromJSON(data);
+          } else if (data) {
+            ext.options = data;
+          }
+        }
+      }
+    }
+    this.updateState((state) => ({
+      ...state,
+      width: json.width,
+      height: json.height,
+      metadata: json.metadata
+    }));
   }
   getState() {
     return { ...this.state };
@@ -433,5 +509,6 @@ var import_fabric4 = require("fabric");
   PooderObject,
   Rect,
   Text,
-  filters
+  filters,
+  util
 });

package/dist/index.mjs

@@ -104,7 +104,9 @@ var DefaultExtensionManager = class {
   register(extension) {
     var _a, _b;
     if (this.editor.extensions.has(extension.name)) {
-      console.warn(`Plugin "${extension.name}" already registered. It will be overwritten.`);
+      console.warn(
+        `Plugin "${extension.name}" already registered. It will be overwritten.`
+      );
     }
     try {
       if (extension.enabled === void 0) {
@@ -113,7 +115,10 @@ var DefaultExtensionManager = class {
       this.editor.extensions.set(extension.name, extension);
       (_a = extension.onCreate) == null ? void 0 : _a.call(extension, this.editor);
     } catch (error) {
-      console.error(`Error in onCreate hook for plugin "${extension.name}":`, error);
+      console.error(
+        `Error in onCreate hook for plugin "${extension.name}":`,
+        error
+      );
     }
     if (extension.enabled) {
       this._registerCommands(extension);
@@ -121,7 +126,10 @@ var DefaultExtensionManager = class {
         try {
           (_b = extension.onMount) == null ? void 0 : _b.call(extension, this.editor);
         } catch (error) {
-          console.error(`Error in onMount hook for plugin "${extension.name}":`, error);
+          console.error(
+            `Error in onMount hook for plugin "${extension.name}":`,
+            error
+          );
         }
       }
     }
@@ -205,14 +213,37 @@ var DefaultExtensionManager = class {
       var _a;
       if (extension.enabled) {
         try {
+          console.log(`Mounting plugin "${extension.name}"`);
           (_a = extension.onMount) == null ? void 0 : _a.call(extension, this.editor);
         } catch (e) {
-          console.error(`Error in onMount hook for plugin "${extension.name}":`, e);
+          console.error(
+            `Error in onMount hook for plugin "${extension.name}":`,
+            e
+          );
         }
       }
     });
+    console.log(`Plugins mounted`);
     this.mounted = true;
   }
+  unmount() {
+    if (!this.mounted) return;
+    this.editor.extensions.forEach((extension) => {
+      var _a;
+      if (extension.enabled) {
+        try {
+          (_a = extension.onUnmount) == null ? void 0 : _a.call(extension, this.editor);
+        } catch (e) {
+          console.error(
+            `Error in onUnmount hook for plugin "${extension.name}":`,
+            e
+          );
+        }
+      }
+    });
+    console.log(`Plugins unmounted`);
+    this.mounted = false;
+  }
   update() {
     const state = this.editor.getState();
     this.editor.extensions.forEach((extension) => {
@@ -221,7 +252,10 @@ var DefaultExtensionManager = class {
         try {
           (_a = extension.onUpdate) == null ? void 0 : _a.call(extension, this.editor, state);
         } catch (e) {
-          console.error(`Error in onUpdate hook for plugin "${extension.name}":`, e);
+          console.error(
+            `Error in onUpdate hook for plugin "${extension.name}":`,
+            e
+          );
         }
       }
     });
@@ -246,7 +280,11 @@ var PooderEditor = class {
       width: options.width || 800,
       height: options.height || 600
     };
-    this.canvas = new Canvas(el, { width: this.state.width, height: this.state.height });
+    this.canvas = new Canvas(el, {
+      width: this.state.width,
+      height: this.state.height,
+      preserveObjectStacking: true
+    });
     this.eventBus = new EventBus();
     this.commandManager = new DefaultCommandManager(this);
     this.extensionManager = new DefaultExtensionManager(this);
@@ -254,7 +292,11 @@ var PooderEditor = class {
       options.extensions.forEach(this.extensionManager.register);
     }
     this.extensionManager.mount();
-    console.log("Editor initialized with", this.extensionManager.count(), "plugins");
+    console.log(
+      "Editor initialized with",
+      this.extensionManager.count(),
+      "plugins"
+    );
   }
   use(extension) {
     if (this.destroyed) {
@@ -325,7 +367,9 @@ var PooderEditor = class {
     });
   }
   getLayers() {
-    return this.getObjects().filter((obj) => obj.type === "group");
+    return this.getObjects().filter(
+      (obj) => obj.type === "group"
+    );
   }
   getLayer(id) {
     return this.getLayers().find((obj) => {
@@ -343,13 +387,44 @@ var PooderEditor = class {
     this.emit("update", this.state);
   }
   toJSON() {
+    const extensions = {};
+    this.extensionManager.list().forEach((ext) => {
+      if (ext.toJSON) {
+        extensions[ext.name] = ext.toJSON();
+      } else if (ext.options) {
+        extensions[ext.name] = ext.options;
+      }
+    });
     return {
       width: this.state.width,
       height: this.state.height,
-      metadata: this.state.metadata
+      metadata: this.state.metadata,
+      extensions
     };
   }
   async loadFromJSON(json) {
+    if (!json) return;
+    this.extensionManager.unmount();
+    this.canvas.clear();
+    this.extensionManager.mount();
+    if (json.extensions) {
+      for (const [name, data] of Object.entries(json.extensions)) {
+        const ext = this.extensionManager.get(name);
+        if (ext) {
+          if (ext.loadFromJSON) {
+            await ext.loadFromJSON(data);
+          } else if (data) {
+            ext.options = data;
+          }
+        }
+      }
+    }
+    this.updateState((state) => ({
+      ...state,
+      width: json.width,
+      height: json.height,
+      metadata: json.metadata
+    }));
   }
   getState() {
     return { ...this.state };
@@ -376,7 +451,20 @@ import { Group } from "fabric";
 import { FabricObject } from "fabric";
 
 // src/index.ts
-import { FabricImage, Ellipse, Rect, Circle, Line, Text, Group as Group2, Path, Point, Pattern, filters } from "fabric";
+import {
+  FabricImage,
+  Ellipse,
+  Rect,
+  Circle,
+  Line,
+  Text,
+  Group as Group2,
+  Path,
+  Point,
+  Pattern,
+  filters,
+  util
+} from "fabric";
 export {
   Circle,
   Ellipse,
@@ -392,5 +480,6 @@ export {
   FabricObject as PooderObject,
   Rect,
   Text,
-  filters
+  filters,
+  util
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pooder/core",
-  "version": "0.0.2",
+  "version": "0.1.0",
   "description": "Core logic for Pooder editor",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",

package/src/canvas.ts

@@ -1,3 +1,3 @@
-import { Canvas } from "fabric";
-
-export { Canvas as PooderCanvas }
+import { Canvas } from "fabric";
+
+export { Canvas as PooderCanvas };

package/src/command.ts

@@ -1,61 +1,61 @@
-import {Command, Editor} from "./types";
-
-export { CommandManager, DefaultCommandManager, CommandMap }
-
-interface CommandManager{
-    register(name:string,command:Command):void
-    unregister(name:string):void
-    execute(name:string,...args:any[]):boolean
-    get(name:string):Command | undefined
-    has(name:string):boolean
-    count():number
-    list():string[]
-    clear():void
-}
-class CommandMap extends Map<string, Command> {}
-class DefaultCommandManager implements CommandManager{
-    private editor: Editor
-    constructor(editor: Editor) {
-        this.editor = editor
-    }
-
-    register(name:string,command:Command){
-        if(this.editor.commands.has(name)){
-            console.warn(`Command "${name}" already exists. It will be overwritten.`)
-        }
-        this.editor.commands.set(name,command)
-    }
-    unregister(name:string){
-        this.editor.commands.delete(name)
-    }
-    execute(name:string,...args:any[]){
-        const command=this.editor.commands.get(name)
-        if(!command){
-            console.warn(`Command "${name}" not found`)
-            return false
-        }
-
-        try{
-            return command.execute(...args)
-        }catch ( e){
-            console.error(`Error executing command "${name}":`, e)
-            return false
-        }
-    }
-
-    get(name:string){
-        return this.editor.commands.get(name)
-    }
-    has(name:string){
-        return this.editor.commands.has(name)
-    }
-    count(): number {
-        return this.editor.commands.size
-    }
-    list(){
-        return Array.from(this.editor.commands.keys())
-    }
-    clear(){
-        this.editor.commands.clear()
-    }
-}
+import { Command, Editor } from "./types";
+
+export { CommandManager, DefaultCommandManager, CommandMap };
+
+interface CommandManager {
+  register(name: string, command: Command): void;
+  unregister(name: string): void;
+  execute(name: string, ...args: any[]): any;
+  get(name: string): Command | undefined;
+  has(name: string): boolean;
+  count(): number;
+  list(): string[];
+  clear(): void;
+}
+class CommandMap extends Map<string, Command> {}
+class DefaultCommandManager implements CommandManager {
+  private editor: Editor;
+  constructor(editor: Editor) {
+    this.editor = editor;
+  }
+
+  register(name: string, command: Command) {
+    if (this.editor.commands.has(name)) {
+      console.warn(`Command "${name}" already exists. It will be overwritten.`);
+    }
+    this.editor.commands.set(name, command);
+  }
+  unregister(name: string) {
+    this.editor.commands.delete(name);
+  }
+  execute(name: string, ...args: any[]) {
+    const command = this.editor.commands.get(name);
+    if (!command) {
+      console.warn(`Command "${name}" not found`);
+      return false;
+    }
+
+    try {
+      return command.execute(...args);
+    } catch (e) {
+      console.error(`Error executing command "${name}":`, e);
+      return false;
+    }
+  }
+
+  get(name: string) {
+    return this.editor.commands.get(name);
+  }
+  has(name: string) {
+    return this.editor.commands.has(name);
+  }
+  count(): number {
+    return this.editor.commands.size;
+  }
+  list() {
+    return Array.from(this.editor.commands.keys());
+  }
+  clear() {
+    this.editor.commands.clear();
+  }
+}