Hypergrid v2.1.15

README.md

@@ -8,17 +8,17 @@ It also highlights a DOM-based custom external editor triggered via hypergrid ev
 <img src="images/README/gridshot04.gif">
 
 ## Table of Contents
-* [Current Release](#current-release-2111---12-june-2018)
+* [Current Release](#current-release-2115---29-june-2018)
 * [Demos](#demos)
 * [Features](#features)
 * [Testing](#testing)
 * [Documentation](#developer-documentation)
 * [Roadmap](#roadmap)
 * [Contributing](#contributors)
 
-### Current Release (2.1.14 - 12 June 2018)
+### Current Release (2.1.15 - 29 June 2018)
 
-**Hypergrid 2.1.14** includes bug fixes.
+**Hypergrid 2.1.15** includes bug fixes and new features.
 
 _For a complete list of changes, see the [release notes](https://github.com/fin-hypergrid/core/releases)._
 
@@ -52,13 +52,13 @@ Find more information on our [testing page](TESTING.md)
 
 Primarily our tutorials will be on the [wiki](https://github.com/fin-hypergrid/core/wiki).
 
-We also maintain versioned [online API documentation](https://fin-hypergrid.github.io/core/2.1.14/doc/Hypergrid.html) for all public objects and modules. This documentation is necessarily an on-going work-in-progress.
+We also maintain versioned [online API documentation](https://fin-hypergrid.github.io/core/2.1.15/doc/Hypergrid.html) for all public objects and modules. This documentation is necessarily an on-going work-in-progress.
 
 (Cell editor information can be found [here](https://github.com/fin-hypergrid/core/wiki/Cell-Editors).)
 
 (Cell Rendering information can be found [here](https://github.com/fin-hypergrid/core/wiki/Cell-Renderers).)
 
-Hypergrid global configurations can be found [here](https://fin-hypergrid.github.io/core/2.1.14/doc/module-defaults.html).
+Hypergrid global configurations can be found [here](https://fin-hypergrid.github.io/core/2.1.15/doc/module-defaults.html).
 
 ### Roadmap
 

demo/formatter-workbench/instructions.html

@@ -173,7 +173,7 @@ <h4>Define a new localizer and add it to the grid</h4>
         <li>Code your localizer referring to examples and the <a href="https://fin-hypergrid.github.io/core/doc/localizerInterface.html" target="localizer-docs">localizer interface</a> documentation.</li>
         <li>Be sure to assign your localizer to <code>module.exports</code>.</li>
         <li>Click the <span class="button">grid.localization.add(…)</span> button.</li>
-        <li><em>Optional:</em> Edit the localizer and click <span class="button">grid.localization.add(…)</span> to update it.</li>
+        <li><em>Optional:</em> Edit the localizer and click <span class="button">grid.localization.add(…)</span> again to update it.</li>
     </ol>
 </div>
 
@@ -299,6 +299,7 @@ <h5>Throw error on parser failer</h5>
     <ol>
         <li>In the Localizer pane, select the <code>trend</code> localizer.</li>
         <li>Uncomment the <code><i>if</i></code> statement with the <code><i>throw</i></code> statement within it.</li>
+        <li>Click the <span class="button">grid.localization.add(…)</span> button to update it.</li>
         <li>Edit another cell, again setting the contents to some invalid value.</li>
         <li>Press the <strong>enter</strong> key.</li>
         <li>The parser cannot convert the value.</li>

demo/index.html

@@ -22,7 +22,7 @@
     b = g.behavior,
     m = b.dataModel;">top-level global vars</label>
 
-    <h1 style="margin:.5em; color:lightgrey">Hypergrid 2.1.14 dev testbench</h1>
+    <h1 style="margin:.5em; color:lightgrey">Hypergrid 2.1.15 dev testbench</h1>
 
     <div id="tabs">
         <div id="tab-dashboard">Dashboard</div>

demo/js/demo/index.js

@@ -42,6 +42,7 @@ window.onload = function() {
             margin: { bottom: '17px', right: '17px'},
             schema: schema,
             plugins: require('fin-hypergrid-event-logger'),
+            // canvasContextAttributes: { alpha: false },
             state: { color: 'orange' }
         },
         grid = new Hypergrid('div#json-example', gridOptions),

demo/multiple-grids.html

@@ -5,7 +5,7 @@
     <style> body > div.hypergrid-container { width: 415px; margin-right: 10px; display: inline-block }</style>
 </head>
 <body>
-<h1 style="margin:.5em; color:lightgrey">Hypergrid 2.1.14 multiple grids demo</h1>
+<h1 style="margin:.5em; color:lightgrey">Hypergrid 2.1.15 multiple grids demo</h1>
 
 <script src="build/fin-hypergrid.js"></script>
 

demo/row-props.html

@@ -24,7 +24,7 @@
         div#behind {
             position: absolute;
             visibility: hidden;
-            top: 150px;
+            top: 350px;
             left: 150px;
             width: 400px;
             height: 400px;
@@ -33,16 +33,22 @@
             background-color: orange;
         }
         input[type=range] {
-            width: 100px
+            width: 100px;
+            height: 12px
+        }
+        input[type=color] {
+            width: 12px;
+            height: 12px;
+            padding: 0;
         }
     </style>
 </head>
 <body>
-<h1 style="margin:.5em; color:lightgrey">Hypergrid 2.1.14 performance workbench</h1>
+<h1 style="margin:.5em; color:lightgrey">Hypergrid 2.1.15 performance workbench</h1>
 
 <div id="controls" class="nowrap">
     <label id="controller" title="Uncheck to hide other controls.">
-        <input type="checkbox" onchange="this.parentElement.parentElement.classList.toggle('nowrap')">
+        <input type="checkbox" onchange="this.parentElement.parentElement.classList.toggle('nowrap');positionBehind()">
         Wrap controls
     </label>
     <div class="radio-group">
@@ -108,34 +114,34 @@ <h1 style="margin:.5em; color:lightgrey">Hypergrid 2.1.14 performance workbench<
     <div class="radio-group">
         Text truncation:
         <label title="grid.properties.truncateTextWithEllipsis = undefined; // can be overridden at a higher level">
-            <input type="radio" name="truncate" onclick="grid.properties.truncateTextWithEllipsis = undefined">
+            <input type="radio" name="truncate" onclick="grid.properties.truncateTextWithEllipsis = undefined; grid.repaint()">
             none
         </label>
         <label title="grid.properties.truncateTextWithEllipsis = true; // can be overridden at a higher level">
-            <input type="radio" name="truncate" onclick="grid.properties.truncateTextWithEllipsis = true" checked>
+            <input type="radio" name="truncate" onclick="grid.properties.truncateTextWithEllipsis = true; grid.repaint()" checked>
             with ellipsis (&hellip;)
         </label>
         <label title="grid.properties.truncateTextWithEllipsis = false; // can be overridden at a higher level">
-            <input type="radio" name="truncate" onclick="grid.properties.truncateTextWithEllipsis = false">
+            <input type="radio" name="truncate" onclick="grid.properties.truncateTextWithEllipsis = false; grid.repaint()">
             <em>before</em> partial char
         </label>
         <label title="grid.properties.truncateTextWithEllipsis = null; // can be overridden at a higher level">
-            <input type="radio" name="truncate" onclick="grid.properties.truncateTextWithEllipsis = null">
+            <input type="radio" name="truncate" onclick="grid.properties.truncateTextWithEllipsis = null; grid.repaint()">
             <em>after</em> partial char
         </label>
     </div>
     <div class="radio-group">
         Clip to:
         <label title="grid.properties.columnClip = true">
-            <input type="radio" name="clipping" onclick="grid.properties.columnClip = true; // can be overridden at column level">
+            <input type="radio" name="clipping" onclick="grid.properties.columnClip = true; grid.repaint()">
             all columns
         </label>
         <label title="grid.properties.columnClip = null">
-            <input type="radio" name="clipping" onclick="grid.properties.columnClip = null; // can be overridden at column level">
+            <input type="radio" name="clipping" onclick="grid.properties.columnClip = null; grid.repaint()">
             last column only
         </label>
         <label title="grid.properties.columnClip = false">
-            <input type="radio" name="clipping" onclick="grid.properties.columnClip = false; // can be overridden at column level" checked>
+            <input type="radio" name="clipping" onclick="grid.properties.columnClip = false; grid.repaint()" checked>
             none
         </label>
     </div>
@@ -218,8 +224,8 @@ <h1 style="margin:.5em; color:lightgrey">Hypergrid 2.1.14 performance workbench<
             translucent blue
         </label>
     </div>
-    <label>
-        <input type="checkbox" onclick="document.querySelector('#behind').style.visibility=this.checked?'visible':'hidden'">
+    <label title="To see through the grid, you must also set grid color to transparent or translucent.">
+        <input type="checkbox" onclick="behindStyle.visibility=this.checked?'visible':'hidden';positionBehind()">
         Behind-the-grid content
     </label>
     <div class="radio-group">
@@ -236,13 +242,48 @@ <h1 style="margin:.5em; color:lightgrey">Hypergrid 2.1.14 performance workbench<
     <label>
         Row height: <input type="range" min="15" max="75" value="34" oninput="nextElementSibling.innerHTML=grid.properties.defaultRowHeight=Number(this.value);grid.behavior.changed()"> (<span>34</span>)
     </label>
+    <div class="radio-group">
+        Horiz. rules:
+        <input type="checkbox" checked oninput="grid.properties.gridLinesH=this.checked;grid.behavior.shapeChanged()">
+        <input type="color" value="brown" onchange="grid.properties.gridLinesHColor=this.value;grid.behavior.shapeChanged()">
+        <input type="range" min="0" max="8" value="1" style="width:24px" oninput="nextElementSibling.innerHTML=grid.properties.gridLinesHWidth=Number(this.value);grid.behavior.shapeChanged()"> (<span>1</span>)
+        Vert. rules:
+        <input type="checkbox" checked oninput="grid.properties.gridLinesV=this.checked;grid.behavior.shapeChanged()">
+        <input type="color" value="brown" onchange="grid.properties.gridLinesVColor=this.value;grid.behavior.shapeChanged()">
+        <input type="range" min="0" max="8" value="1" style="width:24px" oninput="nextElementSibling.innerHTML=grid.properties.gridLinesVWidth=Number(this.value);grid.behavior.shapeChanged()"> (<span>1</span>)
+        Box model:
+        <label title="grid.properties.backgroundColor='white'">
+            <input type="radio" name="box-sizing" value="border-box" onclick="grid.properties.boxSizing=this.value;grid.behavior.shapeChanged()" checked>
+            border-box
+        </label>
+        <label title="grid.properties.backgroundColor='transparent'">
+            <input type="radio" name="box-sizing" value="content-box" onclick="grid.properties.boxSizing=this.value;grid.behavior.shapeChanged()">
+            content-box
+        </label>
+    </div>
+    <label>
+        Fixed columns:
+        <input type="range" min="0" max="4" value="0" style="width:24px" oninput="nextElementSibling.innerHTML=grid.properties.fixedColumnCount=Number(this.value);grid.behavior.shapeChanged()"> (<span>0</span>)
+        Fixed rows:
+        <input type="range" min="0" max="11" value="0" style="width:24px" oninput="nextElementSibling.innerHTML=grid.properties.fixedRowCount=Number(this.value);grid.behavior.shapeChanged()"> (<span>0</span>)
+    </label>
+    <label>
+        Horiz. divider:
+        <input type="color" value="#a4a4a4" onchange="grid.properties.fixedLinesHColor=this.value;grid.behavior.shapeChanged()">
+        <input type="range" min="0" max="12" value="1" style="width:24px" oninput="nextElementSibling.innerHTML=grid.properties.fixedLinesHWidth=Number(this.value);grid.behavior.shapeChanged()"> (<span>1</span>)
+        edge: <input type="range" min="0" max="5" value="0" style="width:22px" oninput="nextElementSibling.innerHTML=grid.properties.fixedLinesHEdge=Number(this.value);grid.behavior.shapeChanged()"> (<span>0</span>)
+        Vert. divider:
+        <input type="color" value="#a4a4a4" onchange="grid.properties.fixedLinesVColor=this.value;grid.behavior.shapeChanged()">
+        <input type="range" min="0" max="12" value="1" style="width:24px" oninput="nextElementSibling.innerHTML=grid.properties.fixedLinesVWidth=Number(this.value);grid.behavior.shapeChanged()"> (<span>1</span>)
+        edge: <input type="range" min="0" max="5" value="0" style="width:22px" oninput="nextElementSibling.innerHTML=grid.properties.fixedLinesVEdge=Number(this.value);grid.behavior.shapeChanged()"> (<span>0</span>)
+    </label>
     <label>
         Columns:   <input type="range" id="COLUMNS"   title="" min="1"  max="100" oninput="fixAll()"> (<span></span>) &nbsp;
         Rows:      <input type="range" id="ROWS"      title="" min="10" max="9999" step="10" oninput="fixAll()"> (<span></span>) &nbsp;
-        Precision: <input type="range" id="PRECISION" title="Number of digits." min="1"  max="30" oninput="fixAll()"> (<span></span>) &nbsp;
-        Scale:     <input type="range" id="SCALE"     title="Number of digits to right of decimal point." min="0"  max="10" oninput="fixAll()"> (<span></span>) &nbsp;
-        <input type="button" value="Reset Data" onclick="init()">
-        <input type="button" value="Benchmark Data" onclick="benchmark()">
+        Precision: <input type="range" id="PRECISION" title="Number of digits." min="1"  max="30" style="width:29px" oninput="fixAll()"> (<span></span>) &nbsp;
+        Scale:     <input type="range" id="SCALE"     title="Number of digits to right of decimal point." min="0"  max="10" style="width:10px" oninput="fixAll()"> (<span></span>) &nbsp;
+        <input type="button" value="Reset Data" title="Recreate data using slider values." onclick="init()">
+        <input type="button" value="Benchmark Data" title="Set sliders to 100, 9999, 5, 2 and recreate data" onclick="benchmark()">
     </label>
 </div>
 
@@ -253,6 +294,8 @@ <h1 style="margin:.5em; color:lightgrey">Hypergrid 2.1.14 performance workbench<
     <script>
 
 var grid = new fin.Hypergrid();
+var behindStyle = document.querySelector('#behind').style;
+function positionBehind() { behindStyle.top=Math.ceil(grid.canvas.canvas.getBoundingClientRect().top) + 100 + 'px'; }
 
 var COLUMNS = 12;
 var ROWS = 9999;
@@ -317,7 +360,7 @@ <h1 style="margin:.5em; color:lightgrey">Hypergrid 2.1.14 performance workbench<
     columnClip: false,
     defaultRowHeight: 34,
     editor: 'textfield',
-//    showRowNumbers: false,
+    rowHeaderCheckboxes: false,
     rowHeaderColor: 'brown',
     lineColor: 'brown',
     renderFalsy: true,
@@ -391,6 +434,7 @@ <h1 style="margin:.5em; color:lightgrey">Hypergrid 2.1.14 performance workbench<
 }
 
 function setBackgroundColor(backgroundColor) {
+    grid.repaint();
     grid.properties.backgroundColor = backgroundColor;
     rebundle();
 }
@@ -538,7 +582,7 @@ <h1 style="margin:.5em; color:lightgrey">Hypergrid 2.1.14 performance workbench<
 function simulate(checked) {
     var paintRadioButtons = document.querySelectorAll('[name=paint]'),
         paintOnFlagSetRadioButton = paintRadioButtons[0],
-        paintBlastRadioButton = paintRadioButtons[2]
+        paintBlastRadioButton = paintRadioButtons[2],
         paintBlastLabel = paintBlastRadioButton.parentElement;
 
     if (!checked && paintBlastRadioButton.checked) {

package.json

@@ -1,6 +1,6 @@
 {
   "name": "fin-hypergrid",
-  "version": "2.1.14",
+  "version": "2.1.15",
   "description": "Canvas-based high-performance grid",
   "repository": {
     "type": "git",