@geode/opengeodeweb-front 10.15.0 → 10.16.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -1,9 +1,11 @@
|
|
|
1
1
|
<script setup>
|
|
2
2
|
import ToolPanel from "@ogw_front/components/ToolPanel";
|
|
3
3
|
import fileDownload from "js-file-download";
|
|
4
|
-
import { useViewerStore } from "@ogw_front/stores/viewer";
|
|
5
4
|
import viewer_schemas from "@geode/opengeodeweb-viewer/opengeodeweb_viewer_schemas.json";
|
|
6
5
|
|
|
6
|
+
import { useFeedbackStore } from "@ogw_front/stores/feedback";
|
|
7
|
+
import { useViewerStore } from "@ogw_front/stores/viewer";
|
|
8
|
+
|
|
7
9
|
const show = defineModel({ type: Boolean, default: false });
|
|
8
10
|
|
|
9
11
|
const { width } = defineProps({
|
|
@@ -15,19 +17,38 @@ const output_extensions =
|
|
|
15
17
|
const filename = ref("");
|
|
16
18
|
const output_extension = ref("png");
|
|
17
19
|
const include_background = ref(true);
|
|
20
|
+
const screenshot_type = ref("file");
|
|
18
21
|
|
|
19
22
|
async function takeScreenshot() {
|
|
20
23
|
const viewerStore = useViewerStore();
|
|
24
|
+
const feedbackStore = useFeedbackStore();
|
|
25
|
+
const current_filename = screenshot_type.value === "file" ? filename.value : "screenshot";
|
|
21
26
|
await viewerStore.request(
|
|
22
27
|
viewer_schemas.opengeodeweb_viewer.viewer.take_screenshot,
|
|
23
28
|
{
|
|
24
|
-
filename:
|
|
29
|
+
filename: current_filename,
|
|
25
30
|
output_extension: output_extension.value,
|
|
26
31
|
include_background: include_background.value,
|
|
27
32
|
},
|
|
28
33
|
{
|
|
29
|
-
response_function: (response) => {
|
|
30
|
-
|
|
34
|
+
response_function: async (response) => {
|
|
35
|
+
if (screenshot_type.value === "file") {
|
|
36
|
+
fileDownload(response.blob, `${current_filename}.${output_extension.value}`);
|
|
37
|
+
feedbackStore.add_success("Screenshot downloaded");
|
|
38
|
+
} else {
|
|
39
|
+
try {
|
|
40
|
+
const pngBlob = new Blob([response.blob], { type: "image/png" });
|
|
41
|
+
await navigator.clipboard.write([new ClipboardItem({ "image/png": pngBlob })]);
|
|
42
|
+
feedbackStore.add_success("Screenshot copied to clipboard");
|
|
43
|
+
} catch (error) {
|
|
44
|
+
feedbackStore.add_error(
|
|
45
|
+
undefined,
|
|
46
|
+
undefined,
|
|
47
|
+
"Clipboard Error",
|
|
48
|
+
`Failed to copy screenshot to clipboard: ${error.message}`,
|
|
49
|
+
);
|
|
50
|
+
}
|
|
51
|
+
}
|
|
31
52
|
},
|
|
32
53
|
},
|
|
33
54
|
);
|
|
@@ -39,6 +60,12 @@ watch(output_extension, (value) => {
|
|
|
39
60
|
include_background.value = true;
|
|
40
61
|
}
|
|
41
62
|
});
|
|
63
|
+
|
|
64
|
+
watch(screenshot_type, (value) => {
|
|
65
|
+
if (value === "clipboard") {
|
|
66
|
+
output_extension.value = "png";
|
|
67
|
+
}
|
|
68
|
+
});
|
|
42
69
|
</script>
|
|
43
70
|
|
|
44
71
|
<template>
|
|
@@ -51,7 +78,23 @@ watch(output_extension, (value) => {
|
|
|
51
78
|
@action="takeScreenshot"
|
|
52
79
|
>
|
|
53
80
|
<v-container class="pa-5">
|
|
54
|
-
<v-row>
|
|
81
|
+
<v-row justify="center">
|
|
82
|
+
<v-col cols="12" class="py-0 d-flex justify-center">
|
|
83
|
+
<v-btn-toggle
|
|
84
|
+
v-model="screenshot_type"
|
|
85
|
+
mandatory
|
|
86
|
+
color="primary"
|
|
87
|
+
variant="outlined"
|
|
88
|
+
class="mb-4"
|
|
89
|
+
density="comfortable"
|
|
90
|
+
>
|
|
91
|
+
<v-btn value="file" prepend-icon="mdi-file-download-outline"> File </v-btn>
|
|
92
|
+
<v-btn value="clipboard" prepend-icon="mdi-content-copy"> Clipboard </v-btn>
|
|
93
|
+
</v-btn-toggle>
|
|
94
|
+
</v-col>
|
|
95
|
+
</v-row>
|
|
96
|
+
|
|
97
|
+
<v-row v-if="screenshot_type === 'file'">
|
|
55
98
|
<v-col cols="8" class="py-0">
|
|
56
99
|
<v-text-field v-model="filename" label="File name"></v-text-field>
|
|
57
100
|
</v-col>
|
|
@@ -69,12 +112,27 @@ watch(output_extension, (value) => {
|
|
|
69
112
|
<v-col cols="12" class="py-0">
|
|
70
113
|
<v-switch
|
|
71
114
|
v-model="include_background"
|
|
72
|
-
:disabled="output_extension !== 'png'"
|
|
115
|
+
:disabled="screenshot_type === 'file' && output_extension !== 'png'"
|
|
73
116
|
label="Include background"
|
|
74
117
|
inset
|
|
75
118
|
></v-switch>
|
|
76
119
|
</v-col>
|
|
77
120
|
</v-row>
|
|
78
121
|
</v-container>
|
|
122
|
+
|
|
123
|
+
<template #actions>
|
|
124
|
+
<v-card-actions class="justify-center pb-6" style="gap: 12px">
|
|
125
|
+
<v-btn variant="text" size="small" color="white" @click="show = false"> Cancel </v-btn>
|
|
126
|
+
<v-btn
|
|
127
|
+
variant="outlined"
|
|
128
|
+
size="small"
|
|
129
|
+
:disabled="(screenshot_type === 'file' && !filename) || !output_extension"
|
|
130
|
+
color="white"
|
|
131
|
+
@click="takeScreenshot()"
|
|
132
|
+
>
|
|
133
|
+
Screenshot
|
|
134
|
+
</v-btn>
|
|
135
|
+
</v-card-actions>
|
|
136
|
+
</template>
|
|
79
137
|
</ToolPanel>
|
|
80
138
|
</template>
|
package/package.json
CHANGED