asotog/fabricjs-react

support fabricjs from react

fabricjs-react's Issues

can you please help how to export canvas as pdf

can you please help how to export canvas as pdf

Fix "exports" field in package.json for TypeScript typings resolution

Description

When incorporating fabricjs-react into my project, TypeScript reported an error stating it couldn't find the type declarations for fabricjs-react. Upon inspecting the package.json of fabricjs-react, it seems that the "exports" field might not be configured properly to point TypeScript towards the type declarations.

Expected Behavior

TypeScript should be able to recognize the type declarations provided by fabricjs-react.

Actual Behavior

TypeScript reports an error about missing type declarations.

Additional Context

Upon further investigation, a potential solution might be adjusting the "exports" field in package.json of fabricjs-react. Specifically, ensuring it points correctly to the index.d.ts file for types.

How do I download the images I add to the canvas

I'd like to create a function that when called creates an image file that I can save or download and be able to load for later use

Question - fabricjs browser only

Hey, thanks for this project, it really makes integrating fabricjs easier with React. My issue is not directly related to fabricjs-react, but setting it up generally. Namely that I have to use it in a browser only setup (nextjs), but it has native dependencies which fail on next build. I've checked out the issues in fabricjs but there seem to be little will to support this use-case properly, I've also found fabricjs-pure-browser on npm which tries to solve it but I have other build issues there. Do you have experience setting it up for a browser only environment?

Thanks

How can I create multiple canvas and also store the current state of those canvases ?

Cannot read properties of null (reading 'useState')

current behavior
Cannot read properties of null (reading 'useState')

dependencies

• "fabric": "^5.3.0",
• "fabricjs-react": "^1.2.0",
• "react": "17.0.2",
• "react-dom": "17.0.2",

Is it possible to change border-radius?

Hey @asotog , I am trying to create a way to change the border radius of a rectangle, is it possible?

Upgrade to react18

npm install with react18 causes error:

npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR! Found: [email protected]
npm ERR! node_modules/react
npm ERR! react@"18.2.0" from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer react@"^17.0.1" from [email protected]
npm ERR! node_modules/fabricjs-react
npm ERR! fabricjs-react@"*" from the root project
npm ERR!
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force, or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.

how can i change font size by progressbar please help me also want to make font bold italic underline

How can I create multiple canvases and use them on single page.

Adding objects in desired coordinates

Is there any way I could perform addCircle() and add the circle in the coordinates that I want in my canvas maybe using the top and left properties ?

useFabricJSEditor will return a new `editor` per render

As a result editor cant be use as dependency in hooks

change canvas using FabricJSCanvas?

FabricJSCanvas how can I change and edit canvas? cant find any in the docs using FabricJSCanvas

Touch Events Support

I know it is possible to create custom build of FabricJS that supports touch gestures but does fabricjs-react support it? I have tested touch events like touch:gesture but it's never fired.

Add image to the editor

I need to add the ability to add an image to the editor, and in the future other things.

For example:

