Issue Jointjs Firefox

by Roman Bruckner

HTML

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.21/lodash.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/backbone.js/1.4.0/backbone-min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jointjs/3.4.4/joint.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jointjs/3.4.4/joint.min.css">
<div id="paper-container">
  <div id="paper"></div>
</div>
<button id='fullscreen' class='btn-fullscreen'>
  Full screen
</button>
<button id='close-fullscreen' class='btn-close-fullscreen'>
Close full screen
</button>

CSS

.fullscreen {
  /*position: 'absolute';
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;*/
  width: 100%;
  height: 100vh;
}

.btn-fullscreen {
  position: absolute;
  top: 0;
  right: 0;
}

.btn-close-fullscreen {
  position: absolute;
  top: 30px;
  right: 0;
}

JavaScript

var namespace = joint.shapes;

var graph = new joint.dia.Graph({}, { cellNamespace: namespace });

var paper = new joint.dia.Paper({
  el: document.getElementById('paper'),
  model: graph,
  width: 600,
  height: 100,
  gridSize: 10,
  drawGrid: true,
  background: {
    color: 'rgba(0, 255, 0, 0.3)'
  },
  cellViewNamespace: namespace
});

var rect = new joint.shapes.standard.Rectangle();
rect.position(100, 30);
rect.resize(100, 40);
rect.attr({
  body: {
    fill: 'blue'
  },
  label: {
    text: 'Hello',
    fill: 'white'
  }
});
rect.addTo(graph);

var rect2 = rect.clone();
rect2.translate(300, 0);
rect2.attr('label/text', 'World!');
rect2.addTo(graph);

var link = new joint.shapes.standard.Link();
link.source(rect);
link.target(rect2);
link.addTo(graph);

$('#fullscreen').on('click', function () {
	$('#paper-container').addClass('fullscreen');
  $('#paper').height('500px');
  const contentArea = paper.getContentArea();
  console.log(`contentArea ${contentArea.height}`);
  console.log(`getContentBBox ${paper.getContentBBox().height}`);
  console.log(`getComputedSize ${paper.getComputedSize().height}`);
  console.log(`getArea ${paper.getArea().height}`);
});

$('#close-fullscreen').on('click', function () {
	$('#paper-container').removeClass('fullscreen');
/*   const contentArea = paper.getContentArea();
  console.log(`h2 ${contentArea.height}`);
  const h = contentArea.height + 10;
  console.log(`hhh ${h}`);
  $('#paper').height(`${h}px`); */
  

  paper.fitToContent({
   useModelGeometry: true,
   gridWidth: paper.options.width,
   padding: { bottom: 10 }
  });
});