npm - @pdfme/ui - Versions diffs - 1.0.0-beta.1 - Mend

@pdfme/ui 1.0.0-beta.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (118) hide show

package/.eslintrc.js +45 -0
package/README.md +280 -0
package/declaration.d.ts +8 -0
package/dist/@pdfme/ui.js +3 -0
package/dist/@pdfme/ui.js.LICENSE.txt +95 -0
package/dist/@pdfme/ui.js.map +1 -0
package/dist/types/common/src/barcode.d.ts +2 -0
package/dist/types/common/src/constants.d.ts +6 -0
package/dist/types/common/src/helper.d.ts +15 -0
package/dist/types/common/src/index.d.ts +4 -0
package/dist/types/common/src/schema.d.ts +3613 -0
package/dist/types/common/src/type.d.ts +64 -0
package/dist/types/common/src/utils.d.ts +12 -0
package/dist/types/ui/src/Designer.d.ts +13 -0
package/dist/types/ui/src/Form.d.ts +13 -0
package/dist/types/ui/src/Viewer.d.ts +7 -0
package/dist/types/ui/src/class.d.ts +72 -0
package/dist/types/ui/src/components/Designer/Main/Guides.d.ts +9 -0
package/dist/types/ui/src/components/Designer/Main/Mask.d.ts +3 -0
package/dist/types/ui/src/components/Designer/Main/Moveable.d.ts +31 -0
package/dist/types/ui/src/components/Designer/Main/Selecto.d.ts +8 -0
package/dist/types/ui/src/components/Designer/Main/index.d.ts +24 -0
package/dist/types/ui/src/components/Designer/Sidebar/DetailView/ExampleInputEditor.d.ts +3 -0
package/dist/types/ui/src/components/Designer/Sidebar/DetailView/PositionAndSizeEditor.d.ts +3 -0
package/dist/types/ui/src/components/Designer/Sidebar/DetailView/TextPropEditor.d.ts +3 -0
package/dist/types/ui/src/components/Designer/Sidebar/DetailView/TypeAndKeyEditor.d.ts +3 -0
package/dist/types/ui/src/components/Designer/Sidebar/DetailView/index.d.ts +3 -0
package/dist/types/ui/src/components/Designer/Sidebar/ListView.d.ts +3 -0
package/dist/types/ui/src/components/Designer/Sidebar/index.d.ts +26 -0
package/dist/types/ui/src/components/Designer/index.d.ts +99 -0
package/dist/types/ui/src/components/Divider.d.ts +2 -0
package/dist/types/ui/src/components/Error.d.ts +7 -0
package/dist/types/ui/src/components/Paper.d.ts +19 -0
package/dist/types/ui/src/components/Preview/Pager/Page.d.ts +8 -0
package/dist/types/ui/src/components/Preview/Pager/Unit.d.ts +8 -0
package/dist/types/ui/src/components/Preview/index.d.ts +4 -0
package/dist/types/ui/src/components/Root.d.ts +9 -0
package/dist/types/ui/src/components/Schemas/BarcodeSchema.d.ts +15 -0
package/dist/types/ui/src/components/Schemas/ImageSchema.d.ts +15 -0
package/dist/types/ui/src/components/Schemas/SchemaUI.d.ts +14 -0
package/dist/types/ui/src/components/Schemas/TextSchema.d.ts +22 -0
package/dist/types/ui/src/components/Spinner.d.ts +2 -0
package/dist/types/ui/src/constants.d.ts +5 -0
package/dist/types/ui/src/contexts.d.ts +7 -0
package/dist/types/ui/src/helper.d.ts +91 -0
package/dist/types/ui/src/hooks.d.ts +26 -0
package/dist/types/ui/src/i18n.d.ts +30 -0
package/dist/types/ui/src/index.d.ts +5 -0
package/dist/types/ui/src/libs/class.d.ts +84 -0
package/dist/types/ui/src/libs/contexts.d.ts +7 -0
package/dist/types/ui/src/libs/helper.d.ts +64 -0
package/dist/types/ui/src/libs/hooks.d.ts +26 -0
package/dist/types/ui/src/libs/i18n.d.ts +30 -0
package/dist/types/ui/src/libs/ui.d.ts +64 -0
package/package.json +80 -0
package/public/Designer.html +90 -0
package/public/Form.html +74 -0
package/public/SauceHanSansJP.ttf +0 -0
package/public/SauceHanSerifJP.ttf +0 -0
package/public/Viewer.html +73 -0
package/public/helper.js +51 -0
package/public/index.html +54 -0
package/src/Designer.tsx +72 -0
package/src/Form.tsx +45 -0
package/src/Viewer.tsx +27 -0
package/src/assets/barcodeExamples/code128.png +0 -0
package/src/assets/barcodeExamples/code39.png +0 -0
package/src/assets/barcodeExamples/ean13.png +0 -0
package/src/assets/barcodeExamples/ean8.png +0 -0
package/src/assets/barcodeExamples/itf14.png +0 -0
package/src/assets/barcodeExamples/japanpost.png +0 -0
package/src/assets/barcodeExamples/nw7.png +0 -0
package/src/assets/barcodeExamples/qrcode.png +0 -0
package/src/assets/barcodeExamples/upca.png +0 -0
package/src/assets/barcodeExamples/upce.png +0 -0
package/src/assets/icons/back.svg +4 -0
package/src/assets/icons/double-left.svg +11 -0
package/src/assets/icons/double-right.svg +11 -0
package/src/assets/icons/drag.svg +3 -0
package/src/assets/icons/forward.svg +4 -0
package/src/assets/icons/left.svg +4 -0
package/src/assets/icons/right.svg +4 -0
package/src/assets/icons/warning.svg +4 -0
package/src/assets/imageExample.png +0 -0
package/src/class.ts +147 -0
package/src/components/Designer/Main/Guides.tsx +53 -0
package/src/components/Designer/Main/Mask.tsx +19 -0
package/src/components/Designer/Main/Moveable.tsx +79 -0
package/src/components/Designer/Main/Selecto.tsx +29 -0
package/src/components/Designer/Main/index.tsx +314 -0
package/src/components/Designer/Sidebar/DetailView/ExampleInputEditor.tsx +62 -0
package/src/components/Designer/Sidebar/DetailView/PositionAndSizeEditor.tsx +98 -0
package/src/components/Designer/Sidebar/DetailView/TextPropEditor.tsx +178 -0
package/src/components/Designer/Sidebar/DetailView/TypeAndKeyEditor.tsx +79 -0
package/src/components/Designer/Sidebar/DetailView/index.tsx +39 -0
package/src/components/Designer/Sidebar/ListView.tsx +180 -0
package/src/components/Designer/Sidebar/index.tsx +102 -0
package/src/components/Designer/index.tsx +283 -0
package/src/components/Divider.tsx +7 -0
package/src/components/Error.tsx +31 -0
package/src/components/Paper.tsx +77 -0
package/src/components/Preview/Pager/Page.tsx +85 -0
package/src/components/Preview/Pager/Unit.tsx +87 -0
package/src/components/Preview/index.tsx +102 -0
package/src/components/Root.tsx +52 -0
package/src/components/Schemas/BarcodeSchema.tsx +111 -0
package/src/components/Schemas/ImageSchema.tsx +81 -0
package/src/components/Schemas/SchemaUI.tsx +64 -0
package/src/components/Schemas/TextSchema.tsx +62 -0
package/src/components/Spinner.tsx +37 -0
package/src/constants.ts +9 -0
package/src/contexts.ts +8 -0
package/src/helper.ts +516 -0
package/src/hooks.ts +107 -0
package/src/i18n.ts +64 -0
package/src/index.ts +77 -0
package/tsconfig.json +21 -0
package/webpack.config.js +73 -0

