Skip to content

Commit 0fd31e7

Browse files
JulienChampagnolJulienChampagnol
committed
fix
1 parent 550480b commit 0fd31e7

File tree

2 files changed

+139
-82
lines changed

2 files changed

+139
-82
lines changed

‎components/Screenshot.vue‎

Lines changed: 87 additions & 63 deletions
Original file line numberDiff line numberDiff line change
@@ -1,80 +1,80 @@
11
<template>
2-
<v-dialog
3-
v-model="props.show_dialog"
4-
@click:outside="emit('close')"
5-
max-width="800px"
6-
class="text-center"
2+
<v-sheet
3+
v-if="props.show_dialog"
4+
:width="props.width + 'px'"
5+
class="screenshot_menu"
6+
border="md"
77
>
8-
<v-sheet border="md">
9-
<v-card color="#3c9983">
10-
<v-card-title>
11-
<h3 class="mt-4">Take a screenshot</h3>
12-
</v-card-title>
13-
<v-card-text>
14-
<v-container>
15-
<v-row>
16-
<v-col cols="8">
17-
<v-text-field
18-
v-model="filename"
19-
label="File name"
20-
></v-text-field>
21-
</v-col>
22-
<v-col cols="4">
23-
<v-select
24-
v-model="output_extension"
25-
:items="output_extensions"
26-
label="Extension"
27-
required
28-
/>
29-
</v-col>
30-
</v-row>
8+
<v-card color="#3c9983" class="pa-0">
9+
<v-card-title>
10+
<h3 class="mt-4">Take a screenshot</h3>
11+
</v-card-title>
12+
<v-card-text class="pa-0">
13+
<v-container>
14+
<v-row>
15+
<v-col cols="8" class="py-0">
16+
<v-text-field v-model="filename" label="File name"></v-text-field>
17+
</v-col>
18+
<v-col cols="4" class="py-0">
19+
<v-select
20+
v-model="output_extension"
21+
:items="output_extensions"
22+
label="Extension"
23+
required
24+
/>
25+
</v-col>
26+
</v-row>
3127

32-
<v-row>
33-
<v-col cols="12">
34-
<v-switch
35-
v-model="include_background"
36-
:disabled="output_extension !== 'png'"
37-
label="Include background"
38-
inset
39-
></v-switch>
40-
</v-col>
41-
</v-row>
42-
</v-container>
43-
</v-card-text>
44-
<v-card-actions justify-center>
45-
<v-btn
46-
variant="outlined"
47-
color="white"
48-
text
49-
@click="emit('close')"
50-
class="ml-8 mb-4"
51-
>Cancel</v-btn
52-
>
53-
<v-btn
54-
variant="outlined"
55-
class="mb-4"
56-
:disabled="!filename || !output_extension"
57-
color="white"
58-
text
59-
@click="takeScreenshot()"
60-
>Screenshot</v-btn
61-
>
62-
</v-card-actions>
63-
</v-card>
64-
</v-sheet>
65-
</v-dialog>
28+
<v-row>
29+
<v-col cols="12" class="py-0">
30+
<v-switch
31+
v-model="include_background"
32+
:disabled="output_extension !== 'png'"
33+
label="Include background"
34+
inset
35+
></v-switch>
36+
</v-col>
37+
</v-row>
38+
</v-container>
39+
</v-card-text>
40+
<v-card-actions justify-center>
41+
<v-btn
42+
variant="outlined"
43+
color="white"
44+
text
45+
@click="emit('close')"
46+
class="ml-8 mb-4"
47+
>Cancel</v-btn
48+
>
49+
<v-btn
50+
variant="outlined"
51+
class="mb-4"
52+
:disabled="!filename || !output_extension"
53+
color="white"
54+
text
55+
@click="takeScreenshot()"
56+
>Screenshot</v-btn
57+
>
58+
</v-card-actions>
59+
</v-card>
60+
</v-sheet>
6661
</template>
6762

