From 975f706e28be683bd37d7fa842e0c2a8ac44700b Mon Sep 17 00:00:00 2001 From: "U. Bruhin" Date: Thu, 9 Jan 2025 07:30:33 +0100 Subject: [PATCH] Add initial package content --- .gitattributes | 2 + .github/workflows/ci.yml | 39 + .github/workflows/stylecheck.sh | 25 + .reuse/dep5 | 39 + .rustfmt.toml | 5 + Cargo.toml | 17 + LICENSES/MIT.txt | 21 + LICENSES/WTFPL.txt | 11 + src/lib.rs | 852 ++++++++++++++++++++ src/web/ibom.css | 888 +++++++++++++++++++++ src/web/ibom.html | 341 ++++++++ src/web/ibom.js | 1324 +++++++++++++++++++++++++++++++ src/web/lz-string.js | 10 + src/web/pep.js | 43 + src/web/render.js | 1075 +++++++++++++++++++++++++ src/web/split.js | 6 + src/web/table-util.js | 371 +++++++++ src/web/util.js | 642 +++++++++++++++ src/web/version.txt | 1 + tests/integration_test.rs | 181 +++++ update_web_files.sh | 29 + 21 files changed, 5922 insertions(+) create mode 100644 .gitattributes create mode 100644 .github/workflows/ci.yml create mode 100755 .github/workflows/stylecheck.sh create mode 100644 .reuse/dep5 create mode 100644 .rustfmt.toml create mode 100644 Cargo.toml create mode 100644 LICENSES/MIT.txt create mode 100644 LICENSES/WTFPL.txt create mode 100644 src/lib.rs create mode 100644 src/web/ibom.css create mode 100644 src/web/ibom.html create mode 100644 src/web/ibom.js create mode 100644 src/web/lz-string.js create mode 100644 src/web/pep.js create mode 100644 src/web/render.js create mode 100644 src/web/split.js create mode 100644 src/web/table-util.js create mode 100644 src/web/util.js create mode 100644 src/web/version.txt create mode 100644 tests/integration_test.rs create mode 100755 update_web_files.sh diff --git a/.gitattributes b/.gitattributes new file mode 100644 index 0000000..7ddd55f --- /dev/null +++ b/.gitattributes @@ -0,0 +1,2 @@ +# Disable automatic end-of-line conversion for all files +* -text diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml new file mode 100644 index 0000000..1a56527 --- /dev/null +++ b/.github/workflows/ci.yml @@ -0,0 +1,39 @@ +name: CI +on: [push, pull_request] + +env: + CARGO_TERM_COLOR: always + +jobs: + build_and_test: + runs-on: ubuntu-24.04 + strategy: + matrix: + toolchain: + - stable + - beta + - nightly + steps: + - uses: actions/checkout@v4 + - name: Install Toolchain + run: | + rustup update ${{ matrix.toolchain }} + rustup default ${{ matrix.toolchain }} + - name: Build + run: cargo build --verbose --features="fail-on-warnings" + - name: Test + run: cargo test --verbose --features="fail-on-warnings" + - name: Docs + run: cargo doc --no-deps --features="fail-on-warnings" + + stylecheck: + runs-on: ubuntu-24.04 + container: librepcb/librepcb-dev:devtools-4 + steps: + - uses: actions/checkout@v4 + - name: Stylecheck + run: .github/workflows/stylecheck.sh + - name: Cargo Clippy + run: cargo clippy --features="fail-on-warnings" + - name: Reuse Lint + run: reuse --suppress-deprecation lint diff --git a/.github/workflows/stylecheck.sh b/.github/workflows/stylecheck.sh new file mode 100755 index 0000000..644bab6 --- /dev/null +++ b/.github/workflows/stylecheck.sh @@ -0,0 +1,25 @@ +#!/usr/bin/env bash + +# set shell settings (see https://sipb.mit.edu/doc/safe-shell/) +set -euv -o pipefail + +# fix git error +git config --global --add safe.directory $PWD + +# check if all files have Unix line endings +(git grep -Il $'\r' -- ':/') && exit 1 + +# check if no file contains trailing spaces +(git grep -Il ' $' -- ':/') && exit 1 + +# check if no file contains tabulators (with some exceptions) +(git grep -Il $'\t' -- ':/' ':!/LICENSES/') && exit 1 + +# check rust code formatting +for f in $(git ls-files -- '*.rs'); do + (rustfmt --check "$f") || exit 1 +done + +# check formatting of .reuse/dep5 +(debian-copyright-sorter --iml -s casefold -o ".reuse/dep5" ".reuse/dep5") || exit 1 +(git diff --exit-code -- ".reuse/dep5") || exit 1 diff --git a/.reuse/dep5 b/.reuse/dep5 new file mode 100644 index 0000000..53243f9 --- /dev/null +++ b/.reuse/dep5 @@ -0,0 +1,39 @@ +Format: https://www.debian.org/doc/packaging-manuals/copyright-format/1.0/ +Upstream-Name: interactive-html-bom-rs +Source: https://github.com/LibrePCB/interactive-html-bom-rs + +Files: + .gitattributes + .github/* + .gitignore + .rustfmt.toml + Cargo.toml + README.md + src/**.rs + src/web/version.txt + tests/**.rs + update_web_files.sh +Copyright: LibrePCB Developers +License: MIT + +Files: + src/web/ibom.css + src/web/ibom.html + src/web/ibom.js + src/web/render.js + src/web/table-util.js + src/web/util.js +Copyright: InteractiveHtmlBom +License: MIT + +Files: src/web/split.js +Copyright: Split.js +License: MIT + +Files: src/web/pep.js +Copyright: jQuery Foundation and other contributors +License: MIT + +Files: src/web/lz-string.js +Copyright: 2013 Pieroxy +License: WTFPL diff --git a/.rustfmt.toml b/.rustfmt.toml new file mode 100644 index 0000000..7f6a351 --- /dev/null +++ b/.rustfmt.toml @@ -0,0 +1,5 @@ +edition = "2021" +hard_tabs = false +max_width = 80 +newline_style = "Unix" +tab_spaces = 2 diff --git a/Cargo.toml b/Cargo.toml new file mode 100644 index 0000000..56d7e2f --- /dev/null +++ b/Cargo.toml @@ -0,0 +1,17 @@ +[package] +name = "interactive-html-bom" +description = "Interactive HTML BOM Generator" +keywords = ["pcb", "eda", "bom"] +repository = "https://github.com/LibrePCB/interactive-html-bom-rs" +readme = "README.md" +license = "MIT" +version = "0.1.0" +edition = "2021" +exclude = ["/.git*", "/.reuse/", "/.rustfmt.toml", "/LICENSES/", "*.sh"] + +[features] +fail-on-warnings = [] + +[dependencies] +jzon = "0.12.5" +lz-str = "0.2.1" diff --git a/LICENSES/MIT.txt b/LICENSES/MIT.txt new file mode 100644 index 0000000..52af482 --- /dev/null +++ b/LICENSES/MIT.txt @@ -0,0 +1,21 @@ +MIT License + +Copyright (c) 2024 LibrePCB + +Permission is hereby granted, free of charge, to any person obtaining a copy +of this software and associated documentation files (the "Software"), to deal +in the Software without restriction, including without limitation the rights +to use, copy, modify, merge, publish, distribute, sublicense, and/or sell +copies of the Software, and to permit persons to whom the Software is +furnished to do so, subject to the following conditions: + +The above copyright notice and this permission notice shall be included in all +copies or substantial portions of the Software. + +THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR +IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, +FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE +AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER +LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, +OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE +SOFTWARE. diff --git a/LICENSES/WTFPL.txt b/LICENSES/WTFPL.txt new file mode 100644 index 0000000..7a3094a --- /dev/null +++ b/LICENSES/WTFPL.txt @@ -0,0 +1,11 @@ +DO WHAT THE FUCK YOU WANT TO PUBLIC LICENSE +Version 2, December 2004 + +Copyright (C) 2004 Sam Hocevar + +Everyone is permitted to copy and distribute verbatim or modified copies of this license document, and changing it is allowed as long as the name is changed. + +DO WHAT THE FUCK YOU WANT TO PUBLIC LICENSE +TERMS AND CONDITIONS FOR COPYING, DISTRIBUTION AND MODIFICATION + + 0. You just DO WHAT THE FUCK YOU WANT TO. diff --git a/src/lib.rs b/src/lib.rs new file mode 100644 index 0000000..df4966d --- /dev/null +++ b/src/lib.rs @@ -0,0 +1,852 @@ +//! Interactive HTML BOM Generator + +// Fail on warnings if feature "fail-on-warnings" is enabled. +#![cfg_attr(feature = "fail-on-warnings", deny(warnings))] +#![warn(missing_docs)] + +use jzon::{array, object, JsonValue}; + +trait ToJson { + fn to_json(&self) -> JsonValue; +} + +impl ToJson for usize { + fn to_json(&self) -> JsonValue { + (*self).into() + } +} + +impl ToJson for String { + fn to_json(&self) -> JsonValue { + self.clone().into() + } +} + +impl ToJson for (f32, f32) { + fn to_json(&self) -> JsonValue { + array![self.0, self.1] + } +} + +impl ToJson for Vec { + fn to_json(&self) -> JsonValue { + let mut arr = array![]; + for item in self { + arr.push(item.to_json()).unwrap(); + } + arr + } +} + +/// Layer enum +#[derive(Clone, PartialEq)] +pub enum Layer { + /// Front layer + Front, + /// Back layer + Back, +} + +impl ToJson for Layer { + fn to_json(&self) -> JsonValue { + match self { + Layer::Front => "F".into(), + Layer::Back => "B".into(), + } + } +} + +/// Drawing layer +#[derive(PartialEq)] +pub enum DrawingLayer { + /// PCB edge + Edge, + /// Silkscreen front + SilkscreenFront, + /// Silkscreen back + SilkscreenBack, + /// Fabrication front + FabricationFront, + /// Fabrication back + FabricationBack, +} + +/// Drawing structure (SVG polygon) +#[non_exhaustive] +pub struct Drawing { + layer: DrawingLayer, + svgpath: String, + width: f32, + filled: bool, +} + +impl Drawing { + /// Construct drawing + /// + /// # Arguments + /// + /// * `layer` - Drawing layer. + /// * `svgpath` - Outline as an SVG path \[mm\]. + /// * `width` - Line width \[mm\]. + /// * `filled` - Whether to fill the shape or not. + /// + /// # Returns + /// + /// Returns the new object. + pub fn new( + layer: DrawingLayer, + svgpath: &str, + width: f32, + filled: bool, + ) -> Drawing { + Drawing { + layer, + svgpath: svgpath.to_owned(), + width, + filled, + } + } +} + +impl ToJson for Drawing { + fn to_json(&self) -> JsonValue { + object! { + type: "polygon", + svgpath: self.svgpath.clone(), + width: self.width, + filled: self.filled, + } + } +} + +/// Track structure +#[non_exhaustive] +pub struct Track { + layer: Layer, + start: (f32, f32), + end: (f32, f32), + width: f32, + net: Option, +} + +impl Track { + /// Construct track + /// + /// # Arguments + /// + /// * `layer` - Layer. + /// * `start` - Start position (x, y) \[mm\]. + /// * `end` - End position (x, y) \[mm\]. + /// * `width` - Track width \[mm\]. + /// * `net` - Net name (optional). + /// + /// # Returns + /// + /// Returns the new object. + pub fn new( + layer: Layer, + start: (f32, f32), + end: (f32, f32), + width: f32, + net: Option<&str>, + ) -> Track { + Track { + layer, + start, + end, + width, + net: net.map(|s| s.to_owned()), + } + } +} + +impl ToJson for Track { + fn to_json(&self) -> JsonValue { + let mut obj = object! { + start: self.start.to_json(), + end: self.end.to_json(), + width: self.width, + }; + if let Some(net) = &self.net { + obj["net"] = net.clone().into(); + } + obj + } +} + +/// Via structure +#[non_exhaustive] +pub struct Via { + layers: Vec, + pos: (f32, f32), + diameter: f32, + drill_diameter: f32, + net: Option, +} + +impl Via { + /// Construct via + /// + /// # Arguments + /// + /// * `layers` - Layers. + /// * `pos` - Position (x, y) \[mm\]. + /// * `diameter` - Outer diameter \[mm\]. + /// * `drill_diameter` - Drill diameter \[mm\]. + /// * `net` - Net name (optional). + /// + /// # Returns + /// + /// Returns the new object. + pub fn new( + layers: &[Layer], + pos: (f32, f32), + diameter: f32, + drill_diameter: f32, + net: Option<&str>, + ) -> Via { + Via { + layers: layers.to_vec(), + pos, + diameter, + drill_diameter, + net: net.map(|s| s.to_owned()), + } + } +} + +impl ToJson for Via { + fn to_json(&self) -> JsonValue { + let mut obj = object! { + start: self.pos.to_json(), + end: self.pos.to_json(), + width: self.diameter, + drillsize: self.drill_diameter, + }; + if let Some(net) = &self.net { + obj["net"] = net.clone().into(); + } + obj + } +} + +/// Zone structure +#[non_exhaustive] +pub struct Zone { + layer: Layer, + svgpath: String, + net: Option, +} + +impl Zone { + /// Construct object + /// + /// # Arguments + /// + /// * `layer` - Layer. + /// * `svgpath` - Zone outline as SVG path \[mm\]. + /// * `net` - Net name (optional). + /// + /// # Returns + /// + /// Returns the new object. + pub fn new(layer: Layer, svgpath: &str, net: Option<&str>) -> Zone { + Zone { + layer, + svgpath: svgpath.to_owned(), + net: net.map(|s| s.to_owned()), + } + } +} + +impl ToJson for Zone { + fn to_json(&self) -> JsonValue { + let mut obj = object! { + svgpath: self.svgpath.clone(), + }; + if let Some(net) = &self.net { + obj["net"] = net.clone().into(); + } + obj + } +} + +/// Footprint pad structure +#[derive(Clone)] +#[non_exhaustive] +pub struct Pad { + layers: Vec, + pos: (f32, f32), + angle: f32, + svgpath: String, + drill_size: Option<(f32, f32)>, + net: Option, +} + +impl Pad { + /// Construct object + /// + /// # Arguments + /// + /// * `layers` - Layers on which the pad exists. + /// * `pos` - Position (x, y) \[mm\]. + /// * `angle` - Rotation angle [°]. + /// * `svgpath` - Pad shape as SVG path \[mm\]. + /// * `drill_size` - Drill size (w, h) \[mm\] (only for THT pads). + /// * `net` - Net name (optional). + /// + /// # Returns + /// + /// Returns the new object. + pub fn new( + layers: &[Layer], + pos: (f32, f32), + angle: f32, + svgpath: &str, + drill_size: Option<(f32, f32)>, + net: Option<&str>, + ) -> Pad { + Pad { + layers: layers.into(), + pos, + angle, + svgpath: svgpath.to_owned(), + drill_size, + net: net.map(|s| s.to_owned()), + } + } +} + +impl ToJson for Pad { + fn to_json(&self) -> JsonValue { + let mut obj = object! { + layers: self.layers.to_json(), + pos: self.pos.to_json(), + angle: self.angle, + shape: "custom", + svgpath: self.svgpath.clone(), + }; + if let Some(drill) = &self.drill_size { + obj["type"] = "th".into(); + obj["drillsize"] = array![drill.0, drill.1]; + obj["drillshape"] = if drill.0 != drill.1 { + "oblong".into() + } else { + "circle".into() + }; + } else { + obj["type"] = "smd".into(); + } + if let Some(net) = &self.net { + obj["net"] = net.clone().into(); + } + obj + } +} + +/// Footprint structure +#[non_exhaustive] +pub struct Footprint { + layer: Layer, + pos: (f32, f32), + angle: f32, + bottom_left: (f32, f32), + top_right: (f32, f32), + fields: Vec, + pads: Vec, + mount: bool, +} + +impl Footprint { + /// Construct object + /// + /// # Arguments + /// + /// * `layer` - Placement layer. + /// * `pos` - Position (x, y) \[mm\]. + /// * `angle` - Rotation angle [°]. + /// * `bottom_left` - Bottom left corner of bounding box (x, y) \[mm\]. + /// * `top_right` - Top right corner of bounding box (x, y) \[mm\]. + /// * `fields` - Custom fields, corresponding to [InteractiveHtmlBom::fields]. + /// * `pads` - Footprint pads. + /// * `mount` - Whether the footprint is mounted or not. + /// + /// # Returns + /// + /// Returns the new object. + #[allow(clippy::too_many_arguments)] + pub fn new( + layer: Layer, + pos: (f32, f32), + angle: f32, + bottom_left: (f32, f32), + top_right: (f32, f32), + fields: &[String], + pads: &[Pad], + mount: bool, + ) -> Footprint { + Footprint { + layer, + pos, + angle, + bottom_left, + top_right, + fields: fields.to_vec(), + pads: pads.to_vec(), + mount, + } + } +} + +impl ToJson for Footprint { + fn to_json(&self) -> JsonValue { + object! { + bbox: object!{ + pos: self.pos.to_json(), + angle: self.angle, + relpos: self.bottom_left.to_json(), + size: array![ + self.top_right.0 - self.bottom_left.0, + self.top_right.1 - self.bottom_left.1], + }, + drawings: array![], // Not supported yet. + layer: self.layer.to_json(), + pads: self.pads.to_json(), + } + } +} + +/// Reference-FootprintID map +#[derive(Clone)] +#[non_exhaustive] +pub struct RefMap { + reference: String, + footprint_id: usize, +} + +impl RefMap { + /// Construct object + /// + /// # Arguments + /// + /// * `reference` - Component reference (e.g. "R1"). + /// * `footprint_id` - ID of footprint as returned by + /// [InteractiveHtmlBom::add_footprint]. + /// + /// # Returns + /// + /// Returns the new object. + pub fn new(reference: &str, footprint_id: usize) -> RefMap { + RefMap { + reference: reference.to_owned(), + footprint_id, + } + } +} + +impl ToJson for RefMap { + fn to_json(&self) -> JsonValue { + array! { + self.reference.clone(), + self.footprint_id, + } + } +} + +/// Interactive HTML BOM structure +/// +/// # Examples +/// +/// ``` +/// use interactive_html_bom::*; +/// +/// let mut ibom = InteractiveHtmlBom::new( +/// "My Project", // Title +/// "My Company", // Company +/// "Rev. 1", // Revision +/// "1970-01-01", // Date +/// (0.0, 0.0), // Bottom left +/// (100.0, 80.0), // Top right +/// ); +/// +/// // Set configuration. +/// ibom.fields = vec!["Value".into(), "Footprint".into()]; +/// +/// // Draw PCB. +/// ibom.drawings.push(Drawing::new( +/// DrawingLayer::Edge, // Layer +/// "M 0 0 H 100 V 80 H -100 V -80", // SVG path +/// 0.1, // Line width +/// false, // Filled +/// )); +/// ibom.drawings.push(Drawing::new( +/// DrawingLayer::SilkscreenFront, +/// "M 10 10 H 80 V 60 H -80 V -60", +/// 0.1, +/// false, +/// )); +/// +/// // Add footprints. +/// let id = ibom.add_footprint( +/// Footprint::new( +/// Layer::Front, // Layer +/// (50.0, 40.0), // Position +/// 45.0, // Rotation +/// (-2.0, -1.0), // Bottom left +/// (2.0, 1.0), // Top right +/// &["100R".into(), "0603".into()], // Fields +/// &[Pad::new( +/// &[Layer::Front], // Pad layers +/// (-2.0, 0.0), // Pad position +/// 0.0, // Pad rotation +/// "M -1 -1 H 2 V 2 H -2 V -2", // Pad shape (SVG) +/// None, // Pad drill +/// None, // Pad net +/// ), +/// // [...] +/// ], +/// true, // Mount or not +/// ), +/// ); +/// +/// // Add BOM rows (designators and their footprint IDs). +/// ibom.bom_front.push(vec![RefMap::new("R1", id)]); +/// ``` +/// +///
+/// Please note that this struct is not completely fool-proof regarding as +/// it does not validate lots of the added data, so make sure you add only +/// valid BOM data. Only the most important things are validated: Footprint IDs +/// in BOM rows, and number of fields in footprints. +///
+#[non_exhaustive] +pub struct InteractiveHtmlBom { + // Metadata + title: String, + company: String, + revision: String, + date: String, + bottom_left: (f32, f32), + top_right: (f32, f32), + + /// Dark mode on/off + pub dark_mode: bool, + + /// Silkscreen visibility + pub show_silkscreen: bool, + + /// Fabrication layer visibility + pub show_fabrication: bool, + + /// Pads visibility + pub show_pads: bool, + + /// Checkbox column names + pub checkboxes: Vec, + + /// Custom field names, listed as columns + pub fields: Vec, + + /// User-defined HTML header + /// + ///
+ /// This should be used carefully as we neither guarantee forward- nor + /// backward-compatibility. + ///
+ pub user_header: String, + + /// User-defined HTML footer + /// + ///
+ /// This should be used carefully as we neither guarantee forward- nor + /// backward-compatibility. + ///
+ pub user_footer: String, + + /// User-defined JavaScript + /// + ///
+ /// This should be used carefully as we neither guarantee forward- nor + /// backward-compatibility. + ///
+ pub user_js: String, + + /// Drawings (PCB edges, silkscreen, fabrication) + pub drawings: Vec, + + /// PCB tracks + pub tracks: Vec, + + /// PCB vias + pub vias: Vec, + + /// PCB zones + pub zones: Vec, + + /// Footprints + pub footprints: Vec, + + /// BOM rows front side + pub bom_front: Vec>, + + /// BOM rows back side + pub bom_back: Vec>, + + /// BOM rows front+back + pub bom_both: Vec>, +} + +impl InteractiveHtmlBom { + /// Construct object + /// + /// # Arguments + /// + /// * `title` - Project title. + /// * `company` - Company/author name. + /// * `revision` - Project revision. + /// * `date` - Date/time as desired. + /// * `bottom_left` - Bottom left corner of bounding box (x, y) \[mm\]. + /// * `top_right` - Top right corner of bounding box (x, y) \[mm\]. + /// + /// # Returns + /// + /// Returns the new object. + pub fn new( + title: &str, + company: &str, + revision: &str, + date: &str, + bottom_left: (f32, f32), + top_right: (f32, f32), + ) -> InteractiveHtmlBom { + InteractiveHtmlBom { + title: title.to_owned(), + revision: revision.to_owned(), + company: company.to_owned(), + date: date.to_owned(), + bottom_left, + top_right, + dark_mode: false, + show_silkscreen: true, + show_fabrication: true, + show_pads: true, + checkboxes: vec!["Sourced".into(), "Placed".into()], + fields: Vec::new(), + user_js: String::new(), + user_header: String::new(), + user_footer: String::new(), + drawings: Vec::new(), + tracks: Vec::new(), + vias: Vec::new(), + zones: Vec::new(), + footprints: Vec::new(), + bom_front: Vec::new(), + bom_back: Vec::new(), + bom_both: Vec::new(), + } + } + + /// Add footprint + /// + /// # Arguments + /// + /// * `fpt` - The footprint to add. + /// + /// # Returns + /// + /// Returns the ID of the added footprint, to be used for referencing it + /// in BOM rows. + pub fn add_footprint(&mut self, fpt: Footprint) -> usize { + self.footprints.push(fpt); + self.footprints.len() - 1 + } + + /// Generate HTML + pub fn generate_html(&self) -> Result { + // Validate footprint IDs. + for bom in [&self.bom_back, &self.bom_front, &self.bom_both] { + for row in bom { + for map in row { + if map.footprint_id >= self.footprints.len() { + return Err("Invalid footprint ID.".into()); + } + } + } + } + + // Calculate some additional data. + let mut nets = Vec::new(); + let mut dnp_footprint_ids: Vec = Vec::new(); + for (index, footprint) in self.footprints.iter().enumerate() { + if !footprint.mount { + dnp_footprint_ids.push(index); + } + for pad in &footprint.pads { + if let Some(net) = &pad.net { + if !nets.contains(net) { + nets.push(net.clone()); + } + } + } + } + + // Auto-detect visibility of front/back sides depending on BOM. + let layer_view = if !self.bom_front.is_empty() && self.bom_back.is_empty() { + "F" + } else if self.bom_front.is_empty() && !self.bom_back.is_empty() { + "B" + } else { + "FB" + }; + + let config = object! { + board_rotation: 0.0, + bom_view: "left-right", + checkboxes: self.checkboxes.join(","), + dark_mode: self.dark_mode, + fields: self.fields.to_json(), + highlight_pin1: "none", + kicad_text_formatting: false, + layer_view: layer_view, + offset_back_rotation: false, + redraw_on_drag: true, + show_fabrication: self.show_fabrication, + show_pads: self.show_pads, + show_silkscreen: self.show_silkscreen, + }; + + let mut data = object! { + ibom_version: String::from_utf8_lossy(include_bytes!("web/version.txt")).to_string(), + metadata: object!{ + title: self.title.clone(), + company: self.company.clone(), + revision: self.revision.clone(), + date: self.date.clone(), + }, + edges_bbox: object!{ + minx: self.bottom_left.0, + maxx: self.top_right.0, + miny: self.bottom_left.1, + maxy: self.top_right.1, + }, + edges: self.drawings.iter() + .filter(|x| x.layer == DrawingLayer::Edge) + .map(ToJson::to_json).collect::>(), + drawings: object!{ + silkscreen: object!{ + F: self.drawings.iter() + .filter(|x| x.layer == DrawingLayer::SilkscreenFront) + .map(ToJson::to_json).collect::>(), + B: self.drawings.iter() + .filter(|x| x.layer == DrawingLayer::SilkscreenBack) + .map(ToJson::to_json).collect::>(), + }, + fabrication: object!{ + F: self.drawings.iter() + .filter(|x| x.layer == DrawingLayer::FabricationFront) + .map(ToJson::to_json).collect::>(), + B: self.drawings.iter() + .filter(|x| x.layer == DrawingLayer::FabricationBack) + .map(ToJson::to_json).collect::>(), + }, + }, + tracks: object!{ + F: self.tracks.iter() + .filter(|x| x.layer == Layer::Front) + .map(ToJson::to_json) + .chain(self.vias.iter() + .filter(|x| x.layers.contains(&Layer::Front)) + .map(ToJson::to_json)) + .collect::>(), + B: self.tracks.iter() + .filter(|x| x.layer == Layer::Back) + .map(ToJson::to_json) + .chain(self.vias.iter() + .filter(|x| x.layers.contains(&Layer::Back)) + .map(ToJson::to_json)) + .collect::>(), + }, + zones: object!{ + F: self.zones.iter() + .filter(|x| x.layer == Layer::Front) + .map(ToJson::to_json).collect::>(), + B: self.zones.iter() + .filter(|x| x.layer == Layer::Back) + .map(ToJson::to_json).collect::>(), + }, + nets: nets.to_json(), + footprints: self.footprints.to_json(), + bom: object!{ + F: self.bom_front.to_json(), + B: self.bom_back.to_json(), + both: self.bom_both.to_json(), + skipped: dnp_footprint_ids.to_json(), + fields: object!{}, // Filled below. + }, + }; + + // Fill in footprint fields and check their length. + for (id, fpt) in self.footprints.iter().enumerate() { + if fpt.fields.len() != self.fields.len() { + return Err("Inconsistent number of fields.".into()); + } + data["bom"]["fields"][id.to_string()] = fpt.fields.to_json(); + } + + // Build JS variables. + let config_str = "var config = ".to_owned() + &config.dump(); + let pcbdata_str = + "var pcbdata = JSON.parse(LZString.decompressFromBase64(\"".to_owned() + + &lz_str::compress_to_base64(&data.dump()) + + "\"))"; + + // Load HTML. + let mut html = + String::from_utf8_lossy(include_bytes!("web/ibom.html")).to_string(); + + // Replace placeholders. + let replacements = [ + ( + "///CSS///", + String::from_utf8_lossy(include_bytes!("web/ibom.css")), + ), + ( + "///SPLITJS///", + String::from_utf8_lossy(include_bytes!("web/split.js")), + ), + ( + "///LZ-STRING///", + String::from_utf8_lossy(include_bytes!("web/lz-string.js")), + ), + ( + "///POINTER_EVENTS_POLYFILL///", + String::from_utf8_lossy(include_bytes!("web/pep.js")), + ), + ( + "///UTILJS///", + String::from_utf8_lossy(include_bytes!("web/util.js")), + ), + ( + "///RENDERJS///", + String::from_utf8_lossy(include_bytes!("web/render.js")), + ), + ( + "///TABLEUTILJS///", + String::from_utf8_lossy(include_bytes!("web/table-util.js")), + ), + ( + "///IBOMJS///", + String::from_utf8_lossy(include_bytes!("web/ibom.js")), + ), + ("///CONFIG///", config_str.as_str().into()), + ("///PCBDATA///", pcbdata_str.as_str().into()), + ("///USERJS///", self.user_js.as_str().into()), + ("///USERHEADER///", self.user_header.as_str().into()), + ("///USERFOOTER///", self.user_footer.as_str().into()), + ]; + for replacement in &replacements { + html = html.replace(replacement.0, &replacement.1); + } + Ok(html) + } +} diff --git a/src/web/ibom.css b/src/web/ibom.css new file mode 100644 index 0000000..a601c3f --- /dev/null +++ b/src/web/ibom.css @@ -0,0 +1,888 @@ +:root { + --pcb-edge-color: black; + --pad-color: #878787; + --pad-hole-color: #CCCCCC; + --pad-color-highlight: #D04040; + --pad-color-highlight-both: #D0D040; + --pad-color-highlight-marked: #44a344; + --pin1-outline-color: #ffb629; + --pin1-outline-color-highlight: #ffb629; + --pin1-outline-color-highlight-both: #fcbb39; + --pin1-outline-color-highlight-marked: #fdbe41; + --silkscreen-edge-color: #aa4; + --silkscreen-polygon-color: #4aa; + --silkscreen-text-color: #4aa; + --fabrication-edge-color: #907651; + --fabrication-polygon-color: #907651; + --fabrication-text-color: #a27c24; + --track-color: #def5f1; + --track-color-highlight: #D04040; + --zone-color: #def5f1; + --zone-color-highlight: #d0404080; +} + +html, +body { + margin: 0px; + height: 100%; + font-family: Verdana, sans-serif; +} + +.dark.topmostdiv { + --pcb-edge-color: #eee; + --pad-color: #808080; + --pin1-outline-color: #ffa800; + --pin1-outline-color-highlight: #ccff00; + --track-color: #42524f; + --zone-color: #42524f; + background-color: #252c30; + color: #eee; +} + +button { + background-color: #eee; + border: 1px solid #888; + color: black; + height: 44px; + width: 44px; + text-align: center; + text-decoration: none; + display: inline-block; + font-size: 14px; + font-weight: bolder; +} + +.dark button { + /* This will be inverted */ + background-color: #c3b7b5; +} + +button.depressed { + background-color: #0a0; + color: white; +} + +.dark button.depressed { + /* This will be inverted */ + background-color: #b3b; +} + +button:focus { + outline: 0; +} + +button#tb-btn { + 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"); +} + +button#lr-btn { + 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"); +} + +button#bom-btn { + 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"); +} + +button#bom-grouped-btn { + 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"); +} + +button#bom-ungrouped-btn { + 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"); +} + +button#bom-netlist-btn { + 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"); +} + +button#copy { + 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"); + background-position: 6px 6px; + background-repeat: no-repeat; + background-size: 26px 26px; + border-radius: 6px; + height: 40px; + width: 40px; + margin: 10px 5px; +} + +button#copy:active { + box-shadow: inset 0px 0px 5px #6c6c6c; +} + +textarea.clipboard-temp { + position: fixed; + top: 0; + left: 0; + width: 2em; + height: 2em; + padding: 0; + border: None; + outline: None; + box-shadow: None; + background: transparent; +} + +.left-most-button { + border-right: 0; + border-top-left-radius: 6px; + border-bottom-left-radius: 6px; +} + +.middle-button { + border-right: 0; +} + +.right-most-button { + border-top-right-radius: 6px; + border-bottom-right-radius: 6px; +} + +.button-container { + font-size: 0; + margin: 0.4rem 0.4rem 0.4rem 0; +} + +.dark .button-container { + filter: invert(1); +} + +.button-container button { + background-size: 32px 32px; + background-position: 5px 5px; + background-repeat: no-repeat; +} + +@media print { + .hideonprint { + display: none; + } +} + +canvas { + cursor: crosshair; +} + +canvas:active { + cursor: grabbing; +} + +.fileinfo { + width: 100%; + max-width: 1000px; + border: none; + padding: 3px; +} + +.fileinfo .title { + font-size: 20pt; + font-weight: bold; +} + +.fileinfo td { + overflow: hidden; + white-space: nowrap; + max-width: 1px; + width: 50%; + text-overflow: ellipsis; +} + +.bom { + border-collapse: collapse; + font-family: Consolas, "DejaVu Sans Mono", Monaco, monospace; + font-size: 10pt; + table-layout: fixed; + width: 100%; + margin-top: 1px; + position: relative; +} + +.bom th, +.bom td { + border: 1px solid black; + padding: 5px; + word-wrap: break-word; + text-align: center; + position: relative; +} + +.dark .bom th, +.dark .bom td { + border: 1px solid #777; +} + +.bom th { + background-color: #CCCCCC; + background-clip: padding-box; +} + +.dark .bom th { + background-color: #3b4749; +} + +.bom tr.highlighted:nth-child(n) { + background-color: #cfc; +} + +.dark .bom tr.highlighted:nth-child(n) { + background-color: #226022; +} + +.bom tr:nth-child(even) { + background-color: #f2f2f2; +} + +.dark .bom tr:nth-child(even) { + background-color: #313b40; +} + +.bom tr.checked { + color: #1cb53d; +} + +.dark .bom tr.checked { + color: #2cce54; +} + +.bom tr { + transition: background-color 0.2s; +} + +.bom .numCol { + width: 30px; +} + +.bom .value { + width: 15%; +} + +.bom .quantity { + width: 65px; +} + +.bom th .sortmark { + position: absolute; + right: 1px; + top: 1px; + margin-top: -5px; + border-width: 5px; + border-style: solid; + border-color: transparent transparent #221 transparent; + transform-origin: 50% 85%; + transition: opacity 0.2s, transform 0.4s; +} + +.dark .bom th .sortmark { + filter: invert(1); +} + +.bom th .sortmark.none { + opacity: 0; +} + +.bom th .sortmark.desc { + transform: rotate(180deg); +} + +.bom th:hover .sortmark.none { + opacity: 0.5; +} + +.bom .bom-checkbox { + width: 30px; + position: relative; + user-select: none; + -moz-user-select: none; +} + +.bom .bom-checkbox:before { + content: ""; + position: absolute; + border-width: 15px; + border-style: solid; + border-color: #51829f transparent transparent transparent; + visibility: hidden; + top: -15px; +} + +.bom .bom-checkbox:after { + content: "Double click to set/unset all"; + position: absolute; + color: white; + top: -35px; + left: -26px; + background: #51829f; + padding: 5px 15px; + border-radius: 8px; + white-space: nowrap; + visibility: hidden; +} + +.bom .bom-checkbox:hover:before, +.bom .bom-checkbox:hover:after { + visibility: visible; + transition: visibility 0.2s linear 1s; +} + +.split { + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + box-sizing: border-box; + overflow-y: auto; + overflow-x: hidden; + background-color: inherit; +} + +.split.split-horizontal, +.gutter.gutter-horizontal { + height: 100%; + float: left; +} + +.gutter { + background-color: #ddd; + background-repeat: no-repeat; + background-position: 50%; + transition: background-color 0.3s; +} + +.dark .gutter { + background-color: #777; +} + +.gutter.gutter-horizontal { + background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAeCAYAAADkftS9AAAAIklEQVQoU2M4c+bMfxAGAgYYmwGrIIiDjrELjpo5aiZeMwF+yNnOs5KSvgAAAABJRU5ErkJggg=='); + cursor: ew-resize; + width: 5px; +} + +.gutter.gutter-vertical { + background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAFAQMAAABo7865AAAABlBMVEVHcEzMzMzyAv2sAAAAAXRSTlMAQObYZgAAABBJREFUeF5jOAMEEAIEEFwAn3kMwcB6I2AAAAAASUVORK5CYII='); + cursor: ns-resize; + height: 5px; +} + +.searchbox { + float: left; + height: 40px; + margin: 10px 5px; + padding: 12px 32px; + font-family: Consolas, "DejaVu Sans Mono", Monaco, monospace; + font-size: 18px; + box-sizing: border-box; + border: 1px solid #888; + border-radius: 6px; + outline: none; + background-color: #eee; + transition: background-color 0.2s, border 0.2s; + 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=='); + background-position: 10px 10px; + background-repeat: no-repeat; +} + +.dark .searchbox { + background-color: #111; + color: #eee; +} + +.searchbox::placeholder { + color: #ccc; +} + +.dark .searchbox::placeholder { + color: #666; +} + +.filter { + width: calc(60% - 64px); +} + +.reflookup { + width: calc(40% - 10px); +} + +input[type=text]:focus { + background-color: white; + border: 1px solid #333; +} + +.dark input[type=text]:focus { + background-color: #333; + border: 1px solid #ccc; +} + +mark.highlight { + background-color: #5050ff; + color: #fff; + padding: 2px; + border-radius: 6px; +} + +.dark mark.highlight { + background-color: #76a6da; + color: #111; +} + +.menubtn { + background-color: white; + border: none; + 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"); + background-position: center; + background-repeat: no-repeat; +} + +.statsbtn { + background-color: white; + border: none; + 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"); + background-position: center; + background-repeat: no-repeat; +} + +.iobtn { + background-color: white; + border: none; + 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"); + background-position: center; + background-repeat: no-repeat; +} + +.visbtn { + 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"); + background-position: center; + background-repeat: no-repeat; + padding: 15px; +} + +#vismenu-content { + left: 0px; + font-family: Verdana, sans-serif; +} + +.dark .statsbtn, +.dark .savebtn, +.dark .menubtn, +.dark .iobtn, +.dark .visbtn { + filter: invert(1); +} + +.flexbox { + display: flex; + align-items: center; + justify-content: space-between; + width: 100%; +} + +.savebtn { + background-color: #d6d6d6; + width: auto; + height: 30px; + flex-grow: 1; + margin: 5px; + border-radius: 4px; +} + +.savebtn:active { + background-color: #0a0; + color: white; +} + +.dark .savebtn:active { + /* This will be inverted */ + background-color: #b3b; +} + +.stats { + border-collapse: collapse; + font-size: 12pt; + table-layout: fixed; + width: 100%; + min-width: 450px; +} + +.dark .stats td { + border: 1px solid #bbb; +} + +.stats td { + border: 1px solid black; + padding: 5px; + word-wrap: break-word; + text-align: center; + position: relative; +} + +#checkbox-stats div { + position: absolute; + left: 0; + top: 0; + height: 100%; + width: 100%; + display: flex; + align-items: center; + justify-content: center; +} + +#checkbox-stats .bar { + background-color: rgba(28, 251, 0, 0.6); +} + +.menu { + position: relative; + display: inline-block; + margin: 0.4rem 0.4rem 0.4rem 0; +} + +.menu-content { + font-size: 12pt !important; + text-align: left !important; + font-weight: normal !important; + display: none; + position: absolute; + background-color: white; + right: 0; + min-width: 300px; + box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2); + z-index: 100; + padding: 8px; +} + +.dark .menu-content { + background-color: #111; +} + +.menu:hover .menu-content { + display: block; +} + +.menu:hover .menubtn, +.menu:hover .iobtn, +.menu:hover .statsbtn { + background-color: #eee; +} + +.menu-label { + display: inline-block; + padding: 8px; + border: 1px solid #ccc; + border-top: 0; + width: calc(100% - 18px); +} + +.menu-label-top { + border-top: 1px solid #ccc; +} + +.menu-textbox { + float: left; + height: 24px; + margin: 10px 5px; + padding: 5px 5px; + font-family: Consolas, "DejaVu Sans Mono", Monaco, monospace; + font-size: 14px; + box-sizing: border-box; + border: 1px solid #888; + border-radius: 4px; + outline: none; + background-color: #eee; + transition: background-color 0.2s, border 0.2s; + width: calc(100% - 10px); +} + +.menu-textbox.invalid, +.dark .menu-textbox.invalid { + color: red; +} + +.dark .menu-textbox { + background-color: #222; + color: #eee; +} + +.radio-container { + margin: 4px; +} + +.topmostdiv { + display: flex; + flex-direction: column; + width: 100%; + background-color: white; + transition: background-color 0.3s; + min-height: 100%; +} + +#top { + display: flex; + flex-wrap: wrap; + justify-content: flex-end; + align-items: center; +} + +#topdivider { + border-bottom: 2px solid black; + display: flex; + justify-content: center; + align-items: center; +} + +.dark #topdivider { + border-bottom: 2px solid #ccc; +} + +#topdivider>div { + position: relative; +} + +#toptoggle { + cursor: pointer; + user-select: none; + position: absolute; + padding: 0.1rem 0.3rem; + top: -0.4rem; + left: -1rem; + font-size: 1.4rem; + line-height: 60%; + border: 1px solid black; + border-radius: 1rem; + background-color: #fff; + z-index: 100; +} + +.flipped { + transform: rotate(0.5turn); +} + +.dark #toptoggle { + border: 1px solid #fff; + background-color: #222; +} + +#fileinfodiv { + flex: 20rem 1 0; + overflow: auto; +} + +#bomcontrols { + display: flex; + flex-direction: row-reverse; +} + +#bomcontrols>* { + flex-shrink: 0; +} + +#dbg { + display: block; +} + +::-webkit-scrollbar { + width: 8px; +} + +::-webkit-scrollbar-track { + background: #aaa; +} + +::-webkit-scrollbar-thumb { + background: #666; + border-radius: 3px; +} + +::-webkit-scrollbar-thumb:hover { + background: #555; +} + +.slider { + -webkit-appearance: none; + width: 100%; + margin: 3px 0; + padding: 0; + outline: none; + opacity: 0.7; + -webkit-transition: .2s; + transition: opacity .2s; + border-radius: 3px; +} + +.slider:hover { + opacity: 1; +} + +.slider:focus { + outline: none; +} + +.slider::-webkit-slider-runnable-track { + -webkit-appearance: none; + width: 100%; + height: 8px; + background: #d3d3d3; + border-radius: 3px; + border: none; +} + +.slider::-webkit-slider-thumb { + -webkit-appearance: none; + width: 15px; + height: 15px; + border-radius: 50%; + background: #0a0; + cursor: pointer; + margin-top: -4px; +} + +.dark .slider::-webkit-slider-thumb { + background: #3d3; +} + +.slider::-moz-range-thumb { + width: 15px; + height: 15px; + border-radius: 50%; + background: #0a0; + cursor: pointer; +} + +.slider::-moz-range-track { + height: 8px; + background: #d3d3d3; + border-radius: 3px; +} + +.dark .slider::-moz-range-thumb { + background: #3d3; +} + +.slider::-ms-track { + width: 100%; + height: 8px; + border-width: 3px 0; + background: transparent; + border-color: transparent; + color: transparent; + transition: opacity .2s; +} + +.slider::-ms-fill-lower { + background: #d3d3d3; + border: none; + border-radius: 3px; +} + +.slider::-ms-fill-upper { + background: #d3d3d3; + border: none; + border-radius: 3px; +} + +.slider::-ms-thumb { + width: 15px; + height: 15px; + border-radius: 50%; + background: #0a0; + cursor: pointer; + margin: 0; +} + +.shameless-plug { + font-size: 0.8em; + text-align: center; + display: block; +} + +a { + color: #0278a4; +} + +.dark a { + color: #00b9fd; +} + +#frontcanvas, +#backcanvas { + touch-action: none; +} + +.placeholder { + border: 1px dashed #9f9fda !important; + background-color: #edf2f7 !important; +} + +.dragging { + z-index: 999; +} + +.dark .dragging>table>tbody>tr { + background-color: #252c30; +} + +.dark .placeholder { + filter: invert(1); +} + +.column-spacer { + top: 0; + left: 0; + width: calc(100% - 4px); + position: absolute; + cursor: pointer; + user-select: none; + height: 100%; +} + +.column-width-handle { + top: 0; + right: 0; + width: 4px; + position: absolute; + cursor: col-resize; + user-select: none; + height: 100%; +} + +.column-width-handle:hover { + background-color: #4f99bd; +} + +.help-link { + border: 1px solid #0278a4; + padding-inline: 0.3rem; + border-radius: 3px; + cursor: pointer; +} + +.dark .help-link { + border: 1px solid #00b9fd; +} + +.bom-color { + width: 20%; +} + +.color-column input { + width: 1.6rem; + height: 1rem; + border: 1px solid black; + cursor: pointer; + padding: 0; +} + +/* removes default styling from input color element */ +::-webkit-color-swatch { + border: none; +} + +::-webkit-color-swatch-wrapper { + padding: 0; +} + +::-moz-color-swatch, +::-moz-focus-inner { + border: none; +} + +::-moz-focus-inner { + padding: 0; +} \ No newline at end of file diff --git a/src/web/ibom.html b/src/web/ibom.html new file mode 100644 index 0000000..69fd777 --- /dev/null +++ b/src/web/ibom.html @@ -0,0 +1,341 @@ + + + + + + + Interactive BOM for KiCAD + + + + + +///USERHEADER/// +
+
+
+ + + + + + + + + + + +
+ Title + + Revision +
+ Company + + Date +
+
+
+
+ +
+ + + +
+ +
+ + + + + + + + + +
+
+
+ + + +
+
+ + + +
+
+ + + +
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Board statsFrontBackTotal
Components~~~
Groups~~~
SMD pads~~~
TH pads~
+ + + + + + + +
Checkboxes
+
+
+
+ +
+
+
Save board image
+
+ + X + +
+ +
+ + +
+
+
+ Config and checkbox state +
+ + + +
+
+
+ Save bom table as +
+ + +
+
+
+
+
+
+
+
+
︽
+
+
+
+
+
+ + +
+ +
+
+
+ + + + + +
+
+
+
+
+ + + + +
+
+
+
+ + + + +
+
+
+
+
+///USERFOOTER/// + + + diff --git a/src/web/ibom.js b/src/web/ibom.js new file mode 100644 index 0000000..22d0b79 --- /dev/null +++ b/src/web/ibom.js @@ -0,0 +1,1324 @@ +/* DOM manipulation and misc code */ + +var bomsplit; +var canvassplit; +var initDone = false; +var bomSortFunction = null; +var currentSortColumn = null; +var currentSortOrder = null; +var currentHighlightedRowId; +var highlightHandlers = []; +var footprintIndexToHandler = {}; +var netsToHandler = {}; +var markedFootprints = new Set(); +var highlightedFootprints = []; +var highlightedNet = null; +var lastClicked; + +function dbg(html) { + dbgdiv.innerHTML = html; +} + +function redrawIfInitDone() { + if (initDone) { + redrawCanvas(allcanvas.front); + redrawCanvas(allcanvas.back); + } +} + +function padsVisible(value) { + writeStorage("padsVisible", value); + settings.renderPads = value; + redrawIfInitDone(); +} + +function referencesVisible(value) { + writeStorage("referencesVisible", value); + settings.renderReferences = value; + redrawIfInitDone(); +} + +function valuesVisible(value) { + writeStorage("valuesVisible", value); + settings.renderValues = value; + redrawIfInitDone(); +} + +function tracksVisible(value) { + writeStorage("tracksVisible", value); + settings.renderTracks = value; + redrawIfInitDone(); +} + +function zonesVisible(value) { + writeStorage("zonesVisible", value); + settings.renderZones = value; + redrawIfInitDone(); +} + +function dnpOutline(value) { + writeStorage("dnpOutline", value); + settings.renderDnpOutline = value; + redrawIfInitDone(); +} + +function setDarkMode(value) { + if (value) { + topmostdiv.classList.add("dark"); + } else { + topmostdiv.classList.remove("dark"); + } + writeStorage("darkmode", value); + settings.darkMode = value; + redrawIfInitDone(); + if (initDone) { + populateBomTable(); + } +} + +function setShowBOMColumn(field, value) { + if (field === "references") { + var rl = document.getElementById("reflookup"); + rl.disabled = !value; + if (!value) { + rl.value = ""; + updateRefLookup(""); + } + } + + var n = settings.hiddenColumns.indexOf(field); + if (value) { + if (n != -1) { + settings.hiddenColumns.splice(n, 1); + } + } else { + if (n == -1) { + settings.hiddenColumns.push(field); + } + } + + writeStorage("hiddenColumns", JSON.stringify(settings.hiddenColumns)); + + if (initDone) { + populateBomTable(); + } + + redrawIfInitDone(); +} + + +function setFullscreen(value) { + if (value) { + document.documentElement.requestFullscreen(); + } else { + document.exitFullscreen(); + } +} + +function fabricationVisible(value) { + writeStorage("fabricationVisible", value); + settings.renderFabrication = value; + redrawIfInitDone(); +} + +function silkscreenVisible(value) { + writeStorage("silkscreenVisible", value); + settings.renderSilkscreen = value; + redrawIfInitDone(); +} + +function setHighlightPin1(value) { + writeStorage("highlightpin1", value); + settings.highlightpin1 = value; + redrawIfInitDone(); +} + +function setHighlightRowOnClick(value) { + settings.highlightRowOnClick = value; + writeStorage("highlightRowOnClick", value); + if (initDone) { + populateBomTable(); + } +} + +function getStoredCheckboxRefs(checkbox) { + function convert(ref) { + var intref = parseInt(ref); + if (isNaN(intref)) { + for (var i = 0; i < pcbdata.footprints.length; i++) { + if (pcbdata.footprints[i].ref == ref) { + return i; + } + } + return -1; + } else { + return intref; + } + } + if (!(checkbox in settings.checkboxStoredRefs)) { + var val = readStorage("checkbox_" + checkbox); + settings.checkboxStoredRefs[checkbox] = val ? val : ""; + } + if (!settings.checkboxStoredRefs[checkbox]) { + return new Set(); + } else { + return new Set(settings.checkboxStoredRefs[checkbox].split(",").map(r => convert(r)).filter(a => a >= 0)); + } +} + +function getCheckboxState(checkbox, references) { + var storedRefsSet = getStoredCheckboxRefs(checkbox); + var currentRefsSet = new Set(references.map(r => r[1])); + // Get difference of current - stored + var difference = new Set(currentRefsSet); + for (ref of storedRefsSet) { + difference.delete(ref); + } + if (difference.size == 0) { + // All the current refs are stored + return "checked"; + } else if (difference.size == currentRefsSet.size) { + // None of the current refs are stored + return "unchecked"; + } else { + // Some of the refs are stored + return "indeterminate"; + } +} + +function setBomCheckboxState(checkbox, element, references) { + var state = getCheckboxState(checkbox, references); + element.checked = (state == "checked"); + element.indeterminate = (state == "indeterminate"); +} + +function createCheckboxHandlers(input, checkbox, references, row) { + var clickHandler = () => { + refsSet = getStoredCheckboxRefs(checkbox); + var markWhenChecked = settings.markWhenChecked == checkbox; + eventArgs = { + checkbox: checkbox, + refs: references, + } + if (input.checked) { + // checkbox ticked + for (var ref of references) { + refsSet.add(ref[1]); + } + if (markWhenChecked) { + row.classList.add("checked"); + for (var ref of references) { + markedFootprints.add(ref[1]); + } + drawHighlights(); + } + eventArgs.state = 'checked'; + } else { + // checkbox unticked + for (var ref of references) { + refsSet.delete(ref[1]); + } + if (markWhenChecked) { + row.classList.remove("checked"); + for (var ref of references) { + markedFootprints.delete(ref[1]); + } + drawHighlights(); + } + eventArgs.state = 'unchecked'; + } + settings.checkboxStoredRefs[checkbox] = [...refsSet].join(","); + writeStorage("checkbox_" + checkbox, settings.checkboxStoredRefs[checkbox]); + updateCheckboxStats(checkbox); + EventHandler.emitEvent(IBOM_EVENT_TYPES.CHECKBOX_CHANGE_EVENT, eventArgs); + } + + return [ + (e) => { + clickHandler(); + }, + (e) => { + e.preventDefault(); + if (row.onmousemove) row.onmousemove(); + }, + (e) => { + e.preventDefault(); + input.checked = !input.checked; + input.indeterminate = false; + clickHandler(); + } + ]; +} + +function clearHighlightedFootprints() { + if (currentHighlightedRowId) { + document.getElementById(currentHighlightedRowId).classList.remove("highlighted"); + currentHighlightedRowId = null; + highlightedFootprints = []; + highlightedNet = null; + } +} + +function createRowHighlightHandler(rowid, refs, net) { + return function () { + if (currentHighlightedRowId) { + if (currentHighlightedRowId == rowid) { + return; + } + document.getElementById(currentHighlightedRowId).classList.remove("highlighted"); + } + document.getElementById(rowid).classList.add("highlighted"); + currentHighlightedRowId = rowid; + highlightedFootprints = refs ? refs.map(r => r[1]) : []; + highlightedNet = net; + drawHighlights(); + EventHandler.emitEvent( + IBOM_EVENT_TYPES.HIGHLIGHT_EVENT, { + rowid: rowid, + refs: refs, + net: net + }); + } +} + +function updateNetColors() { + writeStorage("netColors", JSON.stringify(settings.netColors)); + redrawIfInitDone(); +} + +function netColorChangeHandler(net) { + return (event) => { + settings.netColors[net] = event.target.value; + updateNetColors(); + } +} + +function netColorRightClick(net) { + return (event) => { + if (event.button == 2) { + event.preventDefault(); + event.stopPropagation(); + + var style = getComputedStyle(topmostdiv); + var defaultNetColor = style.getPropertyValue('--track-color').trim(); + event.target.value = defaultNetColor; + delete settings.netColors[net]; + updateNetColors(); + } + } +} + +function entryMatches(entry) { + if (settings.bommode == "netlist") { + // entry is just a net name + return entry.toLowerCase().indexOf(filter) >= 0; + } + // check refs + if (!settings.hiddenColumns.includes("references")) { + for (var ref of entry) { + if (ref[0].toLowerCase().indexOf(filter) >= 0) { + return true; + } + } + } + // check fields + for (var i in config.fields) { + var f = config.fields[i]; + if (!settings.hiddenColumns.includes(f)) { + for (var ref of entry) { + if (String(pcbdata.bom.fields[ref[1]][i]).toLowerCase().indexOf(filter) >= 0) { + return true; + } + } + } + } + return false; +} + +function findRefInEntry(entry) { + return entry.filter(r => r[0].toLowerCase() == reflookup); +} + +function highlightFilter(s) { + if (!filter) { + return s; + } + var parts = s.toLowerCase().split(filter); + if (parts.length == 1) { + return s; + } + var r = ""; + var pos = 0; + for (var i in parts) { + if (i > 0) { + r += '' + + s.substring(pos, pos + filter.length) + + ''; + pos += filter.length; + } + r += s.substring(pos, pos + parts[i].length); + pos += parts[i].length; + } + return r; +} + +function checkboxSetUnsetAllHandler(checkboxname) { + return function () { + var checkboxnum = 0; + while (checkboxnum < settings.checkboxes.length && + settings.checkboxes[checkboxnum].toLowerCase() != checkboxname.toLowerCase()) { + checkboxnum++; + } + if (checkboxnum >= settings.checkboxes.length) { + return; + } + var allset = true; + var checkbox; + var row; + for (row of bombody.childNodes) { + checkbox = row.childNodes[checkboxnum + 1].childNodes[0]; + if (!checkbox.checked || checkbox.indeterminate) { + allset = false; + break; + } + } + for (row of bombody.childNodes) { + checkbox = row.childNodes[checkboxnum + 1].childNodes[0]; + checkbox.checked = !allset; + checkbox.indeterminate = false; + checkbox.onchange(); + } + } +} + +function createColumnHeader(name, cls, comparator, is_checkbox = false) { + var th = document.createElement("TH"); + th.innerHTML = name; + th.classList.add(cls); + if (is_checkbox) + th.setAttribute("col_name", "bom-checkbox"); + else + th.setAttribute("col_name", name); + var span = document.createElement("SPAN"); + span.classList.add("sortmark"); + span.classList.add("none"); + th.appendChild(span); + var spacer = document.createElement("div"); + spacer.className = "column-spacer"; + th.appendChild(spacer); + spacer.onclick = function () { + if (currentSortColumn && th !== currentSortColumn) { + // Currently sorted by another column + currentSortColumn.childNodes[1].classList.remove(currentSortOrder); + currentSortColumn.childNodes[1].classList.add("none"); + currentSortColumn = null; + currentSortOrder = null; + } + if (currentSortColumn && th === currentSortColumn) { + // Already sorted by this column + if (currentSortOrder == "asc") { + // Sort by this column, descending order + bomSortFunction = function (a, b) { + return -comparator(a, b); + } + currentSortColumn.childNodes[1].classList.remove("asc"); + currentSortColumn.childNodes[1].classList.add("desc"); + currentSortOrder = "desc"; + } else { + // Unsort + bomSortFunction = null; + currentSortColumn.childNodes[1].classList.remove("desc"); + currentSortColumn.childNodes[1].classList.add("none"); + currentSortColumn = null; + currentSortOrder = null; + } + } else { + // Sort by this column, ascending order + bomSortFunction = comparator; + currentSortColumn = th; + currentSortColumn.childNodes[1].classList.remove("none"); + currentSortColumn.childNodes[1].classList.add("asc"); + currentSortOrder = "asc"; + } + populateBomBody(); + } + if (is_checkbox) { + spacer.onclick = fancyDblClickHandler( + spacer, spacer.onclick, checkboxSetUnsetAllHandler(name)); + } + return th; +} + +function populateBomHeader(placeHolderColumn = null, placeHolderElements = null) { + while (bomhead.firstChild) { + bomhead.removeChild(bomhead.firstChild); + } + var tr = document.createElement("TR"); + var th = document.createElement("TH"); + th.classList.add("numCol"); + + var vismenu = document.createElement("div"); + vismenu.id = "vismenu"; + vismenu.classList.add("menu"); + + var visbutton = document.createElement("div"); + visbutton.classList.add("visbtn"); + visbutton.classList.add("hideonprint"); + + var viscontent = document.createElement("div"); + viscontent.classList.add("menu-content"); + viscontent.id = "vismenu-content"; + + settings.columnOrder.forEach(column => { + if (typeof column !== "string") + return; + + // Skip empty columns + if (column === "checkboxes" && settings.checkboxes.length == 0) + return; + else if (column === "Quantity" && settings.bommode == "ungrouped") + return; + + var label = document.createElement("label"); + label.classList.add("menu-label"); + + var input = document.createElement("input"); + input.classList.add("visibility_checkbox"); + input.type = "checkbox"; + input.onchange = function (e) { + setShowBOMColumn(column, e.target.checked) + }; + input.checked = !(settings.hiddenColumns.includes(column)); + + label.appendChild(input); + if (column.length > 0) + label.append(column[0].toUpperCase() + column.slice(1)); + + viscontent.appendChild(label); + }); + + viscontent.childNodes[0].classList.add("menu-label-top"); + + vismenu.appendChild(visbutton); + if (settings.bommode != "netlist") { + vismenu.appendChild(viscontent); + th.appendChild(vismenu); + } + tr.appendChild(th); + + var checkboxCompareClosure = function (checkbox) { + return (a, b) => { + var stateA = getCheckboxState(checkbox, a); + var stateB = getCheckboxState(checkbox, b); + if (stateA > stateB) return -1; + if (stateA < stateB) return 1; + return 0; + } + } + var stringFieldCompareClosure = function (fieldIndex) { + return (a, b) => { + var fa = pcbdata.bom.fields[a[0][1]][fieldIndex]; + var fb = pcbdata.bom.fields[b[0][1]][fieldIndex]; + if (fa != fb) return fa > fb ? 1 : -1; + else return 0; + } + } + var referenceRegex = /(?[^0-9]+)(?[0-9]+)/; + var compareRefs = (a, b) => { + var ra = referenceRegex.exec(a); + var rb = referenceRegex.exec(b); + if (ra === null || rb === null) { + if (a != b) return a > b ? 1 : -1; + return 0; + } else { + if (ra.groups.prefix != rb.groups.prefix) { + return ra.groups.prefix > rb.groups.prefix ? 1 : -1; + } + if (ra.groups.number != rb.groups.number) { + return parseInt(ra.groups.number) > parseInt(rb.groups.number) ? 1 : -1; + } + return 0; + } + } + if (settings.bommode == "netlist") { + tr.appendChild(createColumnHeader("Net name", "bom-netname", (a, b) => { + if (a > b) return -1; + if (a < b) return 1; + return 0; + })); + tr.appendChild(createColumnHeader("Color", "bom-color", (a, b) => { + return 0; + })); + } else { + // Filter hidden columns + var columns = settings.columnOrder.filter(e => !settings.hiddenColumns.includes(e)); + var valueIndex = config.fields.indexOf("Value"); + var footprintIndex = config.fields.indexOf("Footprint"); + columns.forEach((column) => { + if (column === placeHolderColumn) { + var n = 1; + if (column === "checkboxes") + n = settings.checkboxes.length; + for (i = 0; i < n; i++) { + td = placeHolderElements.shift(); + tr.appendChild(td); + } + return; + } else if (column === "checkboxes") { + for (var checkbox of settings.checkboxes) { + th = createColumnHeader( + checkbox, "bom-checkbox", checkboxCompareClosure(checkbox), true); + tr.appendChild(th); + } + } else if (column === "References") { + tr.appendChild(createColumnHeader("References", "references", (a, b) => { + var i = 0; + while (i < a.length && i < b.length) { + if (a[i] != b[i]) return compareRefs(a[i][0], b[i][0]); + i++; + } + return a.length - b.length; + })); + } else if (column === "Value") { + tr.appendChild(createColumnHeader("Value", "value", (a, b) => { + var ra = a[0][1], rb = b[0][1]; + return valueCompare( + pcbdata.bom.parsedValues[ra], pcbdata.bom.parsedValues[rb], + pcbdata.bom.fields[ra][valueIndex], pcbdata.bom.fields[rb][valueIndex]); + })); + return; + } else if (column === "Footprint") { + tr.appendChild(createColumnHeader( + "Footprint", "footprint", stringFieldCompareClosure(footprintIndex))); + } else if (column === "Quantity" && settings.bommode == "grouped") { + tr.appendChild(createColumnHeader("Quantity", "quantity", (a, b) => { + return a.length - b.length; + })); + } else { + // Other fields + var i = config.fields.indexOf(column); + if (i < 0) + return; + tr.appendChild(createColumnHeader( + column, `field${i + 1}`, stringFieldCompareClosure(i))); + } + }); + } + bomhead.appendChild(tr); +} + +function populateBomBody(placeholderColumn = null, placeHolderElements = null) { + const urlRegex = /^(https?:\/\/[^\s\/$.?#][^\s]*|file:\/\/([a-zA-Z]:|\/)[^\x00]+)$/; + while (bom.firstChild) { + bom.removeChild(bom.firstChild); + } + highlightHandlers = []; + footprintIndexToHandler = {}; + netsToHandler = {}; + currentHighlightedRowId = null; + var first = true; + var style = getComputedStyle(topmostdiv); + var defaultNetColor = style.getPropertyValue('--track-color').trim(); + if (settings.bommode == "netlist") { + bomtable = pcbdata.nets.slice(); + } else { + switch (settings.canvaslayout) { + case 'F': + bomtable = pcbdata.bom.F.slice(); + break; + case 'FB': + bomtable = pcbdata.bom.both.slice(); + break; + case 'B': + bomtable = pcbdata.bom.B.slice(); + break; + } + if (settings.bommode == "ungrouped") { + // expand bom table + expandedTable = [] + for (var bomentry of bomtable) { + for (var ref of bomentry) { + expandedTable.push([ref]); + } + } + bomtable = expandedTable; + } + } + if (bomSortFunction) { + bomtable = bomtable.sort(bomSortFunction); + } + for (var i in bomtable) { + var bomentry = bomtable[i]; + if (filter && !entryMatches(bomentry)) { + continue; + } + var references = null; + var netname = null; + var tr = document.createElement("TR"); + var td = document.createElement("TD"); + var rownum = +i + 1; + tr.id = "bomrow" + rownum; + td.textContent = rownum; + tr.appendChild(td); + if (settings.bommode == "netlist") { + netname = bomentry; + td = document.createElement("TD"); + td.innerHTML = highlightFilter(netname ? netname : "<no net>"); + tr.appendChild(td); + var color = settings.netColors[netname] || defaultNetColor; + td = document.createElement("TD"); + var colorBox = document.createElement("INPUT"); + colorBox.type = "color"; + colorBox.value = color; + colorBox.onchange = netColorChangeHandler(netname); + colorBox.onmouseup = netColorRightClick(netname); + colorBox.oncontextmenu = (e) => e.preventDefault(); + td.appendChild(colorBox); + td.classList.add("color-column"); + tr.appendChild(td); + } else { + if (reflookup) { + references = findRefInEntry(bomentry); + if (references.length == 0) { + continue; + } + } else { + references = bomentry; + } + // Filter hidden columns + var columns = settings.columnOrder.filter(e => !settings.hiddenColumns.includes(e)); + columns.forEach((column) => { + if (column === placeholderColumn) { + var n = 1; + if (column === "checkboxes") + n = settings.checkboxes.length; + for (i = 0; i < n; i++) { + td = placeHolderElements.shift(); + tr.appendChild(td); + } + return; + } else if (column === "checkboxes") { + for (var checkbox of settings.checkboxes) { + if (checkbox) { + td = document.createElement("TD"); + var input = document.createElement("input"); + input.type = "checkbox"; + [input.onchange, td.ontouchstart, td.ontouchend] = createCheckboxHandlers(input, checkbox, references, tr); + setBomCheckboxState(checkbox, input, references); + if (input.checked && settings.markWhenChecked == checkbox) { + tr.classList.add("checked"); + } + td.appendChild(input); + tr.appendChild(td); + } + } + } else if (column === "References") { + td = document.createElement("TD"); + td.innerHTML = highlightFilter(references.map(r => r[0]).join(", ")); + tr.appendChild(td); + } else if (column === "Quantity" && settings.bommode == "grouped") { + // Quantity + td = document.createElement("TD"); + td.textContent = references.length; + tr.appendChild(td); + } else { + // All the other fields + var field_index = config.fields.indexOf(column) + if (field_index < 0) + return; + var valueSet = new Set(); + references.map(r => r[1]).forEach((id) => valueSet.add(pcbdata.bom.fields[id][field_index])); + td = document.createElement("TD"); + var output = new Array(); + for (let item of valueSet) { + const visible = highlightFilter(String(item)); + if (typeof item === 'string' && item.match(urlRegex)) { + output.push(`${visible}`); + } else { + output.push(visible); + } + } + td.innerHTML = output.join(", "); + tr.appendChild(td); + } + }); + } + bom.appendChild(tr); + var handler = createRowHighlightHandler(tr.id, references, netname); + if (settings.highlightRowOnClick) { + tr.onmousedown = handler; + } else { + tr.onmousemove = handler; + } + highlightHandlers.push({ + id: tr.id, + handler: handler, + }); + if (references !== null) { + for (var refIndex of references.map(r => r[1])) { + footprintIndexToHandler[refIndex] = handler; + } + } + if (netname !== null) { + netsToHandler[netname] = handler; + } + if ((filter || reflookup) && first) { + handler(); + first = false; + } + } + EventHandler.emitEvent( + IBOM_EVENT_TYPES.BOM_BODY_CHANGE_EVENT, { + filter: filter, + reflookup: reflookup, + checkboxes: settings.checkboxes, + bommode: settings.bommode, + }); +} + +function highlightPreviousRow() { + if (!currentHighlightedRowId) { + highlightHandlers[highlightHandlers.length - 1].handler(); + } else { + if (highlightHandlers.length > 1 && + highlightHandlers[0].id == currentHighlightedRowId) { + highlightHandlers[highlightHandlers.length - 1].handler(); + } else { + for (var i = 0; i < highlightHandlers.length - 1; i++) { + if (highlightHandlers[i + 1].id == currentHighlightedRowId) { + highlightHandlers[i].handler(); + break; + } + } + } + } + smoothScrollToRow(currentHighlightedRowId); +} + +function highlightNextRow() { + if (!currentHighlightedRowId) { + highlightHandlers[0].handler(); + } else { + if (highlightHandlers.length > 1 && + highlightHandlers[highlightHandlers.length - 1].id == currentHighlightedRowId) { + highlightHandlers[0].handler(); + } else { + for (var i = 1; i < highlightHandlers.length; i++) { + if (highlightHandlers[i - 1].id == currentHighlightedRowId) { + highlightHandlers[i].handler(); + break; + } + } + } + } + smoothScrollToRow(currentHighlightedRowId); +} + +function populateBomTable() { + populateBomHeader(); + populateBomBody(); + setBomHandlers(); + resizableGrid(bomhead); +} + +function footprintsClicked(footprintIndexes) { + var lastClickedIndex = footprintIndexes.indexOf(lastClicked); + for (var i = 1; i <= footprintIndexes.length; i++) { + var refIndex = footprintIndexes[(lastClickedIndex + i) % footprintIndexes.length]; + if (refIndex in footprintIndexToHandler) { + lastClicked = refIndex; + footprintIndexToHandler[refIndex](); + smoothScrollToRow(currentHighlightedRowId); + break; + } + } +} + +function netClicked(net) { + if (net in netsToHandler) { + netsToHandler[net](); + smoothScrollToRow(currentHighlightedRowId); + } else { + clearHighlightedFootprints(); + highlightedNet = net; + drawHighlights(); + } +} + +function updateFilter(input) { + filter = input.toLowerCase(); + populateBomTable(); +} + +function updateRefLookup(input) { + reflookup = input.toLowerCase(); + populateBomTable(); +} + +function changeCanvasLayout(layout) { + document.getElementById("fl-btn").classList.remove("depressed"); + document.getElementById("fb-btn").classList.remove("depressed"); + document.getElementById("bl-btn").classList.remove("depressed"); + switch (layout) { + case 'F': + document.getElementById("fl-btn").classList.add("depressed"); + if (settings.bomlayout != "bom-only") { + canvassplit.collapse(1); + } + break; + case 'B': + document.getElementById("bl-btn").classList.add("depressed"); + if (settings.bomlayout != "bom-only") { + canvassplit.collapse(0); + } + break; + default: + document.getElementById("fb-btn").classList.add("depressed"); + if (settings.bomlayout != "bom-only") { + canvassplit.setSizes([50, 50]); + } + } + settings.canvaslayout = layout; + writeStorage("canvaslayout", layout); + resizeAll(); + changeBomMode(settings.bommode); +} + +function populateMetadata() { + document.getElementById("title").innerHTML = pcbdata.metadata.title; + document.getElementById("revision").innerHTML = "Rev: " + pcbdata.metadata.revision; + document.getElementById("company").innerHTML = pcbdata.metadata.company; + document.getElementById("filedate").innerHTML = pcbdata.metadata.date; + if (pcbdata.metadata.title != "") { + document.title = pcbdata.metadata.title + " BOM"; + } + // Calculate board stats + var fp_f = 0, + fp_b = 0, + pads_f = 0, + pads_b = 0, + pads_th = 0; + for (var i = 0; i < pcbdata.footprints.length; i++) { + if (pcbdata.bom.skipped.includes(i)) continue; + var mod = pcbdata.footprints[i]; + if (mod.layer == "F") { + fp_f++; + } else { + fp_b++; + } + for (var pad of mod.pads) { + if (pad.type == "th") { + pads_th++; + } else { + if (pad.layers.includes("F")) { + pads_f++; + } + if (pad.layers.includes("B")) { + pads_b++; + } + } + } + } + document.getElementById("stats-components-front").innerHTML = fp_f; + document.getElementById("stats-components-back").innerHTML = fp_b; + document.getElementById("stats-components-total").innerHTML = fp_f + fp_b; + document.getElementById("stats-groups-front").innerHTML = pcbdata.bom.F.length; + document.getElementById("stats-groups-back").innerHTML = pcbdata.bom.B.length; + document.getElementById("stats-groups-total").innerHTML = pcbdata.bom.both.length; + document.getElementById("stats-smd-pads-front").innerHTML = pads_f; + document.getElementById("stats-smd-pads-back").innerHTML = pads_b; + document.getElementById("stats-smd-pads-total").innerHTML = pads_f + pads_b; + document.getElementById("stats-th-pads").innerHTML = pads_th; + // Update version string + document.getElementById("github-link").innerHTML = "InteractiveHtmlBom " + + /^v\d+\.\d+/.exec(pcbdata.ibom_version)[0]; +} + +function changeBomLayout(layout) { + document.getElementById("bom-btn").classList.remove("depressed"); + document.getElementById("lr-btn").classList.remove("depressed"); + document.getElementById("tb-btn").classList.remove("depressed"); + switch (layout) { + case 'bom-only': + document.getElementById("bom-btn").classList.add("depressed"); + if (bomsplit) { + bomsplit.destroy(); + bomsplit = null; + canvassplit.destroy(); + canvassplit = null; + } + document.getElementById("frontcanvas").style.display = "none"; + document.getElementById("backcanvas").style.display = "none"; + document.getElementById("topmostdiv").style.height = ""; + document.getElementById("topmostdiv").style.display = "block"; + break; + case 'top-bottom': + document.getElementById("tb-btn").classList.add("depressed"); + document.getElementById("frontcanvas").style.display = ""; + document.getElementById("backcanvas").style.display = ""; + document.getElementById("topmostdiv").style.height = "100%"; + document.getElementById("topmostdiv").style.display = "flex"; + document.getElementById("bomdiv").classList.remove("split-horizontal"); + document.getElementById("canvasdiv").classList.remove("split-horizontal"); + document.getElementById("frontcanvas").classList.add("split-horizontal"); + document.getElementById("backcanvas").classList.add("split-horizontal"); + if (bomsplit) { + bomsplit.destroy(); + bomsplit = null; + canvassplit.destroy(); + canvassplit = null; + } + bomsplit = Split(['#bomdiv', '#canvasdiv'], { + sizes: [50, 50], + onDragEnd: resizeAll, + direction: "vertical", + gutterSize: 5 + }); + canvassplit = Split(['#frontcanvas', '#backcanvas'], { + sizes: [50, 50], + gutterSize: 5, + onDragEnd: resizeAll + }); + break; + case 'left-right': + document.getElementById("lr-btn").classList.add("depressed"); + document.getElementById("frontcanvas").style.display = ""; + document.getElementById("backcanvas").style.display = ""; + document.getElementById("topmostdiv").style.height = "100%"; + document.getElementById("topmostdiv").style.display = "flex"; + document.getElementById("bomdiv").classList.add("split-horizontal"); + document.getElementById("canvasdiv").classList.add("split-horizontal"); + document.getElementById("frontcanvas").classList.remove("split-horizontal"); + document.getElementById("backcanvas").classList.remove("split-horizontal"); + if (bomsplit) { + bomsplit.destroy(); + bomsplit = null; + canvassplit.destroy(); + canvassplit = null; + } + bomsplit = Split(['#bomdiv', '#canvasdiv'], { + sizes: [50, 50], + onDragEnd: resizeAll, + gutterSize: 5 + }); + canvassplit = Split(['#frontcanvas', '#backcanvas'], { + sizes: [50, 50], + gutterSize: 5, + direction: "vertical", + onDragEnd: resizeAll + }); + } + settings.bomlayout = layout; + writeStorage("bomlayout", layout); + changeCanvasLayout(settings.canvaslayout); +} + +function changeBomMode(mode) { + document.getElementById("bom-grouped-btn").classList.remove("depressed"); + document.getElementById("bom-ungrouped-btn").classList.remove("depressed"); + document.getElementById("bom-netlist-btn").classList.remove("depressed"); + var chkbxs = document.getElementsByClassName("visibility_checkbox"); + + switch (mode) { + case 'grouped': + document.getElementById("bom-grouped-btn").classList.add("depressed"); + for (var i = 0; i < chkbxs.length; i++) { + chkbxs[i].disabled = false; + } + break; + case 'ungrouped': + document.getElementById("bom-ungrouped-btn").classList.add("depressed"); + for (var i = 0; i < chkbxs.length; i++) { + chkbxs[i].disabled = false; + } + break; + case 'netlist': + document.getElementById("bom-netlist-btn").classList.add("depressed"); + for (var i = 0; i < chkbxs.length; i++) { + chkbxs[i].disabled = true; + } + } + + writeStorage("bommode", mode); + if (mode != settings.bommode) { + settings.bommode = mode; + bomSortFunction = null; + currentSortColumn = null; + currentSortOrder = null; + clearHighlightedFootprints(); + } + populateBomTable(); +} + +function focusFilterField() { + focusInputField(document.getElementById("filter")); +} + +function focusRefLookupField() { + focusInputField(document.getElementById("reflookup")); +} + +function toggleBomCheckbox(bomrowid, checkboxnum) { + if (!bomrowid || checkboxnum > settings.checkboxes.length) { + return; + } + var bomrow = document.getElementById(bomrowid); + var childNum = checkboxnum + settings.columnOrder.indexOf("checkboxes"); + var checkbox = bomrow.childNodes[childNum].childNodes[0]; + checkbox.checked = !checkbox.checked; + checkbox.indeterminate = false; + checkbox.onchange(); +} + +function checkBomCheckbox(bomrowid, checkboxname) { + var checkboxnum = 0; + while (checkboxnum < settings.checkboxes.length && + settings.checkboxes[checkboxnum].toLowerCase() != checkboxname.toLowerCase()) { + checkboxnum++; + } + if (!bomrowid || checkboxnum >= settings.checkboxes.length) { + return; + } + var bomrow = document.getElementById(bomrowid); + var childNum = checkboxnum + 1 + settings.columnOrder.indexOf("checkboxes"); + var checkbox = bomrow.childNodes[childNum].childNodes[0]; + checkbox.checked = true; + checkbox.indeterminate = false; + checkbox.onchange(); +} + +function setBomCheckboxes(value) { + writeStorage("bomCheckboxes", value); + settings.checkboxes = value.split(",").map((e) => e.trim()).filter((e) => e); + prepCheckboxes(); + populateMarkWhenCheckedOptions(); + setMarkWhenChecked(settings.markWhenChecked); +} + +function setMarkWhenChecked(value) { + writeStorage("markWhenChecked", value); + settings.markWhenChecked = value; + markedFootprints.clear(); + for (var ref of (value ? getStoredCheckboxRefs(value) : [])) { + markedFootprints.add(ref); + } + populateBomTable(); + drawHighlights(); +} + +function prepCheckboxes() { + var table = document.getElementById("checkbox-stats"); + while (table.childElementCount > 1) { + table.removeChild(table.lastChild); + } + if (settings.checkboxes.length) { + table.style.display = ""; + } else { + table.style.display = "none"; + } + for (var checkbox of settings.checkboxes) { + var tr = document.createElement("TR"); + var td = document.createElement("TD"); + td.innerHTML = checkbox; + tr.appendChild(td); + td = document.createElement("TD"); + td.id = "checkbox-stats-" + checkbox; + var progressbar = document.createElement("div"); + progressbar.classList.add("bar"); + td.appendChild(progressbar); + var text = document.createElement("div"); + text.classList.add("text"); + td.appendChild(text); + tr.appendChild(td); + table.appendChild(tr); + updateCheckboxStats(checkbox); + } +} + +function populateMarkWhenCheckedOptions() { + var container = document.getElementById("markWhenCheckedContainer"); + + if (settings.checkboxes.length == 0) { + container.parentElement.style.display = "none"; + return; + } + + container.innerHTML = ''; + container.parentElement.style.display = "inline-block"; + + function createOption(name, displayName) { + var id = "markWhenChecked-" + name; + + var div = document.createElement("div"); + div.classList.add("radio-container"); + + var input = document.createElement("input"); + input.type = "radio"; + input.name = "markWhenChecked"; + input.value = name; + input.id = id; + input.onchange = () => setMarkWhenChecked(name); + div.appendChild(input); + + // Preserve the selected element when the checkboxes change + if (name == settings.markWhenChecked) { + input.checked = true; + } + + var label = document.createElement("label"); + label.innerHTML = displayName; + label.htmlFor = id; + div.appendChild(label); + + container.appendChild(div); + } + createOption("", "None"); + for (var checkbox of settings.checkboxes) { + createOption(checkbox, checkbox); + } +} + +function updateCheckboxStats(checkbox) { + var checked = getStoredCheckboxRefs(checkbox).size; + var total = pcbdata.footprints.length - pcbdata.bom.skipped.length; + var percent = checked * 100.0 / total; + var td = document.getElementById("checkbox-stats-" + checkbox); + td.firstChild.style.width = percent + "%"; + td.lastChild.innerHTML = checked + "/" + total + " (" + Math.round(percent) + "%)"; +} + +function constrain(number, min, max) { + return Math.min(Math.max(parseInt(number), min), max); +} + +document.onkeydown = function (e) { + switch (e.key) { + case "n": + if (document.activeElement.type == "text") { + return; + } + if (currentHighlightedRowId !== null) { + checkBomCheckbox(currentHighlightedRowId, "placed"); + highlightNextRow(); + e.preventDefault(); + } + break; + case "ArrowUp": + highlightPreviousRow(); + e.preventDefault(); + break; + case "ArrowDown": + highlightNextRow(); + e.preventDefault(); + break; + case "ArrowLeft": + case "ArrowRight": + if (document.activeElement.type != "text") { + e.preventDefault(); + let boardRotationElement = document.getElementById("boardRotation") + settings.boardRotation = parseInt(boardRotationElement.value); // degrees / 5 + if (e.key == "ArrowLeft") { + settings.boardRotation += 3; // 15 degrees + } + else { + settings.boardRotation -= 3; + } + settings.boardRotation = constrain(settings.boardRotation, boardRotationElement.min, boardRotationElement.max); + boardRotationElement.value = settings.boardRotation + setBoardRotation(settings.boardRotation); + } + break; + default: + break; + } + if (e.altKey) { + switch (e.key) { + case "f": + focusFilterField(); + e.preventDefault(); + break; + case "r": + focusRefLookupField(); + e.preventDefault(); + break; + case "z": + changeBomLayout("bom-only"); + e.preventDefault(); + break; + case "x": + changeBomLayout("left-right"); + e.preventDefault(); + break; + case "c": + changeBomLayout("top-bottom"); + e.preventDefault(); + break; + case "v": + changeCanvasLayout("F"); + e.preventDefault(); + break; + case "b": + changeCanvasLayout("FB"); + e.preventDefault(); + break; + case "n": + changeCanvasLayout("B"); + e.preventDefault(); + break; + default: + break; + } + if (e.key >= '1' && e.key <= '9') { + toggleBomCheckbox(currentHighlightedRowId, parseInt(e.key)); + e.preventDefault(); + } + } +} + +function hideNetlistButton() { + document.getElementById("bom-ungrouped-btn").classList.remove("middle-button"); + document.getElementById("bom-ungrouped-btn").classList.add("right-most-button"); + document.getElementById("bom-netlist-btn").style.display = "none"; +} + +function topToggle() { + var top = document.getElementById("top"); + var toptoggle = document.getElementById("toptoggle"); + if (top.style.display === "none") { + top.style.display = "flex"; + toptoggle.classList.remove("flipped"); + } else { + top.style.display = "none"; + toptoggle.classList.add("flipped"); + } +} + +window.onload = function (e) { + initUtils(); + initRender(); + initStorage(); + initDefaults(); + cleanGutters(); + populateMetadata(); + dbgdiv = document.getElementById("dbg"); + bom = document.getElementById("bombody"); + bomhead = document.getElementById("bomhead"); + filter = ""; + reflookup = ""; + if (!("nets" in pcbdata)) { + hideNetlistButton(); + } + initDone = true; + setBomCheckboxes(document.getElementById("bomCheckboxes").value); + // Triggers render + changeBomLayout(settings.bomlayout); + + // Users may leave fullscreen without touching the checkbox. Uncheck. + document.addEventListener('fullscreenchange', () => { + if (!document.fullscreenElement) + document.getElementById('fullscreenCheckbox').checked = false; + }); +} + +window.onresize = resizeAll; +window.matchMedia("print").addListener(resizeAll); diff --git a/src/web/lz-string.js b/src/web/lz-string.js new file mode 100644 index 0000000..f558b4a --- /dev/null +++ b/src/web/lz-string.js @@ -0,0 +1,10 @@ +// Copyright (c) 2013 Pieroxy +// This work is free. You can redistribute it and/or modify it +// under the terms of the WTFPL, Version 2 +// For more information see LICENSE.txt or http://www.wtfpl.net/ +// +// For more information, the home page: +// http://pieroxy.net/blog/pages/lz-string/testing.html +// +// LZ-based compression algorithm, version 1.4.4 +var LZString=function(){var o=String.fromCharCode,i={};var n={decompressFromBase64:function(o){return null==o?"":""==o?null:n._decompress(o.length,32,function(n){return function(o,n){if(!i[o]){i[o]={};for(var t=0;t>=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}); \ No newline at end of file diff --git a/src/web/pep.js b/src/web/pep.js new file mode 100644 index 0000000..744f0f4 --- /dev/null +++ b/src/web/pep.js @@ -0,0 +1,43 @@ +/*! + * PEP v0.4.3 | https://github.com/jquery/PEP + * Copyright jQuery Foundation and other contributors | http://jquery.org/license + */ +!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); +for(var d,e=2;e=h}return this.firstXY=null,b}},findTouch:function(a,b){for(var c,d=0,e=a.length;d=b.length){var c=[];R.forEach(function(a,d){ +if(1!==d&&!this.findTouch(b,d-2)){var e=a.out;c.push(e)}},this),c.forEach(this.cancelOut,this)}},touchstart:function(a){this.vacuumTouches(a),this.setPrimaryTouch(a.changedTouches[0]),this.dedupSynthMouse(a),this.scrolling||(this.clickCount++,this.processTouches(a,this.overDown))},overDown:function(a){R.set(a.pointerId,{target:a.target,out:a,outTarget:a.target}),u.enterOver(a),u.down(a)},touchmove:function(a){this.scrolling||(this.shouldScroll(a)?(this.scrolling=!0,this.touchcancel(a)):(a.preventDefault(),this.processTouches(a,this.moveOverOut)))},moveOverOut:function(a){var b=a,c=R.get(b.pointerId); +if(c){var d=c.out,e=c.outTarget;u.move(b),d&&e!==b.target&&(d.relatedTarget=b.target,b.relatedTarget=e, +d.target=e,b.target?(u.leaveOut(d),u.enterOver(b)):( +b.target=e,b.relatedTarget=null,this.cancelOut(b))),c.out=b,c.outTarget=b.target}},touchend:function(a){this.dedupSynthMouse(a),this.processTouches(a,this.upOut)},upOut:function(a){this.scrolling||(u.up(a),u.leaveOut(a)),this.cleanUpPointer(a)},touchcancel:function(a){this.processTouches(a,this.cancelOut)},cancelOut:function(a){u.cancel(a),u.leaveOut(a),this.cleanUpPointer(a)},cleanUpPointer:function(a){R["delete"](a.pointerId),this.removePrimaryPointer(a)}, +dedupSynthMouse:function(a){var b=N.lastTouches,c=a.changedTouches[0]; +if(this.isPrimaryTouch(c)){ +var d={x:c.clientX,y:c.clientY};b.push(d);var e=function(a,b){var c=a.indexOf(b);c>-1&&a.splice(c,1)}.bind(null,b,d);setTimeout(e,S)}}};M=new c(V.elementAdded,V.elementRemoved,V.elementChanged,V);var W,X,Y,Z=u.pointermap,$=window.MSPointerEvent&&"number"==typeof window.MSPointerEvent.MSPOINTER_TYPE_MOUSE,_={events:["MSPointerDown","MSPointerMove","MSPointerUp","MSPointerOut","MSPointerOver","MSPointerCancel","MSGotPointerCapture","MSLostPointerCapture"],register:function(a){u.listen(a,this.events)},unregister:function(a){u.unlisten(a,this.events)},POINTER_TYPES:["","unavailable","touch","pen","mouse"],prepareEvent:function(a){var b=a;return $&&(b=u.cloneEvent(a),b.pointerType=this.POINTER_TYPES[a.pointerType]),b},cleanup:function(a){Z["delete"](a)},MSPointerDown:function(a){Z.set(a.pointerId,a);var b=this.prepareEvent(a);u.down(b)},MSPointerMove:function(a){var b=this.prepareEvent(a);u.move(b)},MSPointerUp:function(a){var b=this.prepareEvent(a);u.up(b),this.cleanup(a.pointerId)},MSPointerOut:function(a){var b=this.prepareEvent(a);u.leaveOut(b)},MSPointerOver:function(a){var b=this.prepareEvent(a);u.enterOver(b)},MSPointerCancel:function(a){var b=this.prepareEvent(a);u.cancel(b),this.cleanup(a.pointerId)},MSLostPointerCapture:function(a){var b=u.makeEvent("lostpointercapture",a);u.dispatchEvent(b)},MSGotPointerCapture:function(a){var b=u.makeEvent("gotpointercapture",a);u.dispatchEvent(b)}},aa=window.navigator;aa.msPointerEnabled?(W=function(a){i(a),j(this),k(a)&&(u.setCapture(a,this,!0),this.msSetPointerCapture(a))},X=function(a){i(a),u.releaseCapture(a,!0),this.msReleasePointerCapture(a)}):(W=function(a){i(a),j(this),k(a)&&u.setCapture(a,this)},X=function(a){i(a),u.releaseCapture(a)}),Y=function(a){return!!u.captureInfo[a]},g(),h(),l();var ba={dispatcher:u,Installer:c,PointerEvent:a,PointerMap:p,targetFinding:v};return ba}); diff --git a/src/web/render.js b/src/web/render.js new file mode 100644 index 0000000..a70653c --- /dev/null +++ b/src/web/render.js @@ -0,0 +1,1075 @@ +/* PCB rendering code */ + +var emptyContext2d = document.createElement("canvas").getContext("2d"); + +function deg2rad(deg) { + return deg * Math.PI / 180; +} + +function calcFontPoint(linepoint, text, offsetx, offsety, tilt) { + var point = [ + linepoint[0] * text.width + offsetx, + linepoint[1] * text.height + offsety + ]; + // This approximates pcbnew behavior with how text tilts depending on horizontal justification + point[0] -= (linepoint[1] + 0.5 * (1 + text.justify[0])) * text.height * tilt; + return point; +} + +function drawText(ctx, text, color) { + if ("ref" in text && !settings.renderReferences) return; + if ("val" in text && !settings.renderValues) return; + ctx.save(); + ctx.fillStyle = color; + ctx.strokeStyle = color; + ctx.lineCap = "round"; + ctx.lineJoin = "round"; + ctx.lineWidth = text.thickness; + if ("svgpath" in text) { + ctx.stroke(new Path2D(text.svgpath)); + ctx.restore(); + return; + } + if ("polygons" in text) { + ctx.fill(getPolygonsPath(text)); + ctx.restore(); + return; + } + ctx.translate(...text.pos); + ctx.translate(text.thickness * 0.5, 0); + var angle = -text.angle; + if (text.attr.includes("mirrored")) { + ctx.scale(-1, 1); + angle = -angle; + } + var tilt = 0; + if (text.attr.includes("italic")) { + tilt = 0.125; + } + var interline = text.height * 1.5 + text.thickness; + var txt = text.text.split("\n"); + // KiCad ignores last empty line. + if (txt[txt.length - 1] == '') txt.pop(); + ctx.rotate(deg2rad(angle)); + var offsety = (1 - text.justify[1]) / 2 * text.height; // One line offset + offsety -= (txt.length - 1) * (text.justify[1] + 1) / 2 * interline; // Multiline offset + for (var i in txt) { + var lineWidth = text.thickness + interline / 2 * tilt; + for (var j = 0; j < txt[i].length; j++) { + if (txt[i][j] == '\t') { + var fourSpaces = 4 * pcbdata.font_data[' '].w * text.width; + lineWidth += fourSpaces - lineWidth % fourSpaces; + } else { + if (txt[i][j] == '~') { + j++; + if (j == txt[i].length) + break; + } + lineWidth += pcbdata.font_data[txt[i][j]].w * text.width; + } + } + var offsetx = -lineWidth * (text.justify[0] + 1) / 2; + var inOverbar = false; + for (var j = 0; j < txt[i].length; j++) { + if (config.kicad_text_formatting) { + if (txt[i][j] == '\t') { + var fourSpaces = 4 * pcbdata.font_data[' '].w * text.width; + offsetx += fourSpaces - offsetx % fourSpaces; + continue; + } else if (txt[i][j] == '~') { + j++; + if (j == txt[i].length) + break; + if (txt[i][j] != '~') { + inOverbar = !inOverbar; + } + } + } + var glyph = pcbdata.font_data[txt[i][j]]; + if (inOverbar) { + var overbarStart = [offsetx, -text.height * 1.4 + offsety]; + var overbarEnd = [offsetx + text.width * glyph.w, overbarStart[1]]; + + if (!lastHadOverbar) { + overbarStart[0] += text.height * 1.4 * tilt; + lastHadOverbar = true; + } + ctx.beginPath(); + ctx.moveTo(...overbarStart); + ctx.lineTo(...overbarEnd); + ctx.stroke(); + } else { + lastHadOverbar = false; + } + for (var line of glyph.l) { + ctx.beginPath(); + ctx.moveTo(...calcFontPoint(line[0], text, offsetx, offsety, tilt)); + for (var k = 1; k < line.length; k++) { + ctx.lineTo(...calcFontPoint(line[k], text, offsetx, offsety, tilt)); + } + ctx.stroke(); + } + offsetx += glyph.w * text.width; + } + offsety += interline; + } + ctx.restore(); +} + +function drawedge(ctx, scalefactor, edge, color) { + ctx.strokeStyle = color; + ctx.fillStyle = color; + ctx.lineWidth = Math.max(1 / scalefactor, edge.width); + ctx.lineCap = "round"; + ctx.lineJoin = "round"; + if ("svgpath" in edge) { + ctx.stroke(new Path2D(edge.svgpath)); + } else { + ctx.beginPath(); + if (edge.type == "segment") { + ctx.moveTo(...edge.start); + ctx.lineTo(...edge.end); + } + if (edge.type == "rect") { + ctx.moveTo(...edge.start); + ctx.lineTo(edge.start[0], edge.end[1]); + ctx.lineTo(...edge.end); + ctx.lineTo(edge.end[0], edge.start[1]); + ctx.lineTo(...edge.start); + } + if (edge.type == "arc") { + ctx.arc( + ...edge.start, + edge.radius, + deg2rad(edge.startangle), + deg2rad(edge.endangle)); + } + if (edge.type == "circle") { + ctx.arc( + ...edge.start, + edge.radius, + 0, 2 * Math.PI); + ctx.closePath(); + } + if (edge.type == "curve") { + ctx.moveTo(...edge.start); + ctx.bezierCurveTo(...edge.cpa, ...edge.cpb, ...edge.end); + } + if("filled" in edge && edge.filled) + ctx.fill(); + else + ctx.stroke(); + } +} + +function getChamferedRectPath(size, radius, chamfpos, chamfratio) { + // chamfpos is a bitmask, left = 1, right = 2, bottom left = 4, bottom right = 8 + var path = new Path2D(); + var width = size[0]; + var height = size[1]; + var x = width * -0.5; + var y = height * -0.5; + var chamfOffset = Math.min(width, height) * chamfratio; + path.moveTo(x, 0); + if (chamfpos & 4) { + path.lineTo(x, y + height - chamfOffset); + path.lineTo(x + chamfOffset, y + height); + path.lineTo(0, y + height); + } else { + path.arcTo(x, y + height, x + width, y + height, radius); + } + if (chamfpos & 8) { + path.lineTo(x + width - chamfOffset, y + height); + path.lineTo(x + width, y + height - chamfOffset); + path.lineTo(x + width, 0); + } else { + path.arcTo(x + width, y + height, x + width, y, radius); + } + if (chamfpos & 2) { + path.lineTo(x + width, y + chamfOffset); + path.lineTo(x + width - chamfOffset, y); + path.lineTo(0, y); + } else { + path.arcTo(x + width, y, x, y, radius); + } + if (chamfpos & 1) { + path.lineTo(x + chamfOffset, y); + path.lineTo(x, y + chamfOffset); + path.lineTo(x, 0); + } else { + path.arcTo(x, y, x, y + height, radius); + } + path.closePath(); + return path; +} + +function getOblongPath(size) { + return getChamferedRectPath(size, Math.min(size[0], size[1]) / 2, 0, 0); +} + +function getPolygonsPath(shape) { + if (shape.path2d) { + return shape.path2d; + } + if ("svgpath" in shape) { + shape.path2d = new Path2D(shape.svgpath); + } else { + var path = new Path2D(); + for (var polygon of shape.polygons) { + path.moveTo(...polygon[0]); + for (var i = 1; i < polygon.length; i++) { + path.lineTo(...polygon[i]); + } + path.closePath(); + } + shape.path2d = path; + } + return shape.path2d; +} + +function drawPolygonShape(ctx, scalefactor, shape, color) { + ctx.save(); + if (!("svgpath" in shape)) { + ctx.translate(...shape.pos); + ctx.rotate(deg2rad(-shape.angle)); + } + if("filled" in shape && !shape.filled) { + ctx.strokeStyle = color; + ctx.lineWidth = Math.max(1 / scalefactor, shape.width); + ctx.lineCap = "round"; + ctx.lineJoin = "round"; + ctx.stroke(getPolygonsPath(shape)); + } else { + ctx.fillStyle = color; + ctx.fill(getPolygonsPath(shape)); + } + ctx.restore(); +} + +function drawDrawing(ctx, scalefactor, drawing, color) { + if (["segment", "arc", "circle", "curve", "rect"].includes(drawing.type)) { + drawedge(ctx, scalefactor, drawing, color); + } else if (drawing.type == "polygon") { + drawPolygonShape(ctx, scalefactor, drawing, color); + } else { + drawText(ctx, drawing, color); + } +} + +function getCirclePath(radius) { + var path = new Path2D(); + path.arc(0, 0, radius, 0, 2 * Math.PI); + path.closePath(); + return path; +} + +function getCachedPadPath(pad) { + if (!pad.path2d) { + // if path2d is not set, build one and cache it on pad object + if (pad.shape == "rect") { + pad.path2d = new Path2D(); + pad.path2d.rect(...pad.size.map(c => -c * 0.5), ...pad.size); + } else if (pad.shape == "oval") { + pad.path2d = getOblongPath(pad.size); + } else if (pad.shape == "circle") { + pad.path2d = getCirclePath(pad.size[0] / 2); + } else if (pad.shape == "roundrect") { + pad.path2d = getChamferedRectPath(pad.size, pad.radius, 0, 0); + } else if (pad.shape == "chamfrect") { + pad.path2d = getChamferedRectPath(pad.size, pad.radius, pad.chamfpos, pad.chamfratio) + } else if (pad.shape == "custom") { + pad.path2d = getPolygonsPath(pad); + } + } + return pad.path2d; +} + +function drawPad(ctx, pad, color, outline) { + ctx.save(); + ctx.translate(...pad.pos); + ctx.rotate(-deg2rad(pad.angle)); + if (pad.offset) { + ctx.translate(...pad.offset); + } + ctx.fillStyle = color; + ctx.strokeStyle = color; + var path = getCachedPadPath(pad); + if (outline) { + ctx.stroke(path); + } else { + ctx.fill(path); + } + ctx.restore(); +} + +function drawPadHole(ctx, pad, padHoleColor) { + if (pad.type != "th") return; + ctx.save(); + ctx.translate(...pad.pos); + ctx.rotate(-deg2rad(pad.angle)); + ctx.fillStyle = padHoleColor; + if (pad.drillshape == "oblong") { + ctx.fill(getOblongPath(pad.drillsize)); + } else { + ctx.fill(getCirclePath(pad.drillsize[0] / 2)); + } + ctx.restore(); +} + +function drawFootprint(ctx, layer, scalefactor, footprint, colors, highlight, outline) { + if (highlight) { + // draw bounding box + if (footprint.layer == layer) { + ctx.save(); + ctx.globalAlpha = 0.2; + ctx.translate(...footprint.bbox.pos); + ctx.rotate(deg2rad(-footprint.bbox.angle)); + ctx.translate(...footprint.bbox.relpos); + ctx.fillStyle = colors.pad; + ctx.fillRect(0, 0, ...footprint.bbox.size); + ctx.globalAlpha = 1; + ctx.strokeStyle = colors.pad; + ctx.lineWidth = 3 / scalefactor; + ctx.strokeRect(0, 0, ...footprint.bbox.size); + ctx.restore(); + } + } + // draw drawings + for (var drawing of footprint.drawings) { + if (drawing.layer == layer) { + drawDrawing(ctx, scalefactor, drawing.drawing, colors.pad); + } + } + ctx.lineWidth = 3 / scalefactor; + // draw pads + if (settings.renderPads) { + for (var pad of footprint.pads) { + if (pad.layers.includes(layer)) { + drawPad(ctx, pad, colors.pad, outline); + if (pad.pin1 && + (settings.highlightpin1 == "all" || + settings.highlightpin1 == "selected" && highlight)) { + drawPad(ctx, pad, colors.outline, true); + } + } + } + for (var pad of footprint.pads) { + drawPadHole(ctx, pad, colors.padHole); + } + } +} + +function drawEdgeCuts(canvas, scalefactor) { + var ctx = canvas.getContext("2d"); + var edgecolor = getComputedStyle(topmostdiv).getPropertyValue('--pcb-edge-color'); + for (var edge of pcbdata.edges) { + drawDrawing(ctx, scalefactor, edge, edgecolor); + } +} + +function drawFootprints(canvas, layer, scalefactor, highlight) { + var ctx = canvas.getContext("2d"); + ctx.lineWidth = 3 / scalefactor; + var style = getComputedStyle(topmostdiv); + + var colors = { + pad: style.getPropertyValue('--pad-color'), + padHole: style.getPropertyValue('--pad-hole-color'), + outline: style.getPropertyValue('--pin1-outline-color'), + } + + for (var i = 0; i < pcbdata.footprints.length; i++) { + var mod = pcbdata.footprints[i]; + var outline = settings.renderDnpOutline && pcbdata.bom.skipped.includes(i); + var h = highlightedFootprints.includes(i); + var d = markedFootprints.has(i); + if (highlight) { + if(h && d) { + colors.pad = style.getPropertyValue('--pad-color-highlight-both'); + colors.outline = style.getPropertyValue('--pin1-outline-color-highlight-both'); + } else if (h) { + colors.pad = style.getPropertyValue('--pad-color-highlight'); + colors.outline = style.getPropertyValue('--pin1-outline-color-highlight'); + } else if (d) { + colors.pad = style.getPropertyValue('--pad-color-highlight-marked'); + colors.outline = style.getPropertyValue('--pin1-outline-color-highlight-marked'); + } + } + if( h || d || !highlight) { + drawFootprint(ctx, layer, scalefactor, mod, colors, highlight, outline); + } + } +} + +function drawBgLayer(layername, canvas, layer, scalefactor, edgeColor, polygonColor, textColor) { + var ctx = canvas.getContext("2d"); + for (var d of pcbdata.drawings[layername][layer]) { + if (["segment", "arc", "circle", "curve", "rect"].includes(d.type)) { + drawedge(ctx, scalefactor, d, edgeColor); + } else if (d.type == "polygon") { + drawPolygonShape(ctx, scalefactor, d, polygonColor); + } else { + drawText(ctx, d, textColor); + } + } +} + +function drawTracks(canvas, layer, defaultColor, highlight) { + ctx = canvas.getContext("2d"); + ctx.lineCap = "round"; + + var hasHole = (track) => ( + 'drillsize' in track && + track.start[0] == track.end[0] && + track.start[1] == track.end[1]); + + // First draw tracks and tented vias + for (var track of pcbdata.tracks[layer]) { + if (highlight && highlightedNet != track.net) continue; + if (!hasHole(track)) { + ctx.strokeStyle = highlight ? defaultColor : settings.netColors[track.net] || defaultColor; + ctx.lineWidth = track.width; + ctx.beginPath(); + if ('radius' in track) { + ctx.arc( + ...track.center, + track.radius, + deg2rad(track.startangle), + deg2rad(track.endangle)); + } else { + ctx.moveTo(...track.start); + ctx.lineTo(...track.end); + } + ctx.stroke(); + } + } + // Second pass to draw untented vias + var style = getComputedStyle(topmostdiv); + var holeColor = style.getPropertyValue('--pad-hole-color') + + for (var track of pcbdata.tracks[layer]) { + if (highlight && highlightedNet != track.net) continue; + if (hasHole(track)) { + ctx.strokeStyle = highlight ? defaultColor : settings.netColors[track.net] || defaultColor; + ctx.lineWidth = track.width; + ctx.beginPath(); + ctx.moveTo(...track.start); + ctx.lineTo(...track.end); + ctx.stroke(); + ctx.strokeStyle = holeColor; + ctx.lineWidth = track.drillsize; + ctx.lineTo(...track.end); + ctx.stroke(); + } + } +} + +function drawZones(canvas, layer, defaultColor, highlight) { + ctx = canvas.getContext("2d"); + ctx.lineJoin = "round"; + for (var zone of pcbdata.zones[layer]) { + if (highlight && highlightedNet != zone.net) continue; + ctx.strokeStyle = highlight ? defaultColor : settings.netColors[zone.net] || defaultColor; + ctx.fillStyle = highlight ? defaultColor : settings.netColors[zone.net] || defaultColor; + if (!zone.path2d) { + zone.path2d = getPolygonsPath(zone); + } + ctx.fill(zone.path2d, zone.fillrule || "nonzero"); + if (zone.width > 0) { + ctx.lineWidth = zone.width; + ctx.stroke(zone.path2d); + } + } +} + +function clearCanvas(canvas, color = null) { + var ctx = canvas.getContext("2d"); + ctx.save(); + ctx.setTransform(1, 0, 0, 1, 0, 0); + if (color) { + ctx.fillStyle = color; + ctx.fillRect(0, 0, canvas.width, canvas.height); + } else { + if (!window.matchMedia("print").matches) + ctx.clearRect(0, 0, canvas.width, canvas.height); + } + ctx.restore(); +} + +function drawNets(canvas, layer, highlight) { + var style = getComputedStyle(topmostdiv); + if (settings.renderZones) { + var zoneColor = style.getPropertyValue(highlight ? '--zone-color-highlight' : '--zone-color'); + drawZones(canvas, layer, zoneColor, highlight); + } + if (settings.renderTracks) { + var trackColor = style.getPropertyValue(highlight ? '--track-color-highlight' : '--track-color'); + drawTracks(canvas, layer, trackColor, highlight); + } + if (highlight && settings.renderPads) { + var padColor = style.getPropertyValue('--pad-color-highlight'); + var padHoleColor = style.getPropertyValue('--pad-hole-color'); + var ctx = canvas.getContext("2d"); + for (var footprint of pcbdata.footprints) { + // draw pads + var padDrawn = false; + for (var pad of footprint.pads) { + if (highlightedNet != pad.net) continue; + if (pad.layers.includes(layer)) { + drawPad(ctx, pad, padColor, false); + padDrawn = true; + } + } + if (padDrawn) { + // redraw all pad holes because some pads may overlap + for (var pad of footprint.pads) { + drawPadHole(ctx, pad, padHoleColor); + } + } + } + } +} + +function drawHighlightsOnLayer(canvasdict, clear = true) { + if (clear) { + clearCanvas(canvasdict.highlight); + } + if (markedFootprints.size > 0 || highlightedFootprints.length > 0) { + drawFootprints(canvasdict.highlight, canvasdict.layer, + canvasdict.transform.s * canvasdict.transform.zoom, true); + } + if (highlightedNet !== null) { + drawNets(canvasdict.highlight, canvasdict.layer, true); + } +} + +function drawHighlights() { + drawHighlightsOnLayer(allcanvas.front); + drawHighlightsOnLayer(allcanvas.back); +} + +function drawBackground(canvasdict, clear = true) { + if (clear) { + clearCanvas(canvasdict.bg); + clearCanvas(canvasdict.fab); + clearCanvas(canvasdict.silk); + } + + drawNets(canvasdict.bg, canvasdict.layer, false); + drawFootprints(canvasdict.bg, canvasdict.layer, + canvasdict.transform.s * canvasdict.transform.zoom, false); + + drawEdgeCuts(canvasdict.bg, canvasdict.transform.s * canvasdict.transform.zoom); + + var style = getComputedStyle(topmostdiv); + var edgeColor = style.getPropertyValue('--silkscreen-edge-color'); + var polygonColor = style.getPropertyValue('--silkscreen-polygon-color'); + var textColor = style.getPropertyValue('--silkscreen-text-color'); + if (settings.renderSilkscreen) { + drawBgLayer( + "silkscreen", canvasdict.silk, canvasdict.layer, + canvasdict.transform.s * canvasdict.transform.zoom, + edgeColor, polygonColor, textColor); + } + edgeColor = style.getPropertyValue('--fabrication-edge-color'); + polygonColor = style.getPropertyValue('--fabrication-polygon-color'); + textColor = style.getPropertyValue('--fabrication-text-color'); + if (settings.renderFabrication) { + drawBgLayer( + "fabrication", canvasdict.fab, canvasdict.layer, + canvasdict.transform.s * canvasdict.transform.zoom, + edgeColor, polygonColor, textColor); + } +} + +function prepareCanvas(canvas, flip, transform) { + var ctx = canvas.getContext("2d"); + ctx.setTransform(1, 0, 0, 1, 0, 0); + ctx.scale(transform.zoom, transform.zoom); + ctx.translate(transform.panx, transform.pany); + if (flip) { + ctx.scale(-1, 1); + } + ctx.translate(transform.x, transform.y); + ctx.rotate(deg2rad(settings.boardRotation + (flip && settings.offsetBackRotation ? - 180 : 0))); + ctx.scale(transform.s, transform.s); +} + +function prepareLayer(canvasdict) { + var flip = (canvasdict.layer === "B"); + for (var c of ["bg", "fab", "silk", "highlight"]) { + prepareCanvas(canvasdict[c], flip, canvasdict.transform); + } +} + +function rotateVector(v, angle) { + angle = deg2rad(angle); + return [ + v[0] * Math.cos(angle) - v[1] * Math.sin(angle), + v[0] * Math.sin(angle) + v[1] * Math.cos(angle) + ]; +} + +function applyRotation(bbox, flip) { + var corners = [ + [bbox.minx, bbox.miny], + [bbox.minx, bbox.maxy], + [bbox.maxx, bbox.miny], + [bbox.maxx, bbox.maxy], + ]; + corners = corners.map((v) => rotateVector(v, settings.boardRotation + (flip && settings.offsetBackRotation ? - 180 : 0))); + return { + minx: corners.reduce((a, v) => Math.min(a, v[0]), Infinity), + miny: corners.reduce((a, v) => Math.min(a, v[1]), Infinity), + maxx: corners.reduce((a, v) => Math.max(a, v[0]), -Infinity), + maxy: corners.reduce((a, v) => Math.max(a, v[1]), -Infinity), + } +} + +function recalcLayerScale(layerdict, width, height) { + var flip = (layerdict.layer === "B"); + var bbox = applyRotation(pcbdata.edges_bbox, flip); + var scalefactor = 0.98 * Math.min( + width / (bbox.maxx - bbox.minx), + height / (bbox.maxy - bbox.miny) + ); + if (scalefactor < 0.1) { + scalefactor = 1; + } + layerdict.transform.s = scalefactor; + if (flip) { + layerdict.transform.x = -((bbox.maxx + bbox.minx) * scalefactor + width) * 0.5; + } else { + layerdict.transform.x = -((bbox.maxx + bbox.minx) * scalefactor - width) * 0.5; + } + layerdict.transform.y = -((bbox.maxy + bbox.miny) * scalefactor - height) * 0.5; + for (var c of ["bg", "fab", "silk", "highlight"]) { + canvas = layerdict[c]; + canvas.width = width; + canvas.height = height; + canvas.style.width = (width / devicePixelRatio) + "px"; + canvas.style.height = (height / devicePixelRatio) + "px"; + } +} + +function redrawCanvas(layerdict) { + prepareLayer(layerdict); + drawBackground(layerdict); + drawHighlightsOnLayer(layerdict); +} + +function resizeCanvas(layerdict) { + var canvasdivid = { + "F": "frontcanvas", + "B": "backcanvas" + } [layerdict.layer]; + var width = document.getElementById(canvasdivid).clientWidth * devicePixelRatio; + var height = document.getElementById(canvasdivid).clientHeight * devicePixelRatio; + recalcLayerScale(layerdict, width, height); + redrawCanvas(layerdict); +} + +function resizeAll() { + resizeCanvas(allcanvas.front); + resizeCanvas(allcanvas.back); +} + +function pointWithinDistanceToSegment(x, y, x1, y1, x2, y2, d) { + var A = x - x1; + var B = y - y1; + var C = x2 - x1; + var D = y2 - y1; + + var dot = A * C + B * D; + var len_sq = C * C + D * D; + var dx, dy; + if (len_sq == 0) { + // start and end of the segment coincide + dx = x - x1; + dy = y - y1; + } else { + var param = dot / len_sq; + var xx, yy; + if (param < 0) { + xx = x1; + yy = y1; + } else if (param > 1) { + xx = x2; + yy = y2; + } else { + xx = x1 + param * C; + yy = y1 + param * D; + } + dx = x - xx; + dy = y - yy; + } + return dx * dx + dy * dy <= d * d; +} + +function modulo(n, mod) { + return ((n % mod) + mod) % mod; +} + +function pointWithinDistanceToArc(x, y, xc, yc, radius, startangle, endangle, d) { + var dx = x - xc; + var dy = y - yc; + var r_sq = dx * dx + dy * dy; + var rmin = Math.max(0, radius - d); + var rmax = radius + d; + + if (r_sq < rmin * rmin || r_sq > rmax * rmax) + return false; + + var angle1 = modulo(deg2rad(startangle), 2 * Math.PI); + var dx1 = xc + radius * Math.cos(angle1) - x; + var dy1 = yc + radius * Math.sin(angle1) - y; + if (dx1 * dx1 + dy1 * dy1 <= d * d) + return true; + + var angle2 = modulo(deg2rad(endangle), 2 * Math.PI); + var dx2 = xc + radius * Math.cos(angle2) - x; + var dy2 = yc + radius * Math.sin(angle2) - y; + if (dx2 * dx2 + dy2 * dy2 <= d * d) + return true; + + var angle = modulo(Math.atan2(dy, dx), 2 * Math.PI); + if (angle1 > angle2) + return (angle >= angle2 || angle <= angle1); + else + return (angle >= angle1 && angle <= angle2); +} + +function pointWithinPad(x, y, pad) { + var v = [x - pad.pos[0], y - pad.pos[1]]; + v = rotateVector(v, pad.angle); + if (pad.offset) { + v[0] -= pad.offset[0]; + v[1] -= pad.offset[1]; + } + return emptyContext2d.isPointInPath(getCachedPadPath(pad), ...v); +} + +function netHitScan(layer, x, y) { + // Check track segments + if (settings.renderTracks && pcbdata.tracks) { + for (var track of pcbdata.tracks[layer]) { + if ('radius' in track) { + if (pointWithinDistanceToArc(x, y, ...track.center, track.radius, track.startangle, track.endangle, track.width / 2)) { + return track.net; + } + } else { + if (pointWithinDistanceToSegment(x, y, ...track.start, ...track.end, track.width / 2)) { + return track.net; + } + } + } + } + // Check pads + if (settings.renderPads) { + for (var footprint of pcbdata.footprints) { + for (var pad of footprint.pads) { + if (pad.layers.includes(layer) && pointWithinPad(x, y, pad)) { + return pad.net; + } + } + } + } + return null; +} + +function pointWithinFootprintBbox(x, y, bbox) { + var v = [x - bbox.pos[0], y - bbox.pos[1]]; + v = rotateVector(v, bbox.angle); + return bbox.relpos[0] <= v[0] && v[0] <= bbox.relpos[0] + bbox.size[0] && + bbox.relpos[1] <= v[1] && v[1] <= bbox.relpos[1] + bbox.size[1]; +} + +function bboxHitScan(layer, x, y) { + var result = []; + for (var i = 0; i < pcbdata.footprints.length; i++) { + var footprint = pcbdata.footprints[i]; + if (footprint.layer == layer) { + if (pointWithinFootprintBbox(x, y, footprint.bbox)) { + result.push(i); + } + } + } + return result; +} + +function handlePointerDown(e, layerdict) { + if (e.button != 0 && e.button != 1) { + return; + } + e.preventDefault(); + e.stopPropagation(); + + if (!e.hasOwnProperty("offsetX")) { + // The polyfill doesn't set this properly + e.offsetX = e.pageX - e.currentTarget.offsetLeft; + e.offsetY = e.pageY - e.currentTarget.offsetTop; + } + + layerdict.pointerStates[e.pointerId] = { + distanceTravelled: 0, + lastX: e.offsetX, + lastY: e.offsetY, + downTime: Date.now(), + }; +} + +function handleMouseClick(e, layerdict) { + if (!e.hasOwnProperty("offsetX")) { + // The polyfill doesn't set this properly + e.offsetX = e.pageX - e.currentTarget.offsetLeft; + e.offsetY = e.pageY - e.currentTarget.offsetTop; + } + + var x = e.offsetX; + var y = e.offsetY; + var t = layerdict.transform; + var flip = layerdict.layer === "B"; + if (flip) { + x = (devicePixelRatio * x / t.zoom - t.panx + t.x) / -t.s; + } else { + x = (devicePixelRatio * x / t.zoom - t.panx - t.x) / t.s; + } + y = (devicePixelRatio * y / t.zoom - t.y - t.pany) / t.s; + var v = rotateVector([x, y], -settings.boardRotation + (flip && settings.offsetBackRotation ? - 180 : 0)); + if ("nets" in pcbdata) { + var net = netHitScan(layerdict.layer, ...v); + if (net !== highlightedNet) { + netClicked(net); + } + } + if (highlightedNet === null) { + var footprints = bboxHitScan(layerdict.layer, ...v); + if (footprints.length > 0) { + footprintsClicked(footprints); + } + } +} + +function handlePointerLeave(e, layerdict) { + e.preventDefault(); + e.stopPropagation(); + + if (!settings.redrawOnDrag) { + redrawCanvas(layerdict); + } + + delete layerdict.pointerStates[e.pointerId]; +} + +function resetTransform(layerdict) { + layerdict.transform.panx = 0; + layerdict.transform.pany = 0; + layerdict.transform.zoom = 1; + redrawCanvas(layerdict); +} + +function handlePointerUp(e, layerdict) { + if (!e.hasOwnProperty("offsetX")) { + // The polyfill doesn't set this properly + e.offsetX = e.pageX - e.currentTarget.offsetLeft; + e.offsetY = e.pageY - e.currentTarget.offsetTop; + } + + e.preventDefault(); + e.stopPropagation(); + + if (e.button == 2) { + // Reset pan and zoom on right click. + resetTransform(layerdict); + layerdict.anotherPointerTapped = false; + return; + } + + // We haven't necessarily had a pointermove event since the interaction started, so make sure we update this now + var ptr = layerdict.pointerStates[e.pointerId]; + ptr.distanceTravelled += Math.abs(e.offsetX - ptr.lastX) + Math.abs(e.offsetY - ptr.lastY); + + if (e.button == 0 && ptr.distanceTravelled < 10 && Date.now() - ptr.downTime <= 500) { + if (Object.keys(layerdict.pointerStates).length == 1) { + if (layerdict.anotherPointerTapped) { + // This is the second pointer coming off of a two-finger tap + resetTransform(layerdict); + } else { + // This is just a regular tap + handleMouseClick(e, layerdict); + } + layerdict.anotherPointerTapped = false; + } else { + // This is the first finger coming off of what could become a two-finger tap + layerdict.anotherPointerTapped = true; + } + } else { + if (!settings.redrawOnDrag) { + redrawCanvas(layerdict); + } + layerdict.anotherPointerTapped = false; + } + + delete layerdict.pointerStates[e.pointerId]; +} + +function handlePointerMove(e, layerdict) { + if (!layerdict.pointerStates.hasOwnProperty(e.pointerId)) { + return; + } + e.preventDefault(); + e.stopPropagation(); + + if (!e.hasOwnProperty("offsetX")) { + // The polyfill doesn't set this properly + e.offsetX = e.pageX - e.currentTarget.offsetLeft; + e.offsetY = e.pageY - e.currentTarget.offsetTop; + } + + var thisPtr = layerdict.pointerStates[e.pointerId]; + + var dx = e.offsetX - thisPtr.lastX; + var dy = e.offsetY - thisPtr.lastY; + + // If this number is low on pointer up, we count the action as a click + thisPtr.distanceTravelled += Math.abs(dx) + Math.abs(dy); + + if (Object.keys(layerdict.pointerStates).length == 1) { + // This is a simple drag + layerdict.transform.panx += devicePixelRatio * dx / layerdict.transform.zoom; + layerdict.transform.pany += devicePixelRatio * dy / layerdict.transform.zoom; + } else if (Object.keys(layerdict.pointerStates).length == 2) { + var otherPtr = Object.values(layerdict.pointerStates).filter((ptr) => ptr != thisPtr)[0]; + + var oldDist = Math.sqrt(Math.pow(thisPtr.lastX - otherPtr.lastX, 2) + Math.pow(thisPtr.lastY - otherPtr.lastY, 2)); + var newDist = Math.sqrt(Math.pow(e.offsetX - otherPtr.lastX, 2) + Math.pow(e.offsetY - otherPtr.lastY, 2)); + + var scaleFactor = newDist / oldDist; + + if (scaleFactor != NaN) { + layerdict.transform.zoom *= scaleFactor; + + var zoomd = (1 - scaleFactor) / layerdict.transform.zoom; + layerdict.transform.panx += devicePixelRatio * otherPtr.lastX * zoomd; + layerdict.transform.pany += devicePixelRatio * otherPtr.lastY * zoomd; + } + } + + thisPtr.lastX = e.offsetX; + thisPtr.lastY = e.offsetY; + + if (settings.redrawOnDrag) { + redrawCanvas(layerdict); + } +} + +function handleMouseWheel(e, layerdict) { + e.preventDefault(); + e.stopPropagation(); + var t = layerdict.transform; + var wheeldelta = e.deltaY; + if (e.deltaMode == 1) { + // FF only, scroll by lines + wheeldelta *= 30; + } else if (e.deltaMode == 2) { + wheeldelta *= 300; + } + var m = Math.pow(1.1, -wheeldelta / 40); + // Limit amount of zoom per tick. + if (m > 2) { + m = 2; + } else if (m < 0.5) { + m = 0.5; + } + t.zoom *= m; + var zoomd = (1 - m) / t.zoom; + t.panx += devicePixelRatio * e.offsetX * zoomd; + t.pany += devicePixelRatio * e.offsetY * zoomd; + redrawCanvas(layerdict); +} + +function addMouseHandlers(div, layerdict) { + div.addEventListener("pointerdown", function(e) { + handlePointerDown(e, layerdict); + }); + div.addEventListener("pointermove", function(e) { + handlePointerMove(e, layerdict); + }); + div.addEventListener("pointerup", function(e) { + handlePointerUp(e, layerdict); + }); + var pointerleave = function(e) { + handlePointerLeave(e, layerdict); + } + div.addEventListener("pointercancel", pointerleave); + div.addEventListener("pointerleave", pointerleave); + div.addEventListener("pointerout", pointerleave); + + div.onwheel = function(e) { + handleMouseWheel(e, layerdict); + } + for (var element of [div, layerdict.bg, layerdict.fab, layerdict.silk, layerdict.highlight]) { + element.addEventListener("contextmenu", function(e) { + e.preventDefault(); + }, false); + } +} + +function setRedrawOnDrag(value) { + settings.redrawOnDrag = value; + writeStorage("redrawOnDrag", value); +} + +function setBoardRotation(value) { + settings.boardRotation = value * 5; + writeStorage("boardRotation", settings.boardRotation); + document.getElementById("rotationDegree").textContent = settings.boardRotation; + resizeAll(); +} + +function setOffsetBackRotation(value) { + settings.offsetBackRotation = value; + writeStorage("offsetBackRotation", value); + resizeAll(); +} + +function initRender() { + allcanvas = { + front: { + transform: { + x: 0, + y: 0, + s: 1, + panx: 0, + pany: 0, + zoom: 1, + }, + pointerStates: {}, + anotherPointerTapped: false, + bg: document.getElementById("F_bg"), + fab: document.getElementById("F_fab"), + silk: document.getElementById("F_slk"), + highlight: document.getElementById("F_hl"), + layer: "F", + }, + back: { + transform: { + x: 0, + y: 0, + s: 1, + panx: 0, + pany: 0, + zoom: 1, + }, + pointerStates: {}, + anotherPointerTapped: false, + bg: document.getElementById("B_bg"), + fab: document.getElementById("B_fab"), + silk: document.getElementById("B_slk"), + highlight: document.getElementById("B_hl"), + layer: "B", + } + }; + addMouseHandlers(document.getElementById("frontcanvas"), allcanvas.front); + addMouseHandlers(document.getElementById("backcanvas"), allcanvas.back); +} diff --git a/src/web/split.js b/src/web/split.js new file mode 100644 index 0000000..37fd5d7 --- /dev/null +++ b/src/web/split.js @@ -0,0 +1,6 @@ +/* + Split.js - v1.3.5 + MIT License + https://github.com/nathancahill/Split.js +*/ +!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 f0&&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}}}); diff --git a/src/web/table-util.js b/src/web/table-util.js new file mode 100644 index 0000000..00e23f8 --- /dev/null +++ b/src/web/table-util.js @@ -0,0 +1,371 @@ +/* + * Table reordering via Drag'n'Drop + * Inspired by: https://htmldom.dev/drag-and-drop-table-column + */ + +function setBomHandlers() { + + const bom = document.getElementById('bomtable'); + + let dragName; + let placeHolderElements; + let draggingElement; + let forcePopulation; + let xOffset; + let yOffset; + let wasDragged; + + const mouseUpHandler = function(e) { + // Delete dragging element + draggingElement.remove(); + + // Make BOM selectable again + bom.style.removeProperty("userSelect"); + + // Remove listeners + document.removeEventListener('mousemove', mouseMoveHandler); + document.removeEventListener('mouseup', mouseUpHandler); + + if (wasDragged) { + // Redraw whole BOM + populateBomTable(); + } + } + + const mouseMoveHandler = function(e) { + // Notice the dragging + wasDragged = true; + + // Make the dragged element visible + draggingElement.style.removeProperty("display"); + + // Set elements position to mouse position + draggingElement.style.left = `${e.screenX - xOffset}px`; + draggingElement.style.top = `${e.screenY - yOffset}px`; + + // Forced redrawing of BOM table + if (forcePopulation) { + forcePopulation = false; + // Copy array + phe = Array.from(placeHolderElements); + // populate BOM table again + populateBomHeader(dragName, phe); + populateBomBody(dragName, phe); + } + + // Set up array of hidden columns + var hiddenColumns = Array.from(settings.hiddenColumns); + // In the ungrouped mode, quantity don't exist + if (settings.bommode === "ungrouped") + hiddenColumns.push("Quantity"); + // If no checkbox fields can be found, we consider them hidden + if (settings.checkboxes.length == 0) + hiddenColumns.push("checkboxes"); + + // Get table headers and group them into checkboxes, extrafields and normal headers + const bh = document.getElementById("bomhead"); + headers = Array.from(bh.querySelectorAll("th")) + headers.shift() // numCol is not part of the columnOrder + headerGroups = [] + lastCompoundClass = null; + for (i = 0; i < settings.columnOrder.length; i++) { + cElem = settings.columnOrder[i]; + if (hiddenColumns.includes(cElem)) { + // Hidden columns appear as a dummy element + headerGroups.push([]); + continue; + } + elem = headers.filter(e => getColumnOrderName(e) === cElem)[0]; + if (elem.classList.contains("bom-checkbox")) { + if (lastCompoundClass === "bom-checkbox") { + cbGroup = headerGroups.pop(); + cbGroup.push(elem); + headerGroups.push(cbGroup); + } else { + lastCompoundClass = "bom-checkbox"; + headerGroups.push([elem]) + } + } else { + headerGroups.push([elem]) + } + } + + // Copy settings.columnOrder + var columns = Array.from(settings.columnOrder) + + // Set up array with indices of hidden columns + var hiddenIndices = hiddenColumns.map(e => settings.columnOrder.indexOf(e)); + var dragIndex = columns.indexOf(dragName); + var swapIndex = dragIndex; + var swapDone = false; + + // Check if the current dragged element is swapable with the left or right element + if (dragIndex > 0) { + // Get left headers boundingbox + swapIndex = dragIndex - 1; + while (hiddenIndices.includes(swapIndex) && swapIndex > 0) + swapIndex--; + if (!hiddenIndices.includes(swapIndex)) { + box = getBoundingClientRectFromMultiple(headerGroups[swapIndex]); + if (e.clientX < box.left + window.scrollX + (box.width / 2)) { + swapElement = columns[dragIndex]; + columns.splice(dragIndex, 1); + columns.splice(swapIndex, 0, swapElement); + forcePopulation = true; + swapDone = true; + } + } + } + if ((!swapDone) && dragIndex < headerGroups.length - 1) { + // Get right headers boundingbox + swapIndex = dragIndex + 1; + while (hiddenIndices.includes(swapIndex)) + swapIndex++; + if (swapIndex < headerGroups.length) { + box = getBoundingClientRectFromMultiple(headerGroups[swapIndex]); + if (e.clientX > box.left + window.scrollX + (box.width / 2)) { + swapElement = columns[dragIndex]; + columns.splice(dragIndex, 1); + columns.splice(swapIndex, 0, swapElement); + forcePopulation = true; + swapDone = true; + } + } + } + + // Write back change to storage + if (swapDone) { + settings.columnOrder = columns + writeStorage("columnOrder", JSON.stringify(columns)); + } + + } + + const mouseDownHandler = function(e) { + var target = e.target; + if (target.tagName.toLowerCase() != "td") + target = target.parentElement; + + // Used to check if a dragging has ever happened + wasDragged = false; + + // Create new element which will be displayed as the dragged column + draggingElement = document.createElement("div") + draggingElement.classList.add("dragging"); + draggingElement.style.display = "none"; + draggingElement.style.position = "absolute"; + draggingElement.style.overflow = "hidden"; + + // Get bomhead and bombody elements + const bh = document.getElementById("bomhead"); + const bb = document.getElementById("bombody"); + + // Get all compound headers for the current column + var compoundHeaders; + if (target.classList.contains("bom-checkbox")) { + compoundHeaders = Array.from(bh.querySelectorAll("th.bom-checkbox")); + } else { + compoundHeaders = [target]; + } + + // Create new table which will display the column + var newTable = document.createElement("table"); + newTable.classList.add("bom"); + newTable.style.background = "white"; + draggingElement.append(newTable); + + // Create new header element + var newHeader = document.createElement("thead"); + newTable.append(newHeader); + + // Set up array for storing all placeholder elements + placeHolderElements = []; + + // Add all compound headers to the new thead element and placeholders + compoundHeaders.forEach(function(h) { + clone = cloneElementWithDimensions(h); + newHeader.append(clone); + placeHolderElements.push(clone); + }); + + // Create new body element + var newBody = document.createElement("tbody"); + newTable.append(newBody); + + // Get indices for compound headers + var idxs = compoundHeaders.map(e => getBomTableHeaderIndex(e)); + + // For each row in the BOM body... + var rows = bb.querySelectorAll("tr"); + rows.forEach(function(row) { + // ..get the cells for the compound column + const tds = row.querySelectorAll("td"); + var copytds = idxs.map(i => tds[i]); + // Add them to the new element and the placeholders + var newRow = document.createElement("tr"); + copytds.forEach(function(td) { + clone = cloneElementWithDimensions(td); + newRow.append(clone); + placeHolderElements.push(clone); + }); + newBody.append(newRow); + }); + + // Compute width for compound header + var width = compoundHeaders.reduce((acc, x) => acc + x.clientWidth, 0); + draggingElement.style.width = `${width}px`; + + // Insert the new dragging element and disable selection on BOM + bom.insertBefore(draggingElement, null); + bom.style.userSelect = "none"; + + // Determine the mouse position offset + xOffset = e.screenX - compoundHeaders.reduce((acc, x) => Math.min(acc, x.offsetLeft), compoundHeaders[0].offsetLeft); + yOffset = e.screenY - compoundHeaders[0].offsetTop; + + // Get name for the column in settings.columnOrder + dragName = getColumnOrderName(target); + + // Change text and class for placeholder elements + placeHolderElements = placeHolderElements.map(function(e) { + newElem = cloneElementWithDimensions(e); + newElem.textContent = ""; + newElem.classList.add("placeholder"); + return newElem; + }); + + // On next mouse move, the whole BOM needs to be redrawn to show the placeholders + forcePopulation = true; + + // Add listeners for move and up on mouse + document.addEventListener('mousemove', mouseMoveHandler); + document.addEventListener('mouseup', mouseUpHandler); + } + + // In netlist mode, there is nothing to reorder + if (settings.bommode === "netlist") + return; + + // Add mouseDownHandler to every column except the numCol + bom.querySelectorAll("th") + .forEach(function(head) { + if (!head.classList.contains("numCol")) { + head.onmousedown = mouseDownHandler; + } + }); + +} + +function getBoundingClientRectFromMultiple(elements) { + var elems = Array.from(elements); + + if (elems.length == 0) + return null; + + var box = elems.shift() + .getBoundingClientRect(); + + elems.forEach(function(elem) { + var elembox = elem.getBoundingClientRect(); + box.left = Math.min(elembox.left, box.left); + box.top = Math.min(elembox.top, box.top); + box.width += elembox.width; + box.height = Math.max(elembox.height, box.height); + }); + + return box; +} + +function cloneElementWithDimensions(elem) { + var newElem = elem.cloneNode(true); + newElem.style.height = window.getComputedStyle(elem).height; + newElem.style.width = window.getComputedStyle(elem).width; + return newElem; +} + +function getBomTableHeaderIndex(elem) { + const bh = document.getElementById('bomhead'); + const ths = Array.from(bh.querySelectorAll("th")); + return ths.indexOf(elem); +} + +function getColumnOrderName(elem) { + var cname = elem.getAttribute("col_name"); + if (cname === "bom-checkbox") + return "checkboxes"; + else + return cname; +} + +function resizableGrid(tablehead) { + var cols = tablehead.firstElementChild.children; + var rowWidth = tablehead.offsetWidth; + + for (var i = 1; i < cols.length; i++) { + if (cols[i].classList.contains("bom-checkbox")) + continue; + cols[i].style.width = ((cols[i].clientWidth - paddingDiff(cols[i])) * 100 / rowWidth) + '%'; + } + + for (var i = 1; i < cols.length - 1; i++) { + var div = document.createElement('div'); + div.className = "column-width-handle"; + cols[i].appendChild(div); + setListeners(div); + } + + function setListeners(div) { + var startX, curCol, nxtCol, curColWidth, nxtColWidth, rowWidth; + + div.addEventListener('mousedown', function(e) { + e.preventDefault(); + e.stopPropagation(); + + curCol = e.target.parentElement; + nxtCol = curCol.nextElementSibling; + startX = e.pageX; + + var padding = paddingDiff(curCol); + + rowWidth = curCol.parentElement.offsetWidth; + curColWidth = curCol.clientWidth - padding; + nxtColWidth = nxtCol.clientWidth - padding; + }); + + document.addEventListener('mousemove', function(e) { + if (startX) { + var diffX = e.pageX - startX; + diffX = -Math.min(-diffX, curColWidth - 20); + diffX = Math.min(diffX, nxtColWidth - 20); + + curCol.style.width = ((curColWidth + diffX) * 100 / rowWidth) + '%'; + nxtCol.style.width = ((nxtColWidth - diffX) * 100 / rowWidth) + '%'; + console.log(`${curColWidth + nxtColWidth} ${(curColWidth + diffX) * 100 / rowWidth + (nxtColWidth - diffX) * 100 / rowWidth}`); + } + }); + + document.addEventListener('mouseup', function(e) { + curCol = undefined; + nxtCol = undefined; + startX = undefined; + nxtColWidth = undefined; + curColWidth = undefined + }); + } + + function paddingDiff(col) { + + if (getStyleVal(col, 'box-sizing') == 'border-box') { + return 0; + } + + var padLeft = getStyleVal(col, 'padding-left'); + var padRight = getStyleVal(col, 'padding-right'); + return (parseInt(padLeft) + parseInt(padRight)); + + } + + function getStyleVal(elm, css) { + return (window.getComputedStyle(elm, null).getPropertyValue(css)) + } +} diff --git a/src/web/util.js b/src/web/util.js new file mode 100644 index 0000000..3071d2d --- /dev/null +++ b/src/web/util.js @@ -0,0 +1,642 @@ +/* Utility functions */ + +var storagePrefix = 'KiCad_HTML_BOM__' + pcbdata.metadata.title + '__' + + pcbdata.metadata.revision + '__#'; +var storage; + +function initStorage(key) { + try { + window.localStorage.getItem("blank"); + storage = window.localStorage; + } catch (e) { + // localStorage not available + } + if (!storage) { + try { + window.sessionStorage.getItem("blank"); + storage = window.sessionStorage; + } catch (e) { + // sessionStorage also not available + } + } +} + +function readStorage(key) { + if (storage) { + return storage.getItem(storagePrefix + key); + } else { + return null; + } +} + +function writeStorage(key, value) { + if (storage) { + storage.setItem(storagePrefix + key, value); + } +} + +function fancyDblClickHandler(el, onsingle, ondouble) { + return function () { + if (el.getAttribute("data-dblclick") == null) { + el.setAttribute("data-dblclick", 1); + setTimeout(function () { + if (el.getAttribute("data-dblclick") == 1) { + onsingle(); + } + el.removeAttribute("data-dblclick"); + }, 200); + } else { + el.removeAttribute("data-dblclick"); + ondouble(); + } + } +} + +function smoothScrollToRow(rowid) { + document.getElementById(rowid).scrollIntoView({ + behavior: "smooth", + block: "center", + inline: "nearest" + }); +} + +function focusInputField(input) { + input.scrollIntoView(false); + input.focus(); + input.select(); +} + +function saveBomTable(output) { + var text = ''; + for (var node of bomhead.childNodes[0].childNodes) { + if (node.firstChild) { + var name = node.firstChild.nodeValue ?? ""; + text += (output == 'csv' ? `"${name}"` : name); + } + if (node != bomhead.childNodes[0].lastChild) { + text += (output == 'csv' ? ',' : '\t'); + } + } + text += '\n'; + for (var row of bombody.childNodes) { + for (var cell of row.childNodes) { + let val = ''; + for (var node of cell.childNodes) { + if (node.nodeName == "INPUT") { + if (node.checked) { + val += '✓'; + } + } else if ((node.nodeName == "MARK") || (node.nodeName == "A")) { + val += node.firstChild.nodeValue; + } else { + val += node.nodeValue; + } + } + if (output == 'csv') { + val = val.replace(/\"/g, '\"\"'); // pair of double-quote characters + if (isNumeric(val)) { + val = +val; // use number + } else { + val = `"${val}"`; // enclosed within double-quote + } + } + text += val; + if (cell != row.lastChild) { + text += (output == 'csv' ? ',' : '\t'); + } + } + text += '\n'; + } + + if (output != 'clipboard') { + // To file: csv or txt + var blob = new Blob([text], { + type: `text/${output}` + }); + saveFile(`${pcbdata.metadata.title}.${output}`, blob); + } else { + // To clipboard + var textArea = document.createElement("textarea"); + textArea.classList.add('clipboard-temp'); + textArea.value = text; + + document.body.appendChild(textArea); + textArea.focus(); + textArea.select(); + + try { + if (document.execCommand('copy')) { + console.log('Bom copied to clipboard.'); + } + } catch (err) { + console.log('Can not copy to clipboard.'); + } + + document.body.removeChild(textArea); + } +} + +function isNumeric(str) { + /* https://stackoverflow.com/a/175787 */ + return (typeof str != "string" ? false : !isNaN(str) && !isNaN(parseFloat(str))); +} + +function removeGutterNode(node) { + for (var i = 0; i < node.childNodes.length; i++) { + if (node.childNodes[i].classList && + node.childNodes[i].classList.contains("gutter")) { + node.removeChild(node.childNodes[i]); + break; + } + } +} + +function cleanGutters() { + removeGutterNode(document.getElementById("bot")); + removeGutterNode(document.getElementById("canvasdiv")); +} + +var units = { + prefixes: { + giga: ["G", "g", "giga", "Giga", "GIGA"], + mega: ["M", "mega", "Mega", "MEGA"], + kilo: ["K", "k", "kilo", "Kilo", "KILO"], + milli: ["m", "milli", "Milli", "MILLI"], + micro: ["U", "u", "micro", "Micro", "MICRO", "μ", "µ"], // different utf8 μ + nano: ["N", "n", "nano", "Nano", "NANO"], + pico: ["P", "p", "pico", "Pico", "PICO"], + }, + unitsShort: ["R", "r", "Ω", "F", "f", "H", "h"], + unitsLong: [ + "OHM", "Ohm", "ohm", "ohms", + "FARAD", "Farad", "farad", + "HENRY", "Henry", "henry" + ], + getMultiplier: function (s) { + if (this.prefixes.giga.includes(s)) return 1e9; + if (this.prefixes.mega.includes(s)) return 1e6; + if (this.prefixes.kilo.includes(s)) return 1e3; + if (this.prefixes.milli.includes(s)) return 1e-3; + if (this.prefixes.micro.includes(s)) return 1e-6; + if (this.prefixes.nano.includes(s)) return 1e-9; + if (this.prefixes.pico.includes(s)) return 1e-12; + return 1; + }, + valueRegex: null, +} + +function initUtils() { + var allPrefixes = units.prefixes.giga + .concat(units.prefixes.mega) + .concat(units.prefixes.kilo) + .concat(units.prefixes.milli) + .concat(units.prefixes.micro) + .concat(units.prefixes.nano) + .concat(units.prefixes.pico); + var allUnits = units.unitsShort.concat(units.unitsLong); + units.valueRegex = new RegExp("^([0-9\.]+)" + + "\\s*(" + allPrefixes.join("|") + ")?" + + "(" + allUnits.join("|") + ")?" + + "(\\b.*)?$", ""); + units.valueAltRegex = new RegExp("^([0-9]*)" + + "(" + units.unitsShort.join("|") + ")?" + + "([GgMmKkUuNnPp])?" + + "([0-9]*)" + + "(\\b.*)?$", ""); + if (config.fields.includes("Value")) { + var index = config.fields.indexOf("Value"); + pcbdata.bom["parsedValues"] = {}; + for (var id in pcbdata.bom.fields) { + pcbdata.bom.parsedValues[id] = parseValue(pcbdata.bom.fields[id][index]) + } + } +} + +function parseValue(val, ref) { + var inferUnit = (unit, ref) => { + if (unit) { + unit = unit.toLowerCase(); + if (unit == 'Ω' || unit == "ohm" || unit == "ohms") { + unit = 'r'; + } + unit = unit[0]; + } else { + ref = /^([a-z]+)\d+$/i.exec(ref); + if (ref) { + ref = ref[1].toLowerCase(); + if (ref == "c") unit = 'f'; + else if (ref == "l") unit = 'h'; + else if (ref == "r" || ref == "rv") unit = 'r'; + else unit = null; + } + } + return unit; + }; + val = val.replace(/,/g, ""); + var match = units.valueRegex.exec(val); + var unit; + if (match) { + val = parseFloat(match[1]); + if (match[2]) { + val = val * units.getMultiplier(match[2]); + } + unit = inferUnit(match[3], ref); + if (!unit) return null; + else return { + val: val, + unit: unit, + extra: match[4], + } + } + match = units.valueAltRegex.exec(val); + if (match && (match[1] || match[4])) { + val = parseFloat(match[1] + "." + match[4]); + if (match[3]) { + val = val * units.getMultiplier(match[3]); + } + unit = inferUnit(match[2], ref); + if (!unit) return null; + else return { + val: val, + unit: unit, + extra: match[5], + } + } + return null; +} + +function valueCompare(a, b, stra, strb) { + if (a === null && b === null) { + // Failed to parse both values, compare them as strings. + if (stra != strb) return stra > strb ? 1 : -1; + else return 0; + } else if (a === null) { + return 1; + } else if (b === null) { + return -1; + } else { + if (a.unit != b.unit) return a.unit > b.unit ? 1 : -1; + else if (a.val != b.val) return a.val > b.val ? 1 : -1; + else if (a.extra != b.extra) return a.extra > b.extra ? 1 : -1; + else return 0; + } +} + +function validateSaveImgDimension(element) { + var valid = false; + var intValue = 0; + if (/^[1-9]\d*$/.test(element.value)) { + intValue = parseInt(element.value); + if (intValue <= 16000) { + valid = true; + } + } + if (valid) { + element.classList.remove("invalid"); + } else { + element.classList.add("invalid"); + } + return intValue; +} + +function saveImage(layer) { + var width = validateSaveImgDimension(document.getElementById("render-save-width")); + var height = validateSaveImgDimension(document.getElementById("render-save-height")); + var bgcolor = null; + if (!document.getElementById("render-save-transparent").checked) { + var style = getComputedStyle(topmostdiv); + bgcolor = style.getPropertyValue("background-color"); + } + if (!width || !height) return; + + // Prepare image + var canvas = document.createElement("canvas"); + var layerdict = { + transform: { + x: 0, + y: 0, + s: 1, + panx: 0, + pany: 0, + zoom: 1, + }, + bg: canvas, + fab: canvas, + silk: canvas, + highlight: canvas, + layer: layer, + } + // Do the rendering + recalcLayerScale(layerdict, width, height); + prepareLayer(layerdict); + clearCanvas(canvas, bgcolor); + drawBackground(layerdict, false); + drawHighlightsOnLayer(layerdict, false); + + // Save image + var imgdata = canvas.toDataURL("image/png"); + + var filename = pcbdata.metadata.title; + if (pcbdata.metadata.revision) { + filename += `.${pcbdata.metadata.revision}`; + } + filename += `.${layer}.png`; + saveFile(filename, dataURLtoBlob(imgdata)); +} + +function saveSettings() { + var data = { + type: "InteractiveHtmlBom settings", + version: 1, + pcbmetadata: pcbdata.metadata, + settings: settings, + } + var blob = new Blob([JSON.stringify(data, null, 4)], { + type: "application/json" + }); + saveFile(`${pcbdata.metadata.title}.settings.json`, blob); +} + +function loadSettings() { + var input = document.createElement("input"); + input.type = "file"; + input.accept = ".settings.json"; + input.onchange = function (e) { + var file = e.target.files[0]; + var reader = new FileReader(); + reader.onload = readerEvent => { + var content = readerEvent.target.result; + var newSettings; + try { + newSettings = JSON.parse(content); + } catch (e) { + alert("Selected file is not InteractiveHtmlBom settings file."); + return; + } + if (newSettings.type != "InteractiveHtmlBom settings") { + alert("Selected file is not InteractiveHtmlBom settings file."); + return; + } + var metadataMatches = newSettings.hasOwnProperty("pcbmetadata"); + if (metadataMatches) { + for (var k in pcbdata.metadata) { + if (!newSettings.pcbmetadata.hasOwnProperty(k) || newSettings.pcbmetadata[k] != pcbdata.metadata[k]) { + metadataMatches = false; + } + } + } + if (!metadataMatches) { + var currentMetadata = JSON.stringify(pcbdata.metadata, null, 4); + var fileMetadata = JSON.stringify(newSettings.pcbmetadata, null, 4); + if (!confirm( + `Settins file metadata does not match current metadata.\n\n` + + `Page metadata:\n${currentMetadata}\n\n` + + `Settings file metadata:\n${fileMetadata}\n\n` + + `Press OK if you would like to import settings anyway.`)) { + return; + } + } + overwriteSettings(newSettings.settings); + } + reader.readAsText(file, 'UTF-8'); + } + input.click(); +} + +function resetSettings() { + if (!confirm( + `This will reset all checkbox states and other settings.\n\n` + + `Press OK if you want to continue.`)) { + return; + } + if (storage) { + var keys = []; + for (var i = 0; i < storage.length; i++) { + var key = storage.key(i); + if (key.startsWith(storagePrefix)) keys.push(key); + } + for (var key of keys) storage.removeItem(key); + } + location.reload(); +} + +function overwriteSettings(newSettings) { + initDone = false; + Object.assign(settings, newSettings); + writeStorage("bomlayout", settings.bomlayout); + writeStorage("bommode", settings.bommode); + writeStorage("canvaslayout", settings.canvaslayout); + writeStorage("bomCheckboxes", settings.checkboxes.join(",")); + document.getElementById("bomCheckboxes").value = settings.checkboxes.join(","); + for (var checkbox of settings.checkboxes) { + writeStorage("checkbox_" + checkbox, settings.checkboxStoredRefs[checkbox]); + } + writeStorage("markWhenChecked", settings.markWhenChecked); + padsVisible(settings.renderPads); + document.getElementById("padsCheckbox").checked = settings.renderPads; + fabricationVisible(settings.renderFabrication); + document.getElementById("fabricationCheckbox").checked = settings.renderFabrication; + silkscreenVisible(settings.renderSilkscreen); + document.getElementById("silkscreenCheckbox").checked = settings.renderSilkscreen; + referencesVisible(settings.renderReferences); + document.getElementById("referencesCheckbox").checked = settings.renderReferences; + valuesVisible(settings.renderValues); + document.getElementById("valuesCheckbox").checked = settings.renderValues; + tracksVisible(settings.renderTracks); + document.getElementById("tracksCheckbox").checked = settings.renderTracks; + zonesVisible(settings.renderZones); + document.getElementById("zonesCheckbox").checked = settings.renderZones; + dnpOutline(settings.renderDnpOutline); + document.getElementById("dnpOutlineCheckbox").checked = settings.renderDnpOutline; + setRedrawOnDrag(settings.redrawOnDrag); + document.getElementById("dragCheckbox").checked = settings.redrawOnDrag; + setHighlightRowOnClick(settings.highlightRowOnClick); + document.getElementById("highlightRowOnClickCheckbox").checked = settings.highlightRowOnClick; + setDarkMode(settings.darkMode); + document.getElementById("darkmodeCheckbox").checked = settings.darkMode; + setHighlightPin1(settings.highlightpin1); + document.forms.highlightpin1.highlightpin1.value = settings.highlightpin1; + writeStorage("boardRotation", settings.boardRotation); + document.getElementById("boardRotation").value = settings.boardRotation / 5; + document.getElementById("rotationDegree").textContent = settings.boardRotation; + setOffsetBackRotation(settings.offsetBackRotation); + document.getElementById("offsetBackRotationCheckbox").checked = settings.offsetBackRotation; + initDone = true; + prepCheckboxes(); + changeBomLayout(settings.bomlayout); +} + +function saveFile(filename, blob) { + var link = document.createElement("a"); + var objurl = URL.createObjectURL(blob); + link.download = filename; + link.href = objurl; + link.click(); +} + +function dataURLtoBlob(dataurl) { + var arr = dataurl.split(','), + mime = arr[0].match(/:(.*?);/)[1], + bstr = atob(arr[1]), + n = bstr.length, + u8arr = new Uint8Array(n); + while (n--) { + u8arr[n] = bstr.charCodeAt(n); + } + return new Blob([u8arr], { + type: mime + }); +} + +var settings = { + canvaslayout: "FB", + bomlayout: "left-right", + bommode: "grouped", + checkboxes: [], + checkboxStoredRefs: {}, + darkMode: false, + highlightpin1: "none", + redrawOnDrag: true, + boardRotation: 0, + offsetBackRotation: false, + renderPads: true, + renderReferences: true, + renderValues: true, + renderSilkscreen: true, + renderFabrication: true, + renderDnpOutline: false, + renderTracks: true, + renderZones: true, + columnOrder: [], + hiddenColumns: [], + netColors: {}, +} + +function initDefaults() { + settings.bomlayout = readStorage("bomlayout"); + if (settings.bomlayout === null) { + settings.bomlayout = config.bom_view; + } + if (!['bom-only', 'left-right', 'top-bottom'].includes(settings.bomlayout)) { + settings.bomlayout = config.bom_view; + } + settings.bommode = readStorage("bommode"); + if (settings.bommode === null) { + settings.bommode = "grouped"; + } + if (settings.bommode == "netlist" && !pcbdata.nets) { + settings.bommode = "grouped"; + } + if (!["grouped", "ungrouped", "netlist"].includes(settings.bommode)) { + settings.bommode = "grouped"; + } + settings.canvaslayout = readStorage("canvaslayout"); + if (settings.canvaslayout === null) { + settings.canvaslayout = config.layer_view; + } + var bomCheckboxes = readStorage("bomCheckboxes"); + if (bomCheckboxes === null) { + bomCheckboxes = config.checkboxes; + } + settings.checkboxes = bomCheckboxes.split(",").filter((e) => e); + document.getElementById("bomCheckboxes").value = bomCheckboxes; + + var highlightpin1 = readStorage("highlightpin1") || config.highlight_pin1; + if (highlightpin1 === "false") highlightpin1 = "none"; + if (highlightpin1 === "true") highlightpin1 = "all"; + setHighlightPin1(highlightpin1); + document.forms.highlightpin1.highlightpin1.value = highlightpin1; + + settings.markWhenChecked = readStorage("markWhenChecked") || ""; + populateMarkWhenCheckedOptions(); + + function initBooleanSetting(storageString, def, elementId, func) { + var b = readStorage(storageString); + if (b === null) { + b = def; + } else { + b = (b == "true"); + } + document.getElementById(elementId).checked = b; + func(b); + } + + initBooleanSetting("padsVisible", config.show_pads, "padsCheckbox", padsVisible); + initBooleanSetting("fabricationVisible", config.show_fabrication, "fabricationCheckbox", fabricationVisible); + initBooleanSetting("silkscreenVisible", config.show_silkscreen, "silkscreenCheckbox", silkscreenVisible); + initBooleanSetting("referencesVisible", true, "referencesCheckbox", referencesVisible); + initBooleanSetting("valuesVisible", true, "valuesCheckbox", valuesVisible); + if ("tracks" in pcbdata) { + initBooleanSetting("tracksVisible", true, "tracksCheckbox", tracksVisible); + initBooleanSetting("zonesVisible", true, "zonesCheckbox", zonesVisible); + } else { + document.getElementById("tracksAndZonesCheckboxes").style.display = "none"; + tracksVisible(false); + zonesVisible(false); + } + initBooleanSetting("dnpOutline", false, "dnpOutlineCheckbox", dnpOutline); + initBooleanSetting("redrawOnDrag", config.redraw_on_drag, "dragCheckbox", setRedrawOnDrag); + initBooleanSetting("highlightRowOnClick", false, "highlightRowOnClickCheckbox", setHighlightRowOnClick); + initBooleanSetting("darkmode", config.dark_mode, "darkmodeCheckbox", setDarkMode); + + var fields = ["checkboxes", "References"].concat(config.fields).concat(["Quantity"]); + var hcols = JSON.parse(readStorage("hiddenColumns")); + if (hcols === null) { + hcols = []; + } + settings.hiddenColumns = hcols.filter(e => fields.includes(e)); + + var cord = JSON.parse(readStorage("columnOrder")); + if (cord === null) { + cord = fields; + } else { + cord = cord.filter(e => fields.includes(e)); + if (cord.length != fields.length) + cord = fields; + } + settings.columnOrder = cord; + + settings.boardRotation = readStorage("boardRotation"); + if (settings.boardRotation === null) { + settings.boardRotation = config.board_rotation * 5; + } else { + settings.boardRotation = parseInt(settings.boardRotation); + } + document.getElementById("boardRotation").value = settings.boardRotation / 5; + document.getElementById("rotationDegree").textContent = settings.boardRotation; + initBooleanSetting("offsetBackRotation", config.offset_back_rotation, "offsetBackRotationCheckbox", setOffsetBackRotation); + + settings.netColors = JSON.parse(readStorage("netColors")) || {}; +} + +// Helper classes for user js callbacks. + +const IBOM_EVENT_TYPES = { + ALL: "all", + HIGHLIGHT_EVENT: "highlightEvent", + CHECKBOX_CHANGE_EVENT: "checkboxChangeEvent", + BOM_BODY_CHANGE_EVENT: "bomBodyChangeEvent", +} + +const EventHandler = { + callbacks: {}, + init: function () { + for (eventType of Object.values(IBOM_EVENT_TYPES)) + this.callbacks[eventType] = []; + }, + registerCallback: function (eventType, callback) { + this.callbacks[eventType].push(callback); + }, + emitEvent: function (eventType, eventArgs) { + event = { + eventType: eventType, + args: eventArgs, + } + var callback; + for (callback of this.callbacks[eventType]) + callback(event); + for (callback of this.callbacks[IBOM_EVENT_TYPES.ALL]) + callback(event); + } +} +EventHandler.init(); diff --git a/src/web/version.txt b/src/web/version.txt new file mode 100644 index 0000000..46656ba --- /dev/null +++ b/src/web/version.txt @@ -0,0 +1 @@ +v2.9.0-8-gf9a4 diff --git a/tests/integration_test.rs b/tests/integration_test.rs new file mode 100644 index 0000000..9bc19c6 --- /dev/null +++ b/tests/integration_test.rs @@ -0,0 +1,181 @@ +use interactive_html_bom::*; + +#[test] +fn test_empty() { + let bom = InteractiveHtmlBom::new( + "Test Title", + "Test Company", + "Test Revision", + "Test Date", + (0.0, 0.0), + (0.0, 0.0), + ); + + let html = bom.generate_html().unwrap(); + assert!(html.contains(" "${WEB_DIR}/version.txt" +popd + +# Clean up. +rm -rf "$TMP_DIR" +rm -rf "${WEB_DIR}/user-file-examples" +echo "Updated to version $VERSION."