package/public/Viewer.html ADDED Viewed

@@ -0,0 +1,73 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8" />
+    <title>Webpack App</title>
+    <meta name="viewport" content="width=device-width,initial-scale=1" />
+  </head>
+  <body style="margin: 0">
+    <div>
+      <a href="./">Back</a>
+      /
+      <button onclick="init()">init</button>
+      /
+      <button onclick="destroy()">destroy</button>
+      /
+      <button onclick="getInputs()">getInputs</button>
+      /
+      <button onclick="setInputs()">setInputs</button>
+      /
+      <button onclick="generate()">generate</button>
+    </div>
+    <div id="app"></div>
+    <script src="./helper.js"></script>
+    <script>
+      let viewer = null;
+      async function init() {
+        const font = await getFont();
+        viewer = new pdfme.Viewer({
+          domContainer,
+          template: getTemplate(),
+          inputs: [
+            { field1: 'bb', field2: 'aaaaaaaaaaaa' },
+            { field1: 'bb', field2: 'aaaaaaaaaaaa' },
+            { field1: 'bb', field2: 'aaaaaaaaaaaa' },
+          ],
+          options: {
+            font,
+          },
+        });
+      }
+      function destroy() {
+        viewer.destroy();
+      }
+      function getInputs() {
+        console.log(viewer.getInputs());
+      }
+      function setInputs() {
+        viewer.setInputs([{ field1: 'wwwww', field2: 'wwwww' }]);
+      }
+      async function generate() {
+        const font = await getFont();
+        pdfme
+          .generate({
+            inputs: viewer.getInputs(),
+            template: getTemplate(),
+            options: {
+              font,
+            },
+          })
+          .then((pdf) => {
+            const blob = new Blob([pdf.buffer], { type: 'application/pdf' });
+            window.open(URL.createObjectURL(blob));
+          });
+      }
+      window.onload = init;
+    </script>
+  </body>
+</html>

