From 715dee6a5a69230f201b243b13f8cffbf4fd67f2 Mon Sep 17 00:00:00 2001 From: barsdeveloper Date: Sun, 4 Sep 2022 14:33:22 +0200 Subject: [PATCH] Mergin better performance branch --- .gitignore | 3 +- .vscode/settings.json | 3 - dist/css/ueb-style.css | 206 +- dist/css/ueb-style.css.map | 2 +- dist/css/ueb-style.min.css | 2 +- dist/css/ueb-style.min.css.map | 2 +- dist/ueblueprint.js | 2522 ++++++++--------- dist/ueblueprint.min.js | 24 +- index.html | 2 +- js/Blueprint.js | 273 +- js/Configuration.js | 22 +- js/Observable.js | 105 + js/Utility.js | 29 +- js/element/IElement.js | 77 +- js/element/IFromToPositionedElement.js | 68 + js/element/ISelectableDraggableElement.js | 83 +- js/element/LinkElement.js | 304 +- js/element/LinkMessageElement.js | 68 - js/element/NodeElement.js | 70 +- js/element/PinElement.js | 106 +- js/element/SelectorElement.js | 37 +- js/entity/FunctionReferenceEntity.js | 8 - js/entity/GuidEntity.js | 7 - js/entity/IEntity.js | 21 +- js/entity/ISerializable.js | 15 - js/entity/IdentifierEntity.js | 8 +- js/entity/IntegerEntity.js | 2 - js/entity/InvariantTextEntity.js | 7 - js/entity/KeyBindingEntity.js | 8 - js/entity/LinearColorEntity.js | 33 - js/entity/LocalizedTextEntity.js | 9 - js/entity/NaturalNumberEntity.js | 2 - js/entity/ObjectEntity.js | 24 +- js/entity/ObjectReferenceEntity.js | 8 - js/entity/PathSymbolEntity.js | 7 - js/entity/PinEntity.js | 48 +- js/entity/PinReferenceEntity.js | 8 - js/entity/SerializedType.js | 12 - js/entity/TypeInitialization.js | 2 - js/entity/VariableReferenceEntity.js | 9 - js/export.js | 2 - js/input/IInput.js | 2 - js/input/common/Copy.js | 4 +- js/input/common/Paste.js | 8 +- js/input/keybaord/IKeyboardShortcut.js | 3 - js/input/keybaord/KeyboardCanc.js | 2 - js/input/keybaord/KeyboardEnableZoom.js | 2 - js/input/keybaord/KeyboardSelectAll.js | 2 - js/input/mouse/IMouseClickDrag.js | 19 +- js/input/mouse/IMouseWheel.js | 5 +- js/input/mouse/IPointing.js | 11 +- js/input/mouse/MouseCreateLink.js | 37 +- js/input/mouse/MouseMoveNodes.js | 14 +- js/input/mouse/MouseScrollGraph.js | 6 +- js/input/mouse/MouseTracking.js | 2 - js/input/mouse/Select.js | 8 +- js/input/mouse/Unfocus.js | 2 - js/input/mouse/Zoom.js | 2 - js/selection/FastSelectionModel.js | 2 - js/selection/OrderedIndexArray.js | 2 - js/selection/SimpleSelectionModel.js | 2 - js/serialization/CustomSerializer.js | 2 - js/serialization/GeneralSerializer.js | 2 - js/serialization/Grammar.js | 72 +- js/serialization/ISerializer.js | 2 - js/serialization/ObjectSerializer.js | 2 - js/serialization/PinSerializer.js | 3 - js/serialization/SerializerFactory.js | 2 - js/serialization/ToStringSerializer.js | 2 - .../initializeSerializerFactory.js | 54 +- js/template/BlueprintTemplate.js | 161 +- js/template/BoolPinTemplate.js | 20 +- js/template/ExecPinTemplate.js | 20 +- js/template/IFromToPositionedTemplate.js | 33 + js/template/IInputPinTemplate.js | 26 +- js/template/ITemplate.js | 51 +- js/template/LinearColorPinTemplate.js | 17 +- js/template/LinkMessageTemplate.js | 42 - js/template/LinkTemplate.js | 178 +- js/template/NamePinTemplate.js | 7 +- js/template/NodeTemplate.js | 88 +- js/template/PinTemplate.js | 55 +- js/template/RealPinTemplate.js | 6 +- js/template/SelectableDraggableTemplate.js | 34 +- js/template/SelectorTemplate.js | 46 +- js/template/StringPinTemplate.js | 7 +- js/template/VariadicNodeTemplate.js | 2 - js/template/html.js | 7 - js/template/sanitizeText.js | 17 - package.json | 19 +- rollup.config.js | 36 +- scss/export.scss | 2 +- scss/style.scss | 54 +- scss/ueb-link.scss | 10 +- scss/ueb-node.scss | 9 +- scss/ueb-pin.scss | 14 +- scss/ueb-type-color.scss | 73 +- 97 files changed, 2725 insertions(+), 2833 deletions(-) delete mode 100644 .vscode/settings.json create mode 100644 js/Observable.js create mode 100644 js/element/IFromToPositionedElement.js delete mode 100644 js/element/LinkMessageElement.js delete mode 100644 js/entity/ISerializable.js create mode 100755 js/template/IFromToPositionedTemplate.js delete mode 100644 js/template/LinkMessageTemplate.js delete mode 100755 js/template/html.js delete mode 100755 js/template/sanitizeText.js diff --git a/.gitignore b/.gitignore index ac08ec5..cf0ef3b 100644 --- a/.gitignore +++ b/.gitignore @@ -1,3 +1,4 @@ node_modules/ package-lock.json -localhost* \ No newline at end of file +localhost* +*.git \ No newline at end of file diff --git a/.vscode/settings.json b/.vscode/settings.json deleted file mode 100644 index 99daf66..0000000 --- a/.vscode/settings.json +++ /dev/null @@ -1,3 +0,0 @@ -{ - "prettier.tabWidth": 4 -} \ No newline at end of file diff --git a/dist/css/ueb-style.css b/dist/css/ueb-style.css index c84d1a6..5193470 100644 --- a/dist/css/ueb-style.css +++ b/dist/css/ueb-style.css @@ -9,6 +9,8 @@ src: url("../font/roboto-regular.woff2") format("woff2"), url("../font/roboto-regular.woff") format("woff"); } ueb-blueprint { + --ueb-scale: 1; + --ueb-grid-actual-size: var(--ueb-grid-size); display: block; position: relative; font-family: Roboto, Noto, Oxygen, Ubuntu, "Open Sans", "Helvetica Neue", sans-serif; @@ -54,8 +56,8 @@ ueb-blueprint[data-focused=true] .ueb-viewport-body { position: absolute; min-width: 100%; min-height: 100%; - width: calc((100% + var(--ueb-additional-x) * 1px) / var(--ueb-scale)); - height: calc((100% + var(--ueb-additional-y) * 1px) / var(--ueb-scale)); + width: calc((100% + 2 * var(--ueb-grid-expand)) / var(--ueb-scale)); + height: calc((100% + 2 * var(--ueb-grid-expand)) / var(--ueb-scale)); background-color: #262626; background-image: linear-gradient(var(--ueb-grid-axis-line-color), var(--ueb-grid-axis-line-color)), linear-gradient(var(--ueb-grid-axis-line-color), var(--ueb-grid-axis-line-color)), linear-gradient(to right, var(--ueb-grid-set-line-color), var(--ueb-grid-set-line-color) var(--ueb-grid-line-actual-width), transparent var(--ueb-grid-line-actual-width), transparent), linear-gradient(to bottom, var(--ueb-grid-set-line-color), var(--ueb-grid-set-line-color) var(--ueb-grid-line-actual-width), transparent var(--ueb-grid-line-actual-width), transparent), linear-gradient(to right, var(--ueb-grid-line-color), var(--ueb-grid-line-color) var(--ueb-grid-line-actual-width), transparent var(--ueb-grid-line-actual-width), transparent), linear-gradient(to bottom, var(--ueb-grid-line-color), var(--ueb-grid-line-color) var(--ueb-grid-line-actual-width), transparent var(--ueb-grid-line-actual-width), transparent); background-size: 100% var(--ueb-grid-line-actual-width), var(--ueb-grid-line-actual-width) 100%, calc(var(--ueb-grid-set) * var(--ueb-grid-actual-size)) calc(var(--ueb-grid-set) * var(--ueb-grid-actual-size)), calc(var(--ueb-grid-set) * var(--ueb-grid-actual-size)) calc(var(--ueb-grid-set) * var(--ueb-grid-actual-size)), var(--ueb-grid-actual-size) var(--ueb-grid-actual-size), var(--ueb-grid-actual-size) var(--ueb-grid-actual-size); @@ -66,101 +68,95 @@ ueb-blueprint[data-focused=true] .ueb-viewport-body { overflow: hidden; } -ueb-blueprint[data-drag-scrolling=true] .ueb-grid { +ueb-blueprint[data-scrolling=true] .ueb-grid { cursor: grabbing; } -ueb-blueprint[data-drag-scrolling=false] .ueb-grid { +ueb-blueprint[data-scrolling=false] .ueb-grid { cursor: default; } -.ueb-zoom--.ueb, -.ueb { - --ueb-scale: 1; - --ueb-grid-actual-size: var(--ueb-grid-size); -} - -.ueb-zoom-7.ueb { +ueb-blueprint[data-zoom="7"] { --ueb-scale: 2; } -.ueb-zoom-6.ueb { +ueb-blueprint[data-zoom="6"] { --ueb-scale: 1.875; } -.ueb-zoom-5.ueb { +ueb-blueprint[data-zoom="5"] { --ueb-scale: 1.75; } -.ueb-zoom-4.ueb { +ueb-blueprint[data-zoom="4"] { --ueb-scale: 1.675; } -.ueb-zoom-3.ueb { +ueb-blueprint[data-zoom="3"] { --ueb-scale: 1.5; } -.ueb-zoom-2.ueb { +ueb-blueprint[data-zoom="2"] { --ueb-scale: 1.375; } -.ueb-zoom-1.ueb { +ueb-blueprint[data-zoom="1"] { --ueb-scale: 1.25; } -.ueb-zoom--1.ueb { +ueb-blueprint[data-zoom="-1"] { --ueb-scale: 0.875; } -.ueb-zoom--2.ueb { +ueb-blueprint[data-zoom="-2"] { --ueb-scale: 0.75; } -.ueb-zoom--3.ueb { +ueb-blueprint[data-zoom="-3"] { --ueb-scale: 0.675; } -.ueb-zoom--4.ueb { +ueb-blueprint[data-zoom="-4"] { --ueb-scale: 0.5; --ueb-grid-actual-size: calc(var(--ueb-grid-size) * 2); } -.ueb-zoom--5.ueb { +ueb-blueprint[data-zoom="-5"] { --ueb-scale: 0.375; --ueb-grid-actual-size: calc(var(--ueb-grid-size) * 2); } -.ueb-zoom--6.ueb { +ueb-blueprint[data-zoom="-6"] { --ueb-scale: 0.333333; --ueb-grid-actual-size: calc(var(--ueb-grid-size) * 3); } -.ueb-zoom--7.ueb { +ueb-blueprint[data-zoom="-7"] { --ueb-scale: 0.3; --ueb-grid-actual-size: calc(var(--ueb-grid-size) * 3); } -.ueb-zoom--8.ueb { +ueb-blueprint[data-zoom="-8"] { --ueb-scale: 0.266666; --ueb-grid-actual-size: calc(var(--ueb-grid-size) * 3); } -.ueb-zoom--9.ueb { +ueb-blueprint[data-zoom="-9"] { --ueb-scale: 0.233333; --ueb-grid-actual-size: calc(var(--ueb-grid-size) * 3); } -.ueb-zoom--10.ueb { +ueb-blueprint[data-zoom="-10"] { --ueb-scale: 0.2; --ueb-grid-actual-size: calc(var(--ueb-grid-size) * 3); } -.ueb-zoom--11.ueb { +ueb-blueprint[data-zoom="-11"] { --ueb-scale: 0.166666; --ueb-grid-actual-size: calc(var(--ueb-grid-size) * 6); } -.ueb-zoom--12.ueb { +ueb-blueprint[data-zoom="-12"] { --ueb-scale: 0.133333; --ueb-grid-actual-size: calc(var(--ueb-grid-size) * 6); } @@ -177,7 +173,7 @@ ueb-blueprint[data-drag-scrolling=false] .ueb-grid { height: 0; } -.ueb-positioned, ueb-blueprint[data-selecting=true] ueb-selector { +.ueb-positioned, ueb-link, ueb-blueprint[data-selecting=true] ueb-selector { --ueb-computed-min-x: min(var(--ueb-from-x), var(--ueb-to-x)); --ueb-computed-max-x: max(var(--ueb-from-x), var(--ueb-to-x)); --ueb-computed-min-y: min(var(--ueb-from-y), var(--ueb-to-y)); @@ -222,7 +218,7 @@ ueb-node { font-weight: lighter; } -ueb-blueprint[data-drag-scrolling=false][data-selecting=false] ueb-node { +ueb-blueprint[data-scrolling=false][data-selecting=false] ueb-node { cursor: move; } @@ -232,7 +228,7 @@ ueb-blueprint[data-drag-scrolling=false][data-selecting=false] ueb-node { border-radius: calc(var(--ueb-node-radius) * 1.4); } -.ueb-selected > .ueb-node-border { +ueb-node[data-selected=true] > .ueb-node-border { background-image: linear-gradient(to right, #f1b000 0%, #f1b000 100%), linear-gradient(to bottom, #f1b000 0%, #cc6700 100%), linear-gradient(to right, #cc6700 0%, #cc6700 100%), linear-gradient(to bottom, #f1b000 0%, #cc6700 100%); background-size: 100% 7px, 7px 100%, 100% 7px, 7px 100%; background-position: top, right, bottom, left; @@ -307,7 +303,7 @@ ueb-node[data-enabled-state=DevelopmentOnly] .ueb-node-developmentonly { vertical-align: middle; } -ueb-blueprint[data-drag-scrolling=false][data-selecting=false] .ueb-node-expansion:hover { +ueb-blueprint[data-scrolling=false][data-selecting=false] .ueb-node-expansion:hover { background-color: #656765; cursor: pointer; } @@ -338,7 +334,7 @@ ueb-node[data-advanced-display=Hidden] ueb-pin[data-advanced-view=true] { vertical-align: middle; } -ueb-blueprint[data-drag-scrolling=false][data-selecting=false] .ueb-pin-wrapper:hover { +ueb-blueprint[data-scrolling=false][data-selecting=false] .ueb-pin-wrapper:hover { background: var(--ueb-pin-background); cursor: crosshair; } @@ -373,11 +369,11 @@ ueb-blueprint[data-drag-scrolling=false][data-selecting=false] .ueb-pin-wrapper: border-radius: 50%; } -ueb-pin.ueb-pin-fill .ueb-pin-icon-value::before { +ueb-pin[data-linked=true] .ueb-pin-icon-value::before { background: var(--ueb-pin-color); } -ueb-pin.ueb-pin-fill .ueb-pin-tofill { +ueb-pin[data-linked=true] .ueb-pin-tofill { fill: currentColor; } @@ -399,7 +395,7 @@ ueb-pin.ueb-pin-fill .ueb-pin-tofill { vertical-align: middle; } -.ueb-pin-exec .ueb-pin-name { +ueb-pin[data-type=exec] .ueb-pin-name { display: none; } @@ -417,7 +413,7 @@ ueb-pin.ueb-pin-fill .ueb-pin-tofill { outline: none; } -.ueb-pin-type-bool .ueb-pin-input { +ueb-pin[data-type=bool] .ueb-pin-input { appearance: none; padding: 0; height: 18px; @@ -426,7 +422,7 @@ ueb-pin.ueb-pin-fill .ueb-pin-tofill { color: var(--ueb-pin-color); } -.ueb-pin-type-bool .ueb-pin-input:checked { +ueb-pin[data-type=bool] .ueb-pin-input:checked { background-image: url('data:image/svg+xml,'); } @@ -458,6 +454,7 @@ ueb-link { /* 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 @@ -479,17 +476,17 @@ ueb-link svg { ueb-link svg path { visibility: visible; - stroke: var(--ueb-pin-color); + stroke: var(--ueb-link-color); stroke-width: 1; } -ueb-link.ueb-link-dragging svg path, +ueb-link[data-dragging=true] svg path, ueb-link svg g:hover path { stroke-width: 5; transition: stroke-width 0.8s; } -ueb-link-message { +.ueb-link-message { display: block; visibility: visible; position: absolute; @@ -504,119 +501,66 @@ ueb-link-message { z-index: 1000000; } -.ueb { - --ueb-pin-color: white; +ueb-blueprint { --ueb-pin-dim-color: #afafaf; } -.ueb-pin-type-bool { - --ueb-pin-color: #750000; - --ueb-pin-background: linear-gradient(90deg, - rgba(117, 0, 0, 0.15), - rgba(117, 0, 0, 0.8) 15%, - rgba(117, 0, 0, 0.5) 60%, - rgba(117, 0, 0, 0.35) 95%, - transparent); +ueb-link { + --ueb-link-color: rgb(var(--ueb-link-color-rgb)); } -.ueb-pin-type-class { - --ueb-pin-color: #5800bb; +ueb-pin { --ueb-pin-background: linear-gradient(90deg, - rgba(88, 0, 187, 0.15), - rgba(88, 0, 187, 0.8) 15%, - rgba(88, 0, 187, 0.5) 60%, - rgba(88, 0, 187, 0.35) 95%, - transparent); + rgba(var(--ueb-pin-color-rgb), 0.15), + rgba(var(--ueb-pin-color-rgb), 0.8) 15%, + rgba(var(--ueb-pin-color-rgb), 0.5) 60%, + rgba(var(--ueb-pin-color-rgb), 0.35) 95%, + transparent); + --ueb-pin-color: rgb(var(--ueb-pin-color-rgb)); } -.ueb-pin-type-exec { - --ueb-pin-color: #a7a7a7; - --ueb-pin-background: linear-gradient(90deg, - rgba(167, 167, 167, 0.15), - rgba(167, 167, 167, 0.8) 15%, - rgba(167, 167, 167, 0.5) 60%, - rgba(167, 167, 167, 0.35) 95%, - transparent); +ueb-pin[data-type=bool] { + --ueb-pin-color-rgb: var(--ueb-pin-bool-color); } -.ueb-pin-type-int { - --ueb-pin-color: #1fe0ad; - --ueb-pin-background: linear-gradient(90deg, - rgba(31, 224, 173, 0.15), - rgba(31, 224, 173, 0.8) 15%, - rgba(31, 224, 173, 0.5) 60%, - rgba(31, 224, 173, 0.35) 95%, - transparent); +ueb-pin[data-type=class] { + --ueb-pin-color-rgb: var(--ueb-pin-class-color); } -.ueb-pin-type-name { - --ueb-pin-color: #cb81fc; - --ueb-pin-background: linear-gradient(90deg, - rgba(203, 129, 252, 0.15), - rgba(203, 129, 252, 0.8) 15%, - rgba(203, 129, 252, 0.5) 60%, - rgba(203, 129, 252, 0.35) 95%, - transparent); +ueb-pin[data-type=exec] { + --ueb-pin-color-rgb: var(--ueb-pin-exec-color); } -.ueb-pin-type-object { - --ueb-pin-color: #00a8f2; - --ueb-pin-background: linear-gradient(90deg, - rgba(0, 168, 242, 0.15), - rgba(0, 168, 242, 0.8) 15%, - rgba(0, 168, 242, 0.5) 60%, - rgba(0, 168, 242, 0.35) 95%, - transparent); +ueb-pin[data-type=int] { + --ueb-pin-color-rgb: var(--ueb-pin-int-color); } -.ueb-pin-type-real { - --ueb-pin-color: #32bb00; - --ueb-pin-background: linear-gradient(90deg, - rgba(50, 187, 0, 0.15), - rgba(50, 187, 0, 0.8) 15%, - rgba(50, 187, 0, 0.5) 60%, - rgba(50, 187, 0, 0.35) 95%, - transparent); +ueb-pin[data-type=name] { + --ueb-pin-color-rgb: var(--ueb-pin-name-color); } -.ueb-pin-type-rotator { - --ueb-pin-color: #9eb1fc; - --ueb-pin-background: linear-gradient(90deg, - rgba(158, 177, 252, 0.15), - rgba(158, 177, 252, 0.8) 15%, - rgba(158, 177, 252, 0.5) 60%, - rgba(158, 177, 252, 0.35) 95%, - transparent); +ueb-pin[data-type=object] { + --ueb-pin-color-rgb: var(--ueb-pin-object-color); } -.ueb-pin-type-string { - --ueb-pin-color: #d500b1; - --ueb-pin-background: linear-gradient(90deg, - rgba(213, 0, 177, 0.15), - rgba(213, 0, 177, 0.8) 15%, - rgba(213, 0, 177, 0.5) 60%, - rgba(213, 0, 177, 0.35) 95%, - transparent); +ueb-pin[data-type=real] { + --ueb-pin-color-rgb: var(--ueb-pin-real-color); } -.ueb-pin-type-struct { - --ueb-pin-color: #034ca8; - --ueb-pin-background: linear-gradient(90deg, - rgba(3, 76, 168, 0.15), - rgba(3, 76, 168, 0.8) 15%, - rgba(3, 76, 168, 0.5) 60%, - rgba(3, 76, 168, 0.35) 95%, - transparent); +ueb-pin[data-type=rotator] { + --ueb-pin-color-rgb: var(--ueb-pin-rotator-color); } -.ueb-pin-type-vector { - --ueb-pin-color: #fcc823; - --ueb-pin-background: linear-gradient(90deg, - rgba(252, 200, 35, 0.15), - rgba(252, 200, 35, 0.8) 15%, - rgba(252, 200, 35, 0.5) 60%, - rgba(252, 200, 35, 0.35) 95%, - transparent); +ueb-pin[data-type=string] { + --ueb-pin-color-rgb: var(--ueb-pin-string-color); +} + +ueb-pin[data-type=struct] { + --ueb-pin-color-rgb: var(--ueb-pin-struct-color); +} + +ueb-pin[data-type=vector] { + --ueb-pin-color-rgb: var(--ueb-pin-vector-color); } /*# sourceMappingURL=ueb-style.css.map */ diff --git a/dist/css/ueb-style.css.map b/dist/css/ueb-style.css.map index 62a321a..4d32500 100644 --- a/dist/css/ueb-style.css.map +++ b/dist/css/ueb-style.css.map @@ -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;EACI;EACA;EACA,KACI;;AAIR;EACI;EACA;EACA,KACI;;AAIR;EACI;EACA;EACA;EACA;EACA;EACA;;;AAGJ;EACI;;;AAGJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGJ;EACI;EACA;EACA;;;AAGJ;EACI;EACA;EACA;EACA;;;AAGJ;EACI;;;AAGJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA,kBAEI;EA0BJ,iBAEI;EAQJ;EACA;EACA;EACA;EACA;;;AAGJ;EACI;;;AAGJ;EACI;;;AAGJ;AAAA;EAEI;EACA;;;AAGJ;EACI;;;AAGJ;EACI;;;AAGJ;EACI;;;AAGJ;EACI;;;AAGJ;EACI;;;AAGJ;EACI;;;AAGJ;EACI;;;AAGJ;EACI;;;AAGJ;EACI;;;AAGJ;EACI;;;AAGJ;EACI;EACA;;;AAGJ;EACI;EACA;;;AAGJ;EACI;EACA;;;AAGJ;EACI;EACA;;;AAGJ;EACI;EACA;;;AAGJ;EACI;EACA;;;AAGJ;EACI;EACA;;;AAGJ;EACI;EACA;;;AAGJ;EACI;EACA;;;AAGJ;EACI;EACA;EACA;EACA;;;AAGJ;EACI;EACA;;;AAGJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA,kBAEI;EAmDJ,iBAEI;EAWJ,qBAEI;EAOJ;;;AAGJ;EACI;;;AAIJ;EACI;;;ACvUJ;EACI;EACA;EACA;EACA;EACA;EACA;;;AAGJ;EACI;;;AAGJ;EACI;EACA;EACA;;;AAGJ;EACI,kBACI;EAIJ;EACA;EACA;EACA;EACA;;;AAGJ;EACI;EACA;EACA;EACA;EACA;EACA;;;AAGJ;EACI;EACA;EAGA;EACA;EACA;EACA;EACA;;;AAGJ;EACI;EACA;EACA;;;AAGJ;EACI;EACA;EACA;EACA;;;AAGJ;EACI;EACA;;;AAGJ;EACI;EACA;;;AAGJ;EACI;EACA;EACA;EAMA;EAMA;EACA;EACA;EACA;;;AAGJ;EACI;;;AAGJ;EACI;EACA;;;AAGJ;EACI;;;AAGJ;EACI;EACA;;;AAGJ;EACI;;;AAGJ;EACI;;;ACxHJ;EACI;;;AAGJ;EACI;;;AAGJ;EACI;EACA;EACA;;AAEA;EACI;EACA;;;AAIR;EACI;EACA;;;AAGJ;EACI;;;AAGJ;EACI;EACA;;;AAGJ;EACI;EACA;EACA;EACA;EACA;EACA;;;AAGJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGJ;EACI;;;AAGJ;EACI;;;AAGJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGJ;EACI;EACA;;;AAGJ;EACI;;;AAGJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EAII;EACA;;;AAIR;EACI;EACA;EACA;EACA;EACA;EACA;;;AAGJ;EACI;;;AAGJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;;AAGJ;EACI;EACA;EACA;;;ACxIR;EACI;AACA;EACA;EACA;EACA;AACA;AAAA;AAAA;AAAA;EAIA;;;AAGJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGJ;EACI;EACA;EACA;;;AAGJ;AAAA;EAEI;EACA;;;AAGJ;EACI;EACA;EACA;EACA;EACA;EAOA;EACA;EACA;EACA;EACA;EACA;EACA;;;AC5CJ;EAGI;EACA;;;AAGJ;EAhBI;EACA;AAAA;AAAA;AAAA;AAAA;AAAA;;;AAmBJ;EApBI;EACA;AAAA;AAAA;AAAA;AAAA;AAAA;;;AAuBJ;EAxBI;EACA;AAAA;AAAA;AAAA;AAAA;AAAA;;;AA2BJ;EA5BI;EACA;AAAA;AAAA;AAAA;AAAA;AAAA;;;AA+BJ;EAhCI;EACA;AAAA;AAAA;AAAA;AAAA;AAAA;;;AAmCJ;EApCI;EACA;AAAA;AAAA;AAAA;AAAA;AAAA;;;AAuCJ;EAxCI;EACA;AAAA;AAAA;AAAA;AAAA;AAAA;;;AA2CJ;EA5CI;EACA;AAAA;AAAA;AAAA;AAAA;AAAA;;;AA+CJ;EAhDI;EACA;AAAA;AAAA;AAAA;AAAA;AAAA;;;AAmDJ;EApDI;EACA;AAAA;AAAA;AAAA;AAAA;AAAA;;;AAuDJ;EAxDI;EACA;AAAA;AAAA;AAAA;AAAA;AAAA","file":"ueb-style.css"} \ No newline at end of file +{"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;EACI;EACA;EACA,KACI;;AAIR;EACI;EACA;EACA,KACI;;AAIR;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGJ;EACI;;;AAGJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGJ;EACI;EACA;EACA;;;AAGJ;EACI;EACA;EACA;EACA;;;AAGJ;EACI;;;AAGJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA,kBAEI;EA0BJ,iBAEI;EAQJ;EACA;EACA;EACA;EACA;;;AAGJ;EACI;;;AAGJ;EACI;;;AAGJ;EACI;;;AAGJ;EACI;;;AAGJ;EACI;;;AAGJ;EACI;;;AAGJ;EACI;;;AAGJ;EACI;;;AAGJ;EACI;;;AAGJ;EACI;;;AAGJ;EACI;;;AAGJ;EACI;;;AAGJ;EACI;EACA;;;AAGJ;EACI;EACA;;;AAGJ;EACI;EACA;;;AAGJ;EACI;EACA;;;AAGJ;EACI;EACA;;;AAGJ;EACI;EACA;;;AAGJ;EACI;EACA;;;AAGJ;EACI;EACA;;;AAGJ;EACI;EACA;;;AAGJ;EACI;EACA;EACA;EACA;;;AAGJ;EACI;EACA;;;AAGJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA,kBAEI;EAmDJ,iBAEI;EAWJ,qBAEI;EAOJ;;;AAGJ;EACI;;;AAIJ;EACI;;;ACnUJ;EACI;EACA;EACA;EACA;EACA;EACA;;;AAGJ;EACI;;;AAGJ;EACI;EACA;EACA;;;AAGJ;EACI,kBACI;EAIJ;EACA;EACA;EACA;EACA;;;AAGJ;EACI;EACA;EACA;EACA;EACA;EACA;;;AAGJ;EACI;EACA,YACI;EAGJ;EACA;EACA;EACA;EACA;;;AAGJ;EACI;EACA;EACA;;;AAGJ;EACI;EACA;EACA;EACA;;;AAGJ;EACI;EACA;;;AAGJ;EACI;EACA;;;AAGJ;EACI;EACA;EACA;EAMA;EAMA;EACA;EACA;EACA;;;AAGJ;EACI;;;AAGJ;EACI;EACA;;;AAGJ;EACI;;;AAGJ;EACI;EACA;;;AAGJ;EACI;;;AAGJ;EACI;;;ACzHJ;EACI;;;AAGJ;EACI;;;AAGJ;EACI;EACA;EACA;;AAEA;EACI;EACA;;;AAIR;EACI;EACA;;;AAGJ;EACI;;;AAGJ;EACI;EACA;;;AAGJ;EACI;EACA;EACA;EACA;EACA;EACA;;;AAGJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGJ;EACI;;;AAGJ;EACI;;;AAGJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGJ;EACI;EACA;;;AAGJ;EACI;;;AAGJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EAII;EACA;;;AAIR;EACI;EACA;EACA;EACA;EACA;EACA;;;AAGJ;EACI;;;AAGJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;;AAGJ;EACI;EACA;EACA;;;ACtIR;EACI;AACA;EACA;EACA;EACA;EACA;AACA;AAAA;AAAA;AAAA;EAIA;;;AAIJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGJ;EACI;EACA;EACA;;;AAGJ;AAAA;EAEI;EACA;;;AAGJ;EACI;EACA;EACA;EACA;EACA;EAOA;EACA;EACA;EACA;EACA;EACA;EACA;;;AC1DJ;EACI;;;AAGJ;EACI;;;AAGJ;EACI;AAAA;AAAA;AAAA;AAAA;AAAA;EAMA;;;AAGJ;EACI;;;AAGJ;EACI;;;AAGJ;EACI;;;AAGJ;EACI;;;AAGJ;EACI;;;AAGJ;EACI;;;AAGJ;EACI;;;AAGJ;EACI;;;AAGJ;EACI;;;AAGJ;EACI;;;AAGJ;EACI","file":"ueb-style.css"} \ No newline at end of file diff --git a/dist/css/ueb-style.min.css b/dist/css/ueb-style.min.css index 87c06fd..a92b30c 100644 --- a/dist/css/ueb-style.min.css +++ b/dist/css/ueb-style.min.css @@ -1 +1 @@ -@font-face{font-family:"Roboto";font-style:light;src:url("../font/roboto-light.woff2") format("woff2"),url("../font/roboto-light.woff") format("woff")}@font-face{font-family:"Roboto";font-style:regular;src:url("../font/roboto-regular.woff2") format("woff2"),url("../font/roboto-regular.woff") format("woff")}ueb-blueprint{display:block;position:relative;font-family:Roboto,Noto,Oxygen,Ubuntu,"Open Sans","Helvetica Neue",sans-serif;font-size:var(--ueb-font-size);color:#fff;user-select:none}ueb-blueprint svg{overflow:visible}.ueb-viewport-header{display:flex;position:absolute;top:0;right:0;left:0;height:1.5em;background:rgba(0,0,0,.5);z-index:1}.ueb-viewport-zoom{margin-left:auto;color:rgba(77,77,77,.7176470588);font-size:20px}.ueb-viewport-body{position:relative;height:var(--ueb-height, 30rem);overflow:hidden;scrollbar-width:0}ueb-blueprint[data-focused=true] .ueb-viewport-body{overflow:scroll}.ueb-grid{--ueb-grid-line-actual-width: calc(var(--ueb-grid-line-width) / var(--ueb-scale));position:absolute;min-width:100%;min-height:100%;width:calc((100% + var(--ueb-additional-x)*1px)/var(--ueb-scale));height:calc((100% + var(--ueb-additional-y)*1px)/var(--ueb-scale));background-color:#262626;background-image:linear-gradient(var(--ueb-grid-axis-line-color), var(--ueb-grid-axis-line-color)),linear-gradient(var(--ueb-grid-axis-line-color), var(--ueb-grid-axis-line-color)),linear-gradient(to right, var(--ueb-grid-set-line-color), var(--ueb-grid-set-line-color) var(--ueb-grid-line-actual-width), transparent var(--ueb-grid-line-actual-width), transparent),linear-gradient(to bottom, var(--ueb-grid-set-line-color), var(--ueb-grid-set-line-color) var(--ueb-grid-line-actual-width), transparent var(--ueb-grid-line-actual-width), transparent),linear-gradient(to right, var(--ueb-grid-line-color), var(--ueb-grid-line-color) var(--ueb-grid-line-actual-width), transparent var(--ueb-grid-line-actual-width), transparent),linear-gradient(to bottom, var(--ueb-grid-line-color), var(--ueb-grid-line-color) var(--ueb-grid-line-actual-width), transparent var(--ueb-grid-line-actual-width), transparent);background-size:100% var(--ueb-grid-line-actual-width),var(--ueb-grid-line-actual-width) 100%,calc(var(--ueb-grid-set)*var(--ueb-grid-actual-size)) calc(var(--ueb-grid-set)*var(--ueb-grid-actual-size)),calc(var(--ueb-grid-set)*var(--ueb-grid-actual-size)) calc(var(--ueb-grid-set)*var(--ueb-grid-actual-size)),var(--ueb-grid-actual-size) var(--ueb-grid-actual-size),var(--ueb-grid-actual-size) var(--ueb-grid-actual-size);background-position:calc(var(--ueb-translate-x)*1px) calc(var(--ueb-translate-y)*1px);background-repeat:repeat-x,repeat-y,repeat,repeat,repeat,repeat;transform:scale(var(--ueb-scale), var(--ueb-scale));transform-origin:0 0;overflow:hidden}ueb-blueprint[data-drag-scrolling=true] .ueb-grid{cursor:grabbing}ueb-blueprint[data-drag-scrolling=false] .ueb-grid{cursor:default}.ueb-zoom--.ueb,.ueb{--ueb-scale: 1;--ueb-grid-actual-size: var(--ueb-grid-size)}.ueb-zoom-7.ueb{--ueb-scale: 2}.ueb-zoom-6.ueb{--ueb-scale: 1.875}.ueb-zoom-5.ueb{--ueb-scale: 1.75}.ueb-zoom-4.ueb{--ueb-scale: 1.675}.ueb-zoom-3.ueb{--ueb-scale: 1.5}.ueb-zoom-2.ueb{--ueb-scale: 1.375}.ueb-zoom-1.ueb{--ueb-scale: 1.25}.ueb-zoom--1.ueb{--ueb-scale: 0.875}.ueb-zoom--2.ueb{--ueb-scale: 0.75}.ueb-zoom--3.ueb{--ueb-scale: 0.675}.ueb-zoom--4.ueb{--ueb-scale: 0.5;--ueb-grid-actual-size: calc(var(--ueb-grid-size) * 2)}.ueb-zoom--5.ueb{--ueb-scale: 0.375;--ueb-grid-actual-size: calc(var(--ueb-grid-size) * 2)}.ueb-zoom--6.ueb{--ueb-scale: 0.333333;--ueb-grid-actual-size: calc(var(--ueb-grid-size) * 3)}.ueb-zoom--7.ueb{--ueb-scale: 0.3;--ueb-grid-actual-size: calc(var(--ueb-grid-size) * 3)}.ueb-zoom--8.ueb{--ueb-scale: 0.266666;--ueb-grid-actual-size: calc(var(--ueb-grid-size) * 3)}.ueb-zoom--9.ueb{--ueb-scale: 0.233333;--ueb-grid-actual-size: calc(var(--ueb-grid-size) * 3)}.ueb-zoom--10.ueb{--ueb-scale: 0.2;--ueb-grid-actual-size: calc(var(--ueb-grid-size) * 3)}.ueb-zoom--11.ueb{--ueb-scale: 0.166666;--ueb-grid-actual-size: calc(var(--ueb-grid-size) * 6)}.ueb-zoom--12.ueb{--ueb-scale: 0.133333;--ueb-grid-actual-size: calc(var(--ueb-grid-size) * 6)}.ueb-grid-content{position:relative;width:0;height:0;transform:translateX(calc(var(--ueb-translate-x) * 1px)) translateY(calc(var(--ueb-translate-y) * 1px))}.ueb-grid-content>div{width:0;height:0}.ueb-positioned,ueb-blueprint[data-selecting=true] ueb-selector{--ueb-computed-min-x: min(var(--ueb-from-x), var(--ueb-to-x));--ueb-computed-max-x: max(var(--ueb-from-x), var(--ueb-to-x));--ueb-computed-min-y: min(var(--ueb-from-y), var(--ueb-to-y));--ueb-computed-max-y: max(var(--ueb-from-y), var(--ueb-to-y));--ueb-computed-width: max(var(--ueb-from-x) - var(--ueb-to-x), var(--ueb-to-x) - var(--ueb-from-x));--ueb-computed-height: max(var(--ueb-from-y) - var(--ueb-to-y), var(--ueb-to-y) - var(--ueb-from-y));position:absolute;top:calc(var(--ueb-computed-min-y)*1px);left:calc(var(--ueb-computed-min-x)*1px);width:calc(var(--ueb-computed-width)*1px);height:calc(var(--ueb-computed-height)*1px)}ueb-selector{display:block;position:absolute;visibility:hidden;top:0;left:0;width:0;height:0;background-image:repeating-linear-gradient(90deg, transparent, transparent calc(1px / var(--ueb-scale)), white calc(2px / var(--ueb-scale)), white calc(7px / var(--ueb-scale)), transparent calc(7px / var(--ueb-scale)), transparent calc(11px / var(--ueb-scale))),repeating-linear-gradient(90deg, black, black calc(8px / var(--ueb-scale)), transparent calc(9px / var(--ueb-scale)), transparent calc(11px / var(--ueb-scale))),repeating-linear-gradient(90deg, transparent, transparent calc(1px / var(--ueb-scale)), white calc(2px / var(--ueb-scale)), white calc(7px / var(--ueb-scale)), transparent calc(7px / var(--ueb-scale)), transparent calc(11px / var(--ueb-scale))),repeating-linear-gradient(90deg, black, black calc(8px / var(--ueb-scale)), transparent calc(9px / var(--ueb-scale)), transparent calc(11px / var(--ueb-scale))),repeating-linear-gradient(180deg, transparent, transparent calc(1px / var(--ueb-scale)), white calc(1px / var(--ueb-scale)), white calc(7px / var(--ueb-scale)), transparent calc(7px / var(--ueb-scale)), transparent calc(11px / var(--ueb-scale))),repeating-linear-gradient(180deg, black, black calc(8px / var(--ueb-scale)), transparent calc(9px / var(--ueb-scale)), transparent calc(11px / var(--ueb-scale))),repeating-linear-gradient(0deg, transparent, transparent calc(1px / var(--ueb-scale)), white calc(2px / var(--ueb-scale)), white calc(7px / var(--ueb-scale)), transparent calc(7px / var(--ueb-scale)), transparent calc(11px / var(--ueb-scale))),repeating-linear-gradient(0deg, black, black calc(8px / var(--ueb-scale)), transparent calc(9px / var(--ueb-scale)), transparent calc(11px / var(--ueb-scale)));background-size:100% calc(1px/var(--ueb-scale)),100% calc(3px/var(--ueb-scale)),100% calc(1px/var(--ueb-scale)),100% calc(3px/var(--ueb-scale)),calc(1px/var(--ueb-scale)) 100%,calc(3px/var(--ueb-scale)) 100%,calc(1px/var(--ueb-scale)) 100%,calc(3px/var(--ueb-scale)) 100%;background-position:0 calc(1px/var(--ueb-scale)),0 0,0 calc(100% - 1px/var(--ueb-scale)),0 100%,calc(1px/var(--ueb-scale)) 0,0 0,calc(100% - 1px/var(--ueb-scale)) 0,100% 0;background-repeat:no-repeat}ueb-blueprint[data-selecting=true] ueb-selector{visibility:visible}ueb-selector>*{visibility:visible}ueb-node{display:block;position:absolute;transform:translateX(calc(var(--ueb-position-x) * 1px)) translateY(calc(var(--ueb-position-y) * 1px));border-radius:var(--ueb-node-radius);box-shadow:0 0 1px 0 #000,1px 4px 6px 0 rgba(0,0,0,.3);font-weight:lighter}ueb-blueprint[data-drag-scrolling=false][data-selecting=false] ueb-node{cursor:move}.ueb-node-border{margin:-3px;padding:3px;border-radius:calc(var(--ueb-node-radius)*1.4)}.ueb-selected>.ueb-node-border{background-image:linear-gradient(to right, #f1b000 0%, #f1b000 100%),linear-gradient(to bottom, #f1b000 0%, #cc6700 100%),linear-gradient(to right, #cc6700 0%, #cc6700 100%),linear-gradient(to bottom, #f1b000 0%, #cc6700 100%);background-size:100% 7px,7px 100%,100% 7px,7px 100%;background-position:top,right,bottom,left;background-repeat:repeat-x,repeat-y,repeat-x,repeat-y;outline:3px solid #cc6700;outline-offset:-6px}.ueb-node-wrapper{position:relative;padding:1px;box-shadow:inset 0 0 2px 0 #000;border-radius:var(--ueb-node-radius);background:rgba(10,10,10,.8);overflow:hidden}.ueb-node-top{padding:.3em .7em;box-shadow:inset 5px 1px 5px -3px #83b37b,inset 0 1px 0 0 #111311,inset 0 2px 0 0 #83b37b;border-radius:var(--ueb-node-radius) var(--ueb-node-radius) 0 0;background:linear-gradient(170deg, #5f815a 0%, #5f815a 50%, transparent 100%);color:silver;font-weight:900;white-space:nowrap}.ueb-node-name{background:radial-gradient(ellipse 100% 100% at 30% 50%, rgba(0, 0, 0, 0.45) 20%, transparent 50%);margin:-0.1em -1.6em;padding:.1em 1.6em}.ueb-node-content{display:flex;padding:1px 0;font-weight:100;white-space:nowrap}.ueb-node-inputs{margin-right:20px;padding-left:8px}.ueb-node-outputs{margin-left:auto;padding-right:8px}.ueb-node-developmentonly{display:none;margin-top:8px;background:repeating-linear-gradient(-45deg, transparent 0, #57590a 1px, #57590a 11px, transparent 12px, transparent 24px);background:repeating-linear-gradient(-45deg, transparent 0, #57590a 1px, #57590a 11px, transparent 12px, transparent 24px);text-align:center;padding:2px;letter-spacing:.06em;text-shadow:1px 1px 1px #000}ueb-node[data-enabled-state=DevelopmentOnly] .ueb-node-developmentonly{display:block}.ueb-node-expansion{display:none;text-align:center}.ueb-node-expansion-icon{vertical-align:middle}ueb-blueprint[data-drag-scrolling=false][data-selecting=false] .ueb-node-expansion:hover{background-color:#656765;cursor:pointer}ueb-node[data-advanced-display] .ueb-node-expansion{display:block}ueb-node[data-advanced-display=Shown] .ueb-node-expansion-icon{transform:scaleY(-1)}ueb-pin{display:block}ueb-node[data-advanced-display=Hidden] ueb-pin[data-advanced-view=true]{display:none}.ueb-pin-wrapper{display:inline-block;margin:6px 0 0 0;padding:2px 2px}.ueb-pin-wrapper>*{display:inline-block;vertical-align:middle}ueb-blueprint[data-drag-scrolling=false][data-selecting=false] .ueb-pin-wrapper:hover{background:var(--ueb-pin-background);cursor:crosshair}.ueb-node-outputs ueb-pin{text-align:right}.ueb-pin-icon-exec{display:inline-block;vertical-align:text-top}.ueb-pin-icon-value{display:inline-block;position:relative;width:12px;height:12px;vertical-align:baseline;margin:0 .5em -1px .1em}.ueb-pin-icon-value::before{content:"";display:block;position:absolute;top:0;right:0;bottom:0;left:0;border:2px solid var(--ueb-pin-color);border-radius:50%}ueb-pin.ueb-pin-fill .ueb-pin-icon-value::before{background:var(--ueb-pin-color)}ueb-pin.ueb-pin-fill .ueb-pin-tofill{fill:currentColor}.ueb-pin-icon-value::after{content:"";display:block;position:absolute;top:3px;left:13px;width:0;height:0;border-top:.3em solid rgba(0,0,0,0);border-bottom:.3em solid rgba(0,0,0,0);border-left:.3em solid var(--ueb-pin-color)}.ueb-pin-name{display:inline-block;vertical-align:middle}.ueb-pin-exec .ueb-pin-name{display:none}.ueb-pin-input{display:inline-block;vertical-align:middle;margin-left:3px;border:1px solid #a0a0a0;border-radius:3px;padding:0 3px 0 3px;color:silver}.ueb-pin-input:hover,.ueb-pin-input:active,.ueb-pin-input:focus,.ueb-pin-input:focus-within{background:rgba(255,255,255,.2745098039);outline:none}.ueb-pin-type-bool .ueb-pin-input{appearance:none;padding:0;height:18px;width:18px;background-color:#0f0f0f;color:var(--ueb-pin-color)}.ueb-pin-type-bool .ueb-pin-input:checked{background-image:url('data:image/svg+xml,')}.ueb-pin-input-content{display:block;outline:none;border:none;padding:0;min-width:10px;max-width:400px;max-height:16em;background:none;color:inherit;cursor:text;overflow:auto}.ueb-pin-input-content::-webkit-scrollbar{width:10px;height:10px}.ueb-pin-input-content::-webkit-scrollbar-thumb{background:#575757;border-radius:10px;margin:4px}ueb-link{--ueb-from-input-coefficient: calc(2 * var(--ueb-from-input) - 1);--ueb-y-opposite: clamp(0, var(--ueb-from-y) - var(--ueb-to-y) - 1, 1);display:block;min-width:calc(var(--ueb-link-min-width)*1px);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-pin-color);stroke-width:1}ueb-link.ueb-link-dragging svg path,ueb-link svg g:hover path{stroke-width:5;transition:stroke-width .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{--ueb-pin-color: white;--ueb-pin-dim-color: #afafaf}.ueb-pin-type-bool{--ueb-pin-color: #750000;--ueb-pin-background: linear-gradient(90deg, rgba(117, 0, 0, 0.15), rgba(117, 0, 0, 0.8) 15%, rgba(117, 0, 0, 0.5) 60%, rgba(117, 0, 0, 0.35) 95%, transparent)}.ueb-pin-type-class{--ueb-pin-color: #5800bb;--ueb-pin-background: linear-gradient(90deg, rgba(88, 0, 187, 0.15), rgba(88, 0, 187, 0.8) 15%, rgba(88, 0, 187, 0.5) 60%, rgba(88, 0, 187, 0.35) 95%, transparent)}.ueb-pin-type-exec{--ueb-pin-color: #a7a7a7;--ueb-pin-background: linear-gradient(90deg, rgba(167, 167, 167, 0.15), rgba(167, 167, 167, 0.8) 15%, rgba(167, 167, 167, 0.5) 60%, rgba(167, 167, 167, 0.35) 95%, transparent)}.ueb-pin-type-int{--ueb-pin-color: #1fe0ad;--ueb-pin-background: linear-gradient(90deg, rgba(31, 224, 173, 0.15), rgba(31, 224, 173, 0.8) 15%, rgba(31, 224, 173, 0.5) 60%, rgba(31, 224, 173, 0.35) 95%, transparent)}.ueb-pin-type-name{--ueb-pin-color: #cb81fc;--ueb-pin-background: linear-gradient(90deg, rgba(203, 129, 252, 0.15), rgba(203, 129, 252, 0.8) 15%, rgba(203, 129, 252, 0.5) 60%, rgba(203, 129, 252, 0.35) 95%, transparent)}.ueb-pin-type-object{--ueb-pin-color: #00a8f2;--ueb-pin-background: linear-gradient(90deg, rgba(0, 168, 242, 0.15), rgba(0, 168, 242, 0.8) 15%, rgba(0, 168, 242, 0.5) 60%, rgba(0, 168, 242, 0.35) 95%, transparent)}.ueb-pin-type-real{--ueb-pin-color: #32bb00;--ueb-pin-background: linear-gradient(90deg, rgba(50, 187, 0, 0.15), rgba(50, 187, 0, 0.8) 15%, rgba(50, 187, 0, 0.5) 60%, rgba(50, 187, 0, 0.35) 95%, transparent)}.ueb-pin-type-rotator{--ueb-pin-color: #9eb1fc;--ueb-pin-background: linear-gradient(90deg, rgba(158, 177, 252, 0.15), rgba(158, 177, 252, 0.8) 15%, rgba(158, 177, 252, 0.5) 60%, rgba(158, 177, 252, 0.35) 95%, transparent)}.ueb-pin-type-string{--ueb-pin-color: #d500b1;--ueb-pin-background: linear-gradient(90deg, rgba(213, 0, 177, 0.15), rgba(213, 0, 177, 0.8) 15%, rgba(213, 0, 177, 0.5) 60%, rgba(213, 0, 177, 0.35) 95%, transparent)}.ueb-pin-type-struct{--ueb-pin-color: #034ca8;--ueb-pin-background: linear-gradient(90deg, rgba(3, 76, 168, 0.15), rgba(3, 76, 168, 0.8) 15%, rgba(3, 76, 168, 0.5) 60%, rgba(3, 76, 168, 0.35) 95%, transparent)}.ueb-pin-type-vector{--ueb-pin-color: #fcc823;--ueb-pin-background: linear-gradient(90deg, rgba(252, 200, 35, 0.15), rgba(252, 200, 35, 0.8) 15%, rgba(252, 200, 35, 0.5) 60%, rgba(252, 200, 35, 0.35) 95%, transparent)}/*# sourceMappingURL=ueb-style.min.css.map */ +@font-face{font-family:"Roboto";font-style:light;src:url("../font/roboto-light.woff2") format("woff2"),url("../font/roboto-light.woff") format("woff")}@font-face{font-family:"Roboto";font-style:regular;src:url("../font/roboto-regular.woff2") format("woff2"),url("../font/roboto-regular.woff") format("woff")}ueb-blueprint{--ueb-scale: 1;--ueb-grid-actual-size: var(--ueb-grid-size);display:block;position:relative;font-family:Roboto,Noto,Oxygen,Ubuntu,"Open Sans","Helvetica Neue",sans-serif;font-size:var(--ueb-font-size);color:#fff;user-select:none}ueb-blueprint svg{overflow:visible}.ueb-viewport-header{display:flex;position:absolute;top:0;right:0;left:0;height:1.5em;background:rgba(0,0,0,.5);z-index:1}.ueb-viewport-zoom{margin-left:auto;color:rgba(77,77,77,.7176470588);font-size:20px}.ueb-viewport-body{position:relative;height:var(--ueb-height, 30rem);overflow:hidden;scrollbar-width:0}ueb-blueprint[data-focused=true] .ueb-viewport-body{overflow:scroll}.ueb-grid{--ueb-grid-line-actual-width: calc(var(--ueb-grid-line-width) / var(--ueb-scale));position:absolute;min-width:100%;min-height:100%;width:calc((100% + 2*var(--ueb-grid-expand))/var(--ueb-scale));height:calc((100% + 2*var(--ueb-grid-expand))/var(--ueb-scale));background-color:#262626;background-image:linear-gradient(var(--ueb-grid-axis-line-color), var(--ueb-grid-axis-line-color)),linear-gradient(var(--ueb-grid-axis-line-color), var(--ueb-grid-axis-line-color)),linear-gradient(to right, var(--ueb-grid-set-line-color), var(--ueb-grid-set-line-color) var(--ueb-grid-line-actual-width), transparent var(--ueb-grid-line-actual-width), transparent),linear-gradient(to bottom, var(--ueb-grid-set-line-color), var(--ueb-grid-set-line-color) var(--ueb-grid-line-actual-width), transparent var(--ueb-grid-line-actual-width), transparent),linear-gradient(to right, var(--ueb-grid-line-color), var(--ueb-grid-line-color) var(--ueb-grid-line-actual-width), transparent var(--ueb-grid-line-actual-width), transparent),linear-gradient(to bottom, var(--ueb-grid-line-color), var(--ueb-grid-line-color) var(--ueb-grid-line-actual-width), transparent var(--ueb-grid-line-actual-width), transparent);background-size:100% var(--ueb-grid-line-actual-width),var(--ueb-grid-line-actual-width) 100%,calc(var(--ueb-grid-set)*var(--ueb-grid-actual-size)) calc(var(--ueb-grid-set)*var(--ueb-grid-actual-size)),calc(var(--ueb-grid-set)*var(--ueb-grid-actual-size)) calc(var(--ueb-grid-set)*var(--ueb-grid-actual-size)),var(--ueb-grid-actual-size) var(--ueb-grid-actual-size),var(--ueb-grid-actual-size) var(--ueb-grid-actual-size);background-position:calc(var(--ueb-translate-x)*1px) calc(var(--ueb-translate-y)*1px);background-repeat:repeat-x,repeat-y,repeat,repeat,repeat,repeat;transform:scale(var(--ueb-scale), var(--ueb-scale));transform-origin:0 0;overflow:hidden}ueb-blueprint[data-scrolling=true] .ueb-grid{cursor:grabbing}ueb-blueprint[data-scrolling=false] .ueb-grid{cursor:default}ueb-blueprint[data-zoom="7"]{--ueb-scale: 2}ueb-blueprint[data-zoom="6"]{--ueb-scale: 1.875}ueb-blueprint[data-zoom="5"]{--ueb-scale: 1.75}ueb-blueprint[data-zoom="4"]{--ueb-scale: 1.675}ueb-blueprint[data-zoom="3"]{--ueb-scale: 1.5}ueb-blueprint[data-zoom="2"]{--ueb-scale: 1.375}ueb-blueprint[data-zoom="1"]{--ueb-scale: 1.25}ueb-blueprint[data-zoom="-1"]{--ueb-scale: 0.875}ueb-blueprint[data-zoom="-2"]{--ueb-scale: 0.75}ueb-blueprint[data-zoom="-3"]{--ueb-scale: 0.675}ueb-blueprint[data-zoom="-4"]{--ueb-scale: 0.5;--ueb-grid-actual-size: calc(var(--ueb-grid-size) * 2)}ueb-blueprint[data-zoom="-5"]{--ueb-scale: 0.375;--ueb-grid-actual-size: calc(var(--ueb-grid-size) * 2)}ueb-blueprint[data-zoom="-6"]{--ueb-scale: 0.333333;--ueb-grid-actual-size: calc(var(--ueb-grid-size) * 3)}ueb-blueprint[data-zoom="-7"]{--ueb-scale: 0.3;--ueb-grid-actual-size: calc(var(--ueb-grid-size) * 3)}ueb-blueprint[data-zoom="-8"]{--ueb-scale: 0.266666;--ueb-grid-actual-size: calc(var(--ueb-grid-size) * 3)}ueb-blueprint[data-zoom="-9"]{--ueb-scale: 0.233333;--ueb-grid-actual-size: calc(var(--ueb-grid-size) * 3)}ueb-blueprint[data-zoom="-10"]{--ueb-scale: 0.2;--ueb-grid-actual-size: calc(var(--ueb-grid-size) * 3)}ueb-blueprint[data-zoom="-11"]{--ueb-scale: 0.166666;--ueb-grid-actual-size: calc(var(--ueb-grid-size) * 6)}ueb-blueprint[data-zoom="-12"]{--ueb-scale: 0.133333;--ueb-grid-actual-size: calc(var(--ueb-grid-size) * 6)}.ueb-grid-content{position:relative;width:0;height:0;transform:translateX(calc(var(--ueb-translate-x) * 1px)) translateY(calc(var(--ueb-translate-y) * 1px))}.ueb-grid-content>div{width:0;height:0}.ueb-positioned,ueb-link,ueb-blueprint[data-selecting=true] ueb-selector{--ueb-computed-min-x: min(var(--ueb-from-x), var(--ueb-to-x));--ueb-computed-max-x: max(var(--ueb-from-x), var(--ueb-to-x));--ueb-computed-min-y: min(var(--ueb-from-y), var(--ueb-to-y));--ueb-computed-max-y: max(var(--ueb-from-y), var(--ueb-to-y));--ueb-computed-width: max(var(--ueb-from-x) - var(--ueb-to-x), var(--ueb-to-x) - var(--ueb-from-x));--ueb-computed-height: max(var(--ueb-from-y) - var(--ueb-to-y), var(--ueb-to-y) - var(--ueb-from-y));position:absolute;top:calc(var(--ueb-computed-min-y)*1px);left:calc(var(--ueb-computed-min-x)*1px);width:calc(var(--ueb-computed-width)*1px);height:calc(var(--ueb-computed-height)*1px)}ueb-selector{display:block;position:absolute;visibility:hidden;top:0;left:0;width:0;height:0;background-image:repeating-linear-gradient(90deg, transparent, transparent calc(1px / var(--ueb-scale)), white calc(2px / var(--ueb-scale)), white calc(7px / var(--ueb-scale)), transparent calc(7px / var(--ueb-scale)), transparent calc(11px / var(--ueb-scale))),repeating-linear-gradient(90deg, black, black calc(8px / var(--ueb-scale)), transparent calc(9px / var(--ueb-scale)), transparent calc(11px / var(--ueb-scale))),repeating-linear-gradient(90deg, transparent, transparent calc(1px / var(--ueb-scale)), white calc(2px / var(--ueb-scale)), white calc(7px / var(--ueb-scale)), transparent calc(7px / var(--ueb-scale)), transparent calc(11px / var(--ueb-scale))),repeating-linear-gradient(90deg, black, black calc(8px / var(--ueb-scale)), transparent calc(9px / var(--ueb-scale)), transparent calc(11px / var(--ueb-scale))),repeating-linear-gradient(180deg, transparent, transparent calc(1px / var(--ueb-scale)), white calc(1px / var(--ueb-scale)), white calc(7px / var(--ueb-scale)), transparent calc(7px / var(--ueb-scale)), transparent calc(11px / var(--ueb-scale))),repeating-linear-gradient(180deg, black, black calc(8px / var(--ueb-scale)), transparent calc(9px / var(--ueb-scale)), transparent calc(11px / var(--ueb-scale))),repeating-linear-gradient(0deg, transparent, transparent calc(1px / var(--ueb-scale)), white calc(2px / var(--ueb-scale)), white calc(7px / var(--ueb-scale)), transparent calc(7px / var(--ueb-scale)), transparent calc(11px / var(--ueb-scale))),repeating-linear-gradient(0deg, black, black calc(8px / var(--ueb-scale)), transparent calc(9px / var(--ueb-scale)), transparent calc(11px / var(--ueb-scale)));background-size:100% calc(1px/var(--ueb-scale)),100% calc(3px/var(--ueb-scale)),100% calc(1px/var(--ueb-scale)),100% calc(3px/var(--ueb-scale)),calc(1px/var(--ueb-scale)) 100%,calc(3px/var(--ueb-scale)) 100%,calc(1px/var(--ueb-scale)) 100%,calc(3px/var(--ueb-scale)) 100%;background-position:0 calc(1px/var(--ueb-scale)),0 0,0 calc(100% - 1px/var(--ueb-scale)),0 100%,calc(1px/var(--ueb-scale)) 0,0 0,calc(100% - 1px/var(--ueb-scale)) 0,100% 0;background-repeat:no-repeat}ueb-blueprint[data-selecting=true] ueb-selector{visibility:visible}ueb-selector>*{visibility:visible}ueb-node{display:block;position:absolute;transform:translateX(calc(var(--ueb-position-x) * 1px)) translateY(calc(var(--ueb-position-y) * 1px));border-radius:var(--ueb-node-radius);box-shadow:0 0 1px 0 #000,1px 4px 6px 0 rgba(0,0,0,.3);font-weight:lighter}ueb-blueprint[data-scrolling=false][data-selecting=false] ueb-node{cursor:move}.ueb-node-border{margin:-3px;padding:3px;border-radius:calc(var(--ueb-node-radius)*1.4)}ueb-node[data-selected=true]>.ueb-node-border{background-image:linear-gradient(to right, #f1b000 0%, #f1b000 100%),linear-gradient(to bottom, #f1b000 0%, #cc6700 100%),linear-gradient(to right, #cc6700 0%, #cc6700 100%),linear-gradient(to bottom, #f1b000 0%, #cc6700 100%);background-size:100% 7px,7px 100%,100% 7px,7px 100%;background-position:top,right,bottom,left;background-repeat:repeat-x,repeat-y,repeat-x,repeat-y;outline:3px solid #cc6700;outline-offset:-6px}.ueb-node-wrapper{position:relative;padding:1px;box-shadow:inset 0 0 2px 0 #000;border-radius:var(--ueb-node-radius);background:rgba(10,10,10,.8);overflow:hidden}.ueb-node-top{padding:.3em .7em;box-shadow:inset 5px 1px 5px -3px #83b37b,inset 0 1px 0 0 #111311,inset 0 2px 0 0 #83b37b;border-radius:var(--ueb-node-radius) var(--ueb-node-radius) 0 0;background:linear-gradient(170deg, #5f815a 0%, #5f815a 50%, transparent 100%);color:silver;font-weight:900;white-space:nowrap}.ueb-node-name{background:radial-gradient(ellipse 100% 100% at 30% 50%, rgba(0, 0, 0, 0.45) 20%, transparent 50%);margin:-0.1em -1.6em;padding:.1em 1.6em}.ueb-node-content{display:flex;padding:1px 0;font-weight:100;white-space:nowrap}.ueb-node-inputs{margin-right:20px;padding-left:8px}.ueb-node-outputs{margin-left:auto;padding-right:8px}.ueb-node-developmentonly{display:none;margin-top:8px;background:repeating-linear-gradient(-45deg, transparent 0, #57590a 1px, #57590a 11px, transparent 12px, transparent 24px);background:repeating-linear-gradient(-45deg, transparent 0, #57590a 1px, #57590a 11px, transparent 12px, transparent 24px);text-align:center;padding:2px;letter-spacing:.06em;text-shadow:1px 1px 1px #000}ueb-node[data-enabled-state=DevelopmentOnly] .ueb-node-developmentonly{display:block}.ueb-node-expansion{display:none;text-align:center}.ueb-node-expansion-icon{vertical-align:middle}ueb-blueprint[data-scrolling=false][data-selecting=false] .ueb-node-expansion:hover{background-color:#656765;cursor:pointer}ueb-node[data-advanced-display] .ueb-node-expansion{display:block}ueb-node[data-advanced-display=Shown] .ueb-node-expansion-icon{transform:scaleY(-1)}ueb-pin{display:block}ueb-node[data-advanced-display=Hidden] ueb-pin[data-advanced-view=true]{display:none}.ueb-pin-wrapper{display:inline-block;margin:6px 0 0 0;padding:2px 2px}.ueb-pin-wrapper>*{display:inline-block;vertical-align:middle}ueb-blueprint[data-scrolling=false][data-selecting=false] .ueb-pin-wrapper:hover{background:var(--ueb-pin-background);cursor:crosshair}.ueb-node-outputs ueb-pin{text-align:right}.ueb-pin-icon-exec{display:inline-block;vertical-align:text-top}.ueb-pin-icon-value{display:inline-block;position:relative;width:12px;height:12px;vertical-align:baseline;margin:0 .5em -1px .1em}.ueb-pin-icon-value::before{content:"";display:block;position:absolute;top:0;right:0;bottom:0;left:0;border:2px solid var(--ueb-pin-color);border-radius:50%}ueb-pin[data-linked=true] .ueb-pin-icon-value::before{background:var(--ueb-pin-color)}ueb-pin[data-linked=true] .ueb-pin-tofill{fill:currentColor}.ueb-pin-icon-value::after{content:"";display:block;position:absolute;top:3px;left:13px;width:0;height:0;border-top:.3em solid rgba(0,0,0,0);border-bottom:.3em solid rgba(0,0,0,0);border-left:.3em solid var(--ueb-pin-color)}.ueb-pin-name{display:inline-block;vertical-align:middle}ueb-pin[data-type=exec] .ueb-pin-name{display:none}.ueb-pin-input{display:inline-block;vertical-align:middle;margin-left:3px;border:1px solid #a0a0a0;border-radius:3px;padding:0 3px 0 3px;color:silver}.ueb-pin-input:hover,.ueb-pin-input:active,.ueb-pin-input:focus,.ueb-pin-input:focus-within{background:rgba(255,255,255,.2745098039);outline:none}ueb-pin[data-type=bool] .ueb-pin-input{appearance:none;padding:0;height:18px;width:18px;background-color:#0f0f0f;color:var(--ueb-pin-color)}ueb-pin[data-type=bool] .ueb-pin-input:checked{background-image:url('data:image/svg+xml,')}.ueb-pin-input-content{display:block;outline:none;border:none;padding:0;min-width:10px;max-width:400px;max-height:16em;background:none;color:inherit;cursor:text;overflow:auto}.ueb-pin-input-content::-webkit-scrollbar{width:10px;height:10px}.ueb-pin-input-content::-webkit-scrollbar-thumb{background:#575757;border-radius:10px;margin:4px}ueb-link{--ueb-from-input-coefficient: calc(2 * var(--ueb-from-input) - 1);--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);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 .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-dim-color: #afafaf}ueb-link{--ueb-link-color: rgb(var(--ueb-link-color-rgb))}ueb-pin{--ueb-pin-background: linear-gradient(90deg, rgba(var(--ueb-pin-color-rgb), 0.15), rgba(var(--ueb-pin-color-rgb), 0.8) 15%, rgba(var(--ueb-pin-color-rgb), 0.5) 60%, rgba(var(--ueb-pin-color-rgb), 0.35) 95%, transparent);--ueb-pin-color: rgb(var(--ueb-pin-color-rgb))}ueb-pin[data-type=bool]{--ueb-pin-color-rgb: var(--ueb-pin-bool-color)}ueb-pin[data-type=class]{--ueb-pin-color-rgb: var(--ueb-pin-class-color)}ueb-pin[data-type=exec]{--ueb-pin-color-rgb: var(--ueb-pin-exec-color)}ueb-pin[data-type=int]{--ueb-pin-color-rgb: var(--ueb-pin-int-color)}ueb-pin[data-type=name]{--ueb-pin-color-rgb: var(--ueb-pin-name-color)}ueb-pin[data-type=object]{--ueb-pin-color-rgb: var(--ueb-pin-object-color)}ueb-pin[data-type=real]{--ueb-pin-color-rgb: var(--ueb-pin-real-color)}ueb-pin[data-type=rotator]{--ueb-pin-color-rgb: var(--ueb-pin-rotator-color)}ueb-pin[data-type=string]{--ueb-pin-color-rgb: var(--ueb-pin-string-color)}ueb-pin[data-type=struct]{--ueb-pin-color-rgb: var(--ueb-pin-struct-color)}ueb-pin[data-type=vector]{--ueb-pin-color-rgb: var(--ueb-pin-vector-color)}/*# sourceMappingURL=ueb-style.min.css.map */ diff --git a/dist/css/ueb-style.min.css.map b/dist/css/ueb-style.min.css.map index aa69861..80fcbaf 100644 --- a/dist/css/ueb-style.min.css.map +++ b/dist/css/ueb-style.min.css.map @@ -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,iBACA,IACI,kGAIR,WACI,qBACA,mBACA,IACI,sGAIR,cACI,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,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,sBACI,QACA,SAGJ,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,mBCvUJ,SACI,cACA,kBACA,sGACA,qCACA,uDACA,oBAGJ,wEACI,YAGJ,iBACI,YACA,YACA,+CAGJ,+BACI,iBACI,kNAIJ,oDACA,0CACA,sDACA,0BACA,oBAGJ,kBACI,kBACA,YACA,gCACA,qCACA,6BACA,gBAGJ,cACI,kBACA,0FAGA,gEACA,8EACA,aACA,gBACA,mBAGJ,eACI,mGACA,qBACA,mBAGJ,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,yFACI,yBACA,eAGJ,oDACI,cAGJ,+DACI,qBCxHJ,QACI,cAGJ,wEACI,aAGJ,iBACI,qBACA,iBACA,gBAEA,mBACI,qBACA,sBAIR,sFACI,qCACA,iBAGJ,0BACI,iBAGJ,mBACI,qBACA,wBAGJ,oBACI,qBACA,kBACA,WACA,YACA,wBACA,wBAGJ,4BACI,WACA,cACA,kBACA,MACA,QACA,SACA,OACA,sCACA,kBAGJ,iDACI,gCAGJ,qCACI,kBAGJ,2BACI,WACA,cACA,kBACA,QACA,UACA,QACA,SACA,oCACA,uCACA,4CAGJ,cACI,qBACA,sBAGJ,4BACI,aAGJ,eACI,qBACA,sBACA,gBACA,yBACA,kBACA,oBACA,aAEA,4FAII,yCACA,aAIR,kCACI,gBACA,UACA,YACA,WACA,yBACA,2BAGJ,0CACI,6OAGJ,uBACI,cACA,aACA,YACA,UACA,eACA,gBACA,gBACA,gBACA,cACA,YACA,cAEA,0CACI,WACA,YAGJ,gDACI,mBACA,mBACA,WCxIR,SACI,kEAEA,uEACA,cACA,8CAKA,kBAGJ,aACI,iEACA,kBACA,MACA,OACA,WACA,YACA,eACA,8FAGJ,kBACI,mBACA,4BACA,eAGJ,8DAEI,eACA,4BAGJ,iBACI,cACA,mBACA,kBACA,kDACA,qHAOA,sBACA,gBACA,kBACA,4EACA,+BACA,mBACA,gBC5CJ,KAGI,uBACA,6BAGJ,mBAhBI,yBACA,gKAmBJ,oBApBI,yBACA,oKAuBJ,mBAxBI,yBACA,gLA2BJ,kBA5BI,yBACA,4KA+BJ,mBAhCI,yBACA,gLAmCJ,qBApCI,yBACA,wKAuCJ,mBAxCI,yBACA,oKA2CJ,sBA5CI,yBACA,gLA+CJ,qBAhDI,yBACA,wKAmDJ,qBApDI,yBACA,oKAuDJ,qBAxDI,yBACA","file":"ueb-style.min.css"} \ No newline at end of file +{"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,iBACA,IACI,kGAIR,WACI,qBACA,mBACA,IACI,sGAIR,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,mBCnUJ,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,eACI,mGACA,qBACA,mBAGJ,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,qBCzHJ,QACI,cAGJ,wEACI,aAGJ,iBACI,qBACA,iBACA,gBAEA,mBACI,qBACA,sBAIR,iFACI,qCACA,iBAGJ,0BACI,iBAGJ,mBACI,qBACA,wBAGJ,oBACI,qBACA,kBACA,WACA,YACA,wBACA,wBAGJ,4BACI,WACA,cACA,kBACA,MACA,QACA,SACA,OACA,sCACA,kBAGJ,sDACI,gCAGJ,0CACI,kBAGJ,2BACI,WACA,cACA,kBACA,QACA,UACA,QACA,SACA,oCACA,uCACA,4CAGJ,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,uBACI,cACA,aACA,YACA,UACA,eACA,gBACA,gBACA,gBACA,cACA,YACA,cAEA,0CACI,WACA,YAGJ,gDACI,mBACA,mBACA,WCtIR,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,0BACI,iDAGJ,0BACI","file":"ueb-style.min.css"} \ No newline at end of file diff --git a/dist/ueblueprint.js b/dist/ueblueprint.js index aab2f25..089bf00 100755 --- a/dist/ueblueprint.js +++ b/dist/ueblueprint.js @@ -1,5 +1,29 @@ -// @ts-check - +/** + * @license + * Copyright 2019 Google LLC + * SPDX-License-Identifier: BSD-3-Clause + */ +const t$1=window.ShadowRoot&&(void 0===window.ShadyCSS||window.ShadyCSS.nativeShadow)&&"adoptedStyleSheets"in Document.prototype&&"replace"in CSSStyleSheet.prototype,e$2=Symbol(),n$3=new WeakMap;class s$3{constructor(t,n,s){if(this._$cssResult$=!0,s!==e$2)throw Error("CSSResult is not constructable. Use `unsafeCSS` or `css` instead.");this.cssText=t,this.t=n;}get styleSheet(){let e=this.o;const s=this.t;if(t$1&&void 0===e){const t=void 0!==s&&1===s.length;t&&(e=n$3.get(s)),void 0===e&&((this.o=e=new CSSStyleSheet).replaceSync(this.cssText),t&&n$3.set(s,e));}return e}toString(){return this.cssText}}const o$3=t=>new s$3("string"==typeof t?t:t+"",void 0,e$2),r$2=(t,...n)=>{const o=1===t.length?t[0]:n.reduce(((e,n,s)=>e+(t=>{if(!0===t._$cssResult$)return t.cssText;if("number"==typeof t)return t;throw Error("Value passed to 'css' function must be a 'css' function result: "+t+". Use 'unsafeCSS' to pass non-literal values, but take care to ensure page security.")})(n)+t[s+1]),t[0]);return new s$3(o,t,e$2)},i$1=(e,n)=>{t$1?e.adoptedStyleSheets=n.map((t=>t instanceof CSSStyleSheet?t:t.styleSheet)):n.forEach((t=>{const n=document.createElement("style"),s=window.litNonce;void 0!==s&&n.setAttribute("nonce",s),n.textContent=t.cssText,e.appendChild(n);}));},S$1=t$1?t=>t:t=>t instanceof CSSStyleSheet?(t=>{let e="";for(const n of t.cssRules)e+=n.cssText;return o$3(e)})(t):t; + +/** + * @license + * Copyright 2017 Google LLC + * SPDX-License-Identifier: BSD-3-Clause + */var s$2;const e$1=window.trustedTypes,r$1=e$1?e$1.emptyScript:"",h$1=window.reactiveElementPolyfillSupport,o$2={toAttribute(t,i){switch(i){case Boolean:t=t?r$1:null;break;case Object:case Array:t=null==t?t:JSON.stringify(t);}return t},fromAttribute(t,i){let s=t;switch(i){case Boolean:s=null!==t;break;case Number:s=null===t?null:Number(t);break;case Object:case Array:try{s=JSON.parse(t);}catch(t){s=null;}}return s}},n$2=(t,i)=>i!==t&&(i==i||t==t),l$2={attribute:!0,type:String,converter:o$2,reflect:!1,hasChanged:n$2};class a$1 extends HTMLElement{constructor(){super(),this._$Ei=new Map,this.isUpdatePending=!1,this.hasUpdated=!1,this._$El=null,this.u();}static addInitializer(t){var i;null!==(i=this.h)&&void 0!==i||(this.h=[]),this.h.push(t);}static get observedAttributes(){this.finalize();const t=[];return this.elementProperties.forEach(((i,s)=>{const e=this._$Ep(s,i);void 0!==e&&(this._$Ev.set(e,s),t.push(e));})),t}static createProperty(t,i=l$2){if(i.state&&(i.attribute=!1),this.finalize(),this.elementProperties.set(t,i),!i.noAccessor&&!this.prototype.hasOwnProperty(t)){const s="symbol"==typeof t?Symbol():"__"+t,e=this.getPropertyDescriptor(t,s,i);void 0!==e&&Object.defineProperty(this.prototype,t,e);}}static getPropertyDescriptor(t,i,s){return {get(){return this[i]},set(e){const r=this[t];this[i]=e,this.requestUpdate(t,r,s);},configurable:!0,enumerable:!0}}static getPropertyOptions(t){return this.elementProperties.get(t)||l$2}static finalize(){if(this.hasOwnProperty("finalized"))return !1;this.finalized=!0;const t=Object.getPrototypeOf(this);if(t.finalize(),this.elementProperties=new Map(t.elementProperties),this._$Ev=new Map,this.hasOwnProperty("properties")){const t=this.properties,i=[...Object.getOwnPropertyNames(t),...Object.getOwnPropertySymbols(t)];for(const s of i)this.createProperty(s,t[s]);}return this.elementStyles=this.finalizeStyles(this.styles),!0}static finalizeStyles(i){const s=[];if(Array.isArray(i)){const e=new Set(i.flat(1/0).reverse());for(const i of e)s.unshift(S$1(i));}else void 0!==i&&s.push(S$1(i));return s}static _$Ep(t,i){const s=i.attribute;return !1===s?void 0:"string"==typeof s?s:"string"==typeof t?t.toLowerCase():void 0}u(){var t;this._$E_=new Promise((t=>this.enableUpdating=t)),this._$AL=new Map,this._$Eg(),this.requestUpdate(),null===(t=this.constructor.h)||void 0===t||t.forEach((t=>t(this)));}addController(t){var i,s;(null!==(i=this._$ES)&&void 0!==i?i:this._$ES=[]).push(t),void 0!==this.renderRoot&&this.isConnected&&(null===(s=t.hostConnected)||void 0===s||s.call(t));}removeController(t){var i;null===(i=this._$ES)||void 0===i||i.splice(this._$ES.indexOf(t)>>>0,1);}_$Eg(){this.constructor.elementProperties.forEach(((t,i)=>{this.hasOwnProperty(i)&&(this._$Ei.set(i,this[i]),delete this[i]);}));}createRenderRoot(){var t;const s=null!==(t=this.shadowRoot)&&void 0!==t?t:this.attachShadow(this.constructor.shadowRootOptions);return i$1(s,this.constructor.elementStyles),s}connectedCallback(){var t;void 0===this.renderRoot&&(this.renderRoot=this.createRenderRoot()),this.enableUpdating(!0),null===(t=this._$ES)||void 0===t||t.forEach((t=>{var i;return null===(i=t.hostConnected)||void 0===i?void 0:i.call(t)}));}enableUpdating(t){}disconnectedCallback(){var t;null===(t=this._$ES)||void 0===t||t.forEach((t=>{var i;return null===(i=t.hostDisconnected)||void 0===i?void 0:i.call(t)}));}attributeChangedCallback(t,i,s){this._$AK(t,s);}_$EO(t,i,s=l$2){var e,r;const h=this.constructor._$Ep(t,s);if(void 0!==h&&!0===s.reflect){const n=(null!==(r=null===(e=s.converter)||void 0===e?void 0:e.toAttribute)&&void 0!==r?r:o$2.toAttribute)(i,s.type);this._$El=t,null==n?this.removeAttribute(h):this.setAttribute(h,n),this._$El=null;}}_$AK(t,i){var s,e;const r=this.constructor,h=r._$Ev.get(t);if(void 0!==h&&this._$El!==h){const t=r.getPropertyOptions(h),n=t.converter,l=null!==(e=null!==(s=null==n?void 0:n.fromAttribute)&&void 0!==s?s:"function"==typeof n?n:null)&&void 0!==e?e:o$2.fromAttribute;this._$El=h,this[h]=l(i,t.type),this._$El=null;}}requestUpdate(t,i,s){let e=!0;void 0!==t&&(((s=s||this.constructor.getPropertyOptions(t)).hasChanged||n$2)(this[t],i)?(this._$AL.has(t)||this._$AL.set(t,i),!0===s.reflect&&this._$El!==t&&(void 0===this._$EC&&(this._$EC=new Map),this._$EC.set(t,s))):e=!1),!this.isUpdatePending&&e&&(this._$E_=this._$Ej());}async _$Ej(){this.isUpdatePending=!0;try{await this._$E_;}catch(t){Promise.reject(t);}const t=this.scheduleUpdate();return null!=t&&await t,!this.isUpdatePending}scheduleUpdate(){return this.performUpdate()}performUpdate(){var t;if(!this.isUpdatePending)return;this.hasUpdated,this._$Ei&&(this._$Ei.forEach(((t,i)=>this[i]=t)),this._$Ei=void 0);let i=!1;const s=this._$AL;try{i=this.shouldUpdate(s),i?(this.willUpdate(s),null===(t=this._$ES)||void 0===t||t.forEach((t=>{var i;return null===(i=t.hostUpdate)||void 0===i?void 0:i.call(t)})),this.update(s)):this._$Ek();}catch(t){throw i=!1,this._$Ek(),t}i&&this._$AE(s);}willUpdate(t){}_$AE(t){var i;null===(i=this._$ES)||void 0===i||i.forEach((t=>{var i;return null===(i=t.hostUpdated)||void 0===i?void 0:i.call(t)})),this.hasUpdated||(this.hasUpdated=!0,this.firstUpdated(t)),this.updated(t);}_$Ek(){this._$AL=new Map,this.isUpdatePending=!1;}get updateComplete(){return this.getUpdateComplete()}getUpdateComplete(){return this._$E_}shouldUpdate(t){return !0}update(t){void 0!==this._$EC&&(this._$EC.forEach(((t,i)=>this._$EO(i,this[i],t))),this._$EC=void 0),this._$Ek();}updated(t){}firstUpdated(t){}}a$1.finalized=!0,a$1.elementProperties=new Map,a$1.elementStyles=[],a$1.shadowRootOptions={mode:"open"},null==h$1||h$1({ReactiveElement:a$1}),(null!==(s$2=globalThis.reactiveElementVersions)&&void 0!==s$2?s$2:globalThis.reactiveElementVersions=[]).push("1.3.4"); + +/** + * @license + * Copyright 2017 Google LLC + * SPDX-License-Identifier: BSD-3-Clause + */ +var t;const i=globalThis.trustedTypes,s$1=i?i.createPolicy("lit-html",{createHTML:t=>t}):void 0,e=`lit$${(Math.random()+"").slice(9)}$`,o$1="?"+e,n$1=`<${o$1}>`,l$1=document,h=(t="")=>l$1.createComment(t),r=t=>null===t||"object"!=typeof t&&"function"!=typeof t,d=Array.isArray,u=t=>d(t)||"function"==typeof(null==t?void 0:t[Symbol.iterator]),c=/<(?:(!--|\/[^a-zA-Z])|(\/?[a-zA-Z][^>\s]*)|(\/?$))/g,v=/-->/g,a=/>/g,f=RegExp(">|[ \t\n\f\r](?:([^\\s\"'>=/]+)([ \t\n\f\r]*=[ \t\n\f\r]*(?:[^ \t\n\f\r\"'`<>=]|(\"|')|))|$)","g"),_=/'/g,g=/"/g,m=/^(?:script|style|textarea|title)$/i,p=t=>(i,...s)=>({_$litType$:t,strings:i,values:s}),$=p(1),b=Symbol.for("lit-noChange"),w=Symbol.for("lit-nothing"),x=new WeakMap,T=(t,i,s)=>{var e,o;const n=null!==(e=null==s?void 0:s.renderBefore)&&void 0!==e?e:i;let l=n._$litPart$;if(void 0===l){const t=null!==(o=null==s?void 0:s.renderBefore)&&void 0!==o?o:null;n._$litPart$=l=new N(i.insertBefore(h(),t),t,void 0,null!=s?s:{});}return l._$AI(t),l},A=l$1.createTreeWalker(l$1,129,null,!1),E=(t,i)=>{const o=t.length-1,l=[];let h,r=2===i?"":"",d=c;for(let i=0;i"===u[0]?(d=null!=h?h:c,p=-1):void 0===u[1]?p=-2:(p=d.lastIndex-u[2].length,o=u[1],d=void 0===u[3]?f:'"'===u[3]?g:_):d===g||d===_?d=f:d===v||d===a?d=c:(d=f,h=void 0);const y=d===f&&t[i+1].startsWith("/>")?" ":"";r+=d===c?s+n$1:p>=0?(l.push(o),s.slice(0,p)+"$lit$"+s.slice(p)+e+y):s+e+(-2===p?(l.push(void 0),i):y);}const u=r+(t[o]||"")+(2===i?"":"");if(!Array.isArray(t)||!t.hasOwnProperty("raw"))throw Error("invalid template strings array");return [void 0!==s$1?s$1.createHTML(u):u,l]};class C{constructor({strings:t,_$litType$:s},n){let l;this.parts=[];let r=0,d=0;const u=t.length-1,c=this.parts,[v,a]=E(t,s);if(this.el=C.createElement(v,n),A.currentNode=this.el.content,2===s){const t=this.el.content,i=t.firstChild;i.remove(),t.append(...i.childNodes);}for(;null!==(l=A.nextNode())&&c.length0){l.textContent=i?i.emptyScript:"";for(let i=0;i2||""!==s[0]||""!==s[1]?(this._$AH=Array(s.length-1).fill(new String),this.strings=s):this._$AH=w;}get tagName(){return this.element.tagName}get _$AU(){return this._$AM._$AU}_$AI(t,i=this,s,e){const o=this.strings;let n=!1;if(void 0===o)t=P$1(this,t,i,0),n=!r(t)||t!==this._$AH&&t!==b,n&&(this._$AH=t);else {const e=t;let l,h;for(t=o[0],l=0;l[0-9a-fA-F]{2})(?[0-9a-fA-F]{2})(?[0-9a-fA-F]{2})([0-9a-fA-F]{2})?|#(?[0-9a-fA-F])(?[0-9a-fA-F])(?[0-9a-fA-F])\s*$/ static keysSeparator = "+" static linkCurveHeight = 15 // pixel static linkCurveWidth = 80 // pixel @@ -36,11 +61,22 @@ class Configuration { } static maxZoom = 7 static minZoom = -12 + static mouseWheelFactor = 0.2 static nodeDeleteEventName = "ueb-node-delete" static nodeDragEventName = "ueb-node-drag" static nodeDragLocalEventName = "ueb-node-drag-local" static nodeName = (name, counter) => `${name}_${counter}` static nodeRadius = 8 // in pixel + static nodeReflowEventName = "ueb-node-reflow" + static pinColor = { + bool: r$2`117, 0, 0`, // #750000 + default: r$2`167, 167, 167`, // #a7a7a7 + exec: r$2`167, 167, 167`, // #a7a7a7 + name: r$2`203, 129, 252`, // #cb81fc + real: r$2`50, 187, 0`, // #32bb00 + string: r$2`213, 0, 176`, // #d500b0 + struct: r$2`3, 76, 168` // #034ca8 + } static selectAllKeyboardKey = "(bCtrl=True,Key=A)" static trackingMouseEventName = { begin: "ueb-tracking-mouse-begin", @@ -145,8 +181,6 @@ class Configuration { } } -// @ts-check - /** * @typedef {import("../Blueprint").default} Blueprint */ @@ -212,33 +246,114 @@ class IInput { } } -class ISerializable { +class Observable { - #showAsString = false + /** @type {Map} */ + #observers = new Map() - isShownAsString() { - return this.#showAsString + /** + * @param {String} property + * @param {(value: any) => {}} observer + */ + subscribe(property, observer) { + let observers = this.#observers; + if (observers.has(property)) { + let propertyObservers = observers.get(property); + if (propertyObservers.includes(observer)) { + return false + } else { + propertyObservers.push(observer); + } + } else { + let fromPrototype = false; + let propertyDescriptor = Object.getOwnPropertyDescriptor(this, property); + if (!propertyDescriptor) { + fromPrototype = true; + propertyDescriptor = Object.getOwnPropertyDescriptor(Object.getPrototypeOf(this), property) ?? {}; + if (!propertyDescriptor) { + return false + } + } + observers.set(property, [observer]); + const isValue = "value" in propertyDescriptor; + const hasSetter = "set" in propertyDescriptor; + if (!(isValue || hasSetter)) { + throw new Error(`Property ${property} is not a value or a setter`) + } + // A Symbol so it does not show up in Object.getOwnPropertyNames() + const storageKey = Symbol.for(property + "Storage"); + const valInfoKey = Symbol.for(property + "ValInfo"); + Object.defineProperties( + fromPrototype ? Object.getPrototypeOf(this) : this, + { + [storageKey]: { + configurable: true, + enumerable: false, // Non enumerable so it does not show up in for...in or Object.keys() + ...(isValue + ? { + value: this[property], + writable: true, + } + : { + get: propertyDescriptor.get, + set: propertyDescriptor.set, + } + ) + }, + [valInfoKey]: { + configurable: true, + enumerable: false, + value: [fromPrototype, isValue] + }, + [property]: { + configurable: true, + ...(isValue && { + get() { + return this[storageKey] + } + }), + set(v) { + this[storageKey] = v; + observers.get(property).forEach(observer => { + observer(this[property]); + }); + }, + } + } + ); + } + return true } /** - * @param {Boolean} v + * @param {String} property + * @param {Object} observer */ - setShowAsString(v) { - this.#showAsString = v; + unsubscribe(property, observer) { + let observers = this.#observers.get(property); + if (!observers?.includes(observer)) { + return false + } + observers.splice(observers.indexOf(observer), 1); + if (observers.length == 0) { + const storageKey = Symbol.for(property + "Storage"); + const valInfoKey = Symbol.for(property + "ValInfo"); + const fromPrototype = this[valInfoKey][0]; + this[valInfoKey][1]; + Object.defineProperty( + fromPrototype ? Object.getPrototypeOf(this) : this, + property, + Object.getOwnPropertyDescriptor(fromPrototype ? Object.getPrototypeOf(this) : this, storageKey), + ); + delete this[valInfoKey]; + delete this[storageKey]; + } + return true } } -// @ts-check - -/** - * @typedef {import("../entity/IEntity").default} IEntity - * @typedef {(new (object?: Object) => IEntity) | StringConstructor | NumberConstructor | BooleanConstructor} Constructor - * @typedef {Constructor|Constructor[]} AcceptedType - */ - class SerializedType { - /** @type {(Constructor|Array)[]} */ #types get types() { return this.#types @@ -247,16 +362,11 @@ class SerializedType { this.#types = v; } - /** - * @param {...AcceptedType} acceptedTypes - */ constructor(...acceptedTypes) { this.#types = acceptedTypes; } } -// @ts-check - /** * @template T */ @@ -326,10 +436,26 @@ class TypeInitialization { } } -// @ts-check +/** + * @typedef {import("./entity/LinearColorEntity").default} LinearColorEntity + */ class Utility { + static booleanConverter = { + fromAttribute: (value, type) => { + }, + toAttribute: (value, type) => { + if (value === true) { + return "true" + } + if (value === false) { + return "false" + } + return "" + } + } + static sigmoid(x, curvature = 1.7) { return 1 / (1 + (x / (1 - x) ** -curvature)) } @@ -358,7 +484,6 @@ class Utility { /** * @param {Number[]} viewportLocation * @param {HTMLElement} movementElement - * @returns */ static convertLocation(viewportLocation, movementElement) { const scaleCorrection = 1 / Utility.getScale(movementElement); @@ -530,13 +655,19 @@ class Utility { .replace(/^b/, "") // Remove leading b (for boolean values) or newlines .replaceAll(/(?<=[a-z])(?=[A-Z])|_|\s+/g, " ") // Insert a space between a lowercase and uppercase letter, instead of an underscore or multiple spaces } + + /** + * @param {LinearColorEntity} value + */ + static printLinearColor(value) { + return `${Math.round(value.R * 255)}, ${Math.round(value.G * 255)}, ${Math.round(value.B * 255)}` + } } -// @ts-check - -class IEntity extends ISerializable { +class IEntity extends Observable { static attributes = {} + #showAsString = false constructor(values) { super(); @@ -583,7 +714,7 @@ class IEntity extends ISerializable { } if (defaultValue instanceof TypeInitialization) { if (!defaultValue.showDefault) { - target[property] = undefined; // Declare undefined to preserve the order or attributes + target[property] = undefined; // Declare undefined to preserve the order of attributes continue } defaultValue = defaultValue.value; @@ -598,7 +729,6 @@ class IEntity extends ISerializable { target[property] = TypeInitialization.sanitize(defaultValue, defaultType); } }; - // @ts-expect-error const attributes = this.constructor.attributes; if (values.constructor !== Object && Object.getOwnPropertyNames(attributes).length == 1) { // Where there is just one attribute, option can be the value of that attribute @@ -608,42 +738,35 @@ class IEntity extends ISerializable { } defineAllAttributes(this, attributes, values); } + + isShownAsString() { + return this.#showAsString + } + + /** + * @param {Boolean} v + */ + setShowAsString(v) { + this.#showAsString = v; + } } -// @ts-check - class ObjectReferenceEntity extends IEntity { static attributes = { type: String, path: String, } - - constructor(options = {}) { - super(options); - /** @type {String} */ this.type; - /** @type {String} */ this.path; - } } -// @ts-check - class FunctionReferenceEntity extends IEntity { static attributes = { MemberParent: ObjectReferenceEntity, MemberName: "", } - - constructor(options = {}) { - super(options); - /** @type {ObjectReferenceEntity} */ this.MemberParent; - /** @type {String} */ this.MemberName; - } } -// @ts-check - class GuidEntity extends IEntity { static attributes = { @@ -662,11 +785,6 @@ class GuidEntity extends IEntity { return new GuidEntity({ value: guid }) } - constructor(options = {}) { - super(options); - /** @type {String} */ this.value; - } - valueOf() { return this.value } @@ -676,17 +794,15 @@ class GuidEntity extends IEntity { } } -// @ts-check - class IdentifierEntity extends IEntity { static attributes = { value: String, } - constructor(options = {}) { - super(options); - /** @type {String} */ this.value; + static attributeConverter = { + fromAttribute: (value, type) => new IdentifierEntity(value), + toAttribute: (value, type) => value.toString() } valueOf() { @@ -698,8 +814,6 @@ class IdentifierEntity extends IEntity { } } -// @ts-check - class IntegerEntity extends IEntity { static attributes = { @@ -723,23 +837,14 @@ class IntegerEntity extends IEntity { } } -// @ts-check - class InvariantTextEntity extends IEntity { static lookbehind = "INVTEXT" static attributes = { value: String, } - - constructor(options = {}) { - super(options); - /** @type {String} */ this.value; - } } -// @ts-check - class KeyBindingEntity extends IEntity { static attributes = { @@ -758,17 +863,9 @@ class KeyBindingEntity extends IEntity { options.bAlt = options.bAlt ?? false; options.bCmd = options.bCmd ?? false; super(options); - /** @type {String} */ this.ActionName; - /** @type {Boolean} */ this.bShift; - /** @type {Boolean} */ this.bCtrl; - /** @type {Boolean} */ this.bAlt; - /** @type {Boolean} */ this.bCmd; - /** @type {IdentifierEntity} */ this.Key; } } -// @ts-check - class LinearColorEntity extends IEntity { static attributes = { @@ -777,41 +874,8 @@ class LinearColorEntity extends IEntity { B: Number, A: Number, } - - constructor(options = {}) { - super(options); - /** @type {Number} */ this.R; - /** @type {Number} */ this.G; - /** @type {Number} */ this.B; - /** @type {Number} */ this.A; - } - - /** - * @param {Number} number - */ - static numberToString(number) { - return Math.round(number * 255).toString(16) - } - - static fromString(value) { - return new LinearColorEntity({ - R: parseInt(value.substr(0, 2), 16) / 255, - G: parseInt(value.substr(2, 2), 16) / 255, - B: parseInt(value.substr(4, 2), 16) / 255, - A: parseInt(value.substr(6, 2), 16) / 255, - }) - } - - toString() { - return "#" + LinearColorEntity.numberToString(this.R) - + LinearColorEntity.numberToString(this.G) - + LinearColorEntity.numberToString(this.B) - + LinearColorEntity.numberToString(this.A) - } } -// @ts-check - class LocalizedTextEntity extends IEntity { static lookbehind = "NSLOCTEXT" @@ -820,28 +884,14 @@ class LocalizedTextEntity extends IEntity { key: String, value: String, } - - constructor(options = {}) { - super(options); - /** @type {String} */ this.namespace; - /** @type {String} */ this.key; - /** @type {String} */ this.value; - } } -// @ts-check - class PathSymbolEntity extends IEntity { static attributes = { value: String, } - constructor(options = {}) { - super(options); - /** @type {String} */ this.value; - } - valueOf() { return this.value } @@ -851,24 +901,14 @@ class PathSymbolEntity extends IEntity { } } -// @ts-check - class PinReferenceEntity extends IEntity { static attributes = { objectName: PathSymbolEntity, pinGuid: GuidEntity, } - - constructor(options = {}) { - super(options); - /** @type {PathSymbolEntity} */ this.objectName; - /** @type {GuidEntity} */ this.pinGuid; - } } -// @ts-check - class PinEntity extends IEntity { static lookbehind = "Pin" @@ -904,44 +944,14 @@ class PinEntity extends IEntity { bOrphanedPin: false, } - constructor(options = {}) { - super(options); - /** @type {GuidEntity} */ this.PinId; - /** @type {String} */ this.PinName; - /** @type {LocalizedTextEntity} */ this.PinFriendlyName; - /** @type {String} */ this.PinToolTip; - /** @type {String} */ this.Direction; - /** - * @type {{ - * PinCategory: String, - * PinSubCategory: String, - * PinSubCategoryObject: ObjectReferenceEntity, - * PinSubCategoryMemberReference: any, - * PinValueType: String, - * ContainerType: ObjectReferenceEntity, - * bIsReference: Boolean, - * bIsConst: Boolean, - * bIsWeakPointer: Boolean, - * bIsUObjectWrapper: Boolean, - * }} - */ this.PinType; - /** @type {PinReferenceEntity[]} */ this.LinkedTo; - /** @type {String | LinearColorEntity} */ this.DefaultValue; - /** @type {String} */ this.AutogeneratedDefaultValue; - /** @type {ObjectReferenceEntity} */ this.DefaultObject; - /** @type {GuidEntity} */ this.PersistentGuid; - /** @type {Boolean} */ this.bHidden; - /** @type {Boolean} */ this.bNotConnectable; - /** @type {Boolean} */ this.bDefaultValueIsReadOnly; - /** @type {Boolean} */ this.bDefaultValueIsIgnored; - /** @type {Boolean} */ this.bAdvancedView; - /** @type {Boolean} */ this.bOrphanedPin; - } - getDefaultValue() { return this.DefaultValue ?? "" } + isHidden() { + return this.bHidden + } + isInput() { return !this.bHidden && this.Direction != "EGPD_Output" } @@ -962,7 +972,6 @@ class PinEntity extends IEntity { /** @type {PinReferenceEntity[]} */ this.LinkedTo; const linkFound = this.LinkedTo?.find(pinReferenceEntity => { - // @ts-ignore return pinReferenceEntity.objectName == targetObjectName && pinReferenceEntity.pinGuid.valueOf() == targetPinEntity.PinId.valueOf() }); @@ -981,12 +990,9 @@ class PinEntity extends IEntity { * @param {PinEntity} targetPinEntity */ unlinkFrom(targetObjectName, targetPinEntity) { - /** @type {PinReferenceEntity[]} */ - this.LinkedTo; - const indexElement = this.LinkedTo.findIndex(pinReferenceEntity => { - // @ts-expect-error + const indexElement = this.LinkedTo?.findIndex(pinReferenceEntity => { return pinReferenceEntity.objectName == targetObjectName - && pinReferenceEntity.pinGuid == targetPinEntity.PinId + && pinReferenceEntity.pinGuid.valueOf() == targetPinEntity.PinId.valueOf() }); if (indexElement >= 0) { if (this.LinkedTo.length == 1) { @@ -1012,8 +1018,6 @@ class PinEntity extends IEntity { } } -// @ts-check - class VariableReferenceEntity extends IEntity { static attributes = { @@ -1021,17 +1025,8 @@ class VariableReferenceEntity extends IEntity { MemberGuid: GuidEntity, bSelfContext: false, } - - constructor(options = {}) { - super(options); - /** @type {String} */ this.MemberName; - /** @type {GuidEntity} */ this.MemberGuid; - /** @type {Boolean} */ this.bSelfContext; - } } -// @ts-check - class ObjectEntity extends IEntity { static attributes = { @@ -1054,25 +1049,6 @@ class ObjectEntity extends IEntity { static nameRegex = /(\w+)_(\d+)/ - constructor(options = {}) { - super(options); - /** @type {ObjectReferenceEntity} */ this.Class; - /** @type {String} */ this.Name; - /** @type {Boolean?} */ this.bIsPureFunc; - /** @type {VariableReferenceEntity?} */ this.VariableReference; - /** @type {FunctionReferenceEntity?} */ this.FunctionReference; - /** @type {FunctionReferenceEntity?} */ this.EventReference; - /** @type {ObjectReferenceEntity?} */ this.TargetType; - /** @type {IntegerEntity} */ this.NodePosX; - /** @type {IntegerEntity} */ this.NodePosY; - /** @type {IdentifierEntity?} */ this.AdvancedPinDisplay; - /** @type {IdentifierEntity?} */ this.EnabledState; - /** @type {GuidEntity} */ this.NodeGuid; - /** @type {IntegerEntity?} */ this.ErrorType; - /** @type {String?} */ this.ErrorMsg; - /** @type {PinEntity[]} */ this.CustomProperties; - } - getObjectName(dropCounter = false) { if (dropCounter) { return this.getNameAndCounter()[0] @@ -1088,6 +1064,7 @@ class ObjectEntity extends IEntity { if (result && result.length == 3) { return [result[1], parseInt(result[2])] } + return ["", 0] } getDisplayName() { @@ -1119,8 +1096,6 @@ var parsimmon_umd_min = {exports: {}}; var Parsimmon = /*@__PURE__*/getDefaultExportFromCjs(parsimmon_umd_min.exports); -// @ts-check - /** * @typedef {import("../entity/IEntity").default} IEntity */ @@ -1227,9 +1202,7 @@ class Grammar { * Then it populates an object of type EntityType with the attribute values found inside the parentheses. */ P.seqMap( - // @ts-expect-error entityType.lookbehind - // @ts-expect-error ? P.seq(P.string(entityType.lookbehind), P.optWhitespace, P.string("(")) : P.string("("), Grammar.createAttributeGrammar(r, entityType) @@ -1257,8 +1230,14 @@ class Grammar { Boolean = r => P.alt(P.string("True"), P.string("False")).map(v => v === "True" ? true : false) .desc("either True or False") + HexDigit = r => P.regex(/[0-9a-fA-f]/).desc("hexadecimal digit") + Number = r => P.regex(/[\-\+]?[0-9]+(?:\.[0-9]+)?/).map(Number).desc("a number") + NaturalNumber = r => P.regex(/0|[1-9]\d*/).map(Number).desc("a natural number") + + ColorNumber = r => r.NaturalNumber.assert(n => 0 <= n && n < 256, "the color must be between 0 and 256 excluded") + Word = r => P.regex(/[a-zA-Z]+/).desc("a word") String = r => P.regex(/(?:[^"\\]|\\.)*/).wrap(P.string('"'), P.string('"')).map(Utility.decodeString) @@ -1397,10 +1376,70 @@ class Grammar { /** @returns {Parsimmon.Parser} */ MultipleObject = r => r.Object.sepBy1(P.whitespace).trim(P.optWhitespace) + + /* --- Others --- */ + + LinearColorFromHex = r => P + .string("#") + .then(r.HexDigit.times(2).tie().times(3, 4)) + .trim(P.optWhitespace) + .map(([R, G, B, A]) => new LinearColorEntity({ + R: parseInt(R, 16) / 255, + G: parseInt(G, 16) / 255, + B: parseInt(B, 16) / 255, + A: A ? parseInt(A, 16) / 255 : 1, + })) + + LinearColorFromRGBList = r => P.seqMap( + r.ColorNumber, + P.string(",").skip(P.optWhitespace), + r.ColorNumber, + P.string(",").skip(P.optWhitespace), + r.ColorNumber.map(Number), + (R, _, G, __, B) => new LinearColorEntity({ + R: R / 255, + G: G / 255, + B: B / 255, + A: 1, + }) + ) + + LinearColorFromRGB = r => P.string("rgb").then( + r.LinearColorFromRGBList.wrap( + P.regex(/\(\s*/), + P.regex(/\s*\)/) + ) + ) + + LinearColorFromRGBA = r => P.string("rgba").then( + P.seqMap( + r.ColorNumber, + P.string(",").skip(P.optWhitespace), + r.ColorNumber, + P.string(",").skip(P.optWhitespace), + r.ColorNumber.map(Number), + P.string(",").skip(P.optWhitespace), + P.regex(/0?\.\d+|[01]/).map(Number), + (R, _, G, __, B, ___, A) => new LinearColorEntity({ + R: R / 255, + G: G / 255, + B: B / 255, + A: A, + }) + ).wrap( + P.regex(/\(\s*/), + P.regex(/\s*\)/) + ) + ) + + LinearColorFromAnyColor = r => P.alt( + r.LinearColorFromRGBList, + r.LinearColorFromHex, + r.LinearColorFromRGB, + r.LinearColorFromRGBA + ) } -// @ts-check - class SerializerFactory { static #serializers = new Map() @@ -1414,8 +1453,6 @@ class SerializerFactory { } } -// @ts-check - /** * @template {IEntity} T */ @@ -1543,8 +1580,6 @@ class ISerializer { } } -// @ts-check - class ObjectSerializer extends ISerializer { constructor() { @@ -1604,8 +1639,6 @@ End Object\n`; } } -// @ts-check - class Copy extends IInput { /** @type {(e: ClipboardEvent) => void} */ @@ -1629,23 +1662,14 @@ class Copy extends IInput { } copied() { - const value = this.blueprint.getNodes(true).map(node => this.serializer.serialize(node.entity, false)).join("\n"); + const value = this.blueprint.getNodes(true).map(node => this.serializer.serialize(node.entity, false)).join("\n\n"); navigator.clipboard.writeText(value); } } -// @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 - * @typedef {import("../input/IInput").default} IInput")} + * @typedef {import("../input/IInput").default} IInput */ /** @@ -1653,26 +1677,59 @@ const html = String.raw; */ class ITemplate { + static styles = r$2`` + /** @type {IInput[]} */ #inputObjects = [] - get inputObjects() { return this.#inputObjects } /** - * @param {T} entity + * @param {T} element */ - render(entity) { - return "" + constructed(element) { } /** * @param {T} element */ - setup(element) { - // TODO replace with the safer element.setHTML(...) when it will be availableBreack - element.innerHTML = this.render(element); + connectedCallback(element) { + } + + /** + * @param {T} element + * @param {Map} changedProperties + */ + willUpdate(element, changedProperties) { + } + + /** + * @param {T} element + * @param {Map} changedProperties + */ + update(element, changedProperties) { + } + + /** + * @param {T} element + */ + render(element) { + return $`` + } + + /** + * @param {T} element + * @param {Map} changedProperties + */ + firstUpdated(element, changedProperties) { + } + + /** + * @param {T} element + * @param {Map} changedProperties + */ + updated(element, changedProperties) { } /** @@ -1698,8 +1755,6 @@ class ITemplate { } } -// @ts-check - class IKeyboardShortcut extends IInput { /** @type {KeyBindingEntity[]} */ @@ -1718,7 +1773,6 @@ class IKeyboardShortcut extends IInput { return v } if (v.constructor === String) { - // @ts-expect-error const parsed = ISerializer.grammar.KeyBinding.parse(v); if (parsed.status) { return parsed.value @@ -1796,8 +1850,6 @@ class IKeyboardShortcut extends IInput { } } -// @ts-check - class KeyboardCanc extends IKeyboardShortcut { /** @@ -1815,8 +1867,6 @@ class KeyboardCanc extends IKeyboardShortcut { } } -// @ts-check - /** * @typedef {import("../../Blueprint").default} Blueprint */ @@ -1836,17 +1886,14 @@ class IPointing extends IInput { * @param {MouseEvent} mouseEvent */ locationFromEvent(mouseEvent) { - return this.blueprint.compensateTranslation( - Utility.convertLocation( - [mouseEvent.clientX, mouseEvent.clientY], - this.movementSpace - ) - ) + const location = Utility.convertLocation( + [mouseEvent.clientX, mouseEvent.clientY], + this.movementSpace + ); + return this.blueprint.compensateTranslation(location) } } -// @ts-check - class IMouseWheel extends IPointing { /** @type {(e: WheelEvent) => void} */ @@ -1869,7 +1916,7 @@ class IMouseWheel extends IPointing { this.#mouseWheelHandler = e => { e.preventDefault(); const location = self.locationFromEvent(e); - self.wheel(Math.sign(e.deltaY), location); + self.wheel(Math.sign(e.deltaY * Configuration.mouseWheelFactor), location); }; this.#mouseParentWheelHandler = e => e.preventDefault(); @@ -1893,8 +1940,6 @@ class IMouseWheel extends IPointing { } } -// @ts-check - class Zoom extends IMouseWheel { #enableZoonIn = false @@ -1922,8 +1967,6 @@ class Zoom extends IMouseWheel { } } -// @ts-check - class KeyboardEnableZoom extends IKeyboardShortcut { /** @type {Zoom} */ @@ -1949,8 +1992,6 @@ class KeyboardEnableZoom extends IKeyboardShortcut { } } -// @ts-check - /** * @typedef {import("../../Blueprint").default} Blueprint */ @@ -1971,8 +2012,6 @@ class KeyboardSelectAll extends IKeyboardShortcut { } } -// @ts-check - /** * @typedef {import("../../Blueprint").default} Blueprint */ @@ -2013,12 +2052,12 @@ class IMouseClickDrag extends IPointing { let self = this; this.#mouseDownHandler = e => { - this.blueprint.setFocused(true); + self.blueprint.setFocused(true); switch (e.button) { case self.options.clickButton: // Either doesn't matter or consider the click only when clicking on the parent, not descandants if (self.options.looseTarget || e.target == e.currentTarget) { - if (this.options.consumeEvent) { + if (self.options.consumeEvent) { e.stopImmediatePropagation(); // Captured, don't call anyone else } // Attach the listeners @@ -2037,7 +2076,7 @@ class IMouseClickDrag extends IPointing { }; this.#mouseStartedMovingHandler = e => { - if (this.options.consumeEvent) { + if (self.options.consumeEvent) { e.stopImmediatePropagation(); // Captured, don't call anyone else } // Delegate from now on to self.#mouseMoveHandler @@ -2045,14 +2084,15 @@ class IMouseClickDrag extends IPointing { 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 = this.target.dispatchEvent(dragEvent) == false; + self.#trackingMouse = self.target.dispatchEvent(dragEvent) == false; + const location = self.locationFromEvent(e); // Do actual actions - self.startDrag(); + self.startDrag(location); self.started = true; }; this.#mouseMoveHandler = e => { - if (this.options.consumeEvent) { + if (self.options.consumeEvent) { e.stopImmediatePropagation(); // Captured, don't call anyone else } const location = self.locationFromEvent(e); @@ -2065,7 +2105,7 @@ class IMouseClickDrag extends IPointing { this.#mouseUpHandler = e => { if (!self.options.exitAnyButton || e.button == self.options.clickButton) { - if (this.options.consumeEvent) { + if (self.options.consumeEvent) { e.stopImmediatePropagation(); // Captured, don't call anyone else } // Remove the handlers of "mousemove" and "mouseup" @@ -2078,7 +2118,7 @@ class IMouseClickDrag extends IPointing { self.unclicked(); if (self.#trackingMouse) { const dragEvent = self.getEvent(Configuration.trackingMouseEventName.end); - this.target.dispatchEvent(dragEvent); + self.target.dispatchEvent(dragEvent); self.#trackingMouse = false; } self.started = false; @@ -2126,12 +2166,10 @@ class IMouseClickDrag extends IPointing { } } -// @ts-check - class MouseScrollGraph extends IMouseClickDrag { startDrag() { - this.blueprint.template.applyStartDragScrolling(this.blueprint); + this.blueprint.scrolling = true; } dragTo(location, movement) { @@ -2139,12 +2177,10 @@ class MouseScrollGraph extends IMouseClickDrag { } endDrag() { - this.blueprint.template.applyEndDragScrolling(this.blueprint); + this.blueprint.scrolling = false; } } -// @ts-check - class MouseTracking extends IPointing { /** @type {IPointing} */ @@ -2217,8 +2253,6 @@ class MouseTracking extends IPointing { } } -// @ts-check - /** * @typedef {import("../Blueprint").default} Blueprint * @typedef {import("../entity/IEntity").default} IEntity @@ -2230,15 +2264,20 @@ class MouseTracking extends IPointing { * @template {IEntity} T * @template {ITemplate} U */ -class IElement extends HTMLElement { +class IElement extends s { + + static properties = { + } + + #nextUpdatedCallbacks = [] /** @type {Blueprint} */ #blueprint get blueprint() { return this.#blueprint } - set blueprint(blueprint) { - this.#blueprint = blueprint; + set blueprint(v) { + return this.#blueprint = v } /** @type {T} */ @@ -2255,9 +2294,6 @@ class IElement extends HTMLElement { get template() { return this.#template } - set template(template) { - this.#template = template; - } /** @type {IInput[]} */ inputObjects = [] @@ -2271,46 +2307,83 @@ class IElement extends HTMLElement { this.#entity = entity; this.#template = template; this.inputObjects = []; + this.#template.constructed(this); } - getTemplate() { - return this.template + createRenderRoot() { + return this } connectedCallback() { - this.#blueprint = this.closest("ueb-blueprint"); - this.template.setup(this); + super.connectedCallback(); + this.blueprint = this.closest("ueb-blueprint"); + this.template.connectedCallback(this); + } + + /** + * @param {Map} changedProperties + */ + willUpdate(changedProperties) { + super.willUpdate(changedProperties); + this.template.willUpdate(this, changedProperties); + } + + /** + * @param {Map} changedProperties + */ + update(changedProperties) { + super.update(changedProperties); + this.template.update(this, changedProperties); + } + + render() { + return this.template.render(this) + } + + /** + * @param {Map} changedProperties + */ + firstUpdated(changedProperties) { + super.firstUpdated(changedProperties); + this.template.firstUpdated(this, changedProperties); this.template.inputSetup(this); } + updated(changedProperties) { + super.updated(changedProperties); + this.template.updated(this, changedProperties); + this.#nextUpdatedCallbacks.forEach(f => f(changedProperties)); + this.#nextUpdatedCallbacks = []; + } + disconnectedCallback() { + super.disconnectedCallback(); this.template.cleanup(this); } + addNextUpdatedCallbacks(callback, requestUpdate = false) { + this.#nextUpdatedCallbacks.push(callback); + if (requestUpdate) { + this.requestUpdate(); + } + } + /** * @param {IElement} element */ isSameGraph(element) { - return this.#blueprint && this.#blueprint == element?.blueprint + return this.blueprint && this.blueprint == element?.blueprint } /** * @template {IInput} V * @param {new (...args: any[]) => V} type - * @returns {V} */ getInputObject(type) { return /** @type {V} */ (this.template.inputObjects.find(object => object.constructor == type)) } - - // Subclasses will want to override - createInputObjects() { - return [] - } } -// @ts-check - /** * @typedef {import("../template/SelectableDraggableTemplate").default} SelectableDraggableTemplate * @typedef {import("../entity/IEntity").default} IEntity @@ -2323,45 +2396,57 @@ class IElement extends HTMLElement { */ class ISelectableDraggableElement extends IElement { + static properties = { + ...super.properties, + selected: { + type: Boolean, + attribute: "data-selected", + reflect: true, + converter: Utility.booleanConverter, + }, + locationX: { + type: Number, + attribute: false, + }, + locationY: { + type: Number, + attribute: false, + }, + } + constructor(...args) { - // @ts-expect-error super(...args); - this.dragObject = null; - this.location = [0, 0]; this.selected = false; + this.locationX = 0; + this.locationY = 0; + + this.listeningDrag = false; let self = this; this.dragHandler = e => self.addLocation(e.detail.value); } - #setSelected(value = true) { - this.selected = value; - if (this.blueprint) { - if (this.selected) { - this.blueprint.addEventListener(Configuration.nodeDragEventName, this.dragHandler); - } else { - this.blueprint.removeEventListener(Configuration.nodeDragEventName, this.dragHandler); - } - } - this.template.applySelected(this); - } - connectedCallback() { super.connectedCallback(); - this.#setSelected(this.selected); + this.setSelected(this.selected); + } + + disconnectedCallback() { + super.disconnectedCallback(); + this.blueprint.removeEventListener(Configuration.nodeDragEventName, this.dragHandler); } /** - * @param {Number[]} value + * @param {Number[]} param0 */ - setLocation(value = [0, 0]) { - const d = [value[0] - this.location[0], value[1] - this.location[1]]; - this.location = value; - this.template.applyLocation(this); + 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 + value: d, }, bubbles: false, cancelable: true @@ -2370,16 +2455,29 @@ class ISelectableDraggableElement extends IElement { } } - addLocation(value) { - this.setLocation([this.location[0] + value[0], this.location[1] + value[1]]); + /** + * @param {Number[]} param0 + */ + addLocation([x, y]) { + this.setLocation([this.locationX + x, this.locationY + y]); } setSelected(value = true) { - if (this.selected != value) { - this.#setSelected(value); + 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 + */ dispatchDragEvent(value) { const dragEvent = new CustomEvent(Configuration.nodeDragEventName, { detail: { @@ -2392,8 +2490,8 @@ class ISelectableDraggableElement extends IElement { } snapToGrid() { - let snappedLocation = Utility.snapToGrid(this.location, Configuration.gridSize); - if (this.location[0] != snappedLocation[0] || this.location[1] != snappedLocation[1]) { + const snappedLocation = Utility.snapToGrid([this.locationX, this.locationY], Configuration.gridSize); + if (this.locationX != snappedLocation[0] || this.locationY != snappedLocation[1]) { this.setLocation(snappedLocation); } } @@ -2414,30 +2512,114 @@ class MouseIgnore extends IMouseClickDrag { } } -// @ts-check - -document.createElement("div"); - -const tagReplacement = { - '&': '&', - '<': '<', - '>': '>', - "'": ''', - '"': '"' -}; - -function sanitizeText(value) { - return value.toString().replace(/[&<>'"]/g, tag => tagReplacement[tag]) +/** + * @typedef {import("../entity/IEntity").default} IEntity + * @typedef {import("../template/ITemplate").default} ITemplate + */ + +/** + * @template {IEntity} T + * @template {ITemplate} U + * @extends {IElement} + */ +class IFromToPositionedElement extends IElement { + + static properties = { + ...super.properties, + initialPositionX: { + type: Number, + attribute: false, + }, + initialPositionY: { + type: Number, + attribute: false, + }, + finaPositionX: { + type: Number, + attribute: false, + }, + finaPositionY: { + type: Number, + attribute: false, + }, + } + + constructor(...args) { + super(...args); + this.initialPositionX = 0; + this.initialPositionY = 0; + this.finaPositionX = 0; + this.finaPositionY = 0; + } + + /** + * @param {Number[]} param0 + */ + setBothLocations([x, y]) { + this.initialPositionX = x; + this.initialPositionY = y; + this.finaPositionX = x; + this.finaPositionY = y; + } + + /** + * @param {Number[]} offset + */ + addSourceLocation([offsetX, offsetY]) { + this.initialPositionX += offsetX; + this.initialPositionY += offsetY; + } + + /** + * @param {Number[]} offset + */ + addDestinationLocation([offsetX, offsetY]) { + this.finaPositionX += offsetX; + this.finaPositionY += offsetY; + } } -// @ts-check - /** - * @typedef {import("../element/LinkElement").default} LinkElement - * @typedef {import("../element/LinkMessageElement").default} LinkMessageElement + * @typedef {import("../element/IFromToPositionedElement").default} IFromToPositionedElement */ -class LinkTemplate extends ITemplate { +/** + * @template {IFromToPositionedElement} T + * @extends {ITemplate} + */ +class IFromToPositionedTemplate extends ITemplate { + + /** + * @param {T} selector + * @param {Map} changedProperties + */ + update(selector, changedProperties) { + super.update(selector, changedProperties); + if (changedProperties.has("initialPositionX")) { + selector.style.setProperty("--ueb-from-x", `${selector.initialPositionX}`); + } + if (changedProperties.has("initialPositionY")) { + selector.style.setProperty("--ueb-from-y", `${selector.initialPositionY}`); + } + if (changedProperties.has("finaPositionX")) { + selector.style.setProperty("--ueb-to-x", `${selector.finaPositionX}`); + } + if (changedProperties.has("finaPositionY")) { + selector.style.setProperty("--ueb-to-y", `${selector.finaPositionY}`); + } + } + +} + +/** + * @typedef {import("../element/LinkElement").default} LinkElement + */ + + +/** + * @extends {IFromToPositionedTemplate} + */ +class LinkTemplate extends IFromToPositionedTemplate { /** * Returns a function performing the inverse multiplication y = a / x + q. The value of a and q are calculated using @@ -2480,7 +2662,7 @@ class LinkTemplate extends ITemplate { : m * x + q } - static c1DecreasingValue = LinkTemplate.decreasingValue(-0.1, [100, 15]) + static c1DecreasingValue = LinkTemplate.decreasingValue(-0.15, [100, 15]) static c2DecreasingValue = LinkTemplate.decreasingValue(-0.06, [500, 130]) @@ -2488,434 +2670,328 @@ class LinkTemplate extends ITemplate { /** * @param {LinkElement} link + * @param {Map} changedProperties */ - render(link) { - const uniqueId = "ueb-id-" + Math.floor(Math.random() * 1E12); - return html` - - - - - - - ` - } - - /** - * @param {LinkElement} link - */ - setup(link) { - super.setup(link); - if (link.linkMessageElement) { - link.appendChild(link.linkMessageElement); - } - link.classList.add("ueb-positioned"); - link.pathElement = link.querySelector("path"); - const referencePin = link.sourcePin ?? link.destinationPin; - if (referencePin) { - link.style.setProperty("--ueb-pin-color", referencePin.getColor()); - } - this.applyPins(link); - if (link.sourcePin && link.destinationPin) { - this.applyFullLocation(link); - } - } - - /** - * @param {LinkElement} link - */ - applyPins(link) { - if (link.sourcePin) { - link.dataset.source = link.sourcePin.GetPinId().toString(); - } - if (link.destinationPin) { - link.dataset.destination = link.destinationPin.GetPinId().toString(); - } - } - - /** - * @param {LinkElement} link - */ - applyStartDragging(link) { - link.blueprint.dataset.creatingLink = "true"; - link.classList.add("ueb-link-dragging"); - } - - /** - * @param {LinkElement} link - */ - applyFinishDragging(link) { - link.blueprint.dataset.creatingLink = "false"; - link.classList.remove("ueb-link-dragging"); - } - - /** - * @param {LinkElement} link - */ - applySourceLocation(link) { - link.style.setProperty("--ueb-from-input", link.originatesFromInput ? "1" : "0"); - link.style.setProperty("--ueb-from-x", sanitizeText(link.sourceLocation[0])); - link.style.setProperty("--ueb-from-y", sanitizeText(link.sourceLocation[1])); - } - - /** - * @param {LinkElement} link - */ - applyFullLocation(link) { - const dx = Math.max(Math.abs(link.sourceLocation[0] - link.destinationLocation[0]), 1); + willUpdate(link, changedProperties) { + super.willUpdate(link, changedProperties); + const dx = Math.max(Math.abs(link.initialPositionX - link.finaPositionX), 1); const width = Math.max(dx, Configuration.linkMinWidth); - Math.max(Math.abs(link.sourceLocation[1] - link.destinationLocation[1]), 1); + // const height = Math.max(Math.abs(link.initialPositionY - link.finaPositionY), 1) const fillRatio = dx / width; + // const aspectRatio = width / height const xInverted = link.originatesFromInput - ? link.sourceLocation[0] < link.destinationLocation[0] - : link.destinationLocation[0] < link.sourceLocation[0]; - let start = dx < width // If under minimum width + ? link.initialPositionX < link.finaPositionX + : link.finaPositionX < link.initialPositionX; + link.startPixels = dx < width // If under minimum width ? (width - dx) / 2 // Start from half the empty space : 0; // Otherwise start from the beginning - - link.style.setProperty("--ueb-from-x", sanitizeText(link.sourceLocation[0])); - link.style.setProperty("--ueb-from-y", sanitizeText(link.sourceLocation[1])); - link.style.setProperty("--ueb-to-x", sanitizeText(link.destinationLocation[0])); - link.style.setProperty("--ueb-to-y", sanitizeText(link.destinationLocation[1])); - link.style.setProperty("margin-left", `-${start}px`); - if (xInverted) { - start += fillRatio * 100; - } - link.style.setProperty("--ueb-start-percentage", `${start}%`); + link.startPercentage = xInverted ? link.startPixels + fillRatio * 100 : link.startPixels; const c1 - = start + = link.startPercentage + (xInverted ? LinkTemplate.c1DecreasingValue(width) : 10 ) * fillRatio; - let c2 = LinkTemplate.c2Clamped(xInverted ? -dx : dx) + start; + let c2 = LinkTemplate.c2Clamped(xInverted ? -dx : dx) + link.startPercentage; c2 = Math.min(c2, LinkTemplate.c2DecreasingValue(width)); - const d = Configuration.linkRightSVGPath(start, c1, c2); - // TODO move to CSS when Firefox will support property d and css will have enough functions - link.pathElement?.setAttribute("d", d); + link.svgPathD = Configuration.linkRightSVGPath(link.startPercentage, c1, c2); } /** * @param {LinkElement} link - * @param {LinkMessageElement} linkMessage + * @param {Map} changedProperties */ - applyLinkMessage(link, linkMessage) { - link.querySelectorAll("ueb-link-message").forEach(element => element.remove()); - link.appendChild(linkMessage); - link.linkMessageElement = linkMessage; + update(link, changedProperties) { + super.update(link, changedProperties); + if (changedProperties.has("originatesFromInput")) { + link.style.setProperty("--ueb-from-input", link.originatesFromInput ? "1" : "0"); + } + const referencePin = link.sourcePin ?? link.destinationPin; + if (referencePin) { + link.style.setProperty("--ueb-link-color-rgb", Utility.printLinearColor(referencePin.color)); + } + link.style.setProperty("--ueb-link-start", `${Math.round(link.startPixels)}`); + link.style.setProperty("--ueb-start-percentage", `${Math.round(link.startPercentage)}%`); + } + + /** + * @param {LinkElement} link + */ + render(link) { + const uniqueId = "ueb-id-" + Math.floor(Math.random() * 1E12); + return $` + + + + + + + ${link.linkMessageIcon != "" || link.linkMessageText != "" ? $` +
+ + ${link.linkMessageText} +
+ ` : $``} + ` } } -// @ts-check - /** * @typedef {import("./PinElement").default} PinElement - * @typedef {import("./LinkMessageElement").default} LinkMessageElement - * @typedef {import("../entity/IEntity").default} IEntity */ /** - * @extends {IElement} + * @extends {IFromToPositionedElement} */ -class LinkElement extends IElement { +class LinkElement extends IFromToPositionedElement { + + static properties = { + ...super.properties, + source: { + type: String, + reflect: true, + }, + destination: { + type: String, + reflect: true, + }, + dragging: { + type: Boolean, + attribute: "data-dragging", + converter: Utility.booleanConverter, + reflect: true, + }, + originatesFromInput: { + type: Boolean, + attribute: false, + }, + svgPathD: { + type: String, + attribute: false, + }, + linkMessageIcon: { + type: String, + attribute: false, + }, + linkMessageText: { + type: String, + attribute: false, + }, + } /** @type {PinElement} */ - #source + #sourcePin get sourcePin() { - return this.#source + return this.#sourcePin } set sourcePin(pin) { - if (this.#source == pin) { - return - } - if (this.#source) { - const nodeElement = this.#source.getNodeElement(); - nodeElement.removeEventListener(Configuration.nodeDeleteEventName, this.#nodeDeleteHandler); - nodeElement.removeEventListener(Configuration.nodeDragLocalEventName, this.#nodeDragSourceHandler); - if (this.#destination) { - this.#unlinkPins(); - } - } - this.#source = pin; - if (this.#source) { - const nodeElement = this.#source.getNodeElement(); - this.originatesFromInput = pin.isInput(); - nodeElement.addEventListener(Configuration.nodeDeleteEventName, this.#nodeDeleteHandler); - nodeElement.addEventListener(Configuration.nodeDragLocalEventName, this.#nodeDragSourceHandler); - this.setSourceLocation(); - if (this.#destination) { - this.#linkPins(); - } - } - this.template.applyPins(this); + this.#setPin(pin, false); } /** @type {PinElement} */ - #destination + #destinationPin get destinationPin() { - return this.#destination + return this.#destinationPin } set destinationPin(pin) { - if (this.#destination == pin) { - return - } - if (this.#destination) { - const nodeElement = this.#destination.getNodeElement(); - nodeElement.removeEventListener(Configuration.nodeDeleteEventName, this.#nodeDeleteHandler); - nodeElement.removeEventListener(Configuration.nodeDragLocalEventName, this.#nodeDragDestinatonHandler); - if (this.#source) { - this.#unlinkPins(); - } - } - this.#destination = pin; - if (this.#destination) { - const nodeElement = this.#destination.getNodeElement(); - nodeElement.addEventListener(Configuration.nodeDeleteEventName, this.#nodeDeleteHandler); - nodeElement.addEventListener(Configuration.nodeDragLocalEventName, this.#nodeDragDestinatonHandler); - this.setDestinationLocation(); - if (this.#source) { - this.#linkPins(); - } - } - this.template.applyPins(this); + this.#setPin(pin, true); } #nodeDeleteHandler #nodeDragSourceHandler #nodeDragDestinatonHandler - sourceLocation = [0, 0] + #nodeReflowSourceHandler + #nodeReflowDestinatonHandler /** @type {SVGPathElement} */ pathElement - /** @type {LinkMessageElement} */ - linkMessageElement - originatesFromInput = false - destinationLocation = [0, 0] /** * @param {PinElement} source - * @param {PinElement} destination + * @param {PinElement?} destination */ constructor(source, destination) { super({}, new LinkTemplate()); const self = this; - this.#nodeDeleteHandler = _ => self.remove(); + this.#nodeDeleteHandler = () => self.remove(); this.#nodeDragSourceHandler = e => self.addSourceLocation(e.detail.value); this.#nodeDragDestinatonHandler = e => self.addDestinationLocation(e.detail.value); + this.#nodeReflowSourceHandler = e => self.setSourceLocation(); + this.#nodeReflowDestinatonHandler = e => self.setDestinationLocation(); + this.source = null; + this.destination = null; + this.dragging = false; + this.originatesFromInput = false; + this.startPercentage = 0; + this.svgPathD = ""; + this.startPixels = 0; + this.linkMessageIcon = ""; + this.linkMessageText = ""; if (source) { this.sourcePin = source; + if (!destination) { + this.finaPositionX = this.initialPositionX; + this.finaPositionY = this.initialPositionY; + } } if (destination) { this.destinationPin = destination; + if (!source) { + this.initialPositionX = this.finaPositionX; + this.initialPositionY = this.finaPositionY; + } } - if (source && destination) { + this.#linkPins(); + } + + /** + * @param {PinElement} pin + * @param {Boolean} isDestinationPin + */ + #setPin(pin, isDestinationPin) { + const getCurrentPin = () => isDestinationPin ? this.destinationPin : this.sourcePin; + if (getCurrentPin() == pin) { + return + } + if (getCurrentPin()) { + const nodeElement = getCurrentPin().getNodeElement(); + nodeElement.removeEventListener(Configuration.nodeDeleteEventName, this.#nodeDeleteHandler); + nodeElement.removeEventListener( + Configuration.nodeDragLocalEventName, + isDestinationPin ? this.#nodeDragDestinatonHandler : this.#nodeDragSourceHandler + ); + nodeElement.removeEventListener( + Configuration.nodeReflowEventName, + isDestinationPin ? this.#nodeReflowDestinatonHandler : this.#nodeReflowSourceHandler + ); + this.#unlinkPins(); + } + isDestinationPin + ? this.#destinationPin = pin + : this.#sourcePin = pin; + if (getCurrentPin()) { + const nodeElement = getCurrentPin().getNodeElement(); + nodeElement.addEventListener(Configuration.nodeDeleteEventName, this.#nodeDeleteHandler); + nodeElement.addEventListener( + Configuration.nodeDragLocalEventName, + isDestinationPin ? this.#nodeDragDestinatonHandler : this.#nodeDragSourceHandler + ); + nodeElement.addEventListener( + Configuration.nodeReflowEventName, + isDestinationPin ? this.#nodeReflowDestinatonHandler : this.#nodeReflowSourceHandler + ); + isDestinationPin + ? this.setDestinationLocation() + : (this.setSourceLocation(), this.originatesFromInput = this.sourcePin.isInput()); this.#linkPins(); } } #linkPins() { - this.#source.linkTo(this.#destination); - this.#destination.linkTo(this.#source); + if (this.sourcePin && this.destinationPin) { + this.sourcePin.linkTo(this.destinationPin); + this.destinationPin.linkTo(this.sourcePin); + } } #unlinkPins() { - if (this.#source && this.#destination) { - this.#source.unlinkFrom(this.#destination); - this.#destination.unlinkFrom(this.#source); + if (this.sourcePin && this.destinationPin) { + this.sourcePin.unlinkFrom(this.destinationPin); + this.destinationPin.unlinkFrom(this.sourcePin); } } disconnectedCallback() { super.disconnectedCallback(); this.#unlinkPins(); + this.sourcePin = null; + this.destinationPin = null; } /** - * @returns {Number[]} - */ - getSourceLocation() { - return this.sourceLocation - } - - /** - * @param {Number[]} offset - */ - addSourceLocation(offset) { - const location = [ - this.sourceLocation[0] + offset[0], - this.sourceLocation[1] + offset[1] - ]; - this.sourceLocation = location; - this.template.applyFullLocation(this); - } - - /** - * @param {Number[]} location + * @param {Number[]?} location */ setSourceLocation(location = null) { if (location == null) { - location = this.#source.template.getLinkLocation(this.#source); + const self = this; + if (!this.hasUpdated || !this.sourcePin.hasUpdated) { + Promise.all([this.updateComplete, this.sourcePin.updateComplete]).then(() => self.setSourceLocation()); + return + } + location = this.sourcePin.template.getLinkLocation(this.sourcePin); } - this.sourceLocation = location; - this.template.applySourceLocation(this); - } - - getDestinationLocation() { - return this.destinationLocation + const [x, y] = location; + this.initialPositionX = x; + this.initialPositionY = y; } /** - * @param {Number[]} offset - */ - addDestinationLocation(offset) { - const location = [ - this.destinationLocation[0] + offset[0], - this.destinationLocation[1] + offset[1] - ]; - this.setDestinationLocation(location); - } - - /** - * @param {Number[]} location + * @param {Number[]?} location */ setDestinationLocation(location = null) { if (location == null) { - location = this.#destination.template.getLinkLocation(this.#destination); - } - this.destinationLocation = location; - this.template.applyFullLocation(this); - } - - /** - * @param {LinkMessageElement} linkMessage - */ - setLinkMessage(linkMessage) { - if (linkMessage) { - this.template.applyLinkMessage(this, linkMessage); - } else if (this.linkMessageElement) { - this.linkMessageElement.remove(); - this.linkMessageElement = null; + const self = this; + if (!this.hasUpdated || !this.destinationPin.hasUpdated) { + Promise.all([this.updateComplete, this.destinationPin.updateComplete]).then(() => self.setDestinationLocation()); + return + } + location = this.destinationPin.template.getLinkLocation(this.destinationPin); } + this.finaPositionX = location[0]; + this.finaPositionY = location[1]; } startDragging() { - this.template.applyStartDragging(this); + this.dragging = true; } finishDragging() { - this.template.applyFinishDragging(this); + this.dragging = false; + } + + removeMessage() { + this.linkMessageIcon = ""; + this.linkMessageText = ""; + } + + setMessageConvertType() { + this.linkMessageIcon = "ueb-icon-conver-type"; + this.linkMessageText = `Convert ${this.sourcePin.pinType} to ${this.destinationPin.pinType}.`; + } + + setMessageCorrect() { + this.linkMessageIcon = "ueb-icon-correct"; + this.linkMessageText = ""; + } + + setMessageDirectionsIncompatible() { + this.linkMessageIcon = "ueb-icon-directions-incompatible"; + this.linkMessageText = "Directions are not compatbile."; + } + + setMessagePlaceNode() { + this.linkMessageIcon = "ueb-icon-place-node"; + this.linkMessageText = "Place a new node."; + } + + setMessageReplaceLink() { + this.linkMessageIcon = "ueb-icon-replace-link"; + this.linkMessageText = "Replace existing input connections."; + } + + setMessageSameNode() { + this.linkMessageIcon = "ueb-icon-same-node"; + this.linkMessageText = "Both are on the same node."; + } + + setMEssagetypesIncompatible() { + this.linkMessageIcon = "ueb-icon-types-incompatible"; + this.linkMessageText = `${this.sourcePin.pinType} is not compatible with ${this.destinationPin.pinType}.`; } } customElements.define("ueb-link", LinkElement); -// @ts-check - -/** - * @typedef {import("../element/LinkMessageElement").default} LinkMessageElement - */ - -class LinkMessageTemplate extends ITemplate { - - /** - * @param {LinkMessageElement} linkMessage - */ - render(linkMessage) { - return html` - - - ` - } - - /** - * Applies the style to the element. - * @param {LinkMessageElement} linkMessage - */ - setup(linkMessage) { - super.setup(linkMessage); - const linkMessageSetup = _ => - /** @type {HTMLElement} */(linkMessage.querySelector(".ueb-link-message")).innerText = linkMessage.message( - linkMessage.linkElement.sourcePin, - linkMessage.linkElement.destinationPin - ); - linkMessage.linkElement = linkMessage.closest("ueb-link"); - if (linkMessage.linkElement) { - linkMessageSetup(); - } else { - window.customElements.whenDefined("ueb-link-message").then(linkMessageSetup); - } - } - -} - -// @ts-check - -/** - * @typedef {import("./PinElement").default} PinElement - * @typedef {import("./LinkElement").default} LinkElement - * @typedef {(sourcePin: PinElement, destinationPin: PinElement) => String} LinkRetrieval - */ - -/** - * @extends {IElement} - */ -class LinkMessageElement extends IElement { - - static convertType = _ => new LinkMessageElement( - "ueb-icon-conver-type", - /** @type {LinkRetrieval} */ - (s, d) => `Convert ${s.getType()} to ${d.getType()}.` - ) - static correct = _ => new LinkMessageElement( - "ueb-icon-correct", - /** @type {LinkRetrieval} */ - (s, d) => "" - ) - static directionsIncompatible = _ => new LinkMessageElement( - "ueb-icon-directions-incompatible", - /** @type {LinkRetrieval} */ - (s, d) => "Directions are not compatbile." - ) - static placeNode = _ => new LinkMessageElement( - "ueb-icon-place-node", - /** @type {LinkRetrieval} */ - (s, d) => "Place a new node." - ) - static replaceLink = _ => new LinkMessageElement( - "ueb-icon-replace-link", - /** @type {LinkRetrieval} */ - (s, d) => "Replace existing input connections." - ) - static sameNode = _ => new LinkMessageElement( - "ueb-icon-same-node", - /** @type {LinkRetrieval} */ - (s, d) => "Both are on the same node." - ) - static typesIncompatible = _ => new LinkMessageElement( - "ueb-icon-types-incompatible", - /** @type {LinkRetrieval} */ - (s, d) => `${s.getType()} is not compatible with ${d.getType()}.` - ) - - /** @type {String} */ - icon - /** @type {LinkRetrieval} */ - message - /** @type {LinkElement} */ - linkElement - - constructor(icon, message) { - super({}, new LinkMessageTemplate()); - this.icon = icon; - this.message = message; - } - -} - -customElements.define("ueb-link-message", LinkMessageElement); - -// @ts-check - /** * @typedef {import("../../element/PinElement").default} PinElement */ @@ -2934,34 +3010,34 @@ class MouseCreateLink extends IMouseClickDrag { /** @type {(e: MouseEvent) => void} */ #mouseleaveHandler - /** @type {LinkElement} */ + /** @type {LinkElement?} */ link - /** @type {PinElement} */ + /** @type {PinElement?} */ enteredPin linkValid = false constructor(target, blueprint, options) { super(target, blueprint, options); - let self = this; this.#mouseenterHandler = e => { if (!self.enteredPin) { self.linkValid = false; self.enteredPin = /** @type {PinElement} */ (e.target); - const a = self.enteredPin, b = self.target; + const a = self.enteredPin; + const b = self.target; if (a.getNodeElement() == b.getNodeElement()) { - this.setLinkMessage(LinkMessageElement.sameNode()); + self.link.setMessageSameNode(); } else if (a.isOutput() == b.isOutput()) { - this.setLinkMessage(LinkMessageElement.directionsIncompatible()); + self.link.setMessageDirectionsIncompatible(); } else if (a.isOutput() == b.isOutput()) { - this.setLinkMessage(LinkMessageElement.directionsIncompatible()); + self.link.setMessageDirectionsIncompatible(); } else if (self.blueprint.getLinks([a, b]).length) { - this.setLinkMessage(LinkMessageElement.replaceLink()); + self.link.setMessageReplaceLink(); self.linkValid = true; } else { - this.setLinkMessage(LinkMessageElement.correct()); + self.link.setMessageCorrect(); self.linkValid = true; } } @@ -2970,15 +3046,15 @@ class MouseCreateLink extends IMouseClickDrag { if (self.enteredPin == e.target) { self.enteredPin = null; self.linkValid = false; - this.setLinkMessage(LinkMessageElement.placeNode()); + self.link?.setMessagePlaceNode(); } }; } - startDrag() { + startDrag(location) { this.link = new LinkElement(this.target, null); - this.blueprint.nodesContainerElement.prepend(this.link); - this.setLinkMessage(LinkMessageElement.placeNode()); + this.blueprint.linksContainerElement.prepend(this.link); + this.link.setMessagePlaceNode(); this.#listenedPins = this.blueprint.querySelectorAll("ueb-pin"); this.#listenedPins.forEach(pin => { if (pin != this.target) { @@ -2987,7 +3063,7 @@ class MouseCreateLink extends IMouseClickDrag { } }); this.link.startDragging(); - this.link.setDestinationLocation(this.clickedPosition); + this.link.setDestinationLocation(location); } dragTo(location, movement) { @@ -3002,7 +3078,7 @@ class MouseCreateLink extends IMouseClickDrag { if (this.enteredPin && this.linkValid) { this.blueprint.addGraphElement(this.link); this.link.destinationPin = this.enteredPin; - this.link.setLinkMessage(null); + this.link.removeMessage(); this.link.finishDragging(); } else { this.link.finishDragging(); @@ -3012,22 +3088,26 @@ class MouseCreateLink extends IMouseClickDrag { this.link = null; this.#listenedPins = null; } - - setLinkMessage(linkMessage) { - this.link.setLinkMessage(linkMessage); - } } -// @ts-check - /** - * @typedef {import ("../input/IInput").default} IInput + * @typedef {import("../input/IInput").default} IInput * @typedef {import("../element/NodeElement").default} NodeElement * @typedef {import("../element/PinElement").default} PinElement */ class PinTemplate extends ITemplate { + static styles = r$2`` + + /** + * @param {PinElement} pin + */ + connectedCallback(pin) { + super.connectedCallback(pin); + pin.nodeElement = pin.closest("ueb-node"); + } + /** * @param {PinElement} pin * @returns {IInput[]} @@ -3045,20 +3125,20 @@ class PinTemplate extends ITemplate { * @param {PinElement} pin */ render(pin) { - const icon = html` + const icon = $`
${this.renderIcon(pin)}
`; - const content = html` + const content = $`
- ${sanitizeText(pin.getPinDisplayName())} + ${pin.getPinDisplayName()} ${this.renderInput(pin)}
`; - return html` + return $`
- ${pin.isInput() ? icon + content : content + icon} + ${pin.isInput() ? $`${icon}${content}` : $`${content}${icon}`}
` } @@ -3067,42 +3147,24 @@ class PinTemplate extends ITemplate { * @param {PinElement} pin */ renderIcon(pin) { - return '' + return $`` } /** * @param {PinElement} pin */ renderInput(pin) { - return "" + return $`` } /** * @param {PinElement} pin + * @param {Map} changedProperties */ - setup(pin) { - super.setup(pin); - pin.classList.add( - "ueb-node-" + (pin.isInput() ? "input" : pin.isOutput() ? "output" : "hidden"), - "ueb-pin-type-" + sanitizeText(pin.getType()) - ); + firstUpdated(pin, changedProperties) { + super.firstUpdated(pin, changedProperties); pin.dataset.id = pin.GetPinIdValue(); - if (pin.entity.bAdvancedView) { - pin.dataset.advancedView = "true"; - } pin.clickableElement = pin; - pin.nodeElement = pin.closest("ueb-node"); - } - - /** - * @param {PinElement} pin - */ - applyConnected(pin) { - if (pin.isLinked()) { - pin.classList.add("ueb-pin-fill"); - } else { - pin.classList.remove("ueb-pin-fill"); - } } /** @@ -3110,14 +3172,14 @@ class PinTemplate extends ITemplate { */ getLinkLocation(pin) { const rect = pin.querySelector(".ueb-pin-icon").getBoundingClientRect(); - return pin.blueprint.compensateTranslation(Utility.convertLocation( + const location = Utility.convertLocation( [(rect.left + rect.right) / 2, (rect.top + rect.bottom) / 2], - pin.blueprint.gridElement)) + pin.blueprint.gridElement + ); + return pin.blueprint.compensateTranslation(location) } } -// @ts-check - /** * @typedef {import("../element/PinElement").default} PinElement */ @@ -3132,21 +3194,18 @@ class IInputPinTemplate extends PinTemplate { /** * @param {PinElement} pin + * @param {Map} changedProperties */ - setup(pin) { - super.setup(pin); - this.#inputContentElements = /** @type {HTMLElement[]} */( - [...pin.querySelectorAll(".ueb-pin-input-content")] - ); + firstUpdated(pin, changedProperties) { + super.firstUpdated(pin, changedProperties); + this.#inputContentElements = [...pin.querySelectorAll(".ueb-pin-input-content")]; if (this.#inputContentElements.length) { - this.setInputs(pin, [ - Utility.decodeInputString(/** @type {String} */(pin.entity.DefaultValue)) - ]); + this.setInputs(pin, this.getInputs(pin)); let self = this; this.onFocusHandler = _ => pin.blueprint.dispatchEditTextEvent(true); this.onFocusOutHandler = e => { e.preventDefault(); - document.getSelection().removeAllRanges(); // Deselect text inside the input + document.getSelection()?.removeAllRanges(); // Deselect text inside the input self.setInputs(pin, this.getInputs(pin)); pin.blueprint.dispatchEditTextEvent(false); }; @@ -3189,6 +3248,7 @@ class IInputPinTemplate extends PinTemplate { * @param {PinElement} pin */ getInputs(pin) { + Utility.decodeInputString(pin.entity.DefaultValue); return this.#inputContentElements.map(element => // Faster than innerText which causes reflow element.innerHTML.replaceAll("
", "\n")) @@ -3201,7 +3261,7 @@ class IInputPinTemplate extends PinTemplate { setInputs(pin, values = [], updateDefaultValue = true) { this.#inputContentElements.forEach((element, i) => element.innerText = values[i]); if (updateDefaultValue) { - pin.entity.DefaultValue = this.getInput(pin); + pin.setDefaultValue(values.reduce((acc, cur) => acc + cur, "")); } } @@ -3210,18 +3270,16 @@ class IInputPinTemplate extends PinTemplate { */ renderInput(pin) { if (pin.isInput()) { - return html` + return $`
- +
` } - return "" + return $`` } } -// @ts-check - /** * @typedef {import("../element/PinElement").default} PinElement */ @@ -3233,9 +3291,10 @@ class BoolPinTemplate extends IInputPinTemplate { /** * @param {PinElement} pin + * @param {Map} changedProperties */ - setup(pin) { - super.setup(pin); + firstUpdated(pin, changedProperties) { + super.firstUpdated(pin, changedProperties); this.#input = pin.querySelector(".ueb-pin-input"); let self = this; this.onChangeHandler = _ => pin.entity.DefaultValue = self.#input.checked ? "true" : "false"; @@ -3257,30 +3316,19 @@ class BoolPinTemplate extends IInputPinTemplate { return [this.#input.checked ? "true" : "false"] } - /** - * @param {PinElement} pin - * @param {String[]?} value - */ - setInputs(pin, value = []) { - pin.entity.DefaultValue = value.length ? value[0] : this.getInput(pin); - this.#input.checked = pin.entity.DefaultValue == "true"; - } - /** * @param {PinElement} pin */ renderInput(pin) { if (pin.isInput()) { - return html` - + return $` + ` } return super.renderInput(pin) } } -// @ts-check - /** * @typedef {import("../element/PinElement").default} PinElement */ @@ -3291,31 +3339,19 @@ class ExecPinTemplate extends PinTemplate { * @param {PinElement} pin */ renderIcon(pin) { - return html` + return $` - + ` } } -// @ts-check - /** * @typedef {import("../element/PinElement").default} PinElement - * @typedef {import("../entity/LinearColorEntity").default} LinearColorEntity)} + * @typedef {import("../entity/LinearColorEntity").default} LinearColorEntity} */ class LinearColorPinTemplate extends IInputPinTemplate { @@ -3325,11 +3361,11 @@ class LinearColorPinTemplate extends IInputPinTemplate { /** * @param {PinElement} pin + * @param {Map} changedProperties */ - setup(pin) { - super.setup(pin); + firstUpdated(pin, changedProperties) { + super.firstUpdated(pin, changedProperties); this.#input = pin.querySelector(".ueb-pin-input"); - this.#input.dataset.linearColor = /** @type {LinearColorEntity} */(pin.entity.DefaultValue).toString(); } /** @@ -3341,7 +3377,7 @@ class LinearColorPinTemplate extends IInputPinTemplate { /** * @param {PinElement} pin - * @param {String[]?} value + * @param {String[]} value */ setInputs(pin, value = []) { } @@ -3351,16 +3387,14 @@ class LinearColorPinTemplate extends IInputPinTemplate { */ renderInput(pin) { if (pin.isInput()) { - return html` - + return $` + ` } return super.renderInput(pin) } } -// @ts-check - /** * @typedef {import("../element/PinElement").default} PinElement */ @@ -3372,9 +3406,10 @@ class NamePinTemplate extends IInputPinTemplate { /** * @param {PinElement} pin + * @param {Map} changedProperties */ - setup(pin) { - super.setup(pin); + firstUpdated(pin, changedProperties) { + super.firstUpdated(pin, changedProperties); this.onInputHandler = e => { e.stopPropagation(); if ( @@ -3418,8 +3453,6 @@ class NamePinTemplate extends IInputPinTemplate { } } -// @ts-check - /** * @typedef {import("../element/PinElement").default} PinElement */ @@ -3435,7 +3468,7 @@ class RealPinTemplate extends IInputPinTemplate { let updateDefaultValue = true; if (isNaN(num)) { num = parseFloat(pin.entity.DefaultValue != "" - ? pin.entity.DefaultValue + ? /** @type {String} */(pin.entity.DefaultValue) : pin.entity.AutogeneratedDefaultValue); } if (isNaN(num)) { @@ -3447,8 +3480,6 @@ class RealPinTemplate extends IInputPinTemplate { } } -// @ts-check - /** * @typedef {import("../element/PinElement").default} PinElement */ @@ -3457,14 +3488,13 @@ class StringPinTemplate extends IInputPinTemplate { /** * @param {PinElement} pin + * @param {Map} changedProperties */ - setup(pin) { - super.setup(pin); + firstUpdated(pin, changedProperties) { + super.firstUpdated(pin, changedProperties); } } -// @ts-check - /** * @typedef {import("../entity/GuidEntity").default} GuidEntity * @typedef {import("../entity/PinEntity").default} PinEntity @@ -3488,6 +3518,46 @@ class PinElement extends IElement { } } + static properties = { + advancedView: { + type: String, + attribute: "data-advanced-view", + reflect: true, + }, + color: { + type: LinearColorEntity, + converter: { + fromAttribute: (value, type) => { + return ISerializer.grammar.LinearColorFromAnyColor.parse(value).value + }, + toAttribute: (value, type) => { + return Utility.printLinearColor(value) + }, + }, + reflect: true, + }, + defaultValue: { + type: String, + attribute: false, + }, + isLinked: { + type: Boolean, + converter: Utility.booleanConverter, + attribute: "data-linked", + reflect: true, + }, + pinType: { + type: String, + attribute: "data-type", + reflect: true, + }, + pinDirection: { + type: String, + attribute: "data-direction", + reflect: true, + }, + } + /** * @param {PinEntity} pinEntity * @return {PinTemplate} @@ -3500,8 +3570,6 @@ class PinElement extends IElement { return result ?? PinTemplate } - #color = "" - /** @type {NodeElement} */ nodeElement @@ -3510,20 +3578,42 @@ class PinElement extends IElement { connections = 0 + get defaultValue() { + return this.unreactiveDefaultValue + } + set defaultValue(value) { + let oldValue = this.unreactiveDefaultValue; + this.unreactiveDefaultValue = value; + this.requestUpdate("defaultValue", oldValue); + } + /** * @param {PinEntity} entity */ constructor(entity) { super( entity, - // @ts-expect-error new (PinElement.getTypeTemplate(entity))() ); + this.advancedView = entity.bAdvancedView; + this.unreactiveDefaultValue = entity.getDefaultValue(); + this.pinType = this.entity.getType(); + this.color = this.constructor.properties.color.converter.fromAttribute(Configuration.pinColor[this.pinType].toString()); + this.isLinked = false; + this.pinDirection = entity.isInput() ? "input" : entity.isOutput() ? "output" : "hidden"; + + this.entity.subscribe("DefaultValue", value => this.defaultValue = value.toString()); + this.entity.subscribe("PinToolTip", value => { + let matchResult = value.match(/\s*(.+?(?=\n)|.+\S)\s*/); + if (matchResult) { + return Utility.formatStringName(matchResult[1]) + } + return Utility.formatStringName(this.entity.PinName) + }); } connectedCallback() { super.connectedCallback(); - this.#color = window.getComputedStyle(this).getPropertyValue("--ueb-pin-color"); } /** @return {GuidEntity} */ @@ -3543,9 +3633,6 @@ class PinElement extends IElement { return this.entity.PinName } - /** - * @returns {String} - */ getPinDisplayName() { let matchResult = null; if ( @@ -3566,22 +3653,10 @@ class PinElement extends IElement { return this.entity.isOutput() } - isLinked() { - return this.entity.isLinked() - } - - getType() { - return this.entity.getType() - } - getClickableElement() { return this.clickableElement } - getColor() { - return this.#color - } - getLinkLocation() { return this.template.getLinkLocation(this) } @@ -3590,13 +3665,17 @@ class PinElement extends IElement { * @returns {NodeElement} */ getNodeElement() { - return this.closest("ueb-node") + return this.nodeElement } getLinks() { return this.entity.LinkedTo ?? [] } + setDefaultValue(value) { + this.entity.DefaultValue = value; + } + sanitizeLinks() { this.entity.LinkedTo = this.getLinks().filter(pinReference => { let pin = this.blueprint.getPin(pinReference); @@ -3614,16 +3693,16 @@ class PinElement extends IElement { * @param {PinElement} targetPinElement */ linkTo(targetPinElement) { - this.entity.linkTo(targetPinElement.nodeElement.getNodeName(), targetPinElement.entity); - this.template.applyConnected(this); + this.entity.linkTo(targetPinElement.getNodeElement().getNodeName(), targetPinElement.entity); + this.isLinked = this.entity.isLinked(); } /** * @param {PinElement} targetPinElement */ unlinkFrom(targetPinElement) { - this.entity.unlinkFrom(targetPinElement.nodeElement.getNodeName(), targetPinElement.entity); - this.template.applyConnected(this); + this.entity.unlinkFrom(targetPinElement.getNodeElement().getNodeName(), targetPinElement.entity); + this.isLinked = this.entity.isLinked(); } /** @@ -3632,8 +3711,8 @@ class PinElement extends IElement { */ redirectLink(originalPinElement, newReference) { const index = this.entity.LinkedTo.findIndex(pinReference => - pinReference.objectName.toString() == originalPinElement.getPinName() - && pinReference.pinGuid == originalPinElement.entity.PinId + pinReference.objectName.toString() == originalPinElement.getNodeElement().getNodeName() + && pinReference.pinGuid.valueOf() == originalPinElement.entity.PinId.valueOf() ); if (index >= 0) { this.entity.LinkedTo[index] = newReference; @@ -3645,8 +3724,6 @@ class PinElement extends IElement { customElements.define("ueb-pin", PinElement); -// @ts-check - /** * @typedef {import("../../Blueprint").default} Blueprint * @typedef {import("../../element/ISelectableDraggableElement").default} ISelectableDraggableElement @@ -3659,7 +3736,7 @@ class MouseMoveNodes extends IMouseClickDrag { constructor(target, blueprint, options) { super(target, blueprint, options); - this.stepSize = parseInt(options?.stepSize ?? this.blueprint.gridSize); + this.stepSize = parseInt(options?.stepSize ?? Configuration.gridSize); this.mouseLocation = [0, 0]; } @@ -3674,9 +3751,10 @@ class MouseMoveNodes 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(this.target.location, this.stepSize)] - : [location, this.target.location]; + ? [Utility.snapToGrid(location, this.stepSize), Utility.snapToGrid(initialTargetLocation, this.stepSize)] + : [location, initialTargetLocation]; const d = [ mouseLocation[0] - this.mouseLocation[0], mouseLocation[1] - this.mouseLocation[1] @@ -3687,8 +3765,8 @@ class MouseMoveNodes extends IMouseClickDrag { } // Make sure it snaps on the grid - d[0] += targetLocation[0] - this.target.location[0]; - d[1] += targetLocation[1] - this.target.location[1]; + d[0] += targetLocation[0] - this.target.locationX; + d[1] += targetLocation[1] - this.target.locationY; this.target.dispatchDragEvent(d); @@ -3704,19 +3782,18 @@ class MouseMoveNodes extends IMouseClickDrag { } } -// @ts-check - /** * @typedef {import("../element/ISelectableDraggableElement").default} ISelectableDraggableElement */ /** - * @extends {ITemplate} + * @template {ISelectableDraggableElement} T + * @extends {ITemplate} */ class SelectableDraggableTemplate extends ITemplate { /** - * @param {ISelectableDraggableElement} element + * @param {T} element */ createInputObjects(element) { return [ @@ -3728,27 +3805,31 @@ class SelectableDraggableTemplate extends ITemplate { } /** - * @param {ISelectableDraggableElement} element + * @param {T} element + * @param {Map} changedProperties */ - applyLocation(element) { - element.style.setProperty("--ueb-position-x", sanitizeText(element.location[0])); - element.style.setProperty("--ueb-position-y", sanitizeText(element.location[1])); + 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}`); + } } /** - * @param {ISelectableDraggableElement} element + * @param {T} element + * @param {Map} changedProperties */ - applySelected(element) { - if (element.selected) { - element.classList.add("ueb-selected"); - } else { - element.classList.remove("ueb-selected"); + firstUpdated(element, changedProperties) { + super.firstUpdated(element, changedProperties); + if (element.selected && !element.listeningDrag) { + element.setSelected(true); } } } -// @ts-check - /** * @typedef {import("../element/NodeElement").default} NodeElement */ @@ -3758,19 +3839,17 @@ class NodeTemplate extends SelectableDraggableTemplate { toggleAdvancedDisplayHandler /** - * Computes the html content of the target element. - * @param {NodeElement} node Graph node element - * @returns The result html + * @param {NodeElement} node */ render(node) { - return html` + return $`
- ${sanitizeText(node.getNodeDisplayName())} + ${node.nodeDisplayName}
@@ -3778,11 +3857,11 @@ class NodeTemplate extends SelectableDraggableTemplate {
- ${node.entity.EnabledState?.toString() == "DevelopmentOnly" ? html` + ${node.enabledState?.toString() == "DevelopmentOnly" ? $`
Development Only
- ` : ""} - ${node.entity.AdvancedPinDisplay ? html` -
+ ` : $``} + ${node.advancedPinDisplay ? $` +
- +
- ` : ""} + ` : $``}
` @@ -3810,51 +3881,25 @@ class NodeTemplate extends SelectableDraggableTemplate { /** * @param {NodeElement} node + * @param {Map} changedProperties */ - setup(node) { - super.setup(node); - node.dataset.name = sanitizeText(node.entity.getObjectName()); - if (node.entity.EnabledState) { - node.dataset.enabledState = node.entity.EnabledState.toString(); - } - if (node.selected) { - node.classList.add("ueb-selected"); - } - this.applyAdvancedPinDisplay(node); - node.style.setProperty("--ueb-position-x", sanitizeText(node.location[0])); - node.style.setProperty("--ueb-position-y", sanitizeText(node.location[1])); - /** @type {HTMLElement} */ - let inputContainer = node.querySelector(".ueb-node-inputs"); - /** @type {HTMLElement} */ - let outputContainer = node.querySelector(".ueb-node-outputs"); - let pins = node.getPinEntities(); - pins.filter(v => v.isInput()).forEach(v => inputContainer.appendChild(new PinElement(v))); - pins.filter(v => v.isOutput()).forEach(v => outputContainer.appendChild(new PinElement(v))); + async firstUpdated(node, changedProperties) { + super.firstUpdated(node, changedProperties); + const inputContainer = /** @type {HTMLElement} */(node.querySelector(".ueb-node-inputs")); + const outputContainer = /** @type {HTMLElement} */(node.querySelector(".ueb-node-outputs")); + Promise.all(node.getPinElements().map(n => n.updateComplete)).then(() => node.dispatchReflowEvent()); + node.getPinElements().forEach(p => { + if (p.isInput()) { + inputContainer.appendChild(p); + } else if (p.isOutput()) { + outputContainer.appendChild(p); + } + }); this.toggleAdvancedDisplayHandler = _ => { node.toggleShowAdvancedPinDisplay(); + node.addNextUpdatedCallbacks(() => node.dispatchReflowEvent(), true); }; - if (node.entity.AdvancedPinDisplay) { - node.querySelector(".ueb-node-expansion").addEventListener("click", this.toggleAdvancedDisplayHandler); - } - } - - /** - * @param {NodeElement} node - */ - applyAdvancedPinDisplay(node) { - if (node.entity.AdvancedPinDisplay) { - node.dataset.advancedDisplay = node.entity.AdvancedPinDisplay.toString(); - } - } - - /** - * @param {NodeElement} node - */ - applyRename(node) { - const nodeName = node.entity.getObjectName(); - node.dataset.name = sanitizeText(nodeName); - // @ts-expect-error - node.querySelector(".ueb-node-name-text").innerText = sanitizeText(node.getNodeDisplayName()); + node.nodeNameElement = /** @type {HTMLElement} */(node.querySelector(".ueb-node-name-text")); } /** @@ -3866,20 +3911,69 @@ class NodeTemplate extends SelectableDraggableTemplate { } } -// @ts-check - /** * @extends {ISelectableDraggableElement} */ class NodeElement extends ISelectableDraggableElement { + static properties = { + ...ISelectableDraggableElement.properties, + name: { + type: String, + attribute: "data-name", + reflect: true, + }, + advancedPinDisplay: { + type: String, + attribute: "data-advanced-display", + converter: IdentifierEntity.attributeConverter, + reflect: true, + }, + enabledState: { + type: String, + attribute: "data-enabled-state", + reflect: true, + }, + nodeDisplayName: { + type: String, + attribute: false, + }, + } + + get blueprint() { + return super.blueprint + } + set blueprint(v) { + super.blueprint = v; + this.#pins.forEach(p => p.blueprint = v); + } + + /** @type {HTMLElement} */ + #nodeNameElement + get nodeNameElement() { + return this.#nodeNameElement + } + set nodeNameElement(value) { + this.#nodeNameElement = value; + } + + #pins + /** * @param {ObjectEntity} entity */ constructor(entity) { super(entity, new NodeTemplate()); + this.#pins = this.getPinEntities().filter(v => !v.isHidden()).map(v => new PinElement(v)); + this.#pins.forEach(pin => pin.nodeElement = this); + this.name = entity.getObjectName(); + this.advancedPinDisplay = entity.AdvancedPinDisplay?.toString(); + this.enabledState = entity.EnabledState; + this.nodeDisplayName = entity.getDisplayName(); this.dragLinkObjects = []; super.setLocation([this.entity.NodePosX.value, this.entity.NodePosY.value]); + this.entity.subscribe("AdvancedPinDisplay", value => this.advancedPinDisplay = value); + this.entity.subscribe("Name", value => this.name = value); } /** @@ -3929,11 +4023,10 @@ class NodeElement extends ISelectableDraggableElement { } } this.entity.Name = name; - this.template.applyRename(this); } getPinElements() { - return this.template.getPinElements(this) + return this.#pins } /** @@ -3945,9 +4038,7 @@ class NodeElement extends ISelectableDraggableElement { setLocation(value = [0, 0]) { let nodeType = this.entity.NodePosX.constructor; - // @ts-expect-error this.entity.NodePosX = new nodeType(value[0]); - // @ts-expect-error this.entity.NodePosY = new nodeType(value[1]); super.setLocation(value); } @@ -3960,20 +4051,25 @@ class NodeElement extends ISelectableDraggableElement { this.dispatchEvent(deleteEvent); } + dispatchReflowEvent() { + let reflowEvent = new CustomEvent(Configuration.nodeReflowEventName, { + bubbles: true, + cancelable: true + }); + this.dispatchEvent(reflowEvent); + } + setShowAdvancedPinDisplay(value) { this.entity.AdvancedPinDisplay = new IdentifierEntity(value ? "Shown" : "Hidden"); - this.template.applyAdvancedPinDisplay(this); } toggleShowAdvancedPinDisplay() { - this.setShowAdvancedPinDisplay(this.entity.AdvancedPinDisplay.value != "Shown"); + this.setShowAdvancedPinDisplay(this.entity.AdvancedPinDisplay?.toString() != "Shown"); } } customElements.define("ueb-node", NodeElement); -// @ts-check - class Paste extends IInput { /** @type {(e: ClipboardEvent) => void} */ @@ -4002,8 +4098,8 @@ class Paste extends IInput { let count = 0; let nodes = this.serializer.readMultiple(value).map(entity => { let node = new NodeElement(entity); - top += node.location[1]; - left += node.location[0]; + top += node.locationY; + left += node.locationX; ++count; return node }); @@ -4019,16 +4115,14 @@ class Paste extends IInput { mousePosition[1] - top, ]; node.addLocation(locationOffset); - node.setSelected(true); node.snapToGrid(); + node.setSelected(true); }); this.blueprint.addGraphElement(...nodes); return true } } -// @ts-check - class Select extends IMouseClickDrag { constructor(target, blueprint, options) { @@ -4037,16 +4131,16 @@ class Select extends IMouseClickDrag { } startDrag() { - this.selectorElement.startSelecting(this.clickedPosition); + this.selectorElement.beginSelect(this.clickedPosition); } dragTo(location, movement) { - this.selectorElement.doSelecting(location); + this.selectorElement.selectTo(location); } endDrag() { if (this.started) { - this.selectorElement.finishSelecting(); + this.selectorElement.endSelect(); } } @@ -4057,8 +4151,6 @@ class Select extends IMouseClickDrag { } } -// @ts-check - class OrderedIndexArray { /** @@ -4199,8 +4291,6 @@ class OrderedIndexArray { } } -// @ts-check - /** * @typedef {{ * primaryInf: Number, @@ -4364,93 +4454,59 @@ class FastSelectionModel { } } -// @ts-check - /** * @typedef {import("../element/SelectorElement").default} SelectorElement */ -class SelectorTemplate extends ITemplate { +class SelectorTemplate extends IFromToPositionedTemplate { - /** - * Applies the style to the element. - * @param {SelectorElement} selector Selector element - */ - setup(selector) { - super.setup(selector); - this.applyFinishSelecting(selector); - } - - /** - * Applies the style relative to selection beginning. - * @param {SelectorElement} selector Selector element - */ - applyStartSelecting(selector, initialPosition) { - // Set initial position - selector.style.setProperty("--ueb-from-x", sanitizeText(initialPosition[0])); - selector.style.setProperty("--ueb-from-y", sanitizeText(initialPosition[1])); - // Final position coincide with the initial position, at the beginning of selection - selector.style.setProperty("--ueb-to-x", sanitizeText(initialPosition[0])); - selector.style.setProperty("--ueb-to-y", sanitizeText(initialPosition[1])); - selector.blueprint.dataset.selecting = "true"; - } - - /** - * Applies the style relative to selection. - * @param {SelectorElement} selector Selector element - */ - applyDoSelecting(selector, finalPosition) { - selector.style.setProperty("--ueb-to-x", sanitizeText(finalPosition[0])); - selector.style.setProperty("--ueb-to-y", sanitizeText(finalPosition[1])); - } - - /** - * Applies the style relative to selection finishing. - * @param {SelectorElement} selector Selector element - */ - applyFinishSelecting(selector) { - selector.blueprint.dataset.selecting = "false"; - } } -// @ts-check - /** - * @extends {IElement} + * @extends {IFromToPositionedElement} */ -class SelectorElement extends IElement { +class SelectorElement extends IFromToPositionedElement { constructor() { super({}, new SelectorTemplate()); this.selectionModel = null; } - /** * @param {Number[]} initialPosition */ - startSelecting(initialPosition) { - this.template.applyStartSelecting(this, initialPosition); - this.selectionModel = new FastSelectionModel(initialPosition, this.blueprint.getNodes(), this.blueprint.nodeBoundariesSupplier, this.blueprint.nodeSelectToggleFunction); + beginSelect(initialPosition) { + this.blueprint.selecting = true; + this.setBothLocations(initialPosition); + this.selectionModel = new FastSelectionModel( + initialPosition, + this.blueprint.getNodes(), + this.blueprint.nodeBoundariesSupplier, + this.blueprint.nodeSelectToggleFunction + ); } /** * @param {Number[]} finalPosition */ - doSelecting(finalPosition) { - this.template.applyDoSelecting(this, finalPosition); - this.selectionModel.selectTo(finalPosition); + selectTo(finalPosition) { + /** @type {FastSelectionModel} */ (this.selectionModel) + .selectTo(finalPosition); + this.finaPositionX = finalPosition[0]; + this.finaPositionY = finalPosition[1]; } - finishSelecting() { - this.template.applyFinishSelecting(this); + endSelect() { + this.blueprint.selecting = false; this.selectionModel = null; + this.initialPositionX = 0; + this.initialPositionY = 0; + this.finaPositionX = 0; + this.finaPositionY = 0; } } customElements.define("ueb-selector", SelectorElement); -// @ts-check - class Unfocus extends IInput { /** @type {(e: MouseEvent) => void} */ @@ -4486,8 +4542,6 @@ class Unfocus extends IInput { } } -// @ts-check - /** * @typedef {import("../Blueprint").default} Blueprint * @typedef {import("../element/PinElement").default} PinElement @@ -4496,6 +4550,33 @@ class Unfocus extends IInput { class BlueprintTemplate extends ITemplate { + static styleVariables = { + "--ueb-font-size": `${Configuration.fontSize}`, + "--ueb-grid-axis-line-color": `${Configuration.gridAxisLineColor}`, + "--ueb-grid-expand": `${Configuration.expandGridSize}px`, + "--ueb-grid-line-color": `${Configuration.gridLineColor}`, + "--ueb-grid-line-width": `${Configuration.gridLineWidth}px`, + "--ueb-grid-set-line-color": `${Configuration.gridSetLineColor}`, + "--ueb-grid-set": `${Configuration.gridSet}`, + "--ueb-grid-size": `${Configuration.gridSize}px`, + "--ueb-link-min-width": `${Configuration.linkMinWidth}`, + "--ueb-node-radius": `${Configuration.nodeRadius}px`, + "--ueb-pin-bool-color": `${Configuration.pinColor.bool}`, + "--ueb-pin-default-color": `${Configuration.pinColor.default}`, + "--ueb-pin-exec-color": `${Configuration.pinColor.exec}`, + "--ueb-pin-name-color": `${Configuration.pinColor.name}`, + "--ueb-pin-real-color": `${Configuration.pinColor.real}`, + "--ueb-pin-string-color": `${Configuration.pinColor.string}`, + "--ueb-pin-struct-color": `${Configuration.pinColor.struct}`, + } + + /** + * @param {Blueprint} blueprint + */ + constructed(blueprint) { + blueprint.style.cssText = Object.entries(BlueprintTemplate.styleVariables).map(([k, v]) => `${k}:${v};`).join(""); + } + /** * @param {Blueprint} blueprint */ @@ -4527,36 +4608,22 @@ class BlueprintTemplate extends ITemplate { } /** - * @param {Blueprint} element + * Computes the html content of the target element. + * @param {Blueprint} element Target element + * @returns The computed html */ - header(element) { - return html` + render(element) { + return $`
1:1
- ` - } - - /** - * @param {Blueprint} element - */ - overlay(element) { - return html`
- ` - } - - /** - * @param {Blueprint} element - */ - viewport(element) { - return html`
@@ -4568,106 +4635,47 @@ class BlueprintTemplate extends ITemplate { } /** - * Computes the html content of the target element. - * @param {Blueprint} element Target element - * @returns The computed html + * @param {Blueprint} blueprint + * @param {Map} changedProperties */ - render(element) { - return html` - ${this.header(element)} - ${this.overlay(element)} - ${this.viewport(element)} - ` - } - - /** - * Applies the style to the element. - * @param {Blueprint} blueprint The blueprint element - */ - setup(blueprint) { - super.setup(blueprint); - blueprint.classList.add("ueb", `ueb-zoom-${blueprint.zoom}`); - Object.entries({ - "--ueb-font-size": sanitizeText(Configuration.fontSize), - "--ueb-grid-size": `${sanitizeText(Configuration.gridSize)}px`, - "--ueb-grid-line-width": `${sanitizeText(Configuration.gridLineWidth)}px`, - "--ueb-grid-line-color": sanitizeText(Configuration.gridLineColor), - "--ueb-grid-set": sanitizeText(Configuration.gridSet), - "--ueb-grid-set-line-color": sanitizeText(Configuration.gridSetLineColor), - "--ueb-grid-axis-line-color": sanitizeText(Configuration.gridAxisLineColor), - "--ueb-node-radius": `${sanitizeText(Configuration.nodeRadius)}px`, - "--ueb-link-min-width": sanitizeText(Configuration.linkMinWidth) - }).forEach(entry => blueprint.style.setProperty(entry[0], entry[1])); - blueprint.headerElement = blueprint.querySelector('.ueb-viewport-header'); - blueprint.overlayElement = blueprint.querySelector('.ueb-viewport-overlay'); - blueprint.viewportElement = blueprint.querySelector('.ueb-viewport-body'); + firstUpdated(blueprint, changedProperties) { + super.firstUpdated(blueprint, changedProperties); + blueprint.headerElement = /** @type {HTMLElement} */(blueprint.querySelector('.ueb-viewport-header')); + blueprint.overlayElement = /** @type {HTMLElement} */(blueprint.querySelector('.ueb-viewport-overlay')); + blueprint.viewportElement = /** @type {HTMLElement} */(blueprint.querySelector('.ueb-viewport-body')); blueprint.selectorElement = new SelectorElement(); - blueprint.gridElement = blueprint.viewportElement.querySelector(".ueb-grid"); - blueprint.querySelector(".ueb-grid-content").append(blueprint.selectorElement); - blueprint.linksContainerElement = blueprint.querySelector("[data-links]"); + blueprint.querySelector(".ueb-grid-content")?.append(blueprint.selectorElement); + blueprint.gridElement = /** @type {HTMLElement} */(blueprint.viewportElement.querySelector(".ueb-grid")); + blueprint.linksContainerElement = /** @type {HTMLElement} */(blueprint.querySelector("[data-links]")); blueprint.linksContainerElement.append(...blueprint.getLinks()); - blueprint.nodesContainerElement = blueprint.querySelector("[data-nodes]"); + blueprint.nodesContainerElement = /** @type {HTMLElement} */(blueprint.querySelector("[data-nodes]")); blueprint.nodesContainerElement.append(...blueprint.getNodes()); - this.applyEndDragScrolling(blueprint); + blueprint.viewportElement.scroll(Configuration.expandGridSize, Configuration.expandGridSize); } - /** - * Applies the style to the element. - * @param {Blueprint} blueprint The blueprint element - */ - applyZoom(blueprint, newZoom) { - blueprint.classList.remove("ueb-zoom-" + sanitizeText(blueprint.zoom)); - blueprint.classList.add("ueb-zoom-" + sanitizeText(newZoom)); - } /** - * Applies the style to the element. - * @param {Blueprint} blueprint The blueprint element + * @param {Blueprint} blueprint + * @param {Map} changedProperties */ - applyExpand(blueprint) { - blueprint.gridElement.style.setProperty("--ueb-additional-x", sanitizeText(blueprint.additional[0])); - blueprint.gridElement.style.setProperty("--ueb-additional-y", sanitizeText(blueprint.additional[1])); - } - - /** - * Applies the style to the element. - * @param {Blueprint} blueprint The blueprint element - */ - applyTranlate(blueprint) { - blueprint.gridElement.style.setProperty("--ueb-translate-x", sanitizeText(blueprint.translateValue[0])); - blueprint.gridElement.style.setProperty("--ueb-translate-y", sanitizeText(blueprint.translateValue[1])); - } - - /** - * Applies the style to the element. - * @param {Blueprint} blueprint The blueprint element - */ - applyStartDragScrolling(blueprint) { - blueprint.dataset.dragScrolling = "true"; - } - - /** - * Applies the style to the element. - * @param {Blueprint} blueprint The blueprint element - */ - applyEndDragScrolling(blueprint) { - blueprint.dataset.dragScrolling = "false"; + updated(blueprint, changedProperties) { + super.updated(blueprint, changedProperties); + if (changedProperties.has("scrollX") || changedProperties.has("scrollY")) { + blueprint.viewportElement.scroll(blueprint.scrollX, blueprint.scrollY); + } } /** * @param {Blueprint} blueprint * @param {PinReferenceEntity} pinReference - * @returns {PinElement} */ getPin(blueprint, pinReference) { - return blueprint.querySelector( + return /** @type {PinElement} */(blueprint.querySelector( `ueb-node[data-name="${pinReference.objectName}"] ueb-pin[data-id="${pinReference.pinGuid}"]` - ) + )) } } -// @ts-check - /** * @typedef {import("./element/PinElement").default} PinElement * @typedef {import("./entity/GuidEntity").default} GuidEntity @@ -4679,27 +4687,60 @@ class BlueprintTemplate extends ITemplate { */ class Blueprint extends IElement { - /** @type {Number[]} */ - #additional - get additional() { - return this.#additional - } - set additional(value) { - value[0] = Math.abs(value[0]); - value[1] = Math.abs(value[1]); - } - /** @type {Number[]} */ - #translateValue - get translateValue() { - return this.#translateValue - } - set translateValue(value) { - this.#translateValue = value; + static properties = { + selecting: { + type: Boolean, + attribute: "data-selecting", + reflect: true, + converter: Utility.booleanConverter, + }, + scrolling: { + type: Boolean, + attribute: "data-scrolling", + reflect: true, + converter: Utility.booleanConverter, + }, + focused: { + type: Boolean, + attribute: "data-focused", + reflect: true, + converter: Utility.booleanConverter, + }, + zoom: { + type: Number, + attribute: "data-zoom", + reflect: true, + }, + scrollX: { + type: Number, + attribute: false, + }, + scrollY: { + type: Number, + attribute: false, + }, + additionalX: { + type: Number, + attribute: false, + }, + additionalY: { + type: Number, + attribute: false, + }, + translateX: { + type: Number, + attribute: false, + }, + translateY: { + type: Number, + attribute: false, + }, } + + static styles = BlueprintTemplate.styles + /** @type {Map} */ #nodeNameCounter = new Map() - /** @type {Number} */ - gridSize /** @type {NodeElement[]}" */ nodes = [] /** @type {LinkElement[]}" */ @@ -4707,21 +4748,19 @@ class Blueprint extends IElement { /** @type {Number[]} */ mousePosition = [0, 0] /** @type {HTMLElement} */ - gridElement = null + gridElement /** @type {HTMLElement} */ - viewportElement = null + viewportElement /** @type {HTMLElement} */ - overlayElement = null + overlayElement /** @type {SelectorElement} */ - selectorElement = null + selectorElement /** @type {HTMLElement} */ - linksContainerElement = null + linksContainerElement /** @type {HTMLElement} */ - nodesContainerElement = null - /** @type {Number} */ - zoom = 0 + nodesContainerElement /** @type {HTMLElement} */ - headerElement = null + headerElement focused = false nodeBoundariesSupplier = node => { let rect = node.getBoundingClientRect(); @@ -4745,36 +4784,14 @@ class Blueprint extends IElement { */ constructor(settings = new Configuration()) { super({}, new BlueprintTemplate()); - /** @type {Number} */ - this.gridSize = Configuration.gridSize; - /** @type {Number[]} */ - this.#additional = [2 * Configuration.expandGridSize, 2 * Configuration.expandGridSize]; - /** @type {Number[]} */ - this.#translateValue = [Configuration.expandGridSize, Configuration.expandGridSize]; - } - - /** - * @param {Number} x - * @param {Number} y - */ - #expand(x, y) { - x = Math.round(x); - y = Math.round(y); - this.additional[0] += x; - this.additional[1] += y; - this.template.applyExpand(this); - } - - /** - * @param {Number} x - * @param {Number} y - */ - #translate(x, y) { - x = Math.round(x); - y = Math.round(y); - this.translateValue[0] += x; - this.translateValue[1] += y; - this.template.applyTranlate(this); + this.selecting = false; + this.scrolling = false; + this.focused = false; + this.zoom = 0; + this.scrollX = Configuration.expandGridSize; + this.scrollY = Configuration.expandGridSize; + this.translateX = Configuration.expandGridSize; + this.translateY = Configuration.expandGridSize; } getGridDOMElement() { @@ -4786,57 +4803,34 @@ class Blueprint extends IElement { } getScroll() { - return [this.viewportElement.scrollLeft, this.viewportElement.scrollTop] + return [this.scrollX, this.scrollY] } - setScroll(value, smooth = false) { - this.scroll = value; - if (!smooth) { - this.viewportElement.scroll(value[0], value[1]); - } else { - this.viewportElement.scroll({ - left: value[0], - top: value[1], - behavior: "smooth" - }); - } + setScroll([x, y], smooth = false) { + this.scrollX = x; + this.scrollY = y; } scrollDelta(delta, smooth = false) { - const maxScroll = this.getScrollMax(); + const maxScroll = [2 * Configuration.expandGridSize, 2 * Configuration.expandGridSize]; 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] < Configuration.gridExpandThreshold * Configuration.expandGridSize) { // Expand left/top - expand[i] = Configuration.expandGridSize; - direction[i] = -1; - if (maxScroll[i] - finalScroll[i] > Configuration.gridShrinkThreshold * Configuration.expandGridSize) { - shrink[i] = -Configuration.expandGridSize; - } + expand[i] = -1; } else if (delta[i] > 0 && finalScroll[i] > maxScroll[i] - Configuration.gridExpandThreshold * Configuration.expandGridSize) { // Expand right/bottom - expand[i] = Configuration.expandGridSize; - direction[i] = 1; - if (finalScroll[i] > Configuration.gridShrinkThreshold * Configuration.expandGridSize) { - shrink[i] = -Configuration.expandGridSize; - } + expand[i] = 1; } } if (expand[0] != 0 || expand[1] != 0) { - this.seamlessExpand(expand, direction); - direction = [ - -direction[0], - -direction[1] - ]; - this.seamlessExpand(shrink, direction); + this.seamlessExpand(expand); } currentScroll = this.getScroll(); finalScroll = [ @@ -4849,8 +4843,8 @@ class Blueprint extends IElement { scrollCenter() { const scroll = this.getScroll(); const offset = [ - this.translateValue[0] - scroll[0], - this.translateValue[1] - scroll[1] + this.translateX - scroll[0], + this.translateY - scroll[1] ]; const targetOffset = this.getViewportSize().map(size => size / 2); const deltaOffset = [ @@ -4860,10 +4854,6 @@ class Blueprint extends IElement { this.scrollDelta(deltaOffset, true); } - getExpandGridSize() { - return Configuration.expandGridSize - } - getViewportSize() { return [ this.viewportElement.clientWidth, @@ -4883,41 +4873,30 @@ class Blueprint extends IElement { } snapToGrid(location) { - return Utility.snapToGrid(location, this.gridSize) + return Utility.snapToGrid(location, Configuration.gridSize) } /** - * @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) + * @param {Number[]} param0 */ - - /** - * 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]) { - [ - this.viewportElement.scrollLeft, - this.viewportElement.scrollTop - ]; + seamlessExpand([x, y]) { + x = Math.round(x); + y = Math.round(y); 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 - const translate = [0, 0]; - if (directionX < 0) { - this.viewportElement.scrollLeft += x; - translate[0] = scaledX; + { + // 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 + [x, y] = [-x * Configuration.expandGridSize, -y * Configuration.expandGridSize]; + if (x != 0) { + this.scrollX += x; + x /= scale; + } + if (y != 0) { + this.scrollY += y; + y /= scale; + } } - if (directionY < 0) { - this.viewportElement.scrollTop += y; - translate[1] = scaledY; - } - this.#translate(translate[0], translate[1]); + this.translateX += x; + this.translateY += y; } progressiveSnapToGrid(x) { @@ -4934,21 +4913,22 @@ class Blueprint extends IElement { return } let initialScale = this.getScale(); - this.template.applyZoom(this, zoom); this.zoom = zoom; if (center) { - center[0] += this.translateValue[0]; - center[1] += this.translateValue[1]; - let relativeScale = this.getScale() / initialScale; - let newCenter = [ - relativeScale * center[0], - relativeScale * center[1] - ]; - this.scrollDelta([ - (newCenter[0] - center[0]) * initialScale, - (newCenter[1] - center[1]) * initialScale - ]); + requestAnimationFrame(_ => { + center[0] += this.translateX; + center[1] += this.translateY; + let relativeScale = this.getScale() / initialScale; + let newCenter = [ + relativeScale * center[0], + relativeScale * center[1] + ]; + this.scrollDelta([ + (newCenter[0] - center[0]) * initialScale, + (newCenter[1] - center[1]) * initialScale + ]); + }); } } @@ -4957,12 +4937,12 @@ class Blueprint extends IElement { } /** - * @param {Number[]} position + * @param {Number[]} param0 */ - compensateTranslation(position) { - position[0] -= this.translateValue[0]; - position[1] -= this.translateValue[1]; - return position + compensateTranslation([x, y]) { + x -= this.translateX; + y -= this.translateY; + return [x, y] } /** @@ -4982,7 +4962,15 @@ class Blueprint extends IElement { * @param {PinReferenceEntity} pinReference */ getPin(pinReference) { - return this.template.getPin(this, pinReference) + /*let result = this.template.getPin(this, pinReference) + if (result) { + return result + }*/ + return [... this.nodes + //.filter(n => !n.parentNode) + .find(n => pinReference.objectName.toString() == n.getNodeName()) + ?.getPinElements() ?? []] + .find(p => pinReference.pinGuid.toString() == p.GetPinIdValue()) } /** @@ -4997,7 +4985,8 @@ class Blueprint extends IElement { if (a != null && b != null) { return this.links.filter(link => link.sourcePin == a && link.destinationPin == b - || link.sourcePin == b && link.destinationPin == a) + || link.sourcePin == b && link.destinationPin == a + ) } return this.links } @@ -5032,6 +5021,7 @@ class Blueprint extends IElement { */ addGraphElement(...graphElements) { for (let element of graphElements) { + element.blueprint = this; if (element instanceof NodeElement && !this.nodes.includes(element)) { const nodeName = element.entity.getObjectName(); const homonymNode = this.nodes.find(node => node.entity.getObjectName() == nodeName); @@ -5050,7 +5040,9 @@ class Blueprint extends IElement { this.nodesContainerElement?.appendChild(element); } else if (element instanceof LinkElement && !this.links.includes(element)) { this.links.push(element); - this.linksContainerElement?.appendChild(element); + if (this.linksContainerElement && !this.linksContainerElement.contains(element)) { + this.linksContainerElement.appendChild(element); + } } } graphElements.filter(element => element instanceof NodeElement).forEach( @@ -5084,7 +5076,6 @@ class Blueprint extends IElement { } let event = new CustomEvent(value ? "blueprint-focus" : "blueprint-unfocus"); this.focused = value; - this.dataset.focused = this.focused ? "true" : "false"; if (!this.focused) { this.unselectAll(); } @@ -5103,8 +5094,6 @@ class Blueprint extends IElement { customElements.define("ueb-blueprint", Blueprint); -// @ts-check - /** * @typedef {import("../entity/IEntity").default} IEntity */ @@ -5147,8 +5136,6 @@ class GeneralSerializer extends ISerializer { } } -// @ts-check - /** * @typedef {import("../entity/IEntity").default} IEntity */ @@ -5177,8 +5164,6 @@ class CustomSerializer extends GeneralSerializer { } } -// @ts-check - class PinSerializer extends GeneralSerializer { constructor() { @@ -5191,15 +5176,12 @@ class PinSerializer extends GeneralSerializer { */ writeValue(value, fullKey, insideString) { if (value?.constructor === String && fullKey.length == 1 && fullKey[0] == "DefaultValue") { - // @ts-expect-error return `"${Utility.encodeInputString(value)}"` } return super.writeValue(value, fullKey, insideString) } } -// @ts-check - /** * @typedef {import("../entity/IEntity").default} IEntity */ @@ -5228,50 +5210,44 @@ class ToStringSerializer extends GeneralSerializer { } } -// @ts-check - function initializeSerializerFactory() { const bracketsWrapped = v => `(${v})`; - SerializerFactory.registerSerializer( - LinearColorEntity, - new GeneralSerializer(bracketsWrapped, LinearColorEntity) - ); - - SerializerFactory.registerSerializer( - ObjectEntity, - new ObjectSerializer() - ); - - SerializerFactory.registerSerializer( - PinEntity, - new PinSerializer() - ); - SerializerFactory.registerSerializer( FunctionReferenceEntity, new GeneralSerializer(bracketsWrapped, FunctionReferenceEntity) ); + SerializerFactory.registerSerializer(GuidEntity, new ToStringSerializer(GuidEntity)); + + SerializerFactory.registerSerializer(IdentifierEntity, new ToStringSerializer(IdentifierEntity)); + + SerializerFactory.registerSerializer(IntegerEntity, new ToStringSerializer(IntegerEntity)); + + SerializerFactory.registerSerializer( + InvariantTextEntity, + new GeneralSerializer(v => `${InvariantTextEntity.lookbehind}(${v})`, InvariantTextEntity, "", ", ", false, "", _ => "") + ); + SerializerFactory.registerSerializer( KeyBindingEntity, new GeneralSerializer(bracketsWrapped, KeyBindingEntity) ); + SerializerFactory.registerSerializer( + LinearColorEntity, + new GeneralSerializer(bracketsWrapped, LinearColorEntity) + ); + SerializerFactory.registerSerializer( LocalizedTextEntity, new GeneralSerializer(v => `${LocalizedTextEntity.lookbehind}(${v})`, LocalizedTextEntity, "", ", ", false, "", _ => "") ); SerializerFactory.registerSerializer( - InvariantTextEntity, - new GeneralSerializer(v => `${InvariantTextEntity.lookbehind}(${v})`, InvariantTextEntity, "", ", ", false, "", _ => "") - ); - - SerializerFactory.registerSerializer( - PinReferenceEntity, - new GeneralSerializer(v => v, PinReferenceEntity, "", " ", false, "", _ => "") + ObjectEntity, + new ObjectSerializer() ); SerializerFactory.registerSerializer( @@ -5287,17 +5263,19 @@ function initializeSerializerFactory() { ) ); - SerializerFactory.registerSerializer(IdentifierEntity, new ToStringSerializer(IdentifierEntity)); - SerializerFactory.registerSerializer(PathSymbolEntity, new ToStringSerializer(PathSymbolEntity)); - SerializerFactory.registerSerializer(GuidEntity, new ToStringSerializer(GuidEntity)); + SerializerFactory.registerSerializer( + PinReferenceEntity, + new GeneralSerializer(v => v, PinReferenceEntity, "", " ", false, "", _ => "") + ); - SerializerFactory.registerSerializer(IntegerEntity, new ToStringSerializer(IntegerEntity)); + SerializerFactory.registerSerializer( + PinEntity, + new PinSerializer() + ); } -// @ts-check - initializeSerializerFactory(); export { Blueprint, Configuration, LinkElement, NodeElement }; diff --git a/dist/ueblueprint.min.js b/dist/ueblueprint.min.js index 4b61731..17a4bbe 100644 --- a/dist/ueblueprint.min.js +++ b/dist/ueblueprint.min.js @@ -1 +1,23 @@ -class e{static deleteNodesKeyboardKey="Delete";static editTextEventName={begin:"ueb-edit-text-begin",end:"ueb-edit-text-end"};static enableZoomIn=["LeftControl","RightControl"];static expandGridSize=400;static focusEventName={begin:"blueprint-focus",end:"blueprint-unfocus"};static fontSize="12.5px";static gridAxisLineColor="black";static gridExpandThreshold=.25;static gridLineColor="#353535";static gridLineWidth=1;static gridSet=8;static gridSetLineColor="#161616";static gridShrinkThreshold=4;static gridSize=16;static keysSeparator="+";static linkCurveHeight=15;static linkCurveWidth=80;static linkMinWidth=100;static linkRightSVGPath=(e,t,n)=>{let i=100-e;return`M ${e} 0 C ${t} 0, ${n} 0, 50 50 S ${i-t+e} 100, ${i} 100`};static maxZoom=7;static minZoom=-12;static nodeDeleteEventName="ueb-node-delete";static nodeDragEventName="ueb-node-drag";static nodeDragLocalEventName="ueb-node-drag-local";static nodeName=(e,t)=>`${e}_${t}`;static nodeRadius=8;static selectAllKeyboardKey="(bCtrl=True,Key=A)";static trackingMouseEventName={begin:"ueb-tracking-mouse-begin",end:"ueb-tracking-mouse-end"};static ModifierKeys=["Ctrl","Shift","Alt","Meta"];static Keys={Backspace:"Backspace",Tab:"Tab",LeftControl:"ControlLeft",RightControl:"ControlRight",LeftShift:"ShiftLeft",RightShift:"ShiftRight",LeftAlt:"AltLeft",RightAlt:"AltRight",Enter:"Enter",Pause:"Pause",CapsLock:"CapsLock",Escape:"Escape",Space:"Space",PageUp:"PageUp",PageDown:"PageDown",End:"End",Home:"Home",ArrowLeft:"Left",ArrowUp:"Up",ArrowRight:"Right",ArrowDown:"Down",PrintScreen:"PrintScreen",Insert:"Insert",Delete:"Delete",Zero:"Digit0",One:"Digit1",Two:"Digit2",Three:"Digit3",Four:"Digit4",Five:"Digit5",Six:"Digit6",Seven:"Digit7",Eight:"Digit8",Nine:"Digit9",A:"KeyA",B:"KeyB",C:"KeyC",D:"KeyD",E:"KeyE",F:"KeyF",G:"KeyG",H:"KeyH",I:"KeyI",K:"KeyK",L:"KeyL",M:"KeyM",N:"KeyN",O:"KeyO",P:"KeyP",Q:"KeyQ",R:"KeyR",S:"KeyS",T:"KeyT",U:"KeyU",V:"KeyV",W:"KeyW",X:"KeyX",Y:"KeyY",Z:"KeyZ",NumPadZero:"Numpad0",NumPadOne:"Numpad1",NumPadTwo:"Numpad2",NumPadThree:"Numpad3",NumPadFour:"Numpad4",NumPadFive:"Numpad5",NumPadSix:"Numpad6",NumPadSeven:"Numpad7",NumPadEight:"Numpad8",NumPadNine:"Numpad9",Multiply:"NumpadMultiply",Add:"NumpadAdd",Subtract:"NumpadSubtract",Decimal:"NumpadDecimal",Divide:"NumpadDivide",F1:"F1",F2:"F2",F3:"F3",F4:"F4",F5:"F5",F6:"F6",F7:"F7",F8:"F8",F9:"F9",F10:"F10",F11:"F11",F12:"F12",NumLock:"NumLock",ScrollLock:"ScrollLock"}}class t{#e;get target(){return this.#e}#t;get blueprint(){return this.#t}options;constructor(t,n,i){this.#e=t,this.#t=n,i.consumeEvent??=!1,i.listenOnFocus??=!1,i.unlistenOnTextEdit??=!1,this.options=i;let r=this;this.listenHandler=e=>r.listenEvents(),this.unlistenHandler=e=>r.unlistenEvents(),this.options.listenOnFocus&&(this.blueprint.addEventListener(e.focusEventName.begin,this.listenHandler),this.blueprint.addEventListener(e.focusEventName.end,this.unlistenHandler)),this.options.unlistenOnTextEdit&&(this.blueprint.addEventListener(e.editTextEventName.begin,this.unlistenHandler),this.blueprint.addEventListener(e.editTextEventName.end,this.listenHandler))}unlistenDOMElement(){this.unlistenEvents(),this.blueprint.removeEventListener(e.focusEventName.begin,this.listenHandler),this.blueprint.removeEventListener(e.focusEventName.end,this.unlistenHandler),this.blueprint.removeEventListener(e.editTextEventName.begin,this.unlistenHandler),this.blueprint.removeEventListener(e.editTextEventName.end,this.listenHandler)}listenEvents(){}unlistenEvents(){}}class n{#n;get types(){return this.#n}set types(e){this.#n=e}constructor(...e){this.#n=e}}class i{#i;get type(){return this.#i}set type(e){this.#i=e}#r=!0;get showDefault(){return this.#r}set showDefault(e){this.#r=e}#s;get value(){return this.#s}set value(e){this.#s=e}static sanitize(e,t){return void 0===t&&(t=e?.constructor),t&&t!==n&&!(e?.constructor===t||e instanceof t)&&(e=new t(e)),(e instanceof Boolean||e instanceof Number||e instanceof String)&&(e=e.valueOf()),e}constructor(e,t=!0,r){void 0===r&&(r=e instanceof Array?[]:e instanceof n?"":i.sanitize(new e)),this.#r=t,this.#i=e}}class r{static sigmoid(e,t=1.7){return 1/(1+e/(1-e)**-t)}static clamp(e,t,n){return Math.min(Math.max(e,t),n)}static getScale(e){return Number(getComputedStyle(e).getPropertyValue("--ueb-scale"))}static minDecimals(e,t=1){const n=e*10**t;return Math.abs(n%1)>Number.EPSILON?e.toString():e.toFixed(t)}static convertLocation(e,t){const n=1/r.getScale(t),i=t.getBoundingClientRect();return[Math.round((e[0]-i.x)*n),Math.round((e[1]-i.y)*n)]}static objectGet(e,t,n){if(void 0!==e){if(!(t instanceof Array))throw new TypeError("Expected keys to be an array.");return 0!=t.length&&t[0]in e&&void 0!==e[t[0]]?1==t.length?e[t[0]]:r.objectGet(e[t[0]],t.slice(1),n):n}}static objectSet(e,t,n,i=!1,s=Object){if(!(t instanceof Array))throw new TypeError("Expected keys to be an array.");if(1==t.length){if(i||t[0]in e||void 0===e[t[0]])return e[t[0]]=n,!0}else if(t.length>0)return!i||e[t[0]]instanceof Object||(e[t[0]]=new s),r.objectSet(e[t[0]],t.slice(1),n,i,s);return!1}static equals(e,t){return(e=i.sanitize(e))===(t=i.sanitize(t))||(e instanceof Array&&t instanceof Array?e.length==t.length&&!e.find(((e,n)=>!r.equals(e,t[n]))):void 0)}static FirstCapital(e){return e.charAt(0).toUpperCase()+e.substring(1)}static getType(e){let t=e?.constructor;switch(t){case i:return r.getType(e.type);case Function:return e;default:return t}}static snapToGrid(e,t){return 1===t?e:[t*Math.round(e[0]/t),t*Math.round(e[1]/t)]}static mergeArrays(e=[],t=[]){let n=[];for(let i=0;i{for(let o of r.mergeArrays(Object.getOwnPropertyNames(n),Object.getOwnPropertyNames(s??{}))){let l=n[o];const u=r.getType(l);if(o in n?null==l||l instanceof i&&!l.showDefault||o in s||console.warn(`${this.constructor.name} adds property ${a}${o} not defined in the serialized data`):console.warn(`Property ${a}${o} is not defined in ${this.constructor.name}`),u===Object){e[o]={},t(e[o],n[o],s[o],o+".");continue}const c=r.objectGet(s,[o]);if(void 0===c){if(l instanceof i){if(!l.showDefault){e[o]=void 0;continue}l=l.value}l instanceof Array?e[o]=[]:(l instanceof Function&&(l=i.sanitize(new l,u)),e[o]=i.sanitize(l,u))}else e[o]=i.sanitize(c,u)}},n=this.constructor.attributes;e.constructor!==Object&&1==Object.getOwnPropertyNames(n).length&&(e={[Object.getOwnPropertyNames(n)[0]]:e}),t(this,n,e)}}class a extends s{static attributes={type:String,path:String};constructor(e={}){super(e),this.type,this.path}}class o extends s{static attributes={MemberParent:a,MemberName:""};constructor(e={}){super(e),this.MemberParent,this.MemberName}}class l extends s{static attributes={value:String};static generateGuid(e=!0){let t=new Uint32Array(4);!0===e&&crypto.getRandomValues(t);let n="";return t.forEach((e=>{n+=("0".repeat(8)+e.toString(16).toUpperCase()).slice(-8)})),new l({value:n})}constructor(e={}){super(e),this.value}valueOf(){return this.value}toString(){return this.value}}class u extends s{static attributes={value:String};constructor(e={}){super(e),this.value}valueOf(){return this.value}toString(){return this.value}}class c extends s{static attributes={value:Number};constructor(e=0){super(e),this.value=Math.round(this.value)}valueOf(){return this.value}toString(){return this.value.toString()}}class d extends s{static lookbehind="INVTEXT";static attributes={value:String};constructor(e={}){super(e),this.value}}class h extends s{static attributes={ActionName:"",bShift:!1,bCtrl:!1,bAlt:!1,bCmd:!1,Key:u};constructor(e={}){e.ActionName=e.ActionName??"",e.bShift=e.bShift??!1,e.bCtrl=e.bCtrl??!1,e.bAlt=e.bAlt??!1,e.bCmd=e.bCmd??!1,super(e),this.ActionName,this.bShift,this.bCtrl,this.bAlt,this.bCmd,this.Key}}class p extends s{static attributes={R:Number,G:Number,B:Number,A:Number};constructor(e={}){super(e),this.R,this.G,this.B,this.A}static numberToString(e){return Math.round(255*e).toString(16)}static fromString(e){return new p({R:parseInt(e.substr(0,2),16)/255,G:parseInt(e.substr(2,2),16)/255,B:parseInt(e.substr(4,2),16)/255,A:parseInt(e.substr(6,2),16)/255})}toString(){return"#"+p.numberToString(this.R)+p.numberToString(this.G)+p.numberToString(this.B)+p.numberToString(this.A)}}class m extends s{static lookbehind="NSLOCTEXT";static attributes={namespace:String,key:String,value:String};constructor(e={}){super(e),this.namespace,this.key,this.value}}class g extends s{static attributes={value:String};constructor(e={}){super(e),this.value}valueOf(){return this.value}toString(){return this.value}}class f extends s{static attributes={objectName:g,pinGuid:l};constructor(e={}){super(e),this.objectName,this.pinGuid}}class y extends s{static lookbehind="Pin";static attributes={PinId:l,PinName:"",PinFriendlyName:new i(m,!1,null),PinToolTip:"",Direction:new i(String,!1,""),PinType:{PinCategory:"",PinSubCategory:"",PinSubCategoryObject:a,PinSubCategoryMemberReference:null,PinValueType:null,ContainerType:a,bIsReference:!1,bIsConst:!1,bIsWeakPointer:!1,bIsUObjectWrapper:!1,bSerializeAsSinglePrecisionFloat:!1},LinkedTo:new i([f],!1),DefaultValue:new i(new n(p,String),!1),AutogeneratedDefaultValue:new i(String,!1),DefaultObject:new i(a,!1,null),PersistentGuid:l,bHidden:!1,bNotConnectable:!1,bDefaultValueIsReadOnly:!1,bDefaultValueIsIgnored:!1,bAdvancedView:!1,bOrphanedPin:!1};constructor(e={}){super(e),this.PinId,this.PinName,this.PinFriendlyName,this.PinToolTip,this.Direction,this.PinType,this.LinkedTo,this.DefaultValue,this.AutogeneratedDefaultValue,this.DefaultObject,this.PersistentGuid,this.bHidden,this.bNotConnectable,this.bDefaultValueIsReadOnly,this.bDefaultValueIsIgnored,this.bAdvancedView,this.bOrphanedPin}getDefaultValue(){return this.DefaultValue??""}isInput(){return!this.bHidden&&"EGPD_Output"!=this.Direction}isOutput(){return!this.bHidden&&"EGPD_Output"==this.Direction}isLinked(){return this.LinkedTo?.length>0??!1}linkTo(e,t){this.LinkedTo;const n=this.LinkedTo?.find((n=>n.objectName==e&&n.pinGuid.valueOf()==t.PinId.valueOf()));return!n&&((this.LinkedTo??(this.LinkedTo=[])).push(new f({objectName:e,pinGuid:t.PinId})),!0)}unlinkFrom(e,t){this.LinkedTo;const n=this.LinkedTo.findIndex((n=>n.objectName==e&&n.pinGuid==t.PinId));return n>=0&&(1==this.LinkedTo.length?this.LinkedTo=void 0:this.LinkedTo.splice(n,1),!0)}getType(){return this.PinType.PinCategory}getSubCategory(){return this.PinType.PinSubCategoryObject.path}getColorValue(){this.PinType.PinSubCategoryObject.path}}class b extends s{static attributes={MemberName:String,MemberGuid:l,bSelfContext:!1};constructor(e={}){super(e),this.MemberName,this.MemberGuid,this.bSelfContext}}class v extends s{static attributes={Class:a,Name:"",bIsPureFunc:new i(Boolean,!1,!1),VariableReference:new i(b,!1,null),FunctionReference:new i(o,!1,null),EventReference:new i(o,!1,null),TargetType:new i(a,!1,null),NodePosX:c,NodePosY:c,AdvancedPinDisplay:new i(u,!1,null),EnabledState:new i(u,!1,null),NodeGuid:l,ErrorType:new i(c,!1),ErrorMsg:new i(String,!1,""),CustomProperties:[y]};static nameRegex=/(\w+)_(\d+)/;constructor(e={}){super(e),this.Class,this.Name,this.bIsPureFunc,this.VariableReference,this.FunctionReference,this.EventReference,this.TargetType,this.NodePosX,this.NodePosY,this.AdvancedPinDisplay,this.EnabledState,this.NodeGuid,this.ErrorType,this.ErrorMsg,this.CustomProperties}getObjectName(e=!1){return e?this.getNameAndCounter()[0]:this.Name}getNameAndCounter(){const e=this.getObjectName(!1).match(v.nameRegex);if(e&&3==e.length)return[e[1],parseInt(e[2])]}getDisplayName(){let e=this.FunctionReference?.MemberName;return e?(e=r.formatStringName(e),e):(e=r.formatStringName(this.getNameAndCounter()[0]),e)}getCounter(){return this.getNameAndCounter()[1]}}"undefined"!=typeof globalThis?globalThis:"undefined"!=typeof window?window:"undefined"!=typeof global?global:"undefined"!=typeof self&&self;function E(e){return e&&e.__esModule&&Object.prototype.hasOwnProperty.call(e,"default")?e.default:e}var S={exports:{}};"undefined"!=typeof self&&self;var w=E(S.exports=function(e){var t={};function n(i){if(t[i])return t[i].exports;var r=t[i]={i:i,l:!1,exports:{}};return e[i].call(r.exports,r,r.exports,n),r.l=!0,r.exports}return n.m=e,n.c=t,n.d=function(e,t,i){n.o(e,t)||Object.defineProperty(e,t,{configurable:!1,enumerable:!0,get:i})},n.r=function(e){Object.defineProperty(e,"__esModule",{value:!0})},n.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return n.d(t,"a",t),t},n.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},n.p="",n(n.s=0)}([function(e,t,n){function i(e){if(!(this instanceof i))return new i(e);this._=e}var r=i.prototype;function s(e,t){for(var n=0;n>7),buf:function(e){var t=a((function(e,t,n,i){return e.concat(n===i.length-1?Buffer.from([t,0]).readUInt16BE(0):i.readUInt16BE(n))}),[],e);return Buffer.from(o((function(e){return(e<<1&65535)>>8}),t))}(n.buf)}})),n}function u(){return"undefined"!=typeof Buffer}function c(){if(!u())throw new Error("Buffer global does not exist; please use webpack if you need to parse Buffers in the browser.")}function d(e){c();var t=a((function(e,t){return e+t}),0,e);if(t%8!=0)throw new Error("The bits ["+e.join(", ")+"] add up to "+t+" which is not an even number of bytes; the total should be divisible by 8");var n,r=t/8,s=(n=function(e){return e>48},a((function(e,t){return e||(n(t)?t:e)}),null,e));if(s)throw new Error(s+" bit range requested exceeds 48 bit (6 byte) Number max.");return new i((function(t,n){var i=r+n;return i>t.length?w(n,r.toString()+" bytes"):S(i,a((function(e,t){var n=l(t,e.buf);return{coll:e.coll.concat(n.v),buf:n.buf}}),{coll:[],buf:t.slice(n,i)},e).coll)}))}function h(e,t){return new i((function(n,i){return c(),i+t>n.length?w(i,t+" bytes for "+e):S(i+t,n.slice(i,i+t))}))}function p(e,t){if("number"!=typeof(n=t)||Math.floor(n)!==n||t<0||t>6)throw new Error(e+" requires integer length in range [0, 6].");var n}function m(e){return p("uintBE",e),h("uintBE("+e+")",e).map((function(t){return t.readUIntBE(0,e)}))}function g(e){return p("uintLE",e),h("uintLE("+e+")",e).map((function(t){return t.readUIntLE(0,e)}))}function f(e){return p("intBE",e),h("intBE("+e+")",e).map((function(t){return t.readIntBE(0,e)}))}function y(e){return p("intLE",e),h("intLE("+e+")",e).map((function(t){return t.readIntLE(0,e)}))}function b(e){return e instanceof i}function v(e){return"[object Array]"==={}.toString.call(e)}function E(e){return u()&&Buffer.isBuffer(e)}function S(e,t){return{status:!0,index:e,value:t,furthest:-1,expected:[]}}function w(e,t){return v(t)||(t=[t]),{status:!1,index:-1,value:null,furthest:e,expected:t}}function P(e,t){if(!t)return e;if(e.furthest>t.furthest)return e;var n=e.furthest===t.furthest?function(e,t){if(function(){if(void 0!==i._supportsSet)return i._supportsSet;var e="undefined"!=typeof Set;return i._supportsSet=e,e}()&&Array.from){for(var n=new Set(e),r=0;r=0;){if(a in n){i=n[a].line,0===s&&(s=n[a].lineStart);break}("\n"===e.charAt(a)||"\r"===e.charAt(a)&&"\n"!==e.charAt(a+1))&&(r++,0===s&&(s=a+1)),a--}var o=i+r,l=t-s;return n[t]={line:o,lineStart:s},{offset:t,line:o+1,column:l+1}}function x(e){if(!b(e))throw new Error("not a parser: "+e)}function N(e,t){return"string"==typeof e?e.charAt(t):e[t]}function D(e){if("number"!=typeof e)throw new Error("not a number: "+e)}function T(e){if("function"!=typeof e)throw new Error("not a function: "+e)}function O(e){if("string"!=typeof e)throw new Error("not a string: "+e)}var M=2,A=3,C=8,I=5*C,H=4*C,j=" ";function F(e,t){return new Array(t+1).join(e)}function z(e,t,n){var i=t-e.length;return i<=0?e:F(n,i)+e}function G(e,t,n,i){return{from:e-t>0?e-t:0,to:e+n>i?i:e+n}}function B(e,t){var n,i,r,s,l,u=t.index,c=u.offset,d=1;if(c===e.length)return"Got the end of the input";if(E(e)){var h=c-c%C,p=c-h,m=G(h,I,H+C,e.length),g=o((function(e){return o((function(e){return z(e.toString(16),2,"0")}),e)}),function(e,t){var n=e.length,i=[],r=0;if(n<=t)return[e.slice()];for(var s=0;s=4&&(n+=1),d=2,r=o((function(e){return e.length<=4?e.join(" "):e.slice(0,4).join(" ")+" "+e.slice(4).join(" ")}),g),(l=(8*(s.to>0?s.to-1:s.to)).toString(16).length)<2&&(l=2)}else{var f=e.split(/\r\n|[\n\r\u2028\u2029]/);n=u.column-1,i=u.line-1,s=G(i,M,A,f.length),r=f.slice(s.from,s.to),l=s.to.toString().length}var y=i-s.from;return E(e)&&(l=(8*(s.to>0?s.to-1:s.to)).toString(16).length)<2&&(l=2),a((function(t,i,r){var a,o=r===y,u=o?"> ":j;return a=E(e)?z((8*(s.from+r)).toString(16),l,"0"):z((s.from+r+1).toString(),l," "),[].concat(t,[u+a+" | "+i],o?[j+F(" ",l)+" | "+z("",n," ")+F("^",d)]:[])}),[],r).join("\n")}function V(e,t){return["\n","-- PARSING FAILED "+F("-",50),"\n\n",B(e,t),"\n\n",(n=t.expected,1===n.length?"Expected:\n\n"+n[0]:"Expected one of the following: \n\n"+n.join(", ")),"\n"].join("");var n}function K(e){return void 0!==e.flags?e.flags:[e.global?"g":"",e.ignoreCase?"i":"",e.multiline?"m":"",e.unicode?"u":"",e.sticky?"y":""].join("")}function $(){for(var e=[].slice.call(arguments),t=e.length,n=0;n=2?D(t):t=0;var n=function(e){return RegExp("^(?:"+e.source+")",K(e))}(e),r=""+e;return i((function(e,i){var s=n.exec(e.slice(i));if(s){if(0<=t&&t<=s.length){var a=s[0],o=s[t];return S(i+a.length,o)}return w(i,"valid match group (0 to "+s.length+") in "+r)}return w(i,r)}))}function X(e){return i((function(t,n){return S(n,e)}))}function Y(e){return i((function(t,n){return w(n,e)}))}function Q(e){if(b(e))return i((function(t,n){var i=e._(t,n);return i.index=n,i.value="",i}));if("string"==typeof e)return Q(Z(e));if(e instanceof RegExp)return Q(U(e));throw new Error("not a string, regexp, or parser: "+e)}function J(e){return x(e),i((function(t,n){var i=e._(t,n),r=t.slice(n,i.index);return i.status?w(n,'not "'+r+'"'):S(n,null)}))}function ee(e){return T(e),i((function(t,n){var i=N(t,n);return n=e.length?w(t,"any character/byte"):S(t+1,N(e,t))})),se=i((function(e,t){return S(e.length,e.slice(t))})),ae=i((function(e,t){return t=0})).desc(t)},i.optWhitespace=de,i.Parser=i,i.range=function(e,t){return ee((function(n){return e<=n&&n<=t})).desc(e+"-"+t)},i.regex=U,i.regexp=U,i.sepBy=q,i.sepBy1=_,i.seq=$,i.seqMap=R,i.seqObj=function(){for(var e,t={},n=0,r=(e=arguments,Array.prototype.slice.call(e)),s=r.length,a=0;a255)throw new Error("Value specified to byte constructor ("+e+"=0x"+e.toString(16)+") is larger in value than a single byte.");var t=(e>15?"0x":"0x0")+e.toString(16);return i((function(n,i){var r=N(n,i);return r===e?S(i+1,r):w(i,t)}))},buffer:function(e){return h("buffer",e).map((function(e){return Buffer.from(e)}))},encodedString:function(e,t){return h("string",t).map((function(t){return t.toString(e)}))},uintBE:m,uint8BE:m(1),uint16BE:m(2),uint32BE:m(4),uintLE:g,uint8LE:g(1),uint16LE:g(2),uint32LE:g(4),intBE:f,int8BE:f(1),int16BE:f(2),int32BE:f(4),intLE:y,int8LE:y(1),int16LE:y(2),int32LE:y(4),floatBE:h("floatBE",4).map((function(e){return e.readFloatBE(0)})),floatLE:h("floatLE",4).map((function(e){return e.readFloatLE(0)})),doubleBE:h("doubleBE",8).map((function(e){return e.readDoubleBE(0)})),doubleLE:h("doubleLE",8).map((function(e){return e.readDoubleLE(0)}))},e.exports=i}]));let P=w;class k{static getGrammarForType(e,t,s){if(t instanceof i)return t=t.type,k.getGrammarForType(e,t,s);if(t instanceof n){const n=t.types.filter((e=>e!==String));let i=P.alt(...n.map((t=>k.getGrammarForType(e,t).wrap(P.string('"'),P.string('"')).map((e=>(e.setShowAsString(!0),e))))));return n.lengthk.getGrammarForType(e,r.getType(t)))).reduce(((t,n)=>n&&t!==e.AttributeAnyValue?t.or(n):e.AttributeAnyValue)).trim(P.optWhitespace).sepBy(P.string(",")).skip(P.regex(/,?\s*/)),P.string(")"),((e,t,n)=>t));default:return s}}static createAttributeGrammar=(e,t,n=P.string("=").trim(P.optWhitespace))=>e.AttributeName.skip(n).chain((n=>{const i=n.split("."),s=r.objectGet(t.attributes,i);return k.getGrammarForType(e,s,e.AttributeAnyValue).map((e=>t=>r.objectSet(t,i,e,!0)))}));static createMultiAttributeGrammar=(e,t)=>P.seqMap(t.lookbehind?P.seq(P.string(t.lookbehind),P.optWhitespace,P.string("(")):P.string("("),k.createAttributeGrammar(e,t).trim(P.optWhitespace).sepBy(P.string(",")).skip(P.regex(/,?/).then(P.optWhitespace)),P.string(")"),((e,n,i)=>{let r={};return n.forEach((e=>e(r))),new t(r)}));InlineWhitespace=e=>P.regex(/[^\S\n]+/).desc("inline whitespace");InlineOptWhitespace=e=>P.regex(/[^\S\n]*/).desc("inline optional whitespace");MultilineWhitespace=e=>P.regex(/[^\S\n]*\n\s*/).desc("whitespace with at least a newline");Null=e=>P.seq(P.string("("),e.InlineOptWhitespace,P.string(")")).map((e=>null)).desc("null: ()");Boolean=e=>P.alt(P.string("True"),P.string("False")).map((e=>"True"===e)).desc("either True or False");Number=e=>P.regex(/[\-\+]?[0-9]+(?:\.[0-9]+)?/).map(Number).desc("a number");Word=e=>P.regex(/[a-zA-Z]+/).desc("a word");String=e=>P.regex(/(?:[^"\\]|\\.)*/).wrap(P.string('"'),P.string('"')).map(r.decodeString).desc('string (with possibility to escape the quote using ")');ReferencePath=e=>P.seq(P.string("/"),e.PathSymbol.map((e=>e.toString())).sepBy1(P.string(".")).tieWith(".")).tie().atLeast(2).tie().desc('a path (words with possibly underscore, separated by ".", separated by "/")');AttributeName=e=>e.Word.sepBy1(P.string(".")).tieWith(".").desc('words separated by ""');None=e=>P.string("None").map((e=>new a({type:"None",path:""}))).desc("none");Integer=e=>P.regex(/[\-\+]?[0-9]+/).map((e=>new c(e))).desc("an integer");Guid=e=>P.regex(/[0-9a-zA-Z]{32}/).map((e=>new l({value:e}))).desc("32 digit hexadecimal (accepts all the letters for safety) value");Identifier=e=>P.regex(/\w+/).map((e=>new u(e)));PathSymbol=e=>P.regex(/[0-9\w]+/).map((e=>new g({value:e})));Reference=e=>P.alt(e.None,...[e.ReferencePath.map((e=>new a({type:"",path:e})))].flatMap((e=>[e,e.trim(P.string('"'))])),P.seqMap(e.Word,P.optWhitespace,P.alt(...[e.ReferencePath].flatMap((e=>[e.wrap(P.string('"'),P.string('"')),e.wrap(P.string("'\""),P.string("\"'"))]))),((e,t,n)=>new a({type:e,path:n}))),e.Word.map((e=>new a({type:e,path:""}))));LocalizedText=e=>P.seqMap(P.string(m.lookbehind).skip(P.optWhitespace).skip(P.string("(")),e.String.trim(P.optWhitespace),P.string(","),e.String.trim(P.optWhitespace),P.string(","),e.String.trim(P.optWhitespace),P.string(")"),((e,t,n,i,r,s,a)=>new m({namespace:t,key:i,value:s})));InvariantText=e=>e.String.trim(P.optWhitespace).wrap(P.string(d.lookbehind).skip(P.optWhitespace).skip(P.string("(")),P.string(")")).map((e=>new d({value:e})));AttributeAnyValue=e=>P.alt(e.Null,e.None,e.Boolean,e.Number,e.Integer,e.String,e.Guid,e.LocalizedText,e.InvariantText,e.Reference);PinReference=e=>P.seqMap(e.PathSymbol,P.whitespace,e.Guid,((e,t,n)=>new f({objectName:e,pinGuid:n})));LinearColor=e=>k.createMultiAttributeGrammar(e,p);FunctionReference=e=>k.createMultiAttributeGrammar(e,o);KeyBinding=e=>P.alt(e.Identifier.map((e=>new h({Key:e}))),k.createMultiAttributeGrammar(e,h));Pin=e=>k.createMultiAttributeGrammar(e,y);CustomProperties=e=>P.string("CustomProperties").then(P.whitespace).then(e.Pin).map((e=>t=>{let n=r.objectGet(t,["CustomProperties"],[]);n.push(e),r.objectSet(t,["CustomProperties"],n,!0)}));Object=e=>P.seqMap(P.seq(P.string("Begin"),P.whitespace,P.string("Object"),P.whitespace),P.alt(e.CustomProperties,k.createAttributeGrammar(e,v)).sepBy1(P.whitespace),P.seq(e.MultilineWhitespace,P.string("End"),P.whitespace,P.string("Object")),((e,t,n)=>{let i={};return t.forEach((e=>e(i))),new v(i)}));MultipleObject=e=>e.Object.sepBy1(P.whitespace).trim(P.optWhitespace)}class L{static#o=new Map;static registerSerializer(e,t){L.#o.set(e,t)}static getSerializer(e){return L.#o.get(r.getType(e))}}class x{static grammar=w.createLanguage(new k);constructor(e,t,n,i,r,s){this.entityType=e,this.prefix=t??"",this.separator=n??",",this.trailingSeparator=i??!1,this.attributeValueConjunctionSign=r??"=",this.attributeKeyPrinter=s??(e=>e.join("."))}deserialize(e){return this.read(e)}serialize(e,t){t||=e.isShownAsString();let n=this.write(e,t);return e.isShownAsString()&&(n=`"${n}"`),n}read(e){throw new Error("Not implemented")}write(e,t){throw new Error("Not implemented")}writeValue(e,t,n){if(null===e)return"()";const i=e=>L.getSerializer(r.getType(e)).serialize(e);switch(e?.constructor){case Function:return this.writeValue(e(),t,n);case Boolean:return r.FirstCapital(e.toString());case Number:return e.toString();case String:return n?`\\"${r.encodeString(e)}\\"`:`"${r.encodeString(e)}"`}return e instanceof Array?`(${e.map((e=>i(e)+",")).join("")})`:e instanceof s?i(e):void 0}subWrite(e,t,n){let i="",r=e.concat("");const s=r.length-1;for(const e of Object.getOwnPropertyNames(t)){r[s]=e;const a=t[e];a?.constructor===Object?i+=(i.length?this.separator:"")+this.subWrite(r,a,n):void 0!==a&&this.showProperty(t,r,a)&&(i+=(i.length?this.separator:"")+this.prefix+this.attributeKeyPrinter(r)+this.attributeValueConjunctionSign+this.writeValue(a,r,n))}return this.trailingSeparator&&i.length&&1===r.length&&(i+=this.separator),i}showProperty(e,t,n){const s=this.entityType.attributes,a=r.objectGet(s,t);return!(a instanceof i)||(!r.equals(a.value,n)||a.showDefault)}}class N extends x{constructor(){super(v," ","\n",!1)}showProperty(e,t,n){switch(t.toString()){case"Class":case"Name":case"CustomProperties":return!1}return super.showProperty(e,t,n)}read(e){const t=x.grammar.Object.parse(e);if(!t.status)throw new Error("Error when trying to parse the object.");return t.value}readMultiple(e){const t=x.grammar.MultipleObject.parse(e);if(!t.status)throw new Error("Error when trying to parse the object.");return t.value}write(e,t){return`Begin Object Class=${e.Class.path} Name=${this.writeValue(e.Name,["Name"],t)}\n${this.subWrite([],e,t)+e.CustomProperties.map((e=>this.separator+this.prefix+"CustomProperties "+L.getSerializer(y).serialize(e))).join("")}\nEnd Object\n`}}class D extends t{#l;constructor(e,t,n={}){n.listenOnFocus=!0,n.unlistenOnTextEdit=!0,super(e,t,n),this.serializer=new N;let i=this;this.#l=e=>i.copied()}listenEvents(){document.body.addEventListener("copy",this.#l)}unlistenEvents(){document.body.removeEventListener("copy",this.#l)}copied(){const e=this.blueprint.getNodes(!0).map((e=>this.serializer.serialize(e.entity,!1))).join("\n");navigator.clipboard.writeText(e)}}const T=String.raw;class O{#u=[];get inputObjects(){return this.#u}render(e){return""}setup(e){e.innerHTML=this.render(e)}inputSetup(e){this.#u=this.createInputObjects(e)}cleanup(e){this.#u.forEach((e=>e.unlistenDOMElement()))}createInputObjects(e){return[]}}class M extends t{#c;constructor(t,n,i={}){i.activateAnyKey??=!1,i.activationKeys??=[],i.listenOnFocus??=!0,i.unlistenOnTextEdit??=!0,i.activationKeys instanceof Array||(i.activationKeys=[i.activationKeys]),i.activationKeys=i.activationKeys.map((e=>{if(e instanceof h)return e;if(e.constructor===String){const t=x.grammar.KeyBinding.parse(e);if(t.status)return t.value}throw new Error("Unexpected key value")})),super(t,n,i),this.#c=this.options.activationKeys??[];let r=this;this.keyDownHandler=t=>{(this.options.activateAnyKey||r.#c.some((n=>(e=>e.bShift||"LeftShift"==e.Key||"RightShift"==e.Key)(n)==t.shiftKey&&(e=>e.bCtrl||"LeftControl"==e.Key||"RightControl"==e.Key)(n)==t.ctrlKey&&(e=>e.bAlt||"LeftAlt"==e.Key||"RightAlt"==e.Key)(n)==t.altKey&&e.Keys[n.Key]==t.code)))&&(i.consumeEvent&&t.stopImmediatePropagation(),r.fire(),document.removeEventListener("keydown",r.keyDownHandler),document.addEventListener("keyup",r.keyUpHandler))},this.keyUpHandler=t=>{(this.options.activateAnyKey||r.#c.some((n=>n.bShift&&"Shift"==t.key||n.bCtrl&&"Control"==t.key||n.bAlt&&"Alt"==t.key||n.bCmd&&"Meta"==t.key||e.Keys[n.Key]==t.code)))&&(i.consumeEvent&&t.stopImmediatePropagation(),r.unfire(),document.removeEventListener("keyup",this.keyUpHandler),document.addEventListener("keydown",this.keyDownHandler))}}listenEvents(){document.addEventListener("keydown",this.keyDownHandler)}unlistenEvents(){document.removeEventListener("keydown",this.keyDownHandler)}fire(){}unfire(){}}class A extends M{constructor(t,n,i={}){i.activationKeys=e.deleteNodesKeyboardKey,super(t,n,i)}fire(){this.blueprint.removeGraphElement(...this.blueprint.getNodes(!0))}}class C extends t{constructor(e,t,n){super(e,t,n),this.movementSpace=this.blueprint?.getGridDOMElement()??document.documentElement}locationFromEvent(e){return this.blueprint.compensateTranslation(r.convertLocation([e.clientX,e.clientY],this.movementSpace))}}class I extends C{#d;#h;constructor(e,t,n){n.listenOnFocus=!0,super(e,t,n),this.looseTarget=n?.looseTarget??!0;let i=this;this.#d=e=>{e.preventDefault();const t=i.locationFromEvent(e);i.wheel(Math.sign(e.deltaY),t)},this.#h=e=>e.preventDefault(),this.blueprint.focused&&this.movementSpace.addEventListener("wheel",this.#d,!1)}listenEvents(){this.movementSpace.addEventListener("wheel",this.#d,!1),this.movementSpace.parentElement?.addEventListener("wheel",this.#h)}unlistenEvents(){this.movementSpace.removeEventListener("wheel",this.#d,!1),this.movementSpace.parentElement?.removeEventListener("wheel",this.#h)}wheel(e,t){}}class H extends I{#p=!1;get enableZoonIn(){return this.#p}set enableZoonIn(e){(e=Boolean(e))!=this.#p&&(this.#p=e)}wheel(e,t){let n=this.blueprint.getZoom();e=-e,!this.enableZoonIn&&0==n&&e>0||(n+=e,this.blueprint.setZoom(n,t))}}class j extends M{#m;constructor(t,n,i={}){i.activationKeys=e.enableZoomIn,super(t,n,i)}fire(){this.#m=this.blueprint.getInputObject(H),this.#m.enableZoonIn=!0}unfire(){this.#m.enableZoonIn=!1}}class F extends M{constructor(t,n,i={}){i.activationKeys=e.selectAllKeyboardKey,super(t,n,i)}fire(){this.blueprint.selectAll()}}class z extends C{#g;#f;#y;#b;#v=!1;started=!1;constructor(t,n,i={}){i.clickButton??=0,i.consumeEvent??=!0,i.exitAnyButton??=!0,i.looseTarget??=!1,i.moveEverywhere??=!1,super(t,n,i),this.clickedPosition=[0,0];const r=this.options.moveEverywhere?document.documentElement:this.movementSpace;let s=this;this.#g=e=>{if(this.blueprint.setFocused(!0),e.button===s.options.clickButton)(s.options.looseTarget||e.target==e.currentTarget)&&(this.options.consumeEvent&&e.stopImmediatePropagation(),r.addEventListener("mousemove",s.#f),document.addEventListener("mouseup",s.#b),s.clickedPosition=s.locationFromEvent(e),s.clicked(s.clickedPosition));else s.options.exitAnyButton||s.#b(e)},this.#f=t=>{this.options.consumeEvent&&t.stopImmediatePropagation(),r.removeEventListener("mousemove",s.#f),r.addEventListener("mousemove",s.#y);const n=s.getEvent(e.trackingMouseEventName.begin);s.#v=0==this.target.dispatchEvent(n),s.startDrag(),s.started=!0},this.#y=e=>{this.options.consumeEvent&&e.stopImmediatePropagation();const t=s.locationFromEvent(e),n=[e.movementX,e.movementY];s.dragTo(t,n),s.#v&&(s.blueprint.mousePosition=s.locationFromEvent(e))},this.#b=t=>{if(!s.options.exitAnyButton||t.button==s.options.clickButton){if(this.options.consumeEvent&&t.stopImmediatePropagation(),r.removeEventListener("mousemove",s.#f),r.removeEventListener("mousemove",s.#y),document.removeEventListener("mouseup",s.#b),s.started&&s.endDrag(),s.unclicked(),s.#v){const t=s.getEvent(e.trackingMouseEventName.end);this.target.dispatchEvent(t),s.#v=!1}s.started=!1}},this.listenEvents()}listenEvents(){this.target.addEventListener("mousedown",this.#g),2==this.options.clickButton&&this.target.addEventListener("contextmenu",(e=>e.preventDefault()))}unlistenEvents(){this.target.removeEventListener("mousedown",this.#g)}getEvent(e){return new CustomEvent(e,{detail:{tracker:this},bubbles:!0,cancelable:!0})}clicked(e){}startDrag(e){}dragTo(e,t){}endDrag(){}unclicked(e){}}class G extends z{startDrag(){this.blueprint.template.applyStartDragScrolling(this.blueprint)}dragTo(e,t){this.blueprint.scrollDelta([-t[0],-t[1]])}endDrag(){this.blueprint.template.applyEndDragScrolling(this.blueprint)}}class B extends C{#E=null;#S;#w;#P;constructor(e,t,n={}){n.listenOnFocus=!0,super(e,t,n);let i=this;this.#S=e=>{e.preventDefault(),i.blueprint.mousePosition=i.locationFromEvent(e)},this.#w=e=>{i.#E||(e.preventDefault(),this.#E=e.detail.tracker,i.unlistenMouseMove())},this.#P=e=>{i.#E==e.detail.tracker&&(e.preventDefault(),i.#E=null,i.listenMouseMove())}}listenMouseMove(){this.target.addEventListener("mousemove",this.#S)}unlistenMouseMove(){this.target.removeEventListener("mousemove",this.#S)}listenEvents(){this.listenMouseMove(),this.blueprint.addEventListener(e.trackingMouseEventName.begin,this.#w),this.blueprint.addEventListener(e.trackingMouseEventName.end,this.#P)}unlistenEvents(){this.unlistenMouseMove(),this.blueprint.removeEventListener(e.trackingMouseEventName.begin,this.#w),this.blueprint.removeEventListener(e.trackingMouseEventName.end,this.#P)}}class V extends HTMLElement{#t;get blueprint(){return this.#t}set blueprint(e){this.#t=e}#k;get entity(){return this.#k}set entity(e){this.#k=e}#L;get template(){return this.#L}set template(e){this.#L=e}inputObjects=[];constructor(e,t){super(),this.#k=e,this.#L=t,this.inputObjects=[]}getTemplate(){return this.template}connectedCallback(){this.#t=this.closest("ueb-blueprint"),this.template.setup(this),this.template.inputSetup(this)}disconnectedCallback(){this.template.cleanup(this)}isSameGraph(e){return this.#t&&this.#t==e?.blueprint}getInputObject(e){return this.template.inputObjects.find((t=>t.constructor==e))}createInputObjects(){return[]}}class K extends V{constructor(...e){super(...e),this.dragObject=null,this.location=[0,0],this.selected=!1;let t=this;this.dragHandler=e=>t.addLocation(e.detail.value)}#x(t=!0){this.selected=t,this.blueprint&&(this.selected?this.blueprint.addEventListener(e.nodeDragEventName,this.dragHandler):this.blueprint.removeEventListener(e.nodeDragEventName,this.dragHandler)),this.template.applySelected(this)}connectedCallback(){super.connectedCallback(),this.#x(this.selected)}setLocation(t=[0,0]){const n=[t[0]-this.location[0],t[1]-this.location[1]];if(this.location=t,this.template.applyLocation(this),this.blueprint){const t=new CustomEvent(e.nodeDragLocalEventName,{detail:{value:n},bubbles:!1,cancelable:!0});this.dispatchEvent(t)}}addLocation(e){this.setLocation([this.location[0]+e[0],this.location[1]+e[1]])}setSelected(e=!0){this.selected!=e&&this.#x(e)}dispatchDragEvent(t){const n=new CustomEvent(e.nodeDragEventName,{detail:{value:t},bubbles:!0,cancelable:!0});this.dispatchEvent(n)}snapToGrid(){let t=r.snapToGrid(this.location,e.gridSize);this.location[0]==t[0]&&this.location[1]==t[1]||this.setLocation(t)}}class $ extends z{constructor(e,t,n={}){n.consumeEvent=!0,super(e,t,n)}}document.createElement("div");const R={"&":"&","<":"<",">":">","'":"'",'"':"""};function W(e){return e.toString().replace(/[&<>'"]/g,(e=>R[e]))}class q extends O{static decreasingValue(e,t){const n=-e*t[0]**2,i=t[1]-n/t[0];return e=>n/e+i}static clampedLine(e,t){if(e[0]>t[0]){const n=e;e=t,t=n}const n=(t[1]-e[1])/(t[0]-e[0]),i=e[1]-n*e[0];return r=>rt[0]?t[1]:n*r+i}static c1DecreasingValue=q.decreasingValue(-.1,[100,15]);static c2DecreasingValue=q.decreasingValue(-.06,[500,130]);static c2Clamped=q.clampedLine([0,100],[200,30]);render(e){const t="ueb-id-"+Math.floor(1e12*Math.random());return T``}setup(e){super.setup(e),e.linkMessageElement&&e.appendChild(e.linkMessageElement),e.classList.add("ueb-positioned"),e.pathElement=e.querySelector("path");const t=e.sourcePin??e.destinationPin;t&&e.style.setProperty("--ueb-pin-color",t.getColor()),this.applyPins(e),e.sourcePin&&e.destinationPin&&this.applyFullLocation(e)}applyPins(e){e.sourcePin&&(e.dataset.source=e.sourcePin.GetPinId().toString()),e.destinationPin&&(e.dataset.destination=e.destinationPin.GetPinId().toString())}applyStartDragging(e){e.blueprint.dataset.creatingLink="true",e.classList.add("ueb-link-dragging")}applyFinishDragging(e){e.blueprint.dataset.creatingLink="false",e.classList.remove("ueb-link-dragging")}applySourceLocation(e){e.style.setProperty("--ueb-from-input",e.originatesFromInput?"1":"0"),e.style.setProperty("--ueb-from-x",W(e.sourceLocation[0])),e.style.setProperty("--ueb-from-y",W(e.sourceLocation[1]))}applyFullLocation(t){const n=Math.max(Math.abs(t.sourceLocation[0]-t.destinationLocation[0]),1),i=Math.max(n,e.linkMinWidth);Math.max(Math.abs(t.sourceLocation[1]-t.destinationLocation[1]),1);const r=n/i,s=t.originatesFromInput?t.sourceLocation[0]e.remove())),e.appendChild(t),e.linkMessageElement=t}}class _ extends V{#N;get sourcePin(){return this.#N}set sourcePin(t){if(this.#N!=t){if(this.#N){const t=this.#N.getNodeElement();t.removeEventListener(e.nodeDeleteEventName,this.#D),t.removeEventListener(e.nodeDragLocalEventName,this.#T),this.#O&&this.#M()}if(this.#N=t,this.#N){const n=this.#N.getNodeElement();this.originatesFromInput=t.isInput(),n.addEventListener(e.nodeDeleteEventName,this.#D),n.addEventListener(e.nodeDragLocalEventName,this.#T),this.setSourceLocation(),this.#O&&this.#A()}this.template.applyPins(this)}}#O;get destinationPin(){return this.#O}set destinationPin(t){if(this.#O!=t){if(this.#O){const t=this.#O.getNodeElement();t.removeEventListener(e.nodeDeleteEventName,this.#D),t.removeEventListener(e.nodeDragLocalEventName,this.#C),this.#N&&this.#M()}if(this.#O=t,this.#O){const t=this.#O.getNodeElement();t.addEventListener(e.nodeDeleteEventName,this.#D),t.addEventListener(e.nodeDragLocalEventName,this.#C),this.setDestinationLocation(),this.#N&&this.#A()}this.template.applyPins(this)}}#D;#T;#C;sourceLocation=[0,0];pathElement;linkMessageElement;originatesFromInput=!1;destinationLocation=[0,0];constructor(e,t){super({},new q);const n=this;this.#D=e=>n.remove(),this.#T=e=>n.addSourceLocation(e.detail.value),this.#C=e=>n.addDestinationLocation(e.detail.value),e&&(this.sourcePin=e),t&&(this.destinationPin=t),e&&t&&this.#A()}#A(){this.#N.linkTo(this.#O),this.#O.linkTo(this.#N)}#M(){this.#N&&this.#O&&(this.#N.unlinkFrom(this.#O),this.#O.unlinkFrom(this.#N))}disconnectedCallback(){super.disconnectedCallback(),this.#M()}getSourceLocation(){return this.sourceLocation}addSourceLocation(e){const t=[this.sourceLocation[0]+e[0],this.sourceLocation[1]+e[1]];this.sourceLocation=t,this.template.applyFullLocation(this)}setSourceLocation(e=null){null==e&&(e=this.#N.template.getLinkLocation(this.#N)),this.sourceLocation=e,this.template.applySourceLocation(this)}getDestinationLocation(){return this.destinationLocation}addDestinationLocation(e){const t=[this.destinationLocation[0]+e[0],this.destinationLocation[1]+e[1]];this.setDestinationLocation(t)}setDestinationLocation(e=null){null==e&&(e=this.#O.template.getLinkLocation(this.#O)),this.destinationLocation=e,this.template.applyFullLocation(this)}setLinkMessage(e){e?this.template.applyLinkMessage(this,e):this.linkMessageElement&&(this.linkMessageElement.remove(),this.linkMessageElement=null)}startDragging(){this.template.applyStartDragging(this)}finishDragging(){this.template.applyFinishDragging(this)}}customElements.define("ueb-link",_);class Z extends O{render(e){return T` `}setup(e){super.setup(e);const t=t=>e.querySelector(".ueb-link-message").innerText=e.message(e.linkElement.sourcePin,e.linkElement.destinationPin);e.linkElement=e.closest("ueb-link"),e.linkElement?t():window.customElements.whenDefined("ueb-link-message").then(t)}}class U extends V{static convertType=e=>new U("ueb-icon-conver-type",((e,t)=>`Convert ${e.getType()} to ${t.getType()}.`));static correct=e=>new U("ueb-icon-correct",((e,t)=>""));static directionsIncompatible=e=>new U("ueb-icon-directions-incompatible",((e,t)=>"Directions are not compatbile."));static placeNode=e=>new U("ueb-icon-place-node",((e,t)=>"Place a new node."));static replaceLink=e=>new U("ueb-icon-replace-link",((e,t)=>"Replace existing input connections."));static sameNode=e=>new U("ueb-icon-same-node",((e,t)=>"Both are on the same node."));static typesIncompatible=e=>new U("ueb-icon-types-incompatible",((e,t)=>`${e.getType()} is not compatible with ${t.getType()}.`));icon;message;linkElement;constructor(e,t){super({},new Z),this.icon=e,this.message=t}}customElements.define("ueb-link-message",U);class X extends z{#I;#H;#j;link;enteredPin;linkValid=!1;constructor(e,t,n){super(e,t,n);let i=this;this.#H=e=>{if(!i.enteredPin){i.linkValid=!1,i.enteredPin=e.target;const t=i.enteredPin,n=i.target;t.getNodeElement()==n.getNodeElement()?this.setLinkMessage(U.sameNode()):t.isOutput()==n.isOutput()||t.isOutput()==n.isOutput()?this.setLinkMessage(U.directionsIncompatible()):i.blueprint.getLinks([t,n]).length?(this.setLinkMessage(U.replaceLink()),i.linkValid=!0):(this.setLinkMessage(U.correct()),i.linkValid=!0)}},this.#j=e=>{i.enteredPin==e.target&&(i.enteredPin=null,i.linkValid=!1,this.setLinkMessage(U.placeNode()))}}startDrag(){this.link=new _(this.target,null),this.blueprint.nodesContainerElement.prepend(this.link),this.setLinkMessage(U.placeNode()),this.#I=this.blueprint.querySelectorAll("ueb-pin"),this.#I.forEach((e=>{e!=this.target&&(e.getClickableElement().addEventListener("mouseenter",this.#H),e.getClickableElement().addEventListener("mouseleave",this.#j))})),this.link.startDragging(),this.link.setDestinationLocation(this.clickedPosition)}dragTo(e,t){this.link.setDestinationLocation(e)}endDrag(){this.#I.forEach((e=>{e.removeEventListener("mouseenter",this.#H),e.removeEventListener("mouseleave",this.#j)})),this.enteredPin&&this.linkValid?(this.blueprint.addGraphElement(this.link),this.link.destinationPin=this.enteredPin,this.link.setLinkMessage(null),this.link.finishDragging()):(this.link.finishDragging(),this.link.remove()),this.enteredPin=null,this.link=null,this.#I=null}setLinkMessage(e){this.link.setLinkMessage(e)}}class Y extends O{createInputObjects(e){return[new X(e.clickableElement,e.blueprint,{moveEverywhere:!0,looseTarget:!0})]}render(e){const t=T`
${this.renderIcon(e)}
`,n=T`
${W(e.getPinDisplayName())} ${this.renderInput(e)}
`;return T`
${e.isInput()?t+n:n+t}
`}renderIcon(e){return''}renderInput(e){return""}setup(e){super.setup(e),e.classList.add("ueb-node-"+(e.isInput()?"input":e.isOutput()?"output":"hidden"),"ueb-pin-type-"+W(e.getType())),e.dataset.id=e.GetPinIdValue(),e.entity.bAdvancedView&&(e.dataset.advancedView="true"),e.clickableElement=e,e.nodeElement=e.closest("ueb-node")}applyConnected(e){e.isLinked()?e.classList.add("ueb-pin-fill"):e.classList.remove("ueb-pin-fill")}getLinkLocation(e){const t=e.querySelector(".ueb-pin-icon").getBoundingClientRect();return e.blueprint.compensateTranslation(r.convertLocation([(t.left+t.right)/2,(t.top+t.bottom)/2],e.blueprint.gridElement))}}class Q extends Y{#F;get inputContentElements(){return this.#F}setup(e){if(super.setup(e),this.#F=[...e.querySelectorAll(".ueb-pin-input-content")],this.#F.length){this.setInputs(e,[r.decodeInputString(e.entity.DefaultValue)]);let t=this;this.onFocusHandler=t=>e.blueprint.dispatchEditTextEvent(!0),this.onFocusOutHandler=n=>{n.preventDefault(),document.getSelection().removeAllRanges(),t.setInputs(e,this.getInputs(e)),e.blueprint.dispatchEditTextEvent(!1)},this.#F.forEach((e=>{e.addEventListener("focus",this.onFocusHandler),e.addEventListener("focusout",this.onFocusOutHandler)}))}}cleanup(e){super.cleanup(e),this.#F.forEach((e=>{e.removeEventListener("focus",this.onFocusHandler),e.removeEventListener("focusout",this.onFocusOutHandler)}))}createInputObjects(e){return[...super.createInputObjects(e),...this.#F.map((t=>new $(t,e.blueprint)))]}getInput(e){return this.getInputs(e).reduce(((e,t)=>e+t),"")}getInputs(e){return this.#F.map((e=>e.innerHTML.replaceAll("
","\n")))}setInputs(e,t=[],n=!0){this.#F.forEach(((e,n)=>e.innerText=t[n])),n&&(e.entity.DefaultValue=this.getInput(e))}renderInput(e){return e.isInput()?T`
`:""}}class J extends Q{#z;setup(e){super.setup(e),this.#z=e.querySelector(".ueb-pin-input");let t=this;this.onChangeHandler=n=>e.entity.DefaultValue=t.#z.checked?"true":"false",this.#z.addEventListener("change",this.onChangeHandler)}cleanup(e){super.cleanup(e),this.#z.removeEventListener("change",this.onChangeHandler)}getInputs(e){return[this.#z.checked?"true":"false"]}setInputs(e,t=[]){e.entity.DefaultValue=t.length?t[0]:this.getInput(e),this.#z.checked="true"==e.entity.DefaultValue}renderInput(e){return e.isInput()?T``:super.renderInput(e)}}class ee extends Y{renderIcon(e){return T``}}class te extends Q{#z;setup(e){super.setup(e),this.#z=e.querySelector(".ueb-pin-input"),this.#z.dataset.linearColor=e.entity.DefaultValue.toString()}getInputs(e){return[this.#z.dataset.linearColor]}setInputs(e,t=[]){}renderInput(e){return e.isInput()?T``:super.renderInput(e)}}class ne extends Q{onInputHandler;setup(e){super.setup(e),this.onInputHandler=e=>{e.stopPropagation(),("insertParagraph"==e.inputType||"insertLineBreak"==e.inputType||"insertFromPaste"==e.inputType&&e.target.innerText.includes("\n"))&&(e.target.blur(),this.inputContentElements.forEach((e=>e.innerText=e.innerText.replaceAll("\n",""))))},this.inputContentElements.forEach((e=>{e.addEventListener("input",this.onInputHandler)}))}cleanup(e){super.cleanup(e),this.inputContentElements.forEach((e=>{e.removeEventListener("input",this.onInputHandler)}))}getInputs(e){return this.inputContentElements.map((e=>e.textContent))}setInputs(e,t=[],n=!0){t=t.map((e=>e.replaceAll("\n",""))),super.setInputs(e,t,n)}}class ie extends Q{setInputs(e,t=[]){let n=parseFloat(t.length?t[0]:this.getInput(e)),i=!0;isNaN(n)&&(n=parseFloat(""!=e.entity.DefaultValue?e.entity.DefaultValue:e.entity.AutogeneratedDefaultValue)),isNaN(n)&&(n=0,i=!1),t[0]=r.minDecimals(n),super.setInputs(e,t,i)}}class re extends Q{setup(e){super.setup(e)}}class se extends V{static#G={bool:J,exec:ee,name:ne,real:ie,string:re,struct:{"/Script/CoreUObject.LinearColor":te}};static getTypeTemplate(e){let t=se.#G[e.getType()];return t.constructor===Object&&(t=t[e.getSubCategory()]),t??Y}#B="";nodeElement;clickableElement;connections=0;constructor(e){super(e,new(se.getTypeTemplate(e)))}connectedCallback(){super.connectedCallback(),this.#B=window.getComputedStyle(this).getPropertyValue("--ueb-pin-color")}GetPinId(){return this.entity.PinId}GetPinIdValue(){return this.GetPinId().value}getPinName(){return this.entity.PinName}getPinDisplayName(){let e=null;return this.entity.PinToolTip&&(e=this.entity.PinToolTip.match(/\s*(.+?(?=\n)|.+\S)\s*/))?r.formatStringName(e[1]):r.formatStringName(this.entity.PinName)}isInput(){return this.entity.isInput()}isOutput(){return this.entity.isOutput()}isLinked(){return this.entity.isLinked()}getType(){return this.entity.getType()}getClickableElement(){return this.clickableElement}getColor(){return this.#B}getLinkLocation(){return this.template.getLinkLocation(this)}getNodeElement(){return this.closest("ueb-node")}getLinks(){return this.entity.LinkedTo??[]}sanitizeLinks(){this.entity.LinkedTo=this.getLinks().filter((e=>{let t=this.blueprint.getPin(e);if(t){this.blueprint.getLink(this,t,!0)||this.blueprint.addGraphElement(new _(this,t))}return t}))}linkTo(e){this.entity.linkTo(e.nodeElement.getNodeName(),e.entity),this.template.applyConnected(this)}unlinkFrom(e){this.entity.unlinkFrom(e.nodeElement.getNodeName(),e.entity),this.template.applyConnected(this)}redirectLink(e,t){const n=this.entity.LinkedTo.findIndex((t=>t.objectName.toString()==e.getPinName()&&t.pinGuid==e.entity.PinId));return n>=0&&(this.entity.LinkedTo[n]=t,!0)}}customElements.define("ueb-pin",se);class ae extends z{constructor(e,t,n){super(e,t,n),this.stepSize=parseInt(n?.stepSize??this.blueprint.gridSize),this.mouseLocation=[0,0]}startDrag(){this.mouseLocation=r.snapToGrid(this.clickedPosition,this.stepSize),this.target.selected||(this.blueprint.unselectAll(),this.target.setSelected(!0))}dragTo(e,t){const[n,i]=this.stepSize>1?[r.snapToGrid(e,this.stepSize),r.snapToGrid(this.target.location,this.stepSize)]:[e,this.target.location],s=[n[0]-this.mouseLocation[0],n[1]-this.mouseLocation[1]];0==s[0]&&0==s[1]||(s[0]+=i[0]-this.target.location[0],s[1]+=i[1]-this.target.location[1],this.target.dispatchDragEvent(s),this.mouseLocation=n)}unclicked(){this.started||(this.blueprint.unselectAll(),this.target.setSelected(!0))}}class oe extends O{createInputObjects(e){return[...super.createInputObjects(e),new ae(e,e.blueprint,{looseTarget:!0})]}applyLocation(e){e.style.setProperty("--ueb-position-x",W(e.location[0])),e.style.setProperty("--ueb-position-y",W(e.location[1]))}applySelected(e){e.selected?e.classList.add("ueb-selected"):e.classList.remove("ueb-selected")}}class le extends oe{toggleAdvancedDisplayHandler;render(e){return T`
${W(e.getNodeDisplayName())}
${"DevelopmentOnly"==e.entity.EnabledState?.toString()?T`
Development Only
`:""} ${e.entity.AdvancedPinDisplay?T`
`:""}
`}setup(e){super.setup(e),e.dataset.name=W(e.entity.getObjectName()),e.entity.EnabledState&&(e.dataset.enabledState=e.entity.EnabledState.toString()),e.selected&&e.classList.add("ueb-selected"),this.applyAdvancedPinDisplay(e),e.style.setProperty("--ueb-position-x",W(e.location[0])),e.style.setProperty("--ueb-position-y",W(e.location[1]));let t=e.querySelector(".ueb-node-inputs"),n=e.querySelector(".ueb-node-outputs"),i=e.getPinEntities();i.filter((e=>e.isInput())).forEach((e=>t.appendChild(new se(e)))),i.filter((e=>e.isOutput())).forEach((e=>n.appendChild(new se(e)))),this.toggleAdvancedDisplayHandler=t=>{e.toggleShowAdvancedPinDisplay()},e.entity.AdvancedPinDisplay&&e.querySelector(".ueb-node-expansion").addEventListener("click",this.toggleAdvancedDisplayHandler)}applyAdvancedPinDisplay(e){e.entity.AdvancedPinDisplay&&(e.dataset.advancedDisplay=e.entity.AdvancedPinDisplay.toString())}applyRename(e){const t=e.entity.getObjectName();e.dataset.name=W(t),e.querySelector(".ueb-node-name-text").innerText=W(e.getNodeDisplayName())}getPinElements(e){return e.querySelectorAll("ueb-pin")}}class ue extends K{constructor(e){super(e,new le),this.dragLinkObjects=[],super.setLocation([this.entity.NodePosX.value,this.entity.NodePosY.value])}static fromSerializedObject(e){e=e.trim();let t=L.getSerializer(v).deserialize(e);return new ue(t)}connectedCallback(){this.getAttribute("type")?.trim(),super.connectedCallback()}disconnectedCallback(){super.disconnectedCallback(),this.dispatchDeleteEvent()}getNodeName(){return this.entity.getObjectName()}getNodeDisplayName(){return this.entity.getDisplayName()}sanitizeLinks(){this.getPinElements().forEach((e=>e.sanitizeLinks()))}rename(e){if(this.entity.Name==e)return!1;for(let t of this.getPinElements())for(let n of t.getLinks())this.blueprint.getPin(n).redirectLink(t,new f({objectName:e,pinGuid:t.entity.PinId}));this.entity.Name=e,this.template.applyRename(this)}getPinElements(){return this.template.getPinElements(this)}getPinEntities(){return this.entity.CustomProperties.filter((e=>e instanceof y))}setLocation(e=[0,0]){let t=this.entity.NodePosX.constructor;this.entity.NodePosX=new t(e[0]),this.entity.NodePosY=new t(e[1]),super.setLocation(e)}dispatchDeleteEvent(t){let n=new CustomEvent(e.nodeDeleteEventName,{bubbles:!0,cancelable:!0});this.dispatchEvent(n)}setShowAdvancedPinDisplay(e){this.entity.AdvancedPinDisplay=new u(e?"Shown":"Hidden"),this.template.applyAdvancedPinDisplay(this)}toggleShowAdvancedPinDisplay(){this.setShowAdvancedPinDisplay("Shown"!=this.entity.AdvancedPinDisplay.value)}}customElements.define("ueb-node",ue);class ce extends t{#V;constructor(e,t,n={}){n.listenOnFocus=!0,n.unlistenOnTextEdit=!0,super(e,t,n),this.serializer=new N;let i=this;this.#V=e=>i.pasted(e.clipboardData.getData("Text"))}listenEvents(){document.body.addEventListener("paste",this.#V)}unlistenEvents(){document.body.removeEventListener("paste",this.#V)}pasted(e){let t=0,n=0,i=0,r=this.serializer.readMultiple(e).map((e=>{let r=new ue(e);return t+=r.location[1],n+=r.location[0],++i,r}));t/=i,n/=i,r.length>0&&this.blueprint.unselectAll();let s=this.blueprint.mousePosition;return r.forEach((e=>{const i=[s[0]-n,s[1]-t];e.addLocation(i),e.setSelected(!0),e.snapToGrid()})),this.blueprint.addGraphElement(...r),!0}}class de extends z{constructor(e,t,n){super(e,t,n),this.selectorElement=this.blueprint.selectorElement}startDrag(){this.selectorElement.startSelecting(this.clickedPosition)}dragTo(e,t){this.selectorElement.doSelecting(e)}endDrag(){this.started&&this.selectorElement.finishSelecting()}unclicked(){this.started||this.blueprint.unselectAll()}}class he{constructor(e=(e=>e),t=null){this.array=new Uint32Array(t),this.comparisonValueSupplier=e,this.length=0,this.currentPosition=0}get(e){return e>=0&&e=0&&this.currentPosition=0&&this.currentPosition0?this.get(this.currentPosition-1):null}getPrevValue(){return this.currentPosition>0?this.comparisonValueSupplier(this.get(this.currentPosition-1)):Number.MIN_SAFE_INTEGER}shiftLeft(e,t=1){this.array.set(this.array.subarray(e+t),e)}shiftRight(e,t=1){this.array.set(this.array.subarray(e,-t),e+t)}}class pe{constructor(e,t,n,i){this.initialPosition=e,this.finalPosition=e,this.metadata=new Array(t.length),this.primaryOrder=new he((e=>this.metadata[e].primaryBoundary)),this.secondaryOrder=new he((e=>this.metadata[e].secondaryBoundary)),this.selectFunc=i,this.rectangles=t,this.primaryOrder.reserve(this.rectangles.length),this.secondaryOrder.reserve(this.rectangles.length),t.forEach(((e,t)=>{let r={primaryBoundary:this.initialPosition[0],secondaryBoundary:this.initialPosition[1],rectangle:t,onSecondaryAxis:!1};this.metadata[t]=r,i(e,!1);const s=n(e);this.initialPosition[1]{if(this.metadata[n].onSecondaryAxis)this.selectFunc(this.rectangles[n],i);else if(i){this.secondaryOrder.insert(n,e[1]);const i=this.metadata[n].secondaryBoundary;Math.sign(e[1]-i)==t[1]&&Math.sign(i-this.initialPosition[1])==t[1]&&this.selectFunc(this.rectangles[n],!0)}else this.selectFunc(this.rectangles[n],!1),this.secondaryOrder.remove(n);this.computeBoundaries(),this.selectTo(e)};e[0]this.boundaries.primaryN.v&&e[0]this.boundaries.primaryP.v&&(++this.primaryOrder.currentPosition,n(this.boundaries.primaryP.i,this.initialPosition[0]{this.selectFunc(this.rectangles[t],n),this.computeBoundaries(),this.selectTo(e)};e[1]this.boundaries.secondaryN.v&&e[1]this.boundaries.secondaryP.v&&(++this.secondaryOrder.currentPosition,i(this.boundaries.secondaryP.i,this.initialPosition[1]i.clickedSomewhere(e.target),this.blueprint.focus&&document.addEventListener("click",this.#K)}clickedSomewhere(e){e.closest("ueb-blueprint")||this.blueprint.setFocused(!1)}listenEvents(){document.addEventListener("click",this.#K)}unlistenEvents(){document.removeEventListener("click",this.#K)}}class ye extends O{createInputObjects(e){return[new D(e.getGridDOMElement(),e),new ce(e.getGridDOMElement(),e),new A(e.getGridDOMElement(),e),new F(e.getGridDOMElement(),e),new H(e.getGridDOMElement(),e,{looseTarget:!0}),new de(e.getGridDOMElement(),e,{clickButton:0,exitAnyButton:!0,looseTarget:!0,moveEverywhere:!0}),new G(e.getGridDOMElement(),e,{clickButton:2,exitAnyButton:!1,looseTarget:!0,moveEverywhere:!0}),new fe(e.getGridDOMElement(),e),new B(e.getGridDOMElement(),e),new j(e.getGridDOMElement(),e)]}header(e){return T`
1:1
`}overlay(e){return T`
`}viewport(e){return T`
`}render(e){return T`${this.header(e)} ${this.overlay(e)} ${this.viewport(e)}`}setup(t){super.setup(t),t.classList.add("ueb",`ueb-zoom-${t.zoom}`),Object.entries({"--ueb-font-size":W(e.fontSize),"--ueb-grid-size":`${W(e.gridSize)}px`,"--ueb-grid-line-width":`${W(e.gridLineWidth)}px`,"--ueb-grid-line-color":W(e.gridLineColor),"--ueb-grid-set":W(e.gridSet),"--ueb-grid-set-line-color":W(e.gridSetLineColor),"--ueb-grid-axis-line-color":W(e.gridAxisLineColor),"--ueb-node-radius":`${W(e.nodeRadius)}px`,"--ueb-link-min-width":W(e.linkMinWidth)}).forEach((e=>t.style.setProperty(e[0],e[1]))),t.headerElement=t.querySelector(".ueb-viewport-header"),t.overlayElement=t.querySelector(".ueb-viewport-overlay"),t.viewportElement=t.querySelector(".ueb-viewport-body"),t.selectorElement=new ge,t.gridElement=t.viewportElement.querySelector(".ueb-grid"),t.querySelector(".ueb-grid-content").append(t.selectorElement),t.linksContainerElement=t.querySelector("[data-links]"),t.linksContainerElement.append(...t.getLinks()),t.nodesContainerElement=t.querySelector("[data-nodes]"),t.nodesContainerElement.append(...t.getNodes()),this.applyEndDragScrolling(t)}applyZoom(e,t){e.classList.remove("ueb-zoom-"+W(e.zoom)),e.classList.add("ueb-zoom-"+W(t))}applyExpand(e){e.gridElement.style.setProperty("--ueb-additional-x",W(e.additional[0])),e.gridElement.style.setProperty("--ueb-additional-y",W(e.additional[1]))}applyTranlate(e){e.gridElement.style.setProperty("--ueb-translate-x",W(e.translateValue[0])),e.gridElement.style.setProperty("--ueb-translate-y",W(e.translateValue[1]))}applyStartDragScrolling(e){e.dataset.dragScrolling="true"}applyEndDragScrolling(e){e.dataset.dragScrolling="false"}getPin(e,t){return e.querySelector(`ueb-node[data-name="${t.objectName}"] ueb-pin[data-id="${t.pinGuid}"]`)}}class be extends V{#$;get additional(){return this.#$}set additional(e){e[0]=Math.abs(e[0]),e[1]=Math.abs(e[1])}#R;get translateValue(){return this.#R}set translateValue(e){this.#R=e}#W=new Map;gridSize;nodes=[];links=[];mousePosition=[0,0];gridElement=null;viewportElement=null;overlayElement=null;selectorElement=null;linksContainerElement=null;nodesContainerElement=null;zoom=0;headerElement=null;focused=!1;nodeBoundariesSupplier=e=>{let t=e.getBoundingClientRect(),n=this.nodesContainerElement.getBoundingClientRect();const i=1/this.getScale();return{primaryInf:(t.left-n.left)*i,primarySup:(t.right-n.right)*i,secondaryInf:(t.top-n.top)*i,secondarySup:(t.bottom-n.bottom)*i}};nodeSelectToggleFunction=(e,t)=>{e.setSelected(t)};constructor(t=new e){super({},new ye),this.gridSize=e.gridSize,this.#$=[2*e.expandGridSize,2*e.expandGridSize],this.#R=[e.expandGridSize,e.expandGridSize]}#q(e,t){e=Math.round(e),t=Math.round(t),this.additional[0]+=e,this.additional[1]+=t,this.template.applyExpand(this)}#_(e,t){e=Math.round(e),t=Math.round(t),this.translateValue[0]+=e,this.translateValue[1]+=t,this.template.applyTranlate(this)}getGridDOMElement(){return this.gridElement}disconnectedCallback(){super.disconnectedCallback()}getScroll(){return[this.viewportElement.scrollLeft,this.viewportElement.scrollTop]}setScroll(e,t=!1){this.scroll=e,t?this.viewportElement.scroll({left:e[0],top:e[1],behavior:"smooth"}):this.viewportElement.scroll(e[0],e[1])}scrollDelta(t,n=!1){const i=this.getScrollMax();let r=this.getScroll(),s=[r[0]+t[0],r[1]+t[1]],a=[0,0],o=[0,0],l=[0,0];for(let n=0;n<2;++n)t[n]<0&&s[n]e.gridShrinkThreshold*e.expandGridSize&&(o[n]=-e.expandGridSize)):t[n]>0&&s[n]>i[n]-e.gridExpandThreshold*e.expandGridSize&&(a[n]=e.expandGridSize,l[n]=1,s[n]>e.gridShrinkThreshold*e.expandGridSize&&(o[n]=-e.expandGridSize));0==a[0]&&0==a[1]||(this.seamlessExpand(a,l),l=[-l[0],-l[1]],this.seamlessExpand(o,l)),r=this.getScroll(),s=[r[0]+t[0],r[1]+t[1]],this.setScroll(s,n)}scrollCenter(){const e=this.getScroll(),t=[this.translateValue[0]-e[0],this.translateValue[1]-e[1]],n=this.getViewportSize().map((e=>e/2)),i=[t[0]-n[0],t[1]-n[1]];this.scrollDelta(i,!0)}getExpandGridSize(){return e.expandGridSize}getViewportSize(){return[this.viewportElement.clientWidth,this.viewportElement.clientHeight]}getScrollMax(){return[this.viewportElement.scrollWidth-this.viewportElement.clientWidth,this.viewportElement.scrollHeight-this.viewportElement.clientHeight]}snapToGrid(e){return r.snapToGrid(e,this.gridSize)}seamlessExpand([e,t],[n,i]=[1,1]){this.viewportElement.scrollLeft,this.viewportElement.scrollTop;let r=this.getScale(),s=e/r,a=t/r;this.#q(s,a);const o=[0,0];n<0&&(this.viewportElement.scrollLeft+=e,o[0]=s),i<0&&(this.viewportElement.scrollTop+=t,o[1]=a),this.#_(o[0],o[1])}progressiveSnapToGrid(t){return e.expandGridSize*Math.round(t/e.expandGridSize+.5*Math.sign(t))}getZoom(){return this.zoom}setZoom(t,n){if((t=r.clamp(t,e.minZoom,e.maxZoom))==this.zoom)return;let i=this.getScale();if(this.template.applyZoom(this,t),this.zoom=t,n){n[0]+=this.translateValue[0],n[1]+=this.translateValue[1];let e=this.getScale()/i,t=[e*n[0],e*n[1]];this.scrollDelta([(t[0]-n[0])*i,(t[1]-n[1])*i])}}getScale(){return parseFloat(getComputedStyle(this.gridElement).getPropertyValue("--ueb-scale"))}compensateTranslation(e){return e[0]-=this.translateValue[0],e[1]-=this.translateValue[1],e}getNodes(e=!1){return e?this.nodes.filter((e=>e.selected)):this.nodes}getPin(e){return this.template.getPin(this,e)}getLinks([e,t]=[]){if(null==e!=t==null){const n=e??t;return this.links.filter((e=>e.sourcePin==n||e.destinationPin==n))}return null!=e&&null!=t?this.links.filter((n=>n.sourcePin==e&&n.destinationPin==t||n.sourcePin==t&&n.destinationPin==e)):this.links}getLink(e,t,n=!1){return this.links.find((i=>i.sourcePin==e&&i.destinationPin==t||n&&i.sourcePin==t&&i.destinationPin==e))}selectAll(){this.getNodes().forEach((e=>this.nodeSelectToggleFunction(e,!0)))}unselectAll(){this.getNodes().forEach((e=>this.nodeSelectToggleFunction(e,!1)))}addGraphElement(...t){for(let n of t)if(n instanceof ue&&!this.nodes.includes(n)){const t=n.entity.getObjectName(),i=this.nodes.find((e=>e.entity.getObjectName()==t));if(i){let t=i.entity.getObjectName(!0);this.#W[t]=this.#W[t]??-1;do{++this.#W[t]}while(this.nodes.find((n=>n.entity.getObjectName()==e.nodeName(t,this.#W[t]))));i.rename(e.nodeName(t,this.#W[t]))}this.nodes.push(n),this.nodesContainerElement?.appendChild(n)}else n instanceof _&&!this.links.includes(n)&&(this.links.push(n),this.linksContainerElement?.appendChild(n));t.filter((e=>e instanceof ue)).forEach((e=>e.sanitizeLinks()))}removeGraphElement(...e){for(let t of e)if(t.closest("ueb-blueprint")==this){t.remove();let e=t instanceof ue?this.nodes:t instanceof _?this.links:null;e?.splice(e.findIndex((e=>e===t)),1)}}setFocused(e=!0){if(this.focused==e)return;let t=new CustomEvent(e?"blueprint-focus":"blueprint-unfocus");this.focused=e,this.dataset.focused=this.focused?"true":"false",this.focused||this.unselectAll(),this.dispatchEvent(t)}dispatchEditTextEvent(t){const n=new CustomEvent(t?e.editTextEventName.begin:e.editTextEventName.end);this.dispatchEvent(n)}}customElements.define("ueb-blueprint",be);class ve extends x{constructor(e,t,n,i,r,s,a){e=e??(e=>`(${e})`),super(t,n,i,r,s,a),this.wrap=e}read(e){const t=k.getGrammarForType(x.grammar,this.entityType).parse(e);if(!t.status)throw new Error(`Error when trying to parse the entity ${this.entityType.prototype.constructor.name}.`);return t.value}write(e,t=!1){return this.wrap(this.subWrite([],e,t))}}class Ee extends ve{constructor(e,t){super(void 0,t),this.objectWriter=e}write(e,t=!1){return this.objectWriter(e,t)}}class Se extends ve{constructor(){super((e=>`${y.lookbehind} (${e})`),y,"",",",!0)}writeValue(e,t,n){return e?.constructor===String&&1==t.length&&"DefaultValue"==t[0]?`"${r.encodeInputString(e)}"`:super.writeValue(e,t,n)}}class we extends ve{constructor(e){super(void 0,e)}write(e,t){return t||e.isShownAsString()?`"${e.toString().replaceAll('"','\\"')}"`:e.toString()}}!function(){const e=e=>`(${e})`;L.registerSerializer(p,new ve(e,p)),L.registerSerializer(v,new N),L.registerSerializer(y,new Se),L.registerSerializer(o,new ve(e,o)),L.registerSerializer(h,new ve(e,h)),L.registerSerializer(m,new ve((e=>`${m.lookbehind}(${e})`),m,"",", ",!1,"",(e=>""))),L.registerSerializer(d,new ve((e=>`${d.lookbehind}(${e})`),d,"",", ",!1,"",(e=>""))),L.registerSerializer(f,new ve((e=>e),f,""," ",!1,"",(e=>""))),L.registerSerializer(a,new Ee((e=>(e.type??"")+(e.path?e.type?`'"${e.path}"'`:`"${e.path}"`:"")),a)),L.registerSerializer(u,new we(u)),L.registerSerializer(g,new we(g)),L.registerSerializer(l,new we(l)),L.registerSerializer(c,new we(c))}();export{be as Blueprint,e as Configuration,_ as LinkElement,ue as NodeElement}; +/** + * @license + * Copyright 2019 Google LLC + * SPDX-License-Identifier: BSD-3-Clause + */ +const e=window.ShadowRoot&&(void 0===window.ShadyCSS||window.ShadyCSS.nativeShadow)&&"adoptedStyleSheets"in Document.prototype&&"replace"in CSSStyleSheet.prototype,t=Symbol(),n=new WeakMap;class i{constructor(e,n,i){if(this._$cssResult$=!0,i!==t)throw Error("CSSResult is not constructable. Use `unsafeCSS` or `css` instead.");this.cssText=e,this.t=n}get styleSheet(){let t=this.o;const i=this.t;if(e&&void 0===t){const e=void 0!==i&&1===i.length;e&&(t=n.get(i)),void 0===t&&((this.o=t=new CSSStyleSheet).replaceSync(this.cssText),e&&n.set(i,t))}return t}toString(){return this.cssText}}const r=(e,...n)=>{const r=1===e.length?e[0]:n.reduce(((t,n,i)=>t+(e=>{if(!0===e._$cssResult$)return e.cssText;if("number"==typeof e)return e;throw Error("Value passed to 'css' function must be a 'css' function result: "+e+". Use 'unsafeCSS' to pass non-literal values, but take care to ensure page security.")})(n)+e[i+1]),e[0]);return new i(r,e,t)},s=e?e=>e:e=>e instanceof CSSStyleSheet?(e=>{let n="";for(const t of e.cssRules)n+=t.cssText;return(e=>new i("string"==typeof e?e:e+"",void 0,t))(n)})(e):e +/** + * @license + * Copyright 2017 Google LLC + * SPDX-License-Identifier: BSD-3-Clause + */;var o;const a=window.trustedTypes,l=a?a.emptyScript:"",u=window.reactiveElementPolyfillSupport,c={toAttribute(e,t){switch(t){case Boolean:e=e?l:null;break;case Object:case Array:e=null==e?e:JSON.stringify(e)}return e},fromAttribute(e,t){let n=e;switch(t){case Boolean:n=null!==e;break;case Number:n=null===e?null:Number(e);break;case Object:case Array:try{n=JSON.parse(e)}catch(e){n=null}}return n}},d=(e,t)=>t!==e&&(t==t||e==e),h={attribute:!0,type:String,converter:c,reflect:!1,hasChanged:d};class p extends HTMLElement{constructor(){super(),this._$Ei=new Map,this.isUpdatePending=!1,this.hasUpdated=!1,this._$El=null,this.u()}static addInitializer(e){var t;null!==(t=this.h)&&void 0!==t||(this.h=[]),this.h.push(e)}static get observedAttributes(){this.finalize();const e=[];return this.elementProperties.forEach(((t,n)=>{const i=this._$Ep(n,t);void 0!==i&&(this._$Ev.set(i,n),e.push(i))})),e}static createProperty(e,t=h){if(t.state&&(t.attribute=!1),this.finalize(),this.elementProperties.set(e,t),!t.noAccessor&&!this.prototype.hasOwnProperty(e)){const n="symbol"==typeof e?Symbol():"__"+e,i=this.getPropertyDescriptor(e,n,t);void 0!==i&&Object.defineProperty(this.prototype,e,i)}}static getPropertyDescriptor(e,t,n){return{get(){return this[t]},set(i){const r=this[e];this[t]=i,this.requestUpdate(e,r,n)},configurable:!0,enumerable:!0}}static getPropertyOptions(e){return this.elementProperties.get(e)||h}static finalize(){if(this.hasOwnProperty("finalized"))return!1;this.finalized=!0;const e=Object.getPrototypeOf(this);if(e.finalize(),this.elementProperties=new Map(e.elementProperties),this._$Ev=new Map,this.hasOwnProperty("properties")){const e=this.properties,t=[...Object.getOwnPropertyNames(e),...Object.getOwnPropertySymbols(e)];for(const n of t)this.createProperty(n,e[n])}return this.elementStyles=this.finalizeStyles(this.styles),!0}static finalizeStyles(e){const t=[];if(Array.isArray(e)){const n=new Set(e.flat(1/0).reverse());for(const e of n)t.unshift(s(e))}else void 0!==e&&t.push(s(e));return t}static _$Ep(e,t){const n=t.attribute;return!1===n?void 0:"string"==typeof n?n:"string"==typeof e?e.toLowerCase():void 0}u(){var e;this._$E_=new Promise((e=>this.enableUpdating=e)),this._$AL=new Map,this._$Eg(),this.requestUpdate(),null===(e=this.constructor.h)||void 0===e||e.forEach((e=>e(this)))}addController(e){var t,n;(null!==(t=this._$ES)&&void 0!==t?t:this._$ES=[]).push(e),void 0!==this.renderRoot&&this.isConnected&&(null===(n=e.hostConnected)||void 0===n||n.call(e))}removeController(e){var t;null===(t=this._$ES)||void 0===t||t.splice(this._$ES.indexOf(e)>>>0,1)}_$Eg(){this.constructor.elementProperties.forEach(((e,t)=>{this.hasOwnProperty(t)&&(this._$Ei.set(t,this[t]),delete this[t])}))}createRenderRoot(){var t;const n=null!==(t=this.shadowRoot)&&void 0!==t?t:this.attachShadow(this.constructor.shadowRootOptions);return((t,n)=>{e?t.adoptedStyleSheets=n.map((e=>e instanceof CSSStyleSheet?e:e.styleSheet)):n.forEach((e=>{const n=document.createElement("style"),i=window.litNonce;void 0!==i&&n.setAttribute("nonce",i),n.textContent=e.cssText,t.appendChild(n)}))})(n,this.constructor.elementStyles),n}connectedCallback(){var e;void 0===this.renderRoot&&(this.renderRoot=this.createRenderRoot()),this.enableUpdating(!0),null===(e=this._$ES)||void 0===e||e.forEach((e=>{var t;return null===(t=e.hostConnected)||void 0===t?void 0:t.call(e)}))}enableUpdating(e){}disconnectedCallback(){var e;null===(e=this._$ES)||void 0===e||e.forEach((e=>{var t;return null===(t=e.hostDisconnected)||void 0===t?void 0:t.call(e)}))}attributeChangedCallback(e,t,n){this._$AK(e,n)}_$EO(e,t,n=h){var i,r;const s=this.constructor._$Ep(e,n);if(void 0!==s&&!0===n.reflect){const o=(null!==(r=null===(i=n.converter)||void 0===i?void 0:i.toAttribute)&&void 0!==r?r:c.toAttribute)(t,n.type);this._$El=e,null==o?this.removeAttribute(s):this.setAttribute(s,o),this._$El=null}}_$AK(e,t){var n,i;const r=this.constructor,s=r._$Ev.get(e);if(void 0!==s&&this._$El!==s){const e=r.getPropertyOptions(s),o=e.converter,a=null!==(i=null!==(n=null==o?void 0:o.fromAttribute)&&void 0!==n?n:"function"==typeof o?o:null)&&void 0!==i?i:c.fromAttribute;this._$El=s,this[s]=a(t,e.type),this._$El=null}}requestUpdate(e,t,n){let i=!0;void 0!==e&&(((n=n||this.constructor.getPropertyOptions(e)).hasChanged||d)(this[e],t)?(this._$AL.has(e)||this._$AL.set(e,t),!0===n.reflect&&this._$El!==e&&(void 0===this._$EC&&(this._$EC=new Map),this._$EC.set(e,n))):i=!1),!this.isUpdatePending&&i&&(this._$E_=this._$Ej())}async _$Ej(){this.isUpdatePending=!0;try{await this._$E_}catch(e){Promise.reject(e)}const e=this.scheduleUpdate();return null!=e&&await e,!this.isUpdatePending}scheduleUpdate(){return this.performUpdate()}performUpdate(){var e;if(!this.isUpdatePending)return;this.hasUpdated,this._$Ei&&(this._$Ei.forEach(((e,t)=>this[t]=e)),this._$Ei=void 0);let t=!1;const n=this._$AL;try{t=this.shouldUpdate(n),t?(this.willUpdate(n),null===(e=this._$ES)||void 0===e||e.forEach((e=>{var t;return null===(t=e.hostUpdate)||void 0===t?void 0:t.call(e)})),this.update(n)):this._$Ek()}catch(e){throw t=!1,this._$Ek(),e}t&&this._$AE(n)}willUpdate(e){}_$AE(e){var t;null===(t=this._$ES)||void 0===t||t.forEach((e=>{var t;return null===(t=e.hostUpdated)||void 0===t?void 0:t.call(e)})),this.hasUpdated||(this.hasUpdated=!0,this.firstUpdated(e)),this.updated(e)}_$Ek(){this._$AL=new Map,this.isUpdatePending=!1}get updateComplete(){return this.getUpdateComplete()}getUpdateComplete(){return this._$E_}shouldUpdate(e){return!0}update(e){void 0!==this._$EC&&(this._$EC.forEach(((e,t)=>this._$EO(t,this[t],e))),this._$EC=void 0),this._$Ek()}updated(e){}firstUpdated(e){}} +/** + * @license + * Copyright 2017 Google LLC + * SPDX-License-Identifier: BSD-3-Clause + */ +var g;p.finalized=!0,p.elementProperties=new Map,p.elementStyles=[],p.shadowRootOptions={mode:"open"},null==u||u({ReactiveElement:p}),(null!==(o=globalThis.reactiveElementVersions)&&void 0!==o?o:globalThis.reactiveElementVersions=[]).push("1.3.4");const m=globalThis.trustedTypes,f=m?m.createPolicy("lit-html",{createHTML:e=>e}):void 0,v=`lit$${(Math.random()+"").slice(9)}$`,b="?"+v,y=`<${b}>`,E=document,w=(e="")=>E.createComment(e),P=e=>null===e||"object"!=typeof e&&"function"!=typeof e,S=Array.isArray,k=/<(?:(!--|\/[^a-zA-Z])|(\/?[a-zA-Z][^>\s]*)|(\/?$))/g,x=/-->/g,A=/>/g,N=RegExp(">|[ \t\n\f\r](?:([^\\s\"'>=/]+)([ \t\n\f\r]*=[ \t\n\f\r]*(?:[^ \t\n\f\r\"'`<>=]|(\"|')|))|$)","g"),$=/'/g,C=/"/g,L=/^(?:script|style|textarea|title)$/i,O=(e=>(t,...n)=>({_$litType$:e,strings:t,values:n}))(1),D=Symbol.for("lit-noChange"),T=Symbol.for("lit-nothing"),M=new WeakMap,_=E.createTreeWalker(E,129,null,!1),I=(e,t)=>{const n=e.length-1,i=[];let r,s=2===t?"":"",o=k;for(let t=0;t"===l[0]?(o=null!=r?r:k,u=-1):void 0===l[1]?u=-2:(u=o.lastIndex-l[2].length,a=l[1],o=void 0===l[3]?N:'"'===l[3]?C:$):o===C||o===$?o=N:o===x||o===A?o=k:(o=N,r=void 0);const d=o===N&&e[t+1].startsWith("/>")?" ":"";s+=o===k?n+y:u>=0?(i.push(a),n.slice(0,u)+"$lit$"+n.slice(u)+v+d):n+v+(-2===u?(i.push(void 0),t):d)}const a=s+(e[n]||"")+(2===t?"":"");if(!Array.isArray(e)||!e.hasOwnProperty("raw"))throw Error("invalid template strings array");return[void 0!==f?f.createHTML(a):a,i]};class H{constructor({strings:e,_$litType$:t},n){let i;this.parts=[];let r=0,s=0;const o=e.length-1,a=this.parts,[l,u]=I(e,t);if(this.el=H.createElement(l,n),_.currentNode=this.el.content,2===t){const e=this.el.content,t=e.firstChild;t.remove(),e.append(...t.childNodes)}for(;null!==(i=_.nextNode())&&a.length0){i.textContent=m?m.emptyScript:"";for(let n=0;nS(e)||"function"==typeof(null==e?void 0:e[Symbol.iterator]))(e)?this.S(e):this.T(e)}j(e,t=this._$AB){return this._$AA.parentNode.insertBefore(e,t)}k(e){this._$AH!==e&&(this._$AR(),this._$AH=this.j(e))}T(e){this._$AH!==T&&P(this._$AH)?this._$AA.nextSibling.data=e:this.k(E.createTextNode(e)),this._$AH=e}$(e){var t;const{values:n,_$litType$:i}=e,r="number"==typeof i?this._$AC(e):(void 0===i.el&&(i.el=H.createElement(i.h,this.options)),i);if((null===(t=this._$AH)||void 0===t?void 0:t._$AD)===r)this._$AH.m(n);else{const e=new B(r,this),t=e.p(this.options);e.m(n),this.k(t),this._$AH=e}}_$AC(e){let t=M.get(e.strings);return void 0===t&&M.set(e.strings,t=new H(e)),t}S(e){S(this._$AH)||(this._$AH=[],this._$AR());const t=this._$AH;let n,i=0;for(const r of e)i===t.length?t.push(n=new F(this.j(w()),this.j(w()),this,this.options)):n=t[i],n._$AI(r),i++;i2||""!==n[0]||""!==n[1]?(this._$AH=Array(n.length-1).fill(new String),this.strings=n):this._$AH=T}get tagName(){return this.element.tagName}get _$AU(){return this._$AM._$AU}_$AI(e,t=this,n,i){const r=this.strings;let s=!1;if(void 0===r)e=j(this,e,t,0),s=!P(e)||e!==this._$AH&&e!==D,s&&(this._$AH=e);else{const i=e;let o,a;for(e=r[0],o=0;o{var i,r;const s=null!==(i=null==n?void 0:n.renderBefore)&&void 0!==i?i:t;let o=s._$litPart$;if(void 0===o){const e=null!==(r=null==n?void 0:n.renderBefore)&&void 0!==r?r:null;s._$litPart$=o=new F(t.insertBefore(w(),e),e,void 0,null!=n?n:{})}return o._$AI(e),o})(t,this.renderRoot,this.renderOptions)}connectedCallback(){var e;super.connectedCallback(),null===(e=this._$Do)||void 0===e||e.setConnected(!0)}disconnectedCallback(){var e;super.disconnectedCallback(),null===(e=this._$Do)||void 0===e||e.setConnected(!1)}render(){return D}}q.finalized=!0,q._$litElement$=!0,null===(X=globalThis.litElementHydrateSupport)||void 0===X||X.call(globalThis,{LitElement:q});const Z=globalThis.litElementPolyfillSupport;null==Z||Z({LitElement:q}),(null!==(Y=globalThis.litElementVersions)&&void 0!==Y?Y:globalThis.litElementVersions=[]).push("3.2.2");class J{static deleteNodesKeyboardKey="Delete";static editTextEventName={begin:"ueb-edit-text-begin",end:"ueb-edit-text-end"};static enableZoomIn=["LeftControl","RightControl"];static expandGridSize=400;static focusEventName={begin:"blueprint-focus",end:"blueprint-unfocus"};static fontSize=r``;static gridAxisLineColor=r``;static gridExpandThreshold=.25;static gridLineColor=r``;static gridLineWidth=1;static gridSet=8;static gridSetLineColor=r``;static gridShrinkThreshold=4;static gridSize=16;static hexColorRegex=/^\s*#(?[0-9a-fA-F]{2})(?[0-9a-fA-F]{2})(?[0-9a-fA-F]{2})([0-9a-fA-F]{2})?|#(?[0-9a-fA-F])(?[0-9a-fA-F])(?[0-9a-fA-F])\s*$/;static keysSeparator="+";static linkCurveHeight=15;static linkCurveWidth=80;static linkMinWidth=100;static linkRightSVGPath=(e,t,n)=>{let i=100-e;return`M ${e} 0 C ${t} 0, ${n} 0, 50 50 S ${i-t+e} 100, ${i} 100`};static maxZoom=7;static minZoom=-12;static mouseWheelFactor=.2;static nodeDeleteEventName="ueb-node-delete";static nodeDragEventName="ueb-node-drag";static nodeDragLocalEventName="ueb-node-drag-local";static nodeName=(e,t)=>`${e}_${t}`;static nodeRadius=8;static nodeReflowEventName="ueb-node-reflow";static pinColor={bool:r``,default:r``,exec:r``,name:r``,real:r``,string:r``,struct:r``};static selectAllKeyboardKey="(bCtrl=True,Key=A)";static trackingMouseEventName={begin:"ueb-tracking-mouse-begin",end:"ueb-tracking-mouse-end"};static ModifierKeys=["Ctrl","Shift","Alt","Meta"];static Keys={Backspace:"Backspace",Tab:"Tab",LeftControl:"ControlLeft",RightControl:"ControlRight",LeftShift:"ShiftLeft",RightShift:"ShiftRight",LeftAlt:"AltLeft",RightAlt:"AltRight",Enter:"Enter",Pause:"Pause",CapsLock:"CapsLock",Escape:"Escape",Space:"Space",PageUp:"PageUp",PageDown:"PageDown",End:"End",Home:"Home",ArrowLeft:"Left",ArrowUp:"Up",ArrowRight:"Right",ArrowDown:"Down",PrintScreen:"PrintScreen",Insert:"Insert",Delete:"Delete",Zero:"Digit0",One:"Digit1",Two:"Digit2",Three:"Digit3",Four:"Digit4",Five:"Digit5",Six:"Digit6",Seven:"Digit7",Eight:"Digit8",Nine:"Digit9",A:"KeyA",B:"KeyB",C:"KeyC",D:"KeyD",E:"KeyE",F:"KeyF",G:"KeyG",H:"KeyH",I:"KeyI",K:"KeyK",L:"KeyL",M:"KeyM",N:"KeyN",O:"KeyO",P:"KeyP",Q:"KeyQ",R:"KeyR",S:"KeyS",T:"KeyT",U:"KeyU",V:"KeyV",W:"KeyW",X:"KeyX",Y:"KeyY",Z:"KeyZ",NumPadZero:"Numpad0",NumPadOne:"Numpad1",NumPadTwo:"Numpad2",NumPadThree:"Numpad3",NumPadFour:"Numpad4",NumPadFive:"Numpad5",NumPadSix:"Numpad6",NumPadSeven:"Numpad7",NumPadEight:"Numpad8",NumPadNine:"Numpad9",Multiply:"NumpadMultiply",Add:"NumpadAdd",Subtract:"NumpadSubtract",Decimal:"NumpadDecimal",Divide:"NumpadDivide",F1:"F1",F2:"F2",F3:"F3",F4:"F4",F5:"F5",F6:"F6",F7:"F7",F8:"F8",F9:"F9",F10:"F10",F11:"F11",F12:"F12",NumLock:"NumLock",ScrollLock:"ScrollLock"}}class Q{#e;get target(){return this.#e}#t;get blueprint(){return this.#t}options;constructor(e,t,n){this.#e=e,this.#t=t,n.consumeEvent??=!1,n.listenOnFocus??=!1,n.unlistenOnTextEdit??=!1,this.options=n;let i=this;this.listenHandler=e=>i.listenEvents(),this.unlistenHandler=e=>i.unlistenEvents(),this.options.listenOnFocus&&(this.blueprint.addEventListener(J.focusEventName.begin,this.listenHandler),this.blueprint.addEventListener(J.focusEventName.end,this.unlistenHandler)),this.options.unlistenOnTextEdit&&(this.blueprint.addEventListener(J.editTextEventName.begin,this.unlistenHandler),this.blueprint.addEventListener(J.editTextEventName.end,this.listenHandler))}unlistenDOMElement(){this.unlistenEvents(),this.blueprint.removeEventListener(J.focusEventName.begin,this.listenHandler),this.blueprint.removeEventListener(J.focusEventName.end,this.unlistenHandler),this.blueprint.removeEventListener(J.editTextEventName.begin,this.unlistenHandler),this.blueprint.removeEventListener(J.editTextEventName.end,this.listenHandler)}listenEvents(){}unlistenEvents(){}}class ee{#n;get types(){return this.#n}set types(e){this.#n=e}constructor(...e){this.#n=e}}class te{#i;get type(){return this.#i}set type(e){this.#i=e}#r=!0;get showDefault(){return this.#r}set showDefault(e){this.#r=e}#s;get value(){return this.#s}set value(e){this.#s=e}static sanitize(e,t){return void 0===t&&(t=e?.constructor),t&&t!==ee&&!(e?.constructor===t||e instanceof t)&&(e=new t(e)),(e instanceof Boolean||e instanceof Number||e instanceof String)&&(e=e.valueOf()),e}constructor(e,t=!0,n){void 0===n&&(n=e instanceof Array?[]:e instanceof ee?"":te.sanitize(new e)),this.#r=t,this.#i=e}}class ne{static booleanConverter={fromAttribute:(e,t)=>{},toAttribute:(e,t)=>!0===e?"true":!1===e?"false":""};static sigmoid(e,t=1.7){return 1/(1+e/(1-e)**-t)}static clamp(e,t,n){return Math.min(Math.max(e,t),n)}static getScale(e){return Number(getComputedStyle(e).getPropertyValue("--ueb-scale"))}static minDecimals(e,t=1){const n=e*10**t;return Math.abs(n%1)>Number.EPSILON?e.toString():e.toFixed(t)}static convertLocation(e,t){const n=1/ne.getScale(t),i=t.getBoundingClientRect();return[Math.round((e[0]-i.x)*n),Math.round((e[1]-i.y)*n)]}static objectGet(e,t,n){if(void 0!==e){if(!(t instanceof Array))throw new TypeError("Expected keys to be an array.");return 0!=t.length&&t[0]in e&&void 0!==e[t[0]]?1==t.length?e[t[0]]:ne.objectGet(e[t[0]],t.slice(1),n):n}}static objectSet(e,t,n,i=!1,r=Object){if(!(t instanceof Array))throw new TypeError("Expected keys to be an array.");if(1==t.length){if(i||t[0]in e||void 0===e[t[0]])return e[t[0]]=n,!0}else if(t.length>0)return!i||e[t[0]]instanceof Object||(e[t[0]]=new r),ne.objectSet(e[t[0]],t.slice(1),n,i,r);return!1}static equals(e,t){return(e=te.sanitize(e))===(t=te.sanitize(t))||(e instanceof Array&&t instanceof Array?e.length==t.length&&!e.find(((e,n)=>!ne.equals(e,t[n]))):void 0)}static FirstCapital(e){return e.charAt(0).toUpperCase()+e.substring(1)}static getType(e){let t=e?.constructor;switch(t){case te:return ne.getType(e.type);case Function:return e;default:return t}}static snapToGrid(e,t){return 1===t?e:[t*Math.round(e[0]/t),t*Math.round(e[1]/t)]}static mergeArrays(e=[],t=[]){let n=[];for(let i=0;i{t(this[e])}))}}})}return!0}unsubscribe(e,t){let n=this.#o.get(e);if(!n?.includes(t))return!1;if(n.splice(n.indexOf(t),1),0==n.length){const t=Symbol.for(e+"Storage"),n=Symbol.for(e+"ValInfo"),i=this[n][0];this[n][1],Object.defineProperty(i?Object.getPrototypeOf(this):this,e,Object.getOwnPropertyDescriptor(i?Object.getPrototypeOf(this):this,t)),delete this[n],delete this[t]}return!0}}{static attributes={};#a=!1;constructor(e){super();const t=(e,n,i,r="")=>{for(let s of ne.mergeArrays(Object.getOwnPropertyNames(n),Object.getOwnPropertyNames(i??{}))){let o=n[s];const a=ne.getType(o);if(s in n?null==o||o instanceof te&&!o.showDefault||s in i||console.warn(`${this.constructor.name} adds property ${r}${s} not defined in the serialized data`):console.warn(`Property ${r}${s} is not defined in ${this.constructor.name}`),a===Object){e[s]={},t(e[s],n[s],i[s],s+".");continue}const l=ne.objectGet(i,[s]);if(void 0===l){if(o instanceof te){if(!o.showDefault){e[s]=void 0;continue}o=o.value}o instanceof Array?e[s]=[]:(o instanceof Function&&(o=te.sanitize(new o,a)),e[s]=te.sanitize(o,a))}else e[s]=te.sanitize(l,a)}},n=this.constructor.attributes;e.constructor!==Object&&1==Object.getOwnPropertyNames(n).length&&(e={[Object.getOwnPropertyNames(n)[0]]:e}),t(this,n,e)}isShownAsString(){return this.#a}setShowAsString(e){this.#a=e}}class re extends ie{static attributes={type:String,path:String}}class se extends ie{static attributes={MemberParent:re,MemberName:""}}class oe extends ie{static attributes={value:String};static generateGuid(e=!0){let t=new Uint32Array(4);!0===e&&crypto.getRandomValues(t);let n="";return t.forEach((e=>{n+=("0".repeat(8)+e.toString(16).toUpperCase()).slice(-8)})),new oe({value:n})}valueOf(){return this.value}toString(){return this.value}}class ae extends ie{static attributes={value:String};static attributeConverter={fromAttribute:(e,t)=>new ae(e),toAttribute:(e,t)=>e.toString()};valueOf(){return this.value}toString(){return this.value}}class le extends ie{static attributes={value:Number};constructor(e=0){super(e),this.value=Math.round(this.value)}valueOf(){return this.value}toString(){return this.value.toString()}}class ue extends ie{static lookbehind="INVTEXT";static attributes={value:String}}class ce extends ie{static attributes={ActionName:"",bShift:!1,bCtrl:!1,bAlt:!1,bCmd:!1,Key:ae};constructor(e={}){e.ActionName=e.ActionName??"",e.bShift=e.bShift??!1,e.bCtrl=e.bCtrl??!1,e.bAlt=e.bAlt??!1,e.bCmd=e.bCmd??!1,super(e)}}class de extends ie{static attributes={R:Number,G:Number,B:Number,A:Number}}class he extends ie{static lookbehind="NSLOCTEXT";static attributes={namespace:String,key:String,value:String}}class pe extends ie{static attributes={value:String};valueOf(){return this.value}toString(){return this.value}}class ge extends ie{static attributes={objectName:pe,pinGuid:oe}}class me extends ie{static lookbehind="Pin";static attributes={PinId:oe,PinName:"",PinFriendlyName:new te(he,!1,null),PinToolTip:"",Direction:new te(String,!1,""),PinType:{PinCategory:"",PinSubCategory:"",PinSubCategoryObject:re,PinSubCategoryMemberReference:null,PinValueType:null,ContainerType:re,bIsReference:!1,bIsConst:!1,bIsWeakPointer:!1,bIsUObjectWrapper:!1,bSerializeAsSinglePrecisionFloat:!1},LinkedTo:new te([ge],!1),DefaultValue:new te(new ee(de,String),!1),AutogeneratedDefaultValue:new te(String,!1),DefaultObject:new te(re,!1,null),PersistentGuid:oe,bHidden:!1,bNotConnectable:!1,bDefaultValueIsReadOnly:!1,bDefaultValueIsIgnored:!1,bAdvancedView:!1,bOrphanedPin:!1};getDefaultValue(){return this.DefaultValue??""}isHidden(){return this.bHidden}isInput(){return!this.bHidden&&"EGPD_Output"!=this.Direction}isOutput(){return!this.bHidden&&"EGPD_Output"==this.Direction}isLinked(){return this.LinkedTo?.length>0??!1}linkTo(e,t){this.LinkedTo;const n=this.LinkedTo?.find((n=>n.objectName==e&&n.pinGuid.valueOf()==t.PinId.valueOf()));return!n&&((this.LinkedTo??(this.LinkedTo=[])).push(new ge({objectName:e,pinGuid:t.PinId})),!0)}unlinkFrom(e,t){const n=this.LinkedTo?.findIndex((n=>n.objectName==e&&n.pinGuid.valueOf()==t.PinId.valueOf()));return n>=0&&(1==this.LinkedTo.length?this.LinkedTo=void 0:this.LinkedTo.splice(n,1),!0)}getType(){return this.PinType.PinCategory}getSubCategory(){return this.PinType.PinSubCategoryObject.path}getColorValue(){this.PinType.PinSubCategoryObject.path}}class fe extends ie{static attributes={MemberName:String,MemberGuid:oe,bSelfContext:!1}}class ve extends ie{static attributes={Class:re,Name:"",bIsPureFunc:new te(Boolean,!1,!1),VariableReference:new te(fe,!1,null),FunctionReference:new te(se,!1,null),EventReference:new te(se,!1,null),TargetType:new te(re,!1,null),NodePosX:le,NodePosY:le,AdvancedPinDisplay:new te(ae,!1,null),EnabledState:new te(ae,!1,null),NodeGuid:oe,ErrorType:new te(le,!1),ErrorMsg:new te(String,!1,""),CustomProperties:[me]};static nameRegex=/(\w+)_(\d+)/;getObjectName(e=!1){return e?this.getNameAndCounter()[0]:this.Name}getNameAndCounter(){const e=this.getObjectName(!1).match(ve.nameRegex);return e&&3==e.length?[e[1],parseInt(e[2])]:["",0]}getDisplayName(){let e=this.FunctionReference?.MemberName;return e?(e=ne.formatStringName(e),e):(e=ne.formatStringName(this.getNameAndCounter()[0]),e)}getCounter(){return this.getNameAndCounter()[1]}}"undefined"!=typeof globalThis?globalThis:"undefined"!=typeof window?window:"undefined"!=typeof global?global:"undefined"!=typeof self&&self;function be(e){return e&&e.__esModule&&Object.prototype.hasOwnProperty.call(e,"default")?e.default:e}var ye={exports:{}};"undefined"!=typeof self&&self;var Ee=be(ye.exports=function(e){var t={};function n(i){if(t[i])return t[i].exports;var r=t[i]={i:i,l:!1,exports:{}};return e[i].call(r.exports,r,r.exports,n),r.l=!0,r.exports}return n.m=e,n.c=t,n.d=function(e,t,i){n.o(e,t)||Object.defineProperty(e,t,{configurable:!1,enumerable:!0,get:i})},n.r=function(e){Object.defineProperty(e,"__esModule",{value:!0})},n.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return n.d(t,"a",t),t},n.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},n.p="",n(n.s=0)}([function(e,t,n){function i(e){if(!(this instanceof i))return new i(e);this._=e}var r=i.prototype;function s(e,t){for(var n=0;n>7),buf:function(e){var t=o((function(e,t,n,i){return e.concat(n===i.length-1?Buffer.from([t,0]).readUInt16BE(0):i.readUInt16BE(n))}),[],e);return Buffer.from(a((function(e){return(e<<1&65535)>>8}),t))}(n.buf)}})),n}function u(){return"undefined"!=typeof Buffer}function c(){if(!u())throw new Error("Buffer global does not exist; please use webpack if you need to parse Buffers in the browser.")}function d(e){c();var t=o((function(e,t){return e+t}),0,e);if(t%8!=0)throw new Error("The bits ["+e.join(", ")+"] add up to "+t+" which is not an even number of bytes; the total should be divisible by 8");var n,r=t/8,s=(n=function(e){return e>48},o((function(e,t){return e||(n(t)?t:e)}),null,e));if(s)throw new Error(s+" bit range requested exceeds 48 bit (6 byte) Number max.");return new i((function(t,n){var i=r+n;return i>t.length?P(n,r.toString()+" bytes"):w(i,o((function(e,t){var n=l(t,e.buf);return{coll:e.coll.concat(n.v),buf:n.buf}}),{coll:[],buf:t.slice(n,i)},e).coll)}))}function h(e,t){return new i((function(n,i){return c(),i+t>n.length?P(i,t+" bytes for "+e):w(i+t,n.slice(i,i+t))}))}function p(e,t){if("number"!=typeof(n=t)||Math.floor(n)!==n||t<0||t>6)throw new Error(e+" requires integer length in range [0, 6].");var n}function g(e){return p("uintBE",e),h("uintBE("+e+")",e).map((function(t){return t.readUIntBE(0,e)}))}function m(e){return p("uintLE",e),h("uintLE("+e+")",e).map((function(t){return t.readUIntLE(0,e)}))}function f(e){return p("intBE",e),h("intBE("+e+")",e).map((function(t){return t.readIntBE(0,e)}))}function v(e){return p("intLE",e),h("intLE("+e+")",e).map((function(t){return t.readIntLE(0,e)}))}function b(e){return e instanceof i}function y(e){return"[object Array]"==={}.toString.call(e)}function E(e){return u()&&Buffer.isBuffer(e)}function w(e,t){return{status:!0,index:e,value:t,furthest:-1,expected:[]}}function P(e,t){return y(t)||(t=[t]),{status:!1,index:-1,value:null,furthest:e,expected:t}}function S(e,t){if(!t)return e;if(e.furthest>t.furthest)return e;var n=e.furthest===t.furthest?function(e,t){if(function(){if(void 0!==i._supportsSet)return i._supportsSet;var e="undefined"!=typeof Set;return i._supportsSet=e,e}()&&Array.from){for(var n=new Set(e),r=0;r=0;){if(o in n){i=n[o].line,0===s&&(s=n[o].lineStart);break}("\n"===e.charAt(o)||"\r"===e.charAt(o)&&"\n"!==e.charAt(o+1))&&(r++,0===s&&(s=o+1)),o--}var a=i+r,l=t-s;return n[t]={line:a,lineStart:s},{offset:t,line:a+1,column:l+1}}function A(e){if(!b(e))throw new Error("not a parser: "+e)}function N(e,t){return"string"==typeof e?e.charAt(t):e[t]}function $(e){if("number"!=typeof e)throw new Error("not a number: "+e)}function C(e){if("function"!=typeof e)throw new Error("not a function: "+e)}function L(e){if("string"!=typeof e)throw new Error("not a string: "+e)}var O=2,D=3,T=8,M=5*T,_=4*T,I=" ";function H(e,t){return new Array(t+1).join(e)}function j(e,t,n){var i=t-e.length;return i<=0?e:H(n,i)+e}function B(e,t,n,i){return{from:e-t>0?e-t:0,to:e+n>i?i:e+n}}function F(e,t){var n,i,r,s,l,u=t.index,c=u.offset,d=1;if(c===e.length)return"Got the end of the input";if(E(e)){var h=c-c%T,p=c-h,g=B(h,M,_+T,e.length),m=a((function(e){return a((function(e){return j(e.toString(16),2,"0")}),e)}),function(e,t){var n=e.length,i=[],r=0;if(n<=t)return[e.slice()];for(var s=0;s=4&&(n+=1),d=2,r=a((function(e){return e.length<=4?e.join(" "):e.slice(0,4).join(" ")+" "+e.slice(4).join(" ")}),m),(l=(8*(s.to>0?s.to-1:s.to)).toString(16).length)<2&&(l=2)}else{var f=e.split(/\r\n|[\n\r\u2028\u2029]/);n=u.column-1,i=u.line-1,s=B(i,O,D,f.length),r=f.slice(s.from,s.to),l=s.to.toString().length}var v=i-s.from;return E(e)&&(l=(8*(s.to>0?s.to-1:s.to)).toString(16).length)<2&&(l=2),o((function(t,i,r){var o,a=r===v,u=a?"> ":I;return o=E(e)?j((8*(s.from+r)).toString(16),l,"0"):j((s.from+r+1).toString(),l," "),[].concat(t,[u+o+" | "+i],a?[I+H(" ",l)+" | "+j("",n," ")+H("^",d)]:[])}),[],r).join("\n")}function z(e,t){return["\n","-- PARSING FAILED "+H("-",50),"\n\n",F(e,t),"\n\n",(n=t.expected,1===n.length?"Expected:\n\n"+n[0]:"Expected one of the following: \n\n"+n.join(", ")),"\n"].join("");var n}function G(e){return void 0!==e.flags?e.flags:[e.global?"g":"",e.ignoreCase?"i":"",e.multiline?"m":"",e.unicode?"u":"",e.sticky?"y":""].join("")}function R(){for(var e=[].slice.call(arguments),t=e.length,n=0;n=2?$(t):t=0;var n=function(e){return RegExp("^(?:"+e.source+")",G(e))}(e),r=""+e;return i((function(e,i){var s=n.exec(e.slice(i));if(s){if(0<=t&&t<=s.length){var o=s[0],a=s[t];return w(i+o.length,a)}return P(i,"valid match group (0 to "+s.length+") in "+r)}return P(i,r)}))}function q(e){return i((function(t,n){return w(n,e)}))}function Z(e){return i((function(t,n){return P(n,e)}))}function J(e){if(b(e))return i((function(t,n){var i=e._(t,n);return i.index=n,i.value="",i}));if("string"==typeof e)return J(X(e));if(e instanceof RegExp)return J(Y(e));throw new Error("not a string, regexp, or parser: "+e)}function Q(e){return A(e),i((function(t,n){var i=e._(t,n),r=t.slice(n,i.index);return i.status?P(n,'not "'+r+'"'):w(n,null)}))}function ee(e){return C(e),i((function(t,n){var i=N(t,n);return n=e.length?P(t,"any character/byte"):w(t+1,N(e,t))})),se=i((function(e,t){return w(e.length,e.slice(t))})),oe=i((function(e,t){return t=0})).desc(t)},i.optWhitespace=de,i.Parser=i,i.range=function(e,t){return ee((function(n){return e<=n&&n<=t})).desc(e+"-"+t)},i.regex=Y,i.regexp=Y,i.sepBy=K,i.sepBy1=W,i.seq=R,i.seqMap=U,i.seqObj=function(){for(var e,t={},n=0,r=(e=arguments,Array.prototype.slice.call(e)),s=r.length,o=0;o255)throw new Error("Value specified to byte constructor ("+e+"=0x"+e.toString(16)+") is larger in value than a single byte.");var t=(e>15?"0x":"0x0")+e.toString(16);return i((function(n,i){var r=N(n,i);return r===e?w(i+1,r):P(i,t)}))},buffer:function(e){return h("buffer",e).map((function(e){return Buffer.from(e)}))},encodedString:function(e,t){return h("string",t).map((function(t){return t.toString(e)}))},uintBE:g,uint8BE:g(1),uint16BE:g(2),uint32BE:g(4),uintLE:m,uint8LE:m(1),uint16LE:m(2),uint32LE:m(4),intBE:f,int8BE:f(1),int16BE:f(2),int32BE:f(4),intLE:v,int8LE:v(1),int16LE:v(2),int32LE:v(4),floatBE:h("floatBE",4).map((function(e){return e.readFloatBE(0)})),floatLE:h("floatLE",4).map((function(e){return e.readFloatLE(0)})),doubleBE:h("doubleBE",8).map((function(e){return e.readDoubleBE(0)})),doubleLE:h("doubleLE",8).map((function(e){return e.readDoubleLE(0)}))},e.exports=i}]));let we=Ee;class Pe{static getGrammarForType(e,t,n){if(t instanceof te)return t=t.type,Pe.getGrammarForType(e,t,n);if(t instanceof ee){const n=t.types.filter((e=>e!==String));let i=we.alt(...n.map((t=>Pe.getGrammarForType(e,t).wrap(we.string('"'),we.string('"')).map((e=>(e.setShowAsString(!0),e))))));return n.lengthPe.getGrammarForType(e,ne.getType(t)))).reduce(((t,n)=>n&&t!==e.AttributeAnyValue?t.or(n):e.AttributeAnyValue)).trim(we.optWhitespace).sepBy(we.string(",")).skip(we.regex(/,?\s*/)),we.string(")"),((e,t,n)=>t));default:return n}}static createAttributeGrammar=(e,t,n=we.string("=").trim(we.optWhitespace))=>e.AttributeName.skip(n).chain((n=>{const i=n.split("."),r=ne.objectGet(t.attributes,i);return Pe.getGrammarForType(e,r,e.AttributeAnyValue).map((e=>t=>ne.objectSet(t,i,e,!0)))}));static createMultiAttributeGrammar=(e,t)=>we.seqMap(t.lookbehind?we.seq(we.string(t.lookbehind),we.optWhitespace,we.string("(")):we.string("("),Pe.createAttributeGrammar(e,t).trim(we.optWhitespace).sepBy(we.string(",")).skip(we.regex(/,?/).then(we.optWhitespace)),we.string(")"),((e,n,i)=>{let r={};return n.forEach((e=>e(r))),new t(r)}));InlineWhitespace=e=>we.regex(/[^\S\n]+/).desc("inline whitespace");InlineOptWhitespace=e=>we.regex(/[^\S\n]*/).desc("inline optional whitespace");MultilineWhitespace=e=>we.regex(/[^\S\n]*\n\s*/).desc("whitespace with at least a newline");Null=e=>we.seq(we.string("("),e.InlineOptWhitespace,we.string(")")).map((e=>null)).desc("null: ()");Boolean=e=>we.alt(we.string("True"),we.string("False")).map((e=>"True"===e)).desc("either True or False");HexDigit=e=>we.regex(/[0-9a-fA-f]/).desc("hexadecimal digit");Number=e=>we.regex(/[\-\+]?[0-9]+(?:\.[0-9]+)?/).map(Number).desc("a number");NaturalNumber=e=>we.regex(/0|[1-9]\d*/).map(Number).desc("a natural number");ColorNumber=e=>e.NaturalNumber.assert((e=>0<=e&&e<256),"the color must be between 0 and 256 excluded");Word=e=>we.regex(/[a-zA-Z]+/).desc("a word");String=e=>we.regex(/(?:[^"\\]|\\.)*/).wrap(we.string('"'),we.string('"')).map(ne.decodeString).desc('string (with possibility to escape the quote using ")');ReferencePath=e=>we.seq(we.string("/"),e.PathSymbol.map((e=>e.toString())).sepBy1(we.string(".")).tieWith(".")).tie().atLeast(2).tie().desc('a path (words with possibly underscore, separated by ".", separated by "/")');AttributeName=e=>e.Word.sepBy1(we.string(".")).tieWith(".").desc('words separated by ""');None=e=>we.string("None").map((e=>new re({type:"None",path:""}))).desc("none");Integer=e=>we.regex(/[\-\+]?[0-9]+/).map((e=>new le(e))).desc("an integer");Guid=e=>we.regex(/[0-9a-zA-Z]{32}/).map((e=>new oe({value:e}))).desc("32 digit hexadecimal (accepts all the letters for safety) value");Identifier=e=>we.regex(/\w+/).map((e=>new ae(e)));PathSymbol=e=>we.regex(/[0-9\w]+/).map((e=>new pe({value:e})));Reference=e=>we.alt(e.None,...[e.ReferencePath.map((e=>new re({type:"",path:e})))].flatMap((e=>[e,e.trim(we.string('"'))])),we.seqMap(e.Word,we.optWhitespace,we.alt(...[e.ReferencePath].flatMap((e=>[e.wrap(we.string('"'),we.string('"')),e.wrap(we.string("'\""),we.string("\"'"))]))),((e,t,n)=>new re({type:e,path:n}))),e.Word.map((e=>new re({type:e,path:""}))));LocalizedText=e=>we.seqMap(we.string(he.lookbehind).skip(we.optWhitespace).skip(we.string("(")),e.String.trim(we.optWhitespace),we.string(","),e.String.trim(we.optWhitespace),we.string(","),e.String.trim(we.optWhitespace),we.string(")"),((e,t,n,i,r,s,o)=>new he({namespace:t,key:i,value:s})));InvariantText=e=>e.String.trim(we.optWhitespace).wrap(we.string(ue.lookbehind).skip(we.optWhitespace).skip(we.string("(")),we.string(")")).map((e=>new ue({value:e})));AttributeAnyValue=e=>we.alt(e.Null,e.None,e.Boolean,e.Number,e.Integer,e.String,e.Guid,e.LocalizedText,e.InvariantText,e.Reference);PinReference=e=>we.seqMap(e.PathSymbol,we.whitespace,e.Guid,((e,t,n)=>new ge({objectName:e,pinGuid:n})));LinearColor=e=>Pe.createMultiAttributeGrammar(e,de);FunctionReference=e=>Pe.createMultiAttributeGrammar(e,se);KeyBinding=e=>we.alt(e.Identifier.map((e=>new ce({Key:e}))),Pe.createMultiAttributeGrammar(e,ce));Pin=e=>Pe.createMultiAttributeGrammar(e,me);CustomProperties=e=>we.string("CustomProperties").then(we.whitespace).then(e.Pin).map((e=>t=>{let n=ne.objectGet(t,["CustomProperties"],[]);n.push(e),ne.objectSet(t,["CustomProperties"],n,!0)}));Object=e=>we.seqMap(we.seq(we.string("Begin"),we.whitespace,we.string("Object"),we.whitespace),we.alt(e.CustomProperties,Pe.createAttributeGrammar(e,ve)).sepBy1(we.whitespace),we.seq(e.MultilineWhitespace,we.string("End"),we.whitespace,we.string("Object")),((e,t,n)=>{let i={};return t.forEach((e=>e(i))),new ve(i)}));MultipleObject=e=>e.Object.sepBy1(we.whitespace).trim(we.optWhitespace);LinearColorFromHex=e=>we.string("#").then(e.HexDigit.times(2).tie().times(3,4)).trim(we.optWhitespace).map((([e,t,n,i])=>new de({R:parseInt(e,16)/255,G:parseInt(t,16)/255,B:parseInt(n,16)/255,A:i?parseInt(i,16)/255:1})));LinearColorFromRGBList=e=>we.seqMap(e.ColorNumber,we.string(",").skip(we.optWhitespace),e.ColorNumber,we.string(",").skip(we.optWhitespace),e.ColorNumber.map(Number),((e,t,n,i,r)=>new de({R:e/255,G:n/255,B:r/255,A:1})));LinearColorFromRGB=e=>we.string("rgb").then(e.LinearColorFromRGBList.wrap(we.regex(/\(\s*/),we.regex(/\s*\)/)));LinearColorFromRGBA=e=>we.string("rgba").then(we.seqMap(e.ColorNumber,we.string(",").skip(we.optWhitespace),e.ColorNumber,we.string(",").skip(we.optWhitespace),e.ColorNumber.map(Number),we.string(",").skip(we.optWhitespace),we.regex(/0?\.\d+|[01]/).map(Number),((e,t,n,i,r,s,o)=>new de({R:e/255,G:n/255,B:r/255,A:o}))).wrap(we.regex(/\(\s*/),we.regex(/\s*\)/)));LinearColorFromAnyColor=e=>we.alt(e.LinearColorFromRGBList,e.LinearColorFromHex,e.LinearColorFromRGB,e.LinearColorFromRGBA)}class Se{static#l=new Map;static registerSerializer(e,t){Se.#l.set(e,t)}static getSerializer(e){return Se.#l.get(ne.getType(e))}}class ke{static grammar=Ee.createLanguage(new Pe);constructor(e,t,n,i,r,s){this.entityType=e,this.prefix=t??"",this.separator=n??",",this.trailingSeparator=i??!1,this.attributeValueConjunctionSign=r??"=",this.attributeKeyPrinter=s??(e=>e.join("."))}deserialize(e){return this.read(e)}serialize(e,t){t||=e.isShownAsString();let n=this.write(e,t);return e.isShownAsString()&&(n=`"${n}"`),n}read(e){throw new Error("Not implemented")}write(e,t){throw new Error("Not implemented")}writeValue(e,t,n){if(null===e)return"()";const i=e=>Se.getSerializer(ne.getType(e)).serialize(e);switch(e?.constructor){case Function:return this.writeValue(e(),t,n);case Boolean:return ne.FirstCapital(e.toString());case Number:return e.toString();case String:return n?`\\"${ne.encodeString(e)}\\"`:`"${ne.encodeString(e)}"`}return e instanceof Array?`(${e.map((e=>i(e)+",")).join("")})`:e instanceof ie?i(e):void 0}subWrite(e,t,n){let i="",r=e.concat("");const s=r.length-1;for(const e of Object.getOwnPropertyNames(t)){r[s]=e;const o=t[e];o?.constructor===Object?i+=(i.length?this.separator:"")+this.subWrite(r,o,n):void 0!==o&&this.showProperty(t,r,o)&&(i+=(i.length?this.separator:"")+this.prefix+this.attributeKeyPrinter(r)+this.attributeValueConjunctionSign+this.writeValue(o,r,n))}return this.trailingSeparator&&i.length&&1===r.length&&(i+=this.separator),i}showProperty(e,t,n){const i=this.entityType.attributes,r=ne.objectGet(i,t);return!(r instanceof te)||(!ne.equals(r.value,n)||r.showDefault)}}class xe extends ke{constructor(){super(ve," ","\n",!1)}showProperty(e,t,n){switch(t.toString()){case"Class":case"Name":case"CustomProperties":return!1}return super.showProperty(e,t,n)}read(e){const t=ke.grammar.Object.parse(e);if(!t.status)throw new Error("Error when trying to parse the object.");return t.value}readMultiple(e){const t=ke.grammar.MultipleObject.parse(e);if(!t.status)throw new Error("Error when trying to parse the object.");return t.value}write(e,t){return`Begin Object Class=${e.Class.path} Name=${this.writeValue(e.Name,["Name"],t)}\n${this.subWrite([],e,t)+e.CustomProperties.map((e=>this.separator+this.prefix+"CustomProperties "+Se.getSerializer(me).serialize(e))).join("")}\nEnd Object\n`}}class Ae extends Q{#u;constructor(e,t,n={}){n.listenOnFocus=!0,n.unlistenOnTextEdit=!0,super(e,t,n),this.serializer=new xe;let i=this;this.#u=e=>i.copied()}listenEvents(){document.body.addEventListener("copy",this.#u)}unlistenEvents(){document.body.removeEventListener("copy",this.#u)}copied(){const e=this.blueprint.getNodes(!0).map((e=>this.serializer.serialize(e.entity,!1))).join("\n\n");navigator.clipboard.writeText(e)}}class Ne{static styles=r``;#c=[];get inputObjects(){return this.#c}constructed(e){}connectedCallback(e){}willUpdate(e,t){}update(e,t){}render(e){return O``}firstUpdated(e,t){}updated(e,t){}inputSetup(e){this.#c=this.createInputObjects(e)}cleanup(e){this.#c.forEach((e=>e.unlistenDOMElement()))}createInputObjects(e){return[]}}class $e extends Q{#d;constructor(e,t,n={}){n.activateAnyKey??=!1,n.activationKeys??=[],n.listenOnFocus??=!0,n.unlistenOnTextEdit??=!0,n.activationKeys instanceof Array||(n.activationKeys=[n.activationKeys]),n.activationKeys=n.activationKeys.map((e=>{if(e instanceof ce)return e;if(e.constructor===String){const t=ke.grammar.KeyBinding.parse(e);if(t.status)return t.value}throw new Error("Unexpected key value")})),super(e,t,n),this.#d=this.options.activationKeys??[];let i=this;this.keyDownHandler=e=>{(this.options.activateAnyKey||i.#d.some((t=>(e=>e.bShift||"LeftShift"==e.Key||"RightShift"==e.Key)(t)==e.shiftKey&&(e=>e.bCtrl||"LeftControl"==e.Key||"RightControl"==e.Key)(t)==e.ctrlKey&&(e=>e.bAlt||"LeftAlt"==e.Key||"RightAlt"==e.Key)(t)==e.altKey&&J.Keys[t.Key]==e.code)))&&(n.consumeEvent&&e.stopImmediatePropagation(),i.fire(),document.removeEventListener("keydown",i.keyDownHandler),document.addEventListener("keyup",i.keyUpHandler))},this.keyUpHandler=e=>{(this.options.activateAnyKey||i.#d.some((t=>t.bShift&&"Shift"==e.key||t.bCtrl&&"Control"==e.key||t.bAlt&&"Alt"==e.key||t.bCmd&&"Meta"==e.key||J.Keys[t.Key]==e.code)))&&(n.consumeEvent&&e.stopImmediatePropagation(),i.unfire(),document.removeEventListener("keyup",this.keyUpHandler),document.addEventListener("keydown",this.keyDownHandler))}}listenEvents(){document.addEventListener("keydown",this.keyDownHandler)}unlistenEvents(){document.removeEventListener("keydown",this.keyDownHandler)}fire(){}unfire(){}}class Ce extends $e{constructor(e,t,n={}){n.activationKeys=J.deleteNodesKeyboardKey,super(e,t,n)}fire(){this.blueprint.removeGraphElement(...this.blueprint.getNodes(!0))}}class Le extends Q{constructor(e,t,n){super(e,t,n),this.movementSpace=this.blueprint?.getGridDOMElement()??document.documentElement}locationFromEvent(e){const t=ne.convertLocation([e.clientX,e.clientY],this.movementSpace);return this.blueprint.compensateTranslation(t)}}class Oe extends Le{#h;#p;constructor(e,t,n){n.listenOnFocus=!0,super(e,t,n),this.looseTarget=n?.looseTarget??!0;let i=this;this.#h=e=>{e.preventDefault();const t=i.locationFromEvent(e);i.wheel(Math.sign(e.deltaY*J.mouseWheelFactor),t)},this.#p=e=>e.preventDefault(),this.blueprint.focused&&this.movementSpace.addEventListener("wheel",this.#h,!1)}listenEvents(){this.movementSpace.addEventListener("wheel",this.#h,!1),this.movementSpace.parentElement?.addEventListener("wheel",this.#p)}unlistenEvents(){this.movementSpace.removeEventListener("wheel",this.#h,!1),this.movementSpace.parentElement?.removeEventListener("wheel",this.#p)}wheel(e,t){}}class De extends Oe{#g=!1;get enableZoonIn(){return this.#g}set enableZoonIn(e){(e=Boolean(e))!=this.#g&&(this.#g=e)}wheel(e,t){let n=this.blueprint.getZoom();e=-e,!this.enableZoonIn&&0==n&&e>0||(n+=e,this.blueprint.setZoom(n,t))}}class Te extends $e{#m;constructor(e,t,n={}){n.activationKeys=J.enableZoomIn,super(e,t,n)}fire(){this.#m=this.blueprint.getInputObject(De),this.#m.enableZoonIn=!0}unfire(){this.#m.enableZoonIn=!1}}class Me extends $e{constructor(e,t,n={}){n.activationKeys=J.selectAllKeyboardKey,super(e,t,n)}fire(){this.blueprint.selectAll()}}class _e extends Le{#f;#v;#b;#y;#E=!1;started=!1;constructor(e,t,n={}){n.clickButton??=0,n.consumeEvent??=!0,n.exitAnyButton??=!0,n.looseTarget??=!1,n.moveEverywhere??=!1,super(e,t,n),this.clickedPosition=[0,0];const i=this.options.moveEverywhere?document.documentElement:this.movementSpace;let r=this;this.#f=e=>{if(r.blueprint.setFocused(!0),e.button===r.options.clickButton)(r.options.looseTarget||e.target==e.currentTarget)&&(r.options.consumeEvent&&e.stopImmediatePropagation(),i.addEventListener("mousemove",r.#v),document.addEventListener("mouseup",r.#y),r.clickedPosition=r.locationFromEvent(e),r.clicked(r.clickedPosition));else r.options.exitAnyButton||r.#y(e)},this.#v=e=>{r.options.consumeEvent&&e.stopImmediatePropagation(),i.removeEventListener("mousemove",r.#v),i.addEventListener("mousemove",r.#b);const t=r.getEvent(J.trackingMouseEventName.begin);r.#E=0==r.target.dispatchEvent(t);const n=r.locationFromEvent(e);r.startDrag(n),r.started=!0},this.#b=e=>{r.options.consumeEvent&&e.stopImmediatePropagation();const t=r.locationFromEvent(e),n=[e.movementX,e.movementY];r.dragTo(t,n),r.#E&&(r.blueprint.mousePosition=r.locationFromEvent(e))},this.#y=e=>{if(!r.options.exitAnyButton||e.button==r.options.clickButton){if(r.options.consumeEvent&&e.stopImmediatePropagation(),i.removeEventListener("mousemove",r.#v),i.removeEventListener("mousemove",r.#b),document.removeEventListener("mouseup",r.#y),r.started&&r.endDrag(),r.unclicked(),r.#E){const e=r.getEvent(J.trackingMouseEventName.end);r.target.dispatchEvent(e),r.#E=!1}r.started=!1}},this.listenEvents()}listenEvents(){this.target.addEventListener("mousedown",this.#f),2==this.options.clickButton&&this.target.addEventListener("contextmenu",(e=>e.preventDefault()))}unlistenEvents(){this.target.removeEventListener("mousedown",this.#f)}getEvent(e){return new CustomEvent(e,{detail:{tracker:this},bubbles:!0,cancelable:!0})}clicked(e){}startDrag(e){}dragTo(e,t){}endDrag(){}unclicked(e){}}class Ie extends _e{startDrag(){this.blueprint.scrolling=!0}dragTo(e,t){this.blueprint.scrollDelta([-t[0],-t[1]])}endDrag(){this.blueprint.scrolling=!1}}class He extends Le{#w=null;#P;#S;#k;constructor(e,t,n={}){n.listenOnFocus=!0,super(e,t,n);let i=this;this.#P=e=>{e.preventDefault(),i.blueprint.mousePosition=i.locationFromEvent(e)},this.#S=e=>{i.#w||(e.preventDefault(),this.#w=e.detail.tracker,i.unlistenMouseMove())},this.#k=e=>{i.#w==e.detail.tracker&&(e.preventDefault(),i.#w=null,i.listenMouseMove())}}listenMouseMove(){this.target.addEventListener("mousemove",this.#P)}unlistenMouseMove(){this.target.removeEventListener("mousemove",this.#P)}listenEvents(){this.listenMouseMove(),this.blueprint.addEventListener(J.trackingMouseEventName.begin,this.#S),this.blueprint.addEventListener(J.trackingMouseEventName.end,this.#k)}unlistenEvents(){this.unlistenMouseMove(),this.blueprint.removeEventListener(J.trackingMouseEventName.begin,this.#S),this.blueprint.removeEventListener(J.trackingMouseEventName.end,this.#k)}}class je extends q{static properties={};#x=[];#t;get blueprint(){return this.#t}set blueprint(e){return this.#t=e}#A;get entity(){return this.#A}set entity(e){this.#A=e}#N;get template(){return this.#N}inputObjects=[];constructor(e,t){super(),this.#A=e,this.#N=t,this.inputObjects=[],this.#N.constructed(this)}createRenderRoot(){return this}connectedCallback(){super.connectedCallback(),this.blueprint=this.closest("ueb-blueprint"),this.template.connectedCallback(this)}willUpdate(e){super.willUpdate(e),this.template.willUpdate(this,e)}update(e){super.update(e),this.template.update(this,e)}render(){return this.template.render(this)}firstUpdated(e){super.firstUpdated(e),this.template.firstUpdated(this,e),this.template.inputSetup(this)}updated(e){super.updated(e),this.template.updated(this,e),this.#x.forEach((t=>t(e))),this.#x=[]}disconnectedCallback(){super.disconnectedCallback(),this.template.cleanup(this)}addNextUpdatedCallbacks(e,t=!1){this.#x.push(e),t&&this.requestUpdate()}isSameGraph(e){return this.blueprint&&this.blueprint==e?.blueprint}getInputObject(e){return this.template.inputObjects.find((t=>t.constructor==e))}}class Be extends je{static properties={...super.properties,selected:{type:Boolean,attribute:"data-selected",reflect:!0,converter:ne.booleanConverter},locationX:{type:Number,attribute:!1},locationY:{type:Number,attribute:!1}};constructor(...e){super(...e),this.selected=!1,this.locationX=0,this.locationY=0,this.listeningDrag=!1;let t=this;this.dragHandler=e=>t.addLocation(e.detail.value)}connectedCallback(){super.connectedCallback(),this.setSelected(this.selected)}disconnectedCallback(){super.disconnectedCallback(),this.blueprint.removeEventListener(J.nodeDragEventName,this.dragHandler)}setLocation([e,t]){const n=[e-this.locationX,t-this.locationY];if(this.locationX=e,this.locationY=t,this.blueprint){const e=new CustomEvent(J.nodeDragLocalEventName,{detail:{value:n},bubbles:!1,cancelable:!0});this.dispatchEvent(e)}}addLocation([e,t]){this.setLocation([this.locationX+e,this.locationY+t])}setSelected(e=!0){this.selected=e,this.blueprint&&(this.selected?(this.listeningDrag=!0,this.blueprint.addEventListener(J.nodeDragEventName,this.dragHandler)):(this.blueprint.removeEventListener(J.nodeDragEventName,this.dragHandler),this.listeningDrag=!1))}dispatchDragEvent(e){const t=new CustomEvent(J.nodeDragEventName,{detail:{value:e},bubbles:!0,cancelable:!0});this.dispatchEvent(t)}snapToGrid(){const e=ne.snapToGrid([this.locationX,this.locationY],J.gridSize);this.locationX==e[0]&&this.locationY==e[1]||this.setLocation(e)}}class Fe extends _e{constructor(e,t,n={}){n.consumeEvent=!0,super(e,t,n)}}class ze extends je{static properties={...super.properties,initialPositionX:{type:Number,attribute:!1},initialPositionY:{type:Number,attribute:!1},finaPositionX:{type:Number,attribute:!1},finaPositionY:{type:Number,attribute:!1}};constructor(...e){super(...e),this.initialPositionX=0,this.initialPositionY=0,this.finaPositionX=0,this.finaPositionY=0}setBothLocations([e,t]){this.initialPositionX=e,this.initialPositionY=t,this.finaPositionX=e,this.finaPositionY=t}addSourceLocation([e,t]){this.initialPositionX+=e,this.initialPositionY+=t}addDestinationLocation([e,t]){this.finaPositionX+=e,this.finaPositionY+=t}}class Ge extends Ne{update(e,t){super.update(e,t),t.has("initialPositionX")&&e.style.setProperty("--ueb-from-x",`${e.initialPositionX}`),t.has("initialPositionY")&&e.style.setProperty("--ueb-from-y",`${e.initialPositionY}`),t.has("finaPositionX")&&e.style.setProperty("--ueb-to-x",`${e.finaPositionX}`),t.has("finaPositionY")&&e.style.setProperty("--ueb-to-y",`${e.finaPositionY}`)}}class Re extends Ge{static decreasingValue(e,t){const n=-e*t[0]**2,i=t[1]-n/t[0];return e=>n/e+i}static clampedLine(e,t){if(e[0]>t[0]){const n=e;e=t,t=n}const n=(t[1]-e[1])/(t[0]-e[0]),i=e[1]-n*e[0];return r=>rt[0]?t[1]:n*r+i}static c1DecreasingValue=Re.decreasingValue(-.15,[100,15]);static c2DecreasingValue=Re.decreasingValue(-.06,[500,130]);static c2Clamped=Re.clampedLine([0,100],[200,30]);willUpdate(e,t){super.willUpdate(e,t);const n=Math.max(Math.abs(e.initialPositionX-e.finaPositionX),1),i=Math.max(n,J.linkMinWidth),r=n/i,s=e.originatesFromInput?e.initialPositionX ${""!=e.linkMessageIcon||""!=e.linkMessageText?O`
${e.linkMessageText}
`:O``}`}}class Ue extends ze{static properties={...super.properties,source:{type:String,reflect:!0},destination:{type:String,reflect:!0},dragging:{type:Boolean,attribute:"data-dragging",converter:ne.booleanConverter,reflect:!0},originatesFromInput:{type:Boolean,attribute:!1},svgPathD:{type:String,attribute:!1},linkMessageIcon:{type:String,attribute:!1},linkMessageText:{type:String,attribute:!1}};#$;get sourcePin(){return this.#$}set sourcePin(e){this.#C(e,!1)}#L;get destinationPin(){return this.#L}set destinationPin(e){this.#C(e,!0)}#O;#D;#T;#M;#_;pathElement;constructor(e,t){super({},new Re);const n=this;this.#O=()=>n.remove(),this.#D=e=>n.addSourceLocation(e.detail.value),this.#T=e=>n.addDestinationLocation(e.detail.value),this.#M=e=>n.setSourceLocation(),this.#_=e=>n.setDestinationLocation(),this.source=null,this.destination=null,this.dragging=!1,this.originatesFromInput=!1,this.startPercentage=0,this.svgPathD="",this.startPixels=0,this.linkMessageIcon="",this.linkMessageText="",e&&(this.sourcePin=e,t||(this.finaPositionX=this.initialPositionX,this.finaPositionY=this.initialPositionY)),t&&(this.destinationPin=t,e||(this.initialPositionX=this.finaPositionX,this.initialPositionY=this.finaPositionY)),this.#I()}#C(e,t){const n=()=>t?this.destinationPin:this.sourcePin;if(n()!=e){if(n()){const e=n().getNodeElement();e.removeEventListener(J.nodeDeleteEventName,this.#O),e.removeEventListener(J.nodeDragLocalEventName,t?this.#T:this.#D),e.removeEventListener(J.nodeReflowEventName,t?this.#_:this.#M),this.#H()}if(t?this.#L=e:this.#$=e,n()){const e=n().getNodeElement();e.addEventListener(J.nodeDeleteEventName,this.#O),e.addEventListener(J.nodeDragLocalEventName,t?this.#T:this.#D),e.addEventListener(J.nodeReflowEventName,t?this.#_:this.#M),t?this.setDestinationLocation():(this.setSourceLocation(),this.originatesFromInput=this.sourcePin.isInput()),this.#I()}}}#I(){this.sourcePin&&this.destinationPin&&(this.sourcePin.linkTo(this.destinationPin),this.destinationPin.linkTo(this.sourcePin))}#H(){this.sourcePin&&this.destinationPin&&(this.sourcePin.unlinkFrom(this.destinationPin),this.destinationPin.unlinkFrom(this.sourcePin))}disconnectedCallback(){super.disconnectedCallback(),this.#H(),this.sourcePin=null,this.destinationPin=null}setSourceLocation(e=null){if(null==e){const t=this;if(!this.hasUpdated||!this.sourcePin.hasUpdated)return void Promise.all([this.updateComplete,this.sourcePin.updateComplete]).then((()=>t.setSourceLocation()));e=this.sourcePin.template.getLinkLocation(this.sourcePin)}const[t,n]=e;this.initialPositionX=t,this.initialPositionY=n}setDestinationLocation(e=null){if(null==e){const t=this;if(!this.hasUpdated||!this.destinationPin.hasUpdated)return void Promise.all([this.updateComplete,this.destinationPin.updateComplete]).then((()=>t.setDestinationLocation()));e=this.destinationPin.template.getLinkLocation(this.destinationPin)}this.finaPositionX=e[0],this.finaPositionY=e[1]}startDragging(){this.dragging=!0}finishDragging(){this.dragging=!1}removeMessage(){this.linkMessageIcon="",this.linkMessageText=""}setMessageConvertType(){this.linkMessageIcon="ueb-icon-conver-type",this.linkMessageText=`Convert ${this.sourcePin.pinType} to ${this.destinationPin.pinType}.`}setMessageCorrect(){this.linkMessageIcon="ueb-icon-correct",this.linkMessageText=""}setMessageDirectionsIncompatible(){this.linkMessageIcon="ueb-icon-directions-incompatible",this.linkMessageText="Directions are not compatbile."}setMessagePlaceNode(){this.linkMessageIcon="ueb-icon-place-node",this.linkMessageText="Place a new node."}setMessageReplaceLink(){this.linkMessageIcon="ueb-icon-replace-link",this.linkMessageText="Replace existing input connections."}setMessageSameNode(){this.linkMessageIcon="ueb-icon-same-node",this.linkMessageText="Both are on the same node."}setMEssagetypesIncompatible(){this.linkMessageIcon="ueb-icon-types-incompatible",this.linkMessageText=`${this.sourcePin.pinType} is not compatible with ${this.destinationPin.pinType}.`}}customElements.define("ueb-link",Ue);class Ve extends _e{#j;#B;#F;link;enteredPin;linkValid=!1;constructor(e,t,n){super(e,t,n);let i=this;this.#B=e=>{if(!i.enteredPin){i.linkValid=!1,i.enteredPin=e.target;const t=i.enteredPin,n=i.target;t.getNodeElement()==n.getNodeElement()?i.link.setMessageSameNode():t.isOutput()==n.isOutput()||t.isOutput()==n.isOutput()?i.link.setMessageDirectionsIncompatible():i.blueprint.getLinks([t,n]).length?(i.link.setMessageReplaceLink(),i.linkValid=!0):(i.link.setMessageCorrect(),i.linkValid=!0)}},this.#F=e=>{i.enteredPin==e.target&&(i.enteredPin=null,i.linkValid=!1,i.link?.setMessagePlaceNode())}}startDrag(e){this.link=new Ue(this.target,null),this.blueprint.linksContainerElement.prepend(this.link),this.link.setMessagePlaceNode(),this.#j=this.blueprint.querySelectorAll("ueb-pin"),this.#j.forEach((e=>{e!=this.target&&(e.getClickableElement().addEventListener("mouseenter",this.#B),e.getClickableElement().addEventListener("mouseleave",this.#F))})),this.link.startDragging(),this.link.setDestinationLocation(e)}dragTo(e,t){this.link.setDestinationLocation(e)}endDrag(){this.#j.forEach((e=>{e.removeEventListener("mouseenter",this.#B),e.removeEventListener("mouseleave",this.#F)})),this.enteredPin&&this.linkValid?(this.blueprint.addGraphElement(this.link),this.link.destinationPin=this.enteredPin,this.link.removeMessage(),this.link.finishDragging()):(this.link.finishDragging(),this.link.remove()),this.enteredPin=null,this.link=null,this.#j=null}}class Ke extends Ne{static styles=r``;connectedCallback(e){super.connectedCallback(e),e.nodeElement=e.closest("ueb-node")}createInputObjects(e){return[new Ve(e.clickableElement,e.blueprint,{moveEverywhere:!0,looseTarget:!0})]}render(e){const t=O`
${this.renderIcon(e)}
`,n=O`
${e.getPinDisplayName()} ${this.renderInput(e)}
`;return O`
${e.isInput()?O`${t}${n}`:O`${n}${t}`}
`}renderIcon(e){return O``}renderInput(e){return O``}firstUpdated(e,t){super.firstUpdated(e,t),e.dataset.id=e.GetPinIdValue(),e.clickableElement=e}getLinkLocation(e){const t=e.querySelector(".ueb-pin-icon").getBoundingClientRect(),n=ne.convertLocation([(t.left+t.right)/2,(t.top+t.bottom)/2],e.blueprint.gridElement);return e.blueprint.compensateTranslation(n)}}class We extends Ke{#z;get inputContentElements(){return this.#z}firstUpdated(e,t){if(super.firstUpdated(e,t),this.#z=[...e.querySelectorAll(".ueb-pin-input-content")],this.#z.length){this.setInputs(e,this.getInputs(e));let t=this;this.onFocusHandler=t=>e.blueprint.dispatchEditTextEvent(!0),this.onFocusOutHandler=n=>{n.preventDefault(),document.getSelection()?.removeAllRanges(),t.setInputs(e,this.getInputs(e)),e.blueprint.dispatchEditTextEvent(!1)},this.#z.forEach((e=>{e.addEventListener("focus",this.onFocusHandler),e.addEventListener("focusout",this.onFocusOutHandler)}))}}cleanup(e){super.cleanup(e),this.#z.forEach((e=>{e.removeEventListener("focus",this.onFocusHandler),e.removeEventListener("focusout",this.onFocusOutHandler)}))}createInputObjects(e){return[...super.createInputObjects(e),...this.#z.map((t=>new Fe(t,e.blueprint)))]}getInput(e){return this.getInputs(e).reduce(((e,t)=>e+t),"")}getInputs(e){return ne.decodeInputString(e.entity.DefaultValue),this.#z.map((e=>e.innerHTML.replaceAll("
","\n")))}setInputs(e,t=[],n=!0){this.#z.forEach(((e,n)=>e.innerText=t[n])),n&&e.setDefaultValue(t.reduce(((e,t)=>e+t),""))}renderInput(e){return e.isInput()?O`
`:O``}}class Xe extends We{#G;firstUpdated(e,t){super.firstUpdated(e,t),this.#G=e.querySelector(".ueb-pin-input");let n=this;this.onChangeHandler=t=>e.entity.DefaultValue=n.#G.checked?"true":"false",this.#G.addEventListener("change",this.onChangeHandler)}cleanup(e){super.cleanup(e),this.#G.removeEventListener("change",this.onChangeHandler)}getInputs(e){return[this.#G.checked?"true":"false"]}renderInput(e){return e.isInput()?O``:super.renderInput(e)}}class Ye extends Ke{renderIcon(e){return O``}}class qe extends We{#G;firstUpdated(e,t){super.firstUpdated(e,t),this.#G=e.querySelector(".ueb-pin-input")}getInputs(e){return[this.#G.dataset.linearColor]}setInputs(e,t=[]){}renderInput(e){return e.isInput()?O``:super.renderInput(e)}}class Ze extends We{onInputHandler;firstUpdated(e,t){super.firstUpdated(e,t),this.onInputHandler=e=>{e.stopPropagation(),("insertParagraph"==e.inputType||"insertLineBreak"==e.inputType||"insertFromPaste"==e.inputType&&e.target.innerText.includes("\n"))&&(e.target.blur(),this.inputContentElements.forEach((e=>e.innerText=e.innerText.replaceAll("\n",""))))},this.inputContentElements.forEach((e=>{e.addEventListener("input",this.onInputHandler)}))}cleanup(e){super.cleanup(e),this.inputContentElements.forEach((e=>{e.removeEventListener("input",this.onInputHandler)}))}getInputs(e){return this.inputContentElements.map((e=>e.textContent))}setInputs(e,t=[],n=!0){t=t.map((e=>e.replaceAll("\n",""))),super.setInputs(e,t,n)}}class Je extends We{setInputs(e,t=[]){let n=parseFloat(t.length?t[0]:this.getInput(e)),i=!0;isNaN(n)&&(n=parseFloat(""!=e.entity.DefaultValue?e.entity.DefaultValue:e.entity.AutogeneratedDefaultValue)),isNaN(n)&&(n=0,i=!1),t[0]=ne.minDecimals(n),super.setInputs(e,t,i)}}class Qe extends We{firstUpdated(e,t){super.firstUpdated(e,t)}}class et extends je{static#R={bool:Xe,exec:Ye,name:Ze,real:Je,string:Qe,struct:{"/Script/CoreUObject.LinearColor":qe}};static properties={advancedView:{type:String,attribute:"data-advanced-view",reflect:!0},color:{type:de,converter:{fromAttribute:(e,t)=>ke.grammar.LinearColorFromAnyColor.parse(e).value,toAttribute:(e,t)=>ne.printLinearColor(e)},reflect:!0},defaultValue:{type:String,attribute:!1},isLinked:{type:Boolean,converter:ne.booleanConverter,attribute:"data-linked",reflect:!0},pinType:{type:String,attribute:"data-type",reflect:!0},pinDirection:{type:String,attribute:"data-direction",reflect:!0}};static getTypeTemplate(e){let t=et.#R[e.getType()];return t.constructor===Object&&(t=t[e.getSubCategory()]),t??Ke}nodeElement;clickableElement;connections=0;get defaultValue(){return this.unreactiveDefaultValue}set defaultValue(e){let t=this.unreactiveDefaultValue;this.unreactiveDefaultValue=e,this.requestUpdate("defaultValue",t)}constructor(e){super(e,new(et.getTypeTemplate(e))),this.advancedView=e.bAdvancedView,this.unreactiveDefaultValue=e.getDefaultValue(),this.pinType=this.entity.getType(),this.color=this.constructor.properties.color.converter.fromAttribute(J.pinColor[this.pinType].toString()),this.isLinked=!1,this.pinDirection=e.isInput()?"input":e.isOutput()?"output":"hidden",this.entity.subscribe("DefaultValue",(e=>this.defaultValue=e.toString())),this.entity.subscribe("PinToolTip",(e=>{let t=e.match(/\s*(.+?(?=\n)|.+\S)\s*/);return t?ne.formatStringName(t[1]):ne.formatStringName(this.entity.PinName)}))}connectedCallback(){super.connectedCallback()}GetPinId(){return this.entity.PinId}GetPinIdValue(){return this.GetPinId().value}getPinName(){return this.entity.PinName}getPinDisplayName(){let e=null;return this.entity.PinToolTip&&(e=this.entity.PinToolTip.match(/\s*(.+?(?=\n)|.+\S)\s*/))?ne.formatStringName(e[1]):ne.formatStringName(this.entity.PinName)}isInput(){return this.entity.isInput()}isOutput(){return this.entity.isOutput()}getClickableElement(){return this.clickableElement}getLinkLocation(){return this.template.getLinkLocation(this)}getNodeElement(){return this.nodeElement}getLinks(){return this.entity.LinkedTo??[]}setDefaultValue(e){this.entity.DefaultValue=e}sanitizeLinks(){this.entity.LinkedTo=this.getLinks().filter((e=>{let t=this.blueprint.getPin(e);if(t){this.blueprint.getLink(this,t,!0)||this.blueprint.addGraphElement(new Ue(this,t))}return t}))}linkTo(e){this.entity.linkTo(e.getNodeElement().getNodeName(),e.entity),this.isLinked=this.entity.isLinked()}unlinkFrom(e){this.entity.unlinkFrom(e.getNodeElement().getNodeName(),e.entity),this.isLinked=this.entity.isLinked()}redirectLink(e,t){const n=this.entity.LinkedTo.findIndex((t=>t.objectName.toString()==e.getNodeElement().getNodeName()&&t.pinGuid.valueOf()==e.entity.PinId.valueOf()));return n>=0&&(this.entity.LinkedTo[n]=t,!0)}}customElements.define("ueb-pin",et);class tt extends _e{constructor(e,t,n){super(e,t,n),this.stepSize=parseInt(n?.stepSize??J.gridSize),this.mouseLocation=[0,0]}startDrag(){this.mouseLocation=ne.snapToGrid(this.clickedPosition,this.stepSize),this.target.selected||(this.blueprint.unselectAll(),this.target.setSelected(!0))}dragTo(e,t){const n=[this.target.locationX,this.target.locationY],[i,r]=this.stepSize>1?[ne.snapToGrid(e,this.stepSize),ne.snapToGrid(n,this.stepSize)]:[e,n],s=[i[0]-this.mouseLocation[0],i[1]-this.mouseLocation[1]];0==s[0]&&0==s[1]||(s[0]+=r[0]-this.target.locationX,s[1]+=r[1]-this.target.locationY,this.target.dispatchDragEvent(s),this.mouseLocation=i)}unclicked(){this.started||(this.blueprint.unselectAll(),this.target.setSelected(!0))}}class nt extends Ne{createInputObjects(e){return[...super.createInputObjects(e),new tt(e,e.blueprint,{looseTarget:!0})]}update(e,t){super.update(e,t),t.has("locationX")&&e.style.setProperty("--ueb-position-x",`${e.locationX}`),t.has("locationY")&&e.style.setProperty("--ueb-position-y",`${e.locationY}`)}firstUpdated(e,t){super.firstUpdated(e,t),e.selected&&!e.listeningDrag&&e.setSelected(!0)}}class it extends nt{toggleAdvancedDisplayHandler;render(e){return O`
${e.nodeDisplayName}
${"DevelopmentOnly"==e.enabledState?.toString()?O`
Development Only
`:O``} ${e.advancedPinDisplay?O`
`:O``}
`}async firstUpdated(e,t){super.firstUpdated(e,t);const n=e.querySelector(".ueb-node-inputs"),i=e.querySelector(".ueb-node-outputs");Promise.all(e.getPinElements().map((e=>e.updateComplete))).then((()=>e.dispatchReflowEvent())),e.getPinElements().forEach((e=>{e.isInput()?n.appendChild(e):e.isOutput()&&i.appendChild(e)})),this.toggleAdvancedDisplayHandler=t=>{e.toggleShowAdvancedPinDisplay(),e.addNextUpdatedCallbacks((()=>e.dispatchReflowEvent()),!0)},e.nodeNameElement=e.querySelector(".ueb-node-name-text")}getPinElements(e){return e.querySelectorAll("ueb-pin")}}class rt extends Be{static properties={...Be.properties,name:{type:String,attribute:"data-name",reflect:!0},advancedPinDisplay:{type:String,attribute:"data-advanced-display",converter:ae.attributeConverter,reflect:!0},enabledState:{type:String,attribute:"data-enabled-state",reflect:!0},nodeDisplayName:{type:String,attribute:!1}};get blueprint(){return super.blueprint}set blueprint(e){super.blueprint=e,this.#U.forEach((t=>t.blueprint=e))}#V;get nodeNameElement(){return this.#V}set nodeNameElement(e){this.#V=e}#U;constructor(e){super(e,new it),this.#U=this.getPinEntities().filter((e=>!e.isHidden())).map((e=>new et(e))),this.#U.forEach((e=>e.nodeElement=this)),this.name=e.getObjectName(),this.advancedPinDisplay=e.AdvancedPinDisplay?.toString(),this.enabledState=e.EnabledState,this.nodeDisplayName=e.getDisplayName(),this.dragLinkObjects=[],super.setLocation([this.entity.NodePosX.value,this.entity.NodePosY.value]),this.entity.subscribe("AdvancedPinDisplay",(e=>this.advancedPinDisplay=e)),this.entity.subscribe("Name",(e=>this.name=e))}static fromSerializedObject(e){e=e.trim();let t=Se.getSerializer(ve).deserialize(e);return new rt(t)}connectedCallback(){this.getAttribute("type")?.trim(),super.connectedCallback()}disconnectedCallback(){super.disconnectedCallback(),this.dispatchDeleteEvent()}getNodeName(){return this.entity.getObjectName()}getNodeDisplayName(){return this.entity.getDisplayName()}sanitizeLinks(){this.getPinElements().forEach((e=>e.sanitizeLinks()))}rename(e){if(this.entity.Name==e)return!1;for(let t of this.getPinElements())for(let n of t.getLinks())this.blueprint.getPin(n).redirectLink(t,new ge({objectName:e,pinGuid:t.entity.PinId}));this.entity.Name=e}getPinElements(){return this.#U}getPinEntities(){return this.entity.CustomProperties.filter((e=>e instanceof me))}setLocation(e=[0,0]){let t=this.entity.NodePosX.constructor;this.entity.NodePosX=new t(e[0]),this.entity.NodePosY=new t(e[1]),super.setLocation(e)}dispatchDeleteEvent(e){let t=new CustomEvent(J.nodeDeleteEventName,{bubbles:!0,cancelable:!0});this.dispatchEvent(t)}dispatchReflowEvent(){let e=new CustomEvent(J.nodeReflowEventName,{bubbles:!0,cancelable:!0});this.dispatchEvent(e)}setShowAdvancedPinDisplay(e){this.entity.AdvancedPinDisplay=new ae(e?"Shown":"Hidden")}toggleShowAdvancedPinDisplay(){this.setShowAdvancedPinDisplay("Shown"!=this.entity.AdvancedPinDisplay?.toString())}}customElements.define("ueb-node",rt);class st extends Q{#K;constructor(e,t,n={}){n.listenOnFocus=!0,n.unlistenOnTextEdit=!0,super(e,t,n),this.serializer=new xe;let i=this;this.#K=e=>i.pasted(e.clipboardData.getData("Text"))}listenEvents(){document.body.addEventListener("paste",this.#K)}unlistenEvents(){document.body.removeEventListener("paste",this.#K)}pasted(e){let t=0,n=0,i=0,r=this.serializer.readMultiple(e).map((e=>{let r=new rt(e);return t+=r.locationY,n+=r.locationX,++i,r}));t/=i,n/=i,r.length>0&&this.blueprint.unselectAll();let s=this.blueprint.mousePosition;return r.forEach((e=>{const i=[s[0]-n,s[1]-t];e.addLocation(i),e.snapToGrid(),e.setSelected(!0)})),this.blueprint.addGraphElement(...r),!0}}class ot extends _e{constructor(e,t,n){super(e,t,n),this.selectorElement=this.blueprint.selectorElement}startDrag(){this.selectorElement.beginSelect(this.clickedPosition)}dragTo(e,t){this.selectorElement.selectTo(e)}endDrag(){this.started&&this.selectorElement.endSelect()}unclicked(){this.started||this.blueprint.unselectAll()}}class at{constructor(e=(e=>e),t=null){this.array=new Uint32Array(t),this.comparisonValueSupplier=e,this.length=0,this.currentPosition=0}get(e){return e>=0&&e=0&&this.currentPosition=0&&this.currentPosition0?this.get(this.currentPosition-1):null}getPrevValue(){return this.currentPosition>0?this.comparisonValueSupplier(this.get(this.currentPosition-1)):Number.MIN_SAFE_INTEGER}shiftLeft(e,t=1){this.array.set(this.array.subarray(e+t),e)}shiftRight(e,t=1){this.array.set(this.array.subarray(e,-t),e+t)}}class lt{constructor(e,t,n,i){this.initialPosition=e,this.finalPosition=e,this.metadata=new Array(t.length),this.primaryOrder=new at((e=>this.metadata[e].primaryBoundary)),this.secondaryOrder=new at((e=>this.metadata[e].secondaryBoundary)),this.selectFunc=i,this.rectangles=t,this.primaryOrder.reserve(this.rectangles.length),this.secondaryOrder.reserve(this.rectangles.length),t.forEach(((e,t)=>{let r={primaryBoundary:this.initialPosition[0],secondaryBoundary:this.initialPosition[1],rectangle:t,onSecondaryAxis:!1};this.metadata[t]=r,i(e,!1);const s=n(e);this.initialPosition[1]{if(this.metadata[n].onSecondaryAxis)this.selectFunc(this.rectangles[n],i);else if(i){this.secondaryOrder.insert(n,e[1]);const i=this.metadata[n].secondaryBoundary;Math.sign(e[1]-i)==t[1]&&Math.sign(i-this.initialPosition[1])==t[1]&&this.selectFunc(this.rectangles[n],!0)}else this.selectFunc(this.rectangles[n],!1),this.secondaryOrder.remove(n);this.computeBoundaries(),this.selectTo(e)};e[0]this.boundaries.primaryN.v&&e[0]this.boundaries.primaryP.v&&(++this.primaryOrder.currentPosition,n(this.boundaries.primaryP.i,this.initialPosition[0]{this.selectFunc(this.rectangles[t],n),this.computeBoundaries(),this.selectTo(e)};e[1]this.boundaries.secondaryN.v&&e[1]this.boundaries.secondaryP.v&&(++this.secondaryOrder.currentPosition,i(this.boundaries.secondaryP.i,this.initialPosition[1]i.clickedSomewhere(e.target),this.blueprint.focus&&document.addEventListener("click",this.#W)}clickedSomewhere(e){e.closest("ueb-blueprint")||this.blueprint.setFocused(!1)}listenEvents(){document.addEventListener("click",this.#W)}unlistenEvents(){document.removeEventListener("click",this.#W)}}class ht extends Ne{static styleVariables={"--ueb-font-size":`${J.fontSize}`,"--ueb-grid-axis-line-color":`${J.gridAxisLineColor}`,"--ueb-grid-expand":`${J.expandGridSize}px`,"--ueb-grid-line-color":`${J.gridLineColor}`,"--ueb-grid-line-width":`${J.gridLineWidth}px`,"--ueb-grid-set-line-color":`${J.gridSetLineColor}`,"--ueb-grid-set":`${J.gridSet}`,"--ueb-grid-size":`${J.gridSize}px`,"--ueb-link-min-width":`${J.linkMinWidth}`,"--ueb-node-radius":`${J.nodeRadius}px`,"--ueb-pin-bool-color":`${J.pinColor.bool}`,"--ueb-pin-default-color":`${J.pinColor.default}`,"--ueb-pin-exec-color":`${J.pinColor.exec}`,"--ueb-pin-name-color":`${J.pinColor.name}`,"--ueb-pin-real-color":`${J.pinColor.real}`,"--ueb-pin-string-color":`${J.pinColor.string}`,"--ueb-pin-struct-color":`${J.pinColor.struct}`};constructed(e){e.style.cssText=Object.entries(ht.styleVariables).map((([e,t])=>`${e}:${t};`)).join("")}createInputObjects(e){return[new Ae(e.getGridDOMElement(),e),new st(e.getGridDOMElement(),e),new Ce(e.getGridDOMElement(),e),new Me(e.getGridDOMElement(),e),new De(e.getGridDOMElement(),e,{looseTarget:!0}),new ot(e.getGridDOMElement(),e,{clickButton:0,exitAnyButton:!0,looseTarget:!0,moveEverywhere:!0}),new Ie(e.getGridDOMElement(),e,{clickButton:2,exitAnyButton:!1,looseTarget:!0,moveEverywhere:!0}),new dt(e.getGridDOMElement(),e),new He(e.getGridDOMElement(),e),new Te(e.getGridDOMElement(),e)]}render(e){return O`
1:1
`}firstUpdated(e,t){super.firstUpdated(e,t),e.headerElement=e.querySelector(".ueb-viewport-header"),e.overlayElement=e.querySelector(".ueb-viewport-overlay"),e.viewportElement=e.querySelector(".ueb-viewport-body"),e.selectorElement=new ct,e.querySelector(".ueb-grid-content")?.append(e.selectorElement),e.gridElement=e.viewportElement.querySelector(".ueb-grid"),e.linksContainerElement=e.querySelector("[data-links]"),e.linksContainerElement.append(...e.getLinks()),e.nodesContainerElement=e.querySelector("[data-nodes]"),e.nodesContainerElement.append(...e.getNodes()),e.viewportElement.scroll(J.expandGridSize,J.expandGridSize)}updated(e,t){super.updated(e,t),(t.has("scrollX")||t.has("scrollY"))&&e.viewportElement.scroll(e.scrollX,e.scrollY)}getPin(e,t){return e.querySelector(`ueb-node[data-name="${t.objectName}"] ueb-pin[data-id="${t.pinGuid}"]`)}}class pt extends je{static properties={selecting:{type:Boolean,attribute:"data-selecting",reflect:!0,converter:ne.booleanConverter},scrolling:{type:Boolean,attribute:"data-scrolling",reflect:!0,converter:ne.booleanConverter},focused:{type:Boolean,attribute:"data-focused",reflect:!0,converter:ne.booleanConverter},zoom:{type:Number,attribute:"data-zoom",reflect:!0},scrollX:{type:Number,attribute:!1},scrollY:{type:Number,attribute:!1},additionalX:{type:Number,attribute:!1},additionalY:{type:Number,attribute:!1},translateX:{type:Number,attribute:!1},translateY:{type:Number,attribute:!1}};static styles=ht.styles;#X=new Map;nodes=[];links=[];mousePosition=[0,0];gridElement;viewportElement;overlayElement;selectorElement;linksContainerElement;nodesContainerElement;headerElement;focused=!1;nodeBoundariesSupplier=e=>{let t=e.getBoundingClientRect(),n=this.nodesContainerElement.getBoundingClientRect();const i=1/this.getScale();return{primaryInf:(t.left-n.left)*i,primarySup:(t.right-n.right)*i,secondaryInf:(t.top-n.top)*i,secondarySup:(t.bottom-n.bottom)*i}};nodeSelectToggleFunction=(e,t)=>{e.setSelected(t)};constructor(e=new J){super({},new ht),this.selecting=!1,this.scrolling=!1,this.focused=!1,this.zoom=0,this.scrollX=J.expandGridSize,this.scrollY=J.expandGridSize,this.translateX=J.expandGridSize,this.translateY=J.expandGridSize}getGridDOMElement(){return this.gridElement}disconnectedCallback(){super.disconnectedCallback()}getScroll(){return[this.scrollX,this.scrollY]}setScroll([e,t],n=!1){this.scrollX=e,this.scrollY=t}scrollDelta(e,t=!1){const n=[2*J.expandGridSize,2*J.expandGridSize];let i=this.getScroll(),r=[i[0]+e[0],i[1]+e[1]],s=[0,0];for(let t=0;t<2;++t)e[t]<0&&r[t]0&&r[t]>n[t]-J.gridExpandThreshold*J.expandGridSize&&(s[t]=1);0==s[0]&&0==s[1]||this.seamlessExpand(s),i=this.getScroll(),r=[i[0]+e[0],i[1]+e[1]],this.setScroll(r,t)}scrollCenter(){const e=this.getScroll(),t=[this.translateX-e[0],this.translateY-e[1]],n=this.getViewportSize().map((e=>e/2)),i=[t[0]-n[0],t[1]-n[1]];this.scrollDelta(i,!0)}getViewportSize(){return[this.viewportElement.clientWidth,this.viewportElement.clientHeight]}getScrollMax(){return[this.viewportElement.scrollWidth-this.viewportElement.clientWidth,this.viewportElement.scrollHeight-this.viewportElement.clientHeight]}snapToGrid(e){return ne.snapToGrid(e,J.gridSize)}seamlessExpand([e,t]){e=Math.round(e),t=Math.round(t);let n=this.getScale();[e,t]=[-e*J.expandGridSize,-t*J.expandGridSize],0!=e&&(this.scrollX+=e,e/=n),0!=t&&(this.scrollY+=t,t/=n),this.translateX+=e,this.translateY+=t}progressiveSnapToGrid(e){return J.expandGridSize*Math.round(e/J.expandGridSize+.5*Math.sign(e))}getZoom(){return this.zoom}setZoom(e,t){if((e=ne.clamp(e,J.minZoom,J.maxZoom))==this.zoom)return;let n=this.getScale();this.zoom=e,t&&requestAnimationFrame((e=>{t[0]+=this.translateX,t[1]+=this.translateY;let i=this.getScale()/n,r=[i*t[0],i*t[1]];this.scrollDelta([(r[0]-t[0])*n,(r[1]-t[1])*n])}))}getScale(){return parseFloat(getComputedStyle(this.gridElement).getPropertyValue("--ueb-scale"))}compensateTranslation([e,t]){return[e-=this.translateX,t-=this.translateY]}getNodes(e=!1){return e?this.nodes.filter((e=>e.selected)):this.nodes}getPin(e){return[...this.nodes.find((t=>e.objectName.toString()==t.getNodeName()))?.getPinElements()??[]].find((t=>e.pinGuid.toString()==t.GetPinIdValue()))}getLinks([e,t]=[]){if(null==e!=t==null){const n=e??t;return this.links.filter((e=>e.sourcePin==n||e.destinationPin==n))}return null!=e&&null!=t?this.links.filter((n=>n.sourcePin==e&&n.destinationPin==t||n.sourcePin==t&&n.destinationPin==e)):this.links}getLink(e,t,n=!1){return this.links.find((i=>i.sourcePin==e&&i.destinationPin==t||n&&i.sourcePin==t&&i.destinationPin==e))}selectAll(){this.getNodes().forEach((e=>this.nodeSelectToggleFunction(e,!0)))}unselectAll(){this.getNodes().forEach((e=>this.nodeSelectToggleFunction(e,!1)))}addGraphElement(...e){for(let t of e)if(t.blueprint=this,t instanceof rt&&!this.nodes.includes(t)){const e=t.entity.getObjectName(),n=this.nodes.find((t=>t.entity.getObjectName()==e));if(n){let e=n.entity.getObjectName(!0);this.#X[e]=this.#X[e]??-1;do{++this.#X[e]}while(this.nodes.find((t=>t.entity.getObjectName()==J.nodeName(e,this.#X[e]))));n.rename(J.nodeName(e,this.#X[e]))}this.nodes.push(t),this.nodesContainerElement?.appendChild(t)}else t instanceof Ue&&!this.links.includes(t)&&(this.links.push(t),this.linksContainerElement&&!this.linksContainerElement.contains(t)&&this.linksContainerElement.appendChild(t));e.filter((e=>e instanceof rt)).forEach((e=>e.sanitizeLinks()))}removeGraphElement(...e){for(let t of e)if(t.closest("ueb-blueprint")==this){t.remove();let e=t instanceof rt?this.nodes:t instanceof Ue?this.links:null;e?.splice(e.findIndex((e=>e===t)),1)}}setFocused(e=!0){if(this.focused==e)return;let t=new CustomEvent(e?"blueprint-focus":"blueprint-unfocus");this.focused=e,this.focused||this.unselectAll(),this.dispatchEvent(t)}dispatchEditTextEvent(e){const t=new CustomEvent(e?J.editTextEventName.begin:J.editTextEventName.end);this.dispatchEvent(t)}}customElements.define("ueb-blueprint",pt);class gt extends ke{constructor(e,t,n,i,r,s,o){e=e??(e=>`(${e})`),super(t,n,i,r,s,o),this.wrap=e}read(e){const t=Pe.getGrammarForType(ke.grammar,this.entityType).parse(e);if(!t.status)throw new Error(`Error when trying to parse the entity ${this.entityType.prototype.constructor.name}.`);return t.value}write(e,t=!1){return this.wrap(this.subWrite([],e,t))}}class mt extends gt{constructor(e,t){super(void 0,t),this.objectWriter=e}write(e,t=!1){return this.objectWriter(e,t)}}class ft extends gt{constructor(){super((e=>`${me.lookbehind} (${e})`),me,"",",",!0)}writeValue(e,t,n){return e?.constructor===String&&1==t.length&&"DefaultValue"==t[0]?`"${ne.encodeInputString(e)}"`:super.writeValue(e,t,n)}}class vt extends gt{constructor(e){super(void 0,e)}write(e,t){return t||e.isShownAsString()?`"${e.toString().replaceAll('"','\\"')}"`:e.toString()}}!function(){const e=e=>`(${e})`;Se.registerSerializer(se,new gt(e,se)),Se.registerSerializer(oe,new vt(oe)),Se.registerSerializer(ae,new vt(ae)),Se.registerSerializer(le,new vt(le)),Se.registerSerializer(ue,new gt((e=>`${ue.lookbehind}(${e})`),ue,"",", ",!1,"",(e=>""))),Se.registerSerializer(ce,new gt(e,ce)),Se.registerSerializer(de,new gt(e,de)),Se.registerSerializer(he,new gt((e=>`${he.lookbehind}(${e})`),he,"",", ",!1,"",(e=>""))),Se.registerSerializer(ve,new xe),Se.registerSerializer(re,new mt((e=>(e.type??"")+(e.path?e.type?`'"${e.path}"'`:`"${e.path}"`:"")),re)),Se.registerSerializer(pe,new vt(pe)),Se.registerSerializer(ge,new gt((e=>e),ge,""," ",!1,"",(e=>""))),Se.registerSerializer(me,new ft)}();export{pt as Blueprint,J as Configuration,Ue as LinkElement,rt as NodeElement}; diff --git a/index.html b/index.html index 202623e..627d8cf 100755 --- a/index.html +++ b/index.html @@ -24,7 +24,7 @@ Begin Object Class=/Script/BlueprintGraph.K2Node_CallFunction Name="K2Node_CallFunction_7" FunctionReference=(MemberParent=Class'"/Script/Engine.KismetSystemLibrary"',MemberName="PrintString") NodePosX=100 - NodePosY=-208 + NodePosY=100 AdvancedPinDisplay=Shown EnabledState=DevelopmentOnly NodeGuid=C66ECE204B194A5A0275A7989CA3C6C2 diff --git a/js/Blueprint.js b/js/Blueprint.js index a517916..561b378 100755 --- a/js/Blueprint.js +++ b/js/Blueprint.js @@ -1,5 +1,3 @@ -// @ts-check - import BlueprintTemplate from "./template/BlueprintTemplate" import Configuration from "./Configuration" import IElement from "./element/IElement" @@ -19,27 +17,60 @@ import Utility from "./Utility" */ export default class Blueprint extends IElement { - /** @type {Number[]} */ - #additional - get additional() { - return this.#additional - } - set additional(value) { - value[0] = Math.abs(value[0]) - value[1] = Math.abs(value[1]) - } - /** @type {Number[]} */ - #translateValue - get translateValue() { - return this.#translateValue - } - set translateValue(value) { - this.#translateValue = value + static properties = { + selecting: { + type: Boolean, + attribute: "data-selecting", + reflect: true, + converter: Utility.booleanConverter, + }, + scrolling: { + type: Boolean, + attribute: "data-scrolling", + reflect: true, + converter: Utility.booleanConverter, + }, + focused: { + type: Boolean, + attribute: "data-focused", + reflect: true, + converter: Utility.booleanConverter, + }, + zoom: { + type: Number, + attribute: "data-zoom", + reflect: true, + }, + scrollX: { + type: Number, + attribute: false, + }, + scrollY: { + type: Number, + attribute: false, + }, + additionalX: { + type: Number, + attribute: false, + }, + additionalY: { + type: Number, + attribute: false, + }, + translateX: { + type: Number, + attribute: false, + }, + translateY: { + type: Number, + attribute: false, + }, } + + static styles = BlueprintTemplate.styles + /** @type {Map} */ #nodeNameCounter = new Map() - /** @type {Number} */ - gridSize /** @type {NodeElement[]}" */ nodes = [] /** @type {LinkElement[]}" */ @@ -47,21 +78,19 @@ export default class Blueprint extends IElement { /** @type {Number[]} */ mousePosition = [0, 0] /** @type {HTMLElement} */ - gridElement = null + gridElement /** @type {HTMLElement} */ - viewportElement = null + viewportElement /** @type {HTMLElement} */ - overlayElement = null + overlayElement /** @type {SelectorElement} */ - selectorElement = null + selectorElement /** @type {HTMLElement} */ - linksContainerElement = null + linksContainerElement /** @type {HTMLElement} */ - nodesContainerElement = null - /** @type {Number} */ - zoom = 0 + nodesContainerElement /** @type {HTMLElement} */ - headerElement = null + headerElement focused = false nodeBoundariesSupplier = node => { let rect = node.getBoundingClientRect() @@ -85,36 +114,14 @@ export default class Blueprint extends IElement { */ constructor(settings = new Configuration()) { super({}, new BlueprintTemplate()) - /** @type {Number} */ - this.gridSize = Configuration.gridSize - /** @type {Number[]} */ - this.#additional = [2 * Configuration.expandGridSize, 2 * Configuration.expandGridSize] - /** @type {Number[]} */ - this.#translateValue = [Configuration.expandGridSize, Configuration.expandGridSize] - } - - /** - * @param {Number} x - * @param {Number} y - */ - #expand(x, y) { - x = Math.round(x) - y = Math.round(y) - this.additional[0] += x - this.additional[1] += y - this.template.applyExpand(this) - } - - /** - * @param {Number} x - * @param {Number} y - */ - #translate(x, y) { - x = Math.round(x) - y = Math.round(y) - this.translateValue[0] += x - this.translateValue[1] += y - this.template.applyTranlate(this) + this.selecting = false + this.scrolling = false + this.focused = false + this.zoom = 0 + this.scrollX = Configuration.expandGridSize + this.scrollY = Configuration.expandGridSize + this.translateX = Configuration.expandGridSize + this.translateY = Configuration.expandGridSize } getGridDOMElement() { @@ -126,57 +133,34 @@ export default class Blueprint extends IElement { } getScroll() { - return [this.viewportElement.scrollLeft, this.viewportElement.scrollTop] + return [this.scrollX, this.scrollY] } - setScroll(value, smooth = false) { - this.scroll = value - if (!smooth) { - this.viewportElement.scroll(value[0], value[1]) - } else { - this.viewportElement.scroll({ - left: value[0], - top: value[1], - behavior: "smooth" - }) - } + setScroll([x, y], smooth = false) { + this.scrollX = x + this.scrollY = y } scrollDelta(delta, smooth = false) { - const maxScroll = this.getScrollMax() + const maxScroll = [2 * Configuration.expandGridSize, 2 * Configuration.expandGridSize] 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] < Configuration.gridExpandThreshold * Configuration.expandGridSize) { // Expand left/top - expand[i] = Configuration.expandGridSize - direction[i] = -1 - if (maxScroll[i] - finalScroll[i] > Configuration.gridShrinkThreshold * Configuration.expandGridSize) { - shrink[i] = -Configuration.expandGridSize - } + expand[i] = -1 } else if (delta[i] > 0 && finalScroll[i] > maxScroll[i] - Configuration.gridExpandThreshold * Configuration.expandGridSize) { // Expand right/bottom - expand[i] = Configuration.expandGridSize - direction[i] = 1 - if (finalScroll[i] > Configuration.gridShrinkThreshold * Configuration.expandGridSize) { - shrink[i] = -Configuration.expandGridSize - } + expand[i] = 1 } } if (expand[0] != 0 || expand[1] != 0) { - this.seamlessExpand(expand, direction) - direction = [ - -direction[0], - -direction[1] - ] - this.seamlessExpand(shrink, direction) + this.seamlessExpand(expand) } currentScroll = this.getScroll() finalScroll = [ @@ -189,8 +173,8 @@ export default class Blueprint extends IElement { scrollCenter() { const scroll = this.getScroll() const offset = [ - this.translateValue[0] - scroll[0], - this.translateValue[1] - scroll[1] + this.translateX - scroll[0], + this.translateY - scroll[1] ] const targetOffset = this.getViewportSize().map(size => size / 2) const deltaOffset = [ @@ -200,10 +184,6 @@ export default class Blueprint extends IElement { this.scrollDelta(deltaOffset, true) } - getExpandGridSize() { - return Configuration.expandGridSize - } - getViewportSize() { return [ this.viewportElement.clientWidth, @@ -223,41 +203,30 @@ export default class Blueprint extends IElement { } snapToGrid(location) { - return Utility.snapToGrid(location, this.gridSize) + return Utility.snapToGrid(location, Configuration.gridSize) } /** - * @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) + * @param {Number[]} param0 */ - - /** - * 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 - ] + seamlessExpand([x, y]) { + x = Math.round(x) + y = Math.round(y) 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 - const translate = [0, 0] - if (directionX < 0) { - this.viewportElement.scrollLeft += x - translate[0] = scaledX + { + // 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 + [x, y] = [-x * Configuration.expandGridSize, -y * Configuration.expandGridSize] + if (x != 0) { + this.scrollX += x + x /= scale + } + if (y != 0) { + this.scrollY += y + y /= scale + } } - if (directionY < 0) { - this.viewportElement.scrollTop += y - translate[1] = scaledY - } - this.#translate(translate[0], translate[1]) + this.translateX += x + this.translateY += y } progressiveSnapToGrid(x) { @@ -274,21 +243,22 @@ export default class Blueprint extends IElement { return } let initialScale = this.getScale() - this.template.applyZoom(this, zoom) this.zoom = zoom if (center) { - center[0] += this.translateValue[0] - center[1] += this.translateValue[1] - let relativeScale = this.getScale() / initialScale - let newCenter = [ - relativeScale * center[0], - relativeScale * center[1] - ] - this.scrollDelta([ - (newCenter[0] - center[0]) * initialScale, - (newCenter[1] - center[1]) * initialScale - ]) + requestAnimationFrame(_ => { + center[0] += this.translateX + center[1] += this.translateY + let relativeScale = this.getScale() / initialScale + let newCenter = [ + relativeScale * center[0], + relativeScale * center[1] + ] + this.scrollDelta([ + (newCenter[0] - center[0]) * initialScale, + (newCenter[1] - center[1]) * initialScale + ]) + }) } } @@ -297,12 +267,12 @@ export default class Blueprint extends IElement { } /** - * @param {Number[]} position + * @param {Number[]} param0 */ - compensateTranslation(position) { - position[0] -= this.translateValue[0] - position[1] -= this.translateValue[1] - return position + compensateTranslation([x, y]) { + x -= this.translateX + y -= this.translateY + return [x, y] } /** @@ -322,7 +292,15 @@ export default class Blueprint extends IElement { * @param {PinReferenceEntity} pinReference */ getPin(pinReference) { - return this.template.getPin(this, pinReference) + /*let result = this.template.getPin(this, pinReference) + if (result) { + return result + }*/ + return [... this.nodes + //.filter(n => !n.parentNode) + .find(n => pinReference.objectName.toString() == n.getNodeName()) + ?.getPinElements() ?? []] + .find(p => pinReference.pinGuid.toString() == p.GetPinIdValue()) } /** @@ -337,7 +315,8 @@ export default class Blueprint extends IElement { if (a != null && b != null) { return this.links.filter(link => link.sourcePin == a && link.destinationPin == b - || link.sourcePin == b && link.destinationPin == a) + || link.sourcePin == b && link.destinationPin == a + ) } return this.links } @@ -373,6 +352,7 @@ export default class Blueprint extends IElement { addGraphElement(...graphElements) { let nodeElements = [] for (let element of graphElements) { + element.blueprint = this if (element instanceof NodeElement && !this.nodes.includes(element)) { const nodeName = element.entity.getObjectName() const homonymNode = this.nodes.find(node => node.entity.getObjectName() == nodeName) @@ -392,7 +372,9 @@ export default class Blueprint extends IElement { this.nodesContainerElement?.appendChild(element) } else if (element instanceof LinkElement && !this.links.includes(element)) { this.links.push(element) - this.linksContainerElement?.appendChild(element) + if (this.linksContainerElement && !this.linksContainerElement.contains(element)) { + this.linksContainerElement.appendChild(element) + } } } graphElements.filter(element => element instanceof NodeElement).forEach( @@ -426,7 +408,6 @@ export default class Blueprint extends IElement { } let event = new CustomEvent(value ? "blueprint-focus" : "blueprint-unfocus") this.focused = value - this.dataset.focused = this.focused ? "true" : "false" if (!this.focused) { this.unselectAll() } diff --git a/js/Configuration.js b/js/Configuration.js index 1cbfd1b..98fecf6 100755 --- a/js/Configuration.js +++ b/js/Configuration.js @@ -1,4 +1,4 @@ -// @ts-check +import { css } from "lit" export default class Configuration { static deleteNodesKeyboardKey = "Delete" @@ -12,15 +12,16 @@ export default class Configuration { begin: "blueprint-focus", end: "blueprint-unfocus", } - static fontSize = "12.5px" - static gridAxisLineColor = "black" + static fontSize = css`12.5px` + static gridAxisLineColor = css`black` static gridExpandThreshold = 0.25 // remaining size factor threshold to cause an expansion event - static gridLineColor = "#353535" + static gridLineColor = css`#353535` static gridLineWidth = 1 // pixel static gridSet = 8 - static gridSetLineColor = "#161616" + static gridSetLineColor = css`#161616` static gridShrinkThreshold = 4 // exceding size factor threshold to cause a shrink event static gridSize = 16 // pixel + static hexColorRegex = /^\s*#(?[0-9a-fA-F]{2})(?[0-9a-fA-F]{2})(?[0-9a-fA-F]{2})([0-9a-fA-F]{2})?|#(?[0-9a-fA-F])(?[0-9a-fA-F])(?[0-9a-fA-F])\s*$/ static keysSeparator = "+" static linkCurveHeight = 15 // pixel static linkCurveWidth = 80 // pixel @@ -36,11 +37,22 @@ export default class Configuration { } static maxZoom = 7 static minZoom = -12 + static mouseWheelFactor = 0.2 static nodeDeleteEventName = "ueb-node-delete" static nodeDragEventName = "ueb-node-drag" static nodeDragLocalEventName = "ueb-node-drag-local" static nodeName = (name, counter) => `${name}_${counter}` static nodeRadius = 8 // in pixel + static nodeReflowEventName = "ueb-node-reflow" + static pinColor = { + bool: css`117, 0, 0`, // #750000 + default: css`167, 167, 167`, // #a7a7a7 + exec: css`167, 167, 167`, // #a7a7a7 + name: css`203, 129, 252`, // #cb81fc + real: css`50, 187, 0`, // #32bb00 + string: css`213, 0, 176`, // #d500b0 + struct: css`3, 76, 168` // #034ca8 + } static selectAllKeyboardKey = "(bCtrl=True,Key=A)" static trackingMouseEventName = { begin: "ueb-tracking-mouse-begin", diff --git a/js/Observable.js b/js/Observable.js new file mode 100644 index 0000000..c668643 --- /dev/null +++ b/js/Observable.js @@ -0,0 +1,105 @@ +export default class Observable { + + /** @type {Map} */ + #observers = new Map() + + /** + * @param {String} property + * @param {(value: any) => {}} observer + */ + subscribe(property, observer) { + let observers = this.#observers + if (observers.has(property)) { + let propertyObservers = observers.get(property) + if (propertyObservers.includes(observer)) { + return false + } else { + propertyObservers.push(observer) + } + } else { + let fromPrototype = false + let propertyDescriptor = Object.getOwnPropertyDescriptor(this, property) + if (!propertyDescriptor) { + fromPrototype = true + propertyDescriptor = Object.getOwnPropertyDescriptor(Object.getPrototypeOf(this), property) ?? {} + if (!propertyDescriptor) { + return false + } + } + observers.set(property, [observer]) + const isValue = "value" in propertyDescriptor + const hasSetter = "set" in propertyDescriptor + if (!(isValue || hasSetter)) { + throw new Error(`Property ${property} is not a value or a setter`) + } + // A Symbol so it does not show up in Object.getOwnPropertyNames() + const storageKey = Symbol.for(property + "Storage") + const valInfoKey = Symbol.for(property + "ValInfo") + Object.defineProperties( + fromPrototype ? Object.getPrototypeOf(this) : this, + { + [storageKey]: { + configurable: true, + enumerable: false, // Non enumerable so it does not show up in for...in or Object.keys() + ...(isValue + ? { + value: this[property], + writable: true, + } + : { + get: propertyDescriptor.get, + set: propertyDescriptor.set, + } + ) + }, + [valInfoKey]: { + configurable: true, + enumerable: false, + value: [fromPrototype, isValue] + }, + [property]: { + configurable: true, + ...(isValue && { + get() { + return this[storageKey] + } + }), + set(v) { + this[storageKey] = v + observers.get(property).forEach(observer => { + observer(this[property]) + }) + }, + } + } + ) + } + return true + } + + /** + * @param {String} property + * @param {Object} observer + */ + unsubscribe(property, observer) { + let observers = this.#observers.get(property) + if (!observers?.includes(observer)) { + return false + } + observers.splice(observers.indexOf(observer), 1) + if (observers.length == 0) { + const storageKey = Symbol.for(property + "Storage") + const valInfoKey = Symbol.for(property + "ValInfo") + const fromPrototype = this[valInfoKey][0] + const isValue = this[valInfoKey][1] + Object.defineProperty( + fromPrototype ? Object.getPrototypeOf(this) : this, + property, + Object.getOwnPropertyDescriptor(fromPrototype ? Object.getPrototypeOf(this) : this, storageKey), + ) + delete this[valInfoKey] + delete this[storageKey] + } + return true + } +} diff --git a/js/Utility.js b/js/Utility.js index 55eac2d..ff44a09 100755 --- a/js/Utility.js +++ b/js/Utility.js @@ -1,9 +1,26 @@ -// @ts-check - import TypeInitialization from "./entity/TypeInitialization" +/** + * @typedef {import("./entity/LinearColorEntity").default} LinearColorEntity + */ + export default class Utility { + static booleanConverter = { + fromAttribute: (value, type) => { + value ? "true" : "false" + }, + toAttribute: (value, type) => { + if (value === true) { + return "true" + } + if (value === false) { + return "false" + } + return "" + } + } + static sigmoid(x, curvature = 1.7) { return 1 / (1 + (x / (1 - x) ** -curvature)) } @@ -32,7 +49,6 @@ export default class Utility { /** * @param {Number[]} viewportLocation * @param {HTMLElement} movementElement - * @returns */ static convertLocation(viewportLocation, movementElement) { const scaleCorrection = 1 / Utility.getScale(movementElement) @@ -204,4 +220,11 @@ export default class Utility { .replace(/^b/, "") // Remove leading b (for boolean values) or newlines .replaceAll(/(?<=[a-z])(?=[A-Z])|_|\s+/g, " ") // Insert a space between a lowercase and uppercase letter, instead of an underscore or multiple spaces } + + /** + * @param {LinearColorEntity} value + */ + static printLinearColor(value) { + return `${Math.round(value.R * 255)}, ${Math.round(value.G * 255)}, ${Math.round(value.B * 255)}` + } } diff --git a/js/element/IElement.js b/js/element/IElement.js index 18b09c3..9159969 100644 --- a/js/element/IElement.js +++ b/js/element/IElement.js @@ -1,4 +1,4 @@ -// @ts-check +import { LitElement } from "lit" /** * @typedef {import("../Blueprint").default} Blueprint @@ -11,15 +11,20 @@ * @template {IEntity} T * @template {ITemplate} U */ -export default class IElement extends HTMLElement { +export default class IElement extends LitElement { + + static properties = { + } + + #nextUpdatedCallbacks = [] /** @type {Blueprint} */ #blueprint get blueprint() { return this.#blueprint } - set blueprint(blueprint) { - this.#blueprint = blueprint + set blueprint(v) { + return this.#blueprint = v } /** @type {T} */ @@ -36,9 +41,6 @@ export default class IElement extends HTMLElement { get template() { return this.#template } - set template(template) { - this.#template = template - } /** @type {IInput[]} */ inputObjects = [] @@ -52,40 +54,79 @@ export default class IElement extends HTMLElement { this.#entity = entity this.#template = template this.inputObjects = [] + this.#template.constructed(this) } - getTemplate() { - return this.template + createRenderRoot() { + return this } connectedCallback() { - this.#blueprint = this.closest("ueb-blueprint") - this.template.setup(this) + super.connectedCallback() + this.blueprint = this.closest("ueb-blueprint") + this.template.connectedCallback(this) + } + + /** + * @param {Map} changedProperties + */ + willUpdate(changedProperties) { + super.willUpdate(changedProperties) + this.template.willUpdate(this, changedProperties) + } + + /** + * @param {Map} changedProperties + */ + update(changedProperties) { + super.update(changedProperties) + this.template.update(this, changedProperties) + } + + render() { + return this.template.render(this) + } + + /** + * @param {Map} changedProperties + */ + firstUpdated(changedProperties) { + super.firstUpdated(changedProperties) + this.template.firstUpdated(this, changedProperties) this.template.inputSetup(this) } + updated(changedProperties) { + super.updated(changedProperties) + this.template.updated(this, changedProperties) + this.#nextUpdatedCallbacks.forEach(f => f(changedProperties)) + this.#nextUpdatedCallbacks = [] + } + disconnectedCallback() { + super.disconnectedCallback() this.template.cleanup(this) } + addNextUpdatedCallbacks(callback, requestUpdate = false) { + this.#nextUpdatedCallbacks.push(callback) + if (requestUpdate) { + this.requestUpdate() + } + } + /** * @param {IElement} element */ isSameGraph(element) { - return this.#blueprint && this.#blueprint == element?.blueprint + return this.blueprint && this.blueprint == element?.blueprint } /** * @template {IInput} V * @param {new (...args: any[]) => V} type - * @returns {V} */ getInputObject(type) { return /** @type {V} */ (this.template.inputObjects.find(object => object.constructor == type)) } - - // Subclasses will want to override - createInputObjects() { - return [] - } } diff --git a/js/element/IFromToPositionedElement.js b/js/element/IFromToPositionedElement.js new file mode 100644 index 0000000..a559081 --- /dev/null +++ b/js/element/IFromToPositionedElement.js @@ -0,0 +1,68 @@ +import IElement from "./IElement"; + +/** + * @typedef {import("../entity/IEntity").default} IEntity + * @typedef {import("../template/ITemplate").default} ITemplate + */ + +/** + * @template {IEntity} T + * @template {ITemplate} U + * @extends {IElement} + */ +export default class IFromToPositionedElement extends IElement { + + static properties = { + ...super.properties, + initialPositionX: { + type: Number, + attribute: false, + }, + initialPositionY: { + type: Number, + attribute: false, + }, + finaPositionX: { + type: Number, + attribute: false, + }, + finaPositionY: { + type: Number, + attribute: false, + }, + } + + constructor(...args) { + super(...args) + this.initialPositionX = 0 + this.initialPositionY = 0 + this.finaPositionX = 0 + this.finaPositionY = 0 + } + + /** + * @param {Number[]} param0 + */ + setBothLocations([x, y]) { + this.initialPositionX = x + this.initialPositionY = y + this.finaPositionX = x + this.finaPositionY = y + } + + /** + * @param {Number[]} offset + */ + addSourceLocation([offsetX, offsetY]) { + this.initialPositionX += offsetX + this.initialPositionY += offsetY + } + + /** + * @param {Number[]} offset + */ + addDestinationLocation([offsetX, offsetY]) { + this.finaPositionX += offsetX + this.finaPositionY += offsetY + } +} \ No newline at end of file diff --git a/js/element/ISelectableDraggableElement.js b/js/element/ISelectableDraggableElement.js index 90369a2..778312a 100644 --- a/js/element/ISelectableDraggableElement.js +++ b/js/element/ISelectableDraggableElement.js @@ -1,5 +1,3 @@ -// @ts-check - import Configuration from "../Configuration" import IElement from "./IElement" import Utility from "../Utility" @@ -16,45 +14,57 @@ import Utility from "../Utility" */ export default class ISelectableDraggableElement extends IElement { + static properties = { + ...super.properties, + selected: { + type: Boolean, + attribute: "data-selected", + reflect: true, + converter: Utility.booleanConverter, + }, + locationX: { + type: Number, + attribute: false, + }, + locationY: { + type: Number, + attribute: false, + }, + } + constructor(...args) { - // @ts-expect-error super(...args) - this.dragObject = null - this.location = [0, 0] this.selected = false + this.locationX = 0 + this.locationY = 0 + + this.listeningDrag = false let self = this this.dragHandler = e => self.addLocation(e.detail.value) } - #setSelected(value = true) { - this.selected = value - if (this.blueprint) { - if (this.selected) { - this.blueprint.addEventListener(Configuration.nodeDragEventName, this.dragHandler) - } else { - this.blueprint.removeEventListener(Configuration.nodeDragEventName, this.dragHandler) - } - } - this.template.applySelected(this) - } - connectedCallback() { super.connectedCallback() - this.#setSelected(this.selected) + this.setSelected(this.selected) + } + + disconnectedCallback() { + super.disconnectedCallback() + this.blueprint.removeEventListener(Configuration.nodeDragEventName, this.dragHandler) } /** - * @param {Number[]} value + * @param {Number[]} param0 */ - setLocation(value = [0, 0]) { - const d = [value[0] - this.location[0], value[1] - this.location[1]] - this.location = value - this.template.applyLocation(this) + 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 + value: d, }, bubbles: false, cancelable: true @@ -63,16 +73,29 @@ export default class ISelectableDraggableElement extends IElement { } } - addLocation(value) { - this.setLocation([this.location[0] + value[0], this.location[1] + value[1]]) + /** + * @param {Number[]} param0 + */ + addLocation([x, y]) { + this.setLocation([this.locationX + x, this.locationY + y]) } setSelected(value = true) { - if (this.selected != value) { - this.#setSelected(value) + 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 + */ dispatchDragEvent(value) { const dragEvent = new CustomEvent(Configuration.nodeDragEventName, { detail: { @@ -85,8 +108,8 @@ export default class ISelectableDraggableElement extends IElement { } snapToGrid() { - let snappedLocation = Utility.snapToGrid(this.location, Configuration.gridSize) - if (this.location[0] != snappedLocation[0] || this.location[1] != snappedLocation[1]) { + const snappedLocation = Utility.snapToGrid([this.locationX, this.locationY], Configuration.gridSize) + if (this.locationX != snappedLocation[0] || this.locationY != snappedLocation[1]) { this.setLocation(snappedLocation) } } diff --git a/js/element/LinkElement.js b/js/element/LinkElement.js index a0aa187..eec917c 100644 --- a/js/element/LinkElement.js +++ b/js/element/LinkElement.js @@ -1,204 +1,258 @@ -// @ts-check - import Configuration from "../Configuration" -import IElement from "./IElement" +import IFromToPositionedElement from "./IFromToPositionedElement" import LinkTemplate from "../template/LinkTemplate" +import Utility from "../Utility" /** * @typedef {import("./PinElement").default} PinElement - * @typedef {import("./LinkMessageElement").default} LinkMessageElement - * @typedef {import("../entity/IEntity").default} IEntity */ /** - * @extends {IElement} + * @extends {IFromToPositionedElement} */ -export default class LinkElement extends IElement { +export default class LinkElement extends IFromToPositionedElement { + + static properties = { + ...super.properties, + source: { + type: String, + reflect: true, + }, + destination: { + type: String, + reflect: true, + }, + dragging: { + type: Boolean, + attribute: "data-dragging", + converter: Utility.booleanConverter, + reflect: true, + }, + originatesFromInput: { + type: Boolean, + attribute: false, + }, + svgPathD: { + type: String, + attribute: false, + }, + linkMessageIcon: { + type: String, + attribute: false, + }, + linkMessageText: { + type: String, + attribute: false, + }, + } /** @type {PinElement} */ - #source + #sourcePin get sourcePin() { - return this.#source + return this.#sourcePin } set sourcePin(pin) { - if (this.#source == pin) { - return - } - if (this.#source) { - const nodeElement = this.#source.getNodeElement() - nodeElement.removeEventListener(Configuration.nodeDeleteEventName, this.#nodeDeleteHandler) - nodeElement.removeEventListener(Configuration.nodeDragLocalEventName, this.#nodeDragSourceHandler) - if (this.#destination) { - this.#unlinkPins() - } - } - this.#source = pin - if (this.#source) { - const nodeElement = this.#source.getNodeElement() - this.originatesFromInput = pin.isInput() - nodeElement.addEventListener(Configuration.nodeDeleteEventName, this.#nodeDeleteHandler) - nodeElement.addEventListener(Configuration.nodeDragLocalEventName, this.#nodeDragSourceHandler) - this.setSourceLocation() - if (this.#destination) { - this.#linkPins() - } - } - this.template.applyPins(this) + this.#setPin(pin, false) } /** @type {PinElement} */ - #destination + #destinationPin get destinationPin() { - return this.#destination + return this.#destinationPin } set destinationPin(pin) { - if (this.#destination == pin) { - return - } - if (this.#destination) { - const nodeElement = this.#destination.getNodeElement() - nodeElement.removeEventListener(Configuration.nodeDeleteEventName, this.#nodeDeleteHandler) - nodeElement.removeEventListener(Configuration.nodeDragLocalEventName, this.#nodeDragDestinatonHandler) - if (this.#source) { - this.#unlinkPins() - } - } - this.#destination = pin - if (this.#destination) { - const nodeElement = this.#destination.getNodeElement() - nodeElement.addEventListener(Configuration.nodeDeleteEventName, this.#nodeDeleteHandler) - nodeElement.addEventListener(Configuration.nodeDragLocalEventName, this.#nodeDragDestinatonHandler) - this.setDestinationLocation() - if (this.#source) { - this.#linkPins() - } - } - this.template.applyPins(this) + this.#setPin(pin, true) } #nodeDeleteHandler #nodeDragSourceHandler #nodeDragDestinatonHandler - sourceLocation = [0, 0] + #nodeReflowSourceHandler + #nodeReflowDestinatonHandler /** @type {SVGPathElement} */ pathElement - /** @type {LinkMessageElement} */ - linkMessageElement - originatesFromInput = false - destinationLocation = [0, 0] /** * @param {PinElement} source - * @param {PinElement} destination + * @param {PinElement?} destination */ constructor(source, destination) { super({}, new LinkTemplate()) const self = this - this.#nodeDeleteHandler = _ => self.remove() + this.#nodeDeleteHandler = () => self.remove() this.#nodeDragSourceHandler = e => self.addSourceLocation(e.detail.value) this.#nodeDragDestinatonHandler = e => self.addDestinationLocation(e.detail.value) + this.#nodeReflowSourceHandler = e => self.setSourceLocation() + this.#nodeReflowDestinatonHandler = e => self.setDestinationLocation() + this.source = null + this.destination = null + this.dragging = false + this.originatesFromInput = false + this.startPercentage = 0 + this.svgPathD = "" + this.startPixels = 0 + this.linkMessageIcon = "" + this.linkMessageText = "" if (source) { this.sourcePin = source + if (!destination) { + this.finaPositionX = this.initialPositionX + this.finaPositionY = this.initialPositionY + } } if (destination) { this.destinationPin = destination + if (!source) { + this.initialPositionX = this.finaPositionX + this.initialPositionY = this.finaPositionY + } } - if (source && destination) { + this.#linkPins() + } + + /** + * @param {PinElement} pin + * @param {Boolean} isDestinationPin + */ + #setPin(pin, isDestinationPin) { + const getCurrentPin = () => isDestinationPin ? this.destinationPin : this.sourcePin + if (getCurrentPin() == pin) { + return + } + if (getCurrentPin()) { + const nodeElement = getCurrentPin().getNodeElement() + nodeElement.removeEventListener(Configuration.nodeDeleteEventName, this.#nodeDeleteHandler) + nodeElement.removeEventListener( + Configuration.nodeDragLocalEventName, + isDestinationPin ? this.#nodeDragDestinatonHandler : this.#nodeDragSourceHandler + ) + nodeElement.removeEventListener( + Configuration.nodeReflowEventName, + isDestinationPin ? this.#nodeReflowDestinatonHandler : this.#nodeReflowSourceHandler + ) + this.#unlinkPins() + } + isDestinationPin + ? this.#destinationPin = pin + : this.#sourcePin = pin + if (getCurrentPin()) { + const nodeElement = getCurrentPin().getNodeElement() + nodeElement.addEventListener(Configuration.nodeDeleteEventName, this.#nodeDeleteHandler) + nodeElement.addEventListener( + Configuration.nodeDragLocalEventName, + isDestinationPin ? this.#nodeDragDestinatonHandler : this.#nodeDragSourceHandler + ) + nodeElement.addEventListener( + Configuration.nodeReflowEventName, + isDestinationPin ? this.#nodeReflowDestinatonHandler : this.#nodeReflowSourceHandler + ) + isDestinationPin + ? this.setDestinationLocation() + : (this.setSourceLocation(), this.originatesFromInput = this.sourcePin.isInput()) this.#linkPins() } } #linkPins() { - this.#source.linkTo(this.#destination) - this.#destination.linkTo(this.#source) + if (this.sourcePin && this.destinationPin) { + this.sourcePin.linkTo(this.destinationPin) + this.destinationPin.linkTo(this.sourcePin) + } } #unlinkPins() { - if (this.#source && this.#destination) { - this.#source.unlinkFrom(this.#destination) - this.#destination.unlinkFrom(this.#source) + if (this.sourcePin && this.destinationPin) { + this.sourcePin.unlinkFrom(this.destinationPin) + this.destinationPin.unlinkFrom(this.sourcePin) } } disconnectedCallback() { super.disconnectedCallback() this.#unlinkPins() + this.sourcePin = null + this.destinationPin = null } /** - * @returns {Number[]} - */ - getSourceLocation() { - return this.sourceLocation - } - - /** - * @param {Number[]} offset - */ - addSourceLocation(offset) { - const location = [ - this.sourceLocation[0] + offset[0], - this.sourceLocation[1] + offset[1] - ] - this.sourceLocation = location - this.template.applyFullLocation(this) - } - - /** - * @param {Number[]} location + * @param {Number[]?} location */ setSourceLocation(location = null) { if (location == null) { - location = this.#source.template.getLinkLocation(this.#source) + const self = this + if (!this.hasUpdated || !this.sourcePin.hasUpdated) { + Promise.all([this.updateComplete, this.sourcePin.updateComplete]).then(() => self.setSourceLocation()) + return + } + location = this.sourcePin.template.getLinkLocation(this.sourcePin) } - this.sourceLocation = location - this.template.applySourceLocation(this) - } - - getDestinationLocation() { - return this.destinationLocation + const [x, y] = location + this.initialPositionX = x + this.initialPositionY = y } /** - * @param {Number[]} offset - */ - addDestinationLocation(offset) { - const location = [ - this.destinationLocation[0] + offset[0], - this.destinationLocation[1] + offset[1] - ] - this.setDestinationLocation(location) - } - - /** - * @param {Number[]} location + * @param {Number[]?} location */ setDestinationLocation(location = null) { if (location == null) { - location = this.#destination.template.getLinkLocation(this.#destination) - } - this.destinationLocation = location - this.template.applyFullLocation(this) - } - - /** - * @param {LinkMessageElement} linkMessage - */ - setLinkMessage(linkMessage) { - if (linkMessage) { - this.template.applyLinkMessage(this, linkMessage) - } else if (this.linkMessageElement) { - this.linkMessageElement.remove() - this.linkMessageElement = null + const self = this + if (!this.hasUpdated || !this.destinationPin.hasUpdated) { + Promise.all([this.updateComplete, this.destinationPin.updateComplete]).then(() => self.setDestinationLocation()) + return + } + location = this.destinationPin.template.getLinkLocation(this.destinationPin) } + this.finaPositionX = location[0] + this.finaPositionY = location[1] } startDragging() { - this.template.applyStartDragging(this) + this.dragging = true } finishDragging() { - this.template.applyFinishDragging(this) + this.dragging = false + } + + removeMessage() { + this.linkMessageIcon = "" + this.linkMessageText = "" + } + + setMessageConvertType() { + this.linkMessageIcon = "ueb-icon-conver-type" + this.linkMessageText = `Convert ${this.sourcePin.pinType} to ${this.destinationPin.pinType}.` + } + + setMessageCorrect() { + this.linkMessageIcon = "ueb-icon-correct" + this.linkMessageText = "" + } + + setMessageDirectionsIncompatible() { + this.linkMessageIcon = "ueb-icon-directions-incompatible" + this.linkMessageText = "Directions are not compatbile." + } + + setMessagePlaceNode() { + this.linkMessageIcon = "ueb-icon-place-node" + this.linkMessageText = "Place a new node." + } + + setMessageReplaceLink() { + this.linkMessageIcon = "ueb-icon-replace-link" + this.linkMessageText = "Replace existing input connections." + } + + setMessageSameNode() { + this.linkMessageIcon = "ueb-icon-same-node" + this.linkMessageText = "Both are on the same node." + } + + setMEssagetypesIncompatible() { + this.linkMessageIcon = "ueb-icon-types-incompatible" + this.linkMessageText = `${this.sourcePin.pinType} is not compatible with ${this.destinationPin.pinType}.` } } diff --git a/js/element/LinkMessageElement.js b/js/element/LinkMessageElement.js deleted file mode 100644 index 897860d..0000000 --- a/js/element/LinkMessageElement.js +++ /dev/null @@ -1,68 +0,0 @@ -// @ts-check - -import IElement from "./IElement" -import LinkMessageTemplate from "../template/LinkMessageTemplate" - -/** - * @typedef {import("./PinElement").default} PinElement - * @typedef {import("./LinkElement").default} LinkElement - * @typedef {(sourcePin: PinElement, destinationPin: PinElement) => String} LinkRetrieval - */ - -/** - * @extends {IElement} - */ -export default class LinkMessageElement extends IElement { - - static convertType = _ => new LinkMessageElement( - "ueb-icon-conver-type", - /** @type {LinkRetrieval} */ - (s, d) => `Convert ${s.getType()} to ${d.getType()}.` - ) - static correct = _ => new LinkMessageElement( - "ueb-icon-correct", - /** @type {LinkRetrieval} */ - (s, d) => "" - ) - static directionsIncompatible = _ => new LinkMessageElement( - "ueb-icon-directions-incompatible", - /** @type {LinkRetrieval} */ - (s, d) => "Directions are not compatbile." - ) - static placeNode = _ => new LinkMessageElement( - "ueb-icon-place-node", - /** @type {LinkRetrieval} */ - (s, d) => "Place a new node." - ) - static replaceLink = _ => new LinkMessageElement( - "ueb-icon-replace-link", - /** @type {LinkRetrieval} */ - (s, d) => "Replace existing input connections." - ) - static sameNode = _ => new LinkMessageElement( - "ueb-icon-same-node", - /** @type {LinkRetrieval} */ - (s, d) => "Both are on the same node." - ) - static typesIncompatible = _ => new LinkMessageElement( - "ueb-icon-types-incompatible", - /** @type {LinkRetrieval} */ - (s, d) => `${s.getType()} is not compatible with ${d.getType()}.` - ) - - /** @type {String} */ - icon - /** @type {LinkRetrieval} */ - message - /** @type {LinkElement} */ - linkElement - - constructor(icon, message) { - super({}, new LinkMessageTemplate()) - this.icon = icon - this.message = message - } - -} - -customElements.define("ueb-link-message", LinkMessageElement) diff --git a/js/element/NodeElement.js b/js/element/NodeElement.js index c075e41..965b201 100644 --- a/js/element/NodeElement.js +++ b/js/element/NodeElement.js @@ -1,10 +1,9 @@ -// @ts-check - import Configuration from "../Configuration" import IdentifierEntity from "../entity/IdentifierEntity" import ISelectableDraggableElement from "./ISelectableDraggableElement" import NodeTemplate from "../template/NodeTemplate" import ObjectEntity from "../entity/ObjectEntity" +import PinElement from "./PinElement" import PinEntity from "../entity/PinEntity" import PinReferenceEntity from "../entity/PinReferenceEntity" import SerializerFactory from "../serialization/SerializerFactory" @@ -14,13 +13,64 @@ import SerializerFactory from "../serialization/SerializerFactory" */ export default class NodeElement extends ISelectableDraggableElement { + static properties = { + ...ISelectableDraggableElement.properties, + name: { + type: String, + attribute: "data-name", + reflect: true, + }, + advancedPinDisplay: { + type: String, + attribute: "data-advanced-display", + converter: IdentifierEntity.attributeConverter, + reflect: true, + }, + enabledState: { + type: String, + attribute: "data-enabled-state", + reflect: true, + }, + nodeDisplayName: { + type: String, + attribute: false, + }, + } + + get blueprint() { + return super.blueprint + } + set blueprint(v) { + super.blueprint = v + this.#pins.forEach(p => p.blueprint = v) + } + + /** @type {HTMLElement} */ + #nodeNameElement + get nodeNameElement() { + return this.#nodeNameElement + } + set nodeNameElement(value) { + this.#nodeNameElement = value + } + + #pins + /** * @param {ObjectEntity} entity */ constructor(entity) { super(entity, new NodeTemplate()) + this.#pins = this.getPinEntities().filter(v => !v.isHidden()).map(v => new PinElement(v)) + this.#pins.forEach(pin => pin.nodeElement = this) + this.name = entity.getObjectName() + this.advancedPinDisplay = entity.AdvancedPinDisplay?.toString() + this.enabledState = entity.EnabledState + this.nodeDisplayName = entity.getDisplayName() this.dragLinkObjects = [] super.setLocation([this.entity.NodePosX.value, this.entity.NodePosY.value]) + this.entity.subscribe("AdvancedPinDisplay", value => this.advancedPinDisplay = value) + this.entity.subscribe("Name", value => this.name = value) } /** @@ -70,11 +120,10 @@ export default class NodeElement extends ISelectableDraggableElement { } } this.entity.Name = name - this.template.applyRename(this) } getPinElements() { - return this.template.getPinElements(this) + return this.#pins } /** @@ -86,9 +135,7 @@ export default class NodeElement extends ISelectableDraggableElement { setLocation(value = [0, 0]) { let nodeType = this.entity.NodePosX.constructor - // @ts-expect-error this.entity.NodePosX = new nodeType(value[0]) - // @ts-expect-error this.entity.NodePosY = new nodeType(value[1]) super.setLocation(value) } @@ -101,13 +148,20 @@ export default class NodeElement extends ISelectableDraggableElement { this.dispatchEvent(deleteEvent) } + dispatchReflowEvent() { + let reflowEvent = new CustomEvent(Configuration.nodeReflowEventName, { + bubbles: true, + cancelable: true + }) + this.dispatchEvent(reflowEvent) + } + setShowAdvancedPinDisplay(value) { this.entity.AdvancedPinDisplay = new IdentifierEntity(value ? "Shown" : "Hidden") - this.template.applyAdvancedPinDisplay(this) } toggleShowAdvancedPinDisplay() { - this.setShowAdvancedPinDisplay(this.entity.AdvancedPinDisplay.value != "Shown") + this.setShowAdvancedPinDisplay(this.entity.AdvancedPinDisplay?.toString() != "Shown") } } diff --git a/js/element/PinElement.js b/js/element/PinElement.js index 85e7596..ba4c24a 100644 --- a/js/element/PinElement.js +++ b/js/element/PinElement.js @@ -1,8 +1,9 @@ -// @ts-check - import BoolPinTemplate from "../template/BoolPinTemplate" +import Configuration from "../Configuration" import ExecPinTemplate from "../template/ExecPinTemplate" import IElement from "./IElement" +import ISerializer from "../serialization/ISerializer" +import LinearColorEntity from "../entity/LinearColorEntity" import LinearColorPinTemplate from "../template/LinearColorPinTemplate" import LinkElement from "./LinkElement" import NamePinTemplate from "../template/NamePinTemplate" @@ -34,6 +35,46 @@ export default class PinElement extends IElement { } } + static properties = { + advancedView: { + type: String, + attribute: "data-advanced-view", + reflect: true, + }, + color: { + type: LinearColorEntity, + converter: { + fromAttribute: (value, type) => { + return ISerializer.grammar.LinearColorFromAnyColor.parse(value).value + }, + toAttribute: (value, type) => { + return Utility.printLinearColor(value) + }, + }, + reflect: true, + }, + defaultValue: { + type: String, + attribute: false, + }, + isLinked: { + type: Boolean, + converter: Utility.booleanConverter, + attribute: "data-linked", + reflect: true, + }, + pinType: { + type: String, + attribute: "data-type", + reflect: true, + }, + pinDirection: { + type: String, + attribute: "data-direction", + reflect: true, + }, + } + /** * @param {PinEntity} pinEntity * @return {PinTemplate} @@ -46,8 +87,6 @@ export default class PinElement extends IElement { return result ?? PinTemplate } - #color = "" - /** @type {NodeElement} */ nodeElement @@ -56,20 +95,42 @@ export default class PinElement extends IElement { connections = 0 + get defaultValue() { + return this.unreactiveDefaultValue + } + set defaultValue(value) { + let oldValue = this.unreactiveDefaultValue + this.unreactiveDefaultValue = value + this.requestUpdate("defaultValue", oldValue) + } + /** * @param {PinEntity} entity */ constructor(entity) { super( entity, - // @ts-expect-error new (PinElement.getTypeTemplate(entity))() ) + this.advancedView = entity.bAdvancedView + this.unreactiveDefaultValue = entity.getDefaultValue() + this.pinType = this.entity.getType() + this.color = this.constructor.properties.color.converter.fromAttribute(Configuration.pinColor[this.pinType].toString()) + this.isLinked = false + this.pinDirection = entity.isInput() ? "input" : entity.isOutput() ? "output" : "hidden" + + this.entity.subscribe("DefaultValue", value => this.defaultValue = value.toString()) + this.entity.subscribe("PinToolTip", value => { + let matchResult = value.match(/\s*(.+?(?=\n)|.+\S)\s*/) + if (matchResult) { + return Utility.formatStringName(matchResult[1]) + } + return Utility.formatStringName(this.entity.PinName) + }) } connectedCallback() { super.connectedCallback() - this.#color = window.getComputedStyle(this).getPropertyValue("--ueb-pin-color") } /** @return {GuidEntity} */ @@ -89,9 +150,6 @@ export default class PinElement extends IElement { return this.entity.PinName } - /** - * @returns {String} - */ getPinDisplayName() { let matchResult = null if ( @@ -112,22 +170,10 @@ export default class PinElement extends IElement { return this.entity.isOutput() } - isLinked() { - return this.entity.isLinked() - } - - getType() { - return this.entity.getType() - } - getClickableElement() { return this.clickableElement } - getColor() { - return this.#color - } - getLinkLocation() { return this.template.getLinkLocation(this) } @@ -136,13 +182,17 @@ export default class PinElement extends IElement { * @returns {NodeElement} */ getNodeElement() { - return this.closest("ueb-node") + return this.nodeElement } getLinks() { return this.entity.LinkedTo ?? [] } + setDefaultValue(value) { + this.entity.DefaultValue = value + } + sanitizeLinks() { this.entity.LinkedTo = this.getLinks().filter(pinReference => { let pin = this.blueprint.getPin(pinReference) @@ -160,16 +210,16 @@ export default class PinElement extends IElement { * @param {PinElement} targetPinElement */ linkTo(targetPinElement) { - this.entity.linkTo(targetPinElement.nodeElement.getNodeName(), targetPinElement.entity) - this.template.applyConnected(this) + this.entity.linkTo(targetPinElement.getNodeElement().getNodeName(), targetPinElement.entity) + this.isLinked = this.entity.isLinked() } /** * @param {PinElement} targetPinElement */ unlinkFrom(targetPinElement) { - this.entity.unlinkFrom(targetPinElement.nodeElement.getNodeName(), targetPinElement.entity) - this.template.applyConnected(this) + this.entity.unlinkFrom(targetPinElement.getNodeElement().getNodeName(), targetPinElement.entity) + this.isLinked = this.entity.isLinked() } /** @@ -178,8 +228,8 @@ export default class PinElement extends IElement { */ redirectLink(originalPinElement, newReference) { const index = this.entity.LinkedTo.findIndex(pinReference => - pinReference.objectName.toString() == originalPinElement.getPinName() - && pinReference.pinGuid == originalPinElement.entity.PinId + pinReference.objectName.toString() == originalPinElement.getNodeElement().getNodeName() + && pinReference.pinGuid.valueOf() == originalPinElement.entity.PinId.valueOf() ) if (index >= 0) { this.entity.LinkedTo[index] = newReference diff --git a/js/element/SelectorElement.js b/js/element/SelectorElement.js index 0613228..8b487b2 100644 --- a/js/element/SelectorElement.js +++ b/js/element/SelectorElement.js @@ -1,38 +1,47 @@ -// @ts-check - import FastSelectionModel from "../selection/FastSelectionModel" -import IElement from "./IElement" +import IFromToPositionedElement from "./IFromToPositionedElement" import SelectorTemplate from "../template/SelectorTemplate" /** - * @extends {IElement} + * @extends {IFromToPositionedElement} */ -export default class SelectorElement extends IElement { +export default class SelectorElement extends IFromToPositionedElement { constructor() { super({}, new SelectorTemplate()) this.selectionModel = null } - /** * @param {Number[]} initialPosition */ - startSelecting(initialPosition) { - this.template.applyStartSelecting(this, initialPosition) - this.selectionModel = new FastSelectionModel(initialPosition, this.blueprint.getNodes(), this.blueprint.nodeBoundariesSupplier, this.blueprint.nodeSelectToggleFunction) + beginSelect(initialPosition) { + this.blueprint.selecting = true + this.setBothLocations(initialPosition) + this.selectionModel = new FastSelectionModel( + initialPosition, + this.blueprint.getNodes(), + this.blueprint.nodeBoundariesSupplier, + this.blueprint.nodeSelectToggleFunction + ) } /** * @param {Number[]} finalPosition */ - doSelecting(finalPosition) { - this.template.applyDoSelecting(this, finalPosition) - this.selectionModel.selectTo(finalPosition) + selectTo(finalPosition) { + /** @type {FastSelectionModel} */ (this.selectionModel) + .selectTo(finalPosition) + this.finaPositionX = finalPosition[0] + this.finaPositionY = finalPosition[1] } - finishSelecting() { - this.template.applyFinishSelecting(this) + endSelect() { + this.blueprint.selecting = false this.selectionModel = null + this.initialPositionX = 0 + this.initialPositionY = 0 + this.finaPositionX = 0 + this.finaPositionY = 0 } } diff --git a/js/entity/FunctionReferenceEntity.js b/js/entity/FunctionReferenceEntity.js index 7c3e91a..d7524fc 100755 --- a/js/entity/FunctionReferenceEntity.js +++ b/js/entity/FunctionReferenceEntity.js @@ -1,5 +1,3 @@ -// @ts-check - import IEntity from "./IEntity" import ObjectReferenceEntity from "./ObjectReferenceEntity" @@ -9,10 +7,4 @@ export default class FunctionReferenceEntity extends IEntity { MemberParent: ObjectReferenceEntity, MemberName: "", } - - constructor(options = {}) { - super(options) - /** @type {ObjectReferenceEntity} */ this.MemberParent - /** @type {String} */ this.MemberName - } } diff --git a/js/entity/GuidEntity.js b/js/entity/GuidEntity.js index e613dce..689574d 100755 --- a/js/entity/GuidEntity.js +++ b/js/entity/GuidEntity.js @@ -1,5 +1,3 @@ -// @ts-check - import IEntity from "./IEntity" export default class GuidEntity extends IEntity { @@ -20,11 +18,6 @@ export default class GuidEntity extends IEntity { return new GuidEntity({ value: guid }) } - constructor(options = {}) { - super(options) - /** @type {String} */ this.value - } - valueOf() { return this.value } diff --git a/js/entity/IEntity.js b/js/entity/IEntity.js index d7c751b..aa9f521 100644 --- a/js/entity/IEntity.js +++ b/js/entity/IEntity.js @@ -1,12 +1,11 @@ -// @ts-check - -import ISerializable from "./ISerializable" +import Observable from "../Observable" import TypeInitialization from "./TypeInitialization" import Utility from "../Utility" -export default class IEntity extends ISerializable { +export default class IEntity extends Observable { static attributes = {} + #showAsString = false constructor(values) { super() @@ -53,7 +52,7 @@ export default class IEntity extends ISerializable { } if (defaultValue instanceof TypeInitialization) { if (!defaultValue.showDefault) { - target[property] = undefined // Declare undefined to preserve the order or attributes + target[property] = undefined // Declare undefined to preserve the order of attributes continue } defaultValue = defaultValue.value @@ -68,7 +67,6 @@ export default class IEntity extends ISerializable { target[property] = TypeInitialization.sanitize(defaultValue, defaultType) } } - // @ts-expect-error const attributes = this.constructor.attributes if (values.constructor !== Object && Object.getOwnPropertyNames(attributes).length == 1) { // Where there is just one attribute, option can be the value of that attribute @@ -78,4 +76,15 @@ export default class IEntity extends ISerializable { } defineAllAttributes(this, attributes, values) } + + isShownAsString() { + return this.#showAsString + } + + /** + * @param {Boolean} v + */ + setShowAsString(v) { + this.#showAsString = v + } } diff --git a/js/entity/ISerializable.js b/js/entity/ISerializable.js deleted file mode 100644 index 4800806..0000000 --- a/js/entity/ISerializable.js +++ /dev/null @@ -1,15 +0,0 @@ -export default class ISerializable { - - #showAsString = false - - isShownAsString() { - return this.#showAsString - } - - /** - * @param {Boolean} v - */ - setShowAsString(v) { - this.#showAsString = v - } -} \ No newline at end of file diff --git a/js/entity/IdentifierEntity.js b/js/entity/IdentifierEntity.js index 5e9ed31..1bcba36 100644 --- a/js/entity/IdentifierEntity.js +++ b/js/entity/IdentifierEntity.js @@ -1,5 +1,3 @@ -// @ts-check - import IEntity from "./IEntity" export default class IdentifierEntity extends IEntity { @@ -8,9 +6,9 @@ export default class IdentifierEntity extends IEntity { value: String, } - constructor(options = {}) { - super(options) - /** @type {String} */ this.value + static attributeConverter = { + fromAttribute: (value, type) => new IdentifierEntity(value), + toAttribute: (value, type) => value.toString() } valueOf() { diff --git a/js/entity/IntegerEntity.js b/js/entity/IntegerEntity.js index 49b6bb1..164552f 100755 --- a/js/entity/IntegerEntity.js +++ b/js/entity/IntegerEntity.js @@ -1,5 +1,3 @@ -// @ts-check - import IEntity from "./IEntity" export default class IntegerEntity extends IEntity { diff --git a/js/entity/InvariantTextEntity.js b/js/entity/InvariantTextEntity.js index 292509b..0450377 100644 --- a/js/entity/InvariantTextEntity.js +++ b/js/entity/InvariantTextEntity.js @@ -1,5 +1,3 @@ -// @ts-check - import IEntity from "./IEntity" export default class InvariantTextEntity extends IEntity { @@ -8,9 +6,4 @@ export default class InvariantTextEntity extends IEntity { static attributes = { value: String, } - - constructor(options = {}) { - super(options) - /** @type {String} */ this.value - } } diff --git a/js/entity/KeyBindingEntity.js b/js/entity/KeyBindingEntity.js index e880554..e3f7bc9 100644 --- a/js/entity/KeyBindingEntity.js +++ b/js/entity/KeyBindingEntity.js @@ -1,5 +1,3 @@ -// @ts-check - import IdentifierEntity from "./IdentifierEntity" import IEntity from "./IEntity" @@ -21,11 +19,5 @@ export default class KeyBindingEntity extends IEntity { options.bAlt = options.bAlt ?? false options.bCmd = options.bCmd ?? false super(options) - /** @type {String} */ this.ActionName - /** @type {Boolean} */ this.bShift - /** @type {Boolean} */ this.bCtrl - /** @type {Boolean} */ this.bAlt - /** @type {Boolean} */ this.bCmd - /** @type {IdentifierEntity} */ this.Key } } diff --git a/js/entity/LinearColorEntity.js b/js/entity/LinearColorEntity.js index 5c7aaf4..29ad458 100644 --- a/js/entity/LinearColorEntity.js +++ b/js/entity/LinearColorEntity.js @@ -1,5 +1,3 @@ -// @ts-check - import IEntity from "./IEntity" export default class LinearColorEntity extends IEntity { @@ -10,35 +8,4 @@ export default class LinearColorEntity extends IEntity { B: Number, A: Number, } - - constructor(options = {}) { - super(options) - /** @type {Number} */ this.R - /** @type {Number} */ this.G - /** @type {Number} */ this.B - /** @type {Number} */ this.A - } - - /** - * @param {Number} number - */ - static numberToString(number) { - return Math.round(number * 255).toString(16) - } - - static fromString(value) { - return new LinearColorEntity({ - R: parseInt(value.substr(0, 2), 16) / 255, - G: parseInt(value.substr(2, 2), 16) / 255, - B: parseInt(value.substr(4, 2), 16) / 255, - A: parseInt(value.substr(6, 2), 16) / 255, - }) - } - - toString() { - return "#" + LinearColorEntity.numberToString(this.R) - + LinearColorEntity.numberToString(this.G) - + LinearColorEntity.numberToString(this.B) - + LinearColorEntity.numberToString(this.A) - } } diff --git a/js/entity/LocalizedTextEntity.js b/js/entity/LocalizedTextEntity.js index d55eb6d..3d1cd59 100755 --- a/js/entity/LocalizedTextEntity.js +++ b/js/entity/LocalizedTextEntity.js @@ -1,5 +1,3 @@ -// @ts-check - import IEntity from "./IEntity" export default class LocalizedTextEntity extends IEntity { @@ -10,11 +8,4 @@ export default class LocalizedTextEntity extends IEntity { key: String, value: String, } - - constructor(options = {}) { - super(options) - /** @type {String} */ this.namespace - /** @type {String} */ this.key - /** @type {String} */ this.value - } } diff --git a/js/entity/NaturalNumberEntity.js b/js/entity/NaturalNumberEntity.js index 67b436b..9221f3b 100755 --- a/js/entity/NaturalNumberEntity.js +++ b/js/entity/NaturalNumberEntity.js @@ -1,5 +1,3 @@ -// @ts-check - import IntegerEntity from "./IntegerEntity" import Utility from "../Utility" diff --git a/js/entity/ObjectEntity.js b/js/entity/ObjectEntity.js index 3fc54bd..3bdea59 100755 --- a/js/entity/ObjectEntity.js +++ b/js/entity/ObjectEntity.js @@ -1,6 +1,3 @@ -// @ts-check - -import Utility from "../Utility" import FunctionReferenceEntity from "./FunctionReferenceEntity" import GuidEntity from "./GuidEntity" import IdentifierEntity from "./IdentifierEntity" @@ -9,6 +6,7 @@ import IntegerEntity from "./IntegerEntity" import ObjectReferenceEntity from "./ObjectReferenceEntity" import PinEntity from "./PinEntity" import TypeInitialization from "./TypeInitialization" +import Utility from "../Utility" import VariableReferenceEntity from "./VariableReferenceEntity" export default class ObjectEntity extends IEntity { @@ -33,25 +31,6 @@ export default class ObjectEntity extends IEntity { static nameRegex = /(\w+)_(\d+)/ - constructor(options = {}) { - super(options) - /** @type {ObjectReferenceEntity} */ this.Class - /** @type {String} */ this.Name - /** @type {Boolean?} */ this.bIsPureFunc - /** @type {VariableReferenceEntity?} */ this.VariableReference - /** @type {FunctionReferenceEntity?} */ this.FunctionReference - /** @type {FunctionReferenceEntity?} */ this.EventReference - /** @type {ObjectReferenceEntity?} */ this.TargetType - /** @type {IntegerEntity} */ this.NodePosX - /** @type {IntegerEntity} */ this.NodePosY - /** @type {IdentifierEntity?} */ this.AdvancedPinDisplay - /** @type {IdentifierEntity?} */ this.EnabledState - /** @type {GuidEntity} */ this.NodeGuid - /** @type {IntegerEntity?} */ this.ErrorType - /** @type {String?} */ this.ErrorMsg - /** @type {PinEntity[]} */ this.CustomProperties - } - getObjectName(dropCounter = false) { if (dropCounter) { return this.getNameAndCounter()[0] @@ -67,6 +46,7 @@ export default class ObjectEntity extends IEntity { if (result && result.length == 3) { return [result[1], parseInt(result[2])] } + return ["", 0] } getDisplayName() { diff --git a/js/entity/ObjectReferenceEntity.js b/js/entity/ObjectReferenceEntity.js index edf931e..3458f11 100755 --- a/js/entity/ObjectReferenceEntity.js +++ b/js/entity/ObjectReferenceEntity.js @@ -1,5 +1,3 @@ -// @ts-check - import IEntity from "./IEntity" export default class ObjectReferenceEntity extends IEntity { @@ -8,10 +6,4 @@ export default class ObjectReferenceEntity extends IEntity { type: String, path: String, } - - constructor(options = {}) { - super(options) - /** @type {String} */ this.type - /** @type {String} */ this.path - } } diff --git a/js/entity/PathSymbolEntity.js b/js/entity/PathSymbolEntity.js index 51f9617..7a5fd63 100755 --- a/js/entity/PathSymbolEntity.js +++ b/js/entity/PathSymbolEntity.js @@ -1,5 +1,3 @@ -// @ts-check - import IEntity from "./IEntity" export default class PathSymbolEntity extends IEntity { @@ -8,11 +6,6 @@ export default class PathSymbolEntity extends IEntity { value: String, } - constructor(options = {}) { - super(options) - /** @type {String} */ this.value - } - valueOf() { return this.value } diff --git a/js/entity/PinEntity.js b/js/entity/PinEntity.js index 73ea6fa..3a92355 100755 --- a/js/entity/PinEntity.js +++ b/js/entity/PinEntity.js @@ -1,5 +1,3 @@ -// @ts-check - import GuidEntity from "./GuidEntity" import IEntity from "./IEntity" import LinearColorEntity from "./LinearColorEntity" @@ -44,44 +42,14 @@ export default class PinEntity extends IEntity { bOrphanedPin: false, } - constructor(options = {}) { - super(options) - /** @type {GuidEntity} */ this.PinId - /** @type {String} */ this.PinName - /** @type {LocalizedTextEntity} */ this.PinFriendlyName - /** @type {String} */ this.PinToolTip - /** @type {String} */ this.Direction - /** - * @type {{ - * PinCategory: String, - * PinSubCategory: String, - * PinSubCategoryObject: ObjectReferenceEntity, - * PinSubCategoryMemberReference: any, - * PinValueType: String, - * ContainerType: ObjectReferenceEntity, - * bIsReference: Boolean, - * bIsConst: Boolean, - * bIsWeakPointer: Boolean, - * bIsUObjectWrapper: Boolean, - * }} - */ this.PinType - /** @type {PinReferenceEntity[]} */ this.LinkedTo - /** @type {String | LinearColorEntity} */ this.DefaultValue - /** @type {String} */ this.AutogeneratedDefaultValue - /** @type {ObjectReferenceEntity} */ this.DefaultObject - /** @type {GuidEntity} */ this.PersistentGuid - /** @type {Boolean} */ this.bHidden - /** @type {Boolean} */ this.bNotConnectable - /** @type {Boolean} */ this.bDefaultValueIsReadOnly - /** @type {Boolean} */ this.bDefaultValueIsIgnored - /** @type {Boolean} */ this.bAdvancedView - /** @type {Boolean} */ this.bOrphanedPin - } - getDefaultValue() { return this.DefaultValue ?? "" } + isHidden() { + return this.bHidden + } + isInput() { return !this.bHidden && this.Direction != "EGPD_Output" } @@ -102,7 +70,6 @@ export default class PinEntity extends IEntity { /** @type {PinReferenceEntity[]} */ this.LinkedTo const linkFound = this.LinkedTo?.find(pinReferenceEntity => { - // @ts-ignore return pinReferenceEntity.objectName == targetObjectName && pinReferenceEntity.pinGuid.valueOf() == targetPinEntity.PinId.valueOf() }) @@ -121,12 +88,9 @@ export default class PinEntity extends IEntity { * @param {PinEntity} targetPinEntity */ unlinkFrom(targetObjectName, targetPinEntity) { - /** @type {PinReferenceEntity[]} */ - this.LinkedTo - const indexElement = this.LinkedTo.findIndex(pinReferenceEntity => { - // @ts-expect-error + const indexElement = this.LinkedTo?.findIndex(pinReferenceEntity => { return pinReferenceEntity.objectName == targetObjectName - && pinReferenceEntity.pinGuid == targetPinEntity.PinId + && pinReferenceEntity.pinGuid.valueOf() == targetPinEntity.PinId.valueOf() }) if (indexElement >= 0) { if (this.LinkedTo.length == 1) { diff --git a/js/entity/PinReferenceEntity.js b/js/entity/PinReferenceEntity.js index c3c8aef..3c4770e 100755 --- a/js/entity/PinReferenceEntity.js +++ b/js/entity/PinReferenceEntity.js @@ -1,5 +1,3 @@ -// @ts-check - import GuidEntity from "./GuidEntity" import IEntity from "./IEntity" import PathSymbolEntity from "./PathSymbolEntity" @@ -10,10 +8,4 @@ export default class PinReferenceEntity extends IEntity { objectName: PathSymbolEntity, pinGuid: GuidEntity, } - - constructor(options = {}) { - super(options) - /** @type {PathSymbolEntity} */ this.objectName - /** @type {GuidEntity} */ this.pinGuid - } } diff --git a/js/entity/SerializedType.js b/js/entity/SerializedType.js index 231faf3..13f5f7a 100644 --- a/js/entity/SerializedType.js +++ b/js/entity/SerializedType.js @@ -1,14 +1,5 @@ -// @ts-check - -/** - * @typedef {import("../entity/IEntity").default} IEntity - * @typedef {(new (object?: Object) => IEntity) | StringConstructor | NumberConstructor | BooleanConstructor} Constructor - * @typedef {Constructor|Constructor[]} AcceptedType - */ - export default class SerializedType { - /** @type {(Constructor|Array)[]} */ #types get types() { return this.#types @@ -17,9 +8,6 @@ export default class SerializedType { this.#types = v } - /** - * @param {...AcceptedType} acceptedTypes - */ constructor(...acceptedTypes) { this.#types = acceptedTypes } diff --git a/js/entity/TypeInitialization.js b/js/entity/TypeInitialization.js index 71fe91e..56b494c 100755 --- a/js/entity/TypeInitialization.js +++ b/js/entity/TypeInitialization.js @@ -1,5 +1,3 @@ -// @ts-check - import SerializedType from "./SerializedType" /** diff --git a/js/entity/VariableReferenceEntity.js b/js/entity/VariableReferenceEntity.js index 0bf6015..9a538eb 100755 --- a/js/entity/VariableReferenceEntity.js +++ b/js/entity/VariableReferenceEntity.js @@ -1,5 +1,3 @@ -// @ts-check - import IEntity from "./IEntity" import GuidEntity from "./GuidEntity" @@ -10,11 +8,4 @@ export default class VariableReferenceEntity extends IEntity { MemberGuid: GuidEntity, bSelfContext: false, } - - constructor(options = {}) { - super(options) - /** @type {String} */ this.MemberName - /** @type {GuidEntity} */ this.MemberGuid - /** @type {Boolean} */ this.bSelfContext - } } diff --git a/js/export.js b/js/export.js index bf2a8f5..d1890ed 100755 --- a/js/export.js +++ b/js/export.js @@ -1,5 +1,3 @@ -// @ts-check - import Blueprint from "./Blueprint" import Configuration from "./Configuration" import initializeSerializerFactory from "./serialization/initializeSerializerFactory" diff --git a/js/input/IInput.js b/js/input/IInput.js index 8326a0f..1aaa346 100644 --- a/js/input/IInput.js +++ b/js/input/IInput.js @@ -1,5 +1,3 @@ -// @ts-check - import Configuration from "../Configuration" /** diff --git a/js/input/common/Copy.js b/js/input/common/Copy.js index 234671d..17cad9d 100755 --- a/js/input/common/Copy.js +++ b/js/input/common/Copy.js @@ -1,5 +1,3 @@ -// @ts-check - import IInput from "../IInput" import ObjectSerializer from "../../serialization/ObjectSerializer" @@ -26,7 +24,7 @@ export default class Copy extends IInput { } copied() { - const value = this.blueprint.getNodes(true).map(node => this.serializer.serialize(node.entity, false)).join("\n") + const value = this.blueprint.getNodes(true).map(node => this.serializer.serialize(node.entity, false)).join("\n\n") navigator.clipboard.writeText(value) } } diff --git a/js/input/common/Paste.js b/js/input/common/Paste.js index 454c272..c3838a1 100755 --- a/js/input/common/Paste.js +++ b/js/input/common/Paste.js @@ -1,5 +1,3 @@ -// @ts-check - import IInput from "../IInput" import NodeElement from "../../element/NodeElement" import ObjectSerializer from "../../serialization/ObjectSerializer" @@ -32,8 +30,8 @@ export default class Paste extends IInput { let count = 0 let nodes = this.serializer.readMultiple(value).map(entity => { let node = new NodeElement(entity) - top += node.location[1] - left += node.location[0] + top += node.locationY + left += node.locationX ++count return node }) @@ -49,8 +47,8 @@ export default class Paste extends IInput { mousePosition[1] - top, ] node.addLocation(locationOffset) - node.setSelected(true) node.snapToGrid() + node.setSelected(true) }) this.blueprint.addGraphElement(...nodes) return true diff --git a/js/input/keybaord/IKeyboardShortcut.js b/js/input/keybaord/IKeyboardShortcut.js index 4727418..dab073b 100644 --- a/js/input/keybaord/IKeyboardShortcut.js +++ b/js/input/keybaord/IKeyboardShortcut.js @@ -1,5 +1,3 @@ -// @ts-check - import Configuration from "../../Configuration" import IInput from "../IInput" import ISerializer from "../../serialization/ISerializer" @@ -23,7 +21,6 @@ export default class IKeyboardShortcut extends IInput { return v } if (v.constructor === String) { - // @ts-expect-error const parsed = ISerializer.grammar.KeyBinding.parse(v) if (parsed.status) { return parsed.value diff --git a/js/input/keybaord/KeyboardCanc.js b/js/input/keybaord/KeyboardCanc.js index 13bc9e0..5f2c470 100755 --- a/js/input/keybaord/KeyboardCanc.js +++ b/js/input/keybaord/KeyboardCanc.js @@ -1,5 +1,3 @@ -// @ts-check - import Configuration from "../../Configuration" import IKeyboardShortcut from "./IKeyboardShortcut" diff --git a/js/input/keybaord/KeyboardEnableZoom.js b/js/input/keybaord/KeyboardEnableZoom.js index 04633a4..111dcfb 100644 --- a/js/input/keybaord/KeyboardEnableZoom.js +++ b/js/input/keybaord/KeyboardEnableZoom.js @@ -1,5 +1,3 @@ -// @ts-check - import Configuration from "../../Configuration" import IKeyboardShortcut from "./IKeyboardShortcut" import Zoom from "../mouse/Zoom" diff --git a/js/input/keybaord/KeyboardSelectAll.js b/js/input/keybaord/KeyboardSelectAll.js index ca8272c..17677b1 100755 --- a/js/input/keybaord/KeyboardSelectAll.js +++ b/js/input/keybaord/KeyboardSelectAll.js @@ -1,5 +1,3 @@ -// @ts-check - import Configuration from "../../Configuration" import IKeyboardShortcut from "./IKeyboardShortcut" diff --git a/js/input/mouse/IMouseClickDrag.js b/js/input/mouse/IMouseClickDrag.js index d38e07e..6183e18 100644 --- a/js/input/mouse/IMouseClickDrag.js +++ b/js/input/mouse/IMouseClickDrag.js @@ -1,5 +1,3 @@ -// @ts-check - import Configuration from "../../Configuration" import IPointing from "./IPointing" @@ -43,12 +41,12 @@ export default class IMouseClickDrag extends IPointing { let self = this this.#mouseDownHandler = e => { - this.blueprint.setFocused(true) + self.blueprint.setFocused(true) switch (e.button) { case self.options.clickButton: // Either doesn't matter or consider the click only when clicking on the parent, not descandants if (self.options.looseTarget || e.target == e.currentTarget) { - if (this.options.consumeEvent) { + if (self.options.consumeEvent) { e.stopImmediatePropagation() // Captured, don't call anyone else } // Attach the listeners @@ -67,7 +65,7 @@ export default class IMouseClickDrag extends IPointing { } this.#mouseStartedMovingHandler = e => { - if (this.options.consumeEvent) { + if (self.options.consumeEvent) { e.stopImmediatePropagation() // Captured, don't call anyone else } // Delegate from now on to self.#mouseMoveHandler @@ -75,14 +73,15 @@ export default class IMouseClickDrag extends IPointing { 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 = this.target.dispatchEvent(dragEvent) == false + self.#trackingMouse = self.target.dispatchEvent(dragEvent) == false + const location = self.locationFromEvent(e) // Do actual actions - self.startDrag() + self.startDrag(location) self.started = true } this.#mouseMoveHandler = e => { - if (this.options.consumeEvent) { + if (self.options.consumeEvent) { e.stopImmediatePropagation() // Captured, don't call anyone else } const location = self.locationFromEvent(e) @@ -95,7 +94,7 @@ export default class IMouseClickDrag extends IPointing { this.#mouseUpHandler = e => { if (!self.options.exitAnyButton || e.button == self.options.clickButton) { - if (this.options.consumeEvent) { + if (self.options.consumeEvent) { e.stopImmediatePropagation() // Captured, don't call anyone else } // Remove the handlers of "mousemove" and "mouseup" @@ -108,7 +107,7 @@ export default class IMouseClickDrag extends IPointing { self.unclicked() if (self.#trackingMouse) { const dragEvent = self.getEvent(Configuration.trackingMouseEventName.end) - this.target.dispatchEvent(dragEvent) + self.target.dispatchEvent(dragEvent) self.#trackingMouse = false } self.started = false diff --git a/js/input/mouse/IMouseWheel.js b/js/input/mouse/IMouseWheel.js index 72456da..8ff6f06 100644 --- a/js/input/mouse/IMouseWheel.js +++ b/js/input/mouse/IMouseWheel.js @@ -1,5 +1,4 @@ -// @ts-check - +import Configuration from "../../Configuration" import IPointing from "./IPointing" export default class IMouseWheel extends IPointing { @@ -24,7 +23,7 @@ export default class IMouseWheel extends IPointing { this.#mouseWheelHandler = e => { e.preventDefault() const location = self.locationFromEvent(e) - self.wheel(Math.sign(e.deltaY), location) + self.wheel(Math.sign(e.deltaY * Configuration.mouseWheelFactor), location) } this.#mouseParentWheelHandler = e => e.preventDefault() diff --git a/js/input/mouse/IPointing.js b/js/input/mouse/IPointing.js index e7ef287..b5b9e0c 100644 --- a/js/input/mouse/IPointing.js +++ b/js/input/mouse/IPointing.js @@ -1,5 +1,3 @@ -// @ts-check - import IInput from "../IInput" import Utility from "../../Utility" @@ -22,11 +20,10 @@ export default class IPointing extends IInput { * @param {MouseEvent} mouseEvent */ locationFromEvent(mouseEvent) { - return this.blueprint.compensateTranslation( - Utility.convertLocation( - [mouseEvent.clientX, mouseEvent.clientY], - this.movementSpace - ) + const location = Utility.convertLocation( + [mouseEvent.clientX, mouseEvent.clientY], + this.movementSpace ) + return this.blueprint.compensateTranslation(location) } } diff --git a/js/input/mouse/MouseCreateLink.js b/js/input/mouse/MouseCreateLink.js index 9390d2c..0d2c49d 100755 --- a/js/input/mouse/MouseCreateLink.js +++ b/js/input/mouse/MouseCreateLink.js @@ -1,8 +1,5 @@ -// @ts-check - import IMouseClickDrag from "./IMouseClickDrag" import LinkElement from "../../element/LinkElement" -import LinkMessageElement from "../../element/LinkMessageElement" /** * @typedef {import("../../element/PinElement").default} PinElement @@ -22,34 +19,34 @@ export default class MouseCreateLink extends IMouseClickDrag { /** @type {(e: MouseEvent) => void} */ #mouseleaveHandler - /** @type {LinkElement} */ + /** @type {LinkElement?} */ link - /** @type {PinElement} */ + /** @type {PinElement?} */ enteredPin linkValid = false constructor(target, blueprint, options) { super(target, blueprint, options) - let self = this this.#mouseenterHandler = e => { if (!self.enteredPin) { self.linkValid = false self.enteredPin = /** @type {PinElement} */ (e.target) - const a = self.enteredPin, b = self.target + const a = self.enteredPin + const b = self.target if (a.getNodeElement() == b.getNodeElement()) { - this.setLinkMessage(LinkMessageElement.sameNode()) + self.link.setMessageSameNode() } else if (a.isOutput() == b.isOutput()) { - this.setLinkMessage(LinkMessageElement.directionsIncompatible()) + self.link.setMessageDirectionsIncompatible() } else if (a.isOutput() == b.isOutput()) { - this.setLinkMessage(LinkMessageElement.directionsIncompatible()) + self.link.setMessageDirectionsIncompatible() } else if (self.blueprint.getLinks([a, b]).length) { - this.setLinkMessage(LinkMessageElement.replaceLink()) + self.link.setMessageReplaceLink() self.linkValid = true } else { - this.setLinkMessage(LinkMessageElement.correct()) + self.link.setMessageCorrect() self.linkValid = true } } @@ -58,15 +55,15 @@ export default class MouseCreateLink extends IMouseClickDrag { if (self.enteredPin == e.target) { self.enteredPin = null self.linkValid = false - this.setLinkMessage(LinkMessageElement.placeNode()) + self.link?.setMessagePlaceNode() } } } - startDrag() { + startDrag(location) { this.link = new LinkElement(this.target, null) - this.blueprint.nodesContainerElement.prepend(this.link) - this.setLinkMessage(LinkMessageElement.placeNode()) + this.blueprint.linksContainerElement.prepend(this.link) + this.link.setMessagePlaceNode() this.#listenedPins = this.blueprint.querySelectorAll("ueb-pin") this.#listenedPins.forEach(pin => { if (pin != this.target) { @@ -75,7 +72,7 @@ export default class MouseCreateLink extends IMouseClickDrag { } }) this.link.startDragging() - this.link.setDestinationLocation(this.clickedPosition) + this.link.setDestinationLocation(location) } dragTo(location, movement) { @@ -90,7 +87,7 @@ export default class MouseCreateLink extends IMouseClickDrag { if (this.enteredPin && this.linkValid) { this.blueprint.addGraphElement(this.link) this.link.destinationPin = this.enteredPin - this.link.setLinkMessage(null) + this.link.removeMessage() this.link.finishDragging() } else { this.link.finishDragging() @@ -100,8 +97,4 @@ export default class MouseCreateLink extends IMouseClickDrag { this.link = null this.#listenedPins = null } - - setLinkMessage(linkMessage) { - this.link.setLinkMessage(linkMessage) - } } diff --git a/js/input/mouse/MouseMoveNodes.js b/js/input/mouse/MouseMoveNodes.js index 44e6aa2..1451002 100755 --- a/js/input/mouse/MouseMoveNodes.js +++ b/js/input/mouse/MouseMoveNodes.js @@ -1,5 +1,4 @@ -// @ts-check - +import Configuration from "../../Configuration" import IMouseClickDrag from "./IMouseClickDrag" import Utility from "../../Utility" @@ -15,7 +14,7 @@ export default class MouseMoveNodes extends IMouseClickDrag { constructor(target, blueprint, options) { super(target, blueprint, options) - this.stepSize = parseInt(options?.stepSize ?? this.blueprint.gridSize) + this.stepSize = parseInt(options?.stepSize ?? Configuration.gridSize) this.mouseLocation = [0, 0] } @@ -30,9 +29,10 @@ export default class MouseMoveNodes 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(this.target.location, this.stepSize)] - : [location, this.target.location] + ? [Utility.snapToGrid(location, this.stepSize), Utility.snapToGrid(initialTargetLocation, this.stepSize)] + : [location, initialTargetLocation] const d = [ mouseLocation[0] - this.mouseLocation[0], mouseLocation[1] - this.mouseLocation[1] @@ -43,8 +43,8 @@ export default class MouseMoveNodes extends IMouseClickDrag { } // Make sure it snaps on the grid - d[0] += targetLocation[0] - this.target.location[0] - d[1] += targetLocation[1] - this.target.location[1] + d[0] += targetLocation[0] - this.target.locationX + d[1] += targetLocation[1] - this.target.locationY this.target.dispatchDragEvent(d) diff --git a/js/input/mouse/MouseScrollGraph.js b/js/input/mouse/MouseScrollGraph.js index 1dc63f1..130d420 100755 --- a/js/input/mouse/MouseScrollGraph.js +++ b/js/input/mouse/MouseScrollGraph.js @@ -1,11 +1,9 @@ -// @ts-check - import IMouseClickDrag from "./IMouseClickDrag" export default class MouseScrollGraph extends IMouseClickDrag { startDrag() { - this.blueprint.template.applyStartDragScrolling(this.blueprint) + this.blueprint.scrolling = true } dragTo(location, movement) { @@ -13,6 +11,6 @@ export default class MouseScrollGraph extends IMouseClickDrag { } endDrag() { - this.blueprint.template.applyEndDragScrolling(this.blueprint) + this.blueprint.scrolling = false } } diff --git a/js/input/mouse/MouseTracking.js b/js/input/mouse/MouseTracking.js index 69fabde..51d78c9 100755 --- a/js/input/mouse/MouseTracking.js +++ b/js/input/mouse/MouseTracking.js @@ -1,5 +1,3 @@ -// @ts-check - import Configuration from "../../Configuration" import IPointing from "./IPointing" diff --git a/js/input/mouse/Select.js b/js/input/mouse/Select.js index 22cec47..55560e1 100755 --- a/js/input/mouse/Select.js +++ b/js/input/mouse/Select.js @@ -1,5 +1,3 @@ -// @ts-check - import IMouseClickDrag from "./IMouseClickDrag" export default class Select extends IMouseClickDrag { @@ -10,16 +8,16 @@ export default class Select extends IMouseClickDrag { } startDrag() { - this.selectorElement.startSelecting(this.clickedPosition) + this.selectorElement.beginSelect(this.clickedPosition) } dragTo(location, movement) { - this.selectorElement.doSelecting(location) + this.selectorElement.selectTo(location) } endDrag() { if (this.started) { - this.selectorElement.finishSelecting() + this.selectorElement.endSelect() } } diff --git a/js/input/mouse/Unfocus.js b/js/input/mouse/Unfocus.js index 99ac0ba..89c4fd9 100755 --- a/js/input/mouse/Unfocus.js +++ b/js/input/mouse/Unfocus.js @@ -1,5 +1,3 @@ -// @ts-check - import IInput from "../IInput" export default class Unfocus extends IInput { diff --git a/js/input/mouse/Zoom.js b/js/input/mouse/Zoom.js index 14d6124..37df9f9 100755 --- a/js/input/mouse/Zoom.js +++ b/js/input/mouse/Zoom.js @@ -1,5 +1,3 @@ -// @ts-check - import IMouseWheel from "./IMouseWheel" export default class Zoom extends IMouseWheel { diff --git a/js/selection/FastSelectionModel.js b/js/selection/FastSelectionModel.js index f6c819b..34e8643 100755 --- a/js/selection/FastSelectionModel.js +++ b/js/selection/FastSelectionModel.js @@ -1,5 +1,3 @@ -// @ts-check - import OrderedIndexArray from "./OrderedIndexArray" /** diff --git a/js/selection/OrderedIndexArray.js b/js/selection/OrderedIndexArray.js index e532889..ad13695 100755 --- a/js/selection/OrderedIndexArray.js +++ b/js/selection/OrderedIndexArray.js @@ -1,5 +1,3 @@ -// @ts-check - export default class OrderedIndexArray { /** diff --git a/js/selection/SimpleSelectionModel.js b/js/selection/SimpleSelectionModel.js index 4ffa984..a6a7a6e 100755 --- a/js/selection/SimpleSelectionModel.js +++ b/js/selection/SimpleSelectionModel.js @@ -1,5 +1,3 @@ -// @ts-check - export default class SimpleSelectionModel { /** diff --git a/js/serialization/CustomSerializer.js b/js/serialization/CustomSerializer.js index 405c814..5cd753b 100755 --- a/js/serialization/CustomSerializer.js +++ b/js/serialization/CustomSerializer.js @@ -1,5 +1,3 @@ -// @ts-check - import GeneralSerializer from "./GeneralSerializer" /** diff --git a/js/serialization/GeneralSerializer.js b/js/serialization/GeneralSerializer.js index c444048..0e61edb 100755 --- a/js/serialization/GeneralSerializer.js +++ b/js/serialization/GeneralSerializer.js @@ -1,5 +1,3 @@ -// @ts-check - import Grammar from "./Grammar" import ISerializer from "./ISerializer" diff --git a/js/serialization/Grammar.js b/js/serialization/Grammar.js index ae905c8..7292ca8 100755 --- a/js/serialization/Grammar.js +++ b/js/serialization/Grammar.js @@ -1,5 +1,3 @@ -// @ts-check - import FunctionReferenceEntity from "../entity/FunctionReferenceEntity" import GuidEntity from "../entity/GuidEntity" import IdentifierEntity from "../entity/IdentifierEntity" @@ -124,9 +122,7 @@ export default class Grammar { * Then it populates an object of type EntityType with the attribute values found inside the parentheses. */ P.seqMap( - // @ts-expect-error entityType.lookbehind - // @ts-expect-error ? P.seq(P.string(entityType.lookbehind), P.optWhitespace, P.string("(")) : P.string("("), Grammar.createAttributeGrammar(r, entityType) @@ -154,8 +150,14 @@ export default class Grammar { Boolean = r => P.alt(P.string("True"), P.string("False")).map(v => v === "True" ? true : false) .desc("either True or False") + HexDigit = r => P.regex(/[0-9a-fA-f]/).desc("hexadecimal digit") + Number = r => P.regex(/[\-\+]?[0-9]+(?:\.[0-9]+)?/).map(Number).desc("a number") + NaturalNumber = r => P.regex(/0|[1-9]\d*/).map(Number).desc("a natural number") + + ColorNumber = r => r.NaturalNumber.assert(n => 0 <= n && n < 256, "the color must be between 0 and 256 excluded") + Word = r => P.regex(/[a-zA-Z]+/).desc("a word") String = r => P.regex(/(?:[^"\\]|\\.)*/).wrap(P.string('"'), P.string('"')).map(Utility.decodeString) @@ -294,4 +296,66 @@ export default class Grammar { /** @returns {Parsimmon.Parser} */ MultipleObject = r => r.Object.sepBy1(P.whitespace).trim(P.optWhitespace) + + /* --- Others --- */ + + LinearColorFromHex = r => P + .string("#") + .then(r.HexDigit.times(2).tie().times(3, 4)) + .trim(P.optWhitespace) + .map(([R, G, B, A]) => new LinearColorEntity({ + R: parseInt(R, 16) / 255, + G: parseInt(G, 16) / 255, + B: parseInt(B, 16) / 255, + A: A ? parseInt(A, 16) / 255 : 1, + })) + + LinearColorFromRGBList = r => P.seqMap( + r.ColorNumber, + P.string(",").skip(P.optWhitespace), + r.ColorNumber, + P.string(",").skip(P.optWhitespace), + r.ColorNumber.map(Number), + (R, _, G, __, B) => new LinearColorEntity({ + R: R / 255, + G: G / 255, + B: B / 255, + A: 1, + }) + ) + + LinearColorFromRGB = r => P.string("rgb").then( + r.LinearColorFromRGBList.wrap( + P.regex(/\(\s*/), + P.regex(/\s*\)/) + ) + ) + + LinearColorFromRGBA = r => P.string("rgba").then( + P.seqMap( + r.ColorNumber, + P.string(",").skip(P.optWhitespace), + r.ColorNumber, + P.string(",").skip(P.optWhitespace), + r.ColorNumber.map(Number), + P.string(",").skip(P.optWhitespace), + P.regex(/0?\.\d+|[01]/).map(Number), + (R, _, G, __, B, ___, A) => new LinearColorEntity({ + R: R / 255, + G: G / 255, + B: B / 255, + A: A, + }) + ).wrap( + P.regex(/\(\s*/), + P.regex(/\s*\)/) + ) + ) + + LinearColorFromAnyColor = r => P.alt( + r.LinearColorFromRGBList, + r.LinearColorFromHex, + r.LinearColorFromRGB, + r.LinearColorFromRGBA + ) } diff --git a/js/serialization/ISerializer.js b/js/serialization/ISerializer.js index 0c89f1e..fddc83c 100644 --- a/js/serialization/ISerializer.js +++ b/js/serialization/ISerializer.js @@ -1,5 +1,3 @@ -// @ts-check - import Grammar from "./Grammar" import IEntity from "../entity/IEntity" import Parsimmon from "parsimmon" diff --git a/js/serialization/ObjectSerializer.js b/js/serialization/ObjectSerializer.js index b724da9..0729817 100755 --- a/js/serialization/ObjectSerializer.js +++ b/js/serialization/ObjectSerializer.js @@ -1,5 +1,3 @@ -// @ts-check - import ISerializer from "./ISerializer" import ObjectEntity from "../entity/ObjectEntity" import PinEntity from "../entity/PinEntity" diff --git a/js/serialization/PinSerializer.js b/js/serialization/PinSerializer.js index e7d7e41..3503734 100755 --- a/js/serialization/PinSerializer.js +++ b/js/serialization/PinSerializer.js @@ -1,5 +1,3 @@ -// @ts-check - import PinEntity from "../entity/PinEntity" import Utility from "../Utility" import GeneralSerializer from "./GeneralSerializer" @@ -16,7 +14,6 @@ export default class PinSerializer extends GeneralSerializer { */ writeValue(value, fullKey, insideString) { if (value?.constructor === String && fullKey.length == 1 && fullKey[0] == "DefaultValue") { - // @ts-expect-error return `"${Utility.encodeInputString(value)}"` } return super.writeValue(value, fullKey, insideString) diff --git a/js/serialization/SerializerFactory.js b/js/serialization/SerializerFactory.js index d540512..78a4319 100755 --- a/js/serialization/SerializerFactory.js +++ b/js/serialization/SerializerFactory.js @@ -1,5 +1,3 @@ -// @ts-check - import Utility from "../Utility" export default class SerializerFactory { diff --git a/js/serialization/ToStringSerializer.js b/js/serialization/ToStringSerializer.js index 07ce93d..32aad8d 100755 --- a/js/serialization/ToStringSerializer.js +++ b/js/serialization/ToStringSerializer.js @@ -1,5 +1,3 @@ -// @ts-check - import GeneralSerializer from "./GeneralSerializer" /** diff --git a/js/serialization/initializeSerializerFactory.js b/js/serialization/initializeSerializerFactory.js index 49606c5..c74495b 100755 --- a/js/serialization/initializeSerializerFactory.js +++ b/js/serialization/initializeSerializerFactory.js @@ -1,5 +1,3 @@ -// @ts-check - import CustomSerializer from "./CustomSerializer" import FunctionReferenceEntity from "../entity/FunctionReferenceEntity" import GeneralSerializer from "./GeneralSerializer" @@ -24,44 +22,40 @@ export default function initializeSerializerFactory() { const bracketsWrapped = v => `(${v})` - SerializerFactory.registerSerializer( - LinearColorEntity, - new GeneralSerializer(bracketsWrapped, LinearColorEntity) - ) - - SerializerFactory.registerSerializer( - ObjectEntity, - new ObjectSerializer() - ) - - SerializerFactory.registerSerializer( - PinEntity, - new PinSerializer() - ) - SerializerFactory.registerSerializer( FunctionReferenceEntity, new GeneralSerializer(bracketsWrapped, FunctionReferenceEntity) ) + SerializerFactory.registerSerializer(GuidEntity, new ToStringSerializer(GuidEntity)) + + SerializerFactory.registerSerializer(IdentifierEntity, new ToStringSerializer(IdentifierEntity)) + + SerializerFactory.registerSerializer(IntegerEntity, new ToStringSerializer(IntegerEntity)) + + SerializerFactory.registerSerializer( + InvariantTextEntity, + new GeneralSerializer(v => `${InvariantTextEntity.lookbehind}(${v})`, InvariantTextEntity, "", ", ", false, "", _ => "") + ) + SerializerFactory.registerSerializer( KeyBindingEntity, new GeneralSerializer(bracketsWrapped, KeyBindingEntity) ) + SerializerFactory.registerSerializer( + LinearColorEntity, + new GeneralSerializer(bracketsWrapped, LinearColorEntity) + ) + SerializerFactory.registerSerializer( LocalizedTextEntity, new GeneralSerializer(v => `${LocalizedTextEntity.lookbehind}(${v})`, LocalizedTextEntity, "", ", ", false, "", _ => "") ) SerializerFactory.registerSerializer( - InvariantTextEntity, - new GeneralSerializer(v => `${InvariantTextEntity.lookbehind}(${v})`, InvariantTextEntity, "", ", ", false, "", _ => "") - ) - - SerializerFactory.registerSerializer( - PinReferenceEntity, - new GeneralSerializer(v => v, PinReferenceEntity, "", " ", false, "", _ => "") + ObjectEntity, + new ObjectSerializer() ) SerializerFactory.registerSerializer( @@ -77,11 +71,15 @@ export default function initializeSerializerFactory() { ) ) - SerializerFactory.registerSerializer(IdentifierEntity, new ToStringSerializer(IdentifierEntity)) - SerializerFactory.registerSerializer(PathSymbolEntity, new ToStringSerializer(PathSymbolEntity)) - SerializerFactory.registerSerializer(GuidEntity, new ToStringSerializer(GuidEntity)) + SerializerFactory.registerSerializer( + PinReferenceEntity, + new GeneralSerializer(v => v, PinReferenceEntity, "", " ", false, "", _ => "") + ) - SerializerFactory.registerSerializer(IntegerEntity, new ToStringSerializer(IntegerEntity)) + SerializerFactory.registerSerializer( + PinEntity, + new PinSerializer() + ) } diff --git a/js/template/BlueprintTemplate.js b/js/template/BlueprintTemplate.js index 7031154..344ca0f 100755 --- a/js/template/BlueprintTemplate.js +++ b/js/template/BlueprintTemplate.js @@ -1,8 +1,6 @@ -// @ts-check - +import { html } from "lit" import Configuration from "../Configuration" import Copy from "../input/common/Copy" -import html from "./html" import ITemplate from "./ITemplate" import KeyboardCanc from "../input/keybaord/KeyboardCanc" import KeyboardEnableZoom from "../input/keybaord/KeyboardEnableZoom" @@ -10,7 +8,6 @@ import KeyboardSelectAll from "../input/keybaord/KeyboardSelectAll" import MouseScrollGraph from "../input/mouse/MouseScrollGraph" import MouseTracking from "../input/mouse/MouseTracking" import Paste from "../input/common/Paste" -import sanitizeText from "./sanitizeText" import Select from "../input/mouse/Select" import SelectorElement from "../element/SelectorElement" import Unfocus from "../input/mouse/Unfocus" @@ -24,6 +21,33 @@ import Zoom from "../input/mouse/Zoom" export default class BlueprintTemplate extends ITemplate { + static styleVariables = { + "--ueb-font-size": `${Configuration.fontSize}`, + "--ueb-grid-axis-line-color": `${Configuration.gridAxisLineColor}`, + "--ueb-grid-expand": `${Configuration.expandGridSize}px`, + "--ueb-grid-line-color": `${Configuration.gridLineColor}`, + "--ueb-grid-line-width": `${Configuration.gridLineWidth}px`, + "--ueb-grid-set-line-color": `${Configuration.gridSetLineColor}`, + "--ueb-grid-set": `${Configuration.gridSet}`, + "--ueb-grid-size": `${Configuration.gridSize}px`, + "--ueb-link-min-width": `${Configuration.linkMinWidth}`, + "--ueb-node-radius": `${Configuration.nodeRadius}px`, + "--ueb-pin-bool-color": `${Configuration.pinColor.bool}`, + "--ueb-pin-default-color": `${Configuration.pinColor.default}`, + "--ueb-pin-exec-color": `${Configuration.pinColor.exec}`, + "--ueb-pin-name-color": `${Configuration.pinColor.name}`, + "--ueb-pin-real-color": `${Configuration.pinColor.real}`, + "--ueb-pin-string-color": `${Configuration.pinColor.string}`, + "--ueb-pin-struct-color": `${Configuration.pinColor.struct}`, + } + + /** + * @param {Blueprint} blueprint + */ + constructed(blueprint) { + blueprint.style.cssText = Object.entries(BlueprintTemplate.styleVariables).map(([k, v]) => `${k}:${v};`).join("") + } + /** * @param {Blueprint} blueprint */ @@ -55,36 +79,22 @@ export default class BlueprintTemplate extends ITemplate { } /** - * @param {Blueprint} element + * Computes the html content of the target element. + * @param {Blueprint} element Target element + * @returns The computed html */ - header(element) { + render(element) { return html`
1:1
- ` - } - - /** - * @param {Blueprint} element - */ - overlay(element) { - return html`
- ` - } - - /** - * @param {Blueprint} element - */ - viewport(element) { - return html`
@@ -96,100 +106,43 @@ export default class BlueprintTemplate extends ITemplate { } /** - * Computes the html content of the target element. - * @param {Blueprint} element Target element - * @returns The computed html + * @param {Blueprint} blueprint + * @param {Map} changedProperties */ - render(element) { - return html` - ${this.header(element)} - ${this.overlay(element)} - ${this.viewport(element)} - ` - } - - /** - * Applies the style to the element. - * @param {Blueprint} blueprint The blueprint element - */ - setup(blueprint) { - super.setup(blueprint) - blueprint.classList.add("ueb", `ueb-zoom-${blueprint.zoom}`) - Object.entries({ - "--ueb-font-size": sanitizeText(Configuration.fontSize), - "--ueb-grid-size": `${sanitizeText(Configuration.gridSize)}px`, - "--ueb-grid-line-width": `${sanitizeText(Configuration.gridLineWidth)}px`, - "--ueb-grid-line-color": sanitizeText(Configuration.gridLineColor), - "--ueb-grid-set": sanitizeText(Configuration.gridSet), - "--ueb-grid-set-line-color": sanitizeText(Configuration.gridSetLineColor), - "--ueb-grid-axis-line-color": sanitizeText(Configuration.gridAxisLineColor), - "--ueb-node-radius": `${sanitizeText(Configuration.nodeRadius)}px`, - "--ueb-link-min-width": sanitizeText(Configuration.linkMinWidth) - }).forEach(entry => blueprint.style.setProperty(entry[0], entry[1])) - blueprint.headerElement = blueprint.querySelector('.ueb-viewport-header') - blueprint.overlayElement = blueprint.querySelector('.ueb-viewport-overlay') - blueprint.viewportElement = blueprint.querySelector('.ueb-viewport-body') + firstUpdated(blueprint, changedProperties) { + super.firstUpdated(blueprint, changedProperties) + blueprint.headerElement = /** @type {HTMLElement} */(blueprint.querySelector('.ueb-viewport-header')) + blueprint.overlayElement = /** @type {HTMLElement} */(blueprint.querySelector('.ueb-viewport-overlay')) + blueprint.viewportElement = /** @type {HTMLElement} */(blueprint.querySelector('.ueb-viewport-body')) blueprint.selectorElement = new SelectorElement() - blueprint.gridElement = blueprint.viewportElement.querySelector(".ueb-grid") - blueprint.querySelector(".ueb-grid-content").append(blueprint.selectorElement) - blueprint.linksContainerElement = blueprint.querySelector("[data-links]") + blueprint.querySelector(".ueb-grid-content")?.append(blueprint.selectorElement) + blueprint.gridElement = /** @type {HTMLElement} */(blueprint.viewportElement.querySelector(".ueb-grid")) + blueprint.linksContainerElement = /** @type {HTMLElement} */(blueprint.querySelector("[data-links]")) blueprint.linksContainerElement.append(...blueprint.getLinks()) - blueprint.nodesContainerElement = blueprint.querySelector("[data-nodes]") + blueprint.nodesContainerElement = /** @type {HTMLElement} */(blueprint.querySelector("[data-nodes]")) blueprint.nodesContainerElement.append(...blueprint.getNodes()) - this.applyEndDragScrolling(blueprint) + blueprint.viewportElement.scroll(Configuration.expandGridSize, Configuration.expandGridSize) } - /** - * Applies the style to the element. - * @param {Blueprint} blueprint The blueprint element - */ - applyZoom(blueprint, newZoom) { - blueprint.classList.remove("ueb-zoom-" + sanitizeText(blueprint.zoom)) - blueprint.classList.add("ueb-zoom-" + sanitizeText(newZoom)) - } /** - * Applies the style to the element. - * @param {Blueprint} blueprint The blueprint element + * @param {Blueprint} blueprint + * @param {Map} changedProperties */ - applyExpand(blueprint) { - blueprint.gridElement.style.setProperty("--ueb-additional-x", sanitizeText(blueprint.additional[0])) - blueprint.gridElement.style.setProperty("--ueb-additional-y", sanitizeText(blueprint.additional[1])) - } - - /** - * Applies the style to the element. - * @param {Blueprint} blueprint The blueprint element - */ - applyTranlate(blueprint) { - blueprint.gridElement.style.setProperty("--ueb-translate-x", sanitizeText(blueprint.translateValue[0])) - blueprint.gridElement.style.setProperty("--ueb-translate-y", sanitizeText(blueprint.translateValue[1])) - } - - /** - * Applies the style to the element. - * @param {Blueprint} blueprint The blueprint element - */ - applyStartDragScrolling(blueprint) { - blueprint.dataset.dragScrolling = "true" - } - - /** - * Applies the style to the element. - * @param {Blueprint} blueprint The blueprint element - */ - applyEndDragScrolling(blueprint) { - blueprint.dataset.dragScrolling = "false" + updated(blueprint, changedProperties) { + super.updated(blueprint, changedProperties) + if (changedProperties.has("scrollX") || changedProperties.has("scrollY")) { + blueprint.viewportElement.scroll(blueprint.scrollX, blueprint.scrollY) + } } /** * @param {Blueprint} blueprint * @param {PinReferenceEntity} pinReference - * @returns {PinElement} */ getPin(blueprint, pinReference) { - return blueprint.querySelector( + return /** @type {PinElement} */(blueprint.querySelector( `ueb-node[data-name="${pinReference.objectName}"] ueb-pin[data-id="${pinReference.pinGuid}"]` - ) + )) } } diff --git a/js/template/BoolPinTemplate.js b/js/template/BoolPinTemplate.js index f00b0d4..892717b 100644 --- a/js/template/BoolPinTemplate.js +++ b/js/template/BoolPinTemplate.js @@ -1,6 +1,4 @@ -// @ts-check - -import html from "./html" +import { html } from "lit" import IInputPinTemplate from "./IInputPinTemplate" /** @@ -14,9 +12,10 @@ export default class BoolPinTemplate extends IInputPinTemplate { /** * @param {PinElement} pin + * @param {Map} changedProperties */ - setup(pin) { - super.setup(pin) + firstUpdated(pin, changedProperties) { + super.firstUpdated(pin, changedProperties) this.#input = pin.querySelector(".ueb-pin-input") let self = this this.onChangeHandler = _ => pin.entity.DefaultValue = self.#input.checked ? "true" : "false" @@ -38,22 +37,13 @@ export default class BoolPinTemplate extends IInputPinTemplate { return [this.#input.checked ? "true" : "false"] } - /** - * @param {PinElement} pin - * @param {String[]?} value - */ - setInputs(pin, value = []) { - pin.entity.DefaultValue = value.length ? value[0] : this.getInput(pin) - this.#input.checked = pin.entity.DefaultValue == "true" - } - /** * @param {PinElement} pin */ renderInput(pin) { if (pin.isInput()) { return html` - + ` } return super.renderInput(pin) diff --git a/js/template/ExecPinTemplate.js b/js/template/ExecPinTemplate.js index 8dd0e9c..ba070f1 100644 --- a/js/template/ExecPinTemplate.js +++ b/js/template/ExecPinTemplate.js @@ -1,6 +1,4 @@ -// @ts-check - -import html from "./html" +import { html } from "lit" import PinTemplate from "./PinTemplate" /** @@ -15,19 +13,9 @@ export default class ExecPinTemplate extends PinTemplate { renderIcon(pin) { return html` - + ` } diff --git a/js/template/IFromToPositionedTemplate.js b/js/template/IFromToPositionedTemplate.js new file mode 100755 index 0000000..26cb270 --- /dev/null +++ b/js/template/IFromToPositionedTemplate.js @@ -0,0 +1,33 @@ +import ITemplate from "./ITemplate" + +/** + * @typedef {import("../element/IFromToPositionedElement").default} IFromToPositionedElement + */ + +/** + * @template {IFromToPositionedElement} T + * @extends {ITemplate} + */ +export default class IFromToPositionedTemplate extends ITemplate { + + /** + * @param {T} selector + * @param {Map} changedProperties + */ + update(selector, changedProperties) { + super.update(selector, changedProperties) + if (changedProperties.has("initialPositionX")) { + selector.style.setProperty("--ueb-from-x", `${selector.initialPositionX}`) + } + if (changedProperties.has("initialPositionY")) { + selector.style.setProperty("--ueb-from-y", `${selector.initialPositionY}`) + } + if (changedProperties.has("finaPositionX")) { + selector.style.setProperty("--ueb-to-x", `${selector.finaPositionX}`) + } + if (changedProperties.has("finaPositionY")) { + selector.style.setProperty("--ueb-to-y", `${selector.finaPositionY}`) + } + } + +} diff --git a/js/template/IInputPinTemplate.js b/js/template/IInputPinTemplate.js index b071a2d..5df2f24 100644 --- a/js/template/IInputPinTemplate.js +++ b/js/template/IInputPinTemplate.js @@ -1,6 +1,4 @@ -// @ts-check - -import html from "./html" +import { html } from "lit" import MouseIgnore from "../input/mouse/MouseIgnore" import PinTemplate from "./PinTemplate" import Utility from "../Utility" @@ -19,21 +17,18 @@ export default class IInputPinTemplate extends PinTemplate { /** * @param {PinElement} pin + * @param {Map} changedProperties */ - setup(pin) { - super.setup(pin) - this.#inputContentElements = /** @type {HTMLElement[]} */( - [...pin.querySelectorAll(".ueb-pin-input-content")] - ) + firstUpdated(pin, changedProperties) { + super.firstUpdated(pin, changedProperties) + this.#inputContentElements = [...pin.querySelectorAll(".ueb-pin-input-content")] if (this.#inputContentElements.length) { - this.setInputs(pin, [ - Utility.decodeInputString(/** @type {String} */(pin.entity.DefaultValue)) - ]) + this.setInputs(pin, this.getInputs(pin)) let self = this this.onFocusHandler = _ => pin.blueprint.dispatchEditTextEvent(true) this.onFocusOutHandler = e => { e.preventDefault() - document.getSelection().removeAllRanges() // Deselect text inside the input + document.getSelection()?.removeAllRanges() // Deselect text inside the input self.setInputs(pin, this.getInputs(pin)) pin.blueprint.dispatchEditTextEvent(false) } @@ -76,6 +71,7 @@ export default class IInputPinTemplate extends PinTemplate { * @param {PinElement} pin */ getInputs(pin) { + Utility.decodeInputString(pin.entity.DefaultValue) return this.#inputContentElements.map(element => // Faster than innerText which causes reflow element.innerHTML.replaceAll("
", "\n")) @@ -88,7 +84,7 @@ export default class IInputPinTemplate extends PinTemplate { setInputs(pin, values = [], updateDefaultValue = true) { this.#inputContentElements.forEach((element, i) => element.innerText = values[i]) if (updateDefaultValue) { - pin.entity.DefaultValue = this.getInput(pin) + pin.setDefaultValue(values.reduce((acc, cur) => acc + cur, "")) } } @@ -99,10 +95,10 @@ export default class IInputPinTemplate extends PinTemplate { if (pin.isInput()) { return html`
- +
` } - return "" + return html`` } } diff --git a/js/template/ITemplate.js b/js/template/ITemplate.js index 2224fc9..485f2fc 100644 --- a/js/template/ITemplate.js +++ b/js/template/ITemplate.js @@ -1,8 +1,8 @@ -// @ts-check +import { css, html } from "lit" /** * @typedef {import("../element/IElement").default} IElement - * @typedef {import("../input/IInput").default} IInput")} + * @typedef {import("../input/IInput").default} IInput */ /** @@ -10,26 +10,59 @@ */ export default class ITemplate { + static styles = css`` + /** @type {IInput[]} */ #inputObjects = [] - get inputObjects() { return this.#inputObjects } /** - * @param {T} entity + * @param {T} element */ - render(entity) { - return "" + constructed(element) { } /** * @param {T} element */ - setup(element) { - // TODO replace with the safer element.setHTML(...) when it will be availableBreack - element.innerHTML = this.render(element) + connectedCallback(element) { + } + + /** + * @param {T} element + * @param {Map} changedProperties + */ + willUpdate(element, changedProperties) { + } + + /** + * @param {T} element + * @param {Map} changedProperties + */ + update(element, changedProperties) { + } + + /** + * @param {T} element + */ + render(element) { + return html`` + } + + /** + * @param {T} element + * @param {Map} changedProperties + */ + firstUpdated(element, changedProperties) { + } + + /** + * @param {T} element + * @param {Map} changedProperties + */ + updated(element, changedProperties) { } /** diff --git a/js/template/LinearColorPinTemplate.js b/js/template/LinearColorPinTemplate.js index 2191be2..8bcc44b 100644 --- a/js/template/LinearColorPinTemplate.js +++ b/js/template/LinearColorPinTemplate.js @@ -1,11 +1,9 @@ -// @ts-check - -import html from "./html" +import { html } from "lit" import IInputPinTemplate from "./IInputPinTemplate" /** * @typedef {import("../element/PinElement").default} PinElement - * @typedef {import("../entity/LinearColorEntity").default} LinearColorEntity)} + * @typedef {import("../entity/LinearColorEntity").default} LinearColorEntity} */ export default class LinearColorPinTemplate extends IInputPinTemplate { @@ -15,12 +13,11 @@ export default class LinearColorPinTemplate extends IInputPinTemplate { /** * @param {PinElement} pin + * @param {Map} changedProperties */ - setup(pin) { - super.setup(pin) + firstUpdated(pin, changedProperties) { + super.firstUpdated(pin, changedProperties) this.#input = pin.querySelector(".ueb-pin-input") - this.#input.dataset.linearColor = /** @type {LinearColorEntity} */(pin.entity.DefaultValue).toString() - let self = this } /** @@ -32,7 +29,7 @@ export default class LinearColorPinTemplate extends IInputPinTemplate { /** * @param {PinElement} pin - * @param {String[]?} value + * @param {String[]} value */ setInputs(pin, value = []) { } @@ -43,7 +40,7 @@ export default class LinearColorPinTemplate extends IInputPinTemplate { renderInput(pin) { if (pin.isInput()) { return html` - + ` } return super.renderInput(pin) diff --git a/js/template/LinkMessageTemplate.js b/js/template/LinkMessageTemplate.js deleted file mode 100644 index cec5336..0000000 --- a/js/template/LinkMessageTemplate.js +++ /dev/null @@ -1,42 +0,0 @@ -// @ts-check - -import html from "./html" -import ITemplate from "./ITemplate" -import sanitizeText from "./sanitizeText" - -/** - * @typedef {import("../element/LinkMessageElement").default} LinkMessageElement - */ - -export default class LinkMessageTemplate extends ITemplate { - - /** - * @param {LinkMessageElement} linkMessage - */ - render(linkMessage) { - return html` - - - ` - } - - /** - * Applies the style to the element. - * @param {LinkMessageElement} linkMessage - */ - setup(linkMessage) { - const a = super.setup(linkMessage) - const linkMessageSetup = _ => - /** @type {HTMLElement} */(linkMessage.querySelector(".ueb-link-message")).innerText = linkMessage.message( - linkMessage.linkElement.sourcePin, - linkMessage.linkElement.destinationPin - ) - linkMessage.linkElement = linkMessage.closest("ueb-link") - if (linkMessage.linkElement) { - linkMessageSetup() - } else { - window.customElements.whenDefined("ueb-link-message").then(linkMessageSetup) - } - } - -} diff --git a/js/template/LinkTemplate.js b/js/template/LinkTemplate.js index a2b2b9a..f7166f5 100755 --- a/js/template/LinkTemplate.js +++ b/js/template/LinkTemplate.js @@ -1,16 +1,17 @@ -// @ts-check - +import { css, html } from "lit" import Configuration from "../Configuration" -import html from "./html" -import ITemplate from "./ITemplate" -import sanitizeText from "./sanitizeText" +import Utility from "../Utility" +import IFromToPositionedTemplate from "./IFromToPositionedTemplate" /** * @typedef {import("../element/LinkElement").default} LinkElement - * @typedef {import("../element/LinkMessageElement").default} LinkMessageElement */ -export default class LinkTemplate extends ITemplate { + +/** + * @extends {IFromToPositionedTemplate} + */ +export default class LinkTemplate extends IFromToPositionedTemplate { /** * Returns a function performing the inverse multiplication y = a / x + q. The value of a and q are calculated using @@ -53,12 +54,59 @@ export default class LinkTemplate extends ITemplate { : m * x + q } - static c1DecreasingValue = LinkTemplate.decreasingValue(-0.1, [100, 15]) + static c1DecreasingValue = LinkTemplate.decreasingValue(-0.15, [100, 15]) static c2DecreasingValue = LinkTemplate.decreasingValue(-0.06, [500, 130]) static c2Clamped = LinkTemplate.clampedLine([0, 100], [200, 30]) + /** + * @param {LinkElement} link + * @param {Map} changedProperties + */ + willUpdate(link, changedProperties) { + super.willUpdate(link, changedProperties) + const dx = Math.max(Math.abs(link.initialPositionX - link.finaPositionX), 1) + const width = Math.max(dx, Configuration.linkMinWidth) + // const height = Math.max(Math.abs(link.initialPositionY - link.finaPositionY), 1) + const fillRatio = dx / width + // const aspectRatio = width / height + const xInverted = link.originatesFromInput + ? link.initialPositionX < link.finaPositionX + : link.finaPositionX < link.initialPositionX + link.startPixels = dx < width // If under minimum width + ? (width - dx) / 2 // Start from half the empty space + : 0 // Otherwise start from the beginning + link.startPercentage = xInverted ? link.startPixels + fillRatio * 100 : link.startPixels + const c1 + = link.startPercentage + + (xInverted + ? LinkTemplate.c1DecreasingValue(width) + : 10 + ) + * fillRatio + let c2 = LinkTemplate.c2Clamped(xInverted ? -dx : dx) + link.startPercentage + c2 = Math.min(c2, LinkTemplate.c2DecreasingValue(width)) + link.svgPathD = Configuration.linkRightSVGPath(link.startPercentage, c1, c2) + } + + /** + * @param {LinkElement} link + * @param {Map} changedProperties + */ + update(link, changedProperties) { + super.update(link, changedProperties) + if (changedProperties.has("originatesFromInput")) { + link.style.setProperty("--ueb-from-input", link.originatesFromInput ? "1" : "0") + } + const referencePin = link.sourcePin ?? link.destinationPin + if (referencePin) { + link.style.setProperty("--ueb-link-color-rgb", Utility.printLinearColor(referencePin.color)) + } + link.style.setProperty("--ueb-link-start", `${Math.round(link.startPixels)}`) + link.style.setProperty("--ueb-start-percentage", `${Math.round(link.startPercentage)}%`) + } + /** * @param {LinkElement} link */ @@ -67,116 +115,16 @@ export default class LinkTemplate extends ITemplate { return html` - + + ${link.linkMessageIcon != "" || link.linkMessageText != "" ? html` +
+ + ${link.linkMessageText} +
+ ` : html``} ` } - - /** - * @param {LinkElement} link - */ - setup(link) { - super.setup(link) - if (link.linkMessageElement) { - link.appendChild(link.linkMessageElement) - } - link.classList.add("ueb-positioned") - link.pathElement = link.querySelector("path") - const referencePin = link.sourcePin ?? link.destinationPin - if (referencePin) { - link.style.setProperty("--ueb-pin-color", referencePin.getColor()) - } - this.applyPins(link) - if (link.sourcePin && link.destinationPin) { - this.applyFullLocation(link) - } - } - - /** - * @param {LinkElement} link - */ - applyPins(link) { - if (link.sourcePin) { - link.dataset.source = link.sourcePin.GetPinId().toString() - } - if (link.destinationPin) { - link.dataset.destination = link.destinationPin.GetPinId().toString() - } - } - - /** - * @param {LinkElement} link - */ - applyStartDragging(link) { - link.blueprint.dataset.creatingLink = "true" - link.classList.add("ueb-link-dragging") - } - - /** - * @param {LinkElement} link - */ - applyFinishDragging(link) { - link.blueprint.dataset.creatingLink = "false" - link.classList.remove("ueb-link-dragging") - } - - /** - * @param {LinkElement} link - */ - applySourceLocation(link) { - link.style.setProperty("--ueb-from-input", link.originatesFromInput ? "1" : "0") - link.style.setProperty("--ueb-from-x", sanitizeText(link.sourceLocation[0])) - link.style.setProperty("--ueb-from-y", sanitizeText(link.sourceLocation[1])) - } - - /** - * @param {LinkElement} link - */ - applyFullLocation(link) { - const dx = Math.max(Math.abs(link.sourceLocation[0] - link.destinationLocation[0]), 1) - const width = Math.max(dx, Configuration.linkMinWidth) - const height = Math.max(Math.abs(link.sourceLocation[1] - link.destinationLocation[1]), 1) - const fillRatio = dx / width - const aspectRatio = width / height - const xInverted = link.originatesFromInput - ? link.sourceLocation[0] < link.destinationLocation[0] - : link.destinationLocation[0] < link.sourceLocation[0] - let start = dx < width // If under minimum width - ? (width - dx) / 2 // Start from half the empty space - : 0 // Otherwise start from the beginning - - link.style.setProperty("--ueb-from-x", sanitizeText(link.sourceLocation[0])) - link.style.setProperty("--ueb-from-y", sanitizeText(link.sourceLocation[1])) - link.style.setProperty("--ueb-to-x", sanitizeText(link.destinationLocation[0])) - link.style.setProperty("--ueb-to-y", sanitizeText(link.destinationLocation[1])) - link.style.setProperty("margin-left", `-${start}px`) - if (xInverted) { - start += fillRatio * 100 - } - link.style.setProperty("--ueb-start-percentage", `${start}%`) - const c1 - = start - + (xInverted - ? LinkTemplate.c1DecreasingValue(width) - : 10 - ) - * fillRatio - let c2 = LinkTemplate.c2Clamped(xInverted ? -dx : dx) + start - c2 = Math.min(c2, LinkTemplate.c2DecreasingValue(width)) - const d = Configuration.linkRightSVGPath(start, c1, c2) - // TODO move to CSS when Firefox will support property d and css will have enough functions - link.pathElement?.setAttribute("d", d) - } - - /** - * @param {LinkElement} link - * @param {LinkMessageElement} linkMessage - */ - applyLinkMessage(link, linkMessage) { - link.querySelectorAll("ueb-link-message").forEach(element => element.remove()) - link.appendChild(linkMessage) - link.linkMessageElement = linkMessage - } } diff --git a/js/template/NamePinTemplate.js b/js/template/NamePinTemplate.js index ed463f1..bb8f3ad 100644 --- a/js/template/NamePinTemplate.js +++ b/js/template/NamePinTemplate.js @@ -1,5 +1,3 @@ -// @ts-check - import IInputPinTemplate from "./IInputPinTemplate" /** @@ -13,9 +11,10 @@ export default class NamePinTemplate extends IInputPinTemplate { /** * @param {PinElement} pin + * @param {Map} changedProperties */ - setup(pin) { - super.setup(pin) + firstUpdated(pin, changedProperties) { + super.firstUpdated(pin, changedProperties) this.onInputHandler = e => { e.stopPropagation() if ( diff --git a/js/template/NodeTemplate.js b/js/template/NodeTemplate.js index 08fe01f..822f64c 100755 --- a/js/template/NodeTemplate.js +++ b/js/template/NodeTemplate.js @@ -1,8 +1,5 @@ -// @ts-check - -import html from "./html" +import { html } from "lit" import PinElement from "../element/PinElement" -import sanitizeText from "./sanitizeText" import SelectableDraggableTemplate from "./SelectableDraggableTemplate" /** @@ -14,9 +11,7 @@ export default class NodeTemplate extends SelectableDraggableTemplate { toggleAdvancedDisplayHandler /** - * Computes the html content of the target element. - * @param {NodeElement} node Graph node element - * @returns The result html + * @param {NodeElement} node */ render(node) { return html` @@ -26,7 +21,7 @@ export default class NodeTemplate extends SelectableDraggableTemplate {
- ${sanitizeText(node.getNodeDisplayName())} + ${node.nodeDisplayName}
@@ -34,11 +29,11 @@ export default class NodeTemplate extends SelectableDraggableTemplate {
- ${node.entity.EnabledState?.toString() == "DevelopmentOnly" ? html` + ${node.enabledState?.toString() == "DevelopmentOnly" ? html`
Development Only
- ` : ""} - ${node.entity.AdvancedPinDisplay ? html` -
+ ` : html``} + ${node.advancedPinDisplay ? html` +
- +
- ` : ""} + ` : html``}
` @@ -66,52 +53,25 @@ export default class NodeTemplate extends SelectableDraggableTemplate { /** * @param {NodeElement} node + * @param {Map} changedProperties */ - setup(node) { - super.setup(node) - node.dataset.name = sanitizeText(node.entity.getObjectName()) - if (node.entity.EnabledState) { - node.dataset.enabledState = node.entity.EnabledState.toString() - } - if (node.selected) { - node.classList.add("ueb-selected") - } - this.applyAdvancedPinDisplay(node) - node.style.setProperty("--ueb-position-x", sanitizeText(node.location[0])) - node.style.setProperty("--ueb-position-y", sanitizeText(node.location[1])) - /** @type {HTMLElement} */ - let inputContainer = node.querySelector(".ueb-node-inputs") - /** @type {HTMLElement} */ - let outputContainer = node.querySelector(".ueb-node-outputs") - let pins = node.getPinEntities() - pins.filter(v => v.isInput()).forEach(v => inputContainer.appendChild(new PinElement(v))) - pins.filter(v => v.isOutput()).forEach(v => outputContainer.appendChild(new PinElement(v))) - let self = this + async firstUpdated(node, changedProperties) { + super.firstUpdated(node, changedProperties) + const inputContainer = /** @type {HTMLElement} */(node.querySelector(".ueb-node-inputs")) + const outputContainer = /** @type {HTMLElement} */(node.querySelector(".ueb-node-outputs")) + Promise.all(node.getPinElements().map(n => n.updateComplete)).then(() => node.dispatchReflowEvent()) + node.getPinElements().forEach(p => { + if (p.isInput()) { + inputContainer.appendChild(p) + } else if (p.isOutput()) { + outputContainer.appendChild(p) + } + }) this.toggleAdvancedDisplayHandler = _ => { node.toggleShowAdvancedPinDisplay() + node.addNextUpdatedCallbacks(() => node.dispatchReflowEvent(), true) } - if (node.entity.AdvancedPinDisplay) { - node.querySelector(".ueb-node-expansion").addEventListener("click", this.toggleAdvancedDisplayHandler) - } - } - - /** - * @param {NodeElement} node - */ - applyAdvancedPinDisplay(node) { - if (node.entity.AdvancedPinDisplay) { - node.dataset.advancedDisplay = node.entity.AdvancedPinDisplay.toString() - } - } - - /** - * @param {NodeElement} node - */ - applyRename(node) { - const nodeName = node.entity.getObjectName() - node.dataset.name = sanitizeText(nodeName) - // @ts-expect-error - node.querySelector(".ueb-node-name-text").innerText = sanitizeText(node.getNodeDisplayName()) + node.nodeNameElement = /** @type {HTMLElement} */(node.querySelector(".ueb-node-name-text")) } /** diff --git a/js/template/PinTemplate.js b/js/template/PinTemplate.js index 9243cfc..a091e47 100755 --- a/js/template/PinTemplate.js +++ b/js/template/PinTemplate.js @@ -1,19 +1,26 @@ -// @ts-check - -import html from "./html" +import { css, html } from "lit" import ITemplate from "./ITemplate" import MouseCreateLink from "../input/mouse/MouseCreateLink" -import sanitizeText from "./sanitizeText" import Utility from "../Utility" /** - * @typedef {import ("../input/IInput").default} IInput + * @typedef {import("../input/IInput").default} IInput * @typedef {import("../element/NodeElement").default} NodeElement * @typedef {import("../element/PinElement").default} PinElement */ export default class PinTemplate extends ITemplate { + static styles = css`` + + /** + * @param {PinElement} pin + */ + connectedCallback(pin) { + super.connectedCallback(pin) + pin.nodeElement = pin.closest("ueb-node") + } + /** * @param {PinElement} pin * @returns {IInput[]} @@ -38,13 +45,13 @@ export default class PinTemplate extends ITemplate { ` const content = html`
- ${sanitizeText(pin.getPinDisplayName())} + ${pin.getPinDisplayName()} ${this.renderInput(pin)}
` return html`
- ${pin.isInput() ? icon + content : content + icon} + ${pin.isInput() ? html`${icon}${content}` : html`${content}${icon}`}
` } @@ -53,42 +60,24 @@ export default class PinTemplate extends ITemplate { * @param {PinElement} pin */ renderIcon(pin) { - return '' + return html`` } /** * @param {PinElement} pin */ renderInput(pin) { - return "" + return html`` } /** * @param {PinElement} pin + * @param {Map} changedProperties */ - setup(pin) { - super.setup(pin) - pin.classList.add( - "ueb-node-" + (pin.isInput() ? "input" : pin.isOutput() ? "output" : "hidden"), - "ueb-pin-type-" + sanitizeText(pin.getType()) - ) + firstUpdated(pin, changedProperties) { + super.firstUpdated(pin, changedProperties) pin.dataset.id = pin.GetPinIdValue() - if (pin.entity.bAdvancedView) { - pin.dataset.advancedView = "true" - } pin.clickableElement = pin - pin.nodeElement = pin.closest("ueb-node") - } - - /** - * @param {PinElement} pin - */ - applyConnected(pin) { - if (pin.isLinked()) { - pin.classList.add("ueb-pin-fill") - } else { - pin.classList.remove("ueb-pin-fill") - } } /** @@ -96,8 +85,10 @@ export default class PinTemplate extends ITemplate { */ getLinkLocation(pin) { const rect = pin.querySelector(".ueb-pin-icon").getBoundingClientRect() - return pin.blueprint.compensateTranslation(Utility.convertLocation( + const location = Utility.convertLocation( [(rect.left + rect.right) / 2, (rect.top + rect.bottom) / 2], - pin.blueprint.gridElement)) + pin.blueprint.gridElement + ) + return pin.blueprint.compensateTranslation(location) } } diff --git a/js/template/RealPinTemplate.js b/js/template/RealPinTemplate.js index 3302136..4bfe905 100644 --- a/js/template/RealPinTemplate.js +++ b/js/template/RealPinTemplate.js @@ -1,7 +1,5 @@ -// @ts-check - -import Utility from "../Utility" import IInputPinTemplate from "./IInputPinTemplate" +import Utility from "../Utility" /** * @typedef {import("../element/PinElement").default} PinElement @@ -18,7 +16,7 @@ export default class RealPinTemplate extends IInputPinTemplate { let updateDefaultValue = true if (isNaN(num)) { num = parseFloat(pin.entity.DefaultValue != "" - ? pin.entity.DefaultValue + ? /** @type {String} */(pin.entity.DefaultValue) : pin.entity.AutogeneratedDefaultValue) } if (isNaN(num)) { diff --git a/js/template/SelectableDraggableTemplate.js b/js/template/SelectableDraggableTemplate.js index 92d5004..a5f6d10 100755 --- a/js/template/SelectableDraggableTemplate.js +++ b/js/template/SelectableDraggableTemplate.js @@ -1,20 +1,18 @@ -// @ts-check - import ITemplate from "./ITemplate" import MouseMoveNodes from "../input/mouse/MouseMoveNodes" -import sanitizeText from "./sanitizeText" /** * @typedef {import("../element/ISelectableDraggableElement").default} ISelectableDraggableElement */ /** - * @extends {ITemplate} + * @template {ISelectableDraggableElement} T + * @extends {ITemplate} */ export default class SelectableDraggableTemplate extends ITemplate { /** - * @param {ISelectableDraggableElement} element + * @param {T} element */ createInputObjects(element) { return [ @@ -26,21 +24,27 @@ export default class SelectableDraggableTemplate extends ITemplate { } /** - * @param {ISelectableDraggableElement} element + * @param {T} element + * @param {Map} changedProperties */ - applyLocation(element) { - element.style.setProperty("--ueb-position-x", sanitizeText(element.location[0])) - element.style.setProperty("--ueb-position-y", sanitizeText(element.location[1])) + 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}`) + } } /** - * @param {ISelectableDraggableElement} element + * @param {T} element + * @param {Map} changedProperties */ - applySelected(element) { - if (element.selected) { - element.classList.add("ueb-selected") - } else { - element.classList.remove("ueb-selected") + firstUpdated(element, changedProperties) { + super.firstUpdated(element, changedProperties) + if (element.selected && !element.listeningDrag) { + element.setSelected(true) } } } diff --git a/js/template/SelectorTemplate.js b/js/template/SelectorTemplate.js index 3b9ff60..eb4c040 100755 --- a/js/template/SelectorTemplate.js +++ b/js/template/SelectorTemplate.js @@ -1,51 +1,9 @@ -// @ts-check - -import ITemplate from "./ITemplate" -import sanitizeText from "./sanitizeText" +import IFromToPositionedTemplate from "./IFromToPositionedTemplate" /** * @typedef {import("../element/SelectorElement").default} SelectorElement */ -export default class SelectorTemplate extends ITemplate { +export default class SelectorTemplate extends IFromToPositionedTemplate { - /** - * Applies the style to the element. - * @param {SelectorElement} selector Selector element - */ - setup(selector) { - super.setup(selector) - this.applyFinishSelecting(selector) - } - - /** - * Applies the style relative to selection beginning. - * @param {SelectorElement} selector Selector element - */ - applyStartSelecting(selector, initialPosition) { - // Set initial position - selector.style.setProperty("--ueb-from-x", sanitizeText(initialPosition[0])) - selector.style.setProperty("--ueb-from-y", sanitizeText(initialPosition[1])) - // Final position coincide with the initial position, at the beginning of selection - selector.style.setProperty("--ueb-to-x", sanitizeText(initialPosition[0])) - selector.style.setProperty("--ueb-to-y", sanitizeText(initialPosition[1])) - selector.blueprint.dataset.selecting = "true" - } - - /** - * Applies the style relative to selection. - * @param {SelectorElement} selector Selector element - */ - applyDoSelecting(selector, finalPosition) { - selector.style.setProperty("--ueb-to-x", sanitizeText(finalPosition[0])) - selector.style.setProperty("--ueb-to-y", sanitizeText(finalPosition[1])) - } - - /** - * Applies the style relative to selection finishing. - * @param {SelectorElement} selector Selector element - */ - applyFinishSelecting(selector) { - selector.blueprint.dataset.selecting = "false" - } } diff --git a/js/template/StringPinTemplate.js b/js/template/StringPinTemplate.js index e222ff3..1d04f09 100644 --- a/js/template/StringPinTemplate.js +++ b/js/template/StringPinTemplate.js @@ -1,5 +1,3 @@ -// @ts-check - import IInputPinTemplate from "./IInputPinTemplate" /** @@ -10,8 +8,9 @@ export default class StringPinTemplate extends IInputPinTemplate { /** * @param {PinElement} pin + * @param {Map} changedProperties */ - setup(pin) { - super.setup(pin) + firstUpdated(pin, changedProperties) { + super.firstUpdated(pin, changedProperties) } } diff --git a/js/template/VariadicNodeTemplate.js b/js/template/VariadicNodeTemplate.js index dad2bbb..82480b5 100644 --- a/js/template/VariadicNodeTemplate.js +++ b/js/template/VariadicNodeTemplate.js @@ -1,5 +1,3 @@ -// @ts-check - import NodeTemplate from "./NodeTemplate" export default class VariadicNodeTemplate extends NodeTemplate { diff --git a/js/template/html.js b/js/template/html.js deleted file mode 100755 index 7cb9f0d..0000000 --- a/js/template/html.js +++ /dev/null @@ -1,7 +0,0 @@ -// @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 -export default html diff --git a/js/template/sanitizeText.js b/js/template/sanitizeText.js deleted file mode 100755 index c52446f..0000000 --- a/js/template/sanitizeText.js +++ /dev/null @@ -1,17 +0,0 @@ -// @ts-check - -const div = document.createElement("div") - -const tagReplacement = { - '&': '&', - '<': '<', - '>': '>', - "'": ''', - '"': '"' -} - -function sanitizeText(value) { - return value.toString().replace(/[&<>'"]/g, tag => tagReplacement[tag]) -} - -export default sanitizeText diff --git a/package.json b/package.json index 406e8e3..0c739a9 100755 --- a/package.json +++ b/package.json @@ -22,17 +22,20 @@ }, "homepage": "https://github.com/barsdeveloper/ueblueprint#readme", "devDependencies": { - "@rollup/plugin-commonjs": "^21.0.0", - "@rollup/plugin-node-resolve": "^13.0.5", - "rollup": "^2.58.0", + "@rollup/plugin-commonjs": "^21.1.0", + "@rollup/plugin-node-resolve": "^13.3.0", + "minify-html-literals": "^1.3.5", + "rollup": "^2.75.5", "rollup-plugin-copy": "^3.4.0", - "rollup-plugin-minify-html-template-literals": "^1.2.0", + "rollup-plugin-minify-html-literals": "^1.2.6", "rollup-plugin-terser": "^7.0.2", - "sass": "^1.45.1", - "terser": "^5.9.0" + "sass": "^1.52.2", + "terser": "^5.14.0" }, "dependencies": { "@easylogic/colorpicker": "^1.10.11", - "parsimmon": "^1.18.0" + "lit": "^2.2.4", + "parsimmon": "^1.18.0", + "rollup-plugin-html-literals": "^1.1.5" } -} \ No newline at end of file +} diff --git a/rollup.config.js b/rollup.config.js index 567fece..12688d3 100755 --- a/rollup.config.js +++ b/rollup.config.js @@ -1,8 +1,8 @@ -import { nodeResolve } from "@rollup/plugin-node-resolve" -import minifyHTML from "rollup-plugin-minify-html-template-literals" -import commonjs from "@rollup/plugin-commonjs" import { terser } from "rollup-plugin-terser" +import commonjs from "@rollup/plugin-commonjs" import copy from "rollup-plugin-copy" +import minifyHTML from "rollup-plugin-minify-html-literals" +import resolve from "@rollup/plugin-node-resolve" export default [ { @@ -12,15 +12,13 @@ export default [ format: 'es' }, plugins: [ - nodeResolve({ browser: true }), + resolve({ browser: true }), commonjs(), copy({ - targets: [ - { - src: ["assets/fonts/*"], - dest: "dist/font" - } - ] + targets: [{ + src: ["assets/fonts/*"], + dest: "dist/font" + }] }) ] }, @@ -31,18 +29,18 @@ export default [ format: 'es' }, plugins: [ - nodeResolve({ browser: true }), + resolve({ browser: true }), commonjs(), - minifyHTML(), + minifyHTML({ + minifyCSS: true, + }), terser(), copy({ - targets: [ - { - src: ["assets/fonts/*"], - dest: "dist/font" - } - ] + targets: [{ + src: ["assets/fonts/*"], + dest: "dist/font" + }] }) ] } -] \ No newline at end of file +] diff --git a/scss/export.scss b/scss/export.scss index d915981..ac36438 100644 --- a/scss/export.scss +++ b/scss/export.scss @@ -2,4 +2,4 @@ @use "ueb-node.scss"; @use "ueb-pin.scss"; @use "ueb-link.scss"; -@use "ueb-type-color.scss"; \ No newline at end of file +@use "ueb-type-color.scss"; diff --git a/scss/style.scss b/scss/style.scss index 7a0d4c8..a883a9b 100644 --- a/scss/style.scss +++ b/scss/style.scss @@ -15,6 +15,8 @@ } ueb-blueprint { + --ueb-scale: 1; + --ueb-grid-actual-size: var(--ueb-grid-size); display: block; position: relative; font-family: Roboto, Noto, Oxygen, Ubuntu, "Open Sans", "Helvetica Neue", sans-serif; @@ -60,8 +62,8 @@ ueb-blueprint[data-focused="true"] .ueb-viewport-body { position: absolute; min-width: 100%; min-height: 100%; - width: calc((100% + var(--ueb-additional-x) * 1px) / var(--ueb-scale)); - height: calc((100% + var(--ueb-additional-y) * 1px) / var(--ueb-scale)); + width: calc((100% + 2 * var(--ueb-grid-expand)) / var(--ueb-scale)); + height: calc((100% + 2 * var(--ueb-grid-expand)) / var(--ueb-scale)); background-color: #262626; background-image: /* Axis lines */ @@ -108,101 +110,95 @@ ueb-blueprint[data-focused="true"] .ueb-viewport-body { overflow: hidden; } -ueb-blueprint[data-drag-scrolling="true"] .ueb-grid { +ueb-blueprint[data-scrolling="true"] .ueb-grid { cursor: grabbing; } -ueb-blueprint[data-drag-scrolling="false"] .ueb-grid { +ueb-blueprint[data-scrolling="false"] .ueb-grid { cursor: default; } -.ueb-zoom--.ueb, -.ueb { - --ueb-scale: 1; - --ueb-grid-actual-size: var(--ueb-grid-size); -} - -.ueb-zoom-7.ueb { +ueb-blueprint[data-zoom="7"] { --ueb-scale: 2; } -.ueb-zoom-6.ueb { +ueb-blueprint[data-zoom="6"] { --ueb-scale: 1.875; } -.ueb-zoom-5.ueb { +ueb-blueprint[data-zoom="5"] { --ueb-scale: 1.75; } -.ueb-zoom-4.ueb { +ueb-blueprint[data-zoom="4"] { --ueb-scale: 1.675; } -.ueb-zoom-3.ueb { +ueb-blueprint[data-zoom="3"] { --ueb-scale: 1.5; } -.ueb-zoom-2.ueb { +ueb-blueprint[data-zoom="2"] { --ueb-scale: 1.375; } -.ueb-zoom-1.ueb { +ueb-blueprint[data-zoom="1"] { --ueb-scale: 1.25; } -.ueb-zoom--1.ueb { +ueb-blueprint[data-zoom="-1"] { --ueb-scale: 0.875; } -.ueb-zoom--2.ueb { +ueb-blueprint[data-zoom="-2"] { --ueb-scale: 0.75; } -.ueb-zoom--3.ueb { +ueb-blueprint[data-zoom="-3"] { --ueb-scale: 0.675; } -.ueb-zoom--4.ueb { +ueb-blueprint[data-zoom="-4"] { --ueb-scale: 0.5; --ueb-grid-actual-size: calc(var(--ueb-grid-size) * 2); } -.ueb-zoom--5.ueb { +ueb-blueprint[data-zoom="-5"] { --ueb-scale: 0.375; --ueb-grid-actual-size: calc(var(--ueb-grid-size) * 2); } -.ueb-zoom--6.ueb { +ueb-blueprint[data-zoom="-6"] { --ueb-scale: 0.333333; --ueb-grid-actual-size: calc(var(--ueb-grid-size) * 3); } -.ueb-zoom--7.ueb { +ueb-blueprint[data-zoom="-7"] { --ueb-scale: 0.3; --ueb-grid-actual-size: calc(var(--ueb-grid-size) * 3); } -.ueb-zoom--8.ueb { +ueb-blueprint[data-zoom="-8"] { --ueb-scale: 0.266666; --ueb-grid-actual-size: calc(var(--ueb-grid-size) * 3); } -.ueb-zoom--9.ueb { +ueb-blueprint[data-zoom="-9"] { --ueb-scale: 0.233333; --ueb-grid-actual-size: calc(var(--ueb-grid-size) * 3); } -.ueb-zoom--10.ueb { +ueb-blueprint[data-zoom="-10"] { --ueb-scale: 0.2; --ueb-grid-actual-size: calc(var(--ueb-grid-size) * 3); } -.ueb-zoom--11.ueb { +ueb-blueprint[data-zoom="-11"] { --ueb-scale: 0.166666; --ueb-grid-actual-size: calc(var(--ueb-grid-size) * 6); } -.ueb-zoom--12.ueb { +ueb-blueprint[data-zoom="-12"] { --ueb-scale: 0.133333; --ueb-grid-actual-size: calc(var(--ueb-grid-size) * 6); } diff --git a/scss/ueb-link.scss b/scss/ueb-link.scss index 5a32b27..e9fb6cb 100644 --- a/scss/ueb-link.scss +++ b/scss/ueb-link.scss @@ -1,14 +1,18 @@ +@use "style.scss"; + 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; + @extend .ueb-positioned; } ueb-link svg { @@ -24,17 +28,17 @@ ueb-link svg { ueb-link svg path { visibility: visible; - stroke: var(--ueb-pin-color); + stroke: var(--ueb-link-color); stroke-width: 1; } -ueb-link.ueb-link-dragging svg path, +ueb-link[data-dragging="true"] svg path, ueb-link svg g:hover path { stroke-width: 5; transition: stroke-width 0.8s; } -ueb-link-message { +.ueb-link-message { display: block; visibility: visible; position: absolute; diff --git a/scss/ueb-node.scss b/scss/ueb-node.scss index 1223771..e11743b 100644 --- a/scss/ueb-node.scss +++ b/scss/ueb-node.scss @@ -7,7 +7,7 @@ ueb-node { font-weight: lighter; } -ueb-blueprint[data-drag-scrolling="false"][data-selecting="false"] ueb-node { +ueb-blueprint[data-scrolling="false"][data-selecting="false"] ueb-node { cursor: move; } @@ -17,7 +17,7 @@ ueb-blueprint[data-drag-scrolling="false"][data-selecting="false"] ueb-node { border-radius: calc(var(--ueb-node-radius) * 1.4); } -.ueb-selected>.ueb-node-border { +ueb-node[data-selected="true"]>.ueb-node-border { background-image: linear-gradient(to right, #f1b000 0%, #f1b000 100%), linear-gradient(to bottom, #f1b000 0%, #cc6700 100%), @@ -41,7 +41,8 @@ ueb-blueprint[data-drag-scrolling="false"][data-selecting="false"] ueb-node { .ueb-node-top { padding: 0.3em 0.7em; - box-shadow: inset 5px 1px 5px -3px #83b37b, + box-shadow: + inset 5px 1px 5px -3px #83b37b, inset 0 1px 0 0 #111311, inset 0 2px 0 0 #83b37b; border-radius: var(--ueb-node-radius) var(--ueb-node-radius) 0 0; @@ -108,7 +109,7 @@ ueb-node[data-enabled-state="DevelopmentOnly"] .ueb-node-developmentonly { vertical-align: middle; } -ueb-blueprint[data-drag-scrolling="false"][data-selecting="false"] .ueb-node-expansion:hover { +ueb-blueprint[data-scrolling="false"][data-selecting="false"] .ueb-node-expansion:hover { background-color: #656765; cursor: pointer; } diff --git a/scss/ueb-pin.scss b/scss/ueb-pin.scss index cb85be6..b4023dd 100644 --- a/scss/ueb-pin.scss +++ b/scss/ueb-pin.scss @@ -8,7 +8,7 @@ ueb-node[data-advanced-display="Hidden"] ueb-pin[data-advanced-view="true"] { .ueb-pin-wrapper { display: inline-block; - margin: 6px 0 0 0; + margin: 5px 0 0 0; padding: 2px 2px; &>* { @@ -17,7 +17,7 @@ ueb-node[data-advanced-display="Hidden"] ueb-pin[data-advanced-view="true"] { } } -ueb-blueprint[data-drag-scrolling="false"][data-selecting="false"] .ueb-pin-wrapper:hover { +ueb-blueprint[data-scrolling="false"][data-selecting="false"] .ueb-pin-wrapper:hover { background: var(--ueb-pin-background); cursor: crosshair; } @@ -52,11 +52,11 @@ ueb-blueprint[data-drag-scrolling="false"][data-selecting="false"] .ueb-pin-wrap border-radius: 50%; } -ueb-pin.ueb-pin-fill .ueb-pin-icon-value::before { +ueb-pin[data-linked="true"] .ueb-pin-icon-value::before { background: var(--ueb-pin-color); } -ueb-pin.ueb-pin-fill .ueb-pin-tofill { +ueb-pin[data-linked="true"] .ueb-pin-tofill { fill: currentColor; } @@ -78,7 +78,7 @@ ueb-pin.ueb-pin-fill .ueb-pin-tofill { vertical-align: middle; } -.ueb-pin-exec .ueb-pin-name { +ueb-pin[data-type="exec"] .ueb-pin-name { display: none; } @@ -100,7 +100,7 @@ ueb-pin.ueb-pin-fill .ueb-pin-tofill { } } -.ueb-pin-type-bool .ueb-pin-input { +ueb-pin[data-type="bool"] .ueb-pin-input { appearance: none; padding: 0; height: 18px; @@ -109,7 +109,7 @@ ueb-pin.ueb-pin-fill .ueb-pin-tofill { color: var(--ueb-pin-color); } -.ueb-pin-type-bool .ueb-pin-input:checked { +ueb-pin[data-type="bool"] .ueb-pin-input:checked { background-image: url('data:image/svg+xml,'); } diff --git a/scss/ueb-type-color.scss b/scss/ueb-type-color.scss index 792811f..b821f0b 100644 --- a/scss/ueb-type-color.scss +++ b/scss/ueb-type-color.scss @@ -1,60 +1,61 @@ -@mixin pin-style($color) { - --ueb-pin-color : #{$color}; +ueb-blueprint { + --ueb-pin-dim-color: #afafaf; +} + +ueb-link { + --ueb-link-color: rgb(var(--ueb-link-color-rgb)); +} + +ueb-pin { --ueb-pin-background: linear-gradient(90deg, - #{transparentize($color, 0.85)}, - #{transparentize($color, 0.2)} 15%, - #{transparentize($color, 0.5)} 60%, - #{transparentize($color, 0.65)} 95%, - transparent); + rgba(var(--ueb-pin-color-rgb), 0.15), + rgba(var(--ueb-pin-color-rgb), 0.8) 15%, + rgba(var(--ueb-pin-color-rgb), 0.5) 60%, + rgba(var(--ueb-pin-color-rgb), 0.35) 95%, + transparent); + --ueb-pin-color: rgb(var(--ueb-pin-color-rgb)); } -.ueb { - $ueb-pin-color: white; - $ueb-pin-dim-color: #afafaf; - --ueb-pin-color : #{$ueb-pin-color}; - --ueb-pin-dim-color: #{$ueb-pin-dim-color}; +ueb-pin[data-type="bool"] { + --ueb-pin-color-rgb: var(--ueb-pin-bool-color); } -.ueb-pin-type-bool { - @include pin-style(#750000); +ueb-pin[data-type="class"] { + --ueb-pin-color-rgb: var(--ueb-pin-class-color); } -.ueb-pin-type-class { - @include pin-style(#5800bb); +ueb-pin[data-type="exec"] { + --ueb-pin-color-rgb: var(--ueb-pin-exec-color); } -.ueb-pin-type-exec { - @include pin-style(#a7a7a7); +ueb-pin[data-type="int"] { + --ueb-pin-color-rgb: var(--ueb-pin-int-color); } -.ueb-pin-type-int { - @include pin-style(#1fe0ad); +ueb-pin[data-type="name"] { + --ueb-pin-color-rgb: var(--ueb-pin-name-color); } -.ueb-pin-type-name { - @include pin-style(#cb81fc); +ueb-pin[data-type="object"] { + --ueb-pin-color-rgb: var(--ueb-pin-object-color); } -.ueb-pin-type-object { - @include pin-style(#00a8f2); +ueb-pin[data-type="real"] { + --ueb-pin-color-rgb: var(--ueb-pin-real-color); } -.ueb-pin-type-real { - @include pin-style(#32bb00); +ueb-pin[data-type="rotator"] { + --ueb-pin-color-rgb: var(--ueb-pin-rotator-color); } -.ueb-pin-type-rotator { - @include pin-style(#9eb1fc); +ueb-pin[data-type="string"] { + --ueb-pin-color-rgb: var(--ueb-pin-string-color); } -.ueb-pin-type-string { - @include pin-style(#d500b1); +ueb-pin[data-type="struct"] { + --ueb-pin-color-rgb: var(--ueb-pin-struct-color); } -.ueb-pin-type-struct { - @include pin-style(#034ca8); -} - -.ueb-pin-type-vector { - @include pin-style(#fcc823); +ueb-pin[data-type="vector"] { + --ueb-pin-color-rgb: var(--ueb-pin-vector-color); } \ No newline at end of file