@pooder/core 0.0.2

package/dist/index.mjs

@@ -0,0 +1,396 @@
+// src/event.ts
+var EventBus = class {
+  constructor() {
+    this.events = /* @__PURE__ */ new Map();
+  }
+  on(event, handler, priority = 0) {
+    if (this.events.has(event)) {
+      const listeners = this.events.get(event);
+      listeners.push({ handler, priority });
+      listeners.sort((a, b) => b.priority - a.priority);
+    } else {
+      this.events.set(event, [{ handler, priority }]);
+    }
+  }
+  off(event, handler) {
+    const listeners = this.events.get(event);
+    if (!listeners) return;
+    const index = listeners.findIndex((l) => l.handler === handler);
+    listeners.splice(index, 1);
+  }
+  emit(event, ...args) {
+    const listeners = this.events.get(event);
+    if (!listeners) return;
+    for (const { handler } of listeners) {
+      const result = handler(...args);
+      if (result === false) break;
+    }
+  }
+  clear() {
+    this.events.clear();
+  }
+  count(event) {
+    var _a, _b;
+    return (_b = (_a = this.events.get(event)) == null ? void 0 : _a.length) != null ? _b : 0;
+  }
+};
+
+// src/command.ts
+var DefaultCommandManager = class {
+  constructor(editor) {
+    this.editor = editor;
+  }
+  register(name, 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) {
+    this.editor.commands.delete(name);
+  }
+  execute(name, ...args) {
+    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) {
+    return this.editor.commands.get(name);
+  }
+  has(name) {
+    return this.editor.commands.has(name);
+  }
+  count() {
+    return this.editor.commands.size;
+  }
+  list() {
+    return Array.from(this.editor.commands.keys());
+  }
+  clear() {
+    this.editor.commands.clear();
+  }
+};
+
+// src/extension.ts
+var DefaultExtensionManager = class {
+  constructor(editor) {
+    this.mounted = false;
+    this.editor = editor;
+  }
+  _registerCommands(extension) {
+    if (extension.commands) {
+      Object.entries(extension.commands).forEach(([name, command]) => {
+        const commandName = `${extension.name}.${name}`;
+        this.editor.registerCommand(commandName, command);
+      });
+    }
+  }
+  _unregisterCommands(extension) {
+    if (extension.commands) {
+      Object.keys(extension.commands).forEach((name) => {
+        const commandName = `${extension.name}.${name}`;
+        this.editor.unregisterCommand(commandName);
+      });
+    }
+  }
+  register(extension) {
+    var _a, _b;
+    if (this.editor.extensions.has(extension.name)) {
+      console.warn(`Plugin "${extension.name}" already registered. It will be overwritten.`);
+    }
+    try {
+      if (extension.enabled === void 0) {
+        extension.enabled = true;
+      }
+      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);
+    }
+    if (extension.enabled) {
+      this._registerCommands(extension);
+      if (this.mounted) {
+        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.log(`Plugin "${extension.name}" registered successfully`);
+  }
+  unregister(name) {
+    var _a, _b;
+    const extension = this.editor.extensions.get(name);
+    if (!extension) {
+      console.warn(`Plugin "${name}" not found.`);
+      return;
+    }
+    if (this.mounted && extension.enabled) {
+      try {
+        (_a = extension.onUnmount) == null ? void 0 : _a.call(extension, this.editor);
+      } catch (error) {
+        console.error(`Error in onUnmount hook for plugin "${name}":`, error);
+      }
+    }
+    try {
+      (_b = extension.onDestroy) == null ? void 0 : _b.call(extension, this.editor);
+    } catch (error) {
+      console.error(`Error in onDestroy hook for plugin "${name}":`, error);
+    }
+    this._unregisterCommands(extension);
+    this.editor.extensions.delete(name);
+    console.log(`Plugin "${name}" unregistered`);
+    return true;
+  }
+  enable(name) {
+    var _a;
+    const extension = this.get(name);
+    if (!extension) {
+      console.warn(`Plugin "${name}" not found.`);
+      return;
+    }
+    if (extension.enabled) return;
+    extension.enabled = true;
+    this._registerCommands(extension);
+    if (this.mounted) {
+      try {
+        (_a = extension.onMount) == null ? void 0 : _a.call(extension, this.editor);
+      } catch (error) {
+        console.error(`Error in onMount hook for plugin "${name}":`, error);
+      }
+    }
+  }
+  disable(name) {
+    var _a;
+    const extension = this.get(name);
+    if (!extension) {
+      console.warn(`Plugin "${name}" not found.`);
+      return;
+    }
+    if (!extension.enabled) return;
+    extension.enabled = false;
+    this._unregisterCommands(extension);
+    if (this.mounted) {
+      try {
+        (_a = extension.onUnmount) == null ? void 0 : _a.call(extension, this.editor);
+      } catch (error) {
+        console.error(`Error in onUnmount hook for plugin "${name}":`, error);
+      }
+    }
+  }
+  get(name) {
+    return this.editor.extensions.get(name);
+  }
+  has(name) {
+    return this.editor.extensions.has(name);
+  }
+  count() {
+    return this.editor.extensions.size;
+  }
+  list() {
+    return Array.from(this.editor.extensions.values());
+  }
+  mount() {
+    if (this.mounted) return;
+    this.editor.extensions.forEach((extension) => {
+      var _a;
+      if (extension.enabled) {
+        try {
+          (_a = extension.onMount) == null ? void 0 : _a.call(extension, this.editor);
+        } catch (e) {
+          console.error(`Error in onMount hook for plugin "${extension.name}":`, e);
+        }
+      }
+    });
+    this.mounted = true;
+  }
+  update() {
+    const state = this.editor.getState();
+    this.editor.extensions.forEach((extension) => {
+      var _a;
+      if (extension.enabled) {
+        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);
+        }
+      }
+    });
+  }
+  destroy() {
+    const extensionNames = Array.from(this.editor.extensions.keys());
+    extensionNames.forEach((name) => this.unregister(name));
+    this.mounted = false;
+  }
+};
+
+// src/canvas.ts
+import { Canvas } from "fabric";
+
+// src/editor.ts
+var PooderEditor = class {
+  constructor(el, options = {}) {
+    this.extensions = /* @__PURE__ */ new Map();
+    this.commands = /* @__PURE__ */ new Map();
+    this.destroyed = false;
+    this.state = {
+      width: options.width || 800,
+      height: options.height || 600
+    };
+    this.canvas = new Canvas(el, { width: this.state.width, height: this.state.height });
+    this.eventBus = new EventBus();
+    this.commandManager = new DefaultCommandManager(this);
+    this.extensionManager = new DefaultExtensionManager(this);
+    if (options.extensions && options.extensions.length > 0) {
+      options.extensions.forEach(this.extensionManager.register);
+    }
+    this.extensionManager.mount();
+    console.log("Editor initialized with", this.extensionManager.count(), "plugins");
+  }
+  use(extension) {
+    if (this.destroyed) {
+      throw new Error("Cannot register plugin: Editor is destroyed");
+    }
+    this.extensionManager.register(extension);
+    this.emit("update", this.state);
+  }
+  unuse(name) {
+    return this.extensionManager.unregister(name);
+  }
+  getExtension(name) {
+    return this.extensionManager.get(name);
+  }
+  getExtensions() {
+    return this.extensionManager.list();
+  }
+  enableExtension(name) {
+    this.extensionManager.enable(name);
+    this.emit("update", this.state);
+  }
+  disableExtension(name) {
+    this.extensionManager.disable(name);
+    this.emit("update", this.state);
+  }
+  registerCommand(name, command) {
+    this.commandManager.register(name, command);
+  }
+  unregisterCommand(name) {
+    this.commandManager.unregister(name);
+  }
+  executeCommand(name, ...args) {
+    if (this.destroyed) {
+      console.warn("Cannot execute command: Editor is destroyed");
+      return false;
+    }
+    this.emit("beforeCommand", name, ...args);
+    const result = this.commandManager.execute(name, ...args);
+    this.emit("afterCommand", name, args, result);
+    return result;
+  }
+  on(event, handler, priority) {
+    this.eventBus.on(event, handler, priority);
+  }
+  off(event, handler) {
+    this.eventBus.off(event, handler);
+  }
+  emit(event, ...args) {
+    this.eventBus.emit(event, ...args);
+  }
+  getObjects() {
+    if (this.destroyed) {
+      throw new Error("Cannot get objects: Editor is destroyed");
+    }
+    return this.canvas.getObjects();
+  }
+  getObject(id, layerId) {
+    var _a;
+    let objs;
+    if (layerId) {
+      objs = (_a = this.getLayer(layerId)) == null ? void 0 : _a.getObjects();
+    } else {
+      objs = this.getObjects();
+    }
+    return objs == null ? void 0 : objs.find((obj) => {
+      var _a2;
+      return ((_a2 = obj == null ? void 0 : obj.data) == null ? void 0 : _a2.id) === id;
+    });
+  }
+  getLayers() {
+    return this.getObjects().filter((obj) => obj.type === "group");
+  }
+  getLayer(id) {
+    return this.getLayers().find((obj) => {
+      var _a;
+      return ((_a = obj == null ? void 0 : obj.data) == null ? void 0 : _a.id) === id;
+    });
+  }
+  updateState(updater) {
+    if (this.destroyed) {
+      console.warn("Cannot update state: Editor is destroyed");
+      return;
+    }
+    this.state = updater(this.state);
+    this.extensionManager.update();
+    this.emit("update", this.state);
+  }
+  toJSON() {
+    return {
+      width: this.state.width,
+      height: this.state.height,
+      metadata: this.state.metadata
+    };
+  }
+  async loadFromJSON(json) {
+  }
+  getState() {
+    return { ...this.state };
+  }
+  destroy() {
+    if (this.destroyed) return;
+    this.emit("beforeDestroy");
+    this.canvas.dispose();
+    this.extensionManager.destroy();
+    this.eventBus.clear();
+    this.commandManager.clear();
+    this.destroyed = true;
+    console.log("Editor destroyed");
+  }
+  isDestroyed() {
+    return this.destroyed;
+  }
+};
+
+// src/layer.ts
+import { Group } from "fabric";
+
+// src/obj.ts
+import { FabricObject } from "fabric";
+
+// src/index.ts
+import { FabricImage, Ellipse, Rect, Circle, Line, Text, Group as Group2, Path, Point, Pattern, filters } from "fabric";
+export {
+  Circle,
+  Ellipse,
+  Group2 as Group,
+  FabricImage as Image,
+  Line,
+  Path,
+  Pattern,
+  Point,
+  Canvas as PooderCanvas,
+  PooderEditor,
+  Group as PooderLayer,
+  FabricObject as PooderObject,
+  Rect,
+  Text,
+  filters
+};

