@lukekaalim/act-three 7.1.1 → 8.0.0

package/CHANGELOG.md

@@ -1,5 +1,24 @@
 # @lukekaalim/act-three
 
+## 8.0.0
+
+### Major Changes
+
+- bf3138f: Added PrimitiveRegistry for dynamically adding more elements to act-three, implemented in backstage
+
+### Patch Changes
+
+- Updated dependencies [bf3138f]
+  - @lukekaalim/act-backstage@3.2.0
+  - @lukekaalim/act-web@5.2.0
+  - @lukekaalim/act@4.3.0
+
+## 7.1.2
+
+### Patch Changes
+
+- Fix missing package.json updates from last patch
+
 ## 7.1.1
 
 ### Patch Changes

package/builder.ts

@@ -1,6 +1,6 @@
 import { NodeBuilder } from "@lukekaalim/act-backstage";
 import { Object3D } from "three";
-import { getElementHandler } from "./elements";
+import { registry } from "./elements";
 import { Component, h, specialNodeTypes } from "@lukekaalim/act";
 
 export const ThreeJSRoot: Component = ({ children }) => h(specialNodeTypes.render, { type: 'threejs' }, children);
@@ -9,15 +9,10 @@ export const createThreeJSBuilder = (rootObject: Object3D | null = null): NodeBu
   roots: new Set(['threejs']),
 
   create(element) {
-    const handler = getElementHandler(element.type);
-    if (handler)
-      return handler.create(element.props);
-    return null;
+    return registry.create(element);
   },
   update(el, next, prev) {
-    const handler = getElementHandler(next.type);
-    if (handler)
-      handler.setProps(el, prev && prev.props, next.props);
+    registry.update(el, next, prev);
   },
   linkRoot: rootObject && ((child) => {
     rootObject.add(child);

package/elements.ts

@@ -1,69 +1,165 @@
-import { DirectionalLight, Group, Line, LineLoop, LineSegments, Mesh, Object3D, OrthographicCamera, PerspectiveCamera, PointLight, Points, Scene, SkinnedMesh, Sprite } from "three";
-import { act } from "./deps";
-import { Object3DProps, setProps } from "./props";
-import { Component, ElementType, h, Node } from "@lukekaalim/act";
+import * as three from "three";
+import { Ref } from "@lukekaalim/act";
+import { createPrimitiveRegistry } from "@lukekaalim/act-backstage";
+import { setProps } from "./props";
 
-const handlers = new Map<string | Symbol, ThreeNodeHandler<any>>();
+export type PropsFromClass<T extends three.Object3D> = {
+  position?: three.Vector3Like,
+  rotation?: three.Euler,
+  quaternion?: three.QuaternionLike,
+  scale?: three.Vector3,
+  //pivot?: three.Vector3Like | null,
 
-export type ThreeNodeHandler<T extends Object3D> = {
-  type: string | Symbol,
-  create: (props: act.Props) => T,
-  setProps: (instance: T, prevProps: null | act.Props, nextProps: act.Props) => unknown,
+  name?: string,
+  layers?: three.Layers,
+
+  visible?: boolean,
+  static?: boolean,
+  renderOrder?: number,
+  receiveShadow?: boolean,
+  castShadow?: boolean,
+  frustumCulled?: boolean,
+
+  animations?: three.AnimationClip[],
+  
+  userData?: {},
+
+  //up?: three.Vector3Like,
+
+  //onChildAdded?: (child: three.Object3D) => void,
+  //onChildRemoved?: (child: three.Object3D) => void,
+  //onAdded?: (self: T) => void,
+  //onRemoved?: (self: T) => void,
+
+  ref?: Ref<null | T>
 }
+  & (T extends three.Mesh | three.Points | three.Line ? DrawableProps : {})
+  & (T extends three.Sprite ? SpriteProps : {})
+  & (T extends three.Light ? LightProps : {})
+  & (T extends three.Camera ? CameraProps<T> : {})
+  & (T extends three.Scene ? SceneProps : {})
 
-export const registerElementHandler = <T extends Object3D>(handler: ThreeNodeHandler<T>): void => {
-  handlers.set(handler.type, handler);
+type SceneProps = {
+  fog?: three.FogExp2 | three.Fog | null,
+  overrideMaterial?: three.Material | null,
+
+  background?: three.Color | three.Texture | null,
+  backgroundBlurriness?: number,
+  backgroundRotation?: number,
+  backgroundIntensity?: three.Euler,
+
+  environment?: three.Texture | null,
+  environmentRotation?: number,
+  environmentIntensity?: three.Euler,
 }
 
-export const getElementHandler = (type: act.ElementType): null | ThreeNodeHandler<Object3D> => {
-  if (typeof type === 'string' || typeof type === 'symbol') {
-    const handler = handlers.get(type);
-    if (handler)
-      return handler;
-  }
-  return null;
+type DrawableProps = {
+  geometry?: three.BufferGeometry,
+  material?: three.Material | three.Material[]
+}
+type LightProps = {
+  color?: three.Color,
+  intensity?: number,
 }
+type SpriteProps = {
+  center?: three.Vector2Like,
+} & DrawableProps;
+type CameraProps<T extends three.Camera> =
+  & T extends three.PerspectiveCamera ? {
+    aspect?: number,
+    far?: number,
+    near?: number,
+    focus?: number,
+    fov?: number,
+    zoom?: number,
+  } : {}
+  & T extends three.OrthographicCamera ? {
+    far?: number,
+    near?: number,
 
-export type Newable<T> = { new (): T; };
-
-export const addSimpleElement = <T extends Object3D>(type: string | symbol, ElementClass: Newable<T>) => {
-  registerElementHandler<T>({
-    type,
-    create() {
-      return new ElementClass();
-    },
-    setProps(instance, prevProps, nextProps) {
-      setProps(instance, nextProps as Object3DProps<T>);
-    },
-  })
+    top?: number,
+    right?: number,
+    left?: number,
+    bottom?: number,
+    
+    zoom?: number,
+  } : {}
+
+type BuiltinRegistry = {
+  [Property in keyof THREE_CLASS_MAP]: PropsFromClass<InstanceType<THREE_CLASS_MAP[Property]>>
 }
 
-const elementMap = {
-  mesh: Mesh,
-  points: Points,
-  group: Group,
-  scene: Scene,
-  sprite: Sprite,
-  skinnedMesh: SkinnedMesh,
+/**
+ * Users can write:
+ * ```ts
+ * declare module "@lukekaalim/act-three" {
+ *   interface ExtendedPrimitives {
+ *     MyPrimitive: { myProps: boolean }
+ *   }
+ * }
+ * ```
+ * to add a new type definition for an element,
+ * and then supply an implementation via:
+ * 
+ * ```ts
+ * registry
+ *  .registerPrimitive(
+ *    'MyPrimitive',
+ *    () => new MyPrimitive(),
+ *    (primitive, props) => { primitive.myProps = props.myProps; })
+ *  );
+ * 
+ * ```
+ */
+export interface ExtendedPrimitives {}
 
-  pointLight: PointLight,
-  directionalLight: DirectionalLight,
+type AllPrimitives = ExtendedPrimitives & BuiltinRegistry;
 
-  line: Line,
-  lineLoop: LineLoop,
-  lineSegments: LineSegments,
+export const registry = createPrimitiveRegistry<AllPrimitives, three.Object3D>();
+/**
+ * Type checked act-three primitive elements.
+ */
+export const a3 = registry.elements;
 
-  perspectiveCamera: PerspectiveCamera,
-  orthographicCamera: OrthographicCamera,
-} as const;
-type ElementMap = typeof elementMap;
 
-for (const key in elementMap) {
-  addSimpleElement(key, elementMap[key as keyof ElementMap] as any)
-}
+type THREE_CLASS_MAP = typeof THREE_OBJECT3D_CLASS_MAP;
+const THREE_OBJECT3D_CLASS_MAP = {
+  mesh: three.Mesh,
+  instancedMesh: three.InstancedMesh,
+  skinnedMesh: three.SkinnedMesh,
+
+  points: three.Points,
+
+  object: three.Object3D,
+  group: three.Group,
+  scene: three.Scene,
+
+  sprite: three.Sprite,
+
+  pointLight: three.PointLight,
+  directionalLight: three.DirectionalLight,
 
-type ElementNodes = {
-  readonly [key in keyof ElementMap]: Component<Object3DProps<InstanceType<ElementMap[key]>>>
-};
+  line: three.Line,
+  lineLoop: three.LineLoop,
+  lineSegments: three.LineSegments,
 
-export const node: ElementNodes = Object.fromEntries(Object.keys(elementMap).map(k => [k, k as ElementType])) as ElementNodes;
+  perspectiveCamera: three.PerspectiveCamera,
+  orthographicCamera: three.OrthographicCamera,
+  cubeCamera: three.CubeCamera,
+}
+
+registry
+  .addGlobalCreateHandler((type, props) => {
+    const ObjectClass = (THREE_OBJECT3D_CLASS_MAP as any)[type];
+    if (ObjectClass) {
+      const object = new (ObjectClass as typeof three.Object3D)();
+      setProps(object, props as PropsFromClass<three.Object3D>);
+      return object;
+    }
+    console.warn(`I WONT MAKE ${type}`)
+    return null;
+  })
+  .addGlobalUpdateHandler((type, object, next, prev) => {
+    setProps(object, next as PropsFromClass<three.Object3D>);
+  })
+  .registerUnhandledPrimitives(Object.keys(THREE_OBJECT3D_CLASS_MAP) as any[])

package/index.ts

@@ -1,4 +1,3 @@
-export { three } from './deps.ts';
 export * from './render.ts';
 export * from './props.ts';
 export * from './elements.ts';

package/package.json

@@ -1,12 +1,13 @@
 {
   "name": "@lukekaalim/act-three",
-  "main": "mod.ts",
-  "version": "7.1.1",
+  "main": "index.ts",
+  "type": "module",
+  "version": "8.0.0",
   "dependencies": {
-    "@lukekaalim/act": "^4.2.0",
-    "@lukekaalim/act-backstage": "^3.1.1",
+    "@lukekaalim/act": "^4.3.0",
+    "@lukekaalim/act-backstage": "^3.2.0",
     "@lukekaalim/act-recon": "^4.0.0",
-    "@lukekaalim/act-web": "^5.1.0",
+    "@lukekaalim/act-web": "^5.2.0",
     "@types/three": ">= 0.185.0"
   },
   "peerDependencies": {

package/props.ts

@@ -1,39 +1,92 @@
-import { Object3D } from "three";
-import { act, three } from "./deps";
+import * as three from 'three';
+import * as act from '@lukekaalim/act';
+import { PropsFromClass } from "./elements";
 
-export type Object3DProps<T extends Object3D> = {
-  position?: three.Vector3,
-  scale?: three.Vector3,
-  quaternion?: three.Quaternion,
-  rotation?: three.Euler,
 
-  ref?: act.ReadonlyRef<null | three.Object3D>,
-}
-  & (T extends three.Mesh ? { geometry?: three.BufferGeometry, material?: three.Material } : {})
-  & (T extends three.Scene ? { background?: three.Color } : {})
-
-export const setProps = <T extends Object3D>(object: T, props: Object3DProps<T>) => {
+export const setProps = (object: three.Object3D, props: PropsFromClass<three.Object3D>) => {
   if (props.position)
-    object.position.copy(props.position as three.Vector3);
+    object.position.copy(props.position);
   if (props.scale)
-    object.scale.copy(props.scale as three.Vector3);
+    object.scale.copy(props.scale);
   if (props.quaternion)
-    object.quaternion.copy(props.quaternion as three.Quaternion);
+    object.quaternion.copy(props.quaternion);
   if (props.rotation)
-    object.rotation.copy(props.rotation as three.Euler);
+    object.rotation.copy(props.rotation);
+
+  if (props.name  !== undefined)
+    object.name = props.name;
+  if (props.layers)
+    object.layers = props.layers;
+
+  if (props.visible  !== undefined)
+    object.visible = props.visible;
+  if (props.static  !== undefined)
+    object.static = props.static;
+  if (props.renderOrder  !== undefined)
+    object.renderOrder = props.renderOrder;
+  if (props.receiveShadow  !== undefined)
+    object.receiveShadow = props.receiveShadow;
+  if (props.castShadow  !== undefined)
+    object.castShadow = props.castShadow;
+  if (props.frustumCulled  !== undefined)
+    object.frustumCulled = props.frustumCulled;
+
+  if (props.animations)
+    object.animations = props.animations;
+  if (props.userData)
+    object.userData = props.userData;
+
   if (props.ref)
-    (props.ref as Record<string, unknown>).current = object;
+    props.ref.current = object;
   
-  if (object instanceof three.Mesh) {
-    const meshProps = props as Object3DProps<three.Mesh>;
+  if (object instanceof three.Mesh || object instanceof three.Points || object instanceof three.Line) {
+    const meshProps = props as PropsFromClass<three.Mesh | three.Points | three.Line>;
     object.geometry = meshProps.geometry;
     object.material = meshProps.material;
   }
+
   if (object instanceof three.PerspectiveCamera) {
+    const perspectiveCameraProps = props as PropsFromClass<three.PerspectiveCamera>;
+    if (perspectiveCameraProps.aspect)
+      object.aspect = perspectiveCameraProps.aspect;
+    if (perspectiveCameraProps.fov)
+      object.fov = perspectiveCameraProps.fov;
+    
+    if (perspectiveCameraProps.far)
+      object.far = perspectiveCameraProps.far;
+    if (perspectiveCameraProps.near)
+      object.near = perspectiveCameraProps.near;
+
+    if (perspectiveCameraProps.zoom)
+      object.zoom = perspectiveCameraProps.zoom;
+    
     object.updateProjectionMatrix();
   }
   if (object instanceof three.Scene) {
-    const sceneProps = props as Object3DProps<three.Scene>;
-    object.background = (sceneProps.background as three.Color);
+    const sceneProps = props as PropsFromClass<three.Scene>;
+    if (sceneProps.background  !== undefined)
+      object.background = sceneProps.background;
+    if (sceneProps.environment  !== undefined)
+      object.environment = sceneProps.environment;
+
+    if (sceneProps.fog  !== undefined)
+      object.fog = sceneProps.fog;
+    if (sceneProps.overrideMaterial !== undefined)
+      object.overrideMaterial = sceneProps.overrideMaterial;
+  }
+
+  if (object instanceof three.Light) {
+    const lightProps = props as PropsFromClass<three.Light>;
+    if (lightProps.color)
+      object.color.copy(lightProps.color)
+    if (lightProps.intensity !== undefined)
+      object.intensity = lightProps.intensity;
+  }
+
+  if (object instanceof three.Sprite) {
+    const spriteProps = props as PropsFromClass<three.Sprite>;
+    if (spriteProps.center)
+      object.center.copy(spriteProps.center)
   }
 };
+

package/deps.ts

@@ -1,3 +0,0 @@
-export * as act from '@lukekaalim/act/mod.ts';
-export * as recon from '@lukekaalim/act-recon/mod.ts';
-export * as three from "three";