Fix link location and css small improvement

README.md

@@ -34,7 +34,7 @@ npx http-server
 
 You can check `index.html` for a working example, the main steps are the following:
 1. Make the `dist` directory available in your website by copying it or installing through npm `npm i ueblueprint`.
-2. Include `dist/css/ueb-style.css` stylesheet in your page.
+2. Include `dist/css/ueb-style.min.css` stylesheet in your page.
 3. Define eventual CSS variables.
 ```HTML
 <style>
@@ -50,6 +50,7 @@ You can check `index.html` for a working example, the main steps are the followi
 </script>
 ```
 5. Define your blueprint by writing the code inside a `template`, inside a `ueb-blueprint` element.
+It can have light background using the following CSS class: `<ueb-blueprint class="ueb-light-mode">`
 ```HTML
 <ueb-blueprint>
     <template>

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;
@@ -99,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 {
@@ -174,6 +176,30 @@ ueb-selector > * {
   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;
 }
@@ -300,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;
@@ -343,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;
@@ -368,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;
 }
@@ -405,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));
 }
@@ -557,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;
@@ -1326,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 */

dist/ueblueprint.js

@@ -62,12 +62,9 @@ class Configuration {
         end: "blueprint-unfocus",
     }
     static fontSize = i$5`13px`
-    static gridAxisLineColor = i$5`black`
     static gridExpandThreshold = 0.25 // remaining size factor threshold to cause an expansion event
-    static gridLineColor = i$5`#353535`
     static gridLineWidth = 1 // px
     static gridSet = 8
-    static gridSetLineColor = i$5`#161616`
     static gridShrinkThreshold = 4 // exceding size factor threshold to cause a shrink event
     static gridSize = 16 // px
     static hexColorRegex = /^\s*#(?<r>[0-9a-fA-F]{2})(?<g>[0-9a-fA-F]{2})(?<b>[0-9a-fA-F]{2})([0-9a-fA-F]{2})?|#(?<rs>[0-9a-fA-F])(?<gs>[0-9a-fA-F])(?<bs>[0-9a-fA-F])\s*$/
@@ -9680,7 +9677,7 @@ class PinTemplate extends ITemplate {
         const rect = (this.#iconElement ?? this.element).getBoundingClientRect();
         /** @type {[Number, Number]} */
         const boundingLocation = [
-            this.element.isInputVisually() && !oppositeDirection ? rect.left : rect.right + 1,
+            this.element.isInputVisually() != oppositeDirection ? rect.left : rect.right + 1,
             (rect.top + rect.bottom) / 2
         ];
         const location = Utility.convertLocation(boundingLocation, this.blueprint.template.gridElement);
@@ -11040,11 +11037,8 @@ 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}`,

index.html

@@ -4,7 +4,7 @@
 <head>
     <meta charset="utf-8" />
     <title>UE Blueprint</title>
-    <link rel="stylesheet" href="dist/css/ueb-style.css">
+    <link rel="stylesheet" href="dist/css/ueb-style.min.css">
     <style>
         body {
             margin: 0;

js/Configuration.js

@@ -38,12 +38,9 @@ export default class Configuration {
         end: "blueprint-unfocus",
     }
     static fontSize = css`13px`
-    static gridAxisLineColor = css`black`
     static gridExpandThreshold = 0.25 // remaining size factor threshold to cause an expansion event
-    static gridLineColor = css`#353535`
     static gridLineWidth = 1 // px
     static gridSet = 8
-    static gridSetLineColor = css`#161616`
     static gridShrinkThreshold = 4 // exceding size factor threshold to cause a shrink event
     static gridSize = 16 // px
     static hexColorRegex = /^\s*#(?<r>[0-9a-fA-F]{2})(?<g>[0-9a-fA-F]{2})(?<b>[0-9a-fA-F]{2})([0-9a-fA-F]{2})?|#(?<rs>[0-9a-fA-F])(?<gs>[0-9a-fA-F])(?<bs>[0-9a-fA-F])\s*$/

js/template/BlueprintTemplate.js

@@ -19,11 +19,8 @@ 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}`,

js/template/pin/PinTemplate.js

@@ -175,7 +175,7 @@ export default class PinTemplate extends ITemplate {
         const rect = (this.#iconElement ?? this.element).getBoundingClientRect()
         /** @type {[Number, Number]} */
         const boundingLocation = [
-            this.element.isInputVisually() && !oppositeDirection ? rect.left : rect.right + 1,
+            this.element.isInputVisually() != oppositeDirection ? rect.left : rect.right + 1,
             (rect.top + rect.bottom) / 2
         ]
         const location = Utility.convertLocation(boundingLocation, this.blueprint.template.gridElement)

scss/export.scss

@@ -5,3 +5,11 @@
 @use "ueb-pin.scss";
 @use "ueb-ui-controls.scss";
 @use "ueb-window.scss";
+
+/* To improve a bit performance */
+.ueb-zoom--2 * {
+    border: none !important;
+    border-radius: 0 !important;
+    box-shadow: none !important;
+    text-shadow: none !important;
+}

scss/style.scss

@@ -13,6 +13,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;
@@ -139,7 +142,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 {
@@ -287,3 +289,28 @@ ueb-selector>* {
     background-color: #000000a0;
     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: #00000090;
+}
+
+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, .3);
+    color: #101010;
+}

scss/ueb-node.scss

@@ -12,10 +12,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;
@@ -66,6 +62,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;
@@ -91,7 +91,6 @@ ueb-blueprint[data-scrolling="false"][data-selecting="false"] .ueb-draggable {
 }
 
 .ueb-zoom--2 .ueb-node-wrapper {
-    box-shadow: none;
     padding: 0;
     background: #101010;
 }
@@ -132,10 +131,6 @@ ueb-node.ueb-node-style-event .ueb-node-top {
         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));
 }
@@ -296,6 +291,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;