@vyr/cli 0.0.11 → 0.0.13

package/output/engine/src/actor/AnimationUnitActor.ts

@@ -0,0 +1,289 @@
+import { Euler, Quaternion, Vector2, Vector3 } from "../math"
+import { AnimationUnitDescriptor, 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) {
+        switch (descriptor.frameData.type) {
+            case 'number':
+                return new NumberAnimationUnitargetActor(descriptor, descriptor.frameData.startValue, descriptor.frameData.endValue)
+            case 'vector2':
+                return new Vector2AnimationUnitargetActor(descriptor, new Vector2(...descriptor.frameData.startValue), new Vector2(...descriptor.frameData.endValue))
+            case 'vector3':
+                return new Vector3AnimationUnitargetActor(descriptor, new Vector3(...descriptor.frameData.startValue), new Vector3(...descriptor.frameData.endValue))
+            case 'euler':
+                return new EulerAnimationUnitargetActor(descriptor, new Euler(...descriptor.frameData.startValue), new Euler(...descriptor.frameData.endValue))
+            case 'boolean':
+                return new BooleanAnimationUnitargetActor(descriptor, descriptor.frameData.startValue, descriptor.frameData.endValue)
+            case 'color':
+                return new ColorAnimationUnitargetActor(descriptor, new Color(descriptor.frameData.startValue), new Color(descriptor.frameData.endValue))
+        }
+    }
+
+    play: boolean
+    startTime: number
+    duration: number
+    mode: number
+    path: string
+    keys: string[]
+    count: number
+    uptime: number
+    unlisten!: () => void
+    target!: Descriptor
+    rawValue!: any
+
+    constructor(descriptor: AnimationUnitDescriptor) {
+        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.count = descriptor.count
+        this.uptime = 0
+    }
+
+    listen(graphics: Graphics) {
+        graphics.engine.listen('afterRender', this.update)
+        this.unlisten = () => {
+            graphics.engine.unlisten('afterRender', this.update)
+            this.reset()
+        }
+    }
+
+    setTarget(descriptor: Descriptor) {
+        this.target = descriptor
+        let rawValue = descriptor as any
+        for (const key of this.keys) {
+            rawValue = rawValue[key]
+            if (rawValue === undefined) return
+        }
+        this.rawValue = Descriptor.deepClone(rawValue)
+    }
+
+    getRadio(radio: number, count: number) {
+        if (this.mode === 2) {
+            radio = (count % 2 === 1) ? 1 - radio : radio
+        }
+        return radio
+    }
+
+    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
+            }
+        }
+    }
+
+    update = (args: TickArgs) => {
+        if (AnimationUnitInterpreter.enabled === false) return
+        if (this.play === false) return
+        const uptime = this.uptime + args.delta
+
+        const count = (this.uptime - this.startTime) / this.duration
+        if (count > this.count) {
+            this.uptime = uptime
+            return
+        }
+
+        const currentTime = uptime - this.startTime
+        if (currentTime < 0) {
+            this.uptime = uptime
+            return
+        }
+
+        const currentCount = currentTime / this.duration
+
+        let radio
+        if (currentCount > this.count) {
+            if (this.mode === 2) {
+                radio = this.count % 2 === 1 ? 1 : 0
+            } else {
+                radio = 1
+            }
+        } else {
+            radio = this.getRadio(currentCount % 1, Math.floor(currentCount))
+        }
+        this.setValue(radio)
+        this.uptime = uptime
+    }
+
+    reset(time = 0) {
+        this.uptime = 0
+        this.traverseWithTailCallback((target, key) => {
+            target[key] = Descriptor.deepClone(this.rawValue)
+        })
+        this.update({ delta: time })
+    }
+}
+
+class NumberAnimationUnitargetActor extends AnimationUnitActor {
+    startValue
+    distance
+
+    constructor(descriptor: AnimationUnitDescriptor, startValue: number, endValue: number) {
+        super(descriptor)
+        this.startValue = startValue
+        this.distance = endValue - startValue
+    }
+
+    setValue(radio: number) {
+        const value = this.startValue + this.distance * radio
+        this.traverseWithTailCallback((target, key) => {
+            target[key] = value
+        })
+    }
+}
+
+let _vector2: Vector2 | null = null
+class Vector2AnimationUnitargetActor extends AnimationUnitActor {
+    static get vector() {
+        if (_vector2 === null) {
+            _vector2 = new Vector2()
+        }
+        return _vector2
+    }
+    startValue: Vector2
+    endValue: Vector2
+    constructor(descriptor: AnimationUnitDescriptor, startValue: Vector2, endValue: Vector2) {
+        super(descriptor)
+        this.startValue = startValue
+        this.endValue = endValue
+    }
+
+    setValue(radio: number) {
+        this.traverseWithTailCallback((target, key) => {
+            Vector2AnimationUnitargetActor.vector.lerpVectors(this.startValue, this.endValue, radio)
+            target[key].x = Vector2AnimationUnitargetActor.vector.x
+            target[key].y = Vector2AnimationUnitargetActor.vector.y
+        })
+    }
+}
+
+let _vector3: Vector3 | null = null
+class Vector3AnimationUnitargetActor extends AnimationUnitActor {
+    static get vector() {
+        if (_vector3 === null) {
+            _vector3 = new Vector3()
+        }
+        return _vector3
+    }
+    declare startValue: Vector3
+    declare endValue: Vector3
+    constructor(descriptor: AnimationUnitDescriptor, startValue: Vector3, endValue: Vector3) {
+        super(descriptor)
+        this.startValue = startValue
+        this.endValue = endValue
+    }
+    setValue(radio: number) {
+        this.traverseWithTailCallback((target, key) => {
+            Vector3AnimationUnitargetActor.vector.lerpVectors(this.startValue, this.endValue, radio)
+            target[key].x = Vector3AnimationUnitargetActor.vector.x
+            target[key].y = Vector3AnimationUnitargetActor.vector.y
+            target[key].z = Vector3AnimationUnitargetActor.vector.z
+        })
+    }
+}
+
+let _euler: Euler | null = null
+let _startQuat: Quaternion | null = null
+let _endQuat: Quaternion | null = null
+class EulerAnimationUnitargetActor extends AnimationUnitActor {
+    static get euler() {
+        if (_euler === null) {
+            _euler = new Euler()
+        }
+        return _euler
+    }
+    static get startQuat() {
+        if (_startQuat === null) {
+            _startQuat = new Quaternion()
+        }
+        return _startQuat
+    }
+    static get endQuat() {
+        if (_endQuat === null) {
+            _endQuat = new Quaternion()
+        }
+        return _endQuat
+    }
+    declare startValue: Euler
+    declare endValue: Euler
+    constructor(descriptor: AnimationUnitDescriptor, startValue: Euler, endValue: Euler) {
+        super(descriptor)
+        this.startValue = startValue
+        this.endValue = endValue
+    }
+    setValue(radio: number) {
+        this.traverseWithTailCallback((target, key) => {
+            EulerAnimationUnitargetActor.startQuat.setFromEuler(this.startValue)
+            EulerAnimationUnitargetActor.endQuat.setFromEuler(this.endValue)
+            EulerAnimationUnitargetActor.startQuat.slerp(EulerAnimationUnitargetActor.endQuat, radio)
+            EulerAnimationUnitargetActor.euler.setFromQuaternion(EulerAnimationUnitargetActor.startQuat)
+            target[key].x = EulerAnimationUnitargetActor.euler.x
+            target[key].y = EulerAnimationUnitargetActor.euler.y
+            target[key].y = EulerAnimationUnitargetActor.euler.y
+            target[key].order = EulerAnimationUnitargetActor.euler.order
+        })
+    }
+}
+
+class BooleanAnimationUnitargetActor extends AnimationUnitActor {
+    declare startValue: number
+    declare endValue: number
+    constructor(descriptor: AnimationUnitDescriptor, startValue: number, endValue: number) {
+        super(descriptor)
+        this.startValue = startValue
+        this.endValue = endValue
+    }
+    setValue(radio: number) {
+        switch (radio) {
+            case 0:
+                this.traverseWithTailCallback((target, key) => {
+                    target[key] = this.startValue
+                })
+                break
+            case 1:
+                this.traverseWithTailCallback((target, key) => {
+                    target[key] = this.endValue
+                })
+                break
+        }
+    }
+}
+
+class ColorAnimationUnitargetActor extends AnimationUnitActor {
+    declare startValue: Color
+    declare endValue: Color
+    constructor(descriptor: AnimationUnitDescriptor, startValue: Color, endValue: Color) {
+        super(descriptor)
+        this.startValue = startValue
+        this.endValue = endValue
+    }
+    setValue(radio: number) {
+        this.traverseWithTailCallback((target, key) => {
+            const currentValue = Color.mix(this.startValue, this.endValue, radio)
+            target[key] = currentValue.toHexString()
+        })
+    }
+}
+
+export {
+    AnimationUnitActor
+}

