draft: feat: multi segment edges (RDFA-516)

frontend/src/app.css

@@ -83,6 +83,11 @@
 https://tailwindcss.com/docs/colors#using-a-custom-palette
 */
 @theme {
+    /*TODO WICHTIG: SPÄTER DIE RENDERING FARBEN FIXEN:
+       ich mag die variablen hier gerade nicht
+       es sieht sehr chaotisch aus, manche variablen sind doppelt
+       wenigstens für meine Rendering farben fix das mal
+       konkret ist das das blau und grün der bendpoints*/
     --color-*: initial;
     --color-dialog-backlight: rgba(0, 0, 0, 0.5);
 
@@ -161,4 +166,5 @@ https://tailwindcss.com/docs/colors#using-a-custom-palette
     --color-class-node-highlighted: var(--color-border-select);
     --color-class-node-highlighted-secondary: rgba(31, 117, 203, 0.45);
     --color-inheritance-edge: var(--color-soptim-dunkelgrau);
+    --color-green: #22a35a;
 }

frontend/src/lib/components/CheckBoxEditControl.svelte

@@ -24,20 +24,22 @@
         disabled = false,
         labelFirst = true,
         readonly = false,
+        title = undefined,
     } = $props();
 
     let uuid = crypto.randomUUID();
 </script>
 
 <div>
     {#if labelFirst && label}
-        <label for={uuid} class=" text-default-text">
+        <label for={uuid} class=" text-default-text" {title}>
             {label}
         </label>
     {/if}
     <input
         type="checkbox"
         id={uuid}
+        {title}
         class="text-button-default-text bg-default-background checked:bg-button-default-background h-4 w-4
            rounded
            border-none disabled:cursor-not-allowed"
@@ -52,7 +54,7 @@
         disabled={disabled || readonly}
     />
     {#if !labelFirst && label}
-        <label for={uuid} class="">
+        <label for={uuid} class="" {title}>
             {label}
         </label>
     {/if}

frontend/src/lib/components/TextEditControl.svelte

@@ -29,11 +29,12 @@
         highlight = false,
         warn = false,
         buttons = [],
+        title = undefined,
     } = $props();
 </script>
 
 <div class="text-default-text flex h-full w-full flex-col">
-    <label for={id}>
+    <label for={id} {title}>
         {#if label}
             {label}
         {/if}
@@ -47,6 +48,7 @@
         {readonly}
         {highlight}
         {warn}
+        {title}
         type="text"
         {buttons}
     />

frontend/src/lib/models/reactive/validity-rules/validityFunctions.js

@@ -434,3 +434,29 @@ export function hasNoSpaces(text) {
     }
     return violations;
 }
+
+/**
+ * Validates the corner rounding factor entered as free text.
+ * The value is a percentage in [0, 100]. Two kinds of violations are possible:
+ *  - the input is not a number at all (invalid format)
+ *  - the number lies outside the allowed [0, 100] range (out of boundaries)
+ * @param {string|number} value - the raw input value
+ * @returns {string[]} the violations
+ */
+export function isInvalidCornerRoundingFactor(value) {
+    const violations = [];
+    const raw = typeof value === "number" ? String(value) : (value ?? "");
+    if (raw.trim() === "") {
+        violations.push("must not be empty");
+        return violations;
+    }
+    const parsed = Number(raw);
+    if (Number.isNaN(parsed)) {
+        violations.push("must be a number");
+        return violations;
+    }
+    if (parsed < 0 || parsed > 100) {
+        violations.push("must be between 0 and 100");
+    }
+    return violations;
+}

frontend/src/lib/rendering/svelteflow/components/SvelteFlowClassContextMenu.svelte → frontend/src/lib/rendering/svelteflow/components/contextmenu/SvelteFlowClassContextMenu.svelte

@@ -29,8 +29,8 @@
         faDiagramProject,
     } from "@fortawesome/free-solid-svg-icons";
 
-    import { ContextMenu } from "$lib/components/bitsui/contextmenu";
     import ContextMenuSeparator from "$lib/components/bitsui/contextmenu/ContextMenuSeparator.svelte";
+    import { ContextMenu } from "$lib/components/bitsui/contextmenu/index.js";
     import {
         copyState,
         DiagramType,
@@ -43,10 +43,10 @@
         handleContextMenuOpenChange,
         syncContextMenuTrigger,
     } from "./contextMenuUtils.js";
