@vcmap/ui 5.1.8 → 5.2.1

package/src/manager/collectionManager/CollectionComponentStandalone.vue

@@ -0,0 +1,91 @@
+<template>
+  <VcsFormSection
+    :heading="title"
+    :header-actions="actions"
+    :action-button-list-overflow-count="overflowCount"
+    v-bind="{ ...$attrs }"
+  >
+    <collection-component-list
+      v-if="componentListView"
+      hide-header
+      @closeList="closeList"
+    />
+    <CollectionComponentContent v-else @openList="openList" />
+  </VcsFormSection>
+</template>
+
+<script>
+  import { computed, getCurrentInstance, inject, ref } from 'vue';
+  import VcsFormSection from '../../components/form-inputs-controls/VcsFormSection.vue';
+  import { createSelectionActions } from '../../components/lists/VcsList.vue';
+  import CollectionComponentList from './CollectionComponentList.vue';
+  import CollectionComponentContent from './CollectionComponentContent.vue';
+
+  /**
+   * @description
+   * Renders the first ten items of a collectionComponent in a List. Uses CollectionComponentList to render more items.
+   * The collectionComponent must be passed via {@link https://vuejs.org/api/composition-api-dependency-injection.html |provide }.
+   */
+  export default {
+    name: 'CollectionComponent',
+    components: {
+      CollectionComponentList,
+      CollectionComponentContent,
+      VcsFormSection,
+    },
+    setup(_props, { emit }) {
+      const vm = getCurrentInstance().proxy;
+      /**
+       * @type {CollectionComponentClass}
+       */
+      const collectionComponent = inject('collectionComponent');
+      /**
+       * @type {import("vue").Ref<boolean>}
+       */
+      const componentListView = ref(false);
+
+      const selectionActions = createSelectionActions(
+        collectionComponent.items,
+        collectionComponent.selection,
+        emit,
+      );
+
+      const actions = collectionComponent.getActions();
+
+      const title = computed(() => {
+        if (
+          collectionComponent.selectable &&
+          collectionComponent.selection.length > 0
+        ) {
+          return `${vm.$t(collectionComponent.title.value)} (${
+            collectionComponent.selection.value.length
+          })`;
+        }
+        return collectionComponent.title.value;
+      });
+
+      return {
+        title,
+        overflowCount: collectionComponent.overflowCount,
+        actions: computed(() => {
+          if (
+            collectionComponent.selectable.value &&
+            !collectionComponent.singleSelect.value
+          ) {
+            return [...selectionActions, ...actions.value];
+          }
+          return actions.value;
+        }),
+        componentListView,
+        openList() {
+          componentListView.value = true;
+        },
+        closeList() {
+          componentListView.value = false;
+        },
+      };
+    },
+  };
+</script>
+
+<style lang="scss" scoped></style>

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

@@ -0,0 +1,9 @@
+declare const _default: import("vue").DefineComponent<{}, {
+    title: import("vue").ComputedRef<any>;
+    overflowCount: any;
+    actions: import("vue").ComputedRef<any>;
+    componentListView: import("vue").Ref<boolean>;
+    openList(): void;
+    closeList(): void;
+}, {}, {}, {}, import("vue/types/v3-component-options.js").ComponentOptionsMixin, import("vue/types/v3-component-options.js").ComponentOptionsMixin, {}, string, Readonly<import("vue").ExtractPropTypes<{}>>, {}>;
+export default _default;

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

