0.0.2

Author: kirjavascript

README.md

@@ -4,16 +4,17 @@
 </div>
 <br>
 
-Flex 2 is a multi-purpose art and mapping editor for the Sega Megadrive. The original Flex was a web app, which gave it several limitations. A full rewrite for desktop opens up the ability to use real project files, as well as various other niceties.
+Flex 2 is a multi-purpose art and mapping editor for the Sega Megadrive. The original Flex was a web app, which gave it several limitations. A full rewrite for desktop opens up the ability to use real project files, as well as various other improvements.
 
-Much inspiration has come from the tools SonMapEd, SpritePlotter, and SonikSprite - with ideas being combined and improved upon.
+Much inspiration has come from the tools SonMapEd, SpritePlotter, and SonikSprite.
 
-Because of hidden behaviour in this application, reading this document is recommended before use.
+# [download](https://github.com/kirjavascript/Flex2/releases)
 
+[//]: # (__docs__)
 
 ## Controls
 
-Most of the keyboard shortcuts (and indeed, behaviours for the application) are listed on the Mappings tab at the bottom. Some commands take a multiplier, so <kbd>32</kbd> + <kbd>Up</kbd> will move the selected mappings 32 pixels up, or <kbd>8</kbd> + <kbd>n t</kbd> will add eight new tiles.
+Most of the keyboard shortcuts (and indeed, behaviours for the application) are listed on the Mappings tab at the bottom. Some commands take a multiplier, so <kbd>32</kbd> + <kbd>Up</kbd> will move the selected mappings 32 pixels up, or <kbd>8</kbd> + <kbd>nt</kbd> will add eight new tiles.
 
 ### Inputs
 
@@ -29,6 +30,8 @@ Project files serve as definitions for all the objects in your project. They sho
 
 A key change from version 1 is that Flex no longer has a game mode. Data is saved and loaded as whatever the definition for the object says. This means you can mix formats (like S1 Mappings and S2 DPLCs for editing Sonic CD data), or even provide custom definitions.
 
+The 'label' specified in the mapping and DPLC definitions is to use as the main label if one is required without the output.
+
 ## Mapping Editor
 
 The mapping editor has the following mouse interactions;
@@ -51,26 +54,22 @@ When entering drawing mode by pressing <kbd>m</kbd>, dragging over the sprite wi
 
 ### Raw Editor
 
-When doing actions like deleting a mapping, Flex 2 will attempt to remove corresponding unused DPLCs. The raw editor gives you access to modify the raw data for mappings and DPLCs without performing any of these optimisations if you need it. It can also be used to change the draw order by reordering mappings.
+When doing actions like deleting a mapping, Flex 2 will attempt to remove corresponding unused DPLCs. The raw editor allows you to modify the raw data for mappings and DPLCs without performing any of these optimisations. It can also be used to change the draw order by reordering mappings.
 
 ## Palettes
 
-Palette input will be normalised into Megadrive colours. To change the order of palette lines, you can drag the numbers to different positions.
+Palette input will be normalised to Megadrive colours. To change the order of palette lines, you can drag the numbers to different positions.
 
 ## Sprites
 
 The Sprites tab gives an overview of your full object's data, allowing you to change sprites or reorder them by dragging and dropping.
 
 ## Importing
 
-When importing an image over the current frame this is no limitation on image dimensions.
+When importing an image over the current frame there is no limitation on image dimensions.
 
 For importing a spritesheet, either the alpha channel or the top left pixel color will serve as transparency.
 
 Mapping output can be configured to either reduce the number of tiles, or the number of mappings. The algorithm favours fewer horizontal sprites over vertical ones.
 
 Both methods of importing use CIEDE2000 nearest colour matching to the current palette.
-
-## Download
-
-The latest version can be found at: https://github.com/kirjavascript/Flex2/releases

development/icon.ico

@@ -34,7 +34,11 @@ module.exports = (env={}, args={}) => {
                 },
                 {
                     test: /\.json$/,
-                    loader: 'json-loader'
+                    loader: 'json-loader',
+                },
+                {
+                    test: /\.md$/,
+                    loader: 'raw-loader',
                 },
                 {
                     test: /\.js$/,

development/webpack.config.js

@@ -1,5 +1,3 @@
-modern mapping manipulation
-==
 desktop version
 project files
 sexy flexible UI layout
@@ -8,13 +6,7 @@ undo / redo
 draw directly on sprites
 import reduce mappings/tiles
 full access to dplc/mapping data
-influences; sonmaped, spriteplotter, soniksprite
-==
-raw editor doesn't clean up anything (explain deleting)
 to optimise all dplcs, toggle on/off
-SCD 23:39 <+flamewing> Mappings is S1; DPLC is S2 -> ?scd flag
-project autosaves
-for_window [title="Flex 2"] floating enable border normal
 ==
 V2: sprite rotation http://forums.sonicretro.org/index.php?showtopic=8848&st=0&p=159754&#entry159754
 https://yarnpkg.com/en/package/node-vibrant
@@ -26,6 +18,4 @@ add flex.json to sonic 2 disassembly
 create new file | newFactory={(path)=>{}}
 ==
 
-check version in documentation tab (move code)
-logo / have default as logo?
-describle what label is used for in asm
+logo

flex2.idea

@@ -0,0 +1,16 @@
+import { shell } from 'electron';
+
+import React, { Component } from 'react';
+
+export class A extends Component {
+
+    onClick = (e) => {
+        e.preventDefault();
+        shell.openExternal(this.props.href);
+    };
+
+    render() {
+        return <a {...this.props} href="#" onClick={this.onClick}/>;
+    }
+
+}

modules/components/documentation/a.js

@@ -0,0 +1,22 @@
+import React, { Component } from 'react';
+import README from '../../../README.md';
+import marked from 'marked';
+import { Version } from './version';
+import { shell } from 'electron';
+
+const docs = {__html: marked(README.split('(__docs__)').pop())};
+
+export class Documentation extends Component {
+
+    render() {
+        return <div className="documentation">
+            <h1>Flex 2</h1>
+            <Version/>
+            <br/>
+            <div
+                dangerouslySetInnerHTML={docs}
+            />
+        </div>;
+    }
+
+}

modules/components/documentation/index.js

@@ -0,0 +1,50 @@
+import packageJson from '../../../package.json';
+import React, { Component } from 'react';
+import { A } from './a.js';
+
+function semvarToInt(str) {
+    // currently just a rough calculation
+    return +str.split`.`.map((d) => d.padStart(3, '0')).join``;
+}
+
+export class Version extends Component {
+
+    state = { newVersion: void 0, error: false };
+
+    componentDidMount() {
+        fetch('https://raw.githubusercontent.com/kirjavascript/Flex2/master/package.json')
+            .then((response) => response.json())
+            .then(({version}) => {
+                const currentVersion = semvarToInt(packageJson.version);
+                const githubVersion = semvarToInt(version);
+                if (githubVersion > currentVersion) {
+                    this.setState({newVersion: version});
+                }
+            })
+            .catch((err) => {
+                console.error(err);
+            });
+    }
+
+    render() {
+        const { error, newVersion } = this.state;
+
+        return <div>
+            version {packageJson.version}
+            {newVersion && (
+                <span>
+                    {' - '}
+                    <A href="https://github.com/kirjavascript/Flex2/releases" className="magenta">
+                        a new version ({newVersion}) is available
+                    </A>
+                </span>
+            )}
+            {' ★ '}
+            <A href="https://www.github.com/kirjavascript/Flex2">
+                Source code
+            </A>
+            {error && <div className="red">{error}</div>}
+        </div>;
+    }
+
+}

modules/components/documentation/version.js

@@ -8,6 +8,7 @@ import { Palettes } from '#components/palettes';
 import { Art } from '#components/art/index';
 import { Sprites } from '#components/sprites';
 import { Mappings } from '#components/mappings';
+import { Documentation } from '#components/documentation';
 
 export class Layout extends Component {
 
@@ -31,6 +32,9 @@ export class Layout extends Component {
             else if (component == 'mappings') {
                 <Mappings node={node}/>;
             }
+            else if (component == 'documentation') {
+                <Documentation node={node}/>;
+            }
         };
     }
 

modules/components/layout/index.js

@@ -48,6 +48,12 @@ const DEFAULT_LAYOUT = {
                         'component': 'mappings',
                         'id': '#7',
                     },
+                    {
+                        'type': 'tab',
+                        'name': 'Documentation',
+                        'component': 'documentation',
+                        'id': '#8',
+                    },
                 ],
                 'active': true
             },

modules/components/layout/model.js

@@ -2,7 +2,6 @@ import React from 'react';
 import { render } from 'react-dom';
 import { Layout } from '#components/layout';
 
-import '#util/check-version';
 import './controls/keyboard';
 import './components/import';