@rogieking/figui3 1.8.1 → 1.8.3

package/example.html

@@ -26,6 +26,8 @@
         <h2><label>Effects/</label>UI3 Components</h2>
     </fig-header>
 
+
+
     <fig-input-text disabled
                     value="Disabled"><span slot="append">%</span></fig-input-text>
 
@@ -71,7 +73,10 @@
 
     <fig-content>
 
+
         <br /><br /><br /><br /><br /><br /><br /><br /><br />
+
+
         <hstack>
             <fig-tooltip text="Tooltip"
                          delay="0">
@@ -112,6 +117,7 @@
 
         </hstack>
         <br /><br /><br /><br /><br /><br /><br /><br /><br />
+
         <fig-button type="link"
                     href="https://www.google.com">
             <svg width="24"
@@ -284,6 +290,17 @@
                        label="Upload image"
                        size="large"></fig-image>
         </fig-field>
+        <script>
+            function updateImages() {
+                const images = document.querySelectorAll('fig-image');
+                images.forEach(image => {
+                    //image.setAttribute("src", "https://picsum.photos/200?random=" + Math.random());
+                    image.src = "https://picsum.photos/200?random=" + Math.random();
+                });
+            }
+        </script>
+
+        <button onclick="updateImages()">Change src</button>
 
         <br /><br />
         <fig-header>

package/fig.js

@@ -1869,12 +1869,13 @@ window.customElements.define("fig-combo-input", FigComboInput);
  * @attr {boolean} disabled - Whether the chip is disabled
  */
 class FigChit extends HTMLElement {
+  #src = null;
   constructor() {
     super();
   }
   connectedCallback() {
     this.type = this.getAttribute("type") || "color";
-    this.src = this.getAttribute("src") || "";
+    this.#src = this.getAttribute("src") || "";
     this.value = this.getAttribute("value") || "#000000";
     this.size = this.getAttribute("size") || "small";
     this.disabled = this.getAttribute("disabled") === "true";
@@ -1887,15 +1888,23 @@ class FigChit extends HTMLElement {
   }
   #updateSrc(src) {
     if (src) {
-      this.src = src;
+      this.#src = src;
       this.style.setProperty("--src", `url(${src})`);
     } else {
       this.style.removeProperty("--src");
+      this.#src = null;
     }
   }
   static get observedAttributes() {
     return ["src", "value", "disabled"];
   }
+  get src() {
+    return this.#src;
+  }
+  set src(value) {
+    this.#src = value;
+    this.setAttribute("src", value);
+  }
   attributeChangedCallback(name, oldValue, newValue) {
     switch (name) {
       case "src":
@@ -1948,12 +1957,13 @@ class FigImage extends HTMLElement {
     }</div>`;
   }
   connectedCallback() {
-    this.src = this.getAttribute("src") || "";
+    this.#src = this.getAttribute("src") || "";
     this.upload = this.getAttribute("upload") === "true";
     this.download = this.getAttribute("download") === "true";
     this.label = this.getAttribute("label") || "Upload";
     this.size = this.getAttribute("size") || "small";
     this.innerHTML = this.#getInnerHTML();
+    this.#updateRefs();
   }
   disconnectedCallback() {
     this.fileInput.removeEventListener(
@@ -1978,7 +1988,6 @@ class FigImage extends HTMLElement {
         );
       }
       if (this.download) {
-        console.log("binding download");
         this.downloadButton = this.querySelector("fig-button[type='download']");
         this.downloadButton.removeEventListener(
           "click",
@@ -2033,13 +2042,21 @@ class FigImage extends HTMLElement {
 
         // Get blob from canvas
         canvas.toBlob((blob) => {
-          this.blob = URL.createObjectURL(blob);
+          if (this.blob) {
+            URL.revokeObjectURL(this.blob);
+          }
+          if (blob) {
+            this.blob = URL.createObjectURL(blob);
+          }
         });
       };
       this.image.src = src;
     });
   }
   async #handleFileInput(e) {
+    if (this.blob) {
+      URL.revokeObjectURL(this.blob);
+    }
     this.blob = URL.createObjectURL(e.target.files[0]);
     //set base64 url
     const reader = new FileReader();
@@ -2079,11 +2096,15 @@ class FigImage extends HTMLElement {
   }
   set src(value) {
     this.#src = value;
+    this.setAttribute("src", value);
   }
 
   attributeChangedCallback(name, oldValue, newValue) {
     if (name === "src") {
-      this.src = newValue;
+      //this.src = newValue;
+      if (!this.chit) {
+        this.chit = this.querySelector("fig-chit");
+      }
       if (this.chit) {
         this.chit.setAttribute("src", this.#src);
       }

package/package.json

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