@trailstash/ultra 3.0.0-dev

package/build-examples-docs.js

@@ -0,0 +1,104 @@
+import fs from "fs";
+import path from "path";
+import { parseSettings } from "./lib/settings.js";
+
+function generateMarkdownForExample(config, file, queryContent, dir) {
+  const { title, description } = config;
+  const params = new URLSearchParams();
+  params.set("query", queryContent);
+  if (config.options?.center && config.options?.zoom !== undefined) {
+    params.set(
+      "m",
+      `${config.options.zoom}/${config.options.center[1]}/${config.options.center[0]}`,
+    );
+  }
+  let html = `
+# ${title}
+
+${description}
+
+<iframe src="/#map&query=${encodeURIComponent(queryContent)}" width="100%" style="border:none; height:400px"></iframe>
+
+\`\`\`
+${queryContent}
+\`\`\`
+<br>
+<a target="_blank" href="/#map&${params.toString()}">View Map on Overpass Ultra</a>
+<br>
+<a target="_blank" href="/#${params.toString()}">Edit Query on Overpass Ultra</a>`;
+  if (dir.startsWith("MapLibre-Examples"))
+    html += `<br>
+<a target="_blank" href="https://maplibre.org/maplibre-gl-js/docs/examples/${file.replace(".ultra", "")}/">View MapLibre Example</a>
+`;
+  return html;
+}
+
+function generateMarkdownIndexFileOfAllExamples(examplesFolder, indexArray) {
+  let indexMarkdown = "# Overview \n\n";
+  const indexMdFile = path.join(examplesFolder, "index.md");
+  if (fs.existsSync(indexMdFile)) {
+    indexMarkdown = fs.readFileSync(indexMdFile, "utf-8");
+  }
+  for (const indexArrayItem of indexArray) {
+    indexMarkdown += `
+## [${indexArrayItem.title}](./${indexArrayItem.mdFileName})
+
+[![${indexArrayItem.description}](../assets/${examplesFolder}/${indexArrayItem.mdFileName.replace(".md", ".png")})](./${indexArrayItem.mdFileName})
+
+
+${indexArrayItem.description}
+`;
+  }
+  return indexMarkdown;
+}
+
+/**
+ * This takes the examples folder with all the html files and generates a markdown file for each of them.
+ * It also create an index file with all the examples and their images.
+ */
+function generateExamplesFolder(examplesFolder) {
+  const examplesDocsFolder = path.join("docs", examplesFolder);
+  if (fs.existsSync(examplesDocsFolder)) {
+    fs.rmSync(examplesDocsFolder, { recursive: true, force: true });
+  }
+  fs.mkdirSync(examplesDocsFolder);
+  const files = fs
+    .readdirSync(examplesFolder)
+    .filter((f) => f.endsWith(".ultra"));
+  const indexArray = [];
+  for (const file of files) {
+    const queryFile = path.join(examplesFolder, file);
+    const queryContent = fs.readFileSync(queryFile, "utf-8");
+    const config = parseSettings(queryContent);
+    // fs.writeFileSync(path.join(examplesDocsFolder, file), queryContent);
+    const mdFileName = file.replace(".ultra", ".md");
+    indexArray.push({
+      title: config.title,
+      mdFileName,
+      description: config.title,
+      queryContent,
+    });
+    const exampleMarkdown = generateMarkdownForExample(
+      config,
+      file,
+      queryContent,
+      examplesFolder,
+    );
+    fs.writeFileSync(
+      path.join(examplesDocsFolder, mdFileName),
+      exampleMarkdown,
+    );
+  }
+
+  const indexMarkdown = generateMarkdownIndexFileOfAllExamples(
+    examplesFolder,
+    indexArray,
+  );
+  fs.writeFileSync(path.join(examplesDocsFolder, "index.md"), indexMarkdown);
+}
+
+// !!Main flow start here!!
+generateExamplesFolder(process.argv["2"] || "examples");
+console.log(
+  "Docs generation completed, to see it in action run\n npm run start:docs",
+);

package/build-examples-images.js

