client/js/paper-renderer.js
changeset 57 01f66ed90e32
parent 56 a9b9e6c7be63
child 62 f9019462465a
equal deleted inserted replaced
56:a9b9e6c7be63 57:01f66ed90e32
   233         this.model.off("change", this._changeBinding );
   233         this.model.off("change", this._changeBinding );
   234         this.model.off("remove", this._removeBinding );
   234         this.model.off("remove", this._removeBinding );
   235     }
   235     }
   236 }
   236 }
   237 
   237 
       
   238 Rkns.Renderer._BaseRepresentation.prototype.resetCoords = function() {
       
   239     this.paper_coords = undefined;
       
   240 }
       
   241 
   238 Rkns.Renderer.Node = Rkns.Utils.inherit(Rkns.Renderer._BaseRepresentation);
   242 Rkns.Renderer.Node = Rkns.Utils.inherit(Rkns.Renderer._BaseRepresentation);
   239 
   243 
   240 Rkns.Renderer.Node.prototype._init = function() {
   244 Rkns.Renderer.Node.prototype._init = function() {
   241     this.renderer.node_layer.activate();
   245     this.renderer.node_layer.activate();
   242     this.type = "Node";
   246     this.type = "Node";
   257     this.link_button.node_representation = this;
   261     this.link_button.node_representation = this;
   258     this.title.paragraphStyle.justification = 'center';
   262     this.title.paragraphStyle.justification = 'center';
   259 }
   263 }
   260 
   264 
   261 Rkns.Renderer.Node.prototype.redraw = function() {
   265 Rkns.Renderer.Node.prototype.redraw = function() {
   262     var _model_coords = new paper.Point(this.model.get("position"));
   266     if (!this.paper_coords) {
   263     this.paper_coords = this.renderer.toPaperCoords(_model_coords);
   267         var _model_coords = new paper.Point(this.model.get("position"));
       
   268         this.paper_coords = this.renderer.toPaperCoords(_model_coords);
       
   269     }
   264     this.circle.position = this.paper_coords;
   270     this.circle.position = this.paper_coords;
   265     this.title.content = this.model.get("title");
   271     this.title.content = this.model.get("title");
   266     this.title.position = this.paper_coords.add([0, Rkns.Renderer._NODE_RADIUS + 1.5 *Rkns.Renderer._NODE_FONT_SIZE]);
   272     this.title.position = this.paper_coords.add([0, Rkns.Renderer._NODE_RADIUS + 1.5 *Rkns.Renderer._NODE_FONT_SIZE]);
   267     this.circle.strokeColor = this.model.get("color") || (this.model.get("created_by") || Rkns.Renderer._USER_PLACEHOLDER).get("color");
   273     this.circle.strokeColor = this.model.get("color") || (this.model.get("created_by") || Rkns.Renderer._USER_PLACEHOLDER).get("color");
   268     this.edit_button.moveTo(this.paper_coords);
   274     this.edit_button.moveTo(this.paper_coords);
   311     	}
   317     	}
   312     }, this);
   318     }, this);
   313 }
   319 }
   314 
   320 
   315 Rkns.Renderer.Node.prototype.paperShift = function(_delta) {
   321 Rkns.Renderer.Node.prototype.paperShift = function(_delta) {
   316     var _coords = this.renderer.toModelCoords(this.paper_coords.add(_delta)),
   322     this.paper_coords = this.paper_coords.add(_delta);
   317         _data = {
   323     this.redraw();
   318             position: {
       
   319                 x: _coords.x,
       
   320                 y: _coords.y
       
   321             }
       
   322         };
       
   323     this.model.set(_data);
       
   324     //this.renderer.redraw();
       
   325 }
   324 }
   326 
   325 
   327 Rkns.Renderer.Node.prototype.openEditor = function() {
   326 Rkns.Renderer.Node.prototype.openEditor = function() {
   328     this.renderer.removeRepresentationsOfType("editor");
   327     this.renderer.removeRepresentationsOfType("editor");
   329     var _editor = this.renderer.addRepresentation("NodeEditor",null);
   328     var _editor = this.renderer.addRepresentation("NodeEditor",null);
   367     if (this.node_image) {
   366     if (this.node_image) {
   368         this.node_image.opacity = .9;
   367         this.node_image.opacity = .9;
   369     }
   368     }
   370 }
   369 }
   371 
   370 
       
   371 Rkns.Renderer.Node.prototype.saveCoords = function() {
       
   372     var _coords = this.renderer.toModelCoords(this.paper_coords),
       
   373         _data = {
       
   374             position: {
       
   375                 x: _coords.x,
       
   376                 y: _coords.y
       
   377             }
       
   378         };
       
   379     this.model.set(_data);
       
   380 }
       
   381 
   372 Rkns.Renderer.Node.prototype.mouseup = function(_event) {
   382 Rkns.Renderer.Node.prototype.mouseup = function(_event) {
   373     if (!this.renderer.is_dragging) {
   383     if (this.renderer.is_dragging) {
       
   384         this.saveCoords();
       
   385     }
       
   386     else {
   374         this.openEditor();
   387         this.openEditor();
   375     }
   388     }
   376     this.renderer.click_target = null;
   389     this.renderer.click_target = null;
   377     this.renderer.is_dragging = false;
   390     this.renderer.is_dragging = false;
   378 }
   391 }
   478         this.line.strokeWidth = 2;
   491         this.line.strokeWidth = 2;
   479     }
   492     }
   480 }
   493 }
   481 
   494 
   482 Rkns.Renderer.Edge.prototype.mouseup = function(_event) {
   495 Rkns.Renderer.Edge.prototype.mouseup = function(_event) {
   483     if (!this.renderer.is_dragging) {
   496     if (this.renderer.is_dragging) {
       
   497         this.from_representation.saveCoords();
       
   498         this.to_representation.saveCoords();
       
   499     } else {
   484         this.openEditor();
   500         this.openEditor();
   485     }
   501     }
   486     this.renderer.click_target = null;
   502     this.renderer.click_target = null;
   487     this.renderer.is_dragging = false;
   503     this.renderer.is_dragging = false;
   488 }
   504 }
   489 
   505 
   490 Rkns.Renderer.Edge.prototype.paperShift = function(_delta) {
   506 Rkns.Renderer.Edge.prototype.paperShift = function(_delta) {
   491     this.from_representation.paperShift(_delta);
   507     this.from_representation.paperShift(_delta);
   492     this.to_representation.paperShift(_delta);
   508     this.to_representation.paperShift(_delta);
   493     this.renderer.redraw();
       
   494 }
   509 }
   495 
   510 
   496 Rkns.Renderer.Edge.prototype.destroy = function() {
   511 Rkns.Renderer.Edge.prototype.destroy = function() {
   497     this.super("destroy");
   512     this.super("destroy");
   498     this.line.remove();
   513     this.line.remove();
  1093         Rkns.$(this).find(".Rk-TopBar-Tooltip").hide();
  1108         Rkns.$(this).find(".Rk-TopBar-Tooltip").hide();
  1094     });
  1109     });
  1095     
  1110     
  1096     paper.view.onResize = function(_event) {
  1111     paper.view.onResize = function(_event) {
  1097         _this.offset = _this.offset.add(_event.delta.divide(2));
  1112         _this.offset = _this.offset.add(_event.delta.divide(2));
       
  1113         _this.resetCoords();
  1098         _this.redraw();
  1114         _this.redraw();
  1099     }
  1115     }
  1100     
  1116     
  1101     var _thRedraw = Rkns._.throttle(function() {
  1117     var _thRedraw = Rkns._.throttle(function() {
  1102         _this.redraw();
  1118         _this.redraw();
  1168     return _bundle;
  1184     return _bundle;
  1169 }
  1185 }
  1170 
  1186 
  1171 Rkns.Renderer.Scene.prototype.setScale = function(_newScale) {
  1187 Rkns.Renderer.Scene.prototype.setScale = function(_newScale) {
  1172     this.scale = _newScale;
  1188     this.scale = _newScale;
       
  1189     this.resetCoords();
  1173     this.redraw();
  1190     this.redraw();
  1174 }
  1191 }
  1175 
  1192 
  1176 Rkns.Renderer.Scene.prototype.autoScale = function() {
  1193 Rkns.Renderer.Scene.prototype.autoScale = function() {
  1177     var nodes = this.renkan.project.get("nodes")
  1194     var nodes = this.renkan.project.get("nodes")
  1188     }
  1205     }
  1189     if (nodes.length === 1) {
  1206     if (nodes.length === 1) {
  1190         this.offset = paper.view.center.subtract(new paper.Point([nodes.at(0).get("position").x, nodes.at(0).get("position").y]));
  1207         this.offset = paper.view.center.subtract(new paper.Point([nodes.at(0).get("position").x, nodes.at(0).get("position").y]));
  1191         this.setScale(1);
  1208         this.setScale(1);
  1192     }
  1209     }
       
  1210 }
       
  1211 
       
  1212 Rkns.Renderer.Scene.prototype.resetCoords = function(_point) {
       
  1213     _(this.representations).each(function(r) {
       
  1214         r.resetCoords();
       
  1215     });
  1193 }
  1216 }
  1194 
  1217 
  1195 Rkns.Renderer.Scene.prototype.toPaperCoords = function(_point) {
  1218 Rkns.Renderer.Scene.prototype.toPaperCoords = function(_point) {
  1196     return _point.multiply(this.scale).add(this.offset);
  1219     return _point.multiply(this.scale).add(this.offset);
  1197 }
  1220 }
  1310     if (this.is_dragging) {
  1333     if (this.is_dragging) {
  1311         if (this.click_target && typeof this.click_target.paperShift === "function") {
  1334         if (this.click_target && typeof this.click_target.paperShift === "function") {
  1312             this.click_target.paperShift(_event.delta);
  1335             this.click_target.paperShift(_event.delta);
  1313         } else {
  1336         } else {
  1314             this.offset = this.offset.add(_event.delta);
  1337             this.offset = this.offset.add(_event.delta);
       
  1338             this.resetCoords();
  1315             this.redraw();
  1339             this.redraw();
  1316         }
  1340         }
  1317     } else {
  1341     } else {
  1318         this.findTarget(_hitResult);
  1342         this.findTarget(_hitResult);
  1319     }
  1343     }