@antv/g-mobile - npm Package Compare versions

Comparing version 0.0.1-beta.4 to 0.0.1-beta.5

esm/canvas.d.ts

@@ -53,4 +53,2 @@ import { AbstractCanvas, CanvasCfg, Point } from '@antv/g-base';
     _drawRegion(): void;
-    getPointByClient(clientX: number, clientY: number): Point;
-    getClientByPoint(x: number, y: number): Point;
     _drawAll(): void;
@@ -63,3 +61,10 @@ skipDraw(): void;
     refreshElement(element: IElement): void;
+    getPointByEvent(ev: Event): Point;
+    getClientByEvent(event: any): {
+        x: number;
+        y: number;
+    };
+    getPointByClient(clientX: number, clientY: number): Point;
+    getClientByPoint(x: number, y: number): Point;
 }
 export default Canvas;

esm/canvas.js

@@ -46,2 +46,11 @@ import { __extends } from "tslib";
         cfg['quickHit'] = false;
+        // 给一个默认的rect，防止出现问题
+        cfg['boundingClientRect'] = {
+            width: 0,
+            height: 0,
+            left: 0,
+            top: 0,
+            bottom: 0,
+            right: 0,
+        };
         return cfg;
@@ -264,15 +273,2 @@ };
     };
-    // TODO 需考虑透传query信息
-    Canvas.prototype.getPointByClient = function (clientX, clientY) {
-        if (this.isMini()) {
-            return { x: clientX, y: clientY };
-        }
-        return _super.prototype.getPointByClient.call(this, clientX, clientY);
-    };
-    Canvas.prototype.getClientByPoint = function (x, y) {
-        if (this.isMini()) {
-            return { x: x, y: y };
-        }
-        return _super.prototype.getClientByPoint.call(this, x, y);
-    };
     // 绘制所有图形
@@ -286,3 +282,3 @@ Canvas.prototype._drawAll = function () {
         // 针对小程序需要手动调用一次draw方法
-        if (!this.isMiniNative()) {
+        if (this.isMini()) {
             context.draw();
@@ -305,2 +301,62 @@ }
     };
+    // 实现接口
+    Canvas.prototype.getPointByEvent = function (ev) {
+        if (this.isMini()) {
+            var _a = this.getClientByEvent(ev), clientX = _a.x, clientY = _a.y;
+            return this.getPointByClient(clientX, clientY);
+        }
+        return _super.prototype.getPointByEvent.call(this, ev);
+    };
+    // 获取 touch 事件的 clientX 和 clientY 需要单独处理
+    Canvas.prototype.getClientByEvent = function (event) {
+        // 这里需要转换成原始event
+        var ev = event.srcEvent;
+        var clientInfo = ev;
+        if (ev.touches) {
+            if (ev.type === 'touchend') {
+                clientInfo = ev.changedTouches[0];
+            }
+            else {
+                clientInfo = ev.touches[0];
+            }
+        }
+        return {
+            x: clientInfo.clientX,
+            y: clientInfo.clientY,
+        };
+    };
+    // 实现接口
+    Canvas.prototype.getPointByClient = function (clientX, clientY) {
+        if (this.isMini()) {
+            var rect = this.get('boundingClientRect');
+            return {
+                x: clientX + rect.left,
+                y: clientY + rect.top,
+            };
+            return { x: clientX, y: clientY };
+        }
+        var el = this.get('el');
+        var bbox = el.getBoundingClientRect();
+        return {
+            x: clientX - bbox.left,
+            y: clientY - bbox.top,
+        };
+    };
+    // 实现接口
+    Canvas.prototype.getClientByPoint = function (x, y) {
+        if (this.isMini()) {
+            // 小程序内需计算处理canvas的位置信息
+            var rect = this.get('boundingClientRect');
+            return {
+                x: x + rect.left,
+                y: y + rect.top,
+            };
+        }
+        var el = this.get('el');
+        var bbox = el.getBoundingClientRect();
+        return {
+            x: x + bbox.left,
+            y: y + bbox.top,
+        };
+    };
     return Canvas;
@@ -307,0 +363,0 @@ }(AbstractCanvas));

esm/events.d.ts

@@ -18,3 +18,3 @@ import { Event as GraphEvent } from '@antv/g-base';
     handleEvent: (ev: any) => void;
-    _getShape(point: any, ev: Event): IShape;
+    _getShape(point: any, event: any): IShape;
     _getPointInfo(ev: any): any;
