Function DrawingColorLine

app/src/components/toolbar-content.tsx:95–132

()

}

const DrawingColorLine: React.FC = () => {
  const [userColorList, setUserColorList] = useState<Color[]>([]);
  const [currentDrawColor, setCurrentDrawColor] = useState<Color>(Color.Transparent);

  useEffect(() => {
    ColorManager.getUserEntityFillColors().then((colors) => {
      setUserColorList(colors);
    });
    setCurrentDrawColor(new Color(...Settings.autoFillPenStrokeColor));
  }, []);

  const handleChangeColor = (color: Color) => {
    Settings.autoFillPenStrokeColor = color.toArray();
    setCurrentDrawColor(color.clone());
  };

  return (
    <div className="flex max-w-64 overflow-x-auto">
      {userColorList.map((color) => {
        return (
          <div
            className={cn(
              "outline-accent-foreground size-4 cursor-pointer hover:outline-3 hover:-outline-offset-3",
              currentDrawColor.equals(color) && "outline-2 -outline-offset-2",
            )}
            key={color.toString()}
            style={{
              backgroundColor: `rgba(${color.r}, ${color.g}, ${color.b}, ${color.a})`,
            }}
            onClick={() => {
              handleChangeColor(color);
            }}
          />
        );
      })}
    </div>
  );
};