Adding visibility toggle shortcut (#54)

Adding visibility toggle shortcut

.flake8

@@ -12,7 +12,7 @@ extend-ignore =
     N812, # Lowercase imported as non lowercase
             # Quite common in ML (e.g. import torch.nn.functional as F)
     N817, # Camelcase imported as acronym
-            # Commonly used with standard library (e.g. import xml.etree.ElementTree as ET)
+            # Commonly used with standard library (e.g. import xml.etree.ElementTree as ET),
 
 #============================ Repo-specific config ===========================
 per-file-ignores =

CHANGELOG.md

@@ -1,5 +1,8 @@
 # Changelog
 
+## [2022-11-10 - Version 1.0.17](https://github.com/microsoft/scenepic/releases/tag/v1.0.17)
+Point release adding keyboard shortcuts for toggling layer visibility.
+
 ## [2022-11-10 - Version 1.0.16](https://github.com/microsoft/scenepic/releases/tag/v1.0.16)
 Point release fixing an issue with Jupyter rendering order.
 

RELEASE_NOTES

@@ -1,16 +1 @@
-Point release fixing an issue with Jupyter rendering order.
-
-Previously, when a Jupyter notebook containing Scenepic cells was
-loaded after having been saved, the notebooks would appear out
-of order within the notebook. Also, the full library was written into
-each cell, resulting in a lot of duplicate Javascript for notebooks
-which included heavy use of the library. The new solution uses a few
-elements to avoid this:
-
-- The library is written as an external script file in the same directory
-  as the notebook. This has the advantage of making debugging the
-  Typescript library easier (this is a return to previous functionality).
-- The library is loaded once via a single `script` tag
-- Each cell is assigned a unique ID that is used by scenepic to target it
-- When reloading a saved notebook, order is preserved due to the use of
-  the unique ids.
+Point release adding keyboard shortcuts for toggling layer visibility.

VERSION

@@ -1 +1 @@
-1.0.16
+1.0.17

docs/source/conf.py

@@ -22,7 +22,7 @@ copyright = "2021, Microsoft"
 author = "ScenePic Team"
 
 # The full version, including alpha/beta/rc tags
-release = "1.0.16"
+release = "1.0.17"
 
 
 # -- General configuration ---------------------------------------------------

package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "scenepic",
-  "version": "1.0.16",
+  "version": "1.0.17",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "scenepic",
-      "version": "1.0.16",
+      "version": "1.0.17",
       "license": "MIT",
       "dependencies": {
         "npm": "^8.18.0"

package.json

@@ -1,7 +1,7 @@
 {
   "_comment0": "This file is used by npm to specify the project and npm dependencies",
   "name": "scenepic",
-  "version": "1.0.16",
+  "version": "1.0.17",
   "description": "3D Visualization Made Easy",
   "author": "ScenePic Team",
   "license": "MIT",
@@ -40,4 +40,4 @@
   "dependencies": {
     "npm": "^8.18.0"
   }
-}
+}

requirements-flake8.txt

@@ -1,5 +1,5 @@
 flake8
-flake8-bugbear
+flake8-bugbear==22.10.27
 flake8-builtins
 flake8-docstrings
 flake8-import-order

src/scenepic/version.py

@@ -3,4 +3,4 @@
 # Copyright (c) Microsoft Corporation.
 # Licensed under the MIT License.
 
-__version__ = "1.0.16"
+__version__ = "1.0.17"

tssrc/Canvas2D.ts

@@ -368,6 +368,17 @@ export default class Canvas2D extends CanvasBase
         return true;
     }
 
+    ToggleLayerFilled(index: number)
+    {
+        if(index >= this.layerIds.length) {
+            return
+        }
+
+        let layerId = this.layerIds[index];
+        let filled = this.ShowLayerFilled(layerId);
+        this.SetLayerFilled(layerId, !filled);
+    }    
+
     SetLayerFilled(layerId : string, filled : boolean)
     {
         if (layerId == null)

tssrc/Canvas3D.ts

@@ -59,7 +59,8 @@ export default class Canvas3D extends CanvasBase
     sp : ShaderProgram;
 
     // Dictionary from layerId to layer settings (wireframe, filled, opacity)
-    layerSettings = {};
+    layerSettings : {[layerId: string]: {[key: string]: number|boolean}} = {};
+    layerIds : string[] = [];
 
     // Shading parameters
     bgColor : vec4;
@@ -282,6 +283,10 @@ export default class Canvas3D extends CanvasBase
             this.dropdownTable.removeChild(this.dropdownTable.lastChild);
 
         this.layerSettings = layerSettings;
+        this.layerIds = [null];
+        for(let layerId in layerSettings){
+            this.layerIds.push(layerId);
+        }
 
         // Add header row
         var BorderStyle = "1px solid #cccccc";
@@ -878,6 +883,17 @@ export default class Canvas3D extends CanvasBase
         return (showFilled || showWireframe) && opacity > 0.0;
     }
 
+    ToggleLayerFilled(index: number)
+    {
+        if(index >= this.layerIds.length) {
+            return
+        }
+
+        let layerId = this.layerIds[index];
+        let filled = this.ShowLayerFilled(layerId);
+        this.SetLayerFilled(layerId, !filled);
+    }
+
     ShowLayerFilled(layerId : string) : boolean
     {
         if (layerId == "<<<GLOBAL>>>")

tssrc/SPScene.ts

@@ -174,6 +174,7 @@ export default class SPScene
         helpHtml += 'ctrl: twist<br>';
         helpHtml += 'alt: slow translation/rotation<br>';
         helpHtml += 'tab: toggle between first person/focus cameras<br>';
+        helpHtml += 'alt+#: toggle visibility of layer #<br>';
         helpHtml += 'r: reset view';
         helpHtml += '</span><span class="scenepic-textbox-content">';
         helpHtml += '\\: toggle orbit camera<br>';
@@ -1154,6 +1155,14 @@ export default class SPScene
             }
         }
 
+        if (altKey) {
+            let index = Number.parseInt(key);
+            for(var canvas of canvases)
+            {
+                canvas.ToggleLayerFilled(index);
+            }
+        }
+
         // Display timings
         if (showTimings)
         {