@trailstash/ultra 3.0.0-dev

package/components/ultra-ide.js

@@ -0,0 +1,298 @@
+import equal from "deep-equal";
+import bbox from "@turf/bbox";
+import pick from "lodash.pick";
+import { h } from "../lib/dom.js";
+import { setBaseStyle } from "../lib/style.js";
+import { setSetting, parseSettings } from "../lib/settings.js";
+import {
+  getAutoRunFromQueryParams,
+  getOptionsFromQueryParams,
+  getQueryFromQueryParams,
+  toQueryParams,
+} from "../lib/queryParams.js";
+import {
+  localStorage,
+  optionsFromStorage,
+  queryFromStorage,
+} from "../lib/localStorage.js";
+import { UltraMap } from "./ultra-map.js";
+
+const style = new CSSStyleSheet();
+style.replaceSync(`
+  :host {
+    height: 100%;
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+  }
+  main {
+    display: flex;
+    flex-direction: row;
+    flex-grow: 1;
+  }
+  code-editor {
+    width: 45%;
+    border: none;
+    border-right: 1px solid #8f8f9d;
+    resize: horizontal;
+    overflow: auto;
+  }
+  ultra-map {
+    flex-grow: 1;
+    height: 100%;
+  }
+  @media (max-width: 900px) {
+    main {
+      flex-direction: column;
+    }
+    code-editor {
+      width: auto;
+      height: 45%;
+      resize: vertical;
+    }
+  }
+  code-editor.fs {
+    display: none;
+  }
+  .fs style-picker,
+  .fs share-button,
+  .fs help-modal,
+  .fs download-button {
+    display: none;
+  }
+  .fs run-button {
+    z-index: 1;
+    display: block;
+    position: fixed;
+    top: 4px;
+    left: 4px;
+  }
+  fs-button {
+    z-index: 1;
+    position: fixed;
+    top: 4px;
+    right: 4px;
+  }
+  :host(:fullscreen) code-editor, :host(:fullscreen) nav-bar {
+    display: none;
+  }
+  run-button, download-button, share-button, style-picker, help-modal {
+    margin-right: 4px;
+  }
+`);
+
+export class UltraIDE extends HTMLElement {
+  autoRun = false;
+  query = "";
+  settings = {};
+  styles = [];
+  title = "Ultra";
+  icon = "/logo.svg";
+  help;
+
+  static MAP_INIT_SETTINGS = [
+    "options",
+    "controls",
+    "mapStyle",
+    "extraQueryProviders",
+    "persistState",
+  ];
+  static props = ["settings", "query", "styles", "title", "icon", "help"];
+
+  constructor() {
+    super();
+    // Bind methods
+    this.onClickRun = this.onClickRun.bind(this);
+    this.onClickAbort = this.onClickAbort.bind(this);
+    this.resetMap = this.resetMap.bind(this);
+    this.onAuxClickRun = this.onAuxClickRun.bind(this);
+    this.onChangeCode = this.onChangeCode.bind(this);
+    this.onMoveEnd = this.onMoveEnd.bind(this);
+    this.onChangeStyle = this.onChangeStyle.bind(this);
+    this.onEnterFullscreen = this.onEnterFullscreen.bind(this);
+    this.onExitFullscreen = this.onExitFullscreen.bind(this);
+  }
+
+  connectedCallback() {
+    // Create & populate Shadow DOM
+    const shadow = this.attachShadow({ mode: "open" });
+    shadow.adoptedStyleSheets.push(style);
+    shadow.appendChild(
+      h(
+        "nav-bar",
+        { title: this.title, icon: this.icon },
+        h("fs-button", { slot: "fs-button" }),
+        h(
+          "span",
+          { slot: "buttons" },
+          h("run-button"),
+          h("download-button"),
+          h("share-button"),
+          h("style-picker", { styles: this.styles }),
+          h("help-modal", this.help ? { help: this.help } : {}),
+        ),
+      ),
+    );
+
+    // Get initial query and center&zoom
+    this.query = getQueryFromQueryParams() || queryFromStorage() || this.query;
+    this.autoRun = getAutoRunFromQueryParams();
+    this.settings = { persistState: true, ...this.settings };
+
+    shadow.appendChild(
+      h(
+        "main",
+        {},
+        h("code-editor", {
+          autofocus: true,
+          source: this.query.then ? "" : this.query,
+        }),
+        h("ultra-map", pick(this.settings, UltraIDE.MAP_INIT_SETTINGS)),
+      ),
+    );
+
+    this.refs = {
+      navBar: shadow.querySelector("nav-bar"),
+      codeEditor: shadow.querySelector("code-editor"),
+      mapLibre: shadow.querySelector("ultra-map"),
+      runButton: shadow.querySelector("run-button"),
+      downloadButton: shadow.querySelector("download-button"),
+      shareButton: shadow.querySelector("share-button"),
+      stylePicker: shadow.querySelector("style-picker"),
+      fsButton: shadow.querySelector("fs-button"),
+    };
+
+    // Setup Event Listeners
+    this.refs.codeEditor.addEventListener("change", this.onChangeCode);
+    this.refs.runButton.addEventListener("run", this.onClickRun);
+    this.refs.codeEditor.addEventListener("run", this.onClickRun);
+    this.refs.runButton.addEventListener("auxclick", this.onAuxClickRun);
+    this.refs.runButton.addEventListener("abort", this.onClickAbort);
+    this.refs.stylePicker.addEventListener("change", this.onChangeStyle);
+    this.refs.fsButton.addEventListener(
+      "enter-fullscreen",
+      this.onEnterFullscreen,
+    );
+    this.refs.fsButton.addEventListener(
+      "exit-fullscreen",
+      this.onExitFullscreen,
+    );
+    this.refs.mapLibre.map.on("moveend", this.onMoveEnd);
+    this.refs.mapLibre.map.once("idle", this.onMoveEnd);
+
+    // initialize share values
+    this.refs.shareButton.query = this.query;
+
+    // set query when resolved if a promise
+    if (this.query.then) {
+      this.query.then((query) => {
+        this.refs.codeEditor.source = query;
+        this.refs.shareButton.query = this.query;
+        if (this.autoRun) {
+          this.onClickRun();
+        }
+      });
+    } else if (this.autoRun) {
+      this.onClickRun();
+    }
+  }
+
+  async onClickRun() {
+    this.refs.runButton.loading = true; // Loading button state
+    this.resetMap(); // clear settings from previous run
+    try {
+      // basic query/option parsing
+      const settings = {
+        ...this.settings,
+        ...parseSettings(this.query),
+      };
+      Object.assign(this.refs.mapLibre, {
+        ...pick(settings, UltraMap.RUNTIME_SETTINGS),
+        mapStyle: setBaseStyle(settings.mapStyle, this.settings.mapStyle),
+      });
+
+      this.refs.downloadButton.data = null;
+      this.controller = new AbortController();
+      this.refs.downloadButton.data = await this.refs.mapLibre.run(
+        this.controller,
+      );
+      delete this.controller;
+
+      this.refs.runButton.loading = false;
+    } catch (err) {
+      this.resetMap();
+      this.refs.mapLibre.run();
+      this.refs.runButton.loading = false;
+      if (err.name != "AbortError") {
+        alert(err);
+        throw err;
+      }
+    }
+  }
+  onClickAbort() {
+    if (this.controller) {
+      this.controller.abort();
+      delete this.controller;
+    }
+    this.resetMap();
+    this.refs.mapLibre.run();
+    this.refs.runButton.loading = false;
+  }
+  resetMap() {
+    Object.assign(
+      this.refs.mapLibre,
+      pick(
+        {
+          ...UltraMap.defaults,
+          mapStyle: this.settings.mapStyle || UltraMap.defaults.mapStyle,
+        },
+        UltraMap.RUNTIME_SETTINGS,
+      ),
+    );
+  }
+  async onAuxClickRun() {
+    const params = { query: this.query, mode: "map" };
+    const settings = parseSettings(this.query);
+    if (
+      (settings.options?.center === undefined ||
+        settings.options?.zoom === undefined) &&
+      settings.options?.bounds === undefined
+    ) {
+      params.center = this.refs.mapLibre.center.toArray();
+      params.zoom = this.refs.mapLibre.zoom;
+    }
+    window.location = toQueryParams(params);
+  }
+  onChangeCode() {
+    this.query = this.refs.codeEditor.source;
+    this.refs.shareButton.query = this.query;
+    localStorage.setItem("query", this.query);
+  }
+  onMoveEnd() {
+    const zoom = this.refs.mapLibre.zoom;
+    const center = this.refs.mapLibre.center.toArray();
+    this.refs.shareButton.zoom = zoom;
+    this.refs.shareButton.center = center;
+  }
+  onChangeStyle(e) {
+    this.refs.codeEditor.source = setSetting(this.query, {
+      style: e.detail.value,
+    });
+    const settings = parseSettings(this.query);
+    this.refs.mapLibre.mapStyle = setBaseStyle(
+      settings.mapStyle,
+      this.settings.mapStyle,
+    );
+    this.refs.mapLibre.run();
+  }
+
+  onEnterFullscreen() {
+    this.refs.navBar.classList.add("fs");
+    this.refs.codeEditor.classList.add("fs");
+  }
+
+  onExitFullscreen() {
+    this.refs.navBar.classList.remove("fs");
+    this.refs.codeEditor.classList.remove("fs");
+  }
+}

