[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8},"actionData","errors","root",{"_26":27,"_28":29,"_30":12,"_31":12,"_32":12,"_33":12,"_34":12,"_35":12,"_36":37},"routes/canvas.shared.$sharedTextdocId",{"_9":10,"_11":12},"sharedTextdoc",{"_13":14,"_15":-7,"_16":17,"_18":19,"_20":21,"_22":23,"_24":12,"_25":12},"isAuthenticated",false,"sharedTextdocId","6895560525308191bf446830c9e3338b","versionInt","title","Collage Editor Component (react Type Script)","type","code/react","content","import React, { useRef, useState, useEffect } from \"react\";\n\n// CollageEditor.tsx\n// Minimal, self-contained React + TypeScript implementation of the collage editor MVP.\n// - Tailwind classes used for styling (no imports required in canvas preview per spec)\n// - Uses an 8x8 grid by default, supports platform presets, drag/drop, randomize, simple export\n\ntype Platform = \"LinkedIn\" | \"X\" | \"Instagram\" | \"Facebook\" | \"Pinterest\" | \"Custom\";\n\ntype Asset = {\n id: string;\n url: string;\n width?: number;\n height?: number;\n};\n\ntype Slot = {\n id: string;\n x: number; // grid x\n y: number; // grid y\n w: number; // grid width\n h: number; // grid height\n assetId?: string | null;\n locked?: boolean;\n};\n\nconst PLATFORM_PRESETS: Record = {\n LinkedIn: { w: 1200, h: 627 },\n X: { w: 1600, h: 900 },\n Instagram: { w: 1080, h: 1080 },\n Facebook: { w: 1200, h: 630 },\n Pinterest: { w: 1000, h: 1500 },\n Custom: { w: 1200, h: 1200 },\n};\n\n// A few curated templates (grid units on an 8x8 grid)\nconst TEMPLATES_BY_COUNT: Record = {\n 1: [\n [{ id: \"s1\", x: 0, y: 0, w: 8, h: 8 }],\n [{ id: \"s1\", x: 0, y: 0, w: 8, h: 8 }],\n [{ id: \"s1\", x: 0, y: 0, w: 8, h: 8 }],\n ],\n 2: [\n [\n { id: \"s1\", x: 0, y: 0, w: 4, h: 8 },\n { id: \"s2\", x: 4, y: 0, w: 4, h: 8 },\n ],\n [\n { id: \"s1\", x: 0, y: 0, w: 8, h: 4 },\n { id: \"s2\", x: 0, y: 4, w: 8, h: 4 },\n ],\n ],\n 3: [\n [\n { id: \"s1\", x: 0, y: 0, w: 8, h: 4 },\n { id: \"s2\", x: 0, y: 4, w: 4, h: 4 },\n { id: \"s3\", x: 4, y: 4, w: 4, h: 4 },\n ],\n [\n { id: \"s1\", x: 0, y: 0, w: 5, h: 8 },\n { id: \"s2\", x: 5, y: 0, w: 3, h: 4 },\n { id: \"s3\", x: 5, y: 4, w: 3, h: 4 },\n ],\n ],\n 4: [\n [\n { id: \"s1\", x: 0, y: 0, w: 4, h: 4 },\n { id: \"s2\", x: 4, y: 0, w: 4, h: 4 },\n { id: \"s3\", x: 0, y: 4, w: 4, h: 4 },\n { id: \"s4\", x: 4, y: 4, w: 4, h: 4 },\n ],\n [\n { id: \"s1\", x: 0, y: 0, w: 8, h: 3 },\n { id: \"s2\", x: 0, y: 3, w: 4, h: 5 },\n { id: \"s3\", x: 4, y: 3, w: 4, h: 2 },\n { id: \"s4\", x: 4, y: 5, w: 4, h: 3 },\n ],\n ],\n};\n\nfunction uid(prefix = \"id\") {\n return prefix + Math.random().toString(36).slice(2, 9);\n}\n\nexport default function CollageEditor() {\n const [platform, setPlatform] = useState(\"LinkedIn\");\n const canvasSize = PLATFORM_PRESETS[platform];\n const [gridSize, setGridSize] = useState(8);\n const [assets, setAssets] = useState([]);\n const [slots, setSlots] = useState(() =>\n TEMPLATES_BY_COUNT[1][0].map((s) => ({ ...s }))\n );\n const [borderPx, setBorderPx] = useState(4);\n const [showBorders, setShowBorders] = useState(true);\n const canvasRef = useRef(null);\n const exportCanvasRef = useRef(null);\n\n useEffect(() => {\n // when platform changes, keep same logical grid but UI scale may change; no structural change here\n }, [platform]);\n\n useEffect(() => {\n // when number of assets changes, pick a template\n const n = Math.min(Math.max(1, assets.length), 4);\n const pool = TEMPLATES_BY_COUNT[n] || TEMPLATES_BY_COUNT[4];\n const chosen = pool[0];\n // assign assets to slots in order\n const newSlots = chosen.map((s, i) => ({ ...s, assetId: assets[i]?.id ?? null, locked: false }));\n setSlots(newSlots);\n }, [assets]);\n\n function onFiles(files: FileList | null) {\n if (!files) return;\n const arr = Array.from(files).slice(0, 9);\n const readers = arr.map((f) => {\n return new Promise((res) => {\n const reader = new FileReader();\n reader.onload = () => {\n res({ id: uid(\"a\"), url: reader.result as string });\n };\n reader.readAsDataURL(f);\n });\n });\n Promise.all(readers).then((loaded) => {\n setAssets((s) => [...s, ...loaded]);\n });\n }\n\n function randomize() {\n const n = Math.min(Math.max(1, assets.length), 4);\n const pool = TEMPLATES_BY_COUNT[n] || TEMPLATES_BY_COUNT[4];\n const chosen = pool[Math.floor(Math.random() * pool.length)];\n // shuffle assets (honor locked)\n const unlockedSlots = chosen.map((s) => ({ ...s }));\n const freeAssets = assets.map((a) => a.id);\n\n // simple shuffle\n for (let i = freeAssets.length - 1; i > 0; i--) {\n const j = Math.floor(Math.random() * (i + 1));\n [freeAssets[i], freeAssets[j]] = [freeAssets[j], freeAssets[i]];\n }\n const newSlots = unlockedSlots.map((s, i) => ({ ...s, assetId: freeAssets[i] ?? null, locked: false }));\n setSlots(newSlots);\n }\n\n function exportImage(scale = 1) {\n const canvas = document.createElement(\"canvas\");\n const w = canvasSize.w * scale;\n const h = canvasSize.h * scale;\n canvas.width = w;\n canvas.height = h;\n const ctx = canvas.getContext(\"2d\")!;\n // background\n ctx.fillStyle = \"#ffffff\";\n ctx.fillRect(0, 0, w, h);\n\n // draw slots\n const unitW = w / gridSize;\n const unitH = h / gridSize;\n\n const drawPromises: Promise[] = [];\n\n slots.forEach((slot) => {\n const x = slot.x * unitW;\n const y = slot.y * unitH;\n const sw = slot.w * unitW;\n const sh = slot.h * unitH;\n // border\n if (showBorders && borderPx > 0) {\n ctx.fillStyle = \"#ffffff\";\n ctx.fillRect(x, y, sw, sh);\n }\n if (slot.assetId) {\n const asset = assets.find((a) => a.id === slot.assetId);\n if (asset) {\n const p = new Promise((res) => {\n const img = new Image();\n img.onload = () => {\n // fill using cover behavior\n const arImg = img.width / img.height;\n const arSlot = sw / sh;\n let dw = sw,\n dh = sh,\n dx = 0,\n dy = 0;\n if (arImg > arSlot) {\n // image wider -> fit height\n dh = sh;\n dw = dh * arImg;\n dx = x - (dw - sw) / 2;\n dy = y;\n } else {\n // image taller -> fit width\n dw = sw;\n dh = dw / arImg;\n dx = x;\n dy = y - (dh - sh) / 2;\n }\n ctx.drawImage(img, dx, dy, dw, dh);\n // draw inner border overlay if visible (simulate gutter)\n res();\n };\n img.onerror = () => res();\n img.src = asset.url;\n });\n drawPromises.push(p);\n }\n }\n // draw stroke border\n if (showBorders && borderPx > 0) {\n ctx.strokeStyle = \"#ffffff\";\n ctx.lineWidth = borderPx * scale;\n ctx.strokeRect(x + borderPx / 2, y + borderPx / 2, sw - borderPx, sh - borderPx);\n }\n });\n\n Promise.all(drawPromises).then(() => {\n const data = canvas.toDataURL(\"image/jpeg\", 0.9);\n const a = document.createElement(\"a\");\n a.href = data;\n a.download = `${platform.toLowerCase()}-collage.jpg`;\n a.click();\n });\n }\n\n return (\n

