From 846217861b7d30f802abf3403d0e2888818e105c Mon Sep 17 00:00:00 2001 From: barsdeveloper Date: Sun, 27 Mar 2022 13:42:52 +0200 Subject: [PATCH] Additional pin templates type --- dist/ueblueprint.js | 105 ++++++++++++++++++------- js/Configuration.js | 2 +- js/element/LinkElement.js | 4 +- js/element/PinElement.js | 14 +++- js/input/keybaord/IKeyboardShortcut.js | 2 - js/input/mouse/IMouseClickDrag.js | 6 +- js/input/mouse/IMouseWheel.js | 1 - js/input/mouse/MouseCreateLink.js | 2 - js/input/mouse/MouseTracking.js | 2 - js/template/ExecPinTemplate.js | 19 +++++ js/template/ITemplate.js | 10 +-- js/template/LinkMessageTemplate.js | 3 +- js/template/PinTemplate.js | 29 ++++++- js/template/StringPinTemplate.js | 17 ++++ 14 files changed, 159 insertions(+), 57 deletions(-) create mode 100644 js/template/ExecPinTemplate.js create mode 100644 js/template/StringPinTemplate.js diff --git a/dist/ueblueprint.js b/dist/ueblueprint.js index dd66822..2fb3e4e 100755 --- a/dist/ueblueprint.js +++ b/dist/ueblueprint.js @@ -2,7 +2,7 @@ class Configuration { static deleteNodesKeyboardKey = "Delete" static enableZoomIn = ["LeftControl", "RightControl"] // Button to enable more than 0 (1:1) zoom static expandGridSize = 400 - static fontSize = "13px" + static fontSize = "12px" static gridAxisLineColor = "black" static gridLineColor = "#353535" static gridLineWidth = 1 // pixel @@ -138,26 +138,24 @@ class Configuration { */ const html = String.raw; +// @ts-check /** * @typedef {import("../element/IElement").default} IElement */ class ITemplate { /** - * Computes the html content of the target element. - * @param {IElement} entity Element of the graph - * @returns The result html + * @param {IElement} entity */ render(entity) { return "" } /** - * Applies the style to the element. - * @param {IElement} element Element of the graph + * @param {IElement} element */ apply(element) { - // TODO replace with the safer element.setHTML(...) when it will be available + // TODO replace with the safer element.setHTML(...) when it will be availableBreack element.innerHTML = this.render(element); } } @@ -1785,7 +1783,6 @@ class IKeyboardShortcut extends IContext { && wantsAlt(keyEntry) == e.altKey && Configuration.Keys[keyEntry.Key] == e.code )) { - e.preventDefault(); self.fire(); document.removeEventListener("keydown", self.keyDownHandler); document.addEventListener("keyup", self.keyUpHandler); @@ -1803,7 +1800,6 @@ class IKeyboardShortcut extends IContext { || Configuration.Keys[keyEntry.Key] == e.code )) { - e.preventDefault(); self.unfire(); document.removeEventListener("keyup", this.keyUpHandler); document.addEventListener("keydown", this.keyDownHandler); @@ -1887,7 +1883,6 @@ class IMouseWheel extends IPointing { let self = this; this.#mouseWheelHandler = e => { - e.preventDefault(); const location = self.locationFromEvent(e); self.wheel(Math.sign(e.deltaY), location); }; @@ -2174,8 +2169,8 @@ class LinkElement extends IElement { destinationLocation = [0, 0] /** - * @param {?PinElement} source - * @param {?PinElement} destination + * @param {PinElement} source + * @param {PinElement} destination */ constructor(source, destination) { super({}, new LinkTemplate()); @@ -2397,7 +2392,6 @@ class IMouseClickDrag extends IPointing { case self.clickButton: // Either doesn't matter or consider the click only when clicking on the parent, not descandants if (self.looseTarget || e.target == e.currentTarget) { - e.preventDefault(); if (this.consumeClickEvent) { e.stopImmediatePropagation(); // Captured, don't call anyone else } @@ -2417,7 +2411,6 @@ class IMouseClickDrag extends IPointing { }; this.#mouseStartedMovingHandler = e => { - e.preventDefault(); if (this.consumeClickEvent) { e.stopImmediatePropagation(); // Captured, don't call anyone else } @@ -2433,7 +2426,6 @@ class IMouseClickDrag extends IPointing { }; this.#mouseMoveHandler = e => { - e.preventDefault(); if (this.consumeClickEvent) { e.stopImmediatePropagation(); // Captured, don't call anyone else } @@ -2447,7 +2439,6 @@ class IMouseClickDrag extends IPointing { this.#mouseUpHandler = e => { if (!self.exitAnyButton || e.button == self.clickButton) { - e.preventDefault(); if (this.consumeClickEvent) { e.stopImmediatePropagation(); // Captured, don't call anyone else } @@ -2487,9 +2478,7 @@ class IMouseClickDrag extends IPointing { unlistenDOMElement() { super.unlistenDOMElement(); this.target.removeEventListener("mousedown", this.#mouseDownHandler); - if (this.clickButton == 2) { - this.target.removeEventListener("contextmenu", e => e.preventDefault()); - } + if (this.clickButton == 2) ; } /* Subclasses will override the following methods */ @@ -2550,7 +2539,6 @@ class MouseTracking extends IPointing { this.#trackingMouseStolenHandler = e => { if (!self.#mouseTracker) { - e.preventDefault(); this.#mouseTracker = e.detail.tracker; self.unlistenMouseMove(); } @@ -2558,7 +2546,6 @@ class MouseTracking extends IPointing { this.#trackingMouseGaveBackHandler = e => { if (self.#mouseTracker == e.detail.tracker) { - e.preventDefault(); self.#mouseTracker = null; self.listenMouseMove(); } @@ -2719,7 +2706,6 @@ class ISelectableDraggableElement extends IElement { class LinkMessageTemplate extends ITemplate { /** - * Computes the html content of the target element. * @param {LinkMessageElement} linkMessage */ render(linkMessage) { @@ -2841,7 +2827,6 @@ class MouseCreateLink extends IMouseClickDrag { let self = this; this.#mouseenterHandler = e => { if (!self.enteredPin) { - e.preventDefault(); self.linkValid = false; self.enteredPin = e.target; const a = self.enteredPin, b = self.target; @@ -2862,7 +2847,6 @@ class MouseCreateLink extends IMouseClickDrag { }; this.#mouseleaveHandler = e => { if (self.enteredPin == e.target) { - e.preventDefault(); self.enteredPin = null; self.linkValid = false; this.setLinkMessage(LinkMessageElement.placeNode()); @@ -2927,17 +2911,38 @@ class PinTemplate extends ITemplate { render(pin) { if (pin.isInput()) { return html` - - ${sanitizeText(pin.getPinDisplayName())} + + ${this.renderIcon(pin)} + + + ${sanitizeText(pin.getPinDisplayName())} + ${this.renderInput(pin)} + ` } else { return html` - ${sanitizeText(pin.getPinDisplayName())} - + ${sanitizeText(pin.getPinDisplayName())} + + ${this.renderIcon(pin)} + ` } } + /** + * @param {PinElement} pin + */ + renderIcon(pin) { + return '' + } + + /** + * @param {PinElement} pin + */ + renderInput(pin) { + return "" + } + /** * Applies the style to the element. * @param {PinElement} pin element of the graph @@ -2986,6 +2991,38 @@ class PinTemplate extends ITemplate { } } +/** + * @typedef {import("../element/PinElement").default} PinElement + */ +class ExecPinTemplate extends PinTemplate { + + /** + * @param {PinElement} pin + */ + renderIcon(pin) { + return html` + + + + ` + } +} + +/** + * @typedef {import("../element/PinElement").default} PinElement + */ +class StringPinTemplate extends PinTemplate { + + /** + * @param {PinElement} pin + */ + renderInput(pin) { + return html` + + ` + } +} + /** * @typedef {import("./NodeElement").default} NodeElement * @typedef {import("../entity/GuidEntity").default} GuidEntity @@ -2994,6 +3031,11 @@ class PinElement extends IElement { static tagName = "ueb-pin" + static #typeTemplateMap = { + "exec": ExecPinTemplate, + "string": StringPinTemplate, + } + /** @type {NodeElement} */ nodeElement @@ -3004,9 +3046,14 @@ class PinElement extends IElement { #color constructor(entity) { - super(entity, new PinTemplate()); + super( + entity, + new (PinElement.#typeTemplateMap[entity.getType()] ?? PinTemplate)() + ); + /** @type {import("../entity/PinEntity").default} */ this.entity; + /** @type {PinTemplate} */ this.template; } diff --git a/js/Configuration.js b/js/Configuration.js index a1a2be6..f96a805 100755 --- a/js/Configuration.js +++ b/js/Configuration.js @@ -2,7 +2,7 @@ export default class Configuration { static deleteNodesKeyboardKey = "Delete" static enableZoomIn = ["LeftControl", "RightControl"] // Button to enable more than 0 (1:1) zoom static expandGridSize = 400 - static fontSize = "13px" + static fontSize = "12px" static gridAxisLineColor = "black" static gridLineColor = "#353535" static gridLineWidth = 1 // pixel diff --git a/js/element/LinkElement.js b/js/element/LinkElement.js index 9a0d6aa..61418b7 100644 --- a/js/element/LinkElement.js +++ b/js/element/LinkElement.js @@ -25,8 +25,8 @@ export default class LinkElement extends IElement { destinationLocation = [0, 0] /** - * @param {?PinElement} source - * @param {?PinElement} destination + * @param {PinElement} source + * @param {PinElement} destination */ constructor(source, destination) { super({}, new LinkTemplate()) diff --git a/js/element/PinElement.js b/js/element/PinElement.js index 0d216ee..08b97b5 100644 --- a/js/element/PinElement.js +++ b/js/element/PinElement.js @@ -1,6 +1,8 @@ import IElement from "./IElement" import MouseCreateLink from "../input/mouse/MouseCreateLink" import PinTemplate from "../template/PinTemplate" +import ExecPinTemplate from "../template/ExecPinTemplate" +import StringPinTemplate from "../template/StringPinTemplate" /** * @typedef {import("./NodeElement").default} NodeElement @@ -10,6 +12,11 @@ export default class PinElement extends IElement { static tagName = "ueb-pin" + static #typeTemplateMap = { + "exec": ExecPinTemplate, + "string": StringPinTemplate, + } + /** @type {NodeElement} */ nodeElement @@ -20,9 +27,14 @@ export default class PinElement extends IElement { #color constructor(entity) { - super(entity, new PinTemplate()) + super( + entity, + new (PinElement.#typeTemplateMap[entity.getType()] ?? PinTemplate)() + ) + /** @type {import("../entity/PinEntity").default} */ this.entity + /** @type {PinTemplate} */ this.template } diff --git a/js/input/keybaord/IKeyboardShortcut.js b/js/input/keybaord/IKeyboardShortcut.js index 964f7d4..4d674ec 100644 --- a/js/input/keybaord/IKeyboardShortcut.js +++ b/js/input/keybaord/IKeyboardShortcut.js @@ -44,7 +44,6 @@ export default class IKeyboardShortcut extends IContext { && wantsAlt(keyEntry) == e.altKey && Configuration.Keys[keyEntry.Key] == e.code )) { - e.preventDefault() self.fire() document.removeEventListener("keydown", self.keyDownHandler) document.addEventListener("keyup", self.keyUpHandler) @@ -62,7 +61,6 @@ export default class IKeyboardShortcut extends IContext { || Configuration.Keys[keyEntry.Key] == e.code )) { - e.preventDefault() self.unfire() document.removeEventListener("keyup", this.keyUpHandler) document.addEventListener("keydown", this.keyDownHandler) diff --git a/js/input/mouse/IMouseClickDrag.js b/js/input/mouse/IMouseClickDrag.js index 64b691a..111465c 100644 --- a/js/input/mouse/IMouseClickDrag.js +++ b/js/input/mouse/IMouseClickDrag.js @@ -40,7 +40,6 @@ export default class IMouseClickDrag extends IPointing { case self.clickButton: // Either doesn't matter or consider the click only when clicking on the parent, not descandants if (self.looseTarget || e.target == e.currentTarget) { - e.preventDefault() if (this.consumeClickEvent) { e.stopImmediatePropagation() // Captured, don't call anyone else } @@ -60,7 +59,6 @@ export default class IMouseClickDrag extends IPointing { } this.#mouseStartedMovingHandler = e => { - e.preventDefault() if (this.consumeClickEvent) { e.stopImmediatePropagation() // Captured, don't call anyone else } @@ -76,7 +74,6 @@ export default class IMouseClickDrag extends IPointing { } this.#mouseMoveHandler = e => { - e.preventDefault() if (this.consumeClickEvent) { e.stopImmediatePropagation() // Captured, don't call anyone else } @@ -90,7 +87,6 @@ export default class IMouseClickDrag extends IPointing { this.#mouseUpHandler = e => { if (!self.exitAnyButton || e.button == self.clickButton) { - e.preventDefault() if (this.consumeClickEvent) { e.stopImmediatePropagation() // Captured, don't call anyone else } @@ -131,7 +127,7 @@ export default class IMouseClickDrag extends IPointing { super.unlistenDOMElement() this.target.removeEventListener("mousedown", this.#mouseDownHandler) if (this.clickButton == 2) { - this.target.removeEventListener("contextmenu", e => e.preventDefault()) + //this.target.removeEventListener("contextmenu", e => e.preventDefault()) } } diff --git a/js/input/mouse/IMouseWheel.js b/js/input/mouse/IMouseWheel.js index d520ea9..e0348dc 100644 --- a/js/input/mouse/IMouseWheel.js +++ b/js/input/mouse/IMouseWheel.js @@ -20,7 +20,6 @@ export default class IMouseWheel extends IPointing { let self = this this.#mouseWheelHandler = e => { - e.preventDefault() const location = self.locationFromEvent(e) self.wheel(Math.sign(e.deltaY), location) } diff --git a/js/input/mouse/MouseCreateLink.js b/js/input/mouse/MouseCreateLink.js index 7ad5abe..df717c1 100755 --- a/js/input/mouse/MouseCreateLink.js +++ b/js/input/mouse/MouseCreateLink.js @@ -33,7 +33,6 @@ export default class MouseCreateLink extends IMouseClickDrag { let self = this this.#mouseenterHandler = e => { if (!self.enteredPin) { - e.preventDefault() self.linkValid = false self.enteredPin = e.target const a = self.enteredPin, b = self.target @@ -54,7 +53,6 @@ export default class MouseCreateLink extends IMouseClickDrag { } this.#mouseleaveHandler = e => { if (self.enteredPin == e.target) { - e.preventDefault() self.enteredPin = null self.linkValid = false this.setLinkMessage(LinkMessageElement.placeNode()) diff --git a/js/input/mouse/MouseTracking.js b/js/input/mouse/MouseTracking.js index 35a546a..2f0bd14 100755 --- a/js/input/mouse/MouseTracking.js +++ b/js/input/mouse/MouseTracking.js @@ -27,7 +27,6 @@ export default class MouseTracking extends IPointing { this.#trackingMouseStolenHandler = e => { if (!self.#mouseTracker) { - e.preventDefault() this.#mouseTracker = e.detail.tracker self.unlistenMouseMove() } @@ -35,7 +34,6 @@ export default class MouseTracking extends IPointing { this.#trackingMouseGaveBackHandler = e => { if (self.#mouseTracker == e.detail.tracker) { - e.preventDefault() self.#mouseTracker = null self.listenMouseMove() } diff --git a/js/template/ExecPinTemplate.js b/js/template/ExecPinTemplate.js new file mode 100644 index 0000000..c584134 --- /dev/null +++ b/js/template/ExecPinTemplate.js @@ -0,0 +1,19 @@ +import html from "./html" +import PinTemplate from "./PinTemplate" + +/** + * @typedef {import("../element/PinElement").default} PinElement + */ +export default class ExecPinTemplate extends PinTemplate { + + /** + * @param {PinElement} pin + */ + renderIcon(pin) { + return html` + + + + ` + } +} diff --git a/js/template/ITemplate.js b/js/template/ITemplate.js index 4ced7c3..558bee7 100644 --- a/js/template/ITemplate.js +++ b/js/template/ITemplate.js @@ -1,23 +1,21 @@ +// @ts-check /** * @typedef {import("../element/IElement").default} IElement */ export default class ITemplate { /** - * Computes the html content of the target element. - * @param {IElement} entity Element of the graph - * @returns The result html + * @param {IElement} entity */ render(entity) { return "" } /** - * Applies the style to the element. - * @param {IElement} element Element of the graph + * @param {IElement} element */ apply(element) { - // TODO replace with the safer element.setHTML(...) when it will be available + // TODO replace with the safer element.setHTML(...) when it will be availableBreack element.innerHTML = this.render(element) } } diff --git a/js/template/LinkMessageTemplate.js b/js/template/LinkMessageTemplate.js index ef71359..578f866 100644 --- a/js/template/LinkMessageTemplate.js +++ b/js/template/LinkMessageTemplate.js @@ -9,7 +9,6 @@ import sanitizeText from "./sanitizeText" export default class LinkMessageTemplate extends ITemplate { /** - * Computes the html content of the target element. * @param {LinkMessageElement} linkMessage */ render(linkMessage) { @@ -24,7 +23,7 @@ export default class LinkMessageTemplate extends ITemplate { * @param {LinkMessageElement} linkMessage */ apply(linkMessage) { - super.apply(linkMessage) + const a = super.apply(linkMessage) const linkMessageSetup = _ => linkMessage.querySelector(".ueb-link-message").innerText = linkMessage.message( linkMessage.linkElement.getSourcePin(), linkMessage.linkElement.getDestinationPin() diff --git a/js/template/PinTemplate.js b/js/template/PinTemplate.js index 0769ca7..5cdf5f7 100755 --- a/js/template/PinTemplate.js +++ b/js/template/PinTemplate.js @@ -18,17 +18,38 @@ export default class PinTemplate extends ITemplate { render(pin) { if (pin.isInput()) { return html` - - ${sanitizeText(pin.getPinDisplayName())} + + ${this.renderIcon(pin)} + + + ${sanitizeText(pin.getPinDisplayName())} + ${this.renderInput(pin)} + ` } else { return html` - ${sanitizeText(pin.getPinDisplayName())} - + ${sanitizeText(pin.getPinDisplayName())} + + ${this.renderIcon(pin)} + ` } } + /** + * @param {PinElement} pin + */ + renderIcon(pin) { + return '' + } + + /** + * @param {PinElement} pin + */ + renderInput(pin) { + return "" + } + /** * Applies the style to the element. * @param {PinElement} pin element of the graph diff --git a/js/template/StringPinTemplate.js b/js/template/StringPinTemplate.js new file mode 100644 index 0000000..5a67759 --- /dev/null +++ b/js/template/StringPinTemplate.js @@ -0,0 +1,17 @@ +import html from "./html" +import PinTemplate from "./PinTemplate" + +/** + * @typedef {import("../element/PinElement").default} PinElement + */ +export default class StringPinTemplate extends PinTemplate { + + /** + * @param {PinElement} pin + */ + renderInput(pin) { + return html` + + ` + } +}