source: Einschaltstrombegrenzung/bom/ibom.html@ 21

Last change on this file since 21 was 15, checked in by f.jahn, 23 months ago

Einschaltstrombegrenzung und D-SUB Adapter hinzugefügt
File size: 176.2 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
32html,
33body {
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
50button {
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
68button.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
78button:focus {
79 outline: 0;
80}
81
82button#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
86button#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
90button#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
94button#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
98button#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
102button#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
106button#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
117button#copy:active {
118 box-shadow: inset 0px 0px 5px #6c6c6c;
119}
120
121textarea.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
170canvas {
171 cursor: crosshair;
172}
173
174canvas: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
412input[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
422mark.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
802a {
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.size*i,n.size=i-e/this.size*i,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
923var 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);
932for(var d,e=2;e<m.length;e++)d=m[e],c[d]=b[d]||n[e];c.buttons=b.buttons||0;
933var 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}})}
934var 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++)
935b.register.call(b,a)},unregister:function(a){for(var b,c=this.eventSourceList.length,d=0;d<c&&(b=this.eventSourceList[d]);d++)
936b.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){
937for(var b=a;b.parentNode;)b=b.parentNode;
938return 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);
939return 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//
941this.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))},
942installOnLoad: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){
943var b=x(a,this.findElements,this);
944return 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){}
945var 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:[],
946isEventSimulatedFromTouch: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++){
947var 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);
9480!==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];
949c.buttons=b?b.buttons&~d:0,a.buttons=c.buttons}H.set(this.POINTER_ID,a),
950c.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),
951Q(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),
952Q(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);
953d&&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,
955c.altKey=b.altKey,c.ctrlKey=b.ctrlKey,c.metaKey=b.metaKey,c.shiftKey=b.shiftKey;
956var 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))},
957shouldScroll:function(a){if(this.firstXY){var b,c=a.currentTarget._scrollType;if("none"===c)
958b=!1;else if("XY"===c)
959b=!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]);
960b=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},
961vacuumTouches:function(a){var b=a.touches;
962if(R.size>=b.length){var c=[];R.forEach(function(a,d){
963if(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);
964if(c){var d=c.out,e=c.outTarget;u.move(b),d&&e!==b.target&&(d.relatedTarget=b.target,b.relatedTarget=e,
965d.target=e,b.target?(u.leaveOut(d),u.enterOver(b)):(
966b.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)},
967dedupSynthMouse:function(a){var b=N.lastTouches,c=a.changedTouches[0];
968if(this.isPrimaryTouch(c)){
969var 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///////////////////////////////////////////////
974var config = {"dark_mode": false, "show_pads": true, "show_fabrication": false, "show_silkscreen": true, "highlight_pin1": "none", "redraw_on_drag": true, "board_rotation": 0, "checkboxes": "Sourced,Placed", "bom_view": "left-right", "layer_view": "FB", "offset_back_rotation": false, "kicad_text_formatting": true, "fields": ["Value", "Footprint", "Voltage", "MPN", "Description", "ECS Art#", "ECS Art. #"]}
975///////////////////////////////////////////////
976
977///////////////////////////////////////////////
978var pcbdata = JSON.parse(LZString.decompressFromBase64("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"))
979///////////////////////////////////////////////
980
981///////////////////////////////////////////////
982/* Utility functions */
983
984var storagePrefix = 'KiCad_HTML_BOM__' + pcbdata.metadata.title + '__' +
985 pcbdata.metadata.revision + '__#';
986var storage;
987
988function 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
1005function readStorage(key) {
1006 if (storage) {
1007 return storage.getItem(storagePrefix + key);
1008 } else {
1009 return null;
1010 }
1011}
1012
1013function writeStorage(key, value) {
1014 if (storage) {
1015 storage.setItem(storagePrefix + key, value);
1016 }
1017}
1018
1019function 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
1036function smoothScrollToRow(rowid) {
1037 document.getElementById(rowid).scrollIntoView({
1038 behavior: "smooth",
1039 block: "center",
1040 inline: "nearest"
1041 });
1042}
1043
1044function focusInputField(input) {
1045 input.scrollIntoView(false);
1046 input.focus();
1047 input.select();
1048}
1049
1050function 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
1119function isNumeric(str) {
1120 /* https://stackoverflow.com/a/175787 */
1121 return (typeof str != "string" ? false : !isNaN(str) && !isNaN(parseFloat(str)));
1122}
1123
1124function 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
1134function cleanGutters() {
1135 removeGutterNode(document.getElementById("bot"));
1136 removeGutterNode(document.getElementById("canvasdiv"));
1137}
1138
1139var 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
1168function 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
1195function 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
1248function 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
1265function 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
1282function 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
1327function 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
1340function 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
1386function 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
1403function 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
1447function 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
1455function 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
1469var 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
1493function 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
1591const IBOM_EVENT_TYPES = {
1592 ALL: "all",
1593 HIGHLIGHT_EVENT: "highlightEvent",
1594 CHECKBOX_CHANGE_EVENT: "checkboxChangeEvent",
1595 BOM_BODY_CHANGE_EVENT: "bomBodyChangeEvent",
1596}
1597
1598const 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}
1619EventHandler.init();
1620
1621///////////////////////////////////////////////
1622
1623///////////////////////////////////////////////
1624/* PCB rendering code */
1625
1626var emptyContext2d = document.createElement("canvas").getContext("2d");
1627
1628function deg2rad(deg) {
1629 return deg * Math.PI / 180;
1630}
1631
1632function 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
1642function 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
1742function 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
1788function 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
1829function getOblongPath(size) {
1830 return getChamferedRectPath(size, Math.min(size[0], size[1]) / 2, 0, 0);
1831}
1832
1833function 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
1853function 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
1872function 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
1882function 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
1889function 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
1910function 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
1928function 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
1942function 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
1985function 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
1993function 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
2027function 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
2040function 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
2090function 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
2108function 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
2122function 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
2156function 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
2169function drawHighlights() {
2170 drawHighlightsOnLayer(allcanvas.front);
2171 drawHighlightsOnLayer(allcanvas.back);
2172}
2173
2174function 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
2208function 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
2221function 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
2228function 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
2236function 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
2252function 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
2278function redrawCanvas(layerdict) {
2279 prepareLayer(layerdict);
2280 drawBackground(layerdict);
2281 drawHighlightsOnLayer(layerdict);
2282}
2283
2284function 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
2295function resizeAll() {
2296 resizeCanvas(allcanvas.front);
2297 resizeCanvas(allcanvas.back);
2298}
2299
2300function 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
2332function modulo(n, mod) {
2333 return ((n % mod) + mod) % mod;
2334}
2335
2336function 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
2365function 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
2375function 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
2403function 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
2410function 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
2423function 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
2444function 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
2476function 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
2487function resetTransform(layerdict) {
2488 layerdict.transform.panx = 0;
2489 layerdict.transform.pany = 0;
2490 layerdict.transform.zoom = 1;
2491 redrawCanvas(layerdict);
2492}
2493
2494function 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
2539function 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
2589function 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
2614function 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
2641function setRedrawOnDrag(value) {
2642 settings.redrawOnDrag = value;
2643 writeStorage("redrawOnDrag", value);
2644}
2645
2646function setBoardRotation(value) {
2647 settings.boardRotation = value * 5;
2648 writeStorage("boardRotation", settings.boardRotation);
2649 document.getElementById("rotationDegree").textContent = settings.boardRotation;
2650 resizeAll();
2651}
2652
2653function setOffsetBackRotation(value) {
2654 settings.offsetBackRotation = value;
2655 writeStorage("offsetBackRotation", value);
2656 resizeAll();
2657}
2658
2659function 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
2708function 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
2961function 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
2981function 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
2988function getBomTableHeaderIndex(elem) {
2989 const bh = document.getElementById('bomhead');
2990 const ths = Array.from(bh.querySelectorAll("th"));
2991 return ths.indexOf(elem);
2992}
2993
2994function getColumnOrderName(elem) {
2995 var cname = elem.getAttribute("col_name");
2996 if (cname === "bom-checkbox")
2997 return "checkboxes";
2998 else
2999 return cname;
3000}
3001
3002function 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
3080var bomsplit;
3081var canvassplit;
3082var initDone = false;
3083var bomSortFunction = null;
3084var currentSortColumn = null;
3085var currentSortOrder = null;
3086var currentHighlightedRowId;
3087var highlightHandlers = [];
3088var footprintIndexToHandler = {};
3089var netsToHandler = {};
3090var markedFootprints = new Set();
3091var highlightedFootprints = [];
3092var highlightedNet = null;
3093var lastClicked;
3094
3095function dbg(html) {
3096 dbgdiv.innerHTML = html;
3097}
3098
3099function redrawIfInitDone() {
3100 if (initDone) {
3101 redrawCanvas(allcanvas.front);
3102 redrawCanvas(allcanvas.back);
3103 }
3104}
3105
3106function padsVisible(value) {
3107 writeStorage("padsVisible", value);
3108 settings.renderPads = value;
3109 redrawIfInitDone();
3110}
3111
3112function referencesVisible(value) {
3113 writeStorage("referencesVisible", value);
3114 settings.renderReferences = value;
3115 redrawIfInitDone();
3116}
3117
3118function valuesVisible(value) {
3119 writeStorage("valuesVisible", value);
3120 settings.renderValues = value;
3121 redrawIfInitDone();
3122}
3123
3124function tracksVisible(value) {
3125 writeStorage("tracksVisible", value);
3126 settings.renderTracks = value;
3127 redrawIfInitDone();
3128}
3129
3130function zonesVisible(value) {
3131 writeStorage("zonesVisible", value);
3132 settings.renderZones = value;
3133 redrawIfInitDone();
3134}
3135
3136function dnpOutline(value) {
3137 writeStorage("dnpOutline", value);
3138 settings.renderDnpOutline = value;
3139 redrawIfInitDone();
3140}
3141
3142function 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
3156function 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
3187function setFullscreen(value) {
3188 if (value) {
3189 document.documentElement.requestFullscreen();
3190 } else {
3191 document.exitFullscreen();
3192 }
3193}
3194
3195function fabricationVisible(value) {
3196 writeStorage("fabricationVisible", value);
3197 settings.renderFabrication = value;
3198 redrawIfInitDone();
3199}
3200
3201function silkscreenVisible(value) {
3202 writeStorage("silkscreenVisible", value);
3203 settings.renderSilkscreen = value;
3204 redrawIfInitDone();
3205}
3206
3207function setHighlightPin1(value) {
3208 writeStorage("highlightpin1", value);
3209 settings.highlightpin1 = value;
3210 redrawIfInitDone();
3211}
3212
3213function 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
3238function 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
3258function setBomCheckboxState(checkbox, element, references) {
3259 var state = getCheckboxState(checkbox, references);
3260 element.checked = (state == "checked");
3261 element.indeterminate = (state == "indeterminate");
3262}
3263
3264function 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
3306function clearHighlightedFootprints() {
3307 if (currentHighlightedRowId) {
3308 document.getElementById(currentHighlightedRowId).classList.remove("highlighted");
3309 currentHighlightedRowId = null;
3310 highlightedFootprints = [];
3311 highlightedNet = null;
3312 }
3313}
3314
3315function 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
3337function updateNetColors() {
3338 writeStorage("netColors", JSON.stringify(settings.netColors));
3339 redrawIfInitDone();
3340}
3341
3342function netColorChangeHandler(net) {
3343 return (event) => {
3344 settings.netColors[net] = event.target.value;
3345 updateNetColors();
3346 }
3347}
3348
3349function 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
3364function 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
3391function findRefInEntry(entry) {
3392 return entry.filter(r => r[0].toLowerCase() == reflookup);
3393}
3394
3395function 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
3418function 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
3447function 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
3505function 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
3663function 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 : "&lt;no net&gt;");
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
3828function 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
3847function 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
3866function populateBomTable() {
3867 populateBomHeader();
3868 populateBomBody();
3869 setBomHandlers();
3870 resizableGrid(bomhead);
3871}
3872
3873function 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
3886function 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
3897function updateFilter(input) {
3898 filter = input.toLowerCase();
3899 populateBomTable();
3900}
3901
3902function updateRefLookup(input) {
3903 reflookup = input.toLowerCase();
3904 populateBomTable();
3905}
3906
3907function 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
3936function 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&nbsp;" +
3983 /^v\d+\.\d+/.exec(pcbdata.ibom_version)[0];
3984}
3985
3986function 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
4065function 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
4102function focusFilterField() {
4103 focusInputField(document.getElementById("filter"));
4104}
4105
4106function focusRefLookupField() {
4107 focusInputField(document.getElementById("reflookup"));
4108}
4109
4110function 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
4121function 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
4137function 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
4145function 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
4156function 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
4185function 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
4228function 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
4237function constrain(number, min, max){
4238 return Math.min(Math.max(parseInt(number), min), max);
4239}
4240
4241document.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
4325function 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
4331function 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
4343window.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
4370window.onresize = resizeAll;
4371window.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>&#176;</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.