How to Change CSS of Custom Template JointJS Element?

Tags: javascript,html,css,templates,jointjs

Problem :

I've been using JointJS for a while now and I'm trying to create an HTML template for my elements. So I've been using the tutorial but it didn't quit do it for me. The thing I'm trying to accomplish is to adjust the color of the HTML element when an action has been performed, like double clicking the element. I did notice the way that the text is changed in the tutorial, but there is no example of changing any colors.


I've tried this to get a starting color on the element:

joint.shapes.html = {};
joint.shapes.html.OdinElement = joint.shapes.basic.Rect.extend({
  defaults: joint.util.deepSupplement({
    type: 'html.Element',
    attrs: {
      rect: { stroke: 'none', 'fill-opacity': 0 }
  }, joint.shapes.basic.Rect.prototype.defaults)

// Create a custom view for that element that displays an HTML div above it.
// -------------------------------------------------------------------------

joint.shapes.html.OdinElementView = joint.dia.ElementView.extend({

  template: [
    '<div class="html-element">',
    '<button class="delete">x</button>',
    '<span></span>', '<br/>',

  initialize: function() {
    _.bindAll(this, 'updateBox');
    joint.dia.ElementView.prototype.initialize.apply(this, arguments);

    this.$box = $(_.template(this.template)());

    this.$box.find('.delete').on('click', _.bind(this.model.remove, this.model));
    // Update the box position whenever the underlying model changes.
    this.model.on('change', this.updateBox, this);
    // Remove the box when the model gets removed from the graph.
    this.model.on('remove', this.removeBox, this);

  render: function() {
    joint.dia.ElementView.prototype.render.apply(this, arguments);
    return this;
  updateBox: function() {
    // Set the position and dimension of the box so that it covers the JointJS element.
    var bbox = this.model.getBBox();
    // Example of updating the HTML with a data stored in the cell model.

    this.$box.css({ width: bbox.width, height: bbox.height, left: bbox.x, top: bbox.y, transform: 'rotate(' + (this.model.get('angle') || 0) + 'deg)', background: this.model.get('color')}); // I've tried to add it like a background
  removeBox: function(evt) {

//add a new element like this
new joint.shapes.html.OdinElement({
    position: { x: 80, y: 80 },
    size: { width: 200, height: 50 },
    label: 'label',
    color: '#ff0000'

I've also tried to set it like the text is set in the label, but I've no idea if there is a function for that.

Does anyone have any idea how to do this?

Thanks a lot!


Solution :

I found the answer myself!

Apparently it is not allowed to create a different element in the html variable than the given Element. So I had to change the joint.shapes.html.OdinElement to joint.shapes.html.Element and the joint.shapes.html.OdinElementView to joint.shapes.html.ElementView

Now it works all fine :)

Thanks for your help!

    CSS Howto..

    How to remove empty space in thumbnail grid

    How to default toggle to open using css/jquery?

    toggle show/hide for hidden menu buttons (responsive)

    How to move the search text box to the extreme right and Categories drop down to the left in html

    CSS border shape - how to cut off rectangle right upper corner [duplicate]

    How Do I Make Validation and Error Messages Come Up Using Javascript?

    How do I keep my background image at the bottom of the page?

    How do I customize