@tarojs/plugin-platform-harmony-ets 4.0.0-beta.35 → 4.0.0-beta.37

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

@@ -21,38 +21,36 @@ export default struct TaroWebView {
   @ObjectLink node: TaroWebViewElement
 
   build () {
-    if (this.node.hmStyle?.display !== 'none') {
-      Web({ src: this.node._attrs.src, controller: this.node.controller })
-        .attributeModifier(commonStyleModify.setNode(this.node))
-        .onPageEnd((e: IPageLoad) => {
-          // 1. 创建消息端口
-          this.node.ports = this.node.controller.createWebMessagePorts(true)
-          // 2. 发送端口1到HTML5
-          this.node.controller.postMessage('init_web_messageport', [this.node.ports[1]], '*');
-          // 3. 保存端口0到本地
-          this.node.nativePort = this.node.ports[0]
-          // 4. 设置回调函数
-          this.node.nativePort.onMessageEventExt((result) => {
-            const message = this.node.handleMessageFromWeb(result)
-            const messageEvent: TaroEvent = createTaroEvent('message', { detail: { data: message } }, this.node)
-
-            eventHandler(messageEvent, 'message', this.node)
-          })
-
-          const onLoadEvent: TaroEvent = createTaroEvent('load', { detail: { src: this.node._attrs.src } }, this.node)
-
-          eventHandler(onLoadEvent, 'load', this.node)
+    Web({ src: this.node._attrs.src, controller: this.node.controller })
+      .attributeModifier(commonStyleModify.setNode(this.node))
+      .onPageEnd((e: IPageLoad) => {
+        // 1. 创建消息端口
+        this.node.ports = this.node.controller.createWebMessagePorts(true)
+        // 2. 发送端口1到HTML5
+        this.node.controller.postMessage('init_web_messageport', [this.node.ports[1]], '*');
+        // 3. 保存端口0到本地
+        this.node.nativePort = this.node.ports[0]
+        // 4. 设置回调函数
+        this.node.nativePort.onMessageEventExt((result) => {
+          const message = this.node.handleMessageFromWeb(result)
+          const messageEvent: TaroEvent = createTaroEvent('message', { detail: { data: message } }, this.node)
+
+          eventHandler(messageEvent, 'message', this.node)
         })
-        .onErrorReceive(shouldBindEvent((e: IError) => {
-          const event: TaroEvent = createTaroEvent('error', { detail: { url: this.node._attrs.src, fullUrl: e.request.getRequestUrl() } }, this.node)
-
-          eventHandler(event, 'error', this.node)
-        }, this.node, ['error']))
-        .onClick(shouldBindEvent((e: ClickEvent) => eventHandler(e, 'click', this.node), this.node, ['click']))
-        .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))
-    }
+
+        const onLoadEvent: TaroEvent = createTaroEvent('load', { detail: { src: this.node._attrs.src } }, this.node)
+
+        eventHandler(onLoadEvent, 'load', this.node)
+      })
+      .onErrorReceive(shouldBindEvent((e: IError) => {
+        const event: TaroEvent = createTaroEvent('error', { detail: { url: this.node._attrs.src, fullUrl: e.request.getRequestUrl() } }, this.node)
+
+        eventHandler(event, 'error', this.node)
+      }, this.node, ['error']))
+      .onClick(shouldBindEvent((e: ClickEvent) => eventHandler(e, 'click', this.node), this.node, ['click']))
+      .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/runtime-ets/dom/document.ts

@@ -19,6 +19,8 @@ class TaroDocument extends TaroNode {
 
   // 浮动层
   public fixedLayer: FixedLayer
+  // 浮层的父节点关系
+  public layerParents: Record<string, Record<string, true>> = {}
 
   constructor(window: Window) {
     super('#document', NodeType.DOCUMENT_NODE)

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

@@ -243,17 +243,27 @@ export class TaroElement<
   }
 
   // 设置渲染层级，0为正常层级，大于0为固定层级
+  // 1、appendChild的时候会判断是否需要设置层级
+  // 2、taro-react的setProperty，在处理属性变化的时候，会判断是否需要设置层级
+  // 3、removeChild的时候，会判断是否需要移除层级
   public setLayer (value: number) {
+    if (!this.parentNode) return // 没有父节点，不需要设置层级关系
     this._nodeInfo.layer = value
 
     if (value > 0) {
-      // 插入到root层
+      // 插入到固定浮层
       document.fixedLayer.childNodes.push(this)
       document.fixedLayer.notifyDataAdd(document.fixedLayer.childNodes.length - 1)
+      // 绑定祖先的节点id，建立关系，方便在祖先卸载（removeChild）的时候，能够找到该节点使其卸载
+      const _parentRecord = {}
+      generateLayerParentIds(_parentRecord, this)
+      document.layerParents[this._nid] = _parentRecord
     } else {
       const idx = document.fixedLayer.childNodes.findIndex(n => n._nid === this._nid)
       document.fixedLayer.childNodes.splice(idx, 1)
       document.fixedLayer.notifyDataDelete(idx)
+
+      delete document.layerParents[this._nid]
     }
 
     if (this.parentNode) {
@@ -261,4 +271,38 @@ export class TaroElement<
       this.updateComponent()
     }
   }
+
+  protected toggleLayer(add: boolean) {
+    if (add) {
+      if (this._st?.hmStyle.position === 'fixed') {
+        this.setLayer(1)
+      }
+    } else {
+      // 识别document.layerParents里面是否有需要移除的固定元素
+      if (this._nodeInfo?.layer > 0) {
+        // @ts-ignore
+        delete document.layerParents[this._nid]
+        this.setLayer(0)
+      } else {
+        Object.keys(document.layerParents).forEach(fixedId => {
+          const parentIds = document.layerParents[fixedId]
+          if (parentIds[this._nid]) {
+            // 需要移除fixedId
+            delete document.layerParents[fixedId]
+            const fixedNode = eventSource.get(fixedId) as unknown as TaroElement
+            if (fixedNode) {
+              fixedNode.setLayer(0)
+            }
+          }
+        })
+      }
+    }
+  }
+}
+
+function generateLayerParentIds(ids: Record<string, true>, node?: TaroElement) {
+  if (node?.parentElement) {
+    ids[node.parentElement._nid] = true
+    generateLayerParentIds(ids, node.parentElement)
+  }
 }

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

@@ -22,6 +22,7 @@ import {
   TaroIconElement,
   TaroImageElement,
   TaroLabelElement,
+  TaroOtherElement,
   TaroRichTextElement,
   TaroSwiperElement,
   TaroSwiperItemElement,
@@ -63,7 +64,7 @@ export function initHarmonyElement () {
       case 'form': return new TaroFormElement()
       case 'web-view': return new TaroWebViewElement()
       case 'inner-html': return new TaroInnerHtmlElement()
-      default: return new TaroElement(tagName)
+      default: return new TaroOtherElement(tagName)
     }
   }
 
@@ -88,6 +89,7 @@ export {
   TaroLabelElement,
   TaroMovableAreaElement,
   TaroMovableViewElement,
+  TaroOtherElement,
   TaroPickerElement,
   TaroProgressElement,
   TaroRadioElement,
@@ -102,4 +104,5 @@ export {
   TaroTextElement,
   TaroVideoElement,
   TaroViewElement,
-  TaroWebViewElement }
+  TaroWebViewElement
+}

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

@@ -12,6 +12,9 @@ import type {
   ViewProps
 } from '@tarojs/components/types'
 
+@Observed
+class TaroOtherElement extends TaroElement<ViewProps> {}
+
 @Observed
 class TaroViewElement extends TaroElement<ViewProps> {
   constructor() {
@@ -83,6 +86,7 @@ export {
   TaroIconElement,
   TaroImageElement,
   TaroLabelElement,
+  TaroOtherElement,
   TaroRichTextElement,
   TaroSwiperElement,
   TaroSwiperItemElement,

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

@@ -176,6 +176,9 @@ export class TaroNode extends TaroDataSourceElement {
     this.childNodes.push(child)
     this.notifyDataAdd(this.childNodes.length - 1)
 
+    // @ts-ignore
+    child.toggleLayer?.(true)
+
     checkIsCompileModeAndInstallAfterDOMAction(child, this)
     return child
   }
@@ -191,6 +194,9 @@ export class TaroNode extends TaroDataSourceElement {
       this.connectParentNode(newNode)
       // TODO: 优化
       this.notifyDataReload()
+
+      // @ts-ignore
+      newNode.toggleLayer?.(true)
     }
 
     checkIsCompileModeAndInstallAfterDOMAction(newNode, this)
@@ -220,13 +226,6 @@ export class TaroNode extends TaroDataSourceElement {
     const idx = this.findIndex(child)
     if (idx < 0) throw new Error('TaroNode:removeChild NotFoundError')
 
-    // 渲染，层级大于0的节点需要让其回到正常层级，然后删掉
-    // @ts-ignore
-    if (child._nodeInfo?.layer > 0) {
-      // @ts-ignore
-      child.setLayer(0) // 删除固定层级上的节点
-    }
-
     this.childNodes.splice(idx, 1)
     child.dispose()
     this.notifyDataDelete(idx)
@@ -237,9 +236,14 @@ export class TaroNode extends TaroDataSourceElement {
   }
 
   public dispose () {
+    // 渲染，层级大于0的节点需要让其回到正常层级，然后删掉
+    // @ts-ignore
+    this.toggleLayer?.(false)
+
     this.parentNode = null
     this.childNodes = []
   }
+
 }
 
 @Observed

package/dist/runtime-ets/dom/stylesheet/type.ts

@@ -32,6 +32,7 @@ export interface TaroStyleType {
   maxWidth?: Length
 
   display?: 'flex' | 'block' | 'none'
+  visibility?: 'visible' | 'hidden'
 
   // position
   position?: 'relative' | 'absolute' | 'fixed'

package/dist/runtime-utils.js

@@ -32,7 +32,7 @@ import dataPreferences from '@ohos.data.preferences';
 import hilog from '@ohos.hilog';
 import matrix4 from '@ohos.matrix4';
 import prompt from '@ohos.prompt';
-import { pxTransformHelper as pxTransformHelper$1 } from '@tarojs/taro';
+import { pxTransformHelper } from '@tarojs/taro';
 
 class MethodHandler {
     constructor({ name, success, fail, complete }) {
@@ -3880,7 +3880,7 @@ const pageScrollTo = (options) => {
             scroller = getPageScrollerOrNode(scroller, page);
             const { yOffset } = scroller.currentOffset();
             if (areaInfo) {
-                scrollValue = areaInfo.globalPosition.y + yOffset + pxTransformHelper$1(offsetTop, 'px', true);
+                scrollValue = areaInfo.globalPosition.y + yOffset + pxTransformHelper(offsetTop, 'px', true);
             }
         }
         const { xOffset } = scroller.currentOffset();
@@ -4880,49 +4880,7 @@ function initPxTransform({ designWidth = defaultDesignWidth, deviceRatio = defau
     }
 }
 const display = _display.getDefaultDisplaySync();
-let displayWidth = display.width;
-let ratioCache = false;
-let designWidthFunc;
-let designWidth = defaultDesignWidth;
-let deviceRatio = defaultDesignRatio;
-function getRatio(value) {
-    var _a;
-    // Note: 提前调用 display 可能无法获取正确值
-    if (ratioCache === false || displayWidth !== display.width) {
-        const config = ((_a = Current.taro) === null || _a === void 0 ? void 0 : _a.config) || {};
-        if (!isFunction(designWidthFunc)) {
-            designWidthFunc = isFunction(config.designWidth)
-                ? config.designWidth
-                : () => config.designWidth;
-            designWidth = designWidthFunc(value) || defaultDesignWidth;
-            deviceRatio = config.deviceRatio || defaultDesignRatio;
-            if (!(designWidth in deviceRatio)) {
-                throw new Error(`deviceRatio 配置中不存在 ${designWidth} 的设置！`);
-            }
-        }
-        displayWidth = display.width;
-        ratioCache = Math.min(display.width, display.height) / designWidth / deviceRatio[designWidth];
-    }
-    return ratioCache;
-}
-// Note: 设置为 style 单位时会自动完成设计稿转换，设计开发者调用 API 时也许抹平差异，例如 pageScrollTo[option.offsetTop]
-function pxTransformHelper(size, unit, isNumber = false) {
-    var _a;
-    const config = ((_a = Current.taro) === null || _a === void 0 ? void 0 : _a.config) || {};
-    const targetUnit = unit || config.targetUnit || defaultTargetUnit;
-    if (targetUnit === 'PX') {
-        return px2vp(size * display.scaledDensity) + 'vp';
-    }
-    const ratio = getRatio(size);
-    let val = size * ratio;
-    switch (targetUnit) {
-        case 'vp':
-            // Note: 在应用创建前调用无效
-            val = px2vp(val);
-            break;
-    }
-    return isNumber ? val : val + targetUnit;
-}
+display.width;
 function pxTransform(size) {
     var _a;
     const config = ((_a = Current.taro) === null || _a === void 0 ? void 0 : _a.config) || {};
@@ -4930,7 +4888,8 @@ function pxTransform(size) {
     const val = size;
     switch (targetUnit) {
         case 'vp':
-            return pxTransformHelper(size, 'px');
+            // return pxTransformHelper(size, 'px')
+            return `${size}lpx`;
         // NOTE: 鸿蒙环境下 style 会自动完成设计稿转换，无需在方法内二次调整
     }
     return val + targetUnit;