microsoft / msagljs

A JavaScript graph layout engine: port of MSAGL
https://microsoft.github.io/msagljs/
MIT License
146 stars 15 forks source link

How to state which sides of the target nodes an edge should start from or end at? #74

Closed kristianhasselknippe closed 7 months ago

kristianhasselknippe commented 8 months ago

I'm trying to use @msagl/core for layout, and then render the node graph myself, but the edges are always routed from the top left of the nodes. Is is possible to specify an offset or something for the start and end of the edges before layout is calculated?

Thanks a lot for any help.

levnach commented 8 months ago

Sorry, @kristianhasselknippe , I do not follow. What is your scenario? Can you please provide a snippet of code and an image to illustrate the problem? In general, msagljs has several routing algorithms implemented, and the edges have ports that are not exposed in the API. It can be changed.

kristianhasselknippe commented 8 months ago

Certainly, i realise my question wasn't that clear.

I have something like the following code, which builds a node graph based on my own internal node graph structures (which i've left out from the snippet):

function calculateLayout(nodes, edges) {
    const nodeMap = new Map()
    const g = new agl.Graph(graph.name)
    for (const node of graph.nodes) {
        const nodeObj = new Node(node.id)
        const nodeGeom = new GeomNode(nodeObj)
        nodeGeom.boundaryCurve = CurveFactory.createRectangle(300, 250, new agl.Point(0, 0))
        nodeMap.set(node.id, nodeObj)
        g.addNode(nodeObj)
    }

    for (const edge of graph.edges) {
        const source = nodeMap.get(edge.from)
        const target = nodeMap.get(edge.to)
        const e = new Edge(source, target)
        const egeom = new GeomEdge(e)
    }

    const geomGraph = new GeomGraph(g)
    const layoutSettings = new SugiyamaLayoutSettings()
    layoutSettings.layerDirection = agl.LayerDirectionEnum.LR
    geomGraph.layoutSettings = layoutSettings

    layoutGraphWithSugiayma(geomGraph, new CancelToken(), true)

    // some more code gathering data from the resulting layout
}

I'm getting the following kind of layout

Untitled__Visual_Workspace_for_Innovation

but I'm trying to achive something more like this, where the arrows start and end points are on the sides of the node rectangles, instead of the top left:

Untitled__Visual_Workspace_for_Innovation

I hope this makes it more clear.

levnach commented 8 months ago

My bet is that your code that renders the nodes is off :-) How do you draw a node?

kristianhasselknippe commented 7 months ago

I've been playing around with my code some more, and i must have been reading the start and end points of the edge curves wrong. It works as expected now :) Thanks for the quick response.