mirror of
https://github.com/glassflame/glassflame.github.io.git
synced 2024-11-22 16:14:26 +00:00
Clean up and document CanvasElement
This commit is contained in:
parent
2ead674928
commit
9ae82c7785
1 changed files with 100 additions and 47 deletions
|
|
@ -2,96 +2,149 @@ import { fileDetails } from "../utils/file.mjs";
|
||||||
import { CustomElement, NotImplementedError } from "./base.mjs";
|
import { CustomElement, NotImplementedError } from "./base.mjs";
|
||||||
|
|
||||||
|
|
||||||
|
/**
|
||||||
|
* The renderer of an Obsidian Canvas.
|
||||||
|
*/
|
||||||
export class CanvasElement extends CustomElement {
|
export class CanvasElement extends CustomElement {
|
||||||
static getTemplate() {
|
static getTemplate() {
|
||||||
return document.getElementById("template-canvas")
|
return document.getElementById("template-canvas")
|
||||||
}
|
}
|
||||||
|
|
||||||
parsedJSON
|
/**
|
||||||
|
* Parsed value of the `contents` attribute at the moment of connection to the DOM.
|
||||||
|
* @type {any}
|
||||||
|
*/
|
||||||
|
parsedContents
|
||||||
|
|
||||||
nodesSlotted
|
/**
|
||||||
edgesSlotted
|
* `<div>` containing all the {@link NodeElement}s of this Canvas.
|
||||||
nodeElements = {}
|
* @type {HTMLDivElement}
|
||||||
edgeElements = {}
|
*/
|
||||||
|
nodesContainer
|
||||||
|
|
||||||
|
/**
|
||||||
|
* `<div>` containing all the {@link NodeElement}s of this Canvas.
|
||||||
|
* @type {HTMLDivElement}
|
||||||
|
*/
|
||||||
|
edgesContainer
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Mapping associating ids to their respective {@link NodeElement}s of this Canvas.
|
||||||
|
* @type {{[id: string]: NodeElement}}
|
||||||
|
*/
|
||||||
|
nodeElementsById = {}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Mapping associating names to their respective {@link NodeElement}s of this Canvas.
|
||||||
|
* @type {{[name: string]: NodeElement}}
|
||||||
|
*/
|
||||||
|
nodeElementsByName = {}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Mapping associating vault-relative paths to their respective {@link NodeElement}s of this Canvas.
|
||||||
|
* @type {{[name: string]: NodeElement}}
|
||||||
|
*/
|
||||||
|
nodeElementsByPath = {}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Mapping associating ids to their respective {@link EdgeElement}s of this Canvas.
|
||||||
|
* @type {{[id: string]: EdgeElement}}
|
||||||
|
*/
|
||||||
|
edgeElementsById = {}
|
||||||
|
|
||||||
onConnected() {
|
onConnected() {
|
||||||
super.onConnected();
|
super.onConnected();
|
||||||
|
|
||||||
this.parsedJSON = JSON.parse(this.getAttribute("contents"))
|
this.parsedContents = JSON.parse(this.getAttribute("contents"))
|
||||||
|
|
||||||
this.nodesSlotted = document.createElement("div")
|
this.nodesContainer = document.createElement("div")
|
||||||
this.nodesSlotted.slot = "canvas-nodes"
|
this.nodesContainer.slot = "canvas-nodes"
|
||||||
|
|
||||||
this.edgesSlotted = document.createElement("div")
|
this.edgesContainer = document.createElement("div")
|
||||||
this.edgesSlotted.slot = "canvas-edges"
|
this.edgesContainer.slot = "canvas-edges"
|
||||||
|
|
||||||
let minX = { x: Infinity, width: 0 }
|
let minX = { x: Infinity, width: 0 }
|
||||||
let minY = { y: Infinity, height: 0 }
|
let minY = { y: Infinity, height: 0 }
|
||||||
let maxX = { x: -Infinity, width: 0 }
|
let maxX = { x: -Infinity, width: 0 }
|
||||||
let maxY = { y: -Infinity, height: 0 }
|
let maxY = { y: -Infinity, height: 0 }
|
||||||
|
|
||||||
for(const node of this.parsedJSON["nodes"]) {
|
for(const node of this.parsedContents["nodes"]) {
|
||||||
if(node["x"] < minX["x"]) minX = node
|
let {x, y, width, height} = node
|
||||||
if(node["y"] < minY["y"]) minY = node
|
x, y, width, height = Number(x), Number(y), Number(width), Number(height)
|
||||||
if(node["x"] + node["width"] > maxX["x"] + node["width"]) maxX = node
|
|
||||||
if(node["y"] + node["height"] > maxY["y"] + node["height"]) maxY = node
|
if(x < minX.x) minX = node
|
||||||
|
if(y < minY.y) minY = node
|
||||||
|
if(x + width > maxX.x + width) maxX = node
|
||||||
|
if(y + height > maxY.y + height) maxY = node
|
||||||
}
|
}
|
||||||
|
|
||||||
for(const node of this.parsedJSON["nodes"]) {
|
for(const node of this.parsedContents["nodes"]) {
|
||||||
const element = document.createElement(`x-node-${node["type"]}`)
|
let {id, type, color, x, y, width, height} = node
|
||||||
|
x, y, width, height = Number(x), Number(y), Number(width), Number(height)
|
||||||
|
|
||||||
element.setAttribute("id", `node-${node["id"]}`)
|
const element = document.createElement(`x-node-${type}`)
|
||||||
element.setAttribute("x", node["x"] - minX["x"])
|
|
||||||
element.setAttribute("y", node["y"] - minY["y"])
|
|
||||||
element.setAttribute("width", node["width"])
|
|
||||||
element.setAttribute("height", node["height"])
|
|
||||||
if(node["color"]) element.setAttribute("color", node["color"])
|
|
||||||
|
|
||||||
switch(node["type"]) {
|
element.setAttribute("id", `node-${id}`)
|
||||||
|
element.setAttribute("x", `${x - minX.x}`)
|
||||||
|
element.setAttribute("y", `${y - minY.y}`)
|
||||||
|
element.setAttribute("width", `${width}`)
|
||||||
|
element.setAttribute("height", `${height}`)
|
||||||
|
if(color) element.setAttribute("color", color)
|
||||||
|
|
||||||
|
this.nodeElementsById[id] = element
|
||||||
|
|
||||||
|
switch(type) {
|
||||||
case "text":
|
case "text":
|
||||||
element.setAttribute("text", node["text"])
|
const {text} = node
|
||||||
|
element.setAttribute("text", text)
|
||||||
break
|
break
|
||||||
|
|
||||||
case "file":
|
case "file":
|
||||||
element.setAttribute("file", node["file"])
|
const {file} = node
|
||||||
element.setAttribute("file-name", fileDetails(node["file"]).name)
|
const {name} = fileDetails(file)
|
||||||
|
element.setAttribute("file", file)
|
||||||
|
element.setAttribute("file-name", name)
|
||||||
|
this.nodeElementsByPath[file] = element
|
||||||
|
this.nodeElementsByName[name] = element
|
||||||
break
|
break
|
||||||
|
|
||||||
case "group":
|
case "group":
|
||||||
element.setAttribute("label", node["label"])
|
const {label} = node
|
||||||
|
element.setAttribute("label", label)
|
||||||
break
|
break
|
||||||
|
|
||||||
default:
|
default:
|
||||||
console.warn("Encountered node of unimplemented type: ", node["type"])
|
console.warn("Encountered node of unimplemented type: ", type)
|
||||||
break
|
break
|
||||||
}
|
}
|
||||||
|
|
||||||
this.nodeElements[node["id"]] = element
|
this.nodesContainer.appendChild(element)
|
||||||
this.nodesSlotted.appendChild(element)
|
|
||||||
}
|
}
|
||||||
|
|
||||||
for(const edge of this.parsedJSON["edges"]) {
|
for(const edge of this.parsedContents["edges"]) {
|
||||||
|
let {id, fromNode, fromSide, toNode, toSide, color, toEnd: arrows} = edge
|
||||||
|
|
||||||
const element = document.createElement("x-edge")
|
const element = document.createElement("x-edge")
|
||||||
element.setAttribute("id", `edge-${edge["id"]}`)
|
element.setAttribute("id", `edge-${id}`)
|
||||||
element.setAttribute("node-from", edge["fromNode"])
|
element.setAttribute("node-from", fromNode)
|
||||||
element.setAttribute("node-from-side", edge["fromSide"])
|
element.setAttribute("node-from-side", fromSide)
|
||||||
element.setAttribute("node-to", edge["toNode"])
|
element.setAttribute("node-to", toNode)
|
||||||
element.setAttribute("node-to-side", edge["toSide"])
|
element.setAttribute("node-to-side", toSide)
|
||||||
if(edge["color"]) element.setAttribute("color", edge["color"])
|
if(edge["color"]) element.setAttribute("color", color)
|
||||||
if(edge["arrows"]) element.setAttribute("arrows", edge["toEnd"])
|
if(edge["arrows"]) element.setAttribute("arrows", arrows)
|
||||||
|
|
||||||
this.edgeElements[edge["id"]] = element
|
this.edgeElementsById[id] = element
|
||||||
this.edgesSlotted.appendChild(element)
|
this.edgesContainer.appendChild(element)
|
||||||
}
|
}
|
||||||
|
|
||||||
this.nodesSlotted.style["width"] = `${maxX["x"] + maxX["width"] - minX["x"]}px`
|
this.nodesContainer.style["width"] = `${maxX.x + maxX.width - minX.x}px`
|
||||||
this.nodesSlotted.style["height"] = `${maxY["y"] + maxY["height"] - minY["y"]}px`
|
this.nodesContainer.style["height"] = `${maxY.y + maxY.height - minY.y}px`
|
||||||
|
|
||||||
this.edgesSlotted.style["width"] = `${maxX["x"] + maxX["width"] - minX["x"]}px`
|
this.edgesContainer.style["width"] = `${maxX.x + maxX.width - minX.x}px`
|
||||||
this.edgesSlotted.style["height"] = `${maxY["y"] + maxY["height"] - minY["y"]}px`
|
this.edgesContainer.style["height"] = `${maxY.y + maxY.height - minY.y}px`
|
||||||
|
|
||||||
this.appendChild(this.nodesSlotted)
|
this.appendChild(this.nodesContainer)
|
||||||
this.appendChild(this.edgesSlotted)
|
this.appendChild(this.edgesContainer)
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue