Improve canvas baselines and reflowing (#22)

* Restore icon-derived buff colours with readable contrast

* Align GCD baselines and label continuing buff tails

* Default canvas view to fit to window

Author: hintxiv

src/app/render-harness/RenderHarness.tsx

@@ -38,6 +38,18 @@ const ogcd = (id: string, name: string, extra: Partial<Action> = {}): Action =>
 })
 
 const fixtures: Record<string, { prepullRotation: Action[]; rotation: Action[]; title?: string; expansion?: string; patch?: string; logo?: boolean }> = {
+    'gcd-baseline': {
+        prepullRotation: [],
+        rotation: [gcd('g1', 'Rising Raptor'), gcd('g2', 'Shadow of the Destroyer'), gcd('g3', 'Six-sided Star')],
+    },
+    'gcd-lanes': {
+        prepullRotation: [],
+        rotation: [gcd('g1', 'Rising Raptor', { recastTime: 0 }), gcd('g2', 'Shadow of the Destroyer', { recastTime: 0 }), gcd('g3', 'Six-sided Star', { recastTime: 0 })],
+    },
+    'buff-tail': {
+        prepullRotation: [],
+        rotation: [gcd('g1', 'Heated Split Shot'), gcd('g2', 'Heated Slug Shot'), ogcd('o1', 'Wildfire', { statusesApplied: [{ ...buff, name: 'Wildfire', duration: 20, applicationDelay: 0.6 }] })],
+    },
     empty: { prepullRotation: [], rotation: [] },
     ordinary: {
         prepullRotation: [ogcd('p1', 'Grade 6 Gemdraught of Intelligence', { prepull: -2, statusesApplied: [buff] })],

src/components/Canvas/Canvas.tsx

@@ -135,8 +135,8 @@ const Canvas = forwardRef<HTMLCanvasElement, CanvasProps>((props, ref) => {
     })
     const [renderStatus, setRenderStatus] = useState<CanvasRenderState['status']>('loading')
     const [renderError, setRenderError] = useState('')
-    // false = scale to pane height (default); true = fit the whole canvas in the pane
-    const [fitToWindow, setFitToWindow] = useState(false)
+    // true = fit the whole canvas in the pane (default); false = scale to pane height
+    const [fitToWindow, setFitToWindow] = useState(true)
     const [viewportSize, setViewportSize] = useState({ width: 0, height: 0 })
 
     useImperativeHandle(ref, () => innerRef.current!, [])

src/components/Canvas/calculateBuffLinePositions.ts

@@ -1,4 +1,3 @@
-import { MutableRefObject } from 'react'
 import { CanvasBuffLine, CanvasIcon, CanvasoGCD, TimelinePoint } from './types'
 
 export const calculateTimeline = (
@@ -107,7 +106,8 @@ const interpolateTime = (timeline: TimelinePoint[], x: number) => {
     const before = reverseSortedPoints.find(point => point.x <= x)
     const after = sortedPoints.find(point => point.x > x)
 
-    if (!before || !after) return sortedPoints[0].time
+    if (!before) return sortedPoints[0].time
+    if (!after) return before.time + (before.addedWeaveTime ?? 0)
 
     const beforeTime = before.time + (before.addedWeaveTime ?? 0)
     const afterTime = after.time + (after.addedWeaveTime ?? 0)
@@ -119,26 +119,30 @@ const interpolateTime = (timeline: TimelinePoint[], x: number) => {
 export const calculateBuffLinePositions = (
     icons: CanvasIcon[],
     timeline: TimelinePoint[],
-    iconRefs: MutableRefObject<(HTMLImageElement | null)[]>,
     finalX: number,
 ): CanvasBuffLine[] => {
     const buffLines: CanvasBuffLine[] = []
 
-    icons.forEach((icon, index) => {
+    icons.forEach(icon => {
         if (icon.type !== 'gcd' && icon.type !== 'ogcd') return
         ;(icon.statusesApplied ?? []).forEach((status, statusIndex) => {
             if (status.enabled === false) return
             const initialX = icon.x + icon.width
             const actionTime = icon.prepull ?? interpolateTime(timeline, initialX)
             const startTime = actionTime + (status.applicationDelay ?? 0)
+            const endTime = startTime + status.duration
+            const rotationEndTime = timeline.at(-1)?.time ?? 0
+            if (status.duration <= 0 || startTime > rotationEndTime || endTime < (timeline[0]?.time ?? 0)) return
             const startX = interpolateX(timeline, startTime, finalX)
 
             buffLines.push({
                 instanceKey: `${icon.instanceId}:${statusIndex}`,
                 status: status,
-                icon: iconRefs.current[index] ?? null,
+                startTime,
+                endTime,
+                continuesAfter: endTime > rotationEndTime,
                 startX: startX,
-                endX: interpolateX(timeline, startTime + status.duration, finalX),
+                endX: interpolateX(timeline, endTime, finalX),
             })
         })
     })

src/components/Canvas/layoutInfographic.test.ts

@@ -101,8 +101,8 @@ describe('infographic layout plan', () => {
         const ids = plan.primitives.map(primitive => primitive.id)
         expect(ids.filter(id => id.startsWith('buff-') && id.endsWith('-start'))).toHaveLength(1)
         expect(ids.filter(id => id.endsWith('-continue-before'))).toHaveLength(2)
-        expect(ids.filter(id => id.startsWith('buff-') && id.endsWith('-arrow'))).toHaveLength(2)
-        expect(ids.filter(id => id.startsWith('buff-') && id.endsWith('-end'))).toHaveLength(1)
+        expect(ids.filter(id => id.startsWith('buff-') && id.endsWith('-arrow'))).toHaveLength(3)
+        expect(ids.filter(id => id.startsWith('buff-') && id.endsWith('-end'))).toHaveLength(0)
         expect(plan.textBlocks.filter(block => block.role === 'buff')).toHaveLength(3)
         expect(auditRenderPlan(plan)).toEqual([])
     })
@@ -219,6 +219,60 @@ describe('infographic layout plan', () => {
         expect(count!.bounds.y).toBeGreaterThan(name!.bounds.y + name!.bounds.height)
     })
 
+    it.each([1, 2])('anchors counts below upward-growing name lanes (%s rows)', rowCount => {
+        const plan = layoutInfographic({ ...baseInput, rowCount, rotation: [
+            action('g1', 'gcd', { name: 'Rising Raptor', recastTime: 0 }),
+            action('g2', 'gcd', { name: 'Shadow of the Destroyer', recastTime: 0 }),
+            action('g3', 'gcd', { name: 'Six-sided Star', recastTime: 0 }),
+            action('g4', 'gcd', { name: '', recastTime: 0 }),
+        ] }, measurer)
+        const icons = actionIcons(plan)
+        const counts = plan.textBlocks.filter(block => block.role === 'count')
+        expect(counts.map(block => block.lines[0].text)).toEqual(['1', '2', '3', '4'])
+        for (const y of Array.from(new Set(icons.map(icon => icon.bounds.y)))) {
+            const owners = icons.filter(icon => icon.bounds.y === y).map(icon => icon.ownerId)
+            const rowCounts = counts.filter(count => owners.includes(count.ownerId))
+            expect(new Set(rowCounts.map(count => count.lines[0].y)).size).toBe(1)
+            const names = plan.textBlocks.filter(block => block.role === 'action' && owners.includes(block.ownerId))
+            expect(names.every(name => name.bounds.y >= y + icons[0].bounds.height)).toBe(true)
+            expect(names.every(name => name.bounds.y + name.bounds.height < rowCounts[0].bounds.y)).toBe(true)
+        }
+        expect(auditRenderPlan(plan)).toEqual([])
+    })
+
+    it.each([1, 2])('distinguishes expiry from continuation and includes short tails in bounds (%s rows)', rowCount => {
+        const make = (duration: number, applicationDelay = 0) => layoutInfographic({ ...baseInput, rowCount,
+            rotation: [action('g1'), action('g2', 'gcd', { statusesApplied: [{
+                id: 'buff', name: 'A continuing status with a long label', imageSrc: '/favicon.ico',
+                color: '#abcdef', duration, applicationDelay,
+            }] })],
+        }, measurer)
+        for (const duration of [1, 2.5]) {
+            const plan = make(duration)
+            expect(plan.primitives.some(item => item.id.endsWith('-end'))).toBe(true)
+            expect(plan.primitives.some(item => item.id.endsWith('-arrow'))).toBe(false)
+        }
+        for (const delay of [0, 2.5]) {
+            const plan = make(20, delay)
+            expect(plan.primitives.some(item => item.id.endsWith('-arrow'))).toBe(true)
+            expect(plan.primitives.some(item => item.id.endsWith('-end'))).toBe(false)
+            expect(plan.textBlocks.filter(block => block.role === 'buff')).toHaveLength(1)
+            expect(auditRenderPlan(plan)).toEqual([])
+        }
+        expect(make(20, 3).primitives.some(item => item.ownerId?.startsWith('buff-'))).toBe(false)
+        expect(make(0).primitives.some(item => item.ownerId?.startsWith('buff-'))).toBe(false)
+    })
+
+    it('grows the canvas for a late continuation without stretching the timeline', () => {
+        const rotation = Array.from({ length: 10 }, (_, i) => action(String(i)))
+        const original = layoutInfographic({ ...baseInput, rotation }, measurer)
+        rotation[9].statusesApplied = [{ id: 'tail', name: 'A long continuing buff at the end of the rotation', imageSrc: '/favicon.ico', color: '#abcdef', duration: 20, applicationDelay: 2 }]
+        const plan = layoutInfographic({ ...baseInput, rotation }, measurer)
+        expect(plan.width).toBeGreaterThan(original.width)
+        expect(actionIcons(plan).map(icon => icon.bounds.x)).toEqual(actionIcons(original).map(icon => icon.bounds.x))
+        expect(auditRenderPlan(plan)).toEqual([])
+    })
+
     it('adds outward lanes and connectors for consecutive oGCD labels', () => {
         const plan = layoutInfographic({
             ...baseInput,