@pie-lib/charting 8.0.8-next.20261102140134 → 8.0.8-next.20261102164954

package/dist/__tests__/drag-handle-props.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/__tests__/drag-hover.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/bars/common/bars.d.ts

@@ -44,11 +44,13 @@ export declare class RawBar extends React.Component {
     };
     constructor(props: any);
     componentDidMount(): void;
+    componentDidUpdate(prevProps: any): void;
     componentWillUnmount(): void;
     handleMouseMove: any;
     isMouseInsideSvgElement: any;
-    handleMouseEnter: () => void;
-    handleMouseLeave: () => void;
+    handleMouseEnter: () => any;
+    handleMouseLeave: () => any;
+    dragStart: any;
     setDragValue: (dragValue: any) => void;
     changeValue: any;
     dragStop: any;

package/dist/bars/common/bars.js

@@ -2,17 +2,18 @@ import e from "../../node_modules/.bun/@visx_group@4.0.0_d84c32d47042070f/node_m
 import t from "../../node_modules/.bun/@visx_shape@4.0.0_d84c32d47042070f/node_modules/@visx/shape/esm/shapes/Bar.js";
 import { bandKey as n } from "../../utils.js";
 import { D as r, DragHandle as i } from "../../common/drag-handle.js";
-import { MarkSlider as a } from "../../common/mark-slider.js";
-import { CorrectCheckIcon as o } from "./correct-check-icon.js";
-import s from "react";
-import c from "prop-types";
-import { styled as l } from "@mui/material/styles";
-import u from "debug";
-import { types as d } from "@pie-lib/plot";
-import { color as f } from "@pie-lib/render-ui";
-import { Fragment as p, jsx as m, jsxs as h } from "react/jsx-runtime";
+import { DragHover as a } from "../../common/drag-hover.js";
+import { MarkSlider as o } from "../../common/mark-slider.js";
+import { CorrectCheckIcon as s } from "./correct-check-icon.js";
+import c from "react";
+import l from "prop-types";
+import { styled as u } from "@mui/material/styles";
+import d from "debug";
+import { types as f } from "@pie-lib/plot";
+import { color as p } from "@pie-lib/render-ui";
+import { Fragment as m, jsx as h, jsxs as g } from "react/jsx-runtime";
 //#region src/bars/common/bars.tsx
