Removed dialog logic from the Topo2Map Class
Change-Id: I2e89c911d904feb7226160ee368459d04a3ddc32
Showing
4 changed files
with
226 additions
and
138 deletions
... | @@ -22,56 +22,16 @@ | ... | @@ -22,56 +22,16 @@ |
22 | (function () { | 22 | (function () { |
23 | 'use strict'; | 23 | 'use strict'; |
24 | 24 | ||
25 | - var $log, $loc, wss, ps, ms, t2ds, sus; | 25 | + // Injected Services |
26 | + var $loc, ps, ms, sus, countryFilters; | ||
27 | + | ||
28 | + // Injected Classes | ||
29 | + var MapSelectionDialog; | ||
26 | 30 | ||
27 | // internal state | 31 | // internal state |
28 | - var mapG, order, maps, map, mapItems, tintCheck, messageHandlers; | 32 | + var mapG; |
29 | - | ||
30 | - // constants | ||
31 | - var mapRequest = 'mapSelectorRequest'; | ||
32 | - | ||
33 | - var countryFilters = { | ||
34 | - s_america: function (c) { | ||
35 | - return c.properties.continent === 'South America'; | ||
36 | - }, | ||
37 | - | ||
38 | - ns_america: function (c) { | ||
39 | - return c.properties.custom === 'US-cont' || | ||
40 | - c.properties.subregion === 'Central America' || | ||
41 | - c.properties.continent === 'South America'; | ||
42 | - }, | ||
43 | - | ||
44 | - japan: function (c) { | ||
45 | - return c.properties.geounit === 'Japan'; | ||
46 | - }, | ||
47 | - | ||
48 | - europe: function (c) { | ||
49 | - return c.properties.continent === 'Europe'; | ||
50 | - }, | ||
51 | - | ||
52 | - italy: function (c) { | ||
53 | - return c.properties.geounit === 'Italy'; | ||
54 | - }, | ||
55 | - | ||
56 | - uk: function (c) { | ||
57 | - // technically, Ireland is not part of the United Kingdom, | ||
58 | - // but the map looks weird without it showing. | ||
59 | - return c.properties.adm0_a3 === 'GBR' || | ||
60 | - c.properties.adm0_a3 === 'IRL'; | ||
61 | - }, | ||
62 | - | ||
63 | - s_korea: function (c) { | ||
64 | - return c.properties.adm0_a3 === 'KOR'; | ||
65 | - }, | ||
66 | - | ||
67 | - australia: function (c) { | ||
68 | - return c.properties.adm0_a3 === 'AUS'; | ||
69 | - } | ||
70 | - }; | ||
71 | 33 | ||
72 | function init(zoomLayer) { | 34 | function init(zoomLayer) { |
73 | - | ||
74 | - start(); | ||
75 | return setUpMap(zoomLayer); | 35 | return setUpMap(zoomLayer); |
76 | } | 36 | } |
77 | 37 | ||
... | @@ -80,7 +40,7 @@ | ... | @@ -80,7 +40,7 @@ |
80 | mapId = prefs.mapid, | 40 | mapId = prefs.mapid, |
81 | mapFilePath = prefs.mapfilepath, | 41 | mapFilePath = prefs.mapfilepath, |
82 | mapScale = prefs.mapscale, | 42 | mapScale = prefs.mapscale, |
83 | - tint = prefs.tint, | 43 | + loadMap = ms.loadMapInto, |
84 | promise, cfilter; | 44 | promise, cfilter; |
85 | 45 | ||
86 | mapG = d3.select('#topo-map'); | 46 | mapG = d3.select('#topo-map'); |
... | @@ -93,34 +53,18 @@ | ... | @@ -93,34 +53,18 @@ |
93 | }); | 53 | }); |
94 | } | 54 | } |
95 | 55 | ||
96 | - cfilter = countryFilters[mapId] || countryFilters.uk; | ||
97 | - | ||
98 | if (mapFilePath === '*countries') { | 56 | if (mapFilePath === '*countries') { |
99 | - | ||
100 | cfilter = countryFilters[mapId] || countryFilters.uk; | 57 | cfilter = countryFilters[mapId] || countryFilters.uk; |
101 | - | 58 | + loadMap = ms.loadMapRegionInto |
102 | - promise = ms.loadMapRegionInto(mapG, { | ||
103 | - countryFilter: cfilter, | ||
104 | - adjustScale: mapScale, | ||
105 | - shading: '' | ||
106 | - }); | ||
107 | - } else { | ||
108 | - | ||
109 | - promise = ms.loadMapInto(mapG, mapFilePath, mapId, { | ||
110 | - adjustScale: mapScale, | ||
111 | - shading: '' | ||
112 | - }); | ||
113 | } | 59 | } |
114 | 60 | ||
115 | - return promise; | 61 | + promise = loadMap(mapG, mapFilePath, mapId, { |
116 | - } | 62 | + countryFilters: cfilter, |
117 | - | 63 | + adjustScale: mapScale, |
118 | - function start() { | 64 | + shading: '' |
119 | - wss.bindHandlers(messageHandlers); | 65 | + }); |
120 | - } | ||
121 | 66 | ||
122 | - function stop() { | 67 | + return promise; |
123 | - wss.unbindHandlers(messageHandlers); | ||
124 | } | 68 | } |
125 | 69 | ||
126 | function currentMap() { | 70 | function currentMap() { |
... | @@ -136,10 +80,6 @@ | ... | @@ -136,10 +80,6 @@ |
136 | ); | 80 | ); |
137 | } | 81 | } |
138 | 82 | ||
139 | - function openMapSelection() { | ||
140 | - wss.sendEvent(mapRequest); | ||
141 | - } | ||
142 | - | ||
143 | function opacifyMap(b) { | 83 | function opacifyMap(b) { |
144 | mapG.transition() | 84 | mapG.transition() |
145 | .duration(1000) | 85 | .duration(1000) |
... | @@ -152,56 +92,6 @@ | ... | @@ -152,56 +92,6 @@ |
152 | opacifyMap(true); | 92 | opacifyMap(true); |
153 | } | 93 | } |
154 | 94 | ||
155 | - function dOk() { | ||
156 | - var p = { | ||
157 | - mapid: map.id, | ||
158 | - mapscale: map.scale, | ||
159 | - mapfilepath: map.filePath, | ||
160 | - tint: 'off' | ||
161 | - // tint: tintCheck.property('checked') ? 'on' : 'off' | ||
162 | - }; | ||
163 | - setMap(p); | ||
164 | - $log.debug('Dialog OK button clicked'); | ||
165 | - } | ||
166 | - | ||
167 | - function dClose() { | ||
168 | - $log.debug('Dialog Close button clicked (or Esc pressed)'); | ||
169 | - } | ||
170 | - | ||
171 | - function selectMap() { | ||
172 | - map = maps[this.options[this.selectedIndex].value]; | ||
173 | - $log.info('Selected map', map); | ||
174 | - } | ||
175 | - | ||
176 | - function createListContent() { | ||
177 | - var content = t2ds.createDiv('map-list'), | ||
178 | - form = content.append('form'), | ||
179 | - current = currentMap(); | ||
180 | - map = maps[current.mapid]; | ||
181 | - mapItems = form.append('select').on('change', selectMap); | ||
182 | - order.forEach(function (id) { | ||
183 | - var m = maps[id]; | ||
184 | - mapItems.append('option') | ||
185 | - .attr('value', m.id) | ||
186 | - .attr('selected', m.id === current.mapid ? true : null) | ||
187 | - .text(m.description); | ||
188 | - }); | ||
189 | - | ||
190 | - return content; | ||
191 | - } | ||
192 | - | ||
193 | - function handleMapResponse(data) { | ||
194 | - $log.info('Got response', data); | ||
195 | - order = data.order; | ||
196 | - maps = data.maps; | ||
197 | - t2ds.openDialog() | ||
198 | - .setTitle('Select Map') | ||
199 | - .addContent(createListContent()) | ||
200 | - .addOk(dOk, 'OK') | ||
201 | - .addCancel(dClose, 'Close') | ||
202 | - .bindKeys(); | ||
203 | - } | ||
204 | - | ||
205 | // TODO: -- START -- Move to dedicated module | 95 | // TODO: -- START -- Move to dedicated module |
206 | var prefsState = {}; | 96 | var prefsState = {}; |
207 | 97 | ||
... | @@ -211,8 +101,7 @@ | ... | @@ -211,8 +101,7 @@ |
211 | } | 101 | } |
212 | 102 | ||
213 | function _togSvgLayer(x, G, tag, what) { | 103 | function _togSvgLayer(x, G, tag, what) { |
214 | - var on = (x === 'keyev') ? !sus.visible(G) : !!x, | 104 | + var on = (x === 'keyev') ? !sus.visible(G) : Boolean(x); |
215 | - verb = on ? 'Show' : 'Hide'; | ||
216 | sus.visible(G, on); | 105 | sus.visible(G, on); |
217 | updatePrefsState(tag, on); | 106 | updatePrefsState(tag, on); |
218 | // flash.flash(verb + ' ' + what); | 107 | // flash.flash(verb + ' ' + what); |
... | @@ -223,29 +112,35 @@ | ... | @@ -223,29 +112,35 @@ |
223 | _togSvgLayer(x, mapG, 'bg', 'background map'); | 112 | _togSvgLayer(x, mapG, 'bg', 'background map'); |
224 | } | 113 | } |
225 | 114 | ||
115 | + function openMapSelection() { | ||
116 | + | ||
117 | + // TODO: Create a view class with extend method | ||
118 | + MapSelectionDialog.prototype.currentMap = currentMap; | ||
119 | + | ||
120 | + new MapSelectionDialog({ | ||
121 | + okHandler: function (preferences) { | ||
122 | + setMap(preferences); | ||
123 | + } | ||
124 | + }).open(); | ||
125 | + } | ||
126 | + | ||
226 | angular.module('ovTopo2') | 127 | angular.module('ovTopo2') |
227 | .factory('Topo2MapService', | 128 | .factory('Topo2MapService', |
228 | - ['$log', '$location', 'WebSocketService', 'PrefsService', 'MapService', | 129 | + ['$location', 'PrefsService', 'MapService', |
229 | - 'SvgUtilService', 'Topo2DialogService', | 130 | + 'SvgUtilService', 'Topo2CountryFilters', 'Topo2MapDialog', |
230 | - function (_$log_, _$loc_, _wss_, _ps_, _ms_, _sus_, _t2ds_) { | 131 | + function (_$loc_, _ps_, _ms_, _sus_, _t2cf_, _t2md_) { |
231 | 132 | ||
232 | - $log = _$log_; | ||
233 | $loc = _$loc_; | 133 | $loc = _$loc_; |
234 | - wss = _wss_; | ||
235 | ps = _ps_; | 134 | ps = _ps_; |
236 | ms = _ms_; | 135 | ms = _ms_; |
237 | sus = _sus_; | 136 | sus = _sus_; |
238 | - t2ds = _t2ds_; | 137 | + countryFilters = _t2cf_; |
239 | - | 138 | + MapSelectionDialog = _t2md_; |
240 | - messageHandlers = { | ||
241 | - mapSelectorResponse: handleMapResponse | ||
242 | - }; | ||
243 | 139 | ||
244 | return { | 140 | return { |
245 | init: init, | 141 | init: init, |
246 | openMapSelection: openMapSelection, | 142 | openMapSelection: openMapSelection, |
247 | - toggle: toggle, | 143 | + toggle: toggle |
248 | - stop: stop | ||
249 | }; | 144 | }; |
250 | } | 145 | } |
251 | ]); | 146 | ]); | ... | ... |
1 | +/* | ||
2 | + * Copyright 2016-present Open Networking Laboratory | ||
3 | + * | ||
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 -- Topology Force Module. | ||
19 | + Visualization of the topology in an SVG layer, using a D3 Force Layout. | ||
20 | + */ | ||
21 | + | ||
22 | +(function () { | ||
23 | + 'use strict'; | ||
24 | + | ||
25 | + angular.module('ovTopo2') | ||
26 | + .factory('Topo2CountryFilters', [ | ||
27 | + function (_$log_, _wss_, _t2ds_) { | ||
28 | + return { | ||
29 | + s_america: function (c) { | ||
30 | + return c.properties.continent === 'South America'; | ||
31 | + }, | ||
32 | + ns_america: function (c) { | ||
33 | + return c.properties.custom === 'US-cont' || | ||
34 | + c.properties.subregion === 'Central America' || | ||
35 | + c.properties.continent === 'South America'; | ||
36 | + }, | ||
37 | + japan: function (c) { | ||
38 | + return c.properties.geounit === 'Japan'; | ||
39 | + }, | ||
40 | + europe: function (c) { | ||
41 | + return c.properties.continent === 'Europe'; | ||
42 | + }, | ||
43 | + italy: function (c) { | ||
44 | + return c.properties.geounit === 'Italy'; | ||
45 | + }, | ||
46 | + uk: function (c) { | ||
47 | + // technically, Ireland is not part of the United Kingdom, | ||
48 | + // but the map looks weird without it showing. | ||
49 | + return c.properties.adm0_a3 === 'GBR' || | ||
50 | + c.properties.adm0_a3 === 'IRL'; | ||
51 | + }, | ||
52 | + s_korea: function (c) { | ||
53 | + return c.properties.adm0_a3 === 'KOR'; | ||
54 | + }, | ||
55 | + australia: function (c) { | ||
56 | + return c.properties.adm0_a3 === 'AUS'; | ||
57 | + } | ||
58 | + }; | ||
59 | + } | ||
60 | + ]); | ||
61 | +})(); |
1 | +/* | ||
2 | + * Copyright 2016-present Open Networking Laboratory | ||
3 | + * | ||
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 -- Topology Force Module. | ||
19 | + Visualization of the topology in an SVG layer, using a D3 Force Layout. | ||
20 | + */ | ||
21 | + | ||
22 | +(function () { | ||
23 | + 'use strict'; | ||
24 | + | ||
25 | + // Injected | ||
26 | + var $log, wss, t2ds; | ||
27 | + | ||
28 | + // Constants | ||
29 | + var mapRequest = 'mapSelectorRequest'; | ||
30 | + | ||
31 | + // State | ||
32 | + var order, maps, map, mapItems; | ||
33 | + | ||
34 | + var Dialog = function (options) { | ||
35 | + | ||
36 | + this.okHandlerCallback = options.okHandler; | ||
37 | + this.closeHandlerCallback = options.closeHandler; | ||
38 | + | ||
39 | + wss.bindHandlers({ | ||
40 | + mapSelectorResponse: this.handleMapResponse.bind(this) | ||
41 | + }); | ||
42 | + }; | ||
43 | + | ||
44 | + Dialog.prototype = { | ||
45 | + handleMapResponse: function (data) { | ||
46 | + $log.info('Got response', data); | ||
47 | + order = data.order; | ||
48 | + maps = data.maps; | ||
49 | + | ||
50 | + t2ds.openDialog() | ||
51 | + .setTitle('Select Map') | ||
52 | + .addContent(this.render.bind(this)()) | ||
53 | + .addOk(this.okHandler.bind(this), 'OK') | ||
54 | + .addCancel(this.closeHandler.bind(this), 'Close') | ||
55 | + .bindKeys(); | ||
56 | + }, | ||
57 | + | ||
58 | + open: function () { | ||
59 | + wss.sendEvent(mapRequest); | ||
60 | + }, | ||
61 | + close: function () { | ||
62 | + wss.unbindHandlers({ | ||
63 | + mapSelectorResponse: this.handleMapResponse.bind(this) | ||
64 | + }); | ||
65 | + }, | ||
66 | + | ||
67 | + selectedMap: function () { | ||
68 | + map = maps[this.options[this.selectedIndex].value]; | ||
69 | + $log.info('Selected map', map); | ||
70 | + }, | ||
71 | + | ||
72 | + okHandler: function () { | ||
73 | + | ||
74 | + var p = { | ||
75 | + mapid: map.id, | ||
76 | + mapscale: map.scale, | ||
77 | + mapfilepath: map.filePath, | ||
78 | + tint: 'off' | ||
79 | + // tint: tintCheck.property('checked') ? 'on' : 'off' | ||
80 | + }; | ||
81 | + | ||
82 | + if (this.okHandlerCallback) { | ||
83 | + this.okHandlerCallback(p); | ||
84 | + } | ||
85 | + | ||
86 | + this.close(); | ||
87 | + }, | ||
88 | + closeHandler: function () { | ||
89 | + | ||
90 | + if (this.closeHandlerCallback) { | ||
91 | + this.closeHandlerCallback(); | ||
92 | + } | ||
93 | + | ||
94 | + this.close(); | ||
95 | + }, | ||
96 | + | ||
97 | + render: function () { | ||
98 | + | ||
99 | + var content = t2ds.createDiv('map-list'), | ||
100 | + form = content.append('form'), | ||
101 | + current = this.currentMap(); | ||
102 | + | ||
103 | + map = maps[current.mapid]; | ||
104 | + mapItems = form.append('select').on('change', this.selectedMap); | ||
105 | + | ||
106 | + order.forEach(function (id) { | ||
107 | + var m = maps[id]; | ||
108 | + mapItems.append('option') | ||
109 | + .attr('value', m.id) | ||
110 | + .attr('selected', m.id === current.mapid ? true : null) | ||
111 | + .text(m.description); | ||
112 | + }); | ||
113 | + | ||
114 | + return content; | ||
115 | + } | ||
116 | + }; | ||
117 | + | ||
118 | + angular.module('ovTopo2') | ||
119 | + .factory('Topo2MapDialog', [ | ||
120 | + '$log', 'WebSocketService', 'Topo2DialogService', | ||
121 | + function (_$log_, _wss_, _t2ds_) { | ||
122 | + | ||
123 | + $log = _$log_; | ||
124 | + wss = _wss_; | ||
125 | + t2ds = _t2ds_; | ||
126 | + | ||
127 | + return Dialog; | ||
128 | + } | ||
129 | + ]); | ||
130 | +})(); |
... | @@ -140,6 +140,8 @@ | ... | @@ -140,6 +140,8 @@ |
140 | <script src="app/view/topo2/topo2Layout.js"></script> | 140 | <script src="app/view/topo2/topo2Layout.js"></script> |
141 | <script src="app/view/topo2/topo2Link.js"></script> | 141 | <script src="app/view/topo2/topo2Link.js"></script> |
142 | <script src="app/view/topo2/topo2Map.js"></script> | 142 | <script src="app/view/topo2/topo2Map.js"></script> |
143 | + <script src="app/view/topo2/topo2MapCountryFilters.js"></script> | ||
144 | + <script src="app/view/topo2/topo2MapDialog.js"></script> | ||
143 | <script src="app/view/topo2/topo2Model.js"></script> | 145 | <script src="app/view/topo2/topo2Model.js"></script> |
144 | <script src="app/view/topo2/topo2NodeModel.js"></script> | 146 | <script src="app/view/topo2/topo2NodeModel.js"></script> |
145 | <script src="app/view/topo2/topo2Prefs.js"></script> | 147 | <script src="app/view/topo2/topo2Prefs.js"></script> | ... | ... |
-
Please register or login to post a comment