@oicl/openbridge-webcomponents-full-bundle 2.0.0-next.102 → 2.0.0-next.103

package/src/navigation-instruments/rudder/rudder.stories.ts

@@ -1,7 +1,13 @@
 import type {Meta, StoryObj} from '@storybook/web-components-vite';
 import {ObcRudder, ObcRudderVariant} from './rudder.js';
 import './rudder.js';
-import {widthDecorator} from '../../storybook-util.js';
+import {html} from 'lit';
+import {
+  playgroundColumn,
+  resizableStoryBox,
+  storyHint,
+  widthDecorator,
+} from '../../storybook-util.js';
 import {TickmarkStyle} from '../watch/tickmark.js';
 import {InstrumentState, Priority} from '../types.js';
 const meta: Meta<typeof ObcRudder> = {
@@ -20,6 +26,11 @@ const meta: Meta<typeof ObcRudder> = {
   },
   argTypes: {
     width: {control: {type: 'range', min: 32, max: 1028, step: 1}},
+    faceDiameter: {
+      control: {type: 'range', min: 100, max: 600, step: 10},
+      description:
+        'Pins the outer-ring diameter in px (fixed intrinsic size, equal circumference across instruments). Clear to return to fill-the-container sizing.',
+    },
     angle: {control: {type: 'range', min: -90, max: 90, step: 1}},
     maxAngle: {control: {type: 'range', min: 2, max: 90, step: 1}},
     setpoint: {control: {type: 'range', min: -90, max: 90, step: 1}},
@@ -72,3 +83,74 @@ export const ZoomedInNarrow: Story = {
     showLabels: true,
   },
 };
+
+type SizingPlaygroundArgs = Partial<ObcRudder> & {
+  lockFaceDiameter?: boolean;
+};
+
+/**
+ * Interactive sizing playground: drag the dashed box's bottom-right corner to
+ * resize it. The first rudder is pinned to a fixed intrinsic size by the
+ * `faceDiameter` control (its box is wider than tall, matching the 40% top
+ * clip), the second adapts to the remaining flex space, and the third is a
+ * zoomed narrow arc (`zoomToFitArc`) showing that the reserve composes with
+ * zoom (issue #1021). Enable `lockFaceDiameter` to pin all three to the same
+ * circumference. Related: *Sizing Playground* stories under Building
+ * Blocks/Watch, Building Blocks/Instrument Radial and Instruments/Gauge
+ * Radial.
+ */
+export const SizingPlayground: StoryObj<SizingPlaygroundArgs> = {
+  name: 'Sizing Playground — FaceDiameter + Resizable (Manual)',
+  tags: ['skip-test'],
+  parameters: {widthDecorator: false},
+  args: {
+    faceDiameter: 260,
+    lockFaceDiameter: false,
+  },
+  argTypes: {
+    lockFaceDiameter: {
+      control: 'boolean',
+      description:
+        'Apply faceDiameter to every instance (equal circumference) instead of only the first.',
+    },
+  },
+  render: (args) => {
+    const instances = [
+      {label: 'half circle', maxAngle: 45, zoom: false},
+      {label: 'half circle', maxAngle: 45, zoom: false},
+      {label: 'zoomed ±20°', maxAngle: 20, zoom: true},
+    ];
+    const fd = (index: number) =>
+      index === 0 || args.lockFaceDiameter ? args.faceDiameter : undefined;
+    const caption = (index: number, label: string) =>
+      fd(index) !== undefined
+        ? `${label} — pinned ${fd(index)}px`
+        : `${label} — adaptive (flex)`;
+    return html`
+      ${storyHint(
+        'Drag the bottom-right corner of the dashed box to resize it. The first rudder is pinned by the faceDiameter control; the second and the zoomed narrow arc adapt to the remaining flex space. Enable lockFaceDiameter to pin all three to the same circumference.'
+      )}
+      ${resizableStoryBox(
+        html`
+          ${instances.map((g, index) =>
+            playgroundColumn(
+              caption(index, g.label),
+              html`
+                <obc-rudder
+                  .angle=${15}
+                  .setpoint=${30}
+                  .maxAngle=${g.maxAngle}
+                  .zoomToFitArc=${g.zoom}
+                  .showLabels=${true}
+                  .faceDiameter=${fd(index)}
+                ></obc-rudder>
+              `,
+              {pinned: fd(index) !== undefined}
+            )
+          )}
+        `,
+        {width: 760, height: 280}
+      )}
+    `;
+  },
+};

package/src/navigation-instruments/rudder/rudder.ts

@@ -1,20 +1,21 @@
-import {LitElement, css, html, nothing, svg} from 'lit';
+import {LitElement, PropertyValues, css, html, nothing, svg} from 'lit';
 import {property} from 'lit/decorators.js';
+import {ResizeController} from '@lit-labs/observers/resize-controller.js';
 import '../watch/watch.js';
 import {Tickmark, TickmarkStyle, TickmarkType} from '../watch/tickmark.js';
-import {
-  OUTER_RING_RADIUS,
-  WatchCircleType,
-  innerRingRadiusFor,
-} from '../watch/watch.js';
+import {WatchCircleType, innerRingRadiusFor} from '../watch/watch.js';
 import {InstrumentState, Priority} from '../types.js';
 import {SetpointMixin} from '../../svghelpers/setpoint-mixin.js';
 import {AdviceState, AngleAdvice, AngleAdviceRaw} from '../watch/advice.js';
 import {customElement} from '../../decorator.js';
 import {
-  computeZoomToFitArcFrame,
-  type ZoomToFitArcFrame,
-} from '../../svghelpers/arc-frame.js';
+  applyPinnedHostSize,
+  computeRadialFrame,
+  estimateLabelWidthPx,
+  measureContainerPx,
+  observeInnerBox,
+  type RadialFrame,
+} from '../../svghelpers/radial-frame.js';
 
 export enum ObcRudderVariant {
   Bar = 'bar',
@@ -95,9 +96,37 @@ export class ObcRudder extends SetpointMixin(LitElement) {
     TickmarkStyle.regular;
   @property({type: Array, attribute: false}) advices: AngleAdvice[] = [];
   @property({type: Boolean}) zoomToFitArc: boolean = false;
+  /**
+   * Outer-ring diameter in CSS pixels. When set, the instrument renders at a
+   * fixed intrinsic size derived from the ring, arc shape and label reserve —
+   * so instruments sharing the same value have identical ring circumference
+   * regardless of label width or arc extent (like obc-donut-chart's
+   * fixedHeight). When unset (default), the instrument fills its container.
+   */
+  @property({type: Number, attribute: 'face-diameter'})
+  faceDiameter: number | undefined;
 
   private _radiusOffset = 0;
-  private _arcFrame: ZoomToFitArcFrame | undefined;
+  private _frame: RadialFrame | undefined;
+
+  /** Whether the host size styles were set by applyPinnedHostSize. */
+  private _hostSizePinned = false;
+
+  private _resizeController = new ResizeController(this, {});
+
+  override firstUpdated(changed: PropertyValues): void {
+    super.firstUpdated(changed);
+    observeInnerBox(this._resizeController, this.renderRoot);
+  }
+
+  override updated(changed: PropertyValues): void {
+    super.updated(changed);
+    this._hostSizePinned = applyPinnedHostSize(
+      this,
+      this._frame,
+      this._hostSizePinned
+    );
+  }
 
   private get _needleTransform(): string {
     const rOff = this._radiusOffset;
@@ -243,33 +272,32 @@ export class ObcRudder extends SetpointMixin(LitElement) {
       };
     });
 
-    let overlayViewBox: string;
-    if (this.zoomToFitArc) {
-      const ext = 48;
-      const targetSize = (176 + ext) * 2;
-      const frame = computeZoomToFitArcFrame({
-        areas,
-        outerRadius: OUTER_RING_RADIUS,
-        innerRadius: innerRingRadiusFor(WatchCircleType.double),
-        extension: ext,
-        targetSize,
-      });
-      overlayViewBox = frame.viewBox;
-      this._radiusOffset = frame.radiusOffset;
-      this._arcFrame = frame;
-    } else {
-      overlayViewBox = '-224 -44.8 448 268.8';
-      this._radiusOffset = 0;
-      this._arcFrame = undefined;
-    }
+    const frame = computeRadialFrame({
+      basePadding: 48,
+      labelWidthPx: this.tickmarksInside
+        ? 0
+        : estimateLabelWidthPx(tickmarks.map((t) => t.text)),
+      clips: this.zoomToFitArc
+        ? undefined
+        : {top: 40, bottom: 0, left: 0, right: 0},
+      containerPx: measureContainerPx(this),
+      faceDiameter: this.faceDiameter,
+      zoomToFitArc: this.zoomToFitArc,
+      areas,
+      innerRadius: innerRingRadiusFor(WatchCircleType.double),
+    });
+    this._radiusOffset = frame.radiusOffset;
+    this._frame = frame;
+    const shownTickmarks = frame.labelsHidden
+      ? tickmarks.map((t) => ({...t, text: undefined}))
+      : tickmarks;
+    const overlayViewBox = frame.viewBox;
 
     return html`
       <div class="container">
         <obc-watch
           .touching=${this.touching}
-          .clipTop=${this.zoomToFitArc ? 0 : 40}
-          .zoomToFitArc=${this.zoomToFitArc}
-          .arcFrame=${this._arcFrame}
+          .arcFrame=${frame}
           .areas=${areas}
           .angleSetpoint=${setpointAngle}
           .newAngleSetpoint=${this.newSetpoint !== undefined
@@ -279,8 +307,7 @@ export class ObcRudder extends SetpointMixin(LitElement) {
           .angleSetpointAtZeroDeadband=${this.setpointAtZeroDeadband}
           .setpointOverride=${this.setpointOverride}
           .animateSetpoint=${this.animateSetpoint}
-          .padding=${48}
-          .tickmarks=${tickmarks}
+          .tickmarks=${shownTickmarks}
           .tickmarksInside=${this.tickmarksInside}
           .tickmarkStyle=${this.tickmarkStyle}
           .watchCircleType=${WatchCircleType.double}

package/src/navigation-instruments/speed-gauge/speed-gauge.stories.ts

@@ -1,7 +1,13 @@
 import type {Meta, StoryObj} from '@storybook/web-components-vite';
 import {ObcSpeedGauge, ObcSpeedGaugeNeedleType} from './speed-gauge.js';
 import './speed-gauge.js';
-import {widthDecorator} from '../../storybook-util.js';
+import {html} from 'lit';
+import {
+  playgroundColumn,
+  resizableStoryBox,
+  storyHint,
+  widthDecorator,
+} from '../../storybook-util.js';
 import {AdviceType} from '../watch/advice.js';
 import {TickmarkStyle} from '../watch/tickmark.js';
 import {Priority} from '../types.js';
@@ -33,6 +39,11 @@ const meta: Meta<typeof ObcSpeedGauge> = {
       options: Object.values(TickmarkStyle),
     },
     hasReadout: {control: 'boolean'},
+    faceDiameter: {
+      control: {type: 'range', min: 100, max: 600, step: 10},
+      description:
+        'Pins the outer-ring diameter in px (fixed intrinsic size, equal circumference across instruments). Clear to return to fill-the-container sizing.',
+    },
     label: {control: 'text'},
     unit: {control: 'text'},
     fractionDigits: {control: 'number'},
@@ -73,3 +84,85 @@ export const Readout: Story = {
     hasReadout: true,
   },
 };
+
+export const LabelRoomHighSpeed: Story = {
+  name: 'Label Room — 4-Digit Scale in A Short Cell (#1021)',
+  args: {
+    minSpeed: 0,
+    maxSpeed: 3600,
+    speed: 2400,
+    tickmarkInterval: 900,
+    showLabels: true,
+    hasReadout: true,
+    width: 600,
+    height: 220,
+  } as never,
+};
+
+type SizingPlaygroundArgs = Partial<ObcSpeedGauge> & {
+  lockFaceDiameter?: boolean;
+};
+
+/**
+ * Interactive sizing playground: drag the dashed box's bottom-right corner to
+ * resize it. The first gauge is pinned to a fixed intrinsic size by the
+ * `faceDiameter` control, while the second adapts to the remaining flex
+ * space, reserving room for its 4-digit labels adaptively (issue #1021).
+ * Enable `lockFaceDiameter` to pin both to the same circumference regardless
+ * of their label widths. Related: *Sizing Playground* stories under Building
+ * Blocks/Watch, Building Blocks/Instrument Radial and Instruments/Gauge
+ * Radial.
+ */
+export const SizingPlayground: StoryObj<SizingPlaygroundArgs> = {
+  name: 'Sizing Playground — FaceDiameter + Resizable (Manual)',
+  tags: ['skip-test'],
+  parameters: {widthDecorator: false},
+  args: {
+    faceDiameter: 220,
+    lockFaceDiameter: false,
+  },
+  argTypes: {
+    lockFaceDiameter: {
+      control: 'boolean',
+      description:
+        'Apply faceDiameter to every instance (equal circumference) instead of only the first.',
+    },
+  },
+  render: (args) => {
+    const instances = [
+      {label: '2-digit scale', max: 40, interval: 10},
+      {label: '4-digit scale', max: 3600, interval: 900},
+    ];
+    const fd = (index: number) =>
+      index === 0 || args.lockFaceDiameter ? args.faceDiameter : undefined;
+    const caption = (index: number, label: string) =>
+      fd(index) !== undefined
+        ? `${label} — pinned ${fd(index)}px`
+        : `${label} — adaptive (flex)`;
+    return html`
+      ${storyHint(
+        'Drag the bottom-right corner of the dashed box to resize it. The first gauge is pinned by the faceDiameter control; the second adapts to the remaining flex space. Enable lockFaceDiameter to pin both to the same circumference.'
+      )}
+      ${resizableStoryBox(
+        html`
+          ${instances.map((g, index) =>
+            playgroundColumn(
+              caption(index, g.label),
+              html`
+                <obc-speed-gauge
+                  .speed=${g.max * 0.6}
+                  .maxSpeed=${g.max}
+                  .tickmarkInterval=${g.interval}
+                  .showLabels=${true}
+                  .faceDiameter=${fd(index)}
+                ></obc-speed-gauge>
+              `,
+              {pinned: fd(index) !== undefined}
+            )
+          )}
+        `,
+        {width: 680, height: 340}
+      )}
+    `;
+  },
+};

package/src/navigation-instruments/speed-gauge/speed-gauge.ts

@@ -1,5 +1,14 @@
-import {LitElement, css, html, nothing, svg} from 'lit';
+import {LitElement, PropertyValues, css, html, nothing, svg} from 'lit';
 import {property} from 'lit/decorators.js';
+import {ResizeController} from '@lit-labs/observers/resize-controller.js';
+import {
+  applyPinnedHostSize,
+  computeRadialFrame,
+  estimateLabelWidthPx,
+  measureContainerPx,
+  observeInnerBox,
+  type RadialFrame,
+} from '../../svghelpers/radial-frame.js';
 import {Tickmark, TickmarkStyle, TickmarkType} from '../watch/tickmark.js';
 import {WatchCircleType} from '../watch/watch.js';
 import {AdviceType, AngleAdviceRaw, AdviceState} from '../watch/advice.js';
@@ -113,6 +122,36 @@ export class ObcSpeedGauge extends SetpointMixin(LitElement) {
   @property({type: String}) unit = 'KN';
   /** Number of fraction digits shown in the readout. Default `1`. */
   @property({type: Number}) fractionDigits = 1;
+  /**
+   * Outer-ring diameter in CSS pixels. When set, the instrument renders at a
+   * fixed intrinsic size derived from the ring, arc shape and label reserve —
+   * so instruments sharing the same value have identical ring circumference
+   * regardless of label width or arc extent (like obc-donut-chart's
+   * fixedHeight). When unset (default), the instrument fills its container.
+   */
+  @property({type: Number, attribute: 'face-diameter'})
+  faceDiameter: number | undefined;
+
+  private _frame: RadialFrame | undefined;
+
+  /** Whether the host size styles were set by applyPinnedHostSize. */
+  private _hostSizePinned = false;
+
+  private _resizeController = new ResizeController(this, {});
+
+  override firstUpdated(changed: PropertyValues): void {
+    super.firstUpdated(changed);
+    observeInnerBox(this._resizeController, this.renderRoot);
+  }
+
+  override updated(changed: PropertyValues): void {
+    super.updated(changed);
+    this._hostSizePinned = applyPinnedHostSize(
+      this,
+      this._frame,
+      this._hostSizePinned
+    );
+  }
 
   getAngle(v: number): number {
     return (v / this.maxSpeed) * (180 + 45) - 90;
@@ -134,6 +173,20 @@ export class ObcSpeedGauge extends SetpointMixin(LitElement) {
 
     const maxDigits = 1;
 
+    const tickmarks = this.tickmarks;
+    const frame = computeRadialFrame({
+      basePadding: 48,
+      labelWidthPx: this.tickmarksInside
+        ? 0
+        : estimateLabelWidthPx(tickmarks.map((t) => t.text)),
+      containerPx: measureContainerPx(this),
+      faceDiameter: this.faceDiameter,
+    });
+    this._frame = frame;
+    const shownTickmarks = frame.labelsHidden
+      ? tickmarks.map((t) => ({...t, text: undefined}))
+      : tickmarks;
+
     return html`
       <div class="container">
         <obc-watch
@@ -146,8 +199,8 @@ export class ObcSpeedGauge extends SetpointMixin(LitElement) {
           .angleSetpointAtZeroDeadband=${this.setpointAtZeroDeadband}
           .setpointOverride=${this.setpointOverride}
           .animateSetpoint=${this.animateSetpoint}
-          .padding=${48}
-          .tickmarks=${this.tickmarks}
+          .arcFrame=${frame}
+          .tickmarks=${shownTickmarks}
           .tickmarksInside=${this.tickmarksInside}
           .tickmarkStyle=${this.tickmarkStyle}
           .advices=${this._advices}
@@ -168,7 +221,7 @@ export class ObcSpeedGauge extends SetpointMixin(LitElement) {
             },
           ]}
         ></obc-watch>
