1 |
1 |
2 define(['jquery', 'underscore', 'requtils', 'renderer/baseeditor', 'renderer/shapebuilder'], function ($, _, requtils, BaseEditor, ShapeBuilder) { |
2 define(['jquery', 'underscore', 'requtils', 'renderer/baseeditor', 'renderer/shapebuilder', 'ckeditor-jquery'], function ($, _, requtils, BaseEditor, ShapeBuilder) { |
3 'use strict'; |
3 'use strict'; |
4 |
4 |
5 var Utils = requtils.getUtils(); |
5 var Utils = requtils.getUtils(); |
6 |
6 |
7 /* NodeEditor Begin */ |
7 /* NodeEditor Begin */ |
46 shortenText: Utils.shortenText, |
46 shortenText: Utils.shortenText, |
47 shapes : _(ShapeBuilder.builders).omit('svg').keys().value(), |
47 shapes : _(ShapeBuilder.builders).omit('svg').keys().value(), |
48 })); |
48 })); |
49 this.redraw(); |
49 this.redraw(); |
50 var _this = this, |
50 var _this = this, |
51 closeEditor = function() { |
51 editorInstance = _this.options.show_node_editor_description_richtext ? |
52 _this.editor_$.off("keyup"); |
52 $(".Rk-Edit-Description").ckeditor(_this.options.richtext_editor_config) : |
53 _this.editor_$.find("input, textarea, select").off("change keyup paste"); |
53 false, |
54 _this.editor_$.find(".Rk-Edit-Image-File").off('change'); |
54 closeEditor = function() { |
55 _this.editor_$.find(".Rk-Edit-ColorPicker-Wrapper").off('hover'); |
55 _this.editor_$.off("keyup"); |
56 _this.editor_$.find(".Rk-Edit-Size-Btn").off('click'); |
56 _this.editor_$.find("input, textarea, select").off("change keyup paste"); |
57 _this.editor_$.find(".Rk-Edit-Image-Del").off('click'); |
57 _this.editor_$.find(".Rk-Edit-Image-File").off('change'); |
58 _this.editor_$.find(".Rk-Edit-ColorPicker").find("li").off('hover click'); |
58 _this.editor_$.find(".Rk-Edit-ColorPicker-Wrapper").off('hover'); |
59 _this.editor_$.find(".Rk-CloseX").off('click'); |
59 _this.editor_$.find(".Rk-Edit-Size-Btn").off('click'); |
60 _this.editor_$.find(".Rk-Edit-Goto").off('click'); |
60 _this.editor_$.find(".Rk-Edit-Image-Del").off('click'); |
61 |
61 _this.editor_$.find(".Rk-Edit-ColorPicker").find("li").off('hover click'); |
62 _this.renderer.removeRepresentation(_this); |
62 _this.editor_$.find(".Rk-CloseX").off('click'); |
63 paper.view.draw(); |
63 _this.editor_$.find(".Rk-Edit-Goto").off('click'); |
64 }; |
64 |
|
65 if(_this.options.show_node_editor_description_richtext) { |
|
66 if(typeof _this.blurListener !== 'undefined') { |
|
67 _this.editorBlurListener.removeListener(); |
|
68 } |
|
69 if(typeof editorInstance.editor !== 'undefined') { |
|
70 editorInstance.editor.destroy(); |
|
71 } |
|
72 } |
|
73 _this.renderer.removeRepresentation(_this); |
|
74 paper.view.draw(); |
|
75 }; |
65 |
76 |
66 this.editor_$.find(".Rk-CloseX").click(closeEditor); |
77 this.editor_$.find(".Rk-CloseX").click(closeEditor); |
67 |
78 |
68 this.editor_$.find(".Rk-Edit-Goto").click(function() { |
79 this.editor_$.find(".Rk-Edit-Goto").click(function() { |
69 if (!_model.get("uri")) { |
80 if (!_model.get("uri")) { |
86 if (_this.options.show_node_editor_image) { |
97 if (_this.options.show_node_editor_image) { |
87 _data.image = _this.editor_$.find(".Rk-Edit-Image").val(); |
98 _data.image = _this.editor_$.find(".Rk-Edit-Image").val(); |
88 _this.editor_$.find(".Rk-Edit-ImgPreview").attr("src", _data.image || _image_placeholder); |
99 _this.editor_$.find(".Rk-Edit-ImgPreview").attr("src", _data.image || _image_placeholder); |
89 } |
100 } |
90 if (_this.options.show_node_editor_description) { |
101 if (_this.options.show_node_editor_description) { |
91 _data.description = _this.editor_$.find(".Rk-Edit-Description").val(); |
102 if(_this.options.show_node_editor_description_richtext && |
|
103 typeof editorInstance.editor !== 'undefined' && |
|
104 editorInstance.editor.checkDirty()) |
|
105 { |
|
106 _data.description = editorInstance.editor.getData(); |
|
107 editorInstance.editor.resetDirty(); |
|
108 } |
|
109 else { |
|
110 _data.description = _this.editor_$.find(".Rk-Edit-Description").val(); |
|
111 } |
92 } |
112 } |
93 if (_this.options.show_node_editor_style) { |
113 if (_this.options.show_node_editor_style) { |
94 var dash = _this.editor_$.find(".Rk-Edit-Dash").is(':checked'); |
114 var dash = _this.editor_$.find(".Rk-Edit-Dash").is(':checked'); |
95 _data.style = _.assign( ((_model.has("style") && _.clone(_model.get("style"))) || {}), {dash: dash}); |
115 _data.style = _.assign( ((_model.has("style") && _.clone(_model.get("style"))) || {}), {dash: dash}); |
96 } |
116 } |
103 _this.redraw(); |
123 _this.redraw(); |
104 } else { |
124 } else { |
105 closeEditor(); |
125 closeEditor(); |
106 } |
126 } |
107 }); |
127 }); |
108 }, 500); |
128 }, 1000); |
109 |
129 |
110 this.editor_$.on("keyup", function(_e) { |
130 this.editor_$.on("keyup", function(_e) { |
111 if (_e.keyCode === 27) { |
131 if (_e.keyCode === 27) { |
112 closeEditor(); |
132 closeEditor(); |
113 } |
133 } |
114 }); |
134 }); |
115 |
135 |
116 this.editor_$.find("input, textarea, select").on("change keyup paste", onFieldChange); |
136 this.editor_$.find("input, textarea, select").on("change keyup paste", onFieldChange); |
|
137 if( _this.options.show_node_editor_description && |
|
138 _this.options.show_node_editor_description_richtext && |
|
139 typeof editorInstance.editor !== 'undefined') |
|
140 { |
|
141 editorInstance.editor.on("change", onFieldChange); |
|
142 _this.editorBlurListener = editorInstance.editor.on("blur", onFieldChange); |
|
143 } |
117 |
144 |
118 if(_this.options.allow_image_upload) { |
145 if(_this.options.allow_image_upload) { |
119 this.editor_$.find(".Rk-Edit-Image-File").change(function() { |
146 this.editor_$.find(".Rk-Edit-Image-File").change(function() { |
120 if (this.files.length) { |
147 if (this.files.length) { |
121 var f = this.files[0], |
148 var f = this.files[0], |
240 }); |
267 }); |
241 }, |
268 }, |
242 redraw: function() { |
269 redraw: function() { |
243 if (this.options.popup_editor){ |
270 if (this.options.popup_editor){ |
244 var _coords = this.source_representation.paper_coords; |
271 var _coords = this.source_representation.paper_coords; |
245 Utils.drawEditBox(this.options, _coords, this.editor_block, this.source_representation.circle_radius * 0.75, this.editor_$); |
272 Utils.drawEditBox(this.options, _coords, this.editor_block, this.source_representation.circle_radius * 0.75, this.editor_$); |
246 } |
273 } |
247 this.editor_$.show(); |
274 this.editor_$.show(); |
248 paper.view.draw(); |
275 paper.view.draw(); |
249 } |
276 } |
250 }).value(); |
277 }).value(); |