@keboola/flow-builder - npm Package Compare versions

Comparing version 0.5.1 to 0.5.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);class r{constructor(e,t){this.x=e,this.y=t}subtract(e){return new r(this.x-e.x,this.y-e.y)}dist(e){return Math.hypot(e.x-this.x,e.y-this.y)}toString(){return`[${this.x.toFixed(2)}, ${this.y.toFixed(2)}]`}css(){return{left:`${this.x}px`,top:`${this.y}px`}}array(){return[this.x,this.y]}}const l=(e=0,t=0)=>new r(e,t);l.from=e=>e instanceof MouseEvent?new r(e.clientX,e.clientY):new r(e[0],e[1]),l.pmid=(e,t)=>new r((e.x+t.x)/2,(e.y+t.y)/2),l.rectMid=e=>new r(e.x+e.width/2,e.y+e.height/2),l.offsetOf=e=>new r(e.left,e.top);const o=(...e)=>e.map((e=>"string"==typeof e?e:e[1]?e[0]:null)).filter((e=>null!==e)).join(" "),a=(e,t)=>{const n=l.pmid(l(e.x,e.y),l(t.x,t.y)),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}`},u=(e,t)=>{let n=[];for(let r=0,l=e.length;r<l;++r){const l=e[r];t(l,r,e)?n.push(l):e[r-n.length]=l}return e.length-=n.length,n},s=/(.+\..+)->(.+\..+)/;const i=t=>{const n=e.Children.toArray(t);return{remainder:n,inputs:u(n,(e=>{var t;return null===(t=null==e?void 0:e.type)||void 0===t?void 0:t._$isInput})).map((e=>e.props)),outputs:u(n,(e=>{var t;return null===(t=null==e?void 0:e.type)||void 0===t?void 0:t._$isOutput})).map((e=>e.props))}},d=e=>null,c=e=>null;d._$isInput=!0,c._$isOutput=!0;const p=e.createContext({parent:null});exports.Graph=({edges:t,children:r,style:o,calculatePath:u})=>{if(!r)return null;const[i,d]=e.useState([]),c=e.useRef(null);return e.useEffect((()=>{const e=c.current.getBoundingClientRect(),n=l(e.x,e.y);d(t.map((e=>((e,t,n,r=a)=>{const o=t.match(s);if(!o)throw new Error(`flow-builder: Invalid edge '${t}', the format should be \`\${source}.\${output}->\${destination}.\${input}`);const[u,i]=o.slice(1),d=e.querySelector(`div[data-name='${u}']`),c=e.querySelector(`div[data-name='${i}']`);if(!d||!c){const[e,n]=d?["destination","input"]:["source","output"];throw new Error(`flow-builder: Invalid edge '${t}', ${e} node does not exist or has no such ${n}`)}if("group"===d.parentElement.dataset.type||"group"===c.parentElement.dataset.type){const e="group"===d.parentElement.dataset.type?"source":"destination";throw new Error(`flow-builder: Invalid edge '${t}', ${e} node is inside a group`)}return{edge:t,d:r(l.rectMid(d.getBoundingClientRect()).subtract(n),l.rectMid(c.getBoundingClientRect()).subtract(n))}})(c.current,e,n,u))))}),[t,u]),n.default.createElement("div",{ref:c,"data-type":"graph",className:"flow-builder",style:Object.assign({},o)},n.default.createElement("svg",null,i.map((e=>n.default.createElement("path",{key:e.edge,d:e.d})))),r)},exports.Group=t=>{if(!t.children)return null;const{inputs:r,outputs:o,remainder:a}=i(t.children),u=e.useRef(null),[s]=e.useState({value:!1}),d=e.useCallback((e=>{var n,r,l;const o=null===(n=u.current)||void 0===n?void 0:n.getBoundingClientRect();if(!o)return!1;const a=e.clientX,i=e.clientY,d=o.x<a&&o.y<i&&o.x+o.width>a&&o.y+o.height>i;d!==s.value&&(s.value=d,s.value?null===(r=t.onMouseEnter)||void 0===r||r.call(t):null===(l=t.onMouseLeave)||void 0===l||l.call(t))}),[]);return e.useEffect((()=>(window.addEventListener("mousemove",d),()=>window.removeEventListener("mousemove",d))),[]),n.default.createElement(p.Provider,{value:{parent:"Group"}},n.default.createElement("div",{ref:u,"data-type":"group","data-name":t.name,className:"flow-builder--group",style:Object.assign(Object.assign({},t.style),l.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"},r.map((({name:e,children:r,style:l})=>n.default.createElement("div",{className:"flow-builder--io-port",key:e,"data-name":`${t.name}.${e}`,style:l},r)))),n.default.createElement("div",{className:"flow-builder--io flow-builder--io-bottom"},o.map((({name:e,children:r,style:l})=>n.default.createElement("div",{className:"flow-builder--io-port",key:e,"data-name":`${t.name}.${e}`,style:l},r))))))},exports.Input=d,exports.Node=t=>{if(!t.children)return null;const r=e.useContext(p),{inputs:a,outputs:u,remainder:s}=i(t.children);"Group"===r.parent&&(a.length>0||u.length>0)&&console.warn("flow-builder: Inputs/Outputs on Nodes within Groups are ignored");const[d,c]=function({onDragStart:t,onDragMove:n,onDragEnd:r,onSelect:o}){const a=[t,n,r,o],[u]=e.useState({start:null,current:null,node:null,container:null}),s=()=>u.container?l.offsetOf(u.container.getBoundingClientRect()):l();return e.useEffect((()=>{const e=e=>{if(!u.start)return;e.preventDefault();const r=l.from(e),o=r.subtract(s());u.current?(u.current=o,null==n||n(o.array())):u.start.dist(r)>20&&(u.current=o,null==t||t(o.array()))},a=e=>{const t=l.from(e).subtract(s());(u.current||u.start)&&e.preventDefault(),u.current?null==r||r(t.array()):u.start&&(null==o||o()),u.start=null,u.current=null};return window.addEventListener("mousemove",e),window.addEventListener("mouseup",a),()=>{window.removeEventListener("mousemove",e),window.removeEventListener("mouseup",a)}}),a),[e.useCallback((e=>{e&&u.node!==e&&(u.node=e,u.container=function(e,t){for(const n of function*(e){let t=e.parentElement;for(;t;)yield t,t=t.parentElement}(e))if(t(n))return n;return null}(e,(e=>"div"===e.tagName.toLowerCase()&&"graph"===e.dataset.type&&e.classList.contains("flow-builder"))))}),a),e.useCallback((e=>{e.preventDefault(),u.start=l(e.clientX,e.clientY)}),a)]}(t.draggable?t:{onSelect:t.onSelect});return n.default.createElement("div",{ref:d,"data-type":"node","data-name":t.name,className:o("flow-builder--node",[t.className,!!t.className]),style:Object.assign(Object.assign({},t.style),t.position?l.from(t.position).css():{}),onMouseDown:c,tabIndex:t.onSelect&&0,onKeyDown:e=>{var n;return"Enter"===e.key&&(null===(n=t.onSelect)||void 0===n?void 0:n.call(t))},role:t.onSelect&&"button"},n.default.createElement("div",{className:"flow-builder--content"},s),n.default.createElement("div",{className:"flow-builder--io flow-builder--io-top"},"Group"!==r.parent&&a.map((({name:e,children:r,style:l})=>n.default.createElement("div",{className:"flow-builder--io-port",key:e,"data-name":`${t.name}.${e}`,style:l},r)))),n.default.createElement("div",{className:"flow-builder--io flow-builder--io-bottom"},"Group"!==r.parent&&u.map((({name:e,children:r,style:l})=>n.default.createElement("div",{className:"flow-builder--io-port",key:e,"data-name":`${t.name}.${e}`,style:l},r)))))},exports.Output=c;
+"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);class r{constructor(e,t){this.x=e,this.y=t}subtract(e){return new r(this.x-e.x,this.y-e.y)}dist(e){return Math.hypot(e.x-this.x,e.y-this.y)}toString(){return`[${this.x.toFixed(2)}, ${this.y.toFixed(2)}]`}css(){return{left:`${this.x}px`,top:`${this.y}px`}}array(){return[this.x,this.y]}}const l=(e=0,t=0)=>new r(e,t);l.from=e=>e instanceof MouseEvent?new r(e.clientX,e.clientY):new r(e[0],e[1]),l.pmid=(e,t)=>new r((e.x+t.x)/2,(e.y+t.y)/2),l.rectMid=e=>new r(e.x+e.width/2,e.y+e.height/2),l.offsetOf=e=>new r(e.left,e.top);const o=(...e)=>e.map((e=>"string"==typeof e?e:e[1]?e[0]:null)).filter((e=>null!==e)).join(" "),a=(e,t)=>{const n=l.pmid(l(e.x,e.y),l(t.x,t.y)),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}`},u=(e,t)=>{let n=[];for(let r=0,l=e.length;r<l;++r){const l=e[r];t(l,r,e)?n.push(l):e[r-n.length]=l}return e.length-=n.length,n},s=/(.+\..+)->(.+\..+)/;function i(...e){return t=>{for(let n=0;n<e.length;++n){const r=e[n];r&&("function"==typeof r?r(t):r.current=t)}}}const d=t=>{const n=e.Children.toArray(t);return{remainder:n,inputs:u(n,(e=>{var t;return null===(t=null==e?void 0:e.type)||void 0===t?void 0:t._$isInput})).map((e=>e.props)),outputs:u(n,(e=>{var t;return null===(t=null==e?void 0:e.type)||void 0===t?void 0:t._$isOutput})).map((e=>e.props))}},c=e=>null,p=e=>null;c._$isInput=!0,p._$isOutput=!0;const f=e.createContext({parent:null});const m=n.default.forwardRef(((t,r)=>{if(!t.children)return null;const a=e.useContext(f),{inputs:u,outputs:s,remainder:c}=d(t.children);"Group"===a.parent&&(u.length>0||s.length>0)&&console.warn("flow-builder: Inputs/Outputs on Nodes within Groups are ignored");const[p,m]=function({onDragStart:t,onDragMove:n,onDragEnd:r,onSelect:o}){const a=[t,n,r,o],[u]=e.useState({start:null,current:null,node:null,container:null}),s=()=>u.container?l.offsetOf(u.container.getBoundingClientRect()):l();return e.useEffect((()=>{const e=e=>{if(!u.start)return;e.preventDefault();const r=l.from(e),o=r.subtract(s());u.current?(u.current=o,null==n||n(o.array())):u.start.dist(r)>20&&(u.current=o,null==t||t(o.array()))},a=e=>{const t=l.from(e).subtract(s());(u.current||u.start)&&e.preventDefault(),u.current?null==r||r(t.array()):u.start&&(null==o||o()),u.start=null,u.current=null};return window.addEventListener("mousemove",e),window.addEventListener("mouseup",a),()=>{window.removeEventListener("mousemove",e),window.removeEventListener("mouseup",a)}}),a),[e.useCallback((e=>{e&&u.node!==e&&(u.node=e,u.container=function(e,t){for(const n of function*(e){let t=e.parentElement;for(;t;)yield t,t=t.parentElement}(e))if(t(n))return n;return null}(e,(e=>"div"===e.tagName.toLowerCase()&&"graph"===e.dataset.type&&e.classList.contains("flow-builder"))))}),a),e.useCallback((e=>{e.preventDefault(),u.start=l(e.clientX,e.clientY)}),a)]}(t.draggable?t:{onSelect:t.onSelect});return n.default.createElement("div",{ref:i(p,r),"data-type":"node","data-name":t.name,className:o("flow-builder--node",[t.className,!!t.className]),style:Object.assign(Object.assign({},t.style),t.position?l.from(t.position).css():{}),onMouseDown:m,tabIndex:t.onSelect&&0,onKeyDown:e=>{var n;return"Enter"===e.key&&(null===(n=t.onSelect)||void 0===n?void 0:n.call(t))},role:t.onSelect&&"button"},n.default.createElement("div",{className:"flow-builder--content"},c),n.default.createElement("div",{className:"flow-builder--io flow-builder--io-top"},"Group"!==a.parent&&u.map((({name:e,children:r,style:l})=>n.default.createElement("div",{className:"flow-builder--io-port",key:e,"data-name":`${t.name}.${e}`,style:l},r)))),n.default.createElement("div",{className:"flow-builder--io flow-builder--io-bottom"},"Group"!==a.parent&&s.map((({name:e,children:r,style:l})=>n.default.createElement("div",{className:"flow-builder--io-port",key:e,"data-name":`${t.name}.${e}`,style:l},r)))))}));exports.Graph=({edges:t,children:r,style:o,calculatePath:u})=>{if(!r)return null;const[i,d]=e.useState([]),c=e.useRef(null);return e.useEffect((()=>{const e=c.current.getBoundingClientRect(),n=l(e.x,e.y);d(t.map((e=>((e,t,n,r=a)=>{const o=t.match(s);if(!o)throw new Error(`flow-builder: Invalid edge '${t}', the format should be \`\${source}.\${output}->\${destination}.\${input}`);const[u,i]=o.slice(1),d=e.querySelector(`div[data-name='${u}']`),c=e.querySelector(`div[data-name='${i}']`);if(!d||!c){const[e,n]=d?["destination","input"]:["source","output"];throw new Error(`flow-builder: Invalid edge '${t}', ${e} node does not exist or has no such ${n}`)}if("group"===d.parentElement.dataset.type||"group"===c.parentElement.dataset.type){const e="group"===d.parentElement.dataset.type?"source":"destination";throw new Error(`flow-builder: Invalid edge '${t}', ${e} node is inside a group`)}return{edge:t,d:r(l.rectMid(d.getBoundingClientRect()).subtract(n),l.rectMid(c.getBoundingClientRect()).subtract(n))}})(c.current,e,n,u))))}),[t,u]),n.default.createElement("div",{ref:c,"data-type":"graph",className:"flow-builder",style:Object.assign({},o)},n.default.createElement("svg",null,i.map((e=>n.default.createElement("path",{key:e.edge,d:e.d})))),r)},exports.Group=t=>{if(!t.children)return null;const{inputs:r,outputs:o,remainder:a}=d(t.children),u=e.useRef(null),[s]=e.useState({value:!1}),i=e.useCallback((e=>{var n,r,l;const o=null===(n=u.current)||void 0===n?void 0:n.getBoundingClientRect();if(!o)return!1;const a=e.clientX,i=e.clientY,d=o.x<a&&o.y<i&&o.x+o.width>a&&o.y+o.height>i;d!==s.value&&(s.value=d,s.value?null===(r=t.onMouseEnter)||void 0===r||r.call(t):null===(l=t.onMouseLeave)||void 0===l||l.call(t))}),[]);return e.useEffect((()=>(window.addEventListener("mousemove",i),()=>window.removeEventListener("mousemove",i))),[]),n.default.createElement(f.Provider,{value:{parent:"Group"}},n.default.createElement("div",{ref:u,"data-type":"group","data-name":t.name,className:"flow-builder--group",style:Object.assign(Object.assign({},t.style),l.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"},r.map((({name:e,children:r,style:l})=>n.default.createElement("div",{className:"flow-builder--io-port",key:e,"data-name":`${t.name}.${e}`,style:l},r)))),n.default.createElement("div",{className:"flow-builder--io flow-builder--io-bottom"},o.map((({name:e,children:r,style:l})=>n.default.createElement("div",{className:"flow-builder--io-port",key:e,"data-name":`${t.name}.${e}`,style:l},r))))))},exports.Input=c,exports.Node=m,exports.Output=p;
 //# sourceMappingURL=index.cjs.js.map

