Manhattan translate

Tips for performance improvements for usual JointJS applications.

by Roman Bruckner

HTML

<html>

  <body>
    <!-- content -->

    <button id="translate">translate</button>
    <div id="paper"></div>


    <!-- dependencies -->
    <script src="https://cdn.jsdelivr.net/npm/@joint/[email protected]/dist/joint.min.js"></script>

  </body>

</html>

JavaScript

const graph = new joint.dia.Graph({}, { cellNamespace: joint.shapes });
const paper = new joint.dia.Paper({
    el: document.getElementById('paper'),
    width: 800,
    height: 600,
    model: graph,
    cellViewNamespace: joint.shapes,
    gridSize: 10,
    defaultRouter: {
        name: 'manhattan',
        args: {
            step: 10,
            fallbackRouter: joint.routers.rightAngle,
            margin: 0.1,
        }
    }
});

const el1 = new joint.shapes.standard.Rectangle();
el1.position(100, 30);
el1.resize(100, 40);
el1.addTo(graph);

const el2 = new joint.shapes.standard.Rectangle();
el2.position(400, 100);
el2.resize(100, 40);
el2.addTo(graph);

const link1 = new joint.shapes.standard.Link();
link1.source(el1);
link1.target(el2);
link1.addTo(graph);

function translate() {
    const dx = 10;
    const dy = 10;
    graph.getCells().forEach(cell => {
        if (cell.isElement()) {
            cell.translate(dx, dy, { ignoreCommandManager: true, isolate: true });
        } else {
            cell.findView(paper).translate(dx, dy);
        }
    });
}

translate();

document.getElementById('translate').addEventListener('click', translate);