@vcmap/ui 5.0.1 → 5.1.0-rc.1

package/src/actions/extentActions.js

@@ -0,0 +1,359 @@
+import { v4 as uuid } from 'uuid';
+import {
+  Extent,
+  GeometryType,
+  LayerState,
+  markVolatile,
+  maxZIndex,
+  mercatorProjection,
+  startCreateFeatureSession,
+  startEditFeaturesSession,
+  startEditGeometrySession,
+  VectorLayer,
+  Viewpoint,
+} from '@vcmap/core';
+import { reactive, ref, watch, nextTick } from 'vue';
+import { Feature } from 'ol';
+import { transformExtent } from 'ol/proj.js';
+import { fromExtent } from 'ol/geom/Polygon.js';
+import { createOrUpdateFromCoordinates } from 'ol/extent.js';
+import { Polygon } from 'ol/geom.js';
+import { unByKey } from 'ol/Observable.js';
+
+/**
+ * @param {import("@src/vcsUiApp.js").default} app
+ * @param {import("vue").ComputedRef<import("@vcmap/core").Extent>|import("vue").Ref<import("@vcmap/core").Extent>} extent
+ * @returns {import("./actionHelper.js").VcsAction}
+ */
+export function createZoomToExtentAction(app, extent) {
+  return {
+    name: 'components.extent.zoom',
+    icon: 'mdi-target',
+    active: false,
+    callback() {
+      const vp = Viewpoint.createViewpointFromExtent(extent.value);
+      if (vp) {
+        app.maps.activeMap.gotoViewpoint(vp);
+      }
+    },
+  };
+}
+
+/**
+ * @param {import("@vcmap/core").Layer} layer
+ * @param {boolean} disabled
+ * @returns {{action: import("./actionHelper.js").VcsAction, destroy: (function(): void)}}
+ */
+export function createLayerToggleAction(layer, disabled) {
+  const action = reactive({
+    name: 'components.extent.toggle',
+    title: 'components.extent.show',
+    icon: '$vcsEye',
+    active: false,
+    disabled,
+    async callback() {
+      if (!this.active) {
+        await layer.activate();
+        this.title = 'components.extent.hide';
+      } else {
+        layer.deactivate();
+        this.title = 'components.extent.show';
+      }
+    },
+  });
+
+  const stateChangedListener = layer.stateChanged.addEventListener((state) => {
+    action.active = state === LayerState.ACTIVE;
+  });
+
+  return { action, destroy: () => stateChangedListener() };
+}
+
+/**
+ *
+ * @param {import("@src/vcsUiApp.js").default} app
+ * @param {import("@vcmap/core").VectorLayer} layer
+ * @param {import("vue").ComputedRef<import("@vcmap/core").Extent>|import("vue").Ref<import("@vcmap/core").Extent>} extent
+ * @param {string} featureId
+ * @param {boolean} disabled
+ * @returns {{ action: import("./actionHelper.js").VcsAction, destroy:()=>void}}
+ */
+export function createExtentFeatureAction(
+  app,
+  layer,
+  extent,
+  featureId,
+  disabled,
+) {
+  let session;
+  const action = reactive({
+    name: 'components.extent.create',
+    title: 'components.extent.create',
+    icon: '$vcsBoundingBox',
+    active: false,
+    disabled,
+    callback() {
+      if (!this.active) {
+        this.active = true;
+        layer.activate();
+        layer.removeFeaturesById([featureId]);
+        session = startCreateFeatureSession(app, layer, GeometryType.BBox);
+        const listeners = [
+          session.creationFinished.addEventListener((f) => {
+            if (f) {
+              f.setId(featureId);
+              const newExtent = transformExtent(
+                f.getGeometry().getExtent(),
+                mercatorProjection.proj,
+                extent.value.projection.epsg,
+              );
+              extent.value = Object.assign(extent.value, {
+                extent: newExtent,
+              });
+              session.stop();
+            }
+          }),
+          session.stopped.addEventListener(() => {
+            this.active = false;
+            listeners.forEach((cb) => cb());
+          }),
+        ];
+      } else {
+        session?.stop();
+        this.active = false;
+      }
+    },
+  });
+  return {
+    action,
+    destroy: () => {
+      if (session) {
+        session.stop();
+        session = null;
+      }
+    },
+  };
+}
+
+/**
+ * @param {import("ol").Feature<import("ol/geom").Polygon>} feature
+ * @param {import("vue").WritableComputedRef<import("@vcmap/core").Extent>} extent
+ */
+function updateExtentFromFeature(feature, extent) {
+  const options = extent.value.toJSON();
+  options.coordinates = transformExtent(
+    createOrUpdateFromCoordinates(feature.getGeometry().getCoordinates()[0]),
+    mercatorProjection.proj,
+    extent.value.projection.proj,
+  );
+
+  extent.value = new Extent(options);
+}
+
+/**
+ * @param {import("../vcsUiApp.js").default} app
+ * @param {import("@vcmap/core").VectorLayer} layer
+ * @param {string} featureId
+ * @param {import("vue").WritableComputedRef<import("@vcmap/core").Extent>} extent
+ * @param {import("vue").Ref<boolean>} suspendFeatureUpdate
+ * @returns {{action: import("./actionHelper.js").VcsAction, destroy(): void}}
+ */
+function setupTranslateAction(
+  app,
+  layer,
+  featureId,
+  extent,
+  suspendFeatureUpdate,
+) {
+  let session;
+  const action = reactive({
+    name: 'components.extent.translate',
+    title: 'components.extent.translate',
+    icon: 'mdi-axis-arrow',
+    active: false,
+    async callback() {
+      if (session) {
+        session.stop();
+      } else {
+        const feature = layer.getFeatureById(featureId);
+        if (feature) {
+          const featureListener = feature.getGeometry().on('change', () => {
+            suspendFeatureUpdate.value = true;
+            updateExtentFromFeature(feature, extent);
+            nextTick(() => {
+              suspendFeatureUpdate.value = false;
+            });
+          });
+          await layer.activate();
+          session = startEditFeaturesSession(app, layer);
+          session.stopped.addEventListener(() => {
+            action.active = false;
+            unByKey(featureListener);
+            session = undefined;
+          });
+          session.setFeatures([feature]);
+          action.active = true;
+        }
+      }
+    },
+  });
+
+  return {
+    action,
+    destroy() {
+      session?.stop();
+    },
+  };
+}
+
+/**
+ * @param {import("../vcsUiApp.js").default} app
+ * @param {import("@vcmap/core").VectorLayer} layer
+ * @param {string} featureId
+ * @param {import("vue").WritableComputedRef<import("@vcmap/core").Extent>} extent
+ * @param {import("vue").Ref<boolean>} suspendFeatureUpdate
+ * @returns {{action: import("./actionHelper.js").VcsAction, destroy(): void}}
+ */
+function setupVertexAction(
+  app,
+  layer,
+  featureId,
+  extent,
+  suspendFeatureUpdate,
+) {
+  let session;
+  const action = reactive({
+    name: 'components.extent.editVertices',
+    title: 'components.extent.editVertices',
+    icon: '$vcsEditVertices',
+    active: false,
+    disabled: false,
+    async callback() {
+      if (session) {
+        session.stop();
+      } else {
+        const feature = layer.getFeatureById(featureId);
+        if (feature) {
+          const featureListener = feature.getGeometry().on('change', () => {
+            suspendFeatureUpdate.value = true;
+            updateExtentFromFeature(feature, extent);
+            nextTick(() => {
+              suspendFeatureUpdate.value = false;
+            });
+          });
+          await layer.activate();
+          session = startEditGeometrySession(app, layer);
+          session.stopped.addEventListener(() => {
+            action.active = false;
+            unByKey(featureListener);
+            session = undefined;
+          });
+          session.setFeature(feature);
+          action.active = true;
+        }
+      }
+    },
+  });
+
+  return {
+    action,
+    destroy() {
+      session?.stop();
+    },
+  };
+}
+
+/**
+ * Synchronizes a feature with an extent
+ * @param {import("vue").ComputedRef<import("@vcmap/core").Extent>|import("vue").Ref<import("@vcmap/core").Extent>} extent
+ * @param {import("@vcmap/core").VectorLayer} layer
+ * @param {string} featureId
+ */
+function syncExtentFeature(extent, layer, featureId) {
+  const extentGeometry = fromExtent(extent.value.extent);
+  extentGeometry.transform(
+    extent.value.projection.proj,
+    mercatorProjection.proj,
+  );
+  const coordinates = extentGeometry.getCoordinates();
+  coordinates[0].forEach((c) => {
+    c.push(0);
+  });
+  coordinates[0].pop();
+  const geometry = new Polygon(coordinates, 'XYZ');
+  geometry.set('_vcsGeomType', GeometryType.BBox);
+  layer.getFeatureById(featureId).setGeometry(geometry);
+}
+
+/**
+ * @param {import("@src/vcsUiApp.js").default} app
+ * @param {import("vue").ComputedRef<import("@vcmap/core").Extent>|import("vue").Ref<import("@vcmap/core").Extent>|import("vue").WritableComputedRef<import("@vcmap/core").Extent>} extent
+ * @param {boolean} disabled
+ * @returns {{ actions: Array<import("./actionHelper.js").VcsAction>, destroy: () => void, layer: import("@vcmap/core").VectorLayer, featureId: string }}
+ */
+export function setupExtentComponentActions(app, extent, disabled) {
+  const layer = new VectorLayer({
+    projection: mercatorProjection.toJSON(),
+    zIndex: maxZIndex - 1,
+  });
+  markVolatile(layer);
+  app.layers.add(layer);
+
+  const feature = new Feature();
+  const featureId = uuid();
+  const suspendFeatureUpdate = ref(false);
+  feature.setId(featureId);
+  layer.addFeatures([feature]);
+
+  if (extent.value.isValid()) {
+    syncExtentFeature(extent, layer, featureId);
+  }
+
+  const stopWatching = watch(
+    extent,
+    () => {
+      if (extent.value.isValid() && !suspendFeatureUpdate.value) {
+        syncExtentFeature(extent, layer, featureId);
+      }
+    },
+    { deep: true },
+  );
+
+  const { action: showExtentAction, destroy: destroyShowExtent } =
+    createLayerToggleAction(layer, disabled);
+  const { action: createExtentAction, destroy: destroyCreateExtent } =
+    createExtentFeatureAction(app, layer, extent, featureId, disabled);
+  const zoomToExtentAction = createZoomToExtentAction(app, extent);
+  zoomToExtentAction.title = 'components.extent.zoom';
+  const { action: translateAction, destroy: destroyTranslate } =
+    setupTranslateAction(app, layer, featureId, extent, suspendFeatureUpdate);
+  const { action: vertexAction, destroy: destroyVertex } = setupVertexAction(
+    app,
+    layer,
+    featureId,
+    extent,
+    suspendFeatureUpdate,
+  );
+
+  return {
+    actions: [
+      showExtentAction,
+      createExtentAction,
+      vertexAction,
+      translateAction,
+      zoomToExtentAction,
+    ],
+    destroy: () => {
+      layer.deactivate();
+      app.layers.remove(layer);
+      layer.destroy();
+      destroyShowExtent();
+      destroyCreateExtent();
+      destroyTranslate();
+      destroyVertex();
+      stopWatching();
+    },
+    layer,
+    featureId,
+  };
+}