package/package.json

@@ -0,0 +1,25 @@
+{
+  "name": "@pooder/core",
+  "version": "0.0.2",
+  "description": "Core logic for Pooder editor",
+  "main": "./dist/index.js",
+  "module": "./dist/index.mjs",
+  "types": "./dist/index.d.ts",
+  "keywords": [],
+  "author": "",
+  "license": "ISC",
+  "publishConfig": {
+    "access": "public"
+  },
+  "devDependencies": {
+    "tsup": "^8.0.0",
+    "typescript": "^5.0.0"
+  },
+  "dependencies": {
+    "fabric": "^7.0.0"
+  },
+  "scripts": {
+    "build": "tsup src/index.ts --format cjs,esm --dts",
+    "dev": "tsup src/index.ts --format cjs,esm --dts --watch"
+  }
+}

package/src/canvas.ts

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

package/src/command.ts

@@ -0,0 +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()
+    }
+}

package/src/editor.ts

@@ -0,0 +1,171 @@
+import {Command, Editor, EditorState, EventHandler, Extension} from "./types";
+import {EventBus} from "./event";
+import {CommandManager, CommandMap, DefaultCommandManager} from "./command";
+import {DefaultExtensionManager, ExtensionManager, ExtensionMap} from "./extension";
+import {PooderCanvas} from "./canvas";
+import {PooderObject} from "./obj";
+import {PooderLayer} from "./layer";
+
+export class PooderEditor implements Editor {
+    public state: EditorState;
+    public canvas: PooderCanvas;
+    public extensions: ExtensionMap = new Map()
+    public commands: CommandMap = new Map()
+
+    private eventBus: EventBus;
+    private commandManager: CommandManager;
+    private extensionManager: ExtensionManager;
+
+    private destroyed: boolean = false;
+
+    constructor(el:HTMLCanvasElement, options:{
+        width?: number,
+        height?: number,
+        extensions?: Extension[],
+    }={}) {
+        this.state = {
+            width: options.width || 800,
+            height: options.height || 600,
+        };
+        this.canvas = new PooderCanvas(el, {width: this.state.width, height: this.state.height});
+        this.eventBus=new EventBus()
+        this.commandManager = new DefaultCommandManager(this);
+
+        this.extensionManager = new DefaultExtensionManager(this);
+        if(options.extensions && options.extensions.length>0){
+            options.extensions.forEach(this.extensionManager.register)
+        }
+        this.extensionManager.mount();
+
+        console.log('Editor initialized with', this.extensionManager.count(), 'plugins');
+    }
+
+    use(extension: Extension){
+        if(this.destroyed){
+            throw new Error('Cannot register plugin: Editor is destroyed');
+        }
+
+        this.extensionManager.register(extension)
+
+        this.emit('update', this.state);
+    }
+    unuse(name: string) {
+        return this.extensionManager.unregister(name)
+    }
+    getExtension(name: string): Extension | undefined {
+        return this.extensionManager.get(name)
+    }
+    getExtensions():Extension[]{
+        return this.extensionManager.list()
+    }
+    enableExtension(name: string) {
+        this.extensionManager.enable(name);
+        this.emit('update', this.state);
+    }
+    disableExtension(name: string) {
+        this.extensionManager.disable(name);
+        this.emit('update', this.state);
+    }
+
+    registerCommand(name: string, command: Command) {
+        this.commandManager.register(name, command)
+    }
+    unregisterCommand(name: string) {
+        this.commandManager.unregister(name)
+    }
+    executeCommand(name: string, ...args:any[]) {
+        if(this.destroyed){
+            console.warn('Cannot execute command: Editor is destroyed');
+            return false;
+        }
+
+        this.emit('beforeCommand', name, ...args)
+
+        const result = this.commandManager.execute(name, ...args)
+
+        this.emit('afterCommand', name, args,result)
+
+        return result
+    }
+
+
+    on(event:string, handler:EventHandler,priority?:number):void{
+        this.eventBus.on(event, handler, priority)
+    }
+    off(event:string, handler:EventHandler):void{
+        this.eventBus.off(event, handler)
+    }
+    emit(event:string, ...args:any[]):void{
+        this.eventBus.emit(event, ...args)
+    }
+
+    getObjects():PooderObject[] {
+        if(this.destroyed){
+            throw new Error('Cannot get objects: Editor is destroyed');
+        }
+
+        return this.canvas.getObjects()
+    }
+    getObject(id:string,layerId?:string):PooderObject | undefined {
+        let objs;
+        if(layerId){
+            objs=this.getLayer(layerId)?.getObjects()
+        }else {
+            objs=this.getObjects()
+        }
+        return objs?.find(obj => obj?.data?.id === id)
+    }
+    getLayers():PooderLayer[] {
+        return this.getObjects().filter(obj => obj.type==="group") as PooderLayer[]
+    }
+    getLayer(id:string):PooderLayer | undefined {
+        return this.getLayers().find(obj => obj?.data?.id === id)
+    }
+
+    updateState(updater:(state:EditorState)=>EditorState) {
+        if(this.destroyed){
+            console.warn('Cannot update state: Editor is destroyed');
+            return;
+        }
+
+        this.state = updater(this.state)
+
+        this.extensionManager.update()
+        this.emit('update', this.state)
+    }
+
+    toJSON() {
+        return {
+            width: this.state.width,
+            height: this.state.height,
+            metadata: this.state.metadata,
+        }
+    }
+
+    async loadFromJSON(json: any) {}
+    getState(): EditorState {
+        return { ...this.state }
+    }
+
+    destroy():void{
+        if(this.destroyed)return
+
+        this.emit('beforeDestroy')
+
+        this.canvas.dispose()
+
+        this.extensionManager.destroy()
+
+        this.eventBus.clear()
+
+        this.commandManager.clear()
+
+        this.destroyed=true
+
+        console.log('Editor destroyed');
+    }
+
+    isDestroyed():boolean{
+        return this.destroyed
+    }
+}

