Merge branch 'rotate' into 'main'

allow drag and rotate

See merge request !29

src/disagg/DisaggGraphView.js

@@ -132,6 +132,29 @@ var DisaggGraphView = function (options) {
     _this.d33d.renderLegend = _this.renderLegend;
 
     _this.render();
+
+    var dragging = false;
+    var origin = {
+      x: 0,
+      y: 0,
+    };
+
+    d3.select(_this.d33d.el)
+      .on('mousedown', event => {
+        origin.x = event.clientX;
+        origin.y = event.clientY;
+        dragging = true;
+      })
+      .on('mousemove', event => {
+        if (dragging) {
+          var dx = event.clientX - origin.x;
+          var dz = event.clientY - origin.y;
+          _this.setOrigin(280 - dx, -150, 180 + dz)
+        }
+      })
+      .on('mouseup', () => {
+        dragging = false
+    })
   };
 
   /**
@@ -707,6 +730,18 @@ var DisaggGraphView = function (options) {
     el.attr('transform', 'translate(' + -bbox.width + ' 0)');
   };
 
+  /**
+   * Set the views origin.
+   * @param {number} x
+   * @param {number} y
+   * @param {number} z
+   */
+  _this.setOrigin = function (x, y, z) {
+    _this.d33d.model.set({
+      'origin': [x, y, z]
+    });
+  }
+
   _initialize(options);
   options = null;
   return _this;

styles/_DisaggGraphView.scss

 .DisaggGraphView {
+  user-select: none;
+
   .tooltip-content {
     .title {
       font-size: 12px;

types/disagg/DisaggGraphView.d.ts

@@ -106,4 +106,13 @@ export class DisaggGraphView extends SelectedCollectionView<DisaggGraphViewOptio
    *        element where legend should be rendered.
    */
   renderLegend(info: Info): void;
+
+  /**
+   * Set the view origin.
+   *
+   * @param x The X origin
+   * @param y The Y origin
+   * @param z The Z origin
+   */
+  setOrigin(x: number, y: number, z: number): void;
 }