refactor: decouple slider

packages/graphics/package.json

@@ -52,8 +52,7 @@
     "@pixi/text": "^5.3.9",
     "image-size": "^0.9.3",
     "kefir": "^3.8.8",
-    "lru-cache": "^6.0.0",
-    "rc-slider": "^9.7.1"
+    "lru-cache": "^6.0.0"
   },
   "devDependencies": {
     "@flecks/fleck": "^1.4.1"

packages/graphics/src/components/stage/index.jsx

@@ -8,28 +8,18 @@ import {
   useEffect,
   useImperativeHandle,
   useRef,
-  useState,
 } from '@flecks/react';
 import K from 'kefir';
-import Slider from 'rc-slider';
-
-const marks = {
-  1: '1x',
-  2: '2x',
-  4: '4x',
-  8: '8x',
-};
 
 const Stage = forwardRef(({
   centered,
   renderable,
   renderer,
-  scalable,
+  scale,
   size,
   styles,
   ticker,
 }, fref) => {
-  const [scale, setScale] = useState(1);
   const hostRef = useRef();
   useImperativeHandle(fref, () => ({
     events: () => K.merge(
@@ -50,14 +40,14 @@ const Stage = forwardRef(({
             event,
             // Normalize touch events.
             (event) => {
+              /* eslint-disable no-param-reassign */
               if (-1 !== ['touchstart', 'touchmove'].indexOf(event.type)) {
-                /* eslint-disable no-param-reassign */
                 event.clientX = event.touches[0].clientX;
                 event.deltaX = event.touches[0].deltaX;
                 event.clientY = event.touches[0].clientY;
                 event.deltaY = event.touches[0].deltaY;
-                /* eslint-enable no-param-reassign */
               }
+              /* eslint-enable no-param-reassign */
               return event;
             },
           )
@@ -92,24 +82,10 @@ const Stage = forwardRef(({
         current.removeChild(renderer.element);
       },
     ];
-    if (scalable) {
-      const wheelEvents = K.fromEvents(renderer.element, 'wheel');
-      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)));
-        }
-      };
-      wheelEvents.onValue(onWheel);
-      cleanups.push(() => {
-        wheelEvents.offValue(onWheel);
-      });
-    }
     return () => {
       cleanups.forEach((fn) => fn());
     };
-  }, [hostRef, renderer, scalable, scale, setScale]);
+  }, [hostRef, renderer]);
   useEffect(() => {
     if (!renderable || !renderer) {
       return undefined;
@@ -136,18 +112,6 @@ const Stage = forwardRef(({
   }, [renderable, renderer, ticker]);
   return (
     <div className={styles.stage}>
-      {scalable && (
-        <Slider
-          min={1}
-          max={8}
-          marks={marks}
-          step={null}
-          onChange={(scale) => {
-            setScale(scale);
-          }}
-          value={scale}
-        />
-      )}
       <div className={styles.canvas} ref={hostRef} />
     </div>
   );
@@ -156,7 +120,7 @@ const Stage = forwardRef(({
 Stage.defaultProps = {
   centered: true,
   renderer: new Renderer([0, 0]),
-  scalable: true,
+  scale: 1,
   styles: {
     canvas: '',
     stage: '',
@@ -177,7 +141,7 @@ Stage.propTypes = {
     render: PropTypes.func,
     resize: PropTypes.func,
   }),
-  scalable: PropTypes.bool,
+  scale: PropTypes.number,
   size: PropTypes.arrayOf(PropTypes.number).isRequired,
   styles: PropTypes.shape({
     canvas: PropTypes.string,