Merge pull request #275 from jeffeb3/group-restructure-take-2

Group restructure take 2

.eslintrc.js

@@ -3,10 +3,10 @@ module.exports = {
   env: {
     node: true,
     browser: true,
-    jest: true
+    jest: true,
   },
   parserOptions: {
-    parser: '@typescript-eslint/parser',
+    parser: "@typescript-eslint/parser",
     sourceType: "module",
     ecmaVersion: 2018,
     ecmaFeatures: {
@@ -20,92 +20,92 @@ module.exports = {
     "eslint:recommended",
     "plugin:react/recommended",
     "plugin:react-redux/recommended",
-    'plugin:@typescript-eslint/recommended'
+    "plugin:@typescript-eslint/recommended",
+    "plugin:prettier/recommended",
   ],
   rules: {
     // override/add rules settings here, such as:
     // 'vue/no-unused-vars': 'error'
-    "react/prop-types": 'off',
+    "object-shorthand": ["error", "always"],
+    "react/prop-types": "off",
     // Add TypeScript specific rules (and turn off ESLint equivalents)
-    '@typescript-eslint/consistent-type-assertions': 'warn',
-    'no-array-constructor': 'off',
-    '@typescript-eslint/no-array-constructor': 'warn',
-    'no-redeclare': 'off',
-    '@typescript-eslint/no-redeclare': 'warn',
-    'no-use-before-define': 'off',
-    '@typescript-eslint/no-use-before-define': [
-       'warn',
-       {
-         functions: false,
-         classes: false,
-         variables: false,
-         typedefs: false,
-       },
-     ],
-    'no-unused-expressions': 'off',
-    '@typescript-eslint/no-unused-expressions': [
-      'error',
+    "@typescript-eslint/consistent-type-assertions": "warn",
+    "no-array-constructor": "off",
+    "@typescript-eslint/no-array-constructor": "warn",
+    "no-redeclare": "off",
+    "@typescript-eslint/no-redeclare": "warn",
+    "no-use-before-define": "off",
+    "react-redux/useSelector-prefer-selectors": "off",
+    "@typescript-eslint/no-use-before-define": [
+      "warn",
+      {
+        functions: false,
+        classes: false,
+        variables: false,
+        typedefs: false,
+      },
+    ],
+    "no-unused-expressions": "off",
+    "@typescript-eslint/no-unused-expressions": [
+      "error",
       {
         allowShortCircuit: true,
         allowTernary: true,
         allowTaggedTemplates: true,
       },
     ],
-    'no-unused-vars': 'off',
-    '@typescript-eslint/no-unused-vars': [
-      'warn',
+    "no-unused-vars": "off",
+    "@typescript-eslint/no-unused-vars": [
+      "warn",
       {
-        args: 'none',
+        args: "none",
         ignoreRestSiblings: true,
       },
     ],
-    'no-useless-constructor': 'off',
-    '@typescript-eslint/no-useless-constructor': 'warn',
-    'react/no-unused-prop-types': 'off',
-    'react-redux/no-unused-prop-types': 'warn',
-    'react-redux/prefer-separate-component-file': 'off',
-    semi: [ 'warn', 'never' ]
+    "no-useless-constructor": "off",
+    "@typescript-eslint/no-useless-constructor": "warn",
+    "react/no-unused-prop-types": "off",
+    "react-redux/no-unused-prop-types": "warn",
+    "react-redux/prefer-separate-component-file": "off",
+    "prettier/prettier": "error",
+    semi: ["warn", "never"],
   },
   settings: {
     react: {
       createClass: "createReactClass", // Regex for Component Factory to use,
-                                         // default to "createReactClass"
-      pragma: "React",  // Pragma to use, default to "React"
-      fragment: "Fragment",  // Fragment to use (may be a property of <pragma>), default to "Fragment"
+      // default to "createReactClass"
+      pragma: "React", // Pragma to use, default to "React"
+      fragment: "Fragment", // Fragment to use (may be a property of <pragma>), default to "Fragment"
       version: "detect", // React version. "detect" automatically picks the version you have installed.
-                           // You can also use `16.0`, `16.3`, etc, if you want to override the detected value.
-                           // It will default to "latest" and warn if missing, and to "detect" in the future
-      flowVersion: "0.53" // Flow version
+      // You can also use `16.0`, `16.3`, etc, if you want to override the detected value.
+      // It will default to "latest" and warn if missing, and to "detect" in the future
+      flowVersion: "0.53", // Flow version
     },
     propWrapperFunctions: [
-        // The names of any function used to wrap propTypes, e.g. `forbidExtraProps`. If this isn't set, any propTypes wrapped in a function will be skipped.
-        "forbidExtraProps",
-        {"property": "freeze", "object": "Object"},
-        {"property": "myFavoriteWrapper"},
-        // for rules that check exact prop wrappers
-        {"property": "forbidExtraProps", "exact": true}
+      // The names of any function used to wrap propTypes, e.g. `forbidExtraProps`. If this isn't set, any propTypes wrapped in a function will be skipped.
+      "forbidExtraProps",
+      { property: "freeze", object: "Object" },
+      { property: "myFavoriteWrapper" },
+      // for rules that check exact prop wrappers
+      { property: "forbidExtraProps", exact: true },
     ],
     componentWrapperFunctions: [
-        // The name of any function used to wrap components, e.g. Mobx `observer` function. If this isn't set, components wrapped by these functions will be skipped.
-        "observer", // `property`
-        {"property": "styled"}, // `object` is optional
-        {"property": "observer", "object": "Mobx"},
-        {"property": "observer", "object": "<pragma>"} // sets `object` to whatever value `settings.react.pragma` is set to
+      // The name of any function used to wrap components, e.g. Mobx `observer` function. If this isn't set, components wrapped by these functions will be skipped.
+      "observer", // `property`
+      { property: "styled" }, // `object` is optional
+      { property: "observer", object: "Mobx" },
+      { property: "observer", object: "<pragma>" }, // sets `object` to whatever value `settings.react.pragma` is set to
     ],
     formComponents: [
       // Components used as alternatives to <form> for forms, eg. <Form endpoint={ url } />
       "CustomForm",
-      {"name": "Form", "formAttribute": "endpoint"}
+      { name: "Form", formAttribute: "endpoint" },
     ],
     linkComponents: [
       // Components used as alternatives to <a> for linking, eg. <Link to={ url } />
       "Hyperlink",
-      {"name": "Link", "linkAttribute": "to"}
-    ]
+      { name: "Link", linkAttribute: "to" },
+    ],
   },
-  plugins: [
-     "react",
-     "react-redux",
-     "@typescript-eslint"
-   ]
+  plugins: ["react", "react-redux", "@typescript-eslint", "prettier"],
 }

.github/workflows/npmRunDeploy.yml

@@ -16,11 +16,11 @@ jobs:
     runs-on: ubuntu-latest
 
     steps:
-    - uses: actions/checkout@v2
+    - uses: actions/checkout@v4
     - name: Use Node.js
       uses: actions/setup-node@v1
       with:
-        node-version: '16.x'
+        node-version: '20.x'
     - name: Install Packages
       run: npm install
     - name: Build page
@@ -31,5 +31,3 @@ jobs:
         deploy_key: ${{ secrets.ACTIONS_DEPLOY_KEY }}
         publish_dir: ./build
         cname: sandify.org
-
-

.github/workflows/npmTest.yml

@@ -16,12 +16,12 @@ jobs:
 
     strategy:
       matrix:
-        node-version: [16.x]
+        node-version: [20.x]
 
     steps:
-    - uses: actions/checkout@v2
+    - uses: actions/checkout@v3
     - name: Use Node.js ${{ matrix.node-version }}
-      uses: actions/setup-node@v1
+      uses: actions/setup-node@v3
       with:
         node-version: ${{ matrix.node-version }}
     - run: npm install

.nvmrc

@@ -1 +1 @@
-16.14.1
+20.6.1

.prettierignore

@@ -0,0 +1,4 @@
+node_modules
+build
+tmp
+.eslintcache

.prettierrc.json

@@ -0,0 +1,4 @@
+{
+  "semi": false,
+  "singleAttributePerLine": true
+}

Dockerfile

@@ -1,6 +1,6 @@
 # Dockerfile for development of sandify
 
-FROM node:16.10.0
+FROM node:20.6.1
 
 RUN npm install -g npm
 #RUN npm install -g

NOTICE

@@ -323,7 +323,7 @@ THE SOFTWARE.
 
 Noisejs, https://gitlab.ilmiont.net/ilmiont/noisejs/
 =========================================================
-This project is no longer maintained by the contributor (deleted from Github), and was in turn
+This project is no longer maintained by the contributor (deleted from GitHub), and was in turn
 adapted from an older project, https://github.com/josephg/noisejs.
 
 MIT License

README.md

@@ -1,41 +1,31 @@
-## Sandify 
+## Sandify
 
-Sandify is working on a solution to turn your cold, empty hearted, emotionless sand tables into cold, empty hearted emotionless sand table robots with enchanting patterns.
+Sandify turns your cold, empty-hearted, emotionless sand tables into cold, empty-hearted, emotionless sand table robots with enchanting patterns.
 
 [![Build Status](https://img.shields.io/endpoint.svg?url=https%3A%2F%2Factions-badge.atrox.dev%2Fjeffeb3%2Fsandify%2Fbadge&style=for-the-badge)](https://actions-badge.atrox.dev/jeffeb3/sandify/goto)
 
-The output of sandify is code you can run on your sand table. The requirements of this
-code are:
- - Continuous, since the ball can't lift to travel to another location
- - Can't exceed machine limits, since the firmware isn't smart enough about how the limits are
- handled.
- - Not a requirement, but the patterns would be better if they mostly cover the area.
+Sandify outputs code you can run on your sand table. The code produced is:
+ - Continuous, since the ball can't lift to travel to another location.
+ - Bounded to never exceed machine limits, as the firmware isn't typically smart enough to handle.
 
-Different designs are possible, and input is welcome from the community.
+Sandify supports a large number of shape types and effects, so be creative! Input is welcome from the community.
 
-## Using the tool
+## Using Sandify
 
-It's currently hosted at:
-
-https://sandify.org
-
- - Visit the webpage
- - Adjust the machine limits to match your build
- - Play with the inputs until you have a pleasing pattern.
- - Save the code with the export button.
-
-[Check out the wiki](https://github.com/jeffeb3/sandify/wiki)
+ - Head over to [sandify.org]((https://sandify.org).
+ - Adjust the machine limits to match your table.
+ - Add shapes and effects until you create a pleasing pattern.
+ - Export the code in a format supported by your table.
 
 ## More info
 
-See the birthplace here:
-
-https://forum.v1engineering.com/t/does-this-count-as-a-build/6037?u=jeffeb3
-
-## Running sandify from source on a local machine
+- Check out the [wiki](https://github.com/jeffeb3/sandify/wiki) for lots of details on features.
+- Read about how Sandify [came into being](https://forum.v1engineering.com/t/does-this-count-as-a-build/6037?u=jeffeb3).
 
-AFAIK, the steps to replicate this on your machine are:
+## Running from source locally
 
- - Install npm and node.js
- - Run 'npm install' from here
- - Run 'npm start' and it should open your browser to http://127.0.0.1:3000
+ - [Install npm and node.js](https://docs.npmjs.com/downloading-and-installing-node-js-and-npm).
+ - Clone the Sandify repository, and change to that directory.
+ - `npm install`
+ - `npm start`
+ - View in your browser at http://127.0.0.1:3000 or http://localhost:3000.

TODO.md

@@ -0,0 +1,46 @@
+### TODO FOR RELEASE
+
+- get rectangular preview image from Jeff
+- bug: wiper, 90 degrees with noise effect; change wiper size from 4 to 40, hangs browser
+- bug: edge-case optimization of pattern with inverted mask is adding a center point within the mask; workaround is to enable "minimize perimeter moves", but this isn't user-friendly obviously
+
+### FUTURE CONSIDERATION
+
+- refactor slider so it's precise like fine tuning; support Shift key as well
+- use react-router-dom for routes so browser back button works with tabs
+- groups
+  - selectLayersByGroupId - some kind of compound parent key "[a]-[b]"
+  - big thunk which just changes layer dimensions
+  - if it has effects, can render those via selector
+- store pattern name and other desired attribution (?) in exported file and display it somewhere (either stats tab or in the preview window)
+- show pattern start/end type (e.g., 1-0) if start/end if specified
+- new fine tuning setting: when backtracking at end, optionally ignore border if enabled
+
+## NEW IN 1.0.0
+
+- User interface
+  - Layout improvements
+  - Can zoom in/out in the preview window.
+  - Can now click on a layer in the preview window to select the layer.
+  - Improved coloring and display layers and effects when they are selected and dragged to make editing more intuitive.
+- Save and load patterns (new .sdf file format)
+  - Patterns can be saved and loaded from a file.
+  - Unsaved work is automatically preserved in the browser (can reload the page without losing work)
+- Effects
+  - Effects are now displayed within their parent layer, and are no longer shown in the "layers" list.
+  - Track
+    - Improved settings make it easier to either "unwind" a single shape along a prescribed track, or position multiple shapes along a track.
+  - Fine tuning
+    - Percentages are based on overall length of the pattern, not number of vertices. Fractional values are supported.
+  - Fisheye
+    - Improved rendering when applied to shapes that have straight lines
+  - Transformer (new)
+   - New effect to allow resizing and rotation of a given layer
+- Shapes
+  - Loop, scale, spin, and track transformers, as well as fine tuning settings, are now individual effects that can be added to a shape in any order, and are not added by default.
+  - New "maintain aspect ratio" setting, when enabled, forced a fixed aspect ratio.
+- Machines
+ - Configure (add/remove/edit) multiple machines and switch between them.
+ - Machine settings from imported patterns are automatically saved as an "[Imported]" machine.
+- Export
+  - Machine and shape settings are no longer added as comments to exported files in various formats.

config/jest/fileTransform.js

@@ -17,7 +17,7 @@ module.exports = {
         pascalCase: true,
       })
       const componentName = `Svg${pascalCaseFilename}`
-      return `const React = require('react')
+      const code = `const React = require('react')
       module.exports = {
         __esModule: true,
         default: ${assetFilename},
@@ -33,6 +33,9 @@ module.exports = {
           }
         }),
       }`
+      return {
+        code
+      }
     }
 
     return `module.exports = ${assetFilename}`

index.html

@@ -3,7 +3,6 @@
   <head>
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
     <link rel="shortcut icon" href="/favicon.ico">
 
     <!-- Shim for module using global -->