@progress/kendo-react-diagram 16.2.0-develop.1 → 16.2.0-develop.10

package/dist/cdn/js/kendo-react-diagram.js

@@ -12,4 +12,4 @@
  * Licensed under commercial license. See LICENSE.md in the package root for more information
  *-------------------------------------------------------------------------------------------
  */
-!function(e,n){"object"==typeof exports&&"undefined"!=typeof module?n(exports,require("@progress/kendo-diagram-common"),require("react"),require("@progress/kendo-react-common")):"function"==typeof define&&define.amd?define(["exports","@progress/kendo-diagram-common","react","@progress/kendo-react-common"],n):n((e="undefined"!=typeof globalThis?globalThis:e||self).KendoReactDiagram={},e.KendoDiagramCommon,e.React,e.KendoReactCommon)}(this,function(e,n,t,o){"use strict";function r(e){var n=Object.create(null);return e&&Object.keys(e).forEach(function(t){if("default"!==t){var o=Object.getOwnPropertyDescriptor(e,t);Object.defineProperty(n,t,o.get?o:{enumerable:!0,get:function(){return e[t]}})}}),n.default=e,Object.freeze(n)}var a=r(t);const i=Object.freeze({name:"@progress/kendo-react-diagram",productName:"KendoReact",productCode:"KENDOUIREACT",productCodes:["KENDOUIREACT"],publishDate:0,version:"16.2.0-develop.1",licensingDocsUrl:"https://www.telerik.com/kendo-react-ui/my-license/?utm_medium=product&utm_source=kendoreact&utm_campaign=kendo-ui-react-purchase-license-keys-warning"}),l=e=>null;l.displayName="KendoDiagramConnectionTooltip";const c=e=>null;c.displayName="KendoDiagramShapeTooltip";const u={width:0,height:0},s=0,p=0,d={visible:!1,content:null,style:{}},m=e=>{const{shapeTooltipRender:t,connectionTooltipRender:o,diagramRef:r,wrapperRef:i,onTooltipShow:l,onTooltipHide:c}=e,[m,f]=a.useState(d),b=a.useCallback(()=>{h.current=null,f(d)},[]),g=a.useRef(null),h=a.useRef(null);a.useLayoutEffect(()=>{const e=g.current,t=h.current;if(!m.visible||!t||!e)return;const{width:o,height:r}=e.getBoundingClientRect();if(0===o&&0===r)return;h.current=null;const a=n.placeTooltip({hovered:t.item,mouse:t.mouse,shapes:t.shapes,connections:t.connections,diagramRect:t.diagramRect,zoom:t.zoom,pan:t.pan,tooltipSize:{width:o,height:r},viewportBounds:t.viewportBounds});f(e=>({...e,style:{position:"fixed",left:a.left+t.scrollX,top:a.top+t.scrollY,zIndex:9999}}))});const y=a.useCallback((e,a)=>{var c,d,m,g,y,D,O,P,v,S;b();const{dataItem:j}=e.item,C="Shape"===e.item.name,T="Connection"===e.item.name,M=C?null==(d=null==(c=a.shapeDefaults)?void 0:c.tooltip)?void 0:d.visible:null==(g=null==(m=a.connectionDefaults)?void 0:m.tooltip)?void 0:g.visible,z=null==(y=j.tooltip)?void 0:y.visible,R=C?a.shapes:a.connections,k=null==R?void 0:R.find(n=>{var t;return(null==n?void 0:n.id)===(null==(t=null==e?void 0:e.item)?void 0:t.id)}),E=null==k?void 0:k.tooltipText,w=j.tooltipText||E;if(!w||!1===z||!M&&!z)return;const x=w===j.tooltipText?j:{...j,tooltipText:w};let I;I=C&&t?t(x):T&&o?o(x):w;const L=C?null==(O=null==(D=a.shapeDefaults)?void 0:D.tooltip)?void 0:O.cssClass:null==(v=null==(P=a.connectionDefaults)?void 0:P.tooltip)?void 0:v.cssClass,B=null==(S=j.tooltip)?void 0:S.cssClass,N=L||B;if(!r.current||!i.current)return;const A=i.current,H=A.ownerDocument.defaultView;if(!H)return;const K=r.current.connections.map(e=>e.allPoints()),Z=r.current.shapes.map(e=>e.bounds()),F=A.getBoundingClientRect(),V=r.current.pan(),X=r.current.zoom(),Y=new DOMRect(s,p,H.innerWidth,H.innerHeight),_=n.placeTooltip({hovered:e.item,mouse:e.point,shapes:Z,connections:K,diagramRect:F,zoom:X,pan:V,tooltipSize:u,viewportBounds:Y});h.current={item:e.item,mouse:e.point,shapes:Z,connections:K,diagramRect:F,zoom:X,pan:V,viewportBounds:Y,scrollX:H.scrollX,scrollY:H.scrollY},f({visible:!0,content:I,className:N,style:{position:"fixed",left:_.left+H.scrollX,top:_.top+H.scrollY,zIndex:9999,visibility:"hidden"}}),null==l||l({...x})},[t,o,b,l,r,i]),D=a.useCallback(e=>{b(),null==c||c({...e})},[b,c]);return{tooltipState:m,tooltipElRef:g,hideTooltip:b,handleTooltipShow:y,handleTooltipHide:D}},f=e=>{if(!e)return{};const n={};return Object.keys(e).forEach(t=>{const o=e[t];o&&(n[t]=o)}),n},b=(e,n)=>e&&Array.isArray(e)&&0!==e.length?n&&Array.isArray(n)?e.map((e,t)=>({...e,dataItem:n[t]})):e:[],g=(e,t,o,r)=>a.useMemo(()=>{if(o||r){const a={shapes:{source:()=>e||[],map:f(o)},connections:{source:()=>t||[],map:f(r)}},i=n.convertToDiagramModel({shapes:e,connections:t},a);return{convertedShapes:b(i.shapes,e),convertedConnections:b(i.connections,t)}}return{convertedShapes:b(e,e),convertedConnections:b(t,t)}},[e,t,o,r]),h={change:"onChange",click:"onDiagramClick",drag:"onDrag",dragEnd:"onDragEnd",dragStart:"onDragStart",itemBoundsChange:"onShapeBoundsChange",mouseEnter:"onMouseEnter",mouseLeave:"onMouseLeave",pan:"onPan",select:"onSelect",zoomEnd:"onZoomEnd",zoomStart:"onZoomStart"},y=e=>{const t=a.useRef(e);return t.current=e,{bindDiagramEvents:a.useCallback((e,o)=>{n.events.forEach(n=>{e.bind(n,e=>{var r,a;if("tooltipShow"===n)return void t.current.handleTooltipShow(e,o);if("tooltipHide"===n)return void t.current.handleTooltipHide(null!=(a=null==(r=e.item)?void 0:r.dataItem)?a:{});const i=h[n];if(i){const n=t.current.handlers[i];null==n||n(e)}})})},[])}},D={enabled:!0,smallStep:1,largeStep:5},O={connections:[],shapes:[],editable:!0,pannable:{enabled:!0,showScrollbars:!0,autoHideScrollbars:!0},selectable:!0,zoom:1,zoomMax:2,zoomMin:.1,zoomRate:.1,role:"application"},P=e=>{var n;return void 0===e||!0===e?D:!1===e?{...D,enabled:!1}:{...D,...e,enabled:null==(n=e.enabled)||n}},v=e=>({disabled:!e.enabled,smallStep:e.smallStep,largeStep:e.largeStep}),S=a.forwardRef((e,t)=>{const{connectionDefaults:r,connections:u=O.connections,connectionModelFields:s,editable:p=O.editable,layout:d,pannable:f=O.pannable,selectable:b=O.selectable,shapeDefaults:h,shapes:D=O.shapes,shapeModelFields:S,zoom:j=O.zoom,zoomMax:C=O.zoomMax,zoomMin:T=O.zoomMin,zoomRate:M=O.zoomRate,navigable:z,onChange:R,onDiagramClick:k,onDrag:E,onDragEnd:w,onDragStart:x,onShapeBoundsChange:I,onMouseEnter:L,onMouseLeave:B,onPan:N,onSelect:A,onZoomEnd:H,onZoomStart:K,onTooltipShow:Z,onTooltipHide:F,style:V,className:X,role:Y=O.role,ariaLabel:_,children:q}=e,U=a.useRef(null),G=a.useRef(null),J=!o.validatePackage(i,{component:"Diagram"}),W=o.getLicenseMessage(i),$=a.useMemo(()=>P(z),[z]),Q=a.useCallback(e=>{G.current=e,"function"==typeof t?t(e):t&&(t.current=e)},[t]),{convertedShapes:ee,convertedConnections:ne}=g(D,u,S,s),te=a.useMemo(()=>({role:Y,ariaLabel:_,ariaRoleDescription:"Diagram"}),[Y,_]),oe=a.useMemo(()=>({shapes:ee,connections:ne,selectable:b,editable:p,zoom:j,zoomMax:C,zoomMin:T,zoomRate:M,layout:d,pannable:f,shapeDefaults:h,connectionDefaults:r,navigation:v($),accessibility:te}),[ee,ne,b,p,j,C,T,M,d,f,h,r,$,te]),re=a.useMemo(()=>{const e=a.Children.toArray(q).find(e=>a.isValidElement(e)&&e.type===c);return e?e.props.children:null},[q]),ae=a.useMemo(()=>{const e=a.Children.toArray(q).find(e=>a.isValidElement(e)&&e.type===l);return e?e.props.children:null},[q]),{tooltipState:ie,tooltipElRef:le,hideTooltip:ce,handleTooltipShow:ue,handleTooltipHide:se}=m({shapeTooltipRender:re,connectionTooltipRender:ae,diagramRef:G,wrapperRef:U,onTooltipShow:Z,onTooltipHide:F}),{bindDiagramEvents:pe}=y({handlers:{onChange:R,onDiagramClick:k,onDrag:E,onDragEnd:w,onDragStart:x,onShapeBoundsChange:I,onMouseEnter:L,onMouseLeave:B,onPan:N,onSelect:A,onZoomEnd:H,onZoomStart:K},handleTooltipShow:ue,handleTooltipHide:se}),de=a.useRef(!1),me=a.useRef(oe);return a.useEffect(()=>{if(!U.current)return;const e=n.loadTheme(U.current),t=new n.Diagram(U.current,oe,e);return t._createOptionElements(),t.zoom(t.options.zoom),t.canvas.draw(),G.current=t,Q(t),pe(t,oe),de.current=!0,()=>{ce(),t.destroy(),Q(null),de.current=!1}},[]),a.useEffect(()=>{if(!G.current||!de.current)return;const e=G.current,n=me.current;(n.shapes!==oe.shapes||n.connections!==oe.connections)&&e.load(oe),(n.layout!==oe.layout||n.shapes!==oe.shapes||n.connections!==oe.connections)&&e.layout(oe.layout),n.zoom!==oe.zoom&&e.zoom(oe.zoom);const t=n.connectionDefaults===oe.connectionDefaults?oe.connectionDefaults:{...e.options.connectionDefaults,...oe.connectionDefaults},o=n.shapeDefaults===oe.shapeDefaults?oe.shapeDefaults:{...e.options.shapeDefaults,...oe.shapeDefaults};e.setOptions({zoom:oe.zoom,zoomMax:oe.zoomMax,zoomMin:oe.zoomMin,zoomRate:oe.zoomRate,selectable:oe.selectable,pannable:oe.pannable,layout:oe.layout,navigation:oe.navigation,connectionDefaults:t,shapeDefaults:o}),me.current=oe},[oe]),a.createElement("div",{ref:U,className:o.classNames("k-diagram",X),style:{display:"block",position:"relative",cursor:"default",...V}},ie.visible&&a.createElement("div",{ref:le,className:o.classNames("k-popup","k-tooltip",ie.className),style:ie.style},ie.content),J&&a.createElement(o.WatermarkOverlay,{message:W}))});S.displayName="KendoDiagram",Object.defineProperty(e,"ArrowMarker",{enumerable:!0,get:function(){return n.ArrowMarker}}),Object.defineProperty(e,"Circle",{enumerable:!0,get:function(){return n.Circle}}),Object.defineProperty(e,"CircleMarker",{enumerable:!0,get:function(){return n.CircleMarker}}),Object.defineProperty(e,"Collate",{enumerable:!0,get:function(){return n.Collate}}),Object.defineProperty(e,"Connection",{enumerable:!0,get:function(){return n.Connection}}),Object.defineProperty(e,"Connector",{enumerable:!0,get:function(){return n.Connector}}),Object.defineProperty(e,"DataInputOutput",{enumerable:!0,get:function(){return n.DataInputOutput}}),Object.defineProperty(e,"DataStorage",{enumerable:!0,get:function(){return n.DataStorage}}),Object.defineProperty(e,"Database",{enumerable:!0,get:function(){return n.Database}}),Object.defineProperty(e,"Decision",{enumerable:!0,get:function(){return n.Decision}}),Object.defineProperty(e,"Delay",{enumerable:!0,get:function(){return n.Delay}}),Object.defineProperty(e,"DirectAccessStorage",{enumerable:!0,get:function(){return n.DirectAccessStorage}}),Object.defineProperty(e,"Display",{enumerable:!0,get:function(){return n.Display}}),Object.defineProperty(e,"Document",{enumerable:!0,get:function(){return n.Document}}),Object.defineProperty(e,"Extract",{enumerable:!0,get:function(){return n.Extract}}),Object.defineProperty(e,"FlowchartShapeType",{enumerable:!0,get:function(){return n.FlowchartShapeType}}),Object.defineProperty(e,"Group",{enumerable:!0,get:function(){return n.Group}}),Object.defineProperty(e,"Image",{enumerable:!0,get:function(){return n.Image}}),Object.defineProperty(e,"InternalStorage",{enumerable:!0,get:function(){return n.InternalStorage}}),Object.defineProperty(e,"Layout",{enumerable:!0,get:function(){return n.Layout}}),Object.defineProperty(e,"Line",{enumerable:!0,get:function(){return n.Line}}),Object.defineProperty(e,"LogicalOr",{enumerable:!0,get:function(){return n.LogicalOr}}),Object.defineProperty(e,"ManualInputOutput",{enumerable:!0,get:function(){return n.ManualInputOutput}}),Object.defineProperty(e,"ManualOperation",{enumerable:!0,get:function(){return n.ManualOperation}}),Object.defineProperty(e,"MarkerType",{enumerable:!0,get:function(){return n.MarkerType}}),Object.defineProperty(e,"Merge",{enumerable:!0,get:function(){return n.Merge}}),Object.defineProperty(e,"MultiLineTextBlock",{enumerable:!0,get:function(){return n.MultiLineTextBlock}}),Object.defineProperty(e,"MultipleDocuments",{enumerable:!0,get:function(){return n.MultipleDocuments}}),Object.defineProperty(e,"OffPageConnector",{enumerable:!0,get:function(){return n.OffPageConnector}}),Object.defineProperty(e,"OnPageConnector",{enumerable:!0,get:function(){return n.OnPageConnector}}),Object.defineProperty(e,"Path",{enumerable:!0,get:function(){return n.Path}}),Object.defineProperty(e,"Point",{enumerable:!0,get:function(){return n.Point}}),Object.defineProperty(e,"Polyline",{enumerable:!0,get:function(){return n.Polyline}}),Object.defineProperty(e,"PredefinedProcess",{enumerable:!0,get:function(){return n.PredefinedProcess}}),Object.defineProperty(e,"Preparation",{enumerable:!0,get:function(){return n.Preparation}}),Object.defineProperty(e,"Process",{enumerable:!0,get:function(){return n.Process}}),Object.defineProperty(e,"Rect",{enumerable:!0,get:function(){return n.Rect}}),Object.defineProperty(e,"Rectangle",{enumerable:!0,get:function(){return n.Rectangle}}),Object.defineProperty(e,"Shape",{enumerable:!0,get:function(){return n.Shape}}),Object.defineProperty(e,"Sort",{enumerable:!0,get:function(){return n.Sort}}),Object.defineProperty(e,"SummingJunction",{enumerable:!0,get:function(){return n.SummingJunction}}),Object.defineProperty(e,"Terminator",{enumerable:!0,get:function(){return n.Terminator}}),Object.defineProperty(e,"TextBlock",{enumerable:!0,get:function(){return n.TextBlock}}),Object.defineProperty(e,"convertToDiagramModel",{enumerable:!0,get:function(){return n.convertToDiagramModel}}),e.Diagram=S,e.DiagramConnectionTooltip=l,e.DiagramShapeTooltip=c});
+!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("@progress/kendo-diagram-common"),require("react"),require("@progress/kendo-react-common"),require("@progress/kendo-react-editor"),require("@progress/kendo-react-intl"),require("@progress/kendo-react-popup"),require("@progress/kendo-react-buttons"),require("@progress/kendo-svg-icons"),require("@progress/kendo-react-inputs"),require("react-dom")):"function"==typeof define&&define.amd?define(["exports","@progress/kendo-diagram-common","react","@progress/kendo-react-common","@progress/kendo-react-editor","@progress/kendo-react-intl","@progress/kendo-react-popup","@progress/kendo-react-buttons","@progress/kendo-svg-icons","@progress/kendo-react-inputs","react-dom"],t):t((e="undefined"!=typeof globalThis?globalThis:e||self).KendoReactDiagram={},e.KendoDiagramCommon,e.React,e.KendoReactCommon,e.KendoReactEditor,e.KendoReactIntl,e.KendoReactPopup,e.KendoReactButtons,e.KendoSvgIcons,e.KendoReactInputs,e.ReactDOM)}(this,function(e,t,n,o,a,r,l,i,c,s,u){"use strict";function p(e){var t=Object.create(null);return e&&Object.keys(e).forEach(function(n){if("default"!==n){var o=Object.getOwnPropertyDescriptor(e,n);Object.defineProperty(t,n,o.get?o:{enumerable:!0,get:function(){return e[n]}})}}),t.default=e,Object.freeze(t)}var d=p(n);const g=Object.freeze({name:"@progress/kendo-react-diagram",productName:"KendoReact",productCode:"KENDOUIREACT",productCodes:["KENDOUIREACT"],publishDate:0,version:"16.2.0-develop.10",licensingDocsUrl:"https://www.telerik.com/kendo-react-ui/my-license/?utm_medium=product&utm_source=kendoreact&utm_campaign=kendo-ui-react-purchase-license-keys-warning"}),m=e=>null;m.displayName="KendoDiagramConnectionTooltip";const f=e=>null;f.displayName="KendoDiagramShapeTooltip";const h={width:0,height:0},b=0,v=0,y={visible:!1,content:null,style:{}},S=e=>{if(!e)return{};const t={};return Object.keys(e).forEach(n=>{const o=e[n];o&&(t[n]=o)}),t},C=(e,t)=>e&&Array.isArray(e)&&0!==e.length?t&&Array.isArray(t)?e.map((e,n)=>({...e,dataItem:t[n]})):e:[],T={change:"onChange",click:"onDiagramClick",drag:"onDrag",dragEnd:"onDragEnd",dragStart:"onDragStart",itemBoundsChange:"onShapeBoundsChange",mouseEnter:"onMouseEnter",mouseLeave:"onMouseLeave",pan:"onPan",select:"onSelect",zoomEnd:"onZoomEnd",zoomStart:"onZoomStart"},D={enabled:!0,smallStep:1,largeStep:5},E={connections:[],shapes:[],editable:!0,pannable:{enabled:!0,showScrollbars:!0,autoHideScrollbars:!0},selectable:!0,zoom:1,zoomMax:2,zoomMin:.1,zoomRate:.1,role:"application"},w=e=>({disabled:!e.enabled,smallStep:e.smallStep,largeStep:e.largeStep}),k=d.forwardRef((e,n)=>{const{connectionDefaults:a,connections:r=E.connections,connectionModelFields:l,editable:i=E.editable,layout:c,pannable:s=E.pannable,selectable:u=E.selectable,shapeDefaults:p,shapes:k=E.shapes,shapeModelFields:P,zoom:M=E.zoom,zoomMax:O=E.zoomMax,zoomMin:I=E.zoomMin,zoomRate:x=E.zoomRate,navigable:L,onChange:R,onDiagramClick:z,onDrag:A,onDragEnd:j,onDragStart:F,onShapeBoundsChange:B,onMouseEnter:N,onMouseLeave:K,onPan:V,onSelect:H,onZoomEnd:U,onZoomStart:q,onTooltipShow:$,onTooltipHide:W,style:_,className:Z,role:J=E.role,ariaLabel:Y,children:X}=e,G=d.useRef(null),Q=d.useRef(null),ee=!o.validatePackage(g,{component:"Diagram"}),te=o.getLicenseMessage(g),ne=d.useMemo(()=>(e=>{var t;return void 0===e||!0===e?D:!1===e?{...D,enabled:!1}:{...D,...e,enabled:null==(t=e.enabled)||t}})(L),[L]),oe=d.useCallback(e=>{Q.current=e,"function"==typeof n?n(e):n&&(n.current=e)},[n]),{convertedShapes:ae,convertedConnections:re}=((e,n,o,a)=>d.useMemo(()=>{if(o||a){const r={shapes:{source:()=>e||[],map:S(o)},connections:{source:()=>n||[],map:S(a)}},l=t.convertToDiagramModel({shapes:e,connections:n},r);return{convertedShapes:C(l.shapes,e),convertedConnections:C(l.connections,n)}}return{convertedShapes:C(e,e),convertedConnections:C(n,n)}},[e,n,o,a]))(k,r,P,l),le=d.useMemo(()=>({role:J,ariaLabel:Y,ariaRoleDescription:"Diagram"}),[J,Y]),ie=d.useMemo(()=>({shapes:ae,connections:re,selectable:u,editable:i,zoom:M,zoomMax:O,zoomMin:I,zoomRate:x,layout:c,pannable:s,shapeDefaults:p,connectionDefaults:a,navigation:w(ne),accessibility:le}),[ae,re,u,i,M,O,I,x,c,s,p,a,ne,le]),ce=d.useMemo(()=>{const e=d.Children.toArray(X).find(e=>d.isValidElement(e)&&e.type===f);return e?e.props.children:null},[X]),se=d.useMemo(()=>{const e=d.Children.toArray(X).find(e=>d.isValidElement(e)&&e.type===m);return e?e.props.children:null},[X]),{tooltipState:ue,tooltipElRef:pe,hideTooltip:de,handleTooltipShow:ge,handleTooltipHide:me}=(e=>{const{shapeTooltipRender:n,connectionTooltipRender:o,diagramRef:a,wrapperRef:r,onTooltipShow:l,onTooltipHide:i}=e,[c,s]=d.useState(y),u=d.useCallback(()=>{g.current=null,s(y)},[]),p=d.useRef(null),g=d.useRef(null);d.useLayoutEffect(()=>{const e=p.current,n=g.current;if(!c.visible||!n||!e)return;const{width:o,height:a}=e.getBoundingClientRect();if(0===o&&0===a)return;g.current=null;const r=t.placeTooltip({hovered:n.item,mouse:n.mouse,shapes:n.shapes,connections:n.connections,diagramRect:n.diagramRect,zoom:n.zoom,pan:n.pan,tooltipSize:{width:o,height:a},viewportBounds:n.viewportBounds});s(e=>({...e,style:{position:"fixed",left:r.left+n.scrollX,top:r.top+n.scrollY,zIndex:9999}}))});const m=d.useCallback((e,i)=>{var c,p,d,m,f,y,S,C,T,D;u();const{dataItem:E}=e.item,w="Shape"===e.item.name,k="Connection"===e.item.name,P=w?null==(p=null==(c=i.shapeDefaults)?void 0:c.tooltip)?void 0:p.visible:null==(m=null==(d=i.connectionDefaults)?void 0:d.tooltip)?void 0:m.visible,M=E&&(null==(f=E.tooltip)?void 0:f.visible),O=w?i.shapes:i.connections,I=null==O?void 0:O.find(t=>{var n;return(null==t?void 0:t.id)===(null==(n=null==e?void 0:e.item)?void 0:n.id)}),x=null==I?void 0:I.tooltipText,L=(null==E?void 0:E.tooltipText)||x;if(!L||!1===M||!P&&!M)return;const R=L===E.tooltipText?E:{...E,tooltipText:L};let z;z=w&&n?n(R):k&&o?o(R):L;const A=w?null==(S=null==(y=i.shapeDefaults)?void 0:y.tooltip)?void 0:S.cssClass:null==(T=null==(C=i.connectionDefaults)?void 0:C.tooltip)?void 0:T.cssClass,j=null==(D=E.tooltip)?void 0:D.cssClass,F=A||j;if(!a.current||!r.current)return;const B=r.current,N=B.ownerDocument.defaultView;if(!N)return;const K=a.current.connections.map(e=>e.allPoints()),V=a.current.shapes.map(e=>e.bounds()),H=B.getBoundingClientRect(),U=a.current.pan(),q=a.current.zoom(),$=new DOMRect(b,v,N.innerWidth,N.innerHeight),W=t.placeTooltip({hovered:e.item,mouse:e.point,shapes:V,connections:K,diagramRect:H,zoom:q,pan:U,tooltipSize:h,viewportBounds:$});g.current={item:e.item,mouse:e.point,shapes:V,connections:K,diagramRect:H,zoom:q,pan:U,viewportBounds:$,scrollX:N.scrollX,scrollY:N.scrollY},s({visible:!0,content:z,className:F,style:{position:"fixed",left:W.left+N.scrollX,top:W.top+N.scrollY,zIndex:9999,visibility:"hidden"}}),null==l||l({...R})},[n,o,u,l,a,r]),f=d.useCallback(e=>{u(),null==i||i({...e})},[u,i]);return{tooltipState:c,tooltipElRef:p,hideTooltip:u,handleTooltipShow:m,handleTooltipHide:f}})({shapeTooltipRender:ce,connectionTooltipRender:se,diagramRef:Q,wrapperRef:G,onTooltipShow:$,onTooltipHide:W}),{bindDiagramEvents:fe}=(e=>{const n=d.useRef(e);return n.current=e,{bindDiagramEvents:d.useCallback((e,o)=>{t.events.forEach(t=>{e.bind(t,e=>{var a,r;if("tooltipShow"===t)return void n.current.handleTooltipShow(e,o);if("tooltipHide"===t)return void n.current.handleTooltipHide(null!=(r=null==(a=e.item)?void 0:a.dataItem)?r:{});const l=T[t];if(l){const t=n.current.handlers[l];null==t||t(e)}})})},[])}})({handlers:{onChange:R,onDiagramClick:z,onDrag:A,onDragEnd:j,onDragStart:F,onShapeBoundsChange:B,onMouseEnter:N,onMouseLeave:K,onPan:V,onSelect:H,onZoomEnd:U,onZoomStart:q},handleTooltipShow:ge,handleTooltipHide:me}),he=d.useRef(!1),be=d.useRef(ie);return d.useEffect(()=>{if(!G.current)return;const e=t.loadTheme(G.current),n=new t.Diagram(G.current,ie,e);return n._createOptionElements(),n.zoom(n.options.zoom),n.canvas.draw(),Q.current=n,oe(n),fe(n,ie),he.current=!0,()=>{de(),n.destroy(),oe(null),he.current=!1}},[]),d.useEffect(()=>{if(!Q.current||!he.current)return;const e=Q.current,t=be.current;(t.shapes!==ie.shapes||t.connections!==ie.connections)&&e.load(ie),(t.layout!==ie.layout||t.shapes!==ie.shapes||t.connections!==ie.connections)&&e.layout(ie.layout),t.zoom!==ie.zoom&&e.zoom(ie.zoom);const n=t.connectionDefaults===ie.connectionDefaults?ie.connectionDefaults:{...e.options.connectionDefaults,...ie.connectionDefaults},o=t.shapeDefaults===ie.shapeDefaults?ie.shapeDefaults:{...e.options.shapeDefaults,...ie.shapeDefaults};e.setOptions({zoom:ie.zoom,zoomMax:ie.zoomMax,zoomMin:ie.zoomMin,zoomRate:ie.zoomRate,selectable:ie.selectable,pannable:ie.pannable,layout:ie.layout,navigation:ie.navigation,connectionDefaults:n,shapeDefaults:o}),be.current=ie},[ie]),d.createElement("div",{ref:G,className:o.classNames("k-diagram",Z),style:{display:"block",position:"relative",cursor:"default",..._}},ue.visible&&d.createElement("div",{ref:pe,className:o.classNames("k-popup","k-tooltip",ue.className),style:ue.style},ue.content),ee&&d.createElement(o.WatermarkOverlay,{message:te}))});k.displayName="KendoDiagram";const P=()=>{};let M=0;const O=d.createContext(null),I=O.Provider,x=()=>{const e=d.useContext(O);if(!e)throw new Error("DiagramEditorContext is not available.");return e},L=e=>{const t=d.useRef(null);return d.useEffect(()=>()=>{var e;null==(e=t.current)||e.call(t),t.current=null},[]),d.useCallback(n=>{var o;null==(o=t.current)||o.call(t),t.current=n&&e?e.registerSurface(n):null},[e])},R=e=>{const{controller:t,snapshot:n}=x(),o=d.useId(),a=n.openOverlays.has(o);d.useEffect(()=>()=>{t.closeOverlay(o)},[t,o]);const r=d.useCallback(n=>{const r="function"==typeof n?n(a):n;if(r!==a){if(r)return void t.openOverlay(o,e);t.closeOverlay(o)}},[t,a,o,e]);return{overlayId:o,open:a,setOpen:r}},z=e=>{const{controller:t}=x(),n=d.useRef(new Map);return d.useEffect(()=>()=>{n.current.forEach((e,n)=>{e(),t.closeOverlay(n)}),n.current.clear()},[t]),d.useCallback(o=>({...o,animate:!1,onOpen:a=>{var r,l,i,c;null==(r=o.onOpen)||r.call(o,a);const s=null==(i=null==(l=a.target)?void 0:l.element)?void 0:i.querySelector(".k-popup");if(!(s instanceof HTMLElement))return;let u=s.dataset.diagramEditorOverlayId;u||(u=`${e}-${M++}`,s.dataset.diagramEditorOverlayId=u),t.openOverlay(u,e),null==(c=n.current.get(u))||c(),n.current.set(u,t.registerSurface(s))},onClose:e=>{var a,r,l,i;const c=null==(r=null==(a=e.target)?void 0:a.element)?void 0:r.querySelector(".k-popup"),s=c instanceof HTMLElement?c.dataset.diagramEditorOverlayId:void 0;s&&(null==(l=n.current.get(s))||l(),n.current.delete(s),t.closeOverlay(s)),null==(i=o.onClose)||i.call(o,e)}}),[t,e])},A="diagram.editing.textPlaceholder",j="diagram.editing.undo",F="diagram.editing.redo",B="diagram.editing.select",N="diagram.editing.pan",K="diagram.editing.text",V="diagram.editing.shape",H="diagram.editing.shapeType",U="diagram.editing.fillColor",q="diagram.editing.borderWidth",$="diagram.editing.borderColor",W="diagram.editing.borderStyle",_="diagram.editing.borderStyle.solid",Z="diagram.editing.borderStyle.dotted",J="diagram.editing.borderStyle.dashed",Y="diagram.editing.borderStyle.dashDot",X="diagram.editing.borderStyle.longDash",G="diagram.editing.borderStyle.longDashDot",Q="diagram.editing.borderStyle.longDashDotDot",ee="diagram.editing.toFront",te="diagram.editing.toBack",ne="diagram.editing.rotateLeft",oe="diagram.editing.rotateRight",ae="diagram.editing.duplicate",re="diagram.editing.delete",le="diagram.editing.connectionColor",ie="diagram.editing.connectionWidth",ce="diagram.editing.connectionStyle",se="diagram.editing.connectionType",ue="diagram.editing.connectionType.cascading",pe="diagram.editing.connectionType.polyline",de="diagram.editing.editText",ge="diagram.editing.startCapType",me="diagram.editing.cap.none",fe="diagram.editing.cap.arrow",he="diagram.editing.cap.triangleArrow",be="diagram.editing.cap.lineArrow",ve="diagram.editing.cap.filledCircle",ye="diagram.editing.cap.filledDiamond",Se="diagram.editing.endCapType",Ce="diagram.editing.shape.collate",Te="diagram.editing.shape.connector",De="diagram.editing.shape.dataStorage",Ee="diagram.editing.shape.database",we="diagram.editing.shape.decision",ke="diagram.editing.shape.delay",Pe="diagram.editing.shape.directAccessStorage",Me="diagram.editing.shape.display",Oe="diagram.editing.shape.document",Ie="diagram.editing.shape.extract",xe="diagram.editing.shape.inputOutput",Le="diagram.editing.shape.internalStorage",Re="diagram.editing.shape.logicalOr",ze="diagram.editing.shape.manualInputOutput",Ae="diagram.editing.shape.manualOperation",je="diagram.editing.shape.merge",Fe="diagram.editing.shape.multipleDocuments",Be="diagram.editing.shape.offPageConnector",Ne="diagram.editing.shape.predefinedProcess",Ke="diagram.editing.shape.preparation",Ve="diagram.editing.shape.process",He="diagram.editing.shape.sort",Ue="diagram.editing.shape.summingJunction",qe="diagram.editing.shape.terminator",$e="diagram.editing.alignLeft",We="diagram.editing.alignCenter",_e="diagram.editing.alignRight",Ze="diagram.editing.alignTop",Je="diagram.editing.alignMiddle",Ye="diagram.editing.alignBottom",Xe="diagram.editing.alignHorizontal",Ge="diagram.editing.alignVertical",Qe="diagram.editing.fontType",et="diagram.editing.fontSize",tt="diagram.editing.font.standard",nt="diagram.editing.font.classic",ot="diagram.editing.font.technical",at="diagram.editing.font.handwritten",rt="diagram.editing.font.headline",lt="diagram.editing.fontSize.extraSmall",it="diagram.editing.fontSize.small",ct="diagram.editing.fontSize.medium",st="diagram.editing.fontSize.large",ut="diagram.editing.fontSize.extraLarge",pt="diagram.editing.color",dt={[A]:"Type something",[j]:"Undo",[F]:"Redo",[B]:"Select",[N]:"Pan",[K]:"Text",[V]:"Shape",[H]:"Shape Type",[U]:"Fill Color",[q]:"Border Width",[$]:"Border Color",[W]:"Border Style",[_]:"Solid",[Z]:"Dotted",[J]:"Dashed",[Y]:"Dash Dot",[X]:"Long Dash",[G]:"Long Dash Dot",[Q]:"Long Dash Dot Dot",[ee]:"To Front",[te]:"To Back",[ne]:"Rotate Left",[oe]:"Rotate Right",[ae]:"Duplicate",[re]:"Delete",[le]:"Connection Color",[ie]:"Connection Width",[ce]:"Connection Style",[se]:"Connection Type",[ue]:"Cascading",[pe]:"Polyline",[de]:"Edit Text",[ge]:"Start Cap Type",[me]:"None",[fe]:"Arrow",[he]:"Triangle Arrow",[be]:"Line Arrow",[ve]:"Filled Circle",[ye]:"Filled Diamond",[Se]:"End Cap Type",[Ce]:"Collate",[Te]:"Connector",[De]:"Data Storage",[Ee]:"Database",[we]:"Decision",[ke]:"Delay",[Pe]:"Direct Access Storage",[Me]:"Display",[Oe]:"Document",[Ie]:"Extract",[xe]:"Input Output",[Le]:"Internal Storage",[Re]:"Logical OR",[ze]:"Manual Input Output",[Ae]:"Manual Operation",[je]:"Merge",[Fe]:"Multiple Documents",[Be]:"Off-page Connector",[Ne]:"Predefined Process",[Ke]:"Preparation",[Ve]:"Process",[He]:"Sort",[Ue]:"Summing Junction (Logical AND)",[qe]:"Terminator",[$e]:"Left",[We]:"Center",[_e]:"Right",[Ze]:"Top",[Je]:"Middle",[Ye]:"Bottom",[Xe]:"Horizontal Alignment",[Ge]:"Vertical Alignment",[Qe]:"Font Type",[et]:"Font Size",[tt]:"Standard",[nt]:"Classic",[ot]:"Technical",[at]:"Handwritten",[rt]:"Headline",[lt]:"Extra Small",[it]:"Small",[ct]:"Medium",[st]:"Large",[ut]:"Extra Large",[pt]:"Text Color"},gt=e=>e.preventDefault(),mt={onMouseDown:gt,onPointerDown:gt},ft=":not(.k-dropdownlist button):not(.k-colorpicker button):not(.k-split-button .k-split-button-arrow)",ht=[`button${ft}`,`.k-button-group > button${ft}`,".k-colorpicker",".k-dropdownlist"],bt=(e,t)=>`${e}-${t}`,vt=(e,t)=>{if(!e)return null;const{component:n,props:o}=e;return d.createElement(n,{...o,key:t})},yt=(e,t)=>e.map((e,n)=>Array.isArray(e)?d.createElement(i.ButtonGroup,{key:bt("group",n)},e.map((e,n)=>vt(t[e],bt(e,n))).filter(Boolean)):vt(t[e],bt(e,n))).filter(Boolean),St=(e,t,n,o)=>e.map(e=>{const a=n[String(o(e))];return{...e,label:a?t.toLanguageString(a,dt[a]):e.label}}),Ct="k-diagram-context-toolbar-popup",Tt="k-diagram-context-toolbar-container",Dt=d.forwardRef((e,t)=>{var n;const a=d.useRef(null),r=d.useRef(null),s=d.useRef(null),u=d.useRef(null),p=d.useRef(null),g=d.useRef(!1),{controller:m}=x(),{open:f,setOpen:h}=R(e.overlayOwner),{columns:b}=e,v=d.useRef(e);v.current=e,d.useImperativeHandle(t,()=>a.current,[]);const y=d.useCallback(e=>{var t,n;const o="function"==typeof e?e(f):e;o!==f&&(null==(n=(t=v.current).onOpenChange)||n.call(t,o),h(o))},[h,f]),S=d.useCallback(()=>{y(e=>(e&&(g.current=!0),!e))},[y]),C=d.useCallback(()=>{var e,t,n;let a=[];s.current=new o.Navigation({root:r,selectors:["button"],keyboardEvents:{keydown:{ArrowRight:(e,t,n)=>{n.preventDefault(),t.focusNext(e)},ArrowLeft:(e,t,n)=>{n.preventDefault(),t.focusPrevious(e)},ArrowDown:(e,t,n)=>{n.preventDefault(),((e,t)=>{var n;const o=a.indexOf(e)+t;null==(n=a.at(o%a.length))||n.focus()})(e,b)},ArrowUp:(e,t,n)=>{n.preventDefault(),((e,t)=>{var n;const o=a.indexOf(e)-t;null==(n=a.at((o+a.length)%a.length))||n.focus()})(e,b)},Escape:(e,t,n)=>{n.preventDefault(),g.current=!0,y(!1)}}},tabIndex:0}),a=null==(e=s.current)?void 0:e.elements;const l=v.current.data.findIndex(e=>e.value===v.current.value);l>=0?null==(t=a[l])||t.focus():null==(n=s.current.first)||n.focus()},[b,y]),T=d.useCallback(()=>{var e,t;s.current=null,g.current&&(null==(t=null==(e=a.current)?void 0:e.element)||t.focus(),g.current=!1)},[]),D=d.useCallback(e=>{var t,n;null==(t=p.current)||t.call(p);const o=null==(n=null==e?void 0:e.element)?void 0:n.querySelector(".k-popup");if(f&&o instanceof HTMLElement)return u.current=o,void(p.current=m.registerSurface(o));u.current=null,p.current=null},[m,f]);d.useEffect(()=>{f||T()},[T,f]);const E=d.useMemo(()=>4!==b?{gridTemplateColumns:`repeat(${b}, max-content)`}:{},[b]),w=d.useCallback(e=>{var t;null==(t=s.current)||t.triggerKeyboardEvent(e)},[]),k=d.useCallback(e=>{var t,n,o,l;(null==(n=null==(t=a.current)?void 0:t.element)||!n.contains(e.relatedTarget))&&(null==(o=r.current)||!o.contains(e.relatedTarget))&&(null==(l=u.current)||!l.contains(e.relatedTarget))&&y(!1)},[y]);return d.useEffect(()=>()=>{var e;null==(e=p.current)||e.call(p),p.current=null},[]),d.createElement(d.Fragment,null,d.createElement(i.Button,{svgIcon:e.buttonIcon,endIcon:d.createElement(o.SvgIcon,{icon:c.chevronDownIcon}),onClick:S,ref:a,type:"button",fillMode:"flat",togglable:void 0!==e.active,selected:!0===e.active,title:e.buttonTitle,"aria-label":e.buttonTitle}),d.createElement(l.Popup,{anchor:null==(n=a.current)?void 0:n.element,show:f,popupClass:e.popupClass,onOpen:C,ref:D},d.createElement("div",{className:"k-diagram-shapes-container",style:E,onKeyDown:w,ref:r,onBlur:k},e.data.map(({label:t,icon:n,value:o},a)=>d.createElement(i.Button,{key:t+a,fillMode:"flat",title:t,"aria-label":t,onClick:()=>{g.current=!0,y(!1),e.onSelect(o)},togglable:!0,selected:e.value===o,type:"button",svgIcon:n,iconSize:"large",...mt})))))});Dt.displayName="IconsDropdown";const{DOMResizeObserver:Et,pmDocToRTContent:wt,parseAlignment:kt,Data:Pt}=t.EditingUtils,{fontNames:Mt,fontSizes:Ot,floatingToolbarStyle:It}=Pt,{bold:xt,italic:Lt,underline:Rt,fontName:zt,fontSize:At,foreColor:jt}=a.EditorToolsSettings,Ft=a.EditorTools.ForeColor,Bt=a.EditorTools.createInlineFormatTool({...xt,props:{...xt.props,fillMode:"flat"}}),Nt=a.EditorTools.createInlineFormatTool({...Lt,props:{...Lt.props,fillMode:"flat"}}),Kt=a.EditorTools.createInlineFormatTool({...Rt,props:{...Rt.props,fillMode:"flat"}}),Vt=e=>{const t=z("text-toolbar"),n=d.useCallback(n=>{const o=t(n);return{...o,onClose:t=>{var n;null==(n=o.onClose)||n.call(o,t),e.onClose&&e.onClose()}}},[t,e]);return d.createElement(l.PopupPropsContext.Provider,{value:n},d.createElement(Ft,{...e,colorPickerProps:{...jt.colorPickerProps,fillMode:"flat"}}))},Ht={Left:$e,Center:We,Right:_e,Top:Ze,Middle:Je,Bottom:Ye},Ut={Standard:tt,Classic:nt,Technical:ot,Handwritten:at,Headline:rt},qt={"Extra Small":lt,Small:it,Medium:ct,Large:st,"Extra Large":ut},$t=[{label:"Left",value:"left",icon:c.alignLeftIcon},{label:"Center",value:"center",icon:c.alignCenterIcon},{label:"Right",value:"right",icon:c.alignRightIcon}],Wt=[{label:"Top",value:"top",icon:c.alignTopIcon},{label:"Middle",value:"middle",icon:c.alignMiddleIcon},{label:"Bottom",value:"bottom",icon:c.alignBottomIcon}],_t={left:c.alignLeftIcon,center:c.alignCenterIcon,right:c.alignRightIcon,top:c.alignTopIcon,middle:c.alignMiddleIcon,bottom:c.alignBottomIcon},Zt=(e,t,n,o={})=>e.map(e=>{const a=o[e.text];return{...e,text:n.toLanguageString(a||`${t}.${e.text}`,a?dt[a]:e.text)}}),Jt=(e,t)=>e in _t?e:t,Yt=e=>{const t=r.useLocalization(),n=e=>{const n=Ht[e];return t.toLanguageString(n,dt[n])},o=$t.map(e=>({...e,title:n(e.label)})),a=Wt.map(e=>({...e,title:n(e.label)}));return d.createElement(d.Fragment,null,d.createElement(Dt,{columns:$t.length,data:o,value:e.horizontal,buttonIcon:_t[e.horizontal],buttonTitle:t.toLanguageString(Xe,dt[Xe]),overlayOwner:"text-toolbar",onSelect:t=>e.onAlignClick(t,e.vertical)}),e.renderVAlign&&d.createElement(Dt,{columns:Wt.length,data:a,value:e.vertical,buttonIcon:_t[e.vertical],buttonTitle:t.toLanguageString(Ge,dt[Ge]),overlayOwner:"text-toolbar",onSelect:t=>e.onAlignClick(e.horizontal,t)}))},Xt=e=>null!=e,Gt=e=>{var t,n,o,c;const s=z("text-toolbar"),u="Shape"===(null==(t=e.editItem)?void 0:t.name)&&"text"!==e.editItem.type,p=d.useRef(e.editItem);p.current=e.editItem;const g=null==(n=e.editorView)?void 0:n.view,m=d.useRef(g);m.current=g;const f=(null==g?void 0:g.state.doc.attrs.alignment)||"left top",h=kt(f),b=Jt(h.horizontal,"left"),v=Jt(h.vertical,"top"),y=r.useLocalization(),S=e.fontNames||Mt,C=e.fontSizes||Ot,{FontName:T,FontSize:D}=d.useMemo(()=>{const e=Zt(S,"diagram.editing.font",y,Ut),t=Zt(C,"diagram.editing.fontSize",y,qt),n=y.toLanguageString(Qe,dt[Qe]),o=y.toLanguageString(et,dt[et]),r=a.EditorTools.createStyleDropDownList({...zt,items:e,defaultItem:void 0}),l=a.EditorTools.createStyleDropDownList({...At,items:t,defaultItem:void 0});return{FontName:e=>d.createElement(r,{...e,title:n}),FontSize:e=>d.createElement(l,{...e,title:o})}},[S,C,y]),E=Xt(e.defaultStyles.fontSize)&&C.find(t=>t.value===`${e.defaultStyles.fontSize}px`)||void 0,w=Xt(e.defaultStyles.fontFamily)&&S.find(t=>t.value===e.defaultStyles.fontFamily)||void 0,k=d.useCallback(()=>{var e;const t=p.current,n=m.current;if(!t||!n||"Shape"!==t.name||"text"!==t.type||!t.bounds())return;const o={...t.options.content,...wt(n.state.doc)};null==(e=t._syncAutoHeightBounds)||e.call(t,o)},[]),P=!0===(null==(c=null==(o=m.current)?void 0:o.dom)?void 0:c.isConnected);d.useEffect(()=>{var e;const t=null==(e=m.current)?void 0:e.dom;if(t&&t.isConnected){const e=p.current;if(!e||"Shape"!==e.name||"text"!==e.type)return;e.diagram.select(e);const n=new Et(t);return n.bind("resize",k),n.init(),()=>{n.destroy()}}},[e.editItem,P,k]);const M={color:{component:Vt,props:{view:g,onClose:()=>{g.focus()},title:y.toLanguageString(pt,dt[pt])}},fontSize:{component:D,props:{view:g,className:"k-toolbar-button",fillMode:"flat",defaultValue:E,dataItemKey:"value"}},fontType:{component:T,props:{view:g,className:"k-toolbar-button",fillMode:"flat",defaultValue:w,dataItemKey:"value"}},bold:{component:Bt,props:{view:g}},italic:{component:Nt,props:{view:g}},underline:{component:Kt,props:{view:g}},separator:{component:i.ToolbarSeparator,props:{}},align:{component:Yt,props:{horizontal:b,vertical:v,renderVAlign:u,onAlignClick:(e,t)=>{g.dispatch(g.state.tr.setDocAttribute("alignment",`${e} ${t}`)),g.focus()}}}},O=yt(e.tools,M);return 0===O.length?null:d.createElement(l.PopupPropsContext.Provider,{value:s},d.createElement(i.Toolbar,{fillMode:"flat",style:It,buttons:ht},O))},{shapesData:Qt}=t.EditingUtils.Icons,{workflowShapes:en}=t.EditingUtils.Data,tn={[t.FlowchartShapeType.Collate]:Ce,[t.FlowchartShapeType.OnPageConnector]:Te,[t.FlowchartShapeType.DataStorage]:De,[t.FlowchartShapeType.Database]:Ee,[t.FlowchartShapeType.Decision]:we,[t.FlowchartShapeType.Delay]:ke,[t.FlowchartShapeType.DirectAccessStorage]:Pe,[t.FlowchartShapeType.Display]:Me,[t.FlowchartShapeType.Document]:Oe,[t.FlowchartShapeType.Extract]:Ie,[t.FlowchartShapeType.DataInputOutput]:xe,[t.FlowchartShapeType.InternalStorage]:Le,[t.FlowchartShapeType.LogicalOr]:Re,[t.FlowchartShapeType.ManualInputOutput]:ze,[t.FlowchartShapeType.ManualOperation]:Ae,[t.FlowchartShapeType.Merge]:je,[t.FlowchartShapeType.MultipleDocuments]:Fe,[t.FlowchartShapeType.OffPageConnector]:Be,[t.FlowchartShapeType.PredefinedProcess]:Ne,[t.FlowchartShapeType.Preparation]:Ke,[t.FlowchartShapeType.Process]:Ve,[t.FlowchartShapeType.Sort]:He,[t.FlowchartShapeType.SummingJunction]:Ue,[t.FlowchartShapeType.Terminator]:qe},nn=d.forwardRef(function(e,t){const n=r.useLocalization(),o=d.useMemo(()=>St(Qt,n,tn,e=>e.type),[n]),a=d.useMemo(()=>{const t=new Map(o.map(({label:e,icon:t,type:n})=>[n,{icon:t,label:e}]));return(e.shapes||en).map(e=>{const n=t.get(e);return{label:(null==n?void 0:n.label)||o[0].label,icon:(null==n?void 0:n.icon)||o[0].icon,value:e}})},[o,e.shapes]);return d.createElement(Dt,{...e,ref:t,data:a,buttonIcon:c.shapesIcon,buttonTitle:e.buttonTitle,columns:4})}),on=()=>d.createElement(s.InputPrefix,{orientation:"horizontal"},d.createElement(o.SvgIcon,{icon:c.rowsIcon}));const an=e=>{var t;const{value:n,min:a=0,onSelect:r}=e,u=d.useRef(null),p=d.useRef(null),g=d.useRef(null),m=d.useRef(null),{controller:f}=x(),{open:h,setOpen:b}=R(e.overlayOwner),[v,y]=d.useState(60),S=d.useCallback(e=>{var t,n;null==(t=m.current)||t.call(m);const o=null==(n=null==e?void 0:e.element)?void 0:n.querySelector(".k-popup");if(h&&o instanceof HTMLElement)return g.current=o,void(m.current=f.registerSurface(o));g.current=null,m.current=null},[f,h]),C=d.useCallback(e=>{const t=e.target.element;setTimeout(()=>{const e=t.querySelector("input");e&&(e.focus(),e.select())},0)},[]),T=d.useCallback(e=>{var t,n;("Enter"===e.key||"Escape"===e.key)&&(b(!1),null==(n=null==(t=u.current)?void 0:t.element)||n.focus())},[b]),D=d.useCallback(()=>{b(!1)},[b]),E=d.useCallback(e=>{r(e.value||0)},[r]);return d.useEffect(()=>{var e;const t=null==(e=p.current)?void 0:e.element;if(t&&h)return t.addEventListener("wheel",gt,{capture:!0,passive:!1}),()=>{t.removeEventListener("wheel",gt,!0)}},[h]),d.useEffect(()=>()=>{var e;null==(e=m.current)||e.call(m),m.current=null},[]),d.useEffect(()=>{var e;const t=null==(e=u.current)?void 0:e.element;!h||!t||y(10*Math.ceil(function(e){return e.getBoundingClientRect().height}(t)/5))},[h]),d.createElement(d.Fragment,null,d.createElement(i.Button,{svgIcon:c.borderWidthIcon,endIcon:d.createElement(o.SvgIcon,{icon:c.chevronDownIcon}),onClick:()=>{b(e=>!e)},type:"button",fillMode:"flat",title:e.label,ref:u,...mt}),d.createElement(l.Popup,{anchor:null==(t=u.current)?void 0:t.element,show:h,popupClass:Ct,onOpen:C,ref:S},d.createElement(s.NumericTextBox,{spinners:!1,ref:p,width:v,value:n,min:a,max:20,step:1,onKeyDown:T,onBlur:D,fillMode:"flat",onChange:E,prefix:on})))},rn=t.EditingUtils.Data.borderTypes,ln={solid:_,dot:Z,dash:J,dashDot:Y,longDash:X,longDashDot:G,longDashDotDot:Q},cn=e=>{const t=r.useLocalization(),n=t.toLanguageString(W,dt[W]),o=d.useMemo(()=>St(rn,t,ln,e=>e.value),[t]);return d.createElement(Dt,{...e,data:o,buttonIcon:c.borderTypeIcon,buttonTitle:n,columns:rn.length,popupClass:Ct})},{Data:sn}=t.EditingUtils,un=sn.floatingToolbarStyle,pn=e=>{var t,n,o;const{shape:a,tools:u,shapes:p}=e,{controller:g}=x(),m=z("shape-toolbar"),f=r.useLocalization();if(!a)return null;const h=a.options,b=h.type||"rectangle",v="string"==typeof h.fill?h.fill:(null==(t=h.fill)?void 0:t.color)||"#ffffff",y=(null==(o=null==(n=a.shapeVisual)?void 0:n.options)?void 0:o.stroke)||{},S=y.color||"",C=y.width||1,T=y.dashType||"solid",D={type:{component:nn,props:{onSelect:e=>{e!==b&&g.execute({type:"setShapeType",value:e})},value:a.options.type,buttonTitle:f.toLanguageString(H,dt[H]),shapes:p,popupClass:Ct,overlayOwner:"shape-toolbar"}},backColor:{component:s.ColorPicker,props:{value:v,gradientSettings:{opacity:!1},fillMode:"flat",onChange:e=>(e=>{g.execute({type:"setShapeFillColor",value:e})})(e.value),title:f.toLanguageString(U,dt[U])}},separator:{component:i.ToolbarSeparator,props:{}},borderWidth:{component:an,props:{value:C,onSelect:e=>{g.execute({type:"setShapeStrokeWidth",value:e})},label:f.toLanguageString(q,dt[q]),overlayOwner:"shape-toolbar"}},borderColor:{component:s.ColorPicker,props:{value:S,svgIcon:c.borderColorIcon,gradientSettings:{opacity:!1},fillMode:"flat",onChange:e=>(e=>{g.execute({type:"setShapeStrokeColor",value:e})})(e.value),title:f.toLanguageString($,dt[$])}},borderStyle:{component:cn,props:{value:T,onSelect:e=>{g.execute({type:"setShapeStrokeDashType",value:e})},overlayOwner:"shape-toolbar"}},toFront:{component:i.Button,props:{fillMode:"flat",onClick:()=>{g.execute({type:"shapeToFront"})},svgIcon:c.bringToFrontIcon,title:f.toLanguageString(ee,dt[ee])}},toBack:{component:i.Button,props:{fillMode:"flat",onClick:()=>{g.execute({type:"shapeToBack"})},svgIcon:c.bringToBackIcon,title:f.toLanguageString(te,dt[te])}},rotateLeft:{component:i.Button,props:{fillMode:"flat",onClick:()=>{g.execute({type:"rotateShapeLeft"})},svgIcon:c.rotateLeftIcon,title:f.toLanguageString(ne,dt[ne])}},rotateRight:{component:i.Button,props:{fillMode:"flat",onClick:()=>{g.execute({type:"rotateShapeRight"})},svgIcon:c.rotateRightIcon,title:f.toLanguageString(oe,dt[oe])}},duplicate:{component:i.Button,props:{fillMode:"flat",onClick:()=>{g.execute({type:"duplicateSelection"})},svgIcon:c.copyIcon,title:f.toLanguageString(ae,dt[ae])}},delete:{component:i.Button,props:{fillMode:"flat",onClick:()=>{g.execute({type:"deleteSelection"})},svgIcon:c.trashIcon,title:f.toLanguageString(re,dt[re])}}},E=yt(u,D);return 0===E.length?null:d.createElement(l.PopupPropsContext.Provider,{value:m},d.createElement(i.Toolbar,{fillMode:"flat",style:{...un},buttons:ht},E))},dn=t.EditingUtils.Data.connectionTypes,gn=t.EditingUtils.Icons.diagonalLineIcon,mn={cascading:ue,polyline:pe},fn=e=>{const t=r.useLocalization(),n=t.toLanguageString(se,dt[se]),o=d.useMemo(()=>St(dn,t,mn,e=>e.value),[t]);return d.createElement(Dt,{...e,data:o,buttonIcon:gn,buttonTitle:n,columns:dn.length,popupClass:Ct})},hn=t.EditingUtils.Data.borderTypes,bn={solid:_,dot:Z,dash:J,dashDot:Y,longDash:X,longDashDot:G,longDashDotDot:Q},vn=e=>{const t=r.useLocalization(),n=t.toLanguageString(ce,dt[ce]),o=d.useMemo(()=>St(hn,t,bn,e=>e.value),[t]);return d.createElement(Dt,{...e,data:o,buttonIcon:c.borderTypeIcon,buttonTitle:n,columns:hn.length,popupClass:Ct})},yn={none:me,ArrowStart:fe,ArrowEnd:fe,TriangleArrowStart:he,TriangleArrowEnd:he,LineArrow:be,FilledCircle:ve,FilledDiamond:ye},Sn=({value:e,onSelect:t,data:n,buttonIcon:o,buttonTitle:a,overlayOwner:l})=>{const i=r.useLocalization(),c=d.useMemo(()=>St(n,i,yn,e=>e.value),[n,i]);return d.createElement(Dt,{buttonIcon:o,columns:3,onSelect:e=>t(e),value:e,data:c,buttonTitle:a,popupClass:Ct,overlayOwner:l})},Cn=["undo","redo","separator","select","pan","separator","text","separator","shape"],Tn=["type","backColor","separator","borderWidth","borderColor","borderStyle","separator",["toFront","toBack"],"separator",["rotateLeft","rotateRight"],"separator",["duplicate","delete"]],Dn=["color","separator","width","separator","style","separator","text","separator","startCap","separator","type","separator","endCap","separator","delete"],En=["color","separator","fontSize","separator","fontType","separator",["bold","italic","underline"],"separator","align"],{ConnectionCommands:wn,Data:kn}=t.EditingUtils,{leftCapTypes:Pn,rightCapTypes:Mn,floatingToolbarStyle:On}=kn,In=e=>{var t,n;const{connection:o,tools:a=Dn}=e,{controller:u}=x(),p=z("connection-toolbar"),g=r.useLocalization();if(!o)return null;const m=o.options,f=m.type||"cascading",h="string"==typeof m.stroke?{color:m.stroke}:m.stroke||{},b=h.color||"#000000",v=h.dashType||"solid",y=h.width||1,S=wn.getCapTypeValue(m.startCap,"start"),C=wn.getCapTypeValue(m.endCap,"end"),T={color:{component:s.ColorPicker,props:{value:b,gradientSettings:{opacity:!1},fillMode:"flat",onChange:e=>(e=>{u.execute({type:"setConnectionStrokeColor",value:e})})(e.value),title:g.toLanguageString(le,dt[le])}},width:{component:an,props:{value:y,onSelect:e=>(e=>{u.execute({type:"setConnectionStrokeWidth",value:e})})(e),label:g.toLanguageString(ie,dt[ie]),min:1,overlayOwner:"connection-toolbar"}},style:{component:vn,props:{value:v,onSelect:e=>(e=>{u.execute({type:"setConnectionStrokeDashType",value:e})})(e),overlayOwner:"connection-toolbar"}},text:{component:i.Button,props:{type:"button",fillMode:"flat",svgIcon:c.freeTextIcon,onClick:()=>u.execute({type:"openSelectedTextEditor"}),title:g.toLanguageString(de,dt[de])}},startCap:{component:Sn,props:{value:S,onSelect:e=>(e=>{u.execute({type:"setConnectionStartCap",value:e})})(e),data:Pn,buttonIcon:(null==(t=Pn.find(e=>e.value===S))?void 0:t.icon)||c.arrowLeftIcon,buttonTitle:g.toLanguageString(ge,dt[ge]),overlayOwner:"connection-toolbar"}},type:{component:fn,props:{value:f,onSelect:e=>(e=>{e!==f&&u.execute({type:"setConnectionType",value:e})})(e),overlayOwner:"connection-toolbar"}},endCap:{component:Sn,props:{value:C,onSelect:e=>(e=>{u.execute({type:"setConnectionEndCap",value:e})})(e),data:Mn,buttonIcon:(null==(n=Mn.find(e=>e.value===C))?void 0:n.icon)||c.arrowRightIcon,buttonTitle:g.toLanguageString(Se,dt[Se]),overlayOwner:"connection-toolbar"}},delete:{component:i.Button,props:{fillMode:"flat",onClick:()=>{u.execute({type:"deleteSelection"})},svgIcon:c.trashIcon,title:g.toLanguageString(re,dt[re])}},separator:{component:i.ToolbarSeparator,props:{}}},D=yt(a,T);return 0===D.length?null:d.createElement(l.PopupPropsContext.Provider,{value:p},d.createElement(i.Toolbar,{fillMode:"flat",style:On,buttons:ht},D))},{floatingToolbarStyle:xn}=t.EditingUtils.Data,Ln=e=>{const{diagram:t,tools:n,position:o="top",shapes:a,visible:s=!0}=e,{controller:p,snapshot:g}=x(),m=L(p),f=z("main-toolbar"),h=g.activeTool,b=!(!t||!t.canUndo()),v=!(!t||!t.canRedo()),y=r.useLocalization();d.useEffect(()=>{if(!t)return;const{element:e}=t,n=e.ownerDocument.defaultView;if(!n||"static"!==n.getComputedStyle(e).position)return;const o=e.style.position;return e.style.position="relative",()=>{e.style.position=o}},[t]);const S=d.useCallback(e=>{p.dispatch({type:"setActiveTool",tool:e})},[p]),C={undo:{component:i.Button,props:{svgIcon:c.undoIcon,fillMode:"flat",onClick:()=>p.execute({type:"undo"}),disabled:!b,title:y.toLanguageString(j,dt[j])}},redo:{component:i.Button,props:{svgIcon:c.redoIcon,fillMode:"flat",onClick:()=>p.execute({type:"redo"}),disabled:!v,title:y.toLanguageString(F,dt[F])}},select:{component:i.Button,props:{svgIcon:c.pointerIcon,fillMode:"flat",onClick:()=>S({type:"select"}),togglable:!0,selected:"select"===h.type,title:y.toLanguageString(B,dt[B])}},pan:{component:i.Button,props:{svgIcon:c.handIcon,fillMode:"flat",onClick:()=>S({type:"pan"}),togglable:!0,selected:"pan"===h.type,title:y.toLanguageString(N,dt[N])}},text:{component:i.Button,props:{svgIcon:c.freeTextIcon,fillMode:"flat",onClick:()=>S({type:"insert-text"}),togglable:!0,selected:"insert-text"===h.type,title:y.toLanguageString(K,dt[K])}},shape:{component:nn,props:{onSelect:e=>{S({type:"insert-shape",shape:e})},value:"insert-shape"===h.type?h.shape:null,active:"insert-shape"===h.type,buttonTitle:y.toLanguageString(V,dt[V]),shapes:a,popupClass:"k-diagram-main-toolbar-popup",overlayOwner:"main-toolbar"}},separator:{component:i.ToolbarSeparator,props:{}}},T=yt(n,C);if(!t||0===T.length)return null;const D={position:"absolute",left:0,right:0,top:"top"===o?2:void 0,bottom:"bottom"===o?12:void 0,display:"flex",justifyContent:"center",pointerEvents:"none",zIndex:1},E={opacity:s?1:0,visibility:s?"visible":"hidden",pointerEvents:s?"auto":"none",transition:s?"opacity 140ms ease":"opacity 140ms ease, visibility 0s linear 140ms",...xn};return u.createPortal(d.createElement("div",{style:D,className:"k-animation-container k-animation-container-shown"},d.createElement("div",{ref:m,className:"k-popup k-diagram-top-toolbar-container",style:E,onPointerEnter:()=>p.handlePointerEnter(),onPointerLeave:()=>p.handlePointerLeave()},d.createElement(l.PopupPropsContext.Provider,{value:f},d.createElement(i.Toolbar,{fillMode:"flat",style:xn,buttons:ht},T)))),t.element)},{floatingToolbarStyle:Rn}=t.EditingUtils.Data,zn={horizontal:"center",vertical:"center"},An={horizontal:"center",vertical:"bottom"},jn={above:An,below:{horizontal:"center",vertical:"top"}},Fn={left:0,top:0},Bn={offset:Fn,placement:"above",visible:!1},Nn=(e,t)=>({left:e.left+(t?t.left:0),top:e.top+(t?t.top:0)}),Kn=(e,t,n)=>({offset:e||Fn,placement:t,visible:n}),Vn=(e,t)=>e.visible===t.visible&&e.offset.left===t.offset.left&&e.offset.top===t.offset.top&&e.placement===t.placement,Hn=({show:e,baseAnchor:n,fallbackAnchor:o=null,boundaryElement:a,anchorAlign:r=zn,popupAlign:i=An,offset:c=Fn,children:s})=>{const u=d.useRef(null),p=d.useRef(0),g=(e=>"top"===(null==e?void 0:e.vertical)?"below":"above")(i),m=d.useMemo(()=>n?Nn(n,c):null,[n,c]),f=d.useMemo(()=>o?Nn(o,c):null,[o,c]),[h,b]=d.useState(()=>m?Kn(m,g,!0):Bn),v=d.useCallback(e=>{var t;const n=null==(t=null==e?void 0:e.element)?void 0:t.querySelector(".k-popup");u.current=n instanceof HTMLElement?n:null,n instanceof HTMLElement&&Object.keys(Rn).forEach(e=>{const t=Rn[e];n.style[e]=t})},[]),y=e&&!!n;d.useLayoutEffect(()=>{var e,n;if(!y||!m)return void b(e=>Vn(e,Bn)?e:Bn);let o;if(!a||!f)return o=Kn(m,g,!0),void b(e=>Vn(e,o)?e:o);const r=(null==(e=u.current)?void 0:e.getBoundingClientRect().height)||p.current;if(r>0&&(p.current=r),p.current<=0)return o=Kn(m,g,!0),void b(e=>Vn(e,o)?e:o);const l=a.getBoundingClientRect(),i=((null==(n=a.ownerDocument)?void 0:n.defaultView)||window).scrollY;o=t.resolveFloatingToolbarPlacement({baseAnchor:m,fallbackAnchor:f,popupHeight:p.current,boundaryTop:l.top+i,boundaryBottom:l.bottom+i}),b(e=>Vn(e,o)?e:o)},[a,g,y,m,f]);const S=y&&(h.visible||p.current<=0||!a||!f),C=h.visible?h.offset:m||Fn,T=h.visible?jn[h.placement]:i;return d.createElement(l.Popup,{show:S,anchorAlign:r,popupAlign:T,offset:C,positionMode:"fixed",ref:v,animate:!1},s)},{pmDocToRTContent:Un,rtContentToPM:qn,schemaSpec:$n,styleEditor:Wn,scheduleRafCall:_n,recalcVerticalAlign:Zn}=t.EditingUtils,Jn=new a.ProseMirror.Schema($n),Yn=qn(a.ProseMirror.Node,Jn),{imageResizing:Xn}=a.EditorUtils;class Gn extends a.ProseMirror.EditorView{}a.ProseMirror.Node;const Qn=e=>{const t=e.content.firstChild;return 0===e.childCount||!(1!==e.childCount||null==t||!t.inlineContent||0!==t.childCount)};Object.defineProperty(e,"ArrowMarker",{enumerable:!0,get:function(){return t.ArrowMarker}}),Object.defineProperty(e,"CapType",{enumerable:!0,get:function(){return t.CapType}}),Object.defineProperty(e,"Circle",{enumerable:!0,get:function(){return t.Circle}}),Object.defineProperty(e,"CircleMarker",{enumerable:!0,get:function(){return t.CircleMarker}}),Object.defineProperty(e,"Collate",{enumerable:!0,get:function(){return t.Collate}}),Object.defineProperty(e,"Connection",{enumerable:!0,get:function(){return t.Connection}}),Object.defineProperty(e,"Connector",{enumerable:!0,get:function(){return t.Connector}}),Object.defineProperty(e,"DataInputOutput",{enumerable:!0,get:function(){return t.DataInputOutput}}),Object.defineProperty(e,"DataStorage",{enumerable:!0,get:function(){return t.DataStorage}}),Object.defineProperty(e,"Database",{enumerable:!0,get:function(){return t.Database}}),Object.defineProperty(e,"Decision",{enumerable:!0,get:function(){return t.Decision}}),Object.defineProperty(e,"Delay",{enumerable:!0,get:function(){return t.Delay}}),Object.defineProperty(e,"DiagramWidget",{enumerable:!0,get:function(){return t.Diagram}}),Object.defineProperty(e,"DirectAccessStorage",{enumerable:!0,get:function(){return t.DirectAccessStorage}}),Object.defineProperty(e,"Display",{enumerable:!0,get:function(){return t.Display}}),Object.defineProperty(e,"Document",{enumerable:!0,get:function(){return t.Document}}),Object.defineProperty(e,"Extract",{enumerable:!0,get:function(){return t.Extract}}),Object.defineProperty(e,"FlowchartShapeType",{enumerable:!0,get:function(){return t.FlowchartShapeType}}),Object.defineProperty(e,"Group",{enumerable:!0,get:function(){return t.Group}}),Object.defineProperty(e,"Image",{enumerable:!0,get:function(){return t.Image}}),Object.defineProperty(e,"InternalStorage",{enumerable:!0,get:function(){return t.InternalStorage}}),Object.defineProperty(e,"Layout",{enumerable:!0,get:function(){return t.Layout}}),Object.defineProperty(e,"Line",{enumerable:!0,get:function(){return t.Line}}),Object.defineProperty(e,"LogicalOr",{enumerable:!0,get:function(){return t.LogicalOr}}),Object.defineProperty(e,"ManualInputOutput",{enumerable:!0,get:function(){return t.ManualInputOutput}}),Object.defineProperty(e,"ManualOperation",{enumerable:!0,get:function(){return t.ManualOperation}}),Object.defineProperty(e,"MarkerType",{enumerable:!0,get:function(){return t.MarkerType}}),Object.defineProperty(e,"Merge",{enumerable:!0,get:function(){return t.Merge}}),Object.defineProperty(e,"MultiLineTextBlock",{enumerable:!0,get:function(){return t.MultiLineTextBlock}}),Object.defineProperty(e,"MultipleDocuments",{enumerable:!0,get:function(){return t.MultipleDocuments}}),Object.defineProperty(e,"OffPageConnector",{enumerable:!0,get:function(){return t.OffPageConnector}}),Object.defineProperty(e,"OnPageConnector",{enumerable:!0,get:function(){return t.OnPageConnector}}),Object.defineProperty(e,"Path",{enumerable:!0,get:function(){return t.Path}}),Object.defineProperty(e,"PathDefiner",{enumerable:!0,get:function(){return t.PathDefiner}}),Object.defineProperty(e,"Point",{enumerable:!0,get:function(){return t.Point}}),Object.defineProperty(e,"Polyline",{enumerable:!0,get:function(){return t.Polyline}}),Object.defineProperty(e,"PredefinedProcess",{enumerable:!0,get:function(){return t.PredefinedProcess}}),Object.defineProperty(e,"Preparation",{enumerable:!0,get:function(){return t.Preparation}}),Object.defineProperty(e,"Process",{enumerable:!0,get:function(){return t.Process}}),Object.defineProperty(e,"Rect",{enumerable:!0,get:function(){return t.Rect}}),Object.defineProperty(e,"Rectangle",{enumerable:!0,get:function(){return t.Rectangle}}),Object.defineProperty(e,"Rotation",{enumerable:!0,get:function(){return t.Rotation}}),Object.defineProperty(e,"Shape",{enumerable:!0,get:function(){return t.Shape}}),Object.defineProperty(e,"Sort",{enumerable:!0,get:function(){return t.Sort}}),Object.defineProperty(e,"SummingJunction",{enumerable:!0,get:function(){return t.SummingJunction}}),Object.defineProperty(e,"Terminator",{enumerable:!0,get:function(){return t.Terminator}}),Object.defineProperty(e,"TextBlock",{enumerable:!0,get:function(){return t.TextBlock}}),Object.defineProperty(e,"convertToDiagramModel",{enumerable:!0,get:function(){return t.convertToDiagramModel}}),e.Diagram=k,e.DiagramConnectionTooltip=m,e.DiagramEditor=e=>{var n,o;const{diagram:l,toolbars:i={}}=e,c={position:"top",tools:Cn,shapes:e.shapes},s={tools:Tn,shapes:e.shapes},u={tools:Dn},p={tools:En,fontNames:e.fontTypes,fontSizes:e.fontSizes},{diagram:g=c,shape:m=s,connection:f=u,text:h=p}=i,b="boolean"==typeof g?g?c:{position:"top",tools:[]}:g,v="boolean"==typeof m?m?s:{tools:[]}:m,y="boolean"==typeof f?f?u:{tools:[]}:f,S="boolean"==typeof h?h?p:{tools:[]}:h,{controller:C,snapshot:T}=(e=>{const[n,o]=d.useState(null);d.useEffect(()=>{if(!e)return void o(null);const n=new t.DiagramEditorController({diagram:e});return o(n),()=>{n.destroy(),o(e=>e===n?null:e)}},[e]);const a=d.useCallback(e=>n?n.subscribe(e):P,[n]),r=d.useCallback(()=>n?n.getSnapshot():t.emptyDiagramEditorSnapshot,[n]),l=d.useSyncExternalStore(a,r,()=>t.emptyDiagramEditorSnapshot);return{controller:n,snapshot:l}})(l),D=L(C),E=L(C),w=L(C),k=d.useRef(null),[M,O]=d.useState(null),x=d.useRef(null),[R,z]=d.useState(null),j=d.useRef(null),F=r.useLocalization(),B=T.editingSession?`${T.editingSession.target.type}:${T.editingSession.target.id}`:null,N=d.useCallback(e=>{var t;null==(t=j.current)||t.call(j),j.current=e&&C?C.registerSurface(e):null},[C]),K=d.useCallback(e=>{k.current=e,w(e)},[w]),V=d.useCallback(()=>{var e;const t=null==(e=k.current)?void 0:e.querySelector('[tabindex]:not([tabindex="-1"]), button:not([disabled]), .k-dropdownlist, .k-colorpicker');return!!t&&(t.focus({preventScroll:!0}),!0)},[]);d.useEffect(()=>()=>{var e;null==(e=j.current)||e.call(j),j.current=null},[]),d.useLayoutEffect(()=>{var e;if(!C||!T.editingSession)return O(null),x.current=null,z(null),null==C||C.setTextEditingAdapter(null),null==(e=j.current)||e.call(j),void(j.current=null);const t=Yn(T.editingSession.item._contentVisual.options);return O(t),x.current=t,z(null),C.setTextEditingAdapter({getCommitPayload:()=>{const e=x.current;return e?{content:Un(e),isEmpty:Qn(e),textContent:e.textContent}:null}}),()=>{C.setTextEditingAdapter(null)}},[C,B,T.editingSession]);const H=T.editingSession?T.editingSession.item._contentVisual.options:{},U=T.selectedShape,q=T.selectedConnection,$=null!=(n=null==l?void 0:l.element)?n:null,W=d.useMemo(()=>t.getContextToolbarAnchors(U,T.anchors.shape),[U,T.anchors.shape]),_=d.useMemo(()=>t.getContextToolbarAnchors(q,T.anchors.connection),[q,T.anchors.connection]),Z=d.useMemo(()=>!!(U&&W.base&&T.visibility.shape&&v.tools.length>0&&t.isDiagramItemVisibleInViewport(U,$)),[U,W.base,T.visibility.shape,v.tools.length,$]),J=d.useMemo(()=>!!(q&&_.base&&T.visibility.connection&&y.tools.length>0&&t.isDiagramItemVisibleInViewport(q,$)),[q,_.base,T.visibility.connection,y.tools.length,$]),Y=d.useCallback(e=>{"Tab"!==e.key||e.shiftKey||R&&(e.preventDefault(),R.view.focus())},[R]);return C?d.createElement(I,{value:{controller:C,snapshot:T}},d.createElement(d.Fragment,null,d.createElement("div",{style:{position:"relative"}},d.createElement(Ln,{diagram:l,visible:T.visibility.main&&b.tools.length>0,...b}),d.createElement(Hn,{show:Z,baseAnchor:W.base,fallbackAnchor:W.fallback,boundaryElement:$},d.createElement("div",{ref:D,className:Tt},d.createElement(pn,{shape:U,...v}))),d.createElement(Hn,{show:J,baseAnchor:_.base,fallbackAnchor:_.fallback,boundaryElement:$},d.createElement("div",{ref:E,className:Tt},d.createElement(In,{connection:q,...y}))),d.createElement(Hn,{show:!!(T.editingSession&&R&&M&&T.anchors.textEditing&&T.visibility.textEditing&&S.tools.length>0),baseAnchor:T.anchors.textEditing?{left:T.anchors.textEditing.x,top:T.anchors.textEditing.y}:null},d.createElement("div",{ref:K,className:Tt,onKeyDown:Y},d.createElement(Gt,{editorView:R,editItem:null==(o=T.editingSession)?void 0:o.item,defaultStyles:H,...S})))),T.editingSession&&M&&d.createElement(a.Editor,{value:M,onChange:e=>{O(e.value),x.current=e.value,R&&z({view:R.view})},defaultEditMode:"div",className:"k-diagram-rich-text-editor",style:{background:"transparent"},onMount:e=>{var t;const n=e.target;if(!(T.editingSession&&n.element&&C&&M))return;const o=n.element;N(o);const{item:r}=T.editingSession,l="Shape"===r.name?r._contentVisual.padding():{top:0,bottom:0,left:0,right:0},i=e.dom,c=F.toLanguageString(A,dt[A]);let s;const u=new a.ProseMirror.Plugin({filterTransaction:e=>(_n(Zn,[e.doc.attrs.alignment,i,l]),z({view:s}),!0)}),p=a.ProseMirror.EditorState.create({doc:M,schema:Jn,plugins:[Xn(),...e.viewProps.state.plugins,a.EditorUtils.placeholder(c),u]});return s=new Gn({mount:i},{...e.viewProps,state:p,handleKeyDown:(t,n)=>{var o,a,r,l;return"Escape"===n.key?(C.handleKeyDown(n),n.defaultPrevented||!0===(null==(a=(o=e.viewProps).handleKeyDown)?void 0:a.call(o,t,n))):"F10"===n.key&&n.altKey&&V()?(n.preventDefault(),!0):null==(l=(r=e.viewProps).handleKeyDown)?void 0:l.call(r,t,n)}}),Wn(r,o,c),s.focus(),_n(Zn,[null==(t=r.options.content)?void 0:t.align,i,l]),z({view:s}),s}}))):null},e.DiagramShapeTooltip=f,e.defaultTextToolbarTools=En});

