@matdata/yasgui 5.2.0 → 5.3.0

package/src/TabSettingsModal.ts

@@ -1,6 +1,7 @@
 import { addClass, removeClass } from "@matdata/yasgui-utils";
 import "./TabSettingsModal.scss";
 import Tab from "./Tab";
+import * as ConfigExportImport from "./ConfigExportImport";
 
 // Theme toggle icons
 const MOON_ICON = `<svg viewBox="0 0 24 24" fill="currentColor">
@@ -126,14 +127,26 @@ export default class TabSettingsModal {
     addClass(prefixTab, "modalTabButton");
     prefixTab.onclick = () => this.switchTab("prefix");
 
+    const editorTab = document.createElement("button");
+    editorTab.textContent = "Editor";
+    addClass(editorTab, "modalTabButton");
+    editorTab.onclick = () => this.switchTab("editor");
+
     const endpointsTab = document.createElement("button");
     endpointsTab.textContent = "Endpoint Buttons";
     addClass(endpointsTab, "modalTabButton");
     endpointsTab.onclick = () => this.switchTab("endpoints");
 
+    const importExportTab = document.createElement("button");
+    importExportTab.textContent = "Import/Export";
+    addClass(importExportTab, "modalTabButton");
+    importExportTab.onclick = () => this.switchTab("importexport");
+
     tabsContainer.appendChild(requestTab);
     tabsContainer.appendChild(prefixTab);
+    tabsContainer.appendChild(editorTab);
     tabsContainer.appendChild(endpointsTab);
+    tabsContainer.appendChild(importExportTab);
     body.appendChild(tabsContainer);
 
     // Tab content containers
@@ -147,14 +160,26 @@ export default class TabSettingsModal {
     prefixContent.id = "prefix-content";
     this.drawPrefixSettings(prefixContent);
 
+    const editorContent = document.createElement("div");
+    addClass(editorContent, "modalTabContent");
+    editorContent.id = "editor-content";
+    this.drawEditorSettings(editorContent);
+
     const endpointsContent = document.createElement("div");
     addClass(endpointsContent, "modalTabContent");
     endpointsContent.id = "endpoints-content";
     this.drawEndpointButtonsSettings(endpointsContent);
 
+    const importExportContent = document.createElement("div");
+    addClass(importExportContent, "modalTabContent");
+    importExportContent.id = "importexport-content";
+    this.drawImportExportSettings(importExportContent);
+
     body.appendChild(requestContent);
     body.appendChild(prefixContent);
+    body.appendChild(editorContent);
     body.appendChild(endpointsContent);
+    body.appendChild(importExportContent);
 
     this.modalContent.appendChild(body);
 
@@ -189,7 +214,9 @@ export default class TabSettingsModal {
       if (
         (tabName === "request" && index === 0) ||
         (tabName === "prefix" && index === 1) ||
-        (tabName === "endpoints" && index === 2)
+        (tabName === "editor" && index === 2) ||
+        (tabName === "endpoints" && index === 3) ||
+        (tabName === "importexport" && index === 4)
       ) {
         addClass(btn as HTMLElement, "active");
       } else {
@@ -200,6 +227,11 @@ export default class TabSettingsModal {
     contents.forEach((content) => {
       if (content.id === `${tabName}-content`) {
         addClass(content as HTMLElement, "active");
+        // Reload editor settings if switching to editor tab and it hasn't been loaded yet
+        if (tabName === "editor" && content.innerHTML.indexOf("not yet initialized") > -1) {
+          content.innerHTML = "";
+          this.drawEditorSettings(content as HTMLElement);
+        }
       } else {
         removeClass(content as HTMLElement, "active");
       }
@@ -246,6 +278,108 @@ export default class TabSettingsModal {
     container.appendChild(section);
   }
 
+  private drawEditorSettings(container: HTMLElement) {
+    const yasqe = this.tab.getYasqe();
+    if (!yasqe) {
+      const notice = document.createElement("div");
+      notice.textContent = "Query editor is not yet initialized.";
+      addClass(notice, "settingsHelp");
+      container.appendChild(notice);
+      return;
+    }
+
+    // Formatter Type Section
+    const formatterSection = document.createElement("div");
+    addClass(formatterSection, "settingsSection");
+
+    const formatterLabel = document.createElement("label");
+    formatterLabel.textContent = "Query Formatter";
+    addClass(formatterLabel, "settingsLabel");
+
+    const formatterHelp = document.createElement("div");
+    formatterHelp.textContent = "Choose which formatter to use when formatting SPARQL queries (Shift+Ctrl+F).";
+    addClass(formatterHelp, "settingsHelp");
+
+    const formatterSelect = document.createElement("select");
+    formatterSelect.id = "formatterTypeSelect";
+    addClass(formatterSelect, "settingsSelect");
+
+    const sparqlFormatterOption = document.createElement("option");
+    sparqlFormatterOption.value = "sparql-formatter";
+    sparqlFormatterOption.textContent = "SPARQL Formatter (external library)";
+    formatterSelect.appendChild(sparqlFormatterOption);
+
+    const legacyOption = document.createElement("option");
+    legacyOption.value = "legacy";
+    legacyOption.textContent = "Legacy Formatter (built-in)";
+    formatterSelect.appendChild(legacyOption);
+
+    const currentFormatter = yasqe.persistentConfig?.formatterType || "sparql-formatter";
+    formatterSelect.value = currentFormatter;
+
+    formatterSection.appendChild(formatterLabel);
+    formatterSection.appendChild(formatterHelp);
+    formatterSection.appendChild(formatterSelect);
+    container.appendChild(formatterSection);
+
+    // Auto-format on Query Section
+    const autoformatSection = document.createElement("div");
+    addClass(autoformatSection, "settingsSection");
+
+    const autoformatCheckboxContainer = document.createElement("div");
+    addClass(autoformatCheckboxContainer, "checkboxContainer");
+
+    const autoformatCheckbox = document.createElement("input");
+    autoformatCheckbox.type = "checkbox";
+    autoformatCheckbox.id = "autoformatOnQuery";
+    autoformatCheckbox.checked = yasqe.persistentConfig?.autoformatOnQuery || true;
+
+    const autoformatLabel = document.createElement("label");
+    autoformatLabel.htmlFor = "autoformatOnQuery";
+    autoformatLabel.textContent = "Auto-format query before execution";
+
+    const autoformatHelp = document.createElement("div");
+    autoformatHelp.textContent = "Automatically format the query using the selected formatter before executing it.";
+    addClass(autoformatHelp, "settingsHelp");
+    autoformatHelp.style.marginTop = "5px";
+
+    autoformatCheckboxContainer.appendChild(autoformatCheckbox);
+    autoformatCheckboxContainer.appendChild(autoformatLabel);
+
+    autoformatSection.appendChild(autoformatCheckboxContainer);
+    autoformatSection.appendChild(autoformatHelp);
+    container.appendChild(autoformatSection);
+
+    // CONSTRUCT Variable Validation Section
+    const constructValidationSection = document.createElement("div");
+    addClass(constructValidationSection, "settingsSection");
+
+    const constructValidationCheckboxContainer = document.createElement("div");
+    addClass(constructValidationCheckboxContainer, "checkboxContainer");
+
+    const constructValidationCheckbox = document.createElement("input");
+    constructValidationCheckbox.type = "checkbox";
+    constructValidationCheckbox.id = "checkConstructVariables";
+    constructValidationCheckbox.checked = yasqe.config.checkConstructVariables ?? true;
+
+    const constructValidationLabel = document.createElement("label");
+    constructValidationLabel.htmlFor = "checkConstructVariables";
+    constructValidationLabel.textContent = "Validate CONSTRUCT query variables";
+
+    const constructValidationHelp = document.createElement("div");
+    constructValidationHelp.textContent =
+      "Show warnings for variables used in CONSTRUCT template but not defined in WHERE clause.";
+    addClass(constructValidationHelp, "settingsHelp");
+    constructValidationHelp.style.marginTop = "5px";
+
+    constructValidationCheckboxContainer.appendChild(constructValidationCheckbox);
+    constructValidationCheckboxContainer.appendChild(constructValidationLabel);
+
+    constructValidationSection.appendChild(constructValidationCheckboxContainer);
+    constructValidationSection.appendChild(constructValidationHelp);
+    container.appendChild(constructValidationSection);
+  }
+
   private drawRequestSettings(container: HTMLElement) {
     // This is a simplified version - you can expand based on TabPanel.ts
     const reqConfig = this.tab.getRequestConfig();
@@ -312,6 +446,11 @@ export default class TabSettingsModal {
 
   public open() {
     this.loadSettings();
+    // Reload editor settings in case yasqe wasn't available during init
+    const editorContent = this.modalContent.querySelector("#editor-content");
+    if (editorContent && editorContent.innerHTML === "") {
+      this.drawEditorSettings(editorContent as HTMLElement);
+    }
     addClass(this.modalOverlay, "open");
   }
 
@@ -344,6 +483,25 @@ export default class TabSettingsModal {
     this.tab.yasgui.persistentConfig.setPrefixes(deduplicated);
     this.tab.yasgui.persistentConfig.setAutoCaptureEnabled(autoCapture);
 
+    // Save editor settings
+    const yasqe = this.tab.getYasqe();
+    if (yasqe && yasqe.persistentConfig) {
+      const formatterSelect = document.getElementById("formatterTypeSelect") as HTMLSelectElement;
+      const autoformatCheckbox = document.getElementById("autoformatOnQuery") as HTMLInputElement;
+      const constructValidationCheckbox = document.getElementById("checkConstructVariables") as HTMLInputElement;
+
+      if (formatterSelect) {
+        yasqe.persistentConfig.formatterType = formatterSelect.value as "sparql-formatter" | "legacy";
+      }
+      if (autoformatCheckbox) {
+        yasqe.persistentConfig.autoformatOnQuery = autoformatCheckbox.checked;
+      }
+      if (constructValidationCheckbox) {
+        yasqe.setCheckConstructVariables(constructValidationCheckbox.checked);
+      }
+      yasqe.saveQuery();
+    }
+
     // Save request settings
     const requestContent = this.modalContent.querySelector("#request-content");
     if (requestContent) {
@@ -414,10 +572,10 @@ export default class TabSettingsModal {
     // If we didn't find a non-PREFIX line, all lines are PREFIX or empty
     if (firstNonPrefixLine === 0 && lines.length > 0) {
       // Check if there's any content at all
-      const hasContent = lines.some((line) => line.trim().length > 0);
+      const hasContent = lines.some((line: string) => line.trim().length > 0);
       if (
         !hasContent ||
-        lines.every((line) => line.trim().length === 0 || line.trim().toUpperCase().startsWith("PREFIX"))
+        lines.every((line: string) => line.trim().length === 0 || line.trim().toUpperCase().startsWith("PREFIX"))
       ) {
         firstNonPrefixLine = lines.length;
       }
@@ -574,6 +732,214 @@ export default class TabSettingsModal {
     return currentTheme === "dark" ? MOON_ICON : SUN_ICON;
   }
 
+  private drawImportExportSettings(container: HTMLElement) {
+    // Export Section
+    const exportSection = document.createElement("div");
+    addClass(exportSection, "settingsSection");
+
+    const exportLabel = document.createElement("label");
+    exportLabel.textContent = "Export Configuration";
+    addClass(exportLabel, "settingsLabel");
+
+    const exportHelp = document.createElement("div");
+    exportHelp.textContent =
+      "Export your YASGUI configuration in RDF Turtle format. This includes tabs, queries, endpoints, and preferences.";
+    addClass(exportHelp, "settingsHelp");
+
+    const exportButtonsContainer = document.createElement("div");
+    addClass(exportButtonsContainer, "exportButtons");
+
+    const copyButton = document.createElement("button");
+    copyButton.textContent = "📋 Copy to Clipboard";
+    copyButton.type = "button";
+    addClass(copyButton, "secondaryButton");
+    copyButton.onclick = async () => {
+      try {
+        const config = this.tab.yasgui.persistentConfig.getPersistedConfig();
+        await ConfigExportImport.copyConfigToClipboard(config);
+        this.showNotification("Configuration copied to clipboard!", "success");
+      } catch (error) {
+        this.showNotification("Failed to copy to clipboard: " + (error as Error).message, "error");
+      }
+    };
+
+    const downloadButton = document.createElement("button");
+    downloadButton.textContent = "💾 Download as File";
+    downloadButton.type = "button";
+    addClass(downloadButton, "primaryButton");
+    downloadButton.onclick = () => {
+      try {
+        const config = this.tab.yasgui.persistentConfig.getPersistedConfig();
+        ConfigExportImport.downloadConfigAsFile(config);
+        this.showNotification("Configuration downloaded!", "success");
+      } catch (error) {
+        this.showNotification("Failed to download: " + (error as Error).message, "error");
+      }
+    };
+
+    exportButtonsContainer.appendChild(copyButton);
+    exportButtonsContainer.appendChild(downloadButton);
+
+    exportSection.appendChild(exportLabel);
+    exportSection.appendChild(exportHelp);
+    exportSection.appendChild(exportButtonsContainer);
+    container.appendChild(exportSection);
+
+    // Import Section
+    const importSection = document.createElement("div");
+    addClass(importSection, "settingsSection");
+
+    const importLabel = document.createElement("label");
+    importLabel.textContent = "Import Configuration";
+    addClass(importLabel, "settingsLabel");
+
+    const importHelp = document.createElement("div");
+    importHelp.textContent = "Import a previously exported configuration in RDF Turtle format.";
+    addClass(importHelp, "settingsHelp");
+
+    // Drag and drop area
+    const dropZone = document.createElement("div");
+    addClass(dropZone, "dropZone");
+    dropZone.innerHTML = `
+      <div class="dropZoneContent">
+        <div class="dropZoneIcon">📁</div>
+        <div class="dropZoneText">Drag & drop a .ttl file here</div>
+        <div class="dropZoneOr">or</div>
+      </div>
+    `;
+
+    const fileInput = document.createElement("input");
+    fileInput.type = "file";
+    fileInput.accept = ".ttl,.turtle,text/turtle";
+    fileInput.style.display = "none";
+    fileInput.id = "config-file-input";
+
+    const browseButton = document.createElement("button");
+    browseButton.textContent = "📂 Browse Files";
+    browseButton.type = "button";
+    addClass(browseButton, "secondaryButton");
+    browseButton.onclick = () => fileInput.click();
+
+    const pasteButton = document.createElement("button");
+    pasteButton.textContent = "📋 Paste from Clipboard";
+    pasteButton.type = "button";
+    addClass(pasteButton, "secondaryButton");
+    pasteButton.onclick = async () => {
+      try {
+        const content = await ConfigExportImport.readConfigFromClipboard();
+        await this.importConfiguration(content);
+      } catch (error) {
+        this.showNotification("Failed to read from clipboard: " + (error as Error).message, "error");
+      }
+    };
+
+    // File input change handler
+    fileInput.onchange = async (e) => {
+      const file = (e.target as HTMLInputElement).files?.[0];
+      if (file) {
+        try {
+          const content = await ConfigExportImport.readConfigFromFile(file);
+          await this.importConfiguration(content);
+        } catch (error) {
+          this.showNotification("Failed to read file: " + (error as Error).message, "error");
+        }
+      }
+    };
+
+    // Drag and drop handlers
+    dropZone.ondragover = (e) => {
+      e.preventDefault();
+      addClass(dropZone, "dragover");
+    };
+
+    dropZone.ondragleave = () => {
+      removeClass(dropZone, "dragover");
+    };
+
+    dropZone.ondrop = async (e) => {
+      e.preventDefault();
+      removeClass(dropZone, "dragover");
+
+      const file = e.dataTransfer?.files?.[0];
+      if (file) {
+        try {
+          const content = await ConfigExportImport.readConfigFromFile(file);
+          await this.importConfiguration(content);
+        } catch (error) {
+          this.showNotification("Failed to read file: " + (error as Error).message, "error");
+        }
+      }
+    };
+
+    const importButtonsContainer = document.createElement("div");
+    addClass(importButtonsContainer, "importButtons");
+    importButtonsContainer.appendChild(browseButton);
+    importButtonsContainer.appendChild(pasteButton);
+
+    dropZone.appendChild(importButtonsContainer);
+
+    importSection.appendChild(importLabel);
+    importSection.appendChild(importHelp);
+    importSection.appendChild(dropZone);
+    importSection.appendChild(fileInput);
+    container.appendChild(importSection);
+  }
+
+  private async importConfiguration(turtleContent: string) {
+    try {
+      const parsedConfig = ConfigExportImport.parseFromTurtle(turtleContent);
+
+      // Confirm with user before importing
+      const confirmMsg = `This will replace your current configuration with ${parsedConfig.tabs?.length || 0} tab(s). Continue?`;
+      if (!confirm(confirmMsg)) {
+        return;
+      }
+
+      // Close the modal first
+      this.close();
+
+      // Apply theme if provided
+      if (parsedConfig.theme) {
+        this.tab.yasgui.themeManager.setTheme(parsedConfig.theme);
+      }
+
+      // Apply global orientation if provided
+      if (parsedConfig.orientation) {
+        this.tab.yasgui.config.orientation = parsedConfig.orientation;
+      }
+
+      // Close all existing tabs
+      const existingTabIds = [...this.tab.yasgui.persistentConfig.getTabs()];
+      for (const tabId of existingTabIds) {
+        const tab = this.tab.yasgui.getTab(tabId);
+        if (tab) {
+          tab.close();
+        }
+      }
+
+      // Update the configuration storage
+      this.tab.yasgui.persistentConfig.updatePersistedConfig(parsedConfig);
+
+      window.location.reload();
+    } catch (error) {
+      this.showNotification("Failed to import configuration: " + (error as Error).message, "error");
+    }
+  }
+
+  private showNotification(message: string, type: "success" | "error") {
+    const notification = document.createElement("div");
+    addClass(notification, "importExportNotification", type);
+    notification.textContent = message;
+
+    this.modalContent.appendChild(notification);
+
+    setTimeout(() => {
+      if (notification.parentNode) {
+        notification.parentNode.removeChild(notification);
+      }
+    }, 5000);
+  }
+
   public destroy() {
     if (this.modalOverlay && this.modalOverlay.parentNode) {
       this.modalOverlay.parentNode.removeChild(this.modalOverlay);

package/src/sortablejs.d.ts

@@ -0,0 +1,36 @@
+declare module "sortablejs" {
+  interface SortableOptions {
+    animation?: number;
+    handle?: string;
+    draggable?: string;
+    ghostClass?: string;
+    chosenClass?: string;
+    dragClass?: string;
+    filter?: string;
+    preventOnFilter?: boolean;
+    onEnd?: (evt: SortableEvent) => void;
+    onStart?: (evt: SortableEvent) => void;
+    onUpdate?: (evt: SortableEvent) => void;
+    onSort?: (evt: SortableEvent) => void;
+    onMove?: (evt: SortableEvent, originalEvent: any) => boolean | -1 | 1 | undefined;
+    [key: string]: any;
+  }
+
+  interface SortableEvent {
+    oldIndex?: number;
+    newIndex?: number;
+    item: HTMLElement;
+    to: HTMLElement;
+    from: HTMLElement;
+    [key: string]: any;
+  }
+
+  class Sortable {
+    constructor(el: HTMLElement, options?: SortableOptions);
+    destroy(): void;
+    option(name: string, value?: any): any;
+    static create(el: HTMLElement, options?: SortableOptions): Sortable;
+  }
+
+  export default Sortable;
+}