@tarojs/plugin-platform-harmony-ets 4.0.0-alpha.29 → 4.0.0-alpha.30

package/dist/apis/media/image/index.ts

@@ -9,11 +9,15 @@
 // ❌ wx.saveImageToPhotosAlbum(Object object) api 9+ HarmonyOS不支持
 // ❌ wx.previewImage(Object object) api 9+ HarmonyOS不支持
 
+import fs from '@ohos.file.fs'
 import picker from '@ohos.file.picker'
 import image from '@ohos.multimedia.image'
+import { Current } from '@tarojs/runtime'
 import { isNull } from '@tarojs/shared'
 
-import { callAsyncFail, callAsyncSuccess, temporarilyNotSupport, validateParams } from '../../utils'
+import { getSystemInfoSync } from '../../base'
+import { callAsyncFail, callAsyncSuccess, requestPermissions, temporarilyNotSupport, validateParams } from '../../utils'
+import { IMAGE_PERMISSION } from '../../utils/permissions'
 
 import type Taro from '@tarojs/taro/types'
 
@@ -22,12 +26,21 @@ interface IPackingOptionOHOS {
   quality: number
 }
 
+interface IChooseImageData {
+  tempFilePaths?: string[]
+
+  tempFiles?: {
+    path: string
+    size: number
+  }[]
+}
+
 const getImageInfoSchema = {
-  url: 'String'
+  src: 'String'
 }
 
 const compressImageSchema = {
-  url: 'String'
+  src: 'String'
 }
 
 const chooseImageSchema = {
@@ -60,61 +73,211 @@ export const getImageInfo: typeof Taro.getImageInfo = function (options) {
   })
 }
 
