@vyr/engine 0.0.1

package/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, { delta: 0 })
+            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, { delta: 0 })
+            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, { delta: 0 })
+            if (parentActor !== null) parentActor.remove(actor)
+        }
+        ArrayUtils.remove(this.collection, actor)
+    }
+}
+
+export {
+    FragmentActor
+}

package/src/actor/HTMActor.ts

@@ -0,0 +1,166 @@
+import { Asset } from "../asset"
+import { Descriptor, InteractionProperty, HTMLDescriptor, HTMLStyle, RoutineDescriptor, StyleDescriptor, UpdateArgs } from "../descriptor"
+import { RoutineInterpreter } from "../interpreter";
+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'
+    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, args: UpdateArgs) {
+        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, args: UpdateArgs) {
+        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, args: UpdateArgs) {
+        const styleDescriptor = Asset.get<StyleDescriptor>(descriptor.style)
+        if (styleDescriptor === null) return []
+        const graphics = Actor.getGraphics(this)
+        const styleActor = graphics.getInterpreter(styleDescriptor).getActor<StyleActor>(descriptor, args)
+        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, interaction: InteractionProperty, trigger: Descriptor, graphics: Graphics, args: UpdateArgs) {
+        const routine = Asset.get<RoutineDescriptor>(interaction.url)
+        const interpreter = graphics.getInterpreter<RoutineInterpreter>(routine)
+
+        const eventArgs = { ...args, trigger }
+        const listener = (e: Event) => {
+            e.stopPropagation()
+            interpreter.do(interaction.inputs, routine, eventArgs)
+        }
+        const eid = graphics.engine.inputSystem.listen(interaction.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, args: UpdateArgs) {
+        this.cleanInteraction()
+        const graphics = HTMLActor.getGraphics(this)
+        for (const interaction of trigger.interactions) {
+            if (interaction.url) this.bindInteraction(DOM, interaction, trigger, graphics, args)
+        }
+    }
+
+    abstract add(actor: Actor): void
+
+    abstract remove(actor: Actor): void
+
+    abstract getWrapper(): HTMLElement | null
+
+    abstract update(descriptor: HTMLDescriptor, args: UpdateArgs): void
+}
+
+export {
+    HTMLActor
+}

package/src/actor/HTMServiceActor.ts

@@ -0,0 +1,57 @@
+import { HTMLServiceDescriptor, StyleDescriptor, UpdateArgs } 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, args: UpdateArgs) {
+        const wrapper = this.getWrapper()
+        this.setHTMLStyle(wrapper, this.getWrapperStyle(descriptor, args))
+        const styleClass = [...this.getStyleClass(descriptor, args)]
+        if (descriptor.active) styleClass.push(StyleDescriptor.activeName)
+        this.setStyleClass(this.DOM, styleClass)
+    }
+}
+
+export { HTMLServiceActor }

package/src/actor/HTMTransformControllerActor.ts

