feat: scaling coolness

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>
   );
 };