drawing-board-service/src/core/components/icon/temp-icon.vue

<template>
  <v-group :config="groupConfig" v-if="groupConfig && svg" ref="shape">
    <v-group :config="initDecMat" name="rep-position">
      <v-rect :config="rectConfig" name="repShape" />
      <Path
        v-for="config in pathConfigs"
        :config="(config as any)"
        :svg="svg"
        :mat="mat"
      />
      <!-- <v-path v-for="config in pathConfigs" :config="config" name="icon-path" /> -->
    </v-group>
  </v-group>
</template>

<script lang="ts" setup>
import { defaultStyle, IconData } from "./icon.ts";
import { computed, ref, watch } from "vue";
import { getSvgContent, parseSvgContent, SVGParseResult } from "@/utils/resource.ts";
import { Group } from "konva/lib/Group";
import { DC } from "@/deconstruction.js";
import { Transform } from "konva/lib/Util";
import { useStore } from "@/core/store/index.ts";
import { useHistory } from "@/core/hook/use-history.ts";
import Path from "./temp-path.vue";

const props = defineProps<{ data: IconData; addMode?: boolean }>();
const svg = ref<SVGParseResult | null>(null);
const shape = ref<DC<Group>>();
const data = computed(() => ({ ...defaultStyle, ...props.data }));

defineExpose({
  get shape() {
    return shape.value;
  },
});

const store = useStore();
const history = useHistory();
watch(
  () => data.value.url,
  async (url) => {
    svg.value = null;
    const svgContent = await getSvgContent(url);
    const content = parseSvgContent(svgContent);
    if (content.paths.length === 0) {
      svg.value = null;
      history.preventTrack(() => store.delItem("icon", props.data.id));
    } else {
      svg.value = content;
    }
  },
  { immediate: true }
);

const scale = computed(() => {
  if (!svg.value) return null;

  let w = data.value.width;
  let h = data.value.height;
  w = w || svg.value.width || 0;
  h = h || svg.value.height || 0;

  const scale = {
    x: w / svg.value.width,
    y: h / svg.value.height,
  };
  return scale;
});

const pathConfigs = computed(() => {
  if (!svg.value) return [];
  return svg.value.paths.map((path) => ({
    ...path,
    ...data.value,
    id: undefined,
    zIndex: undefined,
    offset: { x: svg.value!.x, y: svg.value!.y },
  }));
});
const initDecMat = computed(() => {
  if (!svg.value || !scale.value) return;
  return new Transform()
    .scale(scale.value.x, scale.value.y)
    .multiply(new Transform().translate(-svg.value.width / 2, -svg.value.height / 2))
    .decompose();
});

const mat = computed(() => new Transform(data.value.mat));
const groupConfig = computed(() => {
  return {
    ...mat.value.decompose(),
    zIndex: undefined,
    listening: data.value.listening,
    id: data.value.id,
    opacity: props.addMode ? 0.3 : 1,
  };
});

const rectConfig = computed(() => {
  if (!svg.value) return null;
  return {
    fill: data.value.coverFill,
    id: "rep",
    stroke: data.value.coverStroke,
    opacity: data.value.coverOpcatiy,
    strokeWidth: data.value.coverStrokeWidth,
    width: svg.value.width,
    height: svg.value.height,
  };
});
</script>