10499286139

Committed 21 Aug 2024 11:59PM UTC coverage: 25.53% (-2.0%) from 27.541%

Build # 10499286139

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 %.

0 of 743 new or added lines in 22 files covered. (0.0%)

54 existing lines in 21 files now uncovered.

386 of 1694 relevant lines covered (22.79%)

6.85 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	×
NEW 107	? strokeGroup.styles.lineWidth	×
NEW 108	: this.frame.styles.lineWidth) / 2,	×
NEW 109	0,	×
NEW 110	Math.PI * 2,	×
NEW 111	false,	×
NEW 112	);	×
NEW 113	this.ctx.fill();	×
NEW 114	this.ctx.closePath();	×
NEW 115	this.ctx.fillStyle = "transparent";	×
NEW 116	} else {	×
NEW 117	this.ctx.beginPath();	×
NEW 118	this.ctx.moveTo(currentX, currentY);	×
NEW 119	for (let p = 1; p < strokeGroup.points.length; p += 1) {	×
NEW 120	currentX += strokeGroup.points[p][0];	×
NEW 121	currentY += strokeGroup.points[p][1];	×
NEW 122	this.ctx.lineTo(currentX, currentY);	×
123	}	×
NEW 124	this.ctx.stroke();	×
NEW 125	this.ctx.closePath();	×
126	}	×
127	}	×
NEW 128	}	×
129
NEW 130	view({	×
NEW 131	attrs: {	×
NEW 132	className,	×
NEW 133	width = FrameComponent.width,	×
NEW 134	height = FrameComponent.height,	×
NEW 135	},	×
NEW 136	}) {	×
NEW 137	return <canvas className={className} width={width} height={height} />;	×
NEW 138	}	×
139	}	×
140	FrameComponent.width = 1600;	×
141	FrameComponent.height = 900;	×
142
143	export default FrameComponent;	×

caleb531 / flip-book / 10499286139

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