diff options
Diffstat (limited to 'dox-sequence-diagram-ui/src/main/webapp/lib/ecomp/asdc/sequencer')
2 files changed, 20 insertions, 19 deletions
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 129a1afc2b..bd5f78d85f 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 @@ -18,7 +18,8 @@ import React from 'react'; import PropTypes from 'prop-types'; import _template from 'lodash/template'; import _merge from 'lodash/merge'; -import * as d3 from 'd3'; +import { select, event as d3event } from 'd3-selection'; +import { zoom as d3zoom } from 'd3-zoom'; import Common from '../../common/Common'; import Logger from '../../common/Logger'; @@ -220,7 +221,7 @@ class Diagram extends React.Component { if (!this.svg) { const svgparams = _merge({}, this.options.svg); this.wrapper.innerHTML = this.templates.diagram(svgparams); - this.svg = d3.select(this.wrapper).select('svg'); + this.svg = select(this.wrapper).select('svg'); } if (this.state.height === 0) { @@ -766,7 +767,7 @@ class Diagram extends React.Component { .on('mouseenter', function f() { timer = setTimeout(() => { self.application.selectLifeline( - d3.select(this.parentNode).attr('data-id') + select(this.parentNode).attr('data-id') ); }, 150); }) @@ -775,7 +776,7 @@ class Diagram extends React.Component { self.application.selectLifeline(); }) .on('click', function f() { - const id = d3.select(this.parentNode).attr('data-id'); + const id = select(this.parentNode).attr('data-id'); window.postMessage({ source, id, type: 'lifeline' }, origin); }); @@ -784,7 +785,7 @@ class Diagram extends React.Component { .on('mouseenter', function f() { timer = setTimeout(() => { self.application.selectLifeline( - d3.select(this.parentNode).attr('data-id') + select(this.parentNode).attr('data-id') ); }, 150); }) @@ -793,7 +794,7 @@ class Diagram extends React.Component { self.application.selectLifeline(); }) .on('click', function f() { - const id = d3.select(this.parentNode).attr('data-id'); + const id = select(this.parentNode).attr('data-id'); window.postMessage( { source, id, type: 'lifelineHeader' }, origin @@ -803,10 +804,10 @@ class Diagram extends React.Component { gCanvas .selectAll('.asdcs-diagram-message-selectable') .on('mouseenter', function f() { - self.events.message = { x: d3.event.pageX, y: d3.event.pageY }; + self.events.message = { x: d3event.pageX, y: d3event.pageY }; timer = setTimeout(() => { self.application.selectMessage( - d3.select(this.parentNode).attr('data-id') + select(this.parentNode).attr('data-id') ); }, 200); }) @@ -816,7 +817,7 @@ class Diagram extends React.Component { self.application.selectMessage(); }) .on('click', function f() { - const id = d3.select(this.parentNode).attr('data-id'); + const id = select(this.parentNode).attr('data-id'); window.postMessage({ source, id, type: 'message' }, origin); }); } @@ -870,16 +871,16 @@ 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; + this.initialTransformX = d3event.transform.x; + this.initialTransformY = d3event.transform.y; } gContent.attr( 'transform', - `translate(${d3.event.transform.x - - this.initialTransformX}, ${d3.event.transform.y - - this.initialTransformY})scale(${d3.event.transform.k}, ${ - d3.event.transform.k + `translate(${d3event.transform.x - + this.initialTransformX}, ${d3event.transform.y - + this.initialTransformY})scale(${d3event.transform.k}, ${ + d3event.transform.k })` ); }; @@ -922,7 +923,7 @@ class Diagram extends React.Component { gContent.attr('transform', `scale(${scale})`); } - const zoom = d3.zoom().on('zoom', zoomed); + const zoom = d3zoom().on('zoom', zoomed); this.svg.call(zoom); this.svg.call(zoom.scaleBy, scale); diff --git a/dox-sequence-diagram-ui/src/main/webapp/lib/ecomp/asdc/sequencer/components/icons/Icon.jsx b/dox-sequence-diagram-ui/src/main/webapp/lib/ecomp/asdc/sequencer/components/icons/Icon.jsx index 51849676e4..71c9e69286 100644 --- a/dox-sequence-diagram-ui/src/main/webapp/lib/ecomp/asdc/sequencer/components/icons/Icon.jsx +++ b/dox-sequence-diagram-ui/src/main/webapp/lib/ecomp/asdc/sequencer/components/icons/Icon.jsx @@ -25,8 +25,8 @@ import PropTypes from 'prop-types'; */ const Icon = function Icon({ glyph, className }) { return ( - <svg viewBox="0 0 1000 1000" className={className}> - <use xlinkHref={glyph} className="asdcs-icon" /> + <svg className={className} viewBox={glyph.viewBox}> + <use xlinkHref={`#${glyph.id}`} /> </svg> ); }; @@ -34,7 +34,7 @@ const Icon = function Icon({ glyph, className }) { /** Declare properties. */ Icon.propTypes = { className: PropTypes.string, - glyph: PropTypes.string.isRequired + glyph: PropTypes.object.isRequired }; export default Icon; |