add facet outline toggle

dnanto · Oct 4, 2024 · 363a6a9 · 363a6a9
1 parent 4b08ab8
commit 363a6a9
Show file tree

Hide file tree

Showing 3 changed files with 25 additions and 6 deletions.
diff --git a/app.html b/app.html
@@ -76,11 +76,13 @@
                     <input type="number" id="φ" step="10" value="-90" />
                 </fieldset>
                 <fieldset>
-                    <legend>fiber</legend>
+                    <legend>features</legend>
                     <label for="penton_fiber_toggle">penton=</label>
                     <input type="checkbox" id="penton_fiber_toggle" checked />
                     <label for="knob_toggle">knob=</label>
                     <input type="checkbox" id="knob_toggle" checked />
+                    <label for="facet_toggle">facet=</label>
+                    <input type="checkbox" id="facet_toggle" />
                 </fieldset>
                 <fieldset>
                     <legend>aesthetics</legend>

diff --git a/js/app.js b/js/app.js
@@ -31,7 +31,7 @@ const DEFAULTS = Object.assign(
     },
     Object.fromEntries([
         ...["net", "capsid"].map((e) => ["mode_" + e, PARSERS.toggle]),
-        ...["penton_fiber", "knob"].map((e) => [e + "_toggle", PARSERS.toggle]),
+        ...["penton_fiber", "knob", "facet"].map((e) => [e + "_toggle", PARSERS.toggle]),
         ...["line", "fiber", "knob"].flatMap((e) => ["color", "alpha", "size"].map((f) => [e + "_" + f, PARSERS[f]])),
         ...["color", "alpha", "size", "length"].map((e) => ["fiber_" + e, PARSERS[e]]),
         ...["color", "alpha", "toggle"].flatMap((e) => Array.from({ length: 6 }, (_, i) => ["mer_" + e + "_" + (i + 1), PARSERS[e]])),

diff --git a/js/democapsid.js b/js/democapsid.js
@@ -1012,14 +1012,21 @@ function draw_net(PARAMS) {
     // clean-up
     facets.forEach((e) => e.remove());
     lat_cfg.lattice.forEach((e) => e.forEach((f) => f.remove()));
+
+    if (PARAMS.facet_toggle) {
+        g.style.strokeColor = PARAMS.line_color;
+        g.style.strokeWidth = PARAMS.line_size;
+        return g;
+    }
     const G = new paper.Group(
         g.children.map(
             (e) =>
                 new paper.Group(
                     e.children.map((e) => {
                         const points = e.segments.map((e) => e.point);
-                        const border = new paper.Group(e.data.strokes.map((f) => new paper.Path({ segments: f.map((i) => points[i]), closed: false, style: { strokeColor: "black" } })));
-                        border.style.strokeWidth = PARAMS.line_size;
+                        const border = new paper.Group(
+                            e.data.strokes.map((f) => new paper.Path({ segments: f.map((i) => points[i]), closed: false, style: { strokeColor: PARAMS.line_color, strokeWidth: PARAMS.line_size } }))
+                        );
                         return new paper.Group([e.clone(), border]);
                     })
                 )
@@ -1158,14 +1165,24 @@ function draw_capsid(PARAMS) {
     // clean-up
     facets.forEach((e) => e.remove());
     lat_cfg.lattice.forEach((e) => e.forEach((f) => f.remove()));
+    if (PARAMS.facet_toggle) {
+        g.children
+            .filter((e) => e.data.type === "facet")
+            .forEach((e) => {
+                e.style.strokeColor = PARAMS.line_color;
+                e.style.strokeWidth = PARAMS.line_size;
+            });
+        return g;
+    }
     const G = new paper.Group(
         g.children.map((e) => {
             if (Object.hasOwn(e.data, "type") && e.data.type === "facet") {
                 return new paper.Group(
                     e.children.map((e) => {
                         const points = e.segments.map((e) => e.point);
-                        const border = new paper.Group(e.data.strokes.map((f) => new paper.Path({ segments: f.map((i) => points[i]), closed: false, style: { strokeColor: "black" } })));
-                        border.style.strokeWidth = PARAMS.line_size;
+                        const border = new paper.Group(
+                            e.data.strokes.map((f) => new paper.Path({ segments: f.map((i) => points[i]), closed: false, style: { strokeColor: PARAMS.line_color, strokeWidth: PARAMS.line_size } }))
+                        );
                         return new paper.Group([e.clone(), border]);
                     })
                 );