From f5355ef234a409ab4fcfe299f7ee9f33e904355b Mon Sep 17 00:00:00 2001 From: Stanislav Vishnevetsky Date: Sun, 27 Aug 2017 16:09:23 +0300 Subject: Update D3 version in dox-sequence-diagram-ui Issue-ID: SDC-252 Change-Id: I3a576e50370d7c7b8d7d49dd4adacc3a90d7a027 Signed-off-by: Stanislav Vishnevetsky --- .../asdc/sequencer/components/diagram/Diagram.jsx | 23 ++++++++++++++++------ 1 file changed, 17 insertions(+), 6 deletions(-) (limited to 'dox-sequence-diagram-ui/src/main/webapp/lib/ecomp') diff --git a/dox-sequence-diagram-ui/src/main/webapp/lib/ecomp/asdc/sequencer/components/diagram/Diagram.jsx b/dox-sequence-diagram-ui/src/main/webapp/lib/ecomp/asdc/sequencer/components/diagram/Diagram.jsx index 34932852c7..a035e6c4a3 100644 --- a/dox-sequence-diagram-ui/src/main/webapp/lib/ecomp/asdc/sequencer/components/diagram/Diagram.jsx +++ b/dox-sequence-diagram-ui/src/main/webapp/lib/ecomp/asdc/sequencer/components/diagram/Diagram.jsx @@ -17,7 +17,7 @@ import React from 'react'; import _template from 'lodash/template'; import _merge from 'lodash/merge'; -import d3 from 'd3'; +import * as d3 from 'd3'; import Common from '../../common/Common'; import Logger from '../../common/Logger'; @@ -57,6 +57,8 @@ export default class Diagram extends React.Component { }; this.handleResize = this.handleResize.bind(this); + this.initialTransformX = 0; + this.initialTransformY = 0; } // /////////////////////////////////////////////////////////////////////////////////////////////// @@ -764,8 +766,14 @@ export default class Diagram extends React.Component { _initZoom(gContent, width, height) { const zoomed = function zoomed() { + if (!this.initialTransformX && !this.initialTransformY) { + this.initialTransformX = d3.event.transform.x; + this.initialTransformY = d3.event.transform.y; + } + gContent.attr('transform', - `translate(${d3.event.translate})scale(${d3.event.scale})`); + `translate(${d3.event.transform.x - this.initialTransformX}, ${d3.event.transform.y + - this.initialTransformY})scale(${d3.event.transform.k}, ${d3.event.transform.k})`); }; const viewWidth = this.state.width || this.options.svg.width; @@ -803,12 +811,15 @@ export default class Diagram extends React.Component { gContent.attr('transform', `scale(${scale})`); } - const zoom = d3.behavior.zoom() - .scale(scale) - .scaleExtent([scaleMinimum, 10]) - .translate(translate) + const zoom = d3.zoom() .on('zoom', zoomed); + this.svg.call(zoom); + this.svg.call(zoom.scaleBy, scale); + + gContent.attr('transform', `translate(${translate[0]}, ${translate[1]})`); + gContent.attr('transform', `scale(${scale})`); + } // /////////////////////////////////////////////////////////////////////////////////////////////// -- cgit 1.2.3-korg