Various fixes

dist/css/ueblueprint-style.css.map

@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["../../scss/ueblueprint-style.css"],"names":[],"mappings":"AAAA,WACI,qBACA,iBACA,IACI,kGAIR,WACI,qBACA,mBACA,IACI,sGAIR,MACI,sBACA,6BACA,2BACA,sBACA,2BACA,+BACA,kBACA,mCACA,kCACA,sBACA,uBAGJ,cACI,cACA,kBACA,8EACA,+BACA,iBAGJ,qBACI,aACA,kBACA,MACA,QACA,OACA,aACA,8BACA,UAGJ,mBACI,gBAGJ,mBACI,kBACA,kCACA,gCACA,gBACA,kBAGJ,oDACI,gBAGJ,UACI,kFACA,kBACA,eACA,gBACA,kEACA,mEACA,yBACA,iBAEI,s3BA0BJ,gBAEI,sZAQJ,sFACA,gEACA,oDACA,qBACA,gBAGJ,oCACI,gBAGJ,qBAGI,eACA,6CAGJ,iBAEI,mBAGJ,iBAEI,kBAGJ,iBAEI,mBAGJ,iBAEI,iBACA,uDAGJ,iBAEI,mBACA,uDAGJ,iBACI,sBACA,uDAGJ,iBACI,iBACA,uDAGJ,iBACI,sBACA,uDAGJ,iBACI,sBACA,uDAGJ,kBAEI,iBACA,uDAGJ,kBAEI,sBACA,uDAGJ,kBAEI,sBACA,uDAGJ,kBACI,kBACA,QACA,SACA,wGAGJ,SACI,cACA,kBACA,sGACA,qCACA,4DACA,sBAGJ,iFACI,YAGJ,iBACI,YACA,YACA,+CAGJ,cACI,UAGJ,+BACI,iBACI,kNAIJ,oDACA,0CACA,sDACA,0BACA,oBAGJ,kBACI,kBACA,YACA,iCACA,qCACA,8BACA,gBAGJ,iBACI,kBACA,6DACA,gEACA,8EACA,aACA,gBACA,mBAGJ,eACI,iFACA,qBACA,mBAGJ,eACI,aACA,cACA,YACA,gBACA,mBAGJ,iBACI,kBACA,iBAGJ,kBACI,kBAGJ,QACI,cACA,gBAGJ,qCACI,eAGJ,+FACI,4CACA,iBAGJ,qBACI,qBACA,kBACA,YACA,aACA,wBACA,wBAGJ,6BACI,WACA,cACA,kBACA,MACA,QACA,SACA,OACA,6CACA,kBAGJ,6BACI,uCAGJ,4BACI,WACA,cACA,kBACA,qBACA,sBACA,QACA,SACA,kCACA,qCACA,mDAGJ,gBACI,8DACA,8DACA,8DACA,8DACA,oGACA,qGAGJ,aACI,cACA,kBACA,kBACA,MACA,OACA,QACA,SACA,iBAEI,wlDAmDJ,gBAEI,gQAWJ,oBAEI,wJAOJ,4BAGJ,kCACI,mBACA,wCACA,yCACA,0CACA,4CAGJ,eACI,mBAGJ,SACI,0BACA,cACA,kBACA,wCACA,iCACA,oFAKA,4CACA,qBAGJ,aACI,WACA,YACA,oEACA,iBAGJ,kBAEI,oJAOA,uFACA","file":"ueblueprint-style.css"}
+{"version":3,"sourceRoot":"","sources":["../../scss/ueblueprint-style.scss"],"names":[],"mappings":"AAAA,WACI,qBACA,iBACA,IACI,kGAIR,WACI,qBACA,mBACA,IACI,sGAIR,cACI,cACA,kBACA,8EACA,+BACA,iBAGJ,qBACI,aACA,kBACA,MACA,QACA,OACA,aACA,0BACA,UAGJ,mBACI,gBAGJ,mBACI,kBACA,aACA,gBACA,qBAGJ,oDACI,gBAGJ,UACI,kFACA,kBACA,eACA,gBACA,kEACA,mEACA,yBACA,iBAEI,s3BA0BJ,gBAEI,sZAQJ,sFACA,gEACA,oDACA,qBACA,gBAGJ,kDACI,gBAGJ,qBAGI,eACA,6CAGJ,iBAEI,mBAGJ,iBAEI,kBAGJ,iBAEI,mBAGJ,iBAEI,iBACA,uDAGJ,iBAEI,mBACA,uDAGJ,iBACI,sBACA,uDAGJ,iBACI,iBACA,uDAGJ,iBACI,sBACA,uDAGJ,iBACI,sBACA,uDAGJ,kBAEI,iBACA,uDAGJ,kBAEI,sBACA,uDAGJ,kBAEI,sBACA,uDAGJ,kBACI,kBACA,QACA,SACA,wGAGJ,SACI,cACA,kBACA,sGACA,qCACA,uDACA,sBAGJ,wEACI,YAGJ,iBACI,YACA,YACA,+CAGJ,cACI,UAGJ,+BACI,iBACI,kNAIJ,oDACA,0CACA,sDACA,0BACA,oBAGJ,kBACI,kBACA,YACA,gCACA,qCACA,0BACA,gBAGJ,iBACI,kBACA,6DACA,gEACA,8EACA,aACA,gBACA,mBAGJ,eACI,iFACA,qBACA,mBAGJ,eACI,aACA,cACA,WACA,gBACA,mBAGJ,iBACI,kBACA,iBAGJ,kBACI,kBAGJ,QACI,cACA,gBAGJ,mDACI,eAGJ,sFACI,4CACA,iBAGJ,qBACI,qBACA,kBACA,YACA,aACA,wBACA,wBAGJ,6BACI,WACA,cACA,kBACA,MACA,QACA,SACA,OACA,6CACA,kBAGJ,6BACI,uCAGJ,4BACI,WACA,cACA,kBACA,qBACA,sBACA,QACA,SACA,kCACA,qCACA,mDAGJ,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,mBAGJ,SACI,0BACA,cACA,qBAGJ,aACI,WACA,YACA,oEACA,iBAGJ,kBAEI,oJAOA,uFACA,qBACA,eACA,4BAGJ,wBACI","file":"ueblueprint-style.css"}

