@neo-ui-kit/react 0.0.0-stage → 1.0.0

package/dist/chunks/chunk-VK6GHRLV.js

@@ -0,0 +1,335 @@
+import {
+  clamp,
+  mark,
+  useControllable,
+  useTr
+} from "./chunk-BJSFN52W.js";
+
+// src/components/media/PianoKeyboard/PianoKeyboard.tsx
+import { memo, useEffect, useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+var BLACK = /* @__PURE__ */ new Set([1, 3, 6, 8, 10]);
+var NAMES = ["C", "C#", "D", "D#", "E", "F", "F#", "G", "G#", "A", "A#", "B"];
+var isBlackKey = (midi) => BLACK.has((midi % 12 + 12) % 12);
+var noteName = (midi) => `${NAMES[(midi % 12 + 12) % 12]}${Math.floor(midi / 12) - 1}`;
+var whiteKeys = (min, max) => {
+  const rows = max - min + 1;
+  const white = Array.from({ length: rows }, (_, i) => max - i).filter((midi) => !isBlackKey(midi));
+  const centers = white.map((midi) => max - midi + 0.5);
+  return white.map((midi, i) => {
+    const center = centers[i] ?? 0;
+    const top = i ? (center + (centers[i - 1] ?? 0)) / 2 : 0;
+    const bottom = i === white.length - 1 ? rows : (center + (centers[i + 1] ?? rows)) / 2;
+    return { midi, top, size: bottom - top };
+  });
+};
+var PianoKeyboard = /* @__PURE__ */ memo(function PianoKeyboard2({
+  minMidi = 55,
+  maxMidi = 79,
+  activeMidi,
+  hit = false,
+  labels = "all",
+  onKeyPress,
+  label,
+  ...p
+}) {
+  const tr = useTr();
+  const [pressed, setPressed] = useState();
+  const release = useRef(void 0);
+  useEffect(() => () => clearTimeout(release.current), []);
+  const rows = Math.max(1, maxMidi - minMidi + 1);
+  const pct = (value) => `${value / rows * 100}%`;
+  const named = (midi) => labels === "all" || labels === "octaves" && midi % 12 === 0;
+  const press = (midi) => {
+    clearTimeout(release.current);
+    setPressed(midi);
+    onKeyPress?.(midi);
+    release.current = setTimeout(() => setPressed(void 0), 220);
+  };
+  const key = (midi, top, size, black) => {
+    const props = {
+      className: "ad-piano-key",
+      "data-black": black || void 0,
+      "data-active": midi === activeMidi || void 0,
+      "data-hit": midi === activeMidi && hit || void 0,
+      "data-pressed": midi === pressed || void 0,
+      style: { top: pct(top), height: pct(size) },
+      children: named(midi) ? /* @__PURE__ */ jsx("span", { children: noteName(midi) }) : null
+    };
+    return onKeyPress ? /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        "aria-label": noteName(midi),
+        onPointerDown: (event) => {
+          if (event.button === 0 && event.isPrimary) press(midi);
+        },
+        onClick: (event) => {
+          if (event.detail === 0) press(midi);
+        },
+        ...props
+      },
+      midi
+    ) : /* @__PURE__ */ jsx("span", { ...props }, midi);
+  };
+  const blacks = Array.from({ length: rows }, (_, i) => maxMidi - i).filter(isBlackKey);
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ...mark("PianoKeyboard", p),
+      role: onKeyPress ? "group" : "img",
+      "aria-label": label ?? tr("\u041A\u043B\u0430\u0432\u0438\u0430\u0442\u0443\u0440\u0430 {from}\u2013{to}", { from: noteName(minMidi), to: noteName(maxMidi) }),
+      style: { ...p.style, "--ad-keys": rows },
+      children: [
+        whiteKeys(minMidi, maxMidi).map(({ midi, top, size }) => key(midi, top, size, false)),
+        blacks.map((midi) => key(midi, maxMidi - midi + 0.16, 0.68, true))
+      ]
+    }
+  );
+});
+
+// src/components/editor/PianoRoll/PianoRoll.tsx
+import { useEffect as useEffect2, useRef as useRef2 } from "react";
+import { Fragment, jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+var DEMO = [
+  { id: "1", start: 0.4, end: 1.1, pitch: 64 },
+  { id: "2", start: 1.2, end: 1.6, pitch: 67 },
+  { id: "3", start: 1.7, end: 2.6, pitch: 69 },
+  { id: "4", start: 2.8, end: 3.4, pitch: 67 },
+  { id: "5", start: 3.5, end: 4.4, pitch: 64 },
+  { id: "6", start: 4.6, end: 6, pitch: 62 }
+];
+var DEMO_WORDS = [
+  { id: "a", text: "\u041D\u043E\u0447\u044C", start: 0.4, end: 1.1 },
+  { id: "b", text: "\u0433\u043E\u0440\u0438\u0442", start: 1.2, end: 2.6 },
+  { id: "c", text: "\u043E\u0433\u043D\u044F\u043C\u0438", start: 2.8, end: 6 }
+];
+var PianoRoll = ({
+  notes = DEMO,
+  words = notes === DEMO ? DEMO_WORDS : [],
+  duration = 8,
+  position = 2,
+  selected,
+  zoom: zoomProp,
+  defaultZoom = 1,
+  onZoomChange,
+  minPitch = 55,
+  maxPitch = 79,
+  follow = false,
+  grid = true,
+  nudgeSeconds = 0.05,
+  onSelect,
+  onSelectArea,
+  onSeek,
+  onNoteDrag,
+  onNoteDragEnd,
+  onNudge,
+  onKeyPress,
+  label,
+  ...p
+}) => {
+  const tr = useTr();
+  const [zoom, setZoom] = useControllable(zoomProp, defaultZoom, onZoomChange);
+  const scroller = useRef2(null);
+  const world = useRef2(null);
+  const drag = useRef2(null);
+  const areaBox = useRef2(null);
+  const rows = maxPitch - minPitch + 1;
+  const length = Math.max(duration, 1);
+  const at = (seconds2) => `calc(var(--ad-pps) * ${seconds2})`;
+  const row = (pitch) => `calc(100% * ${(maxPitch - pitch) / rows})`;
+  const seconds = Array.from({ length: Math.ceil(length) + 1 }, (_, i) => i);
+  useEffect2(() => {
+    const box = scroller.current;
+    const area = world.current;
+    if (!follow || !box || !area) return;
+    const x = position / length * area.offsetWidth;
+    if (x < box.scrollLeft || x > box.scrollLeft + box.clientWidth * 0.8) box.scrollLeft = Math.max(0, x - box.clientWidth * 0.3);
+  }, [follow, position, length, zoom]);
+  const scale = () => {
+    const area = world.current?.getBoundingClientRect();
+    return { secondPx: (area?.width ?? 1) / length, rowPx: (area?.height ?? rows) / rows, area };
+  };
+  const startMove = (event, note) => {
+    if (event.button !== 0 || drag.current) return;
+    event.stopPropagation();
+    const additive = event.ctrlKey || event.metaKey || event.shiftKey;
+    const ids = selected?.has(note.id) && !additive ? [...selected] : [note.id];
+    onSelect?.(note.id, additive);
+    event.currentTarget.setPointerCapture?.(event.pointerId);
+    const { secondPx, rowPx } = scale();
+    drag.current = { kind: "move", ids, x: event.clientX, y: event.clientY, secondPx, rowPx, pointerId: event.pointerId };
+  };
+  const startResize = (event, note, edge) => {
+    if (event.button !== 0 || drag.current) return;
+    event.stopPropagation();
+    event.currentTarget.setPointerCapture?.(event.pointerId);
+    drag.current = { kind: "resize", id: note.id, edge, x: event.clientX, secondPx: scale().secondPx, pointerId: event.pointerId };
+  };
+  const startArea = (event) => {
+    if (event.button !== 0 || !world.current || drag.current) return;
+    event.currentTarget.setPointerCapture?.(event.pointerId);
+    drag.current = { kind: "area", x: event.clientX, y: event.clientY, additive: event.ctrlKey || event.metaKey || event.shiftKey, box: world.current.getBoundingClientRect(), pointerId: event.pointerId };
+  };
+  const move = (event) => {
+    const current = drag.current;
+    if (!current || current.pointerId !== event.pointerId) return;
+    if (current.kind === "move")
+      onNoteDrag?.({ kind: "move", ids: current.ids, seconds: (event.clientX - current.x) / current.secondPx, pitch: -Math.round((event.clientY - current.y) / current.rowPx) });
+    else if (current.kind === "resize")
+      onNoteDrag?.({ kind: "resize", id: current.id, edge: current.edge, seconds: (event.clientX - current.x) / current.secondPx });
+    else if (areaBox.current) {
+      const left = Math.min(current.x, event.clientX) - current.box.left;
+      const top = Math.min(current.y, event.clientY) - current.box.top;
+      Object.assign(areaBox.current.style, {
+        display: "block",
+        left: `${left}px`,
+        top: `${top}px`,
+        width: `${Math.abs(event.clientX - current.x)}px`,
+        height: `${Math.abs(event.clientY - current.y)}px`
+      });
+    }
+  };
+  const cancel = () => {
+    const current = drag.current;
+    drag.current = null;
+    if (!current) return;
+    if (areaBox.current) areaBox.current.style.display = "none";
+    if (current.kind === "area") return;
+    onNoteDrag?.(current.kind === "move" ? { kind: "move", ids: current.ids, pitch: 0, seconds: 0 } : { kind: "resize", id: current.id, edge: current.edge, seconds: 0 });
+    onNoteDragEnd?.();
+  };
+  const end = (event) => {
+    const current = drag.current;
+    if (!current || current.pointerId !== event.pointerId) return;
+    if (event.type !== "pointerup") return cancel();
+    drag.current = null;
+    if (current.kind !== "area") return onNoteDragEnd?.();
+    if (areaBox.current) areaBox.current.style.display = "none";
+    const { secondPx, rowPx } = scale();
+    const x0 = (Math.min(current.x, event.clientX) - current.box.left) / secondPx;
+    const x1 = (Math.max(current.x, event.clientX) - current.box.left) / secondPx;
+    const top = maxPitch - (Math.max(current.y, event.clientY) - current.box.top) / rowPx;
+    const bottom = maxPitch - (Math.min(current.y, event.clientY) - current.box.top) / rowPx;
+    if (Math.abs(event.clientX - current.x) < 4 && Math.abs(event.clientY - current.y) < 4) return onSeek?.(clamp(x0, 0, length));
+    onSelectArea?.(notes.filter((note) => note.end >= x0 && note.start <= x1 && note.pitch >= top - 1 && note.pitch <= bottom).map((note) => note.id), current.additive);
+  };
+  const nudge = (event, note) => {
+    const steps = {
+      ArrowUp: [1, 0],
+      ArrowDown: [-1, 0],
+      ArrowLeft: [0, -nudgeSeconds],
+      ArrowRight: [0, nudgeSeconds]
+    };
+    const step = steps[event.key];
+    if (!step) return;
+    event.preventDefault();
+    onNudge?.(note.id, step[0], step[1]);
+  };
+  const wheel = (event) => {
+    if (!event.ctrlKey || !event.deltaY) return;
+    event.preventDefault();
+    setZoom(clamp(zoom * (event.deltaY > 0 ? 1 / 1.15 : 1.15), 0.25, 6));
+  };
+  return /* @__PURE__ */ jsx2(
+    "div",
+    {
+      ...mark("PianoRoll", p),
+      role: "application",
+      "aria-label": label ?? tr("\u0420\u0435\u0434\u0430\u043A\u0442\u043E\u0440 \u043C\u0435\u043B\u043E\u0434\u0438\u0438"),
+      "data-grid": grid || void 0,
+      style: { ...p.style, "--ad-pps": `${4 * zoom}rem`, "--ad-roll-rows": rows },
+      children: /* @__PURE__ */ jsxs2("div", { className: "ad-piano-roll-scroll", ref: scroller, onWheel: wheel, children: [
+        /* @__PURE__ */ jsx2("div", { className: "ad-piano-roll-corner" }),
+        /* @__PURE__ */ jsxs2(
+          "div",
+          {
+            className: "ad-piano-roll-ruler",
+            style: { width: at(length) },
+            onPointerDown: (event) => {
+              const box = event.currentTarget.getBoundingClientRect();
+              onSeek?.(clamp((event.clientX - box.left) / box.width * length, 0, length));
+            },
+            children: [
+              seconds.map((second) => /* @__PURE__ */ jsx2("span", { style: { left: at(second) }, "data-major": second % 5 === 0 || void 0, children: second }, second)),
+              /* @__PURE__ */ jsx2("i", { className: "ad-piano-roll-head-mark", style: { left: at(position) } })
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx2(PianoKeyboard, { className: "ad-piano-roll-keys", minMidi: minPitch, maxMidi: maxPitch, labels: "octaves", onKeyPress }),
+        /* @__PURE__ */ jsxs2(
+          "div",
+          {
+            className: "ad-piano-roll-world",
+            ref: world,
+            style: { width: at(length) },
+            onPointerDown: startArea,
+            onPointerMove: move,
+            onPointerUp: end,
+            onPointerCancel: end,
+            onLostPointerCapture: end,
+            onKeyDown: (event) => {
+              if (event.key === "Escape" && drag.current) {
+                event.preventDefault();
+                cancel();
+              }
+            },
+            children: [
+              Array.from({ length: rows }, (_, i) => maxPitch - i).filter(isBlackKey).map((pitch) => /* @__PURE__ */ jsx2("i", { className: "ad-piano-roll-row", style: { top: row(pitch) } }, pitch)),
+              notes.map((note) => /* @__PURE__ */ jsxs2(
+                "div",
+                {
+                  className: "ad-piano-roll-note",
+                  "data-selected": selected?.has(note.id) || void 0,
+                  "data-now": position >= note.start && position <= note.end || void 0,
+                  style: { left: at(note.start), width: `max(0.25rem, ${at(note.end - note.start)})`, top: row(note.pitch) },
+                  children: [
+                    /* @__PURE__ */ jsx2(
+                      "button",
+                      {
+                        type: "button",
+                        className: "ad-piano-roll-note-body",
+                        "aria-label": tr("\u041D\u043E\u0442\u0430 {pitch}", { pitch: note.pitch }),
+                        "aria-pressed": selected?.has(note.id) ?? false,
+                        onPointerDown: (event) => startMove(event, note),
+                        onKeyDown: (event) => nudge(event, note),
+                        onClick: (event) => {
+                          if (event.detail === 0) onSelect?.(note.id, event.ctrlKey || event.metaKey || event.shiftKey);
+                        }
+                      }
+                    ),
+                    /* @__PURE__ */ jsx2("span", { className: "ad-piano-roll-edge", "data-edge": "start", "aria-hidden": "true", onPointerDown: (event) => startResize(event, note, "start") }),
+                    /* @__PURE__ */ jsx2("span", { className: "ad-piano-roll-edge", "data-edge": "end", "aria-hidden": "true", onPointerDown: (event) => startResize(event, note, "end") })
+                  ]
+                },
+                note.id
+              )),
+              /* @__PURE__ */ jsx2("div", { className: "ad-piano-roll-area", ref: areaBox }),
+              /* @__PURE__ */ jsx2("span", { className: "ad-piano-roll-playhead", style: { left: at(position) } })
+            ]
+          }
+        ),
+        words.length > 0 && /* @__PURE__ */ jsxs2(Fragment, { children: [
+          /* @__PURE__ */ jsx2("div", { className: "ad-piano-roll-corner" }),
+          /* @__PURE__ */ jsx2("div", { className: "ad-piano-roll-words", style: { width: at(length) }, children: words.map((word) => /* @__PURE__ */ jsx2(
+            "span",
+            {
+              style: { left: at(word.start), width: at(word.end - word.start) },
+              "data-sung": position > word.end || void 0,
+              "data-now": position >= word.start && position <= word.end || void 0,
+              children: word.text
+            },
+            word.id
+          )) })
+        ] })
+      ] })
+    }
+  );
+};
+
+export {
+  isBlackKey,
+  noteName,
+  PianoKeyboard,
+  PianoRoll
+};