├── .editorconfig
├── .gitattributes
├── .gitignore
├── LICENSE
├── README.md
├── images.d.ts
├── package.json
├── public
    ├── index.html
    └── manifest.json
├── roblox
    └── RadialImage.lua
├── src
    ├── components
    │   ├── App.test.tsx
    │   ├── App.tsx
    │   ├── Canvas.tsx
    │   ├── Generator.css
    │   ├── Generator.tsx
    │   └── SheetRenderer.tsx
    ├── constants.ts
    ├── index.css
    ├── index.tsx
    ├── logo.svg
    ├── registerServiceWorker.ts
    └── typings
    │   └── math-expression-evaluator.d.ts
├── tsconfig.json
├── tsconfig.prod.json
├── tsconfig.test.json
├── tslint.json
└── yarn.lock


/.editorconfig:
--------------------------------------------------------------------------------
 1 | root = true
 2 | 
 3 | [*]
 4 | end_of_line = lf
 5 | trim_trailing_whitespace = true
 6 | charset = utf-8
 7 | 
 8 | [*.js]
 9 | insert_final_newline = true
10 | indent_style = space
11 | indent_size = 2
12 | 
13 | [{package.json,*.yml,*.cjson}]
14 | indent_style = space
15 | indent_size = 2
16 | 
17 | [*.lua]
18 | indent_style = tab
19 | insert_final_newline = false
20 | trim_trailing_whitespace = true


--------------------------------------------------------------------------------
/.gitattributes:
--------------------------------------------------------------------------------
1 | # Auto detect text files and perform LF normalization
2 | * text=auto
3 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | # See https://help.github.com/ignore-files/ for more about ignoring files.
 2 | 
 3 | # dependencies
 4 | /node_modules
 5 | 
 6 | # testing
 7 | /coverage
 8 | 
 9 | # production
10 | /build
11 | 
12 | # misc
13 | .DS_Store
14 | .env.local
15 | .env.development.local
16 | .env.test.local
17 | .env.production.local
18 | 
19 | npm-debug.log*
20 | yarn-debug.log*
21 | yarn-error.log*
22 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) 2018 Eryn Lynn
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # RadialSpriteSheetGenerator
 2 | 
 3 | <p align="center">
 4 |   <img src="https://thumbs.gfycat.com/WindingAppropriateCollardlizard-size_restricted.gif" alt="Thinking">
 5 | </p>
 6 | 
 7 | This is a web app that generates radial progress indicator sprite sheets right in the browser.
 8 | 
 9 | <https://eryn.io/RadialSpriteSheetGenerator/>
10 | 
11 | ## Building locally
12 | To build the web app locally and make changes yourself, simply clone this repository and run [`yarn`](https://yarnpkg.com/en/) to install the dependencies, then `yarn start` to start the app.
13 | 
14 | ## Use in Roblox
15 | For ease of use in Roblox, a module is provided that can take in configuration the web app provides and can make an ImageLabel or ImageButton display your progress indicator with little work.
16 | 
17 | To get prepped, follow these instructions:
18 | 
19 | 1. To get the module, save it from [here](https://raw.githubusercontent.com/evaera/RadialSpriteSheetGenerator/master/roblox/RadialImage.lua) and then put it in your game as a ModuleScript.
20 | 	1. The demo below assumes you put the module into ReplicatedStorage named "RadialImage".
21 | 2. Use the web app to generate your sprite sheets and configuration JSON. Upload the images to Roblox.
22 | 	1. Make sure you tick the "Use in Roblox" checkbox before copying the JSON.
23 | 3. Modify the JSON, replacing the number part of `rbxassetid://1` with the Image ID of the first image you uploaded (and likewise for any additional images).
24 | 4. Store the JSON in your Roblox game, either as a StringValue or embedded in a script somewhere.
25 | 	1. The demo below assumes you put the JSON into a StringValue named "Configuration" inside the script that's running.
26 | 
27 | ```lua
28 | -- For the purposes of this demo, the script is located inside of an ImageLabel.
29 | -- Make sure you update the following line to point to wherever you added the module in your game:
30 | local RadialImage = require(game:GetService("ReplicatedStorage"):WaitForChild("RadialImage"))
31 | local r = RadialImage.new(script.Configuration.Value, script.Parent)
32 | 
33 | game:GetService("RunService").Heartbeat:Connect(function()
34 | 	r:UpdateLabel(tick() % 5 / 5)
35 | end)
36 | ```
37 | 
38 | ### API
39 | 
40 | ```cs
41 | RadialImage RadialImage.new (<string, table> configuration [, <ImageLabel | ImageButton> label])
42 |   /// Instantiates a new instances of RadialImage.
43 |   // @param configuration Expects a valid configuration generated from the web app, in either JSON or table form.
44 |   // @param label Optional, provides a label to be used with the UpdateLabel method. If this is omitted, you must pass it as the second argument to UpdateLabel.
45 |   // @returns RadialImage A newly-created RadialImage instance.
46 | ```
47 | 
48 | ```cs
49 | void RadialImage:UpdateLabel (number alpha [, <ImageLabel | ImageButton> label])
50 |   /// Updates an ImageLabel or ImageButton to show the most appropriate frame based on the current progress.
51 |   // @param alpha A number between 0 and 1 that indicates how far along the progress is. The label will then display the most appropriate image based on the number of available images in the sprite sheet.
52 |   // @param label Optional, allows you to pass in a custom label to do the update operation on. Required if `label` is omitted from the instantiation.
53 | ```
54 | 
55 | ```cs
56 | <number X, number Y, number ImageIndex> RadialImage:GetFromAlpha (number alpha)
57 |   /// Returns the information necessary to display the appropriate image from the sprite sheet.
58 |   // @param alpha A number between 0 and 1 that indicates how far along the progress is. Information for the most appropriate frame will be returned based on the number of available images in the sprite sheet.
59 |   // @returns <number, number, number> Returns the X coordinate, Y coordinate, and the Image number for which to display based on the given alpha.
60 | ```
61 | 
62 | 
63 | ```cs
64 | void RadialImage:Preload ()
65 |   /// Preloads the images in the given sheet and caches them in ImageLabels. You must call :Destroy() when you're done if you call :Preload()
66 |   // NOTE: Make sure your script isn't inside the label because your label will be cloned.
67 | ```
68 | 
69 | ```cs
70 | void RadialImage:Destroy ()
71 |   /// Destroys the cache of preloaded image labels. You only need to call this if you called Preload.
72 | ```


--------------------------------------------------------------------------------
/images.d.ts:
--------------------------------------------------------------------------------
1 | declare module '*.svg'
2 | declare module '*.png'
3 | declare module '*.jpg'
4 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "src",
 3 |   "version": "0.1.0",
 4 |   "private": true,
 5 |   "homepage": "https://eryn.io/RadialSpriteSheetGenerator",
 6 |   "dependencies": {
 7 |     "@material-ui/core": "^1.2.1",
 8 |     "gh-pages": "^1.2.0",
 9 |     "math-expression-evaluator": "^1.2.17",
10 |     "react": "^16.4.0",
11 |     "react-dom": "^16.4.2",
12 |     "react-popper": "^0.10.4",
13 |     "react-scripts-ts": "2.16.0"
14 |   },
15 |   "scripts": {
16 |     "start": "react-scripts-ts start",
17 |     "build": "react-scripts-ts build",
18 |     "test": "react-scripts-ts test --env=jsdom",
19 |     "predeploy": "npm run build",
20 |     "deploy": "gh-pages -d build -m \"Automated deployment\"",
21 |     "eject": "react-scripts-ts eject"
22 |   },
23 |   "devDependencies": {
24 |     "@types/jest": "^23.0.2",
25 |     "@types/material-ui": "^0.20.8",
26 |     "@types/node": "^10.3.2",
27 |     "@types/react": "^16.3.17",
28 |     "@types/react-dom": "^16.0.6",
29 |     "tslint-config-standard": "^7.0.0",
30 |     "typescript": "^2.9.1"
31 |   }
32 | }
33 | 


--------------------------------------------------------------------------------
/public/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="utf-8">
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
 6 |     <meta name="theme-color" content="#000001">
 7 | 
 8 |     <link rel="manifest" href="%PUBLIC_URL%/manifest.json">
 9 |     <!-- <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico"> -->
10 |     <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500">
11 |     <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
12 | 
13 |     <title>Radial Sprite Sheet Generator</title>
14 |   </head>
15 |   <body>
16 |     <noscript>
17 |       You need to enable JavaScript to run this app.
18 |     </noscript>
19 |     <div id="root"></div>
20 |   </body>
21 | </html>
22 | 


--------------------------------------------------------------------------------
/public/manifest.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "short_name": "Radial Generator",
 3 |   "name": "Radial Sprite Sheet Generator",
 4 |   "icons": [
 5 |     {
 6 |       "src": "favicon.ico",
 7 |       "sizes": "64x64 32x32 24x24 16x16",
 8 |       "type": "image/x-icon"
 9 |     }
10 |   ],
11 |   "start_url": "./index.html",
12 |   "display": "standalone",
13 |   "theme_color": "#000000",
14 |   "background_color": "#ffffff"
15 | }
16 | 


--------------------------------------------------------------------------------
/roblox/RadialImage.lua:
--------------------------------------------------------------------------------
  1 | -- This module displays a radial (circular) progress indicator based on images and config information
  2 | -- that is generated at https://eryn.io/RadialSpriteSheetGenerator/
  3 | -- @readme https://github.com/evaera/RadialSpriteSheetGenerator/blob/master/README.md
  4 | -- @author evaera
  5 | 
  6 | local HttpService = game:GetService("HttpService")
  7 | local ContentProvider = game:GetService("ContentProvider")
  8 | 
  9 | local RadialImage = { _version = 1 }
 10 | RadialImage.__index = RadialImage
 11 | 
 12 | local ConfigurationProperties = {
 13 | 	version = "number";
 14 | 	size = "number";
 15 | 	count = "number";
 16 | 	columns = "number";
 17 | 	rows = "number";
 18 | 	images = "table";
 19 | }
 20 | 
 21 | function RadialImage.new(config, label)
 22 | 	if type(config) == "string" then
 23 | 		config = HttpService:JSONDecode(config)
 24 | 	elseif type(config) ~= "table" then
 25 | 		error("Argument #1 (configuration) must be a JSON string or table.", 2)
 26 | 	end
 27 | 
 28 | 	for k, v in pairs(config) do
 29 | 		if ConfigurationProperties[k] == nil then
 30 | 			error(("Invalid property name in Radial Image configuration: %s"):format(k), 2)
 31 | 		end
 32 | 
 33 | 		if type(v) ~= ConfigurationProperties[k] then
 34 | 			error(("Invalid property type %q in Radial Image configuration: must be a %s."):format(k, ConfigurationProperties[k]), 2)
 35 | 		end
 36 | 	end
 37 | 
 38 | 	if config.version ~= RadialImage._version then
 39 | 		error(("Passed configuration version does not match this module's version (which is %d)"):format(RadialImage._version), 2)
 40 | 	end
 41 | 
 42 | 	local self = { config = config; label = label }
 43 | 	setmetatable(self, RadialImage)
 44 | 
 45 | 	return self
 46 | end
 47 | 
 48 | function RadialImage:Preload()
 49 | 	if self.label == nil then
 50 | 		error("You must provide a label to RadialImage.new to use Preload", 2)
 51 | 	end
 52 | 
 53 | 	self.labels = {}
 54 | 
 55 | 	for _, image in ipairs(self.config.images) do
 56 | 		local label = self.label:Clone()
 57 | 		label.Image = image
 58 | 		label.Visible = true
 59 | 		label.Size = UDim2.new(0, 0, 0, 0)
 60 | 		label.Parent = self.label.Parent
 61 | 		table.insert(self.labels, label)
 62 | 	end
 63 | 
 64 | 	ContentProvider:PreloadAsync(self.labels)
 65 | 
 66 | 	for _, label in ipairs(self.labels) do
 67 | 		label.Visible = false
 68 | 	end
 69 | end
 70 | 
 71 | function RadialImage:Destroy()
 72 | 	for _, label in ipairs(self.labels) do
 73 | 		label:Destroy()
 74 | 	end
 75 | 
 76 | 	self.labels = nil
 77 | end
 78 | 
 79 | function RadialImage:GetFromAlpha(alpha)
 80 | 	if type(alpha) ~= "number" then
 81 | 		error("Argument #1 (alpha) to GetFromAlpha must be a number.", 2)
 82 | 	end
 83 | 
 84 | 	local count, size, columns, rows = self.config.count, self.config.size, self.config.columns, self.config.rows
 85 | 	local index = alpha >= 1 and count - 1 or math.floor(alpha * count)
 86 | 	local page = math.floor(index / (columns * rows)) + 1
 87 | 	local pageIndex = index - (columns * rows * (page - 1))
 88 | 	local x = (pageIndex % columns) * size
 89 | 	local y = math.floor(pageIndex / columns) * size
 90 | 
 91 | 	return x, y, page
 92 | end
 93 | 
 94 | function RadialImage:UpdateLabel(alpha, label)
 95 | 	label = label or self.label
 96 | 
 97 | 	if type(alpha) ~= "number" then
 98 | 		error("Argument #1 (alpha) to UpdateLabel must be a number.", 2)
 99 | 	end
