feat(pdf): preview

Author: Novout

src/components/editor/aside/pdf/AsidePreviewPDF.vue

@@ -0,0 +1,21 @@
+<template>
+  <AsideText
+    class="wb-aside-button"
+    :text="t('editor.aside.pdf.preview')"
+    :shortcuts="store.state.shortcuts.previewPDF[0]"
+    @click.prevent="onPreviewPDF"
+  >
+  </AsideText>
+</template>
+
+<script setup lang="ts">
+  import { useI18n } from 'vue-i18n'
+  import { useStore } from 'vuex'
+
+  const store = useStore()
+  const { t } = useI18n()
+
+  const onPreviewPDF = async () => {
+    store.commit('absolute/switchPdfPreview', true)
+  }
+</script>

src/components/editor/aside/project/AsideBarProject.vue

@@ -24,6 +24,7 @@
     <AsideSaveProject v-if="name !== useEnv().projectEmpty()" />
     <AsideLine v-if="name !== useEnv().projectEmpty()" />
     <AsideConfigurationPDF v-if="name !== useEnv().projectEmpty()" />
+    <AsidePreviewPDF v-if="name !== useEnv().projectEmpty()" />
     <AsideGeneratePDF v-if="name !== useEnv().projectEmpty()" />
     <AsideLine v-if="name !== useEnv().projectEmpty()" />
     <AsideAddonLogger v-if="name !== useEnv().projectEmpty()" />

src/components/editor/pdf/PDFPreview.vue

@@ -0,0 +1,34 @@
+<template>
+  <HeroIcon class="wb-text" @click.prevent="onClick">
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      class="h-6 w-6"
+      viewBox="0 0 20 20"
+      fill="currentColor"
+    >
+      <path
+        fill-rule="evenodd"
+        d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z"
+        clip-rule="evenodd"
+      />
+    </svg>
+  </HeroIcon>
+  <div ref="preview" class="w-1/2 h-1/2 p-2"></div>
+</template>
+
+<script setup lang="ts">
+  import { usePDF } from '@/use/pdf'
+  import { ref, onMounted } from 'vue'
+  import { useStore } from 'vuex'
+
+  const preview = ref<HTMLElement | null>(null)
+  const store = useStore()
+
+  onMounted(() => {
+    usePDF().external(store).onPreviewPDF(preview.value)
+  })
+
+  const onClick = () => {
+    store.commit('absolute/switchPdfPreview', false)
+  }
+</script>

src/components/provider/ProviderApp.vue

@@ -1,13 +1,17 @@
 <template>
-  <EditorCommands v-if="store.state.absolute.commands" />
-  <EditorShortcutsSwitcher v-if="store.state.absolute.shortcuts.switcher" />
-  <ProviderLoad v-if="store.state.absolute.load" />
-  <ProviderLogger v-if="store.state.absolute.logger" />
-  <ProviderPDF v-if="store.state.absolute.pdf.configuration" />
+  <EditorCommands v-if="absolute.commands" />
+  <EditorShortcutsSwitcher v-if="absolute.shortcuts.switcher" />
+  <ProviderLoad v-if="absolute.load" />
+  <ProviderLogger v-if="absolute.logger" />
+  <ProviderPDFConfiguration v-if="absolute.pdf.configuration" />
+  <ProviderPDFPreview v-if="absolute.pdf.preview" />
 </template>
 
 <script setup lang="ts">
+  import { computed } from 'vue'
   import { useStore } from 'vuex'
 
   const store = useStore()
+
+  const absolute = computed(() => store.state.absolute)
 </script>

src/components/provider/ProviderPDF.vue renamed to src/components/provider/pdf/ProviderPDFConfiguration.vue

@@ -1,6 +1,6 @@
 <template>
   <div
-    id="logger-absolute"
+    id="pdf-absolute"
     class="
       absolute
       top-1/2
@@ -21,12 +21,3 @@
     <PDFConfiguration />
   </div>
 </template>
-
-<script setup lang="ts">
-  import { useStore } from 'vuex'
-  import { computed } from 'vue'
-
-  const store = useStore()
-
-  const logger = computed(() => store.state.logger.content)
-</script>

src/components/provider/pdf/ProviderPDFPreview.vue

@@ -0,0 +1,21 @@
+<template>
+  <div
+    id="pdf-absolute"
+    class="
+      absolute
+      top-1/2
+      left-1/2
+      transform
+      -translate-x-1/2 -translate-y-1/2
+      overflow-y-auto
+      duration-700
+      bg-white
+      dark:bg-gray-800
+      transition
+      flex flex-col
+      z-preview
+    "
+  >
+    <PDFPreview />
+  </div>
+</template>

src/lang/br/editor.ts