package/public/helper.js ADDED Viewed

@@ -0,0 +1,51 @@
+const size = { height: window.innerHeight, width: window.innerWidth };
+const domContainer = document.getElementById('app');
+const getSampleTemplate = () => ({
+  columns: ['field1', 'field2'],
+  sampledata: [
+    {
+      field1: 'bb',
+      field2: 'aaaaaaaaaaaa',
+    },
+  ],
+  basePdf: pdfme.blankPdf,
+  // basePdf: '/DeliveryNote.pdf',
+  schemas: [
+    {
+      field1: {
+        type: 'text',
+        position: { x: 20, y: 20 },
+        width: 100,
+        height: 15,
+        alignment: 'left',
+        fontSize: 30,
+        characterSpacing: 0,
+        lineHeight: 1,
+      },
+      field2: {
+        type: 'text',
+        position: { x: 20, y: 35 },
+        width: 100,
+        height: 40,
+        alignment: 'left',
+        fontSize: 20,
+        characterSpacing: 0,
+        lineHeight: 1,
+      },
+    },
+  ],
+});
+const getTemplate = () => {
+  return JSON.parse(localStorage.getItem('template')) || getSampleTemplate();
+};
+const getFont = async () => {
+  const SauceHanSansJP = await fetch('/SauceHanSansJP.ttf').then((res) => res.arrayBuffer());
+  const SauceHanSerifJP = await fetch('/SauceHanSerifJP.ttf').then((res) => res.arrayBuffer());
+  return {
+    'Noto Sans JP': { data: SauceHanSansJP, fallback: false },
+    'Noto Serif JP': { data: SauceHanSerifJP, fallback: true },
+  };
+};

package/public/index.html ADDED Viewed