fabric.Image.fromURL('my_image.png', function(oImg) { // scale image down, and flip it, before adding it onto canvas oImg.scale(0.5).set('flipX', true); canvas.add(oImg); });

Is there a way to access the fabric object? Or should we be approaching this in another way?

useFabricJSEditor hook returns undefined for editor

Is it expected that the editor object returned is undefined to start? Is there a way to get that from the onReady callback which looks like it only returns the canvas element not the editor?

const { editor, onReady } = useFabricJSEditor();

How to do drawing like on a whiteboard?

Sorry but I can't seems to find documentations about this.

Adding image adds multiple images one below another.

Hi @asotog, I tested the code on the usage section to render an image on the canvas, but there are multiple images being rendered. Like a million. Am I doing something wrong or its a bug? Can you please check it out? Here's the sandbox: https://y0rq7.csb.app/ and here's the code:

import React from "react";
import { fabric } from "fabric";
import { FabricJSCanvas, useFabricJSEditor } from "fabricjs-react";

const App = () => {
  const { selectedObjects, editor, onReady } = useFabricJSEditor();

  fabric.Image.fromURL("https://i.imgur.com/8zvUjul.jpg", function (oImg) {
    editor?.canvas.add(oImg);
  });

  return (
    <div>
      <FabricJSCanvas className="sample-canvas" onReady={onReady} />
    </div>
  );
};

export default App;

Adding new features to the package

Hi @asotog , wanted to help you add new features such as addTriangle, addImage, etc. Which files should I modify?
I've explored some of the files that needs modifying, in this case tried adding addTriangle:

editor.d.ts:

export interface FabricJSEditor {
    canvas: fabric.Canvas;
    addCircle: () => void;
    addRectangle: () => void;
    addTriangle: () => void// New function here
    addLine: () => void;
    addText: (text: string) => void;
    updateText: (text: string) => void;
    deleteAll: () => void;
    deleteSelected: () => void;
    fillColor: string;
    strokeColor: string;
    setFillColor: (color: string) => void;
    setStrokeColor: (color: string) => void;
    zoomIn: () => void;
    zoomOut: () => void;
}

defaultShapes.d.ts:

...
export declare const RECTANGLE: {
    left: number;
    top: number;
    fill: string;
    stroke: string;
    width: number;
    height: number;
    angle: number;
};
export declare const TRIANGLE: { // export new shape eg, TRIANGLE here
    left: number;
    top: number;
    fill: string;
    stroke: string;
    width: number;
    height: number;
    angle: number;
};
...

fabricjs-react.es.js:

...
addTriangle: () => {
    const a = new $.Triangle(we.points, {
      ...we.options, // we / Er / we This part I don't get
      stroke: m
    });
    i.add(a);
  },

What else do I need to modify?

canvas.on events fires two times

Hello, I've tried to add own listeners to editor.canvas, but faced this issue. Events fires two times for some reason.
Here is codesandbox where you can reproduce the problem: https://codesandbox.io/s/relaxed-wescoff-nstd6u?file=/src/App.js

Fabricjs6 beta12 giving error for textbox

Hi
I use fabricjs-react with fabric. With fabric version 5.3 it is ok , but with fabricjs beta version it is giving error like .
Cannot read properties of undefined (reading 'register')
at Textbox._mouseDownHandle

https://codesandbox.io/s/gallant-hill-qgzjm3?file=/src/App.js

support custom build of fabricjs

Hi,
it looks like that this library is build only for minimalist fabric js (no custom build: no eraser plugin etc..)

so this code does not work

editor?.canvas.freeDrawingBrush = new fabric.EraserBrush(canvas);

freeDrawingBrush is considered as a property so no possible to set it.
there is no setter either.

import error: 'useFabricJSCanvas' is not exported from 'fabricjs-react'

import React from 'react';
import { FabricJSCanvas, useFabricJSCanvas } from 'fabricjs-react'

function App() {
  const { editor, onReady } = useFabricJSCanvas();

  const onAddCircle = () => {
    editor?.addCircle()
  }
  const onAddRectangle = () => {
    editor?.addRectangle()
  }

  return (
    <div>
      <button onClick={onAddCircle}>Add circle</button>
      <button onClick={onAddRectangle}>Add Rectangle</button>
      <FabricJSCanvas className="sample-canvas" onReady={onReady} />
    </div>
  );
}
export default App;

Fabric v5 ?

Your library is pinned to Fabric v4

I'm going to try it with Fabric v5 using --force on the install

I'll report back here w/results

(Fabric says no real breaking changes in v5 http://fabricjs.com/changelog)

Latest FabricJS?

Nice! Can we bump this to the latest fabric js version?

How To Use In A Class Component

I wish to use it in a class component but I keep getting this error:

Line 161:33: React Hook "useFabricJSEditor" cannot be called in a class component. React Hooks must be called in a React function component or a custom React Hook function react-hooks/rules-of-hooks

So is it possible to use it in a class component?

Text disappears on edit / selected

Hey man, awesome package! The problem I'm facing is when using the addText() function. It just disappears when you click it to drag. You can still edit it, it just have a transparent fill for some reason. I also tried using manual plain fabricjs which results in the same thing. Is this a bug?

The code I tried using:

editor?.addText("Editable Textbox");
editor?.canvas?.renderAll();

and

var textEditable = new fabric.Textbox("Editable Textbox", {
      width: 500,
      editable: true,
      fill: "black",
    });

    editor?.canvas.add(textEditable);
    editor?.canvas?.renderAll();

Am I just using it wrong? How do I use updateText() as well?

Is there any documentation?

The syntax appears to be unique (different from regular fabric.js code). Is there documentation for fabricjs-react?

I have a large fabric.js project code, and I'm trying to migrate it to React, but the integration isn't going smoothly... I've discovered this library.

Changing strokeWidth

I am making an app to move circles, rects etc. over holds on a climbing board (the board is the background img). I would like to change the strokeWidth of objects before adding them, like you can change the color before adding them. As far as I have found, this is not supported by fabricjs-react. I have been able to change the property by getting the object/objects and changing it on each object, but this only applies on resizing the objects with mouse-drag.

Change the strokewidth of all objects (only applies on mouse-drag resize of object):
useEffect(() => { editor?.canvas.getObjects().map((obj) => (obj.strokeWidth = strokeWidth)); });
This is my first time working with canvas, fabric and fabricjs-react. Any tips are greatly appreciated!

How to get updated activeObject

Hey all,
do you know how to get updated activeObject while or after moving it?
I want to show current coordinates of activeObject while moving it on screen.

I use

const selected = editor?.canvas?.getActiveObject() || null;

to get selected object, but it gets updated only when it looses a focus.

`selectedObjects` reports incorrect amount when shift clicking.

Repro: https://codesandbox.io/p/sandbox/nervous-artem-dxm4w3?file=%2Fsrc%2FApp.js%3A6%2C19-6%2C34

If you make 3 circles, and then shift click them all, it reports only 1 item selected:

However, if you make a selectionbox over all the items, then it reports it correctly:

React FabricJS Documentation

Hi,

Thank you for creating the packages compatible for react, I was just wondering, is there any way can you provide us with some documentation as it'll be a great help