editor: canvas - first take on hierarchical canvas element registers

[fnpeditor.git] / src / editor / modules / documentCanvas / canvas / genericElement.js

diff --git a/src/editor/modules/documentCanvas/canvas/genericElement.js b/src/editor/modules/documentCanvas/canvas/genericElement.js
index d11cbd1..fd0dfc4 100644 (file)
--- a/src/editor/modules/documentCanvas/canvas/genericElement.js
+++ b/src/editor/modules/documentCanvas/canvas/genericElement.js
@@ -3,192 +3,105 @@ define(function(require) {
 'use strict';
 
 var $ = require('libs/jquery'),
 'use strict';
 
 var $ = require('libs/jquery'),

+    _ = require('libs/underscore'),

     documentElement = require('./documentElement'),
     documentElement = require('./documentElement'),

-    utils = require('./utils'),
-    wlxmlUtils = require('utils/wlxml');
+    CommentsView = require('./comments/comments');

 
 

-var labelWidget = function(tag, klass) {
-    return $('<span>')
-        .addClass('canvas-widget canvas-widget-label')
-        .text(wlxmlUtils.getTagLabel(tag) + (klass ? ' / ' + wlxmlUtils.getClassLabel(klass) : ''));
-};
-void(labelWidget); // for linters; labelWidget is unused on purpose for now

 
 var DocumentNodeElement = documentElement.DocumentNodeElement;
 
 var generic = Object.create(DocumentNodeElement.prototype);
 
 $.extend(generic, {
 
 var DocumentNodeElement = documentElement.DocumentNodeElement;
 
 var generic = Object.create(DocumentNodeElement.prototype);
 
 $.extend(generic, {

-    onNodeAttrChange: function(event) {
-        if(event.meta.attr === 'class') {
-            this.setWlxmlClass(event.meta.newVal); //
-        }
-    },
-    onNodeAdded: function(event) {
-        if(event.meta.node.isRoot()) {
-            this.canvas.reloadRoot();
-            return;
-        }
+    init: function() {
+        DocumentNodeElement.prototype.init.call(this);
+        this._container()
+            .attr('wlxml-tag', this.wlxmlNode.getTagName())
+            .attr('wlxml-class', this.wlxmlNode.getClass().replace(/\./g, '-'));

 
 

-        var nodeIndex = event.meta.node.getIndex(),
-            referenceElement, referenceAction, actionArg;
+        this.container = this.createContainer(this.wlxmlNode.contents(), {
+            manages: function(node) { return !node.isInside('comment'); },
+            dom: this._container()
+        });

 
 

-        if(nodeIndex === 0) {
-            referenceElement = this;
-            referenceAction = 'prepend';
-        } else {
-            referenceElement = this.children()[nodeIndex-1];
-            referenceAction = 'after';
+        this.commentsView = new CommentsView(this.wlxmlNode, this.canvas.metadata.user);
+        this.addToGutter(this.commentsView);
+        this.commentTip = $('<div class="comment-tip"><i class="icon-comment"></i></div>');
+        this.addWidget(this.commentTip);
+
+        if(!this.wlxmlNode.hasChild({klass: 'comment'})) {
+            this.commentTip.hide();

         }
 
         }
 

-        actionArg = (event.type === 'nodeMoved' && utils.findCanvasElement(event.meta.node, event.meta.parent)) || event.meta.node;
-        referenceElement[referenceAction](actionArg);
-    },
-    onNodeMoved: function(event) {
-        return this.onNodeAdded.call(this, event, true);
+        this.refresh();

     },
     },

-    onNodeDetached: function(event) {
-        if(event.meta.node.sameNode(this)) {
-            this.detach();
+    
+    refresh: function() {
+        if(this.wlxmlNode.getTagName() === 'span' || this.wlxmlNode.getTagName() === 'aside') {
+            if(this.containsBlock()) {
+                this.displayAsBlock();
+            } else {
+                this.displayInline();
+            }

         } else {
         } else {

-            this.children().some(function(child) {
-                if(child.wlxmlNode.sameNode(event.meta.node)) {
-                    child.detach();
-                    return true;
-                }
-            });
+            this.displayAsBlock();

         }
     },
         }
     },

-    onNodeTextChange: function(event) {
-        var toSet = event.meta.node.getText();
-        this.children().some(function(child) {
-            if(child.wlxmlNode.sameNode(event.meta.node)) {
-                if(toSet === '') {
-                    toSet = utils.unicode.ZWS;
-                }
-                if(toSet !== child.getText()) {
-                    child.setText(toSet);
-                }
-                return true;
-            }
-        });
+
+    getFirst: function(e1, e2) {
+        return this.container.getFirst(e1, e2);

     },
 
     },
 

-    prepend: function(param) {
-        var element;
-        if(param instanceof documentElement.DocumentElement) {
-            element = param;
-        } else {
-            element = this.canvas.createElement(param);
-        }
-        this._container().prepend(element.dom);
-        this.refreshPath();
-        return element;
+    containsBlock: function() {
+        return this.container.containsBlock();

     },
 
     children: function() {
     },
 
     children: function() {

-        var element = this,
-            toret = [];
-        this._container().contents().each(function() {
-            var childElement = element.canvas.getDocumentElement(this);
-            if(childElement === undefined) {
-                return true;
-            }
+        return this.container.children();
+    },

 
 

-            toret.push(childElement);
-        });
-        return toret;
+    getVerticallyFirstTextElement: function(params) {
+        return this.container.getVerticallyFirstTextElement(params);

     },
 
     },
 

-    getFirst: function(e1, e2) {
-        var idx1 = this.childIndex(e1),
-            idx2 = this.childIndex(e2);
-        if(e1 === null || e2 === null) {
-            return undefined;
+    onNodeAdded: function(event) {
+        if(event.meta.node.is('comment')) {
+            this.commentTip.show();
+            this.commentsView.render();

         }
         }

-        return idx1 <= idx2 ? e1: e2;

     },
 
     },
 

-    childIndex: function(child) {
-        var children = this.children(),
-            toret = null;
-        children.forEach(function(c, idx) {
-            if(c.sameNode(child)) {
-                toret = idx;
-                return false;
+    onNodeDetached: function(event) {
+        var isComment = event.meta.node.is('comment');
+        if(event.meta.node.sameNode(this)) {
+            // defacto jestesmy rootem?
+            this.detach();
+        } else {
+            if(isComment && !this.wlxmlNode.hasChild({klass: 'comment'})) {
+                this.commentTip.hide();

             }
             }

-        });
-        return toret;
-    },
-
-    getWlxmlClass: function() {
-        var klass = this._container().attr('wlxml-class');
-        if(klass) {
-            return klass.replace(/-/g, '.');
+            this.commentsView.render();

         }
         }

-        return undefined;

     },
     },

-    setWlxmlClass: function(klass) {
-        if(klass === this.getWlxmlClass()) {
-            return;
-        }
-        if(klass) {
-            this._container().attr('wlxml-class', klass.replace(/\./g, '-'));
-        }
-        else {
-            this._container().removeAttr('wlxml-class');
+
+    onNodeTextChange: function(event) {
+        var node = event.meta.node;
+
+        /* TODO: This handling of changes to the comments should probably be implemented via separate,
+        non-rendering comments element */
+        if(node.parent() && node.parent().is('comment') && this.wlxmlNode.sameNode(node.parent().parent())) {
+            this.commentsView.render();

         }
         }

-        this.refreshPath();

     },
     },

-    init: function() {
-        DocumentNodeElement.prototype.init.call(this);
-        this._container()
-            .attr('wlxml-tag', this.wlxmlNode.getTagName());
-        this.setWlxmlClass(this.wlxmlNode.getClass());
-        this.wlxmlNode.contents().forEach(function(node) {
-            this._container().append(this.canvas.createElement(node).dom);
-        }.bind(this));
-        this.refresh();

 
 

-    },
-    refresh: function() {
-        if(this.wlxmlNode.getTagName() === 'span') {
-            if(this.containsBlock()) {
-                this.displayAsBlock();
-            } else {
-                this.displayInline();
-            }
-        } else {
-            this.displayAsBlock();
+    onStateChange: function(changes) {
+        var isSpan = this.wlxmlNode.getTagName() === 'span';
+        if(_.isBoolean(changes.exposed) && !isSpan) {
+            this._container().toggleClass('highlighted-element', changes.exposed);
+        }
+        if(_.isBoolean(changes.active) && !isSpan) {
+            this._container().toggleClass('current-node-element', changes.active);

         }
         }

-    },
-    containsBlock: function() {
-        return this.children()
-            .filter(function(child) {
-                return child instanceof documentElement.DocumentNodeElement;
-            })
-            .some(function(child) {
-                if(child.isBlock()) {
-                    return true;
-                } else {
-                    return child.containsBlock();
-                }
-            });
-    },
-    getVerticallyFirstTextElement: function() {
-        var toret;
-        this.children().some(function(child) {
-            if(child instanceof documentElement.DocumentTextElement) {
-                toret = child;
-                return true; // break
-            } else {
-                toret = child.getVerticallyFirstTextElement();
-                if(toret) {
-                    return true; // break
-                }
-            }
-        });
-        return toret;

     },
 });
 
     },
 });