Issue #826. Mesh surfaces

Implement wireframe style for meshes.
Also a number of changes to work with newer versions of devtools.

.eslintrc

@@ -1,38 +0,0 @@
-{
-  "parser": "@babel/eslint-parser",
-  "parserOptions": {
-    "requireConfigFile": false
-  },
-  "extends": ["eslint:recommended"],
-  "ignorePatterns": ["**/vendor/*.js"],
-  "rules": {
-    "no-prototype-builtins": "off"
-  },
-  "env": {
-    "es6": true
-  },
-  "globals": {
-      "$3Dmol": "writable",
-      "console": "writable", 
-      "document": "readonly",
-      "$": "readonly",
-      "window": "readonly",
-      "self": "writable" , 
-      "module": "readonly",
-      "Blob": "readonly",
-      "pako": "readonly",
-      "UPNG": "readonly",
-      "netcdfjs": "readonly",
-      "XMLHttpRequest": "readonly",
-      "alert": "readonly",
-      "setTimeout": "readonly",
-      "clearTimeout": "readonly",
-      "setInterval": "readonly",
-      "clearInterval": "readonly",
-      "Worker": "readonly",
-      "MMTF": "readonly",
-      "TextDecoder": "readonly",
-      "FileReader": "readonly",
-      "ProteinSurface": "readonly"
-    }  
-}

eslint.config.cjs

@@ -0,0 +1,60 @@
+const {
+    defineConfig,
+    globalIgnores,
+} = require("eslint/config");
+
+const babelParser = require("@babel/eslint-parser");
+const js = require("@eslint/js");
+
+const {
+    FlatCompat,
+} = require("@eslint/eslintrc");
+
+const compat = new FlatCompat({
+    baseDirectory: __dirname,
+    recommendedConfig: js.configs.recommended,
+    allConfig: js.configs.all
+});
+
+module.exports = defineConfig([globalIgnores(["**/vendor/*.js"]), {
+    extends: compat.extends("eslint:recommended"),
+
+    languageOptions: {
+        globals: {
+            $3Dmol: "writable",
+            console: "writable",
+            document: "readonly",
+            $: "readonly",
+            window: "readonly",
+            self: "writable",
+            module: "readonly",
+            Blob: "readonly",
+            pako: "readonly",
+            UPNG: "readonly",
+            netcdfjs: "readonly",
+            XMLHttpRequest: "readonly",
+            alert: "readonly",
+            setTimeout: "readonly",
+            clearTimeout: "readonly",
+            setInterval: "readonly",
+            clearInterval: "readonly",
+            Worker: "readonly",
+            MMTF: "readonly",
+            TextDecoder: "readonly",
+            FileReader: "readonly",
+            ProteinSurface: "readonly",
+        },
+
+        parser: babelParser,
+        ecmaVersion: 5,
+        sourceType: "script",
+
+        parserOptions: {
+            requireConfigFile: false,
+        },
+    },
+
+    rules: {
+        "no-prototype-builtins": "off",
+    },
+}]);

package.json

