Input refactoring (#12)

* Fix folder name typo

* Smaller fixes

* Shortcut rename to Shortcuts

* Fix quoted attributes in UE 5.3

* remove KeyboardShortcutAction

* Remove more trivial classes

* Rename IKeyboardShortcut

* Node delete shortcut

js/template/BlueprintTemplate.js

@@ -3,15 +3,13 @@ import Configuration from "../Configuration.js"
 import Copy from "../input/common/Copy.js"
 import Cut from "../input/common/Cut.js"
 import ITemplate from "./ITemplate.js"
-import KeyboardCanc from "../input/keybaord/KeyboardCanc.js"
-import KeyboardEnableZoom from "../input/keybaord/KeyboardEnableZoom.js"
-import KeyboardSelectAll from "../input/keybaord/KeyboardSelectAll.js"
-import KeyboardShortcutAction from "../input/keybaord/KeyboardShortcutAction.js"
+import KeyboardEnableZoom from "../input/keyboard/KeyboardEnableZoom.js"
+import KeyboardShortcut from "../input/keyboard/KeyboardShortcut.js"
 import MouseScrollGraph from "../input/mouse/MouseScrollGraph.js"
 import MouseTracking from "../input/mouse/MouseTracking.js"
 import Paste from "../input/common/Paste.js"
 import Select from "../input/mouse/Select.js"
-import Shortcut from "../Shortcut.js"
+import Shortcuts from "../Shortcuts.js"
 import Unfocus from "../input/mouse/Unfocus.js"
 import Utility from "../Utility.js"
 import Zoom from "../input/mouse/Zoom.js"
@@ -47,6 +45,12 @@ export default class BlueprintTemplate extends ITemplate {
             this.viewportSize[1] = size.blockSize
         }
     })
+    /** @type {Copy} */
+    #copyInputObject
+    /** @type {Paste} */
+    #pasteInputObject
+    /** @type {Zoom} */
+    #zoomInputObject
 
     /** @type {HTMLElement} */ headerElement
     /** @type {HTMLElement} */ overlayElement