@@ -0,0 +1,404 @@
+import { Vector2 } from "../math"
+import { Asset } from "../asset"
+import { Descriptor, HTMLDescriptor, HTMLTransformControllerChangeArgs, HTMLTransformControllerDescriptor, UpdateArgs } from "../descriptor"
+import { Scriptable } from "../Scriptable"
+import { Actor } from "./Actor"
+import { HTMLActor } from "./HTMActor"
+
+class HTMLTransformState {
+    isDragging = false
+    isResizing = false
+    offset = new Vector2()
+    resizeData = {
+        direction: "",
+        startWidth: 0,
+        startHeight: 0,
+        calcHeight: 0,
+        calcWidth: 0,
+        startX: 0,
+        startY: 0,
+    }
+    target = {
+        element: document.createElement('div') as HTMLElement,
+        parent: null as HTMLElement | null,
+        initialRect: new DOMRect(),
+    }
+}
+
+class HTMLTransformControllerActor extends Actor {
+    state = new HTMLTransformState()
+    offset = new Vector2()
+    events: number[] = []
+    element: HTMLElement
+    circles: HTMLElement[]
+    target!: HTMLDescriptor
+    descriptor!: HTMLTransformControllerDescriptor
+
+    constructor() {
+        super()
+        this.element = this.createElement()
+        this.circles = this.createCircle()
+        for (const circle of this.circles) this.element.appendChild(circle)
+        document.body.appendChild(this.element)
+    }
+
+    createElement() {
+        const element = document.createElement('div')
+        element.style.width = '100px'
+        element.style.height = '100px'
+        element.style.position = 'fixed'
+        element.style.top = '0px'
+        element.style.left = '0px'
+        element.style.zIndex = '2147483647'
+        element.style.userSelect = 'none'
+        element.addEventListener('contextmenu', e => {
+            e.stopPropagation()
+            e.preventDefault()
+            this.change('contextmenu')
+        })
+
+        const border = document.createElement('div')
+        border.style.position = 'absolute'
+        border.style.top = '50%'
+        border.style.left = '50%'
+        border.style.transform = 'translate(-50%,-50%)'
+        border.style.width = '100%'
+        border.style.height = '100%'
+        border.style.border = '6px double #1b8fdfcc'
+        border.style.boxSizing = 'content-box'
+        border.style.pointerEvents = 'none'
+        element.appendChild(border)
+        return element
+    }
+
+    createCircle() {
+        const circles = []
+        const positions = [[0, 0], [100, 0], [100, 100], [0, 100]]
+        for (let i = 0; i < positions.length; i++) {
+            const circle = document.createElement('div')
+            this.setCircleStyle(circle, i, positions[i])
+            circles.push(circle)
+        }
+        return circles
+    }
+
+    setCircleStyle(circle: HTMLElement, index: number, position: number[]) {
+        circle.classList.add('resize-handle', index.toString())
+        circle.style.borderRadius = '50%'
+        circle.style.width = '12px'
+        circle.style.height = '12px'
+        circle.style.position = 'absolute'
+        circle.style.left = position[0] + '%'
+        circle.style.top = position[1] + '%'
+        circle.style.transform = 'translate(-50%,-50%)'
+        circle.style.border = '2px double #1b8fdfcc'
+        circle.style.background = '#ffffff'
+        circle.style.boxShadow = '0 0 4px #1b8fdfcc'
+        circle.style.zIndex = '99999'
+        circle.style.cursor = [1, 3].includes(index) ? 'nesw-resize' : 'nwse-resize'
+    }
+
+    listen(descriptor: HTMLTransformControllerDescriptor, args: UpdateArgs) {
+        this.reset()
+        const graphics = Actor.getGraphics(this)
+        const target = graphics.variableProxy.get<Descriptor>(descriptor.target, graphics, args)
+        if (target instanceof HTMLDescriptor) {
+
+            const targetActor = graphics.getActor<HTMLActor>(target, args)
+            if (targetActor === null) return
+
+            const wrapper = targetActor.getWrapper()
+            if (wrapper === null) return
+
+            this.descriptor = descriptor
+            this.target = target
+
+            this.selectTargetElement(wrapper)
+
+            this.events.push(graphics.engine.inputSystem.listen('mousedown', this.handleDragStart, { target: this.element }))
+            for (const circle of this.circles) {
+                this.events.push(graphics.engine.inputSystem.listen('mousedown', this.handleResizeStart, { target: circle }))
+            }
+            this.events.push(graphics.engine.inputSystem.listen('mousemove', this.handleMouseMove, { target: document }))
+            this.events.push(graphics.engine.inputSystem.listen('mouseup', this.handleMouseEnd, { target: document }))
+        }
+    }
+
+    unlisten() {
+        this.reset()
+    }
+
+    update(descriptor: HTMLTransformControllerDescriptor, args: UpdateArgs) {
+        this.listen(descriptor, args)
+    }
+
+    change = (type = 'change') => {
+        const scriptable = Asset.get<Scriptable>(this.descriptor.event)
+        if (scriptable === null) return
+        const graphics = Actor.getGraphics(this)
+        const _args: HTMLTransformControllerChangeArgs = { delta: 0, event: { type, target: this.descriptor.target } }
+        scriptable.execute(this.descriptor, graphics, _args)
+    }
+
+    reset() {
+        const graphics = Actor.getGraphics(this)
+        for (const id of this.events) graphics.engine.inputSystem.unlisten(id)
+        this.events.length = 0
+        this.element.style.display = 'none'
+        this.state.target.element = document.createElement('div')
+        this.state.target.parent = null
+        //@ts-ignore
+        this.target = undefined
+    }
+
+    dispose() {
+        this.reset()
+        this.element.remove()
+    }
+
+    // 选中目标元素
+    selectTargetElement = (element: HTMLElement) => {
+        this.state.target.element = element;
+        this.state.target.parent = element.parentElement;
+        this.state.target.initialRect = element.getBoundingClientRect();
+
+        this.updateOffset(this.state.target.initialRect)
+        // 显示并更新拖拽元素
+        this.updateDraggableElement();
+        this.element.style.display = 'block';
+    }
+
+    updateOffset(rect: DOMRect = this.state.target.initialRect) {
+        this.offset.set(
+            rect.width * (this.target.translate.x / 100),
+            rect.height * (this.target.translate.y / 100)
+        )
+    }
+
+    // 更新拖拽元素以匹配目标
+    updateDraggableElement = () => {
+        if (!this.state.target.element) return;
+
+        const targetRect = this.state.target.element.getBoundingClientRect();
+
+        this.element.style.left = `${targetRect.left}px`;
+        this.element.style.top = `${targetRect.top}px`;
+        this.element.style.width = `${targetRect.width}px`;
+        this.element.style.height = `${targetRect.height}px`;
+    }
+
+    // 同步更新目标元素位置
+    syncTargetPosition = (resize = true) => {
+        if (!this.state.target.element) return;
+        if (!this.state.target.parent) return
+
+        const draggableRect = this.element.getBoundingClientRect();
+        const parentRect = this.state.target.parent.getBoundingClientRect();
+
+        // 设置尺寸
+        if (resize) {
+            this.setDimension('width', draggableRect.width - this.state.resizeData.calcWidth, parentRect.width, this.target.wUnit);
+            this.setDimension('height', draggableRect.height - this.state.resizeData.calcHeight, parentRect.height, this.target.hUnit);
+        }
+
+        // 设置位置
+        if (this.target.position === 'fixed') {
+            this.setFixedPosition(draggableRect)
+        } else {
+            this.setRelativePosition(draggableRect, parentRect);
+        }
+
+        this.target.setNeedsUpdate()
+    }
+
+    // 设置元素尺寸
+    setDimension = (prop: string, value: number, parentSize: number, unit: string) => {
+        //@ts-ignore
+        this.target[prop] = unit === '%' ? (value / parentSize) * 100 : value
+    }
+
+    // 设置固定定位
+    setFixedPosition = (rect: DOMRect) => {
+        if (this.target.xAxis === 'left') {
+            const leftPos = rect.left - this.offset.x
+            this.target.location.x = this.target.xUnit === '%' ? (leftPos / window.innerWidth) * 100
+                : leftPos
+        } else {
+            const rightPos = window.innerWidth - rect.right + this.offset.x
+            this.target.location.x = this.target.xUnit === '%'
+                ? (rightPos / window.innerWidth) * 100
+                : rightPos
+        }
+
+        if (this.target.yAxis === 'top') {
+            const topPos = rect.top - this.offset.y
+            this.target.location.y = this.target.yUnit === '%'
+                ? (topPos / window.innerHeight) * 100
+                : topPos
+        } else {
+            const bottomPos = window.innerHeight - rect.bottom + this.offset.y
+            this.target.location.y = this.target.yUnit === '%'
+                ? (bottomPos / window.innerHeight) * 100
+                : bottomPos
+        }
+    }
+
+    // 设置相对/绝对定位
+    setRelativePosition = (draggableRect: DOMRect, parentRect: DOMRect) => {
+        if (this.target.xAxis === 'left') {
+            const leftPos = draggableRect.left - parentRect.left - this.offset.x;
+            this.target.location.x = this.target.xUnit === '%'
+                ? (leftPos / parentRect.width) * 100
+                : leftPos
+        } else {
+            const rightPos = parentRect.right - draggableRect.right + this.offset.x;
+            this.target.location.x = this.target.xUnit === '%'
+                ? (rightPos / parentRect.width) * 100
+                : rightPos
+        }
+
+        if (this.target.yAxis === 'top') {
+            const topPos = draggableRect.top - parentRect.top - this.offset.y;
+            this.target.location.y = this.target.yUnit === '%'
+                ? (topPos / parentRect.height) * 100
+                : topPos
+        } else {
+            const bottomPos = parentRect.bottom - draggableRect.bottom + this.offset.y;
+            this.target.location.y = this.target.yUnit === '%'
+                ? (bottomPos / parentRect.height) * 100
+                : bottomPos
+        }
+    }
+
+    // 拖拽开始
+    handleDragStart = (e: MouseEvent) => {
+        if (this.descriptor.enabled === false) return
+        if (!this.state.target.element) return
+        if (this.target.position === 'static' || this.target.position === 'relative') return
+
+        if (e.target instanceof HTMLElement && e.target.classList.contains('resize-handle') === false) {
+
+            this.state.isDragging = true;
+
+            const rect = this.element.getBoundingClientRect();
+            this.state.offset = new Vector2(e.clientX - rect.left, e.clientY - rect.top)
+
+            // 清除目标元素的过渡效果，实现更流畅的拖拽
+            this.state.target.element.style.transition = 'none';
+
+            e.preventDefault();
+
+            this.change('mousedown')
+        }
+
+    }
+
+    // 调整大小开始
+    handleResizeStart = (e: MouseEvent) => {
+        if (this.descriptor.enabled === false) return
+        if (!this.state.target.element) return;
+        if (this.target.position === 'static' || this.target.position === 'relative') return
+        if (e.target instanceof HTMLElement) {
+
+            this.state.isResizing = true;
+            this.state.resizeData.direction = e.target.classList[1];
+
+            const rect = this.element.getBoundingClientRect();
+            this.state.resizeData.calcWidth = this.target.calcWidth
+            this.state.resizeData.calcHeight = this.target.calcHeight
+            this.state.resizeData.startWidth = rect.width;
+            this.state.resizeData.startHeight = rect.height;
+            this.state.resizeData.startX = rect.left;
+            this.state.resizeData.startY = rect.top;
+            this.state.offset = new Vector2(e.clientX, e.clientY)
+
+            // 清除目标元素的过渡效果，实现更流畅的调整
+            this.state.target.element.style.transition = 'none';
+
+            e.preventDefault();
+
+            this.change('mousedown')
+        }
+    }
+
+    // 鼠标移动处理
+    handleMouseMove = (e: MouseEvent) => {
+        if (!this.state.target.element) return
+
+        if (this.state.isDragging) {
+            // 更新拖拽元素位置
+            this.element.style.left = `${e.clientX - this.state.offset.x}px`;
+            this.element.style.top = `${e.clientY - this.state.offset.y}px`;
+
+            // 同步更新目标元素
+            this.syncTargetPosition(false);
+            this.change()
+        } else if (this.state.isResizing) {
+            this.handleResizing(e);
+            this.change()
+        }
+    }
+
+    // 处理调整大小
+    handleResizing = (e: MouseEvent) => {
+        const deltaX = e.clientX - this.state.offset.x;
+        const deltaY = e.clientY - this.state.offset.y;
+        const { direction, startWidth, startHeight, startX, startY } = this.state.resizeData;
+
+        let newWidth = startWidth;
+        let newHeight = startHeight;
+        let newLeft = startX;
+        let newTop = startY;
+
+        // 根据调整方向计算新尺寸和位置
+        switch (direction) {
+            case '0':
+                newWidth = Math.max(20, startWidth - deltaX);
+                newHeight = Math.max(20, startHeight - deltaY);
+                newLeft = startX + (startWidth - newWidth);
+                newTop = startY + (startHeight - newHeight);
+                break;
+            case '1':
+                newWidth = Math.max(20, startWidth + deltaX);
+                newHeight = Math.max(20, startHeight - deltaY);
+                newTop = startY + (startHeight - newHeight);
+                break;
+            case '3':
+                newWidth = Math.max(20, startWidth - deltaX);
+                newHeight = Math.max(20, startHeight + deltaY);
+                newLeft = startX + (startWidth - newWidth);
+                break;
+            case '2':
+                newWidth = Math.max(20, startWidth + deltaX);
+                newHeight = Math.max(20, startHeight + deltaY);
+                break;
+        }
+
+        this.element.style.width = `${newWidth}px`;
+        this.element.style.height = `${newHeight}px`;
+        this.element.style.left = `${newLeft}px`;
+        this.element.style.top = `${newTop}px`;
+
+        this.updateOffset(this.element.getBoundingClientRect())
+
+        // 同步更新目标元素
+        this.syncTargetPosition();
+    }
+
+    // 鼠标释放处理
+    handleMouseEnd = () => {
+        if (!this.state.target.element) return
+
+        if (this.state.isDragging) {
+            this.state.isDragging = false;
+        } else if (this.state.isResizing) {
+            this.state.isResizing = false;
+        }
+
+        this.change('mouseup')
+    }
+}
+
+export {
+    HTMLTransformControllerActor
+}