package/src/event.ts

@@ -0,0 +1,48 @@
+import {EventHandler} from "./types";
+
+export { EventBus, EventListener }
+
+interface EventListener {
+    handler:EventHandler;
+    priority:number;
+}
+type EventListenersMap = Map<string, EventListener[]>
+class EventBus{
+    private events: EventListenersMap = new Map()
+
+    on(event:string,handler:EventHandler,priority:number=0){
+        if(this.events.has(event)){
+            const listeners=this.events.get(event)
+            listeners!.push({handler, priority})
+            listeners!.sort((a,b)=>b.priority-a.priority)
+        }else {
+            this.events.set(event,[{handler, priority}])
+        }
+    }
+
+    off(event:string,handler:EventHandler){
+        const listeners=this.events.get(event)
+        if(!listeners)return
+
+        const index=listeners.findIndex(l=>l.handler===handler)
+        listeners.splice(index,1)
+    }
+
+    emit(event:string,...args:any[]){
+        const listeners=this.events.get(event)
+        if(!listeners)return
+
+        for(const {handler} of listeners){
+            const result=handler(...args)
+            if(result===false)break
+        }
+    }
+
+    clear(){
+        this.events.clear()
+    }
+
+    count(event:string){
+        return this.events.get(event)?.length ?? 0
+    }
+}