If I try to create a DragZoomingTool class, I run in to various errors.
If I try to extend go.Tool: class DragZoomingTool extends go.Tool { foo(){} }
I get “Argument of type ‘typeof Tool’ is not assignable to parameter of type ‘Constructor’” at:
go.Diagram.inherit(DragZoomingTool, go.Tool);
Would you be able to steer me into the right way of using DragZoomingTool in Angular 2+?
Don’t use the traditional JavaScript classes in the extensions directory – use the classes that we translated into TypeScript in the extensionsTS directory.
If you don’t need any modifications to them, you should be able to do something like this:
import { DragZoomingTool } from "./DragZoomingTool";
but with the appropriate path to the extensionsTS directory for your environment.
I don’t suppose there’s any guidance you can give on including the extensionsTS files in the Angular 2+ environment? I’ve included:
import { DragZoomingTool } from "gojs/extensionsTS/DragZoomingTool";
and I get the error:
<project root, node modules>/gojs/extensionsTS/DragZoomingTool.ts is not part of the compilation output. Please check the other error messages for details. (no other errors given)
I must be missing a step in order to use types in a subdirectory of gojs.
I’ve searched but am coming up empty on the googlesphere.
I got the compiler to take it, and seems to be functioning. However, two undesirable things happen when I implement the DragZoomingTool in the toolManager. Added:
this.theDiagram.toolManager.mouseMoveTools
.insertAt(2, new DragZoomingTool()
);
First:
It shows the bounding box when I click-drag (without long press, then drag). How can I disable that, I just want the behavior of the map moving
Second, sub part 1:
If I do the proper select-drag (click, pause, drag), and select an area…the geometry is zoomed in but the map stays unzoomed. Any ideas why this might be the case?
Second, sub part 2:
When it does zoom, it magnifies all geometry (# of pixels increases in width, radii, etc). In a graph over mapping use case, I’d want the scale of the geometry to remain, but just being “stretched apart” as I get closer.
OK, so you need to change the behavior of the DragZoomingTool. Maybe you do want to copy the code to your own directory.
The “bounding box” is the DragZoomingTool.box. If you don’t want it, change the code not to create it, add it to the Diagram, position and size it, and later remove it from the Diagram.
You can see what DragZoomingTool.doMouseUp does: it calls DragZoomingTool.zoomToRect. You’ll want to change that method not to just set the Diagram.scale but to change the zoom level and center point of your map.
ok sounds like a great start, thanks. Could I simply extend the class and override?
Also, a big issue is that I can’t select a rectangle of the map. if I click drag, the map moves, so I can’t put a boundary around that which I’d like to zoom in.
When I use the DragZoom tool it scales all lines and nodes, I don’t want it to do that even if I do get it to zoom the map in custom code.
If I double click on the map (which I believe is the native Leaflet zoom handler), the map zooms great, the geometry is left the same pixel width, and everything is still in synch. When I attempt zoom using the drag zooming tool, the lines become thick and circle nodes large, not what I want.
So my question is, is it possible to just allow Leaflet to handle the native zoom to bounds (shift-drag)? That’s how I had my map originally zooming before layering GoJS on top.
I believe all mouse/finger/stylus events are being handled by GoJS because the GoJS canvas is in front of the leaflet canvas.
As I said before, you want to avoid changing the Diagram.scale, which is the purpose of the DragZoomingTool. Overriding DragZoomingTool.zoomToRect could do that.
