Large refactoring and new nodes

* Fix node reference when changing elements

* Fix ScriptVariables parsing

* Fix invariant text and niagara types

* Niagara convert nodes

* Move node tests to own files

* More Niagara tests

* Niagara float and smaller fixes

* More Decoding

* More decoding

* WIP

* Float is real

* WIP

* More types and colors

* Test case and small polish

* WIP

* WIP

* Fix niagara script variables merging

* Fix Niagara variables

* Fixing mirrored ExportPath

* Fix Export paths name adjustments

* Simplify arc calculation

* Simplify a bit arc calculation

* source / destionation => origin / target

* Minor refactoring

* Fix switched link position

* Rename some properties for uniformity

* Fix input escape

* Simplify test

* About window

* Dialog backdrop style

* About dialog touches

* Remove dependency and minot improvement

* Light mode

* Fix link location and css small improvement

* Link direction and minor fixes

* Some minor fixes and refactoring

* Refactoring WIP

* Shorting repetitive bits

* More tests

* Simplify linking tests

dist/css/ueb-style.css

@@ -11,6 +11,9 @@
 ueb-blueprint {
   --ueb-scale: 1;
   --ueb-grid-actual-size: var(--ueb-grid-size);
+  --ueb-grid-line-color: #353535;
+  --ueb-grid-set-line-color: #161616;
+  --ueb-grid-axis-line-color: #000;
   display: block;
   position: relative;
   font-family: Roboto, Noto, Oxygen, Ubuntu, "Open Sans", "Helvetica Neue", sans-serif;
@@ -34,6 +37,15 @@ ueb-blueprint svg {
   z-index: 1;
 }
 
+.ueb-viewport-about {
+  margin-top: -6px;
+  padding: 0 8px;
+  align-self: center;
+  font-size: 20px;
+  font-weight: bolder;
+  cursor: pointer;
+}
+
 @keyframes ueb-zoom-animation {
   0% {
     color: #7f7f7f;
@@ -43,7 +55,7 @@ ueb-blueprint svg {
   }
 }
 .ueb-zoom-changed .ueb-viewport-zoom {
-  animation: 600ms ueb-zoom-animation;
+  animation: 1500ms ueb-zoom-animation;
 }
 
 .ueb-viewport-zoom {
@@ -90,7 +102,6 @@ ueb-blueprint[data-scrolling=false] .ueb-grid {
 
 ueb-blueprint.ueb-zoom--4 {
   --ueb-grid-actual-size: calc(var(--ueb-grid-size) * 2);
-  --ueb-node-radius: 0 !important;
 }
 
 ueb-blueprint.ueb-zoom--6 {
@@ -145,6 +156,50 @@ ueb-selector > * {
   overflow: hidden;
 }
 
+.ueb-info-dialog {
+  border: 6px solid #202020;
+  padding: 5px 30px;
+  background: #121212;
+  color: #f0f0f0;
+  box-shadow: 0 2px 10px 0 #000;
+}
+.ueb-info-dialog a:link,
+.ueb-info-dialog a:visited,
+.ueb-info-dialog a:hover,
+.ueb-info-dialog a:active {
+  outline: none;
+  color: #f0f0f0;
+}
+
+.ueb-info-dialog::backdrop {
+  background-color: rgba(0, 0, 0, 0.6274509804);
+  backdrop-filter: blur(4px);
+}
+
+/* Light mode */
+ueb-blueprint.ueb-light-mode {
+  --ueb-grid-line-color: #ddd;
+  --ueb-grid-set-line-color: #c0c0c0;
+  --ueb-grid-axis-line-color: #a0a0a0;
+}
+
+ueb-blueprint.ueb-light-mode .ueb-grid {
+  background-color: #f6f6f6;
+}
+
+ueb-blueprint.ueb-light-mode ueb-node.ueb-node-style-glass .ueb-node-wrapper {
+  background-color: rgba(0, 0, 0, 0.5647058824);
+}
+
+ueb-blueprint.ueb-light-mode ueb-link .ueb-link-path {
+  filter: saturate(200%) brightness(0.6);
+}
+
+ueb-blueprint.ueb-light-mode .ueb-viewport-header {
+  background: rgba(0, 0, 0, 0.3);
+  color: #101010;
+}
+
 ueb-node.ueb-node-style-minimal {
   box-shadow: none;
 }
@@ -176,9 +231,7 @@ ueb-node.ueb-node-style-minimal[data-selected=true] .ueb-node-border {
 ueb-link {
   position: absolute;
   --ueb-link-color: rgb(var(--ueb-link-color-rgb));
-  --ueb-from-input-coefficient: calc(2 * var(--ueb-from-input) - 1);
   /* when from-y > to-y */
-  --ueb-y-reflected: 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);
@@ -190,12 +243,11 @@ ueb-link {
 }
 
 ueb-link > svg {
-  --ueb-y-reflected-coefficient: calc(2 * var(--ueb-y-reflected) - 1);
   position: absolute;
   width: 100% !important;
   height: 100% !important;
   min-height: 1px !important;
-  transform: scaleY(calc(var(--ueb-y-reflected-coefficient) * var(--ueb-from-input-coefficient)));
+  transform: scaleX(var(--ueb-link-scale-x)) scaleY(var(--ueb-link-scale-y));
   z-index: 1;
 }
 
@@ -222,10 +274,12 @@ ueb-link[data-dragging=true] .ueb-link-message {
 }
 
 .ueb-link-message {
+  --ueb-link-message-top: calc(50% * (var(--ueb-link-scale-y) + 1) + 22px);
+  --ueb-link-message-left: calc(100% - var(--ueb-start-percentage) + 15px);
   display: none;
   position: absolute;
-  top: calc(100% * (1 - var(--ueb-y-reflected)) + 22px);
-  left: calc((1 - var(--ueb-from-input)) * 100% + (var(--ueb-from-input-coefficient)) * var(--ueb-start-percentage) + 15px);
+  top: var(--ueb-link-message-top);
+  left: var(--ueb-link-message-left);
   border: 1px solid #000;
   border-radius: 2px;
   background: linear-gradient(to bottom, #2a2a2a 0, #151515 50%, #2a2a2a 100%);
@@ -234,6 +288,11 @@ ueb-link[data-dragging=true] .ueb-link-message {
   z-index: 1000000;
 }
 
+ueb-link[data-from-input=true] .ueb-link-message {
+  --ueb-link-message-top: calc(-50% * (var(--ueb-link-scale-y) - 1) + 22px);
+  --ueb-link-message-left: calc(var(--ueb-start-percentage) + 15px);
+}
+
 .ueb-link-message-icon {
   display: inline-block;
   padding: 4px;
@@ -267,10 +326,6 @@ ueb-node.ueb-node-style-comment {
   min-width: 0;
 }
 
-.ueb-zoom--2 ueb-node {
-  box-shadow: none;
-}
-
 .ueb-node-border {
   margin: -3px;
   padding: 3px;
@@ -310,6 +365,10 @@ ueb-node[data-selected=true] > .ueb-node-border {
   overflow: hidden;
 }
 
+.ueb-zoom--2 .ueb-node-wrapper {
+  background: rgb(14, 16, 10);
+}
+
 ueb-node.ueb-node-style-operation .ueb-node-wrapper {
   grid-template-rows: min-content auto auto min-content min-content;
   grid-template-columns: 50% 0% 1fr;
@@ -335,7 +394,6 @@ ueb-blueprint[data-scrolling=false][data-selecting=false] .ueb-draggable {
 }
 
 .ueb-zoom--2 .ueb-node-wrapper {
-  box-shadow: none;
   padding: 0;
   background: #101010;
 }
@@ -372,10 +430,6 @@ ueb-node.ueb-node-style-event .ueb-node-top {
   background: linear-gradient(rgba(255, 255, 255, 0.1882352941) 1px, transparent 1px), linear-gradient(170deg, rgb(var(--ueb-node-color)) 0%, rgb(var(--ueb-node-color)) 50%, transparent 100%);
 }
 
-.ueb-zoom--2 .ueb-node-top {
-  box-shadow: none;
-}
-
 .ueb-zoom--2 .ueb-node-style-default .ueb-node-top {
   background: rgb(var(--ueb-node-color));
 }
@@ -524,6 +578,10 @@ ueb-node.ueb-node-style-glass .ueb-node-wrapper {
   background-repeat: repeat, no-repeat;
 }
 
+.ueb-zoom--2 ueb-node.ueb-node-style-glass .ueb-node-wrapper {
+  background: #101010;
+}
+
 ueb-node.ueb-node-style-glass .ueb-node-name {
   padding-right: 0;
   padding-left: 0;
@@ -811,6 +869,23 @@ ueb-node[data-type="/Script/BlueprintGraph.K2Node_VariableSet"] ueb-pin[data-dir
   outline: none;
 }
 
+.ueb-pin-input[type=checkbox] {
+  display: grid;
+  place-content: center;
+  appearance: none;
+  width: 18px;
+  height: 18px;
+  border: 1px solid #353535;
+  background: #0f0f0f;
+}
+.ueb-pin-input[type=checkbox]:checked::before {
+  content: "";
+  height: 0.7em;
+  width: 0.8em;
+  clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);
+  background: #0070e0;
+}
+
 ueb-pin[data-linked=true] .ueb-pin-input,
 ueb-pin[data-linked=true] .ueb-pin-input-wrapper {
   display: none;
@@ -861,7 +936,7 @@ ueb-pin[data-type="/Script/CoreUObject.LinearColor"] .ueb-pin-input {
   max-height: 16em;
   /* 97% is to get an effective font size of 12.6px from --ueb-font-size which is 13 px by default */
   font-size: 97%;
-  white-space: nowrap;
+  white-space: pre;
   background: none;
   color: inherit;
   overflow: auto;
@@ -1276,4 +1351,12 @@ ueb-ui-slider {
   color: #c0c0c0;
 }
 
+/* To improve a bit performance */
+.ueb-zoom--2 * {
+  border: none !important;
+  border-radius: 0 !important;
+  box-shadow: none !important;
+  text-shadow: none !important;
+}
+
 /*# sourceMappingURL=ueb-style.css.map */