@tarojs/plugin-platform-harmony-cpp 4.1.0 → 4.1.1-alpha.0

package/dist/runtime/runtime-cpp/dom/element/canvas.ts

@@ -0,0 +1,285 @@
+import { TaroNativeModule } from '../../harmony-library'
+import { TaroElement } from './element'
+
+import type { CanvasProps, CanvasTouchEvent } from '@tarojs/components/types'
+import type Taro from '@tarojs/taro/types'
+
+export class CanvasRenderingContext2DWXAdapter extends CanvasRenderingContext2D {
+  // constructor(settings?: RenderingContextSetting) {
+  //   super(settings)
+  // }
+
+  createCircularGradient() {
+    // Not supported now
+  }
+
+  draw(cb?: (...args: any[]) => any) {
+    typeof cb === 'function' && cb()
+    // Not supported now
+  }
+
+  setFillStyle(fillStyle: typeof this.fillStyle) {
+    this.fillStyle = fillStyle
+  }
+
+  setFontSize(fontSize: number) {
+    const font = this.font.split(' ')
+    font[2] = `${fontSize}`
+    this.font = font.join(' ')
+  }
+
+  setGlobalAlpha(globalAlpha: typeof this.globalAlpha) {
+    this.globalAlpha = globalAlpha
+  }
+
+  setLineCap(lineCap: typeof this.lineCap) {
+    this.lineCap = lineCap
+  }
+
+  setLineJoin(lineJoin: typeof this.lineJoin) {
+    this.lineJoin = lineJoin
+  }
+
+  setLineWidth(lineWidth: typeof this.lineWidth) {
+    this.lineWidth = lineWidth
+  }
+
+  setMiterLimit(miterLimit: typeof this.miterLimit) {
+    this.miterLimit = miterLimit
+  }
+
+  setShadow(offsetX: number, offsetY: number, blur: number, color: string) {
+    this.shadowOffsetX = offsetX
+    this.shadowOffsetY = offsetY
+    this.shadowBlur = blur
+    this.shadowColor = color
+  }
+
+  setStrokeStyle(strokeStyle: typeof this.strokeStyle) {
+    this.strokeStyle = strokeStyle
+  }
+
+  setTextAlign(textAlign: typeof this.textAlign) {
+    this.textAlign = textAlign
+  }
+
+  setTextBaseline(textBaseline: typeof this.textBaseline) {
+    this.textBaseline = textBaseline
+  }
+}
+
+class TaroCanvasContext {
+  type = '2d'
+  element: TaroCanvasElement
+
+  private font_ = ''
+
+  setStrokeStyle(color: string): void {
+    TaroNativeModule.executeNodeFunc(this.element, 'setStrokeStyle', color)
+  }
+
+  setLineWidth(lineWidth: number): void {
+    TaroNativeModule.executeNodeFunc(this.element, 'setLineWidth', lineWidth)
+  }
+
+  rect(x: number, y: number, width: number, height: number): void {
+    TaroNativeModule.executeNodeFunc(this.element, 'rect', [x, y, width, height])
+  }
+
+  draw(): Promise<void> {
+    return new Promise(resolve => {
+      TaroNativeModule.executeNodeFunc(this.element, 'drawAble', () => {
+        TaroNativeModule.executeNodeFunc(this.element, 'draw')
+        resolve()
+      })
+    })
+  }
+
+  stroke(): void {
+    TaroNativeModule.executeNodeFunc(this.element, 'stroke')
+  }
+
+  moveTo(x: number, y: number): void {
+    TaroNativeModule.executeNodeFunc(this.element, 'moveTo', [x, y])
+  }
+
+  arc(x: number, y: number, r: number, sAngle: number, eAngle: number, counterclockwise = false): void {
+    TaroNativeModule.executeNodeFunc(this.element, 'arc', [x, y, r, sAngle, eAngle, counterclockwise])
+  }
+
+  lineTo(x: number, y: number): void {
+    TaroNativeModule.executeNodeFunc(this.element, 'lineTo', [x, y])
+  }
+
+  setFontSize(fontSize: number): void {
+    TaroNativeModule.executeNodeFunc(this.element, 'setFontSize', fontSize)
+  }
+
+  setTextAlign(textAlign: string): void {
+    TaroNativeModule.executeNodeFunc(this.element, 'setTextAlign', textAlign)
+  }
+
+  fillText(text: string, x: number, y: number): void {
+    TaroNativeModule.executeNodeFunc(this.element, 'fillText', [text, x, y])
+  }
+
+  fillRect(x: number, y: number, width: number, height: number): void {
+    TaroNativeModule.executeNodeFunc(this.element, 'fillRect', [x, y, width, height])
+  }
+
+  strokeRect(x: number, y: number, width: number, height: number): void {
+    TaroNativeModule.executeNodeFunc(this.element, 'strokeRect', [x, y, width, height])
+  }
+
+  fill(): void {
+    TaroNativeModule.executeNodeFunc(this.element, 'fill')
+  }
+
+  setFillStyle(color: string): void {
+    TaroNativeModule.executeNodeFunc(this.element, 'setFillStyle', color)
+  }
+
+  beginPath(): void {
+    TaroNativeModule.executeNodeFunc(this.element, 'beginPath')
+  }
+
+  closePath(): void {
+    TaroNativeModule.executeNodeFunc(this.element, 'closePath')
+  }
+
+  translate(x: number, y: number): void {
+    TaroNativeModule.executeNodeFunc(this.element, 'translate', [x, y])
+  }
+
+  rotate(rotate: number): void {
+    TaroNativeModule.executeNodeFunc(this.element, 'rotate', rotate)
+  }
+
+  scale(scaleWidth: number, scaleHeight: number): void {
+    TaroNativeModule.executeNodeFunc(this.element, 'scale', [scaleWidth, scaleHeight])
+  }
+
+  get font () {
+    return this.font_
+  }
+
+  set font(value: string) {
+    this.font_ = value
+    TaroNativeModule.executeNodeFunc(this.element, 'font', this.font_)
+  }
+
+  measureText(text: string): { width: number } {
+    return {
+      width: TaroNativeModule.executeNodeFunc(this.element, 'measure', text)
+    }
+  }
+
+  drawImage(...args): { width: number } {
+    // 解构参数
+    const [imageResource, ...rest] = args
+    let src = imageResource
+    if (imageResource instanceof TaroCanvasImage) {
+      src = imageResource.src
+    }
+    switch (rest.length) {
+      case 2: {
+        const [dx, dy] = rest
+        return this.drawSimple(src, dx, dy)
+      }
+      case 3:
+      case 4: {
+        const [dx2, dy2, dWidth, dHeight] = rest
+        return this.drawWithSize(src, dx2, dy2, dWidth, dHeight)
+      }
+      case 8: {
+        const [sx, sy, sWidth, sHeight, dx3, dy3, dWidth2, dHeight2] = rest
+        return this.drawWithCrop(src, sx, sy, sWidth, sHeight, dx3, dy3, dWidth2, dHeight2)
+      }
+      default:
+        throw new Error('Invalid number of arguments')
+    }
+  }
+
+  private drawSimple(src, dx, dy) {
+    return {
+      width: TaroNativeModule.executeNodeFunc(this.element, 'drawImage', {
+        src, dx, dy
+      })
+    }
+  }
+
+  private drawWithSize(src, dx, dy, dWidth, dHeight) {
+    return {
+      width: TaroNativeModule.executeNodeFunc(this.element, 'drawImage', {
+        src, dx, dy, dWidth, dHeight
+      })
+    }
+  }
+
+  private drawWithCrop(src, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight) {
+    return {
+      width: TaroNativeModule.executeNodeFunc(this.element, 'drawImage', {
+        src, dx, dy, dWidth, dHeight, sx, sy, sWidth, sHeight
+      })
+    }
+  }
+
+  reset(): void {
+    TaroNativeModule.executeNodeFunc(this.element, 'reset')
+  }
+}
+
+class TaroCanvasImage {
+  width: number
+  height: number
+  onload: () => void
+  onerror: () => void
+
+  private _src = ''
+
+  get src () {
+    return this._src
+  }
+
+  set src (val: string) {
+    this._src = val
+
+    TaroNativeModule.loadImage(val, (width, height) => {
+      this.width = width
+      this.height = height
+      if (typeof this.onload === 'function') {
+        this.onload()
+      }
+    }, () => {
+      if (typeof this.onerror === 'function') {
+        this.onerror()
+      }
+    })
+  }
+}
+
+export class TaroCanvasElement extends TaroElement<CanvasProps, CanvasTouchEvent> {
+  constructor() {
+    super('Canvas')
+  }
+
+  getContext(_type = '2d') {
+    const canvasContext = new TaroCanvasContext()
+    canvasContext.element = this
+    return canvasContext
+  }
+
+  createImage() {
+    return new TaroCanvasImage()
+  }
+
+  toDataURL(type: string): string {
+    return this.exportDataUrl({
+      fileType: type as unknown as keyof Taro.canvasToTempFilePath.FileType
+    })
+  }
+
+  exportDataUrl(opts: Taro.canvasToTempFilePath.Option): string {
+    return TaroNativeModule.executeNodeFunc(this, 'toDataUrl', opts)
+  }
+}

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