@@ -0,0 +1,87 @@
+import path from "path";
+import fs from "fs";
+import puppeteer from "puppeteer";
+
+const exampleName = process.argv[2];
+const useLocalhost = process.argv.length > 3 && process.argv[3] === "serve";
+
+const browser = await puppeteer.launch({ headless: true });
+
+const page = await browser.newPage();
+// set viewport and double deviceScaleFactor to get a closer shot of the map
+await page.setViewport({
+  width: 600,
+  height: 250,
+  deviceScaleFactor: 2,
+});
+
+async function createImage(exampleName) {
+  if (!fs.existsSync(`./docs/assets/${path.dirname(exampleName)}`)) {
+    fs.mkdirSync(`./docs/assets/${path.dirname(exampleName)}`);
+  }
+
+  // get the example contents
+  const query = fs.readFileSync(exampleName, "utf-8");
+  if (useLocalhost) {
+    await page.goto(
+      `http://localhost:8000/#map&query=${encodeURIComponent(query)}`,
+    );
+  } else {
+    await page.goto(
+      `https://overpass-ultra.us/#map&query=${encodeURIComponent(query)}`,
+    );
+  }
+
+  // Wait for map to load, then wait two more seconds for images, etc. to load.
+  try {
+    //await page.waitForFunction('map.loaded()');
+    const waitTime = 5000;
+    console.log(`waiting for ${waitTime} ms`);
+    await new Promise((resolve) => setTimeout(resolve, waitTime));
+  } catch (err) {
+    // map.loaded() does not evaluate to true within 3 seconds, it's probably an animated example.
+    // In this case we take the screenshot immediately.
+    console.log(`Timed out waiting for map load on ${exampleName}.`);
+  }
+
+  await page
+    .screenshot({
+      path: `./docs/assets/${exampleName.replace(".ultra", ".png")}`,
+      type: "png",
+      clip: {
+        x: 0,
+        y: 0,
+        width: 600,
+        height: 250,
+      },
+    })
+    .then(() =>
+      console.log(
+        `Created ./docs/assets/${exampleName.replace(".ultra", ".png")}`,
+      ),
+    )
+    .catch((err) => {
+      console.log(err);
+    });
+}
+
+if (exampleName.endsWith("/")) {
+  const allFiles = fs
+    .readdirSync(exampleName)
+    .filter((f) => f.endsWith(".ultra"));
+  console.log(`Generating ${allFiles.length} images.`);
+  for (const file of allFiles) {
+    await createImage(path.join(exampleName, file));
+  }
+} else if (exampleName) {
+  await createImage(exampleName);
+} else {
+  throw new Error(`
+  Usage: npm run generate-images <file-name|all> [serve]
+    file-name: the name of the example file in test/examples without the .html extension.
+    all: generate images for all examples.
+    serve: use localhost to serve examples - use 'npm run start' with this option, otherwise it will use the latest published version in npm.
+  Example: npm run build:examples-images MapLibre-Examples/3d-buildings serve`);
+}
+
+await browser.close();

package/build-sprites.sh

