draft impl of anchors

Issue #27
imixs · Apr 1, 2022 · 18df368 · 18df368
1 parent 25cd685
commit 18df368
Show file tree

Hide file tree

Showing 4 changed files with 280 additions and 182 deletions.
diff --git a/open-bpmn.glsp-client/open-bpmn-glsp/src/bpmn-element-views.tsx b/open-bpmn.glsp-client/open-bpmn-glsp/src/bpmn-element-views.tsx
@@ -118,6 +118,7 @@ export class IconView extends ShapeView {
 @injectable()
 export class GatewayNodeView extends ShapeView {
 	render(element: GatewayNode, context: RenderingContext): VNode | undefined {
+
 		if (!this.isVisible(element, context)) {
 			return undefined;
 		}
@@ -174,6 +175,9 @@ export class GatewayNodeView extends ShapeView {
 
 @injectable()
 export class EventNodeView extends ShapeView {
+
+	// render(node: Readonly<SShapeElement & Hoverable & Selectable>, context: RenderingContext, args?: IViewArgs): VNode | undefined {
+
 	render(element: EventNode, context: RenderingContext): VNode | undefined {
 		if (!this.isVisible(element, context)) {
 			return undefined;
@@ -203,10 +207,10 @@ export class EventNodeView extends ShapeView {
 		if (eventSymbol) {
 			vnode = (
 				// render circle with a event symbol and the label:heading
-				<g transform={'scale(1) translate(0,0)'} class-sprotty-node={true} class-mouseover={element.hoverFeedback}>
+				<g class-sprotty-node={true} class-mouseover={element.hoverFeedback}>
 					<circle r='20' cx='0' cy='0' ></circle>
 					<g class-bpmn-symbol={true}>
-						<path transform={'scale(2.0) translate(-7.5,-7.5)'}
+						<path
 							d={eventSymbol} />
 					</g>
 					{context.renderChildren(element)}
@@ -215,7 +219,7 @@ export class EventNodeView extends ShapeView {
 		} else {
 			// we do not found a header so simply draw a circle...
 			vnode = (
-				<g transform={'scale(1) translate(0,0)'} class-sprotty-node={true}>
+				<g class-sprotty-node={true}>
 					<circle r="20" cx="0" cy="0"></circle>
 				</g>
 			);

diff --git a/open-bpmn.glsp-client/open-bpmn-glsp/src/di.config.ts b/open-bpmn.glsp-client/open-bpmn-glsp/src/di.config.ts
@@ -47,7 +47,9 @@ import {
 	EventNode,
 	SequenceFlow,
 	BPMNSequenceFlowAnchor,
-	BPMNElementAnchor
+	BPMNElementAnchor,
+	BPMNPolylineEventAnchor,
+	BPMNEventElementAnchor
 } from '@open-bpmn/open-bpmn-model';
 import { IconView, GatewayNodeView, EventNodeView } from './bpmn-element-views';
 import { BPMNSequenceFlowView } from './bpmn-routing-views';
@@ -65,6 +67,9 @@ const bpmnDiagramModule = new ContainerModule((bind, unbind, isBound, rebind) =>
     bind(TYPES.IAnchorComputer).to(BPMNElementAnchor).inSingletonScope();
     bind(TYPES.IAnchorComputer).to(BPMNSequenceFlowAnchor).inSingletonScope();
 
+    bind(TYPES.IAnchorComputer).to(BPMNEventElementAnchor).inSingletonScope();
+    bind(TYPES.IAnchorComputer).to(BPMNPolylineEventAnchor).inSingletonScope();
+
     const context = { bind, unbind, isBound, rebind };
 
     configureDefaultModelElements(context);

diff --git a/open-bpmn.glsp-client/open-bpmn-model/src/bpmn-anchors.ts b/open-bpmn.glsp-client/open-bpmn-model/src/bpmn-anchors.ts
@@ -32,6 +32,7 @@ import {
 
 export const BPMN_ELEMENT_ANCHOR_KIND = 'bpmn-element';
 // export const BPMN_FLOW_ANCHOR_KIND = 'bpmn-flow';
+export const BPMN_EVENT_ANCHOR_KIND = 'bpmn-event';
 
 /**
  * This BPMNElementAnchor computes a centered anchor point of the BPMN FlowElements
@@ -54,12 +55,15 @@ export class BPMNElementAnchor implements IAnchorComputer {
 		if (b.width <= 0 || b.height <= 0) {
 			return b;
 		}
+
 		const bounds: Bounds = {
 			x: b.x - offset,
 			y: b.y - offset,
 			width: b.width + 2 * offset,
 			height: b.height + 2 * offset
 		};
+		console.log('...refPoint x=' + refPoint.x + ' y=' + refPoint.y);
+		console.log('...initial-bounds x=' + bounds.x + ' y=' + bounds.y + ' w=' + bounds.width + ' h=' + bounds.height);
 
 		/*
 		 * The refPoint is between west and east
@@ -88,6 +92,7 @@ export class BPMNElementAnchor implements IAnchorComputer {
 			}
 		}
 		// default....
+		console.log('..WARNING - default to center!');
 		return center(bounds);
 	}
 }
@@ -103,3 +108,76 @@ export class BPMNSequenceFlowAnchor extends RectangleAnchor {
 		return PolylineEdgeRouter.KIND + ':' + BPMN_ELEMENT_ANCHOR_KIND;
 	}
 }
+
+/*
+ * Special anchorComputer for Event Elements
+ */
+@injectable()
+export class BPMNEventElementAnchor implements IAnchorComputer {
+
+	static KIND = ManhattanEdgeRouter.KIND + ':' + BPMN_EVENT_ANCHOR_KIND;
+
+	get kind(): string {
+		return BPMNEventElementAnchor.KIND;
+	}
+
+	getAnchor(connectable: SConnectableElement, refPoint: Point, offset: number): Point {
+		const b = connectable.bounds;
+		if (b.width <= 0 || b.height <= 0) {
+			return b;
+		}
+
+		console.log(' .... BPMNEventElementAnchor....');
+		/*const bounds = {
+			x: b.x - 20,
+			y: b.y - 20,
+			width: 40,
+			height: 40
+		};*/
+		const bounds=b;
+
+		const c = center(bounds);
+		const dx = c.x - refPoint.x;
+		const dy = c.y - refPoint.y;
+		const distance = Math.sqrt(dx * dx + dy * dy);
+		const normX = (dx / distance) || 0;
+		const normY = (dy / distance) || 0;
+		return {
+			x: c.x - normX * (0.5 * bounds.width + offset),
+			y: c.y - normY * (0.5 * bounds.height + offset)
+		};
+	}
+}
+
+@injectable()
+export class BPMNPolylineEventAnchor implements IAnchorComputer {
+
+	static readonly KIND = 'polyline';
+
+    get kind(): string {
+        return BPMNPolylineEventAnchor.KIND + ':' + BPMN_EVENT_ANCHOR_KIND;
+    }
+
+    getAnchor(connectable: SConnectableElement, refPoint: Point, offset: number): Point {
+        // const bounds = connectable.bounds;
+		const b = connectable.bounds;
+        console.log(' .... BPMNPolylineEventAnchor....');
+		/*const bounds = {
+			x: b.x - 20,
+			y: b.y - 20,
+			width: 40,
+			height: 40
+		};*/
+		const bounds=b;
+        const c = center(bounds);
+        const dx = c.x - refPoint.x;
+        const dy = c.y - refPoint.y;
+        const distance = Math.sqrt(dx * dx + dy * dy);
+        const normX = (dx / distance) || 0;
+        const normY = (dy / distance) || 0;
+        return {
+            x: c.x - normX * (0.5 * bounds.width + offset),
+            y: c.y - normY * (0.5 * bounds.height + offset)
+        };
+    }
+}