p5.html 0.0.1 → 0.0.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (5) hide show
  1. package/dist/p5.html.js +102 -1
  2. package/dist/p5.html.js.map +7 -0
  3. package/dist/p5.html.min.js +2 -0
  4. package/dist/p5.html.min.js.map +7 -0
  5. package/package.json +6 -3
package/dist/p5.html.js CHANGED
@@ -41,6 +41,40 @@
41
41
  }
42
42
  };
43
43
 
44
+ // src/elements/capture.ts
45
+ var P5Capture = class extends P5Element {
46
+ video;
47
+ replaceVideo = false;
48
+ flipped = Boolean(this.getAttribute("flipped"));
49
+ static observedAttributes = ["flipped"];
50
+ setup(p) {
51
+ this.initializeVideo(p);
52
+ P5Element.setupChildren(this, p);
53
+ }
54
+ draw(p) {
55
+ if (this.replaceVideo) {
56
+ this.initializeVideo(p);
57
+ this.replaceVideo = false;
58
+ }
59
+ P5Element.drawChildren(this, p);
60
+ }
61
+ attributeChangedCallback(name, oldValue, newValue) {
62
+ if (name === "flipped" && oldValue !== newValue) {
63
+ this.flipped = newValue?.toLowerCase() === "true";
64
+ this.replaceVideo = true;
65
+ }
66
+ }
67
+ initializeVideo(p) {
68
+ this.video?.remove();
69
+ this.video = p.createCapture("video", { flipped: this.flipped });
70
+ if (p.p5Root) {
71
+ this.video.size(p.p5Root.width, p.p5Root.height);
72
+ }
73
+ this.video.hide();
74
+ }
75
+ };
76
+ customElements.define("p5-capture", P5Capture);
77
+
44
78
  // src/elements/circle.ts
45
79
  var P5Circle = class extends P5Element {
46
80
  observedAttributes = ["d"];
@@ -86,6 +120,57 @@
86
120
  };
87
121
  customElements.define("p5-ellipse", P5Ellipse);
88
122
 
123
+ // src/elements/image.ts
124
+ var P5Image = class extends P5Element {
125
+ src = "";
126
+ fromCapture = "";
127
+ dirty = false;
128
+ capture = null;
129
+ image = null;
130
+ static observedAttributes = ["src", "from-capture"];
131
+ attributeChangedCallback(name, oldVal, newVal) {
132
+ if (oldVal !== newVal) {
133
+ this.dirty = true;
134
+ if (name === "from-capture") {
135
+ this.fromCapture = newVal;
136
+ } else if (name === "src") {
137
+ this.src = newVal;
138
+ }
139
+ }
140
+ }
141
+ setup(p) {
142
+ this.updateProvider(p);
143
+ }
144
+ draw(p) {
145
+ if (this.dirty) {
146
+ this.updateProvider(p);
147
+ this.dirty = false;
148
+ }
149
+ if (this.capture && this.capture.video) {
150
+ let video = this.capture.video;
151
+ this.cssContext(p, () => {
152
+ p.image(video, 0, 0);
153
+ });
154
+ } else if (this.image) {
155
+ let image = this.image;
156
+ this.cssContext(p, () => {
157
+ p.image(image, 0, 0);
158
+ });
159
+ }
160
+ }
161
+ async updateProvider(p) {
162
+ let capture = document.getElementById(this.fromCapture);
163
+ this.capture = null;
164
+ this.image = null;
165
+ if (capture instanceof P5Capture) {
166
+ this.capture = capture;
167
+ } else if (this.src !== "") {
168
+ this.image = await p.loadImage(this.src);
169
+ }
170
+ }
171
+ };
172
+ customElements.define("p5-image", P5Image);
173
+
89
174
  // src/elements/rect.ts