100 | 
101 | 	if typeof(label) ~= "Instance" or not (label:IsA("ImageLabel") or label:IsA("ImageButton")) then
102 | 		error("Attempt to update label but no label has been given. Either pass the label as argument #2 to \"new\", or as argument #2 to \"UpdateLabel\".", 2)
103 | 	end
104 | 
105 | 	local x, y, page = self:GetFromAlpha(alpha)
106 | 
107 | 	label.ImageRectSize = Vector2.new(self.config.size, self.config.size)
108 | 	label.ImageRectOffset = Vector2.new(x, y)
109 | 	label.Image = alpha <= 0 and "" or self.config.images[page]
110 | end
111 | 
112 | return RadialImage


--------------------------------------------------------------------------------
/src/components/App.test.tsx:
--------------------------------------------------------------------------------
 1 | import * as React from 'react'
 2 | import * as ReactDOM from 'react-dom'
 3 | import App from './App'
 4 | 
 5 | it('renders without crashing', () => {
 6 |   const div = document.createElement('div')
 7 |   ReactDOM.render(<App />, div)
 8 |   ReactDOM.unmountComponentAtNode(div)
 9 | })
10 | 


--------------------------------------------------------------------------------
/src/components/App.tsx:
--------------------------------------------------------------------------------
 1 | import { AppBar, CssBaseline, Toolbar, Typography } from '@material-ui/core'
 2 | import * as React from 'react'
 3 | import Generator from './Generator'
 4 | 
 5 | // import logo from '../logo.svg'
 6 | 
 7 | class App extends React.Component {
 8 |   public render () {
 9 |     return (
10 |       <React.Fragment>
11 |         <CssBaseline />
12 |         <header>
13 |           <AppBar position="static">
14 |             <Toolbar>
15 |               <Typography variant="title" color="inherit">Radial Sprite Sheet Generator</Typography>
16 |             </Toolbar>
17 |           </AppBar>
18 |         </header>
19 |         <Generator />
20 |       </React.Fragment>
21 |     )
22 |   }
23 | }
24 | 
25 | export default App
26 | 


--------------------------------------------------------------------------------
/src/components/Canvas.tsx:
--------------------------------------------------------------------------------
 1 | import * as React from 'react'
 2 | import { Options } from './SheetRenderer'
 3 | 
 4 | export interface Slice {
 5 |   startAngle: number,
 6 |   endAngle: number
 7 | }
 8 | 
 9 | interface CanvasProps {
10 |   image: HTMLImageElement,
11 |   options: Options,
12 |   slices: Slice[],
13 |   size: number,
14 |   savable?: boolean,
15 |   index?: number,
16 |   max?: number
17 | }
18 | 
19 | interface CanvasState {
20 |   dataURL: string
21 | }
22 | 
23 | export default class Canvas extends React.Component<CanvasProps> {
24 |   state: CanvasState
25 | 
26 |   constructor (props: CanvasProps) {
27 |     super(props)
28 | 
29 |     this.state = {
30 |       dataURL: ''
31 |     }
32 |   }
33 | 
34 |   componentDidMount () {
35 |     this.updateCanvas()
36 |   }
37 | 
38 |   componentDidUpdate (prevProps: CanvasProps) {
39 |     if (prevProps.options !== this.props.options) {
40 |       this.updateCanvas()
41 |     }
42 |   }
43 | 
44 |   updateCanvas () {
45 |     const canvas = this.refs.canvas as HTMLCanvasElement
46 |     const ctx = canvas.getContext('2d') as CanvasRenderingContext2D
47 |     const size = this.props.size
48 |     const radius = size / 2
49 | 
50 |     ctx.clearRect(0, 0, canvas.width, canvas.height)
51 | 
52 |     let x = 0
53 |     let y = 0
54 | 
55 |     this.props.slices.forEach(slice => {
56 |       const cx = x + radius
57 |       const cy = y + radius
58 | 
59 |       ctx.save()
60 | 
61 |       if (slice.startAngle !== slice.endAngle) {
62 |         ctx.beginPath()
63 |         ctx.moveTo(cx, cy)
64 |         ctx.arc(cx, cy, size, slice.startAngle * (Math.PI / 180), slice.endAngle * (Math.PI / 180))
65 |         ctx.lineTo(cx, cy)
66 |         ctx.closePath()
67 |         ctx.clip()
68 |       }
69 | 
70 |       ctx.drawImage(this.props.image, x, y, size, size)
71 |       ctx.restore()
72 | 
73 |       x += size
74 | 
75 |       if (x + size > this.props.options.width) {
76 |         x = 0
77 |         y += size
78 |       }
79 |     })
80 | 
81 |     this.setState({ dataURL: canvas.toDataURL() })
82 |   }
83 | 
84 |   render () {
85 |     const canvas = <canvas ref="canvas" width={Math.max(this.props.options.width, this.props.size)} height={Math.max(this.props.options.height, this.props.size)} />
86 |     return (
87 |       <React.Fragment>
88 |         {this.props.savable ? (
89 |           <a href={this.state.dataURL} download={`${this.props.options.name.replace(/\..+$/, '')} #${this.props.index !== undefined ? (this.props.index + 1) : '1'} of ${this.props.max || '1'}`}>
90 |             {canvas}
91 |           </a>
92 |         ) : canvas}
93 |       </React.Fragment>
94 |     )
95 |   }
96 | }
97 | 


--------------------------------------------------------------------------------
/src/components/Generator.css:
--------------------------------------------------------------------------------
 1 | .Generator-form {
 2 |   max-width: 900px;
 3 |   margin: 50px auto 10px;
 4 | }
 5 | 
 6 | .Generator-options {
 7 |   display: flex;
 8 |   flex-wrap: wrap;
 9 | }
