Past nodes fixed, codestyle

js/Blueprint.js

@@ -1,13 +1,14 @@
+import BlueprintData from "./BlueprintData"
 import BlueprintTemplate from "./template/BlueprintTemplate"
 import DragScroll from "./input/DragScroll"
 import GraphElement from "./graph/GraphElement"
 import GraphSelector from "./graph/GraphSelector"
+import MouseTracking from "./input/MouseTracking"
+import Paste from "./input/Paste"
 import Select from "./input/Select"
+import Unfocus from "./input/Unfocus"
 import Utility from "./Utility"
 import Zoom from "./input/Zoom"
-import BlueprintData from "./BlueprintData"
-import Paste from "./input/Paste"
-import Unfocus from "./input/Unfocus"
 
 /** @typedef {import("./graph/GraphNode").default} GraphNode */
 export default class Blueprint extends GraphElement {
@@ -68,6 +69,7 @@ export default class Blueprint extends GraphElement {
         this.nodesContainerElement.append(this.selectorElement)
         this.querySelector('[data-nodes]').append(...this.entity.nodes)
 
+
         this.pasteObject = new Paste(this.getGridDOMElement(), this)
 
         this.dragObject = new DragScroll(this.getGridDOMElement(), this, {
@@ -87,6 +89,7 @@ export default class Blueprint extends GraphElement {
         })
 
         this.unfocusObject = new Unfocus(this.getGridDOMElement(), this)
+        this.mouseTrackingObject = new MouseTracking(this.getGridDOMElement(), this)
     }
 
     getGridDOMElement() {
@@ -95,6 +98,7 @@ export default class Blueprint extends GraphElement {
 
     disconnectedCallback() {
         super.disconnectedCallback()
+        setSelected(false)
         this.dragObject.unlistenDOMElement()
         this.selectObject.unlistenDOMElement()
         this.pasteObject.unlistenDOMElement()

js/BlueprintData.js

@@ -5,9 +5,11 @@ export default class BlueprintData {
         /** @type {GraphNode[]}" */
         this.nodes = new Array()
         this.expandGridSize = 400
-        /** @type {Array<number>} */
+        /** @type {number[]} */
         this.additional = /*[2 * this.expandGridSize, 2 * this.expandGridSize]*/[0, 0]
-        /** @type {Array<number>} */
+        /** @type {number[]} */
         this.translateValue = /*[this.expandGridSize, this.expandGridSize]*/[0, 0]
+        /** @type {number[]} */
+        this.mousePosition = [0, 0]
     }
 }

js/Utility.js

@@ -9,7 +9,6 @@ export default class Utility {
         return getComputedStyle(element).getPropertyValue('--ueb-scale')
     }
 
-
     /**
      * Sets a value in an object
      * @param {String[]} keys The chained keys to access from object in order to set the value
@@ -33,7 +32,6 @@ export default class Utility {
         return false
     }
 
-
     /**
      * Gets a value from an object, gives defaultValue in case of failure
      * @param {Object} source Object holding the data 

js/entity/Entity.js

@@ -2,6 +2,7 @@ import TypeInitialization from "./TypeInitialization"
 import Utility from "../Utility"
 
 export default class Entity {
+
     constructor(options = {}) {
         /**
          * 

js/entity/LocalizedTextEntity.js

@@ -15,5 +15,4 @@ export default class LocalizedTextEntity extends Entity {
     toString() {
         "NSLOCTEXT(" + `"${this.namespace}"` + ", " + `"${this.key}"` + ", " + `"${this.value}"` + ")"
     }
-
 }

js/entity/primitive/Primitive.js

@@ -1,4 +1,5 @@
 export default class Primitive {
+
     toString() {
         return "Unimplemented for " + this.constructor.name
     }

js/graph/GraphElement.js

@@ -1,4 +1,5 @@
 export default class GraphElement extends HTMLElement {
+
     /**
      * 
      * @param {import("../template/Template").default} template The template to render this node

js/graph/GraphNode.js

@@ -1,7 +1,7 @@
-import ObjectEntity from "../entity/ObjectEntity"
-import SerializerFactory from "../serialization/SerializerFactory"
 import NodeTemplate from "../template/NodeTemplate"
+import ObjectEntity from "../entity/ObjectEntity"
 import SelectableDraggable from "./SelectableDraggable"
+import SerializerFactory from "../serialization/SerializerFactory"
 
 export default class GraphNode extends SelectableDraggable {
 
@@ -10,11 +10,16 @@ export default class GraphNode extends SelectableDraggable {
         return new GraphNode(entity)
     }
 
+    /**
+     * 
+     * @param {ObjectEntity} entity 
+     */
     constructor(entity) {
         super(entity, new NodeTemplate())
         this.graphNodeName = 'n/a'
         this.inputs = []
         this.outputs = []
+        super.setLocation([this.entity.NodePosX, this.entity.NodePosY])
     }
 
     connectedCallback() {
@@ -27,6 +32,12 @@ export default class GraphNode extends SelectableDraggable {
         this.style.setProperty('--ueb-position-x', this.location[0])
         this.style.setProperty('--ueb-position-y', this.location[1])
     }
+
+    setLocation(value = [0, 0]) {
+        this.entity.NodePosX = value[0]
+        this.entity.NodePosY = value[1]
+        super.setLocation(value)
+    }
 }
 
 customElements.define('u-node', GraphNode)

js/graph/SelectableDraggable.js

@@ -66,5 +66,4 @@ export default class SelectableDraggable extends GraphElement {
             this.blueprint.removeEventListener('uDragSelected', this.dragHandler)
         }
     }
-
 }

js/input/Context.js

@@ -8,16 +8,21 @@ export default class Context {
         this.options = options
         if (options?.wantsFocusCallback ?? false) {
             let self = this
-            this.blueprint.addEventListener("blueprintfocus", _ => self.blueprintFocused())
-            this.blueprint.addEventListener("blueprintunfocus", _ => self.blueprintUnfocused())
+            this.blueprintfocusHandler = _ => self.blueprintFocused()
+            this.blueprintunfocusHandler = _ => self.blueprintUnfocused()
+            this.blueprint.addEventListener("blueprintfocus", this.blueprintfocusHandler)
+            this.blueprint.addEventListener("blueprintunfocus", this.blueprintunfocusHandler)
         }
     }
 
+    unlistenDOMElement() {
+        this.blueprint.removeEventListener("blueprintfocus", this.blueprintfocusHandler)
+        this.blueprint.removeEventListener("blueprintunfocus", this.blueprintunfocusHandler)
+    }
+
     blueprintFocused() {
-        console.log("focused")
     }
 
     blueprintUnfocused() {
     }
-
 }

js/input/DragScroll.js

@@ -5,5 +5,4 @@ export default class DragScroll extends MouseClickDrag {
     dragTo(location, movement) {
         this.blueprint.scrollDelta([-movement[0], -movement[1]])
     }
-
 }

js/input/KeyboardShortcut.js

@@ -1,46 +1,41 @@
 import Context from "./Context"
-import Utility from "../Utility"
 
 export default class KeyboardShortcut extends Context {
 
     constructor(target, blueprint, options) {
+        options.wantsFocusCallback = true
         super(target, blueprint, options)
-        /** @type {String[]} */
-        this.keys = this.options?.keys ?? []
-        /** @type Numeric */
-        this.currentKey = 0
 
+        /** @type {String[]} */
+        this.key = this.options.key
+        this.ctrlKey = options.ctrlKey ?? false
+        this.shiftKey = options.shiftKey ?? false
+        this.altKey = options.altKey ?? false
+        this.metaKey = options.metaKey ?? false
 
         let self = this
         this.keyDownHandler = e => {
             e.preventDefault()
-            if (Utility.equals(e.keys[self.currentKey], e.key)) {
-                if (++self.currentKey == this.keys.length) {
-                    self.fire()
-                }
+            if (
+                e.code == self.key
+                && e.ctrlKey === self.ctrlKey
+                && e.shiftKey === self.shiftKey
+                && e.altKey === self.altKey
+                && e.metaKey === self.metaKey
+            ) {
+                self.fire()
             }
         }
-        this.keyUpHandler = e => {
-            e.preventDefault()
-            for (let i = 0; i < self.currentKey; ++i) {
-                if (Utility.equals(e.keys[self.currentKey], e.key)) {
-                    self.currentKey = i
-                    break
-                }
-            }
-        }
-        if (this.keys.length > 0) {
-            this.target.addEventListener("keydown", this.keyDownHandler)
-            this.target.addEventListener("keyup", this.keyUpHandler)
-        }
     }
 
-    unlistenDOMElement() {
-        this.target.removeEventListener('keydown', this.keyDownHandler)
-        this.target.removeEventListener('keyup', this.keyUpHandler)
+    blueprintFocused() {
+        document.addEventListener('keydown', this.keyDownHandler)
+    }
+
+    blueprintUnfocused() {
+        document.removeEventListener('keydown', this.keyDownHandler)
     }
 
     fire() {
     }
-
 }

js/input/MouseClickDrag.js

@@ -13,6 +13,7 @@ export default class MouseClickDrag extends Pointing {
         this.looseTarget = options?.looseTarget ?? false
         this.started = false
         this.clickedPosition = [0, 0]
+
         const movementListenedElement = this.moveEverywhere ? document.documentElement : this.movementSpace
         let self = this
 
@@ -81,10 +82,11 @@ export default class MouseClickDrag extends Pointing {
     }
 
     unlistenDOMElement() {
+        super.unlistenDOMElement()
         this.target.removeEventListener('mousedown', this.mouseDownHandler)
         if (this.clickButton == 2) {
             this.target.removeEventListener('contextmenu', this.preventDefault)
-        }
+        } blueprintunfocusHandler
     }
 
     /* Subclasses will override the following methods */

js/input/MouseTracking.js

@@ -0,0 +1,22 @@
+import Pointing from "./Pointing"
+
+export default class MouseTracking extends Pointing {
+
+    constructor(target, blueprint, options = {}) {
+        options.wantsFocusCallback = true
+        super(target, blueprint, options)
+
+        let self = this
+        this.mousemoveHandler = e => {
+            self.blueprint.entity.mousePosition = self.getLocation(e)
+        }
+    }
+
+    blueprintFocused() {
+        this.target.addEventListener("mousemove", this.mousemoveHandler)
+    }
+
+    blueprintUnfocused() {
+        this.target.removeEventListener("mousemove", this.mousemoveHandler)
+    }
+}

js/input/Paste.js

@@ -1,18 +1,41 @@
 import GraphNode from "../graph/GraphNode"
-import KeyboardShortcut from "./KeyboardShortcut"
+import ObjectSerializer from "../serialization/ObjectSerializer"
+import Context from "./Context"
 
-export default class Paste extends KeyboardShortcut {
+export default class Paste extends Context {
 
-    constructor(target, blueprint) {
-        super(target, blueprint, {
-            keys: ["Control", "C"]
-        })
+    constructor(target, blueprint, options = {}) {
+        options.wantsFocusCallback = true
+        super(target, blueprint, options)
+
+        this.serializer = new ObjectSerializer()
+
+        let self = this
+        this.pasteHandle = e => self.pasted(e.clipboardData.getData("Text"))
     }
 
-    fire() {
-        let value = navigator.clipboard.readText()
-        let nodes = this.serializer.readMultiple(value).map(entity => new GraphNode(entity))
+    blueprintFocused() {
+        document.body.addEventListener("paste", this.pasteHandle)
+    }
+
+    blueprintUnfocused() {
+        document.body.removeEventListener("paste", this.pasteHandle)
+    }
+
+    pasted(value) {
+        let top = Number.MAX_SAFE_INTEGER
+        let left = Number.MAX_SAFE_INTEGER
+        let nodes = this.serializer.readMultiple(value).map(entity => {
+            let node = new GraphNode(entity)
+            top = Math.min(top, node.location[1])
+            left = Math.min(left, node.location[0])
+            return node
+        })
+        let mousePosition = this.blueprint.entity.mousePosition
+        nodes.forEach(node => {
+            node.location[0] += mousePosition[0] - left
+            node.location[1] += mousePosition[1] - top
+        })
         this.blueprint.addNode(...nodes)
     }
-
 }

js/input/Pointing.js

@@ -8,6 +8,11 @@ export default class Pointing extends Context {
         this.movementSpace = this.blueprint?.getGridDOMElement() ?? document.documentElement
     }
 
+    /**
+     * 
+     * @param {MouseEvent} mouseEvent 
+     * @returns 
+     */
     getLocation(mouseEvent) {
         const scaleCorrection = 1 / Utility.getScale(this.target)
         const targetOffset = this.movementSpace.getBoundingClientRect()

js/serialization/Serializer.js

@@ -6,7 +6,6 @@ import SerializerFactory from "./SerializerFactory"
 import TypeInitialization from "../entity/TypeInitialization"
 import Utility from "../Utility"
 
-
 export default class Serializer {
 
     static grammar = Parsimmon.createLanguage(new Grammar())

js/serialization/SerializerFactory.js

@@ -1,6 +1,5 @@
 import Utility from "../Utility"
 
-
 export default class SerializerFactory {
 
     static #serializers = new Map()