@rogieking/figui3 1.6.5 → 1.6.6

package/components.css

@@ -1190,6 +1190,7 @@ fig-image {
   place-items: center;
   width: var(--image-size);
   height: var(--image-size);
+  aspect-ratio: 1 / 1;
   > * {
     grid-area: 1/1;
   }
@@ -1211,6 +1212,16 @@ fig-image {
   &[size="large"] {
     --image-size: 8rem;
   }
+  &[aspect-ratio="auto"] {
+    aspect-ratio: var(--aspect-ratio);
+    height: auto;
+    fig-chit,
+    fig-chit::after,
+    input {
+      height: auto !important;
+      aspect-ratio: var(--aspect-ratio) !important;
+    }
+  }
 }
 
 /* Combo input */

package/example.html

@@ -233,6 +233,15 @@
                        size="large"></fig-image>
         </fig-field>
         <br /><br />
+        <fig-field>
+            <label>Large (with upload)</label>
+            <fig-image upload="true"
+                       label="Change image"
+                       aspect-ratio="auto"
+                       src="charli.jpeg"
+                       size="large"></fig-image>
+        </fig-field>
+        <br /><br />
         <fig-header>
             <h2>Button</h2>
         </fig-header>

package/fig.js

@@ -1805,6 +1805,12 @@ class FigImage extends HTMLElement {
     this.innerHTML = this.#getInnerHTML();
     this.#updateRefs();
   }
+  disconnectedCallback() {
+    this.fileInput.removeEventListener(
+      "change",
+      this.#handleFileInput.bind(this)
+    );
+  }
 
   #updateRefs() {
     requestAnimationFrame(() => {
@@ -1815,12 +1821,47 @@ class FigImage extends HTMLElement {
 
         this.fileInput.addEventListener(
           "change",
-          this.handleFileInput.bind(this)
+          this.#handleFileInput.bind(this)
         );
       }
+      if (this.src) {
+        this.#loadImage(this.src);
+      }
+    });
+  }
+  async #loadImage(src) {
+    // Get blob from canvas
+    await new Promise((resolve) => {
+      this.image = new Image();
+      this.image.crossOrigin = "Anonymous";
+
+      this.image.onload = async () => {
+        this.aspectRatio = this.image.width / this.image.height;
+        this.style.setProperty(
+          "--aspect-ratio",
+          `${this.image.width}/${this.image.height}`
+        );
+        resolve();
+
+        // Create canvas to extract blob and base64 from image
+        const canvas = document.createElement("canvas");
+        const ctx = canvas.getContext("2d");
+        canvas.width = this.image.width;
+        canvas.height = this.image.height;
+        ctx.drawImage(this.image, 0, 0);
+
+        // Get base64 from canvas
+        this.base64 = canvas.toDataURL();
+
+        // Get blob from canvas
+        canvas.toBlob((blob) => {
+          this.blob = URL.createObjectURL(blob);
+        });
+      };
+      this.image.src = src;
     });
   }
-  async handleFileInput(e) {
+  async #handleFileInput(e) {
     this.blob = URL.createObjectURL(e.target.files[0]);
     //set base64 url
     const reader = new FileReader();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rogieking/figui3",
-  "version": "1.6.5",
+  "version": "1.6.6",
   "module": "index.ts",
   "type": "module",
   "devDependencies": {