Troubleshooting FabricJS: Object manipulation is disabled until a common selection is made

Question

Troubleshooting FabricJS: Object manipulation is disabled until a common selection is made

I am currently in the process of developing a product configurator with Vue and FabricJS.

To set up my canvas, I used

this.canvas = new fabric.Canvas("canvas");

<template>
  <div id="wrapper">
    <div id="left"></div>
    <canvas id="canvas"/>
  </div>
</template>

However, after adding an object to the canvas (IText, Textbox, Image) and selecting it with the mouse, I encountered difficulties using the object controls for resizing, scaling, skewing, or rotating the object. Although I was able to move the object on the canvas, the controls did not respond as expected. Interestingly, after adding another object, selecting both at once, and then deselecting them, the controls began working properly. This issue did not occur when testing on JsFiddle, where everything functioned correctly.

Controls not working until both objects are selected

I experienced this problem across different web browsers.

Could it be that I missed including a specific canvas property that enables control functionality immediately after adding an object? Or is there possibly a bug in Fabric.js causing this issue?

javascript vue.js canvas controls fabricjs

Answer 1

Answer №1

After encountering some issues, I came up with a creative solution: I devised a workaround by inserting an invisible helper object onto the canvas immediately after its creation. Then, for each new object added, I used programming to select and deselect all objects in order to ensure proper behavior. While I understand that this method may be considered a "hack," it effectively resolves the issue at hand :)

this.canvas = new fabric.Canvas("canvas", {
    ...canvasProps
});

const helperObj = new fabric.Object({});    //invisible abstract object
helperObj.set("selectable", false);         //preventing manual selection and modification
this.canvas.add(helperObj);

this.canvas.on("object:added", () => {
  //workaround - selecting all objects to enable object controls

  let objects = this.canvas.getObjects();
  var selection = new fabric.ActiveSelection(objects, {
     canvas: this.canvas,
  });
  this.canvas.setActiveObject(selection);   //selecting all objects...
  this.canvas.discardActiveObject();        //...and then deselecting them
  this.canvas.requestRenderAll();
});

Answer 2

After encountering some issues, I came up with a creative solution: I devised a workaround by inserting an invisible helper object onto the canvas immediately after its creation. Then, for each new object added, I used programming to select and deselect all objects in order to ensure proper behavior. While I understand that this method may be considered a "hack," it effectively resolves the issue at hand :)

this.canvas = new fabric.Canvas("canvas", {
    ...canvasProps
});

const helperObj = new fabric.Object({});    //invisible abstract object
helperObj.set("selectable", false);         //preventing manual selection and modification
this.canvas.add(helperObj);

this.canvas.on("object:added", () => {
  //workaround - selecting all objects to enable object controls

  let objects = this.canvas.getObjects();
  var selection = new fabric.ActiveSelection(objects, {
     canvas: this.canvas,
  });
  this.canvas.setActiveObject(selection);   //selecting all objects...
  this.canvas.discardActiveObject();        //...and then deselecting them
  this.canvas.requestRenderAll();
});

Answer 3

Answer №2

Here is a helpful link to a Github issue: https://github.com/fabricjs/fabric.js/issues/7012.

By using markRaw() around the canvas initialization, I successfully resolved the problem.

Answer 4

Here is a helpful link to a Github issue: https://github.com/fabricjs/fabric.js/issues/7012.

By using markRaw() around the canvas initialization, I successfully resolved the problem.

Troubleshooting FabricJS: Object manipulation is disabled until a common selection is made

Answer №1

Answer №2

Similar questions

I can't seem to figure out why the game is not showing up on the desktop in this index HTML

Problem with memory management in ThreeJS

ng-repeat unable to function within a textarea

Issue with sync-request when using post data doesn't seem to be functioning

What is the best way to connect my Vue components with the active record objects in my Rails application?

Retrieve the rendered component color variables exclusively from the global color variable file

Caution: The React Hook useEffect is missing a required dependency

Is there a way to delete specific information from a JSON response?

The Enigma of AngularJS Coding

Angular JS Unveiled: Deciphering HTML Entities

Tips for including type definitions when adding elements to an array in TypeScript

JavaScript is unable to bring in an npm module

The combination of the card hover effect and the bootstrap modal creates complications

Issue with implementing setCallBack for updating variant prices in Shopify

Expand or collapse level 1 nodes with v-treeview component

Try utilizing a single Associative Array instead of managing two separate index arrays when working in jQuery

In the React js and emotion framework, fonts are only loaded in production mode after the page has been re

Contrasting WebSQL and SQLite in terms of their utility in mobile applications and web browsers

Is there a way to verify the existence of an element based on its class name?

Removing duplicate elements from an array using lodash