@antv/g-canvas - npm Package Compare versions

Comparing version 0.4.3 to 0.4.4

esm/canvas.d.ts

@@ -33,2 +33,3 @@ import { AbstractCanvas } from '@antv/g-base';
     clear(): void;
+    getShape(x: number, y: number): any;
     _getRefreshRegion(): any;
@@ -41,2 +42,12 @@ /**
     _clearFrame(): void;
+    getCanvasBBox(): {
+        minX: number;
+        minY: number;
+        x: number;
+        y: number;
+        width: any;
+        height: any;
+        maxX: any;
+        maxY: any;
+    };
     draw(): void;
@@ -43,0 +54,0 @@ _drawAll(): void;

esm/canvas.js

 import { __extends } from "tslib";
 import { AbstractCanvas } from '@antv/g-base';
+import { getShape } from './util/hit';
 import EventController from '@antv/g-base/lib/event/event-contoller';
@@ -8,3 +9,2 @@ import * as Shape from './shape';
 import { getPixelRatio, requestAnimationFrame, clearAnimationFrame } from './util/util';
-var REFRSH_COUNT = 30; // 局部刷新的元素个数，超过后合并绘图区域
 var Canvas = /** @class */ (function (_super) {
@@ -26,2 +26,3 @@ __extends(Canvas, _super);
         cfg['clipView'] = true;
+        cfg['quickHit'] = false;
         return cfg;
@@ -60,8 +61,7 @@ };
     Canvas.prototype.getViewRange = function () {
-        var element = this.get('el');
         return {
             minX: 0,
             minY: 0,
-            maxX: element.width,
-            maxY: element.height,
+            maxX: this.get('width'),
+            maxY: this.get('height'),
         };
@@ -105,2 +105,8 @@ };
     };
+    Canvas.prototype.getShape = function (x, y) {
+        if (this.get('quickHit')) {
+            return getShape(this, x, y);
+        }
+        return _super.prototype.getShape.call(this, x, y, null);
+    };
     // 对绘制区域边缘取整，避免浮点数问题
@@ -152,2 +158,16 @@ Canvas.prototype._getRefreshRegion = function () {
     };
+    Canvas.prototype.getCanvasBBox = function () {
+        var width = this.get('width');
+        var height = this.get('height');
+        return {
+            minX: 0,
+            minY: 0,
+            x: 0,
+            y: 0,
+            width: width,
+            height: height,
+            maxX: width,
+            maxY: height,
+        };
+    };
     // 手工调用绘制接口
