Spaces:
Running
Running
| import { useEffect, useRef } from 'react'; | |
| import collection from './collection.json'; | |
| import { dimensions, fieldPosition, fieldCount, scatter, edgePosition, seed } from './layout.js'; | |
| import { sampleMotion, transition } from './motion.js'; | |
| import { relevanceAppearance } from './relevance.js'; | |
| import { imageURL } from './assets.js'; | |
| import { averageColor, createImageLoader, createPlaceholderLoader, thumbnailWidth } from './image-loader.js'; | |
| /** A single population of photographs, one coordinate plane, one animation clock. */ | |
| export default function ImageField({ results, onSelect, paused }) { | |
| const surface = useRef(null); | |
| const engine = useRef(null); | |
| const selection = useRef(onSelect); | |
| selection.current = onSelect; | |
| useEffect(() => { | |
| const root = surface.current; | |
| const nodes = new Map(); | |
| const thumbnails = createImageLoader(); | |
| const placeholders = createPlaceholderLoader(); | |
| const motion = matchMedia('(prefers-reduced-motion: reduce)'); | |
| const state = { width: root.clientWidth, height: root.clientHeight, results: [], pool: [], paused: false, pointer: { x: 0, y: 0 }, x: 0, y: 0 }; | |
| let frame; | |
| let previous = performance.now(), time = 0; | |
| function create(image, target, initial = false) { | |
| const button = document.createElement('button'); | |
| button.className = 'image-tile'; | |
| button.type = 'button'; | |
| button.dataset.imageId = image.id; | |
| button.style.backgroundColor = averageColor(image.blur); | |
| // Stack order belongs to the photograph, never to its search rank. | |
| button.style.zIndex = 1 + Math.floor(seed(image.id) * 100); | |
| root.append(button); | |
| const home = initial ? target : edgePosition(image, state.width, state.height, target); | |
| const node = { image, button, ...home, target: home, motion: null, exit: false, phase: seed(image.id) * Math.PI * 2 }; | |
| resize(node); | |
| button.style.transform = `translate3d(${home.x - node.width / 2}px,${home.y - node.height / 2}px,0) scale(${home.scale})`; | |
| nodes.set(image.id, node); | |
| node.cancelPlaceholder = placeholders.request(image.blur, url => { | |
| if (url && nodes.get(image.id) === node && !node.photo) button.style.backgroundImage = `url("${url}")`; | |
| }); | |
| button.onclick = () => selection.current({ ...image, previewURL: node.photo?.currentSrc || node.photo?.src }, button.getBoundingClientRect().toJSON()); | |
| return node; | |
| } | |
| function resize(node) { | |
| const { width, height } = dimensions(node.image, state.width); | |
| if (node.width === width && node.height === height) return; | |
| node.width = width; node.height = height; | |
| node.button.style.width = `${width}px`; | |
| node.button.style.height = `${height}px`; | |
| } | |
| function remove(node) { | |
| node.load?.cancel(); | |
| node.cancelPlaceholder?.(); | |
| node.button.remove(); | |
| if (node.photo) { node.photo.remove(); thumbnails.release(node.photo); } | |
| nodes.delete(node.image.id); | |
| } | |
| function loadThumbnail(node, priority) { | |
| const url = imageURL(node.image, thumbnailWidth(node.width, node.target.scale, window.devicePixelRatio || 1)); | |
| node.load = thumbnails.request(url, photo => { | |
| node.load = null; | |
| if (node.exit || nodes.get(node.image.id) !== node) { thumbnails.release(photo); return; } | |
| photo.alt = ''; photo.draggable = false; photo.className = ''; | |
| node.photo = photo; | |
| node.button.append(photo); | |
| if (!motion.matches) photo.animate([{ opacity: 0 }, { opacity: 1 }], { duration: 180, easing: 'ease-out' }); | |
| photo.classList.add('loaded'); | |
| }, priority); | |
| } | |
| function layout(initial = false) { | |
| const now = performance.now(); | |
| const active = new Set(state.pool.map(image => image.id)); | |
| const ranks = new Map(state.results.map((image, rank) => [image.id, rank])); | |
| const targets = state.pool.map((image, index) => state.results.length | |
| ? fieldPosition(image, index, state.pool.length, state.width, state.height) | |
| : scatter(image, index, state.pool.length, state.width, state.height)); | |
| const appearance = relevanceAppearance(state.results); | |
| state.pool.forEach((image, index) => { | |
| const target = targets[index]; | |
| const node = nodes.get(image.id) || create(image, target, initial); | |
| node.target = target; node.exit = false; | |
| node.button.removeAttribute('aria-hidden'); | |
| const rank = ranks.get(image.id); | |
| resize(node); | |
| if (!node.photo && !node.load) loadThumbnail(node, rank ?? 200 + index); | |
| node.load?.prioritize(rank ?? 200 + index); | |
| node.button.setAttribute('aria-label', rank == null ? 'Phóng to ảnh' : `Phóng to kết quả ${rank + 1}`); | |
| node.button.setAttribute('aria-haspopup', 'dialog'); | |
| const { opacity, blur } = appearance(image.id); | |
| node.button.style.setProperty('--relevance-opacity', opacity); | |
| node.button.style.setProperty('--relevance-blur', `${blur}px`); | |
| node.button.dataset.rank = rank == null ? '' : rank + 1; | |
| node.button.tabIndex = state.results.length ? (rank != null && rank < 12 ? 0 : -1) : (index < 12 ? 0 : -1); | |
| transition(node, target, now, initial || motion.matches); | |
| }); | |
| for (const [id, node] of nodes) { | |
| if (active.has(id) || node.exit) continue; | |
| node.exit = true; | |
| node.load?.cancel(); node.load = null; | |
| node.button.setAttribute('aria-hidden', 'true'); | |
| node.button.dataset.rank = ''; | |
| node.button.tabIndex = -1; | |
| transition(node, edgePosition(node.image, state.width, state.height, node), now, motion.matches); | |
| } | |
| } | |
| function update(results) { | |
| const count = fieldCount(state.width); | |
| const seen = new Set(); | |
| // Retain existing photographs between searches instead of restoring a background. | |
| const candidates = results.length ? [...results, ...state.pool, ...collection] : collection; | |
| const pool = []; | |
| for (const image of candidates) { | |
| if (seen.has(image.id)) continue; | |
| seen.add(image.id); | |
| pool.push(image); | |
| if (pool.length === count) break; | |
| } | |
| // Move immediately. BlurHash covers image downloads without holding up the field. | |
| state.results = results; state.pool = pool; | |
| layout(); | |
| } | |
| function animate(now) { | |
| const elapsed = now - previous; | |
| const dt = Math.min(elapsed / 1000, 0.04); | |
| previous = now; | |
| if (state.paused) { | |
| for (const node of nodes.values()) if (node.motion) node.motion.started += elapsed; | |
| frame = requestAnimationFrame(animate); | |
| return; | |
| } | |
| if (!document.hidden) time += dt; | |
| const blend = 1 - Math.exp(-4 * dt); | |
| state.x += (state.pointer.x - state.x) * blend; | |
| state.y += (state.pointer.y - state.y) * blend; | |
| for (const node of nodes.values()) { | |
| let done = true; | |
| if (node.motion) { | |
| const sampled = sampleMotion(node.motion, motion.matches ? Infinity : now); | |
| Object.assign(node, sampled.value); | |
| done = sampled.done; | |
| if (done) node.motion = null; | |
| } | |
| if (node.exit && done) { | |
| remove(node); continue; | |
| } | |
| // Shared ambient flow: equal parallax keeps everything on the same visual plane. | |
| const phase = node.phase; | |
| const dx = motion.matches ? 0 : Math.sin(time * 0.22 + phase) * 3 + state.x * 7; | |
| const dy = motion.matches ? 0 : Math.cos(time * 0.18 + phase) * 3 + state.y * 7; | |
| node.button.style.transform = `translate3d(${(node.x - node.width / 2 + dx).toFixed(2)}px,${(node.y - node.height / 2 + dy).toFixed(2)}px,0) scale(${node.scale.toFixed(4)})`; | |
| node.button.style.pointerEvents = node.exit ? 'none' : ''; | |
| } | |
| frame = requestAnimationFrame(animate); | |
| } | |
| state.pool = collection.slice(0, fieldCount(state.width)); | |
| layout(true); | |
| const observer = new ResizeObserver(([entry]) => { | |
| const { width, height } = entry.contentRect; | |
| if (width === state.width && height === state.height) return; | |
| state.width = width; state.height = height; | |
| update(state.results); | |
| }); | |
| observer.observe(root); | |
| const move = event => { | |
| if (event.pointerType === 'touch') return; | |
| state.pointer.x = (event.clientX / state.width - 0.5) * 2; | |
| state.pointer.y = (event.clientY / state.height - 0.5) * 2; | |
| }; | |
| const leave = () => { state.pointer.x = state.pointer.y = 0; }; | |
| root.addEventListener('pointermove', move); root.addEventListener('pointerleave', leave); | |
| frame = requestAnimationFrame(animate); | |
| engine.current = { state, update }; | |
| return () => { | |
| cancelAnimationFrame(frame); observer.disconnect(); | |
| root.removeEventListener('pointermove', move); root.removeEventListener('pointerleave', leave); | |
| thumbnails.dispose(); placeholders.dispose(); | |
| root.replaceChildren(); engine.current = null; | |
| }; | |
| }, []); | |
| useEffect(() => { engine.current?.update(results); }, [results]); | |
| useEffect(() => { | |
| if (!engine.current) return; | |
| engine.current.state.paused = paused; | |
| }, [paused]); | |
| return <div className="image-field" ref={surface} aria-label="Photograph collection" />; | |
| } | |