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

WIP

Browse Source
This commit is contained in:
barsdeveloper
2022-04-02 11:13:34 +02:00
parent 9ab8801eee
commit e901932953
26 changed files with 392 additions and 279 deletions
Download Patch File Download Diff File Expand all files Collapse all files

23
js/Blueprint.js
View File

@@ -45,13 +45,13 @@ export default class Blueprint extends IElement {
set translateValue(value) {
this.#translateValue = value
}
/** @type {number} */
/** @type {Number} */
gridSize
/** @type {NodeElement[]}" */
nodes = []
/** @type {LinkElement[]}" */
links = []
/** @type {number[]} */
/** @type {Number[]} */
mousePosition = [0, 0]
/** @type {HTMLElement} */
gridElement = null
@@ -63,7 +63,7 @@ export default class Blueprint extends IElement {
selectorElement = null
/** @type {HTMLElement} */
nodesContainerElement = null
/** @type {number} */
/** @type {Number} */
zoom = 0
/** @type {HTMLElement} */
headerElement = null
@@ -102,8 +102,8 @@ export default class Blueprint extends IElement {
}
/**
* @param {number} x
* @param {number} y
* @param {Number} x
* @param {Number} y
*/
#expand(x, y) {
// TODO remove
@@ -115,8 +115,8 @@ export default class Blueprint extends IElement {
}
/**
* @param {number} x
* @param {number} y
* @param {Number} x
* @param {Number} y
*/
#translate(x, y) {
x = Math.round(x)
@@ -452,6 +452,15 @@ export default class Blueprint extends IElement {
}
this.dispatchEvent(event)
}
dispatchEditTextEvent(value) {
const event = new CustomEvent(
value
? this.settings.editTextEventName.begin
: this.settings.editTextEventName.end
)
this.dispatchEvent(event)
}
}
customElements.define(Blueprint.tagName, Blueprint)

4
js/Configuration.js
View File

