SVG Editor

; +} + +type SortableItemsProps = { + items: T[], + onChange: Action, + Component: React.ComponentType<{item: T, onChange: Action}>, +} + +export function SortableItems({items, onChange, Component}: SortableItemsProps) { + const [dragging, setDragging] = useState(false); + const onDropLast = useCallback((e: React.DragEvent) => { + e.preventDefault(); + const itemId = e.dataTransfer.getData('text/plain'); + onChange((previous) => { + const itemIndex = previous.findIndex((i) => i.id === itemId); + if (itemIndex < 0) { + return previous; + } + const copy = previous.slice(); + copy.splice(itemIndex, 1); + copy.push(previous[itemIndex]); + return copy; + }); + setDragging(false); + }, [onChange]); + const onDrop = useCallback((beforeId: string, e: React.DragEvent) => { + e.preventDefault(); + const itemId = e.dataTransfer.getData('text/plain'); + onChange((previous) => { + const itemIndex = previous.findIndex((i) => i.id === itemId); + const beforeIndex = previous.findIndex((i) => i.id === beforeId); + if (itemIndex < 0 || beforeIndex < 0) { + return previous; + } + const copy = previous.slice(); + copy.splice(itemIndex, 1); + copy.splice(itemIndex < beforeIndex ? beforeIndex - 1 : beforeIndex, 0, previous[itemIndex]); + return copy; + }); + setDragging(false); + }, [onChange]); + const onDropTrash = useCallback((e: React.DragEvent) => { + e.preventDefault(); + const itemId = e.dataTransfer.getData('text/plain'); + onChange((previous) => { + const itemIndex = previous.findIndex((i) => i.id === itemId); + if (itemIndex < 0) { + return previous; + } + const copy = items.slice(); + copy.splice(itemIndex, 1); + return copy; + }); + setDragging(false); + }, [onChange]); + const onItemChange = useCallback((id: string, action: (item: T) => T) => { + onChange((previous) => { + const index = previous.findIndex((i) => i.id === id); + if (index < 0) { + return previous; + } + return arrayWith(previous, index, action(previous[index])); + }); + }, []); + + return

+ {items.map((item) => { + return + key={item.id} + item={item} + dragging={dragging} + setDragging={setDragging} + onItemChange={onItemChange} + onDrop={onDrop} + Component={Component} />; + })} + {dragging && } + {dragging && } +

; +} + +type SortableItemRenderProps = { + item: T, + dragging: boolean, + setDragging: (dragging: boolean) => void, + onItemChange: (id: string, action: (previous: T) => T) => void, + onDrop: (beforeId: string, e: React.DragEvent) => void, + Component: React.ComponentType<{item: T, onChange: Action}>, +} + +function SortableItemRender({item, dragging, setDragging, onItemChange, onDrop, Component} : SortableItemRenderProps) { + const onChange = useCallback(onItemChange.bind(null, item.id), [onItemChange, item.id]); + const onDropBefore = useCallback(onDrop.bind(null, item.id), [onDrop, item.id]); + + const onDragStart = useCallback((e: React.DragEvent) => { + e.stopPropagation(); + e.dataTransfer.setData('text/plain', item.id); + setDragging(true); + }, [setDragging]); + const onDragEnd = useCallback(() => { + setDragging(false); + }, [setDragging]); + + return + {dragging && } +

+ +

+ ; +} + +function SortableItemDrop({onDrop}: {onDrop: (e: React.DragEvent) => void}) { + const [inside, setInside] = useState(false); + + const onDragEnter = useCallback((e: React.DragEvent) => { + e.preventDefault(); + setInside(true); + }, []); + const onDragOver = useCallback((e: React.DragEvent) => { + e.preventDefault(); + }, []); + const onDragLeave = useCallback((e: React.DragEvent) => { + e.preventDefault(); + setInside(false); + }, []); + + return

; +} + +function SortableItemTrash({onDrop}: {onDrop: (e: React.DragEvent) => void}) { + const [inside, setInside] = useState(false); + + const onDragEnter = useCallback((e: React.DragEvent) => { + e.preventDefault(); + setInside(true); + }, []); + const onDragOver = useCallback((e: React.DragEvent) => { + e.preventDefault(); + }, []); + const onDragLeave = useCallback((e: React.DragEvent) => { + e.preventDefault(); + setInside(false); + }, []); + + return

; +} diff --git a/src/Path.tsx b/src/Path.tsx new file mode 100644 index 0000000..08f3430 --- /dev/null +++ b/src/Path.tsx @@ -0,0 +1,565 @@ +import {useCallback, Fragment, useId} from 'react'; +import {v4 as uuidv4} from 'uuid'; +import {Editor, StringField, NumberField, OverlayHandle, Field, SortableItems} from './Editor'; +import {arrayWith} from './array'; + +import type {SvgItem} from './App'; +import type {Action} from './Editor'; + +type PathMoveTo = { + type: 'move-to', + id: string, + x: number, + y: number, +} + +type PathLineTo = { + type: 'line-to', + id: string, + x: number, + y: number, +} + +type PathCubicBezierTo = { + type: 'cubic-bezier-to', + id: string, + x1: number, + y1: number, + x2: number, + y2: number, + x: number, + y: number, +} + +type PathItem = PathMoveTo | PathLineTo | PathCubicBezierTo; + +export type Path = { + type: 'path', + id: string, + description: PathItem[], + stroke: string, + strokeWidth: number, +} + +type PathRenderProps = { + path: Path, +} + +export function PathRender({path}: PathRenderProps) { + const description = path.description.reduce((acc, item) => `${acc} ${getItemDescription(item)}`, ''); + return +} + +export function PathOverlaySVG({path}: PathRenderProps) { + // TODO no mutable in array.map() => reduce + let currentX: number | null = null; + let currentY: number | null = null; + return + {path.description.map((item) => { + if (item.type === 'move-to') { + currentX = item.x; + currentY = item.y; + return null; + } else if (item.type === 'line-to') { + if (typeof currentX === 'number' && typeof currentY === 'number') { + currentX = item.x; + currentY = item.y; + return null; + } else { + return null; + } + } else if (item.type === 'cubic-bezier-to') { + if (typeof currentX === 'number' && typeof currentY === 'number') { + const startX = currentX; + const startY = currentY; + currentX = item.x; + currentY = item.y; + return + + + ; + } else { + return null; + } + } else { + const neverItem: never = item; + throw new Error(`Unhandled path item: ${JSON.stringify(neverItem)}`); + } + })} + ; +} + +export function normalizePath(path: any): Path | null { + if (!path) { + return null; + } + return { + type: 'path', + id: typeof path.id === 'string' ? path.id : uuidv4(), + description: Array.isArray(path.description) ? (path.description as any[]).flatMap((pathItem) => normalizePathItem(pathItem)) : [], + stroke: typeof path.stroke === 'string' ? path.stroke : 'black', + strokeWidth: typeof path.strokeWidth === 'number' ? path.strokeWidth : 0, + }; +} + +function normalizePathItem(rawItem: any): PathItem[] { + if (rawItem && rawItem.type === 'move-to') { + return [{ + type: 'move-to', + id: typeof rawItem.id === 'string' ? rawItem.id : uuidv4(), + x: typeof rawItem.x === 'number' ? rawItem.x : 0, + y: typeof rawItem.y === 'number' ? rawItem.y : 0, + }]; + } else if (rawItem && rawItem.type === 'line-to') { + return [{ + type: 'line-to', + id: typeof rawItem.id === 'string' ? rawItem.id : uuidv4(), + x: typeof rawItem.x === 'number' ? rawItem.x : 0, + y: typeof rawItem.y === 'number' ? rawItem.y : 0, + }]; + } else if (rawItem && rawItem.type === 'cubic-bezier-to') { + return [{ + type: 'cubic-bezier-to', + id: typeof rawItem.id === 'string' ? rawItem.id : uuidv4(), + x1: typeof rawItem.x1 === 'number' ? rawItem.x1 : 0, + y1: typeof rawItem.y1 === 'number' ? rawItem.y1 : 0, + x2: typeof rawItem.x2 === 'number' ? rawItem.x2 : 0, + y2: typeof rawItem.y2 === 'number' ? rawItem.y2 : 0, + x: typeof rawItem.x === 'number' ? rawItem.x : 0, + y: typeof rawItem.y === 'number' ? rawItem.y : 0, + }]; + } else { + return []; + } +} + +type PathEditorProps = { + path: Path, + onChange: Action, +} + +export function PathEditor({path, onChange}: PathEditorProps) { + const descriptionId = useId(); + + const onDescriptionChange = useCallback((action: (items: PathItem[]) => PathItem[]) => { + onChange((item) => { + if (item.type !== 'path') { + return item; + } + return { + ...item, + description: action(item.description), + }; + }); + }, [onChange]); + const onStrokeChange = useCallback((stroke: string) => { + onChange((item) => { + if (item.type !== 'path') { + return item; + } + return { + ...item, + stroke, + }; + }); + }, [onChange]); + const onStrokeWidthChange = useCallback((strokeWidth: number) => { + onChange((item) => { + if (item.type !== 'path') { + return item; + } + return { + ...item, + strokeWidth, + }; + }); + }, [onChange]); + const onAddMoveTo = useCallback(() => { + onChange((item) => { + if (item.type !== 'path') { + return item; + } + return { + ...item, + description: item.description.concat({ + type: 'move-to', + id: uuidv4(), + x: 0, + y: 0, + }), + }; + }); + }, [path, onChange]); + const onAddLineTo = useCallback(() => { + onChange((item) => { + if (item.type !== 'path') { + return item; + } + return { + ...item, + description: item.description.concat({ + type: 'line-to', + id: uuidv4(), + x: 0, + y: 0, + }), + }; + }); + }, [onChange]); + const onAddCubicBezierTo = useCallback(() => { + onChange((item) => { + if (item.type !== 'path') { + return item; + } + return { + ...item, + description: item.description.concat({ + type: 'cubic-bezier-to', + id: uuidv4(), + x1: 0, + y1: 0, + x2: 0, + y2: 0, + x: 0, + y: 0, + }), + }; + }); + }, [onChange]); + + return + + + + + + + + + ; +} + +function PathItemEditor({item, onChange}: {item: PathItem, onChange: Action}) { + if (item.type === 'move-to') { + return ; + } else if (item.type === 'line-to') { + return ; + } else if (item.type === 'cubic-bezier-to') { + return ; + } else { + const neverItem : never = item; + throw new Error(`Unhandled path item: ${JSON.stringify(neverItem)}`); + } +} + +function MoveToEditor({moveTo, onChange}: {moveTo: PathMoveTo, onChange: Action}) { + const onXChange = useCallback((x: number) => { + onChange((item) => { + if (item.type !== 'move-to') { + return item; + } + return { + ...item, + x, + }; + }); + }, [onChange]); + const onYChange = useCallback((y: number) => { + onChange((item) => { + if (item.type !== 'move-to') { + return item; + } + return { + ...item, + y, + }; + }); + }, [onChange]); + + return

+ + +

; +} + +function LineToEditor({lineTo, onChange}: {lineTo: PathLineTo, onChange: Action}) { + const onXChange = useCallback((x: number) => { + onChange((item) => { + if (item.type !== 'line-to') { + return item; + } + return { + ...item, + x, + }; + }); + }, [onChange]); + const onYChange = useCallback((y: number) => { + onChange((item) => { + if (item.type !== 'line-to') { + return item; + } + return { + ...item, + y, + }; + }); + }, [onChange]); + + return

+ + +

; +} + +function CubicBezierToEditor({cubicBezierTo, onChange}: {cubicBezierTo: PathCubicBezierTo, onChange: Action}) { + const onX1Change = useCallback((x1: number) => { + onChange((item) => { + if (item.type !== 'cubic-bezier-to') { + return item; + } + return { + ...item, + x1, + }; + }); + }, [onChange]); + const onY1Change = useCallback((y1: number) => { + onChange((item) => { + if (item.type !== 'cubic-bezier-to') { + return item; + } + return { + ...item, + y1, + }; + }); + }, [onChange]); + const onX2Change = useCallback((x2: number) => { + onChange((item) => { + if (item.type !== 'cubic-bezier-to') { + return item; + } + return { + ...item, + x2, + }; + }); + }, [onChange]); + const onY2Change = useCallback((y2: number) => { + onChange((item) => { + if (item.type !== 'cubic-bezier-to') { + return item; + } + return { + ...item, + y2, + }; + }); + }, [onChange]); + const onXChange = useCallback((x: number) => { + onChange((item) => { + if (item.type !== 'cubic-bezier-to') { + return item; + } + return { + ...item, + x, + }; + }); + }, [onChange]); + const onYChange = useCallback((y: number) => { + onChange((item) => { + if (item.type !== 'cubic-bezier-to') { + return item; + } + return { + ...item, + y, + }; + }); + }, [onChange]); + + return

+ + + + + + +

; +} + +type PathOverlayDOMProps = { + path: Path, + width: number, + height: number, + onChange: Action, +} + +export function PathOverlayDOM({path, onChange, width, height}: PathOverlayDOMProps) { + const onItemChange = useCallback((id: string, action: (item: PathItem) => PathItem) => { + onChange((previous) => { + if (previous.type !== 'path') { + return previous; + } + const index = previous.description.findIndex((d) => d.id === id); + if (index < 0) { + return previous; + } + return { + ...previous, + description: arrayWith(previous.description, index, action(previous.description[index])), + }; + }); + }, []); + + let initialized = false; + const overlays: React.ReactNode[] = []; + for (const item of path.description) { + if (item.type === 'move-to') { + initialized = true; + overlays.push(); + } else if (item.type === 'line-to') { + if (initialized) { + overlays.push(); + } + } else if (item.type === 'cubic-bezier-to') { + if (initialized) { + overlays.push(); + } + } else { + const neverItem : never = item; + throw new Error(`Unhandled path item: ${JSON.stringify(neverItem)}`); + } + } + return {overlays}; +} + +type MoveToOverlayDOMProps = { + moveTo: PathMoveTo, + onItemChange: (id: string, action: (item: PathItem) => PathItem) => void, + width: number, + height: number, +}; + +function MoveToOverlayDOM({moveTo, width, height, onItemChange} : MoveToOverlayDOMProps) { + const onChange = useCallback((x: number, y: number) => { + onItemChange(moveTo.id, (previous) => { + if (previous.type !== 'move-to') { + return previous; + } + return { + ...previous, + x, + y, + }; + }); + }, [onItemChange, moveTo.id]); + + return ; +} + +type LineToOverlayDOMProps = { + lineTo: PathLineTo, + onItemChange: (id: string, action: (item: PathItem) => PathItem) => void, + width: number, + height: number, +}; + +function LineToOverlayDOM({lineTo, width, height, onItemChange} : LineToOverlayDOMProps) { + const onChange = useCallback((x: number, y: number) => { + onItemChange(lineTo.id, (previous) => { + if (previous.type !== 'line-to') { + return previous; + } + return { + ...previous, + x, + y, + }; + }); + }, [onItemChange, lineTo.id]); + + return ; +} + +type CubicBezierToOverlayDOMProps = { + cubicBezierTo: PathCubicBezierTo, + onItemChange: (id: string, action: (item: PathItem) => PathItem) => void, + width: number, + height: number, +}; + +function CubicBezierToOverlayDOM({cubicBezierTo, width, height, onItemChange} : CubicBezierToOverlayDOMProps) { + const onHandle1Change = useCallback((x1: number, y1: number) => { + onItemChange(cubicBezierTo.id, (previous) => { + if (previous.type !== 'cubic-bezier-to') { + return previous; + } + return { + ...previous, + x1, + y1, + }; + }); + }, [onItemChange, cubicBezierTo.id]); + const onHandle2Change = useCallback((x2: number, y2: number) => { + onItemChange(cubicBezierTo.id, (previous) => { + if (previous.type !== 'cubic-bezier-to') { + return previous; + } + return { + ...previous, + x2, + y2, + }; + }); + }, [onItemChange, cubicBezierTo.id]); + const onEndChange = useCallback((x: number, y: number) => { + onItemChange(cubicBezierTo.id, (previous) => { + if (previous.type !== 'cubic-bezier-to') { + return previous; + } + return { + ...previous, + x, + y, + }; + }); + }, [onItemChange, cubicBezierTo.id]); + + return + + + + ; +} + +function getItemDescription(item: PathItem): string { + if (item.type === 'move-to') { + return `M${item.x} ${item.y}`; + } else if (item.type === 'line-to') { + return `L${item.x} ${item.y}`; + } else if (item.type === 'cubic-bezier-to') { + return `C${item.x1} ${item.y1} ${item.x2} ${item.y2} ${item.x} ${item.y}`; + } else { + const neverItem : never = item; + throw new Error(`Unhandled path item: ${JSON.stringify(neverItem)}`); + } +} diff --git a/src/array.ts b/src/array.ts new file mode 100644 index 0000000..ef96b8b --- /dev/null +++ b/src/array.ts @@ -0,0 +1,6 @@ +// https://github.com/tc39/proposal-change-array-by-copy +export function arrayWith(array: T[], index: number, item: T): T[] { + const copy = array.slice(); + copy[index] = item; + return copy; +} diff --git a/src/favicon.svg b/src/favicon.svg new file mode 100644 index 0000000..de4aedd --- /dev/null +++ b/src/favicon.svg @@ -0,0 +1,15 @@ + diff --git a/src/index.css b/src/index.css new file mode 100644 index 0000000..ec2585e --- /dev/null +++ b/src/index.css @@ -0,0 +1,13 @@ +body { + margin: 0; + font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', + 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', + sans-serif; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; +} + +code { + font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', + monospace; +} diff --git a/src/logo.svg b/src/logo.svg new file mode 100644 index 0000000..6b60c10 --- /dev/null +++ b/src/logo.svg @@ -0,0 +1,7 @@ + diff --git a/src/main.tsx b/src/main.tsx new file mode 100644 index 0000000..d3ef7eb --- /dev/null +++ b/src/main.tsx @@ -0,0 +1,10 @@ +import React from 'react'; +import ReactDOM from 'react-dom/client'; +import {App} from './App'; +import './index.css'; + +ReactDOM.createRoot(document.getElementById('root')!).render( + + + +); diff --git a/src/uuid.d.ts b/src/uuid.d.ts new file mode 100644 index 0000000..1fc8171 --- /dev/null +++ b/src/uuid.d.ts @@ -0,0 +1,3 @@ +declare module 'uuid' { + export function v4(): string; +} diff --git a/src/vite-env.d.ts b/src/vite-env.d.ts new file mode 100644 index 0000000..11f02fe --- /dev/null +++ b/src/vite-env.d.ts @@ -0,0 +1 @@ +/// diff --git a/tsconfig.json b/tsconfig.json new file mode 100644 index 0000000..c8bdc64 --- /dev/null +++ b/tsconfig.json @@ -0,0 +1,21 @@ +{ + "compilerOptions": { + "target": "ESNext", + "useDefineForClassFields": true, + "lib": ["DOM", "DOM.Iterable", "ESNext"], + "allowJs": false, + "skipLibCheck": false, + "esModuleInterop": false, + "allowSyntheticDefaultImports": true, + "strict": true, + "forceConsistentCasingInFileNames": true, + "module": "ESNext", + "moduleResolution": "Node", + "resolveJsonModule": true, + "isolatedModules": true, + "noEmit": true, + "jsx": "react-jsx" + }, + "include": ["src"], + "references": [{ "path": "./tsconfig.node.json" }] +} diff --git a/tsconfig.node.json b/tsconfig.node.json new file mode 100644 index 0000000..e993792 --- /dev/null +++ b/tsconfig.node.json @@ -0,0 +1,8 @@ +{ + "compilerOptions": { + "composite": true, + "module": "esnext", + "moduleResolution": "node" + }, + "include": ["vite.config.ts"] +} diff --git a/vite.config.ts b/vite.config.ts new file mode 100644 index 0000000..6549182 --- /dev/null +++ b/vite.config.ts @@ -0,0 +1,7 @@ +import { defineConfig } from 'vite'; +import react from '@vitejs/plugin-react'; + +// https://vitejs.dev/config/ +export default defineConfig({ + plugins: [react()] +});