Bandwidth Frequency

by Roman Bruckner

HTML

<html>
<head>
    <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/jointjs/3.3.0/joint.css" />
</head>
<body>
      <!-- content -->
      <div id="paper"></div>

      <!-- dependencies -->
        <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.20/lodash.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/backbone.js/1.4.0/backbone.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/jointjs/3.3.0/joint.js"></script>
    
    </body>
</html>

JavaScript

const y = 300;
const x1 = 100;
const x2 = 700;

var graph = new joint.dia.Graph();
var paper = new joint.dia.Paper({
  el: document.getElementById('paper'),
  width: 800,
  height: 600,
  model: graph,
  async: true,
  sorting: joint.dia.Paper.sorting.APPROX,
  defaultConnectionPoint: {
    name: 'boundary',
  },
  restrictTranslate: (elementView) => {
    const {
      height
    } = elementView.model.size();
    return new g.Rect(x1, y - height, x2 - x1, 0);
  }
});

const line = V('line', {
  x1,
  y1: y,
  x2,
  y2: y,
  'stroke': 'black'
});
line.appendTo(paper.getLayerNode(joint.dia.Paper.Layers.BACK));

const Bandwidth = joint.dia.Element.define('Bandwidth', {
  size: {
    width: 100,
    height: 50
  },
  attrs: {
    body: {
      refWidth: '100%',
      refHeight: '100%',
      strokeWidth: 2,
      stroke: '#000000',
      fill: '#96AADA'
    },
    label: {
      textVerticalAnchor: 'bottom',
      textAnchor: 'middle',
      refX: '50%',
      refY: -20,
      fontSize: 14,
      fill: '#333333',
      text: 'C-Freq'
    },
    frequencyMarkers: {
      fill: 'none',
      stroke: '#5E2E9B',
      strokeWidth: 4
    },
    carrierFrequencyBandwidth: {
      refX: '50%',
      refY: '100%',
      d: 'M -30 -25 30 -25',
      sourceMarker: {
        'type': 'path',
        'd': 'M 10 -5 -1 0 10 5 z'
      },
      targetMarker: {
        'type': 'path',
        'd': 'M 10 -5 -1 0 10 5 z'
      }
    },
    carrierFrequency: {
      refX: '50%',
      refY: '100%',
      d: 'M 0 0 0 -70',
      cursor: 'col-resize',
      event: 'bandwidth:resize'
    },
    sidebands: {
      fill: 'none',
      stroke: 'red',
      strokeWidth: 4
    },
    lowerSideband: {
      refX: '0%',
      d: 'M 0 0 0 50'
    },
    upperSideband: {
      refX: '100%',
      d: 'M 0 0 0 50',
      strokeDasharray: '15,15'
    },
  }
}, {
  markup: [{
    tagName: 'rect',
    selector: 'body',
  }, {
    tagName: 'text',
    selector: 'label'
  }, {
    tagName: 'path',
   ...