| 
 | 1 | +<template>  | 
 | 2 | +  <v-sheet  | 
 | 3 | +    v-if="props.show_dialog"  | 
 | 4 | +    :width="props.width + 'px'"  | 
 | 5 | +    class="screenshot_menu"  | 
 | 6 | +    border="md"  | 
 | 7 | +  >  | 
 | 8 | +    <v-card class="bg-primary 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>  | 
 | 27 | + | 
 | 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 | +          >Close</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>  | 
 | 61 | +</template>  | 
 | 62 | + | 
 | 63 | +<script setup>  | 
 | 64 | +  import fileDownload from "js-file-download"  | 
 | 65 | +  import viewer_schemas from "@geode/opengeodeweb-viewer/schemas.json"  | 
 | 66 | +
  | 
 | 67 | +  const emit = defineEmits(["close"])  | 
 | 68 | +
  | 
 | 69 | +  const props = defineProps({  | 
 | 70 | +    show_dialog: { type: Boolean, required: true },  | 
 | 71 | +    width: { type: Number, required: false, default: 400 },  | 
 | 72 | +  })  | 
 | 73 | +
  | 
 | 74 | +  const output_extensions =  | 
 | 75 | +    viewer_schemas.opengeodeweb_viewer.take_screenshot.properties  | 
 | 76 | +      .output_extension.enum  | 
 | 77 | +  const filename = ref("")  | 
 | 78 | +  const output_extension = ref("png")  | 
 | 79 | +  const include_background = ref(true)  | 
 | 80 | +
  | 
 | 81 | +  async function takeScreenshot() {  | 
 | 82 | +    await viewer_call(  | 
 | 83 | +      {  | 
 | 84 | +        schema: viewer_schemas.opengeodeweb_viewer.take_screenshot,  | 
 | 85 | +        params: {  | 
 | 86 | +          filename: filename.value,  | 
 | 87 | +          output_extension: output_extension.value,  | 
 | 88 | +          include_background: include_background.value,  | 
 | 89 | +        },  | 
 | 90 | +      },  | 
 | 91 | +      {  | 
 | 92 | +        response_function: async (response) => {  | 
 | 93 | +          fileDownload(  | 
 | 94 | +            response.blob,  | 
 | 95 | +            filename.value + "." + output_extension.value,  | 
 | 96 | +          )  | 
 | 97 | +        },  | 
 | 98 | +      },  | 
 | 99 | +    )  | 
 | 100 | +    emit("close")  | 
 | 101 | +  }  | 
 | 102 | +
  | 
 | 103 | +  watch(output_extension, (value) => {  | 
 | 104 | +    if (value !== "png") {  | 
 | 105 | +      include_background.value = true  | 
 | 106 | +    }  | 
 | 107 | +  })  | 
 | 108 | +</script>  | 
 | 109 | + | 
 | 110 | +<style scoped>  | 
 | 111 | +  .screenshot_menu {  | 
 | 112 | +    position: absolute;  | 
 | 113 | +    z-index: 2;  | 
 | 114 | +    top: 90px;  | 
 | 115 | +    right: 55px;  | 
 | 116 | +  }  | 
 | 117 | +</style>  | 
0 commit comments