@eccenca/gui-elements 23.2.0-rc.1 → 23.3.0-rc.0

package/src/extensions/codemirror/CodeMirror.tsx

@@ -1,12 +1,32 @@
-import React, { useEffect, useRef } from "react";
-import CodeMirror from "codemirror";
-import { CLASSPREFIX as eccgui } from "../../configuration/constants";
+import React, { TextareaHTMLAttributes, useEffect, useRef } from "react";
+import CodeMirror, { ModeSpec, ModeSpecOptions } from "codemirror";
+
 import "codemirror/mode/markdown/markdown.js";
 import "codemirror/mode/python/python.js";
 import "codemirror/mode/sparql/sparql.js";
 import "codemirror/mode/sql/sql.js";
 import "codemirror/mode/turtle/turtle.js";
 import "codemirror/mode/xml/xml.js";
+import "codemirror/mode/jinja2/jinja2.js";
+import "codemirror/mode/yaml/yaml.js";
+import "codemirror/mode/javascript/javascript.js";
+
+import { CLASSPREFIX as eccgui } from "../../configuration/constants";
+
+export const supportedCodeEditorModes = [
+    "markdown",
+    "python",
+    "sparql",
+    "sql",
+    "turtle",
+    "xml",
+    "jinja2",
+    "yaml",
+    "json",
+    "undefined",
+] as const;
+type SupportedModesTuple = typeof supportedCodeEditorModes;
+export type SupportedCodeEditorModes = SupportedModesTuple[number];
 
 export interface CodeEditorProps {
     /**
@@ -26,7 +46,7 @@ export interface CodeEditorProps {
     /**
      * Syntax mode of the code editor.
      */
-    mode?: "markdown" | "python" | "sparql" | "sql" | "turtle" | "xml" | "undefined";
+    mode?: SupportedCodeEditorModes;
     /**
      * Default value used first when the editor is instanciated.
      */
@@ -35,6 +55,17 @@ export interface CodeEditorProps {
      * If enabled the code editor won't show numbers before each line.
      */
     preventLineNumbers?: boolean;
+
+    /** Set read-only mode. Default: false */
+    readOnly?: boolean;
+
+    /** Optional height of the component */
+    height?: number | string;
+
+    /** Long lines are wrapped and displayed on multiple lines */
+    wrapLines?: boolean;
+
+    outerDivAttributes?: Partial<TextareaHTMLAttributes<HTMLDivElement>>;
 }
 
 /**
@@ -47,29 +78,38 @@ export const CodeEditor = ({
     mode = "undefined",
     preventLineNumbers = false,
     defaultValue,
+    readOnly = false,
+    height,
+    wrapLines = false,
+    outerDivAttributes,
 }: CodeEditorProps) => {
     const domRef = useRef<HTMLTextAreaElement>(null);
 
     useEffect(() => {
         const editorInstance = CodeMirror.fromTextArea(domRef.current!, {
-            mode: mode === "undefined" ? undefined : mode,
-            lineWrapping: true,
+            mode: convertMode(mode),
+            lineWrapping: wrapLines,
             lineNumbers: !preventLineNumbers,
             tabSize: 2,
             theme: "xq-light",
+            readOnly: readOnly,
         });
 
         editorInstance.on("change", (api) => {
             onChange(api.getValue());
         });
 
+        if (height) {
+            editorInstance.setSize(null, height);
+        }
+
         return function cleanup() {
             editorInstance.toTextArea();
         };
     }, [onChange, mode, preventLineNumbers]);
 
     return (
-        <div className={`${eccgui}-codeeditor`}>
+        <div {...outerDivAttributes} className={`${eccgui}-codeeditor`}>
             <textarea
                 ref={domRef}
                 /**
@@ -78,10 +118,24 @@ export const CodeEditor = ({
                  * unchanged from the code what was took over here.
                  */
                 data-test-id="codemirror-wrapper"
-                id={!!id ? id : `codemirror-${name}`}
+                id={id ? id : `codemirror-${name}`}
                 name={name}
                 defaultValue={defaultValue}
             />
         </div>
     );
 };
+
+const convertMode = (mode: SupportedCodeEditorModes | undefined): string | ModeSpec<ModeSpecOptions> | undefined => {
+    switch (mode) {
+        case "undefined":
+            return undefined;
+        case "json":
+            return {
+                name: "javascript",
+                json: true,
+            };
+        default:
+            return mode;
+    }
+};

package/src/extensions/codemirror/_codemirror.scss

@@ -2,31 +2,76 @@
 @import "~codemirror/theme/xq-light";
 
 // adjustments
