@vcmap/ui 6.1.13 → 6.2.0-rc.1

package/src/i18n/en.d.ts

@@ -154,6 +154,13 @@ declare namespace messages {
             let title_6: string;
             export { title_6 as title };
         }
+        export namespace layerRenderOrder {
+            let name_1: string;
+            export { name_1 as name };
+            let title_7: string;
+            export { title_7 as title };
+            export let help: string;
+        }
     }
     export namespace navigation {
         let rotateButton: string;
@@ -178,13 +185,13 @@ declare namespace messages {
         }
         namespace obliqueFallback {
             export let message: string;
-            let title_7: string;
-            export { title_7 as title };
+            let title_8: string;
+            export { title_8 as title };
         }
     }
     export namespace categoryManager {
-        let title_8: string;
-        export { title_8 as title };
+        let title_9: string;
+        export { title_9 as title };
         let tooltip_2: string;
         export { tooltip_2 as tooltip };
     }
@@ -211,7 +218,8 @@ declare namespace messages {
         }
         export { _import as import };
         export namespace vcsFormSection {
-            let help: string;
+            let help_1: string;
+            export { help_1 as help };
         }
         export namespace vcsTable {
             let key: string;
@@ -259,10 +267,10 @@ declare namespace messages {
         }
         export namespace flight {
             export let general: string;
-            let name_1: string;
-            export { name_1 as name };
-            let title_9: string;
-            export { title_9 as title };
+            let name_2: string;
+            export { name_2 as name };
+            let title_10: string;
+            export { title_10 as title };
             export let titlePlaceholder: string;
             export let interpolation: string;
             export let duration: string;
@@ -283,21 +291,21 @@ declare namespace messages {
             export let exportPath: string;
         }
         export namespace splashScreen {
-            let name_2: string;
-            export { name_2 as name };
+            let name_3: string;
+            export { name_3 as name };
             export let checkBoxText: string;
             export let buttonTitle: string;
             export let dontShowAgain: string;
         }
         export namespace customScreen {
-            let name_3: string;
-            export { name_3 as name };
-        }
-        export namespace viewpoint {
             let name_4: string;
             export { name_4 as name };
-            let title_10: string;
-            export { title_10 as title };
+        }
+        export namespace viewpoint {
+            let name_5: string;
+            export { name_5 as name };
+            let title_11: string;
+            export { title_11 as title };
             let titlePlaceholder_1: string;
             export { titlePlaceholder_1 as titlePlaceholder };
             export let groundPosition: string;
@@ -322,8 +330,8 @@ declare namespace messages {
             let outOfRange: string;
         }
         export namespace extent {
-            let title_11: string;
-            export { title_11 as title };
+            let title_12: string;
+            export { title_12 as title };
             export let projection: string;
             export let min: string;
             export let max: string;
@@ -338,8 +346,8 @@ declare namespace messages {
             export let toggle: string;
         }
         export namespace projection_1 {
-            let title_12: string;
-            export { title_12 as title };
+            let title_13: string;
+            export { title_13 as title };
             export let epsg: string;
             export let proj4: string;
             export let proj4Tooltip: string;
@@ -367,10 +375,10 @@ declare namespace messages {
             export let modifyInfo: string;
             export let styleHeader: string;
             export namespace snapping {
-                let title_13: string;
-                export { title_13 as title };
-                let help_1: string;
-                export { help_1 as help };
+                let title_14: string;
+                export { title_14 as title };
+                let help_2: string;
+                export { help_2 as help };
                 export let orthogonalTooltip: string;
                 export let parallelTooltip: string;
                 export let vertexTooltip: string;
@@ -411,7 +419,7 @@ declare namespace messages {
             export let extrudedHeight: string;
             export let skirt: string;
             export let modelScale: string;
-            export namespace help_2 {
+            export namespace help_3 {
                 let clampToGround_1: string;
                 export { clampToGround_1 as clampToGround };
                 let clampToTerrain_1: string;
@@ -427,7 +435,7 @@ declare namespace messages {
                 let relativeTo3DTiles_1: string;
                 export { relativeTo3DTiles_1 as relativeTo3DTiles };
             }
-            export { help_2 as help };
+            export { help_3 as help };
         }
         export namespace validation {
             let allowedRange: string;
@@ -436,14 +444,14 @@ declare namespace messages {
         }
     }
     export namespace settings {
-        let title_14: string;
-        export { title_14 as title };
+        let title_15: string;
+        export { title_15 as title };
         let tooltip_3: string;
         export { tooltip_3 as tooltip };
         export let languageSelector: string;
         export namespace displayQuality {
-            let title_15: string;
-            export { title_15 as title };
+            let title_16: string;
+            export { title_16 as title };
             export namespace level {
                 let low: string;
                 let medium: string;
@@ -451,19 +459,19 @@ declare namespace messages {
             }
         }
         export namespace theme {
-            let title_16: string;
-            export { title_16 as title };
+            let title_17: string;
+            export { title_17 as title };
             export let dark: string;
             export let light: string;
         }
     }
-    export namespace help_3 {
-        let title_17: string;
-        export { title_17 as title };
+    export namespace help_4 {
+        let title_18: string;
+        export { title_18 as title };
         let tooltip_4: string;
         export { tooltip_4 as tooltip };
     }
-    export { help_3 as help };
+    export { help_4 as help };
     export namespace featureInfo {
         let activateToolTitle: string;
         let deactivateToolTitle: string;
@@ -475,15 +483,15 @@ declare namespace messages {
             export { empty_2 as empty };
         }
         namespace deepPicking {
-            let title_18: string;
-            export { title_18 as title };
+            let title_19: string;
+            export { title_19 as title };
             let headerTitle_1: string;
             export { headerTitle_1 as headerTitle };
         }
     }
     export namespace legend {
-        let title_19: string;
-        export { title_19 as title };
+        let title_20: string;
+        export { title_20 as title };
         let tooltip_5: string;
         export { tooltip_5 as tooltip };
         let empty_3: string;
@@ -492,8 +500,8 @@ declare namespace messages {
         export let defaultLabelText: string;
     }
     export namespace search_1 {
-        let title_20: string;
-        export { title_20 as title };
+        let title_21: string;
+        export { title_21 as title };
         let tooltip_6: string;
         export { tooltip_6 as tooltip };
         export let select: string;
@@ -505,38 +513,38 @@ declare namespace messages {
     }
     export { search_1 as search };
     export namespace toolbox {
-        let title_21: string;
-        export { title_21 as title };
+        let title_22: string;
+        export { title_22 as title };
         let flight_1: string;
         export { flight_1 as flight };
         export let miscellaneous: string;
     }
     export namespace footer {
-        let title_22: string;
-        export { title_22 as title };
+        let title_23: string;
+        export { title_23 as title };
         export namespace attributions {
-            let title_23: string;
-            export { title_23 as title };
+            let title_24: string;
+            export { title_24 as title };
             let tooltip_7: string;
             export { tooltip_7 as tooltip };
             let empty_4: string;
             export { empty_4 as empty };
         }
         export namespace imprint {
-            let title_24: string;
-            export { title_24 as title };
+            let title_25: string;
+            export { title_25 as title };
             let tooltip_8: string;
             export { tooltip_8 as tooltip };
         }
         export namespace dataProtection {
-            let title_25: string;
-            export { title_25 as title };
+            let title_26: string;
+            export { title_26 as title };
             let tooltip_9: string;
             export { tooltip_9 as tooltip };
         }
         export namespace positionDisplay {
-            let title_26: string;
-            export { title_26 as title };
+            let title_27: string;
+            export { title_27 as title };
             let projection_2: string;
             export { projection_2 as projection };
         }

package/src/i18n/en.js

@@ -45,6 +45,11 @@ const messages = {
       name: 'Zoom to extent',
       title: 'Zoom to layer extent',
     },
+    layerRenderOrder: {
+      name: 'Rendering order',
+      title: 'Change rendering order of active layers',
+      help: 'Drag & drop items to change their rendering order. The last item in the tree will appear on top. Grouped items can only be swapped within the group. Please note that 3D content can come with configured rendering settings that have greater impact than the rendering order.',
+    },
   },
   navigation: {
     rotateButton: 'Rotate view',

package/src/init.js

@@ -122,7 +122,7 @@ export async function initAppFromAppConfig(mountTarget, appUrl) {
   const modules = await Promise.all(
     appConfig.modules.map(createModuleFromObjectOrUrl),
   );
-  // eslint-disable-next-line no-restricted-syntax
+
   for await (const module of modules) {
     if (module) {
       await app.addModule(module);

package/src/manager/collectionManager/CollectionComponent.vue

@@ -11,7 +11,7 @@
       </span>
     </template>
     <template #default>
-      <CollectionComponentContent @openList="(id) => $emit('openList', id)" />
+      <CollectionComponentContent @open-list="(id) => $emit('openList', id)" />
     </template>
   </vcs-expansion-panel>
 </template>

package/src/manager/collectionManager/CollectionComponentContent.vue

@@ -75,8 +75,8 @@
           }
           return actions.value;
         }),
-        move({ item, targetIndex }) {
-          moveItem(collectionComponent, item, targetIndex);
+        move(event) {
+          moveItem(collectionComponent, event);
         },
         openCollectionComponentList() {
           emit('openList', collectionComponent.id);

package/src/manager/collectionManager/CollectionComponentContent.vue.d.ts

@@ -8,10 +8,7 @@ declare const _default: import("vue").DefineComponent<{}, {
     overflowCount: any;
     limit: any;
     actions: import("vue").ComputedRef<any>;
-    move({ item, targetIndex }: {
-        item: any;
-        targetIndex: any;
-    }): void;
+    move(event: any): void;
     openCollectionComponentList(): void;
 }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, "openList"[], "openList", import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{}>> & {
     onOpenList?: ((...args: any[]) => any) | undefined;

package/src/manager/collectionManager/CollectionComponentList.vue

@@ -48,19 +48,20 @@
    * New position is derived from a target item in the collection.
    * This ensures correct movement, if rendered list is only a subset of the collection.
    * @param {import("./collectionComponentClass.js").default<Object>} collectionComponent
-   * @param {import("../../components/lists/VcsListItemComponent.vue").VcsListItem} item
-   * @param {number} targetIndex
+   * @param {import("../../components/lists/dragHelper.js").ItemMovedEvent} event
    */
-  export function moveItem(collectionComponent, item, targetIndex) {
+  export function moveItem(
+    collectionComponent,
+    { item, targetItem, position },
+  ) {
     const { collection } = collectionComponent;
     if (collection instanceof IndexedCollection) {
       const collectionItem = collection.getByKey(item.name);
       const keyProperty = collection.uniqueKey;
-      const targetItem = collectionComponent.items.value[targetIndex];
       const targetIndexCol = [...collection].findIndex(
         (i) => i[keyProperty] === targetItem.name,
       );
-      collection.moveTo(collectionItem, targetIndexCol);
+      collection.moveTo(collectionItem, targetIndexCol + position);
     }
   }
 
@@ -73,6 +74,12 @@
    */
   export default {
     name: 'CollectionComponentList',
+    components: {
+      VcsButton,
+      VcsActionButtonList,
+      VcsList,
+      VSheet,
+    },
     props: {
       showLessButton: {
         type: Boolean,
@@ -83,12 +90,6 @@
         default: false,
       },
     },
-    components: {
-      VcsButton,
-      VcsActionButtonList,
-      VcsList,
-      VSheet,
-    },
     emits: ['closeList'],
     setup(_props, { emit }) {
       /**
@@ -122,8 +123,8 @@
           }
           return actions.value;
         }),
-        move({ item, targetIndex }) {
-          moveItem(collectionComponent, item, targetIndex);
+        move(event) {
+          moveItem(collectionComponent, event);
         },
         closeList() {
           emit('closeList', collectionComponent.id);

package/src/manager/collectionManager/CollectionComponentList.vue.d.ts

@@ -3,10 +3,9 @@
  * New position is derived from a target item in the collection.
  * This ensures correct movement, if rendered list is only a subset of the collection.
  * @param {import("./collectionComponentClass.js").default<Object>} collectionComponent
- * @param {import("../../components/lists/VcsListItemComponent.vue").VcsListItem} item
- * @param {number} targetIndex
+ * @param {import("../../components/lists/dragHelper.js").ItemMovedEvent} event
  */
-export function moveItem(collectionComponent: import("./collectionComponentClass.js").default<Object>, item: import("../../components/lists/VcsListItemComponent.vue").VcsListItem, targetIndex: number): void;
+export function moveItem(collectionComponent: import("./collectionComponentClass.js").default<Object>, { item, targetItem, position }: import("../../components/lists/dragHelper.js").ItemMovedEvent): void;
 declare const _default: import("vue").DefineComponent<{
     showLessButton: {
         type: BooleanConstructor;
@@ -26,10 +25,7 @@ declare const _default: import("vue").DefineComponent<{
     overflowCount: any;
     limit: any;
     actions: import("vue").ComputedRef<any>;
-    move({ item, targetIndex }: {
-        item: any;
-        targetIndex: any;
-    }): void;
+    move(event: any): void;
     closeList(): void;
 }, any, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, "closeList"[], "closeList", import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
     showLessButton: {

package/src/manager/collectionManager/CollectionComponentStandalone.vue

@@ -9,9 +9,9 @@
     <collection-component-list
       v-if="componentListView"
       hide-header
-      @closeList="closeList"
+      @close-list="closeList"
     />
-    <CollectionComponentContent v-else @openList="openList" />
+    <CollectionComponentContent v-else @open-list="openList" />
   </VcsFormSection>
 </template>
 

package/src/manager/collectionManager/CollectionManager.vue

@@ -13,7 +13,7 @@
         :key="componentId"
       >
         <collection-component
-          @openList="openList"
+          @open-list="openList"
           :open="panels.includes(index)"
         />
       </collection-component-provider>
@@ -22,7 +22,7 @@
       v-if="componentView"
       :component-id="componentView"
     >
-      <collection-component-list @closeList="closeList" />
+      <collection-component-list @close-list="closeList" />
     </collection-component-provider>
   </v-container>
 </template>

package/src/manager/panel/PanelComponent.vue

@@ -17,45 +17,6 @@
   </div>
 </template>
 
-<style scoped lang="scss">
-  .panel-component {
-    padding: 0 4px;
-  }
-  .panel-component::after {
-    content: '';
-    position: absolute;
-    background: rgb(var(--v-theme-surface-light));
-  }
-
-  .panel-component-left::after {
-    width: 4px;
-    top: 0;
-    bottom: 0;
-    right: 0;
-  }
-  .panel-component-left.resizable::after {
-    cursor: ew-resize;
-  }
-  .panel-component-right::after {
-    width: 4px;
-    top: 0;
-    bottom: 0;
-    left: 0;
-  }
-  .panel-component-right.resizable::after {
-    cursor: ew-resize;
-  }
-  .panel-component-bottom::after {
-    left: 0;
-    right: 0;
-    top: 0;
-    height: 4px;
-  }
-  .panel-component-bottom.resizable::after {
-    cursor: n-resize;
-  }
-</style>
-
 <script>
   import { computed, getCurrentInstance } from 'vue';
   import { PanelLocation } from './panelManager.js';
@@ -68,6 +29,7 @@
         required: true,
       },
     },
+    emits: ['resize'],
     setup(props, { emit }) {
       return {
         appIsDark: computed(() => {
@@ -101,3 +63,42 @@
     },
   };
 </script>
+
+<style scoped lang="scss">
+  .panel-component {
+    padding: 0 4px;
+  }
+  .panel-component::after {
+    content: '';
+    position: absolute;
+    background: rgb(var(--v-theme-surface-light));
+  }
+
+  .panel-component-left::after {
+    width: 4px;
+    top: 0;
+    bottom: 0;
+    right: 0;
+  }
+  .panel-component-left.resizable::after {
+    cursor: ew-resize;
+  }
+  .panel-component-right::after {
+    width: 4px;
+    top: 0;
+    bottom: 0;
+    left: 0;
+  }
+  .panel-component-right.resizable::after {
+    cursor: ew-resize;
+  }
+  .panel-component-bottom::after {
+    left: 0;
+    right: 0;
+    top: 0;
+    height: 4px;
+  }
+  .panel-component-bottom.resizable::after {
+    cursor: n-resize;
+  }
+</style>

package/src/manager/panel/PanelComponent.vue.d.ts

@@ -10,10 +10,12 @@ declare const _default: import("vue").DefineComponent<{
     isBottom: import("vue").ComputedRef<boolean>;
     startResize(e: any): void;
     stopResize(): void;
-}, any, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+}, any, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, "resize"[], "resize", import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
     panelState: {
         type: ObjectConstructor;
         required: true;
     };
-}>>, {}, {}>;
+}>> & {
+    onResize?: ((...args: any[]) => any) | undefined;
+}, {}, {}>;
 export default _default;

package/src/manager/panel/PanelManagerComponent.vue

@@ -31,19 +31,6 @@
   </div>
 </template>
 
-<style scoped lang="scss">
-  .vcs-panel-frame {
-    position: absolute;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
-  }
-  .vcs-panel-border {
-    padding: 5px;
-  }
-</style>
-
 <script>
   import {
     computed,
@@ -229,3 +216,16 @@
     },
   };
 </script>
+
+<style scoped lang="scss">
+  .vcs-panel-frame {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+  }
+  .vcs-panel-border {
+    padding: 5px;
+  }
+</style>

package/src/manager/panel/PanelManagerComponent.vue.d.ts

@@ -18,12 +18,14 @@ declare const _default: import("vue").DefineComponent<{}, {
         isBottom: import("vue").ComputedRef<boolean>;
         startResize(e: any): void;
         stopResize(): void;
-    }, any, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    }, any, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, "resize"[], "resize", import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
         panelState: {
             type: ObjectConstructor;
             required: true;
         };
-    }>>, {}, {}>) => PanelPosition | null;
+    }>> & {
+        onResize?: ((...args: any[]) => any) | undefined;
+    }, {}, {}>) => PanelPosition | null;
     getStyles: (id: string) => import("vue").ComputedRef<Object>;
     getState: (id: string) => PanelState;
     getProps: (id: string) => Object;

package/src/manager/panel/panelHelper.js

@@ -104,29 +104,27 @@ function getMaxWidth(main, side, targetSize) {
  */
 function handleSidePanel(key, panel, main, side, targetSize) {
   const toUpdate = {};
-  if (panel.state.resizable) {
-    const position = percentageFromPanelOptions(
-      getPanelPosition(panel),
-      targetSize,
-    );
-    if (side.maxWidth !== position.maxWidth) {
-      position.maxWidth = side.maxWidth;
-      toUpdate.maxWidth = `${side.maxWidth}%`;
-    }
+  const position = percentageFromPanelOptions(
+    getPanelPosition(panel),
+    targetSize,
+  );
+  if (side.maxWidth !== position.maxWidth) {
+    position.maxWidth = side.maxWidth;
+    toUpdate.maxWidth = `${side.maxWidth}%`;
+  }
 
-    const width = Math.max(
-      position.minWidth,
-      Math.min(position.width, position.maxWidth),
-    );
-    main.width -= width;
-    main[key] = width;
+  const width = Math.max(
+    position.minWidth,
+    Math.min(position.width, position.maxWidth),
+  );
+  main.width -= width;
+  main[key] = width;
 
-    if (width !== position.width) {
-      toUpdate.width = `${width}%`;
-    }
-    if (position.height !== side.height) {
-      toUpdate.height = `${side.height}%`;
-    }
+  if (width !== position.width) {
+    toUpdate.width = `${width}%`;
+  }
+  if (position.height !== side.height) {
+    toUpdate.height = `${side.height}%`;
   }
   return toUpdate;
 }