feat: update display to use set size

src/pages/PrintView/PrintView.vue

@@ -38,6 +38,8 @@
           :template="printProps.template"
           :values="printProps.values"
           :scale="scale"
+          :width="templateDoc?.width"
+          :height="templateDoc?.height"
         />
       </div>
     </div>

src/pages/TemplateBuilder/PrintContainer.vue

@@ -1,6 +1,8 @@
 <template>
   <ScaledContainer
     :scale="Math.max(scale, 0.1)"
+    :width="width"
+    :height="height"
     ref="scaledContainer"
     class="mx-auto shadow-lg border"
   >
@@ -52,7 +54,6 @@ import { getPathAndMakePDF } from 'src/utils/printTemplates';
 import { PrintValues } from 'src/utils/types';
 import { defineComponent, PropType } from 'vue';
 import ScaledContainer from './ScaledContainer.vue';
-import { VueElement } from 'vue';
 
 export const baseSafeTemplate = `<main class="h-full w-full bg-white">
   <p class="p-4 text-red-500">
@@ -70,6 +71,8 @@ export default defineComponent({
   props: {
     template: { type: String, required: true },
     scale: { type: Number, default: 0.65 },
+    width: { type: Number, default: 21 },
+    height: { type: Number, default: 29.7 },
     values: {
       type: Object as PropType<PrintValues>,
       required: true,

src/pages/TemplateBuilder/ScaledContainer.vue

@@ -18,20 +18,20 @@ import { defineComponent } from 'vue';
 
 export default defineComponent({
   props: {
-    height: { type: String, default: '29.7cm' },
-    width: { type: String, default: '21cm' },
+    height: { type: Number, default: 29.7 },
+    width: { type: Number, default: 21 },
     scale: { type: Number, default: 0.65 },
   },
   computed: {
     innerContainerStyle(): Record<string, string> {
       const style: Record<string, string> = {};
-      style['width'] = this.width;
-      style['height'] = this.height;
+      style['width'] = this.width + 'cm';
+      style['height'] = this.height + 'cm';
       style['transform'] = `scale(${this.scale})`;
-      style['margin-top'] = `calc(-1 * (${this.height} * ${
+      style['margin-top'] = `calc(-1 * (${this.height}cm * ${
         1 - this.scale
       }) / 2)`;
-      style['margin-left'] = `calc(-1 * (${this.width} * ${
+      style['margin-left'] = `calc(-1 * (${this.width}cm * ${
         1 - this.scale
       }) / 2)`;
 
@@ -39,8 +39,8 @@ export default defineComponent({
     },
     outerContainerStyle(): Record<string, string> {
       const style: Record<string, string> = {};
-      style['height'] = `calc(${this.scale} * ${this.height})`;
-      style['width'] = `calc(${this.scale} * ${this.width})`;
+      style['height'] = `calc(${this.scale} * ${this.height}cm)`;
+      style['width'] = `calc(${this.scale} * ${this.width}cm)`;
 
       return style;
     },

src/pages/TemplateBuilder/SetPrintSize.vue

@@ -213,6 +213,19 @@ export default defineComponent({
     return { size: 'A4', width: 21, height: 29.7 };
   },
   components: { Float, FormHeader, Select, Button },
+  mounted() {
+    this.width = this.doc.width ?? 21;
+    this.height = this.doc.height ?? 29.7;
+
+    this.size = '';
+    Object.entries(paperSizeMap).forEach(([name, { width, height }]) => {
+      if (this.width === width && this.height === height) {
+        this.size = name;
+      }
+    });
+
+    this.size ||= 'Custom';
+  },
   methods: {
     sizeChange(v: string) {
       const size = paperSizeMap[v as SizeName];

src/pages/TemplateBuilder/TemplateBuilder.vue

@@ -49,6 +49,8 @@
             :template="doc.template!"
             :values="values!"
             :scale="scale"
+            :height="doc.height"
+            :width="doc.width"
           />
         </div>