text history

src/modules/editor/components/CompUI/basicUI/Text/component.tsx

@@ -7,7 +7,7 @@ import { FontColor, FontFamily, FontSize } from "@ckeditor/ckeditor5-font";
 import { Link } from "@ckeditor/ckeditor5-link";
 import { Paragraph } from "@ckeditor/ckeditor5-paragraph";
 import { css } from "@linaria/core";
-import { defineComponent, watch, watchEffect } from "vue";
+import { defineComponent, ref, watch, watchEffect } from "vue";
 import { string } from "vue-types";
 import { useCompData } from ".";
 import { View } from "../View";
@@ -18,7 +18,7 @@ export const Component = defineComponent({
   },
   setup(props) {
     const comp = useCompData(props.compId);
-    const { store, helper, actions } = useEditor();
+    const { store, helper, actions, controls } = useEditor();
     const config = {
       language: "zh-cn",
       plugins: [
@@ -53,12 +53,22 @@ export const Component = defineComponent({
     };
 
     let editorInstance: InlineEditor;
+    let timeOut = ref();
 
     watchEffect(() => {
+      console.log("1111", store.textEditingState);
       if (!store.textEditingState) {
         editorInstance?.setData(comp.value);
       }
     });
+    const toolbarClickListener = () => {
+      editorInstance.ui.view.toolbar.element?.addEventListener("click", () => {
+        if (timeOut.value) {
+          clearTimeout(timeOut.value);
+          timeOut.value = null;
+        }
+      });
+    };
 
     return () => (
       <View
@@ -75,13 +85,19 @@ export const Component = defineComponent({
             //   editorInstance.getData()
             // );
             // store.setTextEditingState(false);
+
+            // console.log("blur", editorInstance);
+            timeOut.value = setTimeout(() => {
+              store.setTextEditingState(false);
+              controls.historyCtrl.history.submit();
+            }, 500);
           }}
           onFocus={() => {
             store.setTextEditingState(true);
           }}
           onInput={(e: any) => {
             if (editorInstance) {
-              actions.updateCompData(
+              actions.setTextarea(
                 helper.findComp(props.compId) as DesignComp,
                 "value",
                 e
@@ -91,6 +107,7 @@ export const Component = defineComponent({
           onReady={(editor: InlineEditor) => {
             editorInstance = editor;
             editor.setData(comp.value);
+            toolbarClickListener();
             if (store.isPreview) {
               editor.enableReadOnlyMode("editor");
             }

src/modules/editor/controllers/HistoryCtrl/HistoryController.ts

@@ -22,8 +22,8 @@ export class HistoryController {
   cacheGroupAction = new GroupAction();
 
   // 添加缓存记录
-  record(action: Action) {
-    this.cacheGroupAction.record(action);
+  record(action: Action, options?: RecordOptions) {
+    this.cacheGroupAction.record(action, options);
   }
 
   // 保存缓存记录到历史栈中
@@ -45,6 +45,7 @@ export class HistoryController {
     state.currLen = queue.length;
     // 更新当前缓存GroupAction
     this.cacheGroupAction = new GroupAction();
+    console.log(this);
   }
 
   undo() {

src/modules/editor/controllers/HistoryCtrl/index.ts

@@ -5,6 +5,7 @@ import { Action, HistoryController } from "./HistoryController";
 export class HistoryCtrl {
   history: HistoryController;
   historyActionDoing = false;
+  historyCombine = false;
 
   constructor(protected module: EditorModule, historyTotal = 50) {
     this.history = new HistoryController();
@@ -20,7 +21,7 @@ export class HistoryCtrl {
   ) {
     if (this.historyActionDoing) {
       const action = new Action(type, root, paths.join("."), value, oldValue);
-      this.history.record(action);
+      this.history.record(action, {combine: this.historyCombine});
     }
   }
 

src/modules/editor/controllers/SelectCtrl/index.ts

@@ -59,9 +59,13 @@ export class SelectCtrl extends ModuleControl<EditorModule> {
   _downClientY = 0;
   //groupCtrl = new GroupActionCtrl(this.module);
   bus = new Event();
-  viewport?:HTMLElement;
+  viewport?: HTMLElement;
 
-  initEvents(pageEl: HTMLElement, selCanvas: HTMLCanvasElement, viewport:HTMLElement) {
+  initEvents(
+    pageEl: HTMLElement,
+    selCanvas: HTMLCanvasElement,
+    viewport: HTMLElement
+  ) {
     this.viewport = viewport;
     this.pageEl = pageEl;
     this.selCanvas = selCanvas;
@@ -122,13 +126,17 @@ export class SelectCtrl extends ModuleControl<EditorModule> {
         //判断是否有点击到card stream
         const comps = this.compClickTest(e);
         this.mouseDownSelects = comps;
-        console.log("comps=>", comps);
+        console.log("comps=>", comps);       
         if (comps.length < 1) {
-            const view =  this.viewport?.getBoundingClientRect() as any;
-            const isOut = (e.clientX < view.left || e.clientX > (view.right) || e.clientY < view.top || e.clientY > view.bottom)
-            if (!isOut) {
-                this._state = MODE_SEL_RECT;
-            }
+          const view = this.viewport?.getBoundingClientRect() as any;
+          const isOut =
+            e.clientX < view.left ||
+            e.clientX > view.right ||
+            e.clientY < view.top ||
+            e.clientY > view.bottom;
+          if (!isOut) {
+            this._state = MODE_SEL_RECT;
+          }
         } else {
           this._state = MODE_MOVING;
           const obj = this.compMap[comps[0].id];
@@ -247,7 +255,7 @@ export class SelectCtrl extends ModuleControl<EditorModule> {
     }
   }
 
-  translate(xOffset:number, yOffset:number) {
+  translate(xOffset: number, yOffset: number) {
     const objContainer = this.objContainer as ObjsContainer;
     objContainer.translate(xOffset, yOffset);
     this.upgateGizmoStyle();
@@ -469,7 +477,7 @@ export class SelectCtrl extends ModuleControl<EditorModule> {
       return;
 
     if (objs.length == 1) {
-        this.actions.pickComp(objs[0].comp.id);
+      this.actions.pickComp(objs[0].comp.id);
     }
 
     // objs = this.getSceneObjOrderArr(objs);

src/modules/editor/module/actions/text.ts

@@ -0,0 +1,14 @@
+import { set } from "lodash";
+import { EditorModule } from "..";
+import { DesignComp } from "../../objects/DesignTemp/DesignComp";
+
+export const textActions = EditorModule.action({
+  setTextarea(comp: DesignComp, path: string, value: any) {
+    const { historyCtrl } = this.controls;
+    historyCtrl.historyActionDoing = true;
+    historyCtrl.historyCombine = true;
+    set(comp, path, value);
+    historyCtrl.historyCombine = false;
+    historyCtrl.historyActionDoing = false;
+  },
+});

src/modules/editor/module/index.ts

@@ -16,6 +16,7 @@ import { store } from "./stores";
 import { DragAddCtrl } from "../controllers/DragAddCtrl";
 import { SelectCtrl } from "../controllers/SelectCtrl";
 import { CompObject } from "../controllers/SelectCtrl/compObj";
+import { textActions } from "./actions/text";
 
 export class EditorModule extends ModuleRoot {
   config = this.setConfig({
@@ -25,7 +26,7 @@ export class EditorModule extends ModuleRoot {
   });
   components = this.useComponents(components);
 
-  actions = this.createActions([initActions, editActions, ImgCompActions]);
+  actions = this.createActions([initActions, editActions, ImgCompActions, textActions]);
   https = this.createHttps(https);
   store = this.createStore(store, {
     transform: (state) => createProxy(state),