Foreign Object

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

var graph = new joint.dia.Graph;

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

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

/* var Example = joint.dia.Element.define('example.ForeignObject', {
  attrs: {
    body: {
      refWidth: '100%',
      refHeight: '100%',
      stroke: '#333333',
      fill: '#ffffff',
      strokeWidth: 2
    },
    foreignObject: {
      refWidth: '100%',
      refHeight: '100%'
    }
  }
}, {
  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%'
        }
      }, {
        tagName: 'span',
        textContent: 'Last Name'
      }, {
        tagName: 'input',
        selector: 'lastname',
        attributes: {
          'type': 'input',
          'name': 'lastname'
        },
        style: {
          position: 'static',
          width: '100%'
        }
      }]
    }]
  }]
}, {
 ...