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

package/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/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/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/components/CanvasView.js

@@ -1,20 +1,20 @@
-import {Platform, requireNativeComponent} from 'react-native';
-
-// 不能写在 Platform.select 对象字面量里：各分支会在模块加载时全部求值。
-// 鸿蒙上 android 分支的 requireNativeComponent('GCanvasView') 会先注册一次，
-// 再和 codegenNativeComponent('GCanvasView') 冲突，抛
-// "Tried to register two views with the same name GCanvasView" 并白屏。
-let CanvasView;
-if (Platform.OS === 'ios') {
-  CanvasView = requireNativeComponent('RCTGCanvasView', null, {
-    nativeOnly: {onChange: true},
-  });
-} else if (Platform.OS === 'android') {
-  CanvasView = requireNativeComponent('GCanvasView', null, {
-    nativeOnly: {onChange: true},
-  });
-} else {
-  CanvasView = require('../specs/v1/GCanvasViewNativeComponent').default;
-}
-
-export default CanvasView;
+import {Platform, requireNativeComponent} from 'react-native';
+
+// 不能写在 Platform.select 对象字面量里：各分支会在模块加载时全部求值。
+// 鸿蒙上 android 分支的 requireNativeComponent('GCanvasView') 会先注册一次，
+// 再和 codegenNativeComponent('GCanvasView') 冲突，抛
+// "Tried to register two views with the same name GCanvasView" 并白屏。
+let CanvasView;
+if (Platform.OS === 'ios') {
+  CanvasView = requireNativeComponent('RCTGCanvasView', null, {
+    nativeOnly: {onChange: true},
+  });
+} else if (Platform.OS === 'android') {
+  CanvasView = requireNativeComponent('GCanvasView', null, {
+    nativeOnly: {onChange: true},
+  });
+} else {
+  CanvasView = require('../specs/v1/GCanvasViewNativeComponent').default;
+}
+
+export default CanvasView;