23 }, |
26 }, |
24 _BOOKMARKLET_CODE: function(_renkan) { |
27 _BOOKMARKLET_CODE: function(_renkan) { |
25 return "(function(a,b,c,d,e,f,h,i,j,k,l,m,n,o,p,q,r){a=document;b=a.body;c=a.location.href;j='draggable';m='text/x-iri-';d=a.createElement('div');d.innerHTML='<p_style=\"position:fixed;top:0;right:0;font:bold_18px_sans-serif;color:#fff;background:#909;padding:10px;z-index:100000;\">" |
28 return "(function(a,b,c,d,e,f,h,i,j,k,l,m,n,o,p,q,r){a=document;b=a.body;c=a.location.href;j='draggable';m='text/x-iri-';d=a.createElement('div');d.innerHTML='<p_style=\"position:fixed;top:0;right:0;font:bold_18px_sans-serif;color:#fff;background:#909;padding:10px;z-index:100000;\">" |
26 + _renkan.translate("Drag items from this website, drop them in Renkan").replace(/ /g,"_") |
29 + _renkan.translate("Drag items from this website, drop them in Renkan").replace(/ /g,"_") |
27 + "</p>'.replace(/_/g,String.fromCharCode(32));b.appendChild(d);e=[{r:/https?:\\/\\/[^\\/]*twitter\\.com\\//,s:'.tweet',n:'twitter'},{r:/https?:\\/\\/[^\\/]*google\\.[^\\/]+\\//,s:'.g',n:'google'},{r:/https?:\\/\\/[^\\/]*lemonde\\.fr\\//,s:'[data-vr-contentbox]',n:'lemonde'}];f=false;e.forEach(function(g){if(g.r.test(c)){f=g;}});if(f){h=function(){Array.prototype.forEach.call(a.querySelectorAll(f.s),function(i){i[j]=true;k=i.style;k.borderWidth='2px';k.borderColor='#909';k.borderStyle='solid';k.backgroundColor='rgba(200,0,180,.1)';})};window.setInterval(h,500);h();};a.addEventListener('dragstart',function(k){l=k.dataTransfer;l.setData(m+'source-uri',c);l.setData(m+'source-title',a.title);n=k.target;if(f){o=n;while(!o.attributes[j]){o=o.parentNode;if(o==b){break;}}}if(f&&o.attributes[j]){p=o.cloneNode(true);l.setData(m+'specific-site',f.n)}else{q=a.getSelection();if(q.type==='Range'||!q.type){p=q.getRangeAt(0).cloneContents();}else{p=n.cloneNode();}}r=a.createElement('div');r.appendChild(p);l.setData('text/x-iri-selected-text',r.textContent.trim());l.setData('text/x-iri-selected-html',r.innerHTML);},false);})();" |
30 + "</p>'.replace(/_/g,String.fromCharCode(32));b.appendChild(d);e=[{r:/https?:\\/\\/[^\\/]*twitter\\.com\\//,s:'.tweet',n:'twitter'},{r:/https?:\\/\\/[^\\/]*google\\.[^\\/]+\\//,s:'.g',n:'google'},{r:/https?:\\/\\/[^\\/]*lemonde\\.fr\\//,s:'[data-vr-contentbox]',n:'lemonde'}];f=false;e.forEach(function(g){if(g.r.test(c)){f=g;}});if(f){h=function(){Array.prototype.forEach.call(a.querySelectorAll(f.s),function(i){i[j]=true;k=i.style;k.borderWidth='2px';k.borderColor='#909';k.borderStyle='solid';k.backgroundColor='rgba(200,0,180,.1)';})};window.setInterval(h,500);h();};a.addEventListener('dragstart',function(k){l=k.dataTransfer;l.setData(m+'source-uri',c);l.setData(m+'source-title',a.title);n=k.target;if(f){o=n;while(!o.attributes[j]){o=o.parentNode;if(o==b){break;}}}if(f&&o.attributes[j]){p=o.cloneNode(true);l.setData(m+'specific-site',f.n)}else{q=a.getSelection();if(q.type==='Range'||!q.type){p=q.getRangeAt(0).cloneContents();}else{p=n.cloneNode();}}r=a.createElement('div');r.appendChild(p);l.setData('text/x-iri-selected-text',r.textContent.trim());l.setData('text/x-iri-selected-html',r.innerHTML);},false);})();" |
28 } |
31 }, |
29 } |
32 shortenText : function(_text, _maxlength) { |
30 |
|
31 Rkns.Renderer.Utils = { |
|
32 shortenText : function(_text, _maxlength) { |
|
33 return (_text.length > _maxlength ? (_text.substr(0,_maxlength) + '…') : _text); |
33 return (_text.length > _maxlength ? (_text.substr(0,_maxlength) + '…') : _text); |
34 }, |
34 }, |
35 drawEditBox : function(_options, _coords, _path, _xmargin, _selector) { |
35 drawEditBox : function(_options, _coords, _path, _xmargin, _selector) { |
36 _selector.css({ |
36 _selector.css({ |
37 width: ( _options.tooltip_width - 2* _options.tooltip_padding ), |
37 width: ( _options.tooltip_width - 2* _options.tooltip_padding ), |
73 _selector.css({ |
73 _selector.css({ |
74 left: (_options.tooltip_padding + Math.min(_left, _right)), |
74 left: (_options.tooltip_padding + Math.min(_left, _right)), |
75 top: (_options.tooltip_padding + _top) |
75 top: (_options.tooltip_padding + _top) |
76 }); |
76 }); |
77 return _path; |
77 return _path; |
78 }, |
|
79 sector : function(_repr, _inR, _outR, _startAngle, _endAngle, _padding, _imgsrc, _caption) { |
|
80 var _options = _repr.renderer.renkan.options, |
|
81 _startRads = _startAngle * Math.PI / 180, |
|
82 _endRads = _endAngle * Math.PI / 180, |
|
83 _img = new Image(), |
|
84 _span = _endRads - _startRads, |
|
85 _startdx = - Math.sin(_startRads), |
|
86 _startdy = Math.cos(_startRads), |
|
87 _startXIn = Math.cos(_startRads) * _inR + _padding * _startdx, |
|
88 _startYIn = Math.sin(_startRads) * _inR + _padding * _startdy, |
|
89 _startXOut = Math.cos(_startRads) * _outR + _padding * _startdx, |
|
90 _startYOut = Math.sin(_startRads) * _outR + _padding * _startdy, |
|
91 _enddx = - Math.sin(_endRads), |
|
92 _enddy = Math.cos(_endRads), |
|
93 _endXIn = Math.cos(_endRads) * _inR - _padding * _enddx, |
|
94 _endYIn = Math.sin(_endRads) * _inR - _padding * _enddy, |
|
95 _endXOut = Math.cos(_endRads) * _outR - _padding * _enddx, |
|
96 _endYOut = Math.sin(_endRads) * _outR - _padding * _enddy, |
|
97 _centerR = (_inR + _outR)/2, |
|
98 _centerRads = (_startRads + _endRads) / 2, |
|
99 _centerX = Math.cos(_centerRads) * _centerR, |
|
100 _centerY = Math.sin(_centerRads) * _centerR, |
|
101 _centerXIn = Math.cos(_centerRads) * _inR, |
|
102 _centerXOut = Math.cos(_centerRads) * _outR, |
|
103 _centerYIn = Math.sin(_centerRads) * _inR, |
|
104 _centerYOut = Math.sin(_centerRads) * _outR, |
|
105 _textX = Math.cos(_centerRads) * (_outR + 3), |
|
106 _textY = Math.sin(_centerRads) * (_outR + _options.buttons_label_font_size) + _options.buttons_label_font_size / 2, |
|
107 _segments = []; |
|
108 _repr.renderer.buttons_layer.activate(); |
|
109 var _path = new paper.Path(); |
|
110 _path.add([_startXIn, _startYIn]); |
|
111 _path.arcTo([_centerXIn, _centerYIn], [_endXIn, _endYIn]); |
|
112 _path.lineTo([_endXOut, _endYOut]); |
|
113 _path.arcTo([_centerXOut, _centerYOut], [_startXOut, _startYOut]); |
|
114 _path.fillColor = _options.buttons_background; |
|
115 _path.opacity = .5; |
|
116 _path.closed = true; |
|
117 _path.__representation = _repr; |
|
118 var _text = new paper.PointText(_textX,_textY); |
|
119 _text.characterStyle = { |
|
120 fontSize: _options.buttons_label_font_size, |
|
121 fillColor: _options.buttons_label_color |
|
122 }; |
|
123 if (_textX > 2) { |
|
124 _text.paragraphStyle.justification = 'left'; |
|
125 } else if (_textX < -2) { |
|
126 _text.paragraphStyle.justification = 'right'; |
|
127 } else { |
|
128 _text.paragraphStyle.justification = 'center'; |
|
129 } |
|
130 _text.visible = false; |
|
131 var _visible = false, |
|
132 _restPos = new paper.Point(-200, -200), |
|
133 _grp = new paper.Group([_path, _text]), |
|
134 _delta = _grp.position, |
|
135 _imgdelta = new paper.Point([_centerX, _centerY]), |
|
136 _currentPos = new paper.Point(0,0); |
|
137 _text.content = _caption; |
|
138 _grp.visible = false; |
|
139 _grp.position = _restPos; |
|
140 var _res = { |
|
141 show: function() { |
|
142 _visible = true; |
|
143 _grp.position = _currentPos.add(_delta); |
|
144 _grp.visible = true; |
|
145 }, |
|
146 moveTo: function(_point) { |
|
147 _currentPos = _point; |
|
148 if (_visible) { |
|
149 _grp.position = _point.add(_delta); |
|
150 } |
|
151 }, |
|
152 hide: function() { |
|
153 _visible = false; |
|
154 _grp.visible = false; |
|
155 _grp.position = _restPos; |
|
156 }, |
|
157 select: function() { |
|
158 _path.opacity = .8; |
|
159 _text.visible = true; |
|
160 }, |
|
161 unselect: function() { |
|
162 _path.opacity = .5; |
|
163 _text.visible = false; |
|
164 }, |
|
165 destroy: function() { |
|
166 _grp.remove(); |
|
167 } |
|
168 } |
|
169 _img.onload = function() { |
|
170 var _h = _img.height; |
|
171 var _raster = new paper.Raster(_img); |
|
172 _raster.position = _imgdelta.add(_grp.position).subtract(_delta); |
|
173 _grp.addChild(_raster); |
|
174 _repr.renderer.throttledPaperDraw(); |
|
175 } |
|
176 _img.src = _imgsrc; |
|
177 return _res |
|
178 } |
78 } |
179 } |
79 } |
180 |
80 |
181 Rkns.Renderer._BaseRepresentation = function(_renderer, _model) { |
81 Rkns.Renderer._BaseRepresentation = function(_renderer, _model) { |
182 if (typeof _renderer !== "undefined") { |
82 if (typeof _renderer !== "undefined") { |
802 this.line.remove(); |
702 this.line.remove(); |
803 } |
703 } |
804 |
704 |
805 /* */ |
705 /* */ |
806 |
706 |
807 Rkns.Renderer.NodeEditor = Rkns.Utils.inherit(Rkns.Renderer._BaseRepresentation); |
707 Rkns.Renderer._BaseEditor = Rkns.Utils.inherit(Rkns.Renderer._BaseRepresentation); |
808 |
708 |
809 Rkns.Renderer.NodeEditor.prototype._init = function() { |
709 Rkns.Renderer._BaseEditor.prototype.destroy = function() { |
810 this.renderer.buttons_layer.activate(); |
710 this.editor_block.remove(); |
811 this.type = "editor"; |
711 this.editor_$.detach(); |
812 this.editor_block = new paper.Path(); |
712 } |
813 var _pts = Rkns._(Rkns._.range(8)).map(function() {return [0,0]}); |
713 |
814 this.editor_block.add.apply(this.editor_block, _pts); |
714 /* */ |
815 this.editor_block.strokeWidth = this.options.tooltip_border_width; |
715 |
816 this.editor_block.strokeColor = this.options.tooltip_border_color; |
716 Rkns.Renderer.NodeEditor = Rkns.Utils.inherit(Rkns.Renderer._BaseEditor); |
817 this.editor_block.opacity = .8; |
|
818 this.editor_$ = Rkns.$('<div>') |
|
819 .appendTo(this.renderer.editor_$) |
|
820 .css({ |
|
821 position: "absolute", |
|
822 opacity: .8 |
|
823 }) |
|
824 .hide(); |
|
825 } |
|
826 |
717 |
827 Rkns.Renderer.NodeEditor.prototype.template = Rkns._.template( |
718 Rkns.Renderer.NodeEditor.prototype.template = Rkns._.template( |
828 '<h2><span class="Rk-CloseX">×</span><%-translate("Edit Node")%></span></h2>' |
719 '<h2><span class="Rk-CloseX">×</span><%-renkan.translate("Edit Node")%></span></h2>' |
829 + '<p><label><%-translate("Title:")%></label><input class="Rk-Edit-Title" type="text" value="<%-node.title%>"/></p>' |
720 + '<p><label><%-renkan.translate("Title:")%></label><input class="Rk-Edit-Title" type="text" value="<%-node.title%>"/></p>' |
830 + '<p><label><%-translate("URI:")%></label><input class="Rk-Edit-URI" type="text" value="<%-node.uri%>"/><a class="Rk-Edit-Goto" href="<%-node.uri%>" target="_blank"></a></p>' |
721 + '<p><label><%-renkan.translate("URI:")%></label><input class="Rk-Edit-URI" type="text" value="<%-node.uri%>"/><a class="Rk-Edit-Goto" href="<%-node.uri%>" target="_blank"></a></p>' |
831 + '<p><label><%-translate("Description:")%></label><textarea class="Rk-Edit-Description"><%-node.description%></textarea></p>' |
722 + '<p><label><%-renkan.translate("Description:")%></label><textarea class="Rk-Edit-Description"><%-node.description%></textarea></p>' |
832 + '<p><span class="Rk-Editor-Label"><%-translate("Size:")%></span><a href="#" class="Rk-Edit-Size-Down">-</a><span class="Rk-Edit-Size-Value"><%-node.size%></span><a href="#" class="Rk-Edit-Size-Up">+</a></p>' |
723 + '<p><span class="Rk-Editor-Label"><%-renkan.translate("Size:")%></span><a href="#" class="Rk-Edit-Size-Down">-</a><span class="Rk-Edit-Size-Value"><%-node.size%></span><a href="#" class="Rk-Edit-Size-Up">+</a></p>' |
833 + '<div class="Rk-Editor-p"><span class="Rk-Editor-Label"><%-translate("Node color:")%></span><div class="Rk-Edit-ColorPicker-Wrapper"><span class="Rk-Edit-Color" style="background:<%-node.color%>;"><span class="Rk-Edit-ColorTip"></span></span><ul class="Rk-Edit-ColorPicker">' |
724 + '<div class="Rk-Editor-p"><span class="Rk-Editor-Label"><%-renkan.translate("Node color:")%></span><div class="Rk-Edit-ColorPicker-Wrapper"><span class="Rk-Edit-Color" style="background:<%-node.color%>;"><span class="Rk-Edit-ColorTip"></span></span><ul class="Rk-Edit-ColorPicker">' |
834 + '<% _(Rkns.pickerColors).each(function(c) { %><li data-color="<%=c%>" style="background: <%=c%>"></li><% }); %></ul><span class="Rk-Edit-ColorPicker-Text"><%- translate("Choose color") %></span></div></div>' |
725 + '<% _(Rkns.pickerColors).each(function(c) { %><li data-color="<%=c%>" style="background: <%=c%>"></li><% }); %></ul><span class="Rk-Edit-ColorPicker-Text"><%- renkan.translate("Choose color") %></span></div></div>' |
835 + '<img class="Rk-Edit-ImgPreview" src="<%-node.image || node.image_placeholder%>" />' |
726 + '<img class="Rk-Edit-ImgPreview" src="<%-node.image || node.image_placeholder%>" />' |
836 + '<p><label><%-translate("Image URL:")%></label><input class="Rk-Edit-Image" type="text" value="<%-node.image%>"/></p>' |
727 + '<p><label><%-renkan.translate("Image URL:")%></label><input class="Rk-Edit-Image" type="text" value="<%-node.image%>"/></p>' |
837 + '<p><label><%-translate("Choose Image File:")%></label><input class="Rk-Edit-Image-File" type="file" accept="image/*"/></p>' |
728 + '<p><label><%-renkan.translate("Choose Image File:")%></label><input class="Rk-Edit-Image-File" type="file" accept="image/*"/></p>' |
838 + '<% if (node.has_creator) { %><p><span class="Rk-Editor-Label"><%-translate("Created by:")%></span> <span class="Rk-UserColor" style="background:<%-node.created_by_color%>;"></span><%- Rkns.Renderer.Utils.shortenText(node.created_by_title, 25) %></p><% } %>' |
729 + '<% if (node.has_creator) { %><p><span class="Rk-Editor-Label"><%-renkan.translate("Created by:")%></span> <span class="Rk-UserColor" style="background:<%-node.created_by_color%>;"></span><%- Rkns.Renderer.shortenText(node.created_by_title, 25) %></p><% } %>' |
839 ); |
730 ); |
840 |
731 |
841 Rkns.Renderer.NodeEditor.prototype.readOnlyTemplate = Rkns._.template( |
732 Rkns.Renderer.NodeEditor.prototype.readOnlyTemplate = Rkns._.template( |
842 '<h2><span class="Rk-CloseX">×</span><span class="Rk-UserColor" style="background:<%-node.color%>;"></span>' |
733 '<h2><span class="Rk-CloseX">×</span><span class="Rk-UserColor" style="background:<%-node.color%>;"></span>' |
843 + '<span class="Rk-Display-Title"><% if (node.uri) { %><a href="<%-node.uri%>" target="_blank"><% } %><%-node.title%><% if (node.uri) { %></a><% } %></span></h2>' |
734 + '<span class="Rk-Display-Title"><% if (node.uri) { %><a href="<%-node.uri%>" target="_blank"><% } %><%-node.title%><% if (node.uri) { %></a><% } %></span></h2>' |
844 + '<% if (node.uri) { %><p class="Rk-Display-URI"><a href="<%-node.uri%>" target="_blank"><%-node.short_uri%></a></p><% } %>' |
735 + '<% if (node.uri) { %><p class="Rk-Display-URI"><a href="<%-node.uri%>" target="_blank"><%-node.short_uri%></a></p><% } %>' |
845 + '<p><%-node.description%></p>' |
736 + '<p><%-node.description%></p>' |
846 + '<% if (node.image) { %><img class="Rk-Display-ImgPreview" src="<%-node.image%>" /><% } %>' |
737 + '<% if (node.image) { %><img class="Rk-Display-ImgPreview" src="<%-node.image%>" /><% } %>' |
847 + '<% if (node.has_creator) { %><p><span class="Rk-Editor-Label"><%-translate("Created by:")%></span><span class="Rk-UserColor" style="background:<%-node.created_by_color%>;"></span><%- Rkns.Renderer.Utils.shortenText(node.created_by_title, 25) %></p><% } %>' |
738 + '<% if (node.has_creator) { %><p><span class="Rk-Editor-Label"><%-renkan.translate("Created by:")%></span><span class="Rk-UserColor" style="background:<%-node.created_by_color%>;"></span><%- Rkns.Renderer.shortenText(node.created_by_title, 25) %></p><% } %>' |
848 ); |
739 ); |
849 |
740 |
850 Rkns.Renderer.NodeEditor.prototype.draw = function() { |
741 Rkns.Renderer.NodeEditor.prototype.draw = function() { |
851 var _model = this.source_representation.model, |
742 var _model = this.source_representation.model, |
852 _created_by = _model.get("created_by") || Rkns.Renderer._USER_PLACEHOLDER(this.renkan), |
743 _created_by = _model.get("created_by") || Rkns.Renderer._USER_PLACEHOLDER(this.renkan), |
857 .html(_template({ |
748 .html(_template({ |
858 node: { |
749 node: { |
859 has_creator: !!_model.get("created_by"), |
750 has_creator: !!_model.get("created_by"), |
860 title: _model.get("title"), |
751 title: _model.get("title"), |
861 uri: _model.get("uri"), |
752 uri: _model.get("uri"), |
862 short_uri: Rkns.Renderer.Utils.shortenText((_model.get("uri") || "").replace(/^(https?:\/\/)?(www\.)?/,'').replace(/\/$/,''),40), |
753 short_uri: Rkns.Renderer.shortenText((_model.get("uri") || "").replace(/^(https?:\/\/)?(www\.)?/,'').replace(/\/$/,''),40), |
863 description: _model.get("description"), |
754 description: _model.get("description"), |
864 image: _model.get("image") || "", |
755 image: _model.get("image") || "", |
865 image_placeholder: _image_placeholder, |
756 image_placeholder: _image_placeholder, |
866 color: _model.get("color") || _created_by.get("color"), |
757 color: _model.get("color") || _created_by.get("color"), |
867 created_by_color: _created_by.get("color"), |
758 created_by_color: _created_by.get("color"), |
868 created_by_title: _created_by.get("title"), |
759 created_by_title: _created_by.get("title"), |
869 size: (_size > 0 ? "+" : "") + _size |
760 size: (_size > 0 ? "+" : "") + _size |
870 }, |
761 }, |
871 translate: this.renkan.translate |
762 renkan: this.renkan |
872 })); |
763 })); |
873 this.redraw(); |
764 this.redraw(); |
874 var _this = this, |
765 var _this = this, |
875 closeEditor = function() { |
766 closeEditor = function() { |
876 _this.renderer.removeRepresentation(_this); |
767 _this.renderer.removeRepresentation(_this); |
929 } |
820 } |
930 fr.readAsDataURL(f); |
821 fr.readAsDataURL(f); |
931 } |
822 } |
932 }); |
823 }); |
933 this.editor_$.find(".Rk-Edit-Title")[0].focus(); |
824 this.editor_$.find(".Rk-Edit-Title")[0].focus(); |
|
825 |
|
826 var _picker = _this.editor_$.find(".Rk-Edit-ColorPicker"); |
|
827 |
934 this.editor_$.find(".Rk-Edit-ColorPicker-Wrapper").hover( |
828 this.editor_$.find(".Rk-Edit-ColorPicker-Wrapper").hover( |
935 function() { _this.editor_$.find(".Rk-Edit-ColorPicker").show(); }, |
829 function(_e) { |
936 function() { _this.editor_$.find(".Rk-Edit-ColorPicker").hide(); } |
830 _e.preventDefault(); |
|
831 _picker.show(); |
|
832 }, |
|
833 function(_e) { |
|
834 _e.preventDefault(); |
|
835 _picker.hide(); |
|
836 } |
937 ); |
837 ); |
938 this.editor_$.find(".Rk-Edit-ColorPicker li").hover( |
838 |
939 function() { _this.editor_$.find(".Rk-Edit-Color").css("background", $(this).attr("data-color")); }, |
839 _picker.find("li").hover( |
940 function() { _this.editor_$.find(".Rk-Edit-Color").css("background", _model.get("color") || (_model.get("created_by") || Rkns.Renderer._USER_PLACEHOLDER(_this.renkan)).get("color")) } |
840 function(_e) { |
941 ).click(function() { |
841 _e.preventDefault(); |
|
842 _this.editor_$.find(".Rk-Edit-Color").css("background", $(this).attr("data-color")); |
|
843 }, |
|
844 function(_e) { |
|
845 _e.preventDefault(); |
|
846 _this.editor_$.find(".Rk-Edit-Color").css("background", _model.get("color") || (_model.get("created_by") || Rkns.Renderer._USER_PLACEHOLDER(_this.renkan)).get("color")) |
|
847 } |
|
848 ).click(function(_e) { |
|
849 _e.preventDefault(); |
942 if (_this.renderer.isEditable()) { |
850 if (_this.renderer.isEditable()) { |
943 _model.set("color", $(this).attr("data-color")); |
851 _model.set("color", $(this).attr("data-color")); |
|
852 _picker.hide(); |
944 paper.view.draw(); |
853 paper.view.draw(); |
945 } else { |
854 } else { |
946 closeEditor(); |
855 closeEditor(); |
947 } |
856 } |
948 }); |
857 }); |
972 }); |
881 }); |
973 } |
882 } |
974 |
883 |
975 Rkns.Renderer.NodeEditor.prototype.redraw = function() { |
884 Rkns.Renderer.NodeEditor.prototype.redraw = function() { |
976 var _coords = this.source_representation.paper_coords; |
885 var _coords = this.source_representation.paper_coords; |
977 Rkns.Renderer.Utils.drawEditBox(this.options, _coords, this.editor_block, this.source_representation.circle_radius * .75, this.editor_$); |
886 Rkns.Renderer.drawEditBox(this.options, _coords, this.editor_block, this.source_representation.circle_radius * .75, this.editor_$); |
978 this.editor_$.show(); |
887 this.editor_$.show(); |
979 paper.view.draw(); |
888 paper.view.draw(); |
980 } |
889 } |
981 |
890 |
982 Rkns.Renderer.NodeEditor.prototype.destroy = function() { |
|
983 this.editor_block.remove(); |
|
984 this.editor_$.detach(); |
|
985 } |
|
986 |
|
987 /* */ |
891 /* */ |
988 |
892 |
989 Rkns.Renderer.EdgeEditor = Rkns.Utils.inherit(Rkns.Renderer._BaseRepresentation); |
893 Rkns.Renderer.EdgeEditor = Rkns.Utils.inherit(Rkns.Renderer._BaseEditor); |
990 |
894 |
991 Rkns.Renderer.EdgeEditor.prototype._init = function() { |
895 Rkns.Renderer.EdgeEditor.prototype._init = function() { |
992 this.renderer.buttons_layer.activate(); |
896 this.renderer.buttons_layer.activate(); |
993 this.type = "editor"; |
897 this.type = "editor"; |
994 this.editor_block = new paper.Path(); |
898 this.editor_block = new paper.Path(); |
1005 }) |
909 }) |
1006 .hide(); |
910 .hide(); |
1007 } |
911 } |
1008 |
912 |
1009 Rkns.Renderer.EdgeEditor.prototype.template = Rkns._.template( |
913 Rkns.Renderer.EdgeEditor.prototype.template = Rkns._.template( |
1010 '<h2><span class="Rk-CloseX">×</span><%-translate("Edit Edge")%></span></h2>' |
914 '<h2><span class="Rk-CloseX">×</span><%-renkan.translate("Edit Edge")%></span></h2>' |
1011 + '<p><label><%-translate("Title:")%></label><input class="Rk-Edit-Title" type="text" value="<%-edge.title%>"/></p>' |
915 + '<p><label><%-renkan.translate("Title:")%></label><input class="Rk-Edit-Title" type="text" value="<%-edge.title%>"/></p>' |
1012 + '<p><label><%-translate("URI:")%></label><input class="Rk-Edit-URI" type="text" value="<%-edge.uri%>"/><a class="Rk-Edit-Goto" href="<%-edge.uri%>" target="_blank"></a></p>' |
916 + '<p><label><%-renkan.translate("URI:")%></label><input class="Rk-Edit-URI" type="text" value="<%-edge.uri%>"/><a class="Rk-Edit-Goto" href="<%-edge.uri%>" target="_blank"></a></p>' |
1013 + '<% if (properties.length) { %><p><label><%-translate("Choose from vocabulary:")%></label><select class="Rk-Edit-Vocabulary">' |
917 + '<% if (properties.length) { %><p><label><%-renkan.translate("Choose from vocabulary:")%></label><select class="Rk-Edit-Vocabulary">' |
1014 + '<% _(properties).each(function(ontology) { %><option class="Rk-Edit-Vocabulary-Class" value=""><%- translate(ontology.label) %></option>' |
918 + '<% _(properties).each(function(ontology) { %><option class="Rk-Edit-Vocabulary-Class" value=""><%- renkan.translate(ontology.label) %></option>' |
1015 + '<% _(ontology.properties).each(function(property) { var uri = ontology["base-uri"] + property.uri; %><option class="Rk-Edit-Vocabulary-Property" value="<%- uri %>' |
919 + '<% _(ontology.properties).each(function(property) { var uri = ontology["base-uri"] + property.uri; %><option class="Rk-Edit-Vocabulary-Property" value="<%- uri %>' |
1016 + '"<% if (uri === edge.uri) { %> selected<% } %>><%- translate(property.label) %></option>' |
920 + '"<% if (uri === edge.uri) { %> selected<% } %>><%- renkan.translate(property.label) %></option>' |
1017 + '<% }) %><% }) %></select></p><% } %>' |
921 + '<% }) %><% }) %></select></p><% } %>' |
1018 + '<div class="Rk-Editor-p"><span class="Rk-Editor-Label"><%-translate("Edge color:")%></span><div class="Rk-Edit-ColorPicker-Wrapper"><span class="Rk-Edit-Color" style="background:<%-edge.color%>;"><span class="Rk-Edit-ColorTip"></span></span><ul class="Rk-Edit-ColorPicker">' |
922 + '<div class="Rk-Editor-p"><span class="Rk-Editor-Label"><%-renkan.translate("Edge color:")%></span><div class="Rk-Edit-ColorPicker-Wrapper"><span class="Rk-Edit-Color" style="background:<%-edge.color%>;"><span class="Rk-Edit-ColorTip"></span></span><ul class="Rk-Edit-ColorPicker">' |
1019 + '<% _(Rkns.pickerColors).each(function(c) { %><li data-color="<%=c%>" style="background: <%=c%>"></li><% }); %></ul><span class="Rk-Edit-ColorPicker-Text"><%- translate("Choose color") %></span></div></div>' |
923 + '<% _(Rkns.pickerColors).each(function(c) { %><li data-color="<%=c%>" style="background: <%=c%>"></li><% }); %></ul><span class="Rk-Edit-ColorPicker-Text"><%- renkan.translate("Choose color") %></span></div></div>' |
1020 + '<p><span class="Rk-Edit-Direction"><%- translate("Change edge direction") %></span></p>' |
924 + '<p><span class="Rk-Edit-Direction"><%- renkan.translate("Change edge direction") %></span></p>' |
1021 + '<p><span class="Rk-Editor-Label"><%-translate("From:")%></span><span class="Rk-UserColor" style="background:<%-edge.from_color%>;"></span><%- Rkns.Renderer.Utils.shortenText(edge.from_title, 25) %></p>' |
925 + '<p><span class="Rk-Editor-Label"><%-renkan.translate("From:")%></span><span class="Rk-UserColor" style="background:<%-edge.from_color%>;"></span><%- Rkns.Renderer.shortenText(edge.from_title, 25) %></p>' |
1022 + '<p><span class="Rk-Editor-Label"><%-translate("To:")%></span><span class="Rk-UserColor" style="background:<%-edge.to_color%>;"></span><%- Rkns.Renderer.Utils.shortenText(edge.to_title, 25) %></p>' |
926 + '<p><span class="Rk-Editor-Label"><%-renkan.translate("To:")%></span><span class="Rk-UserColor" style="background:<%-edge.to_color%>;"></span><%- Rkns.Renderer.shortenText(edge.to_title, 25) %></p>' |
1023 + '<% if (edge.has_creator) { %><p><span class="Rk-Editor-Label"><%-translate("Created by:")%></span><span class="Rk-UserColor" style="background:<%-edge.created_by_color%>;"></span><%- Rkns.Renderer.Utils.shortenText(edge.created_by_title, 25) %></p><% } %>' |
927 + '<% if (edge.has_creator) { %><p><span class="Rk-Editor-Label"><%-renkan.translate("Created by:")%></span><span class="Rk-UserColor" style="background:<%-edge.created_by_color%>;"></span><%- Rkns.Renderer.shortenText(edge.created_by_title, 25) %></p><% } %>' |
1024 ); |
928 ); |
1025 |
929 |
1026 Rkns.Renderer.EdgeEditor.prototype.readOnlyTemplate = Rkns._.template( |
930 Rkns.Renderer.EdgeEditor.prototype.readOnlyTemplate = Rkns._.template( |
1027 '<h2><span class="Rk-CloseX">×</span><span class="Rk-UserColor" style="background:<%-edge.color%>;"></span>' |
931 '<h2><span class="Rk-CloseX">×</span><span class="Rk-UserColor" style="background:<%-edge.color%>;"></span>' |
1028 + '<span class="Rk-Display-Title"><% if (edge.uri) { %><a href="<%-edge.uri%>" target="_blank"><% } %><%-edge.title%><% if (edge.uri) { %></a><% } %></span></h2>' |
932 + '<span class="Rk-Display-Title"><% if (edge.uri) { %><a href="<%-edge.uri%>" target="_blank"><% } %><%-edge.title%><% if (edge.uri) { %></a><% } %></span></h2>' |
1029 + '<% if (edge.uri) { %><p class="Rk-Display-URI"><a href="<%-edge.uri%>" target="_blank"><%-edge.short_uri%></a></p><% } %>' |
933 + '<% if (edge.uri) { %><p class="Rk-Display-URI"><a href="<%-edge.uri%>" target="_blank"><%-edge.short_uri%></a></p><% } %>' |
1030 + '<p><%-edge.description%></p>' |
934 + '<p><%-edge.description%></p>' |
1031 + '<p><span class="Rk-Editor-Label"><%-translate("From:")%></span><span class="Rk-UserColor" style="background:<%-edge.from_color%>;"></span><%- Rkns.Renderer.Utils.shortenText(edge.from_title, 25) %></p>' |
935 + '<p><span class="Rk-Editor-Label"><%-renkan.translate("From:")%></span><span class="Rk-UserColor" style="background:<%-edge.from_color%>;"></span><%- Rkns.Renderer.shortenText(edge.from_title, 25) %></p>' |
1032 + '<p><span class="Rk-Editor-Label"><%-translate("To:")%></span><span class="Rk-UserColor" style="background:<%-edge.to_color%>;"></span><%- Rkns.Renderer.Utils.shortenText(edge.to_title, 25) %></p>' |
936 + '<p><span class="Rk-Editor-Label"><%-renkan.translate("To:")%></span><span class="Rk-UserColor" style="background:<%-edge.to_color%>;"></span><%- Rkns.Renderer.shortenText(edge.to_title, 25) %></p>' |
1033 + '<% if (edge.has_creator) { %><p><span class="Rk-Editor-Label"><%-translate("Created by:")%></span><span class="Rk-UserColor" style="background:<%-edge.created_by_color%>;"></span><%- Rkns.Renderer.Utils.shortenText(edge.created_by_title, 25) %></p><% } %>' |
937 + '<% if (edge.has_creator) { %><p><span class="Rk-Editor-Label"><%-renkan.translate("Created by:")%></span><span class="Rk-UserColor" style="background:<%-edge.created_by_color%>;"></span><%- Rkns.Renderer.shortenText(edge.created_by_title, 25) %></p><% } %>' |
1034 ); |
938 ); |
1035 |
939 |
1036 Rkns.Renderer.EdgeEditor.prototype.draw = function() { |
940 Rkns.Renderer.EdgeEditor.prototype.draw = function() { |
1037 var _model = this.source_representation.model, |
941 var _model = this.source_representation.model, |
1038 _from_model = _model.get("from"), |
942 _from_model = _model.get("from"), |
1043 .html(_template({ |
947 .html(_template({ |
1044 edge: { |
948 edge: { |
1045 has_creator: !!_model.get("created_by"), |
949 has_creator: !!_model.get("created_by"), |
1046 title: _model.get("title"), |
950 title: _model.get("title"), |
1047 uri: _model.get("uri"), |
951 uri: _model.get("uri"), |
1048 short_uri: Rkns.Renderer.Utils.shortenText((_model.get("uri") || "").replace(/^(https?:\/\/)?(www\.)?/,'').replace(/\/$/,''),40), |
952 short_uri: Rkns.Renderer.shortenText((_model.get("uri") || "").replace(/^(https?:\/\/)?(www\.)?/,'').replace(/\/$/,''),40), |
1049 description: _model.get("description"), |
953 description: _model.get("description"), |
1050 color: _model.get("color") || _created_by.get("color"), |
954 color: _model.get("color") || _created_by.get("color"), |
1051 from_title: _from_model.get("title"), |
955 from_title: _from_model.get("title"), |
1052 to_title: _to_model.get("title"), |
956 to_title: _to_model.get("title"), |
1053 from_color: _from_model.get("color") || (_from_model.get("created_by") || Rkns.Renderer._USER_PLACEHOLDER(this.renkan)).get("color"), |
957 from_color: _from_model.get("color") || (_from_model.get("created_by") || Rkns.Renderer._USER_PLACEHOLDER(this.renkan)).get("color"), |
1054 to_color: _to_model.get("color") || (_to_model.get("created_by") || Rkns.Renderer._USER_PLACEHOLDER(this.renkan)).get("color"), |
958 to_color: _to_model.get("color") || (_to_model.get("created_by") || Rkns.Renderer._USER_PLACEHOLDER(this.renkan)).get("color"), |
1055 created_by_color: _created_by.get("color"), |
959 created_by_color: _created_by.get("color"), |
1056 created_by_title: _created_by.get("title") |
960 created_by_title: _created_by.get("title") |
1057 }, |
961 }, |
1058 translate: this.renkan.translate, |
962 renkan: this.renkan, |
1059 properties: this.options.properties |
963 properties: this.options.properties |
1060 })); |
964 })); |
1061 this.redraw(); |
965 this.redraw(); |
1062 var _this = this, |
966 var _this = this, |
1063 closeEditor = function() { |
967 closeEditor = function() { |
1110 _this.draw(); |
1014 _this.draw(); |
1111 } else { |
1015 } else { |
1112 closeEditor(); |
1016 closeEditor(); |
1113 } |
1017 } |
1114 }); |
1018 }); |
|
1019 |
|
1020 var _picker = _this.editor_$.find(".Rk-Edit-ColorPicker"); |
|
1021 |
1115 this.editor_$.find(".Rk-Edit-ColorPicker-Wrapper").hover( |
1022 this.editor_$.find(".Rk-Edit-ColorPicker-Wrapper").hover( |
1116 function() { _this.editor_$.find(".Rk-Edit-ColorPicker").show(); }, |
1023 function(_e) { |
1117 function() { _this.editor_$.find(".Rk-Edit-ColorPicker").hide(); } |
1024 _e.preventDefault(); |
|
1025 _picker.show(); |
|
1026 }, |
|
1027 function(_e) { |
|
1028 _e.preventDefault(); |
|
1029 _picker.hide(); |
|
1030 } |
1118 ); |
1031 ); |
1119 this.editor_$.find(".Rk-Edit-ColorPicker li").hover( |
1032 |
1120 function() { _this.editor_$.find(".Rk-Edit-Color").css("background", $(this).attr("data-color")); }, |
1033 _picker.find("li").hover( |
1121 function() { _this.editor_$.find(".Rk-Edit-Color").css("background", _model.get("color") || (_model.get("created_by") || Rkns.Renderer._USER_PLACEHOLDER(this.renkan)).get("color")); } |
1034 function(_e) { |
1122 ).click(function() { |
1035 _e.preventDefault(); |
1123 if (_this.renderer.isEditable()) { |
1036 _this.editor_$.find(".Rk-Edit-Color").css("background", $(this).attr("data-color")); |
1124 _model.set("color", $(this).attr("data-color")); |
1037 }, |
1125 paper.view.draw(); |
1038 function(_e) { |
|
1039 _e.preventDefault(); |
|
1040 _this.editor_$.find(".Rk-Edit-Color").css("background", _model.get("color") || (_model.get("created_by") || Rkns.Renderer._USER_PLACEHOLDER(_this.renkan)).get("color")) |
|
1041 } |
|
1042 ).click(function(_e) { |
|
1043 _e.preventDefault(); |
|
1044 if (_this.renderer.isEditable()) { |
|
1045 _model.set("color", $(this).attr("data-color")); |
|
1046 _picker.hide(); |
|
1047 paper.view.draw(); |
1126 } else { |
1048 } else { |
1127 closeEditor(); |
1049 closeEditor(); |
1128 } |
1050 } |
1129 }); |
1051 }); |
1130 } |
1052 } |
1131 } |
1053 } |
1132 |
1054 |
1133 Rkns.Renderer.EdgeEditor.prototype.redraw = function() { |
1055 Rkns.Renderer.EdgeEditor.prototype.redraw = function() { |
1134 var _coords = this.source_representation.paper_coords; |
1056 var _coords = this.source_representation.paper_coords; |
1135 Rkns.Renderer.Utils.drawEditBox(this.options, _coords, this.editor_block, 5, this.editor_$); |
1057 Rkns.Renderer.drawEditBox(this.options, _coords, this.editor_block, 5, this.editor_$); |
1136 this.editor_$.show(); |
1058 this.editor_$.show(); |
1137 paper.view.draw(); |
1059 paper.view.draw(); |
1138 } |
1060 } |
1139 |
1061 |
1140 Rkns.Renderer.EdgeEditor.prototype.destroy = function() { |
1062 /* */ |
1141 this.editor_block.remove(); |
1063 |
1142 this.editor_$.detach(); |
1064 Rkns.Renderer._BaseEditor.prototype._init = function() { |
|
1065 this.renderer.buttons_layer.activate(); |
|
1066 this.type = "editor"; |
|
1067 this.editor_block = new paper.Path(); |
|
1068 var _pts = Rkns._(Rkns._.range(8)).map(function() {return [0,0]}); |
|
1069 this.editor_block.add.apply(this.editor_block, _pts); |
|
1070 this.editor_block.strokeWidth = this.options.tooltip_border_width; |
|
1071 this.editor_block.strokeColor = this.options.tooltip_border_color; |
|
1072 this.editor_block.opacity = .8; |
|
1073 this.editor_$ = Rkns.$('<div>') |
|
1074 .appendTo(this.renderer.editor_$) |
|
1075 .css({ |
|
1076 position: "absolute", |
|
1077 opacity: .8 |
|
1078 }) |
|
1079 .hide(); |
1143 } |
1080 } |
1144 |
1081 |
1145 /* */ |
1082 /* */ |
1146 |
1083 |
1147 Rkns.Renderer._NodeButton = Rkns.Utils.inherit(Rkns.Renderer._BaseButton); |
1084 Rkns.Renderer._NodeButton = Rkns.Utils.inherit(Rkns.Renderer._BaseButton); |
1278 |
1215 |
1279 Rkns.Renderer.EdgeEditButton = Rkns.Utils.inherit(Rkns.Renderer._BaseButton); |
1216 Rkns.Renderer.EdgeEditButton = Rkns.Utils.inherit(Rkns.Renderer._BaseButton); |
1280 |
1217 |
1281 Rkns.Renderer.EdgeEditButton.prototype._init = function() { |
1218 Rkns.Renderer.EdgeEditButton.prototype._init = function() { |
1282 this.type = "Edge-edit-button"; |
1219 this.type = "Edge-edit-button"; |
1283 this.sector = Rkns.Renderer.Utils.sector(this, Rkns.Renderer._EDGE_BUTTON_INNER, Rkns.Renderer._EDGE_BUTTON_OUTER, - 90, 90, 1, this.options.static_url+'img/edit.png', this.renkan.translate("Edit")); |
1220 this.sector = this.renderer.drawSector(this, Rkns.Renderer._EDGE_BUTTON_INNER, Rkns.Renderer._EDGE_BUTTON_OUTER, -270, -90, 1, "edit", this.renkan.translate("Edit")); |
1284 } |
1221 } |
1285 |
1222 |
1286 Rkns.Renderer.EdgeEditButton.prototype.mouseup = function() { |
1223 Rkns.Renderer.EdgeEditButton.prototype.mouseup = function() { |
1287 if (!this.renderer.is_dragging) { |
1224 if (!this.renderer.is_dragging) { |
1288 this.source_representation.openEditor(); |
1225 this.source_representation.openEditor(); |
1293 |
1230 |
1294 Rkns.Renderer.EdgeRemoveButton = Rkns.Utils.inherit(Rkns.Renderer._BaseButton); |
1231 Rkns.Renderer.EdgeRemoveButton = Rkns.Utils.inherit(Rkns.Renderer._BaseButton); |
1295 |
1232 |
1296 Rkns.Renderer.EdgeRemoveButton.prototype._init = function() { |
1233 Rkns.Renderer.EdgeRemoveButton.prototype._init = function() { |
1297 this.type = "Edge-remove-button"; |
1234 this.type = "Edge-remove-button"; |
1298 this.sector = Rkns.Renderer.Utils.sector(this, Rkns.Renderer._EDGE_BUTTON_INNER, Rkns.Renderer._EDGE_BUTTON_OUTER, - 270, -90, 1, this.options.static_url+'img/remove.png', this.renkan.translate("Remove")); |
1235 this.sector = this.renderer.drawSector(this, Rkns.Renderer._EDGE_BUTTON_INNER, Rkns.Renderer._EDGE_BUTTON_OUTER, -90, 90, 1, "remove", this.renkan.translate("Remove")); |
1299 } |
1236 } |
1300 |
1237 |
1301 Rkns.Renderer.EdgeRemoveButton.prototype.mouseup = function() { |
1238 Rkns.Renderer.EdgeRemoveButton.prototype.mouseup = function() { |
1302 this.renderer.click_target = null; |
1239 this.renderer.click_target = null; |
1303 this.renderer.is_dragging = false; |
1240 this.renderer.is_dragging = false; |
1383 this.click_mode = false; |
1320 this.click_mode = false; |
1384 |
1321 |
1385 var _this = this, |
1322 var _this = this, |
1386 _allowScroll = true, |
1323 _allowScroll = true, |
1387 _originalScale, |
1324 _originalScale, |
1388 _zooming = false; |
1325 _zooming = false, |
|
1326 _lastTapDate, |
|
1327 _lastTapX, |
|
1328 _lastTapY; |
|
1329 |
|
1330 this.imageCache = {}; |
|
1331 |
|
1332 ['edit', 'remove', 'link', 'enlarge', 'shrink'].forEach(function(imgname) { |
|
1333 var img = new Image(); |
|
1334 img.src = _renkan.options.static_url + 'img/' + imgname + '.png'; |
|
1335 _this.imageCache[imgname] = img; |
|
1336 }); |
|
1337 |
|
1338 var throttledMouseMove = _.throttle(function(_event, _isTouch) { |
|
1339 _this.onMouseMove(_event, _isTouch); |
|
1340 }, Rkns.Renderer._MOUSEMOVE_RATE); |
1389 |
1341 |
1390 this.canvas_$.on({ |
1342 this.canvas_$.on({ |
1391 mousedown: function(_event) { |
1343 mousedown: function(_event) { |
1392 _event.preventDefault(); |
1344 _event.preventDefault(); |
1393 _this.onMouseDown(_event, false); |
1345 _this.onMouseDown(_event, false); |
1394 }, |
1346 }, |
1395 mousemove: function(_event) { |
1347 mousemove: function(_event) { |
1396 _event.preventDefault(); |
1348 _event.preventDefault(); |
1397 _this.onMouseMove(_event, false); |
1349 throttledMouseMove(_event, false); |
1398 }, |
1350 }, |
1399 mouseup: function(_event) { |
1351 mouseup: function(_event) { |
1400 _event.preventDefault(); |
1352 _event.preventDefault(); |
1401 _this.onMouseUp(_event, false); |
1353 _this.onMouseUp(_event, false); |
1402 }, |
1354 }, |
1406 _this.onScroll(_event, _delta); |
1358 _this.onScroll(_event, _delta); |
1407 } |
1359 } |
1408 }, |
1360 }, |
1409 touchstart: function(_event) { |
1361 touchstart: function(_event) { |
1410 _event.preventDefault(); |
1362 _event.preventDefault(); |
1411 _originalScale = _this.scale; |
1363 var _touches = _event.originalEvent.touches[0]; |
1412 _zooming = false; |
1364 if ( |
1413 _this.onMouseDown(_event.originalEvent.touches[0], true); |
1365 _renkan.options.allow_double_click |
|
1366 && new Date() - _lastTap < Rkns.Renderer._DOUBLETAP_DELAY |
|
1367 && ( Math.pow(_lastTapX - _touches.pageX, 2) + Math.pow(_lastTapY - _touches.pageY, 2) < Rkns.Renderer._DOUBLETAP_DISTANCE ) |
|
1368 ) { |
|
1369 _lastTap = 0; |
|
1370 _this.onDoubleClick(_touches); |
|
1371 } else { |
|
1372 _lastTap = new Date(); |
|
1373 _lastTapX = _touches.pageX; |
|
1374 _lastTapY = _touches.pageY; |
|
1375 _originalScale = _this.scale; |
|
1376 _zooming = false; |
|
1377 _this.onMouseDown(_touches, true); |
|
1378 } |
1414 }, |
1379 }, |
1415 touchmove: function(_event) { |
1380 touchmove: function(_event) { |
1416 _event.preventDefault(); |
1381 _event.preventDefault(); |
|
1382 _lastTap = 0; |
1417 if (_event.originalEvent.touches.length == 1) { |
1383 if (_event.originalEvent.touches.length == 1) { |
1418 _this.onMouseMove(_event.originalEvent.touches[0], true); |
1384 _this.onMouseMove(_event.originalEvent.touches[0], true); |
1419 } else { |
1385 } else { |
1420 if (!_zooming) { |
1386 if (!_zooming) { |
1421 _this.onMouseUp(_event.originalEvent.touches[0], true); |
1387 _this.onMouseUp(_event.originalEvent.touches[0], true); |
1694 + '<div class="Rk-Labels"></div><canvas class="Rk-Canvas" resize></canvas><div class="Rk-Editor"><div class="Rk-Notifications"></div>' |
1662 + '<div class="Rk-Labels"></div><canvas class="Rk-Canvas" resize></canvas><div class="Rk-Editor"><div class="Rk-Notifications"></div>' |
1695 + '<% if (options.show_bins) { %><div class="Rk-Fold-Bins">«</div><% } %>' |
1663 + '<% if (options.show_bins) { %><div class="Rk-Fold-Bins">«</div><% } %>' |
1696 + '<div class="Rk-ZoomButtons"><div class="Rk-ZoomIn" title="<%-translate("Zoom In")%>"></div><div class="Rk-ZoomOut" title="<%-translate("Zoom Out")%>"></div></div>' |
1664 + '<div class="Rk-ZoomButtons"><div class="Rk-ZoomIn" title="<%-translate("Zoom In")%>"></div><div class="Rk-ZoomOut" title="<%-translate("Zoom Out")%>"></div></div>' |
1697 + '</div></div>' |
1665 + '</div></div>' |
1698 ); |
1666 ); |
|
1667 |
|
1668 Rkns.Renderer.Scene.prototype.drawSector = function(_repr, _inR, _outR, _startAngle, _endAngle, _padding, _imgname, _caption) { |
|
1669 var _options = this.renkan.options, |
|
1670 _startRads = _startAngle * Math.PI / 180, |
|
1671 _endRads = _endAngle * Math.PI / 180, |
|
1672 _img = this.imageCache[_imgname], |
|
1673 _span = _endRads - _startRads, |
|
1674 _startdx = - Math.sin(_startRads), |
|
1675 _startdy = Math.cos(_startRads), |
|
1676 _startXIn = Math.cos(_startRads) * _inR + _padding * _startdx, |
|
1677 _startYIn = Math.sin(_startRads) * _inR + _padding * _startdy, |
|
1678 _startXOut = Math.cos(_startRads) * _outR + _padding * _startdx, |
|
1679 _startYOut = Math.sin(_startRads) * _outR + _padding * _startdy, |
|
1680 _enddx = - Math.sin(_endRads), |
|
1681 _enddy = Math.cos(_endRads), |
|
1682 _endXIn = Math.cos(_endRads) * _inR - _padding * _enddx, |
|
1683 _endYIn = Math.sin(_endRads) * _inR - _padding * _enddy, |
|
1684 _endXOut = Math.cos(_endRads) * _outR - _padding * _enddx, |
|
1685 _endYOut = Math.sin(_endRads) * _outR - _padding * _enddy, |
|
1686 _centerR = (_inR + _outR)/2, |
|
1687 _centerRads = (_startRads + _endRads) / 2, |
|
1688 _centerX = Math.cos(_centerRads) * _centerR, |
|
1689 _centerY = Math.sin(_centerRads) * _centerR, |
|
1690 _centerXIn = Math.cos(_centerRads) * _inR, |
|
1691 _centerXOut = Math.cos(_centerRads) * _outR, |
|
1692 _centerYIn = Math.sin(_centerRads) * _inR, |
|
1693 _centerYOut = Math.sin(_centerRads) * _outR, |
|
1694 _textX = Math.cos(_centerRads) * (_outR + 3), |
|
1695 _textY = Math.sin(_centerRads) * (_outR + _options.buttons_label_font_size) + _options.buttons_label_font_size / 2, |
|
1696 _segments = []; |
|
1697 this.buttons_layer.activate(); |
|
1698 var _path = new paper.Path(); |
|
1699 _path.add([_startXIn, _startYIn]); |
|
1700 _path.arcTo([_centerXIn, _centerYIn], [_endXIn, _endYIn]); |
|
1701 _path.lineTo([_endXOut, _endYOut]); |
|
1702 _path.arcTo([_centerXOut, _centerYOut], [_startXOut, _startYOut]); |
|
1703 _path.fillColor = _options.buttons_background; |
|
1704 _path.opacity = .5; |
|
1705 _path.closed = true; |
|
1706 _path.__representation = _repr; |
|
1707 var _text = new paper.PointText(_textX,_textY); |
|
1708 _text.characterStyle = { |
|
1709 fontSize: _options.buttons_label_font_size, |
|
1710 fillColor: _options.buttons_label_color |
|
1711 }; |
|
1712 if (_textX > 2) { |
|
1713 _text.paragraphStyle.justification = 'left'; |
|
1714 } else if (_textX < -2) { |
|
1715 _text.paragraphStyle.justification = 'right'; |
|
1716 } else { |
|
1717 _text.paragraphStyle.justification = 'center'; |
|
1718 } |
|
1719 _text.visible = false; |
|
1720 var _visible = false, |
|
1721 _restPos = new paper.Point(-200, -200), |
|
1722 _grp = new paper.Group([_path, _text]), |
|
1723 _delta = _grp.position, |
|
1724 _imgdelta = new paper.Point([_centerX, _centerY]), |
|
1725 _currentPos = new paper.Point(0,0); |
|
1726 _text.content = _caption; |
|
1727 _grp.visible = false; |
|
1728 _grp.position = _restPos; |
|
1729 var _res = { |
|
1730 show: function() { |
|
1731 _visible = true; |
|
1732 _grp.position = _currentPos.add(_delta); |
|
1733 _grp.visible = true; |
|
1734 }, |
|
1735 moveTo: function(_point) { |
|
1736 _currentPos = _point; |
|
1737 if (_visible) { |
|
1738 _grp.position = _point.add(_delta); |
|
1739 } |
|
1740 }, |
|
1741 hide: function() { |
|
1742 _visible = false; |
|
1743 _grp.visible = false; |
|
1744 _grp.position = _restPos; |
|
1745 }, |
|
1746 select: function() { |
|
1747 _path.opacity = .8; |
|
1748 _text.visible = true; |
|
1749 }, |
|
1750 unselect: function() { |
|
1751 _path.opacity = .5; |
|
1752 _text.visible = false; |
|
1753 }, |
|
1754 destroy: function() { |
|
1755 _grp.remove(); |
|
1756 } |
|
1757 } |
|
1758 function showImage() { |
|
1759 var _raster = new paper.Raster(_img); |
|
1760 _raster.position = _imgdelta.add(_grp.position).subtract(_delta); |
|
1761 _grp.addChild(_raster); |
|
1762 } |
|
1763 if (_img.width) { |
|
1764 showImage(); |
|
1765 } else { |
|
1766 Rkns.$(_img).on("load",showImage); |
|
1767 } |
|
1768 |
|
1769 return _res |
|
1770 } |
1699 |
1771 |
1700 Rkns.Renderer.Scene.prototype.addToBundles = function(_edgeRepr) { |
1772 Rkns.Renderer.Scene.prototype.addToBundles = function(_edgeRepr) { |
1701 var _bundle = Rkns._(this.bundles).find(function(_bundle) { |
1773 var _bundle = Rkns._(this.bundles).find(function(_bundle) { |
1702 return ( |
1774 return ( |
1703 ( _bundle.from === _edgeRepr.from_representation && _bundle.to === _edgeRepr.to_representation ) |
1775 ( _bundle.from === _edgeRepr.from_representation && _bundle.to === _edgeRepr.to_representation ) |
2133 newNode.uri = snippet.find("[data-uri]").attr("data-uri") || newNode.uri; |
2205 newNode.uri = snippet.find("[data-uri]").attr("data-uri") || newNode.uri; |
2134 newNode.title = snippet.find("[data-title]").attr("data-title") || newNode.title; |
2206 newNode.title = snippet.find("[data-title]").attr("data-title") || newNode.title; |
2135 newNode.description = snippet.find("[data-description]").attr("data-description") || newNode.description; |
2207 newNode.description = snippet.find("[data-description]").attr("data-description") || newNode.description; |
2136 } |
2208 } |
2137 } |
2209 } |
|
2210 if (!newNode.title) { |
|
2211 newNode.title = this.renkan.translate("Dragged resource"); |
|
2212 } |
2138 var fields = ["title", "description", "uri", "image"]; |
2213 var fields = ["title", "description", "uri", "image"]; |
2139 for (var i = 0; i < fields.length; i++) { |
2214 for (var i = 0; i < fields.length; i++) { |
2140 var f = fields[i]; |
2215 var f = fields[i]; |
2141 if (_data["text/x-iri-" + f] || _data[f]) { |
2216 if (_data["text/x-iri-" + f] || _data[f]) { |
2142 newNode[f] = _data["text/x-iri-" + f] || _data[f]; |
2217 newNode[f] = _data["text/x-iri-" + f] || _data[f]; |
2143 } |
2218 } |
2144 if (newNode[f] === "none" || newNode[f] === "null") { |
2219 if (newNode[f] === "none" || newNode[f] === "null") { |
2145 newNode[f] = undefined; |
2220 newNode[f] = undefined; |
2146 } |
2221 } |
2147 } |
2222 } |
2148 if (newNode.title || newNode.description || newNode.uri) { |
2223 var _off = this.canvas_$.offset(), |
2149 var _off = this.canvas_$.offset(), |
|
2150 _point = new paper.Point([ |
2224 _point = new paper.Point([ |
2151 _event.pageX - _off.left, |
2225 _event.pageX - _off.left, |
2152 _event.pageY - _off.top |
2226 _event.pageY - _off.top |
2153 ]), |
2227 ]), |
2154 _coords = this.toModelCoords(_point), |
2228 _coords = this.toModelCoords(_point), |
2155 _nodedata = { |
2229 _nodedata = { |
2156 id: Rkns.Utils.getUID('node'), |
2230 id: Rkns.Utils.getUID('node'), |
2157 created_by: this.renkan.current_user, |
2231 created_by: this.renkan.current_user, |
2158 uri: newNode.uri || "", |
2232 uri: newNode.uri || "", |
2159 title: newNode.title || this.renkan.translate("Dragged resource"), |
2233 title: newNode.title || "", |
2160 description: newNode.description || "", |
2234 description: newNode.description || "", |
2161 image: newNode.image || "", |
2235 image: newNode.image || "", |
2162 color: newNode.color || undefined, |
2236 color: newNode.color || undefined, |
2163 position: { |
2237 position: { |
2164 x: _coords.x, |
2238 x: _coords.x, |
2165 y: _coords.y |
2239 y: _coords.y |
2166 } |
2240 } |
2167 }; |
2241 }; |
2168 var _node = this.renkan.project.addNode(_nodedata), |
2242 var _node = this.renkan.project.addNode(_nodedata), |
2169 _repr = this.getRepresentationByModel(_node); |
2243 _repr = this.getRepresentationByModel(_node); |
2170 if (_event.type === "drop") { |
2244 if (_event.type === "drop") { |
2171 _repr.openEditor(); |
2245 _repr.openEditor(); |
2172 } |
2246 } |
2173 } |
2247 } |
2174 } |
|