Untitled

<!DOCTYPE html>
<html>
<head>
  <title>Simple BPM Canvas</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      margin: 0;
    }

    .left-panel {
      width: 100px;
      background-color: #f0f0f0;
      padding: 10px;
      float: left;
    }

    .toolbar {
      margin-bottom: 10px;
    }

    .toolbar div {
      width: 80px;
      height: 30px;
      border: 1px solid #ccc;
      background-color: #fff;
      margin-bottom: 10px;
      text-align: center;
      line-height: 30px;
      cursor: pointer;
    }

    .canvas {
      width: 800px;
      height: 400px;
      margin: 20px auto;
      border: 1px solid #ccc;
      background-color: #f9f9f9;
      position: relative;
    }

    .bpm-element {
      position: absolute;
      background-color: #b3e0ff;
      border: 1px solid #007fff;
      padding: 5px;
      cursor: pointer;
      display: flex;
      justify-content: center;
      align-items: center;
    }

    .connector-pin {
      width: 10px;
      height: 10px;
      background-color: #007fff;
      border-radius: 50%;
      position: absolute;
    }

    .top-pin {
      top: -5px;
      left: 50%;
      transform: translateX(-50%);
    }

    .bottom-pin {
      bottom: -5px;
      left: 50%;
      transform: translateX(-50%);
    }

    .left-pin {
      top: 50%;
      left: -5px;
      transform: translateY(-50%);
    }

    .right-pin {
      top: 50%;
      right: -5px;
      transform: translateY(-50%);
    }
  </style>
</head>
<body>
  <div class="left-panel">
    <div class="toolbar">
      <div class="start-event" draggable="true" ondragstart="onDragStart(event)">Start</div>
      <div class="task" draggable="true" ondragstart="onDragStart(event)">Task 1</div>
      <div class="end-event" draggable="true" ondragstart="onDragStart(event)">End</div>
    </div>
  </div>
  <div class="canvas" id="canvas" ondrop="onDrop(event)" ondragover="onDragOver(event)"></div>
  <script>
    function onDragStart(event) {
      event.dataTransfer.setData("text/plain", event.target.innerText);
    }

    function onDrop(event) {
      event.preventDefault();
      var data = event.dataTransfer.getData("text/plain");
      var bpmElement = document.createElement('div');
      bpmElement.classList.add('bpm-element');
      bpmElement.innerText = data;
      bpmElement.style.left = (event.clientX - event.target.offsetLeft) + 'px';
      bpmElement.style.top = (event.clientY - event.target.offsetTop) + 'px';

      // Add connector pins to the element
      var topPin = document.createElement('div');
      topPin.classList.add('connector-pin', 'top-pin');
      bpmElement.appendChild(topPin);

      var bottomPin = document.createElement('div');
      bottomPin.classList.add('connector-pin', 'bottom-pin');
      bpmElement.appendChild(bottomPin);

      var leftPin = document.createElement('div');
      leftPin.classList.add('connector-pin', 'left-pin');
      bpmElement.appendChild(leftPin);

      var rightPin = document.createElement('div');
      rightPin.classList.add('connector-pin', 'right-pin');
      bpmElement.appendChild(rightPin);

      event.target.appendChild(bpmElement);

      // Make the newly added element draggable on the canvas
      bpmElement.addEventListener('mousedown', onElementDragStart);
    }

    function onDragOver(event) {
      event.preventDefault();
    }

    // Make the elements on the canvas draggable
    function onElementDragStart(event) {
      var target = event.target;
      var offsetX = event.clientX - target.getBoundingClientRect().left;
      var offsetY = event.clientY - target.getBoundingClientRect().top;

      function onElementDrag(event) {
        target.style.left = (event.clientX - offsetX) + 'px';
        target.style.top = (event.clientY - offsetY) + 'px';
      }

      function onElementDragEnd() {
        window.removeEventListener('mousemove', onElementDrag);
        window.removeEventListener('mouseup', onElementDragEnd);
      }

      window.addEventListener('mousemove', onElementDrag);
      window.addEventListener('mouseup', onElementDragEnd);
    }
  </script>
</body>
</html>