@@ -0,0 +1,54 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8" />
+    <title>Webpack App</title>
+    <meta name="viewport" content="width=device-width,initial-scale=1" />
+  </head>
+  <body style="margin: 0">
+    <div>
+      <a href="./Designer.html">Designer</a>
+      /
+      <a href="./Form.html">Form</a>
+      /
+      <a href="./Viewer.html">Viewer</a>
+    </div>
+    <div>
+      <button onclick="fetchTemplates()">fetchTemplates</button>
+      /
+      <button onclick="setTemplate()">setTemplate</button>
+    </div>
+  </body>
+  <script>
+    function fetchTemplates() {
+      fetch('https://api.labelmake.jp/v1/templates?team=labelmake', {
+        method: 'GET',
+        headers: {
+          'X-Labelmake-API-Token': 'c02ee5a0-2590-11ec-bcde-1b4557d524f3',
+        },
+      })
+        .then((response) => response.json())
+        .then((json) => {
+          alert('saved');
+          localStorage.setItem('templates', JSON.stringify(json));
+        });
+    }
+    function setTemplate() {
+      const input = window.prompt('enter index');
+      const templates = JSON.parse(localStorage.getItem('templates'));
+      let template = null;
+      if (isNaN(input)) {
+        template = templates.find((t) => t.id === input);
+      } else {
+        template = templates[input];
+      }
+      if (!template) {
+        alert('invalid input');
+        return;
+      }
+      alert('set');
+      localStorage.setItem('template', JSON.stringify(template));
+    }
+  </script>
+</html>

package/src/Designer.tsx ADDED Viewed

@@ -0,0 +1,72 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import { Template, DesignerProps, checkDesignerProps } from '@pdfme/common';
+import { BaseUIClass } from './class';
+import { DESTROYED_ERR_MSG } from './constants';
+import { I18nContext, FontContext } from './contexts';
+import DesignerComponent from './components/Designer';
+class Designer extends BaseUIClass {
+  private onSaveTemplateCallback?: (template: Template) => void;
+  private onChangeTemplateCallback?: (template: Template) => void;
+  constructor(props: DesignerProps) {
+    super(props);
+    checkDesignerProps(props);
+    this.render();
+  }
+  public saveTemplate() {
+    if (!this.domContainer) throw Error(DESTROYED_ERR_MSG);
+    if (this.onSaveTemplateCallback) {
+      this.onSaveTemplateCallback(this.template);
+    }
+  }
+  public updateTemplate(template: Template) {
+    if (!this.domContainer) throw Error(DESTROYED_ERR_MSG);
+    this.template = template;
+    if (this.onChangeTemplateCallback) {
+      this.onChangeTemplateCallback(template);
+    }
+    this.render();
+  }
+  public onSaveTemplate(cb: (template: Template) => void) {
+    this.onSaveTemplateCallback = cb;
+  }
+  public onChangeTemplate(cb: (template: Template) => void) {
+    this.onChangeTemplateCallback = cb;
+  }
+  protected render() {
+    if (!this.domContainer) throw Error(DESTROYED_ERR_MSG);
+    ReactDOM.render(
+      <I18nContext.Provider value={this.getI18n()}>
+        <FontContext.Provider value={this.getFont()}>
+          <DesignerComponent
+            template={this.template}
+            onSaveTemplate={(template) => {
+              this.template = template;
+              if (this.onSaveTemplateCallback) {
+                this.onSaveTemplateCallback(template);
+              }
+            }}
+            onChangeTemplate={(template) => {
+              this.template = template;
+              if (this.onChangeTemplateCallback) {
+                this.onChangeTemplateCallback(template);
+              }
+            }}
+            size={this.size}
+          />
+        </FontContext.Provider>
+      </I18nContext.Provider>,
+      this.domContainer
+    );
+  }
+}
+export default Designer;

package/src/Form.tsx ADDED Viewed

