@verdocs/web-sdk 1.0.25 → 1.1.0

package/dist/collection/components/embeds/verdocs-view/verdocs-view.js

@@ -0,0 +1,297 @@
+import pdf from 'pdfjs-dist';
+import { VerbosityLevel, version as PDFJSversion } from 'pdfjs-dist';
+import { Component, h, Element, Event, Prop, Watch, State } from '@stencil/core';
+import { integerSequence } from '../../../utils/utils';
+const CANVAS_MARGIN = 15;
+const PDF_WORKER_URL = `https://cdnjs.cloudflare.com/ajax/libs/pdf.js/${PDFJSversion}/pdf.worker.min.js`;
+const CMAPS_URL = `https://unpkg.com/pdfjs-dist@${PDFJSversion}/cmaps/`;
+// https://unpkg.com/pdfjs-dist@2.0.550/cmaps/78-EUC-H.bcmap
+console.log('[VIEW] Loading PDF-JS', { PDF_WORKER_URL, CMAPS_URL });
+// pdf.GlobalWorkerOptions.workerSrc = 'https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.6.347/pdf.worker.min.js';
+pdf.GlobalWorkerOptions.workerSrc = PDF_WORKER_URL;
+export class VerdocsView {
+  constructor() {
+    this.numPages = 1;
+    this.fingerprint = null;
+    /**
+     * Rotate the PDF in degrees
+     */
+    this.rotation = 0;
+    /**
+     * Access token to use. This component is a wrapper for PDF.js which does not use a VerdocsEndpoint, so the token must be supplied
+     * directly.
+     */
+    this.token = null;
+    this.loadProgress = 0;
+    this.pagesRendered = [];
+  }
+  /**
+   * Listen for changes to src
+   */
+  doSrc(newValue, oldValue) {
+    if (newValue === oldValue) {
+      return;
+    }
+    this.loadAndRender(newValue);
+  }
+  isRotated(rotation) {
+    return rotation !== 0 && rotation % 180 !== 0;
+  }
+  async renderPages() {
+    const pageNumbersToRender = integerSequence(1, this.numPages);
+    for await (let pageNumber of pageNumbersToRender) {
+      const index = pageNumber - 1;
+      console.log('[VIEW] Rendering page', pageNumber);
+      const page = await this.pdfDocument.getPage(pageNumber);
+      const [pageX0, pageY0, pageX1, pageY1] = page.view;
+      const rotation = page.rotate;
+      const viewport = page.getViewport({ scale: 1 / 0.75 });
+      // const viewport = page.getViewport({scale: 1.5});
+      const canvas = document.createElement('canvas');
+      const canvasContext = canvas.getContext('2d');
+      canvas.height = viewport.height;
+      canvas.width = viewport.width;
+      await page.render({ canvasContext, viewport });
+      this.pdfContainer.appendChild(canvas);
+      const canvasWidth = canvas.width;
+      const canvasHeight = canvas.height;
+      const pageWidth = pageX1 - pageX0;
+      const pageHeight = pageY1 - pageY0;
+      this.pagesRendered.sort((a, b) => a.pageNumber - b.pageNumber);
+      const previousSibling = this.pagesRendered.filter(page => page.pageNumber < pageNumber).pop();
+      const canvasTop = ((previousSibling === null || previousSibling === void 0 ? void 0 : previousSibling.canvasBottom) || 0) + CANVAS_MARGIN;
+      const pageDetails = {
+        pageNumber,
+        width: canvasWidth,
+        height: canvasHeight,
+        originalWidth: this.isRotated(rotation) ? pageHeight : pageWidth,
+        originalHeight: this.isRotated(rotation) ? pageWidth : pageHeight,
+        xRatio: canvasWidth / pageWidth,
+        yRatio: canvasHeight / pageHeight,
+        canvasTop: canvasTop,
+        canvasLeft: CANVAS_MARGIN,
+        canvasRight: CANVAS_MARGIN + canvasWidth,
+        canvasBottom: canvasTop + canvasHeight,
+      };
+      if (this.pagesRendered[index]) {
+        this.pagesRendered[index] = pageDetails;
+      }
+      else {
+        this.pagesRendered.push(pageDetails);
+      }
+      const eventData = { pages: this.pagesRendered, numPages: this.numPages, numRendered: this.pagesRendered.length, canvasContainer: this.pdfContainer };
+      this.pageRendered.emit(eventData);
+      if (pageNumber >= this.numPages) {
+        console.log('[VIEW] Done rendering');
+        this.pagesRendered.sort((a, b) => a.pageNumber - b.pageNumber);
+        this.documentRendered.emit(eventData);
+      }
+    }
+  }
+  componentDidLoad() {
+    this.pdfContainer = document.getElementById('verdocs-pdf-viewer-container');
+    if (this.source) {
+      this.loadAndRender(this.source);
+    }
+  }
+  onProgress(progress) {
+    this.loadProgress = Math.floor((100 * progress.loaded) / progress.total);
+  }
+  loadAndRender(src) {
+    console.log('[VIEW] Loading', src);
+    const httpHeaders = this.token ? { Authorization: `Bearer ${this.token}` } : {};
+    const source = {
+      url: src,
+      withCredentials: true,
+      cMapUrl: CMAPS_URL,
+      cMapPacked: true,
+      verbosity: VerbosityLevel.WARNINGS,
+      httpHeaders,
+    };
+    // @ts-ignore
+    const loadingTask = pdf.getDocument(source, null, null, this.onProgress);
+    loadingTask.onProgress = this.onProgress;
+    loadingTask.promise.then((pdfDocument) => {
+      this.loadProgress = 100;
+      this.numPages = pdfDocument.numPages;
+      this.fingerprint = pdfDocument.fingerprints[0];
+      console.log(`[VIEW] Got PDF document fingerprint "${this.fingerprint}, ${this.numPages} pages`, pdfDocument);
+      this.pdfDocument = pdfDocument;
+      this.renderPages().catch(e => console.log('Rendering error', e));
+    });
+  }
+  render() {
+    return (h("div", { class: "container" },
+      this.loadProgress < 100 ? h("verdocs-loader", null) : h("div", { style: { display: 'none' } }),
+      h("div", { id: "verdocs-pdf-viewer-container" })));
+  }
+  static get is() { return "verdocs-view"; }
+  static get originalStyleUrls() { return {
+    "$": ["verdocs-view.scss"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["verdocs-view.css"]
+  }; }
+  static get properties() { return {
+    "rotation": {
+      "type": "number",
+      "mutable": false,
+      "complexType": {
+        "original": "0 | 90 | 180 | 270",
+        "resolved": "0 | 180 | 270 | 90",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Rotate the PDF in degrees"
+      },
+      "attribute": "rotation",
+      "reflect": false,
+      "defaultValue": "0"
+    },
+    "source": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Src of the PDF to load and render"
+      },
+      "attribute": "source",
+      "reflect": false
+    },
+    "token": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string | null",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Access token to use. This component is a wrapper for PDF.js which does not use a VerdocsEndpoint, so the token must be supplied\ndirectly."
+      },
+      "attribute": "token",
+      "reflect": false,
+      "defaultValue": "null"
+    }
+  }; }
+  static get states() { return {
+    "loadProgress": {}
+  }; }
+  static get events() { return [{
+      "method": "pageRendered",
+      "name": "pageRendered",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": "Fired when a page has been rendered"
+      },
+      "complexType": {
+        "original": "IPDFRenderEvent",
+        "resolved": "IPDFRenderEvent",
+        "references": {
+          "IPDFRenderEvent": {
+            "location": "local"
+          }
+        }
+      }
+    }, {
+      "method": "pageLoaded",
+      "name": "pageLoaded",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": "Fired when a page has been changed"
+      },
+      "complexType": {
+        "original": "number",
+        "resolved": "number",
+        "references": {}
+      }
+    }, {
+      "method": "pageChange",
+      "name": "pageChange",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": "Fired when a page has been changed"
+      },
+      "complexType": {
+        "original": "number",
+        "resolved": "number",
+        "references": {}
+      }
+    }, {
+      "method": "pageInit",
+      "name": "pageInit",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": "Fired when a page has been initialized"
+      },
+      "complexType": {
+        "original": "number",
+        "resolved": "number",
+        "references": {}
+      }
+    }, {
+      "method": "scaleChange",
+      "name": "scaleChange",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": "Fired when a page has been scaled"
+      },
+      "complexType": {
+        "original": "number",
+        "resolved": "number",
+        "references": {}
+      }
+    }, {
+      "method": "documentRendered",
+      "name": "documentRendered",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": "Fired when the document has completed rendered. The event will include the rendered page count."
+      },
+      "complexType": {
+        "original": "IPDFRenderEvent",
+        "resolved": "IPDFRenderEvent",
+        "references": {
+          "IPDFRenderEvent": {
+            "location": "local"
+          }
+        }
+      }
+    }]; }
+  static get elementRef() { return "component"; }
+  static get watchers() { return [{
+      "propName": "source",
+      "methodName": "doSrc"
+    }]; }
+}

