Source: curves-grid.js

  1. /**
  2.  * Grid module of the GSfc4q project.
  3.  * Source-code:  https://github.com/ppkrauss/Sfc4q
  4.  * License: Apache2, http://www.apache.org/licenses/LICENSE-2.0
  5.  */
  8. /**
  9.  * Grid of a [Space-Filling Curve](https://en.wikipedia.org/wiki/Space-filling_curve) (SFC) of recursive
  10.  * 4-partitions of quadrilaterals. This class implements geometry and operations to handle grids.
  11.  * It is used as complement of the Sfc4q class.
  12.  *
  13.  * Concepts:
  14.  *
  15.  * **grid** of the **unit square** (canvas box): the mathematical entity used as total area filled by the SFC, is the unit square. It can be transformed into any other quadrilateral, it is a reference **canvas geometry**. Partitions over unit square produces the grid of *blevel*. The SFC forms a path conecting centers of the cells of the grid, and SFC distance is used as index to identify the cells of the grid. The set of all *blevel* grids can be named "hierarchical grid", but sometimes we abbreviate to "grid". Grids of *isHalf* levels are named "degenerated grids". The unit square with no partition is the primordial cell, a grid of level zero.
  16.  *
  17.  * **box width** and **box height**: the  unit square is projected to a real "box", used as canvas of the grid.
  18.  *
  19.  * **sfc4**: any SFC object used as reference for *level*, *blevel*, *key*, *bkey*, *id0*, *id* and its labels and operations, mainly decode/encode to IJ coordinates. Typical objects are instances of the *GSfc4qLbl* class extensions to concrete curves, like *GSfc4qLbl_Morton* or *GSfc4qLbl_Hilbert* classes.
  20.  *
  21.  * **(i,j)** coordinates, or "integer [XY grid](https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/Positions#The_grid)": see grid of the "blind structure". ![](../assets/svg_coordinates.png)
  22.  *   <br/>“i” and “j” are integers in the range [0,2^blevel-1]. IJ=(0,0) in the top-left corner.
  23.  *   <br/>“i” scan columns from left to right, “j” scan lines from top to bottom.
  24.  *
  25.  * Concepts implemented by the Sfc4q class: *level*, *blevel*, *key*, *bkey*, *IJ* coordinates, (i,j).
  26.  *
  27.  */
  28. class GridOfCurve {
  30.   constructor(sfc4, box_width, box_height=null) {
  31.     if (sfc4!==undefined)
  32.       this.refresh(sfc4,box_width,box_height)
  33.     else console.log("ERROR: GridOfCurve(null) is perhaps invalid")
  34.   }
  36.   refresh(sfc4, box_width, box_height=null) {
  37.     // CONFIGS:
  38.     if (sfc4)       this.sfc4 = sfc4; // else reuse or error
  39.     this.box_width  = box_width || this.box_width || null; // null for GridOfCurve_D3.buildSvg()
  40.     this.box_height = box_height || this.box_height || this.box_width;
  41.     this.refreshProperties()
  42.   }
  44.   refreshProperties(novoLevel=null) {
  45.     if (this.sfc4!==null && this.box_width) {
  46.       if (novoLevel) this.sfc4.refresh(novoLevel);
  47.       if (!this.box_height) this.box_height =this.box_width;
  48.       this.needSwap = this.sfc4.needSwap && (this.box_width != this.box_height)
  49.       this.cell_refWidth  = this.box_width/Number(this.sfc4.nRefRows)
  50.       this.cell_refHeight = this.box_height/Number(this.sfc4.nRefRows)
  51.       this.cell_area   = this.box_width*this.box_height/Number(this.sfc4.nBKeys) // MUST be constant!
  52.       // properties of the unit grid, used in (s,t) coordinates:
  53.       // usar SizedBigInt.bigint_div():
  54.       //  this.cell_stWidth = 1n/this.sfc4.nRefRows    // and height==width
  55.       //  this.cell_stArea  = 1n/this.sfc4.nBKeys
  56.     }
  57.   }
  59.   /**
  60.    * Translates (i,j) coordinates to (x,y) coordinates, using grid properties.
  61.    * @param integer i: the grid row coordinate.
  62.    * @param integer j: the grid column coordinate.
  63.    * @return [float,float].
  64.    */
  65.   ij_to_xy(i,j,shift=0) { // if rotates, must be checked
  66.     if (shift) [i,j] = [i+shift, j+shift]; // cast to float
  67.     if (this.needSwap) {
  68.       let [x,y] = this.sfc4.ij_swapSides(i,j,this.cell_refWidth,this.cell_refHeight)
  69.       return [i*x, j*y]
  70.     } else
  71.       return [i*this.cell_refWidth, j*this.cell_refHeight]
  72.   }
  74.   ij_to_xyCenter(i,j) {
  75.     return this.ij_to_xy(i,j,0.5)
  76.   }
  78.   /**
  79.    * Translates (x,y) coordinates to (i,j) coordinates, using grid properties.
  80.    * @param float x: the spatial X coordinate.
  81.    * @param float y: the spatial Y coordinate.
  82.    * @return [integer,integer].
  83.    */
  84.   xy_to_ij(x,y) {
  85.     let ref_i = Math.floor(x/this.cell_refWidth),
  86.         ref_j = Math.floor(y/this.cell_refHeight)
  87.     if (this.needSwap) {
  88.       console.log("BUG: needSwap need to develop xy_to_ij()")
  89.       // for Hilbert can check S2 geometry, a (s,t) to (i,j) resolution.
  90.       // use ij_nSwaps(ref_i,ref_j) as first guess
  91.       // scan to obtain number of xSwaps and ySwaps... use the unit s,t before x,y.
  92.     } else
  93.       return [ref_i,ref_j];
  94.   }
  96. } // \GridOfCurve
  99. /**
  100.  * D3 grid, a GridOfCurve class extension.  D3 is the [D3js.org](https://D3js.org) framework, used to build the grid and its tools.
  101.  */
  102. class GridOfCurve_D3 extends GridOfCurve {
  104.   constructor(conf, sfc4, layout, box_width, box_height=null, grdID=1, reftab='chartsContainer') {
  105.     const toBuildHere=true, toBuildToolTip=true  // future configs
  106.     if (typeof conf == 'object') {
  107.       super(conf.sfc4, conf.box_width, conf.box_height)
  108.       this.refresh_D3(conf.domRef_id, conf.grdID, conf.reftab)
  109.       layout = conf.layout
  110.     }  else if (conf!==undefined) {
  111.       super(sfc4, box_width, box_height)
  112.       this.refresh_D3(conf, grdID, reftab)
  113.     }
  114.     this.layout = layout || {rects:true, circles:true, labelMain:true, labelIJ:true};
  115.     this.distinctColors = {}
  116.     this.lblBase='std'
  117.     this.lblChk = null
  118.     this.D3canvas = null
  119.     if (toBuildHere) this.build(true)
  120.     if (toBuildToolTip) this.tooltip_build() // conferir se precisa rebuild das propriedades do data
  121.     this.build_zoomTool() // need if
  122.   }
  124.   refresh_D3(domRef_id, grdID, reftab) {
  125.     this.domRef_id = domRef_id || null
  126.     this.grdID     = grdID     || null
  127.     this.reftabDOM = document.getElementById(reftab);
  128.     if (!this.reftabDOM) console.log("ops, need CORRECT 'reftab' for canvas sizes")
  129.     // check need for call buildSvg() here
  130.   }
  132.   buildSvg(firstBuild=true,colwidth=40) {
  133.     if (firstBuild || !this.D3_svg) {
  134.         if (this.D3_svg)
  135.           this.D3_svg.selectAll("*").remove(); // testar
  136.         if (!this.box_width) {
  137.           let refWidth = parseInt( this.reftabDOM.getBoundingClientRect().width/2.0 );
  138.           this.box_width = Math.min(window.innerWidth, refWidth) - colwidth;
  139.           this.refreshProperties()
  140.         }
  141.         if (this.box_width< conf_canvasWidth_min) {
  142.             let perc = Math.round( 100*(conf_canvasWidth_min-this.box_width)/conf_canvasWidth_min )
  143.             let msg = `This visualization not works with small screens.\nPlease use a screen ${perc}% bigger.`
  144.             if (conf_alertLevel>1) alert(msg); else console.log(msg);
  145.         }
  146.         let theChart = '#'+ this.domRef_id +' svg.theChart';
  147.         this.D3_svg0 = d3.select(theChart).attr("width", this.box_width+10).attr("height", this.box_width+10)
  148.         this.D3canvas = this.D3_svg0
  149.         this.D3_svg = this.D3_svg0.append("g"); // set reference D3 for all builds
  150.         this.D3_svg.attr("class", "the_grid" + (this.grdID? ` grdID${this.grdID}`: '') );
  151.     } else
  152.       this.D3_svg.selectAll("*").remove(); // remove elements from svg/g, preserve SVG attributes and catchall
  153.   } // \buildSvg
  155.   bitsToColors(bs,len) { // enhancing prefixes
  156.     if (typeof bs != 'string') return null; // ensure
  157.     if (bs.length<len) bs = bs.padStart(len,'0')
  158.     let d;
  159.     if (len%2) { bs+='0'; len++; } // more one bit if not even
  160.     if (len<6) {
  161.       let R = '1'+bs.slice(0,1) + bs.slice(0,2).padEnd(2,'1')
  162.       let G = '1'+bs.slice(3,4) + bs.slice(3,5).padEnd(2,'1')
  163.       let B = (len>2? bs.slice(-2): '11')
  164.       d=[ R, G, '1'+B+B.slice(0,1) ]      // binary RGB color
  165.     } else if (len==12)
  166.       return '#'+parseInt(bs,2).toString(16).padStart(3,'0')
  167.     else {
  168.       let R = bs.slice(0,4)
  169.       let G = bs.slice(1,2)+bs.slice(3,len<13?5:6).padEnd(3,'1')
  170.       let B = bs.slice(-4) // (bs.slice(0,1)=='0')? ('1'+bs.slice(-3)): bs.slice(-4)
  171.       d=[R, G, B ]        // binary RGB color
  172.     }
  173.     let dHex = d.map(x => parseInt(x,2).toString(16) ).join('')
  174.     return '#'+dHex;
  175.   }
  177.   dataBuild(stopOn=0,xpos=1,ypos=1,useDstClrs=true) {
  178.     if (!stopOn) this.distinctColors = {}
  179.     let nBKeys = Number(this.sfc4.nBKeys) // revisar!
  180.     let nBKeysFrac = Math.round(nBKeys/150)
  181.     if (this.sfc4.isHalf) nBKeys = nBKeys/2;
  182.     let rw0 = this.cell_refWidth
  183.     let rh0 = this.cell_refHeight
  184.     var r = [].fill(null,0,nBKeys-1)  // será revisto e oTheFly!
  185.     var mySfc = this.sfc4
  186.     const lblBase = this.lblBase
  187.     const lblIs32  = (lblBase=='32' && !(this.sfc4.level%2.5))
  188.     const lblIs16  = (this.sfc4.level>2)
  189.     const lblIsDec = (lblBase=='dec')
  190.     this.lblChk = [
  191.       lblIsDec,lblIs32,lblIs16,  // using check-order
  192.       lblIsDec? "decimal": lblIs32? "base 32": lblIs16? "base 16h": "base 4h"
  193.     ];
  194.     if (stopOn===true) stopOn = Math.round(nBKeys/3) // 2*Math.sqrt(nBKeys)
  195.     let maxIdLoop = (stopOn && nBKeys>4)? stopOn: nBKeys;
  196.     for(let id=0; id<maxIdLoop; id++) {
  197.       let [ij0,ij1] = this.sfc4.key_decode(id)
  198.       let xy = this.ij_to_xy( ij0[0], ij0[1] )  //xy0
  199.       let rw = rw0, rh = rh0;
  200.       let idx = mySfc.setKey(id);
  201.       let colorCode = this.bitsToColors( idx.id_toString('2'), idx.keyBits ) // toBitString
  202.       let id4 = idx.id_toString('4h'),     id16   = idx.id_toString('16h'),
  203.           id32 = idx.id_toString('32nvu')
  204.       if (this.sfc4.isHalf) {
  205.          let xy1 = this.ij_to_xy( ij1[0], ij1[1] )
  206.          if (Math.abs(xy[0]-xy1[0]) > 0) rw = rw*2;  // revisar
  207.          if (Math.abs(xy[1]-xy1[1]) > 0) rh = rh*2;
  208.          xy[0] = Math.min(xy[0],xy1[0]);
  209.          xy[1] = Math.min(xy[1],xy1[1]);
  210.       }
  211.       let idPub = lblIsDec? id: lblIs32? id32: lblIs16? id16: id4;
  212.       if (!stopOn && useDstClrs && (nBKeys<150 || (id%nBKeysFrac)==1) )
  213.         this.distinctColors[colorCode] = idPub;
  214.       r[id] = { id:id, idPub:idPub, i:ij0[0], j:ij0[1], x:xy[0], y:xy[1], width:rw, height:rh, color:colorCode };
  215.     }
  216.     return r;
  217.   }
  219.   build(firstBuild=true, line_width=2) { //  draw grid!
  220.     if (conf_alertLevel>1) console.log("debug build:",this.sfc4.curveName)
  221.     this.buildSvg(firstBuild);
  222.     var myThis = this
  223.     let rw = this.cell_refWidth
  224.     var mySfc = this.sfc4
  225.     let nBKeys = Number(mySfc.nBKeys)
  226.     let bits = (mySfc.nBKeys-1n).toString(2).length
  227.     var sbi = new SizedBigInt(); // this.sfc4.setID_byKey(3):
  228.     let D3DataEnter = this.D3_svg.selectAll()
  229.       .data( this.dataBuild() )
  230.       .enter()
  232.     if (this.layout.rects && rw>15) // // // Red rectangular grid:
  233.       D3DataEnter.append("rect")
  234.       .attr("x", d => d.x ).attr("y", d => d.y )
  235.       .attr("width",d => d.width).attr("height",d => {return d.height})
  236.       .style("fill","#FFF").style("stroke","#F00");
  238.     let fracTime = ((nBKeys>1000)? 9000: (nBKeys>200)? 3800: 2800)/nBKeys;
  239.     //let fracFirst = nBKeys/((nBKeys>1000)? 100: (nBKeys>10)? 10: 2);
  240.     if (this.layout.circles)  // // // Colured centroid and point-grid circles:
  241.       D3DataEnter.append("circle")
  242.       .attr('cx', d => d.x + d.width/2)
  243.       .attr('cy', d => d.y + d.height/2)
  244.       .attr("r", rw/3)  // (rw<20)? 5:10
  245.       .style("fill", d=> d.color )
  246.       .call( (s,lev) => {if (lev<4) s.style("stroke", "#F00")}, mySfc.level)
  247.       // animation:
  248.       .style("opacity", 0).transition()
  249.         .duration(0)
  250.         .delay(  (_, i) => i*fracTime + (i?4:0)*fracTime/Math.log2(2+i)  )
  251.         .style("opacity", 1);
  253.     if (this.layout.labelMain && rw>20) { // cell ID label text
  254.       let test = this.dataBuild(true);
  255.       if (this.sfc4.nBKeys>4n && test.length>1) this.D3_svg.selectAll()
  256.         .data( test )
  257.         .enter().append("text")
  258.           .attr("x", d => d.x+rw/2.1 -1 )
  259.           .attr("y", d => d.y+rw/1.7 +1)
  260.           .text( d => d.idPub )
  261.           .style("font-size", (rw<40)? "12pt":"14pt")
  262.           .attr("fill","#FFF").style("style","label");
  264.       D3DataEnter.append("text")
  265.       .attr("x", d => d.x+rw/2.1 )
  266.       .attr("y", d => d.y+rw/1.7 )
  267.       .text( d => d.idPub )
  268.       .style("font-size", (rw<40)? "10pt":"12pt").style("style","label")
  269.       /* .call( (s,cond) => {
  270.         if (cond) s.attr("transform", "translate(2,2) rotate(90)")
  271.         console.log(cond)
  272.       }, mySfc.isHalf && d.width<d.height);
  273.       */
  274.     }
  276.     if (this.layout.labelIJ && rw>35) // (i,j) label text
  277.       D3DataEnter.append("text")
  278.       .attr("x", d => d.x+0.3 + (mySfc.isHalf? 0.8: 0))
  279.       .attr("y", d => d.y+10 )
  280.       .text( d => `${d.i},${d.j}` )
  281.       .style("font-size", "8pt").attr("fill","#A44").style("style","label");
  282.   } // \build
  284.   buildCaption(svgSelect='#rainbow svg')  {
  285.     const myC = this.distinctColors,
  286.           wd = 10,
  287.           wdExtra = wd+30,
  288.           yShift = 15
  289.     var colors = Object.keys(this.distinctColors)
  290.     var myC_len = colors.length
  291.     var myC_lenFrac = Math.round(myC_len/12)
  292.     var h = this.box_width/(myC_len+1)
  293.     colors.sort()
  294.     let rb = d3.select(svgSelect)
  295.     rb.selectAll("*").remove();
  296.     rb.attr("width", wdExtra)
  297.       .attr("height", this.box_width+20);
  299.     rb.selectAll().data( colors ).enter().append("rect")
  300.       .attr("x", 0 )
  301.       .attr("y", (d,i) => i*h + yShift)
  302.       .attr("width",wd).attr("height",h)
  303.       .style("fill",d=>d);
  304.     rb.selectAll().data( colors ).enter().append("text")
  305.       .attr("x", wd )
  306.       .attr("y", (d,i) => h+i*h+yShift )
  307.       .text( (d,i) => (myC_len<9 || (i%myC_lenFrac)==0)? myC[d]: '' )
  308.       .style("font-size","8pt").attr("fill","#000").style("style","label");
  309.   }
  311.   tooltip_msg(ij) {
  312.     const lck = this.lblChk
  313.     if (lck===null) return '';
  314.     let id = this.sfc4.sbiID.val // number
  315.     let id4  = this.sfc4.id_toString('4h')
  316.     let id16 = this.sfc4.id_toString('16h')
  317.     let id32 = this.sfc4.id_toString('32nvu')
  318.     let idPub     = lck[0]? id: lck[1]? id32: lck[2]? id16: id4;
  319.     let hex = (!lck[0] && !lck[1] && lck[2])?
  320.               '':    `base 16h: ${adTag(id16)}`;
  321.     let dec = lck[0]?  '':  `decimal: ${adTag(id)}${hex? '<br/>':''}`;
  322.     let b4  = (idPub!=id4)? `<br/>base4h: ${adTag(id4)}`: '';
  323.     return `${lck[3]}: ${adTag(idPub)}<hr/> ${dec}${hex}${b4}<br/>(<i>i,j</i>)=(${ij[0]},${ij[1]})`;
  324.   }
  326.   tooltip_build() {
  327.   	const domRef = d3.select('#'+ this.domRef_id);
  328.   	const tpNode = domRef.select('div.theChartTooltip');
  329.   	var mySVG   = this.D3_svg;
  330.   	var myThis  = this;
  331.     var mySfc = this.sfc4  //const
  332.     var lastCellPos = [null,null];
  333.   	this.D3canvas  // BUG on catchall!
  334.     	.on('mouseover', function() {
  335.       	tpNode.style("display", "inline");
  336.     	})
  337.     	.on('mouseout', function() {
  338.         tpNode.style("display", "none");
  339.         // must to draw and drop rectangle, not reuse background.
  340.         /* revisar class xy, melhor usar Key como seletor, k123, visto que é seletor local
  341.         if (lastCellPos[0]!==null) {
  342.       		mySVG.select(`rect.xy${lastCellPos[0]}-${lastCellPos[1]}`).style("fill", '#FFF');
  343.       		if (this.sfc4.isHalf) //NAO PRECISA MAIS pois é key
  344.       			mySVG.select(`rect.xy${lastCellPos[3]}-${lastCellPos[4]}`).style("fill", '#FFF'); // lastCellPos[2]
  345.       	}
  346.         */
  347.       	lastCellPos = [null,null];
  348.   	})
  349.     .on('mousemove', function () {
  350.       // falta pintar um retangulo
  351.       var coords = d3.mouse(mySVG.node());
  352.       var grd_IJ = myThis.xy_to_ij(coords[0], coords[1]);
  353.       if (lastCellPos[0]!=grd_IJ[0] || lastCellPos[1]!=grd_IJ[1]) { // only to reduce CPU costs
  354.         mySfc.setBkey_byIJ(grd_IJ)
  355.         let msg = myThis.tooltip_msg(grd_IJ)
  356.         tpNode.html(msg)
  357.         lastCellPos = grd_IJ
  358.       }
  359.       tpNode.style('left', d3.event.pageX+'px')
  360.             .style('top', d3.event.pageY+'px');
  361.     })
  362.     .append("rect")  // the "catch all mouse event" area
  363.       .attr("x",0).attr("y",0)
  364.       .attr("class", "catchall") // see https://stackoverflow.com/a/16923563/287948 and  http://jsfiddle.net/H3W3k/
  365.       .attr("width",myThis.box_width).attr("height",myThis.box_width)
  366.       .style('visibility', 'hidden')
  367.       //.attr("opacity", 0.0).style("fill","#FFF").style("stroke","#F00"); // need only the external line
  368.     ; // \D3canvas
  370.   } // \Tooltip
  372.   build_zoomTool() {
  373.     // Canvas zoom/pan
  374.     let bxw = this.box_width+10;
  375.     let canvas = this.D3canvas
  376.     this.D3_svg0.call(d3.zoom()
  377.         .translateExtent([ [0,0], [bxw,bxw] ])
  378.         .scaleExtent([1, Infinity])
  379.         .on("zoom", function() {
  380.           if (xzoomNode.value==1)
  381.             canvas.attr("transform", d3.event.transform);
  382.         })
  383.     );
  384. } // build_zoomTool
  387. } // \GridOfCurve_D3
  390. ////////////// non-exported components of this module.
  392. function adTag(s,tag="code") { return `<${tag}>${s}</${tag}>`; }
  395. function baseItens(sbi_id,ij) {
  396.   // Here define the presentation order of bases.
  397.   let crvID   = sbi_id.val // or int
  398.   var crvID4  = sbi_id.toString('4h');  // parseInt(crvID).toString(4).padStart(globOrder,'0');
  399.   var crvID16 = sbi_id.toString('16h'); // parseInt(crvID).toString(16).padStart(globOrder,'0');
  400.   var crvID32 = sbi_id.toString('32nvu');  // parseInt(crvID).toString(32).padStart(globOrder/2,'0');
  401.   let msgb32 = (globOrder_exact % 2.5)? '': `<hr/>base32nvu: ${adTag(crvID32)}`;
  402.   let msg;
  403.   if (globOrder_exact>2) msg = `base16h: ${adTag(crvID16)}${msgb32}<hr/>base4: ${adTag(crvID4)}`;
  404.   else msg = `base4h: ${adTag(crvID4)}<hr/>base16h: ${adTag(crvID16)}`;
  405.   return msg + `<br/>decimal: ${adTag(crvID)}<br/>(i,j)=(${ij[0]},${ij[1]})`;
  406. }