add manual zoom for sprites

Author: kirjavascript

CHANGELOG

@@ -1,5 +1,7 @@
 # Changelog
 
+## [unreleased]
+
 ## [1.1.3]
 - Upgrade to electron 12
 

app/components/sprites/index.js

@@ -1,8 +1,10 @@
 import React, { Component } from 'react';
 import { environment } from '#store/environment';
+import { spriteState } from './state';
 import { observer } from 'mobx-react';
 import { Sprite } from './sprite';
 import { SortableContainer, SortableElement } from 'react-sortable-hoc';
+import { Slider } from '#ui';
 import {
     baseSize,
     margin,
@@ -127,6 +129,12 @@ export const Sprites = observer(class Sprites extends DimensionsComponent {
                         scroll={scroll}
                     />
                 </div>
+                <Slider
+                    store={spriteState}
+                    accessor="zoom"
+                    min="1"
+                    max="8"
+                />
             </div>
         );
     }

app/components/sprites/sprite.js

@@ -4,6 +4,7 @@ import { observer } from 'mobx-react';
 import { Mapping } from '#components/mappings/mapping';
 import { getBounds } from '#components/mappings/state/bounds';
 import SVARS from 'sass-variables';
+import { spriteState } from './state';
 
 const { max, min, abs, floor } = Math;
 
@@ -15,15 +16,8 @@ export const Sprite = observer(class Sprite extends Component {
 
         const { index, mappings, buffer } = this.props.data;
 
-        let extent = 25;
-        if (mappings.length) {
-            const { minX, minY, maxX, maxY } = getBounds(mappings);
-
-            extent = max(abs(minX), maxX, abs(minY), maxY);
-        }
-
-        const scale = min(5, max(floor(100 / extent), 1));
-
+        // const scale = min(5, max(floor(100 / spriteState.zoom), 1));
+        const scale = spriteState.zoom;
         return <div
             className="sprite"
             style={{
@@ -45,7 +39,7 @@ export const Sprite = observer(class Sprite extends Component {
                     style={{zIndex: mappingIndex}}
                 >
                     <Mapping
-                        scale={scale}
+                        scale={spriteState.zoom}
                         data={mapping}
                         tileBuffer={buffer}
                     />

app/components/sprites/state.js

@@ -0,0 +1,18 @@
+import { observable, computed, action, autorun, toJS, makeObservable } from 'mobx';
+import { storage } from '#store/storage';
+
+class SpriteState {
+
+    zoom = 4;
+
+    constructor() {
+        makeObservable(this, {
+            zoom: observable,
+        });
+    }
+
+}
+
+const spriteState = new SpriteState();
+storage(spriteState, 'sprite-state', ['zoom']);
+export { spriteState };