General cleanup around gestures and items

examples/swipe-drawing.js

@@ -38,7 +38,7 @@ function handleDrag({ x, y, dx, dy }) {
     })
   );
   // console.log('LineLayout: { x: %s, y: %s, length: %s, rotation: %s }', line.x, line.y, length, line.rotation);
-  setTimeout(() => app.removeItem(line), 3000);
+  setTimeout(() => app.removeItem(line), 500);
 }
 
 function handleConnect({ view }) {

src/client/ClientItem.js

@@ -1,17 +1,17 @@
 'use strict';
 
-const { Item } = require('../shared.js');
+const { CanvasItem } = require('../shared.js');
 const { CanvasSequence } = require('canvas-sequencer');
 
 /**
  * The ClientItem class exposes the draw() funcitonality of wams items.
  *
- * @extends module:shared.Item
+ * @extends module:shared.CanvasItem
  * @memberof module:client
  *
- * @param {module:shared.Item} data - The data from the server describing this item.
+ * @param {module:shared.CanvasItem} data - The data from the server describing this item.
  */
-class ClientItem extends Item {
+class ClientItem extends CanvasItem {
   constructor(data) {
     super(data);
 

src/server/GestureController.js

@@ -63,7 +63,7 @@ class GestureController {
     const tap = new Tap(this.group, handleGesture.bind(this.messageHandler, 'click'), {
       applySmoothing: false,
     });
-    const swivel = new Swivel(this.group, this.processSwivel.bind(this), {
+    const swivel = new Swivel(this.group, this.handleSwivel.bind(this), {
       applySmoothing: false,
       enableKeys: ['ctrlKey'],
       dynamicPivot: true,
@@ -83,7 +83,7 @@ class GestureController {
    *
    * @param {string} event
    */
-  processSwivel(event) {
+  handleSwivel(event) {
     event.centroid = event.pivot;
     this.messageHandler.handleGesture('rotate', event);
   }

src/server/MessageHandler.js

@@ -39,7 +39,7 @@ class MessageHandler {
     if (target != null) {
       const original = device.reversePoint(centroid.x, centroid.y);
       const { x, y } = view.transformPoint(original.x, original.y);
-      this[gesture]({ device, group, view, target, x, y }, data);
+      this[gesture]({ ...event, centroid: { x, y }, x, y, target }, data);
     }
   }
 
@@ -59,29 +59,6 @@ class MessageHandler {
     }
   }
 
-  /**
-   * Apply a transformation event, splitting it into rotate, scale, and
-   * move.
-   *
-   * @param {object} event
-   * @param {object} data
-   */
-  transform(event, data) {
-    const { delta } = data;
-
-    if (Object.prototype.hasOwnProperty.call(delta, 'scale')) {
-      this.scale(event, delta);
-    }
-
-    if (Object.prototype.hasOwnProperty.call(delta, 'rotation')) {
-      this.rotate(event, delta);
-    }
-
-    if (Object.prototype.hasOwnProperty.call(delta, 'translation')) {
-      this.drag(event, delta);
-    }
-  }
-
   /**
    * Apply a scale event
    *

src/server/ServerElement.js

@@ -24,8 +24,6 @@ const { Hittable, Identifiable } = require('../mixins.js');
  *
  * @param {Namespace} namespace - Socket.io namespace for publishing changes.
  * @param {Object} values - User-supplied data detailing the elements.
- * Properties on this object that line up with {@link module:shared.Element}
- * members will be stored. Any other properties will be ignored.
  */
 class ServerElement extends Identifiable(Hittable(WamsElement)) {
   constructor(namespace, values = {}) {
@@ -67,19 +65,6 @@ class ServerElement extends Identifiable(Hittable(WamsElement)) {
     this.attributes = Object.assign(this.attributes, attributes);
     this.namespace.emit(Message.SET_ATTRS, { id: this.id, attributes });
   }
-
-  /**
-   * Serialize the element as a JSON object.
-   *
-   * @returns {Object} The element as a JSON object.
-   * @override
-   */
-  toJSON() {
-    return {
-      ...super.toJSON(),
-      attributes: this.attributes,
-    };
-  }
 }
 
 Object.assign(ServerElement.prototype, EventEmitter.prototype);

src/server/ServerImage.js

@@ -23,9 +23,7 @@ const { Hittable, Identifiable } = require('../mixins.js');
  * @extends __ServerImage
  *
  * @param {Namespace} namespace - Socket.io namespace for publishing changes.
- * @param {Object} values - User-supplied data detailing the image. Properties
- * on this object that line up with {@link module:shared.Image} members will be
- * stored. Any other properties will be ignored.
+ * @param {Object} values - User-supplied data detailing the image.
  */
 class ServerImage extends Identifiable(Hittable(WamsImage)) {
   constructor(namespace, values = {}) {
@@ -55,19 +53,6 @@ class ServerImage extends Identifiable(Hittable(WamsImage)) {
     this.src = path;
     this.namespace.emit(Message.SET_IMAGE, { id: this.id, src: path });
   }
-
-  /**
-   * Serialize the image as a JSON object.
-   *
-   * @returns {Object} The image as a JSON object.
-   * @override
-   */
-  toJSON() {
-    return {
-      ...super.toJSON(),
-      src: this.src,
-    };
-  }
 }
 
 Object.assign(ServerImage.prototype, EventEmitter.prototype);

src/server/ServerItem.js

@@ -1,7 +1,7 @@
 'use strict';
 
 const { EventEmitter } = require('node:events');
-const { Item, Message } = require('../shared.js');
+const { CanvasItem, Message } = require('../shared.js');
 const { Hittable, Identifiable } = require('../mixins.js');
 
 /**
@@ -19,15 +19,13 @@ const { Hittable, Identifiable } = require('../mixins.js');
  * around.
  *
  * @memberof module:server
- * @extends module:shared.Item
+ * @extends module:shared.CanvasItem
  * @extends __ServerItem
  *
  * @param {Namespace} namespace - Socket.io namespace for publishing changes.
- * @param {Object} values - User-supplied data detailing the item. Properties on
- * this object that line up with {@link module:shared.Item} members will be
- * stored. Any other properties will be ignored.
+ * @param {Object} values - User-supplied data detailing the item.
  */
-class ServerItem extends Identifiable(Hittable(Item)) {
+class ServerItem extends Identifiable(Hittable(CanvasItem)) {
   constructor(namespace, values = {}) {
     super(values);
 
@@ -37,14 +35,6 @@ class ServerItem extends Identifiable(Hittable(Item)) {
      * @type {Namespace}
      */
     this.namespace = namespace;
-
-    /**
-     * Sequence of canvas instructions to be run on the client
-     *
-     * @type {CanvasSequence}
-     * @default undefined
-     */
-    this.sequence = undefined;
   }
 
   /*
@@ -64,19 +54,6 @@ class ServerItem extends Identifiable(Hittable(Item)) {
     this.sequence = sequence;
     this.namespace.emit(Message.SET_RENDER, { id: this.id, sequence });
   }
-
-  /**
-   * Serialize the item as a JSON object.
-   *
-   * @returns {Object} The item as a JSON object.
-   * @override
-   */
-  toJSON() {
-    return {
-      ...super.toJSON(),
-      sequence: this.sequence,
-    };
-  }
 }
 
 Object.assign(ServerItem.prototype, EventEmitter.prototype);

src/server/WorkSpace.js

@@ -85,17 +85,10 @@ class WorkSpace {
   }
 
   _canLock(item) {
-    const eventNames = item.eventNames();
-    return (
-      item.ondrag ||
-      item.onpinch ||
-      item.onrotate ||
-      item.onswipe ||
-      eventNames.includes('drag') ||
-      eventNames.includes('pinch') ||
-      eventNames.includes('rotate') ||
-      eventNames.includes('swipe')
-    );
+    // Instead of choosing some arbitrary subset of events that allow locking,
+    // consider any item with any kind of event listeners as lockable. It's
+    // still automagical but less opinionated.
+    return item.eventNames().length > 0;
   }
 
   /**
@@ -133,7 +126,7 @@ class WorkSpace {
   removeItem(item) {
     if (removeById(this.items, item)) {
       item.unlock();
-      this.namespace.emit(Message.RM_ITEM, item);
+      this.namespace.emit(Message.RM_ITEM, { id: item.id });
     }
   }
 
@@ -165,13 +158,9 @@ class WorkSpace {
    */
   spawnElement(values = {}) {
     const item = new ServerElement(this.namespace, values);
-    // Notify subscribers immediately.
+    this.addItem(item);
     this.namespace.emit(Message.ADD_ELEMENT, item);
-    if (values.attributes) {
-      // Must be called _after_ the "ADD" message is emitted
-      item.setAttributes(values.attributes);
-    }
-    return this.addItem(item);
+    return item;
   }
 
   /**
@@ -183,13 +172,9 @@ class WorkSpace {
    */
   spawnImage(values = {}) {
     const item = new ServerImage(this.namespace, values);
-    // Notify subscribers immediately.
+    this.addItem(item);
     this.namespace.emit(Message.ADD_IMAGE, item);
-    if (values.src) {
-      // Must be called _after_ the "ADD" message is emitted
-      item.setImage(values.src);
-    }
-    return this.addItem(item);
+    return item;
   }
 
   /**
@@ -201,13 +186,9 @@ class WorkSpace {
    */
   spawnItem(values = {}) {
     const item = new ServerItem(this.namespace, values);
-    // Notify subscribers immediately.
+    this.addItem(item);
     this.namespace.emit(Message.ADD_ITEM, item);
-    if (values.sequence) {
-      // Must be called _after_ the "ADD" message is emitted
-      item.setSequence(values.sequence);
-    }
-    return this.addItem(item);
+    return item;
   }
 
   /**