package/dist/collection/components/embeds/verdocs-view/verdocs-view.stories.js

@@ -0,0 +1,21 @@
+import { html } from 'lit-html';
+// import {action} from '@storybook/addon-actions';
+// const templateId = "c3fc6310-bf9d-47a1-b0ad-daf2bbf657c2";
+// const documentId = "ed117472-4d4e-4c62-9386-af047a3373a2";
+// const pdfurl = `https://api.verdocs.com/templates/${templateId}/documents/${documentId}?file=true`;
+const source = '/i-9-paper-version.pdf';
+export default {
+  title: 'Embeds/View',
+  component: 'verdocs-view',
+  args: {
+    source,
+  },
+  argTypes: {},
+};
+// const listener = {
+//   handleEvent(e) {
+//     action('selected', e);
+//   },
+//   capture: true,
+// };
+export const View = ({ source }) => html `<verdocs-view .source=${source} />`;

package/dist/custom-elements/index.d.ts

@@ -2,42 +2,12 @@
 
 import type { Components, JSX } from "../types/components";
 
-interface DocumentStatusIndicator extends Components.DocumentStatusIndicator, HTMLElement {}
-export const DocumentStatusIndicator: {
-  prototype: DocumentStatusIndicator;
-  new (): DocumentStatusIndicator;
-};
-
-interface DropdownMenu extends Components.DropdownMenu, HTMLElement {}
-export const DropdownMenu: {
-  prototype: DropdownMenu;
-  new (): DropdownMenu;
-};
-
-interface OrgPopup extends Components.OrgPopup, HTMLElement {}
-export const OrgPopup: {
-  prototype: OrgPopup;
-  new (): OrgPopup;
-};
-
-interface PdfViewer extends Components.PdfViewer, HTMLElement {}
-export const PdfViewer: {
-  prototype: PdfViewer;
-  new (): PdfViewer;
-};
-
 interface SearchBox extends Components.SearchBox, HTMLElement {}
 export const SearchBox: {
   prototype: SearchBox;
   new (): SearchBox;
 };
 
