How to add a group of separate objects that remain grouped?

Question

I'm using fabricjs 1.7.21 and have a button that adds text. How might I add a group of objects, such as multiple editable IText fields (see the right side) to the canvas as I can with the single IText object?

In other words, I want to be able to add things like on the right side with a click, and be able to move it around as a group.

var canvas = new fabric.Canvas("c");
canvas.setHeight(500);
canvas.setWidth(500);

// Add Text
function Addtext() {
  var text = new fabric.IText("Type...", {
    fontSize: 30,
    top: 10,
    left: 10,
    width: 200,
    height: 200,
    textAlign: "center"
  });
  canvas.add(text);
  canvas.setActiveObject(text);
  text.enterEditing();
  text.selectAll();
  text.renderCursorOrSelection(); // or canvas.renderAll();
  canvas.isDrawingMode = false;
}

// Right Side Objects

// Header Constants
const toppers = {
  fontSize: 27,
  hasBorders: true,
  hasControls: false,
  left: 380,
  lockMovementX: true,
  lockMovementY: true,
  lockRotation: true,
  originX: "center",
  originY: "center",
  selectable: true,
  align: "mid",
  centeredScaling: true,
};
const headingOne = {
  lockMovementX: true,
  lockMovementY: true,
  originX: "center",
  originY: "center",
  selectable: true,
  align: "mid",
  fontSize: 14,
  fontStyle: "italic",
  hasBorders: true,
  hasControls: false,
  hasRotatingPoint: false,
  left: 380,
};
const headingTwo = {
  align: "mid",
  centeredScaling: true,
  fontSize: 20,
  hasBorders: true,
  hasControls: false,
  hasRotatingPoint: false,
  lockMovementX: true,
  lockMovementY: true,
  lockRotation: true,
  originX: "center",
  originY: "center",
  selectable: true,
  left: 380,
};

canvas.add(new fabric.IText("Some Text", {
  ...toppers,
  top: 25,
}));
canvas.add(new fabric.IText("Some Text", {
  ...toppers,
  fontWeight: "bold",
  top: 60,
}));
canvas.add(new fabric.IText("Some Text", { 
  ...headingOne,
  top: 90,
}));
canvas.add(new fabric.IText("Some Text", { 
  ...headingTwo,
  top: 110,
}));

canvas {
  border: 1px solid #dddddd;
  margin-top: 10px;
  border-radius: 3px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.7.21/fabric.min.js"></script>
<button onclick="Addtext()">Add Text</button>
<canvas id="c"></canvas>

Answer 1

I am not sure to truly understand your need, but if all you need is a button which adds one textField to the canvas and binds it to a group, I think this should work :

var canvas = new fabric.Canvas("c");
canvas.setHeight(500);
canvas.setWidth(500);
canvas.isDrawingMode = false;
var myGroupOfText = new fabric.Group();

function Addtext() {
  var text = new fabric.IText("Type...", {
    fontSize: 30,
    top: 10,
    left: 10,
    width: 200,
    height: 200,
    textAlign: "center"
  });
  canvas.add(text);
  myGroupOfText.add(text);      
}

I am not sure why you would need

canvas.setActiveObject(text);
text.enterEditing();
text.selectAll();

but if you want, I guess there is no problem to add this to your AddText method. Please note that 'add' method already includes a call to canvas.renderAll().

Ultimately, please do not mistake drawingMode with an hypothetical insertionMode. drawingMode is a setting inherent to the canvas which determines whether or not free drawing (aka drawing shape by click + move) should be enable. Unless you have a very specific constraint, there is no need to re-set it each time you add an IText.

EDIT : According to your comment, you might want use this :

 var canvas = new fabric.Canvas("c");
canvas.setHeight(500);
canvas.setWidth(500);
canvas.isDrawingMode = false;

[...]

function addGroupOfText() {
    var myGroupOfText = new fabric.Group();
    myGroupOfText.setOptions({selectable: true});
    var options = {
        fontSize: 30,
        top: 10,
        left: 10,
        width: 200,
        height: 200,
        textAlign: "center",
        selectable: false,
        fontWeight: normal, // or 'bold', or a number. see docs
        underline: false, // or true
        fontStyle: normal // or 'italic'. see docs
      }
    this.addText(myGroupOfText, options); // repeat this call as many time as needed
}

function addText(group, options) {
  var text = new fabric.IText("Type...", options);
  canvas.add(text);
  group.add(text);      
}

This would allows you to add X textfields (by repeating X times the addText call) and to specify different options to each of them. I suggest you to see the docs http://fabricjs.com/docs/fabric.IText.html and http://fabricjs.com/docs/fabric.Group.html . Please note that here I set selectable: false to each IText to be sure none would be selected as one, and selectable: true to the group to assure it would be selectable.

If not clear, ask for precisions in comments, I'll gladly answer you.