Hi
as I am using PolylineLinkingTool as a reference. here wants to draw a polyline independently without any nodes. it wont have any fromNode or toNode. when activate polyline tool from toolbar it should start a draw polyline as required. when user wants to finish drawing it can deactivate by double click on canvas at last point. even I see PolygonDrawingTool but it is draw a node(shape). here link is needed so cant use PolygonDrawingTool. please help me how i can manage polyline.
PolylineLinkingTool is fundamentally a LinkingTool, which draws a new Link between Nodes.
Use extensions/PolygonDrawingTool.js or extensionsTS/PolygonDrawingTool.ts. Set PolygonDrawingTool.isPolygon to false. That’s what the Polyline Linking Tool sample does when the user clicks the “Draw Polyline” button.
I suppose that is possible, but it would require additional work to implement. To get you started, here is the definition of a LinkingTool that doesn’t require a port/node to start from:
function DisconnectedLinkingTool() {
go.LinkingTool.call(this);
this.isUnconnectedLinkValid = true;
this._fakeStartPort = null;
}
go.Diagram.inherit(DisconnectedLinkingTool, go.LinkingTool);
DisconnectedLinkingTool.prototype.canStart = function() {
if (!this.isEnabled) return false;
var diagram = this.diagram;
if (diagram === null || diagram.isReadOnly || diagram.isModelReadOnly) return false;
if (!diagram.allowLink) return false;
var model = diagram.model;
if (!(model instanceof go.GraphLinksModel) && !(model instanceof go.TreeModel)) return false;
// require left button & that it has moved far enough away from the mouse down point, so it isn't a click
if (!diagram.lastInput.left) return false;
// don't include the following check when this tool is running modally
if (diagram.currentTool !== this) {
if (!this.isBeyondDragSize()) return false;
}
var port = this.findLinkablePort();
if (port === null) {
var $ = go.GraphObject.make;
this._fakeStartPort = this.startObject =
$(go.Shape, { width: 1, height: 1, portId: "", fromLinkable: true });
var node =
$(go.Node,
{ layerName: "Tool", locationSpot: go.Spot.Center, location: diagram.firstInput.documentPoint },
this.startObject);
diagram.add(node);
node.ensureBounds();
}
return true;
};
DisconnectedLinkingTool.prototype.insertLink = function(fromnode, fromport, tonode, toport) {
if (this._fakeStartPort !== null) {
fromnode = fromport = null;
}
var link = go.LinkingTool.prototype.insertLink.call(this, fromnode, fromport, tonode, toport);
if (link !== null) link.defaultFromPoint = this.diagram.firstInput.documentPoint.copy();
return link;
};
DisconnectedLinkingTool.prototype.doStop = function() {
if (this._fakeStartPort !== null) {
this.diagram.remove(this._fakeStartPort.part);
this._fakeStartPort = null;
}
go.LinkingTool.prototype.doStop.call(this);
};
// end of DisconnectedLinkingTool
I’ve tested this in a copy of the Draggable Link sample.
If you want to do something similar but have the user click multiple times, at various consecutive points along a route, you could merge this code with the PolylineLinkingTool. You’ll need to figure out how to finish the operation, since you won’t be able to have the user click on a valid destination port to indicate that the linking operation is finished.