traffic-laser/src/views/graphic/menus.ts

import { uiType, UIType, graphicState } from "@/hook/useGraphic";
import {
  findMenuByAttr,
  generateByMenus as generateByMenusRaw,
  generateMixMenus as generateMixMenusRaw,
} from "@/utils/menus";
import Message from "@/components/base/components/message/message.vue";
import RoadStructure from "@/graphic/enum/RoadStructure";
import RoadTemplate from "@/graphic/enum/RoadTemplate";
import { computed } from "vue";
import { mount } from "@/components/base/utils/componentHelper";
import Setting from "@/views/graphic/setting.vue";

export enum Mode {
  Road,
  Photo,
}

export const UITypeExtend = {
  structure: "structure",
  template: "template",
  measure: "measure",
  road: "__road",
  image: "__image",
  line: "__line",
  photo: "photo",
  setup: "setup",
  lineType: "lineType",
  width: "width",
  lock: "lock",
  basemap: "Basemap",
};

export type MenuRaw = {
  key: string;
  text: string;
  onClick?: (data: MenuRaw) => void;
  icon?: string;
  children?: MenusRaw;
  extend?: MenusRaw;
};
export type MenusRaw = Array<MenuRaw>;

export const structureMenusRaw = [
  { key: RoadStructure.BranchRoad, icon: "jg_zl-1", text: "支路" },
  { key: RoadStructure.NarrowRoad, icon: "jg_zl", text: "窄路" },
  { key: RoadStructure.ShoulderRoad, icon: "jg_lj", text: "路肩" },
  { key: RoadStructure.ZebraCrossing, icon: "jg_bmx", text: "斑马线" },
  { key: RoadStructure.Bridge, icon: "jg_q", text: "桥" },
  { key: RoadStructure.Tunnel, icon: "jg_sd", text: "隧道" },
  { key: RoadStructure.Sidewalk, icon: "jg_rxd", text: "人行道" },
  { key: RoadStructure.ConstructionSection, icon: "jg_sgld", text: "施工路段" },
  { key: RoadStructure.Downhill, icon: "jg_road_u", text: "下坡" },
  { key: RoadStructure.Uphill, icon: "jg_sp", text: "上坡" },
  { key: RoadStructure.RoadsideGutter, icon: "jg_lpsg", text: "路边水沟" },
  { key: RoadStructure.RoadsAndRails, icon: "jg_dltlpjk", text: "道路与铁..." },
  { key: RoadStructure.FireHydrantWell, icon: "jg_xfsj", text: "消火栓井" },
  { key: RoadStructure.Gullies, icon: "jg_ysk", text: "雨水口" },
  { key: RoadStructure.RoadPotholes, icon: "jg_lmak", text: "路面凹坑" },
  { key: RoadStructure.ProtrudingRoad, icon: "jg_lmtcbf", text: "路面凸出..." },
  { key: RoadStructure.WaterOnTheRoad, icon: "jg_lmjs", text: "路面积水" },
];

export const templateMenusRaw = [
  { key: RoadTemplate.SBend, icon: "mb_sxwl", text: "s型弯路" },
  { key: RoadTemplate.TJunction, icon: "mb_dzlk", text: "丁字路口" },
  { key: RoadTemplate.FiveForks, icon: "mb_wclk", text: "五岔路口" },
  { key: RoadTemplate.ExitRamp, icon: "mb_ckzd", text: "出口匝道" },
  { key: RoadTemplate.Crossroads, icon: "mb_szlk", text: "十字路口" },
  {
    key: RoadTemplate.NationalHighwayShoulder,
    icon: "mb_gdlj",
    text: "国道（路肩）",
  },
  { key: RoadTemplate.IndoorSection, icon: "mb_snld", text: "室内路段" },
  { key: RoadTemplate.Bend, icon: "mb_wd", text: "弯道" },
  { key: RoadTemplate.SharpCurve, icon: "mb_jzwd", text: "急转弯道" },
  { key: RoadTemplate.SixForkIntersection, icon: "mb_lclk", text: "六岔路口" },
  // { key: RoadTemplate.WideNarrowRoad, icon: 'mb_kbzld', text: '宽变窄路段' },
  { key: RoadTemplate.Corner, icon: "mb_zjwd", text: "直角弯道" },
  { key: RoadTemplate.ImportSmashedRoad, icon: "mb_jkzd", text: "进口匝道" },
  {
    key: RoadTemplate.HighSpeedTollBooth,
    icon: "mb_gssfz",
    text: "高速收费站",
  },
  // { key: RoadTemplate.HighSpeedHarbor, icon: 'mb_gsgw', text: '高速港湾' },
  { key: RoadTemplate.HighwaySection, icon: "mb_gsld", text: "高速路段" },
];

