Scalable group

by Roman Bruckner

HTML

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

JavaScript

const { util, dia, shapes: defaultShapes, linkTools } = joint;

const MyElement = dia.Element.define('MyElement', {
   

}, {
 markup: util.svg`
     <g @selector="scalable">
          <rect x="0" y="0" width="10" height="10" fill="red"/>
          <rect x="10" y="0" width="10" height="10" fill="blue"/>
     </g>
 `
});

const shapes = {
    ...defaultShapes,
    MyElement,
};

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 MyElement({
  size: { width:100, height: 100 }
});

const el2 = new MyElement({
  size: { width: 200, height: 100 },
  position: { x: 0, y: 200 }
});



graph.addCells([el1, el2]);