Merge branch 'main' of https://github.com/nihaojob/vue-fabric-editor

Author: nihaojob

packages/core/ServersPlugin.ts

@@ -132,7 +132,9 @@ class ServersPlugin {
         // 加载后钩子
         this.editor.hooksEntity.hookImportAfter.callAsync(jsonFile, () => {
           // 修复导入带水印的json无法清除问题 #359
-          this.editor?.updateDrawStatus(!!temp['overlayImage']);
+          this.editor?.updateDrawStatus &&
+            typeof this.editor.updateDrawStatus === 'function' &&
+            this.editor.updateDrawStatus(!!temp['overlayImage']);
           this.canvas.renderAll();
           callback && callback();
           this.editor.emit('loadJson');

packages/core/plugin/HistoryPlugin.ts

@@ -21,8 +21,8 @@ type extendCanvas = {
 
 class HistoryPlugin implements IPluginTempl {
   static pluginName = 'HistoryPlugin';
-  static apis = ['undo', 'redo'];
-  static events = ['historyUpdate'];
+  static apis = ['undo', 'redo', 'historyUpdate'];
+  static events = [];
   hotkeys: string[] = ['ctrl+z', 'ctrl+shift+z', '⌘+z', '⌘+shift+z'];
   constructor(public canvas: fabric.Canvas & extendCanvas, public editor: IEditor) {
     fabric.Canvas.prototype._historyNext = () => {

src/components/align.vue

@@ -14,44 +14,44 @@
       <!-- 水平对齐 -->
       <Tooltip :content="$t('attrSeting.align.left')">
         <Button @click="left" size="small" type="text">
-          <leftIcon class="icon"></leftIcon>
+          <leftIcon />
         </Button>
       </Tooltip>
       <Tooltip :content="$t('attrSeting.align.centerX')">
         <Button @click="xcenter" size="small" type="text">
-          <centerxIcon class="icon"></centerxIcon>
+          <centerxIcon />
         </Button>
       </Tooltip>
       <Tooltip :content="$t('attrSeting.align.right')">
         <Button @click="right" size="small" type="text">
-          <rightIcon class="icon"></rightIcon>
+          <rightIcon />
         </Button>
       </Tooltip>
       <!-- 垂直对齐 -->
       <Tooltip :content="$t('attrSeting.align.top')">
         <Button @click="top" size="small" type="text">
-          <topIcon class="icon"></topIcon>
+          <topIcon />
         </Button>
       </Tooltip>
       <Tooltip :content="$t('attrSeting.align.centerY')">
         <Button @click="ycenter" size="small" type="text">
-          <centeryIcon class="icon"></centeryIcon>
+          <centeryIcon />
         </Button>
       </Tooltip>
       <Tooltip :content="$t('attrSeting.align.bottom')">
         <Button @click="bottom" size="small" type="text">
-          <bottomIcon class="icon"></bottomIcon>
+          <bottomIcon />
         </Button>
       </Tooltip>
       <!-- 平均对齐 -->
       <Tooltip :content="$t('attrSeting.align.averageX')">
         <Button @click="xequation" size="small" type="text">
-          <sxIcon class="icon"></sxIcon>
+          <sxIcon />
         </Button>
       </Tooltip>
       <Tooltip :content="$t('attrSeting.align.averageY')">
         <Button @click="yequation" size="small" type="text">
-          <syIcon class="icon"></syIcon>
+          <syIcon />
         </Button>
       </Tooltip>
     </div>
@@ -62,17 +62,17 @@
 <script name="Align" setup>
 import useSelect from '@/hooks/select';
 
-import leftIcon from '@/assets/icon/left.svg?component';
-import rightIcon from '@/assets/icon/right.svg?component';
+import leftIcon from '@/assets/icon/left.svg';
+import rightIcon from '@/assets/icon/right.svg';
 
-import topIcon from '@/assets/icon/top.svg?component';
-import bottomIcon from '@/assets/icon/bottom.svg?component';
+import topIcon from '@/assets/icon/top.svg';
+import bottomIcon from '@/assets/icon/bottom.svg';
 
-import sxIcon from '@/assets/icon/sx.svg?component';
-import syIcon from '@/assets/icon/sy.svg?component';
+import sxIcon from '@/assets/icon/sx.svg';
+import syIcon from '@/assets/icon/sy.svg';
 
-import centerxIcon from '@/assets/icon/centerx.svg?component';
-import centeryIcon from '@/assets/icon/centery.svg?component';
+import centerxIcon from '@/assets/icon/centerx.svg';
+import centeryIcon from '@/assets/icon/centery.svg';
 
 const { mixinState, canvasEditor } = useSelect();
 

src/components/save.vue

@@ -99,6 +99,8 @@ const saveWith = debounce(function (type) {
  */
 const clear = () => {
   canvasEditor.clear();
+  canvasEditor.canvas.clearHistory(false);
+  canvasEditor.historyUpdate();
 };
 
 const beforeClear = () => {