@agentscope-ai/flow 0.0.6 → 0.0.7

package/dist/components/base-node/index.less

@@ -2,6 +2,7 @@
 
 .spark-flow-node-container {
   --angle: 0deg;
+
   border: 1px solid e('var(--@{ant-prefix}-color-border-secondary)');
   background: e('var(--@{ant-prefix}-color-bg-base)');
   display: flex;
@@ -32,7 +33,7 @@
     }
 
     &.spark-flow-node-container-hovered {
-      box-shadow: 0px 2px 8px 0px rgba(38, 36, 76, 0.3);
+      box-shadow: 0 2px 8px 0 rgba(38, 36, 76, 30%);
       border-color: e('var(--@{ant-prefix}-color-primary)');
     }
   }
@@ -99,7 +100,8 @@
   }
 
   &:hover {
-    box-shadow: 0px 4px 36px 0px rgba(60, 52, 197, 0.08);
+    box-shadow: 0 4px 36px 0 rgba(60, 52, 197, 8%);
+
     .spark-flow-target-handle {
       box-shadow: 0 0 0 2px rgb(105 83 245 / 15%);
       width: 16px;
@@ -227,6 +229,7 @@
 
 .spark-flow-status-icon {
   font-size: 20px;
+
   &-success {
     color: e('var(--@{ant-prefix}-color-success)');
   }
@@ -245,6 +248,7 @@
   from {
     transform: rotate(0deg);
   }
+
   to {
     transform: rotate(360deg);
   }

package/dist/components/custom-inputs-control/index.less

@@ -1,10 +1,12 @@
 @import '../../index.less';
+
 .spark-flow-variable-select {
   .@{ant-prefix}-popover-content {
     max-height: 300px;
     overflow-y: auto;
   }
 }
+
 .spark-flow-variable-from-select {
   .@{ant-prefix}-select-selection-item {
     height: 30px;

package/dist/components/flow-base-edge/index.less

@@ -15,13 +15,14 @@
 }
 
 .spark-flow-animate-gradient-edge {
-  animation: gradientAnimation 2s linear infinite;
+  animation: gradient-animation 2s linear infinite;
 }
 
-@keyframes gradientAnimation {
+@keyframes gradient-animation {
   0% {
     transform: translateX(0);
   }
+
   100% {
     transform: translateX(100%);
   }

package/dist/components/flow-mini-map/index.less

@@ -8,9 +8,11 @@
   margin: 0 !important;
   border-radius: 6px;
   border: 1px solid e('var(--@{ant-prefix}-color-border-secondary)');
+
 .react-flow__minimap-node{
   fill: e('var(--@{ant-prefix}-color-primary-border-hover)');
 }
+
   > svg {
     width: 100%;
     height: 100%;

package/dist/components/flow-panel/index.d.ts

@@ -2,6 +2,8 @@ import React from 'react';
 import './index.less';
 interface IFlowPanel {
     children?: React.ReactNode[] | React.ReactNode;
+    className?: string;
+    style?: React.CSSProperties;
 }
 declare const _default: React.NamedExoticComponent<IFlowPanel>;
 export default _default;

package/dist/components/flow-panel/index.js

@@ -1,7 +1,9 @@
 import React, { memo } from 'react';
 import "./index.less";
+import classNames from 'classnames';
 export default /*#__PURE__*/memo(function FlowPanel(props) {
   return /*#__PURE__*/React.createElement("div", {
-    className: "spark-flow-panel-group absolute flex gap-[16px] flex-nowrap"
+    className: classNames("spark-flow-panel-group absolute flex gap-[16px] flex-nowrap", props.className),
+    style: props.style
   }, props.children);
 });

package/dist/components/flow-panel/index.less

@@ -58,6 +58,7 @@
   flex-direction: column;
   gap: 20px;
   padding: 20px;
+
   &:not(:last-of-type){
     border-bottom: 1px solid e('var(--@{ant-prefix}-color-border-secondary)');
   }

package/dist/components/flow-tools/index.d.ts

@@ -1,4 +1,8 @@
 import React from 'react';
 import './index.less';
-declare const _default: React.NamedExoticComponent<object>;
+export interface IFlowToolsProps {
+    className?: string;
+    style?: React.CSSProperties;
+}
+declare const _default: React.NamedExoticComponent<IFlowToolsProps>;
 export default _default;

package/dist/components/flow-tools/index.js

@@ -8,10 +8,12 @@ import MiniMapBtn from "./mini-map-btn";
 import ScaleBtn from "./scale-btn";
 import ShortKeyBtn from "./short-key-btn";
 import TouchModeBtn from "./touch-mode-btn";
-export default /*#__PURE__*/memo(function FlowTools() {
+import classNames from 'classnames';
+export default /*#__PURE__*/memo(function FlowTools(props) {
   return /*#__PURE__*/React.createElement("div", {
     id: "spark-flow-bottom-tools-container",
-    className: "nopan absolute items-center flex left-[16px] bottom-[16px] gap-[12px]"
+    className: classNames("nopan absolute items-center flex left-[16px] bottom-[16px] gap-[12px]", props.className),
+    style: props.style
   }, /*#__PURE__*/React.createElement("div", {
     className: "spark-flow-tools gap-[8px] items-center flex"
   }, /*#__PURE__*/React.createElement(MiniMapBtn, null), /*#__PURE__*/React.createElement(Divider, {

package/dist/components/flow-tools/index.less

@@ -1,4 +1,5 @@
 @import '../../index.less';
+
 .spark-flow-tools {
   box-shadow:
     0 12px 24px -16px rgb(54 54 73 / 4%),

package/dist/components/flow-tools/short-key-content.less

@@ -1,4 +1,5 @@
 @import '../../index.less';
+
 .spark-flow-short-key-container {
   min-width: 224px;
 

package/dist/components/node-result-panel/index.less

@@ -72,6 +72,7 @@
       color: e('var(--@{ant-prefix}-color-info)');
     }
   }
+
   &.spark-flow-node-result-panel-skip,
   &.spark-flow-node-result-panel-wait,
   &.spark-flow-node-result-panel-stop {

package/dist/components/output-params-tree/index.less

@@ -1,4 +1,5 @@
 @import '../../index.less';
+
 .spark-flow-output-params-tree-node {
   display: flex;
   flex-direction: column;

package/dist/components/script-edit-modal/index.less

@@ -3,7 +3,7 @@
 .spark-flow-script-edit-modal {
   margin: 8px!important;
   max-width: 100vw!important;
-  top: 0px!important;
+  top: 0!important;
   .@{ant-prefix}-modal-header {
     position: relative;
     

package/dist/components/task-status/index.less

@@ -23,6 +23,7 @@
     display: inline-flex !important;
     align-items: center;
     gap: 2px;
+
     > span {
       margin-inline-start: 0 !important;
     }

package/dist/components/var-input-text-area/index.less

@@ -52,6 +52,7 @@
   .spark-flow-var-input-var-tag-icon {
     font-size: 12px !important;
   }
+
   .spark-flow-var-input-var-tag-key {
     color: e('var(--@{ant-prefix}-color-primary)');
     font-weight: 500;

package/dist/components/variable-input/index.less

@@ -1,4 +1,5 @@
 @import '../../index.less';
+
 .variable-input-container {
   display: flex;
   align-items: stretch;

package/dist/hooks/use-nodes-interaction.js

@@ -350,7 +350,7 @@ export var useNodesInteraction = function useNodesInteraction() {
   }, [store]);
   var onAddNewNodeWithSource = useCallback( /*#__PURE__*/function () {
     var _ref6 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee2(_ref5, source, target) {
-      var type, parentId, _store$getState5, nodes, setNodes, sourceNode, nodeInfo, newNodes, newNode, _tempNodes, targetNode, x, y, _newNode, _store$getState6, edges, setEdges, newEdges, tempNodes, sourceHandle;
+      var type, parentId, _store$getState5, nodes, setNodes, sourceNode, nodeInfo, newNodes, _sourceNode$width, newNode, _sourceNode$width2, _tempNodes, targetNode, x, y, _sourceNode$width3, _newNode, _store$getState6, edges, setEdges, newEdges, tempNodes, sourceHandle;
       return _regeneratorRuntime().wrap(function _callee2$(_context2) {
         while (1) switch (_context2.prev = _context2.next) {
           case 0:
@@ -359,10 +359,16 @@ export var useNodesInteraction = function useNodesInteraction() {
             sourceNode = nodes.find(function (item) {
               return item.id === source.id;
             });
+            if (sourceNode) {
+              _context2.next = 5;
+              break;
+            }
+            return _context2.abrupt("return");
+          case 5:
             nodeInfo = nodeSchemaMap[type];
             newNodes = [];
             if (target) {
-              _context2.next = 24;
+              _context2.next = 26;
               break;
             }
             newNode = generateNewNode({
@@ -370,8 +376,8 @@ export var useNodesInteraction = function useNodesInteraction() {
               parentId: parentId,
               disableScreenToFlowPosition: true
             }, {
-              x: (sourceNode === null || sourceNode === void 0 ? void 0 : sourceNode.position.x) + (sourceNode === null || sourceNode === void 0 ? void 0 : sourceNode.width) + NEW_NODE_PADDING.x,
-              y: (sourceNode === null || sourceNode === void 0 ? void 0 : sourceNode.position.y) || 0
+              x: sourceNode.position.x + ((_sourceNode$width = sourceNode.width) !== null && _sourceNode$width !== void 0 ? _sourceNode$width : 0) + NEW_NODE_PADDING.x,
+              y: sourceNode.position.y || 0
             });
             if (nodeInfo.isGroup) {
               /* Iteration start and batch body nodes need to add loop start/end nodes by default; */
@@ -396,28 +402,28 @@ export var useNodesInteraction = function useNodesInteraction() {
                 y: 152
               }));
             }
-            _context2.prev = 8;
+            _context2.prev = 10;
             if (!nodeInfo.customAdd) {
-              _context2.next = 13;
+              _context2.next = 15;
               break;
             }
-            _context2.next = 12;
+            _context2.next = 14;
             return onAddCustomNode(newNode);
-          case 12:
+          case 14:
             newNode = _context2.sent;
-          case 13:
-            _context2.next = 17;
-            break;
           case 15:
-            _context2.prev = 15;
-            _context2.t0 = _context2["catch"](8);
+            _context2.next = 19;
+            break;
           case 17:
+            _context2.prev = 17;
+            _context2.t0 = _context2["catch"](10);
+          case 19:
             if (newNode) {
-              _context2.next = 19;
+              _context2.next = 21;
               break;
             }
             return _context2.abrupt("return");
-          case 19:
+          case 21:
             newNode.selected = true;
             addNewNodeCallback({
               newNodes: [newNode].concat(newNodes),
@@ -429,22 +435,22 @@ export var useNodesInteraction = function useNodesInteraction() {
               target: newNode.id,
               targetHandle: newNode.id
             });
-            _context2.next = 54;
+            _context2.next = 56;
             break;
-          case 24:
+          case 26:
             targetNode = nodes.find(function (item) {
               return item.id === target.id;
             });
             if (targetNode) {
-              _context2.next = 27;
+              _context2.next = 29;
               break;
             }
             return _context2.abrupt("return");
-          case 27:
-            x = (targetNode.position.x - (sourceNode === null || sourceNode === void 0 ? void 0 : sourceNode.position.x)) / 2 + (sourceNode === null || sourceNode === void 0 ? void 0 : sourceNode.position.x);
-            y = (targetNode.position.y - (sourceNode === null || sourceNode === void 0 ? void 0 : sourceNode.position.y)) / 2 + (sourceNode === null || sourceNode === void 0 ? void 0 : sourceNode.position.y);
-            if (x <= (sourceNode === null || sourceNode === void 0 ? void 0 : sourceNode.position.x) + (sourceNode === null || sourceNode === void 0 ? void 0 : sourceNode.width) + NEW_NODE_PADDING.x) {
-              x = (sourceNode === null || sourceNode === void 0 ? void 0 : sourceNode.position.x) + (sourceNode === null || sourceNode === void 0 ? void 0 : sourceNode.width) + NEW_NODE_PADDING.x;
+          case 29:
+            x = (targetNode.position.x - sourceNode.position.x) / 2 + sourceNode.position.x;
+            y = (targetNode.position.y - sourceNode.position.y) / 2 + sourceNode.position.y;
+            if (x <= sourceNode.position.x + ((_sourceNode$width2 = sourceNode.width) !== null && _sourceNode$width2 !== void 0 ? _sourceNode$width2 : 0) + NEW_NODE_PADDING.x) {
+              x = sourceNode.position.x + ((_sourceNode$width3 = sourceNode.width) !== null && _sourceNode$width3 !== void 0 ? _sourceNode$width3 : 0) + NEW_NODE_PADDING.x;
             }
             _newNode = generateNewNode({
               type: type,
@@ -454,22 +460,22 @@ export var useNodesInteraction = function useNodesInteraction() {
               x: x,
               y: y
             });
-            _context2.prev = 31;
+            _context2.prev = 33;
             if (!nodeInfo.customAdd) {
-              _context2.next = 36;
+              _context2.next = 38;
               break;
             }
-            _context2.next = 35;
+            _context2.next = 37;
             return onAddCustomNode(_newNode);
-          case 35:
+          case 37:
             _newNode = _context2.sent;
-          case 36:
-            _context2.next = 40;
-            break;
           case 38:
-            _context2.prev = 38;
-            _context2.t1 = _context2["catch"](31);
+            _context2.next = 42;
+            break;
           case 40:
+            _context2.prev = 40;
+            _context2.t1 = _context2["catch"](33);
+          case 42:
             if (nodeInfo.isGroup) {
               /* Iteration start and batch body nodes need to add loop start/end nodes by default; */
               newNodes.push(generateNewNode({
@@ -556,13 +562,13 @@ export var useNodesInteraction = function useNodesInteraction() {
             setNodes(tempNodes);
             setEdges(_toConsumableArray(newEdges));
             handleNodeClick(_newNode);
-          case 54:
+          case 56:
             handleSaveFlowDraft();
-          case 55:
+          case 57:
           case "end":
             return _context2.stop();
         }
-      }, _callee2, null, [[8, 15], [31, 38]]);
+      }, _callee2, null, [[10, 17], [33, 40]]);
     }));
     return function (_x3, _x4, _x5) {
       return _ref6.apply(this, arguments);

package/dist/hooks/use-nodes-output-params.js

@@ -168,7 +168,9 @@ export var filterVarItemsByType = function filterVarItemsByType(items, types) {
         });
       }
     }
-    filteredItem && filtered.push(filteredItem);
+    if (filteredItem) {
+      filtered.push(filteredItem);
+    }
     return filtered;
   }, []);
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@agentscope-ai/flow",
-  "version": "0.0.6",
+  "version": "0.0.7",
   "description": "A powerful and flexible flow canvas rendering engine designed for AI applications. Provides comprehensive workflow visualization and interaction capabilities for platforms like Bailian and AgentScope, enabling seamless creation and management of complex AI agent workflows with an intuitive drag-and-drop interface.",
   "module": "dist/index.js",
   "types": "dist/index.d.ts",