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 v-if="!selections.mode&&hasC()" value="updateC"> 一键更新我的组件 </t-menu-item>
      <t-menu-item v-if="isAppend()" value="appendChild"> 追加状态 </t-menu-item>
      <t-menu-item v-if="is3D()" value="goto3d"> 进入3D可视化编辑 </t-menu-item>
      <t-menu-item v-if="is2D()" value="goto2d"> 进入2D可视化编辑 </t-menu-item>
      <t-menu-item v-if="isV()" value="gotov"> 进入大屏可视化编辑 </t-menu-item>
      <t-menu-item v-if="isIframe()" value="replaceScene"> 替换方案 </t-menu-item>
      <!-- <t-menu-item v-if="isTableNoFocus()" value="focus"> 
        <div class="flex">进入编辑模式<span class="flex-grow"></span>Enter</div>
      </t-menu-item> -->
      <!-- <t-menu-item v-if="isTableFocus()" value="unFocus"> 
        <div class="flex">退出编辑模式 <span class="flex-grow"></span>Esc</div>
      </t-menu-item> -->
      <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-popconfirm  content="确认取消组合？(将丢失组合图元的数据)" @cancel="onMenu('xxxx')" @confirm="onMenu('unGroup')">
            <div @click.stop>
                取消组合 
            </div>
          </t-popconfirm>
        </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';
import { updateC } from '@/services/updateC';
import { rootDomain } from '@/services/defaults';

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

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) => {
  let id,url;
  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.None : LockState.DisableMove;
          }
        }
        meta2d.render();
      }
      break;
    case 'del':
      meta2d.delete();
      break;
    case 'changeType':
      meta2d.setValue(
        {
          id: meta2d.store.active[0].id,
          type: isLine.value ? 0 : 1,
        },
        {
          history: true,
        }
      );
      break;
    case 'updateC':
      updateC();
      break;
    case 'appendChild':
      meta2d.appendChild();
      let pen = meta2d?.store.active.find((pen: any) => pen.name === "combine"&& pen.showChild !== undefined)
      meta2d.active([pen],true);
      meta2d.render();
      break;
    case 'focus':
      meta2d.store.active[0].calculative.focus = true;
      break;
    case 'unFocus':
      meta2d.store.active[0].calculative.focus = false;
      break;
    case 'goto3d':
      id = meta2d?.store.active[0].iframe.split("id=")[1];
        //安装包
      url = location.origin+ `/3d/?id=`;
      if (window.url3D) {
        url = window.url3D;
      }
      window.open(url + id, '_blank');
      break;
    case 'goto2d':
      id = meta2d?.store.active[0].iframe.split("id=")[1];
      url = location.origin+ `/2d/?id=`;
      window.open(url + id, '_blank');
      break;
    case 'gotov':
      id = meta2d?.store.active[0].iframe.split("id=")[1];
      url = location.origin+ `/v/?id=`;
      window.open(url + id, '_blank');
      break;
    case 'replaceScene':
      emit('replaceScene', false);
      break;
  }

  emit('changeVisible', false);
};

const hasC =() => {
  return meta2d?.store.data.pens?.some((pen: Pen) => pen.name === "combine");
}

const isAppend =() => {
  return meta2d?.store.active.length > 1 && meta2d?.store.active.some((pen: any) => pen.name === "combine"&& pen.showChild !== undefined);
}

const isTableNoFocus =() => {
  return meta2d?.store.active.length === 1 && meta2d?.store.active[0].name === "tablePlus" && !meta2d?.store.active[0].calculative.focus;
}

const isTableFocus =() => {
  return meta2d?.store.active.length === 1 && meta2d?.store.active[0].name === "tablePlus" && meta2d?.store.active[0].calculative.focus;
}

const is3D = ()=>{
  return meta2d?.store.active.length === 1 && meta2d?.store.active[0].name === "iframe" && (meta2d?.store.active[0].iframe.indexOf("3d.") > -1||meta2d?.store.active[0].iframe.indexOf("/3d") > -1);
}

const is2D = ()=>{
  return meta2d?.store.active.length === 1 && meta2d?.store.active[0].name === "iframe" && (meta2d?.store.active[0].iframe.indexOf("2d.") > -1||meta2d?.store.active[0].iframe.indexOf("/2d") > -1);
}

const isV = ()=>{
  return meta2d?.store.active.length === 1 && meta2d?.store.active[0].name === "iframe" && (meta2d?.store.active[0].iframe.indexOf("v.") > -1||meta2d?.store.active[0].iframe.indexOf("/v") > -1) &&(meta2d?.store.active[0].iframe.indexOf(`v${rootDomain}`) !== -1 || meta2d?.store.active[0].iframe.indexOf(`view${rootDomain}/v`) !== -1);
}

const isIframe = ()=>{
  return meta2d?.store.active.length === 1 && meta2d?.store.active[0].name === "iframe"
}

</script>

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