I want to draw a straight line on the canvas through the tool.Its type is ‘go. Link’.
Its instance is like an arrow tool that can be seen in the general screenshot software.
When drawing finishes, I can adjust its direction.
I want you to help me get my ideas through ‘gojs’
The tool ‘Polygon Drawing Tool’ created ‘NODE’.
However, the selected tool can only resize the entire node and cannot adjust the direction of the link.
And I don’t know how to convert a ‘PathSegment’ into a 'List (go.Point) '.
So I want to write a linkTool to draw a line.
The purpose of a Link is to connect between two Nodes. It sounds as if you want a Link that does not connect two Nodes and that wants to be manipulated as if it were a Node. So why does it need to be a Link?
Because I need a feature to add comments,
I need an arrow that can be controlled to mark comments
Normally "Comment"s are a category of Nodes. See for example:
GoJS Building GraphObjects -- Northwoods Software, which has a lot of comment nodes and comment links referring to regular nodes and links.
And see: Comments and Balloon Links.
Oh! I’m sorry, I don’t think I have a clear explanation.I actually want to draw a line, it contains arrows, when I select it, I can adjust its direction
OK, you might want to look at Draggable Link. That does not have a tool for drawing a disconnected link in the background (as opposed to one drawn from a port), but I thought I had implemented such a tool recently. I can look for it tomorrow, if you can’t find it here.
Well, goodnight, this program can solve my problem temporarily,
But ultimately, it’s going to draw a piece,
Thank you very much for your help.
Tomorrow we will continue to discuss
Good morning, I refer to ‘PolylineLinkingTool’ to achieve my goal.
But my writing seems to be incorrect, Gojs throws an error: 'Ending transaction without having started a transaction: ’
My thoughts are:
-
When ‘isEnabled’ is ‘true’, the tool starts.
-
The first time the mouse pressed, I added a line of data.
-
The second time the mouse presses, completes the last point of modification, draws complete.
Now, the tool is works, but because I’m write code Gojs think it’s a error.
Can you help me to troubleshoot this error?
function CreatlineLinkingTool() {
go.LinkingTool.call(this);
this.name = “CreatlineLinking”;
this._isEnabled = false;
this._firstMouseDown = true;
this._actionLink = null;
this.archLinkCatgory = ‘lineGraffiti’;
}
go.Diagram.inherit(CreatlineLinkingTool, go.LinkingTool);CreatlineLinkingTool.prototype.canStart = function() {
return this._isEnabled ? true : false;
}
Object.defineProperty(CreatlineLinkingTool.prototype, ‘isEnabled’, {
get: function() {
return this._isEnabled;
},
set: function(val) {
this._isEnabled = val;
if (val) {
this.diagram.currentCursor = “crosshair”;
this.isActive = true;
} else {
this.doCancel();
this.isActive = false;
}
}
});
CreatlineLinkingTool.prototype.doActivate = function() {
go.LinkingTool.prototype.doActivate.call(this);
this._firstMouseDown = true;};
CreatlineLinkingTool.prototype.addPoint = function§ {
if (this._firstMouseDown) return;
var pts = this._actionLink.points.copy();
pts.add(p.copy());
this._actionLink.points = pts;
};CreatlineLinkingTool.prototype.moveLastPoint = function§ {
if (this._firstMouseDown) return;
var pts = this._actionLink.points.copy();
pts.setElt(pts.length - 1, p.copy());
this._actionLink.points = pts;
};CreatlineLinkingTool.prototype.doMouseDown = function() {
if (!this.isActive) {
this.doActivate();
}
if (this.diagram.lastInput.left) {
if (this._firstMouseDown) {
this.doStart();
var keyid = UUIDjs.create().hex;
var linkdata = {
category: this.archLinkCatgory,
start_point: go.Point.stringify(this.diagram.lastInput.documentPoint),
end_point: go.Point.stringify(this.diagram.lastInput.documentPoint),
stroke_width: 2,
stroke_color: ‘#ff0000’,
external_id: keyid,
key: keyid
};
this.diagram.model.addLinkData(linkdata);
this._firstMouseDown = false;
this._actionLink = this.diagram.findLinkForData(linkdata);
} else {
if (this._actionLink.points.toArray().length > 1) {
this.doCancel();
this._actionLink = null;
this.doActivate();
this.isActive = true;
} else {
this.addPoint(this.diagram.lastInput.documentPoint);
}
}
} else {
this.doCancel();
this._actionLink = null;
this.doActivate();
this.isActive = true;
}
};CreatlineLinkingTool.prototype.doMouseMove = function() {
if (this.isActive) {
this.moveLastPoint(this.diagram.lastInput.documentPoint);
go.LinkingTool.prototype.doMouseMove.call(this);
}
};CreatlineLinkingTool.prototype.doMouseUp = function() {
if (!this.isActive) return;};
There already is a Tool.isEnabled property, so you really shouldn’t by trying to override it.
Try this tool, which is taken from a derivation of the Draggable Link sample:
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 GraphLinksModel) && !(model instanceof 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
Install with:
myDiagram.toolManager.mouseMoveTools.insertAt(2, new DisconnectedLinkingTool());
Sorry, I feel understand the code of this tool,
But I’m not familiar with the tool’s running mechanism, which I can’t use.
I don’t have any reactions in after installation