Update D3 version in dox-sequence-diagram-ui 11/8911/1
authorStanislav Vishnevetsky <shlomo-stanisla.vishnevetskiy@amdocs.com>
Sun, 27 Aug 2017 13:09:23 +0000 (16:09 +0300)
committerstanvishne <shlomo-stanisla.vishnevetskiy@amdocs.com>
Mon, 28 Aug 2017 11:04:19 +0000 (14:04 +0300)
Issue-ID: SDC-252
Change-Id: I3a576e50370d7c7b8d7d49dd4adacc3a90d7a027
Signed-off-by: Stanislav Vishnevetsky <shlomo-stanisla.vishnevetskiy@amdocs.com>
dox-sequence-diagram-ui/.gitignore
dox-sequence-diagram-ui/package.json
dox-sequence-diagram-ui/src/main/webapp/lib/ecomp/asdc/sequencer/components/diagram/Diagram.jsx
openecomp-ui/package.json
openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/SoftwareProductComponentsListView.jsx

index 3ad9501..13383be 100644 (file)
@@ -4,3 +4,4 @@ npm-debug.log
 dist
 node_modules
 .npmrc
+.history
index faa5cc2..81d42af 100644 (file)
@@ -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",
index 3493285..a035e6c 100644 (file)
@@ -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})`);
+
   }
 
   // ///////////////////////////////////////////////////////////////////////////////////////////////
index f18dd75..5f7c76d 100644 (file)
@@ -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",
index a2a1964..88a01be 100644 (file)
@@ -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>