refactor: restructure files to their domains, new preview overlay system, and dep graph

6 files changed, 0 insertions, 523 deletions

diff --git a/apps/web/src/lib/graphics/definitions/ellipse.ts b/apps/web/src/lib/graphics/definitions/ellipse.ts
deleted file mode 100644
index 04b93c27..00000000
--- a/apps/web/src/lib/graphics/definitions/ellipse.ts
+++ /dev/null
@@ -1,73 +0,0 @@
-import type { ParamDefinition } from "@/lib/params";

-import { applyAlignedStroke } from "../stroke";

-import { STROKE_ALIGN_PARAM, type GraphicStrokeAlign } from "./shared";

-import type { GraphicDefinition } from "../types";

-

-interface EllipseParams {

-	fill: string;

-	stroke: string;

-	strokeWidth: number;

-	strokeAlign: GraphicStrokeAlign;

-}

-

-const ELLIPSE_PARAMS: ParamDefinition<keyof EllipseParams & string>[] = [

-	{

-		key: "fill",

-		label: "Fill",

-		type: "color",

-		default: "#ffffff",

-	},

-	{

-		key: "stroke",

-		label: "Color",

-		type: "color",

-		default: "#000000",

-		group: "stroke",

-	},

-	{

-		key: "strokeWidth",

-		label: "Width",

-		type: "number",

-		default: 0,

-		min: 0,

-		max: 64,

-		step: 1,

-		shortLabel: "W",

-		group: "stroke",

-	},

-	STROKE_ALIGN_PARAM,

-];

-

-export const ellipseGraphicDefinition: GraphicDefinition = {

-	id: "ellipse",

-	name: "Ellipse",

-	keywords: ["ellipse", "circle", "oval"],

-	params: ELLIPSE_PARAMS,

-	render({ ctx, params, width, height }) {

-		const fill = String(params.fill ?? "#ffffff");

-		const stroke = String(params.stroke ?? "#000000");

-		const strokeWidth = Math.max(0, Number(params.strokeWidth ?? 0));

-		const strokeAlign = (params.strokeAlign ?? "center") as GraphicStrokeAlign;

-		const inset = strokeAlign === "center" ? strokeWidth / 2 : 0;

-		const centerX = width / 2;

-		const centerY = height / 2;

-		const radiusX = Math.max(1, width / 2 - inset);

-		const radiusY = Math.max(1, height / 2 - inset);

-

-		ctx.clearRect(0, 0, width, height);

-		const path = new Path2D();

-		path.ellipse(centerX, centerY, radiusX, radiusY, 0, 0, Math.PI * 2);

-		ctx.fillStyle = fill;

-		ctx.fill(path);

-

-		if (strokeWidth > 0) {

-			applyAlignedStroke({

-				ctx,

-				path,

-				strokeWidth,

-				strokeAlign,

-				strokeColor: stroke,

-			});

-		}

-	},

-};

diff --git a/apps/web/src/lib/graphics/definitions/index.ts b/apps/web/src/lib/graphics/definitions/index.ts
deleted file mode 100644
index 6fd9e446..00000000
--- a/apps/web/src/lib/graphics/definitions/index.ts
+++ /dev/null
@@ -1,29 +0,0 @@
-import { graphicsRegistry } from "../registry";

-import { ellipseGraphicDefinition } from "./ellipse";

-import { polygonGraphicDefinition } from "./polygon";

-import { rectangleGraphicDefinition } from "./rectangle";

-import { starGraphicDefinition } from "./star";

-

-const defaultGraphicDefinitions = [

-	rectangleGraphicDefinition,

-	ellipseGraphicDefinition,

-	polygonGraphicDefinition,

-	starGraphicDefinition,

-];

-

-export function registerDefaultGraphics(): void {

-	for (const definition of defaultGraphicDefinitions) {

-		if (graphicsRegistry.has(definition.id)) {

-			continue;

-		}

-		graphicsRegistry.register(definition.id, definition);

-	}

-}

-

-export {

-	ellipseGraphicDefinition,

-	polygonGraphicDefinition,

-	rectangleGraphicDefinition,

-	starGraphicDefinition,

-};

-export { STROKE_ALIGN_PARAM } from "./shared";

diff --git a/apps/web/src/lib/graphics/definitions/polygon.ts b/apps/web/src/lib/graphics/definitions/polygon.ts
deleted file mode 100644
index deecb6ff..00000000
--- a/apps/web/src/lib/graphics/definitions/polygon.ts
+++ /dev/null
@@ -1,211 +0,0 @@
-import type { ParamDefinition } from "@/lib/params";

-import { applyAlignedStroke } from "../stroke";

