@dschz/solid-flow 0.2.2 → 0.2.4

package/dist/styles/index.css

@@ -1,48 +1,62 @@
+/* Container Styles */
 /* src/components/container/styles.css */
 .solid-flow__zoom {
   z-index: 4;
 }
+
 .solid-flow__viewport {
   transform-origin: 0 0;
   z-index: 2;
   pointer-events: none;
 }
+
 .solid-flow__viewport-portal {
   user-select: none;
 }
+
 .solid-flow__pane {
   z-index: 1;
+
   &.draggable {
     cursor: grab;
   }
+
   &.dragging {
     cursor: grabbing;
   }
+
   &.selection {
     cursor: pointer;
   }
 }
+
 .solid-flow__panel {
   position: absolute;
   z-index: 5;
   margin: 15px;
+
   &.top {
     top: 0;
   }
+
   &.bottom {
     bottom: 0;
   }
+
   &.left {
     left: 0;
   }
+
   &.right {
     right: 0;
   }
+
   &.center {
     left: 50%;
     transform: translateX(-50%);
   }
 }
+
 .solid-flow__nodes {
   z-index: 0;
   pointer-events: none;
@@ -53,6 +67,7 @@
 .a11y-hidden {
   display: none;
 }
+
 .a11y-live-msg {
   position: absolute;
   width: 1px;
@@ -65,50 +80,64 @@
   clip-path: inset(100%);
 }
 
+
+/* Graph Styles */
 /* src/components/graph/connection/styles.css */
 .solid-flow {
   --xy-connectionline-stroke-default: #b1b1b7;
   --xy-connectionline-stroke-width-default: 1;
 }
+
 .solid-flow.dark {
   --xy-connectionline-stroke-default: #b1b1b7;
   --xy-connectionline-stroke-width-default: 1;
 }
+
 connectionline {
   z-index: 1001;
   overflow: visible;
   position: absolute;
 }
+
 .solid-flow__connection {
   pointer-events: none;
+
   .animated {
     stroke-dasharray: 5;
     animation: dashdraw 0.5s linear infinite;
   }
 }
+
 .solid-flow__connection-path {
   fill: none;
   stroke: var(--xy-connectionline-stroke, var(--xy-connectionline-stroke-default));
-  stroke-width: var( --xy-connectionline-stroke-width, var(--xy-connectionline-stroke-width-default) );
+  stroke-width: var(
+    --xy-connectionline-stroke-width,
+    var(--xy-connectionline-stroke-width-default)
+  );
 }
 
 /* src/components/graph/edge/styles.css */
 .solid-flow {
   --xy-edge-label-background-color-default: #ffffff;
   --xy-edge-label-color-default: inherit;
+
   --xy-edge-stroke-default: #b1b1b7;
   --xy-edge-stroke-width-default: 1;
   --xy-edge-stroke-selected-default: #555;
 }
+
 .solid-flow.dark {
   --xy-edge-stroke-default: #3e3e3e;
   --xy-edge-stroke-width-default: 1;
   --xy-edge-stroke-selected-default: #727272;
 }
+
 .solid-flow__edgeupdater {
   cursor: move;
   pointer-events: all;
 }
+
 .solid-flow__edgelabel-renderer {
   position: absolute;
   width: 100%;
@@ -119,6 +148,7 @@ connectionline {
   top: 0;
   z-index: 0;
 }
+
 .solid-flow__edge-label {
   text-align: center;
   position: absolute;
@@ -128,53 +158,66 @@ connectionline {
   color: var(--xy-edge-label-color, var(--xy-edge-label-color-default));
   background: var(--xy-edge-label-background-color, var(--xy-edge-label-background-color-default));
 }
+
 .solid-flow__edge-path {
   stroke: var(--xy-edge-stroke, var(--xy-edge-stroke-default));
   stroke-width: var(--xy-edge-stroke-width, var(--xy-edge-stroke-width-default));
   fill: none;
 }
+
 .solid-flow__edges {
   position: absolute;
+
   svg {
     overflow: visible;
     position: absolute;
     pointer-events: none;
   }
 }
+
 .solid-flow__edge {
   pointer-events: visibleStroke;
+
   &.updating {
     .solid-flow__edge-path {
       stroke: #777;
     }
   }
+
   &.selectable {
     cursor: pointer;
   }
+
   &.animated path {
     stroke-dasharray: 5;
     animation: dashdraw 0.5s linear infinite;
   }
+
   &.animated path.solid-flow__edge-interaction {
     stroke-dasharray: none;
     animation: none;
   }
+
   &.inactive {
     pointer-events: none;
   }
+
   &.selected,
   &:focus,
   &:focus-visible {
     outline: none;
   }
+
   &.selected .solid-flow__edge-path,
   &.selectable:focus .solid-flow__edge-path,
   &.selectable:focus-visible .solid-flow__edge-path {
     stroke: var(--xy-edge-stroke-selected, var(--xy-edge-stroke-selected-default));
   }
+
   &.textwrapper {
     pointer-events: all;
   }
+
   &.text {
     font-size: 10px;
     pointer-events: none;
@@ -187,43 +230,52 @@ connectionline {
   --xy-handle-background-color-default: #1a192b;
   --xy-handle-border-color-default: #fff;
 }
+
 .solid-flow.dark {
   --xy-handle-background-color-default: #bebebe;
   --xy-handle-border-color-default: #1e1e1e;
 }
+
 .solid-flow__handle {
   position: absolute;
   pointer-events: none;
   min-width: 5px;
   min-height: 5px;
+
   width: 6px;
   height: 6px;
   background-color: var(--xy-handle-background-color, var(--xy-handle-background-color-default));
   border: 1px solid var(--xy-handle-border-color, var(--xy-handle-border-color-default));
   border-radius: 100%;
+
   &.connectingfrom {
     pointer-events: all;
   }
+
   &.connectionindicator {
     pointer-events: all;
     cursor: crosshair;
   }
 }
+
 .solid-flow__handle-left {
   top: 50%;
   left: 0;
   transform: translate(-50%, -50%);
 }
+
 .solid-flow__handle-right {
   top: 50%;
   right: 0;
   transform: translate(50%, -50%);
 }
+
 .solid-flow__handle-top {
   top: 0;
   left: 50%;
   transform: translate(-50%, -50%);
 }
+
 .solid-flow__handle-bottom {
   top: auto;
   left: 50%;
@@ -240,8 +292,10 @@ connectionline {
   --xy-node-boxshadow-hover-default: 0 1px 4px 1px rgba(0, 0, 0, 0.08);
   --xy-node-boxshadow-selected-default: 0 0 0 0.5px #1a192b;
   --xy-node-border-radius-default: 3px;
+
   --xy-node-border-selected-default: 1px solid #555;
 }
+
 .solid-flow.dark {
   --xy-node-color-default: #f8f8f8;
   --xy-node-border-default: 1px solid #3c3c3c;
@@ -250,6 +304,7 @@ connectionline {
   --xy-node-boxshadow-hover-default: 0 1px 4px 1px rgba(255, 255, 255, 0.08);
   --xy-node-boxshadow-selected-default: 0 0 0 0.5px #999;
 }
+
 .solid-flow__node {
   position: absolute;
   user-select: none;
@@ -257,20 +312,26 @@ connectionline {
   transform-origin: 0 0;
   box-sizing: border-box;
   cursor: default;
+
   &.selectable {
     cursor: pointer;
   }
+
   &.draggable {
     cursor: grab;
     pointer-events: all;
+
     &.dragging {
       cursor: grabbing;
     }
   }
+
+  /* TODO: Verify this class */
   &.parent {
     background-color: rgba(220, 220, 255, 0.4);
   }
 }
+
 .solid-flow__node-input,
 .solid-flow__node-default,
 .solid-flow__node-output,
@@ -283,10 +344,12 @@ connectionline {
   text-align: center;
   border: var(--xy-node-border, var(--xy-node-border-default));
   background-color: var(--xy-node-background-color, var(--xy-node-background-color-default));
+
   &.selectable {
     &:hover {
       box-shadow: var(--xy-node-boxshadow-hover, var(--xy-node-boxshadow-hover-default));
     }
+
     &.selected,
     &:focus,
     &:focus-visible {
@@ -296,8 +359,12 @@ connectionline {
     }
   }
 }
+
 .solid-flow__node-group {
-  background-color: var( --xy-node-group-background-color, var(--xy-node-group-background-color-default) );
+  background-color: var(
+    --xy-node-group-background-color,
+    var(--xy-node-group-background-color-default)
+  );
 }
 
 /* src/components/graph/plugins/background/styles.css */
@@ -306,29 +373,48 @@ connectionline {
   --xy-background-pattern-dots-color-default: #91919a;
   --xy-background-pattern-lines-color-default: #eee;
   --xy-background-pattern-cross-color-default: #e2e2e2;
+
   --background-color-default: #fff;
   --background-pattern-color-default: #ddd;
 }
+
 .solid-flow.dark {
   --xy-background-color-default: #141414;
   --xy-background-pattern-dots-color-default: #777;
   --xy-background-pattern-lines-color-default: #777;
   --xy-background-pattern-cross-color-default: #777;
 }
+
 .solid-flow__background {
   pointer-events: none;
   z-index: -1;
-  background-color: var( --xy-background-color, var(--xy-background-color-props, var(--xy-background-color-default)) );
+
+  background-color: var(
+    --xy-background-color,
+    var(--xy-background-color-props, var(--xy-background-color-default))
+  );
 }
+
 .solid-flow__background-pattern {
   &.dots {
-    fill: var( --xy-background-pattern-color-props, var(--xy-background-pattern-color, var(--xy-background-pattern-dots-color-default)) );
+    fill: var(
+      --xy-background-pattern-color-props,
+      var(--xy-background-pattern-color, var(--xy-background-pattern-dots-color-default))
+    );
   }
+
   &.lines {
-    stroke: var( --xy-background-pattern-color-props, var(--xy-background-pattern-color, var(--xy-background-pattern-lines-color-default)) );
+    stroke: var(
+      --xy-background-pattern-color-props,
+      var(--xy-background-pattern-color, var(--xy-background-pattern-lines-color-default))
+    );
   }
+
   &.cross {
-    stroke: var( --xy-background-pattern-color-props, var(--xy-background-pattern-color, var(--xy-background-pattern-cross-color-default)) );
+    stroke: var(
+      --xy-background-pattern-color-props,
+      var(--xy-background-pattern-color, var(--xy-background-pattern-cross-color-default))
+    );
   }
 }
 
@@ -341,6 +427,7 @@ connectionline {
   --xy-controls-button-border-color-default: #eee;
   --xy-controls-box-shadow-default: 0 0 2px 1px rgba(0, 0, 0, 0.08);
 }
+
 .solid-flow.dark {
   --xy-controls-button-background-color-default: #2b2b2b;
   --xy-controls-button-background-color-hover-default: #3e3e3e;
@@ -349,36 +436,64 @@ connectionline {
   --xy-controls-button-border-color-default: #5b5b5b;
   --xy-controls-box-shadow-default: 0 0 2px 1px rgba(0, 0, 0, 0.08);
 }
+
 .solid-flow__controls {
   display: flex;
   flex-direction: column;
   box-shadow: var(--xy-controls-box-shadow, var(--xy-controls-box-shadow-default));
+
   &.horizontal {
     flex-direction: row;
   }
+
   button {
     cursor: pointer;
     user-select: none;
     border: none;
+
     display: flex;
     justify-content: center;
     align-items: center;
     height: 26px;
     width: 26px;
     padding: 4px;
-    background: var( --xy-controls-button-background-color, var(--xy-controls-button-background-color-default) );
-    border-bottom: 1px solid var( --xy-controls-button-border-color-props, var(--xy-controls-button-border-color, var(--xy-controls-button-border-color-default)) );
-    color: var( --xy-controls-button-color-props, var(--xy-controls-button-color, var(--xy-controls-button-color-default)) );
+
+    background: var(
+      --xy-controls-button-background-color,
+      var(--xy-controls-button-background-color-default)
+    );
+    border-bottom: 1px solid
+      var(
+        --xy-controls-button-border-color-props,
+        var(--xy-controls-button-border-color, var(--xy-controls-button-border-color-default))
+      );
+    color: var(
+      --xy-controls-button-color-props,
+      var(--xy-controls-button-color, var(--xy-controls-button-color-default))
+    );
+
     &:hover {
-      background: var( --xy-controls-button-background-color-hover-props, var( --xy-controls-button-background-color-hover, var(--xy-controls-button-background-color-hover-default) ) );
-      color: var( --xy-controls-button-color-hover-props, var(--xy-controls-button-color-hover, var(--xy-controls-button-color-hover-default)) );
+      background: var(
+        --xy-controls-button-background-color-hover-props,
+        var(
+          --xy-controls-button-background-color-hover,
+          var(--xy-controls-button-background-color-hover-default)
+        )
+      );
+      color: var(
+        --xy-controls-button-color-hover-props,
+        var(--xy-controls-button-color-hover, var(--xy-controls-button-color-hover-default))
+      );
     }
+
     &:disabled {
       pointer-events: none;
+
       svg {
         fill-opacity: 0.4;
       }
     }
+
     svg {
       width: 100%;
       max-width: 12px;
@@ -386,6 +501,7 @@ connectionline {
       fill: currentColor;
     }
   }
+
   button:last-child {
     border-bottom: none;
   }
@@ -394,62 +510,98 @@ connectionline {
 /* src/components/graph/plugins/minimap/styles.css */
 .solid-flow {
   --xy-minimap-background-color-default: #fff;
+
   --xy-minimap-mask-background-color-default: rgba(240, 240, 240, 0.6);
   --xy-minimap-mask-stroke-color-default: transparent;
   --xy-minimap-mask-stroke-width-default: 1;
+
   --xy-minimap-node-background-color-default: #e2e2e2;
   --xy-minimap-node-stroke-color-default: transparent;
   --xy-minimap-node-stroke-width-default: 2;
 }
+
 .solid-flow.dark {
   --xy-minimap-background-color-default: #141414;
+
   --xy-minimap-mask-background-color-default: rgb(60, 60, 60, 0.6);
   --xy-minimap-mask-stroke-color-default: transparent;
   --xy-minimap-mask-stroke-width-default: 1;
+
   --xy-minimap-node-background-color-default: #2b2b2b;
   --xy-minimap-node-stroke-color-default: transparent;
   --xy-minimap-node-stroke-width-default: 2;
 }
+
 .solid-flow__minimap {
-  background: var( --xy-minimap-background-color-props, var(--xy-minimap-background-color, var(--xy-minimap-background-color-default)) );
+  background: var(
+    --xy-minimap-background-color-props,
+    var(--xy-minimap-background-color, var(--xy-minimap-background-color-default))
+  );
 }
+
 .solid-flow__minimap-svg {
   display: block;
 }
+
 .solid-flow__minimap-mask {
-  fill: var( --xy-minimap-mask-background-color-props, var(--xy-minimap-mask-background-color, var(--xy-minimap-mask-background-color-default)) );
-  stroke: var( --xy-minimap-mask-stroke-color-props, var(--xy-minimap-mask-stroke-color, var(--xy-minimap-mask-stroke-color-default)) );
-  stroke-width: var( --xy-minimap-mask-stroke-width-props, var(--xy-minimap-mask-stroke-width, var(--xy-minimap-mask-stroke-width-default)) );
+  fill: var(
+    --xy-minimap-mask-background-color-props,
+    var(--xy-minimap-mask-background-color, var(--xy-minimap-mask-background-color-default))
+  );
+  stroke: var(
+    --xy-minimap-mask-stroke-color-props,
+    var(--xy-minimap-mask-stroke-color, var(--xy-minimap-mask-stroke-color-default))
+  );
+  stroke-width: var(
+    --xy-minimap-mask-stroke-width-props,
+    var(--xy-minimap-mask-stroke-width, var(--xy-minimap-mask-stroke-width-default))
+  );
 }
+
 .solid-flow__minimap-node {
-  fill: var( --xy-minimap-node-background-color-props, var(--xy-minimap-node-background-color, var(--xy-minimap-node-background-color-default)) );
-  stroke: var( --xy-minimap-node-stroke-color-props, var(--xy-minimap-node-stroke-color, var(--xy-minimap-node-stroke-color-default)) );
-  stroke-width: var( --xy-minimap-node-stroke-width-props, var(--xy-minimap-node-stroke-width, var(--xy-minimap-node-stroke-width-default)) );
+  fill: var(
+    --xy-minimap-node-background-color-props,
+    var(--xy-minimap-node-background-color, var(--xy-minimap-node-background-color-default))
+  );
+  stroke: var(
+    --xy-minimap-node-stroke-color-props,
+    var(--xy-minimap-node-stroke-color, var(--xy-minimap-node-stroke-color-default))
+  );
+  stroke-width: var(
+    --xy-minimap-node-stroke-width-props,
+    var(--xy-minimap-node-stroke-width, var(--xy-minimap-node-stroke-width-default))
+  );
 }
 
 /* src/components/graph/plugins/nodeResizer/styles.css */
 .solid-flow {
   --xy-resize-background-color-default: #3367d9;
 }
+
 .solid-flow__resize-control {
   position: absolute;
+
   &.left,
   &.right {
     cursor: ew-resize;
   }
+
   &.top,
   &.bottom {
     cursor: ns-resize;
   }
+
   &.top.left,
   &.bottom.right {
     cursor: nwse-resize;
   }
+
   &.bottom.left,
   &.top.right {
     cursor: nesw-resize;
   }
 }
+
 .solid-flow__resize-control.handle {
   width: 4px;
   height: 4px;
@@ -457,39 +609,50 @@ connectionline {
   border-radius: 1px;
   background-color: var(--xy-resize-background-color, var(--xy-resize-background-color-default));
   transform: translate(-50%, -50%);
+
   &.left {
     left: 0;
     top: 50%;
   }
+
   &.right {
     left: 100%;
     top: 50%;
   }
+
   &.top {
     left: 50%;
     top: 0;
   }
+
   &.bottom {
     left: 50%;
     top: 100%;
   }
+
   &.top.left {
     left: 0;
   }
+
   &.bottom.left {
     left: 0;
   }
+
   &.top.right {
     left: 100%;
   }
+
   &.bottom.right {
     left: 100%;
   }
 }
+
+/* line styles */
 .solid-flow__resize-control.line {
   border-color: var(--xy-resize-background-color, var(--xy-resize-background-color-default));
   border-width: 0;
   border-style: solid;
+
   &.left,
   &.right {
     width: 1px;
@@ -497,6 +660,7 @@ connectionline {
     transform: translate(-50%, 0);
     top: 0;
   }
+
   &.top,
   &.bottom {
     width: 100%;
@@ -504,18 +668,22 @@ connectionline {
     transform: translate(0, -50%);
     left: 0;
   }
+
   &.left {
     left: 0;
     border-left-width: 1px;
   }
+
   &.right {
     left: 100%;
     border-right-width: 1px;
   }
+
   &.top {
     top: 0;
     border-top-width: 1px;
   }
+
   &.bottom {
     top: 100%;
     border-bottom-width: 1px;
@@ -527,10 +695,12 @@ connectionline {
   --xy-selection-background-color-default: rgba(0, 89, 220, 0.08);
   --xy-selection-border-default: 1px dotted rgba(0, 89, 220, 0.8);
 }
+
 .solid-flow.dark {
   --xy-selection-background-color-default: rgba(200, 200, 220, 0.08);
   --xy-selection-border-default: 1px dotted rgba(200, 200, 220, 0.8);
 }
+
 .solid-flow__selection-wrapper {
   position: absolute;
   top: 0;
@@ -538,38 +708,49 @@ connectionline {
   z-index: 2000;
   pointer-events: all;
 }
+
 .solid-flow__selection {
   background: var(--xy-selection-background-color, var(--xy-selection-background-color-default));
   border: var(--xy-selection-border, var(--xy-selection-border-default));
+
   position: absolute;
   top: 0;
   left: 0;
   z-index: 6;
+
   &:focus,
   &:focus-visible {
     outline: none;
   }
 }
 
+
+/* Utility Styles */
 /* src/components/utility/styles.css */
 .solid-flow {
   --xy-attribution-background-color-default: rgba(255, 255, 255, 0.5);
 }
+
 .solid-flow.dark {
   --xy-attribution-background-color-default: rgba(150, 150, 150, 0.25);
 }
+
 .solid-flow__attribution {
   font-size: 10px;
-  background: var( --xy-attribution-background-color, var(--xy-attribution-background-color-default) );
+  background: var(
+    --xy-attribution-background-color,
+    var(--xy-attribution-background-color-default)
+  );
   padding: 2px 3px;
   margin: 0;
+
   a {
     text-decoration: none;
     color: #999;
   }
 }
 
-/* src/styles/style.css */
+
 .solid-flow__container {
   position: absolute;
   width: 100%;
@@ -577,14 +758,17 @@ connectionline {
   top: 0;
   left: 0;
 }
+
 .solid-flow {
   width: 100%;
   height: 100%;
   overflow: hidden;
   position: relative;
   z-index: 0;
+
   background-color: var(--xy-background-color, var(--xy-background-color-default));
 }
+
 @keyframes dashdraw {
   from {
     stroke-dashoffset: 10;