@@ -154,0 +174,0 @@ Canvas.prototype.draw = function () {

esm/shape/base.js

@@ -93,4 +93,11 @@ import { __assign, __extends } from "tslib";
     ShapeBase.prototype._afterDraw = function () {
+        var bbox = this.getCanvasBBox();
+        var canvas = this.getCanvas();
         // 绘制的时候缓存包围盒
-        this.set('cacheCanvasBBox', this.getCanvasBBox());
+        this.set('cacheCanvasBBox', bbox);
+        if (canvas) {
+            // @ts-ignore
+            var viewRange = canvas.getViewRange();
+            this.set('isInView', intersectRect(bbox, viewRange));
+        }
         // 绘制后消除标记
@@ -101,2 +108,3 @@ this.set('hasChanged', false);
         this.set('cacheCanvasBBox', null);
+        this.set('isInView', null);
         this.set('hasChanged', false);
@@ -103,0 +111,0 @@ };

esm/util/arrow.js

 import { __assign, __rest } from "tslib";
 import { Path } from '../shape';
-var sin = Math.sin;
-var cos = Math.cos;
+var sin = Math.sin, cos = Math.cos, atan2 = Math.atan2, PI = Math.PI;
 function _addDefaultArrow(shape, attrs, x1, y1, x2, y2, isStart) {
@@ -9,3 +8,3 @@ var stroke = attrs.stroke, lineWidth = attrs.lineWidth;
     var y = y1 - y2;
-    var rad = Math.atan2(y, x);
+    var rad = atan2(y, x);
     var arrowShape = new Path({
@@ -17,4 +16,3 @@ type: 'path',
             // 默认箭头的边长为 10，夹角为 60 度
-            path: "M" + 10 * Math.cos(Math.PI / 6) + "," + 10 * Math.sin(Math.PI / 6) + " L0,0 L" + 10 * Math.cos(Math.PI / 6) + ",-" + 10 *
-                Math.sin(Math.PI / 6),
+            path: "M" + 10 * cos(PI / 6) + "," + 10 * sin(PI / 6) + " L0,0 L" + 10 * cos(PI / 6) + ",-" + 10 * sin(PI / 6),
             // 使用 shape stroke 值
@@ -40,3 +38,3 @@ stroke: stroke,
     var y = y1 - y2;
-    var rad = Math.atan2(y, x);
+    var rad = atan2(y, x);
     if (d) {
@@ -73,3 +71,3 @@ x2 = x2 - cos(rad) * d;
 export function getShortenOffset(x1, y1, x2, y2, d) {
-    var rad = Math.atan2(y2 - y1, x2 - x1);
+    var rad = atan2(y2 - y1, x2 - x1);
     return {
@@ -76,0 +74,0 @@ dx: cos(rad) * d,

esm/util/in-path/point-in-path.js

@@ -1,2 +0,2 @@
-import { getOffScreenContext } from '../util';
+import { getOffScreenContext } from '@antv/g-base/lib/util/offscreen';
 export default function isPointInPath(shape, x, y) {
@@ -3,0 +3,0 @@ var ctx = getOffScreenContext();

esm/util/util.d.ts

@@ -20,3 +20,2 @@ export declare function getPixelRatio(): number;
 export declare function inBox(minX: number, minY: number, width: number, height: number, x: any, y: any): boolean;
-export declare function getOffScreenContext(): any;
 export declare function intersectRect(box1: any, box2: any): boolean;
@@ -23,0 +22,0 @@ export declare function mergeRegion(region1: any, region2: any): any;

esm/util/util.js

@@ -28,13 +28,2 @@ export function getPixelRatio() {
 }
-// 全局设置一个唯一离屏的 ctx，用于计算 isPointInPath
-var offScreenCtx = null;
-export function getOffScreenContext() {
-    if (!offScreenCtx) {
-        var canvas = document.createElement('canvas');
-        canvas.width = 1;
-        canvas.height = 1;
-        offScreenCtx = canvas.getContext('2d');
-    }
-    return offScreenCtx;
-}
 export function intersectRect(box1, box2) {
@@ -41,0 +30,0 @@ return !(box2.minX > box1.maxX || box2.maxX < box1.minX || box2.minY > box1.maxY || box2.maxY < box1.minY);

lib/canvas.d.ts

@@ -33,2 +33,3 @@ import { AbstractCanvas } from '@antv/g-base';
     clear(): void;
+    getShape(x: number, y: number): any;
     _getRefreshRegion(): any;
@@ -41,2 +42,12 @@ /**
     _clearFrame(): void;
+    getCanvasBBox(): {
+        minX: number;
+        minY: number;
+        x: number;
+        y: number;
+        width: any;
+        height: any;
+        maxX: any;
+        maxY: any;
+    };
     draw(): void;
@@ -43,0 +54,0 @@ _drawAll(): void;

lib/canvas.js

@@ -5,2 +5,3 @@ "use strict";
 var g_base_1 = require("@antv/g-base");
+var hit_1 = require("./util/hit");
 var event_contoller_1 = require("@antv/g-base/lib/event/event-contoller");
@@ -11,3 +12,2 @@ var Shape = require("./shape");
 var util_1 = require("./util/util");
-var REFRSH_COUNT = 30; // 局部刷新的元素个数，超过后合并绘图区域
 var Canvas = /** @class */ (function (_super) {
@@ -29,2 +29,3 @@ tslib_1.__extends(Canvas, _super);
         cfg['clipView'] = true;
+        cfg['quickHit'] = false;
         return cfg;
@@ -63,8 +64,7 @@ };
     Canvas.prototype.getViewRange = function () {
-        var element = this.get('el');
         return {
             minX: 0,
             minY: 0,
-            maxX: element.width,
-            maxY: element.height,
+            maxX: this.get('width'),
+            maxY: this.get('height'),
         };
@@ -108,2 +108,8 @@ };
     };
+    Canvas.prototype.getShape = function (x, y) {
+        if (this.get('quickHit')) {
+            return hit_1.getShape(this, x, y);
+        }
+        return _super.prototype.getShape.call(this, x, y, null);
+    };
     // 对绘制区域边缘取整，避免浮点数问题
@@ -155,2 +161,16 @@ Canvas.prototype._getRefreshRegion = function () {
     };
+    Canvas.prototype.getCanvasBBox = function () {
+        var width = this.get('width');
+        var height = this.get('height');
+        return {
+            minX: 0,
+            minY: 0,
+            x: 0,
+            y: 0,
+            width: width,
+            height: height,
+            maxX: width,
+            maxY: height,
+        };
+    };
     // 手工调用绘制接口
@@ -157,0 +177,0 @@ Canvas.prototype.draw = function () {

lib/shape/base.js

@@ -95,4 +95,11 @@ "use strict";
     ShapeBase.prototype._afterDraw = function () {
+        var bbox = this.getCanvasBBox();
+        var canvas = this.getCanvas();
         // 绘制的时候缓存包围盒
-        this.set('cacheCanvasBBox', this.getCanvasBBox());
+        this.set('cacheCanvasBBox', bbox);
+        if (canvas) {
+            // @ts-ignore
+            var viewRange = canvas.getViewRange();
+            this.set('isInView', util_1.intersectRect(bbox, viewRange));
+        }
         // 绘制后消除标记
@@ -103,2 +110,3 @@ this.set('hasChanged', false);
         this.set('cacheCanvasBBox', null);
+        this.set('isInView', null);
         this.set('hasChanged', false);
@@ -105,0 +113,0 @@ };

lib/util/arrow.js

@@ -5,4 +5,3 @@ "use strict";
 var shape_1 = require("../shape");
-var sin = Math.sin;
-var cos = Math.cos;
+var sin = Math.sin, cos = Math.cos, atan2 = Math.atan2, PI = Math.PI;
 function _addDefaultArrow(shape, attrs, x1, y1, x2, y2, isStart) {
@@ -12,3 +11,3 @@ var stroke = attrs.stroke, lineWidth = attrs.lineWidth;
     var y = y1 - y2;
-    var rad = Math.atan2(y, x);
+    var rad = atan2(y, x);
     var arrowShape = new shape_1.Path({
@@ -20,4 +19,3 @@ type: 'path',
             // 默认箭头的边长为 10，夹角为 60 度
-            path: "M" + 10 * Math.cos(Math.PI / 6) + "," + 10 * Math.sin(Math.PI / 6) + " L0,0 L" + 10 * Math.cos(Math.PI / 6) + ",-" + 10 *
-                Math.sin(Math.PI / 6),
+            path: "M" + 10 * cos(PI / 6) + "," + 10 * sin(PI / 6) + " L0,0 L" + 10 * cos(PI / 6) + ",-" + 10 * sin(PI / 6),
             // 使用 shape stroke 值
@@ -43,3 +41,3 @@ stroke: stroke,
     var y = y1 - y2;
-    var rad = Math.atan2(y, x);
+    var rad = atan2(y, x);
     if (d) {
@@ -76,3 +74,3 @@ x2 = x2 - cos(rad) * d;
 function getShortenOffset(x1, y1, x2, y2, d) {
-    var rad = Math.atan2(y2 - y1, x2 - x1);
+    var rad = atan2(y2 - y1, x2 - x1);
     return {
@@ -79,0 +77,0 @@ dx: cos(rad) * d,

lib/util/in-path/point-in-path.js

 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-var util_1 = require("../util");
+var offscreen_1 = require("@antv/g-base/lib/util/offscreen");
 function isPointInPath(shape, x, y) {
-    var ctx = util_1.getOffScreenContext();
+    var ctx = offscreen_1.getOffScreenContext();
     shape.createPath(ctx);
@@ -7,0 +7,0 @@ return ctx.isPointInPath(x, y);

lib/util/util.d.ts

@@ -20,3 +20,2 @@ export declare function getPixelRatio(): number;
 export declare function inBox(minX: number, minY: number, width: number, height: number, x: any, y: any): boolean;
-export declare function getOffScreenContext(): any;
 export declare function intersectRect(box1: any, box2: any): boolean;
@@ -23,0 +22,0 @@ export declare function mergeRegion(region1: any, region2: any): any;

lib/util/util.js

@@ -33,14 +33,2 @@ "use strict";
 exports.inBox = inBox;
-// 全局设置一个唯一离屏的 ctx，用于计算 isPointInPath
-var offScreenCtx = null;
-function getOffScreenContext() {
-    if (!offScreenCtx) {
-        var canvas = document.createElement('canvas');
-        canvas.width = 1;
-        canvas.height = 1;
-        offScreenCtx = canvas.getContext('2d');
-    }
-    return offScreenCtx;
-}
-exports.getOffScreenContext = getOffScreenContext;
 function intersectRect(box1, box2) {
@@ -47,0 +35,0 @@ return !(box2.minX > box1.maxX || box2.maxX < box1.minX || box2.minY > box1.maxY || box2.maxY < box1.minY);

package.json

 {
   "name": "@antv/g-canvas",
-  "version": "0.4.3",
+  "version": "0.4.4",
   "description": "A canvas library which providing 2d",
@@ -58,4 +58,4 @@ "main": "lib/index.js",
   "dependencies": {
-    "@antv/g-base": "^0.4.1",
-    "@antv/g-math": "^0.1.1",
+    "@antv/g-base": "^0.4.2",
+    "@antv/g-math": "^0.1.2",
     "@antv/gl-matrix": "~2.7.1",
@@ -66,3 +66,3 @@ "@antv/path-util": "~2.0.5",
   "__npminstall_done": false,
-  "gitHead": "6948b647ec006e956429f72b9b8b1264dd2c5846"
+  "gitHead": "f2c982fdd01eb95782721ce01eb07bd7c0c86e48"
 }

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

1394726

increased by1.35%

Number of package files

190

increased by3.26%

Lines of code

7483

increased by2.79%

Dependency changes

• Updated@antv/g-base@^0.4.2

• Updated@antv/g-math@^0.1.2