@janiscommerce/ui-web 1.11.0 → 1.12.0

package/dist/index.umd.js

@@ -13880,6 +13880,10 @@
         minWidth: 40,
         minHeight: 40,
         isVisible: selected
+      }), /*#__PURE__*/React__default["default"].createElement(NodeComponent, {
+        data: nodeData,
+        selected: selected,
+        style: sizeStyle
       }), handles.map(function (id) {
         return /*#__PURE__*/React__default["default"].createElement(Handle, {
           key: id,
@@ -13890,14 +13894,9 @@
             background: handleColor,
             width: 10,
             height: 10,
-            border: '2px solid #fff',
-            zIndex: 1
+            border: '2px solid #fff'
           }
         });
-      }), /*#__PURE__*/React__default["default"].createElement(NodeComponent, {
-        data: nodeData,
-        selected: selected,
-        style: sizeStyle
       }));
     };
 
@@ -13905,6 +13904,22 @@
     return WrappedNode;
   };
 
+  var DiagramNodeShape = PropTypes.shape({
+    id: PropTypes.string.isRequired,
+    type: PropTypes.string.isRequired,
+    position: PropTypes.shape({
+      x: PropTypes.number.isRequired,
+      y: PropTypes.number.isRequired
+    }).isRequired,
+    width: PropTypes.number,
+    height: PropTypes.number,
+    handleConfig: PropTypes.shape({
+      color: PropTypes.string,
+      positions: PropTypes.arrayOf(PropTypes.oneOf(['top', 'right', 'bottom', 'left']))
+    }),
+    data: PropTypes.object
+  });
+
   var fails$d = fails$p;
 
   var arrayMethodIsStrict$2 = function (METHOD_NAME, argument) {
@@ -13962,6 +13977,25 @@
     bezier: withSelected(BezierEdge),
     straight: withSelected(StraightEdge)
   };
+  var ArrowShape = PropTypes.shape({
+    type: PropTypes.oneOf(['outlined', 'contained']),
+    size: PropTypes.number
+  });
+  var DiagramEdgeShape = PropTypes.shape({
+    id: PropTypes.string.isRequired,
+    source: PropTypes.string.isRequired,
+    target: PropTypes.string.isRequired,
+    sourceHandle: PropTypes.oneOf(['top', 'right', 'bottom', 'left']),
+    targetHandle: PropTypes.oneOf(['top', 'right', 'bottom', 'left']),
+    lineType: PropTypes.oneOf(['step', 'curved', 'straight']),
+    animated: PropTypes.bool,
+    label: PropTypes.string,
+    style: PropTypes.object,
+    selectedStyle: PropTypes.object,
+    arrowStart: ArrowShape,
+    arrowEnd: ArrowShape,
+    data: PropTypes.object
+  });
 
   var _excluded$e = ["width", "height", "handleConfig", "data"];
   var MARKER_MAP = {
@@ -13974,11 +14008,15 @@
     straight: 'straight'
   };
 
-  var formatMarker = function formatMarker(marker) {
+  var formatMarker = function formatMarker(marker, style) {
     if (!marker) return undefined;
+    var type = marker.type,
+        size = marker.size;
     return {
-      type: MARKER_MAP[marker.type] || marker.type,
-      color: marker.color
+      type: MARKER_MAP[type] || type,
+      color: style === null || style === void 0 ? void 0 : style.stroke,
+      width: size !== null && size !== void 0 ? size : 20,
+      height: size !== null && size !== void 0 ? size : 20
     };
   };
 
@@ -14031,8 +14069,8 @@
           selectedStyle: selectedStyle
         }),
         type: LINE_TYPE_MAP[lineType] || 'bezier',
-        markerStart: formatMarker(arrowStart),
-        markerEnd: formatMarker(arrowEnd)
+        markerStart: formatMarker(arrowStart, style),
+        markerEnd: formatMarker(arrowEnd, style)
       };
     });
   };
@@ -14122,82 +14160,6 @@
   var defaultZoomOpts = {
     duration: 400
   };
