@@ -540,6 +535,101 @@ export class FolkHolonExplorer extends FolkShape {
});
}
+ #buildHolonSvg(visible: ExplorerNode[], overflow: number, W: number, H: number): string {
+ const cx = W / 2, cy = H / 2;
+ let orbit = Math.min(W, H) * 0.35;
+ if (this.#children.length > 8) orbit *= 0.85;
+
+ const gridSvg = metatronGrid(Math.min(W, H));
+ const linesSvg: string[] = [];
+ const nodesSvg: string[] = [];
+
+ for (let i = 0; i < visible.length; i++) {
+ const child = visible[i];
+ const angle = -110 + (220 / (visible.length + 1)) * (i + 1);
+ const rad = (angle - 90) * Math.PI / 180;
+ const nx = cx + orbit * Math.cos(rad);
+ const ny = cy + orbit * Math.sin(rad);
+ const r = Math.min(36, Math.max(16, 16 + child.weight * 0.3));
+
+ linesSvg.push(
+ `
`
+ );
+
+ const fill = `rgba(16,185,129,${(0.1 + child.weight * 0.005).toFixed(3)})`;
+ nodesSvg.push(`
+
+
+ ${esc(child.label.length > 14 ? child.label.slice(0, 12) + '…' : child.label)}
+
+ `);
+ }
+
+ const centerLabel = esc(this.#breadcrumb[this.#breadcrumb.length - 1]?.label.slice(0, 8) || '?');
+ const centerSvg = `
+
+
${centerLabel}
+ `;
+
+ const overflowSvg = overflow > 0
+ ? `
+${overflow} more`
+ : '';
+
+ return `${gridSvg}${linesSvg.join('')}${centerSvg}${nodesSvg.join('')}${overflowSvg}`;
+ }
+
+ #buildGraphSvg(visible: ExplorerNode[], overflow: number, W: number, H: number): string {
+ const cx = W / 2, cy = H / 2;
+ const orbit = Math.min(W, H) * 0.32;
+
+ const gridSvg = metatronGrid(Math.min(W, H));
+ const linesSvg: string[] = [];
+ const nodesSvg: string[] = [];
+ const N = visible.length;
+
+ for (let i = 0; i < N; i++) {
+ const child = visible[i];
+ const angleDeg = (360 / N) * i - 90;
+ const rad = angleDeg * Math.PI / 180;
+ const nx = cx + orbit * Math.cos(rad);
+ const ny = cy + orbit * Math.sin(rad);
+ const hr = Math.min(24, Math.max(12, 12 + child.weight * 0.2));
+
+ linesSvg.push(
+ `
`
+ );
+
+ const fill = `rgba(16,185,129,${(0.1 + child.weight * 0.005).toFixed(3)})`;
+ const label = esc(child.label.length > 14 ? child.label.slice(0, 12) + '…' : child.label);
+
+ // Radial label placement
+ const labelDist = hr + 12;
+ const lx = nx + labelDist * Math.cos(rad);
+ const ly = ny + labelDist * Math.sin(rad);
+ const normDeg = ((angleDeg % 360) + 360) % 360;
+ const anchor = normDeg > 90 && normDeg < 270 ? 'end' : normDeg === 90 || normDeg === 270 ? 'middle' : 'start';
+
+ nodesSvg.push(`
+
+
+ ${label}
+
+ `);
+ }
+
+ const centerLabel = esc(this.#breadcrumb[this.#breadcrumb.length - 1]?.label.slice(0, 8) || '?');
+ const centerSvg = `
+
+
${centerLabel}
+ `;
+
+ const overflowSvg = overflow > 0
+ ? `
+${overflow} more`
+ : '';
+
+ return `${gridSvg}${linesSvg.join('')}${centerSvg}${nodesSvg.join('')}${overflowSvg}`;
+ }
+
// ── Serialization ──
override toJSON() {
@@ -547,6 +637,7 @@ export class FolkHolonExplorer extends FolkShape {
...super.toJSON(),
type: 'folk-holon-explorer',
mode: this.#mode,
+ view: this.#view,
rootId: this.#rootId,
spaceSlug: this.#spaceSlug,
breadcrumb: this.#breadcrumb,
@@ -556,6 +647,7 @@ export class FolkHolonExplorer extends FolkShape {
static override fromData(data: Record
): FolkHolonExplorer {
const shape = FolkShape.fromData(data) as FolkHolonExplorer;
if (data.mode) shape.setAttribute('mode', data.mode);
+ if (data.view) shape.setAttribute('view', data.view);
if (data.rootId) shape.setAttribute('root-id', data.rootId);
if (data.spaceSlug) shape.setAttribute('space-slug', data.spaceSlug);
return shape;
@@ -568,6 +660,7 @@ export class FolkHolonExplorer extends FolkShape {
const spaceChanged = data.spaceSlug && data.spaceSlug !== this.#spaceSlug;
if (data.mode) this.#mode = data.mode;
+ if (data.view) this.#view = data.view;
if (data.rootId) this.#rootId = data.rootId;
if (data.spaceSlug) this.#spaceSlug = data.spaceSlug;
if (data.breadcrumb) this.#breadcrumb = data.breadcrumb;