(UTC)
  The MindFusion Forums › Flow Diagramming Components › ASP.NET › Overview and ClientSideMode="ImageMap"
(Moderator: Slavcho)
‹ Previous Topic | Next Topic ›
Page Index Toggle Pages: 1 Send TopicPrint
Normal Topic Overview and ClientSideMode="ImageMap" (Read 4989 times)
jlj30
Full Member
***
Offline


I love YaBB 1G - SP1!

Posts: 183
Joined: Sep 4th, 2011
Overview and ClientSideMode="ImageMap"
Jan 29th, 2013 at 10:31pm
Print Post  
Hi,

What is required to get the Overview to work when using ClientSideMode="ImageMap"?

Should I declare an Overview control or specify ShowOverview="true" on the DiagramView declaration or both?

Do I need an InteractivityExtender control?

I have been able to get the Overview image to appear, but is not functional.

Please clarify how the Overview should be implemented with ImageMap mode.

Thanks.

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


MindFusion support

Posts: 13230
Joined: Jul 20th, 2005
Re: Overview and ClientSideMode="ImageMap"
Reply #1 - Jan 30th, 2013 at 6:42am
Print Post  
Hi,

Use Overview with OverviewExtender.

I hope that helps,
Stoyan
  
Back to top
 
IP Logged
 
jlj30
Full Member
***
Offline


I love YaBB 1G - SP1!

Posts: 183
Joined: Sep 4th, 2011
Re: Overview and ClientSideMode="ImageMap"
Reply #2 - Jan 30th, 2013 at 8:52pm
Print Post  
Hi,

I tried adding the OverviewExtender, but without success.
Here's my code:

Code (HTML)
Select All
<div style="clear: both; margin-top: 10px; margin-left: 10px; margin-right: 10px;
                    position: absolute;  z-index: 90001;">
                    <ndiag:Overview ID="Overview1" runat="server" DiagramViewID="DiagramView3" JarLocation="./Java/JDiagram.jar"
                        FitAll="true" Visible="true" Style="background-color: white; width: 200px; height: 200px;" />
                    <ndiag:OverviewExtender ID="OverviewExtender1" runat="server" TargetControlID="Overview1" />
                </div>
                <div style="z-index: 90000;">
                    <ndiag:DiagramView ID="DiagramView3" runat="server" Behavior="Pan" ClientSideMode="ImageMap"
                        JsLibraryLocation="./Js/MindFusion.Diagramming.js" JarLocation="./Java/JDiagram.jar"
                        AppletStartedScript="onAppletStarted" ShowScrollbars="true" ShowOverview="true"
                        OverviewFitAll="true" OverviewTitle="Navigator">
                    </ndiag:DiagramView>
                </div>


As you can see I'm placing the overview on top of the diagram using the "absolute" positioning.  I removed that, but the overview still does not function.

I've also attached a screenshot of what I'm seeing.
A part of the overview images appears, but you can't interact with it.

Suggestions?

Thanks

Jim
  
NetDiagram_-_Overview_Issue_with_ImageMap_-_30Jan2013.png (Attachment deleted)
Back to top
 
IP Logged
 
Stoyo
God Member
*****
Offline


MindFusion support

Posts: 13230
Joined: Jul 20th, 2005
Re: Overview and ClientSideMode="ImageMap"
Reply #3 - Jan 31st, 2013 at 3:06pm
Print Post  
Hi,

At this time the overview control is rendered entirely on the server with sizes known while processing the page from ASP code, and will show the tracking rectangle correctly only if the DiagramView's Width and Height properties are set in pixels. If you don't set them, you could do something like this from JavaScript as a work-around:

Code
Select All
var tracker = $find('OverviewId').tracker;
if (tracker) {
    tracker.style.width = "50px";
    tracker.style.height = "50px;
}


You will also have to set absolute position for the overview to fix some interaction problems with the tracking rect when the parent div is absolutely positioned:

Code
Select All
<ndiag:Overview ID="Overview1" runat="server" DiagramViewID="DiagramView3" JarLocation="./Java/JDiagram.jar"
                        FitAll="true" Visible="true" Style="background-color: white; width: 200px; height: 200px; position: absolute;" />


I hope that helps,
Stoyan
  
Back to top
 
IP Logged
 
jlj30
Full Member
***
Offline


I love YaBB 1G - SP1!

Posts: 183
Joined: Sep 4th, 2011
Re: Overview and ClientSideMode="ImageMap"
Reply #4 - Feb 1st, 2013 at 4:27pm
Print Post  
Hi,

I'm a bit confused (nothing new).

I placed the javascript you provided in the PageLoad() event.
I added an OverviewExtender.
I update the Overview to include position: absolute as suggested.

