Removed d3-zoom reference in package.json.

client/app/scripts/components/zoomable-canvas.js

@@ -11,6 +11,7 @@ import Logo from '../components/logo';
 import ZoomControl from '../components/zoom-control';
 import { cacheZoomState } from '../actions/app-actions';
 import { zoomFactor } from '../utils/zoom-utils';
+import { applyTransform, inverseTransform } from '../utils/transform-utils';
 import { activeTopologyZoomCacheKeyPathSelector } from '../selectors/zooming';
 import {
   canvasMarginsSelector,
@@ -20,15 +21,6 @@ import {
 
 import { ZOOM_CACHE_DEBOUNCE_INTERVAL } from '../constants/timer';
 
-const transformF = ({ x, y }, t) => ({
-  x: t.translateX + (t.scaleX * x),
-  y: t.translateY + (t.scaleY * y),
-});
-
-const inverseTransform = ({ x, y }, t) => ({
-  x: (x - t.translateX) / t.scaleX,
-  y: (y - t.translateY) / t.scaleY,
-});
 
 class ZoomableCanvas extends React.Component {
   constructor(props, context) {
@@ -188,20 +180,19 @@ class ZoomableCanvas extends React.Component {
   }
 
   clampedTranslation(state) {
-    const { width, height, canvasMargins, bounded } = this.props;
-    const { maxTranslateX, minTranslateX, maxTranslateY, minTranslateY }
-      = this.props.layoutZoomLimits.toJS();
+    const { width, height, canvasMargins, bounded, layoutZoomLimits } = this.props;
+    const { maxTranslateX, minTranslateX, maxTranslateY, minTranslateY } = layoutZoomLimits.toJS();
 
     if (bounded) {
-      const minPoint = transformF({ x: minTranslateX, y: minTranslateY }, state);
-      const maxPoint = transformF({ x: maxTranslateX, y: maxTranslateY }, state);
+      const contentMinPoint = applyTransform(state, { x: minTranslateX, y: minTranslateY });
+      const contentMaxPoint = applyTransform(state, { x: maxTranslateX, y: maxTranslateY });
       const viewportMinPoint = { x: canvasMargins.left, y: canvasMargins.top };
       const viewportMaxPoint = { x: canvasMargins.left + width, y: canvasMargins.top + height };
 
-      state.translateX += Math.max(0, viewportMaxPoint.x - maxPoint.x);
-      state.translateX += Math.min(0, viewportMinPoint.x - minPoint.x);
-      state.translateY += Math.max(0, viewportMaxPoint.y - maxPoint.y);
-      state.translateY += Math.min(0, viewportMinPoint.y - minPoint.y);
+      state.translateX += Math.max(0, viewportMaxPoint.x - contentMaxPoint.x);
+      state.translateX += Math.min(0, viewportMinPoint.x - contentMinPoint.x);
+      state.translateY += Math.max(0, viewportMaxPoint.y - contentMaxPoint.y);
+      state.translateY += Math.min(0, viewportMinPoint.y - contentMinPoint.y);
     }
 
     return state;
@@ -213,7 +204,7 @@ class ZoomableCanvas extends React.Component {
     const scaleY = clamp(this.state.scaleY * factor, minScale, maxScale);
     let state = { ...this.state, scaleX, scaleY };
 
-    const inversePosition = inverseTransform(position, this.state);
+    const inversePosition = inverseTransform(this.state, position);
     state = this.clampedTranslation({ ...state,
       translateX: position.x - (inversePosition.x * scaleX),
       translateY: position.y - (inversePosition.y * scaleY),

client/app/scripts/utils/transform-utils.js

@@ -4,13 +4,27 @@ const applyTranslateY = ({ scaleY = 1, translateY = 0 }, y) => (y * scaleY) + tr
 const applyScaleX = ({ scaleX = 1 }, width) => width * scaleX;
 const applyScaleY = ({ scaleY = 1 }, height) => height * scaleY;
 
-export const applyTransform = (transform, { width, height, x, y }) => ({
+export const applyTransform = (transform, { width = 0, height = 0, x, y }) => ({
   x: applyTranslateX(transform, x),
   y: applyTranslateY(transform, y),
   width: applyScaleX(transform, width),
   height: applyScaleY(transform, height),
 });
 
+
+const inverseTranslateX = ({ scaleX = 1, translateX = 0 }, x) => (x - translateX) / scaleX;
+const inverseTranslateY = ({ scaleY = 1, translateY = 0 }, y) => (y - translateY) / scaleY;
+const inverseScaleX = ({ scaleX = 1 }, width) => width / scaleX;
+const inverseScaleY = ({ scaleY = 1 }, height) => height / scaleY;
+
+export const inverseTransform = (transform, { width = 0, height = 0, x, y }) => ({
+  x: inverseTranslateX(transform, x),
+  y: inverseTranslateY(transform, y),
+  width: inverseScaleX(transform, width),
+  height: inverseScaleY(transform, height),
+});
+
+
 export const transformToString = ({ translateX = 0, translateY = 0, scaleX = 1, scaleY = 1 }) => (
   `translate(${translateX},${translateY}) scale(${scaleX},${scaleY})`
 );

client/app/styles/_base.scss

@@ -63,6 +63,14 @@ a {
     cursor: -webkit-grabbing;
 }
 
+.fully-pannable {
+  width: 100%;
+  height: 100%;
+  @extend .grabbable;
+
+  &.panning { @extend .grabbing; }
+}
+
 .shadow-2 {
   box-shadow: 0 3px 10px rgba(0, 0, 0, 0.16), 0 3px 10px rgba(0, 0, 0, 0.23);
 }
@@ -284,15 +292,11 @@ a {
     height: $timeline-height;
 
     svg {
-      @extend .grabbable;
+      @extend .fully-pannable;
       background-color: rgba(255, 255, 255, 0.85);
       box-shadow: inset 0 0 7px #aaa;
       pointer-events: all;
       margin: 0 7px;
-      width: 100%;
-      height: 100%;
-
-      &.panning { @extend .grabbing; }
 
       .available-range {
         fill: #888;
@@ -358,14 +362,8 @@ a {
   }
 }
 
-.zoomable-canvas {
-  svg {
-    @extend .grabbable;
-    width: 100%;
-    height: 100%;
-
-    &.panning { @extend .grabbing; }
-  }
+.zoomable-canvas svg {
+  @extend .fully-pannable;
 }
 
 .topologies {

client/package.json

@@ -18,8 +18,6 @@
     "d3-selection": "1.0.5",
     "d3-shape": "1.0.6",
     "d3-time-format": "2.0.5",
-    "d3-transition": "1.0.4",
-    "d3-zoom": "1.1.4",
     "dagre": "0.7.4",
     "debug": "2.6.6",
     "filesize": "3.5.9",