@keboola/flow-builder - npm Package Compare versions

Comparing version 0.1.1 to 0.1.2

dist/index.cjs.js

@@ -1,2 +0,2 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react");function t(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var n=t(e);!function(e,t){void 0===t&&(t={});var n=t.insertAt;if(e&&"undefined"!=typeof document){var r=document.head||document.getElementsByTagName("head")[0],o=document.createElement("style");o.type="text/css","top"===n&&r.firstChild?r.insertBefore(o,r.firstChild):r.appendChild(o),o.styleSheet?o.styleSheet.cssText=e:o.appendChild(document.createTextNode(e))}}(".flow-builder {\r\n  display: block;\r\n  position: relative;\r\n  box-sizing: content-box;\r\n  width: 100%;\r\n  height: 100%;\r\n}\r\n\r\n.flow-builder svg {\r\n  width: 100%;\r\n  height: 100%;\r\n  pointer-events: none;\r\n}\r\n\r\n.flow-builder svg path {\r\n  stroke: black;\r\n  fill: transparent;\r\n}\r\n\r\n.flow-builder--node {\r\n  position: absolute;\r\n  display: inline-flex;\r\n  flex-direction: row;\r\n  background-color: transparent;\r\n  transform: translate(-50%, -50%);\r\n}\r\n\r\n.flow-builder--content {\r\n  width: 100%;\r\n  height: 100%;\r\n  display: inline-flex;\r\n  flex-direction: row;\r\n}\r\n\r\n.flow-builder--group {\r\n  position: absolute;\r\n  display: inline-flex;\r\n  flex-direction: row;\r\n  background-color: transparent;\r\n  transform: translate(-50%, -50%);\r\n}\r\n\r\n.flow-builder--group .flow-builder--node {\r\n  position: static;\r\n  transform: none;\r\n}\r\n\r\n.flow-builder--group .flow-builder--node .flow-builder--io {\r\n  display: none;\r\n}\r\n\r\n.flow-builder--io {\r\n  position: absolute;\r\n  display: flex;\r\n  justify-content: space-evenly;\r\n  align-items: center;\r\n  width: 100%;\r\n  height: 16px;\r\n  margin: 0;\r\n  pointer-events: none;\r\n  background-color: transparent;\r\n}\r\n\r\n.flow-builder--io.flow-builder--io-top {\r\n  top: -8px;\r\n  bottom: auto;\r\n}\r\n\r\n.flow-builder--io.flow-builder--io-bottom {\r\n  top: auto;\r\n  bottom: -8px;\r\n}\r\n\r\n.flow-builder--io-port {\r\n  position: static;\r\n  margin: 0;\r\n  width: 16px;\r\n  height: 16px;\r\n  border-radius: 100%;\r\n  background-color: red;\r\n  pointer-events: all;\r\n}\r\n");class r{constructor(e,t){this.x=e,this.y=t}subtract(e){return new r(this.x-e.x,this.y-e.y)}toString(){return`[${this.x.toFixed(2)}, ${this.y.toFixed(2)}]`}css(){return{left:`${this.x}px`,top:`${this.y}px`}}}const o=(e=0,t=0)=>new r(e,t);o.from=e=>new r(e[0],e[1]),o.pmid=(e,t)=>new r((e.x+t.x)/2,(e.y+t.y)/2),o.rectMid=e=>new r(e.x+e.width/2,e.y+e.height/2);const l=(e,t)=>{const n=o.pmid(e,t),r=t.x-e.x,l=t.y-e.y;return`M ${e.x} ${e.y} Q ${e.x-r/32} ${e.y+l/2}, ${n.x} ${n.y} T ${t.x} ${t.y}`},i=(e,t)=>{let n=[];for(let r=0,o=e.length;r<o;++r){const o=e[r];t(o,r,e)?n.push(o):e[r-n.length]=o}return e.length-=n.length,n},a=/(.+)->(.+)/,d=t=>{const n=e.Children.toArray(t);return{remainder:n,inputs:i(n,(e=>{var t;return null===(t=null==e?void 0:e.type)||void 0===t?void 0:t._$isInput})).map((e=>e.props.name)),outputs:i(n,(e=>{var t;return null===(t=null==e?void 0:e.type)||void 0===t?void 0:t._$isOutput})).map((e=>e.props.name))}},u=e=>null,s=e=>null;u._$isInput=!0,s._$isOutput=!0;const p=e.createContext({parent:null});exports.Graph=({edges:t,children:r})=>{if(!r)return null;const[i,d]=e.useState([]),u=e.useRef(null);return e.useEffect((()=>{const e=u.current.getBoundingClientRect(),n=o(e.x,e.y);d(t.map((e=>((e,t,n)=>{const r=t.match(a);if(!r)throw new Error(`Invalid edge '${t}', the format should be \`\${source}.\${output}->\${destination}.\${input}`);const[i,d]=r.slice(1),u=e.querySelector(`div[data-name='${i}']`),s=e.querySelector(`div[data-name='${d}']`);if(!u||!s){const[e,n]=u?["destination","input"]:["source","output"];throw new Error(`Invalid edge '${t}', ${e} node does not exist or has no such ${n}`)}if("group"===u.parentElement.dataset.type||"group"===s.parentElement.dataset.type){const e="group"===u.parentElement.dataset.type?"source":"destination";throw new Error(`Invalid edge '${t}', ${e} node is inside a group`)}const p=o.rectMid(u.getBoundingClientRect()).subtract(n),c=o.rectMid(s.getBoundingClientRect()).subtract(n);return{edge:t,d:l(p,c)}})(u.current,e,n))))}),[t]),n.default.createElement("div",{ref:u,"data-type":"graph",className:"flow-builder"},n.default.createElement("svg",null,i.map((e=>e&&n.default.createElement("path",{key:e.edge,d:e.d})))),r)},exports.Group=e=>{if(!e.children)return null;const{inputs:t,outputs:r,remainder:l}=d(e.children);return console.log("Group",e,t,r),n.default.createElement(p.Provider,{value:{parent:"Group"}},n.default.createElement("div",{"data-type":"group","data-name":e.name,className:"flow-builder--group",style:o.from(e.position).css()},n.default.createElement("div",{className:"flow-builder--content"},l),n.default.createElement("div",{className:"flow-builder--io flow-builder--io-top"},t.map((t=>n.default.createElement("div",{className:"flow-builder--io-port",key:t,"data-name":`${e.name}.${t}`})))),n.default.createElement("div",{className:"flow-builder--io flow-builder--io-bottom"},r.map((t=>n.default.createElement("div",{className:"flow-builder--io-port",key:t,"data-name":`${e.name}.${t}`}))))))},exports.Input=u,exports.Node=t=>{if(!t.children)return null;const r=e.useContext(p),{inputs:l,outputs:i,remainder:a}=d(t.children);return console.log("Node",t,r,l,i),"Group"===r.parent&&(l.length>0||i.length>0)&&console.warn("Inputs/Outputs on Nodes within Groups are ignored"),n.default.createElement("div",{"data-type":"node","data-name":t.name,className:"flow-builder--node",style:t.position?o.from(t.position).css():{}},n.default.createElement("div",{className:"flow-builder--content"},a),n.default.createElement("div",{className:"flow-builder--io flow-builder--io-top"},"Group"!==r.parent&&l.map((e=>n.default.createElement("div",{className:"flow-builder--io-port",key:e,"data-name":`${t.name}.${e}`})))),n.default.createElement("div",{className:"flow-builder--io flow-builder--io-bottom"},"Group"!==r.parent&&i.map((e=>n.default.createElement("div",{className:"flow-builder--io-port",key:e,"data-name":`${t.name}.${e}`})))))},exports.Output=s;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react");function t(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var n=t(e);!function(e,t){void 0===t&&(t={});var n=t.insertAt;if(e&&"undefined"!=typeof document){var o=document.head||document.getElementsByTagName("head")[0],r=document.createElement("style");r.type="text/css","top"===n&&o.firstChild?o.insertBefore(r,o.firstChild):o.appendChild(r),r.styleSheet?r.styleSheet.cssText=e:r.appendChild(document.createTextNode(e))}}(".flow-builder {\n  display: block;\n  position: relative;\n  box-sizing: content-box;\n  width: 100%;\n  height: 100%;\n}\n\n.flow-builder svg {\n  width: 100%;\n  height: 100%;\n  pointer-events: none;\n}\n\n.flow-builder svg path {\n  stroke: black;\n  fill: transparent;\n}\n\n.flow-builder--node {\n  position: absolute;\n  display: inline-flex;\n  flex-direction: row;\n  background-color: transparent;\n  transform: translate(-50%, -50%);\n}\n\n.flow-builder--content {\n  width: 100%;\n  height: 100%;\n  display: inline-flex;\n  flex-direction: row;\n}\n\n.flow-builder--group {\n  position: absolute;\n  display: inline-flex;\n  flex-direction: row;\n  background-color: transparent;\n  transform: translate(-50%, -50%);\n}\n\n.flow-builder--group .flow-builder--node {\n  position: static;\n  transform: none;\n}\n\n.flow-builder--group .flow-builder--node .flow-builder--io {\n  display: none;\n}\n\n.flow-builder--io {\n  position: absolute;\n  display: flex;\n  justify-content: space-evenly;\n  align-items: center;\n  width: 100%;\n  height: 16px;\n  margin: 0;\n  pointer-events: none;\n  background-color: transparent;\n}\n\n.flow-builder--io.flow-builder--io-top {\n  top: -8px;\n  bottom: auto;\n}\n\n.flow-builder--io.flow-builder--io-bottom {\n  top: auto;\n  bottom: -8px;\n}\n\n.flow-builder--io-port {\n  position: static;\n  margin: 0;\n  width: 16px;\n  height: 16px;\n  border-radius: 100%;\n  background-color: red;\n  pointer-events: all;\n}\n");class o{constructor(e,t){this.x=e,this.y=t}subtract(e){return new o(this.x-e.x,this.y-e.y)}toString(){return`[${this.x.toFixed(2)}, ${this.y.toFixed(2)}]`}css(){return{left:`${this.x}px`,top:`${this.y}px`}}}const r=(e=0,t=0)=>new o(e,t);r.from=e=>new o(e[0],e[1]),r.pmid=(e,t)=>new o((e.x+t.x)/2,(e.y+t.y)/2),r.rectMid=e=>new o(e.x+e.width/2,e.y+e.height/2);const l=(e,t)=>{const n=r.pmid(e,t),o=t.x-e.x,l=t.y-e.y;return`M ${e.x} ${e.y} Q ${e.x-o/32} ${e.y+l/2}, ${n.x} ${n.y} T ${t.x} ${t.y}`},i=(e,t)=>{let n=[];for(let o=0,r=e.length;o<r;++o){const r=e[o];t(r,o,e)?n.push(r):e[o-n.length]=r}return e.length-=n.length,n},a=/(.+)->(.+)/,d=t=>{const n=e.Children.toArray(t);return{remainder:n,inputs:i(n,(e=>{var t;return null===(t=null==e?void 0:e.type)||void 0===t?void 0:t._$isInput})).map((e=>e.props.name)),outputs:i(n,(e=>{var t;return null===(t=null==e?void 0:e.type)||void 0===t?void 0:t._$isOutput})).map((e=>e.props.name))}},u=e=>null,s=e=>null;u._$isInput=!0,s._$isOutput=!0;const p=e.createContext({parent:null});exports.Graph=({edges:t,children:o})=>{if(!o)return null;const[i,d]=e.useState([]),u=e.useRef(null);return e.useEffect((()=>{const e=u.current.getBoundingClientRect(),n=r(e.x,e.y);d(t.map((e=>((e,t,n)=>{const o=t.match(a);if(!o)throw new Error(`Invalid edge '${t}', the format should be \`\${source}.\${output}->\${destination}.\${input}`);const[i,d]=o.slice(1),u=e.querySelector(`div[data-name='${i}']`),s=e.querySelector(`div[data-name='${d}']`);if(!u||!s){const[e,n]=u?["destination","input"]:["source","output"];throw new Error(`Invalid edge '${t}', ${e} node does not exist or has no such ${n}`)}if("group"===u.parentElement.dataset.type||"group"===s.parentElement.dataset.type){const e="group"===u.parentElement.dataset.type?"source":"destination";throw new Error(`Invalid edge '${t}', ${e} node is inside a group`)}const p=r.rectMid(u.getBoundingClientRect()).subtract(n),c=r.rectMid(s.getBoundingClientRect()).subtract(n);return{edge:t,d:l(p,c)}})(u.current,e,n))))}),[t]),n.default.createElement("div",{ref:u,"data-type":"graph",className:"flow-builder"},n.default.createElement("svg",null,i.map((e=>e&&n.default.createElement("path",{key:e.edge,d:e.d})))),o)},exports.Group=e=>{if(!e.children)return null;const{inputs:t,outputs:o,remainder:l}=d(e.children);return console.log("Group",e,t,o),n.default.createElement(p.Provider,{value:{parent:"Group"}},n.default.createElement("div",{"data-type":"group","data-name":e.name,className:"flow-builder--group",style:r.from(e.position).css()},n.default.createElement("div",{className:"flow-builder--content"},l),n.default.createElement("div",{className:"flow-builder--io flow-builder--io-top"},t.map((t=>n.default.createElement("div",{className:"flow-builder--io-port",key:t,"data-name":`${e.name}.${t}`})))),n.default.createElement("div",{className:"flow-builder--io flow-builder--io-bottom"},o.map((t=>n.default.createElement("div",{className:"flow-builder--io-port",key:t,"data-name":`${e.name}.${t}`}))))))},exports.Input=u,exports.Node=t=>{if(!t.children)return null;const o=e.useContext(p),{inputs:l,outputs:i,remainder:a}=d(t.children);return console.log("Node",t,o,l,i),"Group"===o.parent&&(l.length>0||i.length>0)&&console.warn("Inputs/Outputs on Nodes within Groups are ignored"),n.default.createElement("div",{"data-type":"node","data-name":t.name,className:"flow-builder--node",style:t.position?r.from(t.position).css():{}},n.default.createElement("div",{className:"flow-builder--content"},a),n.default.createElement("div",{className:"flow-builder--io flow-builder--io-top"},"Group"!==o.parent&&l.map((e=>n.default.createElement("div",{className:"flow-builder--io-port",key:e,"data-name":`${t.name}.${e}`})))),n.default.createElement("div",{className:"flow-builder--io flow-builder--io-bottom"},"Group"!==o.parent&&i.map((e=>n.default.createElement("div",{className:"flow-builder--io-port",key:e,"data-name":`${t.name}.${e}`})))))},exports.Output=s;
 //# sourceMappingURL=index.cjs.js.map

dist/index.esm.js

@@ -1,2 +0,2 @@
-import e,{Children as n,createContext as t,useContext as r,useState as o,useRef as i,useEffect as l}from"react";!function(e,n){void 0===n&&(n={});var t=n.insertAt;if(e&&"undefined"!=typeof document){var r=document.head||document.getElementsByTagName("head")[0],o=document.createElement("style");o.type="text/css","top"===t&&r.firstChild?r.insertBefore(o,r.firstChild):r.appendChild(o),o.styleSheet?o.styleSheet.cssText=e:o.appendChild(document.createTextNode(e))}}(".flow-builder {\r\n  display: block;\r\n  position: relative;\r\n  box-sizing: content-box;\r\n  width: 100%;\r\n  height: 100%;\r\n}\r\n\r\n.flow-builder svg {\r\n  width: 100%;\r\n  height: 100%;\r\n  pointer-events: none;\r\n}\r\n\r\n.flow-builder svg path {\r\n  stroke: black;\r\n  fill: transparent;\r\n}\r\n\r\n.flow-builder--node {\r\n  position: absolute;\r\n  display: inline-flex;\r\n  flex-direction: row;\r\n  background-color: transparent;\r\n  transform: translate(-50%, -50%);\r\n}\r\n\r\n.flow-builder--content {\r\n  width: 100%;\r\n  height: 100%;\r\n  display: inline-flex;\r\n  flex-direction: row;\r\n}\r\n\r\n.flow-builder--group {\r\n  position: absolute;\r\n  display: inline-flex;\r\n  flex-direction: row;\r\n  background-color: transparent;\r\n  transform: translate(-50%, -50%);\r\n}\r\n\r\n.flow-builder--group .flow-builder--node {\r\n  position: static;\r\n  transform: none;\r\n}\r\n\r\n.flow-builder--group .flow-builder--node .flow-builder--io {\r\n  display: none;\r\n}\r\n\r\n.flow-builder--io {\r\n  position: absolute;\r\n  display: flex;\r\n  justify-content: space-evenly;\r\n  align-items: center;\r\n  width: 100%;\r\n  height: 16px;\r\n  margin: 0;\r\n  pointer-events: none;\r\n  background-color: transparent;\r\n}\r\n\r\n.flow-builder--io.flow-builder--io-top {\r\n  top: -8px;\r\n  bottom: auto;\r\n}\r\n\r\n.flow-builder--io.flow-builder--io-bottom {\r\n  top: auto;\r\n  bottom: -8px;\r\n}\r\n\r\n.flow-builder--io-port {\r\n  position: static;\r\n  margin: 0;\r\n  width: 16px;\r\n  height: 16px;\r\n  border-radius: 100%;\r\n  background-color: red;\r\n  pointer-events: all;\r\n}\r\n");class a{constructor(e,n){this.x=e,this.y=n}subtract(e){return new a(this.x-e.x,this.y-e.y)}toString(){return`[${this.x.toFixed(2)}, ${this.y.toFixed(2)}]`}css(){return{left:`${this.x}px`,top:`${this.y}px`}}}const d=(e=0,n=0)=>new a(e,n);d.from=e=>new a(e[0],e[1]),d.pmid=(e,n)=>new a((e.x+n.x)/2,(e.y+n.y)/2),d.rectMid=e=>new a(e.x+e.width/2,e.y+e.height/2);const s=(e,n)=>{const t=d.pmid(e,n),r=n.x-e.x,o=n.y-e.y;return`M ${e.x} ${e.y} Q ${e.x-r/32} ${e.y+o/2}, ${t.x} ${t.y} T ${n.x} ${n.y}`},u=(e,n)=>{let t=[];for(let r=0,o=e.length;r<o;++r){const o=e[r];n(o,r,e)?t.push(o):e[r-t.length]=o}return e.length-=t.length,t},p=/(.+)->(.+)/,c=e=>{const t=n.toArray(e);return{remainder:t,inputs:u(t,(e=>{var n;return null===(n=null==e?void 0:e.type)||void 0===n?void 0:n._$isInput})).map((e=>e.props.name)),outputs:u(t,(e=>{var n;return null===(n=null==e?void 0:e.type)||void 0===n?void 0:n._$isOutput})).map((e=>e.props.name))}},m=e=>null,f=e=>null;m._$isInput=!0,f._$isOutput=!0;const h=t({parent:null}),w=n=>{if(!n.children)return null;const t=r(h),{inputs:o,outputs:i,remainder:l}=c(n.children);return console.log("Node",n,t,o,i),"Group"===t.parent&&(o.length>0||i.length>0)&&console.warn("Inputs/Outputs on Nodes within Groups are ignored"),e.createElement("div",{"data-type":"node","data-name":n.name,className:"flow-builder--node",style:n.position?d.from(n.position).css():{}},e.createElement("div",{className:"flow-builder--content"},l),e.createElement("div",{className:"flow-builder--io flow-builder--io-top"},"Group"!==t.parent&&o.map((t=>e.createElement("div",{className:"flow-builder--io-port",key:t,"data-name":`${n.name}.${t}`})))),e.createElement("div",{className:"flow-builder--io flow-builder--io-bottom"},"Group"!==t.parent&&i.map((t=>e.createElement("div",{className:"flow-builder--io-port",key:t,"data-name":`${n.name}.${t}`})))))},b=n=>{if(!n.children)return null;const{inputs:t,outputs:r,remainder:o}=c(n.children);return console.log("Group",n,t,r),e.createElement(h.Provider,{value:{parent:"Group"}},e.createElement("div",{"data-type":"group","data-name":n.name,className:"flow-builder--group",style:d.from(n.position).css()},e.createElement("div",{className:"flow-builder--content"},o),e.createElement("div",{className:"flow-builder--io flow-builder--io-top"},t.map((t=>e.createElement("div",{className:"flow-builder--io-port",key:t,"data-name":`${n.name}.${t}`})))),e.createElement("div",{className:"flow-builder--io flow-builder--io-bottom"},r.map((t=>e.createElement("div",{className:"flow-builder--io-port",key:t,"data-name":`${n.name}.${t}`}))))))},g=({edges:n,children:t})=>{if(!t)return null;const[r,a]=o([]),u=i(null);return l((()=>{const e=u.current.getBoundingClientRect(),t=d(e.x,e.y);a(n.map((e=>((e,n,t)=>{const r=n.match(p);if(!r)throw new Error(`Invalid edge '${n}', the format should be \`\${source}.\${output}->\${destination}.\${input}`);const[o,i]=r.slice(1),l=e.querySelector(`div[data-name='${o}']`),a=e.querySelector(`div[data-name='${i}']`);if(!l||!a){const[e,t]=l?["destination","input"]:["source","output"];throw new Error(`Invalid edge '${n}', ${e} node does not exist or has no such ${t}`)}if("group"===l.parentElement.dataset.type||"group"===a.parentElement.dataset.type){const e="group"===l.parentElement.dataset.type?"source":"destination";throw new Error(`Invalid edge '${n}', ${e} node is inside a group`)}const u=d.rectMid(l.getBoundingClientRect()).subtract(t),c=d.rectMid(a.getBoundingClientRect()).subtract(t);return{edge:n,d:s(u,c)}})(u.current,e,t))))}),[n]),e.createElement("div",{ref:u,"data-type":"graph",className:"flow-builder"},e.createElement("svg",null,r.map((n=>n&&e.createElement("path",{key:n.edge,d:n.d})))),t)};export{g as Graph,b as Group,m as Input,w as Node,f as Output};
+import e,{Children as n,createContext as t,useContext as o,useState as r,useRef as i,useEffect as l}from"react";!function(e,n){void 0===n&&(n={});var t=n.insertAt;if(e&&"undefined"!=typeof document){var o=document.head||document.getElementsByTagName("head")[0],r=document.createElement("style");r.type="text/css","top"===t&&o.firstChild?o.insertBefore(r,o.firstChild):o.appendChild(r),r.styleSheet?r.styleSheet.cssText=e:r.appendChild(document.createTextNode(e))}}(".flow-builder {\n  display: block;\n  position: relative;\n  box-sizing: content-box;\n  width: 100%;\n  height: 100%;\n}\n\n.flow-builder svg {\n  width: 100%;\n  height: 100%;\n  pointer-events: none;\n}\n\n.flow-builder svg path {\n  stroke: black;\n  fill: transparent;\n}\n\n.flow-builder--node {\n  position: absolute;\n  display: inline-flex;\n  flex-direction: row;\n  background-color: transparent;\n  transform: translate(-50%, -50%);\n}\n\n.flow-builder--content {\n  width: 100%;\n  height: 100%;\n  display: inline-flex;\n  flex-direction: row;\n}\n\n.flow-builder--group {\n  position: absolute;\n  display: inline-flex;\n  flex-direction: row;\n  background-color: transparent;\n  transform: translate(-50%, -50%);\n}\n\n.flow-builder--group .flow-builder--node {\n  position: static;\n  transform: none;\n}\n\n.flow-builder--group .flow-builder--node .flow-builder--io {\n  display: none;\n}\n\n.flow-builder--io {\n  position: absolute;\n  display: flex;\n  justify-content: space-evenly;\n  align-items: center;\n  width: 100%;\n  height: 16px;\n  margin: 0;\n  pointer-events: none;\n  background-color: transparent;\n}\n\n.flow-builder--io.flow-builder--io-top {\n  top: -8px;\n  bottom: auto;\n}\n\n.flow-builder--io.flow-builder--io-bottom {\n  top: auto;\n  bottom: -8px;\n}\n\n.flow-builder--io-port {\n  position: static;\n  margin: 0;\n  width: 16px;\n  height: 16px;\n  border-radius: 100%;\n  background-color: red;\n  pointer-events: all;\n}\n");class a{constructor(e,n){this.x=e,this.y=n}subtract(e){return new a(this.x-e.x,this.y-e.y)}toString(){return`[${this.x.toFixed(2)}, ${this.y.toFixed(2)}]`}css(){return{left:`${this.x}px`,top:`${this.y}px`}}}const d=(e=0,n=0)=>new a(e,n);d.from=e=>new a(e[0],e[1]),d.pmid=(e,n)=>new a((e.x+n.x)/2,(e.y+n.y)/2),d.rectMid=e=>new a(e.x+e.width/2,e.y+e.height/2);const s=(e,n)=>{const t=d.pmid(e,n),o=n.x-e.x,r=n.y-e.y;return`M ${e.x} ${e.y} Q ${e.x-o/32} ${e.y+r/2}, ${t.x} ${t.y} T ${n.x} ${n.y}`},u=(e,n)=>{let t=[];for(let o=0,r=e.length;o<r;++o){const r=e[o];n(r,o,e)?t.push(r):e[o-t.length]=r}return e.length-=t.length,t},p=/(.+)->(.+)/,c=e=>{const t=n.toArray(e);return{remainder:t,inputs:u(t,(e=>{var n;return null===(n=null==e?void 0:e.type)||void 0===n?void 0:n._$isInput})).map((e=>e.props.name)),outputs:u(t,(e=>{var n;return null===(n=null==e?void 0:e.type)||void 0===n?void 0:n._$isOutput})).map((e=>e.props.name))}},m=e=>null,f=e=>null;m._$isInput=!0,f._$isOutput=!0;const h=t({parent:null}),w=n=>{if(!n.children)return null;const t=o(h),{inputs:r,outputs:i,remainder:l}=c(n.children);return console.log("Node",n,t,r,i),"Group"===t.parent&&(r.length>0||i.length>0)&&console.warn("Inputs/Outputs on Nodes within Groups are ignored"),e.createElement("div",{"data-type":"node","data-name":n.name,className:"flow-builder--node",style:n.position?d.from(n.position).css():{}},e.createElement("div",{className:"flow-builder--content"},l),e.createElement("div",{className:"flow-builder--io flow-builder--io-top"},"Group"!==t.parent&&r.map((t=>e.createElement("div",{className:"flow-builder--io-port",key:t,"data-name":`${n.name}.${t}`})))),e.createElement("div",{className:"flow-builder--io flow-builder--io-bottom"},"Group"!==t.parent&&i.map((t=>e.createElement("div",{className:"flow-builder--io-port",key:t,"data-name":`${n.name}.${t}`})))))},b=n=>{if(!n.children)return null;const{inputs:t,outputs:o,remainder:r}=c(n.children);return console.log("Group",n,t,o),e.createElement(h.Provider,{value:{parent:"Group"}},e.createElement("div",{"data-type":"group","data-name":n.name,className:"flow-builder--group",style:d.from(n.position).css()},e.createElement("div",{className:"flow-builder--content"},r),e.createElement("div",{className:"flow-builder--io flow-builder--io-top"},t.map((t=>e.createElement("div",{className:"flow-builder--io-port",key:t,"data-name":`${n.name}.${t}`})))),e.createElement("div",{className:"flow-builder--io flow-builder--io-bottom"},o.map((t=>e.createElement("div",{className:"flow-builder--io-port",key:t,"data-name":`${n.name}.${t}`}))))))},g=({edges:n,children:t})=>{if(!t)return null;const[o,a]=r([]),u=i(null);return l((()=>{const e=u.current.getBoundingClientRect(),t=d(e.x,e.y);a(n.map((e=>((e,n,t)=>{const o=n.match(p);if(!o)throw new Error(`Invalid edge '${n}', the format should be \`\${source}.\${output}->\${destination}.\${input}`);const[r,i]=o.slice(1),l=e.querySelector(`div[data-name='${r}']`),a=e.querySelector(`div[data-name='${i}']`);if(!l||!a){const[e,t]=l?["destination","input"]:["source","output"];throw new Error(`Invalid edge '${n}', ${e} node does not exist or has no such ${t}`)}if("group"===l.parentElement.dataset.type||"group"===a.parentElement.dataset.type){const e="group"===l.parentElement.dataset.type?"source":"destination";throw new Error(`Invalid edge '${n}', ${e} node is inside a group`)}const u=d.rectMid(l.getBoundingClientRect()).subtract(t),c=d.rectMid(a.getBoundingClientRect()).subtract(t);return{edge:n,d:s(u,c)}})(u.current,e,t))))}),[n]),e.createElement("div",{ref:u,"data-type":"graph",className:"flow-builder"},e.createElement("svg",null,o.map((n=>n&&e.createElement("path",{key:n.edge,d:n.d})))),t)};export{g as Graph,b as Group,m as Input,w as Node,f as Output};
 //# sourceMappingURL=index.esm.js.map

dist/index.umd.js

@@ -1,2 +0,2 @@
-!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("react")):"function"==typeof define&&define.amd?define(["exports","react"],t):t((e="undefined"!=typeof globalThis?globalThis:e||self).Flow={},e.React)}(this,(function(e,t){"use strict";function n(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var r=n(t);!function(e,t){void 0===t&&(t={});var n=t.insertAt;if(e&&"undefined"!=typeof document){var r=document.head||document.getElementsByTagName("head")[0],o=document.createElement("style");o.type="text/css","top"===n&&r.firstChild?r.insertBefore(o,r.firstChild):r.appendChild(o),o.styleSheet?o.styleSheet.cssText=e:o.appendChild(document.createTextNode(e))}}(".flow-builder {\r\n  display: block;\r\n  position: relative;\r\n  box-sizing: content-box;\r\n  width: 100%;\r\n  height: 100%;\r\n}\r\n\r\n.flow-builder svg {\r\n  width: 100%;\r\n  height: 100%;\r\n  pointer-events: none;\r\n}\r\n\r\n.flow-builder svg path {\r\n  stroke: black;\r\n  fill: transparent;\r\n}\r\n\r\n.flow-builder--node {\r\n  position: absolute;\r\n  display: inline-flex;\r\n  flex-direction: row;\r\n  background-color: transparent;\r\n  transform: translate(-50%, -50%);\r\n}\r\n\r\n.flow-builder--content {\r\n  width: 100%;\r\n  height: 100%;\r\n  display: inline-flex;\r\n  flex-direction: row;\r\n}\r\n\r\n.flow-builder--group {\r\n  position: absolute;\r\n  display: inline-flex;\r\n  flex-direction: row;\r\n  background-color: transparent;\r\n  transform: translate(-50%, -50%);\r\n}\r\n\r\n.flow-builder--group .flow-builder--node {\r\n  position: static;\r\n  transform: none;\r\n}\r\n\r\n.flow-builder--group .flow-builder--node .flow-builder--io {\r\n  display: none;\r\n}\r\n\r\n.flow-builder--io {\r\n  position: absolute;\r\n  display: flex;\r\n  justify-content: space-evenly;\r\n  align-items: center;\r\n  width: 100%;\r\n  height: 16px;\r\n  margin: 0;\r\n  pointer-events: none;\r\n  background-color: transparent;\r\n}\r\n\r\n.flow-builder--io.flow-builder--io-top {\r\n  top: -8px;\r\n  bottom: auto;\r\n}\r\n\r\n.flow-builder--io.flow-builder--io-bottom {\r\n  top: auto;\r\n  bottom: -8px;\r\n}\r\n\r\n.flow-builder--io-port {\r\n  position: static;\r\n  margin: 0;\r\n  width: 16px;\r\n  height: 16px;\r\n  border-radius: 100%;\r\n  background-color: red;\r\n  pointer-events: all;\r\n}\r\n");class o{constructor(e,t){this.x=e,this.y=t}subtract(e){return new o(this.x-e.x,this.y-e.y)}toString(){return`[${this.x.toFixed(2)}, ${this.y.toFixed(2)}]`}css(){return{left:`${this.x}px`,top:`${this.y}px`}}}const i=(e=0,t=0)=>new o(e,t);i.from=e=>new o(e[0],e[1]),i.pmid=(e,t)=>new o((e.x+t.x)/2,(e.y+t.y)/2),i.rectMid=e=>new o(e.x+e.width/2,e.y+e.height/2);const l=(e,t)=>{const n=i.pmid(e,t),r=t.x-e.x,o=t.y-e.y;return`M ${e.x} ${e.y} Q ${e.x-r/32} ${e.y+o/2}, ${n.x} ${n.y} T ${t.x} ${t.y}`},a=(e,t)=>{let n=[];for(let r=0,o=e.length;r<o;++r){const o=e[r];t(o,r,e)?n.push(o):e[r-n.length]=o}return e.length-=n.length,n},d=/(.+)->(.+)/,u=e=>{const n=t.Children.toArray(e);return{remainder:n,inputs:a(n,(e=>{var t;return null===(t=null==e?void 0:e.type)||void 0===t?void 0:t._$isInput})).map((e=>e.props.name)),outputs:a(n,(e=>{var t;return null===(t=null==e?void 0:e.type)||void 0===t?void 0:t._$isOutput})).map((e=>e.props.name))}},s=e=>null,p=e=>null;s._$isInput=!0,p._$isOutput=!0;const c=t.createContext({parent:null});e.Graph=({edges:e,children:n})=>{if(!n)return null;const[o,a]=t.useState([]),u=t.useRef(null);return t.useEffect((()=>{const t=u.current.getBoundingClientRect(),n=i(t.x,t.y);a(e.map((e=>((e,t,n)=>{const r=t.match(d);if(!r)throw new Error(`Invalid edge '${t}', the format should be \`\${source}.\${output}->\${destination}.\${input}`);const[o,a]=r.slice(1),u=e.querySelector(`div[data-name='${o}']`),s=e.querySelector(`div[data-name='${a}']`);if(!u||!s){const[e,n]=u?["destination","input"]:["source","output"];throw new Error(`Invalid edge '${t}', ${e} node does not exist or has no such ${n}`)}if("group"===u.parentElement.dataset.type||"group"===s.parentElement.dataset.type){const e="group"===u.parentElement.dataset.type?"source":"destination";throw new Error(`Invalid edge '${t}', ${e} node is inside a group`)}const p=i.rectMid(u.getBoundingClientRect()).subtract(n),c=i.rectMid(s.getBoundingClientRect()).subtract(n);return{edge:t,d:l(p,c)}})(u.current,e,n))))}),[e]),r.default.createElement("div",{ref:u,"data-type":"graph",className:"flow-builder"},r.default.createElement("svg",null,o.map((e=>e&&r.default.createElement("path",{key:e.edge,d:e.d})))),n)},e.Group=e=>{if(!e.children)return null;const{inputs:t,outputs:n,remainder:o}=u(e.children);return console.log("Group",e,t,n),r.default.createElement(c.Provider,{value:{parent:"Group"}},r.default.createElement("div",{"data-type":"group","data-name":e.name,className:"flow-builder--group",style:i.from(e.position).css()},r.default.createElement("div",{className:"flow-builder--content"},o),r.default.createElement("div",{className:"flow-builder--io flow-builder--io-top"},t.map((t=>r.default.createElement("div",{className:"flow-builder--io-port",key:t,"data-name":`${e.name}.${t}`})))),r.default.createElement("div",{className:"flow-builder--io flow-builder--io-bottom"},n.map((t=>r.default.createElement("div",{className:"flow-builder--io-port",key:t,"data-name":`${e.name}.${t}`}))))))},e.Input=s,e.Node=e=>{if(!e.children)return null;const n=t.useContext(c),{inputs:o,outputs:l,remainder:a}=u(e.children);return console.log("Node",e,n,o,l),"Group"===n.parent&&(o.length>0||l.length>0)&&console.warn("Inputs/Outputs on Nodes within Groups are ignored"),r.default.createElement("div",{"data-type":"node","data-name":e.name,className:"flow-builder--node",style:e.position?i.from(e.position).css():{}},r.default.createElement("div",{className:"flow-builder--content"},a),r.default.createElement("div",{className:"flow-builder--io flow-builder--io-top"},"Group"!==n.parent&&o.map((t=>r.default.createElement("div",{className:"flow-builder--io-port",key:t,"data-name":`${e.name}.${t}`})))),r.default.createElement("div",{className:"flow-builder--io flow-builder--io-bottom"},"Group"!==n.parent&&l.map((t=>r.default.createElement("div",{className:"flow-builder--io-port",key:t,"data-name":`${e.name}.${t}`})))))},e.Output=p,Object.defineProperty(e,"__esModule",{value:!0})}));
+!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("react")):"function"==typeof define&&define.amd?define(["exports","react"],t):t((e="undefined"!=typeof globalThis?globalThis:e||self).Flow={},e.React)}(this,(function(e,t){"use strict";function n(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var o=n(t);!function(e,t){void 0===t&&(t={});var n=t.insertAt;if(e&&"undefined"!=typeof document){var o=document.head||document.getElementsByTagName("head")[0],r=document.createElement("style");r.type="text/css","top"===n&&o.firstChild?o.insertBefore(r,o.firstChild):o.appendChild(r),r.styleSheet?r.styleSheet.cssText=e:r.appendChild(document.createTextNode(e))}}(".flow-builder {\n  display: block;\n  position: relative;\n  box-sizing: content-box;\n  width: 100%;\n  height: 100%;\n}\n\n.flow-builder svg {\n  width: 100%;\n  height: 100%;\n  pointer-events: none;\n}\n\n.flow-builder svg path {\n  stroke: black;\n  fill: transparent;\n}\n\n.flow-builder--node {\n  position: absolute;\n  display: inline-flex;\n  flex-direction: row;\n  background-color: transparent;\n  transform: translate(-50%, -50%);\n}\n\n.flow-builder--content {\n  width: 100%;\n  height: 100%;\n  display: inline-flex;\n  flex-direction: row;\n}\n\n.flow-builder--group {\n  position: absolute;\n  display: inline-flex;\n  flex-direction: row;\n  background-color: transparent;\n  transform: translate(-50%, -50%);\n}\n\n.flow-builder--group .flow-builder--node {\n  position: static;\n  transform: none;\n}\n\n.flow-builder--group .flow-builder--node .flow-builder--io {\n  display: none;\n}\n\n.flow-builder--io {\n  position: absolute;\n  display: flex;\n  justify-content: space-evenly;\n  align-items: center;\n  width: 100%;\n  height: 16px;\n  margin: 0;\n  pointer-events: none;\n  background-color: transparent;\n}\n\n.flow-builder--io.flow-builder--io-top {\n  top: -8px;\n  bottom: auto;\n}\n\n.flow-builder--io.flow-builder--io-bottom {\n  top: auto;\n  bottom: -8px;\n}\n\n.flow-builder--io-port {\n  position: static;\n  margin: 0;\n  width: 16px;\n  height: 16px;\n  border-radius: 100%;\n  background-color: red;\n  pointer-events: all;\n}\n");class r{constructor(e,t){this.x=e,this.y=t}subtract(e){return new r(this.x-e.x,this.y-e.y)}toString(){return`[${this.x.toFixed(2)}, ${this.y.toFixed(2)}]`}css(){return{left:`${this.x}px`,top:`${this.y}px`}}}const i=(e=0,t=0)=>new r(e,t);i.from=e=>new r(e[0],e[1]),i.pmid=(e,t)=>new r((e.x+t.x)/2,(e.y+t.y)/2),i.rectMid=e=>new r(e.x+e.width/2,e.y+e.height/2);const l=(e,t)=>{const n=i.pmid(e,t),o=t.x-e.x,r=t.y-e.y;return`M ${e.x} ${e.y} Q ${e.x-o/32} ${e.y+r/2}, ${n.x} ${n.y} T ${t.x} ${t.y}`},a=(e,t)=>{let n=[];for(let o=0,r=e.length;o<r;++o){const r=e[o];t(r,o,e)?n.push(r):e[o-n.length]=r}return e.length-=n.length,n},d=/(.+)->(.+)/,u=e=>{const n=t.Children.toArray(e);return{remainder:n,inputs:a(n,(e=>{var t;return null===(t=null==e?void 0:e.type)||void 0===t?void 0:t._$isInput})).map((e=>e.props.name)),outputs:a(n,(e=>{var t;return null===(t=null==e?void 0:e.type)||void 0===t?void 0:t._$isOutput})).map((e=>e.props.name))}},s=e=>null,p=e=>null;s._$isInput=!0,p._$isOutput=!0;const c=t.createContext({parent:null});e.Graph=({edges:e,children:n})=>{if(!n)return null;const[r,a]=t.useState([]),u=t.useRef(null);return t.useEffect((()=>{const t=u.current.getBoundingClientRect(),n=i(t.x,t.y);a(e.map((e=>((e,t,n)=>{const o=t.match(d);if(!o)throw new Error(`Invalid edge '${t}', the format should be \`\${source}.\${output}->\${destination}.\${input}`);const[r,a]=o.slice(1),u=e.querySelector(`div[data-name='${r}']`),s=e.querySelector(`div[data-name='${a}']`);if(!u||!s){const[e,n]=u?["destination","input"]:["source","output"];throw new Error(`Invalid edge '${t}', ${e} node does not exist or has no such ${n}`)}if("group"===u.parentElement.dataset.type||"group"===s.parentElement.dataset.type){const e="group"===u.parentElement.dataset.type?"source":"destination";throw new Error(`Invalid edge '${t}', ${e} node is inside a group`)}const p=i.rectMid(u.getBoundingClientRect()).subtract(n),c=i.rectMid(s.getBoundingClientRect()).subtract(n);return{edge:t,d:l(p,c)}})(u.current,e,n))))}),[e]),o.default.createElement("div",{ref:u,"data-type":"graph",className:"flow-builder"},o.default.createElement("svg",null,r.map((e=>e&&o.default.createElement("path",{key:e.edge,d:e.d})))),n)},e.Group=e=>{if(!e.children)return null;const{inputs:t,outputs:n,remainder:r}=u(e.children);return console.log("Group",e,t,n),o.default.createElement(c.Provider,{value:{parent:"Group"}},o.default.createElement("div",{"data-type":"group","data-name":e.name,className:"flow-builder--group",style:i.from(e.position).css()},o.default.createElement("div",{className:"flow-builder--content"},r),o.default.createElement("div",{className:"flow-builder--io flow-builder--io-top"},t.map((t=>o.default.createElement("div",{className:"flow-builder--io-port",key:t,"data-name":`${e.name}.${t}`})))),o.default.createElement("div",{className:"flow-builder--io flow-builder--io-bottom"},n.map((t=>o.default.createElement("div",{className:"flow-builder--io-port",key:t,"data-name":`${e.name}.${t}`}))))))},e.Input=s,e.Node=e=>{if(!e.children)return null;const n=t.useContext(c),{inputs:r,outputs:l,remainder:a}=u(e.children);return console.log("Node",e,n,r,l),"Group"===n.parent&&(r.length>0||l.length>0)&&console.warn("Inputs/Outputs on Nodes within Groups are ignored"),o.default.createElement("div",{"data-type":"node","data-name":e.name,className:"flow-builder--node",style:e.position?i.from(e.position).css():{}},o.default.createElement("div",{className:"flow-builder--content"},a),o.default.createElement("div",{className:"flow-builder--io flow-builder--io-top"},"Group"!==n.parent&&r.map((t=>o.default.createElement("div",{className:"flow-builder--io-port",key:t,"data-name":`${e.name}.${t}`})))),o.default.createElement("div",{className:"flow-builder--io flow-builder--io-bottom"},"Group"!==n.parent&&l.map((t=>o.default.createElement("div",{className:"flow-builder--io-port",key:t,"data-name":`${e.name}.${t}`})))))},e.Output=p,Object.defineProperty(e,"__esModule",{value:!0})}));
 //# sourceMappingURL=index.umd.js.map

LICENSE.md

@@ -9,2 +9,2 @@ MIT License
 
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

package.json

 {
   "name": "@keboola/flow-builder",
   "description": "Flow graph rendering",
-  "version": "0.1.1",
+  "version": "0.1.2",
   "license": "MIT",
@@ -22,4 +22,4 @@ "repository": {
     "test": "jest",
-    "format": "prettier --write \"src/**/*.{js,jsx,ts,tsx}\"",
-    "format-check": "prettier --check \"src/**/*.{js,jsx,ts,tsx}\"",
+    "format": "prettier --write",
+    "format-check": "prettier --check",
     "prepare": "husky install"
@@ -26,0 +26,0 @@ },

README.md

@@ -7,8 +7,8 @@ # flow builder
 
+### Usage
+
 ```tsx
 import * as Flow from "@keboola/flow-builder";
 
-<Flow.Graph edges={[
-  "a.out->b+c+d.in"
-]}>
+<Flow.Graph edges={["a.out->b+c+d.in"]}>
   <Flow.Node name="a" position={[50, 50]}>
@@ -30,3 +30,3 @@ <Flow.Output name="out" />
   </Flow.Group>
-</Flow.Graph>
-```
+</Flow.Graph>;
+```

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

Long strings

Supply chain risk

Contains long string literals, which may be a sign of obfuscated or packed code.

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

Long strings

Supply chain risk

Contains long string literals, which may be a sign of obfuscated or packed code.

Found 1 instance in 1 package

Improved metrics

Number of lines in readme file

31

increased by3.33%

Worsened metrics

Total package byte prevSize

70904

decreased by-3.18%

Lines of code

204

decreased by-0.49%

No dependency changes