p5.html 0.0.1 → 0.0.2

package/dist/p5.html.js

@@ -41,6 +41,40 @@
     }
   };
 
+  // src/elements/capture.ts
+  var P5Capture = class extends P5Element {
+    video;
+    replaceVideo = false;
+    flipped = Boolean(this.getAttribute("flipped"));
+    static observedAttributes = ["flipped"];
+    setup(p) {
+      this.initializeVideo(p);
+      P5Element.setupChildren(this, p);
+    }
+    draw(p) {
+      if (this.replaceVideo) {
+        this.initializeVideo(p);
+        this.replaceVideo = false;
+      }
+      P5Element.drawChildren(this, p);
+    }
+    attributeChangedCallback(name, oldValue, newValue) {
+      if (name === "flipped" && oldValue !== newValue) {
+        this.flipped = newValue?.toLowerCase() === "true";
+        this.replaceVideo = true;
+      }
+    }
+    initializeVideo(p) {
+      this.video?.remove();
+      this.video = p.createCapture("video", { flipped: this.flipped });
+      if (p.p5Root) {
+        this.video.size(p.p5Root.width, p.p5Root.height);
+      }
+      this.video.hide();
+    }
+  };
+  customElements.define("p5-capture", P5Capture);
+
   // src/elements/circle.ts
   var P5Circle = class extends P5Element {
     observedAttributes = ["d"];
@@ -86,6 +120,57 @@
   };
   customElements.define("p5-ellipse", P5Ellipse);
 
