From c584c73a6bf4b804a4c5d6cfdcb50b3ed308e5e3 Mon Sep 17 00:00:00 2001
From: "Thomas F. K. Jorna" <thomasfkjorna@gmail.com>
Date: Sun, 12 Sep 2021 21:49:46 +0200
Subject: feat: #70 label text wrapping

---
 pages/index.tsx | 17 +++++++++++------
 1 file changed, 11 insertions(+), 6 deletions(-)

(limited to 'pages/index.tsx')

diff --git a/pages/index.tsx b/pages/index.tsx
index d4235d7..b13d13f 100644
--- a/pages/index.tsx
+++ b/pages/index.tsx
@@ -38,7 +38,7 @@ import { ContextMenu } from '../components/contextmenu'
 
 import { ThemeContext, ThemeContextProps } from '../util/themecontext'
 import SpriteText from 'three-spritetext'
-
+import wrap from 'word-wrap'
 import ReconnectingWebSocket from 'reconnecting-websocket'
 
 // react-force-graph fails on import when server-rendered
@@ -1005,10 +1005,7 @@ export const Graph = forwardRef(function (props: GraphProps, graphRef: any) {
       }
 
       const nodeTitle = (node as OrgRoamNode).title!
-      const label =
-        nodeTitle.length > visuals.labelLength
-          ? nodeTitle.substring(0, visuals.labelLength) + '...'
-          : nodeTitle
+      const label = nodeTitle.substring(0, visuals.labelLength)
       const fontSize = visuals.labelFontSize / (0.75 * Math.min(Math.max(0.5, globalScale), 3))
       const textWidth = ctx.measureText(label).width
       const bckgDimensions = [textWidth * 1.1, fontSize].map((n) => n + fontSize * 0.5) as [
@@ -1049,7 +1046,15 @@ export const Graph = forwardRef(function (props: GraphProps, graphRef: any) {
       const labelText = hexToRGBA(labelTextColor, textOpacity)
       ctx.fillStyle = labelText
       ctx.font = `${fontSize}px Sans-Serif`
-      ctx.fillText(label, node.x!, node.y! + nodeS)
+      const wordsArray = wrap(label, { width: visuals.labelWordWrap }).split('\n')
+
+      const truncatedWords =
+        nodeTitle.length > visuals.labelLength
+          ? [...wordsArray.slice(0, -1), `${wordsArray.slice(-1)}...`]
+          : wordsArray
+      truncatedWords.forEach((word, index) => {
+        ctx.fillText(word, node.x!, node.y! + nodeS + visuals.labelLineSpace * fontSize * index)
+      })
     },
     nodeCanvasObjectMode: () => 'after',
 
-- 
cgit v1.2.3

