editor: canvas bug fix
[fnpeditor.git] / src / editor / modules / documentCanvas / canvas / genericElement.js
1 define(function(require) {
2     
3 'use strict';
4
5 var $ = require('libs/jquery'),
6     documentElement = require('./documentElement'),
7     utils = require('./utils'),
8     wlxmlUtils = require('utils/wlxml');
9
10 var labelWidget = function(tag, klass) {
11     return $('<span>')
12         .addClass('canvas-widget canvas-widget-label')
13         .text(wlxmlUtils.getTagLabel(tag) + (klass ? ' / ' + wlxmlUtils.getClassLabel(klass) : ''));
14 };
15 void(labelWidget); // for linters; labelWidget is unused on purpose for now
16
17 var DocumentNodeElement = documentElement.DocumentNodeElement;
18
19 var generic = Object.create(DocumentNodeElement.prototype);
20
21 $.extend(generic, {
22     init: function() {
23         DocumentNodeElement.prototype.init.call(this);
24         this._container()
25             .attr('wlxml-tag', this.wlxmlNode.getTagName());
26         this.setWlxmlClass(this.wlxmlNode.getClass());
27         this.wlxmlNode.contents().forEach(function(node) {
28             this._container().append(this.canvas.createElement(node).dom);
29         }.bind(this));
30         this.refresh();
31     },
32     
33     refresh: function() {
34         if(this.wlxmlNode.getTagName() === 'span') {
35             if(this.containsBlock()) {
36                 this.displayAsBlock();
37             } else {
38                 this.displayInline();
39             }
40         } else {
41             this.displayAsBlock();
42         }
43     },
44
45     getFirst: function(e1, e2) {
46         var idx1 = this.childIndex(e1),
47             idx2 = this.childIndex(e2);
48         if(e1 === null || e2 === null) {
49             return undefined;
50         }
51         return idx1 <= idx2 ? e1: e2;
52     },
53
54     children: function() {
55         var element = this,
56             toret = [];
57         this._container().contents().each(function() {
58             var childElement = element.canvas.getDocumentElement(this);
59             if(childElement === undefined) {
60                 return true;
61             }
62
63             toret.push(childElement);
64         });
65         return toret;
66     },
67
68     getVerticallyFirstTextElement: function() {
69         var toret;
70         this.children().some(function(child) {
71             if(child instanceof documentElement.DocumentTextElement) {
72                 toret = child;
73                 return true; // break
74             } else {
75                 toret = child.getVerticallyFirstTextElement();
76                 if(toret) {
77                     return true; // break
78                 }
79             }
80         });
81         return toret;
82     },
83
84     onNodeAttrChange: function(event) {
85         if(event.meta.attr === 'class') {
86             this.setWlxmlClass(event.meta.newVal); //
87         }
88     },
89     onNodeAdded: function(event) {
90         if(event.meta.node.isRoot()) {
91             this.canvas.reloadRoot();
92             return;
93         }
94
95         var nodeIndex = event.meta.node.getIndex(),
96             referenceElement, referenceAction, actionArg;
97
98         if(nodeIndex === 0) {
99             referenceElement = this;
100             referenceAction = 'prepend';
101         } else {
102             referenceElement = this.children()[nodeIndex-1];
103             referenceAction = 'after';
104         }
105       
106         if(event.type === 'nodeMoved') {
107             actionArg = utils.getElementForNode(event.meta.node, event.meta.parent);
108             if(actionArg.sameNode(referenceElement)) {
109                 referenceElement = this.children()[nodeIndex];
110             }
111         } else {
112             actionArg = event.meta.node;
113         }
114
115         referenceElement[referenceAction](actionArg);
116     },
117     onNodeMoved: function(event) {
118         return this.onNodeAdded.call(this, event);
119     },
120     onNodeDetached: function(event) {
121         if(event.meta.node.sameNode(this)) {
122             this.detach();
123         } else {
124             this.children().some(function(child) {
125                 if(child.wlxmlNode.sameNode(event.meta.node)) {
126                     child.detach();
127                     return true;
128                 }
129             });
130         }
131     },
132     onNodeTextChange: function(event) {
133         var toSet = event.meta.node.getText();
134         this.children().some(function(child) {
135             if(child.wlxmlNode.sameNode(event.meta.node)) {
136                 if(toSet === '') {
137                     toSet = utils.unicode.ZWS;
138                 }
139                 if(toSet !== child.getText()) {
140                     child.setText(toSet);
141                 }
142                 return true;
143             }
144         });
145     },
146
147
148     ///
149     
150     containsBlock: function() {
151         return this.children()
152             .filter(function(child) {
153                 return child instanceof documentElement.DocumentNodeElement;
154             })
155             .some(function(child) {
156                 if(child.isBlock()) {
157                     return true;
158                 } else {
159                     return child.containsBlock();
160                 }
161             });
162     },
163
164     prepend: function(param) {
165         var element;
166         if(param instanceof documentElement.DocumentElement) {
167             element = param;
168         } else {
169             element = this.canvas.createElement(param);
170         }
171         this._container().prepend(element.dom);
172         this.refreshPath();
173         return element;
174     },
175
176     childIndex: function(child) {
177         var children = this.children(),
178             toret = null;
179         children.forEach(function(c, idx) {
180             if(c.sameNode(child)) {
181                 toret = idx;
182                 return false;
183             }
184         });
185         return toret;
186     },
187
188     getWlxmlClass: function() {
189         var klass = this._container().attr('wlxml-class');
190         if(klass) {
191             return klass.replace(/-/g, '.');
192         }
193         return undefined;
194     },
195     setWlxmlClass: function(klass) {
196         if(klass === this.getWlxmlClass()) {
197             return;
198         }
199         if(klass) {
200             this._container().attr('wlxml-class', klass.replace(/\./g, '-'));
201         }
202         else {
203             this._container().removeAttr('wlxml-class');
204         }
205         this.refreshPath();
206     }
207 });
208
209
210 return generic;
211
212
213
214 });