Fabric.js - wait until loadedSVGFromString has finished before rendering group

Question

I'm working with Fabric.js to create an interactive canvas. When a user clicks on a button I call the addNewItem function in my diagram.js file. After clicking this I want to add a new group to the center of the canvas. The issue I have is that one of the two elements that I want to add to the group is an SVG that I'm loading via Fabric's own loadSVGFromString method. This takes time to complete which means that in the below example group is not defined in the Promise.

diagram.js (only relevant code shown)

addNewItem = (e, item) => {
  e.preventDefault();

  drawPlayer(item.svg, this.state.playerIconColor, borderColor, item.sizes[this.state.iconSize].height, item.sizes[this.state.iconSize].width, 'LM')
  .then((newItem) => {
    newItem.hasControls = false;
    canvas
      .add(newItem)
      .centerObject(newItem)
      .setActiveObject(newItem)
      .renderAll();
    newItem.setCoords();
  })
  .catch((notCreated) => {
    alert(notCreated);
  });
}

drawPlayer.js

import { fabric } from 'fabric';

const drawPlayer = (icon, iconFill, borderColor, height, width, label) => {
  // Create empty group
  let group;

  fabric.loadSVGFromString(icon, (objects, options) => {
    const canvasItem = fabric.util.groupSVGElements(objects, options);
    canvasItem.hasControls = false;
    canvasItem.setFill(iconFill);
    canvasItem.set({ borderColor });
    canvasItem.scaleToHeight(height);
    canvasItem.scaleToWidth(width);

    const playerText = new fabric.Text(label, {
      fontSize: 10,
      originX: 'center',
      originY: 'center',
    });

    group = new fabric.Group([canvasItem, playerText], { left: 200, top: 200 });
  });

  return new Promise((resolve, reject) => {
    if (group.length > 0) {
      resolve(group);
    } else {
      reject('Not created');
    }
  });
};

export default drawPlayer;

Put your `return` inside `loadSVGFromString` callback function. — Durga, Nov 09 '17 at 09:37
Doing this gives me a `Uncaught TypeError: Cannot read property 'then' of undefined` — GuerillaRadio, Nov 09 '17 at 10:03

score 3 · Accepted Answer · answered Nov 09 '17 at 10:50

You can try resolving/rejecting the promise after loadSVGFromString is executed.

import { fabric } from 'fabric';

const drawPlayer = (icon, iconFill, borderColor, height, width, label) => {
  // Create empty group
  let group;
  let groupResolve;
  let groupReject;

  fabric.loadSVGFromString(icon, (objects, options) => {
    const canvasItem = fabric.util.groupSVGElements(objects, options);
    canvasItem.hasControls = false;
    canvasItem.setFill(iconFill);
    canvasItem.set({ borderColor });
    canvasItem.scaleToHeight(height);
    canvasItem.scaleToWidth(width);

    const playerText = new fabric.Text(label, {
      fontSize: 10,
      originX: 'center',
      originY: 'center',
    });

    group = new fabric.Group([canvasItem, playerText], { left: 200, top: 200 });
    if (group.length > 0) {
      groupResolve(group);
    } else {
      groupReject('Not created');
    }
  });

  return new Promise((resolve, reject) => {
    groupResolve = resolve;
    groupReject = reject;
  });
};

export default drawPlayer;

Never seen this way of resolving a promise before, thanks very much! — GuerillaRadio, Nov 09 '17 at 11:08

Fabric.js - wait until loadedSVGFromString has finished before rendering group

1 Answers1