90
175
  var P5Rect = class extends P5Element {
91
176
  observedAttributes = ["w", "h"];
@@ -193,7 +278,9 @@
193
278
  width = Number(this.getAttribute("width")) ?? 0;
194
279
  height = Number(this.getAttribute("height")) ?? 0;
195
280
  dimensionsChanged = false;
196
- static observedAttributes = ["width", "height"];
281
+ paused = this.getAttribute("paused")?.toLowerCase() === "true";
282
+ ranFrameOne = false;
283
+ static observedAttributes = ["width", "height", "paused"];
197
284
  connectedCallback() {
198
285
  const globalMode = window.setup && typeof window.setup === "function" || window.draw && typeof window.draw === "function";
199
286
  if (!("p5" in window) || globalMode) {
@@ -217,8 +304,15 @@
217
304
  if (name === "width" || name === "height") {
218
305
  this.dimensionsChanged = true;
219
306
  }
307
+ if (name === "paused") {
308
+ this.paused = newValue?.toLowerCase() === "true";
309
+ if (this.p5 && !this.paused) {
310
+ this.p5.loop();
311
+ }
312
+ }
220
313
  }
221
314
  presetup(p) {
315
+ this.p5 = p;
222
316
  p.createCanvas(this.width, this.height);
223
317
  this.drawBackground(p);
224
318
  }
@@ -226,6 +320,12 @@
226
320
  P5Element.setupChildren(this, p);
227
321
  }
228
322
  predraw(p) {
323
+ if (this.paused && this.ranFrameOne) {
324
+ p.noLoop();
325
+ } else {
326
+ p.loop();
327
+ this.ranFrameOne = true;
328
+ }
229
329
  this.drawBackground(p);
230
330
  }
231
331
  draw(p) {
@@ -283,3 +383,4 @@
283
383
  }
284
384
  customElements.define("p5-canvas", P5Canvas);
285
385
  })();
