Move inputs to templates

js/Blueprint.js

@@ -2,21 +2,11 @@
 
 import BlueprintTemplate from "./template/BlueprintTemplate"
 import Configuration from "./Configuration"
-import Copy from "./input/common/Copy"
 import IElement from "./element/IElement"
-import KeyboardCanc from "./input/keybaord/KeyboardCanc"
-import KeyboardEnableZoom from "./input/keybaord/KeyboardEnableZoom"
-import KeyboardSelectAll from "./input/keybaord/KeyboardSelectAll"
 import LinkElement from "./element/LinkElement"
-import MouseScrollGraph from "./input/mouse/MouseScrollGraph"
-import MouseTracking from "./input/mouse/MouseTracking"
 import NodeElement from "./element/NodeElement"
-import Paste from "./input/common/Paste"
-import Select from "./input/mouse/Select"
 import SelectorElement from "./element/SelectorElement"
-import Unfocus from "./input/mouse/Unfocus"
 import Utility from "./Utility"
-import Zoom from "./input/mouse/Zoom"
 
 /**
  * @typedef {import("./element/PinElement").default} PinElement
@@ -125,33 +115,6 @@ export default class Blueprint extends IElement {
         this.template.applyTranlate(this)
     }
 
-    createInputObjects() {
-        return [
-            new Copy(this.getGridDOMElement(), this),
-            new Paste(this.getGridDOMElement(), this),
-            new KeyboardCanc(this.getGridDOMElement(), this),
-            new KeyboardSelectAll(this.getGridDOMElement(), this),
-            new Zoom(this.getGridDOMElement(), this, {
-                looseTarget: true,
-            }),
-            new Select(this.getGridDOMElement(), this, {
-                clickButton: 0,
-                exitAnyButton: true,
-                looseTarget: true,
-                moveEverywhere: true,
-            }),
-            new MouseScrollGraph(this.getGridDOMElement(), this, {
-                clickButton: 2,
-                exitAnyButton: false,
-                looseTarget: true,
-                moveEverywhere: true,
-            }),
-            new Unfocus(this.getGridDOMElement(), this),
-            new MouseTracking(this.getGridDOMElement(), this),
-            new KeyboardEnableZoom(this.getGridDOMElement(), this),
-        ]
-    }
-
     getGridDOMElement() {
         return this.gridElement
     }

js/element/IElement.js

@@ -61,6 +61,7 @@ export default class IElement extends HTMLElement {
     connectedCallback() {
         this.#blueprint = this.closest("ueb-blueprint")
         this.template.setup(this)
+        this.template.inputSetup(this)
     }
 
     disconnectedCallback() {

js/element/ISelectableDraggableElement.js

@@ -2,7 +2,6 @@
 
 import Configuration from "../Configuration"
 import IElement from "./IElement"
-import MouseMoveNodes from "../input/mouse/MouseMoveNodes"
 import Utility from "../Utility"
 
 /**
@@ -47,14 +46,6 @@ export default class ISelectableDraggableElement extends IElement {
         this.#setSelected(this.selected)
     }
 
-    createInputObjects() {
-        return [
-            new MouseMoveNodes(this, this.blueprint, {
-                looseTarget: true
-            }),
-        ]
-    }
-
     /**
      * @param {Number[]} value 
      */

js/element/PinElement.js

@@ -3,7 +3,6 @@
 import ExecPinTemplate from "../template/ExecPinTemplate"
 import IElement from "./IElement"
 import LinkElement from "./LinkElement"
-import MouseCreateLink from "../input/mouse/MouseCreateLink"
 import PinTemplate from "../template/PinTemplate"
 import StringPinTemplate from "../template/StringPinTemplate"
 
@@ -46,15 +45,6 @@ export default class PinElement extends IElement {
         this.#color = window.getComputedStyle(this).getPropertyValue("--ueb-pin-color")
     }
 
