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

<template>
  <div class="l-context-menu t-dropdown__menu">
    <template v-if="props.type === 'anchor'">
      <t-dropdown-item>
        <a @click="onAddAnchorHand">
          <div class="flex">添加手柄 <span class="flex-grow"></span> H</div>
        </a>
      </t-dropdown-item>
      <t-dropdown-item>
        <a @click="onRemoveAnchorHand">
          <div class="flex">删除手柄 <span class="flex-grow"></span> D</div>
        </a>
      </t-dropdown-item>
      <t-dropdown-item>
        <a @click="onToggleAnchorHand">
          <div class="flex">切换手柄 <span class="flex-grow"></span> Shift</div>
        </a>
      </t-dropdown-item>
    </template>
    <template v-if="props.type === 'pen'">
      <t-dropdown-item
        :class="!choosePens() && !choosePen() ? 'item-diabled' : ''"
      >
        <a @click="layerMove('top')">
          <div class="flex">置顶 <span class="flex-grow"></span></div>
        </a>
      </t-dropdown-item>
      <t-dropdown-item
        :class="!choosePens() && !choosePen() ? 'item-diabled' : ''"
      >
        <a @click="layerMove('bottom')">
          <div class="flex">置底 <span class="flex-grow"></span></div>
        </a>
      </t-dropdown-item>
      <t-dropdown-item
        :class="!choosePens() && !choosePen() ? 'item-diabled' : ''"
      >
        <a @click="layerMove('up')">
          <div class="flex">上一个图层 <span class="flex-grow"></span></div>
        </a>
      </t-dropdown-item>
      <t-dropdown-item
        :class="!choosePens() && !choosePen() ? 'item-diabled' : ''"
      >
        <a @click="layerMove('down')">
          <div class="flex">下一个图层 <span class="flex-grow"></span></div>
        </a>
      </t-dropdown-item>
      <t-divider />
      <t-dropdown-item
        :class="!choosePens() && !choosePen() ? 'item-diabled' : ''"
      >
        <a @click="layerMove('down')">
          <div class="flex">下一个图层 <span class="flex-grow"></span></div>
        </a>
      </t-dropdown-item>
      <template v-if="choosePens()">
        <t-dropdown-item>
          <a @click="combine()">
            <div class="flex">组合 <span class="flex-grow"></span></div>
          </a>
        </t-dropdown-item>
        <t-dropdown-item>
          <a @click="combine(0)">
            <div class="flex">组合为状态 <span class="flex-grow"></span></div>
          </a>
        </t-dropdown-item>
      </template>
      <t-dropdown-item v-if="hasChildren()">
        <a @click="unCombine()">
          <div class="flex">取消组合 <span class="flex-grow"></span></div>
        </a>
      </t-dropdown-item>
      <t-dropdown-item
        :class="!choosePens() && !choosePen() ? 'item-diabled' : ''"
      >
        <a @click="onLock">
          <div class="flex">
            {{ getLocked() ? '解锁' : '锁定' }} <span class="flex-grow"></span>
          </div>
        </a>
      </t-dropdown-item>
      <t-divider />
      <t-dropdown-item
        :class="!choosePens() && !choosePen() ? 'item-diabled' : ''"
      >
        <a @click="onDel">
          <div class="flex">删除<span class="flex-grow"></span></div>
        </a>
      </t-dropdown-item>
      <template v-if="isLine()">
        <t-dropdown-item v-if="isLineType()">
          <a @click="changeType(0)">
            <div class="flex">变成节点<span class="flex-grow"></span></div>
          </a>
        </t-dropdown-item>
        <t-dropdown-item v-else>
          <a @click="changeType(1)">
            <div class="flex">变成连线<span class="flex-grow"></span></div>
          </a>
        </t-dropdown-item>
      </template>
      <t-divider />
      <t-dropdown-item :class="cantUndo() ? 'item-diabled' : ''">
        <a @click="onUndo">
          <div class="flex">撤销<span class="flex-grow"></span>Ctrl + Z</div>
        </a>
      </t-dropdown-item>
      <t-dropdown-item :class="cantRedo() ? 'item-diabled' : ''">
        <a @click="onRedo">
          <div class="flex">恢复<span class="flex-grow"></span>Shift + Z</div>
        </a>
      </t-dropdown-item>
      <t-divider />
      <t-dropdown-item
        :class="!choosePens() && !choosePen() ? 'item-diabled' : ''"
      >
        <a @click="onCut">
          <div class="flex">剪切<span class="flex-grow"></span>Ctrl + X</div>
        </a>
      </t-dropdown-item>
      <t-dropdown-item
        :class="!choosePens() && !choosePen() ? 'item-diabled' : ''"
      >
        <a @click="onCopy">
          <div class="flex">复制<span class="flex-grow"></span>Ctrl + C</div>
        </a>
      </t-dropdown-item>
      <t-dropdown-item>
        <a @click="onPaste">
          <div class="flex">粘贴<span class="flex-grow"></span>Ctrl + V</div>
        </a>
      </t-dropdown-item>
    </template>
  </div>
</template>

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

