@eccenca/gui-elements 25.1.0-rc.0 → 25.1.0-rc.1

package/src/extensions/react-flow/_config.scss

@@ -8,9 +8,9 @@ $reactflow-node-font-size: $eccgui-size-typo-caption !default;
 $reactflow-node-border-width: 2 * $button-border-width !default;
 $reactflow-node-border-radius: $button-border-radius !default;
 $reactflow-edge-rendering: geometricprecision !default;
-$reactflow-edge-stroke-width-default: 2px !default;
-$reactflow-edge-stroke-width-hover: 2px !default;
-$reactflow-edge-stroke-width-selected: 2px !default;
+$reactflow-edge-stroke-width-default: 1px !default;
+$reactflow-edge-stroke-width-hover: 1px !default;
+$reactflow-edge-stroke-width-selected: 1px !default;
 $reactflow-edge-stroke-opacity-default: $eccgui-opacity-muted !default;
 $reactflow-edge-stroke-opacity-hover: $eccgui-opacity-narrow !default;
 $reactflow-edge-stroke-opacity-selected: $eccgui-opacity-regular !default;

package/src/extensions/react-flow/edges/EdgeLabel.tsx

@@ -81,9 +81,11 @@ export const EdgeLabel = memo(
                         })}
                     </div>
                 )}
-                <div className={`${eccgui}-graphviz__edge-label__text`} title={title}>
-                    {typeof text === "string" ? <OverflowText>{text}</OverflowText> : text}
-                </div>
+                {(title || text) && (
+                    <div className={`${eccgui}-graphviz__edge-label__text`} title={title??undefined}>
+                        {text && (typeof text === "string" ? <OverflowText>{text}</OverflowText> : text)}
+                    </div>
+                )}
                 {!!actions && <div className={`${eccgui}-graphviz__edge-label__aux`}>{actions}</div>}
             </div>
         );

package/src/extensions/react-flow/edges/_edges.scss

@@ -258,6 +258,7 @@ path.react-flow__edge-path-highlight {
     min-height: $reactflow-node-basesize;
     max-height: $reactflow-node-basesize * 13;
     padding: $eccgui-size-block-whitespace * 0.5;
+    overflow-y: auto;
 }
 
 // Arrows
@@ -288,6 +289,7 @@ path.react-flow__edge-path-highlight {
     width: auto;
     max-width: 20rem;
     height: 0.5 * $reactflow-node-largesize;
+    padding: 0 $eccgui-size-block-whitespace * 0.25;
     font-size: $reactflow-node-font-size;
     color: var(--#{$eccgui}-reactflow-edge-label-color, currentColor);
     background-color: var(--#{$eccgui}-reactflow-edge-label-color-background, #{$card-background-color});
@@ -330,7 +332,6 @@ path.react-flow__edge-path-highlight {
     display: inline-flex;
     flex-grow: 0;
     flex-shrink: 0;
-    margin-left: 2px;
     .#{$eccgui}-depiction__image {
         height: calc(#{0.5 * $reactflow-node-largesize} - 4px);
 
@@ -342,7 +343,7 @@ path.react-flow__edge-path-highlight {
 .#{$eccgui}-graphviz__edge-label__text {
     flex-grow: 1;
     flex-shrink: 1;
-    margin: 0 $eccgui-size-block-whitespace * 0.25;
+    margin: 0 0 0 $eccgui-size-block-whitespace * 0.25;
     overflow: hidden;
     text-overflow: ellipsis;
     text-align: center;

package/src/index.scss

@@ -9,6 +9,7 @@
 // == load default configuration ===============================================
 
 @import "./configuration/variables";
+@import "./configuration/customproperties"; // mirror config as custom properties
 
 // == Necessary imports from libraries =========================================