7294397098

Committed 21 Dec 2023 11:56PM UTC coverage: 91.859% (-0.06%) from 91.915%

Build # 7294397098

Build Type

push

github

Committed by

web-flow

Commit Message

fix: #2848 Sprite tint respected in constructor (#2852)

Closes #2848 

## Changes:

- Fixes sprite tint constructor value passing
- Fixes sprite tint on cloned sprites
- Fixes width/height inconsistency discovered in new tests
- New tests

Run Details

4602 of 5758 branches covered (0.0%)

7 of 7 new or added lines in 3 files covered. (100.0%)

7 existing lines in 2 files now uncovered.

10686 of 11633 relevant lines covered (91.86%)

27166.71 hits per line

Source File
Press 'n' to go to next uncovered line, 'b' for previous

33.93

/src/engine/Util/DrawUtil.ts

import { Color } from '../Color';
import { Vector } from '../Math/vector';

/**
 * A canvas linecap style. "butt" is the default flush style, "round" is a semi-circle cap with a radius half the width of
 * the line, and "square" is a rectangle that is an equal width and half height cap.
 */
export type LineCapStyle = 'butt' | 'round' | 'square';

/* istanbul ignore next */
/**
 * Draw a line on canvas context
 * @param ctx The canvas context
 * @param color The color of the line
 * @param x1 The start x coordinate
 * @param y1 The start y coordinate
 * @param x2 The ending x coordinate
 * @param y2 The ending y coordinate
 * @param thickness The line thickness
 * @param cap The [[LineCapStyle]] (butt, round, or square)
 */
export function line(
  ctx: CanvasRenderingContext2D,
  color: Color = Color.Red,
  x1: number,
  y1: number,
  x2: number,
  y2: number,
  thickness: number = 1,
  cap: LineCapStyle = 'butt'
) {
  ctx.save();
  ctx.beginPath();
  ctx.lineWidth = thickness;
  ctx.lineCap = cap;
  ctx.strokeStyle = color.toString();
  ctx.moveTo(x1, y1);
  ctx.lineTo(x2, y2);
  ctx.closePath();
  ctx.stroke();
  ctx.restore();
}

/* istanbul ignore next */
/**
 * Draw the vector as a point onto the canvas.
 */
export function point(ctx: CanvasRenderingContext2D, color: Color = Color.Red, point: Vector): void {
  ctx.beginPath();
  ctx.strokeStyle = color.toString();
  ctx.arc(point.x, point.y, 5, 0, Math.PI * 2);
  ctx.closePath();
  ctx.stroke();
}

/**
 * Draw the vector as a line onto the canvas starting a origin point.
 */
/* istanbul ignore next */
/**
 *
 */
export function vector(ctx: CanvasRenderingContext2D, color: Color, origin: Vector, vector: Vector, scale: number = 1.0): void {
  const c = color ? color.toString() : 'blue';
  const v = vector.scale(scale);
  ctx.beginPath();
  ctx.strokeStyle = c;
  ctx.moveTo(origin.x, origin.y);
  ctx.lineTo(origin.x + v.x, origin.y + v.y);
  ctx.closePath();
  ctx.stroke();
}

/**
 * Represents border radius values
 */
export interface BorderRadius {
  /**
   * Top-left
   */
  tl: number;
  /**
   * Top-right
   */
  tr: number;
  /**
   * Bottom-right
   */
  br: number;
  /**
   * Bottom-left
   */
  bl: number;
}

/**
 * Draw a round rectangle on a canvas context
 * @param ctx The canvas context
 * @param x The top-left x coordinate
 * @param y The top-left y coordinate
 * @param width The width of the rectangle
 * @param height The height of the rectangle
 * @param radius The border radius of the rectangle
 * @param stroke The [[Color]] to stroke rectangle with
 * @param fill The [[Color]] to fill rectangle with
 */
