fromJSON method with custom shapes isnt rendering correctly

[Andy Diaz]

Hi, i have some custom shapes defined in my aplication, for example:

Model instance:

generador: new modelGenerador({
  key: 'generador',
  datosModelo: {
    potenciaActiva: {
      nombre: 'Potencia activa',
      valor: '',
      formType: 'text',
    },
    potenciaReactiva: {
      nombre: 'Potencia reactiva',
      valor: '',
      formType: 'text',
    },
    voltaje: {
      nombre: 'Voltaje',
      valor: '',
      formType: 'text',
    },
  },
}, modelGenerador.prototype.defaults.init()),

Modelo:

var modelGenerador = joint.shapes.libreria.modelGenerador = joint.shapes.basic.Generic.extend(_.extend({}, joint.shapes.basic.PortsModelInterface, {
  markup: [
  '<g class="rotatable">',
  '<g class="scalable">',
  '<rect id="svg_1"/>',
  '<ellipse id="svg_2"/>',
  '<line id="svg_3"/>',
  '<path id="svg_5"/>',
  '<path id="svg_6"/>',
  '</g>',
  '<text class="label"/>',
  '<g class="inPorts"/>',
  '<g class="outPorts"/>',
  '</g>',
  '<g class="link-tools"/>',
  ].join(''),
  portMarkup: '<g class="puerto port<%= id %>"><circle/><text/></g>',
  defaults: joint.util.deepSupplement({
    nombre: 'Generador',
    type: 'devs.Model',
    position: {
      x: 0,
      y: 0,
    },
    size: {
      width: 60,
      height: 55,
    },
    outPorts: [''],
    attrs: {
      '.': {
        magnet: false
      },
      '#svg_1': {
        'width': 60,
        'height': 55,
        'y': 0,
        'x': 0,
        'stroke-width': 0,
        'fill': 'transparent',
      },
      ......
      '.puerto circle': {
        r: 5,
        magnet: true,
      },
      text: {
        fill: '#666',
        'pointer-events': 'none'
      },
      '.outPorts circle': {
        fill: '#E74C3C',
        type: 'output',
        stroke: 0,
      },
    }
  }, joint.shapes.basic.Generic.prototype.defaults),
  /*
  */
  getPortAttrs: function(portName, index, total, selector, type) {
    var attrs = {};
    var portClass = 'port' + index;
    var portSelector = selector + '>.' + portClass;
    var portTextSelector = portSelector + '>text';
    var portCircleSelector = portSelector + '>circle';
    attrs[portTextSelector] = { text: portName };
    attrs[portCircleSelector] = { port: { id: portName || _.uniqueId(type) , type: type } };
    attrs[portSelector] = { ref: 'path', 'ref-y': (index + 0.5) * (1 / total) };
    if (selector === '.outPorts') { attrs[portSelector]['ref-dx'] = 0; }
    return attrs;
  }
}));

Im testing toJSON method saving the diagram in a json variable, but when use fromJSON with json generated the diagram is printed with a generic svg format (dont render my custom markup).

How can i export and import my diagram and preserving my custom shapes markups?

[David Durman]

The type of your custom shape is type: 'devs.Model', it should be 'libreria.modelGenerador'. 

---

David Durman

client IO

http://client.io

+31630368524

--

---
You received this message because you are subscribed to the Google Groups "JointJS" group.
To unsubscribe from this group and stop receiving emails from it, send an email to jointjs+u...@googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

[Andy Diaz]

Hi, when i change the type joint crush :(

Regex

• All

• Errors
• Warnings
• Info
• Logs
• Debug

1. Uncaught Error: properties.markup is missing while the default render() implementation is used.

[David Durman]

Did you specify the view for your custom shape?

joint.shapes.libreria.modelGeneradorView = joint.shapes.devs.ModelView;

Most of the times custom views are not needed but for this particular shape it is.

---

David Durman

client IO

http://client.io

+31630368524

[Andy Diaz]

Uhmm im using the default modelView i think.. do I have to do a view for each element?

[Andy Diaz]

I have a custom link model with a custom view but neither render correctly:

Model:

var modelLinea = joint.shapes.libreria.modelLinea = joint.dia.Link.extend({
  defaults: joint.util.deepSupplement({
    type: 'libreria.modelLink',
    manhattan: true,
    attrs: {
      '.connection': {
        'stroke-width': 1.3,
      },
      '.marker-arrowhead': {
        d: 'M 10 0 L 0 5 L 10 10 z',
      },
      '.marker-vertex': {
        r: 8,
      },
    },
  }, joint.dia.Link.prototype.defaults),
});

View:

joint.shapes.libreria.modelLinkView = joint.dia.LinkView.extend({
  // model: joint.shapes.libreria.modelLinea,
  pointerdown: function(evt, x, y) {
    joint.dia.CellView.prototype.pointerdown.apply(this, arguments);


    this._dx = x;
    this._dy = y;


    if (this.options.interactive === false) return;


    var className = evt.target.getAttribute('class');


    switch (className) {
      case 'marker-vertex':
      this._action = 'vertex-move';
      this._vertexIdx = evt.target.getAttribute('idx');
      break;


      case 'marker-vertex-remove':
      case 'marker-vertex-remove-area':
      this.removeVertex(evt.target.getAttribute('idx'));
      break;


      case 'marker-arrowhead':
      this.startArrowheadMove(evt.target.getAttribute('end'));
      break;


      default:


      var targetParentEvent = evt.target.parentNode.getAttribute('event');


      if (targetParentEvent) {
        if (targetParentEvent === 'remove') {
          this.model.remove();
        } else {
          this.paper.trigger(targetParentEvent, evt, this, x, y);
        }
      }
    }
  },
  pointerdblclick: function (evt, x, y) {
    this._vertexIdx = this.addVertex({ x: x, y: y });
    this._action = 'vertex-move';
  },
});

Befor import:

After import:

El viernes, 25 de julio de 2014 11:16:58 UTC-5, dave escribió:

[Andy Diaz]

Well I found a solution, simply iterate through each element and each link, keep them in an array and then iterate through each element / link and I add to chart :D

// Save the cells in arrays
var elementos = graph.getElements();
var links = graph.getLinks();

var expElementos = [];
var expLinks = [];

for (var i = 0; i < elementos.length; i++) {
  expElementos.push(elementos[i]);
};

for (var i = 0; i < links.length; i++) {
  expLinks.push(links[i]);
};

// Clear the graph (Genius .__.)
graph.clear();

// Wait 1s and add the cells
setTimeout(function () {
  for (var i = 0; i < expElementos.length; i++) {
    graph.addCell(expElementos[i]);
  };

  for (var i = 0; i < expLinks.length; i++) {
    graph.addCell(expLinks[i]);
  };
}, 1000);