Фиксим кейс когда значения расстояний могли прыгать на 1 пиксель

Author: Alexander

specs/src/editor/snapping-manager/index.spec.ts

@@ -264,7 +264,7 @@ describe('SnappingManager', () => {
 
     const { activeSpacingGuides } = snappingManager as any
     expect(activeSpacingGuides.length).toBeGreaterThan(0)
-    expect(activeSpacingGuides[0].distance).toBe(22)
+    expect(activeSpacingGuides[0].distance).toBe(23)
   })
 
   it('показывает равноудалённость по шагу и расстояние совпадает с фактическим зазором', () => {
@@ -350,6 +350,56 @@ describe('SnappingManager', () => {
     )
   })
 
+  it('показывает одинаковый display-distance для разных объектов в вертикальной цепочке', () => {
+    const { editor, objects } = createSnappingTestContext()
+    const top = createBoundsObject({ left: 0, top: 0, width: 50, height: 50, id: 'top' })
+    const middle = createBoundsObject({ left: 0, top: 91, width: 50, height: 50, id: 'middle' })
+    const bottom = createBoundsObject({ left: 0, top: 182, width: 50, height: 50, id: 'bottom' })
+    objects.push(top)
+    objects.push(middle)
+    objects.push(bottom)
+
+    const middleSnappingManager = new SnappingManager({ editor });
+    (middleSnappingManager as any)._handleMouseDown({ target: middle });
+    (middleSnappingManager as any)._handleObjectMoving({ target: middle })
+    const middleGuides = (middleSnappingManager as any).activeSpacingGuides
+    const middleDistance = middleGuides[0]?.distance
+
+    const topSnappingManager = new SnappingManager({ editor });
+    (topSnappingManager as any)._handleMouseDown({ target: top });
+    (topSnappingManager as any)._handleObjectMoving({ target: top })
+    const topGuides = (topSnappingManager as any).activeSpacingGuides
+    const topDistance = topGuides[0]?.distance
+
+    expect(middleDistance).toBe(41)
+    expect(topDistance).toBe(41)
+  })
+
+  it('показывает одинаковый display-distance в вертикальной цепочке при уменьшенном среднем объекте', () => {
+    const { editor, objects } = createSnappingTestContext()
+    const top = createBoundsObject({ left: 0, top: 0, width: 80, height: 80, id: 'top' })
+    const middle = createBoundsObject({ left: 0, top: 109, width: 80, height: 40, id: 'middle' })
+    const bottom = createBoundsObject({ left: 0, top: 177, width: 80, height: 80, id: 'bottom' })
+    objects.push(top)
+    objects.push(middle)
+    objects.push(bottom)
+
+    const middleSnappingManager = new SnappingManager({ editor });
+    (middleSnappingManager as any)._handleMouseDown({ target: middle });
+    (middleSnappingManager as any)._handleObjectMoving({ target: middle })
+    const middleGuides = (middleSnappingManager as any).activeSpacingGuides
+    const middleDistance = middleGuides[0]?.distance
+
+    const bottomSnappingManager = new SnappingManager({ editor });
+    (bottomSnappingManager as any)._handleMouseDown({ target: bottom });
+    (bottomSnappingManager as any)._handleObjectMoving({ target: bottom })
+    const bottomGuides = (bottomSnappingManager as any).activeSpacingGuides
+    const bottomDistance = bottomGuides[0]?.distance
+
+    expect(middleDistance).toBe(29)
+    expect(bottomDistance).toBe(29)
+  })
+
   it('масштабирует объект по X с прилипаниями и фиксирует origin', () => {
     const { editor, objects } = createSnappingTestContext()
     const active = createScalingObject({

src/editor/snapping-manager/calculations.ts

@@ -321,8 +321,7 @@ const resolveCenteredEqualSpacing = ({
     const distanceDiff = Math.abs(beforeDistance - afterDistance)
     if (distanceDiff > 1) continue
 
-    const averageGap = (gapBefore + gapAfter) / 2
-    const commonDistance = resolveDisplayDistance({ distance: averageGap })
+    const commonDistance = Math.max(beforeDistance, afterDistance)
 
     const nearestDiff = Math.max(
       Math.abs(gapBefore - targetGap),
@@ -348,6 +347,25 @@ const resolveCenteredEqualSpacing = ({
   return bestCandidate
 }
 
+/**
+ * Нормализует отображаемое расстояние для гайда равноудалённости.
+ */
+const resolveGuideDisplayDistance = ({
+  currentGap,
+  referenceGap
+}: {
+  currentGap: number
+  referenceGap: number
+}): number => {
+  const currentDisplay = resolveDisplayDistance({ distance: currentGap })
+  const referenceDisplay = resolveDisplayDistance({ distance: referenceGap })
+  const displayDiff = Math.abs(currentDisplay - referenceDisplay)
+
+  if (displayDiff > 1) return referenceDisplay
+
+  return Math.max(currentDisplay, referenceDisplay)
+}
+
 /**
  * Ищет ближайшую линию привязки по одной оси.
  */
@@ -607,14 +625,18 @@ export const calculateVerticalSpacing = ({
         const postDiff = Math.abs(adjustedGap - refDistance)
 
         if (postDiff > threshold) continue
+        const distance = resolveGuideDisplayDistance({
+          currentGap: adjustedGap,
+          referenceGap: refDistance
+        })
         const guide: SpacingGuide = {
           type: 'vertical',
           axis: centerX,
           refStart,
           refEnd,
           activeStart: prevBottom,
           activeEnd: adjustedTop,
-          distance: refDistance
+          distance
         }
 
         options.push({ delta, guide, diff: postDiff })
@@ -632,14 +654,18 @@ export const calculateVerticalSpacing = ({
         const postDiff = Math.abs(adjustedGap - refDistance)
 
         if (postDiff > threshold) continue
+        const distance = resolveGuideDisplayDistance({
+          currentGap: adjustedGap,
+          referenceGap: refDistance
+        })
         const guide: SpacingGuide = {
           type: 'vertical',
           axis: centerX,
           refStart,
           refEnd,
           activeStart: adjustedBottom,
           activeEnd: nextTop,
-          distance: refDistance
+          distance
         }
 
         options.push({ delta, guide, diff: postDiff })
@@ -842,14 +868,18 @@ export const calculateHorizontalSpacing = ({
         const postDiff = Math.abs(adjustedGap - refDistance)
 
         if (postDiff > threshold) continue
+        const distance = resolveGuideDisplayDistance({
+          currentGap: adjustedGap,
+          referenceGap: refDistance
+        })
         const guide: SpacingGuide = {
           type: 'horizontal',
           axis: centerY,
           refStart,
           refEnd,
           activeStart: prevRight,
           activeEnd: adjustedLeft,
-          distance: refDistance
+          distance
         }
 
         options.push({ delta, guide, diff: postDiff })
@@ -867,14 +897,18 @@ export const calculateHorizontalSpacing = ({
         const postDiff = Math.abs(adjustedGap - refDistance)
 
         if (postDiff > threshold) continue
+        const distance = resolveGuideDisplayDistance({
+          currentGap: adjustedGap,
+          referenceGap: refDistance
+        })
         const guide: SpacingGuide = {
           type: 'horizontal',
           axis: centerY,
           refStart,
           refEnd,
           activeStart: adjustedRight,
           activeEnd: nextLeft,
-          distance: refDistance
+          distance
         }
 
         options.push({ delta, guide, diff: postDiff })