Sprite autozoom

Author: kirjavascript

CHANGELOG

@@ -6,17 +6,18 @@
     - Sonic 2 Special Stage added [#21](/../../issues/21)
     - Sonic 3&K Sonic/Supersonic partial support
 - New ASM parser/writer
-- Added File menu
+- Added File tab
     - Create new files / better file selection
     - Save/Load individual assets
     - Art offset [#15](/../../issues/15)
     - Blank entries in palette line
-- Rebuilt Project screen
+- Rebuilt Project tab
     - Tree structure for projects
     - Reuse file menu
-- Mapping screen updates
+- Mapping tab updates
     - New mapping autodismiss is configurable
     - Added 'close' to new mapping / raw editor
+- Sprites tab now autozooms depending on sprite size
 - Fixed a keycombination event bug [#29](/../../issues/29)
 - Fixed corrupted art when importing transparent PNGs [#22](/../../issues/22)
 

README.md

@@ -4,7 +4,7 @@
 </div>
 <br>
 
-Flex 2 is a multi-purpose sprite editor for the Sega Megadrive
+Flex 2 is a sprite editor for the Sega Megadrive
 
 # [download](https://github.com/kirjavascript/Flex2/releases)
 

TODO

@@ -19,7 +19,9 @@ definition([
     many(art()),
 ])
 
-// autozoom based on sprite size for sprites tab
+// mapping limits
+// history / mapping drag slowdown
+// update documentation
 
 // crackers first, then kd cham
 // UI by definition
@@ -51,7 +53,6 @@ animation editor
 BUGS
 
 max mapping qty limit (import screen limits too)
-mappings mode in fullscreen raw editor is borked
 saving 0 tile as nemesis crashes
 saving ArtC42 at all crashes
 pink surrounding tiles sometimes breaks

app/components/import/import-sprite.js

@@ -1,5 +1,5 @@
 import { environment } from '#store/environment';
-import { getCenter } from '#util/get-center';
+import { getCenter } from '../mappings/state/bounds';
 import { concatDPLCs } from '../mappings/state/concat-dplcs';
 
 function addTile(ctx, x, y, palette) {

app/components/mappings/mapping.js

@@ -1,6 +1,5 @@
 import React, { Component } from 'react';
 import { Tile } from '../art/tile';
-import { environment } from '#store/environment';
 import { observer } from 'mobx-react';
 
 @observer

app/components/mappings/state/bounds.js

@@ -0,0 +1,25 @@
+
+export function getBounds(mappings) {
+    let minX = mappings[0].left;
+    let maxX = mappings[0].left + mappings[0].width * 8;
+    let minY = mappings[0].top;
+    let maxY = mappings[0].top + mappings[0].height * 8;
+
+    mappings.slice(1).forEach(({ top, left, width, height }) => {
+        minX = Math.min(left, minX);
+        minY = Math.min(top, minY);
+        maxX = Math.max(left + width * 8, maxX);
+        maxY = Math.max(top + height * 8, maxY);
+    });
+
+    return { minX, maxX, minY, maxY };
+}
+
+export function getCenter(mappings) {
+    const { minX, maxX, minY, maxY } = getBounds(mappings);
+
+    return {
+        x: (minX + maxX) / 2,
+        y: (minY + maxY) / 2,
+    };
+}

app/components/mappings/state/index.js

@@ -1,7 +1,7 @@
 import { observable, computed, action, autorun, toJS } from 'mobx';
 import { environment } from '#store/environment';
 import clamp from 'lodash/clamp';
-import { getCenter } from '#util/get-center';
+import { getCenter } from './bounds';
 import { placeNewMapping } from './place-new-mapping';
 import { optimizeCurrentDPLCs } from './optimize-dplcs';
 import { deleteUnusedTiles } from './delete-unused-tiles';

app/components/mappings/state/toggle-dplcs.js

@@ -31,9 +31,6 @@ export function toggleDPLCs() {
 
             mappings.forEach((mapping) => {
                 const tileSize = mapping.width * mapping.height;
-                const existingIndex = newDPLCs.findIndex(({art, size}) => (
-                    art == mapping.art && size >= tileSize
-                ));
 
                 newDPLCs.push({
                     art: mapping.art,

app/components/sprites/sprite.js

@@ -2,8 +2,11 @@ import React, { Component } from 'react';
 import { environment } from '#store/environment';
 import { observer } from 'mobx-react';
 import { Mapping } from '#components/mappings/mapping';
+import { getBounds } from '#components/mappings/state/bounds';
 import SVARS from '!!sass-variables-loader!#styles/variables.scss';
 
+const { max, min, abs, floor } = Math;
+
 @observer
 export class Sprite extends Component {
 
@@ -13,35 +16,42 @@ export 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));
+
         return <div
             className="sprite"
             style={{
                 border: `1px solid ${SVARS[currentSprite == index ? 'magenta' : 'blue']}`,
             }}
         >
-            <div>
-                <div className="index">
-                    0x{index.toString(16).toUpperCase()}
-                </div>
-                {!mappings.length && (
-                    <div className="blank">
-                        [BLANK]
-                    </div>
-                )}
-                <div>
-                    {mappings.slice(0).reverse().map((mapping, mappingIndex) => {
-                        return <div
-                            key={mappingIndex}
-                            style={{zIndex: mappingIndex}}
-                        >
-                            <Mapping
-                                data={mapping}
-                                tileBuffer={buffer}
-                            />
-                        </div>;
-                    })}
-                </div>
+            <div className="index">
+                0x{index.toString(16).toUpperCase()}
             </div>
+
+            {!mappings.length && (
+                <div className="blank">
+                    [BLANK]
+                </div>
+            )}
+            {mappings.slice(0).reverse().map((mapping, mappingIndex) => {
+                return <div
+                    key={mappingIndex}
+                    style={{zIndex: mappingIndex}}
+                >
+                    <Mapping
+                        scale={scale}
+                        data={mapping}
+                        tileBuffer={buffer}
+                    />
+                </div>;
+            })}
         </div>;
     }