I still have the same issue as illustrated from the screenshot I provided in an earlier post.  The behaviour has not changed and the Overview remains nonfunctional.

Any suggestions?

Thanks

Jim

Here's what I have now:
Code (Javascript)
Select All
function PageLoad()
            {
                var tracker = $find('Overview1').tracker;
                if (tracker) {
                    tracker.style.width = "50px";
                    tracker.style.height = "50px";
                }
            }

Code (HTML)
Select All
<div style="clear: both; margin-top: 10px; margin-left: 10px; margin-right: 10px;
                    position: absolute;  z-index: 90001;">
                    <ndiag:Overview ID="Overview1" runat="server" DiagramViewID="DiagramView3" JarLocation="./Java/JDiagram.jar"
                        FitAll="true" Visible="true" Style="background-color: white; width: 200px; height: 200px; position: absolute;" />
                        <ndiag:OverviewExtender ID="OvExt1" TargetControlID="Overview1" runat="server" />
                </div>
                <div style="z-index: 90000;">
                    <ndiag:DiagramView ID="DiagramView3" runat="server" Behavior="Pan" ClientSideMode="ImageMap"
                        JsLibraryLocation="./Js/MindFusion.Diagramming.js" JarLocation="./Java/JDiagram.jar"
                        AppletStartedScript="onAppletStarted" ShowScrollbars="true" ShowOverview="false"
                        OverviewFitAll="true" OverviewTitle="Navigator">
                    </ndiag:DiagramView>
                </div>
  
Back to top
 
IP Logged
 
Stoyo
God Member
*****
Offline


MindFusion support

Posts: 13230
Joined: Jul 20th, 2005
Re: Overview and ClientSideMode="ImageMap"
Reply #5 - Feb 5th, 2013 at 3:07pm
Print Post  
If you call alert() from within the if (tracker) block, does it show up? If it doesn't, then your load handler runs before the overview's one and the tracker div hasn't been created yet. In such case, try attaching the load handler from a script tag at the bottom of the page.

Our developers have updated the overview scripts for next version to calculate the size on client side. With the assemblies below the tracker rectangle should appear correctly for whatever size the overview and diagram view have inside the browser, and will also update in response to resize events:
https://mindfusion.eu/_beta/netdiag5_imgmap_ovw.zip

I hope that helps,
Stoyan
  
Back to top
 
IP Logged
 
jlj30
Full Member
***
Offline


I love YaBB 1G - SP1!

Posts: 183
Joined: Sep 4th, 2011
Re: Overview and ClientSideMode="ImageMap"
Reply #6 - Feb 5th, 2013 at 5:52pm
Print Post  
Stoyan,

The alert is not firing, so I moved the code to the bottom of the page as you suggested - it still does not fire!
I also installed the beta binaries that you provided.

Any ideas on what to try next?

Thanks

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


MindFusion support

Posts: 13230
Joined: Jul 20th, 2005
Re: Overview and ClientSideMode="ImageMap"
Reply #7 - Feb 5th, 2013 at 6:03pm
Print Post  
Have you attached that PageLoad function to the html's onload event? You shouldn't need that work-around though if your project uses the new binaries, check if the site's bin folder contains them rather than an older version.
  
Back to top
 
IP Logged
 
jlj30
Full Member
***
Offline


I love YaBB 1G - SP1!

Posts: 183
Joined: Sep 4th, 2011
Re: Overview and ClientSideMode="ImageMap"
Reply #8 - Feb 5th, 2013 at 7:33pm
Print Post  
Hi,

I am definitely using the new binaries.
I am now getting some build errors:

Looks like the following are no longer supported, or implemented in some other manner:

node.ZBottom();
link.Style = LinkStyle.Polyline;
link.Style = LinkStyle.Bezier;

I was able to find the new form of the following statement.
//diagram.LinkStyle = LinkStyle.Cascading;
diagram.LinkCascadeOrientation = Orientation.Auto;

How do I now code for the above 3 statements that no longer work?

Thanks again

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


MindFusion support

Posts: 13230
Joined: Jul 20th, 2005
Re: Overview and ClientSideMode="ImageMap"
Reply #9 - Feb 6th, 2013 at 6:47am
Print Post  
Hi,

Code
Select All
node.ZBottom(false);
link.Shape = LinkShape.Polyline;
link.Shape = LinkShape.Bezier;


I hope that helps,
Stoyan
  
Back to top
 
IP Logged
 
Page Index Toggle Pages: 1
Send TopicPrint
‹ Previous Topic | Next Topic ›
 
  « Board Index ‹ Board Top  

The MindFusion Forums » Powered by YaBB 2.6.11!
YaBB Forum Software © 2000-2024. All Rights Reserved.

Valid RSS Valid XHTML Valid CSS Powered by Perl Source Forge