10 | 
11 | .Generator-options > div, .Generator-options > label {
12 |   margin: 20px;
13 | }
14 | 
15 | .Generator-image-container {
16 |   width: 200px;
17 |   text-align: center;
18 |   float: left;
19 | }
20 | 
21 | .Generator-image-container canvas {
22 |   display: inline-block;
23 |   max-width: 200px;
24 | }
25 | 
26 | .Generator-drop {
27 |   width: 200px;
28 |   height: 200px;
29 |   border: 4px dashed gray;
30 |   border-radius: 25%;
31 | }
32 | 
33 | .Generator-image-container-control {
34 |   text-align: center;
35 |   margin-top: 20px;
36 | }
37 | 
38 | .Generator-output {
39 |   text-align: center;
40 | }
41 | 
42 | .Generator-output canvas {
43 |   display: inline-block;
44 |   margin: 20px;
45 | }
46 | 
47 | form > p {
48 |   /* width: 80%; */
49 |   margin: 0 auto 50px;
50 |   line-height: 1.5em;
51 | }


--------------------------------------------------------------------------------
/src/components/Generator.tsx:
--------------------------------------------------------------------------------
  1 | import { Button, Checkbox, FormControlLabel, TextField, Tooltip } from '@material-ui/core'
  2 | import * as React from 'react'
  3 | import { MAX_DECAL_SIZE } from '../constants'
  4 | import './Generator.css'
  5 | import SheetRenderer, { Options, PreviewOptions } from './SheetRenderer'
  6 | 
  7 | interface GeneratorState {
  8 |   image?: string,
  9 |   loaded: boolean,
 10 |   options: Options,
 11 |   preview: PreviewOptions,
 12 | }
 13 | 
 14 | const parseNumber = (s: string) => {
 15 |   const n = parseFloat(s)
 16 |   if (isNaN(n)) {
 17 |     return undefined
 18 |   }
 19 | 
 20 |   return n
 21 | }
 22 | 
 23 | export default class Generator extends React.Component {
 24 |   state: GeneratorState
 25 | 
 26 |   constructor (props: {}) {
 27 |     super(props)
 28 | 
 29 |     this.state = {
 30 |       loaded: false,
 31 |       options: {
 32 |         width: 1024,
 33 |         height: 1024,
 34 |         angleFormula: '360 * a',
 35 |         startAtFormula: '0',
 36 |         name: 'untitled',
 37 |         roblox: false,
 38 |         frames: 60
 39 |       },
 40 |       preview: {
 41 |         speed: 5
 42 |       }
 43 |     }
 44 |   }
 45 | 
 46 |   handleImageSelected = (e: any) => {
 47 |     const target = e.target
 48 |     this.setState((prevState: GeneratorState) => ({
 49 |       image: target.files.length > 0 ? URL.createObjectURL(target.files[0]) : undefined,
 50 |       loaded: false,
 51 |       options: {
 52 |         ...prevState.options,
 53 |         name: target.files.length > 0 ? target.files[0].name : 'untitled'
 54 |       }
 55 |     }))
 56 |   }
 57 | 
 58 |   handleImageLoaded = (e: any) => {
 59 |     const target = e.target
 60 |     this.setState((prevState: GeneratorState) => ({
 61 |       loaded: true,
 62 |       options: {
 63 |         ...prevState.options,
 64 |         size: target.naturalHeight
 65 |       }
 66 |     }))
 67 |   }
 68 | 
 69 |   handleChange = (key: string, isNumber = false, subTree = 'options') => (e: any) => {
 70 |     const value = e.target.type === 'checkbox' ? e.target.checked : e.target.value
 71 |     this.setState((prevState: GeneratorState) => ({
 72 |       [subTree]: {
 73 |         ...prevState.options,
 74 |         [key]: isNumber ? parseNumber(value) : value
 75 |       }
 76 |     }))
 77 |   }
 78 | 
 79 |   render () {
 80 |     return (
 81 |       <main>
 82 |         {this.state.image ? (
 83 |           <img src={this.state.image} alt="Image" ref="image" style={{
 84 |             maxWidth: '200px',
 85 |             maxHeight: '200px',
 86 |             margin: '0 auto',
 87 |             textAlign: 'center',
 88 |             display: 'none'
 89 |           }} onLoad={this.handleImageLoaded} width="200" height="200" />
 90 |         ) : '' }
 91 |         <form className="Generator-form">
 92 |           <p>This web app can generate a sprite sheet for radial/circular progress indicators, for use in platforms or game engines that do not support clipping masks (such as Roblox). Use the preview to ensure that your output will be smooth based on your intended display speed. Increase the amount of frames for increased fidelity, but at the cost of requiring more images.<br /><br />See <a href="http://bugwheels94.github.io/math-expression-evaluator/#supported-maths-symbols" target="_blank">Supported Math Symbols</a> for use in the "formula" options, in addition to "a" which is a number between 0 and 1, representing progress through the animation.</p>
 93 |           <div className="Generator-image-container">
 94 |             {this.state.image && this.state.loaded ? (
 95 |               <SheetRenderer image={this.refs.image as HTMLImageElement} options={this.state.options} preview={this.state.preview}/>
 96 |             ) : (
 97 |               <div className="Generator-drop"></div>
 98 |             )}
 99 |             <div className="Generator-image-container-control">
100 |               <Button component="label" variant="contained" color="primary">
101 |                 {'Select File'}
102 |                 <input accept="image/*" type="file" style={{ display: 'none' }} onChange={this.handleImageSelected} />
103 |               </Button>
104 |             </div>
105 |           </div>
106 | 
107 |           <div className="Generator-options">
108 |             <Tooltip title="The preview animation speed, in seconds." placement="top">
109 |               <TextField label="Preview speed" type="number" value={this.state.preview.speed || ''} onChange={this.handleChange('speed', true, 'preview')} inputProps={{
110 |                 max: 180
111 |               }} />
112 |             </Tooltip>
113 | 
114 |             <Tooltip title="The size of the sprite outputted onto the sheet, in pixels." placement="top">
115 |               <TextField label="Size" type="number" value={this.state.options.size || ''} onChange={this.handleChange('size', true)} inputProps={{
116 |                 max: MAX_DECAL_SIZE
117 |               }} error={this.state.options.size ? this.state.options.size > Math.min(this.state.options.width, this.state.options.height) : false}/>
118 |             </Tooltip>
119 | 
120 |             <Tooltip title="The number of frames in the animation" placement="top">
121 |               <TextField label="Number of frames" type="number" value={this.state.options.frames} onChange={this.handleChange('frames', true)} inputProps={{
122 |                 min: 1
123 |               }} error={this.state.options.frames ? (this.state.options.frames < 1) : false}/>
124 |             </Tooltip>
125 | 
126 |             <Tooltip title="The angle at which to start the slicing. 0 = Top" placement="top">
127 |               <TextField label="Initial angle formula" type="text" value={this.state.options.startAtFormula} onChange={this.handleChange('startAtFormula')} inputProps={{
128 |                 max: 180
129 | 
130 |               }}/>
131 |             </Tooltip>
132 | 
133 |             <Tooltip title="The formula that defines what angle should be used at each frame index" placement="top">
134 |               <TextField label="Angle formula" type="text" value={this.state.options.angleFormula} onChange={this.handleChange('angleFormula')} inputProps={{
135 |                 max: 180
136 |               }} />
137 |             </Tooltip>
138 | 
139 |             <Tooltip title="The sprite sheet height." placement="top">
140 |               <TextField label="Sheet height" type="number" value={this.state.options.height || ''} onChange={this.handleChange('height', true)} inputProps={{
141 |                 max: this.state.options.roblox ? MAX_DECAL_SIZE : undefined
142 |               }} error={this.state.options.roblox && (this.state.options.height ? this.state.options.height > MAX_DECAL_SIZE : false)}/>
143 |             </Tooltip>
144 | 
145 |             <Tooltip title="The sprite sheet width." placement="top">
146 |               <TextField label="Sheet width" type="number" value={this.state.options.width || ''} onChange={this.handleChange('width', true)} inputProps={{
147 |                 max: this.state.options.roblox ? MAX_DECAL_SIZE : undefined
148 |               }} error={this.state.options.roblox && (this.state.options.width ? this.state.options.width > MAX_DECAL_SIZE : false)}/>
149 |             </Tooltip>
150 | 
151 |             <FormControlLabel control={
152 |               <Checkbox checked={this.state.options.roblox} onChange={this.handleChange('roblox')} />
153 |             } label="Using in Roblox" />
154 | 
155 |             {this.state.options.roblox && (
156 |               <div>
157 |                 <p>For use in Roblox, please see the <a href="https://github.com/evaera/RadialSpriteSheetGenerator/blob/master/README.md#use-in-roblox" target="_blank">README</a> for instructions.</p>
158 |                 {this.state.options.width > MAX_DECAL_SIZE || this.state.options.height > MAX_DECAL_SIZE && (
159 |                   <p className="error">The maximum Roblox image upload size is {MAX_DECAL_SIZE}x{MAX_DECAL_SIZE}.</p>
160 |                 )}
161 |               </div>
162 |             )}
163 |           </div>
164 |         </form>
165 |         <div style={{ clear: 'both' }}></div>
166 |         <div className="Generator-output">
167 |           {this.refs.image && this.state.loaded ? (
168 |             <SheetRenderer image={this.refs.image as HTMLImageElement} options={this.state.options} showConfiguration={true} />
169 |           ) : ''}
170 |         </div>
171 |       </main>
172 |     )
173 |   }
174 | }
175 | 


