Fix(region): add proper zoom for right region (#41)

alexamy · Jul 11, 2024 · e78de25 · e78de25
1 parent f4e9f3e
commit e78de25
Show file tree

Hide file tree

Showing 2 changed files with 26 additions and 18 deletions.
diff --git a/src/Region.tsx b/src/Region.tsx
@@ -88,26 +88,26 @@ export function Region(props: {
 }) {
   const move = createRegionMovement();
   const [parent, setParent] = createSignal<HTMLElement>();
-  const [size, setSize] = createSignal({ width: 0, height: 0 });
 
   const cursor = createMemo(() => {
     if (move.active()) return "grabbing";
     return "default";
   });
 
-  onMount(updateSize);
   createEffect(on(() => props.resetTrigger, move.resetView));
 
-  createEffect(() => {
+  onMount(() => {
+    function updateSize() {
+      const rect = parent()!.getBoundingClientRect();
+      move.setRect(rect);
+    }
+
     const observer = new ResizeObserver(updateSize);
     observer.observe(parent()!);
     onCleanup(() => observer.disconnect());
-  });
 
-  function updateSize() {
-    const size = parent()!.getBoundingClientRect();
-    setSize(size);
-  }
+    updateSize();
+  });
 
   function onMouseEnter() {
     parent()?.focus({ preventScroll: true });
@@ -129,18 +129,14 @@ export function Region(props: {
     >
       <GridBackground
         scale={move.scale()}
-        width={size().width}
-        height={size().height}
+        width={move.rect().width}
+        height={move.rect().height}
       />
       <RegionContext.Provider value={move}>
         <Toolbar data-testid={props.testId + "-toolbar"}>
           {props.toolbar}
         </Toolbar>
-        <Content
-          data-testid={props.testId + "-content"}
-          ref={move.setRef}
-          style={move.style()}
-        >
+        <Content data-testid={props.testId + "-content"} style={move.style()}>
           {props.children}
         </Content>
         <Footer data-testid={props.testId + "-footer"}>

diff --git a/src/hooks/createRegionMovement.ts b/src/hooks/createRegionMovement.ts
@@ -2,14 +2,23 @@ import { v } from "@/lib/vector";
 import { createMemo, createSignal, type JSX } from "solid-js";
 
 export function createRegionMovement() {
-  const [ref, setRef] = createSignal<HTMLElement>();
   const [active, setActive] = createSignal(false);
   const [current, setCurrent] = createSignal({ x: 0, y: 0 });
+  const [rect, setRect] = createSignal({
+    left: 0,
+    top: 0,
+    width: 0,
+    height: 0,
+  });
 
   const [translate, setTranslate] = createSignal({ x: 0, y: 0 });
   const [origin, setOrigin] = createSignal({ x: 0, y: 0 });
   const [scale, setScale] = createSignal(3);
 
+  const elementPosition = createMemo(() => {
+    return { x: rect().left, y: rect().top };
+  });
+
   const style = createMemo(() => {
     const move = `translate(${translate().x}px, ${translate().y}px)`;
     const zoom = `scale(${scale()})`;
@@ -50,7 +59,10 @@ export function createRegionMovement() {
     event.preventDefault();
     event.stopPropagation();
 
-    const mousePosition = { x: event.clientX, y: event.clientY };
+    const mousePosition = v.subtract(
+      { x: event.clientX, y: event.clientY },
+      elementPosition()
+    );
 
     const prevScale = scale();
     const newScale = getScale(event);
@@ -96,7 +108,7 @@ export function createRegionMovement() {
 
   // prettier-ignore
   return {
-    setRef,
+    rect, setRect,
     active,
     current, origin,
     translate, scale, style,