@@ -2,6 +2,10 @@
export default class Configuration {
deleteNodesKeyboardKey = "Delete"
editTextEventName = {
begin: "ueb-edit-text-begin",
end: "ueb-edit-text-end"
}
enableZoomIn = ["LeftControl", "RightControl"] // Button to enable more than 0 (1:1) zoom
expandGridSize = 400
fontSize = "12px"

1
js/Utility.js
View File

@@ -1,6 +1,5 @@
// @ts-check
import Configuration from "./Configuration"
import TypeInitialization from "./entity/TypeInitialization"
export default class Utility {

1
js/element/ISelectableDraggableElement.js
View File

@@ -1,6 +1,5 @@
// @ts-check
import Configuration from "../Configuration"
import IElement from "./IElement"
import MouseMoveNodes from "../input/mouse/MouseMoveNodes"

1
js/element/LinkElement.js
View File

@@ -1,6 +1,5 @@
// @ts-check
import Configuration from "../Configuration"
import IElement from "./IElement"
import LinkTemplate from "../template/LinkTemplate"

1
js/element/NodeElement.js
View File

@@ -1,6 +1,5 @@
// @ts-check
import Configuration from "../Configuration"
import ISelectableDraggableElement from "./ISelectableDraggableElement"
import NodeTemplate from "../template/NodeTemplate"
import ObjectEntity from "../entity/ObjectEntity"

8
js/element/PinElement.js
View File

@@ -5,6 +5,7 @@ import MouseCreateLink from "../input/mouse/MouseCreateLink"
import PinTemplate from "../template/PinTemplate"
import ExecPinTemplate from "../template/ExecPinTemplate"
import StringPinTemplate from "../template/StringPinTemplate"
import KeyboardIgnoreSelectAll from "../input/keybaord/KeyboardIgnoreSelectAll"
/**
* @typedef {import("../entity/GuidEntity").default} GuidEntity
@@ -53,6 +54,9 @@ export default class PinElement extends IElement {
moveEverywhere: true,
looseTarget: true
}),
new KeyboardIgnoreSelectAll(this, this.blueprint, {
consumeEvent: true
})
]
}
@@ -88,8 +92,8 @@ export default class PinElement extends IElement {
return this.entity.isOutput()
}
isConnected() {
return this.entity.isConnected()
isLinked() {
return this.entity.isLinked()
}
getType() {

6
js/entity/PinEntity.js
View File

@@ -83,7 +83,11 @@ export default class PinEntity extends IEntity {
return !this.bHidden && this.Direction === "EGPD_Output"
}
isConnected() {
/**
*
* @returns {Boolean}
*/
isLinked() {
return this.LinkedTo?.length > 0 ?? false
}

31
js/input/IContext.js
View File

@@ -14,38 +14,33 @@ export default class IContext {
/** @type {Object} */
options
#hasFocus = false
get hasFocus() {
return this.#hasFocus
}
set hasFocus(_) {
}
constructor(target, blueprint, options) {
this.target = target
this.blueprint = blueprint
this.options = options
let self = this
this.blueprintFocusHandler = _ => {
this.#hasFocus = true
this.listenHandler = _ => {
self.listenEvents()
}
this.blueprintUnfocusHandler = _ => {
this.unlistenHandler = _ => {
self.unlistenEvents()
this.#hasFocus = false
}
if (options?.wantsFocusCallback ?? false) {
this.blueprint.addEventListener("blueprint-focus", this.blueprintFocusHandler)
this.blueprint.addEventListener("blueprint-unfocus", this.blueprintUnfocusHandler)
if (options?.listenOnFocus ?? false) {
this.blueprint.addEventListener("blueprint-focus", this.listenHandler)
this.blueprint.addEventListener("blueprint-unfocus", this.unlistenHandler)
}
if (options?.unlistenOnEditText ?? false) {
this.blueprint.addEventListener(this.blueprint.settings.editTextEventName.begin, this.unlistenHandler)
this.blueprint.addEventListener(this.blueprint.settings.editTextEventName.end, this.listenHandler)
}
}
unlistenDOMElement() {
this.unlistenEvents()
this.blueprint.removeEventListener("blueprint-focus", this.blueprintFocusHandler)
this.blueprint.removeEventListener("blueprint-unfocus", this.blueprintUnfocusHandler)
this.blueprint.removeEventListener("blueprint-focus", this.listenHandler)
this.blueprint.removeEventListener("blueprint-unfocus", this.unlistenHandler)
this.blueprint.removeEventListener(this.blueprint.settings.editTextEventName.begin, this.unlistenHandler)
this.blueprint.removeEventListener(this.blueprint.settings.editTextEventName.end, this.listenHandler)
}
/* Subclasses will probabily override the following methods */

2
js/input/common/Copy.js
View File

@@ -8,7 +8,7 @@ export default class Copy extends IContext {
#copyHandler
constructor(target, blueprint, options = {}) {
options.wantsFocusCallback = true
options.listenOnFocus = true
super(target, blueprint, options)
this.serializer = new ObjectSerializer()
let self = this

2
js/input/common/Paste.js
View File

@@ -9,7 +9,7 @@ export default class Paste extends IContext {
#pasteHandle
constructor(target, blueprint, options = {}) {
options.wantsFocusCallback = true
options.listenOnFocus = true
super(target, blueprint, options)
this.serializer = new ObjectSerializer()
let self = this

10
js/input/keybaord/IKeyboardShortcut.js
View File

@@ -10,7 +10,7 @@ export default class IKeyboardShortcut extends IContext {
#activationKeys
constructor(target, blueprint, options = {}) {
options.wantsFocusCallback = true
options.listenOnFocus = true
options.activationKeys ??= []
if (!(options.activationKeys instanceof Array)) {
options.activationKeys = [options.activationKeys]
@@ -47,6 +47,9 @@ export default class IKeyboardShortcut extends IContext {
&& wantsAlt(keyEntry) == e.altKey
&& this.blueprint.settings.Keys[keyEntry.Key] == e.code
)) {
if (options.consumeEvent) {
e.stopImmediatePropagation()
}
self.fire()
document.removeEventListener("keydown", self.keyDownHandler)
document.addEventListener("keyup", self.keyUpHandler)
@@ -60,9 +63,12 @@ export default class IKeyboardShortcut extends IContext {
keyEntry.bShift && e.key == "Shift"
|| keyEntry.bCtrl && e.key == "Control"
|| keyEntry.bAlt && e.key == "Alt"
|| keyEntry.bCmd && e.key == "Meta" // Unsure about this, what key is that?
|| keyEntry.bCmd && e.key == "Meta"
|| this.blueprint.settings.Keys[keyEntry.Key] == e.code
)) {
if (options.consumeEvent) {
e.stopImmediatePropagation()
}
self.unfire()
document.removeEventListener("keyup", this.keyUpHandler)
document.addEventListener("keydown", this.keyDownHandler)

2
js/input/keybaord/KeyboardEnableZoom.js
View File

@@ -5,7 +5,7 @@ import Zoom from "../mouse/Zoom"
export default class KeyboardEnableZoom extends IKeyboardShortcut {
/** @type {} */
/** @type {Zoom} */
#zoomInputObject
/**

26
js/input/keybaord/KeyboardIgnoreSelectAll.js Executable file
View File

@@ -0,0 +1,26 @@
// @ts-check
import KeyboardSelectAll from "./KeyboardSelectAll"
export default class KeyboardIgnoreSelectAll extends KeyboardSelectAll {
/**
* @param {HTMLElement} target
* @param {any} blueprint
* @param {Object} options
*/
constructor(target, blueprint, options = {}) {
options = {
...options,
activationKeys: blueprint.settings.selectAllKeyboardKey
}
super(target, blueprint, options)
}
fire() {
}
unfire() {
}
}

5
js/input/keybaord/KeyboardSelectAll.js
View File

@@ -2,11 +2,14 @@
import IKeyboardShortcut from "./IKeyboardShortcut"
/**
* @typedef {import("../../Blueprint").default} Blueprint
*/
export default class KeyboardSelectAll extends IKeyboardShortcut {
/**
* @param {HTMLElement} target
* @param {import("../../Blueprint").default} blueprint
* @param {Blueprint} blueprint
* @param {Object} options
*/
constructor(target, blueprint, options = {}) {

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

@@ -29,7 +29,7 @@ export default class IMouseClickDrag extends IPointing {
this.exitAnyButton = options?.exitAnyButton ?? true
this.moveEverywhere = options?.moveEverywhere ?? false
this.looseTarget = options?.looseTarget ?? false
this.consumeClickEvent = options?.consumeClickEvent ?? true
this.consumeEvent = options?.consumeEvent ?? true
this.clickedPosition = [0, 0]
const movementListenedElement = this.moveEverywhere ? document.documentElement : this.movementSpace
@@ -41,7 +41,7 @@ export default class IMouseClickDrag extends IPointing {
case self.clickButton:
// Either doesn't matter or consider the click only when clicking on the parent, not descandants
if (self.looseTarget || e.target == e.currentTarget) {
if (this.consumeClickEvent) {
if (this.consumeEvent) {
e.stopImmediatePropagation() // Captured, don't call anyone else
}
// Attach the listeners
@@ -60,7 +60,7 @@ export default class IMouseClickDrag extends IPointing {
}
this.#mouseStartedMovingHandler = e => {
if (this.consumeClickEvent) {
if (this.consumeEvent) {
e.stopImmediatePropagation() // Captured, don't call anyone else
}
// Delegate from now on to self.#mouseMoveHandler
@@ -75,7 +75,7 @@ export default class IMouseClickDrag extends IPointing {
}
this.#mouseMoveHandler = e => {
if (this.consumeClickEvent) {
if (this.consumeEvent) {
e.stopImmediatePropagation() // Captured, don't call anyone else
}
const location = self.locationFromEvent(e)
@@ -88,7 +88,7 @@ export default class IMouseClickDrag extends IPointing {
this.#mouseUpHandler = e => {
if (!self.exitAnyButton || e.button == self.clickButton) {
if (this.consumeClickEvent) {
if (this.consumeEvent) {
e.stopImmediatePropagation() // Captured, don't call anyone else
}
// Remove the handlers of "mousemove" and "mouseup"

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

@@ -16,7 +16,7 @@ export default class IMouseWheel extends IPointing {
* @param {Object} options
*/
constructor(target, blueprint, options) {
options.wantsFocusCallback = true
options.listenOnFocus = true
super(target, blueprint, options)
this.looseTarget = options?.looseTarget ?? true
let self = this

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

@@ -17,7 +17,7 @@ export default class MouseTracking extends IPointing {
#trackingMouseGaveBackHandler
constructor(target, blueprint, options = {}) {
options.wantsFocusCallback = true
options.listenOnFocus = true
super(target, blueprint, options)
let self = this

10
js/input/mouse/Unfocus.js
View File

@@ -4,22 +4,22 @@ import IContext from "../IContext"
export default class Unfocus extends IContext {
/** @type {(e: WheelEvent) => void} */
/** @type {(e: MouseEvent) => void} */
#clickHandler
constructor(target, blueprint, options = {}) {
options.wantsFocusCallback = true
options.listenOnFocus = true
super(target, blueprint, options)
let self = this
this.#clickHandler = e => self.clickedSomewhere(e.target)
if (this.blueprint.focuse) {
this.#clickHandler = e => self.clickedSomewhere(/** @type {HTMLElement} */(e.target))
if (this.blueprint.focus) {
document.addEventListener("click", this.#clickHandler)
}
}
/**
* @param {HTMLElement} e
* @param {HTMLElement} target
*/
clickedSomewhere(target) {
// If target is outside the blueprint grid

31
js/selection/FastSelectionModel.js
View File

@@ -4,27 +4,27 @@ import OrderedIndexArray from "./OrderedIndexArray"
/**
* @typedef {{
* primaryInf: number,
* primarySup: number,
* secondaryInf: number,
* secondarySup: number
* primaryInf: Number,
* primarySup: Number,
* secondaryInf: Number,
* secondarySup: Number
* }} BoundariesInfo
* @typedef {{
* primaryBoundary: number,
* secondaryBoundary: number,
* insertionPosition: number,
* rectangle: number
* onSecondaryAxis: Boolean
* primaryBoundary: Number,
* secondaryBoundary: Number,
* insertionPosition?: Number,
* rectangle: Number
* onSecondaryAxis: Boolean
* }} Metadata
* @typedef {numeric} Rectangle
* @typedef {any} Rectangle
*/
export default class FastSelectionModel {
/**
* @param {number[]} initialPosition Coordinates of the starting point of selection [primaryAxisValue, secondaryAxisValue].
* @param {Number[]} initialPosition Coordinates of the starting point of selection [primaryAxisValue, secondaryAxisValue].
* @param {Rectangle[]} rectangles Rectangles that can be selected by this object.
* @param {(rect: Rectangle) => BoundariesInfo} boundariesFunc A function that, given a rectangle, it provides the boundaries of such rectangle.
* @param {(rect: Rectangle, selected: bool) => void} selectFunc A function that selects or deselects individual rectangles.
* @param {(rect: Rectangle, selected: Boolean) => void} selectFunc A function that selects or deselects individual rectangles.
*/
constructor(initialPosition, rectangles, boundariesFunc, selectFunc) {
this.initialPosition = initialPosition
@@ -75,7 +75,7 @@ export default class FastSelectionModel {
})
this.primaryOrder.currentPosition = this.primaryOrder.getPosition(this.initialPosition[0])
this.secondaryOrder.currentPosition = this.secondaryOrder.getPosition(this.initialPosition[1])
this.computeBoundaries(this.initialPosition)
this.computeBoundaries()
}
computeBoundaries() {
@@ -128,7 +128,7 @@ export default class FastSelectionModel {
this.secondaryOrder.remove(index)
}
}
this.computeBoundaries(finalPosition)
this.computeBoundaries()
this.selectTo(finalPosition)
}
@@ -146,7 +146,7 @@ export default class FastSelectionModel {
const secondaryBoundaryCrossed = (index, added) => {
this.selectFunc(this.rectangles[index], added)
this.computeBoundaries(finalPosition)
this.computeBoundaries()
this.selectTo(finalPosition)
}
@@ -163,5 +163,4 @@ export default class FastSelectionModel {
}
this.finalPosition = finalPosition
}
}

1
js/template/BlueprintTemplate.js
View File

@@ -1,6 +1,5 @@
// @ts-check
import Configuration from "../Configuration"
import html from "./html"
import ITemplate from "./ITemplate"
import sanitizeText from "./sanitizeText"

1
js/template/LinkTemplate.js
View File

@@ -1,6 +1,5 @@
// @ts-check
import Configuration from "../Configuration"
import html from "./html"
import ITemplate from "./ITemplate"
import sanitizeText from "./sanitizeText"

2
js/template/NodeTemplate.js
View File

@@ -48,7 +48,7 @@ export default class NodeTemplate extends SelectableDraggableTemplate {
}
node.dataset.name = node.getNodeName()
if (node.entity.AdvancedPinDisplay) {
node.dataset.advancedDisplay = node.entity.AdvancedPinDisplay
node.dataset.advancedDisplay = node.entity.AdvancedPinDisplay.toString()
}
node.style.setProperty("--ueb-position-x", sanitizeText(node.location[0]))
node.style.setProperty("--ueb-position-y", sanitizeText(node.location[1]))

10
js/template/PinTemplate.js
View File

@@ -12,6 +12,10 @@ import Utility from "../Utility"
*/
export default class PinTemplate extends ITemplate {
hasInput() {
return false
}
/**
* Computes the html content of the pin.
* @param {PinElement} pin html element
@@ -72,7 +76,9 @@ export default class PinTemplate extends ITemplate {
const targetPin = pin.blueprint.getPin(pinReference)
if (targetPin) {
const [sourcePin, destinationPin] = pin.isOutput() ? [pin, targetPin] : [targetPin, pin]
pin.blueprint.addGraphElement(new LinkElement(sourcePin, destinationPin))
pin.blueprint.addGraphElement(
new LinkElement(/** @type {PinElement} */(sourcePin), /** @type {PinElement} */(destinationPin))
)
}
})
}
@@ -82,7 +88,7 @@ export default class PinTemplate extends ITemplate {
* @param {PinElement} pin
*/
applyConnected(pin) {
if (pin.isConnected()) {
if (pin.isLinked()) {
pin.classList.add("ueb-pin-fill")
} else {
pin.classList.remove("ueb-pin-fill")

9
js/template/StringPinTemplate.js
View File

@@ -8,6 +8,10 @@ import PinTemplate from "./PinTemplate"
*/
export default class StringPinTemplate extends PinTemplate {
hasInput() {
return true
}
/**
* @param {PinElement} pin
*/
@@ -16,8 +20,9 @@ export default class StringPinTemplate extends PinTemplate {
return html`
<span class="ueb-pin-input">
<span class="ueb-pin-input-content" role="textbox" contenteditable="true"
onkeydown="${stopEventPropagation}" onkeyup="${stopEventPropagation}"
oncopy="${stopEventPropagation}" onpaste="${stopEventPropagation}"></span>
onfocus="_ => this.closest('ueb-blueprint').editText = true"
onfocusout="_ => this.closest('ueb-blueprint').editText = false"
></span>
</span>
`
}