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

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

@@ -0,0 +1,109 @@
+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。
+ *
+ * props（subscribeToDescriptorChanges 订阅）：
+ *  - isEnableFboMsaa / devicePixelRatio 透传至 C++ 引擎；
+ *  - isOffscreen / disableAutoSwap 保留给上游 JS 画布调度语义。
+ *
+ * 说明：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() 中引用、驱动渲染的属性。
+  @State private isEnableFboMsaa: boolean = true;
+  @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;
+
+  private applyNativeConfiguration(): void {
+    const engine = GCanvasNativeEngine.getInstance();
+    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) {
+          this.isEnableFboMsaa = rawProps.isEnableFboMsaa ?? true;
+          this.isOffscreen = rawProps.isOffscreen ?? false;
+          this.devicePixelRatio = rawProps.devicePixelRatio ?? 1;
+          this.disableAutoSwap = rawProps.disableAutoSwap ?? false;
+          if (this.surfaceLoaded) {
+            this.applyNativeConfiguration();
+          }
+        }
+      })
+    );
+  }
+
+  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%')
+        .height('100%')
+        .onLoad(() => {
+          this.surfaceLoaded = true;
+          this.applyNativeConfiguration();
+          if (this.eventEmitter) {
+            // Android GReactViewEvent exposes nativeEvent.value as a boolean.
+            this.eventEmitter.emit('change', { value: true });
+            this.eventEmitter.emit('isReady', { isReady: true });
+          }
+        })
+        .onDestroy(() => {
+          this.surfaceLoaded = false;
+          if (this.eventEmitter) {
+            this.eventEmitter.emit('change', { value: false });
+            this.eventEmitter.emit('isReady', { isReady: false });
+          }
+        })
+    }
+  }
+}

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

@@ -0,0 +1,126 @@
+/**
+ * This code was generated by 'react-native codegen-lib-harmony'
+ */
+
+import {
+  Descriptor as ComponentDescriptor,
+  ViewBaseProps,
+  ViewRawProps,
+  ViewDescriptorWrapperBase,
+  ColorValue,
+  Color,
+  RNInstance,
+  Tag,
+  RNComponentCommandReceiver,
+  ViewPropsSelector,
+} from '@rnoh/react-native-openharmony/ts';
+
+
+export namespace GCanvasView {
+  export const NAME = 'GCanvasView' as const
+
+  export interface DirectRawProps {
+    isEnableFboMsaa?: boolean;
+    isOffscreen?: boolean;
+    devicePixelRatio?: number;
+    disableAutoSwap?: boolean;
+  }
+  
+  export interface Props extends ViewBaseProps {}
+  
+  export interface State {}
+  
+  export interface RawProps extends ViewRawProps, DirectRawProps {}
+  
+  export class PropsSelector extends ViewPropsSelector<Props, RawProps> {
+    get isEnableFboMsaa() {
+      return this.rawProps.isEnableFboMsaa ?? true;
+    }
+    
+    get isOffscreen() {
+      return this.rawProps.isOffscreen ?? false;
+    }
+    
+    get devicePixelRatio() {
+      return this.rawProps.devicePixelRatio ?? 1;
+    }
+    
+    get disableAutoSwap() {
+      return this.rawProps.disableAutoSwap ?? false;
+    }
+    
+  
+  }
+
+  export type Descriptor = ComponentDescriptor<
+    typeof NAME,
+    Props,
+    State,
+    RawProps
+  >;
+  
+  export class DescriptorWrapper extends ViewDescriptorWrapperBase<
+    typeof NAME,
+    Props,
+    State,
+    RawProps,
+    PropsSelector
+  > {
+    protected createPropsSelector() {
+      return new PropsSelector(this.descriptor.props, this.descriptor.rawProps)
+    }
+  }
+  
+  export interface EventPayloadByName {
+    'change': {value?: boolean}
+    'isReady': {isReady?: boolean}
+  }
+  
+  export class EventEmitter {
+    constructor(private rnInstance: RNInstance, private tag: Tag) {}
+    
+    emit<TEventName extends keyof EventPayloadByName>(eventName: TEventName, payload: EventPayloadByName[TEventName]) {
+      this.rnInstance.emitComponentEvent(this.tag, eventName, payload)
+    }
+  }
+  
+  export interface CommandArgvByName {
+  }
+  
+  export class CommandReceiver {
+    private listenersByCommandName = new Map<string, Set<(...args: any[]) => void>>()
+    private cleanUp: (() => void) | undefined = undefined
+  
+    constructor(private componentCommandReceiver: RNComponentCommandReceiver, private tag: Tag) {
+    }
+  
+    subscribe<TCommandName extends keyof CommandArgvByName>(commandName: TCommandName, listener: (argv: CommandArgvByName[TCommandName]) => void) {
+      if (!this.listenersByCommandName.has(commandName)) {
+        this.listenersByCommandName.set(commandName, new Set())
+      }
+      this.listenersByCommandName.get(commandName)!.add(listener)
+      const hasRegisteredCommandReceiver = !!this.cleanUp
+      if (!hasRegisteredCommandReceiver) {
+        this.cleanUp = this.componentCommandReceiver.registerCommandCallback(this.tag, (commandName: string, argv: any[]) => {
+          if (this.listenersByCommandName.has(commandName)) {
+            const listeners = this.listenersByCommandName.get(commandName)!
+            listeners.forEach(listener => {
+              listener(argv)
+            })
+          }
+        })
+      }
+  
+      return () => {
+        this.listenersByCommandName.get(commandName)?.delete(listener)
+        if (this.listenersByCommandName.get(commandName)?.size ?? 0 === 0) {
+          this.listenersByCommandName.delete(commandName)
+        }
+        if (this.listenersByCommandName.size === 0) {
+          this.cleanUp?.()
+        }
+      }
+    }
+  }
+
+}

