steffo/glassflame
steffo/glassflame
1
Fork 0
mirror of https://github.com/glassflame/glassflame.github.io.git synced 2024-11-22 16:14:26 +00:00
Code Activity

Refactor and document CanvasItemElement

Browse source
This commit is contained in:
Steffo 2023-10-24 14:42:11 +02:00
parent 827d637ae9
commit fd8ea9c494
3 changed files with 15 additions and 8 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

13
src/elements/canvas.mjs
View file

@ -149,10 +149,17 @@ export class CanvasElement extends CustomElement {
} }
/**
* Abstract base class for elements drawn on a {@link CanvasElement}.
* @abstract
*/
export class CanvasItemElement extends CustomElement { export class CanvasItemElement extends CustomElement {
colorToHex() { /**
const color = this.getAttribute("color") * Given an Obsidian Canvas color, return its corresponding CSS color.
* @param color {string} The color, as serialized on an Obsidian Canvas.
* @returns {string} The corresponding CSS color.
*/
static colorToCSS(color) {
if(color === undefined || color === null || color === "") { if(color === undefined || color === null || color === "") {
return "var(--color-gray)" return "var(--color-gray)"
} }

2
src/elements/edge.mjs
View file

@ -32,7 +32,7 @@ export class EdgeElement extends CanvasItemElement {
this.lineElement.setAttribute("y1", y1) this.lineElement.setAttribute("y1", y1)
this.lineElement.setAttribute("x2", x2) this.lineElement.setAttribute("x2", x2)
this.lineElement.setAttribute("y2", y2) this.lineElement.setAttribute("y2", y2)
this.lineElement.style.setProperty("stroke", this.colorToHex()) this.lineElement.style.setProperty("stroke", this.constructor.colorToCSS(this.getAttribute("color")))
this.lineElement.style.setProperty("stroke-width", "var(--edge-width)") this.lineElement.style.setProperty("stroke-width", "var(--edge-width)")
this.svgSlotted.appendChild(this.lineElement) this.svgSlotted.appendChild(this.lineElement)

8
src/elements/node.mjs
View file

@ -61,7 +61,7 @@ export class NodeGroupElement extends NodeElement {
this.instanceElement.style.setProperty("top", `${this.getAttribute("y")}px`) this.instanceElement.style.setProperty("top", `${this.getAttribute("y")}px`)
this.instanceElement.style.setProperty("width", `${this.getAttribute("width")}px`) this.instanceElement.style.setProperty("width", `${this.getAttribute("width")}px`)
this.instanceElement.style.setProperty("height", `${this.getAttribute("height")}px`) this.instanceElement.style.setProperty("height", `${this.getAttribute("height")}px`)
this.instanceElement.style.setProperty("--color-node", this.colorToHex()) this.instanceElement.style.setProperty("--color-node", this.constructor.colorToCSS(this.getAttribute("color")))
this.labelSlotted = document.createElement("span") this.labelSlotted = document.createElement("span")
this.labelSlotted.slot = "node-label" this.labelSlotted.slot = "node-label"
@ -80,14 +80,14 @@ export class NodeFileElement extends NodeElement {
nameSlotted nameSlotted
contentsSlotted contentsSlotted
onConnect() { onConnected() {
this.instanceElement = this.instance.querySelector(".node-file") this.instanceElement = this.instance.querySelector(".node-file")
this.instanceElement.style.setProperty("left", `${this.getAttribute("x")}px`) this.instanceElement.style.setProperty("left", `${this.getAttribute("x")}px`)
this.instanceElement.style.setProperty("top", `${this.getAttribute("y")}px`) this.instanceElement.style.setProperty("top", `${this.getAttribute("y")}px`)
this.instanceElement.style.setProperty("width", `${this.getAttribute("width")}px`) this.instanceElement.style.setProperty("width", `${this.getAttribute("width")}px`)
this.instanceElement.style.setProperty("height", `${this.getAttribute("height")}px`) this.instanceElement.style.setProperty("height", `${this.getAttribute("height")}px`)
this.instanceElement.style.setProperty("--color-node", this.colorToHex()) this.instanceElement.style.setProperty("--color-node", this.constructor.colorToCSS(this.getAttribute("color")))
this.nameSlotted = document.createElement("x-wikilink") this.nameSlotted = document.createElement("x-wikilink")
this.nameSlotted.slot = "node-title" this.nameSlotted.slot = "node-title"
@ -123,7 +123,7 @@ export class NodeTextElement extends NodeElement {
this.instanceElement.style.setProperty("top", `${this.getAttribute("y")}px`) this.instanceElement.style.setProperty("top", `${this.getAttribute("y")}px`)
this.instanceElement.style.setProperty("width", `${this.getAttribute("width")}px`) this.instanceElement.style.setProperty("width", `${this.getAttribute("width")}px`)
this.instanceElement.style.setProperty("height", `${this.getAttribute("height")}px`) this.instanceElement.style.setProperty("height", `${this.getAttribute("height")}px`)
this.instanceElement.style.setProperty("--color-node", this.colorToHex()) this.instanceElement.style.setProperty("--color-node", this.constructor.colorToCSS(this.getAttribute("color")))
this.contentsSlotted = document.createElement("x-markdown") this.contentsSlotted = document.createElement("x-markdown")
this.contentsSlotted.slot = "node-contents" this.contentsSlotted.slot = "node-contents"