@tarojs/plugin-platform-harmony-ets 4.0.0-beta.11 → 4.0.0-beta.111

package/dist/runtime-ets/dom/element/form.ts

@@ -29,14 +29,10 @@ interface FormWidgetProps extends StandardProps {
 }
 
 class TaroFormWidgetElement<T extends FormWidgetProps = FormWidgetProps> extends TaroElement<T> {
-  _instance
-
   _isInit = false
 
   _name = ''
 
-  _value: TaroAny = ''
-
   _reset: TaroAny = ''
 
   constructor (tagName: string) {
@@ -45,7 +41,7 @@ class TaroFormWidgetElement<T extends FormWidgetProps = FormWidgetProps> extends
     bindFocus(this)
 
     this._name = this._attrs.name || ''
-    this._value = this._attrs.value || ''
+    this._nodeInfo._value = this._attrs.value || ''
   }
 
   public setAttribute (name: string, value: any): void {
@@ -66,11 +62,10 @@ class TaroFormWidgetElement<T extends FormWidgetProps = FormWidgetProps> extends
 
   public set name (val: string) {
     this.updateFormWidgetName(val)
-    this.updateComponent()
   }
 
   public get value () {
-    return this._value
+    return this._nodeInfo._value
   }
 
   public set value (val: TaroAny) {
@@ -78,8 +73,6 @@ class TaroFormWidgetElement<T extends FormWidgetProps = FormWidgetProps> extends
 
     if (this._instance) {
       this._instance.value = val
-    } else {
-      this.updateComponent()
     }
   }
 
@@ -89,7 +82,7 @@ class TaroFormWidgetElement<T extends FormWidgetProps = FormWidgetProps> extends
   }
 
   public updateFormWidgetValue (val: TaroAny) {
-    this._value = val
+    this._nodeInfo._value = val
     this._attrs.value = val
   }
 
@@ -121,7 +114,6 @@ class TaroCheckedElement<T extends StandardProps & { checked?: boolean } = Stand
 
   set checked (val: boolean) {
     this.updateCheckedValue(val)
-    this.updateComponent()
   }
 
   public updateCheckedValue (val: boolean) {
@@ -175,6 +167,14 @@ class TaroInputElement<T extends FormWidgetProps = InputProps> extends TaroFormW
     }
   }
 
+  public get value () {
+    return super.value
+  }
+
+  public set value (val: TaroAny) {
+    super.value = `${val}`
+  }
+
   private onKeyboardHeightChange (height: number) {
     const event: TaroEvent = createTaroEvent('keyboardHeightChange', { detail: { height: height, duration: 0 } }, this)
 
@@ -195,7 +195,7 @@ class TaroInputElement<T extends FormWidgetProps = InputProps> extends TaroFormW
 }
 
 @Observed
