@progress/kendo-react-diagram 16.2.0-develop.11 → 16.2.0-develop.13

package/Diagram.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 de=require("react"),u=require("@progress/kendo-react-common"),w=require("@progress/kendo-diagram-common"),x=require("./package-metadata.js"),fe=require("./DiagramConnectionTooltip.js"),ge=require("./DiagramShapeTooltip.js"),De=require("./hooks/useDiagramTooltip.js"),he=require("./hooks/useDiagramData.js"),be=require("./hooks/useDiagramEvents.js"),n=require("./utils/consts.js"),j=require("./utils/navigate.js");function ye(i){const s=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(i){for(const r in i)if(r!=="default"){const m=Object.getOwnPropertyDescriptor(i,r);Object.defineProperty(s,r,m.get?m:{enumerable:!0,get:()=>i[r]})}}return s.default=i,Object.freeze(s)}const a=ye(de),L=a.forwardRef((i,s)=>{const{connectionDefaults:r,connections:m=n.diagramDefaultProps.connections,connectionModelFields:A,editable:g=n.diagramDefaultProps.editable,layout:D,pannable:h=n.diagramDefaultProps.pannable,selectable:b=n.diagramDefaultProps.selectable,shapeDefaults:y,shapes:F=n.diagramDefaultProps.shapes,shapeModelFields:H,zoom:z=n.diagramDefaultProps.zoom,zoomMax:v=n.diagramDefaultProps.zoomMax,zoomMin:M=n.diagramDefaultProps.zoomMin,zoomRate:R=n.diagramDefaultProps.zoomRate,navigable:T,onChange:V,onDiagramClick:W,onDrag:Z,onDragEnd:_,onDragStart:B,onShapeBoundsChange:I,onMouseEnter:K,onMouseLeave:G,onPan:J,onSelect:Q,onZoomEnd:U,onZoomStart:X,onTooltipShow:Y,onTooltipHide:$,style:ee,className:oe,role:k=n.diagramDefaultProps.role,ariaLabel:E,children:p}=i,c=a.useRef(null),l=a.useRef(null),ae=!u.validatePackage(x.packageMetadata,{component:"Diagram"}),te=u.getLicenseMessage(x.packageMetadata),P=a.useMemo(()=>j.normalizeNavigable(T),[T]),S=a.useCallback(t=>{l.current=t,typeof s=="function"?s(t):s&&(s.current=t)},[s]),{convertedShapes:O,convertedConnections:C}=he.useDiagramData(F,m,H,A),q=a.useMemo(()=>({role:k,ariaLabel:E,ariaRoleDescription:"Diagram"}),[k,E]),e=a.useMemo(()=>({shapes:O,connections:C,selectable:b,editable:g,zoom:z,zoomMax:v,zoomMin:M,zoomRate:R,layout:D,pannable:h,shapeDefaults:y,connectionDefaults:r,navigation:j.toNavigationOptions(P),accessibility:q}),[O,C,b,g,z,v,M,R,D,h,y,r,P,q]),ne=a.useMemo(()=>{const t=a.Children.toArray(p).find(o=>a.isValidElement(o)&&o.type===ge.DiagramShapeTooltip);return t?t.props.children:null},[p]),se=a.useMemo(()=>{const t=a.Children.toArray(p).find(o=>a.isValidElement(o)&&o.type===fe.DiagramConnectionTooltip);return t?t.props.children:null},[p]),{tooltipState:d,tooltipElRef:ie,hideTooltip:re,handleTooltipShow:ce,handleTooltipHide:le}=De.useDiagramTooltip({shapeTooltipRender:ne,connectionTooltipRender:se,diagramRef:l,wrapperRef:c,onTooltipShow:Y,onTooltipHide:$}),{bindDiagramEvents:ue}=be.useDiagramEvents({handlers:{onChange:V,onDiagramClick:W,onDrag:Z,onDragEnd:_,onDragStart:B,onShapeBoundsChange:I,onMouseEnter:K,onMouseLeave:G,onPan:J,onSelect:Q,onZoomEnd:U,onZoomStart:X},handleTooltipShow:ce,handleTooltipHide:le}),f=a.useRef(!1),N=a.useRef(e);return a.useEffect(()=>{if(!c.current)return;const t=w.loadTheme(c.current),o=new w.Diagram(c.current,e,t);return o._createOptionElements(),o.zoom(o.options.zoom),o.canvas.draw(),l.current=o,S(o),ue(o,e),f.current=!0,()=>{re(),o.destroy(),S(null),f.current=!1}},[]),a.useEffect(()=>{if(!l.current||!f.current)return;const t=l.current,o=N.current;(o.shapes!==e.shapes||o.connections!==e.connections)&&t.load(e),(o.layout!==e.layout||o.shapes!==e.shapes||o.connections!==e.connections)&&t.layout(e.layout),o.zoom!==e.zoom&&t.zoom(e.zoom);const me=o.connectionDefaults===e.connectionDefaults?e.connectionDefaults:{...t.options.connectionDefaults,...e.connectionDefaults},pe=o.shapeDefaults===e.shapeDefaults?e.shapeDefaults:{...t.options.shapeDefaults,...e.shapeDefaults};t.setOptions({zoom:e.zoom,zoomMax:e.zoomMax,zoomMin:e.zoomMin,zoomRate:e.zoomRate,selectable:e.selectable,pannable:e.pannable,layout:e.layout,navigation:e.navigation,connectionDefaults:me,shapeDefaults:pe}),N.current=e},[e]),a.createElement("div",{ref:c,className:u.classNames("k-diagram",oe),style:{display:"block",position:"relative",cursor:"default",...ee}},d.visible&&a.createElement("div",{ref:ie,className:u.classNames("k-popup","k-tooltip",d.className),style:d.style},d.content),ae&&a.createElement(u.WatermarkOverlay,{message:te}))});L.displayName="KendoDiagram";exports.Diagram=L;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const De=require("react"),m=require("@progress/kendo-react-common"),x=require("@progress/kendo-diagram-common"),j=require("./package-metadata.js"),he=require("./DiagramConnectionTooltip.js"),ye=require("./DiagramShapeTooltip.js"),be=require("./hooks/useDiagramTooltip.js"),ze=require("./hooks/useDiagramData.js"),ve=require("./hooks/useDiagramEvents.js"),n=require("./utils/consts.js"),L=require("./utils/navigate.js");function Me(i){const s=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(i){for(const r in i)if(r!=="default"){const p=Object.getOwnPropertyDescriptor(i,r);Object.defineProperty(s,r,p.get?p:{enumerable:!0,get:()=>i[r]})}}return s.default=i,Object.freeze(s)}const o=Me(De),W=o.forwardRef((i,s)=>{const{connectionDefaults:r,connections:p=n.diagramDefaultProps.connections,connectionModelFields:A,editable:g=n.diagramDefaultProps.editable,layout:D,pannable:h=n.diagramDefaultProps.pannable,selectable:y=n.diagramDefaultProps.selectable,shapeDefaults:b,shapes:V=n.diagramDefaultProps.shapes,shapeModelFields:F,zoom:z=n.diagramDefaultProps.zoom,zoomMax:v=n.diagramDefaultProps.zoomMax,zoomMin:M=n.diagramDefaultProps.zoomMin,zoomRate:R=n.diagramDefaultProps.zoomRate,navigable:E,onChange:H,onDiagramClick:K,onDrag:Z,onDragEnd:_,onDragStart:B,onShapeBoundsChange:I,onMouseEnter:G,onMouseLeave:J,onPan:Q,onSelect:U,onZoomEnd:X,onZoomStart:Y,onTooltipShow:$,onTooltipHide:ee,style:ae,className:oe,role:S=n.diagramDefaultProps.role,ariaLabel:T,children:l}=i,c=o.useRef(null),u=o.useRef(null),[te,ne]=o.useState(null),se=!m.validatePackage(j.packageMetadata,{component:"Diagram"}),ie=m.getLicenseMessage(j.packageMetadata),k=o.useMemo(()=>L.normalizeNavigable(E),[E]),P=o.useCallback(a=>{u.current=a,typeof s=="function"?s(a):s&&(s.current=a),ne(a)},[s]),{convertedShapes:C,convertedConnections:N}=ze.useDiagramData(V,p,F,A),O=o.useMemo(()=>({role:S,ariaLabel:T,ariaRoleDescription:"Diagram"}),[S,T]),e=o.useMemo(()=>({shapes:C,connections:N,selectable:y,editable:g,zoom:z,zoomMax:v,zoomMin:M,zoomRate:R,layout:D,pannable:h,shapeDefaults:b,connectionDefaults:r,navigation:L.toNavigationOptions(k),accessibility:O}),[C,N,y,g,z,v,M,R,D,h,b,r,k,O]),re=o.useMemo(()=>{const a=o.Children.toArray(l).find(t=>o.isValidElement(t)&&t.type===ye.DiagramShapeTooltip);return a?a.props.children:null},[l]),le=o.useMemo(()=>{const a=o.Children.toArray(l).find(t=>o.isValidElement(t)&&t.type===he.DiagramConnectionTooltip);return a?a.props.children:null},[l]),q=o.Children.toArray(l).find(a=>o.isValidElement(a)&&typeof a.type=="function"&&"displayName"in a.type&&a.type.displayName==="KendoDiagramEditor"),{tooltipState:d,tooltipElRef:ce,hideTooltip:ue,handleTooltipShow:me,handleTooltipHide:pe}=be.useDiagramTooltip({shapeTooltipRender:re,connectionTooltipRender:le,diagramRef:u,wrapperRef:c,onTooltipShow:$,onTooltipHide:ee}),{bindDiagramEvents:de}=ve.useDiagramEvents({handlers:{onChange:H,onDiagramClick:K,onDrag:Z,onDragEnd:_,onDragStart:B,onShapeBoundsChange:I,onMouseEnter:G,onMouseLeave:J,onPan:Q,onSelect:U,onZoomEnd:X,onZoomStart:Y},handleTooltipShow:me,handleTooltipHide:pe}),f=o.useRef(!1),w=o.useRef(e);return o.useEffect(()=>{if(!c.current)return;const a=x.loadTheme(c.current),t=new x.Diagram(c.current,e,a);return t._createOptionElements(),t.zoom(t.options.zoom),t.canvas.draw(),u.current=t,P(t),de(t,e),f.current=!0,()=>{ue(),t.destroy(),P(null),f.current=!1}},[]),o.useEffect(()=>{if(!u.current||!f.current)return;const a=u.current,t=w.current;(t.shapes!==e.shapes||t.connections!==e.connections)&&a.load(e),(t.layout!==e.layout||t.shapes!==e.shapes||t.connections!==e.connections)&&a.layout(e.layout),t.zoom!==e.zoom&&a.zoom(e.zoom);const fe=t.connectionDefaults===e.connectionDefaults?e.connectionDefaults:{...a.options.connectionDefaults,...e.connectionDefaults},ge=t.shapeDefaults===e.shapeDefaults?e.shapeDefaults:{...a.options.shapeDefaults,...e.shapeDefaults};a.setOptions({zoom:e.zoom,zoomMax:e.zoomMax,zoomMin:e.zoomMin,zoomRate:e.zoomRate,selectable:e.selectable,pannable:e.pannable,layout:e.layout,navigation:e.navigation,connectionDefaults:fe,shapeDefaults:ge}),w.current=e},[e]),o.createElement("div",{ref:c,className:m.classNames("k-diagram",oe),style:{display:"block",position:"relative",cursor:"default",...ae}},d.visible&&o.createElement("div",{ref:ce,className:m.classNames("k-popup","k-tooltip",d.className),style:d.style},d.content),se&&o.createElement(m.WatermarkOverlay,{message:ie}),q&&o.cloneElement(q,{diagram:te}))});W.displayName="KendoDiagram";exports.Diagram=W;

package/Diagram.mjs

@@ -5,152 +5,154 @@
  * Licensed under commercial license. See LICENSE.md in the package root for more information
  *-------------------------------------------------------------------------------------------
  */