@@ -20,7 +20,8 @@
     "coverageReporters": [
       "lcov",
       "text"
-    ]
+    ],
+    "testEnvironment": "jest-fixed-jsdom"
   },
   "engines": {
     "npm": ">=8.11",
@@ -46,7 +47,7 @@
     "doc": "rm -rf doc/ && npx jsdoc -c jsdoc.conf.json src doc.md"
   },
   "dependencies": {
-    "iobuffer": "^5.3.1",
+    "iobuffer": "^5.0.0",
     "netcdfjs": "^3.0.0",
     "pako": "^2.1.0",
     "upng-js": "^2.1.0"
@@ -61,11 +62,12 @@
     "clean-jsdoc-theme": "github:3dmol/clean-jsdoc-theme#master",
     "codecov": "^3.8.3",
     "del": "^7.0.0",
-    "eslint": "^8.30.0",
+    "eslint": "^9.0.0",
-    "eslint-webpack-plugin": "^3.2.0",
+    "eslint-webpack-plugin": "^5.0.0",
     "glcheck": "github:3dmol/glcheck",
-    "jest": "^29.3.1",
+    "jest": "^29.0.0",
     "jest-environment-jsdom": "^29.3.1",
+    "jest-fixed-jsdom": "^0.0.9",
     "jest-webgl-canvas-mock": "^0.2.3",
     "jquery": "^3.6.3",
     "jsdoc": "^4.0.0",

src/GLViewer.ts

@@ -27,6 +27,13 @@ interface SurfObj {
     style?: SurfaceStyleSpec;
 }
 
+interface Surface extends Array<SurfObj> {
+    style?: SurfaceStyleSpec;
+    atomsel?: AtomSelectionSpec;
+    allsel?: AtomSelectionSpec;
+    focus?:  AtomSelectionSpec;
+}
+
 /**
  * WebGL-based 3Dmol.js viewer
  * Note: The preferred method of instantiating a GLViewer is through {@link createViewer}
@@ -48,7 +55,7 @@ export class GLViewer {
     private glDOM: HTMLCanvasElement | null = null;
 
     private models: GLModel[] = []; // atomistic molecular models
-    private surfaces: Record<number,SurfObj[]> = {};
+    private surfaces: Record<number,Surface> = {};
     private shapes = []; // Generic shapes
     private labels: Label[] = [];
     private clickables = []; //things you can click on
@@ -1840,8 +1847,9 @@ export class GLViewer {
                         geo.buffersNeedUpdate = true;
                         surfArr[n].mat.needsUpdate = true;
 
-                        if (surfArr[n].done)
+                        if (surfArr[n].done) {
-                            surfArr[n].finished = true;
+                            surfArr[n].finished = true;                      
+                        }
 
                         // remove partially rendered surface
                         if (surfArr[n].lastGL)
@@ -1855,6 +1863,9 @@ export class GLViewer {
                             smesh = new Line(geo, surfArr[n].mat);
                         }
                         else {
+                            if('wireframe' in surfArr.style  && surfArr.style.wireframe) {
+                                geo.setUpWireframe();
+                            }                                
                             smesh = new Mesh(geo, surfArr[n].mat);
                         }
                         if (surfArr[n].mat.transparent && surfArr[n].mat.opacity == 0) {
@@ -4298,6 +4309,10 @@ export class GLViewer {
                 mat.transparent = true;
         }
 
+        if (style.wireframe !== undefined) {
+            mat.wireframe = style.wireframe;
+        }
+
         return mat;
     }
 
@@ -4310,7 +4325,7 @@ export class GLViewer {
      * @returns {number} surfid
      */
     public addMesh(mesh: Mesh) {
-        var surfobj = {
+        let surfobj: SurfObj = {
             geo: mesh.geometry,
             mat: mesh.material,
             done: true,
@@ -4399,7 +4414,7 @@ export class GLViewer {
             }
         }
 
-        var addSurfaceHelper = function addSurfaceHelper(surfobj, atomlist: AtomSpec[], atomsToShow: AtomSpec[]) {
+        var addSurfaceHelper = function addSurfaceHelper(surfobj: SurfObj, atomlist: AtomSpec[], atomsToShow: AtomSpec[]) {
             //function returns promise with surfid resolved
             if (!focus) {
                 focusSele = atomsToShow;
@@ -4581,12 +4596,12 @@ export class GLViewer {
 
         style = style || {};
         mat = GLViewer.getMatWithStyle(style);
-        var surfobj: any = [];
+        let surf: Surface = [];
         //save configuration of surface
-        surfobj.style = style;
+        surf.style = style;
-        surfobj.atomsel = atomsel;
+        surf.atomsel = atomsel;
-        surfobj.allsel = allsel;
+        surf.allsel = allsel;
-        surfobj.focus = focus;
+        surf.focus = focus;
         var promise = null;
         if (symmetries) { //do preprocessing
             var modelsAtomList = {};
@@ -4604,7 +4619,7 @@ export class GLViewer {
             var promises = [];
             for (n = 0; n < this.models.length; n++) {
                 if (modelsAtomsToShow[n].length > 0) {
-                    surfobj.push({
+                    surf.push({
                         geo: new Geometry(true),
                         mat: mat,
                         done: false,
@@ -4612,22 +4627,22 @@ export class GLViewer {
                         symmetries: this.models[n].getSymmetries()
                         // also webgl initialized
                     });
-                    promises.push(addSurfaceHelper(surfobj[surfobj.length - 1], modelsAtomList[n], modelsAtomsToShow[n]));
+                    promises.push(addSurfaceHelper(surf[surf.length - 1], modelsAtomList[n], modelsAtomsToShow[n]));
                 }
             }
             promise = Promise.all(promises);
         }
         else {
-            surfobj.push({
+            surf.push({
                 geo: new Geometry(true),
                 mat: mat,
                 done: false,
                 finished: false,
                 symmetries: [new Matrix4()]
             });
-            promise = addSurfaceHelper(surfobj[surfobj.length - 1], atomlist, atomsToShow);
+            promise = addSurfaceHelper(surf[surf.length - 1], atomlist, atomsToShow);
         }
-        this.surfaces[surfid] = surfobj;
+        this.surfaces[surfid] = surf;
         promise.surfid = surfid;
 
         if (surfacecallback && typeof (surfacecallback) == "function") {
@@ -4663,6 +4678,9 @@ export class GLViewer {
             for (let i = 0; i < surfArr.length; i++) {
                 var mat = surfArr[i].mat = GLViewer.getMatWithStyle(style);
                 surfArr[i].mat.side = FrontSide;
+                if (style.wireframe) {
+                    surfArr[i].geo.setUpWireframe();
+                }
                 if (style.color) {
                     surfArr[i].mat.color = CC.color(style.color);
                     surfArr[i].geo.colorsNeedUpdate = true;
@@ -5204,6 +5222,8 @@ export interface SurfaceStyleSpec {
     volscheme?: Gradient;
     /** format of voldata if not a {VolumeData} object */
     volformat?: string;
+    /** Display as wireframe */
+    wireframe?: boolean;
     /* specifies a numeric atom property (prop) and color mapping (scheme) such as {@link $3Dmol.Gradient.RWB}.  Deprecated, use colorscheme instead. */
     map?: Record<string, unknown>
 };

src/WebGL/core/Geometry.ts

@@ -466,7 +466,7 @@ export class Geometry extends EventDispatcher {
   }
 
   setColor(...setcolor: Parameters<GeometryGroup["setColor"]>): void {
-    var len = this.geometryGroups.length;
+    let len = this.geometryGroups.length;
     for (var g = 0; g < len; g++) {
       var geoGroup = this.geometryGroups[g];
       geoGroup.setColor(...setcolor);
@@ -474,7 +474,8 @@ export class Geometry extends EventDispatcher {
   }
 
   setUpWireframe(...lineIndexArgs: Parameters<GeometryGroup["setLineIndices"]>) {
-    for (var g = 0; g < this.groups; g++) {
+    let len = this.geometryGroups.length;
+    for (var g = 0; g < len; g++) {
       var geoGroup = this.geometryGroups[g];
 
       geoGroup.setLineIndices(...lineIndexArgs);

src/parsers/cifutils/decoder.ts

@@ -83,7 +83,7 @@ function view<T>(data: Uint8Array, byteSize: number, c: new (buffer: ArrayBuffer
   if (data.byteOffset != 0 || data.byteLength != data.buffer.byteLength) { //dkoes - extract from larger buffer if needed
     data = new Uint8Array(data);
   }
-  if (IsNativeEndianLittle) return new c(data.buffer);
+  if (IsNativeEndianLittle) return new c(data.buffer as ArrayBuffer);
   return new c(flipByteOrder(data, byteSize));
 }
 

src/ui/ui.js

@@ -614,13 +614,11 @@ $3Dmol.UI = (function () {
           }
           else {
             if (allControl.value) {
-              let id = sid;
+              stateManager.addSelection({}, sid);
-              stateManager.addSelection({}, id);
+              finalizeSelection(sid);
-              finalizeSelection(id);
             }
             else {
-              let id = sid;
+              checkAndAddSelection(sid);
-              checkAndAddSelection(id);
             }
           }
         });

src/utilities.ts

@@ -47,12 +47,8 @@ export function isNumeric(obj) {
         !isNaN(obj - parseFloat(obj));
 };
 
-export function isEmptyObject(obj) {
+export function isEmptyObject(obj: object) {
-    var name;
+    return Object.keys(obj).length === 0;
-    for (name in obj) {
-        return false;
-    }
-    return true;
 };
 
 export type Func = Function|string|undefined|null;

tests/auto/tests/wireframesurf.js

@@ -0,0 +1,8 @@
+
+$3Dmol.download("pdb:4DLN",viewer,{},function(){
+	viewer.zoomTo({chain:'A'});
+        viewer.rotate(-110);
+
+        viewer.addSurface("VDW", {wireframe:true},{chain:'A'});
+        viewer.render();
+});

tests/jest/color.test.js

@@ -1,6 +1,3 @@
-/**
-*@jest-environment jsdom
-*/
 
 global.$ = require("jquery");
 global.URL.createObjectURL = function () { };

tests/jest/gradients.test.js

@@ -1,6 +1,3 @@
-/**
-*@jest-environment jsdom
-*/
 
 global.$ = require("jquery");
 global.URL.createObjectURL = function () { };

tests/jest/math.test.js

@@ -1,6 +1,3 @@
-/**
-*@jest-environment jsdom
-*/
 
 global.$ = require("jquery");
 global.URL.createObjectURL = function () { };

tests/jest/shapes.test.js

@@ -1,6 +1,3 @@
-/**
-*@jest-environment jsdom
-*/
 
 global.$ = require("jquery");
 global.URL.createObjectURL = function () { };
@@ -146,4 +143,4 @@ describe('Triangle Tests', () => {
 		expect(tri.b).toEqual(new $3Dmol.Vector3(16, 44, 72));
 		expect(tri.c).toEqual(new $3Dmol.Vector3(22, 62, 102));
 	})
-})
+})

tests/parsers_tests/parsers-cif.test.js

@@ -1,6 +1,3 @@
-/**
-*@jest-environment jsdom
-*/
 
 global.$ = require("jquery");
 global.URL.createObjectURL = function () { };
@@ -51,4 +48,4 @@ describe('Function cif | Input: multiple.cif | option: duplicateAssemblyAtoms, d
         expect(atoms).toMatchSnapshot();
     });
 
-});
+});

tests/parsers_tests/parsers-cube.test.js

@@ -1,6 +1,3 @@
-/**
-*@jest-environment jsdom
-*/
 
 global.$ = require("jquery");
 global.URL.createObjectURL = function() {};
@@ -49,4 +46,4 @@ describe('Function CUBE | Input:1fas.cube | assignBonds: false |', ()=>{
         expect(atoms).toMatchSnapshot();
     });
 
-});
+});

tests/parsers_tests/parsers-gro.test.js

@@ -1,6 +1,3 @@
-/**
-*@jest-environment jsdom
-*/
 
 global.$ = require("jquery");
 global.URL.createObjectURL = function() {};
@@ -41,4 +38,4 @@ describe('Function GRO | Input:2water.gro |', ()=>{
         expect(atoms).toMatchSnapshot();
     });
 
-});
+});

tests/parsers_tests/parsers-json.test.js

@@ -1,6 +1,3 @@
-/**
-*@jest-environment jsdom
-*/
 
 global.$ = require("jquery");
 global.URL.createObjectURL = function() {};
@@ -15,4 +12,4 @@ describe('Function json |', ()=>{
         expect(atoms).toMatchSnapshot();
     });
 
-});
+});

tests/parsers_tests/parsers-lammpstrj.test.js

@@ -1,6 +1,3 @@
-/**
-*@jest-environment jsdom
-*/
 
 global.$ = require("jquery");
 global.URL.createObjectURL = function() {};
@@ -26,4 +23,4 @@ describe('Function LAMMPSTRJ | Input:Al.lammpstrj | option:assignBonds |', ()=>{
         expect(atoms).toMatchSnapshot();
     });
 
-});
+});

