@eccenca/gui-elements 25.0.0-bugfixcenterednodecontentmenuitemscmem7184.0 → 25.0.0-featurecolorwheelinputcmem7327.0

package/src/configuration/_customproperties.scss

@@ -0,0 +1,32 @@
+/**
+ * We mirror our SCSS variables here to improve availability in inline styles
+ * and module styles without included SCSS config stack.
+ * Colors are set in `src/components/Application/_colors.scss`.
+ */
+
+:root {
+    --#{$eccgui}-size-typo-caption: #{$eccgui-size-typo-caption};
+    --#{$eccgui}-size-typo-caption-lineheight: #{$eccgui-size-typo-caption-lineheight};
+    --#{$eccgui}-size-typo-text: #{$eccgui-size-typo-text};
+    --#{$eccgui}-size-typo-text-lineheight: #{$eccgui-size-typo-text-lineheight};
+    --#{$eccgui}-size-typo-subtitle: #{$eccgui-size-typo-subtitle};
+    --#{$eccgui}-size-typo-subtitle-lineheight: #{$eccgui-size-typo-subtitle-lineheight};
+    --#{$eccgui}-size-typo-title: #{$eccgui-size-typo-title};
+    --#{$eccgui}-size-typo-title-lineheight: #{$eccgui-size-typo-title-lineheight};
+    --#{$eccgui}-size-typo-headline: #{$eccgui-size-typo-headline};
+    --#{$eccgui}-size-typo-headline-lineheight: #{$eccgui-size-typo-headline-lineheight};
+    --#{$eccgui}-font-weight-light: #{$eccgui-font-weight-light};
+    --#{$eccgui}-font-weight-regular: #{$eccgui-font-weight-regular};
+    --#{$eccgui}-font-weight-bold: #{$eccgui-font-weight-bold};
+    --#{$eccgui}-font-spacing-condensed: #{$eccgui-font-spacing-condensed};
+    --#{$eccgui}-font-spacing-regular: #{$eccgui-font-spacing-regular};
+    --#{$eccgui}-font-spacing-wide: #{$eccgui-font-spacing-wide};
+    --#{$eccgui}-size-block-whitespace: #{$eccgui-size-block-whitespace};
+    --#{$eccgui}-size-inline-whitespace: #{$eccgui-size-inline-whitespace};
+    --#{$eccgui}-opacity-regular: #{$eccgui-opacity-regular};
+    --#{$eccgui}-opacity-narrow: #{$eccgui-opacity-narrow};
+    --#{$eccgui}-opacity-muted: #{$eccgui-opacity-muted};
+    --#{$eccgui}-opacity-disabled: #{$eccgui-opacity-disabled};
+    --#{$eccgui}-opacity-ghostly: #{$eccgui-opacity-ghostly};
+    --#{$eccgui}-opacity-invisible: #{$eccgui-opacity-invisible};
+}

package/src/configuration/stories/customproperties.stories.tsx

