mirror of
https://github.com/glassflame/glassflame.github.io.git
synced 2024-11-22 08:04:27 +00:00
Continue refactoring #2
This commit is contained in:
parent
8b45e78f4c
commit
610c849264
GPG key ID:
2A24051445686895
26 changed files with 663 additions and 288 deletions
|
|
@ -1,5 +1,5 @@
|
|||
<component name="ProjectCodeStyleConfiguration">
|
||||
<state>
|
||||
<option name="PREFERRED_PROJECT_CODE_STYLE" value="Default" />
|
||||
<option name="USE_PER_PROJECT_SETTINGS" value="true" />
|
||||
</state>
|
||||
</component>
|
||||
|
|
@ -5,6 +5,7 @@
|
|||
<inspection_tool class="CommaExpressionJS" enabled="false" level="WARNING" enabled_by_default="false" />
|
||||
<inspection_tool class="CssUnusedSymbol" enabled="false" level="WARNING" enabled_by_default="false" />
|
||||
<inspection_tool class="DuplicatedCode" enabled="false" level="WEAK WARNING" enabled_by_default="false" />
|
||||
<inspection_tool class="ES6PreferShortImport" enabled="false" level="WARNING" enabled_by_default="false" />
|
||||
<inspection_tool class="HtmlUnknownTag" enabled="true" level="WARNING" enabled_by_default="true">
|
||||
<option name="myValues">
|
||||
<value>
|
||||
|
|
|
|||
|
|
@ -1,6 +1,5 @@
|
|||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<project version="4">
|
||||
<component name="JavaScriptLibraryMappings">
|
||||
<file url="file://$PROJECT_DIR$" libraries="{marked}" />
|
||||
</component>
|
||||
</project>
|
||||
226
index.html
226
index.html
|
|
@ -4,6 +4,9 @@
|
|||
<meta charset="utf-8" />
|
||||
<title>WIP: Obsiview</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<!-- Interaction scripts -->
|
||||
<script type="module" src="src/index.mjs"></script>
|
||||
<!-- Global style -->
|
||||
<style>
|
||||
@import "style/light.css";
|
||||
@import "style/dark.css";
|
||||
|
|
@ -35,103 +38,14 @@
|
|||
color: var(--color-foreground);
|
||||
}
|
||||
</style>
|
||||
<script type="module" src="src/index.mjs"></script>
|
||||
<template id="template-display">
|
||||
<slot name="display-container">{Displayed content}</slot>
|
||||
</template>
|
||||
<template id="template-node-group">
|
||||
<!-- Templates -->
|
||||
<template id="template-vault">
|
||||
<style>
|
||||
.node-group {
|
||||
outline: var(--node-group-border-width) solid var(--color-node);
|
||||
background-color: color-mix(in srgb, var(--color-node) 20%, var(--color-background));
|
||||
border-radius: 0 8px 8px 8px;
|
||||
padding: 12px;
|
||||
}
|
||||
|
||||
.node-group-label {
|
||||
position: relative;
|
||||
bottom: 14px;
|
||||
left: -12px;
|
||||
transform: translateY(-100%);
|
||||
|
||||
display: inline-block;
|
||||
|
||||
outline: var(--node-group-border-width) solid var(--color-node);
|
||||
background-color: color-mix(in srgb, var(--color-node) 20%, var(--color-background));
|
||||
border-radius: 8px 8px 0 0;
|
||||
padding: 12px;
|
||||
}
|
||||
|
||||
.node-group-label h1 {
|
||||
margin: 0;
|
||||
}
|
||||
</style>
|
||||
<aside class="canvas-item node node-group">
|
||||
<h1><slot name="node-group-label">{Group label}</slot></h1>
|
||||
</aside>
|
||||
</template>
|
||||
<template id="template-node-file">
|
||||
<style>
|
||||
.node-file {
|
||||
position: absolute;
|
||||
box-sizing: border-box;
|
||||
|
||||
--color-node: var(--color-gray);
|
||||
outline: var(--node-file-border-width) solid var(--color-node);
|
||||
background-color: color-mix(in srgb, var(--color-node) 10%, var(--color-background));
|
||||
border-radius: 8px;
|
||||
padding: 12px;
|
||||
|
||||
overflow-x: clip;
|
||||
overflow-y: scroll;
|
||||
}
|
||||
|
||||
.node-file-title {
|
||||
font-size: 2em;
|
||||
margin-block-start: .67em;
|
||||
margin-block-end: .67em;
|
||||
}
|
||||
</style>
|
||||
<article class="node-file">
|
||||
<h1 class="node-file-title">
|
||||
<slot name="node-title">{Node title}</slot>
|
||||
</h1>
|
||||
<slot name="node-contents">{Node contents}</slot>
|
||||
</article>
|
||||
</template>
|
||||
<template id="template-node-text">
|
||||
<style>
|
||||
.node-text {
|
||||
position: absolute;
|
||||
box-sizing: border-box;
|
||||
|
||||
--color-node: var(--color-gray);
|
||||
outline: var(--node-file-border-width) solid var(--color-node);
|
||||
background-color: color-mix(in srgb, var(--color-node) 10%, var(--color-background));
|
||||
border-radius: 8px;
|
||||
padding: 12px;
|
||||
|
||||
overflow-x: clip;
|
||||
overflow-y: scroll;
|
||||
}
|
||||
</style>
|
||||
<article class="node-text">
|
||||
<slot name="node-contents">{Node contents}</slot>
|
||||
</article>
|
||||
</template>
|
||||
<template id="template-edge">
|
||||
<slot name="edge-svg">{Edge SVG}</slot>
|
||||
</template>
|
||||
<template id="template-markdown">
|
||||
<slot name="markdown-contents">{Markdown text}</slot>
|
||||
</template>
|
||||
<template id="template-frontmatter">
|
||||
<style>
|
||||
.frontmatter {
|
||||
opacity: 50%;
|
||||
}
|
||||
</style>
|
||||
<pre class="frontmatter"><slot name="frontmatter-contents">{Markdown text}</slot></pre>
|
||||
<div class="vault">
|
||||
<slot name="vault-child"></slot>
|
||||
</div>
|
||||
</template>
|
||||
<template id="template-canvas">
|
||||
<style>
|
||||
|
|
@ -162,15 +76,115 @@
|
|||
<slot name="canvas-nodes">{Canvas nodes}</slot>
|
||||
</div>
|
||||
</template>
|
||||
<template id="template-wikilink">
|
||||
<template id="template-display">
|
||||
<slot name="display-container">{Displayed content}</slot>
|
||||
</template>
|
||||
<template id="template-node-group">
|
||||
<style>
|
||||
.wikilink {
|
||||
color: var(--color-accent);
|
||||
text-decoration: underline 1px solid currentColor;
|
||||
cursor: pointer;
|
||||
.node {
|
||||
outline: var(--node-group-border-width) solid var(--color-node);
|
||||
background-color: color-mix(in srgb, var(--color-node) 20%, var(--color-background));
|
||||
border-radius: 0 8px 8px 8px;
|
||||
padding: 12px;
|
||||
}
|
||||
|
||||
.node-group-label {
|
||||
position: relative;
|
||||
bottom: 14px;
|
||||
left: -12px;
|
||||
transform: translateY(-100%);
|
||||
|
||||
display: inline-block;
|
||||
|
||||
outline: var(--node-group-border-width) solid var(--color-node);
|
||||
background-color: color-mix(in srgb, var(--color-node) 20%, var(--color-background));
|
||||
border-radius: 8px 8px 0 0;
|
||||
padding: 12px;
|
||||
}
|
||||
|
||||
.node-group-label-title {
|
||||
margin: 0;
|
||||
}
|
||||
</style>
|
||||
<a class="wikilink"><slot name="wikilink-text">{Wikilink text}</slot></a>
|
||||
<div class="canvas-item node node-group">
|
||||
<aside class="node-group-label">
|
||||
<h1 class="node-group-label-title"><slot name="node-group-label">{Group label}</slot></h1>
|
||||
</aside>
|
||||
</div>
|
||||
</template>
|
||||
<template id="template-node-file">
|
||||
<style>
|
||||
.node {
|
||||
outline: var(--node-file-border-width) solid var(--color-node);
|
||||
background-color: color-mix(in srgb, var(--color-node) 10%, var(--color-background));
|
||||
border-radius: 8px;
|
||||
padding: 12px;
|
||||
}
|
||||
|
||||
.node-file {
|
||||
overflow-x: clip;
|
||||
overflow-y: scroll;
|
||||
}
|
||||
|
||||
.node-file-label {
|
||||
font-size: 2em;
|
||||
margin-block-start: .67em;
|
||||
margin-block-end: .67em;
|
||||
}
|
||||
</style>
|
||||
<article class="canvas-item node node-file">
|
||||
<h1 class="node-file-label">
|
||||
<slot name="node-file-label">{Node title}</slot>
|
||||
</h1>
|
||||
<slot name="node-file-contents">{Node contents}</slot>
|
||||
</article>
|
||||
</template>
|
||||
<template id="template-node-text">
|
||||
<style>
|
||||
.node {
|
||||
outline: var(--node-file-border-width) solid var(--color-node);
|
||||
background-color: color-mix(in srgb, var(--color-node) 10%, var(--color-background));
|
||||
border-radius: 8px;
|
||||
padding: 12px;
|
||||
}
|
||||
|
||||
.node-text {
|
||||
overflow-x: clip;
|
||||
overflow-y: scroll;
|
||||
}
|
||||
</style>
|
||||
<article class="canvas-item node node-text">
|
||||
<slot name="node-text-contents">{Node contents}</slot>
|
||||
</article>
|
||||
</template>
|
||||
<template id="template-edge">
|
||||
<style>
|
||||
.edge svg line {
|
||||
stroke: var(--color-node);
|
||||
stroke-width: var(--edge-width);
|
||||
}
|
||||
</style>
|
||||
<div class="edge">
|
||||
<slot name="edge-svg">{Edge SVG}</slot>
|
||||
</div>
|
||||
</template>
|
||||
<template id="template-markdown">
|
||||
<style>
|
||||
.markdown
|
||||
</style>
|
||||
<div class="markdown">
|
||||
<slot name="markdown-document">{Markdown text}</slot>
|
||||
</div>
|
||||
</template>
|
||||
<template id="template-frontmatter">
|
||||
<style>
|
||||
.frontmatter {
|
||||
opacity: 50%;
|
||||
}
|
||||
</style>
|
||||
<div class="frontmatter">
|
||||
<slot name="frontmatter-contents">{Markdown text}</slot>
|
||||
</div>
|
||||
</template>
|
||||
<template id="template-hashtag">
|
||||
<style>
|
||||
|
|
@ -179,7 +193,17 @@
|
|||
color: var(--color-accent);
|
||||
}
|
||||
</style>
|
||||
<span class="hashtag"><slot name="hashtag-text">{#Hashtag}</slot></span>
|
||||
<span class="hashtag"><slot name="hashtag-tag">{#Hashtag}</slot></span>
|
||||
</template>
|
||||
<template id="template-wikilink">
|
||||
<style>
|
||||
.wikilink {
|
||||
color: var(--color-accent);
|
||||
text-decoration: underline 1px solid currentColor;
|
||||
cursor: pointer;
|
||||
}
|
||||
</style>
|
||||
<a class="wikilink"><slot name="wikilink-anchor">{Wikilink text}</slot></a>
|
||||
</template>
|
||||
</head>
|
||||
<body>
|
||||
|
|
|
|||
|
|
@ -41,12 +41,10 @@ export class CustomElement extends HTMLElement {
|
|||
* Callback automatically called when this element is added to the DOM.
|
||||
*/
|
||||
connectedCallback() {
|
||||
// The template to duplicate.
|
||||
const template = this.constructor.getTemplate()
|
||||
// The shadow root, the inner contents of the element..
|
||||
const shadow = this.attachShadow({ mode: "open" })
|
||||
// The element contained inside the shadow root..
|
||||
this.#instance = template.content.cloneNode(true)
|
||||
this.#instance = this.constructor.template.content.cloneNode(true)
|
||||
// Call the custom callback.
|
||||
this.onConnect()
|
||||
// Add the instance to the DOM.
|
||||
|
|
|
|||
|
|
@ -14,43 +14,43 @@ export class CanvasElement extends CustomElement {
|
|||
* The contents of the Canvas, as they were the last time they were updated.
|
||||
* @type {string}
|
||||
*/
|
||||
#contents
|
||||
#document
|
||||
|
||||
/**
|
||||
* The contents of the Canvas, as they were the last time they were updated.
|
||||
* @returns {string} The raw contents.
|
||||
*/
|
||||
get contents() {
|
||||
return this.#contents
|
||||
get document() {
|
||||
return this.#document
|
||||
}
|
||||
|
||||
/**
|
||||
* The parsed contents of the Canvas, as they were the last time they were updated.
|
||||
* @type {Object}
|
||||
*/
|
||||
#parsedContents
|
||||
#parsedDocument
|
||||
|
||||
/**
|
||||
* The parsed contents of the Canvas, as they were the last time they were updated.
|
||||
* @returns {Object} The parsed contents.
|
||||
*/
|
||||
get parsedContents() {
|
||||
return this.#parsedContents
|
||||
get parsedDocument() {
|
||||
return this.#parsedDocument
|
||||
}
|
||||
|
||||
/**
|
||||
* Update the values of {@link contents} and {@link parsedContents} from the `contents` attribute of the element.
|
||||
* Update the values of {@link document} and {@link parsedDocument} from the `document` attribute of the element.
|
||||
* @throws SyntaxError If `contents` is not valid JSON.
|
||||
*/
|
||||
recalculateContents() {
|
||||
this.#contents = this.getAttribute("contents")
|
||||
this.#parsedContents = JSON.parse(this.#contents)
|
||||
this.#document = this.getAttribute("contents")
|
||||
this.#parsedDocument = JSON.parse(this.#document)
|
||||
}
|
||||
|
||||
/**
|
||||
* The minimum X node found in the items of this Canvas.
|
||||
* Used to compute this element's rect.
|
||||
* Can be computed from {@link contents} with {@link recalculateMinMax}.
|
||||
* Can be computed from {@link document} with {@link recalculateMinMax}.
|
||||
* @type {{x: number, width: number}}
|
||||
*/
|
||||
minX
|
||||
|
|
@ -58,7 +58,7 @@ export class CanvasElement extends CustomElement {
|
|||
/**
|
||||
* The minimum Y node found in the items of this Canvas.
|
||||
* Used to compute this element's rect.
|
||||
* Can be computed from {@link contents} with {@link recalculateMinMax}.
|
||||
* Can be computed from {@link document} with {@link recalculateMinMax}.
|
||||
* @type {{y: number, height: number}}
|
||||
*/
|
||||
minY
|
||||
|
|
@ -66,7 +66,7 @@ export class CanvasElement extends CustomElement {
|
|||
/**
|
||||
* The maximum X node found in the items of this Canvas.
|
||||
* Used to compute this element's rect.
|
||||
* Can be computed from {@link contents} with {@link recalculateMinMax}.
|
||||
* Can be computed from {@link document} with {@link recalculateMinMax}.
|
||||
* @type {{x: number, width: number}}
|
||||
*/
|
||||
maxX
|
||||
|
|
@ -74,13 +74,13 @@ export class CanvasElement extends CustomElement {
|
|||
/**
|
||||
* The maximum Y node found in the items of this Canvas.
|
||||
* Used to compute this element's rect.
|
||||
* Can be computed from {@link contents} with {@link recalculateMinMax}.
|
||||
* Can be computed from {@link document} with {@link recalculateMinMax}.
|
||||
* @type {{y: number, height: number}}
|
||||
*/
|
||||
maxY
|
||||
|
||||
/**
|
||||
* Compute {@link minX}, {@link minY}, {@link maxX}, {@link maxY} from {@link contents}.
|
||||
* Compute {@link minX}, {@link minY}, {@link maxX}, {@link maxY} from {@link document}.
|
||||
* @returns {void}
|
||||
*/
|
||||
recalculateMinMax() {
|
||||
|
|
@ -90,7 +90,7 @@ export class CanvasElement extends CustomElement {
|
|||
this.maxX = { x: -Infinity, width: 0 }
|
||||
this.maxY = { y: -Infinity, height: 0 }
|
||||
// Iterate over nodes.
|
||||
for(const node of this.parsedContents["nodes"]) {
|
||||
for(const node of this.parsedDocument["nodes"]) {
|
||||
// Convert node values from strings to numbers.
|
||||
let {x, y, width, height} = node
|
||||
x, y, width, height = Number(x), Number(y), Number(width), Number(height)
|
||||
|
|
@ -142,7 +142,7 @@ export class CanvasElement extends CustomElement {
|
|||
static NODE_ELEMENT_NAME_PREFIX = "x-node-"
|
||||
|
||||
/**
|
||||
* Destroy and recreate the {@link nodesContainer} with the current {@link parsedContents}, {@link minX}, {@link minY}, {@link maxX}, {@link maxY}.
|
||||
* Destroy and recreate the {@link nodesContainer} with the current {@link parsedDocument}, {@link minX}, {@link minY}, {@link maxX}, {@link maxY}.
|
||||
* @returns {void}
|
||||
*/
|
||||
recreateNodes() {
|
||||
|
|
@ -154,7 +154,7 @@ export class CanvasElement extends CustomElement {
|
|||
this.nodesContainer = document.createElement("div")
|
||||
this.nodesContainer.slot = this.constructor.NODES_SLOT_NAME
|
||||
|
||||
for(const node of this.parsedContents["nodes"]) {
|
||||
for(const node of this.parsedDocument["nodes"]) {
|
||||
let {id, type, color, x, y, width, height} = node
|
||||
x, y, width, height = Number(x), Number(y), Number(width), Number(height)
|
||||
|
||||
|
|
@ -228,7 +228,7 @@ export class CanvasElement extends CustomElement {
|
|||
static EDGE_ELEMENT_NAME = "x-edge"
|
||||
|
||||
/**
|
||||
* Destroy and recreate the {@link edgesContainer} with the current {@link parsedContents}, {@link minX}, {@link minY}, {@link maxX}, {@link maxY}.
|
||||
* Destroy and recreate the {@link edgesContainer} with the current {@link parsedDocument}, {@link minX}, {@link minY}, {@link maxX}, {@link maxY}.
|
||||
* @returns {void}
|
||||
*/
|
||||
recreateEdges() {
|
||||
|
|
@ -240,7 +240,7 @@ export class CanvasElement extends CustomElement {
|
|||
this.edgesContainer = document.createElement("div")
|
||||
this.edgesContainer.slot = this.constructor.EDGES_SLOT_NAME
|
||||
|
||||
for(const edge of this.parsedContents["edges"]) {
|
||||
for(const edge of this.parsedDocument["edges"]) {
|
||||
let {id, fromNode, fromSide, toNode, toSide, color, toEnd: arrows} = edge
|
||||
|
||||
const element = document.createElement(this.constructor.EDGE_ELEMENT_NAME)
|
||||
|
|
@ -263,6 +263,7 @@ export class CanvasElement extends CustomElement {
|
|||
}
|
||||
|
||||
onConnect() {
|
||||
super.onConnect()
|
||||
this.recalculateContents()
|
||||
this.recalculateMinMax()
|
||||
this.recreateNodes()
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
import { CustomElement } from "src/elements/base.mjs";
|
||||
import { CustomElement } from "../base.mjs";
|
||||
|
||||
|
||||
/**
|
||||
|
|
|
|||
|
|
@ -1,13 +1,13 @@
|
|||
import { CanvasElement } from "src/elements/canvas/canvas.mjs";
|
||||
import { CanvasItemElement } from "src/elements/canvas/canvasitem.mjs";
|
||||
import { findFirstAncestor } from "src/utils/trasversal.mjs";
|
||||
import { CanvasElement } from "../canvas.mjs";
|
||||
import { CanvasItemElement } from "../canvasitem.mjs";
|
||||
import { findFirstAncestor } from "../../../utils/trasversal.mjs";
|
||||
|
||||
|
||||
/**
|
||||
* An edge of a {@link CanvasElement}.
|
||||
*/
|
||||
export class EdgeElement extends CanvasItemElement {
|
||||
static getTemplate() {
|
||||
static get template() {
|
||||
return document.getElementById("template-edge")
|
||||
}
|
||||
|
||||
|
|
@ -22,7 +22,7 @@ export class EdgeElement extends CanvasItemElement {
|
|||
* Recalculate the value of {@link canvas}.
|
||||
*/
|
||||
recalculateCanvas() {
|
||||
findFirstAncestor(this, CanvasElement)
|
||||
this.canvas = findFirstAncestor(this, CanvasElement)
|
||||
}
|
||||
|
||||
/**
|
||||
|
|
@ -94,15 +94,37 @@ export class EdgeElement extends CanvasItemElement {
|
|||
*/
|
||||
lineElement
|
||||
|
||||
// TODO: Last time, you were here!
|
||||
static SVG_ELEMENT_SLOT = "edge-svg"
|
||||
|
||||
/**
|
||||
* Recreate {@link svgElement} and {@link lineElement} with the current values of the element.
|
||||
* @returns {void}
|
||||
*/
|
||||
recreateSvgElement() {
|
||||
if(this.svgElement) {
|
||||
this.svgElement.remove()
|
||||
this.svgElement = null
|
||||
this.lineElement = null
|
||||
}
|
||||
|
||||
const [x1, y1] = this.fromNode.edgeHandle(this.nodeFromSide)
|
||||
const [x2, y2] = this.toNode.edgeHandle(this.nodeToSide)
|
||||
|
||||
this.lineElement = document.createElementNS("http://www.w3.org/2000/svg", "line")
|
||||
this.lineElement.setAttribute("x1", x1.toString())
|
||||
this.lineElement.setAttribute("y1", y1.toString())
|
||||
this.lineElement.setAttribute("x2", x2.toString())
|
||||
this.lineElement.setAttribute("y2", y2.toString())
|
||||
|
||||
this.svgElement = document.createElementNS("http://www.w3.org/2000/svg", "svg")
|
||||
this.svgElement.slot = this.constructor.SVG_ELEMENT_SLOT
|
||||
this.svgElement.style.setProperty("position", "absolute")
|
||||
this.svgElement.style.setProperty("left", "0")
|
||||
this.svgElement.style.setProperty("top", "0")
|
||||
this.svgElement.style.setProperty("overflow", "visible")
|
||||
|
||||
this.svgElement.appendChild(this.lineElement)
|
||||
this.appendChild(this.svgElement)
|
||||
}
|
||||
|
||||
onConnect() {
|
||||
|
|
@ -110,31 +132,5 @@ export class EdgeElement extends CanvasItemElement {
|
|||
this.recalculateCanvas()
|
||||
this.recalculateFromTo()
|
||||
this.recreateSvgElement()
|
||||
|
||||
const fromNode = canvas.nodeElements[this.getAttribute("node-from")]
|
||||
const fromSide = this.getAttribute("node-from-side")
|
||||
const [x1, y1] = fromNode.getCenterCoordinatesOfSide(fromSide)
|
||||
|
||||
const toNode = canvas.nodeElements[this.getAttribute("node-to")]
|
||||
const toSide = this.getAttribute("node-to-side")
|
||||
const [x2, y2] = toNode.getCenterCoordinatesOfSide(toSide)
|
||||
|
||||
this.svgSlotted = document.createElementNS("http://www.w3.org/2000/svg", "svg")
|
||||
this.svgSlotted.slot = "edge-svg"
|
||||
this.svgSlotted.style.setProperty("position", "absolute")
|
||||
this.svgSlotted.style.setProperty("left", "0")
|
||||
this.svgSlotted.style.setProperty("top", "0")
|
||||
this.svgSlotted.style.setProperty("overflow", "visible")
|
||||
|
||||
this.lineElement = document.createElementNS("http://www.w3.org/2000/svg", "line")
|
||||
this.lineElement.setAttribute("x1", x1)
|
||||
this.lineElement.setAttribute("y1", y1)
|
||||
this.lineElement.setAttribute("x2", x2)
|
||||
this.lineElement.setAttribute("y2", y2)
|
||||
this.lineElement.style.setProperty("stroke", this.constructor.colorToCSS(this.getAttribute("color")))
|
||||
this.lineElement.style.setProperty("stroke-width", "var(--edge-width)")
|
||||
|
||||
this.svgSlotted.appendChild(this.lineElement)
|
||||
this.appendChild(this.svgSlotted)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
1
src/elements/canvas/edge/index.mjs
Normal file
1
src/elements/canvas/edge/index.mjs
Normal file
|
|
@ -0,0 +1 @@
|
|||
export {EdgeElement} from "./base.mjs"
|
||||
3
src/elements/canvas/index.mjs
Normal file
3
src/elements/canvas/index.mjs
Normal file
|
|
@ -0,0 +1,3 @@
|
|||
export {CanvasElement} from "./canvas.mjs"
|
||||
export {EdgeElement} from "./edge/index.mjs"
|
||||
export {NodeFileElement, NodeGroupElement, NodeTextElement} from "./node/index.mjs"
|
||||
|
|
@ -1,4 +1,4 @@
|
|||
import { CanvasItemElement } from "src/elements/canvas/canvasitem.mjs";
|
||||
import { CanvasItemElement } from "../canvasitem.mjs";
|
||||
|
||||
|
||||
/**
|
||||
|
|
|
|||
|
|
@ -1,11 +1,11 @@
|
|||
import { NodeElement } from "src/elements/canvas/node/base.mjs";
|
||||
import { DisplayElement } from "src/elements/display.mjs";
|
||||
import { fileDetails } from "src/utils/file.mjs";
|
||||
import { findFirstAncestor } from "src/utils/trasversal.mjs";
|
||||
import { NodeElement } from "./base.mjs";
|
||||
import { DisplayElement } from "../../display.mjs";
|
||||
import { fileDetails } from "../../../utils/file.mjs";
|
||||
import { findFirstAncestor } from "../../../utils/trasversal.mjs";
|
||||
|
||||
|
||||
export class NodeFileElement extends NodeElement {
|
||||
static getTemplate() {
|
||||
static get template() {
|
||||
return document.getElementById("template-node-file")
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
import { NodeElement } from "src/elements/canvas/node/base.mjs";
|
||||
import { NodeElement } from "./base.mjs";
|
||||
|
||||
|
||||
/**
|
||||
|
|
@ -6,6 +6,10 @@ import { NodeElement } from "src/elements/canvas/node/base.mjs";
|
|||
* Visual only, does not actually contain any other nodes.
|
||||
*/
|
||||
export class NodeGroupElement extends NodeElement {
|
||||
static get template() {
|
||||
return document.getElementById("template-node-group")
|
||||
}
|
||||
|
||||
/**
|
||||
* The label text of the group.
|
||||
* Obtained from the `label` attribute of the element.
|
||||
|
|
@ -41,10 +45,6 @@ export class NodeGroupElement extends NodeElement {
|
|||
this.appendChild(this.labelSlotted)
|
||||
}
|
||||
|
||||
static getTemplate() {
|
||||
return document.getElementById("template-node-group")
|
||||
}
|
||||
|
||||
onConnect() {
|
||||
super.onConnect()
|
||||
this.recreateLabelElement()
|
||||
|
|
|
|||
3
src/elements/canvas/node/index.mjs
Normal file
3
src/elements/canvas/node/index.mjs
Normal file
|
|
@ -0,0 +1,3 @@
|
|||
export {NodeFileElement} from "./file.mjs"
|
||||
export {NodeGroupElement} from "./group.mjs"
|
||||
export {NodeTextElement} from "./text.mjs"
|
||||
|
|
@ -1,12 +1,11 @@
|
|||
import { NodeElement } from "src/elements/canvas/node/base.mjs";
|
||||
import { DisplayElement } from "src/elements/display.mjs";
|
||||
import { NodeElement } from "./base.mjs"
|
||||
|
||||
|
||||
/**
|
||||
* A {@link NodeElement} directly rendering a Markdown document.
|
||||
*/
|
||||
export class NodeTextElement extends NodeElement {
|
||||
static getTemplate() {
|
||||
static get template() {
|
||||
return document.getElementById("template-node-text")
|
||||
}
|
||||
|
||||
|
|
@ -14,11 +13,12 @@ export class NodeTextElement extends NodeElement {
|
|||
* Get the Markdown source of this node from the `document` attribute.
|
||||
*/
|
||||
get markdownDocument() {
|
||||
return this.getAttribute("text")
|
||||
return this.getAttribute("document")
|
||||
}
|
||||
|
||||
/**
|
||||
* The element displaying the contents of the node.
|
||||
* Can be recreated with {@link recreateContentsElement}.
|
||||
* @type {MarkdownElement}
|
||||
*/
|
||||
contentsElement
|
||||
|
|
@ -27,7 +27,7 @@ export class NodeTextElement extends NodeElement {
|
|||
* The name of the slot where {@link contentsElement} should be placed in.
|
||||
* @type {string}
|
||||
*/
|
||||
static CONTENTS_ELEMENT_SLOT = "node-file-contents"
|
||||
static CONTENTS_ELEMENT_SLOT = "node-text-contents"
|
||||
|
||||
/**
|
||||
* Recreate {@link labelElement} with the current value of {@link fileName}.
|
||||
|
|
|
|||
|
|
@ -1,58 +1,129 @@
|
|||
import { VaultElement } from "./vault.mjs";
|
||||
import { findFirstAncestor } from "../utils/trasversal.mjs";
|
||||
import { fileDetails } from "../utils/file.mjs";
|
||||
import { CanvasElement } from "./canvas/canvas.mjs";
|
||||
import { MarkdownElement } from "./markdown.mjs";
|
||||
import { FetchError } from "src/elements/canvas/node/base.mjs";
|
||||
import { CustomElement } from "./base.mjs";
|
||||
|
||||
|
||||
/**
|
||||
* Element loading and displaying the contents of a remote file.
|
||||
*/
|
||||
export class DisplayElement extends CustomElement {
|
||||
static getTemplate() {
|
||||
static get template() {
|
||||
return document.getElementById("template-display")
|
||||
}
|
||||
|
||||
containerSlotted
|
||||
loadButton
|
||||
/**
|
||||
* The vault this element is displaying content from.
|
||||
* Can be recalculated via {@link recalculateVault}.
|
||||
* @type {VaultElement}
|
||||
*/
|
||||
vault
|
||||
|
||||
/**
|
||||
* Recalculate the value of {@link vault}.
|
||||
*/
|
||||
recalculateVault() {
|
||||
this.vault = findFirstAncestor(this, VaultElement)
|
||||
}
|
||||
|
||||
/**
|
||||
* Get the path or name of the file this node points to.
|
||||
* @returns {string} The value in question.
|
||||
*/
|
||||
get target() {
|
||||
return this.getAttribute("target")
|
||||
}
|
||||
|
||||
/**
|
||||
* An element displaying the loading status of the current element.
|
||||
* @type {HTMLDivElement|null}
|
||||
*/
|
||||
loadingElement = null
|
||||
|
||||
/**
|
||||
* An element displaying the contents of the current element.
|
||||
* @type {HTMLDivElement|null}
|
||||
*/
|
||||
contentsElement = null
|
||||
|
||||
/**
|
||||
* Slot shared by both {@link loadingElement} and {@link contentsElement}.
|
||||
* @type {string}
|
||||
*/
|
||||
static CONTAINER_ELEMENT_SLOT = "display-container"
|
||||
|
||||
/**
|
||||
* Recreate {@link loadingElement}, removing {@link contentsElement} if it exists.
|
||||
*/
|
||||
recreateLoadingElement() {
|
||||
if(this.loadingElement !== null) {
|
||||
this.loadingElement.remove()
|
||||
this.loadingElement = null
|
||||
}
|
||||
if(this.contentsElement !== null) {
|
||||
this.contentsElement.remove()
|
||||
this.contentsElement = null
|
||||
}
|
||||
|
||||
this.loadingElement = document.createElement("div")
|
||||
this.loadingElement.slot = this.constructor.CONTAINER_ELEMENT_SLOT
|
||||
this.loadingElement.innerText = "Loading..."
|
||||
this.appendChild(this.loadingElement)
|
||||
}
|
||||
|
||||
/**
|
||||
* Recreate {@link contentsElement}, removing {@link loadingElement} if it exists.
|
||||
*/
|
||||
recreateContentsElement() {
|
||||
if(this.loadingElement !== null) {
|
||||
this.loadingElement.remove()
|
||||
this.loadingElement = null
|
||||
}
|
||||
if(this.contentsElement !== null) {
|
||||
this.contentsElement.remove()
|
||||
this.contentsElement = null
|
||||
}
|
||||
|
||||
const {extension} = fileDetails(this.target)
|
||||
|
||||
switch(extension) {
|
||||
case "md":
|
||||
this.contentsElement = document.createElement("x-markdown")
|
||||
break
|
||||
case "canvas":
|
||||
this.contentsElement = document.createElement("x-canvas")
|
||||
break
|
||||
default:
|
||||
console.warn("Encountered a file with an unknown extension:", extension)
|
||||
return
|
||||
}
|
||||
|
||||
this.contentsElement.setAttribute("document", this.document)
|
||||
this.contentsElement.slot = this.constructor.CONTAINER_ELEMENT_SLOT
|
||||
this.appendChild(this.loadingElement)
|
||||
}
|
||||
|
||||
/**
|
||||
* The plaintext contents of the {@link target} document.
|
||||
* @type {string}
|
||||
*/
|
||||
document
|
||||
|
||||
/**
|
||||
* Reload the {@link target} {@link document}.
|
||||
* @returns {Promise<void>}
|
||||
*/
|
||||
async reloadDocument() {
|
||||
const response = await this.vault.fetchCooldown(this.target)
|
||||
// TODO: Add a check that the request was successful
|
||||
this.document = await response.text()
|
||||
}
|
||||
|
||||
onConnect() {
|
||||
this.containerSlotted = document.createElement("div")
|
||||
this.containerSlotted.slot = "display-container"
|
||||
this.loadButton = document.createElement("button")
|
||||
this.loadButton.innerText = "Load"
|
||||
this.loadButton.addEventListener("click", this.load.bind(this))
|
||||
this.containerSlotted.appendChild(this.loadButton)
|
||||
this.appendChild(this.containerSlotted)
|
||||
}
|
||||
|
||||
data
|
||||
|
||||
async fetchData() {
|
||||
const vref = this.getAttribute("vref")
|
||||
const wref = this.getAttribute("wref")
|
||||
const url = new URL(wref, vref)
|
||||
|
||||
const response = await fetch(url, {})
|
||||
|
||||
if(!response.ok) throw new FetchError(response, "Fetch response is not ok")
|
||||
|
||||
this.data = await response.text()
|
||||
}
|
||||
|
||||
async load() {
|
||||
this.loadButton.disabled = true
|
||||
|
||||
await this.fetchData()
|
||||
|
||||
this.containerSlotted.remove()
|
||||
this.containerSlotted = null
|
||||
|
||||
const fileExtension = fileDetails(this.getAttribute("wref")).extension
|
||||
|
||||
this.containerSlotted = document.createElement({
|
||||
"md": customElements.getName(MarkdownElement),
|
||||
"canvas": customElements.getName(CanvasElement),
|
||||
}[fileExtension])
|
||||
this.containerSlotted.slot = "display-container"
|
||||
this.containerSlotted.setAttribute("contents", this.data)
|
||||
this.appendChild(this.containerSlotted)
|
||||
super.onConnect()
|
||||
this.recalculateVault()
|
||||
this.recreateLoadingElement()
|
||||
// noinspection JSIgnoredPromiseFromCall
|
||||
this.reloadDocument().then(this.recreateContentsElement)
|
||||
}
|
||||
}
|
||||
|
|
@ -1,5 +1,4 @@
|
|||
export {NodeFileElement, NodeGroupElement, NodeTextElement} from "src/elements/canvas/node/base.mjs"
|
||||
export {MarkdownElement, HashtagElement, WikilinkElement, FrontMatterElement} from "./markdown.mjs"
|
||||
export {CanvasElement} from "./canvas/canvas.mjs"
|
||||
export {CanvasElement, NodeFileElement, NodeGroupElement, NodeTextElement, EdgeElement} from "./canvas/index.mjs"
|
||||
export {MarkdownElement, HashtagElement, WikilinkElement, FrontMatterElement} from "./markdown/index.mjs"
|
||||
export {DisplayElement} from "./display.mjs"
|
||||
export {EdgeElement} from "src/elements/canvas/edge/base.mjs"
|
||||
export {VaultElement} from "./vault.mjs"
|
||||
|
|
|
|||
73
src/elements/markdown/frontmatter.mjs
Normal file
73
src/elements/markdown/frontmatter.mjs
Normal file
|
|
@ -0,0 +1,73 @@
|
|||
import { CustomElement } from "../base.mjs";
|
||||
|
||||
|
||||
/**
|
||||
* Element rendering Obsidian front matter.
|
||||
*/
|
||||
export class FrontMatterElement extends CustomElement {
|
||||
static get template() {
|
||||
return document.getElementById("template-frontmatter")
|
||||
}
|
||||
|
||||
/**
|
||||
* The programming language used to define this front matter, obtained from the `lang` attribute.
|
||||
* @type {string}
|
||||
*/
|
||||
get language() {
|
||||
return this.getAttribute("lang")
|
||||
}
|
||||
|
||||
/**
|
||||
* The text contained in this front matter, obtained from the `data` attribute.
|
||||
*/
|
||||
get data() {
|
||||
return this.getAttribute("data")
|
||||
}
|
||||
|
||||
/**
|
||||
* The element marking the front matter as preformatted text.
|
||||
* Can be recreated with {@link recreatePreCodeElement}.
|
||||
* @type {HTMLPreElement}
|
||||
*/
|
||||
preElement
|
||||
|
||||
/**
|
||||
* The name of the slot where {@link preElement} should be placed in.
|
||||
* @type {string}
|
||||
*/
|
||||
static PRE_ELEMENT_SLOT = "frontmatter-contents"
|
||||
|
||||
/**
|
||||
* The element displaying the code of the front matter.
|
||||
* Can be recreated with {@link recreatePreCodeElement}.
|
||||
* @type {HTMLElement}
|
||||
*/
|
||||
codeElement
|
||||
|
||||
/**
|
||||
* Recreate {@link preElement} and {@link codeElement} with the current value of {@link language} and {@link data}.
|
||||
* @returns {void}
|
||||
*/
|
||||
recreatePreCodeElement() {
|
||||
if(this.preElement) {
|
||||
this.preElement.remove()
|
||||
this.preElement = null
|
||||
this.codeElement = null
|
||||
}
|
||||
|
||||
this.codeElement = document.createElement("code")
|
||||
this.codeElement.setAttribute("lang", this.language)
|
||||
this.codeElement.innerText = this.data
|
||||
|
||||
this.preElement = document.createElement("pre")
|
||||
this.preElement.slot = this.constructor.PRE_ELEMENT_SLOT
|
||||
|
||||
this.preElement.appendChild(this.codeElement)
|
||||
this.appendChild(this.preElement)
|
||||
}
|
||||
|
||||
onConnect() {
|
||||
super.onConnect()
|
||||
this.recreatePreCodeElement()
|
||||
}
|
||||
}
|
||||
52
src/elements/markdown/hashtag.mjs
Normal file
52
src/elements/markdown/hashtag.mjs
Normal file
|
|
@ -0,0 +1,52 @@
|
|||
import { CustomElement } from "../base.mjs";
|
||||
|
||||
|
||||
/**
|
||||
* Element rendering an Obsidian Hashtag.
|
||||
*/
|
||||
export class HashtagElement extends CustomElement {
|
||||
static get template() {
|
||||
return document.getElementById("template-hashtag")
|
||||
}
|
||||
|
||||
/**
|
||||
* The name of the hashtag, with no leading hash, obtained from the `tag` attribute.
|
||||
* @returns {string}
|
||||
*/
|
||||
get tag() {
|
||||
return this.getAttribute("tag")
|
||||
}
|
||||
|
||||
/**
|
||||
* The element displaying the hashtag.
|
||||
* Can be recreated with {@link recreateTagElement}.
|
||||
* @type {HTMLSpanElement}
|
||||
*/
|
||||
tagElement
|
||||
|
||||
/**
|
||||
* The name of the slot where {@link tagElement} should be placed in.
|
||||
* @type {string}
|
||||
*/
|
||||
static TAG_ELEMENT_SLOT = "hashtag-tag"
|
||||
|
||||
/**
|
||||
* Recreate {@link tagElement} with the current value of {@link tag}.
|
||||
*/
|
||||
recreateTagElement() {
|
||||
if(this.tagElement) {
|
||||
this.tagElement.remove()
|
||||
this.tagElement = null
|
||||
}
|
||||
|
||||
this.tagElement = document.createElement("span")
|
||||
this.tagElement.slot = this.constructor.TAG_ELEMENT_SLOT
|
||||
this.tagElement.innerText = `#${this.tag}`
|
||||
this.appendChild(this.tagElement)
|
||||
}
|
||||
|
||||
onConnect() {
|
||||
super.onConnect()
|
||||
this.recreateTagElement()
|
||||
}
|
||||
}
|
||||
4
src/elements/markdown/index.mjs
Normal file
4
src/elements/markdown/index.mjs
Normal file
|
|
@ -0,0 +1,4 @@
|
|||
export {MarkdownElement} from "./renderer.mjs"
|
||||
export {FrontMatterElement} from "./frontmatter.mjs"
|
||||
export {HashtagElement} from "./hashtag.mjs"
|
||||
export {WikilinkElement} from "./wikilink.mjs"
|
||||
|
|
@ -1,12 +1,20 @@
|
|||
import { Marked } from "https://unpkg.com/marked@9.1.2/lib/marked.esm.js";
|
||||
import { CustomElement } from "./base.mjs";
|
||||
import { CustomElement } from "../base.mjs";
|
||||
|
||||
|
||||
/**
|
||||
* Element rendering the Markdown contents of an Obsidian page.
|
||||
*/
|
||||
export class MarkdownElement extends CustomElement {
|
||||
static marked = new Marked({
|
||||
static get template() {
|
||||
return document.getElementById("template-markdown")
|
||||
}
|
||||
|
||||
/**
|
||||
* {@link Marked} Markdown renderer.
|
||||
* @type {Marked}
|
||||
*/
|
||||
static MARKED = new Marked({
|
||||
extensions: [
|
||||
{
|
||||
name: "frontmatter",
|
||||
|
|
@ -26,7 +34,8 @@ export class MarkdownElement extends CustomElement {
|
|||
}
|
||||
},
|
||||
renderer(token) {
|
||||
return `<x-frontmatter><code slot="frontmatter-contents" lang="${token.lang}">${token.data}</code></x-frontmatter>`;
|
||||
// TODO: Doesn't this break if token.data contains quotes?
|
||||
return `<x-frontmatter lang="${token.lang}" data="${token.data}"></x-frontmatter>`;
|
||||
}
|
||||
},
|
||||
{
|
||||
|
|
@ -41,13 +50,13 @@ export class MarkdownElement extends CustomElement {
|
|||
return {
|
||||
type: "wikilink",
|
||||
raw: match[0],
|
||||
wref: match[1],
|
||||
target: match[1],
|
||||
text: match[2],
|
||||
}
|
||||
}
|
||||
},
|
||||
renderer(token) {
|
||||
return `<x-wikilink wref="${token.wref}"><span slot="wikilink-text">${token.text ?? token.wref}</span></x-wikilink>`
|
||||
return `<x-wikilink target="${token.target}" text="${token.text}"></x-wikilink>`
|
||||
},
|
||||
},
|
||||
{
|
||||
|
|
@ -67,61 +76,50 @@ export class MarkdownElement extends CustomElement {
|
|||
}
|
||||
},
|
||||
renderer(token) {
|
||||
return `<x-hashtag><span slot="hashtag-text">#${token.tag}</span></x-hashtag>`
|
||||
return `<x-hashtag tag="${token.tag}"></x-hashtag>`
|
||||
}
|
||||
}
|
||||
]
|
||||
})
|
||||
|
||||
contentsElement
|
||||
/**
|
||||
* Markdown source of the document to render, obtained from the `document` attribute.
|
||||
* @returns {string}
|
||||
*/
|
||||
get markdownDocument() {
|
||||
return this.getAttribute("document")
|
||||
}
|
||||
|
||||
static getTemplate() {
|
||||
return document.getElementById("template-markdown")
|
||||
/**
|
||||
* Element containing the rendered Markdown source.
|
||||
* Can be recreated with {@link recreateDocumentElement}.
|
||||
* @type {HTMLDivElement}
|
||||
*/
|
||||
documentElement
|
||||
|
||||
/**
|
||||
* The name of the slot where {@link documentElement} should be placed in.
|
||||
* @type {string}
|
||||
*/
|
||||
static DOCUMENT_ELEMENT_SLOT = "markdown-document"
|
||||
|
||||
/**
|
||||
* Recreate {@link documentElement} using the current value of {@link markdownDocument}.
|
||||
*/
|
||||
recreateDocumentElement() {
|
||||
if(this.documentElement) {
|
||||
this.documentElement.remove()
|
||||
this.documentElement = null
|
||||
}
|
||||
|
||||
this.documentElement = document.createElement("div")
|
||||
this.documentElement.slot = this.constructor.DOCUMENT_ELEMENT_SLOT
|
||||
this.documentElement.innerHTML = this.constructor.MARKED.parse(this.markdownDocument)
|
||||
this.appendChild(this.documentElement)
|
||||
}
|
||||
|
||||
onConnect() {
|
||||
const markdown = this.getAttribute("contents")
|
||||
|
||||
this.contentsElement = document.createElement("div")
|
||||
this.contentsElement.setAttribute("slot", "markdown-contents")
|
||||
this.contentsElement.innerHTML = MarkdownElement.marked.parse(markdown)
|
||||
|
||||
this.appendChild(this.contentsElement)
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Element rendering Obsidian front matter.
|
||||
*/
|
||||
export class FrontMatterElement extends CustomElement {
|
||||
static getTemplate() {
|
||||
return document.getElementById("template-frontmatter")
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Element rendering an Obsidian Hashtag.
|
||||
*/
|
||||
export class HashtagElement extends CustomElement {
|
||||
static getTemplate() {
|
||||
return document.getElementById("template-hashtag")
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Element rendering an Obsidian Wikilink.
|
||||
*/
|
||||
export class WikilinkElement extends CustomElement {
|
||||
static getTemplate() {
|
||||
return document.getElementById("template-wikilink")
|
||||
}
|
||||
|
||||
onConnect() {
|
||||
const instanceElement = this.instance.querySelector(".wikilink")
|
||||
|
||||
const destinationURL = new URL(window.location)
|
||||
destinationURL.hash = this.getAttribute("wref")
|
||||
|
||||
instanceElement.href = destinationURL
|
||||
super.onConnect()
|
||||
this.recreateDocumentElement()
|
||||
}
|
||||
}
|
||||
62
src/elements/markdown/wikilink.mjs
Normal file
62
src/elements/markdown/wikilink.mjs
Normal file
|
|
@ -0,0 +1,62 @@
|
|||
import { CustomElement } from "../base.mjs";
|
||||
|
||||
|
||||
/**
|
||||
* Element rendering an Obsidian Wikilink.
|
||||
*/
|
||||
export class WikilinkElement extends CustomElement {
|
||||
static get template() {
|
||||
return document.getElementById("template-hashtag")
|
||||
}
|
||||
|
||||
/**
|
||||
* Get the path or name of the file this node points to.
|
||||
* @returns {string} The value in question.
|
||||
*/
|
||||
get target() {
|
||||
return this.getAttribute("target")
|
||||
}
|
||||
|
||||
/**
|
||||
* Get the text that should be displayed in this wikilink.
|
||||
* @returns {string} The text in question.
|
||||
*/
|
||||
get text() {
|
||||
return this.getAttribute("text") ?? this.target
|
||||
}
|
||||
|
||||
/**
|
||||
* The element displaying the wikilink.
|
||||
* Can be recreated with {@link recreateTagElement}.
|
||||
* @type {HTMLAnchorElement}
|
||||
*/
|
||||
anchorElement
|
||||
|
||||
/**
|
||||
* The name of the slot where {@link anchorElement} should be placed in.
|
||||
* @type {string}
|
||||
*/
|
||||
static ANCHOR_ELEMENT_SLOT = "wikilink-anchor"
|
||||
|
||||
/**
|
||||
* Recreate {@link anchorElement} with the current value of {@link target} and {@link text}.
|
||||
* @returns {void}
|
||||
*/
|
||||
recreateTagElement() {
|
||||
if(this.anchorElement) {
|
||||
this.anchorElement.remove()
|
||||
this.anchorElement = null
|
||||
}
|
||||
|
||||
this.anchorElement = document.createElement("a")
|
||||
this.anchorElement.slot = this.constructor.ANCHOR_ELEMENT_SLOT
|
||||
this.anchorElement.href = "#" // TODO: Add href behaviour to the anchor.
|
||||
this.anchorElement.innerText = this.text
|
||||
this.appendChild(this.anchorElement)
|
||||
}
|
||||
|
||||
onConnect() {
|
||||
super.onConnect()
|
||||
this.recreateTagElement()
|
||||
}
|
||||
}
|
||||
86
src/elements/vault.mjs
Normal file
86
src/elements/vault.mjs
Normal file
|
|
@ -0,0 +1,86 @@
|
|||
import { CustomElement } from "./base.mjs";
|
||||
import { sleep } from "../utils/sleep.mjs";
|
||||
|
||||
|
||||
/**
|
||||
* Element storing information about a Vault for its children.
|
||||
* The first direct children must have a `[slot="vault-child"]` attribute.
|
||||
*/
|
||||
export class VaultElement extends CustomElement {
|
||||
static get template() {
|
||||
return document.getElementById("template-vault")
|
||||
}
|
||||
|
||||
/**
|
||||
* The base URL where the Vault is available at.
|
||||
*/
|
||||
get base() {
|
||||
return this.getAttribute("base")
|
||||
}
|
||||
|
||||
/**
|
||||
* {@link fetch} the file at the given path ignoring cooldowns.
|
||||
* @param path {string} The path where the file is located.
|
||||
* @returns {Promise<Response>} The resulting HTTP response.
|
||||
*/
|
||||
async fetchImmediately(path) {
|
||||
const url = new URL(path, this.base)
|
||||
return await fetch(url, {})
|
||||
}
|
||||
|
||||
/**
|
||||
* Cooldown between two {@link fetchCooldown} requests in milliseconds, as obtained from the `cooldown` parameter.
|
||||
*/
|
||||
get cooldownMs() {
|
||||
return Number(this.getAttribute("cooldown"))
|
||||
}
|
||||
|
||||
/**
|
||||
* Queue containing the `resolve` functions necessary to make the calls to {@link fetchCooldown} proceed beyond the waiting phase.
|
||||
* To be called by the preceding {@link fetchCooldown} if possible.
|
||||
* @type {((v: unknown) => void)[]}
|
||||
*/
|
||||
#fetchQueue = []
|
||||
|
||||
/**
|
||||
* @returns {Promise<void>} A Promise that will wait for this caller's turn in the {@link #fetchQueue}.
|
||||
*/
|
||||
fetchQueueTurn() {
|
||||
return new Promise(resolve => {
|
||||
this.#fetchQueue.push(resolve)
|
||||
})
|
||||
}
|
||||
|
||||
/**
|
||||
* A promise that will advance the fetch queue after {@link cooldownMs}.
|
||||
* @returns {Promise<void>}
|
||||
*/
|
||||
async #scheduleNextFetchQueueTurn() {
|
||||
await sleep(this.cooldownMs)
|
||||
const resolve = this.#fetchQueue.shift()
|
||||
resolve()
|
||||
}
|
||||
|
||||
/**
|
||||
* {@link fetch} the file at the given path, awaiting for cooldowns to expire.
|
||||
* @param path {string} The path where the file is located.
|
||||
* @returns {Promise<Response>} The resulting HTTP response.
|
||||
*/
|
||||
async fetchCooldown(path) {
|
||||
// Sit waiting in queue
|
||||
if(this.#fetchQueue.length > 0) {
|
||||
await this.fetchQueueTurn()
|
||||
}
|
||||
// Perform the request
|
||||
const result = await this.fetchImmediately(path)
|
||||
// Start the next item in queue
|
||||
// noinspection ES6MissingAwait
|
||||
this.#scheduleNextFetchQueueTurn()
|
||||
// Return the request's result
|
||||
return result
|
||||
}
|
||||
|
||||
onConnect() {
|
||||
super.onConnect()
|
||||
}
|
||||
}
|
||||
|
|
@ -1,5 +1,4 @@
|
|||
import { CanvasElement, HashtagElement, MarkdownElement, NodeFileElement, WikilinkElement, DisplayElement, EdgeElement, NodeGroupElement, NodeTextElement, FrontMatterElement } from "./elements/index.mjs";
|
||||
import { configFromWindow } from "./config.mjs";
|
||||
import { CanvasElement, HashtagElement, NodeFileElement, WikilinkElement, DisplayElement, EdgeElement, NodeGroupElement, NodeTextElement, FrontMatterElement, MarkdownElement } from "./elements/index.mjs";
|
||||
|
||||
customElements.define("x-node-file", NodeFileElement)
|
||||
customElements.define("x-node-text", NodeTextElement)
|
||||
|
|
@ -11,10 +10,3 @@ customElements.define("x-hashtag", HashtagElement)
|
|||
customElements.define("x-canvas", CanvasElement)
|
||||
customElements.define("x-display", DisplayElement)
|
||||
customElements.define("x-edge", EdgeElement)
|
||||
|
||||
const config = configFromWindow()
|
||||
const displayElement = document.createElement("x-display")
|
||||
displayElement.setAttribute("vref", config.vref)
|
||||
displayElement.setAttribute("wref", config.wref)
|
||||
displayElement.setAttribute("root", "")
|
||||
document.body.appendChild(displayElement)
|
||||
|
|
|
|||
|
|
@ -1,7 +1,12 @@
|
|||
export function filePath(file) {
|
||||
/**
|
||||
* Compute a file path, resolving `.` and `..`.
|
||||
* @param path The file path.
|
||||
* @returns {string[]} Array of directories from the root of the path to the target location.
|
||||
*/
|
||||
export function filePath(path) {
|
||||
const stack = []
|
||||
|
||||
for(const part of file.split("/")) {
|
||||
for(const part of path.split("/")) {
|
||||
if(part === ".") {
|
||||
// noinspection UnnecessaryContinueJS
|
||||
continue
|
||||
|
|
|
|||
7
src/utils/sleep.mjs
Normal file
7
src/utils/sleep.mjs
Normal file
|
|
@ -0,0 +1,7 @@
|
|||
/**
|
||||
* Sleep.
|
||||
* @returns {Promise<void>}
|
||||
*/
|
||||
export async function sleep(timeMs) {
|
||||
return await new Promise(resolve => setTimeout(resolve, timeMs))
|
||||
}
|
||||
Loading…
Reference in a new issue