@tarojs/plugin-platform-harmony-ets 4.0.0-beta.13 → 4.0.0-beta.15

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/element.ts

@@ -1,4 +1,5 @@
 import { eventSource } from '@tarojs/runtime/dist/runtime.esm'
+import { EMPTY_OBJ, toCamelCase } from '@tarojs/shared'
 
 import { ATTRIBUTES_CALLBACK_TRIGGER_MAP, ID } from '../../constant'
 import { findChildNodeWithDFS } from '../../utils'
@@ -24,6 +25,7 @@ export class TaroElement<T extends StandardProps = StandardProps> extends TaroNo
   public _innerHTML = ''
   public _nodeInfo: TaroAny = {}
   public readonly tagName: string
+  public dataset: Record<string, unknown> = EMPTY_OBJ
   public _attrs: T & TaroExtraProps = {} as T & TaroExtraProps
 
   constructor(tagName: string) {
@@ -71,6 +73,21 @@ export class TaroElement<T extends StandardProps = StandardProps> extends TaroNo
   }
 
   public setAttribute (name: string, value: TaroAny): void {
+    switch (name) {
+      case ID:
+        eventSource.delete(this._attrs.id)
+        eventSource.set(value, this as TaroAny)
+        break
+      default:
+        if (name.startsWith('data-')) {
+          if (this.dataset === EMPTY_OBJ) {
+            this.dataset = Object.create(null)
+          }
+          this.dataset[toCamelCase(name.replace(/^data-/, ''))] = value
+        }
+        break
+    }
+
     if (name === ID) {
       eventSource.delete(this._attrs.id)
       eventSource.set(value, this as TaroAny)
@@ -130,8 +147,6 @@ export class TaroElement<T extends StandardProps = StandardProps> extends TaroNo
     }, true) || []
   }
 
