Switch to esbuild for building; add TypeScript for type checking.

package.json

@@ -8,25 +8,17 @@
   "license": "MIT",
   "private": false,
   "devDependencies": {
-    "babel-core": ">=6.26.3",
-    "babel-preset-env": ">=1.7.0",
-    "babelify": "^10.0.0",
-    "browserify": ">=16.2.3",
-    "docdash": "^1.0.3",
-    "gulp": "^4.0.2",
-    "gulp-babel-minify": "^0.5.0",
-    "gulp-concat": ">=2.6.1",
-    "gulp-exit": "0.0.2",
-    "gulp-jsdoc3": ">=2.0.0",
-    "gulp-rename": ">=1.4.0",
-    "gulp-sourcemaps": "^2.6.5",
-    "jsdoc": "^4.0.0",
-    "vinyl-buffer": ">=1.0.1",
-    "vinyl-source-stream": ">=2.0.0",
-    "watchify": "^3.11.1",
-    "webpack-stream": "^5.2.1"
+    "esbuild":    "^0.25.0",
+    "typescript": "^5.8.2"
   },
   "dependencies": {
     "chroma-js": "^2.4.2"
+  },
+  "scripts": {
+    "build":     "node ./scripts/build.mjs",
+    "minify":    "node ./scripts/minify.mjs",
+    "release":   "echo Not yet implemented...",
+    "typecheck": "tsc --noEmit",
+    "watch":     "node ./scripts/watch.mjs"
   }
-}
+}

scripts/build.mjs

@@ -0,0 +1,9 @@
+import * as esbuild from 'esbuild';
+
+let result = await esbuild.build({
+  entryPoints: ['app.js'],
+  outfile: 'dist/smiles-drawer.js',
+  bundle: true
+})
+
+// console.log(result)

scripts/minify.mjs

@@ -0,0 +1,11 @@
+import * as esbuild from 'esbuild'
+
+let result = await esbuild.build({
+  entryPoints: ['dist/smiles-drawer.js'],
+  outfile: 'dist/smiles-drawer.min.js',
+  target: ['chrome65'],
+  sourcemap: true,
+  minify: true
+})
+
+// console.log(result)

scripts/watch.mjs

@@ -0,0 +1,9 @@
+import * as esbuild from 'esbuild';
+
+let context = await esbuild.context({
+  entryPoints: ['app.js'],
+  outfile: 'dist/smiles-drawer.js',
+  bundle: true
+})
+
+await context.watch()

src/CanvasWrapper.js

@@ -4,12 +4,13 @@ const Vector2 = require('./Vector2')
 const Line = require('./Line')
 const Vertex = require('./Vertex')
 const Ring = require('./Ring')
