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

import { computed, Ref, watch } from "vue";
import { PropertyDescribes } from "../html-mount/propertys";
import {
  getFixedStrokeWidthProperty,
  sysDescribes,
} from "../html-mount/propertys/describes";
import { useStore } from "../store";
import { Proportion } from "../store/store";

export const useInstallStrokeWidthDescribe = (
  describes: Ref<PropertyDescribes>,
  shape: Ref<{ strokeWidth?: number; fixed?: boolean }>,
  options: number[] = [],
  defProportion?: Proportion,
  fixed = false,
  label?: string
) => {
  const store = useStore();
  const proportion = computed(() => {
    return defProportion || { ...store.config.strokeProportion };
  });

  watch(
    () => [fixed || options.length > 0, proportion.value] as const,
    ([fixed, proportion]) => {
      if (!describes.value.strokeWidth) return;
      if (fixed) {
        const property = getFixedStrokeWidthProperty(shape);
        property.props.options = options.map((size) => ({
          label: `${size} ${proportion.unit}`,
          value: size / proportion.scale,
        }));
        if (label) {
          property.label = label
        }
        describes.value.strokeWidth = property as PropertyDescribes[string];
      } else {
        describes.value.strokeWidth = sysDescribes.strokeWidth as any;
      }
    },
    { immediate: true, flush: 'sync' }
  );
};