| | |
|---|
| | | |
|---|
| | | const cityOptions = ref<OptionItem[]>([...DEFAULT_CITY_OPTIONS]) |
|---|
| | | const SERVER_REFRESH_DELAY_MS = 1000 |
|---|
| | | const VERTEX_HOVER_DELAY_MS = 1000 // 顶点悬浮提示延迟时间 |
|---|
| | | |
|---|
| | | function waitForServerRefreshDelay() { |
|---|
| | | return new Promise<void>((resolve) => { |
|---|
| | |
|---|
| | | if (fenceEditGuideHoverVertexIndex.value === hoveredVertexIndex) |
|---|
| | | return |
|---|
| | | clearFenceEditGuidePendingHover() |
|---|
| | | // 切到新顶点时保留当前提示，等新的 3 秒 hover 倒计时成功后再切换， |
|---|
| | | // 切到新顶点时保留当前提示，等新的 hover 倒计时成功后再切换， |
|---|
| | | // 避免出现“旧提示先消失，但新顶点计时没接上”的偶发现象。 |
|---|
| | | fenceEditGuideHoverVertexIndex.value = hoveredVertexIndex |
|---|
| | | fenceEditGuideHoverTimer = window.setTimeout(() => { |
|---|
| | |
|---|
| | | fenceEditGuideDisplayMode.value = 'hover' |
|---|
| | | fenceEditGuideHoverTimer = null |
|---|
| | | renderFenceEditGuide() |
|---|
| | | }, 3000) |
|---|
| | | }, VERTEX_HOVER_DELAY_MS) |
|---|
| | | } |
|---|
| | | |
|---|
| | | function renderFenceEditGuide() { |
|---|
| | |
|---|
| | | if (restrictedEditGuideHoverVertexIndex.value === hoveredVertexIndex) |
|---|
| | | return |
|---|
| | | clearRestrictedEditGuidePendingHover() |
|---|
| | | // 切到新顶点时保留当前提示，等新的 3 秒 hover 倒计时成功后再切换， |
|---|
| | | // 切到新顶点时保留当前提示，等新的 hover 倒计时成功后再切换， |
|---|
| | | // 避免出现“旧提示先消失，但新顶点计时没接上”的偶发现象。 |
|---|
| | | restrictedEditGuideHoverVertexIndex.value = hoveredVertexIndex |
|---|
| | | restrictedEditGuideHoverTimer = window.setTimeout(() => { |
|---|
| | |
|---|
| | | restrictedEditGuideDisplayMode.value = 'hover' |
|---|
| | | restrictedEditGuideHoverTimer = null |
|---|
| | | renderRestrictedEditGuide() |
|---|
| | | }, 3000) |
|---|
| | | }, VERTEX_HOVER_DELAY_MS) |
|---|
| | | } |
|---|
| | | |
|---|
| | | function renderRestrictedEditGuide() { |
|---|
| | |
|---|
| | | // hover 提示需要兼顾“顶点命中准确”和“轻微手抖 / 地图动画时不丢 hover 候选”： |
|---|
| | | // - 首次命中用较小半径，避免误判到邻近顶点； |
|---|
| | | // - 已经锁定候选顶点后，临时放宽半径，减少 3 秒倒计时被偶发抖动打断。 |
|---|
| | | const EDIT_GUIDE_HOVER_MATCH_DISTANCE_PX = 14 |
|---|
| | | const EDIT_GUIDE_HOVER_MATCH_DISTANCE_PX = 28 |
|---|
| | | const EDIT_GUIDE_HOVER_STICKY_DISTANCE_PX = 36 |
|---|
| | | // 地图使用了自定义 cursor 图片，CSS hotspot 当前配置是 `6 2`； |
|---|
| | | // 视觉上的“指针中心/尖端”和 event.pixel 指向的真实热点不完全重合， |
|---|
| | | // 所以 hover 命中时同时兼容原始像素点与补偿后的像素点，减少白色顶点中心难命中的问题。 |
|---|
| | | const EDIT_GUIDE_CURSOR_HOTSPOT_X = 6 |
|---|
| | | const EDIT_GUIDE_CURSOR_HOTSPOT_Y = 2 |
|---|
| | | const EDIT_GUIDE_CURSOR_VISUAL_ANCHOR_X = 14 |
|---|
| | | const EDIT_GUIDE_CURSOR_VISUAL_ANCHOR_Y = 14 |
|---|
| | | const EDIT_GUIDE_CURSOR_VISUAL_ANCHOR_X = 6 |
|---|
| | | const EDIT_GUIDE_CURSOR_VISUAL_ANCHOR_Y = 2 |
|---|
| | | // 区分“首次进入编辑立即显示”与“hover 3 秒后显示”， |
|---|
| | | // 这样可以既保留旧引导，又不影响新的 hover 提示交互。 |
|---|
| | | const fenceEditGuideDisplayMode = ref<'idle' | 'entry' | 'hover'>('idle') |
|---|