package/src/actions/flightActions.d.ts

@@ -0,0 +1,59 @@
+/**
+ * @param {import("../vcsUiApp.js").default} app
+ * @param {import("@vcmap/core").FlightInstance} instance
+ * @returns {{action: import("./actionHelper.js").VcsAction, destroy: () => void}}
+ */
+export function createPlayAction(app: import("../vcsUiApp.js").default, instance: import("@vcmap/core").FlightInstance): {
+    action: import("./actionHelper.js").VcsAction;
+    destroy: () => void;
+};
+/**
+ * @param {import("../vcsUiApp.js").default} app
+ * @param {import("@vcmap/core").FlightInstance} instance
+ * @param {PlayerDirection} direction
+ * @returns {{action: import("./actionHelper.js").VcsAction, destroy: () => void}}
+ */
+export function createStepAction(app: import("../vcsUiApp.js").default, instance: import("@vcmap/core").FlightInstance, direction: PlayerDirection): {
+    action: import("./actionHelper.js").VcsAction;
+    destroy: () => void;
+};
+/**
+ * @param {import("../vcsUiApp.js").default} app
+ * @param {import("@vcmap/core").FlightInstance} instance
+ * @param {PlayerDirection} direction
+ * @returns {{ action: import("./actionHelper.js").VcsAction & { listeners:Object<string,()=>void>, destroy: () => void }}}
+ */
+export function createFastAction(app: import("../vcsUiApp.js").default, instance: import("@vcmap/core").FlightInstance, direction: PlayerDirection): {
+    action: import("./actionHelper.js").VcsAction & {
+        listeners: {
+            [x: string]: () => void;
+        };
+        destroy: () => void;
+    };
+};
+/**
+ *
+ * @param {import("../vcsUiApp.js").default} app
+ * @param {import("@vcmap/core").FlightInstance} instance
+ * @returns {{destroy: (() => void), actions: Array<import("./actionHelper.js").VcsAction> }}
+ */
+export function createFlightPlayerActions(app: import("../vcsUiApp.js").default, instance: import("@vcmap/core").FlightInstance): {
+    destroy: (() => void);
+    actions: Array<import("./actionHelper.js").VcsAction>;
+};
+/**
+ *
+ * @param {import("../vcsUiApp.js").default} app
+ * @param {import("@vcmap/core").FlightInstance} flightInstance
+ * @param {boolean} [active=true]
+ * @returns {Promise<{action: import("./actionHelper.js").VcsAction, destroy:()=>void}>}
+ */
+export function createFlightVisualizationAction(app: import("../vcsUiApp.js").default, flightInstance: import("@vcmap/core").FlightInstance, active?: boolean | undefined): Promise<{
+    action: import("./actionHelper.js").VcsAction;
+    destroy: () => void;
+}>;
+export type PlayerDirection = string;
+export namespace PlayerDirection {
+    let Forward: string;
+    let Backward: string;
+}

