Foreign Object ES6

by Roman Bruckner

HTML

<html>

  <head>
    <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/jointjs/3.5.5/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.1/backbone.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jointjs/3.5.5/joint.js"></script>

  </body>

</html>

JavaScript 1.7

const shapes = {
  ...joint.shapes
};

const graph = new joint.dia.Graph({}, {
  cellNamespace: shapes
});

const paper = new joint.dia.Paper({
  el: document.getElementById('paper'),
  width: 650,
  height: 500,
  gridSize: 10,
  model: graph,
  cellViewNamespace: shapes,
  guard: function(evt) {
    return evt.target instanceof HTMLInputElement;
  }
});

paper.on('blank:pointerdown cell:pointerdown', function() {
  document.activeElement.blur();
});

class ForeignObject extends joint.dia.Element {

  defaults() {
    return {
      ...super.defaults,
      type: 'example.ForeignObject',
      attrs: {
        body: {
          width: 'calc(w)',
          height: 'calc(h)',
          stroke: '#333333',
          fill: '#ffffff',
          strokeWidth: 2
        },
        foreignObject: {
          width: 'calc(w)',
          height: 'calc(h)'
        }
      }
    };
  }

  preinitialize() {
    this.markup = [{
      tagName: 'rect',
      selector: 'body'
    }, {
      tagName: 'foreignObject',
      selector: 'foreignObject',
      attributes: {
        'overflow': 'hidden'
      },
      children: [{
        tagName: 'div',
        namespaceURI: 'http://www.w3.org/1999/xhtml',
        selector: 'content',
        style: {
          fontSize: 14,
          width: '100%',
          height: '100%',
          position: 'static',
          backgroundColor: 'transparent',
          textAlign: 'center',
          margin: 0,
          padding: '0px 10px',
          boxSizing: 'border-box',
          display: 'flex',
          flexDirection: 'column',
          alignItems: 'center',
          justifyContent: 'center'
        },
        children: [{
          tagName: 'span',
          textContent: 'First Name'
        }, {
          tagName: 'input',
          selector: 'firstname',
          attributes: {
            'type': 'input',
            'name': 'firstname'
          },
          style: {
            position: 'static',
            width: '100%'
         ...