@atom.io/template-preact-svg-editor 0.1.0 → 0.1.1

package/src/BezierPlayground.tsx

@@ -1,92 +1,75 @@
+import { useAtomicRef, useO } from "@atom.io/react"
 import type { Loadable } from "atom.io"
-import {
-	atom,
-	atomFamily,
-	getState,
-	resetState,
-	runTransaction,
-	selectorFamily,
-	setState,
-	transaction,
-} from "atom.io"
-import { useAtomicRef, useO } from "atom.io/react"
+import { atom, getState, setState } from "atom.io"
 import type { PointerEventHandler, TargetedPointerEvent, VNode } from "preact"
 import { useCallback, useEffect, useRef } from "preact/hooks"
 
-type PointXY = { x: number; y: number }
-type EdgeXY = { c?: PointXY; s: PointXY }
+import { parsePreactLogo } from "./preact-logo.ts"
+import { materializeSvgOrder } from "./svg-convergence.ts"
+import {
+	activeDragAtom,
+	beginSvgDrag,
+	createSvgGestureClock,
+	finishSvgDrag,
+	pathDrawSelectors,
+	pathOrderAtom,
+	pointerCaptureAtom,
+	type PointXY,
+	previewSvgDrag,
+	projectedEdgeSelectors,
+	projectedNodeSelectors,
+	replaceSvgDrawing,
+	subpathOrderAtoms,
+	type SvgDragTarget,
+	svgElementAtom,
+} from "./svg-editor-state.ts"
 
-const pathKeysAtom = atom<string[]>({
-	key: `pathKeys`,
-	default: [],
-})
-const subpathKeysAtoms = atomFamily<string[], string>({
-	key: `subpathKeys`,
-	default: [],
-})
-const nodeAtoms = atomFamily<PointXY | null, string>({
-	key: `node`,
-	default: null,
-})
-const edgeAtoms = atomFamily<EdgeXY | boolean, string>({
-	key: `edge`,
-	default: true,
-})
-const pathDrawSelectors = selectorFamily<string, string>({
-	key: `pathDraw`,
-	get:
-		(pathKey) =>
-		({ get }) => {
-			const subpathKeys = get(subpathKeysAtoms, pathKey)
-			return subpathKeys
-				.map((subpathKey, idx) => {
-					const node = get(nodeAtoms, subpathKey)
-					const edge = get(edgeAtoms, subpathKey)
+const WIDTH = 256
+const HEIGHT = 296
 
-					if (node === null) {
-						return `Z`
-					}
-					if (idx === 0) {
-						return `M ${node.x} ${node.y}`
-					}
-					if (edge === false) {
-						return `M ${node.x} ${node.y}`
-					}
-					if (edge === true) {
-						return `L ${node.x} ${node.y}`
-					}
-					if (`c` in edge) {
-						return `C ${edge.c.x} ${edge.c.y} ${edge.s.x} ${edge.s.y} ${node.x} ${node.y}`
-					}
-					return `S ${edge.s.x} ${edge.s.y} ${node.x} ${node.y}`
-				})
-				.join(` `)
-		},
-})
+function clamp(number: number, minimum: number, maximum: number): number {
+	return Math.max(minimum, Math.min(maximum, number))
+}
 
