Magnifier and Scale


#1

Hi, i try to implement myself the magnifier sample. But i have problems with the scale factor. Please look the picture. I hope you understandthe problem. Thx for your help

magnifier


#2

I’m sorry, but if you don’t both show us and tell us what it is that you don’t want, and both tell us and show us what you want instead, we cannot really know what is happening and what you want.

You seem to have shown a screenshot of the Magnifier sample, behaving correctly.


#3

Oh Sorry, but i think that the sample does not calculate the sacle factor. And i have no idea how it works.
On the screenshot you can see that the magnifier shows something even though it is not above any element.
Try to set the magnifier on the top or bottom element and then dragging the magnifier up or down. I hope you understand my problem and the effect.


#4

I am unable to reproduce any problem. Could you tell us please how to produce the problem?


#5

Put your magnifier on the element with “Mihai Silviu German”
Then move now your mouse down. It’s like draqgging the element. It is normal?


#6

Are you saying that during a drag, when intending to move a node, the magnifier is not moving along with the mouse? Yes, that’s true, but I think it would be annoying if it did.

In fact, I think the opposite behavior would be better: the activation of any Tool (other than the ToolManager) should stop “magnifier” mode.


#7

no, moving the magnifying glass downwards only looks like moving the node. Why the magnfifer show also the node on the second screenshot?


#8

I don’t know. As I said, I cannot reproduce the problem. Can you tell us more about the configuration you have? Have you tried it in other browsers or on other platforms?


#9

Here is a video.

I can reproduce with Chrome and Firefox


#10

That’s fascinating. Alas, I cannot reproduce the problem in https://gojs.net/latest/samples/magnifier.html with either Firefox or Chrome on Windows 10.

I guess we can try some other configurations, but I really don’t know what the problem is.

After you clicked the checkbox to turn on the magnifier, you didn’t hold down any mouse buttons or keyboard modifiers, did you?


#11

No I don’t hold any buttons or keyboard. I use Windows 7.


#12

I try it on a windows 10 but i can reproduce. Have you zooming the sample?


#13

Yes, I did zoom out first. Very odd that I cannot reproduce the problem on the same page that you are using, https://gojs.net/latest/samples/magnifier.html. We’ll try it on various machines.


#14

We see the issue you are describing. This is because the magnifier.html sample is setting the Overview.position, but the position cannot go below the bottom of the Diagram’s document bounds. There is an easy fix, to set the overview’s scrollMode to go.Diagram.InfiniteScroll. So you could add these to your Overview init:

            scrollMode: go.Diagram.InfiniteScroll,
            "box.visible": false,

The second one is to remove the pink outline you sometimes see around the edges, because this kind of Overview isn’t meant to use the box.

Making these changes, the whole overview initialization looks like this:

      myOverview =
        go.GraphObject.make(go.Overview, myOverviewDiv,  // the HTML DIV element for the Overview
          {
            scrollMode: go.Diagram.InfiniteScroll,
            "box.visible": false,
            observed: myDiagram,   // tell it which Diagram to show
            // disable normal Overview functionality to make it act as a magnifying glass:
            initialScale: 2,  // zoom in even more than normal
            autoScale: go.Diagram.None,  // don't show whole observed Diagram
            hasHorizontalScrollbar: false,  // don't show any scrollbars
            hasVerticalScrollbar: false
          });

We will update the sample in the next release. Thank you for your video reproduction of the issue.


#15

thx it works!!!

You have also an “Uncaught Error: Invalid div id; div already has a Diagram associated with it” when you enable, disable, enable the checkbox.

So you have to write myOverview.div = null; for disable the magnifier.


#16

Ah, thank you.