Past nodes fixed, codestyle

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()