@hpcc-js/graph 3.3.0 → 3.3.2

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@hpcc-js/graph",
-    "version": "3.3.0",
+    "version": "3.3.2",
     "description": "hpcc-js - Viz Graph",
     "type": "module",
     "main": "./dist/index.umd.cjs",
@@ -44,6 +44,9 @@
         "@hpcc-js/react": "^3.2.1",
         "@hpcc-js/util": "^3.3.0"
     },
+    "optionalPeerDependencies": {
+        "react": ">=18.0.0"
+    },
     "devDependencies": {
         "@hpcc-js/esbuild-plugins": "^1.4.0",
         "@hpcc-js/wasm-graphviz": "1.6.1",
@@ -70,5 +73,5 @@
         "url": "https://github.com/hpcc-systems/Visualization/issues"
     },
     "homepage": "https://github.com/hpcc-systems/Visualization",
-    "gitHead": "220704148d2a9cc72a4bfa5160107d6fdf37c914"
+    "gitHead": "a44813b7ce9c2bbf98a239f88005993513b8be13"
 }

package/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");

package/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,

package/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> {

package/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;

package/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>`;
+};

package/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);
     }
 
 }

package/src/html/graphHtmlT.ts

@@ -33,11 +33,9 @@ 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> {
@@ -45,5 +43,75 @@ export class GraphHtmlT<SG extends SubgraphBaseProps, V extends VertexBaseProps,
     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"]);

package/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);
 };
 

package/src/html/intersection.ts

@@ -0,0 +1,110 @@
+export interface Pos {
+    x: number;
+    y: number;
+}
+
+export interface Extent {
+    width: number;
+    height: number;
+}
+
+export interface Segment {
+    start: Pos;
+    end: Pos;
+}
+
+export interface Rectangle {
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+}
+
+function segmentSegment(s1: Segment, s2: Segment): Pos | undefined {
+    const { x: x1, y: y1 } = s1.start;
+    const { x: x2, y: y2 } = s1.end;
+    const { x: x3, y: y3 } = s2.start;
+    const { x: x4, y: y4 } = s2.end;
+
+    const denom = (x1 - x2) * (y3 - y4) - (y1 - y2) * (x3 - x4);
+    if (denom === 0) {
+        // Parallel lines  ---
+        return undefined;
+    }
+
+    const t = ((x1 - x3) * (y3 - y4) - (y1 - y3) * (x3 - x4)) / denom;
+    const u = -((x1 - x2) * (y1 - y3) - (y1 - y2) * (x1 - x3)) / denom;
+
+    if (t > 0 && t < 1 && u > 0 && u < 1) {
+        return {
+            x: x1 + t * (x2 - x1),
+            y: y1 + t * (y2 - y1)
+        };
+    }
+
+    return undefined;
+}
+
+function rectEdges(rect: Rectangle): Segment[] {
+    const r = {
+        topLeft: { x: rect.x - rect.width / 2, y: rect.y - rect.height / 2 },
+        topRight: { x: rect.x + rect.width / 2, y: rect.y - rect.height / 2 },
+        bottomRight: { x: rect.x + rect.width / 2, y: rect.y + rect.height / 2 },
+        bottomLeft: { x: rect.x - rect.width / 2, y: rect.y + rect.height / 2 }
+    };
+    return [
+        { start: r.bottomLeft, end: r.topLeft },
+        { start: r.topLeft, end: r.topRight },
+        { start: r.topRight, end: r.bottomRight },
+        { start: r.bottomRight, end: r.bottomLeft },
+    ];
+}
+
+export function rectangleSegment(rect: Rectangle, line: Segment): Pos | undefined {
+    for (const edge of rectEdges(rect)) {
+        const intersectionPoint = segmentSegment(edge, line);
+        if (intersectionPoint) {
+            return intersectionPoint;
+        }
+    }
+    return undefined;
+}
+
+function sortSegment(pos: Pos, line: Segment): Segment {
+    const distStart = Math.hypot(line.start.x - pos.x, line.start.y - pos.y);
+    const distEnd = Math.hypot(line.end.x - pos.x, line.end.y - pos.y);
+
+    if (distStart <= distEnd) {
+        return line;
+    } else {
+        return { start: line.end, end: line.start };
+    }
+}
+
+export function circleSegment(pos: Pos, r: number, line: Segment): Pos | undefined {
+    line = sortSegment(pos, line);
+    const { x: x1, y: y1 } = line.start;
+    const { x: x2, y: y2 } = line.end;
+
+    const dx = x2 - x1;
+    const dy = y2 - y1;
+
+    const a = dx * dx + dy * dy;
+    const b = 2 * (dx * (x1 - pos.x) + dy * (y1 - pos.y));
+    const c = (x1 - pos.x) * (x1 - pos.x) + (y1 - pos.y) * (y1 - pos.y) - r * r;
+
+    const discriminant = b * b - 4 * a * c;
+
+    if (discriminant < 0) {
+        return undefined;
+    }
+
+    const t1 = (-b + Math.sqrt(discriminant)) / (2 * a);
+
+    if (t1 >= 0 && t1 <= 1) {
+        return {
+            x: x1 + t1 * dx,
+            y: y1 + t1 * dy
+        };
+    }
+}

package/src/html/shape.ts

@@ -1,5 +1,6 @@
 import { svg } from "lit-html";
 import { extend } from "./component.ts";
+import { circleSegment, rectangleSegment } from "./intersection.ts";
 
 export const DEFAULT_SHAPE_SIZE = 32;
 
@@ -27,7 +28,9 @@ export const circle = ({
     stroke=${stroke}
     stroke-width=${strokeWidth}
     shape-rendering=${shapeRendering}
-/>`, diameter, diameter);
+/>`, diameter, diameter, (pos, line) => {
+        return circleSegment(pos, diameter / 2, line);
+    });
 };
 
 export interface RectangleProps extends BaseProps {
@@ -57,7 +60,9 @@ export const rectangle = ({
     stroke=${stroke}
     stroke-width=${strokeWidth}
     shape-rendering=${shapeRendering}
-/>`, width, height);
+/>`, width, height, (pos, line) => {
+        return rectangleSegment({ x: pos.x, y: pos.y, width, height }, line);
+    });
 };
 
 export interface SquareProps extends BaseProps {

package/src/html/textBox.ts

@@ -36,6 +36,10 @@ export const TextBox = ({
 
     return extend(svg`\
 ${rectTpl}