package/src/actions/flightActions.js

@@ -0,0 +1,232 @@
+import { reactive } from 'vue';
+import { check } from '@vcsuite/check';
+import { createFlightVisualization } from '@vcmap/core';
+
+/**
+ * @param {import("../vcsUiApp.js").default} app
+ * @param {import("@vcmap/core").FlightInstance} instance
+ * @returns {{action: import("./actionHelper.js").VcsAction, destroy: () => void}}
+ */
+export function createPlayAction(app, instance) {
+  let stateListener = () => {};
+  let destroyListener = () => {};
+  /** @type {import("@vcmap/core").FlightPlayer|undefined} */
+  let player;
+
+  const action = reactive({
+    name: 'play',
+    icon: '$vcsPlayCircle',
+    title: 'flight.playTooltip',
+    callback: async () => {
+      if (player) {
+        if (player.state === 'playing') {
+          player.pause();
+        } else {
+          player.play();
+        }
+      } else {
+        player = await app.flights.setPlayerForFlight(instance);
+        if (player) {
+          stateListener = player.stateChanged.addEventListener((state) => {
+            if (state === 'stopped') {
+              action.icon = '$vcsPlayCircle';
+              action.title = 'flight.playTooltip';
+            } else if (state === 'paused') {
+              action.icon = '$vcsPlayCircle';
+              action.title = 'flight.playTooltip';
+            } else {
+              action.icon = 'mdi-pause';
+              action.title = 'flight.pauseTooltip';
+            }
+          });
+          destroyListener = player.destroyed.addEventListener(() => {
+            player = null;
+            action.icon = '$vcsPlayCircle';
+            stateListener();
+            destroyListener();
+          });
+          player.play();
+        }
+      }
+    },
+  });
+
+  return {
+    action,
+    destroy: () => {
+      if (player) {
+        player.stop();
+        player.destroy();
+        player = null;
+      }
+    },
+  };
+}
+
+/**
+ * @enum {string}
+ */
+export const PlayerDirection = {
+  Forward: 'forward',
+  Backward: 'backward',
+};
+
+/**
+ * @param {import("../vcsUiApp.js").default} app
+ * @param {import("@vcmap/core").FlightInstance} instance
+ * @param {PlayerDirection} direction
+ * @returns {{action: import("./actionHelper.js").VcsAction, destroy: () => void}}
+ */
+export function createStepAction(app, instance, direction) {
+  check(direction, Object.values(PlayerDirection));
+
+  let player;
+  const action = reactive({
+    name: `step-${direction}`,
+    icon: `mdi-step-${direction}`,
+    title: `flight.${direction}StepTooltip`,
+    disabled: false,
+    async callback() {
+      if (player) {
+        player[direction]?.();
+      }
+    },
+  });
+
+  const playerChangedListener = app.flights.playerChanged.addEventListener(
+    (activePlayer) => {
+      if (activePlayer?.flightInstanceName === instance.name) {
+        player = activePlayer;
+        action.disabled = false;
+      } else {
+        action.disabled = true;
+      }
+    },
+  );
+
+  return { action, destroy: playerChangedListener };
+}
+
+/**
+ * @param {import("../vcsUiApp.js").default} app
+ * @param {import("@vcmap/core").FlightInstance} instance
+ * @param {PlayerDirection} direction
+ * @returns {{ action: import("./actionHelper.js").VcsAction & { listeners:Object<string,()=>void>, destroy: () => void }}}
+ */
+export function createFastAction(app, instance, direction) {
+  check(direction, Object.values(PlayerDirection));
+
+  let player;
+  const sign = direction === PlayerDirection.Forward ? 1 : -1;
+  const icon =
+    direction === PlayerDirection.Forward ? 'mdi-fast-forward' : 'mdi-rewind';
+  const { multiplier } = instance;
+
+  function accelerate() {
+    instance.multiplier = sign * 5 * multiplier;
+    player?.play();
+  }
+
+  function reset() {
+    instance.multiplier = multiplier;
+    player?.pause();
+  }
+
+  const action = {
+    name: `fast-${direction}`,
+    icon,
+    title: `flight.${direction}FastTooltip`,
+    disabled: false,
+    callback() {},
+    listeners: {
+      mousedown: accelerate,
+      pointerdown: accelerate,
+      mouseup: reset,
+      pointerup: reset,
+      mouseout() {
+        if (instance.multiplier !== multiplier) {
+          reset();
+        }
+      },
+    },
+  };
+
+  const playerChangedListener = app.flights.playerChanged.addEventListener(
+    (activePlayer) => {
+      if (activePlayer?.flightInstanceName === instance.name) {
+        player = activePlayer;
+        action.disabled = false;
+      } else {
+        action.disabled = true;
+      }
+    },
+  );
+
+  return { action, destroy: playerChangedListener };
+}
+
+/**
+ *
+ * @param {import("../vcsUiApp.js").default} app
+ * @param {import("@vcmap/core").FlightInstance} instance
+ * @returns {{destroy: (() => void), actions: Array<import("./actionHelper.js").VcsAction> }}
+ */
+export function createFlightPlayerActions(app, instance) {
+  const array = [
+    createStepAction(app, instance, PlayerDirection.Backward),
+    createFastAction(app, instance, PlayerDirection.Backward),
+    createPlayAction(app, instance),
+    createFastAction(app, instance, PlayerDirection.Forward),
+    createStepAction(app, instance, PlayerDirection.Forward),
+  ];
+
+  return {
+    actions: array.map(({ action }) => action),
+    destroy: () => array.forEach(({ destroy }) => destroy()),
+  };
+}
+
+/**
+ *
+ * @param {import("../vcsUiApp.js").default} app
+ * @param {import("@vcmap/core").FlightInstance} flightInstance
+ * @param {boolean} [active=true]
+ * @returns {Promise<{action: import("./actionHelper.js").VcsAction, destroy:()=>void}>}
+ */
+export async function createFlightVisualizationAction(
+  app,
+  flightInstance,
+  active = true,
+) {
+  let flightVis = await createFlightVisualization(flightInstance, app);
+
+  const action = reactive({
+    name: 'components.flight.hidePath',
+    title: 'components.flight.hidePath',
+    icon: 'mdi-eye-outline',
+    active,
+    async callback() {
+      if (!flightVis) {
+        flightVis = await createFlightVisualization(flightInstance, app);
+      }
+      if (this.active) {
+        flightVis.deactivate();
+      } else {
+        await flightVis.activate();
+      }
+      this.active = !this.active;
+      this.icon = this.active ? 'mdi-eye-outline' : 'mdi-eye-off-outline';
+    },
+  });
+
+  if (active) {
+    await flightVis.activate();
+  }
+
+  const destroy = () => {
+    flightVis.deactivate();
+    flightVis.destroy();
+  };
+
+  return { action, destroy };
+}