-  var ArrowShape = PropTypes.shape({
-    type: PropTypes.oneOf(['outlined', 'contained']),
-    color: PropTypes.string
-  });
-  var DiagramNodeShape = PropTypes.shape({
-    id: PropTypes.string.isRequired,
-    type: PropTypes.string.isRequired,
-    position: PropTypes.shape({
-      x: PropTypes.number.isRequired,
-      y: PropTypes.number.isRequired
-    }).isRequired,
-    width: PropTypes.number,
-    height: PropTypes.number,
-    handleConfig: PropTypes.shape({
-      color: PropTypes.string,
-      positions: PropTypes.arrayOf(PropTypes.oneOf(['top', 'right', 'bottom', 'left']))
-    }),
-    data: PropTypes.object
-  });
-  var DiagramEdgeShape = PropTypes.shape({
-    id: PropTypes.string.isRequired,
-    source: PropTypes.string.isRequired,
-    target: PropTypes.string.isRequired,
-    sourceHandle: PropTypes.oneOf(['top', 'right', 'bottom', 'left']),
-    targetHandle: PropTypes.oneOf(['top', 'right', 'bottom', 'left']),
-    lineType: PropTypes.oneOf(['step', 'curved', 'straight']),
-    animated: PropTypes.bool,
-    label: PropTypes.string,
-    style: PropTypes.object,
-    selectedStyle: PropTypes.object,
-    arrowStart: ArrowShape,
-    arrowEnd: ArrowShape,
-    data: PropTypes.object
-  });
-  ({
-    /** Nodos a renderizar en el diagrama. */
-    nodes: PropTypes.arrayOf(DiagramNodeShape),
-
-    /** Edges a renderizar en el diagrama. */
-    edges: PropTypes.arrayOf(DiagramEdgeShape),
-
-    /** Map de tipo de nodo → componente React custom. */
-    nodeComponents: PropTypes.objectOf(PropTypes.elementType),
-
-    /** Configuración del canvas. `readOnly` deshabilita drag y conexiones. `showControls` muestra los controles de zoom. `showMiniMap` muestra el minimapa. `resizableNodes` habilita el redimensionado de nodos. */
-    config: PropTypes.shape({
-      readOnly: PropTypes.bool,
-      showControls: PropTypes.bool,
-      showMiniMap: PropTypes.bool,
-      resizableNodes: PropTypes.bool
-    }),
-
-    /** Cambios de posición (`{ type: 'position', id, position }`), dimensiones (`{ type: 'dimensions', id, width, height }`) o eliminación (`{ type: 'remove', id }`) de nodos. */
-    onNodesChange: PropTypes.func,
-
-    /** Eliminación de edges (`{ type: 'remove', id }`). */
-    onEdgesChange: PropTypes.func,
-
-    /** El usuario conectó dos nodos. Recibe `{ source, target, sourceHandle, targetHandle }`. */
-    onConnect: PropTypes.func,
-
-    /** El usuario reconectó un edge a otro nodo. Recibe `(id, { source, target })`. */
-    onReconnect: PropTypes.func,
-
-    /** El usuario hizo click en un nodo. Recibe `(id, data)`. */
-    onNodeClick: PropTypes.func,
-
-    /** El usuario hizo click en un edge. Recibe `(id, data)`. */
-    onEdgeClick: PropTypes.func,
-
-    /** Intercepta el borrado antes de que ocurra. Async: retornar `false` cancela el borrado. Recibe `{ nodes, edges }` con los elementos a borrar. */
-    onBeforeDelete: PropTypes.func,
-
-    /** Se llama cuando cambia la selección. Recibe `{ nodes: [{id}], edges: [{id}] }` con los elementos seleccionados en ese momento. */
-    onSelectionChange: PropTypes.func
-  });
   var Canvas = /*#__PURE__*/React$2.forwardRef(function (_ref, ref) {
     var nodes = _ref.nodes,
         edges = _ref.edges,
@@ -14423,6 +14385,48 @@
     }, /*#__PURE__*/React__default["default"].createElement(Background, null), showControls && /*#__PURE__*/React__default["default"].createElement(DiagramControls, null), showMiniMap && /*#__PURE__*/React__default["default"].createElement(MiniMap, null)));
   });
   Canvas.displayName = 'Canvas';
+  ({
+    /** Nodos a renderizar en el diagrama. */
+    nodes: PropTypes.arrayOf(DiagramNodeShape),
+
+    /** Edges a renderizar en el diagrama. */
+    edges: PropTypes.arrayOf(DiagramEdgeShape),
+
+    /** Map de tipo de nodo → componente React custom. */
+    nodeComponents: PropTypes.objectOf(PropTypes.elementType),
+
+    /** Configuración del canvas. `readOnly` deshabilita drag y conexiones. `showControls` muestra los controles de zoom. `showMiniMap` muestra el minimapa. `resizableNodes` habilita el redimensionado de nodos. */
+    config: PropTypes.shape({
+      readOnly: PropTypes.bool,
+      showControls: PropTypes.bool,
+      showMiniMap: PropTypes.bool,
+      resizableNodes: PropTypes.bool
+    }),
+
+    /** Cambios de posición (`{ type: 'position', id, position }`), dimensiones (`{ type: 'dimensions', id, width, height }`) o eliminación (`{ type: 'remove', id }`) de nodos. */
+    onNodesChange: PropTypes.func,
+
+    /** Eliminación de edges (`{ type: 'remove', id }`). */
+    onEdgesChange: PropTypes.func,
+
+    /** El usuario conectó dos nodos. Recibe `{ source, target, sourceHandle, targetHandle }`. */
+    onConnect: PropTypes.func,
+
+    /** El usuario reconectó un edge a otro nodo. Recibe `(id, { source, target })`. */
+    onReconnect: PropTypes.func,
+
+    /** El usuario hizo click en un nodo. Recibe `(id, data)`. */
+    onNodeClick: PropTypes.func,
+
+    /** El usuario hizo click en un edge. Recibe `(id, data)`. */
+    onEdgeClick: PropTypes.func,
+
+    /** Intercepta el borrado antes de que ocurra. Async: retornar `false` cancela el borrado. Recibe `{ nodes, edges }` con los elementos a borrar. */
+    onBeforeDelete: PropTypes.func,
+
+    /** Se llama cuando cambia la selección. Recibe `{ nodes: [{id}], edges: [{id}] }` con los elementos seleccionados en ese momento. */
+    onSelectionChange: PropTypes.func
+  });
 
   var _excluded$c = ["nodes", "edges", "nodeComponents", "config"];
   var defaultConfig = {