From a4729b8d8426b6c70446616cbbfcc02441abc3fd Mon Sep 17 00:00:00 2001
From: Peaceultime <clem31470@gmail.com>
Date: Sat, 11 May 2024 00:50:59 +0200
Subject: [PATCH] Finish canvas fixes + add privates content ignore

---
 assets/canvas.css                    |  7 +---
 components/CanvasEdge.vue            | 12 +++++-
 components/CanvasNode.vue            | 20 +++-------
 components/CanvasRenderer.client.vue | 57 ++++++++++++++++++++++------
 nuxt.config.ts                       |  3 ++
 5 files changed, 67 insertions(+), 32 deletions(-)

diff --git a/assets/canvas.css b/assets/canvas.css
index cc6a277..ae5c233 100644
--- a/assets/canvas.css
+++ b/assets/canvas.css
@@ -809,7 +809,7 @@ body.is-mobile .canvas-node-resizer {
 
 .canvas-edges path.canvas-display-path {
     pointer-events: none;
-    stroke-width: calc(3px * var(--zoom-multiplier));
+    stroke-width: calc(3px);
     stroke: rgb(var(--canvas-color));
     fill: none;
     transition: stroke-width 100ms ease-out;
@@ -817,7 +817,7 @@ body.is-mobile .canvas-node-resizer {
 
 .canvas-edges path.canvas-interaction-path {
     pointer-events: stroke;
-    stroke-width: calc(24px * var(--zoom-multiplier));
+    stroke-width: calc(24px);
     stroke-linecap: round;
     stroke: transparent;
     fill: none;
@@ -839,9 +839,6 @@ body.is-mobile .canvas-node-resizer {
     stroke-linecap: round;
     stroke-linejoin: round;
     stroke-width: 1px;
-    transform-box: fill-box;
-    transform: scale(var(--zoom-multiplier));
-    transform-origin: center top;
 }
 
 .canvas-edges g.is-focused path.canvas-display-path,
diff --git a/components/CanvasEdge.vue b/components/CanvasEdge.vue
index ae5decc..c27c557 100644
--- a/components/CanvasEdge.vue
+++ b/components/CanvasEdge.vue
@@ -3,10 +3,12 @@ interface Props
 {
     path: {
         path: string;
+        from: { x: number; y: number };
         to: { x: number; y: number };
         side: 'bottom' | 'top' | 'left' | 'right';
     };
     color?: string;
+    label?: string;
 }
 const props = defineProps<Props>();
 
@@ -30,6 +32,12 @@ if (props.color !== undefined) {
 </script>
 
 <template>
-    <g :class="classes" :style="{ '--canvas-color': props?.color?.startsWith('#') ? hexToRgb(props.color) : undefined }"><path class="canvas-display-path" :d="props.path.path"></path></g>
-    <g :class="classes" :style="{ '--canvas-color': props?.color?.startsWith('#') ? hexToRgb(props.color) : undefined, transform: `translate(${props.path.to.x}px, ${props.path.to.y}px) rotate(${rotation[props.path.side]}deg)` }"><polygon class="canvas-path-end" points="0,0 6.5,10.4 -6.5,10.4"></polygon></g>
+    <g :class="classes"
+        :style="{ '--canvas-color': props?.color?.startsWith('#') ? hexToRgb(props.color) : undefined }">
+        <path class="canvas-display-path" :d="props.path.path"></path>
+    </g>
+    <g :class="classes"
+        :style="{ '--canvas-color': props?.color?.startsWith('#') ? hexToRgb(props.color) : undefined, transform: `translate(${props.path.to.x}px, ${props.path.to.y}px) rotate(${rotation[props.path.side]}deg)` }">
+        <polygon class="canvas-path-end" points="0,0 6.5,10.4 -6.5,10.4"></polygon>
+    </g>
 </template>
\ No newline at end of file
diff --git a/components/CanvasNode.vue b/components/CanvasNode.vue
index 9be16ae..187bd53 100644
--- a/components/CanvasNode.vue
+++ b/components/CanvasNode.vue
@@ -36,17 +36,14 @@ if(props.node.color !== undefined)
 </script>
 
 <template>
-    <div class="canvas-node" :class="classes"
-        :style="{transform: `translate(${node.x}px, ${node.y}px)`, width: `${node.width}px`, height: `${node.height}px`, '--canvas-node-width': `${node.width}px`, '--canvas-node-height': `${node.height}px`, '--canvas-color': props.node?.color?.startsWith('#') ? hexToRgb(props.node.color) : undefined}">
+    <div class="canvas-node" :class="classes" :style="{transform: `translate(${node.x}px, ${node.y}px)`, width: `${node.width}px`, height: `${node.height}px`, '--canvas-node-width': `${node.width}px`, '--canvas-node-height': `${node.height}px`, '--canvas-color': props.node?.color?.startsWith('#') ? hexToRgb(props.node.color) : undefined}">
         <div class="canvas-node-container">
             <template v-if="props.node.type === 'group' || props.zoom > Math.min(0.38, 1000 / size)">
                 <div class="canvas-node-content markdown-embed">
-                    <div v-if="props.node.text?.body?.children?.length > 0"
-                        class="markdown-embed-content node-insert-event" style="">
-                        <div
-                            class="markdown-preview-view markdown-rendered node-insert-event show-indentation-guide allow-fold-headings allow-fold-lists">
+                    <div  v-if="props.node.text?.body?.children?.length > 0" class="markdown-embed-content node-insert-event" style="">
+                        <div class="markdown-preview-view markdown-rendered node-insert-event show-indentation-guide allow-fold-headings allow-fold-lists">
                             <div class="markdown-preview-sizer markdown-preview-section">
-                                <ContentRenderer :value="props.node.text" />
+                                <ContentRenderer :value="props.node.text"/>
                             </div>
                         </div>
                     </div>
@@ -55,9 +52,7 @@ if(props.node.color !== undefined)
             <template v-else>
                 <div class="canvas-node-placeholder">
                     <div class="canvas-icon-placeholder">
-                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
-                            stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
-                            class="svg-icon lucide-align-left">
+                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="svg-icon lucide-align-left">
                             <line x1="21" y1="6" x2="3" y2="6"></line>
                             <line x1="15" y1="12" x2="3" y2="12"></line>
                             <line x1="17" y1="18" x2="3" y2="18"></line>
@@ -66,9 +61,6 @@ if(props.node.color !== undefined)
                 </div>
             </template>
         </div>
-        <div v-if="props.node.type === 'group' && props.node.label !== undefined" class="canvas-group-label"
-            :style="{ transform: 'translate(0, -100%) scale(' + (1 / Math.pow(zoom, 0.8)) + ')' }"
-            :class="{'mod-foreground-dark': darken(getColor(props?.node?.color ?? '')), 'mod-foreground-light': !darken(getColor(props?.node?.color ?? ''))}">
-            {{ props.node.label }}</div>
+        <div v-if="props.node.type === 'group' && props.node.label !== undefined" class="canvas-group-label" :class="{'mod-foreground-dark': darken(getColor(props?.node?.color ?? '')), 'mod-foreground-light': !darken(getColor(props?.node?.color ?? ''))}">{{ props.node.label }}</div>
     </div>
 </template>
\ No newline at end of file
diff --git a/components/CanvasRenderer.client.vue b/components/CanvasRenderer.client.vue
index 46be323..31bdd93 100644
--- a/components/CanvasRenderer.client.vue
+++ b/components/CanvasRenderer.client.vue
@@ -146,6 +146,7 @@ function path(from: CanvasNode, fromSide: 'bottom' | 'top' | 'left' | 'right', t
     {
         return {
             path: '',
+            from: {},
             to: {},
             toSide: '',
         }
@@ -158,49 +159,83 @@ function bezier(from: { x: number, y: number }, fromSide: 'bottom' | 'top' | 'le
     const r = Math.hypot(from.x - to.x, from.y - to.y), o = clamp(r / 2, 70, 150), a = edgePos(fromSide, from, o), s = edgePos(toSide, to, o);
     return {
         path: `M${from.x},${from.y} C${a.x},${a.y} ${s.x},${s.y} ${to.x},${to.y}`,
+        from: from,
         to: to,
         side: toSide,
     };
 }
+function labelCenter(from: CanvasNode, fromSide: 'bottom' | 'top' | 'left' | 'right', to: CanvasNode, toSide: 'bottom' | 'top' | 'left' | 'right'): string {
+    const a = mK(getBbox(from), fromSide), l = mK(getBbox(to), toSide);
+    const r = Math.hypot(a.x - l.x, a.y - l.y), o = clamp(r / 2, 70, 150), b = edgePos(fromSide, a, o), s = edgePos(toSide, l, o);
+    const center = getCenter(a, l, b, s, 0.5);
+    return `translate(${center.x}px, ${center.y}px)`;
+}
+function getCenter(n: { x: number, y: number }, i: { x: number, y: number }, r: { x: number, y: number }, o: { x: number, y: number }, e: number): { x: number, y: number } {
+    const a = 1 - e, s = a * a * a, l = 3 * e * a * a, c = 3 * e * e * a, u = e * e * e;
+    return {
+        x: s * n.x + l * r.x + c * o.x + u * i.x,
+        y: s * n.y + l * r.y + c * o.y + u * i.y
+    };
+}
 </script>
 
 <template>
-    <div ref="canvas" @pointerdown="onPointerDown" @wheel.passive="onWheel"
-            @touchstart.prevent="" @dragstart.prevent="" class="canvas-wrapper node-insert-event mod-zoomed-out">
-        <div class="canvas-controls" style="z-index: 421;">
+    <div ref="canvas" @pointerdown="onPointerDown" @wheel.passive="onWheel" @touchstart.prevent="" @dragstart.prevent=""
+        class="canvas-wrapper node-insert-event mod-zoomed-out"
+        :style="{ '--zoom-multiplier': (1 / Math.pow(zoom, 0.7)) }">
+        <div class="canvas-controls" style="z-index: 999;">
             <div class="canvas-control-group">
-                <div @click="zoom = clamp(zoom * 1.1, minZoom, 3)" class="canvas-control-item" aria-label="Zoom in" data-tooltip-position="left">
-                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="svg-icon lucide-plus">
+                <div @click="zoom = clamp(zoom * 1.1, minZoom, 3)" class="canvas-control-item" aria-label="Zoom in"
+                    data-tooltip-position="left">
+                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
+                        stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
+                        class="svg-icon lucide-plus">
                         <path d="M5 12h14"></path>
                         <path d="M12 5v14"></path>
                     </svg>
                 </div>
                 <div @click="zoom = 1" class="canvas-control-item" aria-label="Reset zoom" data-tooltip-position="left">
-                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="svg-icon lucide-rotate-cw">
+                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
+                        stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
+                        class="svg-icon lucide-rotate-cw">
                         <path d="M21 12a9 9 0 1 1-9-9c2.52 0 4.93 1 6.74 2.74L21 8"></path>
                         <path d="M21 3v5h-5"></path>
                     </svg>
                 </div>
                 <div @click="reset" class="canvas-control-item" aria-label="Zoom to fit" data-tooltip-position="left">
-                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="svg-icon lucide-maximize">
+                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
+                        stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
+                        class="svg-icon lucide-maximize">
                         <path d="M8 3H5a2 2 0 0 0-2 2v3"></path>
                         <path d="M21 8V5a2 2 0 0 0-2-2h-3"></path>
                         <path d="M3 16v3a2 2 0 0 0 2 2h3"></path>
                         <path d="M16 21h3a2 2 0 0 0 2-2v-3"></path>
                     </svg>
                 </div>
-                <div @click="zoom  = clamp(zoom * 0.9, minZoom, 3)" class="canvas-control-item" aria-label="Zoom out" data-tooltip-position="left">
-                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="svg-icon lucide-minus">
+                <div @click="zoom  = clamp(zoom * 0.9, minZoom, 3)" class="canvas-control-item" aria-label="Zoom out"
+                    data-tooltip-position="left">
+                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
+                        stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
+                        class="svg-icon lucide-minus">
                         <path d="M5 12h14"></path>
                     </svg>
                 </div>
             </div>
         </div>
-        <div class="canvas" :style="{transform: `translate(${centerX}px, ${centerY}px) scale(${zoom}) translate(${dispX}px, ${dispY}px)`}">
+        <div class="canvas"
+            :style="{transform: `translate(${centerX}px, ${centerY}px) scale(${zoom}) translate(${dispX}px, ${dispY}px)`}">
             <svg class="canvas-edges">
-                <CanvasEdge v-for="edge of props.canvas.body.edges" :key="edge.id" :path="path(getNode(edge.fromNode)!, edge.fromSide, getNode(edge.toNode)!, edge.toSide)" :color="edge.color"/>
+                <CanvasEdge v-for="edge of props.canvas.body.edges" :key="edge.id"
+                    :path="path(getNode(edge.fromNode)!, edge.fromSide, getNode(edge.toNode)!, edge.toSide)"
+                    :color="edge.color" :label="edge.label" />
             </svg>
             <CanvasNode v-for="node of props.canvas.body.nodes" :key="node.id" :node="node" :zoom="zoom" />
+            <template v-for="edge of props.canvas.body.edges">
+                <div :key="edge.id" v-if="edge.label" class="canvas-path-label-wrapper"
+                    :style="{ transform: labelCenter(getNode(edge.fromNode)!, edge.fromSide, getNode(edge.toNode)!, edge.toSide) }">
+                    <div class="canvas-path-label">{{ edge.label }}</div>
+                </div>
+            </template>
         </div>
     </div>
 </template>
\ No newline at end of file
diff --git a/nuxt.config.ts b/nuxt.config.ts
index 75298c6..94d6767 100644
--- a/nuxt.config.ts
+++ b/nuxt.config.ts
@@ -8,6 +8,9 @@ export default defineNuxtConfig({
     documentDriven: {
       injectPage: true,
     },
+    ignores: [
+      '98.Privé'
+    ],
     contentHead: true,
     markdown: {
       toc: { depth: 3, searchDepth: 3 },