Right Panel fixes (#13557)

Closes #13539
Part of #13222

1. The buttons in Graph are aligned to those in Description/Documentation editor.

<img width="2470" height="1287" alt="image" src="https://github.com/user-attachments/assets/969d27e5-8ac1-4e62-b913-456a4e8182ac" />

2. The graph editor "anchor" point is now left-top corner instead of center: this makes nodes not move when opening/resizing right and bottom panel.

https://github.com/user-attachments/assets/c117b972-0593-472a-9f92-f6cbf2f28bf1

Author: farmaazon

CHANGELOG.md

@@ -29,6 +29,7 @@
 - ["Grouped Components" are renamed to "User Defined Components"][13389]
 - [Allow displaying cloud images using enso:// url in documentation][13419]
 - [File Browser Widget is used when editing file paths to datalinks][13439]
+- [Graph is not moved when showing/resizing side panels.][13557]
 - [Add "Invite" button to the top bar when using a team or higher plan][13522]
 - ["Welcome Project" is automatically opened for new users][13479]
 - [Project and Setting tab may be now closed with shortcut][13498]. On
@@ -57,6 +58,7 @@
 [13389]: https://github.com/enso-org/enso/pull/13389
 [13419]: https://github.com/enso-org/enso/pull/13419
 [13439]: https://github.com/enso-org/enso/pull/13439
+[13557]: https://github.com/enso-org/enso/pull/13557
 [13522]: https://github.com/enso-org/enso/pull/13522
 [13479]: https://github.com/enso-org/enso/pull/13479
 [13498]: https://github.com/enso-org/enso/pull/13498

app/gui/integration-test/project-view/collapsingAndEntering.spec.ts

@@ -310,6 +310,8 @@ async function expectInsideFunc1(page: Page) {
 
 async function expectInsideFunc2(page: Page) {
   await actions.expectNodePositionsInitialized(page, -88)
+  // The mouse is often in input's output port area, making our checks fooled by the edge ghost.
+  await page.mouse.move(0, 0)
   await expect(locate.graphNode(page)).toHaveCount(3)
   await expect(locate.inputNode(page)).toHaveCount(1)
   await expect(locate.graphNodeByBinding(page, 'r')).toExist()

app/gui/src/project-view/ProjectView.vue

@@ -14,6 +14,7 @@ import {
   markRaw,
   onActivated,
   onDeactivated,
+  onMounted,
   onScopeDispose,
   ref,
   toRaw,
@@ -70,6 +71,7 @@ provideVisibility(visible)
 openedProjects.registerProject(toRefs(props))
 onScopeDispose(() => openedProjects.unregisterProject(props.projectId))
 
+onMounted(() => (visible.value = true))
 onActivated(() => (visible.value = true))
 onDeactivated(() => (visible.value = false))
 </script>

app/gui/src/project-view/components/SceneScroller.vue

@@ -25,15 +25,15 @@ const scrollingState = ref<{
   readonly range: Vec2
   /** `pos` when scrolling started. */
   readonly scrollStartPos: Vec2
-  /** Viewport center, in scene coordinates, when scrolling started. */
+  /** Viewport left top corner, in scene coordinates, when scrolling started. */
   readonly scrollOrigin: Vec2
 }>()
 
 function scroll(event: ScrollbarEvent) {
   switch (event.type) {
     case 'start': {
       const scrollStartPos = scrollInputs.value.pos
-      const scrollOrigin = props.navigator.viewport.center()
+      const scrollOrigin = props.navigator.viewport.pos
       scrollingState.value = { ...scrollInputs.value, scrollStartPos, scrollOrigin }
       break
     }
@@ -56,7 +56,7 @@ function scroll(event: ScrollbarEvent) {
       const proportionalPos = event.position / scrollInputs.value.range.getAxis(event.axis)
       const scaledPos = proportionalPos * props.scrollableArea.size.getAxis(event.axis)
       const pos = scaledPos + props.scrollableArea.pos.getAxis(event.axis)
-      props.navigator.scrollTo(props.navigator.viewport.center().setAxis(event.axis, pos))
+      props.navigator.scrollTo(props.navigator.viewport.pos.setAxis(event.axis, pos))
       break
     }
   }

app/gui/src/project-view/components/TopBar.vue

@@ -40,11 +40,12 @@ const selection = injectGraphSelection()
   position: absolute;
   display: flex;
   gap: 8px;
-  top: 8px;
+  top: 1.25rem;
   left: 0;
   right: 0;
-  margin-left: 11px;
-  margin-right: 11px;
+  margin-top: -3px;
+  margin-left: 13px;
+  margin-right: 13px;
   pointer-events: none;
   align-items: flex-start;
   > * {

app/gui/src/project-view/composables/__tests__/navigator.test.ts

@@ -17,46 +17,48 @@ describe('useNavigator', () => {
     })
   }
 
-  test('initializes with centered non-zoomed viewport', async () => {
+  test('initializes with non-zoomed viewport', async () => {
     const navigator = await makeTestNavigator()
-    expect(navigator.viewport).toStrictEqual(Rect.FromBounds(-400, -200, 400, 200))
+    expect(navigator.viewport).toStrictEqual(Rect.FromBounds(0, 0, 800, 400))
   })
 
   test('clientToScenePos without scaling', async () => {
     const navigator = await makeTestNavigator()
-    expect(navigator.clientToScenePos(Vec2.Zero)).toStrictEqual(new Vec2(-550, -350))
-    expect(navigator.clientToScenePos(new Vec2(150, 150))).toStrictEqual(new Vec2(-400, -200))
-    expect(navigator.clientToScenePos(new Vec2(550, 350))).toStrictEqual(new Vec2(0, 0))
+    expect(navigator.clientToScenePos(Vec2.Zero)).toStrictEqual(new Vec2(-150, -150))
+    expect(navigator.clientToScenePos(new Vec2(150, 150))).toStrictEqual(new Vec2(0, 0))
+    expect(navigator.clientToScenePos(new Vec2(550, 350))).toStrictEqual(new Vec2(400, 200))
+    expect(navigator.clientToScenePos(new Vec2(950, 550))).toStrictEqual(new Vec2(800, 400))
   })
 
   test('clientToScenePos with scaling', async () => {
     const navigator = await makeTestNavigator()
-    navigator.setCenterAndScale(Vec2.Zero, 2)
-    expect(navigator.clientToScenePos(Vec2.Zero)).toStrictEqual(new Vec2(-275, -175))
-    expect(navigator.clientToScenePos(new Vec2(150, 150))).toStrictEqual(new Vec2(-200, -100))
-    expect(navigator.clientToScenePos(new Vec2(550, 350))).toStrictEqual(new Vec2(0, 0))
+    navigator.setPosAndScale(Vec2.Zero, 2)
+    expect(navigator.clientToScenePos(Vec2.Zero)).toStrictEqual(new Vec2(-75, -75))
+    expect(navigator.clientToScenePos(new Vec2(150, 150))).toStrictEqual(new Vec2(0, 0))
+    expect(navigator.clientToScenePos(new Vec2(550, 350))).toStrictEqual(new Vec2(200, 100))
+    expect(navigator.clientToScenePos(new Vec2(950, 550))).toStrictEqual(new Vec2(400, 200))
   })
 
   test('clientToSceneRect without scaling', async () => {
     const navigator = await makeTestNavigator()
-    expect(navigator.clientToSceneRect(Rect.Zero)).toStrictEqual(Rect.XYWH(-550, -350, 0, 0))
+    expect(navigator.clientToSceneRect(Rect.Zero)).toStrictEqual(Rect.XYWH(-150, -150, 0, 0))
     expect(navigator.clientToSceneRect(Rect.XYWH(150, 150, 800, 400))).toStrictEqual(
       navigator.viewport,
     )
     expect(navigator.clientToSceneRect(Rect.XYWH(100, 150, 200, 900))).toStrictEqual(
-      Rect.XYWH(-450, -200, 200, 900),
+      Rect.XYWH(-50, 0, 200, 900),
     )
   })
 
   test('clientToSceneRect with scaling', async () => {
     const navigator = await makeTestNavigator()
-    navigator.setCenterAndScale(Vec2.Zero, 2)
-    expect(navigator.clientToSceneRect(Rect.Zero)).toStrictEqual(Rect.XYWH(-275, -175, 0, 0))
+    navigator.setPosAndScale(Vec2.Zero, 2)
+    expect(navigator.clientToSceneRect(Rect.Zero)).toStrictEqual(Rect.XYWH(-75, -75, 0, 0))
     expect(navigator.clientToSceneRect(Rect.XYWH(150, 150, 800, 400))).toStrictEqual(
       navigator.viewport,
     )
     expect(navigator.clientToSceneRect(Rect.XYWH(100, 150, 200, 900))).toStrictEqual(
-      Rect.XYWH(-225, -100, 100, 450),
+      Rect.XYWH(-25, 0, 100, 450),
     )
   })
 })

app/gui/src/project-view/composables/__tests__/selection.test.ts

@@ -20,7 +20,7 @@ function selectionWithMockData() {
   const mockDom = document.createElement('div')
   mockDom.style.width = '500px'
   mockDom.style.height = '300px'
-  vi.spyOn(mockDom, 'getBoundingClientRect').mockReturnValue(new DOMRect(-250, -150, 500, 300))
+  vi.spyOn(mockDom, 'getBoundingClientRect').mockReturnValue(new DOMRect(0, 0, 500, 300))
 
   const navigator = useNavigator(ref(mockDom), useKeyboard())
 

app/gui/src/project-view/composables/navigator.ts

@@ -54,8 +54,8 @@ export function useNavigator(
 ) {
   const predicate = options.predicate ?? ((_) => true)
   const size = useResizeObserver(viewportNode)
-  const targetCenter = shallowRef<Vec2>(Vec2.Zero)
-  const center = useApproachVec(targetCenter, 100, 0.02)
+  const targetLeftTop = shallowRef<Vec2>(Vec2.Zero)
+  const leftTop = useApproachVec(targetLeftTop, 100, 0.2)
 
   const viewportRect = shallowRef<Rect>(Rect.Zero)
   const viewportElem = computed(() => unrefElement(viewportNode))
@@ -83,15 +83,15 @@ export function useNavigator(
 
   function handleDragPanning(state: DragState) {
     if (Vec2.FromTuple(state.movement).length() > LONGPRESS_MAX_SLIDE) cancelLongpress()
-    scrollTo(center.value.addScaled(Vec2.FromTuple(state.delta), -1 / scale.value))
+    scrollTo(leftTop.value.addScaled(Vec2.FromTuple(state.delta), -1 / scale.value))
     state.event.stopImmediatePropagation()
   }
 
   function handleDragZooming(state: DragState) {
     if (state.delta[1] != 0) preventContextMenu = true
     const prevScale = scale.value
     updateScale((oldValue) => oldValue * Math.exp(-state.delta[1] / 100))
-    scrollTo(center.value.scaleAround(prevScale / scale.value, gesturePivot))
+    scrollTo(leftTop.value.scaleAround(prevScale / scale.value, gesturePivot))
   }
 
   function handleDragHolding(state: DragState) {
@@ -186,15 +186,15 @@ export function useNavigator(
         const prevScale = scale.value
         updateScale((_) => pinchScaleRatio * state.da[0])
         scrollTo(
-          center.value
+          leftTop.value
             .scaleAround(prevScale / scale.value, gesturePivot)
             .addScaled(originDelta, -1 / scale.value),
         )
       },
       onWheel(state) {
         if (state.ctrlKey) return
         const delta = Vec2.FromTuple(state.delta)
-        scrollTo(center.value.addScaled(delta, 1 / scale.value))
+        scrollTo(leftTop.value.addScaled(delta, 1 / scale.value))
       },
     },
     {
@@ -221,7 +221,7 @@ export function useNavigator(
   const scale = useApproach(targetScale)
 
   const panArrows = useArrows(
-    (pos) => scrollTo(center.value.addScaled(pos.delta, 1 / scale.value)),
+    (pos) => scrollTo(leftTop.value.addScaled(pos.delta, 1 / scale.value)),
     { predicate, velocity: 1000 },
   )
 
@@ -270,10 +270,16 @@ export function useNavigator(
       minScale,
       maxScale,
     )
-    targetCenter.value = rect.center().finiteOrZero()
+    // Rect position should be centered inside viewport (they may have different aspect ratio).
+    const w = viewportElem.value.clientWidth / targetScale.value
+    const h = viewportElem.value.clientHeight / targetScale.value
+    targetLeftTop.value = rect
+      .center()
+      .finiteOrZero()
+      .sub(new Vec2(w / 2, h / 2))
     if (skipAnimation) {
       scale.skip()
-      center.skip()
+      leftTop.skip()
     }
   }
 
@@ -320,32 +326,31 @@ export function useNavigator(
   function panToImpl(points: Partial<Vec2>[]) {
     let target = viewport.value
     for (const point of points.reverse()) target = target.offsetToInclude(point) ?? target
-    targetCenter.value = target.center().finiteOrZero()
+    targetLeftTop.value = target.pos.finiteOrZero()
   }
 
   /** Pan immediately to center the viewport at the given point, in scene coordinates. */
-  function scrollTo(newCenter: Vec2) {
+  function scrollTo(newLeftTop: Vec2) {
     resetTargetFollowing()
-    targetCenter.value = newCenter.finiteOrZero()
-    center.skip()
+    targetLeftTop.value = newLeftTop.finiteOrZero()
+    leftTop.skip()
   }
 
-  /** Set viewport center point and scale value immediately, skipping animations. */
-  function setCenterAndScale(newCenter: Vec2, newScale: number) {
+  /** Set viewport left-top point and scale value immediately, skipping animations. */
+  function setPosAndScale(newLeftTop: Vec2, newScale: number) {
     resetTargetFollowing()
-    targetCenter.value = newCenter.finiteOrZero()
+    targetLeftTop.value = newLeftTop.finiteOrZero()
     targetScale.value = newScale
     scale.skip()
-    center.skip()
+    leftTop.skip()
   }
 
   const viewport = computed(() => {
     const nodeSize = size.value
-    const { x, y } = center.value
     const s = scale.value
     const w = nodeSize.x / s
     const h = nodeSize.y / s
-    return new Rect(new Vec2(x - w / 2, y - h / 2), new Vec2(w, h))
+    return new Rect(leftTop.value, new Vec2(w, h))
   })
 
   const viewBox = computed(() => {
@@ -354,16 +359,11 @@ export function useNavigator(
   })
 
   const translate = computed<Vec2>(() => {
-    const nodeSize = size.value
-    const { x, y } = center.value
-    const s = scale.value
-    const w = nodeSize.x / s
-    const h = nodeSize.y / s
-    return new Vec2(-x + w / 2, -y + h / 2)
+    return leftTop.value.scale(-1)
   })
 
   const transformChanging = computed(
-    () => scale.active || center.active || dragActive.value || pinchActive.value,
+    () => scale.active || leftTop.active || dragActive.value || pinchActive.value,
   )
   const transform = computed(
     () => `scale(${scale.value}) translate(${translate.value.x}px, ${translate.value.y}px)`,
@@ -428,8 +428,8 @@ export function useNavigator(
     const scenePos0 = clientToScenePos(clientPos)
     const result = f()
     const scenePos1 = clientToScenePos(clientPos)
-    targetCenter.value = center.value.add(scenePos0.sub(scenePos1)).finiteOrZero()
-    center.skip()
+    targetLeftTop.value = leftTop.value.add(scenePos0.sub(scenePos1)).finiteOrZero()
+    leftTop.skip()
     return result
   }
 
@@ -449,7 +449,7 @@ export function useNavigator(
     },
     (e) => {
       const delta = new Vec2(e.deltaX, e.deltaY)
-      scrollTo(center.value.addScaled(delta, 1 / scale.value))
+      scrollTo(leftTop.value.addScaled(delta, 1 / scale.value))
     },
   )
 
@@ -463,7 +463,7 @@ export function useNavigator(
   return proxyRefs({
     keyboardEvents: panArrows.events,
     translate: readonly(translate),
-    targetCenter: readonly(targetCenter),
+    targetLeftTop: readonly(targetLeftTop),
     targetScale: readonly(targetScale),
     scale: readonly(toRef(scale, 'value')),
     viewBox: readonly(viewBox),
@@ -489,6 +489,6 @@ export function useNavigator(
     viewport,
     stepZoom,
     scrollTo,
-    setCenterAndScale,
+    setPosAndScale,
   })
 }

app/gui/src/project-view/stores/persisted.ts

@@ -57,16 +57,16 @@ export const [providePersisted, usePersisted] = createContextStore(
       debounce: 200,
       captureState() {
         return {
-          x: graphNavigator.targetCenter.x,
-          y: graphNavigator.targetCenter.y,
+          x: graphNavigator.targetLeftTop.x,
+          y: graphNavigator.targetLeftTop.y,
           s: graphNavigator.targetScale,
         } satisfies GraphStoredState
       },
       async restoreState(restored, abort) {
         if (restored) {
           const pos = new Vec2(restored.x ?? 0, restored.y ?? 0)
           const scale = restored.s ?? 1
-          graphNavigator.setCenterAndScale(pos, scale)
+          graphNavigator.setPosAndScale(pos, scale)
         } else {
           await until(visibleAreasReady).toBe(true)
           await until(visible).toBe(true)

app/gui/src/project-view/util/data/vec2.ts

@@ -60,22 +60,22 @@ export class Vec2 {
     return Math.abs(this.x - other.x) < epsilon && Math.abs(this.y - other.y) < epsilon
   }
 
-  /** TODO: Add docs */
+  /** Check if both coords are 0. */
   isZero(): boolean {
     return this.x === 0 && this.y === 0
   }
 
-  /** TODO: Add docs */
+  /** Check if both coords have finite values. */
   isFinite(): boolean {
     return Number.isFinite(this.x) && Number.isFinite(this.y)
   }
 
-  /** TODO: Add docs */
+  /** Change non-finite values in vector to 0. */
   finiteOrZero(): Vec2 {
     return new Vec2(Number.isFinite(this.x) ? this.x : 0, Number.isFinite(this.y) ? this.y : 0)
   }
 
-  /** TODO: Add docs */
+  /** Multiply values by given value. */
   scale(scalar: number): Vec2 {
     return new Vec2(this.x * scalar, this.y * scalar)
   }