, then assign the wrapper to the slot.',
+ )
+ })
+ }
+ }
makeThreeObject3d() {
return new ThreeScene()
@@ -534,6 +488,52 @@ export class Scene extends HTMLInterface {
return new ThreeScene()
}
+ get composedLumeChildren(): Node[] {
+ const result: Node[] = []
+ for (const child of super.composedLumeChildren) if (isNode(child)) result.push(child)
+ return result
+ }
+
+ /**
+ * @method traverseSceneGraph - This traverses the the composed tree of
+ * LUME 3D elements (the scene graph) not including this element, in pre-order. It skips non-LUME elements.
+ * @param {(node: Node) => void} visitor - A function called for each
+ * LUME node in the scene graph (the composed tree).
+ * @param {boolean} waitForUpgrade - Defaults to `false`. If `true`,
+ * the traversal will wait for custom elements to be defined (with
+ * customElements.whenDefined) before traversing to them.
+ * @returns {void | Promise
} - If `waitForUpgrade` is `false`,
+ * the traversal will complete synchronously, and the return value will be
+ * `undefined`. If `waitForUpgrade` is `true`, then traversal completes
+ * asynchronously once all custom elements are defined, and a Promise is
+ * returned so that it is possible to wait for the traversal to complete.
+ */
+ traverseSceneGraph(visitor: (node: Node) => void, waitForUpgrade = false): Promise | void {
+ if (!waitForUpgrade) {
+ for (const child of this.composedLumeChildren) child.traverseSceneGraph(visitor, waitForUpgrade)
+
+ return
+ }
+
+ // if waitForUpgrade is true, we make a promise chain so that
+ // traversal order is still the same as when waitForUpgrade is false.
+ let promise: Promise = Promise.resolve()
+
+ for (const child of this.composedLumeChildren) {
+ const isUpgraded = child.matches(':defined')
+
+ if (isUpgraded) {
+ promise = promise!.then(() => child.traverseSceneGraph(visitor, waitForUpgrade))
+ } else {
+ promise = promise!
+ .then(() => customElements.whenDefined(child.tagName.toLowerCase()))
+ .then(() => child.traverseSceneGraph(visitor, waitForUpgrade))
+ }
+ }
+
+ return promise
+ }
+
_createDefaultCamera() {
// Use untrack so this method is non-reactive.
untrack(() => {
@@ -596,7 +596,7 @@ export class Scene extends HTMLInterface {
/** @override */
_getParentSize(): XYZValuesObject {
- return this.parent ? (this.parent as Sizeable).calculatedSize : this._elementParentSize
+ return this.composedLumeParent ? (this.composedLumeParent as Sizeable).calculatedSize : this._elementParentSize
}
// For now, use the same program (with shaders) for all objects.
@@ -607,8 +607,6 @@ export class Scene extends HTMLInterface {
// maybe keep this in sceneState in WebGLRendererThree
if (!super._loadGL()) return false
- this._composedChildren
-
// We don't let Three update any matrices, we supply our own world
// matrices.
this.three.autoUpdate = false
@@ -693,24 +691,11 @@ export class Scene extends HTMLInterface {
}),
)
- this.traverse((node: TreeNode) => {
- // skip `this`, we already handled it above
- if (node === this) return
-
- if (isImperativeBase(node)) node._triggerLoadGL()
- })
+ this.traverseSceneGraph((node: Node) => node._triggerLoadGL(), true)
return true
}
- static css = /*css*/ `
- ${HTMLInterface.css}
- .vrButton {
- color: black;
- border-color: black;
- }
- `
-
_unloadGL() {
if (!super._unloadGL()) return false
@@ -719,12 +704,7 @@ export class Scene extends HTMLInterface {
this.#glRenderer = null
}
- this.traverse((node: TreeNode) => {
- // skip `this`, we already handled it above
- if (node === this) return
-
- if (isImperativeBase(node)) node._triggerUnloadGL()
- })
+ this.traverseSceneGraph((node: Node) => node._triggerUnloadGL())
// Not all things are loaded in _loadGL (they may be loaded
// depending on property/attribute values), but all things, if any, should
@@ -742,12 +722,7 @@ export class Scene extends HTMLInterface {
this.#cssRenderer = this.#getCSSRenderer('three')
- this.traverse((node: TreeNode) => {
- // skip `this`, we already handled it above
- if (node === this) return
-
- if (isImperativeBase(node)) node._loadCSS()
- })
+ this.traverseSceneGraph((node: Node) => node._loadCSS(), true)
return true
}
@@ -760,12 +735,7 @@ export class Scene extends HTMLInterface {
this.#cssRenderer = null
}
- this.traverse((node: TreeNode) => {
- // skip `this`, we already handled it above
- if (node === this) return
-
- if (isImperativeBase(node)) node._unloadCSS()
- })
+ this.traverseSceneGraph((node: Node) => node._unloadCSS())
return true
}
@@ -821,7 +791,6 @@ export class Scene extends HTMLInterface {
#parentSize: XYZValuesObject = {x: 0, y: 0, z: 0}
- // HTM-API
#startOrStopParentSizeObservation() {
if (
// If we will be rendering something...
@@ -840,15 +809,22 @@ export class Scene extends HTMLInterface {
#resizeObserver: ResizeObserver | null = null
- // observe size changes on the scene element.
- // HTM-API
+ // observe size changes on the scene's parent.
#startParentSizeObservation() {
- const parent =
- this.parentNode instanceof HTMLElement
- ? this.parentNode
- : this.parentNode instanceof ShadowRoot
- ? this.parentNode.host
- : thro('A Scene can only be child of an HTMLElement or ShadowRoot (and f.e. not an SVGElement).')
+ const parentError = 'A Scene can only be child of HTMLElement or ShadowRoot (f.e. not an SVGElement).'
+
+ // TODO SLOTS use of _composedParent here won't fully work until we
+ // detect composed parent changes when the parent is not one of our own
+ // elements (f.e. when a scene is distributed via slot to a div). The only way
+ // to do this without polling is with a combination of monkey patching
+ // attachShadow and using MutationObserver in all trees to observe slot
+ // elements for slotchange.
+ // https://github.com/WICG/webcomponents/issues/941
+ const parent = this._composedParent
+
+ // This shouldn't be possible.
+ // @prod-prune
+ if (!parent) thro(parentError)
// TODO use a single ResizeObserver for all scenes.
@@ -893,7 +869,6 @@ export class Scene extends HTMLInterface {
this.#resizeObserver.observe(parent)
}
- // HTM-API
#stopParentSizeObservation() {
this.#resizeObserver?.disconnect()
this.#resizeObserver = null
@@ -901,11 +876,10 @@ export class Scene extends HTMLInterface {
// NOTE, the Z dimension of a scene doesn't matter, it's a flat plane, so
// we haven't taken that into consideration here.
- // HTM-API
#checkSize(x: number, y: number) {
const parentSize = this.#parentSize
- // if we have a size change, emit parentsizechange
+ // if we have a size change
if (parentSize.x != x || parentSize.y != y) {
parentSize.x = x
parentSize.y = y
@@ -914,7 +888,6 @@ export class Scene extends HTMLInterface {
}
}
- // HTM-API
#onElementParentSizeChange(newSize: XYZValuesObject) {
this._elementParentSize = newSize
// TODO #66 defer _calcSize to an animation frame (via needsUpdate),
@@ -925,13 +898,6 @@ export class Scene extends HTMLInterface {
}
}
-function isImperativeBase(_n: TreeNode): _n is ImperativeBase {
- // TODO make sure instanceof works. For all intents and purposes, we assume
- // to always have an ImperativeNode where we use this.
- // return n instanceof ImperativeBase
- return true
-}
-
import type {ElementAttributes} from '@lume/element'
declare module '@lume/element' {
@@ -948,14 +914,8 @@ declare global {
}
}
-function documentReady() {
- if (document.readyState === 'loading') {
- return new Promise(resolve => {
- document.addEventListener('DOMContentLoaded', () => resolve())
- })
- }
+type FogMode = 'none' | 'linear' | 'expo2'
- return Promise.resolve()
+function isNode(n: DeclarativeBase): n is Node {
+ return n.isNode
}
-
-type FogMode = 'none' | 'linear' | 'expo2'
diff --git a/packages/lume/src/core/Sizeable.ts b/packages/lume/src/core/Sizeable.ts
index aae75e561..d81763e5b 100644
--- a/packages/lume/src/core/Sizeable.ts
+++ b/packages/lume/src/core/Sizeable.ts
@@ -169,24 +169,18 @@ export class Sizeable extends TreeNode {
this._stopFns.length = 0
}
- get _renderParent(): Sizeable | null {
- if (this.hasHtmlApi) {
- return this._composedParent as Sizeable | null
- } else {
- return this.parent as Sizeable | null
- }
+ get composedLumeParent(): Sizeable | null {
+ const result = super._composedParent
+ if (!(result instanceof Sizeable)) return null
+ return result
}
- get _renderChildren() {
- if (this.hasHtmlApi) {
- return this._composedChildren
- } else {
- return this.subnodes
- }
+ get composedLumeChildren(): Sizeable[] {
+ return super._composedChildren as Sizeable[]
}
_getParentSize() {
- return (this._renderParent && calculatedSize.get(this._renderParent)?.get()) ?? {x: 0, y: 0, z: 0}
+ return (this.composedLumeParent && calculatedSize.get(this.composedLumeParent)?.get()) ?? {x: 0, y: 0, z: 0}
}
_calcSize() {
diff --git a/packages/lume/src/core/TreeNode.test.ts b/packages/lume/src/core/TreeNode.test.ts
index ec9ddd8c7..7c56e2bbb 100644
--- a/packages/lume/src/core/TreeNode.test.ts
+++ b/packages/lume/src/core/TreeNode.test.ts
@@ -11,127 +11,79 @@ describe('TreeNode', () => {
const t = new TreeNode()
- expect(t.subnodes).toEqual([])
- expect(t.parent).toBe(null)
- expect(t.childCount).toBe(0)
+ expect(t.lumeChildren).toEqual([])
+ expect(t.lumeParent).toBe(null)
+ expect(t.lumeChildCount).toBe(0)
})
- it('.add', () => {
+ // The below tests are essentially a placeholder for when the day comes to
+ // ensure that some DOM-like APIs work in non-DOM environments (f.e. we're
+ // planning to bind to OpenGL in Node.js, or in AssemblyScript, without a
+ // DOM).
+
+ it('.append(single)', () => {
const t = new TreeNode()
const a = new TreeNode()
const b = new TreeNode()
- t.add(a)
+ t.append(a)
// Adding an already-added node is a no-op.
- expect(() => t.add(a)).not.toThrow()
+ expect(() => t.append(a)).not.toThrow()
- expect(t.subnodes).toEqual([a])
+ expect(t.lumeChildren).toEqual([a])
- t.add(b)
+ t.append(b)
- expect(t.subnodes).toEqual([a, b])
+ expect(t.lumeChildren).toEqual([a, b])
})
- it('.addChildren', () => {
+ it('.append(...multiple)', () => {
const t = new TreeNode()
const a = new TreeNode()
const b = new TreeNode()
const c = new TreeNode()
- t.addChildren([b, c])
+ t.append(b, c)
// If children are re-added, it's a no-op.
- expect(() => t.addChildren([b, c])).not.toThrow()
+ expect(() => t.append(b, c)).not.toThrow()
- expect(t.childCount).toBe(2)
- expect(t.subnodes).toEqual([b, c])
+ expect(t.lumeChildCount).toBe(2)
+ expect(t.lumeChildren).toEqual([b, c])
- t.addChildren([a])
- expect(() => t.addChildren([a, b])).not.toThrow()
+ t.append(a)
+ expect(() => t.append(a, b)).not.toThrow()
- expect(t.childCount).toBe(3)
- expect(t.subnodes).toEqual([b, c, a])
+ expect(t.lumeChildCount).toBe(3)
+ expect(t.lumeChildren).toEqual([b, c, a])
})
- it('.removeNode', () => {
+ it('.removeChild', () => {
const t = new TreeNode()
const a = new TreeNode()
const b = new TreeNode()
const c = new TreeNode()
- t.addChildren([b, a, c])
-
- expect(t.childCount).toBe(3)
- expect(t.subnodes).toEqual([b, a, c])
-
- t.removeNode(b)
- expect(() => t.removeNode(b)).toThrowError(ReferenceError, 'childNode is not a child of this parent.')
-
- expect(t.childCount).toBe(2)
- expect(t.subnodes).toEqual([a, c])
-
- t.removeNode(a)
-
- expect(t.childCount).toBe(1)
- expect(t.subnodes).toEqual([c])
-
- t.removeNode(c)
-
- expect(t.childCount).toBe(0)
- expect(t.subnodes).toEqual([])
- })
-
- it('.removeChildren', () => {
- const t = new TreeNode()
- const a = new TreeNode()
- const b = new TreeNode()
- const c = new TreeNode()
- const d = new TreeNode()
+ t.append(b, a, c)
- t.addChildren([b, a, c, d])
+ expect(t.lumeChildCount).toBe(3)
+ expect(t.lumeChildren).toEqual([b, a, c])
- expect(t.childCount).toBe(4)
- expect(t.subnodes).toEqual([b, a, c, d])
+ t.removeChild(b)
+ expect(() => t.removeChild(b)).toThrowError(ReferenceError, 'childNode is not a child of this parent.')
- t.removeChildren([c])
- expect(() => t.removeChildren([c])).toThrowError(ReferenceError, 'childNode is not a child of this parent.')
+ expect(t.lumeChildCount).toBe(2)
+ expect(t.lumeChildren).toEqual([a, c])
- expect(t.childCount).toBe(3)
- expect(t.subnodes).toEqual([b, a, d])
+ t.removeChild(a)
- t.removeChildren([b, d])
+ expect(t.lumeChildCount).toBe(1)
+ expect(t.lumeChildren).toEqual([c])
- expect(t.childCount).toBe(1)
- expect(t.subnodes).toEqual([a])
-
- t.removeChildren([a])
-
- expect(t.childCount).toBe(0)
- expect(t.subnodes).toEqual([])
- })
-
- it('.removeAllChildren', () => {
- const t = new TreeNode()
- const a = new TreeNode()
- const b = new TreeNode()
- const c = new TreeNode()
- const d = new TreeNode()
-
- t.addChildren([b, a, c, d])
-
- expect(t.childCount).toBe(4)
- expect(t.subnodes).toEqual([b, a, c, d])
-
- t.removeAllChildren()
- expect(() => t.removeAllChildren()).toThrowError(ReferenceError, 'This node has no children.')
-
- expect(t.childCount).toBe(0)
- expect(t.subnodes).toEqual([])
- })
+ t.removeChild(c)
- xit('lifecycle callbacks', () => {
- // TODO
- expect(false).toBe(true)
+ expect(t.lumeChildCount).toBe(0)
+ expect(t.lumeChildren).toEqual([])
})
})
diff --git a/packages/lume/src/core/TreeNode.ts b/packages/lume/src/core/TreeNode.ts
index 9701659c5..b70f8370b 100644
--- a/packages/lume/src/core/TreeNode.ts
+++ b/packages/lume/src/core/TreeNode.ts
@@ -1,7 +1,6 @@
import {reactive} from '@lume/element'
import {Eventful} from '@lume/eventful'
import {DeclarativeBase} from './DeclarativeBase.js'
-import {defer} from './utils.js'
/**
* @class TreeNode - The `TreeNode` class represents objects that are connected
@@ -12,183 +11,36 @@ import {defer} from './utils.js'
*/
@reactive
export class TreeNode extends Eventful(DeclarativeBase) {
- constructor() {
- super()
-
- // If we're already in the DOM, let's set up the tree state right away.
- // @ts-ignore
- this.parentNode?.add?.(this)
- }
-
- @reactive __parent: TreeNode | null = null
-
- __children: TreeNode[] = []
-
/**
* @readonly
- * @property {TreeNode | null} parent - The parent of the current TreeNode.
- * Each node in a tree can have only one parent. `null` if no parent when not connected into a tree.
+ * @property {TreeNode | null} lumeParent - The LUME-specific parent of the
+ * current TreeNode. Each node in a tree can have only one parent. This is
+ * `null` if there is no parent when not connected into a tree, or if the
+ * parentElement while connected into a tree is not as LUME 3D element.
*/
- get parent() {
- // In case we're in the DOM when this is called and the parent has
- // the TreeNode API, immediately set up our tree state so that APIs
- // depending on .parent (f.e. before childComposedCallback fires the
- // .add method) don't receive a deceitful null value.
- // @ts-ignore
- if (!this.__parent) this.parentNode?.add?.(this)
-
- return this.__parent
+ get lumeParent(): TreeNode | null {
+ if (this.parentElement instanceof TreeNode) return this.parentElement
+ return null
}
/**
- * @property {TreeNode[]} subnodes - An array of this TreeNode's
- * children. This returns a clone of the internal child array, so
- * modifying the cloned array directly does not effect the state of the
- * TreeNode. Use [TreeNode.add(child)](#addchild) and
- * [TreeNode.removeNode(child)](#removenode) to modify a TreeNode's
- * list of children.
- * This is named `subnodes` to avoid conflict with HTML's `Element.children` property.
* @readonly
+ * @property {TreeNode[]} lumeChildren - An array of this element's
+ * LUME-specific children. This returns a new static array each time, so
+ * and modifying this array directly does not effect the state of the
+ * TreeNode. Use [TreeNode.append(child)](#append) and
+ * [TreeNode.removeChild(child)](#removechild) to modify a TreeNode's
+ * actual children.
*/
- get subnodes() {
- // return a new array, so that the user modifying it doesn't affect
- // this node's actual children.
- return [...this.__children]
- }
-
- __isConnected = false
-
- /** @readonly */
- get isConnected(): boolean {
- if (this instanceof Element) {
- // TODO Report this to TypeScript
- // @ts-ignore TS doesn't know that super.isConnected would work here.
- return super.isConnected
- }
-
- // @ts-ignore
- return this.__isConnected
- }
-
- /**
- * @method add - Add a child node to this TreeNode.
- * @param {TreeNode} childNode - The child node to add.
- * @returns {this}
- */
- add(childNode: TreeNode): this {
- // @prod-prune
- if (!(childNode instanceof TreeNode))
- throw new TypeError('TreeNode.add() expects the childNode argument to be a TreeNode instance.')
-
- if (childNode.__parent === this) return this
-
- if (childNode.__parent) childNode.__parent.removeNode(childNode)
-
- childNode.__parent = this
-
- if (!this.__children) this.__children = []
- this.__children.push(childNode)
-
- childNode.__isConnected = true
-
- // TODO avoid deferring. We may need this now that we switched from
- // WithUpdate to reactive props.
- defer(() => {
- childNode.connected()
- this.childConnected(childNode)
- })
-
- return this
- }
-
- /**
- * @method addChildren - Add all the child nodes in the given array to this node.
- * @param {Array} nodes - The nodes to add.
- * @returns {this}
- */
- addChildren(nodes: TreeNode[]) {
- nodes.forEach(node => this.add(node))
- return this
- }
-
- /**
- * @method removeNode - Remove a child node from this node.
- * @param {TreeNode} childNode - The node to remove.
- * @returns {this}
- */
- removeNode(childNode: TreeNode): this {
- if (!(childNode instanceof TreeNode)) {
- throw new Error(`
- TreeNode.remove expects the childNode argument to be an
- instance of TreeNode. There should only be TreeNodes in the
- tree.
- `)
- }
-
- if (childNode.__parent !== this) throw new ReferenceError('childNode is not a child of this parent.')
-
- childNode.__parent = null
- this.__children.splice(this.__children.indexOf(childNode), 1)
-
- childNode.__isConnected = false
-
- // TODO avoid deferring. We may need this now that we switched from
- // WithUpdate to reactive props.
- defer(() => {
- childNode.disconnected()
- this.childDisconnected(childNode)
- })
-
- return this
- }
-
- /**
- * @method removeChildren - Remove all the child nodes in the given array from this node.
- * @param {Array} nodes - The nodes to remove.
- * @returns {this}
- */
- removeChildren(nodes: TreeNode[]) {
- for (let i = nodes.length - 1; i >= 0; i -= 1) {
- this.removeNode(nodes[i])
- }
- return this
- }
-
- /**
- * @method removeAllChildren - Remove all children.
- * @returns {this}
- */
- removeAllChildren() {
- if (!this.__children.length) throw new ReferenceError('This node has no children.')
- this.removeChildren(this.__children)
- return this
+ get lumeChildren(): TreeNode[] {
+ return Array.prototype.filter.call(this.children, c => c instanceof TreeNode) as TreeNode[]
}
/**
* @readonly
- * @property {number} childCount - How many children this TreeNode has.
+ * @property {number} lumeChildCount - The number of children this TreeNode has.
*/
- get childCount() {
- return this.__children.length
- }
-
- // generic life cycle methods
- connected() {}
- disconnected() {}
- childConnected(_child: TreeNode) {}
- childDisconnected(_child: TreeNode) {}
-
- /**
- * @method traverse - Traverse this node and it's tree of subnodes in pre-order.
- * @param {(n: TreeNode) => void} fn - A callback called on each node,
- * receiving as first arg the current node in the traversal.
- */
- traverse(fn: (n: TreeNode) => void) {
- fn(this)
-
- const children = this.__children
- for (let i = 0, l = children.length; i < l; i++) {
- children[i].traverse(fn)
- }
+ get lumeChildCount(): number {
+ return this.lumeChildren.length
}
}
diff --git a/packages/lume/src/layouts/AutoLayoutNode.ts b/packages/lume/src/layouts/AutoLayoutNode.ts
index f53bf16a0..4900a5069 100644
--- a/packages/lume/src/layouts/AutoLayoutNode.ts
+++ b/packages/lume/src/layouts/AutoLayoutNode.ts
@@ -95,15 +95,23 @@ export class AutoLayoutNode extends Node {
#autoLayoutView?: any | undefined
- childConnected(child: Node) {
- super.childConnected(child)
+ childConnectedCallback(child: Node) {
+ // @prod-prune
+ if (!(child instanceof Node))
+ throw new Error('Child elements of AutoLayoutNode must be instances of LUME.Node.')
+
+ super.childConnectedCallback(child)
if (!this.#autoLayoutView) return
this.#checkNodes()
}
- childDisconnected(child: Node) {
- super.childDisconnected(child)
+ childDisconnectedCallback(child: Node) {
+ // @prod-prune
+ if (!(child instanceof Node))
+ throw new Error('Child elements of AutoLayoutNode must be instances of LUME.Node.')
+
+ super.childDisconnectedCallback(child)
if (!this.#autoLayoutView) return
const _idToNode = this.#idToNode
@@ -175,7 +183,7 @@ export class AutoLayoutNode extends Node {
*/
addToLayout(child: Node, id: string) {
// PORTED
- this.add(child) // PORTED
+ this.append(child) // PORTED
// TODO instead of handling nodes here, we should handle them in
// childComposedCallback, to support ShadowDOM.
if (id) this.#idToNode[id] = child
@@ -193,7 +201,7 @@ export class AutoLayoutNode extends Node {
removeFromLayout(child: Node, id: string) {
// PORTED
if (child && id) {
- this.removeNode(child) // PORTED
+ this.removeChild(child) // PORTED
delete this.#idToNode[id]
} else if (child) {
for (id in this.#idToNode) {
@@ -202,9 +210,9 @@ export class AutoLayoutNode extends Node {
break
}
}
- this.removeNode(child) // PORTED
+ this.removeChild(child) // PORTED
} else if (id) {
- this.removeNode(this.#idToNode[id]) // PORTED
+ this.removeChild(this.#idToNode[id]) // PORTED
delete this.#idToNode[id]
}
this.reflowLayout()
diff --git a/packages/lume/src/layouts/Cube.ts b/packages/lume/src/layouts/Cube.ts
index 3a26d1916..9f0ce8059 100644
--- a/packages/lume/src/layouts/Cube.ts
+++ b/packages/lume/src/layouts/Cube.ts
@@ -56,7 +56,7 @@ export class CubeLayout extends Node {
this.sides.push(side)
- rotator.add(side)
+ rotator.append(side)
// TODO: make a new GenericSync-like thing based on Famous?
//const sync = new GenericSync(['mouse','touch']);
@@ -72,7 +72,7 @@ export class CubeLayout extends Node {
side.getPosition().z = this.getSize().x / 2
- this.add(rotator)
+ this.append(rotator)
}
/**
@@ -85,7 +85,7 @@ export class CubeLayout extends Node {
setContent(content: Node[]) {
for (let index = 0; index < 6; index += 1) {
//this.cubeSideNodes[index].set(null); // TODO: how do we erase previous content?
- this.sides[index].add(content[index])
+ this.sides[index].append(content[index])
}
return this
}