🐛 fix: delete func

canisminor1990 · Apr 7, 2023 · 3161d50 · 3161d50
1 parent a665a59
commit 3161d50
Show file tree

Hide file tree

Showing 5 changed files with 139 additions and 37 deletions.
diff --git a/.prettierignore b/.prettierignore
@@ -9,6 +9,7 @@
 *.jpg
 *.webp
 *.toml
+*.py
 docker
 .editorconfig
 Dockerfile*
@@ -22,4 +23,4 @@ yarn-error.log
 .husky
 .npmrc
 .env
-.env.local
+.env.local
diff --git a/src/defaultWorkflow.ts b/src/defaultWorkflow.ts
@@ -2,53 +2,78 @@ import { PersistedGraph } from '@/utils'
 
 const defaultWorkflow: PersistedGraph = {
   data: {
-    '1': {
+    '066285d0-38a4-49d9-a6fd-9bc718b0d066': {
+      value: { widget: 'Group', fields: {} },
+      position: { x: 478, y: 1289 },
+      width: 1260,
+      height: 1000,
+    },
+    '2e19ea7c-a469-4aee-ba5f-50546f7b6856': {
       value: {
-        widget: 'CheckpointLoaderSimple',
-        fields: { ckpt_name: 'CmShota\\CmShotaMix-Unreal.safetensors' },
-        modify: { color: '#fadb14' },
+        widget: 'PreviewImage',
+        fields: {},
+        images: [{ filename: 'ComfyUI_00008_.png', subfolder: '', type: 'temp' }],
       },
-      position: { x: -180, y: -555 },
-      width: 271,
-      height: 168,
+      position: { x: 700, y: 60 },
+      width: 525,
+      height: 494,
+      parentNode: '066285d0-38a4-49d9-a6fd-9bc718b0d066',
     },
-    '2': {
-      value: { widget: 'CLIPTextEncode', fields: { text: 'beautiful mountain scenery' }, modify: { color: '#52c41a' } },
-      position: { x: -180, y: -375 },
+    '2d69027b-18cb-4fba-a6f7-3cc6191da27a': {
+      value: { widget: 'EmptyLatentImage', fields: { width: 512, height: 512, batch_size: 1 } },
+      position: { x: 40, y: 720 },
       width: 270,
-      height: 228,
+      height: 246,
+      parentNode: '066285d0-38a4-49d9-a6fd-9bc718b0d066',
     },
-    '3': {
-      value: { widget: 'CLIPTextEncode', fields: { text: 'bad had' }, modify: { color: '#f5222d' } },
-      position: { x: -180, y: -135 },
-      width: 270,
-      height: 228,
+    'df10802c-dcb3-45cb-b61a-ed21c9435e54': {
+      value: { widget: 'VAEDecode', fields: {} },
+      position: { x: 380, y: 540 },
+      width: 240,
+      height: 96,
+      parentNode: '066285d0-38a4-49d9-a6fd-9bc718b0d066',
     },
-    '4': {
+    '3ab52db7-7835-409b-9742-cdbb84283789': {
       value: {
         widget: 'KSampler',
-        fields: { seed: 232131, steps: 24, cfg: 8, sampler_name: 'dpm_2', scheduler: 'normal', denoise: 0.99 },
+        fields: {
+          seed: 8086337028137083000,
+          steps: 24,
+          cfg: 8,
+          sampler_name: 'dpm_2',
+          scheduler: 'normal',
+          denoise: 0.99,
+        },
       },
-      position: { x: 165, y: -555 },
+      position: { x: 380, y: 60 },
       width: 240,
       height: 461,
+      parentNode: '066285d0-38a4-49d9-a6fd-9bc718b0d066',
     },
-    '5': { value: { widget: 'VAEDecode', fields: {} }, position: { x: 165, y: -75 }, width: 240, height: 96 },
-    '7': {
-      value: { widget: 'EmptyLatentImage', fields: { width: 512, height: 512, batch_size: 1 } },
-      position: { x: -180, y: 105 },
+    '03e009af-40ce-40f8-8678-ee811fe31f41': {
+      value: { widget: 'CLIPTextEncode', fields: { text: 'bad had' }, modify: { color: '#f5222d' } },
+      position: { x: 40, y: 480 },
       width: 270,
-      height: 246,
+      height: 228,
+      parentNode: '066285d0-38a4-49d9-a6fd-9bc718b0d066',
     },
-    '9': {
+    '18d73b78-7fd7-4411-a39e-b8a17e677892': {
+      value: { widget: 'CLIPTextEncode', fields: { text: 'beautiful mountain scenery' }, modify: { color: '#52c41a' } },
+      position: { x: 40, y: 240 },
+      width: 270,
+      height: 228,
+      parentNode: '066285d0-38a4-49d9-a6fd-9bc718b0d066',
+    },
+    '1ab1ba4a-5dfb-4ced-bc06-2b55af930969': {
       value: {
-        widget: 'PreviewImage',
-        fields: {},
-        images: [{ filename: 'ComfyUI_00008_.png', subfolder: '', type: 'temp' }],
+        widget: 'CheckpointLoaderSimple',
+        fields: { ckpt_name: 'CmShota\\CmShotaMix-Unreal.safetensors' },
+        modify: { color: '#fadb14' },
       },
-      position: { x: 495, y: -555 },
-      width: 525,
-      height: 494,
+      position: { x: 40, y: 60 },
+      width: 271,
+      height: 168,
+      parentNode: '066285d0-38a4-49d9-a6fd-9bc718b0d066',
     },
   },
   connections: [
@@ -61,6 +86,60 @@ const defaultWorkflow: PersistedGraph = {
     { source: '7', sourceHandle: 'LATENT', target: '4', targetHandle: 'latent_image' },
     { source: '4', sourceHandle: 'LATENT', target: '5', targetHandle: 'samples' },
     { source: '5', sourceHandle: 'IMAGE', target: '9', targetHandle: 'images' },
+    {
+      source: '1ab1ba4a-5dfb-4ced-bc06-2b55af930969',
+      sourceHandle: 'MODEL',
+      target: '3ab52db7-7835-409b-9742-cdbb84283789',
+      targetHandle: 'model',
+    },
+    {
+      source: '1ab1ba4a-5dfb-4ced-bc06-2b55af930969',
+      sourceHandle: 'CLIP',
+      target: '18d73b78-7fd7-4411-a39e-b8a17e677892',
+      targetHandle: 'clip',
+    },
+    {
+      source: '1ab1ba4a-5dfb-4ced-bc06-2b55af930969',
+      sourceHandle: 'CLIP',
+      target: '03e009af-40ce-40f8-8678-ee811fe31f41',
+      targetHandle: 'clip',
+    },
+    {
+      source: '1ab1ba4a-5dfb-4ced-bc06-2b55af930969',
+      sourceHandle: 'VAE',
+      target: 'df10802c-dcb3-45cb-b61a-ed21c9435e54',
+      targetHandle: 'vae',
+    },
+    {
+      source: '03e009af-40ce-40f8-8678-ee811fe31f41',
+      sourceHandle: 'CONDITIONING',
+      target: '3ab52db7-7835-409b-9742-cdbb84283789',
+      targetHandle: 'negative',
+    },
+    {
+      source: '18d73b78-7fd7-4411-a39e-b8a17e677892',
+      sourceHandle: 'CONDITIONING',
+      target: '3ab52db7-7835-409b-9742-cdbb84283789',
+      targetHandle: 'positive',
+    },
+    {
+      source: '2d69027b-18cb-4fba-a6f7-3cc6191da27a',
+      sourceHandle: 'LATENT',
+      target: '3ab52db7-7835-409b-9742-cdbb84283789',
+      targetHandle: 'latent_image',
+    },
+    {
+      source: '3ab52db7-7835-409b-9742-cdbb84283789',
+      sourceHandle: 'LATENT',
+      target: 'df10802c-dcb3-45cb-b61a-ed21c9435e54',
+      targetHandle: 'samples',
+    },
+    {
+      source: 'df10802c-dcb3-45cb-b61a-ed21c9435e54',
+      sourceHandle: 'IMAGE',
+      target: '2e19ea7c-a469-4aee-ba5f-50546f7b6856',
+      targetHandle: 'images',
+    },
   ],
 }
 

diff --git a/src/pages/FlowEditor.tsx b/src/pages/FlowEditor.tsx
@@ -29,6 +29,7 @@ const FlowEditor: React.FC = () => {
     onCopyNode,
     onPasteNode,
     onSetNodesGroup,
+    onDeleteNode,
   } = useAppStore(
     (st) => ({
       nodes: st.nodes,
@@ -41,6 +42,7 @@ const FlowEditor: React.FC = () => {
       onCopyNode: st.onCopyNode,
       onPasteNode: st.onPasteNode,
       onSetNodesGroup: st.onSetNodesGroup,
+      onDeleteNode: st.onDeleteNode,
     }),
     shallow
   )
@@ -128,6 +130,8 @@ const FlowEditor: React.FC = () => {
         handleCopy()
       } else if (ctrlKey && event.code === 'KeyV') {
         handlePaste(reactFlowInstance)
+      } else if (event.code === 'Delete' || event.code === 'Backspace') {
+        reactFlowInstance.getNodes().forEach((n: any) => n.selected && onDeleteNode(n.id))
       }
     },
     [reactFlowInstance]
@@ -150,8 +154,8 @@ const FlowEditor: React.FC = () => {
       snapGrid={[20, 20]}
       minZoom={0.05}
       nodeTypes={nodeTypes}
-      deleteKeyCode={['Delete', 'Backspace']}
       multiSelectionKeyCode={['Shift']}
+      deleteKeyCode={[]}
       panOnScroll={!isWindows}
       zoomOnScroll={isWindows}
       disableKeyboardA11y={true}
@@ -161,7 +165,8 @@ const FlowEditor: React.FC = () => {
       onEdgeUpdateStart={onEdgeUpdateStart}
       onEdgeUpdateEnd={onEdgeUpdateEnd}
       onConnect={onConnect}
-      onNodeDrag={onNodeDrag}
+      onNodeDragStop={onNodeDrag}
+      onNodeDragStart={onNodeDrag}
       onDrop={onDrop}
       onDragOver={onDragOver}
       onInit={(e: any) => {

diff --git a/src/store/AppState.ts b/src/store/AppState.ts
@@ -48,6 +48,7 @@ export interface AppState {
    *********************** Node *************************
    ******************************************************/
   onSetNodesGroup: (childIds: NodeId[], groupNode: Node) => void
+  onDetachNodesGroup: (childIds: NodeId[], groupNode: Node) => void
   onNodesChange: OnNodesChange
   onUpdateNodes: (id: string, data: any) => void
   onAddNode: (nodeItem: NodeItem) => void

diff --git a/src/store/index.ts b/src/store/index.ts
@@ -100,6 +100,19 @@ export const useAppStore = create<AppState>()(
       }))
     },
 
+    onDetachNodesGroup: (childIds, groupNode) => {
+      set((st) => ({
+        nodes: st.nodes.map((n) => {
+          if (childIds.includes(n.id)) {
+            n.parentNode = undefined
+            n.position.x = n.position.x + groupNode.position.x
+            n.position.y = n.position.y + groupNode.position.y
+          }
+          return n
+        }),
+      }))
+    },
+
     onNodesChange: (changes) => {
       set((st) => ({ nodes: applyNodeChanges(changes, st.nodes) }), false, 'onNodesChange')
     },
@@ -113,10 +126,13 @@ export const useAppStore = create<AppState>()(
     },
 
     onDeleteNode: (id) => {
+      let nodes = get().nodes
+      const node: any = nodes.find((n) => n.id === id)
+      const childIds = nodes.filter((n) => n.parentNode === id).map((n) => n.id)
+      get().onDetachNodesGroup(childIds, node)
       set(
-        ({ graph: { [id]: _toDelete }, nodes }) => ({
-          // graph, // should work but currently buggy
-          nodes: applyNodeChanges([{ type: 'remove', id }], nodes),
+        (st) => ({
+          nodes: applyNodeChanges([{ type: 'remove', id }], st.nodes),
         }),
         false,
         'onDeleteNode'