X-Git-Url: https://git.mdrn.pl/fnpeditor.git/blobdiff_plain/4ab522037ab350b3f0257130bc6e4dbc6f183021..13cfbc6feb4c291d5e2121f5705f74d0f5c9dfb6:/src/editor/modules/documentCanvas/canvas/documentElement.js?ds=sidebyside diff --git a/src/editor/modules/documentCanvas/canvas/documentElement.js b/src/editor/modules/documentCanvas/canvas/documentElement.js index 27160e7..dcf05b2 100644 --- a/src/editor/modules/documentCanvas/canvas/documentElement.js +++ b/src/editor/modules/documentCanvas/canvas/documentElement.js @@ -2,31 +2,65 @@ define([ 'libs/jquery', 'libs/underscore', 'modules/documentCanvas/canvas/utils', -'modules/documentCanvas/canvas/wlxmlManagers' -], function($, _, utils, wlxmlManagers) { +'modules/documentCanvas/canvas/container' +], function($, _, utils, container) { 'use strict'; -/* global Node:false, document:false */ - +/* global Node:false */ // DocumentElement represents a text or an element node from WLXML document rendered inside Canvas var DocumentElement = function(wlxmlNode, canvas) { this.wlxmlNode = wlxmlNode; this.canvas = canvas; - - this.$element = this.createDOM(); - this.$element.data('canvas-element', this); + this.state = { + exposed: false, + active: false + }; + + this.dom = this.createDOM(); + this.dom.data('canvas-element', this); + this.wlxmlNode.setData('canvasElement', this); }; $.extend(DocumentElement.prototype, { - bound: function() { - return $.contains(document.documentElement, this.dom()[0]); + refreshPath: function() { + this.parents().forEach(function(parent) { + parent.refresh(); + }); + this.refresh(); }, - dom: function() { - return this.$element; + 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]'); + var parents = this.dom.parents('[document-node-element]'); if(parents.length) { return this.canvas.getDocumentElement(parents[0]); } @@ -44,51 +78,27 @@ $.extend(DocumentElement.prototype, { }, sameNode: function(other) { - return other && (typeof other === typeof this) && other.dom()[0] === this.dom()[0]; + return other && (typeof other === typeof this) && other.dom[0] === this.dom[0]; }, - - getVerticallyFirstTextElement: function() { - var toret; - this.children().some(function(child) { - if(child instanceof DocumentTextElement) { - toret = child; - return true; // break - } else { - toret = child.getVerticallyFirstTextElement(); - if(toret) { - return true; // break - } - } - }); - return toret; + isRootElement: function() { + return this.sameNode(this.canvas.rootElement); }, - getPreviousTextElement: function(includeInvisible) { - return this.getNearestTextElement('above', includeInvisible); - }, - - getNextTextElement: function(includeInvisible) { - return this.getNearestTextElement('below', includeInvisible); - }, + trigger: function() { + this.canvas.eventBus.trigger.apply(this.canvas.eventBus, Array.prototype.slice.call(arguments, 0)); + } - 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])); - }, - exec: function(method) { - if(this.manager && this.manager[method]) { - return this.manager[method].apply(this.manager, Array.prototype.slice.call(arguments, 1)); - } - } }); // DocumentNodeElement represents an element node from WLXML document rendered inside Canvas var DocumentNodeElement = function(wlxmlNode, canvas) { DocumentElement.call(this, wlxmlNode, canvas); - wlxmlNode.setData('canvasElement', this); + this.containers = []; + this.elementsRegister = canvas.createElementsRegister(); + this.contextMenuActions = []; + this.init(this.dom); }; @@ -97,10 +107,12 @@ var manipulate = function(e, params, action) { if(params instanceof DocumentElement) { element = params; } else { - element = e.canvas.createElement(params); + element = e.createElement(params); + } + if(element.dom) { + e.dom[action](element.dom); + e.refreshPath(); } - var target = (action === 'append' || action === 'prepend') ? e._container() : e.dom(); - target[action](element.dom()); return element; }; @@ -108,42 +120,97 @@ DocumentNodeElement.prototype = Object.create(DocumentElement.prototype); $.extend(DocumentNodeElement.prototype, { + defaultDisplayStyle: 'block', + init: function() {}, + addWidget: function(widget) { + this.dom.children('.canvas-widgets').append(widget.DOM ? widget.DOM : widget); + }, + clearWidgets: function() { + this.dom.children('.canvas-widgets').empty(); + }, + addToGutter: function(view) { + if(!this.gutterGroup) { + this.gutterGroup = this.canvas.gutter.createViewGroup({ + offsetHint: function() { + return this.canvas.getElementOffset(this); + }.bind(this) + }, this); + } + this.gutterGroup.addView(view); + }, + createContainer: function(nodes, params) { + var toret = container.create(nodes, params, this); + this.containers.push(toret); + return toret; + }, + removeContainer: function(container) { + var idx; + if((idx = this.containers.indexOf(container)) !== -1) { + this.containers.splice(idx, 1); + } + }, + createElement: function(wlxmlNode) { + var parent = this.wlxmlNode.parent() ? utils.getElementForNode(this.wlxmlNode.parent()) : null; + return this.canvas.createElement(wlxmlNode, this.elementsRegister, !parent) || parent.createElement(wlxmlNode); + }, + addToContextMenu: function(actionFqName) { + this.contextMenuActions.push(this.canvas.createAction(actionFqName)); + }, + handle: function(event) { + var method = 'on' + event.type[0].toUpperCase() + event.type.substr(1), + target; + if(event.type === 'nodeAdded' || event.type === 'nodeDetached') { + this.containers.some(function(container) { + if(container.manages(event.meta.node, event.meta.parent)) { + target = container; + return true; + } + }); + } + + if(!target && this[method]) { + target = this; + } + + if(target) { + target[method](event); + } + }, createDOM: function() { - var dom = $('