@tarojs/plugin-platform-harmony-ets 4.0.0-beta.5 → 4.0.0-beta.50

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,
@@ -14,20 +15,26 @@ import {
   TaroSwitchElement,
   TaroTextAreaElement
 } from './form'
+import { TaroMovableAreaElement } from './movableArea'
+import { TaroMovableViewElement } from './movableView'
 import {
   TaroButtonElement,
   TaroIconElement,
   TaroImageElement,
   TaroLabelElement,
+  TaroNavigationBarElement,
+  TaroOtherElement,
+  TaroPageMetaElement,
   TaroRichTextElement,
   TaroSwiperElement,
   TaroSwiperItemElement,
   TaroViewElement
 } from './normal'
+import { TaroProgressElement } from './progress'
 import { TaroScrollViewElement } from './scrollView'
 import { TaroTextElement } from './text'
 import { TaroVideoElement } from './video'
-import { TaroWebViewElement } from './webView'
+import { TaroInnerHtmlElement, TaroWebViewElement } from './webView'
 
 export function initHarmonyElement () {
   Current.createHarmonyElement = (tagName: string) => {
@@ -36,6 +43,9 @@ 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 'checkbox-group': return new TaroCheckboxGroupElement()
       case 'input': return new TaroInputElement()
@@ -49,12 +59,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()
-      default: return new TaroElement(tagName)
+      case 'inner-html': return new TaroInnerHtmlElement()
+      case 'page-meta': return new TaroPageMetaElement()
+      case 'navigation-bar': return new TaroNavigationBarElement()
+      default: return new TaroOtherElement(tagName)
     }
   }
 
@@ -67,15 +81,23 @@ export function initHarmonyElement () {
 export {
   FormElement,
   TaroButtonElement,
+  TaroCanvasElement,
   TaroCheckboxElement,
   TaroCheckboxGroupElement,
   TaroElement,
   TaroFormElement,
   TaroIconElement,
   TaroImageElement,
+  TaroInnerHtmlElement,
   TaroInputElement,
   TaroLabelElement,
+  TaroMovableAreaElement,
+  TaroMovableViewElement,
+  TaroNavigationBarElement,
+  TaroOtherElement,
+  TaroPageMetaElement,
   TaroPickerElement,
+  TaroProgressElement,
   TaroRadioElement,
   TaroRadioGroupElement,
   TaroRichTextElement,

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

@@ -0,0 +1,12 @@
+
+import { TaroElement } from './element'
+
+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

@@ -0,0 +1,193 @@
+import { TaroElement } from './element'
+
+import type { MovableViewProps } from '@tarojs/components/types'
+
+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
+  }
+}
+
+@Observed
+export class TaroMovableViewElement extends TaroElement<MovableViewProps & { animation: undefined }> {
+  _scaleValue = 1
+  _scalevalueTemp = 1
+
+  // 父级区别的大小
+  _area?: Tsize
+  // 自己元素的大小
+  _selfSize?: Tsize
+
+  // 元素的位置
+  _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
+  }
+
+  set area(val: Tsize) {
+    this._area = val
+  }
+
+  get area(): Tsize | undefined {
+    return this._area
+  }
+
+  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 bindscale = this.getAttribute('bindscale')
+      typeof bindscale === 'function' && bindscale({ ...this.position, scale: this.scaleValue })
+    }
+  }
+
+  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 bindchange = this.getAttribute('bindchange')
+    if (typeof bindchange === 'function') {
+      bindchange({ x, y, source: 'touch' })
+    }
+    this.position = {
+      x: x,
+      y: y,
+    }
+  }
+
+  get position() {
+    return this._position
+  }
+
+  set position(val: Tpoint) {
+    this._position = val
+  }
+
+  set selfSize(val: Tsize) {
+    this._selfSize = val
+  }
+
+  get selfSize(): Tsize | undefined {
+    return this._selfSize
+  }
+
+  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)
+  }
+}

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

@@ -6,50 +6,60 @@ 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() {
     super('View')
   }
 }
 
