Removed Fit-to-Screen and Slider as we do not need them anymore (#370)

frontend/src/graph/Graph.vue

@@ -2,20 +2,18 @@
   <div class="visual-dl-page-container">
     <div class="visual-dl-page-left">
       <ui-chart
-        :fit-screen="fitScreen"
-        :download="download"
-        :scale="config.scale"
+        :do-download="doDownload"
         :cur-node="curNode"
         @curNodeUpdated="curNode = $event"
+        @triggerDownload="doDownload = $event"
       />
     </div>
     <div class="visual-dl-page-right">
       <div class="visual-dl-page-config-container">
         <ui-config
-          :config="config"
           :cur-node="curNode"
-          @fitScreen="handleFitScreen"
-          @download="handleDownload"
+          :do-download="doDownload"
+          @triggerDownload="doDownload = $event"
         />
       </div>
     </div>
@@ -36,26 +34,14 @@ export default {
   name: 'Graph',
   data() {
     return {
-      config: {
-        scale: 0.5,
-      },
-      fitScreen: {fitScreen: false},
-      download: {download: false},
+      doDownload: false,
       curNode: {},
     };
   },
   mounted() {
     autoAdjustHeight();
   },
-  methods: {
-    handleFitScreen() {
-      this.fitScreen = {fitScreen: true};
-      this.config.scale = 0.5;
-    },
-    handleDownload() {
-      this.download = {fitScreen: true};
-    },
-  },
+  methods: {},
 };
 
 </script>

frontend/src/graph/ui/Chart.vue

 <template>
   <div class="visual-dl-graph-charts">
-    <svg class="visual-dl-page-left">
+    <svg
+      class="visual-dl-page-left"
+      ref="graphSvg">
       <g/>
     </svg>
   </div>
 </template>
 <script>
-    // libs
-import echarts from 'echarts';
-import {
-  dragMovelHandler,
-  tansformElement,
-  relativeMove,
-} from './dragHelper';
 // service
 import {getPluginGraphsGraph} from '../../service';
 
-// https://github.com/taye/interact.js
-import interact from 'interactjs';
-
 // for d3 drawing
 import * as d3 from 'd3';
 
 export default {
   props: {
-    'fitScreen': {
-      type: Function,
-      required: true,
-    },
-    'download': {
-      type: Function,
+    'doDownload': {
+      type: Boolean,
       required: true,
     },
-    'scale': {
-      type: Number,
-      default: 1,
-    },
     'curNode': {
       type: Object,
       default: {},
   }},
-  computed: {
-    computedWidth() {
-      let scale = this.scale;
-      return Math.floor(scale * 2 * 700);
-    },
-  },
+  computed: {},
   data() {
     return {
-      myCY: null,
-      graphUrl: '',
     };
   },
   watch: {
-    fitScreen: function(val) {
-      this.clearDragedTransform(this.getBigImgEl());
-      this.clearDragedTransform(this.getSmallImgDragHandler());
-    },
-    download: function(val) {
-      if (this.myCY) {
-        let aEl = document.createElement('a');
-        aEl.href = this.myCY.png();
-        aEl.download = 'graph.png';
-        aEl.click();
+    doDownload: function(val) {
+      if (this.doDownload) {
+        // TODO(daming-lu): .svg is ugly and colorless.
+        let svg = this.$refs.graphSvg;
+
+        // get svg source.
+        let serializer = new XMLSerializer();
+        let source = serializer.serializeToString(svg);
+
+        // add name spaces.
+        if (!source.match(/^<svg[^>]+xmlns="http\:\/\/www\.w3\.org\/2000\/svg"/)) {
+          source = source.replace(/^<svg/, '<svg xmlns="http://www.w3.org/2000/svg"');
+        }
+        if (!source.match(/^<svg[^>]+"http\:\/\/www\.w3\.org\/1999\/xlink"/)) {
+          source = source.replace(/^<svg/, '<svg xmlns:xlink="http://www.w3.org/1999/xlink"');
+        }
+
+        // add xml declaration
+        source = '<?xml version="1.0" standalone="no"?>\r\n' + source;
+
+        // convert svg source to URI data scheme.
+        let url = 'data:image/svg+xml;charset=utf-8,'+encodeURIComponent(source);
+
+        let a = document.createElement('a');
+        a.download = 'graph.svg';
+        a.href = url;
+        a.click();
+
+        this.$emit('triggerDownload', false);
       }
     },
   },
+
   mounted() {
-    this.getOriginChartsData();
     let chartScope = this;
     getPluginGraphsGraph().then(({errno, data}) => {
       let graphData = data.data;
@@ -183,94 +179,7 @@ export default {
     });
   },
 
-  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 chartScope = 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 = chartScope.getBigImgEl();
-            let relativeEl = chartScope.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 = chartScope.getSmallImgEl();
-            let relativeEl = chartScope.getBigImgEl();
-
-            relativeMove({triggerEl, x, y}, relativeEl);
-          });
-        },
-      });
-    },
-  },
+  methods: {},
 };
 </script>
 <style lang="stylus">

frontend/src/graph/ui/Config.vue

 <template>
   <div class="visual-dl-graph-config-com">
     <div class="graph-config-upper">
-      <v-btn
-        class="visual-dl-graph-config-button"
-        color="primary"
-        @click="handleFitScreen"
-        dark>
-        <v-icon
-          style="margin-right: 6px"
-          size="20">fullscreen</v-icon>
-        Fit &nbsp; to &nbsp; screen
-      </v-btn>
-
       <v-btn
         class="visual-dl-graph-config-button"
         color="primary"
@@ -20,14 +9,6 @@
         <v-icon style="margin-right: 6px">file_download</v-icon>
         Download image
       </v-btn>
-
-      <v-slider
-        label="Scale"
-        max="1"
-        min="0.1"
-        step="0.1"
-        v-model="config.scale"
-        dark/>
     </div>
     <div class="node-info">
       <h3>Node Info: </h3>
@@ -55,21 +36,16 @@
 
 export default {
   props: {
-    curNode: {
-      type: Object,
+    'doDownload': {
+      type: Boolean,
       required: true,
     },
-    config: {
+    'curNode': {
       type: Object,
-      required: true,
-    },
-  },
-  methods: {
-    handleFitScreen() {
-      this.$emit('fitScreen');
-    },
+      default: {},
+  }}, methods: {
     handleDownload() {
-      this.$emit('download');
+      this.$emit('triggerDownload', true);
     },
   },
 };