-import { STROKE_ALIGN_PARAM, type GraphicStrokeAlign } from "./shared";

-import type { GraphicDefinition } from "../types";

-

-interface Point {

-	x: number;

-	y: number;

-}

-

-interface PolygonParams {

-	fill: string;

-	stroke: string;

-	strokeWidth: number;

-	strokeAlign: GraphicStrokeAlign;

-	sides: number;

-	cornerRadius: number;

-}

-

-const POLYGON_PARAMS: ParamDefinition<keyof PolygonParams & string>[] = [

-	{

-		key: "fill",

-		label: "Fill",

-		type: "color",

-		default: "#ffffff",

-	},

-	{

-		key: "stroke",

-		label: "Color",

-		type: "color",

-		default: "#000000",

-		group: "stroke",

-	},

-	{

-		key: "strokeWidth",

-		label: "Width",

-		type: "number",

-		default: 0,

-		min: 0,

-		max: 64,

-		step: 1,

-		shortLabel: "W",

-		group: "stroke",

-	},

-	STROKE_ALIGN_PARAM,

-	{

-		key: "sides",

-		label: "Sides",

-		type: "number",

-		default: 5,

-		min: 3,

-		max: 12,

-		step: 1,

-		shortLabel: "S",

-	},

-	{

-		key: "cornerRadius",

-		label: "Corner radius",

-		type: "number",

-		default: 0,

-		min: 0,

-		max: 50,

-		step: 1,

-		shortLabel: "R",

-	},

-];

-

-function buildPolygonVertices({

-	centerX,

-	centerY,

-	radius,

-	sides,

-}: {

-	centerX: number;

-	centerY: number;

-	radius: number;

-	sides: number;

-}): Point[] {

-	return Array.from({ length: sides }, (_, index) => {

-		const angle = -Math.PI / 2 + (index * Math.PI * 2) / sides;

-		return {

-			x: centerX + Math.cos(angle) * radius,

-			y: centerY + Math.sin(angle) * radius,

-		};

-	});

-}

-

-function distance({ a, b }: { a: Point; b: Point }): number {

-	return Math.hypot(a.x - b.x, a.y - b.y);

-}

-

-function normalize(point: Point): Point {

-	const length = Math.hypot(point.x, point.y) || 1;

-	return {

-		x: point.x / length,

-		y: point.y / length,

-	};

-}

-

-function traceRoundedPolygonPath({

-	path,

-	vertices,

-	radius,

-}: {

-	path: Path2D;

-	vertices: Point[];

-	radius: number;

-}): void {

-	if (vertices.length < 3) {

-		return;

-	}

-

-	if (radius <= 0) {

-		path.moveTo(vertices[0].x, vertices[0].y);

-		for (let index = 1; index < vertices.length; index++) {

-			path.lineTo(vertices[index].x, vertices[index].y);

-		}

-		path.closePath();

-		return;

-	}

-

-	for (let index = 0; index < vertices.length; index++) {

-		const previous = vertices[(index - 1 + vertices.length) % vertices.length];

-		const current = vertices[index];

-		const next = vertices[(index + 1) % vertices.length];

-		const toPrevious = normalize({

-			x: previous.x - current.x,

-			y: previous.y - current.y,

-		});

-		const toNext = normalize({

-			x: next.x - current.x,

-			y: next.y - current.y,

-		});

-		const angle = Math.acos(

-			Math.max(-1, Math.min(1, toPrevious.x * toNext.x + toPrevious.y * toNext.y)),

-		);

-		const maxOffset =

-			Math.min(distance({ a: previous, b: current }), distance({ a: current, b: next })) / 2;

-		const tangentOffset = Math.min(radius / Math.tan(angle / 2), maxOffset);

-		const start = {

-			x: current.x + toPrevious.x * tangentOffset,

-			y: current.y + toPrevious.y * tangentOffset,

-		};

-		const end = {

-			x: current.x + toNext.x * tangentOffset,

-			y: current.y + toNext.y * tangentOffset,

-		};

-

-		if (index === 0) {

-			path.moveTo(start.x, start.y);

-		} else {

-			path.lineTo(start.x, start.y);

-		}

-

-		path.arcTo(

-			current.x,

-			current.y,

-			end.x,

-			end.y,

-			Math.min(radius, maxOffset),

-		);

-	}

-

-	path.closePath();

-}

-

