@ajuhos/react-flow-chart - npm Package Compare versions

Comparing version 0.0.30 to 0.0.31

package.json

 {
   "name": "@ajuhos/react-flow-chart",
-  "version": "0.0.30",
+  "version": "0.0.31",
   "description": "A flexible, stateless flow chart library for react.",
@@ -5,0 +5,0 @@ "main": "src/index.js",

src/components/Node/Node.wrapper.js

@@ -15,2 +15,3 @@ "use strict";
     var _c = React.useState({ width: 0, height: 0 }), setSize = _c[1];
+    var _d = React.useState({ width: 0, height: 0 }), portsSize = _d[0], setPortsSize = _d[1];
     var isDragging = React.useRef(false);
@@ -66,3 +67,3 @@ var onStart = React.useCallback(function (e) {
       }, [node, compRef.current, size.width, size.height])*/
-    var children = (React.createElement(React.Fragment, null,
+    var children = (React.createElement("div", { style: { minWidth: portsSize.width, minHeight: portsSize.height } },
         React.createElement(react_resize_observer_1.default, { onResize: function (rect) {
@@ -74,3 +75,3 @@ var newSize = { width: rect.width, height: rect.height };
         React.createElement(NodeInner, { node: node, config: config }),
-        React.createElement(Ports, { node: node, config: config }, Object.keys(node.ports).map(function (portId) { return (React.createElement(__1.PortWrapper, { config: config, key: portId, offset: offset, selected: selected, selectedLink: selectedLink, hoveredLink: hoveredLink, hovered: hovered, node: node, port: node.ports[portId], Component: Port, onPortPositionChange: onPortPositionChange, onLinkStart: config.readonly ? utils_1.noop : onLinkStart, onLinkMove: config.readonly ? utils_1.noop : onLinkMove, onLinkComplete: onLinkComplete, onLinkCancel: onLinkCancel })); }))));
+        React.createElement(Ports, { node: node, config: config, onResize: setPortsSize }, Object.keys(node.ports).map(function (portId) { return (React.createElement(__1.PortWrapper, { config: config, key: portId, offset: offset, selected: selected, selectedLink: selectedLink, hoveredLink: hoveredLink, hovered: hovered, node: node, port: node.ports[portId], Component: Port, onPortPositionChange: onPortPositionChange, onLinkStart: config.readonly ? utils_1.noop : onLinkStart, onLinkMove: config.readonly ? utils_1.noop : onLinkMove, onLinkComplete: onLinkComplete, onLinkCancel: onLinkCancel })); }))));
     return (React.createElement(react_draggable_1.default, { bounds: "parent", axis: "both", position: node.position, grid: [1, 1], scale: zoomScale, onStart: onStart, onDrag: onDrag, onStop: onStop, disabled: config.readonly },
@@ -77,0 +78,0 @@ React.createElement(Component, { config: config, ref: compRef, children: children, onClick: onClick, onDoubleClick: onDoubleClick, onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave, isSelected: isSelected, node: node })));

src/components/Ports/Ports.default.d.ts

 import * as React from 'react';
-import { IConfig, INode } from '../../';
+import { IConfig, INode, ISize } from '../../';
 export interface IPortsDefaultProps {
@@ -7,3 +7,4 @@ config: IConfig;
     children: Array<React.ReactElement<any>>;
+    onResize: (size: ISize) => void;
 }
-export declare const PortsDefault: ({ children, config }: IPortsDefaultProps) => JSX.Element;
+export declare const PortsDefault: ({ children, config, onResize }: IPortsDefaultProps) => JSX.Element;

src/components/Ports/Ports.default.js

@@ -6,10 +6,35 @@ "use strict";
 var __1 = require("../../");
+var react_resize_observer_1 = require("react-resize-observer");
+var react_1 = require("react");
 exports.PortsDefault = function (_a) {
-    var children = _a.children, config = _a.config;
+    var children = _a.children, config = _a.config, onResize = _a.onResize;
+    var _b = react_1.useState(0), top = _b[0], setTop = _b[1];
+    var _c = react_1.useState(0), bottom = _c[0], setBottom = _c[1];
+    var _d = react_1.useState(0), right = _d[0], setRight = _d[1];
+    var _e = react_1.useState(0), left = _e[0], setLeft = _e[1];
+    var _f = react_1.useState(0), width = _f[0], setWidth = _f[1];
+    var _g = react_1.useState(0), height = _g[0], setHeight = _g[1];
+    react_1.useEffect(function () {
+        setWidth(Math.max(top, bottom));
+    }, [top, bottom]);
+    react_1.useEffect(function () {
+        setHeight(Math.max(left, right));
+    }, [left, right]);
+    react_1.useEffect(function () {
+        onResize({ width: width, height: height });
+    }, [width, height, onResize]);
     return (React.createElement("div", null,
-        React.createElement(__1.PortsGroupDefault, { config: config, side: "top" }, children.filter(function (child) { return ['input', 'top'].includes(child.props.port.type); })),
-        React.createElement(__1.PortsGroupDefault, { config: config, side: "bottom" }, children.filter(function (child) { return ['output', 'bottom'].includes(child.props.port.type); })),
-        React.createElement(__1.PortsGroupDefault, { config: config, side: "right" }, children.filter(function (child) { return ['right'].includes(child.props.port.type); })),
-        React.createElement(__1.PortsGroupDefault, { config: config, side: "left" }, children.filter(function (child) { return ['left'].includes(child.props.port.type); }))));
+        React.createElement(__1.PortsGroupDefault, { config: config, side: "top" },
+            React.createElement(react_resize_observer_1.default, { onResize: function (rect) { setTop(rect.width); } }),
+            children.filter(function (child) { return ['input', 'top'].includes(child.props.port.type); })),
+        React.createElement(__1.PortsGroupDefault, { config: config, side: "bottom" },
+            React.createElement(react_resize_observer_1.default, { onResize: function (rect) { setBottom(rect.width); } }),
+            children.filter(function (child) { return ['output', 'bottom'].includes(child.props.port.type); })),
+        React.createElement(__1.PortsGroupDefault, { config: config, side: "right" },
+            React.createElement(react_resize_observer_1.default, { onResize: function (rect) { setRight(rect.height); } }),
+            children.filter(function (child) { return ['right'].includes(child.props.port.type); })),
+        React.createElement(__1.PortsGroupDefault, { config: config, side: "left" },
+            React.createElement(react_resize_observer_1.default, { onResize: function (rect) { setLeft(rect.height); } }),
+            children.filter(function (child) { return ['left'].includes(child.props.port.type); }))));
 };
 //# sourceMappingURL=Ports.default.js.map

src/components/PortsGroup/PortsGroup.default.js

@@ -12,12 +12,12 @@ "use strict";
     if (props.side === 'top') {
-        return styled_components_1.css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n        width: 100%;\n        left: 0;\n        top: -12px;\n        flex-direction: row;\n        > div {\n          margin: 0 3px;\n        }\n      "], ["\n        width: 100%;\n        left: 0;\n        top: -12px;\n        flex-direction: row;\n        > div {\n          margin: 0 3px;\n        }\n      "])));
+        return styled_components_1.css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n        min-width: 100%;\n        left: 0;\n        top: -12px;\n        flex-direction: row;\n        > div {\n          margin: 0 3px;\n        }\n      "], ["\n        min-width: 100%;\n        left: 0;\n        top: -12px;\n        flex-direction: row;\n        > div {\n          margin: 0 3px;\n        }\n      "])));
     }
     else if (props.side === 'bottom') {
-        return styled_components_1.css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n        width: 100%;\n        left: 0;\n        bottom: -12px;\n        flex-direction: row;\n        > div {\n          margin: 0 3px;\n        }\n      "], ["\n        width: 100%;\n        left: 0;\n        bottom: -12px;\n        flex-direction: row;\n        > div {\n          margin: 0 3px;\n        }\n      "])));
+        return styled_components_1.css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n        min-width: 100%;\n        left: 0;\n        bottom: -12px;\n        flex-direction: row;\n        > div {\n          margin: 0 3px;\n        }\n      "], ["\n        min-width: 100%;\n        left: 0;\n        bottom: -12px;\n        flex-direction: row;\n        > div {\n          margin: 0 3px;\n        }\n      "])));
     }
     else if (props.side === 'left') {
-        return styled_components_1.css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n        height: 100%;\n        top: 0;\n        left: -12px;\n        flex-direction: column;\n        > div {\n          margin: 3px 0;\n        }\n      "], ["\n        height: 100%;\n        top: 0;\n        left: -12px;\n        flex-direction: column;\n        > div {\n          margin: 3px 0;\n        }\n      "])));
+        return styled_components_1.css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n        min-height: 100%;\n        top: 0;\n        left: -12px;\n        flex-direction: column;\n        > div {\n          margin: 3px 0;\n        }\n      "], ["\n        min-height: 100%;\n        top: 0;\n        left: -12px;\n        flex-direction: column;\n        > div {\n          margin: 3px 0;\n        }\n      "])));
     }
     else {
-        return styled_components_1.css(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n        height: 100%;\n        top: 0;\n        right: -12px;\n        flex-direction: column;\n        > div {\n          margin: 3px 0;\n        }\n      "], ["\n        height: 100%;\n        top: 0;\n        right: -12px;\n        flex-direction: column;\n        > div {\n          margin: 3px 0;\n        }\n      "])));
+        return styled_components_1.css(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n        min-height: 100%;\n        top: 0;\n        right: -12px;\n        flex-direction: column;\n        > div {\n          margin: 3px 0;\n        }\n      "], ["\n        min-height: 100%;\n        top: 0;\n        right: -12px;\n        flex-direction: column;\n        > div {\n          margin: 3px 0;\n        }\n      "])));
     }
@@ -24,0 +24,0 @@ });

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

186409

increased by1.72%

Lines of code

2781

increased by0.98%

No dependency changes