+ 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])};
+ ">
@@ -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])
+ }
}
diff --git a/js/template/LinkTemplate.js b/js/template/LinkTemplate.js
new file mode 100644
index 0000000..695a345
--- /dev/null
+++ b/js/template/LinkTemplate.js
@@ -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`
+
@@ -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`
- ${this.header(entity)}
- ${this.body(entity)}
+ ${this.header(node)}
+ ${this.body(node)}
`
}
+
+ /**
+ * 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])
+ }
}
diff --git a/js/template/PinTemplate.js b/js/template/PinTemplate.js
new file mode 100644
index 0000000..3a3f73f
--- /dev/null
+++ b/js/template/PinTemplate.js
@@ -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`
+
+
+ ${pin.getPinDisplayName()}
+
+ `
+ }
+
+ /**
+ * 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`
+
+ ${output.getPinDisplayName()}
+
+
+ `
+ }
+
+ /**
+ * 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 ""
+ }
+}
diff --git a/js/template/SelectableDraggableTemplate.js b/js/template/SelectableDraggableTemplate.js
new file mode 100644
index 0000000..b3fdc82
--- /dev/null
+++ b/js/template/SelectableDraggableTemplate.js
@@ -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")
+ }
+ }
+}
diff --git a/js/template/SelectorTemplate.js b/js/template/SelectorTemplate.js
new file mode 100644
index 0000000..ce740d5
--- /dev/null
+++ b/js/template/SelectorTemplate.js
@@ -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"
+ }
+}
diff --git a/js/template/Template.js b/js/template/Template.js
index 4c93772..f6becf0 100755
--- a/js/template/Template.js
+++ b/js/template/Template.js
@@ -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)
}
}
diff --git a/js/template/sanitizeText.js b/js/template/sanitizeText.js
new file mode 100644
index 0000000..727dcc8
--- /dev/null
+++ b/js/template/sanitizeText.js
@@ -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
\ No newline at end of file
diff --git a/rollup.config.js b/rollup.config.js
index f4848e2..091aa48 100644
--- a/rollup.config.js
+++ b/rollup.config.js
@@ -11,8 +11,8 @@ export default {
},
plugins: [
nodeResolve({ browser: true }),
- minifyHTML(),
+ //minifyHTML(),
commonjs(),
- terser()
+ //terser()
]
}
\ No newline at end of file