Merge pull request #75 from Doxel-AI/property-updates

Property updates
breakfast-studio · Nov 8, 2024 · ba063e9 · ba063e9
2 parents 1126be8 + 3927c21
commit ba063e9
Show file tree

Hide file tree

Showing 5 changed files with 23 additions and 14 deletions.
diff --git a/packages/lunchboxjs/cypress/pages/vue.html b/packages/lunchboxjs/cypress/pages/vue.html
@@ -29,7 +29,7 @@
         <three-lunchbox>
             <!-- standard box -->
             <three-mesh position-z="-5" data-name="base" :position-x="positionX">
-                <box-geometry :args="[1, 2, 3]"></box-geometry>
+                <box-geometry .args="[1, 2, 3]"></box-geometry>
                 <mesh-basic-material wireframe color="black"></mesh-basic-material>
             </three-mesh>
 

diff --git a/packages/lunchboxjs/package.json b/packages/lunchboxjs/package.json
@@ -12,7 +12,7 @@
       "types": "./dist/src/index.d.ts"
     }
   },
-  "version": "2.0.2",
+  "version": "2.1.0",
   "type": "module",
   "types": "./dist/src/index.d.ts",
   "scripts": {

diff --git a/packages/lunchboxjs/src/parseAttributeValue.ts b/packages/lunchboxjs/src/parseAttributeValue.ts
@@ -1,4 +1,5 @@
 import { ThreeLunchbox } from "./three-lunchbox";
+import * as THREE from 'three';
 
 const valueShortcuts = {
     '$scene': (element: HTMLElement) => {
@@ -23,7 +24,7 @@ const valueShortcuts = {
     },
 };
 
-export const parseAttributeValue = (targetValue: unknown, element: HTMLElement) => {
+export const parseAttributeOrPropertyValue = (targetValue: unknown, element: HTMLElement) => {
     // leave as-is if this isn't a string
     if (typeof targetValue !== 'string') return targetValue;
 
@@ -34,6 +35,9 @@ export const parseAttributeValue = (targetValue: unknown, element: HTMLElement)
     // TODO: allow extending these
     const result = valueShortcuts[targetValue as keyof typeof valueShortcuts]?.(element);
 
+    // Color support
+    if (CSS.supports('color', targetValue)) return new THREE.Color(targetValue);
+
     // default - return target value
     return result ?? targetValue;
 };
diff --git a/packages/lunchboxjs/src/three-base.ts b/packages/lunchboxjs/src/three-base.ts
@@ -1,9 +1,9 @@
 import { LitElement, html } from "lit";
-import { property } from "lit/decorators.js";
 import * as THREE from 'three';
 import { IsClass, THREE_UUID_ATTRIBUTE_NAME, isClass } from "./utils";
 import { setThreeProperty } from "./setThreeProperty";
-import { parseAttributeValue } from "./parseAttributeValue";
+import { parseAttributeOrPropertyValue } from "./parseAttributeValue";
+import parse from 'json5/lib/parse';
 
 export const RAYCASTABLE_ATTRIBUTE_NAME = 'raycast';
 export const IGNORED_ATTRIBUTES = [
@@ -24,8 +24,6 @@ export const buildClass = <T extends IsClass>(targetClass: keyof typeof THREE |
 
     /** Standard ThreeJS class */
     class ThreeBase<U extends IsClass = T> extends LitElement {
-        @property({ type: Array })
-        args: ConstructorParameters<U> = [] as unknown as ConstructorParameters<U>;
         instance: U | null = null;
 
         dispose: (() => void)[] = [];
@@ -49,10 +47,16 @@ export const buildClass = <T extends IsClass>(targetClass: keyof typeof THREE |
             });
         }
 
+        parsedArgs() {
+            const args = (this as { args?: Array<unknown> }).args ?? this.getAttribute('args') ?? [];
+            const parsedArgs: Array<unknown> = typeof args === 'string' ? parse(args) : args;
+            return parsedArgs;
+        }
+
         createUnderlyingThreeObject() {
             // Instance creation
             // ==================
-            this.instance = new (threeClass as U)(...this.args.map(arg => parseAttributeValue(arg, this))) as unknown as U;
+            this.instance = new (threeClass as U)(...this.parsedArgs().map(arg => parseAttributeOrPropertyValue(arg, this))) as unknown as U;
         }
 
         refreshAttributes() {
@@ -151,7 +155,7 @@ export const buildClass = <T extends IsClass>(targetClass: keyof typeof THREE |
             // handle non-events
             // ==================
             // TODO: parse objects as non-JSON (`{&quot;test&quot;: 1}` is annoying to write)
-            let parsedValue = parseAttributeValue(value, this);
+            let parsedValue = parseAttributeOrPropertyValue(value, this);
             try {
                 parsedValue = JSON.parse(value === '' ? 'true' : value);
             } catch (_err) {
@@ -203,7 +207,7 @@ export const buildClass = <T extends IsClass>(targetClass: keyof typeof THREE |
 
         createUnderlyingThreeObject(): void {
             // eslint-disable-next-line @typescript-eslint/no-explicit-any
-            this.loader = new (threeClass as any)(...this.args.map(arg => parseAttributeValue(arg, this)));
+            this.loader = new (threeClass as any)(...this.parsedArgs().map(arg => parseAttributeOrPropertyValue(arg, this)));
         }
 
         onUnderlyingThreeObjectReady(): void {

diff --git a/packages/lunchboxjs/src/three-lunchbox.ts b/packages/lunchboxjs/src/three-lunchbox.ts
@@ -6,7 +6,7 @@ import { AFTER_RENDER_EVENT_NAME, BEFORE_RENDER_EVENT_NAME, Lunchbox, THREE_CLIC
 import parse from 'json5/lib/parse';
 import { setThreeProperty } from './setThreeProperty';
 import { property } from 'lit/decorators.js';
-import { parseAttributeValue } from './parseAttributeValue';
+import { parseAttributeOrPropertyValue } from './parseAttributeValue';
 
 const ORTHOGRAPHIC_CAMERA_ATTR_NAME = 'orthographic';
 const DEFAULT_DPR = Infinity;
@@ -104,12 +104,13 @@ export class ThreeLunchbox extends LitElement {
 
     // Camera, scene, renderer information
     (['scene', 'camera', 'renderer'] as const).forEach(key => {
-      const options = parse(this.getAttribute(key) ?? '{}');
+      const options = (this as { scene?: object | string, camera?: object | string, renderer?: object | string })[key] ?? this.getAttribute(key) ?? {};
+      const parsedOptions = typeof options === 'string' ? parse(options) : options;
       // properties
-      Object.entries(options).forEach(([k, v]) => {
+      Object.entries(parsedOptions).forEach(([k, v]) => {
         if (this.three[key]) {
           // set property
-          setThreeProperty(this.three[key]!, k.split('-'), parseAttributeValue(v, this));
+          setThreeProperty(this.three[key]!, k.split('-'), parseAttributeOrPropertyValue(v, this));
         }
       });
     });