fix(ui): keep diagnostic stop clear of Logo skip

2026-09-06 00:45:44 +08:00
parent 84fa739ddd
commit f2a948f059
4 changed files with 74 additions and 6 deletions
@@ -6,7 +6,7 @@ import type { NativeHost } from '../../framework/config/sources/native-settings.
 import type { PageModel } from '../../framework/presentation/ui-contracts.ts';
 import { createLocalLoginHost, type LocalLoginHost } from './local-login-host.ts';
 import type { LocalLoginEvidence } from './local-login-transport.ts';
-import { CocosLocalLoginView, CocosLogoCountdownView, createLogoCountdown, createAssetLoadTask, createCocosFrameScheduler, requireNode } from './local-login-view.ts';
+import { CocosLocalLoginView, CocosLogoCountdownView, createLogoCountdown, createAssetLoadTask, createCocosFrameScheduler, positionDiagnosticStopButtonBelow, requireNode } from './local-login-view.ts';

 const { ccclass, property } = _decorator;

@@ -57,7 +57,9 @@ export class LocalPlatformLogin extends Component {
      requireNode(logo, 'group-32').active = false;
      const countdownLabels = logo.getComponentsInChildren(Label).filter(label => label.node.name === 'Spirit3104');
      if (countdownLabels.length !== 1) throw new Error('Logo requires exactly one Spirit3104 Label');
-      this.countdownView = new CocosLogoCountdownView(requireNode(logo, 'group-1/Spirit3103'), countdownLabels[0].node,
+      const logoButton = requireNode(logo, 'group-1/Spirit3103');
+      positionDiagnosticStopButtonBelow(stopButton, logoButton);
+      this.countdownView = new CocosLogoCountdownView(logoButton, countdownLabels[0].node,
        () => this.countdown?.skip());
      this.countdown = createLogoCountdown({ now: () => performance.now(),
        schedule: (callback, ms) => {
@@ -8,6 +8,31 @@ interface ViewReferences {

 export interface LogoCountdownState { readonly visible: boolean; readonly text: string; }

+const DIAGNOSTIC_STOP_GAP = 12;
+
+/** Keeps the scene diagnostic control clear of the native Logo click region. */
+export function positionDiagnosticStopButtonBelow(stopButton: Node, logoButton: Node): void {
+  const stopTransform = stopButton.getComponent(UITransform);
+  const logoTransform = logoButton.getComponent(UITransform);
+  const stopParentTransform = stopButton.parent?.getComponent(UITransform);
+  if (!stopTransform || !logoTransform || !stopParentTransform) {
+    throw new Error('Diagnostic stop layout requires native UITransform bindings');
+  }
+  const widget = stopButton.getComponent(Widget);
+  if (widget) {
+    widget.updateAlignment();
+    widget.enabled = false;
+  }
+  const logoBottom = logoTransform.convertToWorldSpaceAR(
+    new Vec3((0.5 - logoTransform.anchorX) * logoTransform.width, -logoTransform.anchorY * logoTransform.height, 0),
+  );
+  const bottomInStopParent = stopParentTransform.convertToNodeSpaceAR(logoBottom);
+  const current = stopButton.position;
+  stopButton.setPosition(new Vec3(current.x,
+    bottomInStopParent.y - DIAGNOSTIC_STOP_GAP - (1 - stopTransform.anchorY) * stopTransform.height,
+    current.z));
+}
+
 /** Native input and measured label layout, independent of serialized label parentage. */
 export class CocosLogoCountdownView {
  private readonly label: Label;
@@ -141,6 +141,30 @@ test('Logo native binding measures label around button center and releases its t
  button.emit('touch-end'); assert.equal(clicks, 1);
  view.dispose(); assert.equal(button.listenerCount('touch-end'), 0); assert.equal(button.active, false);
 });
+
+test('diagnostic stop button is placed below Logo across different parent coordinates without changing its right-side x', () => {
+  const { positionDiagnosticStopButtonBelow } = load();
+  assert.equal(typeof positionDiagnosticStopButtonBelow, 'function');
+  const logo = new Node('Spirit3103'), logoParent = new Node('logo-parent');
+  const stop = new Node('StopButton'), canvas = new Node('Canvas');
+  logo.parent = logoParent; stop.parent = canvas; stop.position = new Vec3(665, 310, 7);
+  const logoTransform = new UITransform();
+  Object.assign(logoTransform, { width: 208, height: 59, anchorX: 0.5, anchorY: 0.5 });
+  logoTransform.convertToWorldSpaceAR = value => new Vec3(value.x + 671.37, value.y + 311.5, value.z);
+  const stopTransform = new UITransform();
+  Object.assign(stopTransform, { width: 220, height: 64, anchorX: 0.5, anchorY: 0.5 });
+  const canvasTransform = new UITransform();
+  canvasTransform.convertToNodeSpaceAR = value => new Vec3(value.x - 100, value.y - 40, value.z);
+  logo.components.set(UITransform, logoTransform); stop.components.set(UITransform, stopTransform);
+  canvas.components.set(UITransform, canvasTransform);
+  const widget = new Widget(); stop.components.set(Widget, widget);
+
+  positionDiagnosticStopButtonBelow(stop, logo);
+
+  assert.equal(widget.enabled, false, 'runtime position must not be overwritten by the native Widget');
+  assert.equal(stop.position.x, 665); assert.equal(stop.position.z, 7);
+  assert.equal(stop.position.y, 198, 'button top is 12 px below the logo bottom in Canvas coordinates');
+});
 function fixture() {
  const refs = { loadingRoot: new Node(), loginRoot: new Node(), resultRoot: new Node(),
    statusOverlay: new Node(), statusLabel: new Label(), resultLabel: new Label() };
@@ -321,7 +345,10 @@ test('minimum display ignores an early timer wake and cancellation clears its re
  } });
  async function started(emitDraw = true) {
    const component = new exports.LocalPlatformLogin(); const f = fixture();
-    Object.assign(component, f.refs, { stopButton: new Node(), loadingPrefab: {}, loginPrefab: {} });
+    const stopButton = new Node('StopButton'), canvas = new Node('Canvas');
+    stopButton.parent = canvas; stopButton.components.set(UITransform, new UITransform());
+    canvas.components.set(UITransform, new UITransform());
+    Object.assign(component, f.refs, { stopButton, loadingPrefab: {}, loginPrefab: {} });
    const logo = new Node('Layer1_Logo'); const group = new Node('group-1');
    const bar = new Node('Spirit254'); bar.components.set(ProgressBar, new ProgressBar());
    const button = new Node('Spirit3103'), text = new Node('Spirit3104');