JSFiddle - React, Tailwind, and code Playground

by parksd

HTML

<script id='sap-ui-bootstrap' src='https://openui5.hana.ondemand.com/resources/sap-ui-core.js' data-sap-ui-theme="sap_bluecrystal" data-sap-ui-libs='sap.ui.commons,sap.ui.table'></script>

<body class="sapUiBody">
  <!-- This is where the controls will go -->
  <div id="content"></div>
</body>

CSS

/* .axis path,
.axis line {
  fill: none;
  stroke: #000;
  shape-rendering: crispEdges;
}

.brush .extent {
  stroke: #fff;
  fill-opacity: .125;
  shape-rendering: crispEdges;
}

circle {
  -webkit-transition: fill-opacity 250ms linear;
}

.selecting circle {
  fill-opacity: .2;
}

.selecting circle.selected {
  stroke: #113975;
}

.bubbles {
  opacity: .8;
  stroke: #ccc;
}
 */

.div-workspace {
  background: white;
}

.button-new {
  cursor: pointer
}

.button-part-circle {
  fill: transparent;
  stroke: #CCC;
  stroke-width: 2px;
  stroke-dasharray: 2;
}

.button-part-plus {
  fill: #CCC;
}

html {
  padding-left: 20px;
  padding-right: 20px;
}

JavaScript

/* Get D3.JS, it is included in the packaging */
	jQuery.sap.require("sap/ui/thirdparty/d3");

	var oUpperBar = new sap.ui.layout.HorizontalLayout({});
	sap.ui.core.Control.extend("my.Workspace", {
	  renderer: function(oRm, oControl) {
	    oRm.write("<div");
	    oRm.writeControlData(oControl);
	    oRm.addClass("div-workspace");
	    oRm.writeClasses();
	    oRm.write("></div>");

	  },

	  data: {
	    type: "root",
	    children: [{
	        type: "filter",
	      },
	      {
	        type: "loop",
	        children: [{
	          type: "newData"
	        }]
	      }
	    ]
	  },
	  onAfterRendering: function() {

	    var oSvgContainer = d3.select("#" + this.getId())
	      .append("svg")
	      .attr("width", 500)
	      .attr("height", 500);

	    function contextMenu() {
	      var height,
	        width,
	        margin = 0.1, // fraction of width
	        items = [],
	        rescale = false,
	        style = {
	          'rect': {
	            'mouseout': {
	              'fill': 'rgb(255,255,255)',
	              'stroke': '#EEE',
	              'stroke-width': '1px'
	            },
	            'mouseover': {
	              'fill': 'rgb(200,200,200)'
	            }
	          },
	          'text': {
	            'fill': 'black',
	            'font-size': '16'
	          }
	        };

	      function menu(x, y) {
	        d3.select('.context-menu').remove();
	        scaleItems();

	        // Draw the menu
	        d3.select('svg')
	          .append('g').attr('class', 'context-menu')
	          .selectAll('tmp')
	          .data(items).enter()
	          .append('g').attr('class', 'menu-entry')
	          .style({
	            'cursor': 'pointer'
	          })
	          .on('mouseover', function() {
	            d3.select(this).select('rect').style(style.rect.mouseover)
	          })
	          .on('mouseout', function() {
	            d3.select(this).select('rect').style(style.rect.mouseout)
	          })
	          .on('click', function() {
	  ...