审查视图

app/components/mind/mind-utils.ts 1.2 KB
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53
import { MindElixirData } from "mind-elixir";
import { useState, useMemo } from "react";
import type { ColorPickerProps, GetProp } from "antd";

export const INITIAL_DATA: MindElixirData = {
  nodeData: {
    id: "root",
    topic: "中心主题",
  },
};

export const LOADING_DATA: MindElixirData = {
  nodeData: {
    id: "root",
    topic: "生成中....",
  },
};

export const FONT_SIZE_OPTIONS = [
  { value: "10", label: "10" },
  { value: "12", label: "12" },
  { value: "16", label: "16" },
  { value: "18", label: "18" },
  { value: "24", label: "24" },
  { value: "32", label: "32" },
  { value: "48", label: "48" },
];

export const EXPORT_OPTIONS = [
  { value: "png", label: "导出为PNG" },
  { value: "svg", label: "导出为SVG" },
];

type Color = Extract<
  GetProp<ColorPickerProps, "value">,
  string | { cleared: any }
>;

export const useColor = (initialColor: string) => {
  const [color, setColor] = useState<Color>(initialColor);

  const hexColor = useMemo(() => {
    if (typeof color === "string") {
      return color;
    }
    if (color && "toHexString" in color) {
      return color.toHexString();
    }
    return initialColor;
  }, [color, initialColor]);

  return [hexColor, setColor] as const;
};