+const ThemeManager = require('./ThemeManager')
 const { getChargeText } = require('./UtilityFunctions')
 
 /** 
  * A class wrapping a canvas element.
  * 
- * @property {HTMLElement} canvas The HTML element for the canvas associated with this CanvasWrapper instance.
+ * @property {HTMLCanvasElement} canvas The HTML element for the canvas associated with this CanvasWrapper instance.
  * @property {CanvasRenderingContext2D} ctx The CanvasRenderingContext2D of the canvas associated with this CanvasWrapper instance.
  * @property {Object} colors The colors object as defined in the SmilesDrawer options.
  * @property {Object} opts The SmilesDrawer options.
@@ -24,15 +25,27 @@ class CanvasWrapper {
     /**
      * The constructor for the class CanvasWrapper.
      *
-     * @param {(String|HTMLElement)} target The canvas id or the canvas HTMLElement.
+     * @param {string|String|HTMLCanvasElement} target The canvas id or the HTMLCanvasElement.
      * @param {ThemeManager} themeManager Theme manager for setting proper colors.
      * @param {Object} options The smiles drawer options object.
      */
     constructor(target, themeManager, options) {
-        if (typeof target === 'string' || target instanceof String) {
-            this.canvas = document.getElementById(target);
-        } else {
-            this.canvas = target;
+        let element = null;
+        if (target instanceof String) {
+            element = document.getElementById(target.valueOf());
+        }
+        else if (typeof target === 'string') {
+            element = document.getElementById(target);
+        }
+        else {
+            element = target;
+        }
+
+        if (element instanceof HTMLCanvasElement) {
+            this.canvas = element;
+        }
+        else {
+            throw Error("First argument was not a canvas or the ID of a canvas.");
         }
 
         this.ctx = this.canvas.getContext('2d');
@@ -657,7 +670,7 @@ class CanvasWrapper {
 
             hydrogenWidth = this.hydrogenWidth;
             ctx.font = this.fontSmall;
-            hydrogenCountWidth = ctx.measureText(hydrogens).width;
+            hydrogenCountWidth = ctx.measureText(hydrogens.toString()).width;
             cursorPosLeft -= hydrogenWidth + hydrogenCountWidth;
 
             if (direction === 'left') {
@@ -680,7 +693,7 @@ class CanvasWrapper {
             ctx.fillText('H', hx, hy)
 
             ctx.font = this.fontSmall;
-            ctx.fillText(hydrogens, hx + this.halfHydrogenWidth + hydrogenCountWidth, hy + this.opts.fifthFontSizeSmall);
+            ctx.fillText(hydrogens.toString(), hx + this.halfHydrogenWidth + hydrogenCountWidth, hy + this.opts.fifthFontSizeSmall);
 
             cursorPos += hydrogenWidth + this.halfHydrogenWidth + hydrogenCountWidth;
         }

src/Drawer.js

@@ -27,16 +27,28 @@ class Drawer {
    * Draws the parsed smiles data to a canvas element.
    *
    * @param {Object} data The tree returned by the smiles parser.
-   * @param {(String|HTMLCanvasElement)} target The id of the HTML canvas element the structure is drawn to - or the element itself.
+   * @param {string|String|HTMLCanvasElement} target The id of the HTML canvas element the structure is drawn to - or the element itself.
    * @param {String} themeName='dark' The name of the theme to use. Built-in themes are 'light' and 'dark'.
    * @param {Boolean} infoOnly=false Only output info on the molecule without drawing anything to the canvas.
    */
   draw(data, target, themeName = 'light', infoOnly = false, highlight_atoms = []) {
-    let canvas = null;
-    if (typeof target === 'string' || target instanceof String) {
-      canvas = document.getElementById(target);
-    } else {
-      canvas = target;
+    let element = null;
+    let canvas  = null;
+    if (target instanceof String) {
+      element = document.getElementById(target.valueOf());
+    }
+    else if (typeof target === 'string') {
+      element = document.getElementById(target);
+    }
+    else {
+      element = target;
+    }
+
+    if (element instanceof HTMLCanvasElement) {
+      canvas = element;
+    }
+    else {
+      throw Error("First argument was not a canvas or the ID of a canvas.");
     }
 
     let svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
@@ -63,7 +75,7 @@ class Drawer {
    * @returns {String} The molecular formula.
    */
   getMolecularFormula() {
-    this.svgDrawer.getMolecularFormula();
+    return this.svgDrawer.getMolecularFormula();
   }
 }
 

src/GaussDrawer.js

@@ -145,8 +145,6 @@ class GaussDrawer {
 
     /**
      * Get the canvas as an SVG element.
-     * 
-     * @param {CallableFunction} callback
      */
     getSVG() {
         return convertImage(this.context.getImageData(0, 0, this.width, this.height));
@@ -159,7 +157,6 @@ class GaussDrawer {
      * @param {Number} r The red colour-component.
      * @param {Number} g The green colour-component.
      * @param {Number} b The blue colour-component.
-     * @param {Number} a The alpha colour-component.
      */
     setPixel(vec, r, g, b) {
         this.context.fillStyle = "rgba(" + r + "," + g + "," + b + "," + this.opacity + ")";

src/Graph.js

@@ -596,7 +596,7 @@ class Graph {
     var i = vertexIds.length;
     while (i--) {
       let vertex = this.vertices[vertexIds[i]];
-      var j = vertex.neighbours.length;
+      let j = vertex.neighbours.length;
     }
 
     let matDist = this.getSubgraphDistanceMatrix(vertexIds);
@@ -629,7 +629,7 @@ class Graph {
     i = length;
     while (i--) {
       matLength[i] = new Array(length);
-      var j = length;
+      let j = length;
       while (j--) {
         matLength[i][j] = bondLength * matDist[i][j];
       }
@@ -640,7 +640,7 @@ class Graph {
     i = length;
     while (i--) {
       matStrength[i] = Array(length);
-      var j = length;
+      let j = length;
       while (j--) {
         matStrength[i][j] = edgeStrength * Math.pow(matDist[i][j], -2.0);
       }

src/MathHelper.js

@@ -11,8 +11,13 @@ class MathHelper {
      * @returns {Number} A number rounded to a given number of decimals.
      */
     static round(value, decimals) {
-        decimals = decimals ? decimals : 1;
-        return Number(Math.round(value + 'e' + decimals) + 'e-' + decimals);
+        if (decimals) {
+            const pow = Math.pow(10, decimals)
+            return Math.round(value * pow) / pow
+        }
+        else {
+            return Math.round(value)
+        }
     }
 
     /**

src/PixelsToSvg.js

@@ -5,13 +5,12 @@ function convertImage(img) {
 
     function each(obj, fn) {
         var length = obj.length,
-            likeArray = (length === 0 || (length > 0 && (length - 1) in obj)),
-            i = 0;
+            likeArray = (length === 0 || (length > 0 && (length - 1) in obj));
 
         if (likeArray) {
-            for (; i < length; i++) { if (fn.call(obj[i], i, obj[i]) === false) { break; } }
+            for (let i = 0; i < length; i++) { if (fn.call(obj[i], i, obj[i]) === false) { break; } }
         } else {
-            for (i in obj) { if (fn.call(obj[i], i, obj[i]) === false) { break; } }
+            for (const i in obj) { if (fn.call(obj[i], i, obj[i]) === false) { break; } }
         }
     }
 

src/SSSR.js

@@ -127,17 +127,23 @@ class SSSR {
         let d = Array(length);
         let pe = Array(length);
         let pe_prime = Array(length);
+
+        // Dummy initializations to set the TypeScript type:
+        var i = 0;
+        var j = 0;
+        var k = 0;
+
         var l = 0;
         var m = 0;
         var n = 0;
 
-        var i = length;
+        i = length;
         while (i--) {
             d[i] = Array(length);
             pe[i] = Array(length);
             pe_prime[i] = Array(length);
 
-            var j = length;
+            j = length;
             while (j--) {
                 d[i][j] = (i === j || adjacencyMatrix[i][j] === 1) ? adjacencyMatrix[i][j] : Number.POSITIVE_INFINITY;
 
@@ -151,8 +157,7 @@ class SSSR {
             }
         }
 
-        var k = length;
-        var j;
+        k = length;
         while (k--) {
             i = length;
             while (i--) {
@@ -162,7 +167,6 @@ class SSSR {
                     const newPathLength = d[i][k] + d[k][j];
 
                     if (previousPathLength > newPathLength) {
-                        var l, m, n;
                         if (previousPathLength === newPathLength + 1) {
                             pe_prime[i][j] = [pe[i][j].length];
                             l = pe[i][j].length
@@ -196,7 +200,6 @@ class SSSR {
                         }
                     } else if (previousPathLength === newPathLength) {
                         if (pe[i][k].length && pe[k][j].length) {
-                            var l;
                             if (pe[i][j].length) {
                                 let tmp = Array();
 
@@ -227,7 +230,6 @@ class SSSR {
                             }
                         }
                     } else if (previousPathLength === newPathLength - 1) {
-                        var l;
                         if (pe_prime[i][j].length) {
                             let tmp = Array();
 

src/SmilesDrawer.js

@@ -65,12 +65,12 @@ class SmilesDrawer {
             if (element.hasAttribute('data-smiles-options') || element.hasAttribute('data-smiles-reaction-options')) {
                 let moleculeOptions = {};
                 if (element.hasAttribute('data-smiles-options')) {
-                    moleculeOptions = JSON.parse(element.getAttribute('data-smiles-options').replaceAll('\'', '"'));
+                    moleculeOptions = JSON.parse(element.getAttribute('data-smiles-options').replace(/'/g, '"'));
                 }
 
                 let reactionOptions = {};
                 if (element.hasAttribute('data-smiles-reaction-options')) {
-                    reactionOptions = JSON.parse(element.getAttribute('data-smiles-reaction-options').replaceAll('\'', '"'));
+                    reactionOptions = JSON.parse(element.getAttribute('data-smiles-reaction-options').replace(/'/g, '"'));
                 }
 
                 let smilesDrawer = new SmilesDrawer(moleculeOptions, reactionOptions);
@@ -104,7 +104,7 @@ class SmilesDrawer {
                 info.lastIndexOf('__')
             );
 
-            settings = JSON.parse(settingsString.replaceAll('\'', '"'));
+            settings = JSON.parse(settingsString.replace(/'/g, '"'));
         }
 
         let defaultSettings = {

src/Vector2.js

@@ -17,7 +17,7 @@ class Vector2 {
         if (arguments.length == 0) {
             this.x = 0;
             this.y = 0;
-        } else if (arguments.length == 1) {
+        } else if (x instanceof Vector2) {
             this.x = x.x;
             this.y = x.y;
         } else {

src/Vertex.js

@@ -246,15 +246,12 @@ class Vertex {
       textAngle = Math.round(Math.round(textAngle / halfPi) * halfPi);
     }
 
-
-
-
     if (textAngle === 2) {
       return 'down';
     } else if (textAngle === -2) {
       return 'up';
-    } else if (textAngle === 0 || textAngle === -0) {
-      return 'right'; // is checking for -0 necessary?
+    } else if (textAngle === 0) {
+      return 'right';
     } else if (textAngle === 3 || textAngle === -3) {
       return 'left';
     } else {

tsconfig.json

@@ -0,0 +1,10 @@
+{
+  "compilerOptions": {
+    "lib": ["es6", "dom"],
+    "target": "es2015",
+    "allowJs": true
+  },
+  "files": [
+    "app.js"
+  ]
+}