Create knot on link double click

This commit is contained in:
barsdeveloper
2022-11-15 14:31:26 +01:00
parent decef44d02
commit f2c09faedb
26 changed files with 2136 additions and 1800 deletions

View File

@@ -266,7 +266,7 @@ ueb-link svg path {
}
ueb-link[data-dragging=true] svg path,
ueb-link svg g:hover path {
ueb-link .ueb-link-area:hover path {
stroke-width: calc(6px / var(--ueb-scale));
transition: stroke-width 0.8s;
}

File diff suppressed because one or more lines are too long

View File

@@ -1 +1 @@
{"version":3,"sourceRoot":"","sources":["../../scss/style.scss","../../scss/ueb-knot.scss","../../scss/ueb-link.scss","../../scss/ueb-node.scss","../../scss/ueb-pin.scss","../../scss/ueb-ui-controls.scss","../../scss/ueb-window.scss"],"names":[],"mappings":"AAAA,WACI,qBACA,oBACA,IACI,kGAIR,WACI,qBACA,mBACA,IACI,sGAIR,WACI,qBACA,iBACA,IACI,gGAIR,cACI,eACA,6CACA,cACA,kBACA,8EACA,+BACA,WACA,iBAGJ,kBACI,iBAGJ,qBACI,aACA,kBACA,MACA,QACA,OACA,aACA,0BACA,UAGJ,mBACI,iBACA,iCACA,eAGJ,mBACI,kBACA,gCACA,gBACA,kBAGJ,oDACI,gBAGJ,UACI,kFACA,kBACA,eACA,gBACA,+DACA,gEACA,yBACA,iBAEI,s3BA0BJ,gBAEI,sZAQJ,sFACA,gEACA,oDACA,qBACA,gBAGJ,6CACI,gBAGJ,8CACI,eAGJ,6BACI,eAGJ,6BACI,mBAGJ,6BACI,kBAGJ,6BACI,mBAGJ,6BACI,iBAGJ,6BACI,mBAGJ,6BACI,kBAGJ,8BACI,mBAGJ,8BACI,kBAGJ,8BACI,mBAGJ,8BACI,iBACA,uDAGJ,0BACI,gCAGJ,8BACI,mBACA,uDAGJ,8BACI,sBACA,uDAGJ,8BACI,iBACA,uDAGJ,8BACI,sBACA,uDAGJ,8BACI,sBACA,uDAGJ,+BACI,iBACA,uDAGJ,+BACI,sBACA,uDAGJ,+BACI,sBACA,uDAGJ,kBACI,kBACA,QACA,SACA,wGAGJ,sBACI,QACA,SAGJ,yEACI,kBAGJ,aACI,cACA,kBACA,kBACA,MACA,OACA,QACA,SACA,iBAEI,wlDAmDJ,gBAEI,gQAWJ,oBAEI,wJAOJ,4BAGJ,gDACI,mBAIJ,eACI,mBAGJ,0BACI,mBACA,uBACA,gBC3UJ,yDACI,gBAGJ,iEACI,aAGJ,uFACI,aAGJ,0EACI,iBACA,2BAGJ,8FACI,qCChBJ,SACI,iDACA,kEAEA,wEACA,cACA,6CACA,8CAKA,kBAIJ,aACI,oEACA,kBACA,WACA,YACA,eACA,+FAGJ,kBACI,mBACA,6BACA,wCAGJ,gEAEI,wCACA,4BAGJ,kBACI,cACA,mBACA,kBACA,mDACA,qHAOA,sBACA,gBACA,kBACA,4EACA,+BACA,mBACA,gBCzDJ,SACI,cACA,kBACA,qCACA,uDACA,oBAGJ,sBACI,gBAGJ,mEACI,YAGJ,iBACI,YACA,YACA,+CAGJ,8BACI,SACA,UAGJ,8CACI,iBACI,kNAIJ,oDACA,0CACA,sDAGJ,2DACI,2BACA,0BAGJ,4DACI,kBAGJ,kBACI,kBACA,YACA,gCACA,qCACA,6BACA,gBAGJ,+BACI,gBACA,UACA,mBAGJ,cACI,kBACA,WACI,+EAGJ,gEACA,8EACA,aACA,gBACA,mBAGJ,2BACI,gBACA,mBAGJ,6DACI,mBAGJ,gDACI,8EAIJ,eACI,mGACA,qBACA,mBAGJ,4BACI,gBAGJ,4BACI,kBAGJ,sBACI,cAGJ,0BACI,sBAGJ,wDACI,cAGJ,2BACI,sBAGJ,oBACI,wBAGJ,kBACI,aACA,cACA,gBACA,mBAGJ,iBACI,kBACA,iBAGJ,kBACI,iBACA,kBAGJ,0BACI,aACA,eACA,YACA,2HAMA,2HAMA,kBAGJ,+BACI,qBACA,6BAGJ,4CACI,kBAGJ,uEACI,cAGJ,oBACI,aACA,kBAGJ,iCACI,kBAGJ,yBACI,sBAGJ,oFACI,yBACA,eAGJ,oDACI,cAGJ,+DACI,qBCnMJ,cACI,6BAGJ,QACI,4NAMA,+CAGJ,QACI,cACA,gBAGJ,sBACI,kBAGJ,wEACI,aAGJ,iBACI,qBACA,iBACA,gBAEA,mBACI,qBACA,sBAIR,iFACI,qCACA,iBAGJ,oCACI,2BAGJ,0BACI,iBAGJ,2CACI,uBACA,WACA,YAGJ,cACI,WACA,YACA,kBACA,2BAGJ,0CACI,kBAGJ,cACI,qBACA,sBAGJ,8BACI,kBAGJ,uBACI,iBAGJ,eACI,qBACA,sBACA,gBACA,yBACA,kBACA,oBACA,cAEA,4FAII,yCACA,aAIR,yCACI,aAGJ,uCACI,gBACA,UACA,YACA,WACA,yBACA,2BAGJ,+CACI,6OAGJ,oEACI,UACA,WACA,YACA,qBACA,gBACA,yCAGJ,oCACI,cAGJ,qBACI,sBACA,gBACA,WAGJ,uBACI,cACA,aACA,YACA,UACA,eACA,gBACA,gBACA,4BACA,gBACA,cACA,YACA,cAEA,0CACI,WACA,YAGJ,gDACI,mBACA,mBACA,WC7JR,YACI,eACA,yBACA,iBACA,mBACA,kBACA,eAEA,kBACI,mBAIR,aACI,aACA,yBACA,SACA,gBAGJ,mCACI,kBACA,oBAEA,qFAEI,WACA,cACA,kBACA,QACA,SACA,+BAGJ,2CACI,UACA,0BAGJ,0CACI,WACA,2BAIR,uCAEI,kBACA,yBACA,kBACA,mBAGJ,uBACI,kBACA,YAEA,6BACI,iBAIR,kCACI,iBAGJ,qCACI,cACA,kBACA,YACA,kBACA,mBAGJ,4BACI,kBACA,cACA,iBACA,UAKA,4BACI,WACA,qBACA,6BACA,oCACA,qCACA,sBAGJ,0BACI,eC3FR,WACI,cACA,kBACA,sBACA,MACA,OACA,sGACA,mBACA,6CACA,aAGJ,gBACI,aACA,mBACA,mBACA,gBACA,YACA,mBAGJ,oBACI,aACA,yBAGJ,iBACI,YACA,kBACA,kBAGJ,kBACI,YACA,YACA,WACA,eAGJ,+CAEI,qBACA,sBAGJ,uBACI,aACA,2DAGJ,wBACI,kBACA,iBACA,gBACA,mBACA,WACI,mLAWR,kBACI,cACA,kBACA,gBACA,iBACA,UACA,WACA,sBACA,kBAGJ,0CACI,8BACA,6BAGJ,qDAEI,aACA,oBACA,WAGJ,6BACI,iBACA,4EAGJ,wBACI,kBACA,4EAGJ,cACI,cAGJ,2CACI,yCAGJ,sCACI,yCAGJ,0BACI,kBACA,sBAEA,mEAEI,WACA,cACA,kBACA,oBACA,UACA,0BAGJ,iCACI,QAIR,4DAEI,YACA,YAGJ,8BACI,aAGJ,wDAEI,UAGJ,2BACI,aACA,gBACA,gBAGJ,oDACI,aACA,sBACA,8BACA,YACA,UAGJ,wDACI,aACA,mBACA,kBAEA,4DACI,YAIR,kDACI,YAGJ,yDACI,oCAGJ,yDACI,oCAGJ,yDACI,oCAGJ,yDACI,oCAGJ,yDACI,oCAGJ,yDACI,oCAGJ,yDACI,oCAGJ,2BACI,WAGJ,mBACI,oBAGJ,yBACI,iBACA,aAGJ,0CACI,UACA,iBACA,sBACA","file":"ueb-style.min.css"}
{"version":3,"sourceRoot":"","sources":["../../scss/style.scss","../../scss/ueb-knot.scss","../../scss/ueb-link.scss","../../scss/ueb-node.scss","../../scss/ueb-pin.scss","../../scss/ueb-ui-controls.scss","../../scss/ueb-window.scss"],"names":[],"mappings":"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","file":"ueb-style.min.css"}

3626
dist/ueblueprint.js vendored

File diff suppressed because it is too large Load Diff

File diff suppressed because one or more lines are too long

View File

@@ -298,7 +298,7 @@ export default class Blueprint extends IElement {
return [... this.nodes
.find(n => pinReference.objectName.toString() == n.getNodeName())
?.getPinElements() ?? []]
.find(p => pinReference.pinGuid.toString() == p.GetPinIdValue())
.find(p => pinReference.pinGuid.toString() == p.getPinId().toString())
}
/**

View File

@@ -0,0 +1,25 @@
/**
* @typedef {new (...args) => IElement} ElementConstructor
* @typedef {import("./IElement").default} IElement
*/
export default class ElementFactory {
/** @type {Map<String, ElementConstructor>} */
static #elementConstructors = new Map()
/**
* @param {String} tagName
* @param {ElementConstructor} entityConstructor
*/
static registerElement(tagName, entityConstructor) {
ElementFactory.#elementConstructors.set(tagName, entityConstructor)
}
/**
* @param {String} tagName
*/
static getConstructor(tagName) {
return ElementFactory.#elementConstructors.get(tagName)
}
}

View File

@@ -1,5 +1,4 @@
import Configuration from "../Configuration"
import IElement from "./IElement"
import Utility from "../Utility"
import IDraggableElement from "./IDraggableElement"

View File

@@ -4,7 +4,6 @@ import ISelectableDraggableElement from "./ISelectableDraggableElement"
import KnotNodeTemplate from "../template/KnotNodeTemplate"
import NodeTemplate from "../template/NodeTemplate"
import ObjectEntity from "../entity/ObjectEntity"
import PinElement from "./PinElement"
import PinEntity from "../entity/PinEntity"
import PinReferenceEntity from "../entity/PinReferenceEntity"
import SerializerFactory from "../serialization/SerializerFactory"

View File

@@ -1,12 +1,12 @@
import BoolPinTemplate from "../template/BoolPinTemplate"
import Configuration from "../Configuration"
import ElementFactory from "./ElementFactory"
import ExecPinTemplate from "../template/ExecPinTemplate"
import IElement from "./IElement"
import IntPinTemplate from "../template/IntPinTemplate"
import ISerializer from "../serialization/ISerializer"
import LinearColorEntity from "../entity/LinearColorEntity"
import LinearColorPinTemplate from "../template/LinearColorPinTemplate"
import LinkElement from "./LinkElement"
import NamePinTemplate from "../template/NamePinTemplate"
import PinTemplate from "../template/PinTemplate"
import RealPinTemplate from "../template/RealPinTemplate"
@@ -103,7 +103,6 @@ export default class PinElement extends IElement {
/** @type {NodeElement} */
nodeElement
connections = 0
/**
@@ -116,7 +115,7 @@ export default class PinElement extends IElement {
this.pinType = this.entity.getType()
this.advancedView = this.entity.bAdvancedView
this.defaultValue = this.entity.getDefaultValue()
this.color = PinElement.properties.color.converter.fromAttribute(Configuration.pinColor[this.pinType]?.toString())
this.color = PinElement.properties.color.converter.fromAttribute(this.getColor().toString())
this.isLinked = false
this.pinDirection = entity.isInput() ? "input" : entity.isOutput() ? "output" : "hidden"
this.nodeElement = nodeElement
@@ -132,15 +131,10 @@ export default class PinElement extends IElement {
}
/** @return {GuidEntity} */
GetPinId() {
getPinId() {
return this.entity.PinId
}
/** @return {String} */
GetPinIdValue() {
return this.GetPinId().value
}
/** @returns {String} */
getPinName() {
return this.entity.PinName
@@ -158,6 +152,13 @@ export default class PinElement extends IElement {
return Utility.formatStringName(this.entity.PinName)
}
getColor() {
if (!this.pinType) {
return Configuration.pinColor["default"]
}
return Configuration.pinColor[this.pinType]
}
isInput() {
return this.entity.isInput()
}
@@ -195,7 +196,7 @@ export default class PinElement extends IElement {
}
let link = this.blueprint.getLink(this, pin, true)
if (!link) {
this.blueprint.addGraphElement(new LinkElement(this, pin))
this.blueprint.addGraphElement(new (ElementFactory.getConstructor("ueb-link"))(this, pin))
}
}
return pin

View File

@@ -1,5 +1,6 @@
import ColorHandlerElement from "./ColorHandlerElement"
import ColorSliderElement from "./ColorSliderElement"
import ElementFactory from "./ElementFactory"
import InputElement from "./InputElement"
import LinkElement from "./LinkElement"
import NodeElement from "./NodeElement"
@@ -9,11 +10,19 @@ import WindowElement from "./WindowElement"
export default function defineElements() {
customElements.define("ueb-color-handler", ColorHandlerElement)
ElementFactory.registerElement("ueb-color-handler", ColorHandlerElement)
customElements.define("ueb-input", InputElement)
ElementFactory.registerElement("ueb-input", InputElement)
customElements.define("ueb-link", LinkElement)
ElementFactory.registerElement("ueb-link", LinkElement)
customElements.define("ueb-node", NodeElement)
ElementFactory.registerElement("ueb-node", NodeElement)
customElements.define("ueb-pin", PinElement)
ElementFactory.registerElement("ueb-pin", PinElement)
customElements.define("ueb-selector", SelectorElement)
ElementFactory.registerElement("ueb-selector", SelectorElement)
customElements.define("ueb-ui-slider", ColorSliderElement)
ElementFactory.registerElement("ueb-ui-slider", ColorSliderElement)
customElements.define("ueb-window", WindowElement)
}
ElementFactory.registerElement("ueb-window", WindowElement)
}

View File

@@ -94,7 +94,7 @@ export default class IEntity extends Observable {
}
// @ts-expect-error
const attributes = this.constructor.attributes
if (values.constructor !== Object && Object.getOwnPropertyNames(attributes).length == 1) {
if (values.constructor !== Object && Object.getOwnPropertyNames(attributes).length === 1) {
// Where there is just one attribute, option can be the value of that attribute
values = {
[Object.getOwnPropertyNames(attributes)[0]]: values

View File

@@ -8,6 +8,11 @@ export default class ObjectReferenceEntity extends IEntity {
}
constructor(options = {}) {
if (options.constructor !== Object) {
options = {
path: options
}
}
super(options)
/** @type {String} */ this.type
/** @type {String} */ this.path

View File

@@ -37,7 +37,7 @@ export default class PinEntity extends IEntity {
PinId: GuidEntity,
PinName: "",
PinFriendlyName: new TypeInitialization(LocalizedTextEntity, false, null),
PinToolTip: "",
PinToolTip: new TypeInitialization(String, false, ""),
Direction: new TypeInitialization(String, false, ""),
PinType: {
PinCategory: "",

View File

@@ -0,0 +1,21 @@
import ObjectEntity from "../ObjectEntity"
import ObjectReferenceEntity from "../ObjectReferenceEntity"
import PinEntity from "../PinEntity"
export default class KnotEntity extends ObjectEntity {
constructor(options = {}) {
super(options)
this.Class = new ObjectReferenceEntity("/Script/BlueprintGraph.K2Node_Knot")
this.Name = "K2Node_Knot"
this.CustomProperties = [
new PinEntity({
PinName: "InputPin",
}),
new PinEntity({
PinName: "OutputPin",
Direction: "EGPD_Output",
})
]
}
}

View File

@@ -1,7 +1,9 @@
import ElementFactory from "../../element/ElementFactory"
import IInput from "../IInput"
import NodeElement from "../../element/NodeElement"
import ObjectSerializer from "../../serialization/ObjectSerializer"
/** @typedef {import("../../element/NodeElement").default} NodeElement */
export default class Paste extends IInput {
static #serializer = new ObjectSerializer()
@@ -30,7 +32,9 @@ export default class Paste extends IInput {
let left = 0
let count = 0
let nodes = Paste.#serializer.readMultiple(value).map(entity => {
let node = new NodeElement(entity)
/** @type {NodeElement} */
// @ts-expect-error
let node = new (ElementFactory.getConstructor("ueb-node"))(entity)
top += node.locationY
left += node.locationX
++count

View File

@@ -6,7 +6,7 @@ import IPointing from "./IPointing"
* @template {HTMLElement} T
* @extends {IPointing<T>}
*/
export default class IMouseClick extends IPointing {
export default class MouseClick extends IPointing {
#mouseDownHandler =
/** @param {MouseEvent} e */
@@ -15,7 +15,7 @@ export default class IMouseClick extends IPointing {
switch (e.button) {
case this.options.clickButton:
// Either doesn't matter or consider the click only when clicking on the target, not descandants
if (!this.options.strictTarget || e.target == e.currentTarget) {
if (!this.options.strictTarget || e.target === e.currentTarget) {
if (this.options.consumeEvent) {
e.stopImmediatePropagation() // Captured, don't call anyone else
}

View File

@@ -1,9 +1,10 @@
import Configuration from "../../Configuration"
import ElementFactory from "../../element/ElementFactory"
import IMouseClickDrag from "./IMouseClickDrag"
import LinkElement from "../../element/LinkElement"
/**
* @typedef {import("../../element/PinElement").default} PinElement
* @typedef {import("../../element/LinkElement").default} LinkElement
* @typedef {import("../../template/KnotNodeTemplate").default} KnotNodeTemplate
*/
@@ -69,7 +70,9 @@ export default class MouseCreateLink extends IMouseClickDrag {
if (this.target.nodeElement.getType() == Configuration.knotNodeTypeName) {
this.#knotPin = this.target
}
this.link = new LinkElement(this.target, null)
/** @type {LinkElement} */
// @ts-expect-error
this.link = new (ElementFactory.getConstructor("ueb-link"))(this.target, null)
this.blueprint.linksContainerElement.prepend(this.link)
this.link.setMessagePlaceNode()
this.#listenedPins = this.blueprint.querySelectorAll("ueb-pin")
@@ -99,8 +102,8 @@ export default class MouseCreateLink extends IMouseClickDrag {
// Knot pin direction correction
if (this.#knotPin.isInput() && otherPin.isInput() || this.#knotPin.isOutput() && otherPin.isOutput()) {
const oppositePin = this.#knotPin.isInput()
?/** @type {KnotNodeTemplate} */(this.#knotPin.nodeElement.template).outputPin
:/** @type {KnotNodeTemplate} */(this.#knotPin.nodeElement.template).inputPin
? /** @type {KnotNodeTemplate} */(this.#knotPin.nodeElement.template).outputPin
: /** @type {KnotNodeTemplate} */(this.#knotPin.nodeElement.template).inputPin
if (this.#knotPin === this.link.sourcePin) {
this.link.sourcePin = oppositePin
} else {

View File

@@ -0,0 +1,59 @@
import IPointing from "./IPointing"
/** @typedef {import("../../Blueprint").default} Blueprint */
/**
* @template {HTMLElement} T
* @extends {IPointing<T>}
*/
export default class MouseDbClick extends IPointing {
static ignoreDbClick =
/** @param {Number[]} location */
location => { }
#mouseDbClickHandler =
/** @param {MouseEvent} e */
e => {
if (!this.options.strictTarget || e.target === e.currentTarget) {
if (this.options.consumeEvent) {
e.stopImmediatePropagation() // Captured, don't call anyone else
}
this.clickedPosition = this.locationFromEvent(e)
this.blueprint.mousePosition[0] = this.clickedPosition[0]
this.blueprint.mousePosition[1] = this.clickedPosition[1]
this.dbclicked(this.clickedPosition)
}
}
#onDbClick
get onDbClick() {
return this.#onDbClick
}
set onDbClick(value) {
this.#onDbClick = value
}
clickedPosition = [0, 0]
constructor(target, blueprint, options = {}, onDbClick = MouseDbClick.ignoreDbClick) {
options.consumeEvent ??= true
options.strictTarget ??= false
super(target, blueprint, options)
this.#onDbClick = onDbClick
this.listenEvents()
}
listenEvents() {
this.target.addEventListener("dblclick", this.#mouseDbClickHandler)
}
unlistenEvents() {
this.target.removeEventListener("dblclick", this.#mouseDbClickHandler)
}
/* Subclasses will override the following method */
dbclicked(location) {
this.onDbClick(location)
}
}

View File

@@ -9,7 +9,6 @@ import MouseScrollGraph from "../input/mouse/MouseScrollGraph"
import MouseTracking from "../input/mouse/MouseTracking"
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"
@@ -17,6 +16,7 @@ import Zoom from "../input/mouse/Zoom"
/**
* @typedef {import("../Blueprint").default} Blueprint
* @typedef {import("../element/PinElement").default} PinElement
* @typedef {import("../element/SelectorElement").default} SelectorElement
* @typedef {import("../entity/PinReferenceEntity").default} PinReferenceEntity
*/
@@ -78,6 +78,7 @@ export default class BlueprintTemplate extends ITemplate {
<div class="ueb-grid-content">
<div data-links></div>
<div data-nodes></div>
<ueb-selector></ueb-selector>
</div>
</div>
</div>
@@ -90,8 +91,7 @@ export default class BlueprintTemplate extends ITemplate {
this.element.headerElement = /** @type {HTMLElement} */(this.element.querySelector('.ueb-viewport-header'))
this.element.overlayElement = /** @type {HTMLElement} */(this.element.querySelector('.ueb-viewport-overlay'))
this.element.viewportElement = /** @type {HTMLElement} */(this.element.querySelector('.ueb-viewport-body'))
this.element.selectorElement = new SelectorElement()
this.element.querySelector(".ueb-grid-content")?.append(this.element.selectorElement)
this.element.selectorElement = /** @type {SelectorElement} */(this.element.querySelector('ueb-selector'))
this.element.gridElement = /** @type {HTMLElement} */(this.element.viewportElement.querySelector(".ueb-grid"))
this.element.linksContainerElement = /** @type {HTMLElement} */(this.element.querySelector("[data-links]"))
this.element.linksContainerElement.append(...this.element.getLinks())

View File

@@ -1,9 +1,12 @@
import { html } from "lit"
import ElementFactory from "../element/ElementFactory"
import ISelectableDraggableTemplate from "./ISelectableDraggableTemplate"
import KnotPinTemplate from "./KnotPinTemplate"
import PinElement from "../element/PinElement"
/** @typedef {import("../element/NodeElement").default} NodeElement */
/**
* @typedef {import("../element/NodeElement").default} NodeElement
* @typedef {import("../element/PinElement").default} PinElement
*/
/** @extends {ISelectableDraggableTemplate<NodeElement>} */
export default class KnotNodeTemplate extends ISelectableDraggableTemplate {
@@ -46,9 +49,18 @@ export default class KnotNodeTemplate extends ISelectableDraggableTemplate {
const entities = this.element.getPinEntities().filter(v => !v.isHidden())
const inputEntity = entities[entities[0].isInput() ? 0 : 1]
const outputEntity = entities[entities[0].isOutput() ? 0 : 1]
const pinElementConstructor = ElementFactory.getConstructor("ueb-pin")
return [
this.#inputPin = new PinElement(inputEntity, new KnotPinTemplate(), this.element),
this.#outputPin = new PinElement(outputEntity, new KnotPinTemplate(), this.element),
this.#inputPin = /** @type {PinElement} */(new pinElementConstructor(
inputEntity,
new KnotPinTemplate(),
this.element
)),
this.#outputPin = /** @type {PinElement} */(new pinElementConstructor(
outputEntity,
new KnotPinTemplate(),
this.element
)),
]
}
}

View File

@@ -1,11 +1,12 @@
import { html } from "lit"
import ColorPickerWindowTemplate from "./ColorPickerWindowTemplate"
import Configuration from "../Configuration"
import ElementFactory from "../element/ElementFactory"
import PinTemplate from "./PinTemplate"
import WindowElement from "../element/WindowElement"
/**
* @typedef {import("../element/PinElement").default} PinElement
* @typedef {import("../element/WindowElement").default} WindowElement
* @typedef {import("../entity/LinearColorEntity").default} LinearColorEntity
*/
@@ -22,15 +23,17 @@ export default class LinearColorPinTemplate extends PinTemplate {
/** @param {MouseEvent} e */
e => {
//e.preventDefault()
this.#window = new WindowElement({
type: ColorPickerWindowTemplate,
windowOptions: {
// The created window will use the following functions to get and set the color
getPinColor: () => this.element.defaultValue,
/** @param {LinearColorEntity} color */
setPinColor: color => this.element.setDefaultValue(color),
},
})
this.#window = /** @type {WindowElement} */ (
new (ElementFactory.getConstructor("ueb-window"))({
type: ColorPickerWindowTemplate,
windowOptions: {
// The created window will use the following functions to get and set the color
getPinColor: () => this.element.defaultValue,
/** @param {LinearColorEntity} color */
setPinColor: color => this.element.setDefaultValue(color),
},
})
)
this.element.blueprint.append(this.#window)
const windowApplyHandler = () => {
this.element.setDefaultValue(

View File

@@ -1,10 +1,14 @@
import { html, nothing } from "lit"
import Configuration from "../Configuration"
import Utility from "../Utility"
import ElementFactory from "../element/ElementFactory"
import IFromToPositionedTemplate from "./IFromToPositionedTemplate"
import KnotEntity from "../entity/objects/KnotEntity"
import MouseDbClick from "../input/mouse/MouseDbClick"
import Utility from "../Utility"
/**
* @typedef {import("../element/LinkElement").default} LinkElement
* @typedef {import("../element/NodeElement").default} NodeElement
* @typedef {import("../template/KnotNodeTemplate").default} KnotNodeTemplate
*/
@@ -13,7 +17,7 @@ import IFromToPositionedTemplate from "./IFromToPositionedTemplate"
export default class LinkTemplate extends IFromToPositionedTemplate {
/**
* Returns a function performing the inverse multiplication y = a / x + q. The value of a and q are calculated using
* 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]
@@ -28,11 +32,9 @@ export default class LinkTemplate extends IFromToPositionedTemplate {
}
/**
* Returns a function performing a clamped line passing through two points. It is clamped after and before the
* points. It is easier explained with an example.
* b ______
* /
* /
* 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 ______
* /
* /
* /
@@ -59,6 +61,31 @@ export default class LinkTemplate extends IFromToPositionedTemplate {
static c2Clamped = LinkTemplate.clampedLine([0, 100], [200, 30])
#createKnot =
/** @param {Number[]} location */
location => {
const knot = /** @type {NodeElement} */(new (ElementFactory.getConstructor("ueb-node"))(new KnotEntity()))
knot.setLocation(this.element.blueprint.snapToGrid(location))
const link = new (ElementFactory.getConstructor("ueb-link"))(
/** @type {KnotNodeTemplate} */(knot.template).outputPin,
this.element.destinationPin
)
this.element.destinationPin = /** @type {KnotNodeTemplate} */(knot.template).inputPin
this.element.blueprint.addGraphElement(knot, link)
}
createInputObjects() {
return [
...super.createInputObjects(),
new MouseDbClick(
this.element.querySelector(".ueb-link-area"),
this.element.blueprint,
undefined,
(location) => this.#createKnot(location)
)
]
}
/**
* @param {Map} changedProperties
*/
@@ -112,9 +139,7 @@ export default class LinkTemplate extends IFromToPositionedTemplate {
this.element.svgPathD = Configuration.linkRightSVGPath(this.element.startPercentage, c1, c2)
}
/**
* @param {Map} changedProperties
*/
/** @param {Map} changedProperties */
update(changedProperties) {
super.update(changedProperties)
if (changedProperties.has("originatesFromInput")) {
@@ -130,19 +155,19 @@ export default class LinkTemplate extends IFromToPositionedTemplate {
}
render() {
const uniqueId = "ueb-id-" + Math.floor(Math.random() * 1E12)
const uniqueId = `ueb-id-${Math.floor(Math.random() * 1E12)}`
return html`
<svg version="1.2" baseProfile="tiny" width="100%" height="100%" viewBox="0 0 100 100" preserveAspectRatio="none">
<g>
<g class="ueb-link-area">
<path id="${uniqueId}" fill="none" vector-effect="non-scaling-stroke" d="${this.element.svgPathD}" />
<use href="#${uniqueId}" pointer-events="stroke" stroke-width="15" />
<use href="#${uniqueId}" pointer-events="stroke" stroke-width="20" />
</g>
</svg>
${this.element.linkMessageIcon != "" || this.element.linkMessageText != "" ? html`
<div class="ueb-link-message">
<span class="${this.element.linkMessageIcon}"></span>
<span class="ueb-link-message-text">${this.element.linkMessageText}</span>
</div>
<div class="ueb-link-message">
<span class="${this.element.linkMessageIcon}"></span>
<span class="ueb-link-message-text">${this.element.linkMessageText}</span>
</div>
` : nothing}
`
}

View File

@@ -1,8 +1,11 @@
import { html, nothing } from "lit"
import ElementFactory from "../element/ElementFactory"
import ISelectableDraggableTemplate from "./ISelectableDraggableTemplate"
import PinElement from "../element/PinElement"
/** @typedef {import("../element/NodeElement").default} NodeElement */
/**
* @typedef {import("../element/NodeElement").default} NodeElement
* @typedef {import("../element/PinElement").default} PinElement
*/
/** @extends {ISelectableDraggableTemplate<NodeElement>} */
export default class NodeTemplate extends ISelectableDraggableTemplate {
@@ -80,6 +83,8 @@ export default class NodeTemplate extends ISelectableDraggableTemplate {
createPinElements() {
return this.element.getPinEntities()
.filter(v => !v.isHidden())
.map(v => new PinElement(v, undefined, this.element))
.map(v => /** @type {PinElement} */(
new (ElementFactory.getConstructor("ueb-pin"))(v, undefined, this.element)
))
}
}

View File

@@ -25,7 +25,7 @@ export default class PinTemplate extends ITemplate {
/** @param {PinElement<T>} element */
constructed(element) {
super.constructed(element)
this.element.dataset.id = this.element.GetPinIdValue()
this.element.dataset.id = this.element.getPinId().toString()
}
connectedCallback() {

View File

@@ -32,7 +32,7 @@ ueb-link svg path {
}
ueb-link[data-dragging="true"] svg path,
ueb-link svg g:hover path {
ueb-link .ueb-link-area:hover path {
stroke-width: calc(6px / var(--ueb-scale));
transition: stroke-width 0.8s;
}