@quicktvui/web-renderer 1.0.0

package/src/components/QtText.js

@@ -0,0 +1,679 @@
+// QtText component that supports the 'text' property
+import { QtBaseComponent } from './QtBaseComponent'
+
+window.__HIPPY_COMPONENT_REGISTRY__ = window.__HIPPY_COMPONENT_REGISTRY__ || new Map()
+
+export class QtText extends QtBaseComponent {
+  constructor(context, id, pId) {
+    super(context, id, pId)
+    this.tagName = 'Text'
+    this.dom = document.createElement('span')
+    this._textValue = ''
+    this._gravity = null
+
+    // Create inner span for text content (needed for flexbox alignment)
+    this._innerSpan = document.createElement('span')
+    this._innerSpan.className = 'qt-text-inner'
+    // Inherit text-related styles from parent
+    this._innerSpan.style.cssText = `
+      font-size: inherit;
+      line-height: inherit;
+      letter-spacing: inherit;
+      color: inherit;
+    `
+    this.dom.appendChild(this._innerSpan)
+
+    window.__HIPPY_COMPONENT_REGISTRY__.set(this.dom, this)
+
+    // Default to white text for TV interfaces
+    this.dom.style.color = 'black'
+
+    this._autoWidthObserver = null
+    this._autoWidthSyncRaf = 0
+    this._autoWidthRetryCount = 0
+  }
+
+  defaultStyle() {
+    return {
+      boxSizing: 'border-box',
+      zIndex: 0,
+      display: 'inline-block',
+      color: 'black', // Default gray text for TV
+    }
+  }
+
+  // Override updateProperty to handle TV focus attributes and text-specific properties
+  updateProperty(key, value) {
+    // Handle autoWidth property - auto size width to content
+    if (key === 'autoWidth' || key === 'auto_width') {
+      this.setAutoWidth(value)
+      return
+    }
+
+    // Handle autoHeight property - auto size height to content
+    if (key === 'autoHeight' || key === 'auto_height') {
+      this.setAutoHeight(value)
+      return
+    }
+
+    // Handle fontSize property
+    if (key === 'fontSize') {
+      this.setTextSize(value)
+      return
+    }
+
+    // Handle textSize property (alias for fontSize)
+    if (key === 'textSize' || key === 'textsize') {
+      this.setTextSize(value)
+      return
+    }
+
+    // Handle flexStyle property
+    if (key === 'flexStyle' || key === 'flexstyle') {
+      if (typeof value === 'object' && value !== null) {
+        this._applyFlexStyle(value)
+      } else if (typeof value === 'string' && value.startsWith('${')) {
+        this.dom.setAttribute(key, value)
+      }
+      return
+    }
+
+    // Handle ellipsizeMode property
+    // 0: START, 1: MIDDLE, 2: END, 3: MARQUEE
+    if (key === 'ellipsizeMode') {
+      this.setEllipsizeMode(value)
+      return
+    }
+
+    // Handle lines property (max number of lines)
+    if (key === 'lines') {
+      this.setLines(value)
+      return
+    }
+
+    // Handle gravity property for text alignment
+    if (key === 'gravity') {
+      this.setGravity(value)
+      return
+    }
+
+    // Handle textAlignVertical property
+    if (key === 'textAlignVertical' || key === 'text-align-vertical') {
+      this.setTextAlignVertical(value)
+      return
+    }
+
+    // Handle duplicateParentState and focus style attributes
+    const tvFocusAttrs = ['duplicateParentState', 'focusable', 'showOnState']
+
+    const focusStyleAttrs = [
+      'focusColor',
+      'focusBackgroundColor',
+      'focusTextColor',
+      'focusBorderColor',
+      'focusBorderWidth',
+      'focusBorderRadius',
+      'focusOpacity',
+      'focusScale',
+    ]
+
+    // Also handle kebab-case versions
+    const kebabFocusStyleAttrs = [
+      'focus-color',
+      'focus-background-color',
+      'focus-text-color',
+      'focus-border-color',
+      'focus-border-width',
+      'focus-border-radius',
+      'focus-opacity',
+      'focus-scale',
+    ]
+
+    if (tvFocusAttrs.includes(key)) {
+      if (value !== null && value !== undefined) {
+        // Special handling for showOnState: convert array to JSON string
+        if (key === 'showOnState' && Array.isArray(value)) {
+          console.log('[QtText] Setting showOnState (array):', value, '->', JSON.stringify(value))
+          this.dom.setAttribute(key, JSON.stringify(value))
+        } else {
+          console.log('[QtText] Setting attribute:', key, '=', value)
+          this.dom.setAttribute(key, String(value))
+        }
+      } else {
+        this.dom.removeAttribute(key)
+      }
+      return
+    }
+
+    if (focusStyleAttrs.includes(key)) {
+      if (value !== null && value !== undefined) {
+        const dataKey = 'data-' + key.replace(/([A-Z])/g, '-$1').toLowerCase()
+        this.dom.setAttribute(dataKey, String(value))
+      } else {
+        const dataKey = 'data-' + key.replace(/([A-Z])/g, '-$1').toLowerCase()
+        this.dom.removeAttribute(dataKey)
+      }
+      return
+    }
+
+    if (kebabFocusStyleAttrs.includes(key)) {
+      if (value !== null && value !== undefined) {
+        this.dom.setAttribute('data-' + key, String(value))
+      } else {
+        this.dom.removeAttribute('data-' + key)
+      }
+      return
+    }
+
+    if (typeof value === 'string' && value.startsWith('${')) {
+      this.dom.setAttribute(key, value)
+    }
+
+    // For other properties, use parent class handling
+    super.updateProperty(key, value)
+  }
+
+  // Implement 'text' setter to handle text content
+  set text(value) {
+    this._textValue = value
+    this._updateTextNode(value)
+  }
+
+  get text() {
+    return this._textValue
+  }
+
+  // Update the text node in DOM
+  _updateTextNode(value) {
+    console.log('[QtText] _updateTextNode:', value)
+    if (this._innerSpan) {
+      this._innerSpan.textContent = value || ''
+    }
+    // 文本变化后同步宽度
+    if (this._autoWidth) {
+      this._scheduleAutoWidthSync(true)
+    }
+  }
+
+  // Methods called by Native.callUIFunction(viewRef, 'setText', [text])
+  setText(text) {
+    this.text = text
+  }
+
+  // Set auto width - width adapts to content
+  setAutoWidth(value) {
+    // 空字符串 '' 也视为 true（HTML 属性不带值时为 ''）
+    this._autoWidth = value === '' || !!value
+    if (this._autoWidth) {
+      this._ensureAutoWidthObserver()
+      this.dom.setAttribute('autowidth', '')
+      this.dom.style.width = 'auto'
+      this.dom.style.minWidth = '0'
+      this.dom.style.display = 'inline-block'
+      if (this._innerSpan) {
+        this._innerSpan.style.whiteSpace = 'nowrap'
+      }
+      // 延迟计算并同步宽度
+      this._scheduleAutoWidthSync(true)
+    } else {
+      this._teardownAutoWidthObserver()
+      this.dom.removeAttribute('autowidth')
+      if (this._autoWidthSyncRaf) {
+        cancelAnimationFrame(this._autoWidthSyncRaf)
+        this._autoWidthSyncRaf = 0
+      }
+      this.dom.style.width = ''
+      this.dom.style.display = ''
+    }
+  }
+
+  _ensureAutoWidthObserver() {
+    if (!this._innerSpan) return
+    if (this._autoWidthObserver) return
+
+    this._autoWidthObserver = new MutationObserver(() => {
+      if (this._autoWidth) this._scheduleAutoWidthSync(true)
+    })
+    this._autoWidthObserver.observe(this._innerSpan, {
+      characterData: true,
+      childList: true,
+      subtree: true,
+    })
+  }
+
+  _teardownAutoWidthObserver() {
+    if (!this._autoWidthObserver) return
+    this._autoWidthObserver.disconnect()
+    this._autoWidthObserver = null
+  }
+
+  _scheduleAutoWidthSync(resetRetry = false) {
+    if (!this._autoWidth) return
+    if (resetRetry) this._autoWidthRetryCount = 0
+    if (this._autoWidthSyncRaf) cancelAnimationFrame(this._autoWidthSyncRaf)
+    this._autoWidthSyncRaf = requestAnimationFrame(() => {
+      this._autoWidthSyncRaf = 0
+      this._syncWidthToParent()
+    })
+  }
+
+  // 同步宽度到父容器（解决绝对定位元素无法撑开父容器的问题）
+  _syncWidthToParent() {
+    if (!this._autoWidth) return
+
+    const inner = this._innerSpan
+    if (!inner) return
+
+    const textWidth = inner.scrollWidth || inner.offsetWidth
+    if (textWidth <= 0) {
+      if (this.dom && this.dom.isConnected && this._autoWidthRetryCount < 5) {
+        this._autoWidthRetryCount++
+        this._scheduleAutoWidthSync(false)
+      }
+      return
+    }
+    this._autoWidthRetryCount = 0
+
+    // 设置文字元素的实际宽度
+    this.dom.style.width = textWidth + 'px'
+    this.dom.style.minWidth = textWidth + 'px'
+
+    // 查找有 autoWidth 属性的父容器并同步宽度
+    let parent = this.dom.parentElement
+    while (parent) {
+      if (
+        parent.hasAttribute &&
+        (parent.hasAttribute('autoWidth') || parent.hasAttribute('autowidth'))
+      ) {
+        const style = window.getComputedStyle(parent)
+        const paddingLeft = parseInt(style.paddingLeft) || 0
+        const paddingRight = parseInt(style.paddingRight) || 0
+        const parentWidth = textWidth + paddingLeft + paddingRight
+
+        parent.style.width = parentWidth + 'px'
+        parent.style.minWidth = parentWidth + 'px'
+
+        // 更新父容器内其他绝对定位且有 autoWidth 的元素（如背景）
+        parent.querySelectorAll('[autoWidth], [autowidth]').forEach((el) => {
+          if (el === this.dom) return
+          if (el.tagName && el.tagName.toLowerCase() === 'qt-text') return
+
+          const elStyle = window.getComputedStyle(el)
+          if (elStyle.position === 'absolute') {
+            el.style.left = '0'
+            el.style.right = '0'
+            el.style.width = 'auto'
+          }
+        })
+        break
+      }
+      parent = parent.parentElement
+    }
+  }
+
+  // Set auto height - height adapts to content
+  setAutoHeight(value) {
+    // 空字符串 '' 也视为 true（HTML 属性不带值时为 ''）
+    this._autoHeight = value === '' || !!value
+    if (this._autoHeight) {
+      this.dom.style.height = 'auto'
+      this.dom.style.minHeight = '0'
+    } else {
+      this.dom.style.height = ''
+    }
+  }
+
+  setTextSize(size) {
+    const target = this._innerSpan || this.dom
+    if (target && size) {
+      // Check if size is a template placeholder like ${titleSize}
+      if (typeof size === 'string' && size.startsWith('${') && size.endsWith('}')) {
+        // Store as data attribute for template processing
+        this.dom.setAttribute('fontSize', size)
+        return
+      }
+      target.style.fontSize = typeof size === 'number' ? size + 'px' : size
+      // 字体变化后同步宽度
+      if (this._autoWidth) {
+        this._scheduleAutoWidthSync(true)
+      }
+    }
+  }
+  setFontSize(size) {
+    const target = this._innerSpan || this.dom
+    if (target && size) {
+      // Check if size is a template placeholder like ${titleSize}
+      if (typeof size === 'string' && size.startsWith('${') && size.endsWith('}')) {
+        // Store as data attribute for template processing
+        this.dom.setAttribute('fontSize', size)
+        return
+      }
+      target.style.fontSize = typeof size === 'number' ? size + 'px' : size
+      // 字体变化后同步宽度
+      if (this._autoWidth) {
+        this._scheduleAutoWidthSync(true)
+      }
+    }
+  }
+  setTextColor(color) {
+    const target = this._innerSpan || this.dom
+    if (target && color) {
+      // Handle number color (like 0xFFFFFFFF)
+      if (typeof color === 'number') {
+        const a = (color >> 24) & 0xff
+        const r = (color >> 16) & 0xff
+        const g = (color >> 8) & 0xff
+        const b = color & 0xff
+        target.style.color = `rgba(${r}, ${g}, ${b}, ${a / 255})`
+      } else {
+        target.style.color = color
+      }
+    }
+  }
+
+  // Set gravity for text alignment
+  // Supports: centerVertical, centerHorizontal, center, left, right, top, bottom
+  // Can be combined with | like "centerVertical|left"
+  setGravity(gravity) {
+    if (!this.dom || !gravity) return
+
+    // Store gravity for later use
+    this._gravity = gravity
+
+    // Parse gravity value (can be string like "centerVertical" or "centerVertical|left")
+    const gravityStr = String(gravity)
+    const gravities = gravityStr.split('|').map((g) => g.trim())
+
+    // Use flexbox for alignment - the inner span is the flex item
+    this.dom.style.display = 'flex'
+    this.dom.style.alignItems = 'stretch'
+    this.dom.style.justifyContent = 'flex-start'
+
+    // Ensure inner span can expand
+    if (this._innerSpan) {
+      this._innerSpan.style.display = 'inline'
+      this._innerSpan.style.whiteSpace = ''
+    }
+
+    // Vertical alignment (cross-axis)
+    if (gravities.includes('centerVertical') || gravities.includes('center')) {
+      this.dom.style.alignItems = 'center'
+    } else if (gravities.includes('top')) {
+      this.dom.style.alignItems = 'flex-start'
+    } else if (gravities.includes('bottom')) {
+      this.dom.style.alignItems = 'flex-end'
+    }
+
+    // Horizontal alignment (main-axis)
+    if (gravities.includes('centerHorizontal') || gravities.includes('center')) {
+      this.dom.style.justifyContent = 'center'
+    } else if (gravities.includes('left')) {
+      this.dom.style.justifyContent = 'flex-start'
+    } else if (gravities.includes('right')) {
+      this.dom.style.justifyContent = 'flex-end'
+    }
+  }
+
+  // Set text align vertical for CSS text-align-vertical style
+  // Supports: center, top, bottom
+  setTextAlignVertical(value) {
+    if (!this.dom || !value) return
+
+    // Use flexbox for vertical alignment
+    this.dom.style.display = 'flex'
+    this._textAlignVertical = value
+
+    switch (String(value).toLowerCase()) {
+      case 'center':
+        this.dom.style.alignItems = 'center'
+        break
+      case 'top':
+        this.dom.style.alignItems = 'flex-start'
+        break
+      case 'bottom':
+        this.dom.style.alignItems = 'flex-end'
+        break
+      default:
+        this.dom.style.alignItems = 'center'
+        break
+    }
+  }
+
+  // Set text ellipsis mode
+  // 0: START - ellipsis at the beginning
+  // 1: MIDDLE - ellipsis in the middle
+  // 2: END - ellipsis at the end (default)
+  // 3: MARQUEE - scrolling text
+  setEllipsizeMode(mode) {
+    if (!this.dom) return
+    this._ellipsizeMode = mode
+
+    // Don't apply single-line ellipsis if lines > 1 is set
+    if (this._lines && this._lines > 1) {
+      return
+    }
+
+    const target = this._innerSpan || this.dom
+
+    // Reset text styles on inner span
+    target.style.overflow = 'hidden'
+    target.style.whiteSpace = 'nowrap'
+    target.style.webkitLineClamp = ''
+    target.style.display = 'inline-block'
+    target.style.maxWidth = '100%'
+
+    // Keep flex display if gravity or textAlignVertical is set
+    if (this._gravity || this._textAlignVertical) {
+      this.dom.style.display = 'flex'
+      this.dom.style.overflow = 'hidden'
+      // Re-apply textAlignVertical if set
+      if (this._textAlignVertical) {
+        this.setTextAlignVertical(this._textAlignVertical)
+      }
+    } else {
+      this.dom.style.display = 'inline-block'
+      this.dom.style.overflow = 'hidden'
+    }
+
+    switch (mode) {
+      case 0: // START
+        target.style.textOverflow = 'ellipsis'
+        target.style.direction = 'rtl'
+        target.style.textAlign = 'left'
+        break
+      case 1: // MIDDLE
+        target.style.textOverflow = 'ellipsis'
+        target.style.direction = 'ltr'
+        break
+      case 2: // END
+        target.style.textOverflow = 'ellipsis'
+        target.style.direction = 'ltr'
+        break
+      case 3: // MARQUEE
+        this._enableMarquee()
+        break
+      default:
+        target.style.textOverflow = 'ellipsis'
+        target.style.direction = 'ltr'
+        break
+    }
+  }
+
+  // Enable marquee scrolling effect
+  _enableMarquee() {
+    if (!this.dom) return
+
+    const target = this._innerSpan || this.dom
+    target.style.textOverflow = 'clip'
+    target.style.whiteSpace = 'nowrap'
+    target.style.direction = 'ltr'
+    target.style.overflow = 'visible'
+
+    // Make sure container uses flex display and keep vertical alignment
+    this.dom.style.display = 'flex'
+    this.dom.style.overflow = 'hidden'
+    this.dom.style.justifyContent = 'flex-start'
+
+    // Keep textAlignVertical if set
+    if (this._textAlignVertical) {
+      this.setTextAlignVertical(this._textAlignVertical)
+    }
+
+    // Add marquee animation via CSS
+    const keyframes = `
+      @keyframes qttext-marquee {
+        0% { transform: translateX(0); }
+        100% { transform: translateX(-100%); }
+      }
+    `
+
+    // Add keyframes if not exists
+    if (!document.querySelector('#qttext-marquee-style')) {
+      const style = document.createElement('style')
+      style.id = 'qttext-marquee-style'
+      style.textContent = keyframes
+      document.head.appendChild(style)
+    }
+
+    // Apply marquee animation to inner span
+    // Use width: max-content so text is not truncated
+    target.style.display = 'inline-block'
+    target.style.whiteSpace = 'nowrap'
+    target.style.width = 'max-content'
+
+    // Calculate animation duration based on text width for consistent speed
+    // Speed: ~50px per second
+    requestAnimationFrame(() => {
+      const textWidth = target.scrollWidth
+      const containerWidth = this.dom.offsetWidth
+      const scrollDistance = textWidth - containerWidth
+
+      if (scrollDistance > 0) {
+        // 50 pixels per second = 20ms per pixel
+        const duration = Math.max(scrollDistance / 50, 3)
+        target.style.animation = `qttext-marquee ${duration}s linear infinite`
+      } else {
+        target.style.animation = ''
+      }
+    })
+  }
+
+  // Wrap text content in a span for marquee animation (deprecated - now uses _innerSpan)
+  _wrapTextForMarquee() {
+    // No longer needed - text is already in _innerSpan
+  }
+
+  // Set maximum number of lines
+  setLines(lines) {
+    if (!this.dom) return
+    this._lines = lines
+
+    const target = this._innerSpan || this.dom
+
+    if (lines && lines > 1) {
+      // Multi-line mode with line clamping
+      target.style.display = '-webkit-box'
+      target.style.webkitLineClamp = String(lines)
+      target.style.webkitBoxOrient = 'vertical'
+      target.style.overflow = 'hidden'
+      target.style.whiteSpace = 'normal'
+      target.style.textOverflow = 'ellipsis'
+      target.style.maxWidth = '100%'
+
+      // Keep flex container if gravity or textAlignVertical is set
+      if (this._gravity || this._textAlignVertical) {
+        this.dom.style.display = 'flex'
+        if (this._textAlignVertical) {
+          this.setTextAlignVertical(this._textAlignVertical)
+        }
+      }
+    } else if (lines === 1) {
+      // Single line mode - use ellipsizeMode if set
+      target.style.display = 'inline-block'
+      target.style.whiteSpace = 'nowrap'
+      target.style.overflow = 'hidden'
+      target.style.webkitLineClamp = ''
+
+      // Keep flex display if gravity or textAlignVertical is set
+      if (this._gravity || this._textAlignVertical) {
+        this.dom.style.display = 'flex'
+        this.dom.style.overflow = 'hidden'
+        if (this._textAlignVertical) {
+          this.setTextAlignVertical(this._textAlignVertical)
+        }
+      }
+
+      // Re-apply ellipsizeMode if it was set
+      if (this._ellipsizeMode !== undefined) {
+        this.setEllipsizeMode(this._ellipsizeMode)
+      }
+    }
+  }
+
+  // Apply flexStyle object to the component
+  _applyFlexStyle(styleObj) {
+    if (!styleObj || typeof styleObj !== 'object') return
+
+    const target = this._innerSpan || this.dom
+
+    Object.keys(styleObj).forEach((key) => {
+      let value = styleObj[key]
+
+      // Convert numeric values to pixels for appropriate properties
+      if (typeof value === 'number') {
+        const needsPx = [
+          'width',
+          'height',
+          'minWidth',
+          'minHeight',
+          'maxWidth',
+          'maxHeight',
+          'padding',
+          'paddingTop',
+          'paddingRight',
+          'paddingBottom',
+          'paddingLeft',
+          'margin',
+          'marginTop',
+          'marginRight',
+          'marginBottom',
+          'marginLeft',
+          'top',
+          'left',
+          'right',
+          'bottom',
+          'borderRadius',
+          'borderWidth',
+          'fontSize',
+          'lineHeight',
+          'letterSpacing',
+        ].includes(key)
+
+        if (needsPx) {
+          value = value + 'px'
+        }
+      }
+
+      // Handle fontSize specially - apply to inner span
+      if (key === 'fontSize') {
+        target.style.fontSize = value
+        return
+      }
+
+      // Handle textColor specially
+      if (key === 'textColor' || key === 'color') {
+        this.setTextColor(value)
+        return
+      }
+
+      try {
+        this.dom.style[key] = value
+      } catch (e) {
+        try {
+          const cssKey = key.replace(/([A-Z])/g, '-$1').toLowerCase()
+          this.dom.style.setProperty(cssKey, value)
+        } catch (err) {}
+      }
+    })
+  }
+}