Fix resize bugs

Author: keller-mark

examples-src/App.vue

@@ -20,8 +20,8 @@
  :pMarginRight="120"
  :pMarginBottom="100"
  :showDownloadButton="true"
- :downloadButtonOffsetX="(500+190)"
- :downloadButtonOffsetY="80"
+ :downloadButtonOffsetX="0"
+ :downloadButtonOffsetY="0"
  :showResizeButton="true"
  >
  <Axis
@@ -81,6 +81,7 @@
  :pMarginRight="10"
  :pMarginBottom="150"
  :showDownloadButton="true"
+ :showResizeButton="true"
  >
  <Axis
  slot="axisLeft"

package.json

@@ -1,6 +1,6 @@
 {
  "name": "vueplotlib",
- "version": "1.10.1",
+ "version": "1.10.2",
  "private": false,
  "scripts": {
  "serve": "vue-cli-service serve --open ./examples-src/index.js",

src/components/PlotContainer.vue

@@ -345,16 +345,6 @@ export default {
  download() {
  const pHeight = this.pHeight + this.offsetY;
 
- try {
- this.$slots.axisTop[0].componentInstance.pHeight = pHeight;
- this.$slots.axisLeft[0].componentInstance.pHeight = pHeight;
- this.$slots.plot[0].componentInstance.pHeight = pHeight;
- this.$slots.axisRight[0].componentInstance.pHeight = pHeight;
- this.$slots.axisBottom[0].componentInstance.pHeight = pHeight;
- } catch(e) {
- console.log(e);
- }
-
  const svg = d3_create("svg")
  .attr("width", this.fullWidth)
  .attr("height", this.fullHeight);
@@ -364,6 +354,13 @@ export default {
  
  const renderAxisToContext = (axisType) => {
  if(this.$slots[axisType].length > 0) {
+ try {
+ this.$slots[axisType][0].componentInstance.pHeight = pHeight;
+ this.$slots.plot[0].componentInstance.pHeight = pHeight;
+ } catch(e) {
+ console.log(e);
+ }
+
  const x = this.$slots[axisType][0].componentInstance.computedLeft;
  let y = this.$slots[axisType][0].componentInstance.computedTop;
  const width = this.$slots[axisType][0].componentInstance.computedWidth;
@@ -404,6 +401,12 @@ export default {
 
  const renderPlotToContext = () => {
  if(this.$slots.plot.length > 0) {
+ try {
+ this.$slots.plot[0].componentInstance.pHeight = pHeight;
+ } catch(e) {
+ console.log(e);
+ }
+
  const x = this.pMarginLeft;
  const y = this.pMarginTop;
  const width = this.pWidth;

src/components/axes/DendrogramAxis.vue

@@ -283,6 +283,10 @@ export default {
 
  const canvasNode = canvas.node();
 
+ if(!canvasNode) {
+ return;
+ }
+
  const two = new Two({ 
  width: vm.computedWidth, 
  height: vm.computedHeight, 

src/components/plots/BarPlot.vue

@@ -251,6 +251,10 @@ export default {
 
  const canvasNode = canvas.node();
 
+ if(!canvasNode) {
+ return;
+ }
+
  const two = new Two({ 
  width: vm.pWidth, 
  height: vm.pHeight, 

src/components/plots/BoxPlot.vue

@@ -231,6 +231,10 @@ export default {
 
  const canvasNode = canvas.node();
 
+ if(!canvasNode) {
+ return;
+ }
+
  const two = new Two({ 
  width: vm.pWidth, 
  height: vm.pHeight, 

src/components/plots/CountBarPlot.vue

@@ -266,6 +266,10 @@ export default {
 
  const canvasNode = canvas.node();
 
+ if(!canvasNode) {
+ return;
+ }
+
  const two = new Two({ 
  width: vm.pWidth, 
  height: vm.pHeight, 

src/components/plots/DoubleStratifiedBoxPlot.vue

@@ -400,6 +400,10 @@ export default {
 
  const canvasNode = canvas.node();
 
+ if(!canvasNode) {
+ return;
+ }
+
  const two = new Two({ 
  width: vm.pWidth, 
  height: vm.pHeight, 

src/components/plots/DoubleStratifiedScatterPlot.vue

@@ -351,6 +351,10 @@ export default {
 
  const canvasNode = canvas.node();
 
+ if(!canvasNode) {
+ return;
+ }
+
  const two = new Two({ 
  width: vm.pWidth, 
  height: vm.pHeight, 

src/components/plots/DoubleStratifiedSinaPlot.vue

@@ -443,6 +443,10 @@ export default {
 
  const canvasNode = canvas.node();
 
+ if(!canvasNode) {
+ return;
+ }
+
  const two = new Two({ 
  width: vm.pWidth, 
  height: vm.pHeight,