visualization-design/src/views/components/Graphics.vue

<template>
  <div class="graphics">
    <div class="input-search">
      <div class="btn">
        <t-icon name="search" />
      </div>
      <t-input placeholder="搜索" />
    </div>
    <div class="groups">
      <div class="sub-groups">
        <div
          v-for="group in groups"
          :class="group.name === activeGroup ? 'active' : ''"
          @click="groupChange(group.name)"
        >
          <t-icon :name="group.icon" />
          {{ group.name }}
        </div>
      </div>
      <div class="list" :class="showType === 1 ? 'two-list' : ''">
        <t-collapse v-model:value="panelValue" @change="handlePanelChange">
          <t-collapse-panel :header="item.name" v-for="item in showList">
            <div
              class="show-item"
              v-for="iItem in item.list"
              :draggable="true"
              @dragstart="dragStart($event, iItem)"
              @drag="drag($event, iItem)"
              @dragend="dragEnd()"
            >
              <t-image v-if="iItem.image" :src="iItem.image" fit="cover" />
              <div class="svg-box" v-else-if="iItem.svg" v-html="iItem.svg"></div>
              <!-- <i v-else class="t-icon" :class="iItem.icon"></i> -->
              <svg v-else class="l-icon" aria-hidden="true">
                <use :xlink:href="'#' + iItem.icon"></use>
              </svg>
              <p :title="iItem.name">{{ iItem.name }}</p>
            </div>
          </t-collapse-panel>
        </t-collapse>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { onMounted, onUnmounted, reactive, ref, watch } from "vue";
import { shapeLib, chartLib, formLib } from "@/services/defaults";
import { getPngFolders, getPngs } from "@/services/png";
import { getIconFolders, getIcons } from "@/services/icons";
import { getComponents, getComponentsList } from "@/services/api";
import { convertPen } from "@/services/upgrade";
import { deepClone } from "@meta2d/core";
import { isGif } from "@/services/utils";

const activeGroup = ref("图形");
const groups = reactive([
  {
    icon: "desktop",
    name: "场景",
    key: "",
  },
  {
    icon: "root-list",
    name: "模板",
    key: "",
  },
  {
    icon: "chart",
    name: "图表",
    key: "chart",
  },
  {
    icon: "control-platform",
    name: "控件",
    key: "",
  },
  {
    icon: "image",
    name: "素材",
    key: "",
  },
  {
    icon: "file-icon",
    name: "图标",
    key: "",
  },
  {
    icon: "chart-bubble",
    name: "图形",
    key: "shape",
  },
  {
    icon: "app",
    name: "我的",
    key: "",
  },
]);

const getSceneLib = () => {};

const getCommponentsLib = async () => {
  const data = {
    projection: {
      image: 1,
      _id: 1,
      name: 1,
      folder: 1,
      component:1
    },
  };
  const config = {
    params: {
      current: 1,
      pageSize: 100,
    },
  };
  const res: any = await getComponentsList(data, config);
  const folderMap: any = {};
  res.list?.map((item: any) => {
    if (!folderMap[item.folder]) {
      folderMap[item.folder] = [];
    }

    folderMap[item.folder].push(item);
  });
  let list = [];
  for (let key in folderMap) {
    list.push({
      name: key === "undefined" ? "未分类" : key,
      show: true,
      list: folderMap[key],
    });
  }

  return list;
};

const getMaterialLib = async () => {
  const pngs = await getPngFolders();
  console.log("png", pngs);
  return pngs;
};
let materialLib: any[] = [];

const getIconsLib = async () => {
  const icons = await getIconFolders();
  console.log(icons);
  return icons;
};

let iconsLib: any[] = [];

const groupChange = async (name: string) => {
  panelValue.value = [];
  activeGroup.value = name;
  showType.value = 0;
  switch (name) {
    case "场景":
      showList.value = [];
      break;
    case "模版":
      showList.value = [];
      break;
    case "图表":
      showList.value = chartLib;
      break;
    case "控件":
      showList.value = formLib;
      break;
    case "素材":
      if (materialLib.length === 0) {
        materialLib = await getMaterialLib();
      }
      console.log(materialLib);
      showList.value = materialLib;
      break;
    case "图标":
      if (iconsLib.length === 0) {
        iconsLib = await getIconsLib();
      }
      showList.value = iconsLib;
      break;
    case "图形":
      showList.value = shapeLib;
      break;
    case "我的":
      showList.value = await getCommponentsLib();
      showType.value = 1;
      break;
  }
};

const showList = ref<any[]>([]);
const showType = ref(0);
const panelValue = ref([]);
const handlePanelChange = (e: any) => {
  console.log("e", e);
  // console.log("change", e,panelValue.value);
  // if (activeGroup.value === '素材') {
  //   const data:any = materialLib[e[0]];
  //   console.log("data", data.name);
  //   if (!data.list || data.list.length === 0) {
  //     data.list = getPngs(globalThis.folderJson?data.pinyin:data.name)
  //   }
  // }
};

watch(
  () => panelValue.value,
  async (newV: any[], oldV: any[]) => {
    console.log(newV, oldV);
    const newOpen: any = [];
    for (let v of newV) {
      !oldV.includes(v) && newOpen.push(v);
    }
    if (newOpen.length === 0) {
      return;
    }
    console.log(newOpen);
    if (activeGroup.value === "素材") {
      const data: any = materialLib[newOpen[0]];
      console.log("data", data,newOpen[0]);
      if (!data.list || data.list.length === 0) {
        data.list = await getPngs(
          globalThis.folderJson ? data.pinyin : data.name
        );
        console.log(materialLib);
        showList.value = deepClone(materialLib);
      }
    } else if (activeGroup.value === "图标") {
      const data: any = iconsLib[newOpen[0]];
      if (!data.list || data.list.length === 0) {
        data.list = await getIcons(
          globalThis.folderJson ? data.pinyin : data.name
        );
        showList.value = deepClone(iconsLib);
      }
    }
  }
);

