transformOrigin not working in a REACT WebPart in SharePoint using fabric.js

[Jonathan Beckett]

This is a strange one. I've tested at CodePen, where transformOrigin works as expected - but it doesn't work in a SharePoint webpart - which makes no sense because at the end of the day it's a canvas element in the browser. It would appear that when operating on shapes created through fabric.js within a SharePoint webpart, the transformOrigin is *always* at the top left of the shape - no matter how I try to instantiate, or set it (the end result - in codepen the shape rotates around it's center - as it should - but in a SharePoint webpart it rotates around the top left of the initial bounding box of the shape).

 

Have you ever seen it before?

 

Just for reference, here's the SharePoint test code (doing almost the same thing as the codepen test - in codepen I tried rect and path just to see if there was a difference)

 

  import * as React from 'react';
  import type { ITestSharePointMenuProps } from './ITestSharePointMenuProps';
  import * as fabric from 'fabric';
  import { gsap } from 'gsap';

  export default class TestSharePointMenu extends React.Component<ITestSharePointMenuProps> {

    private containerRef = React.createRef<HTMLDivElement>();
    private canvasRef = React.createRef<HTMLCanvasElement>();
    private canvas: fabric.Canvas | null = null;

    public componentDidMount(): void {
      
      if (this.containerRef.current && this.canvasRef.current) {

        const containerRect = this.containerRef.current.getBoundingClientRect();

        // instantiate the fabric canvas, and make it the same size as it's container
        this.canvas = new fabric.Canvas(this.canvasRef.current, {
          backgroundColor: 'black',
          width: containerRect.width,
          height: containerRect.height,
          perPixelTargetFind: true
        });

        // create a simple rectangle
        const test_rect = new fabric.Rect({
          left: 100,
          top: 100,
          width: 100,
          height: 100,
          fill: "yellow",
          hasControls: false,
          hasBorders: false,
        });
        this.canvas.add(test_rect);

        // when clicked, rotate the rectangle through 90 degrees
        test_rect.on("mousedown", () => {
          gsap.to(test_rect, {
            duration: 1,
            angle: test_rect.angle + 90,
            onUpdate: () => {
              this.canvas?.renderAll();
            }
          });
        });
        
      }
    }

    public render(): React.ReactElement<ITestSharePointMenuProps> {

      return (
        <div ref={this.containerRef} >
          <canvas ref={this.canvasRef}> </canvas>
        </div>
      );

    }

  }

 

 

See the Pen QwWjvqd by jonbeckett (@jonbeckett) on CodePen.

[akapowl]

Hello again, Jonathan.

To me this honestly sounds more like a fabric.js problem than anything related to GSAP, and usually this forum tends to keep things directly related to GSAP; just keep that in mind for the future.

I'm not familiar with fabric.js at all, but my best guess would be that there might be a version incompatibility between the version you are using in your project and the version you are using on codepen (which is the very very old 1.1.0). I just quickly swapped the fabric version of your demo to 2.0.0 and it already rotated around the top left instead of the center of the rect - so that would be the first thing I would check on, if I were you.

The demo from my answer to your last question e.g. uses the latest version (6.6.0 at this point in time) and it also rotates around the top left of the rect instead of the center - see below. And just to make sure: a transformOrigin in GSAP would again target a CSS property (transform-origin) or if there is such a property with that exact name on your fabric.js object, that instead - but I don't think there is. So you might check up on the fabric.js docs on how to handle things if you want to change the origin of the transformations being applied, once you've gotten around the inconsistency thing.

Here's a link that might help as a starting point for that:

 

https://fabricjs.com/docs/transformations/
 

Also depending on which version you are using in your project, you might want to update and / or also check their outdated docs / migration guides that you can find via the lefthand side navgation in their docs. Good luck with the project - I hope this helps in some way at least.

See the Pen xbxbaKr by akapowl (@akapowl) on CodePen.

[Jonathan Beckett]

Thanks for the help - I'll start digging.

[akapowl]

For your convenience, here's a fork of that other demo, showing one way of how to rotate the box around its center instead.

 

All I had to do was set these properties...

rect.originX = 'center'
rect.originY = 'center'

...which I found in this part of the docs when I searched for 'origin'.

https://fabricjs.com/api/type-aliases/transform/

See the Pen NPWGyWP by akapowl (@akapowl) on CodePen.

[Jonathan Beckett]

Interesting. I only just got a chance to look at this - I discovered the same thing early this evening