Making a “control panel” for Fabric.js objects

Question

This is probably more of a general javascript than fabric.js question.

I am looking at the Fabric.js " kitchensink " demo. If you click the "Object" tab and then select an item in the drawing area on the left, the control panel gets populated with the selected object's properties and there is (or appears to be) one-way binding: changes in the control panel are reflected in the selected object.

I need to implement this sort of control panel and am not sure where to start. I've been looking over the page source of that demo but it is pretty dense.

Can someone give me a nudge in the right direction on how to start on this? Is there a lib or framework involved? Am I overthinking it? I'm coming from a Flex/Actionscript background and where doing this sort of thing is very easy and I still get flummoxed with the density of the Javascript|HTML|CSS combination.

Answer 1

We use similar functionality in our customizable products page. It's a bit different from Kitchensink example. In our system you need to add a text object to canvas first.

The main workflow is like this:

• Give an id to every newly object to canvas:

    addText() { const textSample = new fabric.IText('Örnek yazı', { left: canvas.width * fabric.util.getRandomInt(20, 30) / 100, top: canvas.width * fabric.util.getRandomInt(20, 30) / 100, fontFamily: 'Georgia, Times, "Times New Roman", serif', fontSize: 30, id: myId //This is my id }); window.canvas.add(textSample); } 

• When the item is selected on canvas, get its id and activate the textarea on right column.

    let activeTextObjectId window.canvas.on({ 'object:selected': () => { if (window.canvas.getActiveObject().type === 'i-text') { activeTextObjectId = getIdOfSelectedObject() activateTextaArea() // I think you can handle this } } }) getIdOfSelectedObject() { return window.canvas.getActiveObject().id } 

• So you have the id of the canvas object. Now you can run a function to update text object when the textarea keyup event triggers (updateTextObjectInCanvas)

   document.getElementById('myTextarea').onkeyup = function () { updateCanvasTextObject(this.value) } 

• You need a function which gets the object from canvas by its id (getObjectFromCanvasById) and one that updates its text (updateCanvasTextObject).

   updateCanvasTextObject(value) { const canvasTextObject = this.getObjectFromCanvasById(activeTextObjectId) canvasTextObject.text = value window.canvas.renderAll() } //Instead of getting object from canvas, you can directly edit using getActiveObject() method of fabric.js getObjectFromCanvasById(id) { const canvasObject = window.canvas.getObjects().filter((item) => { return item.id === parseInt(id) }) return canvasObject[0] } 

Sorry about the code it's messy and it can be optimized, but I think it gives an idea about the workflow. Of course you will need many controls and validations in a real world example. Also it will be much easier to build this app using a JS library and state management system together such as Vue.js and Vuex. Hope that helps.

Here's real world working example of my code