@@ -0,0 +1,45 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import { PreviewProps } from '@pdfme/common';
+import { PreviewUI } from './class';
+import { DESTROYED_ERR_MSG } from './constants';
+import { I18nContext, FontContext } from './contexts';
+import Preview from './components/Preview';
+class Form extends PreviewUI {
+  private onChangeInputCallback?: (arg: { index: number; value: string; key: string }) => void;
+  constructor(props: PreviewProps) {
+    super(props);
+  }
+  public onChangeInput(cb: (arg: { index: number; value: string; key: string }) => void) {
+    this.onChangeInputCallback = cb;
+  }
+  protected render() {
+    if (!this.domContainer) throw Error(DESTROYED_ERR_MSG);
+    ReactDOM.render(
+      <I18nContext.Provider value={this.getI18n()}>
+        <FontContext.Provider value={this.getFont()}>
+          <Preview
+            template={this.template}
+            size={this.size}
+            inputs={this.inputs}
+            onChangeInput={(arg: { index: number; value: string; key: string }) => {
+              const { index, value, key } = arg;
+              if (this.onChangeInputCallback) {
+                this.onChangeInputCallback({ index, value, key });
+              }
+              this.inputs[index][key] = value;
+              this.render();
+            }}
+          />
+        </FontContext.Provider>
+      </I18nContext.Provider>,
+      this.domContainer
+    );
+  }
+}
+export default Form;

package/src/Viewer.tsx ADDED Viewed

@@ -0,0 +1,27 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import { PreviewProps } from '@pdfme/common';
+import { PreviewUI } from './class';
+import { DESTROYED_ERR_MSG } from './constants';
+import { I18nContext, FontContext } from './contexts';
+import Preview from './components/Preview';
+class Viewer extends PreviewUI {
+  constructor(props: PreviewProps) {
+    super(props);
+  }
+  protected render() {
+    if (!this.domContainer) throw Error(DESTROYED_ERR_MSG);
+    ReactDOM.render(
+      <I18nContext.Provider value={this.getI18n()}>
+        <FontContext.Provider value={this.getFont()}>
+          <Preview template={this.template} size={this.size} inputs={this.inputs} />
+        </FontContext.Provider>
+      </I18nContext.Provider>,
+      this.domContainer
+    );
+  }
+}
+export default Viewer;

package/src/assets/barcodeExamples/code128.png ADDED Viewed

Binary file

package/src/assets/barcodeExamples/code39.png ADDED Viewed

Binary file

package/src/assets/barcodeExamples/ean13.png ADDED Viewed

Binary file

package/src/assets/barcodeExamples/ean8.png ADDED Viewed

Binary file

package/src/assets/barcodeExamples/itf14.png ADDED Viewed

Binary file

package/src/assets/barcodeExamples/japanpost.png ADDED Viewed

Binary file

package/src/assets/barcodeExamples/nw7.png ADDED Viewed

Binary file

package/src/assets/barcodeExamples/qrcode.png ADDED Viewed

Binary file

package/src/assets/barcodeExamples/upca.png ADDED Viewed

Binary file

package/src/assets/barcodeExamples/upce.png ADDED Viewed

Binary file

package/src/assets/icons/back.svg ADDED Viewed

@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24">
+    <path d="M0 0h24v24H0z" fill="none" />
+    <path d="M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20v-2z" />
+</svg>

package/src/assets/icons/double-left.svg ADDED Viewed

@@ -0,0 +1,11 @@
+<svg xmlns="http://www.w3.org/2000/svg" enable-background="new 0 0 24 24" height="24px" viewBox="0 0 24 24" width="24px" fill="#ffffff">
+    <g>
+        <rect fill="none" height="24" width="24" />
+    </g>
+    <g>
+        <g>
+            <polygon points="17.59,18 19,16.59 14.42,12 19,7.41 17.59,6 11.59,12" />
+            <polygon points="11,18 12.41,16.59 7.83,12 12.41,7.41 11,6 5,12" />
+        </g>
+    </g>
+</svg>

package/src/assets/icons/double-right.svg ADDED Viewed

@@ -0,0 +1,11 @@
+<svg xmlns="http://www.w3.org/2000/svg" enable-background="new 0 0 24 24" height="24px" viewBox="0 0 24 24" width="24px" fill="#ffffff">
+    <g>
+        <rect fill="none" height="24" width="24" />
+    </g>
+    <g>
+        <g>
+            <polygon points="6.41,6 5,7.41 9.58,12 5,16.59 6.41,18 12.41,12" />
+            <polygon points="13,6 11.59,7.41 16.17,12 11.59,16.59 13,18 19,12" />
+        </g>
+    </g>
+</svg>

