Link arrow problem

@ahmetgundogdu wrote:

How do I fix it normally needs to be like this

This problem occurs in the link code link arrow. How do I solve this problem?

All code is below:

<script id="code">
	
	var shapes = {
		flowStateMain: "M35,13A12,12,0,0,1,35,37A12,12,0,0,1,35,13Z",
		flowStateStaticColor: "M34.809,17.932c2.616,0,5.191,1.206,5.191,4.087c0,2.656-3.045,3.678-3.699,4.639c-0.49,0.715-0.327,1.717-1.676,1.717c-0.879,0-1.308-0.715-1.308-1.369c0-2.432,3.576-2.984,3.576-4.986c0-1.104-0.736-1.758-1.962-1.758c-2.616,0-1.594,2.698-3.576,2.698c-0.715,0-1.328-0.429-1.328-1.247C30.028,19.709,32.316,17.932,34.809,17.932z M34.707,29.702c0.919,0,1.676,0.756,1.676,1.676c0,0.92-0.756,1.676-1.676,1.676c-0.92,0-1.676-0.756-1.676-1.676C33.031,30.458,33.788,29.702,34.707,29.702z",
		flowStateBorder1: "M35,41v5c0,1.105-0.895,2-2,2H3c-1.105,0-2-0.895-2-2V3c0-1.105,0.895-2,2-2h30c1.105,0,2,0.895,2,2v6",
		flowStateBorder2: "M8,13H23",
		flowStateBorder3: "M8,19H19",
		flowStateBorder4: "M8,25H18",
		flowStateBorder5: "M8,31H19",
		flowStateBorder6: "M8,37H23"
	};
	
	function bindGeometryString(data){
	 return go.Geometry.parse(shapes[data.shapeKey]);
	}
	
	function linkDrawnEvent(e) {
        let link = e.subject;
        e.diagram.model.setDataProperty(link.data, "curviness", 80);
        e.diagram.updateAllTargetBindings();
    }
	
	function bindPanelItemArray(){
		return [
            {
                shapeKey: "flowStateMain",
                fill: "fill",
                stroke: null,
            },
            {
                shapeKey: "flowStateStaticColor",
                fill: "white",
                stroke: null,
            },
            {
                shapeKey: "flowStateBorder1",
                fill: "transparent",
                stroke: "stroke",
            },
            {
                shapeKey: "flowStateBorder2",
                fill: "transparent",
                stroke: "stroke",
            },
            {
                shapeKey: "flowStateBorder3",
                fill: "transparent",
                stroke: "stroke",
            },
            {
                shapeKey: "flowStateBorder4",
                fill: "transparent",
                stroke: "stroke",
            },
            {
                shapeKey: "flowStateBorder5",
                fill: "transparent",
                stroke: "stroke",
            },
            {
                shapeKey: "flowStateBorder6",
                fill: "transparent",
                stroke: "stroke",
            },

        ];
	}
    function init() {
      if (window.goSamples) goSamples();  // init for these samples -- you don't need to call this
      var $ = go.GraphObject.make;
      myDiagram =
        $(go.Diagram, "myDiagramDiv",
          {
		    draggingTool: new NonRealtimeDraggingTool(),
            initialContentAlignment: go.Spot.Left,
            "undoManager.isEnabled": true,
			"toolManager.mouseWheelBehavior": go.ToolManager.WheelZoom,
			"LinkDrawn": linkDrawnEvent
          }
        );
      function makePort(name, align, spot, output, input) {
		
		var horizontal = align.equals(go.Spot.Top) || align.equals(go.Spot.Bottom);
	  
        var port = $(go.Shape,
          {
            cursor: "pointer",
            fill: "transparent",
            strokeWidth: 0,
            width: horizontal ? NaN : 8,
            height: !horizontal ? NaN : 8,
            alignment: align,
            stretch: (horizontal ? go.GraphObject.Horizontal : go.GraphObject.Vertical),
            portId: name,
            fromSpot: spot,
            fromLinkable: output,
            toSpot: spot,
            toLinkable: input,
            mouseEnter: function(e, port) {
              port.fill = "transparent";
            },
            mouseLeave: function(e, port) {
              port.fill = "transparent";
            }
          });
        return port;
      }
	  
	  
      function makeTemplate(typename) {
        var node = $(go.Node, "Spot",
		    { 
				selectionAdorned: false
			},
			$(go.Panel, "Vertical",
				$(go.Panel, "Spot",
					  $(go.Panel, "Viewbox",
                                {
                                    cursor: "move"
                                },
                                $(go.Panel, "Position",
                                    {
                                        itemTemplate:
                                            $(go.Panel,
                                                $(go.Shape, "RoundedRectangle",
                                                    {
                                                        fill: "transparent",
                                                        isGeometryPositioned: true,
                                                        shadowVisible: false,
                                                    },
													new go.Binding("geometry", "", bindGeometryString),
                                                )
                                            )
                                    },
                                    new go.Binding("itemArray", "", bindPanelItemArray)
                                )
                            ),
				  makePort("T", go.Spot.Top, go.Spot.TopSide, false, true),
				  makePort("L", go.Spot.Left, go.Spot.LeftSide, true, true),
				  makePort("R", go.Spot.Right, go.Spot.RightSide, true, true)
				),
					  $(go.TextBlock,
						{
						  editable: true,
						  stroke: "black",
						  margin: new go.Margin(2, 0),
						  font: "bold 9pt sans-serif"
						},
						new go.Binding("text", "name").makeTwoWay()),
						
			),
			makePort("B", go.Spot.Bottom, go.Spot.BottomSide, true, false)
        );
        myDiagram.nodeTemplateMap.set(typename, node);
      }
      
	 makeTemplate("Table");
	 
	 myDiagram.linkTemplate =
        $(go.Link, go.Link.Bezier,
          {
            fromEndSegmentLength: 25, toEndSegmentLength: 25,
            adjusting: go.Link.End
          },
		  $(go.Shape,
            { stroke: "gray", strokeWidth: 1 }),
          $(go.Shape,  // the "to" arrowhead
            { toArrow: "Standard", scale: 1 }),
        );
	 
      load();
    }
    function save() {
      document.getElementById("mySavedModel").value = myDiagram.model.toJson();
      myDiagram.isModified = false;
    }
    function load() {
      myDiagram.model = go.Model.fromJson(document.getElementById("mySavedModel").value);
    }
  </script>

Posts: 3

Participants: 2

Read full topic