diff --git a/.npmignore b/.npmignore index d4a3e9b..6fb58a1 100644 --- a/.npmignore +++ b/.npmignore @@ -5,4 +5,5 @@ node_modules src tslint.json rollup.config.js -.gitignore \ No newline at end of file +.gitignore +visual-tests \ No newline at end of file diff --git a/src/fillers/dashed-filler.ts b/src/fillers/dashed-filler.ts index 3a03c43..2b24642 100644 --- a/src/fillers/dashed-filler.ts +++ b/src/fillers/dashed-filler.ts @@ -18,7 +18,7 @@ export class DashedFiller implements PatternFiller { private dashedLine(lines: Line[], o: ResolvedOptions): Op[] { const offset = o.dashOffset < 0 ? (o.hachureGap < 0 ? (o.strokeWidth * 4) : o.hachureGap) : o.dashOffset; const gap = o.dashGap < 0 ? (o.hachureGap < 0 ? (o.strokeWidth * 4) : o.hachureGap) : o.dashGap; - let ops: Op[] = []; + const ops: Op[] = []; lines.forEach((line) => { const length = lineLength(line); const count = Math.floor(length / (offset + gap)); @@ -35,7 +35,7 @@ export class DashedFiller implements PatternFiller { const lend = lstart + offset; const start: Point = [p1[0] + (lstart * Math.cos(alpha)) + (startOffset * Math.cos(alpha)), p1[1] + lstart * Math.sin(alpha) + (startOffset * Math.sin(alpha))]; const end: Point = [p1[0] + (lend * Math.cos(alpha)) + (startOffset * Math.cos(alpha)), p1[1] + (lend * Math.sin(alpha)) + (startOffset * Math.sin(alpha))]; - ops = ops.concat(this.helper.doubleLineOps(start[0], start[1], end[0], end[1], o)); + ops.push(...this.helper.doubleLineOps(start[0], start[1], end[0], end[1], o)); } }); return ops; diff --git a/src/fillers/dot-filler.ts b/src/fillers/dot-filler.ts index 12b5f19..9818b5d 100644 --- a/src/fillers/dot-filler.ts +++ b/src/fillers/dot-filler.ts @@ -17,7 +17,7 @@ export class DotFiller implements PatternFiller { } private dotsOnLines(lines: Line[], o: ResolvedOptions): OpSet { - let ops: Op[] = []; + const ops: Op[] = []; let gap = o.hachureGap; if (gap < 0) { gap = o.strokeWidth * 4; @@ -40,7 +40,7 @@ export class DotFiller implements PatternFiller { const cx = this.helper.randOffsetWithRange(c[0] - gap / 4, c[0] + gap / 4, o); const cy = this.helper.randOffsetWithRange(c[1] - gap / 4, c[1] + gap / 4, o); const el = this.helper.ellipse(cx, cy, fweight, fweight, o); - ops = ops.concat(el.ops); + ops.push(...el.ops); } } return { type: 'fillSketch', ops }; diff --git a/src/fillers/hachure-filler.ts b/src/fillers/hachure-filler.ts index de9b71e..4ec9249 100644 --- a/src/fillers/hachure-filler.ts +++ b/src/fillers/hachure-filler.ts @@ -21,12 +21,12 @@ export class HachureFiller implements PatternFiller { } private renderLines(lines: Line[], o: ResolvedOptions, connectEnds: boolean): Op[] { - let ops: Op[] = []; + const ops: Op[] = []; let prevPoint: Point | null = null; for (const line of lines) { - ops = ops.concat(this.helper.doubleLineOps(line[0][0], line[0][1], line[1][0], line[1][1], o)); + ops.push(...this.helper.doubleLineOps(line[0][0], line[0][1], line[1][0], line[1][1], o)); if (connectEnds && prevPoint) { - ops = ops.concat(this.helper.doubleLineOps(prevPoint[0], prevPoint[1], line[0][0], line[0][1], o)); + ops.push(...this.helper.doubleLineOps(prevPoint[0], prevPoint[1], line[0][0], line[0][1], o)); } prevPoint = line[1]; } diff --git a/src/fillers/zigzag-line-filler.ts b/src/fillers/zigzag-line-filler.ts index ccb3833..177f205 100644 --- a/src/fillers/zigzag-line-filler.ts +++ b/src/fillers/zigzag-line-filler.ts @@ -19,7 +19,7 @@ export class ZigZagLineFiller implements PatternFiller { } private zigzagLines(lines: Line[], zo: number, o: ResolvedOptions): Op[] { - let ops: Op[] = []; + const ops: Op[] = []; lines.forEach((line) => { const length = lineLength(line); const count = Math.round(length / (2 * zo)); @@ -37,8 +37,10 @@ export class ZigZagLineFiller implements PatternFiller { const start: Point = [p1[0] + (lstart * Math.cos(alpha)), p1[1] + lstart * Math.sin(alpha)]; const end: Point = [p1[0] + (lend * Math.cos(alpha)), p1[1] + (lend * Math.sin(alpha))]; const middle: Point = [start[0] + dz * Math.cos(alpha + Math.PI / 4), start[1] + dz * Math.sin(alpha + Math.PI / 4)]; - ops = ops.concat(this.helper.doubleLineOps(start[0], start[1], middle[0], middle[1], o)); - ops = ops.concat(this.helper.doubleLineOps(middle[0], middle[1], end[0], end[1], o)); + ops.push( + ...this.helper.doubleLineOps(start[0], start[1], middle[0], middle[1], o), + ...this.helper.doubleLineOps(middle[0], middle[1], end[0], end[1], o) + ); } }); return ops; diff --git a/src/renderer.ts b/src/renderer.ts index 6a79346..fd548dc 100644 --- a/src/renderer.ts +++ b/src/renderer.ts @@ -25,12 +25,12 @@ export function line(x1: number, y1: number, x2: number, y2: number, o: Resolved export function linearPath(points: Point[], close: boolean, o: ResolvedOptions): OpSet { const len = (points || []).length; if (len > 2) { - let ops: Op[] = []; + const ops: Op[] = []; for (let i = 0; i < (len - 1); i++) { - ops = ops.concat(_doubleLine(points[i][0], points[i][1], points[i + 1][0], points[i + 1][1], o)); + ops.push(..._doubleLine(points[i][0], points[i][1], points[i + 1][0], points[i + 1][1], o)); } if (close) { - ops = ops.concat(_doubleLine(points[len - 1][0], points[len - 1][1], points[0][0], points[0][1], o)); + ops.push(..._doubleLine(points[len - 1][0], points[len - 1][1], points[0][0], points[0][1], o)); } return { type: 'path', ops }; } else if (len === 2) { @@ -45,7 +45,10 @@ export function polygon(points: Point[], o: ResolvedOptions): OpSet { export function rectangle(x: number, y: number, width: number, height: number, o: ResolvedOptions): OpSet { const points: Point[] = [ - [x, y], [x + width, y], [x + width, y + height], [x, y + height] + [x, y], + [x + width, y], + [x + width, y + height], + [x, y + height] ]; return polygon(points, o); } @@ -110,14 +113,18 @@ export function arc(x: number, y: number, width: number, height: number, start: const arcInc = Math.min(ellipseInc / 2, (stp - strt) / 2); const o1 = _arc(arcInc, cx, cy, rx, ry, strt, stp, 1, o); const o2 = _arc(arcInc, cx, cy, rx, ry, strt, stp, 1.5, o); - let ops = o1.concat(o2); + const ops = o1.concat(o2); if (closed) { if (roughClosure) { - ops = ops.concat(_doubleLine(cx, cy, cx + rx * Math.cos(strt), cy + ry * Math.sin(strt), o)); - ops = ops.concat(_doubleLine(cx, cy, cx + rx * Math.cos(stp), cy + ry * Math.sin(stp), o)); + ops.push( + ..._doubleLine(cx, cy, cx + rx * Math.cos(strt), cy + ry * Math.sin(strt), o), + ..._doubleLine(cx, cy, cx + rx * Math.cos(stp), cy + ry * Math.sin(stp), o) + ); } else { - ops.push({ op: 'lineTo', data: [cx, cy] }); - ops.push({ op: 'lineTo', data: [cx + rx * Math.cos(strt), cy + ry * Math.sin(strt)] }); + ops.push( + { op: 'lineTo', data: [cx, cy] }, + { op: 'lineTo', data: [cx + rx * Math.cos(strt), cy + ry * Math.sin(strt)] } + ); } } return { type: 'path', ops }; @@ -334,7 +341,7 @@ function _curveWithOffset(points: Point[], offset: number, o: ResolvedOptions): function _curve(points: Point[], closePoint: Point | null, o: ResolvedOptions): Op[] { const len = points.length; - let ops: Op[] = []; + const ops: Op[] = []; if (len > 3) { const b = []; const s = 1 - o.curveTightness; @@ -360,7 +367,7 @@ function _curve(points: Point[], closePoint: Point | null, o: ResolvedOptions): points[2][0], points[2][1]] }); } else if (len === 2) { - ops = ops.concat(_doubleLine(points[0][0], points[0][1], points[1][0], points[1][1], o)); + ops.push(..._doubleLine(points[0][0], points[0][1], points[1][0], points[1][1], o)); } return ops; } diff --git a/visual-tests/canvas/line.html b/visual-tests/canvas/line.html new file mode 100644 index 0000000..e69de29