JointJS - Paper with vertical pan

prevent contextmenu. https://github.com/clientIO/joint/issues/2658

by Roman Bruckner

HTML

<script src="https://cdn.jsdelivr.net/npm/@joint/[email protected]/dist/joint.min.js"></script>
<div id="container">
   <div id="paper"></div>
</div>

CSS

#container {
  position: absolute;
  top: 10px;
  left: 10px;
  width: 200px;
  height: 200px;
  overflow-x: scroll;
  overflow-y: hidden;
  border: 1px solid red;
  margin: 10px;
}

JavaScript

const { dia, shapes: defaultShapes } = joint

const shapes = {
  ...defaultShapes,
}

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

const paper = new dia.Paper({
  el: document.getElementById("paper"),
  model: graph,
  cellViewNamespace: shapes,
  async: true,
})

const NODE_HEIGHT = 100

const el1 = new shapes.standard.Rectangle({
  size: {
    width: 100,
    height: NODE_HEIGHT,
  },
  position: {
    x: 0,
    y: 0,
  },
  attrs: {
    body: {
      fill: "lightgray",
    },
    label: {
      text: "Element",
    },
  },
})

graph.addCells([
  el1,
  el1.clone().translate(300, 0),
  el1.clone().translate(600, 0),
])

// Fit the paper

const margin = 20
const bbox = graph.getBBox()

paper.setDimensions(bbox.width + margin * 2, "100%")

paper.transformToFitContent({
  verticalAlign: "middle",
  maxScale: 1,
  minScale: 1,
  contentArea: bbox.clone().inflate(margin),
})

// Scroll events

const containerEl = document.getElementById('container');

paper.on("blank:pointerdown", (evt) => {
  evt.data = { scrollX: containerEl.scrollLeft, clientX: evt.clientX }
})

paper.on("blank:pointermove", (evt) => {
  // Scroll little faster than the mouse (3x)
  containerEl.scroll(evt.data.scrollX + (evt.data.clientX - evt.clientX) * 3, 0)
})