refactor: merge mark and action toolbars to the right side
Place the mark toolbar to the left of the action toolbar on the same row with an 8px gap, so the two button groups never overlap on tiny selections.
This commit is contained in:
@@ -111,14 +111,24 @@ const sizeLabel = computed(() => {
|
|||||||
return `${Math.round(rect.value.w)} × ${Math.round(rect.value.h)}`
|
return `${Math.round(rect.value.w)} × ${Math.round(rect.value.h)}`
|
||||||
})
|
})
|
||||||
|
|
||||||
|
const MARK_TOOLBAR_W = 190
|
||||||
|
const ACTION_TOOLBAR_W = 180
|
||||||
|
const TOOLBAR_GROUP_GAP = 8
|
||||||
|
|
||||||
const rightToolbarPos = computed(() => {
|
const rightToolbarPos = computed(() => {
|
||||||
if (!rect.value) return null
|
if (!rect.value) return null
|
||||||
return placeToolbar(rect.value, 180, 40, 'right')
|
return placeToolbar(rect.value, ACTION_TOOLBAR_W, 40, 'right')
|
||||||
})
|
})
|
||||||
|
|
||||||
const leftToolbarPos = computed(() => {
|
const leftToolbarPos = computed(() => {
|
||||||
if (!rect.value) return null
|
if (!rect.value || !rightToolbarPos.value) return null
|
||||||
return placeToolbar(rect.value, 190, 40, 'left')
|
// 标记组与操作组合并到右侧,紧贴在操作组左侧,中间保留间隔
|
||||||
|
const x = clamp(
|
||||||
|
rightToolbarPos.value.x - TOOLBAR_GROUP_GAP - MARK_TOOLBAR_W,
|
||||||
|
0,
|
||||||
|
props.width - MARK_TOOLBAR_W
|
||||||
|
)
|
||||||
|
return { x, y: rightToolbarPos.value.y }
|
||||||
})
|
})
|
||||||
|
|
||||||
const handles = computed(() => {
|
const handles = computed(() => {
|
||||||
|
|||||||
@@ -633,8 +633,11 @@ static id nativeOverlayKeyMonitor = nil;
|
|||||||
[_saveRemoteButton setFrame:NSMakeRect(baseX + (actionBtnSize + actionGap) * 3, btnY, actionBtnSize, actionBtnSize)];
|
[_saveRemoteButton setFrame:NSMakeRect(baseX + (actionBtnSize + actionGap) * 3, btnY, actionBtnSize, actionBtnSize)];
|
||||||
[_uploadButton setFrame:NSMakeRect(baseX + (actionBtnSize + actionGap) * 4, btnY, actionBtnSize, actionBtnSize)];
|
[_uploadButton setFrame:NSMakeRect(baseX + (actionBtnSize + actionGap) * 4, btnY, actionBtnSize, actionBtnSize)];
|
||||||
|
|
||||||
|
// Mark toolbar sits to the LEFT of the action toolbar (same row) with an
|
||||||
|
// 8px gap between the two groups, so they never overlap on tiny selections.
|
||||||
CGFloat markW = 170;
|
CGFloat markW = 170;
|
||||||
CGFloat markX = MAX(0, MIN(_selection.origin.x, self.bounds.size.width - markW));
|
CGFloat markGap = 8;
|
||||||
|
CGFloat markX = MAX(0, x - markGap - markW);
|
||||||
[_penButton setFrame:NSMakeRect(markX + 4, y + 4, 28, 28)];
|
[_penButton setFrame:NSMakeRect(markX + 4, y + 4, 28, 28)];
|
||||||
[_rectButton setFrame:NSMakeRect(markX + 36, y + 4, 28, 28)];
|
[_rectButton setFrame:NSMakeRect(markX + 36, y + 4, 28, 28)];
|
||||||
[_ellipseButton setFrame:NSMakeRect(markX + 68, y + 4, 28, 28)];
|
[_ellipseButton setFrame:NSMakeRect(markX + 68, y + 4, 28, 28)];
|
||||||
|
|||||||
Reference in New Issue
Block a user