Making canvasFunction() async

[nyurik]

The ImageCanvas.canvasFunction is synchronous, making it cumbersome to work with in async environment. I think it would be great to allow consumers to return observable and thenable objects in addition to pure canvas. The ImageCanvas implementation should function as follows:

function setInternalCanvasAndRefresh(newCanvas) {
  // set cached image to the given canvas
}

const result = obj.canvasFunction(...);
if (typeof result.then === 'function') {
  // promise
  result.then(setInternalCanvasAndRefresh);
} else if (typeof result.subscribe === 'function') {
  // observable
  result.subscribe({
    next: setInternalCanvasAndRefresh
  });
} else {
  // assuming this is the canvas itself
  setInternalCanvasAndRefresh(result);
}

---

• I am submitting a bug or feature request, not a usage question. Go to https://stackoverflow.com/questions/tagged/openlayers for questions.
• I have searched GitHub to see if a similar bug or feature request has already been reported.
• I have verified that the issue is present in the latest version of OpenLayers (see 'LATEST' on https://openlayers.org/).
• If reporting a bug, I have created a CodePen or prepared a stack trace (using the latest version and unminified code, so e.g. ol-debug.js, not ol.js) that shows the issue.

[ahocevar]

I agree that the ol/source/ImageCanvas API should support asynchronous canvas generators. To be more in line with the rest of the library (and agnostic about the way async is implemented), the API could look like this:

const source = new ImageCanvas({
  canvasFunction: (extent, res, pixelRatio, size, proj) => {
    source.setLoader(callback => {
      myAsyncCanvasFunction(ext, res, pixelRatio, size, proj)
        .then(result => {
          source.setCanvas(result);
          callback()
        })
        .catch(e => callback(e));
    });
  }
});

[nyurik]

@ahocevar I'm not sure I understood your example. My code was the implementation of the ImageCanvas side. The API would simply allow user's canvasFunction to return a promise or an observable instead of the canvas object:

Current usage:

const source = new ImageCanvas({
  canvasFunction: (...) => { return myCanvas; }  // synchronous usage
}

New capabilities:

const source = new ImageCanvas({
  // Asynchronous usage - returns a promise
  canvasFunction: (...) => {
    return new Promise((accept) => {
       accept(myCanvas)
    });
  }
}

const source = new ImageCanvas({
  // Asynchronous usage - returns an observable object
  canvasFunction: (...) => ({
    subscribe: (o) => {
      // user calls o.next(myCanvas) as often as needed to refresh
    }
  })
}

Basically with promise it's a OL-initiated, async request for canvas, and with observable, OL subscribes to a stream of canvas updates initiated by the user.

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.