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

Various fixes

Browse Source
This commit is contained in:
barsdeveloper
2022-03-28 23:04:24 +02:00
parent ca5948792a
commit a0eeca11d1
73 changed files with 446 additions and 125 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

File diff suppressed because one or more lines are too long

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-type-color.scss"],"names":[],"mappings":"AAAA,WACI,qBACA,iBACA,IACI,kGAIR,WACI,qBACA,mBACA,IACI,sGAIR,cACI,cACA,kBACA,8EACA,+BACA,iBAGJ,qBACI,aACA,kBACA,MACA,QACA,OACA,aACA,0BACA,UAGJ,mBACI,iBACA,gBACA,eAGJ,mBACI,kBACA,aACA,gBACA,kBAGJ,oDACI,gBAGJ,UACI,kFACA,kBACA,eACA,gBACA,kEACA,mEACA,yBACA,iBAEI,s3BA0BJ,gBAEI,sZAQJ,sFACA,gEACA,oDACA,qBACA,gBAGJ,kDACI,gBAGJ,mDACI,eAGJ,qBAEI,eACA,6CAGJ,gBACI,eAGJ,gBACI,mBAGJ,gBACI,kBAGJ,gBACI,mBAGJ,gBACI,iBAGJ,gBACI,mBAGJ,gBACI,kBAGJ,iBACI,mBAGJ,iBACI,kBAGJ,iBACI,mBAGJ,iBACI,iBACA,uDAGJ,iBACI,mBACA,uDAGJ,iBACI,sBACA,uDAGJ,iBACI,iBACA,uDAGJ,iBACI,sBACA,uDAGJ,iBACI,sBACA,uDAGJ,kBACI,iBACA,uDAGJ,kBACI,sBACA,uDAGJ,kBACI,sBACA,uDAGJ,kBACI,kBACA,QACA,SACA,wGAGJ,gEACI,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,mBC7TJ,SACI,cACA,kBACA,sGACA,qCACA,uDAGJ,wEACI,YAGJ,iBACI,YACA,YACA,+CAGJ,+BACI,iBACI,kNAIJ,oDACA,0CACA,sDACA,0BACA,oBAGJ,kBACI,kBACA,YACA,gCACA,qCACA,0BACA,gBAGJ,iBACI,kBACA,6DACA,gEACA,8EACA,aACA,gBACA,mBAGJ,eACI,iFACA,qBACA,mBAGJ,eACI,aACA,cACA,WACA,gBACA,mBAGJ,iBACI,kBACA,iBAGJ,kBACI,kBAGJ,iBACI,aAGJ,iDACI,cC9EJ,QACI,cACA,aACA,gBAEA,UACI,qBACA,sBAIR,wEACI,aAGJ,6EACI,qCACA,iBAGJ,0BACI,iBAGJ,mBACI,qBACA,wBAGJ,oBACI,qBACA,kBACA,YACA,aACA,wBACA,wBAGJ,4BACI,WACA,cACA,kBACA,MACA,QACA,SACA,OACA,sCACA,kBAGJ,iDACI,gCAGJ,2BACI,WACA,cACA,kBACA,qBACA,sBACA,QACA,SACA,kCACA,qCACA,4CAGJ,sBACI,qBACA,sBAGJ,4BACI,aAGJ,eACI,gBACA,yBACA,kBACA,gBACA,eACA,gBACA,gBACA,gBACA,aACA,YACA,cAEA,gEAGI,mBACA,aC7FR,KAGI,uBACA,6BAGJ,iBAEI,yBAGJ,eAEI,yBAGJ,eAEI,yBAGJ,aAEI,yBAGJ,cAEI,yBAGJ,gBAGI,yBAGJ,iBAEI,yBAGJ,gBAEI,yBACA,mGAGJ,gBAEI","file":"ueb-style.css"}
{"version":3,"sourceRoot":"","sources":["../../scss/style.scss","../../scss/ueb-node.scss","../../scss/ueb-pin.scss","../../scss/ueb-type-color.scss"],"names":[],"mappings":"AAAA,WACI,qBACA,iBACA,IACI,kGAIR,WACI,qBACA,mBACA,IACI,sGAIR,cACI,cACA,kBACA,8EACA,+BACA,iBAGJ,qBACI,aACA,kBACA,MACA,QACA,OACA,aACA,0BACA,UAGJ,mBACI,iBACA,gBACA,eAGJ,mBACI,kBACA,gCACA,gBACA,kBAGJ,oDACI,gBAGJ,UACI,kFACA,kBACA,eACA,gBACA,kEACA,mEACA,yBACA,iBAEI,s3BA0BJ,gBAEI,sZAQJ,sFACA,gEACA,oDACA,qBACA,gBAGJ,kDACI,gBAGJ,mDACI,eAGJ,qBAEI,eACA,6CAGJ,gBACI,eAGJ,gBACI,mBAGJ,gBACI,kBAGJ,gBACI,mBAGJ,gBACI,iBAGJ,gBACI,mBAGJ,gBACI,kBAGJ,iBACI,mBAGJ,iBACI,kBAGJ,iBACI,mBAGJ,iBACI,iBACA,uDAGJ,iBACI,mBACA,uDAGJ,iBACI,sBACA,uDAGJ,iBACI,iBACA,uDAGJ,iBACI,sBACA,uDAGJ,iBACI,sBACA,uDAGJ,kBACI,iBACA,uDAGJ,kBACI,sBACA,uDAGJ,kBACI,sBACA,uDAGJ,kBACI,kBACA,QACA,SACA,wGAGJ,gEACI,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,mBC7TJ,SACI,cACA,kBACA,sGACA,qCACA,uDAGJ,wEACI,YAGJ,iBACI,YACA,YACA,+CAGJ,+BACI,iBACI,kNAIJ,oDACA,0CACA,sDACA,0BACA,oBAGJ,kBACI,kBACA,YACA,gCACA,qCACA,6BACA,gBAGJ,iBACI,kBACA,6DACA,gEACA,8EACA,aACA,gBACA,mBAGJ,eACI,iFACA,qBACA,mBAGJ,eACI,aACA,cACA,WACA,gBACA,mBAGJ,iBACI,kBACA,iBAGJ,kBACI,kBAGJ,iBACI,aAGJ,iDACI,cC9EJ,QACI,cACA,aACA,gBAEA,UACI,qBACA,sBAIR,wEACI,aAGJ,6EACI,qCACA,iBAGJ,0BACI,iBAGJ,mBACI,qBACA,wBAGJ,oBACI,qBACA,kBACA,UACA,WACA,wBACA,wBAGJ,4BACI,WACA,cACA,kBACA,MACA,QACA,SACA,OACA,sCACA,kBAGJ,iDACI,gCAGJ,2BACI,WACA,cACA,kBACA,qBACA,sBACA,QACA,SACA,kCACA,qCACA,4CAGJ,sBACI,qBACA,sBAGJ,4BACI,aAGJ,eACI,gBACA,yBACA,kBACA,oBACA,aAEA,4FAII,qBACA,aAIR,uBACI,cACA,aACA,YACA,mBACA,UACA,eACA,gBACA,gBACA,gBACA,YACA,cAEA,0CACI,WACA,YAGJ,gDACI,mBACA,mBACA,WCjHR,KAGI,uBACA,6BAGJ,iBAEI,yBAGJ,eAEI,yBAGJ,eAEI,yBAGJ,aAEI,yBAGJ,cAEI,yBAGJ,gBAGI,yBAGJ,iBAEI,yBAGJ,gBAEI,yBACA,mGAGJ,gBAEI","file":"ueb-style.css"}