dist/index.esm.js

@@ -1,2 +0,2 @@
-import e,{Children as t,createContext as n,useCallback as r,useState as l,useEffect as o,useContext as a,useRef as i}from"react";class s{constructor(e,t){this.x=e,this.y=t}subtract(e){return new s(this.x-e.x,this.y-e.y)}dist(e){return Math.hypot(e.x-this.x,e.y-this.y)}toString(){return`[${this.x.toFixed(2)}, ${this.y.toFixed(2)}]`}css(){return{left:`${this.x}px`,top:`${this.y}px`}}array(){return[this.x,this.y]}}const u=(e=0,t=0)=>new s(e,t);u.from=e=>e instanceof MouseEvent?new s(e.clientX,e.clientY):new s(e[0],e[1]),u.pmid=(e,t)=>new s((e.x+t.x)/2,(e.y+t.y)/2),u.rectMid=e=>new s(e.x+e.width/2,e.y+e.height/2),u.offsetOf=e=>new s(e.left,e.top);const c=(...e)=>e.map((e=>"string"==typeof e?e:e[1]?e[0]:null)).filter((e=>null!==e)).join(" "),d=(e,t)=>{const n=u.pmid(u(e.x,e.y),u(t.x,t.y)),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}`},m=(e,t)=>{let n=[];for(let r=0,l=e.length;r<l;++r){const l=e[r];t(l,r,e)?n.push(l):e[r-n.length]=l}return e.length-=n.length,n},p=/(.+\..+)->(.+\..+)/;const f=e=>{const n=t.toArray(e);return{remainder:n,inputs:m(n,(e=>{var t;return null===(t=null==e?void 0:e.type)||void 0===t?void 0:t._$isInput})).map((e=>e.props)),outputs:m(n,(e=>{var t;return null===(t=null==e?void 0:e.type)||void 0===t?void 0:t._$isOutput})).map((e=>e.props))}},y=e=>null,v=e=>null;y._$isInput=!0,v._$isOutput=!0;const w=n({parent:null});const h=t=>{if(!t.children)return null;const n=a(w),{inputs:i,outputs:s,remainder:d}=f(t.children);"Group"===n.parent&&(i.length>0||s.length>0)&&console.warn("flow-builder: Inputs/Outputs on Nodes within Groups are ignored");const[m,p]=function({onDragStart:e,onDragMove:t,onDragEnd:n,onSelect:a}){const i=[e,t,n,a],[s]=l({start:null,current:null,node:null,container:null}),c=()=>s.container?u.offsetOf(s.container.getBoundingClientRect()):u();return o((()=>{const r=n=>{if(!s.start)return;n.preventDefault();const r=u.from(n),l=r.subtract(c());s.current?(s.current=l,null==t||t(l.array())):s.start.dist(r)>20&&(s.current=l,null==e||e(l.array()))},l=e=>{const t=u.from(e).subtract(c());(s.current||s.start)&&e.preventDefault(),s.current?null==n||n(t.array()):s.start&&(null==a||a()),s.start=null,s.current=null};return window.addEventListener("mousemove",r),window.addEventListener("mouseup",l),()=>{window.removeEventListener("mousemove",r),window.removeEventListener("mouseup",l)}}),i),[r((e=>{e&&s.node!==e&&(s.node=e,s.container=function(e,t){for(const n of function*(e){let t=e.parentElement;for(;t;)yield t,t=t.parentElement}(e))if(t(n))return n;return null}(e,(e=>"div"===e.tagName.toLowerCase()&&"graph"===e.dataset.type&&e.classList.contains("flow-builder"))))}),i),r((e=>{e.preventDefault(),s.start=u(e.clientX,e.clientY)}),i)]}(t.draggable?t:{onSelect:t.onSelect});return e.createElement("div",{ref:m,"data-type":"node","data-name":t.name,className:c("flow-builder--node",[t.className,!!t.className]),style:Object.assign(Object.assign({},t.style),t.position?u.from(t.position).css():{}),onMouseDown:p,tabIndex:t.onSelect&&0,onKeyDown:e=>{var n;return"Enter"===e.key&&(null===(n=t.onSelect)||void 0===n?void 0:n.call(t))},role:t.onSelect&&"button"},e.createElement("div",{className:"flow-builder--content"},d),e.createElement("div",{className:"flow-builder--io flow-builder--io-top"},"Group"!==n.parent&&i.map((({name:n,children:r,style:l})=>e.createElement("div",{className:"flow-builder--io-port",key:n,"data-name":`${t.name}.${n}`,style:l},r)))),e.createElement("div",{className:"flow-builder--io flow-builder--io-bottom"},"Group"!==n.parent&&s.map((({name:n,children:r,style:l})=>e.createElement("div",{className:"flow-builder--io-port",key:n,"data-name":`${t.name}.${n}`,style:l},r)))))},g=t=>{if(!t.children)return null;const{inputs:n,outputs:a,remainder:s}=f(t.children),c=i(null),[d]=l({value:!1}),m=r((e=>{var n,r,l;const o=null===(n=c.current)||void 0===n?void 0:n.getBoundingClientRect();if(!o)return!1;const a=e.clientX,i=e.clientY,s=o.x<a&&o.y<i&&o.x+o.width>a&&o.y+o.height>i;s!==d.value&&(d.value=s,d.value?null===(r=t.onMouseEnter)||void 0===r||r.call(t):null===(l=t.onMouseLeave)||void 0===l||l.call(t))}),[]);return o((()=>(window.addEventListener("mousemove",m),()=>window.removeEventListener("mousemove",m))),[]),e.createElement(w.Provider,{value:{parent:"Group"}},e.createElement("div",{ref:c,"data-type":"group","data-name":t.name,className:"flow-builder--group",style:Object.assign(Object.assign({},t.style),u.from(t.position).css())},e.createElement("div",{className:"flow-builder--content"},s),e.createElement("div",{className:"flow-builder--io flow-builder--io-top"},n.map((({name:n,children:r,style:l})=>e.createElement("div",{className:"flow-builder--io-port",key:n,"data-name":`${t.name}.${n}`,style:l},r)))),e.createElement("div",{className:"flow-builder--io flow-builder--io-bottom"},a.map((({name:n,children:r,style:l})=>e.createElement("div",{className:"flow-builder--io-port",key:n,"data-name":`${t.name}.${n}`,style:l},r))))))},b=({edges:t,children:n,style:r,calculatePath:a})=>{if(!n)return null;const[s,c]=l([]),m=i(null);return o((()=>{const e=m.current.getBoundingClientRect(),n=u(e.x,e.y);c(t.map((e=>((e,t,n,r=d)=>{const l=t.match(p);if(!l)throw new Error(`flow-builder: Invalid edge '${t}', the format should be \`\${source}.\${output}->\${destination}.\${input}`);const[o,a]=l.slice(1),i=e.querySelector(`div[data-name='${o}']`),s=e.querySelector(`div[data-name='${a}']`);if(!i||!s){const[e,n]=i?["destination","input"]:["source","output"];throw new Error(`flow-builder: Invalid edge '${t}', ${e} node does not exist or has no such ${n}`)}if("group"===i.parentElement.dataset.type||"group"===s.parentElement.dataset.type){const e="group"===i.parentElement.dataset.type?"source":"destination";throw new Error(`flow-builder: Invalid edge '${t}', ${e} node is inside a group`)}return{edge:t,d:r(u.rectMid(i.getBoundingClientRect()).subtract(n),u.rectMid(s.getBoundingClientRect()).subtract(n))}})(m.current,e,n,a))))}),[t,a]),e.createElement("div",{ref:m,"data-type":"graph",className:"flow-builder",style:Object.assign({},r)},e.createElement("svg",null,s.map((t=>e.createElement("path",{key:t.edge,d:t.d})))),n)};export{b as Graph,g as Group,y as Input,h as Node,v as Output};
+import e,{Children as t,createContext as n,useCallback as r,useState as o,useEffect as l,useContext as a,useRef as i}from"react";class s{constructor(e,t){this.x=e,this.y=t}subtract(e){return new s(this.x-e.x,this.y-e.y)}dist(e){return Math.hypot(e.x-this.x,e.y-this.y)}toString(){return`[${this.x.toFixed(2)}, ${this.y.toFixed(2)}]`}css(){return{left:`${this.x}px`,top:`${this.y}px`}}array(){return[this.x,this.y]}}const u=(e=0,t=0)=>new s(e,t);u.from=e=>e instanceof MouseEvent?new s(e.clientX,e.clientY):new s(e[0],e[1]),u.pmid=(e,t)=>new s((e.x+t.x)/2,(e.y+t.y)/2),u.rectMid=e=>new s(e.x+e.width/2,e.y+e.height/2),u.offsetOf=e=>new s(e.left,e.top);const c=(...e)=>e.map((e=>"string"==typeof e?e:e[1]?e[0]:null)).filter((e=>null!==e)).join(" "),d=(e,t)=>{const n=u.pmid(u(e.x,e.y),u(t.x,t.y)),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}`},m=(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},p=/(.+\..+)->(.+\..+)/;function f(...e){return t=>{for(let n=0;n<e.length;++n){const r=e[n];r&&("function"==typeof r?r(t):r.current=t)}}}const y=e=>{const n=t.toArray(e);return{remainder:n,inputs:m(n,(e=>{var t;return null===(t=null==e?void 0:e.type)||void 0===t?void 0:t._$isInput})).map((e=>e.props)),outputs:m(n,(e=>{var t;return null===(t=null==e?void 0:e.type)||void 0===t?void 0:t._$isOutput})).map((e=>e.props))}},v=e=>null,w=e=>null;v._$isInput=!0,w._$isOutput=!0;const h=n({parent:null});const g=e.forwardRef(((t,n)=>{if(!t.children)return null;const i=a(h),{inputs:s,outputs:d,remainder:m}=y(t.children);"Group"===i.parent&&(s.length>0||d.length>0)&&console.warn("flow-builder: Inputs/Outputs on Nodes within Groups are ignored");const[p,v]=function({onDragStart:e,onDragMove:t,onDragEnd:n,onSelect:a}){const i=[e,t,n,a],[s]=o({start:null,current:null,node:null,container:null}),c=()=>s.container?u.offsetOf(s.container.getBoundingClientRect()):u();return l((()=>{const r=n=>{if(!s.start)return;n.preventDefault();const r=u.from(n),o=r.subtract(c());s.current?(s.current=o,null==t||t(o.array())):s.start.dist(r)>20&&(s.current=o,null==e||e(o.array()))},o=e=>{const t=u.from(e).subtract(c());(s.current||s.start)&&e.preventDefault(),s.current?null==n||n(t.array()):s.start&&(null==a||a()),s.start=null,s.current=null};return window.addEventListener("mousemove",r),window.addEventListener("mouseup",o),()=>{window.removeEventListener("mousemove",r),window.removeEventListener("mouseup",o)}}),i),[r((e=>{e&&s.node!==e&&(s.node=e,s.container=function(e,t){for(const n of function*(e){let t=e.parentElement;for(;t;)yield t,t=t.parentElement}(e))if(t(n))return n;return null}(e,(e=>"div"===e.tagName.toLowerCase()&&"graph"===e.dataset.type&&e.classList.contains("flow-builder"))))}),i),r((e=>{e.preventDefault(),s.start=u(e.clientX,e.clientY)}),i)]}(t.draggable?t:{onSelect:t.onSelect});return e.createElement("div",{ref:f(p,n),"data-type":"node","data-name":t.name,className:c("flow-builder--node",[t.className,!!t.className]),style:Object.assign(Object.assign({},t.style),t.position?u.from(t.position).css():{}),onMouseDown:v,tabIndex:t.onSelect&&0,onKeyDown:e=>{var n;return"Enter"===e.key&&(null===(n=t.onSelect)||void 0===n?void 0:n.call(t))},role:t.onSelect&&"button"},e.createElement("div",{className:"flow-builder--content"},m),e.createElement("div",{className:"flow-builder--io flow-builder--io-top"},"Group"!==i.parent&&s.map((({name:n,children:r,style:o})=>e.createElement("div",{className:"flow-builder--io-port",key:n,"data-name":`${t.name}.${n}`,style:o},r)))),e.createElement("div",{className:"flow-builder--io flow-builder--io-bottom"},"Group"!==i.parent&&d.map((({name:n,children:r,style:o})=>e.createElement("div",{className:"flow-builder--io-port",key:n,"data-name":`${t.name}.${n}`,style:o},r)))))})),b=t=>{if(!t.children)return null;const{inputs:n,outputs:a,remainder:s}=y(t.children),c=i(null),[d]=o({value:!1}),m=r((e=>{var n,r,o;const l=null===(n=c.current)||void 0===n?void 0:n.getBoundingClientRect();if(!l)return!1;const a=e.clientX,i=e.clientY,s=l.x<a&&l.y<i&&l.x+l.width>a&&l.y+l.height>i;s!==d.value&&(d.value=s,d.value?null===(r=t.onMouseEnter)||void 0===r||r.call(t):null===(o=t.onMouseLeave)||void 0===o||o.call(t))}),[]);return l((()=>(window.addEventListener("mousemove",m),()=>window.removeEventListener("mousemove",m))),[]),e.createElement(h.Provider,{value:{parent:"Group"}},e.createElement("div",{ref:c,"data-type":"group","data-name":t.name,className:"flow-builder--group",style:Object.assign(Object.assign({},t.style),u.from(t.position).css())},e.createElement("div",{className:"flow-builder--content"},s),e.createElement("div",{className:"flow-builder--io flow-builder--io-top"},n.map((({name:n,children:r,style:o})=>e.createElement("div",{className:"flow-builder--io-port",key:n,"data-name":`${t.name}.${n}`,style:o},r)))),e.createElement("div",{className:"flow-builder--io flow-builder--io-bottom"},a.map((({name:n,children:r,style:o})=>e.createElement("div",{className:"flow-builder--io-port",key:n,"data-name":`${t.name}.${n}`,style:o},r))))))},$=({edges:t,children:n,style:r,calculatePath:a})=>{if(!n)return null;const[s,c]=o([]),m=i(null);return l((()=>{const e=m.current.getBoundingClientRect(),n=u(e.x,e.y);c(t.map((e=>((e,t,n,r=d)=>{const o=t.match(p);if(!o)throw new Error(`flow-builder: Invalid edge '${t}', the format should be \`\${source}.\${output}->\${destination}.\${input}`);const[l,a]=o.slice(1),i=e.querySelector(`div[data-name='${l}']`),s=e.querySelector(`div[data-name='${a}']`);if(!i||!s){const[e,n]=i?["destination","input"]:["source","output"];throw new Error(`flow-builder: Invalid edge '${t}', ${e} node does not exist or has no such ${n}`)}if("group"===i.parentElement.dataset.type||"group"===s.parentElement.dataset.type){const e="group"===i.parentElement.dataset.type?"source":"destination";throw new Error(`flow-builder: Invalid edge '${t}', ${e} node is inside a group`)}return{edge:t,d:r(u.rectMid(i.getBoundingClientRect()).subtract(n),u.rectMid(s.getBoundingClientRect()).subtract(n))}})(m.current,e,n,a))))}),[t,a]),e.createElement("div",{ref:m,"data-type":"graph",className:"flow-builder",style:Object.assign({},r)},e.createElement("svg",null,s.map((t=>e.createElement("path",{key:t.edge,d:t.d})))),n)};export{$ as Graph,b as Group,v as Input,g as Node,w 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);class l{constructor(e,t){this.x=e,this.y=t}subtract(e){return new l(this.x-e.x,this.y-e.y)}dist(e){return Math.hypot(e.x-this.x,e.y-this.y)}toString(){return`[${this.x.toFixed(2)}, ${this.y.toFixed(2)}]`}css(){return{left:`${this.x}px`,top:`${this.y}px`}}array(){return[this.x,this.y]}}const o=(e=0,t=0)=>new l(e,t);o.from=e=>e instanceof MouseEvent?new l(e.clientX,e.clientY):new l(e[0],e[1]),o.pmid=(e,t)=>new l((e.x+t.x)/2,(e.y+t.y)/2),o.rectMid=e=>new l(e.x+e.width/2,e.y+e.height/2),o.offsetOf=e=>new l(e.left,e.top);const a=(...e)=>e.map((e=>"string"==typeof e?e:e[1]?e[0]:null)).filter((e=>null!==e)).join(" "),u=(e,t)=>{const n=o.pmid(o(e.x,e.y),o(t.x,t.y)),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,l=e.length;r<l;++r){const l=e[r];t(l,r,e)?n.push(l):e[r-n.length]=l}return e.length-=n.length,n},s=/(.+\..+)->(.+\..+)/;const d=e=>{const n=t.Children.toArray(e);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)),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))}},c=e=>null,f=e=>null;c._$isInput=!0,f._$isOutput=!0;const p=t.createContext({parent:null});e.Graph=({edges:e,children:n,style:l,calculatePath:a})=>{if(!n)return null;const[i,d]=t.useState([]),c=t.useRef(null);return t.useEffect((()=>{const t=c.current.getBoundingClientRect(),n=o(t.x,t.y);d(e.map((e=>((e,t,n,r=u)=>{const l=t.match(s);if(!l)throw new Error(`flow-builder: Invalid edge '${t}', the format should be \`\${source}.\${output}->\${destination}.\${input}`);const[a,i]=l.slice(1),d=e.querySelector(`div[data-name='${a}']`),c=e.querySelector(`div[data-name='${i}']`);if(!d||!c){const[e,n]=d?["destination","input"]:["source","output"];throw new Error(`flow-builder: Invalid edge '${t}', ${e} node does not exist or has no such ${n}`)}if("group"===d.parentElement.dataset.type||"group"===c.parentElement.dataset.type){const e="group"===d.parentElement.dataset.type?"source":"destination";throw new Error(`flow-builder: Invalid edge '${t}', ${e} node is inside a group`)}return{edge:t,d:r(o.rectMid(d.getBoundingClientRect()).subtract(n),o.rectMid(c.getBoundingClientRect()).subtract(n))}})(c.current,e,n,a))))}),[e,a]),r.default.createElement("div",{ref:c,"data-type":"graph",className:"flow-builder",style:Object.assign({},l)},r.default.createElement("svg",null,i.map((e=>r.default.createElement("path",{key:e.edge,d:e.d})))),n)},e.Group=e=>{if(!e.children)return null;const{inputs:n,outputs:l,remainder:a}=d(e.children),u=t.useRef(null),[i]=t.useState({value:!1}),s=t.useCallback((t=>{var n,r,l;const o=null===(n=u.current)||void 0===n?void 0:n.getBoundingClientRect();if(!o)return!1;const a=t.clientX,s=t.clientY,d=o.x<a&&o.y<s&&o.x+o.width>a&&o.y+o.height>s;d!==i.value&&(i.value=d,i.value?null===(r=e.onMouseEnter)||void 0===r||r.call(e):null===(l=e.onMouseLeave)||void 0===l||l.call(e))}),[]);return t.useEffect((()=>(window.addEventListener("mousemove",s),()=>window.removeEventListener("mousemove",s))),[]),r.default.createElement(p.Provider,{value:{parent:"Group"}},r.default.createElement("div",{ref:u,"data-type":"group","data-name":e.name,className:"flow-builder--group",style:Object.assign(Object.assign({},e.style),o.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"},n.map((({name:t,children:n,style:l})=>r.default.createElement("div",{className:"flow-builder--io-port",key:t,"data-name":`${e.name}.${t}`,style:l},n)))),r.default.createElement("div",{className:"flow-builder--io flow-builder--io-bottom"},l.map((({name:t,children:n,style:l})=>r.default.createElement("div",{className:"flow-builder--io-port",key:t,"data-name":`${e.name}.${t}`,style:l},n))))))},e.Input=c,e.Node=e=>{if(!e.children)return null;const n=t.useContext(p),{inputs:l,outputs:u,remainder:i}=d(e.children);"Group"===n.parent&&(l.length>0||u.length>0)&&console.warn("flow-builder: Inputs/Outputs on Nodes within Groups are ignored");const[s,c]=function({onDragStart:e,onDragMove:n,onDragEnd:r,onSelect:l}){const a=[e,n,r,l],[u]=t.useState({start:null,current:null,node:null,container:null}),i=()=>u.container?o.offsetOf(u.container.getBoundingClientRect()):o();return t.useEffect((()=>{const t=t=>{if(!u.start)return;t.preventDefault();const r=o.from(t),l=r.subtract(i());u.current?(u.current=l,null==n||n(l.array())):u.start.dist(r)>20&&(u.current=l,null==e||e(l.array()))},a=e=>{const t=o.from(e).subtract(i());(u.current||u.start)&&e.preventDefault(),u.current?null==r||r(t.array()):u.start&&(null==l||l()),u.start=null,u.current=null};return window.addEventListener("mousemove",t),window.addEventListener("mouseup",a),()=>{window.removeEventListener("mousemove",t),window.removeEventListener("mouseup",a)}}),a),[t.useCallback((e=>{e&&u.node!==e&&(u.node=e,u.container=function(e,t){for(const n of function*(e){let t=e.parentElement;for(;t;)yield t,t=t.parentElement}(e))if(t(n))return n;return null}(e,(e=>"div"===e.tagName.toLowerCase()&&"graph"===e.dataset.type&&e.classList.contains("flow-builder"))))}),a),t.useCallback((e=>{e.preventDefault(),u.start=o(e.clientX,e.clientY)}),a)]}(e.draggable?e:{onSelect:e.onSelect});return r.default.createElement("div",{ref:s,"data-type":"node","data-name":e.name,className:a("flow-builder--node",[e.className,!!e.className]),style:Object.assign(Object.assign({},e.style),e.position?o.from(e.position).css():{}),onMouseDown:c,tabIndex:e.onSelect&&0,onKeyDown:t=>{var n;return"Enter"===t.key&&(null===(n=e.onSelect)||void 0===n?void 0:n.call(e))},role:e.onSelect&&"button"},r.default.createElement("div",{className:"flow-builder--content"},i),r.default.createElement("div",{className:"flow-builder--io flow-builder--io-top"},"Group"!==n.parent&&l.map((({name:t,children:n,style:l})=>r.default.createElement("div",{className:"flow-builder--io-port",key:t,"data-name":`${e.name}.${t}`,style:l},n)))),r.default.createElement("div",{className:"flow-builder--io flow-builder--io-bottom"},"Group"!==n.parent&&u.map((({name:t,children:n,style:l})=>r.default.createElement("div",{className:"flow-builder--io-port",key:t,"data-name":`${e.name}.${t}`,style:l},n)))))},e.Output=f,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 r=n(t);class l{constructor(e,t){this.x=e,this.y=t}subtract(e){return new l(this.x-e.x,this.y-e.y)}dist(e){return Math.hypot(e.x-this.x,e.y-this.y)}toString(){return`[${this.x.toFixed(2)}, ${this.y.toFixed(2)}]`}css(){return{left:`${this.x}px`,top:`${this.y}px`}}array(){return[this.x,this.y]}}const o=(e=0,t=0)=>new l(e,t);o.from=e=>e instanceof MouseEvent?new l(e.clientX,e.clientY):new l(e[0],e[1]),o.pmid=(e,t)=>new l((e.x+t.x)/2,(e.y+t.y)/2),o.rectMid=e=>new l(e.x+e.width/2,e.y+e.height/2),o.offsetOf=e=>new l(e.left,e.top);const a=(...e)=>e.map((e=>"string"==typeof e?e:e[1]?e[0]:null)).filter((e=>null!==e)).join(" "),u=(e,t)=>{const n=o.pmid(o(e.x,e.y),o(t.x,t.y)),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,l=e.length;r<l;++r){const l=e[r];t(l,r,e)?n.push(l):e[r-n.length]=l}return e.length-=n.length,n},s=/(.+\..+)->(.+\..+)/;function d(...e){return t=>{for(let n=0;n<e.length;++n){const r=e[n];r&&("function"==typeof r?r(t):r.current=t)}}}const c=e=>{const n=t.Children.toArray(e);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)),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))}},f=e=>null,p=e=>null;f._$isInput=!0,p._$isOutput=!0;const m=t.createContext({parent:null});const y=r.default.forwardRef(((e,n)=>{if(!e.children)return null;const l=t.useContext(m),{inputs:u,outputs:i,remainder:s}=c(e.children);"Group"===l.parent&&(u.length>0||i.length>0)&&console.warn("flow-builder: Inputs/Outputs on Nodes within Groups are ignored");const[f,p]=function({onDragStart:e,onDragMove:n,onDragEnd:r,onSelect:l}){const a=[e,n,r,l],[u]=t.useState({start:null,current:null,node:null,container:null}),i=()=>u.container?o.offsetOf(u.container.getBoundingClientRect()):o();return t.useEffect((()=>{const t=t=>{if(!u.start)return;t.preventDefault();const r=o.from(t),l=r.subtract(i());u.current?(u.current=l,null==n||n(l.array())):u.start.dist(r)>20&&(u.current=l,null==e||e(l.array()))},a=e=>{const t=o.from(e).subtract(i());(u.current||u.start)&&e.preventDefault(),u.current?null==r||r(t.array()):u.start&&(null==l||l()),u.start=null,u.current=null};return window.addEventListener("mousemove",t),window.addEventListener("mouseup",a),()=>{window.removeEventListener("mousemove",t),window.removeEventListener("mouseup",a)}}),a),[t.useCallback((e=>{e&&u.node!==e&&(u.node=e,u.container=function(e,t){for(const n of function*(e){let t=e.parentElement;for(;t;)yield t,t=t.parentElement}(e))if(t(n))return n;return null}(e,(e=>"div"===e.tagName.toLowerCase()&&"graph"===e.dataset.type&&e.classList.contains("flow-builder"))))}),a),t.useCallback((e=>{e.preventDefault(),u.start=o(e.clientX,e.clientY)}),a)]}(e.draggable?e:{onSelect:e.onSelect});return r.default.createElement("div",{ref:d(f,n),"data-type":"node","data-name":e.name,className:a("flow-builder--node",[e.className,!!e.className]),style:Object.assign(Object.assign({},e.style),e.position?o.from(e.position).css():{}),onMouseDown:p,tabIndex:e.onSelect&&0,onKeyDown:t=>{var n;return"Enter"===t.key&&(null===(n=e.onSelect)||void 0===n?void 0:n.call(e))},role:e.onSelect&&"button"},r.default.createElement("div",{className:"flow-builder--content"},s),r.default.createElement("div",{className:"flow-builder--io flow-builder--io-top"},"Group"!==l.parent&&u.map((({name:t,children:n,style:l})=>r.default.createElement("div",{className:"flow-builder--io-port",key:t,"data-name":`${e.name}.${t}`,style:l},n)))),r.default.createElement("div",{className:"flow-builder--io flow-builder--io-bottom"},"Group"!==l.parent&&i.map((({name:t,children:n,style:l})=>r.default.createElement("div",{className:"flow-builder--io-port",key:t,"data-name":`${e.name}.${t}`,style:l},n)))))}));e.Graph=({edges:e,children:n,style:l,calculatePath:a})=>{if(!n)return null;const[i,d]=t.useState([]),c=t.useRef(null);return t.useEffect((()=>{const t=c.current.getBoundingClientRect(),n=o(t.x,t.y);d(e.map((e=>((e,t,n,r=u)=>{const l=t.match(s);if(!l)throw new Error(`flow-builder: Invalid edge '${t}', the format should be \`\${source}.\${output}->\${destination}.\${input}`);const[a,i]=l.slice(1),d=e.querySelector(`div[data-name='${a}']`),c=e.querySelector(`div[data-name='${i}']`);if(!d||!c){const[e,n]=d?["destination","input"]:["source","output"];throw new Error(`flow-builder: Invalid edge '${t}', ${e} node does not exist or has no such ${n}`)}if("group"===d.parentElement.dataset.type||"group"===c.parentElement.dataset.type){const e="group"===d.parentElement.dataset.type?"source":"destination";throw new Error(`flow-builder: Invalid edge '${t}', ${e} node is inside a group`)}return{edge:t,d:r(o.rectMid(d.getBoundingClientRect()).subtract(n),o.rectMid(c.getBoundingClientRect()).subtract(n))}})(c.current,e,n,a))))}),[e,a]),r.default.createElement("div",{ref:c,"data-type":"graph",className:"flow-builder",style:Object.assign({},l)},r.default.createElement("svg",null,i.map((e=>r.default.createElement("path",{key:e.edge,d:e.d})))),n)},e.Group=e=>{if(!e.children)return null;const{inputs:n,outputs:l,remainder:a}=c(e.children),u=t.useRef(null),[i]=t.useState({value:!1}),s=t.useCallback((t=>{var n,r,l;const o=null===(n=u.current)||void 0===n?void 0:n.getBoundingClientRect();if(!o)return!1;const a=t.clientX,s=t.clientY,d=o.x<a&&o.y<s&&o.x+o.width>a&&o.y+o.height>s;d!==i.value&&(i.value=d,i.value?null===(r=e.onMouseEnter)||void 0===r||r.call(e):null===(l=e.onMouseLeave)||void 0===l||l.call(e))}),[]);return t.useEffect((()=>(window.addEventListener("mousemove",s),()=>window.removeEventListener("mousemove",s))),[]),r.default.createElement(m.Provider,{value:{parent:"Group"}},r.default.createElement("div",{ref:u,"data-type":"group","data-name":e.name,className:"flow-builder--group",style:Object.assign(Object.assign({},e.style),o.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"},n.map((({name:t,children:n,style:l})=>r.default.createElement("div",{className:"flow-builder--io-port",key:t,"data-name":`${e.name}.${t}`,style:l},n)))),r.default.createElement("div",{className:"flow-builder--io flow-builder--io-bottom"},l.map((({name:t,children:n,style:l})=>r.default.createElement("div",{className:"flow-builder--io-port",key:t,"data-name":`${e.name}.${t}`,style:l},n))))))},e.Input=f,e.Node=y,e.Output=p,Object.defineProperty(e,"__esModule",{value:!0})}));
 //# sourceMappingURL=index.umd.js.map

dist/Node.d.ts

 import React from "react";
-export declare const Node: React.FC<Node.Props>;
+export declare const Node: React.ForwardRefExoticComponent<Node.Props & React.RefAttributes<HTMLDivElement>>;
 export declare namespace Node {
@@ -4,0 +4,0 @@ type Props = {

dist/util.d.ts

@@ -102,2 +102,7 @@ export declare class Vector2 {
 export declare function findParent(start: HTMLElement, predicate: (node: HTMLElement) => boolean): HTMLElement | null;
+export declare type RefCallback<T extends Element> = (instance: T | null) => void;
+export declare type MutableRefObject<T extends Element> = {
+    current: T | null;
+};
+export declare function multiref<T extends Element>(...refs: (RefCallback<T> | MutableRefObject<T> | null)[]): (instance: T | null) => void;
 export declare const NOOP: () => void;

package.json

 {
   "name": "@keboola/flow-builder",
   "description": "Flow graph rendering",
-  "version": "0.5.1",
+  "version": "0.5.2",
   "license": "MIT",
@@ -6,0 +6,0 @@ "repository": {

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

103429

increased by3.35%

Lines of code

335

increased by2.13%

No dependency changes