lvl0/buckets
1
0
Fork 0
Code Issues 11 Pull requests 1 Projects Releases Packages Wiki Activity Actions

2 - Integrate DistributionLines SVG overlay into scenario page

Browse source
This commit is contained in:
myrmidex 2026-03-22 15:22:54 +01:00
parent 7b92423fb9
commit 46dc09783e
2 changed files with 13 additions and 3 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
resources/js/components/DistributionLines.tsx
View file

@ -3,9 +3,9 @@ import { type DistributionPreview } from '@/types';
interface Props { interface Props {
distribution: DistributionPreview; distribution: DistributionPreview;
bucketRefs: React.RefObject<Map<string, HTMLElement>>; bucketRefs: React.RefObject<Map<string, HTMLElement> | null>;
containerRef: React.RefObject<HTMLDivElement>; containerRef: React.RefObject<HTMLDivElement | null>;
incomeRef: React.RefObject<HTMLDivElement>; incomeRef: React.RefObject<HTMLDivElement | null>;
} }
interface LinePosition { interface LinePosition {

10
resources/js/pages/Scenarios/Show.tsx
View file

@ -2,6 +2,7 @@ import { Head, router } from '@inertiajs/react';
import { Settings } from 'lucide-react'; import { Settings } from 'lucide-react';
import { useRef, useState } from 'react'; import { useRef, useState } from 'react';
import BucketCard from '@/components/BucketCard'; import BucketCard from '@/components/BucketCard';
import DistributionLines from '@/components/DistributionLines';
import InlineEditInput from '@/components/InlineEditInput'; import InlineEditInput from '@/components/InlineEditInput';
import InlineEditSelect from '@/components/InlineEditSelect'; import InlineEditSelect from '@/components/InlineEditSelect';
import SettingsPanel from '@/components/SettingsPanel'; import SettingsPanel from '@/components/SettingsPanel';
@ -286,6 +287,15 @@ export default function Show({ scenario, buckets }: Props) {
{/* Middle: Connector area (SVG lines render here) */} {/* Middle: Connector area (SVG lines render here) */}
<div className="flex-1" /> <div className="flex-1" />
{distribution && (
<DistributionLines
distribution={distribution}
bucketRefs={bucketRefs}
containerRef={containerRef}
incomeRef={incomeRef}
/>
)}
{/* Right: Income */} {/* Right: Income */}
<div ref={incomeRef} className="w-1/5 shrink-0 self-center"> <div ref={incomeRef} className="w-1/5 shrink-0 self-center">
<div className="flex items-center justify-center border-b border-red-500/40 pb-2 mb-6"> <div className="flex items-center justify-center border-b border-red-500/40 pb-2 mb-6">