package/components/ultra-loader.js

@@ -0,0 +1,60 @@
+import { h } from "../lib/dom.js";
+import {
+  getConfigFromQueryParams,
+  getModeFromQueryParams,
+} from "../lib/queryParams.js";
+import { UltraMap } from "./ultra-map.js";
+import { UltraIDE } from "./ultra-ide.js";
+import pick from "lodash.pick";
+
+import { defaultMode, modes } from "ultra-config";
+
+const style = new CSSStyleSheet();
+style.replaceSync(`
+  :host {
+    height: 100%;
+    width: 100%;
+    display: flex;
+  }
+`);
+
+export class UltraLoader extends HTMLElement {
+  constructor() {
+    super();
+  }
+
+  async connectedCallback() {
+    const shadow = this.attachShadow({ mode: "open" });
+    shadow.adoptedStyleSheets.push(style);
+
+    let mode = getModeFromQueryParams() || defaultMode;
+    let config = modes[mode];
+
+    const remoteConfig = await getConfigFromQueryParams();
+    if (remoteConfig) {
+      mode = getModeFromQueryParams() || remoteConfig.defaultMode;
+      config = remoteConfig.modes[mode];
+    }
+
+    if (config.title) {
+      document.title = config.title;
+    }
+    if (config.icon) {
+      document.head.querySelector("link[rel=icon]").href = config.icon;
+    }
+
+    if (mode === "map") {
+      shadow.appendChild(
+        h(
+          "ultra-map",
+          pick(config.settings, [
+            ...UltraMap.INIT_SETTINGS,
+            ...UltraMap.CONFIG_SETTINGS,
+          ]),
+        ),
+      );
+    } else {
+      shadow.appendChild(h("ultra-ide", pick(config, UltraIDE.props)));
+    }
+  }
+}

