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

<template>
  <t-menu class="context-menu" @change="onMenu">
    <template v-if="props.type === 'anchor'">
      <t-menu-item value="addAnchorHand">
        <div class="flex">添加手柄 <span class="flex-grow"></span> H</div>
      </t-menu-item>
      <t-menu-item value="removeAnchorHand">
        <div class="flex">删除手柄 <span class="flex-grow"></span> D</div>
      </t-menu-item>
      <t-menu-item value="toggleAnchorHand">
        <div class="flex">切换手柄 <span class="flex-grow"></span> Shift</div>
      </t-menu-item>
    </template>
    <template v-if="props.type === 'pen'">
      <t-menu-item :disabled="!selections.mode" value="top"> 置顶 </t-menu-item>
      <t-menu-item :disabled="!selections.mode" value="bottom">
        置底
      </t-menu-item>
      <t-menu-item :disabled="!selections.mode" value="up">
        上一个图层
      </t-menu-item>
      <t-menu-item :disabled="!selections.mode" value="down">
        下一个图层
      </t-menu-item>
      <t-divider />

      <template v-if="selections.mode === SelectionMode.Pens">
        <t-menu-item value="group"> 组合 </t-menu-item>
        <t-menu-item value="states"> 组合为状态 </t-menu-item>
      </template>
      <t-menu-item v-if="hasChildren" value="unGroup"> 取消组合 </t-menu-item>
      <t-menu-item :disabled="!selections.mode" value="lock">
        {{ locked ? '解锁' : '锁定' }}
      </t-menu-item>
      <t-divider />
      <t-menu-item :disabled="!selections.mode" value="del"> 删除 </t-menu-item>
      <template v-if="isNameLine">
        <t-menu-item value="changeType">
          {{ isLine ? '变成节点' : '变成连线' }}
        </t-menu-item>
      </template>
      <t-divider />
      <t-menu-item :disabled="cantUndo" value="undo">
        <div class="flex">撤销<span class="flex-grow"></span>Ctrl + Z</div>
      </t-menu-item>
      <t-menu-item :disabled="cantRedo" value="redo">
        <div class="flex">恢复<span class="flex-grow"></span>Shift + Z</div>
      </t-menu-item>
      <t-divider />
      <t-menu-item :disabled="!selections.mode" value="cut">
        <div class="flex">剪切<span class="flex-grow"></span>Ctrl + X</div>
      </t-menu-item>
      <t-menu-item :disabled="!selections.mode" value="copy">
        <div class="flex">复制<span class="flex-grow"></span>Ctrl + C</div>
      </t-menu-item>
      <t-menu-item value="paste">
        <div class="flex">粘贴<span class="flex-grow"></span>Ctrl + V</div>
      </t-menu-item>
    </template>
  </t-menu>
</template>

<script setup lang="ts">
import { onMounted, ref } from 'vue';
import { LockState, Pen, PenType } from '@meta2d/core';
import { useSelection, SelectionMode } from '@/services/selections';

const props = defineProps({
  type: String,
});
const emit = defineEmits(['changeVisible']);

const { selections } = useSelection();

const hasChildren = ref(false);
const locked = ref(false);
const isNameLine = ref(false);
const isLine = ref(false);
const cantUndo = ref(false);
const cantRedo = ref(false);

onMounted(() => {
  if (selections.mode === SelectionMode.Pen) {
    hasChildren.value = meta2d?.store.active[0]?.children?.length > 0;
    isNameLine.value = meta2d?.store.active[0]?.name === 'line';
    isLine.value = meta2d?.store.active[0]?.type === PenType.Line;
  }

  if (selections.mode) {
    locked.value = meta2d?.store.active?.some((pen: Pen) => pen.locked);
  }

  cantUndo.value =
    !!meta2d?.store.data.locked ||
    meta2d?.store.histories.length == 0 ||
    meta2d?.store.historyIndex == null ||
    meta2d?.store.historyIndex < 0;

  cantRedo.value =
    !!meta2d?.store.data.locked ||
    meta2d?.store.histories.length == 0 ||
    meta2d?.store.historyIndex == null ||
    meta2d?.store.historyIndex > meta2d?.store.histories.length - 2;
});

const onMenu = (val: string) => {
  switch (val) {
    case 'addAnchorHand':
      meta2d.addAnchorHand();
      break;
    case 'removeAnchorHand':
      meta2d.removeAnchorHand();
      break;
    case 'toggleAnchorHand':
      meta2d.toggleAnchorHand();
      break;
    case 'top':
    case 'bottom':
    case 'up':
    case 'down':
    case 'undo':
    case 'redo':
    case 'cut':
    case 'copy':
    case 'paste':
      (meta2d as any)[val]();
      break;
    case 'group':
      meta2d.combine(meta2d.store.active);
      break;
    case 'states':
      meta2d.combine(meta2d.store.active, 0);
      break;
    case 'unGroup':
      meta2d.uncombine();
      break;
    case 'lock':
      {
        const pens = meta2d.store.active;
        if (Array.isArray(pens)) {
          for (const pen of pens) {
            pen.locked = locked.value ? LockState.DisableMove : LockState.None;
          }
        }
        meta2d.render();
      }
      break;
    case 'del':
      meta2d.delete();
      break;
    case 'changeType':
      meta2d.setValue(
        {
          id: meta2d.store.active[0].id,
          type: isLine ? 0 : 1,
        },
        {
          history: true,
        }
      );
      break;
  }

  emit('changeVisible', false);
};
</script>

<style lang="postcss" scoped>
.context-menu {
  height: auto !important;
}
</style>