JointJS - Shapes theming

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="paper"></div>

CSS

:root {
  --element-color: lightgreen;
}

.joint-theme-dark {
  --element-color: yellow;
}

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'),
  width: 800,
  height: 900,
  model: graph,
  cellViewNamespace: shapes,
  async: true,
});

const el1 = new shapes.standard.Rectangle({
  size: {
    width: 100,
    height: 100
  },
  position: {
    x: 10,
    y: 10
  },
  attrs: {
    body: {
      fill: 'var(--element-color)'
    },
    label: {
      text: 'Element'
    }
  }
});

graph.addCells([el1]);

// comment to go back to `light` mode.
joint.setTheme('dark');