@ccp-nc/crystvis-js 0.4.13 → 0.5.0

package/lib/render.js

@@ -21,6 +21,29 @@ import {
 
 import * as Primitives from './primitives/index.js';
 
+import {
+    TextSprite
+} from './primitives/index.js';
+
+// themes:
+const themes = {
+    dark: {
+        background: 0x000000,
+        foreground: 0xffffff,
+        highlight: 0x00ff00,
+        cell_line_color: 0xffffff,
+        label_color: 0xffffff,
+
+    },
+    light: {
+        background: 0xffffff,
+        foreground: 0x000000,
+        highlight: 0x00ff00,
+        cell_line_color: 0x000000,
+        label_color: 0x000000,
+    }
+}
+
 
 class Renderer {
 
@@ -31,8 +54,9 @@ class Renderer {
      * @param {int}     width           Desired width for the renderer
      * @param {int}     height          Desired height for the renderer. If both this and width are zero, automatically
      *                                  resizes with the container
+     * @param {object}  options         Optional parameters for the WebGLRenderer
      */
-    constructor(target, width, height) {
+    constructor(target, width, height, options = {}) {
 
         // Grab the target element
         this._div = $(target);
@@ -42,8 +66,14 @@ class Renderer {
         this._h = height;
         this._updateSize();
 
+        // combine options with defaults
+        this._options = Object.assign({
+            antialias: true,
+            alpha: true,
+        }, options);
+        
         // Renderer
-        this._r = new THREE.WebGLRenderer();
+        this._r = new THREE.WebGLRenderer(this._options);
         this._r.autoClear = true;
         this._r.setPixelRatio(window.devicePixelRatio);
         this._r.setSize(this._w, this._h);
@@ -81,11 +111,13 @@ class Renderer {
         // Groups
         this._groups = {
             model: new THREE.Group(),
-            primitives: new THREE.Group()
+            primitives: new THREE.Group(),
+            notifications: new THREE.Group(),
         };
 
         this._s.add(this._groups.model);
         this._s.add(this._groups.primitives);
+        this._s.add(this._groups.notifications);
 
         // Selection box (multiple raycast)
         this._sboxlist = [];
@@ -94,7 +126,7 @@ class Renderer {
         this._sboxhelp.selectOverCallback = this._selectBoxEnd.bind(this);
 
         // Color scheme
-        this._cell_line_color = 0xaaaaaa;
+        this.theme = themes.dark;
         this._cell_x_color = 0xff0000;
         this._cell_y_color = 0x00ff00;
         this._cell_z_color = 0x0000ff;
@@ -193,6 +225,51 @@ class Renderer {
         }
     }
 
+    /**
+     * Draw list of notifications
+     * @param {Array} messages - List of (strings) messages to display
+     * @param {Object} parameters - Parameters for the messages
+     * 
+    */
+    addNotifications(messages, parameters={}) {
+        // TODO: adjust position of messages when camera is rotated
+        // currently this is only correct when camera is looking down the z-axis
+        //top of message should be the bottom left corner of the canvas
+        var position = [this._c.left, this._c.bottom, this._c.near];
+        // calculate height of messages
+        const messages_height = 0.05 * messages.length;
+        // todo: this should really be the x projection of the unit cell
+        // rather than the length of the 0th unit cell vector
+        // but it works for now...
+        const xshift = this.getOrbitCenter().x * 2;
+        const yshift = 0.05 * messages_height + this.getOrbitCenter().y + 0.5;
+        const defaults = {
+            position: position,
+            height: messages_height,
+            color: this.theme.label_color,
+            faceCamera: true,
+            fixScale: true,
+            shift: [xshift,yshift,0.0],
+            onOverlay: true,
+        };
+
+        parameters = _.merge(defaults, parameters);
+
+        // add text sprite to scene
+        // Create a TextSprite to hold the message
+        var messageSprite = new TextSprite(messages.join('\n'), parameters);
+
+        this._groups.notifications.add(messageSprite);
+    }
+
+    /**
+     * Remove all notifications from the scene
+    */
+    clearNotifications() {
+        this._groups.notifications.remove(...this._groups.notifications.children);
+    }
+
+
     add(object, group = 'primitives') {
         if (!(this._groups[group].children.includes(object)))
             this._groups[group].add(object);
@@ -301,6 +378,11 @@ class Renderer {
         this._oc.target = p;
     }
 
+    getOrbitCenter() {
+        return this._oc.target;
+    }
+
+
     /**
      * Remove all currently rendered objects.
      */
@@ -362,6 +444,25 @@ class Renderer {
         this._sboxhelp.element.css({
             'opacity': o
         });
+    }
+
+    // themes
+    get theme() {
+        return this._theme;
+    }
+
+    set theme(t) {
+        this._theme = t;
+        // background color
+        this._r.setClearColor(t.background, 1);
+        // Cell color scheme
+        this._r._cell_line_color = t.cell_line_color;
+        // labels
+        this._label_color = t.label_color;
+
+        
+
+
     }
 
     // This convenient wrapper is useful to keep the Primitives out of the Model's logic.
@@ -436,5 +537,6 @@ _addVectorField: function(points, vectors, colors, scale) {
 
 
 export {
-    Renderer
+    Renderer,
+    themes
 };

package/lib/tensor.js

@@ -37,7 +37,7 @@ class TensorData {
         // Diagonalize
         var eigs = mjs.eigs(this._Msymm);
         // Sort by eigenvalue magnitude
-        var evecs = mjs.transpose(eigs.vectors._data);
+        var evecs = eigs.eigenvectors.map(e => e.vector._data);
         eigs = _.zip(eigs.values._data, evecs);
         eigs = _.sortBy(eigs, function(x) {
             return x[0];

package/lib/utils.js

@@ -163,6 +163,27 @@ function hashCode(arg) {
     return hash;
 }
 
+
+/**
+ * Compare floating point numbers for equality with a given tolerance
+ * 
+ * @param {float} a    First number
+ * @param {float} b    Second number
+ * @param {float} tol  Tolerance (absolute)
+ * 
+ * @return {bool}      True if the numbers are equal within the tolerance
+ * 
+ * TODO: could add relative tolerance as well
+ */
+function floatEqual(a, b, tol=1e-6) {
+    // check for NaNs
+    if (a !== a || b !== b) {
+        return false;
+    }
+
+    return Math.abs(a-b) < tol;
+}
+
 export {
-    supercellGrid, supercellIndex, cellMatrix3, addStaticVar, shiftCpkColor, hashCode
+    supercellGrid, supercellIndex, cellMatrix3, addStaticVar, shiftCpkColor, hashCode, floatEqual
 }

package/lib/visualizer.js

@@ -10,6 +10,8 @@ import * as _ from 'lodash';
 import {
     Renderer as Renderer
 } from './render.js';
+// themes
+import {themes} from './render.js';
 import {
     Loader as Loader
 } from './loader.js';
@@ -45,11 +47,12 @@ class CrystVis {
      * @param {int}     height      Window height. If both this and width are
      *                              set to 0, the window fits its context and
      *                              automatically resizes with it
+     * @param {Object}  rendererOptions     Options for the renderer
      */
-    constructor(element, width = 0, height = 0) {
+    constructor(element, width = 0, height = 0, rendererOptions = {}) {
 
         // Create a renderer
-        this._renderer = new Renderer(element, width, height);
+        this._renderer = new Renderer(element, width, height, rendererOptions);
         this._loader = new Loader();
 
         this._models = {};
@@ -58,6 +61,7 @@ class CrystVis {
         this._current_mname = null;
         this._displayed = null;
         this._selected = null;
+        this._notifications = [];
 
         // Handling events
         this._atom_click_events = {};
@@ -158,6 +162,36 @@ class CrystVis {
         }
     }
 
+    get notifications() {
+        return this._notifications;
+    }
+
+    set notifications(n) {
+        this._notifications = n;
+    }
+
+
+    /** Theme
+     * @type {object}
+     */
+    get theme() {
+        return this._renderer.theme;
+    }
+
+    set theme(t) {
+        // if t is a string, try to find the corresponding theme
+        // from the list of themes
+        if (typeof t === 'string') {
+            if (themes[t]) {
+                t = themes[t];
+            } else {
+                throw new Error('Theme ' + t + ' not found');
+            }
+        }
+        this._renderer.theme = t;
+    }
+
+
     /**
      * Set a callback function for an event where a user clicks on an atom. The
      * function should take as arguments the atom image for the clicked atom and
@@ -305,6 +339,8 @@ class CrystVis {
      * @return {Object}             Names of the models we tried to load, and values of true/false for successful loading or not
      */
     loadModels(contents, format = 'cif', prefix = null, parameters = {}) {
+        // clear existing notifications
+        this.clearNotifications();
 
         parameters = _.merge(model_parameter_defaults, parameters);
 
@@ -320,6 +356,9 @@ class CrystVis {
 
         if (this._loader.status == Loader.STATUS_ERROR) {
             status[prefix] = this._loader.error_message;
+            // display error notification to user
+            this.addNotification('Error loading model: '+ prefix);
+            this.addNotification(this._loader.error_message);            
             return status;
         }
 
@@ -336,6 +375,7 @@ class CrystVis {
             var s = structs[n];
             if (!s) {
                 status[nn] = 'Model could not load properly';
+                this.addNotification('Model '+ nn + ' could not load properly');
                 continue;
             }
             this._models[nn] = new Model(s, parameters);
@@ -352,6 +392,8 @@ class CrystVis {
      * @param  {Object} parameters Loading parameters as in .loadModels()
      */
     reloadModel(name, parameters = {}) {
+        // clear existing notifications from scene
+        this.clearNotifications();
 
         if (!(name in this._models)) {
             throw 'The requested model does not exist';
@@ -382,6 +424,8 @@ class CrystVis {
     displayModel(name = null) {
 
         if (this._current_model) {
+            // clear notifications from previous model
+            this.clearNotifications();
             this.selected = this._current_model.view([]);
             this._current_model.renderer = null;
             this._current_model = null;
@@ -395,6 +439,9 @@ class CrystVis {
         }
 
         if (!(name in this._models)) {
+            // in case the model does not exist, reset the orbit
+            this._renderer.resetOrbitCenter(5,5,5);
+            this.addNotification('The requested model does not exist')
             throw 'The requested model does not exist';
         }
 
@@ -454,16 +501,60 @@ class CrystVis {
         this._renderer.remove(p);
     }
 
+    /**
+     * Add a notification to the list of notifications to be displayed
+     */
+    addNotification(n) {
+        this._notifications.push(n);
+        this.addNotifications();
+    }
+
+    /**
+     * Adds all notifications to the drawing
+     * 
+     */
+    addNotifications() {
+        // remove displayed notifications 
+        // (doesn't remove them from this._notifications)
+        this._renderer.clearNotifications();
+        // add full list of notifications
+        this._renderer.addNotifications(this._notifications);
+    }
+
+    /**
+     * Removes notifications from the drawing
+     */
+    clearNotifications() {
+        this._notifications = [];
+        this._renderer.clearNotifications();
+    }
+    
     /**
      * Recover a data URL of a PNG screenshot of the current scene
      * 
      * @return {String} A data URL of the PNG screenshot
      */
-    getScreenshotData() {
+    getScreenshotData(transparent = true, scale_pixels = 3) {
+        
+        var renderer = this._renderer;
+        // save current alpha and antialias settings
+        var old_alpha = renderer._r.getClearAlpha();
+        var old_PixelRatio = renderer._r.getPixelRatio();
+
+        // set new alpha and antialias settings
+        renderer._r.setClearAlpha(transparent ? 0 : 1);
+        renderer._r.setPixelRatio(scale_pixels);
+
         // Force a render
         this._renderer._render();
         // Grab the data from the canvas
-        return this._renderer._r.domElement.toDataURL();
+        var data = renderer._r.domElement.toDataURL();
+
+        // restore old alpha and antialias settings
+        renderer._r.setClearAlpha(old_alpha);
+        renderer._r.setPixelRatio(old_PixelRatio);
+
+        return data;
     }
 }
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ccp-nc/crystvis-js",
-  "version": "0.4.13",
+  "version": "0.5.0",
   "description": "A Three.js based crystallographic visualisation tool",
   "main": "index.js",
   "type": "module",
@@ -69,36 +69,36 @@
   },
   "homepage": "https://github.com/ccp-nc/crystvis-js#readme",
   "dependencies": {
-    "@jkshenton/three-bmfont-text": ">=3.0.4",
+    "@jkshenton/three-bmfont-text": "^3.0.5",
     "buffer": "^6.0.3",
     "chroma-js": "^2.4.2",
-    "crystcif-parse": "^0.2.9",
+    "@ccp-nc/crystcif-parse": "^0.2.9",
     "isosurface": "^1.0.0",
-    "jquery": "^3.6.0",
+    "jquery": "^3.7.1",
     "load-bmfont": "^1.4.1",
     "lodash": "^4.17.21",
-    "mathjs": "^8.0.1",
-    "three": "^0.143.0",
+    "mathjs": "^12.3.0",
+    "three": "^0.137.0",
     "yargs-parser": "^21.1.1"
   },
   "devDependencies": {
-    "@babel/eslint-parser": "^7.18.9",
-    "chai": "^4.3.6",
+    "@babel/eslint-parser": "^7.23.3",
+    "chai": "^5.0.0",
     "chai-almost": "^1.0.1",
-    "clean-jsdoc-theme": "^4.1.7",
+    "clean-jsdoc-theme": "^4.2.17",
     "datauri": "^4.1.0",
     "elliptic": ">=6.5.4",
-    "esbuild": "^0.15.5",
-    "eslint": "^8.22.0",
-    "gh-pages": "^4.0.0",
-    "glob": "^8.0.3",
+    "esbuild": "^0.19.11",
+    "eslint": "^8.56.0",
+    "gh-pages": "^6.1.1",
+    "glob": "^10.3.10",
     "jpeg-js": ">=0.4.4",
-    "jsdoc": "^3.6.11",
-    "minimist": "^1.2.6",
-    "mocha": "^10.0.0",
-    "msdf-bmfont-xml": "^2.5.4",
+    "jsdoc": "^4.0.2",
+    "minimist": "^1.2.8",
+    "mocha": "^10.2.0",
+    "msdf-bmfont-xml": "^2.7.0",
     "npm-watch": "^0.11.0",
-    "serve": "^14.0.1"
+    "serve": "^14.2.1"
   },
   "overrides": {
     "minimist": "$minimist"

package/scripts/build-fonts.js

@@ -1,13 +1,18 @@
 import generateBMFont from 'msdf-bmfont-xml';
 import fs from 'fs';
 import path from 'path';
-import glob from 'glob';
+import * as glob from 'glob';
+
 
 // We update by hand whenever we want to build a new font
 const fontList = [
-    'fonts/Rubik/static/Rubik-Medium.ttf'
+    'fonts/Rubik/static/Rubik-Medium.ttf',
+    'fonts/OpenSans/static/OpenSans/OpenSans-Medium.ttf'
 ];
 
+const defaultCharset = " !\"#$%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRSTUVWXYZ[\\]^_`abcdefghijklmnopqrstuvwxyz{|}~ αβγδεζηθικλμνξοπρστυφχψωΑΒΓΔΕΖΗΘΙΚΛΜΝΞΟΠΡΣΤΥΦΧΨΩÅ°".split('');
+
+
 const savePath = 'lib/assets/fonts';
 
 // Clean up the destination path!
@@ -19,7 +24,7 @@ old_files.forEach((fname, index) => {
 for (var i in fontList) {
     const fname = fontList[i];
 
-    generateBMFont(fname, (error, textures, font) => {
+    generateBMFont(fname, {charset: defaultCharset}, (error, textures, font) => {
 
         textures.forEach((texture, index) => {
 

package/test/chemdata.js

@@ -1,6 +1,6 @@
 'use strict';
 
-import chai from 'chai'
+import * as chai from 'chai';
 import chaiAlmost from 'chai-almost'
 
 import {

package/test/data/bohr.cell

@@ -0,0 +1,11 @@
+%block LATTICE_ABC
+bohr
+7 7 7
+90.0000 90.0000 90.0000
+%endblock LATTICE_ABC
+
+%block POSITIONS_ABS
+bohr
+H   0    0    0
+He  3.5  0    0 
+%endblock POSITIONS_ABS

package/test/data/pyridine.xyz

@@ -1,5 +1,5 @@
 11
-Pyridine molecule (source: Wikipedia)
+Lattice="10 0 0 0 10 0 0 0 10" Properties=species:S:1:pos:R:3 pbc="T T T" Label="Pyridine molecule (source: Wikipedia)"
 C       -0.180226841      0.360945118     -1.120304970
 C       -0.180226841      1.559292118     -0.407860970
 C       -0.180226841      1.503191118      0.986935030

package/test/data/pyridine_nocell.xyz

@@ -0,0 +1,13 @@
+11
+Pyridine molecule (source: Wikipedia)
+C       -0.180226841      0.360945118     -1.120304970
+C       -0.180226841      1.559292118     -0.407860970
+C       -0.180226841      1.503191118      0.986935030
+N       -0.180226841      0.360945118      1.685965030
+C       -0.180226841     -0.781300882      0.986935030
+C       -0.180226841     -0.837401882     -0.407860970
+H       -0.180226841      0.360945118     -2.206546970
+H       -0.180226841      2.517950118     -0.917077970
+H       -0.180226841      2.421289118      1.572099030
+H       -0.180226841     -1.699398882      1.572099030
+H       -0.180226841     -1.796059882     -0.917077970

package/test/data/si8_noisy.xyz

@@ -0,0 +1,10 @@
+8
+Lattice="5.47545112629462 4.96819156878786e-36 1.10608096941637e-36 4.96819156878786e-36 5.47545112629462 -3.12695835139248e-36 1.10608096941637e-36 -3.12695835139248e-36 5.47545112629462" Properties=species:S:1:pos:R:3:initial_magmoms:R:1:castep_labels:S:1 pbc="T T T"
+Si       0.00000000       0.00000000       0.00000000       0.00000000 NULL
+Si       4.10658834       4.10658834       1.36886278       0.00000000 NULL
+Si       2.73772556       0.00000000       2.73772556       0.00000000 NULL
+Si       4.10658834       1.36886278       4.10658834       0.00000000 NULL
+Si       0.00000000       2.73772556       2.73772556       0.00000000 NULL
+Si       1.36886278       1.36886278       1.36886278       0.00000000 NULL
+Si       1.36886278       4.10658834       4.10658834       0.00000000 NULL
+Si       2.73772556       2.73772556      -0.00000000       0.00000000 NULL

package/test/loader.js

@@ -1,6 +1,6 @@
 'use strict';
 
-import chai from 'chai'
+import * as chai from 'chai';
 import chaiAlmost from 'chai-almost'
 
 import fs from 'fs'
@@ -55,6 +55,20 @@ describe('#loading', function() {
             [1.7848106706548383, 1.959874486240255, 12.914460443940394]
         ]);
     });
+    it ('should load a noisy .xyz file', function() {
+
+        var loader = new Loader();
+
+        var xyz = fs.readFileSync(path.join(__dirname, 'data', 'si8_noisy.xyz'), "utf8");
+        var a = loader.load(xyz, 'xyz')['xyz'];
+
+        expect(a.get_cell()).to.deep.almost.equal([
+            [5.475, 0, 0],
+            [0, 5.475, 0],
+            [0, 0, 5.475]
+        ]);
+    });
+
     it('should load properly a Magres file', function() {
 
         var loader = new Loader();
@@ -103,5 +117,12 @@ describe('#loading', function() {
         expect(a.get_cell()).to.almost.deep.equal([[10.0, 0, 0], [10.0, 10.0, 0], [0, 0, 10.0]]);
         expect(a.get_positions()[0]).to.almost.deep.equal([10.0, 5.0, 5.0]);
 
+
+        // Test an example with ABC lattice and ABS positions but with bohr units
+        cell = fs.readFileSync(path.join(__dirname, 'data', 'bohr.cell'), "utf8");
+        a = loader.load(cell, 'cell')['cell'];
+
+        expect(a.get_cell()).to.almost.deep.equal([[3.7042404756, 0, 0], [0, 3.7042404756, 0], [0, 0, 3.7042404756]]);
+        expect(a.get_positions()[1]).to.almost.deep.equal([1.8521202378, 0.0, 0.0]);
     });
 });