@vcmap/ui 5.1.7 → 5.2.0

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;
+};

package/src/manager/panel/panelHelper.js

@@ -0,0 +1,272 @@
+import {
+  PanelLocation,
+  getPanelPosition,
+  setPanelPosition,
+  DefaultPanelPositions,
+} from './panelManager.js';
+
+/**
+ *
+ * @type {Partial<import("./panelManager.js").PanelPosition>}
+ */
+export const DefaultMainPanelPosition = {
+  top: '0px',
+  left: '0px',
+  right: '0px',
+  bottom: '0px',
+  width: '100%',
+  minWidth: '10%',
+  minHeight: '25%',
+};
+
+/**
+ * @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, key, targetSize) {
+  if (typeof pos === 'string') {
+    if (pos.match(/^-?\d+\.?\d*px$/)) {
+      const scalar = [
+        'bottom',
+        'top',
+        'height',
+        'minHeight',
+        'maxHeight',
+      ].includes(key)
+        ? targetSize?.height
+        : targetSize?.width;
+      return (parseInt(pos, 10) / scalar) * 100;
+    } else if (targetSize && pos.match(/^-?\d+\.?\d*%$/)) {
+      return parseInt(pos, 10);
+    }
+    return undefined;
+  }
+  return pos;
+}
+
+/**
+ * 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, targetSize) {
+  const options = {};
+  Object.keys(panelPosition).forEach((key) => {
+    if (panelPosition[key] !== undefined) {
+      options[key] = posToRelativeTarget(panelPosition[key], key, targetSize);
+    }
+  });
+  return options;
+}
+
+/**
+ * Returns the maximum permitted width of a panel as a function of the main panel minWidth and other active side panel width
+ * @param {Partial<import("./panelManager.js").PanelPosition>} main
+ * @param {Partial<import("./panelManager.js").PanelPosition>} side
+ * @param {DOMRect} targetSize
+ * @returns {number}
+ */
+function getMaxWidth(main, side, targetSize) {
+  const maxWidth =
+    100 - posToRelativeTarget(main.minWidth, 'minWidth', targetSize);
+  if (side) {
+    return maxWidth - posToRelativeTarget(side.width, 'width', targetSize);
+  }
+  return maxWidth;
+}
+
+/**
+ * Updates side panel width and height
+ * Sets new main panel width depending on side panel
+ * @param {'left'|'right'} key
+ * @param {Partial<import("./panelManager.js").PanelComponent>} panel
+ * @param {Partial<NumberPanelPosition>} main
+ * @param {Partial<NumberPanelPosition>} side
+ * @param {DOMRect} targetSize
+ * @returns {Partial<import("./panelManager.js").PanelPosition>}
+ */
+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 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}%`;
+    }
+  }
+  return toUpdate;
+}
+
+/**
+ * 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,
+  mainPanel,
+  targetSize,
+  resizeKey = undefined,
+) {
+  const defaultMain = percentageFromPanelOptions(
+    DefaultMainPanelPosition,
+    targetSize,
+  );
+  const defaultSide = {
+    height: 100,
+  };
+
+  if (panelManager.hasLocation(PanelLocation.BOTTOM)) {
+    const bottomPanelPosition = getPanelPosition(
+      panelManager.getLocation(PanelLocation.BOTTOM),
+    );
+    const bottomHeight = Math.max(
+      posToRelativeTarget(
+        bottomPanelPosition.minHeight,
+        'minHeight',
+        targetSize,
+      ),
+      Math.min(
+        posToRelativeTarget(bottomPanelPosition.height, 'height', targetSize),
+        posToRelativeTarget(
+          bottomPanelPosition.maxHeight,
+          'maxHeight',
+          targetSize,
+        ),
+      ),
+    );
+    defaultMain.bottom += bottomHeight;
+    defaultSide.height -= bottomHeight;
+  }
+
+  const leftPanel = panelManager.getLocation(PanelLocation.LEFT);
+  const leftWidth =
+    posToRelativeTarget(
+      getPanelPosition(leftPanel)?.width,
+      'width',
+      targetSize,
+    ) || 0;
+
+  const rightPanel = panelManager.getLocation(PanelLocation.RIGHT);
+  const rightWidth =
+    posToRelativeTarget(
+      getPanelPosition(rightPanel)?.width,
+      'width',
+      targetSize,
+    ) || 0;
+
+  const left = {
+    maxWidth: DefaultPanelPositions[PanelLocation.LEFT].maxWidth,
+  };
+
+  const right = {
+    maxWidth: DefaultPanelPositions[PanelLocation.RIGHT].maxWidth,
+  };
+
+  const maxWidth = getMaxWidth(defaultMain, undefined, targetSize);
+  if (
+    panelManager.hasLocation(PanelLocation.LEFT) &&
+    panelManager.hasLocation(PanelLocation.RIGHT) &&
+    leftWidth + rightWidth > maxWidth
+  ) {
+    if (leftWidth > maxWidth / 2 && rightWidth > maxWidth / 2) {
+      left.maxWidth = maxWidth / 2;
+      right.maxWidth = maxWidth / 2;
+    } else if (leftWidth > maxWidth / 2) {
+      left.maxWidth = maxWidth - rightWidth;
+      right.maxWidth = rightWidth;
+    } else if (rightWidth > maxWidth / 2) {
+      right.maxWidth = maxWidth - leftWidth;
+      left.maxWidth = leftWidth;
+    }
+  } else {
+    left.maxWidth = getMaxWidth(
+      defaultMain,
+      getPanelPosition(rightPanel),
+      targetSize,
+    );
+    right.maxWidth = getMaxWidth(
+      defaultMain,
+      getPanelPosition(leftPanel),
+      targetSize,
+    );
+  }
+
+  if (panelManager.hasLocation(PanelLocation.LEFT) && resizeKey !== 'right') {
+    const updatedLeft = handleSidePanel(
+      'left',
+      leftPanel,
+      defaultMain,
+      {
+        ...defaultSide,
+        ...left,
+      },
+      targetSize,
+    );
+    setPanelPosition(leftPanel, updatedLeft);
+  }
+  if (panelManager.hasLocation(PanelLocation.RIGHT) && resizeKey !== 'left') {
+    const updatedRight = handleSidePanel(
+      'right',
+      rightPanel,
+      defaultMain,
+      {
+        ...defaultSide,
+        ...right,
+      },
+      targetSize,
+    );
+    setPanelPosition(rightPanel, updatedRight);
+  }
+
+  const main = percentageFromPanelOptions(
+    getPanelPosition(mainPanel),
+    targetSize,
+  );
+
+  const toUpdate = Object.keys(defaultMain).reduce((acc, key) => {
+    if (defaultMain[key] !== main[key]) {
+      acc[key] = `${defaultMain[key]}%`;
+    }
+    return acc;
+  }, {});
+  if (Object.keys(toUpdate).length > 0) {
+    setPanelPosition(mainPanel, toUpdate);
+  }
+}