waveform-analysis 0.1.41 → 0.1.42

package/dist/index.js

@@ -1032,6 +1032,7 @@ function tn(e) {
 		rowCount: en(e?.rowCount, 2),
 		columnCount: en(e?.columnCount, 1),
 		showPagination: e?.showPagination ?? !0,
+		fillIncompleteLastRow: e?.fillIncompleteLastRow ?? !1,
 		trackLines: t
 	};
 }
@@ -1049,32 +1050,33 @@ function on(e) {
 	return e === "compact" ? 0 : e === "separated" ? 16 : 14;
 }
 function sn(e, t, n, r, i = [], a, o = !0) {
-	let s = on(r), c = Number.isFinite(a) ? Math.max(0, a) : s, l = Math.max(0, n.columnCount - 1) * c, u = /* @__PURE__ */ new Set();
+	let s = nn(n), c = i.filter(Boolean).length, l = n.fillIncompleteLastRow && c > 0 && c < s, u = l ? Math.ceil(c / n.columnCount) : n.rowCount, d = on(r), f = Number.isFinite(a) ? Math.max(0, a) : d, p = /* @__PURE__ */ new Set();
 	if (o) {
-		if (r === "independent") for (let e = 0; e < n.rowCount; e += 1) u.add(e);
-		else if (r === "compact") u.add(n.rowCount - 1);
+		if (r === "independent") for (let e = 0; e < u; e += 1) p.add(e);
+		else if (r === "compact") p.add(u - 1);
 		else for (let e = 0; e < n.columnCount; e += 1) for (let t = nn(n) - 1; t >= 0; --t) if (t % n.columnCount === e && i[t]) {
-			u.add(Math.floor(t / n.columnCount));
+			p.add(Math.floor(t / n.columnCount));
 			break;
 		}
 	}
-	let d = Math.max(0, n.rowCount - 1) * s, f = u.size * 30, p = Math.max(1, (e - l) / n.columnCount), m = Math.max(1, (t - d - f) / n.rowCount);
-	return Array.from({ length: nn(n) }, (e, t) => {
-		let r = Math.floor(t / n.columnCount), i = t % n.columnCount, a = u.has(r) ? 30 : 0, o = m + a, l = Array.from({ length: r }, (e, t) => {
-			let n = u.has(t) ? 30 : 0;
-			return m + n + s;
+	let m = Math.max(0, u - 1) * d, h = p.size * 30, g = Math.max(1, (t - m - h) / u);
+	return Array.from({ length: l ? c : s }, (t, r) => {
+		let i = Math.floor(r / n.columnCount), a = r % n.columnCount, o = l && i === u - 1 ? c - i * n.columnCount : n.columnCount, s = Math.max(0, o - 1) * f, m = Math.max(1, (e - s) / o), h = p.has(i) ? 30 : 0, _ = g + h, v = Array.from({ length: i }, (e, t) => {
+			let n = p.has(t) ? 30 : 0;
+			return g + n + d;
 		}).reduce((e, t) => e + t, 0);
 		return {
-			slotIndex: t,
-			row: r,
-			column: i,
-			left: i * (p + c),
-			top: l,
-			width: p,
-			height: m,
-			plotHeight: m,
-			cellHeight: o,
-			xAxisBand: a
+			slotIndex: r,
+			row: i,
+			column: a,
+			left: a * (m + f),
+			top: v,
+			width: m,
+			height: g,
+			plotHeight: g,
+			cellHeight: _,
+			xAxisBand: h,
+			isLastRow: i === u - 1
 		};
 	});
 }
@@ -1210,7 +1212,7 @@ function pn(e) {
 				horizontal: !0,
 				vertical: !0
 			},
-			showXAxis: (i || s) && (e.displayMode === "independent" || (e.displayMode === "compact" ? t.row === e.grid.rowCount - 1 : n.has(t.slotIndex)))
+			showXAxis: (i || s) && (e.displayMode === "independent" || (e.displayMode === "compact" ? t.isLastRow ?? t.row === e.grid.rowCount - 1 : n.has(t.slotIndex)))
 		};
 	});
 }
@@ -2152,6 +2154,7 @@ function Qn(e) {
 		v,
 		() => x.value.rowCount,
 		() => x.value.columnCount,
+		() => x.value.fillIncompleteLastRow,
 		j
 	], async () => {
 		await d(), H();
@@ -2161,7 +2164,8 @@ function Qn(e) {
 	}), E([
 		y,
 		() => t.grid?.rowCount,
-		() => t.grid?.columnCount
+		() => t.grid?.columnCount,
+		() => t.grid?.fillIncompleteLastRow
 	], () => {
 		let e = v.value;
 		v.value = v.value > y.value ? y.value : v.value === 1 ? v.value : 1, e !== v.value && n("page-change", v.value, y.value), B(), d(H);
@@ -2768,6 +2772,7 @@ var lr = ["id"], ur = { class: "waveform-annotation-editor__content" }, dr = {
 			"cancel-text": "取消",
 			"ok-text": "保存标注",
 			"ok-button-props": { disabled: !M.value },
+			"root-class-name": "waveform-annotation-editor-root",
 			"wrap-class-name": "waveform-annotation-editor",
 			onCancel: o[4] ||= (e) => u("cancel"),
 			onOk: R
@@ -2874,7 +2879,7 @@ var lr = ["id"], ur = { class: "waveform-annotation-editor__content" }, dr = {
 			_: 1
 		}, 8, ["ok-button-props"]));
 	}
