react-cosmos-diagram 0.11.0 → 0.11.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../react-diagram/packages/react/src/container/DragSelection/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAiC,SAAS,EAAE,MAAM,OAAO,CAAC;AAsBtE,KAAK,kBAAkB,GAAG;IACvB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,QAAQ,EAAE,SAAS,CAAC;CACtB,CAAC;AAcF,iBAAS,aAAa,CAAC,EAAE,WAAW,EAAE,QAAQ,EAAE,EAAE,kBAAkB,
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../react-diagram/packages/react/src/container/DragSelection/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAiC,SAAS,EAAE,MAAM,OAAO,CAAC;AAsBtE,KAAK,kBAAkB,GAAG;IACvB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,QAAQ,EAAE,SAAS,CAAC;CACtB,CAAC;AAcF,iBAAS,aAAa,CAAC,EAAE,WAAW,EAAE,QAAQ,EAAE,EAAE,kBAAkB,2CAsMnE;AAED,eAAe,aAAa,CAAC"}
|
package/dist/esm/index.js
CHANGED
|
@@ -503,9 +503,11 @@ function DragSelection({ isSelecting, children }) {
|
|
|
503
503
|
return (jsxs("div", { ref: dragSelection, className: cc([
|
|
504
504
|
'react-diagram__container react-diagram__drag-selection',
|
|
505
505
|
{
|
|
506
|
-
active: isPossibleDragSelection ||
|
|
506
|
+
active: isPossibleDragSelection ||
|
|
507
|
+
dragBoxActive ||
|
|
508
|
+
selectionBoxActive,
|
|
507
509
|
},
|
|
508
|
-
]), onClick: onClick, onMouseDown: isPossibleDragSelection ? onMouseDown : undefined, onMouseMove: isPossibleDragSelection ? onMouseMove : undefined, onMouseUp: elementsSelectable ? onMouseUp : undefined, onMouseLeave:
|
|
510
|
+
]), onClick: isPossibleDragSelection ? onClick : undefined, onMouseDown: isPossibleDragSelection ? onMouseDown : undefined, onMouseMove: isPossibleDragSelection || dragBoxActive ? onMouseMove : undefined, onMouseUp: elementsSelectable ? onMouseUp : undefined, onMouseLeave: elementsSelectable ? onMouseLeave : undefined, children: [children, dragBoxActive && jsx(DragBox, { rect: dragBoxRect }), selectionBoxActive && (jsx(SelectionBox$1, { rect: selectionBoxRect, transform: transformString }))] }));
|
|
509
511
|
}
|
|
510
512
|
|
|
511
513
|
const selector$5 = (s) => {
|
package/dist/esm/index.mjs
CHANGED
|
@@ -503,9 +503,11 @@ function DragSelection({ isSelecting, children }) {
|
|
|
503
503
|
return (jsxs("div", { ref: dragSelection, className: cc([
|
|
504
504
|
'react-diagram__container react-diagram__drag-selection',
|
|
505
505
|
{
|
|
506
|
-
active: isPossibleDragSelection ||
|
|
506
|
+
active: isPossibleDragSelection ||
|
|
507
|
+
dragBoxActive ||
|
|
508
|
+
selectionBoxActive,
|
|
507
509
|
},
|
|
508
|
-
]), onClick: onClick, onMouseDown: isPossibleDragSelection ? onMouseDown : undefined, onMouseMove: isPossibleDragSelection ? onMouseMove : undefined, onMouseUp: elementsSelectable ? onMouseUp : undefined, onMouseLeave:
|
|
510
|
+
]), onClick: isPossibleDragSelection ? onClick : undefined, onMouseDown: isPossibleDragSelection ? onMouseDown : undefined, onMouseMove: isPossibleDragSelection || dragBoxActive ? onMouseMove : undefined, onMouseUp: elementsSelectable ? onMouseUp : undefined, onMouseLeave: elementsSelectable ? onMouseLeave : undefined, children: [children, dragBoxActive && jsx(DragBox, { rect: dragBoxRect }), selectionBoxActive && (jsx(SelectionBox$1, { rect: selectionBoxRect, transform: transformString }))] }));
|
|
509
511
|
}
|
|
510
512
|
|
|
511
513
|
const selector$5 = (s) => {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../react-diagram/packages/react/src/container/DragSelection/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAiC,SAAS,EAAE,MAAM,OAAO,CAAC;AAsBtE,KAAK,kBAAkB,GAAG;IACvB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,QAAQ,EAAE,SAAS,CAAC;CACtB,CAAC;AAcF,iBAAS,aAAa,CAAC,EAAE,WAAW,EAAE,QAAQ,EAAE,EAAE,kBAAkB,
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../react-diagram/packages/react/src/container/DragSelection/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAiC,SAAS,EAAE,MAAM,OAAO,CAAC;AAsBtE,KAAK,kBAAkB,GAAG;IACvB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,QAAQ,EAAE,SAAS,CAAC;CACtB,CAAC;AAcF,iBAAS,aAAa,CAAC,EAAE,WAAW,EAAE,QAAQ,EAAE,EAAE,kBAAkB,2CAsMnE;AAED,eAAe,aAAa,CAAC"}
|
package/dist/umd/index.js
CHANGED
|
@@ -7,4 +7,4 @@
|
|
|
7
7
|
*
|
|
8
8
|
* This source code is licensed under the MIT license found in the
|
|
9
9
|
* LICENSE file in the root directory of this source tree.
|
|
10
|
-
*/Fo.exports=function(){if(Wo)return Ho;Wo=1;var e=n,t=Jo(),o="function"==typeof Object.is?Object.is:function(e,t){return e===t&&(0!==e||1/e==1/t)||e!=e&&t!=t},r=t.useSyncExternalStore,i=e.useRef,a=e.useEffect,s=e.useMemo,u=e.useDebugValue;return Ho.useSyncExternalStoreWithSelector=function(e,t,n,l,c){var d=i(null);if(null===d.current){var h={hasValue:!1,value:null};d.current=h}else h=d.current;d=s((function(){function e(e){if(!a){if(a=!0,r=e,e=l(e),void 0!==c&&h.hasValue){var t=h.value;if(c(t,e))return i=t}return i=e}if(t=i,o(r,e))return t;var n=l(e);return void 0!==c&&c(t,n)?t:(r=e,i=n)}var r,i,a=!1,s=void 0===n?null:n;return[function(){return e(t())},null===s?void 0:function(){return e(s())}]}),[t,n,l,c]);var f=r(e,d[0],d[1]);return a((function(){h.hasValue=!0,h.value=f}),[f]),u(f),f},Ho}();var er=Uo(Fo.exports);const{useSyncExternalStoreWithSelector:tr}=er;let nr=!1;const or=n.createContext(null),rr=or.Provider,ir=oo["001"]();function ar(e,t){const o=n.useContext(or);if(null===o)throw new Error(ir);return function(e,t=e.getState,o){o&&!nr&&(console.warn("[DEPRECATED] Use `createWithEqualityFn` instead of `create` or use `useStoreWithEqualityFn` instead of `useStore`. They can be imported from 'zustand/traditional'. https://github.com/pmndrs/zustand/discussions/1937"),nr=!0);const r=tr(e.subscribe,e.getState,e.getServerState||e.getState,t,o);return n.useDebugValue(r),r}(o,e,t)}const sr=()=>{const e=n.useContext(or);if(null===e)throw new Error(ir);return n.useMemo((()=>({getState:e.getState,setState:e.setState,subscribe:e.subscribe,destroy:e.destroy})),[e])},ur="undefined"!=typeof document?document:null;function lr(e,t={}){const o=void 0!==t.target?t.target:ur,[r,i]=n.useState(!1);return n.useEffect((()=>{if(!o)return;const t=t=>{t.key===e&&i(!0)},n=t=>{t.key===e&&i(!1)},r=()=>i(!1);return o.addEventListener("keydown",t),o.addEventListener("keyup",n),window.addEventListener("blur",r),window.addEventListener("contextmenu",r),()=>{o.removeEventListener("keydown",t),o.removeEventListener("keyup",n),window.removeEventListener("blur",r),window.addEventListener("contextmenu",r)}}),[e,o]),r}const cr="undefined"!=typeof window?window:void 0;function dr(e){if("string"==typeof e||"number"==typeof e)return""+e;let t="";if(Array.isArray(e))for(let n,o=0;o<e.length;o++)""!==(n=dr(e[o]))&&(t+=(t&&" ")+n);else for(let n in e)e[n]&&(t+=(t&&" ")+n);return t}const hr=({noPanClassName:e,panning:o,selection:r,minZoom:i,maxZoom:a,defaultViewport:s,translateExtent:u,children:l,onMove:c,onMoveStart:d,onMoveEnd:h,onPaneClick:f,onPaneMouseEnter:g,onPaneMouseMove:p,onPaneMouseLeave:m})=>{const y=sr(),v=n.useRef(null),x=n.useRef();return n.useEffect((()=>{if(!v.current)return;x.current=Zo({domNode:v.current,minZoom:i,maxZoom:a,translateExtent:u,viewport:s,panning:o,onTransformChange:e=>{y.setState({transform:e})},onPaneClick:f,onPanZoomStart:d,onPanZoom:c,onPanZoomEnd:h});const{x:e,y:t,zoom:n}=x.current.getViewport();return y.setState({transform:[e,t,n],domNode:v.current.closest(".react-diagram")}),()=>{x.current?.destroy()}}),[]),n.useEffect((()=>{x.current?.update({noPanClassName:e,selection:r})}),[e,r]),n.useEffect((()=>{x.current?.setScaleExtent([i,a])}),[i,a]),t.jsx("div",{ref:v,className:dr(["react-diagram__pane react-diagram__container",{selection:r}]),onMouseEnter:g,onMouseMove:p,onMouseLeave:m,children:l})},fr=e=>`translate(${e.transform[0]}px,${e.transform[1]}px) scale(${e.transform[2]})`;function gr({children:e}){const n=ar(fr);return t.jsx("div",{className:"react-diagram__viewport react-diagram__container",style:{transform:n},children:e})}function pr(e,t){if(Object.is(e,t))return!0;if("object"!=typeof e||null===e||"object"!=typeof t||null===t)return!1;if(e instanceof Map&&t instanceof Map){if(e.size!==t.size)return!1;for(const[n,o]of e)if(!Object.is(o,t.get(n)))return!1;return!0}if(e instanceof Set&&t instanceof Set){if(e.size!==t.size)return!1;for(const n of e)if(!t.has(n))return!1;return!0}const n=Object.keys(e);if(n.length!==Object.keys(t).length)return!1;for(let o=0;o<n.length;o++)if(!Object.prototype.hasOwnProperty.call(t,n[o])||!Object.is(e[n[o]],t[n[o]]))return!1;return!0}function mr({rect:e}){const{width:n,height:o,x:r,y:i}=e;return n&&o&&r&&i?t.jsx("div",{className:"react-diagram__drag-box react-diagram__container",style:{width:n,height:o,transform:`translate(${r}px, ${i}px)`}}):null}function yr(e,t,n){return void 0===n?n:o=>{const r=t().nodeInternals.get(e);n(o,{...r})}}function vr({id:e,store:t,isSelectable:n,unselect:o=!1,nodeRef:r}){if(!n)return;const{addSelectedNodes:i,unselectNodes:a,multiSelectionActive:s,nodeInternals:u}=t.getState(),l=u.get(e);t.setState({selectionBoxActive:!1}),l.selected?(o||l.selected&&s)&&(a({nodes:[l]}),requestAnimationFrame((()=>r?.current?.blur()))):i([e])}const xr=({disabled:e,nodeRef:t,nodeId:o,isSelectable:r,noDragClassName:i})=>{const a=sr(),s=n.useRef(),[u,l]=n.useState(!1);return n.useEffect((()=>{s.current=Xo({getStore:()=>a.getState(),onNodeMouseDown:e=>{vr({id:e,store:a,nodeRef:t,isSelectable:r})},onDrag:(e,t,n,o)=>{const{onNodeDrag:r}=a.getState();r?.(e,n,o)},onDragStart:(e,t,n,o)=>{const{onNodeDragStart:r}=a.getState();r?.(e,n,o),l(!0)},onDragEnd:(e,t,n,o)=>{const{onNodeDragEnd:r}=a.getState();r?.(e,n,o),l(!1)}})}),[]),n.useEffect((()=>{if(e)s.current?.destroy();else if(t.current)return s.current?.update({noDragClassName:i,domNode:t.current,isSelectable:r,nodeId:o}),()=>{s.current?.destroy()}}),[i,e,r,t,o]),u};var br=n.memo((function({rect:e,transform:o}){const r=n.useRef(null);xr({nodeRef:r});const{width:i,height:a,x:s,y:u}=e;return t.jsx("div",{className:dr(["react-diagram__selection-box","react-diagram__container"]),style:{transform:o},children:t.jsx("div",{ref:r,className:"react-diagram__selection-box-rect",tabIndex:-1,style:{width:i,height:a,top:u,left:s}})})}));const wr=(e,t)=>{const n=e.find((e=>e.id===t.parentNode));if(n){const e=t.position.x+t.width-n.width,o=t.position.y+t.height-n.height;if(e>0||o>0||t.position.x<0||t.position.y<0){if(n.style={...n.style},n.style.width=n.style.width??n.width,n.style.height=n.style.height??n.height,e>0&&(n.style.width+=e),o>0&&(n.style.height+=o),t.position.x<0){const e=Math.abs(t.position.x);n.position.x=n.position.x-e,n.style.width+=e,t.position.x=0}if(t.position.y<0){const e=Math.abs(t.position.y);n.position.y=n.position.y-e,n.style.height+=e,t.position.y=0}n.width=n.style.width,n.height=n.style.height}}},_r=(e,t)=>{if(e.some((e=>"reset"===e.type)))return e.filter((e=>"reset"===e.type)).map((e=>e.item));const n=e.filter((e=>"add"===e.type)).map((e=>e.item));return t.reduce(((t,n)=>{const o=e.filter((e=>e.id===n.id));if(0===o.length)return t.push(n),t;const r={...n};for(const e of o)if(e)switch(e.type){case"select":r.selected=e.selected;break;case"position":void 0!==e.position&&(r.position=e.position),void 0!==e.positionAbsolute&&(r.positionAbsolute=e.positionAbsolute),void 0!==e.dragging&&(r.dragging=e.dragging),r.expandParent&&wr(t,r);break;case"dimensions":void 0!==e.dimensions&&(r.width=e.dimensions.width,r.height=e.dimensions.height),void 0!==e.updateStyle&&(r.style={...r.style||{},...e.dimensions}),"boolean"==typeof e.resizing&&(r.resizing=e.resizing),r.expandParent&&wr(t,r);break;case"intersect":r.intersected=e.intersected;break;case"remove":return t}return t.push(r),t}),n)};const Er=(e,t)=>({id:e,type:"select",selected:t});function Sr(e,t){return e.reduce(((e,n)=>{const o=t.includes(n.id);return!n.selected&&o?(n.selected=!0,e.push(Er(n.id,!0))):n.selected&&!o&&(n.selected=!1,e.push(Er(n.id,!1))),e}),[])}const Nr=e=>t=>({id:t.id,type:e}),Pr=e=>{const{elementsSelectable:t,transform:n,selectionBoxActive:o,getNodes:r}=e,i=r().filter((e=>e.selected));return{elementsSelectable:t,selectionBoxRect:po(i,e.nodeOrigin),transformString:`translate(${n[0]}px,${n[1]}px) scale(${n[2]})`,selectionBoxActive:o}};function Mr({isSelecting:e,children:o}){const r=sr(),i=n.useRef(null),a=n.useRef(0),s=n.useRef(),{elementsSelectable:u,selectionBoxRect:l,transformString:c,selectionBoxActive:d}=ar(Pr,pr),[h,f]=n.useState({x:0,y:0}),[g,p]=n.useState({width:0,height:0,x:0,y:0}),[m,y]=n.useState(!1),v=()=>{r.setState({selectionBoxActive:a.current>0}),f({x:0,y:0}),p({width:0,height:0,x:0,y:0}),y(!1)},x=u&&e;return t.jsxs("div",{ref:i,className:dr(["react-diagram__container react-diagram__drag-selection",{active:x||d}]),onClick:e=>{e.target===i.current&&(r.getState().resetSelectedElements(),r.setState({selectionBoxActive:!1}),y(!1))},onMouseDown:x?t=>{const{resetSelectedElements:n,domNode:o}=r.getState();if(s.current=o?.getBoundingClientRect(),!u||0!==t.button||t.target!==i.current||!s.current||!e)return;const{x:a,y:l}=Jn(t.nativeEvent,s.current);n(),p({width:0,height:0,x:a,y:l}),f({x:a,y:l})}:void 0,onMouseMove:x?e=>{const{nodeInternals:t,transform:n,nodeOrigin:o,getNodes:i,onNodesChange:u}=r.getState();if(!(h.x>0&&h.y>0)||!s.current)return;r.setState({selectionBoxActive:!1}),y(!0);const l=Jn(e.nativeEvent,s.current),c=h.x??0,d=h.y??0,f={x:l.x<c?l.x:c,y:l.y<d?l.y:d,width:Math.abs(l.x-c),height:Math.abs(l.y-d)},g=i(),m=go(t,f,n,!1,!0,o).map((e=>e.id));if(a.current!==m.length){a.current=m.length;const e=Sr(g,m);e.length&&u?.(e)}p(f)}:void 0,onMouseUp:u?e=>{0===e.button&&v()}:void 0,onMouseLeave:x?()=>{v()}:void 0,children:[o,m&&t.jsx(mr,{rect:g}),d&&t.jsx(br,{rect:l,transform:c})]})}const Cr=e=>{const{minZoom:t,maxZoom:n,translateExtent:o}=e;return{minZoom:t,maxZoom:n,translateExtent:o}};function kr({children:e,multiSelectionKeyCode:o,dragSelectionKeyCode:r,deleteKeyCode:i,noPanClassName:a,panning:s,defaultViewport:u,onMove:l,onMoveStart:c,onMoveEnd:d,onPaneClick:h,onPaneMouseEnter:f,onPaneMouseMove:g,onPaneMouseLeave:p}){(({deleteKeyCode:e="Backspace",multiSelectionKeyCode:t="Meta"})=>{const o=sr(),r=lr(t,{target:cr}),i=lr(e);n.useEffect((()=>{if(i){const{edges:e,getNodes:t,deleteElements:n}=o.getState();n({nodes:t().filter((e=>e.selected)),edges:e.filter((e=>e.selected))})}}),[i]),n.useEffect((()=>{o.setState({multiSelectionActive:r})}),[r])})({multiSelectionKeyCode:o,deleteKeyCode:i});const{minZoom:m,maxZoom:y,translateExtent:v}=ar(Cr),x=lr(r||"Shift"),b=s&&!x;return t.jsx(t.Fragment,{children:t.jsx(hr,{noPanClassName:a,panning:b,selection:x,minZoom:m,maxZoom:y,translateExtent:v,defaultViewport:u,onMove:l,onMoveStart:c,onMoveEnd:d,onPaneClick:h,onPaneMouseEnter:f,onPaneMouseMove:g,onPaneMouseLeave:p,children:t.jsx(Mr,{isSelecting:x,children:t.jsx(gr,{children:e})})})})}kr.displayName="DiagramRenderer";var Ar=n.memo(kr);const Br=e=>({nodesDraggable:e.nodesDraggable,elementsSelectable:e.elementsSelectable,updateNodeDimensions:e.updateNodeDimensions,onError:e.onError});function $r({nodeTypes:o,onNodeClick:r,onNodeMouseEnter:i,onNodeMouseMove:a,onNodeMouseLeave:s,onNodeContextMenu:u,onNodeDoubleClick:l,...c}){const{nodesDraggable:d,elementsSelectable:h,updateNodeDimensions:f,onError:g}=ar(Br,pr),p=ar(n.useCallback((e=>e.getNodes()),[])),m=n.useRef(),y=n.useMemo((()=>{if("undefined"==typeof ResizeObserver)return null;const e=new ResizeObserver((e=>{const t=e.map((e=>({id:e.target.getAttribute("data-id"),nodeElement:e.target,forceUpdate:!0})));f(t)}));return m.current=e,e}),[]);return n.useEffect((()=>()=>{m?.current?.disconnect()}),[]),t.jsx("div",{className:"react-diagram__nodes react-diagram__container",children:p.map((n=>{const{data:f,type:p,id:m,className:v,style:x,width:b,height:w,ariaLabel:_,selectable:E,draggable:S,positionAbsolute:N,hidden:P,selected:M,intersected:C}=n;let k=p||"default";o[k]||(g?.("010",k),k="default");const A=o[k]||o.default,B={id:m,className:v,style:x,width:b??("default"===k?120:void 0),height:w??("default"===k?60:void 0),ariaLabel:_},$={onClick:r,onMouseEnter:i,onMouseMove:a,onMouseLeave:s,onContextMenu:u,onDoubleClick:l},I={positionX:N?.x||0,positionY:N?.y||0,sourcePosition:e.Position.Bottom,targetPosition:e.Position.Top},D={selected:!!M,intersected:!!C,hidden:P,isParent:!!n[Fn]?.isParent,initialized:!!n.width&&!!n.height};return t.jsx(A,{...c,...B,...I,...$,...D,zIndex:n[Fn]?.z??0,type:k,data:f,resizeObserver:y,nodesDraggable:d,elementsSelectable:h,selectable:E,draggable:S},m)}))})}$r.displayName="NodeRenderer";var Ir=n.memo($r);const Dr={[e.MarkerType.Arrow]:({color:e="none",strokeWidth:n=1})=>t.jsx("polyline",{stroke:e,strokeLinecap:"round",strokeLinejoin:"round",strokeWidth:n,fill:e,points:"-5,-4 0,0 -5,4 -5,-4"})};const Tr=({id:e,type:o,color:r,width:i=12.5,height:a=12.5,markerUnits:s="strokeWidth",strokeWidth:u,orient:l="auto-start-reverse"})=>{const c=function(e){const t=sr();return n.useMemo((()=>Object.prototype.hasOwnProperty.call(Dr,e)?Dr[e]:(t.getState().onError?.("022",e),null)),[e])}(o);return c?t.jsx("marker",{className:"react-diagram__arrowhead",id:e,markerWidth:`${i}`,markerHeight:`${a}`,viewBox:"-10 -10 20 20",markerUnits:s,orient:l,refX:"0",refY:"0",children:t.jsx(c,{color:r,strokeWidth:u})}):null},jr=({defaultColor:e,rfId:o})=>{const r=ar(n.useCallback((({defaultColor:e,rfId:t})=>n=>{const o=[];return n.edges.reduce(((n,r)=>([r.markerStart,r.markerEnd].forEach((r=>{if(r&&"object"==typeof r){const i=yo(r,t);o.includes(i)||(n.push({id:i,color:r.color||e,...r}),o.push(i))}})),n)),[]).sort(((e,t)=>e.id.localeCompare(t.id)))})({defaultColor:e,rfId:o}),[e,o]),((e,t)=>!(e.length!==t.length||e.some(((e,n)=>e.id!==t[n].id)))));return t.jsx("defs",{children:r.map((e=>t.jsx(Tr,{id:e.id,type:e.type,color:e.color,width:e.width,height:e.height,markerUnits:e.markerUnits,strokeWidth:e.strokeWidth,orient:e.orient},e.id)))})};jr.displayName="MarkerComponent";var zr=n.memo(jr);var Rr=n.memo((function({x:e,y:o,label:r,labelStyle:i={},labelShowBg:a=!0,labelBgStyle:s={},labelBgPadding:u=[2,4],labelBgBorderRadius:l=2,children:c,className:d,...h}){const f=n.useRef(null),[g,p]=n.useState({x:0,y:0,width:0,height:0}),m=dr(["react-diagram__edge-text-wrapper",d]);return n.useEffect((()=>{if(f.current){const e=f.current.getBBox();p({x:e.x,y:e.y,width:e.width,height:e.height})}}),[r]),void 0!==r&&r?t.jsxs("g",{transform:`translate(${e-g.width/2} ${o-g.height/2})`,className:m,visibility:g.width?"visible":"hidden",...h,children:[a&&t.jsx("rect",{width:g.width+2*u[0],x:-u[0],y:-u[1],height:g.height+2*u[1],className:"react-diagram__edge-text-bg",style:s,rx:l,ry:l}),t.jsx("text",{className:"react-diagram__edge-text",y:g.height/2,dy:"0.3em",ref:f,style:i,children:r}),c]}):null}));function Or({path:e,labelX:n,labelY:o,label:r,labelStyle:i,labelShowBg:a,labelBgStyle:s,labelBgPadding:u,labelBgBorderRadius:l,style:c,markerEnd:d,markerStart:h}){return t.jsxs(t.Fragment,{children:[t.jsx("path",{style:c,d:e,fill:"none",className:"react-diagram__edge-path",markerEnd:d,markerStart:h}),r&&lo(n)&&lo(o)?t.jsx(Rr,{x:n,y:o,label:r,labelStyle:i,labelShowBg:a,labelBgStyle:s,labelBgPadding:u,labelBgBorderRadius:l}):null]})}Or.displayName="BaseEdge";const Xr=({sourceX:e,sourceY:n,targetX:o,targetY:r,label:i,labelStyle:a,labelShowBg:s,labelBgStyle:u,labelBgPadding:l,labelBgBorderRadius:c,style:d,markerEnd:h,markerStart:f})=>{const[g,p,m]=So({sourceX:e,sourceY:n,targetX:o,targetY:r});return t.jsx(Or,{path:g,labelX:p,labelY:m,label:i,labelStyle:a,labelShowBg:s,labelBgStyle:u,labelBgPadding:l,labelBgBorderRadius:c,style:d,markerEnd:h,markerStart:f})};Xr.displayName="StraightEdge";var Lr=n.memo(Xr);const Yr=({sourceX:n,sourceY:o,targetX:r,targetY:i,label:a,labelStyle:s,labelShowBg:u,labelBgStyle:l,labelBgPadding:c,labelBgBorderRadius:d,style:h,sourcePosition:f=e.Position.Bottom,targetPosition:g=e.Position.Top,markerEnd:p,markerStart:m,pathOptions:y})=>{const[v,x,b]=Eo({sourceX:n,sourceY:o,sourcePosition:f,targetX:r,targetY:i,targetPosition:g,borderRadius:y?.borderRadius,offset:y?.offset});return t.jsx(Or,{path:v,labelX:x,labelY:b,label:a,labelStyle:s,labelShowBg:u,labelBgStyle:l,labelBgPadding:c,labelBgBorderRadius:d,style:h,markerEnd:p,markerStart:m})};Yr.displayName="StepEdge";var Zr=n.memo(Yr);const Vr=({sourceX:n,sourceY:o,targetX:r,targetY:i,sourcePosition:a=e.Position.Bottom,targetPosition:s=e.Position.Top,label:u,labelStyle:l,labelShowBg:c,labelBgStyle:d,labelBgPadding:h,labelBgBorderRadius:f,style:g,markerEnd:p,markerStart:m,pathOptions:y})=>{const[v,x,b]=Co({sourceX:n,sourceY:o,sourcePosition:a,targetX:r,targetY:i,targetPosition:s,curvature:y?.curvature});return t.jsx(Or,{path:v,labelX:x,labelY:b,label:u,labelStyle:l,labelShowBg:c,labelBgStyle:d,labelBgPadding:h,labelBgBorderRadius:f,style:g,markerEnd:p,markerStart:m})};Vr.displayName="BezierEdge";var Ur=n.memo(Vr);const qr=(t,n,o)=>o===e.Position.Left?t-n:o===e.Position.Right?t+n:t,Kr=(t,n,o)=>o===e.Position.Top?t-n:o===e.Position.Bottom?t+n:t,Wr="react-diagram__edge-updater";function Fr({position:e,centerX:n,centerY:o,radius:r=10,onMouseDown:i,type:a}){return t.jsx("circle",{className:dr([Wr,`${Wr}-${a}`]),cx:qr(n,r,e),cy:Kr(o,r,e),r:r,stroke:"transparent",fill:"transparent",onMouseDown:i})}function Hr(e,t,n){return void 0===n?n:o=>{const r=t().edges.find((t=>t.id===e));r&&n(o,{...r})}}const Gr=e=>{const o=o=>{const{id:r,className:i,style:a,type:s,data:u,rfId:l,ariaLabel:c,source:d,sourcePort:h,target:f,targetPort:g,markerEnd:p,markerStart:m,label:y,labelStyle:v,labelShowBg:x,labelBgStyle:b,labelBgPadding:w,labelBgBorderRadius:_,edgeUpdaterRadius:E,sourceX:S,sourceY:N,targetX:P,targetY:M,sourcePosition:C,targetPosition:k,hidden:A,selected:B,focusable:$=!0,selectable:I=!0,elementsSelectable:D,onClick:T,onDoubleClick:j,onContextMenu:z,onMouseEnter:R,onMouseMove:O,onMouseLeave:X,onEdgeUpdate:L,onEdgeUpdateStart:Y,onEdgeUpdateEnd:Z}=o,V={sourceX:S,sourceY:N,targetX:P,targetY:M,sourcePosition:C,targetPosition:k},U={source:d,sourcePort:h,target:f,targetPort:g},q=!!(I||D&&void 0===I);if("react-diagram__connection"===i)return document.querySelector("path")?.classList.add("react-diagram__connection-path"),t.jsx(e,{...U,...V,id:r,data:u,style:a,selected:B});const K=sr(),W=n.useRef(null),[F,H]=n.useState(!1),G=n.useMemo((()=>`url(#${yo(m,l)})`),[m,l]),Q=n.useMemo((()=>`url(#${yo(p,l)})`),[p,l]);if(A)return null;const J=e=>t=>{if(0!==t.button)return;const{edges:n,domNode:i,autoPanOnConnect:a,connectionRadius:s,transform:u,getNodes:l,cancelConnection:c,updateConnection:d,onConnectStart:f,onConnectEnd:p,panBy:m}=K.getState(),y=o[e],v=n.find((e=>e.id===r)),x=("source"===e?h:g)||null;H(!0),Y?.(t,v,e);jo({isAnchor:!0,event:t.nativeEvent,nodeId:y,portId:x,portType:e,domNode:i,autoPanOnConnect:a,connectionRadius:s,nodes:l(),onEdgeUpdateEnd:t=>{H(!1),Z?.(t,v,e)},cancelConnection:c,updateConnection:d,onConnect:e=>L?.(v,e),onConnectStart:f,onConnectEnd:p,panBy:m,getTransform:()=>u})},ee=Hr(r,K.getState,j),te=Hr(r,K.getState,z),ne=Hr(r,K.getState,R),oe=Hr(r,K.getState,O),re=Hr(r,K.getState,X),ie=dr(["react-diagram__edge",`react-diagram__edge-${s}`,i,{selected:B,inactive:!D}]),ae={markerStart:G,markerEnd:Q},se={label:y,labelStyle:v,labelShowBg:x,labelBgStyle:b,labelBgPadding:w,labelBgBorderRadius:_},ue={onClick:e=>{const{edges:t,multiSelectionActive:n,addSelectedEdges:o,unselectEdges:i}=K.getState();if(q){const e=t.filter((e=>e.id===r));B?B&&n&&(i({edges:[...e]}),W.current?.blur()):o([r])}if(T){const n=t.find((e=>e.id===r));T(e,n)}},onDoubleClick:ee,onContextMenu:te,onMouseEnter:ne,onMouseMove:oe,onMouseLeave:re};return t.jsx("g",{...ue,ref:W,className:ie,tabIndex:$?0:void 0,role:$?"button":void 0,"aria-label":null===c?void 0:c||`Edge from ${d} to ${f}`,"aria-describedby":$?`react-diagram__edge-desc-${l}`:void 0,children:!F&&t.jsxs(t.Fragment,{children:[t.jsx(e,{...U,...ae,...se,...V,id:r,data:u,style:a,selected:B}),t.jsx(Fr,{position:C,centerX:S,centerY:N,radius:E,onMouseDown:J("target"),type:"source"}),t.jsx(Fr,{position:k,centerX:P,centerY:M,radius:E,onMouseDown:J("source"),type:"target"})]})})};return o.displayName="EdgeWrapper",n.memo(o)},Qr=e=>{const t={default:Gr(e.straight||Lr),step:Gr(e.step||Zr),bezier:Gr(e.bezier||Ur)},n=Object.keys(e).filter((e=>!Object.keys(t).includes(e))).reduce(((t,n)=>(t[n]=Gr(e[n]||Zr),t)),{});return{...t,...n}};function Jr(t,n,o=null){const r=(o?.x||0)+n.x,i=(o?.y||0)+n.y,a=o?.width||n.width,s=o?.height||n.height;switch(t){case e.Position.Top:return{x:r+a/2,y:i};case e.Position.Right:return{x:r+a,y:i+s/2};case e.Position.Bottom:return{x:r+a/2,y:i+s};case e.Position.Left:return{x:r,y:i+s/2}}}function ei(e,t){return e?1!==e.length&&t?t&&e.find((e=>e.id===t))||null:e[0]:null}function ti(e){const t=e?.[Fn]?.portBounds||null,n=t&&e?.width&&e?.height&&void 0!==e?.positionAbsolute?.x&&void 0!==e?.positionAbsolute?.y;return[{x:e?.positionAbsolute?.x||0,y:e?.positionAbsolute?.y||0,width:e?.width||0,height:e?.height||0},t,!!n]}const ni=e=>({edges:e.edges,width:e.width,height:e.height,nodeInternals:e.nodeInternals,elementsSelectable:e.elementsSelectable,onError:e.onError});function oi({rfId:n,edgeTypes:o,noPanClassName:r,edgeUpdaterRadius:i,onEdgeClick:a,onEdgeDoubleClick:s,onEdgeContextMenu:u,onEdgeMouseEnter:l,onEdgeMouseMove:c,onEdgeMouseLeave:d,onEdgeUpdate:h,onEdgeUpdateStart:f,onEdgeUpdateEnd:g}){const{edges:p,width:m,height:y,elementsSelectable:v,nodeInternals:x}=ar(ni,pr);return t.jsxs("svg",{width:m||"100vw",height:y||"100vh",className:"react-diagram__edges react-diagram__container",children:[t.jsx(zr,{defaultColor:"#000000",rfId:n}),t.jsx("g",{children:p.map((p=>{const{type:m,id:y,className:b,style:w,ariaLabel:_,source:E,sourcePort:S,target:N,targetPort:P,markerEnd:M,markerStart:C,label:k,labelStyle:A,labelShowBg:B,labelBgStyle:$,labelBgPadding:I,labelBgBorderRadius:D,...T}=p,[j,z,R]=ti(x.get(E)),[O,X,L]=ti(x.get(N));if(!R||!L)return null;const Y=m||"straight",Z=o[Y]||o.default,V=X.target,U=ei(z.source,S),q=ei(V,P),K=U?.position||e.Position.Bottom,W=q?.position||e.Position.Top;if(!U||!q)return null;const F={id:y,className:dr([b,r]),style:w,ariaLabel:_},H={source:E,sourcePort:S,target:N,targetPort:P},G={markerEnd:M,markerStart:C},Q={label:k,labelStyle:A,labelShowBg:B,labelBgStyle:$,labelBgPadding:I,labelBgBorderRadius:D},J=((e,t,n,o,r,i)=>{const a=Jr(n,e,t),s=Jr(i,o,r);return{sourceX:a.x,sourceY:a.y,targetX:s.x,targetY:s.y}})(j,U,K,O,q,W),ee={...J,sourcePosition:K,targetPosition:W},te={onClick:a,onDoubleClick:s,onContextMenu:u,onMouseEnter:l,onMouseMove:c,onMouseLeave:d,onEdgeUpdate:h,onEdgeUpdateStart:f,onEdgeUpdateEnd:g};return t.jsx(Z,{...T,...F,...H,...G,...Q,...ee,...te,rfId:n,type:Y,elementsSelectable:v,edgeUpdaterRadius:i},y)}))})]})}oi.displayName="EdgeRenderer";var ri=n.memo(oi);const ii={[e.Position.Left]:e.Position.Right,[e.Position.Right]:e.Position.Left,[e.Position.Top]:e.Position.Bottom,[e.Position.Bottom]:e.Position.Top};function ai({nodeId:e,portType:o,edge:r,Component:i,EdgeWrapper:a}){const{fromNode:s,toX:u,toY:l,startPort:c}=ar(n.useCallback((t=>({fromNode:t.nodeInternals.get(e),startPort:t.connectionStartPort,toX:(t.connectionPosition.x-t.transform[0])/t.transform[2],toY:(t.connectionPosition.y-t.transform[1])/t.transform[2]})),[e]),pr),d=s?.[Fn]?.portBounds,h=d?.[o];if(!s||!h)return null;const f=h.find((e=>e.id===c?.portId))||h[0],g=f?f.x+f.width/2:(s.width??0)/2,p=f?f.y+f.height/2:s.height??0,m=(s.positionAbsolute?.x??0)+g,y=(s.positionAbsolute?.y??0)+p,v=f?.position,x=v?ii[v]:null;if(!v||!x)return null;if(i)return t.jsx(i,{fromNode:s,fromPort:f,fromX:m,fromY:y,toX:u,toY:l,fromPosition:v,toPosition:x});if(!r){const e=`M${m},${y} ${u},${l}`;return t.jsx("path",{d:e,fill:"none",className:"react-diagram__connection-path"})}return t.jsx(a,{id:r.id,className:"react-diagram__connection",type:r.type||"default",source:r.source||e,target:r.target,focusable:!1,elementsSelectable:!1,sourceX:m,sourceY:y,targetX:u,targetY:l,sourcePosition:v,targetPosition:x})}ai.displayName="ConnectionPath";const si=e=>({edges:e.edges,connectionStartPort:e.connectionStartPort});function ui({containerStyle:e,edgeTypes:n,component:o}){const{connectionStartPort:r,edges:i}=ar(si,pr);if(!r)return null;const{nodeId:a,portType:s}=r;if(!!(!a||!s))return null;const u=i.find((e=>e[s]===a)),l=u?.type?n[u.type]:n.default;return t.jsx("svg",{style:e,className:"react-diagram__container react-diagram__connection-line",children:t.jsx("g",{className:"react-diagram__connection",children:t.jsx(ai,{nodeId:a,portType:s,edge:u,Component:o,EdgeWrapper:l})})})}function li({rfId:e,noPanClassName:n,panning:o,defaultViewport:r,multiSelectionKeyCode:i,dragSelectionKeyCode:a,deleteKeyCode:s,onlyRenderVisibleElements:u,disableKeyboardA11y:l,noDragClassName:c,nodeOrigin:d,nodeExtent:h,nodeTypes:f,onNodeClick:g,onNodeDoubleClick:p,onNodeContextMenu:m,onNodeMouseEnter:y,onNodeMouseMove:v,onNodeMouseLeave:x,edgeTypes:b,edgeUpdaterRadius:w,onEdgeClick:_,onEdgeDoubleClick:E,onEdgeContextMenu:S,onEdgeMouseEnter:N,onEdgeMouseMove:P,onEdgeMouseLeave:M,onEdgeUpdate:C,onEdgeUpdateStart:k,onEdgeUpdateEnd:A,onMove:B,onMoveStart:$,onMoveEnd:I,onPaneClick:D,onPaneMouseEnter:T,onPaneMouseMove:j,onPaneMouseLeave:z,ConnectionLineContainerStyle:R,ConnectionLineComponent:O}){return t.jsxs(Ar,{multiSelectionKeyCode:i,dragSelectionKeyCode:a,deleteKeyCode:s,noPanClassName:n,panning:o,defaultViewport:r,onMove:B,onMoveStart:$,onMoveEnd:I,onPaneClick:D,onPaneMouseEnter:T,onPaneMouseMove:j,onPaneMouseLeave:z,children:[t.jsx(Ir,{rfId:e,nodeTypes:f,onlyRenderVisibleElements:u,disableKeyboardA11y:l,nodeOrigin:d,nodeExtent:h,noDragClassName:c,noPanClassName:n,onNodeClick:g,onNodeDoubleClick:p,onNodeContextMenu:m,onNodeMouseEnter:y,onNodeMouseMove:v,onNodeMouseLeave:x}),t.jsx(ri,{rfId:e,edgeTypes:b,noPanClassName:n,edgeUpdaterRadius:w,onEdgeClick:_,onEdgeDoubleClick:E,onEdgeContextMenu:S,onEdgeMouseEnter:N,onEdgeMouseMove:P,onEdgeMouseLeave:M,onEdgeUpdate:C,onEdgeUpdateStart:k,onEdgeUpdateEnd:A}),t.jsx(ui,{edgeTypes:b,containerStyle:R,component:O})]})}li.displayName="DiagramView";var ci=n.memo(li);const di=Symbol.for("internals"),hi=e=>{const{setNodes:t,setEdges:n,setNodeExtent:o,setTranslateExtent:r,setMinZoom:i,setMaxZoom:a}=e;return{setNodes:t,setEdges:n,setNodeExtent:o,setTranslateExtent:r,setMinZoom:i,setMaxZoom:a}};function fi(e,t){n.useEffect((()=>{void 0!==e&&t(e)}),[e])}function gi(e,t,o){n.useEffect((()=>{void 0!==t&&o({[e]:t})}),[t])}const pi=({nodes:e,edges:t,nodeOrigin:n,smoothStep:o,centerStep:r,gridStep:i,elevateNodesOnSelect:a,nodesDraggable:s,autoPanOnNodeDrag:u,autoPanOnConnect:l,connectionRadius:c,nodeExtent:d,translateExtent:h,minZoom:f,maxZoom:g,onNodesChange:p,onNodeDrag:m,onNodeDragStart:y,onNodeDragEnd:v,onNodesDelete:x,onEdgesChange:b,onEdgesDelete:w,onConnect:_,onConnectStart:E,onConnectEnd:S,onError:N,onBeforeDelete:P,onDelete:M})=>{const{setNodes:C,setEdges:k,setNodeExtent:A,setTranslateExtent:B,setMinZoom:$,setMaxZoom:I}=ar(hi,pr),D=sr();return fi(e,C),fi(t,k),fi(d,A),fi(d,A),fi(h,B),fi(f,$),fi(g,I),gi("nodeOrigin",n,D.setState),gi("smoothStep",o,D.setState),gi("centerStep",r,D.setState),gi("gridStep",i,D.setState),gi("elevateNodesOnSelect",a,D.setState),gi("nodesDraggable",s,D.setState),gi("autoPanOnNodeDrag",u,D.setState),gi("autoPanOnConnect",l,D.setState),gi("connectionRadius",c,D.setState),gi("onNodesChange",p,D.setState),gi("onNodeDrag",m,D.setState),gi("onNodeDragStart",y,D.setState),gi("onNodeDragEnd",v,D.setState),gi("onNodesDelete",x,D.setState),gi("onEdgesChange",b,D.setState),gi("onEdgesDelete",w,D.setState),gi("onConnect",_,D.setState),gi("onConnectStart",E,D.setState),gi("onConnectEnd",S,D.setState),gi("onBeforeDelete",P,D.setState),gi("onDelete",M,D.setState),gi("onError",(e=>(t,n="")=>e?.(t,oo[t](n)))(N),D.setState),null};function mi(e,t){n.useRef(null);return n.useMemo((()=>t(e)),[e])}const yi=n.createContext(null),vi=yi.Provider;yi.Consumer;function xi({id:e,type:o,position:r}){const i=e||null,a=sr(),s=n.useContext(yi);if(!s)return null;const u=e=>{const{defaultEdgeOptions:t,onConnect:n}=a.getState(),o={...t,...e};n?.(o)},l=e=>{const t=Qn(e.nativeEvent),{button:n}=e;if(t&&0===n||!t){const{domNode:t,autoPanOnConnect:n,connectionRadius:r,transform:l,getNodes:c,cancelConnection:d,updateConnection:h,onConnectStart:f,onConnectEnd:g,panBy:p}=a.getState();jo({event:e.nativeEvent,nodeId:s,portId:i,portType:o,domNode:t,autoPanOnConnect:n,connectionRadius:r,nodes:c(),cancelConnection:d,updateConnection:h,onConnect:u,onConnectStart:f,onConnectEnd:g,panBy:p,getTransform:()=>l})}};return t.jsx("div",{"data-nodeid":s,"data-id":`${s}-${i}-${o}`,"data-portid":i,"data-port-position":r,className:`react-diagram__port react-diagram__port-${r} ${o} nodrag`,onMouseDown:l,onTouchStart:l})}xi.displayName="Port";var bi=n.memo(xi);function wi({data:n}){return t.jsxs(t.Fragment,{children:[t.jsx(bi,{type:"target",position:e.Position.Top}),n.label,t.jsx(bi,{type:"source",position:e.Position.Bottom})]})}const _i=e=>{function o({id:o,type:r="default",data:i,positionX:a,positionY:s,sourcePosition:u,targetPosition:l,onClick:c,onMouseEnter:d,onMouseMove:h,onMouseLeave:f,onContextMenu:g,onDoubleClick:p,style:m,width:y,height:v,className:x,selected:b,intersected:w,hidden:_,draggable:E=!0,selectable:S=!0,resizeObserver:N,dragHandle:P,zIndex:M=0,isParent:C,initialized:k,disableKeyboardA11y:A,ariaLabel:B,rfId:$,nodesDraggable:I,elementsSelectable:D,noDragClassName:T,noPanClassName:j}){const z=sr(),R=z.getState().nodeInternals.get(o),O=n.useRef(null),X=n.useRef(u),L=n.useRef(l),Y=n.useRef(r),Z=!!(E||I&&void 0===E),V=!!(S||D&&void 0===S),U=Z||c||d||h||f;n.useEffect((()=>{if(O.current&&!_){const e=O.current;return N?.observe(e),()=>N?.unobserve(e)}}),[_]),n.useEffect((()=>{const e=Y.current!==r,t=X.current!==u,n=L.current!==l;O.current&&(e||t||n)&&(e&&(Y.current=r),t&&(X.current=u),n&&(L.current=l),z.getState().updateNodeDimensions([{id:o,nodeElement:O.current,forceUpdate:!0}]))}),[o,r,u,l]);const q=xr({nodeRef:O,nodeId:o,disabled:_||!Z,isSelectable:V,noDragClassName:T});if(_)return null;const K=dr(["react-diagram__node",`react-diagram__node-${r}`,{[j]:Z},x,{selected:b,intersected:w,parent:C,dragging:q}]),W={zIndex:M,transform:`translate(${a}px,${s}px)`,pointerEvents:U?"all":"none",visibility:k?"visible":"hidden",width:y,height:v,...m},F={onClick:e=>{Z||vr({id:o,store:z,nodeRef:O,isSelectable:V}),c&&c(e,{...R})},onDoubleClick:yr(o,z.getState,p),onContextMenu:yr(o,z.getState,g),onMouseEnter:yr(o,z.getState,d),onMouseMove:yr(o,z.getState,h),onMouseLeave:yr(o,z.getState,f)},H={positionX:a,positionY:s,sourcePosition:u,targetPosition:l};return t.jsx("div",{...F,ref:O,className:K,style:W,"data-id":o,tabIndex:0,role:"button","aria-describedby":A?void 0:`react-diagram__node-desc-${$}`,"aria-label":B,children:t.jsx(vi,{value:o,children:t.jsx(e,{...H,id:o,zIndex:M,type:r,data:i,dragHandle:P,selected:b,intersected:w})})})}return o.displayName="NodeWrapper",n.memo(o)},Ei=e=>{const t={default:_i(e.default||wi)},n=Object.keys(e).filter((e=>!Object.keys(t).includes(e))).reduce(((t,n)=>(t[n]=_i(e[n]||wi),t)),{});return{...t,...n}},Si=[[Number.NEGATIVE_INFINITY,Number.NEGATIVE_INFINITY],[Number.POSITIVE_INFINITY,Number.POSITIVE_INFINITY]],Ni={rfId:"1",width:0,height:0,transform:[0,0,1],nodeInternals:new Map,edges:[],elementsSelectable:!0,onNodesChange:null,domNode:null,nodeOrigin:[0,0],smoothStep:!1,centerStep:!1,gridStep:void 0,elevateNodesOnSelect:!0,nodesDraggable:!0,multiSelectionActive:!1,selectionBoxActive:!1,d3Zoom:null,d3Selection:null,minZoom:.5,maxZoom:2,connectionPosition:{x:0,y:0},connectionStartPort:null,connectionEndPort:null,autoPanOnNodeDrag:!0,autoPanOnConnect:!0,nodeExtent:Si,translateExtent:Si,connectionRadius:20,onError:(e,t="")=>{}},Pi=()=>{return e=(e,t)=>({...Ni,setNodes:n=>{const{nodeInternals:o,nodeOrigin:r,elevateNodesOnSelect:i}=t();e({nodeInternals:Bo(n,o,r,i)})},getNodes:()=>Array.from(t().nodeInternals.values()),setEdges:n=>{const{defaultEdgeOptions:o={}}=t();e({edges:n.map((e=>({...o,...e})))})},updateNodeDimensions:n=>{const{triggerNodeChanges:o,nodeInternals:r,domNode:i,nodeOrigin:a}=t(),s=i?.querySelector(".react-diagram__viewport");if(!s)return;const u=window.getComputedStyle(s),{m22:l}=new window.DOMMatrixReadOnly(u.transform),c=[],d=[],h=n.reduce(((e,t)=>{const n=r.get(t.id);if(n){const o=Hn(t.nodeElement);if(o.width&&o.height&&(n.width!==o.width||n.height!==o.height||t.forceUpdate)){const i={...n,[Fn]:{...n[Fn],portBounds:{id:n[Fn]?.portBounds?.id||null,source:Gn(".source",t.nodeElement,l,a),target:Gn(".target",t.nodeElement,l,a)}},...o};r.set(n.id,i);const s=$o(i,r);n.intersected!==s&&c.push({id:n.id,type:"intersect",intersected:s}),d.push({id:n.id,type:"position",dragging:!1,position:n.position,positionAbsolute:n.positionAbsolute}),e.push({id:n.id,type:"dimensions",dimensions:o})}}return e}),[]);e({nodeInternals:new Map(r)}),o([...h,...c,...d])},updateNodesPosition:(e,n=!1,o)=>{const{triggerNodeChanges:r}=t();r(e.map((e=>{const t={id:e.id,type:"position",dragging:n};return o?(o(e),{...t,position:e.position,positionAbsolute:e.positionAbsolute}):t})))},triggerNodeChanges:e=>{const{onNodesChange:n}=t();e?.length&&n?.(e)},triggerEdgeChanges:e=>{const{onEdgesChange:n}=t();e?.length&&n?.(e)},updateNodesIntersection:()=>{const{nodeInternals:e,triggerNodeChanges:n}=t(),o=Array.from(e.values()),r=[];o.forEach((t=>{const n=$o(t,e);t.intersected!==n&&r.push({id:t.id,type:"intersect",intersected:n})})),n(r)},addSelectedNodes:e=>{const{multiSelectionActive:n,getNodes:o,triggerNodeChanges:r}=t();let i;i=n?e.map((e=>Er(e,!0))):Sr(o(),e),r(i)},unselectNodes:({nodes:e}={})=>{const{getNodes:n,triggerNodeChanges:o}=t();o((e||n()).map((e=>(e.selected=!1,Er(e.id,!1)))))},addSelectedEdges:e=>{const{multiSelectionActive:n,getNodes:o,edges:r,triggerNodeChanges:i,triggerEdgeChanges:a}=t(),s=o();n?a(e.map((e=>Er(e,!0)))):(a(Sr(r,e)),i(Sr(s,[])))},unselectEdges:({edges:e}={})=>{const{edges:n,triggerEdgeChanges:o}=t();o((e||n).map((e=>(e.selected=!1,Er(e.id,!1)))))},resetSelectedElements:()=>{const{edges:e,getNodes:n,triggerNodeChanges:o,triggerEdgeChanges:r}=t(),i=n().filter((e=>e.selected)).map((e=>Er(e.id,!1))),a=e.filter((e=>e.selected)).map((e=>Er(e.id,!1)));o(i),r(a)},deleteElements:async e=>{const{edges:n,getNodes:o,onBeforeDelete:r,onDelete:i,onNodesDelete:a,onEdgesDelete:s,triggerNodeChanges:u,triggerEdgeChanges:l}=t(),c=o();await async function(e,t,n){const{nodes:o,edges:r}=t,{nodes:i,edges:a}=mo(e,{nodes:o,edges:r});function s(){const e=i.length>0,t=a.length>0;(e||t)&&n?.onDelete?.({nodes:i,edges:a})}if(i.length,a.length,!n?.onBeforeDelete)return s(),{edges:a,nodes:i};const u=await(n?.onBeforeDelete?.({nodes:i,edges:a}));return"boolean"==typeof u?(u&&s(),u?{edges:a,nodes:i}:{edges:[],nodes:[]}):u}(e,{nodes:c,edges:n},{onBeforeDelete:r,onDelete:({nodes:e,edges:t})=>{const n=e.length>0,o=t.length>0;if(n){const t=e.map(Nr("remove"));a?.(e),u(t)}if(o){const e=t.map(Nr("remove"));s?.(t),l(e)}i?.({nodes:e,edges:t})}})},cancelConnection:()=>e({connectionStartPort:null,connectionEndPort:null}),updateConnection:n=>{const{connectionPosition:o}=t(),r={...n,connectionPosition:n.connectionPosition??o};e(r)},panBy:e=>{const{transform:n,width:o,height:r,d3Zoom:i,d3Selection:a}=t();if(!i||!a||!e.x&&!e.y)return;const s=On.translate(n[0]+e.x,n[1]+e.y).scale(n[2]),u=[[0,0],[o,r]],l=i?.constrain()(s,u,Si);i.transform(a,l)},setNodeExtent:n=>{const{nodeInternals:o}=t();o.forEach((e=>{e.positionAbsolute=co(e.positionAbsolute,n)})),e({nodeExtent:n,nodeInternals:new Map(o)})},setTranslateExtent:n=>{t().d3Zoom?.translateExtent(n),e({translateExtent:n})},setMinZoom:n=>{const{d3Zoom:o,maxZoom:r}=t();o?.scaleExtent([n,r]),e({minZoom:n})},setMaxZoom:n=>{const{d3Zoom:o,minZoom:r}=t();o?.scaleExtent([r,n]),e({maxZoom:n})}}),e?Vo(e):Vo;var e},Mi=({children:e})=>{const o=n.useRef(null);return o.current||(o.current=Pi()),t.jsx(rr,{value:o.current,children:e})};function Ci({children:e}){return n.useContext(or)?t.jsx(t.Fragment,{children:e}):t.jsx(Mi,{children:e})}Mi.displayName="ReactDiagramProvider",Ci.displayName="ReactDiagramWrapper";const ki={x:0,y:0,zoom:1},Ai=[0,0],Bi={default:wi},$i={step:Zr};function Ii({children:e,id:n,panning:o=!0,minZoom:r,maxZoom:i,translateExtent:a,nodeExtent:s=Si,defaultViewport:u=ki,multiSelectionKeyCode:l="Meta",dragSelectionKeyCode:c="Shift",deleteKeyCode:d="Backspace",onlyRenderVisibleElements:h=!1,disableKeyboardA11y:f=!1,noDragClassName:g="nodrag",noPanClassName:p="nopan",nodeOrigin:m=Ai,nodeTypes:y=Bi,edgeTypes:v=$i,edgeUpdaterRadius:x,ConnectionLineContainerStyle:b,ConnectionLineComponent:w,nodes:_,edges:E,nodesDraggable:S,elevateNodesOnSelect:N,autoPanOnNodeDrag:P,autoPanOnConnect:M,connectionRadius:C,smoothStep:k,centerStep:A,gridStep:B,onNodesChange:$,onNodeDrag:I,onNodeDragStart:D,onNodeDragEnd:T,onNodeClick:j,onNodeDoubleClick:z,onNodeContextMenu:R,onNodeMouseEnter:O,onNodeMouseMove:X,onNodeMouseLeave:L,onNodesDelete:Y,onEdgesChange:Z,onEdgeClick:V,onEdgeDoubleClick:U,onEdgeContextMenu:q,onEdgeMouseEnter:K,onEdgeMouseMove:W,onEdgeMouseLeave:F,onEdgeUpdate:H,onEdgeUpdateStart:G,onEdgeUpdateEnd:Q,onEdgesDelete:J,onConnect:ee,onConnectStart:te,onConnectEnd:ne,onDelete:oe,onBeforeDelete:re,onMove:ie,onMoveStart:ae,onMoveEnd:se,onPaneClick:ue,onPaneMouseEnter:le,onPaneMouseMove:ce,onPaneMouseLeave:de,onError:he,...fe},ge){const pe=n||"1",me=mi(y,Ei),ye=mi(v,Qr);return t.jsx("div",{...fe,ref:ge,className:"react-diagram",children:t.jsxs(Ci,{children:[t.jsx(ci,{rfId:pe,panning:o,defaultViewport:u,multiSelectionKeyCode:l,dragSelectionKeyCode:c,deleteKeyCode:d,onlyRenderVisibleElements:h,disableKeyboardA11y:f,noDragClassName:g,noPanClassName:p,nodeOrigin:m,nodeExtent:s,nodeTypes:me,edgeTypes:ye,edgeUpdaterRadius:x,ConnectionLineContainerStyle:b,ConnectionLineComponent:w,onNodeClick:j,onNodeDoubleClick:z,onNodeContextMenu:R,onNodeMouseEnter:O,onNodeMouseMove:X,onNodeMouseLeave:L,onEdgeClick:V,onEdgeDoubleClick:U,onEdgeContextMenu:q,onEdgeMouseEnter:K,onEdgeMouseMove:W,onEdgeMouseLeave:F,onEdgeUpdate:H,onEdgeUpdateStart:G,onEdgeUpdateEnd:Q,onMove:ie,onMoveStart:ae,onMoveEnd:se,onPaneClick:ue,onPaneMouseEnter:le,onPaneMouseMove:ce,onPaneMouseLeave:de}),t.jsx(pi,{rfId:pe,nodes:_,edges:E,nodesDraggable:S,elevateNodesOnSelect:N,autoPanOnNodeDrag:P,autoPanOnConnect:M,connectionRadius:C,nodeOrigin:m,nodeExtent:s,translateExtent:a,minZoom:r,maxZoom:i,smoothStep:k,centerStep:A,gridStep:B,onNodesChange:$,onNodeDrag:I,onNodeDragStart:D,onNodeDragEnd:T,onNodesDelete:Y,onEdgesChange:Z,onEdgesDelete:J,onConnect:ee,onConnectStart:te,onConnectEnd:ne,onError:he,onBeforeDelete:re,onDelete:oe}),e]})})}Ii.displayName="ReactDiagram";var Di=n.forwardRef(Ii);function Ti({color:e,scaledGap:n,lineWidth:o}){const r=`${`M${n[0]/2} 0`} ${`V${n[1]}`} ${"M0 "+n[1]/2} ${`H${n[0]}`}`;return t.jsx("path",{stroke:e,strokeWidth:o,d:r})}const ji=e=>({transform:e.transform,rfId:e.rfId,gridStepGap:e.gridStep});function zi({gap:e,lineWidth:o=1,color:r="#000000"}){const i=n.useRef(null),{transform:a,rfId:s,gridStepGap:u}=ar(ji,pr),l=e||(u||50),c=Array.isArray(l)?l:[l,l],d=[c[0]*a[2]||1,c[1]*a[2]||1],h=[d[0]/2,d[1]/2];return t.jsxs("svg",{className:"react-diagram__container react-diagram__background",ref:i,children:[t.jsx("pattern",{id:`background-${s}`,x:a[0]%d[0],y:a[1]%d[1],width:d[0],height:d[1],patternUnits:"userSpaceOnUse",patternTransform:`translate(-${h[0]},-${h[1]})`,children:t.jsx(Ti,{scaledGap:d,color:r,lineWidth:o})}),t.jsx("rect",{x:"0",y:"0",width:"100%",height:"100%",fill:`url(#background-${s})`})]})}zi.displayName="Background";var Ri=n.memo(zi);e.Background=Ri,e.BaseEdge=Or,e.BezierEdge=Ur,e.Port=bi,e.ReactDiagramProvider=Mi,e.StepEdge=Zr,e.addEdge=(e,t)=>{if(!ho(e))return t;if(((e,t)=>t.some((t=>!(t.source!==e.source||t.target!==e.target||t.sourcePort!==e.sourcePort&&(t.sourcePort||e.sourcePort)||t.targetPort!==e.targetPort&&(t.targetPort||e.targetPort)))))(e,t))return t;let n;return null===e.sourcePort&&delete e.sourcePort,null===e.targetPort&&delete e.targetPort,n=e.id?{...e}:{...e,id:xo(e)},t.concat(n)},e.boxToRect=uo,e.clamp=ro,e.default=Di,e.getBezierEdgeCenter=No,e.getBezierPath=Co,e.getStepPath=Eo,e.getStraightPath=So,e.internalsSymbol=di,e.isCoreEdge=ho,e.isCoreNode=e=>"id"in e&&!("source"in e)&&!("target"in e),e.rectToBox=so,e.updateEdge=(e,t,n,o={shouldReplaceId:!0})=>{const{id:r,...i}=e;!t.source||t.target,n.find((e=>e.id===r));const a={...i,id:o.shouldReplaceId?xo(t):r,source:t.source,target:t.target};return n.filter((e=>e.id!==r)).concat(a)},e.useEdgesState=function(e){const[t,o]=n.useState(e),r=n.useCallback((e=>o((t=>function(e,t){return _r(e,t)}(e,t)))),[]);return[t,o,r]},e.useNodesState=function(e){const[t,o]=n.useState(e),r=n.useCallback((e=>o((t=>function(e,t){return _r(e,t)}(e,t)))),[]);return[t,o,r]},e.useStore=ar,e.useStoreApi=sr,Object.defineProperty(e,"__esModule",{value:!0})}));
|
|
10
|
+
*/Fo.exports=function(){if(Wo)return Ho;Wo=1;var e=n,t=Jo(),o="function"==typeof Object.is?Object.is:function(e,t){return e===t&&(0!==e||1/e==1/t)||e!=e&&t!=t},r=t.useSyncExternalStore,i=e.useRef,a=e.useEffect,s=e.useMemo,u=e.useDebugValue;return Ho.useSyncExternalStoreWithSelector=function(e,t,n,l,c){var d=i(null);if(null===d.current){var h={hasValue:!1,value:null};d.current=h}else h=d.current;d=s((function(){function e(e){if(!a){if(a=!0,r=e,e=l(e),void 0!==c&&h.hasValue){var t=h.value;if(c(t,e))return i=t}return i=e}if(t=i,o(r,e))return t;var n=l(e);return void 0!==c&&c(t,n)?t:(r=e,i=n)}var r,i,a=!1,s=void 0===n?null:n;return[function(){return e(t())},null===s?void 0:function(){return e(s())}]}),[t,n,l,c]);var f=r(e,d[0],d[1]);return a((function(){h.hasValue=!0,h.value=f}),[f]),u(f),f},Ho}();var er=Uo(Fo.exports);const{useSyncExternalStoreWithSelector:tr}=er;let nr=!1;const or=n.createContext(null),rr=or.Provider,ir=oo["001"]();function ar(e,t){const o=n.useContext(or);if(null===o)throw new Error(ir);return function(e,t=e.getState,o){o&&!nr&&(console.warn("[DEPRECATED] Use `createWithEqualityFn` instead of `create` or use `useStoreWithEqualityFn` instead of `useStore`. They can be imported from 'zustand/traditional'. https://github.com/pmndrs/zustand/discussions/1937"),nr=!0);const r=tr(e.subscribe,e.getState,e.getServerState||e.getState,t,o);return n.useDebugValue(r),r}(o,e,t)}const sr=()=>{const e=n.useContext(or);if(null===e)throw new Error(ir);return n.useMemo((()=>({getState:e.getState,setState:e.setState,subscribe:e.subscribe,destroy:e.destroy})),[e])},ur="undefined"!=typeof document?document:null;function lr(e,t={}){const o=void 0!==t.target?t.target:ur,[r,i]=n.useState(!1);return n.useEffect((()=>{if(!o)return;const t=t=>{t.key===e&&i(!0)},n=t=>{t.key===e&&i(!1)},r=()=>i(!1);return o.addEventListener("keydown",t),o.addEventListener("keyup",n),window.addEventListener("blur",r),window.addEventListener("contextmenu",r),()=>{o.removeEventListener("keydown",t),o.removeEventListener("keyup",n),window.removeEventListener("blur",r),window.addEventListener("contextmenu",r)}}),[e,o]),r}const cr="undefined"!=typeof window?window:void 0;function dr(e){if("string"==typeof e||"number"==typeof e)return""+e;let t="";if(Array.isArray(e))for(let n,o=0;o<e.length;o++)""!==(n=dr(e[o]))&&(t+=(t&&" ")+n);else for(let n in e)e[n]&&(t+=(t&&" ")+n);return t}const hr=({noPanClassName:e,panning:o,selection:r,minZoom:i,maxZoom:a,defaultViewport:s,translateExtent:u,children:l,onMove:c,onMoveStart:d,onMoveEnd:h,onPaneClick:f,onPaneMouseEnter:g,onPaneMouseMove:p,onPaneMouseLeave:m})=>{const y=sr(),v=n.useRef(null),x=n.useRef();return n.useEffect((()=>{if(!v.current)return;x.current=Zo({domNode:v.current,minZoom:i,maxZoom:a,translateExtent:u,viewport:s,panning:o,onTransformChange:e=>{y.setState({transform:e})},onPaneClick:f,onPanZoomStart:d,onPanZoom:c,onPanZoomEnd:h});const{x:e,y:t,zoom:n}=x.current.getViewport();return y.setState({transform:[e,t,n],domNode:v.current.closest(".react-diagram")}),()=>{x.current?.destroy()}}),[]),n.useEffect((()=>{x.current?.update({noPanClassName:e,selection:r})}),[e,r]),n.useEffect((()=>{x.current?.setScaleExtent([i,a])}),[i,a]),t.jsx("div",{ref:v,className:dr(["react-diagram__pane react-diagram__container",{selection:r}]),onMouseEnter:g,onMouseMove:p,onMouseLeave:m,children:l})},fr=e=>`translate(${e.transform[0]}px,${e.transform[1]}px) scale(${e.transform[2]})`;function gr({children:e}){const n=ar(fr);return t.jsx("div",{className:"react-diagram__viewport react-diagram__container",style:{transform:n},children:e})}function pr(e,t){if(Object.is(e,t))return!0;if("object"!=typeof e||null===e||"object"!=typeof t||null===t)return!1;if(e instanceof Map&&t instanceof Map){if(e.size!==t.size)return!1;for(const[n,o]of e)if(!Object.is(o,t.get(n)))return!1;return!0}if(e instanceof Set&&t instanceof Set){if(e.size!==t.size)return!1;for(const n of e)if(!t.has(n))return!1;return!0}const n=Object.keys(e);if(n.length!==Object.keys(t).length)return!1;for(let o=0;o<n.length;o++)if(!Object.prototype.hasOwnProperty.call(t,n[o])||!Object.is(e[n[o]],t[n[o]]))return!1;return!0}function mr({rect:e}){const{width:n,height:o,x:r,y:i}=e;return n&&o&&r&&i?t.jsx("div",{className:"react-diagram__drag-box react-diagram__container",style:{width:n,height:o,transform:`translate(${r}px, ${i}px)`}}):null}function yr(e,t,n){return void 0===n?n:o=>{const r=t().nodeInternals.get(e);n(o,{...r})}}function vr({id:e,store:t,isSelectable:n,unselect:o=!1,nodeRef:r}){if(!n)return;const{addSelectedNodes:i,unselectNodes:a,multiSelectionActive:s,nodeInternals:u}=t.getState(),l=u.get(e);t.setState({selectionBoxActive:!1}),l.selected?(o||l.selected&&s)&&(a({nodes:[l]}),requestAnimationFrame((()=>r?.current?.blur()))):i([e])}const xr=({disabled:e,nodeRef:t,nodeId:o,isSelectable:r,noDragClassName:i})=>{const a=sr(),s=n.useRef(),[u,l]=n.useState(!1);return n.useEffect((()=>{s.current=Xo({getStore:()=>a.getState(),onNodeMouseDown:e=>{vr({id:e,store:a,nodeRef:t,isSelectable:r})},onDrag:(e,t,n,o)=>{const{onNodeDrag:r}=a.getState();r?.(e,n,o)},onDragStart:(e,t,n,o)=>{const{onNodeDragStart:r}=a.getState();r?.(e,n,o),l(!0)},onDragEnd:(e,t,n,o)=>{const{onNodeDragEnd:r}=a.getState();r?.(e,n,o),l(!1)}})}),[]),n.useEffect((()=>{if(e)s.current?.destroy();else if(t.current)return s.current?.update({noDragClassName:i,domNode:t.current,isSelectable:r,nodeId:o}),()=>{s.current?.destroy()}}),[i,e,r,t,o]),u};var br=n.memo((function({rect:e,transform:o}){const r=n.useRef(null);xr({nodeRef:r});const{width:i,height:a,x:s,y:u}=e;return t.jsx("div",{className:dr(["react-diagram__selection-box","react-diagram__container"]),style:{transform:o},children:t.jsx("div",{ref:r,className:"react-diagram__selection-box-rect",tabIndex:-1,style:{width:i,height:a,top:u,left:s}})})}));const wr=(e,t)=>{const n=e.find((e=>e.id===t.parentNode));if(n){const e=t.position.x+t.width-n.width,o=t.position.y+t.height-n.height;if(e>0||o>0||t.position.x<0||t.position.y<0){if(n.style={...n.style},n.style.width=n.style.width??n.width,n.style.height=n.style.height??n.height,e>0&&(n.style.width+=e),o>0&&(n.style.height+=o),t.position.x<0){const e=Math.abs(t.position.x);n.position.x=n.position.x-e,n.style.width+=e,t.position.x=0}if(t.position.y<0){const e=Math.abs(t.position.y);n.position.y=n.position.y-e,n.style.height+=e,t.position.y=0}n.width=n.style.width,n.height=n.style.height}}},_r=(e,t)=>{if(e.some((e=>"reset"===e.type)))return e.filter((e=>"reset"===e.type)).map((e=>e.item));const n=e.filter((e=>"add"===e.type)).map((e=>e.item));return t.reduce(((t,n)=>{const o=e.filter((e=>e.id===n.id));if(0===o.length)return t.push(n),t;const r={...n};for(const e of o)if(e)switch(e.type){case"select":r.selected=e.selected;break;case"position":void 0!==e.position&&(r.position=e.position),void 0!==e.positionAbsolute&&(r.positionAbsolute=e.positionAbsolute),void 0!==e.dragging&&(r.dragging=e.dragging),r.expandParent&&wr(t,r);break;case"dimensions":void 0!==e.dimensions&&(r.width=e.dimensions.width,r.height=e.dimensions.height),void 0!==e.updateStyle&&(r.style={...r.style||{},...e.dimensions}),"boolean"==typeof e.resizing&&(r.resizing=e.resizing),r.expandParent&&wr(t,r);break;case"intersect":r.intersected=e.intersected;break;case"remove":return t}return t.push(r),t}),n)};const Er=(e,t)=>({id:e,type:"select",selected:t});function Sr(e,t){return e.reduce(((e,n)=>{const o=t.includes(n.id);return!n.selected&&o?(n.selected=!0,e.push(Er(n.id,!0))):n.selected&&!o&&(n.selected=!1,e.push(Er(n.id,!1))),e}),[])}const Nr=e=>t=>({id:t.id,type:e}),Pr=e=>{const{elementsSelectable:t,transform:n,selectionBoxActive:o,getNodes:r}=e,i=r().filter((e=>e.selected));return{elementsSelectable:t,selectionBoxRect:po(i,e.nodeOrigin),transformString:`translate(${n[0]}px,${n[1]}px) scale(${n[2]})`,selectionBoxActive:o}};function Mr({isSelecting:e,children:o}){const r=sr(),i=n.useRef(null),a=n.useRef(0),s=n.useRef(),{elementsSelectable:u,selectionBoxRect:l,transformString:c,selectionBoxActive:d}=ar(Pr,pr),[h,f]=n.useState({x:0,y:0}),[g,p]=n.useState({width:0,height:0,x:0,y:0}),[m,y]=n.useState(!1),v=()=>{r.setState({selectionBoxActive:a.current>0}),f({x:0,y:0}),p({width:0,height:0,x:0,y:0}),y(!1)},x=u&&e;return t.jsxs("div",{ref:i,className:dr(["react-diagram__container react-diagram__drag-selection",{active:x||m||d}]),onClick:x?e=>{e.target===i.current&&(r.getState().resetSelectedElements(),r.setState({selectionBoxActive:!1}),y(!1))}:void 0,onMouseDown:x?t=>{const{resetSelectedElements:n,domNode:o}=r.getState();if(s.current=o?.getBoundingClientRect(),!u||0!==t.button||t.target!==i.current||!s.current||!e)return;const{x:a,y:l}=Jn(t.nativeEvent,s.current);n(),p({width:0,height:0,x:a,y:l}),f({x:a,y:l})}:void 0,onMouseMove:x||m?e=>{const{nodeInternals:t,transform:n,nodeOrigin:o,getNodes:i,onNodesChange:u}=r.getState();if(!(h.x>0&&h.y>0)||!s.current)return;r.setState({selectionBoxActive:!1}),y(!0);const l=Jn(e.nativeEvent,s.current),c=h.x??0,d=h.y??0,f={x:l.x<c?l.x:c,y:l.y<d?l.y:d,width:Math.abs(l.x-c),height:Math.abs(l.y-d)},g=i(),m=go(t,f,n,!1,!0,o).map((e=>e.id));if(a.current!==m.length){a.current=m.length;const e=Sr(g,m);e.length&&u?.(e)}p(f)}:void 0,onMouseUp:u?e=>{0===e.button&&v()}:void 0,onMouseLeave:u?()=>{v()}:void 0,children:[o,m&&t.jsx(mr,{rect:g}),d&&t.jsx(br,{rect:l,transform:c})]})}const Cr=e=>{const{minZoom:t,maxZoom:n,translateExtent:o}=e;return{minZoom:t,maxZoom:n,translateExtent:o}};function kr({children:e,multiSelectionKeyCode:o,dragSelectionKeyCode:r,deleteKeyCode:i,noPanClassName:a,panning:s,defaultViewport:u,onMove:l,onMoveStart:c,onMoveEnd:d,onPaneClick:h,onPaneMouseEnter:f,onPaneMouseMove:g,onPaneMouseLeave:p}){(({deleteKeyCode:e="Backspace",multiSelectionKeyCode:t="Meta"})=>{const o=sr(),r=lr(t,{target:cr}),i=lr(e);n.useEffect((()=>{if(i){const{edges:e,getNodes:t,deleteElements:n}=o.getState();n({nodes:t().filter((e=>e.selected)),edges:e.filter((e=>e.selected))})}}),[i]),n.useEffect((()=>{o.setState({multiSelectionActive:r})}),[r])})({multiSelectionKeyCode:o,deleteKeyCode:i});const{minZoom:m,maxZoom:y,translateExtent:v}=ar(Cr),x=lr(r||"Shift"),b=s&&!x;return t.jsx(t.Fragment,{children:t.jsx(hr,{noPanClassName:a,panning:b,selection:x,minZoom:m,maxZoom:y,translateExtent:v,defaultViewport:u,onMove:l,onMoveStart:c,onMoveEnd:d,onPaneClick:h,onPaneMouseEnter:f,onPaneMouseMove:g,onPaneMouseLeave:p,children:t.jsx(Mr,{isSelecting:x,children:t.jsx(gr,{children:e})})})})}kr.displayName="DiagramRenderer";var Ar=n.memo(kr);const Br=e=>({nodesDraggable:e.nodesDraggable,elementsSelectable:e.elementsSelectable,updateNodeDimensions:e.updateNodeDimensions,onError:e.onError});function $r({nodeTypes:o,onNodeClick:r,onNodeMouseEnter:i,onNodeMouseMove:a,onNodeMouseLeave:s,onNodeContextMenu:u,onNodeDoubleClick:l,...c}){const{nodesDraggable:d,elementsSelectable:h,updateNodeDimensions:f,onError:g}=ar(Br,pr),p=ar(n.useCallback((e=>e.getNodes()),[])),m=n.useRef(),y=n.useMemo((()=>{if("undefined"==typeof ResizeObserver)return null;const e=new ResizeObserver((e=>{const t=e.map((e=>({id:e.target.getAttribute("data-id"),nodeElement:e.target,forceUpdate:!0})));f(t)}));return m.current=e,e}),[]);return n.useEffect((()=>()=>{m?.current?.disconnect()}),[]),t.jsx("div",{className:"react-diagram__nodes react-diagram__container",children:p.map((n=>{const{data:f,type:p,id:m,className:v,style:x,width:b,height:w,ariaLabel:_,selectable:E,draggable:S,positionAbsolute:N,hidden:P,selected:M,intersected:C}=n;let k=p||"default";o[k]||(g?.("010",k),k="default");const A=o[k]||o.default,B={id:m,className:v,style:x,width:b??("default"===k?120:void 0),height:w??("default"===k?60:void 0),ariaLabel:_},$={onClick:r,onMouseEnter:i,onMouseMove:a,onMouseLeave:s,onContextMenu:u,onDoubleClick:l},I={positionX:N?.x||0,positionY:N?.y||0,sourcePosition:e.Position.Bottom,targetPosition:e.Position.Top},D={selected:!!M,intersected:!!C,hidden:P,isParent:!!n[Fn]?.isParent,initialized:!!n.width&&!!n.height};return t.jsx(A,{...c,...B,...I,...$,...D,zIndex:n[Fn]?.z??0,type:k,data:f,resizeObserver:y,nodesDraggable:d,elementsSelectable:h,selectable:E,draggable:S},m)}))})}$r.displayName="NodeRenderer";var Ir=n.memo($r);const Dr={[e.MarkerType.Arrow]:({color:e="none",strokeWidth:n=1})=>t.jsx("polyline",{stroke:e,strokeLinecap:"round",strokeLinejoin:"round",strokeWidth:n,fill:e,points:"-5,-4 0,0 -5,4 -5,-4"})};const Tr=({id:e,type:o,color:r,width:i=12.5,height:a=12.5,markerUnits:s="strokeWidth",strokeWidth:u,orient:l="auto-start-reverse"})=>{const c=function(e){const t=sr();return n.useMemo((()=>Object.prototype.hasOwnProperty.call(Dr,e)?Dr[e]:(t.getState().onError?.("022",e),null)),[e])}(o);return c?t.jsx("marker",{className:"react-diagram__arrowhead",id:e,markerWidth:`${i}`,markerHeight:`${a}`,viewBox:"-10 -10 20 20",markerUnits:s,orient:l,refX:"0",refY:"0",children:t.jsx(c,{color:r,strokeWidth:u})}):null},jr=({defaultColor:e,rfId:o})=>{const r=ar(n.useCallback((({defaultColor:e,rfId:t})=>n=>{const o=[];return n.edges.reduce(((n,r)=>([r.markerStart,r.markerEnd].forEach((r=>{if(r&&"object"==typeof r){const i=yo(r,t);o.includes(i)||(n.push({id:i,color:r.color||e,...r}),o.push(i))}})),n)),[]).sort(((e,t)=>e.id.localeCompare(t.id)))})({defaultColor:e,rfId:o}),[e,o]),((e,t)=>!(e.length!==t.length||e.some(((e,n)=>e.id!==t[n].id)))));return t.jsx("defs",{children:r.map((e=>t.jsx(Tr,{id:e.id,type:e.type,color:e.color,width:e.width,height:e.height,markerUnits:e.markerUnits,strokeWidth:e.strokeWidth,orient:e.orient},e.id)))})};jr.displayName="MarkerComponent";var zr=n.memo(jr);var Rr=n.memo((function({x:e,y:o,label:r,labelStyle:i={},labelShowBg:a=!0,labelBgStyle:s={},labelBgPadding:u=[2,4],labelBgBorderRadius:l=2,children:c,className:d,...h}){const f=n.useRef(null),[g,p]=n.useState({x:0,y:0,width:0,height:0}),m=dr(["react-diagram__edge-text-wrapper",d]);return n.useEffect((()=>{if(f.current){const e=f.current.getBBox();p({x:e.x,y:e.y,width:e.width,height:e.height})}}),[r]),void 0!==r&&r?t.jsxs("g",{transform:`translate(${e-g.width/2} ${o-g.height/2})`,className:m,visibility:g.width?"visible":"hidden",...h,children:[a&&t.jsx("rect",{width:g.width+2*u[0],x:-u[0],y:-u[1],height:g.height+2*u[1],className:"react-diagram__edge-text-bg",style:s,rx:l,ry:l}),t.jsx("text",{className:"react-diagram__edge-text",y:g.height/2,dy:"0.3em",ref:f,style:i,children:r}),c]}):null}));function Or({path:e,labelX:n,labelY:o,label:r,labelStyle:i,labelShowBg:a,labelBgStyle:s,labelBgPadding:u,labelBgBorderRadius:l,style:c,markerEnd:d,markerStart:h}){return t.jsxs(t.Fragment,{children:[t.jsx("path",{style:c,d:e,fill:"none",className:"react-diagram__edge-path",markerEnd:d,markerStart:h}),r&&lo(n)&&lo(o)?t.jsx(Rr,{x:n,y:o,label:r,labelStyle:i,labelShowBg:a,labelBgStyle:s,labelBgPadding:u,labelBgBorderRadius:l}):null]})}Or.displayName="BaseEdge";const Xr=({sourceX:e,sourceY:n,targetX:o,targetY:r,label:i,labelStyle:a,labelShowBg:s,labelBgStyle:u,labelBgPadding:l,labelBgBorderRadius:c,style:d,markerEnd:h,markerStart:f})=>{const[g,p,m]=So({sourceX:e,sourceY:n,targetX:o,targetY:r});return t.jsx(Or,{path:g,labelX:p,labelY:m,label:i,labelStyle:a,labelShowBg:s,labelBgStyle:u,labelBgPadding:l,labelBgBorderRadius:c,style:d,markerEnd:h,markerStart:f})};Xr.displayName="StraightEdge";var Lr=n.memo(Xr);const Yr=({sourceX:n,sourceY:o,targetX:r,targetY:i,label:a,labelStyle:s,labelShowBg:u,labelBgStyle:l,labelBgPadding:c,labelBgBorderRadius:d,style:h,sourcePosition:f=e.Position.Bottom,targetPosition:g=e.Position.Top,markerEnd:p,markerStart:m,pathOptions:y})=>{const[v,x,b]=Eo({sourceX:n,sourceY:o,sourcePosition:f,targetX:r,targetY:i,targetPosition:g,borderRadius:y?.borderRadius,offset:y?.offset});return t.jsx(Or,{path:v,labelX:x,labelY:b,label:a,labelStyle:s,labelShowBg:u,labelBgStyle:l,labelBgPadding:c,labelBgBorderRadius:d,style:h,markerEnd:p,markerStart:m})};Yr.displayName="StepEdge";var Zr=n.memo(Yr);const Vr=({sourceX:n,sourceY:o,targetX:r,targetY:i,sourcePosition:a=e.Position.Bottom,targetPosition:s=e.Position.Top,label:u,labelStyle:l,labelShowBg:c,labelBgStyle:d,labelBgPadding:h,labelBgBorderRadius:f,style:g,markerEnd:p,markerStart:m,pathOptions:y})=>{const[v,x,b]=Co({sourceX:n,sourceY:o,sourcePosition:a,targetX:r,targetY:i,targetPosition:s,curvature:y?.curvature});return t.jsx(Or,{path:v,labelX:x,labelY:b,label:u,labelStyle:l,labelShowBg:c,labelBgStyle:d,labelBgPadding:h,labelBgBorderRadius:f,style:g,markerEnd:p,markerStart:m})};Vr.displayName="BezierEdge";var Ur=n.memo(Vr);const qr=(t,n,o)=>o===e.Position.Left?t-n:o===e.Position.Right?t+n:t,Kr=(t,n,o)=>o===e.Position.Top?t-n:o===e.Position.Bottom?t+n:t,Wr="react-diagram__edge-updater";function Fr({position:e,centerX:n,centerY:o,radius:r=10,onMouseDown:i,type:a}){return t.jsx("circle",{className:dr([Wr,`${Wr}-${a}`]),cx:qr(n,r,e),cy:Kr(o,r,e),r:r,stroke:"transparent",fill:"transparent",onMouseDown:i})}function Hr(e,t,n){return void 0===n?n:o=>{const r=t().edges.find((t=>t.id===e));r&&n(o,{...r})}}const Gr=e=>{const o=o=>{const{id:r,className:i,style:a,type:s,data:u,rfId:l,ariaLabel:c,source:d,sourcePort:h,target:f,targetPort:g,markerEnd:p,markerStart:m,label:y,labelStyle:v,labelShowBg:x,labelBgStyle:b,labelBgPadding:w,labelBgBorderRadius:_,edgeUpdaterRadius:E,sourceX:S,sourceY:N,targetX:P,targetY:M,sourcePosition:C,targetPosition:k,hidden:A,selected:B,focusable:$=!0,selectable:I=!0,elementsSelectable:D,onClick:T,onDoubleClick:j,onContextMenu:z,onMouseEnter:R,onMouseMove:O,onMouseLeave:X,onEdgeUpdate:L,onEdgeUpdateStart:Y,onEdgeUpdateEnd:Z}=o,V={sourceX:S,sourceY:N,targetX:P,targetY:M,sourcePosition:C,targetPosition:k},U={source:d,sourcePort:h,target:f,targetPort:g},q=!!(I||D&&void 0===I);if("react-diagram__connection"===i)return document.querySelector("path")?.classList.add("react-diagram__connection-path"),t.jsx(e,{...U,...V,id:r,data:u,style:a,selected:B});const K=sr(),W=n.useRef(null),[F,H]=n.useState(!1),G=n.useMemo((()=>`url(#${yo(m,l)})`),[m,l]),Q=n.useMemo((()=>`url(#${yo(p,l)})`),[p,l]);if(A)return null;const J=e=>t=>{if(0!==t.button)return;const{edges:n,domNode:i,autoPanOnConnect:a,connectionRadius:s,transform:u,getNodes:l,cancelConnection:c,updateConnection:d,onConnectStart:f,onConnectEnd:p,panBy:m}=K.getState(),y=o[e],v=n.find((e=>e.id===r)),x=("source"===e?h:g)||null;H(!0),Y?.(t,v,e);jo({isAnchor:!0,event:t.nativeEvent,nodeId:y,portId:x,portType:e,domNode:i,autoPanOnConnect:a,connectionRadius:s,nodes:l(),onEdgeUpdateEnd:t=>{H(!1),Z?.(t,v,e)},cancelConnection:c,updateConnection:d,onConnect:e=>L?.(v,e),onConnectStart:f,onConnectEnd:p,panBy:m,getTransform:()=>u})},ee=Hr(r,K.getState,j),te=Hr(r,K.getState,z),ne=Hr(r,K.getState,R),oe=Hr(r,K.getState,O),re=Hr(r,K.getState,X),ie=dr(["react-diagram__edge",`react-diagram__edge-${s}`,i,{selected:B,inactive:!D}]),ae={markerStart:G,markerEnd:Q},se={label:y,labelStyle:v,labelShowBg:x,labelBgStyle:b,labelBgPadding:w,labelBgBorderRadius:_},ue={onClick:e=>{const{edges:t,multiSelectionActive:n,addSelectedEdges:o,unselectEdges:i}=K.getState();if(q){const e=t.filter((e=>e.id===r));B?B&&n&&(i({edges:[...e]}),W.current?.blur()):o([r])}if(T){const n=t.find((e=>e.id===r));T(e,n)}},onDoubleClick:ee,onContextMenu:te,onMouseEnter:ne,onMouseMove:oe,onMouseLeave:re};return t.jsx("g",{...ue,ref:W,className:ie,tabIndex:$?0:void 0,role:$?"button":void 0,"aria-label":null===c?void 0:c||`Edge from ${d} to ${f}`,"aria-describedby":$?`react-diagram__edge-desc-${l}`:void 0,children:!F&&t.jsxs(t.Fragment,{children:[t.jsx(e,{...U,...ae,...se,...V,id:r,data:u,style:a,selected:B}),t.jsx(Fr,{position:C,centerX:S,centerY:N,radius:E,onMouseDown:J("target"),type:"source"}),t.jsx(Fr,{position:k,centerX:P,centerY:M,radius:E,onMouseDown:J("source"),type:"target"})]})})};return o.displayName="EdgeWrapper",n.memo(o)},Qr=e=>{const t={default:Gr(e.straight||Lr),step:Gr(e.step||Zr),bezier:Gr(e.bezier||Ur)},n=Object.keys(e).filter((e=>!Object.keys(t).includes(e))).reduce(((t,n)=>(t[n]=Gr(e[n]||Zr),t)),{});return{...t,...n}};function Jr(t,n,o=null){const r=(o?.x||0)+n.x,i=(o?.y||0)+n.y,a=o?.width||n.width,s=o?.height||n.height;switch(t){case e.Position.Top:return{x:r+a/2,y:i};case e.Position.Right:return{x:r+a,y:i+s/2};case e.Position.Bottom:return{x:r+a/2,y:i+s};case e.Position.Left:return{x:r,y:i+s/2}}}function ei(e,t){return e?1!==e.length&&t?t&&e.find((e=>e.id===t))||null:e[0]:null}function ti(e){const t=e?.[Fn]?.portBounds||null,n=t&&e?.width&&e?.height&&void 0!==e?.positionAbsolute?.x&&void 0!==e?.positionAbsolute?.y;return[{x:e?.positionAbsolute?.x||0,y:e?.positionAbsolute?.y||0,width:e?.width||0,height:e?.height||0},t,!!n]}const ni=e=>({edges:e.edges,width:e.width,height:e.height,nodeInternals:e.nodeInternals,elementsSelectable:e.elementsSelectable,onError:e.onError});function oi({rfId:n,edgeTypes:o,noPanClassName:r,edgeUpdaterRadius:i,onEdgeClick:a,onEdgeDoubleClick:s,onEdgeContextMenu:u,onEdgeMouseEnter:l,onEdgeMouseMove:c,onEdgeMouseLeave:d,onEdgeUpdate:h,onEdgeUpdateStart:f,onEdgeUpdateEnd:g}){const{edges:p,width:m,height:y,elementsSelectable:v,nodeInternals:x}=ar(ni,pr);return t.jsxs("svg",{width:m||"100vw",height:y||"100vh",className:"react-diagram__edges react-diagram__container",children:[t.jsx(zr,{defaultColor:"#000000",rfId:n}),t.jsx("g",{children:p.map((p=>{const{type:m,id:y,className:b,style:w,ariaLabel:_,source:E,sourcePort:S,target:N,targetPort:P,markerEnd:M,markerStart:C,label:k,labelStyle:A,labelShowBg:B,labelBgStyle:$,labelBgPadding:I,labelBgBorderRadius:D,...T}=p,[j,z,R]=ti(x.get(E)),[O,X,L]=ti(x.get(N));if(!R||!L)return null;const Y=m||"straight",Z=o[Y]||o.default,V=X.target,U=ei(z.source,S),q=ei(V,P),K=U?.position||e.Position.Bottom,W=q?.position||e.Position.Top;if(!U||!q)return null;const F={id:y,className:dr([b,r]),style:w,ariaLabel:_},H={source:E,sourcePort:S,target:N,targetPort:P},G={markerEnd:M,markerStart:C},Q={label:k,labelStyle:A,labelShowBg:B,labelBgStyle:$,labelBgPadding:I,labelBgBorderRadius:D},J=((e,t,n,o,r,i)=>{const a=Jr(n,e,t),s=Jr(i,o,r);return{sourceX:a.x,sourceY:a.y,targetX:s.x,targetY:s.y}})(j,U,K,O,q,W),ee={...J,sourcePosition:K,targetPosition:W},te={onClick:a,onDoubleClick:s,onContextMenu:u,onMouseEnter:l,onMouseMove:c,onMouseLeave:d,onEdgeUpdate:h,onEdgeUpdateStart:f,onEdgeUpdateEnd:g};return t.jsx(Z,{...T,...F,...H,...G,...Q,...ee,...te,rfId:n,type:Y,elementsSelectable:v,edgeUpdaterRadius:i},y)}))})]})}oi.displayName="EdgeRenderer";var ri=n.memo(oi);const ii={[e.Position.Left]:e.Position.Right,[e.Position.Right]:e.Position.Left,[e.Position.Top]:e.Position.Bottom,[e.Position.Bottom]:e.Position.Top};function ai({nodeId:e,portType:o,edge:r,Component:i,EdgeWrapper:a}){const{fromNode:s,toX:u,toY:l,startPort:c}=ar(n.useCallback((t=>({fromNode:t.nodeInternals.get(e),startPort:t.connectionStartPort,toX:(t.connectionPosition.x-t.transform[0])/t.transform[2],toY:(t.connectionPosition.y-t.transform[1])/t.transform[2]})),[e]),pr),d=s?.[Fn]?.portBounds,h=d?.[o];if(!s||!h)return null;const f=h.find((e=>e.id===c?.portId))||h[0],g=f?f.x+f.width/2:(s.width??0)/2,p=f?f.y+f.height/2:s.height??0,m=(s.positionAbsolute?.x??0)+g,y=(s.positionAbsolute?.y??0)+p,v=f?.position,x=v?ii[v]:null;if(!v||!x)return null;if(i)return t.jsx(i,{fromNode:s,fromPort:f,fromX:m,fromY:y,toX:u,toY:l,fromPosition:v,toPosition:x});if(!r){const e=`M${m},${y} ${u},${l}`;return t.jsx("path",{d:e,fill:"none",className:"react-diagram__connection-path"})}return t.jsx(a,{id:r.id,className:"react-diagram__connection",type:r.type||"default",source:r.source||e,target:r.target,focusable:!1,elementsSelectable:!1,sourceX:m,sourceY:y,targetX:u,targetY:l,sourcePosition:v,targetPosition:x})}ai.displayName="ConnectionPath";const si=e=>({edges:e.edges,connectionStartPort:e.connectionStartPort});function ui({containerStyle:e,edgeTypes:n,component:o}){const{connectionStartPort:r,edges:i}=ar(si,pr);if(!r)return null;const{nodeId:a,portType:s}=r;if(!!(!a||!s))return null;const u=i.find((e=>e[s]===a)),l=u?.type?n[u.type]:n.default;return t.jsx("svg",{style:e,className:"react-diagram__container react-diagram__connection-line",children:t.jsx("g",{className:"react-diagram__connection",children:t.jsx(ai,{nodeId:a,portType:s,edge:u,Component:o,EdgeWrapper:l})})})}function li({rfId:e,noPanClassName:n,panning:o,defaultViewport:r,multiSelectionKeyCode:i,dragSelectionKeyCode:a,deleteKeyCode:s,onlyRenderVisibleElements:u,disableKeyboardA11y:l,noDragClassName:c,nodeOrigin:d,nodeExtent:h,nodeTypes:f,onNodeClick:g,onNodeDoubleClick:p,onNodeContextMenu:m,onNodeMouseEnter:y,onNodeMouseMove:v,onNodeMouseLeave:x,edgeTypes:b,edgeUpdaterRadius:w,onEdgeClick:_,onEdgeDoubleClick:E,onEdgeContextMenu:S,onEdgeMouseEnter:N,onEdgeMouseMove:P,onEdgeMouseLeave:M,onEdgeUpdate:C,onEdgeUpdateStart:k,onEdgeUpdateEnd:A,onMove:B,onMoveStart:$,onMoveEnd:I,onPaneClick:D,onPaneMouseEnter:T,onPaneMouseMove:j,onPaneMouseLeave:z,ConnectionLineContainerStyle:R,ConnectionLineComponent:O}){return t.jsxs(Ar,{multiSelectionKeyCode:i,dragSelectionKeyCode:a,deleteKeyCode:s,noPanClassName:n,panning:o,defaultViewport:r,onMove:B,onMoveStart:$,onMoveEnd:I,onPaneClick:D,onPaneMouseEnter:T,onPaneMouseMove:j,onPaneMouseLeave:z,children:[t.jsx(Ir,{rfId:e,nodeTypes:f,onlyRenderVisibleElements:u,disableKeyboardA11y:l,nodeOrigin:d,nodeExtent:h,noDragClassName:c,noPanClassName:n,onNodeClick:g,onNodeDoubleClick:p,onNodeContextMenu:m,onNodeMouseEnter:y,onNodeMouseMove:v,onNodeMouseLeave:x}),t.jsx(ri,{rfId:e,edgeTypes:b,noPanClassName:n,edgeUpdaterRadius:w,onEdgeClick:_,onEdgeDoubleClick:E,onEdgeContextMenu:S,onEdgeMouseEnter:N,onEdgeMouseMove:P,onEdgeMouseLeave:M,onEdgeUpdate:C,onEdgeUpdateStart:k,onEdgeUpdateEnd:A}),t.jsx(ui,{edgeTypes:b,containerStyle:R,component:O})]})}li.displayName="DiagramView";var ci=n.memo(li);const di=Symbol.for("internals"),hi=e=>{const{setNodes:t,setEdges:n,setNodeExtent:o,setTranslateExtent:r,setMinZoom:i,setMaxZoom:a}=e;return{setNodes:t,setEdges:n,setNodeExtent:o,setTranslateExtent:r,setMinZoom:i,setMaxZoom:a}};function fi(e,t){n.useEffect((()=>{void 0!==e&&t(e)}),[e])}function gi(e,t,o){n.useEffect((()=>{void 0!==t&&o({[e]:t})}),[t])}const pi=({nodes:e,edges:t,nodeOrigin:n,smoothStep:o,centerStep:r,gridStep:i,elevateNodesOnSelect:a,nodesDraggable:s,autoPanOnNodeDrag:u,autoPanOnConnect:l,connectionRadius:c,nodeExtent:d,translateExtent:h,minZoom:f,maxZoom:g,onNodesChange:p,onNodeDrag:m,onNodeDragStart:y,onNodeDragEnd:v,onNodesDelete:x,onEdgesChange:b,onEdgesDelete:w,onConnect:_,onConnectStart:E,onConnectEnd:S,onError:N,onBeforeDelete:P,onDelete:M})=>{const{setNodes:C,setEdges:k,setNodeExtent:A,setTranslateExtent:B,setMinZoom:$,setMaxZoom:I}=ar(hi,pr),D=sr();return fi(e,C),fi(t,k),fi(d,A),fi(d,A),fi(h,B),fi(f,$),fi(g,I),gi("nodeOrigin",n,D.setState),gi("smoothStep",o,D.setState),gi("centerStep",r,D.setState),gi("gridStep",i,D.setState),gi("elevateNodesOnSelect",a,D.setState),gi("nodesDraggable",s,D.setState),gi("autoPanOnNodeDrag",u,D.setState),gi("autoPanOnConnect",l,D.setState),gi("connectionRadius",c,D.setState),gi("onNodesChange",p,D.setState),gi("onNodeDrag",m,D.setState),gi("onNodeDragStart",y,D.setState),gi("onNodeDragEnd",v,D.setState),gi("onNodesDelete",x,D.setState),gi("onEdgesChange",b,D.setState),gi("onEdgesDelete",w,D.setState),gi("onConnect",_,D.setState),gi("onConnectStart",E,D.setState),gi("onConnectEnd",S,D.setState),gi("onBeforeDelete",P,D.setState),gi("onDelete",M,D.setState),gi("onError",(e=>(t,n="")=>e?.(t,oo[t](n)))(N),D.setState),null};function mi(e,t){n.useRef(null);return n.useMemo((()=>t(e)),[e])}const yi=n.createContext(null),vi=yi.Provider;yi.Consumer;function xi({id:e,type:o,position:r}){const i=e||null,a=sr(),s=n.useContext(yi);if(!s)return null;const u=e=>{const{defaultEdgeOptions:t,onConnect:n}=a.getState(),o={...t,...e};n?.(o)},l=e=>{const t=Qn(e.nativeEvent),{button:n}=e;if(t&&0===n||!t){const{domNode:t,autoPanOnConnect:n,connectionRadius:r,transform:l,getNodes:c,cancelConnection:d,updateConnection:h,onConnectStart:f,onConnectEnd:g,panBy:p}=a.getState();jo({event:e.nativeEvent,nodeId:s,portId:i,portType:o,domNode:t,autoPanOnConnect:n,connectionRadius:r,nodes:c(),cancelConnection:d,updateConnection:h,onConnect:u,onConnectStart:f,onConnectEnd:g,panBy:p,getTransform:()=>l})}};return t.jsx("div",{"data-nodeid":s,"data-id":`${s}-${i}-${o}`,"data-portid":i,"data-port-position":r,className:`react-diagram__port react-diagram__port-${r} ${o} nodrag`,onMouseDown:l,onTouchStart:l})}xi.displayName="Port";var bi=n.memo(xi);function wi({data:n}){return t.jsxs(t.Fragment,{children:[t.jsx(bi,{type:"target",position:e.Position.Top}),n.label,t.jsx(bi,{type:"source",position:e.Position.Bottom})]})}const _i=e=>{function o({id:o,type:r="default",data:i,positionX:a,positionY:s,sourcePosition:u,targetPosition:l,onClick:c,onMouseEnter:d,onMouseMove:h,onMouseLeave:f,onContextMenu:g,onDoubleClick:p,style:m,width:y,height:v,className:x,selected:b,intersected:w,hidden:_,draggable:E=!0,selectable:S=!0,resizeObserver:N,dragHandle:P,zIndex:M=0,isParent:C,initialized:k,disableKeyboardA11y:A,ariaLabel:B,rfId:$,nodesDraggable:I,elementsSelectable:D,noDragClassName:T,noPanClassName:j}){const z=sr(),R=z.getState().nodeInternals.get(o),O=n.useRef(null),X=n.useRef(u),L=n.useRef(l),Y=n.useRef(r),Z=!!(E||I&&void 0===E),V=!!(S||D&&void 0===S),U=Z||c||d||h||f;n.useEffect((()=>{if(O.current&&!_){const e=O.current;return N?.observe(e),()=>N?.unobserve(e)}}),[_]),n.useEffect((()=>{const e=Y.current!==r,t=X.current!==u,n=L.current!==l;O.current&&(e||t||n)&&(e&&(Y.current=r),t&&(X.current=u),n&&(L.current=l),z.getState().updateNodeDimensions([{id:o,nodeElement:O.current,forceUpdate:!0}]))}),[o,r,u,l]);const q=xr({nodeRef:O,nodeId:o,disabled:_||!Z,isSelectable:V,noDragClassName:T});if(_)return null;const K=dr(["react-diagram__node",`react-diagram__node-${r}`,{[j]:Z},x,{selected:b,intersected:w,parent:C,dragging:q}]),W={zIndex:M,transform:`translate(${a}px,${s}px)`,pointerEvents:U?"all":"none",visibility:k?"visible":"hidden",width:y,height:v,...m},F={onClick:e=>{Z||vr({id:o,store:z,nodeRef:O,isSelectable:V}),c&&c(e,{...R})},onDoubleClick:yr(o,z.getState,p),onContextMenu:yr(o,z.getState,g),onMouseEnter:yr(o,z.getState,d),onMouseMove:yr(o,z.getState,h),onMouseLeave:yr(o,z.getState,f)},H={positionX:a,positionY:s,sourcePosition:u,targetPosition:l};return t.jsx("div",{...F,ref:O,className:K,style:W,"data-id":o,tabIndex:0,role:"button","aria-describedby":A?void 0:`react-diagram__node-desc-${$}`,"aria-label":B,children:t.jsx(vi,{value:o,children:t.jsx(e,{...H,id:o,zIndex:M,type:r,data:i,dragHandle:P,selected:b,intersected:w})})})}return o.displayName="NodeWrapper",n.memo(o)},Ei=e=>{const t={default:_i(e.default||wi)},n=Object.keys(e).filter((e=>!Object.keys(t).includes(e))).reduce(((t,n)=>(t[n]=_i(e[n]||wi),t)),{});return{...t,...n}},Si=[[Number.NEGATIVE_INFINITY,Number.NEGATIVE_INFINITY],[Number.POSITIVE_INFINITY,Number.POSITIVE_INFINITY]],Ni={rfId:"1",width:0,height:0,transform:[0,0,1],nodeInternals:new Map,edges:[],elementsSelectable:!0,onNodesChange:null,domNode:null,nodeOrigin:[0,0],smoothStep:!1,centerStep:!1,gridStep:void 0,elevateNodesOnSelect:!0,nodesDraggable:!0,multiSelectionActive:!1,selectionBoxActive:!1,d3Zoom:null,d3Selection:null,minZoom:.5,maxZoom:2,connectionPosition:{x:0,y:0},connectionStartPort:null,connectionEndPort:null,autoPanOnNodeDrag:!0,autoPanOnConnect:!0,nodeExtent:Si,translateExtent:Si,connectionRadius:20,onError:(e,t="")=>{}},Pi=()=>{return e=(e,t)=>({...Ni,setNodes:n=>{const{nodeInternals:o,nodeOrigin:r,elevateNodesOnSelect:i}=t();e({nodeInternals:Bo(n,o,r,i)})},getNodes:()=>Array.from(t().nodeInternals.values()),setEdges:n=>{const{defaultEdgeOptions:o={}}=t();e({edges:n.map((e=>({...o,...e})))})},updateNodeDimensions:n=>{const{triggerNodeChanges:o,nodeInternals:r,domNode:i,nodeOrigin:a}=t(),s=i?.querySelector(".react-diagram__viewport");if(!s)return;const u=window.getComputedStyle(s),{m22:l}=new window.DOMMatrixReadOnly(u.transform),c=[],d=[],h=n.reduce(((e,t)=>{const n=r.get(t.id);if(n){const o=Hn(t.nodeElement);if(o.width&&o.height&&(n.width!==o.width||n.height!==o.height||t.forceUpdate)){const i={...n,[Fn]:{...n[Fn],portBounds:{id:n[Fn]?.portBounds?.id||null,source:Gn(".source",t.nodeElement,l,a),target:Gn(".target",t.nodeElement,l,a)}},...o};r.set(n.id,i);const s=$o(i,r);n.intersected!==s&&c.push({id:n.id,type:"intersect",intersected:s}),d.push({id:n.id,type:"position",dragging:!1,position:n.position,positionAbsolute:n.positionAbsolute}),e.push({id:n.id,type:"dimensions",dimensions:o})}}return e}),[]);e({nodeInternals:new Map(r)}),o([...h,...c,...d])},updateNodesPosition:(e,n=!1,o)=>{const{triggerNodeChanges:r}=t();r(e.map((e=>{const t={id:e.id,type:"position",dragging:n};return o?(o(e),{...t,position:e.position,positionAbsolute:e.positionAbsolute}):t})))},triggerNodeChanges:e=>{const{onNodesChange:n}=t();e?.length&&n?.(e)},triggerEdgeChanges:e=>{const{onEdgesChange:n}=t();e?.length&&n?.(e)},updateNodesIntersection:()=>{const{nodeInternals:e,triggerNodeChanges:n}=t(),o=Array.from(e.values()),r=[];o.forEach((t=>{const n=$o(t,e);t.intersected!==n&&r.push({id:t.id,type:"intersect",intersected:n})})),n(r)},addSelectedNodes:e=>{const{multiSelectionActive:n,getNodes:o,triggerNodeChanges:r}=t();let i;i=n?e.map((e=>Er(e,!0))):Sr(o(),e),r(i)},unselectNodes:({nodes:e}={})=>{const{getNodes:n,triggerNodeChanges:o}=t();o((e||n()).map((e=>(e.selected=!1,Er(e.id,!1)))))},addSelectedEdges:e=>{const{multiSelectionActive:n,getNodes:o,edges:r,triggerNodeChanges:i,triggerEdgeChanges:a}=t(),s=o();n?a(e.map((e=>Er(e,!0)))):(a(Sr(r,e)),i(Sr(s,[])))},unselectEdges:({edges:e}={})=>{const{edges:n,triggerEdgeChanges:o}=t();o((e||n).map((e=>(e.selected=!1,Er(e.id,!1)))))},resetSelectedElements:()=>{const{edges:e,getNodes:n,triggerNodeChanges:o,triggerEdgeChanges:r}=t(),i=n().filter((e=>e.selected)).map((e=>Er(e.id,!1))),a=e.filter((e=>e.selected)).map((e=>Er(e.id,!1)));o(i),r(a)},deleteElements:async e=>{const{edges:n,getNodes:o,onBeforeDelete:r,onDelete:i,onNodesDelete:a,onEdgesDelete:s,triggerNodeChanges:u,triggerEdgeChanges:l}=t(),c=o();await async function(e,t,n){const{nodes:o,edges:r}=t,{nodes:i,edges:a}=mo(e,{nodes:o,edges:r});function s(){const e=i.length>0,t=a.length>0;(e||t)&&n?.onDelete?.({nodes:i,edges:a})}if(i.length,a.length,!n?.onBeforeDelete)return s(),{edges:a,nodes:i};const u=await(n?.onBeforeDelete?.({nodes:i,edges:a}));return"boolean"==typeof u?(u&&s(),u?{edges:a,nodes:i}:{edges:[],nodes:[]}):u}(e,{nodes:c,edges:n},{onBeforeDelete:r,onDelete:({nodes:e,edges:t})=>{const n=e.length>0,o=t.length>0;if(n){const t=e.map(Nr("remove"));a?.(e),u(t)}if(o){const e=t.map(Nr("remove"));s?.(t),l(e)}i?.({nodes:e,edges:t})}})},cancelConnection:()=>e({connectionStartPort:null,connectionEndPort:null}),updateConnection:n=>{const{connectionPosition:o}=t(),r={...n,connectionPosition:n.connectionPosition??o};e(r)},panBy:e=>{const{transform:n,width:o,height:r,d3Zoom:i,d3Selection:a}=t();if(!i||!a||!e.x&&!e.y)return;const s=On.translate(n[0]+e.x,n[1]+e.y).scale(n[2]),u=[[0,0],[o,r]],l=i?.constrain()(s,u,Si);i.transform(a,l)},setNodeExtent:n=>{const{nodeInternals:o}=t();o.forEach((e=>{e.positionAbsolute=co(e.positionAbsolute,n)})),e({nodeExtent:n,nodeInternals:new Map(o)})},setTranslateExtent:n=>{t().d3Zoom?.translateExtent(n),e({translateExtent:n})},setMinZoom:n=>{const{d3Zoom:o,maxZoom:r}=t();o?.scaleExtent([n,r]),e({minZoom:n})},setMaxZoom:n=>{const{d3Zoom:o,minZoom:r}=t();o?.scaleExtent([r,n]),e({maxZoom:n})}}),e?Vo(e):Vo;var e},Mi=({children:e})=>{const o=n.useRef(null);return o.current||(o.current=Pi()),t.jsx(rr,{value:o.current,children:e})};function Ci({children:e}){return n.useContext(or)?t.jsx(t.Fragment,{children:e}):t.jsx(Mi,{children:e})}Mi.displayName="ReactDiagramProvider",Ci.displayName="ReactDiagramWrapper";const ki={x:0,y:0,zoom:1},Ai=[0,0],Bi={default:wi},$i={step:Zr};function Ii({children:e,id:n,panning:o=!0,minZoom:r,maxZoom:i,translateExtent:a,nodeExtent:s=Si,defaultViewport:u=ki,multiSelectionKeyCode:l="Meta",dragSelectionKeyCode:c="Shift",deleteKeyCode:d="Backspace",onlyRenderVisibleElements:h=!1,disableKeyboardA11y:f=!1,noDragClassName:g="nodrag",noPanClassName:p="nopan",nodeOrigin:m=Ai,nodeTypes:y=Bi,edgeTypes:v=$i,edgeUpdaterRadius:x,ConnectionLineContainerStyle:b,ConnectionLineComponent:w,nodes:_,edges:E,nodesDraggable:S,elevateNodesOnSelect:N,autoPanOnNodeDrag:P,autoPanOnConnect:M,connectionRadius:C,smoothStep:k,centerStep:A,gridStep:B,onNodesChange:$,onNodeDrag:I,onNodeDragStart:D,onNodeDragEnd:T,onNodeClick:j,onNodeDoubleClick:z,onNodeContextMenu:R,onNodeMouseEnter:O,onNodeMouseMove:X,onNodeMouseLeave:L,onNodesDelete:Y,onEdgesChange:Z,onEdgeClick:V,onEdgeDoubleClick:U,onEdgeContextMenu:q,onEdgeMouseEnter:K,onEdgeMouseMove:W,onEdgeMouseLeave:F,onEdgeUpdate:H,onEdgeUpdateStart:G,onEdgeUpdateEnd:Q,onEdgesDelete:J,onConnect:ee,onConnectStart:te,onConnectEnd:ne,onDelete:oe,onBeforeDelete:re,onMove:ie,onMoveStart:ae,onMoveEnd:se,onPaneClick:ue,onPaneMouseEnter:le,onPaneMouseMove:ce,onPaneMouseLeave:de,onError:he,...fe},ge){const pe=n||"1",me=mi(y,Ei),ye=mi(v,Qr);return t.jsx("div",{...fe,ref:ge,className:"react-diagram",children:t.jsxs(Ci,{children:[t.jsx(ci,{rfId:pe,panning:o,defaultViewport:u,multiSelectionKeyCode:l,dragSelectionKeyCode:c,deleteKeyCode:d,onlyRenderVisibleElements:h,disableKeyboardA11y:f,noDragClassName:g,noPanClassName:p,nodeOrigin:m,nodeExtent:s,nodeTypes:me,edgeTypes:ye,edgeUpdaterRadius:x,ConnectionLineContainerStyle:b,ConnectionLineComponent:w,onNodeClick:j,onNodeDoubleClick:z,onNodeContextMenu:R,onNodeMouseEnter:O,onNodeMouseMove:X,onNodeMouseLeave:L,onEdgeClick:V,onEdgeDoubleClick:U,onEdgeContextMenu:q,onEdgeMouseEnter:K,onEdgeMouseMove:W,onEdgeMouseLeave:F,onEdgeUpdate:H,onEdgeUpdateStart:G,onEdgeUpdateEnd:Q,onMove:ie,onMoveStart:ae,onMoveEnd:se,onPaneClick:ue,onPaneMouseEnter:le,onPaneMouseMove:ce,onPaneMouseLeave:de}),t.jsx(pi,{rfId:pe,nodes:_,edges:E,nodesDraggable:S,elevateNodesOnSelect:N,autoPanOnNodeDrag:P,autoPanOnConnect:M,connectionRadius:C,nodeOrigin:m,nodeExtent:s,translateExtent:a,minZoom:r,maxZoom:i,smoothStep:k,centerStep:A,gridStep:B,onNodesChange:$,onNodeDrag:I,onNodeDragStart:D,onNodeDragEnd:T,onNodesDelete:Y,onEdgesChange:Z,onEdgesDelete:J,onConnect:ee,onConnectStart:te,onConnectEnd:ne,onError:he,onBeforeDelete:re,onDelete:oe}),e]})})}Ii.displayName="ReactDiagram";var Di=n.forwardRef(Ii);function Ti({color:e,scaledGap:n,lineWidth:o}){const r=`${`M${n[0]/2} 0`} ${`V${n[1]}`} ${"M0 "+n[1]/2} ${`H${n[0]}`}`;return t.jsx("path",{stroke:e,strokeWidth:o,d:r})}const ji=e=>({transform:e.transform,rfId:e.rfId,gridStepGap:e.gridStep});function zi({gap:e,lineWidth:o=1,color:r="#000000"}){const i=n.useRef(null),{transform:a,rfId:s,gridStepGap:u}=ar(ji,pr),l=e||(u||50),c=Array.isArray(l)?l:[l,l],d=[c[0]*a[2]||1,c[1]*a[2]||1],h=[d[0]/2,d[1]/2];return t.jsxs("svg",{className:"react-diagram__container react-diagram__background",ref:i,children:[t.jsx("pattern",{id:`background-${s}`,x:a[0]%d[0],y:a[1]%d[1],width:d[0],height:d[1],patternUnits:"userSpaceOnUse",patternTransform:`translate(-${h[0]},-${h[1]})`,children:t.jsx(Ti,{scaledGap:d,color:r,lineWidth:o})}),t.jsx("rect",{x:"0",y:"0",width:"100%",height:"100%",fill:`url(#background-${s})`})]})}zi.displayName="Background";var Ri=n.memo(zi);e.Background=Ri,e.BaseEdge=Or,e.BezierEdge=Ur,e.Port=bi,e.ReactDiagramProvider=Mi,e.StepEdge=Zr,e.addEdge=(e,t)=>{if(!ho(e))return t;if(((e,t)=>t.some((t=>!(t.source!==e.source||t.target!==e.target||t.sourcePort!==e.sourcePort&&(t.sourcePort||e.sourcePort)||t.targetPort!==e.targetPort&&(t.targetPort||e.targetPort)))))(e,t))return t;let n;return null===e.sourcePort&&delete e.sourcePort,null===e.targetPort&&delete e.targetPort,n=e.id?{...e}:{...e,id:xo(e)},t.concat(n)},e.boxToRect=uo,e.clamp=ro,e.default=Di,e.getBezierEdgeCenter=No,e.getBezierPath=Co,e.getStepPath=Eo,e.getStraightPath=So,e.internalsSymbol=di,e.isCoreEdge=ho,e.isCoreNode=e=>"id"in e&&!("source"in e)&&!("target"in e),e.rectToBox=so,e.updateEdge=(e,t,n,o={shouldReplaceId:!0})=>{const{id:r,...i}=e;!t.source||t.target,n.find((e=>e.id===r));const a={...i,id:o.shouldReplaceId?xo(t):r,source:t.source,target:t.target};return n.filter((e=>e.id!==r)).concat(a)},e.useEdgesState=function(e){const[t,o]=n.useState(e),r=n.useCallback((e=>o((t=>function(e,t){return _r(e,t)}(e,t)))),[]);return[t,o,r]},e.useNodesState=function(e){const[t,o]=n.useState(e),r=n.useCallback((e=>o((t=>function(e,t){return _r(e,t)}(e,t)))),[]);return[t,o,r]},e.useStore=ar,e.useStoreApi=sr,Object.defineProperty(e,"__esModule",{value:!0})}));
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "react-cosmos-diagram",
|
|
3
|
-
"version": "0.11.
|
|
3
|
+
"version": "0.11.1",
|
|
4
4
|
"description": "React Diagram",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"react",
|
|
@@ -53,8 +53,8 @@
|
|
|
53
53
|
"@types/react-dom": ">=17",
|
|
54
54
|
"react": "^18.2.0",
|
|
55
55
|
"typescript": "^4.9.4",
|
|
56
|
-
"@diagram/
|
|
57
|
-
"@diagram/
|
|
56
|
+
"@diagram/rollup-config": "0.0.0",
|
|
57
|
+
"@diagram/tsconfig": "0.0.0"
|
|
58
58
|
},
|
|
59
59
|
"rollup": {
|
|
60
60
|
"globals": {
|