package/src/assets/icons/drag.svg ADDED Viewed

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" width="16" height="16">
+    <path d="M10 13a1 1 0 100-2 1 1 0 000 2zm-4 0a1 1 0 100-2 1 1 0 000 2zm1-5a1 1 0 11-2 0 1 1 0 012 0zm3 1a1 1 0 100-2 1 1 0 000 2zm1-5a1 1 0 11-2 0 1 1 0 012 0zM6 5a1 1 0 100-2 1 1 0 000 2z"></path>
+</svg>

package/src/assets/icons/forward.svg ADDED Viewed

@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24">
+    <path d="M0 0h24v24H0z" fill="none" />
+    <path d="M12 4l-1.41 1.41L16.17 11H4v2h12.17l-5.58 5.59L12 20l8-8z" />
+</svg>

package/src/assets/icons/left.svg ADDED Viewed

@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#ffffff">
+    <path d="M0 0h24v24H0V0z" fill="none" />
+    <path d="M15.41 16.59L10.83 12l4.58-4.59L14 6l-6 6 6 6 1.41-1.41z" />
+</svg>

package/src/assets/icons/right.svg ADDED Viewed

@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#ffffff">
+    <path d="M0 0h24v24H0V0z" fill="none" />
+    <path d="M8.59 16.59L13.17 12 8.59 7.41 10 6l6 6-6 6-1.41-1.41z" />
+</svg>

package/src/assets/icons/warning.svg ADDED Viewed

@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24">
+    <path d="M0 0h24v24H0z" fill="none" />
+    <path d="M1 21h22L12 2 1 21zm12-3h-2v-2h2v2zm0-4h-2v-4h2v4z" />
+</svg>

package/src/assets/imageExample.png ADDED Viewed

Binary file

package/src/class.ts ADDED Viewed

@@ -0,0 +1,147 @@
+import ReactDOM from 'react-dom';
+import { curriedI18n } from './i18n';
+import { DESTROYED_ERR_MSG, DEFAULT_LANG } from './constants';
+import { debounce, flatten } from './helper';
+import {
+  Template,
+  Size,
+  Lang,
+  Font,
+  UIProps,
+  PreviewProps,
+  getDefaultFont,
+  checkUIProps,
+  checkPreviewProps,
+} from '@pdfme/common';
+const generateColumnsAndSampledataIfNeeded = (template: Template) => {
+  const { schemas, columns, sampledata } = template;
+  const flatSchemaLength = schemas
+    .map((schema) => Object.keys(schema).length)
+    .reduce((acc, cur) => acc + cur, 0);
+  const neetColumns = !columns || flatSchemaLength !== columns.length;
+  const needSampledata = !sampledata || flatSchemaLength !== Object.keys(sampledata[0]).length;
+  // columns
+  if (neetColumns) {
+    template.columns = flatten(schemas.map((schema) => Object.keys(schema)));
+  }
+  // sampledata
+  if (needSampledata) {
+    template.sampledata = [
+      schemas.reduce(
+        (acc, cur) =>
+          Object.assign(
+            acc,
+            Object.keys(cur).reduce(
+              (a, c) => Object.assign(a, { [c]: '' }),
+              {} as { [key: string]: string }
+            )
+          ),
+        {} as { [key: string]: string }
+      ),
+    ];
+  }
+  return template;
+};
+export abstract class BaseUIClass {
+  protected domContainer!: HTMLElement | null;
+  protected template!: Template;
+  protected size!: Size;
+  private readonly lang: Lang = DEFAULT_LANG;
+  private readonly font: Font = getDefaultFont();
+  private readonly setSize = debounce(() => {
+    if (!this.domContainer) throw Error(DESTROYED_ERR_MSG);
+    this.size = {
+      height: this.domContainer.clientHeight || window.innerHeight,
+      width: this.domContainer.clientWidth || window.innerWidth,
+    };
+    this.render();
+  }, 100);
+  constructor(props: UIProps) {
+    checkUIProps(props);
+    const { domContainer, template, options } = props;
+    const { lang, font } = options || {};
+    this.domContainer = domContainer;
+    this.template = generateColumnsAndSampledataIfNeeded(template);
+    this.size = {
+      height: this.domContainer.clientHeight || window.innerHeight,
+      width: this.domContainer.clientWidth || window.innerWidth,
+    };
+    window.addEventListener('resize', this.setSize);
+    if (lang) {
+      this.lang = lang;
+    }
+    if (font) {
+      this.font = font;
+    }
+  }
+  protected getI18n() {
+    return curriedI18n(this.lang);
+  }
+  protected getFont() {
+    return this.font;
+  }
+  public getTemplate() {
+    if (!this.domContainer) throw Error(DESTROYED_ERR_MSG);
+    return this.template;
+  }
+  public updateTemplate(template: Template) {
+    if (!this.domContainer) throw Error(DESTROYED_ERR_MSG);
+    this.template = template;
+    this.render();
+  }
+  public destroy() {
+    if (!this.domContainer) throw Error(DESTROYED_ERR_MSG);
+    ReactDOM.unmountComponentAtNode(this.domContainer);
+    this.domContainer = null;
+    window.removeEventListener('resize', this.setSize);
+  }
+  protected abstract render(): void;
+}
+export abstract class PreviewUI extends BaseUIClass {
+  protected inputs!: { [key: string]: string }[];
+  constructor(props: PreviewProps) {
+    super(props);
+    checkPreviewProps(props);
+    this.inputs = props.inputs;
+    this.render();
+  }
+  public getInputs() {
+    if (!this.domContainer) throw Error(DESTROYED_ERR_MSG);
+    return this.inputs;
+  }
+  public setInputs(inputs: { [key: string]: string }[]) {
+    if (!this.domContainer) throw Error(DESTROYED_ERR_MSG);
+    this.inputs = inputs;
+    this.render();
+  }
+  protected abstract render(): void;
+}

