X-Git-Url: https://git.mdrn.pl/fnpeditor.git/blobdiff_plain/efe36f4f1b5df351eeb4d40a54c3900cf9a7079b..567b5d347d2df4f0aea88996a78cb4b457802126:/src/editor/modules/documentCanvas/canvas/documentElement.js?ds=inline diff --git a/src/editor/modules/documentCanvas/canvas/documentElement.js b/src/editor/modules/documentCanvas/canvas/documentElement.js index 0627bc1..d6d60d3 100644 --- a/src/editor/modules/documentCanvas/canvas/documentElement.js +++ b/src/editor/modules/documentCanvas/canvas/documentElement.js @@ -1,61 +1,69 @@ define([ 'libs/jquery', 'libs/underscore', -'modules/documentCanvas/classAttributes', 'modules/documentCanvas/canvas/utils', -'modules/documentCanvas/canvas/widgets', -'modules/documentCanvas/canvas/wlxmlManagers' -], function($, _, classAttributes, utils, widgets, wlxmlManagers) { +'modules/documentCanvas/canvas/container' +], function($, _, utils, container) { 'use strict'; - +/* global Node:false */ // DocumentElement represents a text or an element node from WLXML document rendered inside Canvas -var DocumentElement = function(htmlElement, canvas) { - if(arguments.length === 0) - return; +var DocumentElement = function(wlxmlNode, canvas) { + this.wlxmlNode = wlxmlNode; this.canvas = canvas; - this._setupDOMHandler(htmlElement); -} - -var elementTypeFromParams = function(params) { - return params.text !== undefined ? DocumentTextElement : DocumentNodeElement; - + this.state = { + exposed: false, + active: false + }; + + this.dom = this.createDOM(); + this.dom.data('canvas-element', this); + this.wlxmlNode.setData('canvasElement', this); }; -$.extend(DocumentElement, { - create: function(params, canvas) { - return elementTypeFromParams(params).create(params); - }, - - createDOM: function(params) { - return elementTypeFromParams(params).createDOM(params); - }, - - fromHTMLElement: function(htmlElement, canvas) { - var $element = $(htmlElement); - if(htmlElement.nodeType === Node.ELEMENT_NODE && $element.attr('document-node-element') !== undefined) - return DocumentNodeElement.fromHTMLElement(htmlElement, canvas); - if($element.attr('document-text-element') !== undefined || (htmlElement.nodeType === Node.TEXT_NODE && $element.parent().attr('document-text-element') !== undefined)) - return DocumentTextElement.fromHTMLElement(htmlElement, canvas); - return undefined; - } -}); - $.extend(DocumentElement.prototype, { - _setupDOMHandler: function(htmlElement) { - this.$element = $(htmlElement); - }, - bound: function() { - return $.contains(document.documentElement, this.dom()[0]); - }, - dom: function() { - return this.$element; + refreshPath: function() { + this.parents().forEach(function(parent) { + parent.refresh(); + }); + this.refresh(); + }, + refresh: function() { + // noop + }, + updateState: function(toUpdate) { + var changes = {}; + _.keys(toUpdate) + .filter(function(key) { + return this.state.hasOwnProperty(key); + }.bind(this)) + .forEach(function(key) { + if(this.state !== toUpdate[key]) { + this.state[key] = changes[key] = toUpdate[key]; + } + }.bind(this)); + // console.log(changes); + if(_.isFunction(this.onStateChange)) { + this.onStateChange(changes); + if(_.isBoolean(changes.active)) { + if(changes.active) { + var ptr = this; + while(ptr && ptr.wlxmlNode.getTagName() === 'span') { + ptr = ptr.parent(); + } + if(ptr && ptr.gutterGroup) { + ptr.gutterGroup.show(); + } + } + } + } }, parent: function() { - var parents = this.$element.parents('[document-node-element]'); - if(parents.length) - return DocumentElement.fromHTMLElement(parents[0], this.canvas); + var parents = this.dom.parents('[document-node-element]'); + if(parents.length) { + return this.canvas.getDocumentElement(parents[0]); + } return null; }, @@ -70,277 +78,138 @@ $.extend(DocumentElement.prototype, { }, 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); - this.dom().replaceWith(wrapper.dom()); - wrapper.append(this); - return wrapper; - }, - - markAsCurrent: function() { - this.canvas.markAsCurrent(this); + return other && (typeof other === typeof this) && other.dom[0] === this.dom[0]; }, - - getVerticallyFirstTextElement: function() { - var toret; - this.children().some(function(child) { - if(!child.isVisible()) - return false; // continue - if(child instanceof DocumentTextElement) { - toret = child; - return true; // break - } else { - toret = child.getVerticallyFirstTextElement(); - if(toret) - return true; // break - } - }); - return toret; - }, - - getPreviousTextElement: function(includeInvisible) { - return this.getNearestTextElement('above', includeInvisible); + isRootElement: function() { + return this.sameNode(this.canvas.rootElement); }, - getNextTextElement: function(includeInvisible) { - return this.getNearestTextElement('below', includeInvisible); - }, - - getNearestTextElement: function(direction, includeInvisible) { - includeInvisible = includeInvisible !== undefined ? includeInvisible : false; - var selector = '[document-text-element]' + (includeInvisible ? '' : ':visible'); - return this.canvas.getDocumentElement(utils.nearestInDocumentOrder(selector, direction, this.dom()[0])); - }, + trigger: function() { + this.canvas.eventBus.trigger.apply(this.canvas.eventBus, Array.prototype.slice.call(arguments, 0)); + } - isVisible: function() { - return this instanceof DocumentTextElement || this.getWlxmlTag() !== 'metadata'; - }, - isInsideList: function() { - return this.parents().some(function(parent) { - return parent.is('list'); - }); - }, - - exec: function(method) { - var manager = this.data('_wlxmlManager'); - if(manager[method]) - return manager[method].apply(manager, Array.prototype.slice.call(arguments, 1)); - } }); // DocumentNodeElement represents an element node from WLXML document rendered inside Canvas -var DocumentNodeElement = function(htmlElement, canvas) { - DocumentElement.call(this, htmlElement, canvas); +var DocumentNodeElement = function(wlxmlNode, canvas) { + DocumentElement.call(this, wlxmlNode, canvas); + this.containers = []; + this.elementsRegister = canvas.createElementsRegister(); + this.contextMenuActions = []; + this.init(this.dom); }; -$.extend(DocumentNodeElement, { - createDOM: function(params, canvas) { - var dom = $('