add jpg and svg formats + remove unusued props

g3w-suite · May 8, 2024 · ec4687b · ec4687b
1 parent 9cfd839
commit ec4687b
Show file tree

Hide file tree

Showing 4 changed files with 56 additions and 50 deletions.
diff --git a/src/app/constant.js b/src/app/constant.js
@@ -228,15 +228,25 @@ export const PRINT_FORMATS = [
     value: 'png',
     label: 'PNG'
   },
+  /** @since 3.10.0 */
+  {
+    value: 'jpg',
+    label: 'JPG'
+  },
+  /** @since 3.10.0 */
+  {
+    value: 'svg',
+    label: 'SVG'
+  },
   {
     value: 'pdf',
     label: 'PDF'
   },
-  //@since 3.10.0
+  /** @since 3.10.0 */
   {
     value: 'geopdf',
     label: 'GEOPDF'
-  }
+  },
 ];
 
 /**

diff --git a/src/components/Print.vue b/src/components/Print.vue
@@ -11,10 +11,10 @@
         <div class="box-body">
 
           <transition :duration="500" name="fade">
-            <bar-loader :loading="state.loading"/>
+            <bar-loader :loading="state.loading" />
           </transition>
 
-          <helpdiv message='sdk.print.help'/>
+          <helpdiv message='sdk.print.help' />
 
           <!-- PRINT TEMPLATE -->
           <label for="templates" v-t="'sdk.print.template'"></label>
@@ -39,11 +39,7 @@
               v-select2  = "'state.scale'"
               @change    = "changeScale"
             >
-              <option
-                v-for="scale in state.scales"
-                :value="scale.value">
-                {{ scale.label }}
-              </option>
+              <option v-for="scale in state.scales" :value="scale.value">{{ scale.label }}</option>
             </select>
 
             <!-- PRINT DPI -->
@@ -56,6 +52,7 @@
             >
               <option v-for="dpi in state.dpis">{{ dpi }}</option>
             </select>
+
             <!-- PRINT ROTATION -->
             <label for="rotation" v-t="'sdk.print.rotation'"></label>
             <input
@@ -76,11 +73,7 @@
               class     = "form-control"
               v-select2 = "'state.format'"
             >
-              <option
-                v-for  = "format in state.formats"
-                :value = "format.value">
-                  {{ format.label }}
-              </option>
+              <option v-for="format in state.formats" :value="format.value">{{ format.label }}</option>
             </select>
 
           </template>
@@ -111,7 +104,6 @@
           <div
             v-if  = "state.labels && state.labels.length > 0"
             class = "print-labels-content"
-            style = "color: white"
           >
             <span
               class = "skin-color"
@@ -195,7 +187,6 @@ export default {
       disabled: false,
       /** @since 3.10.0 */
       atlas_values:   [],
-      format_options: null,
     };
   },
 
