@vyr/engine 0.0.32 → 0.0.34

package/src/actor/AnimationUnitActor.ts

@@ -1,13 +1,13 @@
 import { Euler, Quaternion, Vector2, Vector3 } from "../math"
-import { AnimationUnitDescriptor, Descriptor } from "../descriptor"
+import { AnimationUnit, Descriptor } from "../descriptor"
 import { AnimationUnitInterpreter } from "../interpreter"
 import { Graphics, TickArgs } from "../graphics"
 import { ObjectUtils } from '../ObjectUtils'
 import { Color } from '../Color'
 import { Actor } from "./Actor"
 
-abstract class AnimationUnitActor extends Actor {
-    static parse(descriptor: AnimationUnitDescriptor) {
+export abstract class AnimationUnitActor extends Actor {
+    static parse(descriptor: AnimationUnit) {
         switch (descriptor.frameData.type) {
             case 'number':
                 return new NumberAnimationUnitargetActor(descriptor, descriptor.frameData.startValue, descriptor.frameData.endValue)
@@ -28,22 +28,20 @@ abstract class AnimationUnitActor extends Actor {
     startTime: number
     duration: number
     mode: number
-    path: string
-    keys: string[]
+    propertyPath: string
     count: number
     uptime: number
     unlisten!: () => void
     target!: Descriptor
     rawValue!: any
 
-    constructor(descriptor: AnimationUnitDescriptor) {
+    constructor(descriptor: AnimationUnit) {
         super()
         this.play = descriptor.play
         this.startTime = descriptor.startTime
         this.duration = descriptor.duration
         this.mode = descriptor.mode
-        this.path = descriptor.path
-        this.keys = ObjectUtils.parseKey(descriptor.path)
+        this.propertyPath = descriptor.propertyPath
         this.count = descriptor.count
         this.uptime = 0
     }
@@ -59,10 +57,10 @@ abstract class AnimationUnitActor extends Actor {
     setTarget(descriptor: Descriptor) {
         this.target = descriptor
         let rawValue = descriptor as any
-        for (const key of this.keys) {
-            rawValue = rawValue[key]
-            if (rawValue === undefined) return
-        }
+        ObjectUtils.nextByPropertyPath(descriptor, this.propertyPath, (property, key) => {
+            rawValue = property[key]
+        })
+        if (rawValue === undefined) return
         this.rawValue = Descriptor.deepClone(rawValue)
     }
 
@@ -76,19 +74,10 @@ abstract class AnimationUnitActor extends Actor {
     abstract setValue(radio: number): void
 
     traverseWithTailCallback(set: (target: any, key: string) => void) {
-        let target: { [k: string]: any } = this.target
-        const count = this.keys.length - 1
-        for (let i = 0; i <= count; i++) {
-            if (i === count) {
-                const key = this.keys[i]
-                if (target[key] === undefined) return
-                set(target, key)
-                this.target.setNeedsUpdate()
-            } else {
-                target = target[this.keys[i]]
-                if (!target) return
-            }
-        }
+        ObjectUtils.nextByPropertyPath(this.target, this.propertyPath, (property, key) => {
+            set(property, key)
+            this.target.setNeedsUpdate()
+        })
     }
 
     update = (args: TickArgs) => {
@@ -137,7 +126,7 @@ class NumberAnimationUnitargetActor extends AnimationUnitActor {
     startValue
     distance
 
-    constructor(descriptor: AnimationUnitDescriptor, startValue: number, endValue: number) {
+    constructor(descriptor: AnimationUnit, startValue: number, endValue: number) {
         super(descriptor)
         this.startValue = startValue
         this.distance = endValue - startValue
@@ -161,7 +150,7 @@ class Vector2AnimationUnitargetActor extends AnimationUnitActor {
     }
     startValue: Vector2
     endValue: Vector2
-    constructor(descriptor: AnimationUnitDescriptor, startValue: Vector2, endValue: Vector2) {
+    constructor(descriptor: AnimationUnit, startValue: Vector2, endValue: Vector2) {
         super(descriptor)
         this.startValue = startValue
         this.endValue = endValue
@@ -186,7 +175,7 @@ class Vector3AnimationUnitargetActor extends AnimationUnitActor {
     }
     declare startValue: Vector3
     declare endValue: Vector3
-    constructor(descriptor: AnimationUnitDescriptor, startValue: Vector3, endValue: Vector3) {
+    constructor(descriptor: AnimationUnit, startValue: Vector3, endValue: Vector3) {
         super(descriptor)
         this.startValue = startValue
         this.endValue = endValue
@@ -225,7 +214,7 @@ class EulerAnimationUnitargetActor extends AnimationUnitActor {
     }
     declare startValue: Euler
     declare endValue: Euler
-    constructor(descriptor: AnimationUnitDescriptor, startValue: Euler, endValue: Euler) {
+    constructor(descriptor: AnimationUnit, startValue: Euler, endValue: Euler) {
         super(descriptor)
         this.startValue = startValue
         this.endValue = endValue
@@ -245,9 +234,9 @@ class EulerAnimationUnitargetActor extends AnimationUnitActor {
 }
 
 class BooleanAnimationUnitargetActor extends AnimationUnitActor {
-    declare startValue: number
-    declare endValue: number
-    constructor(descriptor: AnimationUnitDescriptor, startValue: number, endValue: number) {
+    declare startValue: boolean
+    declare endValue: boolean
+    constructor(descriptor: AnimationUnit, startValue: boolean, endValue: boolean) {
         super(descriptor)
         this.startValue = startValue
         this.endValue = endValue
@@ -271,7 +260,7 @@ class BooleanAnimationUnitargetActor extends AnimationUnitActor {
 class ColorAnimationUnitargetActor extends AnimationUnitActor {
     declare startValue: Color
     declare endValue: Color
-    constructor(descriptor: AnimationUnitDescriptor, startValue: Color, endValue: Color) {
+    constructor(descriptor: AnimationUnit, startValue: Color, endValue: Color) {
         super(descriptor)
         this.startValue = startValue
         this.endValue = endValue
@@ -284,6 +273,3 @@ class ColorAnimationUnitargetActor extends AnimationUnitActor {
     }
 }
 
-export {
-    AnimationUnitActor
-}

package/src/actor/DivActor.ts

@@ -1,33 +1,21 @@
-import { DivDescriptor, StyleDescriptor } from "../descriptor"
+import { createHTMLDOM } from "../utils"
+import { Div } from "../descriptor"
 import { Actor } from "./Actor"
-import { HTMLActor } from "./HTMActor"
+import { HTMLActor } from "./HTMLActor"
 
-class DivActor extends HTMLActor {
-    private _text: Text | null = null
-    get text() {
-        if (this._text === null) {
-            this._text = document.createTextNode('')
-        }
-        return this._text
-    }
+export class DivActor extends HTMLActor {
     private _wrapper: HTMLElement | null = null
-    readonly DOM
 
     constructor(uuid: string) {
         super(uuid)
-        this.DOM = this.createDOM()
-        const wrapper = this.getWrapper()
-        wrapper.appendChild(this.DOM)
     }
 
     protected createWrapper() {
-        const wrapper = document.createElement('div')
-        wrapper.setAttribute('class', HTMLActor.className)
-        wrapper.setAttribute(HTMLActor.uuidKey, this.uuid)
-        return wrapper
+        const DOM = createHTMLDOM(this.uuid)
+        return DOM
     }
 
-    getWrapper() {
+    getDOM() {
         if (this._wrapper === null) {
             this._wrapper = this.createWrapper()
         }
@@ -37,34 +25,26 @@ class DivActor extends HTMLActor {
 
     add(actor: Actor) {
         if (actor instanceof HTMLActor) {
-            const wrapper = actor.getWrapper()
-            if (wrapper === null) return
-            if (this.DOM.contains(wrapper)) return
-            this.DOM.appendChild(wrapper)
+            const child = actor.getDOM()
+            if (child === null) return
+            const DOM = this.getDOM()
+            if (DOM.contains(child)) return
+            DOM.appendChild(child)
         }
     }
 
     remove(actor: Actor) {
         if (actor instanceof HTMLActor) {
-            const wrapper = actor.getWrapper()
-            if (wrapper === null) return
-            if (this.DOM.contains(wrapper)) this.DOM.removeChild(wrapper)
+            const child = actor.getDOM()
+            if (child === null) return
+            const DOM = this.getDOM()
+            if (DOM.contains(child)) DOM.removeChild(child)
         }
     }
 
-    update(descriptor: DivDescriptor) {
-        const wrapper = this.getWrapper()
-        const style = this.getWrapperStyle(descriptor)
-        this.setHTMLStyle(wrapper, style)
-        this.setHTMLInteraction(wrapper, descriptor)
-        this.setHTMLStyle(this.DOM, this.getLayoutStyle(descriptor))
-        const styleClass = [...this.getStyleClass(descriptor)]
-        if (descriptor.active) styleClass.push(StyleDescriptor.activeName)
-        this.setStyleClass(this.DOM, styleClass)
-        this.DOM.style.backgroundImage = descriptor.backroundIamge ? `url(${descriptor.backroundIamge})` : ''
-        this.text.textContent = descriptor.text
-        if (this.DOM.contains(this.text) === false) this.DOM.appendChild(this.text)
+    update(descriptor: Div) {
+        const DOM = this.getDOM()
+        this.setHtmlAttributes(DOM, descriptor)
+        this.setHTMLInteraction(DOM, descriptor)
     }
-}
-
-export { DivActor }
+}

package/src/actor/FragmentActor.ts

@@ -2,7 +2,7 @@ import { Descriptor } from "../descriptor";
 import { ArrayUtils } from "../ArrayUtils";
 import { Actor } from "./Actor";
 
-class FragmentActor extends Actor {
+export class FragmentActor extends Actor {
     private _parent = ''
     collection: Actor[] = []
 
@@ -49,8 +49,4 @@ class FragmentActor extends Actor {
         }
         ArrayUtils.remove(this.collection, actor)
     }
-}
-
-export {
-    FragmentActor
 }

package/src/actor/HTMLActor.ts

@@ -0,0 +1,81 @@
+import camelcaseKeys from 'camelcase-keys'
+import { HtmlAttributes, HTMLStyle } from '../schema'
+import { Descriptor, Interaction, HTML } from "../descriptor"
+import { Asset } from "../asset"
+import { Actor } from "./Actor"
+
+export abstract class HTMLActor extends Actor {
+    static className = 'vyr-html'
+    static uuidKey = 'data-vyr-uuid'
+    static isTrigger(target: any, uuid: string): target is HTMLElement {
+        return target.getAttribute(HTMLActor.uuidKey) === uuid
+    }
+    private classNames: string[] = []
+    readonly uuid
+    readonly unlisteners: Array<() => void> = []
+
+    constructor(uuid: string) {
+        super()
+        this.uuid = uuid
+    }
+
+    setClassNames(DOM: HTMLElement, classNames: string[]) {
+        this.cleanClassNames(DOM)
+        this.classNames.push(...classNames)
+        DOM.classList.add(...classNames)
+    }
+
+    cleanClassNames(DOM: HTMLElement) {
+        if (this.classNames.length === 0) return
+        DOM.classList.remove(...this.classNames)
+        this.classNames.length = 0
+    }
+
+    setHtmlAttributes(DOM: HTMLElement, descriptor: HTML) {
+        const keys = Object.keys(descriptor.htmlAttributes) as Array<keyof HtmlAttributes>
+        for (const key of keys) {
+            const value = descriptor.htmlAttributes[key]
+            if (key === 'style') {
+                DOM.style.cssText = ''
+                const style = camelcaseKeys(value as HTMLStyle) as any
+                if (descriptor.visible === false) style.display = 'none'
+                Object.assign(DOM.style, style)
+            } else if (key === 'classNames') {
+                this.setClassNames(DOM, descriptor.htmlAttributes.classNames)
+            } else {
+                const valueString = value?.toString() ?? ''
+                DOM.setAttribute(key, valueString)
+            }
+
+        }
+    }
+
+    cleanInteraction() {
+        for (const unlistener of this.unlisteners) unlistener()
+        this.unlisteners.length = 0
+    }
+
+    setHTMLInteraction(DOM: HTMLElement, descriptor: Descriptor) {
+        this.cleanInteraction()
+        const graphics = HTMLActor.getGraphics(this)
+        for (const interactionConfig of descriptor.interactions) {
+            if (interactionConfig.url) {
+                const interaction = Asset.get<Interaction>(interactionConfig.url)
+
+                const listener = (e: Event) => {
+                    interaction.execute(interactionConfig.nodes, graphics, descriptor.uuid)
+                }
+                const eid = graphics.engine.inputSystem.listen(interactionConfig.type as any, listener, { target: DOM })
+                this.unlisteners.push(() => graphics.engine.inputSystem.unlisten(eid))
+            }
+        }
+    }
+
+    abstract add(actor: Actor): void
+
+    abstract remove(actor: Actor): void
+
+    abstract getDOM(): HTMLElement | null
+
+    abstract update(descriptor: HTML): void
+}

package/src/actor/HTMLServiceActor.ts

@@ -0,0 +1,49 @@
+import { createHTMLDOM } from "../utils"
+import { HTMLService } from "../descriptor"
+import { Actor } from "./Actor"
+import { HTMLActor } from "./HTMLActor"
+
+export class HTMLServiceActor extends HTMLActor {
+    private _wrapper: HTMLElement | null = null
+
+    constructor(uuid: string) {
+        super(uuid)
+    }
+
+    protected createWrapper() {
+        const DOM = createHTMLDOM(this.uuid)
+        return DOM
+    }
+
+    getDOM() {
+        if (this._wrapper === null) {
+            this._wrapper = this.createWrapper()
+        }
+
+        return this._wrapper
+    }
+
+    add(actor: Actor) {
+        if (actor instanceof HTMLActor) {
+            const child = actor.getDOM()
+            if (child === null) return
+            const DOM = this.getDOM()
+            if (DOM.contains(child)) return
+            DOM.appendChild(child)
+        }
+    }
+
+    remove(actor: Actor) {
+        if (actor instanceof HTMLActor) {
+            const child = actor.getDOM()
+            if (child === null) return
+            const DOM = this.getDOM()
+            if (DOM.contains(child)) DOM.removeChild(child)
+        }
+    }
+
+    update(descriptor: HTMLService) {
+        const DOM = this.getDOM()
+        this.setHtmlAttributes(DOM, descriptor)
+    }
+}