drawing-board-service/src/core/components/bg-image/bg-image.vue

<template>
  <TempImage :data="tData" :ref="(e: any) => shape = e?.shape" />
  <Operate :target="shape" :menus="operateMenus" />
</template>

<script lang="ts" setup>
import TempImage from "./temp-bg-image.vue";
import { BGImageData, getMouseStyle, defaultStyle } from "./index.ts";
import { useComponentStatus } from "@/core/hook/use-component.ts";
import { Operate } from "../../propertys/index.ts";
import { Transform } from "konva/lib/Util";

const props = defineProps<{ data: BGImageData }>();
const emit = defineEmits<{
  (e: "updateShape", value: BGImageData): void;
  (e: "addShape", value: BGImageData): void;
  (e: "delShape"): void;
}>();

const { shape, tData, operateMenus } = useComponentStatus({
  emit,
  props,
  getMouseStyle,
  defaultStyle,
  copyHandler(tf, data) {
    data.mat = tf.multiply(new Transform(data.mat)).m;
    return data;
  },
  alignment(data, mat) {
    data.mat = mat.multiply(new Transform(props.data.mat)).m;
  },
  propertys: [
    // "stroke", "strokeWidth",
    // "opacity",
    //  "ref", "zIndex"
  ],
});
</script>