Feat: added support for external shapes

src/components/controls/shapes/index.tsx

@@ -2,11 +2,13 @@ import { memo, useCallback, useState } from "react";
 import { RectangleHorizontal } from "lucide-react";
 import { default as isEqual } from "lodash/isEqual";
 import { twMerge } from "tailwind-merge";
+import { useShapes } from "@/hooks";
+import { getMergedShapes } from "@/hooks/shapes";
 import { store } from "@/store";
 import { setCursor } from "@/store/reducers/editor";
+import { ISTKProps } from "@/types";
 import { fallible } from "@/utils";
 import { resizableRectangle, shapeSize, shapeStrokeWidth } from "../../workspace/elements/shape";
-import { shapeList } from "./shape-list";
 
 const CursorShape = (Shape) => {
   const icon = (props) => (
@@ -25,7 +27,7 @@ const CursorShape = (Shape) => {
   return icon;
 };
 
-const Controls = () => {
+const Controls = ({ options }: Pick<ISTKProps, "options">) => {
   const [selectedIndex, setSelectedIndex] = useState(0);
 
   const onShapeClick = useCallback((shape, i) => {
@@ -35,9 +37,11 @@ const Controls = () => {
     });
   }, []);
 
+  const shapes = useShapes({ options });
+
   return (
     <div className="w-full grid grid-cols-5 gap-4">
-      {shapeList.map((Shape, i) => (
+      {shapes.map((Shape, i) => (
         <div
           key={i}
           className={twMerge(
@@ -53,9 +57,9 @@ const Controls = () => {
   );
 };
 
-export const selectFirstShape = () =>
+export const selectFirstShape = ({ options }: Pick<ISTKProps, "options">) =>
   fallible(() => {
-    store.dispatch(setCursor(CursorShape(shapeList[0])));
+    store.dispatch(setCursor(CursorShape(getMergedShapes(options)[0])));
   });
 
 const ShapeControls = memo(Controls, isEqual);

src/components/toolbar/index.tsx

@@ -66,7 +66,7 @@ const ToolBar: React.FC<ISTKProps> = (props) => {
     store.dispatch(selectTool(tool));
     if ([Tool.Image, Tool.Shape].includes(tool)) {
       store.dispatch(showControls());
-      if (tool === Tool.Shape) selectFirstShape();
+      if (tool === Tool.Shape) selectFirstShape({ options: props.options });
     }
     if (tool !== Tool.Pen && selectedPolylineId) {
       store.dispatch(setSelectedPolylineId(null));

src/components/workspace/elements/shape.tsx

@@ -1,7 +1,7 @@
 import { forwardRef } from "react";
 import { twMerge } from "tailwind-merge";
-import { shapes } from "@/components/controls/shapes/shape-list";
 import { dataAttributes } from "@/constants";
+import { useShapeMap } from "@/hooks";
 import { ISTKProps, IShape } from "@/types";
 
 export const shapeSize = 50;
@@ -44,6 +44,7 @@ const Shape: React.FC<IShapeProps> = forwardRef(
     },
     ref: any
   ) => {
+    const shapes = useShapeMap({ options: consumer.options });
     if (name === "RectangleHorizontal") {
       width ??= resizableRectangle.width;
       height ??= resizableRectangle.height;

src/hooks/index.ts

@@ -5,3 +5,4 @@ export { default as useSkipFirstRender } from "./skip-first-render";
 export { default as useToast } from "./toast";
 
 export * from "./events";
+export * from "./shapes";

src/hooks/shapes.ts

@@ -0,0 +1,27 @@
+import { useMemo } from "react";
+import { shapeList } from "@/components/controls/shapes/shape-list";
+import { ISTKProps } from "@/types";
+
+export const getMergedShapes = (options: ISTKProps["options"]) => {
+  if (!options?.shapes) return shapeList;
+  if (options?.shapes.icons.length === 0) return shapeList;
+  if (options?.shapes.overrideDefaultIconset) return options.shapes.icons;
+  return [...shapeList, ...options.shapes.icons];
+};
+
+export const useShapes = ({ options }: Pick<ISTKProps, "options">) => {
+  return useMemo(() => {
+    return getMergedShapes(options);
+  }, [options?.shapes]);
+};
+
+export const useShapeMap = ({ options }: Pick<ISTKProps, "options">) => {
+  return useMemo(
+    () =>
+      getMergedShapes(options).reduce((acc, shape) => {
+        acc[shape.displayName] = shape;
+        return acc;
+      }, {}),
+    [options?.shapes]
+  );
+};

src/types/index.ts

@@ -88,6 +88,10 @@ export interface ISTKProps {
     /** Disables category deletion if there are reserved seats falling under the category */
     disableCategoryDeleteIfReserved?: boolean;
     disableSectionDelete?: boolean;
+    shapes?: {
+      icons: React.FC<any>[];
+      overrideDefaultIconset?: boolean;
+    };
   };
   plugins?: IPlugins;
 }