drawing-board-service/src/core/html-mount/propertys/mount.vue

<template>
  <MountDescribes
    :name="name || data?.itemName || (type && components[type].shapeName)"
    :show="!hidden"
    :describes="describes"
    :data="data"
    :cal-delete="!data?.disableDelete"
    @close="
      () => {
        shapesStatus.actives = [];
        emit('close');
      }
    "
    @change="emit('change')"
    @delete="emit('delete')"
  />
</template>

<script lang="ts" setup>
import { computed } from "vue";
import { useStage } from "../../hook/use-global-vars.ts";
import { useMode } from "../../hook/use-status.ts";
import { PropertyDescribes } from "./index.ts";
import { DC, EntityShape } from "@/deconstruction.js";
import {
  useMouseShapesStatus,
  useMouseShapeStatus,
} from "../../hook/use-mouse-status.ts";
import { Mode } from "@/constant/mode.ts";
import { useStore } from "@/core/store/index.ts";
import { components } from "@/core/components/index.ts";
import MountDescribes from "./mount-describes.vue";

const props = defineProps<{
  show?: boolean;
  target: DC<EntityShape> | undefined;
  name?: string;
  data?: Record<string, any>;
  describes: PropertyDescribes;
}>();
const emit = defineEmits<{
  (e: "change"): void;
  (e: "delete"): void;
  (e: "close"): void;
}>();

const store = useStore();
const id = computed(() => props.target?.getNode().id());
const type = computed(() => id.value && store.getType(id.value));
const data = computed(() => (id.value ? store.getItemById(id.value) : props.data));

const stage = useStage();
const status = useMouseShapeStatus(computed(() => props.target));
const shapesStatus = useMouseShapesStatus();
const mode = useMode();
const hidden = computed(
  () =>
    !props.show &&
    (!stage.value?.getStage() ||
      !props.target?.getNode() ||
      !status.value.active ||
      mode.value.has(Mode.draw) ||
      mode.value.has(Mode.draging))
);
</script>