add_penProps_watcher

src/views/components/PenProps.vue

@@ -979,7 +979,7 @@
 </template>
 
 <script lang="ts" setup>
-import { onBeforeMount, onUnmounted, reactive, ref } from 'vue';
+import { onBeforeMount, onUnmounted, reactive, ref, watch } from 'vue';
 
 import CodeEditor from '@/views/components/common/CodeEditor.vue';
 import PenAnimates from './PenAnimates.vue';
@@ -1016,7 +1016,8 @@ onBeforeMount(() => {
     d.groups = [];
   }
   data.groups = d.groups;
-
+  setPenData();
+  /*
   data.pen = selections.pen;
   if (!data.pen.props) {
     data.pen.props = {};
@@ -1049,7 +1050,7 @@ onBeforeMount(() => {
   }
   if (data.pen.bkType == undefined) {
     data.pen.bkType = 0;
-  }
+  }*/
 
   // 示例代码
   /*
@@ -1071,13 +1072,58 @@ onBeforeMount(() => {
   ];
   */
   // end
-  data.pen.shadow = !!data.pen.shadowColor;
+  // data.pen.shadow = !!data.pen.shadowColor;
   getRect();
   meta2d.on('translatePens', getRect);
   meta2d.on('resizePens', getRect);
   meta2d.on('rotatePens', getRect);
 });
 
+function setPenData() {
+  data.pen = selections.pen;
+  if (!data.pen.props) {
+    data.pen.props = {};
+  }
+  if (!data.pen.globalAlpha) {
+    data.pen.globalAlpha = 1;
+  }
+  if (!data.pen.dash) {
+    data.pen.dash = 0;
+  }
+  if (!data.pen.props.text) {
+    if (data.pen.text || data.pen.name === 'text') {
+      data.pen.props.text = true;
+    }
+  }
+  if (!data.pen.props.image) {
+    if (data.pen.image || data.pen.name === 'image') {
+      data.pen.props.image = true;
+    }
+  }
+  if (data.pen.image) {
+    data.images = [
+      {
+        url: data.pen.image,
+      },
+    ];
+  }
+  if (!data.pen.tags) {
+    data.pen.tags = [];
+  }
+  if (data.pen.bkType == undefined) {
+    data.pen.bkType = 0;
+  }
+  data.pen.shadow = !!data.pen.shadowColor;
+}
+
+const watcher = watch(
+  () => selections.pen.id,
+  async () => {
+    setPenData();
+    getRect();
+  }
+);
+
 const getRect = () => {
   data.rect = meta2d.getPenRect(data.pen);
 };
@@ -1172,6 +1218,7 @@ const onOkTooltip = () => {
 };
 
 onUnmounted(() => {
+  watcher();
   meta2d.off('translatePens', getRect);
   meta2d.off('resizePens', getRect);
   meta2d.off('rotatePens', getRect);