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

package/src/packages/gcanvas/src/env/image.js

@@ -1,76 +1,76 @@
-import Element from '@flyskywhy/react-native-browser-polyfill/src/DOM/Element';
-import {defineEventAttribute} from 'event-target-shim';
-
-// use srcs to [Call drawImage() in loop with only one GImage instance](https://github.com/flyskywhy/react-native-gcanvas/issues/41)
-// just like what Web can do
-let srcs = {};
-
-let id = 0;
-
-class GImage extends Element {
-  static GBridge = null;
-
-  constructor() {
-    super('img');
-    this._id = 0;
-    this.width = 0;
-    this.height = 0;
-    this._src = undefined;
-    this.complete = false;
-  }
-
-  get src() {
-    return this._src;
-  }
-
-  set src(value) {
-    if (value.startsWith('//')) {
-      value = 'http:' + value;
-    }
-
-    this._src = value;
-
-    if (srcs[value]) {
-      this._id = srcs[value].id;
-      this.width = srcs[value].width;
-      this.height = srcs[value].height;
-
-      // in case another `new GImage()` set same src, so we also need `this.complete = true` here
-      this.complete = true;
-
-      var evt = {type: 'load', target: this};
-      this.dispatchEvent(evt);
-    } else {
-      // TODO: remove useless `0` arg in preloadImage of js and native
-      GImage.GBridge.preloadImage([this._src, 0], (data) => {
-        if (typeof data === 'string') {
-          data = JSON.parse(data);
-        }
-        if (data.error) {
-          var evt = {type: 'error', target: this, message: data.error};
-          this.dispatchEvent(evt);
-        } else {
-          id++;
-          this._id = id;
-          this.width = typeof data.width === 'number' ? data.width : 0;
-          this.height = typeof data.height === 'number' ? data.height : 0;
-          srcs[value] = {
-            id: this._id,
-            width: this.width,
-            height: this.height,
-          };
-
-          this.complete = true;
-
-          var evt = {type: 'load', target: this};
-          this.dispatchEvent(evt);
-        }
-      });
-    }
-  }
-}
-
-defineEventAttribute(GImage.prototype, 'onload');
-defineEventAttribute(GImage.prototype, 'error');
-
-export default GImage;
+import Element from '@flyskywhy/react-native-browser-polyfill/src/DOM/Element';
+import {defineEventAttribute} from 'event-target-shim';
+
+// use srcs to [Call drawImage() in loop with only one GImage instance](https://github.com/flyskywhy/react-native-gcanvas/issues/41)
+// just like what Web can do
+let srcs = {};
+
+let id = 0;
+
+class GImage extends Element {
+  static GBridge = null;
+
+  constructor() {
+    super('img');
+    this._id = 0;
+    this.width = 0;
+    this.height = 0;
+    this._src = undefined;
+    this.complete = false;
+  }
+
+  get src() {
+    return this._src;
+  }
+
+  set src(value) {
+    if (value.startsWith('//')) {
+      value = 'http:' + value;
+    }
+
+    this._src = value;
+
+    if (srcs[value]) {
+      this._id = srcs[value].id;
+      this.width = srcs[value].width;
+      this.height = srcs[value].height;
+
+      // in case another `new GImage()` set same src, so we also need `this.complete = true` here
+      this.complete = true;
+
+      var evt = {type: 'load', target: this};
+      this.dispatchEvent(evt);
+    } else {
+      // TODO: remove useless `0` arg in preloadImage of js and native
+      GImage.GBridge.preloadImage([this._src, 0], (data) => {
+        if (typeof data === 'string') {
+          data = JSON.parse(data);
+        }
+        if (data.error) {
+          var evt = {type: 'error', target: this, message: data.error};
+          this.dispatchEvent(evt);
+        } else {
+          id++;
+          this._id = id;
+          this.width = typeof data.width === 'number' ? data.width : 0;
+          this.height = typeof data.height === 'number' ? data.height : 0;
+          srcs[value] = {
+            id: this._id,
+            width: this.width,
+            height: this.height,
+          };
+
+          this.complete = true;
+
+          var evt = {type: 'load', target: this};
+          this.dispatchEvent(evt);
+        }
+      });
+    }
+  }
+}
+
+defineEventAttribute(GImage.prototype, 'onload');
+defineEventAttribute(GImage.prototype, 'error');
+
+export default GImage;

package/src/packages/gcanvas/src/env/off-screen-canvas.js