241
dist/ueblueprint.js vendored
View File

@@ -4,6 +4,8 @@ class Configuration {
static expandGridSize = 400
static fontSize = "12px"
static gridAxisLineColor = "black"
static gridExpandThreshold = 0.25 // remaining size factor threshold to cause an expansion event
static gridShrinkThreshold = 2 // exceding size factor threshold to cause a shrink event
static gridLineColor = "#353535"
static gridLineWidth = 1 // pixel
static gridSet = 8
@@ -133,12 +135,15 @@ class Configuration {
}
}
// @ts-check
/**
* This solves the sole purpose of providing compression capability for html inside template literals strings. Check rollup.config.js function minifyHTML()
*/
const html = String.raw;
// @ts-check
/**
* @typedef {import("../element/IElement").default} IElement
*/
@@ -160,6 +165,8 @@ class ITemplate {
}
}
// @ts-check
document.createElement("div");
const tagReplacement = {
@@ -177,6 +184,8 @@ function sanitizeText(value) {
return value
}
// @ts-check
class OrderedIndexArray {
/**
@@ -317,6 +326,8 @@ class OrderedIndexArray {
}
}
// @ts-check
/**
* @typedef {{
* primaryInf: number,
@@ -481,6 +492,8 @@ class FastSelectionModel {
}
// @ts-check
/**
* @typedef {import("../Blueprint").default} Blueprint
* @typedef {import("../entity/IEntity").default} IEntity
@@ -536,12 +549,12 @@ class IElement extends HTMLElement {
}
/**
* @template {} T
* @param {new () => T} type
* @template {IContext} T
* @param {new (...args: any[]) => T} type
* @returns {T}
*/
getInputObject(type) {
return this.inputObjects.find(object => object.constructor == type)
return /** @type {T} */ (this.inputObjects.find(object => object.constructor == type))
}
// Subclasses will want to override
@@ -550,6 +563,8 @@ class IElement extends HTMLElement {
}
}
// @ts-check
/**
* @typedef {import("../element/SelectorElement").default} SelectorElement
*/
@@ -596,6 +611,8 @@ class SelectorTemplate extends ITemplate {
}
}
// @ts-check
class SelectorElement extends IElement {
static tagName = "ueb-selector"
@@ -633,6 +650,8 @@ class SelectorElement extends IElement {
customElements.define(SelectorElement.tagName, SelectorElement);
// @ts-check
/**
* @typedef {import("../Blueprint").default} Blueprint
* @typedef {import("../entity/PinReferenceEntity").default} PinReferenceEntity
@@ -769,6 +788,8 @@ class BlueprintTemplate extends ITemplate {
}
}
// @ts-check
class IContext {
/** @type {HTMLElement} */
@@ -822,6 +843,8 @@ class IContext {
}
}
// @ts-check
class TypeInitialization {
static sanitize(value) {
@@ -849,6 +872,8 @@ class TypeInitialization {
}
}
// @ts-check
class Utility {
static sigmoid(x, curvature = 1.7) {
@@ -964,6 +989,8 @@ class Utility {
}
}
// @ts-check
class IEntity {
constructor(options = {}) {
@@ -1017,6 +1044,8 @@ class IEntity {
}
}
// @ts-check
class ObjectReferenceEntity extends IEntity {
static attributes = {
@@ -1025,6 +1054,8 @@ class ObjectReferenceEntity extends IEntity {
}
}
// @ts-check
class FunctionReferenceEntity extends IEntity {
static attributes = {
@@ -1033,6 +1064,8 @@ class FunctionReferenceEntity extends IEntity {
}
}
// @ts-check
class GuidEntity extends IEntity {
static attributes = {
@@ -1060,6 +1093,8 @@ class GuidEntity extends IEntity {
}
}
// @ts-check
class IdentifierEntity extends IEntity {
static attributes = {
@@ -1085,6 +1120,8 @@ class IdentifierEntity extends IEntity {
}
}
// @ts-check
class IntegerEntity extends IEntity {
static attributes = {
@@ -1110,6 +1147,8 @@ class IntegerEntity extends IEntity {
}
}
// @ts-check
class KeyBindingEntity extends IEntity {
static attributes = {
@@ -1125,6 +1164,8 @@ class KeyBindingEntity extends IEntity {
}
}
// @ts-check
class LocalizedTextEntity extends IEntity {
static lookbehind = "NSLOCTEXT"
@@ -1135,6 +1176,8 @@ class LocalizedTextEntity extends IEntity {
}
}
// @ts-check
class PathSymbolEntity extends IEntity {
static attributes = {
@@ -1146,6 +1189,8 @@ class PathSymbolEntity extends IEntity {
}
}
// @ts-check
class PinReferenceEntity extends IEntity {
static attributes = {
@@ -1154,6 +1199,8 @@ class PinReferenceEntity extends IEntity {
}
}
// @ts-check
/**
* @typedef {{
* PinCategory: String,
@@ -1262,6 +1309,8 @@ class PinEntity extends IEntity {
}
}
// @ts-check
class VariableReferenceEntity extends IEntity {
static attributes = {
@@ -1271,6 +1320,8 @@ class VariableReferenceEntity extends IEntity {
}
}
// @ts-check
class ObjectEntity extends IEntity {
static attributes = {
@@ -1312,6 +1363,8 @@ var parsimmon_umd_min = {exports: {}};
var Parsimmon = /*@__PURE__*/getDefaultExportFromCjs(parsimmon_umd_min.exports);
// @ts-check
let P = Parsimmon;
class Grammar {
@@ -1566,6 +1619,8 @@ class Grammar {
MultipleObject = r => r.Object.sepBy1(P.whitespace).trim(P.optWhitespace)
}
// @ts-check
class SerializerFactory {
static #serializers = new Map()
@@ -1579,6 +1634,8 @@ class SerializerFactory {
}
}
// @ts-check
class ISerializer {
static grammar = Parsimmon.createLanguage(new Grammar())
@@ -1657,6 +1714,8 @@ class ISerializer {
}
}
// @ts-check
class ObjectSerializer extends ISerializer {
constructor() {
@@ -1715,6 +1774,8 @@ End Object\n`;
}
}
// @ts-check
class Copy extends IContext {
#copyHandler
@@ -1741,6 +1802,7 @@ class Copy extends IContext {
}
}
// @ts-check
class IKeyboardShortcut extends IContext {
/** @type {KeyBindingEntity} */
@@ -1825,6 +1887,8 @@ class IKeyboardShortcut extends IContext {
}
}
// @ts-check
class KeyboardCanc extends IKeyboardShortcut {
/**
@@ -1845,6 +1909,8 @@ class KeyboardCanc extends IKeyboardShortcut {
}
}
// @ts-check
class IPointing extends IContext {
constructor(target, blueprint, options) {
@@ -1863,6 +1929,8 @@ class IPointing extends IContext {
}
}
// @ts-check
class IMouseWheel extends IPointing {
/** @type {(e: WheelEvent) => void} */
@@ -1908,6 +1976,8 @@ class IMouseWheel extends IPointing {
}
}
// @ts-check
class Zoom extends IMouseWheel {
#enableZoonIn = false
@@ -1935,6 +2005,8 @@ class Zoom extends IMouseWheel {
}
}
// @ts-check
class KeyboardEnableZoom extends IKeyboardShortcut {
/** @type {} */
@@ -1963,6 +2035,8 @@ class KeyboardEnableZoom extends IKeyboardShortcut {
}
}
// @ts-check
class KeyboardSelectAll extends IKeyboardShortcut {
/**
@@ -1983,6 +2057,8 @@ class KeyboardSelectAll extends IKeyboardShortcut {
}
}
// @ts-check
/**
* @typedef {import("../element/LinkElement").default} LinkElement
* @typedef {import("../element/LinkMessageElement").default} LinkMessageElement
@@ -2146,6 +2222,8 @@ class LinkTemplate extends ITemplate {
}
}
// @ts-check
/**
* @typedef {import("./PinElement").default} PinElement
* @typedef {import("./LinkMessageElement").default} LinkMessageElement
@@ -2230,7 +2308,7 @@ class LinkElement extends IElement {
/**
* @param {Number[]} location
*/
setSourceLocation(location) {
setSourceLocation(location = null) {
if (location == null) {
location = this.#source.template.getLinkLocation(this.#source);
}
@@ -2259,7 +2337,7 @@ class LinkElement extends IElement {
/**
* @param {Number[]} location
*/
setDestinationLocation(location) {
setDestinationLocation(location = null) {
if (location == null) {
location = this.#destination.template.getLinkLocation(this.#destination);
}
@@ -2353,6 +2431,8 @@ class LinkElement extends IElement {
customElements.define(LinkElement.tagName, LinkElement);
// @ts-check
/**
* This class manages the ui gesture of mouse click and drag. Tha actual operations are implemented by the subclasses.
*/
@@ -2498,6 +2578,8 @@ class IMouseClickDrag extends IPointing {
}
}
// @ts-check
class MouseScrollGraph extends IMouseClickDrag {
startDrag() {
@@ -2513,6 +2595,8 @@ class MouseScrollGraph extends IMouseClickDrag {
}
}
// @ts-check
class MouseTracking extends IPointing {
/** @type {IPointing} */
@@ -2573,6 +2657,8 @@ class MouseTracking extends IPointing {
}
}
// @ts-check
/**
* @typedef {import("../../element/ISelectableDraggableElement").default} ISelectableDraggableElement
*/
@@ -2620,11 +2706,15 @@ class MouseMoveNodes extends IMouseClickDrag {
}
}
/** @typedef {import("../template/SelectableDraggableTemplate").default} SelectableDraggableTemplate */
// @ts-check
/**
* @typedef {import("../template/SelectableDraggableTemplate").default} SelectableDraggableTemplate
*/
class ISelectableDraggableElement extends IElement {
constructor(...args) {
// @ts-expect-error
super(...args);
this.dragObject = null;
this.location = [0, 0];
@@ -2646,6 +2736,9 @@ class ISelectableDraggableElement extends IElement {
]
}
/**
* @param {Number[]} value
*/
setLocation(value = [0, 0]) {
const d = [value[0] - this.location[0], value[1] - this.location[1]];
const dragLocalEvent = new CustomEvent(Configuration.nodeDragLocalEventName, {
@@ -2700,6 +2793,8 @@ class ISelectableDraggableElement extends IElement {
}
}
// @ts-check
/**
* @typedef {import("../element/LinkMessageElement").default} LinkMessageElement
*/
@@ -2735,6 +2830,8 @@ class LinkMessageTemplate extends ITemplate {
}
// @ts-check
/**
* @typedef {import("./PinElement").default} PinElement
* @typedef {import("./LinkElement").default} LinkElement
@@ -2796,6 +2893,8 @@ class LinkMessageElement extends IElement {
customElements.define(LinkMessageElement.tagName, LinkMessageElement);
// @ts-check
/**
* @typedef {import("../../element/LinkElement").default} LinkElement
* @typedef {import("../../element/PinElement").default} PinElement
@@ -2897,6 +2996,8 @@ class MouseCreateLink extends IMouseClickDrag {
}
}
// @ts-check
/**
* @typedef {import("../element/NodeElement").default} NodeElement
* @typedef {import("../element/PinElement").default} PinElement
@@ -2991,6 +3092,8 @@ class PinTemplate extends ITemplate {
}
}
// @ts-check
/**
* @typedef {import("../element/PinElement").default} PinElement
*/
@@ -3017,12 +3120,19 @@ class StringPinTemplate extends PinTemplate {
* @param {PinElement} pin
*/
renderInput(pin) {
const stopEventPropagation = "e => stopPropagation()";
return html`
<span class="ueb-pin-input" role="textbox" contenteditable="true"></span>
<span class="ueb-pin-input">
<span class="ueb-pin-input-content" role="textbox" contenteditable="true"
onkeydown="${stopEventPropagation}" onkeyup="${stopEventPropagation}"
oncopy="${stopEventPropagation}" onpaste="${stopEventPropagation}"></span>
</span>
`
}
}
// @ts-check
/**
* @typedef {import("./NodeElement").default} NodeElement
* @typedef {import("../entity/GuidEntity").default} GuidEntity
@@ -3160,6 +3270,8 @@ class PinElement extends IElement {
customElements.define(PinElement.tagName, PinElement);
// @ts-check
/**
* @typedef {import("../element/ISelectableDraggableElement").default} ISelectableDraggableElement
*/
@@ -3187,6 +3299,8 @@ class SelectableDraggableTemplate extends ITemplate {
}
}
// @ts-check
/**
* @typedef {import("../element/NodeElement").default} NodeElement
*/
@@ -3252,6 +3366,8 @@ class NodeTemplate extends SelectableDraggableTemplate {
}
}
// @ts-check
class NodeElement extends ISelectableDraggableElement {
static tagName = "ueb-node"
@@ -3317,6 +3433,8 @@ class NodeElement extends ISelectableDraggableElement {
customElements.define(NodeElement.tagName, NodeElement);
// @ts-check
class Paste extends IContext {
#pasteHandle
@@ -3368,6 +3486,8 @@ class Paste extends IContext {
}
}
// @ts-check
class Select extends IMouseClickDrag {
constructor(target, blueprint, options) {
@@ -3396,6 +3516,8 @@ class Select extends IMouseClickDrag {
}
}
// @ts-check
class Unfocus extends IContext {
/** @type {(e: WheelEvent) => void} */
@@ -3447,9 +3569,9 @@ class Blueprint extends IElement {
links = []
expandGridSize = Configuration.expandGridSize
/** @type {number[]} */
additional = /*[2 * this.expandGridSize, 2 * this.expandGridSize]*/[0, 0]
additional = [2 * this.expandGridSize, 2 * this.expandGridSize]
/** @type {number[]} */
translateValue = /*[this.expandGridSize, this.expandGridSize]*/[0, 0]
translateValue = [this.expandGridSize, this.expandGridSize]
/** @type {number[]} */
mousePosition = [0, 0]
/** @type {HTMLElement} */
@@ -3492,21 +3614,17 @@ class Blueprint extends IElement {
}
/**
* Expand the grid, considers the absolute value of params
* @param {number} x - Horizontal expansion value
* @param {number} y - Vertical expansion value
* @param {number} x
* @param {number} y
*/
#expand(x, y) {
x = Math.round(Math.abs(x));
y = Math.round(Math.abs(y));
this.additional = [this.additional[0] + x, this.additional[1] + y];
this.template.applyExpand(this);
}
/**
* Moves the content of the grid according to the coordinates
* @param {number} x - Horizontal translation value
* @param {number} y - Vertical translation value
* @param {number} x
* @param {number} y
*/
#translate(x, y) {
x = Math.round(x);
@@ -3569,38 +3687,46 @@ class Blueprint extends IElement {
}
scrollDelta(delta, smooth = false) {
const scrollMax = this.getScrollMax();
const maxScroll = this.getScrollMax();
let currentScroll = this.getScroll();
let finalScroll = [
currentScroll[0] + delta[0],
currentScroll[1] + delta[1]
];
let expand = [0, 0];
let shrink = [0, 0];
let direction = [0, 0];
for (let i = 0; i < 2; ++i) {
if (delta[i] < 0 && finalScroll[i] < 0.25 * this.expandGridSize) {
// Expand if scrolling is diminishing and the remainig space is less that a quarter of an expansion step
expand[i] = finalScroll[i];
if (expand[i] > 0) {
// Final scroll is still in rage (more than zero) but we want to expand to negative (left or top)
expand[i] = -this.expandGridSize;
if (delta[i] < 0 && finalScroll[i] < Configuration.gridExpandThreshold * this.expandGridSize) {
// Expand left/top
expand[i] = this.expandGridSize;
direction[i] = -1;
if (maxScroll[i] - finalScroll[i] > Configuration.gridShrinkThreshold * this.expandGridSize) {
shrink[i] = -this.expandGridSize;
}
} else if (delta[i] > 0 && finalScroll[i] > scrollMax[i] - 0.25 * this.expandGridSize) {
// Expand if scrolling is increasing and the remainig space is less that a quarter of an expansion step
expand[i] = finalScroll[i] - scrollMax[i];
if (expand[i] < 0) {
// Final scroll is still in rage (less than the maximum scroll) but we want to expand to positive (right or bottom)
expand[i] = this.expandGridSize;
} else if (delta[i] > 0 && finalScroll[i]
> maxScroll[i] - Configuration.gridExpandThreshold * this.expandGridSize) {
// Expand right/bottom
expand[i] = this.expandGridSize;
direction[i] = 1;
if (finalScroll[i] > Configuration.gridShrinkThreshold * this.expandGridSize) {
shrink[i] = -this.expandGridSize;
}
}
}
if (expand[0] != 0 || expand[1] != 0) {
this.seamlessExpand(this.progressiveSnapToGrid(expand[0]), this.progressiveSnapToGrid(expand[1]));
currentScroll = this.getScroll();
finalScroll = [
currentScroll[0] + delta[0],
currentScroll[1] + delta[1]
this.seamlessExpand(expand, direction);
direction = [
-direction[0],
-direction[1]
];
this.seamlessExpand(shrink, direction);
}
currentScroll = this.getScroll();
finalScroll = [
currentScroll[0] + delta[0],
currentScroll[1] + delta[1]
];
this.setScroll(finalScroll, smooth);
}
@@ -3631,7 +3757,7 @@ class Blueprint extends IElement {
/**
* Get the scroll limits
* @return {array} The horizonal and vertical maximum scroll limits
* @return {Array} The horizonal and vertical maximum scroll limits
*/
getScrollMax() {
return [
@@ -3645,24 +3771,35 @@ class Blueprint extends IElement {
}
/**
* Expand the grind indefinitely, the content will remain into position
* @param {number} x - Horizontal expand value (negative means left, positive means right)
* @param {number} y - Vertical expand value (negative means top, positive means bottom)
* @param {Number} x - Horizontal
* @param {Number} y - Vertical expand value (negative means top, positive means bottom)
* @param {Number} factor - Either 1 (expand) or -1 (shrink)
*/
seamlessExpand(x, y) {
/**
* Expand or shrink the grind indefinitely, the content will remain into position
* @param {Number[]} param0 - Expand value (negative means shrink, positive means expand)
* @param {Number[]} param1 - Direction of expansion (negative: left/top, position: right/bottom)
*/
seamlessExpand([x, y], [directionX, directionY] = [1, 1]) {
const initialScroll = [
this.viewportElement.scrollLeft,
this.viewportElement.scrollTop
];
let scale = this.getScale();
let scaledX = x / scale;
let scaledY = y / scale;
// First expand the grid to contain the additional space
this.#expand(scaledX, scaledY);
// If the expansion is towards the left or top, then scroll back to give the illusion that the content is in the same position and translate it accordingly
this.#translate(scaledX < 0 ? -scaledX : 0, scaledY < 0 ? -scaledY : 0);
if (x < 0) {
this.viewportElement.scrollLeft -= x;
}
if (y < 0) {
this.viewportElement.scrollTop -= y;
}
const translate = [
directionX < 0 ? scaledX : 0,
directionY < 0 ? scaledY : 0
];
this.#translate(translate[0], translate[1]);
this.viewportElement.scrollLeft = initialScroll[0] + translate[0];
this.viewportElement.scrollTop = initialScroll[1] + translate[1];
}
progressiveSnapToGrid(x) {
@@ -3824,6 +3961,8 @@ class Blueprint extends IElement {
customElements.define(Blueprint.tagName, Blueprint);
// @ts-check
class GeneralSerializer extends ISerializer {
constructor(wrap, entityType, prefix, separator, trailingSeparator, attributeValueConjunctionSign, attributeKeyPrinter) {
@@ -3848,6 +3987,8 @@ class GeneralSerializer extends ISerializer {
}
}
// @ts-check
class CustomSerializer extends GeneralSerializer {
constructor(objectWriter, entityType) {
@@ -3861,6 +4002,8 @@ class CustomSerializer extends GeneralSerializer {
}
}
// @ts-check
class ToStringSerializer extends GeneralSerializer {
constructor(entityType) {
@@ -3873,6 +4016,8 @@ class ToStringSerializer extends GeneralSerializer {
}
}
// @ts-check
function initializeSerializerFactory() {
SerializerFactory.registerSerializer(
@@ -3925,6 +4070,8 @@ function initializeSerializerFactory() {
SerializerFactory.registerSerializer(IntegerEntity, new ToStringSerializer(IntegerEntity));
}
// @ts-check
initializeSerializerFactory();
export { Blueprint, Configuration, LinkElement, NodeElement };

11
index.html
View File

@@ -4,11 +4,16 @@
<head>
<meta charset="utf-8" />
<title></title>
<style>
</style>
<title>Unreal Engine Blueprint</title>
<link rel="stylesheet" href="dist/css/ueblueprint-node-value-type-color.css">
<link rel="stylesheet" href="dist/css/ueb-style.css">
<style>
body {
margin: 0;
padding: 0;
--ueb-height: 100vh;
}
</style>
</head>
<body>

95
js/Blueprint.js
View File

@@ -32,9 +32,9 @@ export default class Blueprint extends IElement {
links = []
expandGridSize = Configuration.expandGridSize
/** @type {number[]} */
additional = /*[2 * this.expandGridSize, 2 * this.expandGridSize]*/[0, 0]
additional = [2 * this.expandGridSize, 2 * this.expandGridSize]
/** @type {number[]} */
translateValue = /*[this.expandGridSize, this.expandGridSize]*/[0, 0]
translateValue = [this.expandGridSize, this.expandGridSize]
/** @type {number[]} */
mousePosition = [0, 0]
/** @type {HTMLElement} */
@@ -77,21 +77,17 @@ export default class Blueprint extends IElement {
}
/**
* Expand the grid, considers the absolute value of params
* @param {number} x - Horizontal expansion value
* @param {number} y - Vertical expansion value
* @param {number} x
* @param {number} y
*/
#expand(x, y) {
x = Math.round(Math.abs(x))
y = Math.round(Math.abs(y))
this.additional = [this.additional[0] + x, this.additional[1] + y]
this.template.applyExpand(this)
}
/**
* Moves the content of the grid according to the coordinates
* @param {number} x - Horizontal translation value
* @param {number} y - Vertical translation value
* @param {number} x
* @param {number} y
*/
#translate(x, y) {
x = Math.round(x)
@@ -154,38 +150,46 @@ export default class Blueprint extends IElement {
}
scrollDelta(delta, smooth = false) {
const scrollMax = this.getScrollMax()
const maxScroll = this.getScrollMax()
let currentScroll = this.getScroll()
let finalScroll = [
currentScroll[0] + delta[0],
currentScroll[1] + delta[1]
]
let expand = [0, 0]
let shrink = [0, 0]
let direction = [0, 0]
for (let i = 0; i < 2; ++i) {
if (delta[i] < 0 && finalScroll[i] < 0.25 * this.expandGridSize) {
// Expand if scrolling is diminishing and the remainig space is less that a quarter of an expansion step
expand[i] = finalScroll[i]
if (expand[i] > 0) {
// Final scroll is still in rage (more than zero) but we want to expand to negative (left or top)
expand[i] = -this.expandGridSize
if (delta[i] < 0 && finalScroll[i] < Configuration.gridExpandThreshold * this.expandGridSize) {
// Expand left/top
expand[i] = this.expandGridSize
direction[i] = -1
if (maxScroll[i] - finalScroll[i] > Configuration.gridShrinkThreshold * this.expandGridSize) {
shrink[i] = -this.expandGridSize
}
} else if (delta[i] > 0 && finalScroll[i] > scrollMax[i] - 0.25 * this.expandGridSize) {
// Expand if scrolling is increasing and the remainig space is less that a quarter of an expansion step
expand[i] = finalScroll[i] - scrollMax[i]
if (expand[i] < 0) {
// Final scroll is still in rage (less than the maximum scroll) but we want to expand to positive (right or bottom)
expand[i] = this.expandGridSize
} else if (delta[i] > 0 && finalScroll[i]
> maxScroll[i] - Configuration.gridExpandThreshold * this.expandGridSize) {
// Expand right/bottom
expand[i] = this.expandGridSize
direction[i] = 1
if (finalScroll[i] > Configuration.gridShrinkThreshold * this.expandGridSize) {
shrink[i] = -this.expandGridSize
}
}
}
if (expand[0] != 0 || expand[1] != 0) {
this.seamlessExpand(this.progressiveSnapToGrid(expand[0]), this.progressiveSnapToGrid(expand[1]))
currentScroll = this.getScroll()
finalScroll = [
currentScroll[0] + delta[0],
currentScroll[1] + delta[1]
this.seamlessExpand(expand, direction)
direction = [
-direction[0],
-direction[1]
]
this.seamlessExpand(shrink, direction)
}
currentScroll = this.getScroll()
finalScroll = [
currentScroll[0] + delta[0],
currentScroll[1] + delta[1]
]
this.setScroll(finalScroll, smooth)
}
@@ -216,7 +220,7 @@ export default class Blueprint extends IElement {
/**
* Get the scroll limits
* @return {array} The horizonal and vertical maximum scroll limits
* @return {Array} The horizonal and vertical maximum scroll limits
*/
getScrollMax() {
return [
@@ -230,24 +234,35 @@ export default class Blueprint extends IElement {
}
/**
* Expand the grind indefinitely, the content will remain into position
* @param {number} x - Horizontal expand value (negative means left, positive means right)
* @param {number} y - Vertical expand value (negative means top, positive means bottom)
* @param {Number} x - Horizontal
* @param {Number} y - Vertical expand value (negative means top, positive means bottom)
* @param {Number} factor - Either 1 (expand) or -1 (shrink)
*/
seamlessExpand(x, y) {
/**
* Expand or shrink the grind indefinitely, the content will remain into position
* @param {Number[]} param0 - Expand value (negative means shrink, positive means expand)
* @param {Number[]} param1 - Direction of expansion (negative: left/top, position: right/bottom)
*/
seamlessExpand([x, y], [directionX, directionY] = [1, 1]) {
const initialScroll = [
this.viewportElement.scrollLeft,
this.viewportElement.scrollTop
]
let scale = this.getScale()
let scaledX = x / scale
let scaledY = y / scale
// First expand the grid to contain the additional space
this.#expand(scaledX, scaledY)
// If the expansion is towards the left or top, then scroll back to give the illusion that the content is in the same position and translate it accordingly
this.#translate(scaledX < 0 ? -scaledX : 0, scaledY < 0 ? -scaledY : 0)
if (x < 0) {
this.viewportElement.scrollLeft -= x
}
if (y < 0) {
this.viewportElement.scrollTop -= y
}
const translate = [
directionX < 0 ? scaledX : 0,
directionY < 0 ? scaledY : 0
]
this.#translate(translate[0], translate[1])
this.viewportElement.scrollLeft = initialScroll[0] + translate[0]
this.viewportElement.scrollTop = initialScroll[1] + translate[1]
}
progressiveSnapToGrid(x) {

2
js/Configuration.js
View File

@@ -4,6 +4,8 @@ export default class Configuration {
static expandGridSize = 400
static fontSize = "12px"
static gridAxisLineColor = "black"
static gridExpandThreshold = 0.25 // remaining size factor threshold to cause an expansion event
static gridShrinkThreshold = 2 // exceding size factor threshold to cause a shrink event
static gridLineColor = "#353535"
static gridLineWidth = 1 // pixel
static gridSet = 8

2
js/Utility.js
View File

@@ -1,3 +1,5 @@
// @ts-check
import Configuration from "./Configuration"
import TypeInitialization from "./entity/TypeInitialization"

8
js/element/IElement.js
View File

@@ -1,3 +1,5 @@
// @ts-check
/**
* @typedef {import("../Blueprint").default} Blueprint
* @typedef {import("../entity/IEntity").default} IEntity
@@ -53,12 +55,12 @@ export default class IElement extends HTMLElement {
}
/**
* @template {} T
* @param {new () => T} type
* @template {IContext} T
* @param {new (...args: any[]) => T} type
* @returns {T}
*/
getInputObject(type) {
return this.inputObjects.find(object => object.constructor == type)
return /** @type {T} */ (this.inputObjects.find(object => object.constructor == type))
}
// Subclasses will want to override

11
js/element/ISelectableDraggableElement.js
View File

@@ -1,12 +1,16 @@
// @ts-check
import Configuration from "../Configuration"
import IElement from "./IElement"
import MouseMoveNodes from "../input/mouse/MouseMoveNodes"
/** @typedef {import("../template/SelectableDraggableTemplate").default} SelectableDraggableTemplate */
/**
* @typedef {import("../template/SelectableDraggableTemplate").default} SelectableDraggableTemplate
*/
export default class ISelectableDraggableElement extends IElement {
constructor(...args) {
// @ts-expect-error
super(...args)
this.dragObject = null
this.location = [0, 0]
@@ -28,6 +32,9 @@ export default class ISelectableDraggableElement extends IElement {
]
}
/**
* @param {Number[]} value
*/
setLocation(value = [0, 0]) {
const d = [value[0] - this.location[0], value[1] - this.location[1]]
const dragLocalEvent = new CustomEvent(Configuration.nodeDragLocalEventName, {

6
js/element/LinkElement.js
View File

@@ -1,3 +1,5 @@
// @ts-check
import Configuration from "../Configuration"
import IElement from "./IElement"
import LinkTemplate from "../template/LinkTemplate"
@@ -86,7 +88,7 @@ export default class LinkElement extends IElement {
/**
* @param {Number[]} location
*/
setSourceLocation(location) {
setSourceLocation(location = null) {
if (location == null) {
location = this.#source.template.getLinkLocation(this.#source)
}
@@ -115,7 +117,7 @@ export default class LinkElement extends IElement {
/**
* @param {Number[]} location
*/
setDestinationLocation(location) {
setDestinationLocation(location = null) {
if (location == null) {
location = this.#destination.template.getLinkLocation(this.#destination)
}

4
js/element/LinkMessageElement.js
View File

@@ -1,10 +1,12 @@
// @ts-check
import IElement from "./IElement"
import LinkMessageTemplate from "../template/LinkMessageTemplate"
/**
* @typedef {import("./PinElement").default} PinElement
* @typedef {import("./LinkElement").default} LinkElement
* @typedef {(sourcePin: PinElement, sourcePin: PinElement) => String} LinkRetrieval
* @typedef {(sourcePin: PinElement, destinationPin: PinElement) => String} LinkRetrieval
*/
export default class LinkMessageElement extends IElement {

2
js/element/NodeElement.js
View File

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

2
js/element/PinElement.js
View File

@@ -1,3 +1,5 @@
// @ts-check
import IElement from "./IElement"
import MouseCreateLink from "../input/mouse/MouseCreateLink"
import PinTemplate from "../template/PinTemplate"

2
js/element/SelectorElement.js
View File

@@ -1,3 +1,5 @@
// @ts-check
import FastSelectionModel from "../selection/FastSelectionModel"
import IElement from "./IElement"
import SelectorTemplate from "../template/SelectorTemplate"

2
js/entity/FunctionReferenceEntity.js
View File

@@ -1,3 +1,5 @@
// @ts-check
import IEntity from "./IEntity"
import ObjectReferenceEntity from "./ObjectReferenceEntity"

3
js/entity/GuidEntity.js
View File

@@ -1,5 +1,6 @@
import IEntity from "./IEntity"
// @ts-check
import IEntity from "./IEntity"
export default class GuidEntity extends IEntity {

2
js/entity/IEntity.js
View File

@@ -1,3 +1,5 @@
// @ts-check
import TypeInitialization from "./TypeInitialization"
import Utility from "../Utility"

3
js/entity/IdentifierEntity.js
View File

@@ -1,5 +1,6 @@
import IEntity from "./IEntity"
// @ts-check
import IEntity from "./IEntity"
export default class IdentifierEntity extends IEntity {

2
js/entity/IntegerEntity.js
View File

@@ -1,3 +1,5 @@
// @ts-check
import IEntity from "./IEntity"
export default class IntegerEntity extends IEntity {

2
js/entity/KeyBindingEntity.js
View File

@@ -1,3 +1,5 @@
// @ts-check
import IdentifierEntity from "./IdentifierEntity"
import IEntity from "./IEntity"

2
js/entity/LocalizedTextEntity.js
View File

@@ -1,3 +1,5 @@
// @ts-check
import IEntity from "./IEntity"
export default class LocalizedTextEntity extends IEntity {

2
js/entity/NaturalNumberEntity.js
View File

@@ -1,3 +1,5 @@
// @ts-check
import IntegerEntity from "./IntegerEntity"
import Utility from "../Utility"

2
js/entity/ObjectEntity.js
View File

@@ -1,3 +1,5 @@
// @ts-check
import FunctionReferenceEntity from "./FunctionReferenceEntity"
import GuidEntity from "./GuidEntity"
import IdentifierEntity from "./IdentifierEntity"

2
js/entity/ObjectReferenceEntity.js
View File

@@ -1,3 +1,5 @@
// @ts-check
import IEntity from "./IEntity"
export default class ObjectReferenceEntity extends IEntity {

2
js/entity/PathSymbolEntity.js
View File

@@ -1,3 +1,5 @@
// @ts-check
import IEntity from "./IEntity"
export default class PathSymbolEntity extends IEntity {

2
js/entity/PinEntity.js
View File

@@ -1,3 +1,5 @@
// @ts-check
import GuidEntity from "./GuidEntity"
import IEntity from "./IEntity"
import LocalizedTextEntity from "./LocalizedTextEntity"

2
js/entity/PinReferenceEntity.js
View File

@@ -1,3 +1,5 @@
// @ts-check
import GuidEntity from "./GuidEntity"
import IEntity from "./IEntity"
import PathSymbolEntity from "./PathSymbolEntity"

4
js/entity/TypeInitialization.js
View File

@@ -1,3 +1,5 @@
// @ts-check
export default class TypeInitialization {
static sanitize(value) {
@@ -11,7 +13,7 @@ export default class TypeInitialization {
}
/**
* @param {typeof Object} type
* @param {Object} type
* @param {boolean} showDefault
* @param {*} value
*/

2
js/entity/VariableReferenceEntity.js
View File

@@ -1,3 +1,5 @@
// @ts-check
import IEntity from "./IEntity"
import GuidEntity from "./GuidEntity"

2
js/export.js
View File

@@ -1,3 +1,5 @@
// @ts-check
import Blueprint from "./Blueprint"
import Configuration from "./Configuration"
import LinkElement from "./element/LinkElement"

2
js/input/IContext.js
View File

@@ -1,3 +1,5 @@
// @ts-check
export default class IContext {
/** @type {HTMLElement} */

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

@@ -1,3 +1,5 @@
// @ts-check
import IContext from "../IContext"
import ObjectSerializer from "../../serialization/ObjectSerializer"

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

@@ -1,3 +1,5 @@
// @ts-check
import IContext from "../IContext"
import NodeElement from "../../element/NodeElement"
import ObjectSerializer from "../../serialization/ObjectSerializer"

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

@@ -1,3 +1,5 @@
// @ts-check
import Configuration from "../../Configuration"
import IContext from "../IContext"
import ISerializer from "../../serialization/ISerializer"

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

@@ -1,3 +1,5 @@
// @ts-check
import Configuration from "../../Configuration"
import IKeyboardShortcut from "./IKeyboardShortcut"

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

@@ -1,3 +1,5 @@
// @ts-check
import Configuration from "../../Configuration"
import IKeyboardShortcut from "./IKeyboardShortcut"
import Zoom from "../mouse/Zoom"
@@ -28,4 +30,4 @@ export default class KeyboardEnableZoom extends IKeyboardShortcut {
unfire() {
this.#zoomInputObject.enableZoonIn = false
}
}
}

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

@@ -1,3 +1,5 @@
// @ts-check
import Configuration from "../../Configuration"
import IKeyboardShortcut from "./IKeyboardShortcut"
@@ -19,4 +21,4 @@ export default class KeyboardSelectAll extends IKeyboardShortcut {
fire() {
this.blueprint.selectAll()
}
}
}

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

@@ -1,3 +1,5 @@
// @ts-check
import Configuration from "../../Configuration"
import IPointing from "./IPointing"

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

@@ -1,3 +1,5 @@
// @ts-check
import IPointing from "./IPointing"
export default class IMouseWheel extends IPointing {

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

@@ -1,3 +1,5 @@
// @ts-check
import IContext from "../IContext"
import Utility from "../../Utility"

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

@@ -1,3 +1,5 @@
// @ts-check
import IMouseClickDrag from "./IMouseClickDrag"
import LinkElement from "../../element/LinkElement"
import LinkMessageElement from "../../element/LinkMessageElement"

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

@@ -1,3 +1,5 @@
// @ts-check
import IMouseClickDrag from "./IMouseClickDrag"
import Utility from "../../Utility"

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

@@ -1,3 +1,5 @@
// @ts-check
import IMouseClickDrag from "./IMouseClickDrag"
export default class MouseScrollGraph extends IMouseClickDrag {

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

@@ -1,3 +1,5 @@
// @ts-check
import Configuration from "../../Configuration"
import IPointing from "./IPointing"

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

@@ -1,3 +1,5 @@
// @ts-check
import IMouseClickDrag from "./IMouseClickDrag"
export default class Select extends IMouseClickDrag {

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

@@ -1,3 +1,5 @@
// @ts-check
import IContext from "../IContext"
export default class Unfocus extends IContext {

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

@@ -1,3 +1,5 @@
// @ts-check
import IMouseWheel from "./IMouseWheel"
export default class Zoom extends IMouseWheel {

2
js/selection/FastSelectionModel.js
View File

@@ -1,3 +1,5 @@
// @ts-check
import OrderedIndexArray from "./OrderedIndexArray"
/**

2
js/selection/OrderedIndexArray.js
View File

@@ -1,3 +1,5 @@
// @ts-check
export default class OrderedIndexArray {
/**

2
js/selection/SimpleSelectionModel.js
View File

@@ -1,3 +1,5 @@
// @ts-check
export default class SimpleSelectionModel {
/**

2
js/serialization/CustomSerializer.js
View File

@@ -1,3 +1,5 @@
// @ts-check
import GeneralSerializer from "./GeneralSerializer"
export default class CustomSerializer extends GeneralSerializer {

2
js/serialization/GeneralSerializer.js
View File

@@ -1,3 +1,5 @@
// @ts-check
import Grammar from "./Grammar"
import ISerializer from "./ISerializer"

2
js/serialization/Grammar.js
View File

@@ -1,3 +1,5 @@
// @ts-check
import FunctionReferenceEntity from "../entity/FunctionReferenceEntity"
import GuidEntity from "../entity/GuidEntity"
import IdentifierEntity from "../entity/IdentifierEntity"

2
js/serialization/ISerializer.js
View File

@@ -1,3 +1,5 @@
// @ts-check
import Grammar from "./Grammar"
import IEntity from "../entity/IEntity"
import Parsimmon from "parsimmon"

2
js/serialization/ObjectSerializer.js
View File

@@ -1,3 +1,5 @@
// @ts-check
import ISerializer from "./ISerializer"
import ObjectEntity from "../entity/ObjectEntity"
import PinEntity from "../entity/PinEntity"

2
js/serialization/SerializerFactory.js
View File

@@ -1,3 +1,5 @@
// @ts-check
import Utility from "../Utility"
export default class SerializerFactory {

2
js/serialization/ToStringSerializer.js
View File

@@ -1,3 +1,5 @@
// @ts-check
import GeneralSerializer from "./GeneralSerializer"
export default class ToStringSerializer extends GeneralSerializer {

2
js/serialization/initializeSerializerFactory.js
View File

@@ -1,3 +1,5 @@
// @ts-check
import CustomSerializer from "./CustomSerializer"
import FunctionReferenceEntity from "../entity/FunctionReferenceEntity"
import GeneralSerializer from "./GeneralSerializer"

2
js/template/BlueprintTemplate.js
View File

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

2
js/template/ExecPinTemplate.js
View File

@@ -1,3 +1,5 @@
// @ts-check
import html from "./html"
import PinTemplate from "./PinTemplate"

1
js/template/ITemplate.js
View File

@@ -1,4 +1,5 @@
// @ts-check
/**
* @typedef {import("../element/IElement").default} IElement
*/

4
js/template/LinkMessageTemplate.js
View File

@@ -1,3 +1,5 @@
// @ts-check
import html from "./html"
import ITemplate from "./ITemplate"
import LinkElement from "../element/LinkElement"
@@ -36,4 +38,4 @@ export default class LinkMessageTemplate extends ITemplate {
}
}
}
}

3
js/template/LinkTemplate.js
View File

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

2
js/template/NodeTemplate.js
View File

@@ -1,3 +1,5 @@
// @ts-check
import html from "./html"
import PinElement from "../element/PinElement"
import sanitizeText from "./sanitizeText"

2
js/template/PinTemplate.js
View File

@@ -1,3 +1,5 @@
// @ts-check
import html from "./html"
import ITemplate from "./ITemplate"
import LinkElement from "../element/LinkElement"

2
js/template/SelectableDraggableTemplate.js
View File

@@ -1,3 +1,5 @@
// @ts-check
import ITemplate from "./ITemplate"
import sanitizeText from "./sanitizeText"

2
js/template/SelectorTemplate.js
View File

@@ -1,3 +1,5 @@
// @ts-check
import ITemplate from "./ITemplate"
import sanitizeText from "./sanitizeText"

7
js/template/StringPinTemplate.js
View File

@@ -10,8 +10,13 @@ export default class StringPinTemplate extends PinTemplate {
* @param {PinElement} pin
*/
renderInput(pin) {
const stopEventPropagation = "e => stopPropagation()"
return html`
<span class="ueb-pin-input" role="textbox" contenteditable="true"></span>
<span class="ueb-pin-input">
<span class="ueb-pin-input-content" role="textbox" contenteditable="true"
onkeydown="${stopEventPropagation}" onkeyup="${stopEventPropagation}"
oncopy="${stopEventPropagation}" onpaste="${stopEventPropagation}"></span>
</span>
`
}
}

2
js/template/html.js
View File

@@ -1,3 +1,5 @@
// @ts-check
/**
* This solves the sole purpose of providing compression capability for html inside template literals strings. Check rollup.config.js function minifyHTML()
*/

4
js/template/sanitizeText.js
View File

@@ -1,3 +1,5 @@
// @ts-check
const div = document.createElement("div")
const tagReplacement = {
@@ -15,4 +17,4 @@ function sanitizeText(value) {
return value
}
export default sanitizeText
export default sanitizeText

2
scss/style.scss
View File

@@ -41,7 +41,7 @@ ueb-blueprint {
.ueb-viewport-body {
position : relative;
height : 30rem;
height : var(--ueb-height, 30rem);
overflow : hidden;
scrollbar-width: 0;
}

6
scss/ueb-node.scss
View File

@@ -34,12 +34,12 @@ ueb-blueprint[data-drag-scrolling="false"][data-selecting="false"] ueb-node {
padding : 1px;
box-shadow : inset 0 0 2px 0 black;
border-radius: var(--ueb-node-radius);
background : rgba(0, 0, 0, 0.7);
background : rgba(10, 10, 10, 0.8);
overflow : hidden;
}
.ueb-node-header {
padding : 0.2em 0.7em;
padding : 0.3em 0.7em;
box-shadow : inset 0 1px 2px 0 #313631, inset 0 2px 0 0 #92c381;
border-radius: var(--ueb-node-radius) var(--ueb-node-radius) 0 0;
background : linear-gradient(170deg, #5f815a 0%, #5f815a 50%, transparent 100%);
@@ -56,7 +56,7 @@ ueb-blueprint[data-drag-scrolling="false"][data-selecting="false"] ueb-node {
.ueb-node-body {
display : flex;
padding : 3px 0;
padding : 1px 0;
color : white;
font-weight: 100;
white-space: nowrap;

44
scss/ueb-pin.scss
View File

@@ -1,6 +1,6 @@
ueb-pin {
display: block;
margin : 5px 0;
margin : 6px 0;
padding: 2px 2px;
&>* {
@@ -30,8 +30,8 @@ ueb-blueprint[data-drag-scrolling="false"][data-selecting="false"] ueb-pin:hover
.ueb-pin-icon-value {
display : inline-block;
position : relative;
width : 0.85em;
height : 0.85em;
width : 1em;
height : 1em;
vertical-align: baseline;
margin : 0 0.4em -1px 0.1em;
}
@@ -78,19 +78,39 @@ ueb-pin.ueb-pin-fill .ueb-pin-icon-value::before {
margin-left : 3px;
border : 1px solid #a0a0a0;
border-radius: 3px;
padding : 1px 4px;
min-width : 10px;
max-width : 400px;
max-height : 14em;
background : none;
padding : 1px 0 0 3px;
color : #c0c0c0;
cursor : text;
overflow : auto;
&:hover,
&:active,
&:focus {
background: #505250;
&:focus,
&:focus-within {
background: #ffffff46;
outline : none;
}
}
.ueb-pin-input-content {
display : block;
outline : none;
border : none;
margin : 0 3px 1px 0;
padding : 0;
min-width : 10px;
max-width : 400px;
max-height: 16em;
background: none;
cursor : text;
overflow : auto;
&::-webkit-scrollbar {
width : 10px;
height: 10px;
}
&::-webkit-scrollbar-thumb {
background : #575757;
border-radius: 10px;
margin : 4px;
}
}