@machete-jhun/canvas-studio 0.0.11 → 0.0.12
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.
- package/dist/render.d.ts +2 -0
- package/dist/render.js +1 -1
- package/package.json +1 -1
package/dist/render.d.ts
CHANGED
package/dist/render.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
import{m as e}from"./constants-CHIlz4uF.js";import{t as a}from"./types-BH4jm9Jl.js";import{n as o}from"./utils-CqLLOIF1.js";import t from"konva";import{Alignment as n,Fit as r,Layout as i,Rive as c}from"@rive-app/canvas";function s(e){return new Promise((a,o)=>{const t=new window.Image;t.crossOrigin="anonymous",t.onload=()=>a(t),t.onerror=o,t.src=e})}function l(e,a={}){return new Promise((o,t)=>{const{url:s,stateMachine:l,artboard:d,width:u,height:m,inputs:w=[]}=e,h=new OffscreenCanvas(u,m),g=new c({src:s,canvas:h,stateMachines:l,artboard:d,autoplay:!0,autoBind:!0,layout:new i({fit:r.Contain,alignment:n.TopLeft}),onLoad:()=>{g.resizeToCanvas();const e=g.viewModelInstance;e&&w.length>0&&w.forEach(({name:o,type:t,value:n,bindName:r})=>{const i=r?a[r]??n:n;switch(t){case"number":{const a=e.number(o);a&&(a.value=i);break}case"boolean":{const a=e.boolean(o);a&&(a.value=i);break}case"color":{const a=e.color(o);a&&(a.value=i);break}}}),o({rive:g,canvas:h,inputs:w})},onLoadError:e=>{t(/* @__PURE__ */new Error(`Failed to load rive: ${e}`))}})})}async function d(n,r={}){const{type:i,...c}=n;switch(i){case e.RECT:return new t.Rect(c);case e.BACK_SCREEN:{const{width:e,height:a,fill:r,screenId:i}=n,s=new t.Group(c),l=new t.Rect({x:0,y:0,width:e,height:a,fill:r}),d=new t.Text({x:0,y:0,width:e,height:a,text:i,fontSize:e/10,align:"center",verticalAlign:"middle",fill:o(r)});return s.add(l,d),s}case e.TEXT:return new t.Text({...c,wrap:"none",height:void 0,width:void 0});case e.IMAGE:{const e=new t.Image({...c,image:void 0});if(n.imageSource)try{const a=await s(n.imageSource);e.image(a)}catch{console.warn(`Failed to load image: ${n.imageSource}`)}return e}case e.SVG:{const e=new t.Image({...c,image:void 0});if(n.url)try{const a=await s(n.url);e.image(a)}catch{console.warn(`Failed to load svg: ${n.url}`)}return e}case e.QR_CODE:{const e=new t.Image({...c,image:void 0});if(n.info?.svgSource)try{const a=await s(n.info.svgSource);e.image(a)}catch{console.warn("Failed to load qr code")}return e}case e.BAR_CODE:{const e=new t.Image({...c,image:void 0});if(n.info?.svgSource)try{const a=await s(n.info.svgSource);e.image(a)}catch{console.warn("Failed to load bar code")}return e}case e.VIDEO:{const e=n,a=new t.Image({...c,image:void 0});if(e.url)try{const o=await function(e,a,o,t=0){return new Promise((n,r)=>{const i=document.createElement("video");i.crossOrigin="anonymous",i.muted=!0,i.preload="auto",i.onloadeddata=()=>{i.currentTime=t},i.onseeked=()=>{const e=document.createElement("canvas");e.width=a,e.height=o;const t=e.getContext("2d");t&&t.drawImage(i,0,0,a,o),i.pause(),i.src="",i.load(),n(e)},i.onerror=()=>{r(/* @__PURE__ */new Error(`Failed to load video: ${e}`))},i.src=e,i.load()})}(e.url,e.width,e.height,0);a.image(o)}catch{console.warn(`Failed to load video: ${e.url}`)}return a}case e.RIVE:{const e=n,a=new t.Image({...c,image:void 0});if(e.url)try{const{canvas:o}=await l(e,r);a.image(o)}catch{console.warn(`Failed to load rive: ${e.url}`)}return a}default:return a(i),null}}async function u(a,o){const{container:n,backgroundColor:r,fps:i=30,variableObj:c={}}=o,
|
|
1
|
+
import{m as e}from"./constants-CHIlz4uF.js";import{t as a}from"./types-BH4jm9Jl.js";import{n as o}from"./utils-CqLLOIF1.js";import t from"konva";import{Alignment as n,Fit as r,Layout as i,Rive as c}from"@rive-app/canvas";function s(e){return new Promise((a,o)=>{const t=new window.Image;t.crossOrigin="anonymous",t.onload=()=>a(t),t.onerror=o,t.src=e})}function l(e,a={}){return new Promise((o,t)=>{const{url:s,stateMachine:l,artboard:d,width:u,height:m,inputs:w=[]}=e,h=new OffscreenCanvas(u,m),g=new c({src:s,canvas:h,stateMachines:l,artboard:d,autoplay:!0,autoBind:!0,layout:new i({fit:r.Contain,alignment:n.TopLeft}),onLoad:()=>{g.resizeToCanvas();const e=g.viewModelInstance;e&&w.length>0&&w.forEach(({name:o,type:t,value:n,bindName:r})=>{const i=r?a[r]??n:n;switch(t){case"number":{const a=e.number(o);a&&(a.value=i);break}case"boolean":{const a=e.boolean(o);a&&(a.value=i);break}case"color":{const a=e.color(o);a&&(a.value=i);break}}}),o({rive:g,canvas:h,inputs:w})},onLoadError:e=>{t(/* @__PURE__ */new Error(`Failed to load rive: ${e}`))}})})}async function d(n,r={}){const{type:i,...c}=n;switch(i){case e.RECT:return new t.Rect(c);case e.BACK_SCREEN:{const{width:e,height:a,fill:r,screenId:i}=n,s=new t.Group(c),l=new t.Rect({x:0,y:0,width:e,height:a,fill:r}),d=new t.Text({x:0,y:0,width:e,height:a,text:i,fontSize:e/10,align:"center",verticalAlign:"middle",fill:o(r)});return s.add(l,d),s}case e.TEXT:return new t.Text({...c,wrap:"none",height:void 0,width:void 0});case e.IMAGE:{const e=new t.Image({...c,image:void 0});if(n.imageSource)try{const a=await s(n.imageSource);e.image(a)}catch{console.warn(`Failed to load image: ${n.imageSource}`)}return e}case e.SVG:{const e=new t.Image({...c,image:void 0});if(n.url)try{const a=await s(n.url);e.image(a)}catch{console.warn(`Failed to load svg: ${n.url}`)}return e}case e.QR_CODE:{const e=new t.Image({...c,image:void 0});if(n.info?.svgSource)try{const a=await s(n.info.svgSource);e.image(a)}catch{console.warn("Failed to load qr code")}return e}case e.BAR_CODE:{const e=new t.Image({...c,image:void 0});if(n.info?.svgSource)try{const a=await s(n.info.svgSource);e.image(a)}catch{console.warn("Failed to load bar code")}return e}case e.VIDEO:{const e=n,a=new t.Image({...c,image:void 0});if(e.url)try{const o=await function(e,a,o,t=0){return new Promise((n,r)=>{const i=document.createElement("video");i.crossOrigin="anonymous",i.muted=!0,i.preload="auto",i.onloadeddata=()=>{i.currentTime=t},i.onseeked=()=>{const e=document.createElement("canvas");e.width=a,e.height=o;const t=e.getContext("2d");t&&t.drawImage(i,0,0,a,o),i.pause(),i.src="",i.load(),n(e)},i.onerror=()=>{r(/* @__PURE__ */new Error(`Failed to load video: ${e}`))},i.src=e,i.load()})}(e.url,e.width,e.height,0);a.image(o)}catch{console.warn(`Failed to load video: ${e.url}`)}return a}case e.RIVE:{const e=n,a=new t.Image({...c,image:void 0});if(e.url)try{const{canvas:o}=await l(e,r);a.image(o)}catch{console.warn(`Failed to load rive: ${e.url}`)}return a}default:return a(i),null}}async function u(a,o){const{container:n,backgroundColor:r,fps:i=30,variableObj:c={}}=o,s=new t.Stage({container:n,width:100,height:100}),u=new t.Layer;s.add(u);const m={...c},w=/* @__PURE__ */new Map,h=/* @__PURE__ */new Map;for(const C of a)if(C.type===e.RIVE){const e=C,a=new t.Image({...C,image:void 0});if(e.url)try{const o=await l(e,m);a.image(o.canvas),w.set(C.id,{...o,shape:a})}catch(k){console.warn(`Failed to load rive: ${e.url}`,k)}u.add(a)}else if(C.type===e.VIDEO){const e=C,a=new t.Image({...C,image:void 0});if(e.url)try{const o=document.createElement("video");o.crossOrigin="anonymous",o.muted=!0,o.loop=e.loop??!0,o.playbackRate=e.playbackRate??1,o.src=e.url,await new Promise((e,a)=>{o.onloadeddata=()=>e(),o.onerror=()=>a(),o.load()}),a.image(o),h.set(C.id,{video:o,shape:a})}catch{console.warn(`Failed to load video: ${e.url}`)}u.add(a)}else{const e=await d(C,c);e&&u.add(e)}u.batchDraw();const g=u.getClientRect({skipTransform:!1}),v=Math.floor(g.x),f=Math.floor(g.y),p=Math.ceil(g.width),y=Math.ceil(g.height);if(s.width(p),s.height(y),u.x(-v),u.y(-f),r){const e=new t.Rect({x:v,y:f,width:p,height:y,fill:r});u.add(e),e.moveToBottom()}h.forEach(({video:e})=>{e.play()});let b=null,E=0;const I=1e3/i,F=e=>{const a=e-E;a>=I&&(E=e-a%I,u.batchDraw()),b=requestAnimationFrame(F)};return b=requestAnimationFrame(F),{layer:u,stage:s,width:p,height:y,canvas:u.getNativeCanvasElement(),updateVariables:e=>{w.forEach(({rive:a,inputs:o})=>{const t=a.viewModelInstance;t&&o&&o.forEach(({name:a,type:o,bindName:n})=>{if(!n)return;const r=e[n];if(void 0!==r)switch(o){case"number":{const e=t.number(a);e&&(e.value=r);break}case"boolean":{const e=t.boolean(a);e&&(e.value=r);break}case"color":{const e=t.color(a);e&&(e.value=r);break}}})})},destroy:()=>{null!==b&&(cancelAnimationFrame(b),b=null),w.forEach(({rive:e})=>{e.cleanup()}),w.clear(),h.forEach(({video:e})=>{e.pause(),e.src="",e.load()}),h.clear(),s.destroy()}}}var m=u;export{m as default,u as render};
|
package/package.json
CHANGED