Search the Community

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> ); } }

I've been tinkering with fabric.js in a SharePoint React webpart today, which worked fine - allowing me to render shapes. I added gsap to test animating shapes, and for basic movement of shapes it worked straight away. However - if I use the "rotation" property, it immediately throws "Invalid property", and "Missing Plugin" errors. I've narrowed it down specifically to rotation - moving shapes around, and easing them seems to work perfectly. Here the core code of the component in the webpart: import * as React from 'react'; import type { IMySharePointMenuProps } from './IMySharePointMenuProps'; import * as fabric from 'fabric'; import { gsap } from 'gsap'; export default class MySharePointMenu extends React.Component<IMySharePointMenuProps> { private canvasRef = React.createRef<HTMLCanvasElement>(); private canvas: fabric.Canvas | null = null; public componentDidMount(): void { if (this.canvasRef.current) { // instantiate canvas this.canvas = new fabric.Canvas(this.canvasRef.current, { backgroundColor: 'lightgray' }); // create a rectangle const rect = new fabric.Rect({ left: 100, top: 100, width: 30, height: 30, fill: 'blue', angle: 0, hasControls: false }); // add the rectangle to the canvas this.canvas.add(rect); // render this.canvas.renderAll(); // add a click handler to the rectangle rect.on('mousedown', function(options){ // when clicked, animate the rectangle to a new location, and rotate it gsap.to(rect, { duration: 2, left: 200, top: 100, rotation: 45, ease: "power1.inOut", onUpdate: () => { if (this.canvas) { this.canvas.renderAll(); } }, onComplete: () => { // do something else } }); }); } } public render(): React.ReactElement<IMySharePointMenuProps> { return ( <div> <canvas ref={this.canvasRef} style={{ width: 500 , height: 500 }}></canvas> </div> ); } // Clean up the canvas object public componentWillUnmount(): void { if (this.canvas) { this.canvas.dispose(); this.canvas = null; } } } Any ideas what's causing it ?