Flipped Element Rotation

FreeTransform, Halo, Flip-Y Element

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/3.10.1/lodash.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/backbone.js/1.3.3/backbone-min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.3/jquery.min.js"></script>
<script src="https://jointjs.com/js/rappid.min.js"></script>
<link rel="stylesheet" href="https://jointjs.com/css/rappid.min.css">
<!-- Rappid Fiddle -->
<div id="paper"></div>

CSS

#paper {
  display: inline-block;
  border: 1px solid gray;
}

JavaScript

var graph = new joint.dia.Graph;
var paper = new joint.dia.Paper({
  el: $('#paper'),
  width: 600,
  height: 600,
  gridSize: 10,
  model: graph
});

joint.shapes.basic.Cylinder = joint.shapes.basic.Generic.extend({

  markup: '<g class="rotatable"><g class="scalable"><path/></g><text/></g>',

  defaults: joint.util.deepSupplement({

    type: 'basic.Cylinder',
    size: {
      width: 40,
      height: 40
    },
    attrs: {
      'path': {
        fill: '#FFFFFF',
        stroke: '#cbd2d7',
        'stroke-width': 3,
        d: [
          'M 0 10 C 10 5, 30 5, 40 10 C 30 15, 10 15, 0 10',
          'L 0 20',
          'C 10 25, 30 25, 40 20',
          'L 40 10'
        ].join(' ')
      },
      'text': {
        fill: '#435460',
        'font-size': 14,
        text: '',
        'ref-x': .5,
        'ref-y': .7,
        ref: 'path',
        'y-alignment': 'middle',
        'text-anchor': 'middle',
        fill: 'black',
        'font-family': 'Arial, helvetica, sans-serif'
      }
    }

  }, joint.shapes.basic.Generic.prototype.defaults)
});

var cylinder = new joint.shapes.basic.Cylinder({
  position: {
    x: 50,
    y: 50
  },
  size: {
    width: 180,
    height: 150
  },
  attrs: {
    text: {
      text: 'ELEMENT'
    }
  }
});

var flippedCylinder = cylinder.clone()
  .translate(200, 0)
  .attr('text/ref-y', 1 - cylinder.attr('text/ref-y'))

graph.addCell([
  cylinder,
  flippedCylinder
]);

var fcView = flippedCylinder.findView(paper);
var fcScalable = fcView.vel.findOne('.scalable');
var fcScale = fcScalable.scale();
var fcTranslate = fcView.vel.translate();
var fcScalableBBox = fcScalable.bbox(true);
var fcScalableCenter = g.rect(fcScalableBBox).center();

// Flip Scalable group
// http://stackoverflow.com/questions/23899718/scale-and-mirror-svg-object
fcScalable.translate(0, 2 * fcScalableCenter.y * fcScale.sy);
fcScalable.scale(fcScale.sx, -fcScale.sy);


var freeTransform = new joint.ui.FreeTransform({
	cellView: fcView
});

var halo = new...