diff --git a/editor/js/editor.js b/editor/js/editor.js index 2ac4c8f6d747d1f942412bcbfd790eb6da9d7a01..2fcb92315137a4953d144faa7fa168b23d052129 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 8811761c918115da2106770847f715b834fd9219..d779f3dd07b89a439c9c0289176fc3990b5d19e5 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 0313a243094e5edc59b0d506dea7c59984bec820..e3fade0276387f02f241a2fa77797eef2f48392e 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.'); }