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)}`
|
||||
})
|
||||
|
||||
const MARK_TOOLBAR_W = 190
|
||||
const ACTION_TOOLBAR_W = 180
|
||||
const TOOLBAR_GROUP_GAP = 8
|
||||
|
||||
const rightToolbarPos = computed(() => {
|
||||
if (!rect.value) return null
|
||||
return placeToolbar(rect.value, 180, 40, 'right')
|
||||
return placeToolbar(rect.value, ACTION_TOOLBAR_W, 40, 'right')
|
||||
})
|
||||
|
||||
const leftToolbarPos = computed(() => {
|
||||
if (!rect.value) return null
|
||||
return placeToolbar(rect.value, 190, 40, 'left')
|
||||
if (!rect.value || !rightToolbarPos.value) return null
|
||||
// 标记组与操作组合并到右侧,紧贴在操作组左侧,中间保留间隔
|
||||
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(() => {
|
||||
|
||||
Reference in New Issue
Block a user