(compartment())
@@ -377,7 +378,7 @@ export const CodeEditor = ({
}
if (disabled) {
- view.dom.className += ` ${eccgui}-disabled`;
+ view.dom.classList.add(`${eccgui}-disabled`);
}
if (intent) {
@@ -432,7 +433,14 @@ export const CodeEditor = ({
}, [tabIntentSize])
React.useEffect(() => {
- updateExtension(EditorView?.editable.of(!disabled), disabledCompartment.current)
+ updateExtension(EditorView?.editable.of(!disabled), disabledCompartment.current);
+ if (view?.dom) {
+ if (disabled) {
+ view.dom.classList.add(`${eccgui}-disabled`);
+ } else {
+ view.dom.classList.remove(`${eccgui}-disabled`);
+ }
+ }
}, [disabled])
React.useEffect(() => {
diff --git a/src/extensions/react-flow/_config.scss b/src/extensions/react-flow/_config.scss
index 296cfadc..34b1b8d1 100644
--- a/src/extensions/react-flow/_config.scss
+++ b/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;
diff --git a/src/extensions/react-flow/edges/EdgeLabel.tsx b/src/extensions/react-flow/edges/EdgeLabel.tsx
index 767146a2..5ebed73a 100644
--- a/src/extensions/react-flow/edges/EdgeLabel.tsx
+++ b/src/extensions/react-flow/edges/EdgeLabel.tsx
@@ -81,9 +81,11 @@ export const EdgeLabel = memo(
})}
)}
-
- {typeof text === "string" ? {text} : text}
-
+ {(title || text) && (
+
+ {text && (typeof text === "string" ? {text} : text)}
+
+ )}
{!!actions && {actions}
}
);
diff --git a/src/extensions/react-flow/edges/_edges.scss b/src/extensions/react-flow/edges/_edges.scss
index 9583398b..e1ab9741 100644
--- a/src/extensions/react-flow/edges/_edges.scss
+++ b/src/extensions/react-flow/edges/_edges.scss
@@ -294,6 +294,7 @@ path.react-flow__edge-path-highlight {
border: 0.5 * $reactflow-node-border-width solid transparent;
border-color: var(--#{$eccgui}-reactflow-edge-label-color, currentColor);
border-radius: $reactflow-node-border-radius;
+ padding: 0 $eccgui-size-block-whitespace * 0.25;
&.#{$eccgui}-graphviz__edge-label--loose {
background-color: transparent;
@@ -330,7 +331,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 +342,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;