@eclipse-glsp-examples/workflow-glsp 0.9.0-next.d9bed812 → 0.9.0-next.e99d24cc

package/src/index.ts

@@ -1,5 +1,5 @@
 /********************************************************************************
- * Copyright (c) 2019 EclipseSource and others.
+ * Copyright (c) 2019-2021 EclipseSource 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
@@ -13,10 +13,9 @@
  *
  * SPDX-License-Identifier: EPL-2.0 OR GPL-2.0 WITH Classpath-exception-2.0
  ********************************************************************************/
-import createWorkflowDiagramContainer from "./di.config";
+import createWorkflowDiagramContainer from './di.config';
 
-export * from "./model";
-export * from "./workflow-views";
-export * from "./direct-task-editing/direct-task-editor";
+export * from './model';
+export * from './workflow-views';
+export * from './direct-task-editing/direct-task-editor';
 export { createWorkflowDiagramContainer };
-

package/src/model.ts

@@ -1,5 +1,5 @@
 /********************************************************************************
- * Copyright (c) 2020 EclipseSource and others.
+ * Copyright (c) 2020-2021 EclipseSource 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
@@ -18,6 +18,7 @@ import {
     connectableFeature,
     deletableFeature,
     DiamondNode,
+    EditableLabel,
     fadeFeature,
     hoverFeedbackFeature,
     isEditableLabel,
@@ -29,24 +30,35 @@ import {
     nameFeature,
     popupFeature,
     RectangularNode,
+    SChildElement,
     SEdge,
     selectFeature,
     SModelElement,
     SShapeElement,
     WithEditableLabel,
     withEditLabelFeature
-} from "@eclipse-glsp/client";
-
+} from '@eclipse-glsp/client';
 
 export class TaskNode extends RectangularNode implements Nameable, WithEditableLabel {
-    static readonly DEFAULT_FEATURES = [connectableFeature, deletableFeature, selectFeature, boundsFeature,
-        moveFeature, layoutContainerFeature, fadeFeature, hoverFeedbackFeature, popupFeature, nameFeature, withEditLabelFeature];
-    name: string = "";
+    static readonly DEFAULT_FEATURES = [
+        connectableFeature,
+        deletableFeature,
+        selectFeature,
+        boundsFeature,
+        moveFeature,
+        layoutContainerFeature,
+        fadeFeature,
+        hoverFeedbackFeature,
+        popupFeature,
+        nameFeature,
+        withEditLabelFeature
+    ];
+    name = '';
     duration?: number;
     taskType?: string;
     reference?: string;
 
-    get editableLabel() {
+    get editableLabel(): (SChildElement & EditableLabel) | undefined {
         const headerComp = this.children.find(element => element.type === 'comp:header');
         if (headerComp) {
             const label = headerComp.children.find(element => element.type === 'label:heading');
@@ -66,7 +78,6 @@ export class WeightedEdge extends SEdge {
     probability?: string;
 }
 
-
 export class ActivityNode extends DiamondNode {
     nodeType: string = ActivityNode.Type.UNDEFINED;
     size = {
@@ -84,7 +95,7 @@ export namespace ActivityNode {
         export const MERGE = 'mergeNode';
         export const JOIN = 'joinNode';
         export const FORK = 'forkNode';
-        export const UNDEFINED = "undefined";
+        export const UNDEFINED = 'undefined';
     }
 }
 
@@ -92,9 +103,34 @@ export class Icon extends SShapeElement implements LayoutContainer {
     static readonly DEFAULT_FEATURES = [boundsFeature, layoutContainerFeature, layoutableChildFeature, fadeFeature];
 
     layout: string;
-    layoutOptions?: { [key: string]: string | number | boolean; };
+    layoutOptions?: { [key: string]: string | number | boolean };
     size = {
         width: 32,
         height: 32
     };
 }
+
+export class CategoryNode extends RectangularNode implements Nameable, WithEditableLabel {
+    static readonly DEFAULT_FEATURES = [
+        deletableFeature,
+        selectFeature,
+        boundsFeature,
+        moveFeature,
+        layoutContainerFeature,
+        fadeFeature,
+        hoverFeedbackFeature,
+        popupFeature,
+        nameFeature,
+        withEditLabelFeature
+    ];
+
+    name = '';
+
+    get editableLabel(): (SChildElement & EditableLabel) | undefined {
+        const label = this.children.find(element => element.type === 'label:heading');
+        if (label && isEditableLabel(label)) {
+            return label;
+        }
+        return undefined;
+    }
+}

package/src/workflow-views.tsx

@@ -1,5 +1,5 @@
 /********************************************************************************
- * Copyright (c) 2019 EclipseSource and others.
+ * Copyright (c) 2019-2021 EclipseSource 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
@@ -17,84 +17,37 @@ import {
     angleOfPoint,
     IView,
     Point,
-    PolylineEdgeView,
-    RectangularNodeView,
+    PolylineEdgeViewWithGapsOnIntersections,
     RenderingContext,
     SEdge,
-    SShapeElement,
     toDegrees
-} from "@eclipse-glsp/client";
-import { injectable } from "inversify";
-import * as snabbdom from "snabbdom-jsx";
-import { VNode } from "snabbdom/vnode";
+} from '@eclipse-glsp/client';
+import { injectable } from 'inversify';
+import { VNode } from 'snabbdom';
+import { svg } from 'sprotty';
+import { Icon } from './model';
 
-import { ActivityNode, Icon, TaskNode, WeightedEdge } from "./model";
-
-const JSX = { createElement: snabbdom.svg };
-
-@injectable()
-export class TaskNodeView extends RectangularNodeView {
-    render(node: TaskNode, context: RenderingContext): VNode {
-        const rcr = this.getRoundedCornerRadius(node);
-        const graph = <g>
-            <rect class-sprotty-node={true} class-task={true}
-                class-automated={node.taskType === 'automated'}
-                class-manual={node.taskType === 'manual'}
-                class-mouseover={node.hoverFeedback} class-selected={node.selected}
-                x={0} y={0} rx={rcr} ry={rcr}
-                width={Math.max(0, node.bounds.width)} height={Math.max(0, node.bounds.height)}></rect>
-            {context.renderChildren(node)}
-        </g>;
-        return graph;
-    }
-
-    protected getRoundedCornerRadius(node: SShapeElement): number {
-        return 5;
-    }
-}
-
-@injectable()
-export class ForkOrJoinNodeView extends RectangularNodeView {
-    render(node: ActivityNode, context: RenderingContext): VNode {
-        const graph = <g>
-            <rect class-sprotty-node={true} class-forkOrJoin={true}
-                class-mouseover={node.hoverFeedback} class-selected={node.selected}
-                width={10} height={Math.max(50, node.bounds.height)}></rect>
-        </g>;
-        return graph;
-    }
-}
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+const JSX = { createElement: svg };
 
 @injectable()
-export class WorkflowEdgeView extends PolylineEdgeView {
+export class WorkflowEdgeView extends PolylineEdgeViewWithGapsOnIntersections {
     protected renderAdditionals(edge: SEdge, segments: Point[], context: RenderingContext): VNode[] {
+        const additionals = super.renderAdditionals(edge, segments, context);
         const p1 = segments[segments.length - 2];
         const p2 = segments[segments.length - 1];
-        return [
-            <path class-sprotty-edge={true} class-arrow={true} d="M 1.5,0 L 10,-4 L 10,4 Z"
-                transform={`rotate(${toDegrees(angleOfPoint({ x: p1.x - p2.x, y: p1.y - p2.y }))} ${p2.x} ${p2.y}) translate(${p2.x} ${p2.y})`} />
-        ];
-    }
-}
-
-@injectable()
-export class WeightedEdgeView extends WorkflowEdgeView {
-    render(edge: Readonly<WeightedEdge>, context: RenderingContext): VNode {
-        const router = this.edgeRouterRegistry.get(edge.routerKind);
-        const route = router.route(edge);
-        if (route.length === 0)
-            return this.renderDanglingEdge("Cannot compute route", edge, context);
-
-        return <g class-sprotty-edge={true}
-            class-weighted={true}
-            class-low={edge.probability === 'low'}
-            class-medium={edge.probability === 'medium'}
-            class-high={edge.probability === 'high'}
-            class-mouseover={edge.hoverFeedback}>
-            {this.renderLine(edge, route, context)}
-            {this.renderAdditionals(edge, route, context)}
-            {context.renderChildren(edge, { route })}
-        </g>;
+        const arrow = (
+            <path
+                class-sprotty-edge={true}
+                class-arrow={true}
+                d='M 1.5,0 L 10,-4 L 10,4 Z'
+                transform={`rotate(${toDegrees(angleOfPoint({ x: p1.x - p2.x, y: p1.y - p2.y }))} ${p2.x} ${p2.y}) translate(${p2.x} ${
+                    p2.y
+                })`}
+            />
+        );
+        additionals.push(arrow);
+        return additionals;
     }
 }
 
@@ -102,13 +55,15 @@ export class WeightedEdgeView extends WorkflowEdgeView {
 export class IconView implements IView {
     render(element: Icon, context: RenderingContext): VNode {
         const radius = this.getRadius();
-        return <g>
-            <circle class-sprotty-icon={true} r={radius} cx={radius} cy={radius}></circle>
-            {context.renderChildren(element)}
-        </g>;
+        return (
+            <g>
+                <circle class-sprotty-icon={true} r={radius} cx={radius + 2} cy={radius + 2}></circle>
+                {context.renderChildren(element)}
+            </g>
+        );
     }
 
-    getRadius() {
-        return 16;
+    getRadius(): number {
+        return 14;
     }
 }