delay initial resize on non web-component browsers issue #165

TonyGermaneri · Sep 6, 2018 · 59517b8 · 59517b8
1 parent cc179ff
commit 59517b8
Show file tree

Hide file tree

Showing 11 changed files with 39 additions and 51 deletions.
diff --git a/build.txt b/build.txt
@@ -1 +1 @@
-2025
+2027
diff --git a/dist/canvas-datagrid.debug.js b/dist/canvas-datagrid.debug.js
diff --git a/dist/canvas-datagrid.debug.map b/dist/canvas-datagrid.debug.map
diff --git a/dist/canvas-datagrid.js b/dist/canvas-datagrid.js
diff --git a/dist/canvas-datagrid.map b/dist/canvas-datagrid.map
diff --git a/lib/component.js b/lib/component.js
@@ -44,7 +44,7 @@ define(['./defaults'], function (defaults) {
             return r;
         }
         component.applyComponentStyle = function (supressChangeAndDrawEvents, intf) {
-            if (!self.isComponent) { return; }
+            if (!intf.isComponent) { return; }
             var cStyle = window.getComputedStyle(intf.tagName === 'CANVAS-DATAGRID' ? intf : intf.canvas, null),
                 defs = {};
             intf.computedStyle = cStyle;

diff --git a/lib/dom.js b/lib/dom.js
@@ -516,11 +516,11 @@ define([], function () {
                 self.parentIsCanvas = /^canvas$/i.test(self.parentDOMNode.tagName);
                 if (self.parentIsCanvas) {
                     self.canvas = self.parentDOMNode;
-                    self.parentDOMNode.appendChild(self.controlInput);
+                    document.body.appendChild(self.controlInput);
                 } else {
                     self.canvas = document.createElement('canvas');
                     self.parentDOMNode.appendChild(self.canvas);
-                    self.parentDOMNode.appendChild(self.controlInput);
+                    document.body.appendChild(self.controlInput);
                 }
                 self.createInlineStyle(self.canvas, 'canvas-datagrid');
                 self.ctx = self.canvas.getContext('2d');

diff --git a/lib/intf.js b/lib/intf.js
@@ -460,6 +460,7 @@ define([], function () {
             self.intf.isColumnVisible = self.isColumnVisible;
             self.intf.order = self.order;
             self.intf.draw = self.draw;
+            self.intf.isComponent = self.isComponent;
             self.intf.selectArea = self.selectArea;
             self.intf.clipElement = self.clipElement;
             self.intf.getSchemaFromData = self.getSchemaFromData;
@@ -602,7 +603,7 @@ define([], function () {
             if (self.args.schema) {
                 self.intf.schema = self.args.schema;
             }
-            if (self.isChildGrid) {
+            if (self.isChildGrid || !self.isComponent) {
                 requestAnimationFrame(function () { self.resize(true); });
             } else {
                 self.resize(true);

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "canvas-datagrid",
-  "version": "0.22.0",
+  "version": "0.22.1",
   "description": "Canvas based data grid web component.  Capable of displaying millions of contiguous hierarchical rows and columns without paging or loading, on a single canvas element.",
   "main": "./dist/canvas-datagrid.js",
   "scripts": {

diff --git a/tutorials/developer.html b/tutorials/developer.html
@@ -1,7 +1,6 @@
 <!DOCTYPE html>
 <html>
 <head>
-  <script src="https://cdnjs.cloudflare.com/ajax/libs/webcomponentsjs/1.0.17/webcomponents-lite.js"></script>
   <script type="text/javascript" src="../dist/canvas-datagrid.debug.js"></script>
   <script type="text/javascript" src="developer.js"></script>
   <style type="text/css">
@@ -11,8 +10,20 @@
       padding: 0;
       margin: 0;
     }
+    .myGridStyle {
+      --cdg-width: 100%;
+      --cdg-height: 100%;
+      width: 100%;
+      height: 100%;
+      --cdg-cell-color: red;
+    }
   </style>
 </head>
-<body onload="g();">
+<body>
+<!-- 
+  <canvas-datagrid class="myGridStyle">[
+      {"col1": "row 1 column 1", "col2": "row 1 column 2", "col3": "row 1 column 3"},
+      {"col1": "row 2 column 1", "col2": "row 2 column 2", "col3": "row 2 column 3"}
+  ]</canvas-datagrid> -->
 </body>
 </html>
diff --git a/tutorials/developer.js b/tutorials/developer.js
@@ -1,40 +1,15 @@
-/*jslint browser: true*/
-/*globals canvasDatagrid: false*/
-/* this file is for developing in a sandbox on a local machine */
-
-
-function getData(r, c, f) {
-    var data = [];
-    for (var x = 0; x < r; x++) {
-        data[x] = {};
-        for (var y = 0; y < c; y++) {
-            data[x][y] = f ? f(x, y) : x + ", " + y
-        }
-    }
-    return data;
-}
-
-function g() {
-    'use strict';
+document.addEventListener('DOMContentLoaded', function () {
     var parentNode = document.body;
+    // create a new grid
+    //var grid = document.createElement('canvas-datagrid');
     var grid = canvasDatagrid();
-    grid.attributes.tree = true;
-    grid.addEventListener('expandtree', function (e) {
-        e.treeGrid.data = getData(10,10);
-    });
-    grid.attributes.debug = true;
-
-    parentNode.appendChild(grid);
-    var data = getData(10, 10);
-
-
+    grid.className = 'myGridStyle';
+    grid.data = [
+        {col1: 'foo', col2: 0, col3: 'a'},
+        {col1: 'bar', col2: 1, col3: 'b'},
+        {col1: 'baz', col2: 2, col3: 'c'}
+    ];
     grid.style.width = '100%';
     grid.style.height = '100%';
-
-    grid.data = data; 
-
-    grid.style.overflowY = 'scroll';
-    grid.style.overflowX = 'scroll';
-
-
-}
+    parentNode.appendChild(grid);
+});