CODEWITHSUNDEEP
javascriptfabricjsfabricjs2
Chuck
Chuck

Reputation: 23

Issue with updating FabricJS iText programmatically

I've been stuck on this issue for a few hours now and I can't see any obvious reason as to why I am not able to do this.

I am using FabricJS to create an editable canvas. I am currently adding in text functionality, so when the user clicks on the tool icon and then clicks on the canvas, it'll place an iText object with placeholder text: 'Type here...'.

I've added an attribute onto the Fabric object called placeholderPresent. I've then added a listener on the canvas like so:

this.canvas.on('text:changed', (data) => {

            let textObject = data.target;

            textObject.set('dirty', true);

            // If the user has just created this text and is now writing in it, remove the placeholder
            if(textObject.placeholderPresent) {
                textObject.set('text', textObject.text.replace('Type here...', ""));
                textObject.set('dirty', true);
                textObject.set('placeholderPresent', false);
            }

            this.canvas.renderAll();
        });

The idea of this is that when the user types in the textbox for the first time after placing it, it'll remove the placeholder text straight away.

The issue that I am having is that this does work when the user types in their first character, however when they type their second character, it adds 'Type here...' back onto the end of text currently in the iText object.

My guess was that is was due to caching of some kind, but I've tried to set 'dirty' to true in multiple places to force FabricJS to re-render, but this still does not work.

Any ideas as to what could be causing this? Thanks in advance.

Upvotes: 0

Views: 750

Answers (1)

spring
spring

Reputation: 18517

From your description, it's not clear to me what you are trying to do or why you are using the "change" event here, so I may be misunderstanding what you are asking.

You can set the default text when you create an instance of iText. You can also select the default text so that when the user starts typing, that default text is replaced. You can use other events (e.g. "editing:exited") to handle checking the text the user has entered and restoring the default text if the iText instance is empty, etc.

Below is a method from my "tool" class wrapper for iText – perhaps it will help.

onMouseDown(evt) {
    this.owner.toolActionBegin()
    this.isMouseDown = true
    this.startPt = this.canvas.getPointer(evt.e);

    this.object = new fabric.IText("New text",
      {
        left: this.startPt.x,
        top: this.startPt.y,
        fill: this.owner.textColor,
        selectable: true,
        fontFamily: 'arial',
        fontSize: this.owner.fontSize,
        editable: true,
        selectionBackgroundColor: "rgb(255,255,255)",
        perPixelTargetFind: false,
        hasBorders: true,
        hasControls: true,
      });

    
      this.object.setControlsVisibility({
        tl: true,
        tr: true,
        br: true,
        bl: true,
        ml: false,
        mt: false,
        mr: false,
        mb: false,
        mtr: true
      })

    this.canvas.add(this.object)
    this.canvas.on("mouse:up", this.onMouseUp);
    this.canvas.on("editing:exited", this.onExitEditing);
  }

Upvotes: 2

Related Questions