js/Blueprint.js

@@ -104,6 +104,7 @@ export default class Blueprint extends GraphElement {
             new Select(this.getGridDOMElement(), this, {
                 clickButton: 0,
                 exitAnyButton: true,
+                looseTarget: true,
                 moveEverywhere: true,
             }),
             new MouseScrollGraph(this.getGridDOMElement(), this, {

js/Configuration.js

@@ -1,10 +1,20 @@
 export default class Configuration {
-
+    static fontSize = "13px"
+    static gridSize = "16"
+    static gridLineWidth = "2px"
+    static gridLineColor = "#353535"
+    static gridSet = "8"
+    static gridSetLineColor = "#161616"
+    static gridAxisLineColor = "black"
+    static gridSnap = "16px"
+    static nodeRadius = "8px"
     static deleteNodesKeyboardKey = "Delete"
     static expandGridSize = 400
-    static gridSize = 16
     static selectAllKeyboardKey = "Ctrl+A"
     static keysSeparator = "+"
+    static linkMinWidth = "20px"
+    static linkRightSVGPath = (c1, c2) => `M 0 0 C ${c1} 0, ${c2} 0, 50 50 S ${100 - c1} 100, 100 100`
+    static linkLeftSVGPath = "M 100 0 c 20 0, 30 0, 50 50 S 70 100, 100 100"
     static ModifierKeys = [
         "Ctrl",
         "Shift",
@@ -12,6 +22,7 @@ export default class Configuration {
         "Meta"
     ]
     static Keys = {
+        /* UE name: JS name */
         "Backspace": "Backspace",
         "Tab": "Tab",
         "Enter": "Enter",

js/Utility.js

@@ -10,6 +10,12 @@ export default class Utility {
         return getComputedStyle(element).getPropertyValue("--ueb-scale")
     }
 
+    /**
+     * 
+     * @param {Number[]} viewportLocation 
+     * @param {HTMLElement} movementElement 
+     * @returns 
+     */
     static convertLocation(viewportLocation, movementElement) {
         const scaleCorrection = 1 / Utility.getScale(movementElement)
         const targetOffset = movementElement.getBoundingClientRect()

js/graph/GraphLink.js

@@ -6,7 +6,6 @@ import LinkTemplate from "../template/LinkTemplate"
  * @typedef {import("./GraphPin").default} GraphPin
  */
 export default class GraphLink extends GraphElement {
-
     /** @type {GraphPin} */
     #source
     /** @type {GraphPin} */
@@ -23,7 +22,11 @@ export default class GraphLink extends GraphElement {
         super({}, new LinkTemplate())
         /** @type {import("../template/LinkTemplate").default} */
         this.template
+        /** @type {SVGPathElement} */
+        this.pathElement = null
         this.originatesFromInput = false
+        this.sourceLocation = [0, 0]
+        this.destinationLocation = [0, 0]
         this.setSourcePin(source)
         this.setDestinationPin(destination)
     }
@@ -32,14 +35,16 @@ export default class GraphLink extends GraphElement {
         if (location == null) {
             location = this.#source.template.getLinkLocation(this.#source)
         }
-        this.template.applySourceLocation(this, location)
+        this.sourceLocation = location
+        this.template.applySourceLocation(this)
     }
 
     setDestinationLocation(location) {
         if (location == null) {
             location = this.#destination.template.getLinkLocation(this.#destination)
         }
-        this.template.applyDestinationLocation(this, location)
+        this.destinationLocation = location
+        this.template.applyDestinationLocation(this)
     }
 
 

js/graph/GraphSelector.js

@@ -16,7 +16,6 @@ export default class GraphSelector extends GraphElement {
      * @param {number[]} initialPosition - Selection rectangle initial position (relative to the .ueb-grid element)
      */
     startSelecting(initialPosition) {
-        initialPosition = this.blueprint.compensateTranslation(initialPosition)
         this.template.applyStartSelecting(this, initialPosition)
         this.selectionModel = new FastSelectionModel(initialPosition, this.blueprint.getNodes(), this.blueprint.nodeBoundariesSupplier, this.blueprint.nodeSelectToggleFunction)
     }
@@ -26,7 +25,6 @@ export default class GraphSelector extends GraphElement {
      * @param {number[]} finalPosition - Selection rectangle final position (relative to the .ueb-grid element)
      */
     doSelecting(finalPosition) {
-        finalPosition = this.blueprint.compensateTranslation(finalPosition)
         this.template.applyDoSelecting(this, finalPosition)
         this.selectionModel.selectTo(finalPosition)
     }

js/input/common/Paste.js

@@ -43,7 +43,7 @@ export default class Paste extends Context {
                 mousePosition[0] - left,
                 mousePosition[1] - top,
             ]
-            node.addLocation(this.blueprint.compensateTranslation(locationOffset))
+            node.addLocation(locationOffset)
             node.setSelected(true)
             node.snapToGrid()
         })

js/input/mouse/Pointing.js

@@ -14,6 +14,9 @@ export default class Pointing extends Context {
      * @returns 
      */
     locationFromEvent(mouseEvent) {
-        return Utility.convertLocation([mouseEvent.clientX, mouseEvent.clientY], this.movementSpace)
+        return this.blueprint.compensateTranslation(
+            Utility.convertLocation(
+                [mouseEvent.clientX, mouseEvent.clientY],
+                this.movementSpace))
     }
 }

js/template/BlueprintTemplate.js

@@ -1,3 +1,4 @@
+import Configuration from "../Configuration"
 import GraphSelector from "../graph/GraphSelector"
 import html from "./html"
 import sanitizeText from "./sanitizeText"
@@ -60,6 +61,17 @@ export default class BlueprintTemplate extends Template {
     apply(blueprint) {
         super.apply(blueprint)
         blueprint.classList.add("ueb", `ueb-zoom-${blueprint.zoom}`)
+        Object.entries({
+            "--ueb-font-size": sanitizeText(Configuration.fontSize),
+            "--ueb-grid-size": `calc(${sanitizeText(Configuration.gridSize)} * 1px)`,
+            "--ueb-grid-line-width": sanitizeText(Configuration.gridLineWidth),
+            "--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-grid-snap": sanitizeText(Configuration.gridSnap),
+            "--ueb-node-radius": sanitizeText(Configuration.nodeRadius)
+        }).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')
@@ -102,7 +114,7 @@ export default class BlueprintTemplate extends Template {
      * @param {Blueprint} blueprint The blueprint element
      */
     applyStartDragScrolling(blueprint) {
-        blueprint.gridElement.dataset.dragScrolling = true
+        blueprint.dataset.dragScrolling = true
     }
 
     /**
@@ -110,6 +122,6 @@ export default class BlueprintTemplate extends Template {
      * @param {Blueprint} blueprint The blueprint element
      */
     applyEndDragScrolling(blueprint) {
-        blueprint.gridElement.dataset.dragScrolling = false
+        blueprint.dataset.dragScrolling = false
     }
 }

js/template/LinkTemplate.js

@@ -1,6 +1,7 @@
 import html from "./html"
 import sanitizeText from "./sanitizeText"
 import Template from "./Template"
+import Configuration from "../Configuration"
 
 /**
  * @typedef {import("../graph/GraphLink").default} GraphLink
@@ -15,7 +16,7 @@ export default class LinkTemplate extends Template {
     render(link) {
         return html`
             <svg version="1.2" baseProfile="tiny" width="100%" height="100%" viewBox="0 0 100 100" preserveAspectRatio="none">
-                <path d="M 0 0 C 20 0, 30 0, 50 50 S 70 100, 100 100" stroke="black" stroke-width="2" fill="none" vector-effect="non-scaling-stroke" />
+                <path stroke="black" fill="none" vector-effect="non-scaling-stroke" />
             </svg>
         `
     }
@@ -27,28 +28,31 @@ export default class LinkTemplate extends Template {
     apply(link) {
         super.apply(link)
         link.classList.add("ueb-positioned")
+        link.pathElement = link.querySelector("path")
     }
 
     /**
      * Applies the style relative to the source pin location.
      * @param {GraphLink} link Link element
      */
-    applySourceLocation(link, initialPosition) {
+    applySourceLocation(link) {
         link.style.setProperty("--ueb-from-input", link.originatesFromInput ? "1" : "0")
         // Set initial position
-        link.style.setProperty("--ueb-from-x", sanitizeText(initialPosition[0]))
-        link.style.setProperty("--ueb-from-y", sanitizeText(initialPosition[1]))
+        link.style.setProperty("--ueb-from-x", sanitizeText(link.sourceLocation[0]))
+        link.style.setProperty("--ueb-from-y", sanitizeText(link.sourceLocation[1]))
     }
 
     /**
      * Applies the style relative to the destination pin location.
      * @param {GraphLink} link Link element
      */
-    applyDestinationLocation(link, finalPosition) {
-        link.style.setProperty("--ueb-to-x", sanitizeText(finalPosition[0]))
-        link.style.setProperty("--ueb-to-y", sanitizeText(finalPosition[1]))
-        const height = Math.abs(link.style.getPropertyValue("--ueb-from-y") - finalPosition[1])
-        let skew = Math.atan(height / (finalPosition[0] - link.style.getPropertyValue("--ueb-from-x"))) - Math.PI / 2
-        link.style.setProperty("--ueb-link-skew", skew)
+    applyDestinationLocation(link) {
+        link.style.setProperty("--ueb-to-x", sanitizeText(link.destinationLocation[0]))
+        link.style.setProperty("--ueb-to-y", sanitizeText(link.destinationLocation[1]))
+        const r = Math.max(Math.abs(link.sourceLocation[0] - link.destinationLocation[0]), 1)
+            / Math.max(Math.abs(link.sourceLocation[1] - link.destinationLocation[1]), 1)
+        const d = Configuration.linkRightSVGPath(20, Math.max(40 / r, 30))
+        // TODO move to CSS when Firefox will support property d
+        link.pathElement.setAttribute("d", d)
     }
 }

js/template/PinTemplate.js

@@ -45,8 +45,8 @@ export default class PinTemplate extends Template {
      */
     getLinkLocation(pin) {
         const rect = pin.querySelector(".ueb-node-value-icon").getBoundingClientRect()
-        return Utility.convertLocation(
+        return pin.blueprint.compensateTranslation(Utility.convertLocation(
             [(rect.left + rect.right) / 2, (rect.top + rect.bottom) / 2],
-            pin.blueprint.gridElement)
+            pin.blueprint.gridElement))
     }
 }

js/template/SelectorTemplate.js

@@ -27,7 +27,7 @@ export default class SelectorTemplate extends Template {
         // 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.dataset.selecting = "true"
+        selector.blueprint.dataset.selecting = "true"
     }
 
     /**
@@ -44,6 +44,6 @@ export default class SelectorTemplate extends Template {
      * @param {GraphSelector} selector Selector element
      */
     applyFinishSelecting(selector) {
-        selector.dataset.selecting = "false"
+        selector.blueprint.dataset.selecting = "false"
     }
 }

scss/ueblueprint-style.css

@@ -1,472 +0,0 @@
-@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");
-}
-
-:root {
-    --ueb-fron-size            : 13px;
-    --ueb-viewport-height      : 30rem;
-    --ueb-viewport-width       : 100%;
-    --ueb-grid-size            : 16px;
-    --ueb-grid-line-width      : 2px;
-    --ueb-grid-line-color      : #353535;
-    --ueb-grid-set             : 8;
-    --ueb-grid-set-line-color  : #161616;
-    --ueb-grid-axis-line-color : black;
-    --ueb-grid-snap            : 16px;
-    --ueb-node-radius          : 8px;
-}
-
-ueb-blueprint {
-    display     : block;
-    position    : relative;
-    font-family : Roboto, Noto, Oxygen, Ubuntu, "Open Sans", "Helvetica Neue", sans-serif;
-    font-size   : var(--ueb-fron-size);
-    user-select : none;
-}
-
-.ueb-viewport-header {
-    display    : flex;
-    position   : absolute;
-    top        : 0;
-    right      : 0;
-    left       : 0;
-    height     : 1.5em;
-    background : rgba(0, 0, 0, 0.5);
-    z-index    : 1;
-}
-
-.ueb-viewport-zoom {
-    color : #4d4d4db7;
-}
-
-.ueb-viewport-body {
-    position        : relative;
-    height          : var(--ueb-viewport-height);
-    width           : var(--ueb-viewport-width);
-    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             :
-        /* Axis lines */
-        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)),
-        /* Dark bigger grid */
-        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),
-        /* Light grid */
-        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:
-        /* Axis lines */
-        100% var(--ueb-grid-line-actual-width),
-        var(--ueb-grid-line-actual-width) 100%,
-        /* Dark bigger grid */
-        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)),
-        /* Light grid */
-        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-grid[data-drag-scrolling="true"] {
-    cursor : grabbing;
-}
-
-.ueb-zoom--.ueb,
-.ueb {
-    /* 16/16 */
-    --ueb-scale            : 1;
-    --ueb-grid-actual-size : var(--ueb-grid-size);
-}
-
-.ueb-zoom--1.ueb {
-    /* 14/16 */
-    --ueb-scale : 0.875;
-}
-
-.ueb-zoom--2.ueb {
-    /* 12/16 */
-    --ueb-scale : 0.75;
-}
-
-.ueb-zoom--3.ueb {
-    /* 10.8/16 */
-    --ueb-scale : 0.675;
-}
-
-.ueb-zoom--4.ueb {
-    /* 8/16 */
-    --ueb-scale            : 0.5;
-    --ueb-grid-actual-size : calc(var(--ueb-grid-size) * 2);
-}
-
-.ueb-zoom--5.ueb {
-    /* 6/16 */
-    --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 {
-    /* 12/16 */
-    --ueb-scale            : 0.2;
-    --ueb-grid-actual-size : calc(var(--ueb-grid-size) * 3);
-}
-
-.ueb-zoom--11.ueb {
-    /* 12/16 */
-    --ueb-scale            : 0.166666;
-    --ueb-grid-actual-size : calc(var(--ueb-grid-size) * 6);
-}
-
-.ueb-zoom--12.ueb {
-    /* 12/16 */
-    --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-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 black, 1px 4px 6px 0 rgba(0, 0, 0, 0.3);
-    will-change   : transform;
-}
-
-.ueb-grid[data-drag-scrolling="false"] ueb-selector[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 {
-    z-index : 1;
-}
-
-.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-content {
-    position      : relative;
-    padding       : 1px;
-    box-shadow    : inset 0 0 2px 0 black;
-    border-radius : var(--ueb-node-radius);
-    background    : rgba(0, 0, 0, 0.7);
-    overflow      : hidden;
-}
-
-.ueb-node-header {
-    padding       : 0.2em 0.7em;
-    box-shadow    : inset 0 1px 2px 0 #313631, inset 0 2px 0 0 #92c381;
-    border-radius : var(--ueb-node-radius) var(--ueb-node-radius) 0 0;
-    background    : linear-gradient(170deg, #5f815a 0%, #5f815a 50%, transparent 100%);
-    color         : #c0c0c0;
-    font-weight   : 600;
-    white-space   : nowrap;
-}
-
-.ueb-node-name {
-    background : radial-gradient(closest-side, rgba(0, 0, 0, 0.5) 0%, transparent 90%);
-    margin     : -0.1em -1.6em;
-    padding    : 0.1em 1.6em;
-}
-
-.ueb-node-body {
-    display     : flex;
-    padding     : 6px 0;
-    color       : white;
-    font-weight : 100;
-    white-space : nowrap;
-}
-
-.ueb-node-inputs {
-    margin-right : auto;
-    padding-left : 8px;
-}
-
-.ueb-node-outputs {
-    padding-right : 8px;
-}
-
-ueb-pin {
-    display : block;
-    padding : 1px 2px;
-}
-
-.ueb-grid[data-drag-scrolling="false"] {
-    cursor : default;
-}
-
-.ueb-grid[data-drag-scrolling="false"] ueb-selector[data-selecting="false"]~ueb-node ueb-pin:hover {
-    background : var(--ueb-node-value-background);
-    cursor     : crosshair;
-}
-
-.ueb-node-value-icon {
-    display        : inline-block;
-    position       : relative;
-    width          : 0.85em;
-    height         : 0.85em;
-    vertical-align : baseline;
-    margin         : 0 0.4em -1px 0.1em;
-}
-
-.ueb-node-value-icon::before {
-    content       : "";
-    display       : block;
-    position      : absolute;
-    top           : 0;
-    right         : 0;
-    bottom        : 0;
-    left          : 0;
-    border        : 2px solid var(--ueb-node-value-color);
-    border-radius : 50%;
-}
-
-.ueb-node-value-fill::before {
-    background : var(--ueb-node-value-color);
-}
-
-.ueb-node-value-icon::after {
-    content       : "";
-    display       : block;
-    position      : absolute;
-    top           : calc(50% - 0.3em);
-    left          : calc(100% + 1px);
-    width         : 0;
-    height        : 0;
-    border-top    : 0.3em solid transparent;
-    border-bottom : 0.3em solid transparent;
-    border-left   : 0.3em solid var(--ueb-node-value-color);
-}
-
-.ueb-positioned {
-    --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));
-}
-
-ueb-selector {
-    display    : block;
-    position   : absolute;
-    visibility : hidden;
-    top        : 0;
-    left       : 0;
-    width      : 0;
-    height     : 0;
-    background-image:
-        /* Top */
-        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))),
-        /* Bottom */
-        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))),
-        /* Left */
-        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))),
-        /* Right */
-        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:
-        /* Top */
-        100% calc(1px / var(--ueb-scale)),
-        100% calc(3px / var(--ueb-scale)),
-        /* Bottom */
-        100% calc(1px / var(--ueb-scale)),
-        100% calc(3px / var(--ueb-scale)),
-        /* Left */
-        calc(1px / var(--ueb-scale)) 100%,
-        calc(3px / var(--ueb-scale)) 100%,
-        /* Right */
-        calc(1px / var(--ueb-scale)) 100%,
-        calc(3px / var(--ueb-scale)) 100%;
-    background-position:
-        /* Top */
-        0 calc(1px / var(--ueb-scale)), 0 0,
-        /* Bottom */
-        0 calc(100% - 1px / var(--ueb-scale)), 0 100%,
-        /* Left */
-        calc(1px / var(--ueb-scale)) 0, 0 0,
-        /* Right */
-        calc(100% - 1px / var(--ueb-scale)) 0, 100% 0;
-    background-repeat : no-repeat;
-}
-
-ueb-selector[data-selecting="true"] {
-    visibility : visible;
-    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>* {
-    visibility : visible;
-}
-
-ueb-link {
-    --ueb-width-threshold : 50;
-    display               : block;
-    position              : absolute;
-    top                   : calc(var(--ueb-computed-min-y) * 1px);
-    left                  : calc(var(--ueb-from-x) * 1px);
-    width                 : calc(max(
-                /* 1 */
-                var(--ueb-to-x) - var(--ueb-from-x),
-                /* 3 */
-                var(--ueb-width-threshold)) * 1px);
-    height : calc(var(--ueb-computed-height) * 1px);
-    border : 1px solid red;
-}
-
-ueb-link svg {
-    width     : 100%;
-    height    : 100%;
-    transform : scaleY(clamp(-1, calc(var(--ueb-to-y) - var(--ueb-from-y)), 1));
-    overflow  : visible;
-}
-
-ueb-link svg path {
-    /* flag stating whether or not the width of the link is below threshold or not */
-    --ueb-width-below-threshold : clamp(
-            /* min */
-            0,
-            /* input */
-            calc(var(--ueb-width-threshold) - (var(--ueb-to-x) - var(--ueb-from-x))),
-            /* max */
-            1);
-    transform        : skewX(calc(var(--ueb-width-below-threshold) * var(--ueb-link-skew) * -1rad));
-    transform-origin : 0 0;
-}

scss/ueblueprint-style.scss

@@ -0,0 +1,456 @@
+@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);
+    user-select: none;
+}
+
+.ueb-viewport-header {
+    display   : flex;
+    position  : absolute;
+    top       : 0;
+    right     : 0;
+    left      : 0;
+    height    : 1.5em;
+    background: rgba(0, 0, 0, 0.5);
+    z-index   : 1;
+}
+
+.ueb-viewport-zoom {
+    color: #4d4d4db7;
+}
+
+.ueb-viewport-body {
+    position       : relative;
+    height         : 30rem;
+    overflow       : hidden;
+    scrollbar-width: none;
+}
+
+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            :
+        /* Axis lines */
+        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)),
+        /* Dark bigger grid */
+        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),
+        /* Light grid */
+        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:
+        /* Axis lines */
+        100% var(--ueb-grid-line-actual-width),
+        var(--ueb-grid-line-actual-width) 100%,
+        /* Dark bigger grid */
+        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)),
+        /* Light grid */
+        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-zoom--.ueb,
+.ueb {
+    /* 16/16 */
+    --ueb-scale           : 1;
+    --ueb-grid-actual-size: var(--ueb-grid-size);
+}
+
+.ueb-zoom--1.ueb {
+    /* 14/16 */
+    --ueb-scale: 0.875;
+}
+
+.ueb-zoom--2.ueb {
+    /* 12/16 */
+    --ueb-scale: 0.75;
+}
+
+.ueb-zoom--3.ueb {
+    /* 10.8/16 */
+    --ueb-scale: 0.675;
+}
+
+.ueb-zoom--4.ueb {
+    /* 8/16 */
+    --ueb-scale           : 0.5;
+    --ueb-grid-actual-size: calc(var(--ueb-grid-size) * 2);
+}
+
+.ueb-zoom--5.ueb {
+    /* 6/16 */
+    --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 {
+    /* 12/16 */
+    --ueb-scale           : 0.2;
+    --ueb-grid-actual-size: calc(var(--ueb-grid-size) * 3);
+}
+
+.ueb-zoom--11.ueb {
+    /* 12/16 */
+    --ueb-scale           : 0.166666;
+    --ueb-grid-actual-size: calc(var(--ueb-grid-size) * 6);
+}
+
+.ueb-zoom--12.ueb {
+    /* 12/16 */
+    --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-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 black, 1px 4px 6px 0 rgba(0, 0, 0, 0.3);
+    will-change  : transform;
+}
+
+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 {
+    z-index: 1;
+}
+
+.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-content {
+    position     : relative;
+    padding      : 1px;
+    box-shadow   : inset 0 0 2px 0 black;
+    border-radius: var(--ueb-node-radius);
+    background   : rgba(0, 0, 0, 0.7);
+    overflow     : hidden;
+}
+
+.ueb-node-header {
+    padding      : 0.2em 0.7em;
+    box-shadow   : inset 0 1px 2px 0 #313631, inset 0 2px 0 0 #92c381;
+    border-radius: var(--ueb-node-radius) var(--ueb-node-radius) 0 0;
+    background   : linear-gradient(170deg, #5f815a 0%, #5f815a 50%, transparent 100%);
+    color        : #c0c0c0;
+    font-weight  : 600;
+    white-space  : nowrap;
+}
+
+.ueb-node-name {
+    background: radial-gradient(closest-side, rgba(0, 0, 0, 0.5) 0%, transparent 90%);
+    margin    : -0.1em -1.6em;
+    padding   : 0.1em 1.6em;
+}
+
+.ueb-node-body {
+    display    : flex;
+    padding    : 6px 0;
+    color      : white;
+    font-weight: 100;
+    white-space: nowrap;
+}
+
+.ueb-node-inputs {
+    margin-right: auto;
+    padding-left: 8px;
+}
+
+.ueb-node-outputs {
+    padding-right: 8px;
+}
+
+ueb-pin {
+    display: block;
+    padding: 1px 2px;
+}
+
+ueb-blueprint[data-drag-scrolling="false"] .ueb-grid {
+    cursor: default;
+}
+
+ueb-blueprint[data-drag-scrolling="false"][data-selecting="false"] ueb-node ueb-pin:hover {
+    background: var(--ueb-node-value-background);
+    cursor    : crosshair;
+}
+
+.ueb-node-value-icon {
+    display       : inline-block;
+    position      : relative;
+    width         : 0.85em;
+    height        : 0.85em;
+    vertical-align: baseline;
+    margin        : 0 0.4em -1px 0.1em;
+}
+
+.ueb-node-value-icon::before {
+    content      : "";
+    display      : block;
+    position     : absolute;
+    top          : 0;
+    right        : 0;
+    bottom       : 0;
+    left         : 0;
+    border       : 2px solid var(--ueb-node-value-color);
+    border-radius: 50%;
+}
+
+.ueb-node-value-fill::before {
+    background: var(--ueb-node-value-color);
+}
+
+.ueb-node-value-icon::after {
+    content      : "";
+    display      : block;
+    position     : absolute;
+    top          : calc(50% - 0.3em);
+    left         : calc(100% + 1px);
+    width        : 0;
+    height       : 0;
+    border-top   : 0.3em solid transparent;
+    border-bottom: 0.3em solid transparent;
+    border-left  : 0.3em solid var(--ueb-node-value-color);
+}
+
+.ueb-positioned {
+    --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:
+        /* Top */
+        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))),
+        /* Bottom */
+        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))),
+        /* Left */
+        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))),
+        /* Right */
+        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:
+        /* Top */
+        100% calc(1px / var(--ueb-scale)),
+        100% calc(3px / var(--ueb-scale)),
+        /* Bottom */
+        100% calc(1px / var(--ueb-scale)),
+        100% calc(3px / var(--ueb-scale)),
+        /* Left */
+        calc(1px / var(--ueb-scale)) 100%,
+        calc(3px / var(--ueb-scale)) 100%,
+        /* Right */
+        calc(1px / var(--ueb-scale)) 100%,
+        calc(3px / var(--ueb-scale)) 100%;
+    background-position:
+        /* Top */
+        0 calc(1px / var(--ueb-scale)), 0 0,
+        /* Bottom */
+        0 calc(100% - 1px / var(--ueb-scale)), 0 100%,
+        /* Left */
+        calc(1px / var(--ueb-scale)) 0, 0 0,
+        /* Right */
+        calc(100% - 1px / var(--ueb-scale)) 0, 100% 0;
+    background-repeat: no-repeat;
+}
+
+ueb-blueprint[data-selecting="true"] ueb-selector {
+    visibility: visible;
+    @extend .ueb-positioned;
+}
+
+ueb-selector>* {
+    visibility: visible;
+}
+
+ueb-link {
+    --ueb-width-threshold: 50;
+    display              : block;
+    border               : 1px solid red;
+}
+
+ueb-link svg {
+    width    : 100%;
+    height   : 100%;
+    transform: scaleY(clamp(-1, calc(var(--ueb-to-y) - var(--ueb-from-y)), 1));
+    overflow : visible;
+}
+
+ueb-link svg path {
+    /* flag stating whether or not the width of the link is below threshold or not */
+    --ueb-width-below-threshold: clamp(
+            /* min */
+            0,
+            /* input */
+            calc(var(--ueb-width-threshold) - (var(--ueb-to-x) - var(--ueb-from-x))),
+            /* max */
+            1);
+    transform       : skewX(calc(var(--ueb-width-below-threshold) * var(--ueb-link-skew) * -1rad));
+    transform-origin: 0 0;
+    stroke-width    : 2;
+    transition      : stroke-width 0.5s;
+}
+
+ueb-link svg path:hover {
+    stroke-width: 5;
+}