blob: 4bd1f241454309d292764b8396007361df488a13 [file] [log] [blame]
Simon Hunt5a6c60c2016-08-26 17:15:18 -07001/*
Brian O'Connora09fe5b2017-08-03 21:12:30 -07002 * Copyright 2016-present Open Networking Foundation
Simon Hunt5a6c60c2016-08-26 17:15:18 -07003 *
4 * Licensed under the Apache License, Version 2.0 (the "License");
5 * you may not use this file except in compliance with the License.
6 * You may obtain a copy of the License at
7 *
8 * http://www.apache.org/licenses/LICENSE-2.0
9 *
10 * Unless required by applicable law or agreed to in writing, software
11 * distributed under the License is distributed on an "AS IS" BASIS,
12 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
13 * See the License for the specific language governing permissions and
14 * limitations under the License.
15 */
16
17/*
18 ONOS GUI -- Display ONOS Glyphs (development module)
19 */
20
21(function () {
22 'use strict';
23
24 var $log, $window, fs, gs;
25
26 var vspace = 60;
27
28 // assuming the glyph is a square
29 // div is a D3 selection of the <DIV> element into which icon should load
30 // size is the size of the glyph
31 // id is the symbol id
32 // rer is the rectangle the glyph will be in's rounded corners
33 // svgClass is the class name for your glyph
34 function createGlyph(div, size, id, rer, svgClass) {
35 var dim = size || 20,
36 texty = 30,
37 gid = id || 'unknown',
38 rx = rer || 4,
39 svgCls = svgClass || 'embeddedGlyph',
40 svg, g;
41
42 svg = div.append('svg').attr({
43 'class': svgCls,
44 width: dim,
45 height: dim + texty,
46 viewBox: '0 0 ' + dim + ' ' + dim
47 });
48
49 svg.on('mousemove', function () {
50 showZoomedGlyph(id);
51 });
52
53 g = svg.append('g').attr({
54 'class': 'glyph'
55 });
56
57 g.append('rect').attr({
58 width: dim,
59 height: dim,
60 rx: rx
61 });
62
63 g.append('use').attr({
64 width: dim,
65 height: dim,
66 'class': 'glyph',
67 'xlink:href': '#' + gid
68 });
69
70 g.append('text')
71 .attr({
72 'text-anchor': 'left',
73 y: '1em',
74 x: 0,
75 transform: 'translate(0, ' + dim + ')scale(0.8)'
76 })
77 .style('fill', '#800')
78 .text(id);
79 }
80
81 function showZoomedGlyph(id) {
82 var s = d3.select('#zoomed').select('svg'),
83 zd = zsize();
84
85 s.selectAll('g').remove();
86
87 var g = s.append('g').attr({
88 'class': 'glyph'
89 });
90 g.append('use').attr({
91 width: zd,
92 height: zd,
93 'class': 'glyph',
94 'xlink:href': '#' + id
95 });
96
97 d3.select('#tag').text(id);
98 }
99
100 function boxSize() {
101 return {
102 w: $window.innerWidth,
103 h: $window.innerHeight - vspace
104 };
105 }
106
107 function zsize() {
108 return boxSize().w - 430;
109 }
110
111 function updateLayout() {
112 var box = boxSize(),
113 zdim = box.w - 425,
114 zsdim = zdim - 5;
115
116 $log.debug('updateLayout()', box);
117
118 var c = d3.select('#container')
119 .style('width', box.w + 'px')
120 .style('height', box.h + 'px');
121
122 c.select('#showGlyphs').style('height', (box.h - 4) + 'px');
123 var z = c.select('#zoomed').style('height', (box.h - 4) + 'px')
124 .style('width', zdim + 'px');
125
126 var zsvg = z.select('svg');
127 if (zsvg.empty()) {
128 zsvg = z.append('svg');
129 }
130 zsvg.style({
131 width: zsdim + 'px',
132 height: zsdim + 'px'
133 });
134 zsvg.selectAll('g').remove();
135 d3.select('#tag').text('');
136 }
137
138 function watchWindow() {
139 var w = angular.element($window);
140 w.bind('resize', function () {
141 updateLayout();
142 });
143 }
144
145
146 angular.module('showGlyphs', ['onosUtil', 'onosSvg'])
147 .controller('OvShowGlyphs',
148 ['$log', '$window', 'FnService', 'GlyphService',
149
150 function (_$log_, _$window_, _fs_, _gs_) {
151 var defs = d3.select('defs'),
152 gDiv = d3.select('#showGlyphs'),
153 cols = 6,
154 k = 0;
155
156 $log = _$log_;
157 $window = _$window_;
158 fs = _fs_;
159 gs = _gs_;
160
161 updateLayout();
162 watchWindow();
163
164 gs.init();
165 gs.loadDefs(defs, null, true);
166
167 gs.ids().forEach(function (id) {
168 createGlyph(gDiv, 50, id);
169 k += 1;
170 if (k % cols > 0) {
171 gDiv.append('span').style('padding-left', '15px');
172 } else {
173 gDiv.append('br');
174 }
175 });
176 }]);
177}());