@pooder/kit 0.0.2 → 2.0.0

package/src/image.ts

@@ -1,146 +1,304 @@
-import {Command, Editor, EditorState, Extension, Image, OptionSchema, PooderLayer} from '@pooder/core';
-
-interface ImageToolOptions {
-    url: string;
-    opacity: number;
-}
-export class ImageTool implements Extension<ImageToolOptions> {
-    name = 'ImageTool';
-    options: ImageToolOptions = {
-        url: '',
-        opacity: 1
-    };
-
-    public schema: Record<keyof ImageToolOptions, OptionSchema> = {
-        url: {
-            type: 'string',
-            label: 'Image URL'
-        },
-        opacity: {
-            type: 'number',
-            min: 0,
-            max: 1,
-            step: 0.1,
-            label: 'Opacity'
-        }
-    };
-
-    onMount(editor: Editor) {
-        this.ensureLayer(editor);
-    }
-
-    onUnmount(editor: Editor) {
-        const layer = editor.getLayer("user");
-        if (layer) {
-            const userImage = editor.getObject("user-image", "user");
-            if (userImage) {
-                layer.remove(userImage);
-                editor.canvas.requestRenderAll();
-            }
-        }
-    }
-
-    onUpdate(editor: Editor, state: EditorState) {
-        this.updateImage(editor, this.options);
-    }
-
-    private ensureLayer(editor: Editor) {
-        let userLayer = editor.getLayer("user")
-        if (!userLayer) {
-            userLayer = new PooderLayer([], {
-                width: editor.state.width,
-                height: editor.state.height,
-                left: 0,
-                top: 0,
-                originX: 'left',
-                originY: 'top',
-                selectable: false,
-                evented: true,
-                subTargetCheck: true,
-                interactive: true,
-                data: {
-                    id: 'user'
-                }
-            });
-            editor.canvas.add(userLayer)
-        }
-    }
-
-    private updateImage(editor: Editor, opts: ImageToolOptions) {
-        let { url, opacity } = opts;
-
-        const layer = editor.getLayer("user");
-        if (!layer) {
-            console.warn('[ImageTool] User layer not found');
-            return;
-        }
-
-        const userImage = editor.getObject("user-image","user") as any;
-
-        if (userImage) {
-            const currentSrc = userImage.getSrc?.() || userImage._element?.src;
-
-            if (currentSrc !== url) {
-                 this.loadImage(editor, layer, url, opacity, userImage);
-            } else {
-                if (userImage.opacity !== opacity) {
-                    userImage.set({ opacity });
-                    editor.canvas.requestRenderAll();
-                }
-            }
-        } else {
-            this.loadImage(editor, layer, url, opacity);
-        }
-    }
-
-    private loadImage(editor: Editor, layer: PooderLayer, url: string, opacity: number, oldImage?: any) {
-        Image.fromURL(url).then(image => {
-            if (oldImage) {
-                 const { left, top, scaleX, scaleY, angle } = oldImage;
-                 image.set({ left, top, scaleX, scaleY, angle });
-                 layer.remove(oldImage);
-            }
-
-            image.set({
-                opacity,
-                data: {
-                    id: 'user-image'
-                }
-            });
-            layer.add(image);
-            editor.canvas.requestRenderAll();
-        }).catch(err => {
-            console.error("Failed to load image", url, err);
-        });
-    }
-
-    commands:Record<string, Command>={
-        setUserImage:{
-            execute:(editor: Editor, url: string, opacity: number)=>{
-                if (this.options.url === url && this.options.opacity === opacity) return true;
-                
-                this.options.url = url;
-                this.options.opacity = opacity;
-                
-                // Direct update
-                this.updateImage(editor, this.options);
-                
-                return true
-            },
-            schema: {
-                url: {
-                    type: 'string',
-                    label: 'Image URL',
-                    required: true
-                },
-                opacity: {
-                    type: 'number',
-                    label: 'Opacity',
-                    min: 0,
-                    max: 1,
-                    required: true
-                }
-            }
-        }
-    }
-}
+import {
+  Command,
+  Editor,
+  EditorState,
+  Extension,
+  Image,
+  OptionSchema,
+  PooderLayer,
+  util,
+  Point,
+} from "@pooder/core";
+
+interface ImageToolOptions {
+  url: string;
+  opacity: number;
+  width?: number;
+  height?: number;
+  angle?: number;
+  left?: number;
+  top?: number;
+}
+export class ImageTool implements Extension<ImageToolOptions> {
+  name = "ImageTool";
+  private _loadingUrl: string | null = null;
+  options: ImageToolOptions = {
+    url: "",
+    opacity: 1,
+  };
+
+  public schema: Record<keyof ImageToolOptions, OptionSchema> = {
+    url: {
+      type: "string",
+      label: "Image URL",
+    },
+    opacity: {
+      type: "number",
+      min: 0,
+      max: 1,
+      step: 0.1,
+      label: "Opacity",
+    },
+    width: {
+      type: "number",
+      label: "Width",
+      min: 0,
+      max: 5000,
+    },
+    height: {
+      type: "number",
+      label: "Height",
+      min: 0,
+      max: 5000,
+    },
+    angle: {
+      type: "number",
+      label: "Rotation",
+      min: 0,
+      max: 360,
+    },
+    left: {
+      type: "number",
+      label: "Left",
+      min: 0,
+      max: 1000,
+    },
+    top: {
+      type: "number",
+      label: "Top",
+      min: 0,
+      max: 1000,
+    },
+  };
+
+  onMount(editor: Editor) {
+    this.ensureLayer(editor);
+    this.updateImage(editor, this.options);
+  }
+
+  onUnmount(editor: Editor) {
+    const layer = editor.getLayer("user");
+    if (layer) {
+      const userImage = editor.getObject("user-image", "user");
+      if (userImage) {
+        layer.remove(userImage);
+        editor.canvas.requestRenderAll();
+      }
+    }
+  }
+
+  onUpdate(editor: Editor, state: EditorState) {
+    this.updateImage(editor, this.options);
+  }
+
+  private ensureLayer(editor: Editor) {
+    let userLayer = editor.getLayer("user");
+    if (!userLayer) {
+      userLayer = new PooderLayer([], {
+        width: editor.state.width,
+        height: editor.state.height,
+        left: 0,
+        top: 0,
+        originX: "left",
+        originY: "top",
+        selectable: false,
+        evented: true,
+        subTargetCheck: true,
+        interactive: true,
+        data: {
+          id: "user",
+        },
+      });
+      editor.canvas.add(userLayer);
+    }
+  }
+
+  private updateImage(editor: Editor, opts: ImageToolOptions) {
+    let { url, opacity, width, height, angle, left, top } = opts;
+
+    const layer = editor.getLayer("user");
+    if (!layer) {
+      console.warn("[ImageTool] User layer not found");
+      return;
+    }
+
+    const userImage = editor.getObject("user-image", "user") as any;
+
+    if (this._loadingUrl === url) return;
+
+    if (userImage) {
+      const currentSrc = userImage.getSrc?.() || userImage._element?.src;
+
+      if (currentSrc !== url) {
+        this.loadImage(editor, layer, opts);
+      } else {
+        const updates: any = {};
+        const centerX = editor.state.width / 2;
+        const centerY = editor.state.height / 2;
+
+        if (userImage.opacity !== opacity) updates.opacity = opacity;
+        if (angle !== undefined && userImage.angle !== angle)
+          updates.angle = angle;
+
+        if (left !== undefined) {
+          const localLeft = left - centerX;
+          if (Math.abs(userImage.left - localLeft) > 1)
+            updates.left = localLeft;
+        }
+
+        if (top !== undefined) {
+          const localTop = top - centerY;
+          if (Math.abs(userImage.top - localTop) > 1) updates.top = localTop;
+        }
+
+        if (width !== undefined && userImage.width)
+          updates.scaleX = width / userImage.width;
+        if (height !== undefined && userImage.height)
+          updates.scaleY = height / userImage.height;
+
+        if (Object.keys(updates).length > 0) {
+          userImage.set(updates);
+          editor.canvas.requestRenderAll();
+        }
+      }
+    } else {
+      this.loadImage(editor, layer, opts);
+    }
+  }
+
+  private loadImage(
+    editor: Editor,
+    layer: PooderLayer,
+    opts: ImageToolOptions,
+  ) {
+    const { url } = opts;
+    this._loadingUrl = url;
+
+    Image.fromURL(url)
+      .then((image) => {
+        if (this._loadingUrl !== url) return;
+        this._loadingUrl = null;
+
+        const currentOpts = this.options;
+        const { opacity, width, height, angle, left, top } = currentOpts;
+
+        const existingImage = editor.getObject("user-image", "user") as any;
+
+        if (existingImage) {
+          const defaultLeft = existingImage.left;
+          const defaultTop = existingImage.top;
+          const defaultAngle = existingImage.angle;
+          const defaultScaleX = existingImage.scaleX;
+          const defaultScaleY = existingImage.scaleY;
+
+          image.set({
+            left: left !== undefined ? left : defaultLeft,
+            top: top !== undefined ? top : defaultTop,
+            angle: angle !== undefined ? angle : defaultAngle,
+            scaleX:
+              width !== undefined && image.width
+                ? width / image.width
+                : defaultScaleX,
+            scaleY:
+              height !== undefined && image.height
+                ? height / image.height
+                : defaultScaleY,
+          });
+
+          layer.remove(existingImage);
+        } else {
+          if (width !== undefined && image.width)
+            image.scaleX = width / image.width;
+          if (height !== undefined && image.height)
+            image.scaleY = height / image.height;
+          if (angle !== undefined) image.angle = angle;
+
+          if (left !== undefined) image.left = left;
+          if (top !== undefined) image.top = top;
+        }
+
+        image.set({
+          opacity: opacity !== undefined ? opacity : 1,
+          data: {
+            id: "user-image",
+          },
+        });
+        layer.add(image);
+
+        // Bind events to keep options in sync
+        image.on("modified", (e) => {
+          const matrix = image.calcTransformMatrix();
+          const globalPoint = util.transformPoint(new Point(0, 0), matrix);
+
+          this.options.left = globalPoint.x;
+          this.options.top = globalPoint.y;
+          this.options.angle = e.target.angle;
+
+          if (image.width)
+            this.options.width = e.target.width * e.target.scaleX;
+          if (image.height)
+            this.options.height = e.target.height * e.target.scaleY;
+
+          editor.emit("update");
+        });
+
+        editor.canvas.requestRenderAll();
+      })
+      .catch((err) => {
+        if (this._loadingUrl === url) this._loadingUrl = null;
+        console.error("Failed to load image", url, err);
+      });
+  }
+
+  commands: Record<string, Command> = {
+    setUserImage: {
+      execute: (
+        editor: Editor,
+        url: string,
+        opacity: number,
+        width?: number,
+        height?: number,
+        angle?: number,
+        left?: number,
+        top?: number,
+      ) => {
+        if (
+          this.options.url === url &&
+          this.options.opacity === opacity &&
+          this.options.width === width &&
+          this.options.height === height &&
+          this.options.angle === angle &&
+          this.options.left === left &&
+          this.options.top === top
+        )
+          return true;
+
+        this.options = { url, opacity, width, height, angle, left, top };
+
+        // Direct update
+        this.updateImage(editor, this.options);
+
+        return true;
+      },
+      schema: {
+        url: {
+          type: "string",
+          label: "Image URL",
+          required: true,
+        },
+        opacity: {
+          type: "number",
+          label: "Opacity",
+          min: 0,
+          max: 1,
+          required: true,
+        },
+        width: { type: "number", label: "Width" },
+        height: { type: "number", label: "Height" },
+        angle: { type: "number", label: "Angle" },
+        left: { type: "number", label: "Left" },
+        top: { type: "number", label: "Top" },
+      },
+    },
+  };
+}

