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

import { Cell } from "@antv/x6";
import { useState } from "react";

interface PageSettings {
  // 背景颜色
  backgroundColor: string;
  // 宽
  width: number;
  // 高
  height: number;
  // 显示网格
  grid: boolean;
  // 网格大小
  gridSize: number;
  // 显示跨线
  jumpover: boolean;
  // 显示打印分割线
  printLine: boolean;
  // 显示水印
  watermark: boolean;
  // 水印文字
  watermarkText: string;
}
export default function appModel() {
  const [projectInfo, setProjectInfo] = useState({
    name: "新建流程图",
    desc: "",
    version: "",
    author: "",
  });
  // 隐藏/显示右侧面板
  const [showRightPanel, setShowRightPanel] = useState(false);
  const [pageState, setPageState] = useState<PageSettings>({
    backgroundColor: "transparent",
    width: 0,
    height: 0,
    grid: true,
    gridSize: 15,
    jumpover: false,
    printLine: false,
    watermark: false,
    watermarkText: "沙鲁低码平台"
  });


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

  const [enableFormatBrush, setEnableFormatBrush] = useState(false);
  const [formatBrushStyle, setFormatBrusStyle] = useState();

  // 收折右侧样式面板
  const toggleRightPanel = () => {
    setShowRightPanel(!showRightPanel);
  }
  // 处理页面设置
  const onChangePageSettings = (key: keyof PageSettings, value: any) => {
    console.log(key, value)
    setPageState((state) => {
      return {
        ...state,
        [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;
    })
  }

  // 开启格式刷
  const toggleFormatBrush = (cell?: Cell) => {
    setEnableFormatBrush((state) => {
      if(state) {
        const data = cell?.getData();
        setFormatBrusStyle(data);
      } else {
        setFormatBrusStyle(undefined);
      }
      return !state;
    })
  }

  return {
    showRightPanel,
    toggleRightPanel,
    pageState,
    onChangePageSettings,
    historyColor,
    addHistoryCoolor,
    enableFormatBrush,
    toggleFormatBrush,
    projectInfo,
    setProjectInfo,
  }
}