tests/parsers_tests/parsers-mmtf.test.js

@@ -1,6 +1,4 @@
-/**
+
-*@jest-environment jsdom
-*/
 global.$ = require("jquery");
 global.URL.createObjectURL = function() {};
 let $3Dmol = require("../../build/3Dmol.js");
@@ -60,4 +58,4 @@ describe('Function MMTF | options:assemblyIndex |', ()=>{
         expect(atoms).toMatchSnapshot();
     });
 
-});
+});

tests/parsers_tests/parsers-mol2.test.js

@@ -1,6 +1,3 @@
-/**
-*@jest-environment jsdom
-*/
 
 global.$ = require("jquery");
 global.URL.createObjectURL = function() {};
@@ -31,4 +28,4 @@ describe('Function MOL2 | Input: multiple.mol2 | options: keepH |', ()=>{
         expect(atoms).toMatchSnapshot();
     });
     
-});
+});

tests/parsers_tests/parsers-pdbqt.test.js

@@ -1,6 +1,3 @@
-/**
-*@jest-environment jsdom
-*/
 
 global.$ = require("jquery");
 global.URL.createObjectURL = function() {};
@@ -31,4 +28,4 @@ describe('Function PDBQT | Input:1SMT.pdb | option: multimodel, onemol |', ()=>{
         expect(atoms).toMatchSnapshot();
     });
 
