poke43 - npm Package Compare versions

Comparing version 1.13.0 to 1.14.0

package.json

 {
   "name": "poke43",
-  "version": "1.13.0",
+  "version": "1.14.0",
   "description": "Touch based browser edit components",
@@ -5,0 +5,0 @@ "keywords": [

poke43.js

 /*
-  Poke43 - Touch based browser writing system experiments
+  Poke43 - Touch based browser edit components
 
@@ -153,7 +153,7 @@ Copyright (c) 2018 Radoslav Peev <[e-mail]> (MIT License)
 
-  get caretIsAtSOB() {
+  get caretIsAtStart() {
     return this.caretIsAtFirstLine && this.caretIsAtSOL;
   }
 
-  get caretIsAtEOB() {
+  get caretIsAtEnd() {
     return this.caretIsAtLastLine && this.caretIsAtEOL;
@@ -201,7 +201,7 @@ }
 
-  moveToSOB() {
+  moveToStart() {
     return this.moveCaret(0);
   }
 
-  moveToEOB() {
+  moveToEnd() {
     let iLastLine = this._lines.length - 1,
@@ -353,2 +353,4 @@ iLastColumn = this._lines[iLastLine].length;
 
+    this.revealCaret();
+
     return this;
@@ -395,2 +397,4 @@ }
 
+    this.revealCaret();
+
     return this;
@@ -404,2 +408,4 @@ }
     elLine.children[1].style.visibility = 'hidden';
+
+    return this;
   }
@@ -412,36 +418,48 @@
     elLine.children[1].style.visibility = 'visible';
+
+    return this;
   }
-}
 
-class Editor {
-  constructor(el) {
-    this._el = el;
-    this._model = new poke43.EditorModel(this._el.textContent);
-    this._view = new poke43.EditorView(this._el, this._model);
-    this._hammer = new Hammer(this._el, {
-      touchAction: 'auto'
-    });
+  revealCaret() {
+    let caretRect = this.caretRect,
+      rect = this.rect,
+      leftDelta = (caretRect.left - 2) - rect.left,
+      topDelta = (caretRect.top - 3) - rect.top,
+      rightDelta = rect.right - (caretRect.right + 2),
+      bottomDelta = rect.bottom - (caretRect.bottom + 3);
 
-    this._view.renderFully();
-    this._hammer.on('tap', ev => this._handleTap(ev));
-  }
+    if (leftDelta < 0) {
+      this._el.scrollLeft += leftDelta;
+    }
 
-  get content() {
-    return this._model.content;
-  }
+    if (topDelta < 0) {
+      this._el.scrollTop += topDelta;
+    }
 
-  set content(text) {
-    this._model.content = text;
-    this._view.renderFully();
+    if (rightDelta < 0) {
+      this._el.scrollLeft -= rightDelta;
+    }
+
+    if (bottomDelta < 0) {
+      this._el.scrollTop -= bottomDelta;
+    }
+
+    return this;
   }
 
-  get _lineHeight() {
+  get lineHeight() {
     return this._el.scrollHeight / this._el.children.length;
   }
 
-  get _editorRect() {
+  get caretRect() {
+    let elCaret = this._el.children[this._model.caret.iLine].children[1];
+
+    return elCaret.getBoundingClientRect();
+  }
+
+  get rect() {
     return this._el.getBoundingClientRect();
   }
 
-  get _editorScrollPos() {
+  get scrollPos() {
     return {
@@ -453,27 +471,24 @@ left: this._el.scrollLeft,
 
-  _editorTouchCoords(ev, iPointer = 0) {
-    let editorRect = this._editorRect;
+  touchCoords(ev, iPointer = 0) {
+    let rect = this.rect;
 
     return {
-      x: ev.pointers[iPointer].clientX - editorRect.left,
-      y: ev.pointers[iPointer].clientY - editorRect.top
+      x: ev.pointers[iPointer].clientX - rect.left,
+      y: ev.pointers[iPointer].clientY - rect.top
     };
   }
 
-  _bufferTouchCoords(editorTouchCoords) {
-    let editorScrollPos = this._editorScrollPos;
+  scrollTouchCoords(touchCoords) {
+    let scrollPos = this.scrollPos;
 
     return {
-      x: editorScrollPos.left + editorTouchCoords.x,
-      y: editorScrollPos.top + editorTouchCoords.y
+      x: scrollPos.left + touchCoords.x,
+      y: scrollPos.top + touchCoords.y
     };
   }
 
-  _lineIndex(bufferTouchCoords) {
-    return Math.floor(bufferTouchCoords.y / this._lineHeight);
-  }
-
-  // Turns out this works pretty good for non monospaced fonts as well
-  _columnIndex(bufferTouchCoords, iLine) {
-    let iColumn = this._model.line(iLine).length,
+  // Turns out iColumn calculation works pretty good for non monospaced fonts as well
+  modelIndices(scrollTouchCoords) {
+    let iLine = Math.floor(scrollTouchCoords.y / this.lineHeight),
+      iColumn = this._model.line(iLine).length,
       elLine = this._el.children[iLine];
@@ -489,3 +504,3 @@
 
-        iColumn = Math.min(Math.floor(bufferTouchCoords.x / charWidth), iColumn);
+        iColumn = Math.min(Math.floor(scrollTouchCoords.x / charWidth), iColumn);
 
@@ -496,12 +511,37 @@ break;
 
-    return iColumn;
+    return {
+      iLine: iLine,
+      iColumn: iColumn
+    };
   }
+}
 
+class Editor {
+  constructor(el) {
+    this._el = el;
+    this._model = new poke43.EditorModel(this._el.textContent);
+    this._view = new poke43.EditorView(this._el, this._model);
+    this._hammer = new Hammer(this._el, {
+      touchAction: 'auto'
+    });
+
+    this._view.renderFully();
+    this._hammer.on('tap', ev => this._handleTap(ev));
+  }
+
+  get content() {
+    return this._model.content;
+  }
+
+  set content(text) {
+    this._model.content = text;
+    this._view.renderFully();
+  }
+
   _handleTap(ev) {
-    let editorTouchCoords = this._editorTouchCoords(ev),
-      bufferTouchCoords = this._bufferTouchCoords(editorTouchCoords),
-      iLine = this._lineIndex(bufferTouchCoords),
-      iColumn = this._columnIndex(bufferTouchCoords, iLine);
+    let newCaret = this._view.modelIndices(
+        this._view.scrollTouchCoords(this._view.touchCoords(ev))
+      );
 
-    this._model.moveCaret(iLine, iColumn);
+    this._model.moveCaret(newCaret.iLine, newCaret.iColumn);
     this._view.renderCaretLine();
@@ -677,4 +717,4 @@ }
 
-  moveToSOB() {
-    this._model.moveToSOB();
+  moveToStart() {
+    this._model.moveToStart();
     this._view.renderCaretLine();
@@ -685,4 +725,4 @@
 
-  moveToEOB() {
-    this._model.moveToEOB();
+  moveToEnd() {
+    this._model.moveToEnd();
     this._view.renderCaretLine();
@@ -1576,17 +1616,23 @@
     this._flashDuration = Number(props.flashDuration || 100);
-    this._hammer = new Hammer(this._el);
+    this._hammer = new Hammer.Manager(this._el);
 
     this._el.classList.add('poke43-key');
 
-    this._hammer.
-      get('swipe').
-      set({direction: Hammer.DIRECTION_ALL});
+    this._hammer.add(new Hammer.Tap());
+    this._hammer.add(new Hammer.Swipe({
+      direction: Hammer.DIRECTION_ALL,
+      treshold: 2,
+      velocity: 0.05
+    }));
 
-    this._hammer.
-      on('tap', ev => {
-        ev.preventDefault(); // Prevent zoom on double-tap
+    this._hammer.on('tap', ev => {
+      ev.preventDefault(); // Prevent zoom on double-tap
 
-        this.onCommand(ev);
-      }).
-      on('swipe', ev => this._dispatchSwipe(ev.angle).call(this, ev));
+      this.onCommand(ev);
+    });
+    this._hammer.on('swipe', ev => {
+      let handler = this._dispatchSwipe(ev.angle);
+
+      handler.call(this, ev);
+    });
   }
@@ -1593,0 +1639,0 @@

RELNOTES.md

 # Release Notes
 
+## 1.14.0
+
+* Add dark theme
+* Make sure the caret stays within visible editor area when editing
+* Make swipe over the keys a bit more sensitive
+
 ## 1.13.0
@@ -4,0 +10,0 @@

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

643228

increased by59.91%

Number of package files

15

increased by7.14%

Lines of code

2605

increased by4.66%

No dependency changes