From c514c039bd18ce00b5aeb21468c18780444ada6e Mon Sep 17 00:00:00 2001
From: Vitaliy Popov <symbx.live@gmail.com>
Date: Sun, 16 Apr 2023 23:32:45 +0300
Subject: [PATCH] Add events handling

---
 src/VuePlotly.vue | 30 +++++++++++++++++++++---------
 src/events.js     | 39 +++++++++++++++++++++++++++++++++++++++
 2 files changed, 60 insertions(+), 9 deletions(-)
 create mode 100644 src/events.js

diff --git a/src/VuePlotly.vue b/src/VuePlotly.vue
index a178335..6c368ec 100644
--- a/src/VuePlotly.vue
+++ b/src/VuePlotly.vue
@@ -1,15 +1,16 @@
 <template>
-<div :id="plotlyId"></div>
+  <div :id="plotlyId"></div>
 </template>
 
 <script>
-import { v4 as uuidv4 } from 'uuid';
-import Plotly from 'plotly.js-dist';
+import { v4 as uuidv4 } from "uuid";
+import Plotly from "plotly.js-dist";
+import events from "./events";
 
 let timeOutFunctionId;
 
 export default {
-  name: 'VuePlotly',
+  name: "VuePlotly",
 
   data() {
     return {
@@ -17,12 +18,18 @@ export default {
     };
   },
 
-  props: ['data', 'layout', 'config'],
+  props: ["data", "layout", "config"],
 
   watch: {
-    data() { this.setGraph(); },
-    layout() { this.setGraph(); },
-    config() { this.setGraph(); },
+    data() {
+      this.setGraph();
+    },
+    layout() {
+      this.setGraph();
+    },
+    config() {
+      this.setGraph();
+    },
   },
 
   mounted() {
@@ -34,11 +41,16 @@ export default {
     this.resizeObserver.observe(document.getElementById(this.plotlyId));
   },
 
-  beforeUnmount() { this.resizeObserver.disconnect(); },
+  beforeUnmount() {
+    this.resizeObserver.disconnect();
+  },
 
   methods: {
     setGraph() {
       Plotly.newPlot(this.plotlyId, this.data, this.layout, this.config);
+      events.forEach((e) => {
+        this.$el.on(e.completeName, e.handler(this));
+      });
     },
   },
 };
diff --git a/src/events.js b/src/events.js
new file mode 100644
index 0000000..646f7e2
--- /dev/null
+++ b/src/events.js
@@ -0,0 +1,39 @@
+const names = [
+  "afterExport",
+  "afterPlot",
+  "animated",
+  "animatingFrame",
+  "animationInterrupted",
+  "autoSize",
+  "beforeExport",
+  "buttonClicked",
+  "click",
+  "clickAnnotation",
+  "deselect",
+  "doubleClick",
+  "framework",
+  "hover",
+  "legendClick",
+  "legendDoubleClick",
+  "relayout",
+  "restyle",
+  "redraw",
+  "selected",
+  "selecting",
+  "sliderChange",
+  "sliderEnd",
+  "sliderStart",
+  "transitioning",
+  "transitionInterrupted",
+  "unhover"
+];
+
+const events = names.map(evt => evt.toLocaleLowerCase())
+.map(eventName => ({
+  completeName: "plotly_" + eventName,
+  handler: (ctx) => (...args) => {
+    ctx.$emit.apply(ctx, [eventName, ...args]);
+  }
+}));
+
+export default events;