export function roundRect(
  ctx: CanvasRenderingContext2D,
  x: number,
  y: number,
  width: number,
  height: number,
  radius: number | BorderRadius = 5,
  stroke: Color = Color.White,
  fill: Color = null
) {
  let br: BorderRadius;

  if (typeof radius === 'number') {
    br = { tl: radius, tr: radius, br: radius, bl: radius };
  } else {
    const defaultRadius: BorderRadius = { tl: 0, tr: 0, br: 0, bl: 0 };

    for (const prop in defaultRadius) {
      if (defaultRadius.hasOwnProperty(prop)) {
        const side = <keyof BorderRadius>prop;
        br[side] = radius[side] || defaultRadius[side];
      }
    }
  }

  ctx.beginPath();
  ctx.moveTo(x + br.tl, y);
  ctx.lineTo(x + width - br.tr, y);
  ctx.quadraticCurveTo(x + width, y, x + width, y + br.tr);
  ctx.lineTo(x + width, y + height - br.br);
  ctx.quadraticCurveTo(x + width, y + height, x + width - br.br, y + height);
  ctx.lineTo(x + br.bl, y + height);
  ctx.quadraticCurveTo(x, y + height, x, y + height - br.bl);
  ctx.lineTo(x, y + br.tl);
  ctx.quadraticCurveTo(x, y, x + br.tl, y);
  ctx.closePath();

  if (fill) {
    ctx.fillStyle = fill.toString();
    ctx.fill();
  }

  if (stroke) {
    ctx.strokeStyle = stroke.toString();
    ctx.stroke();
  }
}

/**
 *
 */
export function circle(
  ctx: CanvasRenderingContext2D,
  x: number,
  y: number,
  radius: number,
  stroke: Color = Color.White,
  fill: Color = null
) {
  ctx.beginPath();
  ctx.arc(x, y, radius, 0, Math.PI * 2);
  ctx.closePath();

  if (fill) {
    ctx.fillStyle = fill.toString();
    ctx.fill();
  }

  if (stroke) {
    ctx.strokeStyle = stroke.toString();
    ctx.stroke();
  }
}

