@hina-ui/vue 1.7.10 → 1.7.12

package/dist/shared/behavior/spoiler/painter.ts

@@ -32,26 +32,50 @@ const DEFAULTS = {
   accent: '0 0% 20%',
 } as const
 
+export const SPOILER_WORKLET_INPUTS = [
+  '--hn-nz-t',
+  '--hn-nz-stop',
+  '--hn-nz-fade',
+  '--hn-nz-gap',
+  '--hn-nz-accent',
+  '--hn-nz-words',
+  '--hn-nz-density',
+] as const
+
 const BLOCK_MAX_TILE = 293
 const INLINE_MAX_TILE = 333
 const GAP_RATIO = 8
 const DEFAULT_FADE_S = 1.5
+const CLOCK_S = 3600
+
+const painters = new WeakMap<Element, SpoilerPainter>()
+let viewport: IntersectionObserver | undefined
+
+function watchViewport() {
+  viewport ??= new IntersectionObserver(entries => {
+    for (const entry of entries) painters.get(entry.target)?.setInView(entry.isIntersecting)
+  })
+  return viewport
+}
 
 export class SpoilerPainter {
   readonly el: HTMLElement
   maxFPS: number = DEFAULTS.fps
 
-  private t = 0
-  private t0 = 0
-  private tstop: number | null = null
-  private raf: number | null = null
-  private fadeS = 0
+  private clock: Animation | null = null
+  private settle: ReturnType<typeof setTimeout> | undefined
+  private running = false
+  private inView = false
   private hidden = false
   private destroyed = false
 
   constructor(el: HTMLElement, options: SpoilerPainterOptions = {}) {
     registerSpoilerWorklet()
     this.el = el
+    painters.set(el, this)
+    watchViewport().observe(el)
+    this.setFade(0)
+    this.setTstop(null)
     this.update(options)
   }
 
@@ -68,13 +92,19 @@ export class SpoilerPainter {
   }: SpoilerPainterOptions = {}) {
     if (this.destroyed) return
 
-    this.maxFPS = prefersReducedMotion() ? 0 : fps
+    const maxFPS = prefersReducedMotion() ? 0 : fps
+    if (maxFPS !== this.maxFPS) {
+      this.maxFPS = maxFPS
+      if (maxFPS > 0) this.clock?.effect?.updateTiming({ easing: this.easing() })
+      else this.stopClock()
+    }
 
     this.el.style.setProperty('--hn-nz-density', String(density))
     this.el.style.setProperty('--hn-nz-accent', accent)
 
     const isBlockElement = getComputedStyle(this.el).getPropertyValue('display') !== 'inline'
     this.useBackgroundStyle('auto', 'auto', false)
+    this.el.style.setProperty('--hn-nz-gap', '0px 0px')
 
     if (isBlockElement) {
       this.el.style.setProperty('--hn-nz-words', 'false')
@@ -109,23 +139,21 @@ export class SpoilerPainter {
     this.el.style.background = `paint(hn-spoiler) ${repeatAndPosition} / ${w} ${h}`
   }
 
-  private setFade(value: number) {
-    this.fadeS = value
-    this.el.style.setProperty('--hn-nz-fade', `${value}s`)
+  private easing() {
+    return `steps(${Math.round(CLOCK_S * this.maxFPS)})`
   }
 
-  private setT(value: number) {
-    this.t = value
-    this.el.style.setProperty('--hn-nz-t', value.toFixed(3))
+  private time() {
+    const elapsed = Number(this.clock?.currentTime ?? 0) / 1000
+    return this.maxFPS > 0 ? Math.floor(elapsed * this.maxFPS) / this.maxFPS : 0
+  }
+
+  private setFade(value: number) {
+    this.el.style.setProperty('--hn-nz-fade', `${value}s`)
   }
 
   private setTstop(value: number | null) {
-    this.tstop = value
-    if (value !== null) {
-      this.el.style.setProperty('--hn-nz-stop', value.toFixed(3))
-    } else {
-      this.el.style.removeProperty('--hn-nz-stop')
-    }
+    this.el.style.setProperty('--hn-nz-stop', value === null ? 'Infinity' : value.toFixed(3))
   }
 
   private parseFade(value: number | boolean | undefined) {
@@ -133,13 +161,40 @@ export class SpoilerPainter {
     return value === true || value === undefined ? DEFAULT_FADE_S : Number(value)
   }
 
+  private sync() {
+    if (!this.clock) return
+    if (this.running && this.inView) this.clock.play()
+    else this.clock.pause()
+  }
+
+  private stopClock() {
+    clearTimeout(this.settle)
+    this.settle = undefined
+    this.clock?.cancel()
+    this.clock = null
+    this.running = false
+  }
+
+  setInView(value: boolean) {
+    if (this.destroyed || value === this.inView) return
+    this.inView = value
+    this.sync()
+  }
+
   hide(animate?: number | boolean) {
     if (this.destroyed) return
     this.hidden = true
     this.setFade(this.parseFade(animate))
     this.setTstop(null)
-    this.setT(0)
-    this.startAnimation()
+    this.stopClock()
+    if (this.maxFPS <= 0) return
+    this.clock = this.el.animate({ '--hn-nz-t': [0, CLOCK_S] } as PropertyIndexedKeyframes, {
+      duration: CLOCK_S * 1000,
+      easing: this.easing(),
+      iterations: Infinity,
+    })
+    this.running = true
+    this.sync()
   }
 
   reveal(animate?: number | boolean) {
@@ -147,51 +202,23 @@ export class SpoilerPainter {
     this.hidden = false
     const duration = this.parseFade(animate)
     this.setFade(duration)
-    this.setTstop(this.t)
-    if (duration <= 0) this.stopAnimation()
-  }
-
-  private frame = (now: DOMHighResTimeStamp) => {
-    if (this.destroyed) return
-    const shouldStop = this.tstop !== null && this.t > this.tstop + this.fadeS
-
-    if (this.maxFPS > 0 && !shouldStop) {
-      this.raf = requestAnimationFrame(this.frame)
-    }
-
-    const dt = now - this.t0
-    if (dt > 0 && dt < 1000 / this.maxFPS) return
-
-    this.setT(this.t + dt / 1000)
-    this.t0 = now
-  }
-
-  private startAnimation() {
-    this.t0 = performance.now()
-    this.frame(this.t0)
-  }
-
-  private stopAnimation() {
-    if (this.raf !== null) {
-      cancelAnimationFrame(this.raf)
-      this.raf = null
+    this.setTstop(this.time())
+    clearTimeout(this.settle)
+    const stop = () => {
+      this.settle = undefined
+      this.running = false
+      this.sync()
     }
+    if (duration <= 0) stop()
+    else this.settle = setTimeout(stop, duration * 1000 + 1000 / this.maxFPS)
   }
 
   destroy() {
     this.destroyed = true
-    this.stopAnimation()
+    this.stopClock()
+    viewport?.unobserve(this.el)
+    painters.delete(this.el)
     this.el.style.removeProperty('background')
-    for (const prop of [
-      '--hn-nz-t',
-      '--hn-nz-stop',
-      '--hn-nz-fade',
-      '--hn-nz-gap',
-      '--hn-nz-words',
-      '--hn-nz-density',
-      '--hn-nz-accent',
-    ]) {
-      this.el.style.removeProperty(prop)
-    }
+    for (const prop of SPOILER_WORKLET_INPUTS) this.el.style.removeProperty(prop)
   }
 }

package/dist/shared/behavior/spoiler/worklet.ts

@@ -11,10 +11,6 @@ const workletMain = () => {
         0x7fffffff
 
   const pol2vec = (l: number, a = 0) => [l * M.cos(a), l * M.sin(a)] as const
-  const vecmag = ([x, y]: readonly number[]) => M.sqrt(x! * x! + y! * y!)
-  const vecnorm = ([x, y]: readonly number[], l = vecmag([x!, y!])) =>
-    l === 0 ? ([0, 0] as const) : ([x! / l, y! / l] as const)
-
   const trapezoidalWave = (l: number, a: number, b: number) => {
     const s = M.max(a, l - b)
     return (t: number) => {
@@ -144,20 +140,21 @@ const workletMain = () => {
 
       ctx.clearRect(0, 0, size.width, size.height)
 
+      const l = parseInt(accent[2] ?? '0')
+      const ldir = l > 50 ? -1 : 1
+      const hue = `hsl(${accent[0]} ${accent[1]} `
+
       for (let i = 0; i < world.n; ++i) {
         const x0 = hgap + wordDist(rand())
         const y0 = rand(vgap, height - vgap)
         const v0mag = rand(vmin, vmax)
         const size0 = rand(1, 1 + sizedev)
 
-        const l = parseInt(accent[2] ?? '0')
-        const ldir = l > 50 ? -1 : 1
         const lightness = M.floor(clamp(0, l + ldir * rand(0, 30), 100))
 
         const v0 = pol2vec(v0mag, rand(0, M.PI * 2))
         const vx0 = v0[0]
         const vy0 = v0[1]
-        vecnorm(v0)
 
         const shape = rand() > 0.5 ? 'square' : 'circle'
         const lifetime = rand(0.3, 1.5)
@@ -175,12 +172,13 @@ const workletMain = () => {
         const y = y0 + vy0 * t
 
         const fade = animateFadeInOut(world, i, fadeDuration)
-        const alpha = fade * (1 - t / lifetime)
+        const alpha = M.round(fade * (1 - t / lifetime) * 100)
         const psize = fade * (size0 * visibilityFn(t))
+        if (alpha <= 0 || psize <= 0) continue
 
+        ctx.fillStyle = `${hue}${lightness}% / ${alpha}%)`
         for (const [wx, wy] of cycleBounds([x, y], [width, height], psize / 2)) {
           ctx.beginPath()
-          ctx.fillStyle = `hsl(${accent[0]} ${accent[1]} ${lightness}% / ${M.round(alpha * 100)}%)`
           if (shape === 'square') {
             ctx.rect(wx!, wy!, psize, psize)
           } else {

package/dist/shared/lib/css-time.ts

@@ -0,0 +1,6 @@
+export function cssTimeToMs(value: string) {
+  const text = value.trim().toLowerCase()
+  const amount = Number.parseFloat(text)
+  if (!Number.isFinite(amount) || amount < 0) return 0
+  return text.endsWith('s') && !text.endsWith('ms') ? amount * 1000 : amount
+}

package/dist/shared/lib/line-clamp.ts

@@ -5,18 +5,17 @@ export function lineClampCount(lines: number | undefined) {
   return Math.max(1, Math.floor(lines))
 }
 
-function measureHeights(content: HTMLElement) {
-  content.setAttribute('data-measuring', '')
-  const collapsed = content.clientHeight
-  const full = content.scrollHeight
+function measure(content: HTMLElement, layout: 'clamped' | 'full') {
+  content.setAttribute('data-measuring', layout)
+  const size = { height: content.clientHeight, overflow: content.scrollHeight }
   content.removeAttribute('data-measuring')
-  return { collapsed, full }
+  return size
 }
 
 export function measureLineClamp(content: HTMLElement) {
   if (content.hasAttribute('data-animating')) return null
-  const { collapsed, full } = measureHeights(content)
-  return full - collapsed > 1
+  const { height, overflow } = measure(content, 'clamped')
+  return overflow - height > 1
 }
 
 function toMs(value: string) {
@@ -33,7 +32,8 @@ export function animateLineClamp(content: HTMLElement, expanded: boolean, done:
   const fade = running ? getComputedStyle(content).getPropertyValue(FADE) : ''
 
   content.style.transition = 'none'
-  const { collapsed, full } = measureHeights(content)
+  const collapsed = measure(content, 'clamped').height
+  const full = measure(content, 'full').height
   const from = current ?? (expanded ? collapsed : full)
   const to = expanded ? full : collapsed
   content.toggleAttribute('data-expanded', !expanded)