From e757682ed1c4db69be9809a641972b079bbe52d7 Mon Sep 17 00:00:00 2001
From: Peaceultime <clem31470@gmail.com>
Date: Mon, 2 Sep 2024 13:06:07 +0200
Subject: [PATCH] Fix custom color background

---
 components/canvas/CanvasEdge.vue     |  6 +++---
 components/canvas/CanvasNode.vue     | 12 ++++++++++--
 components/canvas/CanvasRenderer.vue |  8 +++-----
 3 files changed, 16 insertions(+), 10 deletions(-)

diff --git a/components/canvas/CanvasEdge.vue b/components/canvas/CanvasEdge.vue
index 585ac7b..32ec580 100644
--- a/components/canvas/CanvasEdge.vue
+++ b/components/canvas/CanvasEdge.vue
@@ -24,10 +24,10 @@ const rotation: Record<Direction, string> = {
 </script>
 
 <template>
-    <g :style="{'--canvas-color': color?.hex}">
-        <path :style="`stroke-linecap: butt; stroke-width: calc(3px * var(--zoom-multiplier));`" :class="color?.class ? `stroke-light-${color.class} dark:stroke-dark-${color.class}` : ((color && color?.hex !== undefined) ? 'stroke-[var(--canvas-color)]' : 'stroke-light-40 dark:stroke-dark-40')" class="fill-none stroke-[4px]" :d="path.path"></path>
+    <g :style="{'--canvas-color': color?.hex}" class="z-0">
+        <path :style="`stroke-linecap: butt; stroke-width: calc(3px * var(--zoom-multiplier));`" :class="color?.class ? `stroke-light-${color.class} dark:stroke-dark-${color.class}` : ((color && color?.hex !== undefined) ? 'stroke-[color:var(--canvas-color)]' : 'stroke-light-40 dark:stroke-dark-40')" class="fill-none stroke-[4px]" :d="path.path"></path>
         <g :style="`transform: translate(${path.to.x}px, ${path.to.y}px) scale(var(--zoom-multiplier)) rotate(${rotation[path.side]}deg);`">
-            <polygon :class="color?.class ? `fill-light-${color.class} dark:fill-dark-${color.class}` : ((color && color?.hex !== undefined) ? 'fill-[var(--canvas-color)]' : 'fill-light-40 dark:fill-dark-40')" points="0,0 6.5,10.4 -6.5,10.4"></polygon>
+            <polygon :class="color?.class ? `fill-light-${color.class} dark:fill-dark-${color.class}` : ((color && color?.hex !== undefined) ? 'fill-[color:var(--canvas-color)]' : 'fill-light-40 dark:fill-dark-40')" points="0,0 6.5,10.4 -6.5,10.4"></polygon>
         </g>
     </g>
 </template>
\ No newline at end of file
diff --git a/components/canvas/CanvasNode.vue b/components/canvas/CanvasNode.vue
index 6019a49..a72c309 100644
--- a/components/canvas/CanvasNode.vue
+++ b/components/canvas/CanvasNode.vue
@@ -13,7 +13,7 @@ const colors = computed(() => {
     if(props.node.color)
     {
         const color = props.node.color;
-        return color?.class ? { bg: `bg-light-${color?.class} dark:bg-dark-${color?.class}`, border: `border-light-${color?.class} dark:border-dark-${color?.class}`} : { bg: `bg-[rgba(var(--canvas-color), 0.3)]`, border: `border-[var(--canvas-color)]` };
+        return color?.class ? { bg: `bg-light-${color?.class} dark:bg-dark-${color?.class}`, border: `border-light-${color?.class} dark:border-dark-${color?.class}`} : { bg: `bg-colored`, border: `border-[color:var(--canvas-color)]` };
     }
     else
     {
@@ -22,9 +22,17 @@ const colors = computed(() => {
 })
 </script>
 
+<style>
+.bg-colored
+{
+    --tw-bg-opacity: 1;
+    background-color: rgba(from var(--canvas-color) r g b / var(--tw-bg-opacity));
+}
+</style>
+
 <template>
     <div class="absolute" :style="{transform: `translate(${node.x}px, ${node.y}px)`, width: `${node.width}px`, height: `${node.height}px`, '--canvas-color': node.color?.hex}">
-        <div :class="[{'z-0': node.type === 'group', 'z-[2]': node.type !== 'group'}, colors.border]" class="border-2 bg-light-20 dark:bg-dark-20 overflow-hidden contain-strict w-full h-full flex" style="backface-visibility: hidden;">
+        <div :class="[{'-z-10': node.type === 'group', 'z-10': node.type !== 'group'}, colors.border]" class="border-2 bg-light-20 dark:bg-dark-20 overflow-hidden contain-strict w-full h-full flex">
             <div class="w-full h-full py-2 px-4 flex !bg-opacity-[0.07]" :class="colors.bg">
                 <template v-if="node.type === 'group' || zoom > Math.min(0.4, 1000 / size)">
                     <div v-if="node.text?.length > 0" class="flex items-center">
diff --git a/components/canvas/CanvasRenderer.vue b/components/canvas/CanvasRenderer.vue
index 46ea2a2..0f10c72 100644
--- a/components/canvas/CanvasRenderer.vue
+++ b/components/canvas/CanvasRenderer.vue
@@ -7,9 +7,7 @@ interface Props
 }
 const props = defineProps<Props>();
 
-let dragging = false, posX = 0, posY = 0, dispX = ref(0), dispY = ref(0), minZoom = ref(0.1), zoom = ref(1);
-let minX = ref(+Infinity), minY = ref(+Infinity), maxX = ref(-Infinity), maxY = ref(-Infinity);
-let bbox = ref<DOMRect>();
+let dragging = false, posX = 0, posY = 0, dispX = ref(0), dispY = ref(0), minZoom = ref(0.1), zoom = ref(0.5);
 
 let lastDistance = 0;
 
@@ -268,7 +266,7 @@ dark:border-dark-purple
                         </svg>
                     </div>
                 </div>
-                <div class="absolute top-0 left-0 w-full h-full origin-center pointer-events-none z-10"
+                <div class="absolute top-0 left-0 w-full h-full origin-center pointer-events-none *:pointer-events-auto *:select-none"
                     :style="{transform: `scale(${zoom}) translate(${dispX}px, ${dispY}px)`}">
                     <div>
                         <CanvasNode v-for="node of props.canvas.nodes" :key="node.id" :node="node" :zoom="zoom" />
@@ -279,7 +277,7 @@ dark:border-dark-purple
                             <div class="relative bg-light-20 dark:bg-dark-20 border border-light-35 dark:border-dark-35 px-4 py-2 -translate-x-[50%] -translate-y-[50%]">{{ edge.label }}</div>
                         </div>
                     </template>
-                    <svg class="absolute top-0 left-0 overflow-visible w-full h-full origin-top pointer-events-none z-[1]">
+                    <svg class="absolute top-0 left-0 overflow-visible w-full h-full origin-top pointer-events-none">
                         <CanvasEdge v-for="edge of props.canvas.edges" :key="edge.id"
                             :path="path(getNode(edge.fromNode)!, edge.fromSide, getNode(edge.toNode)!, edge.toSide)"
                             :color="edge.color" :label="edge.label" />