X-Git-Url: https://git.mdrn.pl/fnpeditor.git/blobdiff_plain/8e6255bf612a7d33e1f1c97dd293db6f34949ef9..e816ae7584e8b11a1e24efb2f743ac744d80485b:/modules/documentCanvas/canvasManager.js diff --git a/modules/documentCanvas/canvasManager.js b/modules/documentCanvas/canvasManager.js index de085ce..a42eee6 100644 --- a/modules/documentCanvas/canvasManager.js +++ b/modules/documentCanvas/canvasManager.js @@ -1,10 +1,24 @@ define([ 'libs/jquery-1.9.1.min', -'./wlxmlNode' -], function($, wlxmlNode) { +'./canvasNode' +], function($, canvasNode) { 'use strict'; +var getCursorPosition = function() { + var selection = window.getSelection(); + var anchorNode = $(selection.anchorNode); + var parent = anchorNode.parent(); + return { + textNode: anchorNode, + textNodeOffset: selection.anchorOffset, + textNodeIndex: parent.contents().index(anchorNode), + parentNode: parent, + focusNode: $(selection.focusNode).parent(), + isAtEnd: selection.anchorOffset === anchorNode.text().length + } +}; + var Manager = function(canvas, sandbox) { this.canvas = canvas; this.sandbox = sandbox; @@ -20,40 +34,34 @@ var Manager = function(canvas, sandbox) { canvas.dom.on('mouseover', '[wlxml-tag]', function(e) { e.stopPropagation(); - manager.sandbox.publish('nodeHovered', new wlxmlNode.Node($(e.target))); + manager.sandbox.publish('nodeHovered', canvasNode.create($(e.target))); }); canvas.dom.on('mouseout', '[wlxml-tag]', function(e) { e.stopPropagation(); - manager.sandbox.publish('nodeBlured', new wlxmlNode.Node($(e.target))); + manager.sandbox.publish('nodeBlured', canvasNode.create($(e.target))); }); canvas.dom.on('click', '[wlxml-tag]', function(e) { e.stopPropagation(); console.log('clicked node type: '+e.target.nodeType); - manager.selectNode(new wlxmlNode.Node($(e.target))); + manager.selectNode(canvasNode.create($(e.target))); }); canvas.dom.on('keyup', '#rng-module-documentCanvas-contentWrapper', function(e) { var anchor = $(window.getSelection().anchorNode); + if(anchor[0].nodeType === Node.TEXT_NODE) anchor = anchor.parent(); if(!anchor.is('[wlxml-tag]')) return; - manager.selectNode(new wlxmlNode.Node(anchor)); + manager.selectNode(canvasNode.create(anchor)); }); canvas.dom.on('keydown', '#rng-module-documentCanvas-contentWrapper', function(e) { if(e.which === 13) { - e.preventDefault(); - manager.insertNewNode(null, null); + manager.onEnterKey(e); } if(e.which === 8) { - var anchor = window.getSelection().anchorNode; - var len = anchor.length; - console.log(len); - if(len === 1) { - e.preventDefault(); - $(anchor).parent().text(''); - } + manager.onBackspaceKey(e); } }); @@ -71,29 +79,54 @@ var Manager = function(canvas, sandbox) { } }; -Manager.prototype.selectNode = function(wlxmlNode, options) { - options = options || {}; - var nodeElement = this.getNodeElement(wlxmlNode) - - this.dimNode(wlxmlNode); - - this.canvas.dom.find('.rng-module-documentCanvas-currentNode').removeClass('rng-module-documentCanvas-currentNode'); - nodeElement.addClass('rng-module-documentCanvas-currentNode'); - - if(options.movecaret) { - this.movecaretToNode(nodeElement); - } - - this.currentNode = wlxmlNode; - this.sandbox.publish('nodeSelected', wlxmlNode); +Manager.prototype.selectNode = function(cnode, options) { + options = options || {}; + var nodeElement = this.getNodeElement(cnode) + + this.dimNode(cnode); + + this.canvas.dom.find('.rng-module-documentCanvas-currentNode').removeClass('rng-module-documentCanvas-currentNode'); + nodeElement.addClass('rng-module-documentCanvas-currentNode'); + + if(options.movecaret) { + this.movecaretToNode(nodeElement, options.movecaret); + } + + this.currentNode = cnode; + this.sandbox.publish('nodeSelected', cnode); }; -Manager.prototype.getNodeElement = function(wlxmlNode) { - return this.canvas.dom.find('#'+wlxmlNode.id); +Manager.prototype.insertNewNode = function(wlxmlTag, wlxmlClass) { + var selection = window.getSelection(); + + if(selection.getRangeAt(0).collapsed) { + + } else { + var offsetStart = selection.anchorOffset; + var offsetEnd = selection.focusOffset; + if(offsetStart > offsetEnd) { + var tmp = offsetStart; + offsetStart = offsetEnd; + offsetEnd = tmp; + } + var wrapper = canvasNode.create({tag: wlxmlTag, klass: wlxmlClass}); + this.canvas.nodeWrap({inside: canvasNode.create($(selection.anchorNode).parent()), + _with: wrapper, + offsetStart: offsetStart, + offsetEnd: offsetEnd + }); + this.selectNode(wrapper, {movecaret: 'end'}); + } + + +} + +Manager.prototype.getNodeElement = function(cnode) { + return this.canvas.dom.find('#'+cnode.getId()); }; -Manager.prototype.highlightNode = function(wlxmlNode) { - var nodeElement = this.getNodeElement(wlxmlNode); +Manager.prototype.highlightNode = function(cnode) { + var nodeElement = this.getNodeElement(cnode); if(!this.gridToggled) { nodeElement.addClass('rng-common-hoveredNode'); var label = nodeElement.attr('wlxml-tag'); @@ -104,8 +137,8 @@ Manager.prototype.highlightNode = function(wlxmlNode) { } }; -Manager.prototype.dimNode = function(wlxmlNode) { - var nodeElement = this.getNodeElement(wlxmlNode); +Manager.prototype.dimNode = function(cnode) { + var nodeElement = this.getNodeElement(cnode); if(!this.gridToggled) { nodeElement.removeClass('rng-common-hoveredNode'); nodeElement.find('.rng-module-documentCanvas-hoveredNodeTag').remove(); @@ -122,13 +155,19 @@ Manager.prototype.selectFirstNode = function() { else { node = this.canvas.dom.find('[wlxml-class|="p"]') } - this.selectNode(new wlxmlNode.Node(node), {movecaret: true}); + this.selectNode(canvasNode.create(node), {movecaret: true}); }; -Manager.prototype.movecaretToNode = function(nodeElement) { +Manager.prototype.movecaretToNode = function(nodeElement, where) { + if(!nodeElement.length) + return; var range = document.createRange(); range.selectNodeContents(nodeElement[0]); - range.collapse(false); + + var collapseArg = true; + if(where === 'end') + collapseArg = false; + range.collapse(collapseArg); var selection = document.getSelection(); selection.removeAllRanges() selection.addRange(range); @@ -139,24 +178,62 @@ Manager.prototype.toggleGrid = function(toggle) { this.gridToggled = toggle; }; -Manager.prototype.insertNewNode = function(wlxmlTag, wlxmlClass) { - //TODO: Insert inline - var anchor = $(window.getSelection().anchorNode); - var anchorOffset = window.getSelection().anchorOffset; - - var parent = anchor.parent(); - var idx = parent.contents().index(anchor); - - if(anchorOffset < anchor.text().length) { - var newNode = this.canvas.splitNode({node: {id: parent.attr('id')}, textNodeIdx: idx, offset: anchorOffset}); - this.selectNode(new wlxmlNode.Node(newNode), {movecaret: true}); - } +Manager.prototype.onEnterKey = function(e) { + e.preventDefault(); + var pos = getCursorPosition(); + var contextNode = this.canvas.getNodeById(pos.parentNode.attr('id')); + var newNode; - - + if(pos.isAtEnd) { + newNode = canvasNode.create({tag: pos.parentNode.attr('wlxml-tag'), klass: pos.parentNode.attr('wlxml-class')}); + this.canvas.nodeInsertAfter({node: newNode, after: this.canvas.getNodeById(pos.parentNode.attr('id'))}); + } else { + newNode = this.canvas.nodeSplit({node: contextNode, textNodeIdx: pos.textNodeIndex, offset: pos.textNodeOffset}); + } + if(newNode) + this.selectNode(newNode, {movecaret: true}); this.sandbox.publish('contentChanged'); }; +Manager.prototype.onBackspaceKey = function(e) { + var pos = getCursorPosition(); + var len = pos.textNode.text().length; + if(len === 1) { + // Prevent deleting node by browser after last character removed; + e.preventDefault(); + pos.parentNode.text(''); + } + if(len === 0) { + e.preventDefault(); + var toRemove = canvasNode.create(pos.textNode); + var prevNode = this.canvas.getPrecedingNode({node:toRemove}); + this.canvas.nodeRemove({node: toRemove}); // jesli nie ma tekstu, to anchor nie jest tex nodem + this.selectNode(prevNode, {movecaret: 'end'}); + } +} + +Manager.prototype.command = function(command, meta) { + var pos = getCursorPosition(); + + if(command === 'createList') { + var node = canvasNode.create(pos.parentNode); + if(window.getSelection().getRangeAt().collapsed && this.canvas.nodeInsideList({node: node})) { + this.canvas.listRemove({pointer: node}); + this.selectNode(node, {movecaret: 'end'}); + this.sandbox.publish('contentChanged'); + } + else { + //if(!this.canvas.nodeInsideList({node: node})) { + this.canvas.listCreate({start: node, end: canvasNode.create(pos.focusNode), type: meta}); + this.selectNode(node, {movecaret: 'end'}); + this.sandbox.publish('contentChanged'); + //} + } + } + +} + + return Manager; }); \ No newline at end of file