✨ feat: add ctrl + g support

canisminor1990 · Apr 8, 2023 · 975561b · 975561b
1 parent 3161d50
commit 975561b
Show file tree

Hide file tree

Showing 4 changed files with 50 additions and 22 deletions.
diff --git a/src/client.ts b/src/client.ts
@@ -70,15 +70,15 @@ export function createPrompt(graph: PersistedGraph, widgets: Record<string, Widg
   const prompt: Record<NodeId, Node> = {}
   const data: Record<NodeId, PersistedNode> = {}
 
-  for (const [id, node] of Object.entries(graph.data)) {
+  Object.entries(graph.data).forEach(([id, node]) => {
+    if (node.value.widget === 'Group') return
     const fields = { ...node.value.fields }
-    for (const [property, value] of Object.entries(fields)) {
+    Object.entries(fields).forEach(([property, value]) => {
       const input = widgets[node.value.widget].input.required[property]
-      if (checkInput.isInt(input) && input[1].randomizable === true && value === -1) {
+      if (checkInput.isInt(input) && input[1].randomizable && value === -1) {
         fields[property] = Math.trunc(Math.random() * Number.MAX_SAFE_INTEGER)
       }
-    }
-
+    })
     data[id] = {
       position: node.position,
       value: { ...node.value, fields },
@@ -87,18 +87,16 @@ export function createPrompt(graph: PersistedGraph, widgets: Record<string, Widg
       class_type: node.value.widget,
       inputs: fields,
     }
-  }
+  })
 
-  for (const edge of graph.connections) {
+  graph.connections.forEach((edge) => {
     const source = graph.data[edge.source]
-    if (source === undefined) {
-      continue
-    }
+    if (!source) return
     const outputIndex = widgets[source.value.widget].output.findIndex((f) => f === edge.sourceHandle)
-    if (prompt[edge.target] !== undefined) {
+    if (prompt[edge.target]) {
       prompt[edge.target].inputs[edge.targetHandle] = [edge.source, outputIndex]
     }
-  }
+  })
 
   return {
     prompt,

diff --git a/src/pages/FlowEditor.tsx b/src/pages/FlowEditor.tsx
@@ -30,6 +30,7 @@ const FlowEditor: React.FC = () => {
     onPasteNode,
     onSetNodesGroup,
     onDeleteNode,
+    onCreateGroup,
   } = useAppStore(
     (st) => ({
       nodes: st.nodes,
@@ -43,6 +44,7 @@ const FlowEditor: React.FC = () => {
       onPasteNode: st.onPasteNode,
       onSetNodesGroup: st.onSetNodesGroup,
       onDeleteNode: st.onDeleteNode,
+      onCreateGroup: st.onCreateGroup,
     }),
     shallow
   )
@@ -126,10 +128,14 @@ const FlowEditor: React.FC = () => {
   const handleKeyDown = useCallback(
     (event: any) => {
       const ctrlKey = event.metaKey || (event.ctrlKey && !event.altKey)
-      if (ctrlKey && event.code === 'KeyC') {
-        handleCopy()
-      } else if (ctrlKey && event.code === 'KeyV') {
-        handlePaste(reactFlowInstance)
+      const ctrlAction: any = {
+        KeyC: () => handleCopy(),
+        KeyV: () => handlePaste(reactFlowInstance),
+        KeyG: () => onCreateGroup(),
+      }
+      if (ctrlKey) {
+        const action = ctrlAction[event.code]
+        if (action) action()
       } else if (event.code === 'Delete' || event.code === 'Backspace') {
         reactFlowInstance.getNodes().forEach((n: any) => n.selected && onDeleteNode(n.id))
       }

diff --git a/src/store/AppState.ts b/src/store/AppState.ts
@@ -47,6 +47,7 @@ export interface AppState {
   /******************************************************
    *********************** Node *************************
    ******************************************************/
+  onCreateGroup: () => void
   onSetNodesGroup: (childIds: NodeId[], groupNode: Node) => void
   onDetachNodesGroup: (childIds: NodeId[], groupNode: Node) => void
   onNodesChange: OnNodesChange

diff --git a/src/store/index.ts b/src/store/index.ts
@@ -82,6 +82,35 @@ export const useAppStore = create<AppState>()(
     /******************************************************
      *********************** Node *************************
      ******************************************************/
+    onCreateGroup: () => {
+      const childNodes = get().nodes.filter((n) => n.selected && n.data.name !== 'Group')
+      let left = Infinity
+      let right = 0
+      let top = Infinity
+      let bottom = 0
+
+      Object.values(childNodes).forEach((node) => {
+        const { position, width, height } = node
+        left = Math.min(left, position.x)
+        right = Math.max(right, position.x + Number(width))
+        top = Math.min(top, position.y)
+        bottom = Math.max(bottom, position.y + Number(height))
+      })
+
+      set(
+        (st) =>
+          addNode(st, {
+            widget: defaultWidgets.Group,
+            position: { x: left - 40, y: top - 60 },
+            width: right - left + 80,
+            height: bottom - top + 100,
+            key: uuid(),
+          }),
+        false,
+        'onCreateGroup'
+      )
+    },
+
     onSetNodesGroup: (childIds, groupNode) => {
       set((st) => ({
         nodes: st.nodes.map((n) => {
@@ -229,7 +258,6 @@ export const useAppStore = create<AppState>()(
     },
 
     onPasteNode: (workflow, position) => {
-      const nodes = get().nodes
       const basePositon = getTopLeftPoint(Object.values(workflow.data).map((item) => item.position))
       const idMap: { [id: string]: string } = {} // 存储原始节点 id 和新节点 id 的映射关系
       const newWorkflow: PersistedGraph = {
@@ -250,11 +278,6 @@ export const useAppStore = create<AppState>()(
         if (node.parentNode) {
           if (!Object.keys(workflow.data).includes(node.parentNode)) {
             newNode.parentNode = undefined
-            const groupNode = nodes.find((n) => n.id === node.parentNode)
-            if (groupNode) {
-              newNode.position.x = newNode.position.x + groupNode.position.x
-              newNode.position.y = newNode.position.y + groupNode.position.y
-            }
           } else {
             newNode.position = node.position
           }