@lightningjs/renderer 0.9.2 → 0.9.4

package/src/core/lib/ImageWorker.ts

@@ -125,11 +125,6 @@ export class ImageWorkerManager {
     return worker;
   }
 
-  private convertUrlToAbsolute(url: string): string {
-    const absoluteUrl = new URL(url, self.location.href);
-    return absoluteUrl.href;
-  }
-
   getImage(
     src: string,
     premultiplyAlpha: boolean | null,
@@ -137,14 +132,13 @@ export class ImageWorkerManager {
     return new Promise((resolve, reject) => {
       try {
         if (this.workers) {
-          const absoluteSrcUrl = this.convertUrlToAbsolute(src);
           const id = this.nextId++;
           this.messageManager[id] = [resolve, reject];
           const nextWorker = this.getNextWorker();
           if (nextWorker) {
             nextWorker.postMessage({
               id,
-              src: absoluteSrcUrl,
+              src: src,
               premultiplyAlpha,
             });
           }

package/src/core/lib/utils.ts

@@ -17,6 +17,8 @@
  * limitations under the License.
  */
 
+export const PROTOCOL_REGEX = /^(data|ftps?|https?):/;
+
 export type RGBA = [r: number, g: number, b: number, a: number];
 export const getNormalizedRgbaComponents = (rgba: number): RGBA => {
   const r = rgba >>> 24;
@@ -248,3 +250,28 @@ export function isBoundPositive(bound: Bound): boolean {
 export function isRectPositive(rect: Rect): boolean {
   return rect.width > 0 && rect.height > 0;
 }
+
+export function convertUrlToAbsolute(url: string): string {
+  // handle local file imports if the url isn't remote resource or data blob
+  if (self.location.protocol === 'file:' && !PROTOCOL_REGEX.test(url)) {
+    const path = self.location.pathname.split('/');
+    path.pop();
+    const basePath = path.join('/');
+    const baseUrl = self.location.protocol + '//' + basePath;
+
+    // check if url has a leading dot
+    if (url.charAt(0) === '.') {
+      url = url.slice(1);
+    }
+
+    // check if url has a leading slash
+    if (url.charAt(0) === '/') {
+      url = url.slice(1);
+    }
+
+    return baseUrl + '/' + url;
+  }
+
+  const absoluteUrl = new URL(url, self.location.href);
+  return absoluteUrl.href;
+}

package/src/core/renderers/webgl/WebGlCoreRenderer.ts

@@ -50,6 +50,7 @@ import { WebGlContextWrapper } from '../../lib/WebGlContextWrapper.js';
 import { RenderTexture } from '../../textures/RenderTexture.js';
 import type { CoreNode } from '../../CoreNode.js';
 import { WebGlCoreCtxRenderTexture } from './WebGlCoreCtxRenderTexture.js';
+import { ImageTexture } from '../../textures/ImageTexture.js';
 
 const WORDS_PER_QUAD = 24;
 // const BYTES_PER_QUAD = WORDS_PER_QUAD * 4;
@@ -298,6 +299,32 @@ export class WebGlCoreRenderer extends CoreRenderer {
       texture = texture.parentTexture;
     }
 
+    const resizeMode = textureOptions?.resizeMode ?? false;
+
+    if (texture instanceof ImageTexture) {
+      if (resizeMode && texture.dimensions) {
+        const { width: tw, height: th } = texture.dimensions;
+        if (resizeMode.type === 'cover') {
+          const scaleX = width / tw;
+          const scaleY = height / th;
+          const scale = Math.max(scaleX, scaleY);
+          const precision = 1 / scale;
+          // Determine based on width
+          if (scale && scaleX && scaleX < scale) {
+            const desiredSize = precision * width;
+            texCoordX1 = (1 - desiredSize / tw) * (resizeMode.clipX ?? 0.5);
+            texCoordX2 = texCoordX1 + desiredSize / tw;
+          }
+          // Determine based on height
+          if (scale && scaleY && scaleY < scale) {
+            const desiredSize = precision * height;
+            texCoordY1 = (1 - desiredSize / th) * (resizeMode.clipY ?? 0.5);
+            texCoordY2 = texCoordY1 + desiredSize / th;
+          }
+        }
+      }
+    }
+
     // Flip texture coordinates if dictated by texture options
     if (flipX) {
       [texCoordX1, texCoordX2] = [texCoordX2, texCoordX1];

package/src/core/renderers/webgl/shaders/DynamicShader.ts

@@ -65,7 +65,7 @@ type MapEffectDescs<T extends keyof EffectMap> = T extends keyof EffectMap
   ? SpecificEffectDesc<T>
   : never;
 
-type EffectDesc = MapEffectDescs<keyof EffectMap>;
+export type EffectDesc = MapEffectDescs<keyof EffectMap>;
 
 export interface DynamicShaderProps
   extends DimensionsShaderProp,

package/src/core/renderers/webgl/shaders/effects/BorderEffect.ts

@@ -76,7 +76,8 @@ export class BorderEffect extends ShaderEffect {
   };
 
   static override onEffectMask = `
-  float mask = clamp(shaderMask + width, 0.0, 1.0) - clamp(shaderMask, 0.0, 1.0);
+  float intR = shaderMask + 1.0;
+  float mask = clamp(intR + width, 0.0, 1.0) - clamp(intR, 0.0, 1.0);
   return mix(shaderColor, mix(shaderColor, maskColor, maskColor.a), mask);
   `;
 

package/src/core/textures/ImageTexture.ts

@@ -23,6 +23,7 @@ import {
   isCompressedTextureContainer,
   loadCompressedTexture,
 } from '../lib/textureCompression.js';
+import { convertUrlToAbsolute } from '../lib/utils.js';
 
 /**
  * Properties of the {@link ImageTexture}
@@ -108,13 +109,16 @@ export class ImageTexture extends Texture {
       return loadCompressedTexture(src);
     }
 
+    // Convert relative URL to absolute URL
+    const absoluteSrc = convertUrlToAbsolute(src);
+
     if (this.txManager.imageWorkerManager) {
       return await this.txManager.imageWorkerManager.getImage(
-        src,
+        absoluteSrc,
         premultiplyAlpha,
       );
     } else if (this.txManager.hasCreateImageBitmap) {
-      const response = await fetch(src);
+      const response = await fetch(absoluteSrc);
       const blob = await response.blob();
       const hasAlphaChannel =
         premultiplyAlpha ?? this.hasAlphaChannel(blob.type);
@@ -131,7 +135,7 @@ export class ImageTexture extends Texture {
       if (!(src.substr(0, 5) === 'data:')) {
         img.crossOrigin = 'Anonymous';
       }
-      img.src = src;
+      img.src = absoluteSrc;
       await new Promise<void>((resolve, reject) => {
         img.onload = () => resolve();
         img.onerror = () => reject(new Error(`Failed to load image`));
@@ -162,7 +166,7 @@ export class ImageTexture extends Texture {
     return {
       src: props.src ?? '',
       premultiplyAlpha: props.premultiplyAlpha ?? true, // null,
-      key: props.key ?? null
+      key: props.key ?? null,
     };
   }
 

package/src/render-drivers/utils.ts

@@ -58,7 +58,12 @@ export async function loadCoreExtension(
 }
 
 export function santizeCustomDataMap(d: CustomDataMap): CustomDataMap {
-  const validTypes = { boolean: true, string: true, number: true, undefined: true };
+  const validTypes = {
+    boolean: true,
+    string: true,
+    number: true,
+    undefined: true,
+  };
 
   const keys = Object.keys(d);
   for (let i = 0; i < keys.length; i++) {