create-atom.io 0.0.2 → 0.0.4

package/templates/preact-svg-editor/src/BezierPlayground.tsx

@@ -1,458 +0,0 @@
-import type { Loadable, RegularAtomToken } from "atom.io"
-import {
-	atom,
-	atomFamily,
-	getState,
-	resetState,
-	runTransaction,
-	selectorFamily,
-	setState,
-	transaction,
-} from "atom.io"
-import { useO } from "atom.io/react"
-import type { PointerEventHandler, TargetedPointerEvent, VNode } from "preact"
-import type { MutableRef } from "preact/hooks"
-import { useCallback, useEffect, useRef } from "preact/hooks"
-
-type PointXY = { x: number; y: number }
-type EdgeXY = { c?: PointXY; s: PointXY }
-
-const pathKeysAtom = atom<string[]>({
-	key: `pathKeys`,
-	default: [],
-})
-const subpathKeysAtoms = atomFamily<string[], string>({
-	key: `subpathKeys`,
-	default: [],
-})
-const nodeAtoms = atomFamily<PointXY | null, string>({
-	key: `nodeAtoms`,
-	default: null,
-})
-const edgeAtoms = atomFamily<EdgeXY | boolean, string>({
-	key: `edgeAtoms`,
-	default: true,
-})
-const pathDrawSelectors = selectorFamily<string, string>({
-	key: `pathDrawSelectors`,
-	get:
-		(pathKey) =>
-		({ get }) => {
-			const subpathKeys = get(subpathKeysAtoms, pathKey)
-			return subpathKeys
-				.map((subpathKey, idx) => {
-					const node = get(nodeAtoms, subpathKey)
-					const edge = get(edgeAtoms, subpathKey)
-
-					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(` `)
-		},
-})
-
-export function useAtomicRef<T>(
-	token: RegularAtomToken<T | null>,
-): MutableRef<T | null> {
-	const ref = useRef<T | null>(null)
-	useEffect(() => {
-		setState(token, ref.current)
-	}, [token])
-	return ref
-}
-
-function clamp(n: number, min: number, max: number) {
-	return Math.max(min, Math.min(max, n))
-}
-
-function Bezier({
-	at,
-	subpathKey,
-	prevSubpathKey,
-	node: maybeNode,
-}: {
-	at: PointXY
-	subpathKey: string
-	prevSubpathKey: string
-	node?: PointXY
-}) {
-	let node: PointXY | null
-	// eslint-disable-next-line @typescript-eslint/switch-exhaustiveness-check
-	switch (typeof maybeNode) {
-		case `undefined`:
-			// eslint-disable-next-line react-hooks/rules-of-hooks
-			node = useO(nodeAtoms, prevSubpathKey)
-			break
-		default:
-			node = maybeNode
-	}
-	return node === null ? null : (
-		<>
-			<line
-				class="bezier"
-				x1={node.x}
-				y1={node.y}
-				x2={at.x}
-				y2={at.y}
-				stroke="#777"
-				stroke-width={1}
-			/>
-			<circle
-				class="bezier"
-				fill="#777"
-				stroke="#aaa"
-				stroke-width={1}
-				cx={at.x}
-				cy={at.y}
-				r={2}
-			/>
-			<circle
-				class="bezier-draggable"
-				fill="transparent"
-				cx={at.x}
-				cy={at.y}
-				r={6}
-				onPointerDown={(evt) => {
-					evt.currentTarget.setPointerCapture(evt.pointerId)
-					setState(currentlyDraggingAtom, {
-						key: subpathKey,
-						by: !maybeNode ? `c` : `s`,
-					})
-				}}
-			/>
-		</>
-	)
-}
-
-function Node({
-	subpathKey,
-	nextSubpathKey,
-}: {
-	subpathKey: string
-	nextSubpathKey: string
-}) {
-	const node = useO(nodeAtoms, subpathKey)
-	const edge = useO(edgeAtoms, subpathKey)
-	return node === null ? null : (
-		<>
-			{typeof edge === `boolean` ? (
-				<rect class="node" x={node.x - 3} y={node.y - 3} width={6} height={6} />
-			) : (
-				<>
-					<Bezier
-						at={edge.s}
-						node={node}
-						subpathKey={subpathKey}
-						prevSubpathKey={nextSubpathKey}
-					/>
-					{edge.c ? (
-						<Bezier
-							at={edge.c}
-							subpathKey={subpathKey}
-							prevSubpathKey={nextSubpathKey}
-						/>
-					) : null}
-					<circle class="node" cx={node.x} cy={node.y} r={3} />
-				</>
-			)}
-			<circle
-				class="node-draggable"
-				fill="transparent"
-				cx={node.x}
-				cy={node.y}
-				r={10}
-				onPointerDown={(evt) => {
-					evt.currentTarget.setPointerCapture(evt.pointerId)
-					setState(currentlyDraggingAtom, { key: subpathKey })
-				}}
-			/>
-		</>
-	)
-}
-
-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)
-	return (
-		<>
-			{pathKeys.map((pathKey) => {
-				return <Path pathKey={pathKey} key={pathKey} />
-			})}
-		</>
-	)
-}
-
-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()),
-})
-
-const resetTX = 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 }
-				})
-
-				return edgeNodes
-			})
-
-		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 reset = runTransaction(resetTX)
-
-const WIDTH = 256
-const HEIGHT = 296
-export default function BezierPlayground(): VNode {
-	const svgRef = useAtomicRef(svgRefAtom)
-	const onPointerUp: PointerEventHandler<SVGSVGElement> = useCallback((evt) => {
-		evt.currentTarget.releasePointerCapture(evt.pointerId)
-		setState(currentlyDraggingAtom, null)
-	}, [])
-
-	useEffect(() => void reset(), [])
-
-	return (
-		<div
-			style={{
-				display: `flex`,
-				flexFlow: `column`,
-				position: `relative`,
-				overflow: `hidden`,
-				maxWidth: `1280px`,
-				width: `100vw`,
-				alignItems: `center`,
-			}}
-		>
-			<svg
-				ref={svgRef}
-				viewBox={`-185 -15 ${WIDTH + 370} ${HEIGHT + 30}`}
-				width={1000}
-				height={500}
-				onPointerMove={onPointerMove}
-				onPointerUp={onPointerUp}
-				onPointerCancel={onPointerUp}
-			>
-				<title>Bezier Playground</title>
-				<defs>
-					<pattern id="grid" width="5" height="5" patternUnits="userSpaceOnUse">
-						<rect x="0" y="0" width=".5" height=".5" fill="none" stroke="#aaa" />
-					</pattern>
-				</defs>
-				<rect x={0} y={0} width={WIDTH} height={HEIGHT} fill="#aaa3" />
-				<rect
-					x={-185}
-					y={-10}
-					width={WIDTH + 370}
-					height={HEIGHT + 20}
-					fill="url(#grid)"
-				/>
-				<PathsDemo />
-			</svg>
-			<button type="button" class="flat" onClick={reset}>
-				Reset
-			</button>
-		</div>
-	)
-}

