@pibbl/core 0.0.2 → 0.0.3-alpha.109.1

package/dist/features/viz/lib/editable-chart-elements.js

@@ -0,0 +1,733 @@
+import { Fragment, jsx, jsxs } from "@pibbl/core/jsx-runtime";
+import {
+  Line,
+  Rectangle,
+  definePrimitive,
+  resolveSignalValue,
+  useRef,
+  useSignal
+} from "@pibbl/core";
+import {
+  pibblInternalCurrentWorldTransform
+} from "@pibbl/core/internal";
+import { lookupScale } from "./scale-context.js";
+const TransformCapture = definePrimitive(
+  function TransformCapture2(props) {
+    props.capture.current = pibblInternalCurrentWorldTransform();
+    return props.children;
+  },
+  { childInput: "structural" }
+);
+function pair(value, name) {
+  if (!Array.isArray(value) || value.length !== 2 || !value.every(Number.isFinite))
+    throw new RangeError(`${name} requires two finite values.`);
+  return value;
+}
+function positive(value, name) {
+  if (!Number.isFinite(value) || value <= 0)
+    throw new RangeError(`${name} must be finite and positive.`);
+  return value;
+}
+function nonnegative(value, name) {
+  if (!Number.isFinite(value) || value < 0)
+    throw new RangeError(`${name} must be finite and non-negative.`);
+  return value;
+}
+function clamp(value, values) {
+  return Math.max(Math.min(...values), Math.min(Math.max(...values), value));
+}
+function clip(value, scale2) {
+  return clamp(value, scale2.domain);
+}
+function range(first, second, viewport) {
+  const low = Math.max(Math.min(first, second), Math.min(...viewport)), high = Math.min(Math.max(first, second), Math.max(...viewport));
+  return high < low ? void 0 : [low, high];
+}
+function style(input) {
+  const source = resolveSignalValue(input ?? {});
+  const opacity = resolveSignalValue(source.opacity) ?? 1, strokeWidth = resolveSignalValue(source.strokeWidth) ?? 1.5, handleSize = resolveSignalValue(source.handleSize) ?? 8, hitSize = resolveSignalValue(source.hitSize) ?? 20;
+  if (!Number.isFinite(opacity) || opacity < 0 || opacity > 1)
+    throw new RangeError(
+      "Editable chart style opacity must be finite from zero through one."
+    );
+  positive(strokeWidth, "Editable chart style strokeWidth");
+  positive(handleSize, "Editable chart style handleSize");
+  positive(hitSize, "Editable chart style hitSize");
+  const fill = resolveSignalValue(source.fill) ?? "#2563eb", stroke = resolveSignalValue(source.stroke) ?? "#2563eb", handleFill = resolveSignalValue(source.handleFill) ?? fill, handleStroke = resolveSignalValue(source.handleStroke) ?? stroke;
+  for (const [name, value] of Object.entries({
+    fill,
+    stroke,
+    handleFill,
+    handleStroke
+  }))
+    if (typeof value !== "string")
+      throw new TypeError(`Editable chart style ${name} must be a string.`);
+  return {
+    fill,
+    stroke,
+    strokeWidth,
+    opacity,
+    handleFill,
+    handleStroke,
+    handleSize,
+    hitSize
+  };
+}
+function scale(id, receiver, options = {}) {
+  const source = lookupScale(id, receiver);
+  if (!source)
+    throw new TypeError(`${receiver} requires an ancestor scale ID.`);
+  const value = source.get();
+  if (value.type === "point" || value.type === "band")
+    throw new TypeError(`${receiver} requires a continuous scale.`);
+  if (value.type === "trading-time" && !options.allowTradingTime)
+    throw new TypeError(
+      `${receiver} requires an invertible numeric continuous scale, not TradingTimeScale.`
+    );
+  if (!Array.isArray(value.domain) || value.domain.length < 2 || !value.domain.every(Number.isFinite) || !Array.isArray(value.range) || value.range.length !== 2 || !value.range.every(Number.isFinite) || typeof value.map !== "function")
+    throw new TypeError(`${receiver} requires a finite numeric scale.`);
+  if (value.type !== "trading-time" && typeof value.invert !== "function")
+    throw new TypeError(`${receiver} requires an invertible continuous scale.`);
+  if (value.type === "trading-time" && (!value.nearestTimeAtPosition || !value.slotAtTime || !value.timeAtSlot))
+    throw new TypeError(`${receiver} requires a TradingTimeScale mapping.`);
+  return value;
+}
+function local(inverse, event) {
+  const point = inverse.transformPoint(new DOMPoint(event.x, event.y));
+  if (!Number.isFinite(point.x) || !Number.isFinite(point.y))
+    throw new RangeError(
+      "Editable chart interaction requires an invertible finite transform."
+    );
+  return point;
+}
+function begin(state, event, original, mode, world, scales) {
+  if (!world || state.get()) return;
+  const inverse = world.inverse(), draft = {
+    pointerId: event.pointerId,
+    target: event.currentTarget,
+    inverse,
+    start: local(inverse, event),
+    original,
+    last: original,
+    mode,
+    scales: [...scales]
+  };
+  state.set(draft);
+  event.currentTarget.setPointerCapture(event.pointerId);
+  event.stopPropagation();
+}
+function publish(state, active, next, onChange) {
+  onChange(next);
+  state.set({ ...active, last: next });
+}
+function release(state, active) {
+  state.set(null);
+  if (active.target.hasPointerCapture(active.pointerId))
+    active.target.releasePointerCapture(active.pointerId);
+}
+function keys(event, cancel, edit) {
+  if (event.key === "Escape") {
+    event.preventDefault();
+    cancel();
+    return;
+  }
+  const sign = event.key === "ArrowLeft" || event.key === "ArrowDown" ? -1 : event.key === "ArrowRight" || event.key === "ArrowUp" ? 1 : 0;
+  if (sign) {
+    event.preventDefault();
+    edit(sign);
+  }
+}
+function edge(values, which, value, minimum, source, bounded) {
+  const [first, second] = values;
+  const domainLow = Math.min(...source.domain), domainHigh = Math.max(...source.domain);
+  if (which === "first") {
+    const limit2 = first <= second ? second - minimum : second + minimum;
+    return [
+      first <= second ? bounded ? clamp(value, [domainLow, limit2]) : Math.min(value, limit2) : bounded ? clamp(value, [limit2, domainHigh]) : Math.max(value, limit2),
+      second
+    ];
+  }
+  const limit = first <= second ? first + minimum : first - minimum;
+  return [
+    first,
+    first <= second ? bounded ? clamp(value, [limit, domainHigh]) : Math.max(value, limit) : bounded ? clamp(value, [domainLow, limit]) : Math.min(value, limit)
+  ];
+}
+function pan(values, delta, source, bounded) {
+  if (!bounded) return [values[0] + delta, values[1] + delta];
+  const low = Math.min(...values), high = Math.max(...values), permitted = clamp(delta, [
+    Math.min(...source.domain) - low,
+    Math.max(...source.domain) - high
+  ]);
+  return [values[0] + permitted, values[1] + permitted];
+}
+function minimumMappedDelta(points, requested, source, minimum) {
+  if (!minimum) return requested;
+  const width = (delta) => Math.abs(
+    source.invert(points[1] + delta) - source.invert(points[0] + delta)
+  );
+  let previous = 0;
+  for (let index = 1; index <= 64; index++) {
+    const candidate = requested * index / 64;
+    if (width(candidate) >= minimum) {
+      previous = candidate;
+      continue;
+    }
+    let low = previous, high = candidate;
+    for (let iteration = 0; iteration < 40; iteration++) {
+      const middle = (low + high) / 2;
+      if (width(middle) >= minimum) low = middle;
+      else high = middle;
+    }
+    return low;
+  }
+  return requested;
+}
+function panMapped(values, requested, source, bounded, minimum) {
+  const positions = [source.map(values[0]), source.map(values[1])], viewportDelta = bounded ? sharedMappedDelta(positions, requested, source.range) : requested, delta = minimumMappedDelta(positions, viewportDelta, source, minimum);
+  if (bounded)
+    return [
+      clip(source.invert(positions[0] + delta), source),
+      clip(source.invert(positions[1] + delta), source)
+    ];
+  return [
+    source.invert(positions[0] + delta),
+    source.invert(positions[1] + delta)
+  ];
+}
+function navigatorInterval(values, minimum, source, receiver) {
+  const domainLow = Math.min(...source.domain), domainHigh = Math.max(...source.domain), domainSpan = domainHigh - domainLow;
+  if (minimum > domainSpan)
+    throw new RangeError(
+      `${receiver} minimumSpan cannot exceed its scale domain span.`
+    );
+  if (values.some((value) => value < domainLow || value > domainHigh))
+    throw new RangeError(
+      `${receiver} values must lie within its scale domain.`
+    );
+  if (Math.abs(values[1] - values[0]) < minimum)
+    throw new RangeError(`${receiver} values must meet minimumSpan.`);
+}
+function annotationInterval(values, minimum, receiver) {
+  if (Math.abs(values[1] - values[0]) < minimum)
+    throw new RangeError(`${receiver} values must meet minimumSpan.`);
+}
+function handle(x, y, paint, handlers) {
+  const visual = {
+    left: x - paint.handleSize / 2,
+    top: y - paint.handleSize / 2,
+    width: paint.handleSize,
+    height: paint.handleSize
+  }, hit = {
+    left: x - paint.hitSize / 2,
+    top: y - paint.hitSize / 2,
+    width: paint.hitSize,
+    height: paint.hitSize
+  };
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      Rectangle,
+      {
+        pointerEvents: "none",
+        style: {
+          ...visual,
+          fill: paint.handleFill,
+          stroke: paint.handleStroke,
+          strokeWidth: paint.strokeWidth,
+          opacity: 1
+        }
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      Rectangle,
+      {
+        ...handlers,
+        keyboardFocusable: true,
+        style: { ...hit, fill: "rgba(0,0,0,0)", cursor: "grab" }
+      }
+    )
+  ] });
+}
+function sharedMappedDelta(points, requested, viewport) {
+  return clamp(requested, [
+    Math.min(...viewport) - Math.min(...points),
+    Math.max(...viewport) - Math.max(...points)
+  ]);
+}
+function RangeNavigator(props) {
+  const values = pair(
+    resolveSignalValue(props.values),
+    "RangeNavigator values"
+  ), span = pair(resolveSignalValue(props.span), "RangeNavigator span"), source = scale(props.scale, "RangeNavigator"), paint = style(props.style), minimum = nonnegative(props.minimumSpan ?? 0, "RangeNavigator minimumSpan"), draft = useSignal(null), transform = useRef();
+  navigatorInterval(values, minimum, source, "RangeNavigator");
+  const first = source.map(values[0]), second = source.map(values[1]), visible = range(first, second, source.range);
+  const cancel = () => {
+    const active = draft.get();
+    if (!active) return;
+    props.onChange(active.original);
+    release(draft, active);
+    props.onCancel?.();
+  };
+  const down = (mode) => (event) => begin(draft, event, values, mode, transform.current, [source]);
+  const move = (event) => {
+    const active = draft.get();
+    if (!active || active.pointerId !== event.pointerId) return;
+    const point = local(active.inverse, event), captured = active.scales[0], next = active.mode === "pan" ? panMapped(
+      active.original,
+      point.x - active.start.x,
+      captured,
+      true,
+      minimum
+    ) : edge(
+      active.original,
+      active.mode,
+      captured.invert(point.x),
+      minimum,
+      captured,
+      true
+    );
+    publish(draft, active, next, props.onChange);
+    event.stopPropagation();
+  };
+  const up = (event) => {
+    const active = draft.get();
+    if (!active || active.pointerId !== event.pointerId) return;
+    release(draft, active);
+    props.onCommit?.(active.last);
+    event.stopPropagation();
+  };
+  if (!visible) return null;
+  const top = Math.min(...span), height = Math.abs(span[1] - span[0]), center = top + height / 2;
+  const edit = (sign) => {
+    const keyboardStep = minimum || Math.abs(source.domain[1] - source.domain[0]) * 0.01, next = pan(values, sign * keyboardStep, source, true);
+    props.onChange(next);
+    props.onCommit?.(next);
+  };
+  const handleKeys = (event) => keys(event, cancel, edit);
+  return /* @__PURE__ */ jsxs(TransformCapture, { capture: transform, children: [
+    /* @__PURE__ */ jsx(
+      Rectangle,
+      {
+        keyboardFocusable: true,
+        onPointerDown: down("pan"),
+        onPointerMove: move,
+        onPointerUp: up,
+        onPointerCancel: cancel,
+        onLostPointerCapture: cancel,
+        onKeyDown: handleKeys,
+        style: {
+          left: visible[0],
+          top,
+          width: visible[1] - visible[0],
+          height,
+          fill: paint.fill,
+          stroke: paint.stroke,
+          strokeWidth: paint.strokeWidth,
+          opacity: paint.opacity,
+          cursor: "grab"
+        }
+      }
+    ),
+    handle(first, center, paint, {
+      onPointerDown: down("first"),
+      onPointerMove: move,
+      onPointerUp: up,
+      onPointerCancel: cancel,
+      onLostPointerCapture: cancel,
+      onKeyDown: handleKeys
+    }),
+    handle(second, center, paint, {
+      onPointerDown: down("second"),
+      onPointerMove: move,
+      onPointerUp: up,
+      onPointerCancel: cancel,
+      onLostPointerCapture: cancel,
+      onKeyDown: handleKeys
+    })
+  ] });
+}
+function EditableReferenceLine(props) {
+  if (props.direction !== "horizontal" && props.direction !== "vertical")
+    throw new TypeError(
+      "EditableReferenceLine direction must be horizontal or vertical."
+    );
+  const value = resolveSignalValue(props.value), span = pair(resolveSignalValue(props.span), "EditableReferenceLine span"), source = scale(props.scale, "EditableReferenceLine"), step = positive(props.keyboardStep, "EditableReferenceLine keyboardStep"), paint = style(props.style), selected = resolveSignalValue(props.selected ?? true), draft = useSignal(null), transform = useRef();
+  if (!Number.isFinite(value))
+    throw new RangeError("EditableReferenceLine value must be finite.");
+  const position = source.map(value), cancel = () => {
+    const active = draft.get();
+    if (!active) return;
+    props.onChange(active.original);
+    release(draft, active);
+    props.onCancel?.();
+  }, down = (event) => {
+    props.onSelect?.();
+    begin(draft, event, value, "line", transform.current, [source]);
+  };
+  const move = (event) => {
+    const active = draft.get();
+    if (!active || active.pointerId !== event.pointerId) return;
+    const point = local(active.inverse, event), captured = active.scales[0];
+    publish(
+      draft,
+      active,
+      captured.invert(props.direction === "horizontal" ? point.y : point.x),
+      props.onChange
+    );
+    event.stopPropagation();
+  }, up = (event) => {
+    const active = draft.get();
+    if (!active || active.pointerId !== event.pointerId) return;
+    release(draft, active);
+    props.onCommit?.(active.last);
+    event.stopPropagation();
+  };
+  if (!range(position, position, source.range)) return null;
+  const coords = props.direction === "horizontal" ? [
+    [span[0], position],
+    [span[1], position]
+  ] : [
+    [position, span[0]],
+    [position, span[1]]
+  ], x = props.direction === "horizontal" ? (span[0] + span[1]) / 2 : position, y = props.direction === "horizontal" ? position : (span[0] + span[1]) / 2;
+  const edit = (sign) => {
+    props.onSelect?.();
+    const next = value + sign * step;
+    props.onChange(next);
+    props.onCommit?.(next);
+  };
+  const handleKeys = (event) => keys(event, cancel, edit);
+  return /* @__PURE__ */ jsxs(TransformCapture, { capture: transform, children: [
+    /* @__PURE__ */ jsx(
+      Line,
+      {
+        keyboardFocusable: true,
+        onPointerDown: down,
+        onPointerMove: move,
+        onPointerUp: up,
+        onPointerCancel: cancel,
+        onLostPointerCapture: cancel,
+        onKeyDown: handleKeys,
+        style: {
+          coords,
+          stroke: paint.stroke,
+          strokeWidth: paint.strokeWidth,
+          opacity: paint.opacity,
+          lineInteractionWidth: paint.hitSize,
+          cursor: "grab"
+        }
+      }
+    ),
+    selected ? handle(x, y, paint, {
+      onPointerDown: down,
+      onPointerMove: move,
+      onPointerUp: up,
+      onPointerCancel: cancel,
+      onLostPointerCapture: cancel,
+      onKeyDown: handleKeys
+    }) : null
+  ] });
+}
+function EditableReferenceBand(props) {
+  if (props.direction !== "horizontal" && props.direction !== "vertical")
+    throw new TypeError(
+      "EditableReferenceBand direction must be horizontal or vertical."
+    );
+  const values = pair(
+    resolveSignalValue(props.values),
+    "EditableReferenceBand values"
+  ), span = pair(resolveSignalValue(props.span), "EditableReferenceBand span"), source = scale(props.scale, "EditableReferenceBand"), step = positive(props.keyboardStep, "EditableReferenceBand keyboardStep"), minimum = nonnegative(
+    props.minimumSpan ?? 0,
+    "EditableReferenceBand minimumSpan"
+  ), paint = style(props.style), selected = resolveSignalValue(props.selected ?? true), draft = useSignal(null), transform = useRef();
+  annotationInterval(values, minimum, "EditableReferenceBand");
+  const first = source.map(values[0]), second = source.map(values[1]), visible = range(first, second, source.range);
+  const cancel = () => {
+    const active = draft.get();
+    if (!active) return;
+    props.onChange(active.original);
+    release(draft, active);
+    props.onCancel?.();
+  };
+  const down = (mode) => (event) => {
+    props.onSelect?.();
+    begin(draft, event, values, mode, transform.current, [source]);
+  };
+  const move = (event) => {
+    const active = draft.get();
+    if (!active || active.pointerId !== event.pointerId) return;
+    const point = local(active.inverse, event), coordinate = props.direction === "horizontal" ? point.y : point.x, start = props.direction === "horizontal" ? active.start.y : active.start.x, captured = active.scales[0], next = active.mode === "pan" ? panMapped(
+      active.original,
+      coordinate - start,
+      captured,
+      false,
+      minimum
+    ) : edge(
+      active.original,
+      active.mode,
+      captured.invert(coordinate),
+      minimum,
+      captured,
+      false
+    );
+    publish(draft, active, next, props.onChange);
+    event.stopPropagation();
+  };
+  const up = (event) => {
+    const active = draft.get();
+    if (!active || active.pointerId !== event.pointerId) return;
+    release(draft, active);
+    props.onCommit?.(active.last);
+    event.stopPropagation();
+  };
+  const edit = (sign) => {
+    props.onSelect?.();
+    const next = pan(values, sign * step, source, false);
+    props.onChange(next);
+    props.onCommit?.(next);
+  };
+  if (!visible) return null;
+  const rect = props.direction === "horizontal" ? {
+    left: Math.min(...span),
+    top: visible[0],
+    width: Math.abs(span[1] - span[0]),
+    height: visible[1] - visible[0]
+  } : {
+    left: visible[0],
+    top: Math.min(...span),
+    width: visible[1] - visible[0],
+    height: Math.abs(span[1] - span[0])
+  };
+  const firstHandle = props.direction === "horizontal" ? [Math.min(...span), first] : [first, Math.min(...span)], secondHandle = props.direction === "horizontal" ? [Math.max(...span), second] : [second, Math.max(...span)];
+  const handleKeys = (event) => keys(event, cancel, edit);
+  return /* @__PURE__ */ jsxs(TransformCapture, { capture: transform, children: [
+    /* @__PURE__ */ jsx(
+      Rectangle,
+      {
+        keyboardFocusable: true,
+        onPointerDown: down("pan"),
+        onPointerMove: move,
+        onPointerUp: up,
+        onPointerCancel: cancel,
+        onLostPointerCapture: cancel,
+        onKeyDown: handleKeys,
+        style: {
+          ...rect,
+          fill: paint.fill,
+          stroke: paint.stroke,
+          strokeWidth: paint.strokeWidth,
+          opacity: paint.opacity,
+          cursor: "grab"
+        }
+      }
+    ),
+    selected ? /* @__PURE__ */ jsxs(Fragment, { children: [
+      handle(firstHandle[0], firstHandle[1], paint, {
+        onPointerDown: down("first"),
+        onPointerMove: move,
+        onPointerUp: up,
+        onPointerCancel: cancel,
+        onLostPointerCapture: cancel,
+        onKeyDown: handleKeys
+      }),
+      handle(secondHandle[0], secondHandle[1], paint, {
+        onPointerDown: down("second"),
+        onPointerMove: move,
+        onPointerUp: up,
+        onPointerCancel: cancel,
+        onLostPointerCapture: cancel,
+        onKeyDown: handleKeys
+      })
+    ] }) : null
+  ] });
+}
+function snap(source, position) {
+  const time = source.nearestTimeAtPosition?.(position);
+  if (time === void 0)
+    throw new RangeError(
+      "EditableTrendLine cannot edit an empty TradingTimeScale."
+    );
+  return time;
+}
+function mapped(source, position) {
+  return source.type === "trading-time" ? snap(source, position) : source.invert(position);
+}
+function advanceTradingTime(source, value, sign, step) {
+  const target = value + sign * step, candidates = source.domain.filter(
+    (candidate) => sign > 0 ? candidate >= target : candidate <= target
+  );
+  return sign > 0 ? candidates[0] ?? Math.max(...source.domain) : candidates[candidates.length - 1] ?? Math.min(...source.domain);
+}
+function translateTradingAnchors(source, anchors, sign, step) {
+  const slots = anchors.map((anchor) => source.slotAtTime(anchor.x));
+  const requested = source.slotAtTime(advanceTradingTime(source, anchors[0].x, sign, step)) - slots[0];
+  const delta = clamp(requested, [
+    -Math.min(...slots),
+    source.domain.length - 1 - Math.max(...slots)
+  ]);
+  return [
+    { ...anchors[0], x: source.timeAtSlot(slots[0] + delta) },
+    { ...anchors[1], x: source.timeAtSlot(slots[1] + delta) }
+  ];
+}
+function EditableTrendLine(props) {
+  const anchors = resolveSignalValue(props.anchors), x = scale(props.xScale, "EditableTrendLine xScale", {
+    allowTradingTime: true
+  }), y = scale(props.yScale, "EditableTrendLine yScale"), stepX = positive(props.keyboardStep.x, "EditableTrendLine keyboardStep.x"), stepY = positive(props.keyboardStep.y, "EditableTrendLine keyboardStep.y"), paint = style(props.style), selected = resolveSignalValue(props.selected ?? true), draft = useSignal(null), transform = useRef();
+  if (!Array.isArray(anchors) || anchors.length !== 2 || !anchors.every(
+    (anchor) => Number.isFinite(anchor.x) && Number.isFinite(anchor.y)
+  ))
+    throw new RangeError("EditableTrendLine requires two finite anchors.");
+  const positions = [
+    { x: x.map(anchors[0].x), y: y.map(anchors[0].y) },
+    { x: x.map(anchors[1].x), y: y.map(anchors[1].y) }
+  ];
+  const cancel = () => {
+    const active = draft.get();
+    if (!active) return;
+    props.onChange(active.original);
+    release(draft, active);
+    props.onCancel?.();
+  };
+  const down = (mode) => (event) => {
+    props.onSelect?.();
+    begin(
+      draft,
+      event,
+      anchors,
+      mode,
+      transform.current,
+      [x, y]
+    );
+  };
+  const move = (event) => {
+    const active = draft.get();
+    if (!active || active.pointerId !== event.pointerId) return;
+    const point = local(active.inverse, event), dragX = active.scales[0], dragY = active.scales[1];
+    let next;
+    if (active.mode === "line") {
+      const originalPositions = [
+        {
+          x: dragX.map(active.original[0].x),
+          y: dragY.map(active.original[0].y)
+        },
+        {
+          x: dragX.map(active.original[1].x),
+          y: dragY.map(active.original[1].y)
+        }
+      ];
+      const yDelta = point.y - active.start.y;
+      const slotDelta = dragX.type === "trading-time" ? clamp(
+        Math.round(
+          dragX.slotAtTime(snap(dragX, point.x)) - dragX.slotAtTime(snap(dragX, active.start.x))
+        ),
+        [
+          -Math.min(
+            dragX.slotAtTime(active.original[0].x),
+            dragX.slotAtTime(active.original[1].x)
+          ),
+          dragX.domain.length - 1 - Math.max(
+            dragX.slotAtTime(active.original[0].x),
+            dragX.slotAtTime(active.original[1].x)
+          )
+        ]
+      ) : 0;
+      const xDelta = dragX.type === "trading-time" ? 0 : point.x - active.start.x;
+      const translateX = (anchor, position) => dragX.type === "trading-time" ? dragX.timeAtSlot(dragX.slotAtTime(anchor.x) + slotDelta) : mapped(dragX, position.x + xDelta);
+      next = [
+        {
+          x: translateX(active.original[0], originalPositions[0]),
+          y: mapped(dragY, originalPositions[0].y + yDelta)
+        },
+        {
+          x: translateX(active.original[1], originalPositions[1]),
+          y: mapped(dragY, originalPositions[1].y + yDelta)
+        }
+      ];
+    } else {
+      const index = active.mode === "first" ? 0 : 1, changed = { x: mapped(dragX, point.x), y: mapped(dragY, point.y) };
+      next = index === 0 ? [changed, active.original[1]] : [active.original[0], changed];
+    }
+    publish(draft, active, next, props.onChange);
+    event.stopPropagation();
+  };
+  const up = (event) => {
+    const active = draft.get();
+    if (!active || active.pointerId !== event.pointerId) return;
+    release(draft, active);
+    props.onCommit?.(active.last);
+    event.stopPropagation();
+  };
+  const edit = (sign, axis) => {
+    props.onSelect?.();
+    const translated = axis === "y" ? anchors : x.type === "trading-time" ? translateTradingAnchors(x, anchors, sign, stepX) : [
+      { ...anchors[0], x: anchors[0].x + sign * stepX },
+      { ...anchors[1], x: anchors[1].x + sign * stepX }
+    ];
+    const next = [
+      { ...translated[0], y: anchors[0].y + (axis === "y" ? sign * stepY : 0) },
+      { ...translated[1], y: anchors[1].y + (axis === "y" ? sign * stepY : 0) }
+    ];
+    props.onChange(next);
+    props.onCommit?.(next);
+  };
+  const coords = positions.map((point) => [
+    point.x,
+    point.y
+  ]);
+  const handleKeys = (event) => keys(
+    event,
+    cancel,
+    (sign) => edit(
+      sign,
+      event.key === "ArrowLeft" || event.key === "ArrowRight" ? "x" : "y"
+    )
+  );
+  return /* @__PURE__ */ jsxs(TransformCapture, { capture: transform, children: [
+    /* @__PURE__ */ jsx(
+      Line,
+      {
+        keyboardFocusable: true,
+        onPointerDown: down("line"),
+        onPointerMove: move,
+        onPointerUp: up,
+        onPointerCancel: cancel,
+        onLostPointerCapture: cancel,
+        onKeyDown: handleKeys,
+        style: {
+          coords,
+          stroke: paint.stroke,
+          strokeWidth: paint.strokeWidth,
+          opacity: paint.opacity,
+          lineInteractionWidth: paint.hitSize,
+          cursor: "grab"
+        }
+      }
+    ),
+    selected ? /* @__PURE__ */ jsxs(Fragment, { children: [
+      handle(positions[0].x, positions[0].y, paint, {
+        onPointerDown: down("first"),
+        onPointerMove: move,
+        onPointerUp: up,
+        onPointerCancel: cancel,
+        onLostPointerCapture: cancel,
+        onKeyDown: handleKeys
+      }),
+      handle(positions[1].x, positions[1].y, paint, {
+        onPointerDown: down("second"),
+        onPointerMove: move,
+        onPointerUp: up,
+        onPointerCancel: cancel,
+        onLostPointerCapture: cancel,
+        onKeyDown: handleKeys
+      })
+    ] }) : null
+  ] });
+}
+export {
+  EditableReferenceBand,
+  EditableReferenceLine,
+  EditableTrendLine,
+  RangeNavigator
+};
+//# sourceMappingURL=editable-chart-elements.js.map