-
+// stylelint-disable selector-class-pattern
 .#{$eccgui}-codeeditor {
+    max-width: 100%;
+
     .CodeMirror {
-        border-radius: $pt-border-radius;
         clip-path: unset !important; // we may check later why they set inset(0) now
+        border-radius: $pt-border-radius;
 
         // get them a "border" like input boxes from blueprintjs
         box-shadow: input-transition-shadow($input-shadow-color-focus), $pt-input-box-shadow;
+
         &.CodeMirror-focused {
             box-shadow: input-transition-shadow($input-shadow-color-focus, true), $input-box-shadow-focus;
         }
 
-        .CodeMirror-gutters {
-            // allow "borders" to shine through
-            background-color: rgba(0,0,0,0.05);
-        }
-
         .CodeMirror-scroll {
+            width: calc(100% - 2px);
+            height: calc(100% - 2px);
+
+            // fix size to prevent wrong calculation of other elements
+            padding: 0;
+            margin: 1px;
             cursor: text;
+
+            // remove scrollbars, codemirrow has own elements to fake them
+            scrollbar-width: none; // Firefox
+            -ms-overflow-style: none; // IE, Edge
+            &::-webkit-scrollbar {
+                display: none; // Chrome, Safari and Opera
+            }
+        }
+
+        .CodeMirror-hscrollbar {
+            bottom: 1px;
+            height: $eccgui-size-inline-whitespace !important;
+        }
+
+        .CodeMirror-vscrollbar {
+            top: 1px;
+            right: 1px;
+            width: $eccgui-size-inline-whitespace !important;
+        }
+
+        .CodeMirror-scrollbar-filler {
+            right: 1px;
+            bottom: 1px;
+        }
+
+        .CodeMirror-sizer {
+            border-right-width: $eccgui-size-inline-whitespace !important;
         }
     }
 }
 
 .#{$prefix}--accordion__content {
-    .CodeMirror-scroll, .CodeMirror-sizer, .CodeMirror-gutter, .CodeMirror-gutters, .CodeMirror-linenumber {
+    .CodeMirror-scroll,
+    .CodeMirror-sizer,
+    .CodeMirror-gutter,
+    .CodeMirror-gutters,
+    .CodeMirror-linenumber {
         box-sizing: content-box;
     }
 }
+
+// fix a few xq-light colors regarding bad contrasts
+
+.cm-s-xq-light {
+    // add other classes if necessary
+    .cm-meta {
+        filter: invert(1);
+    }
+}
+// stylelint-enable selector-class-pattern

package/src/extensions/react-flow/edges/stories/EdgeDefault.stories.tsx

@@ -1,24 +1,24 @@
-import React, { useState, useEffect, useCallback } from "react";
-import { ComponentStory, ComponentMeta } from "@storybook/react";
-import { ReactFlow, EdgeLabel, EdgeLabelObject } from "./../../../../../index";
-import { ArrowHeadType, Elements, getMarkerEnd, ReactFlowProvider } from 'react-flow-renderer';
+import React, { useCallback, useEffect, useState } from "react";
+import { ArrowHeadType, Elements, getMarkerEnd, ReactFlowProvider } from "react-flow-renderer";
+import { ComponentMeta, ComponentStory } from "@storybook/react";
 
+import { EdgeLabel, EdgeLabelObject, ReactFlow } from "./../../../../../index";
 import { EdgeDefault, EdgeDefaultDataProps as EdgeData } from "./../EdgeDefault";
 import { edgeTypes } from "./../edgeTypes";
 
 const EdgeDefaultDataProps = (data: EdgeData) => {
     // this is only a mock to get it as sub element in the table
     return <></>;
-}
+};
 
 export default {
-    title: "Extensions/React Flow/Default Edge",
+    title: "Extensions/React Flow/Edge",
     component: EdgeDefault,
     subcomponents: { EdgeDefaultDataProps },
     argTypes: {
         type: {
             control: "select",
-            options: [...(Object.keys(edgeTypes))],
+            options: [...Object.keys(edgeTypes)],
         },
     },
 } as ComponentMeta<typeof EdgeDefault>;
@@ -33,7 +33,9 @@ const EdgeDefaultExample = (args: any) => {
                 id: args.source,
                 type: "default",
                 data: {
-                    label: "Default ", content: "Example content.", minimalShape: "none",
+                    label: "Default ",
+                    content: "Example content.",
+                    minimalShape: "none",
                 },
                 position: { x: 50, y: 200 },
             },
