@tarojs/plugin-platform-harmony-ets 4.0.0-beta.14 → 4.0.0-beta.16

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

@@ -1,4 +1,4 @@
-import type { TaroMovableAreaElement, TaroStyleType } from '@tarojs/runtime'
+import type { TaroMovableAreaElement, TaroStyleType, TaroMovableViewElement} from '@tarojs/runtime'
 import commonStyleModify from './style'
 import { createLazyChildren } from './render'
 
@@ -30,9 +30,6 @@ function columnAttrs(style: TaroStyleType) {
 export default struct TaroMovableArea {
   @ObjectLink node: TaroMovableAreaElement
 
-  @Provide areaWidth: Length = 0
-  @Provide areaHeight: Length = 0
-
   build() {
     if (this.node) {
       if (FlexManager.isFlexNode(this.node) && FlexManager.flexOptions(this.node).direction !== FlexDirection.Column) {
@@ -45,9 +42,33 @@ export default struct TaroMovableArea {
         .justifyContent(FlexManager.flexOptions(this.node).justifyContent)
         .clip(true)
         .onAreaChange((oldValue: Area, newValue: Area) => {
-          this.areaWidth = newValue.width
-          this.areaHeight = newValue.height
+          this.node.childNodes.forEach(item => {
+            if(item.nodeName === 'MOVABLE-VIEW') {
+              ;(item as TaroMovableViewElement).area = {
+                w: Number( newValue.width),
+                h: Number(newValue.height)
+              }
+            }
+          })
         })
+        .gesture(
+          PinchGesture({ fingers: 2 }).onActionStart((event: GestureEvent) => {
+            this.node.childNodes.forEach(item => {
+              if(item.nodeName === 'MOVABLE-VIEW') {
+                ;(item as TaroMovableViewElement).startScale()
+              }
+            })
+          }).onActionUpdate((event) => {
+            const scaleArea = this.node.getAttribute('scaleArea')
+            if (scaleArea) {
+              this.node.childNodes.forEach(item => {
+                if(item.nodeName === 'MOVABLE-VIEW') {
+                  ;(item as TaroMovableViewElement).doScale(event.scale)
+                }
+              })
+            }
+          })
+        )
       } else {
         Column() {
           createLazyChildren(this.node)
@@ -58,9 +79,33 @@ export default struct TaroMovableArea {
         .justifyContent(FlexManager.flexOptions(this.node).justifyContent)
         .clip(true)
         .onAreaChange((oldValue: Area, newValue: Area) => {
-          this.areaWidth = newValue.width
-          this.areaHeight = newValue.height
+          this.node.childNodes.forEach(item => {
+            if(item.nodeName === 'MOVABLE-VIEW') {
+              ;(item as TaroMovableViewElement).area = {
+                w: Number( newValue.width),
+                h: Number(newValue.height)
+              }
+            }
+          })
         })
+        .gesture(
+          PinchGesture({ fingers: 2 }).onActionStart((event: GestureEvent) => {
+            this.node.childNodes.forEach(item => {
+              if(item.nodeName === 'MOVABLE-VIEW') {
+                ;(item as TaroMovableViewElement).startScale()
+              }
+            })
+          }).onActionUpdate((event) => {
+            const scaleArea = this.node.getAttribute('scaleArea')
+            if (scaleArea) {
+              this.node.childNodes.forEach(item => {
+                if(item.nodeName === 'MOVABLE-VIEW') {
+                  ;(item as TaroMovableViewElement).doScale(event.scale)
+                }
+              })
+            }
+          })
+        )
       }
     }
   }

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

@@ -1,10 +1,11 @@
-import type { TaroMovableViewElement, TaroStyleType } from '@tarojs/runtime'
+import type { TaroMovableViewElement, TaroStyleType, TaroAny } from '@tarojs/runtime'
 
 import commonStyleModify from './style'
 import { createLazyChildren } from './render'
 
 import { FlexManager } from './utils/flexManager'
 import { getNormalAttributes, } from './utils/helper'
+
 @Extend(Row)
 function rowAttrs(style: TaroStyleType) {
   .constraintSize({
@@ -25,42 +26,65 @@ function columnAttrs(style: TaroStyleType) {
   })
 }
 
+
 @Component
-export default struct TaroMovableArea {
+export default struct TaroMovableView {
   @ObjectLink node: TaroMovableViewElement
 
-  @Provide areaWidth: Length = 0
-  @Provide areaHeight: Length = 0
-
   build() {
     if (this.node) {
-      if (FlexManager.isFlexNode(this.node) && FlexManager.flexOptions(this.node).direction !== FlexDirection.Column) {
-        Row() {
-          createLazyChildren(this.node)
-        }
-        .attributeModifier(commonStyleModify.setNode(this.node))
-        .rowAttrs(getNormalAttributes(this.node))
-        .alignItems(FlexManager.flexOptions(this.node).alignItems as VerticalAlign)
-        .justifyContent(FlexManager.flexOptions(this.node).justifyContent)
-        .clip(true)
-        .onAreaChange((oldValue: Area, newValue: Area) => {
-          this.areaWidth = newValue.width
-          this.areaHeight = newValue.height
-        })
-      } else {
-        Column() {
-          createLazyChildren(this.node)
+      Stack() {
+        if (FlexManager.isFlexNode(this.node) && FlexManager.flexOptions(this.node)
+          .direction !== FlexDirection.Column) {
+          Row() {
+            createLazyChildren(this.node)
+          }
+          .attributeModifier(commonStyleModify.setNode(this.node))
+          .rowAttrs(getNormalAttributes(this.node))
+          .alignItems(FlexManager.flexOptions(this.node).alignItems as VerticalAlign)
+          .justifyContent(FlexManager.flexOptions(this.node).justifyContent)
+        } else {
+          Column() {
+            createLazyChildren(this.node)
+          }
+          .attributeModifier(commonStyleModify.setNode(this.node))
+          .columnAttrs(getNormalAttributes(this.node))
+          .alignItems(FlexManager.flexOptions(this.node).alignItems as HorizontalAlign)
+          .justifyContent(FlexManager.flexOptions(this.node).justifyContent)
         }
-        .attributeModifier(commonStyleModify.setNode(this.node))
-        .columnAttrs(getNormalAttributes(this.node))
-        .alignItems(FlexManager.flexOptions(this.node).alignItems as HorizontalAlign)
-        .justifyContent(FlexManager.flexOptions(this.node).justifyContent)
-        .clip(true)
-        .onAreaChange((oldValue: Area, newValue: Area) => {
-          this.areaWidth = newValue.width
-          this.areaHeight = newValue.height
-        })
       }
+      .translate({ x: this.node.position.x, y: this.node.position.y })
+      .scale({ x: this.node.scaleValue, y: this.node.scaleValue })
+      .onAreaChange((oldValue: Area, newValue: Area) => {
+        this.node.selfSize = {w: Number(newValue.width), h: Number(newValue.height)}
+      })
+      .gesture(
+        GestureGroup(GestureMode.Exclusive,
+          PanGesture({fingers:1}).onActionStart((e: GestureEvent) => {
+
+            this.node.startMove()
+          }).onActionUpdate((e: GestureEvent) => {
+
+            this.node.doMove({
+              x: e.offsetX,
+              y: e.offsetY
+            })
+            // 事件处理
+            const bindchange = this.node.getAttribute('bindchange')
+            if (typeof bindchange === 'function') {
+            }
+
+          }).onActionEnd(() => {
+            // this.updatePosition()
+            this.node.checkPositionBoundary(this.node.position, this.node.scaleValue)
+          }),
+          PinchGesture({ fingers: 2 }).onActionStart((event: GestureEvent) => {
+            this.node.startScale()
+          }).onActionUpdate((event) => {
+            this.node.doScale(event.scale)
+          })
+        )
+      )
     }
   }
 }

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

@@ -43,19 +43,21 @@ export default struct TaroText {
   @ObjectLink node: TaroTextElement
 
   build () {
-    if (this.node.nodeType === NodeType.TEXT_NODE && this.node.parentNode) {
-      if ((this.node.parentNode as TaroElement).tagName === 'BUTTON') {
-        Text(this.node.textContent)
-          .textNormalFontStyle(getNormalAttributes(this.node.parentNode as TaroElement))
-          .textSpecialFontStyle(getFontAttributes(this.node.parentNode as TaroElement))
-          .fontSize((this.node.parentNode as TaroButtonElement).hmStyle.fontSize || getButtonFontSize(this.node.parentNode as TaroButtonElement))
-          .fontColor((this.node.parentNode as TaroButtonElement).hmStyle.color || getButtonColor(this.node.parentNode as TaroButtonElement, BUTTON_THEME_COLOR.get((this.node.parentNode as TaroButtonElement)._attrs.type).text))
-      } else {
-        Text(this.node.textContent)
-          .textNormalFontStyle(getNormalAttributes(this.node.parentNode as TaroElement))
-          .textSpecialFontStyle(getFontAttributes(this.node.parentNode as TaroElement))
-          .width(getNormalAttributes(this.node.parentNode as TaroElement).width)
-          .height(getNormalAttributes(this.node.parentNode as TaroElement).height)
+    if (this.node.nodeType === NodeType.TEXT_NODE) {
+      if (this.node.parentNode) {
+        if ((this.node.parentNode as TaroElement).tagName === 'BUTTON') {
+          Text(this.node.textContent)
+            .textNormalFontStyle(getNormalAttributes(this.node.parentNode as TaroElement))
+            .textSpecialFontStyle(getFontAttributes(this.node.parentNode as TaroElement))
+            .fontSize((this.node.parentNode as TaroButtonElement).hmStyle.fontSize || getButtonFontSize(this.node.parentNode as TaroButtonElement))
+            .fontColor((this.node.parentNode as TaroButtonElement).hmStyle.color || getButtonColor(this.node.parentNode as TaroButtonElement, BUTTON_THEME_COLOR.get((this.node.parentNode as TaroButtonElement)._attrs.type).text))
+        } else {
+          Text(this.node.textContent)
+            .textNormalFontStyle(getNormalAttributes(this.node.parentNode as TaroElement))
+            .textSpecialFontStyle(getFontAttributes(this.node.parentNode as TaroElement))
+            .width(getNormalAttributes(this.node.parentNode as TaroElement).width)
+            .height(getNormalAttributes(this.node.parentNode as TaroElement).height)
+        }
       }
     } else {
       Text(this.node.textContent)

package/dist/components-harmony-ets/utils/AttributeManager.ets

@@ -60,7 +60,7 @@ class AttributeManager {
     const dataValue: string = AttributeManager.getNodeStyle(style, 'animation')
 
     if (dataValue) {
-      let values: string[] = dataValue.trim().split(new RegExp("/\s+/"))
+      let values: string[] = dataValue.toString().trim().split(new RegExp("/\s+/"))
       switch (values.length) {
         case 4:
           res = { duration: values[0], curve: values[1], delay: values[2] }

package/dist/components-harmony-ets/utils/index.ts

@@ -30,7 +30,7 @@ export function getUnit (val) {
 function handleNodeStyleData (dataValue: string, handler: (values: string[]) => { [key: string]: string } | void) {
   let res: any = {}
   if (dataValue) {
-    const values = dataValue.trim().split(/\s+/)
+    const values = dataValue.toString().trim().split(/\s+/)
     const data = handler(values)
 
     if (!data) return res

package/dist/components-harmony-ets/utils/styles.ets

@@ -11,6 +11,8 @@ export function getFontAttributes (node: TaroElement): TaroTextStyleType {
   const hmStyle = node.hmStyle
   const attrs: TextProps = node._attrs || {}
 
+  if (!hmStyle) return {}
+
   const attributes: TaroAny = {
     WebkitLineClamp: attrs.maxLines || hmStyle.WebkitLineClamp || Infinity,
     // 已做处理的属性
@@ -32,6 +34,8 @@ function isMaxWidthView (node: TaroElement) {
 
 export function getNormalAttributes (node: TaroElement): TaroStyleType {
   const hmStyle = node.hmStyle
+  
+  if (!hmStyle) return {}
 
   const _nid = node._nid
   const _attrs: StandardProps = node._attrs || {}

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

@@ -0,0 +1,214 @@
+// 抽出来的嵌套查询
+// const __nesting_style__ = [
+//   {
+//     selectors: ['container', '>', 'hello', ' ', 'txt'],
+//     declaration: {
+//         _color: "#00F00F",
+//       _fontSize: convertNumber2VP(40),
+//     }
+//   },
+// ]
+// 
+// function Index() {
+//   return __combine_nesting_style__(jsx(TaroViewTagName, {
+//     className: "container aaa",
+//     style: calcDynamicStyle(__inner_style__(), "container", null),
+//     children: [
+//       jsx(TaroTextTagName, {
+//         className: "txt cc",
+//         style: calcDynamicStyle(__inner_style__(), "txt", null),
+//         children: "Hello!"
+//       }),
+//       jsx(TaroViewTagName, {
+//         className: "hello",
+//         style: calcDynamicStyle(__inner_style__(), "hello", null),
+//         children: [
+//           jsx(TaroTextTagName, {
+//             className: "txt",
+//             style: calcDynamicStyle(__inner_style__(), "txt", null),
+//             children: "wo2rld!"
+//           }),
+//           jsx(TaroTextTagName, {
+//             className: "txt2",
+//             style: calcDynamicStyle(__inner_style__(), "txt2", null),
+//             children: "Hello wo2rld!"
+//           })
+//         ]
+//       })
+//     ]
+//   }), __nesting_style__);
+// }
+
+import { ReactElement } from 'react'
+
+type TMappingNode = {
+  children: TMapping
+  descendants: TMapping
+}
+
+type TMapping = Record<string, TMappingNode>
+
+type TSelectorNode = {
+  mapping: TMapping
+  node: ReactElement
+}
+
+export type NestingStyle = {
+  selectors: string[]
+  declaration: Record<string, any>
+}[]
+
+// 构建映射表
+function depthTraversal(root: ReactElement) {
+  const class_mapping: TMapping = {}
+  // 记录别名，防止冲突
+  const selector_alias: Record<string, string[]> = {}
+  // 统计重名次数：{ txt: 1, cc: 2 }
+  const selector_alias_count: Record<string, number> = {}
+
+  const traverse = (tree) => {
+    if (tree) {
+      // 拆分classnames
+      const classnames = tree.props.className.split(' ')
+
+      const result: Record<string, TMapping> = {}
+
+      // 后代选择器
+      const descendant_map = {
+        children: {},
+        descendants: {}
+      }
+
+      if (tree.props.children) {
+        // 遍历叶子节点
+        if (tree.props.children instanceof Array) {
+          for (let i = 0; i < tree.props.children.length; i++) {
+            // 收集叶子节点所拥有的类名
+            // eslint-disable-next-line @typescript-eslint/no-use-before-define
+            processLeaf(tree.props.children[i], descendant_map)
+          }
+        } else if (typeof tree.props.children !== 'string'){
+          // 收集叶子节点所拥有的类名
+          // eslint-disable-next-line @typescript-eslint/no-use-before-define
+          processLeaf(tree.props.children, descendant_map)
+        }
+      }
+      for (let i = 0; i < classnames.length; i++) {
+        const cls = classnames[i]
+        let name = cls
+        if (selector_alias_count[name]) {
+          // 存在重名，需要使用别名替代
+          const oldName = name
+          name = `___${name}${selector_alias_count[oldName]}`
+          selector_alias_count[oldName] = selector_alias_count[oldName] + 1
+          selector_alias[oldName] ? selector_alias[oldName].push(name) : (selector_alias[oldName] = [name])
+        }
+        selector_alias_count[name] = 1
+
+        class_mapping[name] = descendant_map
+        result[name] = {
+          ref: descendant_map,
+          node: tree
+        }
+      }
+
+      return result
+    }
+  }
+
+  const processLeaf = (leaf, descendant_map: TMappingNode) => {
+    if (!leaf) return
+    const leaf_map = traverse(leaf)
+    if (!leaf_map) return
+    // 直接后代
+    Object.assign(descendant_map.children, leaf_map)
+    // 子孙后代
+    Object.assign(descendant_map.descendants, leaf_map)
+    const keys = Object.keys(leaf_map)
+    for (let i = 0; i < keys.length; i++) {
+      const leaf_child_map = class_mapping[keys[i]]
+      if (leaf_child_map) {
+        Object.assign(descendant_map.descendants, leaf_child_map.children)
+      }
+    }
+  }
+
+  traverse(root)
+  return {
+    mapping: class_mapping,
+    alias: selector_alias
+  }
+}
+
+// 将嵌套样式与节点合并
+function combineStyle(nestingStyle: NestingStyle, class_mapping: TMapping, alias: Record<string, string[]>) {
+
+  const findElement = (selector_string, combinator_type, selector_mapping) => {
+    let selector_list = [selector_string]
+    const selector_nodes: TSelectorNode[] = []
+    // 判断是否存在别名
+    if (alias[selector_string]) {
+      selector_list = selector_list.concat(alias[selector_string])
+    }
+
+    for (let i = 0; i < selector_list.length; i++) {
+      const selector = selector_list[i]
+      // 查询选择器的节点
+      const object = selector_mapping[selector]
+      if (object) {
+        selector_nodes.push({
+          mapping: (object.ref || object)[combinator_type === '>' ? 'children' : 'descendants'],
+          node: object.node
+        })
+      }
+    }
+    return selector_nodes
+  }
+  const findSelector = (selectors, current_mapping): TSelectorNode[] => {
+    const new_selectors = selectors.slice()
+    const selector_string = new_selectors.shift()
+    const combinator_type = new_selectors.shift()
+    const _elements = findElement(selector_string, combinator_type, current_mapping)
+    if (_elements.length) {
+      if (new_selectors.length) {
+        let elements: TSelectorNode[] = []
+        _elements.forEach(element => {
+          elements = elements.concat(findSelector(new_selectors.slice(), element.mapping))
+        })
+        return elements
+      } else {
+        return _elements
+      }
+    } else {
+      return []
+    }
+  }
+  // 合并样式
+  nestingStyle.forEach(({ selectors, declaration }) => {
+    // 获取选中的节点列表
+    const selectors_elements = findSelector(selectors, class_mapping)
+    for (let i = 0; i < selectors_elements.length; i++) {
+      const ele = selectors_elements[i].node
+      if (ele) {
+        if (ele.props.style) {
+          Object.assign(ele.props.style, declaration)
+        } else {
+          ele.props.style = declaration
+        }
+      }
+    }
+  })
+}
+
+// 合并嵌套样式
+// 1、构建映射表，生成一份扁平的样式表结构
+// 2、遍历嵌套样式，根据选择器查找节点，合并样式
+function __combine_nesting_style__(react_tree: ReactElement, styles: NestingStyle) {
+  // 循环一遍，构建出一颗JSX映射表
+  const { mapping, alias } = depthTraversal(react_tree)
+  // 合并样式
+  combineStyle(styles, mapping, alias)
+  return react_tree
+}
+
+export default __combine_nesting_style__

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

@@ -39,6 +39,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()

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

@@ -1,12 +1,194 @@
-
 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}> {
+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/stylesheet/util.ts

@@ -192,7 +192,7 @@ export class BORDER_STYLE_MAP {
 export function getNodeMarginOrPaddingData (dataValue: string) {
   let res: any = {}
   if (dataValue) {
-    const values = dataValue.trim().split(new RegExp('\\s+'))
+    const values = dataValue.toString().trim().split(new RegExp('\\s+'))
     switch (values.length) {
       case 1:
         res = { top: values[0], right: values[0], bottom: values[0], left: values[0] }

package/dist/runtime-ets/index.ts

@@ -10,6 +10,7 @@ export * from './dom/element'
 export * from './dom/event'
 export * from './dom/node'
 export * from './dom/stylesheet'
+export * from './dom/cssNesting'
 export * from './interface'
 export * from './utils'
 export * from './utils/info'

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tarojs/plugin-platform-harmony-ets",
-  "version": "4.0.0-beta.14",
+  "version": "4.0.0-beta.16",
   "description": "OpenHarmony & 鸿蒙系统插件",
   "author": "O2Team",
   "homepage": "https://gitee.com/openharmony-sig/taro",
@@ -25,13 +25,13 @@
   },
   "dependencies": {
     "webpack-sources": "^3.2.3",
-    "@tarojs/components": "4.0.0-beta.14",
-    "@tarojs/helper": "4.0.0-beta.14",
-    "@tarojs/runner-utils": "4.0.0-beta.14",
-    "@tarojs/runtime": "4.0.0-beta.14",
-    "@tarojs/service": "4.0.0-beta.14",
-    "@tarojs/shared": "4.0.0-beta.14",
-    "@tarojs/taro": "4.0.0-beta.14"
+    "@tarojs/components": "4.0.0-beta.16",
+    "@tarojs/helper": "4.0.0-beta.16",
+    "@tarojs/runner-utils": "4.0.0-beta.16",
+    "@tarojs/runtime": "4.0.0-beta.16",
+    "@tarojs/service": "4.0.0-beta.16",
+    "@tarojs/shared": "4.0.0-beta.16",
+    "@tarojs/taro": "4.0.0-beta.16"
   },
   "devDependencies": {
     "@rollup/plugin-commonjs": "^25.0.7",