@omnimedia/omnitool 1.1.0-72 → 1.1.0-74

package/package.json

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

package/s/driver/parts/compositor.ts

@@ -1,6 +1,6 @@
 
 import {pub} from "@e280/stz"
-import {autoDetectRenderer, Container, Renderer, Sprite, Text, Texture} from "pixi.js"
+import {autoDetectRenderer, Container, FederatedPointerEvent, Renderer, Sprite, Text, Texture} from "pixi.js"
 
 import {Id} from "../../timeline/index.js"
 import {Composition, Layer} from "../fns/schematic.js"
@@ -8,8 +8,9 @@ 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}]>()
+	onPointerDown = pub<[{event: FederatedPointerEvent, id: Id, object: Container}]>()
+	onPointerUp = pub<[{event: FederatedPointerEvent, id: Id, object: Container}]>()
+	onDispose = pub<[{id: Id, object: Container}]>()
 
 	static async setup() {
 		const renderer = await autoDetectRenderer({
@@ -105,14 +106,19 @@ export class Compositor {
 		layer: Extract<Layer, {kind: 'image'}>,
 		parent: Container,
 	) {
-		const texture = Texture.from(layer.frame)
 		const sprite = this.#findOrCreate<Sprite>(layer)!
+
+		if (sprite.texture && sprite.texture !== Texture.EMPTY) {
+			sprite.texture.destroy(true)
+		}
+
+		const texture = Texture.from(layer.frame)
 		sprite.texture = texture
 		this.#applyTransform(sprite, layer.matrix)
 		parent.addChild(sprite)
+
 		return {
 			dispose: () => {
-				texture.destroy(true)
 				layer.frame.close()
 			}
 		}
@@ -151,8 +157,8 @@ export class Compositor {
 						style: layer.style
 					})
 					text.eventMode = "static"
-					const down = () => this.onPointerDown.publish({id: layer.id, object: text})
-					const up = () => this.onPointerUp.publish({id: layer.id, object: text})
+					const down = (event: FederatedPointerEvent) => this.onPointerDown.publish({event, id: layer.id, object: text})
+					const up = (event: FederatedPointerEvent) => this.onPointerUp.publish({event, id: layer.id, object: text})
 
 					text.on("pointerdown", down)
 					text.on("pointerup", up)
@@ -160,7 +166,8 @@ export class Compositor {
 					return this.#activeObjects
 						.set(layer.id, {
 							sprite: text,
-							dispose() {
+							dispose: () => {
+								this.onDispose.publish({id: layer.id, object: text})
 								text.off("pointerdown", down)
 								text.off("pointerup", up)
 							}
@@ -170,8 +177,8 @@ export class Compositor {
 				case 'image': {
 					const sprite = new Sprite()
 					sprite.eventMode = "static"
-					const down = () => this.onPointerDown.publish({id: layer.id, object: sprite})
-					const up = () => this.onPointerUp.publish({id: layer.id, object: sprite})
+					const down = (event: FederatedPointerEvent) => this.onPointerDown.publish({event, id: layer.id, object: sprite})
+					const up = (event: FederatedPointerEvent) => this.onPointerUp.publish({event, id: layer.id, object: sprite})
 
 					sprite.on("pointerdown", down)
 					sprite.on("pointerup", up)
@@ -179,7 +186,8 @@ export class Compositor {
 					return this.#activeObjects
 						.set(layer.id, {
 							sprite,
-							dispose() {
+							dispose: () => {
+								this.onDispose.publish({id: layer.id, object: sprite})
 								sprite.off("pointerdown", down)
 								sprite.off("pointerup", up)
 							}
@@ -207,8 +215,8 @@ export class Compositor {
 		for (const id of this.#activeObjects.keys()) {
 			if (!activeIds.has(id)) {
 				const {sprite, dispose} = this.#activeObjects.get(id)!
-				sprite.destroy(true)
 				dispose()
+				sprite.destroy(true)
 				this.#activeObjects.delete(id)
 			}
 		}

package/s/timeline/utils/matrix.ts

@@ -29,5 +29,26 @@ export const mul6 = (local: Mat6, parent: Mat6): Mat6 => {
 	]
 }
 
+export const mat6ToTransform = (mat: Mat6Obj): Transform => {
+	const scaleX = Math.hypot(mat.a, mat.b)
+	const scaleY = Math.hypot(mat.c, mat.d)
+	const rotation = Math.atan2(mat.b, mat.a) * (180 / Math.PI)
+
+	return [
+		[mat.tx, mat.ty],
+		[scaleX, scaleY],
+		rotation,
+	]
+}
+
+export interface Mat6Obj {
+	a: number
+	b: number
+	c: number
+	d: number
+	tx: number
+	ty: number
+}
+
 export const I6: Mat6 = [1, 0, 0, 1, 0, 0]
 export type Mat6 = [a: number, b: number, c: number, d: number, tx: number, ty: number]