Code

args.link.headShape = Diagramming.Shape.fromId("Triangle"); 

Code

import React, { Component } from 'react';
import * as Diagramming from '@mindfusion/diagramming';
import * as Drawing from '@mindfusion/drawing';
import { DiagramView } from '@mindfusion/diagramming-react';

class DiagramApp extends Component {

    constructor(props) {
      super(props);

      // create the diagram
      var diagram = new Diagramming.Diagram();
      diagram.bounds = new Drawing.Rect(10, 10, 400, 300);

      var beige = "#E0DA99";
      var green = "#858134";
      var crimson = "#5C1C09";
      var gray = "#4E493D";
      var yellow = "#D9BE48";

      var theme = new Diagramming.Theme();
      var shapeNodeStyle = new Diagramming.Style();
      shapeNodeStyle.brush = ({ type: 'LinearGradientBrush', color1: beige, color2: yellow, angle: 90 });
      shapeNodeStyle.stroke = (gray);
      shapeNodeStyle.textColor = (gray);
      shapeNodeStyle.fontName = ("Verdana");
      shapeNodeStyle.fontSize = (3);
      shapeNodeStyle.backBrush = (beige);
      shapeNodeStyle.nodeEffects = [];
      shapeNodeStyle.nodeEffects.push(new Diagramming.GlassEffect());
      theme.styles.set("std:ShapeNode", shapeNodeStyle);

      var linkStyle = new Diagramming.Style();
      linkStyle.stroke = (gray);
      linkStyle.brush = (green);
      linkStyle.backBrush = (crimson);

      linkStyle.textColor = "#585A5C";
      linkStyle.fontName = "Verdana";
      linkStyle.fontSize = 3;
      theme.styles.set("std:DiagramLink", linkStyle);

      diagram.theme = theme;

      diagram.defaultShape = ("Rectangle");

      this.state = {
        diagram: diagram
      };

    }

    onDiagramLinkCreated2(sender, args) {

           // change the arrowhead shape
           args.link.headShape = Diagramming.Shape.fromId("Triangle");
           args.link.baseShape = Diagramming.Shape.fromId("Triangle");

           args.link.onUpdateVisuals = function (link){

            for(var i =1; i <link.points.length-1; i++)
            {
                var linkShape = Diagramming.Shape.component("BowArrow", false);

                var headRenderer = linkShape.shapeRenderer;

                var current = link.points[i];
                var prev = link.points[i-1];

                headRenderer.updateArrowHeadData(link.headShapeBounds,
                current, prev);

                headRenderer.strokeThickness = link.effectiveHeadStrokeThickness;
                headRenderer.outlineBrush = link.effectiveHeadBrush;
                headRenderer.outlinePen = link.effectiveHeadStroke
                headRenderer.decorationPen = link.effectiveHeadStroke;
                headRenderer.strokeDashStyle = link.effectiveHeadStrokeDashStyle;

                link.graphicsContainer.content.push(headRenderer);
            }

        };

    }

    //set routeLinks to false when you enable this method
    onDiagramLinkCreated1(sender, args) {


        args.link.onUpdateVisuals = function (link){

          var linkShape = Diagramming.Shape.component("BowArrow", false);

          var headRenderer = linkShape.shapeRenderer;

          var sp = link.startPoint;
          var ep = link.endPoint;

          var middle = new Drawing.Point((sp.x + ep.x)/2, (sp.y + ep.y)/2 );

          if(link.points.length > 2)
            middle = link.points[1];

          headRenderer.updateArrowHeadData(link.headShapeBounds,
            middle, link.startPoint);

          headRenderer.strokeThickness = link.effectiveHeadStrokeThickness;
          headRenderer.outlineBrush = link.effectiveHeadBrush;
          headRenderer.outlinePen = link.effectiveHeadStroke
          headRenderer.decorationPen = link.effectiveHeadStroke;
          headRenderer.strokeDashStyle = link.effectiveHeadStrokeDashStyle;

          link.graphicsContainer.content.push(headRenderer);

        };

 }

 onDiagramLinkCreated(sender, args) {


    // change the arrowhead shape
	//	args.link.headShape = Diagramming.Shape.fromId("DoubleArrow");

    /* define a custom shape from coordinates
       var s = new Diagramming.Shape({ id: "MyShape", outline: "M50,0 L100,50 L49,18 L0,50 L50,0 Z" });

    // change the arrowhead shape
      args.link.headShape = s; */

   //with shape library
    var library = new Diagramming.ShapeLibrary();
    library.loadFromXml("MyLibrary.xml");


    library.loadFromXml("MyLibrary.xml", function(){
    var s = Diagramming.Shape.fromId("newShape1");
    args.link.headShape = s;

    });



		// add the box
		var label = args.link.addLabel(" ... ");
		label.brush = "#5C1C09";
		// uncomment the below line to 'hide' the dots
		label.textColor = "#D9BE48";
		label.horizontalAlign = Diagramming.Alignment.Center;
		label.verticalAlign = Diagramming.Alignment.Center;

    // change the arrowhead shape
  //  args.link.headShape = Diagramming.Shape.fromId("Triangle");
  //  args.link.baseShape = Diagramming.Shape.fromId("Triangle");

}

    render() {
        var props = {
          "allowInplaceEdit": true,
          "routeLinks": false,
          "showGrid": true,
          "backBrush": "#edeac4",
        };

        return (

            <div className="container">
              <div className="main">
                <DiagramView diagram={this.state.diagram} {...props}
                  onLinkCreated={(sender, args) => this.onDiagramLinkCreated(sender, args)} />
              </div>
            </div>

        );
      }
}
export default DiagramApp; 

Hi,

I can see couple of things -

1. We've recently moved the diagram API to property-based syntax (in version 4 of the control) and the video and code there shows that, while apparently you've started your project with the older v3 get/set syntax. So if you prefer v3, you can set arrowheads like this:

Code

args.getLink().setHeadShape(mf.Diagramming.Shape.fromId("Triangle")); 

while this property assignment syntax will work only with v4:

Code

args.link.headShape = mf.Diagramming.Shape.fromId("Triangle"); 

2. This assignment in your linkCreated3 handler sets default head shape that the control automatically assigns to newly drawn links, but does not change the just-created link for which linkCreated event gets raised:

Code

this.state.diagram.setLinkHeadShape(headShape); 

So that's why you are seeing the expected shape when you draw link next time. You could move that code from linkCreated3 to onSelectChange, and stop setting args.link.headShape from linkCreated. Then the drop-down handler would change diagram's default linkHeadShape, and the diagram will automatically assign it to newly drawn links' own headShape property.

Regards,
Slavcho
Mindfusion

Code (Javascript)

var headShape = mf.Diagramming.Shape.fromId("Triangle");
headShape.brush = 'black'