jQuery addClass example

Change class name on click in jQuery

by batobolg

HTML

<script src="https://gojs.net/latest/release/go.js"></script>
<script src="https://gojs.net/latest/extensions/Figures.js"></script>
<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
  <meta charset="utf-8">
  <title>Test</title>
</head>
<body>
  <div id="d1" style="width: 300px; height: 250px"></div>
</body>
</html>

JavaScript

//▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒
function showContent() {
	// LinkTemplate ---------------------------------------------
	function makeLinkTemplate() {
		return $go(go.Link,  // the whole link panel
			{
				curve: go.Link.Bezier, 
				adjusting: go.Link.Scale,
				reshapable: true, relinkableFrom: true, relinkableTo: true,
				toShortLength: 6.4, fromShortLength: 0,
			},
			new go.Binding("fromSpot", "linkFromSpot", go.Spot.parse),
		  new go.Binding("toSpot", "linkToSpot", go.Spot.parse),
			new go.Binding("points").makeTwoWay(),
			$go(go.Shape,  // the link shape
				{ strokeWidth: 1.5 },
				),
			$go(go.Shape,  // the arrowhead
				{ fromArrow: "Backward", visible: true},
				),
			$go(go.Shape,  // the arrowhead
				{ toArrow: "Standard"},
				),

		);
	};

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

	//go.licenseKey = ...; // not shiiiii
	let diagramSetting = {
		initialAutoScale: go.Diagram.Uniform,
		"toolManager.mouseWheelBehavior": go.ToolManager.WheelZoom,
		"linkingTool.portGravity": 0, "relinkingTool.portGravity": 0,
		"undoManager.isEnabled": true,
		"animationManager.isEnabled": false,
		"linkingTool.isUnconnectedLinkValid": true,
		"relinkingTool.isUnconnectedLinkValid": true,
		"draggingTool.dragsLink": true,
		"model.linkKeyProperty": "key",
		allowDrop: true,
		allowDragOut: true
	};
	let diagramA = $go(go.Diagram, "d1", diagramSetting);
  
	// define the Node template
	var nodeTemplate = $go(go.Node, "Auto", { resizable: true },
		new go.Binding("location", "loc", go.Point.parse).makeTwoWay(go.Point.stringify),
		$go(go.Shape, 
		{
			parameter1: 20,  // the corner has a large radius
			fill: "lightgreen", stroke: "black", strokeWidth: 1.5,
			portId: "",  // this Shape is the Node's port, not the whole Node
			fromLinkable: true, fromLinkableSelfNode: true, fromLinkableDuplicates: true,
			toLinkable: true, toLinkableSelfNode: true, toLinkableDuplicates: true,
			cursor: "pointer"
		},
    new go.Binding("figure",...