@hxa-rn/react-native-gcanvas 6.0.24-beta.1 → 6.0.26

package/harmony/gcanvas/src/main/ets/GCanvasNativeEngine.ts

@@ -1,206 +1,206 @@
-import hilog from '@ohos.hilog';
-import nativeModule from 'libgcanvas.so';
-
-const TAG = 'GCanvasNativeEngine';
-const DOMAIN = 0x0001;
-
-/**
- * GCanvas 原生引擎的 ArkTS 门面（单例）。
- *
- * 所有 GCanvasModuleTurboModule 的同步/绘制方法都经此转发到 C++ 原生引擎
- * （libgcanvas.so，由 NAPI 暴露），由 C++ 内部独立 GL 线程执行命令。
- *
- * 该门面职责单一：
- *  1. 维护 nativeModule 单例（懒加载，避免 HAR 加载期即初始化 .so）；
- *  2. 将 ArkTS 参数透传给 C++，统一日志与异常隔离（不向 TurboModule 抛异常）。
- *
- * 真正的 OpenGL ES / EGL / XComponent / 字体 / 命令解析逻辑全部在 C++ 侧（复用 core/src）。
- */
-export class GCanvasNativeEngine {
-  private static instance: GCanvasNativeEngine;
-  private native: GCanvasNativeAPI | null = null;
-
-  private constructor() {
-  }
-
-  public static getInstance(): GCanvasNativeEngine {
-    if (!GCanvasNativeEngine.instance) {
-      GCanvasNativeEngine.instance = new GCanvasNativeEngine();
-    }
-    return GCanvasNativeEngine.instance;
-  }
-
-  private api(): GCanvasNativeAPI {
-    if (this.native === null) {
-      const loaded = nativeModule as GCanvasNativeAPI;
-      if (typeof loaded.enable !== 'function' || typeof loaded.render !== 'function' ||
-        typeof loaded.extendCallNative !== 'function') {
-        throw new Error('libgcanvas.so is missing enable/render/extendCallNative');
-      }
-      this.native = loaded;
-    }
-    return this.native;
-  }
-
-  /** 注册 XComponent 与 GL 表面（由 Fabric 组件创建后调用，绑定 componentId↔window）。 */
-  public bindSurface(componentId: string, window: number, width: number, height: number): void {
-    this.api().bindSurface(componentId, window, width, height);
-  }
-
-  /** surface 尺寸变化。 */
-  public surfaceChanged(componentId: string, width: number, height: number): void {
-    this.api().surfaceChanged(componentId, width, height);
-  }
-
-  /** surface 销毁。 */
-  public surfaceDestroyed(componentId: string): void {
-    this.api().surfaceDestroyed(componentId);
-  }
-
-  /** Apply native-only view options that are not part of the JS command protocol. */
-  public configureView(componentId: string, enableFboMsaa: boolean): void {
-    this.api().configureView(componentId, enableFboMsaa);
-  }
-
-  /** 启用画布（同步）。config 同 Android enable() 的 configArray。 */
-  public enable(componentId: string, config: number[]): void {
-    this.api().enable(componentId, config);
-  }
-
-  /** 禁用画布。 */
-  public disable(refId: string): void {
-    this.api().disable(refId);
-  }
-
-  /** 异步执行命令字符串（投递到 GL 线程后立即返回）。 */
-  public render(canvasId: string, cmd: string, type: number): void {
-    this.api().render(canvasId, cmd, type);
-  }
-
-  /** 同步执行命令字符串并返回结果（GL 线程阻塞等待）。 */
-  public extendCallNative(contextId: string, args: string, type: number): string {
-    return this.api().extendCallNative(contextId, args, type);
-  }
-
-  /** 设置上下文类型：0=2d, 1=webgl。 */
-  public setContextType(contextType: number, refId: string): void {
-    this.api().setContextType(contextType, refId);
-  }
-
-  public setDevicePixelRatio(refId: string, ratio: number): void {
-    this.api().setDevicePixelRatio(refId, ratio);
-  }
-
-  public resetGlViewport(refId: string): void {
-    this.api().resetGlViewport(refId);
-  }
-
-  /** 同步导出画布为 data URL。 */
-  public toDataURL(refId: string, mimeType: string, quality: number): string {
-    return this.api().toDataURL(refId, mimeType, quality);
-  }
-
-  public drawCanvas2Canvas(map: DrawCanvas2CanvasMap): void {
-    this.api().drawCanvas2Canvas(map);
-  }
-
-  /** 绑定已解码的 RGBA 像素到纹理。 */
-  public bindImageTexture(refId: string, imageId: number, pixels: ArrayBuffer,
-    width: number, height: number): void {
-    this.api().bindImageTexture(refId, imageId, pixels, width, height);
-  }
-
-  /** Rebind a preloaded native image without decoding it a second time. */
-  public bindCachedImageTexture(refId: string, imageId: number): boolean {
-    return this.api().bindCachedImageTexture(refId, imageId);
-  }
-
-  /** 缓存解码后的图片，供后续纹理上传复用。 */
-  public cacheImage(id: number, pixels: ArrayBuffer, width: number, height: number): void {
-    this.api().cacheImage(id, pixels, width, height);
-  }
-
-  public getDeviceInfo(args: string): string {
-    return this.api().getDeviceInfo(args);
-  }
-
-  public addFontFamily(fontNames: string[], fontFiles: string[]): void {
-    this.api().addFontFamily(fontNames, fontFiles);
-  }
-
-  public getFontNames(): string[] {
-    return this.api().getFontNames();
-  }
-
-  public setExtraFontLocation(location: string): void {
-    this.api().setExtraFontLocation(location);
-  }
-
-  public setLogLevel(level: number): void {
-    this.api().setLogLevel(level);
-  }
-
-  public resetComponent(refId: string): void {
-    this.api().resetComponent(refId);
-  }
-
-  public texImage2D(refId: string, target: number, level: number, internalformat: number,
-    format: number, type: number, pixels: ArrayBuffer, width: number, height: number): void {
-    this.api().texImage2D(refId, target, level, internalformat, format, type, pixels, width, height);
-  }
-
-  public texSubImage2D(refId: string, target: number, level: number, xoffset: number, yoffset: number,
-    format: number, type: number, pixels: ArrayBuffer, width: number, height: number): void {
-    this.api().texSubImage2D(refId, target, level, xoffset, yoffset, format, type, pixels, width, height);
-  }
-}
-
-/**
- * C++ 原生引擎（libgcanvas.so）经 NAPI 暴露的接口契约。
- * C++ 侧（GCanvasNapi.cpp）须实现下列全部方法。
- */
-interface GCanvasNativeAPI {
-  bindSurface(componentId: string, window: number, width: number, height: number): void;
-  surfaceChanged(componentId: string, width: number, height: number): void;
-  surfaceDestroyed(componentId: string): void;
-  configureView(componentId: string, enableFboMsaa: boolean): void;
-  enable(componentId: string, config: number[]): void;
-  disable(refId: string): void;
-  render(canvasId: string, cmd: string, type: number): void;
-  extendCallNative(contextId: string, args: string, type: number): string;
-  setContextType(contextType: number, refId: string): void;
-  setDevicePixelRatio(refId: string, ratio: number): void;
-  resetGlViewport(refId: string): void;
-  toDataURL(refId: string, mimeType: string, quality: number): string;
-  drawCanvas2Canvas(map: DrawCanvas2CanvasMap): void;
-  bindImageTexture(refId: string, imageId: number, pixels: ArrayBuffer,
-    width: number, height: number): void;
-  bindCachedImageTexture(refId: string, imageId: number): boolean;
-  cacheImage(id: number, pixels: ArrayBuffer, width: number, height: number): void;
-  getDeviceInfo(args: string): string;
-  addFontFamily(fontNames: string[], fontFiles: string[]): void;
-  getFontNames(): string[];
-  setExtraFontLocation(location: string): void;
-  setLogLevel(level: number): void;
-  resetComponent(refId: string): void;
-  texImage2D(refId: string, target: number, level: number, internalformat: number,
-    format: number, type: number, pixels: ArrayBuffer, width: number, height: number): void;
-  texSubImage2D(refId: string, target: number, level: number, xoffset: number, yoffset: number,
-    format: number, type: number, pixels: ArrayBuffer, width: number, height: number): void;
-}
-
-/** drawCanvas2Canvas 参数（与 GCanvasModuleTurboModule 一致）。 */
-interface DrawCanvas2CanvasMap {
-  srcComponentId: string;
-  dstComponentId: string;
-  tw: number;
-  th: number;
-  sx: number;
-  sy: number;
-  sw: number;
-  sh: number;
-  dx: number;
-  dy: number;
-  dw: number;
-  dh: number;
-}
+import hilog from '@ohos.hilog';
+import nativeModule from 'libgcanvas.so';
+
+const TAG = 'GCanvasNativeEngine';
+const DOMAIN = 0x0001;
+
+/**
+ * GCanvas 原生引擎的 ArkTS 门面（单例）。
+ *
+ * 所有 GCanvasModuleTurboModule 的同步/绘制方法都经此转发到 C++ 原生引擎
+ * （libgcanvas.so，由 NAPI 暴露），由 C++ 内部独立 GL 线程执行命令。
+ *
+ * 该门面职责单一：
+ *  1. 维护 nativeModule 单例（懒加载，避免 HAR 加载期即初始化 .so）；
+ *  2. 将 ArkTS 参数透传给 C++，统一日志与异常隔离（不向 TurboModule 抛异常）。
+ *
+ * 真正的 OpenGL ES / EGL / XComponent / 字体 / 命令解析逻辑全部在 C++ 侧（复用 core/src）。
+ */
+export class GCanvasNativeEngine {
+  private static instance: GCanvasNativeEngine;
+  private native: GCanvasNativeAPI | null = null;
+
+  private constructor() {
+  }
+
+  public static getInstance(): GCanvasNativeEngine {
+    if (!GCanvasNativeEngine.instance) {
+      GCanvasNativeEngine.instance = new GCanvasNativeEngine();
+    }
+    return GCanvasNativeEngine.instance;
+  }
+
+  private api(): GCanvasNativeAPI {
+    if (this.native === null) {
+      const loaded = nativeModule as GCanvasNativeAPI;
+      if (typeof loaded.enable !== 'function' || typeof loaded.render !== 'function' ||
+        typeof loaded.extendCallNative !== 'function') {
+        throw new Error('libgcanvas.so is missing enable/render/extendCallNative');
+      }
+      this.native = loaded;
+    }
+    return this.native;
+  }
+
+  /** 注册 XComponent 与 GL 表面（由 Fabric 组件创建后调用，绑定 componentId↔window）。 */
+  public bindSurface(componentId: string, window: number, width: number, height: number): void {
+    this.api().bindSurface(componentId, window, width, height);
+  }
+
+  /** surface 尺寸变化。 */
+  public surfaceChanged(componentId: string, width: number, height: number): void {
+    this.api().surfaceChanged(componentId, width, height);
+  }
+
+  /** surface 销毁。 */
+  public surfaceDestroyed(componentId: string): void {
+    this.api().surfaceDestroyed(componentId);
+  }
+
+  /** Apply native-only view options that are not part of the JS command protocol. */
+  public configureView(componentId: string, enableFboMsaa: boolean): void {
+    this.api().configureView(componentId, enableFboMsaa);
+  }
+
+  /** 启用画布（同步）。config 同 Android enable() 的 configArray。 */
+  public enable(componentId: string, config: number[]): void {
+    this.api().enable(componentId, config);
+  }
+
+  /** 禁用画布。 */
+  public disable(refId: string): void {
+    this.api().disable(refId);
+  }
+
+  /** 异步执行命令字符串（投递到 GL 线程后立即返回）。 */
+  public render(canvasId: string, cmd: string, type: number): void {
+    this.api().render(canvasId, cmd, type);
+  }
+
+  /** 同步执行命令字符串并返回结果（GL 线程阻塞等待）。 */
+  public extendCallNative(contextId: string, args: string, type: number): string {
+    return this.api().extendCallNative(contextId, args, type);
+  }
+
+  /** 设置上下文类型：0=2d, 1=webgl。 */
+  public setContextType(contextType: number, refId: string): void {
+    this.api().setContextType(contextType, refId);
+  }
+
+  public setDevicePixelRatio(refId: string, ratio: number): void {
+    this.api().setDevicePixelRatio(refId, ratio);
+  }
+
+  public resetGlViewport(refId: string): void {
+    this.api().resetGlViewport(refId);
+  }
+
+  /** 同步导出画布为 data URL。 */
+  public toDataURL(refId: string, mimeType: string, quality: number): string {
+    return this.api().toDataURL(refId, mimeType, quality);
+  }
+
+  public drawCanvas2Canvas(map: DrawCanvas2CanvasMap): void {
+    this.api().drawCanvas2Canvas(map);
+  }
+
+  /** 绑定已解码的 RGBA 像素到纹理。 */
+  public bindImageTexture(refId: string, imageId: number, pixels: ArrayBuffer,
+    width: number, height: number): void {
+    this.api().bindImageTexture(refId, imageId, pixels, width, height);
+  }
+
+  /** Rebind a preloaded native image without decoding it a second time. */
+  public bindCachedImageTexture(refId: string, imageId: number): boolean {
+    return this.api().bindCachedImageTexture(refId, imageId);
+  }
+
+  /** 缓存解码后的图片，供后续纹理上传复用。 */
+  public cacheImage(id: number, pixels: ArrayBuffer, width: number, height: number): void {
+    this.api().cacheImage(id, pixels, width, height);
+  }
+
+  public getDeviceInfo(args: string): string {
+    return this.api().getDeviceInfo(args);
+  }
+
+  public addFontFamily(fontNames: string[], fontFiles: string[]): void {
+    this.api().addFontFamily(fontNames, fontFiles);
+  }
+
+  public getFontNames(): string[] {
+    return this.api().getFontNames();
+  }
+
+  public setExtraFontLocation(location: string): void {
+    this.api().setExtraFontLocation(location);
+  }
+
+  public setLogLevel(level: number): void {
+    this.api().setLogLevel(level);
+  }
+
+  public resetComponent(refId: string): void {
+    this.api().resetComponent(refId);
+  }
+
+  public texImage2D(refId: string, target: number, level: number, internalformat: number,
+    format: number, type: number, pixels: ArrayBuffer, width: number, height: number): void {
+    this.api().texImage2D(refId, target, level, internalformat, format, type, pixels, width, height);
+  }
+
+  public texSubImage2D(refId: string, target: number, level: number, xoffset: number, yoffset: number,
+    format: number, type: number, pixels: ArrayBuffer, width: number, height: number): void {
+    this.api().texSubImage2D(refId, target, level, xoffset, yoffset, format, type, pixels, width, height);
+  }
+}
+
+/**
+ * C++ 原生引擎（libgcanvas.so）经 NAPI 暴露的接口契约。
+ * C++ 侧（GCanvasNapi.cpp）须实现下列全部方法。
+ */
+interface GCanvasNativeAPI {
+  bindSurface(componentId: string, window: number, width: number, height: number): void;
+  surfaceChanged(componentId: string, width: number, height: number): void;
+  surfaceDestroyed(componentId: string): void;
+  configureView(componentId: string, enableFboMsaa: boolean): void;
+  enable(componentId: string, config: number[]): void;
+  disable(refId: string): void;
+  render(canvasId: string, cmd: string, type: number): void;
+  extendCallNative(contextId: string, args: string, type: number): string;
+  setContextType(contextType: number, refId: string): void;
+  setDevicePixelRatio(refId: string, ratio: number): void;
+  resetGlViewport(refId: string): void;
+  toDataURL(refId: string, mimeType: string, quality: number): string;
+  drawCanvas2Canvas(map: DrawCanvas2CanvasMap): void;
+  bindImageTexture(refId: string, imageId: number, pixels: ArrayBuffer,
+    width: number, height: number): void;
+  bindCachedImageTexture(refId: string, imageId: number): boolean;
+  cacheImage(id: number, pixels: ArrayBuffer, width: number, height: number): void;
+  getDeviceInfo(args: string): string;
+  addFontFamily(fontNames: string[], fontFiles: string[]): void;
+  getFontNames(): string[];
+  setExtraFontLocation(location: string): void;
+  setLogLevel(level: number): void;
+  resetComponent(refId: string): void;
+  texImage2D(refId: string, target: number, level: number, internalformat: number,
+    format: number, type: number, pixels: ArrayBuffer, width: number, height: number): void;
+  texSubImage2D(refId: string, target: number, level: number, xoffset: number, yoffset: number,
+    format: number, type: number, pixels: ArrayBuffer, width: number, height: number): void;
+}
+
+/** drawCanvas2Canvas 参数（与 GCanvasModuleTurboModule 一致）。 */
+interface DrawCanvas2CanvasMap {
+  srcComponentId: string;
+  dstComponentId: string;
+  tw: number;
+  th: number;
+  sx: number;
+  sy: number;
+  sw: number;
+  sh: number;
+  dx: number;
+  dy: number;
+  dw: number;
+  dh: number;
+}

