@vyr/engine 0.0.1

package/package.json

@@ -0,0 +1,19 @@
+{
+  "name": "@vyr/engine",
+  "version": "0.0.1",
+  "description": "",
+  "main": "./src/index.ts",
+  "author": "",
+  "license": "MIT",
+  "dependencies": {
+    "@vyr/locale": "0.0.1",
+    "tinycolor2": "1.6.0"
+  },
+  "devDependencies": {
+    "@types/tinycolor2": "1.4.6"
+  },
+  "files": [
+    "package.json",
+    "src/"
+  ]
+}

package/src/ArrayUtils.ts

@@ -0,0 +1,65 @@
+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 }

package/src/AsyncTask.ts

@@ -0,0 +1,72 @@
+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
+}

package/src/Category.ts

@@ -0,0 +1,119 @@
+/**资产的类别 */
+class Category {
+  static ts = 'ts'
+  static prefab = 'prefab'
+  static dataset = 'dataset'
+  static style = 'style'
+  static font = 'font'
+  static routine = 'routine'
+  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'
+
+  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 routineSuffix = `.${this.routine}.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`
+
+  static jsonSuffixs = ['.json']
+  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.routineSuffix,
+    this.textureSuffix,
+    this.materialSuffix,
+    this.geometrySuffix,
+    this.sceneSuffix,
+  ]
+  static descriptorCategorys = [
+    this.prefab,
+    this.dataset,
+    this.style,
+    this.routine,
+    this.texture,
+    this.material,
+    this.geometry,
+    this.scene,
+  ]
+
+  /**根据后缀获取资产类型 */
+  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
+    } else if (suffix === this.routineSuffix) {
+      return this.routine
+    } else if (suffix === this.textureSuffix) {
+      return this.texture
+    } else if (suffix === this.materialSuffix) {
+      return this.material
+    } else if (suffix === this.geometrySuffix) {
+      return this.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
+    } else {
+      return this.other
+    }
+  }
+
+  /**根据名称解析资产信息 */
+  static parseName(name?: string) {
+    const result = { name: '', suffix: '', category: 'other' }
+    if (name === undefined || name === '') return result
+
+    const nameClips = name.split('.')
+    result.name = nameClips[0] ?? ''
+
+    for (let i = 1; i < nameClips.length; i++) {
+      result.suffix += `.${nameClips[i]}`
+    }
+    result.category = this.getCategory(result.suffix)
+
+    return result
+  }
+
+  /**根据后缀判断是否为描述器类资产（场景，组合，材质，纹理，几何体） */
+  static isDescriptor(suffix: string, type: 'suffix' | 'category' = 'suffix') {
+    const tests = type === 'suffix' ? Category.descriptorSuffixs : Category.descriptorCategorys
+    return tests.includes(suffix)
+  }
+}
+
+export { Category }

package/src/Color.ts

@@ -0,0 +1,111 @@
+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 }

package/src/Engine.ts

@@ -0,0 +1,101 @@
+import { language } from './locale'
+import { Descriptor, RoutineDescriptor, ServiceSchedulerDescriptor, StyleDescriptor, UpdateArgs } from './descriptor'
+import { Generate } from './Generate'
+import { InputSystem } from './InputSystem'
+import { Listener } from './Listener'
+import { Compilation, Graphics } from './graphics'
+import { setupStyle } from './setup';
+import { Asset } from './asset'
+import { RoutineInterpreter } from './interpreter'
+
+interface EngineData { }
+
+interface EngineListener {
+  beforeRender: (args: UpdateArgs) => void
+  afterRender: (args: UpdateArgs) => void
+}
+
+interface PickupUpdateArgs extends UpdateArgs {
+  mouse: { x: number; y: number }
+}
+
+class Engine extends Listener<EngineListener> {
+  private compilation = new Compilation()
+  private prevTimestamp = 0
+  private frame = 0
+
+  readonly uuid = Generate.uuid()
+  readonly DOM = document.createElement('div')
+  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) {
+    return (timestamp - this.prevTimestamp) / 1000
+  }
+
+  private tick(timestamp: number) {
+    const delta = this.getDelta(timestamp)
+    this.prevTimestamp = timestamp
+    this.frame = requestAnimationFrame((nextTimestamp) => this.tick(nextTimestamp))
+
+    const args = { delta }
+
+    this.inputSystem.process()
+
+    this.compilation.process(this, args)
+  }
+
+  run(el: string | HTMLElement) {
+    if (this.frame !== 0) return
+
+    if (typeof el === 'string') {
+      const ele = document.getElementById(el)
+      if (ele === null) throw language.get('engine.run.container.notFound')
+      el = ele
+    }
+    el.appendChild(this.DOM)
+    setupStyle()
+
+    this.prevTimestamp = performance.now()
+    this.tick(this.prevTimestamp)
+  }
+
+  stop() {
+    if (this.frame === 0) return
+
+    cancelAnimationFrame(this.frame)
+    this.frame = 0
+  }
+
+  switch(scheduler: ServiceSchedulerDescriptor) {
+    this.compilation.clear(this)
+
+    this.compilation.listen(scheduler, this)
+
+    window.dispatchEvent(new Event('resize'))
+
+    this.compilation.process(this, { delta: 0 })
+  }
+
+  clear() {
+    this.compilation.clear(this)
+  }
+
+  getGraphics(scheduler: ServiceSchedulerDescriptor) {
+    return this.compilation.get(scheduler)
+  }
+}
+
+export { PickupUpdateArgs, Engine }