@@ -86,10 +86,10 @@ declare class CollectionManager implements ICollectionManager {
      */
     private _itemFilters;
     /**
-     * @type {Array<{actions:Array<import("../../actions/actionHelper.js").VcsAction>,owner:string|symbol,collectionComponentIds:Array<string>}>}
+     * @type {Array<{ownedActions:Array<OwnedAction>,actions:Array<import("../../actions/actionHelper.js").VcsAction>,owner:string|symbol,collectionComponentIds:Array<string>}>}
      * @private
      */
-    private _actions;
+    private _itemActions;
     /**
      * @param {string} id
      * @returns {CollectionComponentClass<Object>|undefined}

package/src/manager/collectionManager/collectionManager.js

@@ -78,10 +78,10 @@ class CollectionManager {
      */
     this._itemFilters = [];
     /**
-     * @type {Array<{actions:Array<import("../../actions/actionHelper.js").VcsAction>,owner:string|symbol,collectionComponentIds:Array<string>}>}
+     * @type {Array<{ownedActions:Array<OwnedAction>,actions:Array<import("../../actions/actionHelper.js").VcsAction>,owner:string|symbol,collectionComponentIds:Array<string>}>}
      * @private
      */
-    this._actions = [];
+    this._itemActions = [];
   }
 
   /**
@@ -163,12 +163,10 @@ class CollectionManager {
       .forEach(({ collectionComponentIds, ...itemFilter }) =>
         collectionComponent.addItemFilter(itemFilter),
       );
-    this._actions
+    this._itemActions
       .filter(filterIds)
-      .forEach(({ actions, owner: actionOwner }) =>
-        collectionComponent.addActions(
-          actions.map(({ action }) => ({ action, actionOwner })),
-        ),
+      .forEach(({ ownedActions }) =>
+        collectionComponent.addActions(ownedActions),
       );
 
     this.added.raiseEvent(collectionComponent);
@@ -342,7 +340,7 @@ class CollectionManager {
     }
 
     if (
-      !this._actions.find(
+      !this._itemActions.find(
         (cached) => cached.actions === actions && cached.owner === owner,
       )
     ) {
@@ -353,8 +351,9 @@ class CollectionManager {
           component.addActions(ownedActions);
         }
       });
-      this._actions.push({
+      this._itemActions.push({
         actions,
+        ownedActions,
         owner,
         collectionComponentIds,
       });
@@ -368,13 +367,16 @@ class CollectionManager {
   removeActions(actions, owner) {
     check(owner, [String, Symbol]);
 
-    const ownedActions = actions.map((action) => ({ action, owner }));
-    [...this._collectionComponents.values()].forEach((collectionComponent) => {
-      collectionComponent.removeActions(ownedActions);
-    });
-    this._actions = this._actions.filter(
-      (cached) => !(cached.actions === actions && cached.owner === owner),
-    );
+    const idx = this._itemActions.findIndex((a) => a.actions === actions);
+    if (idx > -1) {
+      const { collectionComponentIds, ownedActions } = this._itemActions[idx];
+      collectionComponentIds
+        .map((id) => this.get(id))
+        .forEach((collectionComponent) => {
+          collectionComponent.removeActions(ownedActions);
+        });
+      this._itemActions.splice(idx, 1);
+    }
   }
 
   /**
@@ -399,8 +401,8 @@ class CollectionManager {
     this._itemFilters = this._itemFilters.filter((itemFilter) => {
       return itemFilter.owner !== owner;
     });
-    this._actions = this._actions.filter(
-      (ownedAction) => ownedAction.owner !== owner,
+    this._itemActions = this._itemActions.filter(
+      (itemAction) => itemAction.owner !== owner,
     );
   }
 
@@ -422,7 +424,7 @@ class CollectionManager {
     });
     this._itemMappings = [];
     this._itemFilters = [];
-    this._actions = [];
+    this._itemActions = [];
   }
 
   /**

package/src/manager/panel/PanelComponent.vue

@@ -0,0 +1,110 @@
+<template>
+  <div
+    :id="panelState.id"
+    class="position-absolute panel-component"
+    :class="{
+      'panel-component-left': isLeft,
+      'panel-component-right': isRight,
+      'panel-component-bottom': isBottom,
+      'theme--light': !appIsDark,
+      'theme--dark': appIsDark,
+      resizable: panelState.resizable,
+    }"
+    @mousedown="startResize"
+    @mouseup="stopResize"
+  >
+    <slot />
+  </div>
+</template>
+
+<style scoped lang="scss">
+  @import '../../styles/shades.scss';
+
+  .panel-component {
+    padding: 0 4px;
+  }
+  .panel-component.theme--dark::after {
+    content: '';
+    position: absolute;
+    background: map-get($shades, 'black');
+  }
+  .panel-component.theme--light::after {
+    content: '';
+    position: absolute;
+    background: map-get($shades, 'white');
+  }
+
+  .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';
+
+  export default {
+    name: 'PanelComponent',
+    props: {
+      panelState: {
+        type: Object,
+        required: true,
+      },
+    },
+    setup(props, { emit }) {
+      return {
+        appIsDark: computed(() => {
+          return getCurrentInstance().proxy.$vuetify.theme.dark || !1;
+        }),
+        isLeft: computed(
+          () => props.panelState.location === PanelLocation.LEFT,
+        ),
+        isRight: computed(
+          () => props.panelState.location === PanelLocation.RIGHT,
+        ),
+        isBottom: computed(
+          () => props.panelState.location === PanelLocation.BOTTOM,
+        ),
+        startResize(e) {
+          const { resizable, location } = props.panelState;
+          if (
+            resizable &&
+            ((location === PanelLocation.LEFT &&
+              e.currentTarget.clientWidth - e.offsetX < 4) ||
+              (location === PanelLocation.RIGHT && e.offsetX < 4) ||
+              (location === PanelLocation.BOTTOM && e.offsetY < 4))
+          ) {
+            emit('resize', props.panelState.id);
+          }
+        },
+        stopResize() {
+          emit('resize', undefined);
+        },
+      };
+    },
+  };
+</script>

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

@@ -0,0 +1,19 @@
+declare const _default: import("vue").DefineComponent<{
+    panelState: {
+        type: ObjectConstructor;
+        required: true;
+    };
+}, {
+    appIsDark: import("vue").ComputedRef<any>;
+    isLeft: import("vue").ComputedRef<boolean>;
+    isRight: import("vue").ComputedRef<boolean>;
+    isBottom: import("vue").ComputedRef<boolean>;
+    startResize(e: any): void;
+    stopResize(): void;
+}, {}, {}, {}, import("vue/types/v3-component-options.js").ComponentOptionsMixin, import("vue/types/v3-component-options.js").ComponentOptionsMixin, {}, string, Readonly<import("vue").ExtractPropTypes<{
+    panelState: {
+        type: ObjectConstructor;
+        required: true;
+    };
+}>>, {}>;
+export default _default;

package/src/manager/panel/PanelManagerComponent.vue

@@ -0,0 +1,224 @@
+<template>
+  <div
+    class="vcs-panel-frame"
+    @mouseup="setResizing(undefined)"
+    ref="panelFrameRef"
+  >
+    <PanelComponent
+      :panel-state="mainPanel.state"
+      :style="getPosition(mainPanel)"
+      class="overflow-auto"
+    >
+      <VcsMainMap />
+    </PanelComponent>
+    <PanelComponent
+      v-for="id in componentIds"
+      :key="id"
+      :panel-state="getState(id)"
+      :style="getStyles(id).value"
+      :class="getState(id).classes"
+      class="overflow-auto"
+      @resize="setResizing"
+    >
+      <component
+        :is="getComponent(id)"
+        :panel-state="getState(id)"
+        v-bind="getProps(id)"
+        @close="close(id)"
+      />
+    </PanelComponent>
+  </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,
+    getCurrentInstance,
+    inject,
+    reactive,
+    ref,
+    watch,
+  } from 'vue';
+  import VcsMainMap from '../../application/VcsMainMap.vue';
+  import { vcsAppSymbol } from '../../pluginHelper.js';
+  import { updatePanelSizes, DefaultMainPanelPosition } from './panelHelper.js';
+  import {
+    getPanelPosition,
+    PanelLocation,
+    panelLocationSymbol,
+    panelPositionSymbol,
+    setPanelPosition,
+  } from './panelManager.js';
+  import PanelComponent from './PanelComponent.vue';
+
+  /**
+   * @returns {Partial<import("./panelManager.js").PanelComponent>}
+   */
+  export function createMainPanel() {
+    const id = 'vcs-main';
+    return {
+      id,
+      [panelPositionSymbol]: reactive({ ...DefaultMainPanelPosition }),
+      state: reactive({
+        id,
+        owner: vcsAppSymbol,
+        location: 'vcs-main',
+      }),
+    };
+  }
+
+  /**
+   * @description PanelManager rendering all Panels
+   */
+  export default {
+    name: 'VcsPanelManager',
+    components: { VcsMainMap, PanelComponent },
+    setup() {
+      const app = inject('vcsApp');
+      /** @type {PanelManager} */
+      const { panelManager } = app;
+      const { componentIds } = panelManager;
+      const panelFrameRef = ref();
+      const resizing = ref(undefined);
+      let resizingFunction = () => {};
+
+      /**
+       * @param {string} id
+       * @returns {PanelState}
+       */
+      const getState = (id) => {
+        return panelManager.get(id)?.state;
+      };
+      /**
+       * @param {string} id
+       * @returns {Object}
+       */
+      const getProps = (id) => {
+        return panelManager.get(id)?.props ?? {};
+      };
+      /**
+       * @param {PanelComponent} panelComponent
+       * @returns {PanelPosition|null}
+       */
+      const getPosition = (panelComponent) => {
+        return getPanelPosition(panelComponent);
+      };
+      /**
+       * @param {string} id
+       * @returns {import("vue").ComputedRef<Object>}
+       */
+      const getStyles = (id) =>
+        computed(() => {
+          const panelComponent = panelManager.get(id);
+          return {
+            ...getPosition(panelComponent),
+            ...(panelComponent?.state?.styles || {}),
+          };
+        });
+
+      const mainPanel = createMainPanel();
+
+      const resize = (panel, e) => {
+        if (panel) {
+          let resizeKey;
+          if (panel[panelLocationSymbol] === PanelLocation.BOTTOM) {
+            const height =
+              ((panelFrameRef.value.offsetTop + e.y) /
+                panelFrameRef.value.parentElement.offsetHeight) *
+              100;
+            setPanelPosition(panel, { height: `${Math.round(100 - height)}%` });
+          } else {
+            const width =
+              ((panelFrameRef.value.offsetLeft + e.x) /
+                panelFrameRef.value.parentElement.offsetWidth) *
+              100;
+            if (panel[panelLocationSymbol] === PanelLocation.LEFT) {
+              setPanelPosition(panel, { width: `${width}%` });
+              resizeKey = 'left';
+            } else if (panel[panelLocationSymbol] === PanelLocation.RIGHT) {
+              setPanelPosition(panel, { width: `${Math.round(100 - width)}%` });
+              resizeKey = 'right';
+            }
+          }
+          updatePanelSizes(
+            panelManager,
+            mainPanel,
+            panelFrameRef.value.getBoundingClientRect(),
+            resizeKey,
+          );
+        }
+      };
+
+      const setResizing = (id) => {
+        if (id) {
+          resizing.value = id;
+          resizingFunction = (e) => {
+            e.preventDefault();
+            resize(panelManager.get(id), e);
+          };
+          panelFrameRef.value.addEventListener(
+            'mousemove',
+            resizingFunction,
+            false,
+          );
+        } else {
+          resizing.value = undefined;
+          panelFrameRef.value.removeEventListener(
+            'mousemove',
+            resizingFunction,
+            false,
+          );
+        }
+      };
+
+      const componentIdRef = ref(componentIds);
+      watch(
+        () => [...componentIdRef.value],
+        () => {
+          updatePanelSizes(
+            panelManager,
+            mainPanel,
+            panelFrameRef.value.getBoundingClientRect(),
+          );
+        },
+      );
+
+      const addMobileClass = computed(() => {
+        return (
+          getCurrentInstance().proxy.$vuetify.breakpoint.xs &&
+          componentIdRef.value.length > 0
+        );
+      });
+
+      return {
+        mainPanel,
+        componentIds: componentIdRef,
+        getComponent: (id) => panelManager.get(id).component,
+        getPosition,
+        getStyles,
+        getState,
+        getProps,
+        panelFrameRef,
+        setResizing,
+        resizingFunction,
+        close: (id) => {
+          panelManager.remove(id);
+        },
+        addMobileClass,
+      };
+    },
+  };
+</script>

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