package/harmony/gcanvas/src/main/ets/components/GCanvasView.ets

@@ -1,39 +1,39 @@
 import { RNOHContext, RNViewBase } from '@rnoh/react-native-openharmony';
 import { GCanvasView as Spec } from '../generated/components/GCanvasView';
 import { GCanvasNativeEngine } from '../GCanvasNativeEngine';
-
-/**
- * GCanvasView — Fabric 组件（鸿蒙）。
- *
- * 对齐 Android GReactTextureView（GCanvasView）+ iOS RCTGCanvasView（GLKView）。
- * 内嵌 ArkUI XComponent(type: SURFACE, libraryname: 'gcanvas')，由 C++ 侧
- * GCanvasXComponent.cpp 的 OH_NativeXComponent 回调拿到 OHNativeWindow*，
- * 直接 eglCreateWindowSurface 建立 GL 表面并交 GCanvas 引擎渲染。
- *
- * 事件（与 codegen EventPayloadByName 一致）：
- *  - change：复刻 Android topChange，payload { value }。
- *  - isReady：GL 表面就绪/销毁，payload { isReady }，对齐 Android GReactViewEvent。
- *
+
+/**
+ * GCanvasView — Fabric 组件（鸿蒙）。
+ *
+ * 对齐 Android GReactTextureView（GCanvasView）+ iOS RCTGCanvasView（GLKView）。
+ * 内嵌 ArkUI XComponent(type: SURFACE, libraryname: 'gcanvas')，由 C++ 侧
+ * GCanvasXComponent.cpp 的 OH_NativeXComponent 回调拿到 OHNativeWindow*，
+ * 直接 eglCreateWindowSurface 建立 GL 表面并交 GCanvas 引擎渲染。
+ *
+ * 事件（与 codegen EventPayloadByName 一致）：
+ *  - change：复刻 Android topChange，payload { value }。
+ *  - isReady：GL 表面就绪/销毁，payload { isReady }，对齐 Android GReactViewEvent。
+ *
  * props（subscribeToDescriptorChanges 订阅）：
  *  - isEnableFboMsaa / devicePixelRatio 透传至 C++ 引擎；
  *  - isOffscreen / disableAutoSwap 保留给上游 JS 画布调度语义。
- *
- * 说明：XComponent 的 surface 生命周期回调在 C++（NDK）侧触发（因 libraryname），
+ *
+ * 说明：XComponent 的 surface 生命周期回调在 C++（NDK）侧触发（因 libraryname），
  * ArkTS 侧不需 XComponentController；就绪事件由 XComponent 生命周期上抛。
- */
-@Component
-export struct GCanvasView {
-  public static readonly NAME = Spec.NAME;
-  public ctx!: RNOHContext;
-  public tag: number = 0;
-
-  // @State：build() 中引用、驱动渲染的属性。
+ */
+@Component
+export struct GCanvasView {
+  public static readonly NAME = Spec.NAME;
+  public ctx!: RNOHContext;
+  public tag: number = 0;
+
+  // @State：build() 中引用、驱动渲染的属性。
   @State private isEnableFboMsaa: boolean = true;
-  @State private isOffscreen: boolean = false;
-  @State private devicePixelRatio: number = 1;
-  @State private disableAutoSwap: boolean = false;
-  @State private componentId: string = '';
-
+  @State private isOffscreen: boolean = false;
+  @State private devicePixelRatio: number = 1;
+  @State private disableAutoSwap: boolean = false;
+  @State private componentId: string = '';
+
   private eventEmitter: Spec.EventEmitter | undefined = undefined;
   private cleanUpCallbacks: (() => void)[] = [];
   private surfaceLoaded: boolean = false;
@@ -43,20 +43,20 @@ export struct GCanvasView {
     engine.configureView(this.componentId, this.isEnableFboMsaa);
     engine.setDevicePixelRatio(this.componentId, this.devicePixelRatio);
   }
-
-  aboutToAppear(): void {
-    // componentId 用 tag 字符串（与 JS 侧 findNodeHandle 一致），供 C++ surface 关联。
-    this.componentId = this.tag.toString();
-
-    this.eventEmitter = new Spec.EventEmitter(this.ctx.rnInstance, this.tag);
-
-    // 订阅 props 变化（RNOH Fabric 唯一正确的 props 读取方式）。
-    // listener 形参用 RNOH 通用 Descriptor 类型（见 RNSwitch.ets 写法），内部 as 转为本组件 Descriptor。
-    this.cleanUpCallbacks.push(
-      this.ctx.descriptorRegistry.subscribeToDescriptorChanges(this.tag, (newDescriptor) => {
-        const descriptor = newDescriptor as Spec.Descriptor;
-        const rawProps = descriptor.rawProps as Spec.RawProps;
-        if (rawProps) {
+
+  aboutToAppear(): void {
+    // componentId 用 tag 字符串（与 JS 侧 findNodeHandle 一致），供 C++ surface 关联。
+    this.componentId = this.tag.toString();
+
+    this.eventEmitter = new Spec.EventEmitter(this.ctx.rnInstance, this.tag);
+
+    // 订阅 props 变化（RNOH Fabric 唯一正确的 props 读取方式）。
+    // listener 形参用 RNOH 通用 Descriptor 类型（见 RNSwitch.ets 写法），内部 as 转为本组件 Descriptor。
+    this.cleanUpCallbacks.push(
+      this.ctx.descriptorRegistry.subscribeToDescriptorChanges(this.tag, (newDescriptor) => {
+        const descriptor = newDescriptor as Spec.Descriptor;
+        const rawProps = descriptor.rawProps as Spec.RawProps;
+        if (rawProps) {
           this.isEnableFboMsaa = rawProps.isEnableFboMsaa ?? true;
           this.isOffscreen = rawProps.isOffscreen ?? false;
           this.devicePixelRatio = rawProps.devicePixelRatio ?? 1;
@@ -65,28 +65,28 @@ export struct GCanvasView {
             this.applyNativeConfiguration();
           }
         }
-      })
-    );
-  }
-
-  aboutToDisappear(): void {
+      })
+    );
+  }
+
+  aboutToDisappear(): void {
     // 清理所有订阅，避免内存泄漏与重复订阅。
     this.cleanUpCallbacks.forEach(cb => cb());
     this.cleanUpCallbacks = [];
     this.eventEmitter = undefined;
-  }
-
-  build() {
-    // 叶子组件必须用 RNViewBase 包裹（RNOH 框架要求）。
-    RNViewBase({ ctx: this.ctx, tag: this.tag }) {
-      // XComponent(SURFACE) 由 libraryname='gcanvas' 加载 C++ .so，
-      // OnSurfaceCreated 的 void* window 即 OHNativeWindow*，直接建 EGL surface。
-      XComponent({
-        id: this.componentId,
-        type: XComponentType.SURFACE,
-        libraryname: 'gcanvas',
-      })
-        .width('100%')
+  }
+
+  build() {
+    // 叶子组件必须用 RNViewBase 包裹（RNOH 框架要求）。
+    RNViewBase({ ctx: this.ctx, tag: this.tag }) {
+      // XComponent(SURFACE) 由 libraryname='gcanvas' 加载 C++ .so，
+      // OnSurfaceCreated 的 void* window 即 OHNativeWindow*，直接建 EGL surface。
+      XComponent({
+        id: this.componentId,
+        type: XComponentType.SURFACE,
+        libraryname: 'gcanvas',
+      })
+        .width('100%')
         .height('100%')
         .onLoad(() => {
           this.surfaceLoaded = true;
@@ -103,7 +103,7 @@ export struct GCanvasView {
             this.eventEmitter.emit('change', { value: false });
             this.eventEmitter.emit('isReady', { isReady: false });
           }
-        })
-    }
-  }
-}
+        })
+    }
+  }
+}

