From c48d4da4fb4e1616fa2ca59427ef793103cfd657 Mon Sep 17 00:00:00 2001
From: Przemek Galezki <przemekgg2002@gmail.com>
Date: Wed, 10 Jan 2024 22:20:56 +0100
Subject: [PATCH] add: ui to rotate text

---
 s/views/text-positioner/styles.ts |  8 +++++++
 s/views/text-positioner/view.ts   | 35 +++++++++++++++++++++++++++++++
 2 files changed, 43 insertions(+)
 create mode 100644 s/views/text-positioner/styles.ts
 create mode 100644 s/views/text-positioner/view.ts

diff --git a/s/views/text-positioner/styles.ts b/s/views/text-positioner/styles.ts
new file mode 100644
index 0000000..f22c26a
--- /dev/null
+++ b/s/views/text-positioner/styles.ts
@@ -0,0 +1,8 @@
+import {css} from "@benev/slate"
+
+export const styles = css`
+	.text-rect {
+		z-index: 999;
+		outline: 1px solid white;
+	}
+`
diff --git a/s/views/text-positioner/view.ts b/s/views/text-positioner/view.ts
new file mode 100644
index 0000000..57154fd
--- /dev/null
+++ b/s/views/text-positioner/view.ts
@@ -0,0 +1,35 @@
+import {html} from "@benev/slate"
+
+import {styles} from "./styles.js"
+import {shadow_view} from "../../context/slate.js"
+
+export const TextPositioner = shadow_view({styles}, use => () => {
+	use.watch(() => use.context.state.timeline)
+	const {canvas} = use.context.controllers.compositor
+	const compositor = use.context.controllers.compositor
+	const selected_effect = use.context.state.timeline.selected_effect?.kind === "text"
+		? use.context.state.timeline.selected_effect
+		: null
+
+	// scaling to screen coords/sizes
+	const canvas_rect = canvas.getBoundingClientRect()
+	const scaleX = canvas.width / canvas_rect.width
+	const scaleY = canvas.height / canvas_rect.height
+
+	return html`
+		${selected_effect
+		? html`
+			<div
+			style="
+				width: ${selected_effect?.rect?.width / scaleX}px;
+				height: ${selected_effect?.rect.height / scaleY}px;
+				position: absolute;
+				left: ${selected_effect.rect.position_on_canvas.x / scaleX}px;
+				transform: rotate(${compositor.TextManager.rotate}rad);
+				top: ${(selected_effect.rect.position_on_canvas.y - selected_effect.rect.height) / scaleY}px;
+			" class="text-rect">
+			</div>
+		`
+		: null}
+	`
+})