+  // src/elements/image.ts
+  var P5Image = class extends P5Element {
+    src = "";
+    fromCapture = "";
+    dirty = false;
+    capture = null;
+    image = null;
+    static observedAttributes = ["src", "from-capture"];
+    attributeChangedCallback(name, oldVal, newVal) {
+      if (oldVal !== newVal) {
+        this.dirty = true;
+        if (name === "from-capture") {
+          this.fromCapture = newVal;
+        } else if (name === "src") {
+          this.src = newVal;
+        }
+      }
+    }
+    setup(p) {
+      this.updateProvider(p);
+    }
+    draw(p) {
+      if (this.dirty) {
+        this.updateProvider(p);
+        this.dirty = false;
+      }
+      if (this.capture && this.capture.video) {
+        let video = this.capture.video;
+        this.cssContext(p, () => {
+          p.image(video, 0, 0);
+        });
+      } else if (this.image) {
+        let image = this.image;
+        this.cssContext(p, () => {
+          p.image(image, 0, 0);
+        });
+      }
+    }
+    async updateProvider(p) {
+      let capture = document.getElementById(this.fromCapture);
+      this.capture = null;
+      this.image = null;
+      if (capture instanceof P5Capture) {
+        this.capture = capture;
+      } else if (this.src !== "") {
+        this.image = await p.loadImage(this.src);
+      }
+    }
+  };
+  customElements.define("p5-image", P5Image);
+
   // src/elements/rect.ts
   var P5Rect = class extends P5Element {
     observedAttributes = ["w", "h"];
@@ -193,7 +278,9 @@
     width = Number(this.getAttribute("width")) ?? 0;
     height = Number(this.getAttribute("height")) ?? 0;
     dimensionsChanged = false;
-    static observedAttributes = ["width", "height"];
+    paused = this.getAttribute("paused")?.toLowerCase() === "true";
+    ranFrameOne = false;
+    static observedAttributes = ["width", "height", "paused"];
     connectedCallback() {
       const globalMode = window.setup && typeof window.setup === "function" || window.draw && typeof window.draw === "function";
       if (!("p5" in window) || globalMode) {
@@ -217,8 +304,15 @@
       if (name === "width" || name === "height") {
         this.dimensionsChanged = true;
       }
+      if (name === "paused") {
+        this.paused = newValue?.toLowerCase() === "true";
+        if (this.p5 && !this.paused) {
+          this.p5.loop();
+        }
+      }
     }
     presetup(p) {
+      this.p5 = p;
       p.createCanvas(this.width, this.height);
       this.drawBackground(p);
     }
@@ -226,6 +320,12 @@
       P5Element.setupChildren(this, p);
     }
     predraw(p) {
+      if (this.paused && this.ranFrameOne) {
+        p.noLoop();
+      } else {
+        p.loop();
+        this.ranFrameOne = true;
+      }
       this.drawBackground(p);
     }
     draw(p) {

package/dist/p5.html.min.js

@@ -0,0 +1 @@
+(()=>{var s=class r extends HTMLElement{setup(t){r.setupChildren(this,t)}draw(t){r.drawChildren(this,t)}cssContext(t,i){t.stroke(getComputedStyle(this).getPropertyValue("color")),t.fill(getComputedStyle(this).getPropertyValue("background"));let e=Number(getComputedStyle(this).getPropertyValue("opacity"));t.tint(255,e*255),i(t),t.noStroke(),t.noFill(),t.noTint()}static setupChildren(t,i){Array.from(t.children).forEach(e=>{e instanceof r?e.setup(i):e.children&&r.setupChildren(e,i)})}static drawChildren(t,i){Array.from(t.children).forEach(e=>{e instanceof r?e.draw(i):e.children&&r.drawChildren(e,i)})}};var o=class extends s{video;replaceVideo=!1;flipped=!!this.getAttribute("flipped");static observedAttributes=["flipped"];setup(t){this.initializeVideo(t),s.setupChildren(this,t)}draw(t){this.replaceVideo&&(this.initializeVideo(t),this.replaceVideo=!1),s.drawChildren(this,t)}attributeChangedCallback(t,i,e){t==="flipped"&&i!==e&&(this.flipped=e?.toLowerCase()==="true",this.replaceVideo=!0)}initializeVideo(t){this.video?.remove(),this.video=t.createCapture("video",{flipped:this.flipped}),t.p5Root&&this.video.size(t.p5Root.width,t.p5Root.height),this.video.hide()}};customElements.define("p5-capture",o);var a=class extends s{observedAttributes=["d"];diameter=0;connectedCallback(){this.diameter=Number(this.getAttribute("d"))||0}attributeChangedCallback(t,i,e){t==="d"&&(this.diameter=Number(e)||0)}draw(t){this.cssContext(t,()=>{t.circle(0,0,this.diameter)})}};customElements.define("p5-circle",a);var d=class extends s{observedAttributes=["w","h"];width=0;height=0;connectedCallback(){this.width=Number(this.getAttribute("w"))||0,this.height=Number(this.getAttribute("h"))||0}attributeChangedCallback(t,i,e){t==="w"&&(this.width=Number(e)||0),t==="h"&&(this.height=Number(e)||0)}draw(t){this.cssContext(t,()=>{t.ellipse(0,0,this.width,this.height)})}};customElements.define("p5-ellipse",d);var h=class extends s{src="";fromCapture="";dirty=!1;capture=null;image=null;static observedAttributes=["src","from-capture"];attributeChangedCallback(t,i,e){i!==e&&(this.dirty=!0,t==="from-capture"?this.fromCapture=e:t==="src"&&(this.src=e))}setup(t){this.updateProvider(t)}draw(t){if(this.dirty&&(this.updateProvider(t),this.dirty=!1),this.capture&&this.capture.video){let i=this.capture.video;this.cssContext(t,()=>{t.image(i,0,0)})}else if(this.image){let i=this.image;this.cssContext(t,()=>{t.image(i,0,0)})}}async updateProvider(t){let i=document.getElementById(this.fromCapture);this.capture=null,this.image=null,i instanceof o?this.capture=i:this.src!==""&&(this.image=await t.loadImage(this.src))}};customElements.define("p5-image",h);var p=class extends s{observedAttributes=["w","h"];width=0;height=0;connectedCallback(){this.width=Number(this.getAttribute("w"))||0,this.height=Number(this.getAttribute("h"))||0}attributeChangedCallback(t,i,e){t==="w"&&(this.width=Number(e)||0),t==="h"&&(this.height=Number(e)||0)}draw(t){this.cssContext(t,()=>{t.rect(0,0,this.width,this.height)})}};customElements.define("p5-rect",p);var l=class extends s{angle=Number(this.getAttribute("angle")??0);static observedAttributes=["angle"];draw(t){t.push(),t.rotate(this.angle),s.drawChildren(this,t),t.pop()}attributeChangedCallback(t,i,e){t==="angle"&&(this.angle=Number(e)??0)}};customElements.define("p5-rotate",l);var u=class extends s{x=Number(this.getAttribute("x")??0);y=Number(this.getAttribute("y")??0);static observedAttributes=["x","y"];draw(t){t.push(),t.scale(this.x,this.y),s.drawChildren(this,t),t.pop()}attributeChangedCallback(t,i,e){t==="x"&&(this.x=Number(e)??0),t==="y"&&(this.y=Number(e)??0)}};customElements.define("p5-scale",u);var m=class extends s{x=Number(this.getAttribute("x")??0);y=Number(this.getAttribute("y")??0);static observedAttributes=["x","y"];draw(t){t.push(),t.translate(this.x,this.y),s.drawChildren(this,t),t.pop()}attributeChangedCallback(t,i,e){t==="x"&&(this.x=Number(e)??0),t==="y"&&(this.y=Number(e)??0)}};customElements.define("p5-translate",m);var f=class extends s{content=this.innerText;connectedCallback(){this.style.display="none"}draw(t){this.cssContext(t,()=>{t.text(this.content,0,0)})}};customElements.define("p5-text",f);var n=class extends s{p5=null;width=Number(this.getAttribute("width"))??0;height=Number(this.getAttribute("height"))??0;dimensionsChanged=!1;paused=this.getAttribute("paused")?.toLowerCase()==="true";ranFrameOne=!1;static observedAttributes=["width","height","paused"];connectedCallback(){let t=window.setup&&typeof window.setup=="function"||window.draw&&typeof window.draw=="function";if(!("p5"in window)||t)return;let i=new window.p5(e=>{e.setup=()=>{},e.draw=()=>{}},this);i.p5Root=this}attributeChangedCallback(t,i,e){t==="width"&&(this.width=Number(e)??0),t==="height"&&(this.height=Number(e)??0),(t==="width"||t==="height")&&(this.dimensionsChanged=!0),t==="paused"&&(this.paused=e?.toLowerCase()==="true",this.p5&&!this.paused&&this.p5.loop())}presetup(t){this.p5=t,t.createCanvas(this.width,this.height),this.drawBackground(t)}setup(t){s.setupChildren(this,t)}predraw(t){this.paused&&this.ranFrameOne?t.noLoop():(t.loop(),this.ranFrameOne=!0),this.drawBackground(t)}draw(t){this.dimensionsChanged&&(t.resizeCanvas(this.width,this.height),this.dimensionsChanged=!1),s.drawChildren(this,t)}drawBackground(t){let i=getComputedStyle(this).background;i&&i!=="none"&&i!=="transparent"&&t.background(i)}};window.p5&&window.p5.registerAddon((r,t,i)=>{t.p5Root=null,i.presetup=function(){if(this.p5Root===null){let e=document.getElementsByTagName("p5-canvas");e.length>0&&(this.p5Root=e[0])}this.p5Root!==null&&this.p5Root.presetup(this)},i.postsetup=function(){this.p5Root!==null&&this.p5Root.setup(this)},i.predraw=function(){this.p5Root!==null&&this.p5Root.predraw(this)},i.postdraw=function(){this.p5Root!==null&&this.p5Root.draw(this)},i.remove=function(){this.p5Root!==null&&(this.p5Root.remove(),this.p5Root=null)}});customElements.define("p5-canvas",n);})();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "p5.html",
-  "version": "0.0.1",
+  "version": "0.0.2",
   "description": "Processing for HTML!",
   "author": "a@ndr.ooo",
   "license": "LGPL-3.0-only",
@@ -11,7 +11,7 @@
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1",
     "dev": "esbuild --bundle src/index.ts --outfile=www/p5.html.js --watch --servedir=www --sourcemap",
-    "build": "esbuild --bundle src/index.ts --outfile=dist/p5.html.js"
+    "build": "node build.esbuild.mjs"
   },
   "devDependencies": {
     "@types/p5": "1.7.7",