--------------------------------------------------------------------------------
/src/components/SheetRenderer.tsx:
--------------------------------------------------------------------------------
  1 | import * as React from 'react'
  2 | import Canvas, { Slice } from './Canvas'
  3 | import * as mexp from 'math-expression-evaluator'
  4 | 
  5 | export interface Options {
  6 |   width: number,
  7 |   height: number,
  8 |   angleFormula: string,
  9 |   startAtFormula: string,
 10 |   name: string,
 11 |   roblox: boolean,
 12 |   frames: number
 13 |   size?: number,
 14 | }
 15 | 
 16 | export interface PreviewOptions {
 17 |   speed: number
 18 | }
 19 | 
 20 | export interface SheetRendererProps {
 21 |   image: HTMLImageElement,
 22 |   options: Options,
 23 |   preview?: PreviewOptions,
 24 |   showConfiguration?: boolean
 25 | }
 26 | 
 27 | const enum TokenType {
 28 |   Function = 0,
 29 |   BinaryFunction = 2,
 30 |   Constant = 3,
 31 |   AffixFunction = 7,
 32 |   Function2 = 8,
 33 |   Function3 = 12
 34 | }
 35 | 
 36 | interface SheetRendererState {
 37 |   frameIndex?: number
 38 | }
 39 | export default class SheetRenderer extends React.Component<SheetRendererProps> {
 40 |   state: SheetRendererState
 41 |   private dead?: boolean
 42 |   private _length: number
 43 | 
 44 |   constructor (props: SheetRendererProps) {
 45 |     super(props)
 46 | 
 47 |     this._length = -1
 48 |     this.state = {}
 49 |   }
 50 | 
 51 |   componentWillReceiveProps (props: SheetRendererProps) {
 52 |     if (props.preview) {
 53 |       this.setState({ frameIndex: 0 })
 54 |     }
 55 |   }
 56 | 
 57 |   componentDidMount () {
 58 |     this.updatePreview()
 59 |   }
 60 | 
 61 |   componentWillUnmount () {
 62 |     this.dead = true
 63 |   }
 64 | 
 65 |   updatePreview = () => {
 66 |     if (!this.props.preview || this.dead) return
 67 |     const time = (Date.now() % this.animationSpeed) / this.animationSpeed
 68 |     const frameIndex = Math.floor(this.slices.length * time)
 69 |     this.setState({ frameIndex })
 70 | 
 71 |     if (!this.dead) requestAnimationFrame(this.updatePreview)
 72 |   }
 73 | 
 74 |   get configurationString (): string {
 75 |     return JSON.stringify({
 76 |       version: 1,
 77 |       size: this.imageSize,
 78 |       count: this.length,
 79 |       columns: Math.floor(this.props.options.width / this.imageSize),
 80 |       rows: Math.floor(this.props.options.height / this.imageSize),
 81 |       images: this.props.options.roblox ? Array.apply(null, { length: (Math.ceil(this.length / this.maxSlicesPerCanvas)) })
 82 |         .map(Number.call, Number).map((n: number) => (this.props.options.roblox ? 'rbxassetid://' : 'path/to/image') + (n + 1)) : undefined
 83 |     })
 84 |   }
 85 | 
 86 |   get length (): number {
 87 |     if (this._length === -1) {
 88 |       this._length = this.slices.length
 89 |     }
 90 | 
 91 |     return this._length
 92 |   }
 93 | 
 94 |   get animationSpeed (): number {
 95 |     if (!this.props.preview) return 0
 96 |     return (this.props.preview.speed || 1) * 1000
 97 |   }
 98 | 
 99 |   get imageSize (): number {
100 |     return this.props.options.size || this.props.image.naturalHeight
101 |   }
102 | 
103 |   get maxSlicesPerCanvas (): number {
104 |     return Math.floor((this.props.options.width / this.imageSize)) * Math.floor((this.props.options.height / this.imageSize)) || 1
105 |   }
106 | 
107 |   get angleFormula (): string {
108 |     return this.props.options.angleFormula
109 |   }
110 | 
111 |   get startAtFormula (): string {
112 |     return this.props.options.startAtFormula
113 |   }
114 | 
115 |   get frames (): number {
116 |     return this.props.options.frames
117 |   }
118 | 
119 |   get slices (): Slice[] {
120 |     if (!this.frames) {
121 |       this._length = 1
122 | 
123 |       return [{
124 |         startAngle: 0,
125 |         endAngle: 360
126 |       }]
127 |     }
128 | 
129 |     const steps: number[] = []
130 |     const startAtAngles: number[] = []
131 |     const tokens: mexp.Token[] = [{
132 |       type: TokenType.Constant,
133 |       show: 'a',
134 |       token: 'a',
135 |       value: 'a'
136 |     }]
137 |     for (let frame = 1; frame <= this.frames; frame++) {
138 |       let stepResult = 0
139 |       let startAtResult = 0
140 | 
141 |       try {
142 |         const pair = { a: frame / this.frames }
143 |         stepResult = mexp.eval(this.angleFormula, tokens, pair)
144 |         startAtResult = mexp.eval(this.startAtFormula, tokens, pair)
145 |       } catch (e) {
146 |         // do nothing
147 |       }
148 | 
149 |       if (!isNaN(stepResult)) {
150 |         steps.push(stepResult)
151 |       }
152 | 
153 |       if (!isNaN(startAtResult)) {
154 |         startAtAngles.push(startAtResult - 90)
155 |       } else {
156 |         startAtAngles.push(-90)
157 |       }
158 |     }
159 | 
160 |     // const lastStep = steps[steps.length - 1]
161 |     // if (lastStep !== 360 && lastStep !== -360) {
162 |     //   steps.push(this.increment < 0 ? -360 : 360)
163 |     // }
164 | 
165 |     this._length = steps.length
166 | 
167 |     // const startAt = (this.props.options.startAt !== undefined ? this.props.options.startAt : 0) + -90
168 |     return steps.map((n, i): Slice => ({
169 |       startAngle: startAtAngles[i] + (n <= 0 ? n : 0),
170 |       endAngle: startAtAngles[i] + (n >= 0 ? n : 0)
171 |     }))
172 |   }
173 | 
174 |   render () {
175 |     const pages: Slice[][] = []
176 |     let slices = this.slices
177 | 
178 |     if (this.state.frameIndex !== undefined) {
179 |       slices = [slices[this.state.frameIndex]]
180 |     }
181 | 
182 |     while (slices.length > 0) {
183 |       pages.push(slices.splice(0, this.maxSlicesPerCanvas))
184 |     }
185 | 
186 |     let options = this.props.options
187 | 
188 |     if (this.props.preview) {
189 |       options = {
190 |         ...options,
191 |         width: this.imageSize,
192 |         height: this.imageSize
193 |       }
194 |     }
195 | 
196 |     return (
197 |       <React.Fragment>
198 |         {this.props.showConfiguration && (
199 |           <div className="center"><textarea value={this.configurationString} readOnly cols={30} rows={4} ref="textarea" onClick={() => (this.refs.textarea as HTMLTextAreaElement).select()} /></div>
200 |         )}
201 |         {pages.map((page, index) => (
202 |           <Canvas image={this.props.image} options={options} slices={page} size={this.imageSize} key={index} index={index} savable={this.props.preview === undefined} max={pages.length} />
203 |         ))}
204 |       </React.Fragment>
205 |     )
206 |   }
207 | }
208 | 


