@vcmap/ui 6.0.14 → 6.1.0-rc.2

package/src/callback/removeModuleCallback.d.ts

@@ -0,0 +1,29 @@
+export default RemoveModuleCallback;
+export type RemoveModuleCallbackOptions = import("./vcsCallback.js").VcsCallbackOptions & {
+    moduleId: string;
+};
+/**
+ * @typedef {import("./vcsCallback.js").VcsCallbackOptions & { moduleId: string }} RemoveModuleCallbackOptions
+ * @property {string} moduleId - id of module to be removed
+ */
+/**
+ * @class
+ * @extends {VcsCallback}
+ */
+declare class RemoveModuleCallback extends VcsCallback {
+    /**
+     * @param {RemoveModuleCallbackOptions} options
+     * @param {import("@src/vcsUiApp.js").default} app
+     */
+    constructor(options: RemoveModuleCallbackOptions, app: import("@src/vcsUiApp.js").default);
+    /**
+     * @type {string}
+     * @private
+     */
+    private _moduleId;
+    /**
+     * @returns {RemoveModuleCallbackOptions}
+     */
+    toJSON(): RemoveModuleCallbackOptions;
+}
+import VcsCallback from './vcsCallback.js';

package/src/callback/removeModuleCallback.js

@@ -0,0 +1,53 @@
+import VcsCallback, { callbackClassRegistry } from './vcsCallback.js';
+
+/**
+ * @typedef {import("./vcsCallback.js").VcsCallbackOptions & { moduleId: string }} RemoveModuleCallbackOptions
+ * @property {string} moduleId - id of module to be removed
+ */
+
+/**
+ * @class
+ * @extends {VcsCallback}
+ */
+class RemoveModuleCallback extends VcsCallback {
+  /**
+   * @type {string}
+   */
+  static get className() {
+    return 'RemoveModuleCallback';
+  }
+
+  /**
+   * @param {RemoveModuleCallbackOptions} options
+   * @param {import("@src/vcsUiApp.js").default} app
+   */
+  constructor(options, app) {
+    super(options, app);
+    /**
+     * @type {string}
+     * @private
+     */
+    this._moduleId = options.moduleId;
+  }
+
+  callback() {
+    if (this._app.getModuleById(this._moduleId)) {
+      this._app.removeModule(this._moduleId);
+    }
+  }
+
+  /**
+   * @returns {RemoveModuleCallbackOptions}
+   */
+  toJSON() {
+    const config = super.toJSON();
+    config.moduleId = this._moduleId;
+    return config;
+  }
+}
+
+export default RemoveModuleCallback;
+callbackClassRegistry.registerClass(
+  RemoveModuleCallback.className,
+  RemoveModuleCallback,
+);

package/src/callback/startRotationCallback.d.ts

@@ -0,0 +1,37 @@
+export default StartRotationCallback;
+export type StartRotationOptions = import("./vcsCallback.js").VcsCallbackOptions & {
+    viewpoint: string;
+    timePerRotation: number;
+};
+/**
+ * @typedef {import("./vcsCallback.js").VcsCallbackOptions & { viewpoint: string, timePerRotation: number }} StartRotationOptions
+ * @property {string?} viewpoint - name of the viewpoint
+ * @property {number?} timePerRotation - time in seconds for a full rotation
+ */
+/**
+ * @class
+ * @extends {VcsCallback}
+ */
+declare class StartRotationCallback extends VcsCallback {
+    /**
+     * @param {StartRotationOptions} options
+     * @param {import("@src/vcsUiApp.js").default} app
+     */
+    constructor(options: StartRotationOptions, app: import("@src/vcsUiApp.js").default);
+    /**
+     * @type {string | undefined}
+     * @private
+     */
+    private _viewpoint;
+    /**
+     * @type {number | undefined}
+     * @private
+     */
+    private _timePerRotation;
+    callback(): Promise<void>;
+    /**
+     * @returns {StartRotationOptions}
+     */
+    toJSON(): StartRotationOptions;
+}
+import VcsCallback from './vcsCallback.js';

package/src/callback/startRotationCallback.js

