GUI -- implementation and unit test for loading base set of glyphs into GlyphService.
Change-Id: I0c742ab6a58f607a6c3a812767dc26df82f74827
Showing
2 changed files
with
180 additions
and
6 deletions
... | @@ -25,14 +25,117 @@ | ... | @@ -25,14 +25,117 @@ |
25 | var $log, | 25 | var $log, |
26 | glyphs = d3.map(); | 26 | glyphs = d3.map(); |
27 | 27 | ||
28 | + // ---------------------------------------------------------------------- | ||
29 | + // Base set of Glyphs... | ||
30 | + | ||
31 | + var birdViewBox = '352 224 113 112', | ||
32 | + | ||
33 | + birdData = { | ||
34 | + bird: "M427.7,300.4 c-6.9,0.6-13.1,5-19.2,7.1c-18.1,6.2-33.9," + | ||
35 | + "9.1-56.5,4.7c24.6,17.2,36.6,13,63.7,0.1c-0.5,0.6-0.7,1.3-1.3," + | ||
36 | + "1.9c1.4-0.4,2.4-1.7,3.4-2.2c-0.4,0.7-0.9,1.5-1.4,1.9c2.2-0.6," + | ||
37 | + "3.7-2.3,5.9-3.9c-2.4,2.1-4.2,5-6,8c-1.5,2.5-3.1,4.8-5.1,6.9c-1," + | ||
38 | + "1-1.9,1.9-2.9,2.9c-1.4,1.3-2.9,2.5-5.1,2.9c1.7,0.1,3.6-0.3,6.5" + | ||
39 | + "-1.9c-1.6,2.4-7.1,6.2-9.9,7.2c10.5-2.6,19.2-15.9,25.7-18c18.3" + | ||
40 | + "-5.9,13.8-3.4,27-14.2c1.6-1.3,3-1,5.1-0.8c1.1,0.1,2.1,0.3,3.2," + | ||
41 | + "0.5c0.8,0.2,1.4,0.4,2.2,0.8l1.8,0.9c-1.9-4.5-2.3-4.1-5.9-6c-2.3" + | ||
42 | + "-1.3-3.3-3.8-6.2-4.9c-7.1-2.6-11.9,11.7-11.7-5c0.1-8,4.2-14.4," + | ||
43 | + "6.4-22c1.1-3.8,2.3-7.6,2.4-11.5c0.1-2.3,0-4.7-0.4-7c-2-11.2-8.4" + | ||
44 | + "-21.5-19.7-24.8c-1-0.3-1.1-0.3-0.9,0c9.6,17.1,7.2,38.3,3.1,54.2" + | ||
45 | + "C429.9,285.5,426.7,293.2,427.7,300.4z" | ||
46 | + }, | ||
47 | + | ||
48 | + glyphViewBox = '0 0 110 110', | ||
49 | + | ||
50 | + glyphData = { | ||
51 | + unknown: "M35,40a5,5,0,0,1,5-5h30a5,5,0,0,1,5,5v30a5,5,0,0,1-5,5" + | ||
52 | + "h-30a5,5,0,0,1-5-5z", | ||
53 | + | ||
54 | + node: "M15,100a5,5,0,0,1-5-5v-65a5,5,0,0,1,5-5h80a5,5,0,0,1,5,5" + | ||
55 | + "v65a5,5,0,0,1-5,5zM14,22.5l11-11a10,3,0,0,1,10-2h40a10,3,0,0,1," + | ||
56 | + "10,2l11,11zM16,35a5,5,0,0,1,10,0a5,5,0,0,1-10,0z", | ||
57 | + | ||
58 | + switch: "M10,20a10,10,0,0,1,10-10h70a10,10,0,0,1,10,10v70a10,10," + | ||
59 | + "0,0,1-10,10h-70a10,10,0,0,1-10-10zM60,26l12,0,0-8,18,13-18,13,0" + | ||
60 | + "-8-12,0zM60,60l12,0,0-8,18,13-18,13,0-8-12,0zM50,40l-12,0,0-8" + | ||
61 | + "-18,13,18,13,0-8,12,0zM50,74l-12,0,0-8-18,13,18,13,0-8,12,0z", | ||
62 | + | ||
63 | + roadm: "M10,35l25-25h40l25,25v40l-25,25h-40l-25-25zM58,26l12,0,0" + | ||
64 | + "-8,18,13-18,13,0-8-12,0zM58,60l12,0,0-8,18,13-18,13,0-8-12,0z" + | ||
65 | + "M52,40l-12,0,0-8-18,13,18,13,0-8,12,0zM52,74l-12,0,0-8-18,13," + | ||
66 | + "18,13,0-8,12,0z", | ||
67 | + | ||
68 | + endstation: "M10,15a5,5,0,0,1,5-5h65a5,5,0,0,1,5,5v80a5,5,0,0,1" + | ||
69 | + "-5,5h-65a5,5,0,0,1-5-5zM87.5,14l11,11a3,10,0,0,1,2,10v40a3,10," + | ||
70 | + "0,0,1,-2,10l-11,11zM17,19a2,2,0,0,1,2-2h56a2,2,0,0,1,2,2v26a2," + | ||
71 | + "2,0,0,1-2,2h-56a2,2,0,0,1-2-2zM20,20h54v10h-54zM20,33h54v10h" + | ||
72 | + "-54zM42,70a5,5,0,0,1,10,0a5,5,0,0,1-10,0z", | ||
73 | + | ||
74 | + router: "M10,55A45,45,0,0,1,100,55A45,45,0,0,1,10,55M20,50l12,0," + | ||
75 | + "0-8,18,13-18,13,0-8-12,0zM90,50l-12,0,0-8-18,13,18,13,0-8,12,0z" + | ||
76 | + "M50,47l0-12-8,0,13-18,13,18-8,0,0,12zM50,63l0,12-8,0,13,18,13" + | ||
77 | + "-18-8,0,0-12z", | ||
78 | + | ||
79 | + bgpSpeaker: "M10,40a45,35,0,0,1,90,0Q100,77,55,100Q10,77,10,40z" + | ||
80 | + "M50,29l12,0,0-8,18,13-18,13,0-8-12,0zM60,57l-12,0,0-8-18,13," + | ||
81 | + "18,13,0-8,12,0z", | ||
82 | + | ||
83 | + chain: "M60.4,77.6c-4.9,5.2-9.6,11.3-15.3,16.3c-8.6,7.5-20.4,6.8" + | ||
84 | + "-28-0.8c-7.7-7.7-8.4-19.6-0.8-28.4c6.5-7.4,13.5-14.4,20.9-20.9" + | ||
85 | + "c7.5-6.7,19.2-6.7,26.5-0.8c3.5,2.8,4.4,6.1,2.2,8.7c-2.7,3.1" + | ||
86 | + "-5.5,2.5-8.5,0.3c-4.7-3.4-9.7-3.2-14,0.9C37.1,58.7,31,64.8," + | ||
87 | + "25.2,71c-4.2,4.4-4.2,10.6-0.6,14.3c3.7,3.7,9.7,3.7,14.3-0.4" + | ||
88 | + "c2.9-2.5,5.3-5.5,8.3-8c1-0.9,3-1.1,4.4-0.9C54.8,76.3,57.9,77.1," + | ||
89 | + "60.4,77.6zM49.2,32.2c5-5.2,9.7-10.9,15.2-15.7c12.8-11,31.2" + | ||
90 | + "-4.9,34.3,11.2C100,34.2,98.3,40.2,94,45c-6.7,7.4-13.7,14.6" + | ||
91 | + "-21.2,21.2C65.1,73,53.2,72.7,46,66.5c-3.2-2.8-3.9-5.8-1.6-8.4" + | ||
92 | + "c2.6-2.9,5.3-2.4,8.2-0.3c5.2,3.7,10,3.3,14.7-1.1c5.8-5.6,11.6" + | ||
93 | + "-11.3,17.2-17.2c4.6-4.8,4.9-11.1,0.9-15c-3.9-3.9-10.1-3.4-15," + | ||
94 | + "1.2c-3.1,2.9-5.7,7.4-9.3,8.5C57.6,35.3,53,33,49.2,32.2z", | ||
95 | + | ||
96 | + crown: "M99.5,21.6c0,3-2.3,5.4-5.1,5.4c-0.3,0-0.7,0-1-0.1c-1.8," + | ||
97 | + "4-4.8,10-7.2,17.3c-3.4,10.6-0.9,26.2,2.7,27.3C90.4,72,91.3," + | ||
98 | + "75,88,75H22.7c-3.3,0-2.4-3-0.9-3.5c3.6-1.1,6.1-16.7,2.7-27.3" + | ||
99 | + "c-2.4-7.4-5.4-13.5-7.2-17.5c-0.5,0.2-1,0.3-1.6,0.3c-2.8,0" + | ||
100 | + "-5.1-2.4-5.1-5.4c0-3,2.3-5.4,5.1-5.4c2.8,0,5.1,2.4,5.1,5.4c0," + | ||
101 | + "1-0.2,1.9-0.7,2.7c0.7,0.8,1.4,1.6,2.4,2.6c8.8,8.9,11.9,12.7," + | ||
102 | + "18.1,11.7c6.5-1,11-8.2,13.3-14.1c-2-0.8-3.3-2.7-3.3-5.1c0-3," + | ||
103 | + "2.3-5.4,5.1-5.4c2.8,0,5.1,2.4,5.1,5.4c0,2.5-1.6,4.5-3.7,5.2" + | ||
104 | + "c2.3,5.9,6.8,13,13.2,14c6.2,1,9.3-2.7,18.1-11.7c0.7-0.7,1.4" + | ||
105 | + "-1.5,2-2.1c-0.6-0.9-1-2-1-3.1c0-3,2.3-5.4,5.1-5.4C97.2,16.2," + | ||
106 | + "99.5,18.6,99.5,21.6zM92,87.9c0,2.2-1.7,4.1-3.8,4.1H22.4c" + | ||
107 | + "-2.1,0-4.4-1.9-4.4-4.1v-3.3c0-2.2,2.3-4.5,4.4-4.5h65.8c2.1," + | ||
108 | + "0,3.8,2.3,3.8,4.5V87.9z" | ||
109 | + }, | ||
110 | + | ||
111 | + badgeViewBox = '0 0 10 10', | ||
112 | + | ||
113 | + badgeData = { | ||
114 | + uiAttached: "M2,2.5a.5,.5,0,0,1,.5-.5h5a.5,.5,0,0,1,.5,.5v3" + | ||
115 | + "a.5,.5,0,0,1-.5,.5h-5a.5,.5,0,0,1-.5-.5zM2.5,2.8a.3,.3,0,0,1," + | ||
116 | + ".3-.3h4.4a.3,.3,0,0,1,.3,.3v2.4a.3,.3,0,0,1-.3,.3h-4.4" + | ||
117 | + "a.3,.3,0,0,1-.3-.3zM2,6.55h6l1,1.45h-8z" | ||
118 | + }; | ||
119 | + | ||
120 | + // ---------------------------------------------------------------------- | ||
121 | + | ||
122 | + function reg(vbox, data) { | ||
123 | + d3.map(data).keys().forEach(function (key) { | ||
124 | + glyphs.set(key, {id: key, vb: vbox, d: data[key]}); | ||
125 | + }); | ||
126 | + } | ||
127 | + | ||
128 | + | ||
28 | angular.module('onosSvg') | 129 | angular.module('onosSvg') |
29 | .factory('GlyphService', ['$log', function (_$log_) { | 130 | .factory('GlyphService', ['$log', function (_$log_) { |
30 | $log = _$log_; | 131 | $log = _$log_; |
31 | 132 | ||
32 | - | ||
33 | function init() { | 133 | function init() { |
34 | - // TODO: load the core set of glyphs | 134 | + // start with a fresh map |
35 | - | 135 | + glyphs = d3.map(); |
136 | + reg(birdViewBox, birdData); | ||
137 | + reg(glyphViewBox, glyphData); | ||
138 | + reg(badgeViewBox, badgeData); | ||
36 | } | 139 | } |
37 | 140 | ||
38 | function register(viewBox, data, overwrite) { | 141 | function register(viewBox, data, overwrite) { |
... | @@ -44,6 +147,10 @@ | ... | @@ -44,6 +147,10 @@ |
44 | return glyphs.keys(); | 147 | return glyphs.keys(); |
45 | } | 148 | } |
46 | 149 | ||
150 | + function glyph(id) { | ||
151 | + return glyphs.get(id); | ||
152 | + } | ||
153 | + | ||
47 | function loadDefs(defs) { | 154 | function loadDefs(defs) { |
48 | // TODO: clear defs element, then load all glyph definitions | 155 | // TODO: clear defs element, then load all glyph definitions |
49 | 156 | ||
... | @@ -53,6 +160,7 @@ | ... | @@ -53,6 +160,7 @@ |
53 | init: init, | 160 | init: init, |
54 | register: register, | 161 | register: register, |
55 | ids: ids, | 162 | ids: ids, |
163 | + glyph: glyph, | ||
56 | loadDefs: loadDefs | 164 | loadDefs: loadDefs |
57 | }; | 165 | }; |
58 | }]); | 166 | }]); | ... | ... |
... | @@ -22,6 +22,10 @@ | ... | @@ -22,6 +22,10 @@ |
22 | describe('factory: fw/svg/glyph.js', function() { | 22 | describe('factory: fw/svg/glyph.js', function() { |
23 | var $log, fs, gs; | 23 | var $log, fs, gs; |
24 | 24 | ||
25 | + var vbBird = '352 224 113 112', | ||
26 | + vbGlyph = '0 0 110 110', | ||
27 | + vbBadge = '0 0 10 10'; | ||
28 | + | ||
25 | beforeEach(module('onosUtil', 'onosSvg')); | 29 | beforeEach(module('onosUtil', 'onosSvg')); |
26 | 30 | ||
27 | beforeEach(inject(function (_$log_, FnService, GlyphService) { | 31 | beforeEach(inject(function (_$log_, FnService, GlyphService) { |
... | @@ -34,11 +38,73 @@ describe('factory: fw/svg/glyph.js', function() { | ... | @@ -34,11 +38,73 @@ describe('factory: fw/svg/glyph.js', function() { |
34 | expect(gs).toBeDefined(); | 38 | expect(gs).toBeDefined(); |
35 | }); | 39 | }); |
36 | 40 | ||
37 | - it('should define four functions', function () { | 41 | + it('should define api functions', function () { |
38 | expect(fs.areFunctions(gs, [ | 42 | expect(fs.areFunctions(gs, [ |
39 | - 'init', 'register', 'ids', 'loadDefs' | 43 | + 'init', 'register', 'ids', 'glyph', 'loadDefs' |
40 | ])).toBeTruthy(); | 44 | ])).toBeTruthy(); |
41 | }); | 45 | }); |
42 | 46 | ||
43 | - // TODO: unit tests for glyph functions | 47 | + it('should start with no glyphs loaded', function () { |
48 | + expect(gs.ids()).toEqual([]); | ||
49 | + }); | ||
50 | + | ||
51 | + it('should load the base set of glyphs', function () { | ||
52 | + gs.init(); | ||
53 | + expect(gs.ids().length).toEqual(11); | ||
54 | + }); | ||
55 | + | ||
56 | + function verifyGlyphLoaded(id, vbox, prefix) { | ||
57 | + var glyph = gs.glyph(id), | ||
58 | + plen = prefix.length; | ||
59 | + expect(fs.contains(gs.ids(), id)).toBeTruthy(); | ||
60 | + expect(glyph).toBeDefined(); | ||
61 | + expect(glyph.id).toEqual(id); | ||
62 | + expect(glyph.vb).toEqual(vbox); | ||
63 | + expect(glyph.d.slice(0, plen)).toEqual(prefix); | ||
64 | + } | ||
65 | + | ||
66 | + it('should load the bird glyph', function() { | ||
67 | + gs.init(); | ||
68 | + verifyGlyphLoaded('bird', vbBird, 'M427.7,300.4'); | ||
69 | + }); | ||
70 | + it('should load the unknown glyph', function() { | ||
71 | + gs.init(); | ||
72 | + verifyGlyphLoaded('unknown', vbGlyph, 'M35,40a5'); | ||
73 | + }); | ||
74 | + it('should load the node glyph', function() { | ||
75 | + gs.init(); | ||
76 | + verifyGlyphLoaded('node', vbGlyph, 'M15,100a5'); | ||
77 | + }); | ||
78 | + it('should load the switch glyph', function() { | ||
79 | + gs.init(); | ||
80 | + verifyGlyphLoaded('switch', vbGlyph, 'M10,20a10'); | ||
81 | + }); | ||
82 | + it('should load the roadm glyph', function() { | ||
83 | + gs.init(); | ||
84 | + verifyGlyphLoaded('roadm', vbGlyph, 'M10,35l25-'); | ||
85 | + }); | ||
86 | + it('should load the endstation glyph', function() { | ||
87 | + gs.init(); | ||
88 | + verifyGlyphLoaded('endstation', vbGlyph, 'M10,15a5,5'); | ||
89 | + }); | ||
90 | + it('should load the router glyph', function() { | ||
91 | + gs.init(); | ||
92 | + verifyGlyphLoaded('router', vbGlyph, 'M10,55A45,45'); | ||
93 | + }); | ||
94 | + it('should load the bgpSpeaker glyph', function() { | ||
95 | + gs.init(); | ||
96 | + verifyGlyphLoaded('bgpSpeaker', vbGlyph, 'M10,40a45,35'); | ||
97 | + }); | ||
98 | + it('should load the chain glyph', function() { | ||
99 | + gs.init(); | ||
100 | + verifyGlyphLoaded('chain', vbGlyph, 'M60.4,77.6c-'); | ||
101 | + }); | ||
102 | + it('should load the crown glyph', function() { | ||
103 | + gs.init(); | ||
104 | + verifyGlyphLoaded('crown', vbGlyph, 'M99.5,21.6c0'); | ||
105 | + }); | ||
106 | + it('should load the uiAttached glyph', function() { | ||
107 | + gs.init(); | ||
108 | + verifyGlyphLoaded('uiAttached', vbBadge, 'M2,2.5a.5,.5'); | ||
109 | + }); | ||
44 | }); | 110 | }); | ... | ... |
-
Please register or login to post a comment