-interface SearchEmbed extends Components.SearchEmbed, HTMLElement {}
-export const SearchEmbed: {
-  prototype: SearchEmbed;
-  new (): SearchEmbed;
-};
-
 interface SearchQuickFunctions extends Components.SearchQuickFunctions, HTMLElement {}
 export const SearchQuickFunctions: {
   prototype: SearchQuickFunctions;
@@ -68,22 +38,166 @@ export const SearchTabs: {
   new (): SearchTabs;
 };
 
-interface TagsIndicator extends Components.TagsIndicator, HTMLElement {}
-export const TagsIndicator: {
-  prototype: TagsIndicator;
-  new (): TagsIndicator;
+interface VerdocsAuth extends Components.VerdocsAuth, HTMLElement {}
+export const VerdocsAuth: {
+  prototype: VerdocsAuth;
+  new (): VerdocsAuth;
+};
+
+interface VerdocsButton extends Components.VerdocsButton, HTMLElement {}
+export const VerdocsButton: {
+  prototype: VerdocsButton;
+  new (): VerdocsButton;
+};
+
+interface VerdocsDocumentStatus extends Components.VerdocsDocumentStatus, HTMLElement {}
+export const VerdocsDocumentStatus: {
+  prototype: VerdocsDocumentStatus;
+  new (): VerdocsDocumentStatus;
+};
+
+interface VerdocsDropdown extends Components.VerdocsDropdown, HTMLElement {}
+export const VerdocsDropdown: {
+  prototype: VerdocsDropdown;
+  new (): VerdocsDropdown;
+};
+
+interface VerdocsFieldAttachment extends Components.VerdocsFieldAttachment, HTMLElement {}
+export const VerdocsFieldAttachment: {
+  prototype: VerdocsFieldAttachment;
+  new (): VerdocsFieldAttachment;
+};
+
+interface VerdocsFieldCheckbox extends Components.VerdocsFieldCheckbox, HTMLElement {}
+export const VerdocsFieldCheckbox: {
+  prototype: VerdocsFieldCheckbox;
+  new (): VerdocsFieldCheckbox;
+};
+
+interface VerdocsFieldDate extends Components.VerdocsFieldDate, HTMLElement {}
+export const VerdocsFieldDate: {
+  prototype: VerdocsFieldDate;
+  new (): VerdocsFieldDate;
+};
+
+interface VerdocsFieldDropdown extends Components.VerdocsFieldDropdown, HTMLElement {}
+export const VerdocsFieldDropdown: {
+  prototype: VerdocsFieldDropdown;
+  new (): VerdocsFieldDropdown;
+};
+
+interface VerdocsFieldInitial extends Components.VerdocsFieldInitial, HTMLElement {}
+export const VerdocsFieldInitial: {
+  prototype: VerdocsFieldInitial;
+  new (): VerdocsFieldInitial;
+};
+
+interface VerdocsFieldPayment extends Components.VerdocsFieldPayment, HTMLElement {}
+export const VerdocsFieldPayment: {
+  prototype: VerdocsFieldPayment;
+  new (): VerdocsFieldPayment;
+};
+
+interface VerdocsFieldRadioButton extends Components.VerdocsFieldRadioButton, HTMLElement {}
+export const VerdocsFieldRadioButton: {
+  prototype: VerdocsFieldRadioButton;
+  new (): VerdocsFieldRadioButton;
+};
+
+interface VerdocsFieldSignature extends Components.VerdocsFieldSignature, HTMLElement {}
+export const VerdocsFieldSignature: {
+  prototype: VerdocsFieldSignature;
+  new (): VerdocsFieldSignature;
+};
+
+interface VerdocsFieldTextarea extends Components.VerdocsFieldTextarea, HTMLElement {}
+export const VerdocsFieldTextarea: {
+  prototype: VerdocsFieldTextarea;
+  new (): VerdocsFieldTextarea;
+};
+
+interface VerdocsFieldTextbox extends Components.VerdocsFieldTextbox, HTMLElement {}
+export const VerdocsFieldTextbox: {
+  prototype: VerdocsFieldTextbox;
+  new (): VerdocsFieldTextbox;
+};
+
+interface VerdocsInitialDialog extends Components.VerdocsInitialDialog, HTMLElement {}
+export const VerdocsInitialDialog: {
+  prototype: VerdocsInitialDialog;
+  new (): VerdocsInitialDialog;
+};
+
+interface VerdocsLoader extends Components.VerdocsLoader, HTMLElement {}
+export const VerdocsLoader: {
+  prototype: VerdocsLoader;
+  new (): VerdocsLoader;
+};
+
+interface VerdocsOkDialog extends Components.VerdocsOkDialog, HTMLElement {}
+export const VerdocsOkDialog: {
+  prototype: VerdocsOkDialog;
+  new (): VerdocsOkDialog;
+};
+
+interface VerdocsOrganizationCard extends Components.VerdocsOrganizationCard, HTMLElement {}
+export const VerdocsOrganizationCard: {
+  prototype: VerdocsOrganizationCard;
+  new (): VerdocsOrganizationCard;
+};
+
+interface VerdocsSearch extends Components.VerdocsSearch, HTMLElement {}
+export const VerdocsSearch: {
+  prototype: VerdocsSearch;
+  new (): VerdocsSearch;
+};
+
+interface VerdocsSign extends Components.VerdocsSign, HTMLElement {}
+export const VerdocsSign: {
+  prototype: VerdocsSign;
+  new (): VerdocsSign;
+};
+
+interface VerdocsSignatureDialog extends Components.VerdocsSignatureDialog, HTMLElement {}
+export const VerdocsSignatureDialog: {
+  prototype: VerdocsSignatureDialog;
+  new (): VerdocsSignatureDialog;
+};
+
+interface VerdocsTemplateCard extends Components.VerdocsTemplateCard, HTMLElement {}
+export const VerdocsTemplateCard: {
+  prototype: VerdocsTemplateCard;
+  new (): VerdocsTemplateCard;
+};
+
+interface VerdocsTemplateTags extends Components.VerdocsTemplateTags, HTMLElement {}
+export const VerdocsTemplateTags: {
+  prototype: VerdocsTemplateTags;
+  new (): VerdocsTemplateTags;
+};
+
+interface VerdocsTextInput extends Components.VerdocsTextInput, HTMLElement {}
+export const VerdocsTextInput: {
+  prototype: VerdocsTextInput;
+  new (): VerdocsTextInput;
+};
+
+interface VerdocsToggle extends Components.VerdocsToggle, HTMLElement {}
+export const VerdocsToggle: {
+  prototype: VerdocsToggle;
+  new (): VerdocsToggle;
 };
 
-interface TemplateCard extends Components.TemplateCard, HTMLElement {}
-export const TemplateCard: {
-  prototype: TemplateCard;
-  new (): TemplateCard;
+interface VerdocsUploadDialog extends Components.VerdocsUploadDialog, HTMLElement {}
+export const VerdocsUploadDialog: {
+  prototype: VerdocsUploadDialog;
+  new (): VerdocsUploadDialog;
 };
 
-interface ToggleIconButtons extends Components.ToggleIconButtons, HTMLElement {}
-export const ToggleIconButtons: {
-  prototype: ToggleIconButtons;
-  new (): ToggleIconButtons;
+interface VerdocsView extends Components.VerdocsView, HTMLElement {}
+export const VerdocsView: {
+  prototype: VerdocsView;
+  new (): VerdocsView;
 };
 
 /**