Custom PanningTool to bubble events to LeafletJS

GoJS
1

I’m trying to implement a LeafletJS + GoJS component in Angular. The fact it’s in Angular probably doesn’t matter a whole lot, but I’ll mention it anyway.

I’ve used this example as the source of my implementation https://gojs.net/latest/samples/leaflet.html.

However, everything works except panning. I can zoom, select nodes, and get hover events on nodes.

I think the reason my implementation doesn’t work is because of the click/hover events I have wired up, which the example doesn’t have. If I use the Chrome Debugger and remove the mousedown event listener on the Canvas, the panning will work.

What I’m wondering is if I need to implement a custom PanningTool manager to bubble the events to LeafletJS. The interesting thing is I think at one time your example may have done that because the description has this sentence:

You can pan and zoom with Leaflet, and select and drag with GoJS. The GoJS div is on top of the Leaflet map, but this sample selectively bubbles events to leaflet by using a custom Tool.

Do you have a solution to the event bubbling handy?

Here is some of the relevant code I’m doing when setting up the diagram, just in case you already have an idea what I may have done wrong.

this.diagram.animationManager.isEnabled = false;
this.diagram.scrollMode = Diagram.InfiniteScroll;
this.diagram.allowZoom = false;
this.diagram.allowMove = false;
this.diagram.defaultCursor = 'default';
this.diagram.initialScale = 1;
this.diagram.padding = 0;
this.diagram.initialAutoScale = Diagram.None;
this.diagram.allowHorizontalScroll = false;
this.diagram.allowVerticalScroll = false;
this.diagram.hasHorizontalScrollbar = false;
this.diagram.hasVerticalScrollbar = false;
this.diagram.toolManager.dragSelectingTool.isEnabled = false;
this.diagram.toolManager.mouseWheelBehavior = ToolManager.WheelNone;
this.diagram.toolManager.panningTool.isEnabled = false;
2

So do I understand you correctly that you do not want to use GoJS PanningTool?

What do you mean by: “click/hover events I have wired up”? Do you mean of GoJS objects or of Leaflet objects?

Yes, in that sample the DraggingTool has been customized to disable Leaflet’s dragging. See the overrides of DraggingTool.doActivate and DraggingTool.doDeactivate.

3

Well, I believe I have to implement a custom panning tool to bubble the mouse events to LeafletJS.

I believe either the fact I have selection on or this code in my node renderer

   const node = GraphObject.make(Node, 'Vertical',
                                   {
                                       locationSpot:       Spot.Center,  // Node.location is the center of the Shape
                                       locationObjectName: 'SHAPE',
                                       selectionAdorned:   false,
                                       zOrder:             1,
                                       selectionChanged:   (node: Node) => {
                                           //bring the selected Node to the Foreground layer so that it renders above all other nodes
                                           if (node.isSelected) {
                                               node.layerName = 'Foreground';
                                               // tell the component that a node has been selected
                                               // component.handleSelectionChanged(node);
                                           }
                                       },
                                       click: (event: InputEvent, node: Node) => {
                                           node.diagram.select(node);
                                           component.handleClick(event, node);
                                       },
                                       contextClick: (event: InputEvent, node: Node) => {
                                           node.diagram.select(node);
                                           component.handleRightClick(event, node);
                                       },
                                       mouseEnter: (event: InputEvent, graphic: GraphObject) => {
                                           if (graphic.name.indexOf('icon') === -1) {
                                               component.nodeHover(event, graphic);
                                           }
                                       },
                                       mouseLeave: (event: InputEvent, graphic: GraphObject) => {
                                           component.nodeMouseLeave(event, graphic);
                                       }
                                   },
                                   this.createBaseNodeShape(),
                                   this.createLabel()
        );

GoJS is attaching a mousedown event listener to the canvas that does not bubble its events, and therefore the Map won’t pant.

4

I guess I still don’t understand what the problem is. In the samples/leaflet.html sample, the PanningTool never runs. Panning is performed by Leaflet. Leaflet events call updatePosition which updates the Diagram.position.

5

I’ll try to make a smaller example showing the problem. But in the meantime was there a version of this sample that used a custom ToolManager to bubble the mouse events to LeafletJS like the description hints to? The sample description makes reference to a custom ToolManager.

6

Wow. Just wow. I figured it out while building the smaller example for you.

We’re running GoJS v2.1.49 – as soon as I used v.2.3.12, the mouse events started bubbling and the panning works. So that GoJS + LeafletJS sample requires a certain level of GoJS to work.

If you run it on GoJS 2.1.49 the panning will not work.

7

OK, I’m glad you upgraded to the latest version.

We did reimplement the Leaflet sample to change how panning was implemented, back in 2017. But what’s there now is better, I think.