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

<template>
  <t-menu class="context-menu" @change="onMenu" expandType="popup">
    <template v-if="props.type === 'anchor'">
      <t-menu-item value="addAnchorHand">
        <div class="flex">{{$t('添加手柄')}} <span class="flex-grow"></span> H</div>
      </t-menu-item>
      <t-menu-item value="removeAnchorHand">
        <div class="flex">{{$t('删除手柄')}} <span class="flex-grow"></span> D</div>
      </t-menu-item>
      <t-menu-item value="toggleAnchorHand">
        <div class="flex">{{$t('切换手柄')}} <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('一键更新我的组件')}} </t-menu-item>
      <t-menu-item v-if="isAppend()" value="appendChild"> {{$t('追加状态')}} </t-menu-item>
      <t-menu-item v-if="is3D()" value="goto3d"> {{$t('进入')}}3D{{$t('可视化编辑')}} </t-menu-item>
      <t-menu-item v-if="is2D()" value="goto2d"> {{$t('进入')}}2D{{$t('可视化编辑')}} </t-menu-item>
      <t-menu-item v-if="isV()" value="gotov"> {{$t('进入大屏可视化编辑')}} </t-menu-item>
      <t-menu-item v-if="isIframe()" value="replaceScene"> {{$t('替换方案')}} </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('置顶')}} </t-menu-item>
      <t-menu-item :disabled="!selections.mode" value="bottom">
        {{$t('置底')}}
      </t-menu-item>
      <t-menu-item :disabled="!selections.mode" value="up">
        {{$t('上一个图层')}}
      </t-menu-item>
      <t-menu-item :disabled="!selections.mode" value="down">
        {{$t('下一个图层')}}
      </t-menu-item>
      <template v-if="selections.mode === SelectionMode.Pens">
        <t-submenu value="1-1-10" title="画布层">
          <t-menu-item :disabled="!allImg()" value="4">
            上层图片层
          </t-menu-item>
          <t-menu-item :disabled="hasDom()" value="3">
            主画布层
          </t-menu-item>
          <t-menu-item :disabled="!allImg()" value="2">
            下层图片层
          </t-menu-item>
          <t-menu-item :disabled="hasDom()" value="1">
            模板层
          </t-menu-item>
        </t-submenu>
      </template>
      <template  v-if="selections.mode === SelectionMode.Pen">
        <t-submenu value="1-1-10" title="画布层">
          <t-menu-item :disabled="!isImg()" value="4">
            上层图片层
          </t-menu-item>
          <t-menu-item value="3">
            主画布层
          </t-menu-item>
          <t-menu-item :disabled="!isImg()" value="2">
            下层图片层
          </t-menu-item>
          <t-menu-item value="1">
            模板层
          </t-menu-item>
        </t-submenu>
      </template>
      <t-divider />
      <template v-if="hasPens">
        <t-menu-item value="group"> {{$t('组合')}} </t-menu-item>
        <t-menu-item value="states"> {{$t('组合为状态')}} </t-menu-item>
      </template>
        <t-menu-item v-if="hasChildren" value="unGroup"> 
          <t-popconfirm @cancel="onMenu('xxxx')" @confirm="onMenu('unGroup')" :content="$t('确认取消组合？(将丢失组合图元的数据)')">
            <div @click.stop>
                {{$t('取消组合')}} 
            </div>
          </t-popconfirm>
        </t-menu-item>
      <t-menu-item :disabled="!selections.mode" value="lock">
        {{ locked ? $t('解锁') : $t('锁定') }}
      </t-menu-item>
      <t-divider />
      <t-menu-item :disabled="!selections.mode" value="del"> {{$t( '删除' )}} </t-menu-item>
      <template v-if="isNameLine">
        <t-menu-item value="changeType">
          {{ isLine ? $t('变成节点') : $t('变成连线') }}
        </t-menu-item>
      </template>
      <t-divider />
      <t-menu-item :disabled="cantUndo" value="undo">
        <div class="flex">{{$t('撤销')}}<span class="flex-grow"></span>Ctrl + Z</div>
      </t-menu-item>
      <t-menu-item :disabled="cantRedo" value="redo">
        <div class="flex">{{$t('重做')}}<span class="flex-grow"></span>Shift + Z</div>
      </t-menu-item>
      <t-divider />
      <t-menu-item :disabled="!selections.mode" value="cut">
        <div class="flex">{{$t('剪切')}}<span class="flex-grow"></span>Ctrl + X</div>
      </t-menu-item>
      <t-menu-item :disabled="!selections.mode" value="copy">
        <div class="flex">{{$t('复制')}}<span class="flex-grow"></span>Ctrl + C</div>
      </t-menu-item>
      <t-menu-item value="paste">
        <div class="flex">{{$t('粘贴')}}<span class="flex-grow"></span>Ctrl + V</div>
      </t-menu-item>
    </template>
  </t-menu>
</template>

<script setup lang="ts">
import { onMounted, ref, getCurrentInstance } from 'vue';
import { LockState, Pen, PenType, isDomShapes } from '@meta2d/core';
import { useSelection, SelectionMode } from '@/services/selections';
import { updateC } from '@/services/updateC';
import { rootDomain } from '@/services/defaults';
const { proxy } = getCurrentInstance();
const $t = proxy.$t
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;
  if(!isNaN(parseInt(val))){
    const pens = meta2d.store.active;
    if (Array.isArray(pens)) {
      for (const pen of pens) {
        meta2d.setValue(
        {
          id: pen.id,
          canvasLayer: parseInt(val),
        },
        {
          history: false,
          render:false,
          doEvent:false
        }
      );
      }
    }
    meta2d.render();
    meta2d.emit('layer');
    return;
  }

  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 hasPens = () => {
  return meta2d?.store.active.length > 1;
};

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);
}

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

const isImg = ()=>{
  return meta2d?.store.active[0].name==='image'
}

const hasDom = () => {
  return selections.pens.some((item: Pen) => {
    return isDomShapes.includes(item.name) ||
      item.name.endsWith('Dom') ||
      meta2d.store.options.domShapes.includes(item.name);
  });
};

const allImg = () => {
  return selections.pens.every((item: Pen) => {
    return item.name === 'image';
  });
};


</script>

<style lang="postcss" scoped>
.context-menu {
  height: auto !important;
}
:deep(.t-menu) {
  .t-menu__item {
    &.t-is-opened {
      background-color: var(--color-background-popup-hover);
      transition: none !important;
    }
  }
  .t-fake-arrow {
    transform: rotate(-90deg) !important;
  }

  .t-fake-arrow--active {
    transform: rotate(90deg) !important;
  }
}
</style>