third_party/google_input_tools/src/chrome/os/inputview/strokehandler.js

   1 // Copyright 2014 The ChromeOS IME Authors. All Rights Reserved.
   2 // limitations under the License.
   3 // See the License for the specific language governing permissions and
   4 // WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
   5 // distributed under the License is distributed on an "AS-IS" BASIS,
   6 // Unless required by applicable law or agreed to in writing, software
   7 //
   8 //      http://www.apache.org/licenses/LICENSE-2.0
   9 //
  10 // You may obtain a copy of the License at
  11 // you may not use this file except in compliance with the License.
  12 // Licensed under the Apache License, Version 2.0 (the "License");
  13 //
  14
  15 /**
  16  * @fileoverview Defines the class i18n.input.hwt.StrokeHandler.
  17  * @author fengyuan@google.com (Feng Yuan)
  18  */
  19
  20 goog.provide('i18n.input.hwt.StrokeHandler');
  21 goog.provide('i18n.input.hwt.StrokeHandler.Point');
  22 goog.provide('i18n.input.hwt.StrokeHandler.StrokeEvent');
  23
  24
  25 goog.require('goog.events');
  26 goog.require('goog.events.Event');
  27 goog.require('goog.events.EventHandler');
  28 goog.require('goog.events.EventTarget');
  29 goog.require('goog.events.EventType');
  30 goog.require('goog.style');
  31 goog.require('goog.userAgent');
  32 goog.require('i18n.input.hwt.util');
  33
  34
  35
  36 /**
  37  * The handler for strokes.
  38  *
  39  * @param {!Element} canvas The handwriting canvas.
  40  * @param {!Document} topDocument The top document.
  41  * @constructor
  42  * @extends {goog.events.EventTarget}
  43  */
  44 i18n.input.hwt.StrokeHandler = function(canvas, topDocument) {
  45   goog.base(this);
  46
  47   /**
  48    * The event handler.
  49    *
  50    * @type {goog.events.EventHandler}
  51    * @private
  52    */
  53   this.eventHandler_ = new goog.events.EventHandler(this);
  54
  55   /**
  56    * Whether is drawing the stroke.
  57    *
  58    * @type {boolean}
  59    */
  60   this.drawing = false;
  61
  62   /**
  63    * The canvas.
  64    *
  65    * @type {Element}
  66    * @private
  67    */
  68   this.canvas_ = canvas;
  69
  70   // Always register mouse events. Some devices like Tablet PCs
  71   // actually support both touch and mouse events, and the touch
  72   // events don't get translated to mouse events on Tablet PCs.
  73   this.eventHandler_.
  74       listen(canvas, goog.events.EventType.MOUSEDOWN, this.onStrokeStart_).
  75       listen(canvas, goog.events.EventType.MOUSEMOVE, this.onStroke_);
  76   // Listen for touch events if they are supported.
  77   if ('ontouchstart' in window) {
  78     this.eventHandler_.
  79         listen(canvas, goog.events.EventType.TOUCHSTART, this.onStrokeStart_).
  80         listen(canvas, goog.events.EventType.TOUCHEND, this.onStrokeEnd_).
  81         listen(canvas, goog.events.EventType.TOUCHCANCEL, this.onStrokeEnd_).
  82         listen(canvas, goog.events.EventType.TOUCHMOVE, this.onStroke_);
  83   }
  84
  85   i18n.input.hwt.util.listenPageEvent(this.eventHandler_, topDocument,
  86       goog.events.EventType.MOUSEUP,
  87       goog.bind(this.onStrokeEnd_, this));
  88 };
  89 goog.inherits(i18n.input.hwt.StrokeHandler, goog.events.EventTarget);
  90
  91
  92 /**
  93  * Callback for the start of one stroke.
  94  *
  95  * @param {goog.events.BrowserEvent} e Event.
  96  * @private
  97  */
  98 i18n.input.hwt.StrokeHandler.prototype.onStrokeStart_ = function(e) {
  99   this.drawing = true;
 100   this.dispatchEvent(new i18n.input.hwt.StrokeHandler.StrokeEvent(
 101       i18n.input.hwt.StrokeHandler.EventType.STROKE_START,
 102       this.getPoint_(e)));
 103   e.preventDefault();
 104 };
 105
 106
 107 /**
 108  * Callback for the end of one stroke.
 109  *
 110  * @param {goog.events.BrowserEvent} e Event.
 111  * @private
 112  */
 113 i18n.input.hwt.StrokeHandler.prototype.onStrokeEnd_ = function(e) {
 114   if (this.drawing) {
 115     this.drawing = false;
 116     this.dispatchEvent(new i18n.input.hwt.StrokeHandler.StrokeEvent(
 117         i18n.input.hwt.StrokeHandler.EventType.STROKE_END,
 118         this.getPoint_(e)));
 119     e.preventDefault();
 120   }
 121 };
 122
 123
 124 /**
 125  * Callback for stroke.
 126  *
 127  * @param {goog.events.BrowserEvent} e Event.
 128  * @private
 129  */
 130 i18n.input.hwt.StrokeHandler.prototype.onStroke_ = function(e) {
 131   if (this.drawing) {
 132     this.dispatchEvent(new i18n.input.hwt.StrokeHandler.StrokeEvent(
 133         i18n.input.hwt.StrokeHandler.EventType.STROKE,
 134         this.getPoint_(e)));
 135   }
 136   e.preventDefault();
 137 };
 138
 139
 140 /**
 141  * Given a mouse or touch event, figure out the coordinates where it occurred.
 142  *
 143  * @param {goog.events.BrowserEvent} e Event.
 144  * @return {!i18n.input.hwt.StrokeHandler.Point} a point.
 145  * @private
 146  */
 147 i18n.input.hwt.StrokeHandler.prototype.getPoint_ = function(e) {
 148   var pos = goog.style.getPageOffset(this.canvas_);
 149   var nativeEvent = e.getBrowserEvent();
 150   var x, y;
 151   if (!goog.userAgent.IE && nativeEvent.pageX && nativeEvent.pageY) {
 152     x = nativeEvent.pageX;
 153     y = nativeEvent.pageY;
 154   } else {
 155     var scrollX = (document.dir == 'rtl' ? -1 : 1) * (
 156         document.body.scrollLeft ||
 157         document.documentElement.scrollLeft || 0);
 158     var scrollY = document.body.scrollTop ||
 159         document.documentElement.scrollTop || 0;
 160     x = nativeEvent.clientX + scrollX;
 161     y = nativeEvent.clientY + scrollY;
 162   }
 163   if (nativeEvent.touches != null && nativeEvent.touches.length > 0) {
 164     x = nativeEvent.touches[0].clientX;
 165     y = nativeEvent.touches[0].clientY;
 166   }
 167   return new i18n.input.hwt.StrokeHandler.Point(x - pos.x, y - pos.y,
 168       goog.now());
 169 };
 170
 171
 172 /**
 173  * Reset the drawing flag, in case the drawing canvas gets cleared while
 174  * stroke is being drawn.
 175  */
 176 i18n.input.hwt.StrokeHandler.prototype.reset = function() {
 177   this.drawing = false;
 178 };
 179
 180
 181 /** @override */
 182 i18n.input.hwt.StrokeHandler.prototype.disposeInternal = function() {
 183   goog.dispose(this.eventHandler_);
 184   this.eventHandler_ = null;
 185 };
 186
 187
 188
 189 /**
 190  * One point in the stroke.
 191  *
 192  * @param {number} x The x.
 193  * @param {number} y The y.
 194  * @param {number} time The time in miliseconds.
 195  * @constructor
 196  */
 197 i18n.input.hwt.StrokeHandler.Point = function(x, y, time) {
 198   /**
 199    * The left offset relative to the canvas, rounded to 2 decimal places.
 200    *
 201    * @type {number}
 202    */
 203   this.x = Math.round(x * 100.0) * 0.01;
 204
 205   /**
 206    * The top offset relative to the canvas, rounded to 2 decimal places.
 207    *
 208    * @type {number}
 209    */
 210   this.y = Math.round(y * 100.0) * 0.01;
 211
 212   /**
 213    * The time, rounded to the nearest millisecond.
 214    *
 215    * @type {number}
 216    */
 217   this.time = Math.round(time);
 218 };
 219
 220
 221 /**
 222  * Stroke events.
 223  *
 224  * @enum {string}
 225  */
 226 i18n.input.hwt.StrokeHandler.EventType = {
 227   STROKE: goog.events.getUniqueId('s'),
 228   STROKE_END: goog.events.getUniqueId('se'),
 229   STROKE_START: goog.events.getUniqueId('ss')
 230 };
 231
 232
 233
 234 /**
 235  * The stroke event.
 236  *
 237  * @param {!i18n.input.hwt.StrokeHandler.EventType} type The event type.
 238  * @param {!i18n.input.hwt.StrokeHandler.Point} point The point.
 239  * @constructor
 240  * @extends {goog.events.Event}
 241  */
 242 i18n.input.hwt.StrokeHandler.StrokeEvent = function(type, point) {
 243   goog.base(this, type);
 244
 245   /**
 246    * The point.
 247    *
 248    * @type {!i18n.input.hwt.StrokeHandler.Point}
 249    */
 250   this.point = point;
 251 };
 252 goog.inherits(i18n.input.hwt.StrokeHandler.StrokeEvent, goog.events.Event);