Insert typed characters with the help of the cursor #39

engelfrost · Jun 29, 2014 · 0344308 · 0344308
1 parent ed1f16e
commit 0344308
Show file tree

Hide file tree

Showing 5 changed files with 105 additions and 28 deletions.
diff --git a/dist/svg-input-elements.js b/dist/svg-input-elements.js
@@ -9,20 +9,24 @@
   svgNS = 'http://www.w3.org/2000/svg';
 
   controllerPrototype = {
-    set: function(word, char, cursorPoint) {
+    set: function(word, charNum, cursorPoint) {
       this.model.word = word;
-      this.model.char = char;
+      this.model.charNum = charNum;
       return this.model.view.setAttributeNS(null, "transform", "translate(" + cursorPoint.x + ", " + word("dy") + ")");
     },
     word: function() {
       return this.model.word;
     },
-    char: function() {
-      return this.model.char;
+    charNum: function() {
+      return this.model.charNum;
+    },
+    char: function(char) {
+      console.log(char);
+      return this.model.word("insert", char, this.model.charNum);
     }
   };
 
-  SVGIE.cursor = function(textarea, word, char) {
+  SVGIE.cursor = function(textarea, word, charNum) {
     var controller;
     controller = Object.create(controllerPrototype);
     controller.facet = function() {
@@ -35,7 +39,7 @@
     };
     controller.model = {
       word: word,
-      char: char,
+      charNum: charNum,
       view: (function(_this) {
         return function() {
           var v;
@@ -57,6 +61,49 @@
 
 }).call(this);
 
+(function() {
+  var controllerPrototype, svgNS,
+    __slice = [].slice;
+
+  if (this.SVGIE == null) {
+    this.SVGIE = {};
+  }
+
+  svgNS = 'http://www.w3.org/2000/svg';
+
+  controllerPrototype = {};
+
+  SVGIE.keyboard = function(textarea, cursor) {
+    var controller;
+    controller = Object.create(controllerPrototype);
+    controller.facet = function() {
+      var args, method;
+      method = arguments[0], args = 2 <= arguments.length ? __slice.call(arguments, 1) : [];
+      if (method === "facet" || method === "model" || (controller[method] == null)) {
+        return void 0;
+      }
+      return controller[method].apply(controller, args);
+    };
+    controller.model = {
+      cursor: cursor
+    };
+    window.addEventListener("keypress", function(e) {
+      var s;
+      if (e.which != null) {
+        s = String.fromCharCode(e.keyCode);
+      } else if (e.which !== 0 && e.charCode !== 0) {
+        s = String.fromCharCode(e.which);
+      } else {
+        s = "";
+      }
+      console.log(e);
+      return controller.model.cursor("char", s);
+    });
+    return controller.facet;
+  };
+
+}).call(this);
+
 (function() {
   var controllerPrototype, svgNS,
     __slice = [].slice;
@@ -177,6 +224,7 @@
     };
     controller.model.words = SVGIE.word(controller.facet, null, s);
     controller.model.cursor = SVGIE.cursor(controller.facet, controller.model.words("prev"), -1);
+    controller.model.keyboard = SVGIE.keyboard(controller.facet, controller.model.cursor);
     return controller.facet;
   };
 
@@ -397,20 +445,20 @@
         v.setAttributeNS(spaceNS, "xml:space", "preserve");
         textarea("view").appendChild(v);
         v.addEventListener("click", function(e) {
-          var char, charRect, cursor, cursorPoint, p, x, y;
+          var charNum, charRect, cursor, cursorPoint, p, x, y;
           x = e.clientX - v.ownerSVGElement.offsetLeft;
           y = e.clientY - v.ownerSVGElement.offsetTop;
           p = textarea("svgPoint", x, y);
-          char = v.getCharNumAtPosition(p);
-          charRect = v.getExtentOfChar(char);
+          charNum = v.getCharNumAtPosition(p);
+          charRect = v.getExtentOfChar(charNum);
           if (x < (charRect.x + (charRect.width / 2))) {
-            cursorPoint = v.getStartPositionOfChar(char);
+            cursorPoint = v.getStartPositionOfChar(charNum);
           } else {
-            cursorPoint = v.getEndPositionOfChar(char);
-            char += 1;
+            cursorPoint = v.getEndPositionOfChar(charNum);
+            charNum += 1;
           }
           cursor = textarea("cursor");
-          return cursor("set", controller.facet, char, cursorPoint);
+          return cursor("set", controller.facet, charNum, cursorPoint);
         });
         return v;
       })(),

diff --git a/source/cursor.coffee b/source/cursor.coffee
@@ -3,24 +3,27 @@ this.SVGIE ?= {}
 svgNS = 'http://www.w3.org/2000/svg'
 
 controllerPrototype = 
-	set: (word, char, cursorPoint) ->
+	set: (word, charNum, cursorPoint) ->
 		@model.word = word
-		@model.char = char
+		@model.charNum = charNum
 		@model.view.setAttributeNS null, "transform", "translate(" + cursorPoint.x + ", " + word("dy") + ")"
 	word: ->
 		@model.word
-	char: ->
-		@model.char
+	charNum: ->
+		@model.charNum
+	char: (char) ->
+		console.log char
+		@model.word("insert", char, @model.charNum)
 
-SVGIE.cursor = (textarea, word, char) ->
+SVGIE.cursor = (textarea, word, charNum) ->
   controller = Object.create controllerPrototype
   controller.facet = (method, args...) ->
     if method is "facet" or method is "model" or not controller[method]?
       return undefined
     controller[method].apply controller, args
   controller.model = 
   	word: word
-  	char: char
+  	charNum: charNum
   	view: do =>
       v = document.createElementNS svgNS, "line"
       v.setAttributeNS null, "x1", 0

diff --git a/source/keyboard.coffee b/source/keyboard.coffee
@@ -0,0 +1,27 @@
+this.SVGIE ?= {}
+
+svgNS = 'http://www.w3.org/2000/svg'
+
+controllerPrototype = {}
+
+SVGIE.keyboard = (textarea, cursor) ->
+  controller = Object.create controllerPrototype
+
+  controller.facet = (method, args...) ->
+    if method is "facet" or method is "model" or not controller[method]?
+      return undefined
+    controller[method].apply controller, args
+  controller.model = 
+    cursor: cursor
+
+  window.addEventListener "keypress", (e) ->
+    if e.which? 
+      s = String.fromCharCode e.keyCode
+    else if e.which isnt 0 and e.charCode isnt 0
+      s = String.fromCharCode e.which 
+    else 
+      s = ""
+    console.log e
+    controller.model.cursor "char", s
+  controller.facet
+
diff --git a/source/textarea.coffee b/source/textarea.coffee
@@ -65,7 +65,6 @@ SVGIE.textarea = (el, options, s) ->
     if method is "facet" or method is "model" or not controller[method]?
       return undefined
     controller[method].apply controller, args
-
   controller.model = 
     height: unless options.height? then null else options.height
     width: unless options.width? then null else options.width
@@ -80,9 +79,9 @@ SVGIE.textarea = (el, options, s) ->
       rect.height
     facet: controller.facet
     svg: svg
-
-  # controller.facet needs controller.model to be defined
+  # Watch out with dependencies! controller.facet needs controller.model to be defined
   controller.model.words = SVGIE.word controller.facet, null, s
   controller.model.cursor = SVGIE.cursor controller.facet, controller.model.words("prev"), -1
+  controller.model.keyboard = SVGIE.keyboard controller.facet, controller.model.cursor
 
   controller.facet
diff --git a/source/word.coffee b/source/word.coffee
@@ -160,15 +160,15 @@ SVGIE.word = (textarea, prev, s) ->
         x = e.clientX - v.ownerSVGElement.offsetLeft # clientX, pageX, x, offsetX <-relative to <text>
         y = e.clientY - v.ownerSVGElement.offsetTop
         p = textarea "svgPoint", x, y
-        char = v.getCharNumAtPosition p
-        charRect = v.getExtentOfChar char
+        charNum = v.getCharNumAtPosition p
+        charRect = v.getExtentOfChar charNum
         if x < (charRect.x + (charRect.width / 2))
-          cursorPoint = v.getStartPositionOfChar char
+          cursorPoint = v.getStartPositionOfChar charNum
         else
-          cursorPoint = v.getEndPositionOfChar char
-          char += 1
+          cursorPoint = v.getEndPositionOfChar charNum
+          charNum += 1
         cursor = textarea("cursor")
-        cursor("set", controller.facet, char, cursorPoint)
+        cursor("set", controller.facet, charNum, cursorPoint)
 
         #if e.offsetX > (charRect.x + (charRect.width / 2))
         #  char += 1