-    import DeleteDependenciesDialog from "../../../../routes/delete-relations-dialog/DeleteDependenciesDialog.svelte";
-    import RemoveFromDiagramDialog from "../../../../routes/mainpage/packageNavigation/custom-diagram-dialogs/RemoveFromDiagramDialog.svelte";
-    import ExtendClassDialog from "../../../../routes/mainpage/packageNavigation/ExtendClassDialog.svelte";
-    import SHACLClassSpecificPopUp from "../../../../routes/shacl/shaclclassspecific/SHACLClassSpecificPopUp.svelte";
+    import DeleteDependenciesDialog from "../../../../../routes/delete-relations-dialog/DeleteDependenciesDialog.svelte";
+    import RemoveFromDiagramDialog from "../../../../../routes/mainpage/packageNavigation/custom-diagram-dialogs/RemoveFromDiagramDialog.svelte";
+    import ExtendClassDialog from "../../../../../routes/mainpage/packageNavigation/ExtendClassDialog.svelte";
+    import SHACLClassSpecificPopUp from "../../../../../routes/shacl/shaclclassspecific/SHACLClassSpecificPopUp.svelte";
 
     let {
         request = null,

frontend/src/lib/rendering/svelteflow/components/contextmenu/SvelteFlowEdgeContextMenu.svelte

@@ -0,0 +1,145 @@
+<!--
+  -    Copyright (c) 2024-2026 SOPTIM AG
+  -
+  -    Licensed under the Apache License, Version 2.0 (the "License");
+  -    you may not use this file except in compliance with the License.
+  -    You may obtain a copy of the License at
+  -
+  -        http://www.apache.org/licenses/LICENSE-2.0
+  -
+  -    Unless required by applicable law or agreed to in writing, software
+  -    distributed under the License is distributed on an "AS IS" BASIS,
+  -    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  -    See the License for the specific language governing permissions and
+  -    limitations under the License.
+  -
+  -->
+
+<script>
+    import {
+        faPlus,
+        faTrash,
+        faEraser,
+    } from "@fortawesome/free-solid-svg-icons";
+
+    import { ContextMenu } from "$lib/components/bitsui/contextmenu";
+    import { MAX_BEND_POINTS_PER_EDGE } from "$lib/rendering/svelteflow/interaction/bendPointOperations.js";
+
+    import {
+        getContextMenuTriggerStyle,
+        handleContextMenuOpenChange,
+        syncContextMenuTrigger,
+    } from "./contextMenuUtils.js";
+
+    let {
+        request = null,
+        disabled = false,
+        onClose = () => {},
+        onAddBendPoint = () => {},
+        onDeleteBendPoint = () => {},
+        onDeleteEndPoint = () => {},
+        onClearBendPoints = () => {},
+    } = $props();
+
+    let triggerRef = $state(null);
+    let open = $state(false);
+
+    let triggerStyle = $derived(getContextMenuTriggerStyle(request));
+
+    let onBendPoint = $derived(!!request?.hitBendPointId);
+    let onEndPoint = $derived(!!request?.hitEndPointSide);
+    let atLimit = $derived(
+        (request?.bendPointCount ?? 0) >= MAX_BEND_POINTS_PER_EDGE,
+    );
+
+    $effect(() => {
+        syncContextMenuTrigger({
+            disabled,
+            request,
+            triggerRef,
+            setOpen: nextOpen => (open = nextOpen),
+        });
+    });
+
+    function handleOpenChange(nextOpen) {
+        handleContextMenuOpenChange(nextOpen, value => (open = value), onClose);
+    }
+
+    function addBendPoint() {
+        if (atLimit || !request) return;
+        onAddBendPoint({
+            edgeId: request.edgeId,
+            flowPosition: request.flowPosition,
+        });
+        onClose();
+    }
+
+    function deleteBendPoint() {
+        if (!request?.hitBendPointId) return;
+        onDeleteBendPoint({
+            edgeId: request.edgeId,
+            bendPointId: request.hitBendPointId,
+        });
+        onClose();
+    }
+
+    function deleteEndPoint() {
+        if (!request?.hitEndPointSide) return;
+        onDeleteEndPoint({
+            edgeId: request.edgeId,
+            side: request.hitEndPointSide,
+        });
+        onClose();
+    }
+
+    function clearBendPoints() {
+        if (!request) return;
+        onClearBendPoints({ edgeId: request.edgeId });
+        onClose();
+    }
+</script>
+
+<ContextMenu.Root bind:open onOpenChange={handleOpenChange}>
+    <ContextMenu.TriggerArea
+        bind:ref={triggerRef}
+        class="fixed h-px w-px opacity-0"
+        style={triggerStyle}
+        {disabled}
+    />
+    <ContextMenu.Content>
+        {#if onEndPoint}
+            <ContextMenu.Item.Button
+                onSelect={deleteEndPoint}
+                faIcon={faTrash}
+                variant="danger"
+            >
+                Delete end point
+            </ContextMenu.Item.Button>
+        {:else if onBendPoint}
+            <ContextMenu.Item.Button
+                onSelect={deleteBendPoint}
+                faIcon={faTrash}
+                variant="danger"
+            >
+                Delete bend point
+            </ContextMenu.Item.Button>
+        {:else}
+            <ContextMenu.Item.Button
+                onSelect={addBendPoint}
+                faIcon={faPlus}
+                disabled={atLimit}
+                altText={atLimit ? "Max bend points reached" : "Ctrl+Q"}
+            >
+                Add bend point here
+            </ContextMenu.Item.Button>
+        {/if}
+        <ContextMenu.Separator />
+        <ContextMenu.Item.Button
+            onSelect={clearBendPoints}
+            faIcon={faEraser}
+            variant="danger"
+        >
+            Remove all bend points
+        </ContextMenu.Item.Button>
+    </ContextMenu.Content>
+</ContextMenu.Root>

frontend/src/lib/rendering/svelteflow/components/SvelteFlowPaneContextMenu.svelte → frontend/src/lib/rendering/svelteflow/components/contextmenu/SvelteFlowPaneContextMenu.svelte

@@ -19,7 +19,7 @@
     import { faPaste, faPlus } from "@fortawesome/free-solid-svg-icons";
 
     import { BackendConnection } from "$lib/api/backend.js";
-    import { ContextMenu } from "$lib/components/bitsui/contextmenu";
+    import { ContextMenu } from "$lib/components/bitsui/contextmenu/index.js";
     import { PUBLIC_BACKEND_URL } from "$lib/config/runtime.js";
     import {
         copyState,
@@ -32,8 +32,8 @@
         handleContextMenuOpenChange,
         syncContextMenuTrigger,
     } from "./contextMenuUtils.js";
-    import { saveCopyClass } from "../../../../routes/mainpage/packageNavigation/save-copy-class-to-backend.js";
-    import NewClassDialog from "../../../../routes/NewClassDialog.svelte";
+    import { saveCopyClass } from "../../../../../routes/mainpage/packageNavigation/save-copy-class-to-backend.js";
+    import NewClassDialog from "../../../../../routes/NewClassDialog.svelte";
 
     let {
         request = null,