diff options
Diffstat (limited to 'packages/memory-graph/src/utils')
| -rw-r--r-- | packages/memory-graph/src/utils/document-icons.ts | 237 |
1 files changed, 237 insertions, 0 deletions
diff --git a/packages/memory-graph/src/utils/document-icons.ts b/packages/memory-graph/src/utils/document-icons.ts new file mode 100644 index 00000000..2e93c22a --- /dev/null +++ b/packages/memory-graph/src/utils/document-icons.ts @@ -0,0 +1,237 @@ +/** + * Canvas-based document type icon rendering utilities + * Simplified to match supported file types: PDF, TXT, MD, DOCX, DOC, RTF, CSV, JSON + */ + +export type DocumentIconType = + | "text" + | "pdf" + | "md" + | "markdown" + | "docx" + | "doc" + | "rtf" + | "csv" + | "json" + +/** + * Draws a document type icon on canvas + * @param ctx - Canvas 2D rendering context + * @param x - X position (center of icon) + * @param y - Y position (center of icon) + * @param size - Icon size (width/height) + * @param type - Document type + * @param color - Icon color (default: white) + */ +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() +} + +// Individual icon drawing functions + +function drawTextIcon( + ctx: CanvasRenderingContext2D, + x: number, + y: number, + size: number, +): void { + // Simple document outline with lines + 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() + + // Text lines + 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 { + // Document with "PDF" text + const w = size * 0.7 + const h = size * 0.85 + + ctx.beginPath() + ctx.rect(x - w / 2, y - h / 2, w, h) + ctx.stroke() + + // "PDF" letters (simplified) + 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 { + // Document with "MD" text + const w = size * 0.7 + const h = size * 0.85 + + ctx.beginPath() + ctx.rect(x - w / 2, y - h / 2, w, h) + ctx.stroke() + + // "MD" letters + 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 { + // Document with "DOC" text + const w = size * 0.7 + const h = size * 0.85 + + ctx.beginPath() + ctx.rect(x - w / 2, y - h / 2, w, h) + ctx.stroke() + + // "DOC" letters + 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 { + // Document with "RTF" text + const w = size * 0.7 + const h = size * 0.85 + + ctx.beginPath() + ctx.rect(x - w / 2, y - h / 2, w, h) + ctx.stroke() + + // "RTF" letters + 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 { + // Grid table for CSV + const w = size * 0.7 + const h = size * 0.85 + + ctx.strokeRect(x - w / 2, y - h / 2, w, h) + + // Grid lines (2x2) + ctx.beginPath() + // Vertical line + ctx.moveTo(x, y - h / 2) + ctx.lineTo(x, y + h / 2) + // Horizontal line + 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 { + // Curly braces for JSON + const w = size * 0.6 + const h = size * 0.8 + + // Left brace + 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() + + // Right brace + 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() +} |