Skip to content

Commit 707cb5a

Browse files
graphierosgraphieros
committed
Remove html2canvas
1 parent ee54e9f commit 707cb5a

34 files changed

+450
-765
lines changed

‎README.md

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@
77
# vue-data-ui
88

99
[![npm](https://img.shields.io/npm/v/vue-data-ui)](https://github.com/graphieros/vue-data-ui)
10-
[![Static Badge](https://img.shields.io/badge/components-61-blue)](https://github.com/graphieros/vue-data-ui)
10+
[![Static Badge](https://img.shields.io/badge/components-60-blue)](https://github.com/graphieros/vue-data-ui)
1111
[![GitHub issues](https://img.shields.io/github/issues/graphieros/vue-data-ui)](https://github.com/graphieros/vue-data-ui/issues)
1212
[![License](https://img.shields.io/badge/license-MIT-green)](https://github.com/graphieros/vue-data-ui?tab=MIT-1-ov-file#readme)
1313
[![MadeWithVueJs.com shield](https://madewithvuejs.com/storage/repo-shields/4526-shield.svg)](https://madewithvuejs.com/p/vue-data-ui/shield-link)
@@ -94,7 +94,6 @@ Available components
9494
- [VueUiIcon](https://vue-data-ui.graphieros.com/docs#vue-ui-icon)
9595
- [VueUiKpi](https://vue-data-ui.graphieros.com/docs#vue-ui-kpi)
9696
- [VueUiMiniLoader](https://vue-data-ui.graphieros.com/docs#vue-ui-mini-loader)
97-
- [VueUiScreenshot](https://vue-data-ui.graphieros.com/docs#vue-ui-screenshot)
9897
- [VueUiSkeleton](https://vue-data-ui.graphieros.com/docs#vue-ui-skeleton)
9998
- [VueUiTimer](https://vue-data-ui.graphieros.com/docs#vue-ui-timer)
10099

@@ -488,7 +487,6 @@ From the dataset you pass into the props, this component will produce the most a
488487
| `VueUiDigits` | `number` | `VueUiDigitsConfig` | ❌ | ❌ |
489488
| `VueUiKpi` | `number` | `VueUiKpiConfig` | ❌ | `#title`, `#value`, `#comment-before`, `#comment-after` |
490489
| `VueUiMiniLoader` | ❌ | `VueUiMiniLoaderConfig` | ❌ | ❌ |
491-
| `VueUiScreenshot` | ❌ | `VueUiScreenshotConfig` | `@postImage`, `shoot`, `close` | ❌ |
492490
| `VueUiSkeleton` | ❌ | `VueUiSkeletonConfig` | ❌ | ❌ |
493491
| `VueUiTimer` | ❌ | `VueUiTimerConfig` | `@start`, `@pause`, `@reset`, `@restart`, `@lap` | `#time`, `#controls`, `#laps`, `#chart-background` |
494492
| `VueUiIcon` | see below |

‎documentation/installation.md

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -211,7 +211,6 @@ From the dataset you pass into the props, this component will produce the most a
211211
| `VueUiDigits` | `number` | `VueUiDigitsConfig` | ❌ | ❌ |
212212
| `VueUiKpi` | `number` | `VueUiKpiConfig` | ❌ | `#title`, `#value`, `#comment-before`, `#comment-after` |
213213
| `VueUiMiniLoader` | ❌ | `VueUiMiniLoaderConfig` | ❌ | ❌ |
214-
| `VueUiScreenshot` | ❌ | `VueUiScreenshotConfig` | `@postImage`, `shoot`, `close` | ❌ |
215214
| `VueUiSkeleton` | ❌ | `VueUiSkeletonConfig` | ❌ | ❌ |
216215
| `VueUiTimer` | ❌ | `VueUiTimerConfig` | `@start`, `@pause`, `@reset`, `@restart`, `@lap` | `#time`, `#controls`, `#laps`, `#chart-background` |
217216
| `VueUiIcon` | see below |

‎package.json

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -98,7 +98,6 @@
9898
"@vitejs/plugin-vue": "^5.2.3",
9999
"canvg": "^4.0.3",
100100
"cypress": "^14.0.3",
101-
"html2canvas": "^1.4.1",
102101
"jspdf": "^3.0.1",
103102
"remove-attr": "^0.0.13",
104103
"sass": "^1.57.1",
@@ -107,4 +106,4 @@
107106
"vitest": "^3.1.1",
108107
"vue": "^3.5.13"
109108
}
110-
}
109+
}

‎src/App.vue

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -110,7 +110,6 @@ const components = ref([ //------|
110110
111111
/**
112112
* TODO: migrate manual testing for the following:
113-
* - VueUiScreenshot
114113
* - VueUiDashboard
115114
* - VueUiCursor
116115
*/
@@ -120,7 +119,7 @@ const components = ref([ //------|
120119
* Modify the index to display a component
121120
* [0] = VueUiXy
122121
*/
123-
const selectedComponent = ref(components.value[37]);
122+
const selectedComponent = ref(components.value[1]);
124123
125124
/**
126125
* Legacy testing arena where some non chart components can be tested

‎src/TestingArena.vue

Lines changed: 0 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,6 @@ import GaugeTest from "./components/vue-ui-gauge.vue";
2323
import ChestnutTest from "./components/vue-ui-chestnut.vue";
2424
import OnionTest from "./components/vue-ui-onion.vue";
2525
import VerticalTest from "./components/vue-ui-vertical-bar.vue";
26-
import ScreenshotTest from "./components/vue-ui-screenshot.vue";
2726
import RatingTest from "./components/vue-ui-rating.vue";
2827
import SkeletonTest from "./components/vue-ui-skeleton.vue";
2928
import SparklineTest from "./components/vue-ui-sparkline.vue";
@@ -4329,24 +4328,6 @@ function testGetData() {
43294328
</template>
43304329
</Box>
43314330

4332-
<Box @copy="copyConfig(PROD_CONFIG.vue_ui_screenshot)">
4333-
<template #title>
4334-
<BaseIcon name="screenshot"/>
4335-
VueUiScreenshot
4336-
</template>
4337-
<template #dev>
4338-
<VueDataUiTest component="VueUiScreenshot" ref="screenshotTest"/>
4339-
<button class="btn--orange" @click="shootScreenTest">SCREENSHOT</button>
4340-
</template>
4341-
<template #prod>
4342-
<VueDataUi component="VueUiScreenshot" ref="screenshotProd"/>
4343-
<button class="btn--green" @click="shootScreenProd">SCREENSHOT</button>
4344-
</template>
4345-
<template #config>
4346-
{{ PROD_CONFIG.vue_ui_screenshot }}
4347-
</template>
4348-
</Box>
4349-
43504331
<Box @copy="copyConfig(PROD_CONFIG.vue_ui_donut_evolution)">
43514332
<template #title>
43524333
<BaseIcon name="chartDonutEvolution"/>

‎src/atoms/BaseDirectionPad.vue

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@ const emit = defineEmits(['moveLeft', 'moveTop', 'moveRight', 'moveBottom', 'res
1414
</script>
1515

1616
<template>
17-
<div :style="`position: ${isFullscreen ? 'fixed' : 'absolute'};bottom:0;right:${isFullscreen ? '12px' : '0'};width:80px;height:80px`" data-html2canvas-ignore>
17+
<div :style="`position: ${isFullscreen ? 'fixed' : 'absolute'};bottom:0;right:${isFullscreen ? '12px' : '0'};width:80px;height:80px`" data-dom-to-png-ignore>
1818
<div style="position: relative;height:100%;width:100%">
1919
<button data-cy="direction-pad-left" @click.stop="emit('moveLeft')" style="position: absolute;left:0;top:50%;transform:translateY(-50%);height:24px;width:24px;padding:0;background:transparent;border:none;display:flex;align-items:center;justify-content:center;">
2020
<BaseIcon :stroke="color" name="arrowLeft" style="cursor: pointer"/>

‎src/atoms/DataTable.vue

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -43,7 +43,7 @@ const emit = defineEmits(['close'])
4343

4444
<template>
4545
<div ref="tableContainer" style="width: 100%; container-type: inline-size; position:relative;padding-top: 36px;overflow:auto" :class="{'atom-data-table': true, 'vue-ui-responsive': isResponsive}">
46-
<div data-cy="data-table-close" data-html2canvas-ignore role="button" tabindex="0" :style="`width:32px; position: absolute; top: 0; right:4px; padding: 0 0px; display: flex; align-items:center;justify-content:center;height: 36px; width: 32px; cursor:pointer; background:${thbg};`" @click="emit('close')" @keypress.enter="emit('close')">
46+
<div data-cy="data-table-close" data-dom-to-png-ignore role="button" tabindex="0" :style="`width:32px; position: absolute; top: 0; right:4px; padding: 0 0px; display: flex; align-items:center;justify-content:center;height: 36px; width: 32px; cursor:pointer; background:${thbg};`" @click="emit('close')" @keypress.enter="emit('close')">
4747
<BaseIcon name="close" :stroke="thc" :stroke-width="2" />
4848
</div>
4949
<table data-cy="vue-data-ui-table-data" class="vue-ui-data-table">

‎src/atoms/MonoSlicer.vue

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -70,7 +70,7 @@ const highlightStyle = computed(() => {
7070
</script>
7171

7272
<template>
73-
<div data-html2canvas-ignore>
73+
<div data-dom-to-png-ignore>
7474
<div v-if="value !== source" class="reset-wrapper">
7575
<button v-if="!useResetSlot" data-cy-reset tabindex="0" role="button" class="vue-data-ui-refresh-button"
7676
@click="reset">

‎src/atoms/NonSvgPenAndPaper.vue

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -259,7 +259,7 @@ const range = ref(null);
259259
<template>
260260
<div
261261
v-if="active"
262-
data-html2canvas-ignore
262+
data-dom-to-png-ignore
263263
:class="{
264264
'vue-ui-pen-and-paper-actions': true,
265265
'visible': active

‎src/atoms/PenAndPaper.vue

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -323,7 +323,7 @@ onBeforeUnmount(() => {
323323
</script>
324324
325325
<template>
326-
<div v-if="active" data-html2canvas-ignore class="vue-ui-pen-and-paper-actions">
326+
<div v-if="active" data-dom-to-png-ignore class="vue-ui-pen-and-paper-actions">
327327
<button class="vue-ui-pen-and-paper-action" @click="emit('close')" :style="{
328328
backgroundColor: backgroundColor,
329329
border: `1px solid ${buttonBorderColor}`

‎src/atoms/Slicer.vue

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -451,7 +451,7 @@ defineExpose({
451451
<template>
452452
<div
453453
data-cy="slicer"
454-
data-html2canvas-ignore
454+
data-dom-to-png-ignore
455455
style="padding: 0 24px"
456456
class="vue-data-ui-zoom"
457457
ref="zoomWrapper"

‎src/atoms/UserOptions.vue

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -264,7 +264,7 @@ const isInfo = ref({
264264
<div
265265
data-cy="user-options"
266266
v-click-outside="closeIfOpen"
267-
data-html2canvas-ignore
267+
data-dom-to-png-ignore
268268
class="vue-ui-user-options"
269269
:style="`z-index: ${zIndex}; height: 34px; position: ${isFullscreen ? 'fixed' : 'absolute'}; top: 0; ${position === 'right' ? `right:${isFullscreen ? '12px': '0'}` : `left:${isFullscreen ? '12px' : '0'}`}; padding: 4px; background:transparent;`">
270270

‎src/components/vue-data-ui.vue

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -37,7 +37,6 @@ const components = {
3737
VueUiRelationCircle: defineAsyncComponent(() => import('./vue-ui-relation-circle.vue')),
3838
VueUiRings: defineAsyncComponent(() => import('./vue-ui-rings.vue')),
3939
VueUiScatter: defineAsyncComponent(() => import('./vue-ui-scatter.vue')),
40-
VueUiScreenshot: defineAsyncComponent(() => import('./vue-ui-screenshot.vue')),
4140
VueUiSkeleton: defineAsyncComponent(() => import('./vue-ui-skeleton.vue')),
4241
VueUiSmiley: defineAsyncComponent(() => import('./vue-ui-smiley.vue')),
4342
VueUiSparkbar: defineAsyncComponent(() => import('./vue-ui-sparkbar.vue')),
@@ -100,7 +99,6 @@ const componentProps = {
10099
VueUiRelationCircle: ['config', 'dataset'],
101100
VueUiRings: ['config', 'dataset'],
102101
VueUiScatter: ['config', 'dataset'],
103-
VueUiScreenshot: ['config'],
104102
VueUiSkeleton: ['config'],
105103
VueUiSmiley: ['config', 'dataset'],
106104
VueUiSparkbar: ['config', 'dataset'],

‎src/components/vue-ui-3d-bar.vue

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -693,7 +693,7 @@ defineExpose({
693693
</text>
694694

695695
<!-- FIX KILLER -->
696-
<g v-if="selectionIsFixed" @click="selectionIsFixed = false; selectedSerie = null" data-html2canvas-ignore style="cursor:pointer">
696+
<g v-if="selectionIsFixed" @click="selectionIsFixed = false; selectedSerie = null" data-dom-to-png-ignore style="cursor:pointer">
697697
<rect :x="svg.width / 2 - 6" :y="svg.top - 20" :height="12" :width="12" fill="transparent"/>
698698
<path :d="`M${svg.width / 2 - 6},${svg.top - 20} ${svg.width / 2 + 6},${svg.top - 9}`" :stroke="FINAL_CONFIG.style.chart.color" stroke-linecap="round" stroke-width="1"/>
699699
<path :d="`M${svg.width / 2 + 6},${svg.top - 20} ${svg.width / 2 - 6},${svg.top - 9}`" :stroke="FINAL_CONFIG.style.chart.color" stroke-linecap="round" stroke-width="1"/>

‎src/components/vue-ui-annotator.vue

Lines changed: 44 additions & 39 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
<template>
22
<div class="vue-ui-annotator">
3-
<div data-html2canvas-ignore>
3+
<div data-dom-to-png-ignore>
44
<details
55
class="vue-ui-annotator-summary"
66
@toggle="toggleSummary"
@@ -1169,10 +1169,10 @@
11691169
</template>
11701170

11711171
<script>
1172-
import html2canvas from "html2canvas";
1173-
import JsPDF from "jspdf";
11741172
import { opacity, treeShake, convertConfigColors } from "../lib";
11751173
import { useConfig } from "../useConfig";
1174+
import { domToPng } from "../dom-to-png";
1175+
import JsPDF from "jspdf";
11761176
11771177
// TODO: add tooltips for all buttons
11781178
@@ -2841,64 +2841,69 @@ export default {
28412841
this.isSelectMode = false;
28422842
this.activeShape = undefined;
28432843
this.showCaret = false;
2844-
this.$nextTick(() => {
2844+
2845+
this.$nextTick(async () => {
28452846
const wrapper = this.$refs.drawSvgContainer;
2846-
const a4 = {
2847-
height: 851.89,
2848-
width: 595.28,
2849-
};
28502847
this.walkTheDOM(wrapper, (node) => {
28512848
if (node && node.nodeType === 1) {
28522849
node.setAttribute("font-family", "Helvetica");
28532850
node.style.fontFamily = "Helvetica";
2854-
node.replaceWith(node);
28552851
}
28562852
});
28572853
2858-
html2canvas(wrapper)
2859-
.then((canvas) => {
2860-
const contentWidth = canvas.width;
2861-
const contentHeight = canvas.height;
2854+
try {
2855+
const pngDataUrl = await domToPng({
2856+
container: wrapper,
2857+
scale: 2,
2858+
});
2859+
2860+
const image = new Image();
2861+
image.src = pngDataUrl;
2862+
2863+
image.onload = () => {
2864+
const a4 = {
2865+
width: 595.28,
2866+
height: 841.89,
2867+
};
2868+
2869+
const contentWidth = image.width;
2870+
const contentHeight = image.height;
28622871
const pageHeight = (contentWidth / a4.width) * a4.height;
2863-
let leftHeight = contentHeight;
2864-
let position = 0;
2872+
28652873
const imgWidth = a4.width;
2866-
const imgHeight = (582.28 / contentWidth) * contentHeight;
2867-
const pageData = canvas.toDataURL("image/png", 1.0);
2874+
const imgHeight = (imgWidth / contentWidth) * contentHeight;
2875+
28682876
const pdf = new JsPDF("", "pt", "a4");
2877+
let position = 0;
2878+
let leftHeight = contentHeight;
2879+
28692880
if (leftHeight < pageHeight) {
2870-
pdf.addImage(pageData, "PNG", 0, 0, imgWidth, imgHeight, "", "FAST");
2881+
pdf.addImage(pngDataUrl, "PNG", 0, 0, imgWidth, imgHeight, "", "FAST");
28712882
} else {
28722883
while (leftHeight > 0) {
2873-
pdf.addImage(
2874-
pageData,
2875-
"PNG",
2876-
0,
2877-
position,
2878-
imgWidth,
2879-
imgHeight,
2880-
"",
2881-
"FAST"
2882-
);
2884+
pdf.addImage(pngDataUrl, "PNG", 0, position, imgWidth, imgHeight, "", "FAST");
28832885
leftHeight -= pageHeight;
2884-
position -= a4.height - 24;
2886+
position -= a4.height;
28852887
if (leftHeight > 0) {
28862888
pdf.addPage();
28872889
}
28882890
}
28892891
}
2892+
28902893
pdf.save(`${new Date().toLocaleDateString()}_annotations.pdf`);
2891-
})
2892-
.finally(() => {
2893-
this.isPrinting = false;
2894-
this.walkTheDOM(wrapper, (node) => {
2895-
if (node && node.nodeType === 1) {
2896-
node.setAttribute("font-family", this.FINAL_CONFIG.style.fontFamily);
2897-
node.style.fontFamily = this.FINAL_CONFIG.style.fontFamily;
2898-
node.replaceWith(node);
2899-
}
2900-
});
2894+
};
2895+
} catch (err) {
2896+
console.error("Error generating image:", err);
2897+
} finally {
2898+
this.isPrinting = false;
2899+
2900+
this.walkTheDOM(wrapper, (node) => {
2901+
if (node && node.nodeType === 1) {
2902+
node.setAttribute("font-family", this.FINAL_CONFIG.style.fontFamily);
2903+
node.style.fontFamily = this.FINAL_CONFIG.style.fontFamily;
2904+
}
29012905
});
2906+
}
29022907
});
29032908
},
29042909
resetDraw() {

‎src/components/vue-ui-cursor.vue

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -84,7 +84,7 @@ const waveScale = computed(() => {
8484
</script>
8585

8686
<template>
87-
<svg data-cy="vue-ui-cursor" data-html2canvas-ignore :xmlns="XMLNS" v-if="isVisible" :style="`z-index: 2147483647; overflow: visible; pointer-events: none;background: transparent; position:fixed; top:${position.y}px; left:${position.x}px;`" viewBox="0 0 100 100" :height="FINAL_CONFIG.centerCircleRadius * 2" :width="FINAL_CONFIG.centerCircleRadius * 2">
87+
<svg data-cy="vue-ui-cursor" data-dom-to-png-ignore :xmlns="XMLNS" v-if="isVisible" :style="`z-index: 2147483647; overflow: visible; pointer-events: none;background: transparent; position:fixed; top:${position.y}px; left:${position.x}px;`" viewBox="0 0 100 100" :height="FINAL_CONFIG.centerCircleRadius * 2" :width="FINAL_CONFIG.centerCircleRadius * 2">
8888
<defs>
8989
<radialGradient id="follower" fy="30%" fx="30%">
9090
<stop offset="10%" :stop-color="FINAL_CONFIG.bubbleEffectColor" :stop-opacity="FINAL_CONFIG.bubbleEffectOpacity"/>

‎src/components/vue-ui-dashboard.vue

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -307,7 +307,7 @@ defineExpose({
307307
@touchstart="handleInteraction"
308308
@touchend="handleInteractionEnd"
309309
>
310-
<div data-html2canvas-ignore style="width: 100%; display:flex; justify-content: end;" v-if="FINAL_CONFIG.allowPrint">
310+
<div data-dom-to-png-ignore style="width: 100%; display:flex; justify-content: end;" v-if="FINAL_CONFIG.allowPrint">
311311
<button class="vue-ui-dashboard-button" @click="generatePdf" :disabled="isPrinting" style="margin-top:12px" :style="`color:${FINAL_CONFIG.style.board.color}`">
312312
<svg class="vue-ui-dashboard-print-icon" xmlns="http://www.w3.org/2000/svg" v-if="isPrinting" width="20" height="20" viewBox="0 0 24 24" stroke-width="1.5" :stroke="FINAL_CONFIG.style.board.color" fill="none" stroke-linecap="round" stroke-linejoin="round">
313313
<path stroke="none" d="M0 0h24v24H0z" fill="none"/>

‎src/components/vue-ui-donut-evolution.vue

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -970,7 +970,7 @@ defineExpose({
970970
style="filter:drop-shadow(0 12px 12px rgba(0,0,0,0.3))"
971971
/>
972972
<line
973-
data-html2canvas-ignore
973+
data-dom-to-png-ignore
974974
:x1="svg.absoluteWidth - padding.right - 15"
975975
:y1="padding.top + 5"
976976
:x2="svg.absoluteWidth - padding.right - 4"
@@ -980,7 +980,7 @@ defineExpose({
980980
stroke-width="1.5"
981981
/>
982982
<line
983-
data-html2canvas-ignore
983+
data-dom-to-png-ignore
984984
:x1="svg.absoluteWidth - padding.right - 15"
985985
:y2="padding.top + 5"
986986
:x2="svg.absoluteWidth - padding.right - 4"

‎src/components/vue-ui-molecule.vue

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -639,7 +639,7 @@ defineExpose({
639639
<slot name="watermark" v-bind="{ isPrinting: isPrinting || isImaging }"/>
640640
</div>
641641

642-
<div v-if="isZoom" data-html2canvas-ignore class="reset-wrapper">
642+
<div v-if="isZoom" data-dom-to-png-ignore class="reset-wrapper">
643643
<slot name="reset-action" :reset="resetZoom">
644644
<button
645645
data-cy-reset

0 commit comments

Comments
 (0)