Skip to content

V
VisualDL

PaddlePaddle / VisualDL
大约 2 年 前同步成功

通知 89
Star 4655
Fork 642
V
VisualDL
“05eb56393a73f5e3f2f27633cecdf58132d5d803”上不存在“git@gitcode.net:paddlepaddle/Serving.git”
未验证 提交 a6ec53ce 编写于 作者: D daminglu 提交者： GitHub
浏览文件
操作

1st PR on Interactive Graph 0.0.3 (#338)

上级 3afc5b2d
隐藏空白更改
内联 并排
Showing with 930 addition and 128 deletion
frontend/mock/data/plugin/graphs/graph.js
浏览文件 @ a6ec53ce
...@@ -17,7 +17,687 @@ module.exports = function (path, queryParam, postParam) { ...@@ -17,7 +17,687 @@ module.exports = function (path, queryParam, postParam) {
status: 0, status: 0,
msg: 'SUCCESS', msg: 'SUCCESS',
data: { data: {
url: '' status: 0,
msg: 'SUCCESS',
// cifar10
data: {
"node":[
{
"attribute":[
{
"type":"INTS",
"name":"kernel_shape",
"ints":[
"5",
"5"
]
},
{
"type":"INTS",
"name":"strides",
"ints":[
"1",
"1"
]
},
{
"type":"INTS",
"name":"pads",
"ints":[
"0",
"0",
"0",
"0"
]
},
{
"type":"INTS",
"name":"dilations",
"ints":[
"1",
"1"
]
},
{
"i":"1",
"type":"INT",
"name":"group"
}
],
"opType":"Conv",
"output":[
"13"
],
"input":[
"1",
"2"
]
},
{
"attribute":[
{
"i":"1",
"type":"INT",
"name":"broadcast"
},
{
"i":"1",
"type":"INT",
"name":"axis"
}
],
"opType":"Add",
"output":[
"14"
],
"input":[
"13",
"3"
]
},
{
"input":[
"14"
],
"opType":"Relu",
"docString":"/usr/local/lib/python2.7/dist-packages/torch/nn/functional.py(583): relu\\ncifar10.py(82): forward\\n/usr/local/lib/python2.7/dist-packages/torch/nn/modules/module.py(325): __call__\\n/usr/local/lib/python2.7/dist-packages/torch/jit/__init__.py(236): traced_inner\\n/usr/local/lib/python2.7/dist-packages/torch/jit/__init__.py(259): wrapper\\n/usr/local/lib/python2.7/dist-packages/torch/jit/__init__.py(241): forward\\n/usr/local/lib/python2.7/dist-packages/torch/nn/modules/module.py(325): __call__\\n/usr/local/lib/python2.7/dist-packages/torch/jit/__init__.py(217): trace\\n/usr/local/lib/python2.7/dist-packages/torch/onnx/__init__.py(116): _export\\n/usr/local/lib/python2.7/dist-packages/torch/onnx/__init__.py(75): export\\ncifar10.py(130): <module>\\n",
"output":[
"15"
]
},
{
"attribute":[
{
"type":"INTS",
"name":"kernel_shape",
"ints":[
"2",
"2"
]
},
{
"type":"INTS",
"name":"pads",
"ints":[
"0",
"0"
]
},
{
"type":"INTS",
"name":"strides",
"ints":[
"2",
"2"
]
}
],
"output":[
"16"
],
"opType":"MaxPool",
"docString":"/usr/local/lib/python2.7/dist-packages/torch/nn/functional.py(334): max_pool2d\\n/usr/local/lib/python2.7/dist-packages/torch/nn/modules/pooling.py(143): forward\\n/usr/local/lib/python2.7/dist-packages/torch/nn/modules/module.py(325): __call__\\ncifar10.py(82): forward\\n/usr/local/lib/python2.7/dist-packages/torch/nn/modules/module.py(325): __call__\\n/usr/local/lib/python2.7/dist-packages/torch/jit/__init__.py(236): traced_inner\\n/usr/local/lib/python2.7/dist-packages/torch/jit/__init__.py(259): wrapper\\n/usr/local/lib/python2.7/dist-packages/torch/jit/__init__.py(241): forward\\n/usr/local/lib/python2.7/dist-packages/torch/nn/modules/module.py(325): __call__\\n/usr/local/lib/python2.7/dist-packages/torch/jit/__init__.py(217): trace\\n/usr/local/lib/python2.7/dist-packages/torch/onnx/__init__.py(116): _export\\n/usr/local/lib/python2.7/dist-packages/torch/onnx/__init__.py(75): export\\ncifar10.py(130): <module>\\n",
"input":[
"15"
]
},
{
"attribute":[
{
"type":"INTS",
"name":"kernel_shape",
"ints":[
"5",
"5"
]
},
{
"type":"INTS",
"name":"strides",
"ints":[
"1",
"1"
]
},
{
"type":"INTS",
"name":"pads",
"ints":[
"0",
"0",
"0",
"0"
]
},
{
"type":"INTS",
"name":"dilations",
"ints":[
"1",
"1"
]
},
{
"i":"1",
"type":"INT",
"name":"group"
}
],
"opType":"Conv",
"output":[
"18"
],
"input":[
"16",
"4"
]
},
{
"attribute":[
{
"i":"1",
"type":"INT",
"name":"broadcast"
},
{
"i":"1",
"type":"INT",
"name":"axis"
}
],
"opType":"Add",
"output":[
"19"
],
"input":[
"18",
"5"
]
},
{
"input":[
"19"
],
"opType":"Relu",
"docString":"/usr/local/lib/python2.7/dist-packages/torch/nn/functional.py(583): relu\\ncifar10.py(83): forward\\n/usr/local/lib/python2.7/dist-packages/torch/nn/modules/module.py(325): __call__\\n/usr/local/lib/python2.7/dist-packages/torch/jit/__init__.py(236): traced_inner\\n/usr/local/lib/python2.7/dist-packages/torch/jit/__init__.py(259): wrapper\\n/usr/local/lib/python2.7/dist-packages/torch/jit/__init__.py(241): forward\\n/usr/local/lib/python2.7/dist-packages/torch/nn/modules/module.py(325): __call__\\n/usr/local/lib/python2.7/dist-packages/torch/jit/__init__.py(217): trace\\n/usr/local/lib/python2.7/dist-packages/torch/onnx/__init__.py(116): _export\\n/usr/local/lib/python2.7/dist-packages/torch/onnx/__init__.py(75): export\\ncifar10.py(130): <module>\\n",
"output":[
"20"
]
},
{
"attribute":[
{
"type":"INTS",
"name":"kernel_shape",
"ints":[
"2",
"2"
]
},
{
"type":"INTS",
"name":"pads",
"ints":[
"0",
"0"
]
},
{
"type":"INTS",
"name":"strides",
"ints":[
"2",
"2"
]
}
],
"output":[
"21"
],
"opType":"MaxPool",
"docString":"/usr/local/lib/python2.7/dist-packages/torch/nn/functional.py(334): max_pool2d\\n/usr/local/lib/python2.7/dist-packages/torch/nn/modules/pooling.py(143): forward\\n/usr/local/lib/python2.7/dist-packages/torch/nn/modules/module.py(325): __call__\\ncifar10.py(83): forward\\n/usr/local/lib/python2.7/dist-packages/torch/nn/modules/module.py(325): __call__\\n/usr/local/lib/python2.7/dist-packages/torch/jit/__init__.py(236): traced_inner\\n/usr/local/lib/python2.7/dist-packages/torch/jit/__init__.py(259): wrapper\\n/usr/local/lib/python2.7/dist-packages/torch/jit/__init__.py(241): forward\\n/usr/local/lib/python2.7/dist-packages/torch/nn/modules/module.py(325): __call__\\n/usr/local/lib/python2.7/dist-packages/torch/jit/__init__.py(217): trace\\n/usr/local/lib/python2.7/dist-packages/torch/onnx/__init__.py(116): _export\\n/usr/local/lib/python2.7/dist-packages/torch/onnx/__init__.py(75): export\\ncifar10.py(130): <module>\\n",
"input":[
"20"
]
},
{
"attribute":[
{
"type":"INTS",
"name":"shape",
"ints":[
"-1",
"400"
]
}
],
"output":[
"22"
],
"opType":"Reshape",
"docString":"cifar10.py(84): forward\\n/usr/local/lib/python2.7/dist-packages/torch/nn/modules/module.py(325): __call__\\n/usr/local/lib/python2.7/dist-packages/torch/jit/__init__.py(236): traced_inner\\n/usr/local/lib/python2.7/dist-packages/torch/jit/__init__.py(259): wrapper\\n/usr/local/lib/python2.7/dist-packages/torch/jit/__init__.py(241): forward\\n/usr/local/lib/python2.7/dist-packages/torch/nn/modules/module.py(325): __call__\\n/usr/local/lib/python2.7/dist-packages/torch/jit/__init__.py(217): trace\\n/usr/local/lib/python2.7/dist-packages/torch/onnx/__init__.py(116): _export\\n/usr/local/lib/python2.7/dist-packages/torch/onnx/__init__.py(75): export\\ncifar10.py(130): <module>\\n",
"input":[
"21"
]
},
{
"attribute":[
{
"type":"FLOAT",
"name":"alpha",
"f":1.0
},
{
"type":"FLOAT",
"name":"beta",
"f":1.0
},
{
"i":"1",
"type":"INT",
"name":"broadcast"
},
{
"i":"1",
"type":"INT",
"name":"transB"
}
],
"output":[
"25"
],
"opType":"Gemm",
"docString":"/usr/local/lib/python2.7/dist-packages/torch/nn/functional.py(835): linear\\n/usr/local/lib/python2.7/dist-packages/torch/nn/modules/linear.py(55): forward\\n/usr/local/lib/python2.7/dist-packages/torch/nn/modules/module.py(325): __call__\\ncifar10.py(85): forward\\n/usr/local/lib/python2.7/dist-packages/torch/nn/modules/module.py(325): __call__\\n/usr/local/lib/python2.7/dist-packages/torch/jit/__init__.py(236): traced_inner\\n/usr/local/lib/python2.7/dist-packages/torch/jit/__init__.py(259): wrapper\\n/usr/local/lib/python2.7/dist-packages/torch/jit/__init__.py(241): forward\\n/usr/local/lib/python2.7/dist-packages/torch/nn/modules/module.py(325): __call__\\n/usr/local/lib/python2.7/dist-packages/torch/jit/__init__.py(217): trace\\n/usr/local/lib/python2.7/dist-packages/torch/onnx/__init__.py(116): _export\\n/usr/local/lib/python2.7/dist-packages/torch/onnx/__init__.py(75): export\\ncifar10.py(130): <module>\\n",
"input":[
"22",
"6",
"7"
]
},
{
"input":[
"25"
],
"opType":"Relu",
"docString":"/usr/local/lib/python2.7/dist-packages/torch/nn/functional.py(583): relu\\ncifar10.py(85): forward\\n/usr/local/lib/python2.7/dist-packages/torch/nn/modules/module.py(325): __call__\\n/usr/local/lib/python2.7/dist-packages/torch/jit/__init__.py(236): traced_inner\\n/usr/local/lib/python2.7/dist-packages/torch/jit/__init__.py(259): wrapper\\n/usr/local/lib/python2.7/dist-packages/torch/jit/__init__.py(241): forward\\n/usr/local/lib/python2.7/dist-packages/torch/nn/modules/module.py(325): __call__\\n/usr/local/lib/python2.7/dist-packages/torch/jit/__init__.py(217): trace\\n/usr/local/lib/python2.7/dist-packages/torch/onnx/__init__.py(116): _export\\n/usr/local/lib/python2.7/dist-packages/torch/onnx/__init__.py(75): export\\ncifar10.py(130): <module>\\n",
"output":[
"26"
]
},
{
"attribute":[
{
"type":"FLOAT",
"name":"alpha",
"f":1.0
},
{
"type":"FLOAT",
"name":"beta",
"f":1.0
},
{
"i":"1",
"type":"INT",
"name":"broadcast"
},
{
"i":"1",
"type":"INT",
"name":"transB"
}
],
"output":[
"29"
],
"opType":"Gemm",
"docString":"/usr/local/lib/python2.7/dist-packages/torch/nn/functional.py(835): linear\\n/usr/local/lib/python2.7/dist-packages/torch/nn/modules/linear.py(55): forward\\n/usr/local/lib/python2.7/dist-packages/torch/nn/modules/module.py(325): __call__\\ncifar10.py(86): forward\\n/usr/local/lib/python2.7/dist-packages/torch/nn/modules/module.py(325): __call__\\n/usr/local/lib/python2.7/dist-packages/torch/jit/__init__.py(236): traced_inner\\n/usr/local/lib/python2.7/dist-packages/torch/jit/__init__.py(259): wrapper\\n/usr/local/lib/python2.7/dist-packages/torch/jit/__init__.py(241): forward\\n/usr/local/lib/python2.7/dist-packages/torch/nn/modules/module.py(325): __call__\\n/usr/local/lib/python2.7/dist-packages/torch/jit/__init__.py(217): trace\\n/usr/local/lib/python2.7/dist-packages/torch/onnx/__init__.py(116): _export\\n/usr/local/lib/python2.7/dist-packages/torch/onnx/__init__.py(75): export\\ncifar10.py(130): <module>\\n",
"input":[
"26",
"8",
"9"
]
},
{
"input":[
"29"
],
"opType":"Relu",
"docString":"/usr/local/lib/python2.7/dist-packages/torch/nn/functional.py(583): relu\\ncifar10.py(86): forward\\n/usr/local/lib/python2.7/dist-packages/torch/nn/modules/module.py(325): __call__\\n/usr/local/lib/python2.7/dist-packages/torch/jit/__init__.py(236): traced_inner\\n/usr/local/lib/python2.7/dist-packages/torch/jit/__init__.py(259): wrapper\\n/usr/local/lib/python2.7/dist-packages/torch/jit/__init__.py(241): forward\\n/usr/local/lib/python2.7/dist-packages/torch/nn/modules/module.py(325): __call__\\n/usr/local/lib/python2.7/dist-packages/torch/jit/__init__.py(217): trace\\n/usr/local/lib/python2.7/dist-packages/torch/onnx/__init__.py(116): _export\\n/usr/local/lib/python2.7/dist-packages/torch/onnx/__init__.py(75): export\\ncifar10.py(130): <module>\\n",
"output":[
"30"
]
},
{
"attribute":[
{
"type":"FLOAT",
"name":"alpha",
"f":1.0
},
{
"type":"FLOAT",
"name":"beta",
"f":1.0
},
{
"i":"1",
"type":"INT",
"name":"broadcast"
},
{
"i":"1",
"type":"INT",
"name":"transB"
}
],
"output":[
"33"
],
"opType":"Gemm",
"docString":"/usr/local/lib/python2.7/dist-packages/torch/nn/functional.py(835): linear\\n/usr/local/lib/python2.7/dist-packages/torch/nn/modules/linear.py(55): forward\\n/usr/local/lib/python2.7/dist-packages/torch/nn/modules/module.py(325): __call__\\ncifar10.py(87): forward\\n/usr/local/lib/python2.7/dist-packages/torch/nn/modules/module.py(325): __call__\\n/usr/local/lib/python2.7/dist-packages/torch/jit/__init__.py(236): traced_inner\\n/usr/local/lib/python2.7/dist-packages/torch/jit/__init__.py(259): wrapper\\n/usr/local/lib/python2.7/dist-packages/torch/jit/__init__.py(241): forward\\n/usr/local/lib/python2.7/dist-packages/torch/nn/modules/module.py(325): __call__\\n/usr/local/lib/python2.7/dist-packages/torch/jit/__init__.py(217): trace\\n/usr/local/lib/python2.7/dist-packages/torch/onnx/__init__.py(116): _export\\n/usr/local/lib/python2.7/dist-packages/torch/onnx/__init__.py(75): export\\ncifar10.py(130): <module>\\n",
"input":[
"30",
"10",
"11"
]
}
],
"input":[
{
"shape":[
"4",
"3",
"32",
"32"
],
"name":"1",
"data_type":"FLOAT"
},
{
"shape":[
"6",
"3",
"5",
"5"
],
"name":"2",
"data_type":"FLOAT"
},
{
"shape":[
"6"
],
"name":"3",
"data_type":"FLOAT"
},
{
"shape":[
"16",
"6",
"5",
"5"
],
"name":"4",
"data_type":"FLOAT"
},
{
"shape":[
"16"
],
"name":"5",
"data_type":"FLOAT"
},
{
"shape":[
"120",
"400"
],
"name":"6",
"data_type":"FLOAT"
},
{
"shape":[
"120"
],
"name":"7",
"data_type":"FLOAT"
},
{
"shape":[
"84",
"120"
],
"name":"8",
"data_type":"FLOAT"
},
{
"shape":[
"84"
],
"name":"9",
"data_type":"FLOAT"
},
{
"shape":[
"10",
"84"
],
"name":"10",
"data_type":"FLOAT"
},
{
"shape":[
"10"
],
"name":"11",
"data_type":"FLOAT"
}
],
"edges":[
{
"source":"1",
"target":"node_0",
"label":"label_0"
},
{
"source":"2",
"target":"node_0",
"label":"label_1"
},
{
"source":"node_0",
"target":"13",
"label":"label_2"
},
{
"source":"13",
"target":"node_1",
"label":"label_3"
},
{
"source":"3",
"target":"node_1",
"label":"label_4"
},
{
"source":"node_1",
"target":"14",
"label":"label_5"
},
{
"source":"14",
"target":"node_2",
"label":"label_6"
},
{
"source":"node_2",
"target":"15",
"label":"label_7"
},
{
"source":"15",
"target":"node_3",
"label":"label_8"
},
{
"source":"node_3",
"target":"16",
"label":"label_9"
},
{
"source":"16",
"target":"node_4",
"label":"label_10"
},
{
"source":"4",
"target":"node_4",
"label":"label_11"
},
{
"source":"node_4",
"target":"18",
"label":"label_12"
},
{
"source":"18",
"target":"node_5",
"label":"label_13"
},
{
"source":"5",
"target":"node_5",
"label":"label_14"
},
{
"source":"node_5",
"target":"19",
"label":"label_15"
},
{
"source":"19",
"target":"node_6",
"label":"label_16"
},
{
"source":"node_6",
"target":"20",
"label":"label_17"
},
{
"source":"20",
"target":"node_7",
"label":"label_18"
},
{
"source":"node_7",
"target":"21",
"label":"label_19"
},
{
"source":"21",
"target":"node_8",
"label":"label_20"
},
{
"source":"node_8",
"target":"22",
"label":"label_21"
},
{
"source":"22",
"target":"node_9",
"label":"label_22"
},
{
"source":"6",
"target":"node_9",
"label":"label_23"
},
{
"source":"7",
"target":"node_9",
"label":"label_24"
},
{
"source":"node_9",
"target":"25",
"label":"label_25"
},
{
"source":"25",
"target":"node_10",
"label":"label_26"
},
{
"source":"node_10",
"target":"26",
"label":"label_27"
},
{
"source":"26",
"target":"node_11",
"label":"label_28"
},
{
"source":"8",
"target":"node_11",
"label":"label_29"
},
{
"source":"9",
"target":"node_11",
"label":"label_30"
},
{
"source":"node_11",
"target":"29",
"label":"label_31"
},
{
"source":"29",
"target":"node_12",
"label":"label_32"
},
{
"source":"node_12",
"target":"30",
"label":"label_33"
},
{
"source":"30",
"target":"node_13",
"label":"label_34"
},
{
"source":"10",
"target":"node_13",
"label":"label_35"
},
{
"source":"11",
"target":"node_13",
"label":"label_36"
},
{
"source":"node_13",
"target":"33",
"label":"label_37"
}
],
"name":"torch-jit-export",
"output":[
{
"shape":[
"4",
"10"
],
"name":"33",
"data_type":"FLOAT"
}
]
}
} }
} }
}; };
......
frontend/package.json
浏览文件 @ a6ec53ce
...@@ -14,7 +14,10 @@ ...@@ -14,7 +14,10 @@
"dependencies": { "dependencies": {
"axios": "^0.16.1", "axios": "^0.16.1",
"csshint": "^0.3.3", "csshint": "^0.3.3",
"cytoscape": "^3.2.11",
"cytoscape-dagre": "^2.2.0",
"d3-format": "^1.2.1", "d3-format": "^1.2.1",
"dagre": "^0.8.2",
"echarts": "^3.8.5", "echarts": "^3.8.5",
"file-saver": "^1.3.3", "file-saver": "^1.3.3",
"htmlcs": "^0.4.1", "htmlcs": "^0.4.1",
......
frontend/src/graph/ui/Chart.vue
浏览文件 @ a6ec53ce
<template> <template>
<div class="visual-dl-graph-charts"> <div class="visual-dl-graph-charts">
<div v-if="graphUrl" class="visual-dl-img-box"> <div id="container" class="cy draggable" ref="draggable"></div>
<div class="small-img-box">
<img class="small-img" ref="small_img" width="30" :src="graphUrl" />
<div class="screen-handler" ref="screen_handler"></div>
</div>
<img class="draggable"
ref="draggable"
:width="computedWidth"
:src="graphUrl" />
</div>
</div> </div>
</template> </template>
<script> <script>
// libs // libs
import echarts from 'echarts'; import echarts from 'echarts';
import { import {
dragMovelHandler, dragMovelHandler,
tansformElement, tansformElement,
relativeMove relativeMove
} from './dragHelper'; } from './dragHelper';
// service // service
import {getPluginGraphsGraph} from '../../service'; import {getPluginGraphsGraph} from '../../service';
// https://github.com/taye/interact.js // https://github.com/taye/interact.js
import interact from 'interactjs'; import interact from 'interactjs';
import cytoscape from 'cytoscape';
export default { import dagre from 'cytoscape-dagre';
props: ['fitScreen', 'download', 'scale'],
computed: {
computedWidth() {
let scale = this.scale;
return Math.floor(scale * 2 * 700);
}
},
data() {
return {
width: 800,
height: 600,
graphUrl: '',
};
},
watch: {
fitScreen: function(val) {
this.clearDragedTransform(this.getBigImgEl());
this.clearDragedTransform(this.getSmallImgDragHandler());
},
download: function(val) {
let aEl = document.createElement('a');
aEl.href = this.graphUrl;
aEl.download = 'graph.png';
aEl.click();
}
},
mounted() {
this.getOriginChartsData();
},
methods: {
createChart() {
let el = this.el.getElementsByClassName('visual-dl-chart-box')[0];
this.myChart = echarts.init(el);
},
initChartOption(data) { export default {
this.setChartOptions(data); props: ['fitScreen', 'download', 'scale'],
computed: {
computedWidth() {
let scale = this.scale;
return Math.floor(scale * 2 * 700);
}
}, },
setChartOptions(data) { data() {
this.myChart.setOption(data); return {
myCY: null,
width: 800,
height: 600,
graphUrl: '',
};
}, },
watch: {
getOriginChartsData() { fitScreen: function(val) {
getPluginGraphsGraph().then(({status, data}) => { this.clearDragedTransform(this.getBigImgEl());
if (status === 0 && data.url) { this.clearDragedTransform(this.getSmallImgDragHandler());
this.graphUrl = data.url },
this.addDragEventForImg(); download: function(val) {
if (this.myCY) {
let aEl = document.createElement('a');
aEl.href = this.myCY.png();
aEl.download = 'graph.png';
aEl.click();
} }
}); }
}, },
mounted() {
var that = this;
this.getOriginChartsData();
cytoscape.use( dagre );
getPluginGraphsGraph().then(({errno, data}) => {
clearDragedTransform(dragImgEl) { var raw_data = data.data;
dragImgEl.style.transform = 'none'; var data = raw_data;
dragImgEl.setAttribute('data-x', 0);
dragImgEl.setAttribute('data-y', 0);
},
getBigImgEl() { var graph_data = {
return this.$refs.draggable nodes: [],
}, edges: []
};
getSmallImgEl() { var node_names = [];
return this.$refs.small_img for (var i = 0; i < data.input.length; ++i) {
}, graph_data.nodes.push({
data: {id: data.input[i].name, node_data: data.input[i].name}
});
node_names.push(data.input[i].name);
}
getSmallImgDragHandler() { for (var i = 0; i < data.edges.length; ++i) {
return this.$refs.screen_handler var source = data.edges[i].source;
}, var target = data.edges[i].target;
if (node_names.includes(source) === false) {
graph_data.nodes.push({
data: {id: source, node_data:source}
});
node_names.push(source);
}
if (node_names.includes(target) === false) {
var node_data = target;
if (target.includes('node_')) {
// it is an operator node
var node_id = target.substring(5);
node_data = data.node[node_id].opType;
}
graph_data.nodes.push({
data: {id: target, node_data:node_data}
});
node_names.push(target);
}
addDragEventForImg() { graph_data.edges.push({
let that = this; data: {source: source, target: target}
// target elements with the "draggable" class
interact('.draggable').draggable({
// enable inertial throwing
inertia: true,
autoScroll: true,
// call this function on every dragmove event
onmove(event) {
dragMovelHandler(event, (target, x, y) => {
tansformElement(target, x, y);
// compute the proportional value
let triggerEl = that.getBigImgEl();
let relativeEl = that.getSmallImgDragHandler();
relativeMove({triggerEl, x, y}, relativeEl);
}); });
} }
});
interact('.screen-handler').draggable({ // >> cy
// enable inertial throwing var cy = cytoscape({
inertia: true, container: document.getElementById('container'),
autoScroll: true,
restrict: { boxSelectionEnabled: false,
restriction: 'parent', autounselectify: true,
endOnly: false,
elementRect: { layout: {
top: 0, name: 'dagre'
left: 0, },
bottom: 1,
right: 1 style: [
{
selector: 'node',
style: {
'width': 40,
'height': 40,
'content': 'data(node_data)',
'text-opacity': 0.5,
'text-valign': 'center',
'text-halign': 'right',
'background-color': '#11479e'
}
},
{
selector: 'edge',
style: {
'curve-style': 'bezier',
'width': 6,
'target-arrow-shape': 'triangle',
'line-color': '#9dbaea',
'target-arrow-color': '#9dbaea'
}
}
],
elements: graph_data,
});
this.myCY = cy;
cy.nodes().forEach(function(node){
if (node.id().includes('node_')) {
node.style('width', '80px');
node.style('height', '36px');
node.style('shape', 'roundrectangle');
node.style('background-color', '#158c96');
node.style('text-valign', 'center');
node.style('text-halign', 'center');
} }
},
// call this function on every dragmove event let collapsed = true;
onmove(event) { node.on('tap', function(evt){
dragMovelHandler(event, (target, x, y) => { if (node.id().includes('node_')) {
tansformElement(target, x, y); collapsed = !collapsed;
// compute the proportional value if (!collapsed) {
let triggerEl = that.getSmallImgEl(); node.style('width', '120px');
let relativeEl = that.getBigImgEl(); node.style('height', '54px');
} else {
relativeMove({triggerEl, x, y}, relativeEl); node.style('width', '80px');
node.style('height', '36px');
}
}
}); });
} });
}); });
},
methods: {
createChart() {
let el = this.el.getElementsByClassName('visual-dl-chart-box')[0];
this.myChart = echarts.init(el);
},
initChartOption(data) {
this.setChartOptions(data);
},
setChartOptions(data) {
this.myChart.setOption(data);
},
getOriginChartsData() {
getPluginGraphsGraph().then(({status, data}) => {
if (status === 0 && data.url) {
this.graphUrl = data.url;
this.addDragEventForImg();
}
});
},
clearDragedTransform(dragImgEl) {
dragImgEl.style.transform = 'none';
dragImgEl.setAttribute('data-x', 0);
dragImgEl.setAttribute('data-y', 0);
},
getBigImgEl() {
return this.$refs.draggable
},
getSmallImgEl() {
return this.$refs.small_img
},
getSmallImgDragHandler() {
return this.$refs.screen_handler
},
addDragEventForImg() {
let that = this;
// target elements with the "draggable" class
interact('.draggable').draggable({
// enable inertial throwing
inertia: true,
autoScroll: true,
// call this function on every dragmove event
onmove(event) {
dragMovelHandler(event, (target, x, y) => {
tansformElement(target, x, y);
// compute the proportional value
let triggerEl = that.getBigImgEl();
let relativeEl = that.getSmallImgDragHandler();
relativeMove({triggerEl, x, y}, relativeEl);
});
}
});
interact('.screen-handler').draggable({
// enable inertial throwing
inertia: true,
autoScroll: true,
restrict: {
restriction: 'parent',
endOnly: false,
elementRect: {
top: 0,
left: 0,
bottom: 1,
right: 1
}
},
// call this function on every dragmove event
onmove(event) {
dragMovelHandler(event, (target, x, y) => {
tansformElement(target, x, y);
// compute the proportional value
let triggerEl = that.getSmallImgEl();
let relativeEl = that.getBigImgEl();
relativeMove({triggerEl, x, y}, relativeEl);
});
}
});
}
} }
} };
};
</script> </script>
<style lang="stylus"> <style lang="stylus">
.cy
height: 100%
width: 70%
position: absolute
top: 0px
left: 0px
.visual-dl-graph-charts .visual-dl-graph-charts
width 90% width inherit
margin 0 auto margin 0 auto
margin-bottom 20px margin-bottom 20px
......
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或