+ _setupDOMHandler: function(htmlElement) {
+ this.$element = $(htmlElement);
+ },
+ dom: function() {
+ return this.$element;
+ },
+ parent: function() {
+ var parents = this.$element.parents('[wlxml-tag]');
+ if(parents.length)
+ return DocumentElement.fromHTMLElement(parents[0], this.canvas);
+ return null;
+ },
+
+ parents: function() {
+ var parents = [],
+ parent = this.parent();
+ while(parent) {
+ parents.push(parent);
+ parent = parent.parent();
+ }
+ return parents;
+ },
+
+ sameNode: function(other) {
+ return other && (typeof other === typeof this) && other.dom()[0] === this.dom()[0];
+ },
+
+ wrapWithNodeElement: function(wlxmlNode) {
+ var wrapper = DocumentNodeElement.create({tag: wlxmlNode.tag, klass: wlxmlNode.klass});
+ this.dom().replaceWith(wrapper.dom());
+ wrapper.append(this);
+ return wrapper;
+ },
+
+ detach: function() {
+ this.dom().detach();
+ this.canvas = null;
+ },
+
+ markAsCurrent: function() {
+ this.canvas.markAsCurrent(this);
+ }
+});
+
+
+// DocumentNodeElement represents an element node from WLXML document rendered inside Canvas
+var DocumentNodeElement = function(htmlElement, canvas) {
+ DocumentElement.call(this, htmlElement, canvas);
+};
+
+$.extend(DocumentNodeElement, {
+ createDOM: function(params) {
+ var dom = $('<div>')
+ .attr('wlxml-tag', params.tag);
+ if(params.klass)
+ dom.attr('wlxml-class', params.klass.replace(/\./g, '-'));
+ return dom;
+ },
+
+ create: function(params, canvas) {
+ return this.fromHTMLElement(this.createDOM(params)[0]);
+ },
+
+ fromHTMLElement: function(htmlElement, canvas) {
+ return new this(htmlElement, canvas);
+ }
+});
+
+var manipulate = function(e, params, action) {
+ var element;
+ if(params instanceof DocumentElement) {
+ element = params;
+ } else {
+ element = DocumentElement.create(params);
+ }
+ e.dom()[action](element.dom());
+ return element;
+};
+
+DocumentNodeElement.prototype = new DocumentElement();
+
+$.extend(DocumentNodeElement.prototype, {
+ append: function(params) {
+ manipulate(this, params, 'append');
+ },
+ before: function(params) {
+ manipulate(this, params, 'before');
+
+ },
+ after: function(params) {
+ manipulate(this, params, 'after');
+ },