mirror of
https://github.com/barsdeveloper/ueblueprint.git
synced 2026-02-03 23:55:04 +08:00
221 lines
10 KiB
JavaScript
Executable File
221 lines
10 KiB
JavaScript
Executable File
import { html, nothing } from "lit"
|
|
import Configuration from "../Configuration.js"
|
|
import ElementFactory from "../element/ElementFactory.js"
|
|
import KnotEntity from "../entity/objects/KnotEntity.js"
|
|
import KeyboardShortcut from "../input/keyboard/KeyboardShortcut.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"
|
|
import IFromToPositionedTemplate from "./IFromToPositionedTemplate.js"
|
|
|
|
/** @extends {IFromToPositionedTemplate<LinkElement>} */
|
|
export default class LinkTemplate extends IFromToPositionedTemplate {
|
|
|
|
/** @param {Number} x */
|
|
static sigmoidPositive(x, curvature = 3.7, length = 1.1) {
|
|
return 1 - Math.exp(-((x / length) ** curvature))
|
|
}
|
|
|
|
/**
|
|
* 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
|
|
}
|
|
|
|
static clampedLine = x => Math.min(Math.max(0, x), 1)
|
|
|
|
static c1DecreasingValue = LinkTemplate.decreasingValue(-0.15, [100, 15])
|
|
|
|
static c2DecreasingValue = LinkTemplate.decreasingValue(-0.05, [500, 130])
|
|
|
|
static c2Clamped = x => -40 * LinkTemplate.clampedLine(x / 200) + 80
|
|
|
|
#uniqueId = `ueb-id-${Math.floor(Math.random() * 1E12)}`
|
|
|
|
/** @param {Coordinates} location */
|
|
#createKnot = location => {
|
|
const knotEntity = new KnotEntity({}, this.element.origin.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.origin = null
|
|
this.element.target = null
|
|
const link = /** @type {LinkElementConstructor} */(ElementFactory.getConstructor("ueb-link"))
|
|
.newObject(outputPin, knotTemplate.inputPin)
|
|
this.blueprint.addGraphElement(link)
|
|
this.element.origin = knotTemplate.outputPin
|
|
this.element.target = inputPin
|
|
}
|
|
|
|
/** @param {PropertyValues} changedProperties */
|
|
#calculateSVGPath(changedProperties) {
|
|
const originPin = this.element.origin
|
|
const targetPin = this.element.target
|
|
const isOriginAKnot = originPin?.isKnot()
|
|
const isTargetAKnot = targetPin?.isKnot()
|
|
const from = this.element.originX
|
|
const to = this.element.targetX
|
|
|
|
// Switch actual input/output pins if allowed and makes sense
|
|
if (isOriginAKnot && !targetPin) {
|
|
if (originPin?.isInput() && to > from + Configuration.distanceThreshold) {
|
|
this.element.origin = /** @type {KnotPinTemplate} */(originPin.template).getoppositePin()
|
|
} else if (originPin?.isOutput() && to < from - Configuration.distanceThreshold) {
|
|
this.element.origin = /** @type {KnotPinTemplate} */(originPin.template).getoppositePin()
|
|
}
|
|
}
|
|
if (isTargetAKnot && !originPin) {
|
|
if (targetPin?.isInputLoosely() && to < from - Configuration.distanceThreshold) {
|
|
this.element.target = /** @type {KnotPinTemplate} */(targetPin.template).getoppositePin()
|
|
} else if (targetPin?.isOutputLoosely() && to > from + Configuration.distanceThreshold) {
|
|
this.element.target = /** @type {KnotPinTemplate} */(targetPin.template).getoppositePin()
|
|
}
|
|
}
|
|
|
|
// Switch visual input/output pins if allowed and makes sense
|
|
if (originPin && targetPin) {
|
|
let directionsCheckedKnot
|
|
if (originPin.isKnot() && originPin.hasUpdated) {
|
|
/** @type {KnotNodeTemplate} */(originPin.nodeElement.template).checkSwtichDirectionsVisually()
|
|
}
|
|
if (targetPin.isKnot() && targetPin.hasUpdated) {
|
|
/** @type {KnotNodeTemplate} */(targetPin.nodeElement.template).checkSwtichDirectionsVisually()
|
|
}
|
|
}
|
|
|
|
let sameDirection = originPin?.isOutputVisually() == targetPin?.isOutputVisually()
|
|
|
|
// Actual computation
|
|
const dx = Math.max(Math.abs(this.element.originX - this.element.targetX), 1)
|
|
const dy = Math.max(Math.abs(this.element.originY - this.element.targetY), 1)
|
|
const width = Math.max(dx, Configuration.linkMinWidth)
|
|
const fillRatio = dx / width
|
|
const xInverted = this.element.originatesFromInput
|
|
? this.element.originX < this.element.targetX
|
|
: this.element.targetX < this.element.originX
|
|
this.element.startPixels = dx < width // If under minimum width
|
|
? (width - dx) / 2 // Start from half the empty space
|
|
: 0 // Otherwise start from the beginning
|
|
const startPercentage = xInverted ? this.element.startPixels + fillRatio * 100 : this.element.startPixels
|
|
this.element.startPercentage = startPercentage
|
|
const c1 = startPercentage + (sameDirection
|
|
? 5
|
|
: (
|
|
(xInverted
|
|
? LinkTemplate.c1DecreasingValue(width)
|
|
: 10
|
|
)
|
|
* fillRatio
|
|
)
|
|
)
|
|
const aspectRatio = dy / Math.max(30, dx)
|
|
const c2 = sameDirection
|
|
// ? 100 - Math.abs(100 - 2 * startPercentage) + 15
|
|
? 100 * LinkTemplate.clampedLine(startPercentage / 50) + 15
|
|
: (
|
|
LinkTemplate.c2Clamped(dx)
|
|
* LinkTemplate.sigmoidPositive(fillRatio * 1.2 + aspectRatio * 0.5, 1.5, 1.8)
|
|
+ startPercentage
|
|
)
|
|
this.element.svgPathD = Configuration.linkRightSVGPath(startPercentage, c1, c2, sameDirection)
|
|
}
|
|
|
|
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 originDX = (changedProperties.get("originX") ?? this.element.originX) - this.element.originX
|
|
const originDY = (changedProperties.get("originY") ?? this.element.originY) - this.element.originY
|
|
const targetDX = (changedProperties.get("targetX") ?? this.element.targetX) - this.element.targetX
|
|
const targetDY = (changedProperties.get("targetY") ?? this.element.targetY) - this.element.targetY
|
|
if (originDX != targetDX || originDY != targetDY) {
|
|
// Only if it changes shape
|
|
this.#calculateSVGPath(changedProperties)
|
|
}
|
|
}
|
|
|
|
/** @param {PropertyValues} changedProperties */
|
|
update(changedProperties) {
|
|
super.update(changedProperties)
|
|
const style = this.element.style
|
|
if (changedProperties.has("color")) {
|
|
style.setProperty("--ueb-link-color-rgb", this.element.color?.toString() ?? "255, 255, 255")
|
|
}
|
|
style.setProperty("--ueb-start-percentage", `${Math.round(this.element.startPercentage)}%`)
|
|
style.setProperty("--ueb-link-start", `${Math.round(this.element.startPixels)}`)
|
|
const mirrorV = (this.element.originY > this.element.targetY ? -1 : 1) // If from is below to => mirror
|
|
* (this.element.originatesFromInput ? -1 : 1) // Unless fro refers to an input pin
|
|
* (this.element.origin?.isInputVisually() && this.element.target?.isInputVisually() ? -1 : 1)
|
|
const mirrorH = (this.element.origin?.isInputVisually() && this.element.target?.isInputVisually() ? -1 : 1)
|
|
style.setProperty("--ueb-link-scale-y", `${mirrorV}`)
|
|
style.setProperty("--ueb-link-scale-x", `${mirrorH}`)
|
|
}
|
|
|
|
render() {
|
|
return html`
|
|
<svg version="1.2" baseProfile="tiny" width="100%" height="100%" viewBox="0 0 100 100"
|
|
preserveAspectRatio="none"
|
|
>
|
|
<path id="${this.#uniqueId}" fill="none" vector-effect="non-scaling-stroke"
|
|
d="${this.element.svgPathD}"
|
|
/>
|
|
<use href="#${this.#uniqueId}" class="ueb-link-area" pointer-events="all" />
|
|
<use href="#${this.#uniqueId}" class="ueb-link-path" pointer-events="none" />
|
|
</svg>
|
|
${this.element.linkMessageIcon || this.element.linkMessageText ? html`
|
|
<div class="ueb-link-message">
|
|
${this.element.linkMessageIcon !== nothing ? html`
|
|
<span class="ueb-link-message-icon">${this.element.linkMessageIcon}</span>
|
|
` : nothing}
|
|
${this.element.linkMessageText !== nothing ? html`
|
|
<span class="ueb-link-message-text">${this.element.linkMessageText}</span>
|
|
` : nothing}
|
|
</div>
|
|
` : nothing}
|
|
`
|
|
}
|
|
}
|