@tarojs/plugin-platform-harmony-ets 3.7.0-alpha.27 → 4.0.0-alpha.10

package/dist/components-harmony-ets/input.ets

@@ -1,50 +1,18 @@
-import window from '@ohos.window'
-import common from '@ohos.app.ability.common'
-import { isNumber, isUndefined } from '@tarojs/shared'
-import { bindFocus, bindInstanceToNode, eventHandler, Current, getComponentEventCallback, AREA_CHANGE_EVENT_NAME, VISIBLE_CHANGE_EVENT_NAME, initComponentNodeInfo,
-  TaroEvent, TaroAny } from '@tarojs/runtime'
+import { eventHandler, getComponentEventCallback, AREA_CHANGE_EVENT_NAME, VISIBLE_CHANGE_EVENT_NAME, createTaroEvent } from '@tarojs/runtime'
 
-import TaroComponentWrapper from './base'
-import { createTaroEvent } from './utils/events'
-import { AttributeManager } from './utils/AttributeManager'
-import { getNormalAttributes, parseStyles, shouldBindEvent, getNodeThresholds, bindAnimation } from './utils/helper'
-import { TEXT_DEFAULT_STYLE, INPUT_TYPE_MAP, INPUT_CONFIRM_MAP } from './utils/constant/style'
+import commonStyleModify from './style'
+import { parseStyles, shouldBindEvent, getNodeThresholds } from './utils/helper'
+import { INPUT_TYPE_MAP, INPUT_CONFIRM_MAP } from './utils/constant/style'
 
