feat: selectable marker shapes per edge endpoint
Replace the on/off arrowhead toggle with a per-end shape picker. Each end (start/end) independently selects: none, arrow, arrow-open, circle, diamond, or square. Markers still recolor live from the resolved stroke color. Frontend: - MarkerShape type + edgeMarkers util (normalizeMarker, MARKER_GEOMETRY); legacy boolean coerces to 'arrow' on read. - Per-shape <marker> inner geometry; symmetric shapes use fixed orient. - MarkerShapePicker reused in EdgeModal and CustomStyleModal. - Serializer normalizes to shape strings. Backend: - Edge marker columns Boolean -> String (default 'none'); TEXT migration. - normalize_marker() + validators coerce legacy bool / unknown values. ha-relevant: yes
This commit is contained in:
Pouzor
@@ -6,9 +6,10 @@ import { HomelableEdge } from '../index'
|
||||
import type { EdgeData } from '@/types'
|
||||
|
||||
/**
|
||||
* Arrowhead endpoints: filled-triangle <marker> defs, independently toggleable
|
||||
* at start/end, filled with the live stroke color, and referenced by BaseEdge
|
||||
* via markerStart/markerEnd URLs.
|
||||
* Endpoint markers: per-end shape (arrow / arrow-open / circle / diamond /
|
||||
* square) <marker> defs, independently selectable at start/end, filled with the
|
||||
* live stroke color, referenced by BaseEdge via markerStart/markerEnd URLs.
|
||||
* Legacy boolean values coerce to the filled 'arrow' shape.
|
||||
*/
|
||||
function renderEdge(data: Partial<EdgeData> = {}, selected = false) {
|
||||
const props = {
|
||||
@@ -41,7 +42,7 @@ describe('HomelableEdge arrow markers', () => {
|
||||
})
|
||||
|
||||
it('renders an end marker referenced by the edge path', () => {
|
||||
const { container } = renderEdge({ marker_end: true })
|
||||
const { container } = renderEdge({ marker_end: 'arrow' })
|
||||
const marker = container.querySelector('#arrow-end-e1')
|
||||
expect(marker).toBeTruthy()
|
||||
expect(container.querySelector('#arrow-start-e1')).toBeNull()
|
||||
@@ -51,21 +52,58 @@ describe('HomelableEdge arrow markers', () => {
|
||||
expect(referenced).toBe(true)
|
||||
})
|
||||
|
||||
it('renders a start marker with reversed orientation', () => {
|
||||
const { container } = renderEdge({ marker_start: true })
|
||||
it('coerces a legacy boolean marker to the filled arrow shape', () => {
|
||||
const { container } = renderEdge({ marker_end: true })
|
||||
const path = container.querySelector('#arrow-end-e1 path')
|
||||
expect(path?.getAttribute('d')).toBe('M 0 0 L 10 5 L 0 10 z')
|
||||
})
|
||||
|
||||
it('renders a directional start marker with reversed orientation', () => {
|
||||
const { container } = renderEdge({ marker_start: 'arrow' })
|
||||
const marker = container.querySelector('#arrow-start-e1')
|
||||
expect(marker).toBeTruthy()
|
||||
expect(marker?.getAttribute('orient')).toBe('auto-start-reverse')
|
||||
})
|
||||
|
||||
it('renders a circle marker as a <circle>, not a triangle', () => {
|
||||
const { container } = renderEdge({ marker_end: 'circle' })
|
||||
expect(container.querySelector('#arrow-end-e1 circle')).toBeTruthy()
|
||||
expect(container.querySelector('#arrow-end-e1 path')).toBeNull()
|
||||
})
|
||||
|
||||
it('renders a square marker as a <rect>', () => {
|
||||
const { container } = renderEdge({ marker_end: 'square' })
|
||||
expect(container.querySelector('#arrow-end-e1 rect')).toBeTruthy()
|
||||
})
|
||||
|
||||
it('uses fixed orientation for symmetric shapes', () => {
|
||||
const { container } = renderEdge({ marker_end: 'circle' })
|
||||
expect(container.querySelector('#arrow-end-e1')?.getAttribute('orient')).toBe('0')
|
||||
})
|
||||
|
||||
it('supports different shapes on each end', () => {
|
||||
const { container } = renderEdge({ marker_start: 'diamond', marker_end: 'arrow-open' })
|
||||
// diamond is a filled path
|
||||
const startPath = container.querySelector('#arrow-start-e1 path')
|
||||
expect(startPath?.getAttribute('d')).toContain('9.5')
|
||||
expect(startPath?.getAttribute('fill')).not.toBe('none')
|
||||
// arrow-open is stroked, not filled
|
||||
expect(container.querySelector('#arrow-end-e1 path')?.getAttribute('fill')).toBe('none')
|
||||
})
|
||||
|
||||
it('renders both markers when both ends enabled', () => {
|
||||
const { container } = renderEdge({ marker_start: true, marker_end: true })
|
||||
const { container } = renderEdge({ marker_start: 'arrow', marker_end: 'arrow' })
|
||||
expect(container.querySelector('#arrow-start-e1')).toBeTruthy()
|
||||
expect(container.querySelector('#arrow-end-e1')).toBeTruthy()
|
||||
})
|
||||
|
||||
it('renders no marker for the "none" shape', () => {
|
||||
const { container } = renderEdge({ marker_start: 'none', marker_end: 'none' })
|
||||
expect(container.querySelector('marker')).toBeNull()
|
||||
})
|
||||
|
||||
it('fills the marker with the resolved custom color', () => {
|
||||
const { container } = renderEdge({ marker_end: true, custom_color: '#ff6e00' })
|
||||
const { container } = renderEdge({ marker_end: 'arrow', custom_color: '#ff6e00' })
|
||||
const fill = container.querySelector('#arrow-end-e1 path')?.getAttribute('fill')
|
||||
expect(fill).toBe('#ff6e00')
|
||||
})
|
||||
|
||||
@@ -13,6 +13,7 @@ import type { EdgeData, EdgeType, Waypoint } from '@/types'
|
||||
import { useThemeStore } from '@/stores/themeStore'
|
||||
import { useCanvasStore } from '@/stores/canvasStore'
|
||||
import { THEMES } from '@/utils/themes'
|
||||
import { MARKER_GEOMETRY, normalizeMarker, type NonNoneMarkerShape } from '@/utils/edgeMarkers'
|
||||
import { buildWaypointPath, getAddWaypointHandlePosition, getWaypointLabelPosition, snap45, snap45both } from './waypointUtils'
|
||||
|
||||
const VLAN_COLORS = ['#00d4ff', '#a855f7', '#39d353', '#ff6e00', '#e3b341', '#f85149']
|
||||
@@ -22,6 +23,22 @@ function getVlanColor(vlanId?: number): string {
|
||||
return VLAN_COLORS[vlanId % VLAN_COLORS.length]
|
||||
}
|
||||
|
||||
/** Inner SVG element for an edge <marker>, drawn in a 0..10 viewBox. */
|
||||
function markerInnerElement(shape: NonNoneMarkerShape, color: string): React.ReactElement {
|
||||
switch (shape) {
|
||||
case 'arrow':
|
||||
return <path d="M 0 0 L 10 5 L 0 10 z" fill={color} />
|
||||
case 'arrow-open':
|
||||
return <path d="M 1 1 L 9 5 L 1 9" fill="none" stroke={color} strokeWidth={1.8} strokeLinecap="round" strokeLinejoin="round" />
|
||||
case 'circle':
|
||||
return <circle cx={5} cy={5} r={4} fill={color} />
|
||||
case 'diamond':
|
||||
return <path d="M 5 0.5 L 9.5 5 L 5 9.5 L 0.5 5 z" fill={color} />
|
||||
case 'square':
|
||||
return <rect x={1} y={1} width={8} height={8} fill={color} />
|
||||
}
|
||||
}
|
||||
|
||||
// ── Waypoint drag handle ─────────────────────────────────────────────────────
|
||||
|
||||
interface WaypointHandleProps {
|
||||
@@ -351,37 +368,43 @@ export function HomelableEdge({ id, source, target, sourceHandleId, targetHandle
|
||||
? segmentMidpoints(sourceX, sourceY, waypoints, targetX, targetY, pathStyle, sourcePosition)
|
||||
: []
|
||||
|
||||
// ── Arrowheads ─────────────────────────────────────────────────────────────
|
||||
// ── Endpoint markers ───────────────────────────────────────────────────────
|
||||
// Custom inline <marker> defs filled with the live strokeColor so they recolor
|
||||
// reactively (custom_color / vlan / selected). Sized from the stroke width.
|
||||
const markerStart = data?.marker_start === true
|
||||
const markerEnd = data?.marker_end === true
|
||||
// Each end picks its own shape (arrow / arrow-open / circle / diamond / square)
|
||||
// independently; 'none' renders no marker.
|
||||
const startShape = normalizeMarker(data?.marker_start)
|
||||
const endShape = normalizeMarker(data?.marker_end)
|
||||
const hasMarkers = startShape !== 'none' || endShape !== 'none'
|
||||
const strokeW = (style.strokeWidth as number) ?? 2
|
||||
const markerSize = 6 + strokeW * 2
|
||||
const startMarkerId = `arrow-start-${id}`
|
||||
const endMarkerId = `arrow-end-${id}`
|
||||
|
||||
const arrowMarker = (markerId: string, orient: string) => (
|
||||
<marker
|
||||
id={markerId}
|
||||
viewBox="0 0 10 10"
|
||||
refX={9}
|
||||
refY={5}
|
||||
markerWidth={markerSize}
|
||||
markerHeight={markerSize}
|
||||
markerUnits="userSpaceOnUse"
|
||||
orient={orient}
|
||||
>
|
||||
<path d="M 0 0 L 10 5 L 0 10 z" fill={strokeColor} />
|
||||
</marker>
|
||||
)
|
||||
const arrowMarker = (markerId: string, shape: NonNoneMarkerShape, orient: string) => {
|
||||
const geo = MARKER_GEOMETRY[shape]
|
||||
return (
|
||||
<marker
|
||||
id={markerId}
|
||||
viewBox="0 0 10 10"
|
||||
refX={geo.refX}
|
||||
refY={5}
|
||||
markerWidth={markerSize}
|
||||
markerHeight={markerSize}
|
||||
markerUnits="userSpaceOnUse"
|
||||
orient={geo.directional ? orient : '0'}
|
||||
>
|
||||
{markerInnerElement(shape, strokeColor)}
|
||||
</marker>
|
||||
)
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
{(markerStart || markerEnd) && (
|
||||
{hasMarkers && (
|
||||
<defs>
|
||||
{markerStart && arrowMarker(startMarkerId, 'auto-start-reverse')}
|
||||
{markerEnd && arrowMarker(endMarkerId, 'auto')}
|
||||
{startShape !== 'none' && arrowMarker(startMarkerId, startShape, 'auto-start-reverse')}
|
||||
{endShape !== 'none' && arrowMarker(endMarkerId, endShape, 'auto')}
|
||||
</defs>
|
||||
)}
|
||||
|
||||
@@ -390,8 +413,8 @@ export function HomelableEdge({ id, source, target, sourceHandleId, targetHandle
|
||||
path={edgePath}
|
||||
style={animMode === 'basic' ? { ...style, stroke: 'transparent' } : style}
|
||||
interactionWidth={16}
|
||||
markerStart={markerStart ? `url(#${startMarkerId})` : undefined}
|
||||
markerEnd={markerEnd ? `url(#${endMarkerId})` : undefined}
|
||||
markerStart={startShape !== 'none' ? `url(#${startMarkerId})` : undefined}
|
||||
markerEnd={endShape !== 'none' ? `url(#${endMarkerId})` : undefined}
|
||||
/>
|
||||
|
||||
{animMode === 'basic' && (
|
||||
|
||||
@@ -17,6 +17,7 @@ import type {
|
||||
NodeType, EdgeType, NodeTypeStyle, EdgeTypeStyle, CustomStyleDef, EdgePathStyle,
|
||||
} from '@/types'
|
||||
import { NODE_TYPE_LABELS, EDGE_TYPE_LABELS } from '@/types'
|
||||
import { MarkerShapePicker } from './MarkerShapePicker'
|
||||
|
||||
// ── Node types exposed for custom style, grouped by category (skip groupRect/group) ──
|
||||
|
||||
@@ -64,8 +65,8 @@ function defaultEdgeStyle(edgeType: EdgeType): EdgeTypeStyle {
|
||||
opacity: 1,
|
||||
pathStyle: 'bezier',
|
||||
animated: 'none',
|
||||
arrowStart: false,
|
||||
arrowEnd: false,
|
||||
arrowStart: 'none',
|
||||
arrowEnd: 'none',
|
||||
}
|
||||
}
|
||||
|
||||
@@ -283,24 +284,10 @@ function EdgeEditor({ edgeType, style, onChange, onApplyToExisting }: EdgeEditor
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<div className="text-xs text-[#8b949e] mb-2">Arrows</div>
|
||||
<div className="flex gap-2">
|
||||
{([['Start', 'arrowStart'], ['End', 'arrowEnd']] as [string, 'arrowStart' | 'arrowEnd'][]).map(([label, key]) => (
|
||||
<button
|
||||
key={key}
|
||||
type="button"
|
||||
onClick={() => set(key, !style[key])}
|
||||
aria-pressed={style[key]}
|
||||
className="px-3 py-1 text-xs rounded border transition-colors"
|
||||
style={{
|
||||
borderColor: style[key] ? '#00d4ff' : '#30363d',
|
||||
background: style[key] ? '#00d4ff22' : 'transparent',
|
||||
color: style[key] ? '#00d4ff' : '#8b949e',
|
||||
}}
|
||||
>
|
||||
{label}
|
||||
</button>
|
||||
))}
|
||||
<div className="text-xs text-[#8b949e] mb-2">Endpoints</div>
|
||||
<div className="flex flex-col gap-1.5">
|
||||
<MarkerShapePicker label="Start" value={style.arrowStart} onChange={(s) => set('arrowStart', s)} />
|
||||
<MarkerShapePicker label="End" value={style.arrowEnd} onChange={(s) => set('arrowEnd', s)} />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -7,8 +7,10 @@ import { Input } from '@/components/ui/input'
|
||||
import { Textarea } from '@/components/ui/textarea'
|
||||
import { Label } from '@/components/ui/label'
|
||||
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select'
|
||||
import { EDGE_TYPE_LABELS, type EdgeData, type EdgePathStyle, type EdgeType } from '@/types'
|
||||
import { EDGE_TYPE_LABELS, type EdgeData, type EdgePathStyle, type EdgeType, type MarkerShape } from '@/types'
|
||||
import { EDGE_DEFAULT_COLORS } from '@/utils/edgeColors'
|
||||
import { normalizeMarker } from '@/utils/edgeMarkers'
|
||||
import { MarkerShapePicker } from './MarkerShapePicker'
|
||||
|
||||
const EDGE_TYPES = Object.entries(EDGE_TYPE_LABELS) as [EdgeType, string][]
|
||||
|
||||
@@ -38,8 +40,8 @@ export function EdgeModal({ open, onClose, onSubmit, onDelete, onClearWaypoints,
|
||||
const [customColor, setCustomColor] = useState<string | undefined>(initial?.custom_color)
|
||||
const [pathStyle, setPathStyle] = useState<EdgePathStyle>(initial?.path_style ?? 'bezier')
|
||||
const [animation, setAnimation] = useState<AnimMode>(() => toAnimMode(initial?.animated))
|
||||
const [markerStart, setMarkerStart] = useState<boolean>(initial?.marker_start ?? false)
|
||||
const [markerEnd, setMarkerEnd] = useState<boolean>(initial?.marker_end ?? false)
|
||||
const [markerStart, setMarkerStart] = useState<MarkerShape>(normalizeMarker(initial?.marker_start))
|
||||
const [markerEnd, setMarkerEnd] = useState<MarkerShape>(normalizeMarker(initial?.marker_end))
|
||||
|
||||
const effectiveColor = customColor ?? EDGE_DEFAULT_COLORS[type]
|
||||
|
||||
@@ -158,26 +160,10 @@ export function EdgeModal({ open, onClose, onSubmit, onDelete, onClearWaypoints,
|
||||
</div>
|
||||
|
||||
<div className="flex flex-col gap-1.5">
|
||||
<Label className="text-xs text-muted-foreground">Arrows</Label>
|
||||
<div className={`flex rounded-md overflow-hidden border border-[#30363d] ${modalStyles['modal-interactive']}`}>
|
||||
{([['Start', markerStart, setMarkerStart], ['End', markerEnd, setMarkerEnd]] as [string, boolean, (v: boolean) => void][]).map(([label, active, set], i) => (
|
||||
<button
|
||||
key={label}
|
||||
type="button"
|
||||
onClick={() => set(!active)}
|
||||
className="flex-1 py-1 text-xs capitalize transition-colors cursor-pointer"
|
||||
tabIndex={0}
|
||||
aria-label={`Arrow ${label} ${active ? 'on' : 'off'}`}
|
||||
aria-pressed={active}
|
||||
style={{
|
||||
background: active ? '#00d4ff22' : '#21262d',
|
||||
color: active ? '#00d4ff' : '#8b949e',
|
||||
borderRight: i === 0 ? '1px solid #30363d' : undefined,
|
||||
}}
|
||||
>
|
||||
{label}
|
||||
</button>
|
||||
))}
|
||||
<Label className="text-xs text-muted-foreground">Endpoints</Label>
|
||||
<div className="flex flex-col gap-1.5">
|
||||
<MarkerShapePicker label="Start" value={markerStart} onChange={setMarkerStart} />
|
||||
<MarkerShapePicker label="End" value={markerEnd} onChange={setMarkerEnd} />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
@@ -0,0 +1,60 @@
|
||||
import type { ReactElement } from 'react'
|
||||
import type { MarkerShape } from '@/types'
|
||||
import { MARKER_SHAPES } from '@/utils/edgeMarkers'
|
||||
|
||||
/** 16x16 preview glyph for a marker shape (used in the picker buttons). */
|
||||
function markerGlyph(shape: MarkerShape, color: string): ReactElement {
|
||||
switch (shape) {
|
||||
case 'none':
|
||||
return <line x1={3} y1={8} x2={13} y2={8} stroke={color} strokeWidth={1.5} strokeLinecap="round" />
|
||||
case 'arrow':
|
||||
return <path d="M4 4 L12 8 L4 12 z" fill={color} />
|
||||
case 'arrow-open':
|
||||
return <path d="M5 4 L11 8 L5 12" fill="none" stroke={color} strokeWidth={1.6} strokeLinecap="round" strokeLinejoin="round" />
|
||||
case 'circle':
|
||||
return <circle cx={8} cy={8} r={4} fill={color} />
|
||||
case 'diamond':
|
||||
return <path d="M8 3 L13 8 L8 13 L3 8 z" fill={color} />
|
||||
case 'square':
|
||||
return <rect x={4} y={4} width={8} height={8} fill={color} />
|
||||
}
|
||||
}
|
||||
|
||||
interface MarkerShapePickerProps {
|
||||
label: string
|
||||
value: MarkerShape
|
||||
onChange: (shape: MarkerShape) => void
|
||||
}
|
||||
|
||||
/** A labeled row of buttons to pick the marker shape for one edge end. */
|
||||
export function MarkerShapePicker({ label, value, onChange }: MarkerShapePickerProps) {
|
||||
return (
|
||||
<div className="flex items-center gap-2">
|
||||
<span className="text-xs text-[#8b949e] w-10 shrink-0">{label}</span>
|
||||
<div className="flex gap-1 flex-wrap">
|
||||
{MARKER_SHAPES.map((shape) => {
|
||||
const active = value === shape
|
||||
return (
|
||||
<button
|
||||
key={shape}
|
||||
type="button"
|
||||
onClick={() => onChange(shape)}
|
||||
aria-label={`${label} marker ${shape}`}
|
||||
aria-pressed={active}
|
||||
title={shape}
|
||||
className="w-7 h-7 rounded border flex items-center justify-center transition-colors shrink-0"
|
||||
style={{
|
||||
borderColor: active ? '#00d4ff' : '#30363d',
|
||||
background: active ? '#00d4ff22' : 'transparent',
|
||||
}}
|
||||
>
|
||||
<svg width={16} height={16} viewBox="0 0 16 16">
|
||||
{markerGlyph(shape, active ? '#00d4ff' : '#8b949e')}
|
||||
</svg>
|
||||
</button>
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -124,26 +124,26 @@ describe('CustomStyleModal', () => {
|
||||
expect(markUnsaved).not.toHaveBeenCalled()
|
||||
})
|
||||
|
||||
it('edge editor exposes Start/End arrow toggles defaulting off', () => {
|
||||
it('edge editor exposes Start/End marker pickers defaulting to none', () => {
|
||||
render(<CustomStyleModal open onClose={vi.fn()} />)
|
||||
fireEvent.click(screen.getByRole('button', { name: 'Edges' }))
|
||||
fireEvent.click(screen.getByRole('button', { name: /Ethernet/ }))
|
||||
const startBtn = screen.getByRole('button', { name: 'Start' })
|
||||
const endBtn = screen.getByRole('button', { name: 'End' })
|
||||
expect(startBtn.getAttribute('aria-pressed')).toBe('false')
|
||||
expect(endBtn.getAttribute('aria-pressed')).toBe('false')
|
||||
const startNone = screen.getByRole('button', { name: 'Start marker none' })
|
||||
const endNone = screen.getByRole('button', { name: 'End marker none' })
|
||||
expect(startNone.getAttribute('aria-pressed')).toBe('true')
|
||||
expect(endNone.getAttribute('aria-pressed')).toBe('true')
|
||||
})
|
||||
|
||||
it('toggling End arrow feeds arrowEnd to applyTypeEdgeStyle', () => {
|
||||
it('picking an End shape feeds arrowEnd to applyTypeEdgeStyle', () => {
|
||||
const applyTypeEdgeStyle = vi.fn()
|
||||
useCanvasStore.setState({ applyTypeEdgeStyle })
|
||||
render(<CustomStyleModal open onClose={vi.fn()} />)
|
||||
fireEvent.click(screen.getByRole('button', { name: 'Edges' }))
|
||||
fireEvent.click(screen.getByRole('button', { name: /Ethernet/ }))
|
||||
fireEvent.click(screen.getByRole('button', { name: 'End' }))
|
||||
fireEvent.click(screen.getByRole('button', { name: 'End marker diamond' }))
|
||||
fireEvent.click(screen.getByRole('button', { name: /Apply to existing Ethernet/ }))
|
||||
expect(applyTypeEdgeStyle.mock.calls[0][1].arrowEnd).toBe(true)
|
||||
expect(applyTypeEdgeStyle.mock.calls[0][1].arrowStart).toBe(false)
|
||||
expect(applyTypeEdgeStyle.mock.calls[0][1].arrowEnd).toBe('diamond')
|
||||
expect(applyTypeEdgeStyle.mock.calls[0][1].arrowStart).toBe('none')
|
||||
})
|
||||
|
||||
it('editing path style updates the edge draft', () => {
|
||||
|
||||
@@ -165,39 +165,56 @@ describe('EdgeModal', () => {
|
||||
expect(onSubmit.mock.calls[0][0].animated).toBe('basic')
|
||||
})
|
||||
|
||||
// ── Arrow markers ─────────────────────────────────────────────────────────
|
||||
// ── Endpoint markers ──────────────────────────────────────────────────────
|
||||
|
||||
it('arrows default to off', () => {
|
||||
it('endpoints default to none', () => {
|
||||
const onSubmit = vi.fn()
|
||||
render(<EdgeModal open onClose={vi.fn()} onSubmit={onSubmit} />)
|
||||
fireEvent.click(screen.getByRole('button', { name: 'Connect' }))
|
||||
expect(onSubmit.mock.calls[0][0].marker_start).toBe(false)
|
||||
expect(onSubmit.mock.calls[0][0].marker_end).toBe(false)
|
||||
expect(onSubmit.mock.calls[0][0].marker_start).toBe('none')
|
||||
expect(onSubmit.mock.calls[0][0].marker_end).toBe('none')
|
||||
})
|
||||
|
||||
it('toggling End arrow sends marker_end: true', () => {
|
||||
it('picking an End arrow sends marker_end: "arrow"', () => {
|
||||
const onSubmit = vi.fn()
|
||||
render(<EdgeModal open onClose={vi.fn()} onSubmit={onSubmit} />)
|
||||
fireEvent.click(screen.getByRole('button', { name: /Arrow End/ }))
|
||||
fireEvent.click(screen.getByRole('button', { name: 'End marker arrow' }))
|
||||
fireEvent.click(screen.getByRole('button', { name: 'Connect' }))
|
||||
expect(onSubmit.mock.calls[0][0].marker_end).toBe(true)
|
||||
expect(onSubmit.mock.calls[0][0].marker_start).toBe(false)
|
||||
expect(onSubmit.mock.calls[0][0].marker_end).toBe('arrow')
|
||||
expect(onSubmit.mock.calls[0][0].marker_start).toBe('none')
|
||||
})
|
||||
|
||||
it('toggling Start arrow sends marker_start: true', () => {
|
||||
it('picking a Start circle sends marker_start: "circle"', () => {
|
||||
const onSubmit = vi.fn()
|
||||
render(<EdgeModal open onClose={vi.fn()} onSubmit={onSubmit} />)
|
||||
fireEvent.click(screen.getByRole('button', { name: /Arrow Start/ }))
|
||||
fireEvent.click(screen.getByRole('button', { name: 'Start marker circle' }))
|
||||
fireEvent.click(screen.getByRole('button', { name: 'Connect' }))
|
||||
expect(onSubmit.mock.calls[0][0].marker_start).toBe(true)
|
||||
expect(onSubmit.mock.calls[0][0].marker_start).toBe('circle')
|
||||
})
|
||||
|
||||
it('pre-fills arrows from initial', () => {
|
||||
it('allows a different shape on each end', () => {
|
||||
const onSubmit = vi.fn()
|
||||
render(<EdgeModal open onClose={vi.fn()} onSubmit={onSubmit} initial={{ marker_start: true, marker_end: true }} />)
|
||||
render(<EdgeModal open onClose={vi.fn()} onSubmit={onSubmit} />)
|
||||
fireEvent.click(screen.getByRole('button', { name: 'Start marker diamond' }))
|
||||
fireEvent.click(screen.getByRole('button', { name: 'End marker square' }))
|
||||
fireEvent.click(screen.getByRole('button', { name: 'Connect' }))
|
||||
expect(onSubmit.mock.calls[0][0].marker_start).toBe(true)
|
||||
expect(onSubmit.mock.calls[0][0].marker_end).toBe(true)
|
||||
expect(onSubmit.mock.calls[0][0].marker_start).toBe('diamond')
|
||||
expect(onSubmit.mock.calls[0][0].marker_end).toBe('square')
|
||||
})
|
||||
|
||||
it('pre-fills endpoint shapes from initial', () => {
|
||||
const onSubmit = vi.fn()
|
||||
render(<EdgeModal open onClose={vi.fn()} onSubmit={onSubmit} initial={{ marker_start: 'diamond', marker_end: 'arrow-open' }} />)
|
||||
fireEvent.click(screen.getByRole('button', { name: 'Connect' }))
|
||||
expect(onSubmit.mock.calls[0][0].marker_start).toBe('diamond')
|
||||
expect(onSubmit.mock.calls[0][0].marker_end).toBe('arrow-open')
|
||||
})
|
||||
|
||||
it('coerces a legacy boolean initial marker to "arrow"', () => {
|
||||
const onSubmit = vi.fn()
|
||||
render(<EdgeModal open onClose={vi.fn()} onSubmit={onSubmit} initial={{ marker_end: true }} />)
|
||||
fireEvent.click(screen.getByRole('button', { name: 'Connect' }))
|
||||
expect(onSubmit.mock.calls[0][0].marker_end).toBe('arrow')
|
||||
})
|
||||
|
||||
it('selecting None after Snake omits animated from payload', () => {
|
||||
|
||||
@@ -343,12 +343,12 @@ describe('canvasStore', () => {
|
||||
expect(edges[0].id).not.toBe(edges[1].id)
|
||||
})
|
||||
|
||||
it('onConnect preserves arrow markers from edge data', () => {
|
||||
const conn = Object.assign({ source: 'n1', target: 'n2', sourceHandle: null, targetHandle: null }, { type: 'ethernet', marker_start: true, marker_end: true })
|
||||
it('onConnect preserves endpoint marker shapes from edge data', () => {
|
||||
const conn = Object.assign({ source: 'n1', target: 'n2', sourceHandle: null, targetHandle: null }, { type: 'ethernet', marker_start: 'diamond', marker_end: 'arrow' })
|
||||
useCanvasStore.getState().onConnect(conn)
|
||||
const { edges } = useCanvasStore.getState()
|
||||
expect(edges[0].data?.marker_start).toBe(true)
|
||||
expect(edges[0].data?.marker_end).toBe(true)
|
||||
expect(edges[0].data?.marker_start).toBe('diamond')
|
||||
expect(edges[0].data?.marker_end).toBe('arrow')
|
||||
})
|
||||
|
||||
it('onConnect preserves sourceHandle and targetHandle for cluster edges', () => {
|
||||
@@ -1320,15 +1320,15 @@ describe('canvasStore — custom style apply', () => {
|
||||
const e2: Edge<EdgeData> = { id: 'e2', source: 'n1', target: 'n2', type: 'wifi', data: { type: 'wifi' } }
|
||||
useCanvasStore.setState({ nodes: [], edges: [e1, e2] })
|
||||
|
||||
useCanvasStore.getState().applyTypeEdgeStyle('ethernet', { color: '#00ff00', opacity: 1, pathStyle: 'smooth', animated: 'flow', arrowStart: true, arrowEnd: true })
|
||||
useCanvasStore.getState().applyTypeEdgeStyle('ethernet', { color: '#00ff00', opacity: 1, pathStyle: 'smooth', animated: 'flow', arrowStart: 'circle', arrowEnd: 'arrow' })
|
||||
|
||||
const updated1 = useCanvasStore.getState().edges.find((e) => e.id === 'e1')!
|
||||
const updated2 = useCanvasStore.getState().edges.find((e) => e.id === 'e2')!
|
||||
expect(updated1.data?.custom_color).toBe('#00ff00')
|
||||
expect(updated1.data?.path_style).toBe('smooth')
|
||||
expect(updated1.data?.animated).toBe('flow')
|
||||
expect(updated1.data?.marker_start).toBe(true)
|
||||
expect(updated1.data?.marker_end).toBe(true)
|
||||
expect(updated1.data?.marker_start).toBe('circle')
|
||||
expect(updated1.data?.marker_end).toBe('arrow')
|
||||
expect(updated2.data?.custom_color).toBeUndefined()
|
||||
expect(updated2.data?.marker_end).toBeUndefined()
|
||||
})
|
||||
@@ -1344,7 +1344,7 @@ describe('canvasStore — custom style apply', () => {
|
||||
proxmox: { borderColor: '#ff6e00', borderOpacity: 1, bgColor: '#111', bgOpacity: 1, iconColor: '#ff6e00', iconOpacity: 1, width: 0, height: 0 },
|
||||
},
|
||||
edges: {
|
||||
ethernet: { color: '#aabbcc', opacity: 1, pathStyle: 'bezier', animated: 'none', arrowStart: false, arrowEnd: true },
|
||||
ethernet: { color: '#aabbcc', opacity: 1, pathStyle: 'bezier', animated: 'none', arrowStart: 'none', arrowEnd: 'square' },
|
||||
},
|
||||
})
|
||||
|
||||
@@ -1354,8 +1354,8 @@ describe('canvasStore — custom style apply', () => {
|
||||
expect(np.data.custom_colors?.border).toBe('#ff6e00')
|
||||
expect(ns.data.custom_colors?.border).toBeUndefined()
|
||||
expect(e.data?.custom_color).toBe('#aabbcc')
|
||||
expect(e.data?.marker_end).toBe(true)
|
||||
expect(e.data?.marker_start).toBe(false)
|
||||
expect(e.data?.marker_end).toBe('square')
|
||||
expect(e.data?.marker_start).toBe('none')
|
||||
expect(useCanvasStore.getState().hasUnsavedChanges).toBe(true)
|
||||
})
|
||||
|
||||
|
||||
@@ -39,7 +39,7 @@ describe('themeStore', () => {
|
||||
it('setCustomStyle replaces the entire definition', () => {
|
||||
const def: CustomStyleDef = {
|
||||
nodes: { server: { borderColor: '#ff0000', borderOpacity: 1, bgColor: '#000000', bgOpacity: 1, iconColor: '#ff0000', iconOpacity: 1, width: 200, height: 80 } },
|
||||
edges: { ethernet: { color: '#00ff00', opacity: 0.8, pathStyle: 'bezier', animated: 'none', arrowStart: false, arrowEnd: false } },
|
||||
edges: { ethernet: { color: '#00ff00', opacity: 0.8, pathStyle: 'bezier', animated: 'none', arrowStart: 'none', arrowEnd: 'none' } },
|
||||
}
|
||||
useThemeStore.getState().setCustomStyle(def)
|
||||
expect(useThemeStore.getState().customStyle.nodes.server?.borderColor).toBe('#ff0000')
|
||||
|
||||
@@ -156,6 +156,13 @@ export interface NodeData extends Record<string, unknown> {
|
||||
|
||||
export type EdgePathStyle = 'bezier' | 'smooth'
|
||||
|
||||
/**
|
||||
* Endpoint marker shape for an edge end. `none` = no marker.
|
||||
* Legacy saves stored a boolean (`true` = filled arrow) — coerced via
|
||||
* `normalizeMarker` in utils/edgeMarkers.
|
||||
*/
|
||||
export type MarkerShape = 'none' | 'arrow' | 'arrow-open' | 'circle' | 'diamond' | 'square'
|
||||
|
||||
export interface Waypoint {
|
||||
x: number
|
||||
y: number
|
||||
@@ -169,10 +176,10 @@ export interface EdgeData extends Record<string, unknown> {
|
||||
custom_color?: string
|
||||
path_style?: EdgePathStyle
|
||||
animated?: boolean | 'snake' | 'flow' | 'basic' | 'none'
|
||||
/** Filled arrowhead at the source end. */
|
||||
marker_start?: boolean
|
||||
/** Filled arrowhead at the target end. */
|
||||
marker_end?: boolean
|
||||
/** Marker shape at the source end. Legacy boolean (`true`=arrow) coerced on read. */
|
||||
marker_start?: MarkerShape | boolean
|
||||
/** Marker shape at the target end. Legacy boolean (`true`=arrow) coerced on read. */
|
||||
marker_end?: MarkerShape | boolean
|
||||
waypoints?: Waypoint[]
|
||||
}
|
||||
|
||||
@@ -261,10 +268,10 @@ export interface EdgeTypeStyle {
|
||||
opacity: number
|
||||
pathStyle: EdgePathStyle
|
||||
animated: 'none' | 'snake' | 'flow' | 'basic'
|
||||
/** Default filled arrowhead at the source end for new edges of this type. */
|
||||
arrowStart: boolean
|
||||
/** Default filled arrowhead at the target end for new edges of this type. */
|
||||
arrowEnd: boolean
|
||||
/** Default marker shape at the source end for new edges of this type. */
|
||||
arrowStart: MarkerShape
|
||||
/** Default marker shape at the target end for new edges of this type. */
|
||||
arrowEnd: MarkerShape
|
||||
}
|
||||
|
||||
export interface CustomStyleDef {
|
||||
|
||||
@@ -243,17 +243,24 @@ describe('serializeEdge', () => {
|
||||
expect(result.animated).toBe(true)
|
||||
})
|
||||
|
||||
it('serializes arrow markers', () => {
|
||||
const edge = makeRfEdge({ data: { type: 'ethernet', marker_start: true, marker_end: true } })
|
||||
it('serializes endpoint marker shapes', () => {
|
||||
const edge = makeRfEdge({ data: { type: 'ethernet', marker_start: 'diamond', marker_end: 'arrow' } })
|
||||
const result = serializeEdge(edge)
|
||||
expect(result.marker_start).toBe(true)
|
||||
expect(result.marker_end).toBe(true)
|
||||
expect(result.marker_start).toBe('diamond')
|
||||
expect(result.marker_end).toBe('arrow')
|
||||
})
|
||||
|
||||
it('defaults arrow markers to false when absent', () => {
|
||||
it('coerces legacy boolean markers to shape strings', () => {
|
||||
const edge = makeRfEdge({ data: { type: 'ethernet', marker_start: true, marker_end: false } })
|
||||
const result = serializeEdge(edge)
|
||||
expect(result.marker_start).toBe('arrow')
|
||||
expect(result.marker_end).toBe('none')
|
||||
})
|
||||
|
||||
it('defaults endpoint markers to "none" when absent', () => {
|
||||
const result = serializeEdge(makeRfEdge())
|
||||
expect(result.marker_start).toBe(false)
|
||||
expect(result.marker_end).toBe(false)
|
||||
expect(result.marker_start).toBe('none')
|
||||
expect(result.marker_end).toBe('none')
|
||||
})
|
||||
|
||||
it('nulls optional fields when absent', () => {
|
||||
|
||||
@@ -1,6 +1,7 @@
|
||||
import type { Node, Edge } from '@xyflow/react'
|
||||
import type { NodeData, EdgeData, Waypoint } from '@/types'
|
||||
import { normalizeHandle, clampHandles, handleId, handleCountField, type Side } from '@/utils/handleUtils'
|
||||
import { normalizeMarker } from '@/utils/edgeMarkers'
|
||||
|
||||
// ── Types ────────────────────────────────────────────────────────────────────
|
||||
|
||||
@@ -49,8 +50,8 @@ export interface ApiEdge {
|
||||
custom_color?: string | null
|
||||
path_style?: string | null
|
||||
animated?: boolean | 'snake' | 'flow' | 'basic' | 'none'
|
||||
marker_start?: boolean | null
|
||||
marker_end?: boolean | null
|
||||
marker_start?: string | boolean | null
|
||||
marker_end?: string | boolean | null
|
||||
source_handle?: string | null
|
||||
target_handle?: string | null
|
||||
waypoints?: Waypoint[] | null
|
||||
@@ -144,8 +145,8 @@ export function serializeEdge(e: Edge<EdgeData>): Record<string, unknown> {
|
||||
custom_color: e.data?.custom_color ?? null,
|
||||
path_style: e.data?.path_style ?? null,
|
||||
animated: e.data?.animated ?? false,
|
||||
marker_start: e.data?.marker_start ?? false,
|
||||
marker_end: e.data?.marker_end ?? false,
|
||||
marker_start: normalizeMarker(e.data?.marker_start),
|
||||
marker_end: normalizeMarker(e.data?.marker_end),
|
||||
source_handle: normalizeHandle(e.sourceHandle),
|
||||
target_handle: normalizeHandle(e.targetHandle),
|
||||
waypoints: e.data?.waypoints?.length ? e.data.waypoints : null,
|
||||
|
||||
@@ -0,0 +1,42 @@
|
||||
import type { MarkerShape } from '@/types'
|
||||
|
||||
/** All selectable marker shapes, in picker order. */
|
||||
export const MARKER_SHAPES: MarkerShape[] = [
|
||||
'none', 'arrow', 'arrow-open', 'circle', 'diamond', 'square',
|
||||
]
|
||||
|
||||
const SHAPE_SET = new Set<string>(MARKER_SHAPES)
|
||||
|
||||
/**
|
||||
* Coerce any stored/legacy marker value into a MarkerShape.
|
||||
* - legacy boolean `true` → 'arrow'
|
||||
* - legacy boolean `false` / null / undefined → 'none'
|
||||
* - a valid shape string passes through
|
||||
* - anything unknown → 'none'
|
||||
*/
|
||||
export function normalizeMarker(v: unknown): MarkerShape {
|
||||
if (v === true) return 'arrow'
|
||||
if (v === false || v == null) return 'none'
|
||||
if (typeof v === 'string' && SHAPE_SET.has(v)) return v as MarkerShape
|
||||
return 'none'
|
||||
}
|
||||
|
||||
export type NonNoneMarkerShape = Exclude<MarkerShape, 'none'>
|
||||
|
||||
/**
|
||||
* SVG <marker> geometry per shape, drawn in a 0..10 viewBox.
|
||||
* - `refX` positions the shape on the endpoint: directional shapes (arrow,
|
||||
* arrow-open) put their tip on the point; symmetric caps (circle, diamond,
|
||||
* square) centre on it.
|
||||
* - `directional` shapes rotate with the edge; symmetric ones don't care.
|
||||
*/
|
||||
export const MARKER_GEOMETRY: Record<
|
||||
NonNoneMarkerShape,
|
||||
{ refX: number; directional: boolean }
|
||||
> = {
|
||||
arrow: { refX: 9, directional: true },
|
||||
'arrow-open': { refX: 8.5, directional: true },
|
||||
circle: { refX: 5, directional: false },
|
||||
diamond: { refX: 5, directional: false },
|
||||
square: { refX: 5, directional: false },
|
||||
}
|
||||
Reference in New Issue
Block a user