@@ -341,8 +332,10 @@ export default {
         // disable sidebar
         GUI.disableSideBar(true);
 
-        //In case of already print page open, need to close it otherwise is appended on a dom element
-        if (this._page) { await promisify(GUI.closeContent()); }
+        // close print page if already open
+        if (this._page) {
+          await promisify(GUI.closeContent());
+        }
 
         // ATLAS PRINT
         if (has_atlas) {
@@ -366,7 +359,7 @@ export default {
 
           this._page = new Component({ service: { state: this.state }, vueComponentObject: vueComp });
 
-          //show print page with loading state
+          // show print page with loading state
           GUI.setContent({
             content: this._page,
             title:   'print',
@@ -380,7 +373,6 @@ export default {
               template:             this.state.template,
               scale:                this.state.scale,
               format:               this.state.format,
-              format_options:       null,
               labels:               this.state.labels,
               is_maps_preset_theme: this.state.maps.some(m => undefined !== m.preset_theme),
               maps:                 this.state.maps.map(m => ({
@@ -694,6 +686,7 @@ export default {
 <style scoped>
 .print-labels-content {
   margin-top: 5px;
+  color: white;
 }
 .print-labels-content > span.skin-color {
   font-weight: bold;

diff --git a/src/components/PrintPage.vue b/src/components/PrintPage.vue
@@ -6,20 +6,21 @@
 <template>
   <div id="print-output">
     <transition :duration="500" name="fade">
-      <bar-loader :loading="state.loading && state.layers"/>
+      <bar-loader :loading="state.loading && state.layers" />
     </transition>
 
     <template v-if="state.layers">
-        <!-- PRINT as PDF or GEOPDF-->
-        <iframe
-          v-if  = "['pdf', 'geopdf'].includes(format)"
-          ref   = "out"
-          :src = "state.url"
-        ></iframe>
+
+      <!-- PRINT as PDF or GEOPDF-->
+      <iframe
+        v-if  = "['pdf', 'geopdf'].includes(format)"
+        ref   = "out"
+        :src = "state.url"
+      ></iframe>
 
       <!-- PRINT as PNG -->
       <div
-        v-else-if = "'png' === format"
+        v-else
         class     = "g3w-print-png-output"
       >
         <div id="g3w-print-header">
@@ -50,11 +51,13 @@
       </div>
 
     </template>
+
     <!---NO PRINT LAYERS-->
     <h4
       v-else
       v-t="'sdk.print.no_layers'">
     </h4>
+
   </div>
 </template>
 
@@ -69,11 +72,11 @@ export default {
   name: 'print-page',
 
   data() {
+    const state = this.$options.service.state || {};
     return {
-      state:  this.$options.service.state || {},
-      //need to convert a format not responsive from service
-      //otherwise it reacts on change state.format from Print.vue,
-      format: this.$options.service.state && this.$options.service.state.format,
+      state,
+      // extract `state.format` so it doesnt' react to Print.vue changes
+      format: state.format,
     }
   },
 
@@ -83,8 +86,8 @@ export default {
       try {
         GUI.disableSideBar(true);
         this.state.downloading = true;
-        if (['jpg', 'png'].includes(this.state.format)) {
-          await imageToDataURL({ src: this.state.url, type: `image/${this.state.format}` });
+        if (['jpg', 'png'].includes(this.format)) {
+          await imageToDataURL({ src: this.state.url, type: `image/${this.format}` });
           setTimeout(() => {
             GUI.disableSideBar(false);
             this.state.downloading = false;

diff --git a/src/utils/print.js b/src/utils/print.js
@@ -92,12 +92,16 @@ export function print(opts = {}, method = 'GET') {
    return Promise.resolve({layers: false})
  }
 
+  // force GET request for geopdf because qgiserver support only that method [QGIS 3.34.6-Prizren 'Prizren' (623828f58c2)]
+ if ('geopdf' === opts.format) {
+  method = 'GET';
+ }
+
  const LAYERS = layers.map(l => l.getPrintLayerName()).join();
- // Need to use GET method becase geopdf format request to qgiserver (QGIS 3.34.6-Prizren 'Prizren' (623828f58c2)
- // support only this method
- return FETCH['geopdf' === opts.format ? 'GET' : method]({
+
+ return FETCH[method]({
    url: store.getWmsUrl(),
-   mime_type: ({ pdf: 'application/pdf', jpg: 'image/jpeg' })[opts.format],
+   mime_type: ({ pdf: 'application/pdf', jpg: 'image/jpeg', svg: 'image/svg' })[opts.format] || opts.format,
    params: {
      SERVICE:       'WMS',
      VERSION:       '1.3.0',
@@ -106,21 +110,17 @@ export function print(opts = {}, method = 'GET') {
      DPI:            opts.dpi,
      STYLES:         layers.map(l => l.getStyle()).join(','),
      LAYERS:         opts.is_maps_preset_theme ? undefined : LAYERS,
-     FORMAT:         ({png: 'png', pdf: 'application/pdf', geopdf: 'application/pdf'})[opts.format],
+     FORMAT:         ({ png: 'png', pdf: 'application/pdf', geopdf: 'application/pdf' })[opts.format] || opts.format,
      FORMAT_OPTIONS: 'geopdf' === opts.format ? 'WRITE_GEO_PDF:TRUE': undefined, //@since 3.10.0
      CRS:            store.getProjection().getCode(),
      filtertoken:    ApplicationState.tokens.filtertoken,
-     ...(opts.maps || []).reduce((params, map) => {
-       params[map.name + ':SCALE']    = map.scale;
-       params[map.name + ':EXTENT']   = map.extent;
-       params[map.name + ':ROTATION'] = opts.rotation;
-       params[map.name + ':LAYERS']   = opts.is_maps_preset_theme && undefined === map.preset_theme ? LAYERS : undefined;
-       return params;
-     }, {}),
-     ...(opts.labels || []).reduce((params, label) => {
-       params[label.id] = label.text;
-       return params;
-     }, {})
+     ...(opts.maps || []).reduce((params, map) => Object.assign(params, {
+        [map.name + ':SCALE']:    map.scale,
+        [map.name + ':EXTENT']:   map.extent,
+        [map.name + ':ROTATION']: opts.rotation,
+        [map.name + ':LAYERS']:   opts.is_maps_preset_theme && undefined === map.preset_theme ? LAYERS : undefined,
+      }), {}),
+     ...(opts.labels || []).reduce((params, label) => Object.assign(params, { [label.id]: label.text }), {})
    },
  });
 }