Blueprint focusable

js/input/Context.js

@@ -0,0 +1,23 @@
+export default class Context {
+
+    constructor(target, blueprint, options) {
+        /** @type {HTMLElement} */
+        this.target = target
+        /** @type {import("../Blueprint").default}" */
+        this.blueprint = blueprint
+        this.options = options
+        if (options?.wantsFocusCallback ?? false) {
+            let self = this
+            this.blueprint.addEventListener("blueprintfocus", _ => self.blueprintFocused())
+            this.blueprint.addEventListener("blueprintunfocus", _ => self.blueprintUnfocused())
+        }
+    }
+
+    blueprintFocused() {
+        console.log("focused")
+    }
+
+    blueprintUnfocused() {
+    }
+
+}

js/input/Drag.js

@@ -1,6 +1,7 @@
 import MouseClickDrag from "./MouseClickDrag"
 
 export default class Drag extends MouseClickDrag {
+
     constructor(target, blueprint, options) {
         super(target, blueprint, options)
         this.stepSize = parseInt(options?.stepSize)
@@ -33,7 +34,7 @@ export default class Drag extends MouseClickDrag {
             return
         }
 
-        this.target.dragDispatch(d)
+        this.target.dispatchDragEvent(d)
 
         // Reassign the position of mouse
         this.mousePosition = mousePosition

js/input/KeyboardShortcut.js

@@ -0,0 +1,46 @@
+import Context from "./Context"
+import Utility from "../Utility"
+
+export default class KeyboardShortcut extends Context {
+
+    constructor(target, blueprint, options) {
+        super(target, blueprint, options)
+        /** @type {String[]} */
+        this.keys = this.options?.keys ?? []
+        /** @type Numeric */
+        this.currentKey = 0
+
+
+        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()
+                }
+            }
+        }
+        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)
+    }
+
+    fire() {
+    }
+
+}

js/input/MouseClickDrag.js

@@ -4,6 +4,7 @@ import Pointing from "./Pointing"
  * This class manages the ui gesture of mouse click and drag. Tha actual operations are implemented by the subclasses.
  */
 export default class MouseClickDrag extends Pointing {
+
     constructor(target, blueprint, options) {
         super(target, blueprint, options)
         this.clickButton = options?.clickButton ?? 0
@@ -16,6 +17,7 @@ export default class MouseClickDrag extends Pointing {
         let self = this
 
         this.mouseDownHandler = e => {
+            this.blueprint.setFocused(true)
             switch (e.button) {
                 case self.clickButton:
                     // Either doesn't matter or consider the click only when clicking on the parent, not descandants

js/input/MouseWheel.js

@@ -5,10 +5,11 @@ export default class MouseWheel extends Pointing {
     /**
      * 
      * @param {HTMLElement} target 
-     * @param {import("../Blueprint").Blueprint} blueprint 
+     * @param {import("../Blueprint").default} blueprint 
      * @param {Object} options 
      */
     constructor(target, blueprint, options) {
+        options.wantsFocusCallback = true
         super(target, blueprint, options)
         this.looseTarget = options?.looseTarget ?? true
         let self = this
@@ -18,14 +19,24 @@ export default class MouseWheel extends Pointing {
             const location = self.getLocation(e)
             self.wheel(Math.sign(e.deltaY), location)
         }
+        this.mouseParentWheelHandler = e => e.preventDefault()
 
+        if (this.blueprint.focused) {
+            this.movementSpace.addEventListener('wheel', this.mouseWheelHandler, false)
+        }
+    }
+
+    blueprintFocused() {
         this.movementSpace.addEventListener('wheel', this.mouseWheelHandler, false)
-        // Prevent movement space from being scrolled
-        this.movementSpace.parentElement?.addEventListener('wheel', e => e.preventDefault())
+        this.movementSpace.parentElement?.addEventListener('wheel', this.mouseParentWheelHandler)
+    }
+
+    blueprintUnfocused() {
+        this.movementSpace.removeEventListener('wheel', this.mouseWheelHandler, false)
+        this.movementSpace.parentElement?.removeEventListener('wheel', this.mouseParentWheelHandler)
     }
 
     /* Subclasses will override the following method */
     wheel(variation, location) {
-
     }
 }

js/input/Paste.js

@@ -1,29 +1,18 @@
 import GraphNode from "../graph/GraphNode"
-import ObjectSerializer from "../serialization/ObjectSerializer"
+import KeyboardShortcut from "./KeyboardShortcut"
 
-export default class Paste {
+export default class Paste extends KeyboardShortcut {
 
-    constructor(target, blueprint, options) {
-        /** @type {HTMLElement} */
-        this.target = target
-        /** @type {import("../Blueprint").default}" */
-        this.blueprint = blueprint
-        this.serializer = new ObjectSerializer()
-
-        let self = this
-        this.pasteHandler = e => {
-            self.pasted(e.clipboardData.getData("text"))
-        }
-        this.target.addEventListener("paste", this.pasteHandler)
+    constructor(target, blueprint) {
+        super(target, blueprint, {
+            keys: ["Control", "C"]
+        })
     }
 
-    pasted(value) {
+    fire() {
+        let value = navigator.clipboard.readText()
         let nodes = this.serializer.readMultiple(value).map(entity => new GraphNode(entity))
         this.blueprint.addNode(...nodes)
     }
 
-    unlistenDOMElement() {
-        this.target.removeEventListener("paste", this.pasteHandler)
-    }
-
-}
+}

js/input/Pointing.js

@@ -1,12 +1,10 @@
+import Context from "./Context"
 import Utility from "../Utility"
 
-export default class Pointing {
+export default class Pointing extends Context {
 
     constructor(target, blueprint, options) {
-        /** @type {HTMLElement} */
-        this.target = target
-        /** @type {import("../Blueprint").Blueprint}" */
-        this.blueprint = blueprint
+        super(target, blueprint, options)
         this.movementSpace = this.blueprint?.getGridDOMElement() ?? document.documentElement
     }
 

js/input/Unfocus.js

@@ -0,0 +1,35 @@
+import Context from "./Context";
+
+export default class Unfocus extends Context {
+
+    constructor(target, blueprint, options = {}) {
+        options.wantsFocusCallback = true
+        super(target, blueprint, options)
+
+        let self = this
+        this.clickHandler = e => self.clickedSomewhere(e)
+        if (this.blueprint.focuse) {
+            document.addEventListener("click", this.clickHandler)
+        }
+    }
+
+    /**
+     * 
+     * @param {MouseEvent} e 
+     */
+    clickedSomewhere(e) {
+        // If target is inside the blueprint grid
+        if (e.target.closest("u-blueprint")) {
+            return
+        }
+        this.blueprint.setFocused(false)
+    }
+
+    blueprintFocused() {
+        document.addEventListener("click", this.clickHandler)
+    }
+
+    blueprintUnfocused() {
+        document.removeEventListener("click", this.clickHandler)
+    }
+}

js/input/Zoom.js

@@ -1,6 +1,7 @@
-import MouseWheel from "./MouseWheel";
+import MouseWheel from "./MouseWheel"
 
 export default class Zoom extends MouseWheel {
+
     wheel(variation, location) {
         let zoomLevel = this.blueprint.getZoom()
         zoomLevel -= variation