@omnimedia/omnitool 1.1.0-70 → 1.1.0-72

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@omnimedia/omnitool",
-	"version": "1.1.0-70",
+	"version": "1.1.0-72",
 	"description": "open source video processing tools",
 	"license": "MIT",
 	"author": "Przemysław Gałęzki",

package/s/driver/parts/compositor.ts

@@ -1,3 +1,5 @@
+
+import {pub} from "@e280/stz"
 import {autoDetectRenderer, Container, Renderer, Sprite, Text, Texture} from "pixi.js"
 
 import {Id} from "../../timeline/index.js"
@@ -6,6 +8,8 @@ import {Mat6, mat6ToMatrix} from "../../timeline/utils/matrix.js"
 import {makeTransition} from "../../features/transition/transition.js"
 
 export class Compositor {
+	onPointerDown = pub<[{id: Id, object: Container}]>()
+	onPointerUp = pub<[{id: Id, object: Container}]>()
 
 	static async setup() {
 		const renderer = await autoDetectRenderer({
@@ -24,7 +28,7 @@ export class Compositor {
 
 	#transitions: Map<string, ReturnType<typeof makeTransition>> = new Map()
 	// objects rendered for current Composition
-	#activeObjects = new Map<number, Container>()
+	#activeObjects = new Map<number, {sprite: Container, dispose: () => void}>()
 
 	async composite(
 		composition: Composition,
@@ -51,7 +55,7 @@ export class Compositor {
 	 * get object for current Composition
 	 * */
 	getActiveObject(id: Id) {
-		return this.#activeObjects.get(id)
+		return this.#activeObjects.get(id)?.sprite
 	}
 
 	async #renderLayer(
@@ -89,9 +93,9 @@ export class Compositor {
 		layer: Extract<Layer, {kind: 'text'}>,
 		parent: Container,
 	) {
-		const text = this.#findOrCreate<Text>(layer)!
-		this.#applyTransform(text, layer.matrix)
-		parent.addChild(text)
+		const sprite = this.#findOrCreate<Text>(layer)!
+		this.#applyTransform(sprite, layer.matrix)
+		parent.addChild(sprite)
 		return {
 			dispose: () => {}
 		}
@@ -146,20 +150,44 @@ export class Compositor {
 						text: layer.content,
 						style: layer.style
 					})
-					text.onmouseenter = () => console.log("enter text")
+					text.eventMode = "static"
+					const down = () => this.onPointerDown.publish({id: layer.id, object: text})
+					const up = () => this.onPointerUp.publish({id: layer.id, object: text})
+
+					text.on("pointerdown", down)
+					text.on("pointerup", up)
+
 					return this.#activeObjects
-						.set(layer.id, text)
-						.get(layer.id) as T
+						.set(layer.id, {
+							sprite: text,
+							dispose() {
+								text.off("pointerdown", down)
+								text.off("pointerup", up)
+							}
+						})
+						.get(layer.id)?.sprite as T
 				}
 				case 'image': {
 					const sprite = new Sprite()
-					sprite.onmouseenter = () => console.log("enter")
+					sprite.eventMode = "static"
+					const down = () => this.onPointerDown.publish({id: layer.id, object: sprite})
+					const up = () => this.onPointerUp.publish({id: layer.id, object: sprite})
+
+					sprite.on("pointerdown", down)
+					sprite.on("pointerup", up)
+
 					return this.#activeObjects
-						.set(layer.id, sprite)
-						.get(layer.id) as T
+						.set(layer.id, {
+							sprite,
+							dispose() {
+								sprite.off("pointerdown", down)
+								sprite.off("pointerup", up)
+							}
+						})
+						.get(layer.id)?.sprite as T
 				}
 			}
-		} else return object as T
+		} else return object.sprite as T
 	}
 
 	#collectIds(layers: Layer | Composition): Set<number> {
@@ -178,10 +206,12 @@ export class Compositor {
 	#cleanup(activeIds: Set<number>) {
 		for (const id of this.#activeObjects.keys()) {
 			if (!activeIds.has(id)) {
-				const obj = this.#activeObjects.get(id)!
-				obj.destroy(true)
+				const {sprite, dispose} = this.#activeObjects.get(id)!
+				sprite.destroy(true)
+				dispose()
 				this.#activeObjects.delete(id)
 			}
 		}
 	}
 }
+