--------------------------------------------------------------------------------
/src/constants.ts:
--------------------------------------------------------------------------------
1 | export const MAX_DECAL_SIZE = 1024
2 | 


--------------------------------------------------------------------------------
/src/index.css:
--------------------------------------------------------------------------------
 1 | body {
 2 |   margin: 0;
 3 |   padding: 0;
 4 |   font-family: sans-serif;
 5 | }
 6 | 
 7 | .center {
 8 |   text-align: center;
 9 |   margin: 0 auto;
10 | }
11 | 
12 | canvas {
13 |   max-width: 400px;
14 |   background-image: linear-gradient(45deg, #ccc 25%, transparent 25%), linear-gradient(-45deg, #ccc 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #ccc 75%), linear-gradient(-45deg, transparent 75%, #ccc 75%);
15 |   background-size: 20px 20px;
16 |   background-position: 0 0, 0 10px, 10px -10px, -10px 0px;
17 | }
18 | 
19 | .error {
20 |   color: #f44336;
21 | }


--------------------------------------------------------------------------------
/src/index.tsx:
--------------------------------------------------------------------------------
 1 | import * as React from 'react'
 2 | import * as ReactDOM from 'react-dom'
 3 | import App from './components/App'
 4 | import './index.css'
 5 | import registerServiceWorker from './registerServiceWorker'
 6 | 
 7 | ReactDOM.render(
 8 |   <App />,
 9 |   document.getElementById('root') as HTMLElement
10 | )
11 | registerServiceWorker()
12 | 


--------------------------------------------------------------------------------
/src/logo.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 841.9 595.3">
2 |     <g fill="#61DAFB">
3 |         <path d="M666.3 296.5c0-32.5-40.7-63.3-103.1-82.4 14.4-63.6 8-114.2-20.2-130.4-6.5-3.8-14.1-5.6-22.4-5.6v22.3c4.6 0 8.3.9 11.4 2.6 13.6 7.8 19.5 37.5 14.9 75.7-1.1 9.4-2.9 19.3-5.1 29.4-19.6-4.8-41-8.5-63.5-10.9-13.5-18.5-27.5-35.3-41.6-50 32.6-30.3 63.2-46.9 84-46.9V78c-27.5 0-63.5 19.6-99.9 53.6-36.4-33.8-72.4-53.2-99.9-53.2v22.3c20.7 0 51.4 16.5 84 46.6-14 14.7-28 31.4-41.3 49.9-22.6 2.4-44 6.1-63.6 11-2.3-10-4-19.7-5.2-29-4.7-38.2 1.1-67.9 14.6-75.8 3-1.8 6.9-2.6 11.5-2.6V78.5c-8.4 0-16 1.8-22.6 5.6-28.1 16.2-34.4 66.7-19.9 130.1-62.2 19.2-102.7 49.9-102.7 82.3 0 32.5 40.7 63.3 103.1 82.4-14.4 63.6-8 114.2 20.2 130.4 6.5 3.8 14.1 5.6 22.5 5.6 27.5 0 63.5-19.6 99.9-53.6 36.4 33.8 72.4 53.2 99.9 53.2 8.4 0 16-1.8 22.6-5.6 28.1-16.2 34.4-66.7 19.9-130.1 62-19.1 102.5-49.9 102.5-82.3zm-130.2-66.7c-3.7 12.9-8.3 26.2-13.5 39.5-4.1-8-8.4-16-13.1-24-4.6-8-9.5-15.8-14.4-23.4 14.2 2.1 27.9 4.7 41 7.9zm-45.8 106.5c-7.8 13.5-15.8 26.3-24.1 38.2-14.9 1.3-30 2-45.2 2-15.1 0-30.2-.7-45-1.9-8.3-11.9-16.4-24.6-24.2-38-7.6-13.1-14.5-26.4-20.8-39.8 6.2-13.4 13.2-26.8 20.7-39.9 7.8-13.5 15.8-26.3 24.1-38.2 14.9-1.3 30-2 45.2-2 15.1 0 30.2.7 45 1.9 8.3 11.9 16.4 24.6 24.2 38 7.6 13.1 14.5 26.4 20.8 39.8-6.3 13.4-13.2 26.8-20.7 39.9zm32.3-13c5.4 13.4 10 26.8 13.8 39.8-13.1 3.2-26.9 5.9-41.2 8 4.9-7.7 9.8-15.6 14.4-23.7 4.6-8 8.9-16.1 13-24.1zM421.2 430c-9.3-9.6-18.6-20.3-27.8-32 9 .4 18.2.7 27.5.7 9.4 0 18.7-.2 27.8-.7-9 11.7-18.3 22.4-27.5 32zm-74.4-58.9c-14.2-2.1-27.9-4.7-41-7.9 3.7-12.9 8.3-26.2 13.5-39.5 4.1 8 8.4 16 13.1 24 4.7 8 9.5 15.8 14.4 23.4zM420.7 163c9.3 9.6 18.6 20.3 27.8 32-9-.4-18.2-.7-27.5-.7-9.4 0-18.7.2-27.8.7 9-11.7 18.3-22.4 27.5-32zm-74 58.9c-4.9 7.7-9.8 15.6-14.4 23.7-4.6 8-8.9 16-13 24-5.4-13.4-10-26.8-13.8-39.8 13.1-3.1 26.9-5.8 41.2-7.9zm-90.5 125.2c-35.4-15.1-58.3-34.9-58.3-50.6 0-15.7 22.9-35.6 58.3-50.6 8.6-3.7 18-7 27.7-10.1 5.7 19.6 13.2 40 22.5 60.9-9.2 20.8-16.6 41.1-22.2 60.6-9.9-3.1-19.3-6.5-28-10.2zM310 490c-13.6-7.8-19.5-37.5-14.9-75.7 1.1-9.4 2.9-19.3 5.1-29.4 19.6 4.8 41 8.5 63.5 10.9 13.5 18.5 27.5 35.3 41.6 50-32.6 30.3-63.2 46.9-84 46.9-4.5-.1-8.3-1-11.3-2.7zm237.2-76.2c4.7 38.2-1.1 67.9-14.6 75.8-3 1.8-6.9 2.6-11.5 2.6-20.7 0-51.4-16.5-84-46.6 14-14.7 28-31.4 41.3-49.9 22.6-2.4 44-6.1 63.6-11 2.3 10.1 4.1 19.8 5.2 29.1zm38.5-66.7c-8.6 3.7-18 7-27.7 10.1-5.7-19.6-13.2-40-22.5-60.9 9.2-20.8 16.6-41.1 22.2-60.6 9.9 3.1 19.3 6.5 28.1 10.2 35.4 15.1 58.3 34.9 58.3 50.6-.1 15.7-23 35.6-58.4 50.6zM320.8 78.4z"/>
4 |         <circle cx="420.9" cy="296.5" r="45.7"/>
5 |         <path d="M520.5 78.1z"/>
6 |     </g>
7 | </svg>
8 | 


--------------------------------------------------------------------------------
/src/registerServiceWorker.ts:
--------------------------------------------------------------------------------
  1 | // tslint:disable:no-console
  2 | // In production, we register a service worker to serve assets from local cache.
  3 | 
  4 | // This lets the app load faster on subsequent visits in production, and gives
  5 | // it offline capabilities. However, it also means that developers (and users)
  6 | // will only see deployed updates on the 'N+1' visit to a page, since previously
  7 | // cached resources are updated in the background.
  8 | 
  9 | // To learn more about the benefits of this model, read https://goo.gl/KwvDNy.
 10 | // This link also includes instructions on opting out of this behavior.
 11 | 
 12 | const isLocalhost = Boolean(
 13 |   window.location.hostname === 'localhost' ||
 14 |     // [::1] is the IPv6 localhost address.
 15 |     window.location.hostname === '[::1]' ||
 16 |     // 127.0.0.1/8 is considered localhost for IPv4.
 17 |     window.location.hostname.match(
 18 |       /^127(?:\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}$/
 19 |     )
 20 | )
 21 | 
 22 | export default function register () {
 23 |   if (process.env.NODE_ENV === 'production' && 'serviceWorker' in navigator) {
 24 |     // The URL constructor is available in all browsers that support SW.
 25 |     const publicUrl = new URL(
 26 |       process.env.PUBLIC_URL!,
 27 |       window.location.toString()
 28 |     )
 29 |     if (publicUrl.origin !== window.location.origin) {
 30 |       // Our service worker won't work if PUBLIC_URL is on a different origin
 31 |       // from what our page is served on. This might happen if a CDN is used to
 32 |       // serve assets; see https://github.com/facebookincubator/create-react-app/issues/2374
 33 |       return
 34 |     }
 35 | 
 36 |     window.addEventListener('load', () => {
 37 |       const swUrl = `${process.env.PUBLIC_URL}/service-worker.js`
 38 | 
 39 |       if (isLocalhost) {
 40 |         // This is running on localhost. Lets check if a service worker still exists or not.
 41 |         checkValidServiceWorker(swUrl)
 42 | 
 43 |         // Add some additional logging to localhost, pointing developers to the
 44 |         // service worker/PWA documentation.
 45 |         navigator.serviceWorker.ready.then(() => {
 46 |           console.log(
 47 |             'This web app is being served cache-first by a service ' +
 48 |               'worker. To learn more, visit https://goo.gl/SC7cgQ'
 49 |           )
 50 |         })
 51 |       } else {
 52 |         // Is not local host. Just register service worker
 53 |         registerValidSW(swUrl)
 54 |       }
 55 |     })
 56 |   }
 57 | }
 58 | 
 59 | function registerValidSW (swUrl: string) {
 60 |   navigator.serviceWorker
 61 |     .register(swUrl)
 62 |     .then(registration => {
 63 |       registration.onupdatefound = () => {
 64 |         const installingWorker = registration.installing
 65 |         if (installingWorker) {
 66 |           installingWorker.onstatechange = () => {
 67 |             if (installingWorker.state === 'installed') {
 68 |               if (navigator.serviceWorker.controller) {
 69 |                 // At this point, the old content will have been purged and
 70 |                 // the fresh content will have been added to the cache.
 71 |                 // It's the perfect time to display a 'New content is
 72 |                 // available; please refresh.' message in your web app.
 73 |                 console.log('New content is available; please refresh.')
 74 |               } else {
 75 |                 // At this point, everything has been precached.
 76 |                 // It's the perfect time to display a
 77 |                 // 'Content is cached for offline use.' message.
 78 |                 console.log('Content is cached for offline use.')
 79 |               }
 80 |             }
 81 |           }
 82 |         }
 83 |       }
 84 |     })
 85 |     .catch(error => {
 86 |       console.error('Error during service worker registration:', error)
 87 |     })
 88 | }
 89 | 
 90 | function checkValidServiceWorker (swUrl: string) {
 91 |   // Check if the service worker can be found. If it can't reload the page.
 92 |   fetch(swUrl)
 93 |     .then(response => {
 94 |       // Ensure service worker exists, and that we really are getting a JS file.
 95 |       if (
 96 |         response.status === 404 ||
 97 |         response.headers.get('content-type')!.indexOf('javascript') === -1
 98 |       ) {
 99 |         // No service worker found. Probably a different app. Reload the page.
100 |         navigator.serviceWorker.ready.then(registration => {
101 |           registration.unregister().then(() => {
102 |             window.location.reload()
103 |           })
104 |         })
105 |       } else {
106 |         // Service worker found. Proceed as normal.
107 |         registerValidSW(swUrl)
108 |       }
109 |     })
110 |     .catch(() => {
111 |       console.log(
112 |         'No internet connection found. App is running in offline mode.'
113 |       )
114 |     })
115 | }
116 | 
117 | export function unregister () {
118 |   if ('serviceWorker' in navigator) {
119 |     navigator.serviceWorker.ready.then(registration => {
120 |       registration.unregister()
121 |     })
122 |   }
123 | }
124 | 


--------------------------------------------------------------------------------
/src/typings/math-expression-evaluator.d.ts:
--------------------------------------------------------------------------------
 1 | declare module 'math-expression-evaluator' {
 2 |   namespace mexp {
 3 |     export interface Token {
 4 |       type: number
 5 |       token: string
 6 |       value: any
 7 |       show: string
 8 |     }
 9 |   }
10 | 
11 |   class mexp {
12 |     static eval (exp: string, tokens?: mexp.Token[], pair?: {[index: string]: number}): number
13 |   }
14 | 
15 |   export = mexp
16 | }


--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "compilerOptions": {
 3 |     "baseUrl": ".",
 4 |     "outDir": "build/dist",
 5 |     "module": "commonjs",
 6 |     "target": "es5",
 7 |     "lib": ["es6", "dom"],
 8 |     "sourceMap": true,
 9 |     "allowJs": true,
10 |     "jsx": "react",
11 |     "moduleResolution": "node",
12 |     "rootDir": "src",
13 |     "forceConsistentCasingInFileNames": true,
14 |     "noImplicitReturns": true,
15 |     "noImplicitThis": true,
16 |     "noImplicitAny": true,
17 |     "strict": true,
18 |     "strictNullChecks": true,
19 |     "suppressImplicitAnyIndexErrors": true,
20 |     "noUnusedLocals": true
21 |   },
22 |   "exclude": [
23 |     "node_modules",
24 |     "build",
25 |     "scripts",
26 |     "acceptance-tests",
27 |     "webpack",
28 |     "jest",
29 |     "src/setupTests.ts"
30 |   ]
31 | }
32 | 


--------------------------------------------------------------------------------
/tsconfig.prod.json:
--------------------------------------------------------------------------------
1 | {
2 |   "extends": "./tsconfig.json"
3 | }


--------------------------------------------------------------------------------
/tsconfig.test.json:
--------------------------------------------------------------------------------
1 | {
2 |   "extends": "./tsconfig.json",
3 |   "compilerOptions": {
4 |     "module": "commonjs"
5 |   }
6 | }


--------------------------------------------------------------------------------
/tslint.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "extends": ["tslint-config-standard"],
 3 |   "linterOptions": {
 4 |     "exclude": [
 5 |       "config/**/*.js",
 6 |       "node_modules/**/*.ts",
 7 |       "src/registerServiceWorker.ts",
 8 |       "build/**/*"
 9 |     ]
10 |   },
11 |   "rules": {
12 |     "quotemark": [true, "single", "jsx-double", "avoid-escape"],
13 |     "no-unused-variable": [false, "react"]
14 | 	}
15 | }


--------------------------------------------------------------------------------