+
+class CompressedImageInfo {
+  imageUri = '' // 压缩后图片保存位置的uri
+  imageByteLength = 0 // 压缩后图片字节长度
+}
+
+async function saveImage(compressedImageData, compressedImageUri) {
+  const tempArr = compressedImageUri.split('/')
+  const name = tempArr[tempArr.length - 1]
+  const context = getContext(Current?.page)
+  const applicationContext = context.getApplicationContext()
+  const tempDir = applicationContext.tempDir
+  const filePath = `${tempDir}/${name}`
+
+  try {
+    const res = fs.accessSync(filePath)
+    if (res) {
+      // 如果图片afterCompressiona.jpeg已存在，则删除
+      fs.unlinkSync(filePath)
+    }
+  } catch (err) {
+    console.error(`[Taro] saveImage Error: AccessSync failed with error message: ${err.message}, error code: ${err.code}`)
+  }
+
+  // 知识点：保存图片。获取最终图片压缩数据compressedImageData，保存图片。
+  // 压缩图片数据写入文件
+  const file = fs.openSync(filePath, fs.OpenMode.READ_WRITE | fs.OpenMode.CREATE)
+  fs.writeSync(file.fd, compressedImageData)
+  fs.closeSync(file)
+
+  // 获取压缩图片信息
+  const compressedImageInfo = new CompressedImageInfo()
+  compressedImageInfo.imageUri = filePath
+  compressedImageInfo.imageByteLength = compressedImageData.byteLength
+
+  return compressedImageInfo
+}
+
 export const compressImage: typeof Taro.compressImage = function (options) {
   return new Promise((resolve, reject) => {
-    try {
-      validateParams('compressImage', options, compressImageSchema)
-    } catch (error) {
-      const res = { errMsg: error.message }
-      return callAsyncFail(reject, res, options)
-    }
-    const { src, quality = 80 } = options
+    requestPermissions(IMAGE_PERMISSION).then(() => {
+      try {
+        validateParams('compressImage', options, compressImageSchema)
+      } catch (error) {
+        const res = { errMsg: error.message }
+        return callAsyncFail(reject, res, options)
+      }
+      const { src, quality = 80, compressedWidth, compressedHeight } = options
+      const srcAfterCompress = src.includes('_after_compress') ? src : src.split('.').join('_after_compress.')
+      const file = fs.openSync(src, fs.OpenMode.READ_ONLY)
 
-    const source = image.createImageSource(src)
-    if (isNull(source)) {
-      const createImageSourceError = { errMsg: 'compressImage fail: createImageSource has failed.' }
-      callAsyncFail(reject, createImageSourceError, options)
-      return
-    }
+      // const stat = fs.statSync(file.fd)
+      // console.log('[Taro] 压缩前图片的大小为：', stat.size)
 
-    const packer = image.createImagePacker(src)
-    if (isNull(packer)) {
-      const createImagePackerError = { errMsg: 'compressImage fail: createImagePacker has failed.' }
-      callAsyncFail(reject, createImagePackerError, options)
-    }
+      const source = image.createImageSource(file.fd)
+      if (isNull(source)) {
+        const createImageSourceError = { errMsg: 'compressImage fail: createImageSource has failed.' }
+        callAsyncFail(reject, createImageSourceError, options)
+        return
+      }
 
-    const packingOptionsOHOS: IPackingOptionOHOS = {
-      // TODO：需要获取文件名后缀
-      format: 'image/jpeg',
-      quality: quality
-    }
-    packer.packing(source, packingOptionsOHOS).then((value) => {
-      callAsyncSuccess(resolve, value, options)
-    }).catch((error) => {
-      callAsyncFail(reject, error, options)
+      const width = source.getImageInfoSync().size.width
+      const height = source.getImageInfoSync().size.height
+      let wantWidth = compressedWidth || compressedHeight || 0
+      let wantHeight = compressedHeight || compressedWidth || 0
+
+      if (width > wantWidth || height > wantHeight) {
+        const heightRatio = height / wantHeight
+        const widthRatio = width / wantWidth
+        const finalRatio = heightRatio < widthRatio ? heightRatio : widthRatio
+
+        wantWidth = Math.round(width / finalRatio)
+        wantHeight = Math.round(height / finalRatio)
+      }
+
+      const decodingOptions = {
+        editable: true,
+        desiredPixelFormat: image.PixelMapFormat.RGBA_8888,
+        desiredSize: { width: wantWidth, height: wantHeight }
+      }
+      source.createPixelMap(decodingOptions, (error, pixelMap) => {
+        if (error !== undefined) {
+          fs.closeSync(file)
+          const res = { errMsg: error }
+          callAsyncFail(reject, res, options)
+        } else {
+          const packer = image.createImagePacker(file.fd)
+          if (isNull(packer)) {
+            fs.closeSync(file)
+            const createImagePackerError = { errMsg: 'compressImage fail: createImagePacker has failed.' }
+            callAsyncFail(reject, createImagePackerError, options)
+            return
+          }
+
+          const isPNG = src.endsWith('.png')
+          const packingOptionsOHOS: IPackingOptionOHOS = {
+            format: isPNG ? 'image/png' : 'image/jpeg',
+            quality: quality
+          }
+          packer.packing(pixelMap, packingOptionsOHOS).then((value) => {
+            fs.closeSync(file)
+            saveImage(value, srcAfterCompress).then(result => {
+              callAsyncSuccess(resolve, { tempFilePath: result.imageUri }, options)
+            })
+          }).catch((error) => {
+            fs.closeSync(file)
+            callAsyncFail(reject, error, options)
+          })
+        }
+      })
+    }, (error: string) => {
+      const res = { errMsg: error }
+      return callAsyncFail(reject, res, options)
     })
   })
 }
 
 export const chooseImage: typeof Taro.chooseImage = function (options) {
   return new Promise((resolve, reject) => {
-    try {
-      validateParams('chooseImage', options, chooseImageSchema)
-    } catch (error) {
-      const res = { errMsg: error.message }
-      return callAsyncFail(reject, res, options)
-    }
+    requestPermissions(IMAGE_PERMISSION).then(() => {
+      try {
+        validateParams('chooseImage', options, chooseImageSchema)
+      } catch (error) {
+        const res = { errMsg: error.message }
+        return callAsyncFail(reject, res, options)
+      }
 
-    const { count = 9 } = options
-    const photoViewPicker = new picker.PhotoViewPicker()
+      const { count = 9 } = options
+      const photoViewPicker = new picker.PhotoViewPicker()
+      let sizeType = options.sizeType
 
-    photoSelectOptions.maxSelectNumber = count // 选择媒体文件的最大数目
-    photoSelectOptions.MIMEType = picker.PhotoViewMIMETypes.IMAGE_TYPE // 过滤选择媒体文件类型为IMAGE
+      if (!sizeType || !sizeType.length) {
+        sizeType = ['compressed', 'original']
+      }
 
-    photoViewPicker.select(photoSelectOptions).then((photoSelectResult) => {
-      callAsyncSuccess(resolve, { tempFilePaths: photoSelectResult.photoUris }, options)
-    }).catch((error) => {
-      callAsyncFail(reject, error, options)
+      photoSelectOptions.maxSelectNumber = count // 选择媒体文件的最大数目
+      photoSelectOptions.MIMEType = picker.PhotoViewMIMETypes.IMAGE_TYPE // 过滤选择媒体文件类型为IMAGE
+
+      photoViewPicker.select(photoSelectOptions).then((photoSelectResult) => {
+        const result: IChooseImageData = {}
+        const isOrigin = photoSelectResult.isOriginalPhoto
+
+        if (isOrigin) {
+          const tempFilePaths: string[] = []
+          const tempFiles = photoSelectResult.photoUris.map(uri => {
+            const file = fs.openSync(uri, fs.OpenMode.READ_ONLY)
+            const stat = fs.statSync(file.fd)
+            const size = stat.size
+
+            fs.closeSync(file)
+            tempFilePaths.push(uri)
+
+            return {
+              size,
+              path: uri,
+            }
+          })
+
+          result.tempFiles = tempFiles
+          result.tempFilePaths = tempFilePaths
+
+          callAsyncSuccess(resolve, result, options)
+        } else {
+          const actions: Promise<string>[] = photoSelectResult.photoUris.map(uri => {
+            return new Promise<string>(resolve => {
+              compressImage({
+                src: uri,
+                compressedWidth: getSystemInfoSync().screenWidth / 2,
+                compressedHeight: getSystemInfoSync().screenHeight / 2,
+                success: (compressResult) => {
+                  resolve(compressResult.tempFilePath)
+                }
+              })
+            })
+          })
+
+          Promise.all(actions).then(tempFilePaths => {
+            const tempFiles = tempFilePaths.map(uri => {
+              const file = fs.openSync(uri, fs.OpenMode.READ_ONLY)
+              const stat = fs.statSync(file.fd)
+              const size: number = stat.size
+
+              fs.closeSync(file)
+
+              return {
+                size,
+                path: uri,
+              }
+            })
+
+            result.tempFilePaths = tempFilePaths
+            result.tempFiles = tempFiles
+
+            callAsyncSuccess(resolve, result, options)
+          }).catch(error => {
+            const res = { errMsg: error }
+            return callAsyncFail(reject, res, options)
+          })
+        }
+      }).catch((error) => {
+        callAsyncFail(reject, error, options)
+      })
+    }, (error: string) => {
+      const res = { errMsg: error }
+      return callAsyncFail(reject, res, options)
     })
   })
 }

package/dist/apis/utils/index.ts

@@ -1,4 +1,5 @@
-import { eventCenter } from '@tarojs/runtime/dist/runtime.esm'
+import abilityAccessCtrl from '@ohos.abilityAccessCtrl'
+import { Current, eventCenter } from '@tarojs/runtime'
 
 import { ICallbackResult, MethodHandler } from './handler'
 
@@ -8,6 +9,22 @@ export * from './validate'
 export { MethodHandler }
 export { noop } from '@tarojs/shared'
 
+export function requestPermissions (permissions: string[]) {
+  return new Promise<void>((resolve, reject) => {
+    const context = getContext(Current?.page)
+    const atManager = abilityAccessCtrl.createAtManager()
+
+    atManager.requestPermissionsFromUser(context, permissions, (err, _) => {
+      if (err) {
+        // eslint-disable-next-line prefer-promise-reject-errors
+        reject(`[Taro] 请求用户授权 ${permissions.join('、')} 失败：${JSON.stringify(err)}`)
+      } else {
+        resolve()
+      }
+    })
+  })
+}
+
 export function object2String (obj) {
   let str = ''
   for (const item in obj) {

package/dist/apis/utils/permissions.ts

@@ -0,0 +1,6 @@
+export const READ_IMAGEVIDEO_PERMISSIONS = 'ohos.permission.READ_IMAGEVIDEO'
+export const READ_MEDIA_PERMISSIONS = 'ohos.permission.READ_MEDIA'
+export const WRITE_MEDIA_PERMISSIONS = 'ohos.permission.WRITE_MEDIA'
+export const MEDIA_LOCATION_PERMISSIONS = 'ohos.permission.MEDIA_LOCATION'
+
+export const IMAGE_PERMISSION = [READ_IMAGEVIDEO_PERMISSIONS, READ_MEDIA_PERMISSIONS, WRITE_MEDIA_PERMISSIONS, MEDIA_LOCATION_PERMISSIONS]

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

@@ -222,6 +222,7 @@ export function setSpecialTextAttributeIntoInstance(instance: TextAttribute, sty
   }
   if (!isUndefined(style.WebkitLineClamp)) {
     instance.maxLines(style.WebkitLineClamp)
+    instance.textOverflow({overflow: TextOverflow.Ellipsis})
   }
   if (!isUndefined(style.letterSpacing)) {
     instance.letterSpacing(style.letterSpacing)
@@ -368,16 +369,20 @@ export function setNormalAttributeIntoInstance(instance: CommonAttribute, style:
   }
   if (style.position === 'absolute' || style.position === 'fixed') {
     instance.position({
-      x: style.left || 0,
-      y: style.top || 0,
+      left: style.left,
+      top: style.top,
+      right: style.right,
+      bottom: style.bottom,
     })
     // 绝对定位和固定定位在web上都会脱离文档流，因此需要设置zIndex让它相比正常流的元素更上层
     instance.zIndex(1)
   }
   if (style.position === 'relative') {
     instance.offset({
-      x: style.left || 0,
-      y: style.top || 0,
+      left: style.left,
+      top: style.top,
+      right: style.right,
+      bottom: style.bottom,
     })
     // 绝对定位和固定定位在web上都会脱离文档流，因此需要设置zIndex让它相比正常流的元素更上层
     instance.zIndex(1)

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

@@ -89,6 +89,8 @@ export function isMaxWidthView (node: TaroElement) {
 }
 
 export function getNormalAttributes (node: TaroElement, initStyle?: HarmonyStyle): HarmonyStyle {
+  if (!node) return {}
+   
   const hmStyle = node.hmStyle
   
   if (!hmStyle) return {}

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

@@ -34,7 +34,26 @@ export class TaroElement<
     layer: 0 // 渲染层级
   }
 
-  public hm_instance: TaroAny
+  public _hm_instance: TaroAny
+  public weak_hm_instance: WeakRef<TaroAny>
+  public use_weak_hm_instance: boolean = true
+
+
+  public get hm_instance(): TaroAny {
+    if (this.use_weak_hm_instance && this.weak_hm_instance) {
+      return this.weak_hm_instance?.deref()
+    }
+    return this._hm_instance
+  }
+
+  public set hm_instance(instance) {
+    if (this.use_weak_hm_instance && instance) {
+      this.weak_hm_instance = new WeakRef(instance)
+      return
+    }
+    this._hm_instance = instance
+  }
+
 
   public get _instance () {
     return this.hm_instance

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

@@ -594,9 +594,9 @@ function setBackgroundPosistion (hmStyle, value) {
     } else if (horizontal === 'right' && vertical === 'bottom') {
       hmStyle.backgroundPosition = Alignment.BottomEnd
     } else {
-      if (/^\d+(\.\d+)?(px|%|vw|vh)$/.test(horizontal)) {
+      if (/^-?\d+(\.\d+)?(px|%|vw|vh)$/.test(horizontal)) {
         hmStyle.backgroundPosition = { x: getUnit(horizontal) }
-        if (/^\d+(\.\d+)?(px|%|vw|vh)$/.test(vertical)) {
+        if (/^-?\d+(\.\d+)?(px|%|vw|vh)$/.test(vertical)) {
           hmStyle.backgroundPosition = { x: getUnit(horizontal), y: getUnit(vertical) }
         }
       }

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

@@ -38,10 +38,10 @@ export interface TaroStyleType {
 
   // position
   position?: 'relative' | 'absolute' | 'fixed'
-  top?: Length
-  left?: Length
-  bottom?: Length
-  right?: Length
+  top?: Dimension
+  left?: Dimension
+  bottom?: Dimension
+  right?: Dimension
 
   // flex
   flexBasis?: number | string

package/dist/runtime-framework/react/native-page.ts

@@ -133,27 +133,33 @@ function initNativeComponentEntry (params: InitNativeComponentEntryParams) {
           },
         }),
       }
-      this.setState(
-        {
-          components: [...this.state.components, item],
-        },
-        () => cb && cb()
-      )
+
+      ReactDOM.flushSync(() => {
+        this.setState(
+          {
+            components: [...this.state.components, item],
+          },
+          () => cb && cb()
+        )
+      })
     }
 
     unmount (compId, cb?) {
       const components = this.state.components
       const index = components.findIndex((item) => item.compId === compId)
       const next = [...components.slice(0, index), ...components.slice(index + 1)]
-      this.setState(
-        {
-          components: next,
-        },
-        () => {
-          removePageInstance(compId)
-          cb && cb()
-        }
-      )
+
+      ReactDOM.flushSync(() => {
+        this.setState(
+          {
+            components: next,
+          },
+          () => {
+            removePageInstance(compId)
+            cb && cb()
+          }
+        )
+      })
     }
 
     render () {
@@ -175,7 +181,10 @@ function initNativeComponentEntry (params: InitNativeComponentEntryParams) {
   }
 
   const root = ReactDOM.createRoot(app)
-  root.render?.(h(Entry))
+
+  ReactDOM.flushSync(() => {
+    root.render?.(h(Entry))
+  })
 }