Fix up examples (#78)

examples/drawing-app/index.js

@@ -45,7 +45,10 @@ class DrawingApp {
 
     this.viewPencilColors = {};
     this.viewPencilWidths = {};
-    this.boundDraw = this.draw.bind(this);
+    this.previousEvents = {};
+    this.boundDown = this.down.bind(this);
+    this.boundMove = this.move.bind(this);
+    this.boundUp = this.up.bind(this);
   }
 
   setColor({ color, view }) {
@@ -63,11 +66,31 @@ class DrawingApp {
     this.wamsApp.on('connect', this.handleConnect.bind(this));
   }
 
+  down(event) {
+    this.previousEvents[event.pointerId] = { ...event };
+    this.draw(event);
+  }
+
+  move(event) {
+    if (this.previousEvents[event.pointerId]) {
+      this.draw(event);
+    }
+  }
+
+  up(event) {
+    if (this.previousEvents[event.pointerId]) {
+      this.draw(event);
+    }
+    delete this.previousEvents[event.pointerId];
+  }
+
   draw(event) {
     const color = this.viewPencilColors[event.view] || 'black';
     const width = this.viewPencilWidths[event.view] || 20;
-    const fromX = event.x - event.dx;
-    const fromY = event.y - event.dy;
+    const previous = this.previousEvents[event.pointerId];
+    this.previousEvents[event.pointerId] = { ...event };
+    const fromX = previous.x;
+    const fromY = previous.y;
     const toX = event.x;
     const toY = event.y;
     this.wamsApp.workspace.spawnItem(
@@ -88,12 +111,17 @@ class DrawingApp {
       view.on('drag', actions.drag);
       view.on('pinch', constrainedZoom);
       view.on('rotate', actions.rotate);
-      view.off('drag', this.boundDraw);
+      // view.off('drag', this.boundDraw);
+      view.off('pointerdown', this.boundDown);
+      view.off('pointermove', this.boundMove);
+      view.off('pointerup', this.boundUp);
     } else {
       view.off('drag', actions.drag);
       view.off('pinch', constrainedZoom);
       view.off('rotate', actions.rotate);
-      view.on('drag', this.boundDraw);
+      view.on('pointerdown', this.boundDown);
+      view.on('pointermove', this.boundMove);
+      view.on('pointerup', this.boundUp);
     }
   }
 
@@ -117,4 +145,4 @@ function constrainedZoom(event) {
 // eslint-disable-next-line
 const drawingApp = new DrawingApp();
 drawingApp.initListeners();
-routing.listen(drawingApp.wamsApp.httpServer, 'localhost', 9000);
+routing.listen(drawingApp.wamsApp.httpServer);

src/client.js

@@ -61,6 +61,7 @@ function run() {
   const model = new ClientModel(root);
   const view = new ClientView(context, iOS, dpr);
   const controller = new ClientController(canvas, view, model, iOS, dpr);
+  model.controller = controller;
   window.WAMS = new ClientApplication(controller);
 
   model.view = view;

src/client/ClientController.js

@@ -335,21 +335,39 @@ class ClientController {
    * Set up input event forwarding.
    */
   setUpInputForwarding() {
+    // Forward keyboard events
+    const keys = ['Alt', 'Control', 'Meta', 'Shift'];
+    ['keydown', 'keyup'].forEach((eventname) => {
+      window.addEventListener(eventname, (event) => {
+        if (keys.indexOf(event.key) < 0) {
+          // Only forward events for keys we care about
+          return;
+        }
+        // Extract only the properties we care about
+        const { type, key, altKey, ctrlKey, metaKey, shiftKey } = event;
+        const data = { type, key, altKey, ctrlKey, metaKey, shiftKey };
+        this.socket.emit(Message.KEYBOARD, data);
+      });
+    });
+    this.forwardInputsFromElement(this.canvas);
+  }
+
+  forwardInputsFromElement(element) {
     // Prevent default gestures from the browser
-    this.canvas.style.touchAction = 'none';
+    element.style.touchAction = 'none';
 
     // Forward pointer events
     ['pointerdown', 'pointermove', 'pointerup'].forEach((eventname) => {
-      this.canvas.addEventListener(eventname, (event) => {
+      element.addEventListener(eventname, (event) => {
         if (eventname === 'pointerdown') {
           try {
-            this.canvas.setPointerCapture(event.pointerId);
+            element.setPointerCapture(event.pointerId);
           } catch (e) {
             // NOP: Optional operation failed.
           }
         } else if (eventname === 'pointerup') {
           try {
-            this.canvas.releasePointerCapture(event.pointerId);
+            element.releasePointerCapture(event.pointerId);
           } catch (e) {
             // NOP: Optional operation failed.
           }
@@ -368,29 +386,14 @@ class ClientController {
 
     // Forward blur and cancel events as "BLUR" messages
     ['pointercancel', 'blur', 'contextmenu'].forEach((eventname) => {
-      this.canvas.addEventListener(eventname, (event) => {
+      element.addEventListener(eventname, (event) => {
         // We do not care about properties of event, just that it happened.
         this.socket.emit(Message.BLUR, {});
       });
     });
 
-    // Forward keyboard events
-    const keys = ['Alt', 'Control', 'Meta', 'Shift'];
-    ['keydown', 'keyup'].forEach((eventname) => {
-      window.addEventListener(eventname, (event) => {
-        if (keys.indexOf(event.key) < 0) {
-          // Only forward events for keys we care about
-          return;
-        }
-        // Extract only the properties we care about
-        const { type, key, altKey, ctrlKey, metaKey, shiftKey } = event;
-        const data = { type, key, altKey, ctrlKey, metaKey, shiftKey };
-        this.socket.emit(Message.KEYBOARD, data);
-      });
-    });
-
     // Forward wheel events
-    this.canvas.addEventListener(
+    element.addEventListener(
       'wheel',
       (event) => {
         if (event.ctrlKey) {

src/client/ClientModel.js

@@ -55,6 +55,13 @@ class ClientModel {
      * @type {module:client.ClientView}
      */
     this.view = null;
+
+    /**
+     * The controller for this user.
+     *
+     * @type {module:client.ClientController}
+     */
+    this.controller = null;
   }
 
   /**
@@ -73,7 +80,9 @@ class ClientModel {
    * @param {module:shared.WamsElement} values - State of the new Element
    */
   addElement(values) {
-    this._addItem(new ClientElement(values));
+    const wamsElement = new ClientElement(values);
+    this.controller.forwardInputsFromElement(wamsElement.element);
+    this._addItem(wamsElement);
   }
 
   /**

src/predefined/routing.js

@@ -67,7 +67,7 @@ function addStaticDirectory(router, staticDir) {
  * @param {string} [host='localhost'] - The host to listen on.
  * @param {number} [port=9000] - The port to listen on.
  */
-function listen(server, host = 'localhost', port = 9000) {
+function listen(server, host = '0.0.0.0', port = 9000) {
   server.listen(port, host, () => {
     const formatAddress = (_host, port) => `http://${_host}:${port}`;
     const { address, port } = server.address();