134 lines
5.8 KiB
JavaScript
134 lines
5.8 KiB
JavaScript
// MNote debug /tree shell icon templates and small DOM factories.
|
|
|
|
export const TREE_SHELL_ICONS = {
|
|
add: `
|
|
<svg viewBox="0 0 16 16" fill="none" aria-hidden="true">
|
|
<path d="M8 3.2v9.6M3.2 8h9.6" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
|
|
</svg>
|
|
`,
|
|
more: `
|
|
<svg viewBox="0 0 16 16" fill="currentColor" aria-hidden="true">
|
|
<circle cx="4" cy="8" r="1.2"/>
|
|
<circle cx="8" cy="8" r="1.2"/>
|
|
<circle cx="12" cy="8" r="1.2"/>
|
|
</svg>
|
|
`,
|
|
edit: `
|
|
<svg viewBox="0 0 16 16" fill="none" aria-hidden="true">
|
|
<path d="M3.4 11.8 3 13l1.2-.4 6.6-6.6-1.4-1.4-6 6.2Z" stroke="currentColor" stroke-width="1.1" stroke-linejoin="round"/>
|
|
<path d="m9.9 4.6 1.5-1.5a1 1 0 0 1 1.4 0l.6.6a1 1 0 0 1 0 1.4l-1.5 1.5" stroke="currentColor" stroke-width="1.1" stroke-linecap="round"/>
|
|
</svg>
|
|
`,
|
|
up: `
|
|
<svg viewBox="0 0 16 16" fill="none" aria-hidden="true">
|
|
<path d="M8 12.6V4.2M8 4.2 5.4 6.8M8 4.2l2.6 2.6" stroke="currentColor" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round"/>
|
|
</svg>
|
|
`,
|
|
page: `
|
|
<svg viewBox="0 0 16 16" fill="none" aria-hidden="true">
|
|
<path d="M4 2.8h5.2l2.8 2.8v7.6H4V2.8Z" stroke="currentColor" stroke-width="1.2" stroke-linejoin="round"/>
|
|
<path d="M9.2 2.8v2.8H12" stroke="currentColor" stroke-width="1.2" stroke-linejoin="round"/>
|
|
</svg>
|
|
`,
|
|
index: `
|
|
<svg viewBox="0 0 16 16" fill="none" aria-hidden="true">
|
|
<path d="M4 2.8h5.2l2.8 2.8v7.6H4V2.8Z" stroke="currentColor" stroke-width="1.2" stroke-linejoin="round"/>
|
|
<path d="M6 7h4M6 9h4M6 11h3" stroke="currentColor" stroke-width="1.2" stroke-linecap="round"/>
|
|
</svg>
|
|
`,
|
|
mindmap: `
|
|
<svg viewBox="0 0 16 16" fill="none" aria-hidden="true">
|
|
<circle cx="8" cy="8" r="1.6" fill="currentColor"/>
|
|
<circle cx="4" cy="4.5" r="1.3" stroke="currentColor" stroke-width="1.1"/>
|
|
<circle cx="12" cy="4.5" r="1.3" stroke="currentColor" stroke-width="1.1"/>
|
|
<circle cx="12" cy="11.5" r="1.3" stroke="currentColor" stroke-width="1.1"/>
|
|
<path d="M6.8 7 4.9 5.4M9.2 7l1.9-1.6M9.1 9l2 1.6" stroke="currentColor" stroke-width="1.1" stroke-linecap="round"/>
|
|
</svg>
|
|
`,
|
|
table: `
|
|
<svg viewBox="0 0 16 16" fill="none" aria-hidden="true">
|
|
<rect x="3.2" y="3.2" width="9.6" height="9.6" rx="1.4" stroke="currentColor" stroke-width="1.2"/>
|
|
<path d="M3.8 6.6h8.4M6.6 3.8v8.4M9.4 3.8v8.4" stroke="currentColor" stroke-width="1.1"/>
|
|
</svg>
|
|
`,
|
|
pdf: `
|
|
<svg viewBox="0 0 16 16" fill="none" aria-hidden="true">
|
|
<path d="M4 2.8h5.2l2.8 2.8v7.6H4V2.8Z" stroke="currentColor" stroke-width="1.2" stroke-linejoin="round"/>
|
|
<path d="M6 10.8V6.5h1.5a1.2 1.2 0 1 1 0 2.4H6m3.2-2.4v4.3m0 0c1.1 0 1.8-.8 1.8-2.1 0-1.3-.7-2.2-1.8-2.2m-1.7 4.3h1.7" stroke="currentColor" stroke-width="1" stroke-linecap="round" stroke-linejoin="round"/>
|
|
</svg>
|
|
`,
|
|
book: `
|
|
<svg viewBox="0 0 16 16" fill="none" aria-hidden="true">
|
|
<path d="M4.2 3.2h6.2a1.6 1.6 0 0 1 1.6 1.6v7.4H5.4a1.2 1.2 0 0 0-1.2 1.2V4.4a1.2 1.2 0 0 1 1.2-1.2Z" stroke="currentColor" stroke-width="1.2" stroke-linejoin="round"/>
|
|
<path d="M5.4 12.2V4.1M7 6h3.1M7 8.2h3.1" stroke="currentColor" stroke-width="1.1" stroke-linecap="round"/>
|
|
</svg>
|
|
`,
|
|
image: `
|
|
<svg viewBox="0 0 16 16" fill="none" aria-hidden="true">
|
|
<rect x="3" y="3" width="10" height="10" rx="1.5" stroke="currentColor" stroke-width="1.2"/>
|
|
<circle cx="6.2" cy="6.2" r="1.1" stroke="currentColor" stroke-width="1"/>
|
|
<path d="M4.5 11 7.1 8.6l1.8 1.7 1.7-1.5L12 11" stroke="currentColor" stroke-width="1.1" stroke-linecap="round" stroke-linejoin="round"/>
|
|
</svg>
|
|
`,
|
|
video: `
|
|
<svg viewBox="0 0 16 16" fill="none" aria-hidden="true">
|
|
<rect x="3" y="3.4" width="7.8" height="9.2" rx="1.4" stroke="currentColor" stroke-width="1.2"/>
|
|
<path d="m9.8 7 2.8-1.7v5.4L9.8 9" stroke="currentColor" stroke-width="1.1" stroke-linejoin="round"/>
|
|
</svg>
|
|
`,
|
|
audio: `
|
|
<svg viewBox="0 0 16 16" fill="none" aria-hidden="true">
|
|
<path d="M6.4 4.2v7.6a1.5 1.5 0 1 1-1-1.4V5.6l5.2-1.2v5.2a1.5 1.5 0 1 1-1-1.4V3.5L6.4 4.2Z" stroke="currentColor" stroke-width="1.1" stroke-linejoin="round"/>
|
|
</svg>
|
|
`,
|
|
file: `
|
|
<svg viewBox="0 0 16 16" fill="none" aria-hidden="true">
|
|
<path d="M4 2.8h5.2l2.8 2.8v7.6H4V2.8Z" stroke="currentColor" stroke-width="1.2" stroke-linejoin="round"/>
|
|
<path d="M6 8.2h4M6 10.4h2.8" stroke="currentColor" stroke-width="1.2" stroke-linecap="round"/>
|
|
</svg>
|
|
`,
|
|
};
|
|
|
|
export function createTreeShellKindBadge(kind) {
|
|
const badge = document.createElement("span");
|
|
badge.className = "tree-kind-badge";
|
|
badge.dataset.kind = kind;
|
|
badge.innerHTML =
|
|
kind === "mindmap"
|
|
? TREE_SHELL_ICONS.mindmap
|
|
: kind === "table"
|
|
? TREE_SHELL_ICONS.table
|
|
: kind === "pdf"
|
|
? TREE_SHELL_ICONS.pdf
|
|
: kind === "book"
|
|
? TREE_SHELL_ICONS.book
|
|
: kind === "image"
|
|
? TREE_SHELL_ICONS.image
|
|
: kind === "video"
|
|
? TREE_SHELL_ICONS.video
|
|
: kind === "audio"
|
|
? TREE_SHELL_ICONS.audio
|
|
: kind === "index"
|
|
? TREE_SHELL_ICONS.index
|
|
: kind === "page"
|
|
? TREE_SHELL_ICONS.page
|
|
: TREE_SHELL_ICONS.file;
|
|
return badge;
|
|
}
|
|
|
|
export function createTreeShellActionButton(icon, testId, title, onClick, disabled, busy) {
|
|
const button = document.createElement("button");
|
|
button.type = "button";
|
|
button.className = "tree-action";
|
|
button.dataset.testid = testId;
|
|
button.title = title;
|
|
button.setAttribute("aria-label", title);
|
|
button.innerHTML = icon;
|
|
button.disabled = disabled || busy;
|
|
button.addEventListener("click", (event) => {
|
|
event.stopPropagation();
|
|
onClick(button);
|
|
});
|
|
return button;
|
|
}
|