package/templates/preact-svg-editor/src/index.tsx

@@ -1,50 +0,0 @@
-import "./style.css"
-
-import type { VNode } from "preact"
-import { render } from "preact"
-
-import BezierPlayground from "./BezierPlayground.tsx"
-
-export function App(): VNode {
-	return (
-		<>
-			<h1>Atom.io in Preact on Vite</h1>
-			<main>
-				<BezierPlayground />
-				<article>
-					<Resource
-						title="Learn Atom.io"
-						description="Atom.io is where data lives."
-						href="https://atom.io.fyi/docs/getting-started"
-					/>
-					<Resource
-						title="Learn Preact"
-						description="If you're new to Preact, try the interactive tutorial to learn important concepts"
-						href="https://preactjs.com/tutorial"
-					/>
-					<Resource
-						title="Learn Vite"
-						description="To learn more about Vite and how you can customize it to fit your needs, take a look at their excellent documentation"
-						href="https://vitejs.dev"
-					/>
-				</article>
-			</main>
-		</>
-	)
-}
-
-type ResourceProps = {
-	title: string
-	description: string
-	href: string
-}
-function Resource(props: ResourceProps) {
-	return (
-		<a href={props.href} target="_blank" class="resource" rel="noreferrer">
-			<h2>{props.title}</h2>
-			<p>{props.description}</p>
-		</a>
-	)
-}
-
-render(<App />, document.getElementById(`app`)!)

