From 61dc65b383842b81c0bf2fa7c4aa5082ecdfb687 Mon Sep 17 00:00:00 2001
From: wuchenguang1998 <63847336+wuchenguang1998@users.noreply.github.com>
Date: Wed, 5 Jun 2024 16:38:09 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E4=BF=AE=E5=A4=8D=E8=B7=AF=E5=BE=84?=
 =?UTF-8?q?=E6=96=87=E6=9C=AC=E5=85=83=E7=B4=A0=E5=AF=BC=E5=85=A5json?=
 =?UTF-8?q?=E5=A4=B1=E8=B4=A5=20(#418)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/core/ServersPlugin.ts          | 29 ++++++++++++++++++++++++-
 packages/core/plugin/PathTextPlugin.ts  |  6 ++++-
 src/components/attributeTextContent.vue |  2 +-
 3 files changed, 34 insertions(+), 3 deletions(-)

diff --git a/packages/core/ServersPlugin.ts b/packages/core/ServersPlugin.ts
index be72b51c..c05d9885 100644
--- a/packages/core/ServersPlugin.ts
+++ b/packages/core/ServersPlugin.ts
@@ -95,16 +95,36 @@ class ServersPlugin {
     });
   }
 
+  // 设置path属性
+  renderITextPath(textPaths: Record<'id' | 'path', any>[]) {
+    textPaths.forEach((item) => {
+      const object = this.canvas.getObjects().find((o) => o.id === item.id);
+      if (object) {
+        fabric.Path.fromObject(item.path, (e) => {
+          object.set('path', e);
+        });
+      }
+    });
+  }
+
   loadJSON(jsonFile: string | object, callback?: () => void) {
     // 确保元素存在id
     const temp = typeof jsonFile === 'string' ? JSON.parse(jsonFile) : jsonFile;
+    const textPaths: Record<'id' | 'path', any>[] = [];
     temp.objects.forEach((item: any) => {
       !item.id && (item.id = uuid());
+      // 收集所有路径文本元素i-text，并设置path为null
+      if (item.type === 'i-text' && item.path) {
+        textPaths.push({ id: item.id, path: item.path });
+        item.path = null;
+      }
     });
     jsonFile = JSON.stringify(temp);
     // 加载前钩子
     this.editor.hooksEntity.hookImportBefore.callAsync(jsonFile, () => {
       this.canvas.loadFromJSON(jsonFile, () => {
+        // 把i-text对应的path加上
+        this.renderITextPath(textPaths);
         this.canvas.renderAll();
         // 加载后钩子
         this.editor.hooksEntity.hookImportAfter.callAsync(jsonFile, () => {
@@ -119,7 +139,14 @@ class ServersPlugin {
   }
 
   getJson() {
-    return this.canvas.toJSON(['id', 'gradientAngle', 'selectable', 'hasControls', 'linkData']);
+    return this.canvas.toJSON([
+      'id',
+      'gradientAngle',
+      'selectable',
+      'hasControls',
+      'linkData',
+      'editable',
+    ]);
   }
 
   /**
diff --git a/packages/core/plugin/PathTextPlugin.ts b/packages/core/plugin/PathTextPlugin.ts
index 20a76aa7..186ccee5 100644
--- a/packages/core/plugin/PathTextPlugin.ts
+++ b/packages/core/plugin/PathTextPlugin.ts
@@ -26,13 +26,17 @@ export default class PathTextPlugin {
     path.set({ stroke: this.options.lineColor });
     const text = this.options.defaultText;
     const fontSize = this.options.defaultFontSize;
-    const textObject = new fabric.Text(text, {
+    const textObject = new fabric.IText(text, {
+      shadow: '',
+      fontFamily: 'arial',
       fontSize: fontSize,
       top: path.top,
       left: path.left,
       fill: this.options.color,
       path: path,
       id: uuid(),
+      // 路径文字元素禁止在画布上直接编辑
+      editable: false,
     });
     this.canvas.add(textObject);
   };
diff --git a/src/components/attributeTextContent.vue b/src/components/attributeTextContent.vue
index f39ba20c..016af4bc 100644
--- a/src/components/attributeTextContent.vue
+++ b/src/components/attributeTextContent.vue
@@ -58,7 +58,7 @@ onBeforeUnmount(() => {
 <template>
   <div
     class="box attr-item-box"
-    v-if="mixinState.mSelectMode === 'one' && mixinState.mSelectOneType === 'text'"
+    v-if="mixinState.mSelectMode === 'one' && mixinState.mSelectOneType === 'i-text'"
   >
     <!-- <h3>数据</h3> -->
     <Divider plain orientation="left"><h4>文本内容</h4></Divider>