@@ -0,0 +1,36 @@
+/**
+ * @returns {Partial<import("./panelManager.js").PanelComponent>}
+ */
+export function createMainPanel(): Partial<import("./panelManager.js").PanelComponent>;
+declare const _default: import("vue").DefineComponent<{}, {
+    mainPanel: Partial<import("./panelManager.js").PanelComponent>;
+    componentIds: PanelManager;
+    getComponent: (id: any) => any;
+    getPosition: (panelComponent: import("vue").DefineComponent<{
+        panelState: {
+            type: ObjectConstructor;
+            required: true;
+        };
+    }, {
+        appIsDark: import("vue").ComputedRef<any>;
+        isLeft: import("vue").ComputedRef<boolean>;
+        isRight: import("vue").ComputedRef<boolean>;
+        isBottom: import("vue").ComputedRef<boolean>;
+        startResize(e: any): void;
+        stopResize(): void;
+    }, {}, {}, {}, import("vue/types/v3-component-options.js").ComponentOptionsMixin, import("vue/types/v3-component-options.js").ComponentOptionsMixin, {}, string, Readonly<import("vue").ExtractPropTypes<{
+        panelState: {
+            type: ObjectConstructor;
+            required: true;
+        };
+    }>>, {}>) => PanelPosition | null;
+    getStyles: (id: string) => import("vue").ComputedRef<Object>;
+    getState: (id: string) => PanelState;
+    getProps: (id: string) => Object;
+    panelFrameRef: import("vue").Ref<any>;
+    setResizing: (id: any) => void;
+    resizingFunction: () => void;
+    close: (id: any) => void;
+    addMobileClass: import("vue").ComputedRef<any>;
+}, {}, {}, {}, import("vue/types/v3-component-options.js").ComponentOptionsMixin, import("vue/types/v3-component-options.js").ComponentOptionsMixin, {}, string, Readonly<import("vue").ExtractPropTypes<{}>>, {}>;
+export default _default;

