Add collapsible device nodes, cable bundling, and aggregated edges
Canvas devices can now collapse to a compact per-direction-group view; when collapsed, cables between the same two devices of the same type merge into one dashed "virtual" edge with a ×N marker so a busy rig doesn't turn into a wall of parallel lines. Adds CableBundle so several real Connections (a stereo RCA pair, a snake's channels) can be grouped and bought as one BOM line while keeping each leg's own family-checked cable type intact. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_017DUU6CnxECCDeqDNYJgr5x
This commit is contained in:
Claude Sonnet 5
@@ -1,5 +1,5 @@
|
||||
import { useMemo } from 'react'
|
||||
import { cableTypesForConnection, getPortType } from '../../domain/diagram'
|
||||
import { useMemo, useState } from 'react'
|
||||
import { allCableTypes, cableTypesForConnection, getPortType } from '../../domain/diagram'
|
||||
import { useCatalogStore } from '../../state/catalogStore'
|
||||
import { useDiagramStore } from '../../state/diagramStore'
|
||||
|
||||
@@ -10,6 +10,14 @@ export default function ConnectionInspector({ connectionId }: { connectionId: st
|
||||
const canEdit = access?.myPermission !== 'view'
|
||||
const updateConnection = useDiagramStore((s) => s.updateConnection)
|
||||
const removeConnection = useDiagramStore((s) => s.removeConnection)
|
||||
const startBundle = useDiagramStore((s) => s.startBundle)
|
||||
const addConnectionToBundle = useDiagramStore((s) => s.addConnectionToBundle)
|
||||
const removeConnectionFromBundle = useDiagramStore((s) => s.removeConnectionFromBundle)
|
||||
const updateBundle = useDiagramStore((s) => s.updateBundle)
|
||||
const selectConnection = useDiagramStore((s) => s.selectConnection)
|
||||
const [startingBundle, setStartingBundle] = useState(false)
|
||||
const [newBundleName, setNewBundleName] = useState('')
|
||||
const [newBundleCableTypeId, setNewBundleCableTypeId] = useState('')
|
||||
|
||||
const connection = diagram.connections.find((c) => c.id === connectionId)
|
||||
const sourceDevice = diagram.devices.find((d) => d.id === connection?.sourceDeviceId)
|
||||
@@ -26,6 +34,25 @@ export default function ConnectionInspector({ connectionId }: { connectionId: st
|
||||
|
||||
const cableCostPerUnit = availableCableTypes.find((ct) => ct.id === connection?.cableTypeId)?.costPerUnit
|
||||
|
||||
// Every cable type, unfiltered by port compatibility — a bundle's own
|
||||
// cable type is a separate, BOM-only choice from any member's individually
|
||||
// validated cableTypeId (see CableBundle's own doc comment), so it isn't
|
||||
// constrained to what fits this specific port pair.
|
||||
const allBundleCableTypes = useMemo(
|
||||
() => [...allCableTypes(catalog)].sort((a, b) => a.name.localeCompare(b.name)),
|
||||
[catalog],
|
||||
)
|
||||
|
||||
const bundle = diagram.bundles.find((b) => b.id === connection?.bundleId)
|
||||
const otherBundles = diagram.bundles.filter((b) => b.id !== connection?.bundleId)
|
||||
const otherMembers = diagram.connections.filter((c) => c.bundleId === bundle?.id && c.id !== connectionId)
|
||||
|
||||
const describeConnectionEnd = (deviceId: string, portId: string) => {
|
||||
const device = diagram.devices.find((d) => d.id === deviceId)
|
||||
const port = device?.ports.find((p) => p.id === portId)
|
||||
return device && port ? `${device.name} · ${port.name}` : 'Unknown'
|
||||
}
|
||||
|
||||
if (!connection || !sourceDevice || !targetDevice || !sourcePort || !targetPort) return null
|
||||
|
||||
return (
|
||||
@@ -126,6 +153,165 @@ export default function ConnectionInspector({ connectionId }: { connectionId: st
|
||||
/>
|
||||
</label>
|
||||
|
||||
<div className="border-t border-slate-100 pt-3">
|
||||
<h4 className="mb-1.5 text-xs font-semibold uppercase tracking-wide text-slate-500">Bundle</h4>
|
||||
{bundle ? (
|
||||
<div className="space-y-2 rounded border border-indigo-200 bg-indigo-50/40 p-2 text-xs">
|
||||
<p className="text-slate-500">
|
||||
Part of a bundle with {otherMembers.length} other cable{otherMembers.length === 1 ? '' : 's'} — counted
|
||||
as one item on the BOM, using this bundle's own cable type/length/cost below rather than each leg's.
|
||||
</p>
|
||||
<label className="block font-medium text-slate-600">
|
||||
Name
|
||||
<input
|
||||
value={bundle.name}
|
||||
onChange={(e) => updateBundle(bundle.id, { name: e.target.value })}
|
||||
className="mt-1 w-full rounded border border-slate-300 px-2 py-1 text-sm"
|
||||
/>
|
||||
</label>
|
||||
<label className="block font-medium text-slate-600">
|
||||
Cable type
|
||||
<select
|
||||
value={bundle.cableTypeId}
|
||||
onChange={(e) => updateBundle(bundle.id, { cableTypeId: e.target.value })}
|
||||
className="mt-1 w-full rounded border border-slate-300 px-2 py-1 text-sm"
|
||||
>
|
||||
{allBundleCableTypes.map((ct) => (
|
||||
<option key={ct.id} value={ct.id}>
|
||||
{ct.name}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
</label>
|
||||
<div className="flex gap-2">
|
||||
<label className="block flex-1 font-medium text-slate-600">
|
||||
Distance
|
||||
<input
|
||||
type="number"
|
||||
min={0}
|
||||
step={0.5}
|
||||
value={bundle.distance ?? ''}
|
||||
onChange={(e) =>
|
||||
updateBundle(bundle.id, { distance: e.target.value === '' ? undefined : Number(e.target.value) })
|
||||
}
|
||||
className="mt-1 w-full rounded border border-slate-300 px-2 py-1 text-sm"
|
||||
/>
|
||||
</label>
|
||||
<label className="block flex-1 font-medium text-slate-600">
|
||||
Cost
|
||||
<input
|
||||
type="number"
|
||||
min={0}
|
||||
step={0.01}
|
||||
value={bundle.cost ?? ''}
|
||||
onChange={(e) =>
|
||||
updateBundle(bundle.id, { cost: e.target.value === '' ? undefined : Number(e.target.value) })
|
||||
}
|
||||
className="mt-1 w-full rounded border border-slate-300 px-2 py-1 text-sm"
|
||||
/>
|
||||
</label>
|
||||
</div>
|
||||
<div>
|
||||
<p className="font-medium text-slate-600">Other cables in this bundle:</p>
|
||||
<ul className="mt-1 space-y-0.5">
|
||||
{otherMembers.map((m) => (
|
||||
<li key={m.id}>
|
||||
<button
|
||||
onClick={() => selectConnection(m.id)}
|
||||
className="text-left text-indigo-600 hover:underline"
|
||||
>
|
||||
{describeConnectionEnd(m.sourceDeviceId, m.sourcePortId)} ↔{' '}
|
||||
{describeConnectionEnd(m.targetDeviceId, m.targetPortId)}
|
||||
</button>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
<button
|
||||
onClick={() => removeConnectionFromBundle(connection.id)}
|
||||
className="w-full rounded border border-slate-300 py-1 text-[11px] font-medium text-slate-600 hover:bg-slate-100"
|
||||
>
|
||||
Remove this cable from the bundle
|
||||
</button>
|
||||
</div>
|
||||
) : (
|
||||
<div className="space-y-2 text-xs">
|
||||
<p className="text-slate-500">
|
||||
Group this with other cables that are physically one item — a stereo pair, a snake — so the BOM counts
|
||||
them as a single purchase instead of one per leg.
|
||||
</p>
|
||||
{otherBundles.length > 0 && (
|
||||
<label className="block font-medium text-slate-600">
|
||||
Add to an existing bundle
|
||||
<select
|
||||
value=""
|
||||
onChange={(e) => {
|
||||
if (e.target.value) addConnectionToBundle(connection.id, e.target.value)
|
||||
}}
|
||||
className="mt-1 w-full rounded border border-slate-300 px-2 py-1 text-sm"
|
||||
>
|
||||
<option value="">Choose a bundle…</option>
|
||||
{otherBundles.map((b) => (
|
||||
<option key={b.id} value={b.id}>
|
||||
{b.name}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
</label>
|
||||
)}
|
||||
{!startingBundle ? (
|
||||
<button
|
||||
onClick={() => {
|
||||
setNewBundleName('')
|
||||
setNewBundleCableTypeId(connection.cableTypeId)
|
||||
setStartingBundle(true)
|
||||
}}
|
||||
className="text-[11px] font-medium text-indigo-600 hover:underline"
|
||||
>
|
||||
+ Start a new bundle
|
||||
</button>
|
||||
) : (
|
||||
<div className="space-y-1.5 rounded border border-slate-200 bg-white p-2">
|
||||
<input
|
||||
autoFocus
|
||||
value={newBundleName}
|
||||
onChange={(e) => setNewBundleName(e.target.value)}
|
||||
placeholder="e.g. Stereo Pair"
|
||||
className="w-full rounded border border-slate-300 px-1.5 py-1 text-xs"
|
||||
/>
|
||||
<select
|
||||
value={newBundleCableTypeId}
|
||||
onChange={(e) => setNewBundleCableTypeId(e.target.value)}
|
||||
className="w-full rounded border border-slate-300 px-1.5 py-1 text-xs"
|
||||
>
|
||||
{allBundleCableTypes.map((ct) => (
|
||||
<option key={ct.id} value={ct.id}>
|
||||
{ct.name}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
<div className="flex justify-end gap-2">
|
||||
<button onClick={() => setStartingBundle(false)} className="text-[11px] text-slate-500">
|
||||
Cancel
|
||||
</button>
|
||||
<button
|
||||
onClick={() => {
|
||||
if (!newBundleName.trim() || !newBundleCableTypeId) return
|
||||
startBundle(connection.id, { name: newBundleName.trim(), cableTypeId: newBundleCableTypeId })
|
||||
setStartingBundle(false)
|
||||
}}
|
||||
disabled={!newBundleName.trim() || !newBundleCableTypeId}
|
||||
className="rounded bg-indigo-600 px-2 py-1 text-[11px] font-medium text-white hover:bg-indigo-500 disabled:cursor-not-allowed disabled:opacity-40"
|
||||
>
|
||||
Create
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="border-t border-slate-100 pt-3">
|
||||
<button
|
||||
onClick={() => removeConnection(connection.id)}
|
||||
|
||||
Reference in New Issue
Block a user