10499304652

Committed 22 Aug 2024 12:01AM UTC coverage: 27.382% (-0.2%) from 27.541%

Build # 10499304652

Build Type

push

github

Committed by

caleb531

Commit Message

Convert components to JSX

Run Details

72 of 100 branches covered (72.0%)

Branch coverage included in aggregate %.

54 of 648 new or added lines in 27 files covered. (8.33%)

54 existing lines in 21 files now uncovered.

405 of 1642 relevant lines covered (24.67%)

8.88 hits per line

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

0.0

/scripts/components/frame.jsx

1	class FrameComponent {	×
NEW 2	oninit({ attrs: { frame } }) {	×
NEW 3	this.frame = frame;	×
4	// Store the current number of stroke groups in the frame so we can later
5	// detect changes to the same frame
NEW 6	this.strokeGroupCount = frame.strokeGroups.length;	×
7	// Store the current number of points in the last stroke group
NEW 8	this.pointCount = frame.countPointsInLastStrokeGroup();	×
NEW 9	}	×
10
NEW 11	oncreate({ dom }) {	×
NEW 12	this.canvas = dom;	×
NEW 13	this.ctx = this.canvas.getContext('2d');	×
NEW 14	this.lastRenderedStyles = {};	×
NEW 15	this.render();	×
NEW 16	}	×
17
NEW 18	onupdate({ attrs: { frame } }) {	×
NEW 19	if (	×
NEW 20	frame !== this.frame \|\|	×
NEW 21	frame.strokeGroups.length !== this.strokeGroupCount \|\|	×
NEW 22	frame.countPointsInLastStrokeGroup() !== this.pointCount	×
NEW 23	) {	×
UNCOV 24	this.frame = frame;	×
UNCOV 25	this.strokeGroupCount = frame.strokeGroups.length;	×
UNCOV 26	this.pointCount = frame.countPointsInLastStrokeGroup();	×
27	this.render();	×
UNCOV 28	}	×
NEW 29	}	×
30
NEW 31	render({ backgroundColor = null } = {}) {	×
NEW 32	this.clearCanvas();	×
NEW 33	if (backgroundColor) {	×
NEW 34	this.setBackground(backgroundColor);	×
UNCOV 35	}	×
NEW 36	if (	×
NEW 37	this.ctx.canvas.width !== FrameComponent.width \|\|	×
NEW 38	this.ctx.canvas.height !== FrameComponent.height	×
NEW 39	) {	×
NEW 40	this.scaleCanvas();	×
UNCOV 41	}	×
NEW 42	this.drawGroups();	×
NEW 43	}	×
44
NEW 45	clearCanvas() {	×
NEW 46	this.ctx.resetTransform();	×
NEW 47	this.ctx.clearRect(0, 0, this.ctx.canvas.width, this.ctx.canvas.height);	×
NEW 48	}	×
49
NEW 50	scaleCanvas() {	×
NEW 51	this.ctx.scale(	×
NEW 52	this.ctx.canvas.width / FrameComponent.width,	×
NEW 53	this.ctx.canvas.height / FrameComponent.height	×
NEW 54	);	×
NEW 55	}	×
56
NEW 57	setBackground(backgroundColor) {	×
NEW 58	this.ctx.fillStyle = backgroundColor;	×
NEW 59	this.ctx.fillRect(0, 0, this.ctx.canvas.width, this.ctx.canvas.height);	×
NEW 60	this.ctx.fillStyle = 'transparent';	×
NEW 61	}	×
62
NEW 63	setGlobalStyles() {	×
NEW 64	this.ctx.strokeStyle = this.frame.styles.strokeStyle;	×
NEW 65	this.ctx.lineCap = this.frame.styles.lineCap;	×
NEW 66	this.ctx.lineJoin = this.frame.styles.lineJoin;	×
NEW 67	}	×
68
NEW 69	setGroupStyles(strokeGroup) {	×
70	// TODO: implement the ability to change stroke color within the UI; the
71	// below line isn't needed until that is done
72	// this.setGroupStyle(strokeGroup, 'strokeStyle');
NEW 73	this.setGroupStyle(strokeGroup, 'lineWidth');	×
NEW 74	}	×
75
NEW 76	setGroupStyle(strokeGroup, styleName) {	×
NEW 77	let styleValue = strokeGroup.styles	×
NEW 78	? strokeGroup.styles[styleName]	×
NEW 79	: this.frame.styles[styleName];	×
80	// this.ctx[styleName] cannot be used to check if styleValue has changed,
81	// because when setting this.ctx.strokeStyle to #000, this.ctx.strokeStyle
82	// evaluates to #000000; we therefore need to store the exact value on a
83	// separate object
NEW 84	if (styleValue !== this.lastRenderedStyles[styleName]) {	×
NEW 85	this.ctx[styleName] = styleValue;	×
NEW 86	this.lastRenderedStyles[styleName] = styleValue;	×
UNCOV 87	}	×
NEW 88	}	×
89
NEW 90	drawGroups() {	×
NEW 91	this.setGlobalStyles();	×
NEW 92	for (let g = 0; g < this.frame.strokeGroups.length; g += 1) {	×
NEW 93	let strokeGroup = this.frame.strokeGroups[g];	×
NEW 94	let currentX = strokeGroup.points[0][0];	×
NEW 95	let currentY = strokeGroup.points[0][1];	×
NEW 96	this.setGroupStyles(strokeGroup);	×
NEW 97	if (strokeGroup.points.length === 1) {	×
98	// Draw a circle
NEW 99	this.ctx.fillStyle = strokeGroup.styles	×
NEW 100	? strokeGroup.styles.strokeStyle	×
NEW 101	: this.frame.styles.strokeStyle;	×
NEW 102	this.ctx.beginPath();	×
NEW 103	this.ctx.arc(	×
NEW 104	currentX,	×
NEW 105	currentY,	×
NEW 106	(strokeGroup.styles ? strokeGroup.styles.lineWidth : this.frame.styles.lineWidth) / 2,	×
NEW 107	0,	×
NEW 108	Math.PI * 2,	×
NEW 109	false	×
NEW 110	);	×
NEW 111	this.ctx.fill();	×
NEW 112	this.ctx.closePath();	×
NEW 113	this.ctx.fillStyle = 'transparent';	×
NEW 114	} else {	×
NEW 115	this.ctx.beginPath();	×
NEW 116	this.ctx.moveTo(currentX, currentY);	×
NEW 117	for (let p = 1; p < strokeGroup.points.length; p += 1) {	×
NEW 118	currentX += strokeGroup.points[p][0];	×
NEW 119	currentY += strokeGroup.points[p][1];	×
NEW 120	this.ctx.lineTo(currentX, currentY);	×
121	}	×
NEW 122	this.ctx.stroke();	×
NEW 123	this.ctx.closePath();	×
124	}	×
125	}	×
NEW 126	}	×
127
NEW 128	view({ attrs: { className, width = FrameComponent.width, height = FrameComponent.height } }) {	×
NEW 129	return <canvas className={className} width={width} height={height} />;	×
NEW 130	}	×
131	}	×
132	FrameComponent.width = 1600;	×
133	FrameComponent.height = 900;	×
134
135	export default FrameComponent;	×

caleb531 / flip-book / 10499304652

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