feat(pdf): line-break command settings

Novout · Jan 19, 2022 · 9defd85 · 9defd85
1 parent 9170efe
commit 9defd85
Show file tree

Hide file tree

Showing 7 changed files with 158 additions and 3 deletions.
diff --git a/packages/better-write-app/src/components/editor/pdf/PDFConfiguration.vue b/packages/better-write-app/src/components/editor/pdf/PDFConfiguration.vue
@@ -14,5 +14,6 @@
     <PDFConfigurationSetHeadingOne />
     <PDFConfigurationSetHeadingTwo />
     <PDFConfigurationSetHeadingThree />
+    <PDFConfigurationSetLineBreak />
   </div>
 </template>
diff --git a/packages/better-write-app/src/components/editor/pdf/set/PDFConfigurationSetLineBreak.vue b/packages/better-write-app/src/components/editor/pdf/set/PDFConfigurationSetLineBreak.vue
@@ -0,0 +1,74 @@
+<template>
+  <PDFConfigurationSlot>
+    <template #title>
+      <section class="flex gap-2">
+        <h2 class="text-2xl ml-2 font-bold font-poppins">
+          {{ t('editor.pdf.custom.generics.lineBreak') }}
+        </h2>
+      </section>
+    </template>
+    <div
+      class="flex flex-row flex-wrap justify-start items-center my-3 overflow-x-hidden gap-5"
+    >
+      <div class="wb-input-container">
+        <label class="mx-2 text-xs">{{
+          t('editor.pdf.lineBreak.spacing')
+        }}</label>
+        <InputNumber v-model="pdf.lineBreak.spacing" />
+      </div>
+      <div class="wb-input-container">
+        <label class="mx-2 text-xs">{{
+          t('editor.pdf.lineBreak.active')
+        }}</label>
+        <InputBoolean v-model="pdf.lineBreak.image.active" />
+      </div>
+      <div
+        :class="[!pdf.lineBreak.image.active ? 'wb-disabled' : '']"
+        class="wb-input-container"
+      >
+        <label class="mx-2 text-xs">{{ t('editor.pdf.cover.type') }}</label>
+        <InputFile
+          id="main-background"
+          :title="t('generics.input.image')"
+          :src="pdf.lineBreak.image.data"
+          @load="onMainImageLoad"
+          @exclude="onDeleteMainImage"
+        />
+      </div>
+      <div
+        :class="[!pdf.lineBreak.image.active ? 'wb-disabled' : '']"
+        class="wb-input-container"
+      >
+        <label class="mx-2 text-xs">{{ t('editor.pdf.lineBreak.size') }}</label>
+        <section>
+          <label>{{ t('editor.pdf.custom.image.width') }}</label>
+          <InputNumber v-model="pdf.lineBreak.image.width" :step="25" />
+        </section>
+        <section>
+          <label>{{ t('editor.pdf.custom.image.height') }}</label>
+          <InputNumber v-model="pdf.lineBreak.image.height" :step="25" />
+        </section>
+      </div>
+    </div>
+  </PDFConfigurationSlot>
+</template>
+
+<script setup lang="ts">
+  import { usePDFStore } from '@/store/pdf'
+  import { computed } from 'vue'
+  import { useI18n } from 'vue-i18n'
+
+  const PDF = usePDFStore()
+
+  const { t } = useI18n()
+
+  const pdf = computed(() => PDF.styles)
+
+  const onMainImageLoad = (e: any) => {
+    PDF.styles.lineBreak.image.data = e
+  }
+
+  const onDeleteMainImage = () => {
+    PDF.styles.lineBreak.image.data = ''
+  }
+</script>
diff --git a/packages/better-write-app/src/use/populate.ts b/packages/better-write-app/src/use/populate.ts
@@ -249,6 +249,15 @@ export const usePopulate = () => {
             bottom: 15 as number,
           },
         },
+        lineBreak: {
+          spacing: 10,
+          image: {
+            data: '',
+            active: false,
+            width: 50,
+            height: 50,
+          },
+        },
         switcher: {
           cover: false,
           main: false,

diff --git a/packages/better-write-app/src/use/storage/storage.ts b/packages/better-write-app/src/use/storage/storage.ts
@@ -310,6 +310,18 @@ export const useStorage = () => {
       })
     })
 