-});
+});

tests/parsers_tests/parsers-pqr.test.js

@@ -1,6 +1,3 @@
-/**
-*@jest-environment jsdom
-*/
 
 global.$ = require("jquery");
 global.URL.createObjectURL = function() {};
@@ -45,4 +42,4 @@ describe('Function PQR | Input:1fas.pqr | options:noSecondaryStructure |', ()=>{
         expect(atoms).toMatchSnapshot();
     });
 
-});
+});

tests/parsers_tests/parsers-prmtop.test.js

@@ -1,6 +1,3 @@
-/**
-*@jest-environment jsdom
-*/
 
 global.$ = require("jquery");
 global.URL.createObjectURL = function() {};
@@ -32,4 +29,4 @@ describe('Function PRMTOP | Input:model1.prmtop |', ()=>{
         expect(atoms).toMatchSnapshot();
     });
 
-});
+});

tests/parsers_tests/parsers-sdf.test.js

@@ -1,6 +1,3 @@
-/**
-*@jest-environment jsdom
-*/
 
 global.$ = require("jquery");
 global.URL.createObjectURL = function() {};
@@ -79,4 +76,4 @@ describe('Function SDF | parseV2000 | options: multimodel, onemol |', ()=>{
         expect(atoms).toMatchSnapshot();
     });
 
