canvas manager wip: experiments

diff --git a/modules/documentCanvas/canvasManager.js b/modules/documentCanvas/canvasManager.js
index 886ce07..6a0fc5c 100644 (file)
--- a/modules/documentCanvas/canvasManager.js
+++ b/modules/documentCanvas/canvasManager.js
@@ -5,6 +5,19 @@ define([
 \r
 'use strict';\r
 \r
 \r
 'use strict';\r
 \r

+var getCursorPosition = function() {\r
+    var selection = window.getSelection();\r
+    var anchorNode = $(selection.anchorNode);\r
+    var parent = anchorNode.parent();\r
+    return {\r
+        textNode: anchorNode,\r
+        textNodeOffset: selection.anchorOffset,\r
+        textNodeIndex: parent.contents().index(anchorNode),\r
+        parentNode: parent,\r
+        isAtEnd: selection.anchorOffset === anchorNode.text().length\r
+    }\r
+};\r
+\r

 var Manager = function(canvas, sandbox) {\r
     this.canvas = canvas;\r
     this.sandbox = sandbox;\r
 var Manager = function(canvas, sandbox) {\r
     this.canvas = canvas;\r
     this.sandbox = sandbox;\r


@@ -34,6 +47,7 @@ var Manager = function(canvas, sandbox) {
 \r
     canvas.dom.on('keyup', '#rng-module-documentCanvas-contentWrapper', function(e) {\r
         var anchor = $(window.getSelection().anchorNode);\r
 \r
     canvas.dom.on('keyup', '#rng-module-documentCanvas-contentWrapper', function(e) {\r
         var anchor = $(window.getSelection().anchorNode);\r

+        \r

         if(anchor[0].nodeType === Node.TEXT_NODE)\r
             anchor = anchor.parent();\r
         if(!anchor.is('[wlxml-tag]'))\r
         if(anchor[0].nodeType === Node.TEXT_NODE)\r
             anchor = anchor.parent();\r
         if(!anchor.is('[wlxml-tag]'))\r


@@ -43,17 +57,10 @@ var Manager = function(canvas, sandbox) {
     \r
     canvas.dom.on('keydown', '#rng-module-documentCanvas-contentWrapper', function(e) {\r
         if(e.which === 13) { \r
     \r
     canvas.dom.on('keydown', '#rng-module-documentCanvas-contentWrapper', function(e) {\r
         if(e.which === 13) { \r

-            e.preventDefault();\r
-            manager.insertNewNode(null, null);\r
+            manager.onEnterKey(e);\r

         }\r
         if(e.which === 8) {\r
         }\r
         if(e.which === 8) {\r

-            var anchor = window.getSelection().anchorNode;\r
-            var len = anchor.length;\r
-            console.log(len);\r
-            if(len === 1) {\r
-                e.preventDefault();\r
-                $(anchor).parent().text('');\r
-            }\r
+            manager.onBackspaceKey(e);\r

         }\r
     });\r
               \r
         }\r
     });\r
               \r


@@ -81,7 +88,7 @@ Manager.prototype.selectNode = function(wlxmlNode, options) {
     nodeElement.addClass('rng-module-documentCanvas-currentNode');\r
     \r
     if(options.movecaret) {\r
     nodeElement.addClass('rng-module-documentCanvas-currentNode');\r
     \r
     if(options.movecaret) {\r

-        this.movecaretToNode(nodeElement);\r
+        this.movecaretToNode(nodeElement, options.movecaret);\r

     }\r
     \r
     this.currentNode = wlxmlNode;\r
     }\r
     \r
     this.currentNode = wlxmlNode;\r


@@ -125,10 +132,14 @@ Manager.prototype.selectFirstNode = function() {
     this.selectNode(new wlxmlNode.Node(node), {movecaret: true});\r
 };\r
 \r
     this.selectNode(new wlxmlNode.Node(node), {movecaret: true});\r
 };\r
 \r

-Manager.prototype.movecaretToNode = function(nodeElement) {\r
+Manager.prototype.movecaretToNode = function(nodeElement, where) {\r

     var range = document.createRange();\r
     range.selectNodeContents(nodeElement[0]);\r
     var range = document.createRange();\r
     range.selectNodeContents(nodeElement[0]);\r

-    range.collapse(true);\r
+    \r
+    var collapseArg = true;\r
+    if(where === 'end')\r
+        collapseArg = false;\r
+    range.collapse(collapseArg);\r

     var selection = document.getSelection();\r
     selection.removeAllRanges()\r
     selection.addRange(range);\r
     var selection = document.getSelection();\r
     selection.removeAllRanges()\r
     selection.addRange(range);\r


@@ -139,24 +150,39 @@ Manager.prototype.toggleGrid =  function(toggle) {
     this.gridToggled = toggle;\r
 };\r
 \r
     this.gridToggled = toggle;\r
 };\r
 \r

-Manager.prototype.insertNewNode = function(wlxmlTag, wlxmlClass) {\r
-    //TODO: Insert inline\r
-    var anchor = $(window.getSelection().anchorNode);\r
-    var anchorOffset = window.getSelection().anchorOffset;\r
-    \r
-    var parent = anchor.parent();\r
-    var idx = parent.contents().index(anchor);\r
-    \r
-    if(anchorOffset < anchor.text().length) {\r
-        var newNode = this.canvas.splitNode({node: {id: parent.attr('id')}, textNodeIdx: idx, offset: anchorOffset});\r
-        this.selectNode(new wlxmlNode.Node(newNode), {movecaret: true});\r
+Manager.prototype.onEnterKey = function(e) {\r
+    e.preventDefault();\r
+    var pos = getCursorPosition();\r
+    var insertedNode;\r
+    if(pos.isAtEnd) {\r
+        insertedNode = this.canvas.insertNode({place: 'after', context: {id: pos.parentNode.attr('id')}, tag: pos.parentNode.attr('wlxml-tag'), klass: pos.parentNode.attr('wlxml-class')});\r
+    } else {\r
+        insertedNode = this.canvas.splitNode({node: {id: pos.parentNode.attr('id')}, textNodeIdx: pos.textNodeIndex, offset: pos.textNodeOffset});\r

     }\r
     }\r

-\r
-    \r
-    \r
+    if(insertedNode.length)\r
+        this.selectNode(new wlxmlNode.Node(insertedNode), {movecaret: true});\r

     this.sandbox.publish('contentChanged');\r
 };\r
 \r
     this.sandbox.publish('contentChanged');\r
 };\r
 \r

+Manager.prototype.onBackspaceKey = function(e) {\r
+    var pos = getCursorPosition();\r
+    var len = pos.textNode.text().length;\r
+    if(len === 1) {\r
+        // Prevent deleting node by browser after last character removed;\r
+        e.preventDefault();\r
+        pos.parentNode.text('');\r
+    }\r
+    if(len === 0) {\r
+        e.preventDefault();\r
+        var toRemove = new wlxmlNode.Node(pos.textNode);\r
+        var prevNode = this.canvas.getPreviousNode({node:toRemove});\r
+        this.canvas.removeNode({node: toRemove}); // jesli nie ma tekstu, to anchor nie jest tex nodem\r
+        this.selectNode(prevNode, {movecaret: 'end'});\r
+    }\r
+}\r
+\r
+\r
+\r

 return Manager;\r
     \r
 });
\ No newline at end of file
 return Manager;\r
     \r
 });
\ No newline at end of file