feat:line外观添加起点/终点箭头

src/services/defaults.ts

@@ -1,6 +1,32 @@
 import { Pen, FormItem } from '@meta2d/core';
 import { cdn } from './api';
 
+export const fromArrows = [
+  { icon: '#l-line', value: '' },
+  { icon: '#l-from-triangle', value: 'triangle' },
+  { icon: '#l-from-diamond', value: 'diamond' },
+  { icon: '#l-from-circle', value: 'circle' },
+  { icon: '#l-from-lineDown', value: 'lineDown' },
+  { icon: '#l-from-lineUp', value: 'lineUp' },
+  { icon: '#l-from-triangleSolid', value: 'triangleSolid' },
+  { icon: '#l-from-diamondSolid', value: 'diamondSolid' },
+  { icon: '#l-from-circleSolid', value: 'circleSolid' },
+  { icon: '#l-from-line', value: 'line' },
+];
+
+export const toArrows = [
+  { icon: '#l-line', value: '' },
+  { icon: '#l-to-triangle', value: 'triangle' },
+  { icon: '#l-to-diamond', value: 'diamond' },
+  { icon: '#l-to-circle', value: 'circle' },
+  { icon: '#l-to-lineDown', value: 'lineDown' },
+  { icon: '#l-to-lineUp', value: 'lineUp' },
+  { icon: '#l-to-triangleSolid', value: 'triangleSolid' },
+  { icon: '#l-to-diamondSolid', value: 'diamondSolid' },
+  { icon: '#l-to-circleSolid', value: 'circleSolid' },
+  { icon: '#l-to-line', value: 'line' },
+];
+
 export const lineDashObj = [
   undefined,
   [5, 5],

src/views/components/PenProps.vue

@@ -398,6 +398,44 @@
                     />
                   </t-tooltip>
                 </div>
+                <div class="form-item">
+                  <label style="width: 52px">起点箭头 </label>
+                  <t-select
+                    v-model="data.pen.fromArrow"
+                    placeholder="线条样式"
+                    @change="changeValue('fromArrow')"
+                    style="width: 80px"
+                  >
+                    <template #valueDisplay="{ value }">
+                      <svg v-if="value" class="l-icon" aria-hidden="true">
+                        <use :xlink:href="fromArrows.find(item=>item.value===value).icon"></use>
+                      </svg>
+                    </template>
+                    <t-option v-for="item in fromArrows" :key="item.value" :value="item.value">
+                      <svg class="l-icon" aria-hidden="true">
+                        <use :xlink:href="item.icon"></use>
+                      </svg>
+                    </t-option>
+                  </t-select>
+                  <label style="width: 52px" class="ml-4">终点箭头 </label>
+                  <t-select
+                    v-model="data.pen.toArrow"
+                    placeholder="线条样式"
+                    @change="changeValue('toArrow')"
+                    style="width: 80px"
+                  >
+                    <template #valueDisplay="{ value }">
+                      <svg v-if="value" class="l-icon" aria-hidden="true">
+                        <use :xlink:href="toArrows.find(item=>item.value===value).icon"></use>
+                      </svg>
+                    </template>
+                    <t-option v-for="item in toArrows" :key="item.value" :value="item.value">
+                      <svg class="l-icon" aria-hidden="true">
+                        <use :xlink:href="item.icon"></use>
+                      </svg>
+                    </t-option>
+                  </t-select>
+                </div>
                 <div class="flex" style="margin-left: 40px">
                   <div class="flex column middle">
                     <t-radio-group
@@ -1358,7 +1396,7 @@ import { updatePen } from './pen';
 import { MessagePlugin } from 'tdesign-vue-next';
 import { useUser } from '@/services/user';
 import { getter, queryURLParams } from '@meta2d/core';
-import { defaultGradientColor, defaultPureColor } from '@/services/defaults';
+import { defaultGradientColor, defaultPureColor, fromArrows, toArrows } from '@/services/defaults';
 import { getLe5le3d, getLe5leV, getLe5le2d } from '@/services/api';
 import { s8 } from '@/services/random';
 import { EllipsisIcon, LinkIcon, LinkUnlinkIcon, ChevronDownIcon, FormatVerticalAlignLeftIcon, FormatHorizontalAlignCenterIcon, FormatVerticalAlignCenterIcon, FormatVerticalAlignRightIcon, FormatHorizontalAlignTopIcon, FormatHorizontalAlignBottomIcon  } from 'tdesign-icons-vue-next';

src/views/components/View.vue

@@ -824,7 +824,7 @@ import {
   autoSaveAS,
 } from '@/services/common';
 import { useSelection } from '@/services/selections';
-import { defaultFormat } from '@/services/defaults';
+import { defaultFormat, fromArrows, toArrows } from '@/services/defaults';
 import { checkData, localStorageName, Meta2dBackData } from '@/services/utils';
 import { debounce } from '@/services/debouce';
 import { s8 } from '@/services/random';
@@ -1073,31 +1073,31 @@ const changeLineType = (value: string) => {
 };
 
 const fromArrow = ref('');
-const fromArrows = [
-  { icon: '#l-line', value: '' },
-  { icon: '#l-from-triangle', value: 'triangle' },
-  { icon: '#l-from-diamond', value: 'diamond' },
-  { icon: '#l-from-circle', value: 'circle' },
-  { icon: '#l-from-lineDown', value: 'lineDown' },
-  { icon: '#l-from-lineUp', value: 'lineUp' },
-  { icon: '#l-from-triangleSolid', value: 'triangleSolid' },
-  { icon: '#l-from-diamondSolid', value: 'diamondSolid' },
-  { icon: '#l-from-circleSolid', value: 'circleSolid' },
-  { icon: '#l-from-line', value: 'line' },
-];
+// const fromArrows = [
+//   { icon: '#l-line', value: '' },
+//   { icon: '#l-from-triangle', value: 'triangle' },
+//   { icon: '#l-from-diamond', value: 'diamond' },
+//   { icon: '#l-from-circle', value: 'circle' },
+//   { icon: '#l-from-lineDown', value: 'lineDown' },
+//   { icon: '#l-from-lineUp', value: 'lineUp' },
+//   { icon: '#l-from-triangleSolid', value: 'triangleSolid' },
+//   { icon: '#l-from-diamondSolid', value: 'diamondSolid' },
+//   { icon: '#l-from-circleSolid', value: 'circleSolid' },
+//   { icon: '#l-from-line', value: 'line' },
+// ];
 const toArrow = ref('');
-const toArrows = [
-  { icon: '#l-line', value: '' },
-  { icon: '#l-to-triangle', value: 'triangle' },
-  { icon: '#l-to-diamond', value: 'diamond' },
-  { icon: '#l-to-circle', value: 'circle' },
-  { icon: '#l-to-lineDown', value: 'lineDown' },
-  { icon: '#l-to-lineUp', value: 'lineUp' },
-  { icon: '#l-to-triangleSolid', value: 'triangleSolid' },
-  { icon: '#l-to-diamondSolid', value: 'diamondSolid' },
-  { icon: '#l-to-circleSolid', value: 'circleSolid' },
-  { icon: '#l-to-line', value: 'line' },
-];
+// const toArrows = [
+//   { icon: '#l-line', value: '' },
+//   { icon: '#l-to-triangle', value: 'triangle' },
+//   { icon: '#l-to-diamond', value: 'diamond' },
+//   { icon: '#l-to-circle', value: 'circle' },
+//   { icon: '#l-to-lineDown', value: 'lineDown' },
+//   { icon: '#l-to-lineUp', value: 'lineUp' },
+//   { icon: '#l-to-triangleSolid', value: 'triangleSolid' },
+//   { icon: '#l-to-diamondSolid', value: 'diamondSolid' },
+//   { icon: '#l-to-circleSolid', value: 'circleSolid' },
+//   { icon: '#l-to-line', value: 'line' },
+// ];
 
 const changeFromArrow = (value: string) => {
   fromArrow.value = value;