@@ -0,0 +1,67 @@
+import { CesiumMap, startRotation } from '@vcmap/core';
+import VcsCallback, { callbackClassRegistry } from './vcsCallback.js';
+
+/**
+ * @typedef {import("./vcsCallback.js").VcsCallbackOptions & { viewpoint: string, timePerRotation: number }} StartRotationOptions
+ * @property {string?} viewpoint - name of the viewpoint
+ * @property {number?} timePerRotation - time in seconds for a full rotation
+ */
+
+/**
+ * @class
+ * @extends {VcsCallback}
+ */
+class StartRotationCallback extends VcsCallback {
+  /**
+   * @type {string}
+   */
+  static get className() {
+    return 'StartRotationCallback';
+  }
+
+  /**
+   * @param {StartRotationOptions} options
+   * @param {import("@src/vcsUiApp.js").default} app
+   */
+  constructor(options, app) {
+    super(options, app);
+    /**
+     * @type {string | undefined}
+     * @private
+     */
+    this._viewpoint = options.viewpoint;
+    /**
+     * @type {number | undefined}
+     * @private
+     */
+    this._timePerRotation = options.timePerRotation;
+  }
+
+  async callback() {
+    const vp = this._app.viewpoints.getByKey(this._viewpoint);
+    const speed = this._timePerRotation;
+    if (this._app.maps.activeMap instanceof CesiumMap) {
+      await startRotation(this._app, vp, speed);
+    }
+  }
+
+  /**
+   * @returns {StartRotationOptions}
+   */
+  toJSON() {
+    const config = super.toJSON();
+    if (this._viewpoint) {
+      config.viewpoint = this._viewpoint;
+    }
+    if (this._timePerRotation) {
+      config.timePerRotation = this._timePerRotation;
+    }
+    return config;
+  }
+}
+
+export default StartRotationCallback;
+callbackClassRegistry.registerClass(
+  StartRotationCallback.className,
+  StartRotationCallback,
+);

package/src/callback/stopRotationCallback.d.ts

@@ -0,0 +1,8 @@
+export default StopRotationCallback;
+/**
+ * @class
+ * @extends {VcsCallback}
+ */
+declare class StopRotationCallback extends VcsCallback {
+}
+import VcsCallback from './vcsCallback.js';

package/src/callback/stopRotationCallback.js

@@ -0,0 +1,37 @@
+import { rotationMapControlSymbol } from '@vcmap/core';
+import VcsCallback, { callbackClassRegistry } from './vcsCallback.js';
+
+/**
+ * @class
+ * @extends {VcsCallback}
+ */
+class StopRotationCallback extends VcsCallback {
+  /**
+   * @type {string}
+   */
+  static get className() {
+    return 'StopRotationCallback';
+  }
+
+  // eslint-disable-next-line class-methods-use-this
+  callback() {
+    if (this._app.maps.exclusiveMapControlsId === rotationMapControlSymbol) {
+      this._app.maps.resetExclusiveMapControls();
+    }
+  }
+
+  /**
+   * @returns {import('./vcsCallback.js').VcsCallbackOptions}
+   */
+  toJSON() {
+    return super.toJSON();
+  }
+}
+
+export default StopRotationCallback;
+
+// Register the class
+callbackClassRegistry.registerClass(
+  StopRotationCallback.className,
+  StopRotationCallback,
+);

package/src/components/buttons/VcsActionButtonList.vue

@@ -38,12 +38,14 @@
       </template>
       <VcsActionList :actions="overflowButtons" :disabled="disabled" />
     </v-menu>
-    <v-spacer
-      v-else-if="blockOverflow"
-      class="flex-grow-0 d-inline-block px-2"
-    />
+    <v-spacer v-else-if="blockOverflow" />
   </div>
 </template>
+<style scoped lang="scss">
+  :deep(.v-spacer) {
+    width: calc(var(--v-vcs-font-size) * 1.25);
+  }
+</style>
 <script>
   import { VIcon, VMenu, VSpacer } from 'vuetify/components';
   import VcsButton from './VcsButton.vue';

package/src/components/buttons/VcsToolButton.vue

@@ -82,7 +82,6 @@
    * @vue-prop {string}                                 icon - When given, will display an icon in the button. Replaces vuetify icon property.
    * @vue-prop {string}                                 tooltip - Text content of a tooltip which appears on hover with default delay.
    * @vue-prop {('bottom' | 'left' | 'top' | 'right')}  tooltipPosition - Position of the tooltip.