-${textTpl}`, rectTpl.extent.width, rectTpl.extent.height);
+${textTpl}`,
+        rectTpl.extent.width,
+        rectTpl.extent.height,
+        rectTpl.intersection
+    );
 };
 

package/src/html/vertex.ts

@@ -18,7 +18,6 @@ export interface VertexProps extends VertexBaseProps {
 }
 
 export const vertex: Component<VertexProps> = ({
-    id,
     text,
     textBox,
     textBoxAnnotationsE = [],
@@ -61,5 +60,8 @@ ${textBoxTpl}
 <g transform="translate(${iconAnnotationsTpl.extent.width / 2 + xIconAnnotationOffset} ${yIconOffset - yIconAnnotationOffset})">
     ${iconAnnotationsTpl}
 </g>
-`, textBoxTpl.extent.width, textBoxTpl.extent.height);
+`, textBoxTpl.extent.width, textBoxTpl.extent.height, (pos, line) => {
+        return iconTpl.intersection({ x: pos.x, y: yIconOffset + pos.y }, line) ??
+            textBoxTpl.intersection({ x: pos.x, y: pos.y }, line);
+    });
 };

package/types/common/graphT.d.ts

@@ -112,7 +112,6 @@ export declare class GraphT<SG extends SubgraphBaseProps, V extends VertexBasePr
     subgraphRenderer(): RendererT<SG>;
     subgraphRenderer(_: RendererT<SG>): this;
     updateSubgraphs(): this;
-    addMarkers(clearFirst?: boolean): void;
     enter(domNode: any, element: any): void;
     protected forceDirectedOptions(): FDOptions;
     private layoutOptions;

package/types/common/layouts/placeholders.d.ts

