fix: 修改右侧背景色框回填 (#367)

ikuaitu · May 7, 2024 · 63a889c · 63a889c
1 parent cbf8b53
commit 63a889c
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 2 deletions.
diff --git a/packages/core/ServersPlugin.ts b/packages/core/ServersPlugin.ts
@@ -104,6 +104,7 @@ class ServersPlugin {
         this.editor.hooksEntity.hookImportAfter.callAsync(jsonFile, () => {
           this.canvas.renderAll();
           callback && callback();
+          this.editor.emit('loadJson');
         });
       });
     });

diff --git a/src/components/bgBar.vue b/src/components/bgBar.vue
@@ -64,11 +64,26 @@ const setThisColor = () => {
   setColor(color.value);
 };
 // 背景颜色设置
-function setColor(color) {
+function setColor(c) {
   const workspace = canvasEditor.canvas.getObjects().find((item) => item.id === 'workspace');
-  workspace.set('fill', color);
+  workspace.set('fill', c);
   canvasEditor.canvas.renderAll();
+  color.value = c;
 }
+
+// 加载模板时回显颜色值
+const handleChangeColor = () => {
+  const workspace = canvasEditor.canvas.getObjects().find((item) => item.id === 'workspace');
+  color.value = workspace.fill;
+};
+
+onMounted(() => {
+  canvasEditor.on('loadJson', handleChangeColor);
+});
+
+onUnmounted(() => {
+  canvasEditor.off('loadJson', handleChangeColor);
+});
 </script>
 
 <!-- Add "scoped" attribute to limit CSS to this component only -->