help with thingie

frontend/src/views/nakopneme_facebook_photo_one/NakopnemeFacebookPhotoOne.vue

@@ -15,6 +15,7 @@ import {
   loadCanvasStorage,
   setCanvasStorage,
   updateAutoRedrawStorage,
+  toRawDeep,
 } from "../../utils";
 
 import Canvas from "../../components/canvas/Canvas.vue";
@@ -110,8 +111,10 @@ export default {
 
       await this.$refs.canvas.redraw(canvasProperties);
 
-      delete canvasProperties.colors;
-      setCanvasStorage(canvasProperties);
+      let canvasPropertiesToSave = structuredClone(toRawDeep(canvasProperties));
+      delete canvasPropertiesToSave.colors;
+
+      setCanvasStorage(canvasPropertiesToSave);
     },
   },
   mounted() {

frontend/src/views/nakopneme_facebook_photo_one/canvas.js

@@ -24,6 +24,16 @@ let contractedByTextbox = null;
 let mainImageSource = null;
 let previousLogoPosition = null;
 
+const removeDownEventListener = () => {
+  document
+    .getElementsByClassName("upper-canvas")[0]
+    .removeEventListener("pointerdown", canvasPointerDownEvent);
+};
+
+let upEventFunction = null;
+let canvasPointerDownEvent = null;
+let pointerDownEventAssigned = false;
+
 const redraw = async (canvas, options) => {
   canvas.controlsAboveOverlay = true;
 
@@ -34,7 +44,6 @@ const redraw = async (canvas, options) => {
       timeTextBox,
       contractedByTextbox,
       background,
-      mainImage,
     ],
     canvas,
   );
@@ -63,6 +72,16 @@ const redraw = async (canvas, options) => {
   const logoWidth = Math.ceil(canvas.width * 0.2);
   const logoSideMargin = Math.ceil(canvas.width * 0.11);
 
+  document
+    .getElementsByClassName("upper-canvas")[0]
+    .removeEventListener("pointerup", upEventFunction);
+  document
+    .getElementsByClassName("upper-canvas")[0]
+    .removeEventListener("pointerout", upEventFunction);
+  document
+    .getElementsByClassName("upper-canvas")[0]
+    .removeEventListener("pointercancel", upEventFunction);
+
   canvas.preserveObjectStacking = true;
 
   background = new fabric.Rect({
@@ -97,8 +116,8 @@ const redraw = async (canvas, options) => {
   })
 
   var clipPath = new fabric.Rect({width: 600, height: 200})
-  //clipPath.inverted = true
-  //background.clipPath = clipPath;
+  clipPath.inverted = true
+  background.clipPath = clipPath;
 
   canvas.add(background)
 
@@ -299,6 +318,45 @@ const redraw = async (canvas, options) => {
   /* END Main image render */
 
   sortObjects(canvas);
+
+  canvasPointerDownEvent = (event) => {
+    let activeObject = canvas.getActiveObject();
+
+    if (activeObject === null) {
+      return;
+    }
+
+    // if (activeObject._element.src == mainImage._element.src) {
+    // return
+    // }
+
+    canvas.remove(background);
+    background = null;
+  };
+
+  if (!pointerDownEventAssigned) {
+    document
+      .getElementsByClassName("upper-canvas")[0]
+      .addEventListener("pointerdown", canvasPointerDownEvent);
+
+    pointerDownEventAssigned = true;
+  }
+
+  upEventFunction = (event) => {
+    redraw(canvas, options);
+  };
+
+  document
+    .getElementsByClassName("upper-canvas")[0]
+    .addEventListener("pointerup", upEventFunction);
+
+  document
+    .getElementsByClassName("upper-canvas")[0]
+    .addEventListener("pointerout", upEventFunction);
+
+  document
+    .getElementsByClassName("upper-canvas")[0]
+    .addEventListener("pointercancel", upEventFunction);
 };
 
 export default redraw;