jeffemmett
/
rspace-online
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat(rwallet): replace S-curve flows with L-curve right-angle flows in timeline 

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Jeff Emmett 2026-03-24 15:03:23 -07:00
parent ef65ec49ff
commit 2d28252f1a
2 changed files with 20 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

23
modules/rwallet/lib/wallet-viz.ts
View File

@ -250,6 +250,7 @@ export function renderTimeline(
// Diagonal waterfall flows // Diagonal waterfall flows
const flowHeight = 80; const flowHeight = 80;
const xOffset = flowHeight * 0.7; const xOffset = flowHeight * 0.7;
const cornerR = Math.min(flowHeight * 0.25, xOffset * 0.4);
let prevBalance = 0; let prevBalance = 0;
data.forEach(tx => { data.forEach(tx => {
@ -275,10 +276,17 @@ export function renderTimeline(
const endX = x; const endX = x;
const path = d3.path(); const path = d3.path();
// Left edge: vertical down, rounded corner, horizontal right to river
path.moveTo(startX - farEndHalf, startY); path.moveTo(startX - farEndHalf, startY);
path.bezierCurveTo(startX - farEndHalf, startY + flowHeight * 0.55, endX - riverEndHalf, endY - flowHeight * 0.45, endX - riverEndHalf, endY); path.lineTo(startX - farEndHalf, endY - cornerR);
path.quadraticCurveTo(startX - farEndHalf, endY, startX - farEndHalf + cornerR, endY);
path.lineTo(endX - riverEndHalf, endY);
// Across river end
path.lineTo(endX + riverEndHalf, endY); path.lineTo(endX + riverEndHalf, endY);
path.bezierCurveTo(endX + riverEndHalf, endY - flowHeight * 0.45, startX + farEndHalf, startY + flowHeight * 0.55, startX + farEndHalf, startY); // Right edge: horizontal left, rounded corner, vertical up
path.lineTo(startX + farEndHalf + cornerR, endY);
path.quadraticCurveTo(startX + farEndHalf, endY, startX + farEndHalf, endY - cornerR);
path.lineTo(startX + farEndHalf, startY);
path.closePath(); path.closePath();
contentGroup.append("path").attr("d", path.toString()).attr("fill", `url(#${id}-inflow)`) contentGroup.append("path").attr("d", path.toString()).attr("fill", `url(#${id}-inflow)`)
@ -293,10 +301,17 @@ export function renderTimeline(
const endX = x + xOffset; const endX = x + xOffset;
const path = d3.path(); const path = d3.path();
// Left edge: horizontal right from river, rounded corner, vertical down
path.moveTo(startX - riverEndHalf, startY); path.moveTo(startX - riverEndHalf, startY);
path.bezierCurveTo(startX - riverEndHalf, startY + flowHeight * 0.45, endX - farEndHalf, endY - flowHeight * 0.55, endX - farEndHalf, endY); path.lineTo(endX - farEndHalf - cornerR, startY);
path.quadraticCurveTo(endX - farEndHalf, startY, endX - farEndHalf, startY + cornerR);
path.lineTo(endX - farEndHalf, endY);
// Across far end
path.lineTo(endX + farEndHalf, endY); path.lineTo(endX + farEndHalf, endY);
path.bezierCurveTo(endX + farEndHalf, endY - flowHeight * 0.55, startX + riverEndHalf, startY + flowHeight * 0.45, startX + riverEndHalf, startY); // Right edge: vertical up, rounded corner, horizontal left to river
path.lineTo(endX + farEndHalf, startY + cornerR);
path.quadraticCurveTo(endX + farEndHalf, startY, endX + farEndHalf - cornerR, startY);
path.lineTo(startX + riverEndHalf, startY);
path.closePath(); path.closePath();
contentGroup.append("path").attr("d", path.toString()).attr("fill", `url(#${id}-outflow)`) contentGroup.append("path").attr("d", path.toString()).attr("fill", `url(#${id}-outflow)`)

2
modules/rwallet/mod.ts
View File

@ -1239,7 +1239,7 @@ function renderWallet(spaceSlug: string, initialView?: string) {
modules: getModuleInfoList(), modules: getModuleInfoList(),
theme: "dark", theme: "dark",
body: `<folk-wallet-viewer space="${spaceSlug}"${viewAttr}></folk-wallet-viewer>`, body: `<folk-wallet-viewer space="${spaceSlug}"${viewAttr}></folk-wallet-viewer>`,
scripts: `<script type="module" src="/modules/rwallet/folk-wallet-viewer.js?v=15"></script>`, scripts: `<script type="module" src="/modules/rwallet/folk-wallet-viewer.js?v=16"></script>`,
styles: `<link rel="stylesheet" href="/modules/rwallet/wallet.css">`, styles: `<link rel="stylesheet" href="/modules/rwallet/wallet.css">`,
}); });
} }