fix: can not create record on confirm

soraLib · Jan 5, 2024 · f419356 · f419356
1 parent 92fc684
commit f419356
Show file tree

Hide file tree

Showing 3 changed files with 56 additions and 21 deletions.
diff --git a/src/SaForm/PcForm/graph.ts b/src/SaForm/PcForm/graph.ts
@@ -1,6 +1,6 @@
 import { nextTick } from 'vue'
 import { setObjectValues } from 'sugar-sajs'
-import { cloneDeep, pick } from 'lodash-es'
+import { cloneDeep, isEqual, pick } from 'lodash-es'
 import {
   BasicRecordType,
   isCDRecordDataList,
@@ -15,6 +15,7 @@ import { PcClipBoard } from './clipboard'
 import { Events } from './events'
 import { getRectangle } from './layout/workspace/graph/renderer/utils/rectangle'
 import { collectsElements, findNode } from './utils/node'
+import type { PcElementAttributes } from './element'
 import type { Arrayable } from '@vueuse/core'
 import type {
   BasicGraph,
@@ -24,6 +25,7 @@ import type {
   Scroller,
   SelectionSetting,
   SnaplineSetting,
+  UpdateElementOptions,
 } from '../graph'
 import type { BasicRecordStore, CDRecord } from '../record'
 
@@ -425,17 +427,20 @@ export class PcGraph extends Events implements BasicGraph {
   updateElemData(
     id: string,
     data: Partial<PcElement['attrs']>,
-    needRecord?: boolean
+    needRecord?: boolean,
+    options?: UpdateElementOptions
   ): PcElement | undefined
   updateElemData(
     element: PcElement,
     data: Partial<PcElement['attrs']>,
-    needRecord?: boolean
+    needRecord?: boolean,
+    options?: UpdateElementOptions
   ): PcElement | undefined
   updateElemData(
     arg: string | PcElement,
     data: Partial<PcElement['attrs']>,
-    needRecord = true
+    needRecord = true,
+    options?: UpdateElementOptions
   ) {
     if (!arg) return
 
@@ -446,6 +451,14 @@ export class PcGraph extends Events implements BasicGraph {
 
     if (!element) return undefined
 
+    if (
+      !options?.skipEqualCheck &&
+      Object.entries(data).every(([key, value]) =>
+        isEqual(value, element.attrs[key as keyof PcElementAttributes])
+      )
+    )
+      return
+
     if (needRecord) {
       const record = new PcRecord({
         type: BasicRecordType.Attr,
@@ -469,13 +482,19 @@ export class PcGraph extends Events implements BasicGraph {
 
   updateElemsData(
     data: IdUpdateData[],
-    needRecord?: boolean
+    needRecord?: boolean,
+    options?: UpdateElementOptions
   ): PcElement[] | undefined
   updateElemsData(
     data: ElUpdateData[],
-    needRecord?: boolean
+    needRecord?: boolean,
+    options?: UpdateElementOptions
   ): PcElement[] | undefined
-  updateElemsData(arg: IdUpdateData[] | ElUpdateData[], needRecord = true) {
+  updateElemsData(
+    arg: IdUpdateData[] | ElUpdateData[],
+    needRecord = true,
+    options?: UpdateElementOptions
+  ) {
     const batch = arg.map((data) => ({
       el: isIdUpdateData(data)
         ? findNode(this.canvas, (node) => node.attrs.id === data.id)!
@@ -498,7 +517,7 @@ export class PcGraph extends Events implements BasicGraph {
     }
 
     for (const update of batch) {
-      this.updateElemData(update.el, update.data, false)
+      this.updateElemData(update.el, update.data, false, options)
     }
 
     return batch.map((u) => u.el)

diff --git a/src/SaForm/graph.ts b/src/SaForm/graph.ts
@@ -70,7 +70,9 @@ export function isIdUpdateData<T extends BasicElement = BasicElement>(
 ): data is IdUpdateData<T> {
   return Reflect.has(data, 'id')
 }
-
+export type UpdateElementOptions = {
+  skipEqualCheck?: boolean
+}
 /** basic graph */
 export interface BasicGraph {
   /** graph type */
@@ -122,21 +124,25 @@ export interface BasicGraph {
   updateElemData(
     id: string,
     data: Partial<BasicElement['attrs']>,
-    needRecord?: boolean
+    needRecord?: boolean,
+    options?: UpdateElementOptions
   ): BasicElement | undefined
   updateElemData(
     element: BasicElement,
     data: Partial<BasicElement['attrs']>,
-    needRecord?: boolean
+    needRecord?: boolean,
+    options?: UpdateElementOptions
   ): BasicElement | undefined
 
   updateElemsData(
     data: IdUpdateData[],
-    needRecord?: boolean
+    needRecord?: boolean,
+    options?: UpdateElementOptions
   ): BasicElement[] | undefined
   updateElemsData(
     data: ElUpdateData[],
-    needRecord?: boolean
+    needRecord?: boolean,
+    options?: UpdateElementOptions
   ): BasicElement[] | undefined
 
   historyTo(to: number): void

diff --git a/src/SaForm/layout/property/item.tsx b/src/SaForm/layout/property/item.tsx
@@ -53,13 +53,16 @@ export default defineComponent({
 
       return undefined
     })
-    let colorTemp = modelValue.value
 
     const internalMoelValue = ref<any>()
+
+    let colorTemp = modelValue.value
+
     watch(
       () => selected.value.attrs.id,
       () => {
         internalMoelValue.value = modelValue.value
+        colorTemp = modelValue.value
       },
       {
         deep: true,
@@ -187,28 +190,35 @@ export default defineComponent({
             )
           }
           const updateShow = (show: boolean) => {
-            if (!show && filteredValue !== colorTemp) {
+            if (!show && modelValue.value !== colorTemp) {
               updateValue(colorTemp)
             }
           }
 
           const onConfirm = (v: string) => {
-            updateValue(colorTemp)
-            handlePluginValueChange(v)
             colorTemp = v
+            props.graph.updateElemData(
+              selected.value,
+              {
+                [plugin.attr]: v,
+              },
+              true,
+              {
+                skipEqualCheck: true,
+              }
+            )
           }
 
           return (
             <div class="sa-plugin flex">
               <NInputGroup title={props.plugin.title}>
-                {/* TODO: <NInputGroupLabel>{props.plugin.label}</NInputGroupLabel> */}
+                <NInputGroupLabel>{props.plugin.label}</NInputGroupLabel>
                 <NColorPicker
                   class="color-picker"
-                  value={filteredValue}
+                  value={filteredValue ?? ''}
                   showPreview={true}
-                  modes={['rgb', 'hex', 'hsl', 'hsv']}
+                  modes={['hex']}
                   actions={['confirm']}
-                  disabled={plugin.disabled ?? false}
                   onUpdateValue={updateValue}
                   onUpdateShow={updateShow}
                   onConfirm={onConfirm}