JSFiddle - React, Tailwind, and code Playground

by batobolg

HTML

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

  <div id="d1" style="width: 300px; height: 300px; border-style:  solid;"></div>
  <button id="bbb">Button</button>

JavaScript

function showContent() {
	// Diagram                                                                //
	var $go = go.GraphObject.make;  // for conciseness in defining templates
  let diagramA = $go(go.Diagram, "d1",  // create a Diagram for the DIV HTML element
  {
    // allow double-click in background to create a new node
    "clickCreatingTool.archetypeNodeData": { text: "Node", color: "white" },
    // enable undo & redo
    "undoManager.isEnabled": true
  });
  
	// define the Node template
	diagramA.nodeTemplate =
	  $go(go.Node, "Auto", { resizable: true },
		new go.Binding("location", "loc", go.Point.parse).makeTwoWay(go.Point.stringify),
		$go(go.Shape, "RoundedRectangle",
		  {
			parameter1: 20,  // the corner has a large radius
			fill: "lightgreen",
			stroke: null,
			portId: "",  // this Shape is the Node's port, not the whole Node
			cursor: "pointer"
		  },
      new go.Binding("desiredSize", "size", go.Size.parse).makeTwoWay(go.Size.stringify)
      ),
		$go(go.TextBlock,
		  {
			font: "bold 11pt helvetica, bold arial, sans-serif",
			editable: true  // editing the text automatically updates the model data
		  },
		  new go.Binding("text").makeTwoWay())
  );
  
   // Create the Diagram's Model:
      var nodeDataArray = [
        { key: 1, text: "Alpha", color: "lightblue", size:"200 100" },
      ];
      var linkDataArray = [
      ];
      diagramA.model = new go.GraphLinksModel(nodeDataArray, linkDataArray);

	
	$("#bbb").click(function(){
  
  	let node = diagramA.findNodeForKey(1);
 
    diagramA.model.startTransaction("sssss");
    delete node.data['size'];
    //diagramA.model.setDataProperty(node.data, "size", "150 90");
    diagramA.model.commitTransaction("sssss");
    

	});
  
}

$(document).ready(showContent);