@vcmap/ui 5.0.0-rc.18 → 5.0.0-rc.20

package/src/featureInfo/abstractFeatureInfoView.js

@@ -235,7 +235,7 @@ class AbstractFeatureInfoView extends VcsObject {
    * Called by `getProperties()` to pass attributes as props object to the VueComponent of this view.
    * May be overwritten by classes extending AbstractFeatureInfoView.
    * It filters attributes of the feature by keys, performs value and key mapping, if provided.
-   * @param {undefined|import("ol").Feature<import("ol/geom/Geometry").default>|import("@vcmap/cesium").Cesium3DTileFeature|import("@vcmap/cesium").Cesium3DTilePointFeature} feature
+   * @param {undefined|import("ol").Feature<import("ol/geom/Geometry").default>|import("@vcmap-cesium/engine").Cesium3DTileFeature|import("@vcmap-cesium/engine").Cesium3DTilePointFeature} feature
    * @returns {Object}
    */
   getAttributes(feature) {

package/src/featureInfo/addressBalloonFeatureInfoView.js

@@ -69,7 +69,7 @@ class AddressBalloonFeatureInfoView extends BalloonFeatureInfoView {
 
   /**
    * derives address attributes from addressKeys
-   * @param {undefined|import("ol").Feature<import("ol/geom/Geometry").default>|import("@vcmap/cesium").Cesium3DTileFeature|import("@vcmap/cesium").Cesium3DTilePointFeature} feature
+   * @param {undefined|import("ol").Feature<import("ol/geom/Geometry").default>|import("@vcmap-cesium/engine").Cesium3DTileFeature|import("@vcmap-cesium/engine").Cesium3DTilePointFeature} feature
    * @returns {Object}
    */
   getAttributes(feature) {

package/src/featureInfo/balloonFeatureInfoView.js

@@ -1,6 +1,6 @@
 import { Feature } from 'ol';
 import { getCenter } from 'ol/extent.js';
-import { Cartographic, Entity, Math as CesiumMath } from '@vcmap/cesium';
+import { Cartographic, Entity, Math as CesiumMath } from '@vcmap-cesium/engine';
 import { Projection } from '@vcmap/core';
 import { check } from '@vcsuite/check';
 import AbstractFeatureInfoView from './abstractFeatureInfoView.js';

package/src/featureInfo/balloonHelper.js

@@ -1,4 +1,4 @@
-import { Cartesian2, Cartographic, SceneTransforms } from '@vcmap/cesium';
+import { Cartesian2, Cartographic, SceneTransforms } from '@vcmap-cesium/engine';
 import { CesiumMap, ObliqueMap, OpenlayersMap, Projection, transformToImage } from '@vcmap/core';
 import { unByKey } from 'ol/Observable.js';
 import {
@@ -13,9 +13,9 @@ import {
 export const balloonOffset = { x: 55, y: 25 };
 
 /**
- * @param {import("@vcmap/cesium").Scene} scene
- * @param {import("@vcmap/cesium").Cartesian3} cartesian
- * @returns {undefined|import("@vcmap/cesium").Cartesian2}
+ * @param {import("@vcmap-cesium/engine").Scene} scene
+ * @param {import("@vcmap-cesium/engine").Cartesian3} cartesian
+ * @returns {undefined|import("@vcmap-cesium/engine").Cartesian2}
  */
 function getBalloonPositionCesium(scene, cartesian) {
   return SceneTransforms.wgs84ToWindowCoordinates(scene, cartesian);
@@ -24,7 +24,7 @@ function getBalloonPositionCesium(scene, cartesian) {
 /**
  * @param {import("@vcmap/core").OpenlayersMap} olMap
  * @param {import("ol/coordinate").Coordinate} position
- * @returns {undefined|import("@vcmap/cesium").Cartesian2}
+ * @returns {undefined|import("@vcmap-cesium/engine").Cartesian2}
  */
 function getBalloonPositionOL(olMap, position) {
   const pixel = olMap.getPixelFromCoordinate(position);
@@ -62,7 +62,7 @@ export async function getBalloonPosition(app, position) {
  * sets the windowPosition of a balloon
  * @param {WindowManager} windowManager
  * @param {string} id - windowId of balloon
- * @param {import("@vcmap/cesium").Cartesian2|undefined} windowPosition
+ * @param {import("@vcmap-cesium/engine").Cartesian2|undefined} windowPosition
  * @param {HTMLElement} target - the map's target { @link @import("@vcmap/core").MapCollection }
  */
 export function setBalloonPosition(windowManager, id, windowPosition, target) {

package/src/featureInfo/featureInfo.js

@@ -22,7 +22,7 @@ import {
   Cesium3DTilePointFeature,
   Color,
   Entity,
-} from '@vcmap/cesium';
+} from '@vcmap-cesium/engine';
 import { Feature } from 'ol';
 import { check, checkMaybe } from '@vcsuite/check';
 
@@ -36,7 +36,7 @@ import BalloonFeatureInfoView from './balloonFeatureInfoView.js';
 import { defaultPrimaryColor } from '../vuePlugins/vuetify.js';
 import { ToolboxType } from '../manager/toolbox/toolboxManager.js';
 
-/** @typedef {import("ol").Feature<import("ol/geom/Geometry").default>|import("@vcmap/cesium").Cesium3DTileFeature|import("@vcmap/cesium").Cesium3DTilePointFeature|import("@vcmap/cesium").Entity} FeatureType */
+/** @typedef {import("ol").Feature<import("ol/geom/Geometry").default>|import("@vcmap-cesium/engine").Cesium3DTileFeature|import("@vcmap-cesium/engine").Cesium3DTilePointFeature|import("@vcmap-cesium/engine").Entity} FeatureType */
 
 /**
  * @typedef {Object} FeatureInfoEvent

package/src/i18n/de.js

@@ -20,12 +20,6 @@ const messages = {
     infoAction: {
       title: 'Weitere Informationen',
     },
-    stateAction: {
-      titleInactive: 'Deaktiviert',
-      titleActive: 'Aktiviert',
-      titleIndeterminate: 'Unbestimmbar',
-      titleLoading: 'Lädt...',
-    },
     viewpointAction: {
       title: 'Springe zur Ansicht',
     },
@@ -44,6 +38,7 @@ const messages = {
     zoomOutTooltip: 'Herauszoomen',
     pitchTooltip: 'Kameraneigung: {0}°',
     overviewMapTooltip: 'Übersichtskarte',
+    homeButton: 'Springe zur Startansicht',
   },
   categoryManager: {
     title: 'Komponenten',
@@ -80,6 +75,7 @@ const messages = {
   legend: {
     title: 'Legende',
     tooltip: 'Legende',
+    empty: 'Aktuell sind keine Legendeneinträge verfügbar.',
     openInNew: 'In neuem Browser Tab öffnen',
     defaultLabelText: 'Text',
   },

package/src/i18n/en.js

@@ -20,12 +20,6 @@ const messages = {
     infoAction: {
       title: 'Info',
     },
-    stateAction: {
-      titleInactive: 'Inactive',
-      titleActive: 'Active',
-      titleIndeterminate: 'Indetermine',
-      titleLoading: 'Loading',
-    },
     viewpointAction: {
       title: 'Go to viewpoint',
     },
@@ -44,6 +38,7 @@ const messages = {
     zoomOutTooltip: 'Zoom out',
     pitchTooltip: 'Camera pitch: {0}°',
     overviewMapTooltip: 'Overview Map',
+    homeButton: 'Go to starting view',
   },
   categoryManager: {
     title: 'Components',
@@ -80,6 +75,7 @@ const messages = {
   legend: {
     title: 'Legend',
     tooltip: 'Legend',
+    empty: 'Currently there are no legend entries available.',
     openInNew: 'Open in new tab',
     defaultLabelText: 'Text',
   },

package/src/legend/legendHelper.js

@@ -106,6 +106,7 @@ export function getImageSrcFromShape(image) {
  * @typedef {Object} LegendEntry
  * @property {string} key
  * @property {string} title - layer or entry name
+ * @property {boolean} [open=true] - panel state of entry
  * @property {Array<LegendItem>} legend - legend properties
  * @property {Array<VcsAction>} actions - popout actions
  */
@@ -130,7 +131,7 @@ export function createLayerLegendEntry(key, title, legend) {
       });
     }
   });
-  return { key, title, legend, actions };
+  return { key, title, legend, actions, open: true };
 }
 
 /**
@@ -174,8 +175,8 @@ export function getLegendEntries(app) {
       const legend = layer.style?.properties?.legend ?? layer.properties?.legend;
       if (legend) {
         const legendEntry = createLayerLegendEntry(key, title, legend);
-        // use spread since push won't trigger updates
-        entries.value = [...entries.value, legendEntry];
+        // use spread since push won't trigger updates. Put new entries at the start
+        entries.value = [legendEntry, ...entries.value];
       }
       if (layer.styleChanged) {
         styleChangedListener[layer.name] = layer.styleChanged.addEventListener(() => syncLayerLegendEntries(layer));

package/src/legend/vcsLegend.vue

@@ -1,16 +1,18 @@
 <template>
   <v-card
     class="overflow-y-auto"
-    max-height="500"
   >
     <v-expansion-panels
       accordion
       multiple
+      v-if="entries.length > 0"
+      v-model="panels"
     >
       <v-expansion-panel
         v-for="(entry,i) in entries"
         :key="i"
         class="pa-0 ma-0"
+        @change="entry.open = !entry.open"
       >
         <v-expansion-panel-header hide-actions>
           {{ $t(entry.title) }}
@@ -51,6 +53,9 @@
         </v-expansion-panel-content>
       </v-expansion-panel>
     </v-expansion-panels>
+    <v-sheet v-else class="ma-2">
+      {{ $t('legend.empty') }}
+    </v-sheet>
   </v-card>
 </template>
 
@@ -64,7 +69,9 @@
     VExpansionPanelContent,
     VIcon,
     VList,
+    VSheet,
   } from 'vuetify/lib';
+  import { computed } from 'vue';
   import { LegendType } from './legendHelper.js';
   import StyleLegendItem from './styleLegendItem.vue';
   import VcsTreeviewLeaf from '../components/lists/VcsTreeviewLeaf.vue';
@@ -72,6 +79,7 @@
   /**
    * @description A component rendering configured legend information for active layers.
    * @vue-prop {import("vue").Ref<Array<LegendEntry>>} entries - legend entries to be displayed
+   * @vue-computed {import("vue").ComputedRef<number[]>} panels - derives indices from entries array to define all panels as open
    */
   export default {
     name: 'VcsLegend',
@@ -85,6 +93,7 @@
       VExpansionPanelContent,
       VIcon,
       VList,
+      VSheet,
     },
     props: {
       entries: {
@@ -92,7 +101,7 @@
         required: true,
       },
     },
-    setup() {
+    setup(props) {
       /**
        * adapts the iframe height on load
        * @param {string} id - iframe's html id
@@ -102,9 +111,19 @@
         iframe.style.height = `${iframe.contentWindow.document.documentElement.scrollHeight}px`;
       };
 
+      /**
+       * Sets all entry panels open
+       * @type {import("vue").ComputedRef<number[]>}
+       */
+      const panels = computed(() => {
+        return [...Array(props.entries.length).keys()]
+          .filter((p, idx) => !!props.entries[idx].open);
+      });
+
       return {
         LegendType,
         setIframeHeight,
+        panels,
       };
     },
   };

package/src/manager/window/WindowComponent.vue

@@ -5,14 +5,18 @@
     @click="clicked"
     @dragstart="dragStart"
     @dragend="dragEnd"
-    :draggable="isDynamic"
+    :draggable="isDraggable"
     :class="{
       'rounded': !isDocked,
-      'marginToTop': isDocked
+      'marginToTop': isDocked,
+      'rounded-br': isDynamicLeft,
+      'rounded-bl': isDynamicRight,
     }"
   >
     <div
       v-if="!windowState.hideHeader"
+      @mousedown="mousedown"
+      @mouseup="isDraggable = false"
       class="pa-2"
       :class="{
         'cursor-grab': isDynamic,
@@ -23,7 +27,7 @@
     </div>
     <v-divider />
     <div
-      class="overflow-x-hidden"
+      class="overflow-x-hidden mb-1"
     >
       <slot />
     </div>
@@ -40,7 +44,7 @@
 
 <script>
   import {
-    computed, inject, provide,
+    computed, inject, provide, ref,
   } from 'vue';
   import { VDivider, VSheet } from 'vuetify/lib';
   import { WindowSlot } from './windowManager.js';
@@ -86,12 +90,30 @@
 
       const isDynamic = computed(() => props.slotWindow !== WindowSlot.STATIC);
       const isDocked = computed(() => props.slotWindow !== WindowSlot.DETACHED);
+      const isDockedLeft = computed(() => {
+        return props.slotWindow === WindowSlot.STATIC || props.slotWindow === WindowSlot.DYNAMIC_LEFT;
+      });
+      const isDockedRight = computed(() => props.slotWindow === WindowSlot.DYNAMIC_RIGHT);
+      const isDraggable = ref(false);
       /**
        * @param {PointerEvent} e
        */
       const clicked = (e) => {
         emit('click', e);
       };
+      /**
+       * Sets window as draggable on mousedown on header.
+       * Stops bubbling of header action buttons.
+       * @param {MouseEvent} e
+       */
+      const mousedown = (e) => {
+        if (e.target.closest('button')) {
+          e.preventDefault();
+          e.stopPropagation();
+          return;
+        }
+        isDraggable.value = isDynamic.value;
+      };
       /**
        * @type {DragEvent}
        */
@@ -100,7 +122,16 @@
        * @param {DragEvent} e
        */
       const dragStart = (e) => {
+        if (!isDraggable.value) {
+          e.preventDefault();
+          e.stopPropagation();
+        }
         startEvent = e;
+        // set mouse cursor to move
+        e.dataTransfer.effectAllowed = 'move';
+        const preventDefaultDragover = dragOverEvent => dragOverEvent.preventDefault();
+        e.target.parentElement.ondragover = preventDefaultDragover;
+        app.maps.target.ondragover = preventDefaultDragover;
       };
       /**
        * @param {DragEvent} endEvent
@@ -112,14 +143,21 @@
         };
         emit('moved', movement);
         startEvent = null;
+        isDraggable.value = false;
+        endEvent.target.parentElement.ondragover = null;
+        app.maps.target.ondragover = null;
       };
 
       return {
         isDynamic,
         isDocked,
+        isDynamicLeft: isDockedLeft,
+        isDynamicRight: isDockedRight,
+        isDraggable,
         clicked,
         dragStart,
         dragEnd,
+        mousedown,
       };
     },
   };

package/src/manager/window/WindowComponentHeader.vue

@@ -18,7 +18,7 @@
       <template v-if="windowState.headerActions?.length > 0">
         <VcsActionButtonList
           :actions="windowState.headerActions"
-          :overflow-count="windowState.headerActionsOverflowCount ?? 3"
+          :overflow-count="windowState.headerActionsOverflow ?? 3"
           small
         />
         <v-divider

package/src/manager/window/windowHelper.js

@@ -70,7 +70,7 @@ export function getWindowPositionOptions(x, y, target, alignment = WindowAlignme
 
 /**
  * Get window position options based on a pixel in the map
- * @param {import("@vcmap/cesium").Cartesian2} windowPosition - the window position, as retrieved from an InteractionEvent
+ * @param {import("@vcmap-cesium/engine").Cartesian2} windowPosition - the window position, as retrieved from an InteractionEvent
  * @param {HTMLElement} target - the map's target { @link @import("@vcmap/core").MapCollection }
  * @param {WindowAlignment} [alignment]
  * @returns {WindowPositionOptions}
@@ -121,7 +121,7 @@ export function getFittedWindowPositionOptions(x, y, width, height, target) {
 /**
  * Fits a window aligned top left, so it fits into currently active map. This will change the alignment to be bottom or right depending
  * on if the window would not fit into active map element.
- * @param {import("@vcmap/cesium").Cartesian2} windowPosition - the window position, as retrieved from an InteractionEvent
+ * @param {import("@vcmap-cesium/engine").Cartesian2} windowPosition - the window position, as retrieved from an InteractionEvent
  * @param {number} width
  * @param {number} height
  * @param {HTMLElement} target - the map's target { @link @import("@vcmap/core").MapCollection }
@@ -251,15 +251,6 @@ export function moveWindow(id, translation, windowManager, targetSize) {
   if (windowPositionOptions.right !== undefined) {
     windowPositionOptions.right -= translation.dx;
   }
-  // clear size restrictions
-  if (position.maxHeight === WindowPositions.TOP_RIGHT.maxHeight &&
-    slot.value === WindowSlot.DYNAMIC_RIGHT) {
-    windowPositionOptions.maxHeight = 'unset';
-  }
-  if (position.maxWidth === WindowPositions.TOP_LEFT.maxWidth &&
-    slot.value === WindowSlot.DYNAMIC_LEFT) {
-    windowPositionOptions.maxWidth = 'unset';
-  }
   const updatedPosition = updateWindowPosition(position, windowPositionOptions, targetSize);
   windowManager.setWindowPositionOptions(id, updatedPosition);
 }
@@ -320,6 +311,11 @@ export function clipToTargetSize(windowPositionOptions, targetSize) {
   if (windowPositionOptions.maxHeight !== undefined) {
     clippedPosition.maxHeight = Math.min(windowPositionOptions.maxHeight, targetHeight);
   }
+  // max width of a top left 2 window (active static window)
+  const topLeft2 = posToNumber(WindowPositions.TOP_LEFT2.left, 'left', targetSize);
+  if (clippedPosition.left === topLeft2) {
+    clippedPosition.maxWidth = Math.min(clippedPosition.maxWidth - topLeft2, targetWidth);
+  }
 
   return clippedPosition;
 }

package/src/manager/window/windowManager.js

@@ -62,16 +62,14 @@ export const WindowPositions = {
   TOP_LEFT: {
     left: '0px',
     top: '0px',
-    maxWidth: '320px',
   },
   TOP_LEFT2: {
-    left: '320px',
+    left: '322px', // 2px space
     top: '0px',
   },
   TOP_RIGHT: {
     right: '0px',
     top: '0px',
-    maxHeight: '70%',
   },
   DETACHED: {
     left: '200px',
@@ -120,7 +118,7 @@ export function isSlotPosition(windowPosition) {
  * @property {string} [headerTitle]
  * @property {string} [headerIcon]
  * @property {Array<VcsAction>} [headerActions]
- * @property {number} [headerActionsOverflowCount]
+ * @property {number} [headerActionsOverflow]
  * @property {string} [infoUrl] An optional url referencing help or further information on the window's content.
  * @property {boolean} [dockable] Auto derived from hidePin, current slot, current position and initial position.
  * @property {Object<string, string>} [styles] Can be used to add additional styles to the root WindowComponent. Use Vue Style Bindings Object Syntax https://vuejs.org/v2/guide/class-and-style.html
@@ -206,7 +204,7 @@ export function windowPositionFromOptions(windowPositionOptions, windowPosition
 /**
  * Sets a position on a component. Updates dockable state.
  * @param {WindowComponent} windowComponent
- * @param {WindowComponentOptions} windowPositionOptions
+ * @param {WindowPositionOptions} windowPositionOptions
  */
 function setWindowPosition(windowComponent, windowPositionOptions) {
   const windowPosition = windowPositionFromOptions(windowPositionOptions, windowComponent.position);
@@ -309,9 +307,15 @@ class WindowManager {
       const staticWindow = this._findWindowBySlot(WindowSlot.STATIC);
       const dynamicWindowLeft = this._findWindowBySlot(WindowSlot.DYNAMIC_LEFT);
       if (staticWindow && dynamicWindowLeft) {
-        this.setWindowPositionOptions(dynamicWindowLeft.id, WindowPositions.TOP_LEFT2);
+        this.setWindowPositionOptions(
+          dynamicWindowLeft.id,
+          { ...dynamicWindowLeft.position, ...WindowPositions.TOP_LEFT2 },
+        );
       } else if (!staticWindow && dynamicWindowLeft) {
-        this.setWindowPositionOptions(dynamicWindowLeft.id, WindowPositions.TOP_LEFT);
+        this.setWindowPositionOptions(
+          dynamicWindowLeft.id,
+          { ...dynamicWindowLeft.position, ...WindowPositions.TOP_LEFT },
+        );
       }
     }
   }
@@ -333,18 +337,18 @@ class WindowManager {
    */
   _getPositionOptionsForSlot(slot, position) {
     if (slot === WindowSlot.STATIC) {
-      return WindowPositions.TOP_LEFT;
+      return { ...WindowPositions.TOP_LEFT, maxWidth: '320px' };
     }
     if (slot === WindowSlot.DYNAMIC_LEFT) {
       const windowAtStatic = this._findWindowBySlot(WindowSlot.STATIC);
       if (windowAtStatic) {
-        return WindowPositions.TOP_LEFT2;
+        return { ...position, ...WindowPositions.TOP_LEFT2 };
       } else {
-        return WindowPositions.TOP_LEFT;
+        return { ...position, ...WindowPositions.TOP_LEFT };
       }
     }
     if (slot === WindowSlot.DYNAMIC_RIGHT) {
-      return WindowPositions.TOP_RIGHT;
+      return { ...position, ...WindowPositions.TOP_RIGHT };
     }
     return position || WindowPositions.DETACHED;
   }

package/src/navigation/mapNavCompass.vue

@@ -8,7 +8,7 @@
         d="M4,0,8,13H0Z"
         transform="translate(1)"
         fill="currentColor"
-        @click="emit(0)"
+        @click="emit($event, 0)"
       />
       <path
         :class="canEmit ? 'cursor-pointer' : ''"
@@ -17,7 +17,7 @@
         d="M4,0,8,13H0Z"
         transform="translate(9 58) rotate(180)"
         fill="rgba(88,88,88,0.51)"
-        @click="emit(180)"
+        @click="emit($event, 180)"
       />
     </g>
     <g id="Group_1653" data-name="Group 1653" transform="translate(0 33) rotate(-90)">
@@ -27,7 +27,7 @@
         data-name="Polygon 14"
         d="M4,0,8,13H0Z"
         fill="rgba(88,88,88,0.51)"
-        @click="emit(270)"
+        @click="emit($event, 270)"
       />
       <path
         :class="canEmit ? 'cursor-pointer' : ''"
@@ -36,7 +36,7 @@
         d="M4,0,8,13H0Z"
         transform="translate(8 58) rotate(180)"
         fill="rgba(88,88,88,0.51)"
-        @click="emit(90)"
+        @click="emit($event, 90)"
       />
     </g>
     <g id="Group_1672" data-name="Group 1672" transform="translate(1)" v-if="!hideTicks">
@@ -143,19 +143,25 @@
       },
     },
     methods: {
-      emit(event) {
+      emit(event, dir) {
         if (this.canEmit) {
-          this.$emit('direction-click', event);
+          event.preventDefault();
+          event.stopPropagation();
+          this.$emit('direction-click', dir);
         }
       },
     },
   };
 </script>
 
-<style scoped>
+<style lang="scss" scoped>
   svg {
     width: 85%;
     height: 85%;
     margin: 7.5%;
   }
+
+  svg path:hover {
+    fill: var(--v-base-lighten5) !important;
+  }
 </style>