From f4b0c605d8420f220f20677fe5acf53f8ddee295 Mon Sep 17 00:00:00 2001
From: cha0s <git@cha0s.io>
Date: Wed, 7 Jul 2021 16:54:38 -0500
Subject: [PATCH] feat: scaling coolness

---
 .../graphics/src/components/stage/index.jsx   | 34 ++++++++++++++-----
 1 file changed, 26 insertions(+), 8 deletions(-)

diff --git a/packages/graphics/src/components/stage/index.jsx b/packages/graphics/src/components/stage/index.jsx
index c963ac7..d20f234 100644
--- a/packages/graphics/src/components/stage/index.jsx
+++ b/packages/graphics/src/components/stage/index.jsx
@@ -45,14 +45,29 @@ const Stage = ({
     if (!renderer) {
       return;
     }
-    renderer.resize(size);
-  }, [renderer, size]);
+    renderer.resize(Vector.scale(size, scale));
+  }, [renderer, scale, size]);
   useEffect(() => {
-    if (!ref.current || !renderer) {
-      return;
+    const {current} = ref;
+    if (!current || !renderer) {
+      return undefined;
     }
-    ref.current.appendChild(renderer.element);
-  }, [ref, renderer]);
+    current.appendChild(renderer.element);
+    if (scalable) {
+      const onWheel = (event) => {
+        if (event.ctrlKey) {
+          event.preventDefault();
+          const increment = event.deltaY > 0 ? 0.5 : 2;
+          setScale(Math.min(8, Math.max(1, scale * increment)));
+        }
+      };
+      current.addEventListener('wheel', onWheel);
+      return () => {
+        current.removeEventListener('wheel', onWheel);
+      };
+    }
+    return undefined;
+  }, [ref, renderer, scalable, scale, setScale]);
   useEffect(() => {
     if (!renderable || !renderer) {
       return undefined;
@@ -86,10 +101,13 @@ const Stage = ({
           onChange={(scale) => {
             setScale(scale);
           }}
-          defaultValue={1}
+          value={scale}
         />
       )}
-      <div className="canvas-host" ref={ref} />
+      <div
+        className="canvas-host"
+        ref={ref}
+      />
     </div>
   );
 };