+    if (!_.pdf.styles.lineBreak) {
+      _.pdf.styles.lineBreak = {
+        spacing: 10,
+        image: {
+          data: '',
+          active: false,
+          width: 50,
+          height: 50,
+        },
+      }
+    }
+
     return _
   }
 

diff --git a/packages/better-write-plugin-pdf/src/externals.ts b/packages/better-write-plugin-pdf/src/externals.ts
@@ -86,6 +86,11 @@ export const setPDFI18n = () => {
           fontFamily: 'Fonte',
         },
       },
+      lineBreak: {
+        spacing: 'Espaçamento',
+        active: 'Usar Imagem',
+        size: 'Tamanho',
+      },
       custom: {
         image: {
           height: 'Altura',
@@ -115,6 +120,7 @@ export const setPDFI18n = () => {
           decorationStyle: 'Estilo da Decoração',
           decorationColor: 'Cor da Decoração',
           breakPage: 'Quebra de Página',
+          lineBreak: 'Quebra de Linha',
         },
         save: 'Salvar',
       },
@@ -234,6 +240,11 @@ export const setPDFI18n = () => {
           fontFamily: 'Fonte',
         },
       },
+      lineBreak: {
+        spacing: 'Spacing',
+        active: 'Use Image',
+        size: 'Size',
+      },
       custom: {
         image: {
           height: 'Height',
@@ -263,6 +274,7 @@ export const setPDFI18n = () => {
           decorationStyle: 'Decoration Style',
           decorationColor: 'Decoration Color',
           breakPage: 'Break Page',
+          lineBreak: 'Line Break',
         },
         save: 'Save',
       },

diff --git a/packages/better-write-plugin-pdf/src/generate.ts b/packages/better-write-plugin-pdf/src/generate.ts
@@ -207,10 +207,44 @@ export const PluginPDFSet = (
       }
     }
 
-    const lineBreak = (value = 10) => {
+    const lineBreak = (fixed: boolean = true) => {
+      if (
+        stores.PDF.styles.lineBreak.image.data &&
+        stores.PDF.styles.lineBreak.image.active &&
+        fixed
+      ) {
+        if (stores.PDF.styles.lineBreak.image.data.startsWith('<svg')) {
+          return {
+            svg: stores.PDF.styles.lineBreak.image.data,
+            width: stores.PDF.styles.lineBreak.image.width,
+            height: stores.PDF.styles.lineBreak.image.height,
+            alignment: 'center',
+            margin: [
+              0,
+              stores.PDF.styles.lineBreak.spacing,
+              0,
+              stores.PDF.styles.lineBreak.spacing,
+            ],
+          }
+        }
+
+        return {
+          image: stores.PDF.styles.lineBreak.image.data,
+          width: stores.PDF.styles.lineBreak.image.width,
+          height: stores.PDF.styles.lineBreak.image.height,
+          alignment: 'center',
+          margin: [
+            0,
+            stores.PDF.styles.lineBreak.spacing,
+            0,
+            stores.PDF.styles.lineBreak.spacing,
+          ],
+        }
+      }
+
       return {
         text: '',
-        margin: [0, value],
+        margin: [0, stores.PDF.styles.lineBreak.spacing],
         style: 'line-break',
       }
     }
@@ -403,7 +437,7 @@ export const PluginPDFSet = (
           let _raw = {}
 
           if (entity.raw === hooks.env.emptyLine()) {
-            _raw = lineBreak(5)
+            _raw = lineBreak(false)
             arr.push(_raw)
             return
           }

diff --git a/packages/better-write-types/src/types/pdf.ts b/packages/better-write-types/src/types/pdf.ts
@@ -4,6 +4,7 @@ export interface PDFStateStyles {
   headingOne: PDFStateStylesHeading
   headingTwo: PDFStateStylesHeading
   headingThree: PDFStateStylesHeading
+  lineBreak: PDFStateStylesLineBreak
   switcher: PDFStateStylesSwitcher
 }
 
@@ -93,6 +94,18 @@ export interface PDFStateStylesHeading {
   }
 }
 
+export interface PDFStateStylesLineBreakImage {
+  data: string
+  active: boolean
+  width: number
+  height: number
+}
+
+export interface PDFStateStylesLineBreak {
+  spacing: number
+  image: PDFStateStylesLineBreakImage
+}
+
 export interface PDFStateStylesSwitcher {
   cover: boolean
   main: boolean