-function clamp(n: number, min: number, max: number) {
-	return Math.max(min, Math.min(max, n))
+function logicalPoint(evt: TargetedPointerEvent<SVGSVGElement>): PointXY | null {
+	const svg = getState(svgElementAtom)
+	if (svg === null) return null
+	const point = svg.createSVGPoint()
+	point.x = evt.clientX
+	point.y = evt.clientY
+	const inverse = svg.getScreenCTM()?.inverse()
+	if (inverse === undefined) return null
+	const transformed = point.matrixTransform(inverse)
+	return {
+		x: clamp(transformed.x, -185, WIDTH + 185),
+		y: clamp(transformed.y, -10, HEIGHT + 10),
+	}
 }
 
-function Bezier({
+function ControlHandle({
 	at,
-	subpathKey,
-	prevSubpathKey,
-	node: maybeNode,
+	control,
+	origin,
+	startDrag,
+	subpathId,
 }: {
-	at: PointXY
-	subpathKey: string
-	prevSubpathKey: string
-	node?: PointXY
-}) {
-	const previousNode = useO(nodeAtoms, prevSubpathKey)
-	const node = maybeNode ?? previousNode
-	return node === null ? null : (
+	readonly at: PointXY
+	readonly control: `c` | `s`
+	readonly origin: PointXY | null
+	readonly startDrag: (
+		event: TargetedPointerEvent<SVGCircleElement>,
+		target: SvgDragTarget,
+		point: PointXY,
+	) => void
+	readonly subpathId: string
+}): VNode | null {
+	if (origin === null) return null
+	return (
 		<>
 			<line
 				class="bezier"
-				x1={node.x}
-				y1={node.y}
+				x1={origin.x}
+				y1={origin.y}
 				x2={at.x}
 				y2={at.y}
 				stroke="#777"
@@ -107,12 +90,8 @@ function Bezier({
 				cx={at.x}
 				cy={at.y}
 				r={6}
-				onPointerDown={(evt) => {
-					evt.currentTarget.setPointerCapture(evt.pointerId)
-					setState(currentlyDraggingAtom, {
-						key: subpathKey,
-						by: !maybeNode ? `c` : `s`,
-					})
+				onPointerDown={(event) => {
+					startDrag(event, { control, kind: `edge-control`, subpathId }, at)
 				}}
 			/>
 		</>
@@ -120,35 +99,49 @@ function Bezier({
 }
 
 function Node({
-	subpathKey,
-	nextSubpathKey,
+	previousSubpathId,
+	startDrag,
+	subpathId,
 }: {
-	subpathKey: string
-	nextSubpathKey: string
-}) {
-	const node = useO(nodeAtoms, subpathKey)
-	const edge = useO(edgeAtoms, subpathKey)
-	return node === null ? null : (
+	readonly previousSubpathId: string | null
+	readonly startDrag: (
+		event: TargetedPointerEvent<SVGCircleElement>,
+		target: SvgDragTarget,
+		point: PointXY,
+	) => void
+	readonly subpathId: string
+}): VNode | null {
+	const node = useO(projectedNodeSelectors, subpathId)
+	const edge = useO(projectedEdgeSelectors, subpathId)
+	const previousNode = useO(
+		projectedNodeSelectors,
+		previousSubpathId ?? subpathId,
+	)
+	if (node === null || edge === null || edge.kind === `close`) return null
+	return (
 		<>
-			{typeof edge === `boolean` ? (
-				<rect class="node" x={node.x - 3} y={node.y - 3} width={6} height={6} />
-			) : (
+			{edge.kind === `cubic` ? (
 				<>
-					<Bezier
+					<ControlHandle
 						at={edge.s}
-						node={node}
-						subpathKey={subpathKey}
-						prevSubpathKey={nextSubpathKey}
+						control="s"
+						origin={node}
+						startDrag={startDrag}
+						subpathId={subpathId}
 					/>
-					{edge.c ? (
-						<Bezier
+					{edge.c === undefined ? null : (
+						<ControlHandle
 							at={edge.c}
-							subpathKey={subpathKey}
-							prevSubpathKey={nextSubpathKey}
+							control="c"
+							origin={previousNode}
+							startDrag={startDrag}
+							subpathId={subpathId}
 						/>
-					) : null}
+					)}
 					<circle class="node" cx={node.x} cy={node.y} r={3} />
 				</>
+			) : (
+				<rect class="node" x={node.x - 3} y={node.y - 3} width={6} height={6} />
 			)}
 			<circle
 				class="node-draggable"
@@ -156,254 +149,114 @@ function Node({
 				cx={node.x}
 				cy={node.y}
 				r={10}
-				onPointerDown={(evt) => {
-					evt.currentTarget.setPointerCapture(evt.pointerId)
-					setState(currentlyDraggingAtom, { key: subpathKey })
+				onPointerDown={(event) => {
+					startDrag(event, { kind: `node`, subpathId }, node)
 				}}
 			/>
 		</>
 	)
 }
 
-function RenderedPath({ pathKey }: { pathKey: string }) {
-	const draw = useO(pathDrawSelectors, pathKey)
-	return <path d={`${draw} Z`} class="path" style={{ pointerEvents: `none` }} />
-}
-
-function Path({ pathKey }: { pathKey: string }) {
-	const subpathKeys = useO(subpathKeysAtoms, pathKey)
-	return (
-		<>
-			<RenderedPath pathKey={pathKey} />
-			{subpathKeys.toReversed().map((spk, idx, arr) => (
-				<Node
-					subpathKey={spk}
-					nextSubpathKey={arr[idx + 1] ?? arr[0]}
-					key={spk}
-				/>
-			))}
-		</>
-	)
-}
-
-function PathsDemo() {
-	const pathKeys = useO(pathKeysAtom)
+function Path({
+	pathId,
+	startDrag,
+}: {
+	readonly pathId: string
+	readonly startDrag: (
+		event: TargetedPointerEvent<SVGCircleElement>,
+		target: SvgDragTarget,
+		point: PointXY,
+	) => void
+}): VNode {
+	const draw = useO(pathDrawSelectors, pathId)
+	const subpathOrder = useO(subpathOrderAtoms, pathId)
+	const subpathIds = materializeSvgOrder(subpathOrder).map(({ value }) => value)
 	return (
 		<>
-			{pathKeys.map((pathKey) => {
-				return <Path pathKey={pathKey} key={pathKey} />
+			<path d={draw} class="path" style={{ pointerEvents: `none` }} />
+			{subpathIds.toReversed().map((subpathId, reverseIndex) => {
+				const index = subpathIds.length - reverseIndex - 1
+				return (
+					<Node
+						key={subpathId}
+						previousSubpathId={subpathIds[index - 1] ?? null}
+						startDrag={startDrag}
+						subpathId={subpathId}
+					/>
+				)
 			})}
 		</>
 	)
 }
 
-const svgRefAtom = atom<SVGSVGElement | null>({
-	key: `svgRef`,
-	default: null,
-})
-const currentlyDraggingAtom = atom<{ key: string; by?: `c` | `s` } | null>({
-	key: `currentlyDragging`,
-	default: null,
-})
-
-function onPointerMove(evt: TargetedPointerEvent<SVGSVGElement>): void {
-	evt.preventDefault()
-	const { key: currentlyDragging, by: draggingBy } =
-		getState(currentlyDraggingAtom) ?? {}
-	const svg = getState(svgRefAtom)
-	if (!svg || !currentlyDragging) {
-		return
-	}
-	const pt = svg.createSVGPoint()
-	pt.x = evt.clientX
-	pt.y = evt.clientY
-	const ctm = svg.getScreenCTM()?.inverse()
-	const { x, y } = pt.matrixTransform(ctm)
-
-	switch (draggingBy) {
-		case undefined:
-			setState(nodeAtoms, currentlyDragging, {
-				x: clamp(x, -185, WIDTH + 185),
-				y: clamp(y, -10, HEIGHT + 10),
-			})
-			break
-		case `s`:
-			setState(edgeAtoms, currentlyDragging, (prev) => ({
-				...(prev as EdgeXY),
-				s: { x: clamp(x, -185, WIDTH + 185), y: clamp(y, -10, HEIGHT + 10) },
-			}))
-			break
-		case `c`:
-			setState(edgeAtoms, currentlyDragging, (prev) => ({
-				...(prev as EdgeXY),
-				c: { x: clamp(x, -185, WIDTH + 185), y: clamp(y, -10, HEIGHT + 10) },
-			}))
-			break
-	}
-}
-
-const CODES = [`m`, `M`, `l`, `L`, `c`, `C`, `v`, `V`, `z`, `Z`] as const
-
 const preactLogoAtom = atom<Loadable<string>>({
 	key: `preactLogo`,
-	default: () => fetch(`preact.svg`).then((res) => res.text()),
+	default: () => fetch(`preact.svg`).then((response) => response.text()),
 })
 
-const resetTransaction = transaction<() => Promise<void>>({
-	key: `reset`,
-	do: async () => {
-		const logo = await getState(preactLogoAtom)
-		for (const pathKey of getState(pathKeysAtom)) {
-			resetState(subpathKeysAtoms, pathKey)
-		}
-		resetState(pathKeysAtom)
-
-		const shapes = logo
-			.split(`\n`)
-			.filter((line) => line.startsWith(`\t<path`))
-			.map((line) => {
-				const raw = line.split(`d="`)[1].slice(0, -9)
-
-				type Letter = (typeof CODES)[number]
-				let letter: Letter | undefined
-				let number = ``
-				let numbers: number[] = []
-
-				const instructions: { letter: Letter; numbers: number[] }[] = []
-				for (const c of raw) {
-					if (CODES.includes(c as Letter)) {
-						if (number) {
-							numbers.push(Number.parseFloat(number))
-							number = ``
-						}
-						if (letter) {
-							instructions.push({ letter, numbers })
-						}
-						letter = c as Letter
-						numbers = []
-						continue
-					}
-					if (c === ` `) {
-						numbers.push(Number.parseFloat(number))
-						number = ``
-						continue
-					}
-					if (c === `-` && number) {
-						numbers.push(Number.parseFloat(number))
-						number = `-`
-						continue
-					}
-
-					number += c
-				}
-
-				let prev: PointXY = { x: 0, y: 0 }
-				const edgeNodes = instructions.map<{
-					node: PointXY | null
-					edge: boolean | { c?: PointXY; s: PointXY }
-				}>(({ letter: l, numbers: ns }) => {
-					let node: PointXY | null
-					let edge: boolean | { c?: PointXY; s: PointXY }
-					switch (l) {
-						case `m`:
-							node = { x: prev.x + ns[0], y: prev.y + ns[1] }
-							edge = false
-							break
-						case `M`:
-							node = { x: ns[0], y: ns[1] }
-							edge = false
-							break
-						case `l`:
-							node = { x: prev.x + ns[0], y: prev.y + ns[1] }
-							edge = true
-							break
-						case `L`:
-							node = { x: ns[0], y: ns[1] }
-							edge = true
-							break
-						case `c`:
-							node = { x: prev.x + ns[4], y: prev.y + ns[5] }
-							edge = {
-								c: { x: prev.x + ns[0], y: prev.y + ns[1] },
-								s: { x: prev.x + ns[2], y: prev.y + ns[3] },
-							}
-							break
-						case `C`:
-							node = { x: ns[4], y: ns[5] }
-							edge = {
-								c: { x: ns[0], y: ns[1] },
-								s: { x: ns[2], y: ns[3] },
-							}
-							break
-						case `v`:
-							node = { x: prev.x, y: prev.y + ns[0] }
-							edge = true
-							break
-						case `V`:
-							node = { x: prev.x, y: ns[0] }
-							edge = true
-							break
-						case `z`:
-						case `Z`:
-							node = null
-							edge = true
-					}
-					if (node) {
-						prev = node
-					}
-
-					return { node, edge }
-				})
+export default function BezierPlayground(): VNode {
+	const svgRef = useAtomicRef(svgElementAtom, useRef)
+	const pathOrder = useO(pathOrderAtom)
+	const gestureClock = useRef(
+		createSvgGestureClock({
+			actor: `local-designer`,
+			session: globalThis.crypto.randomUUID(),
+		}),
+	)
 
-				return edgeNodes
+	const startDrag = useCallback(
+		(
+			event: TargetedPointerEvent<SVGCircleElement>,
+			target: SvgDragTarget,
+			point: PointXY,
+		) => {
+			event.currentTarget.setPointerCapture(event.pointerId)
+			beginSvgDrag({
+				element: event.currentTarget,
+				gesture: gestureClock.current.begin(),
+				point,
+				pointerId: event.pointerId,
+				target,
 			})
+		},
+		[],
+	)
 
-		let i = 0
-		let j = 0
-		for (const shape of shapes) {
-			const jj = j
-			for (const { node, edge } of shape) {
-				setState(edgeAtoms, `subpath${j}`, edge)
-				setState(nodeAtoms, `subpath${j}`, node)
-				j++
-			}
-			const numberOfNodes = j - jj
-			setState(
-				subpathKeysAtoms,
-				`path${i}`,
-				Array.from(
-					{ length: numberOfNodes },
-					(_, nodeNum) => `subpath${jj + nodeNum}`,
-				),
-			)
-			setState(pathKeysAtom, (prev) => [...prev, `path${i}`])
-			i++
+	const onPointerMove: PointerEventHandler<SVGSVGElement> = useCallback(
+		(event) => {
+			if (getState(activeDragAtom) === null) return
+			event.preventDefault()
+			const point = logicalPoint(event)
+			if (point !== null) previewSvgDrag(point)
+		},
+		[],
+	)
+
+	const finishPointer = useCallback((commit: boolean) => {
+		const capture = getState(pointerCaptureAtom)
+		if (capture?.element.hasPointerCapture(capture.pointerId) === true) {
+			capture.element.releasePointerCapture(capture.pointerId)
 		}
-	},
-})
-const reset = runTransaction(resetTransaction)
+		finishSvgDrag({ commit })
+	}, [])
 
-const WIDTH = 256
-const HEIGHT = 296
-export default function BezierPlayground(): VNode {
-	const svgRef = useAtomicRef(svgRefAtom, useRef)
-	const onPointerUp: PointerEventHandler<SVGSVGElement> = useCallback((evt) => {
-		evt.currentTarget.releasePointerCapture(evt.pointerId)
-		setState(currentlyDraggingAtom, null)
+	const reset = useCallback(async () => {
+		const svg = await getState(preactLogoAtom)
+		replaceSvgDrawing(parsePreactLogo(svg), gestureClock.current.begin())
 	}, [])
 
-	useEffect(() => void reset(), [])
+	useEffect(() => void reset(), [reset])
 
 	return (
 		<div
 			style={{
+				alignItems: `center`,
 				display: `flex`,
 				flexFlow: `column`,
-				position: `relative`,
-				overflow: `hidden`,
 				maxWidth: `1280px`,
+				overflow: `hidden`,
+				position: `relative`,
 				width: `100vw`,
-				alignItems: `center`,
 			}}
 		>
 			<svg
@@ -412,8 +265,12 @@ export default function BezierPlayground(): VNode {
 				width={1000}
 				height={500}
 				onPointerMove={onPointerMove}
-				onPointerUp={onPointerUp}
-				onPointerCancel={onPointerUp}
+				onPointerUp={() => {
+					finishPointer(true)
+				}}
+				onPointerCancel={() => {
+					finishPointer(false)
+				}}
 			>
 				<title>Bezier Playground</title>
 				<defs>
@@ -429,7 +286,9 @@ export default function BezierPlayground(): VNode {
 					height={HEIGHT + 20}
 					fill="url(#grid)"
 				/>
-				<PathsDemo />
+				{materializeSvgOrder(pathOrder).map(({ value: pathId }) => (
+					<Path pathId={pathId} startDrag={startDrag} key={pathId} />
+				))}
 			</svg>
 			<button type="button" class="flat" onClick={reset}>
 				Reset