I am trying to use the rotate functionality which is proved by the Halo,
I have added an element into the stencil like this..
var customMarkup = ' <path id="path123" stroke="#000000" stroke-miterlimit="10" d="M7.2,28V15.7L20.3,4.1l9-0.6v8.8c0,0-9,5-9,8.6 c0,1.7,0,7.2,0,7.2H7.2z"/> <polyline id="polyline125" stroke="#000000" stroke-miterlimit="10" points="20.1,4.3 20.1,2.4 32.2,2.4 30.4,11.8 29.3,11.8 "/> <g id="g127"> <path id="path129" stroke="#000000" stroke-miterlimit="10" d="M32.2,2.4h1.9c0.2,0,0.4,0.2,0.4,0.4l0.1,4.9 c0,0.2,0.2,0.4,0.4,0.4h1c0.2,0,0.4-0.2,0.4-0.4l0.1-4.9c0-0.2,0.2-0.4,0.4-0.4h0.4c0.2,0,0.4,0.2,0.4,0.4l0.1,4.9 c0,0.2,0.2,0.4,0.4,0.4h1c0.2,0,0.4-0.2,0.4-0.4l0.1-4.9c0-0.2,0.2-0.4,0.4-0.4h0.4c0.2,0,0.4,0.2,0.4,0.4l0.1,4.9 c0,0.2,0.2,0.4,0.4,0.4h1c0.2,0,0.4-0.2,0.4-0.4L43,2.8c0-0.2,0.2-0.4,0.4-0.4h0.4c0.2,0,0.4,0.2,0.4,0.4l0.1,4.9 c0,0.2,0.2,0.4,0.4,0.4h1c0.2,0,0.4-0.2,0.4-0.4l0.1-4.9c0-0.2,0.2-0.4,0.4-0.4h0.4c0.2,0,0.4,0.2,0.4,0.4l0.1,4.9 c0,0.2,0.2,0.4,0.4,0.4h1c0.2,0,0.4-0.2,0.4-0.4l0.1-4.9c0-0.2,0.2-0.4,0.4-0.4h0.4c0.2,0,0.4,0.2,0.4,0.4l0.1,4.9 c0,0.2,0.2,0.4,0.4,0.4h1c0.2,0,0.4-0.2,0.4-0.4l0.1-4.9c0-0.2,0.2-0.4,0.4-0.4h0.4c0.2,0,0.4,0.2,0.4,0.4l0.1,4.9 c0,0.2,0.2,0.4,0.4,0.4h1c0.2,0,0.4-0.2,0.4-0.4L56,2.8c0-0.2,0.2-0.4,0.4-0.4h0.4c0.2,0,0.4,0.2,0.4,0.4l0.1,4.9 c0,0.2,0.2,0.4,0.4,0.4h1c0.2,0,0.4-0.2,0.4-0.4l0.1-4.9c0-0.2,0.2-0.4,0.4-0.4h3c2.1,0,2.7,1.2,2.7,2.2v4.9c0,0.7-0.6,1.2-1.2,1.2 H30.6"/> </g> <polyline id="polyline131" stroke="#000000" stroke-miterlimit="10" points="68.8,4 74.2,4 74.2,9.2 68.8,9.2 "/> <g id="g133"> <line id="line135" stroke="#000000" stroke-miterlimit="10" x1="68.6" y1="5.6" x2="66.3" y2="5.6"/> <line id="line137" stroke="#000000" stroke-miterlimit="10" x1="66.5" y1="7.6" x2="68.8" y2="7.6"/> <path id="path139" stroke="#000000" stroke-miterlimit="10" d="M68.6,5.6c0,0,0.1,0.8,0.1,1c0,0.3-0.1,1-0.1,1 s0.1,0.8,0.1,1s-0.1,1-0.1,1h-2.8c0,0-0.1-0.8-0.1-1s0.1-1,0.1-1s-0.1-0.8-0.1-1s0.1-1,0.1-1v0c0,0-0.1-0.8-0.1-1 c0-0.3,0.1-1,0.1-1h2.8c0,0,0.1,0.8,0.1,1C68.8,4.8,68.6,5.6,68.6,5.6L68.6,5.6z"/> </g> <line id="line141" stroke="#000000" stroke-miterlimit="10" x1="16.4" y1="7.5" x2="11.6" y2="7.5"/> <line id="line143" stroke="#000000" stroke-miterlimit="10" x1="11.6" y1="10.1" x2="13.5" y2="10.1"/> <path id="path145" stroke="#000000" stroke-miterlimit="10" d="M11.6,11.9c0,0-0.2-0.1-0.2-0.4c0-0.3,0.2-1.3,0.2-1.3 s-0.2-1-0.2-1.3c0-0.3,0.2-1.3,0.2-1.3v0c0,0-0.2-1-0.2-1.3c0-0.3,0.2-1.3,0.2-1.3h4.9c0,0,0.2,1,0.2,1.3c0,0.3-0.2,1.3-0.2,1.3v0" /> <g id="g147"> <line id="line149" stroke="#000000" stroke-miterlimit="10" x1="10.2" y1="7.5" x2="9" y2="7.5"/> <line id="line151" stroke="#000000" stroke-miterlimit="10" x1="9" y1="10.1" x2="10.3" y2="10.1"/> <path id="path153" stroke="#000000" stroke-miterlimit="10" d="M10.2,7.2c0,0,0.1,1.1,0.1,1.5c0,0.4-0.1,1.5-0.1,1.5 s0.1,1.1,0.1,1.5c0,0.4-0.1,1.1-0.1,1.1H9c0,0-0.1-0.7-0.1-1.1c0-0.4,0.1-1.5,0.1-1.5S8.9,9.1,8.9,8.7C8.9,8.3,9,7.2,9,7.2v0 c0,0-0.1-1.1-0.1-1.5C8.9,5.3,9,4.9,9,4.9h1.2c0,0,0.1,0.5,0.1,0.8C10.3,6.1,10.2,7.2,10.2,7.2L10.2,7.2z"/> </g> <path id="path155" stroke="#000000" stroke-miterlimit="10" d="M38.6,19.8v0.5c-0.4,0.2-0.5,0.7-0.5,0.7l0,1.4 c0,0.7,2.1,0.5,4.2,0.5c2.2,0,4.3,0.1,4.3-0.6l0-1.3c0,0,0.1-0.5-0.4-0.8v-0.5"/> <path id="path157" stroke="#000000" stroke-miterlimit="10" d="M39.2,12.9v0.4c-0.3,0.1-0.2,0.4-0.2,0.4l0,0.6 c0,0.6,6.8,0.5,6.8,0v-0.5c0,0,0.1-0.4-0.2-0.6v-0.4"/> <path id="path159" stroke="#000000" stroke-miterlimit="10" d="M38.9,13.8c-0.4,0.2-0.7,0.3-0.8,0.8c0,0.2,0,0.8,0,0.8 c0,0.7,8.5,0.7,8.5-0.1c0,0,0-0.5,0-0.7c0-0.4-0.4-0.6-0.9-0.8"/> <path id="path161" stroke="#000000" stroke-miterlimit="10" d="M38.6,15.6v2.6c-0.4,0.2-0.5,0.7-0.5,0.7l0,0.7 c0,0.7,8.5,0.7,8.5-0.1l0-0.7c0,0,0.1-0.5-0.4-0.8v-2.6"/> <path id="path163" stroke="#000000" stroke-miterlimit="10" d="M38.1,20.9c0,0.7,8.5,0.7,8.5-0.1"/> <path id="path165" stroke="#000000" stroke-miterlimit="10" d="M38.1,18.7c0,0.7,8.5,0.7,8.5-0.1"/> <path id="path167" stroke="#000000" stroke-miterlimit="10" d="M39,13c0.7,0,1.6,0.1,3.4,0.1c1.7,0,3.2-0.2,3.4-0.2"/> <path id="path169" stroke="#000000" stroke-miterlimit="10" d="M38.1,15.2c0,0.7,8.5,0.7,8.5-0.1"/> <polygon id="polygon171" stroke="#000000" stroke-miterlimit="10" points="46.6,24.6 38.1,24.4 38.1,22.5 40,22.9 44.8,22.9 46.6,22.4 "/> <polygon id="polygon173" stroke="#000000" stroke-miterlimit="10" points="50.8,26.2 33.8,26.1 33.8,24.7 50.8,24.5 "/> <polygon id="polygon175" stroke="#000000" stroke-miterlimit="10" points="48.3,28.1 36.3,28 36.3,26.6 48.3,26.4 "/> <polyline id="polyline177" stroke="#000000" stroke-miterlimit="10" points="17.3,6.9 17.3,3.5 20.1,3.5 "/> <path id="path179" stroke="#000000" stroke-miterlimit="10" d="M16.5,4.9c0.1-0.6,0.2-1,0.3-1c0.2,0,0.4,1.1,0.5,2.8"/> <path id="path181" stroke="#000000" stroke-miterlimit="10" d="M11.4,12c0,0-0.2,0.4-0.6,0.4c-0.6,0-0.6-0.4-0.6-0.4 V5.6c0,0,0.1-0.3,0.6-0.3c0.6,0,0.6,0.3,0.6,0.3V12z"/> <path id="path183" stroke="#000000" stroke-miterlimit="10" d="M5,10.8c0,0,0,0.2-0.4,0.2s-0.4-0.2-0.4-0.2v-4 c0,0,0.1-0.2,0.4-0.2C5,6.6,5,6.8,5,6.8V10.8z"/> <rect id="rect185" x="5" y="7" stroke="#000000" stroke-miterlimit="10" width="1.3" height="3.5"/> <polygon id="polygon187" stroke="#000000" stroke-miterlimit="10" points="8.9,11.7 6.3,11.7 6.3,8.8 6.3,6 8.9,6 "/> <rect id="rect189" x="6.7" y="33" stroke="#000000" stroke-miterlimit="10" width="59.8" height="64"/> <polygon id="polygon191" stroke="#000000" stroke-miterlimit="10" points="58.5,28.1 55.1,28.1 55.7,10.8 57.8,10.8 "/> <polygon id="polygon193" stroke="#000000" stroke-miterlimit="10" points="64.3,28.1 60.8,28.1 61.5,10.8 63.6,10.8 "/> <g id="g195"> <path id="path197" stroke="#000000" stroke-miterlimit="10" d="M72.9,31.5c0,0.8-0.7,1.5-1.5,1.5H1.8 c-0.8,0-1.5-0.7-1.5-1.5v-2C0.3,28.7,1,28,1.8,28h69.6c0.8,0,1.5,0.7,1.5,1.5V31.5z"/> </g> <g id="g199"> <path id="path201" stroke="#000000" stroke-miterlimit="10" d="M72.9,100.5c0,0.8-0.7,1.5-1.5,1.5H1.8 c-0.8,0-1.5-0.7-1.5-1.5v-2C0.3,97.7,1,97,1.8,97h69.6c0.8,0,1.5,0.7,1.5,1.5V100.5z"/> </g> <g id="g203"> <path id="path205" stroke="#000000" stroke-miterlimit="10" d="M68.6,72.7c0,0.8-0.7,1.5-1.5,1.5h-61 c-0.8,0-1.5-0.7-1.5-1.5v-2c0-0.8,0.7-1.5,1.5-1.5h61c0.8,0,1.5,0.7,1.5,1.5V72.7z"/> </g> <path id="path207" stroke="#000000" stroke-miterlimit="10" d="M4.3,10.4c0,0,0,0.2-0.7,0.2s-0.7-0.2-0.7-0.2V7.2 c0,0,0.2-0.1,0.7-0.1c0.7,0,0.7,0.1,0.7,0.1V10.4z"/>';
var customElement = joint.shapes.basic.Image({
markup: '<g class="scalable"><g class="rotatable"><g class="myClass">' + customMarkup+ '</g></g></g><text/>',
type: 'basic.Image1',
attrs: {
'text': { text: 'asdf' },
height: 500,
width: 100,
'.myClass': {
fill: '#ffffff'
}
}
})
The element looks fine on the Stencil and it looks good when i drag it and drop it onto the paper,
Now I would like to rotate it, and i am having a really hard time in trying to make it happen.
In case i resize the element and then try to rotate it.. and then resize it again all the transformations are completely messing up like in the image below..
I read an article and learn that the svg rotations are not similar to what is done in css so tried the following on click of a button but that did not help either.
My goal is to keep the custom SVG element within the halo when it rotates and not allow it to skew up
I also tried to do the rotation on the click of a button instead of using the Halo like as follows.. but does not help
jQuery('#btn-rotate').on('mousedown', _.bind(function (evt) {
var x = this.selection.models[0].attributes.position.x;
var y = this.selection.models[0].attributes.position.y
var height = this.selection.models[0].attributes.size.height;
var width = this.selection.models[0].attributes.size.width;
this.selection.models[0].rotate(93, [false, { x: x+width/2, y: y+height/2}]);
}, this));
Would really appreciate your help. Thanks Vishu
It's not supported to nest the rotatable group into the scalable group in JointJS. The groups can be omitted (together or individually) or the scalable group can be a child of the rotatable group. Only the following schemes can be used.
<g class="rotatable"/><g class="scalable"></g></g>
<g class="rotatable"></g>
<g class="scalable"></g>
In your case the rotatable and the scalable group needs to be swapped.
<g class="rotatable"><g class="scalable"><g class="myClass"><!-- custom markup --></g></g></g><text/>
For more please see demo.