@@ -1,74 +1,74 @@
-import GContext2D from '../context/2d/OffScreenRenderingContext';
-import GContextWebGL from '../context/webgl/RenderingContext';
-
-function sleepMs(ms) {
-  for (var start = new Date(); new Date() - start <= ms; ) {}
-}
-
-export default class GOffScreenCanvas {
-  static GBridge = null;
-
-  id = null;
-  _context = null;
-
-  _needRender = true;
-
-  constructor(id, {isAutoClearRectBeforePutImageData, devicePixelRatio, disableAutoSwap}) {
-    this.id = id;
-    this.className = 'GOffScreenCanvas';
-
-    this._isAutoClearRectBeforePutImageData = isAutoClearRectBeforePutImageData;
-    if (devicePixelRatio !== undefined) {
-      this._devicePixelRatio = parseInt(devicePixelRatio, 10);
-    }
-    this._disableAutoSwap = disableAutoSwap;
-  }
-
-  getContext(type) {
-    if (type.match(/webgl/i)) {
-      this._context = new GContextWebGL(this);
-      this._context.componentId = this.id;
-
-      if (!this._disableAutoSwap) {
-        const render = () => {
-          if (this._needRender) {
-            this._context.flushJsCommands2CallNative();
-            this._needRender = false;
-          }
-        };
-        setInterval(render, 16);
-      }
-
-      GOffScreenCanvas.GBridge.callSetContextType(this.id, 1); // 0 for 2d; 1 for webgl
-
-      sleepMs(100);
-      if (this._devicePixelRatio > 0) {
-        GOffScreenCanvas.GBridge.callSetDevicePixelRatio(this.id, this._devicePixelRatio);
-      }
-    } else if (type.match(/2d/i)) {
-      if (this.context2d) {
-        this._context = this.context2d;
-      } else {
-        this.context2d = this._context = new GContext2D(this);
-        this._context.componentId = this.id;
-      }
-
-      sleepMs(100);
-      if (this._devicePixelRatio > 0) {
-        GOffScreenCanvas.GBridge.callSetDevicePixelRatio(this.id, this._devicePixelRatio);
-      }
-    } else {
-      throw new Error('not supported context ' + type);
-    }
-
-    return this._context;
-  }
-
-  get drawCommands() {
-    return this.context2d._drawCommands;
-  }
-
-  get images() {
-    return this.context2d.images;
-  }
-}
+import GContext2D from '../context/2d/OffScreenRenderingContext';
+import GContextWebGL from '../context/webgl/RenderingContext';
+
+function sleepMs(ms) {
+  for (var start = new Date(); new Date() - start <= ms; ) {}
+}
+
+export default class GOffScreenCanvas {
+  static GBridge = null;
+
+  id = null;
+  _context = null;
+
+  _needRender = true;
+
+  constructor(id, {isAutoClearRectBeforePutImageData, devicePixelRatio, disableAutoSwap}) {
+    this.id = id;
+    this.className = 'GOffScreenCanvas';
+
+    this._isAutoClearRectBeforePutImageData = isAutoClearRectBeforePutImageData;
+    if (devicePixelRatio !== undefined) {
+      this._devicePixelRatio = parseInt(devicePixelRatio, 10);
+    }
+    this._disableAutoSwap = disableAutoSwap;
+  }
+
+  getContext(type) {
+    if (type.match(/webgl/i)) {
+      this._context = new GContextWebGL(this);
+      this._context.componentId = this.id;
+
+      if (!this._disableAutoSwap) {
+        const render = () => {
+          if (this._needRender) {
+            this._context.flushJsCommands2CallNative();
+            this._needRender = false;
+          }
+        };
+        setInterval(render, 16);
+      }
+
+      GOffScreenCanvas.GBridge.callSetContextType(this.id, 1); // 0 for 2d; 1 for webgl
+
+      sleepMs(100);
+      if (this._devicePixelRatio > 0) {
+        GOffScreenCanvas.GBridge.callSetDevicePixelRatio(this.id, this._devicePixelRatio);
+      }
+    } else if (type.match(/2d/i)) {
+      if (this.context2d) {
+        this._context = this.context2d;
+      } else {
+        this.context2d = this._context = new GContext2D(this);
+        this._context.componentId = this.id;
+      }
+
+      sleepMs(100);
+      if (this._devicePixelRatio > 0) {
+        GOffScreenCanvas.GBridge.callSetDevicePixelRatio(this.id, this._devicePixelRatio);
+      }
+    } else {
+      throw new Error('not supported context ' + type);
+    }
+
+    return this._context;
+  }
+
+  get drawCommands() {
+    return this.context2d._drawCommands;
+  }
+
+  get images() {
+    return this.context2d.images;
+  }
+}