-var g = u("pie-lib:chart:bars"), _ = [
+var _ = d("pie-lib:chart:bars"), v = [
 	"#006699",
 	"#F59B00",
 	"#08916D",
@@ -25,7 +26,7 @@ var g = u("pie-lib:chart:bars"), _ = [
 	"#4FD2D2",
 	"#F0E442",
 	"#E287B2"
-], v = [
+], y = [
 	"#003754",
 	"#975616",
 	"#00503B",
@@ -38,48 +39,50 @@ var g = u("pie-lib:chart:bars"), _ = [
 	"#167A7A",
 	"#91862D",
 	"#894A65"
-], y = (e, t, n, r, i) => e && t && i ? r[n % r.length] : e && i ? f.visualElementsColors.ROLLOVER_FILL_BAR_COLOR : t || null, b = l(t)(() => ({ fill: f.defaults.TERTIARY })), x = 10, S = class extends s.Component {
+], b = (e, t, n, r, i) => e && t && i ? r[n % r.length] : e && i ? p.visualElementsColors.ROLLOVER_FILL_BAR_COLOR : t || null, x = u(t)(() => ({ fill: p.defaults.TERTIARY })), S = 10, C = class extends c.Component {
 	static propTypes = {
-		barColor: c.string,
-		onChangeCategory: c.func,
-		value: c.number,
-		label: c.string,
-		xBand: c.func,
-		index: c.number.isRequired,
-		graphProps: d.GraphPropsType.isRequired,
-		interactive: c.bool,
-		disabled: c.bool,
-		correctness: c.shape({
-			value: c.string,
-			label: c.string
+		barColor: l.string,
+		onChangeCategory: l.func,
+		value: l.number,
+		label: l.string,
+		xBand: l.func,
+		index: l.number.isRequired,
+		graphProps: f.GraphPropsType.isRequired,
+		interactive: l.bool,
+		disabled: l.bool,
+		correctness: l.shape({
+			value: l.string,
+			label: l.string
 		}),
-		correctData: c.array,
-		defineChart: c.bool,
-		language: c.string
+		correctData: l.array,
+		defineChart: l.bool,
+		language: l.string
 	};
 	constructor(e) {
 		super(e), this.state = {
 			dragValue: void 0,
 			isHovered: !1
-		}, this.mouseX = 0, this.mouseY = 0;
+		}, this.hover = new a((e) => this.setState({ isHovered: e })), this.mouseX = 0, this.mouseY = 0;
 	}
 	componentDidMount() {
-		window.addEventListener("mousemove", this.handleMouseMove);
+		this.hover.attach(), window.addEventListener("mousemove", this.handleMouseMove);
+	}
+	componentDidUpdate(e) {
+		this.props.disabled && !e.disabled && (this.hover.stop(), this.setDragValue(void 0));
 	}
 	componentWillUnmount() {
-		window.removeEventListener("mousemove", this.handleMouseMove);
+		window.removeEventListener("mousemove", this.handleMouseMove), this.hover.dispose();
 	}
 	handleMouseMove = (e) => {
-		this.mouseX = e.clientX, this.mouseY = e.clientY;
-		let t = this.isMouseInsideSvgElement();
-		this.setState({ isHovered: t });
+		this.mouseX = e.clientX, this.mouseY = e.clientY, this.hover.setInside(this.isMouseInsideSvgElement());
 	};
 	isMouseInsideSvgElement = () => {
 		let e = this.gRef.getBoundingClientRect();
 		return this.mouseX >= e.left && this.mouseX <= e.right && this.mouseY >= e.top && this.mouseY <= e.bottom;
 	};
-	handleMouseEnter = () => this.setState({ isHovered: !0 });
-	handleMouseLeave = () => this.setState({ isHovered: !1 });
+	handleMouseEnter = () => this.hover.setInside(!0);
+	handleMouseLeave = () => this.hover.setInside(!1);
+	dragStart = () => this.hover.start();
 	setDragValue = (e) => this.setState({ dragValue: e });
 	changeValue = (e) => {
 		let { label: t, onChangeCategory: n } = this.props;
@@ -89,48 +92,48 @@ var g = u("pie-lib:chart:bars"), _ = [
 		});
 	};
 	dragStop = () => {
-		let { dragValue: e } = this.state;
-		g("[dragStop]", e), e !== void 0 && this.changeValue(e), this.setDragValue(void 0);
+		let { dragValue: e } = this.state, { disabled: t } = this.props;
+		_("[dragStop]", e), e !== void 0 && !t && this.changeValue(e), this.setDragValue(void 0), this.hover.stop();
 	};
 	dragValue = (e, t) => {
-		g("[dragValue] next:", t), this.setDragValue(t);
+		_("[dragValue] next:", t), this.setDragValue(t);
 	};
 	render() {
-		let { graphProps: e, value: t, label: s, xBand: c, index: l, interactive: u, disabled: d, correctness: g, barColor: _, defineChart: S, correctData: C, language: w } = this.props, { scale: T, range: E } = e, { dragValue: D, isHovered: O } = this.state, k = y(O, _, l, v, u && !g), A = Number.isFinite(D) ? D : t, j = c.bandwidth(), M = T.y(E.max - A), N = c(n({ label: s }, l)), P = E.max - A, F = E.max - P, I = C ? C.find((e) => e.label === s) : null, L = u ? r : i, R = !!_;
-		return /* @__PURE__ */ h(a, {
+		let { graphProps: e, value: t, label: a, xBand: c, index: l, interactive: u, disabled: d, correctness: f, barColor: _, defineChart: v, correctData: C, language: w } = this.props, { scale: T, range: E } = e, { dragValue: D, isHovered: O } = this.state, k = b(O, _, l, y, u && !f), A = Number.isFinite(D) ? D : t, j = c.bandwidth(), M = T.y(E.max - A), N = c(n({ label: a }, l)), P = E.max - A, F = E.max - P, I = C ? C.find((e) => e.label === a) : null, L = u ? r : i, R = !!_;
+		return /* @__PURE__ */ g(o, {
 			ref: (e) => this.gRef = e,
 			onMouseEnter: this.handleMouseEnter,
 			onMouseLeave: this.handleMouseLeave,
 			onTouchStart: this.handleMouseEnter,
 			onTouchEnd: this.handleMouseLeave,
 			enabled: u && !d,
-			label: s,
+			label: a,
 			index: l,
 			value: A,
 			graphProps: e,
 			language: w,
 			focusBox: {
 				x: N,
-				y: T.y(F) - x,
+				y: T.y(F) - S,
 				width: j,
-				height: Math.max(0, M) + x
+				height: Math.max(0, M) + S
 			},
 			onChange: this.changeValue,
 			children: [
-				/* @__PURE__ */ m(b, {
+				/* @__PURE__ */ h(x, {
 					x: N,
 					y: T.y(F),
 					width: j,
 					height: M,
 					style: { fill: k }
 				}),
-				g && g.value === "incorrect" && (() => {
+				f && f.value === "incorrect" && (() => {
 					let e = parseFloat(I && I.value);
 					if (isNaN(e)) return null;
-					let t = T.y(E.max - e), n = M, r = Math.abs(t - n), i = T.y(e), a = t > n ? f.borderGray() : f.defaults.WHITE, s = t > n ? i : i - r;
-					return /* @__PURE__ */ h(p, { children: [/* @__PURE__ */ m(b, {
+					let t = T.y(E.max - e), n = M, r = Math.abs(t - n), i = T.y(e), a = t > n ? p.borderGray() : p.defaults.WHITE, o = t > n ? i : i - r;
+					return /* @__PURE__ */ g(m, { children: [/* @__PURE__ */ h(x, {
 						x: N + 2,
-						y: s,
+						y: o,
 						width: j - 4,
 						height: r,
 						style: {
@@ -139,45 +142,46 @@ var g = u("pie-lib:chart:bars"), _ = [
 							strokeDasharray: "5,2",
 							fill: "none"
 						}
-					}), /* @__PURE__ */ m("foreignObject", {
+					}), /* @__PURE__ */ h("foreignObject", {
 						x: N + j - (R ? 24 : 14),
 						y: i - 12,
 						width: 24,
 						height: 24,
-						children: /* @__PURE__ */ m(o, { dashColor: a })
+						children: /* @__PURE__ */ h(s, { dashColor: a })
 					})] });
 				})(),
-				/* @__PURE__ */ m(L, {
+				/* @__PURE__ */ h(L, {
 					x: N,
 					y: A,
-					defineChart: S,
+					defineChart: v,
 					interactive: u,
 					disabled: d,
 					width: j,
+					onDragStart: this.dragStart,
 					onDrag: (e) => this.dragValue(t, e),
 					onDragStop: this.dragStop,
 					graphProps: e,
-					correctness: g,
+					correctness: f,
 					isHovered: O,
 					color: k
 				})
 			]
 		});
 	}
-}, C = S, w = class extends s.Component {
+}, w = C, T = class extends c.Component {
 	static propTypes = {
-		data: c.array,
-		correctData: c.array,
-		onChangeCategory: c.func,
-		defineChart: c.bool,
-		xBand: c.func,
-		graphProps: d.GraphPropsType.isRequired,
-		histogram: c.bool,
-		language: c.string
+		data: l.array,
+		correctData: l.array,
+		onChangeCategory: l.func,
+		defineChart: l.bool,
+		xBand: l.func,
+		graphProps: f.GraphPropsType.isRequired,
+		histogram: l.bool,
+		language: l.string
 	};
 	render() {
 		let { data: t, graphProps: n, xBand: r, onChangeCategory: i, defineChart: a, histogram: o, correctData: s, disabled: c, language: l } = this.props;
-		return /* @__PURE__ */ m(e, { children: (t || []).map((e, t) => /* @__PURE__ */ m(C, {
+		return /* @__PURE__ */ h(e, { children: (t || []).map((e, t) => /* @__PURE__ */ h(w, {
 			value: e.value,
 			interactive: a || e.interactive,
 			defineChart: a,
@@ -190,9 +194,9 @@ var g = u("pie-lib:chart:bars"), _ = [
 			correctness: e.correctness,
 			correctData: s,
 			language: l,
-			barColor: o && (_[t] ? _[t] : _[t % _.length])
+			barColor: o && (v[t] ? v[t] : v[t % v.length])
 		}, `bar-${e.label}-${t}`)) });
 	}
 };
 //#endregion
-export { w as Bars, w as default, S as RawBar };
+export { T as Bars, T as default, C as RawBar };

package/dist/common/drag-handle.d.ts

@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 export declare const DragHandle: {
-    ({ x, y, width, graphProps, interactive, isHovered, correctness, isPlot, ...rest }: {
+    ({ x, y, width, graphProps, interactive, isHovered, correctness, isPlot, isDragging, onDragStart, onDrag, onDragStop, ...rest }: {
         [x: string]: any;
         x: any;
         y: any;
@@ -11,6 +11,10 @@ export declare const DragHandle: {
         isHovered: any;
         correctness: any;
         isPlot: any;
+        isDragging: any;
+        onDragStart: any;
+        onDrag: any;
+        onDragStop: any;
     }): React.JSX.Element;
     propTypes: {
         x: PropTypes.Validator<number>;
@@ -52,13 +56,11 @@ export declare const DragHandle: {
 export declare const D: {
     new (props: any): {
         nodeRef: React.RefObject<unknown>;
+        isLocked: any;
         grid: any;
         onStart: any;
         position: any;
-        tiny: any;
         getScaledBounds: any;
-        getClientPoint: any;
-        skipDragOutsideOfBounds: any;
         onDrag: any;
         getDelta: any;
         applyDelta: any;
@@ -85,6 +87,7 @@ export declare const D: {
         componentWillUpdate?(nextProps: Readonly<{}>, nextState: Readonly<{}>, nextContext: any): void;
         UNSAFE_componentWillUpdate?(nextProps: Readonly<{}>, nextState: Readonly<{}>, nextContext: any): void;
     };
+    contextType: React.Context<boolean>;
     propTypes: {
         disabled: PropTypes.Requireable<boolean>;
         onDragStart: PropTypes.Requireable<(...args: any[]) => any>;
@@ -117,6 +120,5 @@ export declare const D: {
             }>>>;
         }>>>;
     };
-    contextType?: React.Context<any> | undefined;
 };
 export default D;

package/dist/common/drag-handle.js

@@ -32,17 +32,17 @@ var f = r("svg")(() => ({ overflow: "visible !important" })), p = r("ellipse")((
 	width: "16px",
 	height: "16px",
 	boxSizing: "unset"
-})), g = ({ x: n, y: r, width: i, graphProps: a, interactive: o, isHovered: u, correctness: d, isPlot: g, ..._ }) => {
-	let { scale: v } = a, y = e(i)?.scale;
+})), g = ({ x: n, y: r, width: i, graphProps: a, interactive: o, isHovered: u, correctness: d, isPlot: g, isDragging: _, onDragStart: v, onDrag: y, onDragStop: b, ...x }) => {
+	let { scale: S } = a, C = e(i)?.scale;
 	return /* @__PURE__ */ l(f, {
 		x: n,
-		y: v.y(r) - 10,
+		y: S.y(r) - 10,
 		width: i,
 		overflow: "visible",
 		children: [
 			u && !d && o && /* @__PURE__ */ c(t, {
 				width: i,
-				scaleValue: y,
+				scaleValue: C,
 				color: s.defaults.BORDER_GRAY
 			}),
 			o && !d && /* @__PURE__ */ c(p, {
@@ -50,7 +50,7 @@ var f = r("svg")(() => ({ overflow: "visible !important" })), p = r("ellipse")((
 				cy: 10,
 				rx: i / 2,
 				ry: 66,
-				..._
+				...x
 			}),
 			d && o && !g && /* @__PURE__ */ c("foreignObject", {
 				x: i / 2 - 14,

package/dist/common/drag-hover.d.ts

@@ -0,0 +1,34 @@
+/**
+ * The hover of one mark. It knows whether the pointer is over the mark and whether the mark is being
+ * dragged, and reports `hovered` through `onChange` whenever that changes. It is the one place the rule
+ * lives, for function components (`useDragHover`) and class components alike:
+ *   - a dragged mark is hovered wherever the pointer is
+ *   - no other mark is hovered while one is dragged
+ *   - when the drag ends, every mark the pointer is over is hovered again, the dragged one included
+ */
+export declare class DragHover {
+    private onChange;
+    hovered: boolean;
+    private inside;
+    private dragging;
+    private alive;
+    constructor(onChange: (hovered: boolean) => void);
+    /** Starts listening for other marks' drags. Call it once the mark is mounted. */
+    attach(): void;
+    /** Stops listening, and ends the drag if the mark is unmounted in the middle of one. */
+    dispose(): void;
+    /** Whether the pointer is over the mark. Keep it current while dragging: the drop reads it. */
+    setInside(inside: boolean): void;
+    start(): void;
+    stop(): void;
+    update(): void;
+}
+/**
+ * Hover state for a function-component mark. `isDragging` is the flag gridDraggable passes to the mark
+ * it wraps; pass false for a mark that cannot be dragged, so pressing it does not count as a drag.
+ */
+export declare const useDragHover: (isDragging: boolean) => {
+    hovered: boolean;
+    onEnter: () => void;
+    onLeave: () => void;
+};

package/dist/common/drag-hover.js

@@ -0,0 +1,44 @@
+import e from "react";
+//#region src/common/drag-hover.ts
+var t = null, n = /* @__PURE__ */ new Set(), r = class {
+	onChange;
+	hovered = !1;
+	inside = !1;
+	dragging = !1;
+	alive = !1;
+	constructor(e) {
+		this.onChange = e;
+	}
+	attach() {
+		this.alive = !0, n.add(this);
+	}
+	dispose() {
+		this.stop(), this.alive = !1, n.delete(this);
+	}
+	setInside(e) {
+		this.inside = e, this.update();
+	}
+	start() {
+		this.dragging || (this.dragging = !0, t = this, i());
+	}
+	stop() {
+		this.dragging && (this.dragging = !1, t === this && (t = null), i());
+	}
+	update() {
+		let e = this.dragging || this.inside && (t === null || t === this);
+		this.alive && e !== this.hovered && (this.hovered = e, this.onChange(e));
+	}
+}, i = () => n.forEach((e) => e.update()), a = (t) => {
+	let [n, i] = e.useState(!1), a = e.useRef(null);
+	a.current ||= new r(i);
+	let o = a.current;
+	return e.useEffect(() => (o.attach(), () => o.dispose()), [o]), e.useEffect(() => {
+		if (t) return o.start(), () => o.stop();
+	}, [t, o]), {
+		hovered: t || n,
+		onEnter: () => o.setInside(!0),
+		onLeave: () => o.setInside(!1)
+	};
+};
+//#endregion
+export { r as DragHover, a as useDragHover };

package/dist/line/common/drag-handle.d.ts

@@ -43,13 +43,11 @@ export declare const DragHandle: typeof RawDragHandle;
 declare const DraggableHandle: {
     new (props: any): {
         nodeRef: React.RefObject<unknown>;
+        isLocked: any;
         grid: any;
         onStart: any;
         position: any;
-        tiny: any;
         getScaledBounds: any;
-        getClientPoint: any;
-        skipDragOutsideOfBounds: any;
         onDrag: any;
         getDelta: any;
         applyDelta: any;
@@ -76,6 +74,7 @@ declare const DraggableHandle: {
         componentWillUpdate?(nextProps: Readonly<{}>, nextState: Readonly<{}>, nextContext: any): void;
         UNSAFE_componentWillUpdate?(nextProps: Readonly<{}>, nextState: Readonly<{}>, nextContext: any): void;
     };
+    contextType: React.Context<boolean>;
     propTypes: {
         disabled: PropTypes.Requireable<boolean>;
         onDragStart: PropTypes.Requireable<(...args: any[]) => any>;
@@ -108,6 +107,5 @@ declare const DraggableHandle: {
             }>>>;
         }>>>;
     };
-    contextType?: React.Context<any> | undefined;
 };
 export default DraggableHandle;

package/dist/line/common/line.d.ts

@@ -46,6 +46,7 @@ export declare class RawLine extends React.Component {
     };
     constructor(props: any);
     UNSAFE_componentWillReceiveProps(nextProps: any): void;
+    componentDidUpdate(prevProps: any): void;
     setDragValue: (line: any) => void;
     dragStop: any;
     changeValue: any;

package/dist/line/common/line.js

@@ -50,11 +50,17 @@ var p = (e, t) => {
 	UNSAFE_componentWillReceiveProps(e) {
 		c(this.props.data, e.data) || this.setState({ line: p(e.data, e.graphProps.domain) });
 	}
+	componentDidUpdate(e) {
+		this.props.disabled && !e.disabled && this.state.dragging && this.setState({
+			dragging: !1,
+			line: p(this.props.data, this.props.graphProps.domain)
+		});
+	}
 	setDragValue = (e) => this.setState({ line: e });
 	dragStop = (e) => {
-		let { onChange: t } = this.props;
+		let { onChange: t, disabled: n } = this.props;
 		this.setState({ dragging: !1 }, () => {
-			t(e, this.state.line[e]);
+			n || t(e, this.state.line[e]);
 		});
 	};
 	changeValue = (e, t, n) => {

package/dist/line/line-cross.js

@@ -2,8 +2,9 @@ import e from "../node_modules/.bun/@visx_group@4.0.0_d84c32d47042070f/node_modu
 import t from "../node_modules/.bun/@visx_shape@4.0.0_d84c32d47042070f/node_modules/@visx/shape/esm/shapes/LinePath.js";
 import { CorrectnessIndicator as n, SmallCorrectPointIndicator as r } from "../common/correctness-indicators.js";
 import { dataToXBand as i } from "../utils.js";
-import { Line as a } from "./common/line.js";
-import o, { useState as s } from "react";
+import { useDragHover as a } from "../common/drag-hover.js";
+import { Line as o } from "./common/line.js";
+import s from "react";
 import c from "prop-types";
 import { styled as l } from "@mui/material/styles";
 import { types as u } from "@pie-lib/plot";
@@ -14,7 +15,7 @@ var m = l(t)(() => ({
 	stroke: d.defaults.TEXT,
 	transition: "fill 200ms linear, height 200ms linear",
 	"&.non-interactive": { stroke: d.disabled?.() || "#ccc" }
-})), h = l(e)(({ correctness: e, interactive: t }) => ({
+})), h = l(e, { shouldForwardProp: (e) => e !== "correctness" && e !== "interactive" })(({ correctness: e, interactive: t }) => ({
 	stroke: d.defaults.TEXT,
 	transition: "fill 200ms linear, height 200ms linear",
 	...e && !t && {
@@ -27,7 +28,7 @@ var m = l(t)(() => ({
 	fill: "transparent",
 	stroke: "transparent"
 })), _ = (e) => {
-	let { className: t, scale: i, x: a, y: o, r: c, correctness: l, interactive: u, correctData: _, label: v, ...y } = e, [b, x] = s(!1), S = c * 4, C = S / 2, w = i.x(a), T = i.y(o);
+	let { className: t, scale: i, x: o, y: s, r: c, correctness: l, interactive: u, correctData: _, label: v, isDragging: y, disabled: b, onDragStart: x, onDrag: S, onDragStop: C, ...w } = e, { hovered: T, onEnter: E, onLeave: D } = a(!!y && !b), O = c * 4, k = O / 2, A = i.x(o), j = i.y(s);
 	return /* @__PURE__ */ p(h, {
 		className: t,
 		correctness: l,
@@ -35,59 +36,59 @@ var m = l(t)(() => ({
 		children: [
 			/* @__PURE__ */ f(m, {
 				data: [{
-					x: i.x(a) - c,
-					y: i.y(o) + c
+					x: i.x(o) - c,
+					y: i.y(s) + c
 				}, {
-					x: i.x(a) + c,
-					y: i.y(o) - c
+					x: i.x(o) + c,
+					y: i.y(s) - c
 				}],
 				x: (e) => e.x,
 				y: (e) => e.y,
 				strokeWidth: 5,
 				style: { pointerEvents: "none" }
-			}, `point-${a}-${o}-1`),
+			}, `point-${o}-${s}-1`),
 			/* @__PURE__ */ f(m, {
 				data: [{
-					x: i.x(a) - c,
-					y: i.y(o) - c
+					x: i.x(o) - c,
+					y: i.y(s) - c
 				}, {
-					x: i.x(a) + c,
-					y: i.y(o) + c
+					x: i.x(o) + c,
+					y: i.y(s) + c
 				}],
 				x: (e) => e.x,
 				y: (e) => e.y,
 				strokeWidth: 5,
 				style: { pointerEvents: "none" }
-			}, `point-${a}-${o}-2`),
-			b && /* @__PURE__ */ f("rect", {
-				x: w - C,
-				y: T - C,
-				width: S,
-				height: S,
+			}, `point-${o}-${s}-2`),
+			T && /* @__PURE__ */ f("rect", {
+				x: A - k,
+				y: j - k,
+				width: O,
+				height: O,
 				stroke: d.defaults.BORDER_GRAY,
 				fill: "none",
 				strokeWidth: 2,
 				pointerEvents: "none"
 			}),
 			/* @__PURE__ */ f(g, {
-				cx: w,
-				cy: T,
+				cx: A,
+				cy: j,
 				r: c * 2,
-				onMouseEnter: () => x(!0),
-				onMouseLeave: () => x(!1),
-				...y
+				onMouseEnter: E,
+				onMouseLeave: D,
+				...w
 			}),
 			/* @__PURE__ */ f(n, {
 				scale: i,
-				x: a,
-				y: o,
+				x: o,
+				y: s,
 				r: c,
 				correctness: l,
 				interactive: u
 			}),
 			/* @__PURE__ */ f(r, {
 				scale: i,
-				x: a,
+				x: o,
 				r: c,
 				correctness: l,
 				correctData: _,
@@ -110,15 +111,15 @@ _.propTypes = {
 	correctData: c.array,
 	label: c.string
 };
-var v = class extends o.Component {
+var v = class extends s.Component {
 	static propTypes = {
 		data: c.array,
 		onChange: c.func,
 		graphProps: u.GraphPropsType.isRequired
 	};
 	render() {
-		let e = this.props, { data: t, graphProps: n } = e, { scale: r = {}, size: o = {} } = n || {}, s = i(r.x, t, o.width, "lineCross");
-		return /* @__PURE__ */ f(a, {
+		let e = this.props, { data: t, graphProps: n } = e, { scale: r = {}, size: a = {} } = n || {}, s = i(r.x, t, a.width, "lineCross");
+		return /* @__PURE__ */ f(o, {
 			...e,
 			xBand: s,
 			CustomDraggableComponent: _

package/dist/line/line-dot.js

@@ -1,101 +1,100 @@
 import { CorrectnessIndicator as e, SmallCorrectPointIndicator as t } from "../common/correctness-indicators.js";
 import { dataToXBand as n } from "../utils.js";
-import { Line as r } from "./common/line.js";
-import i from "react";
-import a from "prop-types";
-import { styled as o } from "@mui/material/styles";
-import { types as s } from "@pie-lib/plot";
-import { color as c } from "@pie-lib/render-ui";
-import { jsx as l, jsxs as u } from "react/jsx-runtime";
+import { useDragHover as r } from "../common/drag-hover.js";
+import { Line as i } from "./common/line.js";
+import a from "react";
+import o from "prop-types";
+import { styled as s } from "@mui/material/styles";
+import { types as c } from "@pie-lib/plot";
+import { color as l } from "@pie-lib/render-ui";
+import { jsx as u, jsxs as d } from "react/jsx-runtime";
 //#region src/line/line-dot.tsx
-var d = o("circle")(() => ({})), f = o("circle")(() => ({
+var f = s("circle", { shouldForwardProp: (e) => e !== "correctness" && e !== "interactive" })(() => ({})), p = s("circle")(() => ({
 	height: "20px",
 	fill: "transparent",
 	stroke: "none",
 	pointerEvents: "auto"
-})), p = ({ scale: n, x: r, y: a, r: o, correctness: s, interactive: p, correctData: m, label: h, ...g }) => {
-	let [_, v] = i.useState(!1), y = !s && p;
-	return /* @__PURE__ */ u("g", {
-		onMouseEnter: () => v(!0),
-		onMouseLeave: () => v(!1),
-		onTouchStart: () => v(!0),
-		onTouchEnd: () => v(!1),
+})), m = ({ scale: n, x: i, y: a, r: o, correctness: s, interactive: c, correctData: m, label: h, isDragging: g, disabled: _, onDragStart: v, onDrag: y, onDragStop: b, ...x }) => {
+	let { hovered: S, onEnter: C, onLeave: w } = r(!!g && !_), T = !s && c;
+	return /* @__PURE__ */ d("g", {
+		onMouseEnter: C,
+		onMouseLeave: w,
+		onTouchStart: C,
+		onTouchEnd: w,
 		children: [
-			/* @__PURE__ */ l(f, {
-				cx: n.x(r),
+			/* @__PURE__ */ u(p, {
+				cx: n.x(i),
 				cy: n.y(a),
 				r: o * 3,
-				onMouseEnter: () => v(!0),
-				onMouseLeave: () => v(!1),
-				...g
+				...x
 			}),
-			/* @__PURE__ */ l(d, {
-				cx: n.x(r),
+			/* @__PURE__ */ u(f, {
+				cx: n.x(i),
 				cy: n.y(a),
 				r: o,
 				correctness: s,
-				interactive: p,
-				...g
+				interactive: c,
+				...x
 			}),
-			/* @__PURE__ */ l(e, {
+			/* @__PURE__ */ u(e, {
 				scale: n,
-				x: r,
+				x: i,
 				y: a,
 				r: o,
 				correctness: s,
-				interactive: p
+				interactive: c
 			}),
-			/* @__PURE__ */ l(t, {
+			/* @__PURE__ */ u(t, {
 				scale: n,
-				x: r,
+				x: i,
 				r: o,
 				correctness: s,
 				correctData: m,
 				label: h
 			}),
-			_ && y && /* @__PURE__ */ l("rect", {
-				x: n.x(r) - o * 2,
+			S && T && /* @__PURE__ */ u("rect", {
+				x: n.x(i) - o * 2,
 				y: n.y(a) - o * 2,
 				width: o * 4,
 				height: o * 4,
-				stroke: c.defaults.BORDER_GRAY,
+				stroke: l.defaults.BORDER_GRAY,
 				strokeWidth: "1",
 				fill: "none"
 			})
 		]
 	});
 };
-p.propTypes = {
-	scale: a.object,
-	x: a.number,
-	y: a.number,
-	r: a.number,
-	correctness: a.shape({
-		value: a.string,
-		label: a.string
+m.propTypes = {
+	scale: o.object,
+	x: o.number,
+	y: o.number,
+	r: o.number,
+	correctness: o.shape({
+		value: o.string,
+		label: o.string
 	}),
-	interactive: a.bool,
-	correctData: a.array,
-	label: a.string
+	interactive: o.bool,
+	correctData: o.array,
+	label: o.string
 };
-var m = class extends i.Component {
+var h = class extends a.Component {
 	static propTypes = {
-		data: a.array,
-		onChange: a.func,
-		graphProps: s.GraphPropsType.isRequired
+		data: o.array,
+		onChange: o.func,
+		graphProps: c.GraphPropsType.isRequired
 	};
 	render() {
-		let e = this.props, { data: t, graphProps: i } = e, { scale: a = {}, size: o = {} } = i || {}, s = n(a.x, t, o.width, "lineDot");
-		return /* @__PURE__ */ l(r, {
+		let e = this.props, { data: t, graphProps: r } = e, { scale: a = {}, size: o = {} } = r || {}, s = n(a.x, t, o.width, "lineDot");
+		return /* @__PURE__ */ u(i, {
 			...e,
 			xBand: s,
-			CustomDraggableComponent: p
+			CustomDraggableComponent: m
 		});
 	}
-}, h = () => ({
+}, g = () => ({
 	type: "lineDot",
-	Component: m,
+	Component: h,
 	name: "Line Dot"
 });
 //#endregion
-export { m as LineDot, h as default };
+export { h as LineDot, g as default };

package/dist/plot/common/plot.d.ts

@@ -47,8 +47,12 @@ export declare class RawPlot extends React.Component {
         language: PropTypes.Requireable<string>;
     };
     constructor(props: any);
+    componentDidMount(): void;
+    componentDidUpdate(prevProps: any): void;
+    componentWillUnmount(): void;
     handleMouseEnter: any;
     handleMouseLeave: any;
+    dragStart: any;
     setDragValue: (dragValue: any) => void;
     changeValue: any;
     dragStop: any;

package/dist/plot/common/plot.js

@@ -2,51 +2,58 @@ import e from "../../node_modules/.bun/@visx_group@4.0.0_d84c32d47042070f/node_m
 import { bandKey as t } from "../../utils.js";
 import { correct as n, incorrect as r } from "../../common/styles.js";
 import { D as i, DragHandle as a } from "../../common/drag-handle.js";
-import { MarkSlider as o } from "../../common/mark-slider.js";
-import s from "react";
-import c from "prop-types";
-import { styled as l } from "@mui/material/styles";
-import u from "debug";
-import { types as d } from "@pie-lib/plot";
-import { color as f } from "@pie-lib/render-ui";
-import { Fragment as p, jsx as m, jsxs as h } from "react/jsx-runtime";
-import g from "@mui/icons-material/Check";
+import { DragHover as o } from "../../common/drag-hover.js";
+import { MarkSlider as s } from "../../common/mark-slider.js";
+import c from "react";
+import l from "prop-types";
+import { styled as u } from "@mui/material/styles";
+import d from "debug";
+import { types as f } from "@pie-lib/plot";
+import { color as p } from "@pie-lib/render-ui";
+import { Fragment as m, jsx as h, jsxs as g } from "react/jsx-runtime";
+import _ from "@mui/icons-material/Check";
 //#region src/plot/common/plot.tsx
-var _ = u("pie-lib:chart:bars"), v = 16, y = 10, b = class extends s.Component {
+var v = d("pie-lib:chart:bars"), y = 16, b = 10, x = class extends c.Component {
 	static propTypes = {
-		onChangeCategory: c.func,
-		value: c.number,
-		label: c.string,
-		xBand: c.func,
-		index: c.number.isRequired,
-		graphProps: d.GraphPropsType.isRequired,
-		CustomBarElement: c.func,
-		interactive: c.bool,
-		disabled: c.bool,
-		correctness: c.shape({
-			value: c.string,
-			label: c.string
+		onChangeCategory: l.func,
+		value: l.number,
+		label: l.string,
+		xBand: l.func,
+		index: l.number.isRequired,
+		graphProps: f.GraphPropsType.isRequired,
+		CustomBarElement: l.func,
+		interactive: l.bool,
+		disabled: l.bool,
+		correctness: l.shape({
+			value: l.string,
+			label: l.string
 		}),
-		defineChart: c.bool,
-		correctData: c.arrayOf(c.shape({
-			value: c.oneOfType([c.string, c.number]),
-			label: c.string
+		defineChart: l.bool,
+		correctData: l.arrayOf(l.shape({
+			value: l.oneOfType([l.string, l.number]),
+			label: l.string
 		})),
-		className: c.string,
-		language: c.string
+		className: l.string,
+		language: l.string
 	};
 	constructor(e) {
 		super(e), this.state = {
 			dragValue: void 0,
 			isHovered: !1
-		};
+		}, this.hover = new o((e) => this.setState({ isHovered: e }));
 	}
-	handleMouseEnter = () => {
-		this.setState({ isHovered: !0 });
-	};
-	handleMouseLeave = () => {
-		this.setState({ isHovered: !1 });
-	};
+	componentDidMount() {
+		this.hover.attach();
+	}
+	componentDidUpdate(e) {
+		this.props.disabled && !e.disabled && (this.hover.stop(), this.setDragValue(void 0));
+	}
+	componentWillUnmount() {
+		this.hover.dispose();
+	}
+	handleMouseEnter = () => this.hover.setInside(!0);
+	handleMouseLeave = () => this.hover.setInside(!1);
+	dragStart = () => this.hover.start();
 	setDragValue = (e) => this.setState({ dragValue: e });
 	changeValue = (e) => {
 		let { label: t, onChangeCategory: n } = this.props;
@@ -56,43 +63,43 @@ var _ = u("pie-lib:chart:bars"), v = 16, y = 10, b = class extends s.Component {
 		});
 	};
 	dragStop = () => {
-		let { dragValue: e } = this.state;
-		_("[dragStop]", e), e !== void 0 && this.changeValue(e), this.setDragValue(void 0);
+		let { dragValue: e } = this.state, { disabled: t } = this.props;
+		v("[dragStop]", e), e !== void 0 && !t && this.changeValue(e), this.setDragValue(void 0), this.hover.stop();
 	};
 	dragValue = (e, t) => {
-		_("[dragValue] next:", t), this.setDragValue(t);
+		v("[dragValue] next:", t), this.setDragValue(t);
 	};
 	renderCorrectnessIcon = (e, t, n, r, i, a, o) => {
 		let s;
-		if (n === 0) s = i.y(0) - v / 2;
+		if (n === 0) s = i.y(0) - y / 2;
 		else {
 			let e = n - 1;
-			s = i.y(e) - (a - o) / 2 - o / 2 - v / 2;
+			s = i.y(e) - (a - o) / 2 - o / 2 - y / 2;
 		}
-		return /* @__PURE__ */ m("foreignObject", {
-			x: e + t / 2 - v / 2,
+		return /* @__PURE__ */ h("foreignObject", {
+			x: e + t / 2 - y / 2,
 			y: s,
-			width: v,
-			height: v,
-			children: /* @__PURE__ */ m(g, {
+			width: y,
+			height: y,
+			children: /* @__PURE__ */ h(_, {
 				className: "correctnessIcon correctIcon smallIcon",
 				title: r.label
 			})
 		});
 	};
 	render() {
-		let { graphProps: e, value: n, label: r, xBand: c, index: l, CustomBarElement: u, interactive: d, disabled: g, correctness: v, defineChart: b, correctData: x, className: S, language: C } = this.props, { scale: w, range: T, size: E } = e, { max: D } = T || {}, { dragValue: O, isHovered: k } = this.state, A = Number.isFinite(O) ? O : n, j = c.bandwidth(), M = w.y(T.max - A), N = c(t({ label: r }, l));
-		_("label:", r, "barX:", N, "v: ", A, "barHeight:", M, "barWidth: ", j);
+		let { graphProps: e, value: n, label: r, xBand: o, index: l, CustomBarElement: u, interactive: d, disabled: f, correctness: _, defineChart: y, correctData: x, className: S, language: C } = this.props, { scale: w, range: T, size: E } = e, { max: D } = T || {}, { dragValue: O, isHovered: k } = this.state, A = Number.isFinite(O) ? O : n, j = o.bandwidth(), M = w.y(T.max - A), N = o(t({ label: r }, l));
+		v("label:", r, "barX:", N, "v: ", A, "barHeight:", M, "barWidth: ", j);
 		let P = [];
 		for (let e = 0; e < A; e++) P.push(e);
-		let F = E.height / D, I = (F > j ? j : F) * .8, L = d ? i : a, R = d && !v;
-		return /* @__PURE__ */ m(s.Fragment, { children: /* @__PURE__ */ h(o, {
+		let F = E.height / D, I = (F > j ? j : F) * .8, L = d ? i : a, R = d && !_;
+		return /* @__PURE__ */ h(c.Fragment, { children: /* @__PURE__ */ g(s, {
 			className: S,
 			onMouseEnter: this.handleMouseEnter,
 			onMouseLeave: this.handleMouseLeave,
 			onTouchStart: this.handleMouseEnter,
 			onTouchEnd: this.handleMouseLeave,
-			enabled: d && !g,
+			enabled: d && !f,
 			label: r,
 			index: l,
 			value: A,
@@ -100,18 +107,18 @@ var _ = u("pie-lib:chart:bars"), v = 16, y = 10, b = class extends s.Component {
 			language: C,
 			focusBox: {
 				x: N,
-				y: w.y(A) - y,
+				y: w.y(A) - b,
 				width: j,
-				height: F * P.length + y
+				height: F * P.length + b
 			},
 			onChange: this.changeValue,
 			children: [
-				k && R && /* @__PURE__ */ m("rect", {
+				k && R && /* @__PURE__ */ h("rect", {
 					x: N,
 					y: w.y(A),
 					width: j,
 					height: P?.length ? F * P.length : 0,
-					stroke: f.defaults.BORDER_GRAY,
+					stroke: p.defaults.BORDER_GRAY,
 					strokeWidth: "4px",
 					fill: "transparent"
 				}),
@@ -125,30 +132,30 @@ var _ = u("pie-lib:chart:bars"), v = 16, y = 10, b = class extends s.Component {
 					value: n,
 					scale: w
 				})),
-				v && v.value === "incorrect" && (() => {
+				_ && _.value === "incorrect" && (() => {
 					let e = parseFloat(x[l] && x[l].value);
 					if (isNaN(e)) return null;
 					let i = A;
-					if (e === 0) return this.renderCorrectnessIcon(N, j, e, v, w, F, I);
+					if (e === 0) return this.renderCorrectnessIcon(N, j, e, _, w, F, I);
 					if (i > e) {
 						let i = [];
 						for (let t = 0; t < e; t++) i.push(t);
-						let a = i[i.length - 1], o = c(t({ label: r }, l)), s = c.bandwidth(), d = E.height / D, f = (d > s ? s : d) * .8;
-						return /* @__PURE__ */ h(p, { children: [/* @__PURE__ */ m(u, {
+						let a = i[i.length - 1], s = o(t({ label: r }, l)), c = o.bandwidth(), d = E.height / D, f = (d > c ? c : d) * .8;
+						return /* @__PURE__ */ g(m, { children: [/* @__PURE__ */ h(u, {
 							index: a,
 							pointDiameter: f + 10,
-							barX: o,
-							barWidth: s,
+							barX: s,
+							barWidth: c,
 							pointHeight: d,
 							label: r,
 							value: n,
 							scale: w,
 							dottedOverline: !0
-						}), this.renderCorrectnessIcon(o, s, e, v, w, d, f)] });
+						}), this.renderCorrectnessIcon(s, c, e, _, w, d, f)] });
 					}
 					let a = [];
 					for (let t = i; t < e; t++) a.push(t);
-					return /* @__PURE__ */ h(p, { children: [a.map((e) => u({
+					return /* @__PURE__ */ g(m, { children: [a.map((e) => u({
 						index: e,
 						pointDiameter: I,
 						barX: N,
@@ -158,52 +165,53 @@ var _ = u("pie-lib:chart:bars"), v = 16, y = 10, b = class extends s.Component {
 						value: n,
 						scale: w,
 						dottedOverline: !0
-					})), this.renderCorrectnessIcon(N, j, e, v, w, F, I)] });
+					})), this.renderCorrectnessIcon(N, j, e, _, w, F, I)] });
 				})(),
-				/* @__PURE__ */ m(L, {
+				/* @__PURE__ */ h(L, {
 					x: N,
 					y: A,
 					interactive: d,
-					disabled: g,
+					disabled: f,
 					width: j,
+					onDragStart: this.dragStart,
 					onDrag: (e) => this.dragValue(n, e),
 					onDragStop: this.dragStop,
 					graphProps: e,
-					correctness: v,
+					correctness: _,
 					isHovered: k,
-					defineChart: b,
-					color: f.primaryDark(),
+					defineChart: y,
+					color: p.primaryDark(),
 					isPlot: !0
 				})
 			]
 		}) });
 	}
-}, x = l(b)(({ theme: e }) => ({
+}, S = u(x)(({ theme: e }) => ({
 	"& .dot": {
-		fill: f.visualElementsColors.PLOT_FILL_COLOR,
+		fill: p.visualElementsColors.PLOT_FILL_COLOR,
 		"&.correct": n("stroke"),
 		"&.incorrect": r("stroke")
 	},
 	"& .dotColor": {
-		fill: f.visualElementsColors.PLOT_FILL_COLOR,
+		fill: p.visualElementsColors.PLOT_FILL_COLOR,
 		"&.correct": n("fill"),
 		"&.incorrect": r("fill")
 	},
 	"& .line": {
-		stroke: f.visualElementsColors.PLOT_FILL_COLOR,
+		stroke: p.visualElementsColors.PLOT_FILL_COLOR,
 		"&.correct": n("stroke"),
 		"&.incorrect": r("stroke")
 	},
-	"& .correctIcon": { backgroundColor: f.correct() },
-	"& .incorrectIcon": { backgroundColor: f.incorrectWithIcon() },
+	"& .correctIcon": { backgroundColor: p.correct() },
+	"& .incorrectIcon": { backgroundColor: p.incorrectWithIcon() },
 	"& .correctnessIcon": {
 		borderRadius: e.spacing(2),
-		color: f.defaults.WHITE,
+		color: p.defaults.WHITE,
 		fontSize: "16px",
 		width: "16px",
 		height: "16px",
 		padding: "2px",
-		border: `1px solid ${f.defaults.WHITE}`,
+		border: `1px solid ${p.defaults.WHITE}`,
 		stroke: "initial",
 		boxSizing: "unset",
 		display: "block"
@@ -213,24 +221,24 @@ var _ = u("pie-lib:chart:bars"), v = 16, y = 10, b = class extends s.Component {
 		width: "10px",
 		height: "10px"
 	}
-})), S = class extends s.Component {
+})), C = class extends c.Component {
 	static propTypes = {
-		data: c.array,
-		onChangeCategory: c.func,
-		xBand: c.func,
-		graphProps: d.GraphPropsType.isRequired,
-		defineChart: c.bool,
-		CustomBarElement: c.func,
-		correctData: c.arrayOf(c.shape({
-			value: c.oneOfType([c.string, c.number]),
-			label: c.string
+		data: l.array,
+		onChangeCategory: l.func,
+		xBand: l.func,
+		graphProps: f.GraphPropsType.isRequired,
+		defineChart: l.bool,
+		CustomBarElement: l.func,
+		correctData: l.arrayOf(l.shape({
+			value: l.oneOfType([l.string, l.number]),
+			label: l.string
 		})),
-		className: c.string,
-		language: c.string
+		className: l.string,
+		language: l.string
 	};
 	render() {
 		let { data: t, graphProps: n, xBand: r, CustomBarElement: i, onChangeCategory: a, defineChart: o, correctData: s, disabled: c, language: l } = this.props;
-		return /* @__PURE__ */ m(e, { children: (t || []).map((e, t) => /* @__PURE__ */ m(x, {
+		return /* @__PURE__ */ h(e, { children: (t || []).map((e, t) => /* @__PURE__ */ h(S, {
 			value: e.value,
 			label: e.label,
 			interactive: o || e.interactive,
@@ -248,4 +256,4 @@ var _ = u("pie-lib:chart:bars"), v = 16, y = 10, b = class extends s.Component {
 	}
 };
 //#endregion
-export { S as Plot, S as default, b as RawPlot };
+export { C as Plot, C as default, x as RawPlot };

package/dist/utils.d.ts

@@ -25,7 +25,7 @@ export declare const getGridLinesAndAxisByChartType: (range: any, chartType: any
 };
 export declare const getRotateAngle: (fontSize: any, height: any) => 0 | 25;
 export declare const getRotatedLabelOverhang: (width: any, height: any, angle: any) => number;
-export declare const getTopPadding: (barWidth: any) => 0 | 15 | 50 | 30;
+export declare const getTopPadding: (barWidth: any) => 0 | 50 | 15 | 30;
 export declare const getScale: (width: any) => {
     scale: number;
     deltay: number;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pie-lib/charting",
-  "version": "8.0.8-next.20261102140134",
+  "version": "8.0.8-next.20261102164954",
   "description": "charting",
   "repository": {
     "type": "git",
@@ -14,8 +14,8 @@
     "@mui/icons-material": "^7.3.4",
     "@mui/material": "^7.3.4",
     "@pie-element/shared-utils": "0.1.7-next.20261027193325",
-    "@pie-lib/plot": "5.0.8-next.20261102140134",
-    "@pie-lib/render-ui": "8.0.8-next.20261027193325",
+    "@pie-lib/plot": "5.0.8-next.20261102164954",
+    "@pie-lib/render-ui": "8.0.8-next.20261102164954",
     "@pie-lib/translator": "5.0.3-next.20261027184745",
     "@visx/axis": "^4.0.0",
     "@visx/event": "^4.0.0",
@@ -30,8 +30,8 @@
     "invariant": "^2.2.4",
     "react-draggable": "^4.7.2",
     "prop-types": "^15.8.1",
-    "@pie-lib/config-ui": "14.0.8-next.20261102140134",
-    "@pie-element/shared-math-rendering-mathjax": "0.1.9-next.20261026200905",
+    "@pie-lib/config-ui": "14.0.8-next.20261102164954",
+    "@pie-element/shared-math-rendering-mathjax": "0.1.9-next.20261102164954",
     "@pie-element/shared-lodash": "0.1.4-next.20261026212738",
     "clsx": "^2.1.1",
     "d3-time": "^3.1.0",