refactor(form): form store set values with cloneDeep (#386)

* refactor(form): form store values clone

* fix(history): history support form.updateFormValues

packages/node-engine/form/src/core/form-model.ts

@@ -1,5 +1,5 @@
-import { clone, flatten, get } from 'lodash';
-import { shallowEqual } from 'fast-equals';
+import { flatten, get } from 'lodash';
+import { deepEqual } from 'fast-equals';
 import { Disposable, Emitter } from '@flowgram.ai/utils';
 import { ReactiveState } from '@flowgram.ai/reactive';
 
@@ -79,12 +79,12 @@ export class FormModel<TValues = any> implements Disposable {
   }
 
   get values() {
-    return clone(this.store.values) || clone(this.initialValues);
+    return this.store.values;
   }
 
   set values(v) {
     const prevValues = this.values;
-    if (shallowEqual(this.store.values || this.initialValues, v)) {
+    if (deepEqual(prevValues, v)) {
       return;
     }
     this.store.values = v;
@@ -133,7 +133,7 @@ export class FormModel<TValues = any> implements Disposable {
     this._options = options;
     if (options.initialValues) {
       const prevValues = this.store.values;
-      this.store.setInitialValues(options.initialValues);
+      this.store.values = options.initialValues;
       this.fireOnFormValuesInit({
         values: options.initialValues,
         prevValues,

packages/node-engine/form/src/core/store.ts

@@ -1,4 +1,4 @@
-import { get } from 'lodash';
+import { get, clone, cloneDeep } from 'lodash';
 
 import { shallowSetIn } from '../utils';
 import { FieldValue } from '../types/field';
@@ -7,16 +7,12 @@ import { Path } from './path';
 export class Store<TValues = FieldValue> {
   protected _values: TValues;
 
-  get values() {
-    return this._values;
+  get values(): TValues {
+    return clone(this._values);
   }
 
   set values(v) {
-    this._values = v;
-  }
-
-  setInitialValues<TValue = FieldValue>(values: TValues) {
-    this._values = values;
+    this._values = cloneDeep(v);
   }
 
   setIn<TValue = FieldValue>(path: Path, value: TValue): void {
@@ -25,7 +21,7 @@ export class Store<TValues = FieldValue> {
   }
 
   getIn<TValue = FieldValue>(path: Path): TValue {
-    return get(this._values, path.value);
+    return get(this.values, path.value);
   }
 
   dispose() {}

packages/plugins/history-node-plugin/src/operation-metas/change-form-values.ts

@@ -1,6 +1,6 @@
+import { type OperationMeta } from '@flowgram.ai/history';
 import { FlowDocument } from '@flowgram.ai/document';
 import { type PluginContext } from '@flowgram.ai/core';
-import { type OperationMeta } from '@flowgram.ai/history';
 
 import { getFormModelV2, shouldChangeFormValuesMerge } from '../utils';
 import { ChangeFormValuesOperationValue, NodeOperationType } from '../types';
@@ -14,7 +14,7 @@ export const changeFormValueOperationMeta: OperationMeta<
   void
 > = {
   type: NodeOperationType.changeFormValues,
-  inverse: op => ({
+  inverse: (op) => ({
     ...op,
     value: {
       ...op.value,
@@ -29,8 +29,11 @@ export const changeFormValueOperationMeta: OperationMeta<
     if (!formModel) {
       return;
     }
-
-    formModel.setValueIn(path, value);
+    if (!path) {
+      formModel.updateFormValues(value);
+    } else {
+      formModel.setValueIn(path, value);
+    }
   },
   shouldMerge: shouldChangeFormValuesMerge as OperationMeta['shouldMerge'],
 };

packages/plugins/history-node-plugin/src/utils/index.ts

@@ -1,9 +1,9 @@
 import { get } from 'lodash';
 import { FormModelV2, isFormModelV2 } from '@flowgram.ai/node';
-import { FlowNodeFormData } from '@flowgram.ai/form-core';
-import { FlowNodeEntity } from '@flowgram.ai/document';
 import { HistoryService, Operation } from '@flowgram.ai/history';
 import { StackOperation } from '@flowgram.ai/history';
+import { FlowNodeFormData } from '@flowgram.ai/form-core';
+import { FlowNodeEntity } from '@flowgram.ai/document';
 
 import { ChangeFormValuesOperationValue, NodeOperationType } from '../types';
 
@@ -36,7 +36,7 @@ export function getFormModelV2(node: FlowNodeEntity | undefined): FormModelV2 |
 export function shouldChangeFormValuesMerge(
   op: Operation<ChangeFormValuesOperationValue | undefined>,
   prev: Operation<ChangeFormValuesOperationValue | undefined>,
-  element: StackOperation,
+  element: StackOperation
 ) {
   if (!prev) {
     return false;
@@ -71,20 +71,20 @@ export function shouldChangeFormValuesMerge(
 export function attachFormValuesChange(
   formModel: FormModelV2,
   node: FlowNodeEntity,
-  historyService: HistoryService,
+  historyService: HistoryService
 ) {
-  formModel.onFormValuesChange(event => {
+  formModel.onFormValuesChange((event) => {
     historyService.pushOperation(
       {
         type: NodeOperationType.changeFormValues,
         value: {
           id: node.id,
           path: event.name,
-          value: get(event.values, event.name),
-          oldValue: get(event.prevValues, event.name),
+          value: event.name ? get(event.values, event.name) : event.values,
+          oldValue: event.name ? get(event.prevValues, event.name) : event.prevValues,
         },
       },
-      { noApply: true },
+      { noApply: true }
     );
   });
 }