feat(components): 环境区域编辑器支持显示菜单

src/views/EnvArea/View.vue

@@ -1,9 +1,12 @@
 <script setup lang="ts">
-import { onMounted, onUnmounted, reactive } from "vue";
-import { Meta2d, Options } from "@meta2d/core";
+import { onMounted, onUnmounted, reactive, ref } from "vue";
+import { HoverType, Meta2d, Options, Pen } from "@meta2d/core";
 import ContextMenu from "../components/ContextMenu.vue";
 import SvgIcon from "../components/SvgIcon.vue";
 import { registerAreaPens } from "./pens/register";
+import { useSelection } from '@/services/selections';
+
+const { select } = useSelection();
 
 const meta2dOptions: Options = {
   x: 0,
@@ -13,24 +16,96 @@ const meta2dOptions: Options = {
   background: "#F5F7FA",
   shadowBlur: 0,
   disableAnchor: true,
+  disableScale: true,
 };
 
 onMounted(() => {
   new Meta2d("env-area-meta2d", meta2dOptions);
   meta2d.lock(0)
+  meta2d.on('active', active);
+  meta2d.on('inactive', inactive);
+  meta2d.on('contextmenu', onContextmenu);
+  meta2d.on('click', canvasClick);
   registerAreaPens()
 });
 
 onUnmounted(() => {
+  meta2d.off('active', active);
+  meta2d.off('inactive', inactive);
+  meta2d.off('contextmenu', onContextmenu);
+  meta2d.off('click', canvasClick);
   meta2d?.destroy();
 });
 
+const inactive = () => {
+  if(fitFlag.value){
+    return;
+  }
+  select();
+};
+
+const active = (pens: Pen[]) => {
+  if(fitFlag.value){
+    return;
+  }
+  select(pens);
+
+  //格式刷处理
+  if (one.value || always.value) {
+    meta2d.formatPainter();
+    one.value = false;
+  }
+};
+
+const fitFlag = ref(false);
+const one = ref(false);
+const always = ref(false);
+
 const contextmenu = reactive({
   visible: false,
   type: "",
   style: {},
 });
 
+const onContextmenu = ({ e, rect }: { e: any; rect: any }) => {
+  contextmenu.type = '';
+  contextmenu.style = {
+    left: e.clientX + 'px',
+    top: e.clientY + 'px',
+  };
+
+  if (
+    meta2d.store.hoverAnchor &&
+    meta2d.canvas.hoverType === HoverType.LineAnchor
+  ) {
+    contextmenu.type = 'anchor';
+    if (document.body.clientHeight - e.clientY < 128) {
+      contextmenu.style = {
+        left: e.clientX + 'px',
+        bottom: '4px',
+      };
+    }
+  } else {
+    contextmenu.type = 'pen';
+    if (document.body.clientHeight - e.clientY < 450) {
+      contextmenu.style = {
+        left: e.clientX + 'px',
+        bottom: '4px',
+      };
+    }
+  }
+
+  if (contextmenu.type) {
+    contextmenu.visible = true;
+  } else {
+    contextmenu.visible = false;
+  }
+};
+
+const canvasClick = () => {
+  contextmenu.visible = false;
+};
+
 const changeContextMenuVisible = (e: boolean) => {
   contextmenu.visible = e;
 };
@@ -81,6 +156,7 @@ const handleCancel = () => {
       v-if="contextmenu.visible"
       :type="contextmenu.type"
       :style="contextmenu.style"
+      isEnvAreaUsed
       @changeVisible="changeContextMenuVisible"
     ></ContextMenu>
   </div>

src/views/components/ContextMenu.vue

@@ -34,7 +34,7 @@
       <t-menu-item :disabled="!selections.mode" value="down">
         {{$t('下一个图层')}}
       </t-menu-item>
-      <template v-if="selections.mode === SelectionMode.Pens">
+      <template v-if="!isEnvAreaUsed && selections.mode === SelectionMode.Pens">
         <t-submenu value="1-1-10" title="画布层">
           <t-menu-item :disabled="!allImg()" value="4">
             上层图片层
@@ -50,7 +50,7 @@
           </t-menu-item>
         </t-submenu>
       </template>
-      <template  v-if="selections.mode === SelectionMode.Pen">
+      <template  v-if="!isEnvAreaUsed && selections.mode === SelectionMode.Pen">
         <t-submenu value="1-1-10" title="画布层">
           <t-menu-item :disabled="!isImg()" value="4">
             上层图片层
@@ -67,7 +67,7 @@
         </t-submenu>
       </template>
       <t-divider />
-      <template v-if="selections.mode === SelectionMode.Pens">
+      <template v-if="!isEnvAreaUsed && selections.mode === SelectionMode.Pens">
         <t-menu-item value="group"> {{$t('组合')}} </t-menu-item>
         <t-menu-item value="states"> {{$t('组合为状态')}} </t-menu-item>
       </template>
@@ -119,6 +119,7 @@ const { proxy } = getCurrentInstance();
 const $t = proxy.$t
 const props = defineProps({
   type: String,
+  isEnvAreaUsed: Boolean
 });
 const emit = defineEmits(['changeVisible','replaceScene']);