package/harmony/gcanvas/src/main/ets/generated/components/ts.ts

@@ -0,0 +1,5 @@
+/**
+ * This code was generated by 'react-native codegen-lib-harmony'
+ */
+
+export * from './GCanvasView'

package/harmony/gcanvas/src/main/ets/generated/index.ets

@@ -0,0 +1,5 @@
+/**
+ * This code was generated by 'react-native codegen-lib-harmony'
+ */
+
+export * from './ts'

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

@@ -0,0 +1,6 @@
+/**
+ * This code was generated by 'react-native codegen-lib-harmony'
+ */
+
+export * as RNC from './components/ts'
+export * as TM from './turboModules/ts'

package/harmony/gcanvas/src/main/ets/generated/turboModules/GCanvasModule.ts

@@ -0,0 +1,52 @@
+/**
+ * This code was generated by 'react-native codegen-lib-harmony'
+ */
+
+import { Tag } from '@rnoh/react-native-openharmony/ts'
+
+export namespace GCanvasModule {
+  export const NAME = 'GCanvasModule' as const
+
+  export interface Spec {
+    enable(args: {componentId: string, config: number[]}): void;
+  
+    disable(refId: string): Promise<void>;
+  
+    render(canvasId: string, cmd: string, type: number): Promise<void>;
+  
+    extendCallNative(args: {contextId: string, args: string, type: number}): {result: 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: {srcComponentId: string, dstComponentId: string, tw: number, th: number, sx: number, sy: number, sw: number, sh: number, dx: number, dy: number, dw: number, dh: number}): void;
+  
+    bindImageTexture(args: {src: string, imageId: number}, refId: string): Promise<void>;
+  
+    preLoadImage(args: {url: string, id: number}): Promise<{width: number, height: number, error?: string}>;
+  
+    getDeviceInfo(args: string): Promise<{data: string}>;
+  
+    addFontFamily(fontNames: string[], fontFiles: string[]): void;
+  
+    getFontNames(): string[];
+  
+    setExtraFontLocation(location: string): void;
+  
+    setLogLevel(level: number): Promise<void>;
+  
+    resetComponent(refId: string): Promise<void>;
+  
+    texImage2D(refId: string, target: number, level: number, internalformat: number, format: number, type: number, src: string): void;
+  
+    texSubImage2D(refId: string, target: number, level: number, xoffset: number, yoffset: number, format: number, type: number, src: string): void;
+  
+    setAlpha(refId: string, alpha: number): Promise<void>;
+  
+  }
+}

package/harmony/gcanvas/src/main/ets/generated/turboModules/ts.ts

@@ -0,0 +1,5 @@
+/**
+ * This code was generated by 'react-native codegen-lib-harmony'
+ */
+
+export * from './GCanvasModule'

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

