@zambezi/grid - npm Package Compare versions

Comparing version 0.2.1 to 0.3.0

package.json

 {
   "name": "@zambezi/grid",
-  "version": "0.2.1",
+  "version": "0.3.0",
   "description": "D3 component for drawing financial grids.",
@@ -40,3 +40,3 @@ "keywords": [
   "dependencies": {
-    "@zambezi/d3-utils": "^3.0.0-2",
+    "@zambezi/d3-utils": "^3.0.0",
     "@zambezi/fun": "^2.0.0-1",
@@ -43,0 +43,0 @@ "d3-array": "^1.0.1",

rollup.config.js

@@ -14,2 +14,3 @@ import babel from 'rollup-plugin-babel'
   , 'd3-array'
+  , 'd3-dispatch'
   , 'd3-ease'
@@ -36,2 +37,3 @@ , 'd3-format'
   , 'd3-array': 'd3'
+  , 'd3-dispatch': 'd3'
   , 'd3-ease': 'd3'
@@ -38,0 +40,0 @@ , 'd3-format': 'd3'

src/body.js

@@ -6,2 +6,3 @@ import { basicPrecisionPxFormatter as px } from './basic-precision-px-formatter'
 import { createGridSheet } from './grid-sheet'
+import { dispatch as createDispatch } from 'd3-dispatch'
 import { format } from 'd3-format'
@@ -33,2 +34,3 @@ import { functor } from '@zambezi/fun'
       , bodyBlockLayout = createBodyBlockLayout()
+      , dispatch = createDispatch('visible-lines-change')
       , ensureSize = createEnsureSize()
@@ -38,3 +40,6 @@ , api = rebind()
             .from(bodyBlockLayout, 'virtualizeRows', 'virtualizeColumns')
+            .from(dispatch, 'on')
 
+  let sizeValidationRound = 0
+
   let lastOnChangeArgs
@@ -44,3 +49,3 @@
     bodyBlockLayout.rowKey(cells.rowKey())
-    s.each(bodyEach)
+    s.each(bodyEach).on('size-dirty', () => sizeValidationRound++)
   }
@@ -65,4 +70,4 @@
         , bodyBounds = bundle.bodyBounds
-        , verticalScroll = scrollChanged(bundle.scroll.top)
-        , horizontalScroll = scrollChanged(bundle.scroll.left)
+        , verticalScroll = scrollChanged(bundle.scroll.top, sizeValidationRound)
+        , horizontalScroll = scrollChanged(bundle.scroll.left, sizeValidationRound)
         , updateLinesChange = onChange(dispatchLinesChange)
@@ -87,3 +92,3 @@
     function dispatchLinesChange(min, max) {
-      // TODO: dispatch event, perhaps through the DOM.
+      dispatch.call('visible-lines-change', this, min, max)
     }
@@ -152,3 +157,3 @@
 
-    function scrollChanged(scroll) {
+    function scrollChanged(scroll, validationId) {
       return functor(
@@ -167,2 +172,4 @@ `
         ${ scroll }
+        ∵
+        ${ validationId }
         `
@@ -169,0 +176,0 @@ )

src/column-drag.js

@@ -5,3 +5,3 @@ import { columnDragTargetLayout as dragTargetLayout } from './column-drag-target-layout'
 import { select, event, mouse } from 'd3-selection'
-import { appendFromTemplate, selectionChanged, fromTarget, createDispatchCustomEvent } from '@zambezi/d3-utils'
+import { appendFromTemplate, selectionChanged, fromTarget } from '@zambezi/d3-utils'
 
@@ -17,3 +17,2 @@ import './column-drag.css'
     , append = appendFromTemplate(template)
-    , dispatchRedraw = createDispatchCustomEvent().type('redraw')
     , left = pixels('left')
@@ -117,3 +116,3 @@
                       highlightMovedColumnCells
-                    , dispatchRedraw
+                    , () => list.dispatch('redraw', { bubbles: true })
                     , dropColumnInDestination
@@ -120,0 +119,0 @@ , removeColumnFromOrigin

src/column-sizers.js

@@ -1,2 +0,2 @@
-import { appendFromTemplate, selectionChanged, createDispatchCustomEvent, rebind } from '@zambezi/d3-utils'
+import { appendFromTemplate, selectionChanged, rebind } from '@zambezi/d3-utils'
 import { createColumnSizerLayout } from './column-sizer-layout'
@@ -10,5 +10,5 @@ import { debounce } from 'underscore'
 import './column-sizers.css'
-const dispatchRedraw = createDispatchCustomEvent().type('redraw')
-    , appendSizer = appendFromTemplate('<li class="zambezi-grid-resizer"></li>')
 
+const appendSizer = appendFromTemplate('<li class="zambezi-grid-resizer"></li>')
+
 export function createColumnSizers() {
@@ -104,3 +104,3 @@
       column.width = newWidth
-      target.each(dispatchRedraw)
+      target.dispatch('redraw')
 
@@ -107,0 +107,0 @@ function findCandidateFreeWidth() {

src/grid.js

@@ -17,5 +17,7 @@ import { calculateColumnLayout } from './calculate-column-layout'
 import { createSortRows } from './sort-rows'
+import { dispatch as createDispatch } from 'd3-dispatch'
 import { ensureData } from './ensure-data'
 import { ensureId } from './ensure-id'
-import { rebind, call, each, redraw, createResize, throttle } from '@zambezi/d3-utils'
+import { rebind, redispatch, call, each, redraw, createResize, createAutoDirty,
+          throttle } from '@zambezi/d3-utils'
 
@@ -33,8 +35,10 @@ import './grid.css'
       , columnSizers = createColumnSizers()
+      , dispatchDraw = createDispatch('draw')
       , body = createBody()
       , sortRowHeaders = createSortRowHeaders()
+      , autodirty = createAutoDirty()
       , grid = compose(
-          call(createScrollers())
+          call(() => dispatchDraw.call('draw'))
+        , call(createScrollers())
         , call(sortRowHeaders)
-        , call(createScrollers())
         , call(columnSizers)
@@ -57,4 +61,12 @@ , call(columnDrag)
         )
+
+      , redispatcher = redispatch()
+            .from(dispatchDraw, 'draw')
+            .from(body, 'visible-lines-change')
+            .create()
+
       , api = rebind()
+            .from(columnDrag, 'dragColumnsByDefault', 'acceptColumnDrop')
             .from(columnSizers, 'resizeColumnsByDefault')
+            .from(redispatcher, 'on')
             .from(ensureColumns, 'columns')
@@ -64,7 +76,6 @@ .from(processRowData, 'filters', 'filtersUse', 'skipRowLocking')
             .from(resize, 'wait:resizeWait')
+            .from(setupTemplate, 'template')
             .from(sortRowHeaders, 'sortableByDefault')
-            .from(columnDrag, 'dragColumnsByDefault', 'acceptColumnDrop')
-            .from(setupTemplate, 'template')
 
-  return api(redraw(throttle(grid, 10)))
+  return api(autodirty(redraw(throttle(grid, 10))))
 }

src/scrollers.js

@@ -5,3 +5,3 @@ import { basicPrecisionPxFormatter as px } from './basic-precision-px-formatter'
 import { select } from 'd3-selection'
-import { selectionChanged, appendIfMissing, createDispatchCustomEvent } from '@zambezi/d3-utils'
+import { selectionChanged, appendIfMissing } from '@zambezi/d3-utils'
 
@@ -16,4 +16,2 @@ import './scrollers.css'
     , appendScrollerContent = appendIfMissing('div.scroller-content')
-    , dispatchGridScroll = createDispatchCustomEvent().type('grid-scroll')
-    , dispatchRedraw = createDispatchCustomEvent().type('redraw')
 
@@ -24,4 +22,7 @@ export function createScrollers() {
 
+  let sizeValidationRound = 0
+
   function scrollers(s) {
     s.each(scrollersEach)
+        .on('size-dirty.scroller-invalidation', () => sizeValidationRound++)
   }
@@ -101,18 +102,18 @@
           .datum({ top, left })
-          .each(dispatchGridScroll)
-          .each(dispatchRedraw)
+          .dispatch('grid-scroll', { bubbles: true })
+          .dispatch('redraw', { bubbles: true })
     }
 
     function verticalScrollChangedKey() {
-      return bundle.scroll.top + 'v' + bundle.rows.free.measuredHeight
+      return `${ bundle.scroll.top } v ${ bundle.rows.free.measuredHeight } R ${ sizeValidationRound}`
     }
 
     function horizontalScrollChangedKey() {
-      return bundle.scroll.left + 'h' + bundle.columns.free.measuredWidth
+      return `${ bundle.scroll.left } h ${ bundle.columns.free.measuredWidth } R ${ sizeValidationRound }`
     }
 
     function clippingChangedKey() {
-      return bundle.bodyBounds.clippedHorizontal + ':' + bundle.bodyBounds.clippedVertical
+      return `${ bundle.bodyBounds.clippedHorizontal }: ${ bundle.bodyBounds.clippedVertical } ${ sizeValidationRound}`
     }
   }
 }

src/sort-row-headers.js

 import { property } from '@zambezi/fun'
 import { select } from 'd3-selection'
-import { selectionChanged, createDispatchCustomEvent } from '@zambezi/d3-utils'
+import { selectionChanged } from '@zambezi/d3-utils'
 
@@ -9,5 +9,2 @@ import './sort-row-headers.css'
     , sortDescending = property('sortDescending')
-    , dispatchRedraw = createDispatchCustomEvent().type('redraw')
-    , dispatchDataDirty = createDispatchCustomEvent().type('data-dirty')
-    , dispatchSortChanged = createDispatchCustomEvent().type('sort-changed')
 
@@ -58,12 +55,6 @@ export function createSortRowHeaders() {
 
-      /*
-      dispatcher['data-dirty']()
-      customDispatch('sort-changed', false, true, d).call(context)
-      dispatcher['redraw']()
-      */
-
       target
-          .each(dispatchDataDirty)
-          .each(dispatchSortChanged.detail(d))
-          .each(dispatchRedraw)
+          .dispatch('data-dirty')
+          .dispatch('sort-changed', { detail: d })
+          .dispatch('redraw')
 
@@ -70,0 +61,0 @@ function clearColumnSort(d, i) {

No alert changes

Improved metrics

Total package byte prevSize

360798

increased by5.22%

Lines of code

4471

increased by0.18%

Worsened metrics

Number of package files

55

decreased by-1.79%

Dependency changes

• Updated@zambezi/d3-utils@^3.0.0