From 9ffc8830f6979fe60b23f61e5c69646b0a84de2e Mon Sep 17 00:00:00 2001 From: WeiFeng-mindinsight Date: Thu, 6 Aug 2020 13:51:04 +0800 Subject: [PATCH] UI add graph plug-in compatible code for Firefox that surpport zooming event --- .../ui/src/views/train-manage/data-map.vue | 7 +- .../ui/src/views/train-manage/graph.vue | 162 ++++++++++-------- 2 files changed, 95 insertions(+), 74 deletions(-) diff --git a/mindinsight/ui/src/views/train-manage/data-map.vue b/mindinsight/ui/src/views/train-manage/data-map.vue index 51a722da..dd0f0e3b 100644 --- a/mindinsight/ui/src/views/train-manage/data-map.vue +++ b/mindinsight/ui/src/views/train-manage/data-map.vue @@ -146,6 +146,7 @@ limitations under the License. import RequestService from '../../services/request-service'; import CommonProperty from '@/common/common-property.js'; import {select, selectAll, zoom} from 'd3'; +import {event as currentEvent} from 'd3-selection'; import 'd3-graphviz'; const d3 = {select, selectAll, zoom}; export default { @@ -385,10 +386,12 @@ export default { const zoom = d3 .zoom() .on('start', () => { + const event = currentEvent.sourceEvent; pointer.start.x = event.x; pointer.start.y = event.y; }) .on('zoom', () => { + const event = currentEvent.sourceEvent; const transformData = this.getTransformData(graphDom); if (!Object.keys(graphTransform).length) { graphTransform = { @@ -444,8 +447,8 @@ export default { pointer.start.x = pointer.end.x; pointer.start.y = pointer.end.y; } else if (event.type === 'wheel') { - const wheelDelta = event.wheelDelta; - const rate = Math.abs(wheelDelta / 100); + const wheelDelta = -event.deltaY; + const rate = 1.2; scale = wheelDelta > 0 ? transformData.scale[0] * rate diff --git a/mindinsight/ui/src/views/train-manage/graph.vue b/mindinsight/ui/src/views/train-manage/graph.vue index 69051308..cbcdc010 100644 --- a/mindinsight/ui/src/views/train-manage/graph.vue +++ b/mindinsight/ui/src/views/train-manage/graph.vue @@ -415,6 +415,7 @@ import Autocomplete from '@/components/autocomplete'; import CommonProperty from '@/common/common-property.js'; import RequestService from '@/services/request-service'; import {select, selectAll, zoom} from 'd3'; +import {event as currentEvent} from 'd3-selection'; import 'd3-graphviz'; const d3 = {select, selectAll, zoom}; export default { @@ -679,69 +680,82 @@ export default { */ startApp() { const nodes = d3.selectAll('g.node, g.cluster'); - nodes.on('click', (target, index, nodesList) => { - // The target value of the element converted from the HTML attribute of the variable is null. - const clickNode = nodesList[index]; - const nodeId = clickNode.id; - const nodeClass = clickNode.classList.value; - setTimeout(() => { - this.clickScope = { - id: nodeId, - class: nodeClass, - }; - }, 10); - setTimeout(() => { - this.clickScope = {}; - }, 1000); - this.selectedNode.name = nodeId; - this.selectNode(false); - if (!event || !event.type || event.type !== 'click') { - return; - } - event.stopPropagation(); - event.preventDefault(); - }); + nodes.on( + 'click', + (target, index, nodesList) => { + // The target value of the element converted from the HTML attribute of the variable is null. + const event = currentEvent; + event.stopPropagation(); + event.preventDefault(); + + const clickNode = nodesList[index]; + const nodeId = clickNode.id; + const nodeClass = clickNode.classList.value; + setTimeout(() => { + this.clickScope = { + id: nodeId, + class: nodeClass, + }; + }, 10); + setTimeout(() => { + this.clickScope = {}; + }, 1000); + this.selectedNode.name = nodeId; + this.selectNode(false); + }, + false, + ); // namespaces Expansion or Reduction - nodes.on('dblclick', (target, index, nodesList) => { - // The target of the element converted from the HTML attribute of the variable is empty and - // needs to be manually encapsulated. - const clickNode = nodesList[index]; - const nodeId = clickNode.id; - const nodeClass = clickNode.classList.value; - let name = nodeId; - this.selectedNode.more = - name.indexOf('more...') !== -1 && - document - .querySelector(`#graph g[id="${name}"]`) - .attributes.class.value.indexOf('plain') === -1; - - const unfoldFlag = - (nodeClass.includes('aggregation') || - nodeClass.includes('cluster') || - this.selectedNode.more) && - (!this.clickScope.id || - (this.clickScope.id && nodeId === this.clickScope.id)); - - if (this.selectedNode.more) { - const changePage = name.includes('right') ? 1 : -1; - const parentId = document.querySelector(`#graph g[id="${name}"]`) - .parentNode.id; - name = parentId.replace('_unfold', ''); - this.allGraphData[name].index += changePage; - this.selectedNode.name = name; - } - if (unfoldFlag) { - this.dealDoubleClick(name); - } else if (this.clickScope.id) { - this.selectedNode.name = this.clickScope.id; - this.selectNode(false); - } - if (!event || !event.type || event.type !== 'dblclick') { - return; - } - event.stopPropagation(); - event.preventDefault(); - }); + nodes.on( + 'dblclick', + (target, index, nodesList) => { + // The target of the element converted from the HTML attribute of the variable is empty and + // needs to be manually encapsulated. + const event = currentEvent; + event.stopPropagation(); + event.preventDefault(); + + const clickNode = nodesList[index]; + const nodeId = clickNode.id; + const nodeClass = clickNode.classList.value; + let name = nodeId; + this.selectedNode.more = + name.indexOf('more...') !== -1 && + document + .querySelector(`#graph g[id="${name}"]`) + .attributes.class.value.indexOf('plain') === -1; + + const unfoldFlag = + (nodeClass.includes('aggregation') || + nodeClass.includes('cluster') || + this.selectedNode.more) && + (!this.clickScope.id || + (this.clickScope.id && nodeId === this.clickScope.id)); + + if (this.selectedNode.more) { + const changePage = name.includes('right') ? 1 : -1; + const parentId = document.querySelector(`#graph g[id="${name}"]`) + .parentNode.id; + name = parentId.replace('_unfold', ''); + this.allGraphData[name].index += changePage; + this.allGraphData[name].index = Math.max( + 0, + Math.min( + this.allGraphData[name].index, + this.allGraphData[name].childIdsList.length - 1, + ), + ); + this.selectedNode.name = name; + } + if (unfoldFlag) { + this.dealDoubleClick(name); + } else if (this.clickScope.id) { + this.selectedNode.name = this.clickScope.id; + this.selectNode(false); + } + }, + false, + ); this.initZooming(); if (this.selectedNode.name) { this.selectNode(true); @@ -758,10 +772,15 @@ export default { const zoom = d3 .zoom() .on('start', () => { + const event = currentEvent.sourceEvent; pointer.start.x = event.x; pointer.start.y = event.y; }) .on('zoom', () => { + const event = currentEvent.sourceEvent; + event.stopPropagation(); + event.preventDefault(); + const transformData = this.getTransformData(this.graph.dom); let tempStr = ''; let change = {}; @@ -809,8 +828,8 @@ export default { pointer.start.x = pointer.end.x; pointer.start.y = pointer.end.y; } else if (event.type === 'wheel') { - const wheelDelta = event.wheelDelta; - const rate = Math.abs(wheelDelta / 100); + const wheelDelta = -event.deltaY; + const rate = 1.2; scale = wheelDelta > 0 ? transformData.scale[0] * rate @@ -838,11 +857,11 @@ export default { this.graph.transRate = graphRect.width / graphBox.width / this.graph.transform.k; - tempStr = `translate(${this.graph.transform.x},${this.graph.transform.y}) scale(${this.graph.transform.k})`; + tempStr = + `translate(${this.graph.transform.x},${this.graph.transform.y}) ` + + `scale(${this.graph.transform.k})`; this.graph.dom.setAttribute('transform', tempStr); this.setInsideBoxData(); - event.stopPropagation(); - event.preventDefault(); }); const svg = d3.select('#graph svg'); @@ -930,8 +949,8 @@ export default { */ layoutNamescope(name, toUnfold) { this.$nextTick(() => { - const dotStr = this.packageNamescope(name); try { + const dotStr = this.packageNamescope(name); this.graphvizTemp = d3 .select('#graphTemp') .graphviz({useWorker: false, totalMemory: this.totalMemory}) @@ -2678,12 +2697,11 @@ export default { }; // Mouse wheel event - smallContainer.onmousewheel = (e) => { + smallContainer.onwheel = (e) => { e = e || window.event; - const wheelDelta = e.wheelDelta ? e.wheelDelta : e.detail; + const wheelDelta = e.wheelDelta ? e.wheelDelta : -e.deltaY; if (!isNaN(this.graph.transform.k) && this.graph.transform.k !== 0) { - let rate = - wheelDelta > 0 ? wheelDelta / 100 : -1 / (wheelDelta / 100); + let rate = wheelDelta > 0 ? 1.2 : 1 / 1.2; let scaleTemp = this.graph.transform.k / rate; if (scaleTemp <= this.graph.minScale) {