44 | addEmitter()}
61 | >
62 |
64 |
65 | );
66 | }
67 | }
68 |
69 | export default withStyles(styles)(EmitterList);
70 |
--------------------------------------------------------------------------------
/src/components/EmitterConfig/expansionPanelXY.tsx:
--------------------------------------------------------------------------------
1 | import React, { Component, Fragment } from 'react';
2 | import {
3 | ExpansionPanel,
4 | ExpansionPanelSummary,
5 | Typography,
6 | ExpansionPanelDetails,
7 | Grid,
8 | FormLabel,
9 | } from '@material-ui/core';
10 | import ExpandMoreIcon from '@material-ui/icons/ExpandMore';
11 | import TextField from '../TextField';
12 | import CompositeProperty from '../CompositeProperty';
13 |
14 | type Props = {
15 | typography: string;
16 | configNameX: string;
17 | configNameY: string;
18 | composite: boolean;
19 | };
20 |
21 | class ExpansionPanelXY extends Component
45 |
57 | -
46 | {emitters.map((value: any, index: number) => {
47 | return (
48 |
31 | this.setState({ showPicker: true })}
34 | InputProps={{ style: { color: valueHex } }}
35 | />
36 | {showPicker ? (
37 | {
19 | onEnable = (zoneValue: any) => {
20 | const zoneValueCopy = { ...zoneValue };
21 | if (zoneValue && zoneValue.type === this.props.types[0]) {
22 | Object.assign(zoneValueCopy, edgeZoneComplexProps);
23 | }
24 | return zoneValueCopy;
25 | };
26 |
27 | onTypeChange = (zoneValue: any, type: string) => {
28 | const zoneValueCopy = { ...zoneValue };
29 | if (type === this.props.types[1]) {
30 | Object.keys(edgeZoneComplexProps).forEach(
31 | propName => delete zoneValueCopy[propName],
32 | );
33 | } else if (type === this.props.types[0]) {
34 | Object.assign(zoneValueCopy, edgeZoneComplexProps);
35 | }
36 | return zoneValueCopy;
37 | };
38 |
39 | render() {
40 | const { configName, types, emitterStore, options } = this.props;
41 | const { currentEmitterConfig } = emitterStore!;
42 | const zone = currentEmitterConfig[configName];
43 |
44 | return (
45 |
46 |
55 | quantity`} label="quantity" />
56 | stepRate`} label="stepRate" />
57 | yoyo`} label="yoyo" />
58 | seamless`} label="seamless" />
59 |
60 | ) : null}
61 |
62 | );
63 | }
64 | }
65 |
66 | export default ComplexZone;
67 |
--------------------------------------------------------------------------------
/src/components/EmitterConfig/expansionPanelFrame.tsx:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 | import {
3 | ExpansionPanel,
4 | ExpansionPanelSummary,
5 | Typography,
6 | ExpansionPanelDetails,
7 | Grid,
8 | } from '@material-ui/core';
9 | import ExpandMoreIcon from '@material-ui/icons/ExpandMore';
10 | import { inject, observer } from 'mobx-react';
11 | import { EMITTER_STORE, EmitterStoreProp } from 'src/stores';
12 | import Switch from '../Switch';
13 | import TextField from '../TextField';
14 | import MultipleInput from '../MultipleInput';
15 | import { selectComponent } from '../Select';
16 | import { frames } from 'src/constants';
17 | import _get from 'lodash/get';
18 |
19 | @inject(EMITTER_STORE)
20 | @observer
21 | class ExpansionPanelFrame extends Component {
22 | render() {
23 | const { emitterStore } = this.props;
24 | const { currentEmitterConfig } = emitterStore!;
25 | return (
26 |
27 | Frame
29 |
30 |
31 |
32 |
33 |
39 |
40 |
47 |
48 |
49 | {(params: any) => {
50 | const { configName } = params;
51 | return selectComponent({
52 | ...params,
53 | options: frames,
54 | value: _get(currentEmitterConfig, configName.split('>')),
55 | });
56 | }}
57 |
58 |
59 |
60 |
61 |
62 | );
63 | }
64 | }
65 |
66 | export default ExpansionPanelFrame;
67 |
--------------------------------------------------------------------------------
/src/components/MultipleInput/index.tsx:
--------------------------------------------------------------------------------
1 | import _range from 'lodash/range';
2 | import _uniqueId from 'lodash/uniqueId';
3 | import React, { Component } from 'react';
4 | import { EMITTER_STORE } from '../../stores';
5 | import { observer, inject } from 'mobx-react';
6 | import { EmitterStoreProp } from '../../stores/emitterStore';
7 | import { Grid, IconButton } from '@material-ui/core';
8 | import AddIcon from '@material-ui/icons/Add';
9 | import DeleteIcon from '@material-ui/icons/Delete';
10 | import { emitterConfig } from '../../constants';
11 | import _get from 'lodash/get';
12 |
13 | type Props = {
14 | configName: string;
15 | };
16 |
17 | @inject(EMITTER_STORE)
18 | @observer
19 | class MultipleInput extends Component {
20 | getInputComponent = (length: number) => {
21 | const { configName, emitterStore, children } = this.props;
22 | const { currentEmitterConfig, changeEmitterConfig } = emitterStore!;
23 | const values: any[] = _get(currentEmitterConfig, configName.split('>'));
24 |
25 | return _range(length).map((value, i) => {
26 | const last = value === length - 1;
27 | const addBtn = last ? (
28 |
29 |
33 | changeEmitterConfig(configName, [
34 | ...values,
35 | _get(emitterConfig, configName.split('>'))[0],
36 | ])
37 | }
38 | >
39 |
41 |
42 | ) : null;
43 |
44 | return (
45 |
46 |
47 | {(children as any)({
48 | configName: `${configName}>${value}`,
49 | })}
50 |
51 |
52 | {
56 | values.splice(value, 1);
57 | changeEmitterConfig(configName, values);
58 | }}
59 | >
60 |
62 |
63 | {addBtn}
64 |
65 | );
66 | });
67 | };
68 |
69 | render() {
70 | const { configName, emitterStore } = this.props;
71 | const { currentEmitterConfig } = emitterStore!;
72 | const values = _get(currentEmitterConfig, configName.split('>'));
73 | const length = values.length;
74 | return this.getInputComponent(length);
75 | }
76 | }
77 |
78 | export default MultipleInput;
79 |
--------------------------------------------------------------------------------
/tslint.json:
--------------------------------------------------------------------------------
1 | {
2 | "extends": ["tslint-react", "tslint-config-prettier"],
3 | "rules": {
4 | "align": [true, "parameters", "arguments", "statements"],
5 | "ban": false,
6 | "class-name": true,
7 | "comment-format": [true, "check-space"],
8 | "curly": true,
9 | "eofline": false,
10 | "forin": true,
11 | "indent": [true, "spaces"],
12 | "interface-name": [true, "never-prefix"],
13 | "jsdoc-format": true,
14 | "jsx-boolean-value": false,
15 | "jsx-no-lambda": false,
16 | "jsx-no-multiline-js": false,
17 | "label-position": true,
18 | "max-line-length": [true, 120],
19 | "member-ordering": [
20 | true,
21 | {
22 | "order": [
23 | "public-before-private",
24 | "static-before-instance",
25 | "variables-before-functions"
26 | ]
27 | }
28 | ],
29 | "no-any": false,
30 | "no-arg": true,
31 | "no-bitwise": true,
32 | "no-console": [
33 | false,
34 | "log",
35 | "error",
36 | "debug",
37 | "info",
38 | "time",
39 | "timeEnd",
40 | "trace"
41 | ],
42 | "no-consecutive-blank-lines": true,
43 | "no-construct": true,
44 | "no-debugger": true,
45 | "no-duplicate-variable": true,
46 | "no-empty": true,
47 | "no-eval": false,
48 | "no-shadowed-variable": true,
49 | "no-string-literal": true,
50 | "no-switch-case-fall-through": true,
51 | "no-trailing-whitespace": false,
52 | "no-unused-expression": true,
53 | "no-use-before-declare": false,
54 | "one-line": [
55 | true,
56 | "check-catch",
57 | "check-else",
58 | "check-open-brace",
59 | "check-whitespace"
60 | ],
61 | "quotemark": [true, "single", "jsx-double"],
62 | "radix": true,
63 | "semicolon": [true, "always", "ignore-bound-class-methods"],
64 | "switch-default": true,
65 | "trailing-comma": [false],
66 | "triple-equals": [true, "allow-null-check"],
67 | "typedef": [true, "parameter", "property-declaration"],
68 | "typedef-whitespace": [
69 | true,
70 | {
71 | "call-signature": "nospace",
72 | "index-signature": "nospace",
73 | "parameter": "nospace",
74 | "property-declaration": "nospace",
75 | "variable-declaration": "nospace"
76 | }
77 | ],
78 | "variable-name": [
79 | true,
80 | "ban-keywords",
81 | "check-format",
82 | "allow-leading-underscore",
83 | "allow-pascal-case"
84 | ],
85 | "whitespace": [
86 | true,
87 | "check-branch",
88 | "check-decl",
89 | "check-module",
90 | "check-operator",
91 | "check-separator",
92 | "check-type",
93 | "check-typecast"
94 | ]
95 | }
96 | }
97 |
--------------------------------------------------------------------------------
/src/canvas/utils.ts:
--------------------------------------------------------------------------------
1 | import { deepCopy, getEmitterConfig, initialConfig } from '../utils';
2 | import { CanvasScene } from './scenes';
3 |
4 | const createEmitter = (scene: CanvasScene, config: any, name: string) => {
5 | let emitterConfig = config ? getEmitterConfig(config) : initialConfig;
6 | const emitter = scene.particle.createEmitter(emitterConfig);
7 | emitter.name = name;
8 | };
9 |
10 | const removeEmitter = (scene: CanvasScene, emitter: any) => {
11 | const emitters = scene.particle.emitters.list;
12 | const index = emitters.indexOf(emitter);
13 | emitters.splice(index, 1);
14 | };
15 |
16 | const changeEmitter = (
17 | emitter: Phaser.GameObjects.Particles.ParticleEmitter,
18 | config: any,
19 | ) => {
20 | const newConfig: {
21 | deathZone?: any;
22 | emitZone?: any;
23 | bounds?: any;
24 | } = getEmitterConfig(config);
25 | emitter.fromJSON(newConfig);
26 |
27 | const { deathZone, emitZone, bounds } = newConfig;
28 |
29 | if (!bounds) {
30 | (emitter as any).bounds = null;
31 | }
32 | if (!emitZone) {
33 | (emitter as any).emitZone = null;
34 | }
35 | if (!deathZone) {
36 | (emitter as any).deathZone = null;
37 | }
38 | };
39 |
40 | const drawDebugZoneGraphic = (
41 | zone: any,
42 | scene: Phaser.Scene,
43 | color: number,
44 | type?: string,
45 | config?: any,
46 | ) => {
47 | const { shapeType, source } = zone;
48 | const shapeTypeGraphic = shapeType === 'Rectangle' ? 'Rect' : shapeType;
49 | const _source = deepCopy(source);
50 |
51 | const graphic = scene.add.graphics();
52 | graphic.lineStyle(1, color, 1);
53 |
54 | if (type === 'EmitZone') {
55 | const { x, y } = config;
56 | switch (shapeType) {
57 | case 'Rectangle':
58 | case 'Ellipse':
59 | case 'Circle': {
60 | _source.x = _source.x + x;
61 | _source.y = _source.y + y;
62 | break;
63 | }
64 | case 'Line': {
65 | _source.x1 = _source.x1 + x;
66 | _source.y1 = _source.y1 + y;
67 | _source.x2 = _source.x2 + x;
68 | _source.y2 = _source.y2 + y;
69 | break;
70 | }
71 | case 'Triangle': {
72 | _source.x1 = _source.x1 + x;
73 | _source.y1 = _source.y1 + y;
74 | _source.x2 = _source.x2 + x;
75 | _source.y2 = _source.y2 + y;
76 | _source.x3 = _source.x3 + x;
77 | _source.y3 = _source.y3 + y;
78 | break;
79 | }
80 | default:
81 | break;
82 | }
83 | }
84 |
85 | const shape = new Phaser.Geom[shapeType](...Object.values(_source));
86 | graphic[`stroke${shapeTypeGraphic}Shape`](shape);
87 | return graphic;
88 | };
89 |
90 | const clearZoneGraphic = (graphic: Phaser.GameObjects.Graphics) => {
91 | if (graphic) {
92 | graphic.clear();
93 | }
94 | };
95 |
96 | export {
97 | createEmitter,
98 | removeEmitter,
99 | changeEmitter,
100 | drawDebugZoneGraphic,
101 | clearZoneGraphic,
102 | };
103 |
--------------------------------------------------------------------------------
/CODE_OF_CONDUCT.md:
--------------------------------------------------------------------------------
1 | # Contributor Covenant Code of Conduct
2 |
3 | ## Our Pledge
4 |
5 | In the interest of fostering an open and welcoming environment, we as contributors and maintainers pledge to making participation in our project and our community a harassment-free experience for everyone, regardless of age, body size, disability, ethnicity, gender identity and expression, level of experience, nationality, personal appearance, race, religion, or sexual identity and orientation.
6 |
7 | ## Our Standards
8 |
9 | Examples of behavior that contributes to creating a positive environment include:
10 |
11 | - Using welcoming and inclusive language
12 | - Being respectful of differing viewpoints and experiences
13 | - Gracefully accepting constructive criticism
14 | - Focusing on what is best for the community
15 | - Showing empathy towards other community members
16 |
17 | Examples of unacceptable behavior by participants include:
18 |
19 | - The use of sexualized language or imagery and unwelcome sexual attention or advances
20 | - Trolling, insulting/derogatory comments, and personal or political attacks
21 | - Public or private harassment
22 | - Publishing others' private information, such as a physical or electronic address, without explicit permission
23 | - Other conduct which could reasonably be considered inappropriate in a professional setting
24 |
25 | ## Our Responsibilities
26 |
27 | Project maintainers are responsible for clarifying the standards of acceptable behavior and are expected to take appropriate and fair corrective action in response to any instances of unacceptable behavior.
28 |
29 | Project maintainers have the right and responsibility to remove, edit, or reject comments, commits, code, wiki edits, issues, and other contributions that are not aligned to this Code of Conduct, or to ban temporarily or permanently any contributor for other behaviors that they deem inappropriate, threatening, offensive, or harmful.
30 |
31 | ## Scope
32 |
33 | This Code of Conduct applies both within project spaces and in public spaces when an individual is representing the project or its community. Examples of representing a project or community include using an official project e-mail address, posting via an official social media account, or acting as an appointed representative at an online or offline event. Representation of a project may be further defined and clarified by project maintainers.
34 |
35 | ## Enforcement
36 |
37 | Instances of abusive, harassing, or otherwise unacceptable behavior may be reported by contacting the project team at hello@koreez.com. The project team will review and investigate all complaints, and will respond in a way that it deems appropriate to the circumstances. The project team is obligated to maintain confidentiality with regard to the reporter of an incident. Further details of specific enforcement policies may be posted separately.
38 |
39 | Project maintainers who do not follow or enforce the Code of Conduct in good faith may face temporary or permanent repercussions as determined by other members of the project's leadership.
40 |
41 | ## Attribution
42 |
43 | This Code of Conduct is adapted from the [Contributor Covenant][homepage], version 1.4, available at [http://contributor-covenant.org/version/1/4][version]
44 |
45 | [homepage]: http://contributor-covenant.org
46 | [version]: http://contributor-covenant.org/version/1/4/
47 |
--------------------------------------------------------------------------------
/src/components/AppBarMenu/index.tsx:
--------------------------------------------------------------------------------
1 | import React, { Fragment, Component } from 'react';
2 | import { inject, observer } from 'mobx-react';
3 | import { EditorStoreProp, EDITOR_STORE } from '../../stores';
4 | import MenuIcon from '@material-ui/icons/Menu';
5 | import SaveAltIcon from '@material-ui/icons/SaveAlt';
6 | import FolderOpenIcon from '@material-ui/icons/FolderOpen';
7 | import SaveIcon from '@material-ui/icons/Save';
8 | import DeleteForeverIcon from '@material-ui/icons/DeleteForever';
9 | import InsertPhotoIcon from '@material-ui/icons/InsertPhoto';
10 | import { Menu, Fade, IconButton } from '@material-ui/core';
11 | import AppBarMenuItem from '../AppBarMenuItem';
12 |
13 | @inject(EDITOR_STORE)
14 | @observer
15 | class AppBarMenu extends Component {
16 | state = {
17 | anchorEl: null,
18 | };
19 |
20 | handleMenuClick = (event: any) => {
21 | this.setState({ anchorEl: event.currentTarget });
22 | };
23 |
24 | handleMenuClose = () => {
25 | this.setState({ anchorEl: null });
26 | };
27 |
28 | render() {
29 | const { editorStore } = this.props;
30 | const {
31 | setOpenExportDialog,
32 | setOpenImportDialog,
33 | setOpenSaveDialog,
34 | setOpenBackgroundDialog,
35 | setInitialImportProps,
36 | resetBackground,
37 | background,
38 | } = editorStore!;
39 | const { anchorEl } = this.state;
40 | const menuOpen = Boolean(anchorEl);
41 |
42 | return (
43 |
44 |
45 |
47 |
48 |
98 |
99 | );
100 | }
101 | }
102 |
103 | export default AppBarMenu;
104 |
--------------------------------------------------------------------------------
/src/components/CompositeProperty/index.tsx:
--------------------------------------------------------------------------------
1 | import React, { Component, Fragment } from 'react';
2 | import { EMITTER_STORE } from '../../stores';
3 | import { observer, inject } from 'mobx-react';
4 | import { EmitterStoreProp } from '../../stores/emitterStore';
5 | import MultipleInput from '../MultipleInput';
6 | import _isPlainObject from 'lodash/isPlainObject';
7 | import Switch from '../Switch';
8 | import TextField, { textField } from '../TextField';
9 | import Select from '../Select';
10 | import { hasBoth, hasKey } from '../../utils';
11 | import { Grid } from '@material-ui/core';
12 | import { easing } from '../../constants';
13 |
14 | type Props = {
15 | configName: string;
16 | label?: string;
17 | };
18 |
19 | @inject(EMITTER_STORE)
20 | @observer
21 | class CompositeProperty extends Component {
22 | getBody(isObject: boolean, random: boolean) {
23 | const { configName, emitterStore } = this.props;
24 | const {
25 | currentEmitterConfig,
26 | toggleRandom,
27 | changeSelectDropdown,
28 | } = emitterStore!;
29 | const value = currentEmitterConfig[configName];
30 |
31 | let start = 'start';
32 | let end = 'end';
33 |
34 | if (random) {
35 | start = 'min';
36 | end = 'max';
37 | }
38 |
39 | return isObject ? (
40 |
41 | toggleRandom(configName)}
45 | />
46 |
47 |
48 | ${start}`} label={start} />
49 |
50 |
51 | ${end}`} label={end} />
52 |
53 |
54 |
63 | {hasKey(value, 'steps') ? (
64 |
65 | steps`} label="steps" />
66 |
67 | ) : null}
68 |
69 |
70 | ) : (
71 |
72 | {(params: any) => textField({ ...params, hideLabel: true })}
73 |
74 | );
75 | }
76 |
77 | render() {
78 | const { configName, emitterStore } = this.props;
79 | const { currentEmitterConfig, changePropertyType } = emitterStore!;
80 | const value = currentEmitterConfig[configName];
81 | const random = hasBoth(value, 'min', 'max');
82 | const isObject = _isPlainObject(value);
83 |
84 | return (
85 |
86 |
87 | changePropertyType(configName)}
91 | />
92 |
93 |
94 | {this.getBody(isObject, random)}
95 |
96 |
97 | );
98 | }
99 | }
100 |
101 | export default CompositeProperty;
102 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # Phaser3 Particle Editor
2 |
3 | [](https://github.com/koreezgames/phaser3-particle-editor/blob/master/LICENSE)
4 | [](https://travis-ci.org/koreezgames/phaser3-particle-editor)
5 | [](https://codebeat.co/projects/github-com-koreezgames-phaser3-particle-editor-master)
6 | [](https://greenkeeper.io/)
7 | [](https://github.com/koreezgames/phaser3-particle-editor/pulls)
8 | [](https://github.com/prettier/prettier)
9 |
10 | This tool was designed to interactively create particle emitters using [Phaser](http://phaser.io)
11 |
12 | View the editor [here](https://koreezgames.github.io/phaser3-particle-editor/).
13 |
14 | 
15 |
16 | Key features:
17 |
18 | - Blazing fast
19 | - No runtime needed
20 | - Easy to use
21 |
22 | ## Getting Started
23 |
24 | First you want to get your project exported via [editor](https://koreezgames.github.io/phaser3-particle-editor/). You can do it by clicking on the menu button right next to the project name.
25 |
26 | Exported project structure:
27 |
28 | 
29 |
30 | ## Usage
31 |
32 | ```javascript
33 | var config = {
34 | type: Phaser.WEBGL,
35 | width: 800,
36 | height: 600,
37 | backgroundColor: '#262626',
38 | parent: 'phaser-example',
39 | scene: {
40 | preload: preload,
41 | create: create,
42 | },
43 | };
44 |
45 | var game = new Phaser.Game(config);
46 |
47 | function preload() {
48 | this.load.atlas('shapes', 'assets/shapes.png', 'assets/shapes.json');
49 | this.load.text('particle-effect', 'assets/particle-effect.json');
50 | }
51 |
52 | function create() {
53 | this.add.particles('shapes', new Function('return ' + this.cache.text.get('particle-effect'))());
54 | }
55 | ```
56 |
57 | ## Contributing
58 |
59 | The main purpose of this repository is to continue to evolve Phaser, making it easier to use. Development of Editor happens in the open on GitHub, and we are grateful to the community for contributing bugfixes and improvements. Read below to learn how you can take part in improving Editor.
60 |
61 | ### [Code of Conduct](https://github.com/koreezgames/phaser3-particle-editor/blob/master/CODE_OF_CONDUCT.md)
62 |
63 | This Code of Conduct is adapted from the Contributor Covenant, version 1.4, available at http://contributor-covenant.org/version/1/4. Please read [the full text](https://github.com/koreezgames/phaser3-particle-editor/blob/master/CODE_OF_CONDUCT.md) so that you can understand what actions will and will not be tolerated.
64 |
65 | ### [Contributing Guide](https://github.com/koreezgames/phaser3-particle-editor/blob/master/CONTRIBUTING.md)
66 |
67 | Read our [contributing guide](https://github.com/koreezgames/phaser3-particle-editor/blob/master/CONTRIBUTING.md) to learn about our development process, how to propose bugfixes and improvements, and how to build and test your changes to Editor.
68 |
69 | ## License
70 |
71 | Editor is [MIT licensed](./LICENSE).
72 |
--------------------------------------------------------------------------------
/src/components/EmitterItem/index.tsx:
--------------------------------------------------------------------------------
1 | import React, { Component, Fragment } from 'react';
2 | import {
3 | ListItem,
4 | ListItemText,
5 | ListItemSecondaryAction,
6 | IconButton,
7 | Menu,
8 | MenuItem,
9 | Switch,
10 | } from '@material-ui/core';
11 | import MoreVertIcon from '@material-ui/icons/MoreVert';
12 | import DeleteIcon from '@material-ui/icons/Delete';
13 | import FileCopyIcon from '@material-ui/icons/FileCopy';
14 | import { EMITTER_STORE, EmitterStoreProp } from '../../stores';
15 | import { inject, observer } from 'mobx-react';
16 |
17 | const actions = [ {
27 | state = {
28 | anchorEl: null,
29 | };
30 |
31 | handleClick = (event: any) => {
32 | this.setState({ anchorEl: event.currentTarget });
33 | };
34 |
35 | handleClose = () => {
36 | this.setState({ anchorEl: null });
37 | };
38 |
39 | render() {
40 | const { index, emitterStore } = this.props;
41 | const {
42 | emitters,
43 | changeEmitterIndex,
44 | emitterIndex,
45 | changeEmitterConfig,
46 | removeEmitter,
47 | copyEmitter,
48 | } = emitterStore!;
49 | const { anchorEl } = this.state;
50 | const open = Boolean(anchorEl);
51 | const { name, config } = emitters[index];
52 |
53 | return (
54 |
55 | changeEmitterIndex(index)}
59 | >
60 |
62 |
66 | changeEmitterConfig('visible', event.target.checked, index)
67 | }
68 | />
69 |
74 |
76 |
110 |
111 |
112 |
113 | );
114 | }
115 | }
116 |
117 | export default EmitterItem;
118 |
--------------------------------------------------------------------------------
/src/components/Zone/index.tsx:
--------------------------------------------------------------------------------
1 | import React, { Component, Fragment } from 'react';
2 | import { EMITTER_STORE } from '../../stores';
3 | import { observer, inject } from 'mobx-react';
4 | import { EmitterStoreProp } from '../../stores/emitterStore';
5 | import Switch from '../Switch';
6 | import { getZoneShapeProps } from '../../utils';
7 | import { Radio, RadioGroup, FormControlLabel } from '@material-ui/core';
8 | import Select from '../Select';
9 | import ComplexTextField from '../ComplexTextField';
10 |
11 | interface Props {
12 | configName: string;
13 | types: [string, string];
14 | onEnable?: (zoneValue: any) => any;
15 | onTypeChange?: (zoneValue: any, type: string) => any;
16 | options: any;
17 | }
18 |
19 | @inject(EMITTER_STORE)
20 | @observer
21 | class Zone extends Component {
22 | getZoneTypeRadioButtons() {
23 | const { configName, types, emitterStore, onTypeChange } = this.props;
24 | const { currentEmitterConfig, changeEmitterConfig } = emitterStore!;
25 | const zone = currentEmitterConfig[configName];
26 |
27 | return (
28 | {
31 | let zoneValue = { ...zone, type: value };
32 | zoneValue = onTypeChange ? onTypeChange(zoneValue, value) : zoneValue;
33 | changeEmitterConfig(configName, zoneValue);
34 | }}
35 | >
36 |
47 | );
48 | }
49 |
50 | render() {
51 | const { configName, types, emitterStore, onEnable, options } = this.props;
52 | const {
53 | currentEmitter,
54 | currentEmitterConfig,
55 | changeEmitterConfig,
56 | changeDebugMode,
57 | } = emitterStore!;
58 | const zone = currentEmitterConfig[configName];
59 |
60 | return (
61 |
62 | {
66 | let zoneValue = event.target.checked
67 | ? { ...getZoneShapeProps('Rectangle'), type: types[0] }
68 | : undefined;
69 | zoneValue = zoneValue && onEnable ? onEnable(zoneValue) : zoneValue;
70 | changeEmitterConfig(configName, zoneValue);
71 | }}
72 | />
73 | {zone ? (
74 |
75 | {this.getZoneTypeRadioButtons()}
76 | {
80 | changeDebugMode(configName, event.target.checked);
81 | }}
82 | />
83 |
97 | ) : null}
98 |
99 | );
100 | }
101 | }
102 |
103 | export default Zone;
104 |
--------------------------------------------------------------------------------
/src/components/EmitterConfig/index.tsx:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 | import { withStyles, WithStyles } from '@material-ui/core';
3 | import { deathZoneEdgeShapes, emitZoneEdgeShapes } from '../../constants';
4 | import ExpansionPanelXY from './expansionPanelXY';
5 | import ExpansionPanelCompositeProperty from './expansionPanelCompositeProperty';
6 | import ExpansionPanelZone from './expansionPanelZone';
7 | import ExpansionPanelOptions from './expansionPanelOptions';
8 | import ExpansionPanelFrame from './expansionPanelFrame';
9 | import ExpansionPanelColorPicker from './expansionPanelColorPicker';
10 | import ExpansionPanelTransform from './expansionPanelTransform';
11 | import ExpansionPanelBounds from './expansionPanelBounds';
12 | import ExpansionPanelBlendMode from './expansionPanelBlendMode';
13 |
14 | const styles = {
15 | root: {
16 | height: 'calc(100vh - 48px)',
17 | overflow: 'auto',
18 | },
19 | };
20 |
21 | class EmitterConfig extends Component> {
22 | render() {
23 | return (
24 |
36 | > {
37 | handleChange = (event: any) => {
38 | const { setFile } = this.props.editorStore!;
39 | const file = event.target.files[0];
40 | if (file) {
41 | setFile(file);
42 | }
43 | };
44 |
45 | render() {
46 | const { editorStore, classes } = this.props;
47 | const { file, fileError, fileErrorText } = editorStore!;
48 | const inputLabel = file ? file.name : ' ';
49 |
50 | return (
51 |
52 |
53 |
54 |
61 |
79 |
80 |
81 |
83 |
84 | {fileError && (
85 | {fileErrorText}
86 | )}
87 |
88 |
89 |
90 | );
91 | }
92 | }
93 |
94 | type Props = {
95 | onSuccessLoad: () => void;
96 | onReadyResult: (emitters: any) => void;
97 | };
98 |
99 | @inject(EDITOR_STORE)
100 | @observer
101 | class ImportProjectButton extends React.Component {
102 | handleImport = async () => {
103 | const { editorStore, onSuccessLoad, onReadyResult } = this.props;
104 | const { importProject } = editorStore!;
105 | const result = await importProject();
106 | if (result) {
107 | onReadyResult(result);
108 | onSuccessLoad();
109 | }
110 | };
111 |
112 | render() {
113 | const { editorStore } = this.props;
114 | const { file, fileError, fileLoadingStatus } = editorStore!;
115 |
116 | return (
117 |
126 | );
127 | }
128 | }
129 |
130 | export { ImportProjectButton };
131 | export default withStyles(styles)(ImportProjectFile);
132 |
--------------------------------------------------------------------------------
/src/components/ImportBackground/index.tsx:
--------------------------------------------------------------------------------
1 | import {
2 | Button,
3 | Grid,
4 | WithStyles,
5 | withStyles,
6 | createStyles,
7 | Theme,
8 | Tooltip,
9 | Typography,
10 | } from '@material-ui/core';
11 | import React, { Fragment } from 'react';
12 | import { inject, observer } from 'mobx-react';
13 | import AttachmentIcon from '@material-ui/icons/Attachment';
14 | import { EDITOR_STORE, EditorStoreProp } from '../../stores';
15 |
16 | const styles = (theme: Theme) =>
17 | createStyles({
18 | previewImgRoot: {
19 | position: 'relative',
20 | '&:hover div': {
21 | visibility: 'visible',
22 | },
23 | },
24 | removeImage: {
25 | height: theme.spacing.unit * 3,
26 | width: theme.spacing.unit * 3,
27 | top: -theme.spacing.unit,
28 | right: -theme.spacing.unit,
29 | fontFamily: theme.typography.fontFamily,
30 | background: '#d20000',
31 | position: 'absolute',
32 | cursor: 'pointer',
33 | color: '#fff',
34 | borderRadius: '50%',
35 | display: 'flex',
36 | justifyContent: 'center',
37 | alignItems: 'center',
38 | visibility: 'hidden',
39 | },
40 | input: {
41 | display: 'none',
42 | },
43 | preview: {
44 | display: 'flex',
45 | justifyContent: 'center',
46 | flexDirection: 'row',
47 | },
48 | previewImg: {
49 | height: theme.spacing.unit * 12,
50 | boxSizing: 'border-box',
51 | border: `1px dotted ${theme.palette.background.default}`,
52 | },
53 | button: {
54 | margin: theme.spacing.unit,
55 | marginLeft: 0,
56 | },
57 | rightIcon: {
58 | marginLeft: theme.spacing.unit,
59 | },
60 | });
61 |
62 | @inject(EDITOR_STORE)
63 | @observer
64 | class ImportBackground extends React.Component<
65 | EditorStoreProp & WithStyles
66 | > {
67 | handleChange = (event: any) => {
68 | const { setBackground, setOpenBackgroundDialog } = this.props.editorStore!;
69 | const background = event.target.files[0];
70 | if (background) {
71 | setOpenBackgroundDialog(false);
72 | setBackground(background);
73 | }
74 | };
75 |
76 | render() {
77 | const { editorStore, classes } = this.props;
78 | const { background, resetBackground } = editorStore!;
79 | const imageData: any = background.data;
80 |
81 | return (
82 |
83 |
84 |
85 |
87 |
94 |
112 |
113 |
116 |
117 |
127 |
128 |
129 | {background.size.width}x{background.size.height}
130 |
131 |
132 |
133 | ) : null}
134 |
135 |
136 |
137 | );
138 | }
139 | }
140 |
141 | export default withStyles(styles)(ImportBackground);
142 |
--------------------------------------------------------------------------------
/src/stores/emitterStore.ts:
--------------------------------------------------------------------------------
1 | import _set from 'lodash/set';
2 | import { action, computed, observable } from 'mobx';
3 | import {
4 | DEFAULT_DEBUG_MODES,
5 | emitterConfig as emitterInitialConfig,
6 | EMITTER_NAME_PREFIX,
7 | } from '../constants';
8 | import { deepCopy, getNewEmitterID, hasBoth, hasKey } from '../utils';
9 | import _isPlainObject from 'lodash/isPlainObject';
10 |
11 | export class EmitterStore {
12 | @observable
13 | emitters = [
14 | {
15 | id: 1,
16 | name: `${EMITTER_NAME_PREFIX}1`,
17 | config: emitterInitialConfig,
18 | debugModes: { ...DEFAULT_DEBUG_MODES },
19 | },
20 | ];
21 |
22 | @action.bound
23 | changeDebugMode(configName: string, checked: boolean) {
24 | this.currentEmitter.debugModes[configName] = checked;
25 | }
26 |
27 | @computed
28 | get currentEmitter() {
29 | return this.emitters[this.emitterIndex];
30 | }
31 |
32 | @computed
33 | get currentEmitterConfig() {
34 | return this.currentEmitter.config;
35 | }
36 |
37 | @observable
38 | lastEmitters: any[];
39 |
40 | @observable
41 | emitterIndex = 0;
42 |
43 | @action.bound
44 | changeEmitterConfig(configName: string, value: any, index?: number) {
45 | const emitter =
46 | index !== undefined ? this.emitters[index] : this.currentEmitter;
47 | _set(emitter.config, configName.split('>'), value);
48 | }
49 |
50 | @action.bound
51 | changePropertyType(configName: string) {
52 | const currentValue = this.currentEmitter.config[configName];
53 | const initialValue = emitterInitialConfig[configName];
54 | const isObjectInitValue = _isPlainObject(initialValue);
55 | const isObjectCurrentValue = _isPlainObject(currentValue);
56 |
57 | let newConfig;
58 | if (isObjectCurrentValue) {
59 | newConfig = isObjectInitValue ? [0] : initialValue;
60 | } else {
61 | newConfig = isObjectInitValue
62 | ? initialValue
63 | : { start: 0, end: 0, ease: 'Linear' };
64 | }
65 | this.changeEmitterConfig(configName, newConfig);
66 | }
67 |
68 | @action.bound
69 | toggleRandom(configName: string) {
70 | const currentValue = this.currentEmitter.config[configName];
71 | const newConfig = { ...currentValue };
72 |
73 | if (hasBoth(currentValue, 'min', 'max')) {
74 | const [start, end] = [newConfig.min, newConfig.max];
75 | newConfig.start = start;
76 | newConfig.end = end;
77 | delete newConfig.min;
78 | delete newConfig.max;
79 | } else {
80 | const [min, max] = [newConfig.start, newConfig.end];
81 | newConfig.min = min;
82 | newConfig.max = max;
83 | delete newConfig.start;
84 | delete newConfig.end;
85 | }
86 | this.changeEmitterConfig(configName, newConfig);
87 | }
88 |
89 | @action.bound
90 | changeSelectDropdown(configName: string, value: any) {
91 | if (value === 'Custom') {
92 | this.toggleSteps(configName);
93 | } else {
94 | this.toggleSteps(configName, true);
95 | this.changeEmitterConfig(`${configName}>ease`, value);
96 | }
97 | }
98 |
99 | toggleSteps(configName: string, hide: boolean = false) {
100 | const initialValue = emitterInitialConfig[configName];
101 | const currentValue = this.currentEmitter.config[configName];
102 | const newConfig = { ...currentValue };
103 |
104 | if (hide) {
105 | delete newConfig.steps;
106 | newConfig.ease = hasKey(initialValue, 'ease')
107 | ? initialValue.ease
108 | : 'Linear';
109 | } else {
110 | delete newConfig.ease;
111 | newConfig.steps = hasKey(initialValue, 'steps') ? initialValue.steps : 10;
112 | }
113 | this.changeEmitterConfig(configName, newConfig);
114 | }
115 |
116 | // emitter position
117 | @action.bound
118 | setEmitterPosition(x: number, y: number) {
119 | this.changeEmitterConfig('x', [parseInt(x as any, 10)]);
120 | this.changeEmitterConfig('y', [parseInt(y as any, 10)]);
121 | }
122 |
123 | @action.bound
124 | removeEmitter(index: number) {
125 | this.emitters.splice(index, 1);
126 | const currentEmitterIndex = index === 0 ? index : index - 1;
127 | this.changeEmitterIndex(currentEmitterIndex);
128 | }
129 |
130 | @action.bound
131 | addEmitter(emitterConfig?: any, prevDebugModes?: any) {
132 | const id = getNewEmitterID(this.emitters);
133 | const name = `${EMITTER_NAME_PREFIX}${id}`;
134 | const config = emitterConfig ? emitterConfig : emitterInitialConfig;
135 | const debugModes = prevDebugModes
136 | ? { ...prevDebugModes }
137 | : { ...DEFAULT_DEBUG_MODES };
138 | this.emitters.push({ id, name, config, debugModes });
139 | this.setEmitterIndex(this.emitters.length - 1);
140 | }
141 |
142 | @action.bound
143 | copyEmitter(index: number) {
144 | const { config, debugModes } = this.emitters[index];
145 | this.addEmitter(deepCopy(config), debugModes);
146 | }
147 |
148 | @action.bound
149 | changeEmitterIndex(index: number) {
150 | this.emitterIndex = index;
151 | }
152 |
153 | @action.bound
154 | setEmitters(emitters: any) {
155 | this.emitters = emitters;
156 | this.setEmitterIndex(0);
157 | }
158 |
159 | setEmitterIndex(index: number) {
160 | this.emitterIndex = index;
161 | }
162 | }
163 |
164 | export interface EmitterStoreProp {
165 | emitterStore?: EmitterStore;
166 | }
167 |
168 | export default new EmitterStore();
169 |
--------------------------------------------------------------------------------
/src/constants/frames.ts:
--------------------------------------------------------------------------------
1 | const frames = [
2 | {
3 | text: 'Circle 01',
4 | value: 'circle_01',
5 | },
6 | {
7 | text: 'Circle 02',
8 | value: 'circle_02',
9 | },
10 | {
11 | text: 'Circle 03',
12 | value: 'circle_03',
13 | },
14 | {
15 | text: 'Circle 04',
16 | value: 'circle_04',
17 | },
18 | {
19 | text: 'Circle 05',
20 | value: 'circle_05',
21 | },
22 | {
23 | text: 'Dirt 01',
24 | value: 'dirt_01',
25 | },
26 | {
27 | text: 'Dirt 02',
28 | value: 'dirt_02',
29 | },
30 | {
31 | text: 'Dirt 03',
32 | value: 'dirt_03',
33 | },
34 | {
35 | text: 'Fire 01',
36 | value: 'fire_01',
37 | },
38 | {
39 | text: 'Fire 02',
40 | value: 'fire_02',
41 | },
42 | {
43 | text: 'Flame 01',
44 | value: 'flame_01',
45 | },
46 | {
47 | text: 'Flame 02',
48 | value: 'flame_02',
49 | },
50 | {
51 | text: 'Flame 03',
52 | value: 'flame_03',
53 | },
54 | {
55 | text: 'Flame 04',
56 | value: 'flame_04',
57 | },
58 | {
59 | text: 'Flame 05',
60 | value: 'flame_05',
61 | },
62 | {
63 | text: 'Flame 06',
64 | value: 'flame_06',
65 | },
66 | {
67 | text: 'Light 01',
68 | value: 'light_01',
69 | },
70 | {
71 | text: 'Light 02',
72 | value: 'light_02',
73 | },
74 | {
75 | text: 'Light 03',
76 | value: 'light_03',
77 | },
78 | {
79 | text: 'Magic 01',
80 | value: 'magic_01',
81 | },
82 | {
83 | text: 'Magic 02',
84 | value: 'magic_02',
85 | },
86 | {
87 | text: 'Magic 03',
88 | value: 'magic_03',
89 | },
90 | {
91 | text: 'Magic 04',
92 | value: 'magic_04',
93 | },
94 | {
95 | text: 'Magic 05',
96 | value: 'magic_05',
97 | },
98 | {
99 | text: 'Muzzle 01',
100 | value: 'muzzle_01',
101 | },
102 | {
103 | text: 'Muzzle 02',
104 | value: 'muzzle_02',
105 | },
106 | {
107 | text: 'Muzzle 03',
108 | value: 'muzzle_03',
109 | },
110 | {
111 | text: 'Muzzle 04',
112 | value: 'muzzle_04',
113 | },
114 | {
115 | text: 'Muzzle 05',
116 | value: 'muzzle_05',
117 | },
118 | {
119 | text: 'Scorch 01',
120 | value: 'scorch_01',
121 | },
122 | {
123 | text: 'Scorch 02',
124 | value: 'scorch_02',
125 | },
126 | {
127 | text: 'Scorch 03',
128 | value: 'scorch_03',
129 | },
130 | {
131 | text: 'Scratch 01',
132 | value: 'scratch_01',
133 | },
134 | {
135 | text: 'Slash 01',
136 | value: 'slash_01',
137 | },
138 | {
139 | text: 'Slash 02',
140 | value: 'slash_02',
141 | },
142 | {
143 | text: 'Slash 03',
144 | value: 'slash_03',
145 | },
146 | {
147 | text: 'Slash 04',
148 | value: 'slash_04',
149 | },
150 | {
151 | text: 'Smoke 01',
152 | value: 'smoke_01',
153 | },
154 | {
155 | text: 'Smoke 02',
156 | value: 'smoke_02',
157 | },
158 | {
159 | text: 'Smoke 03',
160 | value: 'smoke_03',
161 | },
162 | {
163 | text: 'Smoke 04',
164 | value: 'smoke_04',
165 | },
166 | {
167 | text: 'Smoke 05',
168 | value: 'smoke_05',
169 | },
170 | {
171 | text: 'Smoke 06',
172 | value: 'smoke_06',
173 | },
174 | {
175 | text: 'Smoke 07',
176 | value: 'smoke_07',
177 | },
178 | {
179 | text: 'Smoke 08',
180 | value: 'smoke_08',
181 | },
182 | {
183 | text: 'Smoke 09',
184 | value: 'smoke_09',
185 | },
186 | {
187 | text: 'Smoke 10',
188 | value: 'smoke_10',
189 | },
190 | {
191 | text: 'Smoke 11',
192 | value: 'smoke_11',
193 | },
194 | {
195 | text: 'Spark 01',
196 | value: 'spark_01',
197 | },
198 | {
199 | text: 'Spark 02',
200 | value: 'spark_02',
201 | },
202 | {
203 | text: 'Spark 03',
204 | value: 'spark_03',
205 | },
206 | {
207 | text: 'Spark 04',
208 | value: 'spark_04',
209 | },
210 | {
211 | text: 'Spark 05',
212 | value: 'spark_05',
213 | },
214 | {
215 | text: 'Spark 06',
216 | value: 'spark_06',
217 | },
218 | {
219 | text: 'Spark 07',
220 | value: 'spark_07',
221 | },
222 | {
223 | text: 'Star 01',
224 | value: 'star_01',
225 | },
226 | {
227 | text: 'Star 02',
228 | value: 'star_02',
229 | },
230 | {
231 | text: 'Star 03',
232 | value: 'star_03',
233 | },
234 | {
235 | text: 'Star 04',
236 | value: 'star_04',
237 | },
238 | {
239 | text: 'Star 05',
240 | value: 'star_05',
241 | },
242 | {
243 | text: 'Star 06',
244 | value: 'star_06',
245 | },
246 | {
247 | text: 'Star 07',
248 | value: 'star_07',
249 | },
250 | {
251 | text: 'Star 08',
252 | value: 'star_08',
253 | },
254 | {
255 | text: 'Star 09',
256 | value: 'star_09',
257 | },
258 | {
259 | text: 'Symbol 01',
260 | value: 'symbol_01',
261 | },
262 | {
263 | text: 'Symbol 02',
264 | value: 'symbol_02',
265 | },
266 | {
267 | text: 'Trace 01',
268 | value: 'trace_01',
269 | },
270 | {
271 | text: 'Trace 02',
272 | value: 'trace_02',
273 | },
274 | {
275 | text: 'Trace 03',
276 | value: 'trace_03',
277 | },
278 | {
279 | text: 'Trace 04',
280 | value: 'trace_04',
281 | },
282 | {
283 | text: 'Trace 05',
284 | value: 'trace_05',
285 | },
286 | {
287 | text: 'Trace 06',
288 | value: 'trace_06',
289 | },
290 | {
291 | text: 'Trace 07',
292 | value: 'trace_07',
293 | },
294 | {
295 | text: 'Twirl 01',
296 | value: 'twirl_01',
297 | },
298 | {
299 | text: 'Twirl 02',
300 | value: 'twirl_02',
301 | },
302 | {
303 | text: 'Twirl 03',
304 | value: 'twirl_03',
305 | },
306 | {
307 | text: 'Window 01',
308 | value: 'window_01',
309 | },
310 | {
311 | text: 'Window 02',
312 | value: 'window_02',
313 | },
314 | {
315 | text: 'Window 03',
316 | value: 'window_03',
317 | },
318 | ];
319 |
320 | export default frames;
321 |
--------------------------------------------------------------------------------
/src/components/NewProjectModal/index.tsx:
--------------------------------------------------------------------------------
1 | import {
2 | Button,
3 | Dialog,
4 | DialogActions,
5 | DialogContent,
6 | DialogTitle,
7 | TextField,
8 | Grid,
9 | DialogContentText,
10 | Tabs,
11 | Tab,
12 | AppBar,
13 | createStyles,
14 | Theme,
15 | WithStyles,
16 | withStyles,
17 | } from '@material-ui/core';
18 | import React from 'react';
19 | import { inject, observer } from 'mobx-react';
20 | import { EditorStoreProp } from '../../stores/editorStore';
21 | import CreateIcon from '@material-ui/icons/Create';
22 | import FolderOpenIcon from '@material-ui/icons/FolderOpen';
23 | import { Fragment } from 'react';
24 | import ImportProjectFile, { ImportProjectButton } from '../ImportProjectFile';
25 | import { EDITOR_STORE, EMITTER_STORE, EmitterStoreProp } from '../../stores';
26 | import ImportBackground from '../ImportBackground';
27 |
28 | enum Project {
29 | Create,
30 | Upload,
31 | }
32 |
33 | const styles = (theme: Theme) =>
34 | createStyles({
35 | input: {
36 | display: 'none',
37 | },
38 | button: {
39 | margin: theme.spacing.unit,
40 | },
41 | leftIcon: {
42 | marginRight: theme.spacing.unit,
43 | },
44 | rightIcon: {
45 | marginLeft: theme.spacing.unit,
46 | },
47 | });
48 |
49 | @inject(EDITOR_STORE, EMITTER_STORE)
50 | @observer
51 | class NewProjectModal extends React.Component<
52 | WithStyles & EditorStoreProp & EmitterStoreProp
53 | > {
54 | state = {
55 | value: Project.Create,
56 | };
57 |
58 | handleChange = (event: any, value: Project) => {
59 | this.setState({ value });
60 | };
61 |
62 | getBodyCreate() {
63 | const {
64 | name,
65 | height,
66 | width,
67 | changeConfig,
68 | setError,
69 | } = this.props.editorStore!;
70 |
71 | return (
72 |
73 |
74 | Lets start something new.
75 |
76 |
77 | {
84 | setError('name', false);
85 | }}
86 | onChange={event => changeConfig('name', event.target.value)}
87 | />
88 |
89 |
90 | {
97 | setError('width', false);
98 | }}
99 | onChange={event => changeConfig('width', event.target.value)}
100 | />
101 |
102 |
103 | {
110 | setError('height', false);
111 | }}
112 | onChange={event => changeConfig('height', event.target.value)}
113 | />
114 |
115 |
116 |
118 |
119 | );
120 | }
121 |
122 | getBodyUpload() {
123 | return (
124 |
125 |
126 |
127 | Lets continue something awesome.
128 |
129 |
130 |
131 |
133 |
134 | );
135 | }
136 |
137 | handleKeyDown = (event: any) => {
138 | const { setStatus } = this.props.editorStore!;
139 | if (event.keyCode === 13 && this.state.value === Project.Create) {
140 | setStatus(true);
141 | }
142 | };
143 |
144 | render() {
145 | const { value } = this.state;
146 | const { editorStore, emitterStore } = this.props;
147 | const { setStatus, setEditorProps, background } = editorStore!;
148 | const { setEmitters } = emitterStore!;
149 | return (
150 |
201 | );
202 | }
203 | }
204 |
205 | export default withStyles(styles)(NewProjectModal);
206 |
--------------------------------------------------------------------------------
/src/stores/editorStore.ts:
--------------------------------------------------------------------------------
1 | import { action, observable } from 'mobx';
2 | import {
3 | validateForm,
4 | getFileExtension,
5 | validateZip,
6 | getImageSize,
7 | } from '../utils';
8 | import JSZip from 'jszip';
9 | import { ARCHIVE_EXTENSION, ATLAS_FILE_NAME } from '../constants';
10 |
11 | export class EditorStore {
12 | @observable
13 | created: boolean;
14 |
15 | @observable
16 | openSaveDialog: boolean = false;
17 |
18 | @observable
19 | openExportDialog: boolean = false;
20 |
21 | @observable
22 | openImportDialog: boolean = false;
23 |
24 | @observable
25 | openBackgroundDialog: boolean = false;
26 |
27 | @observable
28 | exportHiddenEmitters: boolean = false;
29 |
30 | @observable
31 | background = {
32 | data: null,
33 | loading: false,
34 | size: {
35 | width: 0,
36 | height: 0,
37 | },
38 | };
39 |
40 | @observable
41 | name = {
42 | value: 'MyProject',
43 | error: false,
44 | };
45 |
46 | @observable
47 | height = {
48 | value: 600,
49 | error: false,
50 | };
51 |
52 | @observable
53 | width = {
54 | value: 800,
55 | error: false,
56 | };
57 |
58 | @observable
59 | file: any = null;
60 |
61 | @observable
62 | fileError = false;
63 |
64 | @observable
65 | fileErrorText = '';
66 |
67 | @observable
68 | fileLoadingStatus = false;
69 |
70 | @action.bound
71 | setEditorProps(editorProps: any) {
72 | if (editorProps.backgroundData) {
73 | this.background.data = editorProps.backgroundData.data;
74 | this.background.size.width = editorProps.backgroundData.width;
75 | this.background.size.height = editorProps.backgroundData.height;
76 | } else {
77 | this.resetBackground();
78 | }
79 | this.width.value = editorProps.width;
80 | this.height.value = editorProps.height;
81 | this.name.value = editorProps.name;
82 | }
83 |
84 | @action.bound
85 | setInitialImportProps() {
86 | this.setFile(null);
87 | this.setFileError(false);
88 | this.setFileLoadingStatus(false);
89 | }
90 |
91 | setFileErrorText(text: string) {
92 | this.fileErrorText = text;
93 | }
94 |
95 | setFileLoadingStatus(status: boolean) {
96 | this.fileLoadingStatus = status;
97 | }
98 |
99 | @action.bound
100 | setStatus(status: boolean) {
101 | validateForm(this, () => (this.created = status), this.setError.bind(this));
102 | }
103 |
104 | @action.bound
105 | changeConfig(configName: string, value: string) {
106 | this[configName].value = value;
107 | }
108 |
109 | @action.bound
110 | setError(configName: string, errorStatus: boolean = true) {
111 | this[configName].error = errorStatus;
112 | }
113 |
114 | @action.bound
115 | setOpenExportDialog(value: boolean) {
116 | this.openExportDialog = value;
117 | }
118 |
119 | @action.bound
120 | setOpenSaveDialog(value: boolean) {
121 | this.openSaveDialog = value;
122 | }
123 |
124 | @action.bound
125 | setOpenImportDialog(value: boolean) {
126 | this.openImportDialog = value;
127 | }
128 |
129 | @action.bound
130 | setOpenBackgroundDialog(value: boolean) {
131 | this.openBackgroundDialog = value;
132 | }
133 |
134 | @action.bound
135 | setExportHiddenEmitters(value: boolean) {
136 | this.exportHiddenEmitters = value;
137 | }
138 |
139 | @action.bound
140 | setFile(file: any) {
141 | this.setFileLoadingStatus(false);
142 | this.file = file;
143 | if (file !== null) {
144 | this.setFileError(getFileExtension(file.name) !== ARCHIVE_EXTENSION);
145 | this.setFileErrorText(`Invalid file - ${this.file && this.file.name}`);
146 | }
147 | }
148 |
149 | @action.bound
150 | resetBackground() {
151 | this.background = {
152 | data: null,
153 | loading: false,
154 | size: {
155 | width: 0,
156 | height: 0,
157 | },
158 | };
159 | }
160 |
161 | @action.bound
162 | setBackground(background: any) {
163 | if (!/\.(jpe?g|png)$/i.test(background.name)) {
164 | this.resetBackground();
165 | } else {
166 | this.loadBackground(background);
167 | }
168 | }
169 |
170 | loadBackground(background: any) {
171 | console.log('loadBackground');
172 | this.background.loading = true;
173 | const reader = new FileReader();
174 | reader.readAsDataURL(background);
175 | reader.onload = (e: any) => {
176 | const base64 = e.target.result;
177 | getImageSize(base64, (width: number, height: number) => {
178 | this.background = {
179 | data: base64,
180 | loading: false,
181 | size: {
182 | width,
183 | height,
184 | },
185 | };
186 | });
187 | };
188 | }
189 |
190 | setFileError(value: boolean) {
191 | this.fileError = value;
192 | }
193 |
194 | loadProject(file: any) {
195 | return JSZip.loadAsync(file);
196 | }
197 |
198 | onLoadSuccess(zip: any) {
199 | const result = Object.keys(zip.files).map(fileName => {
200 | const file = zip.files[fileName];
201 | const asyncType = /\.(jpe?g|png)$/i.test(file.name)
202 | ? 'uint8array'
203 | : 'text';
204 | return {
205 | value: null,
206 | name: fileName,
207 | promise: file.async(asyncType),
208 | };
209 | });
210 |
211 | const promises = result.map(fileInfo => fileInfo.promise);
212 |
213 | return Promise.all(promises).then(values => {
214 | const filtredResult = result.map((fileInfo, i) => ({
215 | value: values[i],
216 | name: fileInfo.name,
217 | }));
218 | return filtredResult;
219 | });
220 | }
221 |
222 | @action.bound
223 | async importProject() {
224 | this.setFileLoadingStatus(true);
225 | try {
226 | const zip = await this.loadProject(this.file);
227 | this.setFileLoadingStatus(false);
228 | const isValidZip = validateZip(zip);
229 |
230 | if (isValidZip) {
231 | try {
232 | const zipResult = await this.onLoadSuccess(zip);
233 | return zipResult.reduce(
234 | (acc: any, fileData) => {
235 | const { value, name } = fileData;
236 | switch (name) {
237 | case `${ATLAS_FILE_NAME}.png`: {
238 | acc.atlas.image = value;
239 | break;
240 | }
241 | case `${ATLAS_FILE_NAME}.json`: {
242 | acc.atlas.json = JSON.parse(value);
243 | break;
244 | }
245 | case 'emitters.json': {
246 | acc.emitters = JSON.parse(value);
247 | break;
248 | }
249 | case 'editor.json': {
250 | acc.editor = JSON.parse(value);
251 | break;
252 | }
253 | default:
254 | break;
255 | }
256 | return acc;
257 | },
258 | { atlas: { image: null, json: null } },
259 | );
260 | } catch (err) {
261 | console.error(err);
262 | this.setFileError(true);
263 | this.setFileErrorText(`Invalid content!`);
264 | }
265 | } else {
266 | this.setFileError(true);
267 | this.setFileErrorText(`Invalid .${ARCHIVE_EXTENSION} file!`);
268 | }
269 | } catch (err) {
270 | console.error(err);
271 | this.setFileError(true);
272 | this.setFileErrorText('Loading error!');
273 | }
274 |
275 | return false;
276 | }
277 | }
278 |
279 | export interface EditorStoreProp {
280 | editorStore?: EditorStore;
281 | }
282 |
283 | export default new EditorStore();
284 |
--------------------------------------------------------------------------------
/src/utils.ts:
--------------------------------------------------------------------------------
1 | import { saveAs } from 'file-saver';
2 | import JSZip from 'jszip';
3 | import shapesIMAGE from './canvas/assets/shapes.png';
4 | import shapesJSON from './canvas/assets/shapes.json';
5 | import _isEqual from 'lodash/isEqual';
6 |
7 | import {
8 | emitterConfig as emitterInitialConfig,
9 | zoneEdgeSources,
10 | ATLAS_FILE_NAME,
11 | ARCHIVE_EXTENSION,
12 | } from './constants';
13 |
14 | const validateForm = (
15 | { name, height, width }: { name: any; height: any; width: any },
16 | onSuccess: () => {},
17 | onFail: (field: string) => {},
18 | ) => {
19 | let isValid = true;
20 |
21 | if (!isValidName(name.value)) {
22 | onFail('name');
23 | isValid = false;
24 | }
25 |
26 | if (!isValidSize(Number(height.value))) {
27 | onFail('height');
28 | isValid = false;
29 | }
30 |
31 | if (!isValidSize(Number(width.value))) {
32 | onFail('width');
33 | isValid = false;
34 | }
35 |
36 | if (isValid) {
37 | onSuccess();
38 | }
39 | };
40 |
41 | const isValidName = (name: string) => {
42 | return name !== '';
43 | };
44 |
45 | const isValidSize = (value: number) => {
46 | return value > 0;
47 | };
48 |
49 | const getEmitterConfig = (
50 | config: any,
51 | onSourceChange?: (source: any, shapeProps: any) => {},
52 | ) => {
53 | const newConfig = {};
54 | for (const key in config) {
55 | if (config.hasOwnProperty(key)) {
56 | const value = config[key];
57 | if (value === undefined) {
58 | continue;
59 | }
60 | if (value.hasOwnProperty('source')) {
61 | newConfig[key] = {
62 | ...value,
63 | source: new Phaser.Geom[value.shapeType](
64 | ...Object.values(value.source),
65 | ),
66 | };
67 | if (typeof onSourceChange === 'function') {
68 | newConfig[key] = onSourceChange(newConfig[key], value.source);
69 | }
70 | } else {
71 | newConfig[key] =
72 | Array.isArray(value) && value.length === 1 && key !== 'tint'
73 | ? value[0]
74 | : value;
75 | }
76 | }
77 | }
78 | return newConfig;
79 | };
80 |
81 | const getNewEmitterID = (emitters: any) => {
82 | const IDs = emitters
83 | .map((emitter: any) => emitter.id)
84 | .sort((a: any, b: any) => a - b);
85 | let emitterID = null;
86 |
87 | if (IDs[0] !== 1) {
88 | emitterID = 1;
89 | } else {
90 | for (let i = 1; i < IDs.length; i++) {
91 | if (IDs[i] !== IDs[i - 1] + 1) {
92 | emitterID = IDs[i - 1] + 1;
93 | break;
94 | }
95 | }
96 | if (!emitterID) {
97 | emitterID = IDs.length + 1;
98 | }
99 | }
100 |
101 | return emitterID;
102 | };
103 |
104 | const initialConfig = getEmitterConfig(emitterInitialConfig);
105 |
106 | const hasKey = (object: {}, key: string) => object.hasOwnProperty(key);
107 |
108 | const hasBoth = (object: {}, key1: string, key2: string) =>
109 | object.hasOwnProperty(key1) && object.hasOwnProperty(key2);
110 |
111 | const deepCopy = (object: {}) => JSON.parse(JSON.stringify(object));
112 |
113 | const getPickerColor = (color: number) => {
114 | let result = `${color.toString(16)}`;
115 | const zeroCount = 6 - result.length;
116 | result = `#${'0'.repeat(zeroCount)}${result}`;
117 | return result;
118 | };
119 |
120 | const getEmitterIndex = (newEmitters: any, prevEmitters: any) => {
121 | const newEmittersCopy = deepCopy(newEmitters);
122 | const prevEmittersCopy = deepCopy(prevEmitters);
123 | const maxLength = Math.max(newEmittersCopy.length, prevEmittersCopy.length);
124 | let index = -1;
125 | for (let i = 0; i < maxLength; i++) {
126 | if (
127 | JSON.stringify(newEmittersCopy[i]) !== JSON.stringify(prevEmittersCopy[i])
128 | ) {
129 | index = i;
130 | break;
131 | }
132 | }
133 | return index;
134 | };
135 |
136 | const saveProject = async (props: any) => {
137 | const { canvasSize, name, emitters, backgroundData } = props;
138 | const shapeData = await fetch(shapesIMAGE);
139 | const shapeBuffer = await shapeData.arrayBuffer();
140 | const editor = { ...canvasSize, name, backgroundData };
141 |
142 | saveZip({
143 | zipName: name,
144 | extension: ARCHIVE_EXTENSION,
145 | jsonFiles: [
146 | {
147 | fileName: ATLAS_FILE_NAME,
148 | json: JSON.stringify(shapesJSON),
149 | },
150 | {
151 | fileName: 'emitters',
152 | json: JSON.stringify(emitters),
153 | },
154 | {
155 | fileName: 'editor',
156 | json: JSON.stringify(editor),
157 | },
158 | ],
159 | pngFiles: [
160 | {
161 | fileName: ATLAS_FILE_NAME,
162 | buffer: shapeBuffer,
163 | },
164 | ],
165 | });
166 | };
167 |
168 | const exportProject = async (
169 | name: string,
170 | emitters: any[],
171 | exportHidden: boolean,
172 | ) => {
173 | const zoneSources: any[] = [];
174 | let configs: any = emitters.map(emitter =>
175 | getEmitterConfig(emitter.config, (source: any, shapeProps: any) => {
176 | const sourceCopy = { ...source };
177 | sourceCopy.source = `new Phaser.Geom.${source.shapeType}(${[
178 | Object.values(shapeProps),
179 | ]})`;
180 | delete sourceCopy.shapeType;
181 | zoneSources.push(sourceCopy.source);
182 | return sourceCopy;
183 | }),
184 | );
185 |
186 | if (exportHidden === false) {
187 | configs = configs.filter((config: any) => config.visible);
188 | }
189 |
190 | let configsJSON = JSON.stringify(configs);
191 | zoneSources.forEach((source: string) => {
192 | configsJSON = configsJSON.replace(`"${source}"`, `${source}`);
193 | });
194 |
195 | const shapeData = await fetch(shapesIMAGE);
196 | const shapeBuffer = await shapeData.arrayBuffer();
197 |
198 | saveZip({
199 | zipName: name,
200 | extension: 'zip',
201 | jsonFiles: [
202 | {
203 | fileName: ATLAS_FILE_NAME,
204 | json: JSON.stringify(shapesJSON),
205 | },
206 | {
207 | fileName: name,
208 | json: configsJSON,
209 | },
210 | ],
211 | pngFiles: [
212 | {
213 | fileName: ATLAS_FILE_NAME,
214 | buffer: shapeBuffer,
215 | },
216 | ],
217 | });
218 | };
219 |
220 | interface SaveZipProps {
221 | zipName: string;
222 | extension: string;
223 | jsonFiles: any[];
224 | pngFiles: any[];
225 | }
226 |
227 | const saveZip = (config: SaveZipProps) => {
228 | let { zipName, jsonFiles, pngFiles, extension } = config;
229 | zipName = zipName === 'shapes' ? 'particle_shapes' : zipName;
230 |
231 | const zip = new JSZip();
232 |
233 | pngFiles.forEach((pngFile: any) => {
234 | zip.file(`${pngFile.fileName}.png`, pngFile.buffer);
235 | });
236 |
237 | jsonFiles.forEach((jsonFile: any) => {
238 | zip.file(`${jsonFile.fileName}.json`, jsonFile.json);
239 | });
240 |
241 | zip.generateAsync({ type: 'blob' }).then(
242 | (blob: any) => {
243 | saveAs(blob, `${zipName}.${extension}`);
244 | },
245 | (err: any) => {
246 | console.error(err);
247 | },
248 | );
249 | };
250 |
251 | const getZoneShapeProps = (type: string) => {
252 | return zoneEdgeSources.find(({ shapeType }) => shapeType === type);
253 | };
254 |
255 | const getFileExtension = (fileName: string) => {
256 | return fileName.slice(fileName.lastIndexOf('.') + 1);
257 | };
258 |
259 | const validateZip = (zip: any) => {
260 | const validKeys = [
261 | `${ATLAS_FILE_NAME}.png`,
262 | `${ATLAS_FILE_NAME}.json`,
263 | 'emitters.json',
264 | 'editor.json',
265 | ].sort();
266 | const keys = Object.keys(zip.files).sort();
267 | return _isEqual(validKeys, keys);
268 | };
269 |
270 | const execute = (jsonString: string) => {
271 | return new Function(`return ${jsonString}`)();
272 | };
273 |
274 | const getImageSize = (base64: any, cb: any) => {
275 | const image = new Image();
276 | image.src = base64;
277 |
278 | image.onload = () => {
279 | cb(image.width, image.height);
280 | };
281 | };
282 |
283 | export {
284 | getImageSize,
285 | execute,
286 | getFileExtension,
287 | validateZip,
288 | hasBoth,
289 | deepCopy,
290 | hasKey,
291 | getPickerColor,
292 | getEmitterIndex,
293 | getEmitterConfig,
294 | getNewEmitterID,
295 | saveZip,
296 | initialConfig,
297 | saveProject,
298 | validateForm,
299 | getZoneShapeProps,
300 | exportProject,
301 | };
302 |
--------------------------------------------------------------------------------
/raw/shapes.tps:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | fileFormatVersion
5 | 4
6 | texturePackerVersion
7 | 4.8.3
8 | autoSDSettings
9 |
10 |
11 | scale
12 | 1
13 | extension
14 | spriteFilter
16 | acceptFractionalValues
18 | maxTextureSize
20 |
21 | width
22 | -1
23 | height
24 | -1
25 |
26 |
27 |
28 | allowRotation
29 | shapeDebug
31 | dpi
33 | 72
34 | dataFormat
35 | phaser
36 | textureFileName
37 | flipPVR
39 | pvrCompressionQuality
41 | PVR_QUALITY_NORMAL
42 | atfCompressData
43 | mipMapMinSize
45 | 32768
46 | etc1CompressionQuality
47 | ETC1_QUALITY_LOW_PERCEPTUAL
48 | etc2CompressionQuality
49 | ETC2_QUALITY_LOW_PERCEPTUAL
50 | dxtCompressionMode
51 | DXT_PERCEPTUAL
52 | jxrColorFormat
53 | JXR_YUV444
54 | jxrTrimFlexBits
55 | 0
56 | jxrCompressionLevel
57 | 0
58 | ditherType
59 | PngQuantLow
60 | backgroundColor
61 | 0
62 | libGdx
63 |
64 | filtering
65 |
66 | x
67 | Linear
68 | y
69 | Linear
70 |
71 |
72 | shapePadding
73 | 0
74 | jpgQuality
75 | 80
76 | pngOptimizationLevel
77 | 1
78 | webpQualityLevel
79 | 101
80 | textureSubPath
81 | atfFormats
83 | textureFormat
85 | png8
86 | borderPadding
87 | 0
88 | maxTextureSize
89 |
90 | width
91 | 2048
92 | height
93 | 2048
94 |
95 | fixedTextureSize
96 |
97 | width
98 | -1
99 | height
100 | -1
101 |
102 | algorithmSettings
103 |
104 | algorithm
105 | MaxRects
106 | freeSizeMode
107 | Best
108 | sizeConstraints
109 | AnySize
110 | forceSquared
111 | maxRects
113 |
114 | heuristic
115 | Best
116 |
117 | basic
118 |
119 | sortBy
120 | Best
121 | order
122 | Ascending
123 |
124 | polygon
125 |
126 | alignToGrid
127 | 1
128 |
129 |
130 | dataFileNames
131 |
138 | multiPack
139 | forceIdenticalLayout
141 | outputFormat
143 | RGBA8888
144 | alphaHandling
145 | ClearTransparentPixels
146 | contentProtection
147 |
148 | key
149 |
151 | autoAliasEnabled
152 | trimSpriteNames
154 | prependSmartFolderName
156 | autodetectAnimations
158 | globalSpriteSettings
160 |
161 | scale
162 | 1
163 | scaleMode
164 | Smooth
165 | extrude
166 | 1
167 | trimThreshold
168 | 1
169 | trimMargin
170 | 1
171 | trimMode
172 | Crop
173 | tracerTolerance
174 | 200
175 | heuristicMask
176 | defaultPivotPoint
178 | 0.5,0.5
179 | writePivotPoints
180 |
182 | individualSpriteSettings
183 |
380 | fileList
381 |
382 | .
383 |
384 | ignoreFileList
385 | replaceList
387 | ignoredWarnings
389 | commonDivisorX
391 | 1
392 | commonDivisorY
393 | 1
394 | packNormalMaps
395 | autodetectNormalMaps
397 | normalMapFilter
399 | normalMapSuffix
401 | normalMapSheetFileName
403 | exporterProperties
405 |
406 |
407 |
408 |
--------------------------------------------------------------------------------
38 |
59 | );
60 | }
61 | }
62 |
63 | const colorPicker = (params: any) => {
64 | return this.setState({ showPicker: false })}
47 | />
48 | {
52 | const colorValue = parseInt(hex.substring(1), 16);
53 | changeEmitterConfig(configName, colorValue);
54 | }}
55 | />
56 |
57 | ) : null}
58 |
25 |
118 | );
119 | }
120 | }
121 |
122 | export default withStyles(styles)(EmitterConfig);
123 |
--------------------------------------------------------------------------------
/src/canvas/scenes/canvas.ts:
--------------------------------------------------------------------------------
1 | import {
2 | createEmitter,
3 | changeEmitter,
4 | removeEmitter,
5 | clearZoneGraphic,
6 | drawDebugZoneGraphic,
7 | } from '../utils';
8 | import emitterStore from '../../stores/emitterStore';
9 | import { autorun, toJS, IReactionDisposer } from 'mobx';
10 | import { getEmitterConfig } from '../../utils';
11 |
12 | export default class Canvas extends Phaser.Scene {
13 | public particle: Phaser.GameObjects.Particles.ParticleEmitterManager;
14 |
15 | public deathZoneDebugGraphics: Phaser.GameObjects.Graphics;
16 | public emitZoneDebugGraphics: Phaser.GameObjects.Graphics;
17 |
18 | private autoRedraw: IReactionDisposer;
19 |
20 | constructor() {
21 | super('Canvas');
22 | }
23 |
24 | create() {
25 | const { emitters } = emitterStore;
26 | this.particle = this.add.particles('shape');
27 |
28 | emitters.forEach(emitter => {
29 | createEmitter(this, emitter.config, emitter.name);
30 | });
31 |
32 | let clicked = false;
33 |
34 | this.input.on('pointerdown', () => {
35 | clicked = true;
36 | });
37 |
38 | this.input.on('pointerup', () => {
39 | clicked = false;
40 | });
41 |
42 | this.input.on('pointermove', ({ x, y }: { x: number; y: number }) => {
43 | if (clicked) {
44 | emitterStore.setEmitterPosition(x, y);
45 | }
46 | });
47 | this.events.once('destroy', this.destroy, this);
48 | this.autoRedraw = autorun(this.redraw.bind(this));
49 | }
50 |
51 | syncPhaserEmittersToEmitters(
52 | emitters: any,
53 | currentEmitter: any,
54 | emitterIndex: number,
55 | ) {
56 | if (this.particle.emitters.list.length === toJS(emitters).length) {
57 | emitters.forEach((emitter: any, i: number) => {
58 | this.particle.emitters.list[i].visible = emitter.config.visible;
59 | });
60 | changeEmitter(
61 | this.particle.emitters.list[emitterIndex],
62 | currentEmitter.config,
63 | );
64 | } else if (this.particle.emitters.list.length < emitters.length) {
65 | createEmitter(this, currentEmitter.config, currentEmitter.name);
66 | } else {
67 | const removedEmitter = this.particle.emitters.list.filter(
68 | phaserEmitter => {
69 | for (let i = 0; i < emitters.length; i++) {
70 | if (phaserEmitter.name === emitters[i].name) {
71 | return false;
72 | }
73 | }
74 | return true;
75 | },
76 | );
77 | removeEmitter(this, removedEmitter[0]);
78 | }
79 | }
80 |
81 | drawDebugZones(debugModes: any, emitters: any, emitterIndex: number) {
82 | const configZone: { deathZone?: any; emitZone?: any } = getEmitterConfig(
83 | emitters[emitterIndex].config,
84 | );
85 |
86 | clearZoneGraphic(this.deathZoneDebugGraphics);
87 | clearZoneGraphic(this.emitZoneDebugGraphics);
88 |
89 | if (debugModes.deathZone && configZone.deathZone !== undefined) {
90 | this.deathZoneDebugGraphics = drawDebugZoneGraphic(
91 | configZone.deathZone,
92 | this,
93 | 0x00ff00,
94 | );
95 | }
96 | if (debugModes.emitZone && configZone.emitZone !== undefined) {
97 | this.emitZoneDebugGraphics = drawDebugZoneGraphic(
98 | configZone.emitZone,
99 | this,
100 | 0x00ffff,
101 | 'EmitZone',
102 | configZone,
103 | );
104 | }
105 | }
106 |
107 | redraw() {
108 | const { emitters, currentEmitter, emitterIndex } = emitterStore;
109 | const { debugModes } = currentEmitter;
110 | this.syncPhaserEmittersToEmitters(emitters, currentEmitter, emitterIndex);
111 | this.drawDebugZones(debugModes, emitters, emitterIndex);
112 | }
113 |
114 | destroy() {
115 | this.autoRedraw();
116 | }
117 | }
118 |
--------------------------------------------------------------------------------
/src/components/ImportProjectFile/index.tsx:
--------------------------------------------------------------------------------
1 | import {
2 | Button,
3 | Grid,
4 | WithStyles,
5 | withStyles,
6 | createStyles,
7 | Theme,
8 | TextField,
9 | Typography,
10 | Tooltip,
11 | } from '@material-ui/core';
12 | import React from 'react';
13 | import { inject, observer } from 'mobx-react';
14 | import AttachmentIcon from '@material-ui/icons/Attachment';
15 | import { EDITOR_STORE, EditorStoreProp } from '../../stores';
16 | import { ARCHIVE_EXTENSION } from '../../constants';
17 |
18 | const styles = (theme: Theme) =>
19 | createStyles({
20 | input: {
21 | display: 'none',
22 | },
23 | button: {
24 | margin: theme.spacing.unit,
25 | marginLeft: 0,
26 | },
27 | rightIcon: {
28 | marginLeft: theme.spacing.unit,
29 | },
30 | });
31 |
32 | @inject(EDITOR_STORE)
33 | @observer
34 | class ImportProjectFile extends React.Component<
35 | EditorStoreProp & WithStyles
118 | 
119 |
126 |
123 | x
124 |
125 |