@oicl/openbridge-webcomponents 2.1.0-next.6 → 2.1.0-next.7

package/bundle/openbridge-webcomponents.bundle.js

@@ -4379,7 +4379,7 @@ var ObcChartObjectVesselButton = class ObcChartObjectVesselButton extends i$4 {
 	}
 	getTurnRateIcon() {
 		if (!["button-speed-rot", "flat-speed-rot"].includes(this.type)) return A;
-		const deg = this.turnRate / 100 * 12;
+		const deg = (Number.isFinite(this.turnRate) ? this.turnRate : 0) / 100 * 12;
 		const R = 24;
 		const x = -24 * Math.cos(degToRad(deg)) + R + 3;
 		return u$2`
@@ -21980,6 +21980,14 @@ canvas {
   position: relative;
 }
 
+/* Pixel mode: pin the canvas to the requested size. Chart.js writes its
+   measured size back inline, so a chart created in a hidden container would
+   otherwise keep the 48 px minimum it measured there. */
+:host(:not([fixedaspectratioscaling])) canvas {
+  width: var(--chart-width, 100%) !important;
+  height: var(--chart-height, auto) !important;
+}
+
 /* Scale slots - absolutely positioned at edges */
 slot[name="top-scale"],
 slot[name="bottom-scale"],
@@ -33779,25 +33787,37 @@ function formatXValue(value, mode, relativeToMs) {
 }
 //#endregion
 //#region src/charthelpers/label-threshold.ts
+function hasSize(target) {
+	const { width, height } = target.getBoundingClientRect();
+	return width > 0 && height > 0;
+}
 /**
 * A chart installs its label plugins at creation time, from which side of
 * the label threshold the canvas is on. A resize that crosses the threshold
 * therefore needs a rebuild, while every other resize is an in-place
 * update. This owns the which-side state; the chart owns the decision.
 *
+* A chart created while its canvas had no size (in a hidden container) is
+* also rebuilt once, when the canvas first gets one: Chart.js keeps layout
+* state from that empty first pass, and a resize leaves the plot a pixel off
+* a chart created at its real size.
+*
 * @param target - The chart's canvas. A detached target is ignored: it has no size and no chart to serve.
 * @param isAboveThreshold - The chart's own test, read once now and after every resize.
-* @param callbacks - `rebuild` on a crossing, `update` otherwise.
+* @param callbacks - `rebuild` on a crossing or a first size, `update` otherwise.
 * @returns The observer, for the chart to disconnect in `disconnectedCallback`.
 */
 function observeLabelThreshold(target, isAboveThreshold, callbacks) {
 	let wasAbove = isAboveThreshold();
+	let hadSize = hasSize(target);
 	const observer = new ResizeObserver(() => {
 		if (!target.isConnected) return;
 		const isAbove = isAboveThreshold();
 		const crossed = isAbove !== wasAbove;
 		wasAbove = isAbove;
-		if (crossed) callbacks.rebuild();
+		const gotSize = !hadSize && hasSize(target);
+		hadSize = hasSize(target);
+		if (crossed || gotSize) callbacks.rebuild();
 		else callbacks.update();
 	});
 	observer.observe(target);
@@ -37138,14 +37158,17 @@ var ObcChartLineBase = class extends i$4 {
 	* NOTE: For non-threshold modes (solid, semitransparent), backgroundColor is already
 	* set correctly in buildDataset(). This method now only handles threshold gradients
 	* which require Chart.js scales to be available.
+	*
+	* @returns Whether it set gradients; they reach the drawn chart on its next update.
 	*/
 	applyFillModes() {
-		if (!this.chart || !this.canvasEl || !this.canvasEl.isConnected) return;
+		if (!this.chart || !this.canvasEl || !this.canvasEl.isConnected) return false;
 		const chart = this.chart;
 		const ctx = chart.ctx;
-		if (!ctx) return;
+		if (!ctx) return false;
 		const fill = this.shouldApplyFill();
-		if (this.getFillMode() !== "threshold" || !fill) return;
+		if (this.getFillMode() !== "threshold" || !fill) return false;
+		let applied = false;
 		chart.data.datasets.forEach((ds, _idx) => {
 			const dataset = ds;
 			if (dataset.fill === false || !fill) return;
@@ -37176,7 +37199,9 @@ var ObcChartLineBase = class extends i$4 {
 			const borderGradient = createGradient(.8, .8);
 			dataset.backgroundColor = fillGradient;
 			dataset.borderColor = borderGradient;
+			applied = true;
 		});
+		return applied;
 	}
 	updated(changed) {
 		super.updated(changed);
@@ -37693,7 +37718,7 @@ var ObcChartLineBase = class extends i$4 {
 			]
 		});
 		requestAnimationFrame(() => this.updateLegend());
-		this.applyFillModes();
+		if (this.applyFillModes()) this.chart.update("none");
 		this.syncSlottedScaleRanges();
 	}
 	updateChart() {
@@ -196094,6 +196119,7 @@ var ObcWatchFlat = class ObcWatchFlat extends i$4 {
 		this.rotAtZeroDeadband = ROT_ZERO_DEADBAND_PX;
 		this.rotDotAnimationFactor = 18;
 		this._legacyRotationsPerMinute = 0;
+		this._resizeController = new h(this, {});
 	}
 	/**
 	* @deprecated Use `rateOfTurnDegreesPerMinute` (and optionally
@@ -196110,6 +196136,15 @@ var ObcWatchFlat = class ObcWatchFlat extends i$4 {
 		if (this.rateOfTurnDegreesPerMinute != null) return this.rateOfTurnDegreesPerMinute / 360 * this.rotDotAnimationFactor;
 		return this._legacyRotationsPerMinute;
 	}
+	/**
+	* Rendered px per user-space unit; the labels divide by it to keep their
+	* on-screen size. 1:1 while the strip has no width yet (hidden, or not laid
+	* out), until the ResizeController re-renders it.
+	*/
+	scaleFor(viewBoxWidth) {
+		const scale = measureContainerPx(this).width / viewBoxWidth;
+		return Number.isFinite(scale) && scale > 0 ? scale : 1;
+	}
 	get totalHeight() {
 		return this.bottomBar ? this.height + this.ticksHeight : this.height;
 	}
@@ -196293,6 +196328,10 @@ var ObcWatchFlat = class ObcWatchFlat extends i$4 {
           </g>
         ` : A;
 	}
+	firstUpdated(changed) {
+		super.firstUpdated(changed);
+		observeInnerBox(this._resizeController, this.renderRoot);
+	}
 	updated(changed) {
 		super.updated(changed);
 		const el = this.rotType ? this.renderRoot.querySelector("#rot-spinner") : null;
@@ -196315,7 +196354,7 @@ var ObcWatchFlat = class ObcWatchFlat extends i$4 {
 		const width = (this.width / 2 + this.padding) * 2;
 		const th = this.totalHeight;
 		const viewBox = `-${width / 2} -${th / 2} ${width} ${th}`;
-		const scale = this.clientWidth / width;
+		const scale = this.scaleFor(width);
 		const contentOffsetY = this.bottomBar ? -this.ticksHeight / 2 : 0;
 		return b`
       <svg