Local view in pop-up

Hi,

I am implementing the local-view example with local-view in a pop-up.
However, the local-view diagram is not showing in the canvas until we click on the canvas and drag it a bit.

Actually it is being shown in a very small size 2-3 pixels only (as if its zoomed out a lot) but, if we click on it, the diagram is zoomed according to the container size.

///////////////// local diagram definition ////////////////

GO(go.Diagram, “localDiagram”,
{
initialAutoScale: go.Diagram.Uniform,
autoScale: go.Diagram.Uniform,
contentAlignment: go.Spot.Center,
isReadOnly: true,
initialScale: 2,
layout: GO(go.TreeLayout,
{ angle: 90, sorting: go.TreeLayout.SortingAscending }),
maxSelectionCount: 1
});

//////////// function to open the local diagram ////////////////////////////

function printNodes() {

showLocalOnFullClick();

$( ".print-subtree-fn" ).show( "slow", function() {
     myLocalDiagram.zoomToFit()
});

<span =“Apple-tab-span” style=“white-space:pre”> $(’.SelectSectionoverlay’).show();
}

//////////////////////////// showLocalOnFullClick function ////////////////

function showLocalOnFullClick() {

//myLocalDiagram.layout = myDiagram.layout;
 
 var currentNode = myDiagram.selection.first();
        if (!currentNode.isGroup) {
            currentNode = myDiagram.selection.first().containingGroup;
        }

if (currentNode !== null) {
    // move the large yellow node behind the selected node to highlight it
    //highlighter.location = node.location;
    // create a new model for the local Diagram
    var model = new go.GraphLinksModel();
    // add the selected node and its children and grandchildren to the local diagram
    var nearby = currentNode.findTreeParts(99);  
    
    // create the model using the same node data as in myFullDiagram's model
    linkDataArray = [];

    for (var it = nearby.iterator; it.next() ;) {
        var n = it.value;
        if (n instanceof go.Node) model.addNodeData(n.data);
        
        if (n instanceof go.Group){
        var subParts = n.findSubGraphParts()
            for (var subPart = subParts.iterator; subPart.next() ;) {
                var subPartVal = subPart.value;
                 model.addNodeData(subPartVal.data);
            }
        }
        
        
        if (n instanceof go.Link) linkDataArray.push(n.data);
    }
   
    myLocalDiagram.model = model;
    myLocalDiagram.model.linkDataArray = linkDataArray;

    myDiagram.startTransaction("rescale localDiagram");
    myLocalDiagram.zoomToFit();
    myDiagram.commitTransaction("rescale localDiagram");

}

}
/////////////////////////////////////////////////////////////////////

any ideas or suggestions that why is the localdiagram is not displaying correctly.

Thanks and Regards

I’m just guessing, but I wouldn’t be surprised if the problem is that the DIV element for the diagram didn’t have its final size yet (HTML layout).
http://gojs.net/latest/intro/resizing.html

Hi,

This is not working.

However we changed the application business a bit now.

We want to show the captured image in a pop-up , the image we generate by diagram.makeImage but the image does not show colors until the local-diagram is rendered on the screen.

Which happens only if we click/drag on diagram

Thus we are left only with the option using ‘setTimeout’ as its not working even on call backs.



//////code for this error ///////////////////

function printNodes() {

showLocalOnFullClick();

$( ".print-subtree-fn" ).show( "slow", function() {
     myLocalDiagram.zoomToFit();
     myLocalDiagram.requestUpdate();
});

<span =“Apple-tab-span” style=“white-space:pre”> $( “.print-subtree-fn” ).hide();

 <span ="Apple-tab-span" style="white-space:pre">	</span>printChart(myLocalDiagram); // this generates image using <span style="line-height: 16.7999992370605px;">diagram.makeImage</span>

}

--------------------------------------------------------------------------------------------------------------
--------------------------------------------------------------------------------------------------------------

///////code for fix //////

function printNodes() {

showLocalOnFullClick();

$( ".print-subtree-fn" ).show( "slow", function() {
     myLocalDiagram.zoomToFit();
     myLocalDiagram.requestUpdate();
});

 setTimeout(function(){
 $( ".print-subtree-fn" ).hide();
 printChart(myLocalDiagram);
 },'700');

}

///// ideal pop-up window //// with correct image///

We need this correct image with proper diagram but don’t want to use setTimeout.
Can we do something with diagram.makeImage

///////////////////aditional code Just for info //////////////

printChart = function(diagram){

debugger;
    var d = diagram.documentBounds;
    var imgWidth = d.width;
    var imgHeight = d.height;

    var img = diagram.makeImage({
        scale: parseFloat($('.hdnZoomScale').val())
    });
    var ulDetail = $('.ul-content li');
    var h = screen.height - screen.height / 3;
    var imageheight = h/2;
    //Calculating popup width dynamicaly

    var printChart = "<table><tr><td><table id='tblPrint' width='100%' border='0' cellspacing='0' cellpadding='0' style='font-family:Arial, sans-serif; font-size:12px;'><tbody>" +
    "<tr><td colspan='3' align='right' valign='middle' style='padding:10px;'>" +
    "<input type='button' class='printbutton' value='Print' onclick='printChart()' " +
    "style='font-size:13px; font-weight:bold; border:solid 1px #ccc; background:#000000; color:#ffffff; text-align:center; padding:5px 10px; cursor:pointer;' />"+
    "</td></tr></tbody></table></td></tr>";
    
    var data = printChart + "<tr><td><table width='100%' border='0' cellspacing='0' cellpadding='0' style='font-family:Arial, sans-serif; font-size:12px; border:solid 1px #416f9f; border-top:solid 15px #416f9f;'>"
    data += "<tbody><tr><td align='left' valign='top' style='border-bottom:solid 1px #416f9f; padding:10px; bgcolor:#f5f5f5;'>#LI#1</td>"+
    "<td align='left' valign='top' style=' border-left:solid 1px #416f9f;border-bottom:solid 1px #416f9f; padding:10px; bgcolor:#f5f5f5;'>#LI#2</td>"+
    "<td align='right' valign='top' style=' border-left:solid 1px #416f9f;border-bottom:solid 1px #416f9f; padding:10px; bgcolor:#f5f5f5;'>#LI#3</td>"+
    "</tr><tr><td colspan='3' align='center' valign='middle' style='padding:10px;text-align:center;width:100%;height:"+ imageheight +  "px;'>";

    var orgChartName = $('.icsOrgChart').text();
    var incidentName = $('.incidentName').html();
    incidentName = incidentName.replace(orgChartName, '');
    
   
    var counter = 0;
    $(ulDetail).each(function (index, element) {
        counter = parseInt(counter) + 1;
        data = data.replace("#LI#" + counter, $(element).html());
    });
    data += "<img  src=" + img.src + "></td></tr><tr><td align='left' valign='middle' style='padding:10px;border-top:solid 1px #416f9f;'>";
    data += incidentName;
    data += "</td><td align='right' valign='middle' style='padding:10px;border-top:solid 1px #416f9f;'></td><td align='right' valign='middle' style='padding:10px;border-top:solid 1px #416f9f;'>";
    
    data += orgChartName + "</td></tr><tr id='trPrint'><td colspan='3' align='right' valign='middle' style='padding:10px;border-top:solid 1px #416f9f;'>"+
    "<input type='button' class='printbutton' value='Print' onclick='printChart()' "+
    "style='font-size:13px; font-weight:bold; border:solid 1px #ccc; background:#000000; color:#ffffff; text-align:center; padding:5px 10px; cursor:pointer;' />";
    
    data += "</td></tr></tbody></table></td></tr></table>";
    var scripts = "<script type='text/javascript'>  function printChart() {  var printButton = document.getElementById('trPrint');"+
    " var tblPrint = document.getElementById('tblPrint'); printButton.style.display = 'none';tblPrint.style.display = 'none'; "+
    " var printWin = this; printWin.document.close(); printWin.focus(); printWin.print(); printWin.close();} </script>"

    var h = screen.height - screen.height / 3;
    var w = screen.width - screen.width / 4;
    var left = (screen.width / 2) - (w / 2);
    var top = (screen.height / 10);
    var windowContent = '<!DOCTYPE html>';
    windowContent += '<html>'
    windowContent += "<head style='text-align:right;'><title style='text-align:right;'></title></head>";
    windowContent += "<body>" + data + scripts;
    windowContent += '</body>';
    windowContent += '</html>';
    var printWin = window.open("#", 'Organization Chart', 'scrollbars=1,resizable=yes,width=' + w + ',height=' + h  + ',top=' + top + ', left=' + left);
    printWin.document.open();
    printWin.document.write(windowContent);

}

I’d like to see this in action to debug it. Can you put it up somewhere, or send the app to us? You can email us: GoJS (at) nwoods.com

A post was split to a new topic: Reimplementing GoJS context menu in HTML