@@ -21,0 +21,0 @@ _triggerEvent(type: any, ev: any): void;

esm/events.js

@@ -137,3 +137,4 @@ import Hammer from 'g6-hammerjs';
     // 根据点获取图形，提取成独立方法，便于后续优化
-    EventController.prototype._getShape = function (point, ev) {
+    EventController.prototype._getShape = function (point, event) {
+        var ev = event.srcEvent;
         return this.canvas.getShape(point.x, point.y, ev);
@@ -143,8 +144,21 @@ };
     EventController.prototype._getPointInfo = function (ev) {
-        // 支付宝下单指是pointer，多指是touchs，做个兜底。
-        if (ev.type === 'touchend') {
-            return ev.changedPointers ? ev.changedPointers[0] : ev.changedTouches[0];
+        var canvas = this.canvas;
+        if (canvas.isMini()) {
+            // 支付宝下单指是pointer，多指是touchs，做个兜底。
+            if (ev.type === 'touchend') {
+                return ev.changedPointers ? ev.changedPointers[0] : ev.changedTouches[0];
+            }
+            else {
+                return ev.pointers ? ev.pointers[0] : ev.touches[0];
+            }
         }
         else {
-            return ev.pointers ? ev.pointers[0] : ev.touches[0];
+            var clientPoint = canvas.getClientByEvent(ev);
+            var point = canvas.getPointByEvent(ev);
+            return {
+                x: point.x,
+                y: point.y,
+                clientX: clientPoint.x,
+                clientY: clientPoint.y,
+            };
         }
@@ -151,0 +165,0 @@ };

lib/canvas.d.ts

@@ -53,4 +53,2 @@ import { AbstractCanvas, CanvasCfg, Point } from '@antv/g-base';
     _drawRegion(): void;
-    getPointByClient(clientX: number, clientY: number): Point;
-    getClientByPoint(x: number, y: number): Point;
     _drawAll(): void;
@@ -63,3 +61,10 @@ skipDraw(): void;
     refreshElement(element: IElement): void;
+    getPointByEvent(ev: Event): Point;
+    getClientByEvent(event: any): {
+        x: number;
+        y: number;
+    };
+    getPointByClient(clientX: number, clientY: number): Point;
+    getClientByPoint(x: number, y: number): Point;
 }
 export default Canvas;

lib/canvas.js

@@ -48,2 +48,11 @@ "use strict";
         cfg['quickHit'] = false;
+        // 给一个默认的rect，防止出现问题
+        cfg['boundingClientRect'] = {
+            width: 0,
+            height: 0,
+            left: 0,
+            top: 0,
+            bottom: 0,
+            right: 0,
+        };
         return cfg;
@@ -266,15 +275,2 @@ };
     };
-    // TODO 需考虑透传query信息
-    Canvas.prototype.getPointByClient = function (clientX, clientY) {
-        if (this.isMini()) {
-            return { x: clientX, y: clientY };
-        }
-        return _super.prototype.getPointByClient.call(this, clientX, clientY);
-    };
-    Canvas.prototype.getClientByPoint = function (x, y) {
-        if (this.isMini()) {
-            return { x: x, y: y };
-        }
-        return _super.prototype.getClientByPoint.call(this, x, y);
-    };
     // 绘制所有图形
