fix: Resize markers and ensure correct colours

packages/graph/src/common/graphT.ts

@@ -564,9 +564,6 @@ export class GraphT<SG extends SubgraphBaseProps, V extends VertexBaseProps, E e
     moveEdgePlaceholder(ep: EdgePlaceholder<V, E>, transition: boolean): this {
         const edgeLayout = {
             ...this._layoutAlgo.edgePath(ep as any, this.edgeArcDepth()),
-            markerStart: `url(#${this.id()}_circleFoot)`,
-            markerEnd: `url(#${this.id()}_arrowHead)`,
-
         };
         const context = this;
         if (this._edgeRenderer && ep.element) {
@@ -877,57 +874,6 @@ export class GraphT<SG extends SubgraphBaseProps, V extends VertexBaseProps, E e
         return this;
     }
 
-    addMarkers(clearFirst: boolean = false) {
-        if (clearFirst) {
-            this._svgDefs.select("#" + this._id + "_arrowHead").remove();
-            this._svgDefs.select("#" + this._id + "_circleFoot").remove();
-            this._svgDefs.select("#" + this._id + "_circleHead").remove();
-        }
-        this._svgDefs.append("marker")
-            .attr("class", "marker")
-            .attr("id", this._id + "_arrowHead")
-            .attr("viewBox", "0 0 10 10")
-            .attr("refX", 10)
-            .attr("refY", 5)
-            .attr("markerWidth", 8)
-            .attr("markerHeight", 8)
-            .attr("markerUnits", "strokeWidth")
-            .attr("orient", "auto")
-            .append("polyline")
-            .attr("points", "0,0 10,5 0,10 1,5")
-            ;
-        this._svgDefs.append("marker")
-            .attr("class", "marker")
-            .attr("id", this._id + "_circleFoot")
-            .attr("viewBox", "0 0 10 10")
-            .attr("refX", 1)
-            .attr("refY", 5)
-            .attr("markerWidth", 7)
-            .attr("markerHeight", 7)
-            .attr("markerUnits", "strokeWidth")
-            .attr("orient", "auto")
-            .append("circle")
-            .attr("cx", 5)
-            .attr("cy", 5)
-            .attr("r", 4)
-            ;
-        this._svgDefs.append("marker")
-            .attr("class", "marker")
-            .attr("id", this._id + "_circleHead")
-            .attr("viewBox", "0 0 10 10")
-            .attr("refX", 9)
-            .attr("refY", 5)
-            .attr("markerWidth", 7)
-            .attr("markerHeight", 7)
-            .attr("markerUnits", "strokeWidth")
-            .attr("orient", "auto")
-            .append("circle")
-            .attr("cx", 5)
-            .attr("cy", 5)
-            .attr("r", 4)
-            ;
-    }
-
     enter(domNode, element) {
         super.enter(domNode, element);
 
@@ -936,7 +882,6 @@ export class GraphT<SG extends SubgraphBaseProps, V extends VertexBaseProps, E e
         this._centroidFilter = new SVGGlowFilter(this._svgDefs, this._id + "_glow");
         this._svgDefsCat = this._svgDefs.append("g");
         this._svgDefsAnn = this._svgDefs.append("g");
-        this.addMarkers();
         this._subgraphG = this._renderElement.append("g");
         this._edgeG = this._renderElement.append("g");
         this._vertexG = this._renderElement.append("g");

packages/graph/src/common/layouts/layout.ts

@@ -2,7 +2,6 @@ import { Graph2 as GraphCollection } from "@hpcc-js/util";
 import { curveBasis as d3CurveBasis, curveCardinal as d3CurveCardinal, line as d3Line } from "d3-shape";
 import { EdgePlaceholder, SubgraphPlaceholder, VertexPlaceholder } from "./placeholders.ts";
 import { EdgeLayout } from "./tree.ts";
-import { intersection } from "./pathIntersection.ts";
 
 export type Point = [number, number];
 
@@ -105,8 +104,8 @@ export class Layout implements ILayout {
     edgeLine(ep: EdgePlaceholder): Line {
         const sPos = { ...this._graph.projectPlacholder(ep.source), w: ep.source?.renderResult?.extent?.width ?? 0, h: ep.source?.renderResult?.extent?.height ?? 0 };
         const tPos = { ...this._graph.projectPlacholder(ep.target), w: ep.target?.renderResult?.extent?.width ?? 0, h: ep.target?.renderResult?.extent?.height ?? 0 };
-        const sIntersect = intersection(sPos, { start: sPos, end: tPos });
-        const tIntersect = intersection(tPos, { start: sPos, end: tPos });
+        const sIntersect = ep.source.renderResult?.intersection ? ep.source.renderResult.intersection(sPos, { start: sPos, end: tPos }) : null;
+        const tIntersect = ep.target.renderResult?.intersection ? ep.target.renderResult.intersection(tPos, { start: sPos, end: tPos }) : null;
         return {
             source: {
                 x: sIntersect ? sIntersect.x : sPos.x,

packages/graph/src/common/layouts/placeholders.ts

@@ -33,8 +33,6 @@ export interface EdgeBaseProps<V extends VertexBaseProps = VertexBaseProps> exte
     stroke?: string;
     path?: string;
     fontFamily?: string;
-    markerStart?: string;
-    markerEnd?: string;
 }
 
 export interface HierarchyBase<SG extends SubgraphBaseProps, V extends VertexBaseProps> {

packages/graph/src/html/component.ts

@@ -1,13 +1,17 @@
 import type { HTMLTemplateResult, SVGTemplateResult } from "lit-html";
+import type { Pos, Segment, Extent } from "./intersection.ts";
 
 export type TemplateResult = HTMLTemplateResult | SVGTemplateResult;
+export type IntersectionFunc = (pos: Pos, line: Segment) => Pos | null;
 export type TemplateResultEx = TemplateResult & {
-    extent?: { width: number, height: number };
+    extent?: Extent;
+    intersection: IntersectionFunc;
 };
-export function extend(result: TemplateResult, width: number, height: number): TemplateResultEx {
+export function extend(result: TemplateResult, width: number, height: number, intersection: IntersectionFunc = (pos: Pos, line: Segment) => null): TemplateResultEx {
     return {
         ...result,
-        extent: { width, height }
+        extent: { width, height },
+        intersection
     };
 }
 export type Component<T> = (props: T) => TemplateResult;

packages/graph/src/html/edge.ts

@@ -0,0 +1,15 @@
+import { svg } from "lit-html";
+import type { SubgraphBaseProps, EdgeBaseProps, VertexBaseProps } from "../common/layouts/placeholders.ts";
+import { GraphHtmlT } from "./graphHtmlT.ts";
+
+export interface EdgeProps<V extends VertexBaseProps> extends EdgeBaseProps<V> {
+    graphInstance: GraphHtmlT<SubgraphBaseProps, V, EdgeProps<V>>;
+}
+
+export const edge = ({
+    graphInstance,
+    strokeWidth,
+    path
+}: EdgeProps<VertexBaseProps>) => {
+    return svg`<path d="${path}" marker-start="url(#${graphInstance.id()}_source${graphInstance.sourceMarker()})" marker-end="url(#${graphInstance.id()}_target${graphInstance.targetMarker()})" style="stroke-width:${strokeWidth}px"></path>`;
+};

packages/graph/src/html/graphHtml.ts

@@ -1,9 +1,11 @@
 import { GraphHtmlT, SubgraphBaseProps, EdgeBaseProps } from "./graphHtmlT.ts";
 import { vertex, VertexProps } from "./vertex.ts";
+import { edge, EdgeProps } from "./edge.ts";
+import { Vertex } from "@hpcc-js/util";
 
-export class GraphHtml extends GraphHtmlT<SubgraphBaseProps, VertexProps, EdgeBaseProps> {
+export class GraphHtml extends GraphHtmlT<SubgraphBaseProps, VertexProps, EdgeProps<VertexProps>> {
     constructor() {
-        super(undefined, vertex);
+        super(undefined, vertex, edge);
     }
 
 }

packages/graph/src/html/graphHtmlT.ts

@@ -33,17 +33,85 @@ const defaultVertexRenderer = ({
 
 const defaultEdgeRenderer = ({
     strokeWidth,
-    path,
-    markerStart,
-    markerEnd,
+    path
 }: EdgeBaseProps<VertexBaseProps>) => {
-    return svg`<path d="${path}" marker-start="${markerStart}" marker-end="${markerEnd}" style="stroke-width:${strokeWidth}px"></path>`;
+    return svg`<path d="${path}" style="stroke-width:${strokeWidth}px"></path>`;
 };
 
 export class GraphHtmlT<SG extends SubgraphBaseProps, V extends VertexBaseProps, E extends EdgeBaseProps<V>> extends GraphT<SG, V, E> {
 
     constructor(subgraphRenderer: Component<SG> = defaultSubgraphRenderer, vertexRenderer: Component<V> = defaultVertexRenderer, edgeRenderer: Component<E> = defaultEdgeRenderer) {
         super(adapter(subgraphRenderer), adapter<V>(vertexRenderer), adapter(edgeRenderer));
     }
+
+    enterMarkers(clearFirst: boolean = false) {
+        if (clearFirst) {
+            this._svgDefs.select("#" + this._id + "_sourceDot").remove();
+            this._svgDefs.select("#" + this._id + "_targetDot").remove();
+            this._svgDefs.select("#" + this._id + "_targetArrow").remove();
+        }
+        this._svgDefs.append("marker")
+            .attr("class", "marker")
+            .attr("id", this._id + "_sourceDot")
+            .attr("refX", 1)
+            .attr("refY", 3)
+            .attr("markerWidth", 6)
+            .attr("markerHeight", 6)
+            .attr("markerUnits", "strokeWidth")
+            .attr("orient", "auto")
+            .append("circle")
+            .attr("cx", 3)
+            .attr("cy", 3)
+            .attr("r", 1.5)
+            .attr("fill", "context-stroke")
+            .attr("stroke", "context-stroke")
+            ;
+        this._svgDefs.append("marker")
+            .attr("class", "marker")
+            .attr("id", this._id + "_targetDot")
+            .attr("refX", 5)
+            .attr("refY", 3)
+            .attr("markerWidth", 6)
+            .attr("markerHeight", 6)
+            .attr("markerUnits", "strokeWidth")
+            .attr("orient", "auto")
+            .append("circle")
+            .attr("cx", 3)
+            .attr("cy", 3)
+            .attr("r", 1.5)
+            .attr("fill", "context-stroke")
+            .attr("stroke", "context-stroke")
+            ;
+        this._svgDefs.append("marker")
+            .attr("class", "marker")
+            .attr("id", this._id + "_targetArrow")
+            .attr("viewBox", "0 0 10 10")
+            .attr("refX", 10)
+            .attr("refY", 5)
+            .attr("markerWidth", 5)
+            .attr("markerHeight", 5)
+            .attr("markerUnits", "strokeWidth")
+            .attr("orient", "auto")
+            .append("polyline")
+            .attr("points", "0,0 10,5 0,10 0,5")
+            .attr("fill", "context-stroke")
+            .attr("stroke", "context-stroke")
+            ;
+    }
+
+    enter(domNode, element) {
+        super.enter(domNode, element);
+        this.enterMarkers();
+    }
 }
 GraphHtmlT.prototype._class += " graph_GraphHtmlT";
+
+export interface GraphHtmlT<SG extends SubgraphBaseProps, V extends VertexBaseProps, E extends EdgeBaseProps<V>> extends GraphT<SG, V, E> {
+    sourceMarker(): "Dot" | "None";
+    sourceMarker(_: "Dot" | "None"): this;
+    targetMarker(): "Arrow" | "Dot" | "None";
+    targetMarker(_: "Arrow" | "Dot" | "None"): this;
+}
+
+GraphHtmlT.prototype.publish("sourceMarker", "Dot", "set", "Target Marker", ["Dot", "None"]);
+GraphHtmlT.prototype.publish("targetMarker", "Arrow", "set", "Target Marker", ["Arrow", "Dot", "None"]);

packages/graph/src/html/icon.ts

@@ -59,6 +59,6 @@ export function icon({
 <g>
 ${shapeTpl}
 ${imageTpl}
-</g>`, shapeTpl.extent.width, shapeTpl.extent.height);
+</g>`, shapeTpl.extent.width, shapeTpl.extent.height, shapeTpl.intersection);
 };