feat: click event using Mermaid click directive (#36)

Author: dword-design

README.md

@@ -156,7 +156,7 @@ Vue.use(VueMermaidString)
 
 ## Usage
 
-Usage is simple, you pass a Mermaid string to the component and you get a visual diagram:
+Usage is simple, you pass a Mermaid string to the component and you get a visual diagram. For ease of use, we will use the [endent](https://github.com/indentjs/endent) package to declare multiline strings. Of course you can also write them using `\n`.
 
 ```html
 <template>
@@ -166,9 +166,69 @@ Usage is simple, you pass a Mermaid string to the component and you get a visual
 
 ```js
 <script>
+import endent from 'endent'
+
+export default {
+  computed: {
+    // equals graph TD\n  A --> B
+    diagram: () => endent`
+      graph TD
+        A --> B
+    `,
+  },
+}
+</script>
+```
+
+## Click events
+
+You can register click events by declaring them in the diagram string. See [the Mermaid docs](https://mermaid-js.github.io/mermaid/#/flowchart?id=interaction) for details. When registering a callback, you do not need to specify the callback name, the component will magically inject it into the diagram by itself. Implement the `node-click` event handler to react to click events:
+
+```html
+<template>
+  <vue-mermaid-string :value="diagram" @node-click="nodeClick" />
+</template>
+```
+
+```js
+<script>
+import endent from 'endent'
+
+export default {
+  computed: {
+    diagram: () => endent`
+      graph TD
+        A --> B
+        click A
+        click B
+    `,
+  },
+  methods: {
+    nodeClick: nodeId => console.log(nodeId),
+  },
+}
+</script>
+```
+
+You can also still implement node links. In this case, the handler won't be called but instead the node will be an `<a>` tag that opens the link on click:
+
+```html
+<template>
+  <vue-mermaid-string :value="diagram" />
+</template>
+```
+
+```js
+<script>
+import endent from 'endent'
+
 export default {
   computed: {
-    diagram: () => 'graph TD\n  A --> B',
+    diagram: () => endent`
+      graph TD
+        A --> B
+        click B href "https://github.com"
+    `,
   },
 }
 </script>

package.json

@@ -23,7 +23,8 @@
     "test:raw": "base test:raw"
   },
   "dependencies": {
-    "mermaid": "^8.8.3"
+    "mermaid": "^8.8.3",
+    "nanoid": "^3.1.25"
   },
   "devDependencies": {
     "@dword-design/base": "^8.0.0",

src/index.spec.js

@@ -1,10 +1,95 @@
-import { endent } from '@dword-design/functions'
+import { endent, filter } from '@dword-design/functions'
 import tester from '@dword-design/tester'
 import testerPluginComponent from '@dword-design/tester-plugin-component'
 import testerPluginPuppeteer from '@dword-design/tester-plugin-puppeteer'
 
 export default tester(
   {
+    click: {
+      page: endent`
+      <template>
+        <div>
+          <button class="hide-button" @click="hide" />
+          <div>
+            <self :class="['diagram', clicked1]" :value="diagram" @node-click="nodeClick1" />
+            <self v-if="visible" :class="['diagram', clicked2]" :value="diagram" @node-click="nodeClick2" />
+          </div>
+        </div>
+      </template>
+
+      <script>
+      import { endent } from '@dword-design/functions'
+
+      export default {
+        data: () => ({
+          clicked1: 'not-clicked',
+          clicked2: 'not-clicked',
+          visible: true,
+        }),
+        computed: {
+          diagram: () => endent\`
+            graph TD
+              A --> B
+              click A href "https://google.com"
+              click B
+          \`,
+        },
+        methods: {
+          hide() {
+            this.visible = false
+          },
+          nodeClick1(id) {
+            if (id === 'B') {
+              this.clicked1 = 'clicked'
+            }
+          },
+          nodeClick2(id) {
+            if (id === 'B') {
+              this.clicked2 = 'clicked'
+            }
+          },
+        },
+      }
+      </script>
+    `,
+      async test() {
+        const callbackPrefix = 'mermaidClick_'
+        await this.page.goto('http://localhost:3000')
+        await this.page.waitForSelector(
+          '.diagram:first-child .node[id^=flowchart-A-] a[href="https://google.com"]'
+        )
+
+        const node1 = await this.page.waitForSelector(
+          '.diagram:first-child .node:last-child'
+        )
+
+        const node2 = await this.page.waitForSelector(
+          '.diagram:last-child .node:last-child'
+        )
+        expect(
+          (
+            this.page.evaluate(() => Object.keys(window))
+            |> await
+            |> filter(key => key.startsWith(callbackPrefix))
+          ).length
+        ).toEqual(2)
+        await node1.click()
+        await this.page.waitForSelector('.diagram:first-child.clicked')
+        await this.page.waitForSelector('.diagram:last-child.not-clicked')
+        await node2.click()
+        await this.page.waitForSelector('.diagram:last-child.clicked')
+
+        const hideButton = await this.page.waitForSelector('.hide-button')
+        await hideButton.click()
+        expect(
+          (
+            this.page.evaluate(() => Object.keys(window))
+            |> await
+            |> filter(key => key.startsWith(callbackPrefix))
+          ).length
+        ).toEqual(1)
+      },
+    },
     'error handling': {
       page: endent`
       <template>

src/index.vue

@@ -1,23 +1,38 @@
 <script>
+import { nanoid } from 'nanoid'
+
 export default {
+  beforeDestroy() {
+    delete window[`mermaidClick_${this.id}`]
+  },
+  computed: {
+    finalValue() {
+      return this.value.replace(
+        /^(\s*click\s+[^\s]\s*)$/gm,
+        `$1 mermaidClick_${this.id}`
+      )
+    },
+    id: () => nanoid(),
+  },
   mounted() {
     if (typeof window !== 'undefined') {
       const mermaid = window.mermaid || require('mermaid').default
+      window[`mermaidClick_${this.id}`] = id => this.$emit('node-click', id)
       mermaid.parseError = error => this.$emit('parse-error', error)
       mermaid.initialize({
         securityLevel: 'loose',
         startOnLoad: false,
         theme: 'default',
       })
-      mermaid.init(this.value, this.$el)
+      mermaid.init(this.finalValue, this.$el)
     }
   },
   name: 'VueMermaidString',
   props: {
     value: { required: true, type: String },
   },
   render() {
-    return <div>{this.value}</div>
+    return <div>{this.finalValue}</div>
   },
 }
 </script>