@@ -288,3 +284,3 @@ Canvas.prototype._drawAll = function () {
         // 针对小程序需要手动调用一次draw方法
-        if (!this.isMiniNative()) {
+        if (this.isMini()) {
             context.draw();
@@ -307,2 +303,62 @@ }
     };
+    // 实现接口
+    Canvas.prototype.getPointByEvent = function (ev) {
+        if (this.isMini()) {
+            var _a = this.getClientByEvent(ev), clientX = _a.x, clientY = _a.y;
+            return this.getPointByClient(clientX, clientY);
+        }
+        return _super.prototype.getPointByEvent.call(this, ev);
+    };
+    // 获取 touch 事件的 clientX 和 clientY 需要单独处理
+    Canvas.prototype.getClientByEvent = function (event) {
+        // 这里需要转换成原始event
+        var ev = event.srcEvent;
+        var clientInfo = ev;
+        if (ev.touches) {
+            if (ev.type === 'touchend') {
+                clientInfo = ev.changedTouches[0];
+            }
+            else {
+                clientInfo = ev.touches[0];
+            }
+        }
+        return {
+            x: clientInfo.clientX,
+            y: clientInfo.clientY,
+        };
+    };
+    // 实现接口
+    Canvas.prototype.getPointByClient = function (clientX, clientY) {
+        if (this.isMini()) {
+            var rect = this.get('boundingClientRect');
+            return {
+                x: clientX + rect.left,
+                y: clientY + rect.top,
+            };
+            return { x: clientX, y: clientY };
+        }
+        var el = this.get('el');
+        var bbox = el.getBoundingClientRect();
+        return {
+            x: clientX - bbox.left,
+            y: clientY - bbox.top,
+        };
+    };
+    // 实现接口
+    Canvas.prototype.getClientByPoint = function (x, y) {
+        if (this.isMini()) {
+            // 小程序内需计算处理canvas的位置信息
+            var rect = this.get('boundingClientRect');
+            return {
+                x: x + rect.left,
+                y: y + rect.top,
+            };
+        }
+        var el = this.get('el');
+        var bbox = el.getBoundingClientRect();
+        return {
+            x: x + bbox.left,
+            y: y + bbox.top,
+        };
+    };
     return Canvas;
@@ -309,0 +365,0 @@ }(g_base_1.AbstractCanvas));

lib/events.d.ts

@@ -18,3 +18,3 @@ import { Event as GraphEvent } from '@antv/g-base';
     handleEvent: (ev: any) => void;
-    _getShape(point: any, ev: Event): IShape;
+    _getShape(point: any, event: any): IShape;
     _getPointInfo(ev: any): any;
@@ -21,0 +21,0 @@ _triggerEvent(type: any, ev: any): void;

lib/events.js

@@ -139,3 +139,4 @@ "use strict";
     // 根据点获取图形，提取成独立方法，便于后续优化