-   * @vue-prop {Object<string, any>}                    tooltipProps - Properties to be passed to the tooltip {@link https://vuetifyjs.com/en/api/v-tooltip/#props|vuetify v-tooltip}
    * @vue-computed {string}                             appliedColor - color applied to button, depending on size and state
    * @vue-computed {boolean}                            hasDefaultSlot
    */

package/src/components/form-inputs-controls/VcsDatePicker.vue

@@ -18,7 +18,8 @@
         v-model="localValue"
         hide-header
         @update:model-value="menuOpen = false"
-        color="primary"
+        :color="datePickerProps.color ?? 'primary'"
+        v-bind="{ ...datePickerProps }"
       >
         <template #actions>
           <v-btn color="primary" @click="goToToday">
@@ -40,6 +41,7 @@
    * @description stylized wrapper around {@link https://vuetifyjs.com/en/components/date-pickers/#internationalization}.
    * @vue-prop {Date} modelValue - value of the date picker as a Date (changes to the Date Object are not tracked, handled as atomic value)
    * @vue-prop {string} [icon] - specify optional prepend icon, defaults to mdi-calendar
+   * @vue-prop {Object} [datePickerProps] - props that are passed to the {@link https://vuetifyjs.com/en/api/v-date-picker/ | VDatePicker}
    */
   export default {
     name: 'VcsDatePicker',
@@ -52,6 +54,10 @@
         type: String,
         default: 'mdi-calendar',
       },
+      datePickerProps: {
+        type: Object,
+        default: () => ({}),
+      },
     },
     components: {
       VMenu,

package/src/components/form-inputs-controls/VcsDatePicker.vue.d.ts

@@ -7,6 +7,10 @@ declare const _default: import("vue").DefineComponent<{
         type: StringConstructor;
         default: string;
     };
+    datePickerProps: {
+        type: ObjectConstructor;
+        default: () => {};
+    };
 }, {
     formattedDate: import("vue").WritableComputedRef<string>;
     localValue: import("vue").WritableComputedRef<Date>;
@@ -22,10 +26,15 @@ declare const _default: import("vue").DefineComponent<{
         type: StringConstructor;
         default: string;
     };
+    datePickerProps: {
+        type: ObjectConstructor;
+        default: () => {};
+    };
 }>> & {
     "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
 }, {
     icon: string;
     modelValue: Date;
+    datePickerProps: Record<string, any>;
 }, {}>;
 export default _default;

package/src/components/form-inputs-controls/VcsTextArea.vue

@@ -110,7 +110,7 @@
   // Not color, just used if label is given
   :deep(.v-field--focused:not(.v-field--error) .v-field__outline *::after) {
     border-color: rgb(var(--v-theme-primary));
-    border-width: 1px !important;
+    border-width: 0 0 1px !important;
   }
 
   // remove margin from prepended Icon

package/src/components/icons/+all.js

@@ -110,6 +110,7 @@ import ViewshedConeIcon from './ViewshedConeIcon.vue';
 import WalkingIcon from './WalkingIcon.vue';
 import WallIcon from './WallIcon.vue';
 import WandIcon from './WandIcon.vue';
+import View360Icon from './View360Icon.vue';
 
 // * // IconMap.boundingBox
 // * <v-icon size="16" v-text="'$vcsBoundingBox'" />
@@ -459,6 +460,9 @@ const IconMap = {
   viewshed360: {
     component: Viewshed360Icon,
   },
+  view360: {
+    component: View360Icon,
+  },
   viewshedCone: {
     component: ViewshedConeIcon,
   },

package/src/components/icons/View360Icon.vue

@@ -0,0 +1,55 @@
+<!-- eslint-disable max-len -->
+
+<template>
+  <svg
+    id="Ebene_1"
+    data-name="Ebene 1"
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="46 75 301 268"
+  >
+    <path
+      d="M302.18,95.55c0-5.63,1.98-10.41,5.94-14.35,3.96-3.94,8.73-5.9,14.31-5.9s10.36,1.98,14.31,5.93c3.96,3.96,5.93,8.73,5.93,14.31s-1.98,10.36-5.93,14.31c-3.96,3.96-8.73,5.93-14.31,5.93s-10.36-1.98-14.31-5.93c-3.96-3.96-5.94-8.73-5.94-14.31ZM312.72,95.55c0,2.67.95,4.95,2.86,6.86s4.19,2.86,6.86,2.86,4.95-.95,6.86-2.86,2.86-4.19,2.86-6.86-.95-4.95-2.86-6.86-4.19-2.86-6.86-2.86-4.95.95-6.86,2.86-2.86,4.19-2.86,6.86Z"
+      style="fill: currentColor; stroke-width: 0px"
+    />
+    <path
+      d="M68.99,176.62s-17.77,19.47-7.44,43.07c10.78,23.59,58.52,59.55,147.63,57.9"
+      style="
+        fill: none;
+        stroke: currentColor;
+        stroke-miterlimit: 10;
+        stroke-width: 24px;
+      "
+    />
+    <path
+      d="M88.05,150.42l18.59-2.26c.59,4.74,2.19,8.36,4.79,10.87,2.6,2.51,5.74,3.76,9.43,3.76,3.96,0,7.3-1.5,10.01-4.51,2.71-3.01,4.07-7.06,4.07-12.17,0-4.83-1.3-8.66-3.9-11.48-2.6-2.83-5.77-4.24-9.5-4.24-2.46,0-5.4.48-8.82,1.44l2.12-15.65c5.2.14,9.16-.99,11.89-3.38s4.1-5.57,4.1-9.54c0-3.37-1-6.06-3.01-8.07-2.01-2-4.67-3.01-8-3.01s-6.08,1.14-8.41,3.42c-2.32,2.28-3.74,5.61-4.24,9.98l-17.71-3.01c1.23-6.06,3.09-10.9,5.57-14.53,2.48-3.62,5.95-6.47,10.39-8.54,4.44-2.07,9.42-3.11,14.94-3.11,9.43,0,17,3.01,22.7,9.02,4.69,4.92,7.04,10.48,7.04,16.68,0,8.8-4.81,15.81-14.42,21.05,5.74,1.23,10.33,3.99,13.77,8.27,3.44,4.28,5.16,9.46,5.16,15.52,0,8.8-3.21,16.29-9.64,22.49-6.43,6.2-14.42,9.3-23.99,9.3-9.07,0-16.59-2.61-22.56-7.83-5.97-5.22-9.43-12.04-10.39-20.47Z"
+      style="fill: currentColor; stroke-width: 0px"
+    />
+    <path
+      d="M227.48,101.33l-18.59,2.05c-.46-3.83-1.64-6.65-3.55-8.48-1.91-1.82-4.4-2.73-7.45-2.73-4.06,0-7.49,1.82-10.29,5.47-2.8,3.65-4.57,11.23-5.3,22.76,4.79-5.65,10.73-8.48,17.84-8.48,8.02,0,14.89,3.05,20.61,9.16,5.72,6.11,8.58,13.99,8.58,23.65,0,10.25-3.01,18.48-9.02,24.68-6.02,6.2-13.74,9.3-23.17,9.3-10.12,0-18.43-3.93-24.95-11.79-6.52-7.86-9.78-20.75-9.78-38.66s3.39-31.6,10.19-39.72c6.79-8.11,15.61-12.17,26.46-12.17,7.61,0,13.91,2.13,18.9,6.39,4.99,4.26,8.17,10.45,9.54,18.56ZM183.93,143.24c0,6.24,1.44,11.06,4.31,14.46,2.87,3.4,6.15,5.09,9.84,5.09s6.52-1.39,8.89-4.17c2.37-2.78,3.55-7.34,3.55-13.67s-1.28-11.29-3.83-14.32c-2.55-3.03-5.74-4.55-9.57-4.55s-6.81,1.45-9.37,4.34c-2.55,2.89-3.83,7.17-3.83,12.82Z"
+      style="fill: currentColor; stroke-width: 0px"
+    />
+    <path
+      d="M268.53,76.38c9.71,0,17.29,3.46,22.76,10.39,6.52,8.2,9.78,21.81,9.78,40.81s-3.28,32.58-9.84,40.88c-5.42,6.84-12.99,10.25-22.7,10.25s-17.61-3.75-23.58-11.24c-5.97-7.5-8.96-20.86-8.96-40.09s3.28-32.45,9.84-40.74c5.42-6.84,12.99-10.25,22.7-10.25ZM268.53,92.31c-2.32,0-4.4.74-6.22,2.22-1.82,1.48-3.24,4.14-4.24,7.96-1.32,4.97-1.98,13.33-1.98,25.09s.59,19.84,1.78,24.23c1.18,4.4,2.68,7.33,4.48,8.78,1.8,1.46,3.86,2.19,6.19,2.19s4.4-.74,6.22-2.22c1.82-1.48,3.24-4.14,4.24-7.96,1.32-4.92,1.98-13.26,1.98-25.02s-.59-19.83-1.78-24.23c-1.19-4.4-2.68-7.34-4.48-8.82-1.8-1.48-3.86-2.22-6.19-2.22Z"
+      style="fill: currentColor; stroke-width: 0px"
+    />
+    <polyline
+      points="167.32 222.17 212.66 279.35 161.89 325.7"
+      style="
+        fill: none;
+        stroke: currentColor;
+        stroke-linecap: square;
+        stroke-miterlimit: 10;
+        stroke-width: 24px;
+      "
+    />
+    <path
+      d="M323.31,175.13s18.39,18.8,8.83,42.77c-7.13,17.07-32.78,41.11-79.15,54.13"
+      style="
+        fill: none;
+        stroke: currentColor;
+        stroke-miterlimit: 10;
+        stroke-width: 24px;
+      "
+    />
+  </svg>
+</template>

package/src/components/icons/View360Icon.vue.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{}>>, {}, {}>;
+export default _default;

package/src/components/import/VcsImportComponent.vue

@@ -12,6 +12,7 @@
       v-bind="noListenerAttrs"
       v-model="files"
     />
+    <slot />
     <div class="d-flex justify-end gc-1 mx-3 pt-2 pb-1">
       <vcs-form-button
         variant="filled"
@@ -41,6 +42,7 @@
    * @vue-prop {function(Array<File>):boolean} importFiles - the callback to
    * @vue-prop {string[]} [fileTypes=[]] - accepted file types, see https://html.spec.whatwg.org/multipage/input.html#attr-input-accept
    * @vue-prop {boolean} [multiple=true] - allows or disallows importing multiple files at once
+   * @vue-data {#default} - Slot to add additional html after file input and before the buttons
    */
   export default {
     name: 'VcsImportComponent',

package/src/components/lists/VcsList.vue

@@ -85,7 +85,6 @@
   import {
     computed,
     getCurrentInstance,
-    inject,
     isReactive,
     reactive,
     ref,
@@ -169,7 +168,8 @@
    * @vue-prop {boolean} [selectable=false]
    * @vue-prop {boolean} [singleSelect=false]
    * @vue-prop {Array<import("./VcsListItemComponent.vue").VcsListItem>} [value=[]] - the initial items to be selected.
-   * @vue-prop {boolean} [searchable=false] - if this list can have its items searched. you can provide your own predicate function by providing "filterPredicate" which is of type function(import("./VcsListItemComponent.vue").VcsListItem, string):boolean
+   * @vue-prop {boolean} [searchable=false] - if this list can have its items searched.
+   * @vue-prop {function(import("./VcsListItemComponent.vue").VcsListItem, string):boolean} [customFilter] - a function to customize filtering when searching.
    * @vue-prop {string} [searchbarPlaceholder] - placeholder to render inside the search field
    * @vue-prop {boolean} [showTitle=true] - show the title component
    * @vue-prop {number} [actionButtonListOverflowCount] - overflow count to use for action lists in the title and items
@@ -221,6 +221,10 @@
         type: Boolean,
         default: false,
       },
+      customFilter: {
+        type: Function,
+        default: undefined,
+      },
       searchbarPlaceholder: {
         type: String,
         default: undefined,
@@ -313,15 +317,15 @@
 
       const vm = getCurrentInstance().proxy;
       /** @type {function(import("./VcsListItemComponent.vue").VcsListItem, string):boolean} */
-      const filterPredicate = inject(
-        'filterPredicate',
-        (item, queryString = '') => {
-          const translatedTitle = vm.$st(item.title);
-          return translatedTitle
-            .toLocaleLowerCase()
-            .includes(queryString.toLocaleLowerCase());
-        },
-      );
+      const filterPredicate = (item, queryString = '') => {
+        if (props.customFilter) {
+          return props.customFilter(item, queryString);
+        }
+        const translatedTitle = vm.$st(item.title);
+        return translatedTitle
+          .toLocaleLowerCase()
+          .includes(queryString.toLocaleLowerCase());
+      };
 
       /**
        * @type {import("./VcsListItemComponent.vue").VcsListItem|null}

package/src/components/lists/VcsList.vue.d.ts

@@ -30,6 +30,10 @@ declare const _default: import("vue").DefineComponent<{
         type: BooleanConstructor;
         default: boolean;
     };
+    customFilter: {
+        type: FunctionConstructor;
+        default: undefined;
+    };
     searchbarPlaceholder: {
         type: StringConstructor;
         default: undefined;
@@ -119,6 +123,10 @@ declare const _default: import("vue").DefineComponent<{
         type: BooleanConstructor;
         default: boolean;
     };
+    customFilter: {
+        type: FunctionConstructor;
+        default: undefined;
+    };
     searchbarPlaceholder: {
         type: StringConstructor;
         default: undefined;
@@ -160,6 +168,7 @@ declare const _default: import("vue").DefineComponent<{
     tooltip: string;
     selectable: boolean;
     actions: unknown[];
+    customFilter: Function;
     searchbarPlaceholder: string;
     actionButtonListOverflowCount: number;
     singleSelect: boolean;