@quicktvui/web-renderer 1.0.0

package/src/components/QtView.js

@@ -0,0 +1,706 @@
+// Base QtView component that maps to div
+import { QtBaseComponent } from './QtBaseComponent'
+import { registerComponentBySid, unregisterComponentBySid } from '../core/componentRegistry'
+
+// Global registry for DOM-to-Component mapping
+window.__HIPPY_COMPONENT_REGISTRY__ = window.__HIPPY_COMPONENT_REGISTRY__ || new Map()
+
+export class QtView extends QtBaseComponent {
+  constructor(context, id, pId) {
+    super(context, id, pId)
+    this.tagName = 'div'
+    this.dom = document.createElement('div')
+
+    // Store current sid for cleanup
+    this._currentSid = null
+
+    // Store reference from DOM element to component instance
+    // This allows TVFocusManager to dispatch events on the component
+    window.__HIPPY_COMPONENT_REGISTRY__.set(this.dom, this)
+
+    // Bind DOM events to Hippy event system
+    this._bindDOMEvents()
+  }
+
+  _bindDOMEvents() {
+    // Forward DOM click event to Hippy/Vue event system
+    this.dom.addEventListener('click', (e) => {
+      console.log('[QtView] DOM click event, dispatching to Hippy events')
+      if (this.events && this.events.onClick) {
+        this.dispatchEvent('onClick', { nativeEvent: e })
+      }
+    })
+
+    // Forward focus event
+    this.dom.addEventListener('focus', (e) => {
+      if (this.events && this.events.onFocus) {
+        this.dispatchEvent('onFocus', { isFocused: true, nativeEvent: e })
+      }
+    })
+
+    // Forward blur event
+    this.dom.addEventListener('blur', (e) => {
+      if (this.events && this.events.onFocus) {
+        this.dispatchEvent('onFocus', { isFocused: false, nativeEvent: e })
+      }
+    })
+  }
+
+  // Override updateProperty to handle TV focus attributes
+  updateProperty(key, value) {
+    // Handle sid (string id) property - register to sidRegistry
+    if (key === 'sid') {
+      // Unregister previous sid if exists
+      if (this._currentSid) {
+        unregisterComponentBySid(this._currentSid)
+      }
+
+      // Register new sid
+      this._currentSid = value
+      if (value) {
+        registerComponentBySid(value, this)
+        // Also set as DOM attribute for debugging
+        this.dom.setAttribute('sid', String(value))
+      } else {
+        this.dom.removeAttribute('sid')
+      }
+      return
+    }
+
+    if (key === 'autoWidth' || key === 'auto_width') {
+      const enabled = value === '' || !!value
+      if (enabled) {
+        this.dom.setAttribute('autowidth', '')
+      } else {
+        this.dom.removeAttribute('autowidth')
+      }
+      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
+    }
+
+    if (key === 'layout') {
+      if (typeof value === 'string' && value.startsWith('${')) {
+        this.dom.setAttribute(key, value)
+      } else {
+        this._applyLayout(value)
+      }
+      return
+    }
+
+    if (key === 'size') {
+      if (typeof value === 'string' && value.startsWith('${')) {
+        this.dom.setAttribute(key, value)
+      } else {
+        this._applySize(value)
+      }
+      return
+    }
+
+    if (key === 'decoration') {
+      if (typeof value === 'string' && value.startsWith('${')) {
+        this.dom.setAttribute(key, value)
+      } else {
+        this._applyDecoration(value)
+      }
+      return
+    }
+
+    // Handle showIf attribute - store on DOM for templateBinding to process
+    if (key === 'showIf' || key === 'showif') {
+      if (value !== null && value !== undefined) {
+        this.dom.setAttribute('showIf', String(value))
+      } else {
+        this.dom.removeAttribute('showIf')
+        this.dom.removeAttribute('showif')
+      }
+      return
+    }
+
+    // Handle TV focus-related attributes - set them on DOM element
+    const tvFocusAttrs = [
+      'focusable',
+      'enableFocusBorder',
+      'focusScale',
+      'focusBorderWidth',
+      'focusBorderColor',
+      'focusBorderRadius',
+      'canFocus',
+      'requestFocus',
+      'duplicateParentState',
+      'blockFocusDirections',
+      'blockfocusdirections',
+      'showOnState',
+    ]
+
+    // Focus style attributes (for duplicateParentState)
+    // These can be set via :focusColor="..." or focus-color in CSS
+    const focusStyleAttrs = [
+      'focusColor',
+      'focusBackgroundColor',
+      'focusBackground',
+      'focusTextColor',
+      'focusBorderColor',
+      'focusBorderWidth',
+      'focusBorderRadius',
+      'focusOpacity',
+      'focusScale',
+    ]
+
+    // Layout attributes
+    const layoutAttrs = ['clipChildren', 'clipPadding']
+
+    if (layoutAttrs.includes(key)) {
+      if (key === 'clipChildren') {
+        // clipChildren: false → overflow: visible (允许子节点超出显示)
+        // clipChildren: true → overflow: hidden (裁剪超出部分)
+        this.dom.style.overflow = value === false ? 'visible' : 'hidden'
+      } else if (key === 'clipPadding') {
+        // clipPadding: 处理 padding 区域的裁剪
+        // 目前暂不处理，保留扩展点
+      }
+      return
+    }
+
+    // Also handle kebab-case versions (from CSS or direct assignment)
+    const kebabFocusStyleAttrs = [
+      'focus-color',
+      'focus-background-color',
+      'focus-background',
+      'focus-text-color',
+      'focus-border-color',
+      'focus-border-width',
+      'focus-border-radius',
+      'focus-opacity',
+      'focus-scale',
+    ]
+
+    if (tvFocusAttrs.includes(key)) {
+      // Set as DOM attribute for TVFocusManager to find
+      if (value !== null && value !== undefined) {
+        // Special handling for showOnState: convert array to JSON string
+        if (key === 'showOnState' && Array.isArray(value)) {
+          this.dom.setAttribute(key, JSON.stringify(value))
+        } else {
+          this.dom.setAttribute(key, String(value))
+        }
+      } else {
+        this.dom.removeAttribute(key)
+      }
+      return
+    }
+
+    if (focusStyleAttrs.includes(key)) {
+      // Store focus styles as data attributes
+      if (value !== null && value !== undefined) {
+        // Convert camelCase to kebab-case for data attribute
+        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)) {
+      // Handle kebab-case focus styles (from CSS parsing)
+      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)
+  }
+
+  // Apply flexStyle object to DOM
+  _applyFlexStyle(styleObj) {
+    if (!styleObj || typeof styleObj !== 'object') return
+
+    // Flex properties that require display: flex
+    const flexProperties = [
+      'flexDirection',
+      'justifyContent',
+      'alignItems',
+      'alignContent',
+      'flexWrap',
+      'flexGrow',
+      'flexShrink',
+      'flexBasis',
+      'order',
+      'alignSelf',
+    ]
+
+    // Check if any flex property is being set
+    const hasFlexProperty = Object.keys(styleObj).some((key) => flexProperties.includes(key))
+
+    // If flex properties are set and display is not explicitly set, add display: flex
+    // This matches Hippy's behavior where all elements default to flex layout
+    if (hasFlexProperty && !Object.keys(styleObj).includes('display')) {
+      this.dom.style.display = 'flex'
+    }
+
+    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',
+          'gap',
+          'rowGap',
+          'columnGap',
+        ].includes(key)
+
+        if (needsPx) {
+          value = value + 'px'
+        }
+      }
+
+      try {
+        if (key !== 'x' && key !== 'y') {
+          this.dom.style[key] = value
+        }
+      } catch (e) {
+        try {
+          if (key !== 'x' && key !== 'y') {
+            const cssKey = key.replace(/([A-Z])/g, '-$1').toLowerCase()
+            this.dom.style.setProperty(cssKey, value)
+          }
+        } catch (err) {
+          // Ignore style errors
+        }
+      }
+    })
+  }
+
+  _applyLayout(layout) {
+    if (!layout) return
+
+    if (Array.isArray(layout)) {
+      const x = layout[0]
+      const y = layout[1]
+      const width = layout[2]
+      const height = layout[3]
+
+      if (x !== undefined && x !== null) {
+        this.dom.style.left = typeof x === 'number' ? `${x}px` : x
+      }
+      if (y !== undefined && y !== null) {
+        this.dom.style.top = typeof y === 'number' ? `${y}px` : y
+      }
+      if (width !== undefined && width !== null) {
+        this.dom.style.width = typeof width === 'number' ? `${width}px` : width
+      }
+      if (height !== undefined && height !== null) {
+        this.dom.style.height = typeof height === 'number' ? `${height}px` : height
+      }
+
+      if (
+        (x !== undefined || y !== undefined) &&
+        (!this.dom.style.position || this.dom.style.position === 'relative')
+      ) {
+        this.dom.style.position = 'absolute'
+      }
+
+      return
+    }
+
+    if (typeof layout === 'object') {
+      const { x, y, width, height } = layout
+
+      if (x !== undefined && x !== null) {
+        this.dom.style.left = typeof x === 'number' ? `${x}px` : x
+      }
+      if (y !== undefined && y !== null) {
+        this.dom.style.top = typeof y === 'number' ? `${y}px` : y
+      }
+      if (width !== undefined && width !== null) {
+        this.dom.style.width = typeof width === 'number' ? `${width}px` : width
+      }
+      if (height !== undefined && height !== null) {
+        this.dom.style.height = typeof height === 'number' ? `${height}px` : height
+      }
+
+      if (
+        (x !== undefined || y !== undefined) &&
+        (!this.dom.style.position || this.dom.style.position === 'relative')
+      ) {
+        this.dom.style.position = 'absolute'
+      }
+    }
+  }
+
+  _applySize(size) {
+    if (!size) return
+
+    if (Array.isArray(size)) {
+      const width = size[0]
+      const height = size[1]
+
+      if (width !== undefined && width !== null) {
+        this.dom.style.width = typeof width === 'number' ? `${width}px` : width
+      }
+      if (height !== undefined && height !== null) {
+        this.dom.style.height = typeof height === 'number' ? `${height}px` : height
+      }
+
+      return
+    }
+
+    if (typeof size === 'object') {
+      const { width, height } = size
+
+      if (width !== undefined && width !== null) {
+        this.dom.style.width = typeof width === 'number' ? `${width}px` : width
+      }
+      if (height !== undefined && height !== null) {
+        this.dom.style.height = typeof height === 'number' ? `${height}px` : height
+      }
+    }
+  }
+
+  _applyDecoration(decoration) {
+    if (!decoration || typeof decoration !== 'object') return
+
+    const { left, top, right, bottom } = decoration
+
+    if (left !== undefined && left !== null) {
+      this.dom.style.marginLeft = typeof left === 'number' ? `${left}px` : left
+    }
+    if (top !== undefined && top !== null) {
+      this.dom.style.marginTop = typeof top === 'number' ? `${top}px` : top
+    }
+    if (right !== undefined && right !== null) {
+      this.dom.style.marginRight = typeof right === 'number' ? `${right}px` : right
+    }
+    if (bottom !== undefined && bottom !== null) {
+      this.dom.style.marginBottom = typeof bottom === 'number' ? `${bottom}px` : bottom
+    }
+  }
+
+  // Request focus for this element
+  // direction is optional QTFocusDirection enum value
+  requestFocus(direction) {
+    const focusManager = global.__TV_FOCUS_MANAGER__
+    if (!focusManager) {
+      console.warn('[QtView] TVFocusManager not available for requestFocus')
+      return
+    }
+
+    if (direction !== undefined && direction !== null) {
+      // Move focus from this element in the specified direction
+      focusManager.moveFocusFromElement(this.dom, direction)
+    } else {
+      // No direction specified, just focus this element
+      focusManager.focusElement(this.dom)
+    }
+  }
+
+  // Request focus directly (similar to requestFocus but without direction check)
+  requestFocusDirectly(direction) {
+    const focusManager = global.__TV_FOCUS_MANAGER__
+    if (!focusManager) {
+      console.warn('[QtView] TVFocusManager not available for requestFocusDirectly')
+      return
+    }
+
+    if (direction !== undefined && direction !== null) {
+      // Move focus from this element in the specified direction
+      focusManager.moveFocusFromElement(this.dom, direction)
+    } else {
+      // No direction specified, just focus this element
+      focusManager.focusElement(this.dom)
+    }
+  }
+
+  // Request child focus at a specific position
+  requestChildFocus(position, direction) {
+    const focusManager = global.__TV_FOCUS_MANAGER__
+    if (!focusManager) {
+      console.warn('[QtView] TVFocusManager not available for requestChildFocus')
+      return
+    }
+
+    // Find child at the specified position
+    const children = this.dom.children
+    if (position >= 0 && position < children.length) {
+      const childElement = children[position]
+      if (childElement) {
+        if (direction !== undefined && direction !== null) {
+          focusManager.moveFocusFromElement(childElement, direction)
+        } else {
+          focusManager.focusElement(childElement)
+        }
+      }
+    }
+  }
+
+  // Clear focus from this element
+  clearFocus() {
+    const focusManager = global.__TV_FOCUS_MANAGER__
+    if (!focusManager) {
+      console.warn('[QtView] TVFocusManager not available for clearFocus')
+      return
+    }
+
+    focusManager.clearFocusFromElement(this.dom)
+  }
+
+  // Set block focus directions
+  setBlockFocusDirections(directionList) {
+    if (Array.isArray(directionList)) {
+      this.dom.setAttribute('blockFocusDirections', JSON.stringify(directionList))
+    }
+  }
+
+  // Set block focus directions on fail
+  setBlockFocusDirectionsOnFail(directionList) {
+    if (Array.isArray(directionList)) {
+      this.dom.setAttribute('blockFocusDirectionsOnFail', JSON.stringify(directionList))
+    }
+  }
+
+  // ========================================
+  // UI Functions for ExtendModule.callUIFunction
+  // ========================================
+
+  /**
+   * Change the alpha (opacity) of the element
+   * @param {number} alpha - opacity value between 0 and 1
+   */
+  changeAlpha(alpha) {
+    const opacity = Math.max(0, Math.min(1, Number(alpha) || 1))
+    this.dom.style.opacity = opacity
+    console.log('[QtView] changeAlpha:', opacity)
+  }
+
+  /**
+   * Set the scale of the element
+   * @param {number} scale - scale factor (e.g., 1.1 for 10% enlargement)
+   */
+  setScale(scale) {
+    const scaleValue = Number(scale) || 1
+    this.dom.style.transform = this.dom.style.transform
+      ? this.dom.style.transform.replace(/scale\([^)]*\)/, `scale(${scaleValue})`)
+      : `scale(${scaleValue})`
+    console.log('[QtView] setScale:', scaleValue)
+  }
+
+  /**
+   * Set the position of the element
+   * @param {number} x - x position
+   * @param {number} y - y position
+   */
+  setPosition(x, y) {
+    const xValue = Number(x) || 0
+    const yValue = Number(y) || 0
+    this.dom.style.left = `${xValue}px`
+    this.dom.style.top = `${yValue}px`
+    console.log('[QtView] setPosition:', xValue, yValue)
+  }
+
+  /**
+   * Update the layout of the element
+   * @param {object} layout - layout object with width, height, x, y etc.
+   */
+  updateLayout(layout) {
+    if (!layout || typeof layout !== 'object') return
+
+    if (layout.width !== undefined) {
+      this.dom.style.width = typeof layout.width === 'number' ? `${layout.width}px` : layout.width
+    }
+    if (layout.height !== undefined) {
+      this.dom.style.height =
+        typeof layout.height === 'number' ? `${layout.height}px` : layout.height
+    }
+    if (layout.x !== undefined) {
+      this.dom.style.left = typeof layout.x === 'number' ? `${layout.x}px` : layout.x
+    }
+    if (layout.y !== undefined) {
+      this.dom.style.top = typeof layout.y === 'number' ? `${layout.y}px` : layout.y
+    }
+    console.log('[QtView] updateLayout:', layout)
+  }
+
+  /**
+   * Set the background color of the element
+   * @param {number|string} color - ARGB color number or CSS color string
+   */
+  setBackGroundColor(color) {
+    let cssColor = color
+    // Convert ARGB number to CSS color if needed
+    if (typeof color === 'number') {
+      const a = ((color >> 24) & 0xff) / 255
+      const r = (color >> 16) & 0xff
+      const g = (color >> 8) & 0xff
+      const b = color & 0xff
+      cssColor = `rgba(${r}, ${g}, ${b}, ${a})`
+    }
+    this.dom.style.backgroundColor = cssColor
+    console.log('[QtView] setBackGroundColor:', cssColor)
+  }
+
+  /**
+   * Set the size of the element
+   * @param {number} width - width in pixels
+   * @param {number} height - height in pixels
+   */
+  setSize(width, height) {
+    if (width !== undefined) {
+      this.dom.style.width = typeof width === 'number' ? `${width}px` : width
+    }
+    if (height !== undefined) {
+      this.dom.style.height = typeof height === 'number' ? `${height}px` : height
+    }
+    console.log('[QtView] setSize:', width, height)
+  }
+
+  /**
+   * Set the translation of the element
+   * @param {number} x - x translation
+   * @param {number} y - y translation
+   */
+  setTranslation(x, y) {
+    const xValue = Number(x) || 0
+    const yValue = Number(y) || 0
+    this.dom.style.transform = this.dom.style.transform
+      ? this.dom.style.transform.replace(
+          /translate\([^)]*\)/,
+          `translate(${xValue}px, ${yValue}px)`
+        )
+      : `translate(${xValue}px, ${yValue}px)`
+    console.log('[QtView] setTranslation:', xValue, yValue)
+  }
+
+  /**
+   * Set initial focus on this element
+   * @param {string} sid - the sid of the element to focus
+   * @param {number} delay - optional delay in milliseconds
+   */
+  setInitFocus(sid, delay = 0) {
+    const focusManager = global.__TV_FOCUS_MANAGER__
+    if (!focusManager) {
+      console.warn('[QtView] TVFocusManager not available for setInitFocus')
+      return
+    }
+
+    const doFocus = () => {
+      focusManager.updateFocusableElements()
+      focusManager.focusElement(this.dom)
+    }
+
+    if (delay > 0) {
+      setTimeout(doFocus, delay)
+    } else {
+      requestAnimationFrame(doFocus)
+    }
+    console.log('[QtView] setInitFocus:', sid, delay)
+  }
+
+  /**
+   * Set auto focus on this element
+   * @param {string} sid - the sid of the element to focus
+   * @param {number} delay - optional delay in milliseconds
+   */
+  setAutoFocus(sid, delay = 0) {
+    // Same as setInitFocus for web
+    this.setInitFocus(sid, delay)
+  }
+
+  // Called when component is mounted to the DOM
+  mounted() {
+    super.mounted?.()
+
+    // Check if requestFocus attribute is set to true
+    const requestFocusAttr = this.dom.getAttribute('requestFocus')
+    if (requestFocusAttr === 'true' || requestFocusAttr === '1' || requestFocusAttr === '') {
+      // Delay to ensure DOM is ready and focusable elements are updated
+      requestAnimationFrame(() => {
+        const focusManager = global.__TV_FOCUS_MANAGER__
+        if (focusManager) {
+          // Update focusable elements first
+          focusManager.updateFocusableElements()
+          focusManager.focusElement(this.dom)
+        }
+      })
+    }
+  }
+
+  // Called when component is unmounted - cleanup sid registration
+  beforeUnmount() {
+    // Cleanup sid registration
+    if (this._currentSid) {
+      unregisterComponentBySid(this._currentSid)
+      this._currentSid = null
+    }
+
+    // Cleanup DOM registry
+    if (window.__HIPPY_COMPONENT_REGISTRY__) {
+      window.__HIPPY_COMPONENT_REGISTRY__.delete(this.dom)
+    }
+  }
+
+  // Legacy destroy method
+  destroy() {
+    this.beforeUnmount?.()
+  }
+}
+
+// Factory function to create named components that preserve original component name
+// This adds data-component-name attribute to DOM elements for easy identification
+export function createNamedComponent(BaseClass, originalName, tagName = 'div') {
+  return class NamedComponent extends BaseClass {
+    static componentName = originalName
+
+    constructor(context, id, pId) {
+      super(context, id, pId)
+      // Mark the DOM element with original component name
+      if (this.dom) {
+        this.dom.setAttribute('data-component-name', originalName)
+        // Also store as property for easy access
+        this._originalComponentName = originalName
+      }
+    }
+  }
+}