Add Skin.isTouching

Use Silhouette to implement Skin.isTouching in subclasses.

src/BitmapSkin.js

@@ -1,6 +1,7 @@
 const twgl = require('twgl.js');
 
 const Skin = require('./Skin');
+const Silhouette = require('./Silhouette');
 
 class BitmapSkin extends Skin {
     /**
@@ -23,6 +24,8 @@ class BitmapSkin extends Skin {
 
         /** @type {Array<int>} */
         this._textureSize = [0, 0];
+
+        this._silhouette = new Silhouette();
     }
 
     /**
@@ -66,6 +69,7 @@ class BitmapSkin extends Skin {
         if (this._texture) {
             gl.bindTexture(gl.TEXTURE_2D, this._texture);
             gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, bitmapData);
+            this._silhouette.update(bitmapData);
         } else {
             const textureOptions = {
                 auto: true,
@@ -77,6 +81,7 @@ class BitmapSkin extends Skin {
             };
 
             this._texture = twgl.createTexture(gl, textureOptions);
+            this._silhouette.update(bitmapData);
         }
 
         // Do these last in case any of the above throws an exception
@@ -106,6 +111,15 @@ class BitmapSkin extends Skin {
         // ImageData or HTMLCanvasElement
         return [bitmapData.width, bitmapData.height];
     }
+
+    /**
+     * Does this point touch an opaque or translucent point on this skin?
+     * @param {twgl.v3} vec A texture coordinate.
+     * @return {boolean} Did it touch?
+     */
+    isTouching (vec) {
+        return this._silhouette.isTouching(vec);
+    }
 }
 
 module.exports = BitmapSkin;

src/PenSkin.js

@@ -2,7 +2,7 @@ const twgl = require('twgl.js');
 
 const RenderConstants = require('./RenderConstants');
 const Skin = require('./Skin');
-
+const Silhouette = require('./Silhouette');
 
 /**
  * Attributes to use when drawing with the pen
@@ -50,6 +50,12 @@ class PenSkin extends Skin {
         /** @type {WebGLTexture} */
         this._texture = null;
 
+        /** @type {Silhouette} */
+        this._silhouette = new Silhouette();
+
+        /** @type {boolean} */
+        this._silhouetteDirty = false;
+
         this.onNativeSizeChanged = this.onNativeSizeChanged.bind(this);
         this._renderer.on(RenderConstants.Events.NativeSizeChanged, this.onNativeSizeChanged);
 
@@ -98,6 +104,7 @@ class PenSkin extends Skin {
         const ctx = this._canvas.getContext('2d');
         ctx.clearRect(0, 0, this._canvas.width, this._canvas.height);
         this._canvasDirty = true;
+        this._silhouetteDirty = true;
     }
 
     /**
@@ -127,6 +134,7 @@ class PenSkin extends Skin {
         ctx.lineTo(this._rotationCenter[0] + x1, this._rotationCenter[1] - y1);
         ctx.stroke();
         this._canvasDirty = true;
+        this._silhouetteDirty = true;
     }
 
     /**
@@ -139,6 +147,7 @@ class PenSkin extends Skin {
         const ctx = this._canvas.getContext('2d');
         ctx.drawImage(stampElement, this._rotationCenter[0] + x, this._rotationCenter[1] - y);
         this._canvasDirty = true;
+        this._silhouetteDirty = true;
     }
 
     /**
@@ -173,6 +182,7 @@ class PenSkin extends Skin {
             }
         );
         this._canvasDirty = true;
+        this._silhouetteDirty = true;
     }
 
     /**
@@ -195,6 +205,21 @@ class PenSkin extends Skin {
         context.lineCap = 'round';
         context.lineWidth = diameter;
     }
+
+    /**
+     * Does this point touch an opaque or translucent point on this skin?
+     * @param {twgl.v3} vec A texture coordinate.
+     * @return {boolean} Did it touch?
+     */
+    isTouching (vec) {
+        if (this._silhouetteDirty) {
+            if (this._canvasDirty) {
+                this.getTexture();
+            }
+            this._silhouette.update(this._canvas);
+        }
+        return this._silhouette.isTouching(vec);
+    }
 }
 
 module.exports = PenSkin;

src/SVGSkin.js

@@ -3,6 +3,8 @@ const twgl = require('twgl.js');
 const Skin = require('./Skin');
 const SvgRenderer = require('./svg-quirks-mode/svg-renderer');
 
+const Silhouette = require('./Silhouette');
+
 class SVGSkin extends Skin {
     /**
      * Create a new SVG skin.
@@ -22,6 +24,8 @@ class SVGSkin extends Skin {
 
         /** @type {WebGLTexture} */
         this._texture = null;
+
+        this._silhouette = new Silhouette();
     }
 
     /**
@@ -75,6 +79,7 @@ class SVGSkin extends Skin {
             if (this._texture) {
                 gl.bindTexture(gl.TEXTURE_2D, this._texture);
                 gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, this._svgRenderer.canvas);
+                this._silhouette.update(this._svgRenderer.canvas);
             } else {
                 const textureOptions = {
                     auto: true,
@@ -85,12 +90,22 @@ class SVGSkin extends Skin {
                 };
 
                 this._texture = twgl.createTexture(gl, textureOptions);
+                this._silhouette.update(this._svgRenderer.canvas);
             }
             if (typeof rotationCenter === 'undefined') rotationCenter = this.calculateRotationCenter();
             this.setRotationCenter.apply(this, rotationCenter);
             this.emit(Skin.Events.WasAltered);
         });
     }
+
+    /**
+     * Does this point touch an opaque or translucent point on this skin?
+     * @param {twgl.v3} vec A texture coordinate.
+     * @return {boolean} Did it touch?
+     */
+    isTouching (vec) {
+        return this._silhouette.isTouching(vec);
+    }
 }
 
 module.exports = SVGSkin;

src/Skin.js

@@ -115,6 +115,15 @@ class Skin extends EventEmitter {
         this._uniforms.u_skinSize = this.size;
         return this._uniforms;
     }
+
+    /**
+     * Does this point touch an opaque or translucent point on this skin?
+     * @param {twgl.v3} vec A texture coordinate.
+     * @return {boolean} Did it touch?
+     */
+    isTouching () {
+        return false;
+    }
 }
 
 /**