client/js/paper-renderer.js
changeset 35 10e0c23c849e
parent 34 08a366a35143
child 36 d249d36ecc37
equal deleted inserted replaced
34:08a366a35143 35:10e0c23c849e
     3     _MARGIN_Y: 50,
     3     _MARGIN_Y: 50,
     4     _MIN_DRAG_DISTANCE: 2,
     4     _MIN_DRAG_DISTANCE: 2,
     5     _NODE_RADIUS: 15,
     5     _NODE_RADIUS: 15,
     6     _NODE_BUTTON_INNER: 16,
     6     _NODE_BUTTON_INNER: 16,
     7     _NODE_BUTTON_OUTER: 50,
     7     _NODE_BUTTON_OUTER: 50,
     8     _EDGE_BUTTON_INNER: 3,
     8     _EDGE_BUTTON_INNER: 1,
     9     _EDGE_BUTTON_OUTER: 40,
     9     _EDGE_BUTTON_OUTER: 40,
    10     _NODE_FONT_SIZE: 10,
    10     _NODE_FONT_SIZE: 10,
    11     _EDGE_FONT_SIZE: 9,
    11     _EDGE_FONT_SIZE: 9,
    12     _NODE_MAX_CHAR: 50,
    12     _NODE_MAX_CHAR: 50,
    13     _EDGE_MAX_CHAR: 40,
    13     _EDGE_MAX_CHAR: 40,
   249         }
   249         }
   250     });
   250     });
   251 }
   251 }
   252 
   252 
   253 Rkns.Renderer.Node.prototype.unselect = function(_newTarget) {
   253 Rkns.Renderer.Node.prototype.unselect = function(_newTarget) {
   254     if (!_newTarget || (_newTarget !== this.edit_button && _newTarget !== this.remove_button && _newTarget !== this.link_button)) {
   254     if (!_newTarget || _newTarget.node_representation !== this) {
   255         this.edit_button.hide();
   255         this.edit_button.hide();
   256         this.remove_button.hide();
   256         this.remove_button.hide();
   257         this.link_button.hide();
   257         this.link_button.hide();
   258     }
   258         this.circle.strokeWidth = 1;
   259     this.circle.strokeWidth = 1;
   259         Rkns.$('.Rk-Bin-Item').removeClass("selected");
   260     Rkns.$('.Rk-Bin-Item').removeClass("selected");
   260     }
   261 }
   261 }
   262 
   262 
   263 Rkns.Renderer.Node.prototype.highlight = function() {
   263 Rkns.Renderer.Node.prototype.highlight = function() {
   264     this.circle.fillColor = "#ffffc0";
   264     this.circle.fillColor = "#ffffc0";
   265 }
   265 }
   363     this.edit_button.show();
   363     this.edit_button.show();
   364     this.remove_button.show();
   364     this.remove_button.show();
   365 }
   365 }
   366 
   366 
   367 Rkns.Renderer.Edge.prototype.unselect = function(_newTarget) {
   367 Rkns.Renderer.Edge.prototype.unselect = function(_newTarget) {
   368     if (!_newTarget || (_newTarget !== this.edit_button && _newTarget !== this.remove_button)) {
   368     if (!_newTarget || _newTarget.edge_representation !== this) {
   369         this.edit_button.hide();
   369         this.edit_button.hide();
   370         this.remove_button.hide();
   370         this.remove_button.hide();
   371     }
   371         this.line.strokeWidth = 1;
   372     this.line.strokeWidth = 1;
   372     }
   373 }
   373 }
   374 
   374 
   375 Rkns.Renderer.Edge.prototype.mouseup = function(_event) {
   375 Rkns.Renderer.Edge.prototype.mouseup = function(_event) {
   376     if (!this.renderer.is_dragging) {
   376     if (!this.renderer.is_dragging) {
   377         this.openEditor();
   377         this.openEditor();
   605 /* */
   605 /* */
   606 
   606 
   607 Rkns.Renderer.NodeEditButton = Rkns.Utils.inherit(Rkns.Renderer._BaseRepresentation);
   607 Rkns.Renderer.NodeEditButton = Rkns.Utils.inherit(Rkns.Renderer._BaseRepresentation);
   608 
   608 
   609 Rkns.Renderer.NodeEditButton.prototype._init = function() {
   609 Rkns.Renderer.NodeEditButton.prototype._init = function() {
   610     this.renderer.node_layer.activate();
   610     this.renderer.overlay_layer.activate();
   611     this.type = "Node-edit-button";
   611     this.type = "Node-edit-button";
   612     this.sector = Rkns.Renderer.Utils.sector(this, Rkns.Renderer._NODE_BUTTON_INNER, Rkns.Renderer._NODE_BUTTON_OUTER, - 90, 30, 2, 'img/edit.png');
   612     this.sector = Rkns.Renderer.Utils.sector(this, Rkns.Renderer._NODE_BUTTON_INNER, Rkns.Renderer._NODE_BUTTON_OUTER, - 90, 30, 1, 'img/edit.png');
   613 }
   613 }
   614 
   614 
   615 Rkns.Renderer.NodeEditButton.prototype.moveTo = function(_pos) {
   615 Rkns.Renderer.NodeEditButton.prototype.moveTo = function(_pos) {
   616     this.sector.moveTo(_pos);
   616     this.sector.moveTo(_pos);
   617 }
   617 }
   626 
   626 
   627 Rkns.Renderer.NodeEditButton.prototype.select = function() {
   627 Rkns.Renderer.NodeEditButton.prototype.select = function() {
   628     this.sector.select();
   628     this.sector.select();
   629 }
   629 }
   630 
   630 
   631 Rkns.Renderer.NodeEditButton.prototype.unselect = function() {
   631 Rkns.Renderer.NodeEditButton.prototype.unselect = function(_newTarget) {
   632     this.sector.unselect();
   632     this.sector.unselect();
   633     this.hide();
   633     if (!_newTarget || (_newTarget !== this.node_representation && _newTarget.node_representation !== this.node_representation)) {
   634     this.node_representation.remove_button.hide();
   634         this.node_representation.unselect();
   635     this.node_representation.link_button.hide();
   635     }
   636 }
   636 }
   637 
   637 
   638 Rkns.Renderer.NodeEditButton.prototype.mouseup = function() {
   638 Rkns.Renderer.NodeEditButton.prototype.mouseup = function() {
   639     if (!this.renderer.is_dragging) {
   639     if (!this.renderer.is_dragging) {
   640         this.node_representation.openEditor();
   640         this.node_representation.openEditor();
   648 /* */
   648 /* */
   649 
   649 
   650 Rkns.Renderer.NodeRemoveButton = Rkns.Utils.inherit(Rkns.Renderer._BaseRepresentation);
   650 Rkns.Renderer.NodeRemoveButton = Rkns.Utils.inherit(Rkns.Renderer._BaseRepresentation);
   651 
   651 
   652 Rkns.Renderer.NodeRemoveButton.prototype._init = function() {
   652 Rkns.Renderer.NodeRemoveButton.prototype._init = function() {
   653     this.renderer.node_layer.activate();
   653     this.renderer.overlay_layer.activate();
   654     this.type = "Node-remove-button";
   654     this.type = "Node-remove-button";
   655     this.sector = Rkns.Renderer.Utils.sector(this, Rkns.Renderer._NODE_BUTTON_INNER, Rkns.Renderer._NODE_BUTTON_OUTER, -210, -90, 2, 'img/remove.png');
   655     this.sector = Rkns.Renderer.Utils.sector(this, Rkns.Renderer._NODE_BUTTON_INNER, Rkns.Renderer._NODE_BUTTON_OUTER, -210, -90, 1, 'img/remove.png');
   656 }
   656 }
   657 
   657 
   658 Rkns.Renderer.NodeRemoveButton.prototype.moveTo = function(_pos) {
   658 Rkns.Renderer.NodeRemoveButton.prototype.moveTo = function(_pos) {
   659     this.sector.moveTo(_pos);
   659     this.sector.moveTo(_pos);
   660 }
   660 }
   669 
   669 
   670 Rkns.Renderer.NodeRemoveButton.prototype.select = function() {
   670 Rkns.Renderer.NodeRemoveButton.prototype.select = function() {
   671     this.sector.select();
   671     this.sector.select();
   672 }
   672 }
   673 
   673 
   674 Rkns.Renderer.NodeRemoveButton.prototype.unselect = function() {
   674 Rkns.Renderer.NodeRemoveButton.prototype.unselect = function(_newTarget) {
   675     this.sector.unselect();
   675     this.sector.unselect();
   676     this.hide();
   676     if (!_newTarget || (_newTarget !== this.node_representation && _newTarget.node_representation !== this.node_representation)) {
   677     this.node_representation.edit_button.hide();
   677         this.node_representation.unselect();
   678     this.node_representation.link_button.hide();
   678     }
   679 }
   679 }
   680 
   680 
   681 Rkns.Renderer.NodeRemoveButton.prototype.mouseup = function() {
   681 Rkns.Renderer.NodeRemoveButton.prototype.mouseup = function() {
   682     if (confirm('Do you really wish to remove node "' + this.node_representation.model.get("title") + '"?')) {
   682     if (confirm('Do you really wish to remove node "' + this.node_representation.model.get("title") + '"?')) {
   683         this.project.removeNode(this.node_representation.model);
   683         this.project.removeNode(this.node_representation.model);
   691 /* */
   691 /* */
   692 
   692 
   693 Rkns.Renderer.NodeLinkButton = Rkns.Utils.inherit(Rkns.Renderer._BaseRepresentation);
   693 Rkns.Renderer.NodeLinkButton = Rkns.Utils.inherit(Rkns.Renderer._BaseRepresentation);
   694 
   694 
   695 Rkns.Renderer.NodeLinkButton.prototype._init = function() {
   695 Rkns.Renderer.NodeLinkButton.prototype._init = function() {
   696     this.renderer.node_layer.activate();
   696     this.renderer.overlay_layer.activate();
   697     this.type = "Node-link-button";
   697     this.type = "Node-link-button";
   698     this.sector = Rkns.Renderer.Utils.sector(this, Rkns.Renderer._NODE_BUTTON_INNER, Rkns.Renderer._NODE_BUTTON_OUTER, 30, 150, 2, 'img/link.png');
   698     this.sector = Rkns.Renderer.Utils.sector(this, Rkns.Renderer._NODE_BUTTON_INNER, Rkns.Renderer._NODE_BUTTON_OUTER, 30, 150, 1, 'img/link.png');
   699 }
   699 }
   700 
   700 
   701 Rkns.Renderer.NodeLinkButton.prototype.moveTo = function(_pos) {
   701 Rkns.Renderer.NodeLinkButton.prototype.moveTo = function(_pos) {
   702     this.sector.moveTo(_pos);
   702     this.sector.moveTo(_pos);
   703 }
   703 }
   712 
   712 
   713 Rkns.Renderer.NodeLinkButton.prototype.select = function() {
   713 Rkns.Renderer.NodeLinkButton.prototype.select = function() {
   714     this.sector.select();
   714     this.sector.select();
   715 }
   715 }
   716 
   716 
   717 Rkns.Renderer.NodeLinkButton.prototype.unselect = function() {
   717 Rkns.Renderer.NodeLinkButton.prototype.unselect = function(_newTarget) {
   718     this.sector.unselect();
   718     this.sector.unselect();
   719     this.hide();
   719     if (!_newTarget || (_newTarget !== this.node_representation && _newTarget.node_representation !== this.node_representation)) {
   720     this.node_representation.edit_button.hide();
   720         this.node_representation.unselect();
   721     this.node_representation.remove_button.hide();
   721     }
   722 }
   722 }
   723 
   723 
   724 Rkns.Renderer.NodeLinkButton.prototype.destroy = function() {
   724 Rkns.Renderer.NodeLinkButton.prototype.destroy = function() {
   725     this.sector.destroy();
   725     this.sector.destroy();
   726 }
   726 }
   728 /* */
   728 /* */
   729 
   729 
   730 Rkns.Renderer.EdgeEditButton = Rkns.Utils.inherit(Rkns.Renderer._BaseRepresentation);
   730 Rkns.Renderer.EdgeEditButton = Rkns.Utils.inherit(Rkns.Renderer._BaseRepresentation);
   731 
   731 
   732 Rkns.Renderer.EdgeEditButton.prototype._init = function() {
   732 Rkns.Renderer.EdgeEditButton.prototype._init = function() {
   733     this.renderer.edge_layer.activate();
   733     this.renderer.overlay_layer.activate();
   734     this.type = "Edge-edit-button";
   734     this.type = "Edge-edit-button";
   735     this.sector = Rkns.Renderer.Utils.sector(this, Rkns.Renderer._EDGE_BUTTON_INNER, Rkns.Renderer._EDGE_BUTTON_OUTER, - 60, 60, 2, 'img/edit.png');
   735     this.sector = Rkns.Renderer.Utils.sector(this, Rkns.Renderer._EDGE_BUTTON_INNER, Rkns.Renderer._EDGE_BUTTON_OUTER, - 90, 90, 1, 'img/edit.png');
   736 }
   736 }
   737 
   737 
   738 Rkns.Renderer.EdgeEditButton.prototype.moveTo = function(_pos) {
   738 Rkns.Renderer.EdgeEditButton.prototype.moveTo = function(_pos) {
   739     this.sector.moveTo(_pos);
   739     this.sector.moveTo(_pos);
   740 }
   740 }
   749 
   749 
   750 Rkns.Renderer.EdgeEditButton.prototype.select = function() {
   750 Rkns.Renderer.EdgeEditButton.prototype.select = function() {
   751     this.sector.select();
   751     this.sector.select();
   752 }
   752 }
   753 
   753 
   754 Rkns.Renderer.EdgeEditButton.prototype.unselect = function() {
   754 Rkns.Renderer.EdgeEditButton.prototype.unselect = function(_newTarget) {
   755     this.sector.unselect();
   755     this.sector.unselect();
   756     this.hide();
   756     if (!_newTarget || (_newTarget !== this.edge_representation && _newTarget.edge_representation !== this.edge_representation)) {
   757     this.edge_representation.remove_button.hide();
   757         this.edge_representation.unselect();
       
   758     }
   758 }
   759 }
   759 
   760 
   760 Rkns.Renderer.EdgeEditButton.prototype.mouseup = function() {
   761 Rkns.Renderer.EdgeEditButton.prototype.mouseup = function() {
   761     if (!this.renderer.is_dragging) {
   762     if (!this.renderer.is_dragging) {
   762         this.edge_representation.openEditor();
   763         this.edge_representation.openEditor();
   770 /* */
   771 /* */
   771 
   772 
   772 Rkns.Renderer.EdgeRemoveButton = Rkns.Utils.inherit(Rkns.Renderer._BaseRepresentation);
   773 Rkns.Renderer.EdgeRemoveButton = Rkns.Utils.inherit(Rkns.Renderer._BaseRepresentation);
   773 
   774 
   774 Rkns.Renderer.EdgeRemoveButton.prototype._init = function() {
   775 Rkns.Renderer.EdgeRemoveButton.prototype._init = function() {
   775     this.renderer.edge_layer.activate();
   776     this.renderer.overlay_layer.activate();
   776     this.type = "Edge-remove-button";
   777     this.type = "Edge-remove-button";
   777     this.sector = Rkns.Renderer.Utils.sector(this, Rkns.Renderer._EDGE_BUTTON_INNER, Rkns.Renderer._EDGE_BUTTON_OUTER, - 240, -120, 2, 'img/remove.png');
   778     this.sector = Rkns.Renderer.Utils.sector(this, Rkns.Renderer._EDGE_BUTTON_INNER, Rkns.Renderer._EDGE_BUTTON_OUTER, - 270, -90, 1, 'img/remove.png');
   778 }
   779 }
   779 Rkns.Renderer.EdgeRemoveButton.prototype.moveTo = function(_pos) {
   780 Rkns.Renderer.EdgeRemoveButton.prototype.moveTo = function(_pos) {
   780     this.sector.moveTo(_pos);
   781     this.sector.moveTo(_pos);
   781 }
   782 }
   782 
   783 
   790 
   791 
   791 Rkns.Renderer.EdgeRemoveButton.prototype.select = function() {
   792 Rkns.Renderer.EdgeRemoveButton.prototype.select = function() {
   792     this.sector.select();
   793     this.sector.select();
   793 }
   794 }
   794 
   795 
   795 Rkns.Renderer.EdgeRemoveButton.prototype.unselect = function() {
   796 Rkns.Renderer.EdgeRemoveButton.prototype.unselect = function(_newTarget) {
   796     this.sector.unselect();
   797     this.sector.unselect();
   797     this.hide();
   798     if (!_newTarget || (_newTarget !== this.edge_representation && _newTarget.edge_representation !== this.edge_representation)) {
   798     this.edge_representation.edit_button.hide();
   799         this.edge_representation.unselect();
       
   800     }
   799 }
   801 }
   800 
   802 
   801 Rkns.Renderer.EdgeRemoveButton.prototype.mouseup = function() {
   803 Rkns.Renderer.EdgeRemoveButton.prototype.mouseup = function() {
   802     if (confirm('Do you really wish to remove edge "' + this.edge_representation.model.get("title") + '"?')) {
   804     if (confirm('Do you really wish to remove edge "' + this.edge_representation.model.get("title") + '"?')) {
   803         this.project.removeEdge(this.edge_representation.model);
   805         this.project.removeEdge(this.edge_representation.model);