export const measureMenusRaw = [
  {
    key: UIType.BaseLine,
    icon: "line",
    text: "基准线",
    disabled: computed(() => graphicState.value.existsBaseLine),
  },
  { key: UIType.BasePoint, text: "基准点", icon: "point", border: true },
  // {
  //   key: UIType.NormalLocationMode,
  //   text: '垂线定位',
  //   icon: 'measure_f',
  //   onClick(data) {
  //     if (graphicState.value.canVerticalMeasure) {
  //       uiType.change(data.key);
  //     } else {
  //       Message.success({ msg: '请添加基准线后再执行此操作', time: 3000 });
  //     }
  //   },
  // },
  {
    desc: "一键测量",
    key: UIType.AngleLocationMode,
    text: "直角定位法",
    icon: "measure_r",
    // onClick(data) {
    //   console.error(graphicState.value.canAllLocationMode);
    //   if (graphicState.value.canAllLocationMode) {
    //     uiType.change(data.key);
    //   } else {
    //     Message.success({
    //       msg: "请添加基准线及基准点后再执行此操作",
    //       time: 3000,
    //     });
    //   }
    // },
  },
  // {
  //   key: UIType.AllLocationMode,
  //   text: "综合定位法",
  //   icon: "measure_c",
  //   // onClick(data) {
  //   //   if (graphicState.value.canAllLocationMode) {
  //   //     uiType.change(data.key);
  //   //   } else {
  //   //     Message.success({
  //   //       msg: "请添加基准线及基准点后再执行此操作",
  //   //       time: 3000,
  //   //     });
  //   //   }
  //   // },
  //   border: true,
  // },
  {
    key: UIType.FreeMeasureLine,
    text: "自由测量",
    icon: "measure_free",
  },
];

export const mainMenusRaw: MenusRaw = [
  {
    key: UIType.Line,
    text: "画线",
    icon: "line_d",
    // children: [
    //   {
    //     key: UIType.Line,
    //     text: "直线",
    //     icon: "line_d",
    //   },
    //   {
    //     key: UIType.CurveLine,
    //     text: "曲线",
    //     icon: "line_d",
    //   }
    // ]
  },
  {
    key: UITypeExtend.road,
    text: "道路",
    icon: "road",
    children: [
      { key: UIType.OneEdgeOneLanRoad, icon: "road_ss", text: "" },
      { key: UIType.OneEdgeTwoLanRoad, icon: "road_sd", text: "" },
      { key: UIType.OneEdgeThreeLanRoad, icon: "road_st", text: "" },
      { key: UIType.TwoEdgeOneLanRoad, icon: "road_ds", text: "" },
      { key: UIType.TwoEdgeTwoLanRoad, icon: "road_dd", text: "" },
      { key: UIType.TwoEdgeThreeLanRoad, icon: "road_dt", text: "" },
      { key: UIType.CurveRoad, icon: "road_wl", text: "" },
      // { key: UITypeExtend.structure, icon: 'r_template', text: '道路结构', extend: structureMenusRaw },
      {
        key: UITypeExtend.template,
        icon: "r_structure",
        text: "道路模板",
        extend: templateMenusRaw,
      },
    ],
  },
  {
    key: UITypeExtend.image,
    text: "图例",
    icon: "legend",
    // children: [
    //   { key: UIType.BusPlane, text: "客车平面图" }
    // ]
  },
  { key: UIType.FixPoint, text: "固定点", icon: "point_a" },
  {
    key: UITypeExtend.measure,
    text: "测量",
    children: measureMenusRaw,
    icon: "measure",
  },
  { key: UIType.Text, text: "文字", icon: "text" },
  { key: UIType.Magnifier, text: "放大镜", icon: "magnify_g" },

  // { key: UITypeExtend.photo, text: "照片库" },
  {
    key: UITypeExtend.setup,
    icon: "setting",
    text: "设置",
    onClick() {
      const { destroy } = mount(Setting, {
        props: {
          close() {
            destroy();
          },
        },
      } as any);
    },
  },
];

export const photoMenusRaw: MenusRaw = [
  { key: UIType.Text, text: "文字", icon: "text" },
  { key: UIType.Circle, text: "圈出", icon: "circle" },
  { key: UIType.SingleArrow, text: "箭头", icon: "arrows" },
  { key: UIType.Magnifier, text: "放大镜", icon: "magnify_g" },
];

export const headActionMenuRaw = [
  { key: UIType.GoBack, text: "回退", icon: "backout" },
  { key: UIType.GoAhead, text: "前进", icon: "redo" },
  { key: UIType.Clear, text: "清除", icon: "reset" },
  { key: UIType.BackImageChange, text: "底图开关", icon: "map" },
];

export const focusMenuRaw: { [key in string]: MenusRaw } = {};

export const generateByMenus = <T extends MenuRaw>(
  generateFn: (men: MenuRaw) => T,
  mainMenus: MenusRaw = mainMenusRaw
) => generateByMenusRaw(generateFn, mainMenus);

export const findMainMenuByAttr = (
  value: MenusRaw,
  attr = "extend" as const,
  mainMenus = mainMenusRaw
) => findMenuByAttr(value, attr, mainMenus);

export const generateMixMenus = <T extends {}, K extends keyof MenuRaw>(
  childKey: K,
  generateFn: (men: MenuRaw) => T,
  mainMenus: MenusRaw = mainMenusRaw
) =>
  generateMixMenusRaw(
    childKey,
    generateFn,
    mainMenus,
    (menu) => {
      if (menu.onClick) {
        menu.onClick(menu);
      } else {
        if (menu.key === uiType.current) {
          uiType.change(null);
        } else {
          uiType.change(menu.key as any);
        }
      }
    },
    () => uiType.current
  );