third_party/google_input_tools/src/chrome/os/inputview/canvas.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 Handwriting input canvas.
  17  * @author har@google.com (Henry A. Rowley)
  18  */
  19
  20 goog.provide('i18n.input.hwt.Canvas');
  21
  22 goog.require('goog.a11y.aria.Announcer');
  23 goog.require('goog.a11y.aria.LivePriority');
  24 goog.require('goog.dom.TagName');
  25 goog.require('goog.dom.classlist');
  26 goog.require('goog.events.Event');
  27 goog.require('goog.events.EventHandler');
  28 goog.require('goog.events.EventType');
  29 goog.require('goog.log');
  30 goog.require('goog.ui.Container');
  31 goog.require('i18n.input.hwt.EventType');
  32 goog.require('i18n.input.hwt.StrokeHandler');
  33 goog.require('i18n.input.hwt.css');
  34
  35
  36
  37 /**
  38  * The handwriting canvas UI element.
  39  *
  40  * @constructor
  41  * @param {!Document=} opt_topDocument The top document for MOUSEUP event.
  42  * @param {goog.dom.DomHelper=} opt_domHelper Optional DOM helper.
  43  * @param {goog.events.EventTarget=} opt_eventTarget The event target.
  44  * @param {number=} opt_inkWidth The ink width.
  45  * @param {string=} opt_inkColor The ink color.
  46  * @extends {goog.ui.Container}
  47  */
  48 i18n.input.hwt.Canvas = function(opt_topDocument, opt_domHelper,
  49     opt_eventTarget, opt_inkWidth, opt_inkColor) {
  50   i18n.input.hwt.Canvas.base(this, 'constructor', undefined, undefined,
  51                              opt_domHelper);
  52   this.setParentEventTarget(opt_eventTarget || null);
  53
  54   /**
  55    * The stroke handler.
  56    *
  57    * @type {!i18n.input.hwt.StrokeHandler}
  58    * @private
  59    */
  60   this.strokeHandler_;
  61
  62   /**
  63    * The top document.
  64    *
  65    * @type {!Document}
  66    * @private
  67    */
  68   this.topDocument_ = opt_topDocument || document;
  69
  70   /**
  71    * Canvas which is the area showing the ink.  Note that since we're
  72    * using a canvas here probably this code won't work in IE.
  73    *
  74    * @type {!Element}
  75    * @private
  76    */
  77   this.writingCanvas_;
  78
  79   /**
  80    * Context for drawing into the writing canvas.
  81    *
  82    * @type {!CanvasRenderingContext2D}
  83    * @private
  84    */
  85   this.writingContext_;
  86
  87   /**
  88    * An array of strokes for passing to the recognizer.
  89    *
  90    * @type {!Array}
  91    */
  92   this.strokeList = [];
  93
  94   /**
  95    * The current stroke.
  96    *
  97    * @type {!Array}
  98    * @private
  99    */
 100   this.stroke_ = [];
 101
 102   /**
 103    * Starting time of the stroke in milliseconds.
 104    *
 105    * @type {number}
 106    * @private
 107    */
 108   this.startTime_ = 0;
 109
 110   /**
 111    * Event handler.
 112    *
 113    * @type {!goog.events.EventHandler}
 114    * @private
 115    */
 116   this.handler_ = new goog.events.EventHandler(this);
 117
 118   /**
 119    * The annoucer for screen reader.
 120    *
 121    * @type {!goog.a11y.aria.Announcer}
 122    * @private
 123    */
 124   this.announcer_ = new goog.a11y.aria.Announcer(this.getDomHelper());
 125
 126   /**
 127    * Width of the ink line.
 128    *
 129    * @type {number}
 130    * @private
 131    */
 132   this.inkWidth_ = opt_inkWidth || 6;
 133
 134   /**
 135    * Color of the ink before it has been recognized.
 136    *
 137    * @type {string}
 138    * @private
 139    */
 140   this.inkColor_ = opt_inkColor || '#4D90FE';
 141 };
 142 goog.inherits(i18n.input.hwt.Canvas, goog.ui.Container);
 143
 144
 145 /**
 146  * The class logger.
 147  *
 148  * @type {goog.log.Logger}
 149  * @private
 150  */
 151 i18n.input.hwt.Canvas.prototype.logger_ =
 152     goog.log.getLogger('i18n.input.hwt.Canvas');
 153
 154
 155 /**
 156  * @desc Label for handwriting panel used to draw strokes.
 157  */
 158 i18n.input.hwt.Canvas.MSG_INPUTTOOLS_HWT_PANEL = goog.getMsg('panel');
 159
 160
 161 /**
 162  * @desc The hint on the canvas to indicate users they can draw here.
 163  */
 164 i18n.input.hwt.Canvas.MSG_HANDWRITING_HINT = goog.getMsg('Draw a symbol here');
 165
 166
 167 /** @override */
 168 i18n.input.hwt.Canvas.prototype.createDom = function() {
 169   i18n.input.hwt.Canvas.base(this, 'createDom');
 170
 171   var dom = this.getDomHelper();
 172   this.writingCanvas_ = dom.createDom(goog.dom.TagName.CANVAS,
 173       i18n.input.hwt.css.CANVAS);
 174   this.writingCanvas_.width = 425;
 175   this.writingCanvas_.height = 194;
 176   dom.appendChild(this.getElement(), this.writingCanvas_);
 177   this.writingContext_ = this.writingCanvas_.getContext('2d');
 178 };
 179
 180
 181 /** @override */
 182 i18n.input.hwt.Canvas.prototype.enterDocument = function() {
 183   i18n.input.hwt.Canvas.base(this, 'enterDocument');
 184
 185   this.setFocusable(false);
 186   this.setFocusableChildrenAllowed(false);
 187   // Sets up stroke handler.
 188   this.strokeHandler_ = new i18n.input.hwt.StrokeHandler(this.writingCanvas_,
 189       this.topDocument_);
 190   this.handler_.
 191       listen(this.strokeHandler_,
 192           i18n.input.hwt.StrokeHandler.EventType.STROKE_START,
 193           this.onStrokeStart_).
 194       listen(this.strokeHandler_,
 195           i18n.input.hwt.StrokeHandler.EventType.STROKE,
 196           this.onStroke_).
 197       listen(this.strokeHandler_,
 198           i18n.input.hwt.StrokeHandler.EventType.STROKE_END,
 199           this.onStrokeEnd_).
 200       listen(this.writingCanvas_, goog.events.EventType.MOUSEOVER,
 201           this.onMouseOver_).
 202       listen(this.writingCanvas_, goog.events.EventType.MOUSEDOWN,
 203           goog.events.Event.stopPropagation);
 204 };
 205
 206
 207 /**
 208  * Shows the hint message for the canvas.
 209  */
 210 i18n.input.hwt.Canvas.prototype.showHint = function() {
 211   this.writingContext_.font = '20px aria,sans-serif';
 212   this.writingContext_.fontWeight = 'bold';
 213   this.writingContext_.fillStyle = '#CCC';
 214   this.writingContext_.fillText(i18n.input.hwt.Canvas.MSG_HANDWRITING_HINT,
 215       30, 120);
 216 };
 217
 218
 219 /**
 220  * Draw a point with the given color.
 221  *
 222  * @param {string} color Color to draw the point.
 223  * @param {!i18n.input.hwt.StrokeHandler.Point} point The point.
 224  * @private
 225  */
 226 i18n.input.hwt.Canvas.prototype.drawPoint_ = function(color, point) {
 227   this.writingContext_.beginPath();
 228   this.writingContext_.strokeStyle = color;
 229   this.writingContext_.fillStyle = color;
 230   this.writingContext_.arc(point.x, point.y,
 231       this.inkWidth_ / 2, 0, Math.PI * 2, true);
 232   this.writingContext_.fill();
 233 };
 234
 235
 236 /**
 237  * Draw a poly-line given the list of array of points.
 238  *
 239  * @param {string} color Color to draw the line.
 240  * @param {!Array.<!i18n.input.hwt.StrokeHandler.Point>} points The array of
 241  *     points.
 242  * @param {number=} opt_start The start point to draw.
 243  * @private
 244  */
 245 i18n.input.hwt.Canvas.prototype.drawLine_ = function(color, points, opt_start) {
 246   var start = opt_start || 0;
 247   if (start == (points.length - 1)) {
 248     // If there's only one point.
 249     this.drawPoint_(color, points[0]);
 250   } else {
 251     this.writingContext_.beginPath();
 252     this.writingContext_.strokeStyle = color;
 253     this.writingContext_.fillStyle = 'none';
 254     this.writingContext_.lineWidth = this.inkWidth_;
 255     this.writingContext_.lineCap = 'round';
 256     this.writingContext_.lineJoin = 'round';
 257     this.writingContext_.moveTo(points[start].x, points[start].y);
 258     for (var i = start + 1; i < points.length; i++) {
 259       this.writingContext_.lineTo(points[i].x, points[i].y);
 260     }
 261     this.writingContext_.stroke();
 262   }
 263 };
 264
 265
 266 /**
 267  * Add a point to the current stroke.
 268  *
 269  * @param {!i18n.input.hwt.StrokeHandler.Point} point The point.
 270  * @private
 271  */
 272 i18n.input.hwt.Canvas.prototype.addPoint_ = function(point) {
 273   point.time -= this.startTime_;
 274   this.stroke_.push(point);
 275   var len = this.stroke_.length;
 276   var start = Math.max(len - 2, 0);
 277   this.drawLine_(this.inkColor_, this.stroke_, start);
 278 };
 279
 280
 281 /**
 282  * Callback for the start of a stroke.
 283  *
 284  * @param {!i18n.input.hwt.StrokeHandler.StrokeEvent} e The stroke event.
 285  * @private
 286  */
 287 i18n.input.hwt.Canvas.prototype.onStrokeStart_ = function(e) {
 288   this.stroke_ = [];
 289   var point = e.point;
 290   if (this.strokeList.length == 0) {
 291     this.startTime_ = point.time;
 292   }
 293   this.addPoint_(e.point);
 294   e.preventDefault();
 295
 296   goog.dom.classlist.add(this.getElement(), i18n.input.hwt.css.IME_INIT_OPAQUE);
 297 };
 298
 299
 300 /**
 301  * Callback for the stroke event.
 302  *
 303  * @param {!i18n.input.hwt.StrokeHandler.StrokeEvent} e The stroke event.
 304  * @private
 305  */
 306 i18n.input.hwt.Canvas.prototype.onStroke_ = function(e) {
 307   this.addPoint_(e.point);
 308   e.preventDefault();
 309 };
 310
 311
 312 /**
 313  * Callback for the end of a stroke.
 314  *
 315  * @param {i18n.input.hwt.StrokeHandler.StrokeEvent} e The stroke event.
 316  * @private
 317  */
 318 i18n.input.hwt.Canvas.prototype.onStrokeEnd_ = function(e) {
 319   this.strokeList.push(this.stroke_);
 320   e.preventDefault();
 321   this.dispatchEvent(new goog.events.Event(
 322       i18n.input.hwt.EventType.RECOGNITION_READY));
 323 };
 324
 325
 326 /**
 327  * Clears the writing canvas.
 328  */
 329 i18n.input.hwt.Canvas.prototype.reset = function() {
 330   goog.log.info(this.logger_, 'clear ' + this.writingCanvas_.width + 'x' +
 331       this.writingCanvas_.height);
 332   this.writingContext_.clearRect(
 333       0, 0, this.writingCanvas_.width, this.writingCanvas_.height);
 334   this.strokeList = [];
 335   this.stroke_ = [];
 336   this.strokeHandler_.reset();
 337 };
 338
 339
 340 /** @override */
 341 i18n.input.hwt.Canvas.prototype.disposeInternal = function() {
 342   goog.dispose(this.handler_);
 343   i18n.input.hwt.Canvas.base(this, 'disposeInternal');
 344 };
 345
 346 /**
 347  * Gets the width of the canvas.
 348  *
 349  * @return {number} The width of the canvas.
 350  */
 351 i18n.input.hwt.Canvas.prototype.getWidth = function() {
 352   return this.writingCanvas_.width;
 353 };
 354
 355
 356 /**
 357  * Gets the height of the canvas.
 358  *
 359  * @return {number} The height of the canvas.
 360  */
 361 i18n.input.hwt.Canvas.prototype.getHeight = function() {
 362   return this.writingCanvas_.height;
 363 };
 364
 365
 366 /**
 367  * True if user is drawing.
 368  *
 369  * @return {boolean} True if is drawing.
 370  */
 371 i18n.input.hwt.Canvas.prototype.isDrawing = function() {
 372   return this.strokeHandler_.drawing;
 373 };
 374
 375
 376 /**
 377  * True if the canvas is clean without strokes.
 378  *
 379  * @return {boolean} True if the canvas is clean.
 380  */
 381 i18n.input.hwt.Canvas.prototype.isClean = function() {
 382   return !this.strokeHandler_.drawing && this.strokeList.length == 0;
 383 };
 384
 385
 386 /**
 387  * Sets the size of the canvas.
 388  *
 389  * @param {number=} opt_height The height.
 390  * @param {number=} opt_width The width.
 391  */
 392 i18n.input.hwt.Canvas.prototype.setSize = function(opt_height, opt_width) {
 393   if (opt_height && this.writingCanvas_.height != opt_height ||
 394       opt_width && this.writingCanvas_.width != opt_width) {
 395     this.reset();
 396   }
 397   if (opt_height) {
 398     this.writingCanvas_.height = opt_height;
 399   }
 400   if (opt_width) {
 401     this.writingCanvas_.width = opt_width;
 402   }
 403 };
 404
 405
 406 /**
 407  * Gets the stroke handler.
 408  *
 409  * @return {!i18n.input.hwt.StrokeHandler} The stroke handler.
 410  */
 411 i18n.input.hwt.Canvas.prototype.getStrokeHandler = function() {
 412   return this.strokeHandler_;
 413 };
 414
 415
 416 /**
 417  * Exports message to screen reader.
 418  *
 419  * @param {!goog.events.BrowserEvent} e .
 420  * @private
 421  */
 422 i18n.input.hwt.Canvas.prototype.onMouseOver_ = function(e) {
 423   this.announcer_.say(i18n.input.hwt.Canvas.MSG_INPUTTOOLS_HWT_PANEL,
 424       goog.a11y.aria.LivePriority.ASSERTIVE);
 425 };