package/src/Generate.ts

@@ -0,0 +1,40 @@
+let id = 1;
+const _lut = ['00', '01', '02', '03', '04', '05', '06', '07', '08', '09', '0a', '0b', '0c', '0d', '0e', '0f', '10', '11', '12', '13', '14', '15', '16', '17', '18', '19', '1a', '1b', '1c', '1d', '1e', '1f', '20', '21', '22', '23', '24', '25', '26', '27', '28', '29', '2a', '2b', '2c', '2d', '2e', '2f', '30', '31', '32', '33', '34', '35', '36', '37', '38', '39', '3a', '3b', '3c', '3d', '3e', '3f', '40', '41', '42', '43', '44', '45', '46', '47', '48', '49', '4a', '4b', '4c', '4d', '4e', '4f', '50', '51', '52', '53', '54', '55', '56', '57', '58', '59', '5a', '5b', '5c', '5d', '5e', '5f', '60', '61', '62', '63', '64', '65', '66', '67', '68', '69', '6a', '6b', '6c', '6d', '6e', '6f', '70', '71', '72', '73', '74', '75', '76', '77', '78', '79', '7a', '7b', '7c', '7d', '7e', '7f', '80', '81', '82', '83', '84', '85', '86', '87', '88', '89', '8a', '8b', '8c', '8d', '8e', '8f', '90', '91', '92', '93', '94', '95', '96', '97', '98', '99', '9a', '9b', '9c', '9d', '9e', '9f', 'a0', 'a1', 'a2', 'a3', 'a4', 'a5', 'a6', 'a7', 'a8', 'a9', 'aa', 'ab', 'ac', 'ad', 'ae', 'af', 'b0', 'b1', 'b2', 'b3', 'b4', 'b5', 'b6', 'b7', 'b8', 'b9', 'ba', 'bb', 'bc', 'bd', 'be', 'bf', 'c0', 'c1', 'c2', 'c3', 'c4', 'c5', 'c6', 'c7', 'c8', 'c9', 'ca', 'cb', 'cc', 'cd', 'ce', 'cf', 'd0', 'd1', 'd2', 'd3', 'd4', 'd5', 'd6', 'd7', 'd8', 'd9', 'da', 'db', 'dc', 'dd', 'de', 'df', 'e0', 'e1', 'e2', 'e3', 'e4', 'e5', 'e6', 'e7', 'e8', 'e9', 'ea', 'eb', 'ec', 'ed', 'ee', 'ef', 'f0', 'f1', 'f2', 'f3', 'f4', 'f5', 'f6', 'f7', 'f8', 'f9', 'fa', 'fb', 'fc', 'fd', 'fe', 'ff'];
+
+class Generate {
+  static id() {
+    return id++
+  }
+
+  static uuid() {
+    const d0 = Math.random() * 0xffffffff | 0;
+    const d1 = Math.random() * 0xffffffff | 0;
+    const d2 = Math.random() * 0xffffffff | 0;
+    const d3 = Math.random() * 0xffffffff | 0;
+    const uuid = _lut[d0 & 0xff] + _lut[d0 >> 8 & 0xff] + _lut[d0 >> 16 & 0xff] + _lut[d0 >> 24 & 0xff] + '-' +
+      _lut[d1 & 0xff] + _lut[d1 >> 8 & 0xff] + '-' + _lut[d1 >> 16 & 0x0f | 0x40] + _lut[d1 >> 24 & 0xff] + '-' +
+      _lut[d2 & 0x3f | 0x80] + _lut[d2 >> 8 & 0xff] + '-' + _lut[d2 >> 16 & 0xff] + _lut[d2 >> 24 & 0xff] +
+      _lut[d3 & 0xff] + _lut[d3 >> 8 & 0xff] + _lut[d3 >> 16 & 0xff] + _lut[d3 >> 24 & 0xff];
+
+    return uuid.toLowerCase()
+  }
+
+  static delayExecute(cb: (...args: any[]) => any) {
+    const delaySatate = {
+      args: [] as any[],
+      execute: false
+    }
+    const execute = (...args: any[]) => {
+      delaySatate.args = args
+      if (delaySatate.execute === true) return
+      delaySatate.execute = true
+      requestAnimationFrame(() => {
+        cb(...delaySatate.args)
+        delaySatate.execute = false
+      })
+    }
+    return execute
+  }
+}
+
+export { Generate }

