| author | rougeronj |
| Thu, 01 Oct 2015 17:16:06 +0200 | |
| changeset 560 | 05a4380227f3 |
| parent 557 | 18c36f038e9f |
| child 565 | 49bc7df521df |
| permissions | -rw-r--r-- |
|
506
460de050f800
Create Viewrepr which handle the representation of the View.
rougeronj
parents:
diff
changeset
|
1 |
define(['jquery', 'underscore', 'requtils', 'renderer/baserepresentation'], function ($, _, requtils, BaseRepresentation) { |
|
460de050f800
Create Viewrepr which handle the representation of the View.
rougeronj
parents:
diff
changeset
|
2 |
'use strict'; |
|
460de050f800
Create Viewrepr which handle the representation of the View.
rougeronj
parents:
diff
changeset
|
3 |
|
|
460de050f800
Create Viewrepr which handle the representation of the View.
rougeronj
parents:
diff
changeset
|
4 |
var Utils = requtils.getUtils(); |
|
460de050f800
Create Viewrepr which handle the representation of the View.
rougeronj
parents:
diff
changeset
|
5 |
|
|
460de050f800
Create Viewrepr which handle the representation of the View.
rougeronj
parents:
diff
changeset
|
6 |
/* Rkns.Renderer.View Class */ |
|
460de050f800
Create Viewrepr which handle the representation of the View.
rougeronj
parents:
diff
changeset
|
7 |
|
|
460de050f800
Create Viewrepr which handle the representation of the View.
rougeronj
parents:
diff
changeset
|
8 |
/* The representation for the view. */ |
|
460de050f800
Create Viewrepr which handle the representation of the View.
rougeronj
parents:
diff
changeset
|
9 |
|
|
460de050f800
Create Viewrepr which handle the representation of the View.
rougeronj
parents:
diff
changeset
|
10 |
var ViewRepr = Utils.inherit(BaseRepresentation); |
|
460de050f800
Create Viewrepr which handle the representation of the View.
rougeronj
parents:
diff
changeset
|
11 |
|
|
460de050f800
Create Viewrepr which handle the representation of the View.
rougeronj
parents:
diff
changeset
|
12 |
_(ViewRepr.prototype).extend({ |
|
460de050f800
Create Viewrepr which handle the representation of the View.
rougeronj
parents:
diff
changeset
|
13 |
_init: function() { |
|
460de050f800
Create Viewrepr which handle the representation of the View.
rougeronj
parents:
diff
changeset
|
14 |
var _this = this; |
|
460de050f800
Create Viewrepr which handle the representation of the View.
rougeronj
parents:
diff
changeset
|
15 |
this.$ = $(".Rk-Render"); |
|
460de050f800
Create Viewrepr which handle the representation of the View.
rougeronj
parents:
diff
changeset
|
16 |
this.type = "View"; |
|
460de050f800
Create Viewrepr which handle the representation of the View.
rougeronj
parents:
diff
changeset
|
17 |
this.hiddenNodes = []; |
| 508 | 18 |
this.scale = 1; |
19 |
this.initialScale = 1; |
|
20 |
this.offset = paper.view.center; |
|
|
510
a8f02d66bf02
adapt the viewRepr to support a temp View (a representation without a model)
rougeronj
parents:
508
diff
changeset
|
21 |
this.params = {}; |
|
a8f02d66bf02
adapt the viewRepr to support a temp View (a representation without a model)
rougeronj
parents:
508
diff
changeset
|
22 |
|
|
a8f02d66bf02
adapt the viewRepr to support a temp View (a representation without a model)
rougeronj
parents:
508
diff
changeset
|
23 |
if (this.model){ |
|
a8f02d66bf02
adapt the viewRepr to support a temp View (a representation without a model)
rougeronj
parents:
508
diff
changeset
|
24 |
this.params = { |
|
a8f02d66bf02
adapt the viewRepr to support a temp View (a representation without a model)
rougeronj
parents:
508
diff
changeset
|
25 |
"zoom_level": _this.model.get("zoom_level"), |
|
a8f02d66bf02
adapt the viewRepr to support a temp View (a representation without a model)
rougeronj
parents:
508
diff
changeset
|
26 |
"offset": _this.model.get("offset"), |
|
a8f02d66bf02
adapt the viewRepr to support a temp View (a representation without a model)
rougeronj
parents:
508
diff
changeset
|
27 |
"hidden_nodes": _this.model.get("hidden_nodes") |
|
a8f02d66bf02
adapt the viewRepr to support a temp View (a representation without a model)
rougeronj
parents:
508
diff
changeset
|
28 |
}; |
|
a8f02d66bf02
adapt the viewRepr to support a temp View (a representation without a model)
rougeronj
parents:
508
diff
changeset
|
29 |
} |
|
a8f02d66bf02
adapt the viewRepr to support a temp View (a representation without a model)
rougeronj
parents:
508
diff
changeset
|
30 |
|
| 547 | 31 |
this.initWithParams(); |
|
506
460de050f800
Create Viewrepr which handle the representation of the View.
rougeronj
parents:
diff
changeset
|
32 |
|
| 508 | 33 |
var bindClick = function(selector, fname) { |
34 |
_this.$.find(selector).click(function(evt) { |
|
35 |
_this[fname](evt); |
|
36 |
return false; |
|
37 |
}); |
|
38 |
}; |
|
39 |
|
|
40 |
bindClick(".Rk-ZoomOut", "zoomOut"); |
|
41 |
bindClick(".Rk-ZoomIn", "zoomIn"); |
|
42 |
bindClick(".Rk-ZoomFit", "autoScale"); |
|
| 547 | 43 |
bindClick(".Rk-ZoomSave", "saveView"); |
| 508 | 44 |
|
45 |
this.$.find(".Rk-ZoomSetSaved").click( function() { |
|
|
510
a8f02d66bf02
adapt the viewRepr to support a temp View (a representation without a model)
rougeronj
parents:
508
diff
changeset
|
46 |
_this.setScale(_this.params.zoom_level, new paper.Point(_this.params.offset)); |
|
a8f02d66bf02
adapt the viewRepr to support a temp View (a representation without a model)
rougeronj
parents:
508
diff
changeset
|
47 |
_this.showNodes(false); |
|
a8f02d66bf02
adapt the viewRepr to support a temp View (a representation without a model)
rougeronj
parents:
508
diff
changeset
|
48 |
if (_this.options.hide_nodes){ |
|
a8f02d66bf02
adapt the viewRepr to support a temp View (a representation without a model)
rougeronj
parents:
508
diff
changeset
|
49 |
_this.hiddenNodes = (_this.params.hidden_nodes || []).concat(); |
|
a8f02d66bf02
adapt the viewRepr to support a temp View (a representation without a model)
rougeronj
parents:
508
diff
changeset
|
50 |
_this.hideNodes(); |
|
506
460de050f800
Create Viewrepr which handle the representation of the View.
rougeronj
parents:
diff
changeset
|
51 |
} |
| 524 | 52 |
_this.updateUrl(); |
| 508 | 53 |
}); |
|
506
460de050f800
Create Viewrepr which handle the representation of the View.
rougeronj
parents:
diff
changeset
|
54 |
|
|
460de050f800
Create Viewrepr which handle the representation of the View.
rougeronj
parents:
diff
changeset
|
55 |
this.$.find(".Rk-ShowHiddenNodes").mouseenter( function() { |
|
460de050f800
Create Viewrepr which handle the representation of the View.
rougeronj
parents:
diff
changeset
|
56 |
_this.showNodes(true); |
|
460de050f800
Create Viewrepr which handle the representation of the View.
rougeronj
parents:
diff
changeset
|
57 |
_this.$.find(".Rk-ShowHiddenNodes").mouseleave( function() { |
|
460de050f800
Create Viewrepr which handle the representation of the View.
rougeronj
parents:
diff
changeset
|
58 |
_this.hideNodes(); |
|
460de050f800
Create Viewrepr which handle the representation of the View.
rougeronj
parents:
diff
changeset
|
59 |
}); |
|
460de050f800
Create Viewrepr which handle the representation of the View.
rougeronj
parents:
diff
changeset
|
60 |
}); |
|
460de050f800
Create Viewrepr which handle the representation of the View.
rougeronj
parents:
diff
changeset
|
61 |
this.$.find(".Rk-ShowHiddenNodes").click( function() { |
|
460de050f800
Create Viewrepr which handle the representation of the View.
rougeronj
parents:
diff
changeset
|
62 |
_this.showNodes(false); |
|
460de050f800
Create Viewrepr which handle the representation of the View.
rougeronj
parents:
diff
changeset
|
63 |
_this.$.find(".Rk-ShowHiddenNodes").off( "mouseleave" ); |
|
460de050f800
Create Viewrepr which handle the representation of the View.
rougeronj
parents:
diff
changeset
|
64 |
}); |
|
543
5f7bebdcfc0d
Improve the way we init the view. The data loader send a "loaded" event, hooked by the scene.py and initializing the backbone.history and the view.
rougeronj
parents:
525
diff
changeset
|
65 |
if(this.renkan.project.get("views").length > 1 && this.renkan.options.save_view){ |
|
506
460de050f800
Create Viewrepr which handle the representation of the View.
rougeronj
parents:
diff
changeset
|
66 |
this.$.find(".Rk-ZoomSetSaved").show(); |
|
460de050f800
Create Viewrepr which handle the representation of the View.
rougeronj
parents:
diff
changeset
|
67 |
} |
|
460de050f800
Create Viewrepr which handle the representation of the View.
rougeronj
parents:
diff
changeset
|
68 |
}, |
|
460de050f800
Create Viewrepr which handle the representation of the View.
rougeronj
parents:
diff
changeset
|
69 |
redraw: function(options) { |
|
510
a8f02d66bf02
adapt the viewRepr to support a temp View (a representation without a model)
rougeronj
parents:
508
diff
changeset
|
70 |
//console.log("view : ", this.model.toJSON()); |
|
a8f02d66bf02
adapt the viewRepr to support a temp View (a representation without a model)
rougeronj
parents:
508
diff
changeset
|
71 |
}, |
| 547 | 72 |
initWithParams: function(){ |
|
510
a8f02d66bf02
adapt the viewRepr to support a temp View (a representation without a model)
rougeronj
parents:
508
diff
changeset
|
73 |
var _this = this; |
| 524 | 74 |
|
| 560 | 75 |
if (_this.options.view_force_autoscale){ |
76 |
this.autoScale(); |
|
77 |
} else { |
|
| 554 | 78 |
_this.setScale(_this.params.zoom_level, new paper.Point(_this.params.offset)); |
79 |
} |
|
80 |
|
|
| 560 | 81 |
if (_this.options.hide_nodes && !_this.options.view_show_hiddennodes){ |
|
510
a8f02d66bf02
adapt the viewRepr to support a temp View (a representation without a model)
rougeronj
parents:
508
diff
changeset
|
82 |
_this.hiddenNodes = (_this.params.hidden_nodes || []).concat(); |
|
a8f02d66bf02
adapt the viewRepr to support a temp View (a representation without a model)
rougeronj
parents:
508
diff
changeset
|
83 |
_this.hideNodes(); |
| 554 | 84 |
} else { |
85 |
_this.showNodes(false); |
|
|
510
a8f02d66bf02
adapt the viewRepr to support a temp View (a representation without a model)
rougeronj
parents:
508
diff
changeset
|
86 |
} |
| 547 | 87 |
|
88 |
}, |
|
89 |
saveView: function(){ |
|
90 |
var _this = this; |
|
91 |
|
|
92 |
var offset = { |
|
93 |
"x": _this.offset.x, |
|
94 |
"y": _this.offset.y |
|
95 |
}; |
|
96 |
|
|
97 |
_this.model = _this.renkan.project.addView( { zoom_level:_this.scale, offset:offset, hidden_nodes: _this.hiddenNodes.concat() } ); |
|
98 |
_this.params = { |
|
99 |
"zoom_level": _this.model.get("zoom_level"), |
|
100 |
"offset": _this.model.get("offset"), |
|
101 |
"hidden_nodes": _this.model.get("hidden_nodes") |
|
102 |
}; |
|
103 |
|
|
104 |
_this.updateUrl(); |
|
|
506
460de050f800
Create Viewrepr which handle the representation of the View.
rougeronj
parents:
diff
changeset
|
105 |
}, |
|
460de050f800
Create Viewrepr which handle the representation of the View.
rougeronj
parents:
diff
changeset
|
106 |
addHiddenNode: function(_model){ |
|
460de050f800
Create Viewrepr which handle the representation of the View.
rougeronj
parents:
diff
changeset
|
107 |
this.hideNode(_model); |
|
460de050f800
Create Viewrepr which handle the representation of the View.
rougeronj
parents:
diff
changeset
|
108 |
this.hiddenNodes.push(_model.id); |
| 511 | 109 |
this.updateUrl(); |
|
506
460de050f800
Create Viewrepr which handle the representation of the View.
rougeronj
parents:
diff
changeset
|
110 |
}, |
|
460de050f800
Create Viewrepr which handle the representation of the View.
rougeronj
parents:
diff
changeset
|
111 |
hideNode: function(_model){ |
|
460de050f800
Create Viewrepr which handle the representation of the View.
rougeronj
parents:
diff
changeset
|
112 |
if (typeof this.renderer.getRepresentationByModel(_model) !== 'undefined'){ |
|
460de050f800
Create Viewrepr which handle the representation of the View.
rougeronj
parents:
diff
changeset
|
113 |
this.renderer.getRepresentationByModel(_model).hide(); |
|
460de050f800
Create Viewrepr which handle the representation of the View.
rougeronj
parents:
diff
changeset
|
114 |
} |
|
460de050f800
Create Viewrepr which handle the representation of the View.
rougeronj
parents:
diff
changeset
|
115 |
}, |
|
460de050f800
Create Viewrepr which handle the representation of the View.
rougeronj
parents:
diff
changeset
|
116 |
hideNodes: function(){ |
|
460de050f800
Create Viewrepr which handle the representation of the View.
rougeronj
parents:
diff
changeset
|
117 |
var _this = this; |
|
460de050f800
Create Viewrepr which handle the representation of the View.
rougeronj
parents:
diff
changeset
|
118 |
this.hiddenNodes.forEach(function(_id, index){ |
|
460de050f800
Create Viewrepr which handle the representation of the View.
rougeronj
parents:
diff
changeset
|
119 |
var node = _this.renkan.project.get("nodes").get(_id); |
|
460de050f800
Create Viewrepr which handle the representation of the View.
rougeronj
parents:
diff
changeset
|
120 |
if (typeof node !== 'undefined'){ |
|
460de050f800
Create Viewrepr which handle the representation of the View.
rougeronj
parents:
diff
changeset
|
121 |
return _this.hideNode(_this.renkan.project.get("nodes").get(_id)); |
|
460de050f800
Create Viewrepr which handle the representation of the View.
rougeronj
parents:
diff
changeset
|
122 |
}else{ |
|
460de050f800
Create Viewrepr which handle the representation of the View.
rougeronj
parents:
diff
changeset
|
123 |
_this.hiddenNodes.splice(index, 1); |
|
460de050f800
Create Viewrepr which handle the representation of the View.
rougeronj
parents:
diff
changeset
|
124 |
} |
|
460de050f800
Create Viewrepr which handle the representation of the View.
rougeronj
parents:
diff
changeset
|
125 |
}); |
|
460de050f800
Create Viewrepr which handle the representation of the View.
rougeronj
parents:
diff
changeset
|
126 |
paper.view.draw(); |
|
460de050f800
Create Viewrepr which handle the representation of the View.
rougeronj
parents:
diff
changeset
|
127 |
}, |
|
460de050f800
Create Viewrepr which handle the representation of the View.
rougeronj
parents:
diff
changeset
|
128 |
showNodes: function(ghost){ |
|
460de050f800
Create Viewrepr which handle the representation of the View.
rougeronj
parents:
diff
changeset
|
129 |
var _this = this; |
|
460de050f800
Create Viewrepr which handle the representation of the View.
rougeronj
parents:
diff
changeset
|
130 |
this.hiddenNodes.forEach(function(_id){ |
|
460de050f800
Create Viewrepr which handle the representation of the View.
rougeronj
parents:
diff
changeset
|
131 |
_this.renderer.getRepresentationByModel(_this.renkan.project.get("nodes").get(_id)).show(ghost); |
|
460de050f800
Create Viewrepr which handle the representation of the View.
rougeronj
parents:
diff
changeset
|
132 |
}); |
|
460de050f800
Create Viewrepr which handle the representation of the View.
rougeronj
parents:
diff
changeset
|
133 |
if (!ghost){ |
|
460de050f800
Create Viewrepr which handle the representation of the View.
rougeronj
parents:
diff
changeset
|
134 |
this.hiddenNodes = []; |
|
460de050f800
Create Viewrepr which handle the representation of the View.
rougeronj
parents:
diff
changeset
|
135 |
} |
|
460de050f800
Create Viewrepr which handle the representation of the View.
rougeronj
parents:
diff
changeset
|
136 |
paper.view.draw(); |
|
460de050f800
Create Viewrepr which handle the representation of the View.
rougeronj
parents:
diff
changeset
|
137 |
}, |
| 508 | 138 |
setScale: function(_newScale, _offset) { |
139 |
if ((_newScale/this.initialScale) > Utils._MIN_SCALE && (_newScale/this.initialScale) < Utils._MAX_SCALE) { |
|
140 |
this.scale = _newScale; |
|
141 |
if (_offset) { |
|
142 |
this.offset = _offset; |
|
143 |
} |
|
144 |
this.renderer.redraw(); |
|
| 511 | 145 |
this.updateUrl(); |
| 508 | 146 |
} |
147 |
}, |
|
148 |
zoomOut: function() { |
|
149 |
var _newScale = this.scale * Math.SQRT1_2, |
|
150 |
_offset = new paper.Point([ |
|
151 |
this.renderer.canvas_$.width(), |
|
152 |
this.renderer.canvas_$.height() |
|
153 |
]).multiply( 0.5 * ( 1 - Math.SQRT1_2 ) ).add(this.offset.multiply( Math.SQRT1_2 )); |
|
154 |
this.setScale( _newScale, _offset ); |
|
155 |
}, |
|
156 |
zoomIn: function() { |
|
157 |
var _newScale = this.scale * Math.SQRT2, |
|
158 |
_offset = new paper.Point([ |
|
159 |
this.renderer.canvas_$.width(), |
|
160 |
this.renderer.canvas_$.height() |
|
161 |
]).multiply( 0.5 * ( 1 - Math.SQRT2 ) ).add(this.offset.multiply( Math.SQRT2 )); |
|
162 |
this.setScale( _newScale, _offset ); |
|
163 |
}, |
|
| 557 | 164 |
resizeZoom: function(deltaW, deltaH, _ratio) { |
165 |
var _newScale = this.scale * _ratio; |
|
166 |
var _offset = new paper.Point([ |
|
167 |
(this.renderer.canvas_$.width() * 0.5 * ( 1 - _ratio) ) + (this.offset.x * _ratio + deltaW * _ratio * 0.5 ), |
|
168 |
(this.renderer.canvas_$.height() * 0.5 * ( 1 - _ratio) ) + (this.offset.y * _ratio + deltaH * _ratio * 0.5 ) |
|
| 508 | 169 |
]); |
170 |
this.setScale( _newScale, _offset ); |
|
171 |
}, |
|
172 |
autoScale: function(force_view) { |
|
173 |
var nodes = this.renkan.project.get("nodes"); |
|
174 |
if (nodes.length > 1) { |
|
175 |
var _xx = nodes.map(function(_node) { return _node.get("position").x; }), |
|
176 |
_yy = nodes.map(function(_node) { return _node.get("position").y; }), |
|
177 |
_minx = Math.min.apply(Math, _xx), |
|
178 |
_miny = Math.min.apply(Math, _yy), |
|
179 |
_maxx = Math.max.apply(Math, _xx), |
|
180 |
_maxy = Math.max.apply(Math, _yy); |
|
181 |
var _scale = Math.min( (paper.view.size.width - 2 * this.renkan.options.autoscale_padding) / (_maxx - _minx), (paper.view.size.height - 2 * this.renkan.options.autoscale_padding) / (_maxy - _miny)); |
|
182 |
this.initialScale = _scale; |
|
183 |
// Override calculated scale if asked |
|
184 |
if((typeof force_view !== "undefined") && parseFloat(force_view.zoom_level)>0 && parseFloat(force_view.offset.x)>0 && parseFloat(force_view.offset.y)>0){ |
|
185 |
this.setScale(parseFloat(force_view.zoom_level), new paper.Point(parseFloat(force_view.offset.x), parseFloat(force_view.offset.y))); |
|
186 |
} |
|
187 |
else{ |
|
188 |
this.setScale(_scale, paper.view.center.subtract(new paper.Point([(_maxx + _minx) / 2, (_maxy + _miny) / 2]).multiply(_scale))); |
|
189 |
} |
|
190 |
} |
|
191 |
if (nodes.length === 1) { |
|
192 |
this.setScale(1, paper.view.center.subtract(new paper.Point([nodes.at(0).get("position").x, nodes.at(0).get("position").y]))); |
|
193 |
} |
|
194 |
}, |
|
195 |
paperShift: function(_delta) { |
|
196 |
this.offset = this.offset.add(_delta); |
|
197 |
this.renderer.redraw(); |
|
198 |
}, |
|
| 511 | 199 |
updateUrl: function(){ |
| 554 | 200 |
if(this.options.url_parameters && this.options.update_url){ |
| 511 | 201 |
var result = {}; |
202 |
var parameters = Backbone.history.getFragment().split('?'); |
|
203 |
if (parameters.length > 1){ |
|
204 |
parameters[1].split("&").forEach(function(part) { |
|
205 |
var item = part.split("="); |
|
206 |
result[item[0]] = decodeURIComponent(item[1]); |
|
207 |
}); |
|
|
519
b94a34c139c1
update parameters function to accept idView parameter
rougeronj
parents:
517
diff
changeset
|
208 |
} |
| 511 | 209 |
result.view = Math.round(this.offset.x*1000)/1000 + ',' + Math.round(this.offset.y*1000)/1000 + ',' + Math.round(this.scale*1000)/1000; |
|
519
b94a34c139c1
update parameters function to accept idView parameter
rougeronj
parents:
517
diff
changeset
|
210 |
|
|
b94a34c139c1
update parameters function to accept idView parameter
rougeronj
parents:
517
diff
changeset
|
211 |
if (this.renkan.project.get("views").indexOf(this.model) > -1){ |
| 525 | 212 |
result.viewIndex = this.renkan.project.get("views").indexOf(this.model); |
213 |
if (result.viewIndex === this.renkan.project.get("views").length - 1){ |
|
214 |
result.viewIndex = -1; |
|
| 524 | 215 |
} |
|
519
b94a34c139c1
update parameters function to accept idView parameter
rougeronj
parents:
517
diff
changeset
|
216 |
} else { |
| 525 | 217 |
if (result.viewIndex){ |
218 |
delete result.viewIndex; |
|
|
519
b94a34c139c1
update parameters function to accept idView parameter
rougeronj
parents:
517
diff
changeset
|
219 |
} |
|
b94a34c139c1
update parameters function to accept idView parameter
rougeronj
parents:
517
diff
changeset
|
220 |
} |
|
517
15061185cf1b
prevent history to be change with the new hash parameters
rougeronj
parents:
511
diff
changeset
|
221 |
this.renkan.router.navigate("?" + decodeURIComponent($.param(result)), {trigger: false, replace: true}); |
| 511 | 222 |
} |
223 |
}, |
|
| 524 | 224 |
destroy: function(_event) { |
225 |
this._super("destroy"); |
|
226 |
this.showNodes(false); |
|
227 |
} |
|
|
506
460de050f800
Create Viewrepr which handle the representation of the View.
rougeronj
parents:
diff
changeset
|
228 |
}).value(); |
|
460de050f800
Create Viewrepr which handle the representation of the View.
rougeronj
parents:
diff
changeset
|
229 |
|
|
460de050f800
Create Viewrepr which handle the representation of the View.
rougeronj
parents:
diff
changeset
|
230 |
return ViewRepr; |
|
460de050f800
Create Viewrepr which handle the representation of the View.
rougeronj
parents:
diff
changeset
|
231 |
|
|
460de050f800
Create Viewrepr which handle the representation of the View.
rougeronj
parents:
diff
changeset
|
232 |
}); |