package/hooks/useDiagramTooltip.js

@@ -5,4 +5,4 @@
  * Licensed under commercial license. See LICENSE.md in the package root for more information
  *-------------------------------------------------------------------------------------------
  */
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const et=require("react"),G=require("@progress/kendo-diagram-common");function nt(i){const c=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(i){for(const s in i)if(s!=="default"){const e=Object.getOwnPropertyDescriptor(i,s);Object.defineProperty(c,s,e.get?e:{enumerable:!0,get:()=>i[s]})}}return c.default=i,Object.freeze(c)}const u=nt(et),H=9999,st={width:0,height:0},F={x:0,y:0},J={visible:!1,content:null,style:{}},it=i=>{const{shapeTooltipRender:c,connectionTooltipRender:s,diagramRef:e,wrapperRef:g,onTooltipShow:d,onTooltipHide:f}=i,[D,R]=u.useState(J),p=u.useCallback(()=>{h.current=null,R(J)},[]),x=u.useRef(null),h=u.useRef(null);u.useLayoutEffect(()=>{const o=x.current,t=h.current;if(!D.visible||!t||!o)return;const{width:n,height:l}=o.getBoundingClientRect();if(n===0&&l===0)return;h.current=null;const m=G.placeTooltip({hovered:t.item,mouse:t.mouse,shapes:t.shapes,connections:t.connections,diagramRect:t.diagramRect,zoom:t.zoom,pan:t.pan,tooltipSize:{width:n,height:l},viewportBounds:t.viewportBounds});R(I=>({...I,style:{position:"fixed",left:m.left+t.scrollX,top:m.top+t.scrollY,zIndex:H}}))});const K=u.useCallback((o,t)=>{var j,k,X,Y,v,A,M,Z,q,V;p();const{dataItem:n}=o.item,l=o.item.name==="Shape",m=o.item.name==="Connection",I=l?(k=(j=t.shapeDefaults)==null?void 0:j.tooltip)==null?void 0:k.visible:(Y=(X=t.connectionDefaults)==null?void 0:X.tooltip)==null?void 0:Y.visible,y=(v=n.tooltip)==null?void 0:v.visible,C=l?t.shapes:t.connections,w=C==null?void 0:C.find(a=>{var W;return(a==null?void 0:a.id)===((W=o==null?void 0:o.item)==null?void 0:W.id)}),U=w==null?void 0:w.tooltipText,T=n.tooltipText||U;if(!T||!(y!==!1&&(I||y)))return;const S=T===n.tooltipText?n:{...n,tooltipText:T};let b;l&&c?b=c(S):m&&s?b=s(S):b=T;const $=l?(M=(A=t.shapeDefaults)==null?void 0:A.tooltip)==null?void 0:M.cssClass:(q=(Z=t.connectionDefaults)==null?void 0:Z.tooltip)==null?void 0:q.cssClass,tt=(V=n.tooltip)==null?void 0:V.cssClass,ot=$||tt;if(!e.current||!g.current)return;const z=g.current,r=z.ownerDocument.defaultView;if(!r)return;const O=e.current.connections.map(a=>a.allPoints()),_=e.current.shapes.map(a=>a.bounds()),E=z.getBoundingClientRect(),P=e.current.pan(),B=e.current.zoom(),L=new DOMRect(F.x,F.y,r.innerWidth,r.innerHeight),N=G.placeTooltip({hovered:o.item,mouse:o.point,shapes:_,connections:O,diagramRect:E,zoom:B,pan:P,tooltipSize:st,viewportBounds:L});h.current={item:o.item,mouse:o.point,shapes:_,connections:O,diagramRect:E,zoom:B,pan:P,viewportBounds:L,scrollX:r.scrollX,scrollY:r.scrollY},R({visible:!0,content:b,className:ot,style:{position:"fixed",left:N.left+r.scrollX,top:N.top+r.scrollY,zIndex:H,visibility:"hidden"}}),d==null||d({...S})},[c,s,p,d,e,g]),Q=u.useCallback(o=>{p(),f==null||f({...o})},[p,f]);return{tooltipState:D,tooltipElRef:x,hideTooltip:p,handleTooltipShow:K,handleTooltipHide:Q}};exports.useDiagramTooltip=it;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const et=require("react"),G=require("@progress/kendo-diagram-common");function nt(i){const c=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(i){for(const s in i)if(s!=="default"){const n=Object.getOwnPropertyDescriptor(i,s);Object.defineProperty(c,s,n.get?n:{enumerable:!0,get:()=>i[s]})}}return c.default=i,Object.freeze(c)}const u=nt(et),H=9999,st={width:0,height:0},F={x:0,y:0},J={visible:!1,content:null,style:{}},it=i=>{const{shapeTooltipRender:c,connectionTooltipRender:s,diagramRef:n,wrapperRef:g,onTooltipShow:d,onTooltipHide:f}=i,[D,R]=u.useState(J),p=u.useCallback(()=>{h.current=null,R(J)},[]),x=u.useRef(null),h=u.useRef(null);u.useLayoutEffect(()=>{const o=x.current,t=h.current;if(!D.visible||!t||!o)return;const{width:e,height:l}=o.getBoundingClientRect();if(e===0&&l===0)return;h.current=null;const m=G.placeTooltip({hovered:t.item,mouse:t.mouse,shapes:t.shapes,connections:t.connections,diagramRect:t.diagramRect,zoom:t.zoom,pan:t.pan,tooltipSize:{width:e,height:l},viewportBounds:t.viewportBounds});R(C=>({...C,style:{position:"fixed",left:m.left+t.scrollX,top:m.top+t.scrollY,zIndex:H}}))});const K=u.useCallback((o,t)=>{var j,k,X,Y,v,A,M,Z,q,V;p();const{dataItem:e}=o.item,l=o.item.name==="Shape",m=o.item.name==="Connection",C=l?(k=(j=t.shapeDefaults)==null?void 0:j.tooltip)==null?void 0:k.visible:(Y=(X=t.connectionDefaults)==null?void 0:X.tooltip)==null?void 0:Y.visible,y=e&&((v=e.tooltip)==null?void 0:v.visible),w=l?t.shapes:t.connections,I=w==null?void 0:w.find(a=>{var W;return(a==null?void 0:a.id)===((W=o==null?void 0:o.item)==null?void 0:W.id)}),U=I==null?void 0:I.tooltipText,T=(e==null?void 0:e.tooltipText)||U;if(!T||!(y!==!1&&(C||y)))return;const S=T===e.tooltipText?e:{...e,tooltipText:T};let b;l&&c?b=c(S):m&&s?b=s(S):b=T;const $=l?(M=(A=t.shapeDefaults)==null?void 0:A.tooltip)==null?void 0:M.cssClass:(q=(Z=t.connectionDefaults)==null?void 0:Z.tooltip)==null?void 0:q.cssClass,tt=(V=e.tooltip)==null?void 0:V.cssClass,ot=$||tt;if(!n.current||!g.current)return;const z=g.current,r=z.ownerDocument.defaultView;if(!r)return;const O=n.current.connections.map(a=>a.allPoints()),_=n.current.shapes.map(a=>a.bounds()),E=z.getBoundingClientRect(),P=n.current.pan(),B=n.current.zoom(),L=new DOMRect(F.x,F.y,r.innerWidth,r.innerHeight),N=G.placeTooltip({hovered:o.item,mouse:o.point,shapes:_,connections:O,diagramRect:E,zoom:B,pan:P,tooltipSize:st,viewportBounds:L});h.current={item:o.item,mouse:o.point,shapes:_,connections:O,diagramRect:E,zoom:B,pan:P,viewportBounds:L,scrollX:r.scrollX,scrollY:r.scrollY},R({visible:!0,content:b,className:ot,style:{position:"fixed",left:N.left+r.scrollX,top:N.top+r.scrollY,zIndex:H,visibility:"hidden"}}),d==null||d({...S})},[c,s,p,d,n,g]),Q=u.useCallback(o=>{p(),f==null||f({...o})},[p,f]);return{tooltipState:D,tooltipElRef:x,hideTooltip:p,handleTooltipShow:K,handleTooltipHide:Q}};exports.useDiagramTooltip=it;

