shalu-system-designer/apps/designer/src/hooks/useShapeProps.tsx

import { ImageFillType, LineType } from "@/enum";
import { uniqueId } from "lodash-es";

type PropType = {
  fill: {
    fillType: "color" | "gradient" | "image";
    color1: string;
    color2: string;
    gradientType: "linear" | "radial";
    gradientValue: number;
    imageUrl: string;
    objectFit: ImageFillType.Fill;
  };
  size: {
    width: number;
    height: number;
  };
  stroke: {
    type: "solid" | "dashed" | "dotted" | "dashdot";
    color: string;
    width: number;
  };
};
export function useShapeProps(
  fill: PropType["fill"],
  size: PropType["size"],
  stroke: PropType["stroke"]
) {
  const {
    fillType,
    color1,
    color2,
    gradientType,
    gradientValue,
    objectFit,
    imageUrl,
  } = fill;
  const { width, height } = size;
  const id = uniqueId("fill_");
  const fillContent =
    fillType === "color"
      ? color1
      : fillType === "gradient"
        ? `url(#${id})`
        : fillType === "image"
          ? `url(#${objectFit})`
          : "";

  const defsContent = (
    <>
      {gradientType === "linear" && (
        <linearGradient
          id={id}
          gradientTransform={`rotate(${gradientValue})`}
        >
          <stop offset="0%" stopColor={color1} />
          <stop offset="100%" stopColor={color2} />
        </linearGradient>
      )}
      {gradientType === "radial" && (
        <radialGradient
          id={id}
          cx="50%"
          cy="50%"
          r={gradientValue + "%"}
          fx="50%"
          fy="50%"
        >
          <stop offset="0%" stopColor={color1} />
          <stop offset="100%" stopColor={color2} />
        </radialGradient>
      )}
      {fillType === "image" && (
        <pattern id={id} patternUnits="userSpaceOnUse" width="4" height="4">
          <image href={imageUrl} x="0" y="0" width="4" height="4"></image>
        </pattern>
      )}
    </>
  );

  const strokeDasharray  = LineType[stroke.type];

  return {
    strokeColor: stroke.color,
    strokeWidth: stroke.width,
    fillContent,
    defsContent,
    strokeDasharray
  };
}