Search code examples
javascriptcssfabricjsjscolor

How to make selection highlight transparent in fabricjs IText?


I'm using jscolor-colorpicker with fabricjs-IText in a way that gives me a live preview of the color on mouse-move. The only thing not cool now is that the semitransparent selection highlighting is messing up the colorpreview in text-edit mode. Any ideas on how to remove the selection highlighting or make the selection totally transparent?

I can't find any properties in the jsdoc relating to the selection color!? http://fabricjs.com/docs/fabric.IText.html

<input value="ffcc00"  id="fill" class="jscolor {onFineChange:'itext_setcolor(this)',hash:true}">

window.itext_setcolor = function(val) {
        obj = canvas.getActiveObject();
        if (obj) {
            if (obj.isEditing) {
                 setStyle(obj, 'fill', '#' +val); 
            } else 
            {  
                obj.setFill('#' + val);
            }
          canvas.renderAll();
        }  
 };

EDIT 1

Thank's @STHayden for giving me the right answer. Here's the final working code with reappearance of the highlighting when text selection changes.

...
  canvas.on('text:selection:changed', onTextChangedIText);
...
  function onTextChangedIText() {
       var obj = canvas.getActiveObject();
        if (obj.selectionStart>-1) {
            obj.set({'selectionColor':'rgba(17,119,255,0.3)'}); 
        }
    } 

 window.itext_setcolor = function(val) {
         obj = canvas.getActiveObject();
        if (obj) {
            if (obj.isEditing) {
                 obj.set({'selectionColor':'transparent'});
                 setStyle(obj, 'fill', '#' +val); 
            } else
            {  
                obj.setFill('#' + val);
            }
            canvas.renderAll();
        }  
    };

Solution

  • You have a lot of options. The property on IText for the selection color is selectionColor and you can set it to be fully transparent with the keyword transparent or an rgba value: rgba(0,0,0,0).

    If you get the reference to the IText object you can also do a few things:

    1. Change the startSelection and endSelection to 0.
    2. Call the .exitEditing() function on the IText object.
    3. Just remove the IText object as the active object with .discardActiveObject()

    when you are done letting the user pick a color you can set the selection back to what it was.