QueryDataModelImageBuilder

This is a builder which wrap a QueryDataModel to make it act like an ImageBuilder.

var QueryDataModelImageBuilder = require('paraviewweb/src/Rendering/Image/QueryDataModelImageBuilder'),
    instance = new QueryDataModelImageBuilder(qdm);

constructor(queryDataModel)

Under the hood this will forward any image data.

Below are the two event structures

var eventAsBuffer = {
    canvas: image,
    area: [0, 0, width, height],
    outputSize: [width, height],
    builder: this
};

update() - inherited

Trigger the fetching of the data.

render()

Trigger a notification if the loaded data is available and decoded.

{
    canvas: image,
    area: [0, 0, width, height],
    outputSize: [width, height],
    builder: this
}

onImageReady(callback) : subscription - inherited

Allows the registration of a callback(data, envelope) function when the
actual generated image is ready.

getListeners() - inherited

Returns a list of MouseHandler listeners.

getControlWidgets() - inherited

Returns a list of Widgets needed to drive the ImageBuilder.

getControlModels() - inherited

Returns a list of Model that can drive the ImageBuilder.

destroy() - inherited

Free the internal resources of the current instance.

Source

index.js

import AbstractImageBuilder from '../AbstractImageBuilder';

export default class QueryDataModelImageBuilder extends AbstractImageBuilder {
  // ------------------------------------------------------------------------

  constructor(queryDataModel) {
    super({
      queryDataModel,
      dimensions: queryDataModel.originalData.data[0].dimensions || [500, 500],
    });

    this.lastQueryImage = null;
    this.onLoadCallback = () => {
      this.lastQueryImage.removeEventListener('load', this.onLoadCallback);
      this.render();
    };

    this.registerSubscription(
      queryDataModel.onDataChange((data, envelope) => {
        if (this.lastQueryImage) {
          this.lastQueryImage.removeEventListener('load', this.onLoadCallback);
        }

        if (data.image) {
          this.lastQueryImage = data.image.image;
          this.render();
        }
      })
    );
  }

  // ------------------------------------------------------------------------

  render() {
    if (!this.lastQueryImage) {
      this.queryDataModel.fetchData();
      return;
    }

    if (this.lastQueryImage.complete) {
      const width = this.lastQueryImage.width;
      const height = this.lastQueryImage.height;

      this.imageReady({
        canvas: this.lastQueryImage,
        area: [0, 0, width, height],
        outputSize: [width, height],
        builder: this,
        arguments: this.queryDataModel.getQuery(),
      });
    } else {
      this.lastQueryImage.addEventListener('load', this.onLoadCallback);
    }
  }
}