ym-giswidget-2d 1.0.54 → 1.0.55

package/components/horizontally-top-toolbar/HorizontallyTopToolbar.vue.js

@@ -1,7 +1,7 @@
 import _sfc_main from "./HorizontallyTopToolbar.vue2.js";
 /* empty css                            */
 import _export_sfc from "../../_virtual/_plugin-vue_export-helper.js";
-const _HorizontallyTopToolbar = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-18eedeea"]]);
+const _HorizontallyTopToolbar = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-53d5278a"]]);
 export {
   _HorizontallyTopToolbar as default
 };

package/components/horizontally-top-toolbar/HorizontallyTopToolbar.vue2.js

@@ -104,6 +104,13 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
             classPath: "../tools/clear/Clear.vue",
             icon: "./img/tool/clear.png",
             isOnce: true
+          },
+          {
+            id: "splitTool",
+            title: "分割",
+            classPath: "../tools/split/Split.vue",
+            icon: "./img/tool/clear.png",
+            isOnce: true
           }
         ]
       },

package/components/horizontally-top-toolbar/index.css

@@ -1,4 +1,4 @@
-.toolbar-contain[data-v-18eedeea] {
+.toolbar-contain[data-v-53d5278a] {
   position: absolute;
   top: 44px;
   display: flex;
@@ -9,7 +9,7 @@
   border: 1px solid var(--system-primary-border-color);
   border-radius: 3px;
 }
-.toolbar-contain .toolbar-item-contain[data-v-18eedeea] {
+.toolbar-contain .toolbar-item-contain[data-v-53d5278a] {
   height: 43px;
   line-height: 43px;
   display: flex;
@@ -18,17 +18,17 @@
   align-items: center;
   cursor: pointer;
 }
-.toolbar-contain .toolbar-item-contain .toolbar-item[data-v-18eedeea] {
+.toolbar-contain .toolbar-item-contain .toolbar-item[data-v-53d5278a] {
   display: flex;
   align-items: center;
   padding: 0px 10px;
 }
-.toolbar-contain .toolbar-item-contain .toolbar-icon[data-v-18eedeea] {
+.toolbar-contain .toolbar-item-contain .toolbar-icon[data-v-53d5278a] {
   width: 24px;
   height: 24px;
   margin-right: 6px;
 }
-.toolbar-contain .toolbar-item-contain .toolbar-children-contain[data-v-18eedeea] {
+.toolbar-contain .toolbar-item-contain .toolbar-children-contain[data-v-53d5278a] {
   position: absolute;
   top: 50px;
   background: var(--system-primary-color);
@@ -36,24 +36,24 @@
   border-radius: 3px;
   margin: 0px -1px;
 }
-.toolbar-contain .active[data-v-18eedeea] {
+.toolbar-contain .active[data-v-53d5278a] {
   color: var(--system-primary-text-active-color);
 }
-.toolbar-contain .toolbar-split[data-v-18eedeea] {
+.toolbar-contain .toolbar-split[data-v-53d5278a] {
   width: 2px;
   height: 20px;
   background: #7EA08E;
   margin: auto;
   opacity: 0.5;
 }
-.toolbar-contain .toolbar-h-split[data-v-18eedeea] {
+.toolbar-contain .toolbar-h-split[data-v-53d5278a] {
   height: 2px;
   background: #7EA08E;
   margin: auto;
   opacity: 0.5;
   margin: 0px 10px;
 }
-.component-position[data-v-18eedeea] {
+.component-position[data-v-53d5278a] {
   position: absolute;
   right: 300px;
 }

package/components/map-view/MapView.vue.d.ts

@@ -392,6 +392,7 @@ declare const _default: import('vue').DefineComponent<__VLS_Props, {
             constrainResolution: boolean | undefined;
         };
         getView: () => import('ym-gis-2d/mapView/View').default;
+        refresh: () => void;
         fitLayer: (layer: import('ym-gis-2d/layers/IBaseLayer').IBaseLayer) => void;
         fitLayerById: (id: string) => void;
         addMapLayer: (layerInfo: import('ym-gis-2d/entity').IMapService) => Promise<import('ol/layer/Base').default>;

package/components/map-view/index.d.ts

@@ -387,6 +387,7 @@ export declare const MapView: import('../../utils').WithInstall<import('vue').De
             constrainResolution: boolean | undefined;
         };
         getView: () => import('ym-gis-2d/mapView/View').default;
+        refresh: () => void;
         fitLayer: (layer: import('ym-gis-2d/layers/IBaseLayer').IBaseLayer) => void;
         fitLayerById: (id: string) => void;
         addMapLayer: (layerInfo: import('ym-gis-2d/entity').IMapService) => Promise<import('ol/layer/Base').default>;

package/components/multi-screen/MultiScreen.vue.d.ts

@@ -394,6 +394,7 @@ declare const _default: import('vue').DefineComponent<__VLS_Props, {
             constrainResolution: boolean | undefined;
         };
         getView: () => OLView;
+        refresh: () => void;
         fitLayer: (layer: import('ym-gis-2d/layers/IBaseLayer').IBaseLayer) => void;
         fitLayerById: (id: string) => void;
         addMapLayer: (layerInfo: IMapService) => Promise<import('ol/layer/Base').default>;

package/components/multi-screen/index.d.ts

@@ -390,6 +390,7 @@ export declare const MultiScreen: import('../../utils').WithInstall<import('vue'
             constrainResolution: boolean | undefined;
         };
         getView: () => import('ym-gis-2d/mapView/View').default;
+        refresh: () => void;
         fitLayer: (layer: import('ym-gis-2d/layers/IBaseLayer').IBaseLayer) => void;
         fitLayerById: (id: string) => void;
         addMapLayer: (layerInfo: import('ym-gis-2d/entity').IMapService) => Promise<import('ol/layer/Base').default>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ym-giswidget-2d",
-  "version": "1.0.54",
+  "version": "1.0.55",
   "type": "module",
   "main": "index.js",
   "module": "index.js",
@@ -10,6 +10,6 @@
     "element-plus": "^2.9.0",
     "jszip": "^3.10.1",
     "ol": "^9.2.4",
-    "ym-gis-2d": "1.0.32"
+    "ym-gis-2d": "1.0.33"
   }
 }

package/panel/DraggablePanel.vue.js

@@ -1,7 +1,7 @@
 import _sfc_main from "./DraggablePanel.vue2.js";
 /* empty css                    */
 import _export_sfc from "../_virtual/_plugin-vue_export-helper.js";
-const DraggablePanel = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-2f4a5739"]]);
+const DraggablePanel = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-f6c9d2a3"]]);
 export {
   DraggablePanel as default
 };

package/panel/index.css

@@ -4,33 +4,33 @@
        url('data:font/woff;base64,d09GRgABAAAAAAW4AAsAAAAACNQAAQAAAAAAAAAAAAAAAAAAAAAAAAAAAABHU1VCAAABCAAAADsAAABUIIslek9TLzIAAAFEAAAARAAAAGA8FUnoY21hcAAAAYgAAAB9AAAB1k7+hjNnbHlmAAACCAAAAZoAAAIcJRpmcmhlYWQAAAOkAAAALwAAADYqdj6waGhlYQAAA9QAAAAcAAAAJAfeA4hobXR4AAAD8AAAAA4AAAAcHAAAAGxvY2EAAAQAAAAAEAAAABABlgIqbWF4cAAABBAAAAAfAAAAIAEWADtuYW1lAAAEMAAAAUAAAAJnEKM8sHBvc3QAAAVwAAAASAAAAF/a9ea9eJxjYGRgYOBiMGCwY2BycfMJYeDLSSzJY5BiYGGAAJA8MpsxJzM9kYEDxgPKsYBpDiBmg4gCACY7BUgAeJxjYGFhYJzAwMrAwNTJdIaBgaEfQjO+ZjBi5ACKMrAyM2AFAWmuKQwHnjE8l2Bu+N/AwMB8hwFIMjCiKGICAGUXDHl4nO2RwQnDQAwER/blCMbEXxeROvLKx7+UkpfL1ZXhrE4mpIjomAMJsYJd4AKM4i4K2I4R9dbU+nxk6vPCU/3MlYHi5g/f2tLW4wDnt/uWaft2vlAfpFV1UbpW+dfc/9fZ1fAxiSTcErkmd5NIyrck9tuSRIptTbAPCuEd+gAAAHicfU+7TuNQFDwPYojAK1kmIGxhcWPZUVxQEAIVyCiGii+gogLRp2Qlr0JJjURoQgNfQLla/8AWW0KVgscHQMPjXjgmEtshnceMdDRnBioA70M+ZwVzMA8KElgEQFW35jGsWzVneqalllbWsLW00naWY1Q1NYfKcUMhoWqrqK1qnOvCdge269qUjsDbI6W6oLQYuLbJR5gXXHsoFMpDASTADFOT4sDsIqDQfCFNAVg8PfMlj8MYTMBU6cdRDkq3QqfFOxp4WwM+/O122Xp74imdUlcfUxfkVFoEsChVSrcIBEZ4PtLNx4B/SdYAGt/l5Jq8/ArJhd7z4gsvjj0qvDgXcCM/i98/Y8/E1Oc88qX0hh9F/mXk0akf6cY9/TENvPajfOTrveAr3oBJIY0qjldxtoqryFeZOTL9DPfNaYZ7eJiZHumO6eF+x5yYfgcPTC/DQ9Eg0bjlM/bBhRCgouqLKGbXUawHKBl+IP7PUsYImfVLc6spRdbn1v+CJAnIKqff3Eyokmw2ZetX2XSXBPr186ASJB+iQ326AAB4nGNgZGBgAGLnedMk4/ltvjJwszCAwOPVtZEI+n8DCwNzI5DLwcAEEgUAHdYKGgB4nGNgZGBgbvjfwBDDwgACQJKRARWwAwBHDQJweJxjYWBgYMGBAQHcAB0AAAAAAAAASgBoAHYAtADWAQ54nGNgZGBgYGfQZ2BlAAEmIOYCQgaG/2A+AwAOEQFSAHichZE9bsJAEIWfwZAElChKpDRpVikoEsn8lEipUKCnoAez5ke211ovSNQ5TY6QE+QI6Whzikh52EMDRbza2W/evpkdyQDusIeH8rvnLtnDJbOSK7jAo3CV+pOwT34WrqGJnnCd+qtwAy94E26yY8YOnn/FrIV3YQ+3+BCu4AafwlXqX8I++Vu4hgf8CNep/wo3MPGuhZtoeeHA6qnTczXbqVVo0sik7niO9WITT+2pPNE2X5lUdYPOURrpVNtjm3y76DkXqciaRA15q+PYqMyatQ5dsHQu67fbkehBaBIMYKExhWOcQ2GGHeMKIQxSREV0Z/mY7gU2iFlp/3VP6LbIqR9yhS4CdM5cI7rSwnk6TY4tX+tRdXQrbsuahDSUWs1JYrLiDzzcramE1AMsi6oMfbS5ohN/UMyQ/AHYk29XeJxjYGKAAC4G7ICdkYmRmZGFkZWRjZGdkYOBrTQvJT85mwVEcORm5mXmZlalshelFpfkF6WyJufkF6dy5CZWgIUZGACPyRBp') format('woff'),
        url('data:font/ttf;base64,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') format('truetype');
 }
-.iconfont[data-v-2f4a5739] {
+.iconfont[data-v-f6c9d2a3] {
   font-family: "iconfont" !important;
   font-size: 16px;
   font-style: normal;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
 }
-.icon-undock[data-v-2f4a5739]:before {
+.icon-undock[data-v-f6c9d2a3]:before {
   content: "\e718";
 }
-.icon-dock[data-v-2f4a5739]:before {
+.icon-dock[data-v-f6c9d2a3]:before {
   content: "\e601";
 }
-.icon-minimize[data-v-2f4a5739]:before {
+.icon-minimize[data-v-f6c9d2a3]:before {
   content: "\e646";
 }
-.icon-restore[data-v-2f4a5739]:before {
+.icon-restore[data-v-f6c9d2a3]:before {
   content: "\e600";
 }
-.icon-close[data-v-2f4a5739]:before {
+.icon-close[data-v-f6c9d2a3]:before {
   content: "\e70f";
 }
-.icon-maximize[data-v-2f4a5739]:before {
+.icon-maximize[data-v-f6c9d2a3]:before {
   content: "\e651";
 }
-.draggable-panel[data-v-2f4a5739] {
-  position: fixed;
+.draggable-panel[data-v-f6c9d2a3] {
+  position: fixed o !important;
   left: 0;
   top: 0;
   border: 1px solid #ddd;
@@ -44,20 +44,20 @@
   color: var(--system-primary-text-color);
   font-size: var(--system-primary-text-size);
 }
-.draggable-panel[data-v-2f4a5739]:not(.is-maximized) {
+.draggable-panel[data-v-f6c9d2a3]:not(.is-maximized) {
   transition: width 0.2s, height 0.2s;
 }
-.draggable-panel.is-maximized[data-v-2f4a5739] {
+.draggable-panel.is-maximized[data-v-f6c9d2a3] {
   border-radius: 0;
 }
-.draggable-panel.is-minimized[data-v-2f4a5739] {
+.draggable-panel.is-minimized[data-v-f6c9d2a3] {
   height: 40px !important;
   width: 200px !important;
 }
-.draggable-panel.is-docked[data-v-2f4a5739] {
+.draggable-panel.is-docked[data-v-f6c9d2a3] {
   transition: transform 0.2s;
 }
-.panel-header[data-v-2f4a5739] {
+.panel-header[data-v-f6c9d2a3] {
   display: flex;
   align-items: center;
   justify-content: space-between;
@@ -66,14 +66,14 @@
   cursor: move;
   user-select: none;
 }
-.panel-title[data-v-2f4a5739] {
+.panel-title[data-v-f6c9d2a3] {
   font-weight: bold;
 }
-.panel-controls[data-v-2f4a5739] {
+.panel-controls[data-v-f6c9d2a3] {
   display: flex;
   gap: 4px;
 }
-.panel-controls button[data-v-2f4a5739] {
+.panel-controls button[data-v-f6c9d2a3] {
   background: none;
   border: none;
   padding: 4px;
@@ -81,81 +81,81 @@
   cursor: pointer;
   opacity: 0.6;
 }
-.panel-controls button[data-v-2f4a5739]:hover {
+.panel-controls button[data-v-f6c9d2a3]:hover {
   opacity: 1;
 }
-.panel-content[data-v-2f4a5739] {
+.panel-content[data-v-f6c9d2a3] {
   flex: 1;
   overflow: auto;
   padding: 12px;
 }
-.panel-footer[data-v-2f4a5739] {
+.panel-footer[data-v-f6c9d2a3] {
   border-top: solid 1px;
 }
-.panel-footer .panel-footer-buttons[data-v-2f4a5739] {
+.panel-footer .panel-footer-buttons[data-v-f6c9d2a3] {
   padding: 8px 12px;
   display: flex;
   justify-content: end;
 }
-.panel-footer .panel-footer-buttons .el-button[data-v-2f4a5739] {
+.panel-footer .panel-footer-buttons .el-button[data-v-f6c9d2a3] {
   --el-button-bg-color: "";
   --el-button-hover-text-color: "";
   --el-button-hover-bg-color: "";
 }
-.resize-handles .resize-handle[data-v-2f4a5739] {
+.resize-handles .resize-handle[data-v-f6c9d2a3] {
   position: absolute;
   background: transparent;
 }
-.resize-handles .resize-handle.n[data-v-2f4a5739] {
+.resize-handles .resize-handle.n[data-v-f6c9d2a3] {
   top: -3px;
   left: 0;
   right: 0;
   height: 6px;
   cursor: n-resize;
 }
-.resize-handles .resize-handle.e[data-v-2f4a5739] {
+.resize-handles .resize-handle.e[data-v-f6c9d2a3] {
   top: 0;
   right: -3px;
   bottom: 0;
   width: 6px;
   cursor: e-resize;
 }
-.resize-handles .resize-handle.s[data-v-2f4a5739] {
+.resize-handles .resize-handle.s[data-v-f6c9d2a3] {
   bottom: -3px;
   left: 0;
   right: 0;
   height: 6px;
   cursor: s-resize;
 }
-.resize-handles .resize-handle.w[data-v-2f4a5739] {
+.resize-handles .resize-handle.w[data-v-f6c9d2a3] {
   top: 0;
   left: -3px;
   bottom: 0;
   width: 6px;
   cursor: w-resize;
 }
-.resize-handles .resize-handle.ne[data-v-2f4a5739] {
+.resize-handles .resize-handle.ne[data-v-f6c9d2a3] {
   top: -3px;
   right: -3px;
   width: 6px;
   height: 6px;
   cursor: ne-resize;
 }
-.resize-handles .resize-handle.se[data-v-2f4a5739] {
+.resize-handles .resize-handle.se[data-v-f6c9d2a3] {
   bottom: -3px;
   right: -3px;
   width: 6px;
   height: 6px;
   cursor: se-resize;
 }
-.resize-handles .resize-handle.sw[data-v-2f4a5739] {
+.resize-handles .resize-handle.sw[data-v-f6c9d2a3] {
   bottom: -3px;
   left: -3px;
   width: 6px;
   height: 6px;
   cursor: sw-resize;
 }
-.resize-handles .resize-handle.nw[data-v-2f4a5739] {
+.resize-handles .resize-handle.nw[data-v-f6c9d2a3] {
   top: -3px;
   left: -3px;
   width: 6px;