@pie-lib/graphing 4.0.5-next.30 → 4.0.5-next.32

package/dist/tools/circle/component.js

@@ -1,7 +1,7 @@
 import { equalPoints as e, getMiddleOfTwoPoints as t, point as n, stripEmptyLabel as r } from "../../utils.js";
-import i from "../../node_modules/.bun/clsx@2.1.1/node_modules/clsx/dist/clsx.js";
+import { clsx as i } from "../../node_modules/.bun/clsx@2.1.1/node_modules/clsx/dist/clsx.js";
 import { BasePoint as a } from "../shared/point/index.js";
-import o from "../../mark-label.js";
+import { MarkLabel as o } from "../../mark-label.js";
 import s from "./bg-circle.js";
 import { rootEdgeComponent as c } from "../shared/line/with-root-edge.js";
 import l from "react";
@@ -38,6 +38,10 @@ var y = (e) => p({
 		limitLabeling: u.bool
 	};
 	static defaultProps = { onClick: () => ({}) };
+	state = { editingLabel: null };
+	componentDidUpdate(e) {
+		e.labelModeEnabled && !this.props.labelModeEnabled && this.state.editingLabel !== null && this.setState({ editingLabel: null });
+	}
 	onChangePoint = (n) => {
 		let { middle: r, onChange: i } = this.props, { from: a, to: o } = n;
 		e(a, o) || (r && (n.middle = {
@@ -79,6 +83,9 @@ var y = (e) => p({
 		let { changeMarkProps: n } = this.props, r = { ...e };
 		(!e.label || d(e.label)) && delete r.label, n({ [t]: r });
 	};
+	stopEditingLabel = () => {
+		this.state.editingLabel !== null && this.setState({ editingLabel: null });
+	};
 	clickPoint = (e, n, i) => {
 		let { changeMarkProps: a, disabled: o, from: s, to: c, middle: l, labelModeEnabled: u, limitLabeling: d, onClick: f } = this.props;
 		if (!u) {
@@ -96,41 +103,47 @@ var y = (e) => p({
 				label: "",
 				...e
 			}
-		}), this.input[n] && this.input[n].focus());
+		}), this.setState({ editingLabel: n }));
 	};
 	input = {};
 	render() {
-		let { from: e, to: t, middle: n, disabled: r, building: s, coordinatesOnHover: c, onDragStart: l, onDragStop: u, onClick: d, correctness: f, graphProps: p, labelNode: m, labelModeEnabled: _ } = this.props, y = {
+		let { from: e, to: t, middle: n, disabled: r, building: s, coordinatesOnHover: c, onDragStart: l, onDragStop: u, onClick: d, correctness: f, graphProps: p, labelNode: m, labelModeEnabled: _ } = this.props, { editingLabel: y } = this.state, x = {
 			onDragStart: l,
 			onDragStop: u,
 			graphProps: p,
 			onClick: d
 		};
 		t ||= e;
-		let x = b(e, t), C = null, w = null, T = null;
-		return m && (e?.label !== void 0 && (C = v.createPortal(/* @__PURE__ */ h(o, {
+		let C = b(e, t), w = null, T = null, E = null;
+		return m && (e?.label !== void 0 && (w = v.createPortal(/* @__PURE__ */ h(o, {
 			inputRef: (e) => this.input.from = e,
+			autoFocus: y === "from",
 			disabled: !_,
 			mark: e,
 			graphProps: p,
+			onBlur: this.stopEditingLabel,
 			onChange: (t) => this.labelChange({
 				...e,
 				label: t
 			}, "from")
-		}), m)), t?.label !== void 0 && (w = v.createPortal(/* @__PURE__ */ h(o, {
+		}), m)), t?.label !== void 0 && (T = v.createPortal(/* @__PURE__ */ h(o, {
 			inputRef: (e) => this.input.to = e,
+			autoFocus: y === "to",
 			disabled: !_,
 			mark: t,
 			graphProps: p,
+			onBlur: this.stopEditingLabel,
 			onChange: (e) => this.labelChange({
 				...t,
 				label: e
 			}, "to")
-		}), m)), n?.label !== void 0 && (T = v.createPortal(/* @__PURE__ */ h(o, {
+		}), m)), n?.label !== void 0 && (E = v.createPortal(/* @__PURE__ */ h(o, {
 			inputRef: (e) => this.input.middle = e,
+			autoFocus: y === "middle",
 			disabled: !_,
 			mark: n,
 			graphProps: p,
+			onBlur: this.stopEditingLabel,
 			onChange: (e) => this.labelChange({
 				...n,
 				label: e
@@ -142,12 +155,12 @@ var y = (e) => p({
 				className: i(s && "bgCircleBuilding"),
 				x: e.x,
 				y: e.y,
-				radius: x,
+				radius: C,
 				onDrag: this.dragCircle,
-				...y,
+				...x,
 				onClick: (e) => this.clickPoint(n, "middle", e)
 			}),
-			T,
+			E,
 			/* @__PURE__ */ h(a, {
 				disabled: s || r,
 				coordinatesOnHover: c,
@@ -156,10 +169,10 @@ var y = (e) => p({
 				x: t.x,
 				y: t.y,
 				onDrag: this.dragTo,
-				...y,
+				...x,
 				onClick: (e) => this.clickPoint(t, "to", e)
 			}),
-			w,
+			T,
 			/* @__PURE__ */ h(a, {
 				disabled: s || r,
 				coordinatesOnHover: c,
@@ -169,10 +182,10 @@ var y = (e) => p({
 				y: e.y,
 				className: "from",
 				onDrag: this.dragFrom,
-				...y,
+				...x,
 				onClick: (t) => this.clickPoint(e, "from", t)
 			}),
-			C
+			w
 		] });
 	}
 }, S = m(s)(() => ({
@@ -190,6 +203,6 @@ var y = (e) => p({
 		animation: `${y("0.3")} 2s ease-out infinite`,
 		opacity: 1
 	}
-})), C = c(x);
+})), C = x, w = c(C);
 //#endregion
-export { C as default };
+export { C as BaseCircle, x as RawBaseCircle, w as default };

package/dist/tools/index.js

@@ -52,4 +52,4 @@ var f = /* @__PURE__ */ e({
 	{ type: "label" }
 ];
 //#endregion
-export { p as allTools, m as toolsArr, f as tools_exports };
+export { u as absolute, p as allTools, n as circle, d as exponential, o as line, a as parabola, t as point, r as polygon, c as ray, i as sine, m as toolsArr, f as tools_exports, l as vector };

package/dist/tools/line/component.js

@@ -1,5 +1,5 @@
 import { getAdjustedGraphLimits as e, thinnerShapesNeeded as t } from "../../utils.js";
-import n from "../../node_modules/.bun/clsx@2.1.1/node_modules/clsx/dist/clsx.js";
+import { clsx as n } from "../../node_modules/.bun/clsx@2.1.1/node_modules/clsx/dist/clsx.js";
 import { ArrowMarker as r, genUid as i } from "../shared/arrow-head.js";
 import { lineBase as a, lineToolComponent as o, styles as s } from "../shared/line/index.js";
 import "react";
@@ -69,4 +69,4 @@ h.propTypes = {
 };
 var g = o(a(h));
 //#endregion
-export { g as default };
+export { h as ArrowedLine, g as default };

package/dist/tools/point/component.d.ts

@@ -40,10 +40,12 @@ export declare class Point extends React.Component {
     };
     static defaultProps: {};
     constructor(props: any);
+    componentDidUpdate(prevProps: any): void;
     move: any;
     startDrag: any;
     stopDrag: any;
     labelChange: any;
+    stopEditingLabel: any;
     clickPoint: any;
     render(): React.JSX.Element;
 }

package/dist/tools/point/component.js

@@ -1,6 +1,6 @@
 import { BasePoint as e } from "../shared/point/index.js";
 import { ToolPropTypeFields as t } from "../shared/types.js";
-import n from "../../mark-label.js";
+import { MarkLabel as n } from "../../mark-label.js";
 import r from "react";
 import { isEmpty as i, isEqual as a } from "@pie-element/shared-lodash";
 import { types as o } from "@pie-lib/plot";
@@ -14,7 +14,10 @@ var u = class extends r.Component {
 	};
 	static defaultProps = {};
 	constructor(e) {
-		super(e), this.state = {};
+		super(e), this.state = { editingLabel: null };
+	}
+	componentDidUpdate(e) {
+		e.labelModeEnabled && !this.props.labelModeEnabled && this.state.editingLabel !== null && this.setState({ editingLabel: null });
 	}
 	move = (e) => {
 		let t = {
@@ -42,6 +45,9 @@ var u = class extends r.Component {
 			t(this.props.mark, n);
 		});
 	};
+	stopEditingLabel = () => {
+		this.state.editingLabel !== null && this.setState({ editingLabel: null });
+	};
 	clickPoint = () => {
 		let { labelModeEnabled: e, onChange: t, onClick: n, mark: r } = this.props;
 		if (!e) {
@@ -51,14 +57,12 @@ var u = class extends r.Component {
 		r.disabled || (t(r, {
 			label: "",
 			...r
-		}), setTimeout(() => {
-			this.input && this.input.focus();
-		}, 0));
+		}), this.setState({ editingLabel: "label" }));
 	};
 	render() {
-		let { coordinatesOnHover: t, graphProps: i, labelNode: a, labelModeEnabled: o } = this.props, u = this.state.mark ? this.state.mark : this.props.mark;
+		let { coordinatesOnHover: t, graphProps: i, labelNode: a, labelModeEnabled: o } = this.props, { editingLabel: u } = this.state, d = this.state.mark ? this.state.mark : this.props.mark;
 		return /* @__PURE__ */ c(r.Fragment, { children: [/* @__PURE__ */ s(e, {
-			...u,
+			...d,
 			coordinatesOnHover: t,
 			graphProps: i,
 			labelNode: a,
@@ -72,14 +76,16 @@ var u = class extends r.Component {
 			onTouchEnd: (e) => {
 				e.stopPropagation(), this.clickPoint();
 			}
-		}), a && Object.prototype.hasOwnProperty.call(u, "label") && l.createPortal(/* @__PURE__ */ s(n, {
+		}), a && Object.prototype.hasOwnProperty.call(d, "label") && l.createPortal(/* @__PURE__ */ s(n, {
 			inputRef: (e) => this.input = e,
+			autoFocus: u === "label",
 			disabled: !o,
-			mark: u,
+			mark: d,
 			graphProps: i,
+			onBlur: this.stopEditingLabel,
 			onChange: this.labelChange
 		}), a)] });
 	}
 };
 //#endregion
-export { u as default };
+export { u as Point, u as default };

package/dist/tools/point/index.js

@@ -1,4 +1,4 @@
-import e from "./component.js";
+import { Point as e } from "./component.js";
 //#region src/tools/point/index.ts
 var t = () => ({
 	label: "Point",

package/dist/tools/polygon/component.d.ts

@@ -66,11 +66,16 @@ export declare class RawBaseComponent extends React.Component {
     static defaultProps: {
         points: never[];
     };
+    state: {
+        editingLabel: null;
+    };
+    componentDidUpdate(prevProps: any): void;
     dragPoint: any;
     dragLine: any;
     dragPoly: any;
     close: any;
     labelChange: any;
+    stopEditingLabel: any;
     clickPoint: any;
     input: {};
     render(): React.JSX.Element;

package/dist/tools/polygon/component.js

@@ -3,7 +3,7 @@ import { require_browser as t } from "../../node_modules/.bun/invariant@2.2.4/no
 import { equalPoints as n, getMiddleOfTwoPoints as r, getRightestPoints as i, stripEmptyLabel as a } from "../../utils.js";
 import { BasePoint as o } from "../shared/point/index.js";
 import { ToolPropTypeFields as s } from "../shared/types.js";
-import c from "../../mark-label.js";
+import { MarkLabel as c } from "../../mark-label.js";
 import l from "./line.js";
 import u, { Polygon as d } from "./polygon.js";
 import f from "react";
@@ -62,6 +62,10 @@ var S = /* @__PURE__ */ e(t(), 1), C = v("pie-lib:graphing:polygon"), w = (e, t)
 		onChangeProps: p.func
 	};
 	static defaultProps = { points: [] };
+	state = { editingLabel: null };
+	componentDidUpdate(e) {
+		e.labelModeEnabled && !this.props.labelModeEnabled && this.state.editingLabel !== null && this.setState({ editingLabel: null });
+	}
 	dragPoint = (e, t, r) => {
 		C("[dragPoint] from, to:", t, r);
 		let { onChange: i, points: a } = this.props, o = [...a], s = !!(a || []).find((e) => n(e, r));
@@ -89,6 +93,9 @@ var S = /* @__PURE__ */ e(t(), 1), C = v("pie-lib:graphing:polygon"), w = (e, t)
 		let a = [...n];
 		a.splice(t, 1, i), r(a);
 	};
+	stopEditingLabel = () => {
+		this.state.editingLabel !== null && this.setState({ editingLabel: null });
+	};
 	clickPoint = (e, t, n) => {
 		let { closed: o, disabled: s, middle: c, onClick: l, isToolActive: u, labelModeEnabled: d, limitLabeling: f, onSetMiddleLabel: p, points: m } = this.props;
 		if (d) {
@@ -107,9 +114,7 @@ var S = /* @__PURE__ */ e(t(), 1), C = v("pie-lib:graphing:polygon"), w = (e, t)
 					...e
 				}), p(c && a(c), n);
 			}
-			setTimeout(() => {
-				this.input[t] && this.input[t].focus();
-			}, 0);
+			this.setState({ editingLabel: t });
 			return;
 		}
 		if (u && !o && t === 0) {
@@ -120,18 +125,20 @@ var S = /* @__PURE__ */ e(t(), 1), C = v("pie-lib:graphing:polygon"), w = (e, t)
 	};
 	input = {};
 	render() {
-		let { closed: e, coordinatesOnHover: t, correctness: n, disabled: r, graphProps: i, onChangeLabelProps: a, onDragStart: s, onDragStop: p, points: m, middle: h, labelNode: g, labelModeEnabled: _ } = this.props, v = w(m, e), S = {
+		let { closed: e, coordinatesOnHover: t, correctness: n, disabled: r, graphProps: i, onChangeLabelProps: a, onDragStart: s, onDragStop: p, points: m, middle: h, labelNode: g, labelModeEnabled: _ } = this.props, { editingLabel: v } = this.state, S = w(m, e), C = {
 			onDragStart: s,
 			onDragStop: p,
 			graphProps: i,
 			disabled: r,
 			correctness: n
-		}, C = m && m.length || 0, T = null;
-		return g && h && Object.prototype.hasOwnProperty.call(h, "label") && (T = x.createPortal(/* @__PURE__ */ y(c, {
-			inputRef: (e) => this.input[C] = e,
+		}, T = m && m.length || 0, E = null;
+		return g && h && Object.prototype.hasOwnProperty.call(h, "label") && (E = x.createPortal(/* @__PURE__ */ y(c, {
+			inputRef: (e) => this.input[T] = e,
+			autoFocus: v === T,
 			disabled: r || !_,
 			mark: h,
 			graphProps: i,
+			onBlur: this.stopEditingLabel,
 			onChange: (e) => a({
 				...h,
 				label: e
@@ -141,19 +148,19 @@ var S = /* @__PURE__ */ e(t(), 1), C = v("pie-lib:graphing:polygon"), w = (e, t)
 				points: m,
 				onDrag: this.dragPoly.bind(this, m),
 				closed: e,
-				...S,
-				onClick: this.clickPoint.bind(this, h, C)
-			}), T] }) : /* @__PURE__ */ y(d, {
+				...C,
+				onClick: this.clickPoint.bind(this, h, T)
+			}), E] }) : /* @__PURE__ */ y(d, {
 				points: m,
 				graphProps: i,
 				closed: e
 			}),
-			(v || []).map((e, t) => /* @__PURE__ */ y(l, {
+			(S || []).map((e, t) => /* @__PURE__ */ y(l, {
 				from: e.from,
 				to: e.to,
 				onDrag: this.dragLine.bind(this, e),
-				...S,
-				onClick: this.clickPoint.bind(this, h, C)
+				...C,
+				onClick: this.clickPoint.bind(this, h, T)
 			}, `line-${t}`)),
 			(m || []).map((e, n) => [/* @__PURE__ */ y(o, {
 				coordinatesOnHover: t,
@@ -161,13 +168,15 @@ var S = /* @__PURE__ */ e(t(), 1), C = v("pie-lib:graphing:polygon"), w = (e, t)
 				x: e.x,
 				y: e.y,
 				onDrag: this.dragPoint.bind(this, n, e),
-				...S,
+				...C,
 				onClick: this.clickPoint.bind(this, e, n)
 			}, `point-${n}`), g && Object.prototype.hasOwnProperty.call(e, "label") ? x.createPortal(/* @__PURE__ */ y(c, {
 				inputRef: (e) => this.input[n] = e,
+				autoFocus: v === n,
 				disabled: r || !_,
 				mark: e,
 				graphProps: i,
+				onBlur: this.stopEditingLabel,
 				onChange: (t) => this.labelChange({
 					...e,
 					label: t
@@ -175,7 +184,7 @@ var S = /* @__PURE__ */ e(t(), 1), C = v("pie-lib:graphing:polygon"), w = (e, t)
 			}), g) : null])
 		] });
 	}
-}, D = class extends f.Component {
+}, D = E, O = class extends f.Component {
 	static propTypes = {
 		...s,
 		graphProps: _.GraphPropsType.isRequired
@@ -239,7 +248,7 @@ var S = /* @__PURE__ */ e(t(), 1), C = v("pie-lib:graphing:polygon"), w = (e, t)
 	};
 	render() {
 		let { coordinatesOnHover: e, mark: t, graphProps: n, onClick: r, isToolActive: i, labelNode: a, labelModeEnabled: o, limitLabeling: s } = this.props, { mark: c } = this.state;
-		return /* @__PURE__ */ y(E, {
+		return /* @__PURE__ */ y(D, {
 			...c || t,
 			coordinatesOnHover: e,
 			onChange: this.change,
@@ -259,4 +268,4 @@ var S = /* @__PURE__ */ e(t(), 1), C = v("pie-lib:graphing:polygon"), w = (e, t)
 	}
 };
 //#endregion
-export { D as default };
+export { D as BaseComponent, E as RawBaseComponent, w as buildLines, O as default, T as swap };

package/dist/tools/polygon/index.js

@@ -52,4 +52,4 @@ var n = (t, n) => {
 	}
 });
 //#endregion
-export { r as tool };
+export { n as addPointToArray, r as tool };

package/dist/tools/polygon/line.js

@@ -60,4 +60,4 @@ var u = s("line")(({ disabled: e, correctness: t }) => ({
 	}
 })(d);
 //#endregion
-export { f as default };
+export { d as Line, f as default };

package/dist/tools/polygon/polygon.js

@@ -56,7 +56,7 @@ var g = p("polygon")(({ disabled: e, correctness: t }) => ({
 			...o
 		});
 	}
-}, b = u({
+}, b = y, x = u({
 	bounds: (t, { domain: r, range: i }) => {
 		let { points: a } = t;
 		return e(n(a), r, i);
@@ -69,6 +69,6 @@ var g = p("polygon")(({ disabled: e, correctness: t }) => ({
 		let { points: r } = e;
 		return r.map((e) => t(e).add(t(n)));
 	}
-})(y);
+})(b);
 //#endregion
-export { y as Polygon, b as default };
+export { b as Polygon, y as RawPolygon, x as default, v as getPointString };

package/dist/tools/ray/component.js

@@ -1,5 +1,5 @@
 import { getAdjustedGraphLimits as e, thinnerShapesNeeded as t } from "../../utils.js";
-import n from "../../node_modules/.bun/clsx@2.1.1/node_modules/clsx/dist/clsx.js";
+import { clsx as n } from "../../node_modules/.bun/clsx@2.1.1/node_modules/clsx/dist/clsx.js";
 import { ArrowMarker as r, genUid as i } from "../shared/arrow-head.js";
 import { lineBase as a, lineToolComponent as o, styles as s } from "../shared/line/index.js";
 import "react";
@@ -68,4 +68,4 @@ h.propTypes = {
 };
 var g = o(a(h));
 //#endregion
-export { g as default };
+export { h as RayLine, g as default };

package/dist/tools/segment/component.js

@@ -49,4 +49,4 @@ l.propTypes = {
 };
 var u = t(e(l));
 //#endregion
-export { u as default };
+export { l as Line, u as default };

package/dist/tools/shared/line/index.d.ts

@@ -87,6 +87,10 @@ export declare const lineToolComponent: (Component: any) => {
 };
 export declare const lineBase: (Comp: any, opts: any) => {
     new (props: {}): {
+        state: {
+            editingLabel: null;
+        };
+        componentDidUpdate(prevProps: any): void;
         onChangePoint: any;
         dragComp: ({ from: draggedFrom, to: draggedTo }: {
             from: any;
@@ -95,6 +99,7 @@ export declare const lineBase: (Comp: any, opts: any) => {
         dragFrom: any;
         dragTo: any;
         labelChange: any;
+        stopEditingLabel: any;
         clickPoint: any;
         input: {};
         render(): React.JSX.Element;
@@ -102,7 +107,6 @@ export declare const lineBase: (Comp: any, opts: any) => {
         setState<K extends never>(state: {} | ((prevState: Readonly<{}>, props: Readonly<{}>) => {} | Pick<{}, K> | null) | Pick<{}, K> | null, callback?: (() => void) | undefined): void;
         forceUpdate(callback?: (() => void) | undefined): void;
         readonly props: Readonly<{}>;
-        state: Readonly<{}>;
         refs: {
             [key: string]: React.ReactInstance;
         };
@@ -111,7 +115,6 @@ export declare const lineBase: (Comp: any, opts: any) => {
         componentWillUnmount?(): void;
         componentDidCatch?(error: Error, errorInfo: React.ErrorInfo): void;
         getSnapshotBeforeUpdate?(prevProps: Readonly<{}>, prevState: Readonly<{}>): any;
-        componentDidUpdate?(prevProps: Readonly<{}>, prevState: Readonly<{}>, snapshot?: any): void;
         componentWillMount?(): void;
         UNSAFE_componentWillMount?(): void;
         componentWillReceiveProps?(nextProps: Readonly<{}>, nextContext: any): void;
@@ -120,6 +123,10 @@ export declare const lineBase: (Comp: any, opts: any) => {
         UNSAFE_componentWillUpdate?(nextProps: Readonly<{}>, nextState: Readonly<{}>, nextContext: any): void;
     };
     new (props: {}, context: any): {
+        state: {
+            editingLabel: null;
+        };
+        componentDidUpdate(prevProps: any): void;
         onChangePoint: any;
         dragComp: ({ from: draggedFrom, to: draggedTo }: {
             from: any;
@@ -128,6 +135,7 @@ export declare const lineBase: (Comp: any, opts: any) => {
         dragFrom: any;
         dragTo: any;
         labelChange: any;
+        stopEditingLabel: any;
         clickPoint: any;
         input: {};
         render(): React.JSX.Element;
@@ -135,7 +143,6 @@ export declare const lineBase: (Comp: any, opts: any) => {
         setState<K extends never>(state: {} | ((prevState: Readonly<{}>, props: Readonly<{}>) => {} | Pick<{}, K> | null) | Pick<{}, K> | null, callback?: (() => void) | undefined): void;
         forceUpdate(callback?: (() => void) | undefined): void;
         readonly props: Readonly<{}>;
-        state: Readonly<{}>;
         refs: {
             [key: string]: React.ReactInstance;
         };
@@ -144,7 +151,6 @@ export declare const lineBase: (Comp: any, opts: any) => {
         componentWillUnmount?(): void;
         componentDidCatch?(error: Error, errorInfo: React.ErrorInfo): void;
         getSnapshotBeforeUpdate?(prevProps: Readonly<{}>, prevState: Readonly<{}>): any;
-        componentDidUpdate?(prevProps: Readonly<{}>, prevState: Readonly<{}>, snapshot?: any): void;
         componentWillMount?(): void;
         UNSAFE_componentWillMount?(): void;
         componentWillReceiveProps?(nextProps: Readonly<{}>, nextContext: any): void;

package/dist/tools/shared/line/index.js

@@ -1,7 +1,7 @@
 import { equalPoints as e, getMiddleOfTwoPoints as t, sameAxes as n, stripEmptyLabel as r } from "../../../utils.js";
 import { correct as i, disabled as a, disabledSecondary as o, incorrect as s, missing as c } from "../styles.js";
 import { BasePoint as l } from "../point/index.js";
-import u from "../../../mark-label.js";
+import { MarkLabel as u } from "../../../mark-label.js";
 import d from "react";
 import f from "prop-types";
 import { cloneDeep as p, isEmpty as m, isEqual as h } from "@pie-element/shared-lodash";
@@ -154,6 +154,10 @@ var T = b("g")(({ disabled: e, correctness: t }) => ({
 			labelModeEnabled: f.bool,
 			labelNode: f.object
 		};
+		state = { editingLabel: null };
+		componentDidUpdate(e) {
+			e.labelModeEnabled && !this.props.labelModeEnabled && this.state.editingLabel !== null && this.setState({ editingLabel: null });
+		}
 		onChangePoint = (n) => {
 			let { middle: r, onChange: i } = this.props, { from: a, to: o } = n;
 			e(a, o) || (r && (n.middle = {
@@ -191,6 +195,9 @@ var T = b("g")(({ disabled: e, correctness: t }) => ({
 			let { changeMarkProps: n } = this.props, r = { ...e };
 			(!e.label || m(e.label)) && delete r.label, n({ [t]: r });
 		};
+		stopEditingLabel = () => {
+			this.state.editingLabel !== null && this.setState({ editingLabel: null });
+		};
 		clickPoint = (e, n, i) => {
 			let { changeMarkProps: a, disabled: o, from: s, to: c, middle: l, labelModeEnabled: u, limitLabeling: d, onClick: f } = this.props;
 			if (!u) {
@@ -208,41 +215,47 @@ var T = b("g")(({ disabled: e, correctness: t }) => ({
 					label: "",
 					...e
 				}
-			}), this.input[n] && this.input[n].focus());
+			}), this.setState({ editingLabel: n }));
 		};
 		input = {};
 		render() {
-			let { coordinatesOnHover: e, graphProps: t, onDragStart: n, onDragStop: r, from: i, to: c, middle: l, disabled: d, correctness: f, onClick: p, labelNode: m, labelModeEnabled: h } = this.props, g = {
+			let { coordinatesOnHover: e, graphProps: t, onDragStart: n, onDragStop: r, from: i, to: c, middle: l, disabled: d, correctness: f, onClick: p, labelNode: m, labelModeEnabled: h } = this.props, { editingLabel: g } = this.state, v = {
 				graphProps: t,
 				onDragStart: n,
 				onDragStop: r,
 				disabled: d,
 				correctness: f,
 				onClick: p
-			}, v = c ? _.toDegrees(_.angle(i, c)) : 0, y = null, b = null, C = null;
-			return m && (i && Object.prototype.hasOwnProperty.call(i, "label") && (y = w.createPortal(/* @__PURE__ */ x(u, {
+			}, y = c ? _.toDegrees(_.angle(i, c)) : 0, b = null, C = null, E = null;
+			return m && (i && Object.prototype.hasOwnProperty.call(i, "label") && (b = w.createPortal(/* @__PURE__ */ x(u, {
 				inputRef: (e) => this.input.from = e,
+				autoFocus: g === "from",
 				disabled: !h,
 				mark: i,
 				graphProps: t,
+				onBlur: this.stopEditingLabel,
 				onChange: (e) => this.labelChange({
 					...i,
 					label: e
 				}, "from")
-			}), m)), c && Object.prototype.hasOwnProperty.call(c, "label") && (b = w.createPortal(/* @__PURE__ */ x(u, {
+			}), m)), c && Object.prototype.hasOwnProperty.call(c, "label") && (C = w.createPortal(/* @__PURE__ */ x(u, {
 				inputRef: (e) => this.input.to = e,
+				autoFocus: g === "to",
 				disabled: !h,
 				mark: c,
 				graphProps: t,
+				onBlur: this.stopEditingLabel,
 				onChange: (e) => this.labelChange({
 					...c,
 					label: e
 				}, "to")
-			}), m)), l && Object.prototype.hasOwnProperty.call(l, "label") && (C = w.createPortal(/* @__PURE__ */ x(u, {
+			}), m)), l && Object.prototype.hasOwnProperty.call(l, "label") && (E = w.createPortal(/* @__PURE__ */ x(u, {
 				inputRef: (e) => this.input.middle = e,
+				autoFocus: g === "middle",
 				disabled: !h,
 				mark: l,
 				graphProps: t,
+				onBlur: this.stopEditingLabel,
 				onChange: (e) => this.labelChange({
 					...l,
 					label: e
@@ -256,31 +269,31 @@ var T = b("g")(({ disabled: e, correctness: t }) => ({
 						to: c,
 						middle: l,
 						onDrag: this.dragComp,
-						...g,
+						...v,
 						onClick: (e) => this.clickPoint(l, "middle", e)
 					}),
-					C,
+					E,
 					/* @__PURE__ */ x(o, {
 						x: i.x,
 						y: i.y,
 						labelNode: m,
 						coordinatesOnHover: e,
 						onDrag: this.dragFrom,
-						...g,
+						...v,
 						onClick: (e) => this.clickPoint(i, "from", e)
 					}),
-					y,
+					b,
 					c && /* @__PURE__ */ x(s, {
 						x: c.x,
 						y: c.y,
-						angle: v,
+						angle: y,
 						labelNode: m,
 						coordinatesOnHover: e,
 						onDrag: this.dragTo,
-						...g,
+						...v,
 						onClick: (e) => this.clickPoint(c, "to", e)
 					}),
-					b
+					C
 				]
 			});
 		}

package/dist/tools/shared/line/line-path.js

@@ -66,6 +66,6 @@ var f = () => ({
 			...d
 		})] });
 	}
-};
+}, g = h;
 //#endregion
-export { h as LinePath };
+export { g as LinePath, h as RawLinePath };