package/templates/preact-svg-editor/src/msg.md

@@ -1,105 +0,0 @@
-Great question — the `d` attribute in an SVG `<path>` element is one of the most powerful but also most cryptic parts of SVG. It defines the shape of the path by listing a series of **commands** and **parameters**. Let’s break it down step by step so you can confidently read (and write) it.
-
----
-
-## 🧭 1. What the `d` Attribute Is
-
-The `d` attribute contains **a mini language** consisting of:
-
-- Single-letter commands (e.g. `M`, `L`, `C`, `Z`)
-- A series of numbers following those commands (coordinates or parameters)
-- Optional spaces and commas
-
-For example:
-
-```svg
-<path d="M10 10 L50 50 L90 10 Z" />
-```
-
-This draws a triangle:
-
-1. Move to `(10,10)`
-2. Draw a line to `(50,50)`
-3. Draw a line to `(90,10)`
-4. Close the shape
-
----
-
-## ✍️ 2. Absolute vs Relative Commands
-
-Each command can be:
-
-- **Uppercase** → Absolute coordinates
-- **Lowercase** → Relative coordinates (relative to the current point)
-
-Example:
-
-```svg
-M 100 100   // Move to (100,100)
-l 50 0      // Draw line relative +50 in x, +0 in y → ends at (150,100)
-```
-
----
-
-## 🧱 3. Common Path Commands
-
-| Command   | Name                | Parameters                                          | What it does                                             |
-| --------- | ------------------- | --------------------------------------------------- | -------------------------------------------------------- |
-| `M` / `m` | moveto              | x y                                                 | Moves the “pen” to a new position without drawing        |
-| `L` / `l` | lineto              | x y                                                 | Draws a straight line from current point to new point    |
-| `H` / `h` | horizontal lineto   | x                                                   | Line horizontally (only x changes)                       |
-| `V` / `v` | vertical lineto     | y                                                   | Line vertically (only y changes)                         |
-| `C` / `c` | cubic Bézier curve  | x1 y1 x2 y2 x y                                     | Curve with 2 control points and an endpoint              |
-| `S` / `s` | smooth cubic Bézier | x2 y2 x y                                           | Like `C` but assumes first control point is a reflection |
-| `Q` / `q` | quadratic Bézier    | x1 y1 x y                                           | Curve with 1 control point and an endpoint               |
-| `T` / `t` | smooth quadratic    | x y                                                 | Like `Q` but auto-control point                          |
-| `A` / `a` | elliptical arc      | rx ry x-axis-rotation large-arc-flag sweep-flag x y | Draws an arc                                             |
-| `Z` / `z` | closepath           | _(none)_                                            | Closes the path (line back to start)                     |
-
----
-
-## 🧮 4. How to Read a Complex Example
-
-Here’s a more complex example:
-
-```svg
-<path d="M 100 100 C 100 50, 200 50, 200 100 S 300 150, 300 100 Z" />
-```
-
-Let’s break it down:
-
-1. `M 100 100` — move to `(100,100)`
-2. `C 100 50, 200 50, 200 100` — draw cubic Bézier curve with control points `(100,50)` and `(200,50)`, endpoint `(200,100)`
-3. `S 300 150, 300 100` — smooth curve, auto control point from previous, second control `(300,150)`, endpoint `(300,100)`
-4. `Z` — close the path (draw a line back to `(100,100)`)
-
----
-
-## 🧠 5. Tips for Reading
-
-- Think of the “pen” moving around.
-- Break the path at each command letter.
-- Translate relative commands (`l`, `c`, etc.) into absolute positions step by step if needed.
-- Visualization tools like [SVG Path Editor](https://yqnn.github.io/svg-path-editor/) can help you see what’s happening interactively.
-
----
-
-## 🧰 6. Handy Shortcuts
-
-- Repeating commands can omit the command letter.
-
-  ```svg
-  M10 10 L20 20 30 10
-  ```
-
-  is equivalent to:
-
-  ```svg
-  M10 10 L20 20 L30 10
-  ```
-
-- For curves (`C`, `S`, `Q`, `T`), the number of coordinates tells you how many segments there are.
-
----
-
-Would you like me to **deconstruct a specific `d` string** you have? (e.g. paste one and I’ll walk through it step by step.)