package/src/InputSystem.ts

@@ -0,0 +1,108 @@
+type IEM = GlobalEventHandlersEventMap
+
+interface InputConfig {
+  /**事件只触发一次，默认`false` */
+  once: boolean
+  /**将事件的处理顺序设为事件捕获，默认`false` */
+  capture: boolean
+  /**处理函数不会调用`preventDefault`来阻止默认行为时应设为true，默认`false` */
+  passive: boolean
+  /**事件触发的对象 */
+  target: Window | Document | HTMLElement
+}
+
+const privateState = {
+  id: 1,
+  listener: {
+    default: (input: InputEvent, system: InputSystem) => {
+      return (event: Event) => {
+        input.event = event
+        if (input.enable) return
+        input.enable = true
+        system.quaua.push(input)
+      }
+    },
+    once: (input: InputEvent, system: InputSystem) => {
+      const execute = privateState.listener.default(input, system)
+      return (e: Event) => {
+        execute(e)
+        system.unlisten(input.id)
+      }
+    },
+  }
+}
+
+class InputEvent {
+  readonly id = privateState.id++
+  readonly type
+  readonly target
+  readonly callback: (e: Event) => void
+  readonly listener: (e: Event) => void
+  enable = false
+  event!: Event
+
+  constructor(type: keyof IEM, callback: (e: any) => void, system: InputSystem, config: InputConfig) {
+    this.type = type
+    this.target = config.target
+    this.callback = callback
+    this.listener = config.once ? privateState.listener.once(this, system) : privateState.listener.default(this, system)
+  }
+
+  execute() {
+    this.callback(this.event)
+    this.enable = false
+  }
+}
+
+class InputSystem {
+  private _target
+  private _registry: InputEvent[] = []
+  readonly quaua: InputEvent[] = []
+
+  constructor(target: InputConfig['target']) {
+    this._target = target
+  }
+
+  /**
+   * 监听事件输入,事件在一帧中只执行一次
+   * @param type 事件类型
+   * @param callback 事件触发时的回调
+   * @param options.once 只执行一次回调
+   * @param options.target 监听事件的绑定对象
+   * @param options.capture 事件执行的阶段，true：捕获阶段执行，false：冒泡阶段执行
+   */
+  listen<T extends keyof IEM>(type: T, callback: (event: IEM[T]) => void, options: Partial<InputConfig> = {}) {
+    const config: InputConfig = { once: false, target: this._target, passive: false, capture: false, ...options }
+
+    for (const input of this._registry) {
+      if (input.type === type && input.callback === callback && options.target === input.target) return input.id
+    }
+
+    const input = new InputEvent(type, callback, this, config)
+    this._registry.push(input)
+    input.target.addEventListener(type, input.listener, config.capture)
+
+    return input.id
+  }
+
+  /**解除事件监听 */
+  unlisten(id: number) {
+    for (let i = 0; i < this._registry.length; i++) {
+      const input = this._registry[i]
+      if (input.id === id) {
+        this._registry.splice(i, 1)
+        input.target.removeEventListener(input.type, input.listener)
+        return
+      }
+    }
+  }
+
+  /**处理输入事件 */
+  process() {
+    const quaua = [...this.quaua]
+    for (const input of quaua) input.execute()
+    this.quaua.length = 0
+  }
+}
+
+export { InputSystem }