@@ -41,13 +43,15 @@ const EdgeDefaultExample = (args: any) => {
                 id: args.target,
                 type: "default",
                 data: {
-                    label: "Default ", content: "Example content.", minimalShape: "none",
+                    label: "Default ",
+                    content: "Example content.",
+                    minimalShape: "none",
                 },
                 position: { x: 600, y: 200 },
             },
             {
-                ...args
-            }
+                ...args,
+            },
         ] as Elements);
     }, [args]);
 
@@ -60,31 +64,30 @@ const EdgeDefaultExample = (args: any) => {
         [reactflowInstance]
     );
 
-    return <ReactFlowProvider>
-        <ReactFlow
-            elements={elements}
-            style={{ height: '400px' }}
-            onLoad={onLoad}
-            edgeTypes={ edgeTypes }
-            defaultZoom={1}
-        />
-    </ReactFlowProvider>
-}
+    return (
+        <ReactFlowProvider>
+            <ReactFlow
+                elements={elements}
+                style={{ height: "400px" }}
+                onLoad={onLoad}
+                edgeTypes={edgeTypes}
+                defaultZoom={1}
+            />
+        </ReactFlowProvider>
+    );
+};
 
-const Template: ComponentStory<typeof EdgeDefault> = (args) => (
-    <EdgeDefaultExample {...args} />
-);
+const Template: ComponentStory<typeof EdgeDefault> = (args) => <EdgeDefaultExample {...args} />;
 
 export const Default = Template.bind({});
 Default.args = {
-    id: 'default',
-    type: 'dangerStep',
+    id: "default",
+    type: "dangerStep",
     label: "edge",
     arrowHeadType: "arrowclosed",
-    source: 'node-1',
-    target: 'node-2',
-    data: {
-    }
+    source: "node-1",
+    target: "node-2",
+    data: {},
 };
 
 export const CustomLabel = Template.bind({});
@@ -94,14 +97,12 @@ CustomLabel.args = {
     arrowHeadType: undefined,
     label: undefined,
     data: {
-        renderLabel: (
-            edgeCenter: [number, number, number, number]
-        ) => (
+        renderLabel: (edgeCenter: [number, number, number, number]) => (
             <EdgeLabelObject edgeCenter={edgeCenter}>
-                    <EdgeLabel text="Custom label that is very long" />
+                <EdgeLabel text="Custom label that is very long" />
             </EdgeLabelObject>
-        )
-    }
+        ),
+    },
 };
 
 export const InverseEdge = Template.bind({});
@@ -111,10 +112,8 @@ InverseEdge.args = {
     arrowHeadType: undefined,
     data: {
         inversePath: true,
-        markerStart: getMarkerEnd(
-            `${ArrowHeadType.ArrowClosed}-inverse` as ArrowHeadType
-        ),
-    }
+        markerStart: getMarkerEnd(`${ArrowHeadType.ArrowClosed}-inverse` as ArrowHeadType),
+    },
 };
 
 export const AdjustStrokeType = Template.bind({});
@@ -122,7 +121,7 @@ AdjustStrokeType.args = {
     ...Default.args,
     data: {
         strokeType: "double",
-    }
+    },
 };
 
 export const AdjustIntent = Template.bind({});
@@ -130,13 +129,13 @@ AdjustIntent.args = {
     ...Default.args,
     data: {
         intent: "warning",
-    }
+    },
 };
 
 export const AdjustHighlight = Template.bind({});
 AdjustHighlight.args = {
     ...Default.args,
     data: {
-        highlightColor: ["default", "alternate"]
-    }
+        highlightColor: ["default", "alternate"],
+    },
 };

package/src/extensions/react-flow/handles/HandleDefault.tsx

@@ -1,15 +1,13 @@
-import React, {memo} from 'react';
-import {
-    HandleProps as ReactFlowHandleLegacyProps,
-    Handle as HandleLegacy,
-} from "react-flow-renderer";
-import {
-    HandleProps as ReactFlowHandleNextProps,
-    Handle as HandleNext,
-} from "react-flow-renderer-lts";
-import { HandleContent, HandleContentProps } from "./HandleContent";
+import React, { memo } from "react";
+import { Handle as HandleLegacy, HandleProps as ReactFlowHandleLegacyProps } from "react-flow-renderer";
+import { Handle as HandleNext, HandleProps as ReactFlowHandleNextProps } from "react-flow-renderer-lts";
+import { PopoverInteractionKind as BlueprintPopoverInteractionKind } from "@blueprintjs/core";
+
 import { ReacFlowVersionSupportProps, useReactFlowVersion } from "../versionsupport";
 
