@pooder/kit 1.0.0 → 2.0.0

package/dist/index.mjs

@@ -1,5 +1,9 @@
 // src/background.ts
-import { Image, PooderLayer, Rect } from "@pooder/core";
+import {
+  Image,
+  PooderLayer,
+  Rect
+} from "@pooder/core";
 var BackgroundTool = class {
   constructor() {
     this.name = "BackgroundTool";
@@ -149,8 +153,7 @@ var BackgroundTool = class {
             }
           });
           img.scaleToWidth(width);
-          if (img.getScaledHeight() < height)
-            img.scaleToHeight(height);
+          if (img.getScaledHeight() < height) img.scaleToHeight(height);
           layer.add(img);
         }
       }
@@ -162,7 +165,11 @@ var BackgroundTool = class {
 };
 
 // src/dieline.ts
-import { Path, PooderLayer as PooderLayer2, Pattern } from "@pooder/core";
+import {
+  Path,
+  PooderLayer as PooderLayer2,
+  Pattern
+} from "@pooder/core";
 
 // src/geometry.ts
 import paper from "paper";
@@ -315,7 +322,8 @@ var DielineTool = class {
       offset: 0,
       style: "solid",
       insideColor: "rgba(0,0,0,0)",
-      outsideColor: "#ffffff"
+      outsideColor: "#ffffff",
+      showBleedLines: true
     };
     this.schema = {
       shape: {
@@ -330,6 +338,7 @@ var DielineTool = class {
       // Complex object, simplified for now or need custom handler
       borderLength: { type: "number", min: 0, max: 500, label: "Margin" },
       offset: { type: "number", min: -100, max: 100, label: "Bleed Offset" },
+      showBleedLines: { type: "boolean", label: "Show Bleed Lines" },
       style: {
         type: "select",
         options: ["solid", "dashed"],
@@ -349,7 +358,8 @@ var DielineTool = class {
             offset: 0,
             style: "solid",
             insideColor: "rgba(0,0,0,0)",
-            outsideColor: "#ffffff"
+            outsideColor: "#ffffff",
+            showBleedLines: true
           };
           this.updateDieline(editor);
           return true;
@@ -363,7 +373,8 @@ var DielineTool = class {
       },
       setDimensions: {
         execute: (editor, width, height) => {
-          if (this.options.width === width && this.options.height === height) return true;
+          if (this.options.width === width && this.options.height === height)
+            return true;
           this.options.width = width;
           this.options.height = height;
           this.updateDieline(editor);
@@ -418,6 +429,94 @@ var DielineTool = class {
             required: true
           }
         }
+      },
+      exportCutImage: {
+        execute: (editor) => {
+          var _a, _b, _c, _d;
+          const { shape, width, height, radius, position } = this.options;
+          const canvasW = editor.canvas.width || 800;
+          const canvasH = editor.canvas.height || 600;
+          const cx = (_a = position == null ? void 0 : position.x) != null ? _a : canvasW / 2;
+          const cy = (_b = position == null ? void 0 : position.y) != null ? _b : canvasH / 2;
+          const holeTool = editor.getExtension("HoleTool");
+          const holes = holeTool ? holeTool.options.holes || [] : [];
+          const innerRadius = holeTool ? holeTool.options.innerRadius || 15 : 15;
+          const outerRadius = holeTool ? holeTool.options.outerRadius || 25 : 25;
+          const holeData = holes.map((h) => ({
+            x: h.x,
+            y: h.y,
+            innerRadius,
+            outerRadius
+          }));
+          const pathData = generateDielinePath({
+            shape,
+            width,
+            height,
+            radius,
+            x: cx,
+            y: cy,
+            holes: holeData
+          });
+          const clipPath = new Path(pathData, {
+            left: 0,
+            top: 0,
+            originX: "left",
+            originY: "top",
+            absolutePositioned: true
+          });
+          const layer = this.getLayer(editor, "dieline-overlay");
+          const wasVisible = (_c = layer == null ? void 0 : layer.visible) != null ? _c : true;
+          if (layer) layer.visible = false;
+          const holeMarkers = editor.canvas.getObjects().filter((o) => {
+            var _a2;
+            return ((_a2 = o.data) == null ? void 0 : _a2.type) === "hole-marker";
+          });
+          holeMarkers.forEach((o) => o.visible = false);
+          const rulerLayer = editor.canvas.getObjects().find((obj) => {
+            var _a2;
+            return ((_a2 = obj.data) == null ? void 0 : _a2.id) === "ruler-overlay";
+          });
+          const rulerWasVisible = (_d = rulerLayer == null ? void 0 : rulerLayer.visible) != null ? _d : true;
+          if (rulerLayer) rulerLayer.visible = false;
+          const originalClip = editor.canvas.clipPath;
+          editor.canvas.clipPath = clipPath;
+          const bbox = clipPath.getBoundingRect();
+          const holeDataRelative = holes.map((h) => ({
+            x: h.x - bbox.left,
+            y: h.y - bbox.top,
+            innerRadius,
+            outerRadius
+          }));
+          const clipPathCorrected = new Path(pathData, {
+            absolutePositioned: true,
+            left: 0,
+            top: 0
+          });
+          const tempPath = new Path(pathData);
+          const tempBounds = tempPath.getBoundingRect();
+          clipPathCorrected.set({
+            left: tempBounds.left,
+            top: tempBounds.top,
+            originX: "left",
+            originY: "top"
+          });
+          editor.canvas.clipPath = clipPathCorrected;
+          const exportBbox = clipPathCorrected.getBoundingRect();
+          const dataURL = editor.canvas.toDataURL({
+            format: "png",
+            multiplier: 2,
+            left: exportBbox.left,
+            top: exportBbox.top,
+            width: exportBbox.width,
+            height: exportBbox.height
+          });
+          editor.canvas.clipPath = originalClip;
+          if (layer) layer.visible = wasVisible;
+          if (rulerLayer) rulerLayer.visible = rulerWasVisible;
+          holeMarkers.forEach((o) => o.visible = true);
+          editor.canvas.requestRenderAll();
+          return dataURL;
+        }
       }
     };
   }
@@ -484,7 +583,17 @@ var DielineTool = class {
   }
   updateDieline(editor) {
     var _a, _b;
-    const { shape, radius, offset, style, insideColor, outsideColor, position, borderLength } = this.options;
+    const {
+      shape,
+      radius,
+      offset,
+      style,
+      insideColor,
+      outsideColor,
+      position,
+      borderLength,
+      showBleedLines
+    } = this.options;
     let { width, height } = this.options;
     const canvasW = editor.canvas.width || 800;
     const canvasH = editor.canvas.height || 600;
@@ -498,6 +607,9 @@ var DielineTool = class {
     if (!layer) return;
     layer.remove(...layer.getObjects());
     const holeTool = editor.getExtension("HoleTool");
+    if (holeTool && typeof holeTool.enforceConstraints === "function") {
+      holeTool.enforceConstraints(editor);
+    }
     const holes = holeTool ? holeTool.options.holes || [] : [];
     const innerRadius = holeTool ? holeTool.options.innerRadius || 15 : 15;
     const outerRadius = holeTool ? holeTool.options.outerRadius || 25 : 25;
@@ -554,27 +666,32 @@ var DielineTool = class {
       layer.add(insideObj);
     }
     if (offset !== 0) {
-      const bleedPathData = generateBleedZonePath({
-        shape,
-        width,
-        height,
-        radius,
-        x: cx,
-        y: cy,
-        holes: holeData
-      }, offset);
-      const pattern = this.createHatchPattern("red");
-      if (pattern) {
-        const bleedObj = new Path(bleedPathData, {
-          fill: pattern,
-          stroke: null,
-          selectable: false,
-          evented: false,
-          objectCaching: false,
-          originX: "left",
-          originY: "top"
-        });
-        layer.add(bleedObj);
+      const bleedPathData = generateBleedZonePath(
+        {
+          shape,
+          width,
+          height,
+          radius,
+          x: cx,
+          y: cy,
+          holes: holeData
+        },
+        offset
+      );
+      if (showBleedLines !== false) {
+        const pattern = this.createHatchPattern("red");
+        if (pattern) {
+          const bleedObj = new Path(bleedPathData, {
+            fill: pattern,
+            stroke: null,
+            selectable: false,
+            evented: false,
+            objectCaching: false,
+            originX: "left",
+            originY: "top"
+          });
+          layer.add(bleedObj);
+        }
       }
       const offsetPathData = generateDielinePath({
         shape,
@@ -646,7 +763,10 @@ var DielineTool = class {
 };
 
 // src/film.ts
-import { Image as Image2, PooderLayer as PooderLayer3 } from "@pooder/core";
+import {
+  Image as Image2,
+  PooderLayer as PooderLayer3
+} from "@pooder/core";
 var FilmTool = class {
   constructor() {
     this.name = "FilmTool";
@@ -670,7 +790,8 @@ var FilmTool = class {
     this.commands = {
       setFilmImage: {
         execute: (editor, url, opacity) => {
-          if (this.options.url === url && this.options.opacity === opacity) return true;
+          if (this.options.url === url && this.options.opacity === opacity)
+            return true;
           this.options.url = url;
           this.options.opacity = opacity;
           this.updateFilm(editor, this.options);
@@ -761,8 +882,7 @@ var FilmTool = class {
       } else {
         img = await Image2.fromURL(url, { crossOrigin: "anonymous" });
         img.scaleToWidth(width);
-        if (img.getScaledHeight() < height)
-          img.scaleToHeight(height);
+        if (img.getScaledHeight() < height) img.scaleToHeight(height);
         img.set({
           originX: "left",
           originY: "top",
@@ -783,7 +903,11 @@ var FilmTool = class {
 };
 
 // src/hole.ts
-import { Circle as Circle2, Group, Point } from "@pooder/core";
+import {
+  Circle as Circle2,
+  Group,
+  Point
+} from "@pooder/core";
 var HoleTool = class {
   constructor() {
     this.name = "HoleTool";
@@ -791,7 +915,8 @@ var HoleTool = class {
       innerRadius: 15,
       outerRadius: 25,
       style: "solid",
-      holes: []
+      holes: [],
+      constraintTarget: "bleed"
     };
     this.schema = {
       innerRadius: {
@@ -811,6 +936,11 @@ var HoleTool = class {
         options: ["solid", "dashed"],
         label: "Line Style"
       },
+      constraintTarget: {
+        type: "select",
+        options: ["original", "bleed"],
+        label: "Constraint Target"
+      },
       holes: {
         type: "json",
         label: "Holes"
@@ -825,7 +955,10 @@ var HoleTool = class {
           const g = this.getDielineGeometry(editor);
           if (g) {
             const topCenter = { x: g.x, y: g.y - g.height / 2 };
-            defaultPos = getNearestPointOnDieline(topCenter, { ...g, holes: [] });
+            defaultPos = getNearestPointOnDieline(topCenter, {
+              ...g,
+              holes: []
+            });
           }
           this.options = {
             innerRadius: 15,
@@ -892,7 +1025,7 @@ var HoleTool = class {
     if (!dielineTool) return null;
     const geometry = dielineTool.getGeometry(editor);
     if (!geometry) return null;
-    const offset = dielineTool.options.offset || 0;
+    const offset = this.options.constraintTarget === "original" ? 0 : dielineTool.options.offset || 0;
     return {
       ...geometry,
       width: Math.max(0, geometry.width + offset * 2),
@@ -900,6 +1033,39 @@ var HoleTool = class {
       radius: Math.max(0, geometry.radius + offset)
     };
   }
+  enforceConstraints(editor) {
+    const geometry = this.getDielineGeometry(editor);
+    if (!geometry) return;
+    const objects = editor.canvas.getObjects().filter((obj) => {
+      var _a;
+      return ((_a = obj.data) == null ? void 0 : _a.type) === "hole-marker";
+    });
+    let changed = false;
+    objects.sort(
+      (a, b) => {
+        var _a, _b, _c, _d;
+        return ((_b = (_a = a.data) == null ? void 0 : _a.index) != null ? _b : 0) - ((_d = (_c = b.data) == null ? void 0 : _c.index) != null ? _d : 0);
+      }
+    );
+    const newHoles = [];
+    objects.forEach((obj) => {
+      const currentPos = new Point(obj.left, obj.top);
+      const newPos = this.calculateConstrainedPosition(currentPos, geometry);
+      if (currentPos.distanceFrom(newPos) > 0.1) {
+        obj.set({
+          left: newPos.x,
+          top: newPos.y
+        });
+        obj.setCoords();
+        changed = true;
+      }
+      newHoles.push({ x: obj.left, y: obj.top });
+    });
+    if (changed) {
+      this.options.holes = newHoles;
+      editor.canvas.requestRenderAll();
+    }
+  }
   setup(editor) {
     if (!this.handleMoving) {
       this.handleMoving = (e) => {
@@ -932,7 +1098,10 @@ var HoleTool = class {
       const g = this.getDielineGeometry(editor);
       if (g) {
         const topCenter = { x: g.x, y: g.y - g.height / 2 };
-        const snapped = getNearestPointOnDieline(topCenter, { ...g, holes: [] });
+        const snapped = getNearestPointOnDieline(topCenter, {
+          ...g,
+          holes: []
+        });
         defaultPos = snapped;
       }
       opts.holes = [defaultPos];
@@ -961,6 +1130,12 @@ var HoleTool = class {
     editor.canvas.requestRenderAll();
   }
   onUpdate(editor, state) {
+    this.enforceConstraints(editor);
+    this.redraw(editor);
+    const dielineTool = editor.getExtension("DielineTool");
+    if (dielineTool && dielineTool.updateDieline) {
+      dielineTool.updateDieline(editor);
+    }
   }
   syncHolesFromCanvas(editor) {
     const objects = editor.canvas.getObjects().filter((obj) => {
@@ -1049,7 +1224,10 @@ var HoleTool = class {
       holes: []
       // We don't need holes for boundary calculation
     };
-    const nearest = getNearestPointOnDieline({ x: p.x, y: p.y }, options);
+    const nearest = getNearestPointOnDieline(
+      { x: p.x, y: p.y },
+      options
+    );
     const nearestP = new Point(nearest.x, nearest.y);
     const dist = p.distanceFrom(nearestP);
     const v = p.subtract(nearestP);
@@ -1076,10 +1254,16 @@ var HoleTool = class {
 };
 
 // src/image.ts
-import { Image as Image3, PooderLayer as PooderLayer4 } from "@pooder/core";
+import {
+  Image as Image3,
+  PooderLayer as PooderLayer4,
+  util,
+  Point as Point2
+} from "@pooder/core";
 var ImageTool = class {
   constructor() {
     this.name = "ImageTool";
+    this._loadingUrl = null;
     this.options = {
       url: "",
       opacity: 1
@@ -1095,14 +1279,44 @@ var ImageTool = class {
         max: 1,
         step: 0.1,
         label: "Opacity"
+      },
+      width: {
+        type: "number",
+        label: "Width",
+        min: 0,
+        max: 5e3
+      },
+      height: {
+        type: "number",
+        label: "Height",
+        min: 0,
+        max: 5e3
+      },
+      angle: {
+        type: "number",
+        label: "Rotation",
+        min: 0,
+        max: 360
+      },
+      left: {
+        type: "number",
+        label: "Left",
+        min: 0,
+        max: 1e3
+      },
+      top: {
+        type: "number",
+        label: "Top",
+        min: 0,
+        max: 1e3
       }
     };
     this.commands = {
       setUserImage: {
-        execute: (editor, url, opacity) => {
-          if (this.options.url === url && this.options.opacity === opacity) return true;
-          this.options.url = url;
-          this.options.opacity = opacity;
+        execute: (editor, url, opacity, width, height, angle, left, top) => {
+          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 };
           this.updateImage(editor, this.options);
           return true;
         },
@@ -1118,7 +1332,12 @@ var ImageTool = class {
             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" }
         }
       }
     };
@@ -1163,43 +1382,101 @@ var ImageTool = class {
   }
   updateImage(editor, opts) {
     var _a, _b;
-    let { url, opacity } = opts;
+    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");
+    if (this._loadingUrl === url) return;
     if (userImage) {
       const currentSrc = ((_a = userImage.getSrc) == null ? void 0 : _a.call(userImage)) || ((_b = userImage._element) == null ? void 0 : _b.src);
       if (currentSrc !== url) {
-        this.loadImage(editor, layer, url, opacity, userImage);
+        this.loadImage(editor, layer, opts);
       } else {
-        if (userImage.opacity !== opacity) {
-          userImage.set({ opacity });
+        const updates = {};
+        const centerX = editor.state.width / 2;
+        const centerY = editor.state.height / 2;
+        if (userImage.opacity !== opacity) updates.opacity = opacity;
+        if (angle !== void 0 && userImage.angle !== angle)
+          updates.angle = angle;
+        if (left !== void 0) {
+          const localLeft = left - centerX;
+          if (Math.abs(userImage.left - localLeft) > 1)
+            updates.left = localLeft;
+        }
+        if (top !== void 0) {
+          const localTop = top - centerY;
+          if (Math.abs(userImage.top - localTop) > 1) updates.top = localTop;
+        }
+        if (width !== void 0 && userImage.width)
+          updates.scaleX = width / userImage.width;
+        if (height !== void 0 && userImage.height)
+          updates.scaleY = height / userImage.height;
+        if (Object.keys(updates).length > 0) {
+          userImage.set(updates);
           editor.canvas.requestRenderAll();
         }
       }
     } else {
-      this.loadImage(editor, layer, url, opacity);
+      this.loadImage(editor, layer, opts);
     }
   }
-  loadImage(editor, layer, url, opacity, oldImage) {
+  loadImage(editor, layer, opts) {
+    const { url } = opts;
+    this._loadingUrl = url;
     Image3.fromURL(url).then((image) => {
-      if (oldImage) {
-        const { left, top, scaleX, scaleY, angle } = oldImage;
-        image.set({ left, top, scaleX, scaleY, angle });
-        layer.remove(oldImage);
+      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");
+      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 !== void 0 ? left : defaultLeft,
+          top: top !== void 0 ? top : defaultTop,
+          angle: angle !== void 0 ? angle : defaultAngle,
+          scaleX: width !== void 0 && image.width ? width / image.width : defaultScaleX,
+          scaleY: height !== void 0 && image.height ? height / image.height : defaultScaleY
+        });
+        layer.remove(existingImage);
+      } else {
+        if (width !== void 0 && image.width)
+          image.scaleX = width / image.width;
+        if (height !== void 0 && image.height)
+          image.scaleY = height / image.height;
+        if (angle !== void 0) image.angle = angle;
+        if (left !== void 0) image.left = left;
+        if (top !== void 0) image.top = top;
       }
       image.set({
-        opacity,
+        opacity: opacity !== void 0 ? opacity : 1,
         data: {
           id: "user-image"
         }
       });
       layer.add(image);
+      image.on("modified", (e) => {
+        const matrix = image.calcTransformMatrix();
+        const globalPoint = util.transformPoint(new Point2(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);
     });
   }
@@ -1227,7 +1504,8 @@ var WhiteInkTool = class {
     this.commands = {
       setWhiteInkImage: {
         execute: (editor, customMask, opacity, enableClip = true) => {
-          if (this.options.customMask === customMask && this.options.opacity === opacity && this.options.enableClip === enableClip) return true;
+          if (this.options.customMask === customMask && this.options.opacity === opacity && this.options.enableClip === enableClip)
+            return true;
           this.options.customMask = customMask;
           this.options.opacity = opacity;
           this.options.enableClip = enableClip;
@@ -1348,7 +1626,14 @@ var WhiteInkTool = class {
     if (whiteInk) {
       const currentSrc = ((_a = whiteInk.getSrc) == null ? void 0 : _a.call(whiteInk)) || ((_b = whiteInk._element) == null ? void 0 : _b.src);
       if (currentSrc !== customMask) {
-        this.loadWhiteInk(editor, layer, customMask, opacity, enableClip, whiteInk);
+        this.loadWhiteInk(
+          editor,
+          layer,
+          customMask,
+          opacity,
+          enableClip,
+          whiteInk
+        );
       } else {
         if (whiteInk.opacity !== opacity) {
           whiteInk.set({ opacity });
@@ -1377,10 +1662,12 @@ var WhiteInkTool = class {
       if (oldImage) {
         layer.remove(oldImage);
       }
-      (_a = image.filters) == null ? void 0 : _a.push(new filters.BlendColor({
-        color: "#FFFFFF",
-        mode: "add"
-      }));
+      (_a = image.filters) == null ? void 0 : _a.push(
+        new filters.BlendColor({
+          color: "#FFFFFF",
+          mode: "add"
+        })
+      );
       image.applyFilters();
       image.set({
         opacity,
@@ -1448,7 +1735,12 @@ var WhiteInkTool = class {
 };
 
 // src/ruler.ts
-import { PooderLayer as PooderLayer6, Rect as Rect3, Line, Text } from "@pooder/core";
+import {
+  PooderLayer as PooderLayer6,
+  Rect as Rect3,
+  Line,
+  Text
+} from "@pooder/core";
 var RulerTool = class {
   constructor() {
     this.name = "RulerTool";
@@ -1492,7 +1784,8 @@ var RulerTool = class {
       setTheme: {
         execute: (editor, theme) => {
           const newOptions = { ...this.options, ...theme };
-          if (JSON.stringify(newOptions) === JSON.stringify(this.options)) return true;
+          if (JSON.stringify(newOptions) === JSON.stringify(this.options))
+            return true;
           this.options = newOptions;
           this.updateRuler(editor);
           return true;
@@ -1646,12 +1939,83 @@ var RulerTool = class {
     editor.canvas.requestRenderAll();
   }
 };
+
+// src/mirror.ts
+var MirrorTool = class {
+  constructor() {
+    this.name = "MirrorTool";
+    this.options = {
+      enabled: false
+    };
+    this.schema = {
+      enabled: {
+        type: "boolean",
+        label: "Mirror View"
+      }
+    };
+    this.commands = {
+      toggleMirror: {
+        execute: (editor) => {
+          this.options.enabled = !this.options.enabled;
+          this.applyMirror(editor, this.options.enabled);
+          return true;
+        }
+      },
+      setMirror: {
+        execute: (editor, enabled) => {
+          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
+          }
+        }
+      }
+    };
+  }
+  onMount(editor) {
+    if (this.options.enabled) {
+      this.applyMirror(editor, true);
+    }
+  }
+  onUpdate(editor) {
+    this.applyMirror(editor, this.options.enabled);
+  }
+  onUnmount(editor) {
+    this.applyMirror(editor, false);
+  }
+  applyMirror(editor, enabled) {
+    const canvas = editor.canvas;
+    if (!canvas) return;
+    const width = canvas.width || 800;
+    let vpt = canvas.viewportTransform || [1, 0, 0, 1, 0, 0];
+    vpt = [...vpt];
+    const isFlipped = vpt[0] < 0;
+    if (enabled && !isFlipped) {
+      vpt[0] = -vpt[0];
+      vpt[4] = width - vpt[4];
+      canvas.setViewportTransform(vpt);
+      canvas.requestRenderAll();
+    } else if (!enabled && isFlipped) {
+      vpt[0] = -vpt[0];
+      vpt[4] = width - vpt[4];
+      canvas.setViewportTransform(vpt);
+      canvas.requestRenderAll();
+    }
+  }
+};
 export {
   BackgroundTool,
   DielineTool,
   FilmTool,
   HoleTool,
   ImageTool,
+  MirrorTool,
   RulerTool,
   WhiteInkTool
 };