Fabric.js - Grouped iText not editable

Question

The title says all. When a fabric.ITextis part of a fabric.Group, it no longer reacts like a editable text.

Here is a use-case: http://jsfi

Answer 1

If you would like a real visual padding(like the css) for itext, you could add an unselectable Rect just behind the itext. And adjust the Rect position based on all event for itext, e.g, moving, scaling etc.

self.createITextWithPadding = function (event) {

               var itext = new fabric.IText('Done', {
                   fontSize: 18,
                   padding : tnbConstants.ITEXT.PADDING,
                   fill: '#FFF',

               });

               itext.left = (event.pageX - $("#tnb-panel").position().left)-itext.width/2;
               itext.top = (event.pageY-$("#tnb-panel").position().top)-itext.height/2;

               var bg = new fabric.Rect({
                    fill: '#32b775',
                   left : itext.left - tnbConstants.ITEXT.PADDING,
                   top :itext.top - tnbConstants.ITEXT.PADDING,
                   rx: 5,
                   ry: 5,
                   width: itext.width + tnbConstants.ITEXT.PADDING*2,
                   height:itext.height + tnbConstants.ITEXT.PADDING*2,
                   selectable : false
               });

               itext.bgRect = bg;
               itext.on("moving",self.adjustBackRect);
               itext.on("scaling",self.adjustBackRect);

               return itext;
           }

self.adjustBackRect = function (e) {//e is event
               var text = e.target;
               var bgRect = text.bgRect;

               bgRect.set({
                   left : text.left - text.padding,
                   top : text.top - text.padding,
                   width : text.width * text.scaleX + text.padding * 2,
                   height : text.height * text.scaleY + text.padding * 2 ,
               });


               console.log("text width :" + (text.width * text.scaleX + text.padding*2));
               console.log("text height :" + (text.height * text.scaleY + text.padding*2));
               console.log("bg width :" + (bgRect.width ));
               console.log("bg height :" + (bgRect.height ));
           };