package/src/manager/panel/panelHelper.d.ts

@@ -0,0 +1,83 @@
+/**
+ * @typedef {Object} NumberPanelPosition
+ * @property {number?} left - The left CSS property participates in specifying the horizontal position of a panel.
+ * @property {number?} top - The top CSS property participates in specifying the vertical position of a panel.
+ * @property {number?} right - The right CSS property participates in specifying the horizontal position of a panel.
+ * @property {number?} bottom - The bottom CSS property participates in specifying the vertical position of a panel.
+ * @property {number} width - The width CSS property sets an element's width.
+ * @property {number} height - The height CSS property sets an element's height.
+ * @property {number} maxHeight - The maxHeight CSS property sets an element's maximal height.
+ * @property {number} maxWidth - The maxWidth CSS property sets an element's maximal width.
+ * @property {number} minHeight - The minHeight CSS property sets an element's minimal height.
+ * @property {number} minWidth - The minWidth CSS property sets an element's minimal width.
+ */
+/**
+ * Parses a position to numeric percentage value (0-100). Non-numeric values return undefined.
+ * @param {string|number|undefined} pos
+ * @param {string} key - one of PanelPosition keys
+ * @param {DOMRect} targetSize - size of the current target
+ * @returns {number|undefined}
+ */
+export function posToRelativeTarget(pos: string | number | undefined, key: string, targetSize: DOMRect): number | undefined;
+/**
+ * Parses CSS position string properties to percentage numeric position properties
+ * @param {Partial<import("./panelManager.js").PanelPosition>} panelPosition
+ * @param {DOMRect} targetSize - the map's target size
+ * @returns {NumberPanelPosition}
+ */
+export function percentageFromPanelOptions(panelPosition: Partial<import("./panelManager.js").PanelPosition>, targetSize: DOMRect): NumberPanelPosition;
+/**
+ * Updates size of main panel according to other active panels
+ * @param {import("./panelManager.js").default} panelManager
+ * @param {Partial<import("./panelManager.js").PanelComponent>} mainPanel
+ * @param {DOMRect} targetSize
+ * @param {string|undefined} resizeKey
+ */
+export function updatePanelSizes(panelManager: import("./panelManager.js").default, mainPanel: Partial<import("./panelManager.js").PanelComponent>, targetSize: DOMRect, resizeKey?: string | undefined): void;
+/**
+ *
+ * @type {Partial<import("./panelManager.js").PanelPosition>}
+ */
+export const DefaultMainPanelPosition: Partial<import("./panelManager.js").PanelPosition>;
+export type NumberPanelPosition = {
+    /**
+     * - The left CSS property participates in specifying the horizontal position of a panel.
+     */
+    left: number | null;
+    /**
+     * - The top CSS property participates in specifying the vertical position of a panel.
+     */
+    top: number | null;
+    /**
+     * - The right CSS property participates in specifying the horizontal position of a panel.
+     */
+    right: number | null;
+    /**
+     * - The bottom CSS property participates in specifying the vertical position of a panel.
+     */
+    bottom: number | null;
+    /**
+     * - The width CSS property sets an element's width.
+     */
+    width: number;
+    /**
+     * - The height CSS property sets an element's height.
+     */
+    height: number;
+    /**
+     * - The maxHeight CSS property sets an element's maximal height.
+     */
+    maxHeight: number;
+    /**
+     * - The maxWidth CSS property sets an element's maximal width.
+     */
+    maxWidth: number;
+    /**
+     * - The minHeight CSS property sets an element's minimal height.
+     */
+    minHeight: number;
+    /**
+     * - The minWidth CSS property sets an element's minimal width.
+     */
+    minWidth: number;
+};