GUI -- Augment sprite definitions to include subpaths and fills.

- Added sample segment routing sprite layer.

Change-Id: I531992754632255ca9156b536cb08386816add16

@@ -586,3 +586,18 @@
     fill: #444;
 }
 
+/* fills */
+.light #ov-topo svg #topo-sprites use.fill-gray2 {
+    fill: #eee;
+}
+.dark #ov-topo svg #topo-sprites use.fill-gray2 {
+    fill: #444;
+}
+
+.light #ov-topo svg #topo-sprites use.fill-blue2 {
+    fill: #bce;
+}
+.dark #ov-topo svg #topo-sprites use.fill-blue2 {
+    fill: #447;
+}
+

@@ -58,9 +58,24 @@
         gs.loadDefs(defsElement, ids, true);
     }
 
+    function applyStrokeStyle(s, use) {
+        var style;
+        if (s) {
+            style = {};
+            angular.forEach(s, function (value, key) {
+                style['stroke-' + key] = value;
+            });
+            use.style(style);
+        }
+    }
 
-    function doSprite(spr, def, pmeta) {
-        var c = spr.class || 'gray1',
+    function applyFillClass(f, use) {
+        use.classed('fill-' + f, true);
+    }
+
+    function doSprite(spr, def, pathmeta) {
+        var pmeta = pathmeta[def.path],
+            c = spr.class || 'gray1',
             p = spr.pos || [0,0],
             lab = spr.label,
             dim = def.dim || [40,40],
@@ -69,7 +84,7 @@
             dy = def.labelyoff || 1,
             sc = def.scale,
             xfm = sus.translate(p),
-            g, attr, use, style;
+            g, attr, use;
 
         if (sc) {
             xfm += sus.scale(sc, sc);
@@ -86,13 +101,24 @@
         };
 
         use = g.append('use').attr(attr);
-
-        if (pmeta.s) {
-            style = {};
-            angular.forEach(pmeta.s, function (value, key) {
-                style['stroke-' + key] = value;
+        applyStrokeStyle(pmeta.s, use);
+        applyFillClass(def.fill, use);
+
+
+        // add subpaths if they have been defined
+        if (fs.isA(def.subpaths)) {
+            def.subpaths.forEach(function (v) {
+                pmeta = pathmeta[v.path];
+                attr = {
+                    width: w,
+                    height: h,
+                    'xlink:href': '#' + pmeta.u,
+                    transform: sus.translate(v.pos)
+                };
+                use = g.append('use').attr(attr);
+                applyStrokeStyle(pmeta.s, use);
+                applyFillClass(def.subpathfill, use);
             });
-            use.style(style);
         }
 
         if (lab) {
@@ -188,9 +214,8 @@
 
         if (sprites) {
             sprites.forEach(function (spr) {
-                var def = defs[spr.id],
-                    pmeta = pathmeta[def.path];
-                doSprite(spr, def, pmeta);
+                var def = defs[spr.id];
+                doSprite(spr, def, pathmeta);
             });
         }
 

+{
+  "defn_name": "segmentRouting",
+  "defn_desc": "Schematic of Data Center",
+
+  "paths": [
+    {
+      "tag": "chassis",
+      "stroke": {
+        "width": 3.5
+      },
+      "viewbox": "0 0 120 170",
+      "d": "M10,10h80v150h-80z"
+    },
+    {
+      "tag": "module",
+      "stroke": {
+        "width": 2
+      },
+      "viewbox": "0 0 120 20",
+      "d": "M15,5h70v12h-70z"
+    }
+  ],
+
+  "defn": [
+    {
+      "id": "rack",
+      "path": "chassis",
+      "fill": "gray2",
+      "subpathfill": "blue2",
+      "subpaths": [
+        { "path": "module", "pos": [0, 0]},
+        { "path": "module", "pos": [0, 20]},
+        { "path": "module", "pos": [0, 40]},
+        { "path": "module", "pos": [0, 60]}
+      ],
+      "dim":[120,170]
+    }
+  ],
+
+  "load": {
+    "alpha": 0.9,
+    "sprites": [
+      { "id": "rack", "pos":[300,600], "class":"blue1" },
+      { "id": "rack", "pos":[500,600], "class":"blue1" },
+      { "id": "rack", "pos":[700,600], "class":"blue1" }
+    ],
+    "labels": [
+      { "pos":[550,80], "text":"Segment Routing Demo", "class":"blue1", "size":1.4 }
+    ]
+  }
+}