@@ -0,0 +1,118 @@
+import React from "react";
+import { Meta, StoryFn } from "@storybook/react";
+
+import CssCustomProperties from "../../common/utils/CssCustomProperties";
+import {
+    Section,
+    SectionHeader,
+    Spacing,
+    Table,
+    TableBody,
+    TableCell,
+    TableContainer,
+    TableHead,
+    TableHeader,
+    TableRow,
+    TitleSubsection,
+} from "../../components";
+import { CLASSPREFIX as eccgui } from "../../index";
+
+const groups: { title: string; filterName: (name: string) => boolean }[] = [
+    {
+        title: "Typography",
+        filterName: (name) => name.startsWith(`--${eccgui}-size-typo`),
+    },
+    {
+        title: "Font weights and spacing",
+        filterName: (name) => name.startsWith(`--${eccgui}-font`),
+    },
+    {
+        title: "Whitespace",
+        filterName: (name) => name.startsWith(`--${eccgui}-size-block`) || name.startsWith(`--${eccgui}-size-inline`),
+    },
+    {
+        title: "Color aliases",
+        filterName: (name) => name.startsWith(`--${eccgui}-color`) && !name.startsWith(`--${eccgui}-color-palette`),
+    },
+    {
+        title: "Opacity",
+        filterName: (name) => name.startsWith(`--${eccgui}-opacity`),
+    },
+    {
+        title: "Palette colors",
+        filterName: (name) => name.startsWith(`--${eccgui}-color-palette`),
+    },
+];
+
+const CssCustomPropertiesOverview = () => {
+    return (
+        <>
+            {groups.map(({ title, filterName }) => {
+                const properties = new CssCustomProperties({
+                    selectorText: ":root",
+                    filterName,
+                    removeDashPrefix: false,
+                    returnObject: false,
+                }).customProperties() as string[][];
+
+                return (
+                    <React.Fragment key={title}>
+                        <Section>
+                            <SectionHeader>
+                                <TitleSubsection>{title}</TitleSubsection>
+                            </SectionHeader>
+                            <Spacing size="tiny" />
+                            <TableContainer>
+                                <Table columnWidths={["60%", "40%"]}>
+                                    <TableHead>
+                                        <TableRow>
+                                            <TableHeader>CSS custom property</TableHeader>
+                                            <TableHeader>Current value</TableHeader>
+                                        </TableRow>
+                                    </TableHead>
+                                    <TableBody>
+                                        {properties.map(([name, value]) => (
+                                            <TableRow key={name}>
+                                                <TableCell>
+                                                    <code>{name}</code>
+                                                </TableCell>
+                                                <TableCell>
+                                                    {name.startsWith(`--${eccgui}-color`) && (
+                                                        <span
+                                                            style={{
+                                                                display: "inline-block",
+                                                                width: `var(--${eccgui}-size-block-whitespace)`,
+                                                                height: `var(--${eccgui}-size-block-whitespace)`,
+                                                                backgroundColor: value,
+                                                                verticalAlign: "middle",
+                                                                marginRight: `var(--${eccgui}-size-inline-whitespace)`,
+                                                                border: "1px solid currentColor",
+                                                            }}
+                                                        />
+                                                    )}
+                                                    <code>{value}</code>
+                                                </TableCell>
+                                            </TableRow>
+                                        ))}
+                                    </TableBody>
+                                </Table>
+                            </TableContainer>
+                        </Section>
+                        <Spacing size="large" />
+                    </React.Fragment>
+                );
+            })}
+        </>
+    );
+};
+
+/**
+ * We mirror our SCSS configuration variables as CSS custom vars.
+ * This way they can be easily used for inline styles or in CSS modules without SCSS includes.
+ */
+export default {
+    title: "Configuration/CSS Custom Properties",
+    component: CssCustomPropertiesOverview,
+} as Meta<typeof CssCustomPropertiesOverview>;
+
+export const Default: StoryFn = () => <CssCustomPropertiesOverview />;

package/src/extensions/codemirror/CodeMirror.tsx

@@ -227,10 +227,11 @@ export const CodeEditor = ({
 }: CodeEditorProps) => {
     const parent = useRef<any>(undefined);
     const [view, setView] = React.useState<EditorView | undefined>();
-    const currentView = React.useRef<EditorView>()
-    currentView.current = view
-    const currentReadOnly = React.useRef(readOnly)
-    currentReadOnly.current = readOnly
+    const currentView = React.useRef<EditorView>();
+    currentView.current = view;
+    const currentReadOnly = React.useRef(readOnly);
+    currentReadOnly.current = readOnly;
+    //const currentDisabled = React.useRef(disabled);
     const [showPreview, setShowPreview] = React.useState<boolean>(false);
     // CodeMirror Compartments in order to allow for re-configuration after initialization
     const readOnlyCompartment = React.useRef<Compartment>(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(() => {

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 =========================================