@mirage-engine/painter 1.0.6 → 1.0.7

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @mirage-engine/painter
 
+## 1.0.7
+
+### Patch Changes
+
+- 312cb70: alpha
+
 ## 1.0.6
 
 ### Patch Changes

package/dist/mirage-painter.js

@@ -1,5 +1,5 @@
-var k = Object.defineProperty;
-var G = (r, e, n) => e in r ? k(r, e, { enumerable: !0, configurable: !0, writable: !0, value: n }) : r[e] = n;
+var P = Object.defineProperty;
+var G = (r, e, n) => e in r ? P(r, e, { enumerable: !0, configurable: !0, writable: !0, value: n }) : r[e] = n;
 var S = (r, e, n) => (G(r, typeof e != "symbol" ? e + "" : e, n), n);
 import * as l from "three";
 class I {
@@ -403,7 +403,7 @@ vec2 resultUv = localUv * uTextureRepeat + uTextureOffset;
     },
     uGradientStops: { value: new Float32Array(8) }
   };
-  P(y.uBorderRadius.value, r.borderRadius, Math.min(e, n)), a && (y.uTexture.value = i);
+  k(y.uBorderRadius.value, r.borderRadius, Math.min(e, n)), a && (y.uTexture.value = i);
   const O = new l.ShaderMaterial({
     uniforms: { ...y, ...s },
     vertexShader: R.vertexShader,
@@ -441,11 +441,11 @@ function T(r, e) {
   }
   if (e.borderRadius !== void 0) {
     const o = e.width !== void 0 && e.height !== void 0 ? Math.min(e.width, e.height) : Math.min(r.uniforms.uSize.value.x, r.uniforms.uSize.value.y);
-    P(r.uniforms.uBorderRadius.value, e.borderRadius, o);
+    k(r.uniforms.uBorderRadius.value, e.borderRadius, o);
   }
   if (e.borderWidth !== void 0 && (r.uniforms.uBorderWidth.value = e.borderWidth), e.backgroundColor !== void 0)
     if (Array.isArray(e.backgroundColor)) {
-      const o = r.uniforms.uBgColor.value.w;
+      const o = e.backgroundColor[3] !== void 0 ? e.backgroundColor[3] : r.uniforms.uBgColor.value.w;
       r.uniforms.uBgColor.value.set(
         e.backgroundColor[0],
         e.backgroundColor[1],
@@ -532,7 +532,7 @@ function T(r, e) {
   for (const o of Object.keys(e))
     o !== "width" && o !== "height" && o !== "borderRadius" && o !== "borderWidth" && o !== "backgroundColor" && o !== "borderColor" && o !== "opacity" && o !== "bgOpacity" && o !== "borderOpacity" && o !== "texture" && o !== "backgroundImage" && o !== "boxShadow" && r.uniforms[o] !== void 0 && (r.uniforms[o].value !== void 0 && r.uniforms[o].value !== null && typeof r.uniforms[o].value.set == "function" ? Array.isArray(e[o]) ? r.uniforms[o].value.set(...e[o]) : e[o] !== void 0 && (e[o].copy ? r.uniforms[o].value.copy(e[o]) : r.uniforms[o].value = e[o]) : r.uniforms[o].value = e[o]);
 }
-function P(r, e, n = 0) {
+function k(r, e, n = 0) {
   if (e == null) {
     r.set(0, 0, 0, 0);
     return;

package/dist/mirage-painter.umd.js

@@ -181,4 +181,4 @@ baseColor = blendSrcOver(baseColor, texColor);`,E={vertexShader:U,fragmentShader
 `,b=r.isTraveler?`vec2 resultUv = screenUv;
 `:`vec2 localUv = (p / uSize) + 0.5;
 vec2 resultUv = localUv * uTextureRepeat + uTextureOffset;
-`,v=a||c?d+b+((e==null?void 0:e.uvModifier)||""):"",h=a||c?L.baseColorChunk:"",g=(e==null?void 0:e.colorModifier)||"",M=E.fragmentShader.replace("#INJECT_DECLARATIONS",u).replace("#INJECT_UV_MODIFIER",v).replace("#INJECT_BASE_COLOR",h).replace("#INJECT_COLOR_MODIFIER",g),B=y(r.backgroundColor),x=y(r.borderColor),I={uSize:{value:new l.Vector2(o,n)},uMeshSize:{value:new l.Vector2(o,n)},uShadowColor:{value:new l.Vector4(0,0,0,0)},uShadowOffset:{value:new l.Vector2(0,0)},uShadowBlur:{value:0},uShadowSpread:{value:0},uBgColor:{value:new l.Vector4(B.color.r,B.color.g,B.color.b,B.alpha)},uBorderColor:{value:new l.Vector4(x.color.r,x.color.g,x.color.b,x.alpha)},uBorderRadius:{value:new l.Vector4(0,0,0,0)},uBorderWidth:{value:S(r.borderWidth)},uOpacity:{value:r.opacity??1},uTexture:{value:null},uTextureRepeat:{value:new l.Vector2(1,1)},uTextureOffset:{value:new l.Vector2(0,0)},uGradientCount:{value:0},uGradientAngle:{value:0},uGradientColors:{value:Array.from({length:8},()=>new l.Vector4(0,0,0,0))},uGradientStops:{value:new Float32Array(8)}};W(I.uBorderRadius.value,r.borderRadius,Math.min(o,n)),a&&(I.uTexture.value=t);const _=new l.ShaderMaterial({uniforms:{...I,...s},vertexShader:E.vertexShader,fragmentShader:M,transparent:!0,side:l.FrontSide});return r.backgroundImage&&O(_,{backgroundImage:r.backgroundImage}),_}function F(r,o,n,t,e){const a=S(o.borderWidth);O(r,{width:n,height:t,borderRadius:o.borderRadius,borderWidth:a,backgroundColor:o.backgroundColor,borderColor:o.borderColor,opacity:o.opacity,texture:e,backgroundImage:o.backgroundImage,boxShadow:o.boxShadow})}function O(r,o){var t;if(o.boxShadow!==void 0){const e=G(o.boxShadow);e?(r.uniforms.uShadowColor.value.set(e.color.r,e.color.g,e.color.b,e.alpha),r.uniforms.uShadowOffset.value.set(e.offsetX,e.offsetY),r.uniforms.uShadowBlur.value=e.blurRadius,r.uniforms.uShadowSpread.value=e.spreadRadius,r.userData.shadowPadding=e.blurRadius+e.spreadRadius+Math.max(Math.abs(e.offsetX),Math.abs(e.offsetY))):(r.uniforms.uShadowColor.value.w=0,r.userData.shadowPadding=0)}if(o.width!==void 0&&o.height!==void 0&&r.uniforms.uSize.value.set(o.width,o.height),r.uniforms.uMeshSize){const e=r.userData.shadowPadding||0,a=o.width!==void 0?o.width:r.uniforms.uSize.value.x,i=o.height!==void 0?o.height:r.uniforms.uSize.value.y;r.uniforms.uMeshSize.value.set(a+e*2,i+e*2)}if(o.borderRadius!==void 0){const e=o.width!==void 0&&o.height!==void 0?Math.min(o.width,o.height):Math.min(r.uniforms.uSize.value.x,r.uniforms.uSize.value.y);W(r.uniforms.uBorderRadius.value,o.borderRadius,e)}if(o.borderWidth!==void 0&&(r.uniforms.uBorderWidth.value=o.borderWidth),o.backgroundColor!==void 0)if(Array.isArray(o.backgroundColor)){const e=r.uniforms.uBgColor.value.w;r.uniforms.uBgColor.value.set(o.backgroundColor[0],o.backgroundColor[1],o.backgroundColor[2],e)}else if(typeof o.backgroundColor=="string"){const e=y(o.backgroundColor);r.uniforms.uBgColor.value.set(e.color.r,e.color.g,e.color.b,e.alpha)}else{const e=r.uniforms.uBgColor.value.w;r.uniforms.uBgColor.value.set(o.backgroundColor.r,o.backgroundColor.g,o.backgroundColor.b,e)}if(o.borderColor!==void 0)if(Array.isArray(o.borderColor)){const e=r.uniforms.uBorderColor.value.w;r.uniforms.uBorderColor.value.set(o.borderColor[0],o.borderColor[1],o.borderColor[2],e)}else if(typeof o.borderColor=="string"){const e=y(o.borderColor);r.uniforms.uBorderColor.value.set(e.color.r,e.color.g,e.color.b,e.alpha)}else{const e=r.uniforms.uBorderColor.value.w;r.uniforms.uBorderColor.value.set(o.borderColor.r,o.borderColor.g,o.borderColor.b,e)}o.opacity!==void 0&&(r.uniforms.uOpacity.value=o.opacity),o.bgOpacity!==void 0&&(r.uniforms.uBgColor.value.w=o.bgOpacity),o.borderOpacity!==void 0&&(r.uniforms.uBorderColor.value.w=o.borderOpacity),r.uniforms.uTexture&&o.texture!==void 0&&(r.uniforms.uTexture.value=o.texture);const n=o.texture!==void 0?o.texture:(t=r.uniforms.uTexture)==null?void 0:t.value;if(n&&(n.image instanceof ImageBitmap||n.image instanceof HTMLImageElement||n.image instanceof HTMLCanvasElement)){const e=n.image.naturalWidth||n.image.videoWidth||n.image.width,a=n.image.naturalHeight||n.image.videoHeight||n.image.height,i=o.width??r.uniforms.uSize.value.x,s=o.height??r.uniforms.uSize.value.y;if(e&&a&&i&&s){const c=e/a,u=i/s;if(c>u){const d=u/c;r.uniforms.uTextureRepeat.value.set(d,1),r.uniforms.uTextureOffset.value.set((1-d)/2,0)}else{const d=c/u;r.uniforms.uTextureRepeat.value.set(1,d),r.uniforms.uTextureOffset.value.set(0,(1-d)/2)}}}else r.uniforms.uTextureRepeat&&(r.uniforms.uTextureRepeat.value.set(1,1),r.uniforms.uTextureOffset.value.set(0,0));if(o.backgroundImage!==void 0){const e=k(o.backgroundImage);if(e){r.uniforms.uGradientCount.value=e.stops.length,r.uniforms.uGradientAngle.value=e.angle;for(let a=0;a<8;a++)if(a<e.stops.length){const i=e.stops[a];r.uniforms.uGradientColors.value[a].set(i.color.r,i.color.g,i.color.b,i.alpha),r.uniforms.uGradientStops.value[a]=i.stop}else r.uniforms.uGradientColors.value[a].set(0,0,0,0),r.uniforms.uGradientStops.value[a]=1}else r.uniforms.uGradientCount.value=0}for(const e of Object.keys(o))e!=="width"&&e!=="height"&&e!=="borderRadius"&&e!=="borderWidth"&&e!=="backgroundColor"&&e!=="borderColor"&&e!=="opacity"&&e!=="bgOpacity"&&e!=="borderOpacity"&&e!=="texture"&&e!=="backgroundImage"&&e!=="boxShadow"&&r.uniforms[e]!==void 0&&(r.uniforms[e].value!==void 0&&r.uniforms[e].value!==null&&typeof r.uniforms[e].value.set=="function"?Array.isArray(o[e])?r.uniforms[e].value.set(...o[e]):o[e]!==void 0&&(o[e].copy?r.uniforms[e].value.copy(o[e]):r.uniforms[e].value=o[e]):r.uniforms[e].value=o[e])}function W(r,o,n=0){if(o==null){r.set(0,0,0,0);return}if(typeof o=="number"){r.set(o,o,o,o);return}if(Array.isArray(o)){r.set(o[0],o[1],o[2],o[3]);return}const t=o.split("/")[0].trim().split(/\s+/),e=S(t[0],n),a=S(t[1]??t[0],n),i=S(t[2]??t[0],n),s=S(t[3]??t[1]??t[0],n);r.set(e,a,i,s)}const q={create(r,o,n,t,e,a=2,i=null,s){return r==="BOX"?z(o,t,e,i,s):r==="TEXT"?new A(n||"",o,t,e,a):new l.MeshBasicMaterial({visible:!1})},update(r,o,n,t,e,a,i=2,s){o==="BOX"?F(r,n,e,a,s):o==="TEXT"&&r.updateText(t||"",n,e,a,i)},forceUpdateUniforms(r,o){O(r,o)}};f.Painter=q,f.TextGenerator=A,f.createBoxMaterial=z,f.parseBoxShadow=G,f.parseColor=y,f.parseLinearGradient=k,f.parsePixelValue=S,f.setBoxUniforms=O,f.splitByComma=R,f.updateBoxMaterial=F,Object.defineProperty(f,Symbol.toStringTag,{value:"Module"})});
+`,v=a||c?d+b+((e==null?void 0:e.uvModifier)||""):"",h=a||c?L.baseColorChunk:"",g=(e==null?void 0:e.colorModifier)||"",M=E.fragmentShader.replace("#INJECT_DECLARATIONS",u).replace("#INJECT_UV_MODIFIER",v).replace("#INJECT_BASE_COLOR",h).replace("#INJECT_COLOR_MODIFIER",g),B=y(r.backgroundColor),x=y(r.borderColor),I={uSize:{value:new l.Vector2(o,n)},uMeshSize:{value:new l.Vector2(o,n)},uShadowColor:{value:new l.Vector4(0,0,0,0)},uShadowOffset:{value:new l.Vector2(0,0)},uShadowBlur:{value:0},uShadowSpread:{value:0},uBgColor:{value:new l.Vector4(B.color.r,B.color.g,B.color.b,B.alpha)},uBorderColor:{value:new l.Vector4(x.color.r,x.color.g,x.color.b,x.alpha)},uBorderRadius:{value:new l.Vector4(0,0,0,0)},uBorderWidth:{value:S(r.borderWidth)},uOpacity:{value:r.opacity??1},uTexture:{value:null},uTextureRepeat:{value:new l.Vector2(1,1)},uTextureOffset:{value:new l.Vector2(0,0)},uGradientCount:{value:0},uGradientAngle:{value:0},uGradientColors:{value:Array.from({length:8},()=>new l.Vector4(0,0,0,0))},uGradientStops:{value:new Float32Array(8)}};W(I.uBorderRadius.value,r.borderRadius,Math.min(o,n)),a&&(I.uTexture.value=t);const _=new l.ShaderMaterial({uniforms:{...I,...s},vertexShader:E.vertexShader,fragmentShader:M,transparent:!0,side:l.FrontSide});return r.backgroundImage&&O(_,{backgroundImage:r.backgroundImage}),_}function F(r,o,n,t,e){const a=S(o.borderWidth);O(r,{width:n,height:t,borderRadius:o.borderRadius,borderWidth:a,backgroundColor:o.backgroundColor,borderColor:o.borderColor,opacity:o.opacity,texture:e,backgroundImage:o.backgroundImage,boxShadow:o.boxShadow})}function O(r,o){var t;if(o.boxShadow!==void 0){const e=G(o.boxShadow);e?(r.uniforms.uShadowColor.value.set(e.color.r,e.color.g,e.color.b,e.alpha),r.uniforms.uShadowOffset.value.set(e.offsetX,e.offsetY),r.uniforms.uShadowBlur.value=e.blurRadius,r.uniforms.uShadowSpread.value=e.spreadRadius,r.userData.shadowPadding=e.blurRadius+e.spreadRadius+Math.max(Math.abs(e.offsetX),Math.abs(e.offsetY))):(r.uniforms.uShadowColor.value.w=0,r.userData.shadowPadding=0)}if(o.width!==void 0&&o.height!==void 0&&r.uniforms.uSize.value.set(o.width,o.height),r.uniforms.uMeshSize){const e=r.userData.shadowPadding||0,a=o.width!==void 0?o.width:r.uniforms.uSize.value.x,i=o.height!==void 0?o.height:r.uniforms.uSize.value.y;r.uniforms.uMeshSize.value.set(a+e*2,i+e*2)}if(o.borderRadius!==void 0){const e=o.width!==void 0&&o.height!==void 0?Math.min(o.width,o.height):Math.min(r.uniforms.uSize.value.x,r.uniforms.uSize.value.y);W(r.uniforms.uBorderRadius.value,o.borderRadius,e)}if(o.borderWidth!==void 0&&(r.uniforms.uBorderWidth.value=o.borderWidth),o.backgroundColor!==void 0)if(Array.isArray(o.backgroundColor)){const e=o.backgroundColor[3]!==void 0?o.backgroundColor[3]:r.uniforms.uBgColor.value.w;r.uniforms.uBgColor.value.set(o.backgroundColor[0],o.backgroundColor[1],o.backgroundColor[2],e)}else if(typeof o.backgroundColor=="string"){const e=y(o.backgroundColor);r.uniforms.uBgColor.value.set(e.color.r,e.color.g,e.color.b,e.alpha)}else{const e=r.uniforms.uBgColor.value.w;r.uniforms.uBgColor.value.set(o.backgroundColor.r,o.backgroundColor.g,o.backgroundColor.b,e)}if(o.borderColor!==void 0)if(Array.isArray(o.borderColor)){const e=r.uniforms.uBorderColor.value.w;r.uniforms.uBorderColor.value.set(o.borderColor[0],o.borderColor[1],o.borderColor[2],e)}else if(typeof o.borderColor=="string"){const e=y(o.borderColor);r.uniforms.uBorderColor.value.set(e.color.r,e.color.g,e.color.b,e.alpha)}else{const e=r.uniforms.uBorderColor.value.w;r.uniforms.uBorderColor.value.set(o.borderColor.r,o.borderColor.g,o.borderColor.b,e)}o.opacity!==void 0&&(r.uniforms.uOpacity.value=o.opacity),o.bgOpacity!==void 0&&(r.uniforms.uBgColor.value.w=o.bgOpacity),o.borderOpacity!==void 0&&(r.uniforms.uBorderColor.value.w=o.borderOpacity),r.uniforms.uTexture&&o.texture!==void 0&&(r.uniforms.uTexture.value=o.texture);const n=o.texture!==void 0?o.texture:(t=r.uniforms.uTexture)==null?void 0:t.value;if(n&&(n.image instanceof ImageBitmap||n.image instanceof HTMLImageElement||n.image instanceof HTMLCanvasElement)){const e=n.image.naturalWidth||n.image.videoWidth||n.image.width,a=n.image.naturalHeight||n.image.videoHeight||n.image.height,i=o.width??r.uniforms.uSize.value.x,s=o.height??r.uniforms.uSize.value.y;if(e&&a&&i&&s){const c=e/a,u=i/s;if(c>u){const d=u/c;r.uniforms.uTextureRepeat.value.set(d,1),r.uniforms.uTextureOffset.value.set((1-d)/2,0)}else{const d=c/u;r.uniforms.uTextureRepeat.value.set(1,d),r.uniforms.uTextureOffset.value.set(0,(1-d)/2)}}}else r.uniforms.uTextureRepeat&&(r.uniforms.uTextureRepeat.value.set(1,1),r.uniforms.uTextureOffset.value.set(0,0));if(o.backgroundImage!==void 0){const e=k(o.backgroundImage);if(e){r.uniforms.uGradientCount.value=e.stops.length,r.uniforms.uGradientAngle.value=e.angle;for(let a=0;a<8;a++)if(a<e.stops.length){const i=e.stops[a];r.uniforms.uGradientColors.value[a].set(i.color.r,i.color.g,i.color.b,i.alpha),r.uniforms.uGradientStops.value[a]=i.stop}else r.uniforms.uGradientColors.value[a].set(0,0,0,0),r.uniforms.uGradientStops.value[a]=1}else r.uniforms.uGradientCount.value=0}for(const e of Object.keys(o))e!=="width"&&e!=="height"&&e!=="borderRadius"&&e!=="borderWidth"&&e!=="backgroundColor"&&e!=="borderColor"&&e!=="opacity"&&e!=="bgOpacity"&&e!=="borderOpacity"&&e!=="texture"&&e!=="backgroundImage"&&e!=="boxShadow"&&r.uniforms[e]!==void 0&&(r.uniforms[e].value!==void 0&&r.uniforms[e].value!==null&&typeof r.uniforms[e].value.set=="function"?Array.isArray(o[e])?r.uniforms[e].value.set(...o[e]):o[e]!==void 0&&(o[e].copy?r.uniforms[e].value.copy(o[e]):r.uniforms[e].value=o[e]):r.uniforms[e].value=o[e])}function W(r,o,n=0){if(o==null){r.set(0,0,0,0);return}if(typeof o=="number"){r.set(o,o,o,o);return}if(Array.isArray(o)){r.set(o[0],o[1],o[2],o[3]);return}const t=o.split("/")[0].trim().split(/\s+/),e=S(t[0],n),a=S(t[1]??t[0],n),i=S(t[2]??t[0],n),s=S(t[3]??t[1]??t[0],n);r.set(e,a,i,s)}const q={create(r,o,n,t,e,a=2,i=null,s){return r==="BOX"?z(o,t,e,i,s):r==="TEXT"?new A(n||"",o,t,e,a):new l.MeshBasicMaterial({visible:!1})},update(r,o,n,t,e,a,i=2,s){o==="BOX"?F(r,n,e,a,s):o==="TEXT"&&r.updateText(t||"",n,e,a,i)},forceUpdateUniforms(r,o){O(r,o)}};f.Painter=q,f.TextGenerator=A,f.createBoxMaterial=z,f.parseBoxShadow=G,f.parseColor=y,f.parseLinearGradient=k,f.parsePixelValue=S,f.setBoxUniforms=O,f.splitByComma=R,f.updateBoxMaterial=F,Object.defineProperty(f,Symbol.toStringTag,{value:"Module"})});

package/dist/src/Box/BoxGenerator.d.ts

@@ -7,8 +7,8 @@ export interface BoxUniformValues {
     height?: number;
     borderRadius?: string | number | [number, number, number, number];
     borderWidth?: number;
-    backgroundColor?: THREE.Color | [number, number, number] | string;
-    borderColor?: THREE.Color | [number, number, number] | string;
+    backgroundColor?: THREE.Color | [number, number, number, number?] | string;
+    borderColor?: THREE.Color | [number, number, number, number?] | string;
     opacity?: number;
     bgOpacity?: number;
     borderOpacity?: number;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mirage-engine/painter",
-  "version": "1.0.6",
+  "version": "1.0.7",
   "main": "src/index.ts",
   "types": "src/index.ts",
   "peerDependencies": {

package/src/Box/BoxGenerator.ts

@@ -147,8 +147,8 @@ export interface BoxUniformValues {
   height?: number;
   borderRadius?: string | number | [number, number, number, number];
   borderWidth?: number;
-  backgroundColor?: THREE.Color | [number, number, number] | string;
-  borderColor?: THREE.Color | [number, number, number] | string;
+  backgroundColor?: THREE.Color | [number, number, number, number?] | string;
+  borderColor?: THREE.Color | [number, number, number, number?] | string;
   opacity?: number;
   bgOpacity?: number;
   borderOpacity?: number;
@@ -199,7 +199,7 @@ export function setBoxUniforms(
 
   if (values.backgroundColor !== undefined) {
     if (Array.isArray(values.backgroundColor)) {
-      const currentAlpha = material.uniforms.uBgColor.value.w;
+      const currentAlpha = values.backgroundColor[3] !== undefined ? values.backgroundColor[3] : material.uniforms.uBgColor.value.w;
       material.uniforms.uBgColor.value.set(
         values.backgroundColor[0],
         values.backgroundColor[1],