Add fullscreen mode for mermaid

exactpro · Aug 14, 2023 · 5ada407 · 5ada407
1 parent 8cc578f
commit 5ada407
Show file tree

Hide file tree

Showing 2 changed files with 80 additions and 42 deletions.
diff --git a/components/content/Mermaid.vue b/components/content/Mermaid.vue
@@ -15,53 +15,24 @@
   -->
 
 <script setup lang="ts">
-const { $mermaid } = useNuxtApp()
+import FullscreenView from '../ep/FullscreenView.vue'
+import MermaidDiagram from '../ep/MermaidDiagram.vue'
 
 const props = defineProps<{
   code: string
 }>()
-
-const decodedCode = computed(() => {
-  return atob(props.code)
-})
-
-const root = ref<HTMLElement | null>(null)
-const codeBlock = ref<HTMLElement | null>(null)
-const isDiagramLoading = ref(true)
-
-async function renderMermaidDiagram() {
-  isDiagramLoading.value = true
-  if (codeBlock.value && $mermaid) {
-    try {
-      await $mermaid.run({
-        nodes: [codeBlock.value],
-        suppressErrors: true
-      })
-    } catch (e) {}
-
-    isDiagramLoading.value = false
-  }
-}
-
-onMounted(() => {
-  renderMermaidDiagram()
-})
 </script>
 
 <template>
-  <figure ref="root" class="relative">
-    <pre
-      ref="codeBlock"
-      style="background: none"
-      :class="{
-        'opacity-0': isDiagramLoading
-      }"
-      v-text="decodedCode"
-    ></pre>
-    <div>
-      <div v-if="isDiagramLoading" class="absolute inset-0 font-serif">
-        Mermaid diagram is loading...
-      </div>
-    </div>
-  </figure>
+  <FullscreenView>
+    <template #default="{ onClick, isFullscreen }">
+      <MermaidDiagram
+        :class="{
+          'cursor-zoom-in hover:shadow transition-shadow': !isFullscreen
+        }"
+        :code="props.code"
+        @click="onClick"
+      />
+    </template>
+  </FullscreenView>
 </template>
diff --git a/components/ep/MermaidDiagram.vue b/components/ep/MermaidDiagram.vue
@@ -0,0 +1,67 @@
+<!--
+  ~ Copyright 2023 Exactpro (Exactpro Systems Limited)
+  ~
+  ~ Licensed under the Apache License, Version 2.0 (the "License");
+  ~ you may not use this file except in compliance with the License.
+  ~ You may obtain a copy of the License at
+  ~
+  ~     http://www.apache.org/licenses/LICENSE-2.0
+  ~
+  ~ Unless required by applicable law or agreed to in writing, software
+  ~ distributed under the License is distributed on an "AS IS" BASIS,
+  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  ~ See the License for the specific language governing permissions and
+  ~ limitations under the License.
+  -->
+
+<script setup lang="ts">
+const { $mermaid } = useNuxtApp()
+
+const props = defineProps<{
+  code: string
+}>()
+
+const decodedCode = computed(() => {
+  return atob(props.code)
+})
+
+const root = ref<HTMLElement | null>(null)
+const codeBlock = ref<HTMLElement | null>(null)
+const isDiagramLoading = ref(true)
+
+async function renderMermaidDiagram() {
+  isDiagramLoading.value = true
+  if (codeBlock.value && $mermaid) {
+    try {
+      await $mermaid.run({
+        nodes: [codeBlock.value],
+        suppressErrors: true
+      })
+    } catch (e) {}
+
+    isDiagramLoading.value = false
+  }
+}
+
+onMounted(() => {
+  renderMermaidDiagram()
+})
+</script>
+
+<template>
+  <figure ref="root" class="relative">
+    <pre
+      ref="codeBlock"
+      style="background: none"
+      :class="{
+        'opacity-0': isDiagramLoading
+      }"
+      v-text="decodedCode"
+    ></pre>
+    <div>
+      <div v-if="isDiagramLoading" class="absolute inset-0 font-serif">
+        Mermaid diagram is loading...
+      </div>
+    </div>
+  </figure>
+</template>