[mod] symbol icons
This commit is contained in:
parent
eaebbd12aa
commit
65703442de
13 changed files with 1430 additions and 97 deletions
|
|
@ -20,12 +20,18 @@ import { LSPClient, LSPPlugin, languageServerSupport, languageServerExtensions,
|
|||
formatDocument,formatKeymap } from "@codemirror/lsp-client";
|
||||
|
||||
import { xQuery } from "@codemirror/legacy-modes/mode/xquery"
|
||||
|
||||
|
||||
|
||||
// Language
|
||||
import { xml } from "@codemirror/lang-xml";
|
||||
|
||||
import { showMinimap } from "@replit/codemirror-minimap"
|
||||
let create = (v) => {
|
||||
const dom = document.createElement('div');
|
||||
return { dom }
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
// return promise with socket map or reject if no connect
|
||||
function simpleWebSocketTransport(uri) {
|
||||
let handlers = [];
|
||||
|
|
@ -55,6 +61,7 @@ const baseExts = [
|
|||
dropCursor(),
|
||||
EditorState.allowMultipleSelections.of(true),
|
||||
EditorView.lineWrapping,
|
||||
keymap.of([indentWithTab]),
|
||||
indentOnInput(),
|
||||
syntaxHighlighting(defaultHighlightStyle, { fallback: true }),
|
||||
bracketMatching(),
|
||||
|
|
@ -73,7 +80,15 @@ const baseExts = [
|
|||
...completionKeymap,
|
||||
...lintKeymap
|
||||
]),
|
||||
StreamLanguage.define(xQuery)
|
||||
StreamLanguage.define(xQuery),
|
||||
showMinimap.compute(['doc'], (state) => {
|
||||
return {
|
||||
create,
|
||||
/* optional showOverlay: 'mouse-over' */
|
||||
displayText: 'characters'
|
||||
|
||||
}
|
||||
})
|
||||
];
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -54,8 +54,8 @@
|
|||
</optgroup>
|
||||
<optgroup label="xpath">
|
||||
<option
|
||||
value="https://raw.githubusercontent.com/dnovatchev/Articles/refs/heads/main/Generators/Code/generator.xpath">
|
||||
generator.xpath</option>
|
||||
value="https://raw.githubusercontent.com/dnovatchev/Articles/refs/heads/main/Generators/Code/generator.xq">
|
||||
generator.xquery</option>
|
||||
|
||||
</optgroup>
|
||||
</select>
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
@import url("../bootstrap-icons.min.css");
|
||||
@import url("../codicon@0.0.40/codicon.css");
|
||||
:root {
|
||||
color-scheme: light dark;
|
||||
}
|
||||
|
|
@ -18,7 +18,7 @@ body {
|
|||
box-shadow: 0 0 3px rgba(black, 0.33);
|
||||
|
||||
display: grid;
|
||||
grid-template-columns: minmax(10px, 1fr) minmax(10px, 3fr);
|
||||
grid-template-columns: minmax(10px, 1fr) minmax(10px, 4fr);
|
||||
grid-template-rows: min-content min-content 1fr min-content;
|
||||
gap: 1px;
|
||||
|
||||
|
|
|
|||
|
|
@ -7,7 +7,6 @@
|
|||
<title>Codemirror6 example using BaseX LSP</title>
|
||||
<link rel="icon" type="image/png" href="../favicon.png" />
|
||||
<link href="../bootstrap@5.3.7.css" rel="stylesheet" />
|
||||
<link href="../codicon/codicon.css" rel="stylesheet" />
|
||||
<link rel="stylesheet" href="grail.css" />
|
||||
</head>
|
||||
|
||||
|
|
@ -19,7 +18,7 @@
|
|||
<div class="container-fluid">
|
||||
<a id="help" class="navbar-brand">XQuery 4.0 LSP client
|
||||
<button id="popcon" popovertarget="popConnect" class="btn btn-danger">
|
||||
<i class="bi bi-router"></i>
|
||||
<i class="codicon codicon-vm-outline"></i>
|
||||
</button>
|
||||
</a>
|
||||
<ul class="nav nav-pills">
|
||||
|
|
@ -52,41 +51,42 @@
|
|||
<div class="btn-group btn-group-sm " role="group" aria-label="Second group">
|
||||
|
||||
<button id="search" title="Search" type="button" class="btn btn-light"><i
|
||||
class="bi bi-search"></i></button>
|
||||
class="codicon codicon-search"></i></button>
|
||||
|
||||
<button id="lint" title="Display diagnostics" type="button" class="btn btn-light"><i
|
||||
class="bi bi-info-square"></i></button>
|
||||
class="codicon codicon-report"></i></button>
|
||||
|
||||
<button id="sync" title="Sync changes to server" type="button" class="btn btn-light">
|
||||
<i class="bi bi-arrow-repeat"></i>
|
||||
</button>
|
||||
<button id="fullscreen" title="Full screen editor" type="button" class="btn btn-light">
|
||||
<i class="bi bi-arrows-fullscreen"></i>
|
||||
</button>
|
||||
</div>
|
||||
<div class="btn-group" role="group" aria-label="Third group">
|
||||
|
||||
<button id="syntax" type="button" class="btn btn-light" title="Syntax"><i
|
||||
class="bi bi-chat"></i></button>
|
||||
<button id="symbols2" type="button" class="btn btn-light" title="symbols">
|
||||
<i class="codicon codicon-symbol-misc"></i></button>
|
||||
|
||||
<button id="format" type="button" class="btn btn-light" title="Format (Shift-Alt-f)"><i
|
||||
class="bi bi-justify-left"></i></button>
|
||||
class="codicon codicon-list-flat"></i></button>
|
||||
|
||||
<button id="cmd" type="button" class="btn btn-light" title="Cmd list to console">
|
||||
<i class="bi bi-hammer"></i>
|
||||
<button id="sync" title="Sync changes to server" type="button" class="btn btn-light">
|
||||
<i class="codicon codicon-sync"></i>
|
||||
</button>
|
||||
<button id="fullscreen" title="Full screen editor" type="button" class="btn btn-light">
|
||||
<i class="codicon codicon-screen-full"></i>
|
||||
</button>
|
||||
|
||||
<button type="button" class="btn btn-light" popovertarget="popSettings" title="Settings">
|
||||
<i class="bi bi-gear"></i></button>
|
||||
<i class="codicon codicon-settings"></i></button>
|
||||
</div>
|
||||
<div class="btn-group" role="group" aria-label="Third group">
|
||||
|
||||
<button id="syntax" type="button" class="btn btn-light" title="Unused"><i
|
||||
class="codicon codicon-comment"></i></button>
|
||||
|
||||
<button id="cmd" type="button" class="btn btn-light" title="Cmd list to console">
|
||||
<i class="codicon codicon-debug-console"></i>
|
||||
</button>
|
||||
|
||||
<button id="wordAt" type="button" class="btn btn-light" title="word at">
|
||||
<i class="bi bi-1-square"></i></button>
|
||||
<i>1</i></button>
|
||||
|
||||
<button id="symbols2" type="button" class="btn btn-light" title="symbols">
|
||||
<i class="bi bi-2-square"></i></button>
|
||||
|
||||
<button id="unused3" type="button" class="btn btn-light" title="unused3">
|
||||
<i class="bi bi-3-square"></i></button>
|
||||
<i>3</i></button>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
|
|
@ -97,43 +97,48 @@
|
|||
</main>
|
||||
|
||||
<aside class="page-sidebar">
|
||||
<div id="msg">(msgs)<i class='codicon codicon-symbol-method'></i></div>
|
||||
|
||||
<select id="load">
|
||||
<option selected value="">load..</option>
|
||||
<optgroup label="XQuery3">
|
||||
<option
|
||||
value="https://raw.githubusercontent.com/expkg-zone58/pdfbox/refs/heads/main/src/Pdfbox3.xqm">
|
||||
Pdfbox3.xqm</option>
|
||||
<option
|
||||
value="https://raw.githubusercontent.com/Quodatum/xqdoca/refs/heads/master/src/main/lib/model.xqm">
|
||||
model.xqm</option>
|
||||
</optgroup>
|
||||
<optgroup label="XQuery4">
|
||||
<option
|
||||
value="https://git.quodatum.duckdns.org/quodatum/basex-lsp/raw/branch/main/webapp/lsp/lsp-text.xqm">
|
||||
lsp-text.xqm</option>
|
||||
<option
|
||||
value="../../../lsp/lsp-text.xqm">
|
||||
lsp-text.xqm</option>
|
||||
</optgroup>
|
||||
<optgroup label="xpath">
|
||||
<option
|
||||
value="https://raw.githubusercontent.com/dnovatchev/Articles/refs/heads/main/Generators/Code/generator.xpath">
|
||||
generator.xpath</option>
|
||||
<details id="workspacePanel" open="open" style="padding:5px;">
|
||||
<summary class="bg-info">Workspace <b>0</b></summary>
|
||||
<select id="load">
|
||||
<option selected value="">load..</option>
|
||||
<optgroup label="XQuery3">
|
||||
<option
|
||||
value="https://raw.githubusercontent.com/expkg-zone58/pdfbox/refs/heads/main/src/Pdfbox3.xqm">
|
||||
Pdfbox3.xqm</option>
|
||||
<option
|
||||
value="https://raw.githubusercontent.com/Quodatum/xqdoca/refs/heads/master/src/main/lib/model.xqm">
|
||||
model.xqm</option>
|
||||
</optgroup>
|
||||
<optgroup label="XQuery4">
|
||||
<option
|
||||
value="https://git.quodatum.duckdns.org/quodatum/basex-lsp/raw/branch/main/webapp/lsp/lsp-text.xqm">
|
||||
lsp-text.xqm</option>
|
||||
<option value="../../../lsp/lsp-text.xqm">
|
||||
lsp-text.xqm</option>
|
||||
</optgroup>
|
||||
|
||||
</optgroup>
|
||||
</select>
|
||||
<optgroup label="xpath">
|
||||
<option
|
||||
value="https://raw.githubusercontent.com/dnovatchev/Articles/refs/heads/main/Generators/Code/generator.xq">
|
||||
generator.xquery</option>
|
||||
</optgroup>
|
||||
</select>
|
||||
|
||||
<ul id="traffic" style="overflow: scroll;">
|
||||
<li>-</li>
|
||||
</ul>
|
||||
<ul id="traffic" style="overflow: scroll;">
|
||||
<li>-</li>
|
||||
</ul>
|
||||
</details>
|
||||
|
||||
<details id="symPanel" style="padding:5px;">
|
||||
<summary class="bg-info">OutLine <b>0</b></summary>
|
||||
<json-list id="symList" style="display:block; overflow:scroll; height: 10em;"></json-list>
|
||||
</details>
|
||||
|
||||
<details id="msgPanel" style="padding:5px;">
|
||||
<summary class="bg-info">Messages <b>0</b></summary>
|
||||
<div id="msg">(msgs)<i class='codicon codicon-symbol-method'></i></div>
|
||||
</details>
|
||||
</aside>
|
||||
|
||||
<footer class="page-footer">
|
||||
|
|
@ -143,7 +148,7 @@
|
|||
<option value="xquery">xquery</option>
|
||||
<option value="xml">xml</option>
|
||||
</select>
|
||||
<button popovertarget="popHelp"><i class="bi bi-info-circle"></i></button></a>
|
||||
<button popovertarget="popHelp"><i class="codicon codicon-info"></i></button></a>
|
||||
</footer>
|
||||
</div>
|
||||
<!-- Popovers -->
|
||||
|
|
@ -163,16 +168,23 @@
|
|||
<!-- <popup-info id="popHelp">hhhh</popup-info> -->
|
||||
|
||||
<dialog id="popSettings" popover>
|
||||
<header>Editor configuration
|
||||
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"
|
||||
onclick="$('popSettings').hidePopover(); "></button>
|
||||
</header>
|
||||
<div class="modal-body">
|
||||
@TODO
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button id="connect">ok</button>
|
||||
</div>
|
||||
<form id="fSettings">
|
||||
<header>Editor configuration
|
||||
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"
|
||||
onclick="$('popSettings').hidePopover(); "></button>
|
||||
</header>
|
||||
<div class="modal-body">
|
||||
|
||||
<div class="mb-3 form-check">
|
||||
<input name="wrap-lines" type="checkbox" class="form-check-input" id="exampleCheck1">
|
||||
<label class="form-check-label" for="exampleCheck1">Wrap lines</label>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button type="submit" class="btn btn-primary">Apply</button>
|
||||
</div>
|
||||
</form>
|
||||
</dialog>
|
||||
<!-- CodeMirror 6 -->
|
||||
<script src="./lsp.bundle.js"></script>
|
||||
|
|
|
|||
|
|
@ -2,21 +2,24 @@
|
|||
https://stackoverflow.com/questions/50404970/web-components-pass-data-to-and-from
|
||||
https://www.w3schools.com/howto/howto_js_treeview.asp
|
||||
*/
|
||||
class JsonListComponent extends HTMLElement {
|
||||
class ListComponent extends HTMLElement {
|
||||
#shadow;
|
||||
#data;
|
||||
#iconKinds; //array from kind integer to codicon name
|
||||
constructor() {
|
||||
super();
|
||||
this.#shadow = this.attachShadow({ mode: "open" });
|
||||
this.#data = [];
|
||||
this.#iconKinds = [];
|
||||
this.render();
|
||||
}
|
||||
|
||||
setData(newData, append = false) {
|
||||
setData(newData,icons, append = false) {
|
||||
if (!Array.isArray(newData)) {
|
||||
console.warn("Invalid format, expected an array.");
|
||||
return;
|
||||
}
|
||||
this.#iconKinds=icons;
|
||||
this.#data = append ? this.#data.concat(newData) : structuredClone(newData);
|
||||
this.render();
|
||||
}
|
||||
|
|
@ -34,7 +37,8 @@ class JsonListComponent extends HTMLElement {
|
|||
const shad=this.#shadow;
|
||||
this.#data.forEach((item, index) => {
|
||||
const listItem = document.createElement('li');
|
||||
listItem.innerHTML = `<i class='codicon codicon-symbol-method'></i>${item.name} - ${item.detail}`;
|
||||
listItem.innerHTML = `<i class='codicon codicon-${this.#iconKinds[item.kind]}'></i>
|
||||
<span>${item.name} - ${item.detail}</span>`;
|
||||
// Adding a click event listener for user interaction
|
||||
listItem.addEventListener('click', () => {
|
||||
console.log('Item clicked:', item, listItem);
|
||||
|
|
@ -57,10 +61,12 @@ class JsonListComponent extends HTMLElement {
|
|||
this.#shadow.innerHTML = '';
|
||||
const style = document.createElement('style');
|
||||
style.textContent = `
|
||||
@import url("../codicon@0.0.40/codicon.css");
|
||||
ul { list-style-type: none; padding: 0; margin: 0; }
|
||||
li { padding: 1px; border-bottom: 1px solid #ccc; cursor: pointer; }
|
||||
li :not(.selected) :hover { background: #ccc; }
|
||||
.selected { background: lightgreen;}
|
||||
i {vertical-align: middle;}
|
||||
`;
|
||||
this.#shadow.appendChild(style);
|
||||
this.#shadow.appendChild(list);
|
||||
|
|
@ -73,4 +79,4 @@ class JsonListComponent extends HTMLElement {
|
|||
}
|
||||
|
||||
/* Define the new custom element */
|
||||
customElements.define('json-list', JsonListComponent);
|
||||
customElements.define('json-list', ListComponent);
|
||||
File diff suppressed because it is too large
Load diff
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
|
@ -49,8 +49,36 @@ $("symbols2").onclick = e => {
|
|||
client.request("textDocument/documentSymbol", { "textDocument": { "uri": $("iFile").value } })
|
||||
.then(r => {
|
||||
console.log("symbols", r)
|
||||
$("symPanel").open=true;
|
||||
$("symList").setData(r);
|
||||
$("symPanel").open = true;
|
||||
const icons=[
|
||||
'symbol-file' ,
|
||||
'symbol-class' ,
|
||||
'symbol-namespace' ,
|
||||
'symbol-structure' ,
|
||||
'symbol-class' ,
|
||||
'symbol-method' ,
|
||||
'symbol-property' ,
|
||||
'symbol-field' ,
|
||||
'symbol-method-arrow' ,
|
||||
'symbol-enum' ,
|
||||
'symbol-interface' ,
|
||||
'symbol-method' ,
|
||||
'symbol-variable' ,
|
||||
'symbol-constant' ,
|
||||
'symbol-string' ,
|
||||
'symbol-numeric' ,
|
||||
'symbol-boolean' ,
|
||||
'symbol-array' ,
|
||||
'symbol-structure' ,
|
||||
'symbol-key' ,
|
||||
'dash' ,
|
||||
'symbol-enum-member' ,
|
||||
'symbol-misc' ,
|
||||
'symbol-event' ,
|
||||
'symbol-operator' ,
|
||||
'symbol-parameter'
|
||||
];
|
||||
$("symList").setData(r,icons);
|
||||
});
|
||||
};
|
||||
|
||||
|
|
@ -96,6 +124,14 @@ $("load").onchange = e => {
|
|||
});
|
||||
$("load").value = "";
|
||||
};
|
||||
|
||||
function updateSettings(event) {
|
||||
event.preventDefault();
|
||||
alert("TODO");
|
||||
};
|
||||
|
||||
$("fSettings").addEventListener("submit", updateSettings);
|
||||
|
||||
function connect() {
|
||||
const server = $("iServer").value;
|
||||
const file = $("iFile").value;
|
||||
|
|
@ -126,9 +162,11 @@ function connect() {
|
|||
|
||||
function connectStatus(bool) {
|
||||
if (bool) {
|
||||
$("popcon").querySelector("i").classList.value = "codicon codicon-vm-active";
|
||||
$("popcon").classList.remove("btn-danger")
|
||||
$("popcon").classList.add("btn-success")
|
||||
} else {
|
||||
$("popcon").querySelector("i").classList.value = "codicon codicon-vm-outline";
|
||||
$("popcon").classList.add("btn-danger")
|
||||
$("popcon").classList.remove("btn-success")
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,2 +0,0 @@
|
|||
https://github.com/microsoft/vscode-codicons
|
||||
https://github.com/microsoft/vscode-codicons/releases/tag/v0.0.40
|
||||
7
webapp/static/clients/codicon@0.0.40/readme.md
Normal file
7
webapp/static/clients/codicon@0.0.40/readme.md
Normal file
|
|
@ -0,0 +1,7 @@
|
|||
```html
|
||||
<i class='codicon codicon-symbol-method'></i>
|
||||
```
|
||||
|
||||
* [search codicon icons](https://microsoft.github.io/vscode-codicons/dist/codicon.html)
|
||||
* https://github.com/microsoft/vscode-codicons
|
||||
* https://github.com/microsoft/vscode-codicons/releases/tag/v0.0.40
|
||||
Loading…
Add table
Reference in a new issue