Context Navigation

← Previous Revision
Latest Revision
Next Revision →
Blame
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: 168.4 KB

Line
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 #"]}
975	///////////////////////////////////////////////
976
977	///////////////////////////////////////////////
978	var pcbdata = JSON.parse(LZString.decompressFromBase64("N4IgpgJg5mDOD6AjRB7AHiAXAAlAWwEsA7DHATgGYA6AVhoBpsRCiBPLbAdgCYqBGBkzwBDNKWx9uNWoOaj2OPgAYAbFU40Avo3DQ4HANqgALqwAOYDiDMoANqygoiIHTdiGljJQF0dwolC2ljieTDb2jkTuOAaxlFQqjDxU3L7YBpLSgsmpjBlStIzKapxpBvGJEqrq3rU6AO4EEMYAFhxK/DoAZgS2QRDtmmkgEABOwo0B0bggsL0A1rAAxqNgYM44oABihibmwUywYFB468Yuh8bCo+cxZAAc6gAsjGQdlDQUFHzD6wMxkg6FEqbyoHy+PwaTVa7X43G0M1MFisRxOZwusyuN0MD2eRSUTwSdAhvyI/3SuM4L2woPB32GjWabRCcIRe2ROFmx1ORHOOlgWNuFLICVeajIZE+9J0fxxIpBjyekpJUKZsMkbJASIOXLRvIxAuuQvK8teiuV0qYsoBSmofDNVCVUshTEZMJZGsY7J1qJ5fMuRsMyg690EoL4FGdpPJGSUfH4YY6nEjKtd0OZ2A6nsR+xR3PR/MFQaUIcT/BTlvAZOL8aeZYjUdV7szrK9WtznN9BYD2JttfrFZdVZjynjAleScHDPT6vhbe1eb1/sxgZtdrFYItQ+twtFNPFW+nao9c5zHMO+f1hdX6WU65p5sbVura86+83T5AbozWdP3sXfoGkWNqEiCB6fjusagQ6Tqpl+M4npqC6dpey6Gr2t4EnuuKwZWkHKI89oPo6h5Nj+rZnj6qFATesaERuEoQS+mHQe+jFwd+s5IR2F5LjRGF0W+OGkc+I5KPRbEifBx4ttm/4oXx14CcopqSUxYmqcJn6cYh848bqgFKcaKnYY+cH4RGQlmZWOmyX+7bngZ3YrspllEWQ4HmcxsaaZ5NkIXZ3GOV2V49sZbkwVJFn3h5H4cQFv5BVRilhUGfCsbF7F4d5fDpaZJHaQlFHybxhmpQCeUKgVXkjnwElafFMmJXpwXUUZaX1X5245ZVDFSbZzWUQBznoeF9XWd1tWdXF/lNcVDnJWVLnGdwQIgu8U4yjlq1UMC+KgcSs3NoNJVOaFy1Bjte1VAd6k4o8VL7UShVzXJC1WNcSz8cZca7YIwYzbkTDjBABAAK7TPGGglnGRn+IEBwALQNlQoTDvDQQcIjdao2RXEtTqn3fcWaiRvi7wWkDIAg+DkPqDQMNEctGNIyjaN/CzWM42jA3zchTBE+1FXxmTVQU1KVM0xDHBQwzJZM6NnM4Mjka46JSvYNj0g80Vb38yAgvlbefCk/9JaA8MUt09D8twwEmPK2zW0QBrWtq9Jx18/pIVocBt7cISZAaIw9ycPwbw1TihIloIofh7aR3kXr3ttUb+SB8HXC8CoDORwCAdgpncd8BHif40NClLaNxaEtwIePOJTwqCoZDRsW1CcPXqP3E3LdHp7yetSlF2vpKIdhznJs0CobcgSkXeN83rd47pFelSNfuxh3C890vs+YdQY/YHHk85zPK+BQTw3ndXdzR0osdhyXCeTVHqMP0k2e52XiHDAAQoYbwCIQBdGEIgUYBAljCGMAQJwHBti7C1C0SB8wiBwGmFmWQsAABuUAzDQIzCAAAsiZbgJtm6JDIPGVacYaAABlSHkObvQKhYJ0pPEjAwpQIoTZvCeJ3MgvAH48EEVwkUShkz3G4Sw3gAgpDfC4Y8Sg3CaB10ESkeW9CCJUHuJGTg6UZEaNoSQ7hCQ6zcAoPcFh1DlT3HuGIhIgjQwCOofwzgLcHGcDsSo6xRiBAMOUKjbgKgS6+Jof43Kv50rcCsawgOnB3FkACVmFuBIXEpFsfYyJKQmGUJFm8FQwTkk5IoXkx0oZ7gqCeMU3haTfGFNDmQhxNAg4hLIIY8JWjAlkNKR0zRIAkrX19rRXEoZXjxgJHdO4jwxk3VoHWRqA9BmVw3iMmZZtCQ0AWdlEcO0pBPS2S9JZV8Vk303gDOuNIJnbNfn2BMrxeCHMWUnZZ68zm0WULI8ZqMbn71jGOMMjzfkXyzK8s6wzlJ7LDNcqZFJ1nfMmc89UYKfbE3zh0fZcynk7Muhi6FPyjkvPnMgpYqD0Hqiwbg/BzZiEmQEL0lQjxp60IcfSih9AW4pCpBwrRpiVJ1M5U8PgIjuAOLjJY6RnKaCZAUdo0OKi65SpUCy7RCSaD6JeEq4x2S2XMK1RE0xNBQwWKsfqmgJiRTyslIqkUzKDWWs4AqjlTLlX2vUBoDVzr1C2hLJwBxjK0mJEZeoB4AdeW2uNZYr1PcjVVIGSct5EKVqB3HMfJ+FAX5/MkCm7IjzS5Dl5nwFFqcR7+xzZ/Wg+as0Fyobm+OSKPTFuHrfMtbC60tMzc7N+qh21VpBfwJtVdzk1tTckZ+ecKTRxzhW8dP9ZKDtWZCwkSoZ19tEpdZd7TsAqCfmuj2RK17grRa2ld27d2dvXRVEUp6d31rnaChNR6hb+2oC0itHaJ35FfVu3RbCL37uRY+1Fz78hAi3ckD9OL0W7R/YfO896B1AZLS2jIJcSKrv/fhAup6x17sLQu95rlr1btvbO25xtiMYYbfOpDzbznCrMVRqDxsJ7UmbkE/9+HaNDo+QxqpjB2NKFWp+0cu02NqCE5x3WBGk01jE0x8jqHWMKf7ge06wG06iYoOJjjInfraZU/2ot3HF3GglOhrOd7FPmZvee6jD7D0adLSaCzpG92QTIJugTdmEPGcc8hzeuI32Wcg9ZplsG/32cQ/5ujIzpAUHA3mzD3lJQwZDnBqTr0ZPHvKF5yzZG/k2cS1Z1TgGYs8YEp51zPnrN5dw5l455XTPdunWm8syXdnlraxGBran3qnNk3fVGrWIPue2l10bvWyvqYCyMqdvaOstcfu1qLfmZuxcq/Nwzl7J3DYW6tsFhtnOSHjBKdLkXKxWxlnuZm9sDgdHZmSDWdUHtGcO6ML6IHMoRaof+q7igbuKzu7CR7LtgeKCke7fD/9AGaGAV0FAKBjBmAgbyaYRhqZgC6FYAAUtwDEyB0DwOsCgdHonU3xE4FJVYtg3CGERrwe4mLEYdypnMAAXgcAw3BeB1iKIHSUwwNYPeAfgiA6PQC2GEKwMAox0cgB2DoABww6d3Ipx3KSHOufxisdgagFAhfg5bGjWALRhCOVGCgMGZJVhLGXP9lsmL+tMBhDoMYvRbCm/NzqJYBAPuYzdxAvoWugxvjHMMFAXQuhHGNK943KviB8BlpqKXMu5eGAVxiZXrhSdydTaJrKQ4Q8Ah0YwfXhuEYg/5Gbi3VubdgDtxiB3eKdD61d0wd3wea8+790sAPHeg+e4IJz0PRFw86Ej9HsAse1YPYT0QJPigU/S9l/LxXTBs9hFzzaNQ6uQ2fmL7eUvevdoV4dsb6v3urAoGwcIWwGI29tEDx7r3jlff+8sM/4Pw/tdh/4BHqPGPDwWfVGIBNsVPVfDPdfEATfEnMnaofPX6QvYYQ/DIY/cvPwI3OPWYbva/W/e/VvfSdvEYQfV/HvD/DETvIfEfEvMff/CfQA6fYA0IOfZfNPNfLPEAFXbfY2AFV4DXA/H/UPXXDAgWLA92MgvAu/B/Igp/AfF/XAzkd/PvT/eQ7/Ggo/OgocSfIAmIOPVg8AlfdPGITPJXLgnPMnXKe5KoU7TXIQkvEQ0/TAyvFkE3RQpgG/aQwgxyYgqgyQpQ3vfvEgl/ewzQooegjwxgmfFg0AtgyAkw6A2A1XY2XfMMAQuCVAnXMvJwsQlwi/Q4dwkATwggl3WQyg0gwo5QoIvw0ItArQgAqfaIrwWIww9gqAzg7gyw1I/EWwwQjQtAxwg3Zw8/bA/wjw/AmQnwuQ4IrvK/AIigr/ag3/eohgxo5g5onwIYQPCYYgKAdHYYCA0YKwHYTUVYbHTkHHJPHQQncQUAZIreMEWOeLDNOCGne4hneMVRQQBnHRdKL4e4FA2o74R4xgHnBIe4SgSxM/A4F7VGUXYQcXRBQ4jgswzoy6Ww87X7DI2o6ORgaOaEmWSHNwuYpgKo1Q53JBcohQkkkAMkqk9QrnagS5Jkho3Q9IfQlomYZE9o1EiwnEA8TE+DIvHEtWfE4YmEoky/N/QI8kx/ekz3SomU+U1Apk7IqmHQpgvQkAzY1o+I9IUwjfcwrfeAw+J43aF4ysTIvceMc+XI8/WE4ki3BvZcOUxYsY2kpUt02oiZcInwVYtkgwDkv0sIRPZPXU4w/UxIo0uAkmdQS5UMc0/9K0yoG0gkiHUYxUhY0oqY5UzMlQ5U70tWCZVkzU9k7UsArkowlEw0tEm0SjY+Z4pMwslMhINMiQSUgomkuk7wnUXwiorsz0tQpY0PUIYs/00swM8suIiMgwA0mA6M+43KXgYJEORs7E/om08I20g2I3B0qU8g/MnsqwPs6k6UrMmY4ckvUc0A8cpo+Pac6s+c2s42bWCgVcxM9c3/Fs7c57DsnAgc8810oc907s4Cws684MooqI9Y+88Mx8pIng2MZ42OXnPdZMrctsvczss8w87M3s6YvwvM6o0g8C30ksu8gwystohIjovkm0QiD+Y+VCpsjc601s8UwkjMgC3Cikk82YnC4ikI1iiC8imCyiyXKsnkmsui42EMIuZiz80Pb8zCv8kCwc3igi/sgS8kmo4Ssi28sSzkiS6iyM2i40tKagKpFCkiFir8jCji9MiQoi2Usot05ygsvSiQG8yItYrUmIzY4YMYHYqYQBHQQ444gZYYU4K4F2K4YnGBYwc/WYMGRARGCAeAYwWXFgLw4GMAbBAgOYOBTkDEJYFAPAfBNgKwSg6BHUVaAORGITBqmgCQPgTAJ4e4TAbgMgeNJgVAPAYnVAZsWIWcy4i4H4MoEa/HLwWoFA+YAgMwCwGMYYHoMAWwREzYEAJQDPAAFQAFFEYABhJwNBO3AgfK0wDEAABRaBQHWAIDQCOt5GEDt3gAAGVLrtr4BHl4AnhEYAA1RGbWRGXagADXgD4DQAJHgEuu1jwDwHgD+tlxgSgRKJAAxHRp0AOoAHkAA5JUe4aMxffUgAQXKpaHWDsAxAABFXqABVP+RGMgeALYMAEQIIeAAACRQAgXZycCuFsGht4ASTQEZyeDhvgF2r0EuuICxqiJFDeHFq5ohkgHgCITrxgQCC5qCFgFlsaKsIoG4DhoxqYGNpAGxpxqEwoC4OAR2BiFiBAFGqKDqHSEmouB8GdvnJiArJAT5vgFiuEHgWAQID6vgGwVX1gQ2CYGwUZ1RgGSAAA=="))
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: sub-d_terminal/bom/ibom.html @ 15

Download in other formats: