shalu-system-designer/apps/designer/src/models/appModel.ts

import { Cell, EventArgs, Graph } from "@antv/x6";
import { useEffect, useRef, useState } from "react";
import { message } from "antd";
import brushImg from "@/assets/image/brush.svg"
import { cellStyle } from '@/types'
import { EditGraph } from "@/api/systemDesigner";

interface PageSettings {
  // 背景颜色
  backgroundColor: string;
  // 宽
  width: number;
  // 高
  height: number;
  // 显示网格
  grid: boolean;
  // 网格大小
  gridSize: number;
  // 显示跨线
  jumpOver: boolean;
  // 显示打印分割线
  printLine: boolean;
  // 显示水印
  showWatermark: boolean;
  // 水印文字
  watermarkText: string;
  // 主题风格
  theme: string;
}
export default function appModel() {
  // 隐藏/显示右侧面板
  const [showRightPanel, setShowRightPanel] = useState(true);
  // 格式刷启用
  const [enableFormatBrush, setEnableFormatBrush] = useState(false);
  // 格式刷样式
  const formatBrushStyle = useRef<cellStyle>();
  // 左侧面板激活
  const [leftPanelActiveKey, setLeftPanelActiveKey] = useState("1");
  // 历史记录
  const [showHistory, setShowHistory] = useState(false);
  // 激活AI对话 chat对话 creator创作
  const [activeAI, setActiveAI] = useState<'chat' | 'creator'>();
  // 右侧面板tab activeKey
  const [rightPanelTabActiveKey, setRightPanelTabActiveKey] = useState("1");
  // 流程图右侧面板宽度
  const [flowRightPanelWidth, setFlowRightPanelWidth] = useState(280);
  const [rightPanelOriginalWidth, setRightOriginalPanelWidth] = useState(280);
  // 思维导图右侧宽度
  const [mindmapRightPanelWidth, setMindMapRightPanelWidth] = useState(280);
  const graphRef = useRef<Graph>();
  const [pageState, setPageState] = useState<PageSettings>({
    backgroundColor: "transparent",
    width: 0,
    height: 0,
    grid: true,
    gridSize: 15,
    jumpOver: false,
    printLine: false,
    showWatermark: false,
    watermarkText: "沙鲁低码平台",
    theme: '1'
  });

  const [historyColor, setHistoryColor] = useState<string[]>([
    '#B0E38F',
    '#F19594',
    '#EC7270',
    '#996A99',
    '#4F374F',
    '#94E0E1',
    '#FBF1B8',
    '#E3F0E1',
    '#FDF8DC',
    '#569230',
  ]);

  // 收折右侧样式面板
  const toggleRightPanel = (show?: boolean) => {
    if(show !== undefined) setShowRightPanel(show);
    else setShowRightPanel(!showRightPanel);
  }
  // 处理页面设置
  const onChangePageSettings = (key: keyof PageSettings, value: any) => {
    setPageState((state) => {
      return {
        ...state,
        [key]: value
      }
    });
    if(sessionStorage.getItem("projectId")) {
      EditGraph({
        id: sessionStorage.getItem("projectId"),
        [key]: value
      });
    }
  }
  /**
   * 新增颜色记录
   * 添加时，将移除最早的颜色
   * @param color 颜色
   */
  const addHistoryCoolor = (color: string) => {
    if( historyColor.includes(color)) return;
    setHistoryColor((state) => {
      const newState = [...state];
      newState.unshift(color);
      newState.pop();
      return newState;
    })
  }

  // 主题风格存入session其他地方使用
  useEffect(() => {
    sessionStorage.setItem("flow-theme-key", pageState.theme);
  }, [pageState.theme]);

  useEffect(() => {
    const graphRoot = document.querySelector(
      "#graph-container"
    ) as HTMLDivElement;
    const pageRoot = document.querySelector(
      "#flow_canvas_container"
    ) as HTMLDivElement;

    if(enableFormatBrush) {
      graphRoot && (graphRoot.style.cursor = `url(${brushImg}), auto`);
      pageRoot && (pageRoot.style.cursor = `url(${brushImg}), auto`);
    } else {
      graphRoot && (graphRoot.style.cursor = "default");
      pageRoot && (pageRoot.style.cursor = "default");
    }
  }, [enableFormatBrush]);

  const handleClick = (args: EventArgs & { cell: Cell }) => {
    // 取消格式刷
    if(!args?.cell || args?.cell?.data?.isPage) {
      formatBrushStyle.current = undefined;
      setEnableFormatBrush(false);
      graphRef.current?.off("cell:click", handleClick);
      graphRef.current?.off("blank:click", handleClick);
    } else {
      if(args.cell.data?.lock) return;
      // 应用格式刷
      const data = args.cell.data;
      args.cell.setData({
        text: formatBrushStyle.current?.text || data?.text,
        fill: formatBrushStyle.current?.fill || data?.fill,
        stroke: formatBrushStyle.current?.stroke || data?.stroke,
        opacity: formatBrushStyle.current?.opacity || data?.opacity
      })
    }
  };

  // 开启格式刷
  const toggleFormatBrush = (graph: Graph) => {
    graphRef.current = graph;
    const cell = graph?.getSelectedCells()?.find(item => item.isNode());
    setEnableFormatBrush((state) => {
      if(!state) {
        const data = cell?.getData();
        formatBrushStyle.current = data;
        message.info('格式刷已开启');
        graph.on("cell:click", handleClick);
        graph.on("blank:click", handleClick);
      } else {
        formatBrushStyle.current = undefined;
        graph.off("cell:click", handleClick);
        graph.off("blank:click", handleClick);
      }
      return !state;
    });
  }

  document.addEventListener("keydown", (e) => {
    if (e.key === "Escape") {
      setEnableFormatBrush(false);
    }
  });

  return {
    showRightPanel,
    toggleRightPanel,
    pageState,
    setPageState,
    onChangePageSettings,
    historyColor,
    addHistoryCoolor,
    enableFormatBrush,
    toggleFormatBrush,
    rightPanelTabActiveKey,
    setRightPanelTabActiveKey,
    leftPanelActiveKey,
    setLeftPanelActiveKey,
    showHistory,
    setShowHistory,
    activeAI,
    setActiveAI,
    flowRightPanelWidth,
    setFlowRightPanelWidth,
    mindmapRightPanelWidth,
    setMindMapRightPanelWidth,
    rightPanelOriginalWidth,
    setRightOriginalPanelWidth
  }
}