@@ -98,6 +98,7 @@ export default {
     },
     pdf: {
       title: 'Gerar PDF',
+      preview: 'Simular PDF',
       configuration: 'Configurar PDF',
     },
     commands: {

src/lang/en/editor.ts

@@ -98,6 +98,7 @@ export default {
     },
     pdf: {
       title: 'Generate PDF',
+      preview: 'Preview PDF',
       configuration: 'Configure PDF',
     },
     commands: {

src/store/module/absolute.ts

@@ -16,6 +16,7 @@ export default {
       logger: false,
       pdf: {
         configuration: false,
+        preview: false,
       },
     } as AbsoluteState),
   mutations: {
@@ -40,6 +41,9 @@ export default {
     switchPdfConfiguration(state: any, b: boolean) {
       state.pdf.configuration = b
     },
+    switchPdfPreview(state: any, b: boolean) {
+      state.pdf.preview = b
+    },
   },
   actions: {},
   getters: {},

src/store/module/shortcuts.ts

@@ -13,6 +13,7 @@ export default {
       generatePDF: useDefines().shortcuts('generatePDF'),
       switcherRawText: useDefines().shortcuts('switcherRawText'),
       logger: useDefines().shortcuts('logger'),
+      previewPDF: useDefines().shortcuts('previewPDF'),
       configurationPDF: useDefines().shortcuts('configurationPDF'),
     } as ShortcutsState),
   mutations: {},

src/types/shortcuts.ts

@@ -4,6 +4,7 @@ export interface ShortcutsState {
   newProject: Array<string>
   newChapter: Array<string>
   deleteChapter: Array<string>
+  previewPDF: Array<string>
   generatePDF: Array<string>
   logger: Array<string>
 }

src/use/defines.ts

@@ -9,7 +9,8 @@ export const useDefines: Callback<any> = () => {
       newChapter: ['CTRL + Q', 'ctrl > q'],
       deleteChapter: ['CTRL + D', 'ctrl > d'],
       configurationPDF: ['CTRL + Shift + G', 'ctrl > shift > g'],
-      generatePDF: ['CTRL + G', 'ctrl > g'],
+      previewPDF: ['CTRL + G', 'ctrl > g'],
+      generatePDF: ['CTRL + Shift + G', 'ctrl > shift > g'],
       switcherRawText: ['CTRL + H', 'ctrl > h'],
       logger: ['CTRL + L', 'ctrl > l'],
     }[k]

src/use/keyboard.ts

@@ -18,6 +18,7 @@ export const useKeyboard: Callback<any> = () => {
     generatePDF()
     switcherRawText()
     logger()
+    previewPDF()
     configurationPDF()
   }
 
@@ -96,6 +97,17 @@ export const useKeyboard: Callback<any> = () => {
     })
   }
 
+  const previewPDF = () => {
+    keyboard.bind(store.state.shortcuts.previewPDF[1], (e: Event) => {
+      useUtils().prevent(e)
+
+      store.commit(
+        'absolute/switchPdfPreview',
+        !store.state.absolute.pdf.preview
+      )
+    })
+  }
+
   const configurationPDF = () => {
     keyboard.bind(store.state.shortcuts.configurationPDF[1], (e: Event) => {
       useUtils().prevent(e)

src/use/pdf.ts

@@ -322,22 +322,98 @@ export const usePDF: Callback<any> = () => {
     })
   }
 
+  const preview: Callback<any> = (
+    store: Store<any>,
+    input: HTMLElement
+  ): void => {
+    const generator = pdfMake.createPdf({
+      pageSize: generate().base(store).pageSize,
+      pageOrientation: generate().base(store).pageOrientation,
+      pageMargins: {
+        left: generate().base(store).pageMargins[0],
+        top: generate().base(store).pageMargins[1],
+        right: generate().base(store).pageMargins[2],
+        bottom: generate().base(store).pageMargins[3],
+      },
+      info: {
+        title: store.state.project.name,
+        author: 'TODO',
+        subject: store.state.project.version,
+        keywords: '',
+      },
+      content: generate().content(store),
+      styles: {
+        'heading-three': generate().styles(store).headingThree(),
+        'heading-two': generate().styles(store).headingTwo(),
+        'heading-one': generate().styles(store).headingOne(),
+        paragraph: generate().styles(store).paragraph(),
+      },
+      pageBreakBefore: function (
+        currentNode: any,
+        followingNodesOnPage: any,
+        nodesOnNextPage: any,
+        previousNodesOnPage: any
+      ) {
+        //check if signature part is completely on the last page, add pagebreak if not
+        if (
+          currentNode.id === 'signature' &&
+          (currentNode.pageNumbers.length != 1 ||
+            currentNode.pageNumbers[0] != currentNode.pages)
+        ) {
+          return true
+        }
+        //check if last paragraph is entirely on a single page, add pagebreak if not
+        else if (
+          currentNode.id === 'closingParagraph' &&
+          currentNode.pageNumbers.length != 1
+        ) {
+          return true
+        }
+        return false
+      },
+    })
+
+    generator.getDataUrl((dataUrl: any) => {
+      const iframe = document.createElement('iframe')
+      iframe.src = dataUrl
+      iframe.style.width = '400px'
+      iframe.style.height = '500px'
+
+      let child = input.lastElementChild
+      while (child) {
+        input.removeChild(child)
+        child = input.lastElementChild
+      }
+
+      input.appendChild(iframe)
+
+      store.commit('absolute/load', false)
+    })
+  }
+
   const external = (store: Store<any>) => {
     const onGeneratePDF = async () => {
       if (useEnv().isEmptyProject(store.state.project.name)) return
 
       store.commit('absolute/load', true)
 
-      await nextTick
       usePDF()
         .create(store)
         .then(() => {
           store.commit('absolute/load', false)
         })
     }
 
-    return { onGeneratePDF }
+    const onPreviewPDF = async (input: HTMLElement) => {
+      if (useEnv().isEmptyProject(store.state.project.name)) return
+
+      store.commit('absolute/load', true)
+
+      usePDF().preview(store, input)
+    }
+
+    return { onGeneratePDF, onPreviewPDF }
   }
 
-  return { init, create, external }
+  return { init, create, external, preview }
 }

tailwind.config.js

@@ -62,6 +62,7 @@ module.exports = {
       }),
       zIndex: theme => ({
         "max": "9999",
+        "preview": "200",
         "aside": "100",
         "aside-open": "100"
       })