-    EventController.prototype._getShape = function (point, ev) {
+    EventController.prototype._getShape = function (point, event) {
+        var ev = event.srcEvent;
         return this.canvas.getShape(point.x, point.y, ev);
@@ -145,8 +146,21 @@ };
     EventController.prototype._getPointInfo = function (ev) {
-        // 支付宝下单指是pointer，多指是touchs，做个兜底。
-        if (ev.type === 'touchend') {
-            return ev.changedPointers ? ev.changedPointers[0] : ev.changedTouches[0];
+        var canvas = this.canvas;
+        if (canvas.isMini()) {
+            // 支付宝下单指是pointer，多指是touchs，做个兜底。
+            if (ev.type === 'touchend') {
+                return ev.changedPointers ? ev.changedPointers[0] : ev.changedTouches[0];
+            }
+            else {
+                return ev.pointers ? ev.pointers[0] : ev.touches[0];
+            }
         }
         else {
-            return ev.pointers ? ev.pointers[0] : ev.touches[0];
+            var clientPoint = canvas.getClientByEvent(ev);
+            var point = canvas.getPointByEvent(ev);
+            return {
+                x: point.x,
+                y: point.y,
+                clientX: clientPoint.x,
+                clientY: clientPoint.y,
+            };
         }
@@ -153,0 +167,0 @@ };

package.json

 {
   "name": "@antv/g-mobile",
-  "version": "0.0.1-beta.4",
+  "version": "0.0.1-beta.5",
   "description": "A mobile canvas library which providing 2d",
@@ -31,2 +31,3 @@ "main": "lib/index.js",
   "publishConfig": {
+    "cache": "~/.npm",
     "access": "public"
@@ -52,3 +53,3 @@ },
   "dependencies": {
-    "@antv/g-base": "^0.5.3",
+    "@antv/g-base": "^0.5.6-beta.1",
     "@antv/g-math": "^0.1.6",
@@ -55,0 +56,0 @@ "@antv/matrix-util": "^3.1.0-beta.1",

src/canvas.ts

@@ -52,2 +52,11 @@ import { AbstractCanvas, CanvasCfg, Point } from '@antv/g-base';
     cfg['quickHit'] = false;
+    // 给一个默认的rect，防止出现问题
+    cfg['boundingClientRect'] = {
+      width: 0,
+      height: 0,
+      left: 0,
+      top: 0,
+      bottom: 0,
+      right: 0,
+    };
     return cfg;
@@ -282,19 +291,2 @@ }
 
-  // TODO 需考虑透传query信息
-  getPointByClient(clientX: number, clientY: number): Point {
-    if (this.isMini()) {
-      return { x: clientX, y: clientY };
-    }
-
-    return super.getPointByClient(clientX, clientY);
-  }
-
-  getClientByPoint(x: number, y: number): Point {
-    if (this.isMini()) {
-      return { x, y };
-    }
-
-    return super.getClientByPoint(x, y);
-  }
-
   // 绘制所有图形
@@ -308,3 +300,3 @@ _drawAll() {
     // 针对小程序需要手动调用一次draw方法
-    if (!this.isMiniNative()) {
+    if (this.isMini()) {
       context.draw();
@@ -330,4 +322,69 @@ }
   }
+
+  // 实现接口
+  getPointByEvent(ev: Event): Point {
+    if (this.isMini()) {
+      const { x: clientX, y: clientY } = this.getClientByEvent(ev);
+      return this.getPointByClient(clientX, clientY);
+    }
+
+    return super.getPointByEvent(ev);
+  }
+
+  // 获取 touch 事件的 clientX 和 clientY 需要单独处理
+  getClientByEvent(event: any) {
+    // 这里需要转换成原始event
+    const ev: Event = event.srcEvent;
+    let clientInfo: MouseEvent | Touch = ev as MouseEvent;
+    if ((ev as TouchEvent).touches) {
+      if (ev.type === 'touchend') {
+        clientInfo = (ev as TouchEvent).changedTouches[0];
+      } else {
+        clientInfo = (ev as TouchEvent).touches[0];
+      }
+    }
+    return {
+      x: clientInfo.clientX,
+      y: clientInfo.clientY,
+    };
+  }
+
+  // 实现接口
+  getPointByClient(clientX: number, clientY: number): Point {
+    if (this.isMini()) {
+      const rect = this.get('boundingClientRect');
+      return {
+        x: clientX + rect.left,
+        y: clientY + rect.top,
+      };
+      return { x: clientX, y: clientY };
+    }
+
+    const el = this.get('el');
+    const bbox = el.getBoundingClientRect();
+    return {
+      x: clientX - bbox.left,
+      y: clientY - bbox.top,
+    };
+  }
+
+  // 实现接口
+  getClientByPoint(x: number, y: number): Point {
+    if (this.isMini()) {
+      // 小程序内需计算处理canvas的位置信息
+      const rect = this.get('boundingClientRect');
+      return {
+        x: x + rect.left,
+        y: y + rect.top,
+      };
+    }
+    const el = this.get('el');
+    const bbox = el.getBoundingClientRect();
+    return {
+      x: x + bbox.left,
+      y: y + bbox.top,
+    };
+  }
 }
 
 export default Canvas;

src/events.ts

@@ -6,2 +6,3 @@ import Hammer from 'g6-hammerjs';
 import { each, isParent } from './util/util';
+import MiniCanvas from './canvas';
 const CLICK_OFFSET = 40;
@@ -172,3 +173,4 @@ const LEFT_BTN_CODE = 0;
   // 根据点获取图形，提取成独立方法，便于后续优化
-  _getShape(point, ev: Event) {
+  _getShape(point, event: any) {
+    const ev: Event = event.srcEvent;
     return this.canvas.getShape(point.x, point.y, ev);
@@ -178,7 +180,19 @@ }
   _getPointInfo(ev) {
-    // 支付宝下单指是pointer，多指是touchs，做个兜底。
-    if (ev.type === 'touchend') {
-      return ev.changedPointers ? ev.changedPointers[0] : ev.changedTouches[0];
+    const canvas = this.canvas as MiniCanvas;
+    if (canvas.isMini()) {
+      // 支付宝下单指是pointer，多指是touchs，做个兜底。
+      if (ev.type === 'touchend') {
+        return ev.changedPointers ? ev.changedPointers[0] : ev.changedTouches[0];
+      } else {
+        return ev.pointers ? ev.pointers[0] : ev.touches[0];
+      }
     } else {
-      return ev.pointers ? ev.pointers[0] : ev.touches[0];
+      const clientPoint = canvas.getClientByEvent(ev);
+      const point = canvas.getPointByEvent(ev);
+      return {
+        x: point.x,
+        y: point.y,
+        clientX: clientPoint.x,
+        clientY: clientPoint.y,
+      };
     }
@@ -185,0 +199,0 @@ }

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

1931323

increased by0.74%

Lines of code

13089

increased by1.73%

Dependency changes

• Updated@antv/g-base@^0.5.6-beta.1