Resize and edit features

Author: baebranch

server/db/models.py

@@ -36,6 +36,7 @@ class Flow(Base):
   name = sql.Column(sql.String, nullable=False)
   description = sql.Column(sql.Text, nullable=True)
   default = sql.Column(sql.Boolean, default=False)
+  position = sql.Column(sql.JSON, nullable=True)
   created_at = sql.Column(sql.DateTime, default=datetime.now(timezone.utc))
   updated_at = sql.Column(sql.DateTime, default=datetime.now(timezone.utc), onupdate=lambda: datetime.now(timezone.utc))
 
@@ -51,7 +52,7 @@ def validate_name(self, key, name):
     return name
 
   def __repr__(self):
-    return f'<Flow {self.id} {self.name} {self.description} {self.default} {self.created_at} {self.updated_at} {self.workspace_id}>'
+    return f'<Flow {self.id} {self.name} {self.description} {self.default} {self.position} {self.created_at} {self.updated_at} {self.workspace_id}>'
 
 
 class NodeType(Base):
@@ -166,10 +167,11 @@ def __repr__(self):
 Session = sessionmaker(bind=engine)
 session = Session()
 
-# Add column to the workspace table
-schema_update_handler(session.execute, text('ALTER TABLE workspaces ADD COLUMN icon TEXT;'))
+# Schema updates
+# schema_update_handler(session.execute, text('ALTER TABLE workspaces ADD COLUMN icon TEXT;'))
 # schema_update_handler(session.execute, text('ALTER TABLE node_types ADD COLUMN fields JSON;'))
 # schema_update_handler(session.execute, text('ALTER TABLE edge_types ADD COLUMN fields JSON;'))
+# schema_update_handler(session.execute, text('ALTER TABLE flows ADD COLUMN position JSON;'))
 
 # Was to try to implement automatic schema updates
 metadata = MetaData()

server/gql/functions.gql

