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 { resolve } from 'path';
// 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;
  scaleX: number;
  scaleY: 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 clearBg = () => {
    bgImage.value.src = '';
  };

  const addBg = () => {
    return new Promise((resolve) => {
      const imgUrl = urlJoin(globSetting.imgUrl!, bgImg.value);

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

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

  const calcLayout = (json: string) => {
    const mapJson = safeParse(json);
    const mapData = mapJson.children[0].children.filter((item) => item.className === 'Group');

    const shopListAdded = addedShops.value.map((item, index) => {
      item.x = mapData[index].attrs.x;
      item.y = mapData[index].attrs.y;
      item.scaleX = mapData[index].attrs.scaleX || 1;
      item.scaleY = mapData[index].attrs.scaleY || 1;
      return item;
    });
    const layout = {
      bgInfo: {
        width: mapWidth.value,
        height: mapHeight.value,
        img: bgImg.value,
      },
      shopList: shopListAdded,
    };

    return JSON.stringify(layout);
  };

  const createMap = (layout) => {
    bgImg.value = layout.bgInfo.img;
    addBg().then(() => {
      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 !== Number(activeShopId.value));
    showShops.value = showShops.value.filter((item) => item.id !== Number(activeShopId.value));
    activeShopId.value = undefined;
  };

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

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

export default useMapEditor;