Scaling a simple diagram for display in a window

[AP]

A I have a simple diagram (a vertical line of connected circles, of variable length) which I want to display in a pop-up window, to display a graphical indication of where a record is within a workflow.

I can get everything to work, except that by default the diagram has a lot of surrounding white space, that causes the windows scrollbars to show, even when the whole diagram easily fits into the visible space.

I would like to scale the diagram to always fit in the window (without showing scrollbars). I've tried using the bringIntoView method on the databound event, but this doesn't work (the API documentation doesn't give any clues as to what exactly the View area is). I would also like to keep the zoom functionality disabled.

 My current window definition is:-

 

@(Html.Kendo().Window()
    .Name("historyWnd")
    .Title("Approval History")
    .Content(@<text>




    @(Html.Kendo().Diagram()
      .Name("diagram")
      .DataSource(dataSource => dataSource
          .Read(read => read
              .Action("GetHistory", "MyVacancies").Data("vFilter")
          )
          .Model(m => m.Children("Items"))
      )
      .Editable(false)
      .Pannable(false)
      //.Zoom(0)
      .Layout(l => l.Type(DiagramLayoutType.Layered))
      .ShapeDefaults(sd => sd
          .Visual("visualTemplate")
          .Content(c => c
              .Template("#= dataItem.PositionName #")
              .FontSize(8)
              .Color("white")
          )

      )
      .ConnectionDefaults(cd => cd
          .Stroke(s => s
              .Color("#979797")
              .Width(2)
          )
      )
      .Events(events => events.DataBound("onDataBound"))

    )



    </text>)
    .Modal(true)
    .Visible(false)
    .Height(450)
    .Width(300)
    )

and the template is:-

 

<script>
    function visualTemplate(options) {
        var dataviz = kendo.dataviz;
        var g = new dataviz.diagram.Group();
        var dataItem = options.dataItem;


        g.append(new dataviz.diagram.Circle({
            width: 70,
            height: 70,
            fill: dataItem.Colour,
            stroke: {
                width: 0
            }
        }));




        return g;
    }

</script>

Thanks

[Niko]

Hello Andrew,

The Diagram widget does not offer a built-in implementation of zoom-to-fit. Still, using the API, it shouldn't be a problem to implement this functionality.

Important aspects of correctly calculating the correct zoom is to have the right dimensions. The Diagram API can give you this information easily.

• Get the rectangle of all all shapes combined, i.e. whole diagram content - use boundingBox
• Get the dimensions of the viewport - use viewport

Then you need to zoom and pan the diagram to the correct positions. Just make sure that you zoom the diagram before panning for easier calculations.

Regards,
Niko
Telerik

[AP]

Thanks for the reply, however I'm not familiar with canvas objects in html.

The documentation is very sparse, and seriously lacking in examples. The viewport method definition doesn't even give the properties that a viewport returns (height, width, x and y once I looked at it in the browser debugger)!

 What does the point object do in the zoom method (and the Pan object in the Pan method)?

Just using the zoom function to reduce the diagram, based on it's height, scales the diagram, however the window still shows scrollbars, so the diagram is a lot bigger it needs to be. How can I stop these? Also, using the zoom method, enables the user to zoom the diagram, which I don't want. How can I scale the diagram, but disable user zooming?

[Niko]

Hello Andrew,

Thank you for the feedback on the documentation. We will try to improve the information there so that there are more examples and better descriptions for the Diagram widget.

As for the other questions  - the point in the zoom method is the center point of the zoom. Think of this point as the position that will not change during the zooming.

The point in the pan method is the translation transformation that should be applied to the diagram canvas relative to the viewport top/left position.

Zooming can be stopped by preventing the zoomStart event. Here is a dojo example. You can still zoom the diagram through the zoom method, but zooming through the mouse wheel will be prevented.

As for the scrollbar, I don't understand the problem very clearly. Could you, please, send me a dojo sample that demonstrates the problem?

Looking forward to your sample.

 

Regards,
Niko
Telerik

[AP]

Thanks. I understand what the point object for the zoom method does. However , the documentation just indicates it's an object:

zoom

Zooms in or out of the diagram.

Parameters

zoom Number

The zoom factor.

point Object

The point to zoom into or out of.

How do I define a point object, to pass to the method?

 Setting up a dojo example is tricky, as the diagram is data bound (as its showing the progress of a record through a workflow).

The definition of the diagram, and it's containing window is:-

 

@(Html.Kendo().Window()
    .Name("historyWnd")
    .Title("Approval History")
    .Content(@<text>




    @(Html.Kendo().Diagram()
      .Name("diagram")
      .DataSource(dataSource => dataSource
          .Read(read => read
              .Action("GetHistory", "MyVacancies").Data("vFilter")
          )
          .Model(m => m.Children("Items"))
      )
      .Editable(false)
      .Pannable(false)
      .Zoom(0)
      .Layout(l => l.Type(DiagramLayoutType.Layered))
      .ShapeDefaults(sd => sd
          .Visual("visualTemplate")
          .Connectors(cs=>
          {
          cs.Add().Name("Auto");
          cs.Add().Name("customTop").Position("topConnector()");
          cs.Add().Name("customBottom").Position("bottomConnector()");
          })


      )
      .ConnectionDefaults(cd => cd
          .Stroke(s => s
              .Color("#979797")
              .Width(3)
          )
      )
      .Events(events => events.DataBound("onDataBound"))

    )



    </text>)
    .Modal(true)
    .Visible(false)
    .Height(450)
    .Width(300)
    )

The window is 450 x 300, but even when zooming significantly to reduce the image, the window still shows a vertical scrollbar, even though the diagram is fully visible without scrolling (with room to spare).

I've attached a screenshot of this.

 

 

[Niko]

Hello Andrew,

You need to make sure that the diagram widget container (viewport) has the size that you need. I used the following setup and it works on my end:

.HtmlAttributes(new { style="width: 100%; height: 99%;" })

 

The height is set to 99% and not 100% because of a quirk in Chrome, where the vertical scrolllbar will still be visible.

Thank you for your feedback on the documentation. I have updated the types of points in the zoom and pan definitions as well as other methods. As a sign of gratitude for your feedback I have updated your Telerik points.

Let me know if that suggestion does not work.

Regards,
Niko
Telerik

[AP]

Niko,

 Thanks for the response. I've got it working, by setting the diagram size to just smaller than the window, and scaling where appropriate.

However, If I try setting the size to 100% and 99%, the diagram seems to get very cropped. I've attached two screen shots, one without the HTMLAttributes, and one with (no zoom applied).

[Dimo]

Hi Andrew,

Web standards reqiure elements with a percentage height require their parent to have a height style too. The rule applies recursively until an element with a pixel height is reached, or until the <html> element is reached.

Judging by the initially provided code, the Window widget has a height, so its content container will have a height style. Do you by any change have some height-less element inside the Window content and outside the Diagram? Such an element will disrupt the Diagram's ability to obey its percentage height style.

Here is a video to better illustrate what I mean:

http://screencast.com/t/qzTvUSMBZpdn

It is based on this demo:

http://demos.telerik.com/aspnet-mvc/diagram/index

Regards,
Dimo
Telerik