6863
<script setup>
6964
import fileDownload from "js-file-download"
65+
import viewer_schemas from "@geode/opengeodeweb-viewer/schemas.json"
7066
7167
const emit = defineEmits(["close"])
72-
import viewer_schemas from "@geode/opengeodeweb-viewer/schemas.json"
7368
7469
const props = defineProps({
7570
show_dialog: { type: Boolean, required: true },
71+
offset_top: { type: Number, required: true },
72+
offset_left: { type: Number, required: true },
73+
width: { type: Number, required: false, default: 400 },
7674
})
7775
76+
console.log("props", props)
77+
7878
const output_extensions =
7979
viewer_schemas.opengeodeweb_viewer.take_screenshot.properties
8080
.output_extension.enum
@@ -109,4 +109,28 @@
109109
include_background.value = true
110110
}
111111
})
112+
113+
const top = computed(() => {
114+
console.log("props.offset_top", props.offset_top)
115+
116+
return props.offset_top + "px"
117+
})
118+
const right = computed(() => {
119+
console.log("props.offset_left", props.offset_left)
120+
console.log("props.width", props.width)
121+
122+
return "200px" // Change this value to adjust the position relative to the mdi-camera icon
123+
})
124+
125+
console.log("top", top)
126+
console.log("left", left)
112127
</script>
128+
129+
<style scoped>
130+
.screenshot_menu {
131+
position: absolute;
132+
z-index: 2;
133+
right: v-bind("right");
134+
top: v-bind("top");
135+
}
136+
</style>

‎components/ViewToolbar.vue‎

Lines changed: 52 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -1,26 +1,60 @@
11
<template>
2-
<v-row dense :class="[$style.floatToolbar, 'flex-column']">
3-
<v-col>
4-
<v-btn
5-
density="comfortable"
6-
icon
7-
@click.stop="reset_camera"
8-
v-tooltip:left="'Reset camera'"
9-
>
10-
<v-icon icon="mdi-cube-scan" size="32" />
11-
</v-btn>
12-
</v-col>
13-
</v-row>
2+
<v-container :class="[$style.floatToolbar, 'pa-0']" width="auto">
3+
<v-row
4+
v-for="camera_option in camera_options"
5+
:key="camera_option.icon"
6+
dense
7+
>
8+
<v-col>
9+
<v-btn
10+
density="comfortable"
11+
icon
12+
@click.stop="camera_option.action"
13+
v-tooltip:left="camera_option.tooltip"
14+
>
15+
<v-icon :icon="camera_option.icon" size="32" />
16+
</v-btn>
17+
</v-col>
18+
</v-row>
19+
</v-container>
20+
<Screenshot
21+
:show_dialog="take_screenshot"
22+
:offset_top="offset_top"
23+
:offset_left="offset_left"
24+
@close="take_screenshot = false"
25+
/>
1426
</template>
1527

1628
<script setup>
1729
import schemas from "@geode/opengeodeweb-viewer/schemas.json"
1830
19-
function reset_camera() {
20-
viewer_call({
21-
schema: schemas.opengeodeweb_viewer.reset_camera,
22-
})
23-
}
31+
const offset_top = ref(0)
32+
const offset_left = ref(0)
33+
34+
const take_screenshot = ref(false)
35+
36+
const camera_options = [
37+
{
38+
tooltip: "Reset camera",
39+
icon: "mdi-cube-scan",
40+
action: () => {
41+
viewer_call({
42+
schema: schemas.opengeodeweb_viewer.reset_camera,
43+
})
44+
},
45+
},
46+
{
47+
tooltip: "Take a screenshot",
48+
icon: "mdi-camera",
49+
action: (event) => {
50+
console.log("event", event)
51+
offset_top.value = event.y
52+
offset_left.value = event.x
53+
console.log("offset", offset_top.value, offset_left.value)
54+
take_screenshot.value = !take_screenshot.value
55+
},
56+
},
57+
]
2458
</script>
2559

2660
<style module>
@@ -29,7 +63,6 @@
2963
z-index: 2;
3064
right: 20px;
3165
top: 20px;
32-
background-color: rgba(0, 0, 0, 0.4);
33-
border-radius: 16px;
66+
background-color: rgba(0, 0, 0, 0);
3467
}
3568
</style>

0 commit comments

Comments
 (0)