@keboola/flow-builder - npm Package Compare versions

Comparing version 0.6.2 to 0.8.0

dist/context.d.ts

 export declare const GraphContext: import("react").Context<{
     parent: string | null;
 }>;

dist/drag.d.ts

@@ -1,2 +0,2 @@
-export declare type DragEventHandler = (position: [number, number], client?: [number, number]) => void;
+export type DragEventHandler = (position: [number, number], client?: [number, number]) => void;
 export declare function useDrag({ onDragStart, onDragMove, onDragEnd, onSelect }: {
@@ -3,0 +3,0 @@ onDragStart?: DragEventHandler;

dist/Graph.d.ts

 import React from "react";
-export declare const Graph: ({ children }: Graph.Props) => JSX.Element | null;
+export declare const Graph: ({ children }: Graph.Props) => React.JSX.Element | null;
 export declare namespace Graph {
@@ -4,0 +4,0 @@ type Props = {

dist/Group.d.ts

 import React from "react";
-export declare const Group: (props: Group.Props) => JSX.Element | null;
+export declare const Group: (props: Group.Props) => React.JSX.Element | null;
 export declare namespace Group {
@@ -4,0 +4,0 @@ type Props = {

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 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)}css(){return{left:`${this.x}px`,top:`${this.y}px`}}array(){return[this.x,this.y]}}const r=(e=0,t=0)=>new l(e,t);r.from=e=>e instanceof MouseEvent?new l(e.clientX,e.clientY):new l(e[0],e[1]),r.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(" "),o=(e,t)=>{let n=[];for(let l=0,r=e.length;l<r;++l){const r=e[l];t(r,l,e)?n.push(r):e[l-n.length]=r}return e.length-=n.length,n};function s(...e){return t=>{for(let n=0;n<e.length;++n){const l=e[n];l&&("function"==typeof l?l(t):l.current=t)}}}const u=t=>{const n=e.Children.toArray(t);return{remainder:n,inputs:o(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:o(n,(e=>{var t;return null===(t=null==e?void 0:e.type)||void 0===t?void 0:t._$isOutput})).map((e=>e.props))}},i=e=>null,c=e=>null;i._$isInput=!0,c._$isOutput=!0;const d=e.createContext({parent:null});const f=n.default.forwardRef(((t,l)=>{if(!t.children)return null;const o=e.useContext(d),{inputs:i,outputs:c,remainder:f}=u(t.children);"Group"===o.parent&&(i.length>0||c.length>0)&&console.warn("flow-builder: Inputs/Outputs on Nodes within Groups are ignored");const[m,p]=function({onDragStart:t,onDragMove:n,onDragEnd:l,onSelect:a}){const o=[t,n,l,a],[s]=e.useState({start:null,current:null,node:null,container:null}),u=()=>s.container?r.offsetOf(s.container.getBoundingClientRect()):r();return e.useEffect((()=>{const e=e=>{if(!s.start)return;e.preventDefault();const l=r.from(e),a=l.subtract(u());s.current?(s.current=a,null==n||n(a.array(),l.array())):s.start.dist(l)>20&&(s.current=a,null==t||t(a.array()))},o=e=>{const t=r.from(e).subtract(u());(s.current||s.start)&&e.preventDefault(),s.current?null==l||l(t.array()):s.start&&(null==a||a()),s.start=null,s.current=null};return window.addEventListener("mousemove",e),window.addEventListener("mouseup",o),()=>{window.removeEventListener("mousemove",e),window.removeEventListener("mouseup",o)}}),o),[e.useCallback((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"))))}),o),e.useCallback((e=>{s.start=r(e.clientX,e.clientY)}),o)]}(t.draggable?t:{onSelect:t.onSelect});return n.default.createElement("div",{ref:s(m,l),"data-type":"node","data-name":t.name,className:a("flow-builder--node",[t.className,!!t.className]),style:Object.assign(Object.assign({},t.style),t.position?r.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"},n.default.createElement("div",{className:"flow-builder--content"},f),n.default.createElement("div",{className:"flow-builder--io flow-builder--io-top"},"Group"!==o.parent&&i.map((({name:e,children:l,style:r})=>n.default.createElement("div",{className:"flow-builder--io-port",key:e,"data-name":`${t.name}.${e}`,style:r},l)))),n.default.createElement("div",{className:"flow-builder--io flow-builder--io-bottom"},"Group"!==o.parent&&c.map((({name:e,children:l,style:r})=>n.default.createElement("div",{className:"flow-builder--io-port",key:e,"data-name":`${t.name}.${e}`,style:r},l)))))}));exports.Graph=({children:e})=>e?n.default.createElement("div",{"data-type":"graph",className:"flow-builder"},e):null,exports.Group=t=>{if(!t.children)return null;const{inputs:l,outputs:o,remainder:s}=u(t.children),i=[t.onMouseEnter,t.onMouseLeave],c=e.useRef(null),[f]=e.useState({value:!1}),m=e.useCallback((e=>{var n,l,r;const a=null===(n=c.current)||void 0===n?void 0:n.getBoundingClientRect();if(!a)return!1;const o=e.clientX,s=e.clientY,u=a.x<o&&a.y<s&&a.x+a.width>o&&a.y+a.height>s;u!==f.value&&(f.value=u,f.value?null===(l=t.onMouseEnter)||void 0===l||l.call(t):null===(r=t.onMouseLeave)||void 0===r||r.call(t))}),i);return e.useEffect((()=>(window.addEventListener("mousemove",m,{passive:!0}),()=>window.removeEventListener("mousemove",m))),i),n.default.createElement(d.Provider,{value:{parent:"Group"}},n.default.createElement("div",{ref:c,"data-type":"group","data-name":t.name,className:a("flow-builder--group",[t.className,!!t.className]),style:Object.assign(Object.assign({},t.style),t.position?r.from(t.position).css():{})},n.default.createElement("div",{className:"flow-builder--content"},s),n.default.createElement("div",{className:"flow-builder--io flow-builder--io-top"},l.map((({name:e,children:l,style:r})=>n.default.createElement("div",{className:"flow-builder--io-port",key:e,"data-name":`${t.name}.${e}`,style:r},l)))),n.default.createElement("div",{className:"flow-builder--io flow-builder--io-bottom"},o.map((({name:e,children:l,style:r})=>n.default.createElement("div",{className:"flow-builder--io-port",key:e,"data-name":`${t.name}.${e}`,style:r},l))))))},exports.Input=i,exports.Node=f,exports.Output=c;
+"use strict";var e=require("react");class t{constructor(e,t){this.x=e,this.y=t}subtract(e){return new t(this.x-e.x,this.y-e.y)}dist(e){return Math.hypot(e.x-this.x,e.y-this.y)}css(){return{left:`${this.x}px`,top:`${this.y}px`}}array(){return[this.x,this.y]}}const n=(e=0,n=0)=>new t(e,n);n.from=e=>e instanceof MouseEvent?new t(e.clientX,e.clientY):new t(e[0],e[1]),n.offsetOf=e=>new t(e.left,e.top);const r=(...e)=>e.map((e=>"string"==typeof e?e:e[1]?e[0]:null)).filter((e=>null!==e)).join(" "),l=(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};function o(...e){return t=>{for(let n=0;n<e.length;++n){const r=e[n];r&&("function"==typeof r?r(t):r.current=t)}}}function a(e){let t;return function(n){cancelAnimationFrame(t),t=requestAnimationFrame((()=>e(n)))}}const s=t=>{const n=e.Children.toArray(t);return{remainder:n,inputs:l(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:l(n,(e=>{var t;return null===(t=null==e?void 0:e.type)||void 0===t?void 0:t._$isOutput})).map((e=>e.props))}},i=e=>null,u=e=>null;i._$isInput=!0,u._$isOutput=!0;const c=e.createContext({parent:null});const d=e.forwardRef(((t,l)=>{if(!t.children)return null;const i=e.useContext(c),{inputs:u,outputs:d,remainder:m}=s(t.children);"Group"===i.parent&&(u.length>0||d.length>0)&&console.warn("flow-builder: Inputs/Outputs on Nodes within Groups are ignored");const[p,f]=function({onDragStart:t,onDragMove:r,onDragEnd:l,onSelect:o}){const s=[t,r,l,o],[i]=e.useState({start:null,current:null,node:null,container:null}),u=()=>i.container?n.offsetOf(i.container.getBoundingClientRect()):n();return e.useEffect((()=>{const e=a((e=>{if(!i.start)return;e.preventDefault();const l=n.from(e),o=l.subtract(u());i.current?(i.current=o,null==r||r(o.array(),l.array())):i.start.dist(l)>20&&(i.current=o,null==t||t(o.array()))})),s=e=>{(i.current||i.start)&&e.preventDefault(),i.current?null==l||l(n.from(e).subtract(u()).array()):i.start&&(null==o||o()),i.start=null,i.current=null};return window.addEventListener("mousemove",e),window.addEventListener("mouseup",s),()=>{window.removeEventListener("mousemove",e),window.removeEventListener("mouseup",s)}}),s),[e.useCallback((e=>{e&&i.node!==e&&(i.node=e,i.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"))))}),s),e.useCallback((e=>{0===e.button&&(i.start=n(e.clientX,e.clientY))}),s)]}(t.draggable?t:{onSelect:t.onSelect});return e.createElement("div",{ref:o(p,l),"data-type":"node","data-name":t.name,className:r("flow-builder--node",[t.className,!!t.className]),style:Object.assign(Object.assign({},t.style),t.position?n.from(t.position).css():{}),onMouseDown:f,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&&u.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"!==i.parent&&d.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)))))}));exports.Graph=({children:t})=>t?e.createElement("div",{"data-type":"graph",className:"flow-builder"},t):null,exports.Group=t=>{if(!t.children)return null;const{inputs:l,outputs:o,remainder:i}=s(t.children),u=[t.onMouseEnter,t.onMouseLeave],d=e.useRef(null),[m]=e.useState({value:!1});return e.useEffect((()=>{const e=a((e=>{var n,r,l;const o=null===(n=d.current)||void 0===n?void 0:n.getBoundingClientRect();if(!o)return!1;const a=e.clientX,s=e.clientY,i=o.x<a&&o.y<s&&o.x+o.width>a&&o.y+o.height>s;i!==m.value&&(m.value=i,m.value?null===(r=t.onMouseEnter)||void 0===r||r.call(t):null===(l=t.onMouseLeave)||void 0===l||l.call(t))}));return window.addEventListener("mousemove",e,{passive:!0}),()=>window.removeEventListener("mousemove",e)}),u),e.createElement(c.Provider,{value:{parent:"Group"}},e.createElement("div",{ref:d,"data-type":"group","data-name":t.name,className:r("flow-builder--group",[t.className,!!t.className]),style:Object.assign(Object.assign({},t.style),t.position?n.from(t.position).css():{})},e.createElement("div",{className:"flow-builder--content"},i),e.createElement("div",{className:"flow-builder--io flow-builder--io-top"},l.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"},o.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))))))},exports.Input=i,exports.Node=d,exports.Output=u;
 //# sourceMappingURL=index.cjs.js.map

dist/index.d.ts

@@ -0,0 +0,0 @@ import { Input, Output } from "./Io";

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 s}from"react";class i{constructor(e,t){this.x=e,this.y=t}subtract(e){return new i(this.x-e.x,this.y-e.y)}dist(e){return Math.hypot(e.x-this.x,e.y-this.y)}css(){return{left:`${this.x}px`,top:`${this.y}px`}}array(){return[this.x,this.y]}}const u=(e=0,t=0)=>new i(e,t);u.from=e=>e instanceof MouseEvent?new i(e.clientX,e.clientY):new i(e[0],e[1]),u.offsetOf=e=>new i(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)=>{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};function m(...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 p=e=>{const n=t.toArray(e);return{remainder:n,inputs:d(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:d(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,v=e=>null;f._$isInput=!0,v._$isOutput=!0;const w=n({parent:null});const y=e.forwardRef(((t,n)=>{if(!t.children)return null;const s=a(w),{inputs:i,outputs:d,remainder:f}=p(t.children);"Group"===s.parent&&(i.length>0||d.length>0)&&console.warn("flow-builder: Inputs/Outputs on Nodes within Groups are ignored");const[v,y]=function({onDragStart:e,onDragMove:t,onDragEnd:n,onSelect:a}){const s=[e,t,n,a],[i]=l({start:null,current:null,node:null,container:null}),c=()=>i.container?u.offsetOf(i.container.getBoundingClientRect()):u();return o((()=>{const r=n=>{if(!i.start)return;n.preventDefault();const r=u.from(n),l=r.subtract(c());i.current?(i.current=l,null==t||t(l.array(),r.array())):i.start.dist(r)>20&&(i.current=l,null==e||e(l.array()))},l=e=>{const t=u.from(e).subtract(c());(i.current||i.start)&&e.preventDefault(),i.current?null==n||n(t.array()):i.start&&(null==a||a()),i.start=null,i.current=null};return window.addEventListener("mousemove",r),window.addEventListener("mouseup",l),()=>{window.removeEventListener("mousemove",r),window.removeEventListener("mouseup",l)}}),s),[r((e=>{e&&i.node!==e&&(i.node=e,i.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"))))}),s),r((e=>{i.start=u(e.clientX,e.clientY)}),s)]}(t.draggable?t:{onSelect:t.onSelect});return e.createElement("div",{ref:m(v,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:y,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"},f),e.createElement("div",{className:"flow-builder--io flow-builder--io-top"},"Group"!==s.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"!==s.parent&&d.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)))))})),h=t=>{if(!t.children)return null;const{inputs:n,outputs:a,remainder:i}=p(t.children),d=[t.onMouseEnter,t.onMouseLeave],m=s(null),[f]=l({value:!1}),v=r((e=>{var n,r,l;const o=null===(n=m.current)||void 0===n?void 0:n.getBoundingClientRect();if(!o)return!1;const a=e.clientX,s=e.clientY,i=o.x<a&&o.y<s&&o.x+o.width>a&&o.y+o.height>s;i!==f.value&&(f.value=i,f.value?null===(r=t.onMouseEnter)||void 0===r||r.call(t):null===(l=t.onMouseLeave)||void 0===l||l.call(t))}),d);return o((()=>(window.addEventListener("mousemove",v,{passive:!0}),()=>window.removeEventListener("mousemove",v))),d),e.createElement(w.Provider,{value:{parent:"Group"}},e.createElement("div",{ref:m,"data-type":"group","data-name":t.name,className:c("flow-builder--group",[t.className,!!t.className]),style:Object.assign(Object.assign({},t.style),t.position?u.from(t.position).css():{})},e.createElement("div",{className:"flow-builder--content"},i),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=({children:t})=>t?e.createElement("div",{"data-type":"graph",className:"flow-builder"},t):null;export{b as Graph,h as Group,f as Input,y as Node,v as Output};
+import e,{Children as t,createContext as n,useState as r,useEffect as l,useCallback 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)}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.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)=>{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};function m(...e){return t=>{for(let n=0;n<e.length;++n){const r=e[n];r&&("function"==typeof r?r(t):r.current=t)}}}function p(e){let t;return function(n){cancelAnimationFrame(t),t=requestAnimationFrame((()=>e(n)))}}const f=e=>{const n=t.toArray(e);return{remainder:n,inputs:d(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:d(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 y=n({parent:null});const h=e.forwardRef(((t,n)=>{if(!t.children)return null;const i=a(y),{inputs:s,outputs:d,remainder:v}=f(t.children);"Group"===i.parent&&(s.length>0||d.length>0)&&console.warn("flow-builder: Inputs/Outputs on Nodes within Groups are ignored");const[w,h]=function({onDragStart:e,onDragMove:t,onDragEnd:n,onSelect:a}){const i=[e,t,n,a],[s]=r({start:null,current:null,node:null,container:null}),c=()=>s.container?u.offsetOf(s.container.getBoundingClientRect()):u();return l((()=>{const r=p((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(),r.array())):s.start.dist(r)>20&&(s.current=l,null==e||e(l.array()))})),l=e=>{(s.current||s.start)&&e.preventDefault(),s.current?null==n||n(u.from(e).subtract(c()).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),[o((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),o((e=>{0===e.button&&(s.start=u(e.clientX,e.clientY))}),i)]}(t.draggable?t:{onSelect:t.onSelect});return e.createElement("div",{ref:m(w,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:h,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"},v),e.createElement("div",{className:"flow-builder--io flow-builder--io-top"},"Group"!==i.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)))),e.createElement("div",{className:"flow-builder--io flow-builder--io-bottom"},"Group"!==i.parent&&d.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=t=>{if(!t.children)return null;const{inputs:n,outputs:o,remainder:a}=f(t.children),s=[t.onMouseEnter,t.onMouseLeave],d=i(null),[m]=r({value:!1});return l((()=>{const e=p((e=>{var n,r,l;const o=null===(n=d.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!==m.value&&(m.value=s,m.value?null===(r=t.onMouseEnter)||void 0===r||r.call(t):null===(l=t.onMouseLeave)||void 0===l||l.call(t))}));return window.addEventListener("mousemove",e,{passive:!0}),()=>window.removeEventListener("mousemove",e)}),s),e.createElement(y.Provider,{value:{parent:"Group"}},e.createElement("div",{ref:d,"data-type":"group","data-name":t.name,className:c("flow-builder--group",[t.className,!!t.className]),style:Object.assign(Object.assign({},t.style),t.position?u.from(t.position).css():{})},e.createElement("div",{className:"flow-builder--content"},a),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"},o.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=({children:t})=>t?e.createElement("div",{"data-type":"graph",className:"flow-builder"},t):null;export{g as Graph,b as Group,v as Input,h 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 l=n(t);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)}css(){return{left:`${this.x}px`,top:`${this.y}px`}}array(){return[this.x,this.y]}}const o=(e=0,t=0)=>new r(e,t);o.from=e=>e instanceof MouseEvent?new r(e.clientX,e.clientY):new r(e[0],e[1]),o.offsetOf=e=>new r(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)=>{let n=[];for(let l=0,r=e.length;l<r;++l){const r=e[l];t(r,l,e)?n.push(r):e[l-n.length]=r}return e.length-=n.length,n};function s(...e){return t=>{for(let n=0;n<e.length;++n){const l=e[n];l&&("function"==typeof l?l(t):l.current=t)}}}const i=e=>{const n=t.Children.toArray(e);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,d=e=>null;c._$isInput=!0,d._$isOutput=!0;const f=t.createContext({parent:null});const m=l.default.forwardRef(((e,n)=>{if(!e.children)return null;const r=t.useContext(f),{inputs:u,outputs:c,remainder:d}=i(e.children);"Group"===r.parent&&(u.length>0||c.length>0)&&console.warn("flow-builder: Inputs/Outputs on Nodes within Groups are ignored");const[m,p]=function({onDragStart:e,onDragMove:n,onDragEnd:l,onSelect:r}){const a=[e,n,l,r],[u]=t.useState({start:null,current:null,node:null,container:null}),s=()=>u.container?o.offsetOf(u.container.getBoundingClientRect()):o();return t.useEffect((()=>{const t=t=>{if(!u.start)return;t.preventDefault();const l=o.from(t),r=l.subtract(s());u.current?(u.current=r,null==n||n(r.array(),l.array())):u.start.dist(l)>20&&(u.current=r,null==e||e(r.array()))},a=e=>{const t=o.from(e).subtract(s());(u.current||u.start)&&e.preventDefault(),u.current?null==l||l(t.array()):u.start&&(null==r||r()),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=>{u.start=o(e.clientX,e.clientY)}),a)]}(e.draggable?e:{onSelect:e.onSelect});return l.default.createElement("div",{ref:s(m,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"},l.default.createElement("div",{className:"flow-builder--content"},d),l.default.createElement("div",{className:"flow-builder--io flow-builder--io-top"},"Group"!==r.parent&&u.map((({name:t,children:n,style:r})=>l.default.createElement("div",{className:"flow-builder--io-port",key:t,"data-name":`${e.name}.${t}`,style:r},n)))),l.default.createElement("div",{className:"flow-builder--io flow-builder--io-bottom"},"Group"!==r.parent&&c.map((({name:t,children:n,style:r})=>l.default.createElement("div",{className:"flow-builder--io-port",key:t,"data-name":`${e.name}.${t}`,style:r},n)))))}));e.Graph=({children:e})=>e?l.default.createElement("div",{"data-type":"graph",className:"flow-builder"},e):null,e.Group=e=>{if(!e.children)return null;const{inputs:n,outputs:r,remainder:u}=i(e.children),s=[e.onMouseEnter,e.onMouseLeave],c=t.useRef(null),[d]=t.useState({value:!1}),m=t.useCallback((t=>{var n,l,r;const o=null===(n=c.current)||void 0===n?void 0:n.getBoundingClientRect();if(!o)return!1;const a=t.clientX,u=t.clientY,s=o.x<a&&o.y<u&&o.x+o.width>a&&o.y+o.height>u;s!==d.value&&(d.value=s,d.value?null===(l=e.onMouseEnter)||void 0===l||l.call(e):null===(r=e.onMouseLeave)||void 0===r||r.call(e))}),s);return t.useEffect((()=>(window.addEventListener("mousemove",m,{passive:!0}),()=>window.removeEventListener("mousemove",m))),s),l.default.createElement(f.Provider,{value:{parent:"Group"}},l.default.createElement("div",{ref:c,"data-type":"group","data-name":e.name,className:a("flow-builder--group",[e.className,!!e.className]),style:Object.assign(Object.assign({},e.style),e.position?o.from(e.position).css():{})},l.default.createElement("div",{className:"flow-builder--content"},u),l.default.createElement("div",{className:"flow-builder--io flow-builder--io-top"},n.map((({name:t,children:n,style:r})=>l.default.createElement("div",{className:"flow-builder--io-port",key:t,"data-name":`${e.name}.${t}`,style:r},n)))),l.default.createElement("div",{className:"flow-builder--io flow-builder--io-bottom"},r.map((({name:t,children:n,style:r})=>l.default.createElement("div",{className:"flow-builder--io-port",key:t,"data-name":`${e.name}.${t}`,style:r},n))))))},e.Input=c,e.Node=m,e.Output=d,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";class n{constructor(e,t){this.x=e,this.y=t}subtract(e){return new n(this.x-e.x,this.y-e.y)}dist(e){return Math.hypot(e.x-this.x,e.y-this.y)}css(){return{left:`${this.x}px`,top:`${this.y}px`}}array(){return[this.x,this.y]}}const r=(e=0,t=0)=>new n(e,t);r.from=e=>e instanceof MouseEvent?new n(e.clientX,e.clientY):new n(e[0],e[1]),r.offsetOf=e=>new n(e.left,e.top);const o=(...e)=>e.map((e=>"string"==typeof e?e:e[1]?e[0]:null)).filter((e=>null!==e)).join(" "),l=(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};function a(...e){return t=>{for(let n=0;n<e.length;++n){const r=e[n];r&&("function"==typeof r?r(t):r.current=t)}}}function s(e){let t;return function(n){cancelAnimationFrame(t),t=requestAnimationFrame((()=>e(n)))}}const i=e=>{const n=t.Children.toArray(e);return{remainder:n,inputs:l(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:l(n,(e=>{var t;return null===(t=null==e?void 0:e.type)||void 0===t?void 0:t._$isOutput})).map((e=>e.props))}},u=e=>null,c=e=>null;u._$isInput=!0,c._$isOutput=!0;const d=t.createContext({parent:null});const m=t.forwardRef(((e,n)=>{if(!e.children)return null;const l=t.useContext(d),{inputs:u,outputs:c,remainder:m}=i(e.children);"Group"===l.parent&&(u.length>0||c.length>0)&&console.warn("flow-builder: Inputs/Outputs on Nodes within Groups are ignored");const[p,f]=function({onDragStart:e,onDragMove:n,onDragEnd:o,onSelect:l}){const a=[e,n,o,l],[i]=t.useState({start:null,current:null,node:null,container:null}),u=()=>i.container?r.offsetOf(i.container.getBoundingClientRect()):r();return t.useEffect((()=>{const t=s((t=>{if(!i.start)return;t.preventDefault();const o=r.from(t),l=o.subtract(u());i.current?(i.current=l,null==n||n(l.array(),o.array())):i.start.dist(o)>20&&(i.current=l,null==e||e(l.array()))})),a=e=>{(i.current||i.start)&&e.preventDefault(),i.current?null==o||o(r.from(e).subtract(u()).array()):i.start&&(null==l||l()),i.start=null,i.current=null};return window.addEventListener("mousemove",t),window.addEventListener("mouseup",a),()=>{window.removeEventListener("mousemove",t),window.removeEventListener("mouseup",a)}}),a),[t.useCallback((e=>{e&&i.node!==e&&(i.node=e,i.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=>{0===e.button&&(i.start=r(e.clientX,e.clientY))}),a)]}(e.draggable?e:{onSelect:e.onSelect});return t.createElement("div",{ref:a(p,n),"data-type":"node","data-name":e.name,className:o("flow-builder--node",[e.className,!!e.className]),style:Object.assign(Object.assign({},e.style),e.position?r.from(e.position).css():{}),onMouseDown:f,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"},t.createElement("div",{className:"flow-builder--content"},m),t.createElement("div",{className:"flow-builder--io flow-builder--io-top"},"Group"!==l.parent&&u.map((({name:n,children:r,style:o})=>t.createElement("div",{className:"flow-builder--io-port",key:n,"data-name":`${e.name}.${n}`,style:o},r)))),t.createElement("div",{className:"flow-builder--io flow-builder--io-bottom"},"Group"!==l.parent&&c.map((({name:n,children:r,style:o})=>t.createElement("div",{className:"flow-builder--io-port",key:n,"data-name":`${e.name}.${n}`,style:o},r)))))}));e.Graph=({children:e})=>e?t.createElement("div",{"data-type":"graph",className:"flow-builder"},e):null,e.Group=e=>{if(!e.children)return null;const{inputs:n,outputs:l,remainder:a}=i(e.children),u=[e.onMouseEnter,e.onMouseLeave],c=t.useRef(null),[m]=t.useState({value:!1});return t.useEffect((()=>{const t=s((t=>{var n,r,o;const l=null===(n=c.current)||void 0===n?void 0:n.getBoundingClientRect();if(!l)return!1;const a=t.clientX,s=t.clientY,i=l.x<a&&l.y<s&&l.x+l.width>a&&l.y+l.height>s;i!==m.value&&(m.value=i,m.value?null===(r=e.onMouseEnter)||void 0===r||r.call(e):null===(o=e.onMouseLeave)||void 0===o||o.call(e))}));return window.addEventListener("mousemove",t,{passive:!0}),()=>window.removeEventListener("mousemove",t)}),u),t.createElement(d.Provider,{value:{parent:"Group"}},t.createElement("div",{ref:c,"data-type":"group","data-name":e.name,className:o("flow-builder--group",[e.className,!!e.className]),style:Object.assign(Object.assign({},e.style),e.position?r.from(e.position).css():{})},t.createElement("div",{className:"flow-builder--content"},a),t.createElement("div",{className:"flow-builder--io flow-builder--io-top"},n.map((({name:n,children:r,style:o})=>t.createElement("div",{className:"flow-builder--io-port",key:n,"data-name":`${e.name}.${n}`,style:o},r)))),t.createElement("div",{className:"flow-builder--io flow-builder--io-bottom"},l.map((({name:n,children:r,style:o})=>t.createElement("div",{className:"flow-builder--io-port",key:n,"data-name":`${e.name}.${n}`,style:o},r))))))},e.Input=u,e.Node=m,e.Output=c}));
 //# sourceMappingURL=index.umd.js.map

dist/Io.d.ts

@@ -0,0 +0,0 @@ import React from "react";

dist/Node.d.ts

@@ -0,0 +0,0 @@ import React from "react";

dist/util.d.ts

@@ -57,6 +57,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> = {
+export type RefCallback<T extends Element> = (instance: T | null) => void;
+export 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 function mouseMoveThrottle(callback: (event: MouseEvent) => void): (event: MouseEvent) => void;

dist/util.test.d.ts

 export {};

package.json

 {
   "name": "@keboola/flow-builder",
   "description": "Flow graph rendering",
-  "version": "0.6.2",
+  "version": "0.8.0",
   "license": "MIT",
@@ -20,6 +20,6 @@ "repository": {
   "scripts": {
-    "build": "rollup -c",
+    "build": "rollup -c --bundleConfigAsCjs",
     "test": "jest",
-    "format": "prettier --write",
-    "format-check": "prettier --check",
+    "format": "prettier --write .",
+    "format-check": "prettier --check .",
     "prepare": "husky install",
@@ -33,23 +33,23 @@ "dev": "yarn --cwd example start"
   "devDependencies": {
-    "@rollup/plugin-commonjs": "^22.0.1",
-    "@rollup/plugin-node-resolve": "^13.3.0",
-    "@testing-library/react": "^13.3.0",
-    "@types/jest": "^28.1.5",
-    "@types/react": "^18.0.5",
-    "@types/react-dom": "^18.0.6",
+    "@rollup-extras/plugin-clean": "^1.3.5",
+    "@rollup-extras/plugin-copy": "^1.8.0",
+    "@rollup/plugin-commonjs": "^25.0.0",
+    "@rollup/plugin-node-resolve": "^15.1.0",
+    "@rollup/plugin-terser": "^0.4.3",
+    "@rollup/plugin-typescript": "^11.1.1",
+    "@testing-library/react": "^14.0.0",
+    "@types/jest": "^29.5.1",
+    "@types/react": "^18.2.7",
+    "@types/react-dom": "^18.2.4",
     "husky": "^7.0.1",
-    "jest": "^28.1.2",
-    "lint-staged": "^13.0.3",
+    "jest": "^29.5.0",
+    "lint-staged": "^13.2.2",
     "npm-run-all": "^4.1.5",
-    "postcss": "^8.4.14",
-    "prettier": "^2.7.1",
+    "postcss": "^8.4.24",
+    "prettier": "^2.8.8",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "rollup": "^2.76.0",
-    "rollup-plugin-copy": "^3.4.0",
-    "rollup-plugin-postcss": "^4.0.2",
-    "rollup-plugin-terser": "^7.0.2",
-    "rollup-plugin-typescript2": "^0.30.0",
-    "ts-jest": "^28.0.5",
-    "typescript": "^4.7.4"
+    "rollup": "^3.23.0",
+    "ts-jest": "^29.1.0",
+    "typescript": "^5.0.4"
   },
@@ -56,0 +56,0 @@ "lint-staged": {

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

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

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

Worsened metrics

Total package byte prevSize

47469

decreased by-43.99%

Lines of code

257

decreased by-0.39%

Number of medium supply chain risk alerts

1

increased byInfinity%

No dependency changes