Added file tab, started working on definition file loading

Author: kirjavascript

TODO

@@ -16,15 +16,14 @@ many writes while drawing
 project files easier to use / create
 sprites are offset if something else lods fullscreen
 FEATURES
+make decompression threaded
 ctrl+wheel for horiz scroll
 fullscreen icons - https://systemuicons.com/ arrows
 TASKS
 checkbox
 buffer is deprecated on save
 ==
 CUSTOM FORMATS
-specify mapping definition files or presets
-disable optimizations
 ==
 ROTSPRITE
 https://forums.sonicretro.org/index.php?threads/sprite-rotation-utility.8848/#post-159754

app/components/file/index.js

@@ -0,0 +1,23 @@
+import React, { useEffect, useState, useRef } from 'react';
+import { observer } from 'mobx-react';
+import { Item, Input, File as FileInput, Select, Editor } from '#ui';
+import { scriptListing } from '#formats/scripts';
+// console.log(require('electron').remote.app.getAppPath())
+// const chokidar = require('chokidar');
+
+// chokidar.watch('./scripts').on('all', console.log)
+
+// just load scripts from dropdown
+
+export const File = observer(() => {
+
+    useEffect(() => {
+
+
+    }, []);
+    return <div>
+        left align
+        <FileInput />
+        {JSON.stringify(scriptListing())}
+    </div>;
+});

app/components/layout/index.js

@@ -4,6 +4,7 @@ import { model, saveModel } from './model';
 import FlexLayout from 'flexlayout-react';
 import classNames from 'classnames';
 
+import { File } from '#components/file';
 import { Project } from '#components/project';
 import { Palettes } from '#components/palettes';
 import { Art } from '#components/art/index';
@@ -14,7 +15,9 @@ import { Documentation } from '#components/documentation';
 const getPanel = (node) => {
     const component = node.getComponent();
     if (!node._visible) return false;
-    if (component === 'project') {
+    if (component === 'file') {
+        return <File node={node}/>;
+    } else if (component === 'project') {
         return <Project node={node}/>;
     } else if (component === 'palettes') {
         return <Palettes node={node}/>;

app/components/layout/model.js

@@ -1,5 +1,7 @@
 import FlexLayout from 'flexlayout-react';
 
+let fileMenu;
+
 const DEFAULT_LAYOUT = {
     'global': {
         'splitterSize': 6,
@@ -36,6 +38,12 @@ const DEFAULT_LAYOUT = {
                 'selected': 0,
                 'id': '#2',
                 'children': [
+                    fileMenu = {
+                        'type': 'tab',
+                        'name': 'File',
+                        'component': 'file',
+                        'id': '#11',
+                    },
                     {
                         'type': 'tab',
                         'name': 'Project',
@@ -74,10 +82,26 @@ const DEFAULT_LAYOUT = {
     },
 };
 
+const recurse = (children, callback) => {
+    children.forEach(child => {
+        callback(child, children);
+        if (child.children) {
+            recurse(child.children, callback);
+        }
+    });
+};
+
 const migrations = [
     (layout) => {
         layout.global.tabSetEnableMaximize = true;
     },
+    (layout) => {
+        recurse([layout.layout], (node, parent) => {
+            if (node.component === 'project') {
+                parent.unshift(fileMenu);
+            }
+        });
+    },
 ];
 
 let savedLayout = localStorage.getItem('layout');
@@ -91,7 +115,7 @@ if (savedLayout && version < migrations.length) {
     migrations
         .slice(version)
         .forEach((migration, i) => {
-            console.info(`Layout migration #${i}`);
+            console.info(`Layout migration #${i + version}`);
             migration(layout);
             version++;
         });

app/components/palettes/picker.js

@@ -212,6 +212,15 @@ export const Sketch = ({
                 shadow:
                     'inset 0 0 0 1px rgba(0,0,0,.15), inset 0 0 4px rgba(0,0,0,.25)',
             },
+            circle: {
+                width: '4px',
+                height: '4px',
+                boxShadow: `0 0 0 1.5px ${(rgb.r+rgb.b+rgb.g) < 384 ? white : black}, inset 0 0 1px 1px rgba(0,0,0,.3),
+            0 0 1px 2px rgba(0,0,0,.4)`,
+                borderRadius: '50%',
+                cursor: 'hand',
+                transform: 'translate(-2px, -2px)',
+            },
         },
     });
 
@@ -223,6 +232,9 @@ export const Sketch = ({
                     hsl={hsl}
                     hsv={hsv}
                     onChange={onChange}
+                    pointer={() => (
+                        <div style={styles.circle} />
+                    )}
                 />
             </div>
             <div style={styles.controls} className="flexbox-fix">

app/components/project/object.js

@@ -7,7 +7,7 @@ import { compressionFormats } from '#formats/compression';
 const compressionList = Object.keys(compressionFormats);
 const mappingList = [...Object.keys(mappingFormats), 'Custom'];
 const dplcList = [...Object.keys(dplcFormats), 'Custom'];
-const paletteLengths = '1234'.split``.map((d) => ({label: d, value: +d}));
+const paletteLengths = [...'1234'].map((d) => ({label: d, value: +d}));
 
 @observer
 export class ObjectConfig extends Component {

app/formats/scripts/index.js

@@ -1,3 +1,33 @@
+import fs from 'fs';
+import { join, dirname } from 'path';
+import { errorMsg } from '#util/dialog';
+import { uniq } from 'lodash';
+
+// if it can't find it, ask to specify
+
+const scriptPaths = uniq([
+    process.cwd(),
+    dirname(process.execPath),
+]).map(path => join(path, 'scripts2'));
+
+const scriptDir = scriptPaths.find(path => fs.existsSync(path));
+
+if (!scriptDir) {
+    errorMsg(`Script Error`, `
+Could not find 'scripts' directory for mapping definition files
+Searched in;
+\t${scriptPaths.join('\n\t')}`);
+}
+
+export async function scriptListing() {
+    // readdirSync(scriptDir)
+    // console.log(await readdir(scriptDir))
+}
+
+// function scriptDir() {
+
+// }
+
 // next: file menu + custom loader -> remove brace
 //
 // script language
@@ -30,7 +60,7 @@
 //      ability to specify offset & etc
 //      allow editing filename
 //      format:
-//      add to project
+//      add conf to project
 // remove acdeditor
 // purple warning: arbitrary code - warning before yes
 // derive UI from script - make dplcs still optional

app/store/environment.js

@@ -261,8 +261,7 @@ autorun(() => {
     // force currentSprite to lie within bounds
     if (config.currentSprite < 0 || mappings.length == 0) {
         config.currentSprite = 0;
-    }
-    else if (config.currentSprite >= mappings.length) {
+    } else if (config.currentSprite >= mappings.length) {
         config.currentSprite = mappings.length -1;
     }
 });

app/store/storage.js

@@ -1,6 +1,3 @@
-import { autorun } from 'mobx';
-import debounce from 'lodash/debounce';
-
 let saveData = true;
 
 export function storage(obj, name) {
@@ -24,16 +21,11 @@ export function storage(obj, name) {
                         obj[prop] = saved[prop];
                     }
                 });
-        }
-        catch(e) {
+        } catch(e) {
             console.error(`Error parsing localStorage JSON data: ${e}`);
         }
     }
 
-    // save during editing
-    // const save = debounce((data) => { localStorage.setItem(name, data); }, 1000);
-    // autorun(() => { save(JSON.stringify(obj)); });
-
     // save on close
     window.addEventListener('beforeunload', () => {
         if (saveData) {