Zoom Gojs grid with background image of grid

GoJS
#1

Hi
I have developed gojs grid with background image with using go.Picture. I have developed zoomin zoomout using using commondhandler. but when i Zoom in I need to show Zooming of grid with background image (zoomed size).

So apparently when i apply zoom it should apply only to grid and grid background image not to nodes or links.

Please advice thanku…

#2

Could you please show screenshots for before-and-after currently and also the results you want for after?

#3

Thanks for the reply.
check out the screens
image 1.png is beforezooming.
image 2.png is after zooming.

requirement is the background image should zoom with grid cells and u can see grids cells are zooming. But not background image. 1 2

#4

Do you have any DiagramEvent listeners? How did you add the photo?

If you have added the photo as a Picture in a Part in a Layer of the Diagram, I do not understand how you are getting those results, because zooming in or out will change the Diagram.scale, which changes the scale for everything that is drawn.

#5

Hi Walter,
Thanks for your reply i will re-frame my question here.
I want to add zoom functionality to my grid view. the zoom-In and Zoom-out functionality should apply only for grid cell and background image not for the nodes which all there in grids.
can u suggest me how to do it?

thanks

#6

Your requirements sound like what the Constant Size sample demonstrates: https://gojs.net/latest/samples/constantSize.html

The code is primarily in a “ViewportBoundsChanged” DiagramEvent listener function.

#7

Thanks for reply
I have checked the link which u given in last reply thats not full fill our requirement. I need to zoom only grid not nodes or links.

#8

OK, I’m still not sure what you want. From what I can guess, it seems that you just want to change the Panel.gridCellSize property of the Diagram.grid. It isn’t clear to me how you want the user to make that change, but I’ll assume it is through some other mechanism, not involving any GoJS tool.

#9

OK Walter,
Now i have grid with cell size 30,30 and added background image for grid. and 3 nodes are present in the map. Ex. Node1, Node2, Node 3.

Now i want zoom in zoom in zoom out functionality on grid.
Whenever I click Zoom in Or Zoom out M calling this below functionality.
zoomInCommandHandler() {

this.myDiagram.commandHandler.increaseZoom();

}

zoomOutCommandHandler() {

this.myDiagram.commandHandler.decreaseZoom();

}

So now when I click zoom out and zoom in I am calling respected functions to zoom operations.
After apply zoom in the grid is zooming in with back ground image and nodes as well

My requirement given below
I need output like only grid cells and background image should zoom in and out but not nodes. Nodes size should be remains constant after applying zoom in and zoom out.
Thanks in Advance.

#10

OK, instead of calling those two commands, each time you should change the myDiagram.grid.gridCellSize and the scale of the background Picture.

#11

Can you share the code for changing the scale of background picture dynamically?

#12

First I made a copy of the Kitten Monitor sample, which shows one way of adding a background image into a diagram that can be scaled and scrolled.

Second I made these substitutions:

      myDiagram =
        $(go.Diagram, "myDiagramDiv",
          {
            initialContentAlignment: go.Spot.TopLeft,
            isReadOnly: true,  // allow selection but not moving or copying or deleting
            "grid.visible": true,
            "commandHandler.increaseZoom": function(factor) {
              if (factor === undefined) factor = this.zoomFactor;
              BackImage.scale *= factor;
              this.diagram.grid.gridCellSize = new go.Size(10*BackImage.scale, 10*BackImage.scale);
            },
            "commandHandler.decreaseZoom": function(factor) {
              if (factor === undefined) factor = 1.0/this.zoomFactor;
              BackImage.scale *= factor;
              this.diagram.grid.gridCellSize = new go.Size(10*BackImage.scale, 10*BackImage.scale);
            },
            "commandHandler.resetZoom": function(newscale) {
              if (newscale === undefined) newscale = this.defaultScale;
              BackImage.scale = newscale;
              this.diagram.grid.gridCellSize = new go.Size(10*BackImage.scale, 10*BackImage.scale);
            },
            "toolManager.mouseWheelBehavior": go.ToolManager.WheelZoom,
            "toolManager.hoverDelay": 100  // how quickly tooltips are shown
          });

      // the background image, a floor plan
      var BackImage =
        $(go.Part,  // this Part is not bound to any model data
          {
            zOrder: -1,
            width: 840, height: 570,
            layerName: "Grid", position: new go.Point(0, 0),
          },
          $(go.Picture, "https://upload.wikimedia.org/wikipedia/commons/9/9a/Sample_Floorplan.jpg")
        );
      myDiagram.add(BackImage);

Note how I made the Part holding the background Picture available in a variable, and then how both that background image Part and the Diagram.grid is modified as the user zooms in or out.

Setting ToolManager.mouseWheelBehavior is optional. Here we assume zooming is more commonly desired than scrolling.

#13

Thanks for the reply
For my requirement this will not work .I have buttons for zoom in and zoom out ,based on the user action grid should zoom along with background image withe exact coordinates. Can you share the sample code for that

#14

I have no idea of what you want. We have talked about the requirements and you have seen several implementations that seem to meet the requirements that you have stated. So until you provide very specific and complete and understandable requirements, I do not see how we can help you.

#15

https://gojs.net/beta/samples/leaflet.html
In the above link map is used, I need the exact functionality on zoom in and zoom out as it is implemented in the above link. I have used grid and background image instead of map.

#16

I believe the Constant Size Kitten Monitor sample demonstrates what you are asking for:

You then said:

Could you please elaborate how that sample does not meet your requirement? Please ignore its simulated motion, which probably does not apply to your app. And that it pretends to be about kittens.

#17

Hi walter,
Constant Size Kitten Monitor solution worked for my requirement.
Now after zooming in the links are disconnecting from the node.

linkdisconnecting
linkdisconnecting1332×464 176 KB

can you suggest me how to avoid this.
And we are getting a unlicensed water mark on left top corner. can you suggest how to remove that.

#18

I don’t understand the problem. I just tried adding links to the Constant Size Kitten Monitor sample, and the links remain connected with the nodes as they change size.

For the watermark, purchase a license and follow the instructions that are sent to you.

#19

can you share the code?

#20

I copied the Constant Size page: https://gojs.net/latest/samples/constantSize.html

I changed the model to be:

      // pretend there are four kittens
      myDiagram.model = new go.GraphLinksModel([
        { key: "Alonzo", src: "50x40", loc: new go.Point(220, 130), color: "blue" },
        { key: "Coricopat", src: "55x55", loc: new go.Point(420, 250), color: "green" },
        { key: "Garfield", src: "60x90", loc: new go.Point(640, 450), color: "red" },
        { key: "Demeter", src: "80x50", loc: new go.Point(140, 350), color: "purple" }
      ], [
        { from: "Alonzo", to: "Coricopat" },
        { from: "Coricopat", to: "Garfield" },
        { from: "Garfield", to: "Demeter" }
      ]);

And everything works well, both while the kittens are moving around, as well as when zooming.