-  // TODO dataset
-
   public set innerHTML (value: string) {
     if (this.nodeType === NodeType.ELEMENT_NODE && this.ownerDocument) {
       const ele = this.ownerDocument.createElement('inner-html')

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/dist/runtime-utils.js

@@ -267,33 +267,45 @@ const preloadSkylineView = /* @__PURE__ */ temporarilyNotSupport('preloadSkyline
 const preloadAssets = /* @__PURE__ */ temporarilyNotSupport('preloadAssets');
 
 let display;
+let navigationIndicatorRect;
 let safeArea = null;
-try {
-    display = _display.getDefaultDisplaySync();
-    // @ts-ignore
-    display.getCutoutInfo((err, { boundingRects = [], waterfallDisplayAreaRects = {} } = {}) => {
-        var _a, _b, _c, _d, _e, _f, _g, _h;
-        if (err === null || err === void 0 ? void 0 : err.code) {
-            console.error('Failed to get cutout info', JSON.stringify(err));
-            return;
+let statusBarHeight;
+let windowRect;
+Current.contextPromise.then((context) => {
+    const win = window.__ohos.getLastWindow(context);
+    win.then(mainWindow => {
+        const topRect = mainWindow.getWindowAvoidArea(window.__ohos.AvoidAreaType.TYPE_SYSTEM).topRect;
+        navigationIndicatorRect = mainWindow.getWindowAvoidArea(window.__ohos.AvoidAreaType.TYPE_NAVIGATION_INDICATOR).bottomRect;
+        statusBarHeight = topRect.top + topRect.height;
+        windowRect = mainWindow.getWindowProperties().windowRect;
+        try {
+            display = _display.getDefaultDisplaySync();
+            // @ts-ignore
+            display.getCutoutInfo((err, { boundingRects = [], waterfallDisplayAreaRects = {} } = {}) => {
+                var _a, _b, _c, _d, _e, _f;
+                if (err === null || err === void 0 ? void 0 : err.code) {
+                    console.error('Failed to get cutout info', JSON.stringify(err));
+                    return;
+                }
+                const top = Math.max(...boundingRects.map(rect => rect.top + rect.height), ((_a = waterfallDisplayAreaRects.top) === null || _a === void 0 ? void 0 : _a.top) + ((_b = waterfallDisplayAreaRects.top) === null || _b === void 0 ? void 0 : _b.height), statusBarHeight);
+                const bottom = display.height - Math.min((_c = waterfallDisplayAreaRects.bottom) === null || _c === void 0 ? void 0 : _c.top, navigationIndicatorRect === null || navigationIndicatorRect === void 0 ? void 0 : navigationIndicatorRect.top);
+                const left = ((_d = waterfallDisplayAreaRects.left) === null || _d === void 0 ? void 0 : _d.left) + ((_e = waterfallDisplayAreaRects.left) === null || _e === void 0 ? void 0 : _e.width);
+                const right = display.width - ((_f = waterfallDisplayAreaRects.right) === null || _f === void 0 ? void 0 : _f.left);
+                safeArea = {
+                    top,
+                    bottom,
+                    left,
+                    right,
+                    height: bottom - top,
+                    width: right - left,
+                };
+            });
+        }
+        catch (e) {
+            console.error('Failed to get display', e);
         }
-        const top = Math.max(...boundingRects.map(rect => rect.top * 2 + rect.height), ((_a = waterfallDisplayAreaRects.top) === null || _a === void 0 ? void 0 : _a.top) + ((_b = waterfallDisplayAreaRects.top) === null || _b === void 0 ? void 0 : _b.height));
-        const bottom = (((_c = waterfallDisplayAreaRects.bottom) === null || _c === void 0 ? void 0 : _c.top) + ((_d = waterfallDisplayAreaRects.bottom) === null || _d === void 0 ? void 0 : _d.height)) || display.height;
-        const left = ((_e = waterfallDisplayAreaRects.left) === null || _e === void 0 ? void 0 : _e.left) + ((_f = waterfallDisplayAreaRects.left) === null || _f === void 0 ? void 0 : _f.width);
-        const right = (((_g = waterfallDisplayAreaRects.right) === null || _g === void 0 ? void 0 : _g.left) + ((_h = waterfallDisplayAreaRects.right) === null || _h === void 0 ? void 0 : _h.width)) || display.width;
-        safeArea = {
-            top,
-            bottom,
-            left,
-            right,
-            height: bottom - top,
-            width: right - left,
-        };
     });
-}
-catch (e) {
-    console.error('Failed to get display', e);
-}
+});
 /* 同步版本 */
 const getSystemInfoSync = function () {
     var _a, _b;
@@ -322,12 +334,12 @@ const getSystemInfoSync = function () {
     res.safeArea = safeArea; // 在竖屏正方向下的安全区域 General.SafeAreaResult
     res.screenHeight = display === null || display === void 0 ? void 0 : display.height; // 屏幕高度，单位px number
     res.screenWidth = display === null || display === void 0 ? void 0 : display.width; // 屏幕宽度，单位px number
-    res.statusBarHeight = safeArea === null || safeArea === void 0 ? void 0 : safeArea.top; // 状态栏的高度，单位px number
+    res.statusBarHeight = statusBarHeight; // 状态栏的高度，单位px number
     res.system = deviceInfo === null || deviceInfo === void 0 ? void 0 : deviceInfo.osFullName; // 操作系统及版本 string
     // Note: 更新配置时才能记录
     res.theme = ((_b = AppStorage.get('__TARO_APP_CONFIG')) === null || _b === void 0 ? void 0 : _b.colorMode) === ConfigurationConstant.ColorMode.COLOR_MODE_DARK ? 'dark' : 'light'; // 系统当前主题，取值为light或dark 'light' | 'dark'
-    res.windowHeight = display === null || display === void 0 ? void 0 : display.height; // 可使用窗口高度，单位px number
-    res.windowWidth = display === null || display === void 0 ? void 0 : display.width; // 可使用窗口宽度，单位px number
+    res.windowHeight = windowRect === null || windowRect === void 0 ? void 0 : windowRect.height; // 可使用窗口高度，单位px number
+    res.windowWidth = windowRect === null || windowRect === void 0 ? void 0 : windowRect.width; // 可使用窗口宽度，单位px number
     res.version = deviceInfo === null || deviceInfo === void 0 ? void 0 : deviceInfo.displayVersion; // 版本号 string
     return res;
 };