Hi,
I’m using the LineDrawing tool,
and want to add arrowheads on start and end of the line.
Can you help me, please?
Which line drawing tool have you started with?
Once I know what code you are using, when I get a chance later today, I’ll come up with a sample for you that shows how to customize the Path Geometry.
I’m using Line Drawing and Reshaping Sample
But I have changed the LineDrawingTool function. Here you can see the changes
` window.LineDrawingTool = function () {
go.Tool.call(this);
this.name = "LineDrawing";
/** @type {Object} */
this._archetypeNodeData = null;
//var b = new go.Part();
//b.layerName = "Tool";
//b.selectable = false;
//b.locationObjectName = "SHAPE";
//var r = new go.Shape();
//r.name = "SHAPE";
//r.geometry = new go.Geometry(go.Geometry.Line);
//r.fill = null;
//r.stroke = "blue";
//r.strokeWidth = 3;
//r.position = new go.Point(0, 0);
//b.add(r);
//b.locationSpot = new go.Spot(0, 0, r.strokeWidth / 2, r.strokeWidth / 2);
//var t = new go.TextBlock();
//t.name = 'TEXT';
//t.text = 10;
//b.add(t);
var GO = go.GraphObject.make;
var b = GO(go.Part, 'Spot',
{
name: 'PART',
reshapable: true,
selectionAdorned: false,
},
new go.Binding("location", "loc", go.Point.parse).makeTwoWay(go.Point.stringify),
{
locationObjectName: "SHAPE",
locationSpot: new go.Spot(0, 0, 0.5, 0.5)
}, // account for strokeWidth, default == 1
new go.Binding("locationSpot", "strokeWidth", function(sw) { return new go.Spot(0, 0, sw / 2, sw / 2); }).ofObject("SHAPE").makeTwoWay(),
GO(go.TextBlock,
{
name: 'TEXT',
height: 40,
editable: true,
isMultiline: false,
textAlign: 'center',
verticalAlignment: go.Spot.Top
},
new go.Binding('height', 'height').makeTwoWay(),
new go.Binding('width', 'width').makeTwoWay(),
new go.Binding('angle', 'angle').makeTwoWay(),
new go.Binding('stroke', 'stroke').makeTwoWay(),
new go.Binding('text', 'text').makeTwoWay()
),
GO(go.Shape,
{
name: "SHAPE",
stroke: "blue",
strokeWidth: 3
},
new go.Binding('fill').makeTwoWay()
//new go.Binding("geometry", "pts", makeGeo).makeTwoWay(saveGeo)
)
)
/** @type {Part} */
this._tempLine = b;
/** @type {number} */
this._delay = 0;
};`
The original code is the one that is commented (except TextBlock part).
In the main code, I’ve used
`var measureTool = new LineDrawingTool();
measureTool.archetypeNodeData = {
category: "MeasureDrawing"
};
window.measureTool = measureTool;
diagram.nodeTemplateMap.add('MeasureDrawing',
GO(go.Part, 'Spot',
{
name: 'PART',
reshapable: true,
selectionAdorned: false,
},
new go.Binding("location", "loc", go.Point.parse).makeTwoWay(go.Point.stringify),
{
locationObjectName: "SHAPE",
locationSpot: new go.Spot(0, 0, 0.5, 0.5)
}, // account for strokeWidth, default == 1
new go.Binding("locationSpot", "strokeWidth", function(sw) { return new go.Spot(0, 0, sw / 2, sw / 2); }).ofObject("SHAPE").makeTwoWay(),
GO(go.TextBlock,
{
name: 'TEXT',
height: 40,
editable: true,
isMultiline: false,
textAlign: 'center',
verticalAlignment: go.Spot.Top
},
new go.Binding('height', 'height').makeTwoWay(),
new go.Binding('width', 'width').makeTwoWay(),
new go.Binding('angle', 'angle').makeTwoWay(),
new go.Binding('stroke', 'stroke').makeTwoWay(),
new go.Binding('text', 'text').makeTwoWay()
),
GO(go.Shape,
{
name: "SHAPE",
stroke: "blue",
strokeWidth: 3
},
new go.Binding('fill').makeTwoWay(),
new go.Binding('stroke').makeTwoWay(),
new go.Binding('strokeWidth').makeTwoWay(),
new go.Binding("geometry", "pts", makeGeo).makeTwoWay(saveGeo)
)
)
);
diagram.toolManager.mouseMoveTools.insertAt(0, measureTool);
diagram.toolManager.mouseDownTools.add(GO(LineReshapingTool));
function makeGeo(pts) {
var geo = new go.Geometry(go.Geometry.Line);
geo.startX = pts[0];
geo.startY = pts[1];
geo.endX = pts[2];
geo.endY = pts[3];
return geo;
}
function saveGeo(geo) {
return [geo.startX, geo.startY, geo.endX, geo.endY];
}`
Ah, I didn’t find that sample in my first search.
OK, I’ll see if I can modify the original LineDrawingTool to add simple arrowheads on both ends. It’s primarily a matter of generating a Path Geometry instead of a simple Line Geometry.
Sorry. I’m waiting for your answer.
I’ve written most of the code, but there is a bug in the modified reshaping tool that I am hoping to fix sometime later today.
Here you go: Line Drawing and Reshaping Sample, with arrowheads.
All of the code is there on the page. It is somewhat different than the original LineDrawingTool code. In additional to some regular nodes and links, the initial diagram shows two “Line” Parts. The LineDrawingTool and LineReshapingTool have been extended so the user can draw these lines-with-arrowheads and can move either endpoint. I’ve also added a thick transparent Shape to the Part template to make it easier for the user to select a “Line”.
Thank you very much