Fix - Print - Add warmup for domToPng method in Safari

graphieros · graphieros · commit e124c2bc9cd4 · 2025-07-24T07:48:52.000+02:00
diff --git a/src/components/vue-ui-3d-bar.vue b/src/components/vue-ui-3d-bar.vue
@@ -530,7 +530,7 @@ async function getImage({ scale = 2} = {}) {
     if (!bar3dChart.value) return
     const { width, height } = bar3dChart.value.getBoundingClientRect();
     const aspectRatio = width / height;
-    const { imageUri, base64 } = await img(({ domElement: bar3dChart.value, base64: true, img: true, scale }))
+    const { imageUri, base64 } = await img({ domElement: bar3dChart.value, base64: true, img: true, scale })
     return { 
         imageUri, 
         base64, 
diff --git a/src/components/vue-ui-age-pyramid.vue b/src/components/vue-ui-age-pyramid.vue
@@ -460,7 +460,7 @@ async function getImage({ scale = 2} = {}) {
     if (!agePyramid.value) return
     const { width, height } = agePyramid.value.getBoundingClientRect();
     const aspectRatio = width / height;
-    const { imageUri, base64 } = await img(({ domElement: agePyramid.value, base64: true, img: true, scale}))
+    const { imageUri, base64 } = await img({ domElement: agePyramid.value, base64: true, img: true, scale})
     return { 
         imageUri, 
         base64, 
diff --git a/src/components/vue-ui-bullet.vue b/src/components/vue-ui-bullet.vue
@@ -361,7 +361,7 @@ async function getImage({ scale = 2} = {}) {
     if (!bulletChart.value) return
     const { width, height } = bulletChart.value.getBoundingClientRect();
     const aspectRatio = width / height;
-    const { imageUri, base64 } = await img(({ domElement: bulletChart.value, base64: true, img: true, scale}))
+    const { imageUri, base64 } = await img({ domElement: bulletChart.value, base64: true, img: true, scale})
     return { 
         imageUri, 
         base64, 
diff --git a/src/components/vue-ui-chestnut.vue b/src/components/vue-ui-chestnut.vue
@@ -538,7 +538,7 @@ async function getImage({ scale = 2} = {}) {
     if (!chestnutChart.value) return;
     const { width, height } = chestnutChart.value.getBoundingClientRect();
     const aspectRatio = width / height; 
-    const { imageUri, base64 } = await img(({ domElement: chestnutChart.value, base64: true, img: true, scale}))
+    const { imageUri, base64 } = await img({ domElement: chestnutChart.value, base64: true, img: true, scale})
     return { 
         imageUri, 
         base64, 
diff --git a/src/components/vue-ui-chord.vue b/src/components/vue-ui-chord.vue
@@ -813,7 +813,7 @@ async function getImage({ scale = 2} = {}) {
     if (!chordChart.value) return
     const { width, height } = chordChart.value.getBoundingClientRect();
     const aspectRatio = width / height; 
-    const { imageUri, base64 } = await img(({ domElement: chordChart.value, base64: true, img: true, scale }))
+    const { imageUri, base64 } = await img({ domElement: chordChart.value, base64: true, img: true, scale })
     return { 
         imageUri, 
         base64, 
diff --git a/src/components/vue-ui-circle-pack.vue b/src/components/vue-ui-circle-pack.vue
@@ -449,7 +449,7 @@ async function getImage({ scale = 2} = {}) {
     if (!circlePackChart.value) return;
     const { width, height } = circlePackChart.value.getBoundingClientRect();
     const aspectRatio = width / height;
-    const { imageUri, base64 } = await img(({ domElement: circlePackChart.value, base64: true, img: true, scale}))
+    const { imageUri, base64 } = await img({ domElement: circlePackChart.value, base64: true, img: true, scale})
     return { 
         imageUri, 
         base64, 
diff --git a/src/components/vue-ui-donut-evolution.vue b/src/components/vue-ui-donut-evolution.vue
@@ -624,7 +624,7 @@ async function getImage({ scale = 2} = {}) {
     if (!donutEvolutionChart.value) return;
     const { width, height } = donutEvolutionChart.value.getBoundingClientRect();
     const aspectRatio = width / height;
-    const { imageUri, base64 } = await img(({ domElement: donutEvolutionChart.value, base64: true, img: true, scale}))
+    const { imageUri, base64 } = await img({ domElement: donutEvolutionChart.value, base64: true, img: true, scale})
     return { 
         imageUri, 
         base64, 
diff --git a/src/components/vue-ui-donut.vue b/src/components/vue-ui-donut.vue
@@ -812,7 +812,7 @@ async function getImage({ scale = 2} = {}) {
     if (!donutChart.value) return
     const { width, height } = donutChart.value.getBoundingClientRect()
     const aspectRatio = width / height
-    const { imageUri, base64 } = await img(({ domElement: donutChart.value, base64: true, img: true, scale}))
+    const { imageUri, base64 } = await img({ domElement: donutChart.value, base64: true, img: true, scale})
     return { 
         imageUri, 
         base64, 
diff --git a/src/components/vue-ui-dumbbell.vue b/src/components/vue-ui-dumbbell.vue
@@ -452,7 +452,7 @@ async function getImage({ scale = 2} = {}) {
     if (!dumbbellChart.value) return;
     const { width, height } = dumbbellChart.value.getBoundingClientRect();
     const aspectRatio = width / height;
-    const { imageUri, base64 } = await img(({ domElement: dumbbellChart.value, base64: true, img: true, scale }))
+    const { imageUri, base64 } = await img({ domElement: dumbbellChart.value, base64: true, img: true, scale })
     return { 
         imageUri, 
         base64, 
diff --git a/src/components/vue-ui-flow.vue b/src/components/vue-ui-flow.vue
@@ -772,7 +772,7 @@ async function getImage({ scale = 2} = {}) {
     if (!flowChart.value) return;
     const { width, height } = flowChart.value.getBoundingClientRect();
     const aspectRatio = width / height;
-    const { imageUri, base64 } = await img(({ domElement: flowChart.value, base64: true, img: true, scale}))
+    const { imageUri, base64 } = await img({ domElement: flowChart.value, base64: true, img: true, scale})
     return { 
         imageUri, 
         base64, 
diff --git a/src/components/vue-ui-funnel.vue b/src/components/vue-ui-funnel.vue
@@ -434,7 +434,7 @@ async function getImage({ scale = 2} = {}) {
     if (!funnelChart.value) return;
     const { width, height } = funnelChart.value.getBoundingClientRect();
     const aspectRatio = width / height;
-    const { imageUri, base64 } = await img(({ domElement: funnelChart.value, base64: true, img: true, scale}))
+    const { imageUri, base64 } = await img({ domElement: funnelChart.value, base64: true, img: true, scale})
     return { 
         imageUri, 
         base64, 
diff --git a/src/components/vue-ui-galaxy.vue b/src/components/vue-ui-galaxy.vue
@@ -444,7 +444,7 @@ async function getImage({ scale = 2} = {}) {
     if (!galaxyChart.value) return;
     const { width, height } = galaxyChart.value.getBoundingClientRect();
     const aspectRatio = width / height;
-    const { imageUri, base64 } = await img(({ domElement: galaxyChart.value, base64: true, img: true, scale}))
+    const { imageUri, base64 } = await img({ domElement: galaxyChart.value, base64: true, img: true, scale})
     return { 
         imageUri, 
         base64, 
diff --git a/src/components/vue-ui-gauge.vue b/src/components/vue-ui-gauge.vue
@@ -515,7 +515,7 @@ async function getImage({ scale = 2} = {}) {
     if (!gaugeChart.value) return;
     const { width, height } = gaugeChart.value.getBoundingClientRect();
     const aspectRatio = width / height;
-    const { imageUri, base64 } = await img(({ domElement: gaugeChart.value, base64: true, img: true, scale}))
+    const { imageUri, base64 } = await img({ domElement: gaugeChart.value, base64: true, img: true, scale})
     return { 
         imageUri, 
         base64, 
diff --git a/src/components/vue-ui-heatmap.vue b/src/components/vue-ui-heatmap.vue
@@ -476,7 +476,7 @@ async function getImage({ scale = 2} = {}) {
     if (!heatmapChart.value) return;
     const { width, height } = heatmapChart.value.getBoundingClientRect();
     const aspectRatio = width / height;
-    const { imageUri, base64 } = await img(({ domElement: heatmapChart.value, base64: true, img: true, scale}))
+    const { imageUri, base64 } = await img({ domElement: heatmapChart.value, base64: true, img: true, scale})
     return { 
         imageUri, 
         base64, 
diff --git a/src/components/vue-ui-history-plot.vue b/src/components/vue-ui-history-plot.vue
@@ -700,7 +700,7 @@ async function getImage({ scale = 2} = {}) {
     if (!historyPlotChart.value) return;
     const { width, height } = historyPlotChart.value.getBoundingClientRect();
     const aspectRatio = width / height;
-    const { imageUri, base64 } = await img(({ domElement: historyPlotChart.value, base64: true, img: true, scale}))
+    const { imageUri, base64 } = await img({ domElement: historyPlotChart.value, base64: true, img: true, scale})
     return { 
         imageUri, 
         base64, 
diff --git a/src/components/vue-ui-molecule.vue b/src/components/vue-ui-molecule.vue
@@ -468,7 +468,7 @@ async function getImage({ scale = 2} = {}) {
     if (!moleculeChart.value) return;
     const { width, height } = moleculeChart.value.getBoundingClientRect();
     const aspectRatio = width / height; 
-    const { imageUri, base64 } = await img(({ domElement: moleculeChart.value, base64: true, img: true, scale }))
+    const { imageUri, base64 } = await img({ domElement: moleculeChart.value, base64: true, img: true, scale })
     return { 
         imageUri, 
         base64, 
diff --git a/src/components/vue-ui-mood-radar.vue b/src/components/vue-ui-mood-radar.vue
@@ -327,7 +327,7 @@ async function getImage({ scale = 2} = {}) {
     if (!moodRadarChart.value) return;
     const { width, height } = moodRadarChart.value.getBoundingClientRect();
     const aspectRatio = width / height;
-    const { imageUri, base64 } = await img(({ domElement: moodRadarChart.value, base64: true, img: true, scale }))
+    const { imageUri, base64 } = await img({ domElement: moodRadarChart.value, base64: true, img: true, scale })
     return { 
         imageUri, 
         base64, 
diff --git a/src/components/vue-ui-nested-donuts.vue b/src/components/vue-ui-nested-donuts.vue
@@ -1073,7 +1073,7 @@ async function getImage({ scale = 2} = {}) {
     if (!nestedDonutsChart.value) return;
     const { width, height } = nestedDonutsChart.value.getBoundingClientRect();
     const aspectRatio = width / height;
-    const { imageUri, base64 } = await img(({ domElement: nestedDonutsChart.value, base64: true, img: true, scale}))
+    const { imageUri, base64 } = await img({ domElement: nestedDonutsChart.value, base64: true, img: true, scale})
     return { 
         imageUri, 
         base64, 
diff --git a/src/components/vue-ui-onion.vue b/src/components/vue-ui-onion.vue
@@ -512,7 +512,7 @@ async function getImage({ scale = 2} = {}) {
     if (!onionChart.value) return;
     const { width, height } = onionChart.value.getBoundingClientRect();
     const aspectRatio = width / height;
-    const { imageUri, base64 } = await img(({ domElement: onionChart.value, base64: true, img: true, scale}))
+    const { imageUri, base64 } = await img({ domElement: onionChart.value, base64: true, img: true, scale})
     return { 
         imageUri, 
         base64, 
diff --git a/src/components/vue-ui-parallel-coordinate-plot.vue b/src/components/vue-ui-parallel-coordinate-plot.vue
@@ -586,7 +586,7 @@ async function getImage({ scale = 2} = {}) {
     if (!pcpChart.value) return;
     const { width, height } = pcpChart.value.getBoundingClientRect();
     const aspectRatio = width / height;
-    const { imageUri, base64 } = await img(({ domElement: pcpChart.value, base64: true, img: true, scale}))
+    const { imageUri, base64 } = await img({ domElement: pcpChart.value, base64: true, img: true, scale})
     return { 
         imageUri, 
         base64, 
diff --git a/src/components/vue-ui-quadrant.vue b/src/components/vue-ui-quadrant.vue
@@ -980,7 +980,7 @@ async function getImage({ scale = 2} = {}) {
     if (!quadrantChart.value) return;
     const { width, height } = quadrantChart.value.getBoundingClientRect();
     const aspectRatio = width / height;
-    const { imageUri, base64 } = await img(({ domElement: quadrantChart.value, base64: true, img: true, scale }))
+    const { imageUri, base64 } = await img({ domElement: quadrantChart.value, base64: true, img: true, scale })
     return { 
         imageUri, 
         base64, 
diff --git a/src/components/vue-ui-quick-chart.vue b/src/components/vue-ui-quick-chart.vue
@@ -994,7 +994,7 @@ async function getImage({ scale = 2} = {}) {
     if (!quickChart.value) return;
     const { width, height } = quickChart.value.getBoundingClientRect();
     const aspectRatio = width / height;
-    const { imageUri, base64 } = await img(({ domElement: quickChart.value, base64: true, img: true, scale }))
+    const { imageUri, base64 } = await img({ domElement: quickChart.value, base64: true, img: true, scale })
     return { 
         imageUri, 
         base64, 
diff --git a/src/components/vue-ui-radar.vue b/src/components/vue-ui-radar.vue
@@ -599,7 +599,7 @@ async function getImage({ scale = 2} = {}) {
     if (!radarChart.value) return;
     const { width, height } = radarChart.value.getBoundingClientRect();
     const aspectRatio = width / height; 
-    const { imageUri, base64 } = await img(({ domElement: radarChart.value, base64: true, img: true, scale }))
+    const { imageUri, base64 } = await img({ domElement: radarChart.value, base64: true, img: true, scale })
     return { 
         imageUri, 
         base64, 
diff --git a/src/components/vue-ui-relation-circle.vue b/src/components/vue-ui-relation-circle.vue
@@ -464,7 +464,7 @@ async function getImage({ scale = 2} = {}) {
     if (!relationCircleChart.value) return;
     const { width, height } = relationCircleChart.value.getBoundingClientRect();
     const aspectRatio = width / height;
-    const { imageUri, base64 } = await img(({ domElement: relationCircleChart.value, base64: true, img: true, scale }))
+    const { imageUri, base64 } = await img({ domElement: relationCircleChart.value, base64: true, img: true, scale })
     return { 
         imageUri, 
         base64, 
diff --git a/src/components/vue-ui-ridgeline.vue b/src/components/vue-ui-ridgeline.vue
@@ -651,7 +651,7 @@ async function getImage({ scale = 2} = {}) {
     if (!ridgelineChart.value) return;
     const { width, height } = ridgelineChart.value.getBoundingClientRect();
     const aspectRatio = width / height; 
-    const { imageUri, base64 } = await img(({ domElement: ridgelineChart.value, base64: true, img: true, scale}))
+    const { imageUri, base64 } = await img({ domElement: ridgelineChart.value, base64: true, img: true, scale})
     return { 
         imageUri, 
         base64, 
diff --git a/src/components/vue-ui-rings.vue b/src/components/vue-ui-rings.vue
@@ -514,7 +514,7 @@ async function getImage({ scale = 2} = {}) {
     if (!ringsChart.value) return;
     const { width, height } = ringsChart.value.getBoundingClientRect();
     const aspectRatio = width / height; 
-    const { imageUri, base64 } = await img(({ domElement: ringsChart.value, base64: true, img: true, scale}))
+    const { imageUri, base64 } = await img({ domElement: ringsChart.value, base64: true, img: true, scale})
     return { 
       imageUri, 
       base64, 
diff --git a/src/components/vue-ui-scatter.vue b/src/components/vue-ui-scatter.vue
@@ -646,7 +646,7 @@ async function getImage({ scale = 2} = {}) {
     if (!scatterChart.value) return;
     const { width, height } = scatterChart.value.getBoundingClientRect();
     const aspectRatio = width / height;
-    const { imageUri, base64 } = await img(({ domElement: scatterChart.value, base64: true, img: true, scale }))
+    const { imageUri, base64 } = await img({ domElement: scatterChart.value, base64: true, img: true, scale })
     return { 
         imageUri, 
         base64, 
diff --git a/src/components/vue-ui-strip-plot.vue b/src/components/vue-ui-strip-plot.vue
@@ -515,7 +515,7 @@ async function getImage({ scale = 2} = {}) {
     if (!stripPlotChart.value) return;
     const { width, height } = stripPlotChart.value.getBoundingClientRect();
     const aspectRatio = width / height;
-    const { imageUri, base64 } = await img(({ domElement: stripPlotChart.value, base64: true, img: true, scale }))
+    const { imageUri, base64 } = await img({ domElement: stripPlotChart.value, base64: true, img: true, scale })
     return { 
         imageUri, 
         base64, 
diff --git a/src/components/vue-ui-thermometer.vue b/src/components/vue-ui-thermometer.vue
@@ -273,7 +273,7 @@ async function getImage({ scale = 2} = {}) {
     if (!thermoChart.value) return;
     const { width, height } = thermoChart.value.getBoundingClientRect();
     const aspectRatio = width / height;
-    const { imageUri, base64 } = await img(({ domElement: thermoChart.value, base64: true, img: true, scale }))
+    const { imageUri, base64 } = await img({ domElement: thermoChart.value, base64: true, img: true, scale })
     return { 
         imageUri, 
         base64, 
diff --git a/src/components/vue-ui-tiremarks.vue b/src/components/vue-ui-tiremarks.vue
@@ -290,7 +290,7 @@ async function getImage({ scale = 2} = {}) {
     if (!tiremarksChart.value) return;
     const { width, height } = tiremarksChart.value.getBoundingClientRect();
     const aspectRatio = width / height; 
-    const { imageUri, base64 } = await img(({ domElement: tiremarksChart.value, base64: true, img: true, scale }))
+    const { imageUri, base64 } = await img({ domElement: tiremarksChart.value, base64: true, img: true, scale })
     return { 
         imageUri, 
         base64, 
diff --git a/src/components/vue-ui-treemap.vue b/src/components/vue-ui-treemap.vue
@@ -637,7 +637,7 @@ async function getImage({ scale = 2} = {}) {
     if (!treemapChart.value) return;
     const { width, height } = treemapChart.value.getBoundingClientRect();
     const aspectRatio = width / height; 
-    const { imageUri, base64 } = await img(({ domElement: treemapChart.value, base64: true, img: true, scale}))
+    const { imageUri, base64 } = await img({ domElement: treemapChart.value, base64: true, img: true, scale})
     return { 
         imageUri, 
         base64, 
diff --git a/src/components/vue-ui-vertical-bar.vue b/src/components/vue-ui-vertical-bar.vue
@@ -676,7 +676,7 @@ async function getImage({ scale = 2} = {}) {
     if (!verticalBarChart.value) return;
     const { width, height } = verticalBarChart.value.getBoundingClientRect();
     const aspectRatio = width / height;
-    const { imageUri, base64 } = await img(({ domElement: verticalBarChart.value, base64: true, img: true, scale}))
+    const { imageUri, base64 } = await img({ domElement: verticalBarChart.value, base64: true, img: true, scale})
     return { 
         imageUri, 
         base64, 
diff --git a/src/components/vue-ui-waffle.vue b/src/components/vue-ui-waffle.vue
@@ -761,7 +761,7 @@ async function getImage({ scale = 2} = {}) {
     if (!waffleChart.value) return;
     const { width, height } = waffleChart.value.getBoundingClientRect();
     const aspectRatio = width / height; 
-    const { imageUri, base64 } = await img(({ domElement: waffleChart.value, base64: true, img: true, scale}))
+    const { imageUri, base64 } = await img({ domElement: waffleChart.value, base64: true, img: true, scale})
     return { 
         imageUri, 
         base64, 
diff --git a/src/components/vue-ui-wheel.vue b/src/components/vue-ui-wheel.vue
@@ -257,7 +257,7 @@ async function getImage({ scale = 2} = {}) {
     if (!wheelChart.value) return;
     const { width, height } = wheelChart.value.getBoundingClientRect();
     const aspectRatio = width / height;
-    const { imageUri, base64 } = await img(({ domElement: wheelChart.value, base64: true, img: true, scale }))
+    const { imageUri, base64 } = await img({ domElement: wheelChart.value, base64: true, img: true, scale })
     return { 
         imageUri, 
         base64, 
diff --git a/src/components/vue-ui-word-cloud.vue b/src/components/vue-ui-word-cloud.vue
@@ -368,7 +368,7 @@ async function getImage({ scale = 2} = {}) {
     if (!wordCloudChart.value) return;
     const { width, height } = wordCloudChart.value.getBoundingClientRect();
     const aspectRatio = width / height; 
-    const { imageUri, base64 } = await img(({ domElement: wordCloudChart.value, base64: true, img: true, scale }))
+    const { imageUri, base64 } = await img({ domElement: wordCloudChart.value, base64: true, img: true, scale })
     return { 
         imageUri, 
         base64, 
diff --git a/src/components/vue-ui-world.vue b/src/components/vue-ui-world.vue
@@ -610,7 +610,7 @@ async function getImage({ scale = 2} = {}) {
     if (!worldChart.value) return;
     const { width, height } = worldChart.value.getBoundingClientRect();
     const aspectRatio = width / height; 
-    const { imageUri, base64 } = await img(({ domElement: worldChart.value, base64: true, img: true, scale }))
+    const { imageUri, base64 } = await img({ domElement: worldChart.value, base64: true, img: true, scale })
     return { 
         imageUri, 
         base64, 
diff --git a/src/components/vue-ui-xy-canvas.vue b/src/components/vue-ui-xy-canvas.vue
@@ -1554,7 +1554,7 @@ async function getImage({ scale = 2} = {}) {
     if (!xy.value) return;
     const { width, height } = xy.value.getBoundingClientRect();
     const aspectRatio = width / height;
-    const { imageUri, base64 } = await img(({ domElement: xy.value, base64: true, img: true, scale }))
+    const { imageUri, base64 } = await img({ domElement: xy.value, base64: true, img: true, scale })
     return { 
         imageUri, 
         base64, 
diff --git a/src/components/vue-ui-xy.vue b/src/components/vue-ui-xy.vue
@@ -3603,7 +3603,7 @@ export default {
             if (!this.$refs.chart) return
             const { width, height } = this.$refs.chart.getBoundingClientRect();
             const aspectRatio = width / height;
-            const { imageUri, base64 } = await img(({ domElement: this.$refs.chart, base64: true, img: true, scale}))
+            const { imageUri, base64 } = await img({ domElement: this.$refs.chart, base64: true, img: true, scale})
             return { 
                 imageUri, 
                 base64, 
diff --git a/src/img.js b/src/img.js
@@ -2,6 +2,29 @@ import { domToPng } from "./dom-to-png";
 
 export default async function img({ domElement, fileName, format = 'png', scale = 2, base64 = false, img = false }) {
   if (!domElement) return Promise.reject('No element provided');
+  
+  const isSafari = typeof navigator !== 'undefined' &&
+  /^((?!chrome|android).)*safari/i.test(navigator.userAgent);
+
+  await new Promise(resolve => setTimeout(resolve, 200));
+  
+  if (isSafari) {
+    // Warming up in Safari, because it never works on the first try
+    try {
+      await domToPng({ container: domElement, scale });
+      await domToPng({ container: domElement, scale });
+      await domToPng({ container: domElement, scale });
+      await domToPng({ container: domElement, scale });
+      if (base64) {
+        await domToPng({ container: domElement, scale, base64 });
+        await domToPng({ container: domElement, scale, base64 });
+        await domToPng({ container: domElement, scale, base64 });
+        await domToPng({ container: domElement, scale, base64 });
+      }
+    } catch (_) {
+      // ignore any errors during warm‑up
+    }
+  }
 
   if (base64 && img) {
     try {
@@ -13,7 +36,7 @@ export default async function img({ domElement, fileName, format = 'png', scale
       });
       return { imageUri: p, base64: b64 }
     } catch(err) {
-      console.error("Error generating imgae information for the chart", err);
+      console.error("Error generating image information for the chart", err);
     }
   } else if (base64) {
     try {
