q5-react/dist/index.js

> Minimal React wrapper for [q5.js](https://github.com/q5js/q5.js)

"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const E=require("react/jsx-runtime"),d=require("react"),F=require("q5"),b=[["requestFullscreen","exitFullscreen","fullscreenElement","fullscreenEnabled","fullscreenchange","fullscreenerror"],["webkitRequestFullscreen","webkitExitFullscreen","webkitFullscreenElement","webkitFullscreenEnabled","webkitfullscreenchange","webkitfullscreenerror"],["webkitRequestFullScreen","webkitCancelFullScreen","webkitCurrentFullScreenElement","webkitCancelFullScreen","webkitfullscreenchange","webkitfullscreenerror"],["mozRequestFullScreen","mozCancelFullScreen","mozFullScreenElement","mozFullScreenEnabled","mozfullscreenchange","mozfullscreenerror"],["msRequestFullscreen","msExitFullscreen","msFullscreenElement","msFullscreenEnabled","MSFullscreenChange","MSFullscreenError"]],m=(()=>{if(typeof document>"u")return!1;const e=b[0],t={};for(const n of b)if((n==null?void 0:n[1])in document){for(const[o,l]of n.entries())t[e[o]]=l;return t}return!1})(),g={change:m.fullscreenchange,error:m.fullscreenerror};let f={request(e=document.documentElement,t){return new Promise((n,u)=>{const o=()=>{f.off("change",o),n()};f.on("change",o);const l=e[m.requestFullscreen](t);l instanceof Promise&&l.then(o).catch(u)})},exit(){return new Promise((e,t)=>{if(!f.isFullscreen){e();return}const n=()=>{f.off("change",n),e()};f.on("change",n);const u=document[m.exitFullscreen]();u instanceof Promise&&u.then(n).catch(t)})},toggle(e,t){return f.isFullscreen?f.exit():f.request(e,t)},onchange(e){f.on("change",e)},onerror(e){f.on("error",e)},on(e,t){const n=g[e];n&&document.addEventListener(n,t,!1)},off(e,t){const n=g[e];n&&document.removeEventListener(n,t,!1)},raw:m};Object.defineProperties(f,{isFullscreen:{get:()=>!!document[m.fullscreenElement]},element:{enumerable:!0,get:()=>document[m.fullscreenElement]??void 0},isEnabled:{enumerable:!0,get:()=>!!document[m.fullscreenEnabled]}});m||(f={isEnabled:!1});const y=f,q=({size:e})=>{const[t,n]=d.useState(e),u=()=>{y.toggle(),n(o=>o==="fullscreen"?e:"fullscreen")};return d.useEffect(()=>{n(e)},[e]),{sizeInternal:t,toggleFullscreen:u}},w=500,v=({canvas:e,sizeInternal:t})=>{const n=d.useRef(null),u=d.useRef(null),o=d.useRef(e==null?void 0:e.draw);return d.useEffect(()=>{o.current=e==null?void 0:e.draw},[e]),d.useEffect(()=>{if(u.current&&(u.current.remove(),u.current=null),!n.current)return;const l=setTimeout(()=>{if(u.current||!n.current)return;const c=s=>{const a=new Set,h=new Set;s.setup=()=>{const r=t==="fullscreen"?[s.windowWidth,s.windowHeight]:typeof t=="number"?[t,t]:t;s.createCanvas((r==null?void 0:r[0])??w,(r==null?void 0:r[1])??w)},s.draw=()=>{var r;(r=o.current)==null||r.call(o,s,e.state,{pressedKeys:a,pressedMouseButtons:h})},s.windowResized=()=>{t==="fullscreen"&&s.resizeCanvas(s.windowWidth,s.windowHeight)},s.keyPressed=()=>{var r,i;a.add(s.key),(i=(r=e==null?void 0:e.events)==null?void 0:r.keyPressed)==null||i.call(r,s.key)},s.keyReleased=()=>{var r,i;a.delete(s.key),(i=(r=e==null?void 0:e.events)==null?void 0:r.keyReleased)==null||i.call(r,s.key)},s.mousePressed=()=>{var r,i;h.add(s.mouseButton),(i=(r=e==null?void 0:e.events)==null?void 0:r.mousePressed)==null||i.call(r,s.mouseButton,{x:s.mouseX,y:s.mouseY})},s.mouseReleased=()=>{var r,i;h.delete(s.mouseButton),(i=(r=e==null?void 0:e.events)==null?void 0:r.mouseReleased)==null||i.call(r,s.mouseButton,{x:s.mouseX,y:s.mouseY})}};u.current=new F(c,n.current)},0);return()=>{clearTimeout(l),u.current&&(u.current.remove(),u.current=null)}},[n,t]),d.useEffect(()=>{var s,a;const l=h=>h.preventDefault();(s=n.current)==null||s.addEventListener("contextmenu",l);const c=(a=n.current)==null?void 0:a.querySelector("canvas");return c&&c.addEventListener("contextmenu",l),()=>{var h,r,i;(h=n.current)==null||h.removeEventListener("contextmenu",l),(i=(r=n.current)==null?void 0:r.querySelector("canvas"))==null||i.removeEventListener("contextmenu",l)}},[n]),{sketchInstanceRef:u,containerRef:n}},S=({size:e=500,canvas:t,children:n})=>{const{sizeInternal:u,toggleFullscreen:o}=q({size:e}),{containerRef:l}=v({canvas:t,sizeInternal:u});return d.useEffect(()=>{const c=document.createElement("style");return c.textContent=".q5-canvas-fullscreen{width:100vw;height:100vh;position:fixed;inset:0;z-index:100;overflow:hidden}.q5-canvas{position:relative}.q5-canvas canvas,.q5-canvas-fullscreen canvas{display:block}.q5-canvas .q5-canvas-overlay,.q5-canvas-fullscreen .q5-canvas-overlay{position:absolute;inset:0;z-index:101;pointer-events:none}.q5-canvas .q5-canvas-overlay *,.q5-canvas-fullscreen .q5-canvas-overlay *{pointer-events:initial}",document.head.appendChild(c),()=>c.remove()},[]),E.jsx("div",{ref:l,className:u==="fullscreen"?"q5-canvas-fullscreen":"q5-canvas",children:n&&E.jsx("div",{className:"q5-canvas-overlay",children:typeof n=="function"?n({toggleFullscreen:o}):n})})};function x(e){let t=structuredClone(e);const n=new Set;return{get:()=>t,set:c=>{const s=typeof c=="function"?c(t):c;t={...t,...s},n.forEach(a=>a(t))},subscribe:c=>(n.add(c),()=>n.delete(c))}}const k=(e,t)=>d.useMemo(()=>x(t),[]);function C(e){return typeof e=="function"&&e.length===0}const M=(e,t,n)=>{const u=d.useMemo(()=>crypto.randomUUID(),[]),o=d.useMemo(()=>C(e)?e():e,[]),l=k(u,o);return d.useMemo(()=>({draw:t,state:l,events:n}),[t,l,n])},R=Object.freeze(Object.defineProperty({__proto__:null},Symbol.toStringTag,{value:"Module"}));exports.default=S;exports.types=R;exports.useCreateCanvas=M;