-export const polygonGraphicDefinition: GraphicDefinition = {

-	id: "polygon",

-	name: "Polygon",

-	keywords: ["polygon", "triangle", "pentagon", "hexagon", "diamond"],

-	params: POLYGON_PARAMS,

-	render({ ctx, params, width, height }) {

-		const fill = String(params.fill ?? "#ffffff");

-		const stroke = String(params.stroke ?? "#000000");

-		const strokeWidth = Math.max(0, Number(params.strokeWidth ?? 0));

-		const strokeAlign = (params.strokeAlign ?? "center") as GraphicStrokeAlign;

-		const sides = Math.max(3, Math.min(12, Math.round(Number(params.sides ?? 5))));

-		const inset = strokeAlign === "center" ? strokeWidth / 2 : 0;

-		const radius = Math.max(1, Math.min(width, height) / 2 - inset);

-		const maxCornerRadius = radius * Math.sin(Math.PI / sides);

-		const cornerRadiusPercent = Math.max(0, Number(params.cornerRadius ?? 0));

-		const cornerRadius =

-			maxCornerRadius * Math.min(cornerRadiusPercent, 50) / 50;

-		const vertices = buildPolygonVertices({

-			centerX: width / 2,

-			centerY: height / 2,

-			radius,

-			sides,

-		});

-

-		ctx.clearRect(0, 0, width, height);

-		const path = new Path2D();

-		traceRoundedPolygonPath({

-			path,

-			vertices,

-			radius: cornerRadius,

-		});

-		ctx.fillStyle = fill;

-		ctx.fill(path);

-

-		if (strokeWidth > 0) {

-			applyAlignedStroke({

-				ctx,

-				path,

-				strokeWidth,

-				strokeAlign,

-				strokeColor: stroke,

-			});

-		}

-	},

-};

diff --git a/apps/web/src/lib/graphics/definitions/rectangle.ts b/apps/web/src/lib/graphics/definitions/rectangle.ts
deleted file mode 100644
index fb52c03a..00000000
--- a/apps/web/src/lib/graphics/definitions/rectangle.ts
+++ /dev/null
@@ -1,85 +0,0 @@
-import type { ParamDefinition } from "@/lib/params";

-import { applyAlignedStroke } from "../stroke";

-import { STROKE_ALIGN_PARAM, type GraphicStrokeAlign } from "./shared";

-import type { GraphicDefinition } from "../types";

-

-interface RectangleParams {

-	fill: string;

-	stroke: string;

-	strokeWidth: number;

-	strokeAlign: GraphicStrokeAlign;

-	cornerRadius: number;

-}

-

-const RECTANGLE_PARAMS: ParamDefinition<keyof RectangleParams & string>[] = [

-	{

-		key: "fill",

-		label: "Fill",

-		type: "color",

-		default: "#ffffff",

-	},

-	{

-		key: "stroke",

-		label: "Color",

-		type: "color",

-		default: "#000000",

-		group: "stroke",

-	},

-	{

-		key: "strokeWidth",

-		label: "Width",

-		type: "number",

-		default: 0,

-		min: 0,

-		max: 64,

-		step: 1,

-		shortLabel: "W",

-		group: "stroke",

-	},

-	STROKE_ALIGN_PARAM,

-	{

-		key: "cornerRadius",

-		label: "Corner radius",

-		type: "number",

-		default: 0,

-		min: 0,

-		max: 50,

-		step: 1,

-		shortLabel: "R",

-	},

-];

-

-export const rectangleGraphicDefinition: GraphicDefinition = {

-	id: "rectangle",

-	name: "Rectangle",

-	keywords: ["rectangle", "square", "box"],

-	params: RECTANGLE_PARAMS,

-	render({ ctx, params, width, height }) {

-		const fill = String(params.fill ?? "#ffffff");

-		const stroke = String(params.stroke ?? "#000000");

-		const strokeWidth = Math.max(0, Number(params.strokeWidth ?? 0));

-		const strokeAlign = (params.strokeAlign ?? "center") as GraphicStrokeAlign;

-		const inset = strokeAlign === "center" ? strokeWidth / 2 : 0;

-		const drawWidth = Math.max(1, width - inset * 2);

-		const drawHeight = Math.max(1, height - inset * 2);

-		const radiusPercent = Math.max(0, Number(params.cornerRadius ?? 0));

-		const radius =

-			(Math.min(drawWidth, drawHeight) / 2) * Math.min(radiusPercent, 50) / 50;

-

-		ctx.clearRect(0, 0, width, height);

-		const path = new Path2D();

-		path.roundRect(inset, inset, drawWidth, drawHeight, radius);

-		ctx.fillStyle = fill;

-		ctx.fill(path);

-

-		if (strokeWidth > 0) {

-			applyAlignedStroke({

-				ctx,

-				path,

-				strokeWidth,

-				strokeAlign,

-				strokeColor: stroke,

-			});

-		}

-	},

-};

