none
Is there a way to select a Selected event on a node in a Glee.Graph? RRS feed

  • Question

  • Is there a way to select a Selected event on a node in a Glee.Graph?

    I'm trying to use glee to create a workflow status diagram, I'm populating the nodes from DB and then displaying graph on a webform. Ideally there would be a selected event for a node, or on click to allow the user to navigate to another page based on the node clicked. Has anyone had any experience w/ this?

    Thanks
    Tuesday, February 12, 2008 10:54 PM

Answers

  • Hi Bryan,

     I'm not sure what graph you have in mind.

    I hope for your purpose you can use SelectionChanged event of GViewer.

    WindowsApplicationSample, a sample coming with the package, shows how to do it.

    Thanks,

    Lev
    Wednesday, February 13, 2008 12:23 AM
  • Yes, you can do it. It looks like you do not need Drawing layer and the viewer but only need to reference Microsoft.Msagl.dll. Please check out sample DrawingFromGeometryGraph. This sample shows how to create a geometry graph, calculate the layot and access the geometry data.

     

    Thanks,

    Lev

    Wednesday, February 13, 2008 9:47 PM

All replies

  • Hi Bryan,

     I'm not sure what graph you have in mind.

    I hope for your purpose you can use SelectionChanged event of GViewer.

    WindowsApplicationSample, a sample coming with the package, shows how to do it.

    Thanks,

    Lev
    Wednesday, February 13, 2008 12:23 AM
  • Thanks for your quick response. I went back and looked at the WindowsApplicationSample and see how SelectionChanged is being used. My only problem is that I am trying to deliver/display this graph with Selection functionality via ASP.NET and a web form hence it seems like Gviewer will not help me, since I will be delivering the drawn graph via an http response, as an image bitmap or jpeg.

    This leads me to another question, is there a way to access the coordinates of the various nodes in the graph programatically? Are the coordinates stored in the Node or Edge Collections?

    The reason I ask is that my next solution would be to dynamically create an image map to overlay on the graph to allow the user to select/click on a node/edge and navigate somewhere (ie. another page, or cause an action, postback).


    Thanks again,
    Bryan
    Wednesday, February 13, 2008 6:49 PM
  • Yes, you can do it. It looks like you do not need Drawing layer and the viewer but only need to reference Microsoft.Msagl.dll. Please check out sample DrawingFromGeometryGraph. This sample shows how to create a geometry graph, calculate the layot and access the geometry data.

     

    Thanks,

    Lev

    Wednesday, February 13, 2008 9:47 PM
  • Is the DrawingFromGeometryGraph sample only in the MSAGL download? I currently only have the GLEE download, and the only sample I see in the Microsoft Research Directory is \WindowsApplicationSample.

    Thanks,
    Bryan
    Wednesday, February 13, 2008 11:10 PM
  • Yes, I forgot that this sample is not a part of GLEE. I hope you can get the idea from the following sample.

    The API could have changed quite a bit but you still should be able to get the geometry data.

    Code Snippet

    using System;

    using System.Collections.Generic;

    using System.ComponentModel;

    using System.Data;

    using System.Drawing;

    using System.Text;

    using System.Windows.Forms;

    using Microsoft.Msagl;

    using Microsoft.Msagl.Splines;

    using P = Microsoft.Msagl.Point;

    namespace DrawingFromMsaglGraph {

    public partial class Form1 : Form {

    GeometryGraph gleeGraph;

    public Form1() {

    InitializeComponent();

    this.SizeChanged += new EventHandler(Form1_SizeChanged);

    }

    void Form1_SizeChanged(object sender, EventArgs e) {

    this.Invalidate();

    }

    protected override void OnPaint(PaintEventArgs e) {

    base.OnPaint(e);

    if (gleeGraph == null)

    gleeGraph = CreateAndLayoutGraph();

     

     

    DrawFromGraph(e.Graphics);

    }

    private void DrawFromGraph(Graphics graphics) {

    SetGraphicsTransform(graphics);

    Pen pen = new Pen(Brushes.Black);

    DrawNodes(pen,graphics);

    DrawEdges(pen,graphics);

    }

    private void SetGraphicsTransform(Graphics graphics) {

    RectangleF r = this.ClientRectangle;

    Microsoft.Msagl.Splines.Rectangle gr = this.gleeGraph.BoundingBox;

    if (r.Height > 1 && r.Width > 1) {

    float scale = Math.Min(r.Width / (float)gr.Width, r.Height / (float)gr.Height);

    float g0 = (float)(gr.Left + gr.Right) / 2;

    float g1 = (float)(gr.Top + gr.Bottom) / 2;

    float c0 = (r.Left + r.Right) / 2;

    float c1 = (r.Top + r.Bottom) / 2;

    float dx = c0 - scale * g0;

    float dy = c1 + scale * g1;

    graphics.Transform = new System.Drawing.Drawing2D.Matrix(scale, 0, 0, -scale, dx, dy);

    }

    }

    private void DrawEdges( Pen pen, Graphics graphics) {

    foreach (Edge e in gleeGraph.Edges)

    DrawEdge(e, pen, graphics);

    }

    private void DrawEdge(Edge e, Pen pen, Graphics graphics) {

    ICurve curve = e.Curve;

    Curve c = curve as Curve;

    if (c != null) {

    foreach (ICurve s in c.Segments) {

    LineSegment l = s as LineSegment;

    if (l != null)

    graphics.DrawLine(pen, MsaglPointToDrawingPoint(l.Start), MsaglPointToDrawingPoint(l.End));

    CubicBezierSegment cs = s as CubicBezierSegment;

    if (cs != null)

    graphics.DrawBezier(pen, MsaglPointToDrawingPoint(cs.B(0)), MsaglPointToDrawingPoint(cs.B(1)), MsaglPointToDrawingPoint(cs.B(2)), MsaglPointToDrawingPoint(cs.B(3)));

    }

    if (e.ArrowheadAtSource)

    DrawArrow(e, pen, graphics, e.Curve.Start, e.ArrowheadAtSourcePosition);

    if (e.ArrowheadAtTarget)

    DrawArrow(e, pen, graphics, e.Curve.End, e.ArrowheadAtTargetPosition);

    }

    }

    private void DrawArrow(Edge e, Pen pen, Graphics graphics, P start, P end) {

    PointF[] points;

    float arrowAngle = 30;

    P dir = end - start;

    P h = dir;

    dir /= dir.Length;

    P s = new P(-dir.Y, dir.X);

    s *= h.Length * ((float)Math.Tan(arrowAngle * 0.5f * (Math.PI / 180.0)));

    points = new PointF[] { MsaglPointToDrawingPoint(start + s), MsaglPointToDrawingPoint(end), MsaglPointToDrawingPoint(start - s) };

    graphics.FillPolygon(pen.Brush, points);

    }

    private void DrawNodes(Pen pen, Graphics graphics) {

    foreach (Node n in gleeGraph.NodeMap.Values)

    DrawNode(n, pen, graphics);

    }

    private void DrawNode(Node n, Pen pen, Graphics graphics) {

    ICurve curve = n.MovedBoundaryCurve;

    Ellipse el = curve as Ellipse;

    if (el != null) {

    graphics.DrawEllipse(pen, new RectangleF((float)el.BBox.Left, (float)el.BBox.Bottom,

    (float)el.BBox.Width, (float)el.BBox.Height));

    } else {

    Curve c = curve as Curve;

    foreach (ICurve seg in c.Segments) {

    LineSegment l=seg as LineSegment;

    if(l!=null)

    graphics.DrawLine(pen, MsaglPointToDrawingPoint(l.Start),MsaglPointToDrawingPoint(l.End));

    }

    }

    }

    private System.Drawing.Point MsaglPointToDrawingPoint(Microsoft.Msagl.Point point) {

    return new System.Drawing.Point((int)point.X, (int)point.Y);

    }

    static internal GeometryGraph CreateAndLayoutGraph() {

    double w = 30;

    double h = 20;

    GeometryGraph graph = new GeometryGraph();

    Node a = new Node("a", new Ellipse(w, h, new P()));

    Node b = new Node("b", CurveFactory.CreateBox(w, h, new P()));

    graph.AddNode(a);

    graph.AddNode(b);

    Edge e = new Edge(a, b);

    e.ArrowheadAtSource = true;

    graph.AddEdge(e);

    graph.AddEdge(new Edge(a,b));

    graph.CalculateLayout();

    return graph;

    }

    }

    }

     

     

    Thanks,

    Lev

    Thursday, February 14, 2008 12:06 AM
  • Hi Lev,

    Firstly, great work, and keep it up.

    I just have a quick question re: GLEE.  Can it be rendered in an ASP.NET 2.0 page?  i am currently working on a project which, among other things, requires that a workflow type flowchart be displayed on the page.  The idea is that the user would create the workflow - essentially a tree of nodes, and then as they progress through the nodes, the graph would highlight a node depending on which step was being executed.

    Thanks,

    Ross
    Wednesday, March 26, 2008 11:31 PM
  • Hi Bryan,

    I am not familiar with ASP.NET, sorry.

    Lev

     

    Thursday, March 27, 2008 12:05 AM