+import { HandleContent, HandleContentProps } from "./HandleContent";
+import { HandleTools } from "./HandleTools";
+
 interface HandleExtensionProps extends ReacFlowVersionSupportProps {
     /**
      * Extended handle data.
@@ -28,37 +26,46 @@ export interface HandleNextProps extends HandleExtensionProps, ReactFlowHandleNe
 
 export type HandleDefaultProps = HandleProps | HandleNextProps;
 
-export const HandleDefault = memo(({
-    flowVersion,
-    data,
-    tooltip,
-    children,
-    ...handleProps
-}: HandleDefaultProps) => {
+export const HandleDefault = memo(({ flowVersion, data, tooltip, children, ...handleProps }: HandleDefaultProps) => {
     const evaluateFlowVersion = useReactFlowVersion();
     const flowVersionCheck = flowVersion || evaluateFlowVersion;
+    const [toolsDisplayed, setToolsDisplayed] = React.useState<boolean>(false);
+
+    const handleClosing = () => {
+        setToolsDisplayed(false);
+    };
 
-    const tooltipTitle = !!tooltip ? { title: tooltip } : {};
+    const tooltipTitle = tooltip ? { title: tooltip } : {};
+    const configToolsOn = {
+        defaultIsOpen: true,
+        autoFocus: true,
+        interactionKind: BlueprintPopoverInteractionKind.HOVER,
+        onClosing: handleClosing,
+    };
+
+    const isToolsContent = children && typeof children !== "string" && children.type === HandleTools;
+    let handleContent = <HandleContent {...data}>{children}</HandleContent>;
+
+    if (isToolsContent && toolsDisplayed) {
+        handleContent = <HandleContent {...data}>{React.cloneElement(children ?? <></>, configToolsOn)}</HandleContent>;
+    }
+    if (isToolsContent && !toolsDisplayed) {
+        handleContent = <HandleContent {...data}></HandleContent>;
+    }
+    const handleClick = React.useCallback(() => setToolsDisplayed(!toolsDisplayed), []);
 
-    const handleContent = (
-        <HandleContent {...data}>
-            { children }
-        </HandleContent>
-    );
+    const handleConfig = {
+        ...handleProps,
+        ...tooltipTitle,
+        className: isToolsContent ? "clickable" : undefined,
+        onClick: isToolsContent ? handleClick : undefined,
+    };
 
     switch (flowVersionCheck) {
         case "legacy":
-            return (
-                <HandleLegacy {...handleProps} {...tooltipTitle}>
-                    { handleContent }
-                </HandleLegacy>
-            );
+            return <HandleLegacy {...handleConfig}>{handleContent}</HandleLegacy>;
         case "next":
-            return (
-                <HandleNext {...handleProps} {...tooltipTitle}>
-                    { handleContent }
-                </HandleNext>
-            );
+            return <HandleNext {...handleConfig}>{handleContent}</HandleNext>;
         default:
             return <></>;
     }

package/src/extensions/react-flow/handles/HandleTools.tsx

@@ -0,0 +1,22 @@
+import React from "react";
+
+import { CLASSPREFIX as eccgui } from "../../../configuration/constants";
+import { ContextOverlay } from "../../../index";
+
+import { ContextOverlayProps } from "./../../../components/ContextOverlay/ContextOverlay";
+
+export interface HandleToolsProps extends Omit<ContextOverlayProps, "children" | "content" | "popoverClassName"> {
+    children: string | JSX.Element | JSX.Element[];
+}
+
+export const HandleTools = ({ children, ...otherContextOverlayProps }: HandleToolsProps) => {
+    return (
+        <ContextOverlay
+            {...otherContextOverlayProps}
+            content={<div className={`${eccgui}-graphviz__handletools-content`}>{children}</div>}
+            popoverClassName={`${eccgui}-graphviz__handletools-overlay`}
+        >
+            <div className={`${eccgui}-graphviz__handletools-target`} />
+        </ContextOverlay>
+    );
+};

package/src/extensions/react-flow/handles/_handles.scss

@@ -1,72 +1,87 @@
 div.react-flow__handle {
-    color: $reactflow-node-border-color;
-    background-color: currentColor;
-    border-color: currentColor;
+    z-index: 2;
     width: $eccgui-size-block-whitespace * 0.5;
     height: $eccgui-size-block-whitespace * 0.5;
-    z-index: 2;
+    color: $reactflow-node-border-color;
+    background-color: currentcolor;
+    border-color: currentcolor;
     border-radius: 100%;
 
     .react-flow__node-default & {
-        background-color: currentColor;
+        background-color: currentcolor;
     }
 
-    &:before {
-        content: " ";
+    &::before {
         position: absolute;
-        //width: $eccgui-size-block-whitespace;
-        //height: $eccgui-size-block-whitespace;
-        top: $eccgui-size-block-whitespace * -0.5;
-        left: $eccgui-size-block-whitespace * -0.5;
-        bottom: $eccgui-size-block-whitespace * -0.5;
-        right: $eccgui-size-block-whitespace * -0.5;
-        opacity: 0.61;
+        inset: $eccgui-size-block-whitespace * -0.5;
+        z-index: 1;
         display: none;
-        background-color: currentColor;
-        border: solid 1px currentColor;
+        content: " ";
+        background-color: currentcolor;
+        border: solid 1px currentcolor;
         border-radius: 100%;
+        opacity: 0.61;
+    }
+
+    &.clickable {
+        &::after {
+            position: absolute;
+            inset: $eccgui-size-block-whitespace * -0.75;
+            z-index: -1;
+            display: none;
+            cursor: pointer;
+            content: " ";
+            border-radius: 100%;
+            outline: dotted $eccgui-size-block-whitespace * 0.25 currentcolor;
+        }
     }
 
     &:hover {
-        &:before {
-            box-shadow: 0 0 $eccgui-size-block-whitespace * 0.5 $eccgui-size-block-whitespace * 0.25 currentColor;
+        &::before {
+            box-shadow: 0 0 $eccgui-size-block-whitespace * 0.5 $eccgui-size-block-whitespace * 0.25 currentcolor;
         }
     }
 
     &.#{eccgui}-graphviz__handle--highlight-configuration {
         border-radius: 0;
 
-        &:before {
+        &::before {
             border-radius: 0;
         }
     }
 
     .react-flow__node:hover &.connectable {
-        &:before {
+        &::before {
             display: block;
         }
     }
 
-    &.react-flow__handle-connecting:hover, &.invalid-handle {
+    .react-flow__node:hover &.clickable {
+        &::after {
+            display: block;
+        }
+    }
+
+    &.react-flow__handle-connecting:hover,
+    &.invalid-handle {
         color: $eccgui-color-danger-text;
-        &:before {
+
+        &::before {
             display: block;
         }
     }
 
-    &.react-flow__handle-valid:hover, &.valid-handle {
+    &.react-flow__handle-valid:hover,
+    &.valid-handle {
         color: $eccgui-color-success-text;
     }
 }
 
 .#{$eccgui}-graphviz__handle__content {
     position: absolute;
-    top: 0;
-    right: 0;
-    bottom: 0;
-    left: 0;
-    cursor: help;
+    inset: 0;
     overflow: hidden;
+    cursor: help;
 }
 
 div.react-flow__handle-right {
@@ -93,28 +108,22 @@ div.react-flow__handle-bottom {
 .#{$eccgui}-graphviz__node--minimal-circular {
     .react-flow__node:not(.selected) & {
         & ~ .react-flow__handle {
-            top: 50%;
-            left: $reactflow-node-basesize * 0.5;
-            right: auto;
-            bottom: auto;
-            transform: translateX(-50%) translateY(-50%);
+            inset: 50% auto auto $reactflow-node-basesize * 0.5;
             z-index: 0;
-            opacity: 0;
-            height: $reactflow-node-basesize;
             width: $reactflow-node-basesize;
+            height: $reactflow-node-basesize;
+            opacity: 0;
+            transform: translateX(-50%) translateY(-50%);
         }
     }
 
     & ~ .react-flow__handle:not(.connectable) {
-        top: 50%;
-        left: $reactflow-node-basesize * 0.5;
-        right: auto;
-        bottom: auto;
-        transform: translateX(-50%) translateY(-50%);
+        inset: 50% auto auto $reactflow-node-basesize * 0.5;
         z-index: 0;
-        opacity: 0;
-        height: $reactflow-node-basesize;
         width: $reactflow-node-basesize;
+        height: $reactflow-node-basesize;
+        opacity: 0;
+        transform: translateX(-50%) translateY(-50%);
     }
 }
 
@@ -132,23 +141,34 @@ div.react-flow__handle-bottom {
 
 .#{$eccgui}-graphviz__node--hidehandles {
     & ~ .react-flow__handle:not(.connectable) {
-        height: 1px;
+        z-index: -1;
         width: 1px;
+        height: 1px;
         visibility: hidden;
         border: none;
-        z-index: -1;
 
         &.react-flow__handle-top {
             top: 0;
         }
+
         &.react-flow__handle-right {
             right: 0;
         }
+
         &.react-flow__handle-bottom {
             bottom: 0;
         }
+
         &.react-flow__handle-left {
             left: 0;
         }
     }
 }
+
+.#{$eccgui}-graphviz__handletools-target {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+}