@@ -47,7 +47,7 @@ type Mutation {
 
   # Flow
   createFlow(name: String!, description: String, workspace_id: ID!): FlowResult!
-  updateFlow(id: ID!, name: String, description: String, workspace_id: ID): FlowResult!
+  updateFlow(id: ID!, name: String, description: String, workspace_id: ID, position: JSON): FlowResult!
   deleteFlow(id: ID!): FlowResult!
 
   # Node Type

server/gql/schema.gql

@@ -38,6 +38,7 @@ type Flow {
   name: String!
   description: String
   default: Boolean!
+  position: JSON
   workspace_id: ID!
   created_at: String!
   updated_at: String!

server/resolvers.py

@@ -90,7 +90,12 @@ def createFlow(_, info, **kwargs):
 @response_handler
 def updateFlow(_, info, **kwargs):
   flow = session.query(Flow).filter_by(id=kwargs.get('id')).first()
-  flow.update(**kwargs)
+  if position := kwargs.get('position', None):
+    kwargs['position'] = loads(unquote(position))
+  
+  for key, value in kwargs.items():
+    setattr(flow, key, value)
+
   session.commit()
   return {'flow': flow}
 

src/custom/card.tsx

@@ -1,11 +1,18 @@
 import "./custom.css";
-import { Handle, Position } from 'reactflow';
+import { memo } from "react";
+import { Handle, Position, NodeResizer } from 'reactflow';
 
 
-export function CardNode({ data }: { data: any; }) {
+function CardNode({ data, selected }: { data: any, selected: any }) {
   return (
     <>
-      <div className="card">
+      <NodeResizer
+        color="#ff0071"
+        isVisible={selected}
+        minWidth={100}
+        minHeight={100}
+      />
+      <div className="source-node">
         <div className="card-title">
           {data.title}
         </div>
@@ -18,3 +25,5 @@ export function CardNode({ data }: { data: any; }) {
     </>
   );
 }
+
+export default memo(CardNode);

src/custom/custom.css

@@ -1,28 +1,50 @@
-.card {
-  border: 1px solid #ededed;
+/* .react_flow___source-node { */
+.react_flow___node {
+  border: 1px solid #495057;
   border-radius: 10px;
-  max-width: 350px;
+  background-color: rgba(255, 255, 255, 0.412);
+  width: 100%;
+}
+
+.react-flow__handle {
+  padding: 3px !important;
+}
+
+div.react-flow__node.react-flow__node-source, div.react-flow__node.react-flow__node-card {
+  border: 1px solid #495057;
+  border-radius: 10px;
+  background-color: rgba(255, 255, 255, 1);
+}
 
+div.react-flow__resize-control {
+  border-color: #495057 !important;
+  border-width: 0.5px !important;
+}
+
+div.react-flow__resize-control.handle {
+  background-color: #495057 !important;
+  width: 8px;
+  height: 8px;
+}
+
+.source-node {
+  height: inherit;
 }
 
 .card-title {
-  background-color: rgba(255, 255, 255, 0.412);
-  /* background-color: red; */
+  border-bottom: 1px solid #ededed;
   font-weight: 600;
   color: #000;
-  border-bottom: 1px solid #ededed;
   padding: 5px 15px;
-  border-radius: 10px 10px 0 0;
 }
 
 .card-title p {
   margin: 0;
 }
 
 .card-body {
-  background-color: white;
   padding: 15px 15px;
-  border-radius: 0 0 10px 10px;
+  border: none;
 }
 
 .card-body p {

src/custom/default.tsx

@@ -0,0 +1,24 @@
+import "./custom.css";
+import { memo } from "react";
+import { Handle, Position, NodeResizer } from 'reactflow';
+
+
+function Default({ data, selected }: { data: any, selected: any }) {
+  return (
+    <>
+      <NodeResizer
+        color="#ff0071"
+        isVisible={selected}
+        minWidth={150}
+        minHeight={40}
+      />
+      <div className="source-node">
+          {data.label}
+        <Handle type="target" position={Position.Top} id="a" />
+        <Handle type="source" position={Position.Bottom} id="b" />
+      </div>
+    </>
+  );
+}
+
+export default memo(Default);

src/custom/input.tsx

@@ -0,0 +1,23 @@
+import "./custom.css";
+import { memo } from "react";
+import { Handle, Position, NodeResizer } from 'reactflow';
+
+
+function Input({ data, selected }: { data: any, selected: any }) {
+  return (
+    <>
+      <NodeResizer
+        color="#ff0071"
+        isVisible={selected}
+        minWidth={150}
+        minHeight={40}
+      />
+      <div className="source-node">
+          {data.label}
+        <Handle type="source" position={Position.Bottom} id="a" />
+      </div>
+    </>
+  );
+}
+
+export default memo(Input);

src/custom/output.tsx

@@ -0,0 +1,23 @@
+import "./custom.css";
+import { memo } from "react";
+import { Handle, Position, NodeResizer } from 'reactflow';
+
+
+function Output({ data, selected }: { data: any, selected: any }) {
+  return (
+    <>
+      <NodeResizer
+        color="#ff0071"
+        isVisible={selected}
+        minWidth={150}
+        minHeight={40}
+      />
+      <div className="source-node">
+          {data.label}
+        <Handle type="target" position={Position.Top} id="a" />
+      </div>
+    </>
+  );
+}
+
+export default memo(Output);

src/custom/source.tsx

@@ -1,11 +1,19 @@
 import "./custom.css";
-import { Handle, Position } from 'reactflow';
+import { memo } from "react";
+import { Handle, Position, NodeResizer } from 'reactflow';
 
 
-export function Source({ data }: { data: any }) {
+function Source({ data, selected }: { data: any, selected: any }) {
+
   return (
     <>
-      <div className="card">
+      <NodeResizer
+        color="#ff0071"
+        isVisible={selected}
+        minWidth={100}
+        minHeight={100}
+      />
+      <div className="source-node">
         <div className="card-title">
           {data.title}
         </div>
@@ -20,3 +28,5 @@ export function Source({ data }: { data: any }) {
     </>
   );
 }
+
+export default memo(Source);