steffo/glassflame
steffo/glassflame
1
Fork 0
mirror of https://github.com/glassflame/glassflame.github.io.git synced 2024-11-25 17:44: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 {
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 === "") {
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("x2", x2)
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.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("width", `${this.getAttribute("width")}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.slot = "node-label"
@ -80,14 +80,14 @@ export class NodeFileElement extends NodeElement {
nameSlotted
contentsSlotted
onConnect() {
onConnected() {
this.instanceElement = this.instance.querySelector(".node-file")
this.instanceElement.style.setProperty("left", `${this.getAttribute("x")}px`)
this.instanceElement.style.setProperty("top", `${this.getAttribute("y")}px`)
this.instanceElement.style.setProperty("width", `${this.getAttribute("width")}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.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("width", `${this.getAttribute("width")}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.slot = "node-contents"