feat(workspace): introduce a responsive signature workspace demo and remove legacy contract editor components

ts_web/elements/sdig-signpad/sdig-signpad.ts

@@ -1,4 +1,4 @@
-import { DeesElement, property, html, customElement, type TemplateResult, css, cssManager } from '@design.estate/dees-element';
+import { DeesElement, html, customElement, type TemplateResult, css, cssManager } from '@design.estate/dees-element';
 import * as plugins from '../../plugins.js';
 
 declare global {
@@ -12,6 +12,7 @@ export class SignPad extends DeesElement {
   public static demo = () => html`
     <sdig-signpad></sdig-signpad>
   `;
+  public static demoGroups = ['Signature Digital Primitives'];
 
 
   constructor() {
@@ -59,11 +60,14 @@ export class SignPad extends DeesElement {
     `;
   }
 
-  public signaturePad: typeof plugins.signaturePad.prototype;
+  public signaturePad?: typeof plugins.signaturePad.prototype;
+
   public async firstUpdated() {
-    const domtools = await this.domtoolsPromise;
+    await this.domtoolsPromise;
+    const mainbox = this.shadowRoot?.querySelector('.mainbox');
+    if (!mainbox) return;
     const canvas = document.createElement('canvas');
-    this.shadowRoot.querySelector('.mainbox').appendChild(canvas);
+    mainbox.appendChild(canvas);
     await this.resizeCanvas();
     this.signaturePad = new plugins.signaturePad(canvas, {
       
@@ -72,10 +76,11 @@ export class SignPad extends DeesElement {
   }
 
   public async resizeCanvas() {
-    const mainbox = this.shadowRoot.querySelector('.mainbox');
+    const mainbox = this.shadowRoot?.querySelector('.mainbox');
+    const canvas = this.shadowRoot?.querySelector('canvas');
+    if (!mainbox || !canvas) return;
     const mainboxWidth = mainbox.clientWidth;
     const mainboxHeight = mainbox.clientHeight;
-    const canvas = this.shadowRoot.querySelector('canvas');
     canvas.width = mainboxWidth;
     canvas.height = mainboxHeight;
     if (this.signaturePad) {
@@ -84,22 +89,22 @@ export class SignPad extends DeesElement {
   }
 
   public async clear() {
-    this.signaturePad.clear();
+    this.signaturePad?.clear();
   }
 
   public async toData() {
-    const returnData =  this.signaturePad.toData();
+    const returnData =  this.signaturePad?.toData() || [];
     return returnData;
   }
 
   public async fromData(dataArrayArg: any[]) {
-    this.signaturePad.fromData(dataArrayArg);
+    this.signaturePad?.fromData(dataArrayArg);
   }
 
   public async toSVG() {
-    return this.signaturePad.toSVG({
+    return this.signaturePad?.toSVG({
       includeBackgroundColor: false,
-    });
+    }) || '';
   }
 
   public async undo() {
@@ -107,4 +112,4 @@ export class SignPad extends DeesElement {
     data.pop();
     await this.fromData(data);
   }
-}
+}