-class TaroTextAreaElement extends TaroInputElement<TextareaProps>{
+class TaroTextAreaElement extends TaroInputElement<TextareaProps> {
   controller: TextAreaController = new TextAreaController()
 
   constructor() {
@@ -203,14 +203,14 @@ class TaroTextAreaElement extends TaroInputElement<TextareaProps>{
   }
 }
 @Observed
-class TaroCheckboxElement extends TaroCheckedElement<CheckboxProps>{
+class TaroCheckboxElement extends TaroCheckedElement<CheckboxProps> {
   constructor() {
     super('Checkbox')
   }
 }
 
 @Observed
-class TaroRadioElement extends TaroCheckedElement<RadioProps>{
+class TaroRadioElement extends TaroCheckedElement<RadioProps> {
   public group?: string
 
   constructor() {
@@ -220,12 +220,10 @@ class TaroRadioElement extends TaroCheckedElement<RadioProps>{
 
 @Observed
 class TaroSliderElement extends TaroFormWidgetElement<SliderProps> {
-  _value = 0
-
   constructor() {
     super('Slider')
 
-    this._value = Number(this._attrs.value || 0)
+    this._nodeInfo._value = Number(this._attrs.value || 0)
   }
 }
 @Observed
@@ -242,7 +240,7 @@ class TaroPickerElement extends TaroFormWidgetElement<PickerSelectorProps | Pick
       case 'selector': {
         const key = this._attrs.rangeKey
         const item = this._attrs.range[this.value]
-        
+
         if (key) {
           return item[key]
         } else {
@@ -271,7 +269,7 @@ class TaroPickerElement extends TaroFormWidgetElement<PickerSelectorProps | Pick
     super.reset()
 
     const event: TaroEvent = createTaroEvent('change', { detail: { value: this._reset } }, this)
-    
+
     event.stopPropagation()
     eventHandler(event, 'change', this)
   }
@@ -347,7 +345,7 @@ class TaroFormElement extends TaroFormWidgetElement {
 
       findChildNodeWithDFS<TaroFormWidgetElement>(this, item => {
         if (!item.name) return false
-        
+
         switch (item.nodeName) {
           case 'INPUT':
           case 'RADIO':
@@ -378,9 +376,9 @@ class TaroFormElement extends TaroFormWidgetElement {
         e.stopPropagation()
         switch (item.nodeName) {
           case 'INPUT':
-          case 'SLIDER': 
+          case 'SLIDER':
           case 'PICKER':
-          case 'RADIO': 
+          case 'RADIO':
           case 'SWITCH':
           case 'CHECKBOX':
           case 'TEXTAREA':

package/dist/runtime-ets/dom/element/index.ts

@@ -1,5 +1,6 @@
 import { Current } from '../../current'
 import { TaroTextNode } from '../node'
+import { TaroCanvasElement } from './canvas'
 import { TaroElement } from './element'
 import {
   FormElement,
@@ -15,12 +16,15 @@ import {
   TaroTextAreaElement
 } from './form'
 import { TaroMovableAreaElement } from './movableArea'
-import { TaroMovableViewElement } from './movableView'
+import { isTaroMovableViewElement, TaroMovableViewElement } from './movableView'
 import {
   TaroButtonElement,
   TaroIconElement,
   TaroImageElement,
   TaroLabelElement,
+  TaroNavigationBarElement,
+  TaroOtherElement,
+  TaroPageMetaElement,
   TaroRichTextElement,
   TaroSwiperElement,
   TaroSwiperItemElement,
@@ -39,7 +43,11 @@ export function initHarmonyElement () {
       case 'image': return new TaroImageElement()
       case 'text': return new TaroTextElement()
       case 'button': return new TaroButtonElement()
+      case 'movable-area': return new TaroMovableAreaElement()
+      case 'movable-view': return new TaroMovableViewElement()
+      case 'progress': return new TaroProgressElement()
       case 'scroll-view': return new TaroScrollViewElement()
+      case 'scroll-list': return new TaroScrollViewElement()
       case 'checkbox-group': return new TaroCheckboxGroupElement()
       case 'input': return new TaroInputElement()
       case 'picker': return new TaroPickerElement()
@@ -52,13 +60,16 @@ export function initHarmonyElement () {
       case 'icon': return new TaroIconElement()
       case 'label': return new TaroLabelElement()
       case 'rich-text': return new TaroRichTextElement()
+      case 'canvas': return new TaroCanvasElement()
       case 'swiper': return new TaroSwiperElement()
       case 'swiper-item': return new TaroSwiperItemElement()
       case 'textarea': return new TaroTextAreaElement()
       case 'form': return new TaroFormElement()
       case 'web-view': return new TaroWebViewElement()
       case 'inner-html': return new TaroInnerHtmlElement()
-      default: return new TaroElement(tagName)
+      case 'page-meta': return new TaroPageMetaElement()
+      case 'navigation-bar': return new TaroNavigationBarElement()
+      default: return new TaroOtherElement(tagName)
     }
   }
 
@@ -71,6 +82,7 @@ export function initHarmonyElement () {
 export {
   FormElement,
   TaroButtonElement,
+  TaroCanvasElement,
   TaroCheckboxElement,
   TaroCheckboxGroupElement,
   TaroElement,
@@ -82,6 +94,9 @@ export {
   TaroLabelElement,
   TaroMovableAreaElement,
   TaroMovableViewElement,
+  TaroNavigationBarElement,
+  TaroOtherElement,
+  TaroPageMetaElement,
   TaroPickerElement,
   TaroProgressElement,
   TaroRadioElement,
@@ -98,3 +113,8 @@ export {
   TaroViewElement,
   TaroWebViewElement
 }
+
+
+export {
+  isTaroMovableViewElement
+}

package/dist/runtime-ets/dom/element/movableArea.ts

@@ -5,7 +5,6 @@ import type { MovableAreaProps } from '@tarojs/components/types'
 
 @Observed
 export class TaroMovableAreaElement extends TaroElement<MovableAreaProps> {
-
   constructor() {
     super('MovableArea')
   }

package/dist/runtime-ets/dom/element/movableView.ts

@@ -1,12 +1,244 @@
-
 import { TaroElement } from './element'
 
 import type { MovableViewProps } from '@tarojs/components/types'
+import type { TaroAny } from '../../utils'
 
+type Tsize = {
+  w: number
+  h: number
+}
+type Tpoint = {
+  x: number
+  y: number
+}
+
+function calcPosition(postion: number, start: number, end: number) {
+  if (postion <= end && postion >= start) {
+    return postion
+  } else if (postion < start) {
+    return start
+  } else {
+    return end
+  }
+}
+
+export function isTaroMovableViewElement (item: TaroAny): item is TaroMovableViewElement {
+  return item instanceof TaroMovableViewElement
+}
 @Observed
-export class TaroMovableViewElement extends TaroElement<MovableViewProps & {'animation': undefined}> {
+export class TaroMovableViewElement extends TaroElement<MovableViewProps & { animation: undefined }> {
+  _scaleValue = 1
+  _scalevalueTemp = 1
+
+  // 父级区别的大小
+  _area?: Tsize
+  // 自己元素的大小
+  _selfSize?: Tsize
+  _areaInited: false
+  _selfSizeInited: false
+
+  // 元素的位置
+  _position: Tpoint = {
+    x: 0,
+    y: 0,
+  }
+
+  _positionTemp: Tpoint = {
+    x: 0,
+    y: 0,
+  }
 
   constructor() {
     super('MovableView')
   }
+
+  get _outOfBounds() {
+    if (this.getAttribute('outOfBounds')) {
+      return this.selfSize ? this.selfSize.w / 3 : 0
+    }
+    return 0
+  }
+
+  startScale() {
+    this._scalevalueTemp = this._scaleValue
+  }
+
+  doScale(val: number) {
+    const scale = this.getAttribute('scale')
+
+    // 禁止缩放的时候不生效
+    if (scale) {
+      this.scaleValue = val * this._scalevalueTemp
+    }
+  }
+
+  set scaleValue(val: number) {
+    if (this.checkScaleValueInBounds(val)) {
+      this._scaleValue = val
+
+      this.checkPositionBoundary(this.position, val)
+
+      const scaleFns = this?.__listeners?.scale || []
+      scaleFns.forEach((fn) => {
+        fn({ ...this.position, scale: this.scaleValue })
+      })
+    }
+  }
+
+  get visibility () {
+    return this._areaInited && this._selfSizeInited ? Visibility.Visible : Visibility.Hidden
+  }
+
+  get scaleValue() {
+    return this._scaleValue
+  }
+
+  startMove() {
+    this._positionTemp = this._position
+  }
+
+  doMove(val: Tpoint) {
+    if (!this.area || !this.selfSize) {
+      return
+    }
+    if (this.getAttribute('disabled')) {
+      return
+    }
+    const direction = this.getAttribute('direction')
+
+    // 容器的宽高终点
+    const areaWidthEnd = this.area.w - this.selfSize.w * this.scaleValue
+    const areaHeightEnd = this.area.h - this.selfSize.h * this.scaleValue
+
+    const incrementWidth = (this.scaleValue - 1) * this.selfSize.w
+    const incrementHeight = (this.scaleValue - 1) * this.selfSize.h
+
+    let x = this._positionTemp.x
+    let y = this._positionTemp.y
+    if (['all', 'horizontal'].includes(direction)) {
+      const nextX = this._positionTemp.x + val.x * this.scaleValue
+      x = calcPosition(
+        nextX,
+        incrementWidth * 0.5 - this._outOfBounds,
+        areaWidthEnd + incrementWidth * 0.5 + this._outOfBounds
+      )
+    }
+
+    if (['all', 'vertical'].includes(direction)) {
+      const nextY = this._positionTemp.y + val.y * this.scaleValue
+      y = calcPosition(
+        nextY,
+        incrementHeight * 0.5 - this._outOfBounds,
+        areaHeightEnd + incrementHeight * 0.5 + this._outOfBounds
+      )
+    }
+
+    const changeFns = this?.__listeners?.change || []
+    changeFns.forEach((fn) => {
+      fn({ x, y, source: 'touch' })
+    })
+
+    this.position = {
+      x: x,
+      y: y,
+    }
+  }
+
+  get position() {
+    return this._position
+  }
+
+  set position(val: Tpoint) {
+    this._position = val
+  }
+
+  set area(val: Tsize) {
+    if (val.w === this._area?.w && val.h === this._area?.h) return
+    this._area = val
+    if (!this._areaInited) {
+      this._areaInited = true
+      this.initPositionFromAttribute()
+    }
+  }
+
+  get area(): Tsize | undefined {
+    return this._area
+  }
+
+  set selfSize(val: Tsize) {
+    if (val.w === this._selfSize?.w && val.h === this._selfSize?.h) return
+    this._selfSize = val
+    if (!this._selfSizeInited) {
+      this._selfSizeInited = true
+      this.initPositionFromAttribute()
+    }
+  }
+
+  get selfSize(): Tsize | undefined {
+    return this._selfSize
+  }
+
+  initPositionFromAttribute () {
+    if (!this.area || !this.selfSize) {
+      return
+    }
+    const x = this.getAttribute('x') ? Number(this.getAttribute('x')) : 0
+    const y = this.getAttribute('y') ? Number(this.getAttribute('y')) : 0
+    this.checkPositionBoundary({ x, y }, this.scaleValue)
+  }
+
+  checkPositionBoundary(position: Tpoint, scale: number) {
+    if (!this.area || !this.selfSize) {
+      return { x: 0, y: 0 }
+    }
+
+    const areaWidthEnd = this.area.w - this.selfSize.w * scale
+    const areaHeightEnd = this.area.h - this.selfSize.h * scale
+
+    const incrementWidth = (scale - 1) * this.selfSize.w
+    const incrementHeight = (scale - 1) * this.selfSize.h
+
+    this.position = {
+      x: calcPosition(position.x, incrementWidth * 0.5, areaWidthEnd + incrementWidth * 0.5),
+      y: calcPosition(position.y, incrementHeight * 0.5, areaHeightEnd + incrementHeight * 0.5),
+    }
+  }
+
+  checkScaleValueInBounds(currentScale: number) {
+    const scaleMin = this.getAttribute('scaleMin')
+    const scaleMax = this.getAttribute('scaleMax')
+
+    if (scaleMin && Number(scaleMin) >= 0.1 && currentScale < Number(scaleMin)) {
+      return false
+    } else if (scaleMax && Number(scaleMax) >= 0.1 && currentScale > Number(scaleMax)) {
+      return false
+    }
+
+    return true
+  }
+
+  public setAttribute(name: string, value: any): void {
+    if (name === 'x') {
+      this.checkPositionBoundary({ x: value, y: this.position.y }, this.scaleValue)
+    }
+    if (name === 'y') {
+      this.checkPositionBoundary({ x: this.position.x, y: value }, this.scaleValue)
+    }
+
+    super.setAttribute(name, value)
+  }
+
+  public callTouchEventFnFromGesture(eventName: string, gestureEvent: GestureEvent) {
+    const touchFns = (this?.__listeners?.[eventName] || []) as Function[]
+    touchFns.forEach(fn => {
+      fn({
+        _hmEvent: gestureEvent,
+        target: this,
+        changedTouches: gestureEvent.fingerList.map(finger => ({
+          clientX: finger.globalX,
+          clientY: finger.globalY
+        }))
+      })
+    })
+  }
 }

package/dist/runtime-ets/dom/element/normal.ts

@@ -6,12 +6,17 @@ import type {
   IconProps,
   ImageProps,
   LabelProps,
+  NavigationBarProps,
+  PageMetaProps,
   RichTextProps,
   SwiperItemProps,
   SwiperProps,
   ViewProps
 } from '@tarojs/components/types'
 
+@Observed
+class TaroOtherElement extends TaroElement<ViewProps> {}
+
 @Observed
 class TaroViewElement extends TaroElement<ViewProps> {
   constructor() {
@@ -34,27 +39,27 @@ class TaroButtonElement extends TaroElement<ButtonProps> {
 }
 
 @Observed
-class TaroIconElement extends TaroElement<IconProps>{
+class TaroIconElement extends TaroElement<IconProps> {
   constructor() {
     super('Icon')
   }
 }
 @Observed
-class TaroLabelElement extends TaroElement<LabelProps>{
+class TaroLabelElement extends TaroElement<LabelProps> {
   constructor() {
     super('Label')
   }
 }
 
 @Observed
-class TaroRichTextElement extends TaroElement<RichTextProps>{
+class TaroRichTextElement extends TaroElement<RichTextProps> {
   constructor() {
     super('RichText')
   }
 }
 
 @Observed
-class TaroSwiperElement extends TaroElement<SwiperProps>{
+class TaroSwiperElement extends TaroElement<SwiperProps> {
   controller: SwiperController = new SwiperController()
 
   constructor() {
@@ -63,20 +68,36 @@ class TaroSwiperElement extends TaroElement<SwiperProps>{
 }
 
 @Observed
-class TaroSwiperItemElement extends TaroElement<SwiperItemProps>{
+class TaroSwiperItemElement extends TaroElement<SwiperItemProps> {
   constructor() {
     super('SwiperItem')
   }
 }
 
+@Observed
+class TaroPageMetaElement extends TaroElement<PageMetaProps> {
+  constructor() {
+    super('PageMeta')
+  }
+}
+
+@Observed
+class TaroNavigationBarElement extends TaroElement<NavigationBarProps> {
+  constructor() {
+    super('NavigationBar')
+  }
+}
 
 export {
   TaroButtonElement,
   TaroIconElement,
   TaroImageElement,
   TaroLabelElement,
+  TaroNavigationBarElement,
+  TaroOtherElement,
+  TaroPageMetaElement,
   TaroRichTextElement,
   TaroSwiperElement,
   TaroSwiperItemElement,
-  TaroViewElement, 
+  TaroViewElement
 }

package/dist/runtime-ets/dom/element/progress.ts

@@ -5,9 +5,7 @@ import type { ProgressProps } from '@tarojs/components/types'
 
 @Observed
 export class TaroProgressElement extends TaroElement<ProgressProps> {
-
   constructor() {
     super('Progress')
-
   }
 }

package/dist/runtime-ets/dom/element/text.ts

@@ -1,4 +1,3 @@
-import { TaroNode } from '../node'
 import { TaroElement } from './element'
 
 import type { TextProps } from '@tarojs/components/types'
@@ -8,11 +7,4 @@ export class TaroTextElement extends TaroElement<TextProps> {
   constructor() {
     super('Text')
   }
-
-  public appendChild (child: TaroNode): TaroNode {
-    super.appendChild(child)
-
-    this.updateComponent()
-    return child
-  }
 }

package/dist/runtime-ets/dom/element/video.ts

@@ -4,12 +4,12 @@ import type { VideoProps } from '@tarojs/components/types'
 
 @Observed
 export class TaroVideoElement extends TaroElement<VideoProps> {
-  _currentTime = 0
-
   controller: VideoController = new VideoController()
 
   constructor() {
     super('Video')
+
+    this._nodeInfo._currentTime = 0
   }
 
   async play() {
@@ -40,11 +40,11 @@ export class TaroVideoElement extends TaroElement<VideoProps> {
   }
 
   get currentTime() {
-    return this._currentTime
+    return this._nodeInfo._currentTime
   }
 
   set currentTime(val: number) {
-    this._currentTime = val
+    this._nodeInfo._currentTime = val
     this.controller.setCurrentTime(val)
   }
 }

package/dist/runtime-ets/dom/element/webView.ts

@@ -13,13 +13,13 @@ export class TaroInnerHtmlElement extends TaroElement {
 }
 
 @Observed
-export class TaroWebViewElement extends TaroElement<WebViewProps>{
+export class TaroWebViewElement extends TaroElement<WebViewProps> {
   ports: web_webview.WebMessagePort[] = []
 
   nativePort: web_webview.WebMessagePort | null = null
 
   message: web_webview.WebMessageExt = new web_webview.WebMessageExt()
-  
+
   controller: web_webview.WebviewController = new web_webview.WebviewController()
 
   constructor() {
@@ -59,10 +59,9 @@ export class TaroWebViewElement extends TaroElement<WebViewProps>{
           return null
         }
       }
-    }
-    catch (error) {
+    } catch (error) {
       const e: business_error.BusinessError = error as business_error.BusinessError
-      
+
       console.error(`ErrorCode: ${e.code},  Message: ${e.message}`)
     }
   }

package/dist/runtime-ets/dom/event.ts

@@ -55,7 +55,6 @@ export class TaroEvent<T = any> {
   }
 }
 
-
 export function createEvent (event: TaroEvent | string, type?: string, node?: TaroElement) {
   if (typeof event === 'string') {
     // For Vue3 using document.createEvent
@@ -87,7 +86,6 @@ function stopOrTriggerPropagation (event: TaroEvent, node: TaroElement) {
 
   // eslint-disable-next-line no-unmodified-loop-condition
   while ((target = target.parentNode as TaroElement)) {
-    event.currentTarget = target
     const listeners = target.__listeners[event.type]
 
     if (!Array.isArray(listeners) || target._attrs?.disabled) {
@@ -111,7 +109,7 @@ const BUBBLE_EVENTS = new Set([
   'longTap',
   'change',
   'submit',
-  'submit-btn', 
+  'submit-btn',
   'reset-btn'
 ])
 
@@ -123,7 +121,7 @@ function collectBatchFunction (type: string, dispatch: () => void) {
   }
 }
 
-export function eventHandler (event, type: string, node: TaroElement) {
+export function eventHandler (event, type: string, node: TaroElement): void {
   if (!node) return
 
   const isBatchUpdates = hooks.isExist('batchedEventUpdates')
@@ -144,7 +142,7 @@ export function eventHandler (event, type: string, node: TaroElement) {
 
     // hooks.call('dispatchTaroEventFinish', e, node)
   }
-  
+
   dispatch()
   if (isBatchUpdates) {
     // collectBatchFunction(type, dispatch)