@@ -0,0 +1,30 @@
+#!/bin/bash
+set -e
+set -x
+
+# https://github.com/bazelbuild/rules_closure/issues/351#issuecomment-854628326
+export OPENSSL_CONF=/dev/null
+
+mkdir -p static/sprites
+
+curl -L -o maki.zip https://github.com/mapbox/maki/archive/refs/heads/main.zip
+unzip -u maki.zip
+for icon in maki-main/icons/*.svg; do
+    npx -- svg2png $icon -o ${icon%.svg*}.png -w 30 -h 30
+    rm $icon
+done
+npx -- sprite-one ./static/sprites/maki -i maki-main/icons/ --sdf
+npx -- sprite-one --ratio=2 ./static/sprites/maki@2x -i maki-main/icons/ --sdf
+cp maki-main/LICENSE* static/sprites/maki.license
+rm -rf maki.zip maki-main
+#
+curl -L -o temaki.zip https://github.com/rapideditor/temaki/archive/refs/heads/main.zip
+unzip -u temaki.zip
+for icon in temaki-main/icons/*.svg; do
+    npx -- svg2png $icon -o ${icon%.svg*}.png -w 30 -h 30
+    rm $icon
+done
+npx -- sprite-one ./static/sprites/temaki -i temaki-main/icons/ --sdf
+npx -- sprite-one --ratio=2 ./static/sprites/temaki@2x -i temaki-main/icons/ --sdf
+cp temaki-main/LICENSE* static/sprites/temaki.license
+rm -rf temaki.zip temaki-main

package/cli/build.js

@@ -0,0 +1,53 @@
+import fs from "fs";
+import path from "path";
+import process from "process";
+import { build } from "esbuild";
+import { Command, Flags } from "@oclif/core";
+
+export const ultraRoot = path.dirname(
+  path.dirname(new URL(import.meta.url).pathname),
+);
+export const buildOptions = (config) => ({
+  entryPoints: [path.join(ultraRoot, "index.js")],
+  bundle: true,
+  format: "esm",
+  outdir: path.join(ultraRoot, "static/dist"),
+  loader: {
+    ".md": "text",
+    ".css": "text",
+    ".svg": "dataurl",
+    ".ultra": "file",
+    ".geojson": "file",
+  },
+  alias: {
+    "ultra-config": config,
+  },
+});
+
+export default class Build extends Command {
+  static flags = {
+    config: Flags.string({
+      char: "c",
+      description: "configuration to use",
+      default: path.join(ultraRoot, "configs/overpass-ultra.js"),
+    }),
+  };
+
+  static description = `Build a release of Ultra`;
+
+  async run() {
+    const {
+      flags: { config },
+    } = await this.parse(Build);
+
+    await build(buildOptions(config));
+
+    if (ultraRoot !== process.cwd()) {
+      fs.cpSync(
+        path.join(ultraRoot, "static"),
+        path.join(process.cwd(), "static"),
+        { recursive: true },
+      );
+    }
+  }
+}

package/cli/serve.js

@@ -0,0 +1,34 @@
+import path from "path";
+import { context } from "esbuild";
+import { Command, Flags } from "@oclif/core";
+import Build, { buildOptions, ultraRoot } from "./build.js";
+
+export default class Serve extends Command {
+  static flags = {
+    ...Build.flags,
+    host: Flags.string({
+      char: "H",
+      description: "Host to listen on",
+      default: "localhost",
+    }),
+    port: Flags.string({
+      char: "p",
+      description: "Port number to listen on",
+      default: 8000,
+      parse: parseInt,
+    }),
+  };
+
+  static description = `Run an Ultra development server`;
+
+  async run() {
+    const {
+      args: { query },
+      flags: { config, host, port },
+    } = await this.parse(Serve);
+
+    const ctx = await context(buildOptions(config));
+    console.log(`Starting dev server on http://${host}:${port}`);
+    await ctx.serve({ host, port, servedir: path.join(ultraRoot, "static") });
+  }
+}

package/components/button-modal.js

@@ -0,0 +1,111 @@
+import { h, t } from "../lib/dom.js";
+import { style as buttonCSS } from "./button.js";
+import { normalizeCSS } from "../lib/normalize.js";
+
+export class ButtonModal extends HTMLElement {
+  constructor() {
+    super();
+  }
+  get text() {
+    return this.getAttribute("text");
+  }
+  set text(value) {
+    return this.setAttribute("text", value);
+  }
+  get icon() {
+    return this.getAttribute("icon");
+  }
+  set icon(value) {
+    return this.setAttribute("icon", value);
+  }
+
+  connectedCallback() {
+    const shadow = this.attachShadow({ mode: "open" });
+
+    const css = new CSSStyleSheet();
+    css.replaceSync(`
+      button {
+        position: relative;
+      }
+      button div span.close {
+        cursor: pointer;
+        float: right;
+      }
+      button.button-modal:after {
+        content: " ${this.text}";
+      }
+      button > div {
+        cursor: default;
+        display: none;
+        z-index: 1;
+        position: fixed;
+        top: 0;
+        bottom: 0;
+        left: 0;
+        right: 0;
+        background: rgba(0,0,0,0.5);
+      }
+      button > div.visible {
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        align-items: center;
+        padding: 20px;
+      }
+      button > div > div {
+        max-height: 100%;
+        max-width: 100%;
+        overflow: auto;
+        cursor: default;
+        background: white;
+        border: 1px solid #8f8f9d;
+        border-radius: 4px;
+        text-align: left;
+        padding: 4px 8px;
+      }
+      @media (max-width: 900px) {
+        button.button-modal:after {
+          content: "";
+        }
+      }
+    `);
+
+    shadow.adoptedStyleSheets.push(normalizeCSS);
+    shadow.adoptedStyleSheets.push(buttonCSS);
+    shadow.adoptedStyleSheets.push(css);
+
+    const div = h(
+      "div",
+      {},
+      h("span", {}, h("fa-icon", { icon: this.icon }), t(" " + this.text)),
+      h("span", { class: "close" }, "×"),
+      h("slot", { name: "modal-content" }),
+    );
+    const backdrop = h("div", {}, div);
+    const button = h(
+      "button",
+      { class: "button-modal" },
+      h("fa-icon", { icon: this.icon }),
+      backdrop,
+    );
+    this.refs = { button, div, backdrop };
+
+    button.addEventListener("click", () => {
+      this.toggle();
+    });
+    div.addEventListener("click", (e) => {
+      e.preventDefault();
+      e.stopPropagation();
+    });
+    div.querySelector("span.close").addEventListener("click", (e) => {
+      this.toggle();
+      e.preventDefault();
+      e.stopPropagation();
+    });
+
+    shadow.appendChild(button);
+  }
+  toggle() {
+    this.refs.backdrop.classList.toggle("visible");
+  }
+}

package/components/button.css

@@ -0,0 +1,22 @@
+button,
+.button {
+  background: white;
+  border: 1px solid #8f8f9d;
+  border-radius: 4px;
+  padding: 4px 8px;
+  cursor: pointer;
+  display: inline-block;
+}
+button:hover,
+.button:hover {
+  box-shadow: inset 0 0 0 99em rgba(0, 0, 0, 0.1);
+}
+button:disabled:hover,
+.button:disabled:hover {
+  box-shadow: none;
+  cursor: not-allowed;
+}
+button:active,
+.button:active {
+  box-shadow: inset 0 0 0 99em rgba(0, 0, 0, 0.2);
+}

package/components/button.js

@@ -0,0 +1,6 @@
+import { h } from "../lib/dom.js";
+import buttonStyle from "./button.css";
+import { normalizeCSS } from "../lib/normalize.js";
+
+export const style = new CSSStyleSheet();
+style.replaceSync(buttonStyle);

package/components/code-editor.js

@@ -0,0 +1,87 @@
+import { h } from "../lib/dom.js";
+
+const style = new CSSStyleSheet();
+style.replace(`
+  :host {
+    display: block;
+  }
+  textarea {
+    display: block;
+    height: 100%;
+    width: 100%;
+    margin: 0;
+    padding: 5px;
+    border: 0;
+    box-sizing: border-box;
+  }
+`);
+
+export class CodeEditor extends HTMLElement {
+  static observedAttributes = ["source"];
+  get source() {
+    return this.getAttribute("source");
+  }
+  set source(value) {
+    return this.setAttribute("source", value);
+  }
+  constructor() {
+    super();
+  }
+  attributeChangedCallback(name, oldValue, newValue) {
+    if (oldValue != newValue) {
+      this.dispatchEvent(new Event("change"));
+    }
+    if (this.refs && this.refs.textarea.value !== newValue) {
+      this.refs.textarea.value = newValue;
+    }
+  }
+  connectedCallback() {
+    const shadow = this.attachShadow({ mode: "open" });
+    shadow.adoptedStyleSheets.push(style);
+    const textarea = h(
+      "textarea",
+      { autofocus: this.autofocus, spellcheck: false },
+      this.source,
+    );
+    this.refs = { textarea };
+    shadow.appendChild(textarea);
+    textarea.addEventListener("keydown", (e) => {
+      const start = e.target.selectionStart;
+      const end = e.target.selectionEnd;
+      const textFromLastNewLine =
+        start === 0
+          ? ""
+          : e.target.value.slice(
+              e.target.value.slice(0, start).lastIndexOf("\n") + 1,
+            );
+      const leadingWhitespace =
+        textFromLastNewLine.match(/^([ \t])+/)?.[0] || "";
+
+      if (e.key == "Tab") {
+        e.preventDefault();
+        e.target.value =
+          e.target.value.substring(0, start) +
+          "  " +
+          e.target.value.substring(end);
+        e.target.selectionStart = e.target.selectionEnd = start + 2;
+      }
+      if (e.key == "Enter") {
+        e.preventDefault();
+        if (e.ctrlKey) {
+          this.dispatchEvent(new Event("run"));
+        } else {
+          e.target.value =
+            e.target.value.substring(0, start) +
+            "\n" +
+            leadingWhitespace +
+            e.target.value.substring(end);
+          e.target.selectionStart = e.target.selectionEnd =
+            start + 1 + leadingWhitespace.length;
+        }
+      }
+    });
+    textarea.addEventListener("keyup", (e) => {
+      this.source = e.target.value;
+    });
+  }
+}

package/components/download-button.js

@@ -0,0 +1,69 @@
+import { h } from "../lib/dom.js";
+import { normalizeCSS } from "../lib/normalize.js";
+import { style as buttonCSS } from "./button.js";
+
+const style = new CSSStyleSheet();
+style.replaceSync(`
+  button:after {
+    content: " Download";
+  }
+  @media (max-width: 900px) {
+    button:after {
+      content: "";
+    }
+  }
+`);
+
+export class DownloadButton extends HTMLElement {
+  #data;
+
+  constructor() {
+    super();
+  }
+  set data(data) {
+    this.#data = data;
+    this.refs.button.disabled = !this.#data;
+  }
+  get data() {
+    return this.#data;
+  }
+
+  connectedCallback() {
+    const shadow = this.attachShadow({ mode: "open" });
+
+    shadow.adoptedStyleSheets.push(normalizeCSS);
+    shadow.adoptedStyleSheets.push(buttonCSS);
+    shadow.adoptedStyleSheets.push(style);
+
+    const button = h("button", {}, h("fa-icon", { icon: "download" }));
+    button.disabled = !this.#data;
+    this.refs = { button };
+
+    button.addEventListener("click", (e) => {
+      const json = JSON.stringify(this.data);
+      const blob = new Blob([json], { type: "octet/stream" });
+      const url = window.URL.createObjectURL(blob);
+
+      const link = h("a", { download: "overpass.geojson", href: url });
+
+      // this is necessary as link.click() does not work on the latest firefox
+      link.dispatchEvent(
+        new MouseEvent("click", {
+          bubbles: true,
+          cancelable: true,
+          view: window,
+        }),
+      );
+
+      setTimeout(() => {
+        // For Firefox it is necessary to delay revoking the ObjectURL
+        window.URL.revokeObjectURL(url);
+        link.remove();
+      }, 100);
+    });
+
+    shadow.appendChild(button);
+  }
+
+  attributeChangedCallback(name, oldValue, newValue) {}
+}

package/components/fontawesome-icon.js

@@ -0,0 +1,80 @@
+import { icon, library } from "@fortawesome/fontawesome-svg-core";
+import {
+  faLink,
+  faShareNodes,
+  faQuestion,
+  faDownload,
+  faPlay,
+  faXmark,
+  faUpRightAndDownLeftFromCenter,
+  faDownLeftAndUpRightToCenter,
+  faPaintbrush,
+  faPenToSquare,
+} from "@fortawesome/free-solid-svg-icons";
+
+import { h } from "../lib/dom.js";
+import buttonStyle from "./button.css";
+import { style as buttonCSS } from "./button.js";
+import { normalizeCSS } from "../lib/normalize.js";
+
+library.add(faLink);
+library.add(faShareNodes);
+library.add(faQuestion);
+library.add(faDownload);
+library.add(faPlay);
+library.add(faXmark);
+library.add(faUpRightAndDownLeftFromCenter);
+library.add(faDownLeftAndUpRightToCenter);
+library.add(faPaintbrush);
+library.add(faPenToSquare);
+
+export const css = new CSSStyleSheet();
+css.replaceSync(`
+  :host {
+    display: inline-block;
+    vertical-align: top;
+  }
+  svg {
+    display: inline-block;
+    height: 1em;
+    width: 1em;
+    vertical-align: top;
+    padding: 1px 0;
+  }
+`);
+
+export class FontAwesomeIcon extends HTMLElement {
+  static observedAttributes = ["icon"];
+
+  get icon() {
+    return this.getAttribute("icon");
+  }
+  set icon(value) {
+    this.setAttribute("icon", value);
+  }
+
+  constructor() {
+    super();
+  }
+
+  connectedCallback() {
+    this.shadow = this.attachShadow({ mode: "open" });
+
+    this.shadow.adoptedStyleSheets.push(normalizeCSS);
+    this.shadow.adoptedStyleSheets.push(css);
+
+    const { html } = icon({ prefix: "fas", iconName: this.icon });
+
+    this.shadow.innerHTML = html[0];
+  }
+
+  attributeChangedCallback(name, oldVal, newVal) {
+    if (!this.shadow) {
+      return;
+    }
+
+    const { html } = icon({ prefix: "fas", iconName: this.icon });
+
+    this.shadow.innerHTML = html[0];
+  }
+}