mirror of
https://github.com/barsdeveloper/ueblueprint.git
synced 2026-06-12 06:03:08 +08:00
Various fixes
This commit is contained in:
barsdeveloper
626
js/Blueprint.js
Normal file → Executable file
626
js/Blueprint.js
Normal file → Executable file
@@ -1,313 +1,313 @@
|
|||||||
import Utility from "./Utility"
|
import BlueprintTemplate from "./template/BlueprintTemplate"
|
||||||
import DragScroll from "./input/DragScroll"
|
import DragScroll from "./input/DragScroll"
|
||||||
import Select from "./input/Select"
|
import GraphEntity from "./graph/GraphEntity"
|
||||||
import Zoom from "./input/Zoom"
|
import GraphSelector from "./graph/GraphSelector"
|
||||||
import GraphEntity from "./graph/GraphEntity"
|
import Select from "./input/Select"
|
||||||
import BlueprintTemplate from "./template/BlueprintTemplate"
|
import Utility from "./Utility"
|
||||||
import GraphSelector from "./graph/GraphSelector"
|
import Zoom from "./input/Zoom"
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* @typedef {import("./graph/GraphNode").default} GraphNode
|
* @typedef {import("./graph/GraphNode").default} GraphNode
|
||||||
*/
|
*/
|
||||||
export default class Blueprint extends GraphEntity {
|
export default class Blueprint extends GraphEntity {
|
||||||
|
|
||||||
insertChildren() {
|
insertChildren() {
|
||||||
this.querySelector('[data-nodes]').append(...this.nodes)
|
this.querySelector('[data-nodes]').append(...this.nodes)
|
||||||
}
|
}
|
||||||
|
|
||||||
constructor() {
|
constructor() {
|
||||||
super(new BlueprintTemplate())
|
super(new BlueprintTemplate())
|
||||||
/** @type {GraphNode[]}" */
|
/** @type {GraphNode[]}" */
|
||||||
this.nodes = new Array()
|
this.nodes = new Array()
|
||||||
this.expandGridSize = 400
|
this.expandGridSize = 400
|
||||||
/** @type {HTMLElement} */
|
/** @type {HTMLElement} */
|
||||||
this.gridElement = null
|
this.gridElement = null
|
||||||
/** @type {HTMLElement} */
|
/** @type {HTMLElement} */
|
||||||
this.viewportElement = null
|
this.viewportElement = null
|
||||||
/** @type {HTMLElement} */
|
/** @type {HTMLElement} */
|
||||||
this.overlayElement = null
|
this.overlayElement = null
|
||||||
/** @type {GraphSelector} */
|
/** @type {GraphSelector} */
|
||||||
this.selectorElement = null
|
this.selectorElement = null
|
||||||
/** @type {HTMLElement} */
|
/** @type {HTMLElement} */
|
||||||
this.nodesContainerElement = null
|
this.nodesContainerElement = null
|
||||||
this.dragObject = null
|
this.dragObject = null
|
||||||
this.selectObject = null
|
this.selectObject = null
|
||||||
/** @type {Array<number>} */
|
/** @type {Array<number>} */
|
||||||
this.additional = /*[2 * this.expandGridSize, 2 * this.expandGridSize]*/[0, 0]
|
this.additional = /*[2 * this.expandGridSize, 2 * this.expandGridSize]*/[0, 0]
|
||||||
/** @type {Array<number>} */
|
/** @type {Array<number>} */
|
||||||
this.translateValue = /*[this.expandGridSize, this.expandGridSize]*/[0, 0]
|
this.translateValue = /*[this.expandGridSize, this.expandGridSize]*/[0, 0]
|
||||||
/** @type {number} */
|
/** @type {number} */
|
||||||
this.zoom = 0
|
this.zoom = 0
|
||||||
/** @type {HTMLElement} */
|
/** @type {HTMLElement} */
|
||||||
this.headerElement = null
|
this.headerElement = null
|
||||||
/** @type {(node: GraphNode) => BoundariesInfo} */
|
/** @type {(node: GraphNode) => BoundariesInfo} */
|
||||||
this.nodeBoundariesSupplier = (node) => {
|
this.nodeBoundariesSupplier = (node) => {
|
||||||
let rect = node.getBoundingClientRect()
|
let rect = node.getBoundingClientRect()
|
||||||
let gridRect = this.nodesContainerElement.getBoundingClientRect()
|
let gridRect = this.nodesContainerElement.getBoundingClientRect()
|
||||||
const scaleCorrection = 1 / this.getScale()
|
const scaleCorrection = 1 / this.getScale()
|
||||||
return {
|
return {
|
||||||
primaryInf: (rect.left - gridRect.left) * scaleCorrection,
|
primaryInf: (rect.left - gridRect.left) * scaleCorrection,
|
||||||
primarySup: (rect.right - gridRect.right) * scaleCorrection,
|
primarySup: (rect.right - gridRect.right) * scaleCorrection,
|
||||||
// Counter intuitive here: the y (secondary axis is positive towards the bottom, therefore upper bound "sup" is bottom)
|
// Counter intuitive here: the y (secondary axis is positive towards the bottom, therefore upper bound "sup" is bottom)
|
||||||
secondaryInf: (rect.top - gridRect.top) * scaleCorrection,
|
secondaryInf: (rect.top - gridRect.top) * scaleCorrection,
|
||||||
secondarySup: (rect.bottom - gridRect.bottom) * scaleCorrection
|
secondarySup: (rect.bottom - gridRect.bottom) * scaleCorrection
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
/** @type {(node: GraphNode, selected: bool) => void}} */
|
/** @type {(node: GraphNode, selected: bool) => void}} */
|
||||||
this.nodeSelectToggleFunction = (node, selected) => {
|
this.nodeSelectToggleFunction = (node, selected) => {
|
||||||
node.setSelected(selected)
|
node.setSelected(selected)
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
connectedCallback() {
|
connectedCallback() {
|
||||||
super.connectedCallback()
|
super.connectedCallback()
|
||||||
this.classList.add('ueb', `ueb-zoom-${this.zoom}`)
|
this.classList.add('ueb', `ueb-zoom-${this.zoom}`)
|
||||||
|
|
||||||
this.headerElement = this.querySelector('.ueb-viewport-header')
|
this.headerElement = this.querySelector('.ueb-viewport-header')
|
||||||
console.assert(this.headerElement, "Header element not provided by the template.")
|
console.assert(this.headerElement, "Header element not provided by the template.")
|
||||||
this.overlayElement = this.querySelector('.ueb-viewport-overlay')
|
this.overlayElement = this.querySelector('.ueb-viewport-overlay')
|
||||||
console.assert(this.overlayElement, "Overlay element not provided by the template.")
|
console.assert(this.overlayElement, "Overlay element not provided by the template.")
|
||||||
this.viewportElement = this.querySelector('.ueb-viewport-body')
|
this.viewportElement = this.querySelector('.ueb-viewport-body')
|
||||||
console.assert(this.viewportElement, "Viewport element not provided by the template.")
|
console.assert(this.viewportElement, "Viewport element not provided by the template.")
|
||||||
this.gridElement = this.viewportElement.querySelector('.ueb-grid')
|
this.gridElement = this.viewportElement.querySelector('.ueb-grid')
|
||||||
console.assert(this.gridElement, "Grid element not provided by the template.")
|
console.assert(this.gridElement, "Grid element not provided by the template.")
|
||||||
this.selectorElement = new GraphSelector()
|
this.selectorElement = new GraphSelector()
|
||||||
this.nodesContainerElement = this.querySelector('[data-nodes]')
|
this.nodesContainerElement = this.querySelector('[data-nodes]')
|
||||||
console.assert(this.nodesContainerElement, "Nodes container element not provided by the template.")
|
console.assert(this.nodesContainerElement, "Nodes container element not provided by the template.")
|
||||||
this.nodesContainerElement.append(this.selectorElement)
|
this.nodesContainerElement.append(this.selectorElement)
|
||||||
this.insertChildren()
|
this.insertChildren()
|
||||||
|
|
||||||
this.dragObject = new DragScroll(this.getGridDOMElement(), this, {
|
this.dragObject = new DragScroll(this.getGridDOMElement(), this, {
|
||||||
clickButton: 2,
|
clickButton: 2,
|
||||||
moveEverywhere: true,
|
moveEverywhere: true,
|
||||||
exitAnyButton: false
|
exitAnyButton: false
|
||||||
})
|
})
|
||||||
|
|
||||||
this.zoomObject = new Zoom(this.getGridDOMElement(), this, {
|
this.zoomObject = new Zoom(this.getGridDOMElement(), this, {
|
||||||
looseTarget: true
|
looseTarget: true
|
||||||
})
|
})
|
||||||
|
|
||||||
this.selectObject = new Select(this.getGridDOMElement(), this, {
|
this.selectObject = new Select(this.getGridDOMElement(), this, {
|
||||||
clickButton: 0,
|
clickButton: 0,
|
||||||
moveEverywhere: true,
|
moveEverywhere: true,
|
||||||
exitAnyButton: true
|
exitAnyButton: true
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
getGridDOMElement() {
|
getGridDOMElement() {
|
||||||
return this.gridElement
|
return this.gridElement
|
||||||
}
|
}
|
||||||
|
|
||||||
disconnectedCallback() {
|
disconnectedCallback() {
|
||||||
super.disconnectedCallback()
|
super.disconnectedCallback()
|
||||||
this.dragObject.unlistenDOMElement()
|
this.dragObject.unlistenDOMElement()
|
||||||
this.selectObject.unlistenDOMElement()
|
this.selectObject.unlistenDOMElement()
|
||||||
}
|
}
|
||||||
|
|
||||||
getScroll() {
|
getScroll() {
|
||||||
return [this.viewportElement.scrollLeft, this.viewportElement.scrollTop]
|
return [this.viewportElement.scrollLeft, this.viewportElement.scrollTop]
|
||||||
}
|
}
|
||||||
|
|
||||||
setScroll(value, smooth = false) {
|
setScroll(value, smooth = false) {
|
||||||
this.scroll = value
|
this.scroll = value
|
||||||
if (!smooth) {
|
if (!smooth) {
|
||||||
this.viewportElement.scroll(value[0], value[1])
|
this.viewportElement.scroll(value[0], value[1])
|
||||||
} else {
|
} else {
|
||||||
this.viewportElement.scroll({
|
this.viewportElement.scroll({
|
||||||
left: value[0],
|
left: value[0],
|
||||||
top: value[1],
|
top: value[1],
|
||||||
behavior: 'smooth'
|
behavior: 'smooth'
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
scrollDelta(delta, smooth = false) {
|
scrollDelta(delta, smooth = false) {
|
||||||
const scrollMax = this.getScrollMax()
|
const scrollMax = this.getScrollMax()
|
||||||
let currentScroll = this.getScroll()
|
let currentScroll = this.getScroll()
|
||||||
let finalScroll = [
|
let finalScroll = [
|
||||||
currentScroll[0] + delta[0],
|
currentScroll[0] + delta[0],
|
||||||
currentScroll[1] + delta[1]
|
currentScroll[1] + delta[1]
|
||||||
]
|
]
|
||||||
let expand = [0, 0]
|
let expand = [0, 0]
|
||||||
for (let i = 0; i < 2; ++i) {
|
for (let i = 0; i < 2; ++i) {
|
||||||
if (delta[i] < 0 && finalScroll[i] < 0.25 * this.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 if scrolling is diminishing and the remainig space is less that a quarter of an expansion step
|
||||||
expand[i] = finalScroll[i]
|
expand[i] = finalScroll[i]
|
||||||
if (expand[i] > 0) {
|
if (expand[i] > 0) {
|
||||||
// Final scroll is still in rage (more than zero) but we want to expand to negative (left or top)
|
// Final scroll is still in rage (more than zero) but we want to expand to negative (left or top)
|
||||||
expand[i] = -this.expandGridSize
|
expand[i] = -this.expandGridSize
|
||||||
}
|
}
|
||||||
} else if (delta[i] > 0 && finalScroll[i] > scrollMax[i] - 0.25 * this.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 if scrolling is increasing and the remainig space is less that a quarter of an expansion step
|
||||||
expand[i] = finalScroll[i] - scrollMax[i]
|
expand[i] = finalScroll[i] - scrollMax[i]
|
||||||
if (expand[i] < 0) {
|
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)
|
// Final scroll is still in rage (less than the maximum scroll) but we want to expand to positive (right or bottom)
|
||||||
expand[i] = this.expandGridSize
|
expand[i] = this.expandGridSize
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
if (expand[0] != 0 || expand[1] != 0) {
|
if (expand[0] != 0 || expand[1] != 0) {
|
||||||
this.seamlessExpand(this.progressiveSnapToGrid(expand[0]), this.progressiveSnapToGrid(expand[1]))
|
this.seamlessExpand(this.progressiveSnapToGrid(expand[0]), this.progressiveSnapToGrid(expand[1]))
|
||||||
currentScroll = this.getScroll()
|
currentScroll = this.getScroll()
|
||||||
finalScroll = [
|
finalScroll = [
|
||||||
currentScroll[0] + delta[0],
|
currentScroll[0] + delta[0],
|
||||||
currentScroll[1] + delta[1]
|
currentScroll[1] + delta[1]
|
||||||
]
|
]
|
||||||
}
|
}
|
||||||
this.setScroll(finalScroll, smooth)
|
this.setScroll(finalScroll, smooth)
|
||||||
}
|
}
|
||||||
|
|
||||||
scrollCenter() {
|
scrollCenter() {
|
||||||
const scroll = this.getScroll()
|
const scroll = this.getScroll()
|
||||||
const offset = [
|
const offset = [
|
||||||
this.translateValue[0] - scroll[0],
|
this.translateValue[0] - scroll[0],
|
||||||
this.translateValue[1] - scroll[1]
|
this.translateValue[1] - scroll[1]
|
||||||
]
|
]
|
||||||
const targetOffset = this.getViewportSize().map(size => size / 2)
|
const targetOffset = this.getViewportSize().map(size => size / 2)
|
||||||
const deltaOffset = [
|
const deltaOffset = [
|
||||||
offset[0] - targetOffset[0],
|
offset[0] - targetOffset[0],
|
||||||
offset[1] - targetOffset[1]
|
offset[1] - targetOffset[1]
|
||||||
]
|
]
|
||||||
this.scrollDelta(deltaOffset, true)
|
this.scrollDelta(deltaOffset, true)
|
||||||
}
|
}
|
||||||
|
|
||||||
getExpandGridSize() {
|
getExpandGridSize() {
|
||||||
return this.expandGridSize
|
return this.expandGridSize
|
||||||
}
|
}
|
||||||
|
|
||||||
getViewportSize() {
|
getViewportSize() {
|
||||||
return [
|
return [
|
||||||
this.viewportElement.clientWidth,
|
this.viewportElement.clientWidth,
|
||||||
this.viewportElement.clientHeight
|
this.viewportElement.clientHeight
|
||||||
]
|
]
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Get the scroll limits
|
* Get the scroll limits
|
||||||
* @return {array} The horizonal and vertical maximum scroll limits
|
* @return {array} The horizonal and vertical maximum scroll limits
|
||||||
*/
|
*/
|
||||||
getScrollMax() {
|
getScrollMax() {
|
||||||
return [
|
return [
|
||||||
this.viewportElement.scrollWidth - this.viewportElement.clientWidth,
|
this.viewportElement.scrollWidth - this.viewportElement.clientWidth,
|
||||||
this.viewportElement.scrollHeight - this.viewportElement.clientHeight
|
this.viewportElement.scrollHeight - this.viewportElement.clientHeight
|
||||||
]
|
]
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Expand the grid, considers the absolute value of params
|
* Expand the grid, considers the absolute value of params
|
||||||
* @param {number} x - Horizontal expansion value
|
* @param {number} x - Horizontal expansion value
|
||||||
* @param {number} y - Vertical expansion value
|
* @param {number} y - Vertical expansion value
|
||||||
*/
|
*/
|
||||||
_expand(x, y) {
|
_expand(x, y) {
|
||||||
x = Math.round(Math.abs(x))
|
x = Math.round(Math.abs(x))
|
||||||
y = Math.round(Math.abs(y))
|
y = Math.round(Math.abs(y))
|
||||||
this.additional = [this.additional[0] + x, this.additional[1] + y]
|
this.additional = [this.additional[0] + x, this.additional[1] + y]
|
||||||
if (this.gridElement) {
|
if (this.gridElement) {
|
||||||
this.gridElement.style.setProperty('--ueb-additional-x', this.additional[0])
|
this.gridElement.style.setProperty('--ueb-additional-x', this.additional[0])
|
||||||
this.gridElement.style.setProperty('--ueb-additional-y', this.additional[1])
|
this.gridElement.style.setProperty('--ueb-additional-y', this.additional[1])
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Moves the content of the grid according to the coordinates
|
* Moves the content of the grid according to the coordinates
|
||||||
* @param {number} x - Horizontal translation value
|
* @param {number} x - Horizontal translation value
|
||||||
* @param {number} y - Vertical translation value
|
* @param {number} y - Vertical translation value
|
||||||
*/
|
*/
|
||||||
_translate(x, y) {
|
_translate(x, y) {
|
||||||
x = Math.round(x)
|
x = Math.round(x)
|
||||||
y = Math.round(y)
|
y = Math.round(y)
|
||||||
this.translateValue = [this.translateValue[0] + x, this.translateValue[1] + y]
|
this.translateValue = [this.translateValue[0] + x, this.translateValue[1] + y]
|
||||||
if (this.gridElement) {
|
if (this.gridElement) {
|
||||||
this.gridElement.style.setProperty('--ueb-translate-x', this.translateValue[0])
|
this.gridElement.style.setProperty('--ueb-translate-x', this.translateValue[0])
|
||||||
this.gridElement.style.setProperty('--ueb-translate-y', this.translateValue[1])
|
this.gridElement.style.setProperty('--ueb-translate-y', this.translateValue[1])
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Expand the grind indefinitely, the content will remain into position
|
* Expand the grind indefinitely, the content will remain into position
|
||||||
* @param {number} x - Horizontal expand value (negative means left, positive means right)
|
* @param {number} x - Horizontal expand value (negative means left, positive means right)
|
||||||
* @param {number} y - Vertical expand value (negative means top, positive means bottom)
|
* @param {number} y - Vertical expand value (negative means top, positive means bottom)
|
||||||
*/
|
*/
|
||||||
seamlessExpand(x, y) {
|
seamlessExpand(x, y) {
|
||||||
let scale = this.getScale()
|
let scale = this.getScale()
|
||||||
let scaledX = x / scale
|
let scaledX = x / scale
|
||||||
let scaledY = y / scale
|
let scaledY = y / scale
|
||||||
// First expand the grid to contain the additional space
|
// First expand the grid to contain the additional space
|
||||||
this._expand(scaledX, scaledY)
|
this._expand(scaledX, scaledY)
|
||||||
// If the expansion is towards the left or top, then scroll back to give the illusion that the content is in the same position and translate it accordingly
|
// If the expansion is towards the left or top, then scroll back to give the illusion that the content is in the same position and translate it accordingly
|
||||||
this._translate(scaledX < 0 ? -scaledX : 0, scaledY < 0 ? -scaledY : 0)
|
this._translate(scaledX < 0 ? -scaledX : 0, scaledY < 0 ? -scaledY : 0)
|
||||||
if (x < 0) {
|
if (x < 0) {
|
||||||
this.viewportElement.scrollLeft -= x
|
this.viewportElement.scrollLeft -= x
|
||||||
}
|
}
|
||||||
if (y < 0) {
|
if (y < 0) {
|
||||||
this.viewportElement.scrollTop -= y
|
this.viewportElement.scrollTop -= y
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
progressiveSnapToGrid(x) {
|
progressiveSnapToGrid(x) {
|
||||||
return this.expandGridSize * Math.round(x / this.expandGridSize + 0.5 * Math.sign(x))
|
return this.expandGridSize * Math.round(x / this.expandGridSize + 0.5 * Math.sign(x))
|
||||||
}
|
}
|
||||||
|
|
||||||
getZoom() {
|
getZoom() {
|
||||||
return this.zoom
|
return this.zoom
|
||||||
}
|
}
|
||||||
|
|
||||||
setZoom(zoom, center) {
|
setZoom(zoom, center) {
|
||||||
zoom = Utility.clamp(zoom, -12, 0)
|
zoom = Utility.clamp(zoom, -12, 0)
|
||||||
if (zoom == this.zoom) {
|
if (zoom == this.zoom) {
|
||||||
return
|
return
|
||||||
}
|
}
|
||||||
let initialScale = this.getScale()
|
let initialScale = this.getScale()
|
||||||
this.classList.remove(`ueb-zoom-${this.zoom}`)
|
this.classList.remove(`ueb-zoom-${this.zoom}`)
|
||||||
this.classList.add(`ueb-zoom-${zoom}`)
|
this.classList.add(`ueb-zoom-${zoom}`)
|
||||||
this.zoom = zoom
|
this.zoom = zoom
|
||||||
|
|
||||||
|
|
||||||
if (center) {
|
if (center) {
|
||||||
let relativeScale = this.getScale() / initialScale
|
let relativeScale = this.getScale() / initialScale
|
||||||
let newCenter = [
|
let newCenter = [
|
||||||
relativeScale * center[0],
|
relativeScale * center[0],
|
||||||
relativeScale * center[1]
|
relativeScale * center[1]
|
||||||
]
|
]
|
||||||
this.scrollDelta([
|
this.scrollDelta([
|
||||||
(newCenter[0] - center[0]) * initialScale,
|
(newCenter[0] - center[0]) * initialScale,
|
||||||
(newCenter[1] - center[1]) * initialScale
|
(newCenter[1] - center[1]) * initialScale
|
||||||
])
|
])
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
getScale() {
|
getScale() {
|
||||||
return parseFloat(getComputedStyle(this.gridElement).getPropertyValue('--ueb-scale'))
|
return parseFloat(getComputedStyle(this.gridElement).getPropertyValue('--ueb-scale'))
|
||||||
}
|
}
|
||||||
|
|
||||||
compensateTranslation(position) {
|
compensateTranslation(position) {
|
||||||
position[0] -= this.translateValue[0]
|
position[0] -= this.translateValue[0]
|
||||||
position[1] -= this.translateValue[1]
|
position[1] -= this.translateValue[1]
|
||||||
return position
|
return position
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Unselect all nodes
|
* Unselect all nodes
|
||||||
*/
|
*/
|
||||||
unselectAll() {
|
unselectAll() {
|
||||||
this.nodes.forEach(node => this.nodeSelectToggleFunction(node, false))
|
this.nodes.forEach(node => this.nodeSelectToggleFunction(node, false))
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
*
|
*
|
||||||
* @param {...GraphNode} graphNodes
|
* @param {...GraphNode} graphNodes
|
||||||
*/
|
*/
|
||||||
addNode(...graphNodes) {
|
addNode(...graphNodes) {
|
||||||
[...graphNodes].reduce(
|
[...graphNodes].reduce(
|
||||||
(s, e) => {
|
(s, e) => {
|
||||||
s.push(e)
|
s.push(e)
|
||||||
return s
|
return s
|
||||||
},
|
},
|
||||||
this.nodes)
|
this.nodes)
|
||||||
if (this.nodesContainerElement) {
|
if (this.nodesContainerElement) {
|
||||||
this.nodesContainerElement.append(...graphNodes)
|
this.nodesContainerElement.append(...graphNodes)
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
customElements.define('u-blueprint', Blueprint)
|
customElements.define('u-blueprint', Blueprint)
|
||||||
|
|||||||
Reference in New Issue
Block a user