@@ -102,34 +106,42 @@ export default class BlueprintTemplate extends ITemplate {
     }
 
     createInputObjects() {
+        const gridElement = this.element.getGridDOMElement()
+        this.#copyInputObject = new Copy(gridElement, this.blueprint)
+        this.#pasteInputObject = new Paste(gridElement, this.blueprint)
+        this.#zoomInputObject = new Zoom(gridElement, this.blueprint)
         return [
             ...super.createInputObjects(),
-            new Copy(this.element.getGridDOMElement(), this.element),
-            new Paste(this.element.getGridDOMElement(), this.element),
-            new Cut(this.element.getGridDOMElement(), this.element),
-            new KeyboardShortcutAction(this.element.getGridDOMElement(), this.element, {
-                activationKeys: Shortcut.duplicateNodes
+            this.#copyInputObject,
+            this.#pasteInputObject,
+            this.#zoomInputObject,
+            new Cut(gridElement, this.blueprint),
+            new KeyboardShortcut(gridElement, this.blueprint, {
+                activationKeys: Shortcuts.duplicateNodes
             }, () =>
                 this.blueprint.template.getPasteInputObject().pasted(
                     this.blueprint.template.getCopyInputObject().copied()
                 )
             ),
-            new KeyboardCanc(this.element.getGridDOMElement(), this.element),
-            new KeyboardSelectAll(this.element.getGridDOMElement(), this.element),
-            new Zoom(this.element.getGridDOMElement(), this.element),
-            new Select(this.element.getGridDOMElement(), this.element, {
+            new KeyboardShortcut(gridElement, this.blueprint, {
+                activationKeys: Shortcuts.deleteNodes
+            }, () => this.blueprint.removeGraphElement(...this.blueprint.getNodes(true))),
+            new KeyboardShortcut(gridElement, this.blueprint, {
+                activationKeys: Shortcuts.selectAllNodes
+            }, () => this.blueprint.selectAll()),
+            new Select(gridElement, this.blueprint, {
                 clickButton: Configuration.mouseClickButton,
                 exitAnyButton: true,
                 moveEverywhere: true,
             }),
-            new MouseScrollGraph(this.element.getGridDOMElement(), this.element, {
+            new MouseScrollGraph(gridElement, this.blueprint, {
                 clickButton: Configuration.mouseRightClickButton,
                 exitAnyButton: false,
                 moveEverywhere: true,
             }),
-            new Unfocus(this.element.getGridDOMElement(), this.element),
-            new MouseTracking(this.element.getGridDOMElement(), this.element),
-            new KeyboardEnableZoom(this.element.getGridDOMElement(), this.element),
+            new Unfocus(gridElement, this.blueprint),
+            new MouseTracking(gridElement, this.blueprint),
+            new KeyboardEnableZoom(gridElement, this.blueprint),
         ]
     }
 
@@ -219,11 +231,15 @@ export default class BlueprintTemplate extends ITemplate {
     }
 
     getCopyInputObject() {
-        return this.getInputObject(Copy)
+        return this.#copyInputObject
     }
 
     getPasteInputObject() {
-        return this.getInputObject(Paste)
+        return this.#pasteInputObject
+    }
+
+    getZoomInputObject() {
+        return this.#zoomInputObject
     }
 
     /**

js/template/IDraggableTemplate.js

@@ -1,6 +1,6 @@
 import Configuration from "../Configuration.js"
 import ITemplate from "./ITemplate.js"
-import KeyboardShortcutAction from "../input/keybaord/KeyboardShortcutAction.js"
+import KeyboardShortcut from "../input/keyboard/KeyboardShortcut.js"
 import MouseMoveDraggable from "../input/mouse/MouseMoveDraggable.js"
 
 /** @typedef {import("../element/IDraggableElement.js").default} IDraggableElement */
@@ -25,7 +25,7 @@ export default class IDraggableTemplate extends ITemplate {
         return [
             ...super.createInputObjects(),
             this.createDraggableObject(),
-            new KeyboardShortcutAction(
+            new KeyboardShortcut(
                 this.element,
                 this.blueprint,
                 {

js/template/ITemplate.js

@@ -31,14 +31,6 @@ export default class ITemplate {
         return /** @type {IInput[]} */([])
     }
 
-    /**
-     * @template {IInput} T
-     * @param {new (...any) => T} type
-     */
-    getInputObject(type) {
-        return /** @type {T} */(this.inputObjects.find(object => object.constructor == type))
-    }
-
     setup() {
         this.#inputObjects.forEach(v => v.setup())
     }

js/template/LinkTemplate.js

@@ -2,8 +2,11 @@ import { html, nothing } from "lit"
 import Configuration from "../Configuration.js"
 import ElementFactory from "../element/ElementFactory.js"
 import IFromToPositionedTemplate from "./IFromToPositionedTemplate.js"
+import KeyboardShortcut from "../input/keyboard/KeyboardShortcut.js"
 import KnotEntity from "../entity/objects/KnotEntity.js"
+import MouseClick from "../input/mouse/MouseClick.js"
 import MouseDbClick from "../input/mouse/MouseDbClick.js"
+import Shortcuts from "../Shortcuts.js"
 import Utility from "../Utility.js"
 
 /**
@@ -85,10 +88,11 @@ export default class LinkTemplate extends IFromToPositionedTemplate {
     }
 
     createInputObjects() {
+        const linkArea = this.element.querySelector(".ueb-link-area")
         return [
             ...super.createInputObjects(),
             new MouseDbClick(
-                this.element.querySelector(".ueb-link-area"),
+                linkArea,
                 this.blueprint,
                 undefined,
                 /** @param {[Number, Number]} location */
@@ -97,8 +101,18 @@ export default class LinkTemplate extends IFromToPositionedTemplate {
                     location[1] += Configuration.knotOffset[1]
                     location = Utility.snapToGrid(location[0], location[1], Configuration.gridSize)
                     this.#createKnot(location)
-                }
-            )
+                },
+            ),
+            new MouseClick(
+                linkArea,
+                this.blueprint,
+                {
+                    enablerKey: new KeyboardShortcut(this.blueprint, this.blueprint, {
+                        activationKeys: Shortcuts.enableLinkDelete,
+                    })
+                },
+                () => this.blueprint.removeGraphElement(this.element),
+            ),
         ]
     }
 

js/template/pin/BoolPinTemplate.js

@@ -10,7 +10,7 @@ export default class BoolPinTemplate extends PinTemplate {
     /** @type {HTMLInputElement?} */
     #input
 
-    #onChangeHandler = _ => this.element.setDefaultValue(this.#input.checked)
+    #onChangeHandler = () => this.element.setDefaultValue(this.#input.checked)
 
     /** @param {PropertyValues} changedProperties */
     firstUpdated(changedProperties) {