@vyr/remote 0.0.33 → 0.0.34

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vyr/remote",
-  "version": "0.0.33",
+  "version": "0.0.34",
   "description": "",
   "main": "./src/index.ts",
   "author": "",

package/src/ChangeScriptable.ts

@@ -1,22 +1,29 @@
-import { Descriptor, Graphics, HTMLTransformControllerChangeArgs, Scriptable } from "@vyr/engine";
+import z from "zod";
+import { Descriptor, Graphics, Scriptable } from "@vyr/engine";
 import { RemoteProcess } from "./RemoteProcess";
 import { Job } from "./job";
 
-class ChangeScriptable extends Scriptable<HTMLTransformControllerChangeArgs> {
+class ChangeScriptable extends Scriptable {
+    static id = RemoteProcess.transformEvent
+    static name = ''
+    static inputSchame = z.object({
+        type: z.enum(['mousedown', 'mouseup', 'contextmenu', 'change']),
+        target: z.string(),
+    })
 
-    execute(graphics: Graphics, args: HTMLTransformControllerChangeArgs) {
+    execute(graphics: Graphics, trigger: string, input: z.infer<ChangeScriptable['inputSchame']>) {
         const process = RemoteProcess.get(graphics.engine)
         if (process === null) return
 
-        if (args.event.type === 'contextmenu') {
+        if (input.type === 'contextmenu') {
             process.bridge.send(new Job.invoke.pick.Response({ descriptor: '' }))
         } else {
-            const target = Descriptor.get(args.event.target) as Descriptor
+            const target = Descriptor.get(input.target) as Descriptor
             if (target === null) return
-            const params = { eventType: args.event.type, target: args.event.target, descriptor: target.clone(false) }
+            const params = { eventType: input.type, target: input.target, descriptor: target.clone(false) }
             process.bridge.send(new Job.invoke.transform.Response(params))
         }
     }
 }
 
-export default ChangeScriptable
+export { ChangeScriptable }

package/src/RemoteExecutor.ts

@@ -1,5 +1,5 @@
-import { AnimationUnitInterpreter, Asset, Compilation, Descriptor, DeserializationObject, DivDescriptor, DynamicDescriptor, Engine, Graphics, HTMLDescriptor, HTMLServiceDescriptor, HTMLTransformControllerDescriptor, observer, PrefabeDescriptor, ServiceDescriptor, ServiceSchedulerDescriptor, StyleDescriptor, Unit } from '@vyr/engine'
-import { cleanPickupObject, getAnimationUnit, createControllerStyle, pickupObject, getAnimationUnitByAsset, screenshot } from './utils'
+import { AnimationUnitInterpreter, Asset, Compilation, Descriptor, DeserializationObject, Graphics, HTMLActor, HTMLService, HTMLTransformController, observer, Service, Scene, Unit, isService, traceService, isHTML } from '@vyr/engine'
+import { cleanPickupObject, pickupObject, getAnimationUnitByAsset, screenshot } from './utils'
 import { Collection } from './Collection'
 import { RemoteProcess } from './RemoteProcess'
 import { Job } from './job'
@@ -13,135 +13,6 @@ class RemoteExecutor {
         this.process = process
     }
 
-    async loadByScene(task: InstanceType<typeof Job['scene']['load']['Task']>) {
-        let loadTask = Asset.getTask(task.params.url)
-        if (loadTask === null) {
-            const nextTask = Asset.getTask(this.process.scene)
-            nextTask?.cancel()
-
-            this.process.scene = task.params.url
-            await Asset.loadAll(task.params.url)
-            await Asset.compileDataset(task.params.url, this.process.engine)
-
-            //渲染新场景
-            const scheduler = Asset.get<ServiceSchedulerDescriptor>(task.params.url)
-            if (this.process.config.invoke) {
-                scheduler.traverse(sub => {
-                    if (sub instanceof ServiceDescriptor) this.onAddService(sub)
-                })
-            }
-
-            this.sendAnimationUnitToRemote(0, getAnimationUnit(scheduler))
-
-            this.process.scheduler = scheduler
-            this.process.engine.switch(scheduler)
-        }
-    }
-    async unloadByScene(task: InstanceType<typeof Job['scene']['unload']['Task']>) {
-        const scheduler = Asset.get<ServiceSchedulerDescriptor>(this.process.scene)
-        if (scheduler !== null) {
-            scheduler.traverse(child => {
-                if (child instanceof ServiceDescriptor) this.onRemoveService(child)
-            })
-        }
-
-        const nextTask = Asset.getTask(this.process.scene)
-        nextTask?.cancel()
-        this.process.scene = ''
-        this.process.scheduler = new ServiceSchedulerDescriptor()
-        this.process.engine.switch(this.process.scheduler)
-    }
-    async addByScene(task: InstanceType<typeof Job['scene']['add']['Task']>) {
-        const target = Descriptor.get<Descriptor>(task.params.parent)
-        if (target === null) return
-
-        const subs: Descriptor[] = []
-        const tasks: Promise<void>[] = []
-        for (const node of task.params.node) {
-            const sub = Descriptor.create(node)
-            subs.push(sub)
-
-            const ports = Asset.graph.build(sub)
-            const dep = Asset.graph.getDependencidesByPorts(ports)
-            for (const url of dep.all) {
-                if (Asset.get(url) === null) tasks.push(Asset.loadAll(url, false))
-            }
-
-            if (this.process.config.invoke) {
-                sub.traverse(child => {
-                    if (child instanceof ServiceDescriptor) this.onAddService(child)
-                })
-            }
-        }
-
-        await Promise.all(tasks)
-
-        if (task.params.next) {
-            for (const sub of subs) target.insertBefore(sub.uuid, task.params.next)
-        } else {
-            for (const sub of subs) target.add(sub)
-        }
-
-        await Asset.loadAll(this.process.scene)
-        await Asset.compileDataset(this.process.scene, this.process.engine)
-        this.sendAnimationUnitToRemote(0, getAnimationUnit(this.process.scheduler))
-    }
-    async removeyScene(task: InstanceType<typeof Job['scene']['remove']['Task']>) {
-        for (const uuid of task.params.uuids) {
-            const target = Descriptor.get<Descriptor>(uuid)
-            if (target === null) continue
-
-            this.resetTransformByRemoveJob(target)
-
-            const acestor = target.traceAncestor()
-            if (acestor.parent) acestor.parent.remove(target)
-
-            if (this.process.config.invoke) {
-                target.traverse(child => {
-                    if (child instanceof ServiceDescriptor) this.onRemoveService(child)
-                })
-            }
-        }
-
-        await Asset.loadAll(this.process.scene)
-        this.sendAnimationUnitToRemote(0, getAnimationUnit(this.process.scheduler))
-    }
-    async dragdrapyScene(task: InstanceType<typeof Job['scene']['dragdrap']['Task']>) {
-        const root = Asset.get<Descriptor>(this.process.scene)
-        if (root) {
-
-            const method = task.params.next ? 'insertBefore' : task.params.type
-            const target = task.params.next || task.params.targetData.data.uuid
-
-            for (const uuid of task.params.dragData.data.uuids) {
-                root[method](uuid, target)
-            }
-        }
-    }
-    async updateyScene(task: InstanceType<typeof Job['scene']['update']['Task']>) {
-        const target = Descriptor.get<Descriptor>(task.params.content.uuid)
-        if (target === null) return
-
-        const temp = target.clone(false)
-        temp.syncWith(task.params.content)
-        const ports = Asset.graph.build(temp)
-        const dep = Asset.graph.getDependencidesByPorts(ports)
-        const tasks: Promise<void>[] = []
-        for (const url of dep.all) {
-            if (Asset.get(url) === null) tasks.push(Asset.loadAll(url, false))
-        }
-        await Promise.all(tasks)
-
-        this.updateOtherUpdateJob(target, task.params.content)
-        target.syncWith(task.params.content)
-        await Asset.loadAll(this.process.scene)
-        await Asset.compileDataset(this.process.scene, this.process.engine)
-
-        this.sendAnimationUnitToRemote(0, getAnimationUnit(this.process.scheduler))
-
-        target.setNeedsUpdate()
-    }
-
     async loadByAsset(task: InstanceType<typeof Job['asset']['load']['Task']>) {
         let loadTask = Asset.getTask(task.params.url)
         if (loadTask === null) {
@@ -150,47 +21,45 @@ class RemoteExecutor {
 
             this.process.asset = task.params.url
             await Asset.loadAll(task.params.url)
-            await Asset.compileDataset(task.params.url, this.process.engine)
 
-            const scheduler = new ServiceSchedulerDescriptor()
+            let scene: Scene
             const descriptor = Asset.get<Descriptor>(task.params.url)
-            if (descriptor instanceof PrefabeDescriptor && descriptor.category === 'html') {
-                const service = new HTMLServiceDescriptor()
-                service.add(descriptor)
-                scheduler.add(service)
+            if (descriptor instanceof Scene) {
+                scene = descriptor
             } else {
-                this.onLoadAsset(task.params.url, descriptor, scheduler)
+                scene = new Scene()
+                this.onLoadAsset(task.params.url, descriptor, scene)
             }
-            scheduler.traverse(sub => {
-                if (sub instanceof ServiceDescriptor) this.onAddService(sub)
-            })
 
-            Asset.set(this._defaultScheduleUrl, scheduler)
+            if (this.process.config.invoke) {
+                scene.traverse(sub => {
+                    if (isService(sub)) this.onAddService(sub)
+                })
+            }
+
+            Asset.set(this._defaultScheduleUrl, scene)
             Asset.graph.create(task.params.url)
 
             this.sendAnimationUnitToRemote(0, getAnimationUnitByAsset(task.params.url))
 
-            this.process.scheduler = scheduler
-            this.process.engine.switch(scheduler)
+            this.process.scene = scene
+            this.process.engine.switch(scene)
         }
     }
     async unloadByAsset(task: InstanceType<typeof Job['asset']['unload']['Task']>) {
-        const scheduler = Asset.get<ServiceSchedulerDescriptor>(this.process.asset)
-        if (scheduler !== null) {
-
-            if (this.process.config.invoke) {
-                scheduler.traverse(child => {
-                    if (child instanceof ServiceDescriptor) this.onRemoveService(child)
-                })
-            }
+        const scene = Asset.get<Scene>(this.process.asset)
+        if (scene !== null && this.process.config.invoke) {
+            scene.traverse(child => {
+                if (isService(child)) this.onRemoveService(child)
+            })
         }
 
         const nextTask = Asset.getTask(this.process.asset)
         nextTask?.cancel()
         this.process.asset = ''
 
-        this.process.scheduler = new ServiceSchedulerDescriptor()
-        this.process.engine.switch(this.process.scheduler)
+        this.process.scene = new Scene()
+        this.process.engine.switch(this.process.scene)
     }
     async addByAsset(task: InstanceType<typeof Job['asset']['add']['Task']>) {
         const parent = Descriptor.get<Descriptor>(task.params.parent)
@@ -209,9 +78,11 @@ class RemoteExecutor {
                 if (Asset.get(url) === null) tasks.push(Asset.loadAll(url, false))
             }
 
-            sub.traverse(child => {
-                if (child instanceof ServiceDescriptor) this.onAddService(child)
-            })
+            if (this.process.config.invoke) {
+                sub.traverse(child => {
+                    if (isService(child)) this.onAddService(child)
+                })
+            }
         }
         await Promise.all(tasks)
 
@@ -223,7 +94,6 @@ class RemoteExecutor {
 
         await Asset.loadAll(task.params.url)
         Asset.graph.update(this._defaultScheduleUrl)
-        await Asset.compileDataset(task.params.url, this.process.engine)
 
         this.sendAnimationUnitToRemote(0, getAnimationUnitByAsset(task.params.url))
     }
@@ -239,7 +109,7 @@ class RemoteExecutor {
 
             if (this.process.config.invoke) {
                 target.traverse(child => {
-                    if (child instanceof ServiceDescriptor) this.onRemoveService(child)
+                    if (isService(child)) this.onRemoveService(child)
                 })
             }
         }
@@ -260,11 +130,11 @@ class RemoteExecutor {
         }
     }
     async updateyAsset(task: InstanceType<typeof Job['asset']['update']['Task']>) {
-        const target = Descriptor.get<Descriptor>(task.params.content.uuid)
+        const target = Descriptor.get<Descriptor>(task.params.node.uuid)
         if (target === null) return
 
         const temp = target.clone(false)
-        temp.syncWith(task.params.content)
+        temp.syncWith(task.params.node)
         const ports = Asset.graph.build(temp)
         const dep = Asset.graph.getDependencidesByPorts(ports)
         const tasks: Promise<void>[] = []
@@ -273,11 +143,10 @@ class RemoteExecutor {
         }
         await Promise.all(tasks)
 
-        this.updateOtherUpdateJob(target, task.params.content)
-        target.syncWith(task.params.content)
+        this.updateOtherUpdateJob(target, task.params.node)
+        target.syncWith(task.params.node)
         await Asset.loadAll(task.params.url)
         Asset.graph.update(this._defaultScheduleUrl)
-        await Asset.compileDataset(this.process.scene, this.process.engine)
 
         this.sendAnimationUnitToRemote(0, getAnimationUnitByAsset(task.params.url))
 
@@ -287,73 +156,115 @@ class RemoteExecutor {
     clearHTMLTransform() {
         const htmlTransforms = this.htmlTransformCollection.values()
         for (const item of htmlTransforms) {
-            item.target = ''
             item.mode = ''
+            item.target = ''
+            item.highlight = ''
             item.enabled = false
             item.setNeedsUpdate()
         }
     }
-    async transformByInvoke(task: InstanceType<typeof Job['invoke']['transform']['Task']>, service: ServiceDescriptor | null = null) {
+    async transformByInvoke(task: InstanceType<typeof Job['invoke']['transform']['Task']>, service: Service | null = null) {
         this.clearHTMLTransform()
 
         const target = Descriptor.get<Descriptor>(task.params.target)
         if (service === null) {
-            service = ServiceDescriptor.traceService(target)
+            service = traceService(target)
         } else {
-            const isHTMLServiceDescriptor = service instanceof HTMLServiceDescriptor
+            const isHTMLServiceDescriptor = service instanceof HTMLService
             if (isHTMLServiceDescriptor === false) return
         }
         if (service === null) return
 
         const enabled = ['translate', 'rotate', 'scale'].includes(task.params.mode)
-        const htmlTransform = this.htmlTransformCollection.get<HTMLTransformControllerDescriptor>(service)
+        const htmlTransform = this.htmlTransformCollection.get<HTMLTransformController>(service)
 
-        if (htmlTransform !== null && enabled === true && target instanceof HTMLDescriptor) {
+        if (htmlTransform !== null && enabled === true && isHTML(target)) {
             htmlTransform.target = task.params.target
             htmlTransform.mode = task.params.mode
             htmlTransform.enabled = true
         }
     }
+    async highlightByInvoke(task: InstanceType<typeof Job['invoke']['highlight']['Task']>, service: Service | null = null) {
+        this.clearHTMLTransform()
+
+        const target = Descriptor.get<Descriptor>(task.params.target)
+        if (service === null) {
+            service = traceService(target)
+        } else {
+            const isHTMLServiceDescriptor = service instanceof HTMLService
+            if (isHTMLServiceDescriptor === false) return
+        }
+        if (service === null) return
+
+        const htmlTransform = this.htmlTransformCollection.get<HTMLTransformController>(service)
+        if (htmlTransform === null) return
+
+        htmlTransform.highlight = target.uuid
+        htmlTransform.setNeedsUpdate()
+    }
     async orbitByInvoke(task: InstanceType<typeof Job['invoke']['orbit']['Task']>) { }
     async propertiesByInvoke(task: InstanceType<typeof Job['invoke']['properties']['Task']>) { }
     async animationByInvoke(task: InstanceType<typeof Job['invoke']['animation']['Task']>) {
         if (task.reset) AnimationUnitInterpreter.reset(task.params.currentTime)
         AnimationUnitInterpreter.enabled = task.params.enabled
     }
-    async screenshot(task: InstanceType<typeof Job['invoke']['screenshot']['Task']>) {
-        const base64 = await screenshot(document.body)
+    async screenshotByInvoke(task: InstanceType<typeof Job['invoke']['screenshot']['Task']>) {
+        const base64 = await screenshot(document.body, task.params)
         const msg = new Job.invoke.screenshot.Response({ target: task.params.target, base64 })
         this.process.bridge.send(msg)
     }
-
-    onLoadAsset(url: string, descriptor: Descriptor, scheduler: ServiceSchedulerDescriptor) {
-        if (descriptor instanceof StyleDescriptor) {
-            const service = new HTMLServiceDescriptor()
-            service.add(new DivDescriptor({ style: url, text: '演示文字' }))
-            scheduler.add(service)
+    async smartByInvoke(task: InstanceType<typeof Job['invoke']['smart']['Task']>) {
+        const msg = new Job.invoke.smart.Response({
+            dragdrap: task.params.dragdrap,
+            target: ''
+        })
+        const x = task.params.mouse.x
+        const y = task.params.mouse.y
+        const element = document.elementFromPoint(x, y)
+
+        if (element) {
+            const uuid = element.getAttribute(HTMLActor.uuidKey)
+            if (uuid) {
+                const scene = Descriptor.get(uuid)
+                if (scene instanceof Scene) {
+                    msg.params.target = uuid
+                } else {
+                    const graphics = this.process.engine.getGraphics(this.process.scene)
+                    const result = graphics.pickup(x, y, element)
+                    if (result.length > 0) {
+                        const select = result[0]
+                        msg.params.target = select.uuid
+                    }
+                }
+            }
         }
+
+        this.process.bridge.send(msg)
     }
-    onAddService(service: ServiceDescriptor) {
-        if (service instanceof HTMLServiceDescriptor) {
+
+    onLoadAsset(url: string, descriptor: Descriptor, scene: Scene) { }
+
+    onAddService(service: Service) {
+        if (service instanceof HTMLService) {
             let htmlTransform = this.htmlTransformCollection.get(service)
             if (htmlTransform === null) {
-                htmlTransform = new HTMLTransformControllerDescriptor({ enabled: false, selectable: false })
+                htmlTransform = new HTMLTransformController({ enabled: false, selectable: false })
                 this.htmlTransformCollection.set(service, htmlTransform)
                 htmlTransform.event = RemoteProcess.transformEvent
             }
-            service.add(htmlTransform as HTMLTransformControllerDescriptor)
+            service.add(htmlTransform as HTMLTransformController)
         }
     }
-    onRemoveService(service: ServiceDescriptor) {
-        if (service instanceof HTMLServiceDescriptor) {
-            const htmlTransform = this.htmlTransformCollection.get<HTMLTransformControllerDescriptor>(service)
+    onRemoveService(service: Service) {
+        if (service instanceof HTMLService) {
+            const htmlTransform = this.htmlTransformCollection.get<HTMLTransformController>(service)
             if (htmlTransform !== null) {
                 this.htmlTransformCollection.delete(service)
                 service.remove(htmlTransform)
             }
         }
     }
-    onUpdateScheduler(unit: Unit) {
+    onUpdateScene(unit: Unit) {
         const htmlTransform = Descriptor.get<Descriptor>(unit.uuid)
         const service = this.htmlTransformCollection.getByMap(htmlTransform)
         if (service !== null) {
@@ -362,11 +273,11 @@ class RemoteExecutor {
         }
     }
 
-    resetTransformByRemoveJob(target: Descriptor, service: ServiceDescriptor | null = null) {
-        if (service === null) service = ServiceDescriptor.traceService(target)
+    resetTransformByRemoveJob(target: Descriptor, service: Service | null = null) {
+        if (service === null) service = traceService(target)
 
-        if (service instanceof HTMLServiceDescriptor) {
-            const htmlTransform = this.htmlTransformCollection.get<HTMLTransformControllerDescriptor>(service)
+        if (service instanceof HTMLService) {
+            const htmlTransform = this.htmlTransformCollection.get<HTMLTransformController>(service)
             if (htmlTransform === null) return
 
             if (htmlTransform.target === target.uuid) {
@@ -376,17 +287,12 @@ class RemoteExecutor {
             }
         }
     }
-    private _updateStyle(target: StyleDescriptor, deserialization: DeserializationObject<StyleDescriptor>) {
-        if (target.inherit === deserialization.inherit) return
-        observer.trigger('updateDeps', { self: target.uuid })
-    }
-    updateOtherUpdateJob(target: Descriptor, deserialization: DeserializationObject<Descriptor>, service: ServiceDescriptor | null = null) {
-        if (target instanceof StyleDescriptor) this._updateStyle(target, deserialization as any)
+    updateOtherUpdateJob(target: Descriptor, deserialization: DeserializationObject<Descriptor>, service: Service | null = null) {
         if (service === null) {
-            service = ServiceDescriptor.traceService(target)
+            service = traceService(target)
         }
         if (service === null) return
-        const htmlTransform = this.htmlTransformCollection.get<HTMLTransformControllerDescriptor>(service)
+        const htmlTransform = this.htmlTransformCollection.get<HTMLTransformController>(service)
         if (htmlTransform === null) return
         if (htmlTransform.target === target.uuid) {
             this.process.engine.listen('afterRender', () => htmlTransform.setNeedsUpdate(), { once: true })
@@ -411,7 +317,7 @@ class RemoteExecutor {
             if (this.__VYR_REMOTE_WRAPPER === true) {
                 //@ts-ignore
                 window['__VYR_RUNTIME.DISABLED_INPUT'] = true
-                executor.onUpdateScheduler(unit)
+                executor.onUpdateScene(unit)
                 doUpdate.call(this, unit)
             } else {
                 doUpdate.call(this, unit)
@@ -427,41 +333,22 @@ class RemoteExecutor {
             e.stopPropagation()
         }
     }
-    protected onEvent(event: MouseEvent | KeyboardEvent) {
-        let task
-        if (event instanceof MouseEvent) {
-            task = new Job.invoke.event.Response({
-                type: 'mouse',
-                properties: {
-                    type: event.type,
-                    bubbles: event.bubbles,
-                    cancelable: event.cancelable,
-                    altKey: event.altKey,
-                    ctrlKey: event.ctrlKey,
-                    shiftKey: event.shiftKey,
-                    clientX: event.clientX,
-                    clientY: event.clientY,
-                }
-            })
-        } else {
-            task = new Job.invoke.event.Response({
-                type: 'keyboard',
-                properties: {
-                    type: event.type,
-                    altKey: event.altKey,
-                    ctrlKey: event.ctrlKey,
-                    shiftKey: event.shiftKey,
-                    code: event.code,
-                }
-            })
-            if (event.code === 'Tab') event.preventDefault()
-        }
+    protected onEvent(event: KeyboardEvent) {
+        const task = new Job.invoke.event.Response({
+            type: 'keyboard',
+            properties: {
+                type: event.type,
+                altKey: event.altKey,
+                ctrlKey: event.ctrlKey,
+                shiftKey: event.shiftKey,
+                code: event.code,
+            }
+        })
+        if (event.code === 'Tab') event.preventDefault()
         this.process.bridge.send(task)
     }
     protected onMessage(args: any) {
-        if (args.type === DynamicDescriptor.type) {
-            //动态节点发生了循环引用，动态节点 arsg.uuid
-        }
+
     }
 
     sendAnimationUnitToRemote(delta: number, max?: number) {
@@ -478,32 +365,23 @@ class RemoteExecutor {
             this.process.bridge.listen(Job.asset.remove.Method, this.removeyAsset.bind(this))
             this.process.bridge.listen(Job.asset.dragdrap.Method, this.dragdrapyAsset.bind(this))
             this.process.bridge.listen(Job.asset.update.Method, this.updateyAsset.bind(this))
-
-            this.process.bridge.listen(Job.scene.load.Method, this.loadByScene.bind(this))
-            this.process.bridge.listen(Job.scene.unload.Method, this.unloadByScene.bind(this))
-            this.process.bridge.listen(Job.scene.add.Method, this.addByScene.bind(this))
-            this.process.bridge.listen(Job.scene.remove.Method, this.removeyScene.bind(this))
-            this.process.bridge.listen(Job.scene.dragdrap.Method, this.dragdrapyScene.bind(this))
-            this.process.bridge.listen(Job.scene.update.Method, this.updateyScene.bind(this))
         }
 
         if (this.process.config.invoke) {
-            createControllerStyle()
             pickupObject(this.process)
             cleanPickupObject(this.process)
             this.enhance(this.process)
 
             this.process.bridge.listen(Job.invoke.transform.Method, this.transformByInvoke.bind(this))
+            this.process.bridge.listen(Job.invoke.highlight.Method, this.highlightByInvoke.bind(this))
             this.process.bridge.listen(Job.invoke.orbit.Method, this.orbitByInvoke.bind(this))
             this.process.bridge.listen(Job.invoke.properties.Method, this.propertiesByInvoke.bind(this))
             this.process.bridge.listen(Job.invoke.animation.Method, this.animationByInvoke.bind(this))
-            this.process.bridge.listen(Job.invoke.screenshot.Method, this.screenshot.bind(this))
+            this.process.bridge.listen(Job.invoke.screenshot.Method, this.screenshotByInvoke.bind(this))
+            this.process.bridge.listen(Job.invoke.smart.Method, this.smartByInvoke.bind(this))
 
             window.addEventListener('keydown', this.onEvent.bind(this))
             window.addEventListener('keyup', this.onEvent.bind(this))
-            window.addEventListener('mousedown', this.onEvent.bind(this))
-            window.addEventListener('click', this.onEvent.bind(this))
-            window.addEventListener('mouseup', this.onEvent.bind(this))
 
             //@ts-ignore
             window['__VYR_RUNTIME.DISABLED_INPUT'] = true

package/src/RemoteInvoker.ts

@@ -42,7 +42,7 @@ class RemoteInvoker {
     return config.env === 'window' ? this.createWindow(location) : this.createIframe(location)
   }
 
-  private sanbox
+  readonly sanbox
   readonly id
   readonly bridge
 
@@ -54,6 +54,10 @@ class RemoteInvoker {
     this.bridge = new Bridge({ id: config.id, useRemote: this.sanbox.useRemote })
   }
 
+  setState(enable: boolean) {
+    this.sanbox.DOM.style.pointerEvents = enable ? 'all' : 'none'
+  }
+
   mount(id: string) {
     if (this.sanbox === null) return
     const container = document.getElementById(id)

package/src/RemoteProcess.ts

@@ -1,4 +1,4 @@
-import { Asset, Descriptor, Engine, Generate, ServiceDescriptor, ServiceSchedulerDescriptor } from '@vyr/engine'
+import { Descriptor, Engine, Generate, Scene, Scriptable, isService } from '@vyr/engine'
 import { Bridge, RemoteConfig } from './Bridge'
 import { RemoteExecutor } from './RemoteExecutor'
 import { Job } from './job'
@@ -20,7 +20,7 @@ class RemoteProcess {
   }
   static getServices(descriptor: Descriptor, services: Descriptor[] = []) {
     descriptor.traverse(sub => {
-      if (sub instanceof ServiceDescriptor) services.push(sub)
+      if (isService(sub)) services.push(sub)
     })
     return services
   }
@@ -29,9 +29,8 @@ class RemoteProcess {
   readonly config
   readonly element
   readonly engine
-  scene = ''
   asset = ''
-  scheduler: ServiceSchedulerDescriptor
+  scene: Scene
   bridge!: Bridge
 
   constructor(element: string | HTMLElement, engine = new Engine()) {
@@ -39,7 +38,7 @@ class RemoteProcess {
     this.element = element
     this.engine = engine
     this.config = this._initConfig()
-    this.scheduler = new ServiceSchedulerDescriptor()
+    this.scene = new Scene()
   }
 
   private _initConfig() {
@@ -54,6 +53,9 @@ class RemoteProcess {
   }
 
   async listen() {
+    const { ChangeScriptable } = await import('./ChangeScriptable')
+    Scriptable.register(ChangeScriptable)
+
     for (const setup of privateState.setupCollection) setup(this)
 
     this.bridge = new Bridge({ id: this.config.id })
@@ -68,7 +70,7 @@ class RemoteProcess {
 
     this.engine.run(this.element)
 
-    if (this.config.scene) executor.loadByScene(new Job.scene.load.Task({ url: this.config.scene }))
+    if (this.config.scene) executor.loadByAsset(new Job.asset.load.Task({ url: this.config.scene }))
   }
 
   setExecutor(executor: RemoteExecutor) {
@@ -79,9 +81,6 @@ class RemoteProcess {
   }
 }
 
-Asset.setProvider(RemoteProcess.transformEvent, () => import('./ChangeScriptable'))
-Asset.load(RemoteProcess.transformEvent)
-
 export {
   RemoteProcess
 }

package/src/job/Job.ts

@@ -2,13 +2,11 @@ import { IJob } from './IJob'
 import * as bridge from './bridge'
 import * as invoke from './invoke'
 import * as asset from './asset'
-import * as scene from './scene'
 
 class Job extends IJob {
     static readonly bridge = bridge
     static readonly invoke = invoke
     static readonly asset = asset
-    static readonly scene = scene
     readonly method: string = 'remote.default'
     readonly params = {}
 }

package/src/job/asset/update.ts

@@ -3,8 +3,7 @@ import { IJob } from "../IJob"
 
 interface Params {
     url: string
-    scheme: string
-    content: DeserializationObject<Descriptor>
+    node: DeserializationObject<Descriptor>
 }
 
 const Method = 'remote.asset.update'

package/src/job/invoke/event.ts

@@ -2,20 +2,6 @@ import { IJob } from "../IJob";
 
 const Method = 'remote.invoke.event'
 
-interface MouseParams {
-    type: 'mouse',
-    properties: {
-        type: string
-        bubbles: boolean
-        cancelable: boolean
-        altKey: boolean
-        ctrlKey: boolean
-        shiftKey: boolean
-        clientX: number
-        clientY: number
-    }
-}
-
 interface KeyboardParams {
     type: 'keyboard',
     properties: {
@@ -31,7 +17,7 @@ class Response extends IJob {
     readonly method = Method
     readonly params
 
-    constructor(params: MouseParams | KeyboardParams) {
+    constructor(params: KeyboardParams) {
         super()
         this.params = params
     }

package/src/job/invoke/highlight.ts

@@ -0,0 +1,30 @@
+import { IJob } from "../IJob";
+
+interface Params {
+    enabled: boolean,
+    target: string
+}
+
+const Method = 'remote.invoke.highlight'
+
+class Task extends IJob {
+    readonly method = Method
+    readonly params
+
+    constructor(params: Params) {
+        super()
+        this.params = params
+    }
+}
+
+class Response extends IJob {
+    readonly method = Method
+    readonly params: Params
+
+    constructor(params: Params) {
+        super()
+        this.params = params
+    }
+}
+
+export { Method, Task, Response }

package/src/job/invoke/index.ts

@@ -1,8 +1,10 @@
 export * as properties from './properties'
 export * as animation from './animation'
 export * as transform from './transform'
+export * as highlight from './highlight'
 export * as orbit from './orbit'
 export * as pick from './pick'
 export * as screenshot from './screenshot'
+export * as smart from './smart'
 export * as event from './event'
 export * as alert from './alert'

package/src/job/invoke/screenshot.ts

@@ -2,6 +2,8 @@ import { IJob } from "../IJob";
 
 interface Params {
     target: string
+    width: number
+    height: number
 }
 
 const Method = 'remote.invoke.screenshot'

package/src/job/invoke/smart.ts

@@ -0,0 +1,35 @@
+import { IJob } from "../IJob";
+
+interface Params {
+    dragdrap: { id: string; data: any }
+    mouse: { x: number; y: number }
+}
+
+const Method = 'remote.invoke.smart'
+
+class Task extends IJob {
+    readonly method = Method
+    readonly params
+
+    constructor(params: Params) {
+        super()
+        this.params = params
+    }
+}
+
+interface ResponseParams {
+    dragdrap: { id: string; data: any }
+    target: string
+}
+
+class Response extends IJob {
+    readonly method = Method
+    readonly params: ResponseParams
+
+    constructor(params: ResponseParams) {
+        super()
+        this.params = params
+    }
+}
+
+export { Method, Task, Response }

package/src/utils/index.ts

@@ -1,25 +1,16 @@
-import { AnimationUnitDescriptor, Asset, Descriptor } from "@vyr/engine"
+import { AnimationUnit, Asset, Descriptor } from "@vyr/engine"
 import { RemoteProcess } from "../RemoteProcess"
 import { Job } from "../job"
 
-const createControllerStyle = () => {
-    const style = document.createElement('style')
-    const css = [
-        '.vyr-html-wrapper{pointer-events: all !important;}',
-        '.vyr-html-wrapper > * {pointer-events: none !important}',
-    ]
-    style.innerText = css.join('\n')
-    document.head.append(style)
-}
-
 const pickupObject = (process: RemoteProcess) => {
     const executor = (event: MouseEvent) => {
-        const graphics = process.engine.getGraphics(process.scheduler)
-        const result = graphics.pickup(event)
+        if ((event.target instanceof Element) === false) return
+        const graphics = process.engine.getGraphics(process.scene)
+        const result = graphics.pickup(event.clientX, event.clientY, event.target)
         if (result.length === 0) return
 
         const select = result[0]
-        process.bridge.send(new Job.invoke.pick.Response({ descriptor: select.generatedBy || select.uuid }))
+        process.bridge.send(new Job.invoke.pick.Response({ descriptor: select.uuid }))
     }
 
     let count = 0
@@ -58,7 +49,7 @@ const cleanPickupObject = (process: RemoteProcess) => {
 const getAnimationUnit = (descriptor: Descriptor) => {
     let max = 0
     descriptor.traverse((sub) => {
-        if (sub instanceof AnimationUnitDescriptor) {
+        if (sub instanceof AnimationUnit) {
             const uptime = sub.startTime + sub.duration
             if (uptime > max) max = uptime
         }
@@ -76,7 +67,6 @@ const getAnimationUnitByAsset = (url: string) => {
 }
 
 export {
-    createControllerStyle,
     pickupObject,
     cleanPickupObject,
     getAnimationUnit,

package/src/utils/screenshot.ts

@@ -1,5 +1,5 @@
 let HTMLToImage: any = null
-const screenshot = async (html: HTMLElement, backgroundColor = '#ffffff') => {
+const screenshot = async (html: HTMLElement, size: { width: number; height: number }, backgroundColor = '#ffffff') => {
     if (HTMLToImage === null) {
         //@ts-ignore
         HTMLToImage = await import('dom-to-image')

package/src/job/scene/add.ts

@@ -1,22 +0,0 @@
-import { Descriptor, DeserializationObject } from "@vyr/engine";
-import { IJob } from "../IJob";
-
-interface Params {
-    parent: string
-    node: DeserializationObject<Descriptor>[]
-    next: string
-}
-
-const Method = 'remote.scene.add'
-
-class Task extends IJob {
-    readonly method = Method
-    readonly params
-
-    constructor(params: Params) {
-        super()
-        this.params = params
-    }
-}
-
-export { Method, Task }

package/src/job/scene/dragdrap.ts

@@ -1,23 +0,0 @@
-import { DraggableData, DraggableEndType } from "@vyr/declare";
-import { IJob } from "../IJob";
-
-interface Params {
-    type: DraggableEndType,
-    dragData: DraggableData<{ uuids: string[] }>,
-    targetData: DraggableData<{ uuid: string }>,
-    next?: string
-}
-
-const Method = 'remote.scene.dragdrap'
-
-class Task extends IJob {
-    readonly method = Method
-    readonly params
-
-    constructor(params: Params) {
-        super()
-        this.params = params
-    }
-}
-
-export { Method, Task }

package/src/job/scene/index.ts

@@ -1,6 +0,0 @@
-export * as load from './load'
-export * as unload from './unload'
-export * as add from './add'
-export * as remove from './remove'
-export * as update from './update'
-export * as dragdrap from './dragdrap'

package/src/job/scene/load.ts

@@ -1,19 +0,0 @@
-import { IJob } from "../IJob";
-
-interface Params {
-    url: string
-}
-
-const Method = 'remote.scene.load'
-
-class Task extends IJob {
-    readonly method = Method
-    readonly params
-
-    constructor(params: Params) {
-        super()
-        this.params = params
-    }
-}
-
-export { Method, Task}

package/src/job/scene/remove.ts

@@ -1,19 +0,0 @@
-import { IJob } from "../IJob";
-
-interface Params {
-    uuids: string[]
-}
-
-const Method = 'remote.scene.remove'
-
-class Task extends IJob {
-    readonly method = Method
-    readonly params
-
-    constructor(params: Params) {
-        super()
-        this.params = params
-    }
-}
-
-export { Method, Task }

package/src/job/scene/unload.ts

@@ -1,17 +0,0 @@
-import { IJob } from "../IJob";
-
-interface Params { }
-
-const Method = 'remote.scene.unload'
-
-class Task extends IJob {
-    readonly method = Method
-    readonly params
-
-    constructor(params: Params) {
-        super()
-        this.params = params
-    }
-}
-
-export { Method, Task }

package/src/job/scene/update.ts

@@ -1,20 +0,0 @@
-import { Descriptor, DeserializationObject } from "@vyr/engine";
-import { IJob } from "../IJob";
-
-interface Params {
-    content: DeserializationObject<Descriptor>
-}
-
-const Method = 'remote.scene.update'
-
-class Task extends IJob {
-    readonly method = Method
-    readonly params
-
-    constructor(params: Params) {
-        super()
-        this.params = params
-    }
-}
-
-export { Method, Task }