@mopex/react-gantt-flow
Version:
A lightweight and high-performance React (TypeScript) based Gantt chart component.
918 lines (917 loc) • 26.3 kB
JavaScript
import pe, { useMemo as te, memo as C, useState as Y, useRef as ce, useEffect as re, useCallback as De } from "react";
import './index.css';var Q = { exports: {} }, V = {};
/**
* @license React
* react-jsx-runtime.production.js
*
* Copyright (c) Meta Platforms, Inc. and affiliates.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*/
var ie;
function ge() {
if (ie) return V;
ie = 1;
var e = Symbol.for("react.transitional.element"), r = Symbol.for("react.fragment");
function a(n, s, o) {
var u = null;
if (o !== void 0 && (u = "" + o), s.key !== void 0 && (u = "" + s.key), "key" in s) {
o = {};
for (var f in s)
f !== "key" && (o[f] = s[f]);
} else o = s;
return s = o.ref, {
$$typeof: e,
type: n,
key: u,
ref: s !== void 0 ? s : null,
props: o
};
}
return V.Fragment = r, V.jsx = a, V.jsxs = a, V;
}
var J = {};
/**
* @license React
* react-jsx-runtime.development.js
*
* Copyright (c) Meta Platforms, Inc. and affiliates.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*/
var le;
function Te() {
return le || (le = 1, process.env.NODE_ENV !== "production" && function() {
function e(t) {
if (t == null) return null;
if (typeof t == "function")
return t.$$typeof === W ? null : t.displayName || t.name || null;
if (typeof t == "string") return t;
switch (t) {
case x:
return "Fragment";
case v:
return "Profiler";
case O:
return "StrictMode";
case M:
return "Suspense";
case w:
return "SuspenseList";
case H:
return "Activity";
}
if (typeof t == "object")
switch (typeof t.tag == "number" && console.error(
"Received an unexpected object in getComponentNameFromType(). This is likely a bug in React. Please file an issue."
), t.$$typeof) {
case _:
return "Portal";
case N:
return (t.displayName || "Context") + ".Provider";
case I:
return (t._context.displayName || "Context") + ".Consumer";
case y:
var i = t.render;
return t = t.displayName, t || (t = i.displayName || i.name || "", t = t !== "" ? "ForwardRef(" + t + ")" : "ForwardRef"), t;
case $:
return i = t.displayName || null, i !== null ? i : e(t.type) || "Memo";
case S:
i = t._payload, t = t._init;
try {
return e(t(i));
} catch {
}
}
return null;
}
function r(t) {
return "" + t;
}
function a(t) {
try {
r(t);
var i = !1;
} catch {
i = !0;
}
if (i) {
i = console;
var g = i.error, T = typeof Symbol == "function" && Symbol.toStringTag && t[Symbol.toStringTag] || t.constructor.name || "Object";
return g.call(
i,
"The provided key is an unsupported type %s. This value must be coerced to a string before using it here.",
T
), r(t);
}
}
function n(t) {
if (t === x) return "<>";
if (typeof t == "object" && t !== null && t.$$typeof === S)
return "<...>";
try {
var i = e(t);
return i ? "<" + i + ">" : "<...>";
} catch {
return "<...>";
}
}
function s() {
var t = L.A;
return t === null ? null : t.getOwner();
}
function o() {
return Error("react-stack-top-frame");
}
function u(t) {
if (k.call(t, "key")) {
var i = Object.getOwnPropertyDescriptor(t, "key").get;
if (i && i.isReactWarning) return !1;
}
return t.key !== void 0;
}
function f(t, i) {
function g() {
A || (A = !0, console.error(
"%s: `key` is not a prop. Trying to access it will result in `undefined` being returned. If you need to access the same value within the child component, you should pass it as a different prop. (https://react.dev/link/special-props)",
i
));
}
g.isReactWarning = !0, Object.defineProperty(t, "key", {
get: g,
configurable: !0
});
}
function d() {
var t = e(this.type);
return P[t] || (P[t] = !0, console.error(
"Accessing element.ref was removed in React 19. ref is now a regular prop. It will be removed from the JSX Element type in a future release."
)), t = this.props.ref, t !== void 0 ? t : null;
}
function l(t, i, g, T, j, E, G, B) {
return g = E.ref, t = {
$$typeof: R,
type: t,
key: i,
props: E,
_owner: j
}, (g !== void 0 ? g : null) !== null ? Object.defineProperty(t, "ref", {
enumerable: !1,
get: d
}) : Object.defineProperty(t, "ref", { enumerable: !1, value: null }), t._store = {}, Object.defineProperty(t._store, "validated", {
configurable: !1,
enumerable: !1,
writable: !0,
value: 0
}), Object.defineProperty(t, "_debugInfo", {
configurable: !1,
enumerable: !1,
writable: !0,
value: null
}), Object.defineProperty(t, "_debugStack", {
configurable: !1,
enumerable: !1,
writable: !0,
value: G
}), Object.defineProperty(t, "_debugTask", {
configurable: !1,
enumerable: !1,
writable: !0,
value: B
}), Object.freeze && (Object.freeze(t.props), Object.freeze(t)), t;
}
function p(t, i, g, T, j, E, G, B) {
var b = i.children;
if (b !== void 0)
if (T)
if (X(b)) {
for (T = 0; T < b.length; T++)
h(b[T]);
Object.freeze && Object.freeze(b);
} else
console.error(
"React.jsx: Static children should always be an array. You are likely explicitly calling React.jsxs or React.jsxDEV. Use the Babel transform instead."
);
else h(b);
if (k.call(i, "key")) {
b = e(t);
var U = Object.keys(i).filter(function(Re) {
return Re !== "key";
});
T = 0 < U.length ? "{key: someKey, " + U.join(": ..., ") + ": ...}" : "{key: someKey}", K[b + T] || (U = 0 < U.length ? "{" + U.join(": ..., ") + ": ...}" : "{}", console.error(
`A props object containing a "key" prop is being spread into JSX:
let props = %s;
<%s {...props} />
React keys must be passed directly to JSX without using spread:
let props = %s;
<%s key={someKey} {...props} />`,
T,
b,
U,
b
), K[b + T] = !0);
}
if (b = null, g !== void 0 && (a(g), b = "" + g), u(i) && (a(i.key), b = "" + i.key), "key" in i) {
g = {};
for (var se in i)
se !== "key" && (g[se] = i[se]);
} else g = i;
return b && f(
g,
typeof t == "function" ? t.displayName || t.name || "Unknown" : t
), l(
t,
b,
E,
j,
s(),
g,
G,
B
);
}
function h(t) {
typeof t == "object" && t !== null && t.$$typeof === R && t._store && (t._store.validated = 1);
}
var D = pe, R = Symbol.for("react.transitional.element"), _ = Symbol.for("react.portal"), x = Symbol.for("react.fragment"), O = Symbol.for("react.strict_mode"), v = Symbol.for("react.profiler"), I = Symbol.for("react.consumer"), N = Symbol.for("react.context"), y = Symbol.for("react.forward_ref"), M = Symbol.for("react.suspense"), w = Symbol.for("react.suspense_list"), $ = Symbol.for("react.memo"), S = Symbol.for("react.lazy"), H = Symbol.for("react.activity"), W = Symbol.for("react.client.reference"), L = D.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE, k = Object.prototype.hasOwnProperty, X = Array.isArray, m = console.createTask ? console.createTask : function() {
return null;
};
D = {
"react-stack-bottom-frame": function(t) {
return t();
}
};
var A, P = {}, Z = D["react-stack-bottom-frame"].bind(
D,
o
)(), q = m(n(o)), K = {};
J.Fragment = x, J.jsx = function(t, i, g, T, j) {
var E = 1e4 > L.recentlyCreatedOwnerStacks++;
return p(
t,
i,
g,
!1,
T,
j,
E ? Error("react-stack-top-frame") : Z,
E ? m(n(t)) : q
);
}, J.jsxs = function(t, i, g, T, j) {
var E = 1e4 > L.recentlyCreatedOwnerStacks++;
return p(
t,
i,
g,
!0,
T,
j,
E ? Error("react-stack-top-frame") : Z,
E ? m(n(t)) : q
);
};
}()), J;
}
var ue;
function he() {
return ue || (ue = 1, process.env.NODE_ENV === "production" ? Q.exports = ge() : Q.exports = Te()), Q.exports;
}
var c = he();
const Ee = "React Gantt Flow", F = {
LEFT_MARGIN: 40,
RIGHT_MARGIN: 80,
GRID_STROKE_WIDTH: 1,
GRID_COLUMN_WIDTH: 50,
BAR_AREA_HEIGHT: 50,
BAR_ALIGN_MARGIN: 10,
AXIS_HEIGHT: 50,
BAR_ARROW_STROKE_WIDTH: 1.5
}, de = 30, xe = (e, r, a) => {
const { LEFT_MARGIN: n, RIGHT_MARGIN: s } = F;
return te(() => ({ dateToX: (f) => {
const d = r.getTime() - e.getTime();
if (d === 0) return 0;
const l = f.getTime() - e.getTime();
return n + l / d * (a - s);
}, xToDate: (f) => {
const d = r.getTime() - e.getTime();
if (d === 0) return new Date(e);
const l = a - s, p = f - n;
return new Date(e.getTime() + p / l * d);
} }), [e, r, a, n, s]);
}, fe = Symbol.for("constructDateFrom");
function ne(e, r) {
return typeof e == "function" ? e(r) : e && typeof e == "object" && fe in e ? e[fe](r) : e instanceof Date ? new e.constructor(r) : new Date(r);
}
function we(e, r) {
return ne(e, e);
}
function ee(e, r, a) {
const n = we(e);
return isNaN(r) ? ne(e, NaN) : (r && n.setDate(n.getDate() + r), n);
}
function Ae(e, ...r) {
const a = ne.bind(
null,
r.find((n) => typeof n == "object")
);
return r.map(a);
}
function be(e, r) {
const [a, n] = Ae(e, r.start, r.end);
return { start: a, end: n };
}
function Ie(e, r) {
const { start: a, end: n } = be(r == null ? void 0 : r.in, e);
let s = +a > +n;
const o = s ? +a : +n, u = s ? n : a;
u.setHours(0, 0, 0, 0);
let f = 1;
const d = [];
for (; +u <= o; )
d.push(ne(a, u)), u.setDate(u.getDate() + f), u.setHours(0, 0, 0, 0);
return s ? d.reverse() : d;
}
const ye = C(
({ axisHeight: e, chartWidth: r, chartHeight: a, days: n, taskCount: s, dateToX: o }) => {
const { BAR_AREA_HEIGHT: u, GRID_STROKE_WIDTH: f } = F, d = () => Array.from({ length: s }).map((D, R) => {
const _ = e + R * u, x = u;
return /* @__PURE__ */ c.jsx(
"rect",
{
x: 0,
y: _,
width: r,
height: x,
fill: "white"
},
`row-${_}`
);
}), l = () => n.map((D, R) => {
const _ = D.getDay();
if (_ !== 0 && _ !== 6) return null;
const x = o(D), O = n[R + 1], v = O ? o(O) - x : 10;
return /* @__PURE__ */ c.jsx(
"rect",
{
x,
y: e,
width: v,
height: a,
fill: "#f7f7f7"
},
`weekend-${D.toISOString()}`
);
}), p = () => n.map((D) => {
const R = o(D);
return /* @__PURE__ */ c.jsx(
"line",
{
x1: R,
y1: e,
x2: R,
y2: e + a,
stroke: "#ededed",
strokeWidth: f
},
D.toISOString()
);
}), h = () => Array.from({ length: s + 1 }).map((D, R) => {
const _ = e + R * u;
return /* @__PURE__ */ c.jsx(
"line",
{
x1: 0,
y1: _,
x2: r,
y2: _,
stroke: "#ededed",
strokeWidth: f
},
`hline-${_}`
);
});
return /* @__PURE__ */ c.jsxs("g", { children: [
d(),
l(),
p(),
h()
] });
}
), Se = C(ye), je = {
"axis-text": "_axis-text_orqt4_1"
}, Oe = C(
({ axisHeight: e, days: r, yOffset: a = 0, dateToX: n }) => /* @__PURE__ */ c.jsx("g", { transform: `translate(0, ${a})`, children: r.map((s) => {
const o = n(s), u = s.getDate().toString();
return /* @__PURE__ */ c.jsx("g", { transform: `translate(${o}, 0)`, children: /* @__PURE__ */ c.jsx(
"text",
{
className: je["axis-text"],
y: e / 2,
textAnchor: "middle",
children: u
}
) }, s.toISOString());
}) })
), ve = C(Oe), Ne = {
"months-text": "_months-text_cazi6_1"
}, Me = C(
({ axisHeight: e, days: r, dateToX: a }) => {
if (!r || r.length === 0) return null;
const n = [];
let s = `${r[0].getFullYear()}-${r[0].getMonth()}`, o = r[0].toLocaleDateString("en-US", {
year: "numeric",
month: "long"
}), u = r[0], f = r[0];
for (let d = 1; d < r.length; d++) {
const l = r[d], p = `${l.getFullYear()}-${l.getMonth()}`;
p === s || (n.push({
key: s,
month: o,
start: u,
end: f
}), s = p, o = l.toLocaleDateString("en-US", {
year: "numeric",
month: "long"
}), u = l), f = l;
}
return n.push({
key: s,
month: o,
start: u,
end: f
}), /* @__PURE__ */ c.jsx("g", { children: n.map((d) => {
const l = a(d.start);
return /* @__PURE__ */ c.jsx("g", { children: /* @__PURE__ */ c.jsx(
"text",
{
className: Ne["months-text"],
x: l - 5,
y: e / 1.3,
textAnchor: "start",
children: d.month
}
) }, d.key);
}) });
}
), He = C(Me), Pe = {
"bar-date-handle": "_bar-date-handle_y4tcz_1"
}, me = ({
type: e,
x: r,
y: a,
onMouseDownDateHandle: n
}) => /* @__PURE__ */ c.jsx(
"rect",
{
tabIndex: 0,
className: Pe["bar-date-handle"],
x: r,
y: a,
width: 5,
height: 20,
ry: 2,
rx: 2,
onMouseDown: (s) => n(e, s)
}
), $e = {
"bar-progress-handle": "_bar-progress-handle_1l6rn_1"
}, Ge = ({
progressPoint: e,
onMouseDownProgressHandle: r
}) => /* @__PURE__ */ c.jsx(
"polygon",
{
tabIndex: 0,
className: $e["bar-progress-handle"],
points: e,
onMouseDown: r
}
), oe = {
"default-bar": "_default-bar_12p1y_1",
"progress-bar": "_progress-bar_12p1y_8",
"task-name": "_task-name_12p1y_12"
}, z = 24 * 60 * 60 * 1e3, Le = ({
task: e,
index: r,
dateToX: a,
xToDate: n,
onDateChange: s
}) => {
const [o, u] = Y(e.startDate), [f, d] = Y(e.endDate), [l, p] = Y(e.progress), [h, D] = Y(!1), [R, _] = Y(null), [x, O] = Y(!1), { BAR_AREA_HEIGHT: v, GRID_COLUMN_WIDTH: I, BAR_ALIGN_MARGIN: N } = F, y = ce({
initialMouseX: 0,
initialStartX: 0,
initialEndX: 0,
initialProgress: e.progress
}), M = ce(null), w = a(o), $ = a(f), S = $ - w, H = r * v, W = S * l / 100, L = (m, A) => {
A.stopPropagation(), A.preventDefault(), y.current.initialMouseX = A.clientX, m === "start" ? (y.current.initialStartX = w, _("start")) : (y.current.initialEndX = $, _("end"));
}, k = (m) => {
m.stopPropagation(), m.preventDefault(), y.current.initialMouseX = m.clientX, y.current.initialProgress = l, _("progress");
}, X = (m) => {
m.stopPropagation(), m.preventDefault(), y.current.initialMouseX = m.clientX, y.current.initialStartX = w, y.current.initialEndX = $, _("bar");
};
return re(() => {
const m = (P) => {
const { initialMouseX: Z, initialStartX: q, initialEndX: K, initialProgress: t } = y.current, i = P.clientX - Z;
if (R === "start") {
const T = Math.round(i / I), j = n(q);
let E = new Date(
j.getTime() + T * z
);
const G = f.getTime() - z;
E.getTime() > G && (E = new Date(G)), u(E), s(e.id, E, f, l, !1);
} else if (R === "end") {
const T = Math.round(i / I), j = n(K);
let E = new Date(
j.getTime() + T * z
);
const G = o.getTime() + z;
E.getTime() < G && (E = new Date(G)), d(E), s(e.id, o, E, l, !1);
} else if (R === "bar") {
const T = Math.round(i / I), j = n(q), E = n(K), G = new Date(
j.getTime() + T * z
), B = new Date(
E.getTime() + T * z
);
u(G), d(B), s(e.id, G, B, l, !1);
} else if (R === "progress") {
const g = i / S * 100;
let T = t + g;
T = Math.max(0, Math.min(100, T)), p(T), s(e.id, o, f, T, !1);
}
}, A = () => {
const P = R !== null;
_(null), P && s(
e.id,
o,
f,
l,
!0
);
};
return R !== null ? (window.addEventListener("mousemove", m), window.addEventListener("mouseup", A)) : (window.removeEventListener("mousemove", m), window.removeEventListener("mouseup", A)), () => {
window.removeEventListener("mousemove", m), window.removeEventListener("mouseup", A);
};
}, [
e.id,
R,
f,
o,
l,
S,
I,
n,
s
]), re(() => {
R === null && (u(e.startDate), d(e.endDate), p(e.progress));
}, [e.startDate, e.endDate, e.progress, R]), re(() => {
if (M.current) {
const m = M.current.getBBox();
O(m.width + 10 > S);
}
}, [S]), /* @__PURE__ */ c.jsxs(
"g",
{
onMouseEnter: () => D(!0),
onMouseLeave: () => D(!1),
children: [
/* @__PURE__ */ c.jsx(
"rect",
{
className: oe["default-bar"],
x: w,
y: H + N,
rx: "5",
ry: "5",
width: S,
height: v - N * 2,
onMouseDown: X
}
),
l > 0 && /* @__PURE__ */ c.jsx(
"rect",
{
className: oe["progress-bar"],
x: w,
y: H + N,
rx: "5",
ry: "5",
width: W,
height: v - N * 2,
onMouseDown: X
}
),
/* @__PURE__ */ c.jsx(
"text",
{
ref: M,
className: oe["task-name"],
x: x ? $ + 5 : w + S / 2,
y: H + v / 1.95,
dominantBaseline: "middle",
textAnchor: x ? "start" : "middle",
children: e.name
}
),
h && /* @__PURE__ */ c.jsxs(c.Fragment, { children: [
/* @__PURE__ */ c.jsx(
me,
{
type: "start",
x: w + 2,
y: H + 15,
onMouseDownDateHandle: L
}
),
/* @__PURE__ */ c.jsx(
Ge,
{
progressPoint: `
${w + W}, ${H + 35}
${w + W - 5}, ${H + 40}
${w + W + 5}, ${H + 40}
`,
onMouseDownProgressHandle: k
}
),
/* @__PURE__ */ c.jsx(
me,
{
type: "end",
x: $ - 7,
y: H + 15,
onMouseDownDateHandle: L
}
)
] })
]
}
);
};
function We(e, r, a, n) {
const { GRID_COLUMN_WIDTH: s, BAR_AREA_HEIGHT: o, GRID_STROKE_WIDTH: u } = F, f = 2, d = s / 2 * f, l = o / 2 * f;
return `
M ${e} ${r}
C ${e + d} ${r + l},
${a - d} ${n - l},
${a + u / 2} ${n}
`;
}
const _e = {
"dependencies-arrow-path": "_dependencies-arrow-path_1giuk_1",
"dependencies-arrow-circle": "_dependencies-arrow-circle_1giuk_6"
}, ke = ({
barPositions: e,
tasks: r
}) => {
const { BAR_AREA_HEIGHT: a, BAR_ARROW_STROKE_WIDTH: n } = F;
return /* @__PURE__ */ c.jsx(c.Fragment, { children: r.map((s, o) => !s.dependencies || s.dependencies.length === 0 ? null : s.dependencies.map((u) => {
const f = r.findIndex((x) => x.id === u);
if (f === -1) return null;
const d = e[f], l = e[o], p = d.x + d.width, h = d.y + a / 2, D = l.x, R = l.y + a / 2, _ = We(p, h, D, R);
return /* @__PURE__ */ c.jsxs("g", { children: [
/* @__PURE__ */ c.jsx(
"path",
{
d: _,
className: _e["dependencies-arrow-path"],
strokeWidth: n
}
),
/* @__PURE__ */ c.jsx(
"circle",
{
className: _e["dependencies-arrow-circle"],
cx: D,
cy: R,
r: 5
}
)
] }, `arrow-${u}-${s.id}`);
})) });
}, Ce = C(
({ tasks: e, chartMinDate: r, chartMaxDate: a, dateToX: n, xToDate: s, onTaskUpdate: o }) => {
const { BAR_AREA_HEIGHT: u, AXIS_HEIGHT: f } = F, d = e.map((p, h) => {
const D = n(p.startDate), R = n(p.endDate) - n(p.startDate), _ = h * u;
return { x: D, y: _, width: R };
}), l = (p, h, D, R, _ = !0) => {
o(p, h, D, R, _);
};
return /* @__PURE__ */ c.jsxs("g", { transform: `translate(0, ${f})`, children: [
/* @__PURE__ */ c.jsx(ke, { tasks: e, barPositions: d }),
e.map((p, h) => /* @__PURE__ */ c.jsx(
Le,
{
task: p,
index: h,
dateToX: n,
xToDate: s,
onDateChange: l,
chartMinDate: r,
chartMaxDate: a
},
`bar-${p.id}`
))
] });
}
), Fe = C(Ce), Xe = ({
axisHeight: e,
chartHeight: r,
dateToX: a
}) => {
const { GRID_STROKE_WIDTH: n } = F, s = a(/* @__PURE__ */ new Date());
return /* @__PURE__ */ c.jsxs("g", { children: [
/* @__PURE__ */ c.jsx(
"line",
{
x1: s,
y1: e,
x2: s,
y2: e + r,
stroke: "red",
strokeWidth: n
}
),
/* @__PURE__ */ c.jsx("circle", { cx: s, cy: e, r: 5, fill: "red" }),
/* @__PURE__ */ c.jsxs("circle", { cx: s, cy: e, fill: "none", stroke: "red", strokeWidth: 2, children: [
/* @__PURE__ */ c.jsx(
"animate",
{
attributeName: "r",
from: "5",
to: "20",
dur: "1.5s",
begin: "0s",
repeatCount: "indefinite"
}
),
/* @__PURE__ */ c.jsx(
"animate",
{
attributeName: "opacity",
from: "1",
to: "0",
dur: "1.5s",
begin: "0s",
repeatCount: "indefinite"
}
)
] })
] });
}, Ye = ({
axisHeight: e,
barAreaHeight: r,
tasks: a,
dateToX: n
}) => {
const { GRID_STROKE_WIDTH: s } = F, o = n(/* @__PURE__ */ new Date()), u = "#92e896", f = "#FFD54F", d = "#66BB6A", l = "#fac51b", p = 3;
return /* @__PURE__ */ c.jsx("g", { children: a.map((h, D) => {
const _ = e + D * r, x = r - s;
if (h.progress === 0 || h.progress === 100) return null;
const O = n(new Date(h.startDate)), I = n(new Date(h.endDate)) - p / 2 - O, N = O + I * h.progress / 100, y = Math.min(o, N), M = Math.abs(N - o);
if (M === 0) return null;
const w = N > o ? u : f, $ = N > o ? d : l;
return /* @__PURE__ */ c.jsx(
"rect",
{
x: y,
y: _,
width: M,
height: x,
fill: w,
opacity: 0.5,
stroke: $,
strokeWidth: p
},
`inazuma-${h.id}`
);
}) });
};
function Be(e) {
const r = e.reduce(
(n, s) => s.startDate < n ? s.startDate : n,
e[0].startDate
), a = e.reduce(
(n, s) => s.endDate > n ? s.endDate : n,
e[0].endDate
);
return { min: r, max: a };
}
function Ue(e, r) {
return Ie({ start: e, end: r });
}
const ae = (e) => {
if (e.length === 0) {
const n = /* @__PURE__ */ new Date();
return [ee(n, -2), ee(n, de)];
}
const { min: r, max: a } = Be(e);
return [ee(r, -2), ee(a, de)];
}, ze = ({
disparityDisplay: e,
task: r,
todaysLineDisplay: a,
autoLayoutDependencies: n = !1,
onDateChange: s
}) => {
const [o, u] = Y(r), [f, d] = Y(ae(r)), [l, p] = f, { LEFT_MARGIN: h, GRID_COLUMN_WIDTH: D, BAR_AREA_HEIGHT: R, AXIS_HEIGHT: _ } = F;
re(() => {
u(r), d(ae(r));
}, [r]);
const x = te(
() => Ue(l, p),
[l, p]
), O = te(
() => h + x.length * D,
[x.length, h, D]
), v = te(
() => o.length * R + _,
[o.length, R, _]
), { dateToX: I, xToDate: N } = xe(l, p, O), y = De(
(M, w, $, S, H = !0) => {
const W = o.find((m) => m.id === M), L = W !== void 0 ? w.getTime() - W.startDate.getTime() : 0, k = /* @__PURE__ */ new Set();
if (n && L !== 0) {
const m = (A) => {
for (const P of o)
P.dependencies.includes(A) && !k.has(P.id) && (k.add(P.id), m(P.id));
};
m(M);
}
const X = o.map((m) => m.id === M ? {
...m,
startDate: w,
endDate: $,
...S !== void 0 ? { progress: S } : {}
} : k.has(m.id) ? {
...m,
startDate: new Date(m.startDate.getTime() + L),
endDate: new Date(m.endDate.getTime() + L)
} : m);
if (u(X), H && d(ae(X)), H && s) {
s(M, w, $, S);
for (const m of k) {
const A = X.find((P) => P.id === m);
A && s(m, A.startDate, A.endDate, A.progress);
}
}
},
[o, s, n]
);
return /* @__PURE__ */ c.jsxs("svg", { width: O, height: v, children: [
/* @__PURE__ */ c.jsx("title", { children: Ee }),
/* @__PURE__ */ c.jsx(He, { days: x, dateToX: I, axisHeight: _ / 2 }),
/* @__PURE__ */ c.jsx(
ve,
{
days: x,
dateToX: I,
axisHeight: _ / 2,
yOffset: _ / 2
}
),
/* @__PURE__ */ c.jsx(
Se,
{
days: x,
taskCount: o.length,
dateToX: I,
axisHeight: _,
chartWidth: O,
chartHeight: v
}
),
e && /* @__PURE__ */ c.jsx(
Ye,
{
tasks: o,
dateToX: I,
axisHeight: _,
barAreaHeight: R
}
),
/* @__PURE__ */ c.jsx(
Fe,
{
tasks: o,
dateToX: I,
xToDate: N,
onTaskUpdate: y,
chartMinDate: l,
chartMaxDate: p
}
),
a && /* @__PURE__ */ c.jsx(
Xe,
{
dateToX: I,
axisHeight: _,
chartHeight: v
}
)
] });
}, Ke = C(ze);
export {
Ke as GanttFlow
};