Merge pull request #177 from GrimoireGL/feat/0.33.0

feat: add mouse click and dblclick event on mesh

package.json

@@ -32,7 +32,7 @@
     "condition-circle": "^1.5.0",
     "cpx": "^1.5.0",
     "deflate-js": "^0.2.3",
-    "grimoirejs": "^0.19.5",
+    "grimoirejs": "^0.18.1",
     "grimoirejs-cauldron": "^3.1.8",
     "grimoirejs-math": "^1.15.1",
     "http-server": "^0.10.0",

src/Components/RenderStage/RenderHitareaComponent.ts

@@ -125,6 +125,18 @@ export default class RenderHitareaComponent extends SingleBufferRenderStageBase
     this._lastRenderable = null;
   }
 
+  public $click(v: ViewportMouseEvent): void {
+    if (this._lastRenderable instanceof Component) {
+      this._lastRenderable.node.emit("click", this._lastRenderable);
+    }
+  }
+
+  public $dblclick(v: ViewportMouseEvent): void {
+    if (this._lastRenderable instanceof Component) {
+      this._lastRenderable.node.emit("dblclick", this._lastRenderable);
+    }
+  }
+
   /**
    * Update current mesh index. Emit events if need.
    * @param index

src/Components/RenderStage/RenderStageBase.ts

@@ -44,6 +44,14 @@ export default class RenderStageBase extends Component {
         this._assignMouseState(v);
     }
 
+    public $click(v: ViewportMouseEvent): void {
+        return;
+    }
+
+    public $dblclick(v: ViewportMouseEvent): void {
+        return;
+    }
+
     protected __beforeRender(): boolean {
         if (GrimoireJS.debug && !!window["spector"]) {
             let metas = "";

src/Components/RendererComponent.ts

@@ -61,6 +61,10 @@ export default class RendererComponent extends Component {
 
   private _mouseUpHandler: (e: MouseEvent) => void;
 
+  private _mouseClickHandler: (e: MouseEvent) => void;
+
+  private _dblClickHandler: (e: MouseEvent) => void;
+
   private _wasInside = false;
 
   public $awake(): void {
@@ -155,6 +159,12 @@ export default class RendererComponent extends Component {
       }
       this._wasInside = false;
     };
+    this._mouseClickHandler = (e: MouseEvent) => {
+      this._sendMouseEvent("click", e);
+    };
+    this._dblClickHandler = (e: MouseEvent) => {
+      this._sendMouseEvent("dblclick", e);
+    };
     this._mouseDownHandler = (e: MouseEvent) => {
       if (this._isViewportInside(e)) {
         this._sendMouseEvent("mousedown", e);
@@ -173,6 +183,8 @@ export default class RendererComponent extends Component {
     this._canvas.addEventListener("mouseenter", this._mouseEnterHandler);
     this._canvas.addEventListener("mousedown", this._mouseDownHandler);
     this._canvas.addEventListener("mouseup", this._mouseUpHandler);
+    this._canvas.addEventListener("click", this._mouseClickHandler);
+    this._canvas.addEventListener("dblclick", this._dblClickHandler);
   }
 
   private _disableMouseHandling(): void {
@@ -181,6 +193,8 @@ export default class RendererComponent extends Component {
     this._canvas.removeEventListener("mouseenter", this._mouseEnterHandler);
     this._canvas.removeEventListener("mousedown", this._mouseDownHandler);
     this._canvas.removeEventListener("mouseup", this._mouseUpHandler);
+    this._canvas.removeEventListener("click", this._mouseClickHandler);
+    this._canvas.removeEventListener("dblclick", this._dblClickHandler);
   }
 
   private _sendMouseEvent(eventName: string, e: MouseEvent): void {
@@ -223,7 +237,8 @@ export default class RendererComponent extends Component {
     const ro = this._getRelativePosition(e);
     const r = this._viewportCache.toLocal(ro[0], ro[1]);
     const n = this._viewportCache.toLocalNormalized(ro[0], ro[1]);
-    return {...e,
+    return {
+      ...e,
       viewportX: r[0],
       viewportY: r[1],
       viewportNormalizedX: n[0],
@@ -232,6 +247,7 @@ export default class RendererComponent extends Component {
       canvasY: ro[1],
       canvasNormalizedX: ro[0] / ro[2],
       canvasNormalizedY: ro[1] / ro[3],
-      inside: this._isViewportInside(e)};
+      inside: this._isViewportInside(e),
+    };
   }
 }