Skip to content

Commit

Permalink
feat(clip): add clippath
Browse files Browse the repository at this point in the history
  • Loading branch information
@jtenner @hustcc
jtenner authored and hustcc committed Nov 22, 2019
1 parent f83decf commit db18dc3
Show file tree
Hide file tree
Showing 5 changed files with 386 additions and 29 deletions.
55 changes: 55 additions & 0 deletions __tests__/classes/CanvasRenderingContext2D.__getClippingPath.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,55 @@
let ctx;
beforeEach(() => {
// get a new context each test
ctx = document.createElement('canvas')
.getContext('2d');
});

afterEach(() => {
const drawCalls = ctx.__getClippingRegion();
expect(drawCalls).toMatchSnapshot();
});

describe('__getClippingRegion', () => {
it("should be empty when there are no path elements", () => {
ctx.clip();
});

it("should store the clipping region", () => {
ctx.rect(1, 2, 3, 4);
ctx.arc(1, 2, 3, 4, 5);
ctx.clip();
});

it("shouldn't store the whole clipping region twice when clip is called twice", () => {
ctx.rect(1, 2, 3, 4);
ctx.arc(1, 2, 3, 4, 5);
ctx.clip();
ctx.rect(1, 2, 3, 4);
ctx.arc(1, 2, 3, 4, 5);
ctx.clip();
});

it("should save the clipping region correctly when saved", () => {
ctx.rect(1, 2, 3, 4);
ctx.arc(1, 2, 3, 4, 5);
ctx.clip();
const region = ctx.__getClippingRegion();
ctx.save();
expect(region).toStrictEqual(ctx.__getClippingRegion());
});

it("should save the clipping region correctly when saved", () => {
ctx.rect(1, 2, 3, 4);
ctx.arc(1, 2, 3, 4, 5);
ctx.clip();
const region = ctx.__getClippingRegion();
ctx.save();
ctx.rect(1, 2, 3, 4);
ctx.arc(1, 2, 3, 4, 5);
ctx.clip();
expect(region).not.toStrictEqual(ctx.__getClippingRegion());
ctx.restore();
expect(region).toStrictEqual(ctx.__getClippingRegion());
});
});
267 changes: 267 additions & 0 deletions __tests__/classes/__snapshots__/CanvasRenderingContext2D.__getClippingPath.js.snap
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,267 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP

exports[`__getClippingRegion should be empty when there are no path elements 1`] = `Array []`;

exports[`__getClippingRegion should save the clipping region correctly when saved 1`] = `
Array [
Object {
"props": Object {
"height": 4,
"width": 3,
"x": 1,
"y": 2,
},
"transform": Array [
1,
0,
0,
1,
0,
0,
],
"type": "rect",
},
Object {
"props": Object {
"anticlockwise": false,
"endAngle": 5,
"radius": 3,
"startAngle": 4,
"x": 1,
"y": 2,
},
"transform": Array [
1,
0,
0,
1,
0,
0,
],
"type": "arc",
},
]
`;

exports[`__getClippingRegion should save the clipping region correctly when saved 2`] = `
Array [
Object {
"props": Object {
"height": 4,
"width": 3,
"x": 1,
"y": 2,
},
"transform": Array [
1,
0,
0,
1,
0,
0,
],
"type": "rect",
},
Object {
"props": Object {
"anticlockwise": false,
"endAngle": 5,
"radius": 3,
"startAngle": 4,
"x": 1,
"y": 2,
},
"transform": Array [
1,
0,
0,
1,
0,
0,
],
"type": "arc",
},
]
`;

exports[`__getClippingRegion should store the clipping region 1`] = `
Array [
Object {
"props": Object {
"height": 4,
"width": 3,
"x": 1,
"y": 2,
},
"transform": Array [
1,
0,
0,
1,
0,
0,
],
"type": "rect",
},
Object {
"props": Object {
"anticlockwise": false,
"endAngle": 5,
"radius": 3,
"startAngle": 4,
"x": 1,
"y": 2,
},
"transform": Array [
1,
0,
0,
1,
0,
0,
],
"type": "arc",
},
]
`;

exports[`__getClippingRegion shouldn't store the whole clipping region twice when clip is called twice 1`] = `
Array [
Object {
"props": Object {
"height": 4,
"width": 3,
"x": 1,
"y": 2,
},
"transform": Array [
1,
0,
0,
1,
0,
0,
],
"type": "rect",
},
Object {
"props": Object {
"anticlockwise": false,
"endAngle": 5,
"radius": 3,
"startAngle": 4,
"x": 1,
"y": 2,
},
"transform": Array [
1,
0,
0,
1,
0,
0,
],
"type": "arc",
},
Object {
"props": Object {
"fillRule": "nonzero",
"path": Array [
Object {
"props": Object {},
"transform": Array [
1,
0,
0,
1,
0,
0,
],
"type": "beginPath",
},
Object {
"props": Object {
"height": 4,
"width": 3,
"x": 1,
"y": 2,
},
"transform": Array [
1,
0,
0,
1,
0,
0,
],
"type": "rect",
},
Object {
"props": Object {
"anticlockwise": false,
"endAngle": 5,
"radius": 3,
"startAngle": 4,
"x": 1,
"y": 2,
},
"transform": Array [
1,
0,
0,
1,
0,
0,
],
"type": "arc",
},
],
},
"transform": Array [
1,
0,
0,
1,
0,
0,
],
"type": "clip",
},
Object {
"props": Object {
"height": 4,
"width": 3,
"x": 1,
"y": 2,
},
"transform": Array [
1,
0,
0,
1,
0,
0,
],
"type": "rect",
},
Object {
"props": Object {
"anticlockwise": false,
"endAngle": 5,
"radius": 3,
"startAngle": 4,
"x": 1,
"y": 2,
},
"transform": Array [
1,
0,
0,
1,
0,
0,
],
"type": "arc",
},
]
`;
12 changes: 6 additions & 6 deletions package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,16 +15,16 @@
"parse-color": "^1.0.0"
},
"devDependencies": {
"@babel/cli": "^7.6.4",
"@babel/core": "^7.6.4",
"@babel/plugin-proposal-class-properties": "^7.5.5",
"@babel/preset-env": "^7.6.3",
"@babel/cli": "^7.7.0",
"@babel/core": "^7.7.2",
"@babel/plugin-proposal-class-properties": "^7.7.0",
"@babel/preset-env": "^7.7.1",
"@commitlint/cli": "^8.2.0",
"@commitlint/config-angular": "^8.2.0",
"babel-jest": "^24.9.0",
"babel-plugin-version": "^0.2.3",
"coveralls": "^3.0.7",
"husky": "^3.0.9",
"coveralls": "^3.0.8",
"husky": "^3.1.0",
"jest": "^24.9.0"
},
"commitlint": {
Expand Down
Loading

0 comments on commit db18dc3

Please sign in to comment.