386
+ //# sourceMappingURL=p5.html.js.map
package/dist/p5.html.js.map ADDED
@@ -0,0 +1,7 @@
1
+ {
2
+ "version": 3,
3
+ "sources": ["../src/element.ts", "../src/elements/capture.ts", "../src/elements/circle.ts", "../src/elements/ellipse.ts", "../src/elements/image.ts", "../src/elements/rect.ts", "../src/elements/rotate.ts", "../src/elements/scale.ts", "../src/elements/translate.ts", "../src/elements/text.ts", "../src/canvas.ts", "../src/index.ts"],
4
+ "sourcesContent": ["import type p5 from \"p5\";\n\nexport default class P5Element extends HTMLElement {\n setup(p: p5) {\n P5Element.setupChildren(this, p);\n }\n\n draw(p: p5) {\n P5Element.drawChildren(this, p);\n }\n\n cssContext(p: p5, callback: (p?: p5) => void) {\n p.stroke(getComputedStyle(this).getPropertyValue(\"color\"));\n p.fill(getComputedStyle(this).getPropertyValue(\"background\"));\n let opacity = Number(getComputedStyle(this).getPropertyValue(\"opacity\"));\n p.tint(255, opacity * 255);\n\n callback(p);\n\n p.noStroke();\n p.noFill();\n p.noTint();\n }\n\n static setupChildren(node: Element, p: p5) {\n Array.from(node.children).forEach((child: Element) => {\n if (child instanceof P5Element) {\n child.setup(p);\n } else {\n if (child.children) {\n P5Element.setupChildren(child, p);\n }\n }\n });\n }\n\n static drawChildren(node: Element, p: p5) {\n Array.from(node.children).forEach((child: Element) => {\n if (child instanceof P5Element) {\n child.draw(p);\n } else {\n if (child.children) {\n P5Element.drawChildren(child, p);\n }\n }\n });\n }\n}\n", "import P5Element from \"../element\";\nimport type p5 from \"p5\";\nimport { P5Html } from \"../types\";\n\nexport default class P5Capture extends P5Element {\n video?: p5.Element;\n replaceVideo = false;\n flipped: boolean = Boolean(this.getAttribute(\"flipped\"));\n\n static observedAttributes = [\"flipped\"];\n\n setup(p: P5Html) {\n this.initializeVideo(p);\n P5Element.setupChildren(this, p);\n }\n\n draw(p: P5Html) {\n if (this.replaceVideo) {\n this.initializeVideo(p);\n this.replaceVideo = false;\n }\n P5Element.drawChildren(this, p);\n }\n\n attributeChangedCallback(\n name: string,\n oldValue: string,\n newValue: string | null,\n ) {\n if (name === \"flipped\" && oldValue !== newValue) {\n this.flipped = newValue?.toLowerCase() === \"true\";\n this.replaceVideo = true;\n }\n }\n\n initializeVideo(p: P5Html) {\n this.video?.remove();\n // @ts-ignore\n this.video = p.createCapture(\"video\", { flipped: this.flipped });\n if (p.p5Root) {\n this.video.size(p.p5Root.width, p.p5Root.height);\n }\n this.video.hide();\n }\n}\n\ncustomElements.define(\"p5-capture\", P5Capture);\n", "import P5Element from \"../element\";\nimport type p5 from \"p5\";\n\nclass P5Circle extends P5Element {\n observedAttributes = [\"d\"];\n\n diameter: number = 0;\n\n connectedCallback() {\n this.diameter = Number(this.getAttribute(\"d\")) || 0;\n }\n\n attributeChangedCallback(name: string, oldValue: string, newValue: string) {\n if (name === \"d\") {\n this.diameter = Number(newValue) || 0;\n }\n }\n\n draw(p: p5) {\n this.cssContext(p, () => {\n p.circle(0, 0, this.diameter);\n });\n }\n}\n\ncustomElements.define(\"p5-circle\", P5Circle);\n", "import P5Element from \"../element\";\nimport type p5 from \"p5\";\n\nclass P5Ellipse extends P5Element {\n observedAttributes = [\"w\", \"h\"];\n\n width: number = 0;\n height: number = 0;\n\n connectedCallback() {\n this.width = Number(this.getAttribute(\"w\")) || 0;\n this.height = Number(this.getAttribute(\"h\")) || 0;\n }\n\n attributeChangedCallback(name: string, oldValue: string, newValue: string) {\n if (name === \"w\") {\n this.width = Number(newValue) || 0;\n }\n if (name === \"h\") {\n this.height = Number(newValue) || 0;\n }\n }\n\n draw(p: p5) {\n this.cssContext(p, () => {\n p.ellipse(0, 0, this.width, this.height);\n });\n }\n}\n\ncustomElements.define(\"p5-ellipse\", P5Ellipse);\n", "import type p5 from \"p5\";\nimport P5Capture from \"./capture\";\nimport P5Element from \"../element\";\n\nexport default class P5Image extends P5Element {\n src: string = \"\";\n fromCapture: string = \"\";\n dirty = false;\n capture: P5Capture | null = null;\n image: p5.Image | null = null;\n\n static observedAttributes = [\"src\", \"from-capture\"];\n\n attributeChangedCallback(name: string, oldVal: string, newVal: string) {\n if (oldVal !== newVal) {\n this.dirty = true;\n if (name === \"from-capture\") {\n this.fromCapture = newVal;\n } else if (name === \"src\") {\n this.src = newVal;\n }\n }\n }\n\n setup(p: p5) {\n this.updateProvider(p);\n }\n\n draw(p: p5) {\n if (this.dirty) {\n this.updateProvider(p);\n this.dirty = false;\n }\n if (this.capture && this.capture.video) {\n let video = this.capture.video;\n this.cssContext(p, () => {\n p.image(video, 0, 0);\n });\n } else if (this.image) {\n let image = this.image;\n this.cssContext(p, () => {\n p.image(image, 0, 0);\n });\n }\n }\n\n async updateProvider(p: p5) {\n let capture = document.getElementById(this.fromCapture);\n this.capture = null;\n this.image = null;\n if (capture instanceof P5Capture) {\n this.capture = capture;\n } else if (this.src !== \"\") {\n this.image = await p.loadImage(this.src);\n }\n }\n}\n\ncustomElements.define(\"p5-image\", P5Image);\n", "import P5Element from \"../element\";\nimport type p5 from \"p5\";\n\nclass P5Rect extends P5Element {\n observedAttributes = [\"w\", \"h\"];\n\n width: number = 0;\n height: number = 0;\n\n connectedCallback() {\n this.width = Number(this.getAttribute(\"w\")) || 0;\n this.height = Number(this.getAttribute(\"h\")) || 0;\n }\n\n attributeChangedCallback(name: string, oldValue: string, newValue: string) {\n if (name === \"w\") {\n this.width = Number(newValue) || 0;\n }\n if (name === \"h\") {\n this.height = Number(newValue) || 0;\n }\n }\n\n draw(p: p5) {\n this.cssContext(p, () => {\n p.rect(0, 0, this.width, this.height);\n });\n }\n}\n\ncustomElements.define(\"p5-rect\", P5Rect);\n", "import P5Element from \"../element\";\nimport p5 from \"p5\";\n\nclass P5Rotate extends P5Element {\n angle: number = Number(this.getAttribute(\"angle\") ?? 0);\n static observedAttributes = [\"angle\"];\n\n draw(p: p5) {\n p.push();\n p.rotate(this.angle);\n P5Element.drawChildren(this, p);\n p.pop();\n }\n\n attributeChangedCallback(name: string, oldValue: string, newValue: string) {\n if (name === \"angle\") {\n this.angle = Number(newValue) ?? 0;\n }\n }\n}\n\ncustomElements.define(\"p5-rotate\", P5Rotate);\n", "import P5Element from \"../element\";\nimport p5 from \"p5\";\n\nclass P5Scale extends P5Element {\n x: number = Number(this.getAttribute(\"x\") ?? 0);\n y: number = Number(this.getAttribute(\"y\") ?? 0);\n static observedAttributes = [\"x\", \"y\"];\n\n draw(p: p5) {\n p.push();\n p.scale(this.x, this.y);\n P5Element.drawChildren(this, p);\n p.pop();\n }\n\n attributeChangedCallback(name: string, oldValue: string, newValue: string) {\n if (name === \"x\") {\n this.x = Number(newValue) ?? 0;\n }\n if (name === \"y\") {\n this.y = Number(newValue) ?? 0;\n }\n }\n}\n\ncustomElements.define(\"p5-scale\", P5Scale);\n", "import P5Element from \"../element\";\nimport p5 from \"p5\";\n\nclass P5Translate extends P5Element {\n x: number = Number(this.getAttribute(\"x\") ?? 0);\n y: number = Number(this.getAttribute(\"y\") ?? 0);\n static observedAttributes = [\"x\", \"y\"];\n\n draw(p: p5) {\n p.push();\n p.translate(this.x, this.y);\n P5Element.drawChildren(this, p);\n p.pop();\n }\n\n attributeChangedCallback(name: string, oldValue: string, newValue: string) {\n if (name === \"x\") {\n this.x = Number(newValue) ?? 0;\n }\n if (name === \"y\") {\n this.y = Number(newValue) ?? 0;\n }\n }\n}\n\ncustomElements.define(\"p5-translate\", P5Translate);\n", "import P5Element from \"../element\";\nimport type p5 from \"p5\";\n\nclass P5Text extends P5Element {\n content = this.innerText;\n\n connectedCallback() {\n this.style.display = \"none\";\n }\n\n draw(p: p5) {\n this.cssContext(p, () => {\n p.text(this.content, 0, 0);\n });\n }\n}\n\ncustomElements.define(\"p5-text\", P5Text);\n", "import P5Element from \"./element\";\nimport type p5 from \"p5\";\n\nexport default class P5Canvas extends P5Element {\n p5: p5 | null = null;\n width: number = Number(this.getAttribute(\"width\")) ?? 0;\n height: number = Number(this.getAttribute(\"height\")) ?? 0;\n dimensionsChanged: boolean = false;\n paused = this.getAttribute(\"paused\")?.toLowerCase() === \"true\";\n ranFrameOne = false;\n\n static observedAttributes = [\"width\", \"height\", \"paused\"];\n\n connectedCallback() {\n const globalMode =\n (window.setup && typeof window.setup === \"function\") ||\n (window.draw && typeof window.draw === \"function\");\n if (!(\"p5\" in window) || globalMode) {\n return;\n }\n let p5Inst = new window.p5((p: p5) => {\n p.setup = () => {};\n p.draw = () => {};\n }, this);\n p5Inst.p5Root = this;\n }\n\n attributeChangedCallback(\n name: string,\n oldValue: string,\n newValue: string | null,\n ) {\n if (name === \"width\") {\n this.width = Number(newValue) ?? 0;\n }\n if (name === \"height\") {\n this.height = Number(newValue) ?? 0;\n }\n if (name === \"width\" || name === \"height\") {\n this.dimensionsChanged = true;\n }\n if (name === \"paused\") {\n this.paused = newValue?.toLowerCase() === \"true\";\n if (this.p5 && !this.paused) {\n this.p5.loop();\n }\n }\n }\n\n presetup(p: p5) {\n this.p5 = p;\n p.createCanvas(this.width, this.height);\n this.drawBackground(p);\n }\n\n setup(p: p5) {\n P5Element.setupChildren(this, p);\n }\n\n predraw(p: p5) {\n if (this.paused && this.ranFrameOne) {\n p.noLoop();\n } else {\n p.loop();\n this.ranFrameOne = true;\n }\n this.drawBackground(p);\n }\n\n draw(p: p5) {\n if (this.dimensionsChanged) {\n p.resizeCanvas(this.width, this.height);\n this.dimensionsChanged = false;\n }\n P5Element.drawChildren(this, p);\n }\n\n drawBackground(p: p5) {\n let background = getComputedStyle(this).background;\n if (background && background !== \"none\" && background !== \"transparent\") {\n p.background(background);\n }\n }\n}\n", "import \"./elements/capture\";\nimport \"./elements/circle\";\nimport \"./elements/ellipse\";\nimport \"./elements/image\";\nimport \"./elements/rect\";\nimport \"./elements/rotate\";\nimport \"./elements/scale\";\nimport \"./elements/translate\";\nimport \"./elements/text\";\nimport P5Canvas from \"./canvas\";\nimport P5Element from \"./element\";\nimport type p5 from \"p5\";\nimport type { P5Html, P5HtmlExtension } from \"./types\";\n\ndeclare global {\n interface Window {\n setup?: () => void;\n draw?: () => void;\n p5?: any;\n }\n}\n\nif (window.p5) {\n window.p5.registerAddon((p5: p5, fn: P5Html, lifecycles: any) => {\n fn.p5Root = null;\n lifecycles.presetup = function () {\n if (this.p5Root === null) {\n const canvases = document.getElementsByTagName(\"p5-canvas\");\n if (canvases.length > 0) {\n this.p5Root = canvases[0];\n }\n }\n if (this.p5Root !== null) {\n this.p5Root.presetup(this);\n }\n };\n lifecycles.postsetup = function () {\n if (this.p5Root !== null) {\n this.p5Root.setup(this);\n }\n };\n lifecycles.predraw = function () {\n if (this.p5Root !== null) {\n this.p5Root.predraw(this);\n }\n };\n lifecycles.postdraw = function () {\n if (this.p5Root !== null) {\n this.p5Root.draw(this);\n }\n };\n lifecycles.remove = function () {\n if (this.p5Root !== null) {\n this.p5Root.remove();\n this.p5Root = null;\n }\n };\n });\n}\n\n// This must be defined after the addon is set up\ncustomElements.define(\"p5-canvas\", P5Canvas);\n\nexport { P5Element, P5Html, P5HtmlExtension };\n"],
5
+ "mappings": "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",
6
+ "names": []
7
+ }
package/dist/p5.html.min.js ADDED
@@ -0,0 +1,2 @@
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);})();
2
+ //# sourceMappingURL=p5.html.min.js.map
package/dist/p5.html.min.js.map ADDED
@@ -0,0 +1,7 @@
1
+ {
2
+ "version": 3,
3
+ "sources": ["../src/element.ts", "../src/elements/capture.ts", "../src/elements/circle.ts", "../src/elements/ellipse.ts", "../src/elements/image.ts", "../src/elements/rect.ts", "../src/elements/rotate.ts", "../src/elements/scale.ts", "../src/elements/translate.ts", "../src/elements/text.ts", "../src/canvas.ts", "../src/index.ts"],
4
+ "sourcesContent": ["import type p5 from \"p5\";\n\nexport default class P5Element extends HTMLElement {\n setup(p: p5) {\n P5Element.setupChildren(this, p);\n }\n\n draw(p: p5) {\n P5Element.drawChildren(this, p);\n }\n\n cssContext(p: p5, callback: (p?: p5) => void) {\n p.stroke(getComputedStyle(this).getPropertyValue(\"color\"));\n p.fill(getComputedStyle(this).getPropertyValue(\"background\"));\n let opacity = Number(getComputedStyle(this).getPropertyValue(\"opacity\"));\n p.tint(255, opacity * 255);\n\n callback(p);\n\n p.noStroke();\n p.noFill();\n p.noTint();\n }\n\n static setupChildren(node: Element, p: p5) {\n Array.from(node.children).forEach((child: Element) => {\n if (child instanceof P5Element) {\n child.setup(p);\n } else {\n if (child.children) {\n P5Element.setupChildren(child, p);\n }\n }\n });\n }\n\n static drawChildren(node: Element, p: p5) {\n Array.from(node.children).forEach((child: Element) => {\n if (child instanceof P5Element) {\n child.draw(p);\n } else {\n if (child.children) {\n P5Element.drawChildren(child, p);\n }\n }\n });\n }\n}\n", "import P5Element from \"../element\";\nimport type p5 from \"p5\";\nimport { P5Html } from \"../types\";\n\nexport default class P5Capture extends P5Element {\n video?: p5.Element;\n replaceVideo = false;\n flipped: boolean = Boolean(this.getAttribute(\"flipped\"));\n\n static observedAttributes = [\"flipped\"];\n\n setup(p: P5Html) {\n this.initializeVideo(p);\n P5Element.setupChildren(this, p);\n }\n\n draw(p: P5Html) {\n if (this.replaceVideo) {\n this.initializeVideo(p);\n this.replaceVideo = false;\n }\n P5Element.drawChildren(this, p);\n }\n\n attributeChangedCallback(\n name: string,\n oldValue: string,\n newValue: string | null,\n ) {\n if (name === \"flipped\" && oldValue !== newValue) {\n this.flipped = newValue?.toLowerCase() === \"true\";\n this.replaceVideo = true;\n }\n }\n\n initializeVideo(p: P5Html) {\n this.video?.remove();\n // @ts-ignore\n this.video = p.createCapture(\"video\", { flipped: this.flipped });\n if (p.p5Root) {\n this.video.size(p.p5Root.width, p.p5Root.height);\n }\n this.video.hide();\n }\n}\n\ncustomElements.define(\"p5-capture\", P5Capture);\n", "import P5Element from \"../element\";\nimport type p5 from \"p5\";\n\nclass P5Circle extends P5Element {\n observedAttributes = [\"d\"];\n\n diameter: number = 0;\n\n connectedCallback() {\n this.diameter = Number(this.getAttribute(\"d\")) || 0;\n }\n\n attributeChangedCallback(name: string, oldValue: string, newValue: string) {\n if (name === \"d\") {\n this.diameter = Number(newValue) || 0;\n }\n }\n\n draw(p: p5) {\n this.cssContext(p, () => {\n p.circle(0, 0, this.diameter);\n });\n }\n}\n\ncustomElements.define(\"p5-circle\", P5Circle);\n", "import P5Element from \"../element\";\nimport type p5 from \"p5\";\n\nclass P5Ellipse extends P5Element {\n observedAttributes = [\"w\", \"h\"];\n\n width: number = 0;\n height: number = 0;\n\n connectedCallback() {\n this.width = Number(this.getAttribute(\"w\")) || 0;\n this.height = Number(this.getAttribute(\"h\")) || 0;\n }\n\n attributeChangedCallback(name: string, oldValue: string, newValue: string) {\n if (name === \"w\") {\n this.width = Number(newValue) || 0;\n }\n if (name === \"h\") {\n this.height = Number(newValue) || 0;\n }\n }\n\n draw(p: p5) {\n this.cssContext(p, () => {\n p.ellipse(0, 0, this.width, this.height);\n });\n }\n}\n\ncustomElements.define(\"p5-ellipse\", P5Ellipse);\n", "import type p5 from \"p5\";\nimport P5Capture from \"./capture\";\nimport P5Element from \"../element\";\n\nexport default class P5Image extends P5Element {\n src: string = \"\";\n fromCapture: string = \"\";\n dirty = false;\n capture: P5Capture | null = null;\n image: p5.Image | null = null;\n\n static observedAttributes = [\"src\", \"from-capture\"];\n\n attributeChangedCallback(name: string, oldVal: string, newVal: string) {\n if (oldVal !== newVal) {\n this.dirty = true;\n if (name === \"from-capture\") {\n this.fromCapture = newVal;\n } else if (name === \"src\") {\n this.src = newVal;\n }\n }\n }\n\n setup(p: p5) {\n this.updateProvider(p);\n }\n\n draw(p: p5) {\n if (this.dirty) {\n this.updateProvider(p);\n this.dirty = false;\n }\n if (this.capture && this.capture.video) {\n let video = this.capture.video;\n this.cssContext(p, () => {\n p.image(video, 0, 0);\n });\n } else if (this.image) {\n let image = this.image;\n this.cssContext(p, () => {\n p.image(image, 0, 0);\n });\n }\n }\n\n async updateProvider(p: p5) {\n let capture = document.getElementById(this.fromCapture);\n this.capture = null;\n this.image = null;\n if (capture instanceof P5Capture) {\n this.capture = capture;\n } else if (this.src !== \"\") {\n this.image = await p.loadImage(this.src);\n }\n }\n}\n\ncustomElements.define(\"p5-image\", P5Image);\n", "import P5Element from \"../element\";\nimport type p5 from \"p5\";\n\nclass P5Rect extends P5Element {\n observedAttributes = [\"w\", \"h\"];\n\n width: number = 0;\n height: number = 0;\n\n connectedCallback() {\n this.width = Number(this.getAttribute(\"w\")) || 0;\n this.height = Number(this.getAttribute(\"h\")) || 0;\n }\n\n attributeChangedCallback(name: string, oldValue: string, newValue: string) {\n if (name === \"w\") {\n this.width = Number(newValue) || 0;\n }\n if (name === \"h\") {\n this.height = Number(newValue) || 0;\n }\n }\n\n draw(p: p5) {\n this.cssContext(p, () => {\n p.rect(0, 0, this.width, this.height);\n });\n }\n}\n\ncustomElements.define(\"p5-rect\", P5Rect);\n", "import P5Element from \"../element\";\nimport p5 from \"p5\";\n\nclass P5Rotate extends P5Element {\n angle: number = Number(this.getAttribute(\"angle\") ?? 0);\n static observedAttributes = [\"angle\"];\n\n draw(p: p5) {\n p.push();\n p.rotate(this.angle);\n P5Element.drawChildren(this, p);\n p.pop();\n }\n\n attributeChangedCallback(name: string, oldValue: string, newValue: string) {\n if (name === \"angle\") {\n this.angle = Number(newValue) ?? 0;\n }\n }\n}\n\ncustomElements.define(\"p5-rotate\", P5Rotate);\n", "import P5Element from \"../element\";\nimport p5 from \"p5\";\n\nclass P5Scale extends P5Element {\n x: number = Number(this.getAttribute(\"x\") ?? 0);\n y: number = Number(this.getAttribute(\"y\") ?? 0);\n static observedAttributes = [\"x\", \"y\"];\n\n draw(p: p5) {\n p.push();\n p.scale(this.x, this.y);\n P5Element.drawChildren(this, p);\n p.pop();\n }\n\n attributeChangedCallback(name: string, oldValue: string, newValue: string) {\n if (name === \"x\") {\n this.x = Number(newValue) ?? 0;\n }\n if (name === \"y\") {\n this.y = Number(newValue) ?? 0;\n }\n }\n}\n\ncustomElements.define(\"p5-scale\", P5Scale);\n", "import P5Element from \"../element\";\nimport p5 from \"p5\";\n\nclass P5Translate extends P5Element {\n x: number = Number(this.getAttribute(\"x\") ?? 0);\n y: number = Number(this.getAttribute(\"y\") ?? 0);\n static observedAttributes = [\"x\", \"y\"];\n\n draw(p: p5) {\n p.push();\n p.translate(this.x, this.y);\n P5Element.drawChildren(this, p);\n p.pop();\n }\n\n attributeChangedCallback(name: string, oldValue: string, newValue: string) {\n if (name === \"x\") {\n this.x = Number(newValue) ?? 0;\n }\n if (name === \"y\") {\n this.y = Number(newValue) ?? 0;\n }\n }\n}\n\ncustomElements.define(\"p5-translate\", P5Translate);\n", "import P5Element from \"../element\";\nimport type p5 from \"p5\";\n\nclass P5Text extends P5Element {\n content = this.innerText;\n\n connectedCallback() {\n this.style.display = \"none\";\n }\n\n draw(p: p5) {\n this.cssContext(p, () => {\n p.text(this.content, 0, 0);\n });\n }\n}\n\ncustomElements.define(\"p5-text\", P5Text);\n", "import P5Element from \"./element\";\nimport type p5 from \"p5\";\n\nexport default class P5Canvas extends P5Element {\n p5: p5 | null = null;\n width: number = Number(this.getAttribute(\"width\")) ?? 0;\n height: number = Number(this.getAttribute(\"height\")) ?? 0;\n dimensionsChanged: boolean = false;\n paused = this.getAttribute(\"paused\")?.toLowerCase() === \"true\";\n ranFrameOne = false;\n\n static observedAttributes = [\"width\", \"height\", \"paused\"];\n\n connectedCallback() {\n const globalMode =\n (window.setup && typeof window.setup === \"function\") ||\n (window.draw && typeof window.draw === \"function\");\n if (!(\"p5\" in window) || globalMode) {\n return;\n }\n let p5Inst = new window.p5((p: p5) => {\n p.setup = () => {};\n p.draw = () => {};\n }, this);\n p5Inst.p5Root = this;\n }\n\n attributeChangedCallback(\n name: string,\n oldValue: string,\n newValue: string | null,\n ) {\n if (name === \"width\") {\n this.width = Number(newValue) ?? 0;\n }\n if (name === \"height\") {\n this.height = Number(newValue) ?? 0;\n }\n if (name === \"width\" || name === \"height\") {\n this.dimensionsChanged = true;\n }\n if (name === \"paused\") {\n this.paused = newValue?.toLowerCase() === \"true\";\n if (this.p5 && !this.paused) {\n this.p5.loop();\n }\n }\n }\n\n presetup(p: p5) {\n this.p5 = p;\n p.createCanvas(this.width, this.height);\n this.drawBackground(p);\n }\n\n setup(p: p5) {\n P5Element.setupChildren(this, p);\n }\n\n predraw(p: p5) {\n if (this.paused && this.ranFrameOne) {\n p.noLoop();\n } else {\n p.loop();\n this.ranFrameOne = true;\n }\n this.drawBackground(p);\n }\n\n draw(p: p5) {\n if (this.dimensionsChanged) {\n p.resizeCanvas(this.width, this.height);\n this.dimensionsChanged = false;\n }\n P5Element.drawChildren(this, p);\n }\n\n drawBackground(p: p5) {\n let background = getComputedStyle(this).background;\n if (background && background !== \"none\" && background !== \"transparent\") {\n p.background(background);\n }\n }\n}\n", "import \"./elements/capture\";\nimport \"./elements/circle\";\nimport \"./elements/ellipse\";\nimport \"./elements/image\";\nimport \"./elements/rect\";\nimport \"./elements/rotate\";\nimport \"./elements/scale\";\nimport \"./elements/translate\";\nimport \"./elements/text\";\nimport P5Canvas from \"./canvas\";\nimport P5Element from \"./element\";\nimport type p5 from \"p5\";\nimport type { P5Html, P5HtmlExtension } from \"./types\";\n\ndeclare global {\n interface Window {\n setup?: () => void;\n draw?: () => void;\n p5?: any;\n }\n}\n\nif (window.p5) {\n window.p5.registerAddon((p5: p5, fn: P5Html, lifecycles: any) => {\n fn.p5Root = null;\n lifecycles.presetup = function () {\n if (this.p5Root === null) {\n const canvases = document.getElementsByTagName(\"p5-canvas\");\n if (canvases.length > 0) {\n this.p5Root = canvases[0];\n }\n }\n if (this.p5Root !== null) {\n this.p5Root.presetup(this);\n }\n };\n lifecycles.postsetup = function () {\n if (this.p5Root !== null) {\n this.p5Root.setup(this);\n }\n };\n lifecycles.predraw = function () {\n if (this.p5Root !== null) {\n this.p5Root.predraw(this);\n }\n };\n lifecycles.postdraw = function () {\n if (this.p5Root !== null) {\n this.p5Root.draw(this);\n }\n };\n lifecycles.remove = function () {\n if (this.p5Root !== null) {\n this.p5Root.remove();\n this.p5Root = null;\n }\n };\n });\n}\n\n// This must be defined after the addon is set up\ncustomElements.define(\"p5-canvas\", P5Canvas);\n\nexport { P5Element, P5Html, P5HtmlExtension };\n"],
5
+ "mappings": "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",
6
+ "names": ["P5Element", "_P5Element", "p", "callback", "opacity", "node", "child", "P5Capture", "P5Element", "p", "name", "oldValue", "newValue", "P5Circle", "P5Element", "name", "oldValue", "newValue", "p", "P5Ellipse", "P5Element", "name", "oldValue", "newValue", "p", "P5Image", "P5Element", "name", "oldVal", "newVal", "p", "video", "image", "capture", "P5Capture", "P5Rect", "P5Element", "name", "oldValue", "newValue", "p", "P5Rotate", "P5Element", "p", "name", "oldValue", "newValue", "P5Scale", "P5Element", "p", "name", "oldValue", "newValue", "P5Translate", "P5Element", "p", "name", "oldValue", "newValue", "P5Text", "P5Element", "p", "P5Canvas", "P5Element", "globalMode", "p5Inst", "p", "name", "oldValue", "newValue", "background", "p5", "fn", "lifecycles", "canvases", "P5Canvas"]
7
+ }
package/package.json CHANGED
@@ -1,19 +1,22 @@
1
1
  {
2
2
  "name": "p5.html",
3
- "version": "0.0.1",
3
+ "version": "0.0.3",
4
4
  "description": "Processing for HTML!",
5
5
  "author": "a@ndr.ooo",
6
6
  "license": "LGPL-3.0-only",
7
7
  "type": "module",
8
+ "repository": "ndrooo/p5.html",
8
9
  "files": [
9
10
  "dist"
10
11
  ],
11
12
  "scripts": {
12
13
  "test": "echo \"Error: no test specified\" && exit 1",
13
- "dev": "esbuild --bundle src/index.ts --outfile=www/p5.html.js --watch --servedir=www --sourcemap",
14
- "build": "esbuild --bundle src/index.ts --outfile=dist/p5.html.js"
14
+ "dev": "eleventy --serve --input=www --config=www/eleventy.config.js",
15
+ "build": "node build.esbuild.mjs",
16
+ "build:site": "eleventy --input=www --config=www/eleventy.config.js"
15
17
  },
16
18
  "devDependencies": {
19
+ "@11ty/eleventy": "3.1.6",
17
20
  "@types/p5": "1.7.7",
18
21
  "esbuild": "0.28.2"
19
22
  },