@eccenca/gui-elements 24.1.0-rc.3 → 24.1.0-rc.4

package/src/components/Menu/MenuItem.tsx

@@ -5,6 +5,7 @@ import { openInNewTab } from "../../common/utils/openInNewTab";
 import { CLASSPREFIX as eccgui } from "../../configuration/constants";
 import { ValidIconName } from "../Icon/canonicalIconNames";
 import Icon from "../Icon/Icon";
+import Tooltip from "../Tooltip/Tooltip";
 
 import { TestIconProps } from "./../Icon/TestIcon";
 
@@ -15,16 +16,41 @@ export interface MenuItemProps
      * If set the icon is diplayed on the left side of the menu item.
      */
     icon?: ValidIconName | string[] | React.ReactElement<TestIconProps>;
+    /**
+     * Submenu.
+     */
     children?: React.ReactNode;
+    /**
+     * Tooltip, but only added to the label, not to the full menu item.
+     */
+    tooltip?: string | JSX.Element;
 }
 
 /**
  * Single item, used as child inside `Menu`.
  */
-export const MenuItem = ({ children, className = "", icon, onClick, href, ...restProps }: MenuItemProps) => {
+export const MenuItem = ({
+    children,
+    className = "",
+    icon,
+    onClick,
+    href,
+    text,
+    tooltip,
+    ...restProps
+}: MenuItemProps) => {
     return (
         <BlueprintMenuItem
             {...restProps}
+            text={
+                tooltip ? (
+                    <Tooltip content={tooltip} fill>
+                        {text}
+                    </Tooltip>
+                ) : (
+                    text
+                )
+            }
             href={href}
             onClick={(e: React.MouseEvent<HTMLElement>) =>
                 openInNewTab(e as React.MouseEvent<HTMLAnchorElement>, onClick, href)

package/src/components/Menu/menu.scss

@@ -48,6 +48,7 @@ $menu-background-color: transparent !default;
 @import "~@blueprintjs/core/src/components/menu/menu";
 
 .#{$ns}-menu {
+    min-width: auto;
     padding: 0;
 
     .#{$ns}-popover2-content > & {

package/src/components/OverviewItem/overviewitem.scss

@@ -193,7 +193,10 @@ $eccgui-size-overviewitem-line-typo-large-lineheight: $eccgui-size-typo-subtitle
 
     .#{$eccgui}-overviewitem__item:hover &,
     .#{$eccgui}-overviewitem__item:focus &,
-    .#{$eccgui}-overviewitem__item:active & {
+    .#{$eccgui}-overviewitem__item:active &,
+    &:focus-within,
+    &:has(.#{$ns}-active),
+    &:has(.#{$ns}-popover-open) {
         display: flex;
     }
 }

package/src/components/Switch/Switch.tsx

@@ -1,26 +1,45 @@
-import React, { memo, SyntheticEvent } from "react";
-import { Switch as BlueprintSwitch, SwitchProps as BlueprintSwitchProps } from "@blueprintjs/core";
+import React, { memo } from "react";
+import {
+    Classes as BlueprintClasses,
+    Switch as BlueprintSwitch,
+    SwitchProps as BlueprintSwitchProps,
+} from "@blueprintjs/core";
 
 import { CLASSPREFIX as eccgui } from "../../configuration/constants";
+import { Label } from "../Label/Label";
 
 export interface SwitchProps extends Omit<BlueprintSwitchProps, "onChange"> {
     /**
      * Event handler for changed state.
      */
-    onChange?: (value: boolean) => any;
+    onChange?: (value: boolean) => void;
     /**
      * class names
      */
     className?: string;
 }
 
-export const Switch = ({ onChange, className, ...otherProps }: SwitchProps) => {
-    const handleChange = (e: SyntheticEvent<HTMLInputElement>) => {
-        const checked = !!(e as any).target?.checked;
-        onChange && onChange(checked);
+export const Switch = ({ onChange, className, label, ...otherProps }: SwitchProps) => {
+    const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+        if (onChange) {
+            onChange(!!e.target?.checked);
+        }
     };
 
-    return <BlueprintSwitch className={`${eccgui}-switch ${className}`} {...otherProps} onChange={handleChange} />;
+    return (
+        <BlueprintSwitch
+            className={`${eccgui}-switch ${className ?? ""} ${
+                label && !otherProps.labelElement ? BlueprintClasses.INLINE : ""
+            }`}
+            labelElement={
+                label ? (
+                    <Label text={label} isLayoutForElement="span" disabled={otherProps.disabled} inline />
+                ) : undefined
+            }
+            {...otherProps}
+            onChange={handleChange}
+        />
+    );
 };
 
 export default memo(Switch);

package/src/components/Tag/TagList.tsx

@@ -10,11 +10,11 @@ function TagList({ children, className = "", label = "", ...otherProps }: TagLis
     const tagList = (
         <ul className={`${eccgui}-tag__list` + (className && !label ? " " + className : "")} {...otherProps}>
             {React.Children.map(children, (child, i) => {
-                return (
+                return child ? (
                     <li className={`${eccgui}-tag__list-item`} key={"tagitem_" + i}>
                         {child}
                     </li>
-                );
+                ) : null;
             })}
         </ul>
     );

package/src/extensions/codemirror/CodeMirror.tsx

@@ -1,7 +1,6 @@
 import React, { useMemo, useRef } from "react";
 import { defaultKeymap, indentWithTab } from "@codemirror/commands";
 import { foldKeymap } from "@codemirror/language";
-import { lintGutter } from "@codemirror/lint";
 import { EditorState, Extension } from "@codemirror/state";
 import { DOMEventHandlers, EditorView, KeyBinding, keymap, Rect, ViewUpdate } from "@codemirror/view";
 import { minimalSetup } from "codemirror";
@@ -29,6 +28,7 @@ import {
     adaptedHighlightSpecialChars,
     adaptedLineNumbers,
     adaptedPlaceholder,
+    adaptedLintGutter,
 } from "./tests/codemirrorTestHelper";
 import { ExtensionCreator } from "./types";
 
@@ -212,7 +212,7 @@ export const CodeEditor = ({
             return [];
         }
 
-        const values = [lintGutter()];
+        const values = [adaptedLintGutter()];
 
         const linters = ModeLinterMap.get(mode);
         if (linters) {
@@ -320,24 +320,26 @@ export const CodeEditor = ({
             parent: parent.current,
         });
 
-        if (height) {
-            view.dom.style.height = typeof height === "string" ? height : `${height}px`;
-        }
+        if (view?.dom) {
+            if (height) {
+                view.dom.style.height = typeof height === "string" ? height : `${height}px`;
+            }
 
-        if (disabled) {
-            view.dom.className += ` ${eccgui}-disabled`;
-        }
+            if (disabled) {
+                view.dom.className += ` ${eccgui}-disabled`;
+            }
 
-        if (intent) {
-            view.dom.className += ` ${eccgui}-intent--${intent}`;
-        }
+            if (intent) {
+                view.dom.className += ` ${eccgui}-intent--${intent}`;
+            }
 
-        if (autoFocus) {
-            view.focus();
-        }
+            if (autoFocus) {
+                view.focus();
+            }
 
-        if (setEditorView) {
-            setEditorView(view);
+            if (setEditorView) {
+                setEditorView(view);
+            }
         }
 
         return () => {

package/src/extensions/codemirror/tests/codemirrorTestHelper.ts

@@ -10,6 +10,7 @@
 import { EditorView, placeholder, highlightSpecialChars, lineNumbers, highlightActiveLine } from "@codemirror/view";
 import { syntaxHighlighting, foldGutter, codeFolding } from "@codemirror/language";
 import { Extension } from "@codemirror/state";
+import { lintGutter } from "@codemirror/lint";
 
 /** placeholder extension, current error '_view.placeholder is not a function' */
 export const adaptedPlaceholder = (text?: string) =>
@@ -55,3 +56,6 @@ export const adaptedFoldGutter = (props?: any) =>
 
 export const adaptedCodeFolding = (props?: any) =>
     typeof codeFolding === "function" ? codeFolding(props) : emptyExtension;
+
+export const adaptedLintGutter = (props?: any) =>
+    typeof lintGutter === "function" ? lintGutter(props) : emptyExtension;

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

@@ -15,3 +15,4 @@ $reactflow-edge-stroke-color-selected: $eccgui-color-accent !default;
 $reactflow-transition-time: 0.25s !default;
 $reactflow-transition-function: "" !default;
 $reactflow-transition-anglestart: -90deg;
+$reactflow-cursor-delimiter-offset: 0.9 * $eccgui-size-block-whitespace;

package/src/extensions/react-flow/nodes/NodeContent.tsx

@@ -22,11 +22,16 @@ type NodeContentHandleNextProps = HandleNextProps;
 
 export type NodeContentHandleProps = NodeContentHandleLegacyProps | NodeContentHandleNextProps;
 
-type NodeDimensions = {
-    width: number;
-    height: number;
+export type NodeDimensions = {
+    width?: number;
+    height?: number;
 };
 
+type ResizeDirections =
+    | { right: true; bottom?: false }
+    | { right?: false; bottom: true }
+    | { right: true; bottom: true };
+
 type IntroductionTime = {
     /**
      * The delay time in ms before the introduction animation is displayed.
@@ -210,6 +215,10 @@ export interface NodeContentProps<NODE_DATA, NODE_CONTENT_PROPS = any>
      * width and height dimensions of the node (Optional)
      */
     nodeDimensions?: NodeDimensions;
+    /** if node is resizable, this allows direction of specificity */
+    resizeDirections?: ResizeDirections;
+    /** determines how much width a node can be resized to */
+    resizeMaxDimensions?: Partial<NodeDimensions>;
 }
 
 interface MemoHandlerLegacyProps extends HandleProps {
@@ -317,20 +326,24 @@ export function NodeContent<CONTENT_PROPS = any>({
     //handles = defaultHandles(),
     adaptHeightForHandleMinCount,
     adaptSizeIncrement = 15,
+    // FIXME: getMinimalTooltipData is just being ignored, only used in `NodeDefault`
     getMinimalTooltipData = getDefaultMinimalTooltipData,
     style = {},
     showUnconnectableHandles = false,
     animated = false,
     introductionTime = 0,
+    // resizing
     onNodeResize,
     nodeDimensions,
+    resizeDirections = { bottom: true, right: true },
+    resizeMaxDimensions,
     // forwarded props
     targetPosition = Position.Left,
     sourcePosition = Position.Right,
     isConnectable = true,
     selected,
     letPassWheelEvents = false,
-    // businessData is just being ignored
+    // FIXME: businessData is just being ignored
     businessData,
     // other props for DOM element
     ...otherDomProps
@@ -341,11 +354,16 @@ export function NodeContent<CONTENT_PROPS = any>({
 
     const { handles = defaultHandles(flowVersionCheck), ...otherProps } = otherDomProps;
 
-    const isResizeable = !!onNodeResize && minimalShape === "none";
-    const [width, setWidth] = React.useState<number>(nodeDimensions?.width ?? 0);
-    const [height, setHeight] = React.useState<number>(nodeDimensions?.height ?? 0);
+    const hasValidResizeDirection = resizeDirections.bottom || resizeDirections.right;
+    const isResizable = typeof onNodeResize === "function" && hasValidResizeDirection && minimalShape === "none";
+
+    const [width, setWidth] = React.useState<number | undefined>(nodeDimensions?.width ?? undefined);
+    const [height, setHeight] = React.useState<number | undefined>(nodeDimensions?.height ?? undefined);
+    // Keeps the initial size of the element
+    const originalSize = React.useRef<NodeDimensions>({})
+
     let zoom = 1;
-    if (isResizeable)
+    if (isResizable)
         try {
             [, , zoom] =
                 flowVersionCheck === "legacy"
@@ -371,29 +389,71 @@ export function NodeContent<CONTENT_PROPS = any>({
     handleStack[Position.Left] =
         flowVersionCheck === "legacy" ? ([] as NodeContentHandleLegacyProps[]) : ([] as NodeContentHandleNextProps[]);
 
-    // initial dimension before resize
+    const saveOriginalSize = () => {
+        originalSize.current.width = nodeContentRef.current.offsetWidth as number;
+        originalSize.current.height = nodeContentRef.current.offsetHeight as number;
+    }
+
     React.useEffect(() => {
-        if (!!onNodeResize && minimalShape === "none") {
-            if (!nodeDimensions) {
-                setWidth(nodeContentRef.current.offsetWidth);
-                setHeight(nodeContentRef.current.offsetHeight);
-                onNodeResize({
-                    height: nodeContentRef.current.offsetHeight,
-                    width: nodeContentRef.current.offsetWidth,
-                });
-            }
-            nodeContentRef.current.className = nodeContentRef.current.className + " is-resizeable";
+        if(nodeContentRef.current && !(originalSize.current.width || originalSize.current.height)) {
+            saveOriginalSize();
         }
-    }, [nodeContentRef, onNodeResize, minimalShape, nodeDimensions]);
+    }, [!!nodeContentRef.current, !(originalSize.current.width || originalSize.current.height)])
 
-    // update node dimensions when resized
+    // Update width and height when node dimensions parameters has changed
     React.useEffect(() => {
-        if (nodeDimensions) {
-            setWidth(nodeDimensions.width);
-            setHeight(nodeDimensions.height);
+        const updateWidth = nodeDimensions?.width ? validateWidth(nodeDimensions?.width) : undefined;
+        const updateHeight = nodeDimensions?.height ? validateHeight(nodeDimensions?.height) : undefined;
+        setWidth(updateWidth);
+        setHeight(updateHeight);
+        if (!nodeDimensions?.width && !nodeDimensions?.height) {
+            // provoke new measuring if no dimensions are set
+            saveOriginalSize();
         }
     }, [nodeDimensions]);
 
+    const isResizingActive = React.useCallback((): boolean => {
+        const currentClassNames = nodeContentRef.current.classList;
+        return resizeDirections.right === currentClassNames.contains("is-resizable-horizontal") &&
+            resizeDirections.bottom === currentClassNames.contains("is-resizable-vertical");
+    }, [])
+
+    // force default size when resizing is activated but no dimensions are set
+    React.useEffect(() => {
+        const resizingActive = isResizingActive();
+
+        if (isResizable && !resizingActive) {
+            if (!width || !height) {
+                const newWidth = validateWidth(width ?? originalSize.current?.width as number);
+                const newHeight = validateHeight(height ?? originalSize.current?.height as number);
+                setWidth(newWidth);
+                setHeight(newHeight);
+            }
+        }
+    }, [nodeContentRef.current, onNodeResize, minimalShape, resizeDirections?.bottom, resizeDirections?.right, width, height]); // need to be done everytime a property is changed and the element is re-rendered, otherwise the resizing class is lost
+
+    // conditional enhancements for activated resizing
+    React.useEffect(() => {
+        const currentClassNames = nodeContentRef.current.classList;
+        const resizingActive = isResizingActive();
+
+        if (isResizable && !resizingActive) {
+            if (currentClassNames.contains("is-resizable-horizontal")) {
+                nodeContentRef.current.classList.remove("is-resizable-horizontal");
+            }
+            if (currentClassNames.contains("is-resizable-vertical")) {
+                nodeContentRef.current.classList.remove("is-resizable-vertical");
+            }
+
+            if (resizeDirections.right) {
+                nodeContentRef.current.classList.add("is-resizable-horizontal");
+            }
+            if (resizeDirections.bottom) {
+                nodeContentRef.current.classList.add("is-resizable-vertical");
+            }
+        }
+    }); // need to be done everytime a property is changed and the element is re-rendered, otherwise the resizing class is lost
+
     // remove introduction class
     React.useEffect(() => {
         if (nodeContentRef && introductionTime) {
@@ -460,7 +520,14 @@ export function NodeContent<CONTENT_PROPS = any>({
     );
 
     const resizableStyles =
-        !!onNodeResize === true && minimalShape === "none" && width + height > 0 ? { width, height } : {};
+        isResizable && (width ?? 0) + (height ?? 0) > 0
+            ? {
+                  width,
+                  height,
+                  maxWidth: resizeMaxDimensions?.width ?? undefined,
+                  maxHeight: resizeMaxDimensions?.height ?? undefined,
+              }
+            : {};
 
     const introductionStyles =
         introductionTime && !introductionDone
@@ -470,6 +537,7 @@ export function NodeContent<CONTENT_PROPS = any>({
                   }ms`,
               } as React.CSSProperties)
             : {};
+
     const nodeContent = (
         <>
             <section
@@ -590,34 +658,80 @@ export function NodeContent<CONTENT_PROPS = any>({
         </>
     );
 
-    const resizableNode = () => (
-        <Resizable
-            className={`${eccgui}-graphviz__node__resizer`}
-            handleWrapperClass={`${eccgui}-graphviz__node__resizer--cursorhandles nodrag`}
-            size={{ height, width }}
-            enable={{ bottomRight: true }}
-            scale={zoom}
-            onResize={(_0, _1, _2, d) => {
-                if (nodeContentRef.current) {
-                    nodeContentRef.current.style.width = width + d.width + "px";
-                    nodeContentRef.current.style.height = height + d.height + "px";
+    const validateWidth = (resizedWidth: number): number | undefined => {
+        // only allow value if resize direction is allowed
+        if (!resizeDirections.right) {
+            return undefined;
+        }
+        // we need to check because there is probably a min value defined via CSS
+        const min = parseFloat(getComputedStyle(nodeContentRef.current).getPropertyValue("min-width"));
+        // we need to check for a given max value
+        const max = resizeMaxDimensions?.width ?? Infinity;
+        const validatedWidth = Math.max(Math.min(resizedWidth, max), min);
+        return validatedWidth;
+    };
+
+    const validateHeight = (resizedHeight: number): number | undefined => {
+        if (!resizeDirections.bottom) {
+            return undefined;
+        }
+        // we need to check because there is probably a min value defined via CSS
+        const min = parseFloat(getComputedStyle(nodeContentRef.current).getPropertyValue("min-height"));
+        const max = resizeMaxDimensions?.height ?? Infinity;
+        const validatedHeight = Math.max(Math.min(resizedHeight, max), min);
+        return validatedHeight;
+    };
+
+    const resizableNode = () => {
+        const size = { height: height ?? "auto", width: width ?? "auto" };
+        return (
+            <Resizable
+                className={
+                    `${eccgui}-graphviz__node__resizer` +
+                    (resizeDirections.right ? ` ${eccgui}-graphviz__node__resizer--right` : "") +
+                    (resizeDirections.bottom ? ` ${eccgui}-graphviz__node__resizer--bottom` : "")
                 }
-            }}
-            onResizeStop={(_0, _1, _2, d) => {
-                setWidth(width + d.width);
-                setHeight(height + d.height);
-                onNodeResize &&
-                    onNodeResize({
-                        height: height + d.height,
-                        width: width + d.width,
-                    });
-            }}
-        >
-            {nodeContent}
-        </Resizable>
-    );
+                handleWrapperClass={`${eccgui}-graphviz__node__resizer--cursorhandles` + " nodrag"}
+                size={size}
+                maxHeight={resizeMaxDimensions?.height ?? undefined}
+                maxWidth={resizeMaxDimensions?.width ?? undefined}
+                enable={resizeDirections.bottom && resizeDirections.right ? { bottomRight: true } : resizeDirections}
+                scale={zoom}
+                onResize={(_0, _1, _2, d) => {
+                    if (nodeContentRef.current) {
+                        const nextWidth = resizeDirections.right
+                            ? (width ?? originalSize.current.width ?? 0) + d.width
+                            : undefined;
+                        const nextHeight = resizeDirections.bottom
+                            ? (height ?? originalSize.current.height ?? 0) + d.height
+                            : undefined;
+                        if (nextWidth) {
+                            nodeContentRef.current.style.width = `${nextWidth}px`;
+                        }
+                        if (nextHeight) {
+                            nodeContentRef.current.style.height = `${nextHeight}px`;
+                        }
+                    }
+                }}
+                onResizeStop={(_0, _1, _2, d) => {
+                    const nextWidth = validateWidth((width ?? originalSize.current.width ?? 0) + d.width);
+                    const nextHeight = validateHeight((height ?? originalSize.current.height ?? 0) + d.height);
+                    setWidth(nextWidth);
+                    setHeight(nextHeight);
+                    if (onNodeResize) {
+                        onNodeResize({
+                            height: nextHeight,
+                            width: nextWidth,
+                        });
+                    }
+                }}
+            >
+                {nodeContent}
+            </Resizable>
+        );
+    };
 
-    return isResizeable ? resizableNode() : nodeContent;
+    return isResizable ? resizableNode() : nodeContent;
 }
 
 const evaluateHighlightColors = (
@@ -644,7 +758,7 @@ const evaluateHighlightColors = (
                     let customColor = Color("#ffffff");
                     try {
                         customColor = Color(color);
-                    } catch (ex) {
+                    } catch {
                         // eslint-disable-next-line no-console
                         console.warn("Received invalid color for highlight: " + color);
                     }

package/src/extensions/react-flow/nodes/_nodes.scss

@@ -49,6 +49,38 @@
     &:hover {
         box-shadow: 0 0 0 6 * $reactflow-node-border-width rgba($reactflow-edge-stroke-color-selected, 0.05);
     }
+
+    &.is-resizable-vertical {
+        max-height: unset;
+    }
+}
+
+.#{$eccgui}-graphviz__node--tiny {
+    width: $reactflow-node-basesize * 4;
+    min-height: $reactflow-node-basesize;
+    max-height: $reactflow-node-basesize * 4;
+}
+
+.#{$eccgui}-graphviz__node--small {
+    width: $reactflow-node-basesize * 5;
+    min-height: $reactflow-node-basesize;
+    max-height: $reactflow-node-basesize * 8;
+}
+
+.#{$eccgui}-graphviz__node--medium {
+    width: $reactflow-node-basesize * 8;
+    min-height: $reactflow-node-basesize;
+    max-height: $reactflow-node-basesize * 13;
+}
+
+.#{$eccgui}-graphviz__node--large {
+    width: $reactflow-node-basesize * 13;
+    min-height: $reactflow-node-basesize;
+    max-height: $reactflow-node-basesize * 13;
+}
+
+.#{$eccgui}-graphviz__node--fullwidth {
+    width: 100%;
 }
 
 .#{$eccgui}-graphviz__node--minimal-rectangular,
@@ -200,54 +232,58 @@
     background-color: $reactflow-node-background-color;
 }
 
-// Node sizes
+// Node Resizer
 
-.#{$eccgui}-graphviz__node__resizer,
-.#{$eccgui}-graphviz__node.is-resizeable {
+.#{$eccgui}-graphviz__node.is-resizable-horizontal,
+.#{$eccgui}-graphviz__node.is-resizable-vertical {
     min-width: 2.5 * $reactflow-node-basesize;
     min-height: 2.5 * $reactflow-node-basesize;
 }
 
+.#{$eccgui}-graphviz__node__resizer--cursorhandles {
+    position: absolute;
+    height: 0;
+    width: 0;
+    bottom: 0;
+    right: 0;
+    overflow: visible;
+    display: none;
+
+    & > div {
+        overflow: visible;
+        z-index: 0 !important;
+        height: $reactflow-cursor-delimiter-offset * 3 !important;
+        width: $reactflow-cursor-delimiter-offset * 3 !important;
+        top: unset !important;
+        left: unset !important;
+        bottom: -1 * $reactflow-cursor-delimiter-offset !important;
+        right: -1 * $reactflow-cursor-delimiter-offset !important;
+        border-bottom: $reactflow-node-border-width solid $reactflow-node-border-color;
+        border-right: $reactflow-node-border-width solid $reactflow-node-border-color;
+
+        .#{$eccgui}-graphviz__node__resizer--right:not(.#{$eccgui}-graphviz__node__resizer--bottom) & {
+            bottom: 0 !important;
+            border-bottom: none;
+        }
+        .#{$eccgui}-graphviz__node__resizer--bottom:not(.#{$eccgui}-graphviz__node__resizer--right) & {
+            right: 0 !important;
+            border-right: none;
+        }
+    }
+}
+
 .#{$eccgui}-graphviz__node__resizer {
+    min-width: 2.5 * $reactflow-node-basesize;
+    min-height: 2.5 * $reactflow-node-basesize;
+
     .selected &,
     &:hover {
         .#{$eccgui}-graphviz__node__resizer--cursorhandles {
-            & > div {
-                overflow: auto;
-                resize: both;
-            }
+            display: block;
         }
     }
 }
 
-.#{$eccgui}-graphviz__node--tiny:not(.is-resizeable) {
-    width: $reactflow-node-basesize * 4;
-    min-height: $reactflow-node-basesize;
-    max-height: $reactflow-node-basesize * 4;
-}
-
-.#{$eccgui}-graphviz__node--small:not(.is-resizeable) {
-    width: $reactflow-node-basesize * 5;
-    min-height: $reactflow-node-basesize;
-    max-height: $reactflow-node-basesize * 8;
-}
-
-.#{$eccgui}-graphviz__node--medium:not(.is-resizeable) {
-    width: $reactflow-node-basesize * 8;
-    min-height: $reactflow-node-basesize;
-    max-height: $reactflow-node-basesize * 13;
-}
-
-.#{$eccgui}-graphviz__node--large:not(.is-resizeable) {
-    width: $reactflow-node-basesize * 13;
-    min-height: $reactflow-node-basesize;
-    max-height: $reactflow-node-basesize * 13;
-}
-
-.#{$eccgui}-graphviz__node--fullwidth:not(.is-resizeable) {
-    width: 100%;
-}
-
 // Node border overwrites
 
 .#{$eccgui}-graphviz__node--border-solid {