supermemory/apps/web/components/graph/document-icons.ts

export type DocumentIconType =
	| "text"
	| "pdf"
	| "md"
	| "markdown"
	| "docx"
	| "doc"
	| "rtf"
	| "csv"
	| "json"

export function drawDocumentIcon(
	ctx: CanvasRenderingContext2D,
	x: number,
	y: number,
	size: number,
	type: string,
	color = "rgba(255, 255, 255, 0.9)",
): void {
	ctx.save()
	ctx.fillStyle = color
	ctx.strokeStyle = color
	ctx.lineWidth = Math.max(1, size / 12)
	ctx.lineCap = "round"
	ctx.lineJoin = "round"

	switch (type) {
		case "pdf":
			drawPdfIcon(ctx, x, y, size)
			break
		case "md":
		case "markdown":
			drawMarkdownIcon(ctx, x, y, size)
			break
		case "doc":
		case "docx":
			drawWordIcon(ctx, x, y, size)
			break
		case "rtf":
			drawRtfIcon(ctx, x, y, size)
			break
		case "csv":
			drawCsvIcon(ctx, x, y, size)
			break
		case "json":
			drawJsonIcon(ctx, x, y, size)
			break
		case "txt":
		case "text":
		default:
			drawTextIcon(ctx, x, y, size)
			break
	}

	ctx.restore()
}

function drawTextIcon(
	ctx: CanvasRenderingContext2D,
	x: number,
	y: number,
	size: number,
): void {
	const w = size * 0.7
	const h = size * 0.85
	const cornerFold = size * 0.2

	ctx.beginPath()
	ctx.moveTo(x - w / 2, y - h / 2)
	ctx.lineTo(x + w / 2 - cornerFold, y - h / 2)
	ctx.lineTo(x + w / 2, y - h / 2 + cornerFold)
	ctx.lineTo(x + w / 2, y + h / 2)
	ctx.lineTo(x - w / 2, y + h / 2)
	ctx.closePath()
	ctx.stroke()

	const lineSpacing = size * 0.15
	const lineWidth = size * 0.4
	ctx.beginPath()
	ctx.moveTo(x - lineWidth / 2, y - lineSpacing)
	ctx.lineTo(x + lineWidth / 2, y - lineSpacing)
	ctx.moveTo(x - lineWidth / 2, y)
	ctx.lineTo(x + lineWidth / 2, y)
	ctx.moveTo(x - lineWidth / 2, y + lineSpacing)
	ctx.lineTo(x + lineWidth / 2, y + lineSpacing)
	ctx.stroke()
}

function drawPdfIcon(
	ctx: CanvasRenderingContext2D,
	x: number,
	y: number,
	size: number,
): void {
	const w = size * 0.7
	const h = size * 0.85

	ctx.beginPath()
	ctx.rect(x - w / 2, y - h / 2, w, h)
	ctx.stroke()

	ctx.font = `bold ${size * 0.35}px sans-serif`
	ctx.textAlign = "center"
	ctx.textBaseline = "middle"
	ctx.fillText("PDF", x, y)
}

function drawMarkdownIcon(
	ctx: CanvasRenderingContext2D,
	x: number,
	y: number,
	size: number,
): void {
	const w = size * 0.7
	const h = size * 0.85

	ctx.beginPath()
	ctx.rect(x - w / 2, y - h / 2, w, h)
	ctx.stroke()

	ctx.font = `bold ${size * 0.3}px sans-serif`
	ctx.textAlign = "center"
	ctx.textBaseline = "middle"
	ctx.fillText("MD", x, y)
}

function drawWordIcon(
	ctx: CanvasRenderingContext2D,
	x: number,
	y: number,
	size: number,
): void {
	const w = size * 0.7
	const h = size * 0.85

	ctx.beginPath()
	ctx.rect(x - w / 2, y - h / 2, w, h)
	ctx.stroke()

	ctx.font = `bold ${size * 0.28}px sans-serif`
	ctx.textAlign = "center"
	ctx.textBaseline = "middle"
	ctx.fillText("DOC", x, y)
}

function drawRtfIcon(
	ctx: CanvasRenderingContext2D,
	x: number,
	y: number,
	size: number,
): void {
	const w = size * 0.7
	const h = size * 0.85

	ctx.beginPath()
	ctx.rect(x - w / 2, y - h / 2, w, h)
	ctx.stroke()

	ctx.font = `bold ${size * 0.3}px sans-serif`
	ctx.textAlign = "center"
	ctx.textBaseline = "middle"
	ctx.fillText("RTF", x, y)
}

function drawCsvIcon(
	ctx: CanvasRenderingContext2D,
	x: number,
	y: number,
	size: number,
): void {
	const w = size * 0.7
	const h = size * 0.85

	ctx.strokeRect(x - w / 2, y - h / 2, w, h)

	ctx.beginPath()
	ctx.moveTo(x, y - h / 2)
	ctx.lineTo(x, y + h / 2)
	ctx.moveTo(x - w / 2, y)
	ctx.lineTo(x + w / 2, y)
	ctx.stroke()
}

function drawJsonIcon(
	ctx: CanvasRenderingContext2D,
	x: number,
	y: number,
	size: number,
): void {
	const w = size * 0.6
	const h = size * 0.8

	ctx.beginPath()
	ctx.moveTo(x - w / 4, y - h / 2)
	ctx.quadraticCurveTo(x - w / 2, y - h / 3, x - w / 2, y)
	ctx.quadraticCurveTo(x - w / 2, y + h / 3, x - w / 4, y + h / 2)
	ctx.stroke()

	ctx.beginPath()
	ctx.moveTo(x + w / 4, y - h / 2)
	ctx.quadraticCurveTo(x + w / 2, y - h / 3, x + w / 2, y)
	ctx.quadraticCurveTo(x + w / 2, y + h / 3, x + w / 4, y + h / 2)
	ctx.stroke()
}