Let draw TGeo object inside TCanvas

Author: linev

changes.md

@@ -4,6 +4,7 @@
 1. Fix bug in handling superimposing items via URL syntax
 2. Enable geometry clipping in node.js
 3. Upgrade node.js packages
+4. Let draw TGeo object inside TCanvas
 
 
 ## Changes in 6.3.3

scripts/JSRoot.geom.js

@@ -3219,41 +3219,65 @@ JSROOT.define(['d3', 'three', 'geobase', 'painter', 'base3d'], (d3, THREE, geo,
             return this.drawCount(uniquevis, spent);
       }
 
+      let promise = Promise.resolve(true);
+
       if (!this._scene) {
 
          // this is limit for the visible faces, number of volumes does not matter
          this.ctrl.maxlimit = (this._webgl ? 200000 : 100000) * this.ctrl.more;
 
          this._first_drawing = true;
 
-         // activate worker
-         if (this.ctrl.use_worker > 0) this.startWorker();
+         this._on_pad = !!this.getPadPainter();
 
-         jsrp.assign3DHandler(this);
+         if (this._on_pad) {
+            promise = jsrp.ensureTCanvas(this,"3d").then(() => {
 
-         let size = this.getSizeFor3d(this._webgl ? undefined : 3);
+               let fp = this.getFramePainter(),
+                   render3d = jsrp.getRender3DKind();
+               jsrp.assign3DHandler(fp);
 
-         this._fit_main_area = (size.can3d === -1);
+               let size = fp.getSizeFor3d(undefined, render3d);
 
-         let dom = this.createScene(size.width, size.height);
+               this._fit_main_area = (size.can3d === -1);
 
-         this.add3dCanvas(size, dom, this._webgl);
+               let dom = this.createScene(size.width, size.height);
 
-         // set top painter only when first child exists
-         this.setAsMainPainter();
+               fp.add3dCanvas(size, dom, render3d === JSROOT.constants.Render3D.WebGL);
+            });
+
+         } else {
+            // activate worker
+            if (this.ctrl.use_worker > 0) this.startWorker();
+
+            jsrp.assign3DHandler(this);
+
+            let size = this.getSizeFor3d(this._webgl ? undefined : 3);
+
+            this._fit_main_area = (size.can3d === -1);
+
+            let dom = this.createScene(size.width, size.height);
+
+            this.add3dCanvas(size, dom, this._webgl);
+
+            // set top painter only when first child exists
+            this.setAsMainPainter();
+         }
       }
 
-      this.createToolbar();
+      return promise.then(() => {
+         this.createToolbar();
 
-      if (this._clones)
-         return new Promise(resolveFunc => {
-            this._resolveFunc = resolveFunc;
-            this.showDrawInfo("Drawing geometry");
-            this.startDrawGeometry(true);
-         });
+         if (this._clones)
+            return new Promise(resolveFunc => {
+               this._resolveFunc = resolveFunc;
+               this.showDrawInfo("Drawing geometry");
+               this.startDrawGeometry(true);
+            });
 
-      this.completeDraw();
-      return Promise.resolve(this);
+         this.completeDraw();
+         return this;
+      });
    }
 
    /** @summary methods show info when first geometry drawing is performed */
@@ -4021,7 +4045,7 @@ JSROOT.define(['d3', 'three', 'geobase', 'painter', 'base3d'], (d3, THREE, geo,
 
          this.clearTopPainter(); // remove as pointer
 
-         let can3d = this.clear3dCanvas(); // remove 3d canvas from main HTML element
+         let can3d = this._on_pad ? 0 : this.clear3dCanvas(); // remove 3d canvas from main HTML element
 
          if (this._toolbar) this._toolbar.cleanup(); // remove toolbar
 

scripts/JSRoot.gpad.js

@@ -2974,21 +2974,21 @@ JSROOT.define(['d3', 'painter'], (d3, jsrp) => {
          return this.drawPrimitives(indx+1);
       });
    }
-   
+
    /** @summary Divide pad on subpads
      * @returns {Promise} when finished
      * @private */
    TPadPainter.prototype.divide = function(nx, ny) {
       if (!ny) {
          let ndiv = nx;
-         if (ndiv < 2) return Promise.resolve(this); 
+         if (ndiv < 2) return Promise.resolve(this);
          nx = ny = Math.round(Math.sqrt(ndiv));
          if (nx*ny < ndiv) nx += 1;
       }
-      
+
       if (nx*ny < 2) return Promise.resolve(this);
-      
-      let xmargin = 0.01, ymargin = 0.01, 
+
+      let xmargin = 0.01, ymargin = 0.01,
           dy = 1/ny, dx = 1/nx, n = 0, subpads = [];
       for (let iy = 0; iy < ny; iy++) {
          let y2 = 1 - iy*dy - ymargin,
@@ -3014,15 +3014,15 @@ JSROOT.define(['d3', 'painter'], (d3, jsrp) => {
                pad.fAbsXlowNDC = x1;
                pad.fAbsYlowNDC = y1;
             }
-            
+
             subpads.push(pad);
          }
       }
-      
+
       const drawNext = () => {
-         if (subpads.length == 0) 
+         if (subpads.length == 0)
             return Promise.resolve(this);
-         return JSROOT.draw(this.getDom(), subpads.shift()).then(drawNext); 
+         return JSROOT.draw(this.getDom(), subpads.shift()).then(drawNext);
       };
 
       return drawNext();
@@ -4788,14 +4788,6 @@ JSROOT.define(['d3', 'painter'], (d3, jsrp) => {
       return res;
    }
 
-   /** @summary Check if TGeo objects in the canvas - draw them directly */
-   TCanvasPainter.prototype.directGeoDraw = function() {
-      let lst = this.pad ? this.pad.fPrimitives : null;
-      if (lst && (lst.arr.length == 1))
-         if (lst.arr[0] && lst.arr[0]._typename && (lst.arr[0]._typename.indexOf("TGeo")==0))
-            return JSROOT.draw(this.getDom(), lst.arr[0], lst.opt[0]); // return promise
-   }
-
    let drawCanvas = (divid, can, opt) => {
       let nocanvas = !can;
       if (nocanvas) can = JSROOT.create("TCanvas");
@@ -4811,9 +4803,6 @@ JSROOT.define(['d3', 'painter'], (d3, jsrp) => {
          }
       }
 
-      let direct = painter.directGeoDraw();
-      if (direct) return direct;
-
       painter.decodeOptions(opt);
       painter.normal_canvas = !nocanvas;
       painter.createCanvasSvg(0);