package/src/packages/gcanvas/src/index.js

@@ -1,31 +1,31 @@
-import GCanvas from './env/canvas';
-import GImage from './env/image';
-
-import GWebGLRenderingContext from './context/webgl/RenderingContext';
-import GContext2D from './context/2d/RenderingContext';
-
-import GBridgeWeex from './bridge/weex';
-import GBridgeReactNative from './bridge/react-native';
-
-export let Image = GImage;
-
-export let WeexBridge = GBridgeWeex;
-export let ReactNativeBridge = GBridgeReactNative;
-
-export function enable(
-  el,
-  {
-    bridge,
-    debug,
-    isAutoClearRectBeforePutImageData,
-    isResetGlViewportAfterSetWidthOrHeight,
-    devicePixelRatio,
-    disableAutoSwap,
-    disableComboCommands,
-  } = {},
-) {
-  const GBridge = GImage.GBridge = GCanvas.GBridge = GWebGLRenderingContext.GBridge = GContext2D.GBridge = bridge;
-
+import GCanvas from './env/canvas';
+import GImage from './env/image';
+
+import GWebGLRenderingContext from './context/webgl/RenderingContext';
+import GContext2D from './context/2d/RenderingContext';
+
+import GBridgeWeex from './bridge/weex';
+import GBridgeReactNative from './bridge/react-native';
+
+export let Image = GImage;
+
+export let WeexBridge = GBridgeWeex;
+export let ReactNativeBridge = GBridgeReactNative;
+
+export function enable(
+  el,
+  {
+    bridge,
+    debug,
+    isAutoClearRectBeforePutImageData,
+    isResetGlViewportAfterSetWidthOrHeight,
+    devicePixelRatio,
+    disableAutoSwap,
+    disableComboCommands,
+  } = {},
+) {
+  const GBridge = GImage.GBridge = GCanvas.GBridge = GWebGLRenderingContext.GBridge = GContext2D.GBridge = bridge;
+
   GBridge.callEnable(el.ref, [
     0, // renderMode: 0--RENDERMODE_WHEN_DIRTY, 1--RENDERMODE_CONTINUOUSLY
     -1, // hybridLayerType:  0--LAYER_TYPE_NONE 1--LAYER_TYPE_SOFTWARE 2--LAYER_TYPE_HARDWARE
@@ -35,31 +35,31 @@ export function enable(
     0xffffffff, // clearColor: opaque white ARGB
     0, // sameLevel: newCanvasMode = true && true => GCanvasView and Webview is same level
   ]);
-
-  if (debug === true) {
-    GBridge.callEnableDebug();
-  }
-  if (disableComboCommands) {
-    GBridge.callEnableDisableCombo();
-  }
-
-  var canvas = new GCanvas(el.ref, {
-    isAutoClearRectBeforePutImageData,
-    isResetGlViewportAfterSetWidthOrHeight,
-    devicePixelRatio,
-    disableAutoSwap,
-    style: el.style,
-  });
-
-  return canvas;
-}
-
-export function disable(canvas) {
-  canvas.disabled = true;
-  if (canvas.webglInterval) {
-    clearInterval(canvas.webglInterval);
-  }
-
-  const ref = canvas.id;
-  GCanvas.GBridge.callDisable(ref);
-}
+
+  if (debug === true) {
+    GBridge.callEnableDebug();
+  }
+  if (disableComboCommands) {
+    GBridge.callEnableDisableCombo();
+  }
+
+  var canvas = new GCanvas(el.ref, {
+    isAutoClearRectBeforePutImageData,
+    isResetGlViewportAfterSetWidthOrHeight,
+    devicePixelRatio,
+    disableAutoSwap,
+    style: el.style,
+  });
+
+  return canvas;
+}
+
+export function disable(canvas) {
+  canvas.disabled = true;
+  if (canvas.webglInterval) {
+    clearInterval(canvas.webglInterval);
+  }
+
+  const ref = canvas.id;
+  GCanvas.GBridge.callDisable(ref);
+}

package/src/specs/v1/GCanvasViewNativeComponent.ts

@@ -1,47 +1,47 @@
-import codegenNativeComponent from 'react-native/Libraries/Utilities/codegenNativeComponent';
-import type {
-  Float,
-  WithDefault,
-} from 'react-native/Libraries/Types/CodegenTypes';
-import type { ViewProps } from 'react-native/Libraries/Components/View/ViewPropTypes';
-
-/**
- * GCanvasView Fabric 组件 Spec（鸿蒙适配）。
- *
- * 对齐原 Android GReactViewManager（GCanvasView，@ReactProp isEnableFboMsaa）
- * 与 iOS RCTGCanvasViewManager（isOffscreen）。组件内嵌 XComponent(SURFACE)
- * 获取 OHNativeWindow 并交 C++ GCanvas 引擎做 GL 渲染。
- *
- * 事件：
- *  - onChange：对应 JS 侧 _onIsReady 的 nativeEvent.value（与 Android topChange 一致），
- *    复刻 Android RCTEventEmitter topChange。
- *  - onIsReady：GL 表面就绪/销毁时由 OH_NativeXComponent OnSurfaceCreated/Destroyed
- *    回调经 EventEmitter 上抛。
- *
- * codegen 类型约束：数值必须用 Float/Int32/Double；事件用 DirectEventHandler；
+import codegenNativeComponent from 'react-native/Libraries/Utilities/codegenNativeComponent';
+import type {
+  Float,
+  WithDefault,
+} from 'react-native/Libraries/Types/CodegenTypes';
+import type { ViewProps } from 'react-native/Libraries/Components/View/ViewPropTypes';
+
+/**
+ * GCanvasView Fabric 组件 Spec（鸿蒙适配）。
+ *
+ * 对齐原 Android GReactViewManager（GCanvasView，@ReactProp isEnableFboMsaa）
+ * 与 iOS RCTGCanvasViewManager（isOffscreen）。组件内嵌 XComponent(SURFACE)
+ * 获取 OHNativeWindow 并交 C++ GCanvas 引擎做 GL 渲染。
+ *
+ * 事件：
+ *  - onChange：对应 JS 侧 _onIsReady 的 nativeEvent.value（与 Android topChange 一致），
+ *    复刻 Android RCTEventEmitter topChange。
+ *  - onIsReady：GL 表面就绪/销毁时由 OH_NativeXComponent OnSurfaceCreated/Destroyed
+ *    回调经 EventEmitter 上抛。
+ *
+ * codegen 类型约束：数值必须用 Float/Int32/Double；事件用 DirectEventHandler；
  * 布尔用 WithDefault<boolean, ...>。禁止裸 number。
- */
-interface GCanvasViewNativeComponentProps extends ViewProps {
-  /** 是否启用 FBO 多重采样抗锯齿（原 Android ViewManager 唯一 @ReactProp）。 */
+ */
+interface GCanvasViewNativeComponentProps extends ViewProps {
+  /** 是否启用 FBO 多重采样抗锯齿（原 Android ViewManager 唯一 @ReactProp）。 */
   isEnableFboMsaa?: WithDefault<boolean, true>;
-  /** 是否离屏渲染（原 iOS RCTViewManager prop）。 */
-  isOffscreen?: WithDefault<boolean, false>;
-  /** 设备像素比，透传至 enable()；undefined 时 JS 侧用 PixelRatio.get()。 */
-  devicePixelRatio?: WithDefault<Float, 1>;
-  /** 仅 webgl；控制自动 swap。 */
-  disableAutoSwap?: WithDefault<boolean, false>;
-  /** GL 就绪/命令执行结果事件（对齐 Android topChange）。 */
-  onChange?: DirectEventHandler<OnChangeEvent>;
-  /** GL 表面就绪事件。 */
-  onIsReady?: DirectEventHandler<OnIsReadyEvent>;
-}
-
+  /** 是否离屏渲染（原 iOS RCTViewManager prop）。 */
+  isOffscreen?: WithDefault<boolean, false>;
+  /** 设备像素比，透传至 enable()；undefined 时 JS 侧用 PixelRatio.get()。 */
+  devicePixelRatio?: WithDefault<Float, 1>;
+  /** 仅 webgl；控制自动 swap。 */
+  disableAutoSwap?: WithDefault<boolean, false>;
+  /** GL 就绪/命令执行结果事件（对齐 Android topChange）。 */
+  onChange?: DirectEventHandler<OnChangeEvent>;
+  /** GL 表面就绪事件。 */
+  onIsReady?: DirectEventHandler<OnIsReadyEvent>;
+}
+
 interface OnChangeEvent {
   value: WithDefault<boolean, false>;
 }
-
-interface OnIsReadyEvent {
-  isReady: WithDefault<boolean, false>;
-}
-
-export default codegenNativeComponent<GCanvasViewNativeComponentProps>('GCanvasView');
+
+interface OnIsReadyEvent {
+  isReady: WithDefault<boolean, false>;
+}
+
+export default codegenNativeComponent<GCanvasViewNativeComponentProps>('GCanvasView');