-});
+});

tests/parsers_tests/parsers-vasp.test.js

@@ -1,6 +1,3 @@
-/**
-*@jest-environment jsdom
-*/
 
 global.$ = require("jquery");
 global.URL.createObjectURL = function() {};
@@ -38,4 +35,4 @@ describe('Function VASP | Input: CONTCAR |', () => {
         expect(atoms).toMatchSnapshot();
     });
 
-});
+});

tests/parsers_tests/parsers-xyz.test.js

@@ -1,6 +1,3 @@
-/**
-*@jest-environment jsdom
-*/
 
 global.$ = require("jquery");
 global.URL.createObjectURL = function() {};
@@ -88,4 +85,4 @@ describe('Function XYZ | Input: C111tiny.xyz | options: multimodel, onemol |', (
         expect(atoms).toMatchSnapshot();
     });
 
-});
+});

tests/tests.test.js

@@ -1,6 +1,3 @@
-/**
-*@jest-environment jsdom
-*/
 
 global.$ = require("jquery");
 global.URL.createObjectURL = function() {};

webpack.common.js

@@ -46,7 +46,7 @@ module.exports = {
       $: "jquery"
     }),
     new webpack.BannerPlugin({ banner }),
-    new ESLintPlugin()
+    new ESLintPlugin({exclude: ['node_modules']})
   ],
   stats: {
     errorDetails: true,