lume - npm Package Compare versions

Comparing version 0.3.0-alpha.39 to 0.3.0-alpha.40

dist/behaviors/mesh-behaviors/materials/MaterialBehavior.d.ts

@@ -150,2 +150,3 @@ import { Color } from 'three/src/math/Color.js';
     set color(val: string | number | Color);
+    __transparent: import("solid-js").Accessor<boolean>;
     /**
@@ -152,0 +153,0 @@ * @property {} transparent -

dist/behaviors/mesh-behaviors/materials/MaterialBehavior.js

@@ -39,3 +39,3 @@ // TODO material arrays are not handled. Any LUME elements have one material. If
 };
-import { onCleanup } from 'solid-js';
+import { createMemo, onCleanup } from 'solid-js';
 import { TextureLoader } from 'three/src/loaders/TextureLoader.js';
@@ -373,2 +373,4 @@ import { Color } from 'three/src/math/Color.js';
         }
+        // TODO use @memo (once implemented in classy-solid) on `get transparent` instead of making this extra prop with createMemo.
+        __transparent = createMemo(() => (this.element.opacity < 1 || this.materialOpacity < 1 ? true : false));
         /**
@@ -384,6 +386,3 @@ * @property {} transparent -
         get transparent() {
-            if (this.element.opacity < 1 || this.materialOpacity < 1)
-                return true;
-            else
-                return false;
+            return this.__transparent();
         }
@@ -447,2 +446,9 @@ connectedCallback() {
             });
+            this.createEffect(() => {
+                const mat = this.meshComponent;
+                if (!mat)
+                    return;
+                this.transparent; // dependency (if changed based on opacity)
+                mat.needsUpdate = true;
+            });
         }
@@ -449,0 +455,0 @@ _createComponent() {

dist/core/Motor.d.ts

 import type { SharedAPI } from './SharedAPI.js';
-export type RenderTask = (timestamp: number, deltaTime: number) => false | void;
+export type RenderTask = (timestamp: number, deltaTime: number) => false | unknown;
 declare class _Motor {
@@ -4,0 +4,0 @@ #private;

dist/core/SharedAPI.js

@@ -38,3 +38,3 @@ var __runInitializers = (this && this.__runInitializers) || function (thisArg, initializers, value) {
 import { Object3D } from 'three/src/core/Object3D.js';
-import { element, attribute, booleanAttribute } from '@lume/element';
+import { element, booleanAttribute, numberAttribute } from '@lume/element';
 import { Transformable } from './Transformable.js';
@@ -93,3 +93,3 @@ import { ElementOperations } from './ElementOperations.js';
             const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
-            _set_opacity_decorators = [attribute];
+            _set_opacity_decorators = [numberAttribute];
             _debug_decorators = [booleanAttribute];
@@ -96,0 +96,0 @@ __scene_decorators = [signal];

dist/index.d.ts

@@ -21,3 +21,3 @@ import './silence-solid.js';
 export * from './defineElements.js';
-export declare const version = "0.3.0-alpha.39";
+export declare const version = "0.3.0-alpha.40";
 //# sourceMappingURL=index.d.ts.map

dist/index.js

@@ -21,3 +21,3 @@ import './silence-solid.js';
 export * from './defineElements.js';
-export const version = '0.3.0-alpha.39';
+export const version = '0.3.0-alpha.40';
 //# sourceMappingURL=index.js.map

package.json

 {
 	"name": "lume",
-	"version": "0.3.0-alpha.39",
+	"version": "0.3.0-alpha.40",
 	"description": "Build next-level interactive web applications.",
@@ -5,0 +5,0 @@ "license": "MIT",

src/behaviors/mesh-behaviors/materials/MaterialBehavior.ts

@@ -6,3 +6,3 @@ // TODO material arrays are not handled. Any LUME elements have one material. If
 
-import {onCleanup} from 'solid-js'
+import {createMemo, onCleanup} from 'solid-js'
 import {TextureLoader} from 'three/src/loaders/TextureLoader.js'
@@ -206,2 +206,5 @@ import {Color} from 'three/src/math/Color.js'
 
+	// TODO use @memo (once implemented in classy-solid) on `get transparent` instead of making this extra prop with createMemo.
+	__transparent = createMemo(() => (this.element.opacity < 1 || this.materialOpacity < 1 ? true : false))
+
 	/**
@@ -217,4 +220,3 @@ * @property {} transparent -
 	get transparent(): boolean {
-		if (this.element.opacity < 1 || this.materialOpacity < 1) return true
-		else return false
+		return this.__transparent()
 	}
@@ -287,2 +289,10 @@
 		})
+
+		this.createEffect(() => {
+			const mat = this.meshComponent
+			if (!mat) return
+
+			this.transparent // dependency (if changed based on opacity)
+			mat.needsUpdate = true
+		})
 	}
@@ -289,0 +299,0 @@

src/core/Motor.ts

@@ -6,3 +6,3 @@ // TODO import and use animation-loop
 
-export type RenderTask = (timestamp: number, deltaTime: number) => false | void
+export type RenderTask = (timestamp: number, deltaTime: number) => false | unknown
 
@@ -9,0 +9,0 @@ class _Motor {

src/core/SharedAPI.ts

 import {untrack} from 'solid-js'
 import {signal} from 'classy-solid'
 import {Object3D} from 'three/src/core/Object3D.js'
-import {element, attribute, booleanAttribute} from '@lume/element'
+import {element, booleanAttribute, numberAttribute} from '@lume/element'
 import {Transformable} from './Transformable.js'
@@ -88,3 +88,3 @@ import {ElementOperations} from './ElementOperations.js'
 	// TODO convert opacity to multiplicative down the tree for gl materials.
-	@attribute
+	@numberAttribute
 	set opacity(newValue: number | SinglePropertyFunction) {
@@ -91,0 +91,0 @@ if (!opacity.has(this)) opacity.set(this, 1)

src/index.ts

@@ -64,2 +64,2 @@ import './silence-solid.js'
 
-export const version = '0.3.0-alpha.39'
+export const version = '0.3.0-alpha.40'

No alert changes

Improved metrics

Total package byte prevSize

2297780

increased by0.05%

Lines of code

42064

increased by0.03%

No dependency changes