-import type { TaroInputElement } from './element'
-import type { TaroStyleType } from '@tarojs/runtime'
+import type { TaroStyleType, TaroAny, TaroInputElement, TaroEvent } from '@tarojs/runtime'
 
 interface InputAttrs {
   textAlign?: TextAlign
+  autoFocus?: boolean
 }
 
 @Extend(TextInput)
 function styles (style: TaroStyleType) {
-  .id(style.id)
-  .key(style.id)
-  .padding(style.padding)
-  .margin(style.margin)
-  .width(style.width)
-  .height(style.height)
-  .constraintSize(style.constraintSize)
-  .flexGrow(style.flexGrow)
-  .flexShrink(style.flexShrink)
-  .flexBasis(style.flexBasis)
-  .alignSelf(style.alignSelf)
-  .backgroundColor(style.backgroundColor)
-  .backgroundImage(style.backgroundImage, style.backgroundRepeat)
-  .backgroundImageSize(style.backgroundImageSize)
-  .rotate(style.rotate)
-  .scale(style.scale)
-  .translate(style.translate)
-  .transform(style.transform)
-  .borderStyle(style.borderStyle)
-  .borderWidth(style.borderWidth)
-  .borderColor(style.borderColor)
-  .borderRadius(style.borderRadius)
-  .linearGradient(style.linearGradient)
-  .zIndex(style.zIndex)
-  .opacity(style.opacity)
-  .clip(style.clip)
   .fontColor(style.color)
   .fontSize(style.fontSize)
   .fontWeight(style.fontWeight)
@@ -55,141 +23,87 @@ function styles (style: TaroStyleType) {
 @Extend(TextInput)
 function attrs(attr: InputAttrs) {
   .textAlign(attr.textAlign)
+  .defaultFocus(attr.autoFocus)
 }
 
-
 function getAttributes(node: TaroInputElement): InputAttrs {
   return {
     textAlign: node.hmStyle.textAlign,
+    autoFocus: node._attrs.autoFocus || node._attrs.focus || false,
   }
 }
 
-@Component
-struct TaroInput {
-  nodeInfoMap: TaroAny = {}
-
-  @State text: string = ''
-
-  @ObjectLink node: TaroInputElement
+function getInputType (node: TaroInputElement) {
+  if (node._attrs?.password) return InputType.Password
 
-  controller: TextInputController = new TextInputController()
+  return INPUT_TYPE_MAP.get(node._attrs?.type || '') || InputType.Normal
+}
 
-  windowClass?: window.Window
+function getPlaceholderColor (node: TaroInputElement): string {
+  const placeholderTextColor: string = node._attrs.placeholderTextColor || ''
+  const placeholderStyle: string = node._attrs.placeholderStyle || ''
 
-  _height: number = 0
+  return placeholderTextColor || parseStyles(placeholderStyle)?.color
+}
 
-  @Styles visibleChangeEvent () {
-    .onVisibleAreaChange(getNodeThresholds(this.node) || [0.0, 1.0], getComponentEventCallback(this.node, VISIBLE_CHANGE_EVENT_NAME))
-  }
+@Component
+export default struct TaroInput {
+  @State value: string = ''
 
-  heightChange = (height: number) => {
-    if (isNumber(height)) {
-      if (this._height !== height) {
-        this.onKeyboardHeightChange(height)
-        this._height = height
-      }
-    }
-  }
+  @Builder customBuilder() {}
+  @BuilderParam createLazyChildren: (node: TaroInputElement) => void = this.customBuilder
+  @ObjectLink node: TaroInputElement
+  @State overwriteStyle: Record<string, TaroAny> = {}
 
   aboutToAppear () {
-    initComponentNodeInfo(this, this.node)
-    bindInstanceToNode(this.node, this)
-    bindFocus(this.node)
-    // 绑定动画
-    bindAnimation(this.node)
-
-    this.text = this.node._attrs.value || ''
-
-    try {
-      Current.contextPromise
-        .then((context: common.BaseContext) => {
-          return window.getLastWindow(context, (err, windowClass: window.Window) => {
-            const errCode: number = err.code;
-            if (errCode) {
-              console.error('Failed to obtain the top window. Cause: ' + JSON.stringify(err))
-              return;
-            }
-            this.windowClass = windowClass
-            windowClass.on('keyboardHeightChange', this.heightChange)
-          })
-        })
-    } catch (exception) {
-      console.error('Failed to obtain the top window. Cause: ' + JSON.stringify(exception))
-    }
-  }
+    if (this.node) {
+      this.value = this.node.value
+      this.node._instance = this
 
-  aboutToDisappear () {
-    if (this.windowClass) {
-      try {
-        this.windowClass.off('keyboardHeightChange', this.heightChange)
-      } catch (err) {
-        console.error('Failed to obtain the top window. Cause: ' + JSON.stringify(err))
+      if (!this.node._isInit) {
+        this.node._isInit = true
+        this.node._reset = this.node.value || ''
       }
     }
   }
 
-  onKeyboardHeightChange (height: number) {
-    const event: TaroEvent = createTaroEvent('keyboardHeightChange', { detail: { height: height, duration: 0 } }, this.node)
-    eventHandler(event, 'keyboardHeightChange', this.node)
-  }
-
-  getPlaceholderColor (node: TaroInputElement): string {
-    const placeholderTextColor: string = node._attrs.placeholderTextColor || ''
-    const placeholderStyle: string = node._attrs.placeholderStyle || ''
-
-    return placeholderTextColor || parseStyles(placeholderStyle)?.color
-  }
-
-  getInputType (node: TaroInputElement) {
-    if (node._attrs?.password) return InputType.Password
-    return INPUT_TYPE_MAP.get(node._attrs?.type || '') || InputType.Normal
-  }
-
-  getText (): string {
-    return isUndefined(this.node._attrs.value) ? this.text : this.node._attrs.value
-  }
-
-  @Styles defaultEvent () {
+  build () {
+    TextInput({ text: this.value, placeholder: this.node._attrs?.placeholder || '', controller: this.node.controller })
+    .key(this.node._nid)
+    .type(getInputType(this.node))
+    .maxLength(Number(this.node._attrs?.maxlength) || null)
+    .placeholderColor(getPlaceholderColor(this.node))
+    .enterKeyType(INPUT_CONFIRM_MAP.get(this.node._attrs?.confirmType) || EnterKeyType.Done)
+    .padding(0) // Note: 移出 Input 默认 padding 设置
+    .attributeModifier(commonStyleModify.setNode(this.node).setAnimationStyle(this.overwriteStyle))
+    .styles(this.node?.hmStyle)
+    .attrs(getAttributes(this.node))
+    .onChange((value: string) => {
+      const event: TaroEvent = createTaroEvent('input', { detail: { value } }, this.node)
+
+      this.value = value
+      this.node?.updateFormWidgetValue(value)
+      eventHandler(event, 'input', this.node)
+    })
+    .onSubmit(() => {
+      const event: TaroEvent = createTaroEvent('confirm', { detail: { value: this.value } }, this.node)
+      eventHandler(event, 'confirm', this.node)
+    })
     .onClick(shouldBindEvent((e: ClickEvent) => eventHandler(e, 'click', this.node), this.node, ['click']))
     .onBlur(() => {
-      const event: TaroEvent = createTaroEvent('blur', { detail: { value: this.text } }, this.node)
+      const event: TaroEvent = createTaroEvent('blur', { detail: { value: this.value } }, this.node)
       eventHandler(event, 'blur', this.node)
     })
     .onFocus(() => {
-      const event: TaroEvent = createTaroEvent('focus', { detail: { value: this.text, height: this._height } }, this.node)
+      const event: TaroEvent = createTaroEvent('focus', { detail: { value: this.value, height: this.node?._height } }, this.node)
+
       eventHandler(event, 'focus', this.node)
     })
-    .onAreaChange(getComponentEventCallback(this.node, AREA_CHANGE_EVENT_NAME, res => {
-      const eventResult: TaroAny = res.eventResult
-      this.nodeInfoMap[this.node._nid].areaInfo = eventResult[1]
+    .onAreaChange(getComponentEventCallback(this.node, AREA_CHANGE_EVENT_NAME, (res: TaroAny) => {
+      if (this.node) {
+        this.node._nodeInfo.areaInfo = res[1]
+      }
     }))
-  }
-
-  build() {
-    TaroComponentWrapper({ node: this.node }) {
-      TextInput({ text: this.getText(), placeholder: this.node._attrs?.placeholder || '', controller: this.controller })
-        .focusable(true)
-        .key(this.node._nid)
-        .type(this.getInputType(this.node))
-        .maxLength(Number(this.node._attrs?.maxlength) || null)
-        .placeholderColor(this.getPlaceholderColor(this.node))
-        .enterKeyType(INPUT_CONFIRM_MAP.get(this.node._attrs?.confirmType) || EnterKeyType.Done)
-        .defaultEvent()
-        .styles(getNormalAttributes(this.node))
-        .attrs(getAttributes(this.node))
-        .style(TextInputStyle.Inline)
-        .onChange((value: string) => {
-          const event: TaroEvent = createTaroEvent('input', { detail: { value } }, this.node)
-          eventHandler(event, 'input', this.node)
-          this.text = value
-        })
-        .onSubmit(() => {
-          const event: TaroEvent = createTaroEvent('confirm', { detail: { value: this.text } }, this.node)
-          eventHandler(event, 'confirm', this.node)
-        })
-        .visibleChangeEvent()
-    }
+    .onVisibleAreaChange(getNodeThresholds(this.node) || [0.0, 1.0], getComponentEventCallback(this.node, VISIBLE_CHANGE_EVENT_NAME))
   }
 }
-
-export default TaroInput

package/dist/components-harmony-ets/label.ets

@@ -1,111 +1,105 @@
-import { bindInstanceToNode, Current, eventHandler, getComponentEventCallback, VISIBLE_CHANGE_EVENT_NAME, initComponentNodeInfo, getPageScrollerOrNode, AREA_CHANGE_EVENT_NAME,
-  TaroAny } from '@tarojs/runtime'
+import { Current, eventHandler, getComponentEventCallback, VISIBLE_CHANGE_EVENT_NAME, getPageScrollerOrNode, AREA_CHANGE_EVENT_NAME } from '@tarojs/runtime'
+
+import commonStyleModify, { rowModify, columnModify } from './style'
 
-import { createNode } from './render'
-import TaroComponentWrapper from './base'
 import { TOUCH_EVENT_MAP } from './utils/constant/event'
-import { FlexManager } from './utils/FlexManager'
-import { getNormalAttributes, shouldBindEvent, getNodeThresholds, bindAnimation } from './utils/helper'
+import { FlexManager } from './utils/flexManager'
+import { shouldBindEvent, getNodeThresholds } from './utils/helper'
 
-import type { TaroLabelElement, TaroElement } from './element'
-import type { TaroStyleType } from '@tarojs/runtime'
+import type { TaroLabelElement, TaroElement, TaroAny, TaroRadioElement, TaroCheckboxElement } from '@tarojs/runtime'
+import { isUndefined } from '@tarojs/shared'
 
-@Extend(Flex)
-function attrs (style: TaroStyleType) {
-  .id(style.id)
-  .key(style.id)
-  .padding(style.padding)
-  .margin(style.margin)
-  .width(style.width)
-  .height(style.height)
-  .constraintSize(style.constraintSize)
-  .flexGrow(style.flexGrow)
-  .flexShrink(style.flexShrink)
-  .flexBasis(style.flexBasis)
-  .alignSelf(style.alignSelf)
-  .backgroundColor(style.backgroundColor)
-  .backgroundImage(style.backgroundImage, style.backgroundRepeat)
-  .backgroundImageSize(style.backgroundImageSize)
-  .rotate(style.rotate)
-  .scale(style.scale)
-  .translate(style.translate)
-  .transform(style.transform)
-  .borderStyle(style.borderStyle)
-  .borderWidth(style.borderWidth)
-  .borderColor(style.borderColor)
-  .borderRadius(style.borderRadius)
-  .linearGradient(style.linearGradient)
-  .zIndex(style.zIndex)
-  .opacity(style.opacity)
-  .clip(style.clip)
-}
+function handleTargetChange (id: string) {
+  const taro: TaroAny = Current.taro
+  const page: TaroAny = taro.getCurrentInstance().page
+  const currentPageNode: TaroElement = getPageScrollerOrNode(page?.node, page)
+  const node: TaroElement | null = currentPageNode?.getElementById(id)
 
-@Component
-export default struct TaroLabel {
-  nodeInfoMap: TaroAny = {}
+  if (!node) return
 
-  @Styles visibleChangeEvent () {
-    .onVisibleAreaChange(getNodeThresholds(this.node) || [0.0, 1.0], getComponentEventCallback(this.node, VISIBLE_CHANGE_EVENT_NAME))
+  if (['BUTTON', 'CHECKBOX', 'RADIO', 'SWITCH', 'INPUT'].includes(node.tagName)) {
+    switch (node.tagName) {
+      case 'RADIO':
+        const radioNode: TaroRadioElement = node as TaroRadioElement
+        if (!radioNode.checked) {
+          radioNode.checked = !radioNode.checked
+        }
+        break
+      case 'CHECKBOX':
+        const checkBoxNode: TaroCheckboxElement = node as TaroCheckboxElement
+        checkBoxNode.checked = !checkBoxNode.checked
+        break
+      default:
+        focusControl.requestFocus(id)
+    }
   }
+}
 
+@Component
+export default struct TaroLabel {
+  @Builder customBuilder() {}
+  @BuilderParam createLazyChildren: (node: TaroLabelElement) => void = this.customBuilder
   @ObjectLink node: TaroLabelElement
+  @State overwriteStyle: Record<string, TaroAny> = {}
 
-  aboutToAppear () {
-    initComponentNodeInfo(this, this.node)
-    bindInstanceToNode(this.node, this)
-    // 绑定动画
-    bindAnimation(this.node)
-  }
-
-  @Styles defaultEvent () {
-    .onClick((e: ClickEvent) => {
-      const firstChild = this.node.childNodes[0] as TaroElement | null
-      const id: string = this.node._attrs.for || firstChild?._attrs.id || firstChild?._nid || ''
-      this.handleTargetChange(id)
-      eventHandler(e, 'click', this.node)
-    })
-    .onTouch(shouldBindEvent((e: TouchEvent) => eventHandler(e, TOUCH_EVENT_MAP.get(e.type), this.node), this.node, TOUCH_EVENT_MAP.values()))
-    .onAreaChange(getComponentEventCallback(this.node, AREA_CHANGE_EVENT_NAME, res => {
-      const eventResult: TaroAny = res.eventResult
-      this.nodeInfoMap[this.node._nid].areaInfo = eventResult[1]
-    }))
-  }
-
-  handleTargetChange (id: string) {
-    const taro: TaroAny = Current.taro
-    const page: TaroAny = taro.getCurrentInstance().page
-    const currentPageNode: TaroElement = getPageScrollerOrNode(page.node, page)
-    const node: TaroElement | null = currentPageNode.getElementById(id)
-
-    if (!node || !node._instance) return
-
-    if (['BUTTON', 'CHECKBOX', 'RADIO', 'SWITCH', 'INPUT'].includes(node.tagName)) {
-      const instance: TaroAny = node._instance
-      switch (node.tagName) {
-        case 'RADIO':
-          if (!instance.checked) {
-            instance.checked = !instance.checked
-          }
-          break
-        case 'CHECKBOX':
-          instance.checked = !instance.checked
-          break
-        default:
-          focusControl.requestFocus(id)
-      }
+  aboutToAppear(): void {
+    if (this.node) {
+      this.node._instance = this
     }
   }
 
   build() {
-    TaroComponentWrapper({ node: this.node }) {
+    if (FlexManager.useFlexLayout(this.node)) {
       Flex(FlexManager.flexOptions(this.node)) {
-        ForEach(this.node.childNodes, (item: TaroElement) => {
-          createNode(item)
-        }, (item: TaroElement) => item._nid)
+        this.createLazyChildren(this.node)
       }
-      .attrs(getNormalAttributes(this.node))
-      .defaultEvent()
-      .visibleChangeEvent()
+      .attributeModifier(commonStyleModify.setNode(this.node).setAnimationStyle(this.overwriteStyle))
+      .onClick((e: ClickEvent) => {
+        const firstChild: TaroElement | null = this.node.childNodes[0] as TaroElement | null
+        const id: string = this.node._attrs.for || firstChild?._attrs.id || firstChild?._nid || ''
+
+        handleTargetChange(id)
+        eventHandler(e, 'click', this.node)
+      })
+      .onTouch(shouldBindEvent((e: TouchEvent) => eventHandler(e, TOUCH_EVENT_MAP.get(e.type), this.node), this.node, TOUCH_EVENT_MAP.values()))
+      .onAreaChange(getComponentEventCallback(this.node, AREA_CHANGE_EVENT_NAME, (res: TaroAny) => {
+        this.node._nodeInfo.areaInfo = res[1]
+      }))
+      .onVisibleAreaChange(getNodeThresholds(this.node) || [0.0, 1.0], getComponentEventCallback(this.node, VISIBLE_CHANGE_EVENT_NAME))
+    } else if (FlexManager.isFlexNode(this.node) && FlexManager.direction(this.node) !== FlexDirection.Column) {
+      Row() {
+        this.createLazyChildren(this.node)
+      }
+      .attributeModifier(rowModify.setNode(this.node).setAnimationStyle(this.overwriteStyle))
+      .onClick((e: ClickEvent) => {
+        const firstChild: TaroElement | null = this.node.childNodes[0] as TaroElement | null
+        const id: string = this.node._attrs.for || firstChild?._attrs.id || firstChild?._nid || ''
+
+        handleTargetChange(id)
+        eventHandler(e, 'click', this.node)
+      })
+      .onTouch(shouldBindEvent((e: TouchEvent) => eventHandler(e, TOUCH_EVENT_MAP.get(e.type), this.node), this.node, TOUCH_EVENT_MAP.values()))
+      .onAreaChange(getComponentEventCallback(this.node, AREA_CHANGE_EVENT_NAME, (res: TaroAny) => {
+        this.node._nodeInfo.areaInfo = res[1]
+      }))
+      .onVisibleAreaChange(getNodeThresholds(this.node) || [0.0, 1.0], getComponentEventCallback(this.node, VISIBLE_CHANGE_EVENT_NAME))
+    } else {
+      Column() {
+        this.createLazyChildren(this.node)
+      }
+      .attributeModifier(columnModify.setNode(this.node).setAnimationStyle(this.overwriteStyle))
+      .onClick((e: ClickEvent) => {
+        const firstChild: TaroElement | null = this.node.childNodes[0] as TaroElement | null
+        const id: string = this.node._attrs.for || firstChild?._attrs.id || firstChild?._nid || ''
+
+        handleTargetChange(id)
+        eventHandler(e, 'click', this.node)
+      })
+      .onTouch(shouldBindEvent((e: TouchEvent) => eventHandler(e, TOUCH_EVENT_MAP.get(e.type), this.node), this.node, TOUCH_EVENT_MAP.values()))
+      .onAreaChange(getComponentEventCallback(this.node, AREA_CHANGE_EVENT_NAME, (res: TaroAny) => {
+        this.node._nodeInfo.areaInfo = res[1]
+      }))
+      .onVisibleAreaChange(getNodeThresholds(this.node) || [0.0, 1.0], getComponentEventCallback(this.node, VISIBLE_CHANGE_EVENT_NAME))
     }
   }
 }

package/dist/components-harmony-ets/listView.ets

@@ -0,0 +1,26 @@
+import commonStyleModify from './style'
+
+import type { TaroViewElement, TaroAny } from '@tarojs/runtime'
+
+@Component
+export default struct TaroListView {
+  @Builder customBuilder() {}
+  @BuilderParam createLazyChildren: (node: TaroViewElement) => void = this.customBuilder
+  @ObjectLink node: TaroViewElement
+  @State overwriteStyle: Record<string, TaroAny> = {}
+
+  aboutToAppear(): void {
+    if (this.node) {
+      this.node._instance = this
+    }
+  }
+
+  build() {
+    ListItem() {
+      Stack() {
+        this.createLazyChildren(this.node)
+      }
+    }
+    .attributeModifier(commonStyleModify.setNode(this.node).setAnimationStyle(this.overwriteStyle))
+  }
+}

package/dist/components-harmony-ets/movableArea.ets

@@ -0,0 +1,124 @@
+import type { TaroAny, TaroMovableAreaElement, TaroMovableViewElement } from '@tarojs/runtime'
+import { isTaroMovableViewElement } from '@tarojs/runtime'
+import commonStyleModify, { rowModify, columnModify } from './style'
+
+import { FlexManager } from './utils/flexManager'
+import { isUndefined } from '@tarojs/shared'
+
+@Component
+export default struct TaroMovableArea {
+  @Builder
+  customBuilder() {
+  }
+
+  @BuilderParam createLazyChildren: (node: TaroMovableAreaElement) => void = this.customBuilder
+  @ObjectLink node: TaroMovableAreaElement
+  @State overwriteStyle: Record<string, TaroAny> = {}
+
+  aboutToAppear(): void {
+    if (this.node) {
+      this.node._instance = this
+    }
+  }
+
+
+
+
+
+  build() {
+    if (FlexManager.useFlexLayout(this.node)) {
+      Flex(FlexManager.flexOptions(this.node)) {
+        this.createLazyChildren(this.node)
+      }
+      .attributeModifier(commonStyleModify.setNode(this.node).setAnimationStyle(this.overwriteStyle))
+      .clip(true)
+      .onAreaChange((oldValue: Area, newValue: Area) => {
+        areaChangeHandle(this.node, newValue)
+      })
+      .gesture(
+        PinchGesture({ fingers: 2 }).onActionStart((event: GestureEvent) => {
+          this.node.childNodes.forEach(item => {
+            if (isTaroMovableViewElement(item)) {
+              item.startScale()
+            }
+          })
+        }).onActionUpdate((event) => {
+          const scaleArea = this.node.getAttribute('scaleArea')
+          if (scaleArea) {
+            this.node.childNodes.forEach(item => {
+              if (isTaroMovableViewElement(item)) {
+                item.doScale(event.scale)
+              }
+            })
+          }
+        })
+      )
+    } else if (FlexManager.isFlexNode(this.node) && FlexManager.direction(this.node) !== FlexDirection.Column) {
+      Row() {
+        this.createLazyChildren(this.node)
+      }
+      .attributeModifier(rowModify.setNode(this.node).setAnimationStyle(this.overwriteStyle))
+      .clip(true)
+      .onAreaChange((oldValue: Area, newValue: Area) => {
+        areaChangeHandle(this.node, newValue)
+      })
+      .gesture(
+        PinchGesture({ fingers: 2 }).onActionStart((event: GestureEvent) => {
+          this.node.childNodes.forEach(item => {
+            if (isTaroMovableViewElement(item)) {
+              item.startScale()
+            }
+          })
+        }).onActionUpdate((event) => {
+          const scaleArea = this.node.getAttribute('scaleArea')
+          if (scaleArea) {
+            this.node.childNodes.forEach(item => {
+              if (isTaroMovableViewElement(item)) {
+                item.doScale(event.scale)
+              }
+            })
+          }
+        })
+      )
+    } else {
+      Column() {
+        this.createLazyChildren(this.node)
+      }
+      .attributeModifier(columnModify.setNode(this.node).setAnimationStyle(this.overwriteStyle))
+      .clip(true)
+      .onAreaChange((oldValue: Area, newValue: Area) => {
+        areaChangeHandle(this.node, newValue)
+      })
+      .gesture(
+        PinchGesture({ fingers: 2 }).onActionStart((event: GestureEvent) => {
+          this.node.childNodes.forEach(item => {
+            if (isTaroMovableViewElement(item)) {
+              item.startScale()
+            }
+          })
+        }).onActionUpdate((event) => {
+          const scaleArea = this.node.getAttribute('scaleArea')
+          if (scaleArea) {
+            this.node.childNodes.forEach(item => {
+              if (isTaroMovableViewElement(item)) {
+                item.doScale(event.scale)
+              }
+            })
+          }
+        })
+      )
+    }
+  }
+}
+function areaChangeHandle(node: TaroMovableAreaElement,newValue: Area) {
+  node.childNodes.forEach(item => {
+    if (isTaroMovableViewElement(item)) {
+      if (item.area?.w !== Number(newValue.width) || item.area?.h !== Number(newValue.height)) {
+        item.area = {
+          w: Number(newValue.width),
+          h: Number(newValue.height)
+        }
+      }
+    }
+  })
+}