wip: omni-text (ui for adding text on canvas)

s/components/omni-text/component.ts

@@ -0,0 +1,87 @@
+import {html} from "@benev/slate"
+
+import {styles} from "./styles.js"
+import {shadow_component} from "../../context/slate.js"
+import boldSvg from "../../icons/remix-icon/bold.svg.js"
+import italicSvg from "../../icons/remix-icon/italic.svg.js"
+import alignLeftSvg from "../../icons/remix-icon/align-left.svg.js"
+import alignRightSvg from "../../icons/remix-icon/align-right.svg.js"
+import alignCenterSvg from "../../icons/remix-icon/align-center.svg.js"
+import {Font, FontStyle, TextAlign, TextEffectProps} from "../../context/controllers/timeline/types.js"
+
+export const OmniText = shadow_component({styles}, use => {
+	use.watch(() => use.context.state.timeline)
+	const actions = use.context.actions
+	const {canvas, ctx} = use.context.controllers.compositor
+	const selected_effect = use.context.state.timeline.selected_effect?.kind === "text"
+		? use.context.state.timeline.selected_effect
+		: null
+
+	const [
+		text,
+		setTextEffectProps
+	] = use.state<TextEffectProps>({
+		size: selected_effect?.size ?? 38,
+		content: selected_effect?.content ?? "example",
+		style: selected_effect?.style ?? "normal",
+		font: selected_effect?.font ?? "Lato",
+		color: selected_effect?.color ?? "blue",
+		align: selected_effect?.align ?? "center",
+		rect: {
+			position_on_canvas: {
+				x: canvas.width/2,
+				y: canvas.height/2,
+			},
+			width: measure_text_width(),
+			height: measure_text_height(),
+			rotation: 0
+		}
+	})
+
+	function measure_text_width () {
+		ctx!.font = `${selected_effect?.size ?? 38}px ${selected_effect?.font ?? "Lato"}`;
+		ctx!.fillStyle = selected_effect?.color ?? "blue";
+		return ctx?.measureText(selected_effect?.content ?? "example").width!
+	}
+
+	function measure_text_height() {
+		return ctx?.measureText(selected_effect?.content ?? "example").actualBoundingBoxAscent! + ctx?.measureText(selected_effect?.content ?? "example").actualBoundingBoxDescent!
+	}
+
+	const set_font = (e: Event) => setTextEffectProps({...text, font: (e.target! as HTMLSelectElement).value as Font})
+	const set_font_size = (e: InputEvent) => setTextEffectProps({...text, size: +(e.target as HTMLInputElement).value})
+	const set_font_style = (style: FontStyle) => setTextEffectProps({...text, style: text.style === style ? "normal" : style})
+	const set_text_align = (align: TextAlign) => setTextEffectProps({...text, align})
+
+	return html`
+		<div class="text-selector">
+			<label for="font-select">Font</label>
+			<div class="flex-hover">
+				<select @change=${set_font} name="fonts" id="font-select">
+					<option value="Arial">Arial</option>
+				</select>
+				<input @change=${set_font_size} class="font-size" value=${text.size} />
+			</div>
+			<div class=flex-hover>
+				<div ?data-selected=${text.style === "bold"} @click=${() => set_font_style("bold")} class="bold">${boldSvg}</div>
+				<div ?data-selected=${text.style === "italic"} @click=${() => set_font_style("italic")} class="italic">${italicSvg}</div>
+			</div>
+			<div class=flex-hover>
+				<div ?data-selected=${text.align === "left"} @click=${() => set_text_align("left")} class="align">${alignLeftSvg}</div>
+				<div ?data-selected=${text.align === "center"} @click=${() => set_text_align("center")} class="align">${alignCenterSvg}</div>
+				<div ?data-selected=${text.align === "right"} @click=${() => set_text_align("right")} class="align">${alignRightSvg}</div>
+			</div>
+			<div class="color-picker flex"><span>${text.color}</span><div class="picker"></div></div>
+			${selected_effect
+			? html`
+				<button class="add-text" @click=${() => {
+					actions.timeline_actions.update_text_effect(text, selected_effect.id)
+					use.context.controllers.compositor.set_currently_played_effects(use.context.state.timeline)
+					use.context.controllers.compositor.draw_effects(true)
+				}}>
+					Update text
+				</button>`
+			: html`<button class="add-text" @click=${() => actions.timeline_actions.add_text_effect(text)}>Add text</button>`}
+		</div>
+	`
+})

s/components/omni-text/panel.ts

@@ -0,0 +1,14 @@
+import {svg, html} from "@benev/slate"
+import {standard_panel_styles as styles, panel} from "@benev/construct"
+
+import {shadow_view} from "../../context/slate.js"
+
+export const TextPanel = panel({
+	label: "text",
+	icon: svg``,
+	view: shadow_view({name: "text", styles}, _use => ({}: any) => {
+		return html`
+			<omni-text></omni-text>
+		`
+	}),
+})

s/components/omni-text/styles.ts

@@ -0,0 +1,103 @@
+import {css} from "@benev/slate"
+
+export const styles = css`
+	:host {}
+
+	.text-selector {
+		display: flex;
+		flex-direction: column;
+		gap: 0.3em;
+		padding: 0.3em;
+		
+		& [data-selected] {
+			background: rgb(32, 31, 31);
+		}
+		
+		& .flex-column {
+			display: flex;
+			flex-direction: column;
+			gap: 0.3em;
+		}
+
+		& .flex {
+			display: flex;
+			align-items: center;
+		}
+
+		& .flex-hover {
+			display: flex;
+			gap: 0.3em;
+
+			& > * {
+				display: flex;
+				padding: 0.2em;
+				border-radius: 5px;
+				cursor: pointer;
+
+				&:hover {
+					outline: 1px solid #FFFFFF88;
+				}
+
+			}
+		}
+
+		& label {
+			font-weight: bold;
+		}
+
+		& select {
+			background: rgb(32, 31, 31);
+			border: none;
+			padding: 0.5em;
+			border-radius: 5px;
+			color: inherit;
+			width: 80%;
+			cursor: pointer;
+		}
+
+		& svg {
+			padding: 0.2em;
+			width: 30px;
+			height: 30px;
+		}
+
+		& .font-size {
+			background: rgb(32, 31, 31);
+			border: none;
+			border-radius: 5px;
+			padding: 0.5em;
+			color: inherit;
+			width: 20%;
+			text-align: center;
+		}
+
+		& .add-text {
+			padding: 0.5em;
+			background: rgb(32, 31, 31);
+			margin-top: 1em;
+			cursor: pointer;
+			transition: all 0.3s ease;
+			font-weight: bold;
+
+			&:hover {
+				opacity: 0.7;
+				color: white;
+			}
+		}
+
+		& .color-picker {
+			display: flex;
+			gap: 0.5em;
+			& span {
+				font-weight: bold;
+			}
+			& .picker {
+				width: 40px;
+				height: 40px;
+				border: 1px solid gray;
+				border-radius: 5px;
+				background: blue;
+			}
+		}
+	}
+`