diff --git a/src/disagg/DisaggGraphView.js b/src/disagg/DisaggGraphView.js index aaf82ce0676a1d2ae38737f7a5c77be720709031..a10f78351780b819197257ccf8f1a4e8ca271eca 100644 --- a/src/disagg/DisaggGraphView.js +++ b/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; diff --git a/styles/_DisaggGraphView.scss b/styles/_DisaggGraphView.scss index caf6ea38c1bd9dcd6daeb3fb0dfea241f43689b7..f53799fa0044cc5d982b63f56f2a83dd545dd811 100644 --- a/styles/_DisaggGraphView.scss +++ b/styles/_DisaggGraphView.scss @@ -1,4 +1,6 @@ .DisaggGraphView { + user-select: none; + .tooltip-content { .title { font-size: 12px; diff --git a/types/disagg/DisaggGraphView.d.ts b/types/disagg/DisaggGraphView.d.ts index 1dba5016f21218dc856daafd3384c24a8944280e..7a3ded835b1626d47065f538ff171a927b87aa85 100644 --- a/types/disagg/DisaggGraphView.d.ts +++ b/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; }