show dialog for keeping user activity #50

src/views/Main/Workspace/Tabs/Tab/DataView/Chart/index.vue

@@ -31,7 +31,6 @@ import PlotlyEditor from 'react-chart-editor'
 import chartHelper from '@/lib/chartHelper'
 import dereference from 'react-chart-editor/lib/lib/dereference'
 import fIo from '@/lib/utils/fileIo'
-import cIo from '@/lib/utils/clipboardIo'
 
 export default {
   name: 'Chart',
@@ -90,13 +89,12 @@ export default {
       return chartHelper.getOptionsForSave(this.state, this.dataSources)
     },
     async saveAsPng () {
-      const url = await chartHelper.getImageDataUrl(this.$refs.plotlyEditor.$el, 'png')
+      const url = await this.prepareCopy()
       this.$emit('loadingImageCompleted')
       fIo.downloadFromUrl(url, 'chart')
     },
-    async copyPngToClipboard () {
-      const url = await chartHelper.getImageDataUrl(this.$refs.plotlyEditor.$el, 'png')
-      cIo.copyFromDataUrl(url)
+    async prepareCopy () {
+      return await chartHelper.getImageDataUrl(this.$refs.plotlyEditor.$el, 'png')
     }
   }
 }

src/views/Main/Workspace/Tabs/Tab/DataView/Pivot/index.vue

@@ -15,7 +15,6 @@
 
 <script>
 import fIo from '@/lib/utils/fileIo'
-import cIo from '@/lib/utils/clipboardIo'
 import $ from 'jquery'
 import 'pivottable'
 import 'pivottable/dist/pivot.css'
@@ -166,15 +165,14 @@ export default {
         fIo.downloadFromUrl(canvas.toDataURL('image/png'), 'pivot', 'image/png')
       }
     },
-    async copyPngToClipboard () {
+
+    async prepareCopy () {
       if (this.pivotOptions.rendererName === 'Custom chart') {
-        this.pivotOptions.rendererOptions.customChartComponent.copyPngToClipboard()
+        return await this.pivotOptions.rendererOptions.customChartComponent.prepareCopy()
       } else if (this.pivotOptions.rendererName in $.pivotUtilities.plotly_renderers) {
-        const url = await chartHelper.getImageDataUrl(this.$refs.pivotOutput, 'png')
-        cIo.copyFromDataUrl(url)
+        return await chartHelper.getImageDataUrl(this.$refs.pivotOutput, 'png')
       } else {
-        const canvas = await getPivotCanvas(this.$refs.pivotOutput)
-        cIo.copyCanvas(canvas)
+        return await getPivotCanvas(this.$refs.pivotOutput)
       }
     }
   }

src/views/Main/Workspace/Tabs/Tab/DataView/index.vue

@@ -41,14 +41,26 @@
         <png-icon />
       </icon-button>
 
-       <icon-button
+      <icon-button
+        :loading="copyingImage"
         tooltip="Copy visualisation to clipboard"
         tooltip-position="top-left"
-        @click="copyToClipboard"
+        @click="prepareCopy"
       >
         <clipboard-icon/>
       </icon-button>
     </side-tool-bar>
+
+  <loading-dialog
+    loadingMsg="Rendering the visualisation..."
+    successMsg="Image is ready"
+    actionBtnName="Copy"
+    name="prepareCopy"
+    title="Copy to clipboard"
+    :loading="preparingCopy"
+    @action="copyToClipboard"
+    @cancel="cancelCopy"
+  />
   </div>
 </template>
 
@@ -61,6 +73,8 @@ import ChartIcon from '@/components/svg/chart'
 import PivotIcon from '@/components/svg/pivot'
 import PngIcon from '@/components/svg/png'
 import ClipboardIcon from '@/components/svg/clipboard'
+import cIo from '@/lib/utils/clipboardIo'
+import loadingDialog from '@/components/LoadingDialog'
 
 export default {
   name: 'DataView',
@@ -73,13 +87,17 @@ export default {
     ChartIcon,
     PivotIcon,
     PngIcon,
-    ClipboardIcon
+    ClipboardIcon,
+    loadingDialog
   },
   data () {
     return {
       mode: this.initMode || 'chart',
       importToPngEnabled: true,
-      loadingImage: false
+      loadingImage: false,
+      copyingImage: false,
+      preparingCopy: false,
+      dataToCopy: null
     }
   },
   watch: {
@@ -106,12 +124,33 @@ export default {
     getOptionsForSave () {
       return this.$refs.viewComponent.getOptionsForSave()
     },
-    copyToClipboard () {
+    async prepareCopy () {
       if ('ClipboardItem' in window) {
-        this.$refs.viewComponent.copyPngToClipboard()
+        this.preparingCopy = true
+        this.$modal.show('prepareCopy')
+        const t0 = performance.now()
+
+        setTimeout(async () => {
+          this.dataToCopy = await this.$refs.viewComponent.prepareCopy()
+          const t1 = performance.now()
+          if ((t1 - t0) < 950) {
+            this.$modal.hide('prepareCopy')
+            this.copyToClipboard()
+          } else {
+            this.preparingCopy = false
+          }
+        }, 0)
       } else {
         alert("Your browser doesn't support copying images into the clipboard. If you use Firefox you can enable it by setting dom.events.asyncClipboard.clipboardItem to true.")
       }
+    },
+    async copyToClipboard () {
+      cIo.copyImage(this.dataToCopy)
+      this.$modal.hide('prepareCopy')
+    },
+    cancelCopy () {
+      this.dataToCopy = null
+      this.$modal.hide('prepareCopy')
     }
   }
 }
@@ -132,4 +171,19 @@ export default {
   height: 100%;
   overflow: auto;
 }
+>>>.vm--container {
+  animation: show-modal 1s linear 0s 1;
+}
+
+@keyframes show-modal {
+  0% {
+    opacity: 0;
+  }
+  99% {
+    opacity: 0;
+  }
+  100% {
+    opacity: 1;
+  }
+}
 </style>