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

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
 };