Merge branch 'newApi' of github.com:le5le-com/visualization-design into newApi

src/views/components/PenAnimates.vue

@@ -16,6 +16,8 @@
                 class="mr-8"
                 style="max-width: 60px"
                 @change="changeAnimateName($event, item)"
+                @blur="checkAnimateName(item)"
+                @focus="bakAnimateName(item.name)"
               />
               <t-icon
                 v-if="isPlaying === i"
@@ -233,6 +235,7 @@ import { MessagePlugin } from 'tdesign-vue-next';
 const props = defineProps<{
   pen: any;
 }>();
+let animateNameBak = '';
 function changeAnimateAutoPlay(value, item) {
   if (value) {
     props.pen.autoPlay = true;
@@ -254,7 +257,15 @@ function changeAnimateAutoPlay(value, item) {
     }
   }
 }
-
+const checkAnimateName = (item:any) => {
+  if(!item.name) {
+    MessagePlugin.warning('动画名不能为空！');
+    item.name = animateNameBak;
+  }
+}
+const bakAnimateName = (name:string) => {
+  animateNameBak = name;
+}
 const changeAnimateName = (event, item) => {
   let result = props.pen.animations.filter(
     (animation) => animation.name === event

src/views/components/PenProps.vue

@@ -174,7 +174,7 @@
 
           <t-divider style="margin: -8px 0" />
           <div class="form-item px-16" style="margin-top: -12px">
-            <label>不透明度</label>
+            <label>透明度</label>
             <t-slider
               v-model="data.pen.globalAlpha"
               :min="0"
@@ -619,7 +619,7 @@
                       </t-tooltip>
                     </t-radio-button>
                     <t-radio-button value="center">
-                      <t-tooltip content="居中" placement="top">
+                      <t-tooltip content="水平居中" placement="top">
                         <t-icon name="format-vertical-align-center" />
                       </t-tooltip>
                     </t-radio-button>
@@ -642,7 +642,7 @@
                       </t-tooltip>
                     </t-radio-button>
                     <t-radio-button value="middle">
-                      <t-tooltip content="垂直居中" placement="middle">
+                      <t-tooltip content="垂直居中" placement="top">
                         <t-icon name="format-horizontal-align-center" />
                       </t-tooltip>
                     </t-radio-button>
@@ -737,7 +737,7 @@
                 </div>
                 <div class="form-item">
                   <t-checkbox
-                    v-model="data.pen.whiteSpace"
+                    :value="data.pen.whiteSpace != 'nowrap' ? true : false"
                     @change="changeValue('whiteSpace')"
                     style="width: 64px"
                   >
@@ -1270,7 +1270,7 @@ function initPenData() {
   if (!data.pen.props) {
     data.pen.props = {};
   }
-  if (!data.pen.globalAlpha) {
+  if (!data.pen.globalAlpha && data.pen.globalAlpha !== 0) {
     data.pen.globalAlpha = 1;
   }
   if (!data.pen.dash) {
@@ -1308,6 +1308,12 @@ function initPenData() {
   if (!data.pen.animations) {
     data.pen.animations = [];
   }
+  if (!data.pen.whiteSpace) {
+    data.pen.whiteSpace = 'nowrap';
+  }
+  if (data.pen.ellipsis == undefined) {
+    data.pen.ellipsis = false;
+  }
   data.pen.shadow = !!data.pen.shadowColor;
 
   getRect();

src/views/components/pen.ts

@@ -31,6 +31,12 @@ export const updatePen = (pen: any, prop: string, render = true) => {
     v.titleFn = null;
   } else if (prop === 'dash') {
     v.lineDash = lineDashObj[v[prop]];
+  } else if (prop === 'whiteSpace') {
+    if(!pen.whiteSpace || pen.whiteSpace == 'nowrap') {
+      v.whiteSpace = 'break-all';
+    } else {
+      v.whiteSpace = 'nowrap';
+    }
   }
   meta2d.setValue(v, { render });
 };