partial commit on resizing

Author: bmschmidt

src/interaction.ts

@@ -43,8 +43,8 @@ export class Zoom {
     HTMLElement,
     any
   >;
-  public width: number;
-  public height: number;
+  private _width: number;
+  private _height: number;
   public renderers: Map<string, Renderer>;
   public deeptable?: Deeptable;
   public _timer?: d3.Timer;
@@ -62,8 +62,8 @@ export class Zoom {
     this.prefs = prefs;
 
     this.svg_element_selection = select(selector);
-    this.width = +this.svg_element_selection.attr('width');
-    this.height = +this.svg_element_selection.attr('height');
+    this._width = plot.width;
+    this._height = plot.height;
     this.renderers = new Map();
     this.scatterplot = plot;
     // A zoom keeps track of all the renderers
@@ -72,14 +72,40 @@ export class Zoom {
     this.renderers = new Map();
   }
 
-  attach_tiles(tiles: Deeptable) {
-    this.deeptable = tiles;
+  get width() {
+    return this._width;
+  }
+
+  get height() {
+    return this._height;
+  }
+
+  public resize(width: number, height: number) {
+    const { x_, y_ } = this.scales();
+    const old_center = [
+      x_.invert(this._width / 2),
+      y_.invert(this._height / 2),
+    ];
+    // Update the extent
+    this.zoomer.extent([
+      [0, 0],
+      [width, height],
+    ]);
+    this._width = width;
+    this._height = height;
+    this.scales(true); // Force rebuild of scales.
+    this.zoom_to(this.transform.k, old_center[0], old_center[1]);
+  }
+
+  attach_tiles(deeptable: Deeptable) {
+    this.deeptable = deeptable;
     return this;
   }
 
   attach_renderer(key: string, renderer: Renderer) {
     this.renderers.set(key, renderer);
     renderer.bind_zoom(this);
+    // Should just be `this.initialize_zoom(), right?
     renderer.zoom.initialize_zoom();
     return this;
   }
@@ -175,10 +201,10 @@ export class Zoom {
       });
 
     canvas.call(zoomer);
-
     this.add_mouseover();
 
     this.zoomer = zoomer;
+    this.resize(width, height);
   }
 
   set_highlit_points(data: StructRowProxy[]) {
@@ -292,22 +318,7 @@ export class Zoom {
     return this._timer;
   }
 
-  data(deeptable: undefined): Deeptable;
-  data(deeptable: Deeptable): Zoom;
-
-  data(deeptable: Deeptable | undefined) {
-    if (deeptable === undefined) {
-      return this.deeptable;
-    }
-    this.deeptable = deeptable;
-    return this as Zoom;
-  }
-
-  /**
-   *
-   * @returns
-   */
-  scales(): ScaleSet {
+  scales(force = false): ScaleSet {
     // General x and y scales that map from data space
     // to pixel coordinates, and also
     // rescaled ones that describe the current zoom.
@@ -316,17 +327,16 @@ export class Zoom {
 
     // equal_units: should a point of x be the same as a point of y?
 
-    if (this._scales) {
+    if (force !== true && this._scales) {
       this._scales.x_ = this.transform.rescaleX(this._scales.x);
       this._scales.y_ = this.transform.rescaleY(this._scales.y);
       return this._scales;
     }
 
     const { width, height } = this;
-    if (this.deeptable === undefined) {
-      throw new Error('Error--scales created before tileSet present.');
-    }
-    const { extent } = this.deeptable;
+
+    const extent = this.deeptable.extent;
+
     if (extent === undefined) {
       throw new Error('Error--scales created before extent present.');
     }

src/regl_rendering.ts

@@ -470,6 +470,7 @@ export class ReglRenderer extends Renderer {
       height: this.height,
       depth: false,
     });
+
     this.fbos.ping = regl.framebuffer({
       width: this.width,
       height: this.height,
@@ -507,6 +508,20 @@ export class ReglRenderer extends Renderer {
       });
   }
 
+  resize(width: number, height: number): void {
+    super.resize(width, height);
+    this.resize_textures();
+  }
+
+  resize_textures() {
+    this.fbos.colorpicker?.resize(this.width, this.height);
+    this.fbos.contour?.resize(this.width, this.height);
+    this.fbos.ping?.resize(this.width, this.height);
+    this.fbos.pong?.resize(this.width, this.height);
+    this.fbos.lines?.resize(this.width, this.height);
+    this.fbos.points?.resize(this.width, this.height);
+  }
+
   get_image_texture(url: string) {
     const { regl } = this;
     this.textures = this.textures || {};

src/rendering.ts

@@ -126,8 +126,8 @@ export class Renderer {
   public holder: d3.Selection<Element, unknown, BaseType, unknown>;
   public canvas: HTMLCanvasElement;
   public deeptable: Deeptable;
-  public width: number;
-  public height: number;
+  private _width: number;
+  private _height: number;
   public _use_scale_to_download_tiles = true;
   public aes?: AestheticSet;
   public _zoom?: Zoom;
@@ -138,11 +138,30 @@ export class Renderer {
     this.canvas = select(
       this.holder!.node()!.firstElementChild,
     ).node() as HTMLCanvasElement;
-    this.width = +select(this.canvas).attr('width');
-    this.height = +select(this.canvas).attr('height');
+    this._width = this.scatterplot.width;
+    this._height = this.scatterplot.height;
     this._use_scale_to_download_tiles = true;
   }
 
+  get width() {
+    return this._width;
+  }
+  set width(value: number) {
+    this._width = value;
+    this.resize(this._width, this._height);
+  }
+  get height() {
+    return this._height;
+  }
+  set height(value: number) {
+    this._height = value;
+    this.resize(this._width, this._height);
+  }
+  resize(width: number, height: number) {
+    this._width = width;
+    this._height = height;
+  }
+
   get discard_share() {
     // If jitter is temporal, e.g., or filters are in place,
     // it may make sense to estimate the number of hidden points.

src/scatterplot.ts

@@ -49,8 +49,8 @@ type Hook = () => void;
  */
 export class Scatterplot {
   public _renderer?: ReglRenderer;
-  public width: number;
-  public height: number;
+  protected _width: number;
+  protected _height: number;
   public _root?: Deeptable;
   public elements?: Selection<SVGElement, unknown, Element, unknown>[];
   public secondary_renderers: Record<string, Renderer> = {};
@@ -104,19 +104,38 @@ export class Scatterplot {
     }
     const {
       selector,
-      width,
-      height,
+      width: rawWidth,
+      height: rawHeight,
       source_url,
       deeptable,
       arrow_buffer,
       arrow_table,
     } = options;
+    let [width, height] = [rawWidth, rawHeight];
+    if (rawWidth === undefined) {
+      width = window.innerWidth;
+      height = window.innerHeight;
+
+      // Permanently bind the scatterplot to the window size.
+      window.onresize = () => {
+        this.resize(window.innerWidth, window.innerHeight);
+      };
+    }
+
+    if (selector !== undefined) {
+      this.bind(selector, width, height);
+    }
+    if (width !== undefined) {
+      this._width = width;
+    }
+    if (height !== undefined) {
+      this._height = height;
+    }
+
     this.bound = false;
     if (selector !== undefined) {
       this.bind(selector, width, height);
     }
-    this.width = width || window.innerWidth;
-    this.height = height || window.innerHeight;
     // mark_ready is called when the scatterplot can start drawing..
     this.ready = new Promise((resolve) => {
       this.mark_ready = resolve;
@@ -136,6 +155,48 @@ export class Scatterplot {
     this.prefs = { ...default_API_call } as DS.CompletePrefs;
   }
 
+  /**
+   * @param selector A selector for the root element of the deepscatter; must already exist.
+   * @param width Width of the plot, in pixels.
+   * @param height Height of the plot, in pixels.
+   */
+
+  public resize(width: number, height: number) {
+    // Set the dimensions of the plot.
+    this._width = width;
+    this._height = height;
+    if (this.elements === undefined) {
+      throw 'Must bind plot to DOM element before setting dimensions';
+    }
+    for (const el of this.elements) {
+      el.attr('width', this.width).attr('height', this.height);
+      el.selectAll('.deepscatter-render-canvas')
+        .attr('width', this.width)
+        .attr('height', this.height);
+    }
+    if (this._renderer !== undefined) {
+      this._zoom?.resize(this.width, this.height);
+      this._renderer.resize(this.width, this.height);
+    }
+  }
+
+  get width() {
+    return this._width;
+  }
+
+  set width(w: number) {
+    this._width = w;
+    this.resize(w, this.height);
+  }
+
+  get height() {
+    return this._height;
+  }
+  set height(h: number) {
+    this._height = h;
+    this.resize(this.width, h);
+  }
+
   /**
    * Attaches the scatterplot to a div element (either as a css selector or as a DOM element).
    * This is a permanent relationship.