@cosmicds/vue-toolkit 0.1.3 → 0.3.0

package/src/index.ts

@@ -1,29 +1,36 @@
+import { BackgroundImageset, skyBackgroundImagesets } from "./background";
+import { useFullscreen, useWindowShape, WindowShape } from "./composables";
+import { PositionCoords, useGeolocation } from "./geolocation";
 import { KeyboardControlSettings } from "./keyboard";
-import MiniDSBase from "./components/MiniDSBase";
+import { useWWTKeyboardControls } from "./wwt-utils";
+
 import IconButton from "./components/IconButton.vue";
 import LocationSelector from "./components/LocationSelector.vue";
-import DefaultMiniCredits from "./components/DefaultMiniCredits.vue";
-import FundingAcknowledgment from "./components/FundingAcknowledgment.vue";
+import FundingAcknowledgement from "./components/FundingAcknowledgement.vue";
 import CreditLogos from "./components/CreditLogos.vue";
-import wwtHUD from "./components/wwtHUD.vue";
-import { BackgroundImageset, skyBackgroundImagesets } from "./background";
+import GeolocationButton from "./components/GeolocationButton.vue";
+import WwtHud from "./components/WwtHud.vue";
 import Gallery from "./components/Gallery.vue";
-import { API_BASE_URL, MINIDS_BASE_URL, R2D, D2R } from "./utils";
+
 
 export {
   BackgroundImageset,
   KeyboardControlSettings,
-  MiniDSBase,
   Gallery,
   IconButton,
   LocationSelector,
   skyBackgroundImagesets,
-  DefaultMiniCredits,
-  FundingAcknowledgment,
+  useFullscreen,
+  useWindowShape,
+  WindowShape,
+  FundingAcknowledgement,
   CreditLogos,
-  wwtHUD,
-  API_BASE_URL,
-  MINIDS_BASE_URL,
-  R2D,
-  D2R
+  GeolocationButton,
+  WwtHud,
+  PositionCoords,
+  useGeolocation,
+  useWWTKeyboardControls,
 };
+
+export * from "./types";
+export * from "./utils";

package/src/keyboard.ts

