drawing-board-service/src/core/hook/use-config.ts

import { computed, reactive } from "vue";
import { installGlobalVar } from "./use-global-vars";
import { useGlobalResize } from "./use-event";
import { Size } from "@/utils/math";

export type Border = {
  color?: string;
  opacity: number;
  margin: number[] | number;
  lineWidth: number;
};

const defLableLineConfig = {
  stroke: "#000",
  strokeWidth: 1,
  opacity: 1,
  strokeScaleEnabled: false,
  shadowColor: "#fff",
  shadowBlur: 3,
  shadowOffset: { x: 0, y: 0 },
  shadowOpacity: 1,
  splitOffset: 80, 
  showOffset: 20, 
  fontSize: 12,
  splitWidth: 10,
  type: 'fix',
  showShapeTypes: ['line']
}
export type Config = {
  showGrid: boolean;
  showLabelLine: boolean;
  size: Size | null;
  back?: { color?: string; opacity: number };
  border?: Border | Border[];
  margin?: number | number[];
  showCompass: boolean
  showComponentSize: boolean
  labelLineConfig: typeof defLableLineConfig,
  serailAutoGenTable: boolean
};

export const defConfig: Config = {
  showGrid: true,
  showLabelLine: true,
  size: null,
  showCompass: false,
  showComponentSize: true,
  labelLineConfig: defLableLineConfig,
  serailAutoGenTable: true
};

export const useConfig = installGlobalVar(() => {
  const { setFixSize, size } = useGlobalResize();
  return reactive({
    ...JSON.parse(JSON.stringify(defConfig)),
    size: computed({
      get: () => size.value!,
      set: (size: Size | null) => {
        setFixSize(size)
      },
    }),
  }) as Config ;
});