Add preliminary support for Cubic Bézier curve edge

examples/classdiagram/class-diagram.html

@@ -4,7 +4,7 @@
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <title>Sprotty Class Diagram Example</title>
-    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css">    
+    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css">
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/balloon-css/0.5.0/balloon.min.css">
     <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
     <link rel="stylesheet" href="css/page.css">
@@ -26,7 +26,7 @@ <h1>Sprotty Class Diagram Example</h1>
                 <div id="sprotty" class="sprotty"/>
             </div>
             <div class="copyright">
-                &copy; 2017 <a href="http://typefox.io">TypeFox GmbH</a>.
+                &copy; 2021 <a href="http://typefox.io">TypeFox GmbH</a>.
             </div>
         </div>
     </div>

examples/classdiagram/css/diagram.css

@@ -98,6 +98,22 @@
     opacity: 0.35;
 }
 
+.sprotty-edge > .sprotty-routing-handle[data-kind='bezier-add'] {
+    fill: #2B2;
+}
+
+.sprotty-edge > .sprotty-routing-handle[data-kind='bezier-remove'] {
+    fill: #B00;
+}
+
+.sprotty-edge > .sprotty-routing-handle[data-kind='bezier-control-before'] {
+    fill: #44E;
+}
+
+.sprotty-edge > .sprotty-routing-handle[data-kind='bezier-control-after'] {
+    fill: #44E;
+}
+
 .sprotty-edge > .sprotty-routing-handle.selected {
     fill: #66a;
 }

examples/classdiagram/src/di.config.ts

@@ -21,14 +21,15 @@ import {
     SRoutingHandleView, PreRenderedElement, HtmlRoot, SGraph, configureModelElement, SLabel,
     SCompartment, SEdge, SButton, SRoutingHandle, RevealNamedElementActionProvider,
     CenterGridSnapper, expandFeature, nameFeature, withEditLabelFeature, editLabelFeature,
-    RectangularNode
+    RectangularNode, BezierCurveEdgeView, SBezierCreateHandleView, SBezierControlHandleView
 } from "../../../src";
 import edgeIntersectionModule from "../../../src/features/edge-intersection/di.config";
 import { IconView, NodeView} from "./views";
 import { PopupModelProvider } from "./popup";
 import { ClassDiagramModelSource } from './model-source';
 import { ClassDiagramLabelValidator, ClassDiagramLabelValidationDecorator } from './label-validation';
 import { Icon, ClassNode, ClassLabel, PropertyLabel } from "./model";
