Ma/ueblueprint
1
0
Fork 0
mirror of https://github.com/barsdeveloper/ueblueprint.git synced 2026-02-14 00:54:48 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

Move style related actions to templates

Browse Source
This commit is contained in:
barsdeveloper
2021-12-10 21:05:44 +01:00
parent 7bc0f4e2f2
commit 6b02ab7e08
19 changed files with 2693 additions and 139 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2355
dist/ueblueprint.js vendored
View File

File diff suppressed because one or more lines are too long

75
js/Blueprint.js
View File

@@ -1,4 +1,3 @@
import BlueprintData from "./BlueprintData"
import BlueprintTemplate from "./template/BlueprintTemplate"
import DragScroll from "./input/DragScroll"
import GraphElement from "./graph/GraphElement"
@@ -15,7 +14,18 @@ import Copy from "./input/Copy"
export default class Blueprint extends GraphElement {
constructor() {
super(new BlueprintData(), new BlueprintTemplate())
super({}, new BlueprintTemplate())
/** @type {BlueprintTemplate} */
this.template
/** @type {GraphNode[]}" */
this.nodes = new Array()
this.expandGridSize = 400
/** @type {number[]} */
this.additional = /*[2 * this.expandGridSize, 2 * this.expandGridSize]*/[0, 0]
/** @type {number[]} */
this.translateValue = /*[this.expandGridSize, this.expandGridSize]*/[0, 0]
/** @type {number[]} */
this.mousePosition = [0, 0]
/** @type {HTMLElement} */
this.gridElement = null
/** @type {HTMLElement} */
@@ -54,22 +64,6 @@ export default class Blueprint extends GraphElement {
connectedCallback() {
super.connectedCallback()
this.classList.add("ueb", `ueb-zoom-${this.zoom}`)
this.headerElement = this.querySelector('.ueb-viewport-header')
console.assert(this.headerElement, "Header element not provided by the template.")
this.overlayElement = this.querySelector('.ueb-viewport-overlay')
console.assert(this.overlayElement, "Overlay element not provided by the template.")
this.viewportElement = this.querySelector('.ueb-viewport-body')
console.assert(this.viewportElement, "Viewport element not provided by the template.")
this.gridElement = this.viewportElement.querySelector(".ueb-grid")
console.assert(this.gridElement, "Grid element not provided by the template.")
this.selectorElement = new GraphSelector()
this.nodesContainerElement = this.querySelector("[data-nodes]")
console.assert(this.nodesContainerElement, "Nodes container element not provided by the template.")
this.nodesContainerElement.append(this.selectorElement)
this.querySelector("[data-nodes]").append(...this.entity.nodes)
this.copyObject = new Copy(this.getGridDOMElement(), this)
this.pasteObject = new Paste(this.getGridDOMElement(), this)
@@ -132,19 +126,19 @@ export default class Blueprint extends GraphElement {
]
let expand = [0, 0]
for (let i = 0; i < 2; ++i) {
if (delta[i] < 0 && finalScroll[i] < 0.25 * this.entity.expandGridSize) {
if (delta[i] < 0 && finalScroll[i] < 0.25 * this.expandGridSize) {
// Expand if scrolling is diminishing and the remainig space is less that a quarter of an expansion step
expand[i] = finalScroll[i]
if (expand[i] > 0) {
// Final scroll is still in rage (more than zero) but we want to expand to negative (left or top)
expand[i] = -this.entity.expandGridSize
expand[i] = -this.expandGridSize
}
} else if (delta[i] > 0 && finalScroll[i] > scrollMax[i] - 0.25 * this.entity.expandGridSize) {
} else if (delta[i] > 0 && finalScroll[i] > scrollMax[i] - 0.25 * this.expandGridSize) {
// Expand if scrolling is increasing and the remainig space is less that a quarter of an expansion step
expand[i] = finalScroll[i] - scrollMax[i]
if (expand[i] < 0) {
// Final scroll is still in rage (less than the maximum scroll) but we want to expand to positive (right or bottom)
expand[i] = this.entity.expandGridSize
expand[i] = this.expandGridSize
}
}
}
@@ -162,8 +156,8 @@ export default class Blueprint extends GraphElement {
scrollCenter() {
const scroll = this.getScroll()
const offset = [
this.entity.translateValue[0] - scroll[0],
this.entity.translateValue[1] - scroll[1]
this.translateValue[0] - scroll[0],
this.translateValue[1] - scroll[1]
]
const targetOffset = this.getViewportSize().map(size => size / 2)
const deltaOffset = [
@@ -174,7 +168,7 @@ export default class Blueprint extends GraphElement {
}
getExpandGridSize() {
return this.entity.expandGridSize
return this.expandGridSize
}
getViewportSize() {
@@ -203,11 +197,8 @@ export default class Blueprint extends GraphElement {
_expand(x, y) {
x = Math.round(Math.abs(x))
y = Math.round(Math.abs(y))
this.entity.additional = [this.entity.additional[0] + x, this.entity.additional[1] + y]
if (this.gridElement) {
this.gridElement.style.setProperty("--ueb-additional-x", this.entity.additional[0])
this.gridElement.style.setProperty("--ueb-additional-y", this.entity.additional[1])
}
this.additional = [this.additional[0] + x, this.additional[1] + y]
this.template.applyExpand(this)
}
/**
@@ -218,11 +209,8 @@ export default class Blueprint extends GraphElement {
_translate(x, y) {
x = Math.round(x)
y = Math.round(y)
this.entity.translateValue = [this.entity.translateValue[0] + x, this.entity.translateValue[1] + y]
if (this.gridElement) {
this.gridElement.style.setProperty("--ueb-translate-x", this.entity.translateValue[0])
this.gridElement.style.setProperty("--ueb-translate-y", this.entity.translateValue[1])
}
this.translateValue = [this.translateValue[0] + x, this.translateValue[1] + y]
this.template.applyTranlate(this)
}
/**
@@ -247,7 +235,7 @@ export default class Blueprint extends GraphElement {
}
progressiveSnapToGrid(x) {
return this.entity.expandGridSize * Math.round(x / this.entity.expandGridSize + 0.5 * Math.sign(x))
return this.expandGridSize * Math.round(x / this.expandGridSize + 0.5 * Math.sign(x))
}
getZoom() {
@@ -260,8 +248,7 @@ export default class Blueprint extends GraphElement {
return
}
let initialScale = this.getScale()
this.classList.remove(`ueb-zoom-${this.zoom}`)
this.classList.add(`ueb-zoom-${zoom}`)
this.template.applyZoom(this, zoom)
this.zoom = zoom
@@ -283,8 +270,8 @@ export default class Blueprint extends GraphElement {
}
compensateTranslation(position) {
position[0] -= this.entity.translateValue[0]
position[1] -= this.entity.translateValue[1]
position[0] -= this.translateValue[0]
position[1] -= this.translateValue[1]
return position
}
@@ -294,7 +281,7 @@ export default class Blueprint extends GraphElement {
*/
getNodes(selected = false) {
if (selected) {
return this.entity.nodes.filter(
return this.nodes.filter(
/**
*
* @param {GraphNode} node
@@ -302,7 +289,7 @@ export default class Blueprint extends GraphElement {
node => node.selected
)
} else {
return this.entity.nodes
return this.nodes
}
}
@@ -310,7 +297,7 @@ export default class Blueprint extends GraphElement {
* Unselect all nodes
*/
unselectAll() {
this.entity.nodes.forEach(node => this.nodeSelectToggleFunction(node, false))
this.nodes.forEach(node => this.nodeSelectToggleFunction(node, false))
}
/**
@@ -323,7 +310,7 @@ export default class Blueprint extends GraphElement {
s.push(e)
return s
},
this.entity.nodes)
this.nodes)
if (this.nodesContainerElement) {
this.nodesContainerElement.append(...graphNodes)
}

15
js/BlueprintData.js
View File

@@ -1,15 +0,0 @@
/** @typedef {import("./graph/GraphNode").default} GraphNode */
export default class BlueprintData {
constructor() {
/** @type {GraphNode[]}" */
this.nodes = new Array()
this.expandGridSize = 400
/** @type {number[]} */
this.additional = /*[2 * this.expandGridSize, 2 * this.expandGridSize]*/[0, 0]
/** @type {number[]} */
this.translateValue = /*[this.expandGridSize, this.expandGridSize]*/[0, 0]
/** @type {number[]} */
this.mousePosition = [0, 0]
}
}

16
js/entity/PinEntity.js
View File

@@ -49,8 +49,22 @@ export default class PinEntity extends Entity {
return this.PinName
}
isConnected() {
return this.LinkedTo.length > 0
}
getType() {
return this.PinType.PinCategory ?? "object"
}
isInput() {
if (!this.bHidden && this.Direction !== "EGPD_Output") {
return true
}
}
isOutput() {
if (this.Direction === "EGPD_Output") {
if (!this.bHidden && this.Direction === "EGPD_Output") {
return true
}
}

4
js/graph/GraphElement.js
View File

@@ -8,12 +8,14 @@ export default class GraphElement extends HTMLElement {
super()
/** @type {import("../Blueprint").default}" */
this.blueprint = null
/** @type {import("../entity/Entity").default}" */
this.entity = entity
/** @type {import("../template/Template").default}" */
this.template = template
}
connectedCallback() {
this.blueprint = this.closest("u-blueprint")
this.append(...this.template.getElements(this.entity))
this.template.apply(this)
}
}

11
js/graph/GraphLink.js
View File

@@ -1,4 +1,5 @@
import GraphElement from "./GraphElement"
import LinkTemplate from "../template/LinkTemplate"
export default class GraphLink extends GraphElement {
@@ -12,18 +13,10 @@ export default class GraphLink extends GraphElement {
* @param {?PinReference} destination
*/
constructor(source, destination) {
super()
super(this, new LinkTemplate())
this.source = source
this.destination = destination
}
render() {
return `
<svg viewBox="0 0 100 100">
<line x1="0" y1="80" x2="100" y2="20" stroke="black" />
</svg>
`
}
}
customElements.define("u-link", GraphLink)

20
js/graph/GraphNode.js
View File

@@ -6,31 +6,27 @@ import DragLink from "../input/DragLink"
export default class GraphNode extends SelectableDraggable {
static fromSerializedObject(str) {
let entity = SerializerFactory.getSerializer(ObjectEntity).read(str)
return new GraphNode(entity)
}
/**
*
* @param {ObjectEntity} entity
*/
constructor(entity) {
super(entity, new NodeTemplate())
/** @type {ObjectEntity} */
this.entity
this.graphNodeName = "n/a"
this.dragLinkObjects = Array()
this.dragLinkObjects = []
super.setLocation([this.entity.NodePosX, this.entity.NodePosY])
}
static fromSerializedObject(str) {
let entity = SerializerFactory.getSerializer(ObjectEntity).read(str)
return new GraphNode(entity)
}
connectedCallback() {
const type = this.getAttribute("type")?.trim()
super.connectedCallback()
this.classList.add("ueb-node")
if (this.selected) {
this.classList.add("ueb-selected")
}
this.style.setProperty("--ueb-position-x", this.location[0])
this.style.setProperty("--ueb-position-y", this.location[1])
this.querySelectorAll(".ueb-node-input, .ueb-node-output").forEach(element => {
this.dragLinkObjects.push(
new DragLink(element, this.blueprint, {

15
js/graph/GraphPin.js Normal file
View File

@@ -0,0 +1,15 @@
import GraphElement from "./GraphElement"
import PinTemplate from "../template/PinTemplate"
export default class GraphPin extends GraphElement {
constructor() {
super({}, new PinTemplate())
}
/*connectedCallback() {
super.connectedCallback()
}*/
}
customElements.define("u-pin", GraphPin)

28
js/graph/GraphSelector.js
View File

@@ -1,21 +1,14 @@
import FastSelectionModel from "../selection/FastSelectionModel"
import GraphElement from "./GraphElement"
import Template from "../template/Template"
import SelectorTemplate from "../template/SelectorTemplate"
export default class GraphSelector extends GraphElement {
constructor() {
super({}, new Template())
/**
* @type {import("./GraphSelector").default}
*/
super({}, new SelectorTemplate())
this.selectionModel = null
}
connectedCallback() {
super.connectedCallback()
this.classList.add("ueb-selector")
this.dataset.selecting = "false"
/** @type {SelectorTemplate} */
this.template
}
/**
@@ -24,13 +17,7 @@ export default class GraphSelector extends GraphElement {
*/
startSelecting(initialPosition) {
initialPosition = this.blueprint.compensateTranslation(initialPosition)
// Set initial position
this.style.setProperty("--ueb-select-from-x", initialPosition[0])
this.style.setProperty("--ueb-select-from-y", initialPosition[1])
// Final position coincide with the initial position, at the beginning of selection
this.style.setProperty("--ueb-select-to-x", initialPosition[0])
this.style.setProperty("--ueb-select-to-y", initialPosition[1])
this.dataset.selecting = "true"
this.template.applyStartSelecting(this, initialPosition)
this.selectionModel = new FastSelectionModel(initialPosition, this.blueprint.getNodes(), this.blueprint.nodeBoundariesSupplier, this.blueprint.nodeSelectToggleFunction)
}
@@ -40,13 +27,12 @@ export default class GraphSelector extends GraphElement {
*/
doSelecting(finalPosition) {
finalPosition = this.blueprint.compensateTranslation(finalPosition)
this.style.setProperty("--ueb-select-to-x", finalPosition[0])
this.style.setProperty("--ueb-select-to-y", finalPosition[1])
this.template.applyDoSelecting(this, finalPosition)
this.selectionModel.selectTo(finalPosition)
}
finishSelecting() {
this.dataset.selecting = "false"
this.template.applyFinishSelecting(this)
this.selectionModel = null
}
}

8
js/graph/SelectableDraggable.js
View File

@@ -8,6 +8,8 @@ export default class SelectableDraggable extends GraphElement {
this.dragObject = null
this.location = [0, 0]
this.selected = false
/** @type {import("../template/SelectableDraggableTemplate").default} */
this.template
let self = this
this.dragHandler = (e) => {
@@ -28,8 +30,7 @@ export default class SelectableDraggable extends GraphElement {
setLocation(value = [0, 0]) {
this.location = value
this.style.setProperty("--ueb-position-x", this.location[0])
this.style.setProperty("--ueb-position-y", this.location[1])
this.template.applyLocation(this)
}
addLocation(value) {
@@ -59,11 +60,10 @@ export default class SelectableDraggable extends GraphElement {
}
this.selected = value
if (this.selected) {
this.classList.add("ueb-selected")
this.blueprint.addEventListener("uDragSelected", this.dragHandler)
} else {
this.classList.remove("ueb-selected")
this.blueprint.removeEventListener("uDragSelected", this.dragHandler)
}
this.template.applySelected(this)
}
}

56
js/template/BlueprintTemplate.js
View File

@@ -1,6 +1,10 @@
import Blueprint from "../Blueprint"
import html from "./html"
import sanitizeText from "./sanitizeText"
import Template from "./Template"
import GraphSelector from "../graph/GraphSelector"
/** @typedef {import("../Blueprint").default} Blueprint */
export default class BlueprintTemplate extends Template {
header(element) {
return html`
@@ -18,14 +22,19 @@ export default class BlueprintTemplate extends Template {
/**
*
* @param {import("../Blueprint").Blueprint} element
* @param {Blueprint} element
* @returns
*/
viewport(element) {
return html`
<div class="ueb-viewport-body">
<div class="ueb-grid"
style="--ueb-additional-x:${element.additional[0]}; --ueb-additional-y:${element.additional[1]}; --ueb-translate-x:${element.translateValue[0]}; --ueb-translate-y:${element.translateValue[1]}">
style="
--ueb-additional-x:${sanitizeText(element.additional[0])};
--ueb-additional-y:${sanitizeText(element.additional[1])};
--ueb-translate-x:${sanitizeText(element.translateValue[0])};
--ueb-translate-y:${sanitizeText(element.translateValue[1])};
">
<div class="ueb-grid-content" data-nodes></div>
</div>
</div>
@@ -44,4 +53,47 @@ export default class BlueprintTemplate extends Template {
${this.viewport(element)}
`
}
/**
* Applies the style to the element.
* @param {Blueprint} brueprint The blueprint element
*/
apply(blueprint) {
super.apply(blueprint)
blueprint.classList.add("ueb", `ueb-zoom-${blueprint.zoom}`)
blueprint.headerElement = blueprint.querySelector('.ueb-viewport-header')
blueprint.overlayElement = blueprint.querySelector('.ueb-viewport-overlay')
blueprint.viewportElement = blueprint.querySelector('.ueb-viewport-body')
blueprint.gridElement = blueprint.viewportElement.querySelector(".ueb-grid")
blueprint.nodesContainerElement = blueprint.querySelector("[data-nodes]")
blueprint.selectorElement = new GraphSelector()
blueprint.nodesContainerElement.append(blueprint.selectorElement, ...blueprint.nodes)
}
/**
* Applies the style to the element.
* @param {Blueprint} brueprint The blueprint element
*/
applyZoom(blueprint, newZoom) {
blueprint.classList.remove(`ueb-zoom-${blueprint.zoom}`)
blueprint.classList.add(`ueb-zoom-${newZoom}`)
}
/**
* Applies the style to the element.
* @param {Blueprint} brueprint The blueprint element
*/
applyExpand(blueprint) {
blueprint.gridElement.style.setProperty("--ueb-additional-x", blueprint.additional[0])
blueprint.gridElement.style.setProperty("--ueb-additional-y", blueprint.additional[1])
}
/**
* Applies the style to the element.
* @param {Blueprint} brueprint The blueprint element
*/
applyTranlate(blueprint) {
blueprint.gridElement.style.setProperty("--ueb-translate-x", blueprint.translateValue[0])
blueprint.gridElement.style.setProperty("--ueb-translate-y", blueprint.translateValue[1])
}
}

21
js/template/LinkTemplate.js Normal file
View File

@@ -0,0 +1,21 @@
import html from "./html"
import Template from "./Template"
/**
* @typedef {import("../graph/GraphLink").default} GraphLink
*/
export default class LinkTemplate extends Template {
/**
* Computes the html content of the target element.
* @param {GraphLink} link Link connecting two graph nodes
* @returns The result html
*/
render(link) {
return html`
<svg viewBox="0 0 100 100">
<line x1="0" y1="80" x2="100" y2="20" stroke="black" />
</svg>
`
}
}

48
js/template/NodeTemplate.js
View File

@@ -1,23 +1,23 @@
import html from "./html"
import PinEntity from "../entity/PinEntity"
import Template from "./Template"
import SelectableDraggableTemplate from "./SelectableDraggableTemplate"
/**
* @typedef {import("../entity/ObjectEntity").default} ObjectEntity
* @typedef {import("../graph/GraphNode").default} GraphNode
*/
export default class NodeTemplate extends Template {
export default class NodeTemplate extends SelectableDraggableTemplate {
/**
* Computes the html content of the target element.
* @param {ObjectEntity} entity Entity representing the element
* @returns The computed html
* @param {GraphNode} node Graph node element
* @returns The result html
*/
header(entity) {
header(node) {
return html`
<div class="ueb-node-header">
<span class="ueb-node-name">
<span class="ueb-node-symbol"></span>
<span class="ueb-node-text">${entity.getNodeDisplayName()}</span>
<span class="ueb-node-text">${node.entity.getNodeDisplayName()}</span>
</span>
</div>
`
@@ -25,14 +25,14 @@ export default class NodeTemplate extends Template {
/**
* Computes the html content of the target element.
* @param {ObjectEntity} entity Entity representing the element
* @returns The computed html
* @param {GraphNode} node Graph node element
* @returns The result html
*/
body(entity) {
body(node) {
/** @type {PinEntity[]} */
let inputs = entity.CustomProperties.filter(v => v instanceof PinEntity)
let inputs = node.entity.CustomProperties.filter(v => v instanceof PinEntity)
let outputs = inputs.filter(v => v.isOutput())
inputs = inputs.filter(v => !v.isOutput())
inputs = inputs.filter(v => v.isInput())
return html`
<div class="ueb-node-body">
<div class="ueb-node-inputs">
@@ -57,17 +57,31 @@ export default class NodeTemplate extends Template {
/**
* Computes the html content of the target element.
* @param {ObjectEntity} entity Entity representing the element
* @returns The computed html
* @param {GraphNode} node Graph node element
* @returns The result html
*/
render(entity) {
render(node) {
return html`
<div class="ueb-node-border">
<div class="ueb-node-content">
${this.header(entity)}
${this.body(entity)}
${this.header(node)}
${this.body(node)}
</div>
</div>
`
}
/**
* Returns the html elements rendered from this template.
* @param {GraphNode} node Element of the graph
*/
apply(node) {
super.apply(node)
node.classList.add("ueb-node")
if (node.selected) {
node.classList.add("ueb-selected")
}
node.style.setProperty("--ueb-position-x", node.location[0])
node.style.setProperty("--ueb-position-y", node.location[1])
}
}

51
js/template/PinTemplate.js Normal file
View File

@@ -0,0 +1,51 @@
import html from "./html"
import Template from "./Template"
/**
* @typedef {import("../entity/PinEntity").default} PinEntity
*/
export default class PinTemplate extends Template {
/**
* Computes the template for a pin in case it is an input.
* @param {PinEntity} pin Pin entity
* @returns The result html
*/
renderInputPin(pin) {
return html`
<div class="ueb-node-input ueb-node-value-${pin.getType()}">
<span class="ueb-node-value-icon ${pin.isConnected() ? 'ueb-node-value-fill' : ''}"></span>
${pin.getPinDisplayName()}
</div>
`
}
/**
* Computes the template for a pin in case it is an output.
* @param {PinEntity} pin Pin entity
* @returns The result html
*/
renderOutputPin(pin) {
return html`
<div class="ueb-node-output ueb-node-value-${pin.getType()}">
${output.getPinDisplayName()}
<span class="ueb-node-value-icon ${pin.isConnected() ? 'ueb-node-value-fill' : ''}"></span>
</div>
`
}
/**
* Computes the html content of the pin.
* @param {PinEntity} pin Pin entity
* @returns The result html
*/
render(pin) {
if (pin.isInput()) {
return this.renderInputPin(pin)
}
if (pin.isOutput()) {
return this.renderOutputPin(pin)
}
return ""
}
}

29
js/template/SelectableDraggableTemplate.js Normal file
View File

@@ -0,0 +1,29 @@
import html from "./html"
import Template from "./Template"
/**
* @typedef {import("../graph/SelectableDraggable").default} SelectableDraggable
*/
export default class SelectableDraggableTemplate extends Template {
/**
* Returns the html elements rendered from this template.
* @param {SelectableDraggable} element Element of the graph
*/
applyLocation(element) {
element.style.setProperty("--ueb-position-x", element.location[0])
element.style.setProperty("--ueb-position-y", element.location[1])
}
/**
* Returns the html elements rendered from this template.
* @param {SelectableDraggable} element Element of the graph
*/
applySelected(element) {
if (element.selected) {
element.classList.add("ueb-selected")
} else {
element.classList.remove("ueb-selected")
}
}
}

48
js/template/SelectorTemplate.js Normal file
View File

@@ -0,0 +1,48 @@
import Template from "./Template"
/**
* @typedef {import("../graph/GraphSelector").default} GraphSelector
*/
export default class SelectorTemplate extends Template {
/**
* Applies the style to the element.
* @param {GraphSelector} selector Selector element
*/
apply(selector) {
super.apply(selector)
selector.classList.add("ueb-selector")
selector.dataset.selecting = "false"
}
/**
* Applies the style relative to selection beginning.
* @param {GraphSelector} selector Selector element
*/
applyStartSelecting(selector, initialPosition) {
// Set initial position
selector.style.setProperty("--ueb-select-from-x", initialPosition[0])
selector.style.setProperty("--ueb-select-from-y", initialPosition[1])
// Final position coincide with the initial position, at the beginning of selection
selector.style.setProperty("--ueb-select-to-x", initialPosition[0])
selector.style.setProperty("--ueb-select-to-y", initialPosition[1])
selector.dataset.selecting = "true"
}
/**
* Applies the style relative to selection.
* @param {GraphSelector} selector Selector element
*/
applyDoSelecting(selector, finalPosition) {
selector.style.setProperty("--ueb-select-to-x", finalPosition[0])
selector.style.setProperty("--ueb-select-to-y", finalPosition[1])
}
/**
* Applies the style relative to selection finishing.
* @param {GraphSelector} selector Selector element
*/
applyFinishSelecting(selector, finalPosition) {
selector.dataset.selecting = "false"
}
}

18
js/template/Template.js
View File

@@ -1,25 +1,23 @@
/**
* @typedef {import(""../entity/Entity"").default} Entity
* @typedef {import("../graph/GraphElement").default} GraphElement
*/
export default class Template {
/**
* Computes the html content of the target element.
* @param {Entity} entity Entity representing the element
* @returns The computed html
* @param {GraphElement} entity Element of the graph
* @returns The result html
*/
render(entity) {
return ""
}
/**
* Returns the html elements rendered by this template.
* @param {Entity} entity Entity representing the element
* @returns The rendered elements
* Applies the style to the element.
* @param {GraphElement} element Element of the graph
*/
getElements(entity) {
let aDiv = document.createElement("div")
aDiv.innerHTML = this.render(entity)
return aDiv.childNodes
apply(element) {
// TODO replace with the safer element.setHTML(...) when it will be available
element.innerHTML = this.render(element)
}
}

10
js/template/sanitizeText.js Normal file
View File

@@ -0,0 +1,10 @@
const div = document.createElement("div")
function sanitizeText(value) {
div.textContent = value
value = div.textContent
div.innerHTML = ""
return value
}
export default sanitizeText

4
rollup.config.js
View File

@@ -11,8 +11,8 @@ export default {
},
plugins: [
nodeResolve({ browser: true }),
minifyHTML(),
//minifyHTML(),
commonjs(),
terser()
//terser()
]
}