How to use jointjs - 10 common examples

this.save_button.onclick = () => {
      console.log("Not implemented yet")
    }

    this.help_button = document.createElement("button");

    this.help_button.innerText = "Help";  
    this.help_button.onclick = () => {
      console.log("Not implemented yet")
    }

    // We need to create the graph and paper in the constructor
    // If you try to create them in renderModel (which is called everytime the user
    // opens an .idaes.vis file or changes tabs) then you get icons that do not drop
    // when the mouseup event is emitted
    var standard = joint.shapes.standard;
    var width = 10000;
    var height = 10000;
    var gridSize = 1;
    this.graph = new joint.dia.Graph([], { cellNamespace: { standard } });
    this.paper = new joint.dia.Paper({
      el: this.holder,
      model: this.graph,
      cellViewNamespace: { standard },
      width: width,
      height: height,
      gridSize: gridSize,
      interactive: true
    });

    // Adds link tools (adding vertices, moving segments) to links when your mouse over
    this.paper.on("link:mouseover", function(cellView, evt) {

makeGraph(data, subcircuits) {
        const graph = new joint.dia.Graph();
        this.listenTo(graph, 'change:buttonState', function(gate, sig) {
            this.enqueue(gate);
            this.trigger('userChange');
        });
        this.listenTo(graph, 'change:signal', function(wire, signal) {
            const gate = graph.getCell(wire.get('target').id);
            if (gate) setInput(signal, wire.get('target'), gate);
        });
        this.listenTo(graph, 'change:inputSignals', function(gate, sigs) {
            // forward the change back from a subcircuit
            if (gate instanceof cells.Output) {
                const subcir = gate.graph.get('subcircuit');
                if (subcir == null) return; // not in a subcircuit
                console.assert(subcir instanceof cells.Subcircuit);
                subcir.set('outputSignals', _.chain(subcir.get('outputSignals'))
                    .clone().set(gate.get('net'), sigs.in).value());

mounted() {
    this.shape = new joint.shapes.standard.Polyline();
    let bounds = this.node.diagram.bounds;
    this.shape.position(bounds.x, bounds.y);
    this.shape.resize(this.nodeWidth, bounds.height);
    this.shape.attr({
      body: {
        refPoints: '25 10 3 10 3 3 25 3',
      },
      label: {
        text: joint.util.breakText(this.node.definition.get('text'), {
          width: bounds.width,
        }),
        fill: 'black',
        yAlignment: 'left',
        xAlignment: 'left',
        refX: '5',
        refY: '5',
      },
    });


    this.shape.on('change:position', (element, position) => {
      this.node.diagram.bounds.x = position.x;
      this.node.diagram.bounds.y = position.y;
      // This is done so any flows pointing to this task are updated
      this.$emit(

mounted() {
    this.shape = new joint.shapes.processmaker.modeler.bpmn.pool();
    const bounds = this.node.diagram.bounds;
    this.shape.position(bounds.x, bounds.y);
    this.shape.resize(bounds.width, bounds.height);

    this.shape.attr('label/refX', labelWidth / 2);
    this.shape.attr('polyline/refX', labelWidth);
    this.shape.attr('label/text', joint.util.breakText(this.node.definition.get('name'), {
      width: bounds.width,
    }));

    this.shape.on('change:position', (element, position) => {
      this.node.diagram.bounds.x = position.x;
      this.node.diagram.bounds.y = position.y;
      // This is done so any flows pointing to this task are updated
      this.$emit(
        'move',
        {
          x: bounds.x,
          y: bounds.y,
        },
        element,
      );
    });

displayEditor(evt) {
        evt.stopPropagation();
        const div = $('<div>', {
            title: "FSM: " + this.model.get('label')
        }).appendTo('html &gt; body');
        const pdiv = $('<div>').appendTo(div);
        const graph = this.model.fsmgraph;
        const paper = new joint.dia.Paper({
            el: pdiv,
            model: graph
        });
        // to visualize the cells
        graph.resetCells(graph.getCells());
        // lazy layout
        if (!graph.get('laid_out')) {
            joint.layout.DirectedGraph.layout(graph, {
                dagre: dagre,
                graphlib: graphlib
            });
            graph.set('laid_out', true);
        }
        // auto-resizing
        this.listenTo(graph, 'change:position', (elem) =&gt; {
            paper.fitToContent({ padding: 30, allowNewOrigin: 'any' });</div></div>

}
}, {
    arithcomp: (i, j) => i.lesser(j)
});

// Nonequality operator
joint.shapes.digital.Compare.define('digital.Ne', {
    attrs: {
        'text.oper': { text: '≠' }
    }
}, {
    arithcomp: (i, j) => i.lesser(j)
});

// Connecting wire model
joint.dia.Link.define('digital.Wire', {
    attrs: {
        '.connection': { 'stroke-width': 2 },
        '.marker-vertex': { r: 7 }
    },
    signal: [0],
    bits: 1,

    router: { name: 'orthogonal' },
    connector: { name: 'rounded', args: { radius: 10 }}
}, {
    arrowheadMarkup: [
        ''
    ].join(''),

};

    this.CLICK_TRESHOLD = 2;

    // Canvas components
    this.canvasComponents = {};
    this.canvasComponents['grid'] = new Grid(this);
    this.canvasComponents['panAndZoom'] = new PanAndZoom(this);
    this.canvasComponents['link'] = new Link(this);
    this.canvasComponents['nodes'] = new Nodes(this);
    this.canvasComponents['highlights'] = new Highlights(this);
    this.canvasComponents['variables'] = new Variables(this);
    this.canvasComponents['selecting'] = new Selecting(this);
    this.canvasComponents['saveImage'] = new SaveImage(this);

    this.graph = new joint.dia.Graph();
    this.currentDetailCell = null;
    this.startingPointerPosition = null;
    this.freezed = false;
    this.ignoreAction = false;
    this.dontReloadGraph = false;
    this.interactivity = true;

    // TODO: [Low] Find better place to place this
    joint.setTheme('modern');
  }

updateShape() {
      const bounds = this.node.diagram.bounds;
      this.shape.position(bounds.x, bounds.y);
      this.shape.resize(bounds.width, bounds.height);
      this.shape.attr({
        label: {
          text: joint.util.breakText(this.node.definition.get('name'), {
            width: bounds.width,
          }),
          fill: 'black',
        },
      });
      // Alert anyone that we have moved
    },
    handleClick() {

configureResize() {
      this.shape.listenTo(this.paper, 'element:pointerup', cellView => {
        if (cellView.model.component && cellView.model.component === this) {
          /* Resize limits must be re-calculated if the the pool or lane is moved */
          this.calculateElementLimits();
        }
      });

      const pointBottomRight = new shapes.standard.EmbeddedImage();
      const pointBottomLeft = new shapes.standard.EmbeddedImage();
      const pointTopRight = new shapes.standard.EmbeddedImage();
      const pointTopLeft = new shapes.standard.EmbeddedImage();

      this.anchorPoints = [
        pointBottomRight,
        pointBottomLeft,
        pointTopRight,
        pointTopLeft,
      ];

      const { x, y, width, height } = this.shape.getBBox();

      this.anchorPoints.forEach(point => {
        point.set('isDrag', true);
        point.set('previousPosition', point.position());

configureResize() {
      this.shape.listenTo(this.paper, 'element:pointerup', cellView => {
        if (cellView.model.component && cellView.model.component === this) {
          /* Resize limits must be re-calculated if the the pool or lane is moved */
          this.calculateElementLimits();
        }
      });

      const pointBottomRight = new shapes.standard.EmbeddedImage();
      const pointBottomLeft = new shapes.standard.EmbeddedImage();
      const pointTopRight = new shapes.standard.EmbeddedImage();
      const pointTopLeft = new shapes.standard.EmbeddedImage();

      this.anchorPoints = [
        pointBottomRight,
        pointBottomLeft,
        pointTopRight,
        pointTopLeft,
      ];

      const { x, y, width, height } = this.shape.getBBox();

      this.anchorPoints.forEach(point => {
        point.set('isDrag', true);
        point.set('previousPosition', point.position());
      });