+@Observed
 class TaroImageElement extends TaroElement<ImageProps> {
   constructor() {
     super('Image')
   }
 }
 
+@Observed
 class TaroButtonElement extends TaroElement<ButtonProps> {
   constructor() {
     super('Button')
   }
 }
 
-
-class TaroIconElement extends TaroElement<IconProps>{
+@Observed
+class TaroIconElement extends TaroElement<IconProps> {
   constructor() {
     super('Icon')
   }
 }
-
-class TaroLabelElement extends TaroElement<LabelProps>{
+@Observed
+class TaroLabelElement extends TaroElement<LabelProps> {
   constructor() {
     super('Label')
   }
 }
 
-class TaroRichTextElement extends TaroElement<RichTextProps>{
+@Observed
+class TaroRichTextElement extends TaroElement<RichTextProps> {
   constructor() {
     super('RichText')
   }
 }
 
-class TaroSwiperElement extends TaroElement<SwiperProps>{
+@Observed
+class TaroSwiperElement extends TaroElement<SwiperProps> {
   controller: SwiperController = new SwiperController()
 
   constructor() {
@@ -57,20 +67,37 @@ class TaroSwiperElement extends TaroElement<SwiperProps>{
   }
 }
 
-class TaroSwiperItemElement extends TaroElement<SwiperItemProps>{
+@Observed
+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

@@ -0,0 +1,12 @@
+
+import { TaroElement } from './element'
+
+import type { ProgressProps } from '@tarojs/components/types'
+
+@Observed
+export class TaroProgressElement extends TaroElement<ProgressProps> {
+
+  constructor() {
+    super('Progress')
+  }
+}

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

@@ -3,6 +3,7 @@ import { TaroElement } from './element'
 
 import type { ScrollViewProps } from '@tarojs/components/types'
 
+@Observed
 export class TaroScrollViewElement extends TaroElement<ScrollViewProps> {
   scroller: Scroller = new Scroller()
 

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

@@ -1,17 +1,10 @@
-import { TaroNode } from '../node'
 import { TaroElement } from './element'
 
 import type { TextProps } from '@tarojs/components/types'
 
+@Observed
 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

@@ -2,13 +2,15 @@ import { TaroElement } from './element'
 
 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() {
@@ -39,11 +41,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

@@ -5,13 +5,21 @@ import { TaroElement } from './element'
 
 import type { WebViewProps } from '@tarojs/components/types'
 
-export class TaroWebViewElement extends TaroElement<WebViewProps>{
+@Observed
+export class TaroInnerHtmlElement extends TaroElement {
+  constructor() {
+    super('InnerHtml')
+  }
+}
+
+@Observed
+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() {
@@ -54,7 +62,7 @@ export class TaroWebViewElement extends TaroElement<WebViewProps>{
     }
     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

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

@@ -68,12 +68,10 @@ class TaroEventTarget extends Events {
       }
     }
 
-
     if (event._stop) {
       this._stopPropagation(event)
     }
 
-
     return listeners != null
   }
 
@@ -95,5 +93,4 @@ class TaroEventTarget extends Events {
   }
 }
 
-
 export { TaroEventTarget }

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

@@ -59,35 +59,38 @@ export class TaroNode extends TaroDataSourceElement {
     return this.childNodes[index] as TaroElement
   }
 
-  public findIndex (refChild: TaroNode): number {
-    return this.childNodes.findIndex(node => node._nid === refChild._nid)
+  public findIndex (refChild?: TaroNode): number {
+    return this.childNodes.findIndex(node => node._nid === refChild?._nid)
   }
 
-  // 更新对应的 ArkUI 组件
-  public updateComponent () {
-    if (!this._isCompileMode && (!this.parentNode || !this.parentNode.listeners?.length)) return
+  public updateTextNode () {
+    // @ts-ignore
+    if (this.childNodes.length <= 0 || this.tagName !== 'VIEW') return
 
-    const idx = this.parentNode.findIndex(this)
+    // TextNode 不具备 props 更新能力，需要由父节点来进行触发
+    this.childNodes.forEach(item => {
+      if (item.nodeType !== NodeType.TEXT_NODE) return
 
-    if (this._isCompileMode) {
-      // 半编译模式下走 @State 的更新模式
-      if (this._isDynamicNode) {
-        this._updateTrigger++
-      } else {
-        this.parentNode.updateComponent()
-      }
+      item._updateTrigger++
+    })
+  }
+
+  // 更新对应的 ArkUI 组件
+  public updateComponent () {
+    // 非半编译模式或者半编译模式下拥有自主更新权力的节点走 @State 的更新模式
+    if (this._isDynamicNode || !this._isCompileMode) {
+      this._updateTrigger++
     } else {
-      // 非半编译模式下走 LazyForEach 的更新模式
-      if (idx >= 0) {
-        this._updateTrigger++
-        this.parentNode.notifyDataChange(idx)
-      } else {
-        this.parentNode.notifyDataReload()
-      }
+      this.parentNode?.updateComponent()
     }
   }
 
-  public get firstChild (): TaroNode | null{
+  // 提供唯一标识，方便与小程序一致，能根据uid获取到对应的节点
+  public get uid (): string {
+    return this._nid
+  }
+
+  public get firstChild (): TaroNode | null {
     return this.childNodes[0] || null
   }
 
@@ -128,11 +131,12 @@ export class TaroNode extends TaroDataSourceElement {
   public set textContent (value: string) {
     if (this.nodeType === NodeType.TEXT_NODE) {
       this._textContent = value
-      this.parentNode?.updateComponent()
     } else if (this.nodeType === NodeType.ELEMENT_NODE) {
       const node = new TaroTextNode(value)
       node._doc = this.ownerDocument
-      this.childNodes = [node]
+      node.parentNode = this
+      this.childNodes.length = 0
+      this.childNodes.push(node)
     }
   }
 
@@ -150,7 +154,6 @@ export class TaroNode extends TaroDataSourceElement {
   public set nodeValue (value: string | null) {
     if (this.nodeType === NodeType.TEXT_NODE && value) {
       this.textContent = value
-      this.parentNode?.updateComponent()
     }
   }
 
@@ -163,28 +166,37 @@ export class TaroNode extends TaroDataSourceElement {
   }
 
   // TODO cloneNode()、contains()
-
-  public appendChild (child: TaroNode): TaroNode {
+  public connectParentNode (child: TaroNode) {
     child.parentNode?.removeChild(child)
     child.parentNode = this
+  }
 
+  public appendChild (child: TaroNode): TaroNode {
+    this.connectParentNode(child)
     this.childNodes.push(child)
     this.notifyDataAdd(this.childNodes.length - 1)
 
+    // @ts-ignore
+    child.toggleLayer?.(true)
+
     checkIsCompileModeAndInstallAfterDOMAction(child, this)
     return child
   }
 
-  public insertBefore (newNode: TaroNode, referenceNode: TaroNode | null): TaroNode {
+  public insertBefore (newNode: TaroNode, referenceNode?: TaroNode): TaroNode {
     newNode.parentNode?.removeChild(newNode)
 
-    if (referenceNode === null) {
+    if (!referenceNode) {
       this.appendChild(newNode)
     } else {
       const idxOfRef = this.findIndex(referenceNode)
       this.childNodes.splice(idxOfRef, 0, newNode)
+      this.connectParentNode(newNode)
       // TODO: 优化
       this.notifyDataReload()
+
+      // @ts-ignore
+      newNode.toggleLayer?.(true)
     }
 
     checkIsCompileModeAndInstallAfterDOMAction(newNode, this)
@@ -224,11 +236,17 @@ export class TaroNode extends TaroDataSourceElement {
   }
 
   public dispose () {
+    // 渲染，层级大于0的节点需要让其回到正常层级，然后删掉
+    // @ts-ignore
+    this.toggleLayer?.(false)
+
     this.parentNode = null
     this.childNodes = []
   }
+
 }
 
+@Observed
 export class TaroTextNode extends TaroNode {
   constructor(value = '', nodeName = '#text', nodeType: NodeType = NodeType.TEXT_NODE) {
     super(nodeName, nodeType)