Skip to content

Commit 425e9f1

Browse files
flekschasflekschas
committed
Add support check
1 parent 6b0f175 commit 425e9f1

13 files changed

Lines changed: 70 additions & 33 deletions

‎example/axes.js‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ import { scaleLinear } from 'd3-scale';
55
import { select } from 'd3-selection';
66

77
import createScatterplot from '../src';
8-
import { saveAsPng } from './utils';
8+
import { saveAsPng, checkSupport } from './utils';
99

1010
const parentWrapper = document.querySelector('#parent-wrapper');
1111
const canvasWrapper = document.querySelector('#canvas-wrapper');
@@ -48,8 +48,6 @@ canvasWrapper.style.bottom = `${xAxisPadding}px`;
4848

4949
let { width, height } = canvasWrapper.getBoundingClientRect();
5050

51-
console.log(width, height);
52-
5351
xAxisContainer.attr('transform', `translate(0, ${height})`).call(xAxis);
5452
yAxisContainer.attr('transform', `translate(${width}, 0)`).call(yAxis);
5553

@@ -88,6 +86,8 @@ const scatterplot = createScatterplot({
8886
lassoInitiator: true,
8987
});
9088

89+
checkSupport(scatterplot);
90+
9191
exportEl.addEventListener('click', () => saveAsPng(scatterplot));
9292

9393
console.log(`Scatterplot v${scatterplot.get('version')}`);

‎example/connected-points-by-segments.js‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
/* eslint no-console: 0 */
22

33
import createScatterplot from '../src';
4-
import { saveAsPng } from './utils';
4+
import { saveAsPng, checkSupport } from './utils';
55

66
const canvas = document.querySelector('#canvas');
77
const numPointsEl = document.querySelector('#num-points');
@@ -64,6 +64,8 @@ const scatterplot = createScatterplot({
6464
lassoInitiator: true,
6565
});
6666

67+
checkSupport(scatterplot);
68+
6769
exportEl.addEventListener('click', () => saveAsPng(scatterplot));
6870

6971
console.log(`Scatterplot v${scatterplot.get('version')}`);

‎example/connected-points.js‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
/* eslint no-console: 0 */
22

33
import createScatterplot from '../src';
4-
import { saveAsPng } from './utils';
4+
import { saveAsPng, checkSupport } from './utils';
55

66
const canvas = document.querySelector('#canvas');
77
const numPointsEl = document.querySelector('#num-points');
@@ -62,6 +62,8 @@ const scatterplot = createScatterplot({
6262
lassoInitiator: true,
6363
});
6464

65+
checkSupport(scatterplot);
66+
6567
exportEl.addEventListener('click', () => saveAsPng(scatterplot));
6668

6769
console.log(`Scatterplot v${scatterplot.get('version')}`);

‎example/dynamic-opacity.js‎

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
/* eslint no-console: 0 */
22

33
import createScatterplot from '../src';
4-
import { saveAsPng } from './utils';
4+
import { saveAsPng, checkSupport } from './utils';
55

66
const canvas = document.querySelector('#canvas');
77
const numPointsEl = document.querySelector('#num-points');
@@ -57,6 +57,8 @@ const scatterplot = createScatterplot({
5757
lassoInitiator: true,
5858
});
5959

60+
checkSupport(scatterplot);
61+
6062
exportEl.addEventListener('click', () => saveAsPng(scatterplot));
6163

6264
console.log(`Scatterplot v${scatterplot.get('version')}`);
@@ -162,12 +164,10 @@ opacityEl.style.display = 'none';
162164
opacityValEl.innerHTML = 'Auto';
163165

164166
const opacityByDensityFillEl = opacityByDensityFillGroup.querySelector('input');
165-
const opacityByDensityFillLabEl = opacityByDensityFillGroup.querySelector(
166-
'.label'
167-
);
168-
const opacityByDensityFillValEl = opacityByDensityFillGroup.querySelector(
169-
'.value'
170-
);
167+
const opacityByDensityFillLabEl =
168+
opacityByDensityFillGroup.querySelector('.label');
169+
const opacityByDensityFillValEl =
170+
opacityByDensityFillGroup.querySelector('.value');
171171

172172
opacityByDensityFillLabEl.innerHTML = 'Opacity Density Fill';
173173

‎example/embedded.js‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
/* eslint no-console: 0 */
22

33
import createScatterplot from '../src';
4-
import { saveAsPng } from './utils';
4+
import { saveAsPng, checkSupport } from './utils';
55

