} */
class LinkTemplate extends IFromToPositionedTemplate {
/**
* Returns a function providing the inverse multiplication y = a / x + q. The value of a and q are calculated using
* the derivative of that function y' = -a / x^2 at the point p (x = p[0] and y = p[1]). This means
* y'(p[0]) = m => -a / p[0]^2 = m => a = -m * p[0]^2. Now, in order to determine q we can use the starting
* function: p[1] = a / p[0] + q => q = p[1] - a / p[0]
* @param {Number} m slope
* @param {Coordinates} p reference point
*/
static decreasingValue(m, p) {
const a = -m * p[0] ** 2;
const q = p[1] - a / p[0];
/** @param {Number} x */
return x => a / x + q
}
/**
* Returns a function providing a clamped line passing through two points. It is clamped after and before the
* points. It is easier explained with the following ascii draw.
* b ______
* /
* /
* /
* ______/ a
*/
static clampedLine(a, b) {
if (a[0] > b[0]) {
const temp = a;
a = b;
b = temp;
}
const m = (b[1] - a[1]) / (b[0] - a[0]);
const q = a[1] - m * a[0];
return x => x < a[0]
? a[1]
: x > b[0]
? b[1]
: m * x + q
}
static c1DecreasingValue = LinkTemplate.decreasingValue(-0.15, [100, 15])
static c2DecreasingValue = LinkTemplate.decreasingValue(-0.05, [500, 130])
static c2Clamped = LinkTemplate.clampedLine([0, 80], [200, 40])
#uniqueId = `ueb-id-${Math.floor(Math.random() * 1E12)}`
/** @param {Coordinates} location */
#createKnot = location => {
const knotEntity = new KnotEntity({}, this.element.source.entity);
const knot = /** @type {NodeElementConstructor} */(ElementFactory.getConstructor("ueb-node"))
.newObject(knotEntity);
knot.setLocation(...this.blueprint.snapToGrid(...location));
const knotTemplate = /** @type {KnotNodeTemplate} */(knot.template);
this.blueprint.addGraphElement(knot); // Important: keep it before changing existing links
const inputPin = this.element.getInputPin();
const outputPin = this.element.getOutputPin();
this.element.source = null;
this.element.destination = null;
const link = /** @type {LinkElementConstructor} */(ElementFactory.getConstructor("ueb-link"))
.newObject(outputPin, knotTemplate.inputPin);
this.blueprint.addGraphElement(link);
this.element.source = knotTemplate.outputPin;
this.element.destination = inputPin;
}
createInputObjects() {
/** @type {HTMLElement} */
const linkArea = this.element.querySelector(".ueb-link-area");
return [
...super.createInputObjects(),
new MouseDbClick(
linkArea,
this.blueprint,
undefined,
/** @param {Coordinates} location */
location => {
location[0] += Configuration.knotOffset[0];
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),
),
]
}
/** @param {PropertyValues} changedProperties */
willUpdate(changedProperties) {
super.willUpdate(changedProperties);
const sourcePin = this.element.source;
const destinationPin = this.element.destination;
if (changedProperties.has("fromX") || changedProperties.has("toX")) {
const from = this.element.fromX;
const to = this.element.toX;
const isSourceAKnot = sourcePin?.nodeElement.getType() == Configuration.paths.knot;
const isDestinationAKnot = destinationPin?.nodeElement.getType() == Configuration.paths.knot;
if (isSourceAKnot && (!destinationPin || isDestinationAKnot)) {
if (sourcePin?.isInput() && to > from + Configuration.distanceThreshold) {
this.element.source = /** @type {KnotNodeTemplate} */(sourcePin.nodeElement.template).outputPin;
} else if (sourcePin?.isOutput() && to < from - Configuration.distanceThreshold) {
this.element.source = /** @type {KnotNodeTemplate} */(sourcePin.nodeElement.template).inputPin;
}
}
if (isDestinationAKnot && (!sourcePin || isSourceAKnot)) {
if (destinationPin?.isInput() && to < from - Configuration.distanceThreshold) {
this.element.destination =
/** @type {KnotNodeTemplate} */(destinationPin.nodeElement.template).outputPin;
} else if (destinationPin?.isOutput() && to > from + Configuration.distanceThreshold) {
this.element.destination =
/** @type {KnotNodeTemplate} */(destinationPin.nodeElement.template).inputPin;
}
}
}
const dx = Math.max(Math.abs(this.element.fromX - this.element.toX), 1);
const dy = Math.max(Math.abs(this.element.fromY - this.element.toY), 1);
const width = Math.max(dx, Configuration.linkMinWidth);
// const height = Math.max(Math.abs(link.fromY - link.toY), 1)
const fillRatio = dx / width;
const xInverted = this.element.originatesFromInput
? this.element.fromX < this.element.toX
: this.element.toX < this.element.fromX;
this.element.startPixels = dx < width // If under minimum width
? (width - dx) / 2 // Start from half the empty space
: 0; // Otherwise start from the beginning
this.element.startPercentage = xInverted ? this.element.startPixels + fillRatio * 100 : this.element.startPixels;
const c1 =
this.element.startPercentage
+ (xInverted
? LinkTemplate.c1DecreasingValue(width)
: 10
)
* fillRatio;
const aspectRatio = dy / Math.max(30, dx);
const c2 =
LinkTemplate.c2Clamped(dx)
* Utility.sigmoidPositive(fillRatio * 1.2 + aspectRatio * 0.5, 1.5, 1.8)
+ this.element.startPercentage;
this.element.svgPathD = Configuration.linkRightSVGPath(this.element.startPercentage, c1, c2);
}
/** @param {PropertyValues} changedProperties */
update(changedProperties) {
super.update(changedProperties);
if (changedProperties.has("originatesFromInput")) {
this.element.style.setProperty("--ueb-from-input", this.element.originatesFromInput ? "1" : "0");
}
const referencePin = this.element.source ?? this.element.destination;
if (referencePin) {
this.element.style.setProperty("--ueb-link-color-rgb", Utility.printLinearColor(referencePin.color));
}
this.element.style.setProperty("--ueb-y-reflected", `${this.element.fromY > this.element.toY ? 1 : 0}`);
this.element.style.setProperty("--ueb-start-percentage", `${Math.round(this.element.startPercentage)}%`);
this.element.style.setProperty("--ueb-link-start", `${Math.round(this.element.startPixels)}`);
}
render() {
return x`
${this.element.linkMessageIcon || this.element.linkMessageText ? x`
${this.element.linkMessageIcon !== A ? x`
${this.element.linkMessageIcon}
` : A}
${this.element.linkMessageText !== A ? x`
${this.element.linkMessageText}
` : A}
` : A}
`
}
}
/** @extends {IFromToPositionedElement} */
class LinkElement extends IFromToPositionedElement {
static properties = {
...super.properties,
dragging: {
type: Boolean,
attribute: "data-dragging",
converter: Utility.booleanConverter,
reflect: true,
},
originatesFromInput: {
type: Boolean,
attribute: false,
},
svgPathD: {
type: String,
attribute: false,
},
linkMessageIcon: {
type: String,
attribute: false,
},
linkMessageText: {
type: String,
attribute: false,
},
}
/** @type {PinElement} */
#source
get source() {
return this.#source
}
set source(pin) {
this.#setPin(pin, false);
}
/** @type {PinElement} */
#destination
get destination() {
return this.#destination
}
set destination(pin) {
this.#setPin(pin, true);
}
#nodeDeleteHandler = () => this.remove()
/** @param {UEBDragEvent} e */
#nodeDragSourceHandler = e => this.addSourceLocation(...e.detail.value)
/** @param {UEBDragEvent} e */
#nodeDragDestinatonHandler = e => this.addDestinationLocation(...e.detail.value)
#nodeReflowSourceHandler = e => this.setSourceLocation()
#nodeReflowDestinatonHandler = e => this.setDestinationLocation()
/** @type {TemplateResult | nothing} */
linkMessageIcon = A
/** @type {TemplateResult | nothing} */
linkMessageText = A
/** @type {SVGPathElement} */
pathElement
constructor() {
super();
this.dragging = false;
this.originatesFromInput = false;
this.startPercentage = 0;
this.svgPathD = "";
this.startPixels = 0;
}
/**
* @param {PinElement} source
* @param {PinElement?} destination
*/
static newObject(source, destination) {
const result = new LinkElement();
result.initialize(source, destination);
return result
}
/**
* @param {PinElement} source
* @param {PinElement?} destination
*/
// @ts-expect-error
initialize(source, destination) {
super.initialize({}, new LinkTemplate());
if (source) {
this.source = source;
if (!destination) {
this.toX = this.fromX;
this.toY = this.fromY;
}
}
if (destination) {
this.destination = destination;
if (!source) {
this.fromX = this.toX;
this.fromY = this.toY;
}
}
}
/**
* @param {PinElement} pin
* @param {Boolean} isDestinationPin
*/
#setPin(pin, isDestinationPin) {
const getCurrentPin = () => isDestinationPin ? this.destination : this.source;
if (getCurrentPin() == pin) {
return
}
if (getCurrentPin()) {
const nodeElement = getCurrentPin().getNodeElement();
nodeElement.removeEventListener(Configuration.removeEventName, this.#nodeDeleteHandler);
nodeElement.removeEventListener(
Configuration.nodeDragEventName,
isDestinationPin ? this.#nodeDragDestinatonHandler : this.#nodeDragSourceHandler
);
nodeElement.removeEventListener(
Configuration.nodeReflowEventName,
isDestinationPin ? this.#nodeReflowDestinatonHandler : this.#nodeReflowSourceHandler
);
this.#unlinkPins();
}
isDestinationPin
? this.#destination = pin
: this.#source = pin;
if (getCurrentPin()) {
const nodeElement = getCurrentPin().getNodeElement();
nodeElement.addEventListener(Configuration.removeEventName, this.#nodeDeleteHandler);
nodeElement.addEventListener(
Configuration.nodeDragEventName,
isDestinationPin ? this.#nodeDragDestinatonHandler : this.#nodeDragSourceHandler
);
nodeElement.addEventListener(
Configuration.nodeReflowEventName,
isDestinationPin ? this.#nodeReflowDestinatonHandler : this.#nodeReflowSourceHandler
);
isDestinationPin
? this.setDestinationLocation()
: (this.setSourceLocation(), this.originatesFromInput = this.source.isInput());
this.#linkPins();
}
}
#linkPins() {
if (this.source && this.destination) {
this.source.linkTo(this.destination);
this.destination.linkTo(this.source);
}
}
#unlinkPins() {
if (this.source && this.destination) {
this.source.unlinkFrom(this.destination, false);
this.destination.unlinkFrom(this.source, false);
}
}
cleanup() {
super.cleanup();
this.#unlinkPins();
this.source = null;
this.destination = null;
}
/** @param {Coordinates} location */
setSourceLocation(location = null, canPostpone = true) {
if (location == null) {
const self = this;
if (canPostpone && (!this.hasUpdated || !this.source.hasUpdated)) {
Promise.all([this.updateComplete, this.source.updateComplete])
.then(() => self.setSourceLocation(null, false));
return
}
location = this.source.template.getLinkLocation();
}
const [x, y] = location;
this.fromX = x;
this.fromY = y;
}
/** @param {Coordinates} location */
setDestinationLocation(location = null, canPostpone = true) {
if (location == null) {
const self = this;
if (canPostpone && (!this.hasUpdated || !this.destination.hasUpdated)) {
Promise.all([this.updateComplete, this.destination.updateComplete])
.then(() => self.setDestinationLocation(null, false));
return
}
location = this.destination.template.getLinkLocation();
}
this.toX = location[0];
this.toY = location[1];
}
getInputPin() {
if (this.source?.isInput()) {
return this.source
}
return this.destination
}
/** @param {PinElement} pin */
setInputPin(pin) {
if (this.source?.isInput()) {
this.source = pin;
}
this.destination = pin;
}
getOutputPin() {
if (this.destination?.isOutput()) {
return this.destination
}
return this.source
}
/** @param {PinElement} pin */
setOutputPin(pin) {
if (this.destination?.isOutput()) {
this.destination = pin;
}
this.source = pin;
}
startDragging() {
this.dragging = true;
}
finishDragging() {
this.dragging = false;
}
removeMessage() {
this.linkMessageIcon = A;
this.linkMessageText = A;
}
setMessageConvertType() {
this.linkMessageIcon = SVGIcon.convert;
this.linkMessageText = x`Convert ${this.source.pinType} to ${this.destination.pinType}.`;
}
setMessageCorrect() {
this.linkMessageIcon = SVGIcon.correct;
this.linkMessageText = A;
}
setMessageReplace() {
this.linkMessageIcon = SVGIcon.correct;
this.linkMessageText = A;
}
setMessageDirectionsIncompatible() {
this.linkMessageIcon = SVGIcon.reject;
this.linkMessageText = x`Directions are not compatbile.`;
}
setMessagePlaceNode() {
this.linkMessageIcon = A;
this.linkMessageText = x`Place a new node.`;
}
setMessageReplaceLink() {
this.linkMessageIcon = SVGIcon.correct;
this.linkMessageText = x`Replace existing input connections.`;
}
setMessageReplaceOutputLink() {
this.linkMessageIcon = SVGIcon.correct;
this.linkMessageText = x`Replace existing output connections.`;
}
setMessageSameNode() {
this.linkMessageIcon = SVGIcon.reject;
this.linkMessageText = x`Both are on the same node.`;
}
/**
* @param {PinElement} a
* @param {PinElement} b
*/
setMessageTypesIncompatible(a, b) {
this.linkMessageIcon = SVGIcon.reject;
this.linkMessageText =
x`${Utility.capitalFirstLetter(a.pinType)} is not compatible with ${Utility.capitalFirstLetter(b.pinType)}.`;
}
}
/**
* @template {IEntity} T
* @template {IDraggableTemplate} U
* @extends {IElement}
*/
class IDraggableElement extends IElement {
static properties = {
...super.properties,
locationX: {
type: Number,
attribute: false,
},
locationY: {
type: Number,
attribute: false,
},
sizeX: {
type: Number,
attribute: false,
},
sizeY: {
type: Number,
attribute: false,
},
}
static dragEventName = Configuration.dragEventName
static dragGeneralEventName = Configuration.dragGeneralEventName
constructor() {
super();
this.locationX = 0;
this.locationY = 0;
this.sizeX = 0;
this.sizeY = 0;
}
computeSizes() {
const bounding = this.getBoundingClientRect();
this.sizeX = this.blueprint.scaleCorrect(bounding.width);
this.sizeY = this.blueprint.scaleCorrect(bounding.height);
}
/** @param {PropertyValues} changedProperties */
firstUpdated(changedProperties) {
super.firstUpdated(changedProperties);
this.computeSizes();
}
/**
* @param {Number} x
* @param {Number} y
*/
setLocation(x, y, acknowledge = true) {
const dx = x - this.locationX;
const dy = y - this.locationY;
this.locationX = x;
this.locationY = y;
if (this.blueprint && acknowledge) {
const dragLocalEvent = new CustomEvent(
/** @type {typeof IDraggableElement} */(this.constructor).dragEventName,
{
detail: {
value: [dx, dy],
},
bubbles: false,
cancelable: true,
}
);
this.dispatchEvent(dragLocalEvent);
}
}
/**
* @param {Number} x
* @param {Number} y
*/
addLocation(x, y, acknowledge = true) {
this.setLocation(this.locationX + x, this.locationY + y, acknowledge);
}
/** @param {Coordinates} value */
acknowledgeDrag(value) {
const dragEvent = new CustomEvent(
/** @type {typeof IDraggableElement} */(this.constructor).dragGeneralEventName,
{
detail: {
value: value
},
bubbles: true,
cancelable: true
}
);
this.dispatchEvent(dragEvent);
}
snapToGrid() {
const snappedLocation = Utility.snapToGrid(this.locationX, this.locationY, Configuration.gridSize);
if (this.locationX != snappedLocation[0] || this.locationY != snappedLocation[1]) {
this.setLocation(snappedLocation[0], snappedLocation[1]);
}
}
topBoundary(justSelectableArea = false) {
return this.template.topBoundary(justSelectableArea)
}
rightBoundary(justSelectableArea = false) {
return this.template.rightBoundary(justSelectableArea)
}
bottomBoundary(justSelectableArea = false) {
return this.template.bottomBoundary(justSelectableArea)
}
leftBoundary(justSelectableArea = false) {
return this.template.leftBoundary(justSelectableArea)
}
}
/**
* @typedef {import("./IPointing.js").Options & {
* clickButton?: Number,
* consumeEvent?: Boolean,
* draggableElement?: HTMLElement,
* exitAnyButton?: Boolean,
* moveEverywhere?: Boolean,
* movementSpace?: HTMLElement,
* repositionOnClick?: Boolean,
* scrollGraphEdge?: Boolean,
* strictTarget?: Boolean,
* stepSize?: Number,
* }} Options
*/
/**
* @template {IElement} T
* @extends {IPointing}
*/
class IMouseClickDrag extends IPointing {
/** @param {MouseEvent} e */
#mouseDownHandler = e => {
this.blueprint.setFocused(true);
switch (e.button) {
case this.options.clickButton:
// Either doesn't matter or consider the click only when clicking on the parent, not descandants
if (!this.options.strictTarget || e.target == e.currentTarget) {
if (this.consumeEvent) {
e.stopImmediatePropagation(); // Captured, don't call anyone else
}
// Attach the listeners
this.#movementListenedElement.addEventListener("mousemove", this.#mouseStartedMovingHandler);
document.addEventListener("mouseup", this.#mouseUpHandler);
this.setLocationFromEvent(e);
this.clickedPosition[0] = this.location[0];
this.clickedPosition[1] = this.location[1];
this.blueprint.mousePosition[0] = this.location[0];
this.blueprint.mousePosition[1] = this.location[1];
if (this.target instanceof IDraggableElement) {
this.clickedOffset = [
this.clickedPosition[0] - this.target.locationX,
this.clickedPosition[1] - this.target.locationY,
];
}
this.clicked(this.clickedPosition);
}
break
default:
if (!this.options.exitAnyButton) {
this.#mouseUpHandler(e);
}
break
}
}
/** @param {MouseEvent} e */
#mouseStartedMovingHandler = e => {
if (this.consumeEvent) {
e.stopImmediatePropagation(); // Captured, don't call anyone else
}
// Delegate from now on to this.#mouseMoveHandler
this.#movementListenedElement.removeEventListener("mousemove", this.#mouseStartedMovingHandler);
this.#movementListenedElement.addEventListener("mousemove", this.#mouseMoveHandler);
// Handler calls e.preventDefault() when it receives the event, this means dispatchEvent returns false
const dragEvent = this.getEvent(Configuration.trackingMouseEventName.begin);
this.#trackingMouse = this.target.dispatchEvent(dragEvent) == false;
this.setLocationFromEvent(e);
// Do actual actions
this.lastLocation = Utility.snapToGrid(this.clickedPosition[0], this.clickedPosition[1], this.stepSize);
this.startDrag(this.location);
this.started = true;
this.#mouseMoveHandler(e);
}
/** @param {MouseEvent} e */
#mouseMoveHandler = e => {
if (this.consumeEvent) {
e.stopImmediatePropagation(); // Captured, don't call anyone else
}
const location = this.setLocationFromEvent(e);
const movement = [e.movementX, e.movementY];
this.dragTo(location, movement);
if (this.#trackingMouse) {
this.blueprint.mousePosition = location;
}
if (this.options.scrollGraphEdge) {
const movementNorm = Math.sqrt(movement[0] * movement[0] + movement[1] * movement[1]);
const threshold = this.blueprint.scaleCorrect(Configuration.edgeScrollThreshold);
const leftThreshold = this.blueprint.template.gridLeftVisibilityBoundary() + threshold;
const rightThreshold = this.blueprint.template.gridRightVisibilityBoundary() - threshold;
let scrollX = 0;
if (location[0] < leftThreshold) {
scrollX = location[0] - leftThreshold;
} else if (location[0] > rightThreshold) {
scrollX = location[0] - rightThreshold;
}
const topThreshold = this.blueprint.template.gridTopVisibilityBoundary() + threshold;
const bottomThreshold = this.blueprint.template.gridBottomVisibilityBoundary() - threshold;
let scrollY = 0;
if (location[1] < topThreshold) {
scrollY = location[1] - topThreshold;
} else if (location[1] > bottomThreshold) {
scrollY = location[1] - bottomThreshold;
}
scrollX = Utility.clamp(this.blueprint.scaleCorrectReverse(scrollX) ** 3 * movementNorm * 0.6, -20, 20);
scrollY = Utility.clamp(this.blueprint.scaleCorrectReverse(scrollY) ** 3 * movementNorm * 0.6, -20, 20);
this.blueprint.scrollDelta(scrollX, scrollY);
}
}
/** @param {MouseEvent} e */
#mouseUpHandler = e => {
if (!this.options.exitAnyButton || e.button == this.options.clickButton) {
if (this.consumeEvent) {
e.stopImmediatePropagation(); // Captured, don't call anyone else
}
// Remove the handlers of "mousemove" and "mouseup"
this.#movementListenedElement.removeEventListener("mousemove", this.#mouseStartedMovingHandler);
this.#movementListenedElement.removeEventListener("mousemove", this.#mouseMoveHandler);
document.removeEventListener("mouseup", this.#mouseUpHandler);
if (this.started) {
this.endDrag();
}
this.unclicked();
if (this.#trackingMouse) {
const dragEvent = this.getEvent(Configuration.trackingMouseEventName.end);
this.target.dispatchEvent(dragEvent);
this.#trackingMouse = false;
}
this.started = false;
}
}
#trackingMouse = false
#movementListenedElement
#draggableElement
get draggableElement() {
return this.#draggableElement
}
clickedOffset = /** @type {Coordinates} */([0, 0])
clickedPosition = /** @type {Coordinates} */([0, 0])
lastLocation = /** @type {Coordinates} */([0, 0])
started = false
stepSize = 1
/**
* @param {T} target
* @param {Blueprint} blueprint
* @param {Options} options
*/
constructor(target, blueprint, options = {}) {
options.clickButton ??= Configuration.mouseClickButton;
options.consumeEvent ??= true;
options.draggableElement ??= target;
options.exitAnyButton ??= true;
options.moveEverywhere ??= false;
options.movementSpace ??= blueprint?.getGridDOMElement();
options.repositionOnClick ??= false;
options.scrollGraphEdge ??= false;
options.strictTarget ??= false;
super(target, blueprint, options);
this.stepSize = Number(options.stepSize ?? Configuration.gridSize);
this.#movementListenedElement = this.options.moveEverywhere ? document.documentElement : this.movementSpace;
this.#draggableElement = /** @type {HTMLElement} */(this.options.draggableElement);
this.listenEvents();
}
listenEvents() {
super.listenEvents();
this.#draggableElement.addEventListener("mousedown", this.#mouseDownHandler);
if (this.options.clickButton === Configuration.mouseRightClickButton) {
this.#draggableElement.addEventListener("contextmenu", e => e.preventDefault());
}
}
unlistenEvents() {
super.unlistenEvents();
this.#draggableElement.removeEventListener("mousedown", this.#mouseDownHandler);
}
getEvent(eventName) {
return new CustomEvent(eventName, {
detail: {
tracker: this
},
bubbles: true,
cancelable: true
})
}
/* Subclasses will override the following methods */
clicked(location) {
}
startDrag(location) {
}
dragTo(location, offset) {
}
endDrag() {
}
unclicked(location) {
}
}
/** @typedef {import("./IMouseClickDrag.js").Options} Options */
/**
* @template {IDraggableElement} T
* @extends {IMouseClickDrag}
*/
class MouseMoveDraggable extends IMouseClickDrag {
/** @param {Coordinates} location */
clicked(location) {
if (this.options.repositionOnClick) {
this.target.setLocation(...(this.stepSize > 1
? Utility.snapToGrid(location[0], location[1], this.stepSize)
: location
));
this.clickedOffset = [0, 0];
}
}
/**
* @param {Coordinates} location
* @param {Coordinates} offset
*/
dragTo(location, offset) {
const targetLocation = [
this.target.locationX ?? this.lastLocation[0],
this.target.locationY ?? this.lastLocation[1],
];
const [adjustedLocation, adjustedTargetLocation] = this.stepSize > 1
? [
Utility.snapToGrid(location[0], location[1], this.stepSize),
Utility.snapToGrid(targetLocation[0], targetLocation[1], this.stepSize)
]
: [location, targetLocation];
offset = [
adjustedLocation[0] - this.lastLocation[0],
adjustedLocation[1] - this.lastLocation[1],
];
if (offset[0] == 0 && offset[1] == 0) {
return
}
// Make sure it snaps on the grid
offset[0] += adjustedTargetLocation[0] - targetLocation[0];
offset[1] += adjustedTargetLocation[1] - targetLocation[1];
this.dragAction(adjustedLocation, offset);
// Reassign the position of mouse
this.lastLocation = adjustedLocation;
}
/**
* @param {Coordinates} location
* @param {Coordinates} offset
*/
dragAction(location, offset) {
this.target.setLocation(location[0] - this.clickedOffset[0], location[1] - this.clickedOffset[1]);
}
}
/**
* @typedef {import("./MouseMoveDraggable.js").Options & {
* onClicked?: () => void,
* onStartDrag?: () => void,
* onDrag?: (location: Coordinates, movement: Coordinates) => void,
* onEndDrag?: () => void,
* }} Options
*/
class MouseClickDrag extends MouseMoveDraggable {
#onClicked
#onStartDrag
#onDrag
#onEndDrag
/**
* @param {HTMLElement} target
* @param {Blueprint} blueprint
* @param {Options} options
*/
constructor(target, blueprint, options = {}) {
super(target, blueprint, options);
if (options.onClicked) {
this.#onClicked = options.onClicked;
}
if (options.onStartDrag) {
this.#onStartDrag = options.onStartDrag;
}
if (options.onDrag) {
this.#onDrag = options.onDrag;
}
if (options.onEndDrag) {
this.#onEndDrag = options.onEndDrag;
}
}
/** @param {Coordinates} location */
clicked(location) {
super.clicked(location);
this.#onClicked?.();
}
startDrag() {
super.startDrag();
this.#onStartDrag?.();
}
/**
* @param {Coordinates} location
* @param {Coordinates} movement
*/
dragAction(location, movement) {
this.#onDrag?.(location, movement);
}
endDrag() {
super.endDrag();
this.#onEndDrag?.();
}
}
/** @typedef {import("./IMouseClickDrag.js").Options} Options */
/** @extends {MouseMoveDraggable} */
class MouseMoveNodes extends MouseMoveDraggable {
/**
* @param {NodeElement} target
* @param {Blueprint} blueprint
* @param {Options} options
*/
constructor(target, blueprint, options = {}) {
super(target, blueprint, options);
this.draggableElement.classList.add("ueb-draggable");
}
startDrag() {
if (!this.target.selected) {
this.blueprint.unselectAll();
this.target.setSelected(true);
}
}
dragAction(location, offset) {
this.target.acknowledgeDrag(offset);
}
unclicked() {
if (!this.started) {
this.blueprint.unselectAll();
this.target.setSelected(true);
} else {
this.blueprint.getNodes(true).forEach(node =>
node.boundComments
.filter(comment => !node.isInsideComment(comment))
.forEach(comment => node.unbindFromComment(comment))
);
this.blueprint.getCommentNodes().forEach(comment =>
/** @type {CommentNodeTemplate} */(comment.template).manageNodesBind()
);
}
}
}
/**
* @template {IDraggableElement} T
* @extends {ITemplate}
*/
class IDraggableTemplate extends ITemplate {
/** @returns {HTMLElement} */
getDraggableElement() {
return this.element
}
createDraggableObject() {
const draggableElement = this.getDraggableElement();
return new MouseMoveDraggable(this.element, this.blueprint, { draggableElement })
}
createInputObjects() {
return [
...super.createInputObjects(),
this.createDraggableObject(),
new KeyboardShortcut(
this.element,
this.blueprint,
{
activationKeys: [
Configuration.Keys.ArrowUp,
Configuration.Keys.ArrowRight,
Configuration.Keys.ArrowDown,
Configuration.Keys.ArrowLeft,
]
},
self => self.target.acknowledgeDrag([
self.pressedKey === Configuration.Keys.ArrowLeft
? -Configuration.gridSize
: self.pressedKey === Configuration.Keys.ArrowRight
? Configuration.gridSize
: 0,
self.pressedKey === Configuration.Keys.ArrowUp
? -Configuration.gridSize
: self.pressedKey === Configuration.Keys.ArrowDown
? Configuration.gridSize
: 0,
])
)
]
}
topBoundary(justSelectableArea = false) {
return this.element.locationY
}
rightBoundary(justSelectableArea = false) {
return this.element.locationX + this.element.sizeX
}
bottomBoundary(justSelectableArea = false) {
return this.element.locationY + this.element.sizeY
}
leftBoundary(justSelectableArea = false) {
return this.element.locationX
}
centerInViewport() {
const minMargin = Math.min(
this.blueprint.template.viewportSize[0] / 10,
this.blueprint.template.viewportSize[1] / 10
);
const dl = this.leftBoundary() - this.blueprint.template.gridLeftVisibilityBoundary();
const dr = this.blueprint.template.gridRightVisibilityBoundary() - this.rightBoundary();
let avgX = Math.max((dl + dr) / 2, minMargin);
const dt = this.topBoundary() - this.blueprint.template.gridTopVisibilityBoundary();
const db = this.blueprint.template.gridBottomVisibilityBoundary() - this.bottomBoundary();
let avgY = Math.max((dt + db) / 2, minMargin);
this.blueprint.scrollDelta(dl - avgX, dt - avgY, true);
}
}
/**
* @template {IDraggableElement} T
* @extends {IDraggableTemplate}
*/
class IDraggablePositionedTemplate extends IDraggableTemplate {
/** @param {PropertyValues} changedProperties */
update(changedProperties) {
super.update(changedProperties);
if (changedProperties.has("locationX")) {
this.element.style.left = `${this.element.locationX}px`;
}
if (changedProperties.has("locationY")) {
this.element.style.top = `${this.element.locationY}px`;
}
}
}
/**
* @template {NodeElement} T
* @extends {IDraggablePositionedTemplate}
*/
class ISelectableDraggableTemplate extends IDraggablePositionedTemplate {
/** @returns {HTMLElement} */
getDraggableElement() {
return this.element
}
createDraggableObject() {
return /** @type {MouseMoveDraggable} */(new MouseMoveNodes(this.element, this.blueprint, {
draggableElement: this.getDraggableElement(),
scrollGraphEdge: true,
}))
}
/** @param {PropertyValues} changedProperties */
firstUpdated(changedProperties) {
super.firstUpdated(changedProperties);
if (this.element.selected && !this.element.listeningDrag) {
this.element.setSelected(true);
}
}
}
/** @extends {ISelectableDraggableTemplate} */
class NodeTemplate extends ISelectableDraggableTemplate {
static nodeStyleClasses = ["ueb-node-style-default"]
#hasSubtitle = false
/** @type {() => PinEntity} */
pinInserter
/** @type {HTMLElement} */
inputContainer
/** @type {HTMLElement} */
outputContainer
/** @type {PinElement} */
pinElement
addPinHandler = () => {
const pin = this.pinInserter?.();
if (pin) {
if (this.defaultPin && this.defaultPin.isInput() === pin.isInput()) {
this.defaultPin.before(this.createPinElement(pin));
} else {
(pin.isInput() ? this.inputContainer : this.outputContainer).appendChild(this.createPinElement(pin));
}
this.element.acknowledgeReflow();
}
}
toggleAdvancedDisplayHandler = () => {
this.element.toggleShowAdvancedPinDisplay();
this.element.requestUpdate();
this.element.updateComplete.then(() => this.element.acknowledgeReflow());
}
/** @param {PinEntity} pinEntity */
createPinElement(pinEntity) {
const pinElement = /** @type {PinElementConstructor} */(ElementFactory.getConstructor("ueb-pin"))
.newObject(pinEntity, undefined, this.element);
if (this.pinInserter && !this.defaultPin && pinElement.getPinName() === "Default") {
this.defaultPin = pinElement;
this.defaultPin.classList.add("ueb-node-variadic-default");
}
return pinElement
}
/** @param {NodeElement} element */
initialize(element) {
super.initialize(element);
this.element.classList.add(.../** @type {typeof NodeTemplate} */(this.constructor).nodeStyleClasses);
this.element.style.setProperty("--ueb-node-color", this.getColor().cssText);
this.pinInserter = this.element.entity.additionalPinInserter();
if (this.pinInserter) {
this.element.classList.add("ueb-node-is-variadic");
}
}
getColor() {
return this.element.entity.nodeColor()
}
render() {
return x`