const props = defineProps({
  type: String,
});
const emit = defineEmits(['changeVisible']);
function closeMenu() {
  emit('changeVisible', false);
}
const onAddAnchorHand = () => {
  meta2d.addAnchorHand();
  closeMenu();
};

const onRemoveAnchorHand = () => {
  meta2d.removeAnchorHand();
  closeMenu();
};

const onToggleAnchorHand = () => {
  meta2d.toggleAnchorHand();
  closeMenu();
};

function choosePen(): boolean {
  return meta2d?.store.active?.length === 1;
}

function choosePens(): boolean {
  return meta2d?.store.active?.length > 1;
}

function layerMove(type: 'top' | 'bottom' | 'up' | 'down') {
  const pens = meta2d.store.active;
  if (hasImage()) {
    if (type === 'top') {
      meta2d.setValue({
        id: pens[0].id,
        isBottom: false,
      });
      meta2d.top(pens[0]);
    } else if (type === 'bottom') {
      meta2d.setValue({
        id: pens[0].id,
        isBottom: true,
      });
      meta2d.bottom(pens[0]);
    } else if (type === 'up') {
      if (pens[0].isBottom) {
        meta2d.setValue({
          id: pens[0].id,
          isBottom: false,
        });
      } else {
        meta2d.up(pens[0]);
      }
    } else if (type === 'down') {
      if (!pens[0].isBottom) {
        meta2d.setValue({
          id: pens[0].id,
          isBottom: true,
        });
      } else {
        meta2d.down(pens[0]);
      }
    }
  } else {
    if (pens[0].name === 'gif') {
      let zIndex = pens[0].calculative.zIndex;
      if (type === 'top') {
        zIndex == 999;
      }
      if (type === 'bottom') {
        zIndex == -999;
      }
      if (type === 'up') {
        zIndex++;
      }
      if (type === 'down') {
        zIndex--;
      }
      meta2d.setValue({
        id: pens[0].id,
        zIndex,
      });
    } else {
      if (Array.isArray(pens)) {
        for (const pen of pens) {
          meta2d[type](pen);
        }
      }
    }
    meta2d.render();
  }
  emit('changeVisible', false);
}
function hasChildren(): boolean {
  return choosePen() && meta2d?.store.active[0]?.children?.length > 0;
}

function getLocked() {
  return meta2d?.store.active?.some((pen: Pen) => pen.locked);
}

function combine(showChild?: number) {
  meta2d.combine(meta2d.store.active, showChild);
  closeMenu();
}

function unCombine() {
  meta2d.uncombine();
  closeMenu();
}

function onLock() {
  const locked = !getLocked();
  const pens = meta2d.store.active;
  if (Array.isArray(pens)) {
    for (const pen of pens) {
      pen.locked = locked ? LockState.DisableMove : LockState.None;
    }
  }
  meta2d.render();
  closeMenu();
}

function onDel() {
  meta2d.delete();
  closeMenu();
}

function onUndo() {
  meta2d.undo();
  closeMenu();
}

function onRedo() {
  meta2d.redo();
  closeMenu();
}

function onCut() {
  meta2d.cut();
  closeMenu();
}

function onCopy() {
  meta2d.copy();
  closeMenu();
}

function onPaste() {
  meta2d.paste();
  closeMenu();
}

function cantUndo(): boolean {
  return (
    !!meta2d?.store.data.locked ||
    meta2d?.store.histories.length == 0 ||
    meta2d?.store.historyIndex == null ||
    meta2d?.store.historyIndex < 0
  );
}

function cantRedo(): boolean {
  return (
    !!meta2d?.store.data.locked ||
    meta2d?.store.histories.length == 0 ||
    meta2d?.store.historyIndex == null ||
    meta2d?.store.historyIndex > meta2d?.store.histories.length - 2
  );
}

function isLine(): boolean {
  return choosePen() && meta2d?.store.active[0]?.name === 'line';
}

function isLineType(): boolean {
  return meta2d?.store.active[0]?.type === PenType.Line;
}

function changeType(type: number) {
  const id = meta2d.store.active[0].id;
  meta2d.setValue(
    {
      id,
      type,
    },
    {
      history: true,
    }
  );
  closeMenu();
}

function hasImage(): boolean {
  const pen = meta2d.store.active[0];
  return choosePen() && pen.image && pen.name !== 'gif';
}
</script>

<style lang="postcss" scoped>
.l-context-menu {
  position: absolute;
  display: flex;
  flex-direction: column;
  padding: 6px;
  border-radius: 6px;
  gap: 2px;
  background-color: var(--color-background-popup);
  z-index: 999;
  .t-dropdown__item {
    max-width: 240px !important;
    /* padding: 0;
    background-color: transparent; */

    &:hover {
      background-color: var(--color-background-popup-hover);
    }

    a {
      width: 150px;
      display: block;
      text-decoration: none;
      color: var(--color);
      margin-left: 8px;

      label {
        font-size: 10px;
        background-color: #ff400030;
        color: var(--color-bland);
        padding: 0 6px;
        margin-left: 4px;
        border-radius: 2px;
      }
    }
  }

  .item-diabled {
    a {
      cursor: not-allowed;
      color: var(--td-text-color-disabled);
    }
    &:hover {
      background-color: #0000;
    }
  }
}
</style>