From 297e21d42c8f75e037d9ea1285b69b50920d440c Mon Sep 17 00:00:00 2001 From: Filip Barl Date: Tue, 15 Aug 2017 16:46:57 +0200 Subject: [PATCH] Removed d3-zoom reference in package.json. --- .../app/scripts/components/zoomable-canvas.js | 29 +++++++------------ client/app/scripts/utils/transform-utils.js | 16 +++++++++- client/app/styles/_base.scss | 24 +++++++-------- client/package.json | 2 -- 4 files changed, 36 insertions(+), 35 deletions(-) diff --git a/client/app/scripts/components/zoomable-canvas.js b/client/app/scripts/components/zoomable-canvas.js index a37dca26a..07744ce58 100644 --- a/client/app/scripts/components/zoomable-canvas.js +++ b/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), diff --git a/client/app/scripts/utils/transform-utils.js b/client/app/scripts/utils/transform-utils.js index 21160ae79..cc1834dd6 100644 --- a/client/app/scripts/utils/transform-utils.js +++ b/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})` ); diff --git a/client/app/styles/_base.scss b/client/app/styles/_base.scss index e2ccdfc98..15493c682 100644 --- a/client/app/styles/_base.scss +++ b/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 { diff --git a/client/package.json b/client/package.json index 00b4abf3a..27690be6a 100644 --- a/client/package.json +++ b/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",