Changing some visuals

app.vue

@@ -5,7 +5,7 @@ provide('tags/descriptions', tags);
 </script>
 
 <template>
-  <div class="published-container print is-readable-line-width has-navigation has-graph has-outline" style="">
+  <div class="published-container print has-navigation has-outline" style="">
     <div class="site-body">
       <LeftComponent />
       <MainComponent />

assets/global.css

@@ -2,7 +2,7 @@
 /* -------------------------- */
 .published-container {
     /* Page */
-    --page-width: 1000px;
+    --page-width: 1600px;
     --page-side-padding: 32px;
     /* Page titles */
     --page-title-color: var(--h1-color);
@@ -26,7 +26,7 @@
     --graph-height: 260px;
     /* Sidebars */
     --sidebar-font-size: 14px;
-    --sidebar-left-width: 280px;
+    --sidebar-left-width: 360px;
     --sidebar-left-background: var(--background-primary);
     --sidebar-left-border-width: 1px;
     --sidebar-left-border-color: var(--background-modifier-border);
@@ -3825,16 +3825,8 @@ body {
     width: 100%;
 }
 
-.published-container.is-readable-line-width .site-body-left-column {
-    flex-basis: calc((100vw - var(--page-width)) / 2);
-}
-
 .published-container.is-readable-line-width .site-body-right-column {
-    width: calc((100vw - var(--page-width)) / 2);
+    width: calc(100vw - var(--page-width) - var(--sidebar-left-width));
-}
-
-.canvas-node-container .markdown-preview-sizer {
-    max-width: initial !important;
 }
 
 .published-container.is-readable-line-width .markdown-preview-sizer {
@@ -4155,7 +4147,7 @@ body {
     width: var(--sidebar-left-width);
     flex: 0 0 var(--sidebar-left-width);
     min-width: var(--sidebar-left-width);
-    padding: 32px 0 0 18px;
+    padding: 32px 18px 0 36px;
     position: relative;
     display: flex;
     background-color: var(--sidebar-left-background);
@@ -4170,7 +4162,7 @@ body {
 .site-body-left-column .site-body-left-column-inner {
     width: var(--sidebar-left-width);
     max-width: 100%;
-    margin-left: auto;
+    margin-right: auto;
     height: 100%;
     display: flex;
     flex-direction: column;

components/CanvasNode.vue

@@ -26,6 +26,7 @@ function darken(rgb: string): boolean
 const props = defineProps<Props>();
 
 const classes: any = { 'canvas-node-group': props.node.type === 'group', 'is-themed': props.node.color !== undefined, 'mod-canvas-color-custom': (props.node?.color?.startsWith('#') ?? false) };
+const size = Math.max(props.node.width, props.node.height);
 
 if(props.node.color !== undefined)
 {
@@ -35,12 +36,15 @@ 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 > 0.33">
+            <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 v-if="props.node.text?.body?.children?.length > 0"
-                        <div class="markdown-preview-view markdown-rendered node-insert-event show-indentation-guide allow-fold-headings allow-fold-lists">
+                        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" />
                             </div>
@@ -51,7 +55,9 @@ 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>
@@ -60,6 +66,9 @@ if(props.node.color !== undefined)
                 </div>
             </template>
         </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 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>
 </template>

components/CanvasRenderer.client.vue

@@ -14,10 +14,9 @@ let centerX = ref(0), centerY = ref(0), canvas = ref<HTMLDivElement>();
 let minX = ref(+Infinity), minY = ref(+Infinity), maxX = ref(-Infinity), maxY = ref(-Infinity);
 let bbox = ref<DOMRect>();
 
-onMounted(async () => {
-    await nextTick();
 let _minX = +Infinity, _minY = +Infinity, _maxX = -Infinity, _maxY = -Infinity;
 
+onMounted(async () => {
     props.canvas.body.nodes.forEach((e) => {
         _minX = Math.min(_minX, e.x);
         _minY = Math.min(_minY, e.y);
@@ -25,23 +24,35 @@ onMounted(async () => {
         _maxY = Math.max(_maxY, e.y + e.height);
     });
 
+    await nextTick();
+
+    window.addEventListener('resize', onResize);
+    onResize();
+
+    dispX.value = -(_maxX + _minX) / 2;
+    dispY.value = -(_maxY + _minY) / 2;
+
+    zoom.value = minZoom.value;
+});
+
+onUnmounted(() => {
+    window.removeEventListener('resize', onResize);
+})
+
+const onResize = (event?: Event) => {
     minX.value = _minX = _minX - 32;
     minY.value = _minY = _minY - 32;
     maxX.value = _maxX = _maxX + 32;
     maxY.value = _maxY = _maxY + 32;
 
-    minZoom.value = zoom.value = Math.min((canvas.value?.clientWidth ?? 0) / (_maxX - _minX), (canvas.value?.clientHeight ?? 0) / (_maxY - _minY)) * 0.9;
+    minZoom.value = Math.min((canvas.value?.clientWidth ?? 0) / (_maxX - _minX), (canvas.value?.clientHeight ?? 0) / (_maxY - _minY)) * 0.9;
+    zoom.value = clamp(zoom.value, minZoom.value, 3);
 
     bbox.value = canvas.value?.getBoundingClientRect();
 
-    await nextTick();
-
     centerX.value = (bbox.value?.width ?? 0) / 2;
     centerY.value = (bbox.value?.height ?? 0) / 2;
-
+}
-    dispX.value = -(_maxX + _minX) / 2;
-    dispY.value = -(_maxY + _minY) / 2;
-})
 
 const onPointerDown = (event: PointerEvent) => {
     if (event.isPrimary === false) return;
@@ -72,12 +83,7 @@ const onPointerUp = (event: PointerEvent) => {
 }
 
 const onWheel = (event: WheelEvent) => {
-    zoom.value *= 1 + (event.deltaY * -0.001);
+    zoom.value  = clamp(zoom.value * 1 + (event.deltaY * -0.001), minZoom.value, 3);
-    
-    if (zoom.value > 3)
-        zoom.value = 3;
-    if (zoom.value < minZoom.value)
-        zoom.value = minZoom.value;
 }
 
 const reset = (_: MouseEvent) => {

pages/[...slug].vue

@@ -6,7 +6,6 @@ function toggleLeftPanel(_: Event) {
 </script>
 
 <script setup lang="ts">
-
 const { page } = useContent()
 useContentHead(page);
 
@@ -20,6 +19,8 @@ onMounted(() => {
     icon = document.querySelector('.site-header .clickable-icon');
     icon?.removeEventListener('click', toggleLeftPanel);
     icon?.addEventListener('click', toggleLeftPanel);
+
+    document.querySelector(".published-container")?.classList.toggle('is-readable-line-width', !page.value || page.value._type !== 'canvas');
 })
 </script>