-        <svg class="rudder" viewBox="-224 -224 448 448">${this.needle}</svg>
+        <svg class="rudder" viewBox=${frame.viewBox}>${this.needle}</svg>
         ${this.hasReadout
           ? html`
               ${renderInstrumentReadout({

package/src/navigation-instruments/watch/watch.stories.ts

@@ -6,7 +6,12 @@ import {
   WatchCircleType,
 } from './watch.js';
 import './watch.js';
-import {widthDecorator} from '../../storybook-util.js';
+import {
+  playgroundColumn,
+  resizableStoryBox,
+  storyHint,
+  widthDecorator,
+} from '../../storybook-util.js';
 import {AdviceState, AdviceType} from './advice.js';
 import {InstrumentState, Priority} from '../types.js';
 import {TickmarkType} from './tickmark.js';
@@ -70,6 +75,11 @@ Source of truth: \`packages/openbridge-webcomponents/src/navigation-instruments/
     },
     areas: {control: {type: 'object'}},
     padding: {control: {type: 'range', min: 0, max: 100, step: 1}},
+    faceDiameter: {
+      control: {type: 'range', min: 100, max: 600, step: 10},
+      description:
+        'Pins the outer-ring diameter in px (fixed intrinsic size, equal circumference across instruments). Clear to return to fill-the-container sizing.',
+    },
     vessels: {control: {type: 'object'}},
     windKnots: {control: {type: 'range', min: 0, max: 100, step: 1}},
     windFromDirectionDeg: {control: {type: 'range', min: 0, max: 360, step: 1}},
@@ -729,6 +739,135 @@ export const TickmarksTestInsideRotation: Story = {
   },
 };
 
+/**
+ * Regression test for label counter-scaling after a container resize: the
+ * wrapper starts at 400px and `play` shrinks it to 240px BEFORE the snapshot.
+ * The standalone watch host renders inline (no box), so its ResizeObserver
+ * only fires via the internal `<svg>` (`observeInnerBox`) — if that
+ * observation is lost, `--scale` stays at the 400px value and the labels
+ * shrink with the box (~7px on screen) instead of holding ~12px.
+ */
+export const CounterScaleAfterResize: Story = {
+  args: {
+    tickmarks: [
+      ...Array.from({length: 24}, (_, i) => ({
+        angle: i * 15,
+        type: TickmarkType.secondary,
+        text: `${i * 15}`,
+      })),
+    ],
+  },
+  parameters: {widthDecorator: false},
+  render: (args) => html`
+    <div id="counter-scale-wrap" style="width: 400px; height: 400px;">
+      <obc-watch .tickmarks=${args.tickmarks}></obc-watch>
+    </div>
+  `,
+  play: async ({canvasElement}) => {
+    const wrap = canvasElement.querySelector(
+      '#counter-scale-wrap'
+    ) as HTMLElement;
+    wrap.style.width = '240px';
+    wrap.style.height = '240px';
+    await new Promise((resolve) =>
+      requestAnimationFrame(() => requestAnimationFrame(resolve))
+    );
+    await wrap.querySelector('obc-watch')?.updateComplete;
+  },
+};
+
+type SizingPlaygroundArgs = Partial<ObcWatch> & {
+  lockFaceDiameter?: boolean;
+};
+
+/**
+ * Interactive sizing playground for the core renderer: drag the dashed box's
+ * bottom-right corner to resize it. The first watch (2-digit tick labels) is
+ * pinned to a fixed intrinsic size by the `faceDiameter` control, while the
+ * 4-digit watch and the 180° arc adapt to the remaining flex space, reserving
+ * label room adaptively (and hiding labels past the reserve cap in
+ * `svghelpers/radial-frame.ts`, issue #1021). Enable `lockFaceDiameter` to
+ * pin all three to the same circumference. Related: *Sizing Playground*
+ * stories under Building Blocks/Instrument Radial and Instruments/Gauge
+ * Radial.
+ */
+export const SizingPlayground: StoryObj<SizingPlaygroundArgs> = {
+  name: 'Sizing Playground — FaceDiameter + Resizable (Manual)',
+  tags: ['skip-test'],
+  parameters: {widthDecorator: false},
+  args: {
+    faceDiameter: 200,
+    lockFaceDiameter: false,
+  },
+  argTypes: {
+    lockFaceDiameter: {
+      control: 'boolean',
+      description:
+        'Apply faceDiameter to every instance (equal circumference) instead of only the first.',
+    },
+  },
+  render: (args) => {
+    const fullCircleTicks = (factor: number) =>
+      Array.from({length: 12}, (_, i) => ({
+        angle: i * 30,
+        type: TickmarkType.secondary,
+        text: `${i * 30 * factor}`,
+      }));
+    const instances = [
+      {label: '2-digit ticks', ticks: fullCircleTicks(1), areas: undefined},
+      {label: '4-digit ticks', ticks: fullCircleTicks(10), areas: undefined},
+      {
+        label: '180° arc',
+        ticks: Array.from({length: 7}, (_, i) => ({
+          angle: i * 30 - 90,
+          type: TickmarkType.secondary,
+          text: `${i * 30}`,
+        })),
+        areas: [
+          {
+            startAngle: -90,
+            endAngle: 90,
+            roundInsideCut: true,
+            roundOutsideCut: true,
+          },
+        ],
+      },
+    ];
+    const fd = (index: number) =>
+      index === 0 || args.lockFaceDiameter ? args.faceDiameter : undefined;
+    const caption = (index: number, label: string) =>
+      fd(index) !== undefined
+        ? `${label} — pinned ${fd(index)}px`
+        : `${label} — adaptive (flex)`;
+    return html`
+      ${storyHint(
+        'Drag the bottom-right corner of the dashed box to resize it. The first watch is pinned by the faceDiameter control; the 4-digit watch and the 180° arc adapt to the remaining flex space. Enable lockFaceDiameter to pin all three to the same circumference.'
+      )}
+      ${resizableStoryBox(
+        html`
+          ${instances.map((g, index) =>
+            playgroundColumn(
+              caption(index, g.label),
+              html`
+                <obc-watch
+                  .faceDiameter=${fd(index)}
+                  .tickmarks=${g.ticks}
+                  .areas=${g.areas ?? []}
+                  .watchCircleType=${g.areas
+                    ? WatchCircleType.double
+                    : WatchCircleType.single}
+                ></obc-watch>
+              `,
+              {pinned: fd(index) !== undefined}
+            )
+          )}
+        `,
+        {width: 760, height: 320}
+      )}
+    `;
+  },
+};
+
 /**
  * Side-by-side comparison of setpoint visual states for radial instruments.
  *