@@ -0,0 +1,21 @@
+{
+  "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

@@ -0,0 +1,12 @@
+{
+  "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

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

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

@@ -0,0 +1,12 @@
+{
+  "string": [
+    {
+      "name": "page_show",
+      "value": "page from npm package"
+    },
+    {
+      "name": "reason_internet",
+      "value": "用于下载远程图片以绑定 Canvas 纹理"
+    }
+  ]
+}

package/package.json

@@ -0,0 +1,69 @@
+{
+  "name": "@hxa-rn/react-native-gcanvas",
+  "displayName": "@hxa-rn/react-native-gcanvas",
+  "version": "6.0.24-beta.1",
+  "description": "A C++ native canvas 2D/WebGL component based on gpu opengl glsl shader GCanvas",
+  "main": "./src/index.js",
+  "module": "./src/index.js",
+  "react-native": "./src/index.js",
+  "license": "MIT",
+  "private": false,
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/flyskywhy/react-native-gcanvas.git"
+  },
+  "keywords": [
+    "react-native",
+    "harmony",
+    "harmonyos"
+  ],
+  "homepage": "https://github.com/flyskywhy/react-native-gcanvas#readme",
+  "publishConfig": {
+    "registry": "https://registry.npmjs.org/"
+  },
+  "files": [
+    "src/",
+    "packages/",
+    "README.md",
+    "CHANGELOG.md",
+    "LICENSE",
+    "harmony/"
+  ],
+  "scripts": {
+    "codegen-lib": "react-native codegen-lib-harmony --no-safety-check --npm-package-name gcanvas --cpp-output-path ./harmony/gcanvas/src/main/cpp/generated --ets-output-path ./harmony/gcanvas/src/main/ets/generated --turbo-modules-spec-paths ./src/specs/v1/NativeGCanvasModule.ts --arkts-components-spec-paths ./src/specs/v1/GCanvasViewNativeComponent.ts"
+  },
+  "peerDependencies": {
+    "react-native": ">=0.72"
+  },
+  "devDependencies": {
+    "react": "18.2.0",
+    "@types/react": "18.2.79",
+    "react-native": "0.72.5",
+    "jest": "^29.6.3",
+    "@react-native-oh/react-native-harmony-cli": "^0.77.50",
+    "metro": "^0.81.0"
+  },
+  "engines": {
+    "node": ">=18"
+  },
+  "harmony": {
+    "alias": "@flyskywhy/react-native-gcanvas",
+    "autolinking": {
+      "cmakeLibraryTargetName": "gcanvas",
+      "ohPackageName": "@hxa-rn/react-native-gcanvas",
+      "etsPackageClassName": "GcanvasPackage",
+      "cppPackageClassName": "GcanvasPackage"
+    },
+    "codegenConfig": [
+      {
+        "version": 1,
+        "specPaths": [
+          "./src/specs/v1"
+        ]
+      }
+    ]
+  },
+  "dependencies": {
+    "@flyskywhy/react-native-browser-polyfill": "^2.0.2"
+  }
+}

package/packages/gcanvas/.babelrc

@@ -0,0 +1,5 @@
+{
+  "plugins": [
+    "@babel/plugin-proposal-class-properties"
+  ]
+}

package/packages/gcanvas/.eslintrc.js

@@ -0,0 +1,133 @@
+module.exports = {
+  'root': true,
+  'parser': 'babel-eslint',
+  'env': {
+    'browser': true,
+    'node': true,
+    'es6': true,
+    'jest': true,
+    'commonjs': true
+  },
+  'parserOptions': {
+    'sourceType': 'module',
+    'ecmaVersion': 6,
+    'ecmaFeatures': {
+      'generators': true,
+      'experimentalObjectRestSpread': true
+    }
+  },
+  'globals': {
+    '__weex_data__': true,
+    '__weex_options__': true,
+    '__weex_downgrade__': true,
+    '__weex_define__': true,
+    '__weex_require__': true,
+    'WXEnvironment': true,
+    'weex': true,
+    'callGCanvasLinkNative': true
+  },
+  'rules': {
+    'max-len': 'off',
+    // ES6
+    'prefer-const': 'off',
+    'no-const-assign': 'error',
+    'no-class-assign': 'error',
+    'no-dupe-class-members': 'error',
+    'rest-spread-spacing': 'error',
+    'no-duplicate-imports': 'error',
+    'no-useless-rename': 'error',
+    'arrow-spacing': 'error',
+    'no-useless-computed-key': 'error',
+    'template-curly-spacing': 'error',
+    'generator-star-spacing': ['error', {'before': false, 'after': true}],
+    'yield-star-spacing': ['error', {'before': false, 'after': true}],
+    'strict': ['off', 'global'],
+    'global-strict': ['off', 'always'],
+    'no-extra-strict': 'off',
+    'no-shadow': 'off',
+    'no-unused-vars': ['off', {
+      'vars': 'local',
+      'args': 'after-used',
+      'varsIgnorePattern': 'createElement'
+    }],
+    'no-undef': 'error',
+    'no-unused-expressions': 'off',
+    'no-use-before-define': 'off',
+    'yoda': 'off',
+    'eqeqeq': 'off',
+    'no-new': 'off',
+    'consistent-return': 'off',
+    'dot-notation': ['error', {
+      'allowKeywords': true
+    }],
+    'no-extend-native': 'error',
+    'no-native-reassign': 'error',
+    'no-return-assign': 'off',
+    'no-constant-condition': ['error', {
+      'checkLoops': false
+    }],
+    'no-caller': 'error',
+    'no-loop-func': 'off',
+
+    // Node.js
+    'no-console': 'off',
+    'no-catch-shadow': 'error',
+    'no-new-require': 'off',
+    'no-mixed-requires': ['off', false],
+    'no-path-concat': 'off',
+    'handle-callback-err': 'off',
+
+    'no-empty': 'off',
+    'indent': ['error', 2, {
+      'SwitchCase': 1,
+      'MemberExpression': 'off'
+    }],
+    'camelcase': ['off', {
+      'properties': 'always'
+    }],
+    'quotes': ['error', 'single', 'avoid-escape'],
+    'brace-style': ['error', '1tbs', {
+      'allowSingleLine': false
+    }],
+    'comma-spacing': ['error', {
+      'before': false,
+      'after': true
+    }],
+    'comma-style': ['error', 'last'],
+    'eol-last': 'off',
+    'func-names': 'off',
+    'new-cap': ['error', {
+      'capIsNewExceptions': ['App', 'Page', 'Component']
+    }],
+    'key-spacing': ['error', {
+      'beforeColon': false,
+      'afterColon': true
+    }],
+    'no-mixed-spaces-and-tabs': 'error',
+    'no-multi-spaces': 'error',
+    'no-multiple-empty-lines': 'error',
+    'no-new-object': 'error',
+    'no-spaced-func': 'error',
+    'no-tabs': 'error',
+    'no-trailing-spaces': 'error',
+    'no-extra-parens': ['error', 'all', { ignoreJSX: 'all' }],
+    'padded-blocks': ['error', 'never'],
+    'semi': 'error',
+    'semi-spacing': 'error',
+    'keyword-spacing': 'error',
+    'space-before-blocks': 'error',
+    'space-before-function-paren': ['error', 'never'],
+    'space-infix-ops': 'error',
+    'spaced-comment': ['error', 'always', {
+      'line': {
+        'markers': ['/'],
+        'exceptions': ['-', '+']
+      },
+      'block': {
+        'markers': ['!'],
+        'exceptions': ['*'],
+        'balanced': true
+      }
+    }]
+  }
+};

package/packages/gcanvas/package.json

@@ -0,0 +1,19 @@
+{
+  "name": "@gcanvas/core",
+  "version": "1.0.0",
+  "description": "Javascript Bridge for GCanvas",
+  "main": "src/index.js",
+  "scripts": {
+    "build": "rollup --config",
+    "lint": "npm run lint:nofix -- --fix",
+    "lint:nofix": "eslint --ext .js --ext .jsx ./"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.7.2",
+    "@babel/plugin-proposal-class-properties": "^7.7.0",
+    "babel-eslint": "^10.0.3",
+    "eslint": "^6.6.0",
+    "rollup": "^1.27.0",
+    "rollup-plugin-babel": "^4.3.3"
+  }
+}

package/packages/gcanvas/rollup.config.js

@@ -0,0 +1,14 @@
+import babel from 'rollup-plugin-babel';
+
+module.exports = {
+  input: 'src/index.js',
+  output: {
+    file: 'dist/gcanvas.js',
+    format: 'cjs'
+  },
+  plugins: [
+    babel({
+      exclude: 'node_modules/**'
+    })
+  ]
+};