Skip to content

Commit b9748e6

Browse files
keller-markkeller-mark
committed
Hidden canvas bug
1 parent c4f69df commit b9748e6

13 files changed

+109
-37
lines changed

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "vueplotlib",
3-
"version": "1.10.2",
3+
"version": "1.10.3",
44
"private": false,
55
"scripts": {
66
"serve": "vue-cli-service serve --open ./examples-src/index.js",

‎src/components/plots/BarPlot.vue‎

Lines changed: 9 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -56,7 +56,7 @@
5656
<script>
5757
import Two from '../../two.js';
5858
import { scaleBand as d3_scaleBand, scaleLinear as d3_scaleLinear, scaleLog as d3_scaleLog } from 'd3-scale';
59-
import { select as d3_select } from 'd3-selection';
59+
import { select as d3_select, create as d3_create } from 'd3-selection';
6060
import { mouse as d3_mouse, event as d3_event } from 'd3';
6161
import debounce from 'lodash/debounce';
6262
import { TOOLTIP_DEBOUNCE, BAR_MARGIN_X_DEFAULT, BAR_WIDTH_MIN } from './../../constants.js';
@@ -261,8 +261,14 @@ export default {
261261
domElement: canvasNode
262262
});
263263
264-
const canvasHidden = d3_select(this.hiddenPlotSelector);
265-
const contextHidden = canvasHidden.node().getContext('2d');
264+
let canvasHidden, contextHidden;
265+
try {
266+
canvasHidden = d3_select(this.hiddenPlotSelector);
267+
contextHidden = canvasHidden.node().getContext('2d');
268+
} catch(e) {
269+
canvasHidden = d3_create("canvas");
270+
contextHidden = canvasHidden.node().getContext('2d');
271+
}
266272
267273
const ratio = getRetinaRatio(contextHidden);
268274
const scaledWidth = vm.pWidth * ratio;

‎src/components/plots/BoxPlot.vue‎

Lines changed: 9 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -54,7 +54,7 @@
5454
<script>
5555
import Two from '../../two.js';
5656
import { scaleLinear as d3_scaleLinear, scaleQuantile as d3_scaleQuantile } from 'd3-scale';
57-
import { select as d3_select } from 'd3-selection';
57+
import { select as d3_select, create as d3_create } from 'd3-selection';
5858
import { mouse as d3_mouse, event as d3_event } from 'd3';
5959
import debounce from 'lodash/debounce';
6060
import { min as d3_min, max as d3_max, mean as d3_mean } from 'd3-array';
@@ -241,8 +241,14 @@ export default {
241241
domElement: canvasNode
242242
});
243243
244-
const canvasHidden = d3_select(this.hiddenPlotSelector);
245-
const contextHidden = canvasHidden.node().getContext('2d');
244+
let canvasHidden, contextHidden;
245+
try {
246+
canvasHidden = d3_select(this.hiddenPlotSelector);
247+
contextHidden = canvasHidden.node().getContext('2d');
248+
} catch(e) {
249+
canvasHidden = d3_create("canvas");
250+
contextHidden = canvasHidden.node().getContext('2d');
251+
}
246252
247253
const ratio = getRetinaRatio(contextHidden);
248254
const scaledWidth = vm.pWidth * ratio;

‎src/components/plots/CountBarPlot.vue‎

Lines changed: 9 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -56,7 +56,7 @@
5656
<script>
5757
import Two from '../../two.js';
5858
import { scaleBand as d3_scaleBand, scaleLinear as d3_scaleLinear, scaleLog as d3_scaleLog } from 'd3-scale';
59-
import { select as d3_select } from 'd3-selection';
59+
import { select as d3_select, create as d3_create } from 'd3-selection';
6060
import { mouse as d3_mouse, event as d3_event } from 'd3';
6161
import debounce from 'lodash/debounce';
6262
import { TOOLTIP_DEBOUNCE, BAR_MARGIN_X_DEFAULT, BAR_WIDTH_MIN } from './../../constants.js';
@@ -276,8 +276,14 @@ export default {
276276
domElement: canvasNode
277277
});
278278
279-
const canvasHidden = d3_select(this.hiddenPlotSelector);
280-
const contextHidden = canvasHidden.node().getContext('2d');
279+
let canvasHidden, contextHidden;
280+
try {
281+
canvasHidden = d3_select(this.hiddenPlotSelector);
282+
contextHidden = canvasHidden.node().getContext('2d');
283+
} catch(e) {
284+
canvasHidden = d3_create("canvas");
285+
contextHidden = canvasHidden.node().getContext('2d');
286+
}
281287
282288
const ratio = getRetinaRatio(contextHidden);
283289
const scaledWidth = vm.pWidth * ratio;

