feat:画布层

src/services/common.ts

@@ -877,12 +877,14 @@ const calcElem = (node: any) => {
     meta2d.store.options.domShapes.includes(node.name)
   ) {
     tag = 'dom';
-  } else if (node.template) {
+  } else if (node.canvasLayer === 1) {
     tag = '模板';
   } else if (node.name === 'image') {
-    if (node.isBottom) {
+    if(node.canvasLayer === 2){
       tag = '下层';
-    } else {
+    }else if(node.canvasLayer===3){
+      tag = '中层';
+    }else{
       tag = '上层';
     }
   } else {

src/views/components/PenProps.vue

@@ -51,14 +51,33 @@
               </template>
             </t-select-input>
           </div>
-          <div class="form-item px-12" style="margin-top: -12px">
-            <label style="width: 50px">模板</label>
-            <t-switch
+          <div v-if="isDom" class="form-item px-12" style="margin-top: -12px">
+            <label style="width: 50px">z-index</label>
+            <t-input-number
+              v-model="data.pen.zIndex"
+              theme="column"
+              :min="0"
+              placeholder="默认5"
+              @change="changeValue('zIndex')"
+            />
+          </div>
+          <div v-else class="form-item px-12" style="margin-top: -12px">
+            <label style="width: 50px">画布层</label>
+            <!-- <t-switch
               class="mt-8 ml-8"
               v-model="data.pen.template"
               size="small"
               @change="changeValue('template')"
-            />
+            /> -->
+            <t-select
+              v-model="data.pen.canvasLayer"
+              @change="changeValue('canvasLayer')"
+            >
+              <t-option :key="4" :disabled="data.pen.name!=='image'" :value="4" label="上层图片层"> 上层图片层 </t-option>
+              <t-option :key="3" :value="3" label="主画布层"> 主画布层 </t-option>
+              <t-option :key="2" :disabled="data.pen.name!=='image'" :value="2" label="下层图片层"> 下层图片层 </t-option>
+              <t-option :key="1" :value="1" label="模板层"> 模板层 </t-option>
+            </t-select>
           </div>
           <t-divider style="margin: -8px 0" />
           <div style="margin: 0 16px 16px 16px">
@@ -1379,7 +1398,7 @@
 </template>
 
 <script lang="ts" setup>
-import { onBeforeMount, onUnmounted, reactive, ref, watch } from 'vue';
+import { onBeforeMount, onUnmounted, reactive, ref, watch, computed } from 'vue';
 
 import CodeEditor from './common/CodeEditor.vue';
 import Iconfonts from './common/Iconfonts.vue';
@@ -1394,7 +1413,7 @@ import { autoSave, fonts, inTreePanel } from '@/services/common';
 import { updatePen } from './pen';
 import { MessagePlugin } from 'tdesign-vue-next';
 import { useUser } from '@/services/user';
-import { getter, queryURLParams } from '@meta2d/core';
+import { getter, queryURLParams, isDomShapes } from '@meta2d/core';
 import { defaultGradientColor, defaultPureColor, fromArrows, toArrows } from '@/services/defaults';
 import { getLe5le3d, getLe5leV, getLe5le2d } from '@/services/api';
 import { s8 } from '@/services/random';
@@ -1751,6 +1770,12 @@ const changetemProgressFlag = (pen: any) => {
   }
 };
 
+const isDom = computed(() => {
+  return isDomShapes.includes(data.pen.name) ||
+    data.pen.name.endsWith('Dom') ||
+    meta2d.store.options.domShapes.includes(data.pen.name)
+});
+
 onUnmounted(() => {
   watcher();
   meta2d.off('translatePens', getRect);

src/views/components/PensProps.vue

@@ -3,7 +3,7 @@
     <t-tabs v-model="data.tab">
       <t-tab-panel :value="1" label="外观">
         <t-space direction="vertical" class="py-16 w-full">
-          <div class="px-16 flex between">
+          <div class="px-16 flex between" style="margin-bottom:2px;">
             <label>选中了{{ selections.pens.length }}个图元</label>
             <div class="icons">
               <t-tooltip
@@ -67,13 +67,42 @@
             </div>
           </div>
           <div class="form-item px-16" style="margin-top: -12px">
-            <label style="width: 50px">模板</label>
-            <t-switch
-              class="mt-8 ml-8"
-              size="small"
-              v-model="data.template"
-              @change="changeValue('template')"
-            />
+            <label style="width: 50px">分组</label>
+            <t-select-input
+              v-model:inputValue="data.inputTag"
+              :value="data.tags"
+              allow-input
+              placeholder="请输入或选择分组"
+              multiple
+              @tag-change="onChangeInputTag"
+              @focus="data.tagPopupVisible = true"
+              @blur="data.tagPopupVisible = false"
+              :tag-input-props="{ excessTagsDisplayType: 'break-line' }"
+            >
+              <template #panel>
+                <ul style="padding: 8px 12px">
+                  <li
+                    v-for="item in data.groups"
+                    :key="item"
+                    @click="onSelectTag(item)"
+                  >
+                    {{ item }}
+                  </li>
+                </ul>
+              </template>
+            </t-select-input>
+          </div>
+          <div class="form-item px-16" style="margin-top: -12px">
+            <label style="width: 50px">画布层</label>
+            <t-select
+              v-model="data.canvasLayer"
+              @change="changeValue('canvasLayer')"
+            >
+              <t-option :key="4" :disabled="!allImg" :value="4" label="上层图片层"> 上层图片层 </t-option>
+              <t-option :key="3" :disabled="hasDom" :value="3" label="主画布层"> 主画布层 </t-option>
+              <t-option :key="2" :disabled="!allImg" :value="2" label="下层图片层"> 下层图片层 </t-option>
+              <t-option :key="1" :disabled="hasDom" :value="1" label="模板层"> 模板层 </t-option>
+            </t-select>
           </div>
           <t-collapse
             :defaultValue="['1', '2', '3', '4']"
@@ -812,9 +841,9 @@
 </template>
 
 <script lang="ts" setup>
-import { onBeforeMount, onUnmounted, reactive, ref } from 'vue';
+import { onBeforeMount, onUnmounted, reactive, ref, computed } from 'vue';
 
-import { LockState, Pen } from '@meta2d/core';
+import { LockState, Pen, isDomShapes } from '@meta2d/core';
 
 import { updatePen } from './pen';
 
@@ -912,7 +941,17 @@ const aligns2 = [
   },
 ];
 
-onBeforeMount(() => {});
+onBeforeMount(() => {
+  const d = meta2d.store.data as any;
+  if (!d.groups) {
+    d.groups = [];
+  }
+  data.groups = d.groups;
+
+  if (!data.tags) {
+    data.tags = [];
+  }
+});
 
 const lock = (v: LockState) => {
   data.locked = v;
@@ -970,6 +1009,47 @@ const onFontPopupVisible = (val: boolean) => {
 const decimalRound = (val: number) => {
   return Math.round(+val || 0);
 };
+
+const onSelectTag = (tag: string) => {
+  data.tagPopupVisible = false;
+  if (data.tags.includes(tag)) {
+    return;
+  }
+  data.tags.push(tag);
+  changeValue('tags');
+};
+
+const onChangeInputTag = (currentTags: any, context: any) => {
+  const { trigger, index, item } = context;
+  if (['tag-remove', 'backspace'].includes(trigger)) {
+    data.tags.splice(index, 1);
+  }
+  if (trigger === 'enter') {
+    onSelectTag(item);
+    const d = meta2d.store.data as any;
+    if (!d.groups.includes(item)) {
+      d.groups.push(item);
+      data.groups = d.groups;
+    }
+    data.inputTag = '';
+  }
+  data.tagPopupVisible = false;
+};
+
+const hasDom = computed(() => {
+  return selections.pens.some((item: Pen) => {
+    return isDomShapes.includes(item.name) ||
+      item.name.endsWith('Dom') ||
+      meta2d.store.options.domShapes.includes(item.name);
+  });
+});
+
+const allImg = computed(() => {
+  return selections.pens.every((item: Pen) => {
+    return item.name === 'image';
+  });
+});
+
 </script>
 <style lang="postcss" scoped>
 .props {