@@ -28,8 +28,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> {
     id: string | number;

package/types/html/component.d.ts

@@ -1,10 +1,10 @@
 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 declare function extend(result: TemplateResult, width: number, height: number): TemplateResultEx;
+export declare function extend(result: TemplateResult, width: number, height: number, intersection?: IntersectionFunc): TemplateResultEx;
 export type Component<T> = (props: T) => TemplateResult;

package/types/html/edge.d.ts

@@ -0,0 +1,6 @@
+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 declare const edge: ({ graphInstance, strokeWidth, path }: EdgeProps<VertexBaseProps>) => import("lit-html").TemplateResult<2>;

package/types/html/graphHtml.d.ts

@@ -1,5 +1,6 @@
-import { GraphHtmlT, SubgraphBaseProps, EdgeBaseProps } from "./graphHtmlT.ts";
+import { GraphHtmlT, SubgraphBaseProps } from "./graphHtmlT.ts";
 import { VertexProps } from "./vertex.ts";
-export declare class GraphHtml extends GraphHtmlT<SubgraphBaseProps, VertexProps, EdgeBaseProps> {
+import { EdgeProps } from "./edge.ts";
+export declare class GraphHtml extends GraphHtmlT<SubgraphBaseProps, VertexProps, EdgeProps<VertexProps>> {
     constructor();
 }

package/types/html/graphHtmlT.d.ts

@@ -6,4 +6,12 @@ export { html, svg, EdgeBaseProps, SubgraphBaseProps, VertexBaseProps };
 export declare function adapter<T extends BaseProps>(component: Component<T>): RendererT<T>;
 export declare class GraphHtmlT<SG extends SubgraphBaseProps, V extends VertexBaseProps, E extends EdgeBaseProps<V>> extends GraphT<SG, V, E> {
     constructor(subgraphRenderer?: Component<SG>, vertexRenderer?: Component<V>, edgeRenderer?: Component<E>);
+    enterMarkers(clearFirst?: boolean): void;
+    enter(domNode: any, element: any): void;
+}
+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;
 }

package/types/html/intersection.d.ts

@@ -0,0 +1,20 @@
+export interface Pos {
+    x: number;
+    y: number;
+}
+export interface Extent {
+    width: number;
+    height: number;
+}
+export interface Segment {
+    start: Pos;
+    end: Pos;
+}
+export interface Rectangle {
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+}
+export declare function rectangleSegment(rect: Rectangle, line: Segment): Pos | undefined;
+export declare function circleSegment(pos: Pos, r: number, line: Segment): Pos | undefined;

package/src/common/layouts/pathIntersection.ts

@@ -1,67 +0,0 @@
-export interface Pos {
-    x: number;
-    y: number;
-}
-
-export interface Segment {
-    start: Pos;
-    end: Pos;
-}
-
-export interface Rectangle {
-    topLeft: Pos;
-    topRight: Pos;
-    bottomLeft: Pos;
-    bottomRight: Pos;
-}
-
-export interface Rectangle2 {
-    x: number;
-    y: number;
-    w: number;
-    h: number;
-}
-
-function rectEdges(rect: Rectangle) {
-    return [
-        { start: rect.topLeft, end: rect.topRight },
-        { start: rect.topRight, end: rect.bottomRight },
-        { start: rect.bottomRight, end: rect.bottomLeft },
-        { start: rect.bottomLeft, end: rect.topLeft }
-    ];
-}
-
-function lineIntersection(segment1: Segment, segment2: Segment) {
-    const { x: x1, y: y1 } = segment1.start;
-    const { x: x2, y: y2 } = segment1.end;
-    const { x: x3, y: y3 } = segment2.start;
-    const { x: x4, y: y4 } = segment2.end;
-
-    const denom = (x1 - x2) * (y3 - y4) - (y1 - y2) * (x3 - x4);
-    if (denom === 0) return null; // Parallel lines
-
-    const t = ((x1 - x3) * (y3 - y4) - (y1 - y3) * (x3 - x4)) / denom;
-    const u = -((x1 - x2) * (y1 - y3) - (y1 - y2) * (x1 - x3)) / denom;
-
-    if (t > 0 && t < 1 && u > 0 && u < 1) {
-        return {
-            x: x1 + t * (x2 - x1),
-            y: y1 + t * (y2 - y1)
-        };
-    }
-
-    return null; // No intersection
-}
-
-export function intersection(rect: Rectangle2, line: Segment) {
-    for (const edge of rectEdges({
-        topLeft: { x: rect.x - rect.w / 2, y: rect.y - rect.h / 2 },
-        topRight: { x: rect.x + rect.w / 2, y: rect.y - rect.h / 2 },
-        bottomRight: { x: rect.x + rect.w / 2, y: rect.y + rect.h / 2 },
-        bottomLeft: { x: rect.x - rect.w / 2, y: rect.y + rect.h / 2 }
-    })) {
-        const intersectionPoint = lineIntersection(edge, line);
-        if (intersectionPoint) return intersectionPoint;
-    }
-    return null;
-}

package/types/common/layouts/pathIntersection.d.ts

@@ -1,24 +0,0 @@
-export interface Pos {
-    x: number;
-    y: number;
-}
-export interface Segment {
-    start: Pos;
-    end: Pos;
-}
-export interface Rectangle {
-    topLeft: Pos;
-    topRight: Pos;
-    bottomLeft: Pos;
-    bottomRight: Pos;
-}
-export interface Rectangle2 {
-    x: number;
-    y: number;
-    w: number;
-    h: number;
-}
-export declare function intersection(rect: Rectangle2, line: Segment): {
-    x: number;
-    y: number;
-};