‎src/components/plots/DoubleStratifiedBoxPlot.vue‎

Lines changed: 9 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -104,7 +104,7 @@
104104
<script>
105105
import Two from '../../two.js';
106106
import { scaleLinear as d3_scaleLinear, scaleQuantile as d3_scaleQuantile, scaleBand as d3_scaleBand } from 'd3-scale';
107-
import { select as d3_select } from 'd3-selection';
107+
import { select as d3_select, create as d3_create } from 'd3-selection';
108108
import { mouse as d3_mouse, event as d3_event } from 'd3';
109109
import debounce from 'lodash/debounce';
110110
import { min as d3_min, max as d3_max, mean as d3_mean } from 'd3-array';
@@ -410,8 +410,14 @@ export default {
410410
domElement: canvasNode
411411
});
412412
413-
const canvasHidden = d3_select(this.hiddenPlotSelector);
414-
const contextHidden = canvasHidden.node().getContext('2d');
413+
let canvasHidden, contextHidden;
414+
try {
415+
canvasHidden = d3_select(this.hiddenPlotSelector);
416+
contextHidden = canvasHidden.node().getContext('2d');
417+
} catch(e) {
418+
canvasHidden = d3_create("canvas");
419+
contextHidden = canvasHidden.node().getContext('2d');
420+
}
415421
416422
const ratio = getRetinaRatio(contextHidden);
417423
const scaledWidth = vm.pWidth * ratio;

‎src/components/plots/GenomeStackedBarPlot.vue‎

Lines changed: 9 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -56,7 +56,7 @@
5656
import Two from '../../two.js';
5757
import { scaleLinear as d3_scaleLinear } from 'd3-scale';
5858
import { stack as d3_stack, stackOrderNone as d3_stackOrderNone, stackOffsetNone as d3_stackOffsetNone } from 'd3-shape';
59-
import { select as d3_select } from 'd3-selection';
59+
import { select as d3_select, create as d3_create } from 'd3-selection';
6060
import { mouse as d3_mouse, event as d3_event } from 'd3';
6161
import debounce from 'lodash/debounce';
6262
import { TOOLTIP_DEBOUNCE } from './../../constants.js';
@@ -280,8 +280,14 @@ export default {
280280
domElement: canvasNode
281281
});
282282
283-
const canvasHidden = d3_select(this.hiddenPlotSelector);
284-
const contextHidden = canvasHidden.node().getContext('2d');
283+
let canvasHidden, contextHidden;
284+
try {
285+
canvasHidden = d3_select(this.hiddenPlotSelector);
286+
contextHidden = canvasHidden.node().getContext('2d');
287+
} catch(e) {
288+
canvasHidden = d3_create("canvas");
289+
contextHidden = canvasHidden.node().getContext('2d');
290+
}
285291
286292
const ratio = getRetinaRatio(contextHidden);
287293
const scaledWidth = vm.pWidth * ratio;

‎src/components/plots/HierarchicalMultiTrackPlot.vue‎

Lines changed: 9 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -79,7 +79,7 @@
7979
import Two from '../../two.js';
8080
import { hierarchy as d3_hierarchy } from 'd3-hierarchy';
8181
import { scaleBand as d3_scaleBand } from 'd3-scale';
82-
import { select as d3_select } from 'd3-selection';
82+
import { select as d3_select, create as d3_create } from 'd3-selection';
8383
import { mouse as d3_mouse, event as d3_event } from 'd3';
8484
import debounce from 'lodash/debounce';
8585
import { TOOLTIP_DEBOUNCE, BAR_WIDTH_MIN, BAR_HEIGHT_MIN, BAR_MARGIN_X_DEFAULT, BAR_MARGIN_Y_DEFAULT } from './../../constants.js';
@@ -332,8 +332,14 @@ export default {
332332
domElement: canvasNode
333333
});
334334
335-
const canvasHidden = d3_select(this.hiddenPlotSelector);
336-
const contextHidden = canvasHidden.node().getContext('2d');
335+
let canvasHidden, contextHidden;
336+
try {
337+
canvasHidden = d3_select(this.hiddenPlotSelector);
338+
contextHidden = canvasHidden.node().getContext('2d');
339+
} catch(e) {
340+
canvasHidden = d3_create("canvas");
341+
contextHidden = canvasHidden.node().getContext('2d');
342+
}
337343
338344
const ratio = getRetinaRatio(contextHidden);
339345
const scaledWidth = vm.pWidth * ratio;

