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';
};
this.handleResize = this.handleResize.bind(this);
+ this.initialTransformX = 0;
+ this.initialTransformY = 0;
}
// ///////////////////////////////////////////////////////////////////////////////////////////////
_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;
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})`);
+
}
// ///////////////////////////////////////////////////////////////////////////////////////////////
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>