package/components/ultra-map.js

@@ -0,0 +1,312 @@
+import pick from "lodash.pick";
+import bbox from "@turf/bbox";
+import { h } from "../lib/dom.js";
+import { setQueryBounds } from "../lib/bounds.js";
+import { setBaseStyle } from "../lib/style.js";
+import { parseSettings } from "../lib/settings.js";
+import queryProviders from "../lib/queryProviders/index.js";
+import AutoProvider from "../lib/queryProviders/auto.js";
+import {
+  getOptionsFromQueryParams,
+  getQueryFromQueryParams,
+} from "../lib/queryParams.js";
+import { getStyle } from "../lib/style.js";
+import { handleStyleImageMissing } from "../lib/sprites.js";
+import { handleMouseClick, handleMouseMove } from "../lib/queryMap.js";
+import { localStorage, optionsFromStorage } from "../lib/localStorage.js";
+
+const css = new CSSStyleSheet();
+css.replaceSync(`
+  :host, main {
+    height: 100%;
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+  }
+`);
+
+export class UltraMap extends HTMLElement {
+  #run;
+  #init;
+  #shadow;
+
+  #cachedType;
+  #cachedQuery;
+  #cachedSource;
+
+  #autoProvider;
+
+  static defaults = {
+    loadSettingsFromQueryParams: false,
+    type: "auto",
+    query: "",
+    server: null,
+    mapStyle: "https://demotiles.maplibre.org/style.json",
+    popupTemplate: null,
+    querySources: ["ultra"],
+    options: {},
+    controls: [],
+    fitBounds: false,
+    extraQueryProviders: {},
+    persistState: false,
+  };
+
+  loadSettingsFromQueryParams = UltraMap.defaults.loadSettingsFromQueryParams;
+
+  type = UltraMap.defaults.type;
+  query = UltraMap.defaults.query;
+  server = UltraMap.defaults.server;
+
+  mapStyle = UltraMap.defaults.mapStyle;
+
+  popupTemplate = UltraMap.defaults.popupTemplate;
+  querySources = UltraMap.defaults.querySources;
+
+  options = UltraMap.defaults.options;
+  controls = UltraMap.defaults.controls;
+
+  fitBounds = UltraMap.defaults.fitBounds;
+
+  persistState = UltraMap.defaults.persistState;
+
+  extraQueryProviders = UltraMap.defaults.extraQueryProviders;
+
+  static CONFIG_SETTINGS = [
+    "extraQueryProviders",
+    "loadSettingsFromQueryParams",
+    "persistState",
+  ];
+  static INIT_SETTINGS = [
+    "options",
+    "controls",
+    "type",
+    "server",
+    "popupTemplate",
+    "querySources",
+    "query",
+    "fitBounds",
+    "mapStyle",
+  ];
+  static RUNTIME_SETTINGS = [
+    "type",
+    "server",
+    "popupTemplate",
+    "querySources",
+    "query",
+    "fitBounds",
+    "mapStyle",
+  ];
+
+  constructor() {
+    super();
+    this.#run = this.#runUnbound.bind(this);
+    this.run = this.run.bind(this);
+    this.#init = this.#initUnbound.bind(this);
+    this.onMoveEnd = this.onMoveEnd.bind(this);
+  }
+
+  get map() {
+    return this.refs?.mapLibre?.map;
+  }
+  get zoom() {
+    return this.refs?.mapLibre?.zoom;
+  }
+  get center() {
+    return this.refs?.mapLibre?.center;
+  }
+
+  connectedCallback() {
+    this.#shadow = this.attachShadow({ mode: "open" });
+    this.#shadow.adoptedStyleSheets.push(css);
+
+    if (this.loadSettingsFromQueryParams) {
+      return Promise.resolve(getQueryFromQueryParams() || config.query).then(
+        async (query) => {
+          const querySettings = parseSettings(query);
+          const settings = {
+            ...this,
+            ...querySettings,
+            options: {
+              ...this.options,
+              ...querySettings.options,
+              ...(this.persistState ? optionsFromStorage() : {}),
+              ...getOptionsFromQueryParams(),
+            },
+          };
+          Object.assign(this, {
+            ...pick(settings, [
+              ...UltraMap.INIT_SETTINGS,
+              ...UltraMap.RUNTIME_SETTINGS,
+            ]),
+            mapStyle: setBaseStyle(settings.mapStyle, this.mapStyle),
+          });
+
+          return this.#init(await getStyle(this.mapStyle));
+        },
+      );
+    } else if (this.persistState) {
+      this.options = {
+        ...this.options,
+        ...optionsFromStorage(),
+        ...getOptionsFromQueryParams(),
+      };
+    }
+
+    if (!this.mapStyle || typeof this.mapStyle === "string") {
+      return this.#init(this.mapStyle);
+    } else {
+      return getStyle(this.mapStyle).then(this.#init);
+    }
+  }
+
+  #initUnbound(mapStyle) {
+    this.refs = {
+      mapLibre: h("map-libre", {
+        mapStyle,
+        options: this.options,
+        controls: this.controls,
+      }),
+    };
+    this.#shadow.appendChild(h("main", {}, this.refs.mapLibre));
+
+    this.refs.mapLibre.map.on("click", (e) =>
+      handleMouseClick(
+        e,
+        this.#popupTemplate,
+        this.#popupContextBuilder,
+        this.querySources,
+      ),
+    );
+    this.refs.mapLibre.map.on("mousemove", (e) =>
+      handleMouseMove(e, this.#popupTemplate, this.querySources),
+    );
+    this.refs.mapLibre.map.on("styleimagemissing", handleStyleImageMissing);
+    this.refs.mapLibre.map.on("moveend", this.onMoveEnd);
+    this.refs.mapLibre.map.once("idle", this.onMoveEnd);
+
+    return this.#run().then((data) => {
+      if (
+        this.#fitBounds &&
+        !this.options.bounds &&
+        (this.options.zoom === undefined || !this.options.center)
+      ) {
+        if (
+          this.#cachedSource?.type === "geojson" &&
+          typeof this.#cachedSource?.data === "object" &&
+          (this.#cachedSource.data.features?.length > 0 ||
+            this.#cachedSource.data.geometry)
+        ) {
+          this.refs.mapLibre.map.fitBounds(
+            bbox(this.#cachedSource.data),
+            typeof this.#fitBounds === "object"
+              ? this.#fitBounds
+              : { padding: 100, maxZoom: 17, animate: false },
+          );
+        }
+      }
+      return data;
+    });
+  }
+
+  async run(controller) {
+    this.refs.mapLibre.mapStyle = await getStyle(this.mapStyle);
+    const data = await this.#run(controller);
+    if (this.#fitBounds) {
+      if (
+        this.#cachedSource?.type === "geojson" &&
+        typeof this.#cachedSource?.data === "object" &&
+        (this.#cachedSource.data.features?.length > 0 ||
+          this.#cachedSource.data.geometry)
+      ) {
+        this.refs.mapLibre.map.fitBounds(
+          bbox(this.#cachedSource.data),
+          typeof this.#fitBounds === "object"
+            ? this.#fitBounds
+            : { padding: 100, maxZoom: 17, animate: false },
+        );
+      }
+    }
+    return data;
+  }
+  async #runUnbound(controller) {
+    if (!this.query) {
+      return;
+    }
+
+    if (!controller) {
+      controller = new AbortController();
+    }
+
+    const queryProvider = this.#queryProviders[this.type];
+    if (!queryProvider) {
+      throw new Error(`invalid query provider: ${this.type}`);
+    }
+    const query = setQueryBounds(this.query, this.refs.mapLibre.bounds);
+    if (
+      !this.#cachedSource ||
+      this.type !== this.#cachedType ||
+      query !== this.#cachedQuery
+    ) {
+      this.#cachedQuery = query;
+      this.#cachedType = this.type;
+      this.#cachedSource = await queryProvider.source(query, controller, {
+        server: this.server,
+        bounds: this.refs.mapLibre.bounds,
+      });
+    }
+    this.refs.mapLibre.mapStyle = await getStyle(this.mapStyle, {
+      // Don't love this...
+      source: this.#cachedSource,
+      layers: queryProvider.layers ? queryProvider.layers("ultra") : [],
+    });
+    return this.#cachedSource.data;
+  }
+
+  get #queryProviders() {
+    if (!this.#autoProvider) {
+      this.#autoProvider = new AutoProvider({
+        ...queryProviders,
+        ...this.extraQueryProviders,
+      });
+    }
+    return {
+      auto: this.#autoProvider,
+      ...queryProviders,
+      ...this.extraQueryProviders,
+    };
+  }
+
+  get #fitBounds() {
+    if (this.fitBounds) {
+      return this.fitBounds;
+    }
+    const queryProvider = this.#queryProviders[this.type];
+    if (queryProvider && queryProvider.fitBounds) {
+      return queryProvider.fitBounds;
+    }
+    return this.fitBounds;
+  }
+  get #popupTemplate() {
+    if (this.popupTemplate) {
+      return this.popupTemplate;
+    }
+    const queryProvider = this.#queryProviders[this.type];
+    if (queryProvider && queryProvider.popupTemplate) {
+      return queryProvider.popupTemplate;
+    }
+    return this.popupTemplate;
+  }
+  get #popupContextBuilder() {
+    const queryProvider = this.#queryProviders[this.type];
+    if (queryProvider && queryProvider.popupContextBuilder) {
+      return queryProvider.popupContextBuilder;
+    }
+  }
+
+  onMoveEnd() {
+    const zoom = this.refs.mapLibre.zoom;
+    const center = this.refs.mapLibre.center.toArray();
+    localStorage.setItem("mapZoom", zoom);
+    localStorage.setItem("mapCenter", center);
+  }
+}

package/configs/minimal.js

@@ -0,0 +1,9 @@
+export const defaultMode = "ide";
+export const modes = {
+  ide: {
+    settings: {},
+  },
+  map: {
+    settings: {},
+  },
+};