From 91a569985d16f64ad54727651e7d07f58276e9e6 Mon Sep 17 00:00:00 2001 From: Kushan Joshi <0o3ko0@gmail.com> Date: Tue, 22 Aug 2017 19:18:03 +0530 Subject: [PATCH] playing with map render --- modules/core/context.js | 10 ++-- modules/renderer/map.js | 102 ++++++++++++++++++++++++++++++++- modules/util/call_when_idle.js | 13 +++++ modules/util/index.js | 3 +- 4 files changed, 120 insertions(+), 8 deletions(-) create mode 100644 modules/util/call_when_idle.js diff --git a/modules/core/context.js b/modules/core/context.js index 1acc4f96b3..ed1d77f34f 100644 --- a/modules/core/context.js +++ b/modules/core/context.js @@ -13,6 +13,8 @@ import { services } from '../services/index'; import { uiInit } from '../ui/init'; import { utilDetect } from '../util/detect'; import { utilRebind } from '../util/rebind'; +import { utilCallWhenIdle } from '../util/index'; + export var areaKeys = {}; @@ -83,9 +85,9 @@ export function coreContext() { /* Connection */ - function entitiesLoaded(err, result) { + var entitiesLoaded = utilCallWhenIdle(function entitiesLoaded(err, result) { if (!err) history.merge(result.data, result.extent); - } + }); context.preauth = function(options) { if (connection) { @@ -94,7 +96,7 @@ export function coreContext() { return context; }; - context.loadTiles = function(projection, dimensions, callback) { + context.loadTiles = utilCallWhenIdle(function(projection, dimensions, callback) { function done(err, result) { entitiesLoaded(err, result); if (callback) callback(err, result); @@ -102,7 +104,7 @@ export function coreContext() { if (connection) { connection.loadTiles(projection, dimensions, done); } - }; + }); context.loadEntity = function(id, callback) { function done(err, result) { diff --git a/modules/renderer/map.js b/modules/renderer/map.js index 8e82e12c82..6350405f2c 100644 --- a/modules/renderer/map.js +++ b/modules/renderer/map.js @@ -32,6 +32,7 @@ import { utilGetDimensions } from '../util/dimensions'; + export function rendererMap(context) { var dimensions = [1, 1], @@ -57,6 +58,20 @@ export function rendererMap(context) { mouse, mousemove; + // var debouncedTransformStart = () => requestAnimationFrame(() => transformStart = projection.transform()); + // var setProjectionTransformStart = () => debSetTransformStart(projection.transform()); + + // var debSetTransformStart = _.debounce((val) => transformStart = val, 50); + + // const debouncedTransform + // var projectIdleCb; + var savedToDrawVertices; + var saveToDrawLines; + var saveToDrawArea; + var saveToDrawMidpoints; + var saveToDrawLabels; + var saveToDrawPoints; + var zoom = d3.zoom() .scaleExtent([ztok(2), ztok(24)]) .interpolate(d3.interpolate) @@ -64,8 +79,28 @@ export function rendererMap(context) { .on('zoom', zoomPan); var _selection = d3.select(null); + var isRenderScheduled = false; + var pendingRedrawCall; + function initiateRedraw() { + // Reset the boolean so future redraws can be set. + isRenderScheduled = false; + redraw.apply(this, arguments); + } + + function scheduleRedraw() { + // Only schedule the redraw if one has not already been set. + if (isRenderScheduled) return; + + isRenderScheduled = true; + + pendingRedrawCall = requestIdleCallback(() => initiateRedraw.apply(this, arguments), { timeout: 1400 }); + } - + function cancelPendingRedraw() { + isRenderScheduled = false; + window.cancelIdleCallback(pendingRedrawCall); + } + function map(selection) { _selection = selection; @@ -266,6 +301,67 @@ export function rendererMap(context) { .call(drawLabels, graph, data, filter, dimensions, !difference && !extent) .call(drawPoints, graph, data, filter); + // var toDrawVertices = (selection) => { + // // window.cancelIdleCallback(savedToDrawVertices); + // savedToDrawVertices = requestIdleCallback(() => { + // drawVertices(selection, graph, data, filter, map.extent(), map.zoom()); + // setProjectionTransformStart(); + // toDrawLines(selection); + // }, {timeout: 150}); + // }; + + // var toDrawLines = (selection) => { + // // window.cancelIdleCallback(saveToDrawLines); + // saveToDrawLines = requestIdleCallback(() => { + // drawLines(selection, graph, data, filter); + // // setProjectionTransformStart(); + // toDrawAreas(selection); + // }, {timeout: 150}); + // }; + + // var toDrawAreas = (selection) => { + // // window.cancelIdleCallback(saveToDrawArea); + // saveToDrawArea = requestIdleCallback(() => { + // drawAreas(selection, graph, data, filter); + // // setProjectionTransformStart(); + // toDrawMidpoints(selection); + // }, {timeout: 150}); + // }; + + // var toDrawMidpoints = (selection) => { + // // window.cancelIdleCallback(saveToDrawMidpoints); + // saveToDrawMidpoints = requestIdleCallback(() => { + // drawMidpoints(selection,graph, data, filter, map.trimmedExtent()); + // // setProjectionTransformStart(); + // toDrawLabels(selection); + // }, {timeout: 150}); + // }; + + // var toDrawLabels = (selection) => { + // // window.cancelIdleCallback(saveToDrawLabels); + // saveToDrawLabels = requestIdleCallback(() => { + // drawLabels(selection, graph, data, filter, dimensions, !difference && !extent); + // // setProjectionTransformStart(); + // toDrawPoints(selection); + // }, {timeout: 150}); + // }; + + // var toDrawPoints = (selection) => { + // // window.cancelIdleCallback(saveToDrawPoints); + // saveToDrawPoints = requestIdleCallback(() => { + // drawPoints(selection, graph, data, filter); + // setProjectionTransformStart(); + // }, {timeout: 150}); + // }; + + // surface.selectAll('.data-layer-osm') + // .call(toDrawVertices) + // .call(toDrawLines) + // .call(toDrawAreas) + // .call(toDrawMidpoints) + // .call(toDrawLabels) + // .call(toDrawPoints); + dispatch.call('drawn', this, {full: true}); } @@ -403,11 +499,11 @@ export function rendererMap(context) { } - var queueRedraw = _.throttle(redraw, 750); + var queueRedraw = scheduleRedraw; var immediateRedraw = function(difference, extent) { - if (!difference && !extent) queueRedraw.cancel(); + if (!difference && !extent) cancelPendingRedraw(); redraw(difference, extent); }; diff --git a/modules/util/call_when_idle.js b/modules/util/call_when_idle.js new file mode 100644 index 0000000000..e86de47471 --- /dev/null +++ b/modules/util/call_when_idle.js @@ -0,0 +1,13 @@ +// note the function should be of low priority +// and should not be returning a value. +export function utilCallWhenIdle(func, timeout, name) { + return function() { + var args = arguments; + var that = this; + console.log('called ', name); + window.requestIdleCallback(function() { + console.log('idle succeed ', name); + func.apply(that, args); + }, {timeout: timeout}); + }; +} \ No newline at end of file diff --git a/modules/util/index.js b/modules/util/index.js index 1010cac214..b71c2fd4ed 100644 --- a/modules/util/index.js +++ b/modules/util/index.js @@ -22,4 +22,5 @@ export { utilSuggestNames } from './suggest_names'; export { utilTagText } from './util'; export { utilTriggerEvent } from './trigger_event'; export { utilWrap } from './util'; -export { utilIdleWorker} from './idle_worker'; \ No newline at end of file +export { utilIdleWorker} from './idle_worker'; +export { utilCallWhenIdle } from './call_when_idle'; \ No newline at end of file