@oicl/openbridge-webcomponents 2.0.0-next.127 → 2.0.0-next.128

package/bundle/openbridge-webcomponents.bundle.js

@@ -20349,11 +20349,36 @@ canvas {
   display: block;
 }
 
-/* Fixed aspect ratio scaling mode: canvas fills wrapper */
+/* Fixed aspect ratio scaling mode: the canvas container must be a definite
+   box, not shrink-to-fit. The wrapper is a column flex with align-items:
+   center, so the container would otherwise size to the canvas' max-content
+   width — and a canvas with an auto width and a definite height resolves
+   against its intrinsic 2:1 ratio, capping the chart at height * 2. */
 
-:host([fixedaspectratioscaling]) canvas {
+:host([fixedaspectratioscaling]) .canvas-and-slots-container {
   width: 100%;
-  height: var(--chart-height, auto);
+}
+
+/* Fixed aspect ratio scaling mode: canvas fills wrapper.
+
+   \`!important\` is load-bearing, not a shortcut. Chart.js measures the
+   container with getBoundingClientRect() — which is scaled by any ancestor
+   CSS \`zoom\` — and writes that number straight back as an inline
+   \`style="width/height: Npx"\`. The browser then scales that CSS-pixel value
+   by the same zoom a second time, so the canvas lands at zoom² of its cell
+   (64% at zoom 0.8, 156% at zoom 1.25). Overriding the inline style pins the
+   canvas to the box the layout actually gave it at every zoom level; Chart.js
+   keeps using its own measurement for the drawing buffer, which only affects
+   raster resolution, not geometry.
+
+   No auto margins here either: Chart.js subtracts the canvas' resolved
+   margins from the container width, so centring it with \`margin: 0 auto\`
+   makes the leftover space permanently unavailable to it. */
+
+:host([fixedaspectratioscaling]) canvas {
+  width: 100% !important;
+  height: var(--chart-height, auto) !important;
+  margin: 0;
 }
 `;
 const chartDebugStyle = i$7`* {
@@ -35266,6 +35291,11 @@ const LINE_GRAPH_RECREATE_PROP_NAMES = [
   "height",
   "fixedAspectRatioScaling"
 ];
+const LINE_GRAPH_DIMENSION_PROP_NAMES = [
+  "width",
+  "height",
+  "fixedAspectRatioScaling"
+];
 const _ObcChartLineBase = class _ObcChartLineBase extends i$4 {
   constructor() {
     super(...arguments);
@@ -35798,7 +35828,7 @@ const _ObcChartLineBase = class _ObcChartLineBase extends i$4 {
    * This is the main coordination function
    */
   syncScalesAndChart() {
-    if (this.isUpdatingScales) return;
+    if (this.isUpdatingScales) return false;
     this.isUpdatingScales = true;
     try {
       const padding = this.calculatePaddingFromScales();
@@ -35812,13 +35842,14 @@ const _ObcChartLineBase = class _ObcChartLineBase extends i$4 {
           effectiveWidth,
           effectiveHeight
         });
-        return;
+        return false;
       }
       this.updateScaleProperties(padding);
       if (this.chart) {
         this.chart.destroy();
       }
       this.createChart();
+      return true;
     } finally {
       this.isUpdatingScales = false;
     }
@@ -36053,6 +36084,9 @@ const _ObcChartLineBase = class _ObcChartLineBase extends i$4 {
     if (!this.hasAnyChanged(changed, LINE_GRAPH_WATCHED_PROP_NAMES)) {
       return;
     }
+    if (this.hasAnyChanged(changed, LINE_GRAPH_DIMENSION_PROP_NAMES)) {
+      if (this.updateComputedDimensions()) return;
+    }
     if (changed.has("hasLabelPadding") && this.hasExternalScales()) {
       this.syncScalesAndChart();
       return;
@@ -36138,19 +36172,27 @@ const _ObcChartLineBase = class _ObcChartLineBase extends i$4 {
     this.aspectRatioResizeObserver.observe(wrapper);
   }
   /**
-   * Calculate actual dimensions based on parent width and aspect ratio.
-   * Only used when fixedAspectRatioScaling is true.
+   * Refresh `computedWidth` / `computedHeight`, the derived pixel size the
+   * chart and its slotted scales are laid out from.
+   *
+   * In pixel mode they simply mirror `width` / `height`. Only in
+   * `fixedAspectRatioScaling` mode are they derived — from the wrapper's
+   * measured width and the aspect ratio the `width` / `height` pair defines —
+   * and only then can this rebuild the chart.
+   *
+   * @returns `true` when the change was significant enough that the chart was
+   * rebuilt here, so the caller must not rebuild it a second time.
    */
   updateComputedDimensions() {
     if (!this.fixedAspectRatioScaling) {
       this.computedWidth = this.width;
       this.computedHeight = this.height;
-      return;
+      return false;
     }
     const wrapper = this.renderRoot.querySelector(".wrapper");
-    if (!wrapper) return;
+    if (!wrapper) return false;
     const parentWidth = wrapper.clientWidth;
-    if (parentWidth <= 0) return;
+    if (parentWidth <= 0) return false;
     const aspectRatio = this.width / this.height;
     const newWidth = parentWidth;
     const newHeight = Math.round(parentWidth / aspectRatio);
@@ -36158,12 +36200,14 @@ const _ObcChartLineBase = class _ObcChartLineBase extends i$4 {
       this.computedWidth = newWidth;
       this.computedHeight = newHeight;
       if (this.hasExternalScales()) {
-        this.syncScalesAndChart();
+        return this.syncScalesAndChart();
       } else if (this.chart) {
         this.chart.destroy();
         this.createChart();
+        return true;
       }
     }
+    return false;
   }
   /**
    * Get the effective width for chart rendering.