@vyr/cli 0.0.12 → 0.0.13

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

@@ -0,0 +1,409 @@
+import { Vector2 } from "../math"
+import { Asset } from "../asset"
+import { Descriptor, HTMLDescriptor, HTMLTransformControllerChangeArgs, HTMLTransformControllerDescriptor } from "../descriptor"
+import { Scriptable } from "../interaction/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) {
+        this.reset()
+        const graphics = Actor.getGraphics(this)
+        const target = graphics.variableProxy.get<Descriptor>(descriptor.target, graphics)
+        if (target instanceof HTMLDescriptor) {
+
+            const targetActor = graphics.getActor<HTMLActor>(target)
+            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) {
+        this.listen(descriptor)
+    }
+
+    change = (type = 'change') => {
+        const scriptable = Asset.get<Scriptable<HTMLTransformControllerChangeArgs>>(this.descriptor.event)
+        if (scriptable === null) return
+        const graphics = Actor.getGraphics(this)
+        const _args: HTMLTransformControllerChangeArgs = {
+            event: { type, target: this.descriptor.target },
+            trigger: this.descriptor,
+            input: undefined,
+            result: undefined,
+        }
+        scriptable.execute(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
+}

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

@@ -0,0 +1,96 @@
+import { Asset } from "../asset"
+import { Actor } from "./Actor"
+import { StyleDescriptor } from "../descriptor"
+import { StyleInterpreter } from "../interpreter"
+
+interface RuleObjects extends Array<{ name: string, value: string }> { }
+
+class StyleActor extends Actor {
+    private _styleCollection = new Map<string, RuleObjects>()
+    private _className: string[] = []
+
+    getStyleValue() {
+        const styles: string[] = []
+
+        const entries = this._styleCollection.entries()
+        for (const [selectorText, rules] of entries) {
+            const style: string[] = []
+            style.push(`${selectorText}{`)
+            if (rules.length === 0) {
+                style.push('/* 如果需要样式，在这里添加 */')
+            } else {
+                for (const rule of rules) {
+                    style.push(`${rule.name}:${rule.value};`)
+                }
+            }
+            style.push(`}`)
+            styles.push(style.join('\n'))
+        }
+
+        return styles
+    }
+
+    getClassName() {
+        return [...this._className]
+    }
+
+    updateRule(sheet: CSSStyleSheet) {
+        let count = 0
+        for (const rule of sheet.cssRules) {
+            if (rule instanceof CSSStyleRule) {
+                const styleObjects = this._styleCollection.get(rule.selectorText)
+                if (styleObjects === undefined) continue
+
+                count++
+                rule.style.cssText = ''
+                for (const styleObject of styleObjects) {
+                    rule.style.setProperty(styleObject.name, styleObject.value)
+                }
+
+                if (count === 2) return true
+            }
+        }
+        return false
+    }
+
+    update(descriptor: StyleDescriptor, className: string) {
+        this._className.length = 0
+        this._styleCollection.clear()
+
+        let inherit = Asset.get<StyleDescriptor>(descriptor.inherit)
+        if (inherit) {
+            const graphics = Actor.getGraphics(this)
+            const interpreter = graphics.getInterpreter<StyleInterpreter>(inherit)
+            this._className.push(interpreter.className)
+        }
+        this._className.push(className)
+
+        const rules: RuleObjects = []
+        for (const rule of descriptor.rules) {
+            if (rule.inherit === true) continue
+            const value = rule.getValue()
+            rules.push({ name: rule.name, value })
+        }
+        this._styleCollection.set(`.${className}`, rules)
+
+        const hover: RuleObjects = []
+        for (const rule of descriptor.hoverRules) {
+            if (rule.inherit === true) continue
+            const value = rule.getValue()
+            hover.push({ name: rule.name, value })
+        }
+        this._styleCollection.set(`.${className}:hover`, hover)
+
+        const active: RuleObjects = []
+        for (const rule of descriptor.activeRules) {
+            if (rule.inherit === true) continue
+            const value = rule.getValue()
+            active.push({ name: rule.name, value })
+        }
+        this._styleCollection.set(`.${className}.${StyleDescriptor.activeName}`, active)
+    }
+}
+
+export {
+    StyleActor
+}

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

@@ -0,0 +1,8 @@
+export * from './Actor'
+export * from './StyleActor'
+export * from './AnimationUnitActor'
+export * from './FragmentActor'
+export * from './HTMActor'
+export * from './DivActor'
+export * from './HTMServiceActor'
+export * from './HTMTransformControllerActor'