LINK test2

for link portId

by batobolg

HTML

<script src="https://gojs.net/latest/release/go-debug.js"></script>

<div lang="ja" id="d1" style="width: 400px; height: 200px; border-style: solid; font-family:Meiryo"></div>
<div lang="zh" id="d2" style="width: 400px; height: 200px; border-style: solid; font-family:Meiryo"></div>

JavaScript

var $go = go.GraphObject.make;  // for conciseness in defining templates


function makeDia(id) {
return $go(go.Diagram, id,  // create a Diagram for the DIV HTML element
    {
			"animationManager.isEnabled": false,  // turn off automatic animations
			scrollMode : go.Diagram.InfiniteScroll,
			hasHorizontalScrollbar: false,
			hasVerticalScrollbar: false,
			initialAutoScale: go.Diagram.Uniform,
			"toolManager.mouseWheelBehavior": go.ToolManager.WheelZoom,
			"undoManager.isEnabled": true, // enable Ctrl-Z to undo and Ctrl-Y to redo
			"linkingTool.portGravity": 0,
			"relinkingTool.portGravity": 0,
			"linkingTool.isUnconnectedLinkValid": true,
			"relinkingTool.isUnconnectedLinkValid": true,
			allowDrop:true,
			allowDragOut:true,
			"model.linkKeyProperty": "id",
			"padding": new go.Margin(20, 10, 10, 10),
			"draggingTool.dragsLink": true, // Original not GuidedDraggingTool.js's property
			"dragSelectingTool.delay": 300,
		});
}

function makeTempl(diagram) {
  diagram.nodeTemplate =$go(go.Node, "Spot", { 
				locationSpot: go.Spot.TopLeft, locationObjectName: "BODY"
			},
			{ rotatable: true, rotationSpot: go.Spot.Center },
			new go.Binding("location", "loc", go.Point.parse).makeTwoWay(go.Point.stringify),
			$go(go.Panel, "Auto", { name: "BODY"},
				$go(go.Shape,
					{
					stroke: null,
					portId: "", fill: null
					}
        ),
				$go(go.TextBlock, {
						name: "TEXT",
						font: "10px sans-serif",
						editable: true,  // editing the text automatically updates the model data
						//textEditor: window.TextEditor
            margin: 0
					},
					new go.Binding("text").makeTwoWay()
				)
			)
		);	

}

function showContent() {
	// Diagram          
  let diagramA = makeDia('d1');
  let diagramB = makeDia('d2');
  makeTempl(diagramA);
  makeTempl(diagramB);
  
  // Create the Diagram's Model:
  var nodeDataArray = [
        { key: 1, text: "About edit lock(borrow)\n\u00ad \u203bthe borrow for edit it separate from share and security",...