-    createInputObjects() {
-        return [
-            new MouseCreateLink(this.clickableElement, this.blueprint, {
-                moveEverywhere: true,
-                looseTarget: true
-            })
-        ]
-    }
-
     /** @return {GuidEntity} */
     GetPinId() {
         return this.entity.PinId

js/template/BlueprintTemplate.js

@@ -1,10 +1,20 @@
 // @ts-check
 
 import Configuration from "../Configuration"
+import Copy from "../input/common/Copy"
 import html from "./html"
 import ITemplate from "./ITemplate"
+import KeyboardCanc from "../input/keybaord/KeyboardCanc"
+import KeyboardEnableZoom from "../input/keybaord/KeyboardEnableZoom"
+import KeyboardSelectAll from "../input/keybaord/KeyboardSelectAll"
+import MouseScrollGraph from "../input/mouse/MouseScrollGraph"
+import MouseTracking from "../input/mouse/MouseTracking"
+import Paste from "../input/common/Paste"
 import sanitizeText from "./sanitizeText"
+import Select from "../input/mouse/Select"
 import SelectorElement from "../element/SelectorElement"
+import Unfocus from "../input/mouse/Unfocus"
+import Zoom from "../input/mouse/Zoom"
 
 /**
  * @typedef {import("../Blueprint").default} Blueprint
@@ -14,6 +24,36 @@ import SelectorElement from "../element/SelectorElement"
 
 export default class BlueprintTemplate extends ITemplate {
 
+    /**
+     * @param {Blueprint} blueprint
+     */
+    createInputObjects(blueprint) {
+        return [
+            new Copy(blueprint.getGridDOMElement(), blueprint),
+            new Paste(blueprint.getGridDOMElement(), blueprint),
+            new KeyboardCanc(blueprint.getGridDOMElement(), blueprint),
+            new KeyboardSelectAll(blueprint.getGridDOMElement(), blueprint),
+            new Zoom(blueprint.getGridDOMElement(), blueprint, {
+                looseTarget: true,
+            }),
+            new Select(blueprint.getGridDOMElement(), blueprint, {
+                clickButton: 0,
+                exitAnyButton: true,
+                looseTarget: true,
+                moveEverywhere: true,
+            }),
+            new MouseScrollGraph(blueprint.getGridDOMElement(), blueprint, {
+                clickButton: 2,
+                exitAnyButton: false,
+                looseTarget: true,
+                moveEverywhere: true,
+            }),
+            new Unfocus(blueprint.getGridDOMElement(), blueprint),
+            new MouseTracking(blueprint.getGridDOMElement(), blueprint),
+            new KeyboardEnableZoom(blueprint.getGridDOMElement(), blueprint),
+        ]
+    }
+
     /**
      * @param {Blueprint} element
      */

js/template/ITemplate.js

@@ -2,6 +2,7 @@
 
 /**
  * @typedef {import("../element/IElement").default} IElement
+ * @typedef {import("../input/IInput").default} IInput")}
  */
 
 /**
@@ -9,7 +10,7 @@
  */
 export default class ITemplate {
 
-    /** @type {Object[]} */
+    /** @type {IInput[]} */
     inputObjects = []
 
     /**
@@ -25,7 +26,13 @@ export default class ITemplate {
     setup(element) {
         // TODO replace with the safer element.setHTML(...) when it will be availableBreack
         element.innerHTML = this.render(element)
-        this.inputObjects = this.createInputObjects()
+    }
+
+    /**
+     * @param {T} element
+     */
+    inputSetup(element) {
+        this.inputObjects = this.createInputObjects(element)
     }
 
     /**
@@ -35,7 +42,10 @@ export default class ITemplate {
         this.inputObjects.forEach(v => v.unlistenDOMElement())
     }
 
-    createInputObjects() {
-        return []
+    /**
+     * @param {T} element
+     */
+    createInputObjects(element) {
+        return /** @type {IInput[]} */([])
     }
 }

js/template/PinTemplate.js

@@ -2,6 +2,7 @@
 
 import html from "./html"
 import ITemplate from "./ITemplate"
+import MouseCreateLink from "../input/mouse/MouseCreateLink"
 import sanitizeText from "./sanitizeText"
 import Utility from "../Utility"
 
@@ -12,6 +13,19 @@ import Utility from "../Utility"
 
 export default class PinTemplate extends ITemplate {
 
+    /**
+     * @param {PinElement} pin
+     *
+     */
+    createInputObjects(pin) {
+        return [
+            new MouseCreateLink(pin.clickableElement, pin.blueprint, {
+                moveEverywhere: true,
+                looseTarget: true
+            })
+        ]
+    }
+
     hasInput() {
         return false
     }

js/template/SelectableDraggableTemplate.js

@@ -1,5 +1,6 @@
 // @ts-check
 
+import MouseMoveNodes from "../input/mouse/MouseMoveNodes"
 import ITemplate from "./ITemplate"
 import sanitizeText from "./sanitizeText"
 
@@ -7,11 +8,27 @@ import sanitizeText from "./sanitizeText"
  * @typedef {import("../element/ISelectableDraggableElement").default} ISelectableDraggableElement
  */
 
+/**
+ * @extends {ITemplate<ISelectableDraggableElement>}
+ */
 export default class SelectableDraggableTemplate extends ITemplate {
 
     /**
-     * Returns the html elements rendered from this template.
-     * @param {ISelectableDraggableElement} element Element of the graph
+     * @param {ISelectableDraggableElement} element
+     */
+    createInputObjects(element) {
+        return [
+            ...super.createInputObjects(element),
+            ...[
+                new MouseMoveNodes(this, element.blueprint, {
+                    looseTarget: true
+                }),
+            ]
+        ]
+    }
+
+    /**
+     * @param {ISelectableDraggableElement} element
      */
     applyLocation(element) {
         element.style.setProperty("--ueb-position-x", sanitizeText(element.location[0]))
@@ -19,8 +36,7 @@ export default class SelectableDraggableTemplate extends ITemplate {
     }
 
     /**
-     * Returns the html elements rendered from this template.
-     * @param {ISelectableDraggableElement} element Element of the graph
+     * @param {ISelectableDraggableElement} element
      */
     applySelected(element) {
         if (element.selected) {