Skip to content

Add button for adding device panel vertically into view panel#2883

Open
k311093 wants to merge 1 commit into
google:mainfrom
k311093:vertical
Open

Add button for adding device panel vertically into view panel#2883
k311093 wants to merge 1 commit into
google:mainfrom
k311093:vertical

Conversation

@k311093

@k311093 k311093 commented Jul 22, 2026

Copy link
Copy Markdown
Collaborator

In the multiple device scanerio with landscape device screen, stacking device panel horizontally is not a good experience to use. (it need to scroll page right side to see the device).

Add a toggle button to adding device panel vertically to support this case.

b/534778982

@k311093 k311093 added the kokoro:run Run e2e tests. label Jul 22, 2026
@GoogleCuttlefishTesterBot GoogleCuttlefishTesterBot removed the kokoro:run Run e2e tests. label Jul 22, 2026
@k311093 k311093 added the kokoro:run Run e2e tests. label Jul 23, 2026
@k311093
k311093 requested review from 0405ysj and ikicha July 23, 2026 01:43
@k311093
k311093 marked this pull request as ready for review July 23, 2026 01:43
@GoogleCuttlefishTesterBot GoogleCuttlefishTesterBot removed the kokoro:run Run e2e tests. label Jul 23, 2026
Comment thread frontend/src/operator/webui/src/app/app.component.html

@0405ysj 0405ysj left a comment

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I'm not certain if I'm the right person to review, as I don't have much experience on Angular.

: -item.w;

item.x = lastMaxX + item.w * 2 <= this.cols ? lastMaxX + item.w : 0;
item.y = lastMaxX + item.h * 2 <= this.cols ? lastMaxY : lastMaxY + item.h;

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

lastMaxY instead of lastMaxX?

Copy link
Copy Markdown
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

lastMaxX was right because the statement was for checking new item exceeds view panel width, but item.h was not right. Changed to item.w.

Comment on lines +241 to +244
const lastMaxY =
layout.length !== 0
? Math.max(...layout.map(obj => obj.y + obj.h))
: 0;

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I'm not certain what lastMaxX or lastMaxY are representing.

My naive thought around x,y,w,h is:

  • left: x
  • right: x+w
  • top: y
  • bottom: y+h

However I can see y+h & y is used together for calculating lastMaxY.

Copy link
Copy Markdown
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

lastMaxY for upper if statement was for Y coordinate for new item.
For lastMaxY in the else block it is for the last item's coordination for calculate the place of new item.

Changed names for describe it's usage more.

? Math.max(...lastRowLayout.map(obj => obj.x))
: -item.w;

item.x = lastMaxX + item.w * 2 <= this.cols ? lastMaxX + item.w : 0;

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

As following comment of the above comment, I don't understand how the calculation item.w * 2 is coming from.

I can only make a rough guess that it could be implemented with only assuming homogeneous(e.g. 2 identical CF phone instances) scenario. But probably heterogeneous scenario(e.g. 1 CF phone + 1 CF tablet) should be considered too?

URL for above comment: https://github.com/google/android-cuttlefish/pull/2883/changes#r3635124511

Copy link
Copy Markdown
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

* 2 is coming from zoom ratio (0.5) of initially added device.

Changed to use the constant to calculate it.


const updatedLayout = Array.from(layoutById, ([, value]) => value);

if (this.displaysService.addVertically$.value) {

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Why only vertical display needs sort?

@k311093
k311093 force-pushed the vertical branch 3 times, most recently from aea5e03 to 4f270eb Compare July 23, 2026 07:25
In the multiple device scanerio with landscape device screen,
stacking device panel horizontally is not a good experience to use.
(it need to scroll page right side to see the device).

Add a toggle button to adding device panel vertically to support this
case.

b/534778982
: -item.w;

item.x = lastItemX + item.w * (1.0 / this.defaultDisplayZoom) <= this.cols ? lastItemX + item.w : 0;
item.y = lastItemX + item.w * (1.0 / this.defaultDisplayZoom) <= this.cols ? lastItemY : lastItemY + item.h;

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

For better visibility, please consider to remove ternary operator with complicated/duplicated condition.

Or, what about the code looks like below?

maxBottom= ...
if (this.displaysService.addVertically$.value) {
  stackVertical = true
} else {
  maxRight = ...
  stackVertical = maxRight + item.w * (1.0 / this.defaultDisplayZoom) <= this.col
}
if (stackVertical) {
  item.x = 0
  item.y = maxBottom + item.h
} else {
  item.x = maxRight + item.w
  item.y = maxBottom
}

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants