@quicktvui/web-renderer 1.0.0

package/src/components/QtAnimationView.js

@@ -0,0 +1,678 @@
+// QtAnimationView component for web platform
+// Implements animation using Web Animations API
+import { QtBaseComponent } from './QtBaseComponent'
+
+// Animation property name mappings
+const PropertyNameMap = {
+  alpha: 'opacity',
+  rotation: 'rotate',
+  rotationX: 'rotateX',
+  rotationY: 'rotateY',
+  rotationZ: 'rotateZ',
+  scaleX: 'scaleX',
+  scaleY: 'scaleY',
+  scaleZ: 'scaleZ',
+  translationX: 'translateX',
+  translationY: 'translateY',
+  translationZ: 'translateZ',
+}
+
+// Easing function mappings for Web Animations API
+const EasingMap = {
+  1: 'ease', // QT_ACCELERATE_DECELERATE_INTERPOLATOR
+  2: 'ease-in', // QT_ACCELERATE_INTERPOLATOR
+  3: 'cubic-bezier(0.36, 0, 0.66, -0.56)', // QT_ANTICIPATE_INTERPOLATOR
+  4: 'cubic-bezier(0.68, -0.6, 0.32, 1.6)', // QT_ANTICIPATE_OVERSHOOT_INTERPOLATOR
+  5: 'cubic-bezier(0.68, -0.55, 0.27, 1.55)', // QT_BOUNCE_INTERPOLATOR (approximation)
+  6: 'ease-in-out', // QT_CYCLE_INTERPOLATOR (simplified)
+  7: 'ease-out', // QT_DECELERATE_INTERPOLATOR
+  8: 'linear', // QT_LINEAR_INTERPOLATOR
+  9: 'cubic-bezier(0.34, 1.56, 0.64, 1)', // QT_OVERSHOOT_INTERPOLATOR
+  10: 'cubic-bezier(0.4, 0, 1, 1)', // QT_FAST_OUT_LINEAR_IN_INTERPOLATOR
+  11: 'cubic-bezier(0.4, 0, 0.2, 1)', // QT_FAST_OUT_SLOW_IN_INTERPOLATOR
+  12: 'linear', // QT_PATH_INTERPOLATOR
+}
+
+export class QtAnimationView extends QtBaseComponent {
+  constructor(context, id, pId) {
+    super(context, id, pId)
+    this.tagName = 'AnimationViewComponent'
+    this.dom = document.createElement('div')
+    this._animators = new Map() // Store animator configs by id
+    this._animatorSets = new Map() // Store animator set configs
+    this._runningAnimations = new Map() // Store running Web Animation instances
+    this._pivotX = null
+    this._pivotY = null
+  }
+
+  defaultStyle() {
+    return {
+      boxSizing: 'border-box',
+      zIndex: 0,
+      display: 'block',
+      position: 'relative',
+    }
+  }
+
+  // Get the target element for animation (first child or self)
+  _getAnimationTarget() {
+    if (this.dom && this.dom.children.length > 0) {
+      return this.dom.children[0]
+    }
+    return this.dom
+  }
+
+  // Set pivot point for rotation/scale
+  setPivotX(params) {
+    const x = params[0]
+    this._pivotX = x
+    this._updateTransformOrigin()
+  }
+
+  setPivotY(params) {
+    const y = params[0]
+    this._pivotY = y
+    this._updateTransformOrigin()
+  }
+
+  resetPivot(params) {
+    this._pivotX = null
+    this._pivotY = null
+    this._updateTransformOrigin()
+  }
+
+  _updateTransformOrigin() {
+    const target = this._getAnimationTarget()
+    if (this._pivotX !== null && this._pivotY !== null) {
+      target.style.transformOrigin = `${this._pivotX}px ${this._pivotY}px`
+    } else {
+      target.style.transformOrigin = ''
+    }
+  }
+
+  // Reset all animators
+  resetAnimators(params) {
+    this._animators.clear()
+    this._animatorSets.clear()
+    this.cancelAllAnimations()
+  }
+
+  reset(params) {
+    this.resetAnimators(params)
+  }
+
+  // Cancel all running animations
+  cancelAllAnimations() {
+    this._runningAnimations.forEach((animation) => {
+      try {
+        animation.cancel()
+      } catch (e) {
+        // Ignore errors
+      }
+    })
+    this._runningAnimations.clear()
+
+    // Reset transform and opacity
+    const target = this._getAnimationTarget()
+    target.style.transform = ''
+    target.style.opacity = ''
+  }
+
+  // Create an animator
+  // Note: callUIFunction passes params as an array
+  animator(params) {
+    const [id, valueType, propertyName, ...valuesAndRest] = params
+
+    // Find where values end and other params start
+    // values are followed by: duration, repeatMode, repeatCount, listenAnimator, listenAnimatorValue, interpolator
+    // The number of values depends on the method called (objectAnimator1, objectAnimator2, etc.)
+    // For now, assume the last 6 params are: duration, repeatMode, repeatCount, listenAnimator, listenAnimatorValue, interpolator
+    const values = valuesAndRest.slice(0, -6)
+    const [duration, repeatMode, repeatCount, listenAnimator, listenAnimatorValue, interpolator] =
+      valuesAndRest.slice(-6)
+
+    console.log('[QtAnimationView] animator called:', {
+      id,
+      valueType,
+      propertyName,
+      values,
+      duration,
+      repeatMode,
+      repeatCount,
+      interpolator,
+    })
+    const config = {
+      id,
+      propertyName,
+      values,
+      duration,
+      repeatMode,
+      repeatCount,
+      interpolator,
+    }
+    this._animators.set(id, config)
+  }
+
+  // Create an animator set
+  animatorSet(params) {
+    const [id, duration, listenAnimator] = params
+    this._animatorSets.set(id, {
+      id,
+      duration,
+      listenAnimator,
+      animators: [],
+      relationType: 'together',
+    })
+  }
+
+  // Play an animator
+  play(params) {
+    const [animatorSetId, animatorId] = params
+    const animatorSet = this._animatorSets.get(animatorSetId)
+    if (animatorSet) {
+      animatorSet.animators = [{ id: animatorId, type: 'play' }]
+    }
+  }
+
+  // Play with another animator
+  playWith(params) {
+    const [animatorSetId, animatorId] = params
+    const animatorSet = this._animatorSets.get(animatorSetId)
+    if (animatorSet && animatorSet.animators.length > 0) {
+      animatorSet.animators.push({ id: animatorId, type: 'with' })
+    }
+  }
+
+  // Play before another animator
+  playBefore(params) {
+    const [animatorSetId, animatorId] = params
+    const animatorSet = this._animatorSets.get(animatorSetId)
+    if (animatorSet && animatorSet.animators.length > 0) {
+      animatorSet.animators.push({ id: animatorId, type: 'before' })
+    }
+  }
+
+  // Play after another animator
+  playAfter(params) {
+    const [animatorSetId, animatorId] = params
+    const animatorSet = this._animatorSets.get(animatorSetId)
+    if (animatorSet && animatorSet.animators.length > 0) {
+      animatorSet.animators.push({ id: animatorId, type: 'after' })
+    }
+  }
+
+  // Play animators sequentially
+  playSequentially(params) {
+    const animatorSetId = params[0]
+    const animatorIds = params.slice(1)
+    const animatorSet = this._animatorSets.get(animatorSetId)
+    if (animatorSet) {
+      animatorSet.animators = animatorIds.map((id) => ({ id, type: 'sequence' }))
+      animatorSet.relationType = 'sequence'
+    }
+  }
+
+  playSequentially1(params) {
+    this.playSequentially([params[0], params[1]])
+  }
+
+  playSequentially2(params) {
+    this.playSequentially([params[0], params[1], params[2]])
+  }
+
+  playSequentially3(params) {
+    this.playSequentially([params[0], params[1], params[2], params[3]])
+  }
+
+  playSequentially4(params) {
+    this.playSequentially([params[0], params[1], params[2], params[3], params[4]])
+  }
+
+  playSequentially5(params) {
+    this.playSequentially([params[0], params[1], params[2], params[3], params[4], params[5]])
+  }
+
+  // Play animators together
+  playTogether(params) {
+    const animatorSetId = params[0]
+    const animatorIds = params.slice(1)
+    const animatorSet = this._animatorSets.get(animatorSetId)
+    if (animatorSet) {
+      animatorSet.animators = animatorIds.map((id) => ({ id, type: 'together' }))
+      animatorSet.relationType = 'together'
+    }
+  }
+
+  playTogether1(params) {
+    this.playTogether([params[0], params[1]])
+  }
+
+  playTogether2(params) {
+    this.playTogether([params[0], params[1], params[2]])
+  }
+
+  playTogether3(params) {
+    this.playTogether([params[0], params[1], params[2], params[3]])
+  }
+
+  playTogether4(params) {
+    this.playTogether([params[0], params[1], params[2], params[3], params[4]])
+  }
+
+  playTogether5(params) {
+    this.playTogether([params[0], params[1], params[2], params[3], params[4], params[5]])
+  }
+
+  // Start an animator or animator set
+  start(params) {
+    const animatorId = Array.isArray(params) ? params[0] : params
+    console.log('[QtAnimationView] start called with animatorId:', animatorId)
+    console.log('[QtAnimationView] available animators:', Array.from(this._animators.keys()))
+    console.log('[QtAnimationView] available animatorSets:', Array.from(this._animatorSets.keys()))
+    this._startAnimation(animatorId)
+  }
+
+  startDelay(params) {
+    const animatorId = params[0]
+    const delay = params[1]
+    setTimeout(() => {
+      this._startAnimation(animatorId)
+    }, delay)
+  }
+
+  // Pause animation
+  pause(params) {
+    const animatorId = params[0]
+    const animation = this._runningAnimations.get(animatorId)
+    if (animation) {
+      animation.pause()
+    }
+  }
+
+  // Resume animation
+  resume(params) {
+    const animatorId = params[0]
+    const animation = this._runningAnimations.get(animatorId)
+    if (animation) {
+      animation.play()
+    }
+  }
+
+  // Cancel animation
+  cancel(params) {
+    const animatorId = params[0]
+    const animation = this._runningAnimations.get(animatorId)
+    if (animation) {
+      animation.cancel()
+      this._runningAnimations.delete(animatorId)
+    }
+  }
+
+  // Reverse animation
+  reverse(params) {
+    const animatorId = params[0]
+    const animation = this._runningAnimations.get(animatorId)
+    if (animation) {
+      animation.reverse()
+    }
+  }
+
+  // Internal method to start animation
+  _startAnimation(animatorId) {
+    // Check if it's an animator set
+    let animatorSet = this._animatorSets.get(animatorId)
+    if (animatorSet) {
+      this._runAnimatorSet(animatorSet)
+      return
+    }
+
+    // Check if it's a single animator
+    let animator = this._animators.get(animatorId)
+    if (animator) {
+      this._runAnimator(animator)
+    }
+  }
+
+  // Run a single animator
+  _runAnimator(config) {
+    console.log('[QtAnimationView] _runAnimator called with config:', config)
+    const target = this._getAnimationTarget()
+    console.log('[QtAnimationView] animation target:', target)
+
+    const { propertyName, values, duration, repeatCount, interpolator } = config
+
+    const easing = EasingMap[interpolator?.type] || 'linear'
+    const iterations = repeatCount === -1 ? Infinity : repeatCount || 1
+    const direction = config.repeatMode === 2 ? 'alternate' : 'normal'
+
+    // Build keyframes
+    const keyframes = this._buildKeyframes(propertyName, values)
+    console.log('[QtAnimationView] keyframes:', keyframes)
+
+    // Create animation
+    const animation = target.animate(keyframes, {
+      duration,
+      easing,
+      iterations,
+      direction,
+      fill: 'forwards',
+    })
+
+    console.log('[QtAnimationView] animation created:', animation)
+
+    this._runningAnimations.set(config.id, animation)
+
+    animation.onfinish = () => {
+      this._runningAnimations.delete(config.id)
+    }
+  }
+
+  // Run an animator set
+  _runAnimatorSet(animatorSet) {
+    const { animators, relationType } = animatorSet
+
+    if (relationType === 'together') {
+      // Run all together
+      animators.forEach((item) => {
+        const config = this._animators.get(item.id)
+        if (config) {
+          this._runAnimator(config)
+        }
+      })
+    } else if (relationType === 'sequence') {
+      // Run sequentially
+      this._runSequentially(animators, 0)
+    }
+  }
+
+  // Run animators sequentially
+  _runSequentially(animators, index) {
+    if (index >= animators.length) return
+
+    const item = animators[index]
+    const config = this._animators.get(item.id)
+    if (!config) {
+      this._runSequentially(animators, index + 1)
+      return
+    }
+
+    const target = this._getAnimationTarget()
+    const { propertyName, values, duration, repeatCount, interpolator } = config
+
+    const easing = EasingMap[interpolator?.type] || 'linear'
+    const iterations = repeatCount === -1 ? Infinity : repeatCount || 1
+    const direction = config.repeatMode === 2 ? 'alternate' : 'normal'
+
+    const keyframes = this._buildKeyframes(propertyName, values)
+
+    const animation = target.animate(keyframes, {
+      duration,
+      easing,
+      iterations,
+      direction,
+      fill: 'forwards',
+    })
+
+    this._runningAnimations.set(config.id, animation)
+
+    animation.onfinish = () => {
+      this._runningAnimations.delete(config.id)
+      this._runSequentially(animators, index + 1)
+    }
+  }
+
+  // Build keyframes for Web Animations API
+  _buildKeyframes(propertyName, values) {
+    const cssProperty = PropertyNameMap[propertyName] || propertyName
+
+    if (values.length === 0) {
+      return []
+    }
+
+    // For transform properties, we need to build transform string
+    const transformProps = [
+      'rotate',
+      'rotateX',
+      'rotateY',
+      'rotateZ',
+      'scaleX',
+      'scaleY',
+      'translateX',
+      'translateY',
+    ]
+
+    if (transformProps.includes(cssProperty)) {
+      return values.map((value, index) => {
+        const progress = values.length === 1 ? 1 : index / (values.length - 1)
+        const frame = {}
+
+        switch (cssProperty) {
+          case 'rotate':
+            frame.transform = `rotate(${value}deg)`
+            break
+          case 'rotateX':
+            frame.transform = `rotateX(${value}deg)`
+            break
+          case 'rotateY':
+            frame.transform = `rotateY(${value}deg)`
+            break
+          case 'rotateZ':
+            frame.transform = `rotateZ(${value}deg)`
+            break
+          case 'scaleX':
+            frame.transform = `scaleX(${value})`
+            break
+          case 'scaleY':
+            frame.transform = `scaleY(${value})`
+            break
+          case 'translateX':
+            frame.transform = `translateX(${value}px)`
+            break
+          case 'translateY':
+            frame.transform = `translateY(${value}px)`
+            break
+        }
+
+        return frame
+      })
+    }
+
+    // For opacity
+    if (cssProperty === 'opacity') {
+      return values.map((value) => ({
+        opacity: value,
+      }))
+    }
+
+    // Default case
+    return values.map((value) => ({
+      [cssProperty]: value,
+    }))
+  }
+
+  // Legacy method names for compatibility
+  startAnimator(params) {
+    const animatorId = Array.isArray(params) ? params[0] : params
+    this._startAnimation(animatorId)
+  }
+
+  startAnimatorDelay(params) {
+    const animatorId = Array.isArray(params) ? params[0] : params
+    const delay = Array.isArray(params) ? params[1] : 0
+    setTimeout(() => {
+      this._startAnimation(animatorId)
+    }, delay)
+  }
+
+  pauseAnimator(params) {
+    const animatorId = Array.isArray(params) ? params[0] : params
+    const animation = this._runningAnimations.get(animatorId)
+    if (animation) {
+      animation.pause()
+    }
+  }
+
+  resumeAnimator(params) {
+    const animatorId = Array.isArray(params) ? params[0] : params
+    const animation = this._runningAnimations.get(animatorId)
+    if (animation) {
+      animation.play()
+    }
+  }
+
+  cancelAnimator(params) {
+    const animatorId = Array.isArray(params) ? params[0] : params
+    const animation = this._runningAnimations.get(animatorId)
+    if (animation) {
+      animation.cancel()
+      this._runningAnimations.delete(animatorId)
+    }
+  }
+
+  reverseAnimator(params) {
+    const animatorId = Array.isArray(params) ? params[0] : params
+    const animation = this._runningAnimations.get(animatorId)
+    if (animation) {
+      animation.reverse()
+    }
+  }
+
+  // Object animator methods for different value counts
+  // Note: callUIFunction passes params as an array, so we accept an array and extract values
+  objectAnimator1(params) {
+    const [
+      id,
+      valueType,
+      propertyName,
+      value1,
+      duration,
+      repeatMode,
+      repeatCount,
+      listenAnimator,
+      listenAnimatorValue,
+      interpolator,
+    ] = params
+    const config = {
+      id,
+      propertyName,
+      values: [value1],
+      duration,
+      repeatMode,
+      repeatCount,
+      interpolator,
+    }
+    console.log('[QtAnimationView] objectAnimator1:', config)
+    this._animators.set(id, config)
+  }
+
+  objectAnimator2(params) {
+    const [
+      id,
+      valueType,
+      propertyName,
+      value1,
+      value2,
+      duration,
+      repeatMode,
+      repeatCount,
+      listenAnimator,
+      listenAnimatorValue,
+      interpolator,
+    ] = params
+    const config = {
+      id,
+      propertyName,
+      values: [value1, value2],
+      duration,
+      repeatMode,
+      repeatCount,
+      interpolator,
+    }
+    console.log('[QtAnimationView] objectAnimator2:', config)
+    this._animators.set(id, config)
+  }
+
+  objectAnimator3(params) {
+    const [
+      id,
+      valueType,
+      propertyName,
+      value1,
+      value2,
+      value3,
+      duration,
+      repeatMode,
+      repeatCount,
+      listenAnimator,
+      listenAnimatorValue,
+      interpolator,
+    ] = params
+    const config = {
+      id,
+      propertyName,
+      values: [value1, value2, value3],
+      duration,
+      repeatMode,
+      repeatCount,
+      interpolator,
+    }
+    this._animators.set(id, config)
+  }
+
+  objectAnimator4(params) {
+    const [
+      id,
+      valueType,
+      propertyName,
+      value1,
+      value2,
+      value3,
+      value4,
+      duration,
+      repeatMode,
+      repeatCount,
+      listenAnimator,
+      listenAnimatorValue,
+      interpolator,
+    ] = params
+    const config = {
+      id,
+      propertyName,
+      values: [value1, value2, value3, value4],
+      duration,
+      repeatMode,
+      repeatCount,
+      interpolator,
+    }
+    this._animators.set(id, config)
+  }
+
+  objectAnimator5(params) {
+    const [
+      id,
+      valueType,
+      propertyName,
+      value1,
+      value2,
+      value3,
+      value4,
+      value5,
+      duration,
+      repeatMode,
+      repeatCount,
+      listenAnimator,
+      listenAnimatorValue,
+      interpolator,
+    ] = params
+    const config = {
+      id,
+      propertyName,
+      values: [value1, value2, value3, value4, value5],
+      duration,
+      repeatMode,
+      repeatCount,
+      interpolator,
+    }
+    this._animators.set(id, config)
+  }
+}