How to lock group item movement?

[hamzawain7]

I want to make a simple table group that allows users to edit the text items but not move them. How can I achieve this?

JsFiddle: https://jsfiddle.net/hamzawain7/kt57zuqo/

Screen.Recording.2024-07-11.at.12.09.41.PM.mov

[sohailahmad07]

When you are create the group element put lockmovementX & lockmovementY on element that your are grouping like so

   let text = new fabric.Textbox("TextBox", {
                left: 300,
                top: 50,
                fontSize: 24,
                width: 200,
                fill: "green",
                isWrapping: true,
                lockMovementY: true,
                lockMovementX: true
            });


            let text2 = new fabric.Textbox("TextBox", {
                left: 50,
                top: 50,
                fontSize: 24,
                width: 200,
                fill: "red",
                isWrapping: true,
                lockMovementY: true,
                lockMovementX: true
            });

            let group = new fabric.Group([text, text2], {
                left: 100,
                top: 100,
                selectable: true,
                subTargetCheck: true,
                interactive: true
            });

            canvas.add(group);

            canvas.renderAll();

[hamzawain7]

Here is a JS fiddle (https://jsfiddle.net/hamzawain7/tne5a9r0/) with your proposed solution. The problem is that I can't move the group anymore because move operations are still trying to run on the child, which is locked now. I want a behavior similar to what Canva offers in the attached video, which I believe is a common UX, but I cannot think of an easy way to achieve it with FabricJS.

Screen.Recording.2024-07-11.at.4.10.49.PM.mov

[sohailahmad07]

here a codepen with a simple demo by default the group is not interactive on your db click the group it become interactive and you can edit the text

https://codepen.io/Sohail-Ahmad-the-solid/pen/gONbEzX?editors=1010

[hamzawain7]

Hey thanks, this works great 👍

[hamzawain7]

@sohailahmad07 hi the codepen is not working now. Can you please fix that? Thanks.