@kq_npm/client3d_webgl_vue 4.4.3 → 4.4.4

package/scenetohdimage/index.js

@@ -26,7 +26,6 @@ return /******/ (function() { // webpackBootstrap
  **/
 class SceneToHDImageViewModel {
   // 输出图片区域
-  // 缩放比
   constructor(viewer, options) {
     (0,_Users_zpc_Documents_KQGEOSpace_KQGISClientForVue_node_modules_babel_runtime_helpers_esm_defineProperty_js__WEBPACK_IMPORTED_MODULE_0__/* ["default"] */ .Z)(this, "_viewer", null);
 
@@ -36,42 +35,40 @@ class SceneToHDImageViewModel {
 
     (0,_Users_zpc_Documents_KQGEOSpace_KQGISClientForVue_node_modules_babel_runtime_helpers_esm_defineProperty_js__WEBPACK_IMPORTED_MODULE_0__/* ["default"] */ .Z)(this, "_exportPictureRegion", null);
 
-    (0,_Users_zpc_Documents_KQGEOSpace_KQGISClientForVue_node_modules_babel_runtime_helpers_esm_defineProperty_js__WEBPACK_IMPORTED_MODULE_0__/* ["default"] */ .Z)(this, "_pantographRatio", null);
-
     this._viewer = viewer;
     this._options = options;
-    this._viewer.enabledFXAA = true; // this._exportPictureRegion = document.createElement("div");
-    // this._exportPictureRegion.class = "export-picture-region";
-    // this._exportPictureRegion.id = "exportPictureRegion";
-    // this._tbSlider = document.createElement("div");
-    // this._tbSlider.class = "shutter-slider";
-    // this._tbSlider.id = "tbSlider";
-    // this._viewer.container.appendChild(this._lrSlider);
-    // this._viewer.container.appendChild(this._tbSlider);
-
-    console.log(this._viewer._container.id); //声明场景出图类
+    this._viewer.enabledFXAA = true;
+    this._exportPictureRegion = document.createElement("div");
+    this._exportPictureRegion.class = "export-picture-region";
+    this._exportPictureRegion.id = "exportPictureRegion";
+    document.getElementById(this._viewer._container.id).parentNode.insertBefore(this._exportPictureRegion, null);
+    document.getElementById(this._viewer._container.id).classList.add('scene-to-hd-image-viewer'); //声明场景出图类
 
     this._canvasToImage = new Cesium.Kq3dCanvasToImage(this._viewer._container.id, {
       viewer: this._viewer,
       canvas: this._viewer.scene.canvas
     });
+    this.resizeExportRegionSize();
   }
 
-  resizeExportRegionSize() {} // 出图
+  resizeExportRegionSize() {
+    document.getElementById('exportPictureRegion').style.width = Number(this._options.imgWidth) * Number(this._options.pantographRatio) + 'px';
+    document.getElementById('exportPictureRegion').style.height = Number(this._options.imgHeight) * Number(this._options.pantographRatio) + 'px';
+  } // 出图
 
 
   sceneToImages() {
-    var width = Number(this._options.width),
-        height = Number(this._options.height),
-        resolutionWidth = Number(this._options.resolutionWidth),
-        resolutionHeight = Number(this._options.resolutionHeight); //设置宽、高、图片类型
+    var width = Number(this._options.imgWidth),
+        height = Number(this._options.imgHeight),
+        resolutionWidth = Number(this._options.screenWidth),
+        resolutionHeight = Number(this._options.screenHeight); //设置宽、高、图片类型
 
     var options = {
       width: width,
       //图片宽度
       height: height,
       //图片高度
-      type: this._options.type //图片类型
+      type: this._options.imgFormat //图片类型
 
     };
 
@@ -80,8 +77,6 @@ class SceneToHDImageViewModel {
     } else {
       this._viewer.render();
 
-      var ctx = this._viewer.scene.canvas.getContext("2d");
-
       var startX = (resolutionWidth - width) / 2,
           startY = (resolutionHeight - height) / 2;
       var canvas = document.createElement('canvas');
@@ -95,38 +90,35 @@ class SceneToHDImageViewModel {
   }
 
   scaleCesiumContainer() {
-    var bWidth = $('body').width(),
-        bHeight = $('body').height();
-    var width = Number(this._options.resolutionWidth),
-        height = Number(this._options.resolutionHeight);
-    var wRatio = bWidth / width,
-        hRatio = bHeight / height; // if (wRatio < 1 || hRatio < 1) {
-
-    var scale = Math.min(wRatio, hRatio);
-    $('#cesiumContainer').css('width', width + 'px').css('height', height + 'px').css('transform', `translate(-50%,-50%) scale(${scale > 1 ? 1 : scale})`);
-    this._options.scale = scale > 1 ? 1 : scale;
-  } //将值转换成4的倍数
-
-
-  convertValueTo4Times(value) {
-    if (Math.abs(value % 4) > 0.000001) {
-      if (Math.abs(value % 4) > 1.5) {
-        value = 4 * (parseInt(value / 4) + 1);
-      } else {
-        value = 4 * parseInt(value / 4);
-      }
-    }
-
-    return value || 4;
-  } // 参数切换
-
+    // var bWidth = document.getElementById(this._viewer._container.id).parentNode.clientWidth,
+    //   bHeight = document.getElementById(this._viewer._container.id).parentNode.clientHeight;
+    // var width = Number(this._options.screenWidth),
+    //   height = Number(this._options.screenHeight);
+    // var wRatio = bWidth / width,
+    //   hRatio = bHeight / height;
+    // var scale = Math.min(wRatio, hRatio);
+    document.getElementById(this._viewer._container.id).style.width = Number(this._options.screenWidth) + 'px';
+    document.getElementById(this._viewer._container.id).style.height = Number(this._options.screenHeight) + 'px'; // document.getElementById(this._viewer._container.id).style.transform = `translate(-50%,-50%) scale(${scale > 1 ? 1 : scale})`;
+    // this._options.pantographRatio = scale > 1 ? 1 : scale;
+    // if (call) call(this._options.pantographRatio)
+  } // 切换显示区域
+
+
+  changeDisplayArea() {
+    document.getElementById('exportPictureRegion').style.display = this._options.displayArea ? 'block' : 'none';
+  }
 
-  paramsChanged(key, val) {
-    this._options[key] = val;
+  changPantographRatio() {
+    this._viewer.container.style.transform = `translate(-50%,-50%) scale(${this._options.pantographRatio})`;
+    this.resizeExportRegionSize();
   } // 销毁
 
 
-  destroy() {}
+  destroy() {
+    document.getElementById(this._viewer._container.id).classList.remove('scene-to-hd-image-viewer');
+    document.getElementById(this._viewer._container.id).removeAttribute('style');
+    document.getElementById('exportPictureRegion').remove();
+  }
 
 }
 
@@ -360,36 +352,30 @@ const __default__ = {
     let collapseValue = (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.ref)("screenParameter"); // 获取组件传参
     // 分析类
 
-    let viewModel = null; // 参数
+    let viewModel = {}; // 参数
 
     let formItem = (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.reactive)({
-      screenWidth: props.settingParams && props.settingParams.screenWidth || 100,
+      screenWidth: 100,
       // 屏幕宽度
-      minScreenWidth: props.settingParams && props.settingParams.minScreenWidth || 0,
+      minScreenWidth: 0,
       // 屏幕宽度最小值
-      maxScreenWidth: props.settingParams && props.settingParams.maxScreenWidth || 1920,
+      maxScreenWidth: 1920,
       // 屏幕宽度最大值
-      screenHeight: props.settingParams && props.settingParams.screenHeight || 100,
+      screenHeight: 100,
       // 屏幕宽度
-      minScreenHeight: props.settingParams && props.settingParams.minScreenHeight || 0,
+      minScreenHeight: 0,
       // 屏幕宽度最小值
-      maxScreenHeight: props.settingParams && props.settingParams.maxScreenHeight || 900,
+      maxScreenHeight: 900,
       // 屏幕宽度最大值
       displayArea: props.settingParams && props.settingParams.displayArea || true,
       // 是否显示区域
-      imgWidth: props.settingParams && props.settingParams.imgWidth || 100,
+      imgWidth: 100,
       // 图片宽度
-      minImgWidth: props.settingParams && props.settingParams.minImgWidth || 0,
-      // 图片宽度最小值
-      maxImgWidth: props.settingParams && props.settingParams.maxImgWidth || 1920,
-      // 图片宽度最大值
-      imgHeight: props.settingParams && props.settingParams.imgHeight || 100,
+      imgHeight: 100,
       // 图片高度
-      minImgHeight: props.settingParams && props.settingParams.minImgHeight || 0,
-      // 图片高度最小值
-      maxImgHeight: props.settingParams && props.settingParams.maxImgHeight || 900,
-      // 图片高度最大值
-      imgFormat: props.settingParams && props.settingParams.imgFormat || "jpg" // 图片类型
+      imgFormat: props.settingParams && props.settingParams.imgFormat || "jpg",
+      // 图片类型
+      pantographRatio: 1 // 缩放比
 
     }); // 组件容器Ref
 
@@ -420,6 +406,8 @@ const __default__ = {
 
       gis_utils_.utils.getWebMap(null, scenceView => {
         if (scenceView) {
+          // 初始化视图参数
+          intViewModelParams(scenceView._viewer._container.id);
           viewModel = new SceneToHDImageViewModel/* default */.Z(scenceView._viewer, formItem);
         }
       });
@@ -442,7 +430,44 @@ const __default__ = {
 
 
     function paramsChanged(key) {
-      viewModel && viewModel.paramsChanged(key, formItem[key]);
+      if (!viewModel || !viewModel._options) return;
+      viewModel._options[key] = formItem[key];
+
+      switch (key) {
+        case "displayArea":
+          viewModel.changeDisplayArea();
+          break;
+
+        case "screenWidth":
+        case "screenHeight":
+          viewModel.scaleCesiumContainer();
+          break;
+
+        case "imgWidth":
+        case "imgHeight":
+          viewModel.resizeExportRegionSize();
+          break;
+
+        case "pantographRatio":
+          viewModel.changPantographRatio();
+          break;
+
+        default:
+          break;
+      }
+    }
+
+    function intViewModelParams(id) {
+      var bodyW = 1920,
+          bodyH = 1024;
+      bodyW = document.getElementById(id).clientWidth;
+      bodyH = document.getElementById(id).clientHeight;
+      formItem.screenWidth = bodyW;
+      formItem.screenHeight = bodyH;
+      formItem.maxScreenWidth = bodyW;
+      formItem.maxScreenHeight = bodyH;
+      formItem.imgWidth = parseInt(bodyW / 5 * 4);
+      formItem.imgHeight = parseInt(bodyH / 5 * 4);
     } // 销毁
 
 
@@ -516,7 +541,7 @@ const __default__ = {
                       "onUpdate:modelValue": _cache[0] || (_cache[0] = $event => (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.unref)(formItem).screenWidth = $event),
                       step: 1,
                       min: (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.unref)(formItem).minScreenWidth,
-                      max: (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.unref)(formItem).maxScreenHeight,
+                      max: (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.unref)(formItem).maxScreenWidth,
                       onInput: _cache[1] || (_cache[1] = $event => paramsChanged('screenWidth'))
                     }, null, 8
                     /* PROPS */
@@ -534,7 +559,8 @@ const __default__ = {
                       max: (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.unref)(formItem).maxScreenWidth,
                       step: 1,
                       "controls-position": "right",
-                      onInput: _cache[3] || (_cache[3] = $event => paramsChanged('screenWidth'))
+                      onBlur: _cache[3] || (_cache[3] = $event => paramsChanged('screenWidth', 'a')),
+                      onInput: _cache[4] || (_cache[4] = $event => paramsChanged('screenWidth', 'b'))
                     }, null, 8
                     /* PROPS */
                     , ["modelValue", "min", "max"])]),
@@ -569,11 +595,11 @@ const __default__ = {
                   }, {
                     default: (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.withCtx)(() => [(0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.createVNode)(_component_kq_slider, {
                       modelValue: (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.unref)(formItem).screenHeight,
-                      "onUpdate:modelValue": _cache[4] || (_cache[4] = $event => (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.unref)(formItem).screenHeight = $event),
+                      "onUpdate:modelValue": _cache[5] || (_cache[5] = $event => (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.unref)(formItem).screenHeight = $event),
                       step: 1,
                       min: (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.unref)(formItem).minScreenHeight,
                       max: (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.unref)(formItem).maxScreenHeight,
-                      onInput: _cache[5] || (_cache[5] = $event => paramsChanged('screenHeight'))
+                      onInput: _cache[6] || (_cache[6] = $event => paramsChanged('screenHeight'))
                     }, null, 8
                     /* PROPS */
                     , ["modelValue", "min", "max"])]),
@@ -585,12 +611,12 @@ const __default__ = {
                   }, {
                     default: (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.withCtx)(() => [(0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.createVNode)(_component_kq_input_number, {
                       modelValue: (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.unref)(formItem).screenHeight,
-                      "onUpdate:modelValue": _cache[6] || (_cache[6] = $event => (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.unref)(formItem).screenHeight = $event),
+                      "onUpdate:modelValue": _cache[7] || (_cache[7] = $event => (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.unref)(formItem).screenHeight = $event),
                       min: (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.unref)(formItem).minScreenHeight,
                       max: (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.unref)(formItem).maxScreenHeight,
                       step: 1,
                       "controls-position": "right",
-                      onInput: _cache[7] || (_cache[7] = $event => paramsChanged('screenHeight'))
+                      onInput: _cache[8] || (_cache[8] = $event => paramsChanged('screenHeight'))
                     }, null, 8
                     /* PROPS */
                     , ["modelValue", "min", "max"])]),
@@ -611,6 +637,62 @@ const __default__ = {
               _: 1
               /* STABLE */
 
+            }), (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.createVNode)(_component_kq_row, null, {
+              default: (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.withCtx)(() => [(0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.createVNode)(_component_kq_form_item, {
+                label: (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.unref)(language).pantographRatio
+              }, {
+                default: (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.withCtx)(() => [(0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.createVNode)(_component_kq_row, {
+                  style: {
+                    "display": "flex"
+                  }
+                }, {
+                  default: (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.withCtx)(() => [(0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.createVNode)(_component_kq_col, {
+                    span: 16
+                  }, {
+                    default: (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.withCtx)(() => [(0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.createVNode)(_component_kq_slider, {
+                      modelValue: (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.unref)(formItem).pantographRatio,
+                      "onUpdate:modelValue": _cache[9] || (_cache[9] = $event => (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.unref)(formItem).pantographRatio = $event),
+                      step: 0.01,
+                      min: 0.01,
+                      max: 1,
+                      onInput: _cache[10] || (_cache[10] = $event => paramsChanged('pantographRatio'))
+                    }, null, 8
+                    /* PROPS */
+                    , ["modelValue", "step", "min"])]),
+                    _: 1
+                    /* STABLE */
+
+                  }), (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.createVNode)(_component_kq_col, {
+                    span: 8
+                  }, {
+                    default: (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.withCtx)(() => [(0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.createVNode)(_component_kq_input_number, {
+                      modelValue: (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.unref)(formItem).pantographRatio,
+                      "onUpdate:modelValue": _cache[11] || (_cache[11] = $event => (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.unref)(formItem).pantographRatio = $event),
+                      step: 0.01,
+                      min: 0.01,
+                      max: 1,
+                      "controls-position": "right",
+                      onInput: _cache[12] || (_cache[12] = $event => paramsChanged('pantographRatio'))
+                    }, null, 8
+                    /* PROPS */
+                    , ["modelValue", "step", "min"])]),
+                    _: 1
+                    /* STABLE */
+
+                  })]),
+                  _: 1
+                  /* STABLE */
+
+                })]),
+                _: 1
+                /* STABLE */
+
+              }, 8
+              /* PROPS */
+              , ["label"])]),
+              _: 1
+              /* STABLE */
+
             }), (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.createVNode)(_component_kq_row, null, {
               default: (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.withCtx)(() => [(0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.createVNode)(_component_kq_form_item, {
                 label: (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.unref)(language).displayArea
@@ -626,9 +708,9 @@ const __default__ = {
                   }, {
                     default: (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.withCtx)(() => [(0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.createVNode)(_component_kq_switch, {
                       modelValue: (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.unref)(formItem).displayArea,
-                      "onUpdate:modelValue": _cache[8] || (_cache[8] = $event => (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.unref)(formItem).displayArea = $event),
+                      "onUpdate:modelValue": _cache[13] || (_cache[13] = $event => (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.unref)(formItem).displayArea = $event),
                       "controls-position": "left",
-                      onChange: _cache[9] || (_cache[9] = $event => paramsChanged('displayArea'))
+                      onChange: _cache[14] || (_cache[14] = $event => paramsChanged('displayArea'))
                     }, null, 8
                     /* PROPS */
                     , ["modelValue"])]),
@@ -679,8 +761,8 @@ const __default__ = {
                 }, {
                   default: (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.withCtx)(() => [(0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.createVNode)(_component_kq_select, {
                     modelValue: (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.unref)(formItem).imgFormat,
-                    "onUpdate:modelValue": _cache[10] || (_cache[10] = $event => (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.unref)(formItem).imgFormat = $event),
-                    onChange: _cache[11] || (_cache[11] = $event => paramsChanged('imgFormat')),
+                    "onUpdate:modelValue": _cache[15] || (_cache[15] = $event => (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.unref)(formItem).imgFormat = $event),
+                    onChange: _cache[16] || (_cache[16] = $event => paramsChanged('imgFormat')),
                     style: {
                       "width": "100%"
                     }
@@ -731,11 +813,11 @@ const __default__ = {
                   }, {
                     default: (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.withCtx)(() => [(0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.createVNode)(_component_kq_slider, {
                       modelValue: (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.unref)(formItem).imgWidth,
-                      "onUpdate:modelValue": _cache[12] || (_cache[12] = $event => (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.unref)(formItem).imgWidth = $event),
+                      "onUpdate:modelValue": _cache[17] || (_cache[17] = $event => (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.unref)(formItem).imgWidth = $event),
                       step: 1,
                       min: (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.unref)(formItem).minImgWidth,
-                      max: (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.unref)(formItem).maxImgWidth,
-                      onInput: _cache[13] || (_cache[13] = $event => paramsChanged('imgWidth'))
+                      max: (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.unref)(formItem).screenWidth,
+                      onInput: _cache[18] || (_cache[18] = $event => paramsChanged('imgWidth'))
                     }, null, 8
                     /* PROPS */
                     , ["modelValue", "min", "max"])]),
@@ -747,12 +829,12 @@ const __default__ = {
                   }, {
                     default: (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.withCtx)(() => [(0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.createVNode)(_component_kq_input_number, {
                       modelValue: (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.unref)(formItem).imgWidth,
-                      "onUpdate:modelValue": _cache[14] || (_cache[14] = $event => (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.unref)(formItem).imgWidth = $event),
+                      "onUpdate:modelValue": _cache[19] || (_cache[19] = $event => (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.unref)(formItem).imgWidth = $event),
                       min: (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.unref)(formItem).minImgWidth,
-                      max: (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.unref)(formItem).maxImgWidth,
+                      max: (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.unref)(formItem).screenWidth,
                       step: 1,
                       "controls-position": "right",
-                      onInput: _cache[15] || (_cache[15] = $event => paramsChanged('imgWidth'))
+                      onInput: _cache[20] || (_cache[20] = $event => paramsChanged('imgWidth'))
                     }, null, 8
                     /* PROPS */
                     , ["modelValue", "min", "max"])]),
@@ -787,11 +869,11 @@ const __default__ = {
                   }, {
                     default: (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.withCtx)(() => [(0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.createVNode)(_component_kq_slider, {
                       modelValue: (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.unref)(formItem).imgHeight,
-                      "onUpdate:modelValue": _cache[16] || (_cache[16] = $event => (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.unref)(formItem).imgHeight = $event),
+                      "onUpdate:modelValue": _cache[21] || (_cache[21] = $event => (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.unref)(formItem).imgHeight = $event),
                       step: 1,
                       min: (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.unref)(formItem).minImgHeight,
-                      max: (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.unref)(formItem).maxImgHeight,
-                      onInput: _cache[17] || (_cache[17] = $event => paramsChanged('imgHeight'))
+                      max: (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.unref)(formItem).screenHeight,
+                      onInput: _cache[22] || (_cache[22] = $event => paramsChanged('imgHeight'))
                     }, null, 8
                     /* PROPS */
                     , ["modelValue", "min", "max"])]),
@@ -803,12 +885,12 @@ const __default__ = {
                   }, {
                     default: (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.withCtx)(() => [(0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.createVNode)(_component_kq_input_number, {
                       modelValue: (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.unref)(formItem).imgHeight,
-                      "onUpdate:modelValue": _cache[18] || (_cache[18] = $event => (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.unref)(formItem).imgHeight = $event),
+                      "onUpdate:modelValue": _cache[23] || (_cache[23] = $event => (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.unref)(formItem).imgHeight = $event),
                       min: (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.unref)(formItem).minImgHeight,
-                      max: (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.unref)(formItem).maxImgHeight,
+                      max: (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.unref)(formItem).screenHeight,
                       step: 1,
                       "controls-position": "right",
-                      onInput: _cache[19] || (_cache[19] = $event => paramsChanged('imgHeight'))
+                      onInput: _cache[24] || (_cache[24] = $event => paramsChanged('imgHeight'))
                     }, null, 8
                     /* PROPS */
                     , ["modelValue", "min", "max"])]),
@@ -846,7 +928,7 @@ const __default__ = {
       }, 8
       /* PROPS */
       , ["model-value"]), (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.createElementVNode)("div", _hoisted_2, [(0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.createVNode)(_component_kq_button, {
-        onClick: _cache[20] || (_cache[20] = (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.withModifiers)($event => toHDImageHander(), ["stop"])),
+        onClick: _cache[25] || (_cache[25] = (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.withModifiers)($event => toHDImageHander(), ["stop"])),
         title: (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.unref)(language).sceneToHDImageTips,
         type: "primary"
       }, {

package/scenetohdimage/style/scenetohdimage.css

@@ -1 +1 @@
-.kq3d-scene-to-hd-image{z-index:999;border-radius:var(--kq-border-radius-base);padding:16px;pointer-events:auto;cursor:default;background-color:var(--kq-bg-color)}.kq3d-scene-to-hd-image .kq3d-scene-to-hd-image-box{width:360px}.kq3d-scene-to-hd-image .kq3d-scene-to-hd-image-collapse-item{margin-top:16px}.kq3d-scene-to-hd-image .kq3d-scene-to-hd-image-tip{color:var(--kq-text-color-regular);font-size:var(--kq-font-size-base)}.kq3d-scene-to-hd-image .kq3d-scene-to-hd-image-tip p{margin-top:0;margin-bottom:16px}.kq3d-scene-to-hd-image .kq3d-scene-to-hd-image-span{margin:0 20px}.kq3d-scene-to-hd-image .kq-select{width:100%}.kq3d-scene-to-hd-image .kq-collapse{border:unset}.kq3d-scene-to-hd-image .kq-collapse .kq-collapse-item__header{border:unset;height:38px;background-color:var(--kq-fill-color-light);font-weight:700;padding:0 16px;font-size:16px}.kq3d-scene-to-hd-image .kq-collapse .kq-collapse-item__arrow{margin:0 0 0 auto}.kq3d-scene-to-hd-image .kq-collapse .kq-collapse-item__wrap .kq-collapse-item__content{padding-bottom:unset;border:unset;padding-top:10px}.kq3d-scene-to-hd-image .kq-form-item{margin-bottom:8px}.kq3d-scene-to-hd-image .kq-form-item__content{text-align:end;display:block}.kq3d-scene-to-hd-image .kq-row{display:block}.kq3d-scene-to-hd-image .kq-slider{width:95%;padding-left:7px}.kq3d-scene-to-hd-image .kq-slider .kq-slider__button{width:14px;height:14px}.kq3d-scene-to-hd-image .kq-input-number.is-controls-right{width:65px}.kq3d-scene-to-hd-image .kq-input-number.is-controls-right .kq-input-number__decrease,.kq3d-scene-to-hd-image .kq-input-number.is-controls-right .kq-input-number__increase{width:20px}.kq3d-scene-to-hd-image .kq-col-8 .kq-input-number .kq-input__wrapper,.kq3d-scene-to-hd-image .kq-input-number.is-controls-right .kq-input__wrapper{padding-left:0;padding-right:20px}.kq3d-scene-to-hd-image .kq-color-picker,.kq3d-scene-to-hd-image .kq-color-picker .kq-color-picker__mask,.kq3d-scene-to-hd-image .kq-color-picker .kq-color-picker__trigger{width:100%}.kq3d-scene-to-hd-image .kq3d-scene-to-hd-image-line{width:80%;margin:14px 8px;height:2px;overflow:hidden;background:#c0c4cc;border-radius:4px}.kq3d-scene-to-hd-image .kq3d-scene-to-hd-image-legend{height:24px}.kq3d-scene-to-hd-image .kq3d-scene-to-hd-image-footer{text-align:right;padding:16px 0 0}
+.kq3d-scene-to-hd-image{z-index:999;border-radius:var(--kq-border-radius-base);padding:16px;pointer-events:auto;cursor:default;background-color:var(--kq-bg-color)}.kq3d-scene-to-hd-image .kq3d-scene-to-hd-image-box{width:360px}.kq3d-scene-to-hd-image .kq3d-scene-to-hd-image-collapse-item{margin-top:16px}.kq3d-scene-to-hd-image .kq3d-scene-to-hd-image-tip{color:var(--kq-text-color-regular);font-size:var(--kq-font-size-base)}.kq3d-scene-to-hd-image .kq3d-scene-to-hd-image-tip p{margin-top:0;margin-bottom:16px}.kq3d-scene-to-hd-image .kq3d-scene-to-hd-image-span{margin:0 20px}.kq3d-scene-to-hd-image .kq-select{width:100%}.kq3d-scene-to-hd-image .kq-collapse{border:unset}.kq3d-scene-to-hd-image .kq-collapse .kq-collapse-item__header{border:unset;height:38px;background-color:var(--kq-fill-color-light);font-weight:700;padding:0 16px;font-size:16px}.kq3d-scene-to-hd-image .kq-collapse .kq-collapse-item__arrow{margin:0 0 0 auto}.kq3d-scene-to-hd-image .kq-collapse .kq-collapse-item__wrap .kq-collapse-item__content{padding-bottom:unset;border:unset;padding-top:10px}.kq3d-scene-to-hd-image .kq-form-item{margin-bottom:8px}.kq3d-scene-to-hd-image .kq-form-item__content{text-align:end;display:block}.kq3d-scene-to-hd-image .kq-row{display:block}.kq3d-scene-to-hd-image .kq-slider{width:95%;padding-left:7px}.kq3d-scene-to-hd-image .kq-slider .kq-slider__button{width:14px;height:14px}.kq3d-scene-to-hd-image .kq-input-number.is-controls-right{width:65px}.kq3d-scene-to-hd-image .kq-input-number.is-controls-right .kq-input-number__decrease,.kq3d-scene-to-hd-image .kq-input-number.is-controls-right .kq-input-number__increase{width:20px}.kq3d-scene-to-hd-image .kq-col-8 .kq-input-number .kq-input__wrapper,.kq3d-scene-to-hd-image .kq-input-number.is-controls-right .kq-input__wrapper{padding-left:0;padding-right:20px}.kq3d-scene-to-hd-image .kq-color-picker,.kq3d-scene-to-hd-image .kq-color-picker .kq-color-picker__mask,.kq3d-scene-to-hd-image .kq-color-picker .kq-color-picker__trigger{width:100%}.kq3d-scene-to-hd-image .kq3d-scene-to-hd-image-line{width:80%;margin:14px 8px;height:2px;overflow:hidden;background:#c0c4cc;border-radius:4px}.kq3d-scene-to-hd-image .kq3d-scene-to-hd-image-legend{height:24px}.kq3d-scene-to-hd-image .kq3d-scene-to-hd-image-footer{text-align:right;padding:16px 0 0}#exportPictureRegion{position:absolute;top:50%;left:50%;-webkit-transform:translate(-50%,-50%);-ms-transform:translate(-50%,-50%);transform:translate(-50%,-50%);width:100%;height:100%;overflow:hidden;-webkit-transition:all .5s;-o-transition:all .5s;transition:all .5s;z-index:99;pointer-events:none;border:3px dashed #fbcb5a;-webkit-box-shadow:inset 0 0 10px hsla(0,0%,100%,.6117647059);box-shadow:inset 0 0 10px hsla(0,0%,100%,.6117647059)}#pantographRatio{position:absolute;right:10px;bottom:10px;z-index:99;width:30%;background-color:var(--kq-fill-color-light);padding:5px;border-radius:10px;display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex}#pantographRatio span{white-space:nowrap;padding:0 10px;vertical-align:middle;line-height:26px;color:var(--kq-text-color-regular);font-size:var(--kq-font-size-base)}#pantographRatio input[type=range]{width:100%;background:none;height:8px;margin:auto}#pantographRatio input[type=text]{width:40px!important;min-width:20px;background:none;border:none;color:var(--kq-text-color-regular);font-size:var(--kq-font-size-base)}@media (max-width:1200px){#pantographRatio{width:60%}}@media (max-width:767px){#pantographRatio{width:100%}}.scene-to-hd-image-viewer{position:absolute;top:50%;left:50%;-webkit-transform:translate(-50%,-50%);-ms-transform:translate(-50%,-50%);transform:translate(-50%,-50%);width:100%;height:100%;overflow:hidden;-webkit-transition:all .5s;-o-transition:all .5s;transition:all .5s}