sl-sfy-safety/src/views/page-config/stores/useMapEditor.ts

import { ref } from 'vue';
import { defineStore } from 'pinia';
import { WorkShopInfoItem } from '@/api/scene/scene';
import { cloneDeep } from 'lodash-es';
import { useGlobSetting } from '@/hooks/setting';
import safeParse from '@/utils/safeParse';
import urlJoin from 'url-join';
import emptyImg from '@/assets/images/table/table-empty.png';

export enum LabelPositionEnum {
  LEFT = 'left',
  RIGHT = 'right',
  TOP = 'top',
}

export type EditStyle = {
  x: number;
  y: number;
  scale: number;
  thumbnail?: string;
  bgColor: string;
  fontSize: number;
  fontColor: string;
  posType: LabelPositionEnum;
};

export type MapWorkShopInfoItem = WorkShopInfoItem & EditStyle;

export const useMapEditor = defineStore('home-map-ediotr', () => {
  const globSetting = useGlobSetting();

  const bgImg = ref('');
  const mapWidth = ref(0);
  const mapHeight = ref(0);
  const addedShops = ref<MapWorkShopInfoItem[]>([]);
  const showShops = ref<MapWorkShopInfoItem[]>([]);
  const activeShopId = ref<number>();

  /** konva elements refs */
  const bgImage = ref<HTMLImageElement>(new Image());

  const addBg = () => {
    const imgUrl = urlJoin(globSetting.imgUrl!, bgImg.value);
    console.log(imgUrl);

    const tempImg = new Image();
    tempImg.onload = () => {
      mapWidth.value = tempImg.width;
      mapHeight.value = tempImg.height;
      bgImage.value = tempImg;
    };
    tempImg.src = imgUrl;
  };

  const addShop = (shop: MapWorkShopInfoItem) => {
    activeShopId.value = shop.id;
    addedShops.value.push(cloneDeep(shop));
    showShops.value.push(cloneDeep(shop));
    console.log('showShops.value', showShops.value);
  };

  const calcLayout = (json: string) => {
    const mapJson = safeParse(json);
    const mapData = mapJson.children[0].children;
    const layout = {
      bgInfo: {
        width: mapWidth.value,
        height: mapHeight.value,
        img: bgImg.value,
      },
      shopList: addedShops.value.map((shop) => {
        const mapAttr = mapData.find((item) => item.id === shop.id + '')!.attrs;
        const temp = cloneDeep(shop) as any;
        delete temp.children;
        temp.x = mapAttr.x;
        temp.y = mapAttr.y;
        temp.scale = mapAttr.scaleX || 1;
        return temp;
      }),
    };

    return JSON.stringify(layout);
  };

  const createMap = (layout) => {
    bgImg.value = layout.bgInfo.img;
    mapWidth.value = layout.bgInfo.width;
    mapHeight.value = layout.bgInfo.height;
    addedShops.value = cloneDeep(layout.shopList);
    showShops.value = cloneDeep(layout.shopList);
  };

  const deleteShop = () => {
    addedShops.value = addedShops.value.filter((item) => item.id !== activeShopId.value);
    showShops.value = showShops.value.filter((item) => item.id !== activeShopId.value);
    activeShopId.value = undefined;
  };

  const resetMap = () => {
    bgImg.value = '';
    mapWidth.value = 0;
    mapHeight.value = 0;
    addedShops.value = [];
    showShops.value = [];
    activeShopId.value = undefined;
  };

  return {
    bgImg,
    mapWidth,
    mapHeight,
    addedShops,
    showShops,
    activeShopId,
    bgImage,
    addShop,
    addBg,
    calcLayout,
    createMap,
    deleteShop,
    resetMap,
  };
});

export default useMapEditor;