@vyr/engine 0.0.33 → 0.0.34

package/package.json

@@ -1,13 +1,16 @@
 {
   "name": "@vyr/engine",
-  "version": "0.0.33",
+  "version": "0.0.34",
   "description": "",
   "main": "./src/index.ts",
   "author": "",
   "license": "MIT",
   "dependencies": {
-    "@vyr/locale": "0.0.33",
-    "tinycolor2": "1.6.0"
+    "@vyr/locale": "0.0.34",
+    "decamelize-keys": "^2.0.1",
+    "camelcase-keys": "^10.0.1",
+    "tinycolor2": "1.6.0",
+    "zod": "^4.3.6"
   },
   "devDependencies": {
     "@types/tinycolor2": "1.4.6"

package/src/ArrayUtils.ts

@@ -1,65 +1,63 @@
-import { ObjectUtils } from "./ObjectUtils"
-
-class ArrayUtils {
-
-    static insert<T extends any = any>(arr: T[], item: T) {
-        const i = arr.indexOf(item)
-        if (i === -1) arr.push(item)
-    }
-
-    static remove<T extends any = any>(arr: T[], item: T) {
-        const i = arr.indexOf(item)
-        if (i > -1) arr.splice(i, 1)
-    }
-
-    static auto<T extends any = any>(arr: T[], item: T) {
-        const i = arr.indexOf(item)
-        i === -1 ? arr.push(item) : arr.splice(i, 1)
-    }
-
-    static insertByKey<T extends any = any>(arr: T[], key: keyof T, item: T) {
-        const count = arr.length;
-        for (let i = 0; i < count; i++) {
-            if (arr[i][key] === item[key]) return
-        }
-        arr.push(item)
-    }
-
-    static removeByKey<T extends any = any, K extends keyof T = keyof T>(arr: T[], key: keyof T, value: T[K]) {
-        const count = arr.length;
-        for (let i = 0; i < count; i++) {
-            const item = arr[i]
-            if (item[key] === value) {
-                arr.splice(i, 1)
-                return
-            }
-        }
-    }
-
-    static equals(left: { [k: string]: any }, right: { [k: string]: any }, ignore: string[] = []) {
-        if (left.length !== right.length) return false
-
-        for (let i = 0; i < left.length; i++) {
-            const value = left[i]
-            const t = typeof value
-
-            if (t === 'string' || t === 'boolean' || t === 'number' || t === 'bigint' || t === 'undefined' || t === 'symbol' || t === null) {
-                if (value !== right[i]) return false
-            }
-
-            if (Array.isArray(value)) {
-                if (ArrayUtils.equals(value, right[i], ignore) == false) return false
-                continue
-            }
-
-            if (t === 'object') {
-                if (ObjectUtils.equals(value, right[i], ignore) === false) return false
-                continue
-            }
-        }
-
-        return true
-    }
-}
-
-export { ArrayUtils }
+import { ObjectUtils } from "./ObjectUtils"
+
+export class ArrayUtils {
+
+    static insert<T extends any = any>(arr: T[], item: T) {
+        const i = arr.indexOf(item)
+        if (i === -1) arr.push(item)
+    }
+
+    static remove<T extends any = any>(arr: T[], item: T) {
+        const i = arr.indexOf(item)
+        if (i > -1) arr.splice(i, 1)
+    }
+
+    static auto<T extends any = any>(arr: T[], item: T) {
+        const i = arr.indexOf(item)
+        i === -1 ? arr.push(item) : arr.splice(i, 1)
+    }
+
+    static insertByKey<T extends any = any>(arr: T[], key: keyof T, item: T) {
+        const count = arr.length;
+        for (let i = 0; i < count; i++) {
+            if (arr[i][key] === item[key]) return
+        }
+        arr.push(item)
+    }
+
+    static removeByKey<T extends any = any, K extends keyof T = keyof T>(arr: T[], key: keyof T, value: T[K]) {
+        const count = arr.length;
+        for (let i = 0; i < count; i++) {
+            const item = arr[i]
+            if (item[key] === value) {
+                arr.splice(i, 1)
+                return
+            }
+        }
+    }
+
+    static equals(left: { [k: string]: any }, right: { [k: string]: any }, ignore: string[] = []) {
+        if (left.length !== right.length) return false
+
+        for (let i = 0; i < left.length; i++) {
+            const value = left[i]
+            const t = typeof value
+
+            if (t === 'string' || t === 'boolean' || t === 'number' || t === 'bigint' || t === 'undefined' || t === 'symbol' || t === null) {
+                if (value !== right[i]) return false
+            }
+
+            if (Array.isArray(value)) {
+                if (ArrayUtils.equals(value, right[i], ignore) == false) return false
+                continue
+            }
+
+            if (t === 'object') {
+                if (ObjectUtils.equals(value, right[i], ignore) === false) return false
+                continue
+            }
+        }
+
+        return true
+    }
+}

package/src/AsyncTask.ts

@@ -1,72 +1,68 @@
-import { language } from './locale'
-
-enum STATUS {
-    PENDING = 1,
-    RUNNING = 2,
-    RESOLVED = 3,
-    REJECTED = 4,
-    CANCELLED = 5
-}
-
-type AsyncTaskFn<T> = () => T | Promise<T>
-
-class AsyncTask<T = any> {
-    private _task: AsyncTaskFn<T>;
-    private _status: STATUS;
-    private _promise: Promise<T>;
-    private _resolve!: ((value: T | PromiseLike<T>) => void) | null;
-    private _reject!: ((reason?: any) => void) | null;
-
-    constructor(task?: AsyncTaskFn<T>) {
-        this._task = task ?? (async () => { }) as AsyncTaskFn<T>;
-        this._status = STATUS.PENDING;
-        this._promise = new Promise<T>((resolve, reject) => {
-            this._resolve = resolve;
-            this._reject = reject;
-        })
-    }
-
-    /**运行任务 */
-    run(): Promise<T> {
-        if (this._status !== STATUS.PENDING) return this._promise
-
-        this._status = STATUS.RUNNING;
-
-        Promise.resolve(this._task())
-            .then(result => {
-                if (this._status === STATUS.RUNNING) {
-                    this._status = STATUS.RESOLVED;
-                    this._resolve!(result);
-                }
-            })
-            .catch(error => {
-                if (this._status === STATUS.RUNNING) {
-                    this._status = STATUS.REJECTED;
-                    this._reject!(error);
-                }
-            });
-
-        return this._promise;
-    }
-
-    /**取消运行中的任务 */
-    cancel(): boolean {
-        if (this._status === STATUS.PENDING || this._status === STATUS.RUNNING) {
-            this._status = STATUS.CANCELLED;
-            if (this._reject) {
-                this._reject(new Error(language.get('asyncTask.task.was.cancelled')));
-            }
-            return true;
-        }
-        return false;
-    }
-
-    /**等待任务完成 */
-    done(): Promise<T> {
-        return this._promise;
-    }
-}
-
-export {
-    AsyncTask
+import { language } from './locale'
+
+enum STATUS {
+    PENDING = 1,
+    RUNNING = 2,
+    RESOLVED = 3,
+    REJECTED = 4,
+    CANCELLED = 5
+}
+
+export type AsyncTaskFn<T> = (...args: any[]) => T | Promise<T>
+
+export class AsyncTask<T = any> {
+    private _task: AsyncTaskFn<T>;
+    private _status: STATUS;
+    private _promise: Promise<T>;
+    private _resolve!: ((value: T | PromiseLike<T>) => void) | null;
+    private _reject!: ((reason?: any) => void) | null;
+
+    constructor(task?: AsyncTaskFn<T>) {
+        this._task = task ?? (async () => { }) as AsyncTaskFn<T>;
+        this._status = STATUS.PENDING;
+        this._promise = new Promise<T>((resolve, reject) => {
+            this._resolve = resolve;
+            this._reject = reject;
+        })
+    }
+
+    /**运行任务 */
+    run(...args: any[]): Promise<T> {
+        if (this._status !== STATUS.PENDING) return this._promise
+
+        this._status = STATUS.RUNNING;
+
+        Promise.resolve(this._task(...args))
+            .then(result => {
+                if (this._status === STATUS.RUNNING) {
+                    this._status = STATUS.RESOLVED;
+                    this._resolve!(result);
+                }
+            })
+            .catch(error => {
+                if (this._status === STATUS.RUNNING) {
+                    this._status = STATUS.REJECTED;
+                    this._reject!(error);
+                }
+            });
+
+        return this._promise;
+    }
+
+    /**取消运行中的任务 */
+    cancel(): boolean {
+        if (this._status === STATUS.PENDING || this._status === STATUS.RUNNING) {
+            this._status = STATUS.CANCELLED;
+            if (this._reject) {
+                this._reject(new Error(language.get('asyncTask.task.was.cancelled')));
+            }
+            return true;
+        }
+        return false;
+    }
+
+    /**等待任务完成 */
+    done(): Promise<T> {
+        return this._promise;
+    }
 }

package/src/Category.ts

@@ -1,100 +1,78 @@
-/**资产的类别 */
-class Category {
-  static ts = 'ts'
-  static prefab = 'prefab'
-  static dataset = 'dataset'
-  static style = 'style'
-  static font = 'font'
-  static interaction = 'interaction'
-  static texture = 'texture'
-  static material = 'material'
-  static geometry = 'geometry'
-  static scene = 'scene'
-  static json = 'json'
-  static image = 'image'
-  static audio = 'audio'
-  static video = 'video'
-  static model = 'model'
-  static other = 'other'
+class CategoryDefine {
+  store = 'store'
+  interaction = 'interaction'
+  texture = 'texture'
+  material = 'material'
+  geometry = 'geometry'
+  scene = 'scene'
+  json = 'json'
+  image = 'image'
+  audio = 'audio'
+  video = 'video'
+  model = 'model'
+  font = 'font'
+  other = 'other'
 
-  static tsSuffix = `.${this.ts}`
-  static prefabSuffix = `.${this.prefab}.json`
-  static datasetSuffix = `.${this.dataset}.json`
-  static styleSuffix = `.${this.style}.json`
-  static fontSuffix = `.${this.font}.json`
-  static interactionSuffix = `.${this.interaction}.json`
-  static textureSuffix = `.${this.texture}.json`
-  static materialSuffix = `.${this.material}.json`
-  static geometrySuffix = `.${this.geometry}.json`
-  static sceneSuffix = `.${this.scene}.json`
-  static manifestSuffix = `.manifest.json`
+  isDescriptor(category: string) {
+    const list = [
+      this.store,
+      this.interaction,
+      this.texture,
+      this.material,
+      this.geometry,
+      this.scene,
+    ]
+    return list.includes(category)
+  }
+}
+export const Category = new CategoryDefine()
 
-  static jsonSuffixs = ['.json']
+class SuffixDefine {
   static imageSuffixs = ['.png', '.jpg', '.jpeg', '.bmp', '.gif']
   static audioSuffixs = ['.mp3', '.wav', '.wmv']
   static videoSuffixs = ['.mp4', '.m2v', '.mkv', '.rmvb', '.wmv', '.avi', '.flv', '.mov', '.m4v']
   static modelSuffixs = ['.glb', '.gltf']
 
-  static descriptorSuffixs = [
-    this.prefabSuffix,
-    this.datasetSuffix,
-    this.styleSuffix,
-    this.interactionSuffix,
-    this.textureSuffix,
-    this.materialSuffix,
-    this.geometrySuffix,
-    this.sceneSuffix,
-  ]
-  static descriptorCategorys = [
-    this.prefab,
-    this.dataset,
-    this.style,
-    this.interaction,
-    this.texture,
-    this.material,
-    this.geometry,
-    this.scene,
-  ]
+  storeSuffix = `.${Category.store}.json`
+  interactionSuffix = `.${Category.interaction}.json`
+  textureSuffix = `.${Category.texture}.json`
+  materialSuffix = `.${Category.material}.json`
+  geometrySuffix = `.${Category.geometry}.json`
+  sceneSuffix = `.${Category.scene}.json`
+  fontSuffix = `.${Category.font}.json`
+  jsonSuffix = '.json'
 
-  /**根据后缀获取资产类型 */
-  static getCategory(suffix: string) {
-    if (suffix === this.tsSuffix) {
-      return this.ts
-    } else if (suffix === this.prefabSuffix) {
-      return this.prefab
-    } else if (suffix === this.datasetSuffix) {
-      return this.dataset
-    } else if (suffix === this.styleSuffix) {
-      return this.style
-    } else if (suffix === this.fontSuffix) {
-      return this.font
+  getCategory(suffix: string) {
+    if (suffix === this.storeSuffix) {
+      return Category.store
     } else if (suffix === this.interactionSuffix) {
-      return this.interaction
+      return Category.interaction
     } else if (suffix === this.textureSuffix) {
-      return this.texture
+      return Category.texture
     } else if (suffix === this.materialSuffix) {
-      return this.material
+      return Category.material
     } else if (suffix === this.geometrySuffix) {
-      return this.geometry
+      return Category.geometry
     } else if (suffix === this.sceneSuffix) {
-      return this.scene
-    } else if (this.jsonSuffixs.includes(suffix)) {
-      return this.json
-    } else if (this.imageSuffixs.includes(suffix)) {
-      return this.image
-    } else if (this.audioSuffixs.includes(suffix)) {
-      return this.audio
-    } else if (this.videoSuffixs.includes(suffix)) {
-      return this.video
-    } else if (this.modelSuffixs.includes(suffix)) {
-      return this.model
+      return Category.scene
+    } else if (suffix === this.fontSuffix) {
+      return Category.font
+    } else if (suffix === this.jsonSuffix) {
+      return Category.json
+    } else if (SuffixDefine.imageSuffixs.includes(suffix)) {
+      return Category.image
+    } else if (SuffixDefine.audioSuffixs.includes(suffix)) {
+      return Category.audio
+    } else if (SuffixDefine.videoSuffixs.includes(suffix)) {
+      return Category.video
+    } else if (SuffixDefine.modelSuffixs.includes(suffix)) {
+      return Category.model
     } else {
-      return this.other
+      return Category.other
     }
   }
 
-  /**根据名称解析资产信息 */
-  static parseName(name?: string) {
+  parseName(name?: string) {
     const result = { name: '', suffix: '', category: 'other' }
     if (name === undefined || name === '') return result
 
@@ -109,11 +87,16 @@ class Category {
     return result
   }
 
-  /**根据后缀判断是否为描述器类资产 */
-  static isDescriptor(suffix: string, type: 'suffix' | 'category' = 'suffix') {
-    const tests = type === 'suffix' ? Category.descriptorSuffixs : Category.descriptorCategorys
-    return tests.includes(suffix)
+  isDescriptor(suffix: string) {
+    const list = [
+      this.storeSuffix,
+      this.interactionSuffix,
+      this.textureSuffix,
+      this.materialSuffix,
+      this.geometrySuffix,
+      this.sceneSuffix,
+    ]
+    return list.includes(suffix)
   }
 }
-
-export { Category }
+export const Suffix = new SuffixDefine()

package/src/Color.ts

@@ -1,111 +1,3 @@
-import tinycolor from "tinycolor2"
-import { DeserializationObject, Serialization } from "./Serialization"
-
-class Color extends tinycolor { }
-
-interface ColorItem {
-    value: string
-    opacity: number
-    ratio: number
-}
-
-class BasicStyleColor {
-    static type = 'basic'
-    static create(color: DeserializationObject<BasicStyleColor>) {
-        switch (color.type) {
-            case "linear":
-                return new LinearStyleColor(color as LinearStyleColor)
-            case "radial":
-                return new RadialStyleColor(color as RadialStyleColor)
-            default:
-                return new DefaultStyleColor(color as DefaultStyleColor)
-        }
-    }
-    static getColor(color: BasicStyleColor) {
-        return 'rgba(0,0,0,0)'
-    }
-    type: string
-
-    constructor() {
-        this.type = (this.constructor as typeof BasicStyleColor).type
-    }
-
-    getColor() {
-        return (this.constructor as typeof BasicStyleColor).getColor(this)
-    }
-
-}
-
-class DefaultStyleColor extends BasicStyleColor {
-    static type = 'default'
-    static getColor(color: DefaultStyleColor) {
-        return new Color(color.value).setAlpha(color.opacity).toRgbString()
-    }
-    declare type: 'default'
-    value: string
-    opacity: number
-
-    constructor(color: Partial<DeserializationObject<DefaultStyleColor>> = {}) {
-        super()
-        this.value = color.value ?? '#ffffff'
-        this.opacity = color.opacity ?? 1
-    }
-}
-
-class LinearStyleColor extends BasicStyleColor {
-    static type = 'linear'
-    static getColor(color: LinearStyleColor) {
-        let items = ''
-        for (const item of color.value) {
-            items += `, ${new Color(item.value).setAlpha(item.opacity).toRgbString()} ${item.ratio * 100}%`
-        }
-
-        return `linear-gradient(${color.angle}deg ${items})`
-    }
-    declare type: 'linear'
-    angle: number
-    value: ColorItem[]
-    constructor(color: Partial<DeserializationObject<LinearStyleColor>> = {}) {
-        super()
-        this.angle = color.angle ?? 0
-        this.value = color.value ? Serialization.deepClone(color.value) : [{ value: '#ffffff', opacity: 1, ratio: 0 }, { value: '#ffffff', opacity: 1, ratio: 1 }]
-    }
-
-}
-
-class RadialStyleColor extends BasicStyleColor {
-    static type = 'radial'
-    static getColor(color: RadialStyleColor) {
-        let radis = ''
-        if (color.radius < 0) {
-            radis = 'farthest-corner'
-        } else {
-            radis = `${color.radius}px`
-        }
-
-        let center = ''
-        center = `${color.center.x * 100}% ${color.center.y * 100}%`
-
-        let items = ''
-        for (const item of color.value) {
-            items += `, ${new Color(item.value).setAlpha(item.opacity).toRgbString()} ${item.ratio * 100}%`
-        }
-
-        return `radial-gradient(circle ${radis} at ${center} ${items})`
-    }
-    declare type: 'radial'
-    center: { x: number; y: number }
-    radius: number
-    value: ColorItem[]
-
-    constructor(color: Partial<DeserializationObject<RadialStyleColor>> = {}) {
-        super()
-        this.center = color.center ? Serialization.deepClone(color.center) : { x: 0.5, y: 0.5 }
-        this.radius = color.radius ?? -1
-        this.value = color.value ? Serialization.deepClone(color.value) : [{ value: '#ffffff', opacity: 1, ratio: 0 }, { value: '#ffffff', opacity: 1, ratio: 1 }]
-    }
-}
-
-type StyleColor = DefaultStyleColor | LinearStyleColor | RadialStyleColor
-
-export { ColorItem, BasicStyleColor, DefaultStyleColor, LinearStyleColor, RadialStyleColor, StyleColor, Color }
+import tinycolor from "tinycolor2"
+
+export class Color extends tinycolor { }

package/src/Engine.ts

@@ -1,11 +1,11 @@
 import { language } from './locale'
 import { Asset } from './asset'
-import { ServiceSchedulerDescriptor, StyleDescriptor } from './descriptor'
+import { Scene } from './descriptor'
 import { Generate } from './Generate'
 import { InputSystem } from './InputSystem'
 import { Listener } from './Listener'
 import { Compilation, TickArgs } from './graphics'
-import { setupStyle } from './setup';
+import { createEngineDOM } from './utils'
 
 interface EngineData { }
 
@@ -14,27 +14,18 @@ interface EngineListener {
   afterRender: (args: TickArgs) => void
 }
 
-class Engine extends Listener<EngineListener> {
+export class Engine extends Listener<EngineListener> {
   private compilation = new Compilation()
   private active = ''
   private prevTimestamp = 0
   private frame = 0
 
   readonly uuid = Generate.uuid()
-  readonly DOM = document.createElement('div')
+  readonly DOM = createEngineDOM()
   readonly inputSystem = new InputSystem(this.DOM)
 
   constructor(data: Partial<EngineData> = {}) {
     super()
-    this.DOM.style.width = '100%'
-    this.DOM.style.height = '100%'
-    this.DOM.style.position = 'relative'
-    this.DOM.style.top = '0'
-    this.DOM.style.left = '0'
-    this.DOM.style.overflow = 'hidden'
-    this.DOM.classList.add('vyr-engine', StyleDescriptor.basicName)
-    this.DOM.setAttribute('data-vyr', `vyr-engine`)
-    this.DOM.addEventListener('contextmenu', (e) => e.preventDefault())
   }
 
   private getDelta(timestamp: number) {
@@ -64,7 +55,6 @@ class Engine extends Listener<EngineListener> {
       el = ele
     }
     el.appendChild(this.DOM)
-    setupStyle()
 
     this.prevTimestamp = performance.now()
     this.tick(this.prevTimestamp)
@@ -77,15 +67,15 @@ class Engine extends Listener<EngineListener> {
     this.frame = 0
   }
 
-  switch(scheduler: ServiceSchedulerDescriptor) {
-    const current = Asset.get<ServiceSchedulerDescriptor>(this.active)
+  switch(scene: Scene) {
+    const current = Asset.get<Scene>(this.active)
     if (current) this.compilation.unlisten(current)
 
-    const url = Asset.getUrlByUuid(scheduler.uuid)
+    const url = Asset.getUrlByUuid(scene.uuid)
 
     if (!url) return console.warn(language.get('engine.switch.url.notFound'))
 
-    const graphics = this.compilation.ensureExists(url, scheduler, this)
+    const graphics = this.compilation.ensureExists(url, scene, this)
 
     this.compilation.listen(graphics)
     this.active = url
@@ -103,13 +93,11 @@ class Engine extends Listener<EngineListener> {
     this.compilation.clear()
   }
 
-  getGraphics(scheduler: ServiceSchedulerDescriptor) {
-    return this.compilation.get(scheduler)
+  getGraphics(scene: Scene) {
+    return this.compilation.get(scene)
   }
 
-  ensureGraphics(url: string, scheduler: ServiceSchedulerDescriptor) {
-    return this.compilation.ensureExists(url, scheduler, this)
+  ensureGraphics(url: string, scene: Scene) {
+    return this.compilation.ensureExists(url, scene, this)
   }
 }
-
-export { Engine }