Snap CB position to pixel boundary (#8095)

* Snap CB position to pixel boundary

* Apply review comments

app/gui2/package.json

@@ -39,6 +39,7 @@
     "hash-sum": "^2.0.0",
     "isomorphic-ws": "^5.0.0",
     "lib0": "^0.2.85",
+    "lorem-ipsum": "^2.0.8",
     "magic-string": "^0.30.3",
     "murmurhash": "^2.0.1",
     "pinia": "^2.1.6",

app/gui2/src/components/ComponentBrowser.vue

@@ -9,6 +9,7 @@ import { useApproach } from '@/util/animation'
 import { useResizeObserver } from '@/util/events'
 import type { useNavigator } from '@/util/navigator'
 import { Vec2 } from '@/util/vec2'
+import { LoremIpsum } from 'lorem-ipsum'
 import { computed, nextTick, onMounted, ref, watch } from 'vue'
 
 const ITEM_SIZE = 32
@@ -34,10 +35,10 @@ onMounted(() => {
 
 const transform = computed(() => {
   const nav = props.navigator
-  const pos = props.position
-  return `${nav.transform} translate(${pos.x}px, ${pos.y}px) scale(${
-    1 / nav.scale
-  }) translateY(-100%)`
+  const translate = nav.translate
+  const position = translate.add(props.position).scale(nav.scale)
+
+  return `translate(${position.x}px, ${position.y}px) translateY(-100%)`
 })
 
 // === Input and Filtering ===
@@ -223,6 +224,7 @@ function updateScroll() {
 // === Documentation Panel ===
 
 const docsVisible = ref(true)
+const docs = new LoremIpsum().generateParagraphs(6)
 
 // === Key Events Handler ===
 
@@ -308,7 +310,9 @@ function handleKeydown(e: KeyboardEvent) {
           </div>
         </div>
       </div>
-      <div class="panel docs" :class="{ hidden: !docsVisible }">DOCS</div>
+      <div class="panel docs scrollable" :class="{ hidden: !docsVisible }" @wheel.stop.passive>
+        {{ docs }}
+      </div>
     </div>
     <div class="CBInput">
       <input ref="inputField" v-model="input.code.value" @keyup="readInputFieldSelection" />
@@ -357,6 +361,7 @@ function handleKeydown(e: KeyboardEvent) {
   width: 406px;
   clip-path: inset(0 0 0 0 round 20px);
   transition: clip-path 0.2s;
+  overflow-y: auto;
 }
 .docs.hidden {
   clip-path: inset(0 100% 0 0 round 20px);

app/gui2/src/util/navigator.ts

@@ -61,25 +61,21 @@ export function useNavigator(viewportNode: Ref<Element | undefined>) {
     return `${v.pos.x} ${v.pos.y} ${v.size.x} ${v.size.y}`
   })
 
-  const transformValue = computed(() => {
+  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 { x: -x + w / 2, y: -y + h / 2 }
+    return new Vec2(-x + w / 2, -y + h / 2)
   })
 
   const transform = computed(
-    () =>
-      `scale(${scale.value}) translate(${transformValue.value.x}px, ${transformValue.value.y}px)`,
+    () => `scale(${scale.value}) translate(${translate.value.x}px, ${translate.value.y}px)`,
   )
 
   const prescaledTransform = computed(
-    () =>
-      `translate(${transformValue.value.x * scale.value}px, ${
-        transformValue.value.y * scale.value
-      }px)`,
+    () => `translate(${translate.value.x * scale.value}px, ${translate.value.y * scale.value}px)`,
   )
 
   useEvent(
@@ -126,6 +122,7 @@ export function useNavigator(viewportNode: Ref<Element | undefined>) {
         }
       },
     },
+    translate,
     scale,
     viewBox,
     transform,