@@ -0,0 +1,262 @@
+import { ATTRIBUTES_CALLBACK_TRIGGER_MAP } from '../../constant'
+import { Current } from '../../current'
+import { eventCenter } from '../../emitter/emitter'
+import { TaroNativeModule } from '../../harmony-library'
+import { initComponentNodeInfo, printInfo, runInDebug, triggerAttributesCallback } from '../../utils/info'
+import { ClassList } from '../class-list'
+import { TaroDataSourceElement } from '../dataSource'
+import { NodeType } from '../node'
+import { Style } from '../style'
+import StyleSheet from '../stylesheet'
+
+import type { BaseTouchEvent, ITouchEvent, StandardProps } from '@tarojs/components/types'
+import type { TaroAny } from '../../interface'
+
+type NamedNodeMap = { name: string, value: string }[]
+
+export interface TaroExtraProps {
+  compileMode?: string | boolean
+  compileIf?: boolean
+  disabled?: boolean
+}
+
+export class TaroElement<
+  T extends StandardProps<any, U> = StandardProps,
+  U extends BaseTouchEvent<any> = ITouchEvent
+> extends TaroDataSourceElement {
+  public _innerHTML = ''
+  public _nodeInfo: TaroAny = {
+    layer: 0 // 渲染层级
+  }
+
+  isETS = false
+
+  public hm_instance: TaroAny
+
+  public get _instance () {
+    return this.hm_instance
+  }
+
+  public set _instance (value) {
+    this.hm_instance = value
+    if (this._nodeInfo.aboutToAppear) {
+      let task
+      // eslint-disable-next-line no-cond-assign
+      while (task = this._nodeInfo.aboutToAppear.shift()) {
+        task()
+      }
+    }
+  }
+
+  public readonly tagName: string
+  public _attrs: T & TaroExtraProps = {} as T
+
+  constructor(tagName: string) {
+    super(tagName.replace(new RegExp('(?<=.)([A-Z])', 'g'), '-$1').toUpperCase(), NodeType.ELEMENT_NODE)
+    this.tagName = this.nodeName
+    this.style = new Style(this)
+    initComponentNodeInfo(this)
+
+    TaroNativeModule.createTaroNode(this)
+  }
+
+  public set id(value: string) {
+    this.setAttribute('id', value)
+  }
+
+  public get id(): string {
+    return this.getAttribute('id')
+  }
+
+  public get uid(): string {
+    return this.getAttribute('uid')
+  }
+
+  public set className(value: string) {
+    this.setAttribute('class', value)
+  }
+
+  public get className(): string {
+    return this.getAttribute('class') || ''
+  }
+
+  public get classList(): ClassList {
+    return new ClassList(this)
+  }
+
+  public get attributes(): NamedNodeMap {
+    const list: NamedNodeMap = []
+
+    // FIXME
+    Object.keys(this._attrs).forEach((name) => {
+      const value: TaroAny = this._attrs[name]
+
+      list.push({ name, value })
+    })
+
+    return list
+  }
+
+  public get children(): TaroElement[] {
+    return TaroNativeModule.getTaroNodeProperty(this, 'children')
+  }
+
+  public get dataset(): Record<string, unknown> {
+    return TaroNativeModule.getTaroNodeProperty(this, 'dataset') || {}
+  }
+
+  public setAttribute(name: string, value: TaroAny): void {
+    this._attrs[name] = value
+
+    // 混合开发的组件没办法自动更新，需要把父级的结点删掉新建
+    // Current.nativeComponentNames会在render.ets中赋值
+    if (Current.nativeComponentNames?.includes(this.tagName)) {
+      const idxOfRef = (this.parentNode as TaroDataSourceElement)?.findIndex(this)
+
+      if (idxOfRef !== undefined) {
+        this._nativeUpdateTrigger++
+        if (this.isETS) {
+          (this.parentNode as TaroDataSourceElement)?.notifyDataChange?.(idxOfRef)
+        }
+      }
+    }
+
+    if (['PAGE-META', 'NAVIGATION-BAR'].includes(this.tagName)) {
+      // FIXME 等 Harmony 支持更细粒度的 @Watch 方法后移出
+      eventCenter.trigger('__taroComponentAttributeUpdate', {
+        id: this._nid,
+        tagName: this.tagName,
+        attribute: name,
+        value
+      })
+    } else {
+      const attributeTriggerValue: TaroAny = ATTRIBUTES_CALLBACK_TRIGGER_MAP[name]
+      if (attributeTriggerValue) {
+        const triggerName: TaroAny = attributeTriggerValue.triggerName
+        const valueInspect: TaroAny = attributeTriggerValue.valueInspect
+
+        if (valueInspect && !valueInspect(value)) return
+
+        runInDebug(() => {
+          printInfo('setAttribute', this._nid, this.parentNode?.nodeName, this.nodeName, triggerName, this._attrs[triggerName])
+        })
+        TaroNativeModule.setTaroNodeAttribute(this, triggerName, this._attrs[triggerName])
+        triggerAttributesCallback(this, triggerName)
+      } else {
+        runInDebug(() => {
+          printInfo('setAttribute', this._nid, this.parentNode?.nodeName, this.nodeName, name, value ?? null)
+        })
+        TaroNativeModule.setTaroNodeAttribute(this, name, value ?? null)
+      }
+    }
+  }
+
+  public getAttribute(name: string): any {
+    return TaroNativeModule.getTaroNodeAttribute(this, name)
+  }
+
+  public removeAttribute(name: string): void {
+    this._attrs[name] = null
+    TaroNativeModule.removeTaroNodeAttribute(this, name)
+  }
+
+  public hasAttribute(name: string): boolean {
+    return TaroNativeModule.hasTaroNodeAttribute(this, name)
+  }
+
+  public hasAttributes(): boolean {
+    return TaroNativeModule.hasTaroNodeAttributes(this)
+  }
+
+  public set innerHTML(value: string) {
+    if (this.nodeType === NodeType.ELEMENT_NODE && this.ownerDocument) {
+      const ele = this.ownerDocument.createElement('inner-html')
+      ele._innerHTML = value
+      this.appendChild(ele as TaroAny)
+    }
+  }
+
+  public get innerHTML(): string {
+    return this._innerHTML
+  }
+
+  // 存放的样式，获取其实跟获取style是一样的，只不过这里取的更快捷，不需要走style的get方法进到cssStyleDeclaration
+  public _st: TaroAny = new StyleSheet()
+
+  // 经转换后的鸿蒙样式
+  public get hmStyle(): TaroAny {
+    return this._st.hmStyle
+  }
+
+  public style: Style | null = null
+
+  // 设置动画
+  public setAnimation (playing) {
+    if (!this._instance) {
+      if (!this._nodeInfo.aboutToAppear) {
+        this._nodeInfo.aboutToAppear = []
+      }
+      this._nodeInfo.aboutToAppear.push(() => {
+        this.setAnimation(playing)
+      })
+      return
+    }
+
+    const keyframes = this._st.hmStyle.animationName
+
+    // 防止动画闪烁，需要把第一帧的内容先设置上去设置初始样式
+    if (playing && keyframes && keyframes[0] && keyframes[0].percentage === 0) {
+      this._instance.overwriteStyle = keyframes[0].event
+    }
+
+    // 首次设置，不用实例替换
+    if (!this._nodeInfo.hasAnimation && playing) {
+      this._nodeInfo.hasAnimation = true
+      // 下一帧播放，等节点样式首次设置上去在进行覆盖
+      setTimeout(() => {
+        if (playing) {
+          this.playAnimation()
+        }
+      }, 0)
+    } else if (this.parentNode) {
+      const idx = (this.parentNode as TaroDataSourceElement).findIndex(this)
+      ;(this.parentNode as TaroDataSourceElement).notifyDataDelete(idx)
+
+      // 下一帧播放，等实例被移除掉，再重新插入
+      setTimeout(() => {
+        // insert
+        (this.parentNode as TaroDataSourceElement)?.notifyDataAdd(idx)
+
+        // 执行动画
+        if (playing) {
+          this.playAnimation()
+        }
+      }, playing ? 0 : 100)
+    }
+  }
+
+  private playAnimation () {
+    const {
+      animationDuration = 0, animationDelay = 0, animationIterationCount = 1, animationName: keyframes,
+      animationTimingFunction
+    } = this._st.hmStyle
+
+    if (keyframes) {
+      let cur_percentage = 0
+      this._instance.getUIContext()?.keyframeAnimateTo({
+        delay: animationDelay,
+        iterations: animationIterationCount,
+      }, keyframes.map(item => {
+        const duration = (item.percentage - cur_percentage) * animationDuration
+        cur_percentage = item.percentage
+        return {
+          duration: duration,
+          curve: item.event.animationTimingFunction || animationTimingFunction,
+          event: () => {
+            this._instance.overwriteStyle = item.event
+          }
+        }
+      }))
+    }
+  }
+}