Ma/ueblueprint
1
0
Fork 0
mirror of https://github.com/barsdeveloper/ueblueprint.git synced 2026-02-04 08:50:33 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

Window introduced

Browse Source
This commit is contained in:
barsdeveloper
2022-09-24 20:27:52 +02:00
parent bf2c3ec939
commit 9a4d323a87
27 changed files with 891 additions and 312 deletions
Download Patch File Download Diff File Expand all files Collapse all files

128
dist/css/ueb-style.css vendored
View File

@@ -214,6 +214,58 @@ ueb-selector > * {
visibility: visible;
}
ueb-link {
--ueb-from-input-coefficient: calc(2 * var(--ueb-from-input) - 1);
/* when from-y > to-y */
--ueb-y-opposite: clamp(0, var(--ueb-from-y) - var(--ueb-to-y) - 1, 1);
display: block;
margin-left: calc(var(--ueb-link-start) * -1px);
min-width: calc(var(--ueb-link-min-width) * 1px);
/*
* This makes the element transparent to the hover events so that multiple path elements can stand nearby and have
* their hover behavior correctly firing.
*/
visibility: hidden;
}
ueb-link svg {
--ueb-y-opposite-coefficient: calc(2* var(--ueb-y-opposite) - 1);
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
min-height: 1px;
transform: scaleY(calc(var(--ueb-y-opposite-coefficient) * var(--ueb-from-input-coefficient)));
}
ueb-link svg path {
visibility: visible;
stroke: var(--ueb-link-color);
stroke-width: 1;
}
ueb-link[data-dragging=true] svg path,
ueb-link svg g:hover path {
stroke-width: 5;
transition: stroke-width 0.8s;
}
.ueb-link-message {
display: block;
visibility: visible;
position: absolute;
top: calc(100% * (1 - var(--ueb-y-opposite)) + 22px);
left: calc((1 - var(--ueb-from-input)) * 100% + (var(--ueb-from-input-coefficient)) * var(--ueb-start-percentage) + 15px);
border: 1px solid #000;
padding: 4px 8px;
border-radius: 2px;
background: linear-gradient(to bottom, #2a2a2a 0, #151515 50%, #2a2a2a 100%);
color: var(--ueb-pin-dim-color);
white-space: nowrap;
z-index: 1000000;
}
ueb-node {
display: block;
position: absolute;
@@ -480,58 +532,6 @@ ueb-pin[data-type="/Script/CoreUObject.LinearColor"] .ueb-pin-input {
margin: 4px;
}
ueb-link {
--ueb-from-input-coefficient: calc(2 * var(--ueb-from-input) - 1);
/* when from-y > to-y */
--ueb-y-opposite: clamp(0, var(--ueb-from-y) - var(--ueb-to-y) - 1, 1);
display: block;
margin-left: calc(var(--ueb-link-start) * -1px);
min-width: calc(var(--ueb-link-min-width) * 1px);
/*
* This makes the element transparent to the hover events so that multiple path elements can stand nearby and have
* their hover behavior correctly firing.
*/
visibility: hidden;
}
ueb-link svg {
--ueb-y-opposite-coefficient: calc(2* var(--ueb-y-opposite) - 1);
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
min-height: 1px;
transform: scaleY(calc(var(--ueb-y-opposite-coefficient) * var(--ueb-from-input-coefficient)));
}
ueb-link svg path {
visibility: visible;
stroke: var(--ueb-link-color);
stroke-width: 1;
}
ueb-link[data-dragging=true] svg path,
ueb-link svg g:hover path {
stroke-width: 5;
transition: stroke-width 0.8s;
}
.ueb-link-message {
display: block;
visibility: visible;
position: absolute;
top: calc(100% * (1 - var(--ueb-y-opposite)) + 22px);
left: calc((1 - var(--ueb-from-input)) * 100% + (var(--ueb-from-input-coefficient)) * var(--ueb-start-percentage) + 15px);
border: 1px solid #000;
padding: 4px 8px;
border-radius: 2px;
background: linear-gradient(to bottom, #2a2a2a 0, #151515 50%, #2a2a2a 100%);
color: var(--ueb-pin-dim-color);
white-space: nowrap;
z-index: 1000000;
}
ueb-blueprint {
--ueb-pin-color-dim: #afafaf;
}
@@ -598,4 +598,28 @@ ueb-pin[data-type=vector] {
--ueb-pin-color-rgb: var(--ueb-pin-color-vector);
}
ueb-window {
display: block;
position: absolute;
top: 0;
left: 0;
transform: translateX(calc(var(--ueb-position-x) * 1px)) translateY(calc(var(--ueb-position-y) * 1px));
z-index: 1000;
}
.ueb-window-top {
display: flex;
flex-direction: row;
align-items: center;
padding: 4px 8px;
height: 30px;
background: #1a1a1a;
}
.ueb-window-close {
padding: 8px;
height: 12px;
width: 12px;
}
/*# sourceMappingURL=ueb-style.css.map */

2
dist/css/ueb-style.css.map vendored
View File

@@ -1 +1 @@
{"version":3,"sourceRoot":"","sources":["../../scss/style.scss","../../scss/ueb-node.scss","../../scss/ueb-pin.scss","../../scss/ueb-link.scss","../../scss/ueb-type-color.scss"],"names":[],"mappings":"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","file":"ueb-style.css"}
{"version":3,"sourceRoot":"","sources":["../../scss/style.scss","../../scss/ueb-link.scss","../../scss/ueb-node.scss","../../scss/ueb-pin.scss","../../scss/ueb-type-color.scss","../../scss/ueb-window.scss"],"names":[],"mappings":"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","file":"ueb-style.css"}

2
dist/css/ueb-style.min.css vendored
View File

File diff suppressed because one or more lines are too long

2
dist/css/ueb-style.min.css.map vendored
View File

@@ -1 +1 @@
{"version":3,"sourceRoot":"","sources":["../../scss/style.scss","../../scss/ueb-node.scss","../../scss/ueb-pin.scss","../../scss/ueb-link.scss","../../scss/ueb-type-color.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,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,8DACA,8DACA,8DACA,8DACA,oGACA,qGACA,kBACA,wCACA,yCACA,0CACA,4CAGJ,aACI,cACA,kBACA,kBACA,MACA,OACA,QACA,SACA,iBAEI,wlDAmDJ,gBAEI,gQAWJ,oBAEI,wJAOJ,4BAGJ,gDACI,mBAIJ,eACI,mBC3UJ,SACI,cACA,kBACA,sGACA,qCACA,uDACA,oBAGJ,mEACI,YAGJ,iBACI,YACA,YACA,+CAGJ,8CACI,iBACI,kNAIJ,oDACA,0CACA,sDACA,0BACA,oBAGJ,kBACI,kBACA,YACA,gCACA,qCACA,6BACA,gBAGJ,cACI,kBACA,WACI,+EAGJ,gEACA,8EACA,aACA,gBACA,mBAGJ,gDACI,WACI,+EAGJ,8EAGJ,eACI,mGACA,qBACA,mBAGJ,sBACI,cAGJ,0BACI,sBAGJ,wDACI,cAGJ,2BACI,sBAGJ,oBACI,wBAGJ,kBACI,aACA,cACA,gBACA,mBAGJ,iBACI,kBACA,iBAGJ,kBACI,iBACA,kBAGJ,0BACI,aACA,eACA,2HAMA,2HAMA,kBACA,YACA,qBACA,6BAGJ,uEACI,cAGJ,oBACI,aACA,kBAGJ,yBACI,sBAGJ,oFACI,yBACA,eAGJ,oDACI,cAGJ,+DACI,qBCrJJ,QACI,cACA,gBAGJ,wEACI,aAGJ,iBACI,qBACA,iBACA,gBAEA,mBACI,qBACA,sBAIR,iFACI,qCACA,iBAGJ,0BACI,iBAGJ,sCACI,uBACA,WACA,YAGJ,cACI,WACA,YACA,kBACA,2BAGJ,kBACI,cACA,WACA,YAIJ,0CACI,0BAGJ,0CACI,kBAGJ,cACI,qBACA,sBAGJ,sCACI,aAGJ,eACI,qBACA,sBACA,gBACA,yBACA,kBACA,oBACA,aAEA,4FAII,yCACA,aAIR,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,WCxIR,SACI,kEAEA,uEACA,cACA,6CACA,8CAKA,kBAIJ,aACI,iEACA,kBACA,MACA,OACA,WACA,YACA,eACA,8FAGJ,kBACI,mBACA,6BACA,eAGJ,gEAEI,eACA,4BAGJ,kBACI,cACA,mBACA,kBACA,kDACA,qHAOA,sBACA,gBACA,kBACA,4EACA,+BACA,mBACA,gBC1DJ,cACI,6BAGJ,SACI,iDAGJ,QACI,4NAMA,+CAGJ,wBACI,+CAGJ,yBACI,gDAGJ,wBACI,+CAGJ,uBACI,8CAGJ,wBACI,+CAGJ,0BACI,iDAGJ,wBACI,+CAGJ,2BACI,kDAGJ,0BACI,iDAGJ,qDACI,uDAGJ,gDACI,iDAGJ,0BACI","file":"ueb-style.min.css"}
{"version":3,"sourceRoot":"","sources":["../../scss/style.scss","../../scss/ueb-link.scss","../../scss/ueb-node.scss","../../scss/ueb-pin.scss","../../scss/ueb-type-color.scss","../../scss/ueb-window.scss"],"names":[],"mappings":"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","file":"ueb-style.min.css"}

485
dist/ueblueprint.js vendored
View File

@@ -83,6 +83,7 @@ class Configuration {
begin: "ueb-tracking-mouse-begin",
end: "ueb-tracking-mouse-end",
}
static windowCloseEventName = "ueb-window-close"
static ModifierKeys = [
"Ctrl",
"Shift",
@@ -1752,15 +1753,11 @@ class ITemplate {
return this.#inputObjects
}
/**
* @param {T} element
*/
/** @param {T} element */
constructed(element) {
}
/**
* @param {T} element
*/
/** @param {T} element */
connectedCallback(element) {
}
@@ -1778,9 +1775,7 @@ class ITemplate {
update(element, changedProperties) {
}
/**
* @param {T} element
*/
/** @param {T} element */
render(element) {
return $``
}
@@ -1799,16 +1794,12 @@ class ITemplate {
updated(element, changedProperties) {
}
/**
* @param {T} element
*/
/** @param {T} element */
inputSetup(element) {
this.#inputObjects = this.createInputObjects(element);
}
/**
* @param {T} element
*/
/** @param {T} element */
cleanup(element) {
this.#inputObjects.forEach(v => v.unlistenDOMElement());
}
@@ -2084,7 +2075,6 @@ class KeyboardSelectAll extends IKeyboardShortcut {
*/
/**
* This class manages the ui gesture of mouse click and drag. Tha actual operations are implemented by the subclasses.
* @template {HTMLElement} T
* @extends {IPointing<T>}
*/
@@ -2103,19 +2093,26 @@ class IMouseClickDrag extends IPointing {
#mouseUpHandler
#trackingMouse = false
#movementListenedElement
#draggableElement
started = false
stepSize = 1
clickedPosition = [0, 0]
mouseLocation = [0, 0]
constructor(target, blueprint, options = {}) {
options.clickButton ??= 0;
options.consumeEvent ??= true;
options.exitAnyButton ??= true;
options.draggableElement ??= target;
options.looseTarget ??= false;
options.moveEverywhere ??= false;
super(target, blueprint, options);
this.clickedPosition = [0, 0];
this.stepSize = parseInt(options?.stepSize ?? Configuration.gridSize);
const movementListenedElement = this.options.moveEverywhere ? document.documentElement : this.movementSpace;
this.#movementListenedElement = this.options.moveEverywhere ? document.documentElement : this.movementSpace;
this.#draggableElement = this.options.draggableElement;
let self = this;
this.#mouseDownHandler = e => {
@@ -2128,7 +2125,7 @@ class IMouseClickDrag extends IPointing {
e.stopImmediatePropagation(); // Captured, don't call anyone else
}
// Attach the listeners
movementListenedElement.addEventListener("mousemove", self.#mouseStartedMovingHandler);
self.#movementListenedElement.addEventListener("mousemove", self.#mouseStartedMovingHandler);
document.addEventListener("mouseup", self.#mouseUpHandler);
self.clickedPosition = self.locationFromEvent(e);
self.clicked(self.clickedPosition);
@@ -2147,13 +2144,14 @@ class IMouseClickDrag extends IPointing {
e.stopImmediatePropagation(); // Captured, don't call anyone else
}
// Delegate from now on to self.#mouseMoveHandler
movementListenedElement.removeEventListener("mousemove", self.#mouseStartedMovingHandler);
movementListenedElement.addEventListener("mousemove", self.#mouseMoveHandler);
self.#movementListenedElement.removeEventListener("mousemove", self.#mouseStartedMovingHandler);
self.#movementListenedElement.addEventListener("mousemove", self.#mouseMoveHandler);
// Handler calls e.preventDefault() when it receives the event, this means dispatchEvent returns false
const dragEvent = self.getEvent(Configuration.trackingMouseEventName.begin);
self.#trackingMouse = self.target.dispatchEvent(dragEvent) == false;
const location = self.locationFromEvent(e);
// Do actual actions
this.mouseLocation = Utility.snapToGrid(this.clickedPosition, this.stepSize);
self.startDrag(location);
self.started = true;
};
@@ -2176,8 +2174,8 @@ class IMouseClickDrag extends IPointing {
e.stopImmediatePropagation(); // Captured, don't call anyone else
}
// Remove the handlers of "mousemove" and "mouseup"
movementListenedElement.removeEventListener("mousemove", self.#mouseStartedMovingHandler);
movementListenedElement.removeEventListener("mousemove", self.#mouseMoveHandler);
self.#movementListenedElement.removeEventListener("mousemove", self.#mouseStartedMovingHandler);
self.#movementListenedElement.removeEventListener("mousemove", self.#mouseMoveHandler);
document.removeEventListener("mouseup", self.#mouseUpHandler);
if (self.started) {
self.endDrag();
@@ -2196,14 +2194,14 @@ class IMouseClickDrag extends IPointing {
}
listenEvents() {
this.target.addEventListener("mousedown", this.#mouseDownHandler);
this.#draggableElement.addEventListener("mousedown", this.#mouseDownHandler);
if (this.options.clickButton == 2) {
this.target.addEventListener("contextmenu", e => e.preventDefault());
this.#draggableElement.addEventListener("contextmenu", e => e.preventDefault());
}
}
unlistenEvents() {
this.target.removeEventListener("mousedown", this.#mouseDownHandler);
this.#draggableElement.removeEventListener("mousedown", this.#mouseDownHandler);
}
getEvent(eventName) {
@@ -2461,16 +2459,10 @@ class IElement extends s {
* @template {SelectableDraggableTemplate} U
* @extends {IElement<T, U>}
*/
class ISelectableDraggableElement extends IElement {
class IDraggableElement extends IElement {
static properties = {
...super.properties,
selected: {
type: Boolean,
attribute: "data-selected",
reflect: true,
converter: Utility.booleanConverter,
},
locationX: {
type: Number,
attribute: false,
@@ -2483,29 +2475,11 @@ class ISelectableDraggableElement extends IElement {
constructor(...args) {
super(...args);
this.selected = false;
this.locationX = 0;
this.locationY = 0;
this.listeningDrag = false;
let self = this;
this.dragHandler = e => self.addLocation(e.detail.value);
}
connectedCallback() {
super.connectedCallback();
this.setSelected(this.selected);
}
disconnectedCallback() {
super.disconnectedCallback();
this.blueprint.removeEventListener(Configuration.nodeDragEventName, this.dragHandler);
}
/**
* @param {Number[]} param0
*/
/** @param {Number[]} param0 */
setLocation([x, y]) {
const d = [x - this.locationX, y - this.locationY];
this.locationX = x;
@@ -2522,29 +2496,12 @@ class ISelectableDraggableElement extends IElement {
}
}
/**
* @param {Number[]} param0
*/
/** @param {Number[]} param0 */
addLocation([x, y]) {
this.setLocation([this.locationX + x, this.locationY + y]);
}
setSelected(value = true) {
this.selected = value;
if (this.blueprint) {
if (this.selected) {
this.listeningDrag = true;
this.blueprint.addEventListener(Configuration.nodeDragEventName, this.dragHandler);
} else {
this.blueprint.removeEventListener(Configuration.nodeDragEventName, this.dragHandler);
this.listeningDrag = false;
}
}
}
/**
* @param {Number[]} value
*/
/** @param {Number[]} value */
dispatchDragEvent(value) {
const dragEvent = new CustomEvent(Configuration.nodeDragEventName, {
detail: {
@@ -2564,6 +2521,60 @@ class ISelectableDraggableElement extends IElement {
}
}
/**
* @typedef {import("../template/SelectableDraggableTemplate").default} SelectableDraggableTemplate
* @typedef {import("../entity/IEntity").default} IEntity
*/
/**
* @template {IEntity} T
* @template {IDraggableElement} U
* @extends {IElement<T, U>}
*/
class ISelectableDraggableElement extends IDraggableElement {
static properties = {
...super.properties,
selected: {
type: Boolean,
attribute: "data-selected",
reflect: true,
converter: Utility.booleanConverter,
},
}
constructor(...args) {
super(...args);
this.selected = false;
this.listeningDrag = false;
let self = this;
this.dragHandler = e => self.addLocation(e.detail.value);
}
connectedCallback() {
super.connectedCallback();
this.setSelected(this.selected);
}
disconnectedCallback() {
super.disconnectedCallback();
this.blueprint.removeEventListener(Configuration.nodeDragEventName, this.dragHandler);
}
setSelected(value = true) {
this.selected = value;
if (this.blueprint) {
if (this.selected) {
this.listeningDrag = true;
this.blueprint.addEventListener(Configuration.nodeDragEventName, this.dragHandler);
} else {
this.blueprint.removeEventListener(Configuration.nodeDragEventName, this.dragHandler);
this.listeningDrag = false;
}
}
}
}
/**
* @typedef {import("../../element/PinElement").default} PinElement
*/
@@ -3428,6 +3439,264 @@ class ExecPinTemplate extends PinTemplate {
}
}
/** @typedef {import("../../Blueprint").default} Blueprint */
/**
* @template {HTMLElement} T
* @extends {IPointing<T>}
*/
class IMouseClick extends IPointing {
/** @type {(e: MouseEvent) => void} */
#mouseDownHandler
/** @type {(e: MouseEvent) => void} */
#mouseUpHandler
constructor(target, blueprint, options = {}) {
options.clickButton ??= 0;
options.consumeEvent ??= true;
options.exitAnyButton ??= true;
options.looseTarget ??= false;
super(target, blueprint, options);
this.clickedPosition = [0, 0];
let self = this;
this.#mouseDownHandler = e => {
self.blueprint.setFocused(true);
switch (e.button) {
case self.options.clickButton:
// Either doesn't matter or consider the click only when clicking on the target, not descandants
if (self.options.looseTarget || e.target == e.currentTarget) {
if (self.options.consumeEvent) {
e.stopImmediatePropagation(); // Captured, don't call anyone else
}
// Attach the listeners
document.addEventListener("mouseup", self.#mouseUpHandler);
self.clickedPosition = self.locationFromEvent(e);
self.clicked(self.clickedPosition);
}
break
default:
if (!self.options.exitAnyButton) {
self.#mouseUpHandler(e);
}
break
}
};
this.#mouseUpHandler = e => {
if (!self.options.exitAnyButton || e.button == self.options.clickButton) {
if (self.options.consumeEvent) {
e.stopImmediatePropagation(); // Captured, don't call anyone else
}
// Remove the handlers of "mousemove" and "mouseup"
document.removeEventListener("mouseup", self.#mouseUpHandler);
self.unclicked();
}
};
this.listenEvents();
}
listenEvents() {
this.target.addEventListener("mousedown", this.#mouseDownHandler);
if (this.options.clickButton == 2) {
this.target.addEventListener("contextmenu", e => e.preventDefault());
}
}
unlistenEvents() {
this.target.removeEventListener("mousedown", this.#mouseDownHandler);
}
/* Subclasses will override the following methods */
clicked(location) {
}
unclicked(location) {
}
}
/**
* @typedef {import("../../Blueprint").default} Blueprint
* @typedef {import("../../element/ISelectableDraggableElement").default} ISelectableDraggableElement
*/
/** @extends {IMouseClickDrag<ISelectableDraggableElement>} */
class MouseMoveDraggable extends IMouseClickDrag {
dragTo(location, movement) {
const initialTargetLocation = [this.target.locationX, this.target.locationY];
const [mouseLocation, targetLocation] = this.stepSize > 1
? [Utility.snapToGrid(location, this.stepSize), Utility.snapToGrid(initialTargetLocation, this.stepSize)]
: [location, initialTargetLocation];
const d = [
mouseLocation[0] - this.mouseLocation[0],
mouseLocation[1] - this.mouseLocation[1]
];
if (d[0] == 0 && d[1] == 0) {
return
}
// Make sure it snaps on the grid
d[0] += targetLocation[0] - this.target.locationX;
d[1] += targetLocation[1] - this.target.locationY;
this.target.addLocation(d);
// Reassign the position of mouse
this.mouseLocation = mouseLocation;
}
}
/**
* @typedef {import("../element/IDraggableElement").default} IDraggableElement
*/
/**
* @template {ISelectableDraggableElement} T
* @extends {ITemplate<T>}
*/
class IDraggableTemplate extends ITemplate {
/** @param {T} element */
getDraggableElement(element) {
return element
}
createDraggableObject(element) {
return new MouseMoveDraggable(element, element.blueprint, {
draggableElement: this.getDraggableElement(element),
looseTarget: true,
})
}
/** @param {T} element */
createInputObjects(element) {
return [
...super.createInputObjects(element),
this.createDraggableObject(element),
]
}
/**
* @param {T} element
* @param {Map} changedProperties
*/
update(element, changedProperties) {
super.update(element, changedProperties);
if (changedProperties.has("locationX")) {
element.style.setProperty("--ueb-position-x", `${element.locationX}`);
}
if (changedProperties.has("locationY")) {
element.style.setProperty("--ueb-position-y", `${element.locationY}`);
}
}
}
/** @typedef {import("../element/WindowElement").default} WindowElement */
/** @extends {SelectableDraggableTemplate<WindowElement>} */
class WindowTemplate extends IDraggableTemplate {
static windowName = $`Window`
toggleAdvancedDisplayHandler
/** @param {WindowElement} element */
getDraggableElement(element) {
return element.querySelector(".ueb-window-top")
}
createDraggableObject(element) {
return new MouseMoveDraggable(element, element.blueprint, {
draggableElement: this.getDraggableElement(element),
looseTarget: true,
stepSize: 1,
})
}
/** @param {WindowElement} element */
render(element) {
return $`
<div class="ueb-window">
<div class="ueb-window-top">
<div class="ueb-window-name">${this.constructor.windowName}</div>
<div class="ueb-window-close">
<svg viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
<line x1="2" y1="2" x2="30" y2="30" stroke="currentColor" stroke-width="4" />
<line x1="30" y1="2" x2="2" y2="30" stroke="currentColor" stroke-width="4" />
</svg>
</div>
</div>
<div class="ueb-window-content">
Content
</div>
</div>
`
}
}
/** @extends {ISelectableDraggableElement<Object, WindowTemplate>} */
class WindowElement extends ISelectableDraggableElement {
static #typeTemplateMap = {
"window": WindowTemplate,
}
static properties = {
...ISelectableDraggableElement.properties,
type: {
type: String,
attribute: "data-type",
reflect: true,
},
}
constructor(properties = {}) {
properties.type ??= "window";
super({}, new WindowElement.#typeTemplateMap[properties.type]());
this.type = properties.type;
}
disconnectedCallback() {
super.disconnectedCallback();
this.dispatchCloseEvent();
}
dispatchCloseEvent(value) {
let deleteEvent = new CustomEvent(Configuration.windowCloseEventName, {
bubbles: true,
cancelable: true,
});
this.dispatchEvent(deleteEvent);
}
}
customElements.define("ueb-window", WindowElement);
/**
* @template {HTMLElement} T
* @extends {IMouseClick<T>}
*/
class MouseOpenWindow extends IMouseClick {
#window
constructor(target, blueprint, options = {}) {
options.windowType ??= "window";
super(target, blueprint, options);
}
clicked(location) {
}
unclicked(location) {
this.#window = new WindowElement({
type: this.options.windowType
});
this.blueprint.append(this.#window);
}
}
/**
* @typedef {import("../element/PinElement").default} PinElement
* @typedef {import("../entity/LinearColorEntity").default} LinearColorEntity}
@@ -3447,6 +3716,20 @@ class LinearColorPinTemplate extends IInputPinTemplate {
this.#input = pin.querySelector(".ueb-pin-input");
}
/**
* @param {PinElement} pin
* @returns {IInput[]}
*/
createInputObjects(pin) {
return [
...super.createInputObjects(pin),
new MouseOpenWindow(this.#input, pin.blueprint, {
moveEverywhere: true,
looseTarget: true
})
]
}
/**
* @param {PinElement} pin
*/
@@ -3467,11 +3750,8 @@ class LinearColorPinTemplate extends IInputPinTemplate {
renderInput(pin) {
if (pin.isInput()) {
return $`
<span
class="ueb-pin-input"
data-linear-color="${pin.defaultValue.toString()}"
style="--ueb-linear-color:rgba(${pin.defaultValue.toString()})"
>
<span class="ueb-pin-input" data-linear-color="${pin.defaultValue.toString()}"
.style="--ueb-linear-color:rgba(${pin.defaultValue.toString()})">
</span>
`
}
@@ -3648,8 +3928,8 @@ class PinElement extends IElement {
"exec": ExecPinTemplate,
"name": NamePinTemplate,
"real": RealPinTemplate,
"string": StringPinTemplate,
"REFERENCE": ReferencePinTemplate,
"string": StringPinTemplate,
}
static properties = {
@@ -3860,21 +4140,10 @@ customElements.define("ueb-pin", PinElement);
* @typedef {import("../../element/ISelectableDraggableElement").default} ISelectableDraggableElement
*/
/**
* @extends {IMouseClickDrag<ISelectableDraggableElement>}
*/
class MouseMoveNodes extends IMouseClickDrag {
constructor(target, blueprint, options) {
super(target, blueprint, options);
this.stepSize = parseInt(options?.stepSize ?? Configuration.gridSize);
this.mouseLocation = [0, 0];
}
/** @extends {IMouseClickDrag<ISelectableDraggableElement>} */
class MouseMoveNodes extends MouseMoveDraggable {
startDrag() {
// Get the current mouse position
this.mouseLocation = Utility.snapToGrid(this.clickedPosition, this.stepSize);
if (!this.target.selected) {
this.blueprint.unselectAll();
this.target.setSelected(true);
@@ -3890,17 +4159,13 @@ class MouseMoveNodes extends IMouseClickDrag {
mouseLocation[0] - this.mouseLocation[0],
mouseLocation[1] - this.mouseLocation[1]
];
if (d[0] == 0 && d[1] == 0) {
return
}
// Make sure it snaps on the grid
d[0] += targetLocation[0] - this.target.locationX;
d[1] += targetLocation[1] - this.target.locationY;
this.target.dispatchDragEvent(d);
// Reassign the position of mouse
this.mouseLocation = mouseLocation;
}
@@ -3921,32 +4186,18 @@ class MouseMoveNodes extends IMouseClickDrag {
* @template {ISelectableDraggableElement} T
* @extends {ITemplate<T>}
*/
class SelectableDraggableTemplate extends ITemplate {
class SelectableDraggableTemplate extends IDraggableTemplate {
/**
* @param {T} element
*/
createInputObjects(element) {
return [
...super.createInputObjects(element),
new MouseMoveNodes(element, element.blueprint, {
looseTarget: true
}),
]
/** @param {T} element */
getDraggableElement(element) {
return element
}
/**
* @param {T} element
* @param {Map} changedProperties
*/
update(element, changedProperties) {
super.update(element, changedProperties);
if (changedProperties.has("locationX")) {
element.style.setProperty("--ueb-position-x", `${element.locationX}`);
}
if (changedProperties.has("locationY")) {
element.style.setProperty("--ueb-position-y", `${element.locationY}`);
}
createDraggableObject(element) {
return new MouseMoveNodes(element, element.blueprint, {
draggableElement: this.getDraggableElement(element),
looseTarget: true,
})
}
/**

4
dist/ueblueprint.min.js vendored
View File

File diff suppressed because one or more lines are too long

1
js/Configuration.js
View File

@@ -59,6 +59,7 @@ export default class Configuration {
begin: "ueb-tracking-mouse-begin",
end: "ueb-tracking-mouse-end",
}
static windowCloseEventName = "ueb-window-close"
static ModifierKeys = [
"Ctrl",
"Shift",

75
js/element/IDraggableElement.js Normal file
View File

@@ -0,0 +1,75 @@
import Configuration from "../Configuration"
import IElement from "./IElement"
import Utility from "../Utility"
/**
* @typedef {import("../template/SelectableDraggableTemplate").default} SelectableDraggableTemplate
* @typedef {import("../entity/IEntity").default} IEntity
*/
/**
* @template {IEntity} T
* @template {SelectableDraggableTemplate} U
* @extends {IElement<T, U>}
*/
export default class IDraggableElement extends IElement {
static properties = {
...super.properties,
locationX: {
type: Number,
attribute: false,
},
locationY: {
type: Number,
attribute: false,
},
}
constructor(...args) {
super(...args)
this.locationX = 0
this.locationY = 0
}
/** @param {Number[]} param0 */
setLocation([x, y]) {
const d = [x - this.locationX, y - this.locationY]
this.locationX = x
this.locationY = y
if (this.blueprint) {
const dragLocalEvent = new CustomEvent(Configuration.nodeDragLocalEventName, {
detail: {
value: d,
},
bubbles: false,
cancelable: true
})
this.dispatchEvent(dragLocalEvent)
}
}
/** @param {Number[]} param0 */
addLocation([x, y]) {
this.setLocation([this.locationX + x, this.locationY + y])
}
/** @param {Number[]} value */
dispatchDragEvent(value) {
const dragEvent = new CustomEvent(Configuration.nodeDragEventName, {
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)
}
}
}

2
js/element/IFromToPositionedElement.js
View File

@@ -1,4 +1,4 @@
import IElement from "./IElement";
import IElement from "./IElement"
/**
* @typedef {import("../entity/IEntity").default} IEntity

64
js/element/ISelectableDraggableElement.js
View File

@@ -1,6 +1,7 @@
import Configuration from "../Configuration"
import IElement from "./IElement"
import Utility from "../Utility"
import IDraggableElement from "./IDraggableElement"
/**
* @typedef {import("../template/SelectableDraggableTemplate").default} SelectableDraggableTemplate
@@ -9,10 +10,10 @@ import Utility from "../Utility"
/**
* @template {IEntity} T
* @template {SelectableDraggableTemplate} U
* @template {IDraggableElement} U
* @extends {IElement<T, U>}
*/
export default class ISelectableDraggableElement extends IElement {
export default class ISelectableDraggableElement extends IDraggableElement {
static properties = {
...super.properties,
@@ -22,24 +23,12 @@ export default class ISelectableDraggableElement extends IElement {
reflect: true,
converter: Utility.booleanConverter,
},
locationX: {
type: Number,
attribute: false,
},
locationY: {
type: Number,
attribute: false,
},
}
constructor(...args) {
super(...args)
this.selected = false
this.locationX = 0
this.locationY = 0
this.listeningDrag = false
let self = this
this.dragHandler = e => self.addLocation(e.detail.value)
}
@@ -54,32 +43,6 @@ export default class ISelectableDraggableElement extends IElement {
this.blueprint.removeEventListener(Configuration.nodeDragEventName, this.dragHandler)
}
/**
* @param {Number[]} param0
*/
setLocation([x, y]) {
const d = [x - this.locationX, y - this.locationY]
this.locationX = x
this.locationY = y
if (this.blueprint) {
const dragLocalEvent = new CustomEvent(Configuration.nodeDragLocalEventName, {
detail: {
value: d,
},
bubbles: false,
cancelable: true
})
this.dispatchEvent(dragLocalEvent)
}
}
/**
* @param {Number[]} param0
*/
addLocation([x, y]) {
this.setLocation([this.locationX + x, this.locationY + y])
}
setSelected(value = true) {
this.selected = value
if (this.blueprint) {
@@ -92,25 +55,4 @@ export default class ISelectableDraggableElement extends IElement {
}
}
}
/**
* @param {Number[]} value
*/
dispatchDragEvent(value) {
const dragEvent = new CustomEvent(Configuration.nodeDragEventName, {
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)
}
}
}

2
js/element/PinElement.js
View File

@@ -31,8 +31,8 @@ export default class PinElement extends IElement {
"exec": ExecPinTemplate,
"name": NamePinTemplate,
"real": RealPinTemplate,
"string": StringPinTemplate,
"REFERENCE": ReferencePinTemplate,
"string": StringPinTemplate,
}
static properties = {

41
js/element/WindowElement.js Normal file
View File

@@ -0,0 +1,41 @@
import Configuration from "../Configuration"
import ISelectableDraggableElement from "./ISelectableDraggableElement"
import WindowTemplate from "../template/WindowTemplate"
/** @extends {ISelectableDraggableElement<Object, WindowTemplate>} */
export default class WindowElement extends ISelectableDraggableElement {
static #typeTemplateMap = {
"window": WindowTemplate,
}
static properties = {
...ISelectableDraggableElement.properties,
type: {
type: String,
attribute: "data-type",
reflect: true,
},
}
constructor(properties = {}) {
properties.type ??= "window"
super({}, new WindowElement.#typeTemplateMap[properties.type]())
this.type = properties.type
}
disconnectedCallback() {
super.disconnectedCallback()
this.dispatchCloseEvent()
}
dispatchCloseEvent(value) {
let deleteEvent = new CustomEvent(Configuration.windowCloseEventName, {
bubbles: true,
cancelable: true,
})
this.dispatchEvent(deleteEvent)
}
}
customElements.define("ueb-window", WindowElement)

2
js/entity/SimpleSerializationVectorEntity.js
View File

@@ -1,4 +1,4 @@
import VectorEntity from "./VectorEntity";
import VectorEntity from "./VectorEntity"
export default class SimpleSerializationVectorEntity extends VectorEntity {
}

80
js/input/mouse/IMouseClick.js Normal file
View File

@@ -0,0 +1,80 @@
import IPointing from "./IPointing"
/** @typedef {import("../../Blueprint").default} Blueprint */
/**
* @template {HTMLElement} T
* @extends {IPointing<T>}
*/
export default class IMouseClick extends IPointing {
/** @type {(e: MouseEvent) => void} */
#mouseDownHandler
/** @type {(e: MouseEvent) => void} */
#mouseUpHandler
constructor(target, blueprint, options = {}) {
options.clickButton ??= 0
options.consumeEvent ??= true
options.exitAnyButton ??= true
options.looseTarget ??= false
super(target, blueprint, options)
this.clickedPosition = [0, 0]
let self = this
this.#mouseDownHandler = e => {
self.blueprint.setFocused(true)
switch (e.button) {
case self.options.clickButton:
// Either doesn't matter or consider the click only when clicking on the target, not descandants
if (self.options.looseTarget || e.target == e.currentTarget) {
if (self.options.consumeEvent) {
e.stopImmediatePropagation() // Captured, don't call anyone else
}
// Attach the listeners
document.addEventListener("mouseup", self.#mouseUpHandler)
self.clickedPosition = self.locationFromEvent(e)
self.clicked(self.clickedPosition)
}
break
default:
if (!self.options.exitAnyButton) {
self.#mouseUpHandler(e)
}
break
}
}
this.#mouseUpHandler = e => {
if (!self.options.exitAnyButton || e.button == self.options.clickButton) {
if (self.options.consumeEvent) {
e.stopImmediatePropagation() // Captured, don't call anyone else
}
// Remove the handlers of "mousemove" and "mouseup"
document.removeEventListener("mouseup", self.#mouseUpHandler)
self.unclicked()
}
}
this.listenEvents()
}
listenEvents() {
this.target.addEventListener("mousedown", this.#mouseDownHandler)
if (this.options.clickButton == 2) {
this.target.addEventListener("contextmenu", e => e.preventDefault())
}
}
unlistenEvents() {
this.target.removeEventListener("mousedown", this.#mouseDownHandler)
}
/* Subclasses will override the following methods */
clicked(location) {
}
unclicked(location) {
}
}

30
js/input/mouse/IMouseClickDrag.js
View File

@@ -1,12 +1,12 @@
import Configuration from "../../Configuration"
import IPointing from "./IPointing"
import Utility from "../../Utility"
/**
* @typedef {import("../../Blueprint").default} Blueprint
*/
/**
* This class manages the ui gesture of mouse click and drag. Tha actual operations are implemented by the subclasses.
* @template {HTMLElement} T
* @extends {IPointing<T>}
*/
@@ -25,19 +25,26 @@ export default class IMouseClickDrag extends IPointing {
#mouseUpHandler
#trackingMouse = false
#movementListenedElement
#draggableElement
started = false
stepSize = 1
clickedPosition = [0, 0]
mouseLocation = [0, 0]
constructor(target, blueprint, options = {}) {
options.clickButton ??= 0
options.consumeEvent ??= true
options.exitAnyButton ??= true
options.draggableElement ??= target
options.looseTarget ??= false
options.moveEverywhere ??= false
super(target, blueprint, options)
this.clickedPosition = [0, 0]
this.stepSize = parseInt(options?.stepSize ?? Configuration.gridSize)
const movementListenedElement = this.options.moveEverywhere ? document.documentElement : this.movementSpace
this.#movementListenedElement = this.options.moveEverywhere ? document.documentElement : this.movementSpace
this.#draggableElement = this.options.draggableElement
let self = this
this.#mouseDownHandler = e => {
@@ -50,7 +57,7 @@ export default class IMouseClickDrag extends IPointing {
e.stopImmediatePropagation() // Captured, don't call anyone else
}
// Attach the listeners
movementListenedElement.addEventListener("mousemove", self.#mouseStartedMovingHandler)
self.#movementListenedElement.addEventListener("mousemove", self.#mouseStartedMovingHandler)
document.addEventListener("mouseup", self.#mouseUpHandler)
self.clickedPosition = self.locationFromEvent(e)
self.clicked(self.clickedPosition)
@@ -69,13 +76,14 @@ export default class IMouseClickDrag extends IPointing {
e.stopImmediatePropagation() // Captured, don't call anyone else
}
// Delegate from now on to self.#mouseMoveHandler
movementListenedElement.removeEventListener("mousemove", self.#mouseStartedMovingHandler)
movementListenedElement.addEventListener("mousemove", self.#mouseMoveHandler)
self.#movementListenedElement.removeEventListener("mousemove", self.#mouseStartedMovingHandler)
self.#movementListenedElement.addEventListener("mousemove", self.#mouseMoveHandler)
// Handler calls e.preventDefault() when it receives the event, this means dispatchEvent returns false
const dragEvent = self.getEvent(Configuration.trackingMouseEventName.begin)
self.#trackingMouse = self.target.dispatchEvent(dragEvent) == false
const location = self.locationFromEvent(e)
// Do actual actions
this.mouseLocation = Utility.snapToGrid(this.clickedPosition, this.stepSize)
self.startDrag(location)
self.started = true
}
@@ -98,8 +106,8 @@ export default class IMouseClickDrag extends IPointing {
e.stopImmediatePropagation() // Captured, don't call anyone else
}
// Remove the handlers of "mousemove" and "mouseup"
movementListenedElement.removeEventListener("mousemove", self.#mouseStartedMovingHandler)
movementListenedElement.removeEventListener("mousemove", self.#mouseMoveHandler)
self.#movementListenedElement.removeEventListener("mousemove", self.#mouseStartedMovingHandler)
self.#movementListenedElement.removeEventListener("mousemove", self.#mouseMoveHandler)
document.removeEventListener("mouseup", self.#mouseUpHandler)
if (self.started) {
self.endDrag()
@@ -118,14 +126,14 @@ export default class IMouseClickDrag extends IPointing {
}
listenEvents() {
this.target.addEventListener("mousedown", this.#mouseDownHandler)
this.#draggableElement.addEventListener("mousedown", this.#mouseDownHandler)
if (this.options.clickButton == 2) {
this.target.addEventListener("contextmenu", e => e.preventDefault())
this.#draggableElement.addEventListener("contextmenu", e => e.preventDefault())
}
}
unlistenEvents() {
this.target.removeEventListener("mousedown", this.#mouseDownHandler)
this.#draggableElement.removeEventListener("mousedown", this.#mouseDownHandler)
}
getEvent(eventName) {

2
js/input/mouse/MouseIgnore.js
View File

@@ -1,4 +1,4 @@
import IMouseClickDrag from "./IMouseClickDrag";
import IMouseClickDrag from "./IMouseClickDrag"
/**
* @typedef {import("../../element/PinElement").default} PinElement

31
js/input/mouse/MouseMoveDraggable.js Executable file
View File

@@ -0,0 +1,31 @@
import IMouseClickDrag from "./IMouseClickDrag"
import Utility from "../../Utility"
/**
* @typedef {import("../../Blueprint").default} Blueprint
* @typedef {import("../../element/ISelectableDraggableElement").default} ISelectableDraggableElement
*/
/** @extends {IMouseClickDrag<ISelectableDraggableElement>} */
export default class MouseMoveDraggable extends IMouseClickDrag {
dragTo(location, movement) {
const initialTargetLocation = [this.target.locationX, this.target.locationY]
const [mouseLocation, targetLocation] = this.stepSize > 1
? [Utility.snapToGrid(location, this.stepSize), Utility.snapToGrid(initialTargetLocation, this.stepSize)]
: [location, initialTargetLocation]
const d = [
mouseLocation[0] - this.mouseLocation[0],
mouseLocation[1] - this.mouseLocation[1]
]
if (d[0] == 0 && d[1] == 0) {
return
}
// Make sure it snaps on the grid
d[0] += targetLocation[0] - this.target.locationX
d[1] += targetLocation[1] - this.target.locationY
this.target.addLocation(d)
// Reassign the position of mouse
this.mouseLocation = mouseLocation
}
}

21
js/input/mouse/MouseMoveNodes.js
View File

@@ -1,5 +1,5 @@
import Configuration from "../../Configuration"
import IMouseClickDrag from "./IMouseClickDrag"
import MouseMoveDraggable from "./MouseMoveDraggable"
import Utility from "../../Utility"
/**
@@ -7,21 +7,10 @@ import Utility from "../../Utility"
* @typedef {import("../../element/ISelectableDraggableElement").default} ISelectableDraggableElement
*/
/**
* @extends {IMouseClickDrag<ISelectableDraggableElement>}
*/
export default class MouseMoveNodes extends IMouseClickDrag {
constructor(target, blueprint, options) {
super(target, blueprint, options)
this.stepSize = parseInt(options?.stepSize ?? Configuration.gridSize)
this.mouseLocation = [0, 0]
}
/** @extends {IMouseClickDrag<ISelectableDraggableElement>} */
export default class MouseMoveNodes extends MouseMoveDraggable {
startDrag() {
// Get the current mouse position
this.mouseLocation = Utility.snapToGrid(this.clickedPosition, this.stepSize)
if (!this.target.selected) {
this.blueprint.unselectAll()
this.target.setSelected(true)
@@ -37,17 +26,13 @@ export default class MouseMoveNodes extends IMouseClickDrag {
mouseLocation[0] - this.mouseLocation[0],
mouseLocation[1] - this.mouseLocation[1]
]
if (d[0] == 0 && d[1] == 0) {
return
}
// Make sure it snaps on the grid
d[0] += targetLocation[0] - this.target.locationX
d[1] += targetLocation[1] - this.target.locationY
this.target.dispatchDragEvent(d)
// Reassign the position of mouse
this.mouseLocation = mouseLocation
}

26
js/input/mouse/MouseOpenWindow.js Normal file
View File

@@ -0,0 +1,26 @@
import IMouseClick from "./IMouseClick"
import WindowElement from "../../element/WindowElement"
/**
* @template {HTMLElement} T
* @extends {IMouseClick<T>}
*/
export default class MouseOpenWindow extends IMouseClick {
#window
constructor(target, blueprint, options = {}) {
options.windowType ??= "window"
super(target, blueprint, options)
}
clicked(location) {
}
unclicked(location) {
this.#window = new WindowElement({
type: this.options.windowType
})
this.blueprint.append(this.#window)
}
}

7
js/template/ColorPickerWindowTemplate.js Executable file
View File

@@ -0,0 +1,7 @@
import WindowTemplate from "./WindowTemplate"
/** @typedef {import("../element/NodeElement").default} NodeElement */
export default class ColorPickerWindowTemplate extends WindowTemplate {
}

47
js/template/IDraggableTemplate.js Executable file
View File

@@ -0,0 +1,47 @@
import ITemplate from "./ITemplate"
import MouseMoveDraggable from "../input/mouse/MouseMoveDraggable"
/**
* @typedef {import("../element/IDraggableElement").default} IDraggableElement
*/
/**
* @template {ISelectableDraggableElement} T
* @extends {ITemplate<T>}
*/
export default class IDraggableTemplate extends ITemplate {
/** @param {T} element */
getDraggableElement(element) {
return element
}
createDraggableObject(element) {
return new MouseMoveDraggable(element, element.blueprint, {
draggableElement: this.getDraggableElement(element),
looseTarget: true,
})
}
/** @param {T} element */
createInputObjects(element) {
return [
...super.createInputObjects(element),
this.createDraggableObject(element),
]
}
/**
* @param {T} element
* @param {Map} changedProperties
*/
update(element, changedProperties) {
super.update(element, changedProperties)
if (changedProperties.has("locationX")) {
element.style.setProperty("--ueb-position-x", `${element.locationX}`)
}
if (changedProperties.has("locationY")) {
element.style.setProperty("--ueb-position-y", `${element.locationY}`)
}
}
}

20
js/template/ITemplate.js
View File

@@ -18,15 +18,11 @@ export default class ITemplate {
return this.#inputObjects
}
/**
* @param {T} element
*/
/** @param {T} element */
constructed(element) {
}
/**
* @param {T} element
*/
/** @param {T} element */
connectedCallback(element) {
}
@@ -44,9 +40,7 @@ export default class ITemplate {
update(element, changedProperties) {
}
/**
* @param {T} element
*/
/** @param {T} element */
render(element) {
return html``
}
@@ -65,16 +59,12 @@ export default class ITemplate {
updated(element, changedProperties) {
}
/**
* @param {T} element
*/
/** @param {T} element */
inputSetup(element) {
this.#inputObjects = this.createInputObjects(element)
}
/**
* @param {T} element
*/
/** @param {T} element */
cleanup(element) {
this.#inputObjects.forEach(v => v.unlistenDOMElement())
}

22
js/template/LinearColorPinTemplate.js
View File

@@ -1,4 +1,5 @@
import { html } from "lit"
import MouseOpenWindow from "../input/mouse/MouseOpenWindow"
import IInputPinTemplate from "./IInputPinTemplate"
/**
@@ -20,6 +21,20 @@ export default class LinearColorPinTemplate extends IInputPinTemplate {
this.#input = pin.querySelector(".ueb-pin-input")
}
/**
* @param {PinElement} pin
* @returns {IInput[]}
*/
createInputObjects(pin) {
return [
...super.createInputObjects(pin),
new MouseOpenWindow(this.#input, pin.blueprint, {
moveEverywhere: true,
looseTarget: true
})
]
}
/**
* @param {PinElement} pin
*/
@@ -40,11 +55,8 @@ export default class LinearColorPinTemplate extends IInputPinTemplate {
renderInput(pin) {
if (pin.isInput()) {
return html`
<span
class="ueb-pin-input"
data-linear-color="${pin.defaultValue.toString()}"
style="--ueb-linear-color:rgba(${pin.defaultValue.toString()})"
>
<span class="ueb-pin-input" data-linear-color="${pin.defaultValue.toString()}"
.style="--ueb-linear-color:rgba(${pin.defaultValue.toString()})">
</span>
`
}

33
js/template/SelectableDraggableTemplate.js
View File

@@ -1,3 +1,4 @@
import IDraggableTemplate from "./IDraggableTemplate"
import ITemplate from "./ITemplate"
import MouseMoveNodes from "../input/mouse/MouseMoveNodes"
@@ -9,32 +10,18 @@ import MouseMoveNodes from "../input/mouse/MouseMoveNodes"
* @template {ISelectableDraggableElement} T
* @extends {ITemplate<T>}
*/
export default class SelectableDraggableTemplate extends ITemplate {
export default class SelectableDraggableTemplate extends IDraggableTemplate {
/**
* @param {T} element
*/
createInputObjects(element) {
return [
...super.createInputObjects(element),
new MouseMoveNodes(element, element.blueprint, {
looseTarget: true
}),
]
/** @param {T} element */
getDraggableElement(element) {
return element
}
/**
* @param {T} element
* @param {Map} changedProperties
*/
update(element, changedProperties) {
super.update(element, changedProperties)
if (changedProperties.has("locationX")) {
element.style.setProperty("--ueb-position-x", `${element.locationX}`)
}
if (changedProperties.has("locationY")) {
element.style.setProperty("--ueb-position-y", `${element.locationY}`)
}
createDraggableObject(element) {
return new MouseMoveNodes(element, element.blueprint, {
draggableElement: this.getDraggableElement(element),
looseTarget: true,
})
}
/**

46
js/template/WindowTemplate.js Executable file
View File

@@ -0,0 +1,46 @@
import { html } from "lit"
import IDraggableTemplate from "./IDraggableTemplate"
import MouseMoveDraggable from "../input/mouse/MouseMoveDraggable"
/** @typedef {import("../element/WindowElement").default} WindowElement */
/** @extends {SelectableDraggableTemplate<WindowElement>} */
export default class WindowTemplate extends IDraggableTemplate {
static windowName = html`Window`
toggleAdvancedDisplayHandler
/** @param {WindowElement} element */
getDraggableElement(element) {
return element.querySelector(".ueb-window-top")
}
createDraggableObject(element) {
return new MouseMoveDraggable(element, element.blueprint, {
draggableElement: this.getDraggableElement(element),
looseTarget: true,
stepSize: 1,
})
}
/** @param {WindowElement} element */
render(element) {
return html`
<div class="ueb-window">
<div class="ueb-window-top">
<div class="ueb-window-name">${this.constructor.windowName}</div>
<div class="ueb-window-close">
<svg viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
<line x1="2" y1="2" x2="30" y2="30" stroke="currentColor" stroke-width="4" />
<line x1="30" y1="2" x2="2" y2="30" stroke="currentColor" stroke-width="4" />
</svg>
</div>
</div>
<div class="ueb-window-content">
Content
</div>
</div>
`
}
}

3
scss/export.scss
View File

@@ -1,5 +1,6 @@
@use "style.scss";
@use "ueb-link.scss";
@use "ueb-node.scss";
@use "ueb-pin.scss";
@use "ueb-link.scss";
@use "ueb-type-color.scss";
@use "ueb-window.scss";

25
scss/ueb-window.scss Normal file
View File

@@ -0,0 +1,25 @@
@use "style.scss";
ueb-window {
display: block;
position: absolute;
top: 0;
left: 0;
transform: translateX(calc(var(--ueb-position-x) * 1px)) translateY(calc(var(--ueb-position-y) * 1px));
z-index: 1000;
}
.ueb-window-top {
display: flex;
flex-direction: row;
align-items: center;
padding: 4px 8px;
height: 30px;
background: #1a1a1a;
}
.ueb-window-close {
padding: 8px;
height: 12px;
width: 12px;
}