package/harmony/gcanvas/src/main/module.json5

@@ -1,21 +1,21 @@
-{
-  "module": {
-    "name": "gcanvas",
-    "type": "har",
-    "deviceTypes": [
-      "default",
-      "tablet",
-      "2in1"
-    ],
-    "requestPermissions": [
-      {
-        "name": "ohos.permission.INTERNET",
-        "reason": "$string:reason_internet",
-        "usedScene": {
-          "abilities": [],
-          "when": "always"
-        }
-      }
-    ]
-  }
-}
+{
+  "module": {
+    "name": "gcanvas",
+    "type": "har",
+    "deviceTypes": [
+      "default",
+      "tablet",
+      "2in1"
+    ],
+    "requestPermissions": [
+      {
+        "name": "ohos.permission.INTERNET",
+        "reason": "$string:reason_internet",
+        "usedScene": {
+          "abilities": [],
+          "when": "always"
+        }
+      }
+    ]
+  }
+}

package/harmony/gcanvas/src/main/resources/base/element/string.json

@@ -1,12 +1,12 @@
-{
-  "string": [
-    {
-      "name": "page_show",
-      "value": "page from npm package"
-    },
-    {
-      "name": "reason_internet",
-      "value": "Used to download remote images for canvas texture binding"
-    }
-  ]
-}
+{
+  "string": [
+    {
+      "name": "page_show",
+      "value": "page from npm package"
+    },
+    {
+      "name": "reason_internet",
+      "value": "Used to download remote images for canvas texture binding"
+    }
+  ]
+}

package/harmony/gcanvas/src/main/resources/en_US/element/string.json

@@ -1,8 +1,8 @@
-{
-  "string": [
-    {
-      "name": "page_show",
-      "value": "page from npm package"
-    }
-  ]
-}
+{
+  "string": [
+    {
+      "name": "page_show",
+      "value": "page from npm package"
+    }
+  ]
+}