\n {(Object.keys(PLATFORM_PRESETS) as Platform[]).map((p) => (\n setPlatform(p)}\n >\n {p}\n \n ))}\n

\n\n

\n \n setShowBorders(e.target.checked)} />\n Borders\n \n setBorderPx(Number(e.target.value))}\n className=\"w-40\"\n />\n \n exportImage(1)}\n >\n Export\n \n

\n\n

\n Upload images\n onFiles(e.target.files)} />\n

\n Assets\n

\n {assets.map((a) => (\n

\n setAssets((s) => s.filter((x) => x.id !== a.id))}\n >\n ✕\n \n

\n ))}\n

\n\n

Canvas: {canvasSize.w} × {canvasSize.h}px — Grid: {gridSize} × {gridSize}

Drop images onto the canvas to replace slots. Drag inside slot to pan (not implemented in MVP).

\n \n {/* visual grid */}\n {slots.map((slot) => {\n const containerW = Math.min(canvasSize.w, 1000);\n const containerH = (containerW * canvasSize.h) / canvasSize.w;\n const unitW = containerW / gridSize;\n const unitH = containerH / gridSize;\n const x = slot.x * unitW;\n const y = slot.y * unitH;\n const w = slot.w * unitW;\n const h = slot.h * unitH;\n const asset = assets.find((a) => a.id === slot.assetId);\n return (\n {\n e.preventDefault();\n const id = e.dataTransfer.getData(\"asset/id\");\n if (id) {\n setSlots((s) => s.map((sl) => (sl.id === slot.id ? { ...sl, assetId: id } : sl)));\n }\n }}\n onDragOver={(e) => e.preventDefault()}\n >\n {asset ? (\n

\n ) : (\n

\n )}\n

\n setSlots((s) => s.map((sl) => (sl.id === slot.id ? { ...sl, locked: !sl.locked } : sl)))}\n >\n {slot.locked ? \"🔒\" : \"🔓\"}\n \n setSlots((s) => s.filter((sl) => sl.id !== slot.id))}\n >\n ✕\n \n

\n );\n })}\n

\n\n

Tips: Use Randomize to try different layouts. You can remove/replace assets from the left panel.

\n \n \n );\n}\n","access","public","isModerationBlocked","isAnonifyApiKeyDetected","dd",{"_38":39,"_40":41},"disablePrefetch",true,"shouldPrefetchAccount","shouldPrefetchUser","shouldPrefetchSystemHints","promoteCss","disableSSR","stripModulepreloadImports","statsigGateEvaluationsPromise",["P",37],"traceId","15113971610213039225","traceTime",1778461701435]