package/hooks/useDiagramTooltip.mjs

@@ -7,58 +7,58 @@
  */
 import * as l from "react";
 import { placeTooltip as M } from "@progress/kendo-diagram-common";
-const j = 9999, et = { width: 0, height: 0 }, q = { x: 0, y: 0 }, F = { visible: !1, content: null, style: {} }, it = (J) => {
-  const { shapeTooltipRender: m, connectionTooltipRender: T, diagramRef: c, wrapperRef: I, onTooltipShow: a, onTooltipHide: p } = J, [S, R] = l.useState(F), r = l.useCallback(() => {
-    u.current = null, R(F);
+const j = 9999, eo = { width: 0, height: 0 }, q = { x: 0, y: 0 }, F = { visible: !1, content: null, style: {} }, io = (J) => {
+  const { shapeTooltipRender: m, connectionTooltipRender: T, diagramRef: c, wrapperRef: R, onTooltipShow: a, onTooltipHide: p } = J, [S, C] = l.useState(F), r = l.useCallback(() => {
+    u.current = null, C(F);
   }, []), g = l.useRef(null), u = l.useRef(null);
   l.useLayoutEffect(() => {
-    const o = g.current, t = u.current;
-    if (!S.visible || !t || !o)
+    const t = g.current, o = u.current;
+    if (!S.visible || !o || !t)
       return;
-    const { width: e, height: s } = o.getBoundingClientRect();
+    const { width: e, height: s } = t.getBoundingClientRect();
     if (e === 0 && s === 0)
       return;
     u.current = null;
     const d = M({
-      hovered: t.item,
-      mouse: t.mouse,
-      shapes: t.shapes,
-      connections: t.connections,
-      diagramRect: t.diagramRect,
-      zoom: t.zoom,
-      pan: t.pan,
+      hovered: o.item,
+      mouse: o.mouse,
+      shapes: o.shapes,
+      connections: o.connections,
+      diagramRect: o.diagramRect,
+      zoom: o.zoom,
+      pan: o.pan,
       tooltipSize: { width: e, height: s },
-      viewportBounds: t.viewportBounds
+      viewportBounds: o.viewportBounds
     });
-    R((C) => ({
-      ...C,
+    C((I) => ({
+      ...I,
       style: {
         position: "fixed",
-        left: d.left + t.scrollX,
-        top: d.top + t.scrollY,
+        left: d.left + o.scrollX,
+        top: d.top + o.scrollY,
         zIndex: j
       }
     }));
   });
   const K = l.useCallback(
-    (o, t) => {
+    (t, o) => {
       var X, O, Y, k, A, Z, V, W, v, G;
       r();
-      const { dataItem: e } = o.item, s = o.item.name === "Shape", d = o.item.name === "Connection", C = s ? (O = (X = t.shapeDefaults) == null ? void 0 : X.tooltip) == null ? void 0 : O.visible : (k = (Y = t.connectionDefaults) == null ? void 0 : Y.tooltip) == null ? void 0 : k.visible, z = (A = e.tooltip) == null ? void 0 : A.visible, w = s ? t.shapes : t.connections, b = w == null ? void 0 : w.find(
+      const { dataItem: e } = t.item, s = t.item.name === "Shape", d = t.item.name === "Connection", I = s ? (O = (X = o.shapeDefaults) == null ? void 0 : X.tooltip) == null ? void 0 : O.visible : (k = (Y = o.connectionDefaults) == null ? void 0 : Y.tooltip) == null ? void 0 : k.visible, z = e && ((A = e.tooltip) == null ? void 0 : A.visible), w = s ? o.shapes : o.connections, b = w == null ? void 0 : w.find(
         (i) => {
           var H;
-          return (i == null ? void 0 : i.id) === ((H = o == null ? void 0 : o.item) == null ? void 0 : H.id);
+          return (i == null ? void 0 : i.id) === ((H = t == null ? void 0 : t.item) == null ? void 0 : H.id);
         }
-      ), U = b == null ? void 0 : b.tooltipText, f = e.tooltipText || U;
-      if (!f || !(z !== !1 && (C || z)))
+      ), U = b == null ? void 0 : b.tooltipText, f = (e == null ? void 0 : e.tooltipText) || U;
+      if (!f || !(z !== !1 && (I || z)))
         return;
       const x = f === e.tooltipText ? e : { ...e, tooltipText: f };
       let h;
       s && m ? h = m(x) : d && T ? h = T(x) : h = f;
-      const $ = s ? (V = (Z = t.shapeDefaults) == null ? void 0 : Z.tooltip) == null ? void 0 : V.cssClass : (v = (W = t.connectionDefaults) == null ? void 0 : W.tooltip) == null ? void 0 : v.cssClass, tt = (G = e.tooltip) == null ? void 0 : G.cssClass, ot = $ || tt;
-      if (!c.current || !I.current)
+      const $ = s ? (V = (Z = o.shapeDefaults) == null ? void 0 : Z.tooltip) == null ? void 0 : V.cssClass : (v = (W = o.connectionDefaults) == null ? void 0 : W.tooltip) == null ? void 0 : v.cssClass, oo = (G = e.tooltip) == null ? void 0 : G.cssClass, to = $ || oo;
+      if (!c.current || !R.current)
         return;
-      const D = I.current, n = D.ownerDocument.defaultView;
+      const D = R.current, n = D.ownerDocument.defaultView;
       if (!n)
         return;
       const E = c.current.connections.map((i) => i.allPoints()), _ = c.current.shapes.map((i) => i.bounds()), y = D.getBoundingClientRect(), B = c.current.pan(), L = c.current.zoom(), P = new DOMRect(
@@ -67,19 +67,19 @@ const j = 9999, et = { width: 0, height: 0 }, q = { x: 0, y: 0 }, F = { visible:
         n.innerWidth,
         n.innerHeight
       ), N = M({
-        hovered: o.item,
-        mouse: o.point,
+        hovered: t.item,
+        mouse: t.point,
         shapes: _,
         connections: E,
         diagramRect: y,
         zoom: L,
         pan: B,
-        tooltipSize: et,
+        tooltipSize: eo,
         viewportBounds: P
       });
       u.current = {
-        item: o.item,
-        mouse: o.point,
+        item: t.item,
+        mouse: t.point,
         shapes: _,
         connections: E,
         diagramRect: y,
@@ -88,10 +88,10 @@ const j = 9999, et = { width: 0, height: 0 }, q = { x: 0, y: 0 }, F = { visible:
         viewportBounds: P,
         scrollX: n.scrollX,
         scrollY: n.scrollY
-      }, R({
+      }, C({
         visible: !0,
         content: h,
-        className: ot,
+        className: to,
         style: {
           position: "fixed",
           left: N.left + n.scrollX,
@@ -102,15 +102,15 @@ const j = 9999, et = { width: 0, height: 0 }, q = { x: 0, y: 0 }, F = { visible:
         }
       }), a == null || a({ ...x });
     },
-    [m, T, r, a, c, I]
+    [m, T, r, a, c, R]
   ), Q = l.useCallback(
-    (o) => {
-      r(), p == null || p({ ...o });
+    (t) => {
+      r(), p == null || p({ ...t });
     },
     [r, p]
   );
   return { tooltipState: S, tooltipElRef: g, hideTooltip: r, handleTooltipShow: K, handleTooltipHide: Q };
 };
 export {
-  it as useDiagramTooltip
+  io as useDiagramTooltip
 };

package/index.d.mts

@@ -5,9 +5,10 @@
  * Licensed under commercial license. See LICENSE.md in the package root for more information
  *-------------------------------------------------------------------------------------------
  */
-export type { ShapeDefaultsBase, ConnectionDefaultsBase, ShapeOptionsBase, ConnectionOptionsBase, ConnectionDefaultsEditable, ConnectionPointsEditable, ConnectionEditingPoint, ShapeConnector, ShapeContent, EditableDefaults, ShapeDefaultsEditable, ShapeEditable, ShapeFillGradientStop, ShapeFillGradient, ShapeFill, ShapeHover, ShapeRotation, ShapeRichTextContent, ConnectionRichTextContent, ConnectionType, Fill, Stroke, DashType, ShapeType, ShapeConnectorHover, ShapeConnectorDefaults, Selectable, Pannable, LayoutGrid, DiagramLayout, DiagramEditable, Coordinate, DiagramDragEvent, DiagramDomEvent, DiagramZoomStartEvent, DiagramZoomEndEvent, DiagramPanEvent, DiagramSelectEvent, DiagramChangeEvent, DiagramItemBoundsChangeEvent, DiagramState, BringIntoViewOptions, SelectionOptions, Direction, ConnectionCap, ConnectionContent, DiagramMapping, ConvertResult, ConnectionMapping, ShapeMapping, MapSpec, FromPathOrFn } from '@progress/kendo-diagram-common';
-export { Shape, Connection, Connector, Point, Rect, Circle, Group, FlowchartShapeType, ArrowMarker, CircleMarker, Collate, DataInputOutput, DataStorage, Database, Decision, Delay, DirectAccessStorage, Display, Document, MultipleDocuments, Extract, Image, InternalStorage, Layout, Line, LogicalOr, ManualInputOutput, ManualOperation, Merge, MultiLineTextBlock, OffPageConnector, OnPageConnector, Path, Polyline, PredefinedProcess, Preparation, Process, Rectangle, Sort, SummingJunction, Terminator, TextBlock, MarkerType, convertToDiagramModel } from '@progress/kendo-diagram-common';
+export type { ShapeDefaultsBase, ConnectionDefaultsBase, ShapeOptionsBase, ConnectionOptionsBase, ConnectionDefaultsEditable, ConnectionPointsEditable, ConnectionEditingPoint, ShapeConnector, ShapeContent, EditableDefaults, ShapeDefaultsEditable, ShapeEditable, ShapeFillGradientStop, ShapeFillGradient, ShapeFill, ShapeHover, ShapeRotation, ShapeRichTextContent, ConnectionRichTextContent, ConnectionType, Fill, Stroke, DashType, ShapeType, ShapeConnectorHover, ShapeConnectorDefaults, Selectable, Pannable, LayoutGrid, DiagramLayout, DiagramEditable, Coordinate, DiagramDragEvent, DiagramDomEvent, DiagramZoomStartEvent, DiagramZoomEndEvent, DiagramPanEvent, DiagramSelectEvent, DiagramChangeEvent, DiagramItemBoundsChangeEvent, DiagramState, BringIntoViewOptions, SelectionOptions, Direction, ConnectionCap, ConnectionContent, DiagramMapping, ConvertResult, ConnectionMapping, ShapeMapping, MapSpec, FromPathOrFn, ConnectionEndpoint, ConnectionEndpointDefinition, ConnectionResolvedEndpoint, ConnectionLock, UndoRedoService, DiagramOptions, AccessibilityOptions, NavigationOptions, DiagramTooltip, EventNames, EventHandlers, Handler, DiagramSelectionItem, DiagramConnectionEndpoint, PointLike, ShapeBoundsKind } from '@progress/kendo-diagram-common';
+export { Shape, Connection, Connector, Point, Rect, Circle, Group, FlowchartShapeType, MarkerType, ArrowMarker, CircleMarker, Collate, DataInputOutput, DataStorage, Database, Decision, Delay, DirectAccessStorage, Display, Document, MultipleDocuments, Extract, Image, InternalStorage, Layout, Line, LogicalOr, ManualInputOutput, ManualOperation, Merge, MultiLineTextBlock, OffPageConnector, OnPageConnector, Path, Polyline, PredefinedProcess, Preparation, Process, Rectangle, Sort, SummingJunction, Terminator, TextBlock, CapType, PathDefiner, Rotation, Diagram as DiagramWidget, convertToDiagramModel } from '@progress/kendo-diagram-common';
 export * from './Diagram.js';
 export * from './DiagramConnectionTooltip.js';
 export * from './DiagramShapeTooltip.js';
 export * from './interfaces/index.js';
+export * from './rich-text-editing/index.js';

package/index.d.ts

@@ -5,9 +5,10 @@
  * Licensed under commercial license. See LICENSE.md in the package root for more information
  *-------------------------------------------------------------------------------------------
  */
-export type { ShapeDefaultsBase, ConnectionDefaultsBase, ShapeOptionsBase, ConnectionOptionsBase, ConnectionDefaultsEditable, ConnectionPointsEditable, ConnectionEditingPoint, ShapeConnector, ShapeContent, EditableDefaults, ShapeDefaultsEditable, ShapeEditable, ShapeFillGradientStop, ShapeFillGradient, ShapeFill, ShapeHover, ShapeRotation, ShapeRichTextContent, ConnectionRichTextContent, ConnectionType, Fill, Stroke, DashType, ShapeType, ShapeConnectorHover, ShapeConnectorDefaults, Selectable, Pannable, LayoutGrid, DiagramLayout, DiagramEditable, Coordinate, DiagramDragEvent, DiagramDomEvent, DiagramZoomStartEvent, DiagramZoomEndEvent, DiagramPanEvent, DiagramSelectEvent, DiagramChangeEvent, DiagramItemBoundsChangeEvent, DiagramState, BringIntoViewOptions, SelectionOptions, Direction, ConnectionCap, ConnectionContent, DiagramMapping, ConvertResult, ConnectionMapping, ShapeMapping, MapSpec, FromPathOrFn } from '@progress/kendo-diagram-common';
-export { Shape, Connection, Connector, Point, Rect, Circle, Group, FlowchartShapeType, ArrowMarker, CircleMarker, Collate, DataInputOutput, DataStorage, Database, Decision, Delay, DirectAccessStorage, Display, Document, MultipleDocuments, Extract, Image, InternalStorage, Layout, Line, LogicalOr, ManualInputOutput, ManualOperation, Merge, MultiLineTextBlock, OffPageConnector, OnPageConnector, Path, Polyline, PredefinedProcess, Preparation, Process, Rectangle, Sort, SummingJunction, Terminator, TextBlock, MarkerType, convertToDiagramModel } from '@progress/kendo-diagram-common';
+export type { ShapeDefaultsBase, ConnectionDefaultsBase, ShapeOptionsBase, ConnectionOptionsBase, ConnectionDefaultsEditable, ConnectionPointsEditable, ConnectionEditingPoint, ShapeConnector, ShapeContent, EditableDefaults, ShapeDefaultsEditable, ShapeEditable, ShapeFillGradientStop, ShapeFillGradient, ShapeFill, ShapeHover, ShapeRotation, ShapeRichTextContent, ConnectionRichTextContent, ConnectionType, Fill, Stroke, DashType, ShapeType, ShapeConnectorHover, ShapeConnectorDefaults, Selectable, Pannable, LayoutGrid, DiagramLayout, DiagramEditable, Coordinate, DiagramDragEvent, DiagramDomEvent, DiagramZoomStartEvent, DiagramZoomEndEvent, DiagramPanEvent, DiagramSelectEvent, DiagramChangeEvent, DiagramItemBoundsChangeEvent, DiagramState, BringIntoViewOptions, SelectionOptions, Direction, ConnectionCap, ConnectionContent, DiagramMapping, ConvertResult, ConnectionMapping, ShapeMapping, MapSpec, FromPathOrFn, ConnectionEndpoint, ConnectionEndpointDefinition, ConnectionResolvedEndpoint, ConnectionLock, UndoRedoService, DiagramOptions, AccessibilityOptions, NavigationOptions, DiagramTooltip, EventNames, EventHandlers, Handler, DiagramSelectionItem, DiagramConnectionEndpoint, PointLike, ShapeBoundsKind } from '@progress/kendo-diagram-common';
+export { Shape, Connection, Connector, Point, Rect, Circle, Group, FlowchartShapeType, MarkerType, ArrowMarker, CircleMarker, Collate, DataInputOutput, DataStorage, Database, Decision, Delay, DirectAccessStorage, Display, Document, MultipleDocuments, Extract, Image, InternalStorage, Layout, Line, LogicalOr, ManualInputOutput, ManualOperation, Merge, MultiLineTextBlock, OffPageConnector, OnPageConnector, Path, Polyline, PredefinedProcess, Preparation, Process, Rectangle, Sort, SummingJunction, Terminator, TextBlock, CapType, PathDefiner, Rotation, Diagram as DiagramWidget, convertToDiagramModel } from '@progress/kendo-diagram-common';
 export * from './Diagram.js';
 export * from './DiagramConnectionTooltip.js';
 export * from './DiagramShapeTooltip.js';
 export * from './interfaces/index.js';
+export * from './rich-text-editing/index.js';

package/index.js

@@ -5,4 +5,4 @@
  * Licensed under commercial license. See LICENSE.md in the package root for more information
  *-------------------------------------------------------------------------------------------
  */
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("@progress/kendo-diagram-common"),t=require("./Diagram.js"),r=require("./DiagramConnectionTooltip.js"),n=require("./DiagramShapeTooltip.js");Object.defineProperty(exports,"ArrowMarker",{enumerable:!0,get:()=>e.ArrowMarker});Object.defineProperty(exports,"Circle",{enumerable:!0,get:()=>e.Circle});Object.defineProperty(exports,"CircleMarker",{enumerable:!0,get:()=>e.CircleMarker});Object.defineProperty(exports,"Collate",{enumerable:!0,get:()=>e.Collate});Object.defineProperty(exports,"Connection",{enumerable:!0,get:()=>e.Connection});Object.defineProperty(exports,"Connector",{enumerable:!0,get:()=>e.Connector});Object.defineProperty(exports,"DataInputOutput",{enumerable:!0,get:()=>e.DataInputOutput});Object.defineProperty(exports,"DataStorage",{enumerable:!0,get:()=>e.DataStorage});Object.defineProperty(exports,"Database",{enumerable:!0,get:()=>e.Database});Object.defineProperty(exports,"Decision",{enumerable:!0,get:()=>e.Decision});Object.defineProperty(exports,"Delay",{enumerable:!0,get:()=>e.Delay});Object.defineProperty(exports,"DirectAccessStorage",{enumerable:!0,get:()=>e.DirectAccessStorage});Object.defineProperty(exports,"Display",{enumerable:!0,get:()=>e.Display});Object.defineProperty(exports,"Document",{enumerable:!0,get:()=>e.Document});Object.defineProperty(exports,"Extract",{enumerable:!0,get:()=>e.Extract});Object.defineProperty(exports,"FlowchartShapeType",{enumerable:!0,get:()=>e.FlowchartShapeType});Object.defineProperty(exports,"Group",{enumerable:!0,get:()=>e.Group});Object.defineProperty(exports,"Image",{enumerable:!0,get:()=>e.Image});Object.defineProperty(exports,"InternalStorage",{enumerable:!0,get:()=>e.InternalStorage});Object.defineProperty(exports,"Layout",{enumerable:!0,get:()=>e.Layout});Object.defineProperty(exports,"Line",{enumerable:!0,get:()=>e.Line});Object.defineProperty(exports,"LogicalOr",{enumerable:!0,get:()=>e.LogicalOr});Object.defineProperty(exports,"ManualInputOutput",{enumerable:!0,get:()=>e.ManualInputOutput});Object.defineProperty(exports,"ManualOperation",{enumerable:!0,get:()=>e.ManualOperation});Object.defineProperty(exports,"MarkerType",{enumerable:!0,get:()=>e.MarkerType});Object.defineProperty(exports,"Merge",{enumerable:!0,get:()=>e.Merge});Object.defineProperty(exports,"MultiLineTextBlock",{enumerable:!0,get:()=>e.MultiLineTextBlock});Object.defineProperty(exports,"MultipleDocuments",{enumerable:!0,get:()=>e.MultipleDocuments});Object.defineProperty(exports,"OffPageConnector",{enumerable:!0,get:()=>e.OffPageConnector});Object.defineProperty(exports,"OnPageConnector",{enumerable:!0,get:()=>e.OnPageConnector});Object.defineProperty(exports,"Path",{enumerable:!0,get:()=>e.Path});Object.defineProperty(exports,"Point",{enumerable:!0,get:()=>e.Point});Object.defineProperty(exports,"Polyline",{enumerable:!0,get:()=>e.Polyline});Object.defineProperty(exports,"PredefinedProcess",{enumerable:!0,get:()=>e.PredefinedProcess});Object.defineProperty(exports,"Preparation",{enumerable:!0,get:()=>e.Preparation});Object.defineProperty(exports,"Process",{enumerable:!0,get:()=>e.Process});Object.defineProperty(exports,"Rect",{enumerable:!0,get:()=>e.Rect});Object.defineProperty(exports,"Rectangle",{enumerable:!0,get:()=>e.Rectangle});Object.defineProperty(exports,"Shape",{enumerable:!0,get:()=>e.Shape});Object.defineProperty(exports,"Sort",{enumerable:!0,get:()=>e.Sort});Object.defineProperty(exports,"SummingJunction",{enumerable:!0,get:()=>e.SummingJunction});Object.defineProperty(exports,"Terminator",{enumerable:!0,get:()=>e.Terminator});Object.defineProperty(exports,"TextBlock",{enumerable:!0,get:()=>e.TextBlock});Object.defineProperty(exports,"convertToDiagramModel",{enumerable:!0,get:()=>e.convertToDiagramModel});exports.Diagram=t.Diagram;exports.DiagramConnectionTooltip=r.DiagramConnectionTooltip;exports.DiagramShapeTooltip=n.DiagramShapeTooltip;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("@progress/kendo-diagram-common"),t=require("./Diagram.js"),r=require("./DiagramConnectionTooltip.js"),n=require("./DiagramShapeTooltip.js"),a=require("./rich-text-editing/DiagramEditor.js"),o=require("./rich-text-editing/default-toolbar-tools.js");Object.defineProperty(exports,"ArrowMarker",{enumerable:!0,get:()=>e.ArrowMarker});Object.defineProperty(exports,"CapType",{enumerable:!0,get:()=>e.CapType});Object.defineProperty(exports,"Circle",{enumerable:!0,get:()=>e.Circle});Object.defineProperty(exports,"CircleMarker",{enumerable:!0,get:()=>e.CircleMarker});Object.defineProperty(exports,"Collate",{enumerable:!0,get:()=>e.Collate});Object.defineProperty(exports,"Connection",{enumerable:!0,get:()=>e.Connection});Object.defineProperty(exports,"Connector",{enumerable:!0,get:()=>e.Connector});Object.defineProperty(exports,"DataInputOutput",{enumerable:!0,get:()=>e.DataInputOutput});Object.defineProperty(exports,"DataStorage",{enumerable:!0,get:()=>e.DataStorage});Object.defineProperty(exports,"Database",{enumerable:!0,get:()=>e.Database});Object.defineProperty(exports,"Decision",{enumerable:!0,get:()=>e.Decision});Object.defineProperty(exports,"Delay",{enumerable:!0,get:()=>e.Delay});Object.defineProperty(exports,"DiagramWidget",{enumerable:!0,get:()=>e.Diagram});Object.defineProperty(exports,"DirectAccessStorage",{enumerable:!0,get:()=>e.DirectAccessStorage});Object.defineProperty(exports,"Display",{enumerable:!0,get:()=>e.Display});Object.defineProperty(exports,"Document",{enumerable:!0,get:()=>e.Document});Object.defineProperty(exports,"Extract",{enumerable:!0,get:()=>e.Extract});Object.defineProperty(exports,"FlowchartShapeType",{enumerable:!0,get:()=>e.FlowchartShapeType});Object.defineProperty(exports,"Group",{enumerable:!0,get:()=>e.Group});Object.defineProperty(exports,"Image",{enumerable:!0,get:()=>e.Image});Object.defineProperty(exports,"InternalStorage",{enumerable:!0,get:()=>e.InternalStorage});Object.defineProperty(exports,"Layout",{enumerable:!0,get:()=>e.Layout});Object.defineProperty(exports,"Line",{enumerable:!0,get:()=>e.Line});Object.defineProperty(exports,"LogicalOr",{enumerable:!0,get:()=>e.LogicalOr});Object.defineProperty(exports,"ManualInputOutput",{enumerable:!0,get:()=>e.ManualInputOutput});Object.defineProperty(exports,"ManualOperation",{enumerable:!0,get:()=>e.ManualOperation});Object.defineProperty(exports,"MarkerType",{enumerable:!0,get:()=>e.MarkerType});Object.defineProperty(exports,"Merge",{enumerable:!0,get:()=>e.Merge});Object.defineProperty(exports,"MultiLineTextBlock",{enumerable:!0,get:()=>e.MultiLineTextBlock});Object.defineProperty(exports,"MultipleDocuments",{enumerable:!0,get:()=>e.MultipleDocuments});Object.defineProperty(exports,"OffPageConnector",{enumerable:!0,get:()=>e.OffPageConnector});Object.defineProperty(exports,"OnPageConnector",{enumerable:!0,get:()=>e.OnPageConnector});Object.defineProperty(exports,"Path",{enumerable:!0,get:()=>e.Path});Object.defineProperty(exports,"PathDefiner",{enumerable:!0,get:()=>e.PathDefiner});Object.defineProperty(exports,"Point",{enumerable:!0,get:()=>e.Point});Object.defineProperty(exports,"Polyline",{enumerable:!0,get:()=>e.Polyline});Object.defineProperty(exports,"PredefinedProcess",{enumerable:!0,get:()=>e.PredefinedProcess});Object.defineProperty(exports,"Preparation",{enumerable:!0,get:()=>e.Preparation});Object.defineProperty(exports,"Process",{enumerable:!0,get:()=>e.Process});Object.defineProperty(exports,"Rect",{enumerable:!0,get:()=>e.Rect});Object.defineProperty(exports,"Rectangle",{enumerable:!0,get:()=>e.Rectangle});Object.defineProperty(exports,"Rotation",{enumerable:!0,get:()=>e.Rotation});Object.defineProperty(exports,"Shape",{enumerable:!0,get:()=>e.Shape});Object.defineProperty(exports,"Sort",{enumerable:!0,get:()=>e.Sort});Object.defineProperty(exports,"SummingJunction",{enumerable:!0,get:()=>e.SummingJunction});Object.defineProperty(exports,"Terminator",{enumerable:!0,get:()=>e.Terminator});Object.defineProperty(exports,"TextBlock",{enumerable:!0,get:()=>e.TextBlock});Object.defineProperty(exports,"convertToDiagramModel",{enumerable:!0,get:()=>e.convertToDiagramModel});exports.Diagram=t.Diagram;exports.DiagramConnectionTooltip=r.DiagramConnectionTooltip;exports.DiagramShapeTooltip=n.DiagramShapeTooltip;exports.DiagramEditor=a.DiagramEditor;exports.defaultTextToolbarTools=o.defaultTextToolbarTools;

package/index.mjs

@@ -5,56 +5,64 @@
  * Licensed under commercial license. See LICENSE.md in the package root for more information
  *-------------------------------------------------------------------------------------------
  */
-import { ArrowMarker as t, Circle as a, CircleMarker as r, Collate as n, Connection as i, Connector as c, DataInputOutput as l, DataStorage as p, Database as u, Decision as g, Delay as m, DirectAccessStorage as D, Display as s, Document as M, Extract as P, FlowchartShapeType as C, Group as S, Image as T, InternalStorage as f, Layout as x, Line as y, LogicalOr as O, ManualInputOutput as h, ManualOperation as k, MarkerType as I, Merge as L, MultiLineTextBlock as d, MultipleDocuments as w, OffPageConnector as A, OnPageConnector as B, Path as R, Point as b, Polyline as v, PredefinedProcess as E, Preparation as F, Process as G, Rect as J, Rectangle as j, Shape as q, Sort as z, SummingJunction as H, Terminator as K, TextBlock as N, convertToDiagramModel as Q } from "@progress/kendo-diagram-common";
-import { Diagram as V } from "./Diagram.mjs";
-import { DiagramConnectionTooltip as X } from "./DiagramConnectionTooltip.mjs";
-import { DiagramShapeTooltip as Z } from "./DiagramShapeTooltip.mjs";
+import { ArrowMarker as a, CapType as r, Circle as t, CircleMarker as n, Collate as i, Connection as l, Connector as c, DataInputOutput as p, DataStorage as m, Database as g, Decision as u, Delay as D, Diagram as s, DirectAccessStorage as T, Display as f, Document as x, Extract as P, FlowchartShapeType as C, Group as M, Image as S, InternalStorage as y, Layout as d, Line as h, LogicalOr as O, ManualInputOutput as k, ManualOperation as I, MarkerType as L, Merge as R, MultiLineTextBlock as b, MultipleDocuments as w, OffPageConnector as A, OnPageConnector as B, Path as E, PathDefiner as v, Point as F, Polyline as G, PredefinedProcess as J, Preparation as W, Process as j, Rect as q, Rectangle as z, Rotation as H, Shape as K, Sort as N, SummingJunction as Q, Terminator as U, TextBlock as V, convertToDiagramModel as X } from "@progress/kendo-diagram-common";
+import { Diagram as Z } from "./Diagram.mjs";
+import { DiagramConnectionTooltip as $ } from "./DiagramConnectionTooltip.mjs";
+import { DiagramShapeTooltip as oe } from "./DiagramShapeTooltip.mjs";
+import { DiagramEditor as re } from "./rich-text-editing/DiagramEditor.mjs";
+import { defaultTextToolbarTools as ne } from "./rich-text-editing/default-toolbar-tools.mjs";
 export {
-  t as ArrowMarker,
-  a as Circle,
-  r as CircleMarker,
-  n as Collate,
-  i as Connection,
+  a as ArrowMarker,
+  r as CapType,
+  t as Circle,
+  n as CircleMarker,
+  i as Collate,
+  l as Connection,
   c as Connector,
-  l as DataInputOutput,
-  p as DataStorage,
-  u as Database,
-  g as Decision,
-  m as Delay,
-  V as Diagram,
-  X as DiagramConnectionTooltip,
-  Z as DiagramShapeTooltip,
-  D as DirectAccessStorage,
-  s as Display,
-  M as Document,
+  p as DataInputOutput,
+  m as DataStorage,
+  g as Database,
+  u as Decision,
+  D as Delay,
+  Z as Diagram,
+  $ as DiagramConnectionTooltip,
+  re as DiagramEditor,
+  oe as DiagramShapeTooltip,
+  s as DiagramWidget,
+  T as DirectAccessStorage,
+  f as Display,
+  x as Document,
   P as Extract,
   C as FlowchartShapeType,
-  S as Group,
-  T as Image,
-  f as InternalStorage,
-  x as Layout,
-  y as Line,
+  M as Group,
+  S as Image,
+  y as InternalStorage,
+  d as Layout,
+  h as Line,
   O as LogicalOr,
-  h as ManualInputOutput,
-  k as ManualOperation,
-  I as MarkerType,
-  L as Merge,
-  d as MultiLineTextBlock,
+  k as ManualInputOutput,
+  I as ManualOperation,
+  L as MarkerType,
+  R as Merge,
+  b as MultiLineTextBlock,
   w as MultipleDocuments,
   A as OffPageConnector,
   B as OnPageConnector,
-  R as Path,
-  b as Point,
-  v as Polyline,
-  E as PredefinedProcess,
-  F as Preparation,
-  G as Process,
-  J as Rect,
-  j as Rectangle,
-  q as Shape,
-  z as Sort,
-  H as SummingJunction,
-  K as Terminator,
-  N as TextBlock,
-  Q as convertToDiagramModel
+  E as Path,
+  v as PathDefiner,
+  F as Point,
+  G as Polyline,
+  J as PredefinedProcess,
+  W as Preparation,
+  j as Process,
+  q as Rect,
+  z as Rectangle,
+  H as Rotation,
+  K as Shape,
+  N as Sort,
+  Q as SummingJunction,
+  U as Terminator,
+  V as TextBlock,
+  X as convertToDiagramModel,
+  ne as defaultTextToolbarTools
 };