Enforce canvas width & height to be at least 1px

Also skip tests relying on online images when one is offline

Author: flekschas

CHANGELOG.md

@@ -1,5 +1,9 @@
 ## Next
 
+## v1.4.2
+
+- Enforce the canvas width and height to be at least 1px to prevent view operations from breaking.
+
 ## v1.4.1
 
 - Bump `dom-2d-camera` to publish view updates on camera tweens ([#95](https://github.com/flekschas/regl-scatterplot/issues/95))

src/constants.js

@@ -131,6 +131,9 @@ export const DEFAULT_VIEW = new Float32Array([
   0, 0, 0, 1
 ]);
 
+// Error codes
+export const IMAGE_LOAD_ERROR = 'IMAGE_LOAD_ERROR';
+
 // Default misc
 export const DEFAULT_BACKGROUND_IMAGE = null;
 export const DEFAULT_SHOW_RETICLE = false;
@@ -146,3 +149,4 @@ export const SINGLE_CLICK_DELAY = 200;
 export const LONG_CLICK_TIME = 500;
 export const Z_NAMES = new Set(['z', 'valueZ', 'valueA', 'value1', 'category']);
 export const W_NAMES = new Set(['w', 'valueW', 'valueB', 'value2', 'value']);
+export const DEFAULT_IMAGE_LOAD_TIMEOUT = 15000;

src/index.js

@@ -104,6 +104,7 @@ import {
   DEFAULT_OPACITY_INACTIVE_SCALE,
   Z_NAMES,
   W_NAMES,
+  DEFAULT_IMAGE_LOAD_TIMEOUT,
 } from './constants';
 
 import {
@@ -1028,7 +1029,7 @@ const createScatterplot = (
   };
 
   const setCurrentHeight = (newCurrentHeight) => {
-    currentHeight = newCurrentHeight;
+    currentHeight = Math.max(1, newCurrentHeight);
     canvas.height = Math.floor(currentHeight * window.devicePixelRatio);
     if (yScale) {
       yScale.range([currentHeight, 0]);
@@ -1085,7 +1086,7 @@ const createScatterplot = (
   };
 
   const setCurrentWidth = (newCurrentWidth) => {
-    currentWidth = newCurrentWidth;
+    currentWidth = Math.max(1, newCurrentWidth);
     canvas.width = Math.floor(currentWidth * window.devicePixelRatio);
     if (xScale) {
       xScale.range([0, currentWidth]);
@@ -2205,13 +2206,16 @@ const createScatterplot = (
     if (!newBackgroundImage) {
       backgroundImage = null;
     } else if (isString(newBackgroundImage)) {
-      createTextureFromUrl(renderer.regl, newBackgroundImage).then(
-        (texture) => {
+      createTextureFromUrl(renderer.regl, newBackgroundImage)
+        .then((texture) => {
           backgroundImage = texture;
           draw = true;
           pubSub.publish('backgroundImageReady');
-        }
-      );
+        })
+        .catch(() => {
+          console.error(`Count not create texture from ${newBackgroundImage}`);
+          backgroundImage = null;
+        });
       // eslint-disable-next-line no-underscore-dangle
     } else if (newBackgroundImage._reglType === 'texture2d') {
       backgroundImage = newBackgroundImage;
@@ -3170,8 +3174,10 @@ const createScatterplot = (
       return renderer.isSupported;
     },
     clear: withDraw(clear),
-    createTextureFromUrl: (/** @type {string} */ url) =>
-      createTextureFromUrl(renderer.regl, url),
+    createTextureFromUrl: (
+      /** @type {string} */ url,
+      /** @type {number} */ timeout = DEFAULT_IMAGE_LOAD_TIMEOUT
+    ) => createTextureFromUrl(renderer.regl, url, timeout),
     deselect,
     destroy,
     draw: publicDraw,

src/utils.js

@@ -1,6 +1,10 @@
 import createOriginalRegl from 'regl';
 
-import { GL_EXTENSIONS } from './constants';
+import {
+  GL_EXTENSIONS,
+  DEFAULT_IMAGE_LOAD_TIMEOUT,
+  IMAGE_LOAD_ERROR,
+} from './constants';
 
 /**
  * Get the max value of an array. helper method to be used with `Array.reduce()`.
@@ -130,17 +134,23 @@ export const limit = (choices, defaultChoice) => (choice) =>
  * @param {boolean} isCrossOrigin If `true` allow loading image from a source of another origin.
  * @return  {Promise<HTMLImageElement>}  Promise resolving to the image once its loaded
  */
-export const loadImage = (src, isCrossOrigin = false) =>
-  new Promise((accept, reject) => {
+export const loadImage = (
+  src,
+  isCrossOrigin = false,
+  timeout = DEFAULT_IMAGE_LOAD_TIMEOUT
+) =>
+  new Promise((resolve, reject) => {
     const image = new Image();
     if (isCrossOrigin) image.crossOrigin = 'anonymous';
     image.src = src;
     image.onload = () => {
-      accept(image);
+      resolve(image);
     };
-    image.onerror = (error) => {
-      reject(error);
+    const rejectPromise = () => {
+      reject(new Error(IMAGE_LOAD_ERROR));
     };
+    image.onerror = rejectPromise;
+    setTimeout(rejectPromise, timeout);
   });
 
 /**
@@ -151,11 +161,16 @@ export const loadImage = (src, isCrossOrigin = false) =>
  * @param   {string}  url  Source URL of the image.
  * @return  {Promise<import('regl').Texture2D>}  Promise resolving to the texture object.
  */
-export const createTextureFromUrl = (regl, url) =>
+export const createTextureFromUrl = (
+  regl,
+  url,
+  timeout = DEFAULT_IMAGE_LOAD_TIMEOUT
+) =>
   new Promise((resolve, reject) => {
     loadImage(
       url,
-      url.indexOf(window.location.origin) !== 0 && url.indexOf('base64') === -1
+      url.indexOf(window.location.origin) !== 0 && url.indexOf('base64') === -1,
+      timeout
     )
       .then((image) => {
         resolve(regl.texture(image));

tests/index.js

@@ -42,6 +42,8 @@ import {
   KEY_ACTION_ROTATE,
   SINGLE_CLICK_DELAY,
   DEFAULT_OPACITY,
+  DEFAULT_IMAGE_LOAD_TIMEOUT,
+  IMAGE_LOAD_ERROR,
 } from '../src/constants';
 
 import { toRgba, isNormFloatArray } from '../src/utils';
@@ -196,17 +198,25 @@ test('createScatterplot({ cameraTarget, cameraDistance, cameraRotation, cameraVi
 test('createTextureFromUrl()', async (t) => {
   const regl = createRegl(createCanvas());
 
-  const texture = await createTextureFromUrl(
-    regl,
-    'https://picsum.photos/300/200/',
-    true
-  );
+  try {
+    const texture = await createTextureFromUrl(
+      regl,
+      'https://picsum.photos/300/200/',
+      true
+    );
 
-  t.equal(
-    texture._reglType, // eslint-disable-line no-underscore-dangle
-    'texture2d',
-    'texture should be a Regl texture object'
-  );
+    t.equal(
+      texture._reglType, // eslint-disable-line no-underscore-dangle
+      'texture2d',
+      'texture should be a Regl texture object'
+    );
+  } catch (e) {
+    if (e.message === IMAGE_LOAD_ERROR) {
+      t.skip('Skipping because image loading timed out');
+    } else {
+      t.fail('Failed to load image from URL');
+    }
+  }
 });
 
 test('createRenderer()', (t) => {
@@ -362,50 +372,76 @@ test('set({ backgroundImage })', async (t) => {
   const regl = createRegl(canvas);
   const scatterplot = createScatterplot({ canvas, regl });
 
-  let backgroundImage = await createTextureFromUrl(
-    regl,
-    'https://picsum.photos/300/200/'
-  );
-
-  scatterplot.set({ backgroundImage });
-
-  t.equal(
-    scatterplot.get('backgroundImage'),
-    backgroundImage,
-    'background image should be a Regl texture'
-  );
+  try {
+    const backgroundImage = await createTextureFromUrl(
+      regl,
+      'https://picsum.photos/300/200/'
+    );
 
-  backgroundImage = await scatterplot.createTextureFromUrl(
-    'https://picsum.photos/300/200/'
-  );
+    scatterplot.set({ backgroundImage });
 
-  scatterplot.set({ backgroundImage });
+    t.equal(
+      scatterplot.get('backgroundImage'),
+      backgroundImage,
+      'background image should be a Regl texture'
+    );
+  } catch (e) {
+    if (e.message === IMAGE_LOAD_ERROR) {
+      t.skip(`Failed to load image from URL: ${e.message}`);
+    } else {
+      t.fail('Could not create background image from URL');
+    }
+  }
 
-  t.equal(
-    scatterplot.get('backgroundImage'),
-    backgroundImage,
-    'background image should be a Regl texture'
-  );
+  try {
+    const backgroundImage = await scatterplot.createTextureFromUrl(
+      'https://picsum.photos/300/200/'
+    );
 
-  scatterplot.set({ backgroundImage: null });
+    scatterplot.set({ backgroundImage });
 
-  t.equal(
-    scatterplot.get('backgroundImage'),
-    null,
-    'background image should be nullifyable'
-  );
+    t.equal(
+      scatterplot.get('backgroundImage'),
+      backgroundImage,
+      'background image should be a Regl texture'
+    );
 
-  scatterplot.set({ backgroundImage: 'https://picsum.photos/300/200/' });
+    scatterplot.set({ backgroundImage: null });
 
-  await new Promise((resolve) => {
-    scatterplot.subscribe('backgroundImageReady', resolve, 1);
-  });
+    t.equal(
+      scatterplot.get('backgroundImage'),
+      null,
+      'background image should be nullifyable'
+    );
+  } catch (e) {
+    if (e.message === IMAGE_LOAD_ERROR) {
+      t.skip(`Failed to load image from URL: ${e.message}`);
+    } else {
+      t.fail('Could not create background image from URL');
+    }
+  }
+
+  try {
+    await new Promise((resolve, reject) => {
+      scatterplot.subscribe('backgroundImageReady', resolve, 1);
+      scatterplot.set({ backgroundImage: 'https://picsum.photos/300/200/' });
+      setTimeout(() => {
+        reject(new Error(IMAGE_LOAD_ERROR));
+      }, DEFAULT_IMAGE_LOAD_TIMEOUT);
+    });
 
-  t.equal(
-    scatterplot.get('backgroundImage').width,
-    300,
-    'background image should be loaded by scatterplot'
-  );
+    t.equal(
+      scatterplot.get('backgroundImage').width,
+      300,
+      'background image should be loaded by scatterplot'
+    );
+  } catch (e) {
+    if (e.message === IMAGE_LOAD_ERROR) {
+      t.skip(`Failed to load image from URL: ${e.message}`);
+    } else {
+      t.fail('Could not create background image from URL');
+    }
+  }
 
   // Base64 image
   scatterplot.set({