Merge pull request #219 from eccenca/feature/change-node-width-CMEM-4051

Node resizing (CMEM-4051)

Author: andreas-schultz

CHANGELOG.md

@@ -20,6 +20,9 @@ The format is based on [Keep a Changelog](http://keepachangelog.com/) and this p
     -   implemented support for `intent` states in code editor
 -   `Label` component
     -   added `additionalElements` property to display elements at the end of the label
+-   `<NodeContent />`
+    -   `resizeDirections` to specifiy the axis that can be used to resize the node
+    -   `resizeMaxDimensions` to add maximum values for resizing height/width
 
 ## [24.0.1] - 2025-02-06
 

package.json

@@ -88,7 +88,7 @@
         "jshint": "^2.13.6",
         "lodash": "^4.17.21",
         "n3": "^1.23.1",
-        "re-resizable": "^6.10.1",
+        "re-resizable": "^6.10.3",
         "react": "^16.13.1",
         "react-dom": "^16.13.1",
         "react-flow-renderer": "9.7.4",

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 > & {

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 () => {

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;

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;