@verdocs/web-sdk 2.3.63 → 2.3.65

package/dist/collection/components/fields/verdocs-field-radio-button-group/verdocs-field-radio-button.js

@@ -22,6 +22,7 @@ export class VerdocsFieldRadioButton {
     this.moveable = false;
     this.xscale = 1;
     this.yscale = 1;
+    this.pagenumber = 1;
     this.showingProperties = false;
   }
   async showSettingsPanel() {
@@ -243,6 +244,24 @@ export class VerdocsFieldRadioButton {
         "attribute": "yscale",
         "reflect": false,
         "defaultValue": "1"
+      },
+      "pagenumber": {
+        "type": "number",
+        "mutable": false,
+        "complexType": {
+          "original": "number",
+          "resolved": "number",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "The page the field is on"
+        },
+        "attribute": "pagenumber",
+        "reflect": false,
+        "defaultValue": "1"
       }
     };
   }

package/dist/collection/components/fields/verdocs-field-signature/verdocs-field-signature.js

@@ -21,6 +21,7 @@ export class VerdocsFieldSignature {
     this.done = false;
     this.xscale = 1;
     this.yscale = 1;
+    this.pagenumber = 1;
     this.showingProperties = false;
     this.tempSignature = '';
   }
@@ -265,6 +266,24 @@ export class VerdocsFieldSignature {
         "attribute": "yscale",
         "reflect": false,
         "defaultValue": "1"
+      },
+      "pagenumber": {
+        "type": "number",
+        "mutable": false,
+        "complexType": {
+          "original": "number",
+          "resolved": "number",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "The page the field is on"
+        },
+        "attribute": "pagenumber",
+        "reflect": false,
+        "defaultValue": "1"
       }
     };
   }

package/dist/collection/components/fields/verdocs-field-textarea/verdocs-field-textarea.js

@@ -23,6 +23,7 @@ export class VerdocsFieldTextarea {
     this.done = false;
     this.xscale = 1;
     this.yscale = 1;
+    this.pagenumber = 1;
     this.showingProperties = false;
   }
   async focusField() {
@@ -297,6 +298,24 @@ export class VerdocsFieldTextarea {
         "attribute": "yscale",
         "reflect": false,
         "defaultValue": "1"
+      },
+      "pagenumber": {
+        "type": "number",
+        "mutable": false,
+        "complexType": {
+          "original": "number",
+          "resolved": "number",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "The page the field is on"
+        },
+        "attribute": "pagenumber",
+        "reflect": false,
+        "defaultValue": "1"
       }
     };
   }

package/dist/collection/components/fields/verdocs-field-textbox/verdocs-field-textbox.css

@@ -61,7 +61,7 @@ verdocs-field-textbox [data-lastpass-icon-root] {
 verdocs-field-textbox .settings-icon {
   position: absolute;
   top: -4px;
-  left: -20px;
+  left: -18px;
   display: inline-block;
   cursor: pointer;
   opacity: 0.6;

package/dist/collection/components/fields/verdocs-field-textbox/verdocs-field-textbox.js

@@ -4,7 +4,7 @@ import { getRGBA } from '@verdocs/js-sdk/Utils/Colors';
 import { updateField } from '@verdocs/js-sdk/Templates/Fields';
 import { h, Host, Fragment } from '@stencil/core';
 import { getRoleIndex, getTemplateRoleStore } from '../../../utils/TemplateRoleStore';
-import { getTemplateFieldStore } from '../../../utils/TemplateFieldStore';
+import { getTemplateFieldStore, updateStoreField } from '../../../utils/TemplateFieldStore';
 import { getFieldSettings } from '../../../utils/utils';
 import { SettingsIcon } from '../../../utils/Icons';
 /**
@@ -23,6 +23,7 @@ export class VerdocsFieldTextbox {
     this.done = false;
     this.xscale = 1;
     this.yscale = 1;
+    this.pagenumber = 1;
     this.showingProperties = false;
   }
   async focusField() {
@@ -67,10 +68,12 @@ export class VerdocsFieldTextbox {
     x = (parseFloat(x) || 0) + e.deltaRect.left;
     y = (parseFloat(y) || 0) + e.deltaRect.top;
     h = (parseFloat(h) || 0) + e.deltaRect.height;
+    width /= this.xscale;
+    height /= this.yscale;
     Object.assign(e.target.style, {
       width: `${width}px`,
       height: `${height}px`,
-      transform: `translate(${x}px, ${y + h}px)`,
+      transform: `scale(${this.xscale}, ${this.yscale}); translate(${x}px, ${y + h}px)`,
     });
     Object.assign(e.target.dataset, { x, y, h });
   }
@@ -78,14 +81,16 @@ export class VerdocsFieldTextbox {
     const field = this.fieldStore.get('fields').find(field => field.name === this.fieldname);
     const newSettings = { ...getFieldSettings(field) };
     const [translateX, translateY] = e.target.style.transform.split('(')[1].split(')')[0].split(',').map(parseFloat);
-    newSettings.width = Math.round(parseFloat(e.target.style.width) / this.xscale);
-    newSettings.height = Math.round(parseFloat(e.target.style.height) / this.yscale);
-    newSettings.x = Math.round(newSettings.x + translateX / this.xscale);
-    newSettings.y = Math.round(newSettings.y - translateY / this.yscale);
+    console.log({ translateX, translateY });
+    newSettings.width = Math.round(parseFloat(e.target.style.width));
+    newSettings.height = Math.round(parseFloat(e.target.style.height));
+    // newSettings.x = Math.round(newSettings.x + translateX / this.xscale);
+    // newSettings.y = Math.round(newSettings.y - translateY / this.yscale);
     updateField(this.endpoint, this.templateid, this.fieldname, { setting: newSettings })
       .then(field => {
       var _a;
       console.log('Update result', field);
+      updateStoreField(this.fieldStore, this.fieldname, field);
       (_a = this.settingsChanged) === null || _a === void 0 ? void 0 : _a.emit({ fieldName: field.name, settings: newSettings, field });
       Object.assign(e.target.dataset, { x: 0, y: 0, h: 0 });
     })
@@ -94,7 +99,6 @@ export class VerdocsFieldTextbox {
   render() {
     var _a, _b;
     const field = this.fieldStore.get('fields').find(field => field.name === this.fieldname);
-    console.log('Rendering tb', this.fieldname, field);
     const roleIndex = getRoleIndex(this.roleStore, field.role_name);
     const backgroundColor = field['rgba'] || getRGBA(roleIndex);
     if (!field) {
@@ -299,6 +303,24 @@ export class VerdocsFieldTextbox {
         "attribute": "yscale",
         "reflect": false,
         "defaultValue": "1"
+      },
+      "pagenumber": {
+        "type": "number",
+        "mutable": false,
+        "complexType": {
+          "original": "number",
+          "resolved": "number",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "The page the field is on"
+        },
+        "attribute": "pagenumber",
+        "reflect": false,
+        "defaultValue": "1"
       }
     };
   }

package/dist/collection/components/fields/verdocs-field-timestamp/verdocs-field-timestamp.js

@@ -21,6 +21,7 @@ export class VerdocsFieldTimestamp {
     this.done = false;
     this.xscale = 1;
     this.yscale = 1;
+    this.pagenumber = 1;
     this.showingProperties = false;
   }
   async focusField() {
@@ -230,6 +231,24 @@ export class VerdocsFieldTimestamp {
         "attribute": "yscale",
         "reflect": false,
         "defaultValue": "1"
+      },
+      "pagenumber": {
+        "type": "number",
+        "mutable": false,
+        "complexType": {
+          "original": "number",
+          "resolved": "number",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "The page the field is on"
+        },
+        "attribute": "pagenumber",
+        "reflect": false,
+        "defaultValue": "1"
       }
     };
   }

package/dist/collection/components/templates/verdocs-template-document-page/verdocs-template-document-page.js

@@ -1,8 +1,9 @@
 // NOTE: This component does not have a story because it's not intended for external use.
 import { VerdocsEndpoint } from '@verdocs/js-sdk';
-import { h, Host } from '@stencil/core';
 import { getTemplateDocumentPageDisplayUri } from '@verdocs/js-sdk/Templates/TemplateDocuments';
-import { throttle } from '../../../utils/utils';
+import { h, Host, Fragment } from '@stencil/core';
+import { getTemplateFieldStore } from '../../../utils/TemplateFieldStore';
+import { getControlStyles, getFieldId, getFieldOptionId, throttle } from '../../../utils/utils';
 /**
  * Represents one document page. This is primarily a layout container used to coordinate positions of
  * page-related layers such as the page itself, signature fields, etc. It is not intended to be used
@@ -10,7 +11,10 @@ import { throttle } from '../../../utils/utils';
  */
 export class VerdocsTemplateDocumentPage {
   constructor() {
+    this.fieldStore = null;
     this.endpoint = VerdocsEndpoint.getDefault();
+    this.editable = false;
+    this.done = false;
     this.templateId = '';
     this.documentId = '';
     this.pageNumber = 1;
@@ -25,9 +29,12 @@ export class VerdocsTemplateDocumentPage {
     this.aspectRatio = this.virtualWidth / this.virtualHeight;
     this.skipFirstNotification = true;
     this.pageDisplayUri = '';
+    this.xScale = 1;
+    this.yScale = 1;
   }
   async componentWillLoad() {
     this.pageDisplayUri = await getTemplateDocumentPageDisplayUri(this.endpoint, this.templateId, this.documentId, this.pageNumber);
+    this.fieldStore = getTemplateFieldStore(this.templateId);
   }
   componentDidLoad() {
     this.resizeObserver = new ResizeObserver(throttle(entries => {
@@ -56,6 +63,14 @@ export class VerdocsTemplateDocumentPage {
       this.skipFirstNotification = false;
       return;
     }
+    const xScale = this.renderedWidth / this.virtualWidth;
+    if (this.xScale !== xScale) {
+      this.xScale = xScale;
+    }
+    const yScale = this.renderedHeight / this.virtualHeight;
+    if (this.yScale !== yScale) {
+      this.yScale = yScale;
+    }
     this.pageRendered.emit({
       // container: this.container,
       containerId: this.containerId,
@@ -68,13 +83,49 @@ export class VerdocsTemplateDocumentPage {
       naturalWidth: this.naturalWidth,
       naturalHeight: this.naturalHeight,
       aspectRatio: this.aspectRatio,
-      xScale: this.renderedWidth / this.virtualWidth,
-      yScale: this.renderedHeight / this.virtualHeight,
+      xScale,
+      yScale,
     });
   }
   render() {
     const height = `${this.renderedHeight}px`;
-    return (h(Host, { id: `${this.containerId}`, style: { height, flex: `0 0 ${height}` } }, this.layers.map(layer => layer.type === 'div' ? (h("div", { class: "verdocs-template-document-page-layer", id: `${this.containerId}-${layer.name}`, style: { height } })) : this.pageDisplayUri ? (h("img", { class: "verdocs-template-document-page-layer img", id: `${this.containerId}-${layer.name}`, src: this.pageDisplayUri, alt: `Page ${this.pageNumber}`, "aria-hidden": true, loading: "lazy", onLoad: (e) => {
+    return (h(Host, { id: `${this.containerId}`, style: { height, flex: `0 0 ${height}` } }, this.layers.map(layer => layer.type === 'div' ? (h("div", { class: "verdocs-template-document-page-layer", id: `${this.containerId}-${layer.name}`, style: { height } }, layer.name === 'controls' &&
+      this.fieldStore
+        .get('fields')
+        .filter(field => field && field.page_sequence === this.pageNumber)
+        .map(field => {
+        const id = getFieldId(field);
+        switch (field.type) {
+          case 'textbox':
+            return (h("verdocs-field-textbox", { id: id, templateid: this.templateId, fieldname: field.name, editable: this.editable, done: this.done, xscale: this.xScale, yscale: this.yScale, pagenumber: this.pageNumber, style: getControlStyles(field, this.xScale, this.yScale, 0) }));
+          case 'textarea':
+            return (h("verdocs-field-textarea", { id: id, templateid: this.templateId, fieldname: field.name, editable: this.editable, done: this.done, xscale: this.xScale, yscale: this.yScale, pagenumber: this.pageNumber, style: getControlStyles(field, this.xScale, this.yScale, 0) }));
+          case 'date':
+            return (h("verdocs-field-date", { id: id, templateid: this.templateId, fieldname: field.name, editable: this.editable, xscale: this.xScale, yscale: this.yScale, done: this.done, pagenumber: this.pageNumber, style: getControlStyles(field, this.xScale, this.yScale, 0) }));
+          case 'attachment':
+            return (h("verdocs-field-attachment", { id: id, templateid: this.templateId, fieldname: field.name, editable: this.editable, done: this.done, xscale: this.xScale, yscale: this.yScale, pagenumber: this.pageNumber, style: getControlStyles(field, this.xScale, this.yScale, 0) }));
+          case 'dropdown':
+            return (h("verdocs-field-dropdown", { id: id, templateid: this.templateId, fieldname: field.name, editable: this.editable, done: this.done, xscale: this.xScale, yscale: this.yScale, pagenumber: this.pageNumber, style: getControlStyles(field, this.xScale, this.yScale, 0) }));
+          case 'initial':
+            return (h("verdocs-field-initial", { id: id, templateid: this.templateId, fieldname: field.name, editable: this.editable, xscale: this.xScale, yscale: this.yScale, done: this.done, pagenumber: this.pageNumber, style: getControlStyles(field, this.xScale, this.yScale, 0) }));
+          case 'signature':
+            return (h("verdocs-field-signature", { id: id, templateid: this.templateId, fieldname: field.name, editable: this.editable, xscale: this.xScale, yscale: this.yScale, done: this.done, pagenumber: this.pageNumber, style: getControlStyles(field, this.xScale, this.yScale, 0) }));
+          case 'timestamp':
+            return (h("verdocs-field-timestamp", { id: id, templateid: this.templateId, fieldname: field.name, editable: this.editable, xscale: this.xScale, yscale: this.yScale, done: this.done, pagenumber: this.pageNumber, style: getControlStyles(field, this.xScale, this.yScale, 0) }));
+          case 'checkbox_group':
+            return (field.settings || field.setting || {}).options.map((_, checkboxIndex) => {
+              const id = getFieldOptionId(field, checkboxIndex);
+              return (h("verdocs-field-checkbox", { id: id, templateid: this.templateId, fieldname: field.name, editable: this.editable, xscale: this.xScale, yscale: this.yScale, done: this.done, option: checkboxIndex, pagenumber: this.pageNumber, style: getControlStyles(field, this.xScale, this.yScale, checkboxIndex) }));
+            });
+          case 'radio_button_group':
+            return (field.settings || field.setting || {}).options.map((_, checkboxIndex) => {
+              const id = getFieldOptionId(field, checkboxIndex);
+              return (h("verdocs-field-radio-button", { id: id, templateid: this.templateId, fieldname: field.name, editable: this.editable, xscale: this.xScale, yscale: this.yScale, done: this.done, option: checkboxIndex, pagenumber: this.pageNumber, style: getControlStyles(field, this.xScale, this.yScale, checkboxIndex) }));
+            });
+          default:
+            return h(Fragment, null, field.name);
+        }
+      }))) : this.pageDisplayUri ? (h("img", { class: "verdocs-template-document-page-layer img", id: `${this.containerId}-${layer.name}`, src: this.pageDisplayUri, alt: `Page ${this.pageNumber}`, "aria-hidden": true, loading: "lazy", onLoad: (e) => {
         // Note that all we really care about is the aspect ratio. We track the natural Width and Height but they aren't really that
         // useful as individual values. The image will already have been scaled down to fit a DIV for display (100%, auto height).
         // Builder places fields offset into the rendered display area, not the original document's dimensions. So its X/Y values
@@ -123,6 +174,42 @@ export class VerdocsTemplateDocumentPage {
         },
         "defaultValue": "VerdocsEndpoint.getDefault()"
       },
+      "editable": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Whether the fields should be editable (Builder)"
+        },
+        "attribute": "editable",
+        "reflect": false,
+        "defaultValue": "false"
+      },
+      "done": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Whether the field are interactable (done/submitted disables this)"
+        },
+        "attribute": "done",
+        "reflect": false,
+        "defaultValue": "false"
+      },
       "templateId": {
         "type": "string",
         "mutable": false,
@@ -245,7 +332,9 @@ export class VerdocsTemplateDocumentPage {
       "naturalHeight": {},
       "aspectRatio": {},
       "skipFirstNotification": {},
-      "pageDisplayUri": {}
+      "pageDisplayUri": {},
+      "xScale": {},
+      "yScale": {}
     };
   }
   static get events() {

package/dist/collection/components/templates/verdocs-template-field-properties/verdocs-template-field-properties.js

@@ -135,15 +135,11 @@ export class VerdocsTemplateFieldProperties {
       .then(updated => {
       var _a, _b, _c;
       this.dirty = false;
-      const newFields = [
-        ...this.fieldStore.get('fields').map(field => {
-          if (field.name !== this.fieldName) {
-            return field;
-          }
-          return { ...field, ...updated };
-        }),
-      ];
-      this.fieldStore.set('fields', newFields);
+      updateStoreField(this.fieldStore, this.fieldName, updated);
+      // if (this.fieldname !== newSettings.name) {
+      //   this.fieldname = newSettings.name;
+      //   console.log('new name', this.fieldname);
+      // }
       (_a = this.settingsChanged) === null || _a === void 0 ? void 0 : _a.emit({ fieldName: this.fieldName, settings: newProperties, field: updated });
       (_b = this.close) === null || _b === void 0 ? void 0 : _b.emit();
       (_c = document.getElementById('verdocs-template-field-properties')) === null || _c === void 0 ? void 0 : _c.remove();

package/dist/collection/components/templates/verdocs-template-fields/verdocs-template-fields.js

@@ -3,7 +3,7 @@ import { VerdocsEndpoint } from '@verdocs/js-sdk';
 import { integerSequence } from '@verdocs/js-sdk/Utils/Primitives';
 import { createField, updateField } from '@verdocs/js-sdk/Templates/Fields';
 import { getTemplateFieldStore, updateStoreField } from '../../../utils/TemplateFieldStore';
-import { defaultHeight, defaultWidth, renderDocumentField, updateCssTransform } from '../../../utils/utils';
+import { defaultHeight, defaultWidth, getFieldId, removeCssTransform, renderDocumentField, updateCssTransform } from '../../../utils/utils';
 import { h, Host } from '@stencil/core';
 import { getTemplateRoleStore } from '../../../utils/TemplateRoleStore';
 import { getTemplateStore } from '../../../utils/TemplateStore';
@@ -67,15 +67,12 @@ export class VerdocsTemplateFields {
       }
       getTemplateStore(this.endpoint, this.templateId, true)
         .then(ts => {
-        var _a, _b, _c, _d;
+        var _a, _b;
         this.templateStore = ts;
         console.log('[PREVIEW] Loaded Template Store', ts.state);
         this.fieldStore = getTemplateFieldStore(this.templateId);
         this.roleStore = getTemplateRoleStore(this.templateId);
         this.selectedRoleName = ((_b = (_a = this.roleStore.get('roles')) === null || _a === void 0 ? void 0 : _a[0]) === null || _b === void 0 ? void 0 : _b.name) || '';
-        console.log('Sel role', this.selectedRoleName);
-        console.log('RS', (_c = this.roleStore) === null || _c === void 0 ? void 0 : _c.state);
-        console.log('FS', (_d = this.fieldStore) === null || _d === void 0 ? void 0 : _d.state);
         console.log('[PREVIEW] Loaded template', this.templateStore.state, this.roleStore.get('roles'), this.fieldStore.get('fields'));
         this.loading = false;
         this.fieldStore.onChange('fields', fields => {
@@ -123,8 +120,9 @@ export class VerdocsTemplateFields {
   }
   attachFieldAttributes(pageInfo, field, el) {
     el.addEventListener('input', e => this.handleFieldChange(field, e));
-    el.addEventListener('settingsChanged', () => {
+    el.addEventListener('settingsChanged', e => {
       var _a, _b;
+      console.log('Settings changed', e.detail);
       (_a = this.templateUpdated) === null || _a === void 0 ? void 0 : _a.emit({ endpoint: this.endpoint, template: (_b = this.templateStore) === null || _b === void 0 ? void 0 : _b.state, event: 'added-field' });
     });
     el.addEventListener('deleted', () => {
@@ -142,12 +140,22 @@ export class VerdocsTemplateFields {
   }
   handlePageRendered(e) {
     const pageInfo = e.detail;
-    // console.log('[FIELDS] Page rendered', pageInfo.pageNumber, pageInfo);
+    console.log('[FIELDS] Page rendered', pageInfo.pageNumber, pageInfo.xScale, pageInfo.yScale);
     this.cachedPageInfo[pageInfo.pageNumber] = pageInfo;
     this.pageHeights[pageInfo.pageNumber] = pageInfo.naturalHeight;
-    const fields = this.fieldStore.get('fields').filter(field => field && field.page_sequence === pageInfo.pageNumber);
-    console.log('[FIELDS] Page rendered', pageInfo, fields);
-    fields.forEach((field) => this.reRenderField(field, pageInfo.pageNumber));
+    this.fieldStore
+      .get('fields')
+      .filter(field => field && field.page_sequence === pageInfo.pageNumber)
+      .forEach(field => {
+      // TODO: Why isn't the attr already on the element carrying through?
+      const id = getFieldId(field);
+      const el = document.getElementById(id);
+      if (el) {
+        el.setAttribute('fieldname', field.name);
+        el.setAttribute('pagenumber', String(field.page_sequence));
+        this.makeDraggable(el);
+      }
+    });
   }
   reRenderField(field, pageNumber) {
     const pageInfo = this.cachedPageInfo[pageNumber];
@@ -188,14 +196,14 @@ export class VerdocsTemplateFields {
   }
   async handleMoveEnd(event) {
     var _a, _b;
-    const name = event.target.getAttribute('name');
+    const name = event.target.getAttribute('fieldname');
     const option = +(event.target.getAttribute('option') || '0');
     const field = this.fieldStore.get('fields').find(field => field.name === name);
     if (!field) {
-      console.log('[FIELDS] Unable to find field', name);
+      console.log('[FIELDS] Unable to find field', name, event.target);
       return;
     }
-    const pageNumber = event.target.getAttribute('pageNumber');
+    const pageNumber = event.target.getAttribute('pagenumber');
     const { naturalWidth = 612, naturalHeight = 792, renderedHeight = 792 } = this.cachedPageInfo[pageNumber];
     const clientRect = event.target.getBoundingClientRect();
     const parent = event.target.parentElement;
@@ -237,8 +245,8 @@ export class VerdocsTemplateFields {
     event.target.removeAttribute('posX');
     event.target.removeAttribute('posY');
     console.log('Will remove CSS transform', event.target.style.transform);
-    this.reRenderField(newFieldData, pageNumber);
-    // removeCssTransform(event.target, 'transform');
+    // this.reRenderField(newFieldData, pageNumber);
+    removeCssTransform(event.target);
     console.log('[FIELDS] Updated', name, newFieldData);
     (_a = this.templateUpdated) === null || _a === void 0 ? void 0 : _a.emit({ endpoint: this.endpoint, template: (_b = this.templateStore) === null || _b === void 0 ? void 0 : _b.state, event: 'updated-field' });
   }
@@ -381,7 +389,7 @@ export class VerdocsTemplateFields {
         }
       } })))), h("div", { class: "pages" }, (((_c = (_b = this.templateStore) === null || _b === void 0 ? void 0 : _b.state) === null || _c === void 0 ? void 0 : _c.template_documents) || []).map(document => {
       const pageNumbers = integerSequence(1, document.page_numbers);
-      return pageNumbers.map(page => (h("verdocs-template-document-page", { templateId: this.templateId, documentId: document.id, pageNumber: page, virtualWidth: 612, virtualHeight: 792, onClick: (e) => this.handleClickPage(e, page), onPageRendered: e => this.handlePageRendered(e), layers: [
+      return pageNumbers.map(page => (h("verdocs-template-document-page", { templateId: this.templateId, documentId: document.id, pageNumber: page, virtualWidth: 612, virtualHeight: 792, editable: true, done: false, onClick: (e) => this.handleClickPage(e, page), onPageRendered: e => this.handlePageRendered(e), layers: [
           { name: 'page', type: 'canvas' },
           { name: 'controls', type: 'div' },
         ] })));

package/dist/collection/utils/TemplateFieldStore.js

@@ -30,16 +30,17 @@ export const createTemplateFieldStoreFromEnvelope = (envelope) => {
   store.set('fields', [...envelope.fields]);
   return store;
 };
-export const updateStoreField = (store, name, newFieldData) => {
-  const newFields = [
-    ...store.get('fields').map(field => {
-      if (field.name !== name) {
-        return field;
-      }
-      return { ...field, ...newFieldData };
-    }),
-  ];
-  store.set('fields', newFields);
+export const updateStoreField = (store, oldName, newFieldData) => {
+  const oldFields = store.get('fields') || [];
+  if (oldName !== newFieldData.name) {
+    console.log('Renaming', oldName, newFieldData.name);
+    const withoutOldField = oldFields.filter(field => field.name !== oldName);
+    store.set('fields', [...withoutOldField, newFieldData]);
+  }
+  else {
+    console.log('Updating', oldName);
+    store.set('fields', oldFields.map(field => (field.name === oldName ? { ...field, ...newFieldData } : { ...field })));
+  }
 };
 export const deleteStoreField = (store, name) => {
   const newFields = [...store.get('fields').filter(field => field.name !== name)];

package/dist/collection/utils/utils.js

@@ -79,6 +79,27 @@ export const setControlStyles = (el, field, xScale, yScale, option) => {
   el.style.transform = `scale(${xScale}, ${yScale})`;
   // el.style.backgroundColor = field['rgba'] || getRGBA(roleIndex);
 };
+export const getControlStyles = (field, xScale, yScale, option) => {
+  var _a, _b, _c, _d;
+  const settings = field.setting || field.settings;
+  let { x = 0, y = 0, width = defaultWidth(field.type), height = defaultHeight(field.type) } = settings;
+  // console.log('scs', field, settings, x, y);
+  const optionSettings = settings.options && option !== undefined && settings.options[option] ? settings.options[option] : null;
+  if (optionSettings) {
+    x = (_a = optionSettings.x) !== null && _a !== void 0 ? _a : x;
+    y = (_b = optionSettings.y) !== null && _b !== void 0 ? _b : y;
+    width = (_c = optionSettings.width) !== null && _c !== void 0 ? _c : width;
+    height = (_d = optionSettings.height) !== null && _d !== void 0 ? _d : height;
+  }
+  return {
+    width: `${width}px`,
+    height: `${height}px`,
+    position: 'absolute',
+    left: `${rescale(xScale, x)}px`,
+    bottom: `${rescale(yScale, y)}px`,
+    transform: `scale(${xScale}, ${yScale})`,
+  };
+};
 export const getFieldId = (field) => {
   return `verdocs-doc-fld-${field.name}`;
 };
@@ -275,13 +296,11 @@ export const updateCssTransform = (el, key, value) => {
     el.style.transform = currentTransform + ' ' + newValue;
   }
 };
-export const removeCssTransform = (el, key) => {
-  const currentTransform = el.style.transform || '';
-  console.log('ct', key, currentTransform);
+export const removeCssTransform = (el) => {
+  // const currentTransform = el.style.transform || '';
   el.style.transform = el.style.transform.split(')')[0] + ')';
   // TODO: This is not working
   // el.style.transform = currentTransform.replace(new RegExp(`\(${key}\\(.+?\\)\)`), '');
-  console.log('nt', el.style.transform);
 };
 export const saveAttachment = async (endpoint, envelope, documentId) => {
   // e.g. "Colorado-Motor-Vehicle-Bill-of-Sale.pdf"

package/dist/components/TemplateFieldStore.js

@@ -31,16 +31,17 @@ const createTemplateFieldStoreFromEnvelope = (envelope) => {
   store.set('fields', [...envelope.fields]);
   return store;
 };
-const updateStoreField = (store, name, newFieldData) => {
-  const newFields = [
-    ...store.get('fields').map(field => {
-      if (field.name !== name) {
-        return field;
-      }
-      return { ...field, ...newFieldData };
-    }),
-  ];
-  store.set('fields', newFields);
+const updateStoreField = (store, oldName, newFieldData) => {
+  const oldFields = store.get('fields') || [];
+  if (oldName !== newFieldData.name) {
+    console.log('Renaming', oldName, newFieldData.name);
+    const withoutOldField = oldFields.filter(field => field.name !== oldName);
+    store.set('fields', [...withoutOldField, newFieldData]);
+  }
+  else {
+    console.log('Updating', oldName);
+    store.set('fields', oldFields.map(field => (field.name === oldName ? { ...field, ...newFieldData } : { ...field })));
+  }
 };
 
 export { createTemplateFieldStore as a, createTemplateFieldStoreFromEnvelope as c, getTemplateFieldStore as g, updateStoreField as u };