1	import { Color } from '../Color';
2	import { Vector } from '../Math/vector';
3
4	/**
5	* A canvas linecap style. "butt" is the default flush style, "round" is a semi-circle cap with a radius half the width of
6	* the line, and "square" is a rectangle that is an equal width and half height cap.
7	*/
8	export type LineCapStyle = 'butt' \| 'round' \| 'square';
9
10	/* istanbul ignore next */
11	/**
12	* Draw a line on canvas context
13	* @param ctx The canvas context
14	* @param color The color of the line
15	* @param x1 The start x coordinate
16	* @param y1 The start y coordinate
17	* @param x2 The ending x coordinate
18	* @param y2 The ending y coordinate
19	* @param thickness The line thickness
20	* @param cap The [[LineCapStyle]] (butt, round, or square)
21	*/
22	export function line(
23	ctx: CanvasRenderingContext2D,
24	color: Color = Color.Red,	×
25	x1: number,
26	y1: number,
27	x2: number,
28	y2: number,
29	thickness: number = 1,	×
30	cap: LineCapStyle = 'butt'	×
31	) {
32	ctx.save();	×
33	ctx.beginPath();	×
34	ctx.lineWidth = thickness;	×
35	ctx.lineCap = cap;	×
36	ctx.strokeStyle = color.toString();	×
37	ctx.moveTo(x1, y1);	×
38	ctx.lineTo(x2, y2);	×
39	ctx.closePath();	×
40	ctx.stroke();	×
41	ctx.restore();	×
42	}
43
44	/* istanbul ignore next */
45	/**
46	* Draw the vector as a point onto the canvas.
47	*/
48	export function point(ctx: CanvasRenderingContext2D, color: Color = Color.Red, point: Vector): void {	×
49	ctx.beginPath();	×
50	ctx.strokeStyle = color.toString();	×
51	ctx.arc(point.x, point.y, 5, 0, Math.PI * 2);	×
52	ctx.closePath();	×
53	ctx.stroke();	×
54	}
55
56	/**
57	* Draw the vector as a line onto the canvas starting a origin point.
58	*/
59	/* istanbul ignore next */
60	/**
61	*
62	*/
63	export function vector(ctx: CanvasRenderingContext2D, color: Color, origin: Vector, vector: Vector, scale: number = 1.0): void {	×
64	const c = color ? color.toString() : 'blue';	×
65	const v = vector.scale(scale);	×
66	ctx.beginPath();	×
67	ctx.strokeStyle = c;	×
68	ctx.moveTo(origin.x, origin.y);	×
69	ctx.lineTo(origin.x + v.x, origin.y + v.y);	×
70	ctx.closePath();	×
71	ctx.stroke();	×
72	}
73
74	/**
75	* Represents border radius values
76	*/
77	export interface BorderRadius {
78	/**
79	* Top-left
80	*/
81	tl: number;
82	/**
83	* Top-right
84	*/
85	tr: number;
86	/**
87	* Bottom-right
88	*/
89	br: number;
90	/**
91	* Bottom-left
92	*/
93	bl: number;
94	}
95
96	/**
97	* Draw a round rectangle on a canvas context
98	* @param ctx The canvas context
99	* @param x The top-left x coordinate
100	* @param y The top-left y coordinate
101	* @param width The width of the rectangle
102	* @param height The height of the rectangle
103	* @param radius The border radius of the rectangle
104	* @param stroke The [[Color]] to stroke rectangle with
105	* @param fill The [[Color]] to fill rectangle with
106	*/
107	export function roundRect(
108	ctx: CanvasRenderingContext2D,
109	x: number,
110	y: number,
111	width: number,
112	height: number,
113	radius: number \| BorderRadius = 5,	×
114	stroke: Color = Color.White,	×
115	fill: Color = null	837✔
116	) {
117	let br: BorderRadius;
118
119	if (typeof radius === 'number') {	1,674!
120	br = { tl: radius, tr: radius, br: radius, bl: radius };	1,674✔
121	} else {
122	const defaultRadius: BorderRadius = { tl: 0, tr: 0, br: 0, bl: 0 };	×
123
124	for (const prop in defaultRadius) {	×
125	if (defaultRadius.hasOwnProperty(prop)) {	×
126	const side = <keyof BorderRadius>prop;	×
127	br[side] = radius[side] \|\| defaultRadius[side];	×
128	}
129	}
130	}
131
132	ctx.beginPath();	1,674✔
133	ctx.moveTo(x + br.tl, y);	1,674✔
134	ctx.lineTo(x + width - br.tr, y);	1,674✔
135	ctx.quadraticCurveTo(x + width, y, x + width, y + br.tr);	1,674✔
136	ctx.lineTo(x + width, y + height - br.br);	1,674✔
137	ctx.quadraticCurveTo(x + width, y + height, x + width - br.br, y + height);	1,674✔
138	ctx.lineTo(x + br.bl, y + height);	1,674✔
139	ctx.quadraticCurveTo(x, y + height, x, y + height - br.bl);	1,674✔
140	ctx.lineTo(x, y + br.tl);	1,674✔
141	ctx.quadraticCurveTo(x, y, x + br.tl, y);	1,674✔
142	ctx.closePath();	1,674✔
143
144	if (fill) {	1,674✔
145	ctx.fillStyle = fill.toString();	837✔
146	ctx.fill();	837✔
147	}
148
149	if (stroke) {	1,674✔
150	ctx.strokeStyle = stroke.toString();	837✔
151	ctx.stroke();	837✔
152	}
153	}
154
155	/**
156	*
157	*/
158	export function circle(
159	ctx: CanvasRenderingContext2D,
160	x: number,
161	y: number,
162	radius: number,
163	stroke: Color = Color.White,	×
164	fill: Color = null	×
165	) {
166	ctx.beginPath();	×
167	ctx.arc(x, y, radius, 0, Math.PI * 2);	×
168	ctx.closePath();	×
169
170	if (fill) {	×
171	ctx.fillStyle = fill.toString();	×
172	ctx.fill();	×
173	}
174
175	if (stroke) {	×
176	ctx.strokeStyle = stroke.toString();	×
177	ctx.stroke();	×
178	}
179	}

excaliburjs / Excalibur / 7294397098

Source File Press 'n' to go to next uncovered line, 'b' for previous

Source File
Press 'n' to go to next uncovered line, 'b' for previous