Code (Javascript)

function onZoomIn(diagramName) {
    var diagram = $find(diagramName);
    console.log(diagram);
    if (diagram.zoomFactor > 200) return;
    diagram.setZoomFactor(diagram.zoomFactor + 10);
}

function onZoomOut(diagramName) {
    var diagram = $find(diagramName);
    if (diagram.zoomFactor < 19) return;
    diagram.setZoomFactor(diagram.zoomFactor - 10);
}


function onZoomToFit(diagramName) {
    var diagram = $find(diagramName);
    diagram.zoomToFit();
}

 

Code (HTML)

 <a onclick="javascript:onZoomIn('ProblemTreeDiagram');" class="btn btn-primary" title="Zoom In">
                                        <span class="glyphicon glyphicon-zoom-in"></span>
                                    </a>

                                    <a onclick="javascript:onZoomOut('ProblemTreeDiagram');" class="btn btn-primary" title="Zoom Out">
                                        <span class="glyphicon glyphicon-zoom-out"></span>
                                    </a>

                                    <a onclick="javascript:onZoomToFit('ProblemTreeDiagram');" class="btn btn-primary" title="Zoom Out">
                                        <span class="glyphicon glyphicon-fullscreen"></span>
                                    </a>

<div id="PToverviewContainer">
                        <div style="width: 100%; height: 100%; overflow: none; border: 0px solid rgb(0, 0, 0);margin-left: auto;margin-right: auto;">
                            <canvas id="PTDiagramOverview" width="100%" height="100%"></canvas>
                        </div>
                    </div>


 <div id="ProblemTreeDiagramDiagramContainer" class="diagramContainer" style="width: 100%; height: 650px; overflow: auto; border: 0px solid;">
                                <canvas id="ProblemTreeDiagram" width="100%" height="100%">This page requires a browser that supports HTML 5 Canvas element.
                                </canvas>
                            </div>


 

Code (Javascript)

hh = getHeight(PTDiagram);//actually hh = lastNodeBounds.y + lastNodeBounds.height;
$("#ProblemTreeDiagram").height(hh);
$("#ProblemTreeDiagramDiagramContainer").height(hh);
 

Code (HTML)

       <div id="PToverviewContainer">
                        <div style="width: 100%; height: 100%; overflow: none; border: 0px solid rgb(0, 0, 0); margin-left: auto; margin-right: auto;">
                            <canvas id="PTDiagramOverview" style="min-width: 357px; min-height: 134px;"></canvas>
                        </div>
                    </div>
<div id="ProblemTreeDiagramDiagramContainer" class="diagramContainer" style="width: 100%; height: 650px; overflow: auto; border: 0px solid;">
                                <canvas id="ProblemTreeDiagram" width="100%" height="650px">This page requires a browser that supports HTML 5 Canvas element.
                                </canvas>
                            </div>