package/output/engine/src/actor/DivActor.ts

@@ -0,0 +1,70 @@
+import { DivDescriptor, StyleDescriptor } from "../descriptor"
+import { Actor } from "./Actor"
+import { HTMLActor } from "./HTMActor"
+
+class DivActor extends HTMLActor {
+    private _text: Text | null = null
+    get text() {
+        if (this._text === null) {
+            this._text = document.createTextNode('')
+        }
+        return this._text
+    }
+    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
+    }
+
+    getWrapper() {
+        if (this._wrapper === null) {
+            this._wrapper = this.createWrapper()
+        }
+
+        return this._wrapper
+    }
+
+    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)
+        }
+    }
+
+    remove(actor: Actor) {
+        if (actor instanceof HTMLActor) {
+            const wrapper = actor.getWrapper()
+            if (wrapper === null) return
+            if (this.DOM.contains(wrapper)) this.DOM.removeChild(wrapper)
+        }
+    }
+
+    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)
+    }
+}
+
+export { DivActor }

package/output/engine/src/actor/FragmentActor.ts

@@ -0,0 +1,56 @@
+import { Descriptor } from "../descriptor";
+import { ArrayUtils } from "../ArrayUtils";
+import { Actor } from "./Actor";
+
+class FragmentActor extends Actor {
+    private _parent = ''
+    collection: Actor[] = []
+
+    bind(parent: string) {
+        this._parent = parent
+    }
+
+    unbind() {
+        if (this._parent === '') return
+        const graphics = Actor.getGraphics(this)
+        const parent = Descriptor.get(this._parent)
+        if (parent instanceof Descriptor) {
+            const parentActor = graphics.getActor(parent)
+            if (parentActor !== null) {
+                for (const actor of this.collection) parentActor.remove(actor)
+            }
+        }
+        this.collection.length = 0
+        this._parent = ''
+    }
+
+    add(actor: Actor) {
+        if (actor instanceof FragmentActor) return
+
+        const graphics = Actor.getGraphics(this)
+        const parent = Descriptor.get<Descriptor>(this._parent)
+
+        if (parent instanceof Descriptor) {
+            const parentActor = graphics.getActor(parent)
+            if (parentActor !== null) parentActor.add(actor)
+        }
+
+        ArrayUtils.insert(this.collection, actor)
+    }
+
+    remove(actor: Actor) {
+        if (actor instanceof FragmentActor) return
+
+        const graphics = Actor.getGraphics(this)
+        const parent = Descriptor.get<Descriptor>(this._parent)
+        if (parent instanceof Descriptor) {
+            const parentActor = graphics.getActor(parent)
+            if (parentActor !== null) parentActor.remove(actor)
+        }
+        ArrayUtils.remove(this.collection, actor)
+    }
+}
+
+export {
+    FragmentActor
+}

