feat: improvements
This commit is contained in:
1
frontend/src/assets/axis-mundi.min.svg
Normal file
1
frontend/src/assets/axis-mundi.min.svg
Normal file
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 293 KiB |
@@ -2,6 +2,7 @@ import { useCallback, useEffect, useMemo, useRef, useState } from "react";
|
|||||||
import { Graph } from "@cosmos.gl/graph";
|
import { Graph } from "@cosmos.gl/graph";
|
||||||
import { fetchBrowseNodes, fetchRemotePage, type NetworkNode } from "@/api/client";
|
import { fetchBrowseNodes, fetchRemotePage, type NetworkNode } from "@/api/client";
|
||||||
import { renderMicron } from "@/components/editor/micronRenderer";
|
import { renderMicron } from "@/components/editor/micronRenderer";
|
||||||
|
import axisMundiUrl from "@/assets/axis-mundi.min.svg";
|
||||||
|
|
||||||
// ---------------------------------------------------------------------------
|
// ---------------------------------------------------------------------------
|
||||||
// Theme color maps — hex values matching index.css OKLCH definitions
|
// Theme color maps — hex values matching index.css OKLCH definitions
|
||||||
@@ -166,7 +167,8 @@ export default function BrowseView() {
|
|||||||
setThemeId(id);
|
setThemeId(id);
|
||||||
const graph = graphRef.current;
|
const graph = graphRef.current;
|
||||||
if (graph) {
|
if (graph) {
|
||||||
applyThemeToGraph(graph, nodesRef.current, THEME_COLORS[id] ?? THEME_COLORS.dark);
|
const c = THEME_COLORS[id] ?? THEME_COLORS.dark;
|
||||||
|
applyThemeToGraph(graph, nodesRef.current, c);
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
observer.observe(document.documentElement, { attributes: true, attributeFilter: ["class"] });
|
observer.observe(document.documentElement, { attributes: true, attributeFilter: ["class"] });
|
||||||
@@ -180,7 +182,7 @@ export default function BrowseView() {
|
|||||||
const graph = new Graph(containerRef.current, {
|
const graph = new Graph(containerRef.current, {
|
||||||
backgroundColor: [0, 0, 0, 0],
|
backgroundColor: [0, 0, 0, 0],
|
||||||
pointDefaultColor: colors.primary,
|
pointDefaultColor: colors.primary,
|
||||||
pointDefaultSize: 8,
|
pointDefaultSize: 12,
|
||||||
linkDefaultColor: colors.border,
|
linkDefaultColor: colors.border,
|
||||||
linkDefaultWidth: 1,
|
linkDefaultWidth: 1,
|
||||||
linkOpacity: 0.5,
|
linkOpacity: 0.5,
|
||||||
@@ -202,6 +204,11 @@ export default function BrowseView() {
|
|||||||
const node = nodesRef.current[index];
|
const node = nodesRef.current[index];
|
||||||
if (node) handleNodeClick(node);
|
if (node) handleNodeClick(node);
|
||||||
},
|
},
|
||||||
|
onClick: () => {
|
||||||
|
setSelectedNode(null);
|
||||||
|
setPageHtml(null);
|
||||||
|
setPageError(null);
|
||||||
|
},
|
||||||
onSimulationTick: () => updateLabels(),
|
onSimulationTick: () => updateLabels(),
|
||||||
onZoom: () => updateLabels(),
|
onZoom: () => updateLabels(),
|
||||||
});
|
});
|
||||||
@@ -332,7 +339,7 @@ export default function BrowseView() {
|
|||||||
className="absolute text-[10px] font-mono pointer-events-none select-none whitespace-nowrap"
|
className="absolute text-[10px] font-mono pointer-events-none select-none whitespace-nowrap"
|
||||||
style={{
|
style={{
|
||||||
left: lp.x,
|
left: lp.x,
|
||||||
top: lp.y - 12,
|
top: lp.y - (node.is_self ? 24 : 12),
|
||||||
transform: "translate(-50%, -100%)",
|
transform: "translate(-50%, -100%)",
|
||||||
color: node.is_self ? colors.primary : colors.muted,
|
color: node.is_self ? colors.primary : colors.muted,
|
||||||
}}
|
}}
|
||||||
@@ -355,8 +362,8 @@ export default function BrowseView() {
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* Page viewer */}
|
{/* Page viewer */}
|
||||||
<div className="flex-1 min-h-0 border-t-2 border-border overflow-auto">
|
<div className="flex-1 min-h-0 border-t-2 border-border flex flex-col">
|
||||||
<div className="flex items-center px-4 py-2 border-b border-border sticky top-0 bg-background z-10">
|
<div className="flex items-center px-4 py-2 border-b border-border bg-background shrink-0">
|
||||||
<span className="text-xs font-semibold flex-1 truncate">
|
<span className="text-xs font-semibold flex-1 truncate">
|
||||||
{selectedNode ? (
|
{selectedNode ? (
|
||||||
<>
|
<>
|
||||||
@@ -371,11 +378,19 @@ export default function BrowseView() {
|
|||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className="p-3">
|
<div className="flex-1 min-h-0 overflow-auto p-3">
|
||||||
{!selectedNode && (
|
{!selectedNode && !pageLoading && (
|
||||||
<span className="text-muted-foreground text-xs">
|
<div className="flex flex-col items-center justify-center h-full gap-2 text-muted-foreground">
|
||||||
Click a node to view its page
|
<div
|
||||||
</span>
|
className="w-80 h-64"
|
||||||
|
style={{
|
||||||
|
backgroundColor: colors.primary,
|
||||||
|
mask: `url(${axisMundiUrl}) center/contain no-repeat`,
|
||||||
|
WebkitMask: `url(${axisMundiUrl}) center/contain no-repeat`,
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
<span className="text-xs">Click a node to view its page</span>
|
||||||
|
</div>
|
||||||
)}
|
)}
|
||||||
{pageLoading && (
|
{pageLoading && (
|
||||||
<span className="text-muted-foreground text-xs animate-pulse">
|
<span className="text-muted-foreground text-xs animate-pulse">
|
||||||
|
|||||||
@@ -13,3 +13,12 @@
|
|||||||
enabled = Yes
|
enabled = Yes
|
||||||
listen_ip = 0.0.0.0
|
listen_ip = 0.0.0.0
|
||||||
listen_port = 4242
|
listen_port = 4242
|
||||||
|
|
||||||
|
[[Quad4]]
|
||||||
|
type = TCPClientInterface
|
||||||
|
interface_enabled = false
|
||||||
|
target_host = 62.151.179.77
|
||||||
|
target_port = 45657
|
||||||
|
mode = full
|
||||||
|
name = Quad4
|
||||||
|
selected_interface_mode = 1
|
||||||
|
|||||||
Reference in New Issue
Block a user