diff --git a/apps/web/src/lib/graphics/definitions/shared.ts b/apps/web/src/lib/graphics/definitions/shared.ts
deleted file mode 100644
index 4f56c77c..00000000
--- a/apps/web/src/lib/graphics/definitions/shared.ts
+++ /dev/null
@@ -1,16 +0,0 @@
-import type { ParamDefinition } from "@/lib/params";

-

-export type GraphicStrokeAlign = "inside" | "center" | "outside";

-

-export const STROKE_ALIGN_PARAM: ParamDefinition<"strokeAlign"> = {

-	key: "strokeAlign",

-	label: "Stroke align",

-	type: "select",

-	default: "center",

-	group: "stroke",

-	options: [

-		{ value: "inside", label: "Inside" },

-		{ value: "center", label: "Center" },

-		{ value: "outside", label: "Outside" },

-	],

-};

diff --git a/apps/web/src/lib/graphics/definitions/star.ts b/apps/web/src/lib/graphics/definitions/star.ts
deleted file mode 100644
index 2160c125..00000000
--- a/apps/web/src/lib/graphics/definitions/star.ts
+++ /dev/null
@@ -1,109 +0,0 @@
-import type { ParamDefinition } from "@/lib/params";

-import { applyAlignedStroke } from "../stroke";

-import { STROKE_ALIGN_PARAM, type GraphicStrokeAlign } from "./shared";

-import type { GraphicDefinition } from "../types";

-

-interface StarParams {

-	fill: string;

-	stroke: string;

-	strokeWidth: number;

-	strokeAlign: GraphicStrokeAlign;

-	points: number;

-	depth: number;

-}

-

-const STAR_PARAMS: ParamDefinition<keyof StarParams & string>[] = [

-	{

-		key: "fill",

-		label: "Fill",

-		type: "color",

-		default: "#ffffff",

-	},

-	{

-		key: "stroke",

-		label: "Color",

-		type: "color",

-		default: "#000000",

-		group: "stroke",

-	},

-	{

-		key: "strokeWidth",

-		label: "Width",

-		type: "number",

-		default: 0,

-		min: 0,

-		max: 64,

-		step: 1,

-		shortLabel: "W",

-		group: "stroke",

-	},

-	STROKE_ALIGN_PARAM,

-	{

-		key: "points",

-		label: "Points",

-		type: "number",

-		default: 5,

-		min: 3,

-		max: 12,

-		step: 1,

-		shortLabel: "P",

-	},

-	{

-		key: "depth",

-		label: "Depth",

-		type: "number",

-		default: 45,

-		min: 1,

-		max: 99,

-		step: 1,

-		shortLabel: "D",

-	},

-];

-

-export const starGraphicDefinition: GraphicDefinition = {

-	id: "star",

-	name: "Star",

-	keywords: ["star", "sparkle", "burst"],

-	params: STAR_PARAMS,

-	render({ ctx, params, width, height }) {

-		const fill = String(params.fill ?? "#ffffff");

-		const stroke = String(params.stroke ?? "#000000");

-		const strokeWidth = Math.max(0, Number(params.strokeWidth ?? 0));

-		const strokeAlign = (params.strokeAlign ?? "center") as GraphicStrokeAlign;

-		const points = Math.max(3, Math.min(12, Math.round(Number(params.points ?? 5))));

-		const depth = Math.max(1, Math.min(99, Number(params.depth ?? 45))) / 100;

-		const inset = strokeAlign === "center" ? strokeWidth / 2 : 0;

-		const outerRadius = Math.max(1, Math.min(width, height) / 2 - inset);

-		const innerRadius = outerRadius * depth;

-		const centerX = width / 2;

-		const centerY = height / 2;

-

-		ctx.clearRect(0, 0, width, height);

-		const path = new Path2D();

-		for (let index = 0; index < points * 2; index++) {

-			const radius = index % 2 === 0 ? outerRadius : innerRadius;

-			const angle = -Math.PI / 2 + (index * Math.PI) / points;

-			const x = centerX + Math.cos(angle) * radius;

-			const y = centerY + Math.sin(angle) * radius;

-

-			if (index === 0) {

-				path.moveTo(x, y);

-			} else {

-				path.lineTo(x, y);

-			}

-		}

-		path.closePath();

-		ctx.fillStyle = fill;

-		ctx.fill(path);

-

-		if (strokeWidth > 0) {

-			applyAlignedStroke({

-				ctx,

-				path,

-				strokeWidth,

-				strokeAlign,

-				strokeColor: stroke,

-			});

-		}

-	},

-};