diff options
5 files changed, 22 insertions, 11 deletions
diff --git a/dox-sequence-diagram-ui/.gitignore b/dox-sequence-diagram-ui/.gitignore index 3ad9501b01..13383be112 100644 --- a/dox-sequence-diagram-ui/.gitignore +++ b/dox-sequence-diagram-ui/.gitignore @@ -4,3 +4,4 @@ npm-debug.log dist node_modules .npmrc +.history diff --git a/dox-sequence-diagram-ui/package.json b/dox-sequence-diagram-ui/package.json index faa5cc2455..81d42af163 100644 --- a/dox-sequence-diagram-ui/package.json +++ b/dox-sequence-diagram-ui/package.json @@ -12,7 +12,7 @@ "author": "ECOMP", "license": "SEE LICENSE IN LICENSE.TXT", "dependencies": { - "d3": "^3.5.16", + "d3": "^4.10.0", "lodash": "^4.12.0", "react": "^15.1.0", "react-dnd": "^2.1.2", 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})`); + } // /////////////////////////////////////////////////////////////////////////////////////////////// diff --git a/openecomp-ui/package.json b/openecomp-ui/package.json index f18dd75329..5f7c76d8fc 100644 --- a/openecomp-ui/package.json +++ b/openecomp-ui/package.json @@ -21,7 +21,7 @@ "dependencies": { "classnames": "^2.2.5", "core-js": "^2.4.0", - "d3": "^3.5.16", + "d3": "^4.10.0", "dox-sequence-diagram-ui": "file:../dox-sequence-diagram-ui", "intl": "^1.0.1", "intl-format-cache": "^2.0.5", diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/SoftwareProductComponentsListView.jsx b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/SoftwareProductComponentsListView.jsx index a2a1964299..88a01becfc 100644 --- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/SoftwareProductComponentsListView.jsx +++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/SoftwareProductComponentsListView.jsx @@ -70,12 +70,11 @@ class SoftwareProductComponentsListView extends React.Component { renderComponentsListItem(component) { let {id: componentId, name, displayName, description = ''} = component; - let {currentSoftwareProduct: {id, version}, onComponentSelect, isManual, isReadOnlyMode, onDeleteComponent} = this.props; + let {currentSoftwareProduct: {id, version}, onComponentSelect} = this.props; return ( <ListEditorItemView key={name + Math.floor(Math.random() * (100 - 1) + 1).toString()} - className='list-editor-item-view' - onDelete={isManual && !isReadOnlyMode ? () => onDeleteComponent(component, id, version) : false} + className='list-editor-item-view' onSelect={() => onComponentSelect({id, componentId, version})}> <ListEditorItemViewField> <div className='name'>{displayName}</div> |