@omnimedia/omnitool 1.1.0-73 → 1.1.0-74

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@omnimedia/omnitool",
-	"version": "1.1.0-73",
+	"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({
@@ -156,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)
@@ -165,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)
 							}
@@ -175,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)
@@ -184,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)
 							}

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]