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

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

@@ -5,6 +5,14 @@ import {Tickmark, TickmarkType} from '../watch/tickmark.js';
 import {arrow, ArrowStyle} from './arrow.js';
 import {AdviceState, AngleAdvice, AngleAdviceRaw} from '../watch/advice.js';
 import {ResizeController} from '@lit-labs/observers/resize-controller.js';
+import {
+  applyPinnedHostSize,
+  computeRadialFrame,
+  measureContainerPx,
+  NORTH_ARROW_WIDTH_PX,
+  NSWE_LABEL_WIDTH_PX,
+  type RadialFrame,
+} from '../../svghelpers/radial-frame.js';
 import {WatchCircleType} from '../watch/watch.js';
 import {SetpointBundle} from '../../svghelpers/setpoint-bundle.js';
 import {Priority} from '../types.js';
@@ -58,6 +66,15 @@ export class ObcHeading extends LitElement {
   @property({type: Boolean}) showLabels: boolean = false;
   /** When true, labels and north arrow are placed inside the outer ring. */
   @property({type: Boolean}) tickmarksInside: 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 _headingSp = new SetpointBundle({
     angularWraparound: true,
@@ -88,18 +105,30 @@ export class ObcHeading extends LitElement {
   // function is called on resize of the element
   private _resizeController = new ResizeController(this, {});
 
-  private getPadding() {
-    const size = Math.min(this.clientHeight, this.clientWidth);
-    const deltaWidth = 512 - size;
-    const steps = deltaWidth / 128;
-    let deltaPadding;
-    if (deltaWidth > 0) {
-      deltaPadding = steps * 48;
-    } else {
-      deltaPadding = steps * 6;
+  /**
+   * Pixel cost of the outside decor: the always-rendered north-arrow glyph
+   * plus, only while shown, the NSWE labels (both keep a constant on-screen
+   * size via `1/scale` terms). Feeds the frame's width-aware reserve,
+   * replacing the former empirical `72 + delta(clientSize)` padding.
+   */
+  private getOutsideDecorPx(): number {
+    if (this.tickmarksInside) {
+      return 0;
     }
+    return NORTH_ARROW_WIDTH_PX + (this.showLabels ? NSWE_LABEL_WIDTH_PX : 0);
+  }
 
-    return 72 + deltaPadding;
+  /** Whether the host size styles were set by applyPinnedHostSize. */
+  private _hostSizePinned = false;
+  private _frame: RadialFrame | undefined;
+
+  override updated(changed: PropertyValues): void {
+    super.updated(changed);
+    this._hostSizePinned = applyPinnedHostSize(
+      this,
+      this._frame,
+      this._hostSizePinned
+    );
   }
 
   private get angleAdviceRaw(): AngleAdviceRaw[] {
@@ -140,22 +169,27 @@ export class ObcHeading extends LitElement {
       {angle: 270, type: TickmarkType.main},
     ];
 
-    const padding = this.getPadding();
-    const width = (176 + padding) * 2;
-    const viewBox = `-${width / 2} -${width / 2} ${width} ${width}`;
+    const frame = computeRadialFrame({
+      basePadding: 72,
+      labelWidthPx: this.getOutsideDecorPx(),
+      containerPx: measureContainerPx(this),
+      faceDiameter: this.faceDiameter,
+    });
+    this._frame = frame;
+    const viewBox = frame.viewBox;
 
     return html`
       <div class="container">
         <obc-watch
           .touching=${this.touching}
-          .padding=${padding}
+          .arcFrame=${frame}
           .advices=${this.angleAdviceRaw}
           .tickmarks=${tickmarks}
           .watchCircleType=${WatchCircleType.single}
-          .showLabels=${this.showLabels}
+          .showLabels=${this.showLabels && !frame.labelsHidden}
           .tickmarksInside=${this.tickmarksInside}
           .crosshairEnabled=${true}
-          .northArrow=${true}
+          .northArrow=${!frame.labelsHidden}
           .angleSetpoint=${this.headingSetpoint ?? undefined}
           .newAngleSetpoint=${this.newHeadingSetpoint}
           .atAngleSetpoint=${this._headingSp.computeAtSetpoint(this.heading)}

package/src/navigation-instruments/indicator-graph/indicator-graph.ts

@@ -26,11 +26,11 @@ export interface ObcIndicatorGraphLayout {
  * @element obc-indicator-graph
  * @description A mini graph component
  *
- * @property {Array} data - The data to display in the graph, first array is the x values, second array is the y values
  * @beta
  */
 @customElement('obc-indicator-graph')
 export class ObcIndicatorGraph extends LitElement {
+  /** The data to display in the graph, first array is the x values, second array is the y values */
   @property({type: Array})
   data: [number[], number[]] = [[], []];
 

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({