66
const canvas = document.querySelector('#canvas');
77
const numPointsEl = document.querySelector('#num-points');
@@ -54,6 +54,8 @@ const scatterplot = createScatterplot({
5454
lassoInitiator: true,
5555
});
5656

57+
checkSupport(scatterplot);
58+
5759
exportEl.addEventListener('click', () => saveAsPng(scatterplot));
5860

5961
console.log(`Scatterplot v${scatterplot.get('version')}`);

‎example/index.js‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
/* eslint no-console: 0 */
22

33
import createScatterplot from '../src';
4-
import { saveAsPng } from './utils';
4+
import { saveAsPng, checkSupport } from './utils';
55

66
const canvas = document.querySelector('#canvas');
77
const numPointsEl = document.querySelector('#num-points');
@@ -81,6 +81,8 @@ const scatterplot = createScatterplot({
8181
lassoInitiator: true,
8282
});
8383

84+
checkSupport(scatterplot);
85+
8486
exportEl.addEventListener('click', () => saveAsPng(scatterplot));
8587

8688
console.log(`Scatterplot v${scatterplot.get('version')}`);

‎example/multiple-instances.js‎

Lines changed: 9 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
/* eslint no-console: 0 */
22
import { tableFromIPC } from 'apache-arrow';
33
import createScatterplot, { createRenderer } from '../src';
4+
import { showModal, closeModal } from './utils';
45

56
/**
67
* General configuration
@@ -45,20 +46,7 @@ const whenData = fetch(
4546
/**
4647
* Modal
4748
*/
48-
const modal = document.querySelector('#modal');
49-
const modalText = document.querySelector('#modal span');
50-
const showModal = (text, isError) => {
51-
modal.style.display = 'flex';
52-
modalText.style.color = isError ? '#cc79A7' : '#bbb';
53-
modalText.textContent = text;
54-
};
55-
56-
const closeModal = () => {
57-
modal.style.display = 'none';
58-
modalText.textContent = '';
59-
};
60-
61-
showModal(`Loading...`);
49+
showModal('Loading...');
6250

6351
/**
6452
* Add info to footer
@@ -168,6 +156,13 @@ exampleEl.removeAttribute('href');
168156
*/
169157
const renderer = createRenderer();
170158

159+
if (!renderer.isSupported) {
160+
showModal(
161+
'Unfortunately, your browser does not support all WebGL extensions required by regl-scatterplot',
162+
true
163+
);
164+
}
165+
171166
/**
172167
* Create a scatter plot instances
173168
*/

‎example/performance-mode.js‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
/* eslint no-console: 0 */
22
import { createWorker } from '@flekschas/utils';
3-
import { saveAsPng } from './utils';
3+
import { saveAsPng, checkSupport } from './utils';
44

55
import createScatterplot from '../src';
66
import pointWorkerFn from './performance-mode-point-worker';
@@ -78,6 +78,8 @@ const scatterplot = createScatterplot({
7878
lassoInitiator: true,
7979
});
8080

81+
checkSupport(scatterplot);
82+
8183
exportEl.addEventListener('click', () => saveAsPng(scatterplot));
8284

8385
console.log(`Scatterplot v${scatterplot.get('version')}`);

‎example/size-encoding.js‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ import { scaleLog } from 'd3-scale';
44
import { randomExponential } from 'd3-random';
55

66
import createScatterplot from '../src';
7-
import { saveAsPng } from './utils';
7+
import { saveAsPng, checkSupport } from './utils';
88

99
const canvas = document.querySelector('#canvas');
1010
const numPointsEl = document.querySelector('#num-points');
@@ -59,6 +59,8 @@ const scatterplot = createScatterplot({
5959
opacityInactiveScale: 0.66,
6060
});
6161

62+
checkSupport(scatterplot);
63+
6264
exportEl.addEventListener('click', () => saveAsPng(scatterplot));
6365

6466
console.log(`Scatterplot v${scatterplot.get('version')}`);

‎example/text-labels.js‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
import { scaleLinear, scaleLog } from 'd3-scale';
44

55
import createScatterplot from '../src';
6-
import { saveAsPng } from './utils';
6+
import { saveAsPng, checkSupport } from './utils';
77

88
const canvas = document.querySelector('#canvas');
99
const canvasWrapper = document.querySelector('#canvas-wrapper');
@@ -81,6 +81,8 @@ const scatterplot = createScatterplot({
8181
lassoInitiator: true,
8282
});
8383

84+
checkSupport(scatterplot);
85+
8486
exportEl.addEventListener('click', () => saveAsPng(scatterplot));
8587

8688
console.log(`Scatterplot v${scatterplot.get('version')}`);

0 commit comments

Comments
 (0)