package/output/engine/src/actor/HTMActor.ts

@@ -0,0 +1,169 @@
+import { InteractionDescriptor, InteractionProperty } from "../interaction";
+import { Asset } from "../asset"
+import { Descriptor, HTMLDescriptor, HTMLStyle, StyleDescriptor } from "../descriptor"
+import { Graphics } from "../graphics";
+import { Actor } from "./Actor"
+import { StyleActor } from "./StyleActor"
+
+abstract class HTMLActor extends Actor {
+    static className = 'vyr-html-wrapper'
+    static uuidKey = 'data-vyr-uuid'
+    static isTrigger(target: any, uuid: string): target is HTMLElement {
+        return target.getAttribute(HTMLActor.uuidKey) === uuid
+    }
+    readonly uuid
+    readonly unlisteners: Array<() => void> = []
+    className?: string[]
+
+    constructor(uuid: string) {
+        super()
+        this.uuid = uuid
+    }
+
+    createDOM() {
+        const DOM = document.createElement('div')
+        DOM.setAttribute(HTMLActor.uuidKey, this.uuid)
+        DOM.style.width = '100%'
+        DOM.style.height = '100%'
+        DOM.style.position = 'relative'
+        DOM.style.backgroundSize = '100% 100%'
+        DOM.style.backgroundRepeat = 'no-repeat'
+        DOM.style.backgroundPosition = '0% 0%'
+        return DOM
+    }
+
+    getWrapperStyle(descriptor: HTMLDescriptor) {
+        const style: HTMLStyle = {}
+        style.pointerEvents = 'auto'
+        style.flexGrow = descriptor.flexGrow + ''
+        if (descriptor.visible === false) {
+            style.display = 'none'
+        } else {
+            style.display = descriptor.display
+        }
+
+        const width = descriptor.width
+        if (width < 0) {
+            style.width = 'auto'
+        } else {
+            style.width = `calc(${width + descriptor.wUnit} + ${descriptor.calcWidth}px)`
+        }
+
+        const height = descriptor.height
+        if (height < 0) {
+            style.height = 'auto'
+        } else {
+            style.height = `calc(${height + descriptor.hUnit} + ${descriptor.calcHeight}px)`
+        }
+
+        style.position = descriptor.position
+        style.transform = ''
+        if (descriptor.translate.x !== 0) {
+            style.transform += `translateX(${descriptor.translate.x}%) `
+        }
+        if (descriptor.translate.y !== 0) {
+            style.transform += `translateY(${descriptor.translate.y}%) `
+        }
+
+        const xValue = descriptor.location.x + descriptor.xUnit
+        if (descriptor.xAxis === 'left') {
+            style.left = xValue
+            style.right = ''
+        } else {
+            style.right = xValue
+            style.left = ''
+        }
+        const yValue = descriptor.location.y + descriptor.yUnit
+        if (descriptor.yAxis === 'top') {
+            style.top = yValue
+            style.bottom = ''
+        } else {
+            style.bottom = yValue
+            style.top = ''
+        }
+
+        style.marginLeft = descriptor.margin.left + 'px'
+        style.marginTop = descriptor.margin.top + 'px'
+        style.marginRight = descriptor.margin.right + 'px'
+        style.marginBottom = descriptor.margin.bottom + 'px'
+
+        return style
+    }
+
+    getLayoutStyle(descriptor: HTMLDescriptor) {
+        const style: HTMLStyle = {}
+
+        style.display = descriptor.display
+        style.flexWrap = descriptor.flexWrap
+        style.flexDirection = descriptor.flexDirection
+        style.justifyContent = descriptor.justifyContent
+        style.alignItems = descriptor.alignItems
+        style.alignContent = descriptor.alignContent
+        style.opacity = descriptor.opacity + ''
+        style.zIndex = descriptor.zIndex
+
+        return style
+    }
+
+    setHTMLStyle(DOM: HTMLElement, style: HTMLStyle) {
+        Object.assign(DOM.style, style)
+    }
+
+    getStyleClass(descriptor: HTMLDescriptor) {
+        const styleDescriptor = Asset.get<StyleDescriptor>(descriptor.style)
+        if (styleDescriptor === null) return []
+        const graphics = Actor.getGraphics(this)
+        const styleActor = graphics.getInterpreter(styleDescriptor).getActor<StyleActor>(descriptor)
+        return styleActor.getClassName()
+    }
+
+    setStyleClass(DOM: HTMLElement, className: string[]) {
+        this.clearStyleClass(DOM)
+        this.className = className
+        DOM.classList.add(...className)
+    }
+
+    clearStyleClass(DOM: HTMLElement) {
+        if (this.className === undefined) return
+        DOM.classList.remove(...this.className)
+        delete this.className
+    }
+
+    bindInteraction(DOM: HTMLElement, property: InteractionProperty, trigger: Descriptor, graphics: Graphics,) {
+        const interaction = Asset.get<InteractionDescriptor>(property.url)
+
+        const listener = (e: Event) => {
+            if (HTMLActor.isTrigger(e.target, this.uuid)) {
+                e.stopPropagation()
+                interaction.execute(property.inputs, graphics, trigger)
+            }
+        }
+        const eid = graphics.engine.inputSystem.listen(property.type as any, listener, { target: DOM })
+        this.unlisteners.push(() => graphics.engine.inputSystem.unlisten(eid))
+    }
+
+    cleanInteraction() {
+        for (const unlistener of this.unlisteners) unlistener()
+        this.unlisteners.length = 0
+    }
+
+    setHTMLInteraction(DOM: HTMLElement, trigger: Descriptor) {
+        this.cleanInteraction()
+        const graphics = HTMLActor.getGraphics(this)
+        for (const interaction of trigger.interactions) {
+            if (interaction.url) this.bindInteraction(DOM, interaction, trigger, graphics)
+        }
+    }
+
+    abstract add(actor: Actor): void
+
+    abstract remove(actor: Actor): void
+
+    abstract getWrapper(): HTMLElement | null
+
+    abstract update(descriptor: HTMLDescriptor): void
+}
+
+export {
+    HTMLActor
+}

package/output/engine/src/actor/HTMServiceActor.ts

@@ -0,0 +1,57 @@
+import { HTMLServiceDescriptor, StyleDescriptor } from "../descriptor"
+import { Actor } from "./Actor"
+import { HTMLActor } from "./HTMActor"
+
+class HTMLServiceActor 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
+    }
+
+    getWrapper() {
+        if (this._wrapper === null) {
+            this._wrapper = this.createWrapper()
+        }
+
+        return this._wrapper
+    }
+
+    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)
+        }
+    }
+
+    remove(actor: Actor) {
+        if (actor instanceof HTMLActor) {
+            const wrapper = actor.getWrapper()
+            if (wrapper === null) return
+            if (this.DOM.contains(wrapper)) this.DOM.removeChild(wrapper)
+        }
+    }
+
+    update(descriptor: HTMLServiceDescriptor) {
+        const wrapper = this.getWrapper()
+        this.setHTMLStyle(wrapper, this.getWrapperStyle(descriptor))
+        const styleClass = [...this.getStyleClass(descriptor)]
+        if (descriptor.active) styleClass.push(StyleDescriptor.activeName)
+        this.setStyleClass(this.DOM, styleClass)
+    }
+}
+
+export { HTMLServiceActor }