fix: 修复路径文本元素导入json失败 (#418)

ikuaitu · Jun 5, 2024 · 61dc65b · 61dc65b
1 parent e6b000c
commit 61dc65b
Show file tree

Hide file tree

Showing 3 changed files with 34 additions and 3 deletions.
diff --git 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
@@ -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
@@ -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>