-}), [["__scopeId", "data-v-8ce79dc8"]]), Or = { class: "waveform-tooltip__series-content" }, kr = { class: "waveform-tooltip__series-label" }, Ar = { class: "waveform-tooltip__value" }, jr = 12, Mr = 8, Nr = 238, Pr = 560, Fr = 20, Ir = 20, Lr = /*#__PURE__*/ Fe(/* @__PURE__ */ c({
+}), [["__scopeId", "data-v-42466cf9"]]), Or = { class: "waveform-tooltip__series-content" }, kr = { class: "waveform-tooltip__series-label" }, Ar = { class: "waveform-tooltip__value" }, jr = 12, Mr = 8, Nr = 238, Pr = 560, Fr = 20, Ir = 20, Lr = /*#__PURE__*/ Fe(/* @__PURE__ */ c({
 	__name: "WaveformTooltip",
 	props: {
 		visible: { type: Boolean },

package/dist/style.css

@@ -1,2 +1,2 @@
-.waveform-annotation-layer[data-v-7254383e]{pointer-events:none}.waveform-annotation-layer--interactive .waveform-annotation[data-v-7254383e]{pointer-events:auto;cursor:grab;touch-action:none}.waveform-annotation-layer--interactive .waveform-annotation[data-v-7254383e]:active{cursor:grabbing}.waveform-annotation__arrow[data-v-7254383e]{stroke-width:2px;stroke-linecap:round;pointer-events:none}.waveform-annotation__box[data-v-7254383e]{stroke-width:1px;rx:3}.waveform-annotation-layer--interactive .waveform-annotation__box[data-v-7254383e]{pointer-events:auto}.waveform-annotation__text[data-v-7254383e]{pointer-events:none;-webkit-user-select:none;user-select:none}.waveform-annotation-context-menu[data-v-c70c98a1]{z-index:30;background:#fff;border:1px solid #dfe5ef;border-radius:4px;min-width:112px;padding:4px;display:grid;position:absolute;box-shadow:0 4px 14px #10182829}.waveform-annotation-context-menu button[data-v-c70c98a1]{color:#344054;text-align:left;white-space:nowrap;cursor:pointer;background:0 0;border:0;border-radius:3px;padding:7px 10px;font-size:12px}.waveform-annotation-context-menu button[data-v-c70c98a1]:hover{background:#f2f4f7}.waveform-annotation-editor__content[data-v-8ce79dc8]{color:#344054;gap:20px;font-size:13px;display:grid}.waveform-annotation-editor__coordinates[data-v-8ce79dc8]{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;display:grid}.waveform-annotation-editor__coordinates span[data-v-8ce79dc8],.waveform-annotation-editor__series[data-v-8ce79dc8]{background:#f8fafc;border:1px solid #eaecf0;border-radius:7px;align-items:center;gap:8px;min-width:0;padding:9px 10px;display:flex}.waveform-annotation-editor__coordinates span[data-v-8ce79dc8]{color:#667085}.waveform-annotation-editor__coordinate-input[data-v-8ce79dc8]{color:#667085;background:#f8fafc;border:1px solid #eaecf0;border-radius:7px;align-items:center;gap:8px;min-width:0;padding:9px 10px;display:flex}.waveform-annotation-editor__coordinate-input[data-v-8ce79dc8] .ant-input-number{color:#344054;width:auto;min-width:96px;font-family:SFMono-Regular,Consolas,monospace}.waveform-annotation-editor__coordinate-value[data-v-8ce79dc8]{display:none}.waveform-annotation-editor__coordinate-error[data-v-8ce79dc8]{color:#d92d20;grid-column:1/-1;margin:-12px 0 0;font-size:11px;line-height:1.4}.waveform-annotation-editor__coordinate-hint[data-v-8ce79dc8]{color:#98a2b3;margin:-12px 0 0;font-size:11px;line-height:1.4}.waveform-annotation-editor__coordinates b[data-v-8ce79dc8]{color:#1677ff;font-size:11px}.waveform-annotation-editor__coordinates code[data-v-8ce79dc8]{color:#344054;text-overflow:ellipsis;white-space:nowrap;min-width:0;font-family:SFMono-Regular,Consolas,monospace;font-size:11px;overflow:hidden}.waveform-annotation-editor__series[data-v-8ce79dc8]{gap:10px}.waveform-annotation-editor__series i[data-v-8ce79dc8]{border:1px solid #0000001f;border-radius:2px;flex:0 0 12px;width:12px;height:12px}.waveform-annotation-editor__series-label[data-v-8ce79dc8]{gap:1px;min-width:0;display:grid}.waveform-annotation-editor__series select[data-v-8ce79dc8]{color:#344054;min-width:0;max-width:190px;font:inherit;background:#fff;border:1px solid #d0d5dd;border-radius:5px;margin-left:auto;padding:5px 7px}.waveform-annotation-editor__series small[data-v-8ce79dc8]{color:#667085;font-size:10px}.waveform-annotation-editor__series b[data-v-8ce79dc8]{color:#344054;text-overflow:ellipsis;white-space:nowrap;font-size:12px;overflow:hidden}.waveform-annotation-editor__series code[data-v-8ce79dc8]{color:#667085;margin-left:auto;font-size:11px}.waveform-annotation-editor__field[data-v-8ce79dc8],.waveform-annotation-editor__color-field[data-v-8ce79dc8]{gap:4px;display:grid}.waveform-annotation-editor__label-row[data-v-8ce79dc8]{justify-content:space-between;align-items:center;gap:8px;display:flex}.waveform-annotation-editor__label-row b[data-v-8ce79dc8],.waveform-annotation-editor__colors legend[data-v-8ce79dc8]{color:#344054;font-size:12px;font-weight:600}.waveform-annotation-editor__label-row small[data-v-8ce79dc8]{color:#98a2b3;font-size:11px}.waveform-annotation-editor textarea[data-v-8ce79dc8]{box-sizing:border-box;color:#1d2939;width:100%;min-height:92px;font:inherit;resize:vertical;background:#fff;border:1px solid #d0d5dd;border-radius:7px;padding:10px 11px;line-height:1.5}.waveform-annotation-editor textarea[data-v-8ce79dc8]:focus{border-color:#1677ff;outline:3px solid #1677ff24}.waveform-annotation-editor__colors[data-v-8ce79dc8]{border:0;border-top:1px solid #eaecf0;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;min-width:0;margin:0;padding:14px 0 0;display:grid}.waveform-annotation-editor__colors legend[data-v-8ce79dc8]{grid-column:1/-1;padding:0}.waveform-annotation-editor__color-field[data-v-8ce79dc8]{color:#667085;text-align:left;place-items:stretch stretch;min-width:0;font-size:11px}.waveform-annotation-editor__color-field[data-v-8ce79dc8] .vc-color-wrap{border:1px solid #cfd5df;border-radius:6px;width:100%;height:34px;margin-right:0;box-shadow:inset 0 0 0 1px #ffffff61}.waveform-annotation-editor__color-field[data-v-8ce79dc8] .vc-color-wrap:hover{border-color:#98a2b3;box-shadow:0 0 0 3px #1677ff1f}@media (width<=420px){.waveform-annotation-editor__content[data-v-8ce79dc8]{gap:16px}.waveform-annotation-editor__coordinates[data-v-8ce79dc8]{grid-template-columns:1fr}}.waveform-tooltip[data-v-1f55d6c8]{box-sizing:border-box;z-index:2;color:#505050;pointer-events:none;background:#fff;border:1px solid #e3e7eb;border-radius:4px;gap:2px;width:max-content;max-width:min(560px,100% - 16px);padding:9px 12px;font:14px/1.35 Arial,sans-serif;display:grid;position:absolute;box-shadow:0 3px 10px #10182826}.waveform-tooltip__series[data-v-1f55d6c8]{grid-template-columns:8px minmax(0,1fr);align-items:start;gap:6px;display:grid}.waveform-tooltip__series i[data-v-1f55d6c8]{border-radius:50%;flex:none;width:8px;height:8px;margin-top:4px}.waveform-tooltip__series-content[data-v-1f55d6c8]{flex-wrap:nowrap;align-items:baseline;gap:12px;min-width:0;display:flex}.waveform-tooltip__series-label[data-v-1f55d6c8]{text-overflow:ellipsis;white-space:nowrap;flex:auto;min-width:0;overflow:hidden}.waveform-tooltip__value[data-v-1f55d6c8]{white-space:nowrap;flex:none}.waveform-tooltip__series strong[data-v-1f55d6c8]{font-weight:600}.waveform-tooltip__value[data-v-1f55d6c8]{color:#555}.waveform-tooltip__series small[data-v-1f55d6c8]{color:#667085}.waveform-track__line[data-v-42a3fd47]{fill:none;stroke-width:1.5px;stroke-linejoin:round;stroke-linecap:round}.waveform-track__error-bar[data-v-42a3fd47]{fill:none}.waveform-track__point[data-v-42a3fd47],.waveform-track__error-bar[data-v-42a3fd47]{pointer-events:none}.waveform-track{isolation:isolate;pointer-events:none}.waveform-track__y-axis-label-bg{fill:#fff;opacity:.9;pointer-events:none}.waveform-track__y-axis-label{pointer-events:none;font-size:12px;font-weight:500}.waveform-track__grid{pointer-events:none}.waveform-track__grid--major line{stroke:#dfe5ef;stroke-width:1px}.waveform-track__grid--minor line{stroke:#f2f5fa;stroke-width:1px}.waveform-track__plot-frame,.waveform-track__plot-background{pointer-events:none}.waveform-track__watermark{fill:#1677ff1a;pointer-events:none;-webkit-user-select:none;user-select:none;font-family:Consolas,Monaco,Courier New,monospace}.waveform-track__overlay{fill:#0000;cursor:crosshair;pointer-events:all;touch-action:none}.waveform-track__no-visible-series{fill:#8c8c8c;pointer-events:none;font:13px sans-serif}.waveform-track__overlay.is-zoomable{cursor:grab}.waveform-track__overlay.is-zoomable:active{cursor:grabbing}.waveform-track__overlay.is-annotating{cursor:crosshair}.waveform-track__overlay.is-presentation{cursor:default;pointer-events:none}.waveform-track__zero-line{fill:none;pointer-events:none}.waveform-track__axis-endpoint{fill:#667085;pointer-events:none;font-size:11px}.waveform-track__axis-exponent{fill:#666;font-family:sans-serif;font-size:10px}.waveform-track__axis path,.waveform-track__axis line{stroke:#1f2937}.waveform-track__axis text{fill:#667085;font-size:11px}.waveform-legend[data-v-2ae12e71]{pointer-events:none;overflow:hidden}.waveform-legend__viewport[data-v-2ae12e71]{box-sizing:border-box;width:100%;height:100%;padding:8px;display:flex;overflow:hidden}.waveform-legend__viewport--top-left[data-v-2ae12e71]{justify-content:flex-start;align-items:flex-start}.waveform-legend__viewport--top[data-v-2ae12e71]{justify-content:center;align-items:flex-start}.waveform-legend__viewport--top-right[data-v-2ae12e71]{justify-content:flex-end;align-items:flex-start}.waveform-legend__viewport--right[data-v-2ae12e71]{justify-content:flex-end;align-items:center}.waveform-legend__viewport--bottom-right[data-v-2ae12e71]{justify-content:flex-end;align-items:flex-end}.waveform-legend__viewport--bottom[data-v-2ae12e71]{justify-content:center;align-items:flex-end}.waveform-legend__viewport--bottom-left[data-v-2ae12e71]{justify-content:flex-start;align-items:flex-end}.waveform-legend__viewport--left[data-v-2ae12e71]{justify-content:flex-start;align-items:center}.waveform-legend__panel[data-v-2ae12e71]{color:#344054;border:1px solid #d0d5dde6;border-radius:4px;flex:0 auto;gap:5px 12px;max-width:100%;max-height:100%;padding:5px 7px;font:12px/1.35 sans-serif;display:flex;overflow:hidden}.waveform-legend__panel--interactive[data-v-2ae12e71]{pointer-events:auto}.waveform-legend__panel--horizontal[data-v-2ae12e71]{flex-flow:wrap;align-items:center}.waveform-legend__panel--vertical[data-v-2ae12e71]{flex-flow:column;align-items:stretch}.waveform-legend__item[data-v-2ae12e71]{min-width:0;max-width:160px;color:inherit;font:inherit;text-align:left;white-space:nowrap;appearance:none;background:0 0;border:0;align-items:center;gap:6px;padding:0;display:flex}.waveform-legend__item[data-v-2ae12e71]:disabled{opacity:1}.waveform-legend__panel--interactive .waveform-legend__item[data-v-2ae12e71]{cursor:pointer}.waveform-legend__panel--interactive .waveform-legend__item[data-v-2ae12e71]:focus-visible{outline-offset:2px;outline:2px solid #1677ff}.waveform-legend__item.is-hidden[data-v-2ae12e71]{opacity:.45}.waveform-legend__item.is-hidden .waveform-legend__label[data-v-2ae12e71]{text-decoration:line-through}.waveform-legend__swatch[data-v-2ae12e71]{stroke-linecap:round;stroke-linejoin:round;flex:0 0 26px;width:26px;height:16px;overflow:visible}.waveform-legend__label[data-v-2ae12e71]{text-overflow:ellipsis;min-width:0;overflow:hidden}.waveform-track__crosshair[data-v-a6f82099]{pointer-events:none}.waveform-track__crosshair line[data-v-a6f82099]{stroke:#57617b;stroke-width:1px;stroke-dasharray:4 3}.waveform-chart{box-sizing:border-box;color:#475467;background:#fff;border:1px solid #00000014;border-radius:6px;min-width:0;min-height:180px;position:relative;overflow:hidden}.waveform-chart--clean{border-color:#0000}.waveform-chart__pagination{z-index:2;position:absolute;bottom:6px;right:10px}.waveform-chart__title-area{background:#fff;align-items:center;width:100%;min-width:0;padding:0 24px;display:flex;position:relative;overflow:hidden}.waveform-chart__title-measure{visibility:hidden;pointer-events:none;display:block;position:absolute}.waveform-chart__title-visual{flex:none;min-width:0;position:relative;overflow:visible}.waveform-chart__title-text{transform-origin:50%;line-height:1.2;display:block;position:absolute;top:50%;left:50%;overflow:visible}.waveform-chart__pagination .ant-pagination-item,.waveform-chart__pagination .ant-pagination-prev .ant-pagination-item-link,.waveform-chart__pagination .ant-pagination-next .ant-pagination-item-link{background:#fff;border-color:#d9d9d9}.waveform-chart__pagination .ant-pagination-item-active{border-color:#1677ff}.waveform-chart__grid-slot-placeholder{fill:#fafbfc;stroke:#e4e7ec;stroke-dasharray:4 4;pointer-events:none}.waveform-chart__svg{max-width:100%;display:block}.waveform-chart__overlay{fill:#0000;cursor:crosshair;touch-action:none}.waveform-chart__overlay.is-zoomable{cursor:crosshair}.waveform-chart--panning .waveform-chart__overlay.is-zoomable{cursor:grabbing}.waveform-chart__zoom-selection{fill:#1677ff24;stroke:#1677ff;stroke-width:1px;pointer-events:none}.waveform-chart__overlay.is-annotating{cursor:crosshair}.waveform-chart--presentation .waveform-chart__overlay{cursor:default;pointer-events:none}.waveform-chart__label,.waveform-chart__empty{fill:#595959;font-size:12px}
+.waveform-annotation-layer[data-v-7254383e]{pointer-events:none}.waveform-annotation-layer--interactive .waveform-annotation[data-v-7254383e]{pointer-events:auto;cursor:grab;touch-action:none}.waveform-annotation-layer--interactive .waveform-annotation[data-v-7254383e]:active{cursor:grabbing}.waveform-annotation__arrow[data-v-7254383e]{stroke-width:2px;stroke-linecap:round;pointer-events:none}.waveform-annotation__box[data-v-7254383e]{stroke-width:1px;rx:3}.waveform-annotation-layer--interactive .waveform-annotation__box[data-v-7254383e]{pointer-events:auto}.waveform-annotation__text[data-v-7254383e]{pointer-events:none;-webkit-user-select:none;user-select:none}.waveform-annotation-context-menu[data-v-c70c98a1]{z-index:30;background:#fff;border:1px solid #dfe5ef;border-radius:4px;min-width:112px;padding:4px;display:grid;position:absolute;box-shadow:0 4px 14px #10182829}.waveform-annotation-context-menu button[data-v-c70c98a1]{color:#344054;text-align:left;white-space:nowrap;cursor:pointer;background:0 0;border:0;border-radius:3px;padding:7px 10px;font-size:12px}.waveform-annotation-context-menu button[data-v-c70c98a1]:hover{background:#f2f4f7}.waveform-annotation-editor-root,.waveform-annotation-editor-root *{box-sizing:border-box}.waveform-annotation-editor-root{color:#344054;text-align:left;text-transform:none;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,Noto Sans,sans-serif;line-height:1.5715}.waveform-annotation-editor-root button,.waveform-annotation-editor-root input,.waveform-annotation-editor-root select,.waveform-annotation-editor-root textarea{letter-spacing:normal;text-transform:none;font-family:inherit}.waveform-annotation-editor-root button{appearance:auto}.waveform-annotation-editor__content[data-v-42466cf9]{color:#344054;gap:20px;font-size:13px;display:grid}.waveform-annotation-editor__coordinates[data-v-42466cf9]{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;display:grid}.waveform-annotation-editor__coordinates span[data-v-42466cf9],.waveform-annotation-editor__series[data-v-42466cf9]{background:#f8fafc;border:1px solid #eaecf0;border-radius:7px;align-items:center;gap:8px;min-width:0;padding:9px 10px;display:flex}.waveform-annotation-editor__coordinates span[data-v-42466cf9]{color:#667085}.waveform-annotation-editor__coordinate-input[data-v-42466cf9]{color:#667085;background:#f8fafc;border:1px solid #eaecf0;border-radius:7px;align-items:center;gap:8px;min-width:0;padding:9px 10px;display:flex}.waveform-annotation-editor__coordinate-input[data-v-42466cf9] .ant-input-number{color:#344054;width:auto;min-width:96px;font-family:SFMono-Regular,Consolas,monospace}.waveform-annotation-editor__coordinate-value[data-v-42466cf9]{display:none}.waveform-annotation-editor__coordinate-error[data-v-42466cf9]{color:#d92d20;grid-column:1/-1;margin:-12px 0 0;font-size:11px;line-height:1.4}.waveform-annotation-editor__coordinate-hint[data-v-42466cf9]{color:#98a2b3;margin:-12px 0 0;font-size:11px;line-height:1.4}.waveform-annotation-editor__coordinates b[data-v-42466cf9]{color:#1677ff;font-size:11px}.waveform-annotation-editor__coordinates code[data-v-42466cf9]{color:#344054;text-overflow:ellipsis;white-space:nowrap;min-width:0;font-family:SFMono-Regular,Consolas,monospace;font-size:11px;overflow:hidden}.waveform-annotation-editor__series[data-v-42466cf9]{gap:10px}.waveform-annotation-editor__series i[data-v-42466cf9]{border:1px solid #0000001f;border-radius:2px;flex:0 0 12px;width:12px;height:12px}.waveform-annotation-editor__series-label[data-v-42466cf9]{gap:1px;min-width:0;display:grid}.waveform-annotation-editor__series select[data-v-42466cf9]{color:#344054;min-width:0;max-width:190px;font:inherit;background:#fff;border:1px solid #d0d5dd;border-radius:5px;margin-left:auto;padding:5px 7px}.waveform-annotation-editor__series small[data-v-42466cf9]{color:#667085;font-size:10px}.waveform-annotation-editor__series b[data-v-42466cf9]{color:#344054;text-overflow:ellipsis;white-space:nowrap;font-size:12px;overflow:hidden}.waveform-annotation-editor__series code[data-v-42466cf9]{color:#667085;margin-left:auto;font-size:11px}.waveform-annotation-editor__field[data-v-42466cf9],.waveform-annotation-editor__color-field[data-v-42466cf9]{gap:4px;display:grid}.waveform-annotation-editor__label-row[data-v-42466cf9]{justify-content:space-between;align-items:center;gap:8px;display:flex}.waveform-annotation-editor__label-row b[data-v-42466cf9],.waveform-annotation-editor__colors legend[data-v-42466cf9]{color:#344054;font-size:12px;font-weight:600}.waveform-annotation-editor__label-row small[data-v-42466cf9]{color:#98a2b3;font-size:11px}.waveform-annotation-editor textarea[data-v-42466cf9]{box-sizing:border-box;color:#1d2939;width:100%;min-height:92px;font:inherit;resize:vertical;background:#fff;border:1px solid #d0d5dd;border-radius:7px;padding:10px 11px;line-height:1.5}.waveform-annotation-editor textarea[data-v-42466cf9]:focus{border-color:#1677ff;outline:3px solid #1677ff24}.waveform-annotation-editor__colors[data-v-42466cf9]{border:0;border-top:1px solid #eaecf0;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;min-width:0;margin:0;padding:14px 0 0;display:grid}.waveform-annotation-editor__colors legend[data-v-42466cf9]{grid-column:1/-1;padding:0}.waveform-annotation-editor__color-field[data-v-42466cf9]{color:#667085;text-align:left;place-items:stretch stretch;min-width:0;font-size:11px}.waveform-annotation-editor__color-field[data-v-42466cf9] .vc-color-wrap{border:1px solid #cfd5df;border-radius:6px;width:100%;height:34px;margin-right:0;box-shadow:inset 0 0 0 1px #ffffff61}.waveform-annotation-editor__color-field[data-v-42466cf9] .vc-color-wrap:hover{border-color:#98a2b3;box-shadow:0 0 0 3px #1677ff1f}@media (width<=420px){.waveform-annotation-editor__content[data-v-42466cf9]{gap:16px}.waveform-annotation-editor__coordinates[data-v-42466cf9]{grid-template-columns:1fr}}.waveform-tooltip[data-v-1f55d6c8]{box-sizing:border-box;z-index:2;color:#505050;pointer-events:none;background:#fff;border:1px solid #e3e7eb;border-radius:4px;gap:2px;width:max-content;max-width:min(560px,100% - 16px);padding:9px 12px;font:14px/1.35 Arial,sans-serif;display:grid;position:absolute;box-shadow:0 3px 10px #10182826}.waveform-tooltip__series[data-v-1f55d6c8]{grid-template-columns:8px minmax(0,1fr);align-items:start;gap:6px;display:grid}.waveform-tooltip__series i[data-v-1f55d6c8]{border-radius:50%;flex:none;width:8px;height:8px;margin-top:4px}.waveform-tooltip__series-content[data-v-1f55d6c8]{flex-wrap:nowrap;align-items:baseline;gap:12px;min-width:0;display:flex}.waveform-tooltip__series-label[data-v-1f55d6c8]{text-overflow:ellipsis;white-space:nowrap;flex:auto;min-width:0;overflow:hidden}.waveform-tooltip__value[data-v-1f55d6c8]{white-space:nowrap;flex:none}.waveform-tooltip__series strong[data-v-1f55d6c8]{font-weight:600}.waveform-tooltip__value[data-v-1f55d6c8]{color:#555}.waveform-tooltip__series small[data-v-1f55d6c8]{color:#667085}.waveform-track__line[data-v-42a3fd47]{fill:none;stroke-width:1.5px;stroke-linejoin:round;stroke-linecap:round}.waveform-track__error-bar[data-v-42a3fd47]{fill:none}.waveform-track__point[data-v-42a3fd47],.waveform-track__error-bar[data-v-42a3fd47]{pointer-events:none}.waveform-track{isolation:isolate;pointer-events:none}.waveform-track__y-axis-label-bg{fill:#fff;opacity:.9;pointer-events:none}.waveform-track__y-axis-label{pointer-events:none;font-size:12px;font-weight:500}.waveform-track__grid{pointer-events:none}.waveform-track__grid--major line{stroke:#dfe5ef;stroke-width:1px}.waveform-track__grid--minor line{stroke:#f2f5fa;stroke-width:1px}.waveform-track__plot-frame,.waveform-track__plot-background{pointer-events:none}.waveform-track__watermark{fill:#1677ff1a;pointer-events:none;-webkit-user-select:none;user-select:none;font-family:Consolas,Monaco,Courier New,monospace}.waveform-track__overlay{fill:#0000;cursor:crosshair;pointer-events:all;touch-action:none}.waveform-track__no-visible-series{fill:#8c8c8c;pointer-events:none;font:13px sans-serif}.waveform-track__overlay.is-zoomable{cursor:grab}.waveform-track__overlay.is-zoomable:active{cursor:grabbing}.waveform-track__overlay.is-annotating{cursor:crosshair}.waveform-track__overlay.is-presentation{cursor:default;pointer-events:none}.waveform-track__zero-line{fill:none;pointer-events:none}.waveform-track__axis-endpoint{fill:#667085;pointer-events:none;font-size:11px}.waveform-track__axis-exponent{fill:#666;font-family:sans-serif;font-size:10px}.waveform-track__axis path,.waveform-track__axis line{stroke:#1f2937}.waveform-track__axis text{fill:#667085;font-size:11px}.waveform-legend[data-v-2ae12e71]{pointer-events:none;overflow:hidden}.waveform-legend__viewport[data-v-2ae12e71]{box-sizing:border-box;width:100%;height:100%;padding:8px;display:flex;overflow:hidden}.waveform-legend__viewport--top-left[data-v-2ae12e71]{justify-content:flex-start;align-items:flex-start}.waveform-legend__viewport--top[data-v-2ae12e71]{justify-content:center;align-items:flex-start}.waveform-legend__viewport--top-right[data-v-2ae12e71]{justify-content:flex-end;align-items:flex-start}.waveform-legend__viewport--right[data-v-2ae12e71]{justify-content:flex-end;align-items:center}.waveform-legend__viewport--bottom-right[data-v-2ae12e71]{justify-content:flex-end;align-items:flex-end}.waveform-legend__viewport--bottom[data-v-2ae12e71]{justify-content:center;align-items:flex-end}.waveform-legend__viewport--bottom-left[data-v-2ae12e71]{justify-content:flex-start;align-items:flex-end}.waveform-legend__viewport--left[data-v-2ae12e71]{justify-content:flex-start;align-items:center}.waveform-legend__panel[data-v-2ae12e71]{color:#344054;border:1px solid #d0d5dde6;border-radius:4px;flex:0 auto;gap:5px 12px;max-width:100%;max-height:100%;padding:5px 7px;font:12px/1.35 sans-serif;display:flex;overflow:hidden}.waveform-legend__panel--interactive[data-v-2ae12e71]{pointer-events:auto}.waveform-legend__panel--horizontal[data-v-2ae12e71]{flex-flow:wrap;align-items:center}.waveform-legend__panel--vertical[data-v-2ae12e71]{flex-flow:column;align-items:stretch}.waveform-legend__item[data-v-2ae12e71]{min-width:0;max-width:160px;color:inherit;font:inherit;text-align:left;white-space:nowrap;appearance:none;background:0 0;border:0;align-items:center;gap:6px;padding:0;display:flex}.waveform-legend__item[data-v-2ae12e71]:disabled{opacity:1}.waveform-legend__panel--interactive .waveform-legend__item[data-v-2ae12e71]{cursor:pointer}.waveform-legend__panel--interactive .waveform-legend__item[data-v-2ae12e71]:focus-visible{outline-offset:2px;outline:2px solid #1677ff}.waveform-legend__item.is-hidden[data-v-2ae12e71]{opacity:.45}.waveform-legend__item.is-hidden .waveform-legend__label[data-v-2ae12e71]{text-decoration:line-through}.waveform-legend__swatch[data-v-2ae12e71]{stroke-linecap:round;stroke-linejoin:round;flex:0 0 26px;width:26px;height:16px;overflow:visible}.waveform-legend__label[data-v-2ae12e71]{text-overflow:ellipsis;min-width:0;overflow:hidden}.waveform-track__crosshair[data-v-a6f82099]{pointer-events:none}.waveform-track__crosshair line[data-v-a6f82099]{stroke:#57617b;stroke-width:1px;stroke-dasharray:4 3}.waveform-chart{box-sizing:border-box;color:#475467;background:#fff;border:1px solid #00000014;border-radius:6px;min-width:0;min-height:180px;position:relative;overflow:hidden}.waveform-chart--clean{border-color:#0000}.waveform-chart__pagination{z-index:2;position:absolute;bottom:6px;right:10px}.waveform-chart__title-area{background:#fff;align-items:center;width:100%;min-width:0;padding:0 24px;display:flex;position:relative;overflow:hidden}.waveform-chart__title-measure{visibility:hidden;pointer-events:none;display:block;position:absolute}.waveform-chart__title-visual{flex:none;min-width:0;position:relative;overflow:visible}.waveform-chart__title-text{transform-origin:50%;line-height:1.2;display:block;position:absolute;top:50%;left:50%;overflow:visible}.waveform-chart__pagination .ant-pagination-item,.waveform-chart__pagination .ant-pagination-prev .ant-pagination-item-link,.waveform-chart__pagination .ant-pagination-next .ant-pagination-item-link{background:#fff;border-color:#d9d9d9}.waveform-chart__pagination .ant-pagination-item-active{border-color:#1677ff}.waveform-chart__grid-slot-placeholder{fill:#fafbfc;stroke:#e4e7ec;stroke-dasharray:4 4;pointer-events:none}.waveform-chart__svg{max-width:100%;display:block}.waveform-chart__overlay{fill:#0000;cursor:crosshair;touch-action:none}.waveform-chart__overlay.is-zoomable{cursor:crosshair}.waveform-chart--panning .waveform-chart__overlay.is-zoomable{cursor:grabbing}.waveform-chart__zoom-selection{fill:#1677ff24;stroke:#1677ff;stroke-width:1px;pointer-events:none}.waveform-chart__overlay.is-annotating{cursor:crosshair}.waveform-chart--presentation .waveform-chart__overlay{cursor:default;pointer-events:none}.waveform-chart__label,.waveform-chart__empty{fill:#595959;font-size:12px}
 /*$vite$:1*/

package/dist/types/components/core/grid.d.ts

@@ -6,6 +6,7 @@ export interface WaveformGridOptions {
     rowCount?: number;
     columnCount?: number;
     showPagination?: boolean;
+    fillIncompleteLastRow?: boolean;
     trackLines?: WaveformGridTrackLines;
 }
 export interface WaveformGridLineOptions {
@@ -27,6 +28,7 @@ export interface NormalizedWaveformGridOptions {
     rowCount: number;
     columnCount: number;
     showPagination: boolean;
+    fillIncompleteLastRow: boolean;
     trackLines: Record<string, NormalizedWaveformGridLineOptions>;
 }
 export interface GridCellGeometry {
@@ -41,6 +43,7 @@ export interface GridCellGeometry {
     plotHeight: number;
     cellHeight: number;
     xAxisBand: number;
+    isLastRow?: boolean;
 }
 export declare function normalizeGridOptions(options?: WaveformGridOptions): NormalizedWaveformGridOptions;
 export declare function getPageSize(options: NormalizedWaveformGridOptions): number;

package/dist/types/components/core/useWaveformChartController.d.ts

@@ -272,6 +272,7 @@ export declare function useWaveformChartController(props: ResolvedWaveformChartP
         plotHeight: number;
         cellHeight: number;
         xAxisBand: number;
+        isLastRow?: boolean;
     }[];
     trackLayouts: import("./types").TrackLayout[];
     annotationLayoutsForTrack: (track: import("./types").TrackLayout) => import("../annotation").AnnotationTrackLayout[];

package/dist/types/components/core/useWaveformChartLifecycle.d.ts

@@ -2,6 +2,7 @@ import { type ZoomTransform } from 'd3';
 import { type ComputedRef, type Ref, type ShallowRef } from 'vue';
 import type { AnnotationSeriesCandidate } from '../annotation';
 import type { useWaveformAnnotationInteraction } from '../annotation';
+import type { NormalizedWaveformGridOptions } from './grid';
 import type { DisplaySeries, DisplayTrack, TrackLayout } from './types';
 import type { ResolvedWaveformChartProps, WaveformChartEmit } from './waveformChartTypes';
 interface LifecycleContext {
@@ -22,10 +23,7 @@ interface LifecycleContext {
     currentPage: Ref<number>;
     pageCount: ComputedRef<number>;
     pagedTracks: ComputedRef<Array<DisplayTrack | undefined>>;
-    gridOptions: ComputedRef<{
-        rowCount: number;
-        columnCount: number;
-    }>;
+    gridOptions: ComputedRef<NormalizedWaveformGridOptions>;
     chartSeries: ComputedRef<DisplaySeries[]>;
     chartTracks: ComputedRef<DisplayTrack[]>;
     trackLayouts: ComputedRef<TrackLayout[]>;

package/dist/types/components/core/useWaveformLayout.d.ts

@@ -48,6 +48,7 @@ export declare function useWaveformLayout(context: LayoutContext): {
         plotHeight: number;
         cellHeight: number;
         xAxisBand: number;
+        isLastRow?: boolean;
     }[]>;
     trackLayouts: ComputedRef<TrackLayout[]>;
     annotationLayoutsForTrack: (track: TrackLayout) => AnnotationTrackLayout[];

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "waveform-analysis",
-  "version": "0.1.41",
+  "version": "0.1.42",
   "main": "./dist/index.cjs",
   "module": "./dist/index.js",
   "types": "./dist/types/index.d.ts",

package/src/components/annotation/WaveformAnnotationEditor.css

@@ -1,3 +1,33 @@
+/* The modal is teleported to body. Keep its entire subtree namespaced so host
+   application resets (for example `button { ... }`) cannot change the editor. */
+:global(.waveform-annotation-editor-root),
+:global(.waveform-annotation-editor-root *) {
+  box-sizing: border-box;
+}
+
+:global(.waveform-annotation-editor-root) {
+  color: #344054;
+  font-family:
+    -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial,
+    'Noto Sans', sans-serif;
+  line-height: 1.5715;
+  text-align: left;
+  text-transform: none;
+}
+
+:global(.waveform-annotation-editor-root button),
+:global(.waveform-annotation-editor-root input),
+:global(.waveform-annotation-editor-root select),
+:global(.waveform-annotation-editor-root textarea) {
+  font-family: inherit;
+  letter-spacing: normal;
+  text-transform: none;
+}
+
+:global(.waveform-annotation-editor-root button) {
+  appearance: auto;
+}
+
 .waveform-annotation-editor__content {
   display: grid;
   gap: 20px;

package/src/components/annotation/WaveformAnnotationEditor.vue

@@ -126,6 +126,7 @@ function handleSeriesChange(event: Event) {
     cancel-text="取消"
     ok-text="保存标注"
     :ok-button-props="{ disabled: !canConfirm }"
+    root-class-name="waveform-annotation-editor-root"
     wrap-class-name="waveform-annotation-editor"
     @cancel="emit('cancel')"
     @ok="confirm"

package/src/components/annotation/components.test.ts

@@ -18,13 +18,14 @@ const modalStub = defineComponent({
     'cancelText',
     'okText',
     'okButtonProps',
+    'rootClassName',
   ],
   emits: ['cancel', 'ok'],
   setup(props, { emit, slots }) {
     return () => {
       const title = slots.title?.() ?? []
       const titleId = (title[0]?.props as { id?: string } | undefined)?.id
-      return h('div', { class: 'ant-modal-root' }, [
+      return h('div', { class: ['ant-modal-root', props.rootClassName] }, [
         h(
           'div',
           {
@@ -96,6 +97,18 @@ describe('waveform annotation controls', () => {
     expect(second.get('[role="dialog"]').attributes('aria-labelledby')).toBe(secondTitleId)
   })
 
+  it('uses a dedicated root class to isolate teleported modal styles', () => {
+    const wrapper = mountEditor({
+      props: {
+        annotation: { id: 'isolated', seriesId: 'a', x: 1, y: 2, text: '说明' },
+        mode: 'add',
+      },
+    })
+
+    expect(wrapper.get('.ant-modal-root').classes()).toContain('waveform-annotation-editor-root')
+    expect(wrapper.get('.ant-modal-wrap').classes()).toContain('waveform-annotation-editor')
+  })
+
   it.each(['add', 'edit'] as const)('shows the X-axis snapping hint in %s mode', (mode) => {
     const wrapper = mountEditor({
       props: {

package/src/components/core/fixedYDomainLayout.test.ts

@@ -53,7 +53,13 @@ describe('fixed Y-domain layout', () => {
           series: sourceTrack,
         },
       ],
-      grid: { rowCount: 1, columnCount: 1, showPagination: false, trackLines: {} },
+      grid: {
+        rowCount: 1,
+        columnCount: 1,
+        showPagination: false,
+        fillIncompleteLastRow: false,
+        trackLines: {},
+      },
       displayMode: 'independent',
       overlayMode: 'single-axis',
       independentTransforms: [zoomIdentity],
@@ -89,7 +95,13 @@ describe('fixed Y-domain layout', () => {
           series: track([series('a', 0, 100)]),
         },
       ],
-      grid: { rowCount: 1, columnCount: 1, showPagination: false, trackLines: {} },
+      grid: {
+        rowCount: 1,
+        columnCount: 1,
+        showPagination: false,
+        fillIncompleteLastRow: false,
+        trackLines: {},
+      },
       displayMode: 'independent',
       overlayMode: 'single-axis',
       independentTransforms: [zoomIdentity],
@@ -124,7 +136,13 @@ describe('fixed Y-domain layout', () => {
             series: track([series('a', 3, 97)]),
           },
         ],
-        grid: { rowCount: 1, columnCount: 1, showPagination: false, trackLines: {} },
+        grid: {
+          rowCount: 1,
+          columnCount: 1,
+          showPagination: false,
+          fillIncompleteLastRow: false,
+          trackLines: {},
+        },
         displayMode: 'independent',
         overlayMode: 'single-axis',
         independentTransforms: [zoomIdentity],

package/src/components/core/grid.test.ts

@@ -15,12 +15,14 @@ describe('waveform grid helpers', () => {
       rowCount: 2,
       columnCount: 1,
       showPagination: true,
+      fillIncompleteLastRow: false,
       trackLines: {},
     })
     expect(normalizeGridOptions({ rowCount: 0, columnCount: 99 })).toEqual({
       rowCount: 1,
       columnCount: 10,
       showPagination: true,
+      fillIncompleteLastRow: false,
       trackLines: {},
     })
   })
@@ -131,4 +133,50 @@ describe('waveform grid helpers', () => {
     expect(cells[1].left).toBe(232)
     expect(cells[2].top).toBe(cells[0].plotHeight + X_AXIS_BAND + 14)
   })
+
+  it('fills incomplete final rows without changing page capacity', () => {
+    const oneColumn = resolveGridCellGeometry(
+      400,
+      400,
+      normalizeGridOptions({ rowCount: 4, columnCount: 1, fillIncompleteLastRow: true }),
+      'separated',
+      [true, true, true],
+    )
+    expect(oneColumn).toHaveLength(3)
+    expect(oneColumn.map((cell) => cell.width)).toEqual([400, 400, 400])
+    expect(oneColumn.at(-1)?.isLastRow).toBe(true)
+
+    const twoColumns = resolveGridCellGeometry(
+      400,
+      300,
+      normalizeGridOptions({ rowCount: 2, columnCount: 2, fillIncompleteLastRow: true }),
+      'separated',
+      [true, true, true],
+    )
+    expect(twoColumns).toHaveLength(3)
+    expect(twoColumns[2]).toMatchObject({ row: 1, column: 0, left: 0, width: 400 })
+
+    const threeColumns = resolveGridCellGeometry(
+      400,
+      300,
+      normalizeGridOptions({ rowCount: 2, columnCount: 3, fillIncompleteLastRow: true }),
+      'separated',
+      [true, true, true, true, true],
+    )
+    expect(threeColumns).toHaveLength(5)
+    expect(threeColumns.slice(3).map((cell) => cell.width)).toEqual([192, 192])
+    expect(threeColumns.slice(3).map((cell) => cell.left)).toEqual([0, 208])
+  })
+
+  it('keeps full pages and the disabled option byte-for-byte compatible', () => {
+    const base = normalizeGridOptions({ rowCount: 2, columnCount: 2 })
+    const filled = normalizeGridOptions({ rowCount: 2, columnCount: 2, fillIncompleteLastRow: true })
+    const fullSlots = [true, true, true, true]
+    expect(resolveGridCellGeometry(400, 300, filled, 'independent', fullSlots)).toEqual(
+      resolveGridCellGeometry(400, 300, base, 'independent', fullSlots),
+    )
+    expect(resolveGridCellGeometry(400, 300, base, 'independent', [true, true, true])).toHaveLength(
+      4,
+    )
+  })
 })

package/src/components/core/grid.ts

@@ -8,6 +8,7 @@ export interface WaveformGridOptions {
   rowCount?: number
   columnCount?: number
   showPagination?: boolean
+  fillIncompleteLastRow?: boolean
   trackLines?: WaveformGridTrackLines
 }
 
@@ -33,6 +34,7 @@ export interface NormalizedWaveformGridOptions {
   rowCount: number
   columnCount: number
   showPagination: boolean
+  fillIncompleteLastRow: boolean
   trackLines: Record<string, NormalizedWaveformGridLineOptions>
 }
 
@@ -48,6 +50,7 @@ export interface GridCellGeometry {
   plotHeight: number
   cellHeight: number
   xAxisBand: number
+  isLastRow?: boolean
 }
 
 const normalizeCount = (value: unknown, fallback: number) => {
@@ -78,6 +81,7 @@ export function normalizeGridOptions(options?: WaveformGridOptions): NormalizedW
     rowCount: normalizeCount(options?.rowCount, 2),
     columnCount: normalizeCount(options?.columnCount, 1),
     showPagination: options?.showPagination ?? true,
+    fillIncompleteLastRow: options?.fillIncompleteLastRow ?? false,
     trackLines,
   }
 }
@@ -114,20 +118,23 @@ export function resolveGridCellGeometry(
   horizontalGap?: number,
   showXAxis = true,
 ): GridCellGeometry[] {
+  const pageSize = getPageSize(options)
+  const seriesCount = slotHasSeries.filter(Boolean).length
+  const filledLastRow = options.fillIncompleteLastRow && seriesCount > 0 && seriesCount < pageSize
+  const rowCount = filledLastRow ? Math.ceil(seriesCount / options.columnCount) : options.rowCount
   const defaultGap = getGridGap(displayMode)
   const columnGap = Number.isFinite(horizontalGap)
     ? Math.max(0, horizontalGap as number)
     : defaultGap
-  const totalHorizontalGap = Math.max(0, options.columnCount - 1) * columnGap
   const axisRows = new Set<number>()
   if (!showXAxis) {
     // Net view uses the full drawing area for waveform pixels.
   } else if (displayMode === 'independent') {
-    for (let row = 0; row < options.rowCount; row += 1) axisRows.add(row)
+    for (let row = 0; row < rowCount; row += 1) axisRows.add(row)
   } else if (displayMode === 'compact') {
     // Compact tracks share one continuous plot stack. Reserve the X-axis band
     // only beneath the final grid row, including when that row is empty.
-    axisRows.add(options.rowCount - 1)
+    axisRows.add(rowCount - 1)
   } else {
     for (let column = 0; column < options.columnCount; column += 1) {
       for (let slotIndex = getPageSize(options) - 1; slotIndex >= 0; slotIndex -= 1) {
@@ -139,17 +146,22 @@ export function resolveGridCellGeometry(
       }
     }
   }
-  const totalVerticalGap = Math.max(0, options.rowCount - 1) * defaultGap
+  const totalVerticalGap = Math.max(0, rowCount - 1) * defaultGap
   const totalAxisBand = axisRows.size * X_AXIS_BAND
-  const width = Math.max(1, (innerWidth - totalHorizontalGap) / options.columnCount)
   const plotHeight = Math.max(
     1,
-    (innerHeight - totalVerticalGap - totalAxisBand) / options.rowCount,
+    (innerHeight - totalVerticalGap - totalAxisBand) / rowCount,
   )
 
-  return Array.from({ length: getPageSize(options) }, (_, slotIndex) => {
+  return Array.from({ length: filledLastRow ? seriesCount : pageSize }, (_, slotIndex) => {
     const row = Math.floor(slotIndex / options.columnCount)
     const column = slotIndex % options.columnCount
+    const rowSeriesCount =
+      filledLastRow && row === rowCount - 1
+        ? seriesCount - row * options.columnCount
+        : options.columnCount
+    const rowGap = Math.max(0, rowSeriesCount - 1) * columnGap
+    const width = Math.max(1, (innerWidth - rowGap) / rowSeriesCount)
     const xAxisBand = axisRows.has(row) ? X_AXIS_BAND : 0
     const cellHeight = plotHeight + xAxisBand
     const top = Array.from({ length: row }, (_, previousRow) => {
@@ -167,6 +179,7 @@ export function resolveGridCellGeometry(
       plotHeight,
       cellHeight,
       xAxisBand,
+      isLastRow: row === rowCount - 1,
     }
   })
 }

package/src/components/core/layout.test.ts

@@ -65,7 +65,13 @@ function layoutForSeries(
         series: sourceTrack,
       },
     ],
-    grid: { rowCount: 1, columnCount: 1, showPagination: false, trackLines: {} },
+    grid: {
+      rowCount: 1,
+      columnCount: 1,
+      showPagination: false,
+      fillIncompleteLastRow: false,
+      trackLines: {},
+    },
     displayMode: 'independent',
     overlayMode: 'single-axis',
     independentTransforms: [transform],
@@ -107,7 +113,13 @@ describe('multi-value Y-axis grouping', () => {
           series: sourceTrack,
         },
       ],
-      grid: { rowCount: 1, columnCount: 1, showPagination: false, trackLines: {} },
+      grid: {
+        rowCount: 1,
+        columnCount: 1,
+        showPagination: false,
+        fillIncompleteLastRow: false,
+        trackLines: {},
+      },
       displayMode: 'independent',
       overlayMode: 'single-axis',
       independentTransforms: [zoomIdentity],
@@ -217,7 +229,13 @@ describe('multi-value Y-axis grouping', () => {
           series: track([series('left', 1000, 3000), series('right', 1000, 3000)]),
         },
       ],
-      grid: { rowCount: 1, columnCount: 1, showPagination: false, trackLines: {} },
+      grid: {
+        rowCount: 1,
+        columnCount: 1,
+        showPagination: false,
+        fillIncompleteLastRow: false,
+        trackLines: {},
+      },
       displayMode: 'independent',
       overlayMode: 'multi-axis',
       independentTransforms: [zoomIdentity],

package/src/components/core/trackLayoutBuilder.ts

@@ -266,7 +266,7 @@ export function buildTrackLayouts(options: BuildTrackLayoutsOptions): TrackLayou
         (isEmpty || hasVisibleSeries) &&
         (options.displayMode === 'independent' ||
           (options.displayMode === 'compact'
-            ? cell.row === options.grid.rowCount - 1
+            ? (cell.isLastRow ?? cell.row === options.grid.rowCount - 1)
             : bottomCells.has(cell.slotIndex))),
     }
   })

package/src/components/core/useWaveformChartLifecycle.ts

@@ -11,6 +11,7 @@ import {
 
 import type { AnnotationSeriesCandidate } from '../annotation'
 import type { useWaveformAnnotationInteraction } from '../annotation'
+import type { NormalizedWaveformGridOptions } from './grid'
 import type { DisplaySeries, DisplayTrack, TrackLayout } from './types'
 import type { ResolvedWaveformChartProps, WaveformChartEmit } from './waveformChartTypes'
 import { constrainZoomDomain, transformForDomain } from '../interaction/zoomConstraints'
@@ -33,7 +34,7 @@ interface LifecycleContext {
   currentPage: Ref<number>
   pageCount: ComputedRef<number>
   pagedTracks: ComputedRef<Array<DisplayTrack | undefined>>
-  gridOptions: ComputedRef<{ rowCount: number; columnCount: number }>
+  gridOptions: ComputedRef<NormalizedWaveformGridOptions>
   chartSeries: ComputedRef<DisplaySeries[]>
   chartTracks: ComputedRef<DisplayTrack[]>
   trackLayouts: ComputedRef<TrackLayout[]>
@@ -220,6 +221,7 @@ export function useWaveformChartLifecycle(context: LifecycleContext) {
       currentPage,
       () => gridOptions.value.rowCount,
       () => gridOptions.value.columnCount,
+      () => gridOptions.value.fillIncompleteLastRow,
       activeInteractionMode,
     ],
     async () => {
@@ -239,20 +241,28 @@ export function useWaveformChartLifecycle(context: LifecycleContext) {
     },
   )
 
-  watch([pageCount, () => props.grid?.rowCount, () => props.grid?.columnCount], () => {
-    const previousPage = currentPage.value
-    currentPage.value =
-      currentPage.value > pageCount.value
-        ? pageCount.value
-        : currentPage.value !== 1
-          ? 1
-          : currentPage.value
-    if (previousPage !== currentPage.value) {
-      emit('page-change', currentPage.value, pageCount.value)
-    }
-    clearHover()
-    void nextTick(configureZoom)
-  })
+  watch(
+    [
+      pageCount,
+      () => props.grid?.rowCount,
+      () => props.grid?.columnCount,
+      () => props.grid?.fillIncompleteLastRow,
+    ],
+    () => {
+      const previousPage = currentPage.value
+      currentPage.value =
+        currentPage.value > pageCount.value
+          ? pageCount.value
+          : currentPage.value !== 1
+            ? 1
+            : currentPage.value
+      if (previousPage !== currentPage.value) {
+        emit('page-change', currentPage.value, pageCount.value)
+      }
+      clearHover()
+      void nextTick(configureZoom)
+    },
+  )
 
   watch(activeInteractionMode, () => {
     editorSeriesOptions.value = []