package/src/index.ts

@@ -1,7 +1,8 @@
-export * from './background';
-export * from './dieline';
-export * from './film';
-export * from './hole';
-export * from './image';
-export * from './white-ink';
-export * from './ruler';
+export * from "./background";
+export * from "./dieline";
+export * from "./film";
+export * from "./hole";
+export * from "./image";
+export * from "./white-ink";
+export * from "./ruler";
+export * from "./mirror";

package/src/mirror.ts

@@ -0,0 +1,91 @@
+import { Command, Editor, Extension, OptionSchema } from "@pooder/core";
+
+export interface MirrorToolOptions {
+  enabled: boolean;
+}
+
+export class MirrorTool implements Extension<MirrorToolOptions> {
+  public name = "MirrorTool";
+  public options: MirrorToolOptions = {
+    enabled: false,
+  };
+
+  public schema: Record<keyof MirrorToolOptions, OptionSchema> = {
+    enabled: {
+      type: "boolean",
+      label: "Mirror View",
+    },
+  };
+
+  onMount(editor: Editor) {
+    if (this.options.enabled) {
+      this.applyMirror(editor, true);
+    }
+  }
+
+  onUpdate(editor: Editor) {
+    this.applyMirror(editor, this.options.enabled);
+  }
+
+  onUnmount(editor: Editor) {
+    // Force disable on unmount to restore view
+    this.applyMirror(editor, false);
+  }
+
+  private applyMirror(editor: Editor, enabled: boolean) {
+    const canvas = editor.canvas;
+    if (!canvas) return;
+
+    const width = canvas.width || 800;
+
+    // Fabric.js v6+ uses viewportTransform property
+    let vpt = canvas.viewportTransform || [1, 0, 0, 1, 0, 0];
+    // Create a copy to avoid mutating the reference directly before setting
+    vpt = [...vpt];
+
+    // If we are enabling and currently not flipped (scaleX > 0)
+    // Or disabling and currently flipped (scaleX < 0)
+    const isFlipped = vpt[0] < 0;
+
+    if (enabled && !isFlipped) {
+      // Flip scale X
+      vpt[0] = -vpt[0]; // Flip scale
+      vpt[4] = width - vpt[4]; // Adjust pan X
+
+      canvas.setViewportTransform(vpt as any);
+      canvas.requestRenderAll();
+    } else if (!enabled && isFlipped) {
+      // Restore
+      vpt[0] = -vpt[0]; // Unflip scale
+      vpt[4] = width - vpt[4]; // Restore pan X
+
+      canvas.setViewportTransform(vpt as any);
+      canvas.requestRenderAll();
+    }
+  }
+
+  commands: Record<string, Command> = {
+    toggleMirror: {
+      execute: (editor: Editor) => {
+        this.options.enabled = !this.options.enabled;
+        this.applyMirror(editor, this.options.enabled);
+        return true;
+      },
+    },
+    setMirror: {
+      execute: (editor: Editor, enabled: boolean) => {
+        if (this.options.enabled === enabled) return true;
+        this.options.enabled = enabled;
+        this.applyMirror(editor, enabled);
+        return true;
+      },
+      schema: {
+        enabled: {
+          type: "boolean",
+          label: "Enabled",
+          required: true,
+        },
+      },
+    },
+  };
+}