+import { BezierMouseListener } from '../../../src/features/routing/bezier-edge-router';
 
 export default (containerId: string) => {
     require("../../../css/sprotty.css");
@@ -45,6 +46,7 @@ export default (containerId: string) => {
         bind(TYPES.ISnapper).to(CenterGridSnapper);
         bind(TYPES.IEditLabelValidator).to(ClassDiagramLabelValidator);
         bind(TYPES.IEditLabelValidationDecorator).to(ClassDiagramLabelValidationDecorator);
+        bind(TYPES.MouseListener).to(BezierMouseListener);
 
         const context = { bind, unbind, isBound, rebind };
         configureModelElement(context, 'graph', SGraph, SGraphView);
@@ -64,11 +66,16 @@ export default (containerId: string) => {
         configureModelElement(context, 'icon', Icon, IconView);
         configureModelElement(context, 'label:icon', SLabel, SLabelView);
         configureModelElement(context, 'edge:straight', SEdge, JumpingPolylineEdgeView);
+        configureModelElement(context, 'edge:bezier', SEdge, BezierCurveEdgeView);
         configureModelElement(context, 'html', HtmlRoot, HtmlRootView);
         configureModelElement(context, 'pre-rendered', PreRenderedElement, PreRenderedView);
         configureModelElement(context, 'button:expand', SButton, ExpandButtonView);
         configureModelElement(context, 'routing-point', SRoutingHandle, SRoutingHandleView);
         configureModelElement(context, 'volatile-routing-point', SRoutingHandle, SRoutingHandleView);
+        configureModelElement(context, 'bezier-create-routing-point', SRoutingHandle, SBezierCreateHandleView);
+        configureModelElement(context, 'bezier-remove-routing-point', SRoutingHandle, SBezierCreateHandleView);
+        configureModelElement(context, 'bezier-routing-point', SRoutingHandle, SBezierControlHandleView);
+
 
         configureViewerOptions(context, {
             needsClientLayout: true,

examples/classdiagram/src/model-source.ts

@@ -276,12 +276,56 @@ export class ClassDiagramModelSource extends LocalModelSource {
                 }
             ]
         };
+        const node3: SNodeSchema & Expandable = {
+            id: 'node3',
+            type: 'node:class',
+            expanded: false,
+            position: {
+                x: 540,
+                y: 25
+            },
+            layout: 'vbox',
+            children: [
+                <SCompartmentSchema>{
+                    id: 'node3_header',
+                    type: 'comp:header',
+                    layout: 'hbox',
+                    children: [
+                        {
+                            id: 'node3_icon',
+                            type: 'icon',
+                            layout: 'stack',
+                            layoutOptions: {
+                                hAlign: 'center',
+                                resizeContainer: false
+                            },
+                            children: [
+                                <SLabelSchema>{
+                                    id: 'node3_ticon',
+                                    type: 'label:icon',
+                                    text: 'C'
+                                },
+                            ]
+                        },
+                        <SLabelSchema>{
+                            id: 'node3_classname',
+                            type: 'label:heading',
+                            text: 'Ada'
+                        },
+                        {
+                            id: 'node3_expand',
+                            type: 'button:expand'
+                        }
+                    ]
+                }
+            ]
+        };
         const package0: SNodeSchema = {
             id: 'package0',
             type: 'node:package',
             position: {
-                x: 400,
-                y: 120
+                x: 600,
+                y: 160
             },
             size: {
                 width: 400,
@@ -306,14 +350,14 @@ export class ClassDiagramModelSource extends LocalModelSource {
                 }
             ]
         }
-        const edge = {
-            id: 'edge',
+        const edge0 = {
+            id: 'edge0',
             type: 'edge:straight',
             sourceId: node0.id,
             targetId: node1.id,
             children: [
                 <SLabelSchema> {
-                    id: 'edge_label_on',
+                    id: 'edge0_label_on',
                     type: 'label:text',
                     text: 'on',
                     edgePlacement:  {
@@ -323,7 +367,7 @@ export class ClassDiagramModelSource extends LocalModelSource {
                     }
                 },
                 <SLabelSchema> {
-                    id: 'edge_label_top',
+                    id: 'edge0_label_top',
                     type: 'label:text',
                     text: 'top',
                     edgePlacement:  {
@@ -333,7 +377,7 @@ export class ClassDiagramModelSource extends LocalModelSource {
                     }
                 },
                 <SLabelSchema> {
-                    id: 'edge_label_bottom',
+                    id: 'edge0_label_bottom',
                     type: 'label:text',
                     text: 'bottom',
                     edgePlacement:  {
@@ -343,7 +387,7 @@ export class ClassDiagramModelSource extends LocalModelSource {
                     }
                 },
                 <SLabelSchema> {
-                    id: 'edge_label_left',
+                    id: 'edge0_label_left',
                     type: 'label:text',
                     text: 'left',
                     edgePlacement:  {
@@ -353,7 +397,7 @@ export class ClassDiagramModelSource extends LocalModelSource {
                     }
                 },
                 <SLabelSchema> {
-                    id: 'edge_label_right',
+                    id: 'edge0_label_right',
                     type: 'label:text',
                     text: 'right',
                     edgePlacement:  {
@@ -419,10 +463,25 @@ export class ClassDiagramModelSource extends LocalModelSource {
                 }
             ]
         } as SEdgeSchema;
+        const edge2 = {
+            id: 'edge2',
+            type: 'edge:bezier',
+            sourceId: node0.id,
+            targetId: node3.id,
+            routerKind: 'bezier',
+            routingPoints: [
+                { x: 260, y: 140 },
+                { x: 290, y: 80 },
+                { x: 350, y: 100 },
+                { x: 390, y: 120 },
+                { x: 450, y: 40 }
+            ],
+            children: []
+        } as SEdgeSchema;
         const graph: SGraphSchema = {
             id: 'graph',
             type: 'graph',
-            children: [node0, node2, package0, edge, edge1 ],
+            children: [node0, node2, node3, package0, edge0, edge1, edge2 ],
             layoutOptions: {
                 hGap: 5,
                 hAlign: 'left',

src/features/routing/linear-edge-router.ts → src/features/routing/abstract-edge-router.ts

@@ -19,7 +19,7 @@ import { SModelElement, SParentElement } from "../../base/model/smodel";
 import { translateBounds, translatePoint } from "../../base/model/smodel-utils";
 import { Bounds, euclideanDistance, linear, Point } from "../../utils/geometry";
 import { ResolvedHandleMove } from "../move/move";
-import { RoutingHandleKind, SDanglingAnchor, SRoutingHandle, edgeInProgressID, edgeInProgressTargetHandleID } from "../routing/model";
+import { RoutingHandleKind, SDanglingAnchor, SRoutingHandle, edgeInProgressID, edgeInProgressTargetHandleID } from "./model";
 import { AnchorComputerRegistry, IAnchorComputer } from "./anchor";
 import { SConnectableElement, SRoutableElement } from "./model";
 import { EdgeSnapshot, IEdgeRouter, RoutedPoint } from "./routing";
@@ -76,7 +76,7 @@ export class DefaultAnchors {
 }
 
 @injectable()
-export abstract class LinearEdgeRouter implements IEdgeRouter {
+export abstract class AbstractEdgeRouter implements IEdgeRouter {
 
     @inject(AnchorComputerRegistry) anchorRegistry: AnchorComputerRegistry;
 
@@ -374,4 +374,11 @@ export abstract class LinearEdgeRouter implements IEdgeRouter {
             .filter(otherEdge => otherEdge.target === edge.source)
             .indexOf(edge);
     }
+
+    protected commitRoute(edge: SRoutableElement, routedPoints: RoutedPoint[]) {
+        const newRoutingPoints: Point[] = [];
+        for (let i = 1; i < routedPoints.length - 1; ++i)
+            newRoutingPoints.push({ x: routedPoints[i].x, y: routedPoints[i].y });
+        edge.routingPoints = newRoutingPoints;
+    }
 }

src/features/routing/bezier-anchors.ts

@@ -0,0 +1,44 @@
+/********************************************************************************
+ * Copyright (c) 2021 TypeFox and others.
+ *
+ * This program and the accompanying materials are made available under the
+ * terms of the Eclipse Public License v. 2.0 which is available at
+ * http://www.eclipse.org/legal/epl-2.0.
+ *
+ * This Source Code may also be made available under the following Secondary
+ * Licenses when the conditions for such availability set forth in the Eclipse
+ * Public License v. 2.0 are satisfied: GNU General Public License, version 2
+ * with the GNU Classpath Exception which is available at
+ * https://www.gnu.org/software/classpath/license.html.
+ *
+ * SPDX-License-Identifier: EPL-2.0 OR GPL-2.0 WITH Classpath-exception-2.0
+ ********************************************************************************/
+
+import { ELLIPTIC_ANCHOR_KIND, RECTANGULAR_ANCHOR_KIND, DIAMOND_ANCHOR_KIND } from "./anchor";
+import { injectable } from "inversify";
+import { DiamondAnchor, EllipseAnchor, RectangleAnchor } from './polyline-anchors';
+import { BezierEdgeRouter } from './bezier-edge-router';
+
+@injectable()
+export class BezierEllipseAnchor extends EllipseAnchor {
+
+    get kind() {
+        return BezierEdgeRouter.KIND + ':' + ELLIPTIC_ANCHOR_KIND;
+    }
+}
+
+@injectable()
+export class BezierRectangleAnchor extends RectangleAnchor {
+
+    get kind() {
+        return BezierEdgeRouter.KIND + ':' + RECTANGULAR_ANCHOR_KIND;
+    }
+}
+
+@injectable()
+export class BezierDiamondAnchor extends DiamondAnchor {
+
+    get kind() {
+        return BezierEdgeRouter.KIND + ':' + DIAMOND_ANCHOR_KIND;
+    }
+}