attach data-name attributes to SVG shapes for interactive diagrams

Author: skanaar

dist/nomnoml.js

@@ -486,6 +486,7 @@ var nomnoml;
                 g.setLineDash([dash, dash]);
             }
             var drawNode = nomnoml.visualizers[style.visual] || nomnoml.visualizers["class"];
+            g.setData('name', node.name);
             drawNode(node, x, y, config, g);
             g.setLineDash([]);
             g.save();
@@ -733,6 +734,7 @@ var nomnoml;
                 measureText: function () { return ctx.measureText.apply(ctx, arguments); },
                 moveTo: function () { return ctx.moveTo.apply(ctx, arguments); },
                 restore: function () { return ctx.restore.apply(ctx, arguments); },
+                setData: function (name, value) { },
                 save: function () { return ctx.save.apply(ctx, arguments); },
                 scale: function () { return ctx.scale.apply(ctx, arguments); },
                 setLineDash: function () { return ctx.setLineDash.apply(ctx, arguments); },
@@ -766,7 +768,8 @@ var nomnoml;
                 fill: 'none',
                 textAlign: 'left',
                 font: 'Helvetica, Arial, sans-serif',
-                fontSize: 12
+                fontSize: 12,
+                attributes: {}
             };
             var states = [initialState];
             var elements = [];
@@ -803,7 +806,18 @@ var nomnoml;
                 };
             }
             function State(dx, dy) {
-                return { x: dx, y: dy, stroke: null, strokeWidth: null, fill: null, textAlign: null, dashArray: 'none', font: null, fontSize: null };
+                return {
+                    x: dx,
+                    y: dy,
+                    stroke: null,
+                    strokeWidth: null,
+                    fill: null,
+                    textAlign: null,
+                    dashArray: 'none',
+                    font: null,
+                    fontSize: null,
+                    attributes: null
+                };
             }
             function trans(coord, axis) {
                 states.forEach(function (t) { coord += t[axis]; });
@@ -828,6 +842,10 @@ var nomnoml;
             }
             function newElement(type, attr, content) {
                 var element = Element(type, attr, content);
+                var extraData = lastDefined('attributes');
+                for (var key in extraData) {
+                    element.attr['data-' + key] = extraData[key];
+                }
                 elements.push(element);
                 return element;
             }
@@ -836,9 +854,7 @@ var nomnoml;
                 height: function () { return 0; },
                 clear: function () { },
                 circle: function (p, r) {
-                    var element = Element('circle', { r: r, cx: tX(p.x), cy: tY(p.y) });
-                    elements.push(element);
-                    return element;
+                    return newElement('circle', { r: r, cx: tX(p.x), cy: tY(p.y) });
                 },
                 ellipse: function (center, w, h, start, stop) {
                     if (stop) {
@@ -929,6 +945,9 @@ var nomnoml;
                 save: function () {
                     states.push(State(0, 0));
                 },
+                setData: function (name, value) {
+                    lastDefined('attributes')[name] = value;
+                },
                 scale: function () { },
                 setLineDash: function (d) {
                     last(states).dashArray = (d.length === 0) ? 'none' : d[0] + ' ' + d[1];

src/Graphics.ts

@@ -34,6 +34,7 @@ interface Graphics {
   moveTo(x: number, y: number): void
   restore(): void
   save(): void
+  setData(name: string, value: string): void
   scale(x: number, y: number): void
   setLineDash(d: number[]): void
   stroke(): void

src/renderer.ts

@@ -41,6 +41,7 @@ namespace nomnoml {
 				g.setLineDash([dash, dash])
 			}
 			var drawNode = nomnoml.visualizers[style.visual] || nomnoml.visualizers.class
+			g.setData('name', node.name)
 			drawNode(node, x, y, config, g)
 			g.setLineDash([])
 

src/skanaar.canvas.ts

@@ -133,6 +133,7 @@ namespace nomnoml.skanaar {
 			measureText: function (){ return ctx.measureText.apply(ctx, arguments) },
 			moveTo:      function (){ return ctx.moveTo.apply(     ctx, arguments) },
 			restore:     function (){ return ctx.restore.apply(    ctx, arguments) },
+			setData:     function (name: string, value: string) {},
 			save:        function (){ return ctx.save.apply(       ctx, arguments) },
 			scale:       function (){ return ctx.scale.apply(      ctx, arguments) },
 			setLineDash: function (){ return ctx.setLineDash.apply(ctx, arguments) },

src/skanaar.svg.ts

@@ -10,6 +10,7 @@ namespace nomnoml.skanaar {
 		textAlign: string|null
 		font: string|null
 		fontSize: number|null
+		attributes: any|null
 	}
 
 	interface SvgGraphics extends Graphics {
@@ -37,7 +38,8 @@ namespace nomnoml.skanaar {
 			fill: 'none',
 			textAlign: 'left',
 			font: 'Helvetica, Arial, sans-serif',
-			fontSize: 12
+			fontSize: 12,
+			attributes: {}
 		}
 		var states = [initialState]
 		var elements: any[] = []
@@ -77,7 +79,18 @@ namespace nomnoml.skanaar {
 		}
 
 		function State(dx: number, dy: number): SvgState {
-			return { x: dx, y: dy, stroke: null, strokeWidth: null, fill: null, textAlign: null, dashArray:'none', font: null, fontSize: null }
+			return {
+				x: dx,
+				y: dy,
+				stroke: null,
+				strokeWidth: null,
+				fill: null,
+				textAlign: null,
+				dashArray:'none',
+				font: null,
+				fontSize: null,
+				attributes: null
+			}
 		}
 
 		function trans(coord: number, axis: 'x'|'y'){
@@ -106,6 +119,10 @@ namespace nomnoml.skanaar {
 
 		function newElement(type: string, attr: any, content?: string) {
 			var element = Element(type, attr, content)
+			var extraData = lastDefined('attributes')
+			for(var key in extraData) {
+				element.attr['data-'+key] = extraData[key]
+			}
 			elements.push(element)
 			return element
 		}
@@ -115,9 +132,7 @@ namespace nomnoml.skanaar {
 			height: function (){ return 0 },
 			clear: function (){},
 			circle: function (p: Vec, r: number){
-				var element = Element('circle', {r: r, cx: tX(p.x), cy: tY(p.y)})
-				elements.push(element)
-				return element
+				return newElement('circle', {r: r, cx: tX(p.x), cy: tY(p.y)})
 			},
 			ellipse: function (center, w, h, start, stop){
 				if (stop) {
@@ -213,6 +228,9 @@ namespace nomnoml.skanaar {
 			save: function (){
 				states.push(State(0, 0))
 			},
+			setData: function (name: string, value: string) {
+				lastDefined('attributes')[name] = value
+			},
 			scale: function (){},
 			setLineDash: function (d){
 				last(states).dashArray = (d.length === 0) ? 'none' : d[0] + ' ' + d[1]