const dragStart = async (event: DragEvent, item: any) => {
  // console.log('drag', item);
  console.log(event,item);

  if (!item || !event.dataTransfer) {
    return;
  }
  if (item._id && !item.componentDatas) {
    let res: any = await getComponents(item._id);
    item.component = true;
    item.componentDatas = res.componentDatas;
    item.componentData = res.componentData;
  }
  if (!item.data && !item.component && item.image) {
    let target: any = event.target;
    target.children[0] && (target = target.children[0].children[0]);
    // firefox naturalWidth svg 图片 可能是 0
    const normalWidth = target.naturalWidth || target.width;
    const normalHeight = target.naturalHeight || target.height;
    const [name, lockedOnCombine] = isGif(item.image)
      ? ["gif", 0]
      : ["image", undefined];
    event.dataTransfer.setData(
      "Meta2d",
      JSON.stringify({
        name,
        width: 100,
        height: 100 * (normalHeight / normalWidth),
        image: item.image,
        imageRatio: true,
        lockedOnCombine,
      })
    );
  } else if (item.component) {
    console.log("comp",item.componentDatas,item.componentData)
    if (item.componentData) {
      const pens = convertPen([item.componentData]);
      meta2d.canvas.addCaches = deepClone(pens);
    } else if (item.componentDatas) {
      console.log("进入")
      meta2d.canvas.addCaches = deepClone(item.componentDatas);
    }
  } else {
    event.dataTransfer.setData(
      "Meta2d",
      JSON.stringify(item.componentDatas || item.data)
    );
  }
  event.stopPropagation();
};

const drag = (event: DragEvent, item: any) => {};

const dragEnd = () => {};

const dragstart = (event: any) => {
  event.target.style.opacity = 0.5;
};

const dragend = (event: any) => {
  event.target.style.opacity = 1;
};

//获取所有图形库
const getGraphics = async () => {
  // if (!materialLib.length) {
  //   materialLib = await getPngFolders();
  // }
};

onMounted(() => {
  groupChange("图形");
  document.removeEventListener("dragstart", dragstart);
  document.removeEventListener("dragend", dragend);
});

onUnmounted(() => {
  document.addEventListener("dragstart", dragstart, false);
  document.addEventListener("dragend", dragend, false);
});
</script>
<style lang="postcss" scoped>
.graphics {
  display: flex;
  flex-direction: column;

  .input-search {
    flex-shrink: 0;
    height: 40px;
  }

  .groups {
    display: grid;
    grid-template-columns: 50px 1fr;
    border-top: 1px solid var(--color-background-input);
    flex-grow: 1;
    overflow-y: auto;
    font-size: 12px;

    .sub-groups {
      & > div {
        display: flex;
        flex-direction: column;
        align-items: center;
        padding: 16px 4px;
        line-height: 1;
        cursor: pointer;

        .t-icon {
          font-size: 20px;
          margin-bottom: 5px;
        }

        &:hover {
          color: var(--color-primary);
        }
      }

      .active {
        background-color: var(--color-background-active);
        color: var(--color-primary);
        border-left: 2px solid var(--color-primary);
      }
    }

    .list {
      overflow-y: auto;
      max-height: calc(100vh - 100px);
      :deep(.t-collapse) {
        border: 0px;
      }
      :deep(.t-collapse-panel__header) {
        border: 0px;
        font-size: 12px;
      }

      :deep(.t-collapse-panel__body) {
        border: 0px;
      }
      :deep(.t-collapse-panel__content) {
        background-color: var(--color-background-active);
        /* padding: 12px; */
        padding: 0px 4px;
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        grid-row-gap: 9px;
        /* grid-template-rows: 90px; */
        /* padding-bottom: 20px; */
      }
      .show-item {
        /* padding: 10px; */
        &:hover {
          cursor: pointer;
          color: var(--color-primary-hover);
          svg{
          color: var(--color-primary-hover);
          }
        }
        p {
          margin-bottom: 14px;
          text-align: center;
          font-size: 12px;
          height: 14px;
          line-height: 14px;
          overflow: hidden;
          text-overflow: ellipsis;
          display: -webkit-box;
          -webkit-line-clamp: 1;
          word-break: break-all;
          -webkit-box-orient: vertical;
        }
        .t-image__wrapper {
          /* margin: 10px 23px; */
          height: 32px;
          width: 32px;
          background: #fff0;
          margin-left: calc(50% - 16px);
          margin-top: 10px;
          margin-bottom: 10px;
          :deep(.t-image) {
            /* background-color: #fff; */
            border-radius: 2px;
          }
        }

        /* i {
          background-color: #fff;
          border-radius: 4px;
          height: 40px;
          width: 40px;
          margin: 10px;
        } */

        svg {
          color: var(--color);
          height: 32px;
          width: 100%;
          margin: 4px 0px;
        }

        .svg-box{
          height: 32px;
          width: 32px;
          margin-left: calc(50% - 16px);
          margin-top: 10px;
          margin-bottom: 10px;
          &:deep(svg){
            height: 100%;
            width: 100%;
            .cls-1{
              stroke: var(--color) !important;
            }
          }
        }
      }
    }

    .two-list {
      :deep(.t-collapse-panel__content) {
        padding: 8px;
        grid-template-columns: 116px 116px;
        grid-template-rows: 136px;
      }
      .show-item {
        p {
          margin-top: 10px;
          margin-bottom: 12px;
        }
        .t-image__wrapper {
          width: 88px;
          height: 88px;
          margin-left: 14px;
        }
      }
    }
  }
}
</style>