-import * as n from "react";
-import { validatePackage as me, getLicenseMessage as pe, classNames as w, WatermarkOverlay as ue } from "@progress/kendo-react-common";
-import { loadTheme as fe, Diagram as de } from "@progress/kendo-diagram-common";
-import { packageMetadata as x } from "./package-metadata.mjs";
-import { DiagramConnectionTooltip as ge } from "./DiagramConnectionTooltip.mjs";
-import { DiagramShapeTooltip as he } from "./DiagramShapeTooltip.mjs";
-import { useDiagramTooltip as De } from "./hooks/useDiagramTooltip.mjs";
-import { useDiagramData as ze } from "./hooks/useDiagramData.mjs";
-import { useDiagramEvents as ye } from "./hooks/useDiagramEvents.mjs";
-import { diagramDefaultProps as a } from "./utils/consts.mjs";
-import { normalizeNavigable as ve, toNavigationOptions as be } from "./utils/navigate.mjs";
-const Me = n.forwardRef((O, s) => {
+import * as t from "react";
+import { validatePackage as fe, getLicenseMessage as de, classNames as O, WatermarkOverlay as ge } from "@progress/kendo-react-common";
+import { loadTheme as De, Diagram as he } from "@progress/kendo-diagram-common";
+import { packageMetadata as w } from "./package-metadata.mjs";
+import { DiagramConnectionTooltip as ye } from "./DiagramConnectionTooltip.mjs";
+import { DiagramShapeTooltip as ze } from "./DiagramShapeTooltip.mjs";
+import { useDiagramTooltip as ve } from "./hooks/useDiagramTooltip.mjs";
+import { useDiagramData as be } from "./hooks/useDiagramData.mjs";
+import { useDiagramEvents as Me } from "./hooks/useDiagramEvents.mjs";
+import { diagramDefaultProps as n } from "./utils/consts.mjs";
+import { normalizeNavigable as Re, toNavigationOptions as Ee } from "./utils/navigate.mjs";
+const Ne = t.forwardRef((L, s) => {
   const {
     connectionDefaults: p,
-    connections: L = a.connections,
-    connectionModelFields: P,
-    editable: u = a.editable,
+    connections: W = n.connections,
+    connectionModelFields: A,
+    editable: u = n.editable,
     layout: f,
-    pannable: d = a.pannable,
-    selectable: g = a.selectable,
-    shapeDefaults: h,
-    shapes: A = a.shapes,
-    shapeModelFields: F,
-    zoom: D = a.zoom,
-    zoomMax: z = a.zoomMax,
-    zoomMin: y = a.zoomMin,
-    zoomRate: v = a.zoomRate,
+    pannable: d = n.pannable,
+    selectable: g = n.selectable,
+    shapeDefaults: D,
+    shapes: P = n.shapes,
+    shapeModelFields: V,
+    zoom: h = n.zoom,
+    zoomMax: y = n.zoomMax,
+    zoomMin: z = n.zoomMin,
+    zoomRate: v = n.zoomRate,
     navigable: b,
-    onChange: H,
-    onDiagramClick: V,
-    onDrag: W,
+    onChange: F,
+    onDiagramClick: H,
+    onDrag: K,
     onDragEnd: Z,
     onDragStart: B,
     onShapeBoundsChange: I,
-    onMouseEnter: K,
-    onMouseLeave: $,
-    onPan: j,
-    onSelect: q,
-    onZoomEnd: G,
-    onZoomStart: J,
-    onTooltipShow: Q,
-    onTooltipHide: U,
-    style: X,
-    className: Y,
-    role: M = a.role,
+    onMouseEnter: $,
+    onMouseLeave: j,
+    onPan: q,
+    onSelect: G,
+    onZoomEnd: J,
+    onZoomStart: Q,
+    onTooltipShow: U,
+    onTooltipHide: X,
+    style: Y,
+    className: _,
+    role: M = n.role,
     ariaLabel: R,
-    children: l
-  } = O, i = n.useRef(null), r = n.useRef(null), _ = !me(x, { component: "Diagram" }), ee = pe(x), E = n.useMemo(() => ve(b), [b]), T = n.useCallback(
-    (t) => {
-      r.current = t, typeof s == "function" ? s(t) : s && (s.current = t);
+    children: i
+  } = L, r = t.useRef(null), l = t.useRef(null), [ee, oe] = t.useState(null), te = !fe(w, { component: "Diagram" }), ae = de(w), E = t.useMemo(() => Re(b), [b]), N = t.useCallback(
+    (o) => {
+      l.current = o, typeof s == "function" ? s(o) : s && (s.current = o), oe(o);
     },
     [s]
-  ), { convertedShapes: k, convertedConnections: S } = ze(
-    A,
-    L,
-    F,
-    P
-  ), C = n.useMemo(
+  ), { convertedShapes: S, convertedConnections: T } = be(
+    P,
+    W,
+    V,
+    A
+  ), k = t.useMemo(
     () => ({
       role: M,
       ariaLabel: R,
       ariaRoleDescription: "Diagram"
     }),
     [M, R]
-  ), e = n.useMemo(
+  ), e = t.useMemo(
     () => ({
-      shapes: k,
-      connections: S,
+      shapes: S,
+      connections: T,
       selectable: g,
       editable: u,
-      zoom: D,
-      zoomMax: z,
-      zoomMin: y,
+      zoom: h,
+      zoomMax: y,
+      zoomMin: z,
       zoomRate: v,
       layout: f,
       pannable: d,
-      shapeDefaults: h,
+      shapeDefaults: D,
       connectionDefaults: p,
-      navigation: be(E),
-      accessibility: C
+      navigation: Ee(E),
+      accessibility: k
     }),
     [
-      k,
       S,
+      T,
       g,
       u,
-      D,
-      z,
+      h,
       y,
+      z,
       v,
       f,
       d,
-      h,
+      D,
       p,
       E,
-      C
+      k
     ]
-  ), oe = n.useMemo(() => {
-    const t = n.Children.toArray(l).find(
-      (o) => n.isValidElement(o) && o.type === he
+  ), ne = t.useMemo(() => {
+    const o = t.Children.toArray(i).find(
+      (a) => t.isValidElement(a) && a.type === ze
     );
-    return t ? t.props.children : null;
-  }, [l]), ne = n.useMemo(() => {
-    const t = n.Children.toArray(l).find(
-      (o) => n.isValidElement(o) && o.type === ge
+    return o ? o.props.children : null;
+  }, [i]), se = t.useMemo(() => {
+    const o = t.Children.toArray(i).find(
+      (a) => t.isValidElement(a) && a.type === ye
     );
-    return t ? t.props.children : null;
-  }, [l]), { tooltipState: c, tooltipElRef: te, hideTooltip: ae, handleTooltipShow: se, handleTooltipHide: ie } = De({
-    shapeTooltipRender: oe,
-    connectionTooltipRender: ne,
-    diagramRef: r,
-    wrapperRef: i,
-    onTooltipShow: Q,
-    onTooltipHide: U
-  }), { bindDiagramEvents: re } = ye({
+    return o ? o.props.children : null;
+  }, [i]), C = t.Children.toArray(i).find(
+    (o) => t.isValidElement(o) && typeof o.type == "function" && "displayName" in o.type && o.type.displayName === "KendoDiagramEditor"
+  ), { tooltipState: c, tooltipElRef: ie, hideTooltip: re, handleTooltipShow: le, handleTooltipHide: ce } = ve({
+    shapeTooltipRender: ne,
+    connectionTooltipRender: se,
+    diagramRef: l,
+    wrapperRef: r,
+    onTooltipShow: U,
+    onTooltipHide: X
+  }), { bindDiagramEvents: me } = Me({
     handlers: {
-      onChange: H,
-      onDiagramClick: V,
-      onDrag: W,
+      onChange: F,
+      onDiagramClick: H,
+      onDrag: K,
       onDragEnd: Z,
       onDragStart: B,
       onShapeBoundsChange: I,
-      onMouseEnter: K,
-      onMouseLeave: $,
-      onPan: j,
-      onSelect: q,
-      onZoomEnd: G,
-      onZoomStart: J
+      onMouseEnter: $,
+      onMouseLeave: j,
+      onPan: q,
+      onSelect: G,
+      onZoomEnd: J,
+      onZoomStart: Q
     },
-    handleTooltipShow: se,
-    handleTooltipHide: ie
-  }), m = n.useRef(!1), N = n.useRef(e);
-  return n.useEffect(() => {
-    if (!i.current)
+    handleTooltipShow: le,
+    handleTooltipHide: ce
+  }), m = t.useRef(!1), x = t.useRef(e);
+  return t.useEffect(() => {
+    if (!r.current)
       return;
-    const t = fe(i.current), o = new de(i.current, e, t);
-    return o._createOptionElements(), o.zoom(o.options.zoom), o.canvas.draw(), r.current = o, T(o), re(o, e), m.current = !0, () => {
-      ae(), o.destroy(), T(null), m.current = !1;
+    const o = De(r.current), a = new he(r.current, e, o);
+    return a._createOptionElements(), a.zoom(a.options.zoom), a.canvas.draw(), l.current = a, N(a), me(a, e), m.current = !0, () => {
+      re(), a.destroy(), N(null), m.current = !1;
     };
-  }, []), n.useEffect(() => {
-    if (!r.current || !m.current)
+  }, []), t.useEffect(() => {
+    if (!l.current || !m.current)
       return;
-    const t = r.current, o = N.current;
-    (o.shapes !== e.shapes || o.connections !== e.connections) && t.load(e), (o.layout !== e.layout || o.shapes !== e.shapes || o.connections !== e.connections) && t.layout(e.layout), o.zoom !== e.zoom && t.zoom(e.zoom);
-    const le = o.connectionDefaults === e.connectionDefaults ? e.connectionDefaults : { ...t.options.connectionDefaults, ...e.connectionDefaults }, ce = o.shapeDefaults === e.shapeDefaults ? e.shapeDefaults : { ...t.options.shapeDefaults, ...e.shapeDefaults };
-    t.setOptions({
+    const o = l.current, a = x.current;
+    (a.shapes !== e.shapes || a.connections !== e.connections) && o.load(e), (a.layout !== e.layout || a.shapes !== e.shapes || a.connections !== e.connections) && o.layout(e.layout), a.zoom !== e.zoom && o.zoom(e.zoom);
+    const pe = a.connectionDefaults === e.connectionDefaults ? e.connectionDefaults : { ...o.options.connectionDefaults, ...e.connectionDefaults }, ue = a.shapeDefaults === e.shapeDefaults ? e.shapeDefaults : { ...o.options.shapeDefaults, ...e.shapeDefaults };
+    o.setOptions({
       zoom: e.zoom,
       zoomMax: e.zoomMax,
       zoomMin: e.zoomMin,
@@ -159,29 +161,32 @@ const Me = n.forwardRef((O, s) => {
       pannable: e.pannable,
       layout: e.layout,
       navigation: e.navigation,
-      connectionDefaults: le,
-      shapeDefaults: ce
-    }), N.current = e;
-  }, [e]), /* @__PURE__ */ n.createElement(
+      connectionDefaults: pe,
+      shapeDefaults: ue
+    }), x.current = e;
+  }, [e]), /* @__PURE__ */ t.createElement(
     "div",
     {
-      ref: i,
-      className: w("k-diagram", Y),
-      style: { display: "block", position: "relative", cursor: "default", ...X }
+      ref: r,
+      className: O("k-diagram", _),
+      style: { display: "block", position: "relative", cursor: "default", ...Y }
     },
-    c.visible && /* @__PURE__ */ n.createElement(
+    c.visible && /* @__PURE__ */ t.createElement(
       "div",
       {
-        ref: te,
-        className: w("k-popup", "k-tooltip", c.className),
+        ref: ie,
+        className: O("k-popup", "k-tooltip", c.className),
         style: c.style
       },
       c.content
     ),
-    _ && /* @__PURE__ */ n.createElement(ue, { message: ee })
+    te && /* @__PURE__ */ t.createElement(ge, { message: ae }),
+    C && t.cloneElement(C, {
+      diagram: ee
+    })
   );
 });
-Me.displayName = "KendoDiagram";
+Ne.displayName = "KendoDiagram";
 export {
-  Me as Diagram
+  Ne as Diagram
 };

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,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.11",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});
+!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.13",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,y=0,v={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={fontSize:16,fontFamily:t.EditingUtils.Data.fontNames[0].value},k=e=>({disabled:!e.enabled,smallStep:e.smallStep,largeStep:e.largeStep}),P=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:w=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:F,onDragStart:j,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,te]=d.useState(null),ne=!o.validatePackage(g,{component:"Diagram"}),oe=o.getLicenseMessage(g),ae=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]),re=d.useCallback(e=>{Q.current=e,"function"==typeof n?n(e):n&&(n.current=e),te(e)},[n]),{convertedShapes:le,convertedConnections:ie}=((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]))(w,r,P,l),ce=d.useMemo(()=>({role:J,ariaLabel:Y,ariaRoleDescription:"Diagram"}),[J,Y]),se=d.useMemo(()=>({shapes:le,connections:ie,selectable:u,editable:i,zoom:M,zoomMax:O,zoomMin:I,zoomRate:x,layout:c,pannable:s,shapeDefaults:p,connectionDefaults:a,navigation:k(ae),accessibility:ce}),[le,ie,u,i,M,O,I,x,c,s,p,a,ae,ce]),ue=d.useMemo(()=>{const e=d.Children.toArray(X).find(e=>d.isValidElement(e)&&e.type===f);return e?e.props.children:null},[X]),pe=d.useMemo(()=>{const e=d.Children.toArray(X).find(e=>d.isValidElement(e)&&e.type===m);return e?e.props.children:null},[X]),de=d.Children.toArray(X).find(e=>d.isValidElement(e)&&"function"==typeof e.type&&"displayName"in e.type&&"KendoDiagramEditor"===e.type.displayName),{tooltipState:ge,tooltipElRef:me,hideTooltip:fe,handleTooltipShow:he,handleTooltipHide:be}=(e=>{const{shapeTooltipRender:n,connectionTooltipRender:o,diagramRef:a,wrapperRef:r,onTooltipShow:l,onTooltipHide:i}=e,[c,s]=d.useState(v),u=d.useCallback(()=>{g.current=null,s(v)},[]),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,v,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==(v=i.shapeDefaults)?void 0:v.tooltip)?void 0:S.cssClass:null==(T=null==(C=i.connectionDefaults)?void 0:C.tooltip)?void 0:T.cssClass,F=null==(D=E.tooltip)?void 0:D.cssClass,j=A||F;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,y,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:j,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:ue,connectionTooltipRender:pe,diagramRef:Q,wrapperRef:G,onTooltipShow:$,onTooltipHide:W}),{bindDiagramEvents:ye}=(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:F,onDragStart:j,onShapeBoundsChange:B,onMouseEnter:N,onMouseLeave:K,onPan:V,onSelect:H,onZoomEnd:U,onZoomStart:q},handleTooltipShow:he,handleTooltipHide:be}),ve=d.useRef(!1),Se=d.useRef(se);return d.useEffect(()=>{if(!G.current)return;const e=t.loadTheme(G.current),n=new t.Diagram(G.current,se,e);return n._createOptionElements(),n.zoom(n.options.zoom),n.canvas.draw(),Q.current=n,re(n),ye(n,se),ve.current=!0,()=>{fe(),n.destroy(),re(null),ve.current=!1}},[]),d.useEffect(()=>{if(!Q.current||!ve.current)return;const e=Q.current,t=Se.current;(t.shapes!==se.shapes||t.connections!==se.connections)&&e.load(se),(t.layout!==se.layout||t.shapes!==se.shapes||t.connections!==se.connections)&&e.layout(se.layout),t.zoom!==se.zoom&&e.zoom(se.zoom);const n=t.connectionDefaults===se.connectionDefaults?se.connectionDefaults:{...e.options.connectionDefaults,...se.connectionDefaults},o=t.shapeDefaults===se.shapeDefaults?se.shapeDefaults:{...e.options.shapeDefaults,...se.shapeDefaults};e.setOptions({zoom:se.zoom,zoomMax:se.zoomMax,zoomMin:se.zoomMin,zoomRate:se.zoomRate,selectable:se.selectable,pannable:se.pannable,layout:se.layout,navigation:se.navigation,connectionDefaults:n,shapeDefaults:o}),Se.current=se},[se]),d.createElement("div",{ref:G,className:o.classNames("k-diagram",Z),style:{display:"block",position:"relative",cursor:"default",..._}},ge.visible&&d.createElement("div",{ref:me,className:o.classNames("k-popup","k-tooltip",ge.className),style:ge.style},ge.content),ne&&d.createElement(o.WatermarkOverlay,{message:oe}),de&&d.cloneElement(de,{diagram:ee}))});P.displayName="KendoDiagram";const M=()=>{};let O=0;const I=d.createContext(null),x=I.Provider,L=()=>{const e=d.useContext(I);if(!e)throw new Error("DiagramEditorContext is not available.");return e},R=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])},z=e=>{const{controller:t,snapshot:n}=L(),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}},A=e=>{const{controller:t}=L(),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}-${O++}`,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])},F="diagram.editing.textPlaceholder",j="diagram.editing.undo",B="diagram.editing.redo",N="diagram.editing.select",K="diagram.editing.pan",V="diagram.editing.text",H="diagram.editing.shape",U="diagram.editing.shapeType",q="diagram.editing.fillColor",$="diagram.editing.borderWidth",W="diagram.editing.borderColor",_="diagram.editing.borderStyle",Z="diagram.editing.borderStyle.solid",J="diagram.editing.borderStyle.dotted",Y="diagram.editing.borderStyle.dashed",X="diagram.editing.borderStyle.dashDot",G="diagram.editing.borderStyle.longDash",Q="diagram.editing.borderStyle.longDashDot",ee="diagram.editing.borderStyle.longDashDotDot",te="diagram.editing.toFront",ne="diagram.editing.toBack",oe="diagram.editing.rotateLeft",ae="diagram.editing.rotateRight",re="diagram.editing.duplicate",le="diagram.editing.delete",ie="diagram.editing.connectionColor",ce="diagram.editing.connectionWidth",se="diagram.editing.connectionStyle",ue="diagram.editing.connectionType",pe="diagram.editing.connectionType.cascading",de="diagram.editing.connectionType.polyline",ge="diagram.editing.editText",me="diagram.editing.startCapType",fe="diagram.editing.cap.none",he="diagram.editing.cap.arrow",be="diagram.editing.cap.triangleArrow",ye="diagram.editing.cap.lineArrow",ve="diagram.editing.cap.filledCircle",Se="diagram.editing.cap.filledDiamond",Ce="diagram.editing.endCapType",Te="diagram.editing.shape.collate",De="diagram.editing.shape.connector",Ee="diagram.editing.shape.dataStorage",we="diagram.editing.shape.database",ke="diagram.editing.shape.decision",Pe="diagram.editing.shape.delay",Me="diagram.editing.shape.directAccessStorage",Oe="diagram.editing.shape.display",Ie="diagram.editing.shape.document",xe="diagram.editing.shape.extract",Le="diagram.editing.shape.inputOutput",Re="diagram.editing.shape.internalStorage",ze="diagram.editing.shape.logicalOr",Ae="diagram.editing.shape.manualInputOutput",Fe="diagram.editing.shape.manualOperation",je="diagram.editing.shape.merge",Be="diagram.editing.shape.multipleDocuments",Ne="diagram.editing.shape.offPageConnector",Ke="diagram.editing.shape.predefinedProcess",Ve="diagram.editing.shape.preparation",He="diagram.editing.shape.process",Ue="diagram.editing.shape.sort",qe="diagram.editing.shape.summingJunction",$e="diagram.editing.shape.terminator",We="diagram.editing.alignLeft",_e="diagram.editing.alignCenter",Ze="diagram.editing.alignRight",Je="diagram.editing.alignTop",Ye="diagram.editing.alignMiddle",Xe="diagram.editing.alignBottom",Ge="diagram.editing.alignHorizontal",Qe="diagram.editing.alignVertical",et="diagram.editing.fontType",tt="diagram.editing.fontSize",nt="diagram.editing.font.standard",ot="diagram.editing.font.classic",at="diagram.editing.font.technical",rt="diagram.editing.font.handwritten",lt="diagram.editing.font.headline",it="diagram.editing.fontSize.extraSmall",ct="diagram.editing.fontSize.small",st="diagram.editing.fontSize.medium",ut="diagram.editing.fontSize.large",pt="diagram.editing.fontSize.extraLarge",dt="diagram.editing.color",gt={[F]:"Type something",[j]:"Undo",[B]:"Redo",[N]:"Select",[K]:"Pan",[V]:"Text",[H]:"Shape",[U]:"Shape Type",[q]:"Fill Color",[$]:"Border Width",[W]:"Border Color",[_]:"Border Style",[Z]:"Solid",[J]:"Dotted",[Y]:"Dashed",[X]:"Dash Dot",[G]:"Long Dash",[Q]:"Long Dash Dot",[ee]:"Long Dash Dot Dot",[te]:"To Front",[ne]:"To Back",[oe]:"Rotate Left",[ae]:"Rotate Right",[re]:"Duplicate",[le]:"Delete",[ie]:"Connection Color",[ce]:"Connection Width",[se]:"Connection Style",[ue]:"Connection Type",[pe]:"Cascading",[de]:"Polyline",[ge]:"Edit Text",[me]:"Start Cap Type",[fe]:"None",[he]:"Arrow",[be]:"Triangle Arrow",[ye]:"Line Arrow",[ve]:"Filled Circle",[Se]:"Filled Diamond",[Ce]:"End Cap Type",[Te]:"Collate",[De]:"Connector",[Ee]:"Data Storage",[we]:"Database",[ke]:"Decision",[Pe]:"Delay",[Me]:"Direct Access Storage",[Oe]:"Display",[Ie]:"Document",[xe]:"Extract",[Le]:"Input Output",[Re]:"Internal Storage",[ze]:"Logical OR",[Ae]:"Manual Input Output",[Fe]:"Manual Operation",[je]:"Merge",[Be]:"Multiple Documents",[Ne]:"Off-page Connector",[Ke]:"Predefined Process",[Ve]:"Preparation",[He]:"Process",[Ue]:"Sort",[qe]:"Summing Junction (Logical AND)",[$e]:"Terminator",[We]:"Left",[_e]:"Center",[Ze]:"Right",[Je]:"Top",[Ye]:"Middle",[Xe]:"Bottom",[Ge]:"Horizontal Alignment",[Qe]:"Vertical Alignment",[et]:"Font Type",[tt]:"Font Size",[nt]:"Standard",[ot]:"Classic",[at]:"Technical",[rt]:"Handwritten",[lt]:"Headline",[it]:"Extra Small",[ct]:"Small",[st]:"Medium",[ut]:"Large",[pt]:"Extra Large",[dt]:"Text Color"},mt=e=>e.preventDefault(),ft={onMouseDown:mt,onPointerDown:mt},ht=":not(.k-dropdownlist button):not(.k-colorpicker button):not(.k-split-button .k-split-button-arrow)",bt=[`button${ht}`,`.k-button-group > button${ht}`,".k-colorpicker",".k-dropdownlist"],yt=(e,t)=>`${e}-${t}`,vt=(e,t)=>{if(!e)return null;const{component:n,props:o}=e;return d.createElement(n,{...o,key:t})},St=(e,t)=>e.map((e,n)=>Array.isArray(e)?d.createElement(i.ButtonGroup,{key:yt("group",n)},e.map((e,n)=>vt(t[e],yt(e,n))).filter(Boolean)):vt(t[e],yt(e,n))).filter(Boolean),Ct=(e,t,n,o)=>e.map(e=>{const a=n[String(o(e))];return{...e,label:a?t.toLanguageString(a,gt[a]):e.label}}),Tt="k-diagram-context-toolbar-popup",Dt="k-diagram-context-toolbar-container",Et=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}=L(),{open:f,setOpen:h}=z(e.overlayOwner),{columns:b}=e,y=d.useRef(e);y.current=e,d.useImperativeHandle(t,()=>a.current,[]);const v=d.useCallback(e=>{var t,n;const o="function"==typeof e?e(f):e;o!==f&&(null==(n=(t=y.current).onOpenChange)||n.call(t,o),h(o))},[h,f]),S=d.useCallback(()=>{v(e=>(e&&(g.current=!0),!e))},[v]),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,v(!1)}}},tabIndex:0}),a=null==(e=s.current)?void 0:e.elements;const l=y.current.data.findIndex(e=>e.value===y.current.value);l>=0?null==(t=a[l])||t.focus():null==(n=s.current.first)||n.focus()},[b,v]),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))&&v(!1)},[v]);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,v(!1),e.onSelect(o)},togglable:!0,selected:e.value===o,type:"button",svgIcon:n,iconSize:"large",...ft})))))});Et.displayName="IconsDropdown";const{DOMResizeObserver:wt,pmDocToRTContent:kt,parseAlignment:Pt,Data:Mt}=t.EditingUtils,{fontNames:Ot,fontSizes:It,floatingToolbarStyle:xt}=Mt,{bold:Lt,italic:Rt,underline:zt,fontName:At,fontSize:Ft,foreColor:jt}=a.EditorToolsSettings,Bt=a.EditorTools.ForeColor,Nt=a.EditorTools.createInlineFormatTool({...Lt,props:{...Lt.props,fillMode:"flat"}}),Kt=a.EditorTools.createInlineFormatTool({...Rt,props:{...Rt.props,fillMode:"flat"}}),Vt=a.EditorTools.createInlineFormatTool({...zt,props:{...zt.props,fillMode:"flat"}}),Ht=e=>{const t=A("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(Bt,{...e,colorPickerProps:{...jt.colorPickerProps,fillMode:"flat"}}))},Ut={Left:We,Center:_e,Right:Ze,Top:Je,Middle:Ye,Bottom:Xe},qt={Standard:nt,Classic:ot,Technical:at,Handwritten:rt,Headline:lt},$t={"Extra Small":it,Small:ct,Medium:st,Large:ut,"Extra Large":pt},Wt=[{label:"Left",value:"left",icon:c.alignLeftIcon},{label:"Center",value:"center",icon:c.alignCenterIcon},{label:"Right",value:"right",icon:c.alignRightIcon}],_t=[{label:"Top",value:"top",icon:c.alignTopIcon},{label:"Middle",value:"middle",icon:c.alignMiddleIcon},{label:"Bottom",value:"bottom",icon:c.alignBottomIcon}],Zt={left:c.alignLeftIcon,center:c.alignCenterIcon,right:c.alignRightIcon,top:c.alignTopIcon,middle:c.alignMiddleIcon,bottom:c.alignBottomIcon},Jt=(e,t,n,o={})=>e.map(e=>{const a=o[e.text];return{...e,text:n.toLanguageString(a||`${t}.${e.text}`,a?gt[a]:e.text)}}),Yt=(e,t)=>e in Zt?e:t,Xt=e=>{const t=r.useLocalization(),n=e=>{const n=Ut[e];return t.toLanguageString(n,gt[n])},o=Wt.map(e=>({...e,title:n(e.label)})),a=_t.map(e=>({...e,title:n(e.label)}));return d.createElement(d.Fragment,null,d.createElement(Et,{columns:Wt.length,data:o,value:e.horizontal,buttonIcon:Zt[e.horizontal],buttonTitle:t.toLanguageString(Ge,gt[Ge]),overlayOwner:"text-toolbar",onSelect:t=>e.onAlignClick(t,e.vertical)}),e.renderVAlign&&d.createElement(Et,{columns:_t.length,data:a,value:e.vertical,buttonIcon:Zt[e.vertical],buttonTitle:t.toLanguageString(Qe,gt[Qe]),overlayOwner:"text-toolbar",onSelect:t=>e.onAlignClick(e.horizontal,t)}))},Gt=e=>null!=e,Qt=e=>{var t,n,o,c;const s=A("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=Pt(f),b=Yt(h.horizontal,"left"),y=Yt(h.vertical,"top"),v=r.useLocalization(),S=e.fontNames||Ot,C=e.fontSizes||It,{FontName:T,FontSize:D}=d.useMemo(()=>{const e=Jt(S,"diagram.editing.font",v,qt),t=Jt(C,"diagram.editing.fontSize",v,$t),n=v.toLanguageString(et,gt[et]),o=v.toLanguageString(tt,gt[tt]),r=a.EditorTools.createStyleDropDownList({...At,items:e,defaultItem:void 0}),l=a.EditorTools.createStyleDropDownList({...Ft,items:t,defaultItem:void 0});return{FontName:e=>d.createElement(r,{...e,title:n}),FontSize:e=>d.createElement(l,{...e,title:o})}},[S,C,v]),E=Gt(e.defaultStyles.fontSize)&&C.find(t=>t.value===`${e.defaultStyles.fontSize}px`)||void 0,w=Gt(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,...kt(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 wt(t);return n.bind("resize",k),n.init(),()=>{n.destroy()}}},[e.editItem,P,k]);const M={color:{component:Ht,props:{view:g,onClose:()=>{g.focus()},title:v.toLanguageString(dt,gt[dt])}},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:Nt,props:{view:g}},italic:{component:Kt,props:{view:g}},underline:{component:Vt,props:{view:g}},separator:{component:i.ToolbarSeparator,props:{}},align:{component:Xt,props:{horizontal:b,vertical:y,renderVAlign:u,onAlignClick:(e,t)=>{g.dispatch(g.state.tr.setDocAttribute("alignment",`${e} ${t}`)),g.focus()}}}},O=St(e.tools,M);return 0===O.length?null:d.createElement(l.PopupPropsContext.Provider,{value:s},d.createElement(i.Toolbar,{fillMode:"flat",style:xt,buttons:bt},O))},{shapesData:en}=t.EditingUtils.Icons,{workflowShapes:tn}=t.EditingUtils.Data,nn={[t.FlowchartShapeType.Collate]:Te,[t.FlowchartShapeType.OnPageConnector]:De,[t.FlowchartShapeType.DataStorage]:Ee,[t.FlowchartShapeType.Database]:we,[t.FlowchartShapeType.Decision]:ke,[t.FlowchartShapeType.Delay]:Pe,[t.FlowchartShapeType.DirectAccessStorage]:Me,[t.FlowchartShapeType.Display]:Oe,[t.FlowchartShapeType.Document]:Ie,[t.FlowchartShapeType.Extract]:xe,[t.FlowchartShapeType.DataInputOutput]:Le,[t.FlowchartShapeType.InternalStorage]:Re,[t.FlowchartShapeType.LogicalOr]:ze,[t.FlowchartShapeType.ManualInputOutput]:Ae,[t.FlowchartShapeType.ManualOperation]:Fe,[t.FlowchartShapeType.Merge]:je,[t.FlowchartShapeType.MultipleDocuments]:Be,[t.FlowchartShapeType.OffPageConnector]:Ne,[t.FlowchartShapeType.PredefinedProcess]:Ke,[t.FlowchartShapeType.Preparation]:Ve,[t.FlowchartShapeType.Process]:He,[t.FlowchartShapeType.Sort]:Ue,[t.FlowchartShapeType.SummingJunction]:qe,[t.FlowchartShapeType.Terminator]:$e},on=d.forwardRef(function(e,t){const n=r.useLocalization(),o=d.useMemo(()=>Ct(en,n,nn,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||tn).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(Et,{...e,ref:t,data:a,buttonIcon:c.shapesIcon,buttonTitle:e.buttonTitle,columns:4})}),an=()=>d.createElement(s.InputPrefix,{orientation:"horizontal"},d.createElement(o.SvgIcon,{icon:c.rowsIcon}));const rn=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}=L(),{open:h,setOpen:b}=z(e.overlayOwner),[y,v]=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",mt,{capture:!0,passive:!1}),()=>{t.removeEventListener("wheel",mt,!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||v(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,...ft}),d.createElement(l.Popup,{anchor:null==(t=u.current)?void 0:t.element,show:h,popupClass:Tt,onOpen:C,ref:S},d.createElement(s.NumericTextBox,{spinners:!1,ref:p,width:y,value:n,min:a,max:20,step:1,onKeyDown:T,onBlur:D,fillMode:"flat",onChange:E,prefix:an})))},ln=t.EditingUtils.Data.borderTypes,cn={solid:Z,dot:J,dash:Y,dashDot:X,longDash:G,longDashDot:Q,longDashDotDot:ee},sn=e=>{const t=r.useLocalization(),n=t.toLanguageString(_,gt[_]),o=d.useMemo(()=>Ct(ln,t,cn,e=>e.value),[t]);return d.createElement(Et,{...e,data:o,buttonIcon:c.borderTypeIcon,buttonTitle:n,columns:ln.length,popupClass:Tt})},{Data:un}=t.EditingUtils,pn=un.floatingToolbarStyle,dn=e=>{var t,n,o;const{shape:a,tools:u,shapes:p}=e,{controller:g}=L(),m=A("shape-toolbar"),f=r.useLocalization();if(!a)return null;const h=a.options,b=h.type||"rectangle",y="string"==typeof h.fill?h.fill:(null==(t=h.fill)?void 0:t.color)||"#ffffff",v=(null==(o=null==(n=a.shapeVisual)?void 0:n.options)?void 0:o.stroke)||{},S=v.color||"",C=v.width||1,T=v.dashType||"solid",D={type:{component:on,props:{onSelect:e=>{e!==b&&g.execute({type:"setShapeType",value:e})},value:a.options.type,buttonTitle:f.toLanguageString(U,gt[U]),shapes:p,popupClass:Tt,overlayOwner:"shape-toolbar"}},backColor:{component:s.ColorPicker,props:{value:y,gradientSettings:{opacity:!1},fillMode:"flat",onChange:e=>(e=>{g.execute({type:"setShapeFillColor",value:e})})(e.value),title:f.toLanguageString(q,gt[q])}},separator:{component:i.ToolbarSeparator,props:{}},borderWidth:{component:rn,props:{value:C,onSelect:e=>{g.execute({type:"setShapeStrokeWidth",value:e})},label:f.toLanguageString($,gt[$]),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(W,gt[W])}},borderStyle:{component:sn,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(te,gt[te])}},toBack:{component:i.Button,props:{fillMode:"flat",onClick:()=>{g.execute({type:"shapeToBack"})},svgIcon:c.bringToBackIcon,title:f.toLanguageString(ne,gt[ne])}},rotateLeft:{component:i.Button,props:{fillMode:"flat",onClick:()=>{g.execute({type:"rotateShapeLeft"})},svgIcon:c.rotateLeftIcon,title:f.toLanguageString(oe,gt[oe])}},rotateRight:{component:i.Button,props:{fillMode:"flat",onClick:()=>{g.execute({type:"rotateShapeRight"})},svgIcon:c.rotateRightIcon,title:f.toLanguageString(ae,gt[ae])}},duplicate:{component:i.Button,props:{fillMode:"flat",onClick:()=>{g.execute({type:"duplicateSelection"})},svgIcon:c.copyIcon,title:f.toLanguageString(re,gt[re])}},delete:{component:i.Button,props:{fillMode:"flat",onClick:()=>{g.execute({type:"deleteSelection"})},svgIcon:c.trashIcon,title:f.toLanguageString(le,gt[le])}}},E=St(u,D);return 0===E.length?null:d.createElement(l.PopupPropsContext.Provider,{value:m},d.createElement(i.Toolbar,{fillMode:"flat",style:{...pn},buttons:bt},E))},gn=t.EditingUtils.Data.connectionTypes,mn=t.EditingUtils.Icons.diagonalLineIcon,fn={cascading:pe,polyline:de},hn=e=>{const t=r.useLocalization(),n=t.toLanguageString(ue,gt[ue]),o=d.useMemo(()=>Ct(gn,t,fn,e=>e.value),[t]);return d.createElement(Et,{...e,data:o,buttonIcon:mn,buttonTitle:n,columns:gn.length,popupClass:Tt})},bn=t.EditingUtils.Data.borderTypes,yn={solid:Z,dot:J,dash:Y,dashDot:X,longDash:G,longDashDot:Q,longDashDotDot:ee},vn=e=>{const t=r.useLocalization(),n=t.toLanguageString(se,gt[se]),o=d.useMemo(()=>Ct(bn,t,yn,e=>e.value),[t]);return d.createElement(Et,{...e,data:o,buttonIcon:c.borderTypeIcon,buttonTitle:n,columns:bn.length,popupClass:Tt})},Sn={none:fe,ArrowStart:he,ArrowEnd:he,TriangleArrowStart:be,TriangleArrowEnd:be,LineArrow:ye,FilledCircle:ve,FilledDiamond:Se},Cn=({value:e,onSelect:t,data:n,buttonIcon:o,buttonTitle:a,overlayOwner:l})=>{const i=r.useLocalization(),c=d.useMemo(()=>Ct(n,i,Sn,e=>e.value),[n,i]);return d.createElement(Et,{buttonIcon:o,columns:3,onSelect:e=>t(e),value:e,data:c,buttonTitle:a,popupClass:Tt,overlayOwner:l})},Tn=["undo","redo","separator","select","pan","separator","text","separator","shape"],Dn=["type","backColor","separator","borderWidth","borderColor","borderStyle","separator",["toFront","toBack"],"separator",["rotateLeft","rotateRight"],"separator",["duplicate","delete"]],En=["color","separator","width","separator","style","separator","text","separator","startCap","separator","type","separator","endCap","separator","delete"],wn=["color","separator","fontSize","separator","fontType","separator",["bold","italic","underline"],"separator","align"],{ConnectionCommands:kn,Data:Pn}=t.EditingUtils,{leftCapTypes:Mn,rightCapTypes:On,floatingToolbarStyle:In}=Pn,xn=e=>{var t,n;const{connection:o,tools:a=En}=e,{controller:u}=L(),p=A("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",y=h.dashType||"solid",v=h.width||1,S=kn.getCapTypeValue(m.startCap,"start"),C=kn.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(ie,gt[ie])}},width:{component:rn,props:{value:v,onSelect:e=>(e=>{u.execute({type:"setConnectionStrokeWidth",value:e})})(e),label:g.toLanguageString(ce,gt[ce]),min:1,overlayOwner:"connection-toolbar"}},style:{component:vn,props:{value:y,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(ge,gt[ge])}},startCap:{component:Cn,props:{value:S,onSelect:e=>(e=>{u.execute({type:"setConnectionStartCap",value:e})})(e),data:Mn,buttonIcon:(null==(t=Mn.find(e=>e.value===S))?void 0:t.icon)||c.arrowLeftIcon,buttonTitle:g.toLanguageString(me,gt[me]),overlayOwner:"connection-toolbar"}},type:{component:hn,props:{value:f,onSelect:e=>(e=>{e!==f&&u.execute({type:"setConnectionType",value:e})})(e),overlayOwner:"connection-toolbar"}},endCap:{component:Cn,props:{value:C,onSelect:e=>(e=>{u.execute({type:"setConnectionEndCap",value:e})})(e),data:On,buttonIcon:(null==(n=On.find(e=>e.value===C))?void 0:n.icon)||c.arrowRightIcon,buttonTitle:g.toLanguageString(Ce,gt[Ce]),overlayOwner:"connection-toolbar"}},delete:{component:i.Button,props:{fillMode:"flat",onClick:()=>{u.execute({type:"deleteSelection"})},svgIcon:c.trashIcon,title:g.toLanguageString(le,gt[le])}},separator:{component:i.ToolbarSeparator,props:{}}},D=St(a,T);return 0===D.length?null:d.createElement(l.PopupPropsContext.Provider,{value:p},d.createElement(i.Toolbar,{fillMode:"flat",style:In,buttons:bt},D))},{floatingToolbarStyle:Ln}=t.EditingUtils.Data,Rn=e=>{const{diagram:t,tools:n,position:o="top",shapes:a,visible:s=!0}=e,{controller:p,snapshot:g}=L(),m=R(p),f=A("main-toolbar"),h=g.activeTool,b=!(!t||!t.canUndo()),y=!(!t||!t.canRedo()),v=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:v.toLanguageString(j,gt[j])}},redo:{component:i.Button,props:{svgIcon:c.redoIcon,fillMode:"flat",onClick:()=>p.execute({type:"redo"}),disabled:!y,title:v.toLanguageString(B,gt[B])}},select:{component:i.Button,props:{svgIcon:c.pointerIcon,fillMode:"flat",onClick:()=>S({type:"select"}),togglable:!0,selected:"select"===h.type,title:v.toLanguageString(N,gt[N])}},pan:{component:i.Button,props:{svgIcon:c.handIcon,fillMode:"flat",onClick:()=>S({type:"pan"}),togglable:!0,selected:"pan"===h.type,title:v.toLanguageString(K,gt[K])}},text:{component:i.Button,props:{svgIcon:c.freeTextIcon,fillMode:"flat",onClick:()=>S({type:"insert-text"}),togglable:!0,selected:"insert-text"===h.type,title:v.toLanguageString(V,gt[V])}},shape:{component:on,props:{onSelect:e=>{S({type:"insert-shape",shape:e})},value:"insert-shape"===h.type?h.shape:null,active:"insert-shape"===h.type,buttonTitle:v.toLanguageString(H,gt[H]),shapes:a,popupClass:"k-diagram-main-toolbar-popup",overlayOwner:"main-toolbar"}},separator:{component:i.ToolbarSeparator,props:{}}},T=St(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",...Ln};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:Ln,buttons:bt},T)))),t.element)},{floatingToolbarStyle:zn}=t.EditingUtils.Data,An={horizontal:"center",vertical:"center"},Fn={horizontal:"center",vertical:"bottom"},jn={above:Fn,below:{horizontal:"center",vertical:"top"}},Bn={left:0,top:0},Nn={offset:Bn,placement:"above",visible:!1},Kn=(e,t)=>({left:e.left+(t?t.left:0),top:e.top+(t?t.top:0)}),Vn=(e,t,n)=>({offset:e||Bn,placement:t,visible:n}),Hn=(e,t)=>e.visible===t.visible&&e.offset.left===t.offset.left&&e.offset.top===t.offset.top&&e.placement===t.placement,Un=({show:e,baseAnchor:n,fallbackAnchor:o=null,boundaryElement:a,anchorAlign:r=An,popupAlign:i=Fn,offset:c=Bn,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?Kn(n,c):null,[n,c]),f=d.useMemo(()=>o?Kn(o,c):null,[o,c]),[h,b]=d.useState(()=>m?Vn(m,g,!0):Nn),y=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(zn).forEach(e=>{const t=zn[e];n.style[e]=t})},[]),v=e&&!!n;d.useLayoutEffect(()=>{var e,n;if(!v||!m)return void b(e=>Hn(e,Nn)?e:Nn);let o;if(!a||!f)return o=Vn(m,g,!0),void b(e=>Hn(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=Vn(m,g,!0),void b(e=>Hn(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=>Hn(e,o)?e:o)},[a,g,v,m,f]);const S=v&&(h.visible||p.current<=0||!a||!f),C=h.visible?h.offset:m||Bn,T=h.visible?jn[h.placement]:i;return d.createElement(l.Popup,{show:S,anchorAlign:r,popupAlign:T,offset:C,positionMode:"fixed",ref:y,animate:!1},s)},{pmDocToRTContent:qn,rtContentToPM:$n,schemaSpec:Wn,styleEditor:_n,scheduleRafCall:Zn,recalcVerticalAlign:Jn}=t.EditingUtils,Yn=new a.ProseMirror.Schema(Wn),Xn=$n(a.ProseMirror.Node,Yn),{imageResizing:Gn}=a.EditorUtils;class Qn extends a.ProseMirror.EditorView{}a.ProseMirror.Node;const eo=e=>{const t=e.content.firstChild;return 0===e.childCount||!(1!==e.childCount||null==t||!t.inlineContent||0!==t.childCount)},to=e=>{var n,o;const{diagram:l,toolbars:i={}}=e,c={position:"top",tools:Tn,shapes:e.shapes},s={tools:Dn,shapes:e.shapes},u={tools:En},p={tools:wn,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:[]}:{...c,...g},y="boolean"==typeof m?m?s:{tools:[]}:{...s,...m},v="boolean"==typeof f?f?u:{tools:[]}:{...u,...f},S="boolean"==typeof h?h?p:{tools:[]}:{...p,...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):M,[n]),r=d.useCallback(()=>n?n.getSnapshot():t.emptyDiagramEditorSnapshot,[n]),l=d.useSyncExternalStore(a,r,()=>t.emptyDiagramEditorSnapshot);return{controller:n,snapshot:l}})(l),D=R(C),E=R(C),w=R(C),k=d.useRef(null),[P,O]=d.useState(null),I=d.useRef(null),[L,z]=d.useState(null),A=d.useRef(null),j=r.useLocalization(),B=T.editingSession?`${T.editingSession.target.type}:${T.editingSession.target.id}`:null,N=d.useCallback(e=>{var t;null==(t=A.current)||t.call(A),A.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=A.current)||e.call(A),A.current=null},[]),d.useLayoutEffect(()=>{var e;if(!C||!T.editingSession)return O(null),I.current=null,z(null),null==C||C.setTextEditingAdapter(null),null==(e=A.current)||e.call(A),void(A.current=null);const t=Xn(T.editingSession.item._contentVisual.options);return O(t),I.current=t,z(null),C.setTextEditingAdapter({getCommitPayload:()=>{const e=I.current;return e?{content:qn(e),isEmpty:eo(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&&y.tools.length>0&&t.isDiagramItemVisibleInViewport(U,$)),[U,W.base,T.visibility.shape,y.tools.length,$]),J=d.useMemo(()=>!!(q&&_.base&&T.visibility.connection&&v.tools.length>0&&t.isDiagramItemVisibleInViewport(q,$)),[q,_.base,T.visibility.connection,v.tools.length,$]),Y=d.useCallback(e=>{"Tab"!==e.key||e.shiftKey||L&&(e.preventDefault(),L.view.focus())},[L]);return C?d.createElement(x,{value:{controller:C,snapshot:T}},d.createElement(d.Fragment,null,d.createElement("div",{style:{position:"relative"}},d.createElement(Rn,{diagram:l,visible:T.visibility.main&&b.tools.length>0,...b}),d.createElement(Un,{show:Z,baseAnchor:W.base,fallbackAnchor:W.fallback,boundaryElement:$},d.createElement("div",{ref:D,className:Dt},d.createElement(dn,{shape:U,...y}))),d.createElement(Un,{show:J,baseAnchor:_.base,fallbackAnchor:_.fallback,boundaryElement:$},d.createElement("div",{ref:E,className:Dt},d.createElement(xn,{connection:q,...v}))),d.createElement(Un,{show:!!(T.editingSession&&L&&P&&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:Dt,onKeyDown:Y},d.createElement(Qt,{editorView:L,editItem:null==(o=T.editingSession)?void 0:o.item,defaultStyles:H,...S})))),T.editingSession&&P&&d.createElement(a.Editor,{value:P,onChange:e=>{O(e.value),I.current=e.value,L&&z({view:L.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&&P))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=j.toLanguageString(F,gt[F]);let s;const u=new a.ProseMirror.Plugin({filterTransaction:e=>(Zn(Jn,[e.doc.attrs.alignment,i,l]),z({view:s}),!0)}),p=a.ProseMirror.EditorState.create({doc:P,schema:Yn,plugins:[Gn(),...e.viewProps.state.plugins,a.EditorUtils.placeholder(c),u]});return s=new Qn({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)}}),_n(r,o,c),s.focus(),Zn(Jn,[null==(t=r.options.content)?void 0:t.align,i,l]),z({view:s}),s}}))):null};to.displayName="KendoDiagramEditor",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=P,e.DiagramConnectionTooltip=m,e.DiagramEditor=to,e.DiagramShapeTooltip=f,e.defaultTextToolbarTools=wn,e.diagramEditingContentDefaults=w});

package/index.d.mts

@@ -12,3 +12,4 @@ export * from './DiagramConnectionTooltip.js';
 export * from './DiagramShapeTooltip.js';
 export * from './interfaces/index.js';
 export * from './rich-text-editing/index.js';
+export { diagramEditingContentDefaults } from './utils/consts.js';

package/index.d.ts

@@ -12,3 +12,4 @@ export * from './DiagramConnectionTooltip.js';
 export * from './DiagramShapeTooltip.js';
 export * from './interfaces/index.js';
 export * from './rich-text-editing/index.js';
+export { diagramEditingContentDefaults } from './utils/consts.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"),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;
+"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("./utils/consts.js"),o=require("./rich-text-editing/DiagramEditor.js"),u=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.diagramEditingContentDefaults=a.diagramEditingContentDefaults;exports.DiagramEditor=o.DiagramEditor;exports.defaultTextToolbarTools=u.defaultTextToolbarTools;

package/index.mjs

@@ -5,50 +5,51 @@
  * Licensed under commercial license. See LICENSE.md in the package root for more information
  *-------------------------------------------------------------------------------------------
  */
-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 { ArrowMarker as a, CapType as t, Circle as r, CircleMarker as n, Collate as i, Connection as l, Connector as p, DataInputOutput as c, DataStorage as m, Database as g, Decision as u, Delay as D, Diagram as f, DirectAccessStorage as s, Display as T, Document as x, Extract as C, FlowchartShapeType as P, Group as M, Image as d, InternalStorage as S, Layout as y, Line as h, LogicalOr as O, ManualInputOutput as k, ManualOperation as I, MarkerType as L, Merge as E, MultiLineTextBlock as R, MultipleDocuments as b, OffPageConnector as w, OnPageConnector as A, Path as B, 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";
+import { diagramEditingContentDefaults as te } from "./utils/consts.mjs";
+import { DiagramEditor as ne } from "./rich-text-editing/DiagramEditor.mjs";
+import { defaultTextToolbarTools as le } from "./rich-text-editing/default-toolbar-tools.mjs";
 export {
   a as ArrowMarker,
-  r as CapType,
-  t as Circle,
+  t as CapType,
+  r as Circle,
   n as CircleMarker,
   i as Collate,
   l as Connection,
-  c as Connector,
-  p as DataInputOutput,
+  p as Connector,
+  c as DataInputOutput,
   m as DataStorage,
   g as Database,
   u as Decision,
   D as Delay,
   Z as Diagram,
   $ as DiagramConnectionTooltip,
-  re as DiagramEditor,
+  ne as DiagramEditor,
   oe as DiagramShapeTooltip,
-  s as DiagramWidget,
-  T as DirectAccessStorage,
-  f as Display,
+  f as DiagramWidget,
+  s as DirectAccessStorage,
+  T as Display,
   x as Document,
-  P as Extract,
-  C as FlowchartShapeType,
+  C as Extract,
+  P as FlowchartShapeType,
   M as Group,
-  S as Image,
-  y as InternalStorage,
-  d as Layout,
+  d as Image,
+  S as InternalStorage,
+  y as Layout,
   h as Line,
   O as LogicalOr,
   k as ManualInputOutput,
   I as ManualOperation,
   L as MarkerType,
-  R as Merge,
-  b as MultiLineTextBlock,
-  w as MultipleDocuments,
-  A as OffPageConnector,
-  B as OnPageConnector,
-  E as Path,
+  E as Merge,
+  R as MultiLineTextBlock,
+  b as MultipleDocuments,
+  w as OffPageConnector,
+  A as OnPageConnector,
+  B as Path,
   v as PathDefiner,
   F as Point,
   G as Polyline,
@@ -64,5 +65,6 @@ export {
   U as Terminator,
   V as TextBlock,
   X as convertToDiagramModel,
-  ne as defaultTextToolbarTools
+  le as defaultTextToolbarTools,
+  te as diagramEditingContentDefaults
 };

package/package-metadata.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=Object.freeze({name:"@progress/kendo-react-diagram",productName:"KendoReact",productCode:"KENDOUIREACT",productCodes:["KENDOUIREACT"],publishDate: 1790167787,version:"16.2.0-develop.11",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"});exports.packageMetadata=e;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=Object.freeze({name:"@progress/kendo-react-diagram",productName:"KendoReact",productCode:"KENDOUIREACT",productCodes:["KENDOUIREACT"],publishDate: 1790269424,version:"16.2.0-develop.13",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"});exports.packageMetadata=e;

package/package-metadata.mjs

@@ -6,8 +6,8 @@ export const packageMetadata = Object.freeze({
     productName: 'KendoReact',
     productCode: 'KENDOUIREACT',
     productCodes: ['KENDOUIREACT'],
-    publishDate: 1790167787,
-    version: '16.2.0-develop.11',
+    publishDate: 1790269424,
+    version: '16.2.0-develop.13',
     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'
 });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@progress/kendo-react-diagram",
-  "version": "16.2.0-develop.11",
+  "version": "16.2.0-develop.13",
   "description": "React Diagram component. KendoReact Diagram package",
   "author": "Progress",
   "license": "SEE LICENSE IN LICENSE.md",
@@ -26,18 +26,18 @@
   "sideEffects": false,
   "peerDependencies": {
     "@progress/kendo-licensing": "^1.7.2",
-    "@progress/kendo-react-buttons": "16.2.0-develop.11",
-    "@progress/kendo-react-common": "16.2.0-develop.11",
-    "@progress/kendo-react-editor": "16.2.0-develop.11",
-    "@progress/kendo-react-inputs": "16.2.0-develop.11",
-    "@progress/kendo-react-intl": "16.2.0-develop.11",
-    "@progress/kendo-react-popup": "16.2.0-develop.11",
+    "@progress/kendo-react-buttons": "16.2.0-develop.13",
+    "@progress/kendo-react-common": "16.2.0-develop.13",
+    "@progress/kendo-react-editor": "16.2.0-develop.13",
+    "@progress/kendo-react-inputs": "16.2.0-develop.13",
+    "@progress/kendo-react-intl": "16.2.0-develop.13",
+    "@progress/kendo-react-popup": "16.2.0-develop.13",
     "@progress/kendo-svg-icons": "^4.9.0 || ^5.0.0",
     "react": "^18.0.0 || ^19.0.0",
     "react-dom": "^18.0.0 || ^19.0.0"
   },
   "dependencies": {
-    "@progress/kendo-diagram-common": "^2.7.2",
+    "@progress/kendo-diagram-common": "^2.7.3",
     "prop-types": "^15.6.0"
   },
   "keywords": [
@@ -58,7 +58,7 @@
     "package": {
       "productName": "KendoReact",
       "productCode": "KENDOUIREACT",
-      "publishDate": 1790167787,
+      "publishDate": 1790269424,
       "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"
     }
   },

package/rich-text-editing/DiagramEditor.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 Ee=require("react"),l=require("@progress/kendo-react-editor"),Se=require("@progress/kendo-react-intl"),ye=require("./TextEditingToolbar.js"),xe=require("./ShapeEditingToolbar.js"),Pe=require("./ConnectionEditingToolbar.js"),k=require("./default-toolbar-tools.js"),y=require("@progress/kendo-diagram-common"),Ce=require("./MainToolbar.js"),I=require("./FloatingToolbarPopup.js"),K=require("./utils.js"),S=require("./DiagramEditorContext.js"),z=require("../messages/index.js");function ve(n){const s=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(n){for(const b in n)if(b!=="default"){const m=Object.getOwnPropertyDescriptor(n,b);Object.defineProperty(s,b,m.get?m:{enumerable:!0,get:()=>n[b]})}}return s.default=n,Object.freeze(s)}const t=ve(Ee),{pmDocToRTContent:we,rtContentToPM:ke,schemaSpec:Me,styleEditor:De,scheduleRafCall:te,recalcVerticalAlign:oe}=y.EditingUtils,ne=new l.ProseMirror.Schema(Me),Re=ke(l.ProseMirror.Node,ne),{imageResizing:Oe}=l.EditorUtils;class Ve extends l.ProseMirror.EditorView{}class Ie extends l.ProseMirror.Node{}const qe='[tabindex]:not([tabindex="-1"]), button:not([disabled]), .k-dropdownlist, .k-colorpicker',Ae=n=>{const s=n.content.firstChild;return n.childCount===0||!!(n.childCount===1&&(s!=null&&s.inlineContent)&&s.childCount===0)},Ne=n=>{var $,G;const{diagram:s,toolbars:b={}}=n,m={position:"top",tools:k.defaultMainToolbarTools,shapes:n.shapes},F={tools:k.defaultShapeToolbarTools,shapes:n.shapes},_={tools:k.defaultConnectionToolbarTools},j={tools:k.defaultTextToolbarTools,fontNames:n.fontTypes,fontSizes:n.fontSizes},{diagram:M=m,shape:D=F,connection:R=_,text:O=j}=b,B=typeof M=="boolean"?M?m:{position:"top",tools:[]}:M,V=typeof D=="boolean"?D?F:{tools:[]}:D,q=typeof R=="boolean"?R?_:{tools:[]}:R,L=typeof O=="boolean"?O?j:{tools:[]}:O,{controller:r,snapshot:e}=S.useDiagramEditorController(s),re=S.useRegisteredSurfaceRef(r),se=S.useRegisteredSurfaceRef(r),U=S.useRegisteredSurfaceRef(r),W=t.useRef(null),[h,A]=t.useState(null),x=t.useRef(null),[u,T]=t.useState(null),i=t.useRef(null),ie=Se.useLocalization(),ae=e.editingSession?`${e.editingSession.target.type}:${e.editingSession.target.id}`:null,le=t.useCallback(o=>{var a;(a=i.current)==null||a.call(i),i.current=o&&r?r.registerSurface(o):null},[r]),ce=t.useCallback(o=>{W.current=o,U(o)},[U]),ue=t.useCallback(()=>{var a;const o=(a=W.current)==null?void 0:a.querySelector(qe);return o?(o.focus({preventScroll:!0}),!0):!1},[]);t.useEffect(()=>()=>{var o;(o=i.current)==null||o.call(i),i.current=null},[]),t.useLayoutEffect(()=>{var a;if(!r||!e.editingSession){A(null),x.current=null,T(null),r==null||r.setTextEditingAdapter(null),(a=i.current)==null||a.call(i),i.current=null;return}const o=Re(e.editingSession.item._contentVisual.options);return A(o),x.current=o,T(null),r.setTextEditingAdapter({getCommitPayload:()=>{const d=x.current;return d?{content:we(d),isEmpty:Ae(d),textContent:d.textContent}:null}}),()=>{r.setTextEditingAdapter(null)}},[r,ae,e.editingSession]);const de=e.editingSession?e.editingSession.item._contentVisual.options:{},g=e.selectedShape,p=e.selectedConnection,f=($=s==null?void 0:s.element)!=null?$:null,P=t.useMemo(()=>y.getContextToolbarAnchors(g,e.anchors.shape),[g,e.anchors.shape]),C=t.useMemo(()=>y.getContextToolbarAnchors(p,e.anchors.connection),[p,e.anchors.connection]),be=t.useMemo(()=>!!(g&&P.base&&e.visibility.shape&&V.tools.length>0&&y.isDiagramItemVisibleInViewport(g,f)),[g,P.base,e.visibility.shape,V.tools.length,f]),ge=t.useMemo(()=>!!(p&&C.base&&e.visibility.connection&&q.tools.length>0&&y.isDiagramItemVisibleInViewport(p,f)),[p,C.base,e.visibility.connection,q.tools.length,f]),pe=o=>{A(o.value),x.current=o.value,u&&T({view:u.view})},fe=o=>{var Q;const a=o.target;if(!e.editingSession||!a.element||!r||!h)return;const d=a.element;le(d);const{item:v}=e.editingSession,H=v.name==="Shape"?v._contentVisual.padding():{top:0,bottom:0,left:0,right:0},N=o.dom,J=ie.toLanguageString(z.placeholder,z.messages[z.placeholder]);let E;const he=new l.ProseMirror.Plugin({filterTransaction:w=>(te(oe,[w.doc.attrs.alignment,N,H]),T({view:E}),!0)}),Te=l.ProseMirror.EditorState.create({doc:h,schema:ne,plugins:[Oe(),...o.viewProps.state.plugins,l.EditorUtils.placeholder(J),he]});return E=new Ve({mount:N},{...o.viewProps,state:Te,handleKeyDown:(w,c)=>{var X,Y,Z,ee;return c.key==="Escape"?(r.handleKeyDown(c),c.defaultPrevented||((Y=(X=o.viewProps).handleKeyDown)==null?void 0:Y.call(X,w,c))===!0):c.key==="F10"&&c.altKey&&ue()?(c.preventDefault(),!0):(ee=(Z=o.viewProps).handleKeyDown)==null?void 0:ee.call(Z,w,c)}}),De(v,d,J),E.focus(),te(oe,[(Q=v.options.content)==null?void 0:Q.align,N,H]),T({view:E}),E},me=t.useCallback(o=>{o.key!=="Tab"||o.shiftKey||u&&(o.preventDefault(),u.view.focus())},[u]);return r?t.createElement(S.DiagramEditorProvider,{value:{controller:r,snapshot:e}},t.createElement(t.Fragment,null,t.createElement("div",{style:{position:"relative"}},t.createElement(Ce.MainToolbar,{diagram:s,visible:e.visibility.main&&B.tools.length>0,...B}),t.createElement(I.FloatingToolbarPopup,{show:be,baseAnchor:P.base,fallbackAnchor:P.fallback,boundaryElement:f},t.createElement("div",{ref:re,className:K.toolbarPopupWrapClass},t.createElement(xe.ShapeEditingToolbar,{shape:g,...V}))),t.createElement(I.FloatingToolbarPopup,{show:ge,baseAnchor:C.base,fallbackAnchor:C.fallback,boundaryElement:f},t.createElement("div",{ref:se,className:K.toolbarPopupWrapClass},t.createElement(Pe.ConnectionEditingToolbar,{connection:p,...q}))),t.createElement(I.FloatingToolbarPopup,{show:!!(e.editingSession&&u&&h&&e.anchors.textEditing&&e.visibility.textEditing&&L.tools.length>0),baseAnchor:e.anchors.textEditing?{left:e.anchors.textEditing.x,top:e.anchors.textEditing.y}:null},t.createElement("div",{ref:ce,className:K.toolbarPopupWrapClass,onKeyDown:me},t.createElement(ye.TextEditingToolbar,{editorView:u,editItem:(G=e.editingSession)==null?void 0:G.item,defaultStyles:de,...L})))),e.editingSession&&h&&t.createElement(l.Editor,{value:h,onChange:pe,defaultEditMode:"div",className:"k-diagram-rich-text-editor",style:{background:"transparent"},onMount:fe}))):null};exports.DiagramEditor=Ne;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const ye=require("react"),l=require("@progress/kendo-react-editor"),Se=require("@progress/kendo-react-intl"),xe=require("./TextEditingToolbar.js"),Pe=require("./ShapeEditingToolbar.js"),Ce=require("./ConnectionEditingToolbar.js"),k=require("./default-toolbar-tools.js"),S=require("@progress/kendo-diagram-common"),ve=require("./MainToolbar.js"),F=require("./FloatingToolbarPopup.js"),_=require("./utils.js"),y=require("./DiagramEditorContext.js"),j=require("../messages/index.js");function we(n){const i=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(n){for(const b in n)if(b!=="default"){const g=Object.getOwnPropertyDescriptor(n,b);Object.defineProperty(i,b,g.get?g:{enumerable:!0,get:()=>n[b]})}}return i.default=n,Object.freeze(i)}const t=we(ye),{pmDocToRTContent:ke,rtContentToPM:Me,schemaSpec:De,styleEditor:Re,scheduleRafCall:te,recalcVerticalAlign:oe}=S.EditingUtils,ne=new l.ProseMirror.Schema(De),Oe=Me(l.ProseMirror.Node,ne),{imageResizing:Ve}=l.EditorUtils;class qe extends l.ProseMirror.EditorView{}class Ke extends l.ProseMirror.Node{}const Ae='[tabindex]:not([tabindex="-1"]), button:not([disabled]), .k-dropdownlist, .k-colorpicker',Ne=n=>{const i=n.content.firstChild;return n.childCount===0||!!(n.childCount===1&&(i!=null&&i.inlineContent)&&i.childCount===0)},re=n=>{var $,G;const{diagram:i,toolbars:b={}}=n,g={position:"top",tools:k.defaultMainToolbarTools,shapes:n.shapes},M={tools:k.defaultShapeToolbarTools,shapes:n.shapes},D={tools:k.defaultConnectionToolbarTools},R={tools:k.defaultTextToolbarTools,fontNames:n.fontTypes,fontSizes:n.fontSizes},{diagram:O=g,shape:V=M,connection:q=D,text:A=R}=b,B=typeof O=="boolean"?O?g:{position:"top",tools:[]}:{...g,...O},N=typeof V=="boolean"?V?M:{tools:[]}:{...M,...V},K=typeof q=="boolean"?q?D:{tools:[]}:{...D,...q},L=typeof A=="boolean"?A?R:{tools:[]}:{...R,...A},{controller:r,snapshot:e}=y.useDiagramEditorController(i),ie=y.useRegisteredSurfaceRef(r),se=y.useRegisteredSurfaceRef(r),U=y.useRegisteredSurfaceRef(r),W=t.useRef(null),[h,I]=t.useState(null),x=t.useRef(null),[u,T]=t.useState(null),s=t.useRef(null),ae=Se.useLocalization(),le=e.editingSession?`${e.editingSession.target.type}:${e.editingSession.target.id}`:null,ce=t.useCallback(o=>{var a;(a=s.current)==null||a.call(s),s.current=o&&r?r.registerSurface(o):null},[r]),ue=t.useCallback(o=>{W.current=o,U(o)},[U]),de=t.useCallback(()=>{var a;const o=(a=W.current)==null?void 0:a.querySelector(Ae);return o?(o.focus({preventScroll:!0}),!0):!1},[]);t.useEffect(()=>()=>{var o;(o=s.current)==null||o.call(s),s.current=null},[]),t.useLayoutEffect(()=>{var a;if(!r||!e.editingSession){I(null),x.current=null,T(null),r==null||r.setTextEditingAdapter(null),(a=s.current)==null||a.call(s),s.current=null;return}const o=Oe(e.editingSession.item._contentVisual.options);return I(o),x.current=o,T(null),r.setTextEditingAdapter({getCommitPayload:()=>{const d=x.current;return d?{content:ke(d),isEmpty:Ne(d),textContent:d.textContent}:null}}),()=>{r.setTextEditingAdapter(null)}},[r,le,e.editingSession]);const be=e.editingSession?e.editingSession.item._contentVisual.options:{},p=e.selectedShape,f=e.selectedConnection,m=($=i==null?void 0:i.element)!=null?$:null,P=t.useMemo(()=>S.getContextToolbarAnchors(p,e.anchors.shape),[p,e.anchors.shape]),C=t.useMemo(()=>S.getContextToolbarAnchors(f,e.anchors.connection),[f,e.anchors.connection]),ge=t.useMemo(()=>!!(p&&P.base&&e.visibility.shape&&N.tools.length>0&&S.isDiagramItemVisibleInViewport(p,m)),[p,P.base,e.visibility.shape,N.tools.length,m]),pe=t.useMemo(()=>!!(f&&C.base&&e.visibility.connection&&K.tools.length>0&&S.isDiagramItemVisibleInViewport(f,m)),[f,C.base,e.visibility.connection,K.tools.length,m]),fe=o=>{I(o.value),x.current=o.value,u&&T({view:u.view})},me=o=>{var Q;const a=o.target;if(!e.editingSession||!a.element||!r||!h)return;const d=a.element;ce(d);const{item:v}=e.editingSession,H=v.name==="Shape"?v._contentVisual.padding():{top:0,bottom:0,left:0,right:0},z=o.dom,J=ae.toLanguageString(j.placeholder,j.messages[j.placeholder]);let E;const Te=new l.ProseMirror.Plugin({filterTransaction:w=>(te(oe,[w.doc.attrs.alignment,z,H]),T({view:E}),!0)}),Ee=l.ProseMirror.EditorState.create({doc:h,schema:ne,plugins:[Ve(),...o.viewProps.state.plugins,l.EditorUtils.placeholder(J),Te]});return E=new qe({mount:z},{...o.viewProps,state:Ee,handleKeyDown:(w,c)=>{var X,Y,Z,ee;return c.key==="Escape"?(r.handleKeyDown(c),c.defaultPrevented||((Y=(X=o.viewProps).handleKeyDown)==null?void 0:Y.call(X,w,c))===!0):c.key==="F10"&&c.altKey&&de()?(c.preventDefault(),!0):(ee=(Z=o.viewProps).handleKeyDown)==null?void 0:ee.call(Z,w,c)}}),Re(v,d,J),E.focus(),te(oe,[(Q=v.options.content)==null?void 0:Q.align,z,H]),T({view:E}),E},he=t.useCallback(o=>{o.key!=="Tab"||o.shiftKey||u&&(o.preventDefault(),u.view.focus())},[u]);return r?t.createElement(y.DiagramEditorProvider,{value:{controller:r,snapshot:e}},t.createElement(t.Fragment,null,t.createElement("div",{style:{position:"relative"}},t.createElement(ve.MainToolbar,{diagram:i,visible:e.visibility.main&&B.tools.length>0,...B}),t.createElement(F.FloatingToolbarPopup,{show:ge,baseAnchor:P.base,fallbackAnchor:P.fallback,boundaryElement:m},t.createElement("div",{ref:ie,className:_.toolbarPopupWrapClass},t.createElement(Pe.ShapeEditingToolbar,{shape:p,...N}))),t.createElement(F.FloatingToolbarPopup,{show:pe,baseAnchor:C.base,fallbackAnchor:C.fallback,boundaryElement:m},t.createElement("div",{ref:se,className:_.toolbarPopupWrapClass},t.createElement(Ce.ConnectionEditingToolbar,{connection:f,...K}))),t.createElement(F.FloatingToolbarPopup,{show:!!(e.editingSession&&u&&h&&e.anchors.textEditing&&e.visibility.textEditing&&L.tools.length>0),baseAnchor:e.anchors.textEditing?{left:e.anchors.textEditing.x,top:e.anchors.textEditing.y}:null},t.createElement("div",{ref:ue,className:_.toolbarPopupWrapClass,onKeyDown:he},t.createElement(xe.TextEditingToolbar,{editorView:u,editItem:(G=e.editingSession)==null?void 0:G.item,defaultStyles:be,...L})))),e.editingSession&&h&&t.createElement(l.Editor,{value:h,onChange:fe,defaultEditMode:"div",className:"k-diagram-rich-text-editor",style:{background:"transparent"},onMount:me}))):null};re.displayName="KendoDiagramEditor";exports.DiagramEditor=re;

package/rich-text-editing/DiagramEditor.mjs

@@ -11,40 +11,40 @@ import { useLocalization as Se } from "@progress/kendo-react-intl";
 import { TextEditingToolbar as xe } from "./TextEditingToolbar.mjs";
 import { ShapeEditingToolbar as ve } from "./ShapeEditingToolbar.mjs";
 import { ConnectionEditingToolbar as we } from "./ConnectionEditingToolbar.mjs";
-import { defaultTextToolbarTools as Ce, defaultMainToolbarTools as Pe, defaultShapeToolbarTools as ke, defaultConnectionToolbarTools as Ve } from "./default-toolbar-tools.mjs";
-import { getContextToolbarAnchors as X, isDiagramItemVisibleInViewport as Y, EditingUtils as Ae } from "@progress/kendo-diagram-common";
-import { MainToolbar as De } from "./MainToolbar.mjs";
-import { FloatingToolbarPopup as M } from "./FloatingToolbarPopup.mjs";
-import { toolbarPopupWrapClass as R } from "./utils.mjs";
-import { useDiagramEditorController as Me, useRegisteredSurfaceRef as N, DiagramEditorProvider as Re } from "./DiagramEditorContext.mjs";
-import { placeholder as Z, messages as Ne } from "../messages/index.mjs";
-const { pmDocToRTContent: Oe, rtContentToPM: Ke, schemaSpec: ze, styleEditor: Be, scheduleRafCall: ee, recalcVerticalAlign: te } = Ae, ne = new b.Schema(ze), Ie = Ke(b.Node, ne), { imageResizing: Fe } = oe;
+import { defaultTextToolbarTools as Ce, defaultMainToolbarTools as Pe, defaultShapeToolbarTools as ke, defaultConnectionToolbarTools as De } from "./default-toolbar-tools.mjs";
+import { getContextToolbarAnchors as X, isDiagramItemVisibleInViewport as Y, EditingUtils as Ve } from "@progress/kendo-diagram-common";
+import { MainToolbar as Ae } from "./MainToolbar.mjs";
+import { FloatingToolbarPopup as K } from "./FloatingToolbarPopup.mjs";
+import { toolbarPopupWrapClass as z } from "./utils.mjs";
+import { useDiagramEditorController as Me, useRegisteredSurfaceRef as B, DiagramEditorProvider as Ne } from "./DiagramEditorContext.mjs";
+import { placeholder as Z, messages as Re } from "../messages/index.mjs";
+const { pmDocToRTContent: Oe, rtContentToPM: Ke, schemaSpec: ze, styleEditor: Be, scheduleRafCall: ee, recalcVerticalAlign: te } = Ve, ne = new b.Schema(ze), Ie = Ke(b.Node, ne), { imageResizing: Fe } = oe;
 class Le extends b.EditorView {
 }
-class tt extends b.Node {
+class ot extends b.Node {
 }
 const _e = '[tabindex]:not([tabindex="-1"]), button:not([disabled]), .k-dropdownlist, .k-colorpicker', Ue = (i) => {
-  const r = i.content.firstChild;
-  return i.childCount === 0 || !!(i.childCount === 1 && (r != null && r.inlineContent) && r.childCount === 0);
-}, ot = (i) => {
+  const l = i.content.firstChild;
+  return i.childCount === 0 || !!(i.childCount === 1 && (l != null && l.inlineContent) && l.childCount === 0);
+}, $e = (i) => {
   var U, $;
-  const { diagram: r, toolbars: se = {} } = i, O = {
+  const { diagram: l, toolbars: se = {} } = i, v = {
     position: "top",
     tools: Pe,
     shapes: i.shapes
-  }, K = { tools: ke, shapes: i.shapes }, z = { tools: Ve }, B = {
+  }, w = { tools: ke, shapes: i.shapes }, C = { tools: De }, P = {
     tools: Ce,
     fontNames: i.fontTypes,
     fontSizes: i.fontSizes
   }, {
-    diagram: v = O,
-    shape: w = K,
-    connection: C = z,
-    text: P = B
-  } = se, I = typeof v == "boolean" ? v ? O : { position: "top", tools: [] } : v, k = typeof w == "boolean" ? w ? K : { tools: [] } : w, V = typeof C == "boolean" ? C ? z : { tools: [] } : C, F = typeof P == "boolean" ? P ? B : { tools: [] } : P, { controller: n, snapshot: e } = Me(r), ie = N(n), le = N(n), L = N(n), _ = t.useRef(null), [p, A] = t.useState(null), T = t.useRef(null), [c, g] = t.useState(null), s = t.useRef(null), re = Se(), ae = e.editingSession ? `${e.editingSession.target.type}:${e.editingSession.target.id}` : null, ce = t.useCallback(
+    diagram: k = v,
+    shape: D = w,
+    connection: V = C,
+    text: A = P
+  } = se, I = typeof k == "boolean" ? k ? v : { position: "top", tools: [] } : { ...v, ...k }, M = typeof D == "boolean" ? D ? w : { tools: [] } : { ...w, ...D }, N = typeof V == "boolean" ? V ? C : { tools: [] } : { ...C, ...V }, F = typeof A == "boolean" ? A ? P : { tools: [] } : { ...P, ...A }, { controller: n, snapshot: e } = Me(l), ie = B(n), re = B(n), L = B(n), _ = t.useRef(null), [p, R] = t.useState(null), T = t.useRef(null), [c, g] = t.useState(null), s = t.useRef(null), le = Se(), ae = e.editingSession ? `${e.editingSession.target.type}:${e.editingSession.target.id}` : null, ce = t.useCallback(
     (o) => {
-      var l;
-      (l = s.current) == null || l.call(s), s.current = o && n ? n.registerSurface(o) : null;
+      var r;
+      (r = s.current) == null || r.call(s), s.current = o && n ? n.registerSurface(o) : null;
     },
     [n]
   ), ue = t.useCallback(
@@ -53,21 +53,21 @@ const _e = '[tabindex]:not([tabindex="-1"]), button:not([disabled]), .k-dropdown
     },
     [L]
   ), de = t.useCallback(() => {
-    var l;
-    const o = (l = _.current) == null ? void 0 : l.querySelector(_e);
+    var r;
+    const o = (r = _.current) == null ? void 0 : r.querySelector(_e);
     return o ? (o.focus({ preventScroll: !0 }), !0) : !1;
   }, []);
   t.useEffect(() => () => {
     var o;
     (o = s.current) == null || o.call(s), s.current = null;
   }, []), t.useLayoutEffect(() => {
-    var l;
+    var r;
     if (!n || !e.editingSession) {
-      A(null), T.current = null, g(null), n == null || n.setTextEditingAdapter(null), (l = s.current) == null || l.call(s), s.current = null;
+      R(null), T.current = null, g(null), n == null || n.setTextEditingAdapter(null), (r = s.current) == null || r.call(s), s.current = null;
       return;
     }
     const o = Ie(e.editingSession.item._contentVisual.options);
-    return A(o), T.current = o, g(null), n.setTextEditingAdapter({
+    return R(o), T.current = o, g(null), n.setTextEditingAdapter({
       getCommitPayload: () => {
         const u = T.current;
         return u ? {
@@ -80,31 +80,31 @@ const _e = '[tabindex]:not([tabindex="-1"]), button:not([disabled]), .k-dropdown
       n.setTextEditingAdapter(null);
     };
   }, [n, ae, e.editingSession]);
-  const me = e.editingSession ? e.editingSession.item._contentVisual.options : {}, d = e.selectedShape, m = e.selectedConnection, f = (U = r == null ? void 0 : r.element) != null ? U : null, E = t.useMemo(() => X(d, e.anchors.shape), [d, e.anchors.shape]), y = t.useMemo(() => X(m, e.anchors.connection), [m, e.anchors.connection]), fe = t.useMemo(() => !!(d && E.base && e.visibility.shape && k.tools.length > 0 && Y(d, f)), [
+  const me = e.editingSession ? e.editingSession.item._contentVisual.options : {}, d = e.selectedShape, m = e.selectedConnection, f = (U = l == null ? void 0 : l.element) != null ? U : null, E = t.useMemo(() => X(d, e.anchors.shape), [d, e.anchors.shape]), y = t.useMemo(() => X(m, e.anchors.connection), [m, e.anchors.connection]), fe = t.useMemo(() => !!(d && E.base && e.visibility.shape && M.tools.length > 0 && Y(d, f)), [
     d,
     E.base,
     e.visibility.shape,
-    k.tools.length,
+    M.tools.length,
     f
-  ]), be = t.useMemo(() => !!(m && y.base && e.visibility.connection && V.tools.length > 0 && Y(m, f)), [
+  ]), be = t.useMemo(() => !!(m && y.base && e.visibility.connection && N.tools.length > 0 && Y(m, f)), [
     m,
     y.base,
     e.visibility.connection,
-    V.tools.length,
+    N.tools.length,
     f
   ]), pe = (o) => {
-    A(o.value), T.current = o.value, c && g({ view: c.view });
+    R(o.value), T.current = o.value, c && g({ view: c.view });
   }, ge = (o) => {
     var j;
-    const l = o.target;
-    if (!e.editingSession || !l.element || !n || !p)
+    const r = o.target;
+    if (!e.editingSession || !r.element || !n || !p)
       return;
-    const u = l.element;
+    const u = r.element;
     ce(u);
-    const { item: S } = e.editingSession, q = S.name === "Shape" ? S._contentVisual.padding() : { top: 0, bottom: 0, left: 0, right: 0 }, D = o.dom, W = re.toLanguageString(Z, Ne[Z]);
+    const { item: S } = e.editingSession, q = S.name === "Shape" ? S._contentVisual.padding() : { top: 0, bottom: 0, left: 0, right: 0 }, O = o.dom, W = le.toLanguageString(Z, Re[Z]);
     let h;
     const Te = new b.Plugin({
-      filterTransaction: (x) => (ee(te, [x.doc.attrs.alignment, D, q]), g({ view: h }), !0)
+      filterTransaction: (x) => (ee(te, [x.doc.attrs.alignment, O, q]), g({ view: h }), !0)
     }), Ee = b.EditorState.create({
       doc: p,
       schema: ne,
@@ -116,7 +116,7 @@ const _e = '[tabindex]:not([tabindex="-1"]), button:not([disabled]), .k-dropdown
       ]
     });
     return h = new Le(
-      { mount: D },
+      { mount: O },
       {
         ...o.viewProps,
         state: Ee,
@@ -125,40 +125,40 @@ const _e = '[tabindex]:not([tabindex="-1"]), button:not([disabled]), .k-dropdown
           return a.key === "Escape" ? (n.handleKeyDown(a), a.defaultPrevented || ((H = (G = o.viewProps).handleKeyDown) == null ? void 0 : H.call(G, x, a)) === !0) : a.key === "F10" && a.altKey && de() ? (a.preventDefault(), !0) : (Q = (J = o.viewProps).handleKeyDown) == null ? void 0 : Q.call(J, x, a);
         }
       }
-    ), Be(S, u, W), h.focus(), ee(te, [(j = S.options.content) == null ? void 0 : j.align, D, q]), g({ view: h }), h;
+    ), Be(S, u, W), h.focus(), ee(te, [(j = S.options.content) == null ? void 0 : j.align, O, q]), g({ view: h }), h;
   }, he = t.useCallback(
     (o) => {
       o.key !== "Tab" || o.shiftKey || c && (o.preventDefault(), c.view.focus());
     },
     [c]
   );
-  return n ? /* @__PURE__ */ t.createElement(Re, { value: { controller: n, snapshot: e } }, /* @__PURE__ */ t.createElement(t.Fragment, null, /* @__PURE__ */ t.createElement("div", { style: { position: "relative" } }, /* @__PURE__ */ t.createElement(
-    De,
+  return n ? /* @__PURE__ */ t.createElement(Ne, { value: { controller: n, snapshot: e } }, /* @__PURE__ */ t.createElement(t.Fragment, null, /* @__PURE__ */ t.createElement("div", { style: { position: "relative" } }, /* @__PURE__ */ t.createElement(
+    Ae,
     {
-      diagram: r,
+      diagram: l,
       visible: e.visibility.main && I.tools.length > 0,
       ...I
     }
   ), /* @__PURE__ */ t.createElement(
-    M,
+    K,
     {
       show: fe,
       baseAnchor: E.base,
       fallbackAnchor: E.fallback,
       boundaryElement: f
     },
-    /* @__PURE__ */ t.createElement("div", { ref: ie, className: R }, /* @__PURE__ */ t.createElement(ve, { shape: d, ...k }))
+    /* @__PURE__ */ t.createElement("div", { ref: ie, className: z }, /* @__PURE__ */ t.createElement(ve, { shape: d, ...M }))
   ), /* @__PURE__ */ t.createElement(
-    M,
+    K,
     {
       show: be,
       baseAnchor: y.base,
       fallbackAnchor: y.fallback,
       boundaryElement: f
     },
-    /* @__PURE__ */ t.createElement("div", { ref: le, className: R }, /* @__PURE__ */ t.createElement(we, { connection: m, ...V }))
+    /* @__PURE__ */ t.createElement("div", { ref: re, className: z }, /* @__PURE__ */ t.createElement(we, { connection: m, ...N }))
   ), /* @__PURE__ */ t.createElement(
-    M,
+    K,
     {
       show: !!(e.editingSession && c && p && e.anchors.textEditing && e.visibility.textEditing && F.tools.length > 0),
       baseAnchor: e.anchors.textEditing ? { left: e.anchors.textEditing.x, top: e.anchors.textEditing.y } : null
@@ -167,7 +167,7 @@ const _e = '[tabindex]:not([tabindex="-1"]), button:not([disabled]), .k-dropdown
       "div",
       {
         ref: ue,
-        className: R,
+        className: z,
         onKeyDown: he
       },
       /* @__PURE__ */ t.createElement(
@@ -192,6 +192,7 @@ const _e = '[tabindex]:not([tabindex="-1"]), button:not([disabled]), .k-dropdown
     }
   ))) : null;
 };
+$e.displayName = "KendoDiagramEditor";
 export {
-  ot as DiagramEditor
+  $e as DiagramEditor
 };

package/rich-text-editing/types.d.ts

@@ -10,5 +10,5 @@ export type { ToolbarTools, FontTypeItem, FontSizeItem, ConnectionToolbarOptions
 /**
  * The props of the `DiagramEditor` component.
  */
-export interface DiagramEditorProps extends DiagramEditorOptions {
+export interface DiagramEditorProps extends Omit<DiagramEditorOptions, 'diagram'> {
 }

package/utils/consts.d.ts

@@ -5,6 +5,7 @@
  * Licensed under commercial license. See LICENSE.md in the package root for more information
  *-------------------------------------------------------------------------------------------
  */
+import { ShapeRichTextContent, ConnectionRichTextContent } from '@progress/kendo-diagram-common';
 import { DiagramNavigationOptions, DiagramDataItem } from '../interfaces/index.js';
 import { ConnectionOptions } from '../interfaces/ConnectionTypes';
 import { ShapeOptions } from '../interfaces/ShapeTypes';
@@ -35,3 +36,7 @@ export declare const diagramDefaultProps: {
     zoomRate: number;
     role: string;
 };
+/**
+ * The default content style for shapes and connections in the diagram for text editing.
+ */
+export declare const diagramEditingContentDefaults: ShapeRichTextContent | ConnectionRichTextContent;

package/utils/consts.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={enabled:!0,smallStep:1,largeStep:5},a={connections:[],shapes:[],editable:!0,pannable:{enabled:!0,showScrollbars:!0,autoHideScrollbars:!0},selectable:!0,zoom:1,zoomMax:2,zoomMin:.1,zoomRate:.1,role:"application"};exports.DEFAULT_NAVIGABLE_OPTIONS=e;exports.diagramDefaultProps=a;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("@progress/kendo-diagram-common"),t={enabled:!0,smallStep:1,largeStep:5},a={connections:[],shapes:[],editable:!0,pannable:{enabled:!0,showScrollbars:!0,autoHideScrollbars:!0},selectable:!0,zoom:1,zoomMax:2,zoomMin:.1,zoomRate:.1,role:"application"},o={fontSize:16,fontFamily:e.EditingUtils.Data.fontNames[0].value};exports.DEFAULT_NAVIGABLE_OPTIONS=t;exports.diagramDefaultProps=a;exports.diagramEditingContentDefaults=o;

package/utils/consts.mjs

@@ -5,7 +5,8 @@
  * Licensed under commercial license. See LICENSE.md in the package root for more information
  *-------------------------------------------------------------------------------------------
  */
-const e = { enabled: !0, smallStep: 1, largeStep: 5 }, o = {
+import { EditingUtils as e } from "@progress/kendo-diagram-common";
+const a = { enabled: !0, smallStep: 1, largeStep: 5 }, o = {
   connections: [],
   shapes: [],
   editable: !0,
@@ -20,8 +21,12 @@ const e = { enabled: !0, smallStep: 1, largeStep: 5 }, o = {
   zoomMin: 0.1,
   zoomRate: 0.1,
   role: "application"
+}, l = {
+  fontSize: 16,
+  fontFamily: e.Data.fontNames[0].value
 };
 export {
-  e as DEFAULT_NAVIGABLE_OPTIONS,
-  o as diagramDefaultProps
+  a as DEFAULT_NAVIGABLE_OPTIONS,
+  o as diagramDefaultProps,
+  l as diagramEditingContentDefaults
 };