Context Navigation

← Previous Revision
Latest Revision
Next Revision →
Normal
Revision Log

ibom.html @ 15

Last change on this file since 15 was 15, checked in by f.jahn, 12 months ago
Einschaltstrombegrenzung und D-SUB Adapter hinzugefügt
File size: 176.2 KB

Rev	Line
[15]	1	<!DOCTYPE html>
	2	<html lang="en">
	3
	4	<head>
	5	<meta charset="UTF-8">
	6	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	7	<title>Interactive BOM for KiCAD</title>
	8	<style type="text/css">
	9	:root {
	10	--pcb-edge-color: black;
	11	--pad-color: #878787;
	12	--pad-hole-color: #CCCCCC;
	13	--pad-color-highlight: #D04040;
	14	--pad-color-highlight-both: #D0D040;
	15	--pad-color-highlight-marked: #44a344;
	16	--pin1-outline-color: #ffb629;
	17	--pin1-outline-color-highlight: #ffb629;
	18	--pin1-outline-color-highlight-both: #fcbb39;
	19	--pin1-outline-color-highlight-marked: #fdbe41;
	20	--silkscreen-edge-color: #aa4;
	21	--silkscreen-polygon-color: #4aa;
	22	--silkscreen-text-color: #4aa;
	23	--fabrication-edge-color: #907651;
	24	--fabrication-polygon-color: #907651;
	25	--fabrication-text-color: #a27c24;
	26	--track-color: #def5f1;
	27	--track-color-highlight: #D04040;
	28	--zone-color: #def5f1;
	29	--zone-color-highlight: #d0404080;
	30	}
	31
	32	html,
	33	body {
	34	margin: 0px;
	35	height: 100%;
	36	font-family: Verdana, sans-serif;
	37	}
	38
	39	.dark.topmostdiv {
	40	--pcb-edge-color: #eee;
	41	--pad-color: #808080;
	42	--pin1-outline-color: #ffa800;
	43	--pin1-outline-color-highlight: #ccff00;
	44	--track-color: #42524f;
	45	--zone-color: #42524f;
	46	background-color: #252c30;
	47	color: #eee;
	48	}
	49
	50	button {
	51	background-color: #eee;
	52	border: 1px solid #888;
	53	color: black;
	54	height: 44px;
	55	width: 44px;
	56	text-align: center;
	57	text-decoration: none;
	58	display: inline-block;
	59	font-size: 14px;
	60	font-weight: bolder;
	61	}
	62
	63	.dark button {
	64	/* This will be inverted */
	65	background-color: #c3b7b5;
	66	}
	67
	68	button.depressed {
	69	background-color: #0a0;
	70	color: white;
	71	}
	72
	73	.dark button.depressed {
	74	/* This will be inverted */
	75	background-color: #b3b;
	76	}
	77
	78	button:focus {
	79	outline: 0;
	80	}
	81
	82	button#tb-btn {
	83	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8.47 8.47'%3E%3Crect transform='translate(0 -288.53)' ry='1.17' y='288.8' x='.27' height='7.94' width='7.94' fill='%23f9f9f9'/%3E%3Cg transform='translate(0 -288.53)'%3E%3Crect width='7.94' height='7.94' x='.27' y='288.8' ry='1.17' fill='none' stroke='%23000' stroke-width='.4' stroke-linejoin='round'/%3E%3Cpath d='M1.32 290.12h5.82M1.32 291.45h5.82' fill='none' stroke='%23000' stroke-width='.4'/%3E%3Cpath d='M4.37 292.5v4.23M.26 292.63H8.2' fill='none' stroke='%23000' stroke-width='.3'/%3E%3Ctext font-weight='700' font-size='3.17' font-family='sans-serif'%3E%3Ctspan x='1.35' y='295.73'%3EF%3C/tspan%3E%3Ctspan x='5.03' y='295.68'%3EB%3C/tspan%3E%3C/text%3E%3C/g%3E%3C/svg%3E%0A");
	84	}
	85
	86	button#lr-btn {
	87	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8.47 8.47'%3E%3Crect transform='translate(0 -288.53)' ry='1.17' y='288.8' x='.27' height='7.94' width='7.94' fill='%23f9f9f9'/%3E%3Cg transform='translate(0 -288.53)'%3E%3Crect width='7.94' height='7.94' x='.27' y='288.8' ry='1.17' fill='none' stroke='%23000' stroke-width='.4' stroke-linejoin='round'/%3E%3Cpath d='M1.06 290.12H3.7m-2.64 1.33H3.7m-2.64 1.32H3.7m-2.64 1.3H3.7m-2.64 1.33H3.7' fill='none' stroke='%23000' stroke-width='.4'/%3E%3Cpath d='M4.37 288.8v7.94m0-4.11h3.96' fill='none' stroke='%23000' stroke-width='.3'/%3E%3Ctext font-weight='700' font-size='3.17' font-family='sans-serif'%3E%3Ctspan x='5.11' y='291.96'%3EF%3C/tspan%3E%3Ctspan x='5.03' y='295.68'%3EB%3C/tspan%3E%3C/text%3E%3C/g%3E%3C/svg%3E%0A");
	88	}
	89
	90	button#bom-btn {
	91	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8.47 8.47'%3E%3Crect transform='translate(0 -288.53)' ry='1.17' y='288.8' x='.27' height='7.94' width='7.94' fill='%23f9f9f9'/%3E%3Cg transform='translate(0 -288.53)' fill='none' stroke='%23000' stroke-width='.4'%3E%3Crect width='7.94' height='7.94' x='.27' y='288.8' ry='1.17' stroke-linejoin='round'/%3E%3Cpath d='M1.59 290.12h5.29M1.59 291.45h5.33M1.59 292.75h5.33M1.59 294.09h5.33M1.59 295.41h5.33'/%3E%3C/g%3E%3C/svg%3E");
	92	}
	93
	94	button#bom-grouped-btn {
	95	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32'%3E%3Cg stroke='%23000' stroke-linejoin='round' class='layer'%3E%3Crect width='29' height='29' x='1.5' y='1.5' stroke-width='2' fill='%23fff' rx='5' ry='5'/%3E%3Cpath stroke-linecap='square' stroke-width='2' d='M6 10h4m4 0h5m4 0h3M6.1 22h3m3.9 0h5m4 0h4m-16-8h4m4 0h4'/%3E%3Cpath stroke-linecap='null' d='M5 17.5h22M5 26.6h22M5 5.5h22'/%3E%3C/g%3E%3C/svg%3E");
	96	}
	97
	98	button#bom-ungrouped-btn {
	99	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32'%3E%3Cg stroke='%23000' stroke-linejoin='round' class='layer'%3E%3Crect width='29' height='29' x='1.5' y='1.5' stroke-width='2' fill='%23fff' rx='5' ry='5'/%3E%3Cpath stroke-linecap='square' stroke-width='2' d='M6 10h4m-4 8h3m-3 8h4'/%3E%3Cpath stroke-linecap='null' d='M5 13.5h22m-22 8h22M5 5.5h22'/%3E%3C/g%3E%3C/svg%3E");
	100	}
	101
	102	button#bom-netlist-btn {
	103	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32'%3E%3Cg fill='none' stroke='%23000' class='layer'%3E%3Crect width='29' height='29' x='1.5' y='1.5' stroke-width='2' fill='%23fff' rx='5' ry='5'/%3E%3Cpath stroke-width='2' d='M6 26l6-6v-8m13.8-6.3l-6 6v8'/%3E%3Ccircle cx='11.8' cy='9.5' r='2.8' stroke-width='2'/%3E%3Ccircle cx='19.8' cy='22.8' r='2.8' stroke-width='2'/%3E%3C/g%3E%3C/svg%3E");
	104	}
	105
	106	button#copy {
	107	background-image: url("data:image/svg+xml,%3Csvg height='48' viewBox='0 0 48 48' width='48' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 0h48v48h-48z' fill='none'/%3E%3Cpath d='M32 2h-24c-2.21 0-4 1.79-4 4v28h4v-28h24v-4zm6 8h-22c-2.21 0-4 1.79-4 4v28c0 2.21 1.79 4 4 4h22c2.21 0 4-1.79 4-4v-28c0-2.21-1.79-4-4-4zm0 32h-22v-28h22v28z'/%3E%3C/svg%3E");
	108	background-position: 6px 6px;
	109	background-repeat: no-repeat;
	110	background-size: 26px 26px;
	111	border-radius: 6px;
	112	height: 40px;
	113	width: 40px;
	114	margin: 10px 5px;
	115	}
	116
	117	button#copy:active {
	118	box-shadow: inset 0px 0px 5px #6c6c6c;
	119	}
	120
	121	textarea.clipboard-temp {
	122	position: fixed;
	123	top: 0;
	124	left: 0;
	125	width: 2em;
	126	height: 2em;
	127	padding: 0;
	128	border: None;
	129	outline: None;
	130	box-shadow: None;
	131	background: transparent;
	132	}
	133
	134	.left-most-button {
	135	border-right: 0;
	136	border-top-left-radius: 6px;
	137	border-bottom-left-radius: 6px;
	138	}
	139
	140	.middle-button {
	141	border-right: 0;
	142	}
	143
	144	.right-most-button {
	145	border-top-right-radius: 6px;
	146	border-bottom-right-radius: 6px;
	147	}
	148
	149	.button-container {
	150	font-size: 0;
	151	margin: 0.4rem 0.4rem 0.4rem 0;
	152	}
	153
	154	.dark .button-container {
	155	filter: invert(1);
	156	}
	157
	158	.button-container button {
	159	background-size: 32px 32px;
	160	background-position: 5px 5px;
	161	background-repeat: no-repeat;
	162	}
	163
	164	@media print {
	165	.hideonprint {
	166	display: none;
	167	}
	168	}
	169
	170	canvas {
	171	cursor: crosshair;
	172	}
	173
	174	canvas:active {
	175	cursor: grabbing;
	176	}
	177
	178	.fileinfo {
	179	width: 100%;
	180	max-width: 1000px;
	181	border: none;
	182	padding: 3px;
	183	}
	184
	185	.fileinfo .title {
	186	font-size: 20pt;
	187	font-weight: bold;
	188	}
	189
	190	.fileinfo td {
	191	overflow: hidden;
	192	white-space: nowrap;
	193	max-width: 1px;
	194	width: 50%;
	195	text-overflow: ellipsis;
	196	}
	197
	198	.bom {
	199	border-collapse: collapse;
	200	font-family: Consolas, "DejaVu Sans Mono", Monaco, monospace;
	201	font-size: 10pt;
	202	table-layout: fixed;
	203	width: 100%;
	204	margin-top: 1px;
	205	position: relative;
	206	}
	207
	208	.bom th,
	209	.bom td {
	210	border: 1px solid black;
	211	padding: 5px;
	212	word-wrap: break-word;
	213	text-align: center;
	214	position: relative;
	215	}
	216
	217	.dark .bom th,
	218	.dark .bom td {
	219	border: 1px solid #777;
	220	}
	221
	222	.bom th {
	223	background-color: #CCCCCC;
	224	background-clip: padding-box;
	225	}
	226
	227	.dark .bom th {
	228	background-color: #3b4749;
	229	}
	230
	231	.bom tr.highlighted:nth-child(n) {
	232	background-color: #cfc;
	233	}
	234
	235	.dark .bom tr.highlighted:nth-child(n) {
	236	background-color: #226022;
	237	}
	238
	239	.bom tr:nth-child(even) {
	240	background-color: #f2f2f2;
	241	}
	242
	243	.dark .bom tr:nth-child(even) {
	244	background-color: #313b40;
	245	}
	246
	247	.bom tr.checked {
	248	color: #1cb53d;
	249	}
	250
	251	.dark .bom tr.checked {
	252	color: #2cce54;
	253	}
	254
	255	.bom tr {
	256	transition: background-color 0.2s;
	257	}
	258
	259	.bom .numCol {
	260	width: 30px;
	261	}
	262
	263	.bom .value {
	264	width: 15%;
	265	}
	266
	267	.bom .quantity {
	268	width: 65px;
	269	}
	270
	271	.bom th .sortmark {
	272	position: absolute;
	273	right: 1px;
	274	top: 1px;
	275	margin-top: -5px;
	276	border-width: 5px;
	277	border-style: solid;
	278	border-color: transparent transparent #221 transparent;
	279	transform-origin: 50% 85%;
	280	transition: opacity 0.2s, transform 0.4s;
	281	}
	282
	283	.dark .bom th .sortmark {
	284	filter: invert(1);
	285	}
	286
	287	.bom th .sortmark.none {
	288	opacity: 0;
	289	}
	290
	291	.bom th .sortmark.desc {
	292	transform: rotate(180deg);
	293	}
	294
	295	.bom th:hover .sortmark.none {
	296	opacity: 0.5;
	297	}
	298
	299	.bom .bom-checkbox {
	300	width: 30px;
	301	position: relative;
	302	user-select: none;
	303	-moz-user-select: none;
	304	}
	305
	306	.bom .bom-checkbox:before {
	307	content: "";
	308	position: absolute;
	309	border-width: 15px;
	310	border-style: solid;
	311	border-color: #51829f transparent transparent transparent;
	312	visibility: hidden;
	313	top: -15px;
	314	}
	315
	316	.bom .bom-checkbox:after {
	317	content: "Double click to set/unset all";
	318	position: absolute;
	319	color: white;
	320	top: -35px;
	321	left: -26px;
	322	background: #51829f;
	323	padding: 5px 15px;
	324	border-radius: 8px;
	325	white-space: nowrap;
	326	visibility: hidden;
	327	}
	328
	329	.bom .bom-checkbox:hover:before,
	330	.bom .bom-checkbox:hover:after {
	331	visibility: visible;
	332	transition: visibility 0.2s linear 1s;
	333	}
	334
	335	.split {
	336	-webkit-box-sizing: border-box;
	337	-moz-box-sizing: border-box;
	338	box-sizing: border-box;
	339	overflow-y: auto;
	340	overflow-x: hidden;
	341	background-color: inherit;
	342	}
	343
	344	.split.split-horizontal,
	345	.gutter.gutter-horizontal {
	346	height: 100%;
	347	float: left;
	348	}
	349
	350	.gutter {
	351	background-color: #ddd;
	352	background-repeat: no-repeat;
	353	background-position: 50%;
	354	transition: background-color 0.3s;
	355	}
	356
	357	.dark .gutter {
	358	background-color: #777;
	359	}
	360
	361	.gutter.gutter-horizontal {
	362	background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAeCAYAAADkftS9AAAAIklEQVQoU2M4c+bMfxAGAgYYmwGrIIiDjrELjpo5aiZeMwF+yNnOs5KSvgAAAABJRU5ErkJggg==');
	363	cursor: ew-resize;
	364	width: 5px;
	365	}
	366
	367	.gutter.gutter-vertical {
	368	background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAFAQMAAABo7865AAAABlBMVEVHcEzMzMzyAv2sAAAAAXRSTlMAQObYZgAAABBJREFUeF5jOAMEEAIEEFwAn3kMwcB6I2AAAAAASUVORK5CYII=');
	369	cursor: ns-resize;
	370	height: 5px;
	371	}
	372
	373	.searchbox {
	374	float: left;
	375	height: 40px;
	376	margin: 10px 5px;
	377	padding: 12px 32px;
	378	font-family: Consolas, "DejaVu Sans Mono", Monaco, monospace;
	379	font-size: 18px;
	380	box-sizing: border-box;
	381	border: 1px solid #888;
	382	border-radius: 6px;
	383	outline: none;
	384	background-color: #eee;
	385	transition: background-color 0.2s, border 0.2s;
	386	background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAABNklEQVQ4T8XSMUvDQBQH8P/LElFa/AIZHcTBQSz0I/gFstTBRR2KUC4ldDxw7h0Bl3RRUATxi4iiODgoiLNrbQYp5J6cpJJqomkX33Z37/14d/dIa33MzDuYI4johOI4XhyNRteO46zNYjDzAxE1yBZprVeZ+QbAUhXEGJMA2Ox2u4+fQIa0mPmsCgCgJYQ4t7lfgF0opQYAdv9ABkKI/UnOFCClXKjX61cA1osQY8x9kiRNKeV7IWA3oyhaSdP0FkAtjxhj3hzH2RBCPOf3pzqYHCilfAAX+URm9oMguPzeWSGQvUcMYC8rOBJCHBRdqxTo9/vbRHRqi8bj8XKv1xvODbiuW2u32/bvf0SlDv4XYOY7z/Mavu+nM1+BmQ+NMc0wDF/LprP0DbTWW0T00ul0nn4b7Q87+X4Qmfiq2wAAAABJRU5ErkJggg==');
	387	background-position: 10px 10px;
	388	background-repeat: no-repeat;
	389	}
	390
	391	.dark .searchbox {
	392	background-color: #111;
	393	color: #eee;
	394	}
	395
	396	.searchbox::placeholder {
	397	color: #ccc;
	398	}
	399
	400	.dark .searchbox::placeholder {
	401	color: #666;
	402	}
	403
	404	.filter {
	405	width: calc(60% - 64px);
	406	}
	407
	408	.reflookup {
	409	width: calc(40% - 10px);
	410	}
	411
	412	input[type=text]:focus {
	413	background-color: white;
	414	border: 1px solid #333;
	415	}
	416
	417	.dark input[type=text]:focus {
	418	background-color: #333;
	419	border: 1px solid #ccc;
	420	}
	421
	422	mark.highlight {
	423	background-color: #5050ff;
	424	color: #fff;
	425	padding: 2px;
	426	border-radius: 6px;
	427	}
	428
	429	.dark mark.highlight {
	430	background-color: #76a6da;
	431	color: #111;
	432	}
	433
	434	.menubtn {
	435	background-color: white;
	436	border: none;
	437	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='36' height='36' viewBox='0 0 20 20'%3E%3Cpath fill='none' d='M0 0h20v20H0V0z'/%3E%3Cpath d='M15.95 10.78c.03-.25.05-.51.05-.78s-.02-.53-.06-.78l1.69-1.32c.15-.12.19-.34.1-.51l-1.6-2.77c-.1-.18-.31-.24-.49-.18l-1.99.8c-.42-.32-.86-.58-1.35-.78L12 2.34c-.03-.2-.2-.34-.4-.34H8.4c-.2 0-.36.14-.39.34l-.3 2.12c-.49.2-.94.47-1.35.78l-1.99-.8c-.18-.07-.39 0-.49.18l-1.6 2.77c-.1.18-.06.39.1.51l1.69 1.32c-.04.25-.07.52-.07.78s.02.53.06.78L2.37 12.1c-.15.12-.19.34-.1.51l1.6 2.77c.1.18.31.24.49.18l1.99-.8c.42.32.86.58 1.35.78l.3 2.12c.04.2.2.34.4.34h3.2c.2 0 .37-.14.39-.34l.3-2.12c.49-.2.94-.47 1.35-.78l1.99.8c.18.07.39 0 .49-.18l1.6-2.77c.1-.18.06-.39-.1-.51l-1.67-1.32zM10 13c-1.65 0-3-1.35-3-3s1.35-3 3-3 3 1.35 3 3-1.35 3-3 3z'/%3E%3C/svg%3E%0A");
	438	background-position: center;
	439	background-repeat: no-repeat;
	440	}
	441
	442	.statsbtn {
	443	background-color: white;
	444	border: none;
	445	background-image: url("data:image/svg+xml,%3Csvg width='36' height='36' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4 6h28v24H4V6zm0 8h28v8H4m9-16v24h10V5.8' fill='none' stroke='%23000' stroke-width='2'/%3E%3C/svg%3E");
	446	background-position: center;
	447	background-repeat: no-repeat;
	448	}
	449
	450	.iobtn {
	451	background-color: white;
	452	border: none;
	453	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='36' height='36'%3E%3Cpath fill='none' stroke='%23000' stroke-width='2' d='M3 33v-7l6.8-7h16.5l6.7 7v7H3zM3.2 26H33M21 9l5-5.9 5 6h-2.5V15h-5V9H21zm-4.9 0l-5 6-5-6h2.5V3h5v6h2.5z'/%3E%3Cpath fill='none' stroke='%23000' d='M6.1 29.5H10'/%3E%3C/svg%3E");
	454	background-position: center;
	455	background-repeat: no-repeat;
	456	}
	457
	458	.visbtn {
	459	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24'%3E%3Cpath fill='none' stroke='%23333' d='M2.5 4.5h5v15h-5zM9.5 4.5h5v15h-5zM16.5 4.5h5v15h-5z'/%3E%3C/svg%3E");
	460	background-position: center;
	461	background-repeat: no-repeat;
	462	padding: 15px;
	463	}
	464
	465	#vismenu-content {
	466	left: 0px;
	467	font-family: Verdana, sans-serif;
	468	}
	469
	470	.dark .statsbtn,
	471	.dark .savebtn,
	472	.dark .menubtn,
	473	.dark .iobtn,
	474	.dark .visbtn {
	475	filter: invert(1);
	476	}
	477
	478	.flexbox {
	479	display: flex;
	480	align-items: center;
	481	justify-content: space-between;
	482	width: 100%;
	483	}
	484
	485	.savebtn {
	486	background-color: #d6d6d6;
	487	width: auto;
	488	height: 30px;
	489	flex-grow: 1;
	490	margin: 5px;
	491	border-radius: 4px;
	492	}
	493
	494	.savebtn:active {
	495	background-color: #0a0;
	496	color: white;
	497	}
	498
	499	.dark .savebtn:active {
	500	/* This will be inverted */
	501	background-color: #b3b;
	502	}
	503
	504	.stats {
	505	border-collapse: collapse;
	506	font-size: 12pt;
	507	table-layout: fixed;
	508	width: 100%;
	509	min-width: 450px;
	510	}
	511
	512	.dark .stats td {
	513	border: 1px solid #bbb;
	514	}
	515
	516	.stats td {
	517	border: 1px solid black;
	518	padding: 5px;
	519	word-wrap: break-word;
	520	text-align: center;
	521	position: relative;
	522	}
	523
	524	#checkbox-stats div {
	525	position: absolute;
	526	left: 0;
	527	top: 0;
	528	height: 100%;
	529	width: 100%;
	530	display: flex;
	531	align-items: center;
	532	justify-content: center;
	533	}
	534
	535	#checkbox-stats .bar {
	536	background-color: rgba(28, 251, 0, 0.6);
	537	}
	538
	539	.menu {
	540	position: relative;
	541	display: inline-block;
	542	margin: 0.4rem 0.4rem 0.4rem 0;
	543	}
	544
	545	.menu-content {
	546	font-size: 12pt !important;
	547	text-align: left !important;
	548	font-weight: normal !important;
	549	display: none;
	550	position: absolute;
	551	background-color: white;
	552	right: 0;
	553	min-width: 300px;
	554	box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
	555	z-index: 100;
	556	padding: 8px;
	557	}
	558
	559	.dark .menu-content {
	560	background-color: #111;
	561	}
	562
	563	.menu:hover .menu-content {
	564	display: block;
	565	}
	566
	567	.menu:hover .menubtn,
	568	.menu:hover .iobtn,
	569	.menu:hover .statsbtn {
	570	background-color: #eee;
	571	}
	572
	573	.menu-label {
	574	display: inline-block;
	575	padding: 8px;
	576	border: 1px solid #ccc;
	577	border-top: 0;
	578	width: calc(100% - 18px);
	579	}
	580
	581	.menu-label-top {
	582	border-top: 1px solid #ccc;
	583	}
	584
	585	.menu-textbox {
	586	float: left;
	587	height: 24px;
	588	margin: 10px 5px;
	589	padding: 5px 5px;
	590	font-family: Consolas, "DejaVu Sans Mono", Monaco, monospace;
	591	font-size: 14px;
	592	box-sizing: border-box;
	593	border: 1px solid #888;
	594	border-radius: 4px;
	595	outline: none;
	596	background-color: #eee;
	597	transition: background-color 0.2s, border 0.2s;
	598	width: calc(100% - 10px);
	599	}
	600
	601	.menu-textbox.invalid,
	602	.dark .menu-textbox.invalid {
	603	color: red;
	604	}
	605
	606	.dark .menu-textbox {
	607	background-color: #222;
	608	color: #eee;
	609	}
	610
	611	.radio-container {
	612	margin: 4px;
	613	}
	614
	615	.topmostdiv {
	616	display: flex;
	617	flex-direction: column;
	618	width: 100%;
	619	background-color: white;
	620	transition: background-color 0.3s;
	621	}
	622
	623	#top {
	624	display: flex;
	625	flex-wrap: wrap;
	626	justify-content: flex-end;
	627	align-items: center;
	628	}
	629
	630	#topdivider {
	631	border-bottom: 2px solid black;
	632	display: flex;
	633	justify-content: center;
	634	align-items: center;
	635	}
	636
	637	.dark #topdivider {
	638	border-bottom: 2px solid #ccc;
	639	}
	640
	641	#topdivider>div {
	642	position: relative;
	643	}
	644
	645	#toptoggle {
	646	cursor: pointer;
	647	user-select: none;
	648	position: absolute;
	649	padding: 0.1rem 0.3rem;
	650	top: -0.4rem;
	651	left: -1rem;
	652	font-size: 1.4rem;
	653	line-height: 60%;
	654	border: 1px solid black;
	655	border-radius: 1rem;
	656	background-color: #fff;
	657	z-index: 100;
	658	}
	659
	660	.flipped {
	661	transform: rotate(0.5turn);
	662	}
	663
	664	.dark #toptoggle {
	665	border: 1px solid #fff;
	666	background-color: #222;
	667	}
	668
	669	#fileinfodiv {
	670	flex: 20rem 1 0;
	671	overflow: auto;
	672	}
	673
	674	#bomcontrols {
	675	display: flex;
	676	flex-direction: row-reverse;
	677	}
	678
	679	#bomcontrols>* {
	680	flex-shrink: 0;
	681	}
	682
	683	#dbg {
	684	display: block;
	685	}
	686
	687	::-webkit-scrollbar {
	688	width: 8px;
	689	}
	690
	691	::-webkit-scrollbar-track {
	692	background: #aaa;
	693	}
	694
	695	::-webkit-scrollbar-thumb {
	696	background: #666;
	697	border-radius: 3px;
	698	}
	699
	700	::-webkit-scrollbar-thumb:hover {
	701	background: #555;
	702	}
	703
	704	.slider {
	705	-webkit-appearance: none;
	706	width: 100%;
	707	margin: 3px 0;
	708	padding: 0;
	709	outline: none;
	710	opacity: 0.7;
	711	-webkit-transition: .2s;
	712	transition: opacity .2s;
	713	border-radius: 3px;
	714	}
	715
	716	.slider:hover {
	717	opacity: 1;
	718	}
	719
	720	.slider:focus {
	721	outline: none;
	722	}
	723
	724	.slider::-webkit-slider-runnable-track {
	725	-webkit-appearance: none;
	726	width: 100%;
	727	height: 8px;
	728	background: #d3d3d3;
	729	border-radius: 3px;
	730	border: none;
	731	}
	732
	733	.slider::-webkit-slider-thumb {
	734	-webkit-appearance: none;
	735	width: 15px;
	736	height: 15px;
	737	border-radius: 50%;
	738	background: #0a0;
	739	cursor: pointer;
	740	margin-top: -4px;
	741	}
	742
	743	.dark .slider::-webkit-slider-thumb {
	744	background: #3d3;
	745	}
	746
	747	.slider::-moz-range-thumb {
	748	width: 15px;
	749	height: 15px;
	750	border-radius: 50%;
	751	background: #0a0;
	752	cursor: pointer;
	753	}
	754
	755	.slider::-moz-range-track {
	756	height: 8px;
	757	background: #d3d3d3;
	758	border-radius: 3px;
	759	}
	760
	761	.dark .slider::-moz-range-thumb {
	762	background: #3d3;
	763	}
	764
	765	.slider::-ms-track {
	766	width: 100%;
	767	height: 8px;
	768	border-width: 3px 0;
	769	background: transparent;
	770	border-color: transparent;
	771	color: transparent;
	772	transition: opacity .2s;
	773	}
	774
	775	.slider::-ms-fill-lower {
	776	background: #d3d3d3;
	777	border: none;
	778	border-radius: 3px;
	779	}
	780
	781	.slider::-ms-fill-upper {
	782	background: #d3d3d3;
	783	border: none;
	784	border-radius: 3px;
	785	}
	786
	787	.slider::-ms-thumb {
	788	width: 15px;
	789	height: 15px;
	790	border-radius: 50%;
	791	background: #0a0;
	792	cursor: pointer;
	793	margin: 0;
	794	}
	795
	796	.shameless-plug {
	797	font-size: 0.8em;
	798	text-align: center;
	799	display: block;
	800	}
	801
	802	a {
	803	color: #0278a4;
	804	}
	805
	806	.dark a {
	807	color: #00b9fd;
	808	}
	809
	810	#frontcanvas,
	811	#backcanvas {
	812	touch-action: none;
	813	}
	814
	815	.placeholder {
	816	border: 1px dashed #9f9fda !important;
	817	background-color: #edf2f7 !important;
	818	}
	819
	820	.dragging {
	821	z-index: 999;
	822	}
	823
	824	.dark .dragging>table>tbody>tr {
	825	background-color: #252c30;
	826	}
	827
	828	.dark .placeholder {
	829	filter: invert(1);
	830	}
	831
	832	.column-spacer {
	833	top: 0;
	834	left: 0;
	835	width: calc(100% - 4px);
	836	position: absolute;
	837	cursor: pointer;
	838	user-select: none;
	839	height: 100%;
	840	}
	841
	842	.column-width-handle {
	843	top: 0;
	844	right: 0;
	845	width: 4px;
	846	position: absolute;
	847	cursor: col-resize;
	848	user-select: none;
	849	height: 100%;
	850	}
	851
	852	.column-width-handle:hover {
	853	background-color: #4f99bd;
	854	}
	855
	856	.help-link {
	857	border: 1px solid #0278a4;
	858	padding-inline: 0.3rem;
	859	border-radius: 3px;
	860	cursor: pointer;
	861	}
	862
	863	.dark .help-link {
	864	border: 1px solid #00b9fd;
	865	}
	866
	867	.bom-color {
	868	width: 20%;
	869	}
	870
	871	.color-column input {
	872	width: 1.6rem;
	873	height: 1rem;
	874	border: 1px solid black;
	875	cursor: pointer;
	876	padding: 0;
	877	}
	878
	879	/* removes default styling from input color element */
	880	::-webkit-color-swatch {
	881	border: none;
	882	}
	883
	884	::-webkit-color-swatch-wrapper {
	885	padding: 0;
	886	}
	887
	888	::-moz-color-swatch,
	889	::-moz-focus-inner {
	890	border: none;
	891	}
	892
	893	::-moz-focus-inner {
	894	padding: 0;
	895	}
	896	/* #bomhead {
	897	position: sticky;
	898	top: 0px;
	899	z-index: 1;
	900	} */
	901	</style>
	902	<script type="text/javascript" >
	903	///////////////////////////////////////////////
	904	/*
	905	Split.js - v1.3.5
	906	MIT License
	907	https://github.com/nathancahill/Split.js
	908	*/
	909	!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?module.exports=t():"function"==typeof define&&define.amd?define(t):e.Split=t()}(this,function(){"use strict";var e=window,t=e.document,n="addEventListener",i="removeEventListener",r="getBoundingClientRect",s=function(){return!1},o=e.attachEvent&&!e[n],a=["","-webkit-","-moz-","-o-"].filter(function(e){var n=t.createElement("div");return n.style.cssText="width:"+e+"calc(9px)",!!n.style.length}).shift()+"calc",l=function(e){return"string"==typeof e\|\|e instanceof String?t.querySelector(e):e};return function(u,c){function z(e,t,n){var i=A(y,t,n);Object.keys(i).forEach(function(t){return e.style[t]=i[t]})}function h(e,t){var n=B(y,t);Object.keys(n).forEach(function(t){return e.style[t]=n[t]})}function f(e){var t=E[this.a],n=E[this.b],i=t.size+n.size;t.size=e/this.sizei,n.size=i-e/this.sizei,z(t.element,t.size,this.aGutterSize),z(n.element,n.size,this.bGutterSize)}function m(e){var t;this.dragging&&((t="touches"in e?e.touches[0][b]-this.start:e[b]-this.start)<=E[this.a].minSize+M+this.aGutterSize?t=E[this.a].minSize+this.aGutterSize:t>=this.size-(E[this.b].minSize+M+this.bGutterSize)&&(t=this.size-(E[this.b].minSize+this.bGutterSize)),f.call(this,t),c.onDrag&&c.onDrag())}function g(){var e=E[this.a].element,t=E[this.b].element;this.size=e[r]()[y]+t[r]()[y]+this.aGutterSize+this.bGutterSize,this.start=e[r]()[G]}function d(){var t=this,n=E[t.a].element,r=E[t.b].element;t.dragging&&c.onDragEnd&&c.onDragEnd(),t.dragging=!1,e[i]("mouseup",t.stop),e[i]("touchend",t.stop),e[i]("touchcancel",t.stop),t.parent[i]("mousemove",t.move),t.parent[i]("touchmove",t.move),delete t.stop,delete t.move,n[i]("selectstart",s),n[i]("dragstart",s),r[i]("selectstart",s),r[i]("dragstart",s),n.style.userSelect="",n.style.webkitUserSelect="",n.style.MozUserSelect="",n.style.pointerEvents="",r.style.userSelect="",r.style.webkitUserSelect="",r.style.MozUserSelect="",r.style.pointerEvents="",t.gutter.style.cursor="",t.parent.style.cursor=""}function S(t){var i=this,r=E[i.a].element,o=E[i.b].element;!i.dragging&&c.onDragStart&&c.onDragStart(),t.preventDefault(),i.dragging=!0,i.move=m.bind(i),i.stop=d.bind(i),e[n]("mouseup",i.stop),e[n]("touchend",i.stop),e[n]("touchcancel",i.stop),i.parent[n]("mousemove",i.move),i.parent[n]("touchmove",i.move),r[n]("selectstart",s),r[n]("dragstart",s),o[n]("selectstart",s),o[n]("dragstart",s),r.style.userSelect="none",r.style.webkitUserSelect="none",r.style.MozUserSelect="none",r.style.pointerEvents="none",o.style.userSelect="none",o.style.webkitUserSelect="none",o.style.MozUserSelect="none",o.style.pointerEvents="none",i.gutter.style.cursor=j,i.parent.style.cursor=j,g.call(i)}function v(e){e.forEach(function(t,n){if(n>0){var i=F[n-1],r=E[i.a],s=E[i.b];r.size=e[n-1],s.size=t,z(r.element,r.size,i.aGutterSize),z(s.element,s.size,i.bGutterSize)}})}function p(){F.forEach(function(e){e.parent.removeChild(e.gutter),E[e.a].element.style[y]="",E[e.b].element.style[y]=""})}void 0===c&&(c={});var y,b,G,E,w=l(u[0]).parentNode,D=e.getComputedStyle(w).flexDirection,U=c.sizes\|\|u.map(function(){return 100/u.length}),k=void 0!==c.minSize?c.minSize:100,x=Array.isArray(k)?k:u.map(function(){return k}),L=void 0!==c.gutterSize?c.gutterSize:10,M=void 0!==c.snapOffset?c.snapOffset:30,O=c.direction\|\|"horizontal",j=c.cursor\|\|("horizontal"===O?"ew-resize":"ns-resize"),C=c.gutter\|\|function(e,n){var i=t.createElement("div");return i.className="gutter gutter-"+n,i},A=c.elementStyle\|\|function(e,t,n){var i={};return"string"==typeof t\|\|t instanceof String?i[e]=t:i[e]=o?t+"%":a+"("+t+"% - "+n+"px)",i},B=c.gutterStyle\|\|function(e,t){return n={},n[e]=t+"px",n;var n};"horizontal"===O?(y="width","clientWidth",b="clientX",G="left","paddingLeft"):"vertical"===O&&(y="height","clientHeight",b="clientY",G="top","paddingTop");var F=[];return E=u.map(function(e,t){var i,s={element:l(e),size:U[t],minSize:x[t]};if(t>0&&(i={a:t-1,b:t,dragging:!1,isFirst:1===t,isLast:t===u.length-1,direction:O,parent:w},i.aGutterSize=L,i.bGutterSize=L,i.isFirst&&(i.aGutterSize=L/2),i.isLast&&(i.bGutterSize=L/2),"row-reverse"===D\|\|"column-reverse"===D)){var a=i.a;i.a=i.b,i.b=a}if(!o&&t>0){var c=C(t,O);h(c,L),c[n]("mousedown",S.bind(i)),c[n]("touchstart",S.bind(i)),w.insertBefore(c,s.element),i.gutter=c}0===t\|\|t===u.length-1?z(s.element,s.size,L/2):z(s.element,s.size,L);var f=s.element[r]()[y];return f<s.minSize&&(s.minSize=f),t>0&&F.push(i),s}),o?{setSizes:v,destroy:p}:{setSizes:v,getSizes:function(){return E.map(function(e){return e.size})},collapse:function(e){if(e===F.length){var t=F[e-1];g.call(t),o\|\|f.call(t,t.size-t.bGutterSize)}else{var n=F[e];g.call(n),o\|\|f.call(n,n.aGutterSize)}},destroy:p}}});
	910
	911	///////////////////////////////////////////////
	912
	913	///////////////////////////////////////////////
	914	// Copyright (c) 2013 Pieroxy <pieroxy@pieroxy.net>
	915	// This work is free. You can redistribute it and/or modify it
	916	// under the terms of the WTFPL, Version 2
	917	// For more information see LICENSE.txt or http://www.wtfpl.net/
	918	//
	919	// For more information, the home page:
	920	// http://pieroxy.net/blog/pages/lz-string/testing.html
	921	//
	922	// LZ-based compression algorithm, version 1.4.4
	923	var LZString=function(){var o=String.fromCharCode,i={};var n={decompressFromBase64:function(o){return null==o?"":""==o?null:n._decompress(o.length,32,function(n){return function(o,n){if(!i[o]){i[o]={};for(var t=0;t<o.length;t++)i[o][o.charAt(t)]=t}return i[o][n]}("ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/=",o.charAt(n))})},_decompress:function(i,n,t){var r,e,a,s,p,u,l,f=[],c=4,d=4,h=3,v="",g=[],m={val:t(0),position:n,index:1};for(r=0;r<3;r+=1)f[r]=r;for(a=0,p=Math.pow(2,2),u=1;u!=p;)s=m.val&m.position,m.position>>=1,0==m.position&&(m.position=n,m.val=t(m.index++)),a\|=(s>0?1:0)u,u<<=1;switch(a){case 0:for(a=0,p=Math.pow(2,8),u=1;u!=p;)s=m.val&m.position,m.position>>=1,0==m.position&&(m.position=n,m.val=t(m.index++)),a\|=(s>0?1:0)u,u<<=1;l=o(a);break;case 1:for(a=0,p=Math.pow(2,16),u=1;u!=p;)s=m.val&m.position,m.position>>=1,0==m.position&&(m.position=n,m.val=t(m.index++)),a\|=(s>0?1:0)u,u<<=1;l=o(a);break;case 2:return""}for(f[3]=l,e=l,g.push(l);;){if(m.index>i)return"";for(a=0,p=Math.pow(2,h),u=1;u!=p;)s=m.val&m.position,m.position>>=1,0==m.position&&(m.position=n,m.val=t(m.index++)),a\|=(s>0?1:0)u,u<<=1;switch(l=a){case 0:for(a=0,p=Math.pow(2,8),u=1;u!=p;)s=m.val&m.position,m.position>>=1,0==m.position&&(m.position=n,m.val=t(m.index++)),a\|=(s>0?1:0)u,u<<=1;f[d++]=o(a),l=d-1,c--;break;case 1:for(a=0,p=Math.pow(2,16),u=1;u!=p;)s=m.val&m.position,m.position>>=1,0==m.position&&(m.position=n,m.val=t(m.index++)),a\|=(s>0?1:0)u,u<<=1;f[d++]=o(a),l=d-1,c--;break;case 2:return g.join("")}if(0==c&&(c=Math.pow(2,h),h++),f[l])v=f[l];else{if(l!==d)return null;v=e+e.charAt(0)}g.push(v),f[d++]=e+v.charAt(0),e=v,0==--c&&(c=Math.pow(2,h),h++)}}};return n}();"function"==typeof define&&define.amd?define(function(){return LZString}):"undefined"!=typeof module&&null!=module?module.exports=LZString:"undefined"!=typeof angular&&null!=angular&&angular.module("LZString",[]).factory("LZString",function(){return LZString});
	924	///////////////////////////////////////////////
	925
	926	///////////////////////////////////////////////
	927	/*!
	928	* PEP v0.4.3 \| https://github.com/jquery/PEP
	929	* Copyright jQuery Foundation and other contributors \| http://jquery.org/license
	930	*/
	931	!function(a,b){"object"==typeof exports&&"undefined"!=typeof module?module.exports=b():"function"==typeof define&&define.amd?define(b):a.PointerEventsPolyfill=b()}(this,function(){"use strict";function a(a,b){b=b\|\|Object.create(null);var c=document.createEvent("Event");c.initEvent(a,b.bubbles\|\|!1,b.cancelable\|\|!1);
	932	for(var d,e=2;e<m.length;e++)d=m[e],c[d]=b[d]\|\|n[e];c.buttons=b.buttons\|\|0;
	933	var f=0;return f=b.pressure&&c.buttons?b.pressure:c.buttons?.5:0,c.x=c.clientX,c.y=c.clientY,c.pointerId=b.pointerId\|\|0,c.width=b.width\|\|0,c.height=b.height\|\|0,c.pressure=f,c.tiltX=b.tiltX\|\|0,c.tiltY=b.tiltY\|\|0,c.twist=b.twist\|\|0,c.tangentialPressure=b.tangentialPressure\|\|0,c.pointerType=b.pointerType\|\|"",c.hwTimestamp=b.hwTimestamp\|\|0,c.isPrimary=b.isPrimary\|\|!1,c}function b(){this.array=[],this.size=0}function c(a,b,c,d){this.addCallback=a.bind(d),this.removeCallback=b.bind(d),this.changedCallback=c.bind(d),A&&(this.observer=new A(this.mutationWatcher.bind(this)))}function d(a){return"body /shadow-deep/ "+e(a)}function e(a){return'[touch-action="'+a+'"]'}function f(a){return"{ -ms-touch-action: "+a+"; touch-action: "+a+"; }"}function g(){if(F){D.forEach(function(a){String(a)===a?(E+=e(a)+f(a)+"\n",G&&(E+=d(a)+f(a)+"\n")):(E+=a.selectors.map(e)+f(a.rule)+"\n",G&&(E+=a.selectors.map(d)+f(a.rule)+"\n"))});var a=document.createElement("style");a.textContent=E,document.head.appendChild(a)}}function h(){if(!window.PointerEvent){if(window.PointerEvent=a,window.navigator.msPointerEnabled){var b=window.navigator.msMaxTouchPoints;Object.defineProperty(window.navigator,"maxTouchPoints",{value:b,enumerable:!0}),u.registerSource("ms",_)}else Object.defineProperty(window.navigator,"maxTouchPoints",{value:0,enumerable:!0}),u.registerSource("mouse",N),void 0!==window.ontouchstart&&u.registerSource("touch",V);u.register(document)}}function i(a){if(!u.pointermap.has(a)){var b=new Error("InvalidPointerId");throw b.name="InvalidPointerId",b}}function j(a){for(var b=a.parentNode;b&&b!==a.ownerDocument;)b=b.parentNode;if(!b){var c=new Error("InvalidStateError");throw c.name="InvalidStateError",c}}function k(a){var b=u.pointermap.get(a);return 0!==b.buttons}function l(){window.Element&&!Element.prototype.setPointerCapture&&Object.defineProperties(Element.prototype,{setPointerCapture:{value:W},releasePointerCapture:{value:X},hasPointerCapture:{value:Y}})}
	934	var m=["bubbles","cancelable","view","detail","screenX","screenY","clientX","clientY","ctrlKey","altKey","shiftKey","metaKey","button","relatedTarget","pageX","pageY"],n=[!1,!1,null,null,0,0,0,0,!1,!1,!1,!1,0,null,0,0],o=window.Map&&window.Map.prototype.forEach,p=o?Map:b;b.prototype={set:function(a,b){return void 0===b?this["delete"](a):(this.has(a)\|\|this.size++,void(this.array[a]=b))},has:function(a){return void 0!==this.array[a]},"delete":function(a){this.has(a)&&(delete this.array[a],this.size--)},get:function(a){return this.array[a]},clear:function(){this.array.length=0,this.size=0},forEach:function(a,b){return this.array.forEach(function(c,d){a.call(b,c,d,this)},this)}};var q=["bubbles","cancelable","view","detail","screenX","screenY","clientX","clientY","ctrlKey","altKey","shiftKey","metaKey","button","relatedTarget","buttons","pointerId","width","height","pressure","tiltX","tiltY","pointerType","hwTimestamp","isPrimary","type","target","currentTarget","which","pageX","pageY","timeStamp"],r=[!1,!1,null,null,0,0,0,0,!1,!1,!1,!1,0,null,0,0,0,0,0,0,0,"",0,!1,"",null,null,0,0,0,0],s={pointerover:1,pointerout:1,pointerenter:1,pointerleave:1},t="undefined"!=typeof SVGElementInstance,u={pointermap:new p,eventMap:Object.create(null),captureInfo:Object.create(null),eventSources:Object.create(null),eventSourceList:[],registerSource:function(a,b){var c=b,d=c.events;d&&(d.forEach(function(a){c[a]&&(this.eventMap[a]=c[a].bind(c))},this),this.eventSources[a]=c,this.eventSourceList.push(c))},register:function(a){for(var b,c=this.eventSourceList.length,d=0;d<c&&(b=this.eventSourceList[d]);d++)
	935	b.register.call(b,a)},unregister:function(a){for(var b,c=this.eventSourceList.length,d=0;d<c&&(b=this.eventSourceList[d]);d++)
	936	b.unregister.call(b,a)},contains:function(a,b){try{return a.contains(b)}catch(c){return!1}},down:function(a){a.bubbles=!0,this.fireEvent("pointerdown",a)},move:function(a){a.bubbles=!0,this.fireEvent("pointermove",a)},up:function(a){a.bubbles=!0,this.fireEvent("pointerup",a)},enter:function(a){a.bubbles=!1,this.fireEvent("pointerenter",a)},leave:function(a){a.bubbles=!1,this.fireEvent("pointerleave",a)},over:function(a){a.bubbles=!0,this.fireEvent("pointerover",a)},out:function(a){a.bubbles=!0,this.fireEvent("pointerout",a)},cancel:function(a){a.bubbles=!0,this.fireEvent("pointercancel",a)},leaveOut:function(a){this.out(a),this.propagate(a,this.leave,!1)},enterOver:function(a){this.over(a),this.propagate(a,this.enter,!0)},eventHandler:function(a){if(!a._handledByPE){var b=a.type,c=this.eventMap&&this.eventMap[b];c&&c(a),a._handledByPE=!0}},listen:function(a,b){b.forEach(function(b){this.addEvent(a,b)},this)},unlisten:function(a,b){b.forEach(function(b){this.removeEvent(a,b)},this)},addEvent:function(a,b){a.addEventListener(b,this.boundHandler)},removeEvent:function(a,b){a.removeEventListener(b,this.boundHandler)},makeEvent:function(b,c){this.captureInfo[c.pointerId]&&(c.relatedTarget=null);var d=new a(b,c);return c.preventDefault&&(d.preventDefault=c.preventDefault),d._target=d._target\|\|c.target,d},fireEvent:function(a,b){var c=this.makeEvent(a,b);return this.dispatchEvent(c)},cloneEvent:function(a){for(var b,c=Object.create(null),d=0;d<q.length;d++)b=q[d],c[b]=a[b]\|\|r[d],!t\|\|"target"!==b&&"relatedTarget"!==b\|\|c[b]instanceof SVGElementInstance&&(c[b]=c[b].correspondingUseElement);return a.preventDefault&&(c.preventDefault=function(){a.preventDefault()}),c},getTarget:function(a){var b=this.captureInfo[a.pointerId];return b?a._target!==b&&a.type in s?void 0:b:a._target},propagate:function(a,b,c){for(var d=a.target,e=[];d!==document&&!d.contains(a.relatedTarget);) if(e.push(d),d=d.parentNode,!d)return;c&&e.reverse(),e.forEach(function(c){a.target=c,b.call(this,a)},this)},setCapture:function(b,c,d){this.captureInfo[b]&&this.releaseCapture(b,d),this.captureInfo[b]=c,this.implicitRelease=this.releaseCapture.bind(this,b,d),document.addEventListener("pointerup",this.implicitRelease),document.addEventListener("pointercancel",this.implicitRelease);var e=new a("gotpointercapture");e.pointerId=b,e._target=c,d\|\|this.asyncDispatchEvent(e)},releaseCapture:function(b,c){var d=this.captureInfo[b];if(d){this.captureInfo[b]=void 0,document.removeEventListener("pointerup",this.implicitRelease),document.removeEventListener("pointercancel",this.implicitRelease);var e=new a("lostpointercapture");e.pointerId=b,e._target=d,c\|\|this.asyncDispatchEvent(e)}},dispatchEvent:/scope.external.dispatchEvent \|\| /function(a){var b=this.getTarget(a);if(b)return b.dispatchEvent(a)},asyncDispatchEvent:function(a){requestAnimationFrame(this.dispatchEvent.bind(this,a))}};u.boundHandler=u.eventHandler.bind(u);var v={shadow:function(a){if(a)return a.shadowRoot\|\|a.webkitShadowRoot},canTarget:function(a){return a&&Boolean(a.elementFromPoint)},targetingShadow:function(a){var b=this.shadow(a);if(this.canTarget(b))return b},olderShadow:function(a){var b=a.olderShadowRoot;if(!b){var c=a.querySelector("shadow");c&&(b=c.olderShadowRoot)}return b},allShadows:function(a){for(var b=[],c=this.shadow(a);c;)b.push(c),c=this.olderShadow(c);return b},searchRoot:function(a,b,c){if(a){var d,e,f=a.elementFromPoint(b,c);for(e=this.targetingShadow(f);e;){if(d=e.elementFromPoint(b,c)){var g=this.targetingShadow(d);return this.searchRoot(g,b,c)\|\|d} e=this.olderShadow(e)} return f}},owner:function(a){
	937	for(var b=a;b.parentNode;)b=b.parentNode;
	938	return b.nodeType!==Node.DOCUMENT_NODE&&b.nodeType!==Node.DOCUMENT_FRAGMENT_NODE&&(b=document),b},findTarget:function(a){var b=a.clientX,c=a.clientY,d=this.owner(a.target);
	939	return d.elementFromPoint(b,c)\|\|(d=document),this.searchRoot(d,b,c)}},w=Array.prototype.forEach.call.bind(Array.prototype.forEach),x=Array.prototype.map.call.bind(Array.prototype.map),y=Array.prototype.slice.call.bind(Array.prototype.slice),z=Array.prototype.filter.call.bind(Array.prototype.filter),A=window.MutationObserver\|\|window.WebKitMutationObserver,B="[touch-action]",C={subtree:!0,childList:!0,attributes:!0,attributeOldValue:!0,attributeFilter:["touch-action"]};c.prototype={watchSubtree:function(a){
	940	//
	941	this.observer&&v.canTarget(a)&&this.observer.observe(a,C)},enableOnSubtree:function(a){this.watchSubtree(a),a===document&&"complete"!==document.readyState?this.installOnLoad():this.installNewSubtree(a)},installNewSubtree:function(a){w(this.findElements(a),this.addElement,this)},findElements:function(a){return a.querySelectorAll?a.querySelectorAll(B):[]},removeElement:function(a){this.removeCallback(a)},addElement:function(a){this.addCallback(a)},elementChanged:function(a,b){this.changedCallback(a,b)},concatLists:function(a,b){return a.concat(y(b))},
	942	installOnLoad:function(){document.addEventListener("readystatechange",function(){"complete"===document.readyState&&this.installNewSubtree(document)}.bind(this))},isElement:function(a){return a.nodeType===Node.ELEMENT_NODE},flattenMutationTree:function(a){
	943	var b=x(a,this.findElements,this);
	944	return b.push(z(a,this.isElement)),b.reduce(this.concatLists,[])},mutationWatcher:function(a){a.forEach(this.mutationHandler,this)},mutationHandler:function(a){if("childList"===a.type){var b=this.flattenMutationTree(a.addedNodes);b.forEach(this.addElement,this);var c=this.flattenMutationTree(a.removedNodes);c.forEach(this.removeElement,this)}else"attributes"===a.type&&this.elementChanged(a.target,a.oldValue)}};var D=["none","auto","pan-x","pan-y",{rule:"pan-x pan-y",selectors:["pan-x pan-y","pan-y pan-x"]}],E="",F=window.PointerEvent\|\|window.MSPointerEvent,G=!window.ShadowDOMPolyfill&&document.head.createShadowRoot,H=u.pointermap,I=25,J=[1,4,2,8,16],K=!1;try{K=1===new MouseEvent("test",{buttons:1}).buttons}catch(L){}
	945	var M,N={POINTER_ID:1,POINTER_TYPE:"mouse",events:["mousedown","mousemove","mouseup","mouseover","mouseout"],register:function(a){u.listen(a,this.events)},unregister:function(a){u.unlisten(a,this.events)},lastTouches:[],
	946	isEventSimulatedFromTouch:function(a){for(var b,c=this.lastTouches,d=a.clientX,e=a.clientY,f=0,g=c.length;f<g&&(b=c[f]);f++){
	947	var h=Math.abs(d-b.x),i=Math.abs(e-b.y);if(h<=I&&i<=I)return!0}},prepareEvent:function(a){var b=u.cloneEvent(a),c=b.preventDefault;return b.preventDefault=function(){a.preventDefault(),c()},b.pointerId=this.POINTER_ID,b.isPrimary=!0,b.pointerType=this.POINTER_TYPE,b},prepareButtonsForMove:function(a,b){var c=H.get(this.POINTER_ID);
	948	0!==b.which&&c?a.buttons=c.buttons:a.buttons=0,b.buttons=a.buttons},mousedown:function(a){if(!this.isEventSimulatedFromTouch(a)){var b=H.get(this.POINTER_ID),c=this.prepareEvent(a);K\|\|(c.buttons=J[c.button],b&&(c.buttons\|=b.buttons),a.buttons=c.buttons),H.set(this.POINTER_ID,a),b&&0!==b.buttons?u.move(c):u.down(c)}},mousemove:function(a){if(!this.isEventSimulatedFromTouch(a)){var b=this.prepareEvent(a);K\|\|this.prepareButtonsForMove(b,a),b.button=-1,H.set(this.POINTER_ID,a),u.move(b)}},mouseup:function(a){if(!this.isEventSimulatedFromTouch(a)){var b=H.get(this.POINTER_ID),c=this.prepareEvent(a);if(!K){var d=J[c.button];
	949	c.buttons=b?b.buttons&~d:0,a.buttons=c.buttons}H.set(this.POINTER_ID,a),
	950	c.buttons&=~J[c.button],0===c.buttons?u.up(c):u.move(c)}},mouseover:function(a){if(!this.isEventSimulatedFromTouch(a)){var b=this.prepareEvent(a);K\|\|this.prepareButtonsForMove(b,a),b.button=-1,H.set(this.POINTER_ID,a),u.enterOver(b)}},mouseout:function(a){if(!this.isEventSimulatedFromTouch(a)){var b=this.prepareEvent(a);K\|\|this.prepareButtonsForMove(b,a),b.button=-1,u.leaveOut(b)}},cancel:function(a){var b=this.prepareEvent(a);u.cancel(b),this.deactivateMouse()},deactivateMouse:function(){H["delete"](this.POINTER_ID)}},O=u.captureInfo,P=v.findTarget.bind(v),Q=v.allShadows.bind(v),R=u.pointermap,S=2500,T=200,U="touch-action",V={events:["touchstart","touchmove","touchend","touchcancel"],register:function(a){M.enableOnSubtree(a)},unregister:function(){},elementAdded:function(a){var b=a.getAttribute(U),c=this.touchActionToScrollType(b);c&&(a._scrollType=c,u.listen(a,this.events),
	951	Q(a).forEach(function(a){a._scrollType=c,u.listen(a,this.events)},this))},elementRemoved:function(a){a._scrollType=void 0,u.unlisten(a,this.events),
	952	Q(a).forEach(function(a){a._scrollType=void 0,u.unlisten(a,this.events)},this)},elementChanged:function(a,b){var c=a.getAttribute(U),d=this.touchActionToScrollType(c),e=this.touchActionToScrollType(b);
	953	d&&e?(a._scrollType=d,Q(a).forEach(function(a){a._scrollType=d},this)):e?this.elementRemoved(a):d&&this.elementAdded(a)},scrollTypes:{EMITTER:"none",XSCROLLER:"pan-x",YSCROLLER:"pan-y",SCROLLER:/^(?:pan-x pan-y)\|(?:pan-y pan-x)\|auto$/},touchActionToScrollType:function(a){var b=a,c=this.scrollTypes;return"none"===b?"none":b===c.XSCROLLER?"X":b===c.YSCROLLER?"Y":c.SCROLLER.exec(b)?"XY":void 0},POINTER_TYPE:"touch",firstTouch:null,isPrimaryTouch:function(a){return this.firstTouch===a.identifier},setPrimaryTouch:function(a){
	954	(0===R.size\|\|1===R.size&&R.has(1))&&(this.firstTouch=a.identifier,this.firstXY={X:a.clientX,Y:a.clientY},this.scrolling=!1,this.cancelResetClickCount())},removePrimaryPointer:function(a){a.isPrimary&&(this.firstTouch=null,this.firstXY=null,this.resetClickCount())},clickCount:0,resetId:null,resetClickCount:function(){var a=function(){this.clickCount=0,this.resetId=null}.bind(this);this.resetId=setTimeout(a,T)},cancelResetClickCount:function(){this.resetId&&clearTimeout(this.resetId)},typeToButtons:function(a){var b=0;return"touchstart"!==a&&"touchmove"!==a\|\|(b=1),b},touchToPointer:function(a){var b=this.currentTouchEvent,c=u.cloneEvent(a),d=c.pointerId=a.identifier+2;c.target=O[d]\|\|P(c),c.bubbles=!0,c.cancelable=!0,c.detail=this.clickCount,c.button=0,c.buttons=this.typeToButtons(b.type),c.width=2(a.radiusX\|\|a.webkitRadiusX\|\|0),c.height=2(a.radiusY\|\|a.webkitRadiusY\|\|0),c.pressure=a.force\|\|a.webkitForce\|\|.5,c.isPrimary=this.isPrimaryTouch(a),c.pointerType=this.POINTER_TYPE,
	955	c.altKey=b.altKey,c.ctrlKey=b.ctrlKey,c.metaKey=b.metaKey,c.shiftKey=b.shiftKey;
	956	var e=this;return c.preventDefault=function(){e.scrolling=!1,e.firstXY=null,b.preventDefault()},c},processTouches:function(a,b){var c=a.changedTouches;this.currentTouchEvent=a;for(var d,e=0;e<c.length;e++)d=c[e],b.call(this,this.touchToPointer(d))},
	957	shouldScroll:function(a){if(this.firstXY){var b,c=a.currentTarget._scrollType;if("none"===c)
	958	b=!1;else if("XY"===c)
	959	b=!0;else{var d=a.changedTouches[0],e=c,f="Y"===c?"X":"Y",g=Math.abs(d["client"+e]-this.firstXY[e]),h=Math.abs(d["client"+f]-this.firstXY[f]);
	960	b=g>=h}return this.firstXY=null,b}},findTouch:function(a,b){for(var c,d=0,e=a.length;d<e&&(c=a[d]);d++)if(c.identifier===b)return!0},
	961	vacuumTouches:function(a){var b=a.touches;
	962	if(R.size>=b.length){var c=[];R.forEach(function(a,d){
	963	if(1!==d&&!this.findTouch(b,d-2)){var e=a.out;c.push(e)}},this),c.forEach(this.cancelOut,this)}},touchstart:function(a){this.vacuumTouches(a),this.setPrimaryTouch(a.changedTouches[0]),this.dedupSynthMouse(a),this.scrolling\|\|(this.clickCount++,this.processTouches(a,this.overDown))},overDown:function(a){R.set(a.pointerId,{target:a.target,out:a,outTarget:a.target}),u.enterOver(a),u.down(a)},touchmove:function(a){this.scrolling\|\|(this.shouldScroll(a)?(this.scrolling=!0,this.touchcancel(a)):(a.preventDefault(),this.processTouches(a,this.moveOverOut)))},moveOverOut:function(a){var b=a,c=R.get(b.pointerId);
	964	if(c){var d=c.out,e=c.outTarget;u.move(b),d&&e!==b.target&&(d.relatedTarget=b.target,b.relatedTarget=e,
	965	d.target=e,b.target?(u.leaveOut(d),u.enterOver(b)):(
	966	b.target=e,b.relatedTarget=null,this.cancelOut(b))),c.out=b,c.outTarget=b.target}},touchend:function(a){this.dedupSynthMouse(a),this.processTouches(a,this.upOut)},upOut:function(a){this.scrolling\|\|(u.up(a),u.leaveOut(a)),this.cleanUpPointer(a)},touchcancel:function(a){this.processTouches(a,this.cancelOut)},cancelOut:function(a){u.cancel(a),u.leaveOut(a),this.cleanUpPointer(a)},cleanUpPointer:function(a){R["delete"](a.pointerId),this.removePrimaryPointer(a)},
	967	dedupSynthMouse:function(a){var b=N.lastTouches,c=a.changedTouches[0];
	968	if(this.isPrimaryTouch(c)){
	969	var d={x:c.clientX,y:c.clientY};b.push(d);var e=function(a,b){var c=a.indexOf(b);c>-1&&a.splice(c,1)}.bind(null,b,d);setTimeout(e,S)}}};M=new c(V.elementAdded,V.elementRemoved,V.elementChanged,V);var W,X,Y,Z=u.pointermap,$=window.MSPointerEvent&&"number"==typeof window.MSPointerEvent.MSPOINTER_TYPE_MOUSE,_={events:["MSPointerDown","MSPointerMove","MSPointerUp","MSPointerOut","MSPointerOver","MSPointerCancel","MSGotPointerCapture","MSLostPointerCapture"],register:function(a){u.listen(a,this.events)},unregister:function(a){u.unlisten(a,this.events)},POINTER_TYPES:["","unavailable","touch","pen","mouse"],prepareEvent:function(a){var b=a;return $&&(b=u.cloneEvent(a),b.pointerType=this.POINTER_TYPES[a.pointerType]),b},cleanup:function(a){Z["delete"](a)},MSPointerDown:function(a){Z.set(a.pointerId,a);var b=this.prepareEvent(a);u.down(b)},MSPointerMove:function(a){var b=this.prepareEvent(a);u.move(b)},MSPointerUp:function(a){var b=this.prepareEvent(a);u.up(b),this.cleanup(a.pointerId)},MSPointerOut:function(a){var b=this.prepareEvent(a);u.leaveOut(b)},MSPointerOver:function(a){var b=this.prepareEvent(a);u.enterOver(b)},MSPointerCancel:function(a){var b=this.prepareEvent(a);u.cancel(b),this.cleanup(a.pointerId)},MSLostPointerCapture:function(a){var b=u.makeEvent("lostpointercapture",a);u.dispatchEvent(b)},MSGotPointerCapture:function(a){var b=u.makeEvent("gotpointercapture",a);u.dispatchEvent(b)}},aa=window.navigator;aa.msPointerEnabled?(W=function(a){i(a),j(this),k(a)&&(u.setCapture(a,this,!0),this.msSetPointerCapture(a))},X=function(a){i(a),u.releaseCapture(a,!0),this.msReleasePointerCapture(a)}):(W=function(a){i(a),j(this),k(a)&&u.setCapture(a,this)},X=function(a){i(a),u.releaseCapture(a)}),Y=function(a){return!!u.captureInfo[a]},g(),h(),l();var ba={dispatcher:u,Installer:c,PointerEvent:a,PointerMap:p,targetFinding:v};return ba});
	970
	971	///////////////////////////////////////////////
	972
	973	///////////////////////////////////////////////
	974	var config = {"dark_mode": false, "show_pads": true, "show_fabrication": false, "show_silkscreen": true, "highlight_pin1": "none", "redraw_on_drag": true, "board_rotation": 0, "checkboxes": "Sourced,Placed", "bom_view": "left-right", "layer_view": "FB", "offset_back_rotation": false, "kicad_text_formatting": true, "fields": ["Value", "Footprint", "Voltage", "MPN", "Description", "ECS Art#", "ECS Art. #"]}
	975	///////////////////////////////////////////////
	976
	977	///////////////////////////////////////////////
	978	var pcbdata = JSON.parse(LZString.decompressFromBase64("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"))
	979	///////////////////////////////////////////////
	980
	981	///////////////////////////////////////////////
	982	/* Utility functions */
	983
	984	var storagePrefix = 'KiCad_HTML_BOM__' + pcbdata.metadata.title + '__' +
	985	pcbdata.metadata.revision + '__#';
	986	var storage;
	987
	988	function initStorage(key) {
	989	try {
	990	window.localStorage.getItem("blank");
	991	storage = window.localStorage;
	992	} catch (e) {
	993	// localStorage not available
	994	}
	995	if (!storage) {
	996	try {
	997	window.sessionStorage.getItem("blank");
	998	storage = window.sessionStorage;
	999	} catch (e) {
	1000	// sessionStorage also not available
	1001	}
	1002	}
	1003	}
	1004
	1005	function readStorage(key) {
	1006	if (storage) {
	1007	return storage.getItem(storagePrefix + key);
	1008	} else {
	1009	return null;
	1010	}
	1011	}
	1012
	1013	function writeStorage(key, value) {
	1014	if (storage) {
	1015	storage.setItem(storagePrefix + key, value);
	1016	}
	1017	}
	1018
	1019	function fancyDblClickHandler(el, onsingle, ondouble) {
	1020	return function () {
	1021	if (el.getAttribute("data-dblclick") == null) {
	1022	el.setAttribute("data-dblclick", 1);
	1023	setTimeout(function () {
	1024	if (el.getAttribute("data-dblclick") == 1) {
	1025	onsingle();
	1026	}
	1027	el.removeAttribute("data-dblclick");
	1028	}, 200);
	1029	} else {
	1030	el.removeAttribute("data-dblclick");
	1031	ondouble();
	1032	}
	1033	}
	1034	}
	1035
	1036	function smoothScrollToRow(rowid) {
	1037	document.getElementById(rowid).scrollIntoView({
	1038	behavior: "smooth",
	1039	block: "center",
	1040	inline: "nearest"
	1041	});
	1042	}
	1043
	1044	function focusInputField(input) {
	1045	input.scrollIntoView(false);
	1046	input.focus();
	1047	input.select();
	1048	}
	1049
	1050	function saveBomTable(output) {
	1051	var text = '';
	1052	for (var node of bomhead.childNodes[0].childNodes) {
	1053	if (node.firstChild) {
	1054	text += (output == 'csv' ? `"${node.firstChild.nodeValue}"` : node.firstChild.nodeValue);
	1055	}
	1056	if (node != bomhead.childNodes[0].lastChild) {
	1057	text += (output == 'csv' ? ',' : '\t');
	1058	}
	1059	}
	1060	text += '\n';
	1061	for (var row of bombody.childNodes) {
	1062	for (var cell of row.childNodes) {
	1063	let val = '';
	1064	for (var node of cell.childNodes) {
	1065	if (node.nodeName == "INPUT") {
	1066	if (node.checked) {
	1067	val += '✓';
	1068	}
	1069	} else if ((node.nodeName == "MARK") \|\| (node.nodeName == "A")) {
	1070	val += node.firstChild.nodeValue;
	1071	} else {
	1072	val += node.nodeValue;
	1073	}
	1074	}
	1075	if (output == 'csv') {
	1076	val = val.replace(/\"/g, '\"\"'); // pair of double-quote characters
	1077	if (isNumeric(val)) {
	1078	val = +val; // use number
	1079	} else {
	1080	val = `"${val}"`; // enclosed within double-quote
	1081	}
	1082	}
	1083	text += val;
	1084	if (cell != row.lastChild) {
	1085	text += (output == 'csv' ? ',' : '\t');
	1086	}
	1087	}
	1088	text += '\n';
	1089	}
	1090
	1091	if (output != 'clipboard') {
	1092	// To file: csv or txt
	1093	var blob = new Blob([text], {
	1094	type: `text/${output}`
	1095	});
	1096	saveFile(`${pcbdata.metadata.title}.${output}`, blob);
	1097	} else {
	1098	// To clipboard
	1099	var textArea = document.createElement("textarea");
	1100	textArea.classList.add('clipboard-temp');
	1101	textArea.value = text;
	1102
	1103	document.body.appendChild(textArea);
	1104	textArea.focus();
	1105	textArea.select();
	1106
	1107	try {
	1108	if (document.execCommand('copy')) {
	1109	console.log('Bom copied to clipboard.');
	1110	}
	1111	} catch (err) {
	1112	console.log('Can not copy to clipboard.');
	1113	}
	1114
	1115	document.body.removeChild(textArea);
	1116	}
	1117	}
	1118
	1119	function isNumeric(str) {
	1120	/* https://stackoverflow.com/a/175787 */
	1121	return (typeof str != "string" ? false : !isNaN(str) && !isNaN(parseFloat(str)));
	1122	}
	1123
	1124	function removeGutterNode(node) {
	1125	for (var i = 0; i < node.childNodes.length; i++) {
	1126	if (node.childNodes[i].classList &&
	1127	node.childNodes[i].classList.contains("gutter")) {
	1128	node.removeChild(node.childNodes[i]);
	1129	break;
	1130	}
	1131	}
	1132	}
	1133
	1134	function cleanGutters() {
	1135	removeGutterNode(document.getElementById("bot"));
	1136	removeGutterNode(document.getElementById("canvasdiv"));
	1137	}
	1138
	1139	var units = {
	1140	prefixes: {
	1141	giga: ["G", "g", "giga", "Giga", "GIGA"],
	1142	mega: ["M", "mega", "Mega", "MEGA"],
	1143	kilo: ["K", "k", "kilo", "Kilo", "KILO"],
	1144	milli: ["m", "milli", "Milli", "MILLI"],
	1145	micro: ["U", "u", "micro", "Micro", "MICRO", "μ", "µ"], // different utf8 μ
	1146	nano: ["N", "n", "nano", "Nano", "NANO"],
	1147	pico: ["P", "p", "pico", "Pico", "PICO"],
	1148	},
	1149	unitsShort: ["R", "r", "Ω", "F", "f", "H", "h"],
	1150	unitsLong: [
	1151	"OHM", "Ohm", "ohm", "ohms",
	1152	"FARAD", "Farad", "farad",
	1153	"HENRY", "Henry", "henry"
	1154	],
	1155	getMultiplier: function (s) {
	1156	if (this.prefixes.giga.includes(s)) return 1e9;
	1157	if (this.prefixes.mega.includes(s)) return 1e6;
	1158	if (this.prefixes.kilo.includes(s)) return 1e3;
	1159	if (this.prefixes.milli.includes(s)) return 1e-3;
	1160	if (this.prefixes.micro.includes(s)) return 1e-6;
	1161	if (this.prefixes.nano.includes(s)) return 1e-9;
	1162	if (this.prefixes.pico.includes(s)) return 1e-12;
	1163	return 1;
	1164	},
	1165	valueRegex: null,
	1166	}
	1167
	1168	function initUtils() {
	1169	var allPrefixes = units.prefixes.giga
	1170	.concat(units.prefixes.mega)
	1171	.concat(units.prefixes.kilo)
	1172	.concat(units.prefixes.milli)
	1173	.concat(units.prefixes.micro)
	1174	.concat(units.prefixes.nano)
	1175	.concat(units.prefixes.pico);
	1176	var allUnits = units.unitsShort.concat(units.unitsLong);
	1177	units.valueRegex = new RegExp("^([0-9\.]+)" +
	1178	"\\s*(" + allPrefixes.join("\|") + ")?" +
	1179	"(" + allUnits.join("\|") + ")?" +
	1180	"(\\b.*)?$", "");
	1181	units.valueAltRegex = new RegExp("^([0-9]*)" +
	1182	"(" + units.unitsShort.join("\|") + ")?" +
	1183	"([GgMmKkUuNnPp])?" +
	1184	"([0-9]*)" +
	1185	"(\\b.*)?$", "");
	1186	if (config.fields.includes("Value")) {
	1187	var index = config.fields.indexOf("Value");
	1188	pcbdata.bom["parsedValues"] = {};
	1189	for (var id in pcbdata.bom.fields) {
	1190	pcbdata.bom.parsedValues[id] = parseValue(pcbdata.bom.fields[id][index])
	1191	}
	1192	}
	1193	}
	1194
	1195	function parseValue(val, ref) {
	1196	var inferUnit = (unit, ref) => {
	1197	if (unit) {
	1198	unit = unit.toLowerCase();
	1199	if (unit == 'Ω' \|\| unit == "ohm" \|\| unit == "ohms") {
	1200	unit = 'r';
	1201	}
	1202	unit = unit[0];
	1203	} else {
	1204	ref = /^([a-z]+)\d+$/i.exec(ref);
	1205	if (ref) {
	1206	ref = ref[1].toLowerCase();
	1207	if (ref == "c") unit = 'f';
	1208	else if (ref == "l") unit = 'h';
	1209	else if (ref == "r" \|\| ref == "rv") unit = 'r';
	1210	else unit = null;
	1211	}
	1212	}
	1213	return unit;
	1214	};
	1215	val = val.replace(/,/g, "");
	1216	var match = units.valueRegex.exec(val);
	1217	var unit;
	1218	if (match) {
	1219	val = parseFloat(match[1]);
	1220	if (match[2]) {
	1221	val = val * units.getMultiplier(match[2]);
	1222	}
	1223	unit = inferUnit(match[3], ref);
	1224	if (!unit) return null;
	1225	else return {
	1226	val: val,
	1227	unit: unit,
	1228	extra: match[4],
	1229	}
	1230	}
	1231	match = units.valueAltRegex.exec(val);
	1232	if (match && (match[1] \|\| match[4])) {
	1233	val = parseFloat(match[1] + "." + match[4]);
	1234	if (match[3]) {
	1235	val = val * units.getMultiplier(match[3]);
	1236	}
	1237	unit = inferUnit(match[2], ref);
	1238	if (!unit) return null;
	1239	else return {
	1240	val: val,
	1241	unit: unit,
	1242	extra: match[5],
	1243	}
	1244	}
	1245	return null;
	1246	}
	1247
	1248	function valueCompare(a, b, stra, strb) {
	1249	if (a === null && b === null) {
	1250	// Failed to parse both values, compare them as strings.
	1251	if (stra != strb) return stra > strb ? 1 : -1;
	1252	else return 0;
	1253	} else if (a === null) {
	1254	return 1;
	1255	} else if (b === null) {
	1256	return -1;
	1257	} else {
	1258	if (a.unit != b.unit) return a.unit > b.unit ? 1 : -1;
	1259	else if (a.val != b.val) return a.val > b.val ? 1 : -1;
	1260	else if (a.extra != b.extra) return a.extra > b.extra ? 1 : -1;
	1261	else return 0;
	1262	}
	1263	}
	1264
	1265	function validateSaveImgDimension(element) {
	1266	var valid = false;
	1267	var intValue = 0;
	1268	if (/^[1-9]\d*$/.test(element.value)) {
	1269	intValue = parseInt(element.value);
	1270	if (intValue <= 16000) {
	1271	valid = true;
	1272	}
	1273	}
	1274	if (valid) {
	1275	element.classList.remove("invalid");
	1276	} else {
	1277	element.classList.add("invalid");
	1278	}
	1279	return intValue;
	1280	}
	1281
	1282	function saveImage(layer) {
	1283	var width = validateSaveImgDimension(document.getElementById("render-save-width"));
	1284	var height = validateSaveImgDimension(document.getElementById("render-save-height"));
	1285	var bgcolor = null;
	1286	if (!document.getElementById("render-save-transparent").checked) {
	1287	var style = getComputedStyle(topmostdiv);
	1288	bgcolor = style.getPropertyValue("background-color");
	1289	}
	1290	if (!width \|\| !height) return;
	1291
	1292	// Prepare image
	1293	var canvas = document.createElement("canvas");
	1294	var layerdict = {
	1295	transform: {
	1296	x: 0,
	1297	y: 0,
	1298	s: 1,
	1299	panx: 0,
	1300	pany: 0,
	1301	zoom: 1,
	1302	},
	1303	bg: canvas,
	1304	fab: canvas,
	1305	silk: canvas,
	1306	highlight: canvas,
	1307	layer: layer,
	1308	}
	1309	// Do the rendering
	1310	recalcLayerScale(layerdict, width, height);
	1311	prepareLayer(layerdict);
	1312	clearCanvas(canvas, bgcolor);
	1313	drawBackground(layerdict, false);
	1314	drawHighlightsOnLayer(layerdict, false);
	1315
	1316	// Save image
	1317	var imgdata = canvas.toDataURL("image/png");
	1318
	1319	var filename = pcbdata.metadata.title;
	1320	if (pcbdata.metadata.revision) {
	1321	filename += `.${pcbdata.metadata.revision}`;
	1322	}
	1323	filename += `.${layer}.png`;
	1324	saveFile(filename, dataURLtoBlob(imgdata));
	1325	}
	1326
	1327	function saveSettings() {
	1328	var data = {
	1329	type: "InteractiveHtmlBom settings",
	1330	version: 1,
	1331	pcbmetadata: pcbdata.metadata,
	1332	settings: settings,
	1333	}
	1334	var blob = new Blob([JSON.stringify(data, null, 4)], {
	1335	type: "application/json"
	1336	});
	1337	saveFile(`${pcbdata.metadata.title}.settings.json`, blob);
	1338	}
	1339
	1340	function loadSettings() {
	1341	var input = document.createElement("input");
	1342	input.type = "file";
	1343	input.accept = ".settings.json";
	1344	input.onchange = function (e) {
	1345	var file = e.target.files[0];
	1346	var reader = new FileReader();
	1347	reader.onload = readerEvent => {
	1348	var content = readerEvent.target.result;
	1349	var newSettings;
	1350	try {
	1351	newSettings = JSON.parse(content);
	1352	} catch (e) {
	1353	alert("Selected file is not InteractiveHtmlBom settings file.");
	1354	return;
	1355	}
	1356	if (newSettings.type != "InteractiveHtmlBom settings") {
	1357	alert("Selected file is not InteractiveHtmlBom settings file.");
	1358	return;
	1359	}
	1360	var metadataMatches = newSettings.hasOwnProperty("pcbmetadata");
	1361	if (metadataMatches) {
	1362	for (var k in pcbdata.metadata) {
	1363	if (!newSettings.pcbmetadata.hasOwnProperty(k) \|\| newSettings.pcbmetadata[k] != pcbdata.metadata[k]) {
	1364	metadataMatches = false;
	1365	}
	1366	}
	1367	}
	1368	if (!metadataMatches) {
	1369	var currentMetadata = JSON.stringify(pcbdata.metadata, null, 4);
	1370	var fileMetadata = JSON.stringify(newSettings.pcbmetadata, null, 4);
	1371	if (!confirm(
	1372	`Settins file metadata does not match current metadata.\n\n` +
	1373	`Page metadata:\n${currentMetadata}\n\n` +
	1374	`Settings file metadata:\n${fileMetadata}\n\n` +
	1375	`Press OK if you would like to import settings anyway.`)) {
	1376	return;
	1377	}
	1378	}
	1379	overwriteSettings(newSettings.settings);
	1380	}
	1381	reader.readAsText(file, 'UTF-8');
	1382	}
	1383	input.click();
	1384	}
	1385
	1386	function resetSettings() {
	1387	if (!confirm(
	1388	`This will reset all checkbox states and other settings.\n\n` +
	1389	`Press OK if you want to continue.`)) {
	1390	return;
	1391	}
	1392	if (storage) {
	1393	var keys = [];
	1394	for (var i = 0; i < storage.length; i++) {
	1395	var key = storage.key(i);
	1396	if (key.startsWith(storagePrefix)) keys.push(key);
	1397	}
	1398	for (var key of keys) storage.removeItem(key);
	1399	}
	1400	location.reload();
	1401	}
	1402
	1403	function overwriteSettings(newSettings) {
	1404	initDone = false;
	1405	Object.assign(settings, newSettings);
	1406	writeStorage("bomlayout", settings.bomlayout);
	1407	writeStorage("bommode", settings.bommode);
	1408	writeStorage("canvaslayout", settings.canvaslayout);
	1409	writeStorage("bomCheckboxes", settings.checkboxes.join(","));
	1410	document.getElementById("bomCheckboxes").value = settings.checkboxes.join(",");
	1411	for (var checkbox of settings.checkboxes) {
	1412	writeStorage("checkbox_" + checkbox, settings.checkboxStoredRefs[checkbox]);
	1413	}
	1414	writeStorage("markWhenChecked", settings.markWhenChecked);
	1415	padsVisible(settings.renderPads);
	1416	document.getElementById("padsCheckbox").checked = settings.renderPads;
	1417	fabricationVisible(settings.renderFabrication);
	1418	document.getElementById("fabricationCheckbox").checked = settings.renderFabrication;
	1419	silkscreenVisible(settings.renderSilkscreen);
	1420	document.getElementById("silkscreenCheckbox").checked = settings.renderSilkscreen;
	1421	referencesVisible(settings.renderReferences);
	1422	document.getElementById("referencesCheckbox").checked = settings.renderReferences;
	1423	valuesVisible(settings.renderValues);
	1424	document.getElementById("valuesCheckbox").checked = settings.renderValues;
	1425	tracksVisible(settings.renderTracks);
	1426	document.getElementById("tracksCheckbox").checked = settings.renderTracks;
	1427	zonesVisible(settings.renderZones);
	1428	document.getElementById("zonesCheckbox").checked = settings.renderZones;
	1429	dnpOutline(settings.renderDnpOutline);
	1430	document.getElementById("dnpOutlineCheckbox").checked = settings.renderDnpOutline;
	1431	setRedrawOnDrag(settings.redrawOnDrag);
	1432	document.getElementById("dragCheckbox").checked = settings.redrawOnDrag;
	1433	setDarkMode(settings.darkMode);
	1434	document.getElementById("darkmodeCheckbox").checked = settings.darkMode;
	1435	setHighlightPin1(settings.highlightpin1);
	1436	document.forms.highlightpin1.highlightpin1.value = settings.highlightpin1;
	1437	writeStorage("boardRotation", settings.boardRotation);
	1438	document.getElementById("boardRotation").value = settings.boardRotation / 5;
	1439	document.getElementById("rotationDegree").textContent = settings.boardRotation;
	1440	setOffsetBackRotation(settings.offsetBackRotation);
	1441	document.getElementById("offsetBackRotationCheckbox").checked = settings.offsetBackRotation;
	1442	initDone = true;
	1443	prepCheckboxes();
	1444	changeBomLayout(settings.bomlayout);
	1445	}
	1446
	1447	function saveFile(filename, blob) {
	1448	var link = document.createElement("a");
	1449	var objurl = URL.createObjectURL(blob);
	1450	link.download = filename;
	1451	link.href = objurl;
	1452	link.click();
	1453	}
	1454
	1455	function dataURLtoBlob(dataurl) {
	1456	var arr = dataurl.split(','),
	1457	mime = arr[0].match(/:(.*?);/)[1],
	1458	bstr = atob(arr[1]),
	1459	n = bstr.length,
	1460	u8arr = new Uint8Array(n);
	1461	while (n--) {
	1462	u8arr[n] = bstr.charCodeAt(n);
	1463	}
	1464	return new Blob([u8arr], {
	1465	type: mime
	1466	});
	1467	}
	1468
	1469	var settings = {
	1470	canvaslayout: "FB",
	1471	bomlayout: "left-right",
	1472	bommode: "grouped",
	1473	checkboxes: [],
	1474	checkboxStoredRefs: {},
	1475	darkMode: false,
	1476	highlightpin1: "none",
	1477	redrawOnDrag: true,
	1478	boardRotation: 0,
	1479	offsetBackRotation: false,
	1480	renderPads: true,
	1481	renderReferences: true,
	1482	renderValues: true,
	1483	renderSilkscreen: true,
	1484	renderFabrication: true,
	1485	renderDnpOutline: false,
	1486	renderTracks: true,
	1487	renderZones: true,
	1488	columnOrder: [],
	1489	hiddenColumns: [],
	1490	netColors: {},
	1491	}
	1492
	1493	function initDefaults() {
	1494	settings.bomlayout = readStorage("bomlayout");
	1495	if (settings.bomlayout === null) {
	1496	settings.bomlayout = config.bom_view;
	1497	}
	1498	if (!['bom-only', 'left-right', 'top-bottom'].includes(settings.bomlayout)) {
	1499	settings.bomlayout = config.bom_view;
	1500	}
	1501	settings.bommode = readStorage("bommode");
	1502	if (settings.bommode === null) {
	1503	settings.bommode = "grouped";
	1504	}
	1505	if (settings.bommode == "netlist" && !pcbdata.nets) {
	1506	settings.bommode = "grouped";
	1507	}
	1508	if (!["grouped", "ungrouped", "netlist"].includes(settings.bommode)) {
	1509	settings.bommode = "grouped";
	1510	}
	1511	settings.canvaslayout = readStorage("canvaslayout");
	1512	if (settings.canvaslayout === null) {
	1513	settings.canvaslayout = config.layer_view;
	1514	}
	1515	var bomCheckboxes = readStorage("bomCheckboxes");
	1516	if (bomCheckboxes === null) {
	1517	bomCheckboxes = config.checkboxes;
	1518	}
	1519	settings.checkboxes = bomCheckboxes.split(",").filter((e) => e);
	1520	document.getElementById("bomCheckboxes").value = bomCheckboxes;
	1521
	1522	var highlightpin1 = readStorage("highlightpin1") \|\| config.highlight_pin1;
	1523	if (highlightpin1 === "false") highlightpin1 = "none";
	1524	if (highlightpin1 === "true") highlightpin1 = "all";
	1525	setHighlightPin1(highlightpin1);
	1526	document.forms.highlightpin1.highlightpin1.value = highlightpin1;
	1527
	1528	settings.markWhenChecked = readStorage("markWhenChecked") \|\| "";
	1529	populateMarkWhenCheckedOptions();
	1530
	1531	function initBooleanSetting(storageString, def, elementId, func) {
	1532	var b = readStorage(storageString);
	1533	if (b === null) {
	1534	b = def;
	1535	} else {
	1536	b = (b == "true");
	1537	}
	1538	document.getElementById(elementId).checked = b;
	1539	func(b);
	1540	}
	1541
	1542	initBooleanSetting("padsVisible", config.show_pads, "padsCheckbox", padsVisible);
	1543	initBooleanSetting("fabricationVisible", config.show_fabrication, "fabricationCheckbox", fabricationVisible);
	1544	initBooleanSetting("silkscreenVisible", config.show_silkscreen, "silkscreenCheckbox", silkscreenVisible);
	1545	initBooleanSetting("referencesVisible", true, "referencesCheckbox", referencesVisible);
	1546	initBooleanSetting("valuesVisible", true, "valuesCheckbox", valuesVisible);
	1547	if ("tracks" in pcbdata) {
	1548	initBooleanSetting("tracksVisible", true, "tracksCheckbox", tracksVisible);
	1549	initBooleanSetting("zonesVisible", true, "zonesCheckbox", zonesVisible);
	1550	} else {
	1551	document.getElementById("tracksAndZonesCheckboxes").style.display = "none";
	1552	tracksVisible(false);
	1553	zonesVisible(false);
	1554	}
	1555	initBooleanSetting("dnpOutline", false, "dnpOutlineCheckbox", dnpOutline);
	1556	initBooleanSetting("redrawOnDrag", config.redraw_on_drag, "dragCheckbox", setRedrawOnDrag);
	1557	initBooleanSetting("darkmode", config.dark_mode, "darkmodeCheckbox", setDarkMode);
	1558
	1559	var fields = ["checkboxes", "References"].concat(config.fields).concat(["Quantity"]);
	1560	var hcols = JSON.parse(readStorage("hiddenColumns"));
	1561	if (hcols === null) {
	1562	hcols = [];
	1563	}
	1564	settings.hiddenColumns = hcols.filter(e => fields.includes(e));
	1565
	1566	var cord = JSON.parse(readStorage("columnOrder"));
	1567	if (cord === null) {
	1568	cord = fields;
	1569	} else {
	1570	cord = cord.filter(e => fields.includes(e));
	1571	if (cord.length != fields.length)
	1572	cord = fields;
	1573	}
	1574	settings.columnOrder = cord;
	1575
	1576	settings.boardRotation = readStorage("boardRotation");
	1577	if (settings.boardRotation === null) {
	1578	settings.boardRotation = config.board_rotation * 5;
	1579	} else {
	1580	settings.boardRotation = parseInt(settings.boardRotation);
	1581	}
	1582	document.getElementById("boardRotation").value = settings.boardRotation / 5;
	1583	document.getElementById("rotationDegree").textContent = settings.boardRotation;
	1584	initBooleanSetting("offsetBackRotation", config.offset_back_rotation, "offsetBackRotationCheckbox", setOffsetBackRotation);
	1585
	1586	settings.netColors = JSON.parse(readStorage("netColors")) \|\| {};
	1587	}
	1588
	1589	// Helper classes for user js callbacks.
	1590
	1591	const IBOM_EVENT_TYPES = {
	1592	ALL: "all",
	1593	HIGHLIGHT_EVENT: "highlightEvent",
	1594	CHECKBOX_CHANGE_EVENT: "checkboxChangeEvent",
	1595	BOM_BODY_CHANGE_EVENT: "bomBodyChangeEvent",
	1596	}
	1597
	1598	const EventHandler = {
	1599	callbacks: {},
	1600	init: function () {
	1601	for (eventType of Object.values(IBOM_EVENT_TYPES))
	1602	this.callbacks[eventType] = [];
	1603	},
	1604	registerCallback: function (eventType, callback) {
	1605	this.callbacks[eventType].push(callback);
	1606	},
	1607	emitEvent: function (eventType, eventArgs) {
	1608	event = {
	1609	eventType: eventType,
	1610	args: eventArgs,
	1611	}
	1612	var callback;
	1613	for (callback of this.callbacks[eventType])
	1614	callback(event);
	1615	for (callback of this.callbacks[IBOM_EVENT_TYPES.ALL])
	1616	callback(event);
	1617	}
	1618	}
	1619	EventHandler.init();
	1620
	1621	///////////////////////////////////////////////
	1622
	1623	///////////////////////////////////////////////
	1624	/* PCB rendering code */
	1625
	1626	var emptyContext2d = document.createElement("canvas").getContext("2d");
	1627
	1628	function deg2rad(deg) {
	1629	return deg * Math.PI / 180;
	1630	}
	1631
	1632	function calcFontPoint(linepoint, text, offsetx, offsety, tilt) {
	1633	var point = [
	1634	linepoint[0] * text.width + offsetx,
	1635	linepoint[1] * text.height + offsety
	1636	];
	1637	// This approximates pcbnew behavior with how text tilts depending on horizontal justification
	1638	point[0] -= (linepoint[1] + 0.5 * (1 + text.justify[0])) * text.height * tilt;
	1639	return point;
	1640	}
	1641
	1642	function drawText(ctx, text, color) {
	1643	if ("ref" in text && !settings.renderReferences) return;
	1644	if ("val" in text && !settings.renderValues) return;
	1645	ctx.save();
	1646	ctx.fillStyle = color;
	1647	ctx.strokeStyle = color;
	1648	ctx.lineCap = "round";
	1649	ctx.lineJoin = "round";
	1650	ctx.lineWidth = text.thickness;
	1651	if ("svgpath" in text) {
	1652	ctx.stroke(new Path2D(text.svgpath));
	1653	ctx.restore();
	1654	return;
	1655	}
	1656	if ("polygons" in text) {
	1657	ctx.fill(getPolygonsPath(text));
	1658	ctx.restore();
	1659	return;
	1660	}
	1661	ctx.translate(...text.pos);
	1662	ctx.translate(text.thickness * 0.5, 0);
	1663	var angle = -text.angle;
	1664	if (text.attr.includes("mirrored")) {
	1665	ctx.scale(-1, 1);
	1666	angle = -angle;
	1667	}
	1668	var tilt = 0;
	1669	if (text.attr.includes("italic")) {
	1670	tilt = 0.125;
	1671	}
	1672	var interline = text.height * 1.5 + text.thickness;
	1673	var txt = text.text.split("\n");
	1674	// KiCad ignores last empty line.
	1675	if (txt[txt.length - 1] == '') txt.pop();
	1676	ctx.rotate(deg2rad(angle));
	1677	var offsety = (1 - text.justify[1]) / 2 * text.height; // One line offset
	1678	offsety -= (txt.length - 1) * (text.justify[1] + 1) / 2 * interline; // Multiline offset
	1679	for (var i in txt) {
	1680	var lineWidth = text.thickness + interline / 2 * tilt;
	1681	for (var j = 0; j < txt[i].length; j++) {
	1682	if (txt[i][j] == '\t') {
	1683	var fourSpaces = 4 * pcbdata.font_data[' '].w * text.width;
	1684	lineWidth += fourSpaces - lineWidth % fourSpaces;
	1685	} else {
	1686	if (txt[i][j] == '~') {
	1687	j++;
	1688	if (j == txt[i].length)
	1689	break;
	1690	}
	1691	lineWidth += pcbdata.font_data[txt[i][j]].w * text.width;
	1692	}
	1693	}
	1694	var offsetx = -lineWidth * (text.justify[0] + 1) / 2;
	1695	var inOverbar = false;
	1696	for (var j = 0; j < txt[i].length; j++) {
	1697	if (config.kicad_text_formatting) {
	1698	if (txt[i][j] == '\t') {
	1699	var fourSpaces = 4 * pcbdata.font_data[' '].w * text.width;
	1700	offsetx += fourSpaces - offsetx % fourSpaces;
	1701	continue;
	1702	} else if (txt[i][j] == '~') {
	1703	j++;
	1704	if (j == txt[i].length)
	1705	break;
	1706	if (txt[i][j] != '~') {
	1707	inOverbar = !inOverbar;
	1708	}
	1709	}
	1710	}
	1711	var glyph = pcbdata.font_data[txt[i][j]];
	1712	if (inOverbar) {
	1713	var overbarStart = [offsetx, -text.height * 1.4 + offsety];
	1714	var overbarEnd = [offsetx + text.width * glyph.w, overbarStart[1]];
	1715
	1716	if (!lastHadOverbar) {
	1717	overbarStart[0] += text.height * 1.4 * tilt;
	1718	lastHadOverbar = true;
	1719	}
	1720	ctx.beginPath();
	1721	ctx.moveTo(...overbarStart);
	1722	ctx.lineTo(...overbarEnd);
	1723	ctx.stroke();
	1724	} else {
	1725	lastHadOverbar = false;
	1726	}
	1727	for (var line of glyph.l) {
	1728	ctx.beginPath();
	1729	ctx.moveTo(...calcFontPoint(line[0], text, offsetx, offsety, tilt));
	1730	for (var k = 1; k < line.length; k++) {
	1731	ctx.lineTo(...calcFontPoint(line[k], text, offsetx, offsety, tilt));
	1732	}
	1733	ctx.stroke();
	1734	}
	1735	offsetx += glyph.w * text.width;
	1736	}
	1737	offsety += interline;
	1738	}
	1739	ctx.restore();
	1740	}
	1741
	1742	function drawedge(ctx, scalefactor, edge, color) {
	1743	ctx.strokeStyle = color;
	1744	ctx.fillStyle = color;
	1745	ctx.lineWidth = Math.max(1 / scalefactor, edge.width);
	1746	ctx.lineCap = "round";
	1747	ctx.lineJoin = "round";
	1748	if ("svgpath" in edge) {
	1749	ctx.stroke(new Path2D(edge.svgpath));
	1750	} else {
	1751	ctx.beginPath();
	1752	if (edge.type == "segment") {
	1753	ctx.moveTo(...edge.start);
	1754	ctx.lineTo(...edge.end);
	1755	}
	1756	if (edge.type == "rect") {
	1757	ctx.moveTo(...edge.start);
	1758	ctx.lineTo(edge.start[0], edge.end[1]);
	1759	ctx.lineTo(...edge.end);
	1760	ctx.lineTo(edge.end[0], edge.start[1]);
	1761	ctx.lineTo(...edge.start);
	1762	}
	1763	if (edge.type == "arc") {
	1764	ctx.arc(
	1765	...edge.start,
	1766	edge.radius,
	1767	deg2rad(edge.startangle),
	1768	deg2rad(edge.endangle));
	1769	}
	1770	if (edge.type == "circle") {
	1771	ctx.arc(
	1772	...edge.start,
	1773	edge.radius,
	1774	0, 2 * Math.PI);
	1775	ctx.closePath();
	1776	}
	1777	if (edge.type == "curve") {
	1778	ctx.moveTo(...edge.start);
	1779	ctx.bezierCurveTo(...edge.cpa, ...edge.cpb, ...edge.end);
	1780	}
	1781	if("filled" in edge && edge.filled)
	1782	ctx.fill();
	1783	else
	1784	ctx.stroke();
	1785	}
	1786	}
	1787
	1788	function getChamferedRectPath(size, radius, chamfpos, chamfratio) {
	1789	// chamfpos is a bitmask, left = 1, right = 2, bottom left = 4, bottom right = 8
	1790	var path = new Path2D();
	1791	var width = size[0];
	1792	var height = size[1];
	1793	var x = width * -0.5;
	1794	var y = height * -0.5;
	1795	var chamfOffset = Math.min(width, height) * chamfratio;
	1796	path.moveTo(x, 0);
	1797	if (chamfpos & 4) {
	1798	path.lineTo(x, y + height - chamfOffset);
	1799	path.lineTo(x + chamfOffset, y + height);
	1800	path.lineTo(0, y + height);
	1801	} else {
	1802	path.arcTo(x, y + height, x + width, y + height, radius);
	1803	}
	1804	if (chamfpos & 8) {
	1805	path.lineTo(x + width - chamfOffset, y + height);
	1806	path.lineTo(x + width, y + height - chamfOffset);
	1807	path.lineTo(x + width, 0);
	1808	} else {
	1809	path.arcTo(x + width, y + height, x + width, y, radius);
	1810	}
	1811	if (chamfpos & 2) {
	1812	path.lineTo(x + width, y + chamfOffset);
	1813	path.lineTo(x + width - chamfOffset, y);
	1814	path.lineTo(0, y);
	1815	} else {
	1816	path.arcTo(x + width, y, x, y, radius);
	1817	}
	1818	if (chamfpos & 1) {
	1819	path.lineTo(x + chamfOffset, y);
	1820	path.lineTo(x, y + chamfOffset);
	1821	path.lineTo(x, 0);
	1822	} else {
	1823	path.arcTo(x, y, x, y + height, radius);
	1824	}
	1825	path.closePath();
	1826	return path;
	1827	}
	1828
	1829	function getOblongPath(size) {
	1830	return getChamferedRectPath(size, Math.min(size[0], size[1]) / 2, 0, 0);
	1831	}
	1832
	1833	function getPolygonsPath(shape) {
	1834	if (shape.path2d) {
	1835	return shape.path2d;
	1836	}
	1837	if ("svgpath" in shape) {
	1838	shape.path2d = new Path2D(shape.svgpath);
	1839	} else {
	1840	var path = new Path2D();
	1841	for (var polygon of shape.polygons) {
	1842	path.moveTo(...polygon[0]);
	1843	for (var i = 1; i < polygon.length; i++) {
	1844	path.lineTo(...polygon[i]);
	1845	}
	1846	path.closePath();
	1847	}
	1848	shape.path2d = path;
	1849	}
	1850	return shape.path2d;
	1851	}
	1852
	1853	function drawPolygonShape(ctx, scalefactor, shape, color) {
	1854	ctx.save();
	1855	if (!("svgpath" in shape)) {
	1856	ctx.translate(...shape.pos);
	1857	ctx.rotate(deg2rad(-shape.angle));
	1858	}
	1859	if("filled" in shape && !shape.filled) {
	1860	ctx.strokeStyle = color;
	1861	ctx.lineWidth = Math.max(1 / scalefactor, shape.width);
	1862	ctx.lineCap = "round";
	1863	ctx.lineJoin = "round";
	1864	ctx.stroke(getPolygonsPath(shape));
	1865	} else {
	1866	ctx.fillStyle = color;
	1867	ctx.fill(getPolygonsPath(shape));
	1868	}
	1869	ctx.restore();
	1870	}
	1871
	1872	function drawDrawing(ctx, scalefactor, drawing, color) {
	1873	if (["segment", "arc", "circle", "curve", "rect"].includes(drawing.type)) {
	1874	drawedge(ctx, scalefactor, drawing, color);
	1875	} else if (drawing.type == "polygon") {
	1876	drawPolygonShape(ctx, scalefactor, drawing, color);
	1877	} else {
	1878	drawText(ctx, drawing, color);
	1879	}
	1880	}
	1881
	1882	function getCirclePath(radius) {
	1883	var path = new Path2D();
	1884	path.arc(0, 0, radius, 0, 2 * Math.PI);
	1885	path.closePath();
	1886	return path;
	1887	}
	1888
	1889	function getCachedPadPath(pad) {
	1890	if (!pad.path2d) {
	1891	// if path2d is not set, build one and cache it on pad object
	1892	if (pad.shape == "rect") {
	1893	pad.path2d = new Path2D();
	1894	pad.path2d.rect(...pad.size.map(c => -c * 0.5), ...pad.size);
	1895	} else if (pad.shape == "oval") {
	1896	pad.path2d = getOblongPath(pad.size);
	1897	} else if (pad.shape == "circle") {
	1898	pad.path2d = getCirclePath(pad.size[0] / 2);
	1899	} else if (pad.shape == "roundrect") {
	1900	pad.path2d = getChamferedRectPath(pad.size, pad.radius, 0, 0);
	1901	} else if (pad.shape == "chamfrect") {
	1902	pad.path2d = getChamferedRectPath(pad.size, pad.radius, pad.chamfpos, pad.chamfratio)
	1903	} else if (pad.shape == "custom") {
	1904	pad.path2d = getPolygonsPath(pad);
	1905	}
	1906	}
	1907	return pad.path2d;
	1908	}
	1909
	1910	function drawPad(ctx, pad, color, outline) {
	1911	ctx.save();
	1912	ctx.translate(...pad.pos);
	1913	ctx.rotate(-deg2rad(pad.angle));
	1914	if (pad.offset) {
	1915	ctx.translate(...pad.offset);
	1916	}
	1917	ctx.fillStyle = color;
	1918	ctx.strokeStyle = color;
	1919	var path = getCachedPadPath(pad);
	1920	if (outline) {
	1921	ctx.stroke(path);
	1922	} else {
	1923	ctx.fill(path);
	1924	}
	1925	ctx.restore();
	1926	}
	1927
	1928	function drawPadHole(ctx, pad, padHoleColor) {
	1929	if (pad.type != "th") return;
	1930	ctx.save();
	1931	ctx.translate(...pad.pos);
	1932	ctx.rotate(-deg2rad(pad.angle));
	1933	ctx.fillStyle = padHoleColor;
	1934	if (pad.drillshape == "oblong") {
	1935	ctx.fill(getOblongPath(pad.drillsize));
	1936	} else {
	1937	ctx.fill(getCirclePath(pad.drillsize[0] / 2));
	1938	}
	1939	ctx.restore();
	1940	}
	1941
	1942	function drawFootprint(ctx, layer, scalefactor, footprint, colors, highlight, outline) {
	1943	if (highlight) {
	1944	// draw bounding box
	1945	if (footprint.layer == layer) {
	1946	ctx.save();
	1947	ctx.globalAlpha = 0.2;
	1948	ctx.translate(...footprint.bbox.pos);
	1949	ctx.rotate(deg2rad(-footprint.bbox.angle));
	1950	ctx.translate(...footprint.bbox.relpos);
	1951	ctx.fillStyle = colors.pad;
	1952	ctx.fillRect(0, 0, ...footprint.bbox.size);
	1953	ctx.globalAlpha = 1;
	1954	ctx.strokeStyle = colors.pad;
	1955	ctx.lineWidth = 3 / scalefactor;
	1956	ctx.strokeRect(0, 0, ...footprint.bbox.size);
	1957	ctx.restore();
	1958	}
	1959	}
	1960	// draw drawings
	1961	for (var drawing of footprint.drawings) {
	1962	if (drawing.layer == layer) {
	1963	drawDrawing(ctx, scalefactor, drawing.drawing, colors.pad);
	1964	}
	1965	}
	1966	ctx.lineWidth = 3 / scalefactor;
	1967	// draw pads
	1968	if (settings.renderPads) {
	1969	for (var pad of footprint.pads) {
	1970	if (pad.layers.includes(layer)) {
	1971	drawPad(ctx, pad, colors.pad, outline);
	1972	if (pad.pin1 &&
	1973	(settings.highlightpin1 == "all" \|\|
	1974	settings.highlightpin1 == "selected" && highlight)) {
	1975	drawPad(ctx, pad, colors.outline, true);
	1976	}
	1977	}
	1978	}
	1979	for (var pad of footprint.pads) {
	1980	drawPadHole(ctx, pad, colors.padHole);
	1981	}
	1982	}
	1983	}
	1984
	1985	function drawEdgeCuts(canvas, scalefactor) {
	1986	var ctx = canvas.getContext("2d");
	1987	var edgecolor = getComputedStyle(topmostdiv).getPropertyValue('--pcb-edge-color');
	1988	for (var edge of pcbdata.edges) {
	1989	drawDrawing(ctx, scalefactor, edge, edgecolor);
	1990	}
	1991	}
	1992
	1993	function drawFootprints(canvas, layer, scalefactor, highlight) {
	1994	var ctx = canvas.getContext("2d");
	1995	ctx.lineWidth = 3 / scalefactor;
	1996	var style = getComputedStyle(topmostdiv);
	1997
	1998	var colors = {
	1999	pad: style.getPropertyValue('--pad-color'),
	2000	padHole: style.getPropertyValue('--pad-hole-color'),
	2001	outline: style.getPropertyValue('--pin1-outline-color'),
	2002	}
	2003
	2004	for (var i = 0; i < pcbdata.footprints.length; i++) {
	2005	var mod = pcbdata.footprints[i];
	2006	var outline = settings.renderDnpOutline && pcbdata.bom.skipped.includes(i);
	2007	var h = highlightedFootprints.includes(i);
	2008	var d = markedFootprints.has(i);
	2009	if (highlight) {
	2010	if(h && d) {
	2011	colors.pad = style.getPropertyValue('--pad-color-highlight-both');
	2012	colors.outline = style.getPropertyValue('--pin1-outline-color-highlight-both');
	2013	} else if (h) {
	2014	colors.pad = style.getPropertyValue('--pad-color-highlight');
	2015	colors.outline = style.getPropertyValue('--pin1-outline-color-highlight');
	2016	} else if (d) {
	2017	colors.pad = style.getPropertyValue('--pad-color-highlight-marked');
	2018	colors.outline = style.getPropertyValue('--pin1-outline-color-highlight-marked');
	2019	}
	2020	}
	2021	if( h \|\| d \|\| !highlight) {
	2022	drawFootprint(ctx, layer, scalefactor, mod, colors, highlight, outline);
	2023	}
	2024	}
	2025	}
	2026
	2027	function drawBgLayer(layername, canvas, layer, scalefactor, edgeColor, polygonColor, textColor) {
	2028	var ctx = canvas.getContext("2d");
	2029	for (var d of pcbdata.drawings[layername][layer]) {
	2030	if (["segment", "arc", "circle", "curve", "rect"].includes(d.type)) {
	2031	drawedge(ctx, scalefactor, d, edgeColor);
	2032	} else if (d.type == "polygon") {
	2033	drawPolygonShape(ctx, scalefactor, d, polygonColor);
	2034	} else {
	2035	drawText(ctx, d, textColor);
	2036	}
	2037	}
	2038	}
	2039
	2040	function drawTracks(canvas, layer, defaultColor, highlight) {
	2041	ctx = canvas.getContext("2d");
	2042	ctx.lineCap = "round";
	2043
	2044	var hasHole = (track) => (
	2045	'drillsize' in track &&
	2046	track.start[0] == track.end[0] &&
	2047	track.start[1] == track.end[1]);
	2048
	2049	// First draw tracks and tented vias
	2050	for (var track of pcbdata.tracks[layer]) {
	2051	if (highlight && highlightedNet != track.net) continue;
	2052	if (!hasHole(track)) {
	2053	ctx.strokeStyle = highlight ? defaultColor : settings.netColors[track.net] \|\| defaultColor;
	2054	ctx.lineWidth = track.width;
	2055	ctx.beginPath();
	2056	if ('radius' in track) {
	2057	ctx.arc(
	2058	...track.center,
	2059	track.radius,
	2060	deg2rad(track.startangle),
	2061	deg2rad(track.endangle));
	2062	} else {
	2063	ctx.moveTo(...track.start);
	2064	ctx.lineTo(...track.end);
	2065	}
	2066	ctx.stroke();
	2067	}
	2068	}
	2069	// Second pass to draw untented vias
	2070	var style = getComputedStyle(topmostdiv);
	2071	var holeColor = style.getPropertyValue('--pad-hole-color')
	2072
	2073	for (var track of pcbdata.tracks[layer]) {
	2074	if (highlight && highlightedNet != track.net) continue;
	2075	if (hasHole(track)) {
	2076	ctx.strokeStyle = highlight ? defaultColor : settings.netColors[track.net] \|\| defaultColor;
	2077	ctx.lineWidth = track.width;
	2078	ctx.beginPath();
	2079	ctx.moveTo(...track.start);
	2080	ctx.lineTo(...track.end);
	2081	ctx.stroke();
	2082	ctx.strokeStyle = holeColor;
	2083	ctx.lineWidth = track.drillsize;
	2084	ctx.lineTo(...track.end);
	2085	ctx.stroke();
	2086	}
	2087	}
	2088	}
	2089
	2090	function drawZones(canvas, layer, defaultColor, highlight) {
	2091	ctx = canvas.getContext("2d");
	2092	ctx.lineJoin = "round";
	2093	for (var zone of pcbdata.zones[layer]) {
	2094	if (highlight && highlightedNet != zone.net) continue;
	2095	ctx.strokeStyle = highlight ? defaultColor : settings.netColors[zone.net] \|\| defaultColor;
	2096	ctx.fillStyle = highlight ? defaultColor : settings.netColors[zone.net] \|\| defaultColor;
	2097	if (!zone.path2d) {
	2098	zone.path2d = getPolygonsPath(zone);
	2099	}
	2100	ctx.fill(zone.path2d, zone.fillrule \|\| "nonzero");
	2101	if (zone.width > 0) {
	2102	ctx.lineWidth = zone.width;
	2103	ctx.stroke(zone.path2d);
	2104	}
	2105	}
	2106	}
	2107
	2108	function clearCanvas(canvas, color = null) {
	2109	var ctx = canvas.getContext("2d");
	2110	ctx.save();
	2111	ctx.setTransform(1, 0, 0, 1, 0, 0);
	2112	if (color) {
	2113	ctx.fillStyle = color;
	2114	ctx.fillRect(0, 0, canvas.width, canvas.height);
	2115	} else {
	2116	if (!window.matchMedia("print").matches)
	2117	ctx.clearRect(0, 0, canvas.width, canvas.height);
	2118	}
	2119	ctx.restore();
	2120	}
	2121
	2122	function drawNets(canvas, layer, highlight) {
	2123	var style = getComputedStyle(topmostdiv);
	2124	if (settings.renderZones) {
	2125	var zoneColor = style.getPropertyValue(highlight ? '--zone-color-highlight' : '--zone-color');
	2126	drawZones(canvas, layer, zoneColor, highlight);
	2127	}
	2128	if (settings.renderTracks) {
	2129	var trackColor = style.getPropertyValue(highlight ? '--track-color-highlight' : '--track-color');
	2130	drawTracks(canvas, layer, trackColor, highlight);
	2131	}
	2132	if (highlight && settings.renderPads) {
	2133	var padColor = style.getPropertyValue('--pad-color-highlight');
	2134	var padHoleColor = style.getPropertyValue('--pad-hole-color');
	2135	var ctx = canvas.getContext("2d");
	2136	for (var footprint of pcbdata.footprints) {
	2137	// draw pads
	2138	var padDrawn = false;
	2139	for (var pad of footprint.pads) {
	2140	if (highlightedNet != pad.net) continue;
	2141	if (pad.layers.includes(layer)) {
	2142	drawPad(ctx, pad, padColor, false);
	2143	padDrawn = true;
	2144	}
	2145	}
	2146	if (padDrawn) {
	2147	// redraw all pad holes because some pads may overlap
	2148	for (var pad of footprint.pads) {
	2149	drawPadHole(ctx, pad, padHoleColor);
	2150	}
	2151	}
	2152	}
	2153	}
	2154	}
	2155
	2156	function drawHighlightsOnLayer(canvasdict, clear = true) {
	2157	if (clear) {
	2158	clearCanvas(canvasdict.highlight);
	2159	}
	2160	if (markedFootprints.size > 0 \|\| highlightedFootprints.length > 0) {
	2161	drawFootprints(canvasdict.highlight, canvasdict.layer,
	2162	canvasdict.transform.s * canvasdict.transform.zoom, true);
	2163	}
	2164	if (highlightedNet !== null) {
	2165	drawNets(canvasdict.highlight, canvasdict.layer, true);
	2166	}
	2167	}
	2168
	2169	function drawHighlights() {
	2170	drawHighlightsOnLayer(allcanvas.front);
	2171	drawHighlightsOnLayer(allcanvas.back);
	2172	}
	2173
	2174	function drawBackground(canvasdict, clear = true) {
	2175	if (clear) {
	2176	clearCanvas(canvasdict.bg);
	2177	clearCanvas(canvasdict.fab);
	2178	clearCanvas(canvasdict.silk);
	2179	}
	2180
	2181	drawNets(canvasdict.bg, canvasdict.layer, false);
	2182	drawFootprints(canvasdict.bg, canvasdict.layer,
	2183	canvasdict.transform.s * canvasdict.transform.zoom, false);
	2184
	2185	drawEdgeCuts(canvasdict.bg, canvasdict.transform.s * canvasdict.transform.zoom);
	2186
	2187	var style = getComputedStyle(topmostdiv);
	2188	var edgeColor = style.getPropertyValue('--silkscreen-edge-color');
	2189	var polygonColor = style.getPropertyValue('--silkscreen-polygon-color');
	2190	var textColor = style.getPropertyValue('--silkscreen-text-color');
	2191	if (settings.renderSilkscreen) {
	2192	drawBgLayer(
	2193	"silkscreen", canvasdict.silk, canvasdict.layer,
	2194	canvasdict.transform.s * canvasdict.transform.zoom,
	2195	edgeColor, polygonColor, textColor);
	2196	}
	2197	edgeColor = style.getPropertyValue('--fabrication-edge-color');
	2198	polygonColor = style.getPropertyValue('--fabrication-polygon-color');
	2199	textColor = style.getPropertyValue('--fabrication-text-color');
	2200	if (settings.renderFabrication) {
	2201	drawBgLayer(
	2202	"fabrication", canvasdict.fab, canvasdict.layer,
	2203	canvasdict.transform.s * canvasdict.transform.zoom,
	2204	edgeColor, polygonColor, textColor);
	2205	}
	2206	}
	2207
	2208	function prepareCanvas(canvas, flip, transform) {
	2209	var ctx = canvas.getContext("2d");
	2210	ctx.setTransform(1, 0, 0, 1, 0, 0);
	2211	ctx.scale(transform.zoom, transform.zoom);
	2212	ctx.translate(transform.panx, transform.pany);
	2213	if (flip) {
	2214	ctx.scale(-1, 1);
	2215	}
	2216	ctx.translate(transform.x, transform.y);
	2217	ctx.rotate(deg2rad(settings.boardRotation + (flip && settings.offsetBackRotation ? - 180 : 0)));
	2218	ctx.scale(transform.s, transform.s);
	2219	}
	2220
	2221	function prepareLayer(canvasdict) {
	2222	var flip = (canvasdict.layer === "B");
	2223	for (var c of ["bg", "fab", "silk", "highlight"]) {
	2224	prepareCanvas(canvasdict[c], flip, canvasdict.transform);
	2225	}
	2226	}
	2227
	2228	function rotateVector(v, angle) {
	2229	angle = deg2rad(angle);
	2230	return [
	2231	v[0] * Math.cos(angle) - v[1] * Math.sin(angle),
	2232	v[0] * Math.sin(angle) + v[1] * Math.cos(angle)
	2233	];
	2234	}
	2235
	2236	function applyRotation(bbox, flip) {
	2237	var corners = [
	2238	[bbox.minx, bbox.miny],
	2239	[bbox.minx, bbox.maxy],
	2240	[bbox.maxx, bbox.miny],
	2241	[bbox.maxx, bbox.maxy],
	2242	];
	2243	corners = corners.map((v) => rotateVector(v, settings.boardRotation + (flip && settings.offsetBackRotation ? - 180 : 0)));
	2244	return {
	2245	minx: corners.reduce((a, v) => Math.min(a, v[0]), Infinity),
	2246	miny: corners.reduce((a, v) => Math.min(a, v[1]), Infinity),
	2247	maxx: corners.reduce((a, v) => Math.max(a, v[0]), -Infinity),
	2248	maxy: corners.reduce((a, v) => Math.max(a, v[1]), -Infinity),
	2249	}
	2250	}
	2251
	2252	function recalcLayerScale(layerdict, width, height) {
	2253	var flip = (layerdict.layer === "B");
	2254	var bbox = applyRotation(pcbdata.edges_bbox, flip);
	2255	var scalefactor = 0.98 * Math.min(
	2256	width / (bbox.maxx - bbox.minx),
	2257	height / (bbox.maxy - bbox.miny)
	2258	);
	2259	if (scalefactor < 0.1) {
	2260	scalefactor = 1;
	2261	}
	2262	layerdict.transform.s = scalefactor;
	2263	if (flip) {
	2264	layerdict.transform.x = -((bbox.maxx + bbox.minx) * scalefactor + width) * 0.5;
	2265	} else {
	2266	layerdict.transform.x = -((bbox.maxx + bbox.minx) * scalefactor - width) * 0.5;
	2267	}
	2268	layerdict.transform.y = -((bbox.maxy + bbox.miny) * scalefactor - height) * 0.5;
	2269	for (var c of ["bg", "fab", "silk", "highlight"]) {
	2270	canvas = layerdict[c];
	2271	canvas.width = width;
	2272	canvas.height = height;
	2273	canvas.style.width = (width / devicePixelRatio) + "px";
	2274	canvas.style.height = (height / devicePixelRatio) + "px";
	2275	}
	2276	}
	2277
	2278	function redrawCanvas(layerdict) {
	2279	prepareLayer(layerdict);
	2280	drawBackground(layerdict);
	2281	drawHighlightsOnLayer(layerdict);
	2282	}
	2283
	2284	function resizeCanvas(layerdict) {
	2285	var canvasdivid = {
	2286	"F": "frontcanvas",
	2287	"B": "backcanvas"
	2288	} [layerdict.layer];
	2289	var width = document.getElementById(canvasdivid).clientWidth * devicePixelRatio;
	2290	var height = document.getElementById(canvasdivid).clientHeight * devicePixelRatio;
	2291	recalcLayerScale(layerdict, width, height);
	2292	redrawCanvas(layerdict);
	2293	}
	2294
	2295	function resizeAll() {
	2296	resizeCanvas(allcanvas.front);
	2297	resizeCanvas(allcanvas.back);
	2298	}
	2299
	2300	function pointWithinDistanceToSegment(x, y, x1, y1, x2, y2, d) {
	2301	var A = x - x1;
	2302	var B = y - y1;
	2303	var C = x2 - x1;
	2304	var D = y2 - y1;
	2305
	2306	var dot = A * C + B * D;
	2307	var len_sq = C * C + D * D;
	2308	var dx, dy;
	2309	if (len_sq == 0) {
	2310	// start and end of the segment coincide
	2311	dx = x - x1;
	2312	dy = y - y1;
	2313	} else {
	2314	var param = dot / len_sq;
	2315	var xx, yy;
	2316	if (param < 0) {
	2317	xx = x1;
	2318	yy = y1;
	2319	} else if (param > 1) {
	2320	xx = x2;
	2321	yy = y2;
	2322	} else {
	2323	xx = x1 + param * C;
	2324	yy = y1 + param * D;
	2325	}
	2326	dx = x - xx;
	2327	dy = y - yy;
	2328	}
	2329	return dx * dx + dy * dy <= d * d;
	2330	}
	2331
	2332	function modulo(n, mod) {
	2333	return ((n % mod) + mod) % mod;
	2334	}
	2335
	2336	function pointWithinDistanceToArc(x, y, xc, yc, radius, startangle, endangle, d) {
	2337	var dx = x - xc;
	2338	var dy = y - yc;
	2339	var r_sq = dx * dx + dy * dy;
	2340	var rmin = Math.max(0, radius - d);
	2341	var rmax = radius + d;
	2342
	2343	if (r_sq < rmin * rmin \|\| r_sq > rmax * rmax)
	2344	return false;
	2345
	2346	var angle1 = modulo(deg2rad(startangle), 2 * Math.PI);
	2347	var dx1 = xc + radius * Math.cos(angle1) - x;
	2348	var dy1 = yc + radius * Math.sin(angle1) - y;
	2349	if (dx1 * dx1 + dy1 * dy1 <= d * d)
	2350	return true;
	2351
	2352	var angle2 = modulo(deg2rad(endangle), 2 * Math.PI);
	2353	var dx2 = xc + radius * Math.cos(angle2) - x;
	2354	var dy2 = yc + radius * Math.sin(angle2) - y;
	2355	if (dx2 * dx2 + dy2 * dy2 <= d * d)
	2356	return true;
	2357
	2358	var angle = modulo(Math.atan2(dy, dx), 2 * Math.PI);
	2359	if (angle1 > angle2)
	2360	return (angle >= angle2 \|\| angle <= angle1);
	2361	else
	2362	return (angle >= angle1 && angle <= angle2);
	2363	}
	2364
	2365	function pointWithinPad(x, y, pad) {
	2366	var v = [x - pad.pos[0], y - pad.pos[1]];
	2367	v = rotateVector(v, pad.angle);
	2368	if (pad.offset) {
	2369	v[0] -= pad.offset[0];
	2370	v[1] -= pad.offset[1];
	2371	}
	2372	return emptyContext2d.isPointInPath(getCachedPadPath(pad), ...v);
	2373	}
	2374
	2375	function netHitScan(layer, x, y) {
	2376	// Check track segments
	2377	if (settings.renderTracks && pcbdata.tracks) {
	2378	for (var track of pcbdata.tracks[layer]) {
	2379	if ('radius' in track) {
	2380	if (pointWithinDistanceToArc(x, y, ...track.center, track.radius, track.startangle, track.endangle, track.width / 2)) {
	2381	return track.net;
	2382	}
	2383	} else {
	2384	if (pointWithinDistanceToSegment(x, y, ...track.start, ...track.end, track.width / 2)) {
	2385	return track.net;
	2386	}
	2387	}
	2388	}
	2389	}
	2390	// Check pads
	2391	if (settings.renderPads) {
	2392	for (var footprint of pcbdata.footprints) {
	2393	for (var pad of footprint.pads) {
	2394	if (pad.layers.includes(layer) && pointWithinPad(x, y, pad)) {
	2395	return pad.net;
	2396	}
	2397	}
	2398	}
	2399	}
	2400	return null;
	2401	}
	2402
	2403	function pointWithinFootprintBbox(x, y, bbox) {
	2404	var v = [x - bbox.pos[0], y - bbox.pos[1]];
	2405	v = rotateVector(v, bbox.angle);
	2406	return bbox.relpos[0] <= v[0] && v[0] <= bbox.relpos[0] + bbox.size[0] &&
	2407	bbox.relpos[1] <= v[1] && v[1] <= bbox.relpos[1] + bbox.size[1];
	2408	}
	2409
	2410	function bboxHitScan(layer, x, y) {
	2411	var result = [];
	2412	for (var i = 0; i < pcbdata.footprints.length; i++) {
	2413	var footprint = pcbdata.footprints[i];
	2414	if (footprint.layer == layer) {
	2415	if (pointWithinFootprintBbox(x, y, footprint.bbox)) {
	2416	result.push(i);
	2417	}
	2418	}
	2419	}
	2420	return result;
	2421	}
	2422
	2423	function handlePointerDown(e, layerdict) {
	2424	if (e.button != 0 && e.button != 1) {
	2425	return;
	2426	}
	2427	e.preventDefault();
	2428	e.stopPropagation();
	2429
	2430	if (!e.hasOwnProperty("offsetX")) {
	2431	// The polyfill doesn't set this properly
	2432	e.offsetX = e.pageX - e.currentTarget.offsetLeft;
	2433	e.offsetY = e.pageY - e.currentTarget.offsetTop;
	2434	}
	2435
	2436	layerdict.pointerStates[e.pointerId] = {
	2437	distanceTravelled: 0,
	2438	lastX: e.offsetX,
	2439	lastY: e.offsetY,
	2440	downTime: Date.now(),
	2441	};
	2442	}
	2443
	2444	function handleMouseClick(e, layerdict) {
	2445	if (!e.hasOwnProperty("offsetX")) {
	2446	// The polyfill doesn't set this properly
	2447	e.offsetX = e.pageX - e.currentTarget.offsetLeft;
	2448	e.offsetY = e.pageY - e.currentTarget.offsetTop;
	2449	}
	2450
	2451	var x = e.offsetX;
	2452	var y = e.offsetY;
	2453	var t = layerdict.transform;
	2454	var flip = layerdict.layer === "B";
	2455	if (flip) {
	2456	x = (devicePixelRatio * x / t.zoom - t.panx + t.x) / -t.s;
	2457	} else {
	2458	x = (devicePixelRatio * x / t.zoom - t.panx - t.x) / t.s;
	2459	}
	2460	y = (devicePixelRatio * y / t.zoom - t.y - t.pany) / t.s;
	2461	var v = rotateVector([x, y], -settings.boardRotation + (flip && settings.offsetBackRotation ? - 180 : 0));
	2462	if ("nets" in pcbdata) {
	2463	var net = netHitScan(layerdict.layer, ...v);
	2464	if (net !== highlightedNet) {
	2465	netClicked(net);
	2466	}
	2467	}
	2468	if (highlightedNet === null) {
	2469	var footprints = bboxHitScan(layerdict.layer, ...v);
	2470	if (footprints.length > 0) {
	2471	footprintsClicked(footprints);
	2472	}
	2473	}
	2474	}
	2475
	2476	function handlePointerLeave(e, layerdict) {
	2477	e.preventDefault();
	2478	e.stopPropagation();
	2479
	2480	if (!settings.redrawOnDrag) {
	2481	redrawCanvas(layerdict);
	2482	}
	2483
	2484	delete layerdict.pointerStates[e.pointerId];
	2485	}
	2486
	2487	function resetTransform(layerdict) {
	2488	layerdict.transform.panx = 0;
	2489	layerdict.transform.pany = 0;
	2490	layerdict.transform.zoom = 1;
	2491	redrawCanvas(layerdict);
	2492	}
	2493
	2494	function handlePointerUp(e, layerdict) {
	2495	if (!e.hasOwnProperty("offsetX")) {
	2496	// The polyfill doesn't set this properly
	2497	e.offsetX = e.pageX - e.currentTarget.offsetLeft;
	2498	e.offsetY = e.pageY - e.currentTarget.offsetTop;
	2499	}
	2500
	2501	e.preventDefault();
	2502	e.stopPropagation();
	2503
	2504	if (e.button == 2) {
	2505	// Reset pan and zoom on right click.
	2506	resetTransform(layerdict);
	2507	layerdict.anotherPointerTapped = false;
	2508	return;
	2509	}
	2510
	2511	// We haven't necessarily had a pointermove event since the interaction started, so make sure we update this now
	2512	var ptr = layerdict.pointerStates[e.pointerId];
	2513	ptr.distanceTravelled += Math.abs(e.offsetX - ptr.lastX) + Math.abs(e.offsetY - ptr.lastY);
	2514
	2515	if (e.button == 0 && ptr.distanceTravelled < 10 && Date.now() - ptr.downTime <= 500) {
	2516	if (Object.keys(layerdict.pointerStates).length == 1) {
	2517	if (layerdict.anotherPointerTapped) {
	2518	// This is the second pointer coming off of a two-finger tap
	2519	resetTransform(layerdict);
	2520	} else {
	2521	// This is just a regular tap
	2522	handleMouseClick(e, layerdict);
	2523	}
	2524	layerdict.anotherPointerTapped = false;
	2525	} else {
	2526	// This is the first finger coming off of what could become a two-finger tap
	2527	layerdict.anotherPointerTapped = true;
	2528	}
	2529	} else {
	2530	if (!settings.redrawOnDrag) {
	2531	redrawCanvas(layerdict);
	2532	}
	2533	layerdict.anotherPointerTapped = false;
	2534	}
	2535
	2536	delete layerdict.pointerStates[e.pointerId];
	2537	}
	2538
	2539	function handlePointerMove(e, layerdict) {
	2540	if (!layerdict.pointerStates.hasOwnProperty(e.pointerId)) {
	2541	return;
	2542	}
	2543	e.preventDefault();
	2544	e.stopPropagation();
	2545
	2546	if (!e.hasOwnProperty("offsetX")) {
	2547	// The polyfill doesn't set this properly
	2548	e.offsetX = e.pageX - e.currentTarget.offsetLeft;
	2549	e.offsetY = e.pageY - e.currentTarget.offsetTop;
	2550	}
	2551
	2552	var thisPtr = layerdict.pointerStates[e.pointerId];
	2553
	2554	var dx = e.offsetX - thisPtr.lastX;
	2555	var dy = e.offsetY - thisPtr.lastY;
	2556
	2557	// If this number is low on pointer up, we count the action as a click
	2558	thisPtr.distanceTravelled += Math.abs(dx) + Math.abs(dy);
	2559
	2560	if (Object.keys(layerdict.pointerStates).length == 1) {
	2561	// This is a simple drag
	2562	layerdict.transform.panx += devicePixelRatio * dx / layerdict.transform.zoom;
	2563	layerdict.transform.pany += devicePixelRatio * dy / layerdict.transform.zoom;
	2564	} else if (Object.keys(layerdict.pointerStates).length == 2) {
	2565	var otherPtr = Object.values(layerdict.pointerStates).filter((ptr) => ptr != thisPtr)[0];
	2566
	2567	var oldDist = Math.sqrt(Math.pow(thisPtr.lastX - otherPtr.lastX, 2) + Math.pow(thisPtr.lastY - otherPtr.lastY, 2));
	2568	var newDist = Math.sqrt(Math.pow(e.offsetX - otherPtr.lastX, 2) + Math.pow(e.offsetY - otherPtr.lastY, 2));
	2569
	2570	var scaleFactor = newDist / oldDist;
	2571
	2572	if (scaleFactor != NaN) {
	2573	layerdict.transform.zoom *= scaleFactor;
	2574
	2575	var zoomd = (1 - scaleFactor) / layerdict.transform.zoom;
	2576	layerdict.transform.panx += devicePixelRatio * otherPtr.lastX * zoomd;
	2577	layerdict.transform.pany += devicePixelRatio * otherPtr.lastY * zoomd;
	2578	}
	2579	}
	2580
	2581	thisPtr.lastX = e.offsetX;
	2582	thisPtr.lastY = e.offsetY;
	2583
	2584	if (settings.redrawOnDrag) {
	2585	redrawCanvas(layerdict);
	2586	}
	2587	}
	2588
	2589	function handleMouseWheel(e, layerdict) {
	2590	e.preventDefault();
	2591	e.stopPropagation();
	2592	var t = layerdict.transform;
	2593	var wheeldelta = e.deltaY;
	2594	if (e.deltaMode == 1) {
	2595	// FF only, scroll by lines
	2596	wheeldelta *= 30;
	2597	} else if (e.deltaMode == 2) {
	2598	wheeldelta *= 300;
	2599	}
	2600	var m = Math.pow(1.1, -wheeldelta / 40);
	2601	// Limit amount of zoom per tick.
	2602	if (m > 2) {
	2603	m = 2;
	2604	} else if (m < 0.5) {
	2605	m = 0.5;
	2606	}
	2607	t.zoom *= m;
	2608	var zoomd = (1 - m) / t.zoom;
	2609	t.panx += devicePixelRatio * e.offsetX * zoomd;
	2610	t.pany += devicePixelRatio * e.offsetY * zoomd;
	2611	redrawCanvas(layerdict);
	2612	}
	2613
	2614	function addMouseHandlers(div, layerdict) {
	2615	div.addEventListener("pointerdown", function(e) {
	2616	handlePointerDown(e, layerdict);
	2617	});
	2618	div.addEventListener("pointermove", function(e) {
	2619	handlePointerMove(e, layerdict);
	2620	});
	2621	div.addEventListener("pointerup", function(e) {
	2622	handlePointerUp(e, layerdict);
	2623	});
	2624	var pointerleave = function(e) {
	2625	handlePointerLeave(e, layerdict);
	2626	}
	2627	div.addEventListener("pointercancel", pointerleave);
	2628	div.addEventListener("pointerleave", pointerleave);
	2629	div.addEventListener("pointerout", pointerleave);
	2630
	2631	div.onwheel = function(e) {
	2632	handleMouseWheel(e, layerdict);
	2633	}
	2634	for (var element of [div, layerdict.bg, layerdict.fab, layerdict.silk, layerdict.highlight]) {
	2635	element.addEventListener("contextmenu", function(e) {
	2636	e.preventDefault();
	2637	}, false);
	2638	}
	2639	}
	2640
	2641	function setRedrawOnDrag(value) {
	2642	settings.redrawOnDrag = value;
	2643	writeStorage("redrawOnDrag", value);
	2644	}
	2645
	2646	function setBoardRotation(value) {
	2647	settings.boardRotation = value * 5;
	2648	writeStorage("boardRotation", settings.boardRotation);
	2649	document.getElementById("rotationDegree").textContent = settings.boardRotation;
	2650	resizeAll();
	2651	}
	2652
	2653	function setOffsetBackRotation(value) {
	2654	settings.offsetBackRotation = value;
	2655	writeStorage("offsetBackRotation", value);
	2656	resizeAll();
	2657	}
	2658
	2659	function initRender() {
	2660	allcanvas = {
	2661	front: {
	2662	transform: {
	2663	x: 0,
	2664	y: 0,
	2665	s: 1,
	2666	panx: 0,
	2667	pany: 0,
	2668	zoom: 1,
	2669	},
	2670	pointerStates: {},
	2671	anotherPointerTapped: false,
	2672	bg: document.getElementById("F_bg"),
	2673	fab: document.getElementById("F_fab"),
	2674	silk: document.getElementById("F_slk"),
	2675	highlight: document.getElementById("F_hl"),
	2676	layer: "F",
	2677	},
	2678	back: {
	2679	transform: {
	2680	x: 0,
	2681	y: 0,
	2682	s: 1,
	2683	panx: 0,
	2684	pany: 0,
	2685	zoom: 1,
	2686	},
	2687	pointerStates: {},
	2688	anotherPointerTapped: false,
	2689	bg: document.getElementById("B_bg"),
	2690	fab: document.getElementById("B_fab"),
	2691	silk: document.getElementById("B_slk"),
	2692	highlight: document.getElementById("B_hl"),
	2693	layer: "B",
	2694	}
	2695	};
	2696	addMouseHandlers(document.getElementById("frontcanvas"), allcanvas.front);
	2697	addMouseHandlers(document.getElementById("backcanvas"), allcanvas.back);
	2698	}
	2699
	2700	///////////////////////////////////////////////
	2701
	2702	///////////////////////////////////////////////
	2703	/*
	2704	* Table reordering via Drag'n'Drop
	2705	* Inspired by: https://htmldom.dev/drag-and-drop-table-column
	2706	*/
	2707
	2708	function setBomHandlers() {
	2709
	2710	const bom = document.getElementById('bomtable');
	2711
	2712	let dragName;
	2713	let placeHolderElements;
	2714	let draggingElement;
	2715	let forcePopulation;
	2716	let xOffset;
	2717	let yOffset;
	2718	let wasDragged;
	2719
	2720	const mouseUpHandler = function(e) {
	2721	// Delete dragging element
	2722	draggingElement.remove();
	2723
	2724	// Make BOM selectable again
	2725	bom.style.removeProperty("userSelect");
	2726
	2727	// Remove listeners
	2728	document.removeEventListener('mousemove', mouseMoveHandler);
	2729	document.removeEventListener('mouseup', mouseUpHandler);
	2730
	2731	if (wasDragged) {
	2732	// Redraw whole BOM
	2733	populateBomTable();
	2734	}
	2735	}
	2736
	2737	const mouseMoveHandler = function(e) {
	2738	// Notice the dragging
	2739	wasDragged = true;
	2740
	2741	// Make the dragged element visible
	2742	draggingElement.style.removeProperty("display");
	2743
	2744	// Set elements position to mouse position
	2745	draggingElement.style.left = `${e.screenX - xOffset}px`;
	2746	draggingElement.style.top = `${e.screenY - yOffset}px`;
	2747
	2748	// Forced redrawing of BOM table
	2749	if (forcePopulation) {
	2750	forcePopulation = false;
	2751	// Copy array
	2752	phe = Array.from(placeHolderElements);
	2753	// populate BOM table again
	2754	populateBomHeader(dragName, phe);
	2755	populateBomBody(dragName, phe);
	2756	}
	2757
	2758	// Set up array of hidden columns
	2759	var hiddenColumns = Array.from(settings.hiddenColumns);
	2760	// In the ungrouped mode, quantity don't exist
	2761	if (settings.bommode === "ungrouped")
	2762	hiddenColumns.push("Quantity");
	2763	// If no checkbox fields can be found, we consider them hidden
	2764	if (settings.checkboxes.length == 0)
	2765	hiddenColumns.push("checkboxes");
	2766
	2767	// Get table headers and group them into checkboxes, extrafields and normal headers
	2768	const bh = document.getElementById("bomhead");
	2769	headers = Array.from(bh.querySelectorAll("th"))
	2770	headers.shift() // numCol is not part of the columnOrder
	2771	headerGroups = []
	2772	lastCompoundClass = null;
	2773	for (i = 0; i < settings.columnOrder.length; i++) {
	2774	cElem = settings.columnOrder[i];
	2775	if (hiddenColumns.includes(cElem)) {
	2776	// Hidden columns appear as a dummy element
	2777	headerGroups.push([]);
	2778	continue;
	2779	}
	2780	elem = headers.filter(e => getColumnOrderName(e) === cElem)[0];
	2781	if (elem.classList.contains("bom-checkbox")) {
	2782	if (lastCompoundClass === "bom-checkbox") {
	2783	cbGroup = headerGroups.pop();
	2784	cbGroup.push(elem);
	2785	headerGroups.push(cbGroup);
	2786	} else {
	2787	lastCompoundClass = "bom-checkbox";
	2788	headerGroups.push([elem])
	2789	}
	2790	} else {
	2791	headerGroups.push([elem])
	2792	}
	2793	}
	2794
	2795	// Copy settings.columnOrder
	2796	var columns = Array.from(settings.columnOrder)
	2797
	2798	// Set up array with indices of hidden columns
	2799	var hiddenIndices = hiddenColumns.map(e => settings.columnOrder.indexOf(e));
	2800	var dragIndex = columns.indexOf(dragName);
	2801	var swapIndex = dragIndex;
	2802	var swapDone = false;
	2803
	2804	// Check if the current dragged element is swapable with the left or right element
	2805	if (dragIndex > 0) {
	2806	// Get left headers boundingbox
	2807	swapIndex = dragIndex - 1;
	2808	while (hiddenIndices.includes(swapIndex) && swapIndex > 0)
	2809	swapIndex--;
	2810	if (!hiddenIndices.includes(swapIndex)) {
	2811	box = getBoundingClientRectFromMultiple(headerGroups[swapIndex]);
	2812	if (e.clientX < box.left + window.scrollX + (box.width / 2)) {
	2813	swapElement = columns[dragIndex];
	2814	columns.splice(dragIndex, 1);
	2815	columns.splice(swapIndex, 0, swapElement);
	2816	forcePopulation = true;
	2817	swapDone = true;
	2818	}
	2819	}
	2820	}
	2821	if ((!swapDone) && dragIndex < headerGroups.length - 1) {
	2822	// Get right headers boundingbox
	2823	swapIndex = dragIndex + 1;
	2824	while (hiddenIndices.includes(swapIndex))
	2825	swapIndex++;
	2826	if (swapIndex < headerGroups.length) {
	2827	box = getBoundingClientRectFromMultiple(headerGroups[swapIndex]);
	2828	if (e.clientX > box.left + window.scrollX + (box.width / 2)) {
	2829	swapElement = columns[dragIndex];
	2830	columns.splice(dragIndex, 1);
	2831	columns.splice(swapIndex, 0, swapElement);
	2832	forcePopulation = true;
	2833	swapDone = true;
	2834	}
	2835	}
	2836	}
	2837
	2838	// Write back change to storage
	2839	if (swapDone) {
	2840	settings.columnOrder = columns
	2841	writeStorage("columnOrder", JSON.stringify(columns));
	2842	}
	2843
	2844	}
	2845
	2846	const mouseDownHandler = function(e) {
	2847	var target = e.target;
	2848	if (target.tagName.toLowerCase() != "td")
	2849	target = target.parentElement;
	2850
	2851	// Used to check if a dragging has ever happened
	2852	wasDragged = false;
	2853
	2854	// Create new element which will be displayed as the dragged column
	2855	draggingElement = document.createElement("div")
	2856	draggingElement.classList.add("dragging");
	2857	draggingElement.style.display = "none";
	2858	draggingElement.style.position = "absolute";
	2859	draggingElement.style.overflow = "hidden";
	2860
	2861	// Get bomhead and bombody elements
	2862	const bh = document.getElementById("bomhead");
	2863	const bb = document.getElementById("bombody");
	2864
	2865	// Get all compound headers for the current column
	2866	var compoundHeaders;
	2867	if (target.classList.contains("bom-checkbox")) {
	2868	compoundHeaders = Array.from(bh.querySelectorAll("th.bom-checkbox"));
	2869	} else {
	2870	compoundHeaders = [target];
	2871	}
	2872
	2873	// Create new table which will display the column
	2874	var newTable = document.createElement("table");
	2875	newTable.classList.add("bom");
	2876	newTable.style.background = "white";
	2877	draggingElement.append(newTable);
	2878
	2879	// Create new header element
	2880	var newHeader = document.createElement("thead");
	2881	newTable.append(newHeader);
	2882
	2883	// Set up array for storing all placeholder elements
	2884	placeHolderElements = [];
	2885
	2886	// Add all compound headers to the new thead element and placeholders
	2887	compoundHeaders.forEach(function(h) {
	2888	clone = cloneElementWithDimensions(h);
	2889	newHeader.append(clone);
	2890	placeHolderElements.push(clone);
	2891	});
	2892
	2893	// Create new body element
	2894	var newBody = document.createElement("tbody");
	2895	newTable.append(newBody);
	2896
	2897	// Get indices for compound headers
	2898	var idxs = compoundHeaders.map(e => getBomTableHeaderIndex(e));
	2899
	2900	// For each row in the BOM body...
	2901	var rows = bb.querySelectorAll("tr");
	2902	rows.forEach(function(row) {
	2903	// ..get the cells for the compound column
	2904	const tds = row.querySelectorAll("td");
	2905	var copytds = idxs.map(i => tds[i]);
	2906	// Add them to the new element and the placeholders
	2907	var newRow = document.createElement("tr");
	2908	copytds.forEach(function(td) {
	2909	clone = cloneElementWithDimensions(td);
	2910	newRow.append(clone);
	2911	placeHolderElements.push(clone);
	2912	});
	2913	newBody.append(newRow);
	2914	});
	2915
	2916	// Compute width for compound header
	2917	var width = compoundHeaders.reduce((acc, x) => acc + x.clientWidth, 0);
	2918	draggingElement.style.width = `${width}px`;
	2919
	2920	// Insert the new dragging element and disable selection on BOM
	2921	bom.insertBefore(draggingElement, null);
	2922	bom.style.userSelect = "none";
	2923
	2924	// Determine the mouse position offset
	2925	xOffset = e.screenX - compoundHeaders.reduce((acc, x) => Math.min(acc, x.offsetLeft), compoundHeaders[0].offsetLeft);
	2926	yOffset = e.screenY - compoundHeaders[0].offsetTop;
	2927
	2928	// Get name for the column in settings.columnOrder
	2929	dragName = getColumnOrderName(target);
	2930
	2931	// Change text and class for placeholder elements
	2932	placeHolderElements = placeHolderElements.map(function(e) {
	2933	newElem = cloneElementWithDimensions(e);
	2934	newElem.textContent = "";
	2935	newElem.classList.add("placeholder");
	2936	return newElem;
	2937	});
	2938
	2939	// On next mouse move, the whole BOM needs to be redrawn to show the placeholders
	2940	forcePopulation = true;
	2941
	2942	// Add listeners for move and up on mouse
	2943	document.addEventListener('mousemove', mouseMoveHandler);
	2944	document.addEventListener('mouseup', mouseUpHandler);
	2945	}
	2946
	2947	// In netlist mode, there is nothing to reorder
	2948	if (settings.bommode === "netlist")
	2949	return;
	2950
	2951	// Add mouseDownHandler to every column except the numCol
	2952	bom.querySelectorAll("th")
	2953	.forEach(function(head) {
	2954	if (!head.classList.contains("numCol")) {
	2955	head.onmousedown = mouseDownHandler;
	2956	}
	2957	});
	2958
	2959	}
	2960
	2961	function getBoundingClientRectFromMultiple(elements) {
	2962	var elems = Array.from(elements);
	2963
	2964	if (elems.length == 0)
	2965	return null;
	2966
	2967	var box = elems.shift()
	2968	.getBoundingClientRect();
	2969
	2970	elems.forEach(function(elem) {
	2971	var elembox = elem.getBoundingClientRect();
	2972	box.left = Math.min(elembox.left, box.left);
	2973	box.top = Math.min(elembox.top, box.top);
	2974	box.width += elembox.width;
	2975	box.height = Math.max(elembox.height, box.height);
	2976	});
	2977
	2978	return box;
	2979	}
	2980
	2981	function cloneElementWithDimensions(elem) {
	2982	var newElem = elem.cloneNode(true);
	2983	newElem.style.height = window.getComputedStyle(elem).height;
	2984	newElem.style.width = window.getComputedStyle(elem).width;
	2985	return newElem;
	2986	}
	2987
	2988	function getBomTableHeaderIndex(elem) {
	2989	const bh = document.getElementById('bomhead');
	2990	const ths = Array.from(bh.querySelectorAll("th"));
	2991	return ths.indexOf(elem);
	2992	}
	2993
	2994	function getColumnOrderName(elem) {
	2995	var cname = elem.getAttribute("col_name");
	2996	if (cname === "bom-checkbox")
	2997	return "checkboxes";
	2998	else
	2999	return cname;
	3000	}
	3001
	3002	function resizableGrid(tablehead) {
	3003	var cols = tablehead.firstElementChild.children;
	3004	var rowWidth = tablehead.offsetWidth;
	3005
	3006	for (var i = 1; i < cols.length; i++) {
	3007	if (cols[i].classList.contains("bom-checkbox"))
	3008	continue;
	3009	cols[i].style.width = ((cols[i].clientWidth - paddingDiff(cols[i])) * 100 / rowWidth) + '%';
	3010	}
	3011
	3012	for (var i = 1; i < cols.length - 1; i++) {
	3013	var div = document.createElement('div');
	3014	div.className = "column-width-handle";
	3015	cols[i].appendChild(div);
	3016	setListeners(div);
	3017	}
	3018
	3019	function setListeners(div) {
	3020	var startX, curCol, nxtCol, curColWidth, nxtColWidth, rowWidth;
	3021
	3022	div.addEventListener('mousedown', function(e) {
	3023	e.preventDefault();
	3024	e.stopPropagation();
	3025
	3026	curCol = e.target.parentElement;
	3027	nxtCol = curCol.nextElementSibling;
	3028	startX = e.pageX;
	3029
	3030	var padding = paddingDiff(curCol);
	3031
	3032	rowWidth = curCol.parentElement.offsetWidth;
	3033	curColWidth = curCol.clientWidth - padding;
	3034	nxtColWidth = nxtCol.clientWidth - padding;
	3035	});
	3036
	3037	document.addEventListener('mousemove', function(e) {
	3038	if (startX) {
	3039	var diffX = e.pageX - startX;
	3040	diffX = -Math.min(-diffX, curColWidth - 20);
	3041	diffX = Math.min(diffX, nxtColWidth - 20);
	3042
	3043	curCol.style.width = ((curColWidth + diffX) * 100 / rowWidth) + '%';
	3044	nxtCol.style.width = ((nxtColWidth - diffX) * 100 / rowWidth) + '%';
	3045	console.log(`${curColWidth + nxtColWidth} ${(curColWidth + diffX) * 100 / rowWidth + (nxtColWidth - diffX) * 100 / rowWidth}`);
	3046	}
	3047	});
	3048
	3049	document.addEventListener('mouseup', function(e) {
	3050	curCol = undefined;
	3051	nxtCol = undefined;
	3052	startX = undefined;
	3053	nxtColWidth = undefined;
	3054	curColWidth = undefined
	3055	});
	3056	}
	3057
	3058	function paddingDiff(col) {
	3059
	3060	if (getStyleVal(col, 'box-sizing') == 'border-box') {
	3061	return 0;
	3062	}
	3063
	3064	var padLeft = getStyleVal(col, 'padding-left');
	3065	var padRight = getStyleVal(col, 'padding-right');
	3066	return (parseInt(padLeft) + parseInt(padRight));
	3067
	3068	}
	3069
	3070	function getStyleVal(elm, css) {
	3071	return (window.getComputedStyle(elm, null).getPropertyValue(css))
	3072	}
	3073	}
	3074
	3075	///////////////////////////////////////////////
	3076
	3077	///////////////////////////////////////////////
	3078	/* DOM manipulation and misc code */
	3079
	3080	var bomsplit;
	3081	var canvassplit;
	3082	var initDone = false;
	3083	var bomSortFunction = null;
	3084	var currentSortColumn = null;
	3085	var currentSortOrder = null;
	3086	var currentHighlightedRowId;
	3087	var highlightHandlers = [];
	3088	var footprintIndexToHandler = {};
	3089	var netsToHandler = {};
	3090	var markedFootprints = new Set();
	3091	var highlightedFootprints = [];
	3092	var highlightedNet = null;
	3093	var lastClicked;
	3094
	3095	function dbg(html) {
	3096	dbgdiv.innerHTML = html;
	3097	}
	3098
	3099	function redrawIfInitDone() {
	3100	if (initDone) {
	3101	redrawCanvas(allcanvas.front);
	3102	redrawCanvas(allcanvas.back);
	3103	}
	3104	}
	3105
	3106	function padsVisible(value) {
	3107	writeStorage("padsVisible", value);
	3108	settings.renderPads = value;
	3109	redrawIfInitDone();
	3110	}
	3111
	3112	function referencesVisible(value) {
	3113	writeStorage("referencesVisible", value);
	3114	settings.renderReferences = value;
	3115	redrawIfInitDone();
	3116	}
	3117
	3118	function valuesVisible(value) {
	3119	writeStorage("valuesVisible", value);
	3120	settings.renderValues = value;
	3121	redrawIfInitDone();
	3122	}
	3123
	3124	function tracksVisible(value) {
	3125	writeStorage("tracksVisible", value);
	3126	settings.renderTracks = value;
	3127	redrawIfInitDone();
	3128	}
	3129
	3130	function zonesVisible(value) {
	3131	writeStorage("zonesVisible", value);
	3132	settings.renderZones = value;
	3133	redrawIfInitDone();
	3134	}
	3135
	3136	function dnpOutline(value) {
	3137	writeStorage("dnpOutline", value);
	3138	settings.renderDnpOutline = value;
	3139	redrawIfInitDone();
	3140	}
	3141
	3142	function setDarkMode(value) {
	3143	if (value) {
	3144	topmostdiv.classList.add("dark");
	3145	} else {
	3146	topmostdiv.classList.remove("dark");
	3147	}
	3148	writeStorage("darkmode", value);
	3149	settings.darkMode = value;
	3150	redrawIfInitDone();
	3151	if (initDone) {
	3152	populateBomTable();
	3153	}
	3154	}
	3155
	3156	function setShowBOMColumn(field, value) {
	3157	if (field === "references") {
	3158	var rl = document.getElementById("reflookup");
	3159	rl.disabled = !value;
	3160	if (!value) {
	3161	rl.value = "";
	3162	updateRefLookup("");
	3163	}
	3164	}
	3165
	3166	var n = settings.hiddenColumns.indexOf(field);
	3167	if (value) {
	3168	if (n != -1) {
	3169	settings.hiddenColumns.splice(n, 1);
	3170	}
	3171	} else {
	3172	if (n == -1) {
	3173	settings.hiddenColumns.push(field);
	3174	}
	3175	}
	3176
	3177	writeStorage("hiddenColumns", JSON.stringify(settings.hiddenColumns));
	3178
	3179	if (initDone) {
	3180	populateBomTable();
	3181	}
	3182
	3183	redrawIfInitDone();
	3184	}
	3185
	3186
	3187	function setFullscreen(value) {
	3188	if (value) {
	3189	document.documentElement.requestFullscreen();
	3190	} else {
	3191	document.exitFullscreen();
	3192	}
	3193	}
	3194
	3195	function fabricationVisible(value) {
	3196	writeStorage("fabricationVisible", value);
	3197	settings.renderFabrication = value;
	3198	redrawIfInitDone();
	3199	}
	3200
	3201	function silkscreenVisible(value) {
	3202	writeStorage("silkscreenVisible", value);
	3203	settings.renderSilkscreen = value;
	3204	redrawIfInitDone();
	3205	}
	3206
	3207	function setHighlightPin1(value) {
	3208	writeStorage("highlightpin1", value);
	3209	settings.highlightpin1 = value;
	3210	redrawIfInitDone();
	3211	}
	3212
	3213	function getStoredCheckboxRefs(checkbox) {
	3214	function convert(ref) {
	3215	var intref = parseInt(ref);
	3216	if (isNaN(intref)) {
	3217	for (var i = 0; i < pcbdata.footprints.length; i++) {
	3218	if (pcbdata.footprints[i].ref == ref) {
	3219	return i;
	3220	}
	3221	}
	3222	return -1;
	3223	} else {
	3224	return intref;
	3225	}
	3226	}
	3227	if (!(checkbox in settings.checkboxStoredRefs)) {
	3228	var val = readStorage("checkbox_" + checkbox);
	3229	settings.checkboxStoredRefs[checkbox] = val ? val : "";
	3230	}
	3231	if (!settings.checkboxStoredRefs[checkbox]) {
	3232	return new Set();
	3233	} else {
	3234	return new Set(settings.checkboxStoredRefs[checkbox].split(",").map(r => convert(r)).filter(a => a >= 0));
	3235	}
	3236	}
	3237
	3238	function getCheckboxState(checkbox, references) {
	3239	var storedRefsSet = getStoredCheckboxRefs(checkbox);
	3240	var currentRefsSet = new Set(references.map(r => r[1]));
	3241	// Get difference of current - stored
	3242	var difference = new Set(currentRefsSet);
	3243	for (ref of storedRefsSet) {
	3244	difference.delete(ref);
	3245	}
	3246	if (difference.size == 0) {
	3247	// All the current refs are stored
	3248	return "checked";
	3249	} else if (difference.size == currentRefsSet.size) {
	3250	// None of the current refs are stored
	3251	return "unchecked";
	3252	} else {
	3253	// Some of the refs are stored
	3254	return "indeterminate";
	3255	}
	3256	}
	3257
	3258	function setBomCheckboxState(checkbox, element, references) {
	3259	var state = getCheckboxState(checkbox, references);
	3260	element.checked = (state == "checked");
	3261	element.indeterminate = (state == "indeterminate");
	3262	}
	3263
	3264	function createCheckboxChangeHandler(checkbox, references, row) {
	3265	return function () {
	3266	refsSet = getStoredCheckboxRefs(checkbox);
	3267	var markWhenChecked = settings.markWhenChecked == checkbox;
	3268	eventArgs = {
	3269	checkbox: checkbox,
	3270	refs: references,
	3271	}
	3272	if (this.checked) {
	3273	// checkbox ticked
	3274	for (var ref of references) {
	3275	refsSet.add(ref[1]);
	3276	}
	3277	if (markWhenChecked) {
	3278	row.classList.add("checked");
	3279	for (var ref of references) {
	3280	markedFootprints.add(ref[1]);
	3281	}
	3282	drawHighlights();
	3283	}
	3284	eventArgs.state = 'checked';
	3285	} else {
	3286	// checkbox unticked
	3287	for (var ref of references) {
	3288	refsSet.delete(ref[1]);
	3289	}
	3290	if (markWhenChecked) {
	3291	row.classList.remove("checked");
	3292	for (var ref of references) {
	3293	markedFootprints.delete(ref[1]);
	3294	}
	3295	drawHighlights();
	3296	}
	3297	eventArgs.state = 'unchecked';
	3298	}
	3299	settings.checkboxStoredRefs[checkbox] = [...refsSet].join(",");
	3300	writeStorage("checkbox_" + checkbox, settings.checkboxStoredRefs[checkbox]);
	3301	updateCheckboxStats(checkbox);
	3302	EventHandler.emitEvent(IBOM_EVENT_TYPES.CHECKBOX_CHANGE_EVENT, eventArgs);
	3303	}
	3304	}
	3305
	3306	function clearHighlightedFootprints() {
	3307	if (currentHighlightedRowId) {
	3308	document.getElementById(currentHighlightedRowId).classList.remove("highlighted");
	3309	currentHighlightedRowId = null;
	3310	highlightedFootprints = [];
	3311	highlightedNet = null;
	3312	}
	3313	}
	3314
	3315	function createRowHighlightHandler(rowid, refs, net) {
	3316	return function () {
	3317	if (currentHighlightedRowId) {
	3318	if (currentHighlightedRowId == rowid) {
	3319	return;
	3320	}
	3321	document.getElementById(currentHighlightedRowId).classList.remove("highlighted");
	3322	}
	3323	document.getElementById(rowid).classList.add("highlighted");
	3324	currentHighlightedRowId = rowid;
	3325	highlightedFootprints = refs ? refs.map(r => r[1]) : [];
	3326	highlightedNet = net;
	3327	drawHighlights();
	3328	EventHandler.emitEvent(
	3329	IBOM_EVENT_TYPES.HIGHLIGHT_EVENT, {
	3330	rowid: rowid,
	3331	refs: refs,
	3332	net: net
	3333	});
	3334	}
	3335	}
	3336
	3337	function updateNetColors() {
	3338	writeStorage("netColors", JSON.stringify(settings.netColors));
	3339	redrawIfInitDone();
	3340	}
	3341
	3342	function netColorChangeHandler(net) {
	3343	return (event) => {
	3344	settings.netColors[net] = event.target.value;
	3345	updateNetColors();
	3346	}
	3347	}
	3348
	3349	function netColorRightClick(net) {
	3350	return (event) => {
	3351	if(event.button == 2) {
	3352	event.preventDefault();
	3353	event.stopPropagation();
	3354
	3355	var style = getComputedStyle(topmostdiv);
	3356	var defaultNetColor = style.getPropertyValue('--track-color').trim();
	3357	event.target.value = defaultNetColor;
	3358	delete settings.netColors[net];
	3359	updateNetColors();
	3360	}
	3361	}
	3362	}
	3363
	3364	function entryMatches(entry) {
	3365	if (settings.bommode == "netlist") {
	3366	// entry is just a net name
	3367	return entry.toLowerCase().indexOf(filter) >= 0;
	3368	}
	3369	// check refs
	3370	if (!settings.hiddenColumns.includes("references")) {
	3371	for (var ref of entry) {
	3372	if (ref[0].toLowerCase().indexOf(filter) >= 0) {
	3373	return true;
	3374	}
	3375	}
	3376	}
	3377	// check fields
	3378	for (var i in config.fields) {
	3379	var f = config.fields[i];
	3380	if (!settings.hiddenColumns.includes(f)) {
	3381	for (var ref of entry) {
	3382	if (String(pcbdata.bom.fields[ref[1]][i]).toLowerCase().indexOf(filter) >= 0) {
	3383	return true;
	3384	}
	3385	}
	3386	}
	3387	}
	3388	return false;
	3389	}
	3390
	3391	function findRefInEntry(entry) {
	3392	return entry.filter(r => r[0].toLowerCase() == reflookup);
	3393	}
	3394
	3395	function highlightFilter(s) {
	3396	if (!filter) {
	3397	return s;
	3398	}
	3399	var parts = s.toLowerCase().split(filter);
	3400	if (parts.length == 1) {
	3401	return s;
	3402	}
	3403	var r = "";
	3404	var pos = 0;
	3405	for (var i in parts) {
	3406	if (i > 0) {
	3407	r += '<mark class="highlight">' +
	3408	s.substring(pos, pos + filter.length) +
	3409	'</mark>';
	3410	pos += filter.length;
	3411	}
	3412	r += s.substring(pos, pos + parts[i].length);
	3413	pos += parts[i].length;
	3414	}
	3415	return r;
	3416	}
	3417
	3418	function checkboxSetUnsetAllHandler(checkboxname) {
	3419	return function () {
	3420	var checkboxnum = 0;
	3421	while (checkboxnum < settings.checkboxes.length &&
	3422	settings.checkboxes[checkboxnum].toLowerCase() != checkboxname.toLowerCase()) {
	3423	checkboxnum++;
	3424	}
	3425	if (checkboxnum >= settings.checkboxes.length) {
	3426	return;
	3427	}
	3428	var allset = true;
	3429	var checkbox;
	3430	var row;
	3431	for (row of bombody.childNodes) {
	3432	checkbox = row.childNodes[checkboxnum + 1].childNodes[0];
	3433	if (!checkbox.checked \|\| checkbox.indeterminate) {
	3434	allset = false;
	3435	break;
	3436	}
	3437	}
	3438	for (row of bombody.childNodes) {
	3439	checkbox = row.childNodes[checkboxnum + 1].childNodes[0];
	3440	checkbox.checked = !allset;
	3441	checkbox.indeterminate = false;
	3442	checkbox.onchange();
	3443	}
	3444	}
	3445	}
	3446
	3447	function createColumnHeader(name, cls, comparator, is_checkbox = false) {
	3448	var th = document.createElement("TH");
	3449	th.innerHTML = name;
	3450	th.classList.add(cls);
	3451	if (is_checkbox)
	3452	th.setAttribute("col_name", "bom-checkbox");
	3453	else
	3454	th.setAttribute("col_name", name);
	3455	var span = document.createElement("SPAN");
	3456	span.classList.add("sortmark");
	3457	span.classList.add("none");
	3458	th.appendChild(span);
	3459	var spacer = document.createElement("div");
	3460	spacer.className = "column-spacer";
	3461	th.appendChild(spacer);
	3462	spacer.onclick = function () {
	3463	if (currentSortColumn && th !== currentSortColumn) {
	3464	// Currently sorted by another column
	3465	currentSortColumn.childNodes[1].classList.remove(currentSortOrder);
	3466	currentSortColumn.childNodes[1].classList.add("none");
	3467	currentSortColumn = null;
	3468	currentSortOrder = null;
	3469	}
	3470	if (currentSortColumn && th === currentSortColumn) {
	3471	// Already sorted by this column
	3472	if (currentSortOrder == "asc") {
	3473	// Sort by this column, descending order
	3474	bomSortFunction = function (a, b) {
	3475	return -comparator(a, b);
	3476	}
	3477	currentSortColumn.childNodes[1].classList.remove("asc");
	3478	currentSortColumn.childNodes[1].classList.add("desc");
	3479	currentSortOrder = "desc";
	3480	} else {
	3481	// Unsort
	3482	bomSortFunction = null;
	3483	currentSortColumn.childNodes[1].classList.remove("desc");
	3484	currentSortColumn.childNodes[1].classList.add("none");
	3485	currentSortColumn = null;
	3486	currentSortOrder = null;
	3487	}
	3488	} else {
	3489	// Sort by this column, ascending order
	3490	bomSortFunction = comparator;
	3491	currentSortColumn = th;
	3492	currentSortColumn.childNodes[1].classList.remove("none");
	3493	currentSortColumn.childNodes[1].classList.add("asc");
	3494	currentSortOrder = "asc";
	3495	}
	3496	populateBomBody();
	3497	}
	3498	if (is_checkbox) {
	3499	spacer.onclick = fancyDblClickHandler(
	3500	spacer, spacer.onclick, checkboxSetUnsetAllHandler(name));
	3501	}
	3502	return th;
	3503	}
	3504
	3505	function populateBomHeader(placeHolderColumn = null, placeHolderElements = null) {
	3506	while (bomhead.firstChild) {
	3507	bomhead.removeChild(bomhead.firstChild);
	3508	}
	3509	var tr = document.createElement("TR");
	3510	var th = document.createElement("TH");
	3511	th.classList.add("numCol");
	3512
	3513	var vismenu = document.createElement("div");
	3514	vismenu.id = "vismenu";
	3515	vismenu.classList.add("menu");
	3516
	3517	var visbutton = document.createElement("div");
	3518	visbutton.classList.add("visbtn");
	3519	visbutton.classList.add("hideonprint");
	3520
	3521	var viscontent = document.createElement("div");
	3522	viscontent.classList.add("menu-content");
	3523	viscontent.id = "vismenu-content";
	3524
	3525	settings.columnOrder.forEach(column => {
	3526	if (typeof column !== "string")
	3527	return;
	3528
	3529	// Skip empty columns
	3530	if (column === "checkboxes" && settings.checkboxes.length == 0)
	3531	return;
	3532	else if (column === "Quantity" && settings.bommode == "ungrouped")
	3533	return;
	3534
	3535	var label = document.createElement("label");
	3536	label.classList.add("menu-label");
	3537
	3538	var input = document.createElement("input");
	3539	input.classList.add("visibility_checkbox");
	3540	input.type = "checkbox";
	3541	input.onchange = function (e) {
	3542	setShowBOMColumn(column, e.target.checked)
	3543	};
	3544	input.checked = !(settings.hiddenColumns.includes(column));
	3545
	3546	label.appendChild(input);
	3547	if (column.length > 0)
	3548	label.append(column[0].toUpperCase() + column.slice(1));
	3549
	3550	viscontent.appendChild(label);
	3551	});
	3552
	3553	viscontent.childNodes[0].classList.add("menu-label-top");
	3554
	3555	vismenu.appendChild(visbutton);
	3556	if (settings.bommode != "netlist") {
	3557	vismenu.appendChild(viscontent);
	3558	th.appendChild(vismenu);
	3559	}
	3560	tr.appendChild(th);
	3561
	3562	var checkboxCompareClosure = function (checkbox) {
	3563	return (a, b) => {
	3564	var stateA = getCheckboxState(checkbox, a);
	3565	var stateB = getCheckboxState(checkbox, b);
	3566	if (stateA > stateB) return -1;
	3567	if (stateA < stateB) return 1;
	3568	return 0;
	3569	}
	3570	}
	3571	var stringFieldCompareClosure = function (fieldIndex) {
	3572	return (a, b) => {
	3573	var fa = pcbdata.bom.fields[a[0][1]][fieldIndex];
	3574	var fb = pcbdata.bom.fields[b[0][1]][fieldIndex];
	3575	if (fa != fb) return fa > fb ? 1 : -1;
	3576	else return 0;
	3577	}
	3578	}
	3579	var referenceRegex = /(?<prefix>[^0-9]+)(?<number>[0-9]+)/;
	3580	var compareRefs = (a, b) => {
	3581	var ra = referenceRegex.exec(a);
	3582	var rb = referenceRegex.exec(b);
	3583	if (ra === null \|\| rb === null) {
	3584	if (a != b) return a > b ? 1 : -1;
	3585	return 0;
	3586	} else {
	3587	if (ra.groups.prefix != rb.groups.prefix) {
	3588	return ra.groups.prefix > rb.groups.prefix ? 1 : -1;
	3589	}
	3590	if (ra.groups.number != rb.groups.number) {
	3591	return parseInt(ra.groups.number) > parseInt(rb.groups.number) ? 1 : -1;
	3592	}
	3593	return 0;
	3594	}
	3595	}
	3596	if (settings.bommode == "netlist") {
	3597	tr.appendChild(createColumnHeader("Net name", "bom-netname", (a, b) => {
	3598	if (a > b) return -1;
	3599	if (a < b) return 1;
	3600	return 0;
	3601	}));
	3602	tr.appendChild(createColumnHeader("Color", "bom-color", (a, b) => {
	3603	return 0;
	3604	}));
	3605	} else {
	3606	// Filter hidden columns
	3607	var columns = settings.columnOrder.filter(e => !settings.hiddenColumns.includes(e));
	3608	var valueIndex = config.fields.indexOf("Value");
	3609	var footprintIndex = config.fields.indexOf("Footprint");
	3610	columns.forEach((column) => {
	3611	if (column === placeHolderColumn) {
	3612	var n = 1;
	3613	if (column === "checkboxes")
	3614	n = settings.checkboxes.length;
	3615	for (i = 0; i < n; i++) {
	3616	td = placeHolderElements.shift();
	3617	tr.appendChild(td);
	3618	}
	3619	return;
	3620	} else if (column === "checkboxes") {
	3621	for (var checkbox of settings.checkboxes) {
	3622	th = createColumnHeader(
	3623	checkbox, "bom-checkbox", checkboxCompareClosure(checkbox), true);
	3624	tr.appendChild(th);
	3625	}
	3626	} else if (column === "References") {
	3627	tr.appendChild(createColumnHeader("References", "references", (a, b) => {
	3628	var i = 0;
	3629	while (i < a.length && i < b.length) {
	3630	if (a[i] != b[i]) return compareRefs(a[i][0], b[i][0]);
	3631	i++;
	3632	}
	3633	return a.length - b.length;
	3634	}));
	3635	} else if (column === "Value") {
	3636	tr.appendChild(createColumnHeader("Value", "value", (a, b) => {
	3637	var ra = a[0][1], rb = b[0][1];
	3638	return valueCompare(
	3639	pcbdata.bom.parsedValues[ra], pcbdata.bom.parsedValues[rb],
	3640	pcbdata.bom.fields[ra][valueIndex], pcbdata.bom.fields[rb][valueIndex]);
	3641	}));
	3642	return;
	3643	} else if (column === "Footprint") {
	3644	tr.appendChild(createColumnHeader(
	3645	"Footprint", "footprint", stringFieldCompareClosure(footprintIndex)));
	3646	} else if (column === "Quantity" && settings.bommode == "grouped") {
	3647	tr.appendChild(createColumnHeader("Quantity", "quantity", (a, b) => {
	3648	return a.length - b.length;
	3649	}));
	3650	} else {
	3651	// Other fields
	3652	var i = config.fields.indexOf(column);
	3653	if (i < 0)
	3654	return;
	3655	tr.appendChild(createColumnHeader(
	3656	column, `field${i + 1}`, stringFieldCompareClosure(i)));
	3657	}
	3658	});
	3659	}
	3660	bomhead.appendChild(tr);
	3661	}
	3662
	3663	function populateBomBody(placeholderColumn = null, placeHolderElements = null) {
	3664	const urlRegex = /^(https?:\/\/[^\s\/$.?#][^\s]*\|file:\/\/([a-zA-Z]:\|\/)[^\x00]+)$/;
	3665	while (bom.firstChild) {
	3666	bom.removeChild(bom.firstChild);
	3667	}
	3668	highlightHandlers = [];
	3669	footprintIndexToHandler = {};
	3670	netsToHandler = {};
	3671	currentHighlightedRowId = null;
	3672	var first = true;
	3673	var style = getComputedStyle(topmostdiv);
	3674	var defaultNetColor = style.getPropertyValue('--track-color').trim();
	3675	if (settings.bommode == "netlist") {
	3676	bomtable = pcbdata.nets.slice();
	3677	} else {
	3678	switch (settings.canvaslayout) {
	3679	case 'F':
	3680	bomtable = pcbdata.bom.F.slice();
	3681	break;
	3682	case 'FB':
	3683	bomtable = pcbdata.bom.both.slice();
	3684	break;
	3685	case 'B':
	3686	bomtable = pcbdata.bom.B.slice();
	3687	break;
	3688	}
	3689	if (settings.bommode == "ungrouped") {
	3690	// expand bom table
	3691	expandedTable = []
	3692	for (var bomentry of bomtable) {
	3693	for (var ref of bomentry) {
	3694	expandedTable.push([ref]);
	3695	}
	3696	}
	3697	bomtable = expandedTable;
	3698	}
	3699	}
	3700	if (bomSortFunction) {
	3701	bomtable = bomtable.sort(bomSortFunction);
	3702	}
	3703	for (var i in bomtable) {
	3704	var bomentry = bomtable[i];
	3705	if (filter && !entryMatches(bomentry)) {
	3706	continue;
	3707	}
	3708	var references = null;
	3709	var netname = null;
	3710	var tr = document.createElement("TR");
	3711	var td = document.createElement("TD");
	3712	var rownum = +i + 1;
	3713	tr.id = "bomrow" + rownum;
	3714	td.textContent = rownum;
	3715	tr.appendChild(td);
	3716	if (settings.bommode == "netlist") {
	3717	netname = bomentry;
	3718	td = document.createElement("TD");
	3719	td.innerHTML = highlightFilter(netname ? netname : "<no net>");
	3720	tr.appendChild(td);
	3721	var color = settings.netColors[netname] \|\| defaultNetColor;
	3722	td = document.createElement("TD");
	3723	var colorBox = document.createElement("INPUT");
	3724	colorBox.type = "color";
	3725	colorBox.value = color;
	3726	colorBox.onchange = netColorChangeHandler(netname);
	3727	colorBox.onmouseup = netColorRightClick(netname);
	3728	colorBox.oncontextmenu = (e) => e.preventDefault();
	3729	td.appendChild(colorBox);
	3730	td.classList.add("color-column");
	3731	tr.appendChild(td);
	3732	} else {
	3733	if (reflookup) {
	3734	references = findRefInEntry(bomentry);
	3735	if (references.length == 0) {
	3736	continue;
	3737	}
	3738	} else {
	3739	references = bomentry;
	3740	}
	3741	// Filter hidden columns
	3742	var columns = settings.columnOrder.filter(e => !settings.hiddenColumns.includes(e));
	3743	columns.forEach((column) => {
	3744	if (column === placeholderColumn) {
	3745	var n = 1;
	3746	if (column === "checkboxes")
	3747	n = settings.checkboxes.length;
	3748	for (i = 0; i < n; i++) {
	3749	td = placeHolderElements.shift();
	3750	tr.appendChild(td);
	3751	}
	3752	return;
	3753	} else if (column === "checkboxes") {
	3754	for (var checkbox of settings.checkboxes) {
	3755	if (checkbox) {
	3756	td = document.createElement("TD");
	3757	var input = document.createElement("input");
	3758	input.type = "checkbox";
	3759	input.onchange = createCheckboxChangeHandler(checkbox, references, tr);
	3760	setBomCheckboxState(checkbox, input, references);
	3761	if (input.checked && settings.markWhenChecked == checkbox) {
	3762	tr.classList.add("checked");
	3763	}
	3764	td.appendChild(input);
	3765	tr.appendChild(td);
	3766	}
	3767	}
	3768	} else if (column === "References") {
	3769	td = document.createElement("TD");
	3770	td.innerHTML = highlightFilter(references.map(r => r[0]).join(", "));
	3771	tr.appendChild(td);
	3772	} else if (column === "Quantity" && settings.bommode == "grouped") {
	3773	// Quantity
	3774	td = document.createElement("TD");
	3775	td.textContent = references.length;
	3776	tr.appendChild(td);
	3777	} else {
	3778	// All the other fields
	3779	var field_index = config.fields.indexOf(column)
	3780	if (field_index < 0)
	3781	return;
	3782	var valueSet = new Set();
	3783	references.map(r => r[1]).forEach((id) => valueSet.add(pcbdata.bom.fields[id][field_index]));
	3784	td = document.createElement("TD");
	3785	var output = new Array();
	3786	for (let item of valueSet) {
	3787	const visible = highlightFilter(String(item));
	3788	if (typeof item === 'string' && item.match(urlRegex)) {
	3789	output.push(`<a href="${item}" target="_blank">${visible}</a>`);
	3790	} else {
	3791	output.push(visible);
	3792	}
	3793	}
	3794	td.innerHTML = output.join(", ");
	3795	tr.appendChild(td);
	3796	}
	3797	});
	3798	}
	3799	bom.appendChild(tr);
	3800	var handler = createRowHighlightHandler(tr.id, references, netname);
	3801	tr.onmousemove = handler;
	3802	highlightHandlers.push({
	3803	id: tr.id,
	3804	handler: handler,
	3805	});
	3806	if (references !== null) {
	3807	for (var refIndex of references.map(r => r[1])) {
	3808	footprintIndexToHandler[refIndex] = handler;
	3809	}
	3810	}
	3811	if (netname !== null) {
	3812	netsToHandler[netname] = handler;
	3813	}
	3814	if ((filter \|\| reflookup) && first) {
	3815	handler();
	3816	first = false;
	3817	}
	3818	}
	3819	EventHandler.emitEvent(
	3820	IBOM_EVENT_TYPES.BOM_BODY_CHANGE_EVENT, {
	3821	filter: filter,
	3822	reflookup: reflookup,
	3823	checkboxes: settings.checkboxes,
	3824	bommode: settings.bommode,
	3825	});
	3826	}
	3827
	3828	function highlightPreviousRow() {
	3829	if (!currentHighlightedRowId) {
	3830	highlightHandlers[highlightHandlers.length - 1].handler();
	3831	} else {
	3832	if (highlightHandlers.length > 1 &&
	3833	highlightHandlers[0].id == currentHighlightedRowId) {
	3834	highlightHandlers[highlightHandlers.length - 1].handler();
	3835	} else {
	3836	for (var i = 0; i < highlightHandlers.length - 1; i++) {
	3837	if (highlightHandlers[i + 1].id == currentHighlightedRowId) {
	3838	highlightHandlers[i].handler();
	3839	break;
	3840	}
	3841	}
	3842	}
	3843	}
	3844	smoothScrollToRow(currentHighlightedRowId);
	3845	}
	3846
	3847	function highlightNextRow() {
	3848	if (!currentHighlightedRowId) {
	3849	highlightHandlers[0].handler();
	3850	} else {
	3851	if (highlightHandlers.length > 1 &&
	3852	highlightHandlers[highlightHandlers.length - 1].id == currentHighlightedRowId) {
	3853	highlightHandlers[0].handler();
	3854	} else {
	3855	for (var i = 1; i < highlightHandlers.length; i++) {
	3856	if (highlightHandlers[i - 1].id == currentHighlightedRowId) {
	3857	highlightHandlers[i].handler();
	3858	break;
	3859	}
	3860	}
	3861	}
	3862	}
	3863	smoothScrollToRow(currentHighlightedRowId);
	3864	}
	3865
	3866	function populateBomTable() {
	3867	populateBomHeader();
	3868	populateBomBody();
	3869	setBomHandlers();
	3870	resizableGrid(bomhead);
	3871	}
	3872
	3873	function footprintsClicked(footprintIndexes) {
	3874	var lastClickedIndex = footprintIndexes.indexOf(lastClicked);
	3875	for (var i = 1; i <= footprintIndexes.length; i++) {
	3876	var refIndex = footprintIndexes[(lastClickedIndex + i) % footprintIndexes.length];
	3877	if (refIndex in footprintIndexToHandler) {
	3878	lastClicked = refIndex;
	3879	footprintIndexToHandler[refIndex]();
	3880	smoothScrollToRow(currentHighlightedRowId);
	3881	break;
	3882	}
	3883	}
	3884	}
	3885
	3886	function netClicked(net) {
	3887	if (net in netsToHandler) {
	3888	netsToHandler[net]();
	3889	smoothScrollToRow(currentHighlightedRowId);
	3890	} else {
	3891	clearHighlightedFootprints();
	3892	highlightedNet = net;
	3893	drawHighlights();
	3894	}
	3895	}
	3896
	3897	function updateFilter(input) {
	3898	filter = input.toLowerCase();
	3899	populateBomTable();
	3900	}
	3901
	3902	function updateRefLookup(input) {
	3903	reflookup = input.toLowerCase();
	3904	populateBomTable();
	3905	}
	3906
	3907	function changeCanvasLayout(layout) {
	3908	document.getElementById("fl-btn").classList.remove("depressed");
	3909	document.getElementById("fb-btn").classList.remove("depressed");
	3910	document.getElementById("bl-btn").classList.remove("depressed");
	3911	switch (layout) {
	3912	case 'F':
	3913	document.getElementById("fl-btn").classList.add("depressed");
	3914	if (settings.bomlayout != "bom-only") {
	3915	canvassplit.collapse(1);
	3916	}
	3917	break;
	3918	case 'B':
	3919	document.getElementById("bl-btn").classList.add("depressed");
	3920	if (settings.bomlayout != "bom-only") {
	3921	canvassplit.collapse(0);
	3922	}
	3923	break;
	3924	default:
	3925	document.getElementById("fb-btn").classList.add("depressed");
	3926	if (settings.bomlayout != "bom-only") {
	3927	canvassplit.setSizes([50, 50]);
	3928	}
	3929	}
	3930	settings.canvaslayout = layout;
	3931	writeStorage("canvaslayout", layout);
	3932	resizeAll();
	3933	changeBomMode(settings.bommode);
	3934	}
	3935
	3936	function populateMetadata() {
	3937	document.getElementById("title").innerHTML = pcbdata.metadata.title;
	3938	document.getElementById("revision").innerHTML = "Rev: " + pcbdata.metadata.revision;
	3939	document.getElementById("company").innerHTML = pcbdata.metadata.company;
	3940	document.getElementById("filedate").innerHTML = pcbdata.metadata.date;
	3941	if (pcbdata.metadata.title != "") {
	3942	document.title = pcbdata.metadata.title + " BOM";
	3943	}
	3944	// Calculate board stats
	3945	var fp_f = 0,
	3946	fp_b = 0,
	3947	pads_f = 0,
	3948	pads_b = 0,
	3949	pads_th = 0;
	3950	for (var i = 0; i < pcbdata.footprints.length; i++) {
	3951	if (pcbdata.bom.skipped.includes(i)) continue;
	3952	var mod = pcbdata.footprints[i];
	3953	if (mod.layer == "F") {
	3954	fp_f++;
	3955	} else {
	3956	fp_b++;
	3957	}
	3958	for (var pad of mod.pads) {
	3959	if (pad.type == "th") {
	3960	pads_th++;
	3961	} else {
	3962	if (pad.layers.includes("F")) {
	3963	pads_f++;
	3964	}
	3965	if (pad.layers.includes("B")) {
	3966	pads_b++;
	3967	}
	3968	}
	3969	}
	3970	}
	3971	document.getElementById("stats-components-front").innerHTML = fp_f;
	3972	document.getElementById("stats-components-back").innerHTML = fp_b;
	3973	document.getElementById("stats-components-total").innerHTML = fp_f + fp_b;
	3974	document.getElementById("stats-groups-front").innerHTML = pcbdata.bom.F.length;
	3975	document.getElementById("stats-groups-back").innerHTML = pcbdata.bom.B.length;
	3976	document.getElementById("stats-groups-total").innerHTML = pcbdata.bom.both.length;
	3977	document.getElementById("stats-smd-pads-front").innerHTML = pads_f;
	3978	document.getElementById("stats-smd-pads-back").innerHTML = pads_b;
	3979	document.getElementById("stats-smd-pads-total").innerHTML = pads_f + pads_b;
	3980	document.getElementById("stats-th-pads").innerHTML = pads_th;
	3981	// Update version string
	3982	document.getElementById("github-link").innerHTML = "InteractiveHtmlBom " +
	3983	/^v\d+\.\d+/.exec(pcbdata.ibom_version)[0];
	3984	}
	3985
	3986	function changeBomLayout(layout) {
	3987	document.getElementById("bom-btn").classList.remove("depressed");
	3988	document.getElementById("lr-btn").classList.remove("depressed");
	3989	document.getElementById("tb-btn").classList.remove("depressed");
	3990	switch (layout) {
	3991	case 'bom-only':
	3992	document.getElementById("bom-btn").classList.add("depressed");
	3993	if (bomsplit) {
	3994	bomsplit.destroy();
	3995	bomsplit = null;
	3996	canvassplit.destroy();
	3997	canvassplit = null;
	3998	}
	3999	document.getElementById("frontcanvas").style.display = "none";
	4000	document.getElementById("backcanvas").style.display = "none";
	4001	document.getElementById("topmostdiv").style.height = "";
	4002	document.getElementById("topmostdiv").style.display = "block";
	4003	break;
	4004	case 'top-bottom':
	4005	document.getElementById("tb-btn").classList.add("depressed");
	4006	document.getElementById("frontcanvas").style.display = "";
	4007	document.getElementById("backcanvas").style.display = "";
	4008	document.getElementById("topmostdiv").style.height = "100%";
	4009	document.getElementById("topmostdiv").style.display = "flex";
	4010	document.getElementById("bomdiv").classList.remove("split-horizontal");
	4011	document.getElementById("canvasdiv").classList.remove("split-horizontal");
	4012	document.getElementById("frontcanvas").classList.add("split-horizontal");
	4013	document.getElementById("backcanvas").classList.add("split-horizontal");
	4014	if (bomsplit) {
	4015	bomsplit.destroy();
	4016	bomsplit = null;
	4017	canvassplit.destroy();
	4018	canvassplit = null;
	4019	}
	4020	bomsplit = Split(['#bomdiv', '#canvasdiv'], {
	4021	sizes: [50, 50],
	4022	onDragEnd: resizeAll,
	4023	direction: "vertical",
	4024	gutterSize: 5
	4025	});
	4026	canvassplit = Split(['#frontcanvas', '#backcanvas'], {
	4027	sizes: [50, 50],
	4028	gutterSize: 5,
	4029	onDragEnd: resizeAll
	4030	});
	4031	break;
	4032	case 'left-right':
	4033	document.getElementById("lr-btn").classList.add("depressed");
	4034	document.getElementById("frontcanvas").style.display = "";
	4035	document.getElementById("backcanvas").style.display = "";
	4036	document.getElementById("topmostdiv").style.height = "100%";
	4037	document.getElementById("topmostdiv").style.display = "flex";
	4038	document.getElementById("bomdiv").classList.add("split-horizontal");
	4039	document.getElementById("canvasdiv").classList.add("split-horizontal");
	4040	document.getElementById("frontcanvas").classList.remove("split-horizontal");
	4041	document.getElementById("backcanvas").classList.remove("split-horizontal");
	4042	if (bomsplit) {
	4043	bomsplit.destroy();
	4044	bomsplit = null;
	4045	canvassplit.destroy();
	4046	canvassplit = null;
	4047	}
	4048	bomsplit = Split(['#bomdiv', '#canvasdiv'], {
	4049	sizes: [50, 50],
	4050	onDragEnd: resizeAll,
	4051	gutterSize: 5
	4052	});
	4053	canvassplit = Split(['#frontcanvas', '#backcanvas'], {
	4054	sizes: [50, 50],
	4055	gutterSize: 5,
	4056	direction: "vertical",
	4057	onDragEnd: resizeAll
	4058	});
	4059	}
	4060	settings.bomlayout = layout;
	4061	writeStorage("bomlayout", layout);
	4062	changeCanvasLayout(settings.canvaslayout);
	4063	}
	4064
	4065	function changeBomMode(mode) {
	4066	document.getElementById("bom-grouped-btn").classList.remove("depressed");
	4067	document.getElementById("bom-ungrouped-btn").classList.remove("depressed");
	4068	document.getElementById("bom-netlist-btn").classList.remove("depressed");
	4069	var chkbxs = document.getElementsByClassName("visibility_checkbox");
	4070
	4071	switch (mode) {
	4072	case 'grouped':
	4073	document.getElementById("bom-grouped-btn").classList.add("depressed");
	4074	for (var i = 0; i < chkbxs.length; i++) {
	4075	chkbxs[i].disabled = false;
	4076	}
	4077	break;
	4078	case 'ungrouped':
	4079	document.getElementById("bom-ungrouped-btn").classList.add("depressed");
	4080	for (var i = 0; i < chkbxs.length; i++) {
	4081	chkbxs[i].disabled = false;
	4082	}
	4083	break;
	4084	case 'netlist':
	4085	document.getElementById("bom-netlist-btn").classList.add("depressed");
	4086	for (var i = 0; i < chkbxs.length; i++) {
	4087	chkbxs[i].disabled = true;
	4088	}
	4089	}
	4090
	4091	writeStorage("bommode", mode);
	4092	if (mode != settings.bommode) {
	4093	settings.bommode = mode;
	4094	bomSortFunction = null;
	4095	currentSortColumn = null;
	4096	currentSortOrder = null;
	4097	clearHighlightedFootprints();
	4098	}
	4099	populateBomTable();
	4100	}
	4101
	4102	function focusFilterField() {
	4103	focusInputField(document.getElementById("filter"));
	4104	}
	4105
	4106	function focusRefLookupField() {
	4107	focusInputField(document.getElementById("reflookup"));
	4108	}
	4109
	4110	function toggleBomCheckbox(bomrowid, checkboxnum) {
	4111	if (!bomrowid \|\| checkboxnum > settings.checkboxes.length) {
	4112	return;
	4113	}
	4114	var bomrow = document.getElementById(bomrowid);
	4115	var checkbox = bomrow.childNodes[checkboxnum].childNodes[0];
	4116	checkbox.checked = !checkbox.checked;
	4117	checkbox.indeterminate = false;
	4118	checkbox.onchange();
	4119	}
	4120
	4121	function checkBomCheckbox(bomrowid, checkboxname) {
	4122	var checkboxnum = 0;
	4123	while (checkboxnum < settings.checkboxes.length &&
	4124	settings.checkboxes[checkboxnum].toLowerCase() != checkboxname.toLowerCase()) {
	4125	checkboxnum++;
	4126	}
	4127	if (!bomrowid \|\| checkboxnum >= settings.checkboxes.length) {
	4128	return;
	4129	}
	4130	var bomrow = document.getElementById(bomrowid);
	4131	var checkbox = bomrow.childNodes[checkboxnum + 1].childNodes[0];
	4132	checkbox.checked = true;
	4133	checkbox.indeterminate = false;
	4134	checkbox.onchange();
	4135	}
	4136
	4137	function setBomCheckboxes(value) {
	4138	writeStorage("bomCheckboxes", value);
	4139	settings.checkboxes = value.split(",").map((e) => e.trim()).filter((e) => e);
	4140	prepCheckboxes();
	4141	populateMarkWhenCheckedOptions();
	4142	setMarkWhenChecked(settings.markWhenChecked);
	4143	}
	4144
	4145	function setMarkWhenChecked(value) {
	4146	writeStorage("markWhenChecked", value);
	4147	settings.markWhenChecked = value;
	4148	markedFootprints.clear();
	4149	for (var ref of (value ? getStoredCheckboxRefs(value) : [])) {
	4150	markedFootprints.add(ref);
	4151	}
	4152	populateBomTable();
	4153	drawHighlights();
	4154	}
	4155
	4156	function prepCheckboxes() {
	4157	var table = document.getElementById("checkbox-stats");
	4158	while (table.childElementCount > 1) {
	4159	table.removeChild(table.lastChild);
	4160	}
	4161	if (settings.checkboxes.length) {
	4162	table.style.display = "";
	4163	} else {
	4164	table.style.display = "none";
	4165	}
	4166	for (var checkbox of settings.checkboxes) {
	4167	var tr = document.createElement("TR");
	4168	var td = document.createElement("TD");
	4169	td.innerHTML = checkbox;
	4170	tr.appendChild(td);
	4171	td = document.createElement("TD");
	4172	td.id = "checkbox-stats-" + checkbox;
	4173	var progressbar = document.createElement("div");
	4174	progressbar.classList.add("bar");
	4175	td.appendChild(progressbar);
	4176	var text = document.createElement("div");
	4177	text.classList.add("text");
	4178	td.appendChild(text);
	4179	tr.appendChild(td);
	4180	table.appendChild(tr);
	4181	updateCheckboxStats(checkbox);
	4182	}
	4183	}
	4184
	4185	function populateMarkWhenCheckedOptions() {
	4186	var container = document.getElementById("markWhenCheckedContainer");
	4187
	4188	if (settings.checkboxes.length == 0) {
	4189	container.parentElement.style.display = "none";
	4190	return;
	4191	}
	4192
	4193	container.innerHTML = '';
	4194	container.parentElement.style.display = "inline-block";
	4195
	4196	function createOption(name, displayName) {
	4197	var id = "markWhenChecked-" + name;
	4198
	4199	var div = document.createElement("div");
	4200	div.classList.add("radio-container");
	4201
	4202	var input = document.createElement("input");
	4203	input.type = "radio";
	4204	input.name = "markWhenChecked";
	4205	input.value = name;
	4206	input.id = id;
	4207	input.onchange = () => setMarkWhenChecked(name);
	4208	div.appendChild(input);
	4209
	4210	// Preserve the selected element when the checkboxes change
	4211	if (name == settings.markWhenChecked) {
	4212	input.checked = true;
	4213	}
	4214
	4215	var label = document.createElement("label");
	4216	label.innerHTML = displayName;
	4217	label.htmlFor = id;
	4218	div.appendChild(label);
	4219
	4220	container.appendChild(div);
	4221	}
	4222	createOption("", "None");
	4223	for (var checkbox of settings.checkboxes) {
	4224	createOption(checkbox, checkbox);
	4225	}
	4226	}
	4227
	4228	function updateCheckboxStats(checkbox) {
	4229	var checked = getStoredCheckboxRefs(checkbox).size;
	4230	var total = pcbdata.footprints.length - pcbdata.bom.skipped.length;
	4231	var percent = checked * 100.0 / total;
	4232	var td = document.getElementById("checkbox-stats-" + checkbox);
	4233	td.firstChild.style.width = percent + "%";
	4234	td.lastChild.innerHTML = checked + "/" + total + " (" + Math.round(percent) + "%)";
	4235	}
	4236
	4237	function constrain(number, min, max){
	4238	return Math.min(Math.max(parseInt(number), min), max);
	4239	}
	4240
	4241	document.onkeydown = function (e) {
	4242	switch (e.key) {
	4243	case "n":
	4244	if (document.activeElement.type == "text") {
	4245	return;
	4246	}
	4247	if (currentHighlightedRowId !== null) {
	4248	checkBomCheckbox(currentHighlightedRowId, "placed");
	4249	highlightNextRow();
	4250	e.preventDefault();
	4251	}
	4252	break;
	4253	case "ArrowUp":
	4254	highlightPreviousRow();
	4255	e.preventDefault();
	4256	break;
	4257	case "ArrowDown":
	4258	highlightNextRow();
	4259	e.preventDefault();
	4260	break;
	4261	case "ArrowLeft":
	4262	case "ArrowRight":
	4263	if (document.activeElement.type != "text"){
	4264	e.preventDefault();
	4265	let boardRotationElement = document.getElementById("boardRotation")
	4266	settings.boardRotation = parseInt(boardRotationElement.value); // degrees / 5
	4267	if (e.key == "ArrowLeft"){
	4268	settings.boardRotation += 3; // 15 degrees
	4269	}
	4270	else{
	4271	settings.boardRotation -= 3;
	4272	}
	4273	settings.boardRotation = constrain(settings.boardRotation, boardRotationElement.min, boardRotationElement.max);
	4274	boardRotationElement.value = settings.boardRotation
	4275	setBoardRotation(settings.boardRotation);
	4276	}
	4277	break;
	4278	default:
	4279	break;
	4280	}
	4281	if (e.altKey) {
	4282	switch (e.key) {
	4283	case "f":
	4284	focusFilterField();
	4285	e.preventDefault();
	4286	break;
	4287	case "r":
	4288	focusRefLookupField();
	4289	e.preventDefault();
	4290	break;
	4291	case "z":
	4292	changeBomLayout("bom-only");
	4293	e.preventDefault();
	4294	break;
	4295	case "x":
	4296	changeBomLayout("left-right");
	4297	e.preventDefault();
	4298	break;
	4299	case "c":
	4300	changeBomLayout("top-bottom");
	4301	e.preventDefault();
	4302	break;
	4303	case "v":
	4304	changeCanvasLayout("F");
	4305	e.preventDefault();
	4306	break;
	4307	case "b":
	4308	changeCanvasLayout("FB");
	4309	e.preventDefault();
	4310	break;
	4311	case "n":
	4312	changeCanvasLayout("B");
	4313	e.preventDefault();
	4314	break;
	4315	default:
	4316	break;
	4317	}
	4318	if (e.key >= '1' && e.key <= '9') {
	4319	toggleBomCheckbox(currentHighlightedRowId, parseInt(e.key));
	4320	e.preventDefault();
	4321	}
	4322	}
	4323	}
	4324
	4325	function hideNetlistButton() {
	4326	document.getElementById("bom-ungrouped-btn").classList.remove("middle-button");
	4327	document.getElementById("bom-ungrouped-btn").classList.add("right-most-button");
	4328	document.getElementById("bom-netlist-btn").style.display = "none";
	4329	}
	4330
	4331	function topToggle() {
	4332	var top = document.getElementById("top");
	4333	var toptoggle = document.getElementById("toptoggle");
	4334	if (top.style.display === "none") {
	4335	top.style.display = "flex";
	4336	toptoggle.classList.remove("flipped");
	4337	} else {
	4338	top.style.display = "none";
	4339	toptoggle.classList.add("flipped");
	4340	}
	4341	}
	4342
	4343	window.onload = function (e) {
	4344	initUtils();
	4345	initRender();
	4346	initStorage();
	4347	initDefaults();
	4348	cleanGutters();
	4349	populateMetadata();
	4350	dbgdiv = document.getElementById("dbg");
	4351	bom = document.getElementById("bombody");
	4352	bomhead = document.getElementById("bomhead");
	4353	filter = "";
	4354	reflookup = "";
	4355	if (!("nets" in pcbdata)) {
	4356	hideNetlistButton();
	4357	}
	4358	initDone = true;
	4359	setBomCheckboxes(document.getElementById("bomCheckboxes").value);
	4360	// Triggers render
	4361	changeBomLayout(settings.bomlayout);
	4362
	4363	// Users may leave fullscreen without touching the checkbox. Uncheck.
	4364	document.addEventListener('fullscreenchange', () => {
	4365	if (!document.fullscreenElement)
	4366	document.getElementById('fullscreenCheckbox').checked = false;
	4367	});
	4368	}
	4369
	4370	window.onresize = resizeAll;
	4371	window.matchMedia("print").addListener(resizeAll);
	4372
	4373	///////////////////////////////////////////////
	4374
	4375	///////////////////////////////////////////////
	4376	// EventHandler.registerCallback(IBOM_EVENT_TYPES.BOM_BODY_CHANGE_EVENT, () => {
	4377	// for(var tr of bom.childNodes) {
	4378	// tr.onclick = tr.onmousemove;
	4379	// tr.onmousemove = null;
	4380	// };
	4381	// });
	4382
	4383	///////////////////////////////////////////////
	4384	</script>
	4385	</head>
	4386
	4387	<body>
	4388
	4389	<div id="topmostdiv" class="topmostdiv">
	4390	<div id="top">
	4391	<div id="fileinfodiv">
	4392	<table class="fileinfo">
	4393	<tbody>
	4394	<tr>
	4395	<td id="title" class="title" style="width: 70%">
	4396	Title
	4397	</td>
	4398	<td id="revision" class="title" style="width: 30%">
	4399	Revision
	4400	</td>
	4401	</tr>
	4402	<tr>
	4403	<td id="company">
	4404	Company
	4405	</td>
	4406	<td id="filedate">
	4407	Date
	4408	</td>
	4409	</tr>
	4410	</tbody>
	4411	</table>
	4412	</div>
	4413	<div id="bomcontrols">
	4414	<div class="hideonprint menu">
	4415	<button class="menubtn"></button>
	4416	<div class="menu-content">
	4417	<label class="menu-label menu-label-top" style="width: calc(50% - 18px)">
	4418	<input id="darkmodeCheckbox" type="checkbox" onchange="setDarkMode(this.checked)">
	4419	Dark mode
	4420	</label><!-- This comment eats space! All of it!
	4421	--><label class="menu-label menu-label-top" style="width: calc(50% - 17px); border-left: 0;">
	4422	<input id="fullscreenCheckbox" type="checkbox" onchange="setFullscreen(this.checked)">
	4423	Full Screen
	4424	</label>
	4425	<label class="menu-label" style="width: calc(50% - 18px)">
	4426	<input id="fabricationCheckbox" type="checkbox" checked onchange="fabricationVisible(this.checked)">
	4427	Fab layer
	4428	</label><!-- This comment eats space! All of it!
	4429	--><label class="menu-label" style="width: calc(50% - 17px); border-left: 0;">
	4430	<input id="silkscreenCheckbox" type="checkbox" checked onchange="silkscreenVisible(this.checked)">
	4431	Silkscreen
	4432	</label>
	4433	<label class="menu-label" style="width: calc(50% - 18px)">
	4434	<input id="referencesCheckbox" type="checkbox" checked onchange="referencesVisible(this.checked)">
	4435	References
	4436	</label><!-- This comment eats space! All of it!
	4437	--><label class="menu-label" style="width: calc(50% - 17px); border-left: 0;">
	4438	<input id="valuesCheckbox" type="checkbox" checked onchange="valuesVisible(this.checked)">
	4439	Values
	4440	</label>
	4441	<div id="tracksAndZonesCheckboxes">
	4442	<label class="menu-label" style="width: calc(50% - 18px)">
	4443	<input id="tracksCheckbox" type="checkbox" checked onchange="tracksVisible(this.checked)">
	4444	Tracks
	4445	</label><!-- This comment eats space! All of it!
	4446	--><label class="menu-label" style="width: calc(50% - 17px); border-left: 0;">
	4447	<input id="zonesCheckbox" type="checkbox" checked onchange="zonesVisible(this.checked)">
	4448	Zones
	4449	</label>
	4450	</div>
	4451	<label class="menu-label" style="width: calc(50% - 18px)">
	4452	<input id="padsCheckbox" type="checkbox" checked onchange="padsVisible(this.checked)">
	4453	Pads
	4454	</label><!-- This comment eats space! All of it!
	4455	--><label class="menu-label" style="width: calc(50% - 17px); border-left: 0;">
	4456	<input id="dnpOutlineCheckbox" type="checkbox" checked onchange="dnpOutline(this.checked)">
	4457	DNP outlined
	4458	</label>
	4459	<label class="menu-label">
	4460	<input id="dragCheckbox" type="checkbox" checked onchange="setRedrawOnDrag(this.checked)">
	4461	Continuous redraw on drag
	4462	</label>
	4463	<label class="menu-label">
	4464	Highlight first pin
	4465	<form id="highlightpin1">
	4466	<div class="flexbox">
	4467	<label>
	4468	<input type="radio" name="highlightpin1" value="none" onchange="setHighlightPin1('none')">
	4469	None
	4470	</label>
	4471	<label>
	4472	<input type="radio" name="highlightpin1" value="all" onchange="setHighlightPin1('all')">
	4473	All
	4474	</label>
	4475	<label>
	4476	<input type="radio" name="highlightpin1" value="selected" onchange="setHighlightPin1('selected')">
	4477	Selected
	4478	</label>
	4479	</div>
	4480	</form>
	4481	</label>
	4482	<label class="menu-label">
	4483	<span>Board rotation</span>
	4484	<span style="float: right"><span id="rotationDegree">0</span>°</span>
	4485	<input id="boardRotation" type="range" min="-36" max="36" value="0" class="slider" oninput="setBoardRotation(this.value)">
	4486	</label>
	4487	<label class="menu-label">
	4488	<input id="offsetBackRotationCheckbox" type="checkbox" onchange="setOffsetBackRotation(this.checked)">
	4489	Offset back rotation
	4490	</label>
	4491	<label class="menu-label">
	4492	<div style="margin-left: 5px">Bom checkboxes</div>
	4493	<input id="bomCheckboxes" class="menu-textbox" type=text
	4494	oninput="setBomCheckboxes(this.value)">
	4495	</label>
	4496	<label class="menu-label">
	4497	<div style="margin-left: 5px">Mark when checked</div>
	4498	<div id="markWhenCheckedContainer"></div>
	4499	</label>
	4500	<label class="menu-label">
	4501	<span class="shameless-plug">
	4502	<span>Created using</span>
	4503	<a id="github-link" target="blank" href="https://github.com/openscopeproject/InteractiveHtmlBom">InteractiveHtmlBom</a>
	4504	<a target="blank" title="Mouse and keyboard help" href="https://github.com/openscopeproject/InteractiveHtmlBom/wiki/Usage#bom-page-mouse-actions" style="text-decoration: none;"><label class="help-link">?</label></a>
	4505	</span>
	4506	</label>
	4507	</div>
	4508	</div>
	4509	<div class="button-container hideonprint">
	4510	<button id="fl-btn" class="left-most-button" onclick="changeCanvasLayout('F')"
	4511	title="Front only">F
	4512	</button>
	4513	<button id="fb-btn" class="middle-button" onclick="changeCanvasLayout('FB')"
	4514	title="Front and Back">FB
	4515	</button>
	4516	<button id="bl-btn" class="right-most-button" onclick="changeCanvasLayout('B')"
	4517	title="Back only">B
	4518	</button>
	4519	</div>
	4520	<div class="button-container hideonprint">
	4521	<button id="bom-btn" class="left-most-button" onclick="changeBomLayout('bom-only')"
	4522	title="BOM only"></button>
	4523	<button id="lr-btn" class="middle-button" onclick="changeBomLayout('left-right')"
	4524	title="BOM left, drawings right"></button>
	4525	<button id="tb-btn" class="right-most-button" onclick="changeBomLayout('top-bottom')"
	4526	title="BOM top, drawings bot"></button>
	4527	</div>
	4528	<div class="button-container hideonprint">
	4529	<button id="bom-grouped-btn" class="left-most-button" onclick="changeBomMode('grouped')"
	4530	title="Grouped BOM"></button>
	4531	<button id="bom-ungrouped-btn" class="middle-button" onclick="changeBomMode('ungrouped')"
	4532	title="Ungrouped BOM"></button>
	4533	<button id="bom-netlist-btn" class="right-most-button" onclick="changeBomMode('netlist')"
	4534	title="Netlist"></button>
	4535	</div>
	4536	<div class="hideonprint menu">
	4537	<button class="statsbtn"></button>
	4538	<div class="menu-content">
	4539	<table class="stats">
	4540	<tbody>
	4541	<tr>
	4542	<td width="40%">Board stats</td>
	4543	<td>Front</td>
	4544	<td>Back</td>
	4545	<td>Total</td>
	4546	</tr>
	4547	<tr>
	4548	<td>Components</td>
	4549	<td id="stats-components-front">~</td>
	4550	<td id="stats-components-back">~</td>
	4551	<td id="stats-components-total">~</td>
	4552	</tr>
	4553	<tr>
	4554	<td>Groups</td>
	4555	<td id="stats-groups-front">~</td>
	4556	<td id="stats-groups-back">~</td>
	4557	<td id="stats-groups-total">~</td>
	4558	</tr>
	4559	<tr>
	4560	<td>SMD pads</td>
	4561	<td id="stats-smd-pads-front">~</td>
	4562	<td id="stats-smd-pads-back">~</td>
	4563	<td id="stats-smd-pads-total">~</td>
	4564	</tr>
	4565	<tr>
	4566	<td>TH pads</td>
	4567	<td colspan=3 id="stats-th-pads">~</td>
	4568	</tr>
	4569	</tbody>
	4570	</table>
	4571	<table class="stats">
	4572	<col width="40%"/><col />
	4573	<tbody id="checkbox-stats">
	4574	<tr>
	4575	<td colspan=2 style="border-top: 0">Checkboxes</td>
	4576	</tr>
	4577	</tbody>
	4578	</table>
	4579	</div>
	4580	</div>
	4581	<div class="hideonprint menu">
	4582	<button class="iobtn"></button>
	4583	<div class="menu-content">
	4584	<div class="menu-label menu-label-top">
	4585	<div style="margin-left: 5px;">Save board image</div>
	4586	<div class="flexbox">
	4587	<input id="render-save-width" class="menu-textbox" type="text" value="1000" placeholder="Width"
	4588	style="flex-grow: 1; width: 50px;" oninput="validateSaveImgDimension(this)">
	4589	<span>X</span>
	4590	<input id="render-save-height" class="menu-textbox" type="text" value="1000" placeholder="Height"
	4591	style="flex-grow: 1; width: 50px;" oninput="validateSaveImgDimension(this)">
	4592	</div>
	4593	<label>
	4594	<input id="render-save-transparent" type="checkbox">
	4595	Transparent background
	4596	</label>
	4597	<div class="flexbox">
	4598	<button class="savebtn" onclick="saveImage('F')">Front</button>
	4599	<button class="savebtn" onclick="saveImage('B')">Back</button>
	4600	</div>
	4601	</div>
	4602	<div class="menu-label">
	4603	<span style="margin-left: 5px;">Config and checkbox state</span>
	4604	<div class="flexbox">
	4605	<button class="savebtn" onclick="saveSettings()">Export</button>
	4606	<button class="savebtn" onclick="loadSettings()">Import</button>
	4607	<button class="savebtn" onclick="resetSettings()">Reset</button>
	4608	</div>
	4609	</div>
	4610	<div class="menu-label">
	4611	<span style="margin-left: 5px;">Save bom table as</span>
	4612	<div class="flexbox">
	4613	<button class="savebtn" onclick="saveBomTable('csv')">csv</button>
	4614	<button class="savebtn" onclick="saveBomTable('txt')">txt</button>
	4615	</div>
	4616	</div>
	4617	</div>
	4618	</div>
	4619	</div>
	4620	</div>
	4621	<div id="topdivider">
	4622	<div class="hideonprint">
	4623	<div id="toptoggle" onclick="topToggle()">︽</div>
	4624	</div>
	4625	</div>
	4626	<div id="bot" class="split" style="flex: 1 1">
	4627	<div id="bomdiv" class="split split-horizontal">
	4628	<div style="width: 100%">
	4629	<input id="reflookup" class="textbox searchbox reflookup hideonprint" type="text" placeholder="Ref lookup"
	4630	oninput="updateRefLookup(this.value)">
	4631	<input id="filter" class="textbox searchbox filter hideonprint" type="text" placeholder="Filter"
	4632	oninput="updateFilter(this.value)">
	4633	<div class="button-container hideonprint" style="float: left; margin: 0;">
	4634	<button id="copy" title="Copy bom table to clipboard"
	4635	onclick="saveBomTable('clipboard')"></button>
	4636	</div>
	4637	</div>
	4638	<div id="dbg"></div>
	4639	<table class="bom" id="bomtable">
	4640	<thead id="bomhead">
	4641	</thead>
	4642	<tbody id="bombody">
	4643	</tbody>
	4644	</table>
	4645	</div>
	4646	<div id="canvasdiv" class="split split-horizontal">
	4647	<div id="frontcanvas" class="split" touch-action="none" style="overflow: hidden">
	4648	<div style="position: relative; width: 100%; height: 100%;">
	4649	<canvas id="F_bg" style="position: absolute; left: 0; top: 0; z-index: 0;"></canvas>
	4650	<canvas id="F_fab" style="position: absolute; left: 0; top: 0; z-index: 1;"></canvas>
	4651	<canvas id="F_slk" style="position: absolute; left: 0; top: 0; z-index: 2;"></canvas>
	4652	<canvas id="F_hl" style="position: absolute; left: 0; top: 0; z-index: 3;"></canvas>
	4653	</div>
	4654	</div>
	4655	<div id="backcanvas" class="split" touch-action="none" style="overflow: hidden">
	4656	<div style="position: relative; width: 100%; height: 100%;">
	4657	<canvas id="B_bg" style="position: absolute; left: 0; top: 0; z-index: 0;"></canvas>
	4658	<canvas id="B_fab" style="position: absolute; left: 0; top: 0; z-index: 1;"></canvas>
	4659	<canvas id="B_slk" style="position: absolute; left: 0; top: 0; z-index: 2;"></canvas>
	4660	<canvas id="B_hl" style="position: absolute; left: 0; top: 0; z-index: 3;"></canvas>
	4661	</div>
	4662	</div>
	4663	</div>
	4664	</div>
	4665	</div>
	4666
	4667	</body>
	4668
	4669	</html>

Note: See TracBrowser for help on using the repository browser.

Context Navigation

source: Einschaltstrombegrenzung/bom/ibom.html @ 15

Download in other formats: