GUI -- Completed Show Summary panel.
- added GlyphService.addGlyph().
- added SvgUtilService.translate().
Change-Id: I0bbc51a8f1d9c24b8b4f1377236570070da6f160
diff --git a/web/gui/src/main/webapp/app/fw/svg/glyph.css b/web/gui/src/main/webapp/app/fw/svg/glyph.css
new file mode 100644
index 0000000..8291065
--- /dev/null
+++ b/web/gui/src/main/webapp/app/fw/svg/glyph.css
@@ -0,0 +1,34 @@
+/*
+ * Copyright 2014,2015 Open Networking Laboratory
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+/*
+ ONOS GUI -- Glyph Service -- CSS file
+ */
+
+svg .glyph {
+ stroke: none;
+ fill-rule: evenodd;
+}
+
+.light svg .glyph,
+.dark svg .glyph.overlay {
+ fill: black;
+}
+
+.dark svg .glyph,
+.light svg .glyph.overlay {
+ fill: white;
+}
diff --git a/web/gui/src/main/webapp/app/fw/svg/glyph.js b/web/gui/src/main/webapp/app/fw/svg/glyph.js
index 07c7d0b..f85b697 100644
--- a/web/gui/src/main/webapp/app/fw/svg/glyph.js
+++ b/web/gui/src/main/webapp/app/fw/svg/glyph.js
@@ -20,9 +20,11 @@
(function () {
'use strict';
- var $log,
- fs,
- glyphs = d3.map(),
+ // injected references
+ var $log, fs, sus;
+
+ // internal state
+ var glyphs = d3.map(),
msgGS = 'GlyphService.';
// ----------------------------------------------------------------------
@@ -133,78 +135,102 @@
// ----------------------------------------------------------------------
+ function clear() {
+ // start with a fresh map
+ glyphs = d3.map();
+ }
+
+ function init() {
+ clear();
+ register(birdViewBox, birdData);
+ register(glyphViewBox, glyphData);
+ register(badgeViewBox, badgeData);
+ }
+
+ function register(viewBox, data, overwrite) {
+ var dmap = d3.map(data),
+ dups = [],
+ ok;
+
+ dmap.forEach(function (key, value) {
+ if (!overwrite && glyphs.get(key)) {
+ dups.push(key);
+ } else {
+ glyphs.set(key, {id: key, vb: viewBox, d: value});
+ }
+ });
+ ok = (dups.length == 0);
+ if (!ok) {
+ dups.forEach(function (id) {
+ $log.warn(msgGS + 'register(): ID collision: "'+id+'"');
+ });
+ }
+ return ok;
+ }
+
+ function ids() {
+ return glyphs.keys();
+ }
+
+ function glyph(id) {
+ return glyphs.get(id);
+ }
+
+ // Note: defs should be a D3 selection of a single <defs> element
+ function loadDefs(defs, glyphIds, noClear) {
+ var list = fs.isA(glyphIds) || ids(),
+ clearCache = !noClear;
+
+ if (clearCache) {
+ // remove all existing content
+ defs.html(null);
+ }
+
+ // load up the requested glyphs
+ list.forEach(function (id) {
+ var g = glyph(id);
+ if (g) {
+ if (noClear) {
+ // quick exit if symbol is already present
+ if (defs.select('symbol#' + g.id).size() > 0) {
+ return;
+ }
+ }
+ defs.append('symbol')
+ .attr({ id: g.id, viewBox: g.vb })
+ .append('path').attr('d', g.d);
+ }
+ });
+ }
+
+ function addGlyph(elem, glyphId, size, overlay, trans) {
+ var sz = size || 40,
+ ovr = !!overlay,
+ xns = fs.isA(trans),
+ atr = {
+ width: sz,
+ height: sz,
+ 'class': 'glyph',
+ 'xlink:href': '#' + glyphId
+ };
+
+ if (xns) {
+ atr.transform = sus.translate(trans);
+ }
+ elem.append('use').attr(atr).classed('overlay', ovr);
+
+ }
+
+ // ----------------------------------------------------------------------
+
angular.module('onosSvg')
- .factory('GlyphService', ['$log', 'FnService', function (_$log_, _fs_) {
+ .factory('GlyphService',
+ ['$log', 'FnService', 'SvgUtilService',
+
+ function (_$log_, _fs_, _sus_) {
$log = _$log_;
fs = _fs_;
-
- function clear() {
- // start with a fresh map
- glyphs = d3.map();
- }
-
- function init() {
- clear();
- register(birdViewBox, birdData);
- register(glyphViewBox, glyphData);
- register(badgeViewBox, badgeData);
- }
-
- function register(viewBox, data, overwrite) {
- var dmap = d3.map(data),
- dups = [],
- ok;
-
- dmap.forEach(function (key, value) {
- if (!overwrite && glyphs.get(key)) {
- dups.push(key);
- } else {
- glyphs.set(key, {id: key, vb: viewBox, d: value});
- }
- });
- ok = (dups.length == 0);
- if (!ok) {
- dups.forEach(function (id) {
- $log.warn(msgGS + 'register(): ID collision: "'+id+'"');
- });
- }
- return ok;
- }
-
- function ids() {
- return glyphs.keys();
- }
-
- function glyph(id) {
- return glyphs.get(id);
- }
-
- // Note: defs should be a D3 selection of a single <defs> element
- function loadDefs(defs, glyphIds, noClear) {
- var list = fs.isA(glyphIds) || ids(),
- clearCache = !noClear;
-
- if (clearCache) {
- // remove all existing content
- defs.html(null);
- }
-
- // load up the requested glyphs
- list.forEach(function (id) {
- var g = glyph(id);
- if (g) {
- if (noClear) {
- // quick exit if symbol is already present
- if (defs.select('symbol#' + g.id).size() > 0) {
- return;
- }
- }
- defs.append('symbol')
- .attr({ id: g.id, viewBox: g.vb })
- .append('path').attr('d', g.d);
- }
- });
- }
+ sus = _sus_;
return {
clear: clear,
@@ -212,8 +238,10 @@
register: register,
ids: ids,
glyph: glyph,
- loadDefs: loadDefs
+ loadDefs: loadDefs,
+ addGlyph: addGlyph
};
- }]);
+ }]
+ );
}());
diff --git a/web/gui/src/main/webapp/app/fw/svg/svgUtil.js b/web/gui/src/main/webapp/app/fw/svg/svgUtil.js
index a0e0fff..1f5adc0 100644
--- a/web/gui/src/main/webapp/app/fw/svg/svgUtil.js
+++ b/web/gui/src/main/webapp/app/fw/svg/svgUtil.js
@@ -136,10 +136,18 @@
$log.warn('SvgUtilService: cat7 -- To Be Implemented');
}
+ function translate(x, y) {
+ if (fs.isA(x) && x.length === 2 && !y) {
+ return 'translate(' + x[0] + ',' + x[1] + ')';
+ }
+ return 'translate(' + x + ',' + y + ')';
+ }
+
return {
createDragBehavior: createDragBehavior,
loadGlow: loadGlow,
- cat7: cat7
+ cat7: cat7,
+ translate: translate
};
}]);
}());