@@ -72,10 +72,10 @@ export class KeyboardControlSettings {
   makeListener(
     actionName: KeyboardControlSettings["actionTypes"][number],
     action: () => void
-  ): (e: KeyboardEvent) => void {
-    return (e) => {
+  ): (event: KeyboardEvent) => void {
+    return (event) => {
       for (const keyPress of this[actionName]) {
-        if (keyPress.matches(e)) {
+        if (keyPress.matches(event)) {
           action();
         }
       }

package/src/mapbox.ts

@@ -0,0 +1,161 @@
+export interface MapBoxContextItem {
+  id: string;
+  // eslint-disable-next-line @typescript-eslint/naming-convention
+  mapbox_id: string;
+  text: string;
+  wikidata: string;
+  // eslint-disable-next-line @typescript-eslint/naming-convention
+  short_code?: string;
+}
+
+// The field names here come from MapBox
+export interface MapBoxFeature {
+  // eslint-disable-next-line @typescript-eslint/naming-convention
+  place_type: string[];
+  // eslint-disable-next-line @typescript-eslint/naming-convention
+  place_name: string;
+  text?: string;
+  // eslint-disable-next-line @typescript-eslint/naming-convention
+  properties: { short_code: string; };
+  center: [number, number];
+  context: MapBoxContextItem[];
+}
+
+export interface MapBoxFeatureCollection {
+  type: "FeatureCollection";
+  features: MapBoxFeature[];
+}
+
+export type MapBoxFeatureType = "country" | "region" | "postcode" | "district" | "place" | "locality" | "neighborhood" | "street" | "address";
+export type MapBoxWorldviewType = "ar" | "cn" | "in" | "jp" | "ma" | "ru" | "tr" | "us";
+
+// For countries, use the ISO 3166-1 alpha-2 country codes:
+// https://en.wikipedia.org/wiki/ISO_3166-1_alpha-2
+interface BaseMapBoxGeocodingOptions {
+  permanent?: boolean;
+  language?: string;
+  limit?: number;
+  countries?: string[];
+  types?: MapBoxFeatureType[];
+
+  // MapBox API access token
+  // eslint-disable-next-line @typescript-eslint/naming-convention
+  access_token: string;
+}
+
+interface MapBoxForwardGeocodingOptions extends BaseMapBoxGeocodingOptions {
+  autocomplete?: boolean;
+  bbox?: number;
+  format?: "geojson" | "v5";
+  proximity?: string;
+}
+
+interface MapBoxReverseGeocodingOptions extends BaseMapBoxGeocodingOptions {
+  worldview?: MapBoxWorldviewType[];
+}
+
+interface MapBoxAdjustedGeocodingParams {
+  countries?: string;
+  types?: string;
+ }
+
+type MapBoxQueryOptions<T extends BaseMapBoxGeocodingOptions> = {
+  [K in keyof Omit<T, "countries" | "types">]: T[K];
+} & MapBoxAdjustedGeocodingParams;
+
+const DEFAULT_RELEVANT_FEATURE_TYPES = ["postcode", "place", "region", "country"];
+const NA_COUNTRIES = ["United States", "Canada", "Mexico"];
+const NA_ABBREVIATIONS = ["US-", "CA-", "MX-"];
+
+export function findBestFeature(collection: MapBoxFeatureCollection, relevantTypes?: MapBoxFeatureType[]): MapBoxFeature | null {
+  const types = relevantTypes ?? DEFAULT_RELEVANT_FEATURE_TYPES;
+  const relevantFeatures = collection.features.filter(feature => types.some(type => feature.place_type.includes(type)));
+  const placeFeature = relevantFeatures.find(feature => feature.place_type.includes("place")) ?? (relevantFeatures.find(feature => feature.place_type.includes("postcode")) ?? undefined);
+  if (placeFeature !== undefined) {
+    return placeFeature;
+  }
+  const regionFeature = relevantFeatures.find(feature => feature.place_type.includes("region"));
+  if (regionFeature !== undefined) {
+    return regionFeature;
+  }
+  const countryFeature = relevantFeatures.find(feature => feature.place_type.includes("country"));
+  if (countryFeature !== undefined) {
+    return countryFeature;
+  }
+  return null;
+}
+
+export function textForMapboxFeature(feature: MapBoxFeature, relevantTypes?: MapBoxFeatureType[]): string {
+  const types = relevantTypes ?? DEFAULT_RELEVANT_FEATURE_TYPES;
+  const pieces: string[] = [];
+  if (feature.text) {
+    pieces.push(feature.text);
+  }
+  feature.context.forEach(item => {
+    const itemType = item.id.split(".")[0];
+    if (!types.includes(itemType)) {
+      return;
+    }
+    let text = null as string | null;
+    const shortCode = item.short_code;
+    if (itemType === "region" && shortCode != null) {
+      if (NA_ABBREVIATIONS.some(abbr => shortCode.startsWith(abbr))) {
+        text = shortCode.substring(3);
+      }
+    } else if (itemType === "country") {
+      const itemText = item.text;
+      if (!NA_COUNTRIES.includes(itemText)) {
+        text = itemText; 
+      }
+    }
+    if (text !== null) {
+      pieces.push(text);
+    }
+  });
+  return pieces.join(", ");
+}
+
+export function textForMapboxResults(results: MapBoxFeatureCollection, relevantTypes?: MapBoxFeatureType[]): string {
+  const feature = findBestFeature(results, relevantTypes);
+  return feature !== null ? textForMapboxFeature(feature) : "";
+}
+
+function convertOptionsToQueryParams<T extends BaseMapBoxGeocodingOptions>(options: T): MapBoxQueryOptions<T> {
+  const { types, countries, ...params } = options;
+  const queryParams = params as MapBoxQueryOptions<T>;
+  queryParams.types = (types ?? ["place", "postcode"]).join(",");
+  if (countries) {
+    queryParams.countries = countries.join(",");
+  }
+  return queryParams;
+}
+
+function searchParams(options: MapBoxForwardGeocodingOptions | MapBoxReverseGeocodingOptions): URLSearchParams {
+  const search = new URLSearchParams();
+  const queryParams = convertOptionsToQueryParams(options);
+  Object.entries(queryParams).forEach(([key, value]) => search.set(key, value.toString()));
+  return search;
+}
+
+export async function textForLocation(longitudeDeg: number, latitudeDeg: number, options: MapBoxReverseGeocodingOptions): Promise<string> {
+  const search = searchParams(options);
+  const url = `https://api.mapbox.com/geocoding/v5/mapbox.places/${longitudeDeg},${latitudeDeg}.json?${search.toString()}`;
+  return fetch(url)
+    .then(response => response.json())
+    .then((result: MapBoxFeatureCollection) => {
+      if (result.features.length === 0) {
+        const ns = latitudeDeg >= 0 ? 'N' : 'S';
+        const ew = longitudeDeg >= 0 ? 'E' : 'W';
+        const lat = Math.abs(latitudeDeg).toFixed(3);
+        const lon = Math.abs(longitudeDeg).toFixed(3);
+        return `${lat}° ${ns}, ${lon}° ${ew}`;
+      }
+      return textForMapboxResults(result);
+    });
+}
+
+export async function geocodingInfoForSearch(searchText: string, options: MapBoxForwardGeocodingOptions): Promise<MapBoxFeatureCollection> {
+  const search = searchParams(options);
+  const url = `https://api.mapbox.com/geocoding/v5/mapbox.places/${searchText}.json?${search.toString()}`;
+  return fetch(url).then(response => response.json());
+}

package/src/types.ts

@@ -0,0 +1,149 @@
+import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
+import { CircleMarkerOptions, TileLayerOptions } from "leaflet";
+import { engineStore } from "@wwtelescope/engine-pinia";
+
+export type WWTEngineStore = ReturnType<typeof engineStore>;
+
+/* Funding acknowledgement */
+
+export interface FundingAcknowledgementProps {
+  color?: string;
+  backgroundColor?: string;
+}
+
+/* Credit logos */
+
+export interface CreditLogosProps {
+  visible?: boolean;
+  logoSize?: string;
+}
+
+/* Gallery */
+
+export interface GalleryProps {
+  wtmlUrl: string;
+  columns?: number | string;
+  width?: string;
+  maxHeight?: string;
+  title?: string;
+  selectedColor?: string;
+  singleSelect?: boolean;
+  highlightLastOnly?: boolean;
+  previewIndex?: number;
+  closedText?: string;
+}
+
+/* Geolocation button */
+
+export type GeolocationButtonDensity = null | "default" | "comfortable" | "compact";
+
+export interface GeolocationButtonProps {
+  color?: string;
+  disabled?: boolean;
+  size?: string;
+  density?: GeolocationButtonDensity;
+  elevation?: string;
+  hideButton?: boolean;
+  showTextLabel?: boolean;
+  showCoords?: boolean;
+  showTextProgress?: boolean;
+  showProgressCircle?: boolean;
+  useTextButton?: boolean;
+  progressCircleSize?: number;
+  label?: string;
+  id?: string;
+  trueIcon?: string;
+  falseIcon?: string;
+  backgroundColor?: string;
+  showPermissions?: boolean;
+}
+
+/* Icon button */
+// We need to do this because FontAwesome doesn't export the prop types
+export type FontAwesomeIconProps = InstanceType<typeof FontAwesomeIcon>["$props"];
+export type SizeType = Extract<FontAwesomeIconProps, 'size'>;
+
+export interface IconButtonProps {
+  modelValue?: boolean;
+  faIcon?: string;
+  mdIcon?: string;
+  color?: string;
+  focusColor?: string;
+  backgroundColor?: string;
+  boxShadow?: boolean;
+  border?: boolean;
+  longPressTimeMs?: number;
+  tooltipText?: string;
+  tooltipLocation?: string;
+  tooltipOnClick?: boolean;
+  tooltipOnFocus?: boolean;
+  tooltipOnHover?: boolean;
+  tooltipOffset?: string | number;
+  showTooltip?: boolean;
+  faSize?: SizeType;
+  mdSize?: string;
+}
+
+
+/* Location selector */
+
+export interface LocationDeg {
+  longitudeDeg: number;
+  latitudeDeg: number;
+}
+
+export interface LeafletMapOptions extends TileLayerOptions {
+  templateUrl: string;
+  initialLocation?: LocationDeg;
+  initialZoom?: number;
+}
+
+export interface GeoJSONProp {
+  url?: string;
+  geojson?: GeoJSON.FeatureCollection | GeoJSON.Feature | GeoJSON.GeometryCollection;
+  style: CircleMarkerOptions;
+}
+
+export interface PlaceDeg extends LocationDeg { 
+  color?: string;
+  fillColor?: string;
+  fillOpacity?: number;
+  radius?: number;
+  name?: string;
+}
+
+export interface LocationSelectorProps {
+  activatorColor?: string;
+  detectLocation?: boolean;
+  modelValue?: LocationDeg;
+  mapOptions?: LeafletMapOptions;
+  initialPlace?: PlaceDeg;
+  places?: PlaceDeg[];
+  placeCircleOptions?: CircleMarkerOptions;
+  placeSelectable?: boolean;
+  selectable?: boolean;
+  selectedCircleOptions?: CircleMarkerOptions;
+  selectionEvent?: "click" | "dblclick";
+  worldRadii?: boolean;
+  geoJsonFiles?: GeoJSONProp[];
+  layers?: L.Layer[];
+}
+
+/* WWT HUD */
+
+export interface HUDLocation {
+  top?: string | number,
+  left?: string | number,
+  bottom?: string | number,
+  right?: string | number,
+}
+
+export interface WwtHUDProps {
+  location?: HUDLocation;
+  offsetCenter?: { x: number; y: number };
+  otherVariables?: Object;  // eslint-disable-line @typescript-eslint/ban-types
+  fontSize?: string;
+  backgroundColor?: string | null;
+  textShadow?: string | null;
+  store: ReturnType<typeof engineStore>;
+}

package/src/utils.ts

@@ -3,3 +3,36 @@ export const R2D = 180 / Math.PI;
 
 export const API_BASE_URL = "https://api.cosmicds.cfa.harvard.edu";
 export const MINIDS_BASE_URL = `${API_BASE_URL}/minids`;
+
+export function supportsTouchscreen() {
+  // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+  // @ts-ignore
+  return ('ontouchstart' in window) || ('ontouchstart' in document.documentElement) || !!window.navigator.msPointerEnabled;
+}
+
+export function isMobile(userAgent: string): boolean {
+  return (/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(userAgent));
+}
+
+export function blurActiveElement() {
+  const active = document.activeElement;
+  if (active instanceof HTMLElement) {
+    active.blur();
+  }
+}
+
+// Modified from https://stackoverflow.com/a/37319954
+export function filterInPlace<T>(array: T[], condition: (t: T) => boolean) {
+  let i = 0;
+  let j = 0;
+  while (i < array.length) {
+    const value = array[i];
+    if (condition(value)) {
+      array[j++] = value;
+      i++;
+    }
+  }
+
+  array.length = j;
+  return array;
+}

package/src/wwt-utils.ts

@@ -0,0 +1,51 @@
+import { engineStore } from "@wwtelescope/engine-pinia";
+import { KeyboardControlSettings } from "./keyboard";
+type WWTEngineStore = ReturnType<typeof engineStore>;
+
+function doZoom(store: WWTEngineStore, zoomIn: boolean) {
+  const factor = zoomIn ? 1 / 1.3 : 1.3;
+  store.zoom(factor);
+}
+
+function doMove(store: WWTEngineStore, x: number, y: number) {
+  store.move({ x, y });
+}
+
+export function useWWTKeyboardControls(store: WWTEngineStore, element?: Window | HTMLElement): KeyboardControlSettings {
+  const root = element || window;
+  const kcs = new KeyboardControlSettings({});
+  root.addEventListener(
+    "keydown",
+    kcs.makeListener("zoomIn", () => doZoom(store, true)) as EventListener
+  );
+  root.addEventListener(
+    "keydown",
+    kcs.makeListener("zoomOut", () => doZoom(store, false)) as EventListener
+  );
+  root.addEventListener(
+    "keydown",
+    kcs.makeListener("moveUp", () =>
+      doMove(store, 0, kcs.moveAmount)
+    ) as EventListener
+  );
+  root.addEventListener(
+    "keydown",
+    kcs.makeListener("moveDown", () =>
+      doMove(store, 0, -kcs.moveAmount)
+    ) as EventListener
+  );
+  root.addEventListener(
+    "keydown",
+    kcs.makeListener("moveLeft", () =>
+      doMove(store, kcs.moveAmount, 0)
+    ) as EventListener
+  );
+  root.addEventListener(
+    "keydown",
+    kcs.makeListener("moveRight", () =>
+      doMove(store, -kcs.moveAmount, 0)
+    ) as EventListener
+  );
+
+  return kcs;
+}