From 9976fe6afaa626d846a881da13e958fa932b07eb Mon Sep 17 00:00:00 2001
From: mgfcf <m.giller@tu-braunschweig.de>
Date: Sat, 4 Sep 2021 20:05:21 +0200
Subject: [PATCH] Added node labels to default render
---
editor/js/editor.js | 2 +-
editor/js/state.js | 18 +++++++++++++++++-
editor/js/tools/tool.js | 2 +-
3 files changed, 19 insertions(+), 3 deletions(-)
diff --git a/editor/js/editor.js b/editor/js/editor.js
index 2ac4c8f..2fcb923 100644
--- a/editor/js/editor.js
+++ b/editor/js/editor.js
@@ -63,7 +63,7 @@ function load() {
state.onBackgroundClick(event, extractPositions(event))
)
.nodeCanvasObjectMode((node) => state.nodeCanvasObjectMode(node))
- .nodeCanvasObject((node, ctx) => state.nodeCanvasObject(node, ctx))
+ .nodeCanvasObject((node, ctx, globalScale) => state.nodeCanvasObject(node, ctx, globalScale))
.onLinkClick((link) => state.onLinkClick(link));
graph.onChangeCallbacks.push((data) => {
diff --git a/editor/js/state.js b/editor/js/state.js
index 8811761..d779f3d 100644
--- a/editor/js/state.js
+++ b/editor/js/state.js
@@ -124,7 +124,7 @@ export class State extends Tool {
return key.keyCode;
}
- nodeCanvasObject(node, ctx) {
+ nodeCanvasObject(node, ctx, globalScale) {
var toolValue = this.tool.nodeCanvasObject(node, ctx);
if (toolValue !== undefined) {
@@ -156,6 +156,22 @@ export class State extends Tool {
);
}
+ // Draw label
+ const label = node[Graph.NODE_LABEL];
+ const fontSize = 11/globalScale;
+ ctx.font = `${fontSize}px Sans-Serif`;
+ const textWidth = ctx.measureText(label).width;
+ const bckgDimensions = [textWidth, fontSize].map(n => n + fontSize * 0.2); // some padding
+
+ const nodeHeightOffset = Graph.IMAGE_SIZE / 3 + bckgDimensions[1];
+ ctx.fillStyle = 'rgba(0, 0, 0, 0.5)';
+ ctx.fillRect(node.x - bckgDimensions[0] / 2, node.y - bckgDimensions[1] / 2 + nodeHeightOffset, ...bckgDimensions);
+
+ ctx.textAlign = 'center';
+ ctx.textBaseline = 'middle';
+ ctx.fillStyle = 'white';
+ ctx.fillText(label, node.x, node.y + nodeHeightOffset);
+
// TODO: Render label as always visible
}
diff --git a/editor/js/tools/tool.js b/editor/js/tools/tool.js
index 0313a24..e3fade0 100644
--- a/editor/js/tools/tool.js
+++ b/editor/js/tools/tool.js
@@ -54,7 +54,7 @@ export default class Tool {
}
}
- nodeCanvasObject(node, ctx) {
+ nodeCanvasObject(node, ctx, globalScale) {
if (this.warnings) {
console.warn('Method "nodeCanvasObject" not implemented.');
}
--
GitLab