Using web components

.gitignore

@@ -0,0 +1 @@
+node_modules/

css/ueblueprint-style.css

@@ -14,14 +14,15 @@
         url('../font/roboto-regular.woff') format('woff');
 }
 
-.ueb {
+u-blueprint {
+    display    : block;
     position   : relative;
     font-family: Roboto, Noto, Oxygen, Ubuntu, 'Open Sans', 'Helvetica Neue', sans-serif;
     font-size  : var(--ueb-fron-size);
 }
 
 .ueb-viewport-header {
-    display   : flexbox;
+    display   : flex;
     position  : absolute;
     top       : 0;
     right     : 0;
@@ -32,7 +33,6 @@
 }
 
 .ueb-viewport-zoom {
-    float: right;
     color: #4d4d4db7;
 }
 
@@ -175,6 +175,7 @@
 }
 
 .ueb-node {
+    display      : block;
     position     : absolute;
     transform    : translateX(calc(var(--ueb-position-x) * 1px)) translateY(calc(var(--ueb-position-y) * 1px));
     border-radius: var(--ueb-node-radius);

js/UEBlueprint.js

@@ -1,25 +1,35 @@
-import UEBlueprintDOMModel from "./UEBlueprintDOMModel.js"
 import UEBlueprintDragScroll from "./UEBlueprintDragScroll.js"
 
-export default class UEBlueprint extends UEBlueprintDOMModel {
+export default class UEBlueprint extends HTMLElement {
 
-    static domTemplate(obj) {
+    header() {
         return `
-<div class="ueb ueb-zoom-${obj.zoom}">
-    <div class="ueb-viewport-header">
-        <div class="ueb-viewport-zoom">1:1</div>
-    </div>
-    <div class="ueb-viewport-overlay"></div>
-    <div class="ueb-viewport-body">
-        <div class="ueb-grid"
-            style="--ueb-additional-x:${obj.additional[0]}; --ueb-additional-y:${obj.additional[1]}; --ueb-translate-x:${obj.translateValue[0]}; --ueb-translate-y:${obj.translateValue[1]}">
-            <div class="ueb-grid-content">
-                ${obj.nodes.forEach(node => node.getDOMElement()) ?? ''}
+            <div class="ueb-viewport-header">
+                <div class="ueb-viewport-zoom">1:1</div>
             </div>
-        </div>
-    </div>
-</div>
-`
+        `
+    }
+
+    overlay() {
+        return `
+            <div class="ueb-viewport-overlay"></div>
+        `
+    }
+
+    viewport() {
+        return `
+            <div class="ueb-viewport-body">
+                <div class="ueb-grid"
+                    style="--ueb-additional-x:${this.additional[0]}; --ueb-additional-y:${this.additional[1]}; --ueb-translate-x:${this.translateValue[0]}; --ueb-translate-y:${this.translateValue[1]}">
+                    <div class="ueb-grid-content" data-nodes>
+                    </div>
+                </div>
+            </div>
+        `
+    }
+
+    insertChildren() {
+        this.querySelector('[data-nodes]').append(...this.nodes)
     }
 
     static clamp(val, min, max) {
@@ -28,49 +38,60 @@ export default class UEBlueprint extends UEBlueprintDOMModel {
 
     constructor() {
         super()
+        this.nodes = new Set()
         this.expandGridSize = 400
-        this.gridDOMElement = null
+        this.gridElement = null
+        this.viewportElement = null
+        this.overlayElement = null
         this.dragObject = null
         this.additional = /*[2 * this.expandGridSize, 2 * this.expandGridSize]*/[0, 0]
         this.translateValue = /*[this.expandGridSize, this.expandGridSize]*/[0, 0]
         this.zoom = 0
-        this.nodes = []
+        this.headerElement = null
     }
 
-    createDOMElement() {
-        super.createDOMElement()
-        this.gridDOMElement = this.domElement.querySelector('.ueb-grid')
-        let contentElement = this.domElement.querySelector('.ueb-grid-content')
-        if (!this.gridDOMElement || !contentElement) {
-            console.error('Some expencted DOM elements not be found, please check domTemplate().')
-        }
-        // Populate the grid content with the node elements
-        this.nodes.forEach(node => {
-            contentElement.appendChild(node.getDOMElement())
-        })
+    connectedCallback() {
+        this.classList.add('ueb', `ueb-zoom-${this.zoom}`)
+        let aDiv = document.createElement('div');
+        // Add header
+        aDiv.innerHTML = this.header()
+        this.headerElement = aDiv.firstElementChild
+        this.appendChild(this.headerElement)
+
+        // Add overlay
+        aDiv.innerHTML = this.overlay()
+        this.overlayElement = aDiv.firstElementChild
+        this.appendChild(this.overlayElement)
+
+        // Add viewport
+        aDiv.innerHTML = this.viewport()
+        this.viewportElement = aDiv.firstElementChild
+        this.appendChild(this.viewportElement)
+
+        this.gridElement = this.viewportElement.querySelector('.ueb-grid')
+        this.insertChildren()
+
         this.dragObject = new UEBlueprintDragScroll(this, {
             'clickButton': 2,
             'stepSize': 1
         })
     }
 
-    removeDOMElement() {
-        if (this.domElement) {
-            this.dragObject.unlistenDOMElement()
-        }
-        return super.removeDOMElement()
+    getGridDOMElement() {
+        return this.gridElement
     }
 
-    getGridDOMElement() {
-        return this.gridDOMElement
+    disconnectedCallback() {
+        super.disconnectedCallback()
+        this.dragObject.unlistenDOMElement()
     }
 
     setScroll(value, smooth = false) {
         this.scroll = value
         if (!smooth) {
-            this.gridDOMElement.parentElement.scroll(value[0], value[1])
+            this.viewportElement.scroll(value[0], value[1])
         } else {
-            this.gridDOMElement.parentElement.scroll({
+            this.viewportElement.scroll({
                 left: value[0],
                 top: value[1],
                 behavior: 'smooth'
@@ -115,8 +136,7 @@ export default class UEBlueprint extends UEBlueprintDOMModel {
     }
 
     getScroll() {
-        let parentElement = this.gridDOMElement.parentElement
-        return [parentElement.scrollLeft, parentElement.scrollTop]
+        return [this.viewportElement.scrollLeft, this.viewportElement.scrollTop]
     }
 
     scrollCenter() {
@@ -138,10 +158,9 @@ export default class UEBlueprint extends UEBlueprintDOMModel {
     }
 
     getViewportSize() {
-        let parentElement = this.gridDOMElement.parentElement
         return [
-            parentElement.clientWidth,
-            parentElement.clientHeight
+            this.viewportElement.clientWidth,
+            this.viewportElement.clientHeight
         ]
     }
 
@@ -150,10 +169,9 @@ export default class UEBlueprint extends UEBlueprintDOMModel {
      * @return {array} The horizonal and vertical maximum scroll limits
      */
     getScrollMax() {
-        let parentElement = this.gridDOMElement.parentElement
         return [
-            parentElement.scrollWidth - parentElement.clientWidth,
-            parentElement.scrollHeight - parentElement.clientHeight
+            this.viewportElement.scrollWidth - this.viewportElement.clientWidth,
+            this.viewportElement.scrollHeight - this.viewportElement.clientHeight
         ]
     }
 
@@ -166,9 +184,9 @@ export default class UEBlueprint extends UEBlueprintDOMModel {
         x = Math.round(Math.abs(x))
         y = Math.round(Math.abs(y))
         this.additional = [this.additional[0] + x, this.additional[1] + y]
-        if (this.gridDOMElement) {
-            this.gridDOMElement.style.setProperty('--ueb-additional-x', this.additional[0])
-            this.gridDOMElement.style.setProperty('--ueb-additional-y', this.additional[1])
+        if (this.gridElement) {
+            this.gridElement.style.setProperty('--ueb-additional-x', this.additional[0])
+            this.gridElement.style.setProperty('--ueb-additional-y', this.additional[1])
         }
     }
 
@@ -181,9 +199,9 @@ export default class UEBlueprint extends UEBlueprintDOMModel {
         x = Math.round(x)
         y = Math.round(y)
         this.translateValue = [this.translateValue[0] + x, this.translateValue[1] + y]
-        if (this.gridDOMElement) {
-            this.gridDOMElement.style.setProperty('--ueb-translate-x', this.translateValue[0])
-            this.gridDOMElement.style.setProperty('--ueb-translate-y', this.translateValue[1])
+        if (this.gridElement) {
+            this.gridElement.style.setProperty('--ueb-translate-x', this.translateValue[0])
+            this.gridElement.style.setProperty('--ueb-translate-y', this.translateValue[1])
         }
     }
 
@@ -201,10 +219,10 @@ export default class UEBlueprint extends UEBlueprintDOMModel {
         // 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)
         if (x < 0) {
-            this.gridDOMElement.parentElement.scrollLeft -= x
+            this.viewportElement.scrollLeft -= x
         }
         if (y < 0) {
-            this.gridDOMElement.parentElement.scrollTop -= y
+            this.viewportElement.scrollTop -= y
         }
     }
 
@@ -222,8 +240,8 @@ export default class UEBlueprint extends UEBlueprintDOMModel {
             return
         }
         let initialScale = this.getScale()
-        this.domElement.classList.add(`ueb-zoom-${zoom}`)
-        this.domElement.classList.remove(`ueb-zoom-${this.zoom}`)
+        this.classList.add(`ueb-zoom-${zoom}`)
+        this.classList.remove(`ueb-zoom-${this.zoom}`)
         this.zoom = zoom
         if (center) {
             let relativeScale = this.getScale() / initialScale
@@ -239,10 +257,16 @@ export default class UEBlueprint extends UEBlueprintDOMModel {
     }
 
     getScale() {
-        return parseFloat(getComputedStyle(this.gridDOMElement).getPropertyValue('--ueb-grid-scale'))
+        return parseFloat(getComputedStyle(this.gridElement).getPropertyValue('--ueb-grid-scale'))
     }
 
-    addNode(...blueprintNode) {
-        this.nodes.push(...blueprintNode)
+    addNode(...blueprintNodes) {
+        [...blueprintNodes].reduce((s, e) => s.add(e), this.nodes)
+        let nodesDestination = this.querySelector('[data-nodes]')
+        if (nodesDestination) {
+            nodesDestination.append(...blueprintNodes)
+        }
     }
 }
+
+customElements.define('u-blueprint', UEBlueprint)

js/UEBlueprintDOMModel.js

@@ -1,35 +0,0 @@
-export default class UEBlueprintDOMModel {
-    static dummyDiv = document.createElement('div')
-
-    static domTemplate(obj) {
-        return ``
-    }
-
-    constructor() {
-        this.domElement = null
-    }
-
-    createDOMElement() {
-        if (this.domElement) {
-            this.removeDOMElement()
-        }
-        this.constructor.dummyDiv.innerHTML = this.constructor.domTemplate(this)
-        this.domElement = this.constructor.dummyDiv.removeChild(this.constructor.dummyDiv.firstElementChild)
-    }
-
-    getDOMElement() {
-        if (!this.domElement) {
-            this.createDOMElement()
-        }
-        return this.domElement
-    }
-
-    removeDOMElement() {
-        if (!this.domElement) {
-            return false
-        }
-        this.domElement.parentElement.removeChild(this.domElement)
-        this.domElement = null
-        return true
-    }
-}

js/UEBlueprintDrag.js

@@ -1,6 +1,6 @@
 export default class UEBlueprintDrag {
-    constructor(draggedNode, options) {
-        this.blueprintNode = draggedNode;
+    constructor(blueprintNode, options) {
+        this.blueprintNode = blueprintNode;
         this.mousePosition = [0, 0];
         this.stepSize = options?.stepSize
         this.clickButton = options?.clickButton ?? 0
@@ -38,17 +38,13 @@ export default class UEBlueprintDrag {
                 document.removeEventListener('mouseup', self.mouseUpHandler)
             }
         };
-        let element = this.blueprintNode.getDOMElement()
+        let element = this.blueprintNode
         element.addEventListener('mousedown', this.mouseDownHandler)
         element.addEventListener('contextmenu', e => e.preventDefault())
     }
 
     unlistenDOMElement() {
-        if (this.blueprintNode) {
-            this.blueprintNode.getDOMElement().removeEventListener('mousedown', this.mouseDownHandler)
-            return true
-        }
-        return false
+        this.blueprintNode.removeEventListener('mousedown', this.mouseDownHandler)
     }
 
     snapToGrid(posX, posY) {
@@ -60,7 +56,7 @@ export default class UEBlueprintDrag {
 
     clicked(x, y) {
         if (!this.stepSize) {
-            this.stepSize = parseInt(getComputedStyle(this.blueprintNode.getDOMElement()).getPropertyValue('--ueb-grid-snap'))
+            this.stepSize = parseInt(getComputedStyle(this.blueprintNode).getPropertyValue('--ueb-grid-snap'))
         }
         // Get the current mouse position
         this.mousePosition = this.snapToGrid(x, y)

js/UEBlueprintDragScroll.js

@@ -3,7 +3,6 @@ import UEBlueprintDrag from "./UEBlueprintDrag.js"
 export default class UEBlueprintDragScroll extends UEBlueprintDrag {
     constructor(scrolledEntity, options) {
         super(scrolledEntity, options)
-        this.scrolledDOMElement = scrolledEntity.getGridDOMElement()
         this.minZoom = options?.minZoom ?? -12
         let self = this;
         this.mouseMoveHandler = function (e) {

js/UEBlueprintDraggableObject.js

@@ -1,7 +1,6 @@
-import UEBlueprintDOMModel from "./UEBlueprintDOMModel.js"
 import UEBlueprintDrag from "./UEBlueprintDrag.js"
 
-export default class UEBlueprintDraggableObject extends UEBlueprintDOMModel {
+export default class UEBlueprintDraggableObject extends HTMLElement {
 
     constructor() {
         super()
@@ -9,24 +8,18 @@ export default class UEBlueprintDraggableObject extends UEBlueprintDOMModel {
         this.location = [0, 0]
     }
 
-    createDOMElement() {
-        super.createDOMElement()
+    connectedCallback() {
         this.dragObject = new UEBlueprintDrag(this)
     }
 
-    removeDOMElement() {
-        if (this.domElement) {
-            this.dragObject.unlistenDOMElement()
-        }
-        return super.removeDOMElement()
+    disconnectedCallback() {
+        this.dragObject.unlistenDOMElement()
     }
 
     setLocation(value = [0, 0]) {
         this.location = value
-        if (this.domElement) {
-            this.domElement.style.setProperty('--ueb-position-x', this.location[0])
-            this.domElement.style.setProperty('--ueb-position-y', this.location[1])
-        }
+        this.style.setProperty('--ueb-position-x', this.location[0])
+        this.style.setProperty('--ueb-position-y', this.location[1])
     }
 
     addLocation(value) {

js/UEBlueprintObject.js

@@ -16,39 +16,49 @@ export default class UEBlueprintObject extends UEBlueprintDraggableObject {
     static classInFlow = false
     static classOutFlow = false
     static className = 'Empty node'
-    static domTemplate(obj) {
+
+    header() {
         return `
-<div class="ueb-node ${obj.selected ? 'ueb-selected' : ''}"
-    style="--ueb-position-x:${obj.location[0]}; --ueb-position-y:${obj.location[1]}">
-    <div class="ueb-node-border">
-        <div class="ueb-node-content">
             <div class="ueb-node-header">
                 <span class="ueb-node-name">
                     <span class="ueb-node-symbol"></span>
-                    <span class="ueb-node-text">${obj.constructor.className}</span>
+                    <span class="ueb-node-text">${this.constructor.className}</span>
                 </span>
             </div>
+        `
+    }
+
+    body() {
+        return `
             <div class="ueb-node-body">
                 <div class="ueb-node-inputs">
-                    ${obj.constructor.classInputs.forEach((input, index) => `
+                    ${this.constructor.classInputs.forEach((input, index) => `
                     <div class="ueb-node-input ueb-node-value-${input.type}">
-                        <span class="ueb-node-value-icon ${obj.inputs[index].connected ? 'ueb-node-value-fill' : ''}"></span>
+                        <span class="ueb-node-value-icon ${this.inputs[index].connected ? 'ueb-node-value-fill' : ''}"></span>
                         ${input.name}
                     </div>
                     `) ?? ''}
                 </div>
                 <div class="ueb-node-outputs">
-                    ${obj.constructor.classOutputs.forEach((output, index) => `
+                    ${this.constructor.classOutputs.forEach((output, index) => `
                     <div class="ueb-node-output ueb-node-value-${output.type}">
                         ${output.name}
-                        <span class="ueb-node-value-icon ${obj.outputs[index].connected ? 'ueb-node-value-fill' : ''}"></span>
+                        <span class="ueb-node-value-icon ${this.outputs[index].connected ? 'ueb-node-value-fill' : ''}"></span>
                     </div>
                     `) ?? ''}
                 </div>
             </div>
-        </div>
-    </div>
-</div>
+        `
+    }
+
+    render() {
+        return `
+            <div class="ueb-node-border">
+                <div class="ueb-node-content">
+                    ${this.header()}
+                    ${this.body()}
+                </div>
+            </div>
 `
     }
 
@@ -67,6 +77,20 @@ export default class UEBlueprintObject extends UEBlueprintDraggableObject {
         })
     }
 
+    connectedCallback() {
+        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])
+
+        let aDiv = document.createElement('div');
+        aDiv.innerHTML = this.render()
+        this.appendChild(aDiv.firstElementChild)
+    }
+
     isSelected() {
         return this.selected
     }
@@ -75,3 +99,5 @@ export default class UEBlueprintObject extends UEBlueprintDraggableObject {
         this.selected = value
     }
 }
+
+customElements.define('u-object', UEBlueprintObject)

js/exporting.js

@@ -0,0 +1,4 @@
+import UEBlueprint from "./UEBlueprint"
+import UEBlueprintObject from "./UEBlueprintObject"
+
+export { UEBlueprint, UEBlueprintObject }

package.json

@@ -0,0 +1,26 @@
+{
+  "name": "ueblueprint",
+  "version": "1.0.0",
+  "description": "Unreal Engine's Blueprint visualisation library",
+  "main": "index.js",
+  "scripts": {
+    "build": "rollup --config"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/barsdeveloper/ueblueprint.git"
+  },
+  "keywords": [
+    "unreal",
+    "engine",
+    "blueprint"
+  ],
+  "author": "barsdeveloper",
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/barsdeveloper/ueblueprint/issues"
+  },
+  "homepage": "https://github.com/barsdeveloper/ueblueprint#readme",
+  "dependencies": {},
+  "devDependencies": {}
+}

rollup.config.js

@@ -0,0 +1,7 @@
+export default {
+    input: 'js/exporting.js',
+    output: {
+        file: 'ueblueprint.js',
+        format: 'es',
+    },
+};

ueblueprint.html

@@ -22,20 +22,18 @@
             --ueb-grid-snap: 16px;
         }
     </style>
-    <link rel="stylesheet" href="css/ueblueprint-style.css">
     <link rel="stylesheet" href="css/ueblueprint-node-value-type-color.css">
+    <link rel="stylesheet" href="css/ueblueprint-style.css">
 </head>
 
 <body>
     <div>Hello</div>
     <script type="module">
-        import UEBlueprintObject from "./js/UEBlueprintObject.js"
-        import UEBlueprint from "./js/UEBlueprint.js"
-        let node1 = new UEBlueprintObject()
-        node1.addLocation([100, 100])
+        import { UEBlueprint, UEBlueprintObject } from "./ueblueprint.js"
         let blueprint = new UEBlueprint()
+        let node1 = new UEBlueprintObject()
         blueprint.addNode(node1)
-        document.querySelector('body').appendChild(blueprint.getDOMElement())
+        document.querySelector('body').appendChild(blueprint)
         let a = 123
     </script>
     <script type="module">

ueblueprint.js

@@ -0,0 +1,509 @@
+class UEBlueprintDrag {
+    constructor(blueprintNode, options) {
+        this.blueprintNode = blueprintNode;
+        this.mousePosition = [0, 0];
+        this.stepSize = options?.stepSize;
+        this.clickButton = options?.clickButton ?? 0;
+        this.exitGrabSameButtonOnly = options?.exitGrabSameButtonOnly ?? false;
+        let self = this;
+        this.mouseDownHandler = function (e) {
+            switch (e.button) {
+                case self.clickButton:
+                    self.clicked(e.clientX, e.clientY);
+                    break;
+                default:
+                    if (!self.exitGrabSameButtonOnly) {
+                        self.mouseUpHandler(e);
+                    }
+                    break;
+            }
+        };
+        this.mouseMoveHandler = function (e) {
+            let mousePosition = self.snapToGrid(e.clientX, e.clientY);
+            const d = [mousePosition[0] - self.mousePosition[0], mousePosition[1] - self.mousePosition[1]];
+
+            if (d[0] == 0 && d[1] == 0) {
+                return;
+            }
+
+            self.blueprintNode.addLocation(d);
+
+            // Reassign the position of mouse
+            self.mousePosition = mousePosition;
+        };
+        this.mouseUpHandler = function (e) {
+            if (!self.exitGrabSameButtonOnly || e.button == self.clickButton) {
+                // Remove the handlers of `mousemove` and `mouseup`
+                document.removeEventListener('mousemove', self.mouseMoveHandler);
+                document.removeEventListener('mouseup', self.mouseUpHandler);
+            }
+        };
+        let element = this.blueprintNode;
+        element.addEventListener('mousedown', this.mouseDownHandler);
+        element.addEventListener('contextmenu', e => e.preventDefault());
+    }
+
+    unlistenDOMElement() {
+        this.blueprintNode.removeEventListener('mousedown', this.mouseDownHandler);
+    }
+
+    snapToGrid(posX, posY) {
+        return [
+            this.stepSize * Math.round(posX / this.stepSize),
+            this.stepSize * Math.round(posY / this.stepSize)
+        ]
+    }
+
+    clicked(x, y) {
+        if (!this.stepSize) {
+            this.stepSize = parseInt(getComputedStyle(this.blueprintNode).getPropertyValue('--ueb-grid-snap'));
+        }
+        // Get the current mouse position
+        this.mousePosition = this.snapToGrid(x, y);
+        // Attach the listeners to `document`
+        document.addEventListener('mousemove', this.mouseMoveHandler);
+        document.addEventListener('mouseup', this.mouseUpHandler);
+    }
+}
+
+class UEBlueprintDragScroll extends UEBlueprintDrag {
+    constructor(scrolledEntity, options) {
+        super(scrolledEntity, options);
+        this.minZoom = options?.minZoom ?? -12;
+        let self = this;
+        this.mouseMoveHandler = function (e) {
+            let mousePosition = self.snapToGrid(e.clientX, e.clientY);
+
+            // How far the mouse has been moved
+            const dx = mousePosition[0] - self.mousePosition[0];
+            const dy = mousePosition[1] - self.mousePosition[1];
+
+            self.blueprintNode.scrollDelta([-dx, -dy]);
+
+            // Reassign the position of mouse
+            self.mousePosition = mousePosition;
+        };
+        this.mouseWheelHandler = function (e) {
+            let zoomLevel = self.blueprintNode.getZoom();
+            zoomLevel -= Math.round(e.deltaY / 50);
+            self.blueprintNode.setZoom(zoomLevel, [e.offsetX, e.offsetY]);
+
+        };
+        this.blueprintNode.getGridDOMElement().addEventListener('wheel', this.mouseWheelHandler);
+        this.blueprintNode.getGridDOMElement().addEventListener('wheel', e => e.preventDefault());
+        this.blueprintNode.getGridDOMElement().parentElement.addEventListener('wheel', e => e.preventDefault());
+    }
+
+    expandAndTranslate(x, y) {
+        this.blueprintNode.expand(x, y);
+        this.blueprintNode.translate(-x, -y);
+    }
+
+}
+
+class UEBlueprint extends HTMLElement {
+
+    header() {
+        return `
+            <div class="ueb-viewport-header">
+                <div class="ueb-viewport-zoom">1:1</div>
+            </div>
+        `
+    }
+
+    overlay() {
+        return `
+            <div class="ueb-viewport-overlay"></div>
+        `
+    }
+
+    viewport() {
+        return `
+            <div class="ueb-viewport-body">
+                <div class="ueb-grid"
+                    style="--ueb-additional-x:${this.additional[0]}; --ueb-additional-y:${this.additional[1]}; --ueb-translate-x:${this.translateValue[0]}; --ueb-translate-y:${this.translateValue[1]}">
+                    <div class="ueb-grid-content" data-nodes>
+                    </div>
+                </div>
+            </div>
+        `
+    }
+
+    insertChildren() {
+        this.querySelector('[data-nodes]').append(...this.nodes);
+    }
+
+    static clamp(val, min, max) {
+        return Math.min(Math.max(val, min), max)
+    }
+
+    constructor() {
+        super();
+        this.nodes = new Set();
+        this.expandGridSize = 400;
+        this.gridElement = null;
+        this.viewportElement = null;
+        this.overlayElement = null;
+        this.dragObject = null;
+        this.additional = /*[2 * this.expandGridSize, 2 * this.expandGridSize]*/[0, 0];
+        this.translateValue = /*[this.expandGridSize, this.expandGridSize]*/[0, 0];
+        this.zoom = 0;
+        this.headerElement = null;
+    }
+
+    connectedCallback() {
+        this.classList.add('ueb', `ueb-zoom-${this.zoom}`);
+        let aDiv = document.createElement('div');
+        // Add header
+        aDiv.innerHTML = this.header();
+        this.headerElement = aDiv.firstElementChild;
+        this.appendChild(this.headerElement);
+
+        // Add overlay
+        aDiv.innerHTML = this.overlay();
+        this.overlayElement = aDiv.firstElementChild;
+        this.appendChild(this.overlayElement);
+
+        // Add viewport
+        aDiv.innerHTML = this.viewport();
+        this.viewportElement = aDiv.firstElementChild;
+        this.appendChild(this.viewportElement);
+
+        this.gridElement = this.viewportElement.querySelector('.ueb-grid');
+        this.insertChildren();
+
+        this.dragObject = new UEBlueprintDragScroll(this, {
+            'clickButton': 2,
+            'stepSize': 1
+        });
+    }
+
+    getGridDOMElement() {
+        return this.gridElement
+    }
+
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        this.dragObject.unlistenDOMElement();
+    }
+
+    setScroll(value, smooth = false) {
+        this.scroll = value;
+        if (!smooth) {
+            this.viewportElement.scroll(value[0], value[1]);
+        } else {
+            this.viewportElement.scroll({
+                left: value[0],
+                top: value[1],
+                behavior: 'smooth'
+            });
+        }
+    }
+
+    scrollDelta(delta, smooth = false) {
+        const scrollMax = this.getScrollMax();
+        let currentScroll = this.getScroll();
+        let finalScroll = [
+            currentScroll[0] + delta[0],
+            currentScroll[1] + delta[1]
+        ];
+        let expand = [0, 0];
+        for (let i = 0; i < 2; ++i) {
+            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.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.expandGridSize;
+                }
+            }
+        }
+        if (expand[0] != 0 || expand[1] != 0) {
+            this.seamlessExpand(this.progressiveSnapToGrid(expand[0]), this.progressiveSnapToGrid(expand[1]));
+            currentScroll = this.getScroll();
+            finalScroll = [
+                currentScroll[0] + delta[0],
+                currentScroll[1] + delta[1]
+            ];
+        }
+        this.setScroll(finalScroll, smooth);
+    }
+
+    getScroll() {
+        return [this.viewportElement.scrollLeft, this.viewportElement.scrollTop]
+    }
+
+    scrollCenter() {
+        const scroll = this.getScroll();
+        const offset = [
+            this.translateValue[0] - scroll[0],
+            this.translateValue[1] - scroll[1]
+        ];
+        const targetOffset = this.getViewportSize().map(size => size / 2);
+        const deltaOffset = [
+            offset[0] - targetOffset[0],
+            offset[1] - targetOffset[1]
+        ];
+        this.scrollDelta(deltaOffset, true);
+    }
+
+    getExpandGridSize() {
+        return this.expandGridSize
+    }
+
+    getViewportSize() {
+        return [
+            this.viewportElement.clientWidth,
+            this.viewportElement.clientHeight
+        ]
+    }
+
+    /**
+     * Get the scroll limits
+     * @return {array} The horizonal and vertical maximum scroll limits
+     */
+    getScrollMax() {
+        return [
+            this.viewportElement.scrollWidth - this.viewportElement.clientWidth,
+            this.viewportElement.scrollHeight - this.viewportElement.clientHeight
+        ]
+    }
+
+    /**
+     * Expand the grid, considers the absolute value of params
+     * @param {number} x - Horizontal expansion value
+     * @param {number} y - Vertical expansion value
+     */
+    _expand(x, y) {
+        x = Math.round(Math.abs(x));
+        y = Math.round(Math.abs(y));
+        this.additional = [this.additional[0] + x, this.additional[1] + y];
+        if (this.gridElement) {
+            this.gridElement.style.setProperty('--ueb-additional-x', this.additional[0]);
+            this.gridElement.style.setProperty('--ueb-additional-y', this.additional[1]);
+        }
+    }
+
+    /**
+     * Moves the content of the grid according to the coordinates
+     * @param {number} x - Horizontal translation value
+     * @param {number} y - Vertical translation value
+     */
+    _translate(x, y) {
+        x = Math.round(x);
+        y = Math.round(y);
+        this.translateValue = [this.translateValue[0] + x, this.translateValue[1] + y];
+        if (this.gridElement) {
+            this.gridElement.style.setProperty('--ueb-translate-x', this.translateValue[0]);
+            this.gridElement.style.setProperty('--ueb-translate-y', this.translateValue[1]);
+        }
+    }
+
+    /**
+     * Expand the grind indefinitely, the content will remain into position
+     * @param {number} x - Horizontal expand value (negative means left, positive means right)
+     * @param {number} y - Vertical expand value (negative means top, positive means bottom)
+     */
+    seamlessExpand(x, y) {
+        let scale = this.getScale();
+        let scaledX = x / scale;
+        let scaledY = y / scale;
+        // First expand the grid to contain the additional space
+        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
+        this._translate(scaledX < 0 ? -scaledX : 0, scaledY < 0 ? -scaledY : 0);
+        if (x < 0) {
+            this.viewportElement.scrollLeft -= x;
+        }
+        if (y < 0) {
+            this.viewportElement.scrollTop -= y;
+        }
+    }
+
+    progressiveSnapToGrid(x) {
+        return this.expandGridSize * Math.round(x / this.expandGridSize + 0.5 * Math.sign(x))
+    }
+
+    getZoom() {
+        return this.zoom
+    }
+
+    setZoom(zoom, center) {
+        zoom = this.constructor.clamp(zoom, -12, 0);
+        if (zoom == this.zoom) {
+            return
+        }
+        let initialScale = this.getScale();
+        this.classList.add(`ueb-zoom-${zoom}`);
+        this.classList.remove(`ueb-zoom-${this.zoom}`);
+        this.zoom = zoom;
+        if (center) {
+            let relativeScale = this.getScale() / initialScale;
+            let newCenter = [
+                relativeScale * center[0],
+                relativeScale * center[1]
+            ];
+            this.scrollDelta([
+                (newCenter[0] - center[0]) * initialScale,
+                (newCenter[1] - center[1]) * initialScale
+            ]);
+        }
+    }
+
+    getScale() {
+        return parseFloat(getComputedStyle(this.gridElement).getPropertyValue('--ueb-grid-scale'))
+    }
+
+    addNode(...blueprintNodes) {
+        [...blueprintNodes].reduce((s, e) => s.add(e), this.nodes);
+        let nodesDestination = this.querySelector('[data-nodes]');
+        if (nodesDestination) {
+            nodesDestination.append(...blueprintNodes);
+        }
+    }
+}
+
+customElements.define('u-blueprint', UEBlueprint);
+
+class UEBlueprintDraggableObject extends HTMLElement {
+
+    constructor() {
+        super();
+        this.dragObject = null;
+        this.location = [0, 0];
+    }
+
+    connectedCallback() {
+        this.dragObject = new UEBlueprintDrag(this);
+    }
+
+    disconnectedCallback() {
+        this.dragObject.unlistenDOMElement();
+    }
+
+    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]);
+    }
+
+    addLocation(value) {
+        this.setLocation([this.location[0] + value[0], this.location[1] + value[1]]);
+    }
+
+    getLocation() {
+        return this.location
+    }
+
+}
+
+class UEBlueprintObject extends UEBlueprintDraggableObject {
+    static classInputs = [/*
+        {
+            name: "Input Example",
+            type: 'integer'
+        }
+    */]
+    static classOutputs = [/*
+        {
+            name: "Return Value",
+            type: 'string'
+        }*/
+    ]
+    static classInFlow = false
+    static classOutFlow = false
+    static className = 'Empty node'
+
+    header() {
+        return `
+            <div class="ueb-node-header">
+                <span class="ueb-node-name">
+                    <span class="ueb-node-symbol"></span>
+                    <span class="ueb-node-text">${this.constructor.className}</span>
+                </span>
+            </div>
+        `
+    }
+
+    body() {
+        return `
+            <div class="ueb-node-body">
+                <div class="ueb-node-inputs">
+                    ${this.constructor.classInputs.forEach((input, index) => `
+                    <div class="ueb-node-input ueb-node-value-${input.type}">
+                        <span class="ueb-node-value-icon ${this.inputs[index].connected ? 'ueb-node-value-fill' : ''}"></span>
+                        ${input.name}
+                    </div>
+                    `) ?? ''}
+                </div>
+                <div class="ueb-node-outputs">
+                    ${this.constructor.classOutputs.forEach((output, index) => `
+                    <div class="ueb-node-output ueb-node-value-${output.type}">
+                        ${output.name}
+                        <span class="ueb-node-value-icon ${this.outputs[index].connected ? 'ueb-node-value-fill' : ''}"></span>
+                    </div>
+                    `) ?? ''}
+                </div>
+            </div>
+        `
+    }
+
+    render() {
+        return `
+            <div class="ueb-node-border">
+                <div class="ueb-node-content">
+                    ${this.header()}
+                    ${this.body()}
+                </div>
+            </div>
+`
+    }
+
+    constructor() {
+        super();
+        this.selected = false;
+        this.inputs = this.constructor.classInputs.map(value => {
+            return {
+                connected: null
+            }
+        });
+        this.outputs = this.constructor.classOutputs.map(value => {
+            return {
+                connected: null
+            }
+        });
+    }
+
+    connectedCallback() {
+        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]);
+
+        let aDiv = document.createElement('div');
+        aDiv.innerHTML = this.render();
+        this.appendChild(aDiv.firstElementChild);
+    }
+
+    isSelected() {
+        return this.selected
+    }
+
+    setSelected(value = true) {
+        this.selected = value;
+    }
+}
+
+customElements.define('u-object', UEBlueprintObject);
+
+export { UEBlueprint, UEBlueprintObject };