How to Apply Custom Controls Globally to All Canvas Elements in Fabric.js v6.5.3?

[aayushmaan-54]

Question:

I am using Fabric.js v6.5.3 to create a canvas editor and want to implement custom controls for all canvas elements. I wrote a custom hook, useEditor, to initialize the canvas and manage its lifecycle. Additionally, I created custom controls using the createCircleControls function in controls.ts. However, I am struggling to apply these custom controls globally to all canvas elements.

Here’s what I have so far:
useEditor.tsx

import { useCallback, useState } from "react";
import { Canvas, Rect, Shadow } from "fabric";
import useAutoResize from "./use-autoresize";
import { createCircleControls } from "@/lib/custom-controls/controls";

export default function useEditor() {
    const [canvas, setCanvas] = useState<Canvas | null>(null);
    const [container, setContainer] = useState<HTMLDivElement | null>(null);

    useAutoResize({ canvas, container });

    const init = useCallback(({ initialCanvas, initialContainer }: { initialCanvas: any; initialContainer: HTMLDivElement }) => {
        const commonControlConfig = {
            touchCornerSize: 40,
            cornerSize: 10,
            cornerColor: "#FFFFFF",
            cornerStyle: "circle",
            borderColor: "#1297FF",
            cornerStrokeColor: "#1297FF",
            transparentCorners: false,
        };
        const customControls = createCircleControls();

        const initialWorkspace = new Rect({
            left: 100,
            top: 100,
            name: "clip",
            fill: "white",
            width: 900,
            height: 1200,
            selectable: false,
            hasControls: false,
            selectionColor: "#18A0FB1A",
            selectionBorderColor: "#18A0FB",
            hoverCursor: "default",
            shadow: new Shadow({
                color: "rgba(0, 0, 0, 0.8)",
                blur: 5,
            }),
        });

        initialCanvas.setWidth(initialContainer?.offsetWidth);
        initialCanvas.setHeight(initialContainer?.offsetHeight);

        initialCanvas.add(initialWorkspace);
        initialCanvas.centerObject(initialWorkspace);
        initialCanvas.clipPath = initialWorkspace;

        setCanvas(initialCanvas);
        setContainer(initialContainer);

        const test = new Rect({
            width: 100,
            height: 100,
            fill: "black",
            controls: createCircleControls(),
            ...(commonControlConfig as any),
        });

        initialCanvas.add(test);
        initialCanvas.centerObject(test);
    }, []);

    return { init };
}

controls.ts

import { Control, controlsUtils } from "fabric";
import {
  drawRotateIcon,
  drawCircleIcon,
  drawHorizontalIcon,
  drawVerticalIcon,
} from "./drawer";
const scaleSkewCursorStyleHandler = controlsUtils.scaleSkewCursorStyleHandler;
const scalingXOrSkewingY = controlsUtils.scalingXOrSkewingY;
const scaleOrSkewActionName = controlsUtils.scaleOrSkewActionName;
const scalingYOrSkewingX = controlsUtils.scalingYOrSkewingX;
const scaleCursorStyleHandler = controlsUtils.scaleCursorStyleHandler;
const scalingEqually = controlsUtils.scalingEqually;
const rotationWithSnapping = controlsUtils.rotationWithSnapping;
const rotationStyleHandler = controlsUtils.rotationStyleHandler;

export const createCircleControls = () => {
  return {
    ml: new Control({
      x: -0.5,
      y: 0,
      cursorStyleHandler: scaleSkewCursorStyleHandler,
      actionHandler: scalingXOrSkewingY,
      getActionName: scaleOrSkewActionName,
      render: drawVerticalIcon,
    }),

    mr: new Control({
      x: 0.5,
      y: 0,
      cursorStyleHandler: scaleSkewCursorStyleHandler,
      actionHandler: scalingXOrSkewingY,
      getActionName: scaleOrSkewActionName,
      render: drawVerticalIcon,
    }),
...
}};

drawer.ts

import { useEffect, useState } from 'react';
import * as fabric from "fabric";
export function drawCircleIcon(
  ctx: CanvasRenderingContext2D,
  left: number,
  top: number,
  styleOverride: any,
  fabricObject: any
) {
  ctx.save();
  ctx.translate(left, top);
  ctx.rotate(fabric.util.degreesToRadians(fabricObject.angle));
  ctx.beginPath();
  ctx.lineCap = "round";
  ctx.lineWidth = 3;
  ctx.shadowBlur = 2;
  ctx.shadowColor = "black";
  ctx.arc(0, 0, 5.5, 0, 2 * Math.PI);
  ctx.fillStyle = "#ffffff";
  ctx.fill();
  ctx.restore();
}

export function drawVerticalIcon(
  ctx: CanvasRenderingContext2D,
  left: number,
  top: number,
  styleOverride: any,
  fabricObject: any
) {
  const size = 36;
  ctx.save();
  ctx.translate(left, top);
  ctx.rotate(fabric.util.degreesToRadians(fabricObject.angle));
  ctx.beginPath();
  ctx.lineCap = "round";
  ctx.lineWidth = 4;
  ctx.shadowBlur = 2;
  ctx.shadowColor = "black";
  ctx.moveTo(-0.5, -size / 4);
  ctx.lineTo(-0.5, -size / 4 + size / 2);
  ctx.strokeStyle = "#ffffff";
  ctx.stroke();
  ctx.restore();
}

export function drawHorizontalIcon(
  ctx: CanvasRenderingContext2D,
  left: number,
  top: number,
  styleOverride: any,
  fabricObject: any
) {
  const size = 36;
  ctx.save();
  ctx.translate(left, top);
  ctx.rotate(fabric.util.degreesToRadians(fabricObject.angle));
  ctx.beginPath();
  ctx.lineCap = "round";
  ctx.lineWidth = 4;
  ctx.shadowBlur = 2;
  ctx.shadowColor = "black";
  ctx.moveTo(-size / 4, -0.5);
  ctx.lineTo(-size / 4 + size / 2, -0.5);
  ctx.strokeStyle = "#ffffff";
  ctx.stroke();
  ctx.restore();
}
...

Editor.ts

"use client";
import useEditor from "@/hooks/use-editor";
import { Canvas } from "fabric";
import { useEffect, useRef } from "react";
import Navbar from "./Navbar";
import Sidebar from "./Sidebar";
import EditToolbar from "./EditToolbar";
import Footer from "./Footer";
import { createCircleControls } from "@/lib/custom-controls/controls";

export default function EditorSection() {
  const { init } = useEditor();
  const canvasRef = useRef(null);
  const canvasContainerRef = useRef<HTMLDivElement>(null);

  const commonControlConfig = {
    touchCornerSize: 40,
    cornerSize: 10,
    cornerColor: "#FFFFFF",
    cornerStyle: "circle",
    borderColor: "#1297FF",
    cornerStrokeColor: "#1297FF",
    transparentCorners: false,
  };
  const customControls = createCircleControls();

  useEffect(() => {
    let canvas: Canvas | null = null;
    if (canvasRef.current) {
      canvas = new Canvas(canvasRef.current, {
        controlsAboveOverlay: true,
        preserveObjectStacking: true,
        selectionColor: "#18A0FB1A",
        selectionBorderColor: "#18A0FB",
        controls: customControls,
      ...(commonControlConfig as any),
      });
    }
    console.log(canvas);
    
    init({
      initialCanvas: canvas,
      initialContainer: canvasContainerRef.current!,
    });

    return () => {
      if (canvas) {
        canvas.dispose();
      }
    };
  }, [init]);

  return (
    <div className="h-full flex flex-col">
      <Navbar />
      <div className="absolute h-[calc(100%-68px)] w-full top-[68px] flex">
        <Sidebar />
        <main className="flex-1 overflow-auto relative flex flex-col bg-muted">
            <EditToolbar />
            <div ref={canvasContainerRef} className="flex-1 h-[calc(100%-px)] ">
              <canvas ref={canvasRef} className="w-full h-full" />
            </div>
          <Footer />
        </main>
      </div>
    </div>
  );
}

What i have tried

I can successfully apply custom controls to a specific object like this:

const test = new Rect({
    width: 100,
    height: 100,
    fill: "black",
    controls: createCircleControls(),
    ...(commonControlConfig as any),
});
initialCanvas.add(test);
initialCanvas.centerObject(test);

However, I want these custom controls to apply to all canvas elements automatically. this is only appling to test rect i made

How can I apply custom controls globally to all objects on the Fabric.js canvas? Is there a way to override the default controls for all canvas elements?

[asturur]

Please read this doc here that has been written on purpose
https://fabricjs.com/docs/configuring-controls/

Let me know if it answers your questions and if is clear.
If it isn't it needs to be improved

[aayushmaan-54]

nah it only apply to that particular element, so i am creating a drawing app type app and in there i want to apply to whole canvas where i am drawing if i try to use those settings in my canvas where i am drawing it doesnot work i want it isnide my all elements inside canvas

[asturur]

I m not sure what do you mean, the guide explains how to configure controls per object, per all object or per class.