CODEWITHSUNDEEP
fabricjs
Cartuzzi
Cartuzzi

Reputation: 56

fabricjs - Allow single click text-editing, but distinguish between text click and border click

I currently have my IText elements set up to enter editing mode on single click, but I still want the user to be able to move the text around. I've added padding to the text elements in the hopes that I can distinguish between a click on the border (user wants to move the text) vs. a click directly on the text (editing). Any help would be greatly appreciated..

Upvotes: 1

Views: 825

Answers (1)

Cartuzzi
Cartuzzi

Reputation: 56

For anyone interested in this, I figured out a solution. Granted this isn't ideal, but it works. You'll want your IText elements to have a padding of 5 or more pixels to get a good result..

isOnBorder(mouseX, mouseY, coords, padding) {
    let topLeftX = coords.tl.x + padding;
    let topRightX = coords.tr.x - padding;
    let topLeftY = coords.tl.y + padding;
    let bottomLeftY = coords.bl.y - padding;

    if (mouseX < topLeftX || mouseX > topRightX) {
        return true;
    } else if (mouseY < topLeftY || mouseY > bottomLeftY) {
        return true;
    }

    return false;
}

Listen for object:selected event on canvas

'object:selected': (event) => {
  let object = event.target;
  let mouseX = object._mousedownX;
  let mouseY = object._mousedownY;
  let coords = object.oCoords;
  let padding = object.padding;

  if (this.isOnBorder(mouseX, mouseY, coords, padding)) {
    return;
  }

If user didn't click within padding px of the border, enter editing on single click

  object.enterEditing();

Upvotes: 2

Related Questions