@matdata/yasqe 5.18.0 → 5.19.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@matdata/yasqe",
   "description": "Yet Another SPARQL Query Editor",
-  "version": "5.18.0",
+  "version": "5.19.0",
   "main": "build/yasqe.min.js",
   "types": "build/ts/src/index.d.ts",
   "license": "MIT",
@@ -26,12 +26,14 @@
   "dependencies": {
     "@matdata/yasgui-utils": "^4.6.1",
     "codemirror": "^5.51.0",
+    "leaflet": "^1.9.4",
     "lodash-es": "^4.17.15",
     "query-string": "^6.10.1",
     "sparql-formatter": "^1.0.2"
   },
   "devDependencies": {
     "@types/codemirror": "0.0.100",
+    "@types/leaflet": "^1.9.21",
     "@types/lodash-es": "^4.17.3",
     "@types/node": "^22.5.4"
   },

package/src/defaults.ts

@@ -135,6 +135,7 @@ SELECT * WHERE {
     queryingDisabled: undefined,
     prefixCcApi: prefixCcApi,
     showFormatButton: true,
+    showMapButton: true,
     checkConstructVariables: true,
     snippets: [
       {

package/src/index.ts

@@ -1,5 +1,6 @@
 import "./scss/yasqe.scss";
 import "./scss/buttons.scss";
+import "leaflet/dist/leaflet.css";
 import { findFirstPrefixLine } from "./prefixFold";
 import { getPrefixesFromQuery, addPrefixes, removePrefixes, Prefixes } from "./prefixUtils";
 import { getPreviousNonWsToken, getNextNonWsToken, getCompleteToken } from "./tokenUtils";
@@ -17,6 +18,8 @@ import getDefaults from "./defaults";
 import CodeMirror from "./CodeMirror";
 import { YasqeAjaxConfig } from "./sparql";
 import { spfmt } from "sparql-formatter";
+import * as L from "leaflet";
+import { coordinatesToWkt, wrapWktLiteral, WktCoordinate, WktGeometryType } from "./mapWidget";
 
 // Toast notification timing constants
 const TOAST_DEFAULT_DURATION = 3000; // 3 seconds
@@ -68,6 +71,9 @@ export class Yasqe extends CodeMirror {
   private hamburgerBtn: HTMLButtonElement | undefined;
   private hamburgerMenu: HTMLDivElement | undefined;
   private shareBtn: HTMLButtonElement | undefined;
+  private mapBtn: HTMLButtonElement | undefined;
+  private mapPopup: HTMLDivElement | undefined;
+  private closeMapPopupHandler: (() => void) | undefined;
   private isFullscreen: boolean = false;
   private horizontalResizeWrapper?: HTMLDivElement;
   private snippetsBar?: HTMLDivElement;
@@ -631,7 +637,26 @@ export class Yasqe extends CodeMirror {
     }
 
     /**
-     * Draw fullscreen btn (FIFTH)
+     * Draw map btn (FIFTH)
+     */
+    if (this.config.showMapButton) {
+      this.mapBtn = document.createElement("button");
+      addClass(this.mapBtn, "yasqe_mapButton");
+      const mapIcon = document.createElement("i");
+      addClass(mapIcon, "fas");
+      addClass(mapIcon, "fa-map-location-dot");
+      mapIcon.setAttribute("aria-hidden", "true");
+      this.mapBtn.appendChild(mapIcon);
+      this.mapBtn.onclick = (event: MouseEvent) => {
+        this.toggleMapPopup(buttons, { x: event.clientX, y: event.clientY });
+      };
+      this.mapBtn.title = "Open map";
+      this.mapBtn.setAttribute("aria-label", "Open map");
+      buttons.appendChild(this.mapBtn);
+    }
+
+    /**
+     * Draw fullscreen btn (SIXTH)
      */
     this.fullscreenBtn = document.createElement("button");
     addClass(this.fullscreenBtn, "yasqe_fullscreenButton");
@@ -743,6 +768,24 @@ export class Yasqe extends CodeMirror {
       this.hamburgerMenu.appendChild(formatItem);
     }
 
+    if (this.config.showMapButton) {
+      const mapItem = document.createElement("button");
+      mapItem.className = "yasqe_hamburgerMenuItem";
+      const mapIconMenu = document.createElement("i");
+      addClass(mapIconMenu, "fas");
+      addClass(mapIconMenu, "fa-map-location-dot");
+      mapIconMenu.setAttribute("aria-hidden", "true");
+      mapItem.appendChild(mapIconMenu);
+      const mapLabel = document.createElement("span");
+      mapLabel.textContent = "Open map";
+      mapItem.appendChild(mapLabel);
+      mapItem.onclick = (event: MouseEvent) => {
+        this.closeHamburgerMenu();
+        this.toggleMapPopup(buttons, { x: event.clientX, y: event.clientY });
+      };
+      this.hamburgerMenu.appendChild(mapItem);
+    }
+
     const fullscreenItem = document.createElement("button");
     fullscreenItem.className = "yasqe_hamburgerMenuItem";
     const fullscreenIconMenu = document.createElement("i");
@@ -794,6 +837,269 @@ export class Yasqe extends CodeMirror {
     removeClass(this.hamburgerMenu, "active");
     this.hamburgerBtn.setAttribute("aria-expanded", "false");
   }
+  private toggleMapPopup(buttons: HTMLDivElement, anchorPoint?: { x: number; y: number }) {
+    if (this.mapPopup) {
+      this.closeMapPopupHandler?.();
+      return;
+    }
+    this.createMapPopup(buttons, anchorPoint);
+  }
+
+  private createMapPopup(buttons: HTMLDivElement, anchorPoint?: { x: number; y: number }) {
+    this.mapPopup = document.createElement("div");
+    this.mapPopup.className = "yasqe_mapPopup";
+    buttons.appendChild(this.mapPopup);
+
+    const header = document.createElement("div");
+    header.className = "yasqe_mapPopup_header";
+    const title = document.createElement("div");
+    title.className = "yasqe_mapPopup_title";
+    title.textContent = "Create WKT";
+    header.appendChild(title);
+
+    const closeBtn = document.createElement("button");
+    closeBtn.className = "yasqe_mapPopup_close";
+    closeBtn.setAttribute("aria-label", "Close map");
+    closeBtn.innerHTML = "×";
+    header.appendChild(closeBtn);
+    this.mapPopup.appendChild(header);
+
+    const mapContainer = document.createElement("div");
+    mapContainer.className = "yasqe_mapPopup_map";
+    this.mapPopup.appendChild(mapContainer);
+
+    const geometryControls = document.createElement("div");
+    geometryControls.className = "yasqe_mapPopup_geometryControls leaflet-bar";
+    mapContainer.appendChild(geometryControls);
+
+    const hint = document.createElement("div");
+    hint.className = "yasqe_mapPopup_hint";
+    hint.textContent = "Click the map to add coordinates";
+    this.mapPopup.appendChild(hint);
+
+    const preview = document.createElement("textarea");
+    preview.className = "yasqe_mapPopup_preview";
+    preview.readOnly = true;
+    preview.rows = 2;
+    this.mapPopup.appendChild(preview);
+
+    const actions = document.createElement("div");
+    actions.className = "yasqe_mapPopup_actions";
+    const undoBtn = document.createElement("button");
+    undoBtn.className = "yasqe_btn yasqe_btn-sm";
+    undoBtn.textContent = "Undo";
+    const clearBtn = document.createElement("button");
+    clearBtn.className = "yasqe_btn yasqe_btn-sm";
+    clearBtn.textContent = "Clear";
+    const insertBtn = document.createElement("button");
+    insertBtn.className = "yasqe_btn yasqe_btn-sm";
+    insertBtn.textContent = "Insert WKT";
+    actions.appendChild(undoBtn);
+    actions.appendChild(clearBtn);
+    actions.appendChild(insertBtn);
+    this.mapPopup.appendChild(actions);
+
+    let geometryType: WktGeometryType = "POINT";
+    let coordinates: WktCoordinate[] = [];
+    let marker: L.Marker | undefined;
+    let shape: L.Polyline | L.Polygon | undefined;
+    const geometryButtons: Partial<Record<WktGeometryType, HTMLButtonElement>> = {};
+
+    const getMapAccentColor = () => {
+      const accent = getComputedStyle(this.rootEl).getPropertyValue("--yasgui-accent-color").trim();
+      return accent || "#337ab7";
+    };
+
+    const map = L.map(mapContainer, {
+      zoomControl: true,
+      attributionControl: true,
+    }).setView([51.505, -0.09], 2);
+    map.getContainer().style.cursor = "crosshair";
+    L.tileLayer("https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png", {
+      attribution: "&copy; OpenStreetMap contributors",
+      maxZoom: 19,
+    }).addTo(map);
+    L.DomEvent.disableClickPropagation(geometryControls);
+    L.DomEvent.disableScrollPropagation(geometryControls);
+
+    const updatePreview = () => {
+      const wkt = coordinatesToWkt(geometryType, coordinates);
+      preview.value = wkt || "";
+      insertBtn.disabled = !wkt;
+      undoBtn.disabled = coordinates.length === 0;
+      clearBtn.disabled = coordinates.length === 0;
+    };
+
+    const redrawGeometry = () => {
+      if (marker) {
+        map.removeLayer(marker);
+        marker = undefined;
+      }
+      if (shape) {
+        map.removeLayer(shape);
+        shape = undefined;
+      }
+
+      const latLngs = coordinates.map((coord) => L.latLng(coord.lat, coord.lng));
+      const accentColor = getMapAccentColor();
+      if (geometryType === "POINT" && latLngs.length > 0) {
+        marker = L.marker(latLngs[latLngs.length - 1]).addTo(map);
+      } else if (geometryType === "LINESTRING" && latLngs.length > 0) {
+        shape = L.polyline(latLngs, { color: accentColor }).addTo(map);
+      } else if (geometryType === "POLYGON" && latLngs.length > 0) {
+        shape = L.polygon(latLngs, { color: accentColor }).addTo(map);
+      }
+
+      updatePreview();
+    };
+
+    const updateGeometryButtons = () => {
+      for (const type of ["POINT", "LINESTRING", "POLYGON"] as WktGeometryType[]) {
+        const button = geometryButtons[type];
+        if (!button) continue;
+        button.classList.toggle("active", type === geometryType);
+        button.setAttribute("aria-pressed", type === geometryType ? "true" : "false");
+      }
+    };
+
+    const createGeometryButton = (type: WktGeometryType, iconClass: string, label: string) => {
+      const button = document.createElement("button");
+      button.type = "button";
+      button.className = "yasqe_mapPopup_geometryBtn";
+      button.title = label;
+      button.setAttribute("aria-label", label);
+      button.setAttribute("aria-pressed", "false");
+      const icon = document.createElement("i");
+      addClass(icon, "fas");
+      addClass(icon, iconClass);
+      icon.setAttribute("aria-hidden", "true");
+      button.appendChild(icon);
+      button.onclick = (event: MouseEvent) => {
+        event.preventDefault();
+        event.stopPropagation();
+        if (geometryType === type) return;
+        geometryType = type;
+        coordinates = [];
+        updateGeometryButtons();
+        redrawGeometry();
+      };
+      geometryControls.appendChild(button);
+      return button;
+    };
+
+    geometryButtons.POINT = createGeometryButton("POINT", "fa-location-dot", "Point");
+    geometryButtons.LINESTRING = createGeometryButton("LINESTRING", "fa-slash", "LineString");
+    geometryButtons.POLYGON = createGeometryButton("POLYGON", "fa-draw-polygon", "Polygon");
+    updateGeometryButtons();
+
+    const closePopup = () => {
+      document.removeEventListener("keydown", handleKeyDown);
+      document.body.removeEventListener("click", closeOnOutsideClick, true);
+      map.remove();
+      this.mapPopup?.remove();
+      this.mapPopup = undefined;
+      this.closeMapPopupHandler = undefined;
+    };
+
+    const handleKeyDown = (event: KeyboardEvent) => {
+      if (event.key === "Escape") {
+        closePopup();
+      }
+    };
+
+    const closeOnOutsideClick = (event: MouseEvent) => {
+      if (!this.mapPopup) return;
+      if (this.mapPopup.contains(event.target as Node) || this.mapBtn?.contains(event.target as Node)) return;
+      closePopup();
+    };
+
+    map.on("click", (event: L.LeafletMouseEvent) => {
+      const coordinate: WktCoordinate = { lat: event.latlng.lat, lng: event.latlng.lng };
+      if (geometryType === "POINT") {
+        coordinates = [coordinate];
+      } else {
+        coordinates.push(coordinate);
+      }
+      redrawGeometry();
+    });
+
+    undoBtn.onclick = () => {
+      coordinates.pop();
+      redrawGeometry();
+    };
+
+    clearBtn.onclick = () => {
+      coordinates = [];
+      redrawGeometry();
+    };
+
+    insertBtn.onclick = () => {
+      const wkt = coordinatesToWkt(geometryType, coordinates);
+      if (!wkt) return;
+      this.replaceSelection(wrapWktLiteral(wkt));
+      closePopup();
+    };
+
+    closeBtn.onclick = () => closePopup();
+    this.closeMapPopupHandler = closePopup;
+
+    document.addEventListener("keydown", handleKeyDown);
+    document.body.addEventListener("click", closeOnOutsideClick, true);
+
+    const positionPopup = () => {
+      if (!this.mapPopup) return;
+      const popupWidth = this.mapPopup.offsetWidth || this.mapPopup.scrollWidth || 520;
+      const popupHeight = this.mapPopup.offsetHeight || this.mapPopup.scrollHeight || this.mapPopup.clientHeight;
+      const viewportWidth = window.innerWidth;
+      const viewportHeight = window.innerHeight;
+
+      this.mapPopup.style.position = "fixed";
+      this.mapPopup.style.bottom = "auto";
+
+      if (anchorPoint) {
+        const padding = 20;
+        let left = anchorPoint.x + 12;
+        let top = anchorPoint.y + 12;
+        if (left + popupWidth > viewportWidth - padding) {
+          left = Math.max(padding, anchorPoint.x - popupWidth - 12);
+        }
+        if (top + popupHeight > viewportHeight - padding) {
+          top = Math.max(padding, anchorPoint.y - popupHeight - 12);
+        }
+        this.mapPopup.style.left = `${Math.max(padding, left)}px`;
+        this.mapPopup.style.top = `${Math.max(padding, top)}px`;
+        this.mapPopup.style.right = "auto";
+        return;
+      }
+
+      const buttonsRect = buttons.getBoundingClientRect();
+      const fallbackLeft = Math.min(viewportWidth - popupWidth - 20, Math.max(20, buttonsRect.right - popupWidth));
+      this.mapPopup.style.left = `${Math.max(20, fallbackLeft)}px`;
+      this.mapPopup.style.top = "20px";
+      this.mapPopup.style.right = "auto";
+    };
+
+    if (typeof window !== "undefined" && typeof window.requestAnimationFrame === "function") {
+      window.requestAnimationFrame(() => {
+        positionPopup();
+        map.invalidateSize();
+      });
+    } else {
+      setTimeout(() => {
+        positionPopup();
+        map.invalidateSize();
+      }, 0);
+    }
+
+    redrawGeometry();
+  }
+
+  public toggleMapWidget(anchorPoint?: { x: number; y: number }) {
+    const buttons = this.getWrapperElement().querySelector(".yasqe_buttons");
+    if (!buttons || !(buttons instanceof HTMLDivElement)) return;
+    this.toggleMapPopup(buttons, anchorPoint);
+  }
+
   public toggleFullscreen() {
     this.isFullscreen = !this.isFullscreen;
     if (this.isFullscreen) {
@@ -1857,6 +2163,7 @@ export class Yasqe extends CodeMirror {
   public destroy() {
     // Abort running query
     this.abortQuery();
+    this.closeMapPopupHandler?.();
     this.unregisterEventListeners();
     this.horizontalResizeWrapper?.removeEventListener("mousedown", this.initDrag, false);
     this.horizontalResizeWrapper?.removeEventListener("dblclick", this.expandEditor);
@@ -2043,6 +2350,7 @@ export interface Config extends Partial<CodeMirror.EditorConfiguration> {
   queryingDisabled: string | undefined; // The string will be the message displayed when hovered
   prefixCcApi: string; // the suggested default prefixes URL API getter
   showFormatButton: boolean; // Show a button to format the query
+  showMapButton: boolean; // Show a button to create WKT literals from map input
   checkConstructVariables: boolean; // Check for undefined variables in CONSTRUCT queries
   snippets: Snippet[]; // Code snippets to show in the snippets bar
   showSnippetsBar: boolean; // Show the snippets bar

package/src/mapWidget.ts

@@ -0,0 +1,53 @@
+export type WktGeometryType = "POINT" | "LINESTRING" | "POLYGON";
+const GEO_WKT_LITERAL_DATATYPE = "<http://www.opengis.net/ont/geosparql#wktLiteral>";
+
+export interface WktCoordinate {
+  lat: number;
+  lng: number;
+}
+
+const MAX_DECIMALS = 6;
+
+function normalizeCoordinate(value: number): string {
+  return Number(value.toFixed(MAX_DECIMALS)).toString();
+}
+
+function sameCoordinate(left: WktCoordinate, right: WktCoordinate): boolean {
+  return left.lat === right.lat && left.lng === right.lng;
+}
+
+function formatCoordinates(coordinates: WktCoordinate[]) {
+  return coordinates.map((coord) => `${normalizeCoordinate(coord.lng)} ${normalizeCoordinate(coord.lat)}`).join(", ");
+}
+
+export function coordinatesToWkt(geometryType: WktGeometryType, coordinates: WktCoordinate[]): string | undefined {
+  if (!Array.isArray(coordinates) || coordinates.length === 0) return undefined;
+
+  if (geometryType === "POINT") {
+    const point = coordinates[coordinates.length - 1];
+    return `POINT(${normalizeCoordinate(point.lng)} ${normalizeCoordinate(point.lat)})`;
+  }
+
+  if (geometryType === "LINESTRING") {
+    if (coordinates.length < 2) return undefined;
+    return `LINESTRING(${formatCoordinates(coordinates)})`;
+  }
+
+  if (geometryType !== "POLYGON") return undefined;
+  if (coordinates.length < 3) return undefined;
+  const uniqueCoordinates = new Set(
+    coordinates.map((coord) => `${normalizeCoordinate(coord.lng)} ${normalizeCoordinate(coord.lat)}`),
+  );
+  if (uniqueCoordinates.size < 3) return undefined;
+
+  const polygonCoordinates = coordinates.slice();
+  if (!sameCoordinate(polygonCoordinates[0], polygonCoordinates[polygonCoordinates.length - 1])) {
+    polygonCoordinates.push(polygonCoordinates[0]);
+  }
+
+  return `POLYGON((${formatCoordinates(polygonCoordinates)}))`;
+}
+
+export function wrapWktLiteral(wkt: string) {
+  return `"${wkt}"^^${GEO_WKT_LITERAL_DATATYPE}`;
+}

package/src/scss/buttons.scss

@@ -292,6 +292,129 @@
         }
       }
     }
+    .yasqe_mapPopup {
+      position: absolute;
+      padding: 12px;
+      background-color: var(--yasgui-bg-primary, #fff);
+      border: 1px solid var(--yasgui-border-color, #e3e3e3);
+      border-radius: 4px;
+      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+      box-sizing: border-box;
+      width: min(520px, calc(100vw - 40px));
+      max-height: calc(100vh - 40px);
+      overflow-y: auto;
+      overflow-x: hidden;
+      display: flex;
+      flex-direction: column;
+      gap: 8px;
+      z-index: 10001;
+
+      .yasqe_mapPopup_header {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+      }
+
+      .yasqe_mapPopup_title {
+        font-weight: 600;
+        font-size: 14px;
+        color: var(--yasgui-text-primary, #333);
+      }
+
+      .yasqe_mapPopup_close {
+        border: none;
+        background: none;
+        color: var(--yasgui-text-secondary, #505050);
+        font-size: 20px;
+        line-height: 1;
+        cursor: pointer;
+        margin-left: 0;
+      }
+
+      .yasqe_mapPopup_map {
+        position: relative;
+        height: 280px;
+        border: 1px solid var(--yasgui-border-color, #e3e3e3);
+        border-radius: 4px;
+
+        .leaflet-container,
+        .leaflet-container .leaflet-tile-pane,
+        .leaflet-container .leaflet-overlay-pane {
+          cursor: crosshair !important;
+        }
+
+        .leaflet-control-container,
+        .leaflet-control-container * {
+          cursor: pointer;
+        }
+      }
+
+      .yasqe_mapPopup_geometryControls {
+        position: absolute;
+        top: 10px;
+        right: 10px;
+        z-index: 500;
+        display: flex;
+        flex-direction: column;
+        border: 1px solid var(--yasgui-border-color, #e3e3e3);
+        border-radius: 4px;
+        overflow: hidden;
+        box-shadow: var(--yasgui-graph-shadow, 0 2px 4px rgba(0, 0, 0, 0.2));
+      }
+
+      .yasqe_mapPopup_geometryBtn {
+        appearance: none;
+        width: 30px;
+        height: 30px;
+        margin: 0;
+        border: none;
+        border-radius: 0;
+        border-bottom: 1px solid var(--yasgui-border-color, #e3e3e3);
+        background: var(--yasgui-bg-primary, #fff);
+        color: var(--yasgui-text-primary, #333);
+        cursor: pointer;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+
+        i {
+          font-size: 14px;
+        }
+
+        &:hover {
+          background: var(--yasgui-bg-secondary, #f0f0f0);
+        }
+
+        &.active {
+          background: var(--yasgui-accent-color, #337ab7);
+          color: #fff;
+        }
+
+        &:last-child {
+          border-bottom: none;
+        }
+      }
+
+      .yasqe_mapPopup_hint {
+        color: var(--yasgui-text-secondary, #666);
+        font-size: 12px;
+      }
+
+      .yasqe_mapPopup_preview {
+        width: 100%;
+        box-sizing: border-box;
+        resize: vertical;
+        border: 1px solid var(--yasgui-border-color, #e3e3e3);
+        background-color: var(--yasgui-bg-secondary, #f8f8f8);
+        color: var(--yasgui-text-primary, #333);
+      }
+
+      .yasqe_mapPopup_actions {
+        display: flex;
+        justify-content: flex-end;
+        gap: 6px;
+      }
+    }
 
     .yasqe_saveWrapper {
       position: relative;
@@ -323,7 +446,8 @@
       }
     }
 
-    .yasqe_formatButton {
+    .yasqe_formatButton,
+    .yasqe_mapButton {
       display: inline-flex;
       align-items: center;
       justify-content: center;
@@ -451,6 +575,7 @@
       .yasqe_share,
       .yasqe_saveWrapper,
       .yasqe_formatButton,
+      .yasqe_mapButton,
       .yasqe_fullscreenButton {
         display: none !important;
       }