From c584c73a6bf4b804a4c5d6cfdcb50b3ed308e5e3 Mon Sep 17 00:00:00 2001 From: "Thomas F. K. Jorna" 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') 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