Added node labels to default render

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) => {

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
     }
 

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.');
         }