‎src/components/plots/MultiBoxPlot.vue‎

Lines changed: 9 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -77,7 +77,7 @@
7777
<script>
7878
import Two from '../../two.js';
7979
import { scaleBand as d3_scaleBand, scaleLinear as d3_scaleLinear, scaleQuantile as d3_scaleQuantile } from 'd3-scale';
80-
import { select as d3_select } from 'd3-selection';
80+
import { select as d3_select, create as d3_create } from 'd3-selection';
8181
import { mouse as d3_mouse, event as d3_event } from 'd3';
8282
import debounce from 'lodash/debounce';
8383
import { min as d3_min, max as d3_max, mean as d3_mean } from 'd3-array';
@@ -303,8 +303,14 @@ export default {
303303
domElement: canvasNode
304304
});
305305
306-
const canvasHidden = d3_select(this.hiddenPlotSelector);
307-
const contextHidden = canvasHidden.node().getContext('2d');
306+
let canvasHidden, contextHidden;
307+
try {
308+
canvasHidden = d3_select(this.hiddenPlotSelector);
309+
contextHidden = canvasHidden.node().getContext('2d');
310+
} catch(e) {
311+
canvasHidden = d3_create("canvas");
312+
contextHidden = canvasHidden.node().getContext('2d');
313+
}
308314
309315
const ratio = getRetinaRatio(contextHidden);
310316
const scaledWidth = vm.pWidth * ratio;

‎src/components/plots/MultiDataTrackPlot.vue‎

Lines changed: 9 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -78,7 +78,7 @@
7878
<script>
7979
import Two from '../../two.js';
8080
import { scaleBand as d3_scaleBand } from 'd3-scale';
81-
import { select as d3_select } from 'd3-selection';
81+
import { select as d3_select, create as d3_create } from 'd3-selection';
8282
import { mouse as d3_mouse, event as d3_event } from 'd3';
8383
import debounce from 'lodash/debounce';
8484
import { TOOLTIP_DEBOUNCE, BAR_WIDTH_MIN, BAR_HEIGHT_MIN, BAR_MARGIN_X_DEFAULT, BAR_MARGIN_Y_DEFAULT } from './../../constants.js';
@@ -325,8 +325,14 @@ export default {
325325
domElement: canvasNode
326326
});
327327
328-
const canvasHidden = d3_select(this.hiddenPlotSelector);
329-
const contextHidden = canvasHidden.node().getContext('2d');
328+
let canvasHidden, contextHidden;
329+
try {
330+
canvasHidden = d3_select(this.hiddenPlotSelector);
331+
contextHidden = canvasHidden.node().getContext('2d');
332+
} catch(e) {
333+
canvasHidden = d3_create("canvas");
334+
contextHidden = canvasHidden.node().getContext('2d');
335+
}
330336
331337
const ratio = getRetinaRatio(contextHidden);
332338
const scaledWidth = vm.pWidth * ratio;

‎src/components/plots/MultiTrackPlot.vue‎

Lines changed: 9 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -78,7 +78,7 @@
7878
<script>
7979
import Two from '../../two.js';
8080
import { scaleBand as d3_scaleBand } from 'd3-scale';
81-
import { select as d3_select } from 'd3-selection';
81+
import { select as d3_select, create as d3_create } from 'd3-selection';
8282
import { mouse as d3_mouse, event as d3_event } from 'd3';
8383
import debounce from 'lodash/debounce';
8484
import { TOOLTIP_DEBOUNCE, BAR_WIDTH_MIN, BAR_HEIGHT_MIN, BAR_MARGIN_X_DEFAULT, BAR_MARGIN_Y_DEFAULT } from './../../constants.js';
@@ -311,8 +311,14 @@ export default {
311311
domElement: canvasNode
312312
});
313313
314-
const canvasHidden = d3_select(this.hiddenPlotSelector);
315-
const contextHidden = canvasHidden.node().getContext('2d');
314+
let canvasHidden, contextHidden;
315+
try {
316+
canvasHidden = d3_select(this.hiddenPlotSelector);
317+
contextHidden = canvasHidden.node().getContext('2d');
318+
} catch(e) {
319+
canvasHidden = d3_create("canvas");
320+
contextHidden = canvasHidden.node().getContext('2d');
321+
}
316322
317323
const ratio = getRetinaRatio(contextHidden);
318324
const scaledWidth = vm.pWidth * ratio;

0 commit comments

Comments
 (0)