Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
Socket
Sign inDemoInstall
Socket
Sign inDemoInstall

pure-canvas

Package Overview
Dependencies
Maintainers
1
Versions
62
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

pure-canvas - npm Package Compare versions

Comparing version 0.6.12 to 0.6.13

4

lib/Circle.d.ts

@@ -8,2 +8,3 @@ import { Point } from './Node';

fillStyle?: string;
lineDash?: Array<number>;
}

@@ -21,3 +22,4 @@ export interface CircleParameters extends CircleStyle {

private fillStyle;
constructor({x, y, radius, lineWidth, strokeStyle, fillStyle}: CircleParameters);
private lineDash;
constructor({x, y, radius, lineWidth, strokeStyle, fillStyle, lineDash}: CircleParameters);
draw(context: CanvasRenderingContext2D): void;

@@ -24,0 +26,0 @@ intersection({x, y}: Point): Circle<T> | undefined;

22

lib/Circle.js

@@ -5,3 +5,3 @@ "use strict";

class Circle extends NodeFixedBounds_1.default {
constructor({ x = 0, y = 0, radius, lineWidth = 1, strokeStyle = 'rgba(0, 0, 0, 1)', fillStyle = 'rgba(255, 255, 255, 1)' }) {
constructor({ x = 0, y = 0, radius, lineWidth = 1, strokeStyle = 'rgba(0, 0, 0, 1)', fillStyle = 'rgba(255, 255, 255, 1)', lineDash = [] }) {
const minX = x - radius - lineWidth / 2;

@@ -19,15 +19,17 @@ const minY = y - radius - lineWidth / 2;

this.fillStyle = fillStyle;
this.lineDash = lineDash;
}
draw(context) {
const { x, y, radius, strokeStyle, lineWidth, fillStyle } = this;
const oldStrokeStyle = context.strokeStyle;
const oldFillStyle = context.fillStyle;
const oldLineWidth = context.lineWidth;
const oldLineDash = context.getLineDash();
context.beginPath();
context.arc(x, y, radius, 0, 2 * Math.PI, false);
context.strokeStyle = strokeStyle;
context.fillStyle = fillStyle;
context.lineWidth = lineWidth;
context.arc(this.x, this.y, this.radius, 0, 2 * Math.PI, false);
context.strokeStyle = this.strokeStyle;
context.fillStyle = this.fillStyle;
context.lineWidth = this.lineWidth;
context.fill();
if (lineWidth > 0) {
if (this.lineWidth > 0) {
context.setLineDash(this.lineDash);
context.stroke();

@@ -39,6 +41,8 @@ }

context.lineWidth = oldLineWidth;
if (this.lineWidth > 0) {
context.setLineDash(oldLineDash);
}
}
intersection({ x, y }) {
const { x: ox, y: oy, radius, lineWidth } = this;
if (Math.pow((x - ox), 2) + Math.pow((y - oy), 2) <= Math.pow((radius + lineWidth / 2), 2)) {
if (Math.pow((x - this.x), 2) + Math.pow((y - this.y), 2) <= Math.pow((this.radius + this.lineWidth / 2), 2)) {
return this;

@@ -45,0 +49,0 @@ }

4

lib/Line.d.ts

@@ -7,2 +7,3 @@ import { Point } from './Node';

lineCap?: string;
lineDash?: Array<number>;
}

@@ -23,3 +24,4 @@ export interface LineParameters extends LineStyle {

private lineCap;
constructor({x1, y1, x2, y2, strokeStyle, lineWidth, lineCap}: LineParameters);
private lineDash;
constructor({x1, y1, x2, y2, strokeStyle, lineWidth, lineCap, lineDash}: LineParameters);
draw(context: CanvasRenderingContext2D): void;

@@ -26,0 +28,0 @@ intersection({x, y}: Point): Line<T> | undefined;

32

lib/Line.js

@@ -5,3 +5,3 @@ "use strict";

class Line extends NodeFixedBounds_1.default {
constructor({ x1, y1, x2, y2, strokeStyle = 'rgba(0, 0, 0, 1)', lineWidth = 1, lineCap = 'butt' }) {
constructor({ x1, y1, x2, y2, strokeStyle = 'rgba(0, 0, 0, 1)', lineWidth = 1, lineCap = 'butt', lineDash = [] }) {
const minX = Math.min(x1, x2) - lineWidth / 2;

@@ -20,15 +20,17 @@ const minY = Math.min(y1, y2) - lineWidth / 2;

this.lineCap = lineCap;
this.lineDash = lineDash;
}
draw(context) {
const { x1, y1, x2, y2, strokeStyle, lineWidth, lineCap } = this;
const oldStrokeStyle = context.strokeStyle;
const oldLineWidth = context.lineWidth;
const oldLineCap = context.lineCap;
context.strokeStyle = strokeStyle;
context.lineWidth = lineWidth;
context.lineCap = lineCap;
const oldLineDash = context.getLineDash();
context.strokeStyle = this.strokeStyle;
context.lineWidth = this.lineWidth;
context.lineCap = this.lineCap;
context.beginPath();
context.moveTo(x1, y1);
context.lineTo(x2, y2);
if (lineWidth > 0) {
context.moveTo(this.x1, this.y1);
context.lineTo(this.x2, this.y2);
if (this.lineWidth > 0) {
context.setLineDash(this.lineDash);
context.stroke();

@@ -40,6 +42,8 @@ }

context.lineCap = oldLineCap;
if (this.lineWidth > 0) {
context.setLineDash(oldLineDash);
}
}
intersection({ x, y }) {
const { x1, y1, x2, y2, lineWidth } = this;
const distance2 = Math.pow((x2 - x1), 2) + Math.pow((y2 - y1), 2);
const distance2 = Math.pow((this.x2 - this.x1), 2) + Math.pow((this.y2 - this.y1), 2);
let t;

@@ -50,8 +54,8 @@ if (distance2 === 0) {

else {
t = ((x - x1) * (x2 - x1) + (y - y1) * (y2 - y1)) / distance2;
t = ((x - this.x1) * (this.x2 - this.x1) + (y - this.y1) * (this.y2 - this.y1)) / distance2;
}
if (0 <= t && t <= 1) {
const dx = x - (x1 + t * (x2 - x1));
const dy = y - (y1 + t * (y2 - y1));
if (Math.pow(dx, 2) + Math.pow(dy, 2) <= Math.pow((lineWidth / 2), 2)) {
const dx = x - (this.x1 + t * (this.x2 - this.x1));
const dy = y - (this.y1 + t * (this.y2 - this.y1));
if (Math.pow(dx, 2) + Math.pow(dy, 2) <= Math.pow((this.lineWidth / 2), 2)) {
return this;

@@ -58,0 +62,0 @@ }

4

lib/LineString.d.ts

@@ -7,2 +7,3 @@ import Node, { Point } from './Node';

lineCap?: string;
lineDash?: Array<number>;
}

@@ -17,3 +18,4 @@ export interface LineStringParameters extends LineStringStyle {

private lineCap;
constructor({points, strokeStyle, lineWidth, lineCap}: LineStringParameters);
private lineDash;
constructor({points, strokeStyle, lineWidth, lineCap, lineDash}: LineStringParameters);
draw(context: CanvasRenderingContext2D): void;

@@ -20,0 +22,0 @@ intersection({x, y}: Point): Node<T> | undefined;

32

lib/LineString.js

@@ -5,3 +5,3 @@ "use strict";

class LineString extends NodeFixedBounds_1.default {
constructor({ points, strokeStyle = 'rgba(0, 0, 0, 1)', lineWidth = 1, lineCap = 'butt' }) {
constructor({ points, strokeStyle = 'rgba(0, 0, 0, 1)', lineWidth = 1, lineCap = 'butt', lineDash = [] }) {
let minX = Number.POSITIVE_INFINITY;

@@ -23,21 +23,23 @@ let minY = Number.POSITIVE_INFINITY;

this.lineCap = lineCap;
this.lineDash = lineDash;
}
draw(context) {
const { points, strokeStyle, lineWidth, lineCap } = this;
const oldStrokeStyle = context.strokeStyle;
const oldLineWidth = context.lineWidth;
const oldLineCap = context.lineCap;
context.strokeStyle = strokeStyle;
context.lineWidth = lineWidth;
context.lineCap = lineCap;
const oldLineDash = context.getLineDash();
context.strokeStyle = this.strokeStyle;
context.lineWidth = this.lineWidth;
context.lineCap = this.lineCap;
context.beginPath();
if (points.length >= 1) {
const { x, y } = points[0];
if (this.points.length >= 1) {
const { x, y } = this.points[0];
context.moveTo(x, y);
}
for (let i = 1; i < points.length; i++) {
for (let i = 1; i < this.points.length; i++) {
const { x, y } = this.points[i];
context.lineTo(x, y);
}
if (lineWidth > 0) {
if (this.lineWidth > 0) {
context.setLineDash(this.lineDash);
context.stroke();

@@ -49,8 +51,10 @@ }

context.lineCap = oldLineCap;
if (this.lineWidth > 0) {
context.setLineDash(oldLineDash);
}
}
intersection({ x, y }) {
const { points, lineWidth } = this;
for (let i = 1; i < points.length; i++) {
const { x: x1, y: y1 } = points[i - 1];
const { x: x2, y: y2 } = points[i];
for (let i = 1; i < this.points.length; i++) {
const { x: x1, y: y1 } = this.points[i - 1];
const { x: x2, y: y2 } = this.points[i];
const distance2 = Math.pow((x2 - x1), 2) + Math.pow((y2 - y1), 2);

@@ -67,3 +71,3 @@ let t;

const dy = y - (y1 + t * (y2 - y1));
if (Math.pow(dx, 2) + Math.pow(dy, 2) <= Math.pow((lineWidth / 2), 2)) {
if (Math.pow(dx, 2) + Math.pow(dy, 2) <= Math.pow((this.lineWidth / 2), 2)) {
return this;

@@ -70,0 +74,0 @@ }

4

lib/Polygon.d.ts

@@ -7,2 +7,3 @@ import { Point } from './Node';

fillStyle?: string;
lineDash?: Array<number>;
}

@@ -17,3 +18,4 @@ export interface PolygonParameters extends PolygonStyle {

private fillStyle;
constructor({points, strokeStyle, lineWidth, fillStyle}: PolygonParameters);
private lineDash;
constructor({points, strokeStyle, lineWidth, fillStyle, lineDash}: PolygonParameters);
draw(context: CanvasRenderingContext2D): void;

@@ -20,0 +22,0 @@ intersection({x, y}: Point): Polygon<T> | undefined;

38

lib/Polygon.js

@@ -6,3 +6,3 @@ "use strict";

class Polygon extends NodeFixedBounds_1.default {
constructor({ points, strokeStyle = 'rgba(0, 0, 0, 1)', lineWidth = 1, fillStyle = 'rgba(255, 255, 255, 1)' }) {
constructor({ points, strokeStyle = 'rgba(0, 0, 0, 1)', lineWidth = 1, fillStyle = 'rgba(255, 255, 255, 1)', lineDash = [] }) {
// TODO: lineWidth to increase bounds

@@ -27,22 +27,23 @@ let minX = Number.POSITIVE_INFINITY;

this.fillStyle = fillStyle;
this.lineDash = lineDash;
}
draw(context) {
const { points, strokeStyle, lineWidth, fillStyle } = this;
const oldStrokeStyle = context.strokeStyle;
const oldLineWidth = context.lineWidth;
const oldFillStyle = context.fillStyle;
context.strokeStyle = strokeStyle;
context.lineWidth = lineWidth;
context.fillStyle = fillStyle;
const oldLineDash = context.getLineDash();
context.strokeStyle = this.strokeStyle;
context.lineWidth = this.lineWidth;
context.fillStyle = this.fillStyle;
context.beginPath();
for (let i = 0; i < points.length; i++) {
for (let i = 0; i < this.points.length; i++) {
// TODO:
// Given an option 'automaticCounterHoles' => automatically reverse the 2nd, 3rd, 4th, etc. polygons
// For now just force API user to make sure holes are in counter-clockwise direction
if (points[i].length >= 1) {
const { x, y } = points[i][0];
if (this.points[i].length >= 1) {
const { x, y } = this.points[i][0];
context.moveTo(x, y);
}
for (let j = 1; j < points[i].length; j++) {
const { x, y } = points[i][j];
for (let j = 1; j < this.points[i].length; j++) {
const { x, y } = this.points[i][j];
context.lineTo(x, y);

@@ -53,3 +54,4 @@ }

context.fill();
if (lineWidth > 0) {
if (this.lineWidth > 0) {
context.setLineDash(this.lineDash);
context.stroke();

@@ -60,14 +62,16 @@ }

context.fillStyle = oldFillStyle;
if (this.lineWidth > 0) {
context.setLineDash(oldLineDash);
}
}
intersection({ x, y }) {
const { points, lineWidth } = this;
const vertices = [];
// TODO: algorithm should take lineWidth into account
vertices.push(zeroPoint);
for (let i = 0; i < points.length; i++) {
for (let j = 0; j < points[i].length; j++) {
vertices.push(points[i][j]);
for (let i = 0; i < this.points.length; i++) {
for (let j = 0; j < this.points[i].length; j++) {
vertices.push(this.points[i][j]);
}
if (points[i].length >= 1) {
vertices.push(points[i][0]);
if (this.points[i].length >= 1) {
vertices.push(this.points[i][0]);
}

@@ -74,0 +78,0 @@ vertices.push(zeroPoint);

4

lib/Rectangle.d.ts

@@ -7,2 +7,3 @@ import { Point } from './Node';

fillStyle?: string;
lineDash?: Array<number>;
}

@@ -23,3 +24,4 @@ export interface RectangleParameters extends RectangleStyle {

private fillStyle;
constructor({x1, y1, x2, y2, strokeStyle, lineWidth, fillStyle}: RectangleParameters);
private lineDash;
constructor({x1, y1, x2, y2, strokeStyle, lineWidth, fillStyle, lineDash}: RectangleParameters);
draw(context: CanvasRenderingContext2D): void;

@@ -26,0 +28,0 @@ intersection({x: px, y: py}: Point): Rectangle<T> | undefined;

19

lib/Rectangle.js

@@ -5,3 +5,3 @@ "use strict";

class Rectangle extends NodeFixedBounds_1.default {
constructor({ x1, y1, x2, y2, strokeStyle = 'rgba(0, 0, 0, 1)', lineWidth = 1, fillStyle = 'rgba(255, 255, 255, 1)' }) {
constructor({ x1, y1, x2, y2, strokeStyle = 'rgba(0, 0, 0, 1)', lineWidth = 1, fillStyle = 'rgba(255, 255, 255, 1)', lineDash = [] }) {
const minX = Math.min(x1, x2) - lineWidth / 2;

@@ -20,15 +20,17 @@ const maxX = Math.max(x1, x2) + lineWidth / 2;

this.fillStyle = fillStyle;
this.lineDash = lineDash;
}
draw(context) {
const { x1, y1, x2, y2, strokeStyle, lineWidth, fillStyle } = this;
const oldStrokeStyle = context.strokeStyle;
const oldFillStyle = context.fillStyle;
const oldLineWidth = context.lineWidth;
const oldLineDash = context.getLineDash();
context.beginPath();
context.rect(x1, y1, x2 - x1, y2 - y1);
context.strokeStyle = strokeStyle;
context.fillStyle = fillStyle;
context.lineWidth = lineWidth;
context.rect(this.x1, this.y1, this.x2 - this.x1, this.y2 - this.y1);
context.strokeStyle = this.strokeStyle;
context.fillStyle = this.fillStyle;
context.lineWidth = this.lineWidth;
context.fill();
if (lineWidth > 0) {
if (this.lineWidth > 0) {
context.setLineDash(this.lineDash);
context.stroke();

@@ -40,2 +42,5 @@ }

context.lineWidth = oldLineWidth;
if (this.lineWidth > 0) {
context.setLineDash(oldLineDash);
}
}

@@ -42,0 +47,0 @@ intersection({ x: px, y: py }) {

2

package.json
{
"name": "pure-canvas",
"version": "0.6.12",
"version": "0.6.13",
"description": "TODO",

@@ -5,0 +5,0 @@ "main": "lib/Stage.js",

24

src/Circle.ts

@@ -9,2 +9,3 @@ import Node, {Bounds, Point} from './Node';

fillStyle?: string;
lineDash?: Array<number>;
}

@@ -24,4 +25,5 @@

private fillStyle: string;
private lineDash: Array<number>;
constructor({x = 0, y = 0, radius, lineWidth = 1, strokeStyle = 'rgba(0, 0, 0, 1)', fillStyle = 'rgba(255, 255, 255, 1)'}: CircleParameters) {
constructor({x = 0, y = 0, radius, lineWidth = 1, strokeStyle = 'rgba(0, 0, 0, 1)', fillStyle = 'rgba(255, 255, 255, 1)', lineDash = []}: CircleParameters) {
const minX = x - radius - lineWidth / 2;

@@ -40,16 +42,18 @@ const minY = y - radius - lineWidth / 2;

this.fillStyle = fillStyle;
this.lineDash = lineDash;
}
draw(context: CanvasRenderingContext2D): void {
const {x, y, radius, strokeStyle, lineWidth, fillStyle} = this;
const oldStrokeStyle = context.strokeStyle;
const oldFillStyle = context.fillStyle;
const oldLineWidth = context.lineWidth;
const oldLineDash = context.getLineDash();
context.beginPath();
context.arc(x, y, radius, 0, 2 * Math.PI, false);
context.strokeStyle = strokeStyle;
context.fillStyle = fillStyle;
context.lineWidth = lineWidth;
context.arc(this.x, this.y, this.radius, 0, 2 * Math.PI, false);
context.strokeStyle = this.strokeStyle;
context.fillStyle = this.fillStyle;
context.lineWidth = this.lineWidth;
context.fill();
if (lineWidth > 0) {
if (this.lineWidth > 0) {
context.setLineDash(this.lineDash);
context.stroke();

@@ -61,7 +65,9 @@ }

context.lineWidth = oldLineWidth;
if (this.lineWidth > 0) {
context.setLineDash(oldLineDash);
}
}
intersection({x, y}: Point): Circle<T> | undefined {
const {x: ox, y: oy, radius, lineWidth} = this;
if ((x - ox) ** 2 + (y - oy) ** 2 <= (radius + lineWidth / 2) ** 2) {
if ((x - this.x) ** 2 + (y - this.y) ** 2 <= (this.radius + this.lineWidth / 2) ** 2) {
return this;

@@ -68,0 +74,0 @@ }

35

src/Line.ts

@@ -8,2 +8,3 @@ import Node, {Bounds, Point} from './Node';

lineCap?: string;
lineDash?: Array<number>;
}

@@ -26,4 +27,5 @@

private lineCap: string;
private lineDash: Array<number>;
constructor({x1, y1, x2, y2, strokeStyle = 'rgba(0, 0, 0, 1)', lineWidth = 1, lineCap = 'butt'}: LineParameters) {
constructor({x1, y1, x2, y2, strokeStyle = 'rgba(0, 0, 0, 1)', lineWidth = 1, lineCap = 'butt', lineDash = []}: LineParameters) {
const minX = Math.min(x1, x2) - lineWidth / 2;

@@ -43,17 +45,18 @@ const minY = Math.min(y1, y2) - lineWidth / 2;

this.lineCap = lineCap;
this.lineDash = lineDash;
}
draw(context: CanvasRenderingContext2D): void {
const {x1, y1, x2, y2, strokeStyle, lineWidth, lineCap} = this;
const oldStrokeStyle = context.strokeStyle;
const oldLineWidth = context.lineWidth;
const oldLineCap = context.lineCap;
context.strokeStyle = strokeStyle;
context.lineWidth = lineWidth;
context.lineCap = lineCap;
const oldLineDash = context.getLineDash();
context.strokeStyle = this.strokeStyle;
context.lineWidth = this.lineWidth;
context.lineCap = this.lineCap;
context.beginPath();
context.moveTo(x1, y1);
context.lineTo(x2, y2);
if (lineWidth > 0) {
context.moveTo(this.x1, this.y1);
context.lineTo(this.x2, this.y2);
if (this.lineWidth > 0) {
context.setLineDash(this.lineDash);
context.stroke();

@@ -65,7 +68,9 @@ }

context.lineCap = oldLineCap;
if (this.lineWidth > 0) {
context.setLineDash(oldLineDash);
}
}
intersection({x, y}: Point): Line<T> | undefined {
const {x1, y1, x2, y2, lineWidth} = this;
const distance2 = (x2 - x1) ** 2 + (y2 - y1) ** 2;
const distance2 = (this.x2 - this.x1) ** 2 + (this.y2 - this.y1) ** 2;
let t: number;

@@ -75,8 +80,8 @@ if (distance2 === 0) {

} else {
t = ((x - x1) * (x2 - x1) + (y - y1) * (y2 - y1)) / distance2;
t = ((x - this.x1) * (this.x2 - this.x1) + (y - this.y1) * (this.y2 - this.y1)) / distance2;
}
if (0 <= t && t <= 1) {
const dx = x - (x1 + t * (x2 - x1));
const dy = y - (y1 + t * (y2 - y1));
if (dx ** 2 + dy ** 2 <= (lineWidth / 2) ** 2) {
const dx = x - (this.x1 + t * (this.x2 - this.x1));
const dy = y - (this.y1 + t * (this.y2 - this.y1));
if (dx ** 2 + dy ** 2 <= (this.lineWidth / 2) ** 2) {
return this;

@@ -83,0 +88,0 @@ }

36

src/LineString.ts

@@ -8,2 +8,3 @@ import Node, {Bounds, Point} from './Node';

lineCap?: string;
lineDash?: Array<number>;
}

@@ -20,4 +21,5 @@

private lineCap: string;
private lineDash: Array<number>;
constructor({points, strokeStyle = 'rgba(0, 0, 0, 1)', lineWidth = 1, lineCap = 'butt'}: LineStringParameters) {
constructor({points, strokeStyle = 'rgba(0, 0, 0, 1)', lineWidth = 1, lineCap = 'butt', lineDash = []}: LineStringParameters) {
let minX = Number.POSITIVE_INFINITY;

@@ -41,23 +43,24 @@ let minY = Number.POSITIVE_INFINITY;

this.lineCap = lineCap;
this.lineDash = lineDash;
}
draw(context: CanvasRenderingContext2D): void {
const {points, strokeStyle, lineWidth, lineCap} = this;
const oldStrokeStyle = context.strokeStyle;
const oldLineWidth = context.lineWidth;
const oldLineCap = context.lineCap;
context.strokeStyle = strokeStyle;
context.lineWidth = lineWidth;
context.lineCap = lineCap;
const oldLineDash = context.getLineDash();
context.strokeStyle = this.strokeStyle;
context.lineWidth = this.lineWidth;
context.lineCap = this.lineCap;
context.beginPath();
if (points.length >= 1) {
const {x, y} = points[0];
if (this.points.length >= 1) {
const {x, y} = this.points[0];
context.moveTo(x, y);
}
for (let i = 1; i < points.length; i++) {
for (let i = 1; i < this.points.length; i++) {
const {x, y} = this.points[i];
context.lineTo(x, y);
}
if (lineWidth > 0) {
if (this.lineWidth > 0) {
context.setLineDash(this.lineDash);
context.stroke();

@@ -69,10 +72,11 @@ }

context.lineCap = oldLineCap;
if (this.lineWidth > 0) {
context.setLineDash(oldLineDash);
}
}
intersection({x, y}: Point): Node<T> | undefined {
const {points, lineWidth} = this;
for (let i = 1; i < points.length; i++) {
const {x: x1, y: y1} = points[i - 1];
const {x: x2, y: y2} = points[i];
for (let i = 1; i < this.points.length; i++) {
const {x: x1, y: y1} = this.points[i - 1];
const {x: x2, y: y2} = this.points[i];
const distance2 = (x2 - x1) ** 2 + (y2 - y1) ** 2;

@@ -88,3 +92,3 @@ let t: number;

const dy = y - (y1 + t * (y2 - y1));
if (dx ** 2 + dy ** 2 <= (lineWidth / 2) ** 2) {
if (dx ** 2 + dy ** 2 <= (this.lineWidth / 2) ** 2) {
return this;

@@ -91,0 +95,0 @@ }

41

src/Polygon.ts

@@ -10,2 +10,3 @@ import Node, {Bounds, Point} from './Node';

fillStyle?: string;
lineDash?: Array<number>;
}

@@ -22,4 +23,5 @@

private fillStyle: string;
private lineDash: Array<number>;
constructor({points, strokeStyle = 'rgba(0, 0, 0, 1)', lineWidth = 1, fillStyle = 'rgba(255, 255, 255, 1)'}: PolygonParameters) {
constructor({points, strokeStyle = 'rgba(0, 0, 0, 1)', lineWidth = 1, fillStyle = 'rgba(255, 255, 255, 1)', lineDash = []}: PolygonParameters) {
// TODO: lineWidth to increase bounds

@@ -47,25 +49,25 @@

this.fillStyle = fillStyle;
this.lineDash = lineDash;
}
draw(context: CanvasRenderingContext2D): void {
const {points, strokeStyle, lineWidth, fillStyle} = this;
const oldStrokeStyle = context.strokeStyle;
const oldLineWidth = context.lineWidth;
const oldFillStyle = context.fillStyle;
context.strokeStyle = strokeStyle;
context.lineWidth = lineWidth;
context.fillStyle = fillStyle;
const oldLineDash = context.getLineDash();
context.strokeStyle = this.strokeStyle;
context.lineWidth = this.lineWidth;
context.fillStyle = this.fillStyle;
context.beginPath();
for (let i = 0; i < points.length; i++) {
for (let i = 0; i < this.points.length; i++) {
// TODO:
// Given an option 'automaticCounterHoles' => automatically reverse the 2nd, 3rd, 4th, etc. polygons
// For now just force API user to make sure holes are in counter-clockwise direction
if (points[i].length >= 1) {
const {x, y} = points[i][0];
if (this.points[i].length >= 1) {
const {x, y} = this.points[i][0];
context.moveTo(x, y);
}
for (let j = 1; j < points[i].length; j++) {
const {x, y} = points[i][j];
for (let j = 1; j < this.points[i].length; j++) {
const {x, y} = this.points[i][j];
context.lineTo(x, y);

@@ -76,3 +78,4 @@ }

context.fill();
if (lineWidth > 0) {
if (this.lineWidth > 0) {
context.setLineDash(this.lineDash);
context.stroke();

@@ -84,6 +87,8 @@ }

context.fillStyle = oldFillStyle;
if (this.lineWidth > 0) {
context.setLineDash(oldLineDash);
}
}
intersection({x, y}: Point): Polygon<T> | undefined {
const {points, lineWidth} = this;
const vertices: Array<Point> = [];

@@ -94,8 +99,8 @@

vertices.push(zeroPoint);
for (let i = 0; i < points.length; i++) {
for (let j = 0; j < points[i].length; j++) {
vertices.push(points[i][j]);
for (let i = 0; i < this.points.length; i++) {
for (let j = 0; j < this.points[i].length; j++) {
vertices.push(this.points[i][j]);
}
if (points[i].length >= 1) {
vertices.push(points[i][0]);
if (this.points[i].length >= 1) {
vertices.push(this.points[i][0]);
}

@@ -102,0 +107,0 @@ vertices.push(zeroPoint);

22

src/Rectangle.ts

@@ -8,2 +8,3 @@ import Node, {Bounds, Point} from './Node';

fillStyle?: string;
lineDash?: Array<number>;
}

@@ -26,4 +27,5 @@

private fillStyle: string;
private lineDash: Array<number>;
constructor({x1, y1, x2, y2, strokeStyle = 'rgba(0, 0, 0, 1)', lineWidth = 1, fillStyle = 'rgba(255, 255, 255, 1)'}: RectangleParameters) {
constructor({x1, y1, x2, y2, strokeStyle = 'rgba(0, 0, 0, 1)', lineWidth = 1, fillStyle = 'rgba(255, 255, 255, 1)', lineDash = []}: RectangleParameters) {
const minX = Math.min(x1, x2) - lineWidth / 2;

@@ -43,17 +45,18 @@ const maxX = Math.max(x1, x2) + lineWidth / 2;

this.fillStyle = fillStyle;
this.lineDash = lineDash;
}
draw(context: CanvasRenderingContext2D): void {
const {x1, y1, x2, y2, strokeStyle, lineWidth, fillStyle} = this;
const oldStrokeStyle = context.strokeStyle;
const oldFillStyle = context.fillStyle;
const oldLineWidth = context.lineWidth;
const oldLineDash = context.getLineDash();
context.beginPath();
context.rect(x1, y1, x2 - x1, y2 - y1);
context.strokeStyle = strokeStyle;
context.fillStyle = fillStyle;
context.lineWidth = lineWidth;
context.rect(this.x1, this.y1, this.x2 - this.x1, this.y2 - this.y1);
context.strokeStyle = this.strokeStyle;
context.fillStyle = this.fillStyle;
context.lineWidth = this.lineWidth;
context.fill();
if (lineWidth > 0) {
if (this.lineWidth > 0) {
context.setLineDash(this.lineDash);
context.stroke();

@@ -65,2 +68,5 @@ }

context.lineWidth = oldLineWidth;
if (this.lineWidth > 0) {
context.setLineDash(oldLineDash);
}
}

@@ -67,0 +73,0 @@ 

.idea/compiler.xml
.idea/copyright/profiles_settings.xml
.idea/dictionaries/vanheewo.xml
.idea/jsLibraryMappings.xml
.idea/libraries/pure_canvas_node_modules.xml
.idea/misc.xml
.idea/modules.xml
.idea/pure-canvas.iml
.idea/typescript-compiler.xml
.idea/vcs.xml
.idea/workspace.xml
.npmignore
lib/Circle.js.map

Sorry, the diff of this file is not supported yet

lib/Line.js.map

Sorry, the diff of this file is not supported yet

lib/LineString.js.map

Sorry, the diff of this file is not supported yet

lib/Polygon.js.map

Sorry, the diff of this file is not supported yet

lib/Rectangle.js.map

Sorry, the diff of this file is not supported yet

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

About

Packages

npm

Go

Maven

PyPI

Rubygems

Stay in touch

Get open source security insights delivered straight into your inbox.

  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc