Merge branch 'refactor'

.eslintrc.js

@@ -4,7 +4,8 @@ module.exports = {
         'plugin:prettier/recommended',
         'prettier/react',
         'plugin:import/errors',
-        'plugin:import/warnings'
+        'plugin:import/warnings',
+        'plugin:css-modules/recommended'
     ],
     env: {
         browser: true,
@@ -48,7 +49,7 @@ module.exports = {
             }
         ]
     },
-    plugins: ['class-property'],
+    plugins: ['class-property', 'css-modules'],
     parser: 'babel-eslint',
     settings: {
         'import/resolver': {

README.md

@@ -1,4 +1,7 @@
-lineboi
+![logo](_media/lineboi-logo.png)
 
-some code borrowed from here
-https://github.com/ubilabs/axidraw/blob/master/src/lib/scale-move.js
+### **lineboi3000 is a way cool graphical interface for drawing, painting, adding EFX, and then sending your designs to a pen plotter or creating animations.** {docsify-ignore}
+
+BETA - click here for known issues and caveats
+
+\*\*\* For full documentation, visit the [Docs Page](http://username.github.io/repository)

docs/EFX.md

@@ -0,0 +1,15 @@
+<!-- https://docsify.js.org/#/more-pages -->
+
+# EFX
+
+## Intro
+
+Efx are
+
+## Modules
+
+### Move
+
+### Wiggle
+
+### Distort

docs/_sidebar.md

@@ -0,0 +1,17 @@
+-   [Home](/)
+
+-   [About](about.md)
+
+-   [Getting Started](getting-started.md)
+
+-   [Modes / Workflow](modes.md)
+
+    -   [Draw Mode](draw-mode.md)
+    -   [Efx Mode](efx-mode.md)
+    -   [Plot Mode](plot-mode.md)
+    -   [Gif Mode](gif-mode.md)
+    -   [Options Mode](options-mode.md)
+
+-   [Participating](contributing.md)
+-   [Thanks To](thanks.md)
+-   [License](license.md)

docs/about.md

@@ -0,0 +1,10 @@
+## What Is This
+
+Li'l app for drawing stuff and sending it to a Pen Plotter.
+
+Beta, still heavily under construction, but should generally work. So far I've tested it on a Macbook Air (early 2015) with:
+
+-   Pen Plotter: `AXIDraw V3`
+-   Node Version: `12.17.0`
+-   Yarn Version: `1.22.4`
+-   NPM Version: `6.14.4`

docs/contributing.md

@@ -0,0 +1,25 @@
+### Roadmap
+
+Things I'm planning on adding at some point in the future:
+
+-   Create packaged Electron app
+-   Portrait mode
+-   More tests
+-   More filters
+-   Different drawing tools (fill by creating selection)
+
+### Contact
+
+To get in touch, open an Issue in the Github repo or tweet me: @nah_solo
+
+### Reporting Bugs
+
+If you find anything broken (very likely!) please get in touch and I'll take a look
+
+### Requesting Features
+
+If you'd like me to look into a feature, please get in touch via Github Issues or Twitter. If something seems reasonable I'll consider adding it in :)
+
+### Contributing
+
+I've been working on this solo for a while, so haven't documented much of the code. If you'd like to participate and have any questions, please feel free to open an issue or tweet me (@nah_solo) and I'll help you out.

docs/docs-styles.css

@@ -0,0 +1,21 @@
+@font-face {
+    font-family: 'VCR';
+    src: url('./_media/VCR_OSD_MONO.ttf');
+}
+
+:root {
+    --base-font-family: 'VCR', -apple-system, BlinkMacSystemFont, 'Segoe UI',
+        Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji',
+        'Segoe UI Symbol';
+    --base-font-size: 1.1em;
+    --theme-color: turquoise;
+}
+
+.docsImg {
+    outline: 3px solid black;
+    padding: 20px;
+    background: white;
+    border-radius: 0% 0% 0% 0% / 0% 0% 0% 0%;
+    color: white;
+    box-shadow: 8px 8px rgba(0, 0, 0, 0.15);
+}

docs/draw-mode.md

@@ -0,0 +1,93 @@
+# Draw Mode
+
+![draw mode](_media/draw-mode.png ':class=docsImg')
+
+## Layer Controls
+
+Layer controls apply in both Draw Mode and Efx Mode. Find them on the top bar.
+
+Layers in Draw Mode and Efx Mode are displayed left to right. The layer on the far left is on bottom, the layer on the far right is on top. The selected layer has a green background.
+
+### Layer Interface
+
+![layer controls](_media/layer-controls.png ':class=docsImg')
+
+# Global Options
+
+![global draw options](_media/global-draw-options.png ':class=docsImg')
+
+-   **Lines**: Sum of all lines on currently visible layers
+-   **Points**: Sum of all points on currently visible layers
+-   **Points On/Off**: Click to highlight each point in the currently visible layers
+-   **Grid On/Off**: Click to show a square grid. Click the buttons to the right to make the grid squares bigger or smaller
+
+# Drawing Submodes
+
+![layer controls](_media/draw-modes.png ':class=docsImg')
+
+## Tools
+
+![draw mode tools](_media/draw-mode-tools.png ':class=docsImg')
+
+To use a tool, select one, then click and drag on the canvas while in Draw mode. Alternatively you can move the mouse and hold the Shift key to draw (good for trackpads or people with sore fingers).
+
+### Pen
+
+Draw a line.
+
+### Fill Brush
+
+Draw an area that will then be filled with lines at a spacing/angle/density you can select.
+
+### Eraser
+
+Erase points under the area you've drawn. If points to be erased are within a line, the line will be split into multiple lines
+
+### Shapes
+
+Draw a straight line, square/rectangle, or circle
+
+### Text
+
+![draw mode text options](_media/draw-mode-text-options.png ':class=docsImg')
+
+-   **Text Content**: What you want to appear
+-   **Font Size**: How big you want it to be
+-   **Font Selector**: Font face you want to use (click left and right to pick another)
+-   **Outline**: Enable to print the outline around the inner part of the text
+-   **Distance Between letters**: Distance between letters in px
+-   **Distance Between Words**: Distance between words in px
+
+Fill Options (add link) also apply to the text output.
+
+## Scale Tools
+
+![draw mode text options](_media/draw-mode-scale-options.png ':class=docsImg')
+
+### Shrink
+
+Shrink the current canvas by a given fraction. Click the fraction you wanna use and then `Shrink Canvas` to apply.
+
+![draw mode text options](_media/draw-mode-scale-shrink-options.png ':class=docsImg')
+
+**Note:** Points and lines are not smoothed or manipulated when shrunk. If you have a high number of points/lines, the count will remain the same. If you then multiply this canvas you might have a massive number of points/lines, which could make some processing take longer.
+
+### Multiply
+
+Take the current canvas and multiply it a given number of times. The image you have currently on each layer will be added X times to the width and Y times to the height.
+
+![draw mode text options](_media/draw-mode-scale-multiply-options.png ':class=docsImg')
+
+Select how many times to multiply by X and Y. The number shown is the final height by width of the output.
+
+## Template
+
+Add lines to the current layer based on a template or generator. Select one and then hit `APPLY` to add it to the current layer.
+
+![draw mode text options](_media/draw-mode-template-options.png ':class=docsImg')
+
+-   **Frame**: Big rectangle or square around the edge of your canvas
+-   **One Circle**: Big circle nearing the edge of your canvas
+-   **Many Circles**: A lot of circles, from big to little depending on your options
+-   **Many Squares**: Lots of rectangle/circle frames going from large to small
+-   **Rain**: Vertical lines at various lengths, spacing, and point density, starting from the top or the bottom of the canvas.

docs/efx-mode.md

@@ -0,0 +1,40 @@
+# EFX Mode
+
+EFX can process the lines on the `Draw Mode` layers with effects, manipulations, and other funky stuff.
+
+![efx mode](_media/efx-mode.png ':class=docsImg')
+
+## Layer Controls
+
+The same controls in [Draw Mode](/draw-mode#layer-controls) apply to layers in EFX Mode.
+
+## Action Buttons
+
+![EFX mode](_media/efx-mode-actions.png ':class=docsImg')
+
+-   **`RUN CURRENT`**: Run the active layers (below) on the current layer
+-   **`RUN ALL LAYERS`**: Run the efx for all visible layers
+-   **`COPY EFX TO ALL LAYERS`**: Copy the EFX settings for the currently active layer to all other layers
+-   **`SAFE FRAME TO GIF`**: Add the currently visible effected layers to the library in Gifmaker mode
+
+## Add Filter
+
+![layer controls](_media/efx-mode-add-filter.png ':class=docsImg')
+
+Click left or right to select the layer you want to add. You can also click the filter name to see a list of all available filters, and then click one to auto-add.
+
+`ADD`: Add the selected filter to the current layer
+
+## Filters
+
+### Single Filter
+
+![single filter](_media/efx-mode-one-filter.png ':class=docsImg')
+
+The arrows move the filter up or down in the list of filters. The X deletes the filter from the current layer.
+
+`ON`/`OFF` enables or disables the layer. An `OFF` filter remains in the list but will not be used to process lines.
+
+#### Filter Options
+
+Each filter has various options that can adjust the intensity or details of the output. add link here

docs/getting-started.md

@@ -0,0 +1,37 @@
+# Getting Started
+
+I haven't set up Electron app packaging yet, so you can run locally via `npm` or `yarn`.
+
+## Quick Start
+
+`yarn` or `npm i` to install all dependencies
+
+`yarn start` or `npm start` to run the dev server
+
+`yarn dev` or `npm dev` to run the dev server (devtools open, and Webpack rebuilds on changes to files)
+
+## Useful Yarn/NPM Commands
+
+In a terminal window, navigate to the main folder and enter `yarn [command]` or `npm [command]`
+
+| COMMAND              | RESULT                                                                          |
+| -------------------- | ------------------------------------------------------------------------------- |
+| `start`              | start app                                                                       |
+| `dev`                | start app in dev mode (Webpack reloads changed files, dev tools are open        |
+| `electron`           | run just main Electron window                                                   |
+| `electron:dev`       | run Electron window in dev mode                                                 |
+| `docs`               | Serve docs folder locally                                                       |
+| `reset`              | Remove `node_modules` and `yarn.lock` file, reinstall                           |
+| `webpack:watch`      | Start Webpack, reloads when files change                                        |
+| `webpack:dev`        | Build Webpack files in dev mode                                                 |
+| `webpack:prod`       | Build Webpack files in prod mode                                                |
+| `cncserver`          | Start the server that interfaces with a Pen Plotter                             |
+| `format`             | Run tools to format code style, check for ESLint accuracy, and format CSS files |
+| `test`               | Run test files                                                                  |
+| `test:src`           | Just test files in `src` folder                                                 |
+| `test:filters`       | Generate example images for filters                                             |
+| `test:filters:watch` | Watch for changes to filter files and generate examples images                  |
+| `test:update`        | Update screenshots for tests                                                    |
+| `test:update:watch`  | Update screenshots for tests when files are changed                             |
+| `test:watch`         | Run tests on changed files                                                      |
+| `test:main`          | Run Spectron e2e tests for Electron app                                         |

docs/gif-mode.md

@@ -0,0 +1,3 @@
+# Plot Mode
+
+![efx mode](_media/efx-mode.png ':class=docsImg')

docs/index.html

@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<html lang="en">
+    <head>
+        <meta charset="UTF-8" />
+        <title>lineboi3000 docs</title>
+        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
+        <meta name="description" content="Description" />
+        <meta
+            name="viewport"
+            content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"
+        />
+        <link
+            rel="stylesheet"
+            href="https://cdn.jsdelivr.net/npm/docsify-themeable@0/dist/css/theme-simple.css"
+        />
+        <link rel="stylesheet" href="docs-styles.css" />
+    </head>
+    <body>
+        <div id="app"></div>
+        <script>
+            window.$docsify = {
+                name: 'lineboi3000',
+                repo: 'https://github.com/lilkraftwerk/lineboi3000',
+                homepage: 'README.md',
+                loadSidebar: true,
+                maxLevel: 3,
+                subMaxLevel: 4
+            };
+        </script>
+        <script src="//cdn.jsdelivr.net/npm/docsify/lib/docsify.min.js"></script>
+        <script src="https://cdn.jsdelivr.net/gh/rizdaprasetya/docsify-fix-pageload-scroll@master/index.js"></script>
+        <script src="https://cdn.jsdelivr.net/npm/docsify-themeable@0"></script>
+    </body>
+</html>

docs/license.md

@@ -0,0 +1,9 @@
+# License
+
+> Copyright 2020 Lucas Mathis
+>
+> Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+>
+> The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+>
+> THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

docs/modes.md

@@ -0,0 +1,7 @@
+# Modes
+
+lineboi3000 has four main modes: Draw, Efx, Plot, and Gifmaker. There's also an Options view.
+
+# Workflow
+
+You start by creating lines in Draw mode. You can then run Efx on a given layer, or on all layers, in Efx mode. Once you have some lines with Efx on them, you can plot them in Plot mode.

docs/options-mode.md

@@ -0,0 +1,12 @@
+# Options Mode
+
+## Global Options
+
+![efx mode](_media/options-mode-options.png ':class=docsImg')
+
+-   **`Draw Area Height / Width`**: Height of the drawing canvas in pixels
+-   **`Visible Point Radius`**: Radius of the circle highlighting a single point when `POINTS ON` mode is enabled
+-   -   **`Point Show Color`**: Color of the circle highlighting a single point when `POINTS ON` mode is enabled
+-   **`PRESS SHIFT TO DRAW`**: When enabled, holding `Shift` while moving the mouse will draw in Draw Mode
+-   **`SAVE`**: Save the current options
+-   **`CANCEL`**: Revert without saving changes

docs/plot-mode.md

@@ -0,0 +1,3 @@
+# Plot Mode
+
+![efx mode](_media/efx-mode.png ':class=docsImg')

docs/readme.md

@@ -0,0 +1,21 @@
+![logo](_media/lineboi-logo.png)
+
+### **lineboi3000 is a way cool graphical interface for drawing, painting, adding EFX, and then sending your designs to a pen plotter or creating animations.** {docsify-ignore}
+
+BETA - click here for known issues and caveats
+
+(demo pic goes here)
+
+## Table O' Contents
+
+-   [Getting Started](getting-started.md)
+-   [Modes / Workflow](modes.md)
+    -   [Draw Mode](draw-mode.md)
+    -   [Efx Mode](efx-mode.md)
+    -   [Plot Mode](plot-mode.md)
+    -   [Gif Mode](gif-mode.md)
+    -   [Options Mode](options-mode.md)
+
+*   [Participating](contributing.md)
+*   [Thanks U](thanks.md)
+*   [License](license.md)