package/src/components/Designer/Main/Guides.tsx ADDED Viewed

@@ -0,0 +1,53 @@
+import React, { Ref } from 'react';
+import Guides from '@scena/react-guides';
+import { Size } from '@pdfme/common';
+import { ZOOM, RULER_HEIGHT } from '../../../constants';
+const _Guides = ({
+  paperSize,
+  horizontalRef,
+  verticalRef,
+}: {
+  paperSize: Size;
+  horizontalRef: Ref<Guides> | undefined;
+  verticalRef: Ref<Guides> | undefined;
+}) => (
+  <>
+    <div
+      style={{
+        width: RULER_HEIGHT,
+        height: RULER_HEIGHT,
+        position: 'absolute',
+        top: -RULER_HEIGHT,
+        left: -RULER_HEIGHT,
+        background: '#333',
+      }}
+    ></div>
+    <Guides
+      zoom={ZOOM}
+      style={{
+        position: 'absolute',
+        top: -RULER_HEIGHT,
+        left: 0,
+        height: RULER_HEIGHT,
+        width: paperSize.width,
+      }}
+      type="horizontal"
+      ref={horizontalRef}
+    />
+    <Guides
+      zoom={ZOOM}
+      style={{
+        position: 'absolute',
+        top: 0,
+        left: -RULER_HEIGHT,
+        height: paperSize.height,
+        width: RULER_HEIGHT,
+      }}
+      type="vertical"
+      ref={verticalRef}
+    />
+  </>
+);
+export default _Guides;

package/src/components/Designer/Main/Mask.tsx ADDED Viewed

@@ -0,0 +1,19 @@
+import React from 'react';
+import { Size } from '@pdfme/common';
+import { RULER_HEIGHT } from '../../../constants';
+const Mask = ({ width, height }: Size) => (
+  <div
+    style={{
+      position: 'absolute',
+      top: -RULER_HEIGHT,
+      left: -RULER_HEIGHT,
+      zIndex: 100,
+      background: 'rgba(158, 158, 158, 0.58)',
+      width,
+      height,
+    }}
+  />
+);
+export default Mask;