Page Index Toggle Pages: 1 Send TopicPrint
Normal Topic in the js version zoom zooms overview not the canvas (Read 3266 times)
agelospanagiotakis
YaBB Newbies
*
Offline


I love YaBB 1G - SP1!

Posts: 9
Joined: Mar 27th, 2007
in the js version zoom zooms overview not the canvas
Jun 24th, 2014 at 9:16am
Print Post  
I have a problem the following functions
zoom the overview not the canvas


Code (Javascript)
Select All
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)
Select All
 <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>


 

  
Back to top
 
IP Logged
 
Stoyo
God Member
*****
Offline


MindFusion support

Posts: 13230
Joined: Jul 20th, 2005
Re: in the js version zoom zooms overview not the canvas
Reply #1 - Jun 24th, 2014 at 10:17am
Print Post  
I imagine something similar will happen if you create Diagram and Overview instances with swapped DOM Canvases. Could you post your initialization code with all $create calls?
  
Back to top
 
IP Logged
 
agelospanagiotakis
YaBB Newbies
*
Offline


I love YaBB 1G - SP1!

Posts: 9
Joined: Mar 27th, 2007
Re: in the js version zoom zooms overview not the canvas
Reply #2 - Jul 3rd, 2014 at 11:04am
Print Post  
Actually this happens due to these commands
Code (Javascript)
Select All
hh = getHeight(PTDiagram);//actually hh = lastNodeBounds.y + lastNodeBounds.height;
$("#ProblemTreeDiagram").height(hh);
$("#ProblemTreeDiagramDiagramContainer").height(hh);
 


Code (HTML)
Select All
       <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>

 



Cheesy weird isn't it ?
  
Back to top
 
IP Logged
 
Stoyo
God Member
*****
Offline


MindFusion support

Posts: 13230
Joined: Jul 20th, 2005
Re: in the js version zoom zooms overview not the canvas
Reply #3 - Jul 3rd, 2014 at 12:54pm
Print Post  
If getHeight() returns the bottom coordinate of some node, you might have to convert from the default millimeter MeasureUnit to pixels before calling $.height(). If you are trying to make the container div large enough to fit the whole diagram, you could call diagram.resizeToFitItems(), then get the pixel size of the Canvas element, and assign it to the container Div.

I hope that helps,
Stoyan
  
Back to top
 
IP Logged
 
agelospanagiotakis
YaBB Newbies
*
Offline


I love YaBB 1G - SP1!

Posts: 9
Joined: Mar 27th, 2007
Re: in the js version zoom zooms overview not the canvas
Reply #4 - Jul 8th, 2014 at 10:41am
Print Post  
Thank you stoyan for all your guidance and help
  
Back to top
 
IP Logged
 
Page Index Toggle Pages: 1
Send TopicPrint