makersclaw 0.8.0 → 0.8.1

package/registry/blocks/schedule-gantt/geometry.js

@@ -0,0 +1,176 @@
+// Gantt geometry: the axis and the link lines, as plain numbers. Pure, so
+// the chart stays readable and the routing can be tested on its own.
+
+import { dayOf, isoOf, weekdayOf } from "../schedule-engine";
+
+export const ZOOMS = {
+  day: { label: "Days", ppd: 28, pad: 5 },
+  week: { label: "Weeks", ppd: 11, pad: 7 },
+  month: { label: "Months", ppd: 4, pad: 10 },
+  // The whole project in the width there is: the block works the ppd out.
+  fit: { label: "Fit", ppd: 6, pad: 6 },
+};
+
+export const MONTHS = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
+const DAY_MS = 86400000;
+const dateOf = (day) => new Date(day * DAY_MS);
+const monthStart = (day) => {
+  const d = dateOf(day);
+  return Math.round(Date.UTC(d.getUTCFullYear(), d.getUTCMonth(), 1) / DAY_MS);
+};
+const addMonths = (day, n) => {
+  const d = dateOf(day);
+  return Math.round(Date.UTC(d.getUTCFullYear(), d.getUTCMonth() + n, 1) / DAY_MS);
+};
+
+/** "Oct 28" */
+export function shortDate(iso) {
+  const d = dayOf(iso);
+  if (d == null) return "";
+  return `${MONTHS[dateOf(d).getUTCMonth()]} ${dateOf(d).getUTCDate()}`;
+}
+
+/** The span the chart covers: every date in `dates`, padded, snapped to the zoom's grid. */
+export function rangeFor(zoom, dates, today) {
+  const { pad } = ZOOMS[zoom] ?? ZOOMS.week;
+  let lo = dayOf(today) ?? Math.floor(Date.now() / DAY_MS);
+  let hi = lo;
+  for (const iso of dates) {
+    const d = dayOf(iso);
+    if (d == null) continue;
+    lo = Math.min(lo, d);
+    hi = Math.max(hi, d);
+  }
+  lo -= pad;
+  hi += pad * 2;
+  if (zoom === "month" || zoom === "fit") {
+    lo = monthStart(lo);
+    hi = zoom === "fit" ? hi : addMonths(hi, 1) - 1;
+  } else {
+    lo -= weekdayOf(lo);
+    hi += 6 - weekdayOf(hi);
+  }
+  const min = zoom === "day" ? 35 : zoom === "week" ? 91 : zoom === "fit" ? 60 : 120;
+  if (hi - lo < min) hi = lo + min;
+  return { from: lo, to: hi };
+}
+
+/**
+ * The axis over [from, to]: `top` and `bottom` tiers of { start, end,
+ * label, dim? }, grid `lines` { day, strong }, and weekend `shade` spans.
+ */
+export function axisFor(zoom, from, to) {
+  const top = [];
+  const bottom = [];
+  const lines = [];
+  const shade = [];
+  if (zoom === "month" || zoom === "fit") {
+    for (let y = dateOf(from).getUTCFullYear(); y <= dateOf(to).getUTCFullYear(); y += 1) {
+      const a = Math.round(Date.UTC(y, 0, 1) / DAY_MS);
+      const b = Math.round(Date.UTC(y + 1, 0, 1) / DAY_MS) - 1;
+      top.push({ start: Math.max(a, from), end: Math.min(b, to), label: String(y) });
+    }
+    for (let m = monthStart(from); m <= to; m = addMonths(m, 1)) {
+      bottom.push({ start: Math.max(m, from), end: Math.min(addMonths(m, 1) - 1, to), label: MONTHS[dateOf(m).getUTCMonth()] });
+      lines.push({ day: m, strong: true });
+    }
+    for (let d = from; d <= to; d += 1) if (weekdayOf(d) === 0 && dateOf(d).getUTCDate() !== 1) lines.push({ day: d, strong: false });
+    return { top, bottom, lines, shade };
+  }
+  for (let m = monthStart(from); m <= to; m = addMonths(m, 1)) {
+    const d = dateOf(m);
+    top.push({ start: Math.max(m, from), end: Math.min(addMonths(m, 1) - 1, to), label: `${MONTHS[d.getUTCMonth()]} ${d.getUTCFullYear()}` });
+  }
+  for (let d = from; d <= to; d += 1) {
+    const w = weekdayOf(d);
+    if (w === 5) shade.push({ start: d, end: d + 1 });
+    if (zoom === "day") {
+      bottom.push({ start: d, end: d, label: String(dateOf(d).getUTCDate()), dim: w >= 5 });
+      lines.push({ day: d, strong: w === 0 });
+    } else if (w === 0) {
+      bottom.push({ start: d, end: Math.min(d + 6, to), label: String(dateOf(d).getUTCDate()) });
+      lines.push({ day: d, strong: true });
+    }
+  }
+  return { top, bottom, lines, shade };
+}
+
+/**
+ * The line for one link, as orthogonal segments. Boxes are the bars on
+ * screen: { x0, x1, y (centre), top, bottom, milestone }. Finish-to-start
+ * drops into the successor from above or below at its start, the way a
+ * scheduler draws it; the other kinds run beside the bars. `bold` routes
+ * into the bar's centre line instead of its edge, so the critical path
+ * reads as one continuous line.
+ *
+ * → { segments: [{ x1, y1, x2, y2 }], head: { x, y, dir } | null }
+ *   dir: "down" | "up" | "left" | "right"
+ */
+export function routeLink(predBox, succ, kind, { rowH = 32, bold = false } = {}) {
+  const STUB = 6;
+  // A line leaves a milestone from its centre, so it drops straight out
+  // of the diamond instead of jogging round its tip.
+  const pred = predBox.milestone ? { ...predBox, x0: (predBox.x0 + predBox.x1) / 2, x1: (predBox.x0 + predBox.x1) / 2 } : predBox;
+  const below = succ.y > pred.y;
+  const boundary = pred.y + (below ? rowH / 2 : -rowH / 2);
+  const segs = [];
+  const add = (x1, y1, x2, y2) => {
+    if (x1 === x2 && y1 === y2) return;
+    segs.push({ x1, y1, x2, y2 });
+  };
+  const edgeY = below ? succ.top : succ.bottom;
+  const vHead = below ? "down" : "up";
+
+  if (kind === "SS") {
+    const xv = Math.min(pred.x0, succ.x0) - STUB;
+    add(pred.x0, pred.y, xv, pred.y);
+    add(xv, pred.y, xv, succ.y);
+    add(xv, succ.y, succ.x0, succ.y);
+    return { segments: segs, head: bold ? null : { x: succ.x0, y: succ.y, dir: "right" } };
+  }
+  if (kind === "FF") {
+    const xv = Math.max(pred.x1, succ.x1) + STUB;
+    add(pred.x1, pred.y, xv, pred.y);
+    add(xv, pred.y, xv, succ.y);
+    add(xv, succ.y, succ.x1, succ.y);
+    return { segments: segs, head: bold ? null : { x: succ.x1, y: succ.y, dir: "left" } };
+  }
+  if (kind === "SF") {
+    const xa = pred.x0 - STUB;
+    if (succ.x1 + STUB <= xa) {
+      add(pred.x0, pred.y, xa, pred.y);
+      add(xa, pred.y, xa, succ.y);
+      add(xa, succ.y, succ.x1, succ.y);
+    } else {
+      const xb = succ.x1 + STUB;
+      add(pred.x0, pred.y, xa, pred.y);
+      add(xa, pred.y, xa, boundary);
+      add(xa, boundary, xb, boundary);
+      add(xb, boundary, xb, succ.y);
+      add(xb, succ.y, succ.x1, succ.y);
+    }
+    return { segments: segs, head: bold ? null : { x: succ.x1, y: succ.y, dir: "left" } };
+  }
+  // Finish to start.
+  const drop = succ.milestone ? (succ.x0 + succ.x1) / 2 : bold ? succ.x0 : succ.x0 + 4;
+  const endY = bold ? succ.y : edgeY;
+  if (drop >= pred.x1) {
+    add(pred.x1, pred.y, drop, pred.y);
+    add(drop, pred.y, drop, endY);
+  } else {
+    const xa = pred.x1 + STUB;
+    add(pred.x1, pred.y, xa, pred.y);
+    add(xa, pred.y, xa, boundary);
+    add(xa, boundary, drop, boundary);
+    add(drop, boundary, drop, endY);
+  }
+  return { segments: segs, head: bold ? null : { x: drop, y: endY, dir: vHead } };
+}
+
+/** Today at the server, then the browser's own day once mounted. */
+export function isoToday() {
+  const d = new Date();
+  return `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, "0")}-${String(d.getDate()).padStart(2, "0")}`;
+}
+
+export { dayOf, isoOf };

package/registry/blocks/schedule-gantt/index.js

@@ -0,0 +1,26 @@
+// The schedule-gantt block — `makersclaw add schedule-gantt`. Fixed:
+// compose it through its props (README.md beside this file). The model's
+// helpers are plain functions; they work on the server too.
+export { ScheduleGantt } from "./schedule-gantt";
+export { TagChip, CellInput, ROW } from "./sheet";
+export { ZOOMS, axisFor, rangeFor, routeLink, shortDate, isoToday } from "./geometry";
+export {
+  COLUMNS,
+  DEFAULT_COLUMNS,
+  MONTHS,
+  WEEKDAYS,
+  baselineDelta,
+  barLabel,
+  columnsFor,
+  describeDrag,
+  dayWords,
+  dragLines,
+  fixedWidth,
+  gapOf,
+  lengthWords,
+  linkLines,
+  loopWords,
+  monthDay,
+  selectionMoves,
+  slackWords,
+} from "./gantt-model";