595 lines
23 KiB
TypeScript
595 lines
23 KiB
TypeScript
/**
|
|
* <folk-socials-canvas> — campaign & thread canvas view.
|
|
*
|
|
* Renders campaigns and threads as draggable card nodes on an SVG canvas
|
|
* with pan/zoom/drag interactions. Includes a Postiz slide-out panel for
|
|
* post scheduling.
|
|
*/
|
|
|
|
interface CampaignPost {
|
|
id: string;
|
|
platform: string;
|
|
postType: string;
|
|
stepNumber: number;
|
|
content: string;
|
|
scheduledAt: string;
|
|
status: string;
|
|
hashtags: string[];
|
|
phase: number;
|
|
phaseLabel: string;
|
|
}
|
|
|
|
interface Campaign {
|
|
id: string;
|
|
title: string;
|
|
description: string;
|
|
duration: string;
|
|
platforms: string[];
|
|
phases: { name: string; label: string; days: string }[];
|
|
posts: CampaignPost[];
|
|
}
|
|
|
|
interface ThreadData {
|
|
id: string;
|
|
name: string;
|
|
handle: string;
|
|
title: string;
|
|
tweets: string[];
|
|
imageUrl?: string;
|
|
createdAt: number;
|
|
updatedAt: number;
|
|
}
|
|
|
|
interface CanvasNode {
|
|
id: string;
|
|
type: "campaign" | "thread";
|
|
data: Campaign | ThreadData;
|
|
expanded: boolean;
|
|
}
|
|
|
|
const PLATFORM_ICONS: Record<string, string> = {
|
|
x: "\ud835\udd4f", linkedin: "in", instagram: "\ud83d\udcf7",
|
|
youtube: "\u25b6\ufe0f", threads: "\ud83e\uddf5", bluesky: "\ud83e\udd8b",
|
|
};
|
|
|
|
const PLATFORM_COLORS: Record<string, string> = {
|
|
x: "#000000", linkedin: "#0A66C2", instagram: "#E4405F",
|
|
youtube: "#FF0000", threads: "#000000", bluesky: "#0085FF",
|
|
};
|
|
|
|
// Demo campaign inline (same as server campaign-data.ts)
|
|
const DEMO_CAMPAIGN: Campaign = {
|
|
id: "mycofi-earth-launch",
|
|
title: "MycoFi Earth Launch Campaign",
|
|
description: "Multi-platform product launch campaign for MycoFi Earth.",
|
|
duration: "Feb 21\u201325, 2026 (5 days)",
|
|
platforms: ["X", "LinkedIn", "Instagram", "YouTube", "Threads", "Bluesky"],
|
|
phases: [
|
|
{ name: "pre-launch", label: "Pre-Launch Hype", days: "Day -3 to -1" },
|
|
{ name: "launch", label: "Launch Day", days: "Day 0" },
|
|
{ name: "amplification", label: "Amplification", days: "Day +1" },
|
|
],
|
|
posts: [
|
|
{ id: "post-x-teaser", platform: "x", postType: "thread", stepNumber: 1, content: "Something is growing in the mycelium... \ud83c\udf44", scheduledAt: "2026-02-21T09:00:00", status: "scheduled", hashtags: ["MycoFi"], phase: 1, phaseLabel: "Pre-Launch Hype" },
|
|
{ id: "post-linkedin-thought", platform: "linkedin", postType: "article", stepNumber: 2, content: "The regenerative finance movement isn't just about returns...", scheduledAt: "2026-02-22T11:00:00", status: "scheduled", hashtags: ["RegenerativeFinance"], phase: 1, phaseLabel: "Pre-Launch Hype" },
|
|
{ id: "post-ig-carousel", platform: "instagram", postType: "carousel", stepNumber: 3, content: "5 Ways Mycelium Networks Mirror the Future of Finance", scheduledAt: "2026-02-23T14:00:00", status: "scheduled", hashtags: ["MycoFi"], phase: 1, phaseLabel: "Pre-Launch Hype" },
|
|
{ id: "post-yt-launch", platform: "youtube", postType: "video", stepNumber: 4, content: "MycoFi Earth \u2014 Official Launch Video", scheduledAt: "2026-02-24T10:00:00", status: "draft", hashtags: ["MycoFiLaunch"], phase: 2, phaseLabel: "Launch Day" },
|
|
{ id: "post-x-launch", platform: "x", postType: "thread", stepNumber: 5, content: "\ud83c\udf44 MycoFi Earth is LIVE \ud83c\udf44", scheduledAt: "2026-02-24T10:15:00", status: "draft", hashtags: ["MycoFi", "Launch"], phase: 2, phaseLabel: "Launch Day" },
|
|
{ id: "post-threads-xpost", platform: "threads", postType: "text", stepNumber: 8, content: "We just launched MycoFi Earth and the response has been incredible", scheduledAt: "2026-02-25T14:00:00", status: "draft", hashtags: ["MycoFi"], phase: 3, phaseLabel: "Amplification" },
|
|
],
|
|
};
|
|
|
|
const DEMO_THREADS: ThreadData[] = [
|
|
{ id: "t-demo-1", name: "Jeff Emmett", handle: "@jeffemmett", title: "Why Regenerative Finance Needs Mycelial Networks", tweets: ["The old financial system is composting itself. Here's why \ud83e\uddf5\ud83d\udc47", "Mycelium doesn't hoard \u2014 it redistributes nutrients.", "What if finance worked the same way?"], createdAt: Date.now() - 86400000, updatedAt: Date.now() - 3600000 },
|
|
{ id: "t-demo-2", name: "Commons DAO", handle: "@commonsdao", title: "Governance Patterns for Web3 Communities", tweets: ["Thread: 7 governance patterns we've tested at Commons DAO", "1/ Conviction voting \u2014 signal strength over time", "2/ Composting \u2014 failed proposals return resources to the pool"], createdAt: Date.now() - 172800000, updatedAt: Date.now() - 86400000 },
|
|
];
|
|
|
|
class FolkSocialsCanvas extends HTMLElement {
|
|
private shadow: ShadowRoot;
|
|
private space = "";
|
|
|
|
// Data
|
|
private campaigns: Campaign[] = [];
|
|
private threads: ThreadData[] = [];
|
|
private canvasNodes: CanvasNode[] = [];
|
|
|
|
// Canvas state
|
|
private canvasZoom = 1;
|
|
private canvasPanX = 0;
|
|
private canvasPanY = 0;
|
|
private nodePositions: Record<string, { x: number; y: number }> = {};
|
|
private draggingNodeId: string | null = null;
|
|
private dragStartX = 0;
|
|
private dragStartY = 0;
|
|
private dragNodeStartX = 0;
|
|
private dragNodeStartY = 0;
|
|
private isPanning = false;
|
|
private panStartX = 0;
|
|
private panStartY = 0;
|
|
private panStartPanX = 0;
|
|
private panStartPanY = 0;
|
|
private isTouchPanning = false;
|
|
private lastTouchCenter: { x: number; y: number } | null = null;
|
|
private lastTouchDist: number | null = null;
|
|
|
|
// Postiz panel
|
|
private postizOpen = false;
|
|
|
|
constructor() {
|
|
super();
|
|
this.shadow = this.attachShadow({ mode: "open" });
|
|
}
|
|
|
|
connectedCallback() {
|
|
this.space = this.getAttribute("space") || "demo";
|
|
this.loadData();
|
|
}
|
|
|
|
private async loadData() {
|
|
if (this.space === "demo") {
|
|
this.campaigns = [DEMO_CAMPAIGN];
|
|
this.threads = DEMO_THREADS;
|
|
} else {
|
|
try {
|
|
const base = this.getApiBase();
|
|
const [campRes, threadRes] = await Promise.all([
|
|
fetch(`${base}/api/campaigns`).catch(() => null),
|
|
fetch(`${base}/api/threads`).catch(() => null),
|
|
]);
|
|
if (campRes?.ok) {
|
|
const data = await campRes.json();
|
|
this.campaigns = Array.isArray(data) ? data : (data.campaigns || [DEMO_CAMPAIGN]);
|
|
} else {
|
|
this.campaigns = [DEMO_CAMPAIGN];
|
|
}
|
|
if (threadRes?.ok) {
|
|
this.threads = await threadRes.json();
|
|
}
|
|
} catch {
|
|
this.campaigns = [DEMO_CAMPAIGN];
|
|
this.threads = DEMO_THREADS;
|
|
}
|
|
}
|
|
|
|
this.buildCanvasNodes();
|
|
this.layoutNodes();
|
|
this.render();
|
|
requestAnimationFrame(() => this.fitView());
|
|
}
|
|
|
|
private getApiBase(): string {
|
|
const path = window.location.pathname;
|
|
const match = path.match(/^(\/[^/]+)?\/rsocials/);
|
|
return match ? match[0] : "";
|
|
}
|
|
|
|
private getSchedulerUrl(): string {
|
|
return `${this.getApiBase()}/scheduler`;
|
|
}
|
|
|
|
private buildCanvasNodes() {
|
|
this.canvasNodes = [];
|
|
for (const c of this.campaigns) {
|
|
this.canvasNodes.push({ id: `camp-${c.id}`, type: "campaign", data: c, expanded: false });
|
|
}
|
|
for (const t of this.threads) {
|
|
this.canvasNodes.push({ id: `thread-${t.id}`, type: "thread", data: t, expanded: false });
|
|
}
|
|
}
|
|
|
|
private layoutNodes() {
|
|
// Grid layout: campaigns top row, threads below
|
|
const campGap = 380;
|
|
const threadGap = 340;
|
|
let cx = 50;
|
|
for (const node of this.canvasNodes) {
|
|
if (node.type === "campaign") {
|
|
this.nodePositions[node.id] = { x: cx, y: 50 };
|
|
cx += campGap;
|
|
}
|
|
}
|
|
let tx = 50;
|
|
for (const node of this.canvasNodes) {
|
|
if (node.type === "thread") {
|
|
this.nodePositions[node.id] = { x: tx, y: 350 };
|
|
tx += threadGap;
|
|
}
|
|
}
|
|
}
|
|
|
|
private getNodeSize(node: CanvasNode): { w: number; h: number } {
|
|
if (node.type === "campaign") {
|
|
const camp = node.data as Campaign;
|
|
if (node.expanded) {
|
|
return { w: 320, h: 200 + camp.posts.length * 48 };
|
|
}
|
|
return { w: 320, h: 200 };
|
|
} else {
|
|
const thread = node.data as ThreadData;
|
|
if (node.expanded) {
|
|
return { w: 280, h: 140 + thread.tweets.length * 44 };
|
|
}
|
|
return { w: 280, h: 140 };
|
|
}
|
|
}
|
|
|
|
// ── Canvas transform ──
|
|
|
|
private updateCanvasTransform() {
|
|
const g = this.shadow.getElementById("canvas-transform");
|
|
if (g) g.setAttribute("transform", `translate(${this.canvasPanX},${this.canvasPanY}) scale(${this.canvasZoom})`);
|
|
}
|
|
|
|
private fitView() {
|
|
const svg = this.shadow.getElementById("socials-svg") as SVGSVGElement | null;
|
|
if (!svg) return;
|
|
if (this.canvasNodes.length === 0) return;
|
|
|
|
const pad = 60;
|
|
let minX = Infinity, minY = Infinity, maxX = -Infinity, maxY = -Infinity;
|
|
for (const node of this.canvasNodes) {
|
|
const pos = this.nodePositions[node.id];
|
|
if (!pos) continue;
|
|
const size = this.getNodeSize(node);
|
|
if (pos.x < minX) minX = pos.x;
|
|
if (pos.y < minY) minY = pos.y;
|
|
if (pos.x + size.w > maxX) maxX = pos.x + size.w;
|
|
if (pos.y + size.h > maxY) maxY = pos.y + size.h;
|
|
}
|
|
|
|
const contentW = maxX - minX;
|
|
const contentH = maxY - minY;
|
|
const rect = svg.getBoundingClientRect();
|
|
const svgW = rect.width || 800;
|
|
const svgH = rect.height || 600;
|
|
|
|
const zoom = Math.min((svgW - pad * 2) / Math.max(contentW, 1), (svgH - pad * 2) / Math.max(contentH, 1), 2);
|
|
this.canvasZoom = Math.max(0.1, Math.min(zoom, 4));
|
|
this.canvasPanX = (svgW / 2) - ((minX + maxX) / 2) * this.canvasZoom;
|
|
this.canvasPanY = (svgH / 2) - ((minY + maxY) / 2) * this.canvasZoom;
|
|
this.updateCanvasTransform();
|
|
this.updateZoomDisplay();
|
|
}
|
|
|
|
private updateZoomDisplay() {
|
|
const el = this.shadow.getElementById("zoom-level");
|
|
if (el) el.textContent = `${Math.round(this.canvasZoom * 100)}%`;
|
|
}
|
|
|
|
private zoomAt(screenX: number, screenY: number, factor: number) {
|
|
const oldZoom = this.canvasZoom;
|
|
const newZoom = Math.max(0.1, Math.min(4, oldZoom * factor));
|
|
this.canvasPanX = screenX - (screenX - this.canvasPanX) * (newZoom / oldZoom);
|
|
this.canvasPanY = screenY - (screenY - this.canvasPanY) * (newZoom / oldZoom);
|
|
this.canvasZoom = newZoom;
|
|
this.updateCanvasTransform();
|
|
this.updateZoomDisplay();
|
|
}
|
|
|
|
// ── Render ──
|
|
|
|
private renderCampaignNode(node: CanvasNode): string {
|
|
const camp = node.data as Campaign;
|
|
const pos = this.nodePositions[node.id];
|
|
if (!pos) return "";
|
|
const { w, h } = this.getNodeSize(node);
|
|
|
|
const scheduled = camp.posts.filter(p => p.status === "scheduled").length;
|
|
const draft = camp.posts.filter(p => p.status === "draft").length;
|
|
const phaseProgress = Math.round((scheduled / Math.max(camp.posts.length, 1)) * 100);
|
|
|
|
const platformIcons = camp.platforms.map(p => {
|
|
const key = p.toLowerCase();
|
|
const icon = PLATFORM_ICONS[key] || p.charAt(0);
|
|
const color = PLATFORM_COLORS[key] || "#888";
|
|
return `<span style="display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;border-radius:4px;background:${color}22;color:${color};font-size:10px;font-weight:700">${icon}</span>`;
|
|
}).join("");
|
|
|
|
let postsHtml = "";
|
|
if (node.expanded) {
|
|
postsHtml = camp.posts.map(p => {
|
|
const icon = PLATFORM_ICONS[p.platform] || p.platform;
|
|
const statusColor = p.status === "scheduled" ? "#22c55e" : "#f59e0b";
|
|
const preview = p.content.substring(0, 60) + (p.content.length > 60 ? "\u2026" : "");
|
|
return `
|
|
<div xmlns="http://www.w3.org/1999/xhtml" style="display:flex;align-items:center;gap:6px;padding:6px 8px;border-top:1px solid rgba(255,255,255,0.06);font-size:11px;color:#ccc">
|
|
<span style="font-size:10px">${icon}</span>
|
|
<span style="flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap">${this.esc(preview)}</span>
|
|
<span style="width:6px;height:6px;border-radius:50%;background:${statusColor};flex-shrink:0"></span>
|
|
</div>`;
|
|
}).join("");
|
|
}
|
|
|
|
return `
|
|
<g class="canvas-node" data-canvas-node="${node.id}" style="cursor:pointer">
|
|
<foreignObject x="${pos.x}" y="${pos.y}" width="${w}" height="${h}">
|
|
<div xmlns="http://www.w3.org/1999/xhtml" style="width:100%;height:100%;background:#1a1a2e;border:1px solid #2d2d44;border-radius:12px;overflow:hidden;font-family:system-ui,-apple-system,sans-serif">
|
|
<div style="padding:14px 16px;border-bottom:1px solid rgba(255,255,255,0.06)">
|
|
<div style="display:flex;align-items:center;gap:8px;margin-bottom:8px">
|
|
<span style="font-size:16px">\ud83d\udce2</span>
|
|
<span style="font-size:13px;font-weight:700;color:#e2e8f0;flex:1">${this.esc(camp.title)}</span>
|
|
<span style="font-size:10px;padding:2px 6px;border-radius:4px;background:#6366f122;color:#818cf8">${node.expanded ? "\u25b2" : "\u25bc"}</span>
|
|
</div>
|
|
<div style="font-size:11px;color:#94a3b8;margin-bottom:10px">${this.esc(camp.duration)}</div>
|
|
<div style="display:flex;gap:4px;margin-bottom:10px">${platformIcons}</div>
|
|
<div style="display:flex;align-items:center;gap:8px;font-size:11px;color:#94a3b8">
|
|
<div style="flex:1;height:4px;background:#1e293b;border-radius:2px;overflow:hidden">
|
|
<div style="width:${phaseProgress}%;height:100%;background:#6366f1;border-radius:2px"></div>
|
|
</div>
|
|
<span>${scheduled} scheduled</span>
|
|
<span style="color:#f59e0b">${draft} draft</span>
|
|
</div>
|
|
</div>
|
|
${postsHtml}
|
|
</div>
|
|
</foreignObject>
|
|
</g>`;
|
|
}
|
|
|
|
private renderThreadNode(node: CanvasNode): string {
|
|
const thread = node.data as ThreadData;
|
|
const pos = this.nodePositions[node.id];
|
|
if (!pos) return "";
|
|
const { w, h } = this.getNodeSize(node);
|
|
|
|
const initial = (thread.name || "?").charAt(0).toUpperCase();
|
|
const dateStr = new Date(thread.updatedAt).toLocaleDateString("en-US", { month: "short", day: "numeric" });
|
|
|
|
let tweetsHtml = "";
|
|
if (node.expanded) {
|
|
tweetsHtml = thread.tweets.map((t, i) => {
|
|
const preview = t.substring(0, 80) + (t.length > 80 ? "\u2026" : "");
|
|
return `
|
|
<div xmlns="http://www.w3.org/1999/xhtml" style="padding:6px 8px;border-top:1px solid rgba(255,255,255,0.06);font-size:11px;color:#ccc;display:flex;gap:6px">
|
|
<span style="color:#6366f1;font-weight:700;flex-shrink:0">${i + 1}.</span>
|
|
<span style="overflow:hidden;text-overflow:ellipsis;white-space:nowrap">${this.esc(preview)}</span>
|
|
</div>`;
|
|
}).join("");
|
|
}
|
|
|
|
return `
|
|
<g class="canvas-node" data-canvas-node="${node.id}" style="cursor:pointer">
|
|
<foreignObject x="${pos.x}" y="${pos.y}" width="${w}" height="${h}">
|
|
<div xmlns="http://www.w3.org/1999/xhtml" style="width:100%;height:100%;background:#1a1a2e;border:1px solid #2d2d44;border-radius:12px;overflow:hidden;font-family:system-ui,-apple-system,sans-serif">
|
|
<div style="padding:14px 16px;border-bottom:1px solid rgba(255,255,255,0.06)">
|
|
<div style="display:flex;align-items:center;gap:8px;margin-bottom:6px">
|
|
<span style="font-size:14px">\ud83e\uddf5</span>
|
|
<span style="font-size:13px;font-weight:700;color:#e2e8f0;flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap">${this.esc(thread.title)}</span>
|
|
<span style="font-size:10px;padding:2px 6px;border-radius:4px;background:#6366f122;color:#818cf8">${node.expanded ? "\u25b2" : "\u25bc"}</span>
|
|
</div>
|
|
<div style="display:flex;align-items:center;gap:6px;font-size:11px;color:#94a3b8">
|
|
<span style="width:18px;height:18px;border-radius:50%;background:#6366f1;display:flex;align-items:center;justify-content:center;color:white;font-size:9px;font-weight:700;flex-shrink:0">${initial}</span>
|
|
<span>${this.esc(thread.handle || thread.name)}</span>
|
|
<span style="margin-left:auto">${thread.tweets.length} tweet${thread.tweets.length === 1 ? "" : "s"}</span>
|
|
<span>\u00b7</span>
|
|
<span>${dateStr}</span>
|
|
</div>
|
|
</div>
|
|
${tweetsHtml}
|
|
</div>
|
|
</foreignObject>
|
|
</g>`;
|
|
}
|
|
|
|
private render() {
|
|
const nodesSvg = this.canvasNodes.map(node => {
|
|
if (node.type === "campaign") return this.renderCampaignNode(node);
|
|
return this.renderThreadNode(node);
|
|
}).join("");
|
|
|
|
this.shadow.innerHTML = `
|
|
<link rel="stylesheet" href="/modules/rsocials/socials-canvas.css">
|
|
<div class="socials-canvas-root">
|
|
<div class="sc-toolbar">
|
|
<span class="sc-toolbar__title">\ud83d\udce2 rSocials Canvas${this.space === "demo" ? '<span class="sc-demo-badge">Demo</span>' : ""}</span>
|
|
<div class="sc-toolbar__actions">
|
|
<button class="sc-btn sc-btn--postiz" id="toggle-postiz">Schedule in Postiz</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="sc-canvas-area">
|
|
<div class="sc-canvas" id="sc-canvas">
|
|
<svg id="socials-svg" width="100%" height="100%">
|
|
<g id="canvas-transform" transform="translate(${this.canvasPanX},${this.canvasPanY}) scale(${this.canvasZoom})">
|
|
${nodesSvg}
|
|
</g>
|
|
</svg>
|
|
<div class="sc-zoom-controls">
|
|
<button class="sc-zoom-btn" id="zoom-in" title="Zoom in">+</button>
|
|
<span class="sc-zoom-level" id="zoom-level">${Math.round(this.canvasZoom * 100)}%</span>
|
|
<button class="sc-zoom-btn" id="zoom-out" title="Zoom out">−</button>
|
|
<button class="sc-zoom-btn sc-zoom-btn--fit" id="zoom-fit" title="Fit to view">⤢</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="sc-postiz-panel ${this.postizOpen ? "open" : ""}" id="postiz-panel">
|
|
<div class="sc-postiz-header">
|
|
<span class="sc-postiz-title">Postiz — Post Scheduler</span>
|
|
<button class="sc-postiz-close" id="close-postiz">\u2715</button>
|
|
</div>
|
|
<iframe class="sc-postiz-iframe" src="${this.postizOpen ? "${this.getSchedulerUrl()}" : "about:blank"}" title="Postiz"></iframe>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
`;
|
|
|
|
this.attachListeners();
|
|
}
|
|
|
|
private attachListeners() {
|
|
// Postiz panel toggle
|
|
this.shadow.getElementById("toggle-postiz")?.addEventListener("click", () => {
|
|
this.postizOpen = !this.postizOpen;
|
|
const panel = this.shadow.getElementById("postiz-panel");
|
|
const iframe = panel?.querySelector("iframe");
|
|
if (panel) panel.classList.toggle("open", this.postizOpen);
|
|
if (iframe && this.postizOpen) iframe.src = "${this.getSchedulerUrl()}";
|
|
if (iframe && !this.postizOpen) iframe.src = "about:blank";
|
|
});
|
|
this.shadow.getElementById("close-postiz")?.addEventListener("click", () => {
|
|
this.postizOpen = false;
|
|
const panel = this.shadow.getElementById("postiz-panel");
|
|
const iframe = panel?.querySelector("iframe");
|
|
if (panel) panel.classList.remove("open");
|
|
if (iframe) iframe.src = "about:blank";
|
|
});
|
|
|
|
// Zoom controls
|
|
this.shadow.getElementById("zoom-in")?.addEventListener("click", () => {
|
|
const svg = this.shadow.getElementById("socials-svg") as SVGSVGElement | null;
|
|
if (!svg) return;
|
|
const rect = svg.getBoundingClientRect();
|
|
this.zoomAt(rect.width / 2, rect.height / 2, 1.25);
|
|
});
|
|
this.shadow.getElementById("zoom-out")?.addEventListener("click", () => {
|
|
const svg = this.shadow.getElementById("socials-svg") as SVGSVGElement | null;
|
|
if (!svg) return;
|
|
const rect = svg.getBoundingClientRect();
|
|
this.zoomAt(rect.width / 2, rect.height / 2, 0.8);
|
|
});
|
|
this.shadow.getElementById("zoom-fit")?.addEventListener("click", () => this.fitView());
|
|
|
|
// Canvas interactions
|
|
const canvas = this.shadow.getElementById("sc-canvas");
|
|
const svg = this.shadow.getElementById("socials-svg") as SVGSVGElement | null;
|
|
if (!svg || !canvas) return;
|
|
|
|
// Node click → expand/collapse
|
|
this.shadow.querySelectorAll("[data-canvas-node]").forEach(el => {
|
|
const nodeEl = el as SVGGElement;
|
|
// We handle click vs drag in pointerup
|
|
});
|
|
|
|
// Wheel zoom
|
|
svg.addEventListener("wheel", (e: WheelEvent) => {
|
|
e.preventDefault();
|
|
const rect = svg.getBoundingClientRect();
|
|
const mx = e.clientX - rect.left;
|
|
const my = e.clientY - rect.top;
|
|
const factor = 1 - e.deltaY * 0.003;
|
|
this.zoomAt(mx, my, factor);
|
|
}, { passive: false });
|
|
|
|
// Pointer down — node drag or canvas pan
|
|
svg.addEventListener("pointerdown", (e: PointerEvent) => {
|
|
if (e.button !== 0) return;
|
|
const target = (e.target as Element).closest("[data-canvas-node]") as HTMLElement | null;
|
|
|
|
if (target) {
|
|
const nodeId = target.dataset.canvasNode!;
|
|
this.draggingNodeId = nodeId;
|
|
this.dragStartX = e.clientX;
|
|
this.dragStartY = e.clientY;
|
|
const pos = this.nodePositions[nodeId];
|
|
if (pos) {
|
|
this.dragNodeStartX = pos.x;
|
|
this.dragNodeStartY = pos.y;
|
|
}
|
|
svg.setPointerCapture(e.pointerId);
|
|
e.preventDefault();
|
|
} else {
|
|
this.isPanning = true;
|
|
this.panStartX = e.clientX;
|
|
this.panStartY = e.clientY;
|
|
this.panStartPanX = this.canvasPanX;
|
|
this.panStartPanY = this.canvasPanY;
|
|
canvas.classList.add("grabbing");
|
|
svg.setPointerCapture(e.pointerId);
|
|
e.preventDefault();
|
|
}
|
|
});
|
|
|
|
svg.addEventListener("pointermove", (e: PointerEvent) => {
|
|
if (this.draggingNodeId) {
|
|
const dx = (e.clientX - this.dragStartX) / this.canvasZoom;
|
|
const dy = (e.clientY - this.dragStartY) / this.canvasZoom;
|
|
const pos = this.nodePositions[this.draggingNodeId];
|
|
if (pos) {
|
|
pos.x = this.dragNodeStartX + dx;
|
|
pos.y = this.dragNodeStartY + dy;
|
|
// Move the foreignObject directly
|
|
const g = this.shadow.querySelector(`[data-canvas-node="${this.draggingNodeId}"]`);
|
|
const fo = g?.querySelector("foreignObject");
|
|
if (fo) {
|
|
fo.setAttribute("x", String(pos.x));
|
|
fo.setAttribute("y", String(pos.y));
|
|
}
|
|
}
|
|
} else if (this.isPanning) {
|
|
this.canvasPanX = this.panStartPanX + (e.clientX - this.panStartX);
|
|
this.canvasPanY = this.panStartPanY + (e.clientY - this.panStartY);
|
|
this.updateCanvasTransform();
|
|
}
|
|
});
|
|
|
|
svg.addEventListener("pointerup", (e: PointerEvent) => {
|
|
if (this.draggingNodeId) {
|
|
const dx = Math.abs(e.clientX - this.dragStartX);
|
|
const dy = Math.abs(e.clientY - this.dragStartY);
|
|
if (dx < 4 && dy < 4) {
|
|
// Click — toggle expand
|
|
const node = this.canvasNodes.find(n => n.id === this.draggingNodeId);
|
|
if (node) {
|
|
node.expanded = !node.expanded;
|
|
this.draggingNodeId = null;
|
|
this.render();
|
|
requestAnimationFrame(() => this.updateCanvasTransform());
|
|
return;
|
|
}
|
|
}
|
|
this.draggingNodeId = null;
|
|
}
|
|
if (this.isPanning) {
|
|
this.isPanning = false;
|
|
canvas.classList.remove("grabbing");
|
|
}
|
|
});
|
|
|
|
// Touch pinch-zoom
|
|
svg.addEventListener("touchstart", (e: TouchEvent) => {
|
|
if (e.touches.length === 2) {
|
|
e.preventDefault();
|
|
this.isTouchPanning = true;
|
|
const t0 = e.touches[0], t1 = e.touches[1];
|
|
this.lastTouchCenter = { x: (t0.clientX + t1.clientX) / 2, y: (t0.clientY + t1.clientY) / 2 };
|
|
this.lastTouchDist = Math.hypot(t1.clientX - t0.clientX, t1.clientY - t0.clientY);
|
|
}
|
|
}, { passive: false });
|
|
|
|
svg.addEventListener("touchmove", (e: TouchEvent) => {
|
|
if (e.touches.length === 2 && this.isTouchPanning) {
|
|
e.preventDefault();
|
|
const t0 = e.touches[0], t1 = e.touches[1];
|
|
const center = { x: (t0.clientX + t1.clientX) / 2, y: (t0.clientY + t1.clientY) / 2 };
|
|
const dist = Math.hypot(t1.clientX - t0.clientX, t1.clientY - t0.clientY);
|
|
|
|
if (this.lastTouchCenter && this.lastTouchDist) {
|
|
this.canvasPanX += center.x - this.lastTouchCenter.x;
|
|
this.canvasPanY += center.y - this.lastTouchCenter.y;
|
|
const rect = svg.getBoundingClientRect();
|
|
const mx = center.x - rect.left;
|
|
const my = center.y - rect.top;
|
|
const factor = dist / this.lastTouchDist;
|
|
this.zoomAt(mx, my, factor);
|
|
}
|
|
this.lastTouchCenter = center;
|
|
this.lastTouchDist = dist;
|
|
}
|
|
}, { passive: false });
|
|
|
|
svg.addEventListener("touchend", () => {
|
|
this.isTouchPanning = false;
|
|
this.lastTouchCenter = null;
|
|
this.lastTouchDist = null;
|
|
});
|
|
}
|
|
|
|
private esc(s: string): string {
|
|
const d = document.createElement("div");
|
|
d.textContent = s || "";
|
|
return d.innerHTML;
|
|
}
|
|
}
|
|
|
|
customElements.define("folk-socials-canvas", FolkSocialsCanvas);
|