@363045841yyt/klinechart 0.5.0 → 0.5.2

package/dist/index.js

@@ -8891,6 +8891,14 @@ var Ls = class {
 	hoveredSeparatorUpperPaneId = null;
 	hoveredRightAxisPaneId = null;
 	isTouchSession = !1;
+	activePointers = /* @__PURE__ */ new Map();
+	lastPinchDistance = 0;
+	pinchCenter = {
+		x: 0,
+		y: 0
+	};
+	isPinching = !1;
+	onPinchZoomCallback;
 	crosshairPos = null;
 	crosshairIndex = null;
 	crosshairPrice = null;
@@ -8922,6 +8930,9 @@ var Ls = class {
 	constructor(e) {
 		this.chart = e;
 	}
+	setOnPinchZoom(e) {
+		this.onPinchZoomCallback = e;
+	}
 	getInteractionSnapshot() {
 		return {
 			crosshairPos: this.crosshairPos ? { ...this.crosshairPos } : null,
@@ -8947,8 +8958,19 @@ var Ls = class {
 		this.onInteractionChangeCallback?.(this.getInteractionSnapshot());
 	}
 	onPointerDown(e) {
-		if (e.isPrimary === !1) return;
-		this.isTouchSession = e.pointerType === "touch";
+		if (this.isTouchSession = e.pointerType === "touch", this.activePointers.set(e.pointerId, {
+			x: e.clientX,
+			y: e.clientY
+		}), this.activePointers.size === 2 && this.isTouchSession) {
+			this.isPinching = !0, this.isDragging = !1, this.dragMode = "none";
+			let e = Array.from(this.activePointers.values()), t = e[0], n = e[1];
+			this.lastPinchDistance = Math.hypot(n.x - t.x, n.y - t.y), this.pinchCenter = {
+				x: (t.x + n.x) / 2,
+				y: (t.y + n.y) / 2
+			};
+			return;
+		}
+		if (e.isPrimary === !1 || this.isPinching || this.activePointers.size > 1) return;
 		let t = this.getPlotPointerLocation(e.clientX, e.clientY);
 		if (!t) return;
 		let n = this.chart.getDom().container, { mouseX: r, mouseY: i } = t, a = n.scrollLeft, o = this.chart.getMarkerManager(), s = a + r, c = o.hitTest(s, i, 3);
@@ -8971,15 +8993,26 @@ var Ls = class {
 		this.useTooltipAnchorPositioning = e;
 	}
 	onPointerUp(e) {
-		e.isPrimary !== !1 && (this.isDragging = !1, this.dragMode = "none", this.activePaneIdOnDrag = null, this.activeSeparatorUpperPaneId = null, this.notifyInteractionChange());
+		this.activePointers.delete(e.pointerId), this.isPinching && this.activePointers.size < 2 && (this.isPinching = !1, this.lastPinchDistance = 0), e.isPrimary !== !1 && (this.isDragging = !1, this.dragMode = "none", this.activePaneIdOnDrag = null, this.activeSeparatorUpperPaneId = null, this.notifyInteractionChange());
 	}
 	onPointerLeave(e) {
-		e.isPrimary !== !1 && (this.isDragging = !1, this.dragMode = "none", this.activePaneIdOnDrag = null, this.clearSeparatorState(), this.isTouchSession = !1, this.clearHover(), this.chart.scheduleDraw(), this.notifyInteractionChange());
+		this.activePointers.delete(e.pointerId), this.activePointers.size < 2 && (this.isPinching = !1, this.lastPinchDistance = 0), e.isPrimary !== !1 && (this.isDragging = !1, this.dragMode = "none", this.activePaneIdOnDrag = null, this.clearSeparatorState(), this.isTouchSession = !1, this.clearHover(), this.chart.scheduleDraw(), this.notifyInteractionChange());
 	}
 	onScroll() {
 		this.kLinePositions = null, this.visibleRange = null, this.clearHover(), this.chart.scheduleDraw(), this.notifyInteractionChange();
 	}
 	onPointerMove(e) {
+		if (this.activePointers.has(e.pointerId) && this.activePointers.set(e.pointerId, {
+			x: e.clientX,
+			y: e.clientY
+		}), this.isPinching && this.activePointers.size === 2) {
+			let e = Array.from(this.activePointers.values()), t = e[0], n = e[1], r = Math.hypot(n.x - t.x, n.y - t.y), i = r - this.lastPinchDistance;
+			if (Math.abs(i) > 10) {
+				let e = i > 0 ? 1 : -1, a = (t.x + n.x) / 2;
+				this.onPinchZoomCallback?.(e, a), this.lastPinchDistance = r;
+			}
+			return;
+		}
 		if (!e.isPrimary) return;
 		e.pointerType === "touch" && (this.isTouchSession = !0);
 		let t = this.chart.getDom().container;
@@ -9172,7 +9205,7 @@ var Ls = class {
 		};
 	}
 	reset() {
-		this.isDragging = !1, this.dragMode = "none", this.dragStartX = 0, this.dragStartY = 0, this.scrollStartX = 0, this.activePaneIdOnDrag = null, this.clearSeparatorState(), this.isTouchSession = !1, this.crosshairPos = null, this.crosshairIndex = null, this.crosshairPrice = null, this.hoveredIndex = null, this.activePaneId = null, this.hoveredMarkerId = null, this.clickedMarkerId = null, this.hoveredMarkerData = null, this.clickedMarkerData = null, this.hoveredCustomMarker = null, this.kLinePositions = null, this.visibleRange = null, this.kWidthPx = null;
+		this.isDragging = !1, this.dragMode = "none", this.dragStartX = 0, this.dragStartY = 0, this.scrollStartX = 0, this.activePaneIdOnDrag = null, this.clearSeparatorState(), this.isTouchSession = !1, this.activePointers.clear(), this.isPinching = !1, this.lastPinchDistance = 0, this.crosshairPos = null, this.crosshairIndex = null, this.crosshairPrice = null, this.hoveredIndex = null, this.activePaneId = null, this.hoveredMarkerId = null, this.clickedMarkerId = null, this.hoveredMarkerData = null, this.clickedMarkerData = null, this.hoveredCustomMarker = null, this.kLinePositions = null, this.visibleRange = null, this.kWidthPx = null;
 	}
 	getCrosshairIndex() {
 		return this.crosshairIndex;
@@ -10907,7 +10940,7 @@ function Uc(e) {
 var Wc = 8, Gc = 6, Kc = class e {
 	chart;
 	activeTool = "cursor";
-	pendingAnchor = null;
+	pendingAnchors = [];
 	drawings = [];
 	callbacks = {};
 	previewDrawingId = "__preview__";
@@ -10922,7 +10955,13 @@ var Wc = 8, Gc = 6, Kc = class e {
 	static DOUBLE_ANCHOR_TOOLS = [
 		"trend-line",
 		"ray",
-		"info-line"
+		"info-line",
+		"regression-channel"
+	];
+	static TRIPLE_ANCHOR_TOOLS = [
+		"parallel-channel",
+		"flat-line",
+		"disjoint-channel"
 	];
 	constructor(e) {
 		this.chart = e;
@@ -10934,7 +10973,7 @@ var Wc = 8, Gc = 6, Kc = class e {
 		return this.activeTool;
 	}
 	setTool(e) {
-		this.activeTool = e, this.pendingAnchor = null, this.removePreview(), this.dragState = null, this.setSelected(null), this.callbacks.onToolChange?.(e);
+		this.activeTool = e, this.pendingAnchors = [], this.removePreview(), this.dragState = null, this.setSelected(null), this.callbacks.onToolChange?.(e);
 	}
 	getDrawings() {
 		return this.drawings;
@@ -10943,7 +10982,7 @@ var Wc = 8, Gc = 6, Kc = class e {
 		this.drawings = e, this.chart.setDrawings(e);
 	}
 	clear() {
-		this.pendingAnchor = null, this.removePreview(), this.dragState = null, this.setSelected(null);
+		this.pendingAnchors = [], this.removePreview(), this.dragState = null, this.setSelected(null);
 	}
 	getSelectedDrawing() {
 		return this.selectedDrawingId ? this.drawings.find((e) => e.id === this.selectedDrawingId) ?? null : null;
@@ -10966,7 +11005,13 @@ var Wc = 8, Gc = 6, Kc = class e {
 	onPointerDown(t, n) {
 		if (this.activeTool === "cursor") return this.handleCursorDown(t, n);
 		let r = this.resolveAnchorFromPointer(t, n);
-		return r ? e.SINGLE_ANCHOR_TOOLS.includes(this.activeTool) ? (this.createSingleAnchorDrawing(r), !0) : e.DOUBLE_ANCHOR_TOOLS.includes(this.activeTool) ? this.pendingAnchor ? (this.createDoubleAnchorDrawing(this.pendingAnchor, r), this.pendingAnchor = null, !0) : (this.pendingAnchor = r, !0) : !1 : !1;
+		if (!r) return !1;
+		if (e.SINGLE_ANCHOR_TOOLS.includes(this.activeTool)) return this.createSingleAnchorDrawing(r), !0;
+		let i = e.DOUBLE_ANCHOR_TOOLS.includes(this.activeTool), a = e.TRIPLE_ANCHOR_TOOLS.includes(this.activeTool);
+		if (!i && !a) return !1;
+		this.pendingAnchors.push(r);
+		let o = i ? 2 : 3;
+		return this.pendingAnchors.length >= o && (this.createMultiAnchorDrawing(this.pendingAnchors), this.pendingAnchors = []), !0;
 	}
 	onPointerUp(e, t) {
 		return this.dragState ? (this.dragState = null, !0) : !1;
@@ -10996,19 +11041,23 @@ var Wc = 8, Gc = 6, Kc = class e {
 					index: r.index,
 					time: r.time,
 					price: r.price
-				};
+				}, n.kind === "flat-line" && e === 1 && n.anchors.length >= 3 && (n.anchors[2] = {
+					...n.anchors[2],
+					index: r.index,
+					time: r.time
+				});
 			}
 		} else {
 			let r = t.getBoundingClientRect(), i = e.clientX - r.left, a = e.clientY - r.top, o = i - this.dragState.startMouse.x, s = a - this.dragState.startMouse.y;
 			for (let e = 0; e < n.anchors.length; e++) {
-				let r = this.dragState.snapshot[e], i = this.anchorToScreen(r);
-				if (!i) continue;
-				let a = i.x + o, c = i.y + s, l = this.screenToAnchor(a, c, t);
-				l && (n.anchors[e] = {
+				let t = this.dragState.snapshot[e], r = this.anchorToScreen(t);
+				if (!r) continue;
+				let i = r.x + o, a = r.y + s, c = this.screenToAnchor(i, a);
+				c && (n.anchors[e] = {
 					...n.anchors[e],
-					index: l.index,
-					time: l.time,
-					price: l.price
+					index: c.index,
+					time: c.time,
+					price: c.price
 				});
 			}
 		}
@@ -11017,10 +11066,10 @@ var Wc = 8, Gc = 6, Kc = class e {
 	handlePreviewMove(t, n) {
 		let r = this.resolveAnchorFromPointer(t, n);
 		if (!r) return this.removePreview(), !1;
-		let i = e.SINGLE_ANCHOR_TOOLS.includes(this.activeTool), a = e.DOUBLE_ANCHOR_TOOLS.includes(this.activeTool);
-		if (!i && !a) return !1;
-		let o;
-		if (i) o = {
+		let i = e.SINGLE_ANCHOR_TOOLS.includes(this.activeTool), a = e.DOUBLE_ANCHOR_TOOLS.includes(this.activeTool), o = e.TRIPLE_ANCHOR_TOOLS.includes(this.activeTool);
+		if (!i && !a && !o) return !1;
+		let s;
+		if (i) s = {
 			id: this.previewDrawingId,
 			kind: this.getDrawingKind(this.activeTool),
 			paneId: "main",
@@ -11038,40 +11087,113 @@ var Wc = 8, Gc = 6, Kc = class e {
 				strokeStyle: "dashed"
 			}
 		};
-		else if (this.pendingAnchor) o = {
+		else if (a && this.pendingAnchors.length >= 1) s = {
 			id: this.previewDrawingId,
-			kind: this.activeTool,
+			kind: this.getDrawingKind(this.activeTool),
 			paneId: "main",
 			visible: !0,
 			anchors: [{
 				id: `${this.previewDrawingId}-a`,
-				index: this.pendingAnchor.index,
-				time: this.pendingAnchor.time,
-				price: this.pendingAnchor.price
+				index: this.pendingAnchors[0].index,
+				time: this.pendingAnchors[0].time,
+				price: this.pendingAnchors[0].price
 			}, {
 				id: `${this.previewDrawingId}-b`,
 				index: r.index,
 				time: r.time,
 				price: r.price
 			}],
-			params: {},
+			params: this.activeTool === "regression-channel" ? { sigma: 2 } : {},
 			style: {
 				stroke: "#2962ff",
 				strokeWidth: 1,
-				strokeStyle: "dashed"
+				strokeStyle: "dashed",
+				...this.activeTool === "regression-channel" ? { fillOpacity: .1 } : {}
 			}
 		};
-		else return !1;
-		return this.drawings = this.drawings.filter((e) => e.id !== this.previewDrawingId), this.drawings = [...this.drawings, o], this.chart.setDrawings(this.drawings), !0;
+		else if (o) {
+			if (this.pendingAnchors.length === 0) return !1;
+			if (this.pendingAnchors.length === 1) s = {
+				id: this.previewDrawingId,
+				kind: "trend-line",
+				paneId: "main",
+				visible: !0,
+				anchors: [{
+					id: `${this.previewDrawingId}-a`,
+					index: this.pendingAnchors[0].index,
+					time: this.pendingAnchors[0].time,
+					price: this.pendingAnchors[0].price
+				}, {
+					id: `${this.previewDrawingId}-b`,
+					index: r.index,
+					time: r.time,
+					price: r.price
+				}],
+				params: {},
+				style: {
+					stroke: "#2962ff",
+					strokeWidth: 1,
+					strokeStyle: "dashed"
+				}
+			};
+			else {
+				let e = this.activeTool === "flat-line" ? {
+					id: `${this.previewDrawingId}-c`,
+					index: this.pendingAnchors[1].index,
+					time: this.pendingAnchors[1].time,
+					price: r.price
+				} : {
+					id: `${this.previewDrawingId}-c`,
+					index: r.index,
+					time: r.time,
+					price: r.price
+				};
+				s = {
+					id: this.previewDrawingId,
+					kind: this.getDrawingKind(this.activeTool),
+					paneId: "main",
+					visible: !0,
+					anchors: [
+						{
+							id: `${this.previewDrawingId}-a`,
+							index: this.pendingAnchors[0].index,
+							time: this.pendingAnchors[0].time,
+							price: this.pendingAnchors[0].price
+						},
+						{
+							id: `${this.previewDrawingId}-b`,
+							index: this.pendingAnchors[1].index,
+							time: this.pendingAnchors[1].time,
+							price: this.pendingAnchors[1].price
+						},
+						e
+					],
+					params: {},
+					style: {
+						stroke: "#2962ff",
+						strokeWidth: 1,
+						strokeStyle: "dashed",
+						fillOpacity: .1
+					}
+				};
+			}
+		} else return !1;
+		return this.drawings = this.drawings.filter((e) => e.id !== this.previewDrawingId), this.drawings = [...this.drawings, s], this.chart.setDrawings(this.drawings), !0;
 	}
 	hitTest(e, t) {
 		let n = this.drawings.filter((e) => e.id !== this.previewDrawingId && e.visible);
-		for (let r of n) for (let n = 0; n < r.anchors.length; n++) {
-			let i = this.anchorToScreen(r.anchors[n]);
-			if (i && Math.hypot(e - i.x, t - i.y) <= Wc) return {
-				drawing: r,
-				anchorIndex: n
-			};
+		for (let r of n) {
+			if (r.kind === "regression-channel" && r.anchors.length >= 2) {
+				let n = this.hitTestRegressionEndpoints(r, e, t);
+				if (n) return n;
+			}
+			for (let n = 0; n < r.anchors.length; n++) {
+				let i = this.anchorToScreen(r.anchors[n]);
+				if (i && Math.hypot(e - i.x, t - i.y) <= Wc) return {
+					drawing: r,
+					anchorIndex: n
+				};
+			}
 		}
 		for (let r of n) {
 			let n = this.getDrawingLineSegments(r);
@@ -11142,7 +11264,48 @@ var Wc = 8, Gc = 6, Kc = class e {
 		if (n.length < 2) return [];
 		let r = [];
 		if (n.length === 2) {
-			let i = n[0], a = n[1], o = a.x - i.x, s = a.y - i.y, c = i, l = a, u = this.getExtendMode(e), d = Math.max(t.plotWidth, t.plotHeight) * 4;
+			let i = n[0], a = n[1];
+			if (e.kind === "regression-channel") {
+				let t = this.chart.getData(), n = Math.round(e.anchors[0].index), i = Math.round(e.anchors[1].index), a = Math.min(Math.max(n, 0), Math.max(i, 0)), o = Math.max(Math.max(n, 0), Math.max(i, 0)), s = Math.min(Math.max(a, 0), t.length - 1), c = Math.min(Math.max(o, 0), t.length - 1), l = t.slice(s, c + 1), u = nl(l.map((e) => e.close));
+				if (u) {
+					let t = e.params?.sigma ?? 2, a = u.stdDev * t, o = u.intercept, s = u.intercept + u.slope * (l.length - 1), c = this.anchorToScreen({
+						id: "",
+						index: n,
+						price: o
+					}), d = this.anchorToScreen({
+						id: "",
+						index: i,
+						price: s
+					}), f = this.anchorToScreen({
+						id: "",
+						index: n,
+						price: o + a
+					}), p = this.anchorToScreen({
+						id: "",
+						index: i,
+						price: s + a
+					}), m = this.anchorToScreen({
+						id: "",
+						index: n,
+						price: o - a
+					}), h = this.anchorToScreen({
+						id: "",
+						index: i,
+						price: s - a
+					});
+					return c && d && r.push({
+						a: c,
+						b: d
+					}), f && p && r.push({
+						a: f,
+						b: p
+					}), m && h && r.push({
+						a: m,
+						b: h
+					}), r;
+				}
+			}
+			let o = a.x - i.x, s = a.y - i.y, c = i, l = a, u = this.getExtendMode(e), d = Math.max(t.plotWidth, t.plotHeight) * 4;
 			(u === "right" || u === "both") && (l = {
 				x: a.x + o * d,
 				y: a.y + s * d
@@ -11153,12 +11316,103 @@ var Wc = 8, Gc = 6, Kc = class e {
 				a: c,
 				b: l
 			});
-		} else for (let e = 0; e < n.length - 1; e++) r.push({
-			a: n[e],
-			b: n[e + 1]
-		});
+		} else if (n.length >= 3) switch (e.kind) {
+			case "parallel-channel": {
+				let [e, t, i] = n, a = t.x - e.x, o = t.y - e.y, s = {
+					x: i.x + a,
+					y: i.y + o
+				};
+				r.push({
+					a: e,
+					b: t
+				}, {
+					a: i,
+					b: s
+				});
+				break;
+			}
+			case "flat-line": {
+				let [e, t, i] = n, a = {
+					x: e.x,
+					y: i.y
+				}, o = {
+					x: t.x,
+					y: i.y
+				};
+				r.push({
+					a: e,
+					b: t
+				}), r.push({
+					a,
+					b: o
+				});
+				break;
+			}
+			case "disjoint-channel": {
+				let [e, t, i] = n, a = t.x - e.x, o = t.y - e.y, s = {
+					x: i.x + a,
+					y: i.y - o
+				};
+				r.push({
+					a: e,
+					b: t
+				}), r.push({
+					a: i,
+					b: s
+				});
+				break;
+			}
+			default: for (let e = 0; e < n.length - 1; e++) r.push({
+				a: n[e],
+				b: n[e + 1]
+			});
+		}
 		return r;
 	}
+	hitTestRegressionEndpoints(e, t, n) {
+		let r = this.chart.getData();
+		if (r.length === 0) return null;
+		let i = Math.round(e.anchors[0].index), a = Math.round(e.anchors[1].index), o = Math.min(Math.max(i, 0), r.length - 1), s = Math.min(Math.max(a, 0), r.length - 1), c = Math.min(o, s), l = Math.max(o, s), u = r.slice(c, l + 1), d = nl(u.map((e) => e.close));
+		if (!d) return null;
+		let f = e.params?.sigma ?? 2, p = d.stdDev * f, m = d.intercept, h = d.intercept + d.slope * (u.length - 1), g = [
+			{
+				index: i,
+				price: m
+			},
+			{
+				index: a,
+				price: h
+			},
+			{
+				index: i,
+				price: m + p
+			},
+			{
+				index: a,
+				price: h + p
+			},
+			{
+				index: i,
+				price: m - p
+			},
+			{
+				index: a,
+				price: h - p
+			}
+		];
+		for (let r of g) {
+			let o = this.anchorToScreen({
+				id: "",
+				index: r.index,
+				price: r.price
+			});
+			if (o && Math.hypot(t - o.x, n - o.y) <= Wc) return {
+				drawing: e,
+				anchorIndex: r.index <= Math.min(i, a) ? 0 : 1
+			};
+		}
+		return null;
+	}
 	getExtendMode(e) {
 		switch (e.kind) {
 			case "ray": return "right";
@@ -11170,7 +11424,7 @@ var Wc = 8, Gc = 6, Kc = class e {
 		let t = this.chart.getViewport();
 		if (!t) return null;
 		let n = this.chart.getOption(), r = this.chart.getCurrentDpr(), { startXPx: i, unitPx: a } = Ms(n.kWidth, n.kGap, r);
-		if (!Number.isFinite(e.index) || e.index < 0) return null;
+		if (!Number.isFinite(e.index)) return null;
 		let o = (i + e.index * a + (a - 1) / 2) / r - t.scrollLeft, s = this.chart.getPaneRenderers().find((e) => e.getPane().id === "main")?.getPane();
 		return s ? {
 			x: o,
@@ -11235,32 +11489,41 @@ var Wc = 8, Gc = 6, Kc = class e {
 		};
 		this.drawings = [...this.drawings, t], this.chart.setDrawings(this.drawings), this.callbacks.onDrawingCreated?.(t), this.activeTool = "cursor", this.callbacks.onToolChange?.("cursor");
 	}
-	createDoubleAnchorDrawing(e, t) {
+	createMultiAnchorDrawing(e) {
 		this.drawings = this.drawings.filter((e) => e.id !== this.previewDrawingId);
-		let n = {
+		let t = this.getDrawingKind(this.activeTool), n = t === "regression-channel" ? { sigma: 2 } : {}, r = t === "flat-line" && e.length >= 3 ? [
+			e[0],
+			e[1],
+			{
+				index: e[1].index,
+				time: e[1].time,
+				price: e[2].price
+			}
+		] : e, i = [
+			"parallel-channel",
+			"regression-channel",
+			"flat-line",
+			"disjoint-channel"
+		].includes(t), a = {
 			id: `drawing-${Date.now()}`,
-			kind: this.activeTool,
+			kind: t,
 			paneId: "main",
 			visible: !0,
-			anchors: [{
-				id: `${Date.now()}-a`,
+			anchors: r.map((e, t) => ({
+				id: `${Date.now()}-${String.fromCharCode(97 + t)}`,
 				index: e.index,
 				time: e.time,
 				price: e.price
-			}, {
-				id: `${Date.now()}-b`,
-				index: t.index,
-				time: t.time,
-				price: t.price
-			}],
-			params: {},
+			})),
+			params: n,
 			style: {
 				stroke: "#2962ff",
 				strokeWidth: 1,
-				strokeStyle: "solid"
+				strokeStyle: "solid",
+				...i ? { fillOpacity: .1 } : {}
 			}
 		};
-		this.drawings = [...this.drawings, n], this.chart.setDrawings(this.drawings), this.callbacks.onDrawingCreated?.(n), this.activeTool = "cursor", this.callbacks.onToolChange?.("cursor");
+		this.drawings = [...this.drawings, a], this.chart.setDrawings(this.drawings), this.callbacks.onDrawingCreated?.(a), this.activeTool = "cursor", this.callbacks.onToolChange?.("cursor");
 	}
 	getDrawingKind(e) {
 		switch (e) {
@@ -11619,16 +11882,97 @@ function sl() {
 					b: u,
 					extend: d,
 					style: e.style
+				}
+			] };
+		}
+	};
+}
+function cl() {
+	return {
+		kind: "flat-line",
+		minAnchors: 3,
+		maxAnchors: 3,
+		compute(e, t) {
+			let [n, r, i] = e.anchors;
+			if (!n || !r || !i) return { primitives: [] };
+			let a = t.toScreen(n), o = t.toScreen(r), s = t.toScreen(i), c = {
+				x: a.x,
+				y: s.y
+			}, l = {
+				x: o.x,
+				y: s.y
+			};
+			return { primitives: [
+				{
+					kind: "area",
+					points: [
+						a,
+						o,
+						l,
+						c
+					],
+					closed: !0,
+					style: e.style
+				},
+				{
+					kind: "line",
+					a,
+					b: o,
+					style: e.style
+				},
+				{
+					kind: "line",
+					a: c,
+					b: l,
+					style: e.style
+				},
+				{
+					kind: "point",
+					point: c,
+					style: e.style
+				},
+				{
+					kind: "point",
+					point: l,
+					style: e.style
+				}
+			] };
+		}
+	};
+}
+function ll() {
+	return {
+		kind: "disjoint-channel",
+		minAnchors: 3,
+		maxAnchors: 3,
+		compute(e, t) {
+			let [n, r, i] = e.anchors;
+			if (!n || !r || !i) return { primitives: [] };
+			let a = t.toScreen(n), o = t.toScreen(r), s = t.toScreen(i), c = o.x - a.x, l = o.y - a.y, u = {
+				x: s.x + c,
+				y: s.y - l
+			};
+			return { primitives: [
+				{
+					kind: "area",
+					points: [
+						a,
+						o,
+						u,
+						s
+					],
+					closed: !0,
+					style: e.style
 				},
 				{
 					kind: "line",
 					a,
-					b: s,
+					b: o,
 					style: e.style
 				},
 				{
 					kind: "line",
-					a: o,
+					a: s,
 					b: u,
 					style: e.style
 				}
@@ -11636,7 +11980,7 @@ function sl() {
 		}
 	};
 }
-function cl() {
+function ul() {
 	return {
 		kind: "regression-channel",
 		minAnchors: 2,
@@ -11716,14 +12060,14 @@ function cl() {
 		}
 	};
 }
-function ll(e) {
-	e.register(il("trend-line", "none")), e.register(il("ray", "right")), e.register(il("extended-line", "both")), e.register(al("horizontal-line")), e.register(al("horizontal-ray")), e.register(al("vertical-line")), e.register(al("cross-line")), e.register(ol()), e.register(sl()), e.register(cl());
+function dl(e) {
+	e.register(il("trend-line", "none")), e.register(il("ray", "right")), e.register(il("extended-line", "both")), e.register(al("horizontal-line")), e.register(al("horizontal-ray")), e.register(al("vertical-line")), e.register(al("cross-line")), e.register(ol()), e.register(sl()), e.register(ul()), e.register(cl()), e.register(ll());
 }
 //#endregion
 //#region src/core/drawing/plugin.ts
-function ul(e) {
+function fl(e) {
 	let t = e.store, n = e.definitions ?? new Yc(), r = e.renderers ?? rl();
-	return ll(n), {
+	return dl(n), {
 		name: "drawingRenderer",
 		version: "0.1.0",
 		description: "绘图渲染器",
@@ -11767,7 +12111,7 @@ function ul(e) {
 					}
 				});
 				if (!o) continue;
-				let v = t.getSelectedId() === e.id ? o.primitives.map((t) => dl(t, e.style)) : o.primitives;
+				let v = t.getSelectedId() === e.id ? o.primitives.map((t) => pl(t, e.style)) : o.primitives;
 				for (let e of v) {
 					if (e.kind === "point") {
 						r.point(i, e, c);
@@ -11788,7 +12132,7 @@ function ul(e) {
 		}
 	};
 }
-function dl(e, t) {
+function pl(e, t) {
 	let n = t.stroke ?? "#2962ff", r = (t.strokeWidth ?? 1) + 1, i = (t.pointRadius ?? 4) + 2;
 	return e.kind === "point" ? {
 		...e,
@@ -11821,7 +12165,7 @@ function dl(e, t) {
 }
 //#endregion
 //#region src/core/chart.ts
-var fl = class e {
+var ml = class e {
 	dom;
 	opt;
 	data = [];
@@ -11852,7 +12196,7 @@ var fl = class e {
 			...i,
 			kWidth: n ?? 0,
 			kGap: r ?? 0
-		}, this.interaction = new Rs(this), this.markerManager = new jo(), this.pluginHost = Sa(), this.rendererPluginManager = new wa(), this.rendererPluginManager.setPluginHost(this.pluginHost), this.rendererPluginManager.setInvalidateCallback(() => this.scheduleDraw()), this.syncPaneRatiosFromSpecs(this.opt.panes), this.zoomLevelCount = Math.max(2, Math.round(this.opt.zoomLevels ?? 20)), this.currentZoomLevel = this.opt.initialZoomLevel ?? 1, this.currentZoomLevel = Math.max(1, Math.min(this.zoomLevelCount, this.currentZoomLevel)), this.initPanes(), this.useRenderer(ul({ store: this.drawingStore })), this.initResizeObserver();
+		}, this.interaction = new Rs(this), this.markerManager = new jo(), this.pluginHost = Sa(), this.rendererPluginManager = new wa(), this.rendererPluginManager.setPluginHost(this.pluginHost), this.rendererPluginManager.setInvalidateCallback(() => this.scheduleDraw()), this.syncPaneRatiosFromSpecs(this.opt.panes), this.zoomLevelCount = Math.max(2, Math.round(this.opt.zoomLevels ?? 20)), this.currentZoomLevel = this.opt.initialZoomLevel ?? 1, this.currentZoomLevel = Math.max(1, Math.min(this.zoomLevelCount, this.currentZoomLevel)), this.initPanes(), this.useRenderer(fl({ store: this.drawingStore })), this.initResizeObserver();
 	}
 	initResizeObserver() {
 		if (typeof ResizeObserver > "u") return;
@@ -12427,18 +12771,18 @@ var fl = class e {
 		};
 		return this.viewport = u, this.onViewportChange?.(u), u;
 	}
-}, pl = 3;
-function ml(e, t) {
+}, hl = 3;
+function gl(e, t) {
 	let n = (e - 1) / (t.zoomLevelCount - 1);
 	return t.minKWidth + n * (t.maxKWidth - t.minKWidth);
 }
-function hl(e) {
-	return pl / e;
+function _l(e) {
+	return hl / e;
 }
-function gl(e, t, n, r, i, a, o) {
+function vl(e, t, n, r, i, a, o) {
 	let s = Math.max(1, Math.min(o.zoomLevelCount, r + e));
 	if (s === r) return null;
-	let c = ml(s, o), l = hl(o.dpr), u = Ms(i, a, o.dpr), d = Ms(c, l, o.dpr), f = (Math.round((n + t) * o.dpr) - u.startXPx) / u.unitPx;
+	let c = gl(s, o), l = _l(o.dpr), u = Ms(i, a, o.dpr), d = Ms(c, l, o.dpr), f = (Math.round((n + t) * o.dpr) - u.startXPx) / u.unitPx;
 	return {
 		targetLevel: s,
 		newKWidth: c,
@@ -12446,24 +12790,24 @@ function gl(e, t, n, r, i, a, o) {
 		newScrollLeft: (d.startXPx + f * d.unitPx) / o.dpr - t
 	};
 }
-function _l(e, t, n, r, i, a, o) {
+function yl(e, t, n, r, i, a, o) {
 	let s = Math.max(1, Math.min(o.zoomLevelCount, Math.round(e))) - r;
-	return s === 0 ? null : gl(s, t, n, r, i, a, o);
+	return s === 0 ? null : vl(s, t, n, r, i, a, o);
 }
 //#endregion
 //#region src/types/kLine.ts
-function vl(e) {
+function bl(e) {
 	return e.open > e.close ? "down" : e.open < e.close ? "up" : "flat";
 }
 //#endregion
 //#region src/types/volumePrice.ts
 var $ = /* @__PURE__ */ function(e) {
 	return e.RISE_WITH_VOLUME = "rise_with_volume", e.RISE_WITHOUT_VOLUME = "rise_without_volume", e.FALL_WITH_VOLUME = "fall_with_volume", e.FALL_WITHOUT_VOLUME = "fall_without_volume", e.OTHERS = "others", e;
-}({}), yl = {
+}({}), xl = {
 	volumeAmplifyThreshold: 1.5,
 	volumeShrinkThreshold: .8,
 	avgPeriod: 20
-}, bl = class {
+}, Sl = class {
 	prefixSum = [];
 	dataLength = 0;
 	build(e) {
@@ -12488,8 +12832,8 @@ var $ = /* @__PURE__ */ function(e) {
 		return this.dataLength;
 	}
 };
-function xl(e, t, n, r = yl) {
-	let i = new bl();
+function Cl(e, t, n, r = xl) {
+	let i = new Sl();
 	i.build(e);
 	let a = [], { volumeAmplifyThreshold: o, volumeShrinkThreshold: s, avgPeriod: c } = r;
 	for (let r = t; r < n && r < e.length; r++) {
@@ -12510,7 +12854,7 @@ function xl(e, t, n, r = yl) {
 }
 //#endregion
 //#region src/core/renderers/candle.ts
-function Sl() {
+function wl() {
 	return {
 		name: "candle",
 		version: "1.0.0",
@@ -12523,14 +12867,14 @@ function Sl() {
 			if (!d.length) return;
 			let { kWidthPx: f } = Ms(o, s, c);
 			t.save(), t.translate(-a, 0);
-			let p = l || [], m = xl(d, i.start, i.end, yl);
+			let p = l || [], m = Cl(d, i.start, i.end, xl);
 			for (let r = i.start; r < i.end && r < d.length; r++) {
 				let a = d[r];
 				if (!a) continue;
 				let s = n.yAxis.priceToY(a.open), l = n.yAxis.priceToY(a.close), h = n.yAxis.priceToY(a.high), g = n.yAxis.priceToY(a.low), _ = p[r - i.start];
 				if (!_) continue;
 				let v = (e) => Math.round(e * c) / c, y = v(s), b = v(l), x = v(h), S = v(g), C = Math.min(y, b), w = Math.max(Math.abs(y - b), 1), T = Js(Math.round(_ * c), C, f, w, c);
-				t.fillStyle = vl(a) === "up" ? za.UP : za.DOWN, t.fillRect(T.bodyRect.x, T.bodyRect.y, T.bodyRect.width, T.bodyRect.height);
+				t.fillStyle = bl(a) === "up" ? za.UP : za.DOWN, t.fillRect(T.bodyRect.x, T.bodyRect.y, T.bodyRect.width, T.bodyRect.height);
 				let E = T.wickRect.width, D = T.wickRect.x, O = T.bodyRect.y, k = T.bodyRect.y + T.bodyRect.height, A = Math.max(a.open, a.close), j = Math.min(a.open, a.close);
 				if (a.high > A) {
 					let e = Ks(D, x, O, c);
@@ -12543,14 +12887,14 @@ function Sl() {
 				let M = m[r - i.start];
 				if (M !== $.OTHERS && u && (e.zoomLevel ?? 1) >= 2) {
 					let e = M === $.RISE_WITH_VOLUME || M === $.RISE_WITHOUT_VOLUME ? x - 15 : S + 15;
-					Cl(t, T.bodyRect.x + T.bodyRect.width / 2, e, M, r, o, 4, u, c);
+					Tl(t, T.bodyRect.x + T.bodyRect.width / 2, e, M, r, o, 4, u, c);
 				}
 			}
 			t.restore();
 		}
 	};
 }
-function Cl(e, t, n, r, i, a, o = 4, s, c) {
+function Tl(e, t, n, r, i, a, o = 4, s, c) {
 	let l = (e) => Math.round(e * c) / c;
 	t = l(t), n = l(n);
 	let u = Math.min(a, 20), d = u * Math.sqrt(3) / 2, f, p;
@@ -12616,12 +12960,12 @@ function Cl(e, t, n, r, i, a, o = 4, s, c) {
 }
 //#endregion
 //#region src/core/utils/tickCount.ts
-function wl(e, t) {
+function El(e, t) {
 	return Math.max(3, Math.round(e / 60) + 1);
 }
 //#endregion
 //#region src/core/renderers/gridLines.ts
-function Tl() {
+function Dl() {
 	return {
 		name: "gridLines",
 		version: "1.0.0",
@@ -12632,7 +12976,7 @@ function Tl() {
 		draw(e) {
 			let { ctx: t, pane: n, data: r, range: i, scrollLeft: a, kWidth: o, dpr: s, kLinePositions: c } = e, l = r;
 			if (!l.length) return;
-			let u = wl(n.height);
+			let u = El(n.height);
 			t.save(), t.fillStyle = Ha.HORIZONTAL, t.translate(-a, 0);
 			let d = t.canvas.width / s, f = a, p = a + d, m = n.yAxis.getPaddingTop(), h = n.yAxis.getPaddingBottom(), g = m, _ = Math.max(m, n.height - h), v = Math.max(0, _ - g);
 			for (let e = 0; e < u; e++) {
@@ -12653,7 +12997,7 @@ function Tl() {
 }
 //#endregion
 //#region src/core/renderers/lastPrice.ts
-function El() {
+function Ol() {
 	return {
 		name: "lastPriceLine",
 		version: "1.0.0",
@@ -12674,7 +13018,7 @@ function El() {
 }
 //#endregion
 //#region src/core/renderers/extremaMarkers.ts
-function Dl() {
+function kl() {
 	return {
 		name: "extremaMarkers",
 		version: "1.0.0",
@@ -12697,11 +13041,11 @@ function Dl() {
 				let t = e - i.start;
 				return t < 0 || t >= l.length ? 0 : l[t] + o / 2;
 			};
-			t.save(), t.translate(-a, 0), Ol(t, _(h), n.yAxis.priceToY(p), p, s, c, a), Ol(t, _(g), n.yAxis.priceToY(m), m, s, c, a), t.restore();
+			t.save(), t.translate(-a, 0), Al(t, _(h), n.yAxis.priceToY(p), p, s, c, a), Al(t, _(g), n.yAxis.priceToY(m), m, s, c, a), t.restore();
 		}
 	};
 }
-function Ol(e, t, n, r, i, a, o) {
+function Al(e, t, n, r, i, a, o) {
 	let s = r.toFixed(2);
 	e.font = "12px Arial";
 	let c = e.measureText(s).width, l = t - o + 30 + 4 + c > a, u = t, d = l ? t - 30 : t + 30;
@@ -12713,27 +13057,27 @@ function Ol(e, t, n, r, i, a, o) {
 }
 //#endregion
 //#region src/utils/priceToY.ts
-function kl(e, t, n, r, i, a) {
+function jl(e, t, n, r, i, a) {
 	let o = t - n || 1, s = Math.max(1, r - i - a);
 	return n + (1 - (Math.min(Math.max(e, i), i + s) - i) / s) * o;
 }
 //#endregion
 //#region src/utils/kLineDraw/axis.ts
-function Al(e, t) {
+function Ml(e, t) {
 	let { x: n, y: r, width: i, height: a, crosshairX: o, timestamp: s, dpr: c, fontSize: l = 16, paddingX: u = 8 } = t, d = Ia(s);
 	e.save(), e.font = `${l}px -apple-system,BlinkMacSystemFont,Trebuchet MS,Roboto,Ubuntu,sans-serif`, e.textBaseline = "middle", e.textAlign = "center";
 	let f = Math.round(e.measureText(d).width), p = Math.min(i, f + u * 2), m = a, h = Math.min(Math.max(o, n + p / 2), n + i - p / 2), g = r + a / 2, _ = h - p / 2, v = r;
 	e.fillStyle = "rgba(0, 0, 0, 0.8)", e.fillRect(Z(_, c), Z(v, c), Z(p, c), Z(m, c)), e.fillStyle = "#ffffff", e.fillText(d, Z(h, c), Z(g, c)), e.restore();
 }
-function jl(e, t) {
-	let { x: n, y: r, width: i, height: a, crosshairY: o, priceRange: s, yPaddingPx: c = 0, dpr: l, bgColor: u = "rgba(0, 0, 0, 0.8)", borderColor: d, textColor: f = "#ffffff", fontSize: p = 16, priceOffset: m = 0, price: h, formatPrice: g } = t, _ = Math.max(0, Math.min(c, Math.floor(a / 2) - 1)), { maxPrice: v, minPrice: y } = s, b = h ?? kl(o - r, v, y, a, _, _) + m, x = g ? g(b) : b.toFixed(2);
+function Nl(e, t) {
+	let { x: n, y: r, width: i, height: a, crosshairY: o, priceRange: s, yPaddingPx: c = 0, dpr: l, bgColor: u = "rgba(0, 0, 0, 0.8)", borderColor: d, textColor: f = "#ffffff", fontSize: p = 16, priceOffset: m = 0, price: h, formatPrice: g } = t, _ = Math.max(0, Math.min(c, Math.floor(a / 2) - 1)), { maxPrice: v, minPrice: y } = s, b = h ?? jl(o - r, v, y, a, _, _) + m, x = g ? g(b) : b.toFixed(2);
 	e.save(), e.font = `${p}px -apple-system,BlinkMacSystemFont,Trebuchet MS,Roboto,Ubuntu,sans-serif`, e.textBaseline = "middle", e.textAlign = "center";
 	let S = p + 4, C = Math.min(Math.max(o, r + S / 2), r + a - S / 2), w = C - S / 2, T = n, E = Z(w, l), D = i, O = Z(S, l);
 	e.fillStyle = u, e.fillRect(T, E, D, O), d && (e.strokeStyle = d, e.lineWidth = 1, e.strokeRect(Q(T, l), Q(E, l), Math.max(0, D - 1 / l), Math.max(0, O - 1 / l)));
 	let k = n + i / 2;
 	e.fillStyle = f, e.fillText(x, Z(k, l), Z(C, l)), e.restore();
 }
-function Ml(e, t) {
+function Pl(e, t) {
 	let { x: n, y: r, width: i, height: a, data: o, scrollLeft: s, kWidth: c, kGap: l, startIndex: u, endIndex: d, dpr: f, bgColor: p = Ba.TRANSPARENT, textColor: m = Ra.SECONDARY, lineColor: h = Va.DARK, fontSize: g = 12, paddingX: _ = 8, drawTopBorder: v = !0, drawBottomBorder: y = !0 } = t, b = Math.round(c * f), x = b % 2 == 0 ? b + 1 : b, S = Math.round(l * f), C = x + S, w = S, T = C / f, E = w / f, D = x / f;
 	e.fillStyle = p, e.fillRect(n, r, i, a), v && (e.strokeStyle = h, e.lineWidth = 1, e.beginPath(), e.moveTo(n, Q(r, f)), e.lineTo(n + i, Q(r, f)), e.stroke()), y && (e.strokeStyle = h, e.lineWidth = 1, e.beginPath(), e.moveTo(n, Q(r + a, f)), e.lineTo(n + i, Q(r + a, f)), e.stroke()), e.textAlign = "center", e.textBaseline = "middle";
 	let O = r + a / 2 + 1, k = La(o).filter((e) => e >= u && e < d);
@@ -12749,10 +13093,10 @@ function Ml(e, t) {
 }
 //#endregion
 //#region src/core/renderers/Indicator/scale/indicator_scale.ts
-function Nl(e) {
+function Fl(e) {
 	let { ctx: t, dpr: n, axisWidth: r, height: i, paddingTop: a, paddingBottom: o, valueMin: s, valueMax: c, isMain: l, decimals: u = 2, hideEdgeTicks: d = !0, formatLabel: f } = e, p = c - s || 1;
 	t.save(), t.clearRect(0, 0, r, i), t.font = "12px -apple-system,BlinkMacSystemFont,Trebuchet MS,Roboto,Ubuntu,sans-serif", t.textBaseline = "middle", t.textAlign = "center";
-	let m = r / 2, h = a, g = Math.max(a, i - o), _ = Math.max(0, g - h), v = wl(i, l), y = p / Math.max(1, v - 1);
+	let m = r / 2, h = a, g = Math.max(a, i - o), _ = Math.max(0, g - h), v = El(i, l), y = p / Math.max(1, v - 1);
 	for (let e = 0; e < v; e++) {
 		if (d && (e === 0 || e === v - 1)) continue;
 		let r = c - y * e, i = h + (v <= 1 ? 0 : e / (v - 1)) * _;
@@ -12760,7 +13104,7 @@ function Nl(e) {
 	}
 	t.restore();
 }
-function Pl(e) {
+function Il(e) {
 	let { axisWidth: t, paneId: n, indicatorKey: r, label: i, decimals: a = 2, yPaddingPx: o = 0, getCrosshair: s, formatTickLabel: c, formatCrosshairLabel: l } = e, u = Hs(r, n), d = null;
 	return {
 		name: `${r}Scale_${n}`,
@@ -12781,7 +13125,7 @@ function Pl(e) {
 				minPrice: f.valueMin,
 				maxPrice: f.valueMax
 			});
-			Nl({
+			Fl({
 				ctx: n,
 				dpr: i,
 				axisWidth: t,
@@ -12798,7 +13142,7 @@ function Pl(e) {
 			let m = s?.();
 			if (!m || m.activePaneId !== r.id) return;
 			let h = m.y - r.top, g = r.yAxis.getPaddingTop(), _ = r.yAxis.getPaddingBottom(), v = g, y = Math.max(g, r.height - _), b = Math.max(1, y - v), x = (Math.min(Math.max(h, v), y) - v) / b, S = p.maxPrice - x * (p.maxPrice - p.minPrice);
-			jl(n, {
+			Nl(n, {
 				x: 0,
 				y: 0,
 				width: t,
@@ -12817,7 +13161,7 @@ function Pl(e) {
 }
 //#endregion
 //#region src/core/renderers/yAxis.ts
-function Fl(e) {
+function Ll(e) {
 	return {
 		name: "yAxis",
 		version: "1.0.0",
@@ -12827,7 +13171,7 @@ function Fl(e) {
 		priority: X.SYSTEM_YAXIS,
 		draw(t) {
 			let { ctx: n, pane: r, dpr: i, yAxisCtx: a, data: o } = t, s = a || n, c = a?.canvas ? a.canvas.width / i : e.axisWidth, l = r.yAxis.getDisplayRange(r.priceRange);
-			r.capabilities.showPriceAxisTicks && Nl({
+			r.capabilities.showPriceAxisTicks && Fl({
 				ctx: s,
 				dpr: i,
 				axisWidth: c,
@@ -12843,7 +13187,7 @@ function Fl(e) {
 			let u = o, d = r.id === "main" ? u[u.length - 1] : null;
 			if (d) {
 				let t = r.yAxis.priceToY(d.close);
-				jl(s, {
+				Nl(s, {
 					x: 0,
 					y: r.top,
 					width: c,
@@ -12861,7 +13205,7 @@ function Fl(e) {
 				});
 			}
 			let f = e.getCrosshair?.();
-			f && f.activePaneId === r.id && f.price !== null && jl(s, {
+			f && f.activePaneId === r.id && f.price !== null && Nl(s, {
 				x: 0,
 				y: r.top,
 				width: c,
@@ -12879,8 +13223,8 @@ function Fl(e) {
 }
 //#endregion
 //#region src/core/renderers/Indicator/scale/macd_scale.ts
-function Il(e) {
-	return Pl({
+function Rl(e) {
+	return Il({
 		axisWidth: e.axisWidth,
 		paneId: e.paneId,
 		indicatorKey: "macd",
@@ -12892,9 +13236,9 @@ function Il(e) {
 }
 //#endregion
 //#region src/core/renderers/Indicator/scale/volume_scale.ts
-var Ll = 1e8;
-function Rl(e) {
-	return Pl({
+var zl = 1e8;
+function Bl(e) {
+	return Il({
 		axisWidth: e.axisWidth,
 		paneId: e.paneId,
 		indicatorKey: "volume",
@@ -12902,14 +13246,14 @@ function Rl(e) {
 		decimals: 2,
 		yPaddingPx: e.yPaddingPx,
 		getCrosshair: e.getCrosshair,
-		formatTickLabel: (e) => (e / Ll).toFixed(2),
-		formatCrosshairLabel: (e) => `${(e / Ll).toFixed(2)}亿`
+		formatTickLabel: (e) => (e / zl).toFixed(2),
+		formatCrosshairLabel: (e) => `${(e / zl).toFixed(2)}亿`
 	});
 }
 //#endregion
 //#region src/core/renderers/Indicator/scale/rsi_scale.ts
-function zl(e) {
-	return Pl({
+function Vl(e) {
+	return Il({
 		axisWidth: e.axisWidth,
 		paneId: e.paneId,
 		indicatorKey: "rsi",
@@ -12921,8 +13265,8 @@ function zl(e) {
 }
 //#endregion
 //#region src/core/renderers/Indicator/scale/cci_scale.ts
-function Bl(e) {
-	return Pl({
+function Hl(e) {
+	return Il({
 		axisWidth: e.axisWidth,
 		paneId: e.paneId,
 		indicatorKey: "cci",
@@ -12934,8 +13278,8 @@ function Bl(e) {
 }
 //#endregion
 //#region src/core/renderers/Indicator/scale/stoch_scale.ts
-function Vl(e) {
-	return Pl({
+function Ul(e) {
+	return Il({
 		axisWidth: e.axisWidth,
 		paneId: e.paneId,
 		indicatorKey: "stoch",
@@ -12947,8 +13291,8 @@ function Vl(e) {
 }
 //#endregion
 //#region src/core/renderers/Indicator/scale/mom_scale.ts
-function Hl(e) {
-	return Pl({
+function Wl(e) {
+	return Il({
 		axisWidth: e.axisWidth,
 		paneId: e.paneId,
 		indicatorKey: "mom",
@@ -12960,8 +13304,8 @@ function Hl(e) {
 }
 //#endregion
 //#region src/core/renderers/Indicator/scale/wmsr_scale.ts
-function Ul(e) {
-	return Pl({
+function Gl(e) {
+	return Il({
 		axisWidth: e.axisWidth,
 		paneId: e.paneId,
 		indicatorKey: "wmsr",
@@ -12973,8 +13317,8 @@ function Ul(e) {
 }
 //#endregion
 //#region src/core/renderers/Indicator/scale/kst_scale.ts
-function Wl(e) {
-	return Pl({
+function Kl(e) {
+	return Il({
 		axisWidth: e.axisWidth,
 		paneId: e.paneId,
 		indicatorKey: "kst",
@@ -12986,8 +13330,8 @@ function Wl(e) {
 }
 //#endregion
 //#region src/core/renderers/Indicator/scale/fastk_scale.ts
-function Gl(e) {
-	return Pl({
+function ql(e) {
+	return Il({
 		axisWidth: e.axisWidth,
 		paneId: e.paneId,
 		indicatorKey: "fastk",
@@ -12999,19 +13343,19 @@ function Gl(e) {
 }
 //#endregion
 //#region src/core/renderers/timeAxis.ts
-var Kl = Symbol("time-axis");
-function ql(e) {
+var Jl = Symbol("time-axis");
+function Yl(e) {
 	return {
 		name: "timeAxis",
 		version: "1.0.0",
 		description: "时间轴渲染器",
 		debugName: "时间轴",
-		paneId: Kl,
+		paneId: Jl,
 		priority: X.SYSTEM_XAXIS,
 		isSystem: !0,
 		draw(t) {
 			let { ctx: n, data: r, range: i, scrollLeft: a, kWidth: o, kGap: s, dpr: c, paneWidth: l } = t, u = r, d = n, f = l, p = e.height;
-			d.setTransform(1, 0, 0, 1, 0, 0), d.scale(c, c), d.clearRect(0, 0, f, p), Ml(d, {
+			d.setTransform(1, 0, 0, 1, 0, 0), d.scale(c, c), d.clearRect(0, 0, f, p), Pl(d, {
 				x: 0,
 				y: 0,
 				width: f,
@@ -13029,7 +13373,7 @@ function ql(e) {
 			let m = e.getCrosshair?.();
 			if (m && typeof m.index == "number") {
 				let e = u[m.index];
-				e && Al(d, {
+				e && Ml(d, {
 					x: 0,
 					y: 0,
 					width: f,
@@ -13045,7 +13389,7 @@ function ql(e) {
 }
 //#endregion
 //#region src/core/renderers/crosshair.ts
-function Jl(e) {
+function Xl(e) {
 	return {
 		name: "crosshair",
 		version: "1.0.0",
@@ -13069,7 +13413,7 @@ function Jl(e) {
 }
 //#endregion
 //#region src/core/renderers/paneTitle.ts
-function Yl(e) {
+function Zl(e) {
 	let t = { ...e };
 	return {
 		name: `paneTitle_${e.paneId}`,
@@ -13110,13 +13454,13 @@ function Yl(e) {
 }
 //#endregion
 //#region ~icons/tabler/pointer
-var Xl = {
+var Ql = {
 	viewBox: "0 0 24 24",
 	width: "1.2em",
 	height: "1.2em"
 };
-function Zl(e, t) {
-	return _(), o("svg", Xl, [...t[0] ||= [s("path", {
+function $l(e, t) {
+	return _(), o("svg", Ql, [...t[0] ||= [s("path", {
 		fill: "none",
 		stroke: "currentColor",
 		"stroke-linecap": "round",
@@ -13125,16 +13469,16 @@ function Zl(e, t) {
 		d: "M7.904 17.563a1.2 1.2 0 0 0 2.228.308l2.09-3.093l4.907 4.907a1.067 1.067 0 0 0 1.509 0l1.047-1.047a1.067 1.067 0 0 0 0-1.509l-4.907-4.907l3.113-2.09a1.2 1.2 0 0 0-.309-2.228L4 4z"
 	}, null, -1)]]);
 }
-var Ql = d({
+var eu = d({
 	name: "tabler-pointer",
-	render: Zl
-}), $l = {
+	render: $l
+}), tu = {
 	viewBox: "0 0 24 24",
 	width: "1.2em",
 	height: "1.2em"
 };
-function eu(e, t) {
-	return _(), o("svg", $l, [...t[0] ||= [s("path", {
+function nu(e, t) {
+	return _(), o("svg", tu, [...t[0] ||= [s("path", {
 		fill: "none",
 		stroke: "currentColor",
 		"stroke-linecap": "round",
@@ -13143,16 +13487,16 @@ function eu(e, t) {
 		d: "M4 19h16M4 15l4-6l4 2l4-5l4 4"
 	}, null, -1)]]);
 }
-var tu = d({
+var ru = d({
 	name: "tabler-chart-line",
-	render: eu
-}), nu = {
+	render: nu
+}), iu = {
 	viewBox: "0 0 24 24",
 	width: "1.2em",
 	height: "1.2em"
 };
-function ru(e, t) {
-	return _(), o("svg", nu, [...t[0] ||= [s("path", {
+function au(e, t) {
+	return _(), o("svg", iu, [...t[0] ||= [s("path", {
 		fill: "none",
 		stroke: "currentColor",
 		"stroke-linecap": "round",
@@ -13161,16 +13505,16 @@ function ru(e, t) {
 		d: "M17 7L7 17M8 7h9v9"
 	}, null, -1)]]);
 }
-var iu = d({
+var ou = d({
 	name: "tabler-arrow-up-right",
-	render: ru
-}), au = {
+	render: au
+}), su = {
 	viewBox: "0 0 24 24",
 	width: "1.2em",
 	height: "1.2em"
 };
-function ou(e, t) {
-	return _(), o("svg", au, [...t[0] ||= [s("path", {
+function cu(e, t) {
+	return _(), o("svg", su, [...t[0] ||= [s("path", {
 		fill: "none",
 		stroke: "currentColor",
 		"stroke-linecap": "round",
@@ -13179,16 +13523,16 @@ function ou(e, t) {
 		d: "M5 12h14m-6 6l6-6m-6-6l6 6"
 	}, null, -1)]]);
 }
-var su = d({
+var lu = d({
 	name: "tabler-arrow-right",
-	render: ou
-}), cu = {
+	render: cu
+}), uu = {
 	viewBox: "0 0 24 24",
 	width: "1.2em",
 	height: "1.2em"
 };
-function lu(e, t) {
-	return _(), o("svg", cu, [...t[0] ||= [s("path", {
+function du(e, t) {
+	return _(), o("svg", uu, [...t[0] ||= [s("path", {
 		fill: "none",
 		stroke: "currentColor",
 		"stroke-linecap": "round",
@@ -13197,16 +13541,16 @@ function lu(e, t) {
 		d: "M5 12h14"
 	}, null, -1)]]);
 }
-var uu = d({
+var fu = d({
 	name: "tabler-minus",
-	render: lu
-}), du = {
+	render: du
+}), pu = {
 	viewBox: "0 0 24 24",
 	width: "1.2em",
 	height: "1.2em"
 };
-function fu(e, t) {
-	return _(), o("svg", du, [...t[0] ||= [s("path", {
+function mu(e, t) {
+	return _(), o("svg", pu, [...t[0] ||= [s("path", {
 		fill: "none",
 		stroke: "currentColor",
 		"stroke-linecap": "round",
@@ -13215,16 +13559,16 @@ function fu(e, t) {
 		d: "M3 12v.01M7 12h10m4 0v.01"
 	}, null, -1)]]);
 }
-var pu = d({
+var hu = d({
 	name: "tabler-separator",
-	render: fu
-}), mu = {
+	render: mu
+}), gu = {
 	viewBox: "0 0 24 24",
 	width: "1.2em",
 	height: "1.2em"
 };
-function hu(e, t) {
-	return _(), o("svg", mu, [...t[0] ||= [s("path", {
+function _u(e, t) {
+	return _(), o("svg", gu, [...t[0] ||= [s("path", {
 		fill: "none",
 		stroke: "currentColor",
 		"stroke-linecap": "round",
@@ -13233,16 +13577,16 @@ function hu(e, t) {
 		d: "M4 8V6a2 2 0 0 1 2-2h2M4 16v2a2 2 0 0 0 2 2h2m8-16h2a2 2 0 0 1 2 2v2m-4 12h2a2 2 0 0 0 2-2v-2M9 12h6m-3-3v6"
 	}, null, -1)]]);
 }
-var gu = d({
+var vu = d({
 	name: "tabler-crosshair",
-	render: hu
-}), _u = {
+	render: _u
+}), yu = {
 	viewBox: "0 0 24 24",
 	width: "1.2em",
 	height: "1.2em"
 };
-function vu(e, t) {
-	return _(), o("svg", _u, [...t[0] ||= [s("g", {
+function bu(e, t) {
+	return _(), o("svg", yu, [...t[0] ||= [s("g", {
 		fill: "none",
 		stroke: "currentColor",
 		"stroke-linecap": "round",
@@ -13250,16 +13594,16 @@ function vu(e, t) {
 		"stroke-width": "2"
 	}, [s("path", { d: "M3 12a9 9 0 1 0 18 0a9 9 0 0 0-18 0m9-3h.01" }), s("path", { d: "M11 12h1v4h1" })], -1)]]);
 }
-var yu = d({
+var xu = d({
 	name: "tabler-info-circle",
-	render: vu
-}), bu = {
+	render: bu
+}), Su = {
 	viewBox: "0 0 24 24",
 	width: "1.2em",
 	height: "1.2em"
 };
-function xu(e, t) {
-	return _(), o("svg", bu, [...t[0] ||= [s("path", {
+function Cu(e, t) {
+	return _(), o("svg", Su, [...t[0] ||= [s("path", {
 		fill: "none",
 		stroke: "currentColor",
 		"stroke-linecap": "round",
@@ -13268,16 +13612,16 @@ function xu(e, t) {
 		d: "M4 8V6a2 2 0 0 1 2-2h2M4 16v2a2 2 0 0 0 2 2h2m8-16h2a2 2 0 0 1 2 2v2m-4 12h2a2 2 0 0 0 2-2v-2"
 	}, null, -1)]]);
 }
-var Su = d({
+var wu = d({
 	name: "tabler-maximize",
-	render: xu
-}), Cu = {
+	render: Cu
+}), Tu = {
 	viewBox: "0 0 24 24",
 	width: "1.2em",
 	height: "1.2em"
 };
-function wu(e, t) {
-	return _(), o("svg", Cu, [...t[0] ||= [s("path", {
+function Eu(e, t) {
+	return _(), o("svg", Tu, [...t[0] ||= [s("path", {
 		fill: "none",
 		stroke: "currentColor",
 		"stroke-linecap": "round",
@@ -13286,71 +13630,214 @@ function wu(e, t) {
 		d: "M15 19v-2a2 2 0 0 1 2-2h2M15 5v2a2 2 0 0 0 2 2h2M5 15h2a2 2 0 0 1 2 2v2M5 9h2a2 2 0 0 0 2-2V5"
 	}, null, -1)]]);
 }
-var Tu = d({
+var Du = d({
 	name: "tabler-minimize",
-	render: wu
-}), Eu = {
+	render: Eu
+}), Ou = {
+	viewBox: "0 0 24 24",
+	width: "1.2em",
+	height: "1.2em"
+};
+function ku(e, t) {
+	return _(), o("svg", Ou, [...t[0] ||= [s("path", {
+		fill: "none",
+		stroke: "currentColor",
+		"stroke-linecap": "round",
+		"stroke-linejoin": "round",
+		"stroke-width": "2",
+		d: "M3 10a7 7 0 1 0 14 0a7 7 0 1 0-14 0m4 0h6m-3-3v6m11 8l-6-6"
+	}, null, -1)]]);
+}
+var Au = d({
+	name: "tabler-zoom-in",
+	render: ku
+}), ju = {
+	viewBox: "0 0 24 24",
+	width: "1.2em",
+	height: "1.2em"
+};
+function Mu(e, t) {
+	return _(), o("svg", ju, [...t[0] ||= [s("path", {
+		fill: "none",
+		stroke: "currentColor",
+		"stroke-linecap": "round",
+		"stroke-linejoin": "round",
+		"stroke-width": "2",
+		d: "M3 10a7 7 0 1 0 14 0a7 7 0 1 0-14 0m4 0h6m8 11l-6-6"
+	}, null, -1)]]);
+}
+var Nu = d({
+	name: "tabler-zoom-out",
+	render: Mu
+}), Pu = {
+	viewBox: "0 0 24 24",
+	width: "1.2em",
+	height: "1.2em"
+};
+function Fu(e, t) {
+	return _(), o("svg", Pu, [...t[0] ||= [s("path", {
+		fill: "none",
+		stroke: "currentColor",
+		"stroke-linecap": "round",
+		"stroke-linejoin": "round",
+		"stroke-width": "2",
+		d: "M3 5a2 2 0 1 0 4 0a2 2 0 1 0-4 0m14 0a2 2 0 1 0 4 0a2 2 0 1 0-4 0M3 19a2 2 0 1 0 4 0a2 2 0 1 0-4 0m14 0a2 2 0 1 0 4 0a2 2 0 1 0-4 0M5 7v10M7 5h10M7 19h10m2-12v10"
+	}, null, -1)]]);
+}
+var Iu = d({
+	name: "tabler-shape",
+	render: Fu
+}), Lu = {
+	viewBox: "0 0 24 24",
+	width: "1.2em",
+	height: "1.2em"
+};
+function Ru(e, t) {
+	return _(), o("svg", Lu, [...t[0] ||= [s("path", {
+		fill: "none",
+		stroke: "currentColor",
+		"stroke-linecap": "round",
+		"stroke-linejoin": "round",
+		"stroke-width": "2",
+		d: "M3 7a2 2 0 1 0 4 0a2 2 0 1 0-4 0m11 8a2 2 0 1 0 4 0a2 2 0 1 0-4 0m1-9a3 3 0 1 0 6 0a3 3 0 1 0-6 0M3 18a3 3 0 1 0 6 0a3 3 0 1 0-6 0m6-1l5-1.5m-7.5-7l7.81 5.37M7 7l8-1"
+	}, null, -1)]]);
+}
+var zu = d({
+	name: "tabler-chart-dots-3",
+	render: Ru
+}), Bu = {
+	viewBox: "0 0 24 24",
+	width: "1.2em",
+	height: "1.2em"
+};
+function Vu(e, t) {
+	return _(), o("svg", Bu, [...t[0] ||= [s("path", {
+		fill: "none",
+		stroke: "currentColor",
+		"stroke-linecap": "round",
+		"stroke-linejoin": "round",
+		"stroke-width": "2",
+		d: "m18 10l-6-6l-6 6zm0 4l-6 6l-6-6z"
+	}, null, -1)]]);
+}
+var Hu = d({
+	name: "tabler-caret-up-down",
+	render: Vu
+}), Uu = {
+	viewBox: "0 0 24 24",
+	width: "1.2em",
+	height: "1.2em"
+};
+function Wu(e, t) {
+	return _(), o("svg", Uu, [...t[0] ||= [s("path", {
+		fill: "none",
+		stroke: "currentColor",
+		"stroke-linecap": "round",
+		"stroke-linejoin": "round",
+		"stroke-width": "2",
+		d: "M8 4H5v16h3m8-16h3v16h-3"
+	}, null, -1)]]);
+}
+var Gu = d({
+	name: "tabler-brackets",
+	render: Wu
+}), Ku = {
 	class: "left-toolbar",
 	"aria-label": "图表工具栏"
-}, Du = { class: "left-toolbar__group" }, Ou = [
+}, qu = { class: "left-toolbar__group" }, Ju = [
 	"title",
 	"aria-label",
 	"onClick"
-], ku = ["onClick"], Au = [
+], Yu = ["onClick"], Xu = [
 	"title",
 	"aria-label",
 	"onClick"
-], ju = { class: "left-toolbar__group" }, Mu = ["title", "aria-label"], Nu = /* @__PURE__ */ Oo(/* @__PURE__ */ u({
+], Zu = { class: "left-toolbar__group" }, Qu = { class: "left-toolbar__group" }, $u = ["title", "aria-label"], ed = /* @__PURE__ */ Oo(/* @__PURE__ */ u({
 	__name: "LeftToolbar",
 	props: { isFullscreen: { type: Boolean } },
-	emits: ["selectTool", "toggleFullscreen"],
+	emits: [
+		"selectTool",
+		"toggleFullscreen",
+		"zoomIn",
+		"zoomOut"
+	],
 	setup(t, { emit: r }) {
-		let c = r, u = [{
-			id: "cursor",
-			title: "光标",
-			icon: Ql
-		}, {
-			id: "lines",
-			title: "线条",
-			icon: tu,
-			children: [
-				{
-					id: "trend-line",
-					title: "线段",
-					icon: tu
-				},
-				{
-					id: "ray",
-					title: "射线",
-					icon: iu
-				},
-				{
-					id: "h-line",
-					title: "水平线",
-					icon: uu
-				},
-				{
-					id: "h-ray",
-					title: "水平射线",
-					icon: su
-				},
-				{
-					id: "v-line",
-					title: "垂直线",
-					icon: pu
-				},
-				{
-					id: "crosshair-line",
-					title: "十字线",
-					icon: gu
-				},
-				{
-					id: "info-line",
-					title: "信息线",
-					icon: yu
-				}
-			]
-		}], d = y("cursor"), f = y(null);
+		let c = r, u = [
+			{
+				id: "cursor",
+				title: "光标",
+				icon: eu
+			},
+			{
+				id: "lines",
+				title: "线条",
+				icon: ru,
+				children: [
+					{
+						id: "trend-line",
+						title: "线段",
+						icon: ru
+					},
+					{
+						id: "ray",
+						title: "射线",
+						icon: ou
+					},
+					{
+						id: "h-line",
+						title: "水平线",
+						icon: fu
+					},
+					{
+						id: "h-ray",
+						title: "水平射线",
+						icon: lu
+					},
+					{
+						id: "v-line",
+						title: "垂直线",
+						icon: hu
+					},
+					{
+						id: "crosshair-line",
+						title: "十字线",
+						icon: vu
+					},
+					{
+						id: "info-line",
+						title: "信息线",
+						icon: xu
+					}
+				]
+			},
+			{
+				id: "channels",
+				title: "通道",
+				icon: Iu,
+				children: [
+					{
+						id: "parallel-channel",
+						title: "平行通道",
+						icon: Iu
+					},
+					{
+						id: "regression-channel",
+						title: "回归趋势",
+						icon: zu
+					},
+					{
+						id: "flat-line",
+						title: "平滑顶底",
+						icon: Hu
+					},
+					{
+						id: "disjoint-channel",
+						title: "不相交通道",
+						icon: Gu
+					}
+				]
+			}
+		], d = y("cursor"), f = y(null);
 		function m(e) {
 			return d.value === e.id ? !0 : e.children ? e.children.some((e) => e.id === d.value) : !1;
 		}
@@ -13378,8 +13865,8 @@ var Tu = d({
 			document.addEventListener("click", T, !0);
 		}), g(() => {
 			document.removeEventListener("click", T, !0);
-		}), (r, c) => (_(), o("nav", Eu, [
-			s("div", Du, [(_(), o(e, null, b(u, (t) => s("div", {
+		}), (r, c) => (_(), o("nav", Ku, [
+			s("div", qu, [(_(), o(e, null, b(u, (t) => s("div", {
 				key: t.id,
 				class: "tool-item"
 			}, [s("button", {
@@ -13399,7 +13886,7 @@ var Tu = d({
 				class: p(["corner-indicator", { open: f.value === t.id }]),
 				onClick: D((e) => C(t.id), ["stop"]),
 				"aria-label": "展开子菜单"
-			}, null, 10, ku)) : a("", !0)], 42, Ou), l(n, { name: "dropdown" }, {
+			}, null, 10, Yu)) : a("", !0)], 42, Ju), l(n, { name: "dropdown" }, {
 				default: E(() => [f.value === t.id && t.children && t.children.length ? (_(), o("div", {
 					key: 0,
 					class: "tool-dropdown",
@@ -13416,34 +13903,60 @@ var Tu = d({
 				}, [(_(), i(x(e.icon), {
 					class: "tool-icon",
 					"aria-hidden": "true"
-				}))], 10, Au))), 128))], 32)) : a("", !0)]),
+				}))], 10, Xu))), 128))], 32)) : a("", !0)]),
 				_: 2
 			}, 1024)])), 64))]),
-			c[10] ||= s("span", { class: "left-toolbar__divider" }, null, -1),
-			s("div", ju, [s("button", {
+			c[18] ||= s("span", { class: "left-toolbar__divider" }, null, -1),
+			s("div", Zu, [s("button", {
 				type: "button",
 				class: "left-toolbar__button",
-				title: t.isFullscreen ? "退出全屏" : "全屏显示",
-				"aria-label": t.isFullscreen ? "退出全屏" : "全屏显示",
-				onClick: c[6] ||= (e) => r.$emit("toggleFullscreen"),
+				title: "放大",
+				"aria-label": "放大",
+				onClick: c[6] ||= (e) => r.$emit("zoomIn"),
 				onPointerdown: c[7] ||= D(() => {}, ["stop"]),
 				onPointermove: c[8] ||= D(() => {}, ["stop"]),
 				onPointerup: c[9] ||= D(() => {}, ["stop"])
-			}, [t.isFullscreen ? (_(), i(w(Tu), {
+			}, [l(w(Au), {
+				class: "tool-icon",
+				"aria-hidden": "true"
+			})], 32), s("button", {
+				type: "button",
+				class: "left-toolbar__button",
+				title: "缩小",
+				"aria-label": "缩小",
+				onClick: c[10] ||= (e) => r.$emit("zoomOut"),
+				onPointerdown: c[11] ||= D(() => {}, ["stop"]),
+				onPointermove: c[12] ||= D(() => {}, ["stop"]),
+				onPointerup: c[13] ||= D(() => {}, ["stop"])
+			}, [l(w(Nu), {
+				class: "tool-icon",
+				"aria-hidden": "true"
+			})], 32)]),
+			c[19] ||= s("span", { class: "left-toolbar__divider" }, null, -1),
+			s("div", Qu, [s("button", {
+				type: "button",
+				class: "left-toolbar__button",
+				title: t.isFullscreen ? "退出全屏" : "全屏显示",
+				"aria-label": t.isFullscreen ? "退出全屏" : "全屏显示",
+				onClick: c[14] ||= (e) => r.$emit("toggleFullscreen"),
+				onPointerdown: c[15] ||= D(() => {}, ["stop"]),
+				onPointermove: c[16] ||= D(() => {}, ["stop"]),
+				onPointerup: c[17] ||= D(() => {}, ["stop"])
+			}, [t.isFullscreen ? (_(), i(w(Du), {
 				key: 0,
 				class: "tool-icon",
 				"aria-hidden": "true"
-			})) : (_(), i(w(Su), {
+			})) : (_(), i(w(wu), {
 				key: 1,
 				class: "tool-icon",
 				"aria-hidden": "true"
-			}))], 40, Mu)])
+			}))], 40, $u)])
 		]));
 	}
-}), [["__scopeId", "data-v-42a7d005"]]), Pu = { class: "chart-wrapper" }, Fu = { class: "chart-main" }, Iu = {
+}), [["__scopeId", "data-v-f1125609"]]), td = { class: "chart-wrapper" }, nd = { class: "chart-main" }, rd = {
 	class: "pane-separator-layer",
 	"aria-hidden": "true"
-}, Lu = 4, Ru = /* @__PURE__ */ Oo(/* @__PURE__ */ u({
+}, id = 4, ad = /* @__PURE__ */ Oo(/* @__PURE__ */ u({
 	__name: "KLineChart",
 	props: {
 		semanticConfig: {},
@@ -13470,12 +13983,12 @@ var Tu = d({
 			rightAxisWidth: u.rightAxisWidth,
 			priceLabelWidth: u.priceLabelWidth
 		});
-		k.actions.setZoomState(k.state.zoomLevel, ml(k.state.zoomLevel, {
+		k.actions.setZoomState(k.state.zoomLevel, gl(k.state.zoomLevel, {
 			minKWidth: u.minKWidth,
 			maxKWidth: u.maxKWidth,
 			zoomLevelCount: u.zoomLevels,
 			dpr: k.state.viewportDpr
-		}), hl(k.state.viewportDpr)), r(() => k.state.dataLength), r(() => k.state.viewportDpr);
+		}), _l(k.state.viewportDpr)), r(() => k.state.dataLength), r(() => k.state.viewportDpr);
 		let A = r(() => k.state.zoomLevel), j = r(() => k.state.kWidth), M = r(() => k.state.kGap), N = r(() => k.state.paneRatios), ee = r(() => k.state.selectedDrawingId), P = r(() => k.state.dataVersion);
 		function F() {
 			D.value?.scheduleDraw();
@@ -13675,11 +14188,11 @@ var Tu = d({
 			return { ...Ne[e].defaultParams };
 		}
 		function Le(e = "VOLUME", t) {
-			if (U.value.length >= Lu) return !1;
+			if (U.value.length >= id) return !1;
 			let n = `sub_${e}`;
 			if (U.value.some((e) => e.id === n)) return !0;
 			if (!D.value?.createSubPane(e, t ?? Ie(e))) return !1;
-			let r = Yl({
+			let r = Zl({
 				paneId: n,
 				title: e,
 				getTitleInfo: () => Ue(n)
@@ -13731,7 +14244,7 @@ var Tu = d({
 			let e = D.value?.getSubPaneIndicators() ?? [];
 			U.value = [];
 			for (let t of e) {
-				let e = `sub_${t}`, n = Yl({
+				let e = `sub_${t}`, n = Zl({
 					paneId: e,
 					title: t,
 					getTitleInfo: () => Ue(e)
@@ -13751,7 +14264,7 @@ var Tu = d({
 			if (!n) return;
 			let r = n.indicatorId;
 			D.value?.removeRenderer(n.paneTitleRendererName), D.value?.removeSubPane(r), D.value?.createSubPane(t, Ie(t));
-			let i = `sub_${t}`, a = Yl({
+			let i = `sub_${t}`, a = Zl({
 				paneId: i,
 				title: t,
 				getTitleInfo: () => Ue(i)
@@ -13840,13 +14353,17 @@ var Tu = d({
 		}
 		let Je = r(() => u.rightAxisWidth + u.priceLabelWidth), Ye = k.computed.totalWidth;
 		function Xe() {
-			let e = E.value;
-			e && (e.scrollLeft = e.scrollWidth, F());
+			let e = E.value, t = D.value;
+			if (!e || !t) return;
+			let n = t.getData()?.length ?? 0;
+			if (n === 0) return;
+			let r = t.getCurrentDpr(), { unitPx: i, startXPx: a } = Ms(j.value, M.value, r), o = (a + n * i) / r, s = Math.max(0, e.scrollWidth - e.clientWidth), c = Math.min(s, Math.max(0, o - e.clientWidth));
+			e.scrollLeft = Math.round(c * r) / r, F();
 		}
 		function Ze(e, t) {
 			let n = D.value, r = E.value;
 			if (!n || !r) return;
-			let i = n.getCurrentDpr(), a = _l(e, t ?? (n.getViewport()?.plotWidth ?? r.clientWidth) / 2, r.scrollLeft, A.value, j.value, M.value, {
+			let i = n.getCurrentDpr(), a = yl(e, t ?? (n.getViewport()?.plotWidth ?? r.clientWidth) / 2, r.scrollLeft, A.value, j.value, M.value, {
 				minKWidth: u.minKWidth,
 				maxKWidth: u.maxKWidth,
 				zoomLevelCount: u.zoomLevels,
@@ -13882,7 +14399,7 @@ var Tu = d({
 				t.preventDefault();
 				let n = D.value;
 				if (!n) return;
-				let r = e.getBoundingClientRect(), i = t.clientX - r.left, a = e.scrollLeft, o = n.getCurrentDpr(), s = gl(t.deltaY > 0 ? -1 : 1, i, a, A.value, j.value, M.value, {
+				let r = e.getBoundingClientRect(), i = t.clientX - r.left, a = e.scrollLeft, o = n.getCurrentDpr(), s = vl(t.deltaY > 0 ? -1 : 1, i, a, A.value, j.value, M.value, {
 					minKWidth: u.minKWidth,
 					maxKWidth: u.maxKWidth,
 					zoomLevelCount: u.zoomLevels,
@@ -13896,7 +14413,7 @@ var Tu = d({
 				}));
 			};
 			e.addEventListener("wheel", i, { passive: !1 });
-			let a = new fl({
+			let a = new ml({
 				container: e,
 				canvasLayer: t,
 				rightAxisLayer: n,
@@ -13916,13 +14433,13 @@ var Tu = d({
 				zoomLevels: u.zoomLevels,
 				initialZoomLevel: u.initialZoomLevel
 			});
-			a.useRenderer(Tl()), a.useRenderer(Dl()), a.useRenderer(Xs({
+			a.useRenderer(Dl()), a.useRenderer(kl()), a.useRenderer(Xs({
 				ma5: !0,
 				ma10: !0,
 				ma20: !0,
 				ma30: !0,
 				ma60: !0
-			})), a.useRenderer(Qs()), a.setRendererEnabled("boll", !1), a.useRenderer(nc()), a.setRendererEnabled("expma", !1), a.useRenderer(ac()), a.setRendererEnabled("ene", !1), a.useRenderer(Sl()), a.useRenderer(El()), a.useRenderer(ka());
+			})), a.useRenderer(Qs()), a.setRendererEnabled("boll", !1), a.useRenderer(nc()), a.setRendererEnabled("expma", !1), a.useRenderer(ac()), a.setRendererEnabled("ene", !1), a.useRenderer(wl()), a.useRenderer(Ol()), a.useRenderer(ka());
 			let o = u.rightAxisWidth + u.priceLabelWidth, s = () => {
 				let e = a.interaction.crosshairPos, t = a.interaction.crosshairPrice, n = a.interaction.activePaneId;
 				return e && t !== null ? {
@@ -13931,46 +14448,46 @@ var Tu = d({
 					activePaneId: n
 				} : null;
 			};
-			a.useRenderer(Fl({
+			a.useRenderer(Ll({
 				axisWidth: o,
 				yPaddingPx: u.yPaddingPx,
 				getCrosshair: s
 			})), a.useRenderer(sc({ yPaddingPx: u.yPaddingPx }));
 			let c = [
 				{
-					create: Rl,
+					create: Bl,
 					paneId: "sub_VOLUME"
 				},
 				{
-					create: Il,
+					create: Rl,
 					paneId: "sub_MACD"
 				},
 				{
-					create: zl,
+					create: Vl,
 					paneId: "sub_RSI"
 				},
 				{
-					create: Bl,
+					create: Hl,
 					paneId: "sub_CCI"
 				},
 				{
-					create: Vl,
+					create: Ul,
 					paneId: "sub_STOCH"
 				},
 				{
-					create: Hl,
+					create: Wl,
 					paneId: "sub_MOM"
 				},
 				{
-					create: Ul,
+					create: Gl,
 					paneId: "sub_WMSR"
 				},
 				{
-					create: Wl,
+					create: Kl,
 					paneId: "sub_KST"
 				},
 				{
-					create: Gl,
+					create: ql,
 					paneId: "sub_FASTK"
 				}
 			];
@@ -13980,12 +14497,12 @@ var Tu = d({
 				yPaddingPx: u.yPaddingPx,
 				getCrosshair: s
 			}));
-			a.useRenderer(Jl({ getCrosshairState: () => ({
+			a.useRenderer(Xl({ getCrosshairState: () => ({
 				pos: a.interaction.crosshairPos,
 				activePaneId: a.interaction.activePaneId,
 				isDragging: a.interaction.isDraggingState(),
 				price: a.interaction.crosshairPrice
-			}) })), a.useRenderer(ql({
+			}) })), a.useRenderer(Yl({
 				height: u.bottomAxisHeight,
 				getCrosshair: () => {
 					let e = a.interaction.crosshairPos, t = a.interaction.crosshairIndex;
@@ -13996,16 +14513,18 @@ var Tu = d({
 				}
 			})), a.setOnViewportChange((e) => {
 				k.actions.setViewportDpr(e.dpr), k.actions.setViewWidth(e.plotWidth);
-				let t = hl(e.dpr);
+				let t = _l(e.dpr);
 				k.actions.setZoomState(k.state.zoomLevel, k.state.kWidth, t), a.applyRenderState(k.state.kWidth, t, k.state.zoomLevel);
 			}), a.setOnPaneLayoutChange((e) => {
 				let t = {};
 				for (let n of e) t[n.id] = n.ratio;
-				k.actions.setPaneRatios(t), ae.value = a.getPaneRenderers().slice(0, -1).map((e) => {
+				k.actions.setPaneRatios(t);
+				let n = a.getPaneRenderers(), r = E.value && parseInt(getComputedStyle(E.value).borderTopWidth) || 0;
+				ae.value = n.slice(0, -1).map((e) => {
 					let t = e.getPane();
 					return {
 						id: t.id,
-						top: t.top + t.height
+						top: t.top + t.height + r
 					};
 				});
 			}), a.setOnDataChange((e) => {
@@ -14020,6 +14539,21 @@ var Tu = d({
 				}
 			}), a.interaction.setTooltipAnchorPositioning(L.value), a.interaction.setOnInteractionChange((e) => {
 				R.value = e;
+			}), a.interaction.setOnPinchZoom((e, t) => {
+				let n = E.value;
+				if (!n || !a) return;
+				let r = t - n.getBoundingClientRect().left, i = n.scrollLeft, o = a.getCurrentDpr(), s = vl(e, r, i, A.value, j.value, M.value, {
+					minKWidth: u.minKWidth,
+					maxKWidth: u.maxKWidth,
+					zoomLevelCount: u.zoomLevels,
+					dpr: o
+				});
+				s && (k.actions.setZoomState(s.targetLevel, s.newKWidth, s.newKGap), a.interaction.clearHover(), f(() => {
+					let e = E.value;
+					if (!e) return;
+					let t = Math.max(0, e.scrollWidth - e.clientWidth), n = Math.min(Math.max(0, s.newScrollLeft), t);
+					e.scrollLeft = Math.round(n * o) / o, a.applyRenderState(s.newKWidth, s.newKGap, s.targetLevel), d("zoomLevelChange", s.targetLevel, s.newKWidth);
+				}));
 			}), R.value = a.interaction.getInteractionSnapshot(), k.actions.setViewportDpr(a.getCurrentDpr()), a.resize(), O.value = new $i(a), O.value.on("config:error", (e) => {
 				console.error("Semantic config error:", e);
 			}), O.value.on("config:ready", () => {
@@ -14041,18 +14575,20 @@ var Tu = d({
 				let t = await O.value?.applyConfig(e);
 				t && !t.success && console.error("Semantic config apply failed:", t.errors);
 			}
-		}, { deep: !0 }), (n, r) => (_(), o("div", Pu, [s("div", { class: p(["chart-stage", {
+		}, { deep: !0 }), (n, r) => (_(), o("div", td, [s("div", { class: p(["chart-stage", {
 			"is-dragging": ce.value,
 			"is-resizing-pane": le.value,
 			"is-hovering-pane-separator": ue.value,
 			"is-hovering-right-axis": fe.value,
 			"is-hovering-kline": pe.value !== null
-		}]) }, [l(Nu, {
+		}]) }, [l(ed, {
 			"is-fullscreen": t.isFullscreen,
 			onSelectTool: be,
-			onToggleFullscreen: r[0] ||= (e) => n.$emit("toggleFullscreen")
-		}, null, 8, ["is-fullscreen"]), s("div", Fu, [
-			s("div", Iu, [(_(!0), o(e, null, b(ae.value, (e) => (_(), o("div", {
+			onToggleFullscreen: r[0] ||= (e) => n.$emit("toggleFullscreen"),
+			onZoomIn: r[1] ||= (e) => Ze(A.value + 1),
+			onZoomOut: r[2] ||= (e) => Ze(A.value - 1)
+		}, null, 8, ["is-fullscreen"]), s("div", nd, [
+			s("div", rd, [(_(!0), o(e, null, b(ae.value, (e) => (_(), o("div", {
 				key: e.id,
 				class: p(["pane-separator-line", { "is-active": de.value === e.id }]),
 				style: m({ top: `${e.top}px` })
@@ -14150,8 +14686,8 @@ var Tu = d({
 			onReorderSubIndicators: qe
 		}, null, 8, ["active-indicators", "indicator-params"])]));
 	}
-}), [["__scopeId", "data-v-eede0b8f"]]), zu = { install(e) {
-	e.component("KLineChart", Ru);
+}), [["__scopeId", "data-v-3ad2d352"]]), od = { install(e) {
+	e.component("KLineChart", ad);
 } };
 //#endregion
-export { ya as ConfigManager, I as EventBus, ga as GLOBAL_PANE_ID, va as HookSystem, Ru as KLineChart, zu as KMapPlugin, xa as PluginHostImpl, _a as PluginRegistry, ma as PluginState, X as RENDERER_PRIORITY, wa as RendererPluginManager, Sa as createPluginHost, ha as wrapPaneInfo };
+export { ya as ConfigManager, I as EventBus, ga as GLOBAL_PANE_ID, va as HookSystem, ad as KLineChart, od as KMapPlugin, xa as PluginHostImpl, _a as PluginRegistry, ma as PluginState, X as RENDERER_PRIORITY, wa as RendererPluginManager, Sa as createPluginHost, ha as wrapPaneInfo };