@vcmap/ui 6.0.12 → 6.1.0-rc.1

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/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/lists/VcsTreeNode.vue

@@ -0,0 +1,237 @@
+<template>
+  <div class="vcs-tree-node" v-if="matchFilter">
+    <v-row
+      no-gutters
+      class="treenode flex-nowrap text-truncate"
+      :class="`level-${level} ${children.length ? 'group' : 'item'}`"
+    >
+      <VBtn
+        v-if="children.length"
+        class="chevron-btn"
+        variant="text"
+        :icon="isOpen ? 'mdi-chevron-down' : 'mdi-chevron-right'"
+        @click="isOpen = !isOpen"
+      />
+      <slot name="prepend" v-bind="{ item }">
+        <span class="prepend">
+          <div v-if="item.icon">
+            <v-icon v-if="typeof item?.icon === 'string'" :size="iconSize">
+              {{ item.icon }}
+            </v-icon>
+            <ImageElementInjector :element="item.icon" v-else />
+          </div>
+        </span>
+      </slot>
+      <slot name="title" v-bind="{ item }">
+        <VcsTreeviewTitle
+          :item="item"
+          :cursor-pointer="item.clickable || (openOnClick && !!children.length)"
+          @click="(event) => $emit('click', item, event)"
+        />
+      </slot>
+      <slot name="append" v-bind="{ item }">
+        <VcsActionButtonList
+          v-if="item.actions?.length > 0"
+          :actions="item.actions"
+          :overflow-count="3"
+          :disabled="item.disabled"
+          right
+          tooltip-position="right"
+          block-overflow
+          class="col-4 pa-0 ml-auto pr-4"
+        />
+      </slot>
+    </v-row>
+    <v-expand-transition>
+      <div v-if="isOpen && children.length" class="children">
+        <VcsTreeNode
+          v-for="child in children"
+          :key="child.name"
+          :item="child"
+          :search="search"
+          :level="level + 1"
+          :open-on-click="openOnClick"
+          :item-children="itemChildren"
+          :opened="opened"
+          @item-toggled="bubbleItemToggled(child, e)"
+          @click="bubbleItemClicked"
+        >
+          <template v-for="slot of forwardSlots" #[slot]="scope">
+            <slot :name="slot" v-bind="scope ?? {}" />
+          </template>
+        </VcsTreeNode>
+      </div>
+    </v-expand-transition>
+  </div>
+</template>
+
+<script>
+  import { computed, getCurrentInstance } from 'vue';
+  import { VBtn, VExpandTransition, VIcon, VRow } from 'vuetify/components';
+  import { useIconSize } from '../../vuePlugins/vuetify.js';
+  import { getForwardSlots } from '../composables.js';
+  import ImageElementInjector from '../ImageElementInjector.vue';
+  import VcsActionButtonList from '../buttons/VcsActionButtonList.vue';
+  import VcsTreeviewTitle from './VcsTreeviewTitle.vue';
+
+  /**
+   * @typedef {Object} VcsTreeNodeItem
+   * @property {string} name
+   * @property {string} [title] - An optional translatable title.
+   * @property {string} [tooltip]
+   * @property {boolean} [clickable] - Whether this item reacts to click events.
+   * @property {boolean} [disabled] - Whether this item should be displayed as disabled.
+   * @property {Array<import("../../actions/actionHelper.js").VcsAction>} [actions]
+   * @property {Array<VcsTreeNodeItem>} [children] - An optional array of children. Can be binded to another key, using the `item-children` attributes of the VcsTreeview component.
+   * @property {string|HTMLCanvasElement|HTMLImageElement|undefined} [icon] - An optional icon to display with this item. Can be a URL or HTMLElement.
+   * @property {function(string):void} [clicked] - A callback called when the item is clicked.
+   */
+
+  /**
+   * @description
+   *  A recursive component to render a treenode and its children.
+   * Exposes the `prepend`, `title` and `append` slots for customization.
+   * Emits `itemToggled` and `click` events.
+   * @vue-prop {VcsTreeNodeItem} item - The item to render.
+   * @vue-prop {Array<string>} opened - Names of the opened items.
+   * @vue-prop {number} [level=0] - The level of the item
+   * @vue-prop {string} [itemChildren='children'] - The property key of the children.
+   * @vue-prop {boolean} [openOnClick=false] - Whether to open items on title click..
+   * @vue-prop {string} [search] - The search string to filter the tree.
+   * @vue-data {slot} [#prepend] - A slot prepended to the item, binding the item. Default fallback renders an image.
+   * @vue-data {slot} [#title] - A slot to render the item title, binding the item. Default fallback renders a translatable title using the VcsTreeviewTitle component.
+   * @vue-data {slot} [#append] - A slot appended to the item, binding the item. Default fallback renders the VcsActionButtonList if the item has an array of Actions.
+   */
+  export default {
+    name: 'VcsTreeNode',
+    components: {
+      ImageElementInjector,
+      VBtn,
+      VExpandTransition,
+      VIcon,
+      VRow,
+      VcsActionButtonList,
+      VcsTreeviewTitle,
+    },
+    props: {
+      /** @type {VcsTreeNodeItem} */
+      item: {
+        type: Object,
+        required: true,
+      },
+      opened: {
+        type: Array,
+        required: true,
+      },
+      level: {
+        type: Number,
+        default: 0,
+      },
+      openOnClick: {
+        type: Boolean,
+        default: false,
+      },
+      itemChildren: {
+        type: String,
+        default: 'children',
+      },
+      search: {
+        type: String,
+        default: undefined,
+      },
+    },
+    emits: ['itemToggled', 'click'],
+    setup(props, { emit, slots }) {
+      const vm = getCurrentInstance().proxy;
+      const iconSize = useIconSize();
+      const forwardSlots = getForwardSlots(slots);
+
+      const isOpen = computed({
+        get: () => props.opened?.includes(props.item.name),
+        set: (value) => {
+          emit('itemToggled', props.item.name, value);
+        },
+      });
+
+      const children = computed(() => props.item[props.itemChildren] ?? []);
+
+      const matchFilter = computed(() => {
+        if (!props.search) {
+          return true;
+        }
+        const translatedTitle = (item) =>
+          item.title ? vm.$t(item.title) : item.name;
+
+        const hasText = (item) =>
+          translatedTitle(item)
+            .toLocaleLowerCase()
+            .indexOf(props.search.toLocaleLowerCase()) > -1 ||
+          item[props.itemChildren]?.some(hasText);
+
+        return hasText(props.item);
+      });
+
+      return {
+        forwardSlots,
+        isOpen,
+        matchFilter,
+        iconSize,
+        children,
+
+        // Bubble up events for the nested tree-items
+        bubbleItemToggled: (itemName, openState) => {
+          emit('itemToggled', itemName, openState);
+        },
+        bubbleItemClicked: (item, event) => {
+          emit('click', item, event);
+        },
+      };
+    },
+  };
+</script>
+
+<style lang="scss" scoped>
+  .treenode {
+    align-items: center !important;
+    min-height: calc(var(--v-vcs-font-size) * 2 + 6px);
+  }
+  @for $i from 0 through 6 {
+    .level-#{$i} {
+      padding-left: calc(var(--v-vcs-font-size) * $i + 2px);
+      &.item {
+        & > .prepend:not(:has(.v-icon)) {
+          margin-left: calc(var(--v-vcs-font-size) * 2);
+        }
+        & > .prepend:has(.v-icon) {
+          margin-left: 4px;
+        }
+      }
+    }
+  }
+  .prepend {
+    :deep(.v-icon) {
+      margin-right: 6px;
+      display: flex;
+      align-items: start;
+    }
+  }
+  // Indent children padding
+  .children {
+    padding-left: var(--v-vcs-font-size);
+  }
+  // set the size of the buttons, except for the ActionButtonList
+  :deep(.v-btn):not(.vcs-button) {
+    width: var(--v-vcs-font-size);
+    height: var(--v-vcs-font-size);
+    // for alignment of chevron
+    display: flex;
+    &.chevron-btn {
+      margin-left: 4px;
+      margin-right: 8px;
+    }
+  }
+  // remove hover shadow over button
+  :deep(.v-btn__overlay) {
+    --v-hover-opacity: 0;
+  }
+</style>

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

@@ -0,0 +1,31 @@
+declare const _default: import("vue").DefineSetupFnComponent<Record<string, any>, {}, {}, Record<string, any> & {}, import("vue").PublicProps>;
+export default _default;
+export type VcsTreeNodeItem = {
+    name: string;
+    /**
+     * - An optional translatable title.
+     */
+    title?: string | undefined;
+    tooltip?: string | undefined;
+    /**
+     * - Whether this item reacts to click events.
+     */
+    clickable?: boolean | undefined;
+    /**
+     * - Whether this item should be displayed as disabled.
+     */
+    disabled?: boolean | undefined;
+    actions?: import("../../actions/actionHelper.js", { with: { "resolution-mode": "import" } }).VcsAction[] | undefined;
+    /**
+     * - An optional array of children. Can be binded to another key, using the `item-children` attributes of the VcsTreeview component.
+     */
+    children?: VcsTreeNodeItem[] | undefined;
+    /**
+     * - An optional icon to display with this item. Can be a URL or HTMLElement.
+     */
+    icon?: string | HTMLCanvasElement | HTMLImageElement | undefined;
+    /**
+     * - A callback called when the item is clicked.
+     */
+    clicked?: ((arg0: string) => void) | undefined;
+};