diff --git a/src/components/Board/Board.tsx b/src/components/Board/Board.tsx index 6113553..7435876 100644 --- a/src/components/Board/Board.tsx +++ b/src/components/Board/Board.tsx @@ -566,6 +566,7 @@ const Board = React.forwardRef( }), ); + const selectable = item.selectable ?? true; const polygon = fabricUtils.createControllableCustomObject( fabric.Polygon, scaledCoords, @@ -573,7 +574,9 @@ const Board = React.forwardRef( name: item.id, stroke: item.color, fill: `rgba(${parse(item.color).values.join(",")},${item.opacity ?? 0.4})`, - selectable: item.selectable ?? true, + selectable, + hoverCursor: item.hoverCursor, + moveCursor: item.moveCursor, }, scaledCoords.length === 4, // Is a rectangle ); diff --git a/src/components/Board/types.tsx b/src/components/Board/types.tsx index e7ba4d6..da048b9 100644 --- a/src/components/Board/types.tsx +++ b/src/components/Board/types.tsx @@ -1,9 +1,13 @@ +import { CursorType } from "../../fabric/types"; + export type CanvasObject = { id: string; category: string; color: string; value: string; selectable?: boolean; + hoverCursor?: CursorType; + moveCursor?: CursorType; coords: { x: number; y: number }[]; opacity?: number; content?: string; diff --git a/src/fabric/types.ts b/src/fabric/types.ts index be8b75d..370096b 100644 --- a/src/fabric/types.ts +++ b/src/fabric/types.ts @@ -55,3 +55,42 @@ export type CanvasAnnotationState = { points: { x: number; y: number }[]; }; }; + +export type CursorType = + | "auto" + | "default" + | "none" + | "context-menu" + | "help" + | "pointer" + | "progress" + | "wait" + | "cell" + | "crosshair" + | "text" + | "vertical-text" + | "alias" + | "copy" + | "move" + | "no-drop" + | "not-allowed" + | "grab" + | "grabbing" + | "e-resize" + | "n-resize" + | "ne-resize" + | "nw-resize" + | "s-resize" + | "se-resize" + | "sw-resize" + | "w-resize" + | "ew-resize" + | "ns-resize" + | "nesw-resize" + | "nwse-resize" + | "col-resize" + | "row-resize" + | "all-scroll" + | "zoom-in" + | "zoom-out" + | "revert";