Fix markers scaling in node.js, harmonize createPoints

Author: linev

changes.md

@@ -15,7 +15,7 @@
 12. Support custom mouse click/dblcklick handlers for lego plots
 13. Implement marker styles 35 - 49
 14. Let switch orthographic camera in geometry via control gui (#217)
-15. Fix drawing of custom markers on 3D (#205)
+15. Fix drawing of custom markers on 3D, also in node.js (#205)
 
 
 ## Changes in 6.1.1

scripts/JSRoot.base3d.js

@@ -1310,7 +1310,7 @@ JSROOT.define(['d3', 'threejs_jsroot', 'painter'], (d3, THREE, jsrp) => {
       this.pos[this.indx]   = x;
       this.pos[this.indx+1] = y;
       this.pos[this.indx+2] = z;
-      this.indx+=3;
+      this.indx += 3;
    }
 
    /** @summary Create points */
@@ -1329,61 +1329,48 @@ JSROOT.define(['d3', 'threejs_jsroot', 'painter'], (d3, THREE, jsrp) => {
       if (args.style === 6) k = 0.5; else
       if (args.style === 7) k = 0.7;
 
-      let material;
-
-      if ((k !== 1) || (JSROOT.nodejs && !args.promise)) {
-         // this is plain creation of points, no texture loading, which does not work in node.js
-         material = new THREE.PointsMaterial({ size: (this.webgl ? 3 : 1) * this.scale * k, color: args.color });
-
-      } else {
-
-         let handler = new JSROOT.TAttMarkerHandler({ style: args.style, color: args.color, size: 7 }),
-             w = handler.fill ? 1 : 7,
-             dataUrl = 'data:image/svg+xml;utf8,' +
-                       '<svg width="64" height="64" xmlns="http://www.w3.org/2000/svg">' +
-                       `<path d="${handler.create(32,32)}" stroke="${handler.getStrokeColor()}" stroke-width="${w}" fill="${handler.getFillColor()}"/>` +
-                       '</svg>',
-             loader = new THREE.TextureLoader();
-
-         if (args.promise && !JSROOT.nodejs)
-            return new Promise(resolveFunc => {
-               loader.load(dataUrl, texture => {
-                  material = new THREE.PointsMaterial({ size: 3*this.scale, map: texture, transparent: true });
-                  let pnts = new THREE.Points(this.geom, material);
-                  pnts.nvertex = 1;
-                  resolveFunc(pnts);
-               });
-            });
+      let makePoints = (material, skip_promise) => {
+         let pnts = new THREE.Points(this.geom, material);
+         pnts.nvertex = 1;
+         return !args.promise || skip_promise ? pnts : Promise.resolve(pnts);
+      };
 
-        if (args.promise && JSROOT.nodejs) {
+      // this is plain creation of points, no need for texture loading
+      if ((k !== 1) || (JSROOT.nodejs && !args.promise))
+         return makePoints(new THREE.PointsMaterial({ size: 3*this.scale * k, color: args.color }));
+
+      let handler = new JSROOT.TAttMarkerHandler({ style: args.style, color: args.color, size: 7 }),
+          w = handler.fill ? 1 : 7,
+          dataUrl = 'data:image/svg+xml;utf8,' +
+                    '<svg width="64" height="64" xmlns="http://www.w3.org/2000/svg">' +
+                    `<path d="${handler.create(32,32)}" stroke="${handler.getStrokeColor()}" stroke-width="${w}" fill="${handler.getFillColor()}"/>` +
+                    '</svg>',
+          loader = new THREE.TextureLoader();
+
+      if (args.promise) {
+         let texture_promise;
+         if (JSROOT.nodejs) {
             const { createCanvas, loadImage } = require('canvas');
 
-            return new Promise(resolveFunc => {
-               loadImage(dataUrl).then(img => {
-                  const canvas = createCanvas(64, 64);
-                  const ctx = canvas.getContext('2d');
-                  ctx.drawImage(img, 0, 0, 64, 64);
-                   let  texture = new THREE.CanvasTexture(canvas);
-                   texture.needsUpdate = true;
-                   material = new THREE.PointsMaterial({ size: 3*this.scale, map: texture, transparent: true });
-                   let pnts = new THREE.Points(this.geom, material);
-                   pnts.nvertex = 1;
-                   resolveFunc(pnts);
-               });
+            texture_promise = loadImage(dataUrl).then(img => {
+               const canvas = createCanvas(64, 64);
+               const ctx = canvas.getContext('2d');
+               ctx.drawImage(img, 0, 0, 64, 64);
+               return new THREE.CanvasTexture(canvas);
+             });
+
+         } else {
+            texture_promise = new Promise(resolveFunc => {
+               loader.load(dataUrl, texture => resolveFunc(texture));
             });
          }
 
-         let texture = loader.load(dataUrl);
-
-         material = new THREE.PointsMaterial({ size: (this.webgl ? 3 : 1) * this.scale, map: texture, transparent: true });
+         return texture_promise.then(texture => makePoints(new THREE.PointsMaterial({ size: 3*this.scale, map: texture, transparent: true }), true));
       }
 
-      let pnts = new THREE.Points(this.geom, material);
-      pnts.nvertex = 1;
-      return args.promise ? Promise.resolve(pnts) : pnts;
+      return makePoints(new THREE.PointsMaterial({ size: 3*this.scale, map: loader.load(dataUrl), transparent: true }));
    }
 
-
    // ==============================================================================
 
    /** @summary Create material for 3D line