fix(core): update

ts_web/00_commitinfo_data.ts

@@ -3,6 +3,6 @@
  */
 export const commitinfo = {
   name: '@signature.digital_private/catalog',
-  version: '1.0.56',
+  version: '1.0.57',
   description: 'a catalog containing components for e-signing'
 }

ts_web/elements/first-element.ts

@@ -1,47 +0,0 @@
-import { DeesElement, property, html, customElement, TemplateResult, css, cssManager } from '@designestate/dees-element';
-import * as domtools from '@designestate/dees-domtools';
-
-declare global {
-  interface HTMLElementTagNameMap {
-    'first-element': FirstElement;
-  }
-}
-
-@customElement('first-element')
-export class FirstElement extends DeesElement {
-  public static demo = () => html`
-    <first-element .aProp="${'test'}"></first-element>
-  `;
-
-  @property({
-    type: String
-  })
-  public aProp: string = 'loading...';
-
-
-  constructor() {
-    super();
-    domtools.DomTools.setupDomTools();
-  }
-
-  public static styles = [
-    domtools.elementBasic.staticStyles,
-    css`
-      :host {
-        display: block;
-        background: blue;
-        color: white;
-        padding: 10px;
-        text-align: center;
-      }
-    `
-  ]
-
-  public render(): TemplateResult {
-    return html`
-      <div class="mainbox">
-        ${this.aProp}
-      </div>
-    `;
-  }
-}

ts_web/elements/index.ts

@@ -1 +1,3 @@
-export * from './first-element.js';
+export * from './sdig-contracteditor.js';
+export * from './sdig-signbox.js';
+export * from './sdig-signpad.js';

ts_web/elements/sdig-contracteditor.ts

@@ -0,0 +1,11 @@
+import { DeesElement, property, html, customElement, type TemplateResult, css, cssManager } from '@design.estate/dees-element';
+import * as plugins from '../plugins.js';
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'sdig-contracteditor': ContractEditor;
+  }
+}
+
+@customElement('sdig-signbox')
+export class ContractEditor extends DeesElement {}

ts_web/elements/sdig-signbox.ts

@@ -0,0 +1,107 @@
+import { DeesElement, property, html, customElement, type TemplateResult, css, cssManager } from '@design.estate/dees-element';
+import * as plugins from '../plugins.js';
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'sdig-signbox': SignBox;
+  }
+}
+
+@customElement('sdig-signbox')
+export class SignBox extends DeesElement {
+  public static demo = () => html`
+    <sdig-signbox></sdig-signbox>
+  `;
+
+  constructor() {
+    super();
+  }
+
+  public static styles = [
+    cssManager.defaultStyles,
+    css`
+      .mainbox {
+        position: relative;
+        background: ${cssManager.bdTheme('#eeeeeb', '#111111')};
+        border-radius: 16px;
+        max-width: 600px;
+        margin: auto;
+        overflow: hidden;
+        color: ${cssManager.bdTheme('#111111', '#eeeeeb')};
+        font-family: 'Roboto', sans-serif;
+        box-shadow: ${cssManager.bdTheme('0px 0px 8px 0px #00000040', 'none')};
+      }
+
+      .heading {
+        padding: 4px;
+        text-align: center;
+        font-weight: 500;
+        font-size: 12px;
+        margin-bottom: -20px;
+        pointer-events: none;
+      }
+
+      sdig-signpad {
+        position: relative;
+        z-index: 1;
+      }
+
+      .actions {
+        position: relative;
+        padding: 0px 24px;
+        font-size: 16px;
+        background: ${cssManager.bdTheme('#eeeeeb', '#000000')};
+        box-shadow: ${cssManager.bdTheme('0px 0px 8px 0px #00000040', 'none')};
+        z-index: 2;
+        display: flex;
+        justify-content: flex-end;
+      }
+
+      .button {
+        cursor: pointer;
+        margin: 0px 16px;
+        padding: 16px 0px;
+        color: ${cssManager.bdTheme('#666', '#999')};
+        user-select: none;
+      }
+
+      .button:hover {
+        color: ${cssManager.bdTheme('#111111', '#eeeeeb')};
+      }
+    `
+  ];
+
+  public render(): TemplateResult {
+    return html`
+      <div class="mainbox">
+        <div class="heading">
+          You may sign below:
+        </div>
+        <sdig-signpad></sdig-signpad>
+        <div class="actions">
+          <div class="button" @click=${async () => {
+            await this.shadowRoot.querySelector('sdig-signpad').clear();
+          }}>
+            Clear
+          </div>
+          <div class="button" @click=${async () => {
+            await this.shadowRoot.querySelector('sdig-signpad').undo();
+          }}>
+            Undo
+          </div>
+          <div class="button" @click=${async () => {
+            const signature = await this.shadowRoot.querySelector('sdig-signpad').toData();
+            this.dispatchEvent(new CustomEvent('signature', {
+              detail: {
+                signature,
+              }
+            }));
+            console.log(signature);
+          }}>
+            Submit Signature
+          </div>
+        </div>
+      </div>
+    `;
+  }
+}

ts_web/elements/sdig-signpad.ts

@@ -0,0 +1,109 @@
+import { DeesElement, property, html, customElement, type TemplateResult, css, cssManager } from '@design.estate/dees-element';
+import * as plugins from '../plugins.js';
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'sdig-signpad': SignPad;
+  }
+}
+
+@customElement('sdig-signpad')
+export class SignPad extends DeesElement {
+  public static demo = () => html`
+    <sdig-signpad></sdig-signpad>
+  `;
+
+
+  constructor() {
+    super();
+  }
+
+  public static styles = [
+    cssManager.defaultStyles,
+    css`
+      :host {
+        display: block;
+        color: white;
+        position: relative;
+        max-width: 600px;
+        min-height: 200px;
+        max-height: 400px;
+      }
+
+      .mainbox {
+        position: relative;
+        min-height: 280px;
+      }
+
+      .signline {
+        position: absolute;
+        bottom: 30%;
+        width: 80%;
+        left: 10%;
+        border-top: 1px dashed ${cssManager.bdTheme('#00000040', '#ffffff20')};
+        pointer-events: none;
+      }
+
+      canvas {
+        filter: ${cssManager.bdTheme('invert(0)', 'invert(1)')};
+      }
+    `
+  ]
+
+  public render(): TemplateResult {
+    return html`
+      <div class="mainbox">
+        <div class="signline"></div>
+      </div>
+    `;
+  }
+
+  public signaturePad: typeof plugins.signaturePad.prototype;
+  public async firstUpdated() {
+    const domtools = await this.domtoolsPromise;
+    const canvas = document.createElement('canvas');
+    this.shadowRoot.querySelector('.mainbox').appendChild(canvas);
+    await this.resizeCanvas();
+    this.signaturePad = new plugins.signaturePad(canvas, {
+      
+    });
+    this.signaturePad.on();
+  }
+
+  public async resizeCanvas() {
+    const mainbox = this.shadowRoot.querySelector('.mainbox');
+    const mainboxWidth = mainbox.clientWidth;
+    const mainboxHeight = mainbox.clientHeight;
+    const canvas = this.shadowRoot.querySelector('canvas');
+    canvas.width = mainboxWidth;
+    canvas.height = mainboxHeight;
+    if (this.signaturePad) {
+      this.signaturePad.clear();
+    }
+  }
+
+  public async clear() {
+    this.signaturePad.clear();
+  }
+
+  public async toData() {
+    const returnData =  this.signaturePad.toData();
+    return returnData;
+  }
+
+  public async fromData(dataArrayArg: any[]) {
+    this.signaturePad.fromData(dataArrayArg);
+  }
+
+  public async toSVG() {
+    return this.signaturePad.toSVG({
+      includeBackgroundColor: false,
+    });
+  }
+
+  public async undo() {
+    const data = await this.toData();
+    data.pop();
+    await this.fromData(data);
+  }
+}

ts_web/plugins.ts

@@ -0,0 +1,22 @@
+// @signature.digital scope
+import * as portablecontract from '@signature.digital/portablecontract';
+
+export {
+  portablecontract,
+}
+
+// @design.estate scope
+import * as deesCatalog from '@design.estate/dees-catalog';
+
+export {
+  deesCatalog,
+}
+
+// third party
+import signaturePadMod from 'signature_pad';
+type signaturePadType = (typeof import('signature_pad'))['default'];
+const signaturePad = signaturePadMod as any as signaturePadType;
+
+export {
+  signaturePad,
+}