12 |
23 |
24 | );
25 | };
26 |
27 | const mapStateToProps = state => ({
28 | duration: state.present.get('duration')
29 | });
30 |
31 | const mapDispatchToProps = dispatch => ({
32 | actions: bindActionCreators(actionCreators, dispatch)
33 | });
34 |
35 | const DurationContainer = connect(
36 | mapStateToProps,
37 | mapDispatchToProps
38 | )(Duration);
39 | export default DurationContainer;
40 |
--------------------------------------------------------------------------------
/src/store/configureStore.js:
--------------------------------------------------------------------------------
1 | import { createStore } from 'redux';
2 | import undoable, { includeAction } from 'redux-undo';
3 | import reducer from './reducers/reducer';
4 | import {
5 | CHANGE_DIMENSIONS,
6 | APPLY_PENCIL,
7 | APPLY_ERASER,
8 | APPLY_BUCKET,
9 | APPLY_EYEDROPPER,
10 | MOVE_DRAWING,
11 | SHOW_SPINNER,
12 | NEW_PROJECT,
13 | SET_DRAWING,
14 | SET_CELL_SIZE,
15 | SET_RESET_GRID
16 | } from './actions/actionTypes';
17 |
18 | const createIncludedActions = () =>
19 | includeAction([
20 | CHANGE_DIMENSIONS,
21 | APPLY_PENCIL,
22 | APPLY_ERASER,
23 | APPLY_BUCKET,
24 | APPLY_EYEDROPPER,
25 | MOVE_DRAWING,
26 | SET_DRAWING,
27 | SET_CELL_SIZE,
28 | SET_RESET_GRID,
29 | NEW_PROJECT
30 | ]);
31 |
32 | const configureStore = devMode => {
33 | const store = createStore(
34 | undoable(reducer, {
35 | filter: createIncludedActions(),
36 | debug: devMode,
37 | ignoreInitialState: true
38 | })
39 | );
40 |
41 | store.dispatch({
42 | type: SHOW_SPINNER
43 | });
44 |
45 | return store;
46 | };
47 |
48 | export default configureStore;
49 |
--------------------------------------------------------------------------------
/src/components/UndoRedo.jsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { connect } from 'react-redux';
3 | import { bindActionCreators } from 'redux';
4 | import * as actionCreators from '../store/actions/actionCreators';
5 |
6 | const UndoRedo = props => {
7 | const undo = () => {
8 | props.actions.undo();
9 | };
10 |
11 | const redo = () => {
12 | props.actions.redo();
13 | };
14 |
15 | return (
16 |
17 |
25 |
33 |
34 | );
35 | };
36 |
37 | const mapDispatchToProps = dispatch => ({
38 | actions: bindActionCreators(actionCreators, dispatch)
39 | });
40 |
41 | const UndoRedoContainer = connect(
42 | null,
43 | mapDispatchToProps
44 | )(UndoRedo);
45 | export default UndoRedoContainer;
46 |
--------------------------------------------------------------------------------
/src/utils/startup.js:
--------------------------------------------------------------------------------
1 | import * as actionCreators from '../store/actions/actionCreators';
2 | import { initStorage, getDataFromStorage } from './storage';
3 |
4 | /*
5 | Initial actions to dispatch:
6 | 1. Hide spinner
7 | 2. Load a project if there is a current one
8 | */
9 | const initialSetup = (dispatch, storage) => {
10 | dispatch(actionCreators.hideSpinner());
11 |
12 | const dataStored = getDataFromStorage(storage);
13 | if (dataStored) {
14 | // Load current project from the storage
15 | const currentProjectIndex = dataStored.current;
16 | if (currentProjectIndex >= 0) {
17 | const {
18 | frames,
19 | paletteGridData,
20 | columns,
21 | rows,
22 | cellSize
23 | } = dataStored.stored[currentProjectIndex];
24 |
25 | dispatch(
26 | actionCreators.setDrawing(
27 | frames,
28 | paletteGridData,
29 | cellSize,
30 | columns,
31 | rows
32 | )
33 | );
34 | }
35 | } else {
36 | // If no data initialize storage
37 | initStorage(storage);
38 | }
39 | };
40 |
41 | export default initialSetup;
42 |
--------------------------------------------------------------------------------
/src/utils/cssParse.js:
--------------------------------------------------------------------------------
1 | import {
2 | getImageData,
3 | getImageCssClassOutput,
4 | getAnimationKeyframes,
5 | getAnimationCssClassOutput
6 | } from 'box-shadow-pixels';
7 |
8 | const PIXELART_CSS_CLASS_NAME = 'pixelart-to-css';
9 |
10 | export function generatePixelDrawCss(frame, columns, cellSize, type) {
11 | return getImageData(frame.get('grid'), {
12 | format: type,
13 | pSize: cellSize,
14 | c: columns
15 | });
16 | }
17 |
18 | export function getCssImageClassOutput(frame, columns, cellSize) {
19 | return getImageCssClassOutput(frame.get('grid'), {
20 | format: 'string',
21 | pSize: cellSize,
22 | c: columns,
23 | cssClassName: PIXELART_CSS_CLASS_NAME
24 | });
25 | }
26 |
27 | export function exportAnimationData(frames, columns, cellSize, duration) {
28 | return getAnimationCssClassOutput(frames, {
29 | pSize: cellSize,
30 | c: columns,
31 | duration,
32 | cssClassName: PIXELART_CSS_CLASS_NAME
33 | });
34 | }
35 |
36 | export function generateAnimationCSSData(frames, columns, cellSize) {
37 | return getAnimationKeyframes(frames, {
38 | pSize: cellSize,
39 | c: columns
40 | });
41 | }
42 |
--------------------------------------------------------------------------------
/LICENSE.md:
--------------------------------------------------------------------------------
1 | The MIT License (MIT)
2 |
3 | Copyright (c) 2016 Javier Valencia Romero
4 |
5 | Permission is hereby granted, free of charge, to any person obtaining a copy of
6 | this software and associated documentation files (the "Software"), to deal in
7 | the Software without restriction, including without limitation the rights to
8 | use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of
9 | the Software, and to permit persons to whom the Software is furnished to do so,
10 | 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, FITNESS
17 | FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR
18 | COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER
19 | IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
20 | CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
21 |
--------------------------------------------------------------------------------
/src/components/CellSize.jsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { connect } from 'react-redux';
3 | import { bindActionCreators } from 'redux';
4 | import * as actionCreators from '../store/actions/actionCreators';
5 |
6 | const CellSize = props => {
7 | const handleCellSizeChange = event => {
8 | props.actions.setCellSize(+event.target.value || 0);
9 | };
10 |
11 | const { cellSize } = props;
12 |
13 | return (
14 |
15 |
26 |
27 | );
28 | };
29 |
30 | const mapStateToProps = state => ({
31 | cellSize: state.present.get('cellSize')
32 | });
33 |
34 | const mapDispatchToProps = dispatch => ({
35 | actions: bindActionCreators(actionCreators, dispatch)
36 | });
37 |
38 | const CellSizeContainer = connect(
39 | mapStateToProps,
40 | mapDispatchToProps
41 | )(CellSize);
42 | export default CellSizeContainer;
43 |
--------------------------------------------------------------------------------
/src/components/loadFromFile/ImageSizeDisplay.jsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import styled, { css } from 'styled-components';
3 |
4 | const ImageDimensionDisplayContainer = styled.div`
5 | padding: 0.5rem 0;
6 | text-align: center;
7 | font-size: 1.2rem;
8 | `;
9 |
10 | const ImageDimensionDisplay = styled.span`
11 | ${props =>
12 | props.error &&
13 | css`
14 | color: red;
15 | `}
16 | `;
17 |
18 | const WarningSign = styled.span`
19 | margin-right: 0.5rem;
20 | width: 2rem;
21 | height: 2rem;
22 | padding: 3px 14px;
23 | display: inline-block;
24 | background-color: red;
25 | color: white;
26 | `;
27 |
28 | const ImageSizeDisplay = ({ description, width, height }) => (
29 | {getColors()}
;
25 | };
26 |
27 | const mapStateToProps = state => state.present.get('palette').toObject();
28 |
29 | const mapDispatchToProps = dispatch =>
30 | bindActionCreators(
31 | {
32 | selectPaletteColor
33 | },
34 | dispatch
35 | );
36 |
37 | const PaletteGridContainer = connect(
38 | mapStateToProps,
39 | mapDispatchToProps
40 | )(PaletteGrid);
41 | export default PaletteGridContainer;
42 |
--------------------------------------------------------------------------------
/src/css/layout/_header.css:
--------------------------------------------------------------------------------
1 | header {
2 | color: $color-silver;
3 | lost-utility: clearfix;
4 | margin: 1em 0;
5 | a {
6 | text-decoration: none;
7 | color: inherit;
8 | &:visited,
9 | &:hover,
10 | &:active {
11 | color: inherit;
12 | }
13 | }
14 | h1 {
15 | margin: 0;
16 | }
17 |
18 | .header__social {
19 | text-align: right;
20 |
21 | .header__credits {
22 | font-size: 12px;
23 | margin-bottom: 0.2em;
24 |
25 | a {
26 | color: $color-silver;
27 | }
28 |
29 | span {
30 | color: $color-brandyRose;
31 | }
32 |
33 | img {
34 | margin: 0 0 0 0.3em;
35 | transition: transform 0.2s ease-in-out;
36 | }
37 |
38 | h2 {
39 | display: block;
40 | font-size: 0.8em;
41 | padding-right: 1.3em;
42 | position: relative;
43 | margin: 0;
44 | top: 0;
45 | }
46 |
47 | &:hover {
48 | img {
49 | transform: scale(1.2);
50 | }
51 | }
52 | }
53 | }
54 | }
55 |
56 | @media only screen and (max-width: 460px) {
57 | header {
58 | .col-2-3,
59 | .col-1-3 {
60 | lost-column: 1/2;
61 | }
62 | }
63 | h1 {
64 | font-size: 1.5em;
65 | }
66 | }
67 |
--------------------------------------------------------------------------------
/src/css/_utils.css:
--------------------------------------------------------------------------------
1 | /**
2 | * Tooltip
3 | */
4 |
5 | [data-tooltip] {
6 | position: relative;
7 | cursor: pointer;
8 | text-align: center;
9 | }
10 |
11 | [data-tooltip]::before,
12 | [data-tooltip]::after {
13 | position: absolute;
14 | opacity: 0;
15 | transition: opacity 0.2s ease-in-out, visibility 0.2s ease-in-out,
16 | transform 0.2s cubic-bezier(0.71, 1.7, 0.77, 1.24);
17 | transform: translate3d(0, 0, 0);
18 | pointer-events: none;
19 | bottom: 100%;
20 | left: 50%;
21 | }
22 |
23 | [data-tooltip]::before {
24 | z-index: 1001;
25 | border: 6px solid transparent;
26 | background: transparent;
27 | content: '';
28 | margin-left: -6px;
29 | margin-bottom: -12px;
30 | border-top-color: black;
31 | border-top-color: #4caf50;
32 | }
33 |
34 | [data-tooltip]::after {
35 | z-index: 1000;
36 | padding: 8px;
37 | width: 160px;
38 | background-color: black;
39 | background-color: #4caf50;
40 | color: white;
41 | content: attr(data-tooltip);
42 | font-size: 14px;
43 | line-height: 1.2;
44 | font-weight: normal;
45 | margin-left: -80px;
46 | }
47 |
48 | [data-tooltip]:hover::before,
49 | [data-tooltip]:hover::after,
50 | [data-tooltip]:focus::before,
51 | [data-tooltip]:focus::after {
52 | visibility: visible;
53 | opacity: 1;
54 | transform: translateY(-12px);
55 | }
56 |
--------------------------------------------------------------------------------
/src/components/Picker.jsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 |
3 | const Picker = ({ type, value, action, min = 1, max = 0 }) => {
4 | const pickerType = `picker__${type}`;
5 | return (
6 |
7 |
38 |
39 | );
40 | };
41 |
42 | export default Picker;
43 |
--------------------------------------------------------------------------------
/src/components/Output.jsx:
--------------------------------------------------------------------------------
1 | import React, { useRef, useState } from 'react';
2 |
3 | const Output = ({
4 | copyClipboardData = {},
5 | readOnly = true,
6 | outputText,
7 | preFormatted = false
8 | }) => {
9 | const { showButton, textButton, successMessage } = copyClipboardData;
10 | const [copySuccess, setCopySuccess] = useState('');
11 | const textAreaRef = useRef(null);
12 | const copyToClipboard = e => {
13 | textAreaRef.current.select();
14 | document.execCommand('copy');
15 | e.target.focus();
16 | setCopySuccess(successMessage || 'Copied!');
17 | };
18 | return (
19 |
20 | {showButton && document.queryCommandSupported('copy') && (
21 |
39 | );
40 | };
41 | export default Output;
42 |
--------------------------------------------------------------------------------
/src/components/Dimensions.jsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { connect } from 'react-redux';
3 | import { bindActionCreators } from 'redux';
4 | import styled from 'styled-components';
5 | import Picker from './Picker';
6 | import * as actionCreators from '../store/actions/actionCreators';
7 |
8 | const PickerWrapper = styled.div`
9 | margin-bottom: 2rem;
10 | `;
11 |
12 | const Dimensions = props => {
13 | const changeDimensions = (gridProperty, behaviour) => {
14 | props.actions.changeDimensions(gridProperty, behaviour);
15 | };
16 |
17 | const { columns, rows } = props;
18 |
19 | return (
20 |
22 |
29 | {copySuccess}
30 |
31 | )}
32 |
38 |
21 |
22 |
24 |
25 |
27 |
28 | );
29 | };
30 |
31 | const mapStateToProps = state => ({
32 | columns: state.present.getIn(['frames', 'columns']),
33 | rows: state.present.getIn(['frames', 'rows'])
34 | });
35 |
36 | const mapDispatchToProps = dispatch => ({
37 | actions: bindActionCreators(actionCreators, dispatch)
38 | });
39 |
40 | const DimensionsContainer = connect(
41 | mapStateToProps,
42 | mapDispatchToProps
43 | )(Dimensions);
44 | export default DimensionsContainer;
45 |
--------------------------------------------------------------------------------
/src/css/components/_Frame.css:
--------------------------------------------------------------------------------
1 | .frame {
2 | border: 1px solid $color-mineShaft;
3 | background-color: $color-silver;
4 | color: white;
5 | width: 70px;
6 | height: 84px;
7 | margin: 0 0.3em;
8 | flex: 0 0 auto;
9 | position: relative;
10 | overflow: hidden;
11 | opacity: 0.4;
12 |
13 | .delete,
14 | .duplicate {
15 | position: absolute;
16 | color: white;
17 | right: 0;
18 | background-color: $color-mineShaft;
19 | border: 1px solid $color-tundora;
20 | padding: 0.1em;
21 | }
22 |
23 | .delete {
24 | @mixin icon trash;
25 |
26 | font-size: 1.2em;
27 | top: 0;
28 | border-width: 0 0 2px 2px;
29 | }
30 |
31 | .duplicate {
32 | @mixin icon duplicate;
33 |
34 | bottom: 23px;
35 | border-width: 2px 0 0 2px;
36 | }
37 |
38 | .frame__percentage {
39 | position: absolute;
40 | bottom: 0;
41 | left: 0;
42 | height: 23px;
43 | border-top: 2px solid $color-tundora;
44 | }
45 |
46 | &.active {
47 | border: 2px solid $color-tamarillo;
48 | opacity: 1;
49 |
50 | .delete {
51 | cursor: no-drop;
52 | }
53 |
54 | .duplicate {
55 | cursor: copy;
56 | }
57 |
58 | .delete,
59 | .duplicate {
60 | border-color: $color-tamarillo;
61 | }
62 |
63 | .frame__percentage {
64 | border-color: $color-tamarillo;
65 | }
66 | }
67 | }
68 |
--------------------------------------------------------------------------------
/public/index.dev.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
10 |
11 |
12 |
13 |
14 |
42 |
43 |
44 |
45 |
46 |
--------------------------------------------------------------------------------
/test/reducer.test.js:
--------------------------------------------------------------------------------
1 | import { Map } from 'immutable';
2 | import reducer from '../src/store/reducers/reducer';
3 | import * as actions from '../src/store/actions/actionCreators';
4 |
5 | describe('reducer: UPDATE_GRID_BOUNDARIES', () => {
6 | it('should update the grid boundaries', () => {
7 | const newBoundaries = {
8 | x: 100,
9 | y: 200,
10 | width: 400,
11 | height: 350
12 | };
13 | const gridElement = {
14 | getBoundingClientRect: () => newBoundaries
15 | };
16 | const dummyState = reducer(Map(), actions.setInitialState({}));
17 | const nextState = reducer(
18 | dummyState,
19 | actions.updateGridBoundaries(gridElement)
20 | );
21 |
22 | expect(nextState.get('gridBoundaries')).toEqual(newBoundaries);
23 | });
24 |
25 | it('grid boundaries is not updated with properties distinct to x, y, width or height', () => {
26 | const newBoundaries = {
27 | x: 100,
28 | y: 200,
29 | width: 400,
30 | height: 350,
31 | extraProp: 'hello'
32 | };
33 | const gridElement = {
34 | getBoundingClientRect: () => newBoundaries
35 | };
36 | const dummyState = reducer(Map(), actions.setInitialState({}));
37 | const nextState = reducer(
38 | dummyState,
39 | actions.updateGridBoundaries(gridElement)
40 | );
41 |
42 | expect(nextState.get('gridBoundaries').extraProp).toEqual(undefined);
43 | });
44 | });
45 |
--------------------------------------------------------------------------------
/.eslintrc:
--------------------------------------------------------------------------------
1 | {
2 | "extends": ["airbnb", "eslint-config-prettier"],
3 | "env": {
4 | "browser": true,
5 | "node": true,
6 | "jest": true
7 | },
8 | "parser": "babel-eslint",
9 | "parserOptions": {
10 | "ecmaFeatures": {
11 | "forOf": true,
12 | "jsx": true,
13 | "es6": true
14 | }
15 | },
16 | "plugins": ["react-hooks"],
17 | "rules": {
18 | "comma-dangle": 0,
19 | "indent": [2, 2, { "SwitchCase": 1 }],
20 | "react/prop-types": 0,
21 | "func-names": 0,
22 | "arrow-body-style": [2, "as-needed"],
23 | "no-underscore-dangle": ["error", { "allow": ["__INITIAL_STATE__"] }],
24 | "new-cap": ["error", { "capIsNewExceptions": ["Map", "List"] }],
25 | "react/prefer-es6-class": 1,
26 | "no-restricted-syntax": 0,
27 | "no-plusplus": ["error", { "allowForLoopAfterthoughts": true }],
28 | "import/no-extraneous-dependencies": ["error", { "devDependencies": true }],
29 | "quote-props": ["error", "consistent"],
30 | "no-console": 0,
31 | "react/jsx-filename-extension": [1, { "extensions": [".js", ".jsx"] }],
32 | "react/jsx-props-no-spreading": [0, { "custom": "ignore" }],
33 | "jsx-a11y/no-static-element-interactions": 0,
34 | "jsx-a11y/label-has-for": [
35 | 2,
36 | { "required": { "some": ["nesting", "id"] } }
37 | ],
38 | "react-hooks/rules-of-hooks": "error",
39 | "react-hooks/exhaustive-deps": "warn"
40 | },
41 | "globals": {
42 | "$": true
43 | }
44 | }
45 |
--------------------------------------------------------------------------------
/src/css/components/_UsefulData.css:
--------------------------------------------------------------------------------
1 | .useful-data {
2 | text-align: center;
3 | .useful-data__rows {
4 | border: none;
5 | background-color: $color-alto;
6 | padding: 1em 0;
7 | .checkbox {
8 | padding: 0.4em 0;
9 | }
10 | }
11 | .useful-data__export {
12 | font-family: $font-monospace;
13 | overflow-x: hidden;
14 | margin: 1em auto;
15 | background-color: $color-mineShaft;
16 | color: $color-silver;
17 | padding: 0.5em;
18 | text-align: left;
19 | display: block;
20 | width: 100%;
21 | resize: none;
22 | height: 20em;
23 | }
24 | .useful-data__options {
25 | lost-utility: clearfix;
26 | fieldset.useful-data__rows,
27 | .useful-data__output {
28 | lost-column: 1/2 0 0;
29 | }
30 | fieldset.useful-data__rows {
31 | lost-utility: clearfix;
32 | margin: 0;
33 | height: 20em;
34 | .useful-data__pixel-format,
35 | .useful-data__reverse-rows {
36 | lost-column: 1/2 0 0;
37 | }
38 | }
39 | }
40 | }
41 |
42 | @media only screen and (max-width: 730px) {
43 | .useful-data {
44 | .useful-data__options {
45 | fieldset.useful-data__rows,
46 | .useful-data__output {
47 | lost-column: 1/1;
48 | }
49 | fieldset.useful-data__rows {
50 | height: auto;
51 | .useful-data__pixel-format,
52 | .useful-data__reverse-rows {
53 | lost-column: 1/1;
54 | }
55 | }
56 | }
57 | }
58 | }
59 |
--------------------------------------------------------------------------------
/src/components/CopyCSS.jsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import Output from './Output';
3 | import { getCssImageClassOutput, exportAnimationData } from '../utils/cssParse';
4 |
5 | const CopyCSS = ({
6 | frames,
7 | columns,
8 | cellSize,
9 | activeFrameIndex,
10 | animationCode,
11 | duration
12 | }) => {
13 | const generateCSS = () => {
14 | if (animationCode) {
15 | const cssAnimationString = exportAnimationData(
16 | frames,
17 | columns,
18 | cellSize,
19 | duration
20 | );
21 | return cssAnimationString;
22 | }
23 |
24 | return getCssImageClassOutput(
25 | frames.get(activeFrameIndex),
26 | columns,
27 | cellSize
28 | );
29 | };
30 |
31 | return (
32 |
15 |
17 | PIXEL ART TO CSS
16 |
18 |
41 |
19 |
40 |
20 | by JVALEN
28 |
29 |
28 |
30 |
38 |
39 |
33 | {animationCode ? (
34 |
55 | );
56 | };
57 | export default CopyCSS;
58 |
--------------------------------------------------------------------------------
/src/components/SimpleNotification.jsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { connect } from 'react-redux';
3 | import { bindActionCreators } from 'redux';
4 | import { TransitionGroup, CSSTransition } from 'react-transition-group';
5 | import * as actionCreators from '../store/actions/actionCreators';
6 |
7 | const SimpleNotification = ({
8 | duration,
9 | fadeInTime,
10 | fadeOutTime,
11 | notifications,
12 | actions
13 | }) => {
14 | const removeNotifications = () => {
15 | setTimeout(() => {
16 | actions.sendNotification('');
17 | }, duration);
18 | };
19 | const timeout = { enter: fadeInTime, exit: fadeOutTime };
20 | const notificationList = notifications.map(item => (
21 | 35 | Paste the following code anywhere in the CSS code and assign 36 | .pixel-animation 37 | class to a HTML element 38 |
39 | ) : ( 40 |41 | Paste the following code anywhere in the CSS code and assign 42 | .pixelart-to-css 43 | class to a HTML element 44 |
45 | )} 46 | 54 |
27 | {item.message}
28 |
29 |
5 |
57 | );
58 |
59 | export default Cookies;
60 |
--------------------------------------------------------------------------------
/src/components/GridWrapper.jsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import PixelGrid from './PixelGrid';
3 |
4 | export default class GridWrapper extends React.Component {
5 | shouldComponentUpdate(newProps) {
6 | const { cells } = this.props;
7 | return newProps.cells !== cells;
8 | }
9 |
10 | onMouseOver(ev) {
11 | const { activeTool, drawHandlers } = this.props;
12 | if (activeTool === 'MOVE') {
13 | drawHandlers.onMoveMouseOver(ev);
14 | }
15 | }
16 |
17 | onMouseDown(ev) {
18 | const { activeTool, drawHandlers } = this.props;
19 | if (activeTool === 'MOVE') {
20 | drawHandlers.onMoveMouseDown(ev);
21 | }
22 | }
23 |
24 | onTouchStart(ev) {
25 | const { activeTool, drawHandlers } = this.props;
26 | if (activeTool === 'MOVE') {
27 | drawHandlers.onMoveTouchStart(ev);
28 | }
29 | }
30 |
31 | onTouchMove(ev) {
32 | const { activeTool, drawHandlers } = this.props;
33 | if (activeTool === 'MOVE') {
34 | drawHandlers.onMoveTouchMove(ev);
35 | }
36 | }
37 |
38 | render() {
39 | const { props } = this;
40 | return (
41 |
6 |
7 |
8 | Local Storage and Cookies info
9 |10 | {' '} 11 | This website uses both 12 | 17 | {' '} 18 | Local Storage 19 | 20 | and 21 | 26 | {' '} 27 | Cookies. 28 | 29 |
30 |Local Storage
31 |32 | Local storage allows to keep save your work even if you close the browser. 33 |
34 |35 | There is only one local storage key entry, which contains all your saved 36 | projects information: 37 |
38 |-
39 |
- 40 | pixelart-react-v3-0-0 41 | 42 |
Cookies
44 |-
45 |
- 46 | 51 | Google Analytics: 52 | 53 | _ga, _gid, _gat 54 | 55 |
this.onMouseOver(ev)}
43 | onFocus={ev => this.onMouseOver(ev)}
44 | onMouseDown={ev => this.onMouseDown(ev)}
45 | onTouchStart={ev => this.onTouchStart(ev)}
46 | onTouchMove={ev => this.onTouchMove(ev)}
47 | >
48 |
56 | );
57 | }
58 | }
59 |
--------------------------------------------------------------------------------
/src/css/input/_button.css:
--------------------------------------------------------------------------------
1 | @define-mixin generate-button $color-text, $color-bg, $color-boxshadow,
2 | $color-bg-active {
3 | background: none;
4 | border: none;
5 | outline: none;
6 | border-radius: 2px;
7 | padding: 10px;
8 | font-size: 1em;
9 | text-decoration: none;
10 | transition-duration: 0.1s;
11 | color: $color-text;
12 | background-color: $color-bg;
13 | box-shadow: 0 5px 0 0 $color-boxshadow;
14 |
15 | &:hover,
16 | &.selected {
17 | background-color: $color-bg-active;
18 | }
19 |
20 | &:hover {
21 | cursor: pointer;
22 | }
23 |
24 | &:active {
25 | transform: translate(0, 5px);
26 | box-shadow: 0 1px 0 $color-bg-active;
27 | background-color: $color-bg-active;
28 | }
29 | }
30 |
31 | @define-mixin button $color, $font: $font-pixel {
32 | @if $color == red {
33 | @mixin generate-button $color-silver, $color-tamarillo, $color-darkTan,
34 | $color-moccaccino;
35 | }
36 |
37 | @if $color == gray {
38 | @mixin generate-button $color-silver, $color-mineShaft, $color-doveGray,
39 | $color-tundora;
40 | }
41 |
42 | @if $color == brown {
43 | @mixin generate-button $color-silver, $color-lotus, $color-buccaneer,
44 | $color-cowboy;
45 | }
46 |
47 | @if $color == blue {
48 | @mixin generate-button $color-silver, $color-steelblue, $color-sanMarino,
49 | $color-eastBay;
50 | }
51 |
52 | @if $color == darkblue {
53 | @mixin generate-button $color-silver, $color-chathamsBlue, $color-chambray,
54 | $color-cloudBurst;
55 | }
56 |
57 | @if $color == white {
58 | @mixin generate-button black, $color-alto, $color-silveChalice, $color-nobel;
59 | }
60 |
61 | font-family: $font;
62 | }
63 |
--------------------------------------------------------------------------------
/src/components/SaveDrawing.jsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { connect } from 'react-redux';
3 | import { bindActionCreators } from 'redux';
4 | import shortid from 'shortid';
5 | import * as actionCreators from '../store/actions/actionCreators';
6 | import { saveProjectToStorage } from '../utils/storage';
7 |
8 | const SaveDrawing = props => {
9 | const save = () => {
10 | const drawingToSave = {
11 | frames: props.frames,
12 | paletteGridData: props.paletteGridData,
13 | cellSize: props.cellSize,
14 | columns: props.columns,
15 | rows: props.rows,
16 | animate: props.frames.size > 1,
17 | id: shortid.generate()
18 | };
19 |
20 | if (saveProjectToStorage(localStorage, drawingToSave)) {
21 | props.actions.sendNotification('Drawing saved');
22 | }
23 | };
24 |
25 | return (
26 |
27 |
35 |
36 | );
37 | };
38 |
39 | const mapStateToProps = state => {
40 | const frames = state.present.get('frames');
41 | return {
42 | frames: frames.get('list'),
43 | columns: frames.get('columns'),
44 | rows: frames.get('rows'),
45 | cellSize: state.present.get('cellSize'),
46 | paletteGridData: state.present.getIn(['palette', 'grid'])
47 | };
48 | };
49 |
50 | const mapDispatchToProps = dispatch => ({
51 | actions: bindActionCreators(actionCreators, dispatch)
52 | });
53 |
54 | const SaveDrawingContainer = connect(
55 | mapStateToProps,
56 | mapDispatchToProps
57 | )(SaveDrawing);
58 | export default SaveDrawingContainer;
59 |
--------------------------------------------------------------------------------
/src/css/imports.css:
--------------------------------------------------------------------------------
1 | @charset 'UTF-8';
2 |
3 | @import '_normalize.css';
4 | @import 'fonts/_fonts.css';
5 | @import '_variables.css';
6 | @import '_utils.css';
7 | @import '_base.css';
8 | @import 'layout/_grid.css';
9 | @import 'layout/_header.css';
10 | @import 'layout/_queries.css';
11 | @import 'layout/_flex.css';
12 | @import 'input/_inputText.css';
13 | @import 'input/_button.css';
14 | @import 'views/_cookies.css';
15 | @import 'views/_notFound.css';
16 | @import 'components/_PixelGrid.css';
17 | @import 'components/_SimpleNotification.css';
18 | @import 'components/_SimpleSpinner.css';
19 | @import 'components/_LoadDrawing.css';
20 | @import 'components/_SaveDrawing.css';
21 | @import 'components/_NewProject.css';
22 | @import 'components/_UndoRedo.css';
23 | @import 'components/_App.css';
24 | @import 'components/_Reset.css';
25 | @import 'components/_RadioSelector.css';
26 | @import 'components/_PaletteGrid.css';
27 | @import 'components/_PaletteColor.css';
28 | @import 'components/_Modal.css';
29 | @import 'components/_FramesHandler.css';
30 | @import 'components/_Frame.css';
31 | @import 'components/_EyeDropper.css';
32 | @import 'components/_Eraser.css';
33 | @import 'components/_Bucket.css';
34 | @import 'components/_UsefulData.css';
35 | @import 'components/_Output.css';
36 | @import 'components/_Checkbox.css';
37 | @import 'components/_Move.css';
38 | @import 'components/_DownloadDrawing.css';
39 | @import 'components/_Dimensions.css';
40 | @import 'components/_Picker.css';
41 | @import 'components/_CellSize.css';
42 | @import 'components/_CssDisplay.css';
43 | @import 'components/_CopyCss.css';
44 | @import 'components/_ColorPicker.css';
45 | @import 'components/_Duration.css';
46 | @import 'components/_CellInfo.css';
47 | @import 'components/_PreviewBox.css';
48 |
--------------------------------------------------------------------------------
/src/css/components/_LoadDrawing.css:
--------------------------------------------------------------------------------
1 | .load-drawing {
2 | text-align: center;
3 | h2 {
4 | padding: 2em 0 0;
5 | margin-bottom: 0;
6 | font-size: 1.2em;
7 | text-align: center;
8 |
9 | display: flex;
10 | flex-direction: column;
11 | overflow: auto;
12 | min-width: auto;
13 | }
14 |
15 | .load-drawing__container {
16 | overflow: auto;
17 | display: flex;
18 | flex-direction: row;
19 | flex-wrap: wrap;
20 | text-align: center;
21 |
22 | &.empty {
23 | overflow-y: hidden;
24 | display: block;
25 | }
26 |
27 | .load-drawing__drawing {
28 | position: relative;
29 | border: 3px solid black;
30 | cursor: pointer;
31 | flex: 0 1 auto;
32 | margin: 0.5em;
33 | padding-right: 2em;
34 |
35 | .drawing__delete {
36 | @mixin icon trash;
37 |
38 | position: absolute;
39 | font-size: 1.7em;
40 | color: white;
41 | top: 0;
42 | right: 0;
43 | cursor: no-drop;
44 | padding: 0.1em;
45 | background-color: $color-mineShaft;
46 | border: 2px solid black;
47 | border-width: 0 0 2px 2px;
48 | }
49 |
50 | .preview {
51 | margin: 0 auto;
52 | }
53 | }
54 | }
55 |
56 | .load-drawing__export {
57 | overflow-x: scroll;
58 | width: 100%;
59 | margin: 0 auto;
60 | background-color: $color-mineShaft;
61 | color: $color-silver;
62 | padding: 0.5em;
63 | text-align: left;
64 | }
65 |
66 | .load-drawing__import {
67 | font-family: $font-monospace;
68 | display: block;
69 | width: 90%;
70 | resize: none;
71 | height: 6em;
72 | margin: 0 auto;
73 | padding: 0.5em;
74 | background-color: $color-mineShaft;
75 | color: $color-silver;
76 | }
77 |
78 | .import__button {
79 | @mixin button red;
80 |
81 | margin: 1.5em auto;
82 | display: table;
83 | }
84 | }
85 |
--------------------------------------------------------------------------------
/src/components/Preview.jsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import {
3 | generatePixelDrawCss,
4 | generateAnimationCSSData
5 | } from '../utils/cssParse';
6 | import Animation from './Animation';
7 |
8 | const Preview = props => {
9 | const generatePreview = () => {
10 | const { activeFrameIndex, duration, storedData, animationName } = props;
11 | const { frames, columns, cellSize, animate } = storedData || props;
12 | const animation = frames.size > 1 && animate;
13 | let animationData;
14 | let cssString;
15 |
16 | const styles = {
17 | previewWrapper: {
18 | height: cellSize,
19 | width: cellSize,
20 | position: 'absolute',
21 | top: '-5px',
22 | left: '-5px'
23 | }
24 | };
25 |
26 | if (animation) {
27 | animationData = generateAnimationCSSData(frames, columns, cellSize);
28 | } else {
29 | cssString = generatePixelDrawCss(
30 | frames.get(activeFrameIndex),
31 | columns,
32 | cellSize,
33 | 'string'
34 | );
35 |
36 | styles.previewWrapper.boxShadow = cssString;
37 | styles.previewWrapper.MozBoxShadow = cssString;
38 | styles.previewWrapper.WebkitBoxShadow = cssString;
39 | }
40 |
41 | return (
42 |
43 | {animation ? (
44 |
51 | );
52 | };
53 |
54 | const { storedData } = props;
55 | const { columns, rows, cellSize } = storedData || props;
56 | const style = {
57 | width: columns * cellSize,
58 | height: rows * cellSize,
59 | position: 'relative'
60 | };
61 |
62 | return (
63 |
64 | {generatePreview()}
65 |
66 | );
67 | };
68 | export default Preview;
69 |
--------------------------------------------------------------------------------
/test/utils/color.test.js:
--------------------------------------------------------------------------------
1 | import formatPixelColorOutput from '../../src/utils/color';
2 |
3 | describe('formatPixelColorOutput', () => {
4 | describe('When the params are empty or not valid', () => {
5 | it('should return the rgba format of black color', () => {
6 | const blackRgba = 'rgba(0,0,0,1)';
7 | expect(formatPixelColorOutput(null, null)).toEqual(blackRgba);
8 | expect(formatPixelColorOutput(undefined, undefined)).toEqual(blackRgba);
9 | expect(formatPixelColorOutput(20, null)).toEqual(blackRgba);
10 | });
11 | });
12 | describe('When the chosen formatId is 0', () => {
13 | it('should return color formatted as: #000000', () => {
14 | expect(formatPixelColorOutput('rgba(255,255,255,1)', 0)).toEqual(
15 | '#ffffff'
16 | );
17 | expect(formatPixelColorOutput('#ffffff', 0)).toEqual('#ffffff');
18 | expect(formatPixelColorOutput('', 0)).toEqual('#000000');
19 | });
20 | });
21 | describe('When the chosen formatId is 1', () => {
22 | it('should return color formatted as: 0x000000', () => {
23 | expect(formatPixelColorOutput('rgba(255,255,255,1)', 1)).toEqual(
24 | '0xffffff'
25 | );
26 | expect(formatPixelColorOutput('#ffffff', 1)).toEqual('0xffffff');
27 | expect(formatPixelColorOutput('', 1)).toEqual('0x000000');
28 | });
29 | });
30 | describe('When the chosen formatId is 2', () => {
31 | it('should return color formatted as: rgba(0,0,0,1)', () => {
32 | expect(formatPixelColorOutput('rgba(255,255,255,1)', 2)).toEqual(
33 | 'rgba(255,255,255,1)'
34 | );
35 | expect(formatPixelColorOutput('#ffffff', 2)).toEqual(
36 | 'rgba(255,255,255,1)'
37 | );
38 | expect(formatPixelColorOutput('', 2)).toEqual('rgba(0,0,0,1)');
39 | });
40 | });
41 | describe('When the input color is rgba', () => {
42 | it('should keep the opacity if the format is rgba', () => {
43 | expect(formatPixelColorOutput('rgba(255,255,255,0.6)', 2)).toEqual(
44 | 'rgba(255,255,255,0.6)'
45 | );
46 | });
47 | });
48 | });
49 |
--------------------------------------------------------------------------------
/src/utils/loadFromCanvas.js:
--------------------------------------------------------------------------------
1 | import { fromJS } from 'immutable';
2 | import shortid from 'shortid';
3 | import getTimeInterval from './intervals';
4 |
5 | export const getDimensionIntervals = (dimension, numberOfFrames) => {
6 | const dimensionPerFrame = Math.floor(dimension / numberOfFrames);
7 | const intervals = [];
8 | let start = 0;
9 | let end = dimensionPerFrame;
10 | for (let i = 0; i < numberOfFrames; i++) {
11 | intervals.push({
12 | start,
13 | end,
14 | timePercentage: getTimeInterval(i, numberOfFrames)
15 | });
16 | start += dimensionPerFrame;
17 | end += dimensionPerFrame;
18 | }
19 | return intervals;
20 | };
21 |
22 | const generateFrames = (imageContext, numberOfFrames, pixSize = 1) => {
23 | const { width, height } = imageContext.canvas;
24 | const heightIntervals = getDimensionIntervals(height, numberOfFrames);
25 | const frameCollection = [];
26 |
27 | heightIntervals.forEach(heightInterval => {
28 | const pixelWidth = pixSize;
29 | const pixelHeight = pixSize;
30 |
31 | const grid = [];
32 | for (
33 | let y = heightInterval.start;
34 | y + pixelHeight <= heightInterval.end;
35 | y += pixelWidth
36 | ) {
37 | for (let x = 0; x + pixelWidth <= width; x += pixelWidth) {
38 | const currentPixel = imageContext.getImageData(
39 | x,
40 | y,
41 | pixelWidth,
42 | pixelHeight
43 | ).data;
44 | grid.push(
45 | `rgba(${currentPixel[0]},${currentPixel[1]},${currentPixel[2]},${currentPixel[3]})`
46 | );
47 | }
48 | }
49 |
50 | frameCollection.push({
51 | grid,
52 | interval: heightInterval.timePercentage,
53 | key: shortid.generate()
54 | });
55 | });
56 |
57 | console.log(frameCollection);
58 |
59 | return fromJS(frameCollection);
60 | };
61 |
62 | export const getCanvasDimensions = canvasRef => {
63 | if (canvasRef && canvasRef.current) {
64 | const canvas = canvasRef.current;
65 | const context = canvas.getContext('2d');
66 | return { w: context.canvas.width, h: context.canvas.height };
67 | }
68 | return { w: 0, h: 0 };
69 | };
70 |
71 | export default generateFrames;
72 |
--------------------------------------------------------------------------------
/src/utils/outputParse.js:
--------------------------------------------------------------------------------
1 | import formatPixelColorOutput from './color';
2 |
3 | /*
4 | * arrayChunks
5 | * @param {array} An array
6 | * @param {number} The number of elements we want in our chunk
7 | * @return {array} An array of arrays chunks
8 | */
9 | const arrayChunks = (array, chunkSize) =>
10 | Array(Math.ceil(array.length / chunkSize))
11 | .fill()
12 | .map((_, index) => index * chunkSize)
13 | .map(begin => array.slice(begin, begin + chunkSize));
14 |
15 | /*
16 | * formatFrameOutput
17 | * @param {array} The frame, an array of color values
18 | * @param {number} The columns count
19 | * @param {object} It contains different options to format the output
20 | * @return {string} The formatted output of the passed frame
21 | */
22 | const formatFrameOutput = (frame, columns, options) => {
23 | const isEven = number => number % 2 === 0;
24 | const flattened = arr => [].concat(...arr);
25 | let frameRows = arrayChunks(frame, columns);
26 | frameRows = frameRows.map((row, index) => {
27 | if (
28 | (isEven(index + 1) && options.reverseEven) ||
29 | (!isEven(index + 1) && options.reverseOdd)
30 | ) {
31 | return row.reverse();
32 | }
33 | return row;
34 | });
35 | const frameFormatted = flattened(frameRows);
36 |
37 | const lastPixelPos = frameFormatted.length;
38 | return frameFormatted.reduce((acc, pixel, index) => {
39 | const pixelFormatted = formatPixelColorOutput(pixel, options.colorFormat);
40 | return `${acc} ${pixelFormatted}${index + 1 === lastPixelPos ? '' : ','}${
41 | (index + 1) % columns ? '' : '\n'
42 | }`;
43 | }, '');
44 | };
45 |
46 | /*
47 | * generateFramesOutput
48 | * @param {object} It contains all frames data, the columns count and different options to format the output
49 | * @return {string} The formatted output of all the frames
50 | */
51 | const generateFramesOutput = ({ frames, columns, options }) =>
52 | frames
53 | .toJS()
54 | .reduce(
55 | (acc, frame, index) =>
56 | `${acc}${index ? '\n' : ''}frame${index} = {\n${formatFrameOutput(
57 | frame.grid,
58 | columns,
59 | options
60 | )}};`,
61 | ''
62 | );
63 |
64 | export default generateFramesOutput;
65 |
--------------------------------------------------------------------------------
/webpack.config.js:
--------------------------------------------------------------------------------
1 | const webpack = require('webpack');
2 | const CopyWebpackPlugin = require('copy-webpack-plugin');
3 | const HtmlWebpackPlugin = require('html-webpack-plugin');
4 | const MiniCssExtractPlugin = require('mini-css-extract-plugin');
5 | const Dotenv = require('dotenv-webpack');
6 | const path = require('path');
7 |
8 | module.exports = {
9 | mode: "development",
10 | devtool: 'cheap-module-source-map',
11 | entry: [
12 | './src/utils/polyfills.js',
13 | './src/index.jsx',
14 | ],
15 | output: {
16 | filename: 'bundle.js',
17 | path: path.join(__dirname, '/public'),
18 | },
19 | module: {
20 | rules: [
21 | {
22 | test: /\.jsx?$/,
23 | exclude: /node_modules/,
24 | use: [
25 | 'babel-loader'
26 | ]
27 | },
28 | {
29 | test: /\.css$/i,
30 | use: [
31 | MiniCssExtractPlugin.loader,
32 | 'css-loader',
33 | 'postcss-loader',
34 | ],
35 | },
36 | {
37 | test: /\.(ttf|eot|svg|woff(2)?)(\?v=[\d.]+)?(\?[a-z0-9#-]+)?$/,
38 | loader: 'url-loader',
39 | options: {
40 | limit: 100000,
41 | name: './css/[hash].[ext]',
42 | },
43 | }
44 | ]
45 | },
46 | resolve: {
47 | extensions: ['.js', '.jsx'],
48 | fallback: {
49 | stream: require.resolve("stream-browserify"),
50 | util: require.resolve("util"),
51 | buffer: require.resolve("buffer/"),
52 | assert: require.resolve("assert/"),
53 | },
54 | },
55 | plugins: [
56 | new Dotenv(),
57 | new CopyWebpackPlugin({
58 | patterns: [
59 | { from: 'src/assets/favicon.ico', to: 'favicon.ico' },
60 | { from: 'src/assets/coindrop-img.png', to: 'coindrop-img.png' }
61 | ],
62 | }),
63 | new MiniCssExtractPlugin({
64 | filename: 'css/main.css',
65 | }),
66 | new HtmlWebpackPlugin({
67 | template: './public/index.dev.html',
68 | inject: true,
69 | }),
70 | new webpack.DefinePlugin({
71 | 'process.env.NODE_ENV': '"development"'
72 | }),
73 | new webpack.ProvidePlugin({
74 | process: 'process/browser',
75 | Buffer: ['buffer', 'Buffer'],
76 | }),
77 | ],
78 | devServer: {
79 | static: './public',
80 | historyApiFallback: true,
81 | },
82 | target: "web",
83 | stats: false
84 | };
85 |
--------------------------------------------------------------------------------
/public/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
34 |
35 |
62 |
63 |
64 |
65 |
66 |
--------------------------------------------------------------------------------
/webpack.production.config.js:
--------------------------------------------------------------------------------
1 | const webpack = require('webpack');
2 | const CopyWebpackPlugin = require('copy-webpack-plugin');
3 | const HtmlWebpackPlugin = require('html-webpack-plugin');
4 | const MiniCssExtractPlugin = require('mini-css-extract-plugin');
5 | const Dotenv = require('dotenv-webpack');
6 | const path = require('path');
7 |
8 | const config = {
9 | mode: "production",
10 | entry: [
11 | './src/utils/polyfills.js',
12 | './src/index.jsx',
13 | ],
14 | output: {
15 | filename: 'bundle.js',
16 | path: path.join(__dirname, '/deploy'),
17 | },
18 | module: {
19 | rules: [
20 | {
21 | test: /\.jsx?$/,
22 | exclude: /node_modules/,
23 | loader: 'babel-loader'
24 | },
25 | {
26 | test: /\.css$/i,
27 | use: [
28 | MiniCssExtractPlugin.loader,
29 | 'css-loader',
30 | 'postcss-loader',
31 | ],
32 | },
33 | {
34 | test: /\.(ttf|eot|svg|woff(2)?)(\?v=[\d.]+)?(\?[a-z0-9#-]+)?$/,
35 | loader: 'url-loader',
36 | options: {
37 | limit: 100000,
38 | name: './css/[hash].[ext]',
39 | },
40 | }
41 | ]
42 | },
43 | resolve: {
44 | extensions: ['.js', '.jsx'],
45 | fallback: {
46 | stream: require.resolve("stream-browserify"),
47 | util: require.resolve("util"),
48 | buffer: require.resolve("buffer/"),
49 | assert: require.resolve("assert/"),
50 | },
51 | },
52 | plugins: [
53 | new Dotenv(),
54 | new CopyWebpackPlugin({
55 | patterns: [
56 | { from: 'src/assets/favicon.ico', to: 'favicon.ico' },
57 | { from: 'src/assets/apple-touch-icon.png', to: 'apple-touch-icon.png' },
58 | { from: 'src/assets/regular-icon.png', to: 'regular-icon.png' },
59 | { from: 'src/assets/coindrop-img.png', to: 'coindrop-img.png' },
60 | { from: './public/_redirects', to: './' }
61 | ],
62 | }),
63 | new MiniCssExtractPlugin({
64 | filename: 'css/main.css',
65 | }),
66 | new HtmlWebpackPlugin({
67 | template: './public/index.html',
68 | inject: true,
69 | }),
70 | new webpack.DefinePlugin({
71 | 'process.env.NODE_ENV': '"production"'
72 | }),
73 | new webpack.ProvidePlugin({
74 | process: 'process/browser',
75 | Buffer: ['buffer', 'Buffer'],
76 | }),
77 | ],
78 | target: "web",
79 | stats: false,
80 | };
81 |
82 | module.exports = config;
83 |
--------------------------------------------------------------------------------
/src/components/KeyBindings.jsx:
--------------------------------------------------------------------------------
1 | import React, { useEffect } from 'react';
2 | import { useDispatch } from 'react-redux';
3 | import tinykeys from 'tinykeys';
4 | import {
5 | undo,
6 | redo,
7 | switchTool,
8 | changeDimensions
9 | } from '../store/actions/actionCreators';
10 | import {
11 | MOVE,
12 | ERASER,
13 | BUCKET,
14 | EYEDROPPER,
15 | COLOR_PICKER
16 | } from '../store/reducers/drawingToolStates';
17 |
18 | const KeyBindings = ({ onClick }) => {
19 | const dispatch = useDispatch();
20 | useEffect(() => {
21 | const keyCombinations = {
22 | '$mod+KeyZ': event => {
23 | event.preventDefault();
24 | dispatch(undo());
25 | },
26 | '$mod+KeyY': event => {
27 | event.preventDefault();
28 | dispatch(redo());
29 | },
30 | // prettier-ignore
31 | 'KeyM': event => {
32 | event.preventDefault();
33 | dispatch(switchTool(MOVE));
34 | },
35 | // prettier-ignore
36 | 'KeyE': event => {
37 | event.preventDefault();
38 | dispatch(switchTool(ERASER));
39 | },
40 | // prettier-ignore
41 | 'KeyB': event => {
42 | event.preventDefault();
43 | dispatch(switchTool(BUCKET));
44 | },
45 | // prettier-ignore
46 | 'KeyO': event => {
47 | event.preventDefault();
48 | dispatch(switchTool(EYEDROPPER));
49 | },
50 | // prettier-ignore
51 | 'KeyP': event => {
52 | event.preventDefault();
53 | dispatch(switchTool(COLOR_PICKER));
54 | },
55 | '$mod+ArrowRight': event => {
56 | event.preventDefault();
57 | dispatch(changeDimensions('columns', 1));
58 | },
59 | '$mod+ArrowLeft': event => {
60 | event.preventDefault();
61 | dispatch(changeDimensions('columns', -1));
62 | },
63 | '$mod+ArrowDown': event => {
64 | event.preventDefault();
65 | dispatch(changeDimensions('rows', 1));
66 | },
67 | '$mod+ArrowUp': event => {
68 | event.preventDefault();
69 | dispatch(changeDimensions('rows', -1));
70 | }
71 | };
72 | const unsubscribe = tinykeys(window, keyCombinations);
73 | return () => {
74 | unsubscribe();
75 | };
76 | });
77 | return (
78 |
84 | );
85 | };
86 |
87 | export default KeyBindings;
88 |
--------------------------------------------------------------------------------
/src/components/PreviewBox.jsx:
--------------------------------------------------------------------------------
1 | import React, { useState } from 'react';
2 | import { useSelector } from 'react-redux';
3 | import Preview from './Preview';
4 |
5 | const PreviewBox = props => {
6 | const [animate, setAnimate] = useState(false);
7 | const [isNormalSize, setNormalSize] = useState(true);
8 | const frames = useSelector(state => state.present.get('frames'));
9 | const duration = useSelector(state => state.present.get('duration'));
10 | const frameList = frames.get('list');
11 | const activeFrameIndex = frames.get('activeIndex');
12 | const columns = frames.get('columns');
13 | const rows = frames.get('rows');
14 | const { helpOn, callback } = props;
15 | const animMessage = `${animate ? 'Pause' : 'Play'} the animation`;
16 | const zoomMessage = `Zoom ${isNormalSize ? '0.5' : '1.5'}`;
17 | const animTooltip = helpOn ? animMessage : null;
18 | const zoomTooltip = helpOn ? zoomMessage : null;
19 | const smPixelSize = 3;
20 | const bgPixelSize = 6;
21 |
22 | return (
23 |
36 |
38 | PIXEL ART TO CSS
37 |
39 |
61 |
40 |
60 |
41 | by JVALEN
49 |
50 |
49 |
51 |
58 |
59 |
24 |
65 | );
66 | };
67 |
68 | export default PreviewBox;
69 |
--------------------------------------------------------------------------------
/src/components/ColorPicker.jsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { useSelector, useDispatch } from 'react-redux';
3 | import Picker from 'react-color';
4 | import { switchTool, setCustomColor } from '../store/actions/actionCreators';
5 | import { COLOR_PICKER, PENCIL } from '../store/reducers/drawingToolStates';
6 |
7 | const ColorPickerContainer = React.memo(() => {
8 | const colorPickerOn = useSelector(
9 | state => state.present.get('drawingTool') === COLOR_PICKER
10 | );
11 | const paletteColor = useSelector(state => {
12 | const palette = state.present.get('palette');
13 | const currentColorPosition = palette.get('position');
14 | return palette.getIn(['grid', currentColorPosition, 'color']);
15 | });
16 |
17 | const dispatch = useDispatch();
18 | const switchColorPickerAction = switchTool(COLOR_PICKER);
19 | const setPencilToolAction = switchTool(PENCIL);
20 | const initialPickerColor = paletteColor || 'rgba(255, 255, 255, 1)';
21 |
22 | const handleClick = () => {
23 | dispatch(switchColorPickerAction);
24 | };
25 |
26 | const handleClose = () => {
27 | dispatch(setPencilToolAction);
28 | };
29 |
30 | const onPickerChange = color => dispatch(setCustomColor(color.rgb));
31 |
32 | // Necessary inline styles for react-color component
33 | const styles = {
34 | picker: {
35 | position: 'relative',
36 | bottom: '9em'
37 | },
38 | popover: {
39 | position: 'absolute',
40 | zIndex: '2',
41 | right: -250,
42 | top: 155
43 | },
44 | cover: {
45 | position: 'fixed',
46 | top: 0,
47 | right: 0,
48 | bottom: 0,
49 | left: 0
50 | }
51 | };
52 |
53 | return (
54 |
25 |
52 |
26 |
33 |
34 |
43 |
44 |
50 |
51 |
53 |
64 |
55 |
61 |
80 | );
81 | });
82 |
83 | export default ColorPickerContainer;
84 |
--------------------------------------------------------------------------------
/src/css/layout/_queries.css:
--------------------------------------------------------------------------------
1 | @media only screen and (max-width: 1250px) {
2 | .app__left-side,
3 | .app__right-side {
4 | width: 100% !important;
5 | }
6 | }
7 |
8 | @media only screen and (max-width: 780px) {
9 | .dimensions {
10 | label {
11 | font-size: 1.5em !important;
12 | top: -0.2em;
13 | }
14 | }
15 | }
16 |
17 | @media only screen and (min-width: 730px) {
18 | /*
19 | Fix small vertical scrollbar glitch for some resolutions
20 | inside frames-handler
21 | Detected in Chrome
22 | */
23 | .app__frames-container::-webkit-scrollbar,
24 | .app__frames-container div::-webkit-scrollbar {
25 | width: 1em !important;
26 | }
27 | }
28 |
29 | @media only screen and (max-width: 730px) {
30 | .app__copycss-button {
31 | margin-top: 1.4em !important;
32 | }
33 |
34 | .app__central-container {
35 | .col-1-4 {
36 | &.left {
37 | lost-column: none;
38 |
39 | .app__copycss-button {
40 | padding: 4px !important;
41 | }
42 |
43 | .palette-grid {
44 | margin: 0;
45 | }
46 | }
47 |
48 | &.right {
49 | lost-column: none;
50 | }
51 | }
52 |
53 | .col-2-4 {
54 | &.center {
55 | lost-column: none;
56 |
57 | .grid-container {
58 | margin: 1em auto !important;
59 | }
60 | }
61 | }
62 | }
63 |
64 | .app__mobile--container {
65 | lost-utility: clearfix;
66 |
67 | .app__mobile--group {
68 | lost-column: 1/2;
69 | }
70 |
71 | max-width: none;
72 | }
73 |
74 | .app__preview-button {
75 | margin-top: 1em !important;
76 | }
77 |
78 | body {
79 | width: 100% !important;
80 | }
81 |
82 | /* Avoid button hover effect in mobile devices */
83 | .undo-redo,
84 | .app__load-save-container,
85 | .new-project,
86 | .frames-handler,
87 | .app__right-side {
88 | button:hover,
89 | button.selected {
90 | background-color: $color-mineShaft !important;
91 | }
92 | }
93 |
94 | button.app__copycss-button {
95 | &:hover,
96 | &.selected {
97 | background-color: $color-alto !important;
98 | }
99 | }
100 |
101 | .app__toggle-help-button {
102 | &:hover,
103 | &.selected {
104 | background-color: $color-chathamsBlue !important;
105 | }
106 | }
107 |
108 | .load-drawing__import {
109 | height: 10em !important;
110 | }
111 | }
112 |
113 | @media only screen and (max-width: 360px) {
114 | button,
115 | .dimensions {
116 | font-size: 0.8em !important;
117 | }
118 | }
119 |
--------------------------------------------------------------------------------
/src/css/fonts/_fonts.css:
--------------------------------------------------------------------------------
1 | @font-face {
2 | font-family: 'minecraftiaregular';
3 | src: url('fonts/files/minecraftia-regular-webfont.eot');
4 | src: url('fonts/files/minecraftia-regular-webfont.eot?#iefix')
5 | format('embedded-opentype'),
6 | url('fonts/files/minecraftia-regular-webfont.woff2') format('woff2'),
7 | url('fonts/files/minecraftia-regular-webfont.woff') format('woff'),
8 | url('fonts/files/minecraftia-regular-webfont.ttf') format('truetype'),
9 | url('fonts/files/minecraftia-regular-webfont.svg#minecraftiaregular')
10 | format('svg');
11 | font-weight: normal;
12 | font-style: normal;
13 | }
14 |
15 | @font-face {
16 | font-family: 'WebFontIcons';
17 | src: url('fonts/files/webfont-icons.eot?v=4.5.0');
18 | src: url('fonts/files/webfont-icons.eot?#iefix&v=4.5.0')
19 | format('embedded-opentype'),
20 | url('fonts/files/webfont-icons.woff?v=4.5.0') format('woff'),
21 | url('fonts/files/webfont-icons.ttf?v=4.5.0') format('truetype'),
22 | url('fonts/files/webfont-icons.svg?v=4.5.0#webfonticons') format('svg');
23 | font-weight: normal;
24 | font-style: normal;
25 | }
26 |
27 | @define-mixin icon $type {
28 | display: inline-block;
29 | font: normal normal normal 14px/1 WebFontIcons;
30 | font-size: inherit;
31 | text-rendering: auto;
32 | -webkit-font-smoothing: antialiased;
33 | -moz-osx-font-smoothing: grayscale;
34 |
35 | &::before {
36 | @extend $type;
37 | }
38 | }
39 |
40 | @define-extend twitter {
41 | content: '\61';
42 | }
43 | @define-extend keybindings {
44 | content: '\62';
45 | }
46 | @define-extend play {
47 | content: '\63';
48 | }
49 | @define-extend duplicate {
50 | content: '\64';
51 | }
52 | @define-extend eraser {
53 | content: '\65';
54 | }
55 | @define-extend pause {
56 | content: '\66';
57 | }
58 | @define-extend screen-full {
59 | content: '\67';
60 | }
61 | @define-extend paint-brush {
62 | content: '\68';
63 | }
64 | @define-extend move {
65 | content: '\69';
66 | }
67 | @define-extend screen-normal {
68 | content: '\6a';
69 | }
70 | @define-extend frames {
71 | content: '\6b';
72 | }
73 | @define-extend columns {
74 | content: '\6c';
75 | }
76 | @define-extend rows {
77 | content: '\6d';
78 | }
79 | @define-extend bucket {
80 | content: '\6e';
81 | }
82 | @define-extend eyedropper {
83 | content: '\6f';
84 | }
85 | @define-extend undo {
86 | content: '\70';
87 | }
88 | @define-extend redo {
89 | content: '\71';
90 | }
91 | @define-extend download {
92 | content: '\72';
93 | }
94 | @define-extend help {
95 | content: '\73';
96 | }
97 | @define-extend trash {
98 | content: '\74';
99 | }
100 |
101 | .icon-help {
102 | @mixin icon help;
103 | }
104 |
--------------------------------------------------------------------------------
/src/css/components/_App.css:
--------------------------------------------------------------------------------
1 | #app {
2 | .app__main-container,
3 | .app__central-container {
4 | lost-utility: clearfix;
5 | }
6 |
7 | .app__main,
8 | .app__central-container {
9 | margin-bottom: 2em;
10 | }
11 |
12 | .app__frames-container {
13 | margin-bottom: 1em;
14 | }
15 |
16 | .app__frames-container[data-tooltip]::after {
17 | width: 80%;
18 | margin-left: -40%;
19 | }
20 |
21 | .app__load-save-container {
22 | margin-bottom: 2em;
23 |
24 | .app__load-button {
25 | @mixin button gray;
26 | }
27 |
28 | lost-utility: clearfix;
29 |
30 | > div,
31 | > button {
32 | lost-column: 1/2 0 0.5em;
33 | }
34 | }
35 |
36 | .app__social-container {
37 | .app__download-button {
38 | @mixin button brown;
39 | @mixin icon download;
40 |
41 | width: 100%;
42 | margin-top: 1em;
43 | }
44 | }
45 |
46 | .app__help-container {
47 | lost-utility: clearfix;
48 | margin: 1em 0;
49 |
50 | > div {
51 | lost-column: 1/2 0 0.5em;
52 | }
53 |
54 | .app__toggle-help-button {
55 | @mixin button darkblue;
56 | @mixin icon help;
57 |
58 | &.selected {
59 | box-shadow: 0 0 0 2px $color-silver;
60 | }
61 |
62 | width: 100%;
63 | }
64 |
65 | .app__shortcuts-button {
66 | @mixin button darkblue;
67 | @mixin icon keybindings;
68 |
69 | width: 100%;
70 | }
71 | }
72 |
73 | .app__copycss-button {
74 | @mixin button white;
75 |
76 | width: 100%;
77 | margin-top: 1em;
78 | font-weight: bold !important;
79 | color: $color-mineShaft;
80 | }
81 |
82 | .app__preview-button {
83 | @mixin button gray;
84 |
85 | width: 100%;
86 | margin: 0 0 0.6em;
87 | display: table;
88 | }
89 |
90 | .app__tools-wrapper {
91 | text-align: center;
92 | margin: 1em 0 0.6em;
93 |
94 | > div {
95 | button {
96 | font-size: 1.8em;
97 | text-align: center;
98 | color: $color-mineShaft;
99 | padding: 0.4em 0;
100 | width: 100%;
101 | border: none;
102 | background-color: transparent;
103 |
104 | &:focus {
105 | outline: 0;
106 | }
107 |
108 | &.selected {
109 | color: $color-silver;
110 | background-color: $color-mineShaft;
111 |
112 | & > div {
113 | background-color: $color-mineShaft;
114 | }
115 | }
116 | }
117 | }
118 | }
119 |
120 | .app__left-side,
121 | .app__right-side {
122 | width: 60%;
123 | }
124 |
125 | .app__right-side {
126 | margin-left: auto;
127 | margin-right: 0;
128 | }
129 | }
130 |
--------------------------------------------------------------------------------
/src/components/Frame.jsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { List } from 'immutable';
3 | import { Draggable } from 'react-beautiful-dnd';
4 | import Preview from './Preview';
5 |
6 | export default class Frame extends React.Component {
7 | handleClick() {
8 | const { actions, dataId } = this.props;
9 | actions.changeActiveFrame(dataId);
10 | }
11 |
12 | deleteFrame(e) {
13 | const { active, actions, dataId } = this.props;
14 | e.stopPropagation();
15 | if (active) {
16 | actions.deleteFrame(dataId);
17 | }
18 | }
19 |
20 | duplicateFrame(e) {
21 | const { active, actions, dataId } = this.props;
22 | e.stopPropagation();
23 | if (active) {
24 | actions.duplicateFrame(dataId);
25 | }
26 | }
27 |
28 | changeInterval(e) {
29 | const { active, actions, dataId } = this.props;
30 | e.stopPropagation();
31 | if (active) {
32 | actions.changeFrameInterval(dataId, this.percentage.value);
33 | }
34 | }
35 |
36 | render() {
37 | const { active, dataId, frame, lastFrame, columns, rows } = this.props;
38 | return (
39 |
62 | {colorPickerOn ? (
63 |
79 |
64 |
70 |
77 | ) : null}
78 | {
44 | this.handleClick();
45 | }}
46 | onKeyPress={() => {
47 | this.handleClick();
48 | }}
49 | role="button"
50 | tabIndex={0}
51 | {...provided.draggableProps}
52 | {...provided.dragHandleProps}
53 | ref={provided.innerRef}
54 | >
55 |
91 | )}
92 |
69 | {label}
70 |
71 | {combination(keyList)}
72 |
46 |
101 | );
102 | };
103 | export default UsefulData;
104 |
--------------------------------------------------------------------------------
/src/components/PixelCanvas.jsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { connect } from 'react-redux';
3 | import {
4 | cellAction,
5 | updateGridBoundaries,
6 | moveDrawing,
7 | changeHoveredCell
8 | } from '../store/actions/actionCreators';
9 | import GridWrapper from './GridWrapper';
10 | import throttle from '../utils/throttle';
11 | import { ERASER, EYEDROPPER, MOVE } from '../store/reducers/drawingToolStates';
12 |
13 | const gridContainerClass = 'grid-container';
14 |
15 | class PixelCanvas extends React.Component {
16 | constructor(props) {
17 | super(props);
18 | this.drawHandlers = props.drawHandlersFactory(this);
19 | this.hoveredCell = props.hoveredCell;
20 | }
21 |
22 | componentDidMount() {
23 | const { updateGridBoundariesThrottle } = this.props;
24 | updateGridBoundariesThrottle();
25 | window.addEventListener('resize', updateGridBoundariesThrottle);
26 | window.addEventListener('scroll', updateGridBoundariesThrottle);
27 | }
28 |
29 | componentWillUnmount() {
30 | const { updateGridBoundariesThrottle } = this.props;
31 | window.removeEventListener('resize', updateGridBoundariesThrottle);
32 | window.removeEventListener('scroll', updateGridBoundariesThrottle);
33 | }
34 |
35 | render() {
36 | const { props } = this;
37 | const cells = props.grid.map((color, i) => ({
38 | id: i,
39 | width: 100 / props.columns,
40 | color
41 | }));
42 | let gridExtraClass = 'cell';
43 | if (props.eraserOn) {
44 | gridExtraClass = 'context-menu';
45 | } else if (props.eyedropperOn) {
46 | gridExtraClass = 'copy';
47 | } else if (props.moveOn) {
48 | gridExtraClass = 'all-scroll';
49 | }
50 |
51 | return (
52 | Get additional data from your project
47 |48 | Here you will find every pixel color values grouped by frame. You can 49 | modify the output with the following options: 50 |
51 |
52 |
84 |
100 |
85 |
98 |
99 |
72 |
81 |
109 | );
110 | }
111 | }
112 |
113 | const mapStateToProps = state => state.present.get('frames').toObject();
114 |
115 | const mapDispatchToProps = dispatch => ({
116 | actions: bindActionCreators(actionCreators, dispatch)
117 | });
118 |
119 | const FramesHandlerContainer = connect(
120 | mapStateToProps,
121 | mapDispatchToProps
122 | )(FramesHandler);
123 | export default FramesHandlerContainer;
124 |
--------------------------------------------------------------------------------
/src/utils/color.js:
--------------------------------------------------------------------------------
1 | /*
2 | * getRgbaValues
3 | * @param {string} The pixel color in the following format: rgba(0,0,0,1)
4 | * @return {object} An object with r, g, b, a properties with its int correspondent value
5 | */
6 | const getRgbaValues = color => {
7 | const match = color.match(
8 | /rgba?\((\d{1,3}), ?(\d{1,3}), ?(\d{1,3})\)?(?:, ?(\d(?:\.\d*)?)\))?/
9 | );
10 | return match ? { r: match[1], g: match[2], b: match[3], a: match[4] } : {};
11 | };
12 |
13 | /*
14 | * getRgbHexValues
15 | * @param {string} The pixel color in the following format: #000000
16 | * @return {object} An object with r, g, b properties with its hex correspondent value
17 | */
18 | const getRgbHexValues = color => {
19 | const match = color.match(/.{1,2}/g);
20 | return match ? { r: match[0], g: match[1], b: match[2] } : {};
21 | };
22 |
23 | /*
24 | * isRgba
25 | * @param {string}
26 | * @return {boolean} True if the string contains 'rgba'
27 | */
28 | const isRgba = color => color.includes('rgba');
29 |
30 | /*
31 | * padHexValue
32 | * @param {number}
33 | * @return {string} Add a 0 before the number if this only had a digit
34 | */
35 | const padHexValue = value => (value.length === 1 ? `0${value}` : value);
36 |
37 | /*
38 | * normalizeHexValue
39 | * @param {number} Integer number
40 | * @return {string} Return the hex value with 2 digits
41 | */
42 | const normalizeHexValue = value =>
43 | padHexValue(parseInt(value, 10).toString(16));
44 |
45 | /*
46 | * parseRgbaToHex
47 | * @param {string} The color value in rgba: rgba(0,0,0,1)
48 | * @return {string} Returns the hex value with 6 digits, dropping the opacity
49 | */
50 | const parseRgbaToHex = colorCode => {
51 | const rgbaValues = getRgbaValues(colorCode);
52 | return `${normalizeHexValue(rgbaValues.r)}${normalizeHexValue(
53 | rgbaValues.g
54 | )}${normalizeHexValue(rgbaValues.b)}`;
55 | };
56 |
57 | /*
58 | * parseHexToRgba
59 | * @param {string} The color value in hex: 000000
60 | * @param {number} The color's opacity: int value from 0 to 1
61 | * @return {string} Returns the rbga value like rgba(0,0,0,1) always with the opacity set to 1
62 | */
63 | const parseHexToRgba = (colorCode, opacity) => {
64 | const hexValues = getRgbHexValues(colorCode);
65 | return `rgba(${parseInt(hexValues.r, 16)},${parseInt(
66 | hexValues.g,
67 | 16
68 | )},${parseInt(hexValues.b, 16)},${opacity})`;
69 | };
70 |
71 | /*
72 | * normalizeColor
73 | * @param {string} The color value, it could be in the following formats: '', rgba(0,0,0,1) or #000000
74 | * @return {string} Returns just the hex value with 6 digits
75 | */
76 | const normalizeColor = colorCode => {
77 | const defaultValue = '000000';
78 | const normalized = {
79 | color:
80 | typeof colorCode === 'string' && colorCode ? colorCode : defaultValue,
81 | opacity: 1
82 | };
83 | if (isRgba(normalized.color)) {
84 | const rgbaValues = getRgbaValues(normalized.color);
85 | normalized.color = parseRgbaToHex(normalized.color);
86 | normalized.opacity = rgbaValues.a;
87 | }
88 | if (normalized.color !== defaultValue) {
89 | normalized.color = normalized.color.replace('#', '');
90 | }
91 | return normalized;
92 | };
93 |
94 | /*
95 | * formatPixelColorOutput
96 | * @param {string} The pixel color
97 | * @param {number} formatId There are 3 format types
98 | * 0: #000000
99 | * 1: 0x000000
100 | * 2: rgba(0,0,0,1)
101 | * @return {string} The pixel color formatted
102 | */
103 | const formatPixelColorOutput = (color, formatId) => {
104 | const colorFormatted = normalizeColor(color);
105 |
106 | switch (formatId) {
107 | case 0:
108 | case 1:
109 | return `${formatId === 0 ? '#' : '0x'}${colorFormatted.color}`;
110 | default:
111 | return parseHexToRgba(colorFormatted.color, colorFormatted.opacity);
112 | }
113 | };
114 |
115 | export default formatPixelColorOutput;
116 |
--------------------------------------------------------------------------------
/src/store/actions/actionCreators.js:
--------------------------------------------------------------------------------
1 | import { ActionCreators } from 'redux-undo';
2 | import * as types from './actionTypes';
3 |
4 | export function setInitialState(options) {
5 | return {
6 | type: types.SET_INITIAL_STATE,
7 | options
8 | };
9 | }
10 |
11 | export function changeDimensions(gridProperty, increment) {
12 | return {
13 | type: types.CHANGE_DIMENSIONS,
14 | gridProperty,
15 | increment
16 | };
17 | }
18 |
19 | export function updateGridBoundaries(gridElement) {
20 | return {
21 | type: types.UPDATE_GRID_BOUNDARIES,
22 | gridElement
23 | };
24 | }
25 |
26 | export function selectPaletteColor(position) {
27 | return {
28 | type: types.SELECT_PALETTE_COLOR,
29 | position
30 | };
31 | }
32 |
33 | export function setCustomColor(customColor) {
34 | return {
35 | type: types.SET_CUSTOM_COLOR,
36 | customColor
37 | };
38 | }
39 |
40 | export function cellAction({
41 | id,
42 | drawingTool,
43 | color,
44 | paletteColor,
45 | columns,
46 | rows
47 | }) {
48 | return {
49 | type: `APPLY_${drawingTool}`,
50 | id,
51 | color,
52 | paletteColor,
53 | columns,
54 | rows
55 | };
56 | }
57 |
58 | export function moveDrawing({ xDiff, yDiff, cellWidth }) {
59 | return {
60 | type: 'MOVE_DRAWING',
61 | moveDiff: { xDiff, yDiff, cellWidth }
62 | };
63 | }
64 |
65 | export function setDrawing(
66 | frames,
67 | paletteGridData,
68 | cellSize,
69 | columns,
70 | rows,
71 | hoveredIndex
72 | ) {
73 | return {
74 | type: types.SET_DRAWING,
75 | frames,
76 | paletteGridData,
77 | cellSize,
78 | columns,
79 | rows,
80 | hoveredIndex
81 | };
82 | }
83 |
84 | export function endDrag() {
85 | return {
86 | type: types.END_DRAG
87 | };
88 | }
89 |
90 | export function switchTool(tool) {
91 | return {
92 | type: types.SWITCH_TOOL,
93 | tool
94 | };
95 | }
96 |
97 | export function setCellSize(cellSize) {
98 | return {
99 | type: types.SET_CELL_SIZE,
100 | cellSize
101 | };
102 | }
103 |
104 | export function resetGrid() {
105 | return {
106 | type: types.SET_RESET_GRID
107 | };
108 | }
109 |
110 | export function showSpinner() {
111 | return {
112 | type: types.SHOW_SPINNER
113 | };
114 | }
115 |
116 | export function hideSpinner() {
117 | return {
118 | type: types.HIDE_SPINNER
119 | };
120 | }
121 |
122 | export function sendNotification(message) {
123 | return {
124 | type: types.SEND_NOTIFICATION,
125 | message
126 | };
127 | }
128 |
129 | export function changeActiveFrame(frameIndex) {
130 | return {
131 | type: types.CHANGE_ACTIVE_FRAME,
132 | frameIndex
133 | };
134 | }
135 |
136 | export function reorderFrame(selectedIndex, destinationIndex) {
137 | return {
138 | type: types.REORDER_FRAME,
139 | selectedIndex,
140 | destinationIndex
141 | };
142 | }
143 |
144 | export function createNewFrame() {
145 | return {
146 | type: types.CREATE_NEW_FRAME
147 | };
148 | }
149 |
150 | export function deleteFrame(frameId) {
151 | return {
152 | type: types.DELETE_FRAME,
153 | frameId
154 | };
155 | }
156 |
157 | export function duplicateFrame(frameId) {
158 | return {
159 | type: types.DUPLICATE_FRAME,
160 | frameId
161 | };
162 | }
163 |
164 | export function setDuration(duration) {
165 | return {
166 | type: types.SET_DURATION,
167 | duration
168 | };
169 | }
170 |
171 | export function changeFrameInterval(frameIndex, interval) {
172 | return {
173 | type: types.CHANGE_FRAME_INTERVAL,
174 | frameIndex,
175 | interval
176 | };
177 | }
178 |
179 | export function newProject() {
180 | return {
181 | type: types.NEW_PROJECT
182 | };
183 | }
184 |
185 | export function changeHoveredCell(cell) {
186 | return {
187 | type: types.CHANGE_HOVERED_CELL,
188 | cell
189 | };
190 | }
191 |
192 | export function undo() {
193 | return ActionCreators.undo();
194 | }
195 |
196 | export function redo() {
197 | return ActionCreators.redo();
198 | }
199 |
--------------------------------------------------------------------------------
/src/utils/canvasGIF.js:
--------------------------------------------------------------------------------
1 | import GIFEncoder from 'gif-encoder';
2 | import blobStream from 'blob-stream';
3 | import { saveAs } from 'file-saver';
4 | import randomString from './random';
5 |
6 | function fillCanvasWithFrame(canvas, frameInfo) {
7 | const { frame, cols, cellSize, frameHeight, frameIdx } = frameInfo;
8 | const ctx = canvas;
9 | frame.get('grid').forEach((fillStyle, pixelIdx) => {
10 | if (!fillStyle) {
11 | return;
12 | }
13 | ctx.fillStyle = fillStyle;
14 |
15 | const col = pixelIdx % cols;
16 | const row = Math.floor(pixelIdx / cols);
17 | ctx.fillRect(
18 | col * cellSize,
19 | row * cellSize + frameHeight * frameIdx,
20 | cellSize,
21 | cellSize
22 | );
23 | });
24 | return ctx;
25 | }
26 |
27 | function renderImageToCanvas(type, canvasInfo, currentFrameInfo, frames) {
28 | const { canvas, canvasHeight, canvasWidth } = canvasInfo;
29 | const { frame, frameHeight, frameWidth, cellSize } = currentFrameInfo;
30 | const cols = Math.floor(frameWidth / cellSize);
31 | let ctx = canvas.getContext('2d');
32 | ctx.canvas.width = canvasWidth;
33 | ctx.canvas.height = canvasHeight;
34 | switch (type) {
35 | case 'spritesheet':
36 | frames.forEach((currentFrame, frameIdx) => {
37 | ctx = fillCanvasWithFrame(ctx, {
38 | frame: currentFrame,
39 | cols,
40 | cellSize,
41 | frameHeight,
42 | frameIdx
43 | });
44 | });
45 | break;
46 | default:
47 | ctx = fillCanvasWithFrame(ctx, {
48 | frame,
49 | cols,
50 | cellSize,
51 | frameHeight,
52 | frameIdx: 0
53 | });
54 | break;
55 | }
56 | return ctx.getImageData(0, 0, canvasWidth, canvasHeight).data;
57 | }
58 |
59 | const saveCanvasToDisk = (blob, fileExtension) => {
60 | saveAs(blob, `${randomString()}.${fileExtension}`);
61 | };
62 |
63 | function renderFrames(settings) {
64 | const {
65 | type,
66 | frames,
67 | duration,
68 | activeFrame,
69 | rows,
70 | columns,
71 | cellSize
72 | } = settings;
73 |
74 | const durationInMillisecond = duration * 1000;
75 | const frameWidth = columns * cellSize;
76 | const frameHeight = rows * cellSize;
77 | const canvasWidth = frameWidth;
78 | const canvasHeight =
79 | type === 'spritesheet' ? frameHeight * frames.size : frameHeight;
80 |
81 | const canvas = document.createElement('canvas');
82 | const gif = new GIFEncoder(canvasWidth, canvasHeight);
83 | gif.pipe(blobStream()).on('finish', function() {
84 | saveCanvasToDisk(this.toBlob(), 'gif');
85 | });
86 |
87 | gif.setRepeat(0); // loop indefinitely
88 | gif.setDispose(3); // restore to previous
89 | gif.writeHeader();
90 |
91 | switch (type) {
92 | case 'single':
93 | case 'spritesheet':
94 | renderImageToCanvas(
95 | type,
96 | {
97 | canvas,
98 | canvasHeight,
99 | canvasWidth
100 | },
101 | {
102 | frame: activeFrame,
103 | frameHeight,
104 | frameWidth,
105 | cellSize
106 | },
107 | frames
108 | );
109 | canvas.toBlob(function(blob) {
110 | saveCanvasToDisk(blob, 'png');
111 | });
112 | break;
113 | default: {
114 | let previousInterval = 0;
115 | frames.forEach((frame, idx, framesArray) => {
116 | const isLastFrame = idx === framesArray.length - 1;
117 | const currentInterval = isLastFrame
118 | ? 100
119 | : frames.get(idx).get('interval');
120 | const diff = currentInterval - previousInterval;
121 | const delay = diff * 0.01 * durationInMillisecond;
122 |
123 | gif.setDelay(delay);
124 | previousInterval = currentInterval;
125 |
126 | gif.addFrame(
127 | renderImageToCanvas(
128 | type,
129 | {
130 | canvas,
131 | canvasHeight,
132 | canvasWidth
133 | },
134 | {
135 | frame,
136 | frameHeight,
137 | frameWidth,
138 | cellSize
139 | }
140 | )
141 | );
142 | });
143 | gif.finish();
144 | }
145 | }
146 | }
147 |
148 | export default renderFrames;
149 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "pixel-art-react",
3 | "version": "3.10.0",
4 | "description": "Draw and animate Pixel Art, then export the results to CSS or download them, powered by React",
5 | "author": "Javier Valencia Romero",
6 | "scripts": {
7 | "lint": "eslint **/*.{js,jsx}",
8 | "csslint": "stylelint src/**/*.{css,js,jsx}",
9 | "prettier": "prettier **/*.{js,jsx,json,yml,yaml,css,md}",
10 | "format": "npm run prettier -- --write --list-different",
11 | "test": "jest",
12 | "test:watch": "npm run test -- --watch",
13 | "validate": "npm run lint && npm run csslint && npm run prettier -- --list-different && npm run test",
14 | "development": "webpack-dev-server --hot",
15 | "deploy": "NODE_ENV=production webpack --mode production --config webpack.production.config.js",
16 | "postinstall": "NODE_ENV=production webpack --mode production --config webpack.production.config.js"
17 | },
18 | "main": "index.js",
19 | "repository": {
20 | "type": "git",
21 | "url": "https://github.com/jvalen/pixel-art-react"
22 | },
23 | "keywords": [
24 | "pixel",
25 | "art",
26 | "drawing",
27 | "react",
28 | "redux",
29 | "express"
30 | ],
31 | "license": "MIT",
32 | "jest": {
33 | "setupFiles": [
34 | "jest-canvas-mock"
35 | ]
36 | },
37 | "dependencies": {
38 | "assert": "^2.1.0",
39 | "autoprefixer": "^9.7.2",
40 | "blob-stream": "^0.1.3",
41 | "body-scroll-lock": "^3.0.2",
42 | "box-shadow-pixels": "0.0.4",
43 | "buffer": "^6.0.3",
44 | "canvas-toBlob": "^1.0.0",
45 | "css-loader": "^3.2.0",
46 | "dotenv-webpack": "^8.0.1",
47 | "file-loader": "^6.2.0",
48 | "file-saver": "^2.0.2",
49 | "gif-encoder": "^0.7.2",
50 | "gm": "^1.23.1",
51 | "immutable": "^3.8.2",
52 | "lost": "^8.3.1",
53 | "oauth": "^0.9.15",
54 | "postcss-import": "^12.0.1",
55 | "postcss-loader": "^3.0.0",
56 | "postcss-reporter": "^6.0.1",
57 | "precss": "^2.0.0",
58 | "prop-types": "^15.7.2",
59 | "pug": "^2.0.4",
60 | "react": "^16.8.6",
61 | "react-addons-pure-render-mixin": "^15.6.2",
62 | "react-addons-shallow-compare": "^15.6.2",
63 | "react-beautiful-dnd": "^12.1.1",
64 | "react-color": "^2.18.1",
65 | "react-cookie-consent": "^5.2.0",
66 | "react-custom-scrollbars": "^4.2.1",
67 | "react-dom": "^16.8.6",
68 | "react-ga": "^3.3.1",
69 | "react-modal": "^3.9.1",
70 | "react-redux": "^7.1.0",
71 | "react-router-dom": "^6.16.0",
72 | "react-transform-hmr": "^1.0.4",
73 | "react-transition-group": "^2.3.1",
74 | "redux": "^4.0.4",
75 | "redux-undo": "^1.0.0-beta9",
76 | "shortid": "^2.2.14",
77 | "stream-browserify": "^3.0.0",
78 | "style-loader": "^0.23.1",
79 | "styled-components": "^5.2.0",
80 | "styled-theming": "^2.2.0",
81 | "temp": "^0.9.0",
82 | "tinykeys": "^1.1.0",
83 | "twitter": "^1.7.1",
84 | "url-loader": "^4.1.1",
85 | "util": "^0.12.5",
86 | "whatwg-fetch": "^2.0.4"
87 | },
88 | "engines": {
89 | "node": "16.x.x",
90 | "npm": "8.x.x"
91 | },
92 | "devDependencies": {
93 | "@babel/core": "^7.5.4",
94 | "@babel/preset-env": "^7.5.4",
95 | "@babel/preset-react": "^7.0.0",
96 | "@babel/runtime-corejs2": "^7.5.4",
97 | "babel-core": "^7.0.0-bridge.0",
98 | "babel-eslint": "^10.0.2",
99 | "babel-jest": "^24.8.0",
100 | "babel-loader": "^8.0.6",
101 | "babel-plugin-react-transform": "^3.0.0",
102 | "copy-webpack-plugin": "^11.0.0",
103 | "eslint": "^6.0.1",
104 | "eslint-config-airbnb": "^18.0.1",
105 | "eslint-config-prettier": "^6.7.0",
106 | "eslint-plugin-import": "^2.18.2",
107 | "eslint-plugin-jsx-a11y": "^6.2.3",
108 | "eslint-plugin-react": "^7.16.0",
109 | "eslint-plugin-react-hooks": "^2.3.0",
110 | "html-webpack-plugin": "^5.5.3",
111 | "husky": "^3.0.0",
112 | "jest": "^24.8.0",
113 | "jest-canvas-mock": "^2.3.1",
114 | "lint-staged": "^9.2.0",
115 | "mini-css-extract-plugin": "^2.7.6",
116 | "prettier": "^1.18.2",
117 | "stylelint": "^10.1.0",
118 | "stylelint-config-lost": "0.0.3",
119 | "stylelint-config-recommended": "^2.2.0",
120 | "webpack": "^5.88.2",
121 | "webpack-cli": "^5.1.4",
122 | "webpack-dev-middleware": "^6.1.1",
123 | "webpack-dev-server": "^4.15.1",
124 | "webpack-hot-middleware": "^2.25.4"
125 | }
126 | }
127 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 |
82 | {
85 | this.scrollbars = c;
86 | }}
87 | universal
88 | onUpdate={() => {
89 | this.onScrollbarUpdate();
90 | }}
91 | >
92 |
93 |
94 | {provided => (
95 |
105 |
106 |
107 |
108 |
100 | {this.getFrames()}
101 | {provided.placeholder}
102 |
103 | )}
104 |
2 |
5 | ⚠️ Temporary Limited Interaction Notice ⚠️
3 | (Please check Contributing) 4 |6 |
7 |
8 | 
9 |
Pixel Art to CSS
11 |12 |
13 | Animate pixel art and get CSS 14 |
15 | 16 |
17 | 
18 | 
19 |
32 | 
33 |
105 |
109 |
110 | ~~#### Help me to improve it :seedling:~~
111 |
112 | ~~Create a GitHub issue if there is something wrong or to be improved.~~
113 |
114 | ~~Pull requests are also welcome, please take the following requirements as a checklist before opening one:~~
115 |
116 | ~~- [x] The PR does fix a problem or adds a new feature, not just cosmetic or syntactic sugar changes.~~
117 | ~~- [x] It would be great to open an issue in advance.~~
118 | ~~- [x] The PR should be issued to the **develop** branch.~~
119 | ~~- [x] The PR should have a explanation or be related to an issue.~~
120 |
121 | ~~Thank you!~~
122 |
123 | ## License
124 |
125 | [MIT](https://opensource.org/licenses/mit-license.php)
126 | Copyright © 2016 Javier Valencia Romero (@jvalen)
127 |
--------------------------------------------------------------------------------
/src/store/reducers/paletteReducer.js:
--------------------------------------------------------------------------------
1 | import { List, Map, fromJS } from 'immutable';
2 | import shortid from 'shortid';
3 | import * as types from '../actions/actionTypes';
4 | import { GRID_INITIAL_COLOR } from './activeFrameReducer';
5 |
6 | const getPositionFirstMatchInPalette = (grid, color) =>
7 | grid.findIndex(gridColor => gridColor.get('color') === color);
8 |
9 | const isColorInPalette = (grid, color) =>
10 | getPositionFirstMatchInPalette(grid, color) !== -1;
11 |
12 | const parseColorToString = colorData =>
13 | typeof colorData === 'string'
14 | ? colorData
15 | : `rgba(${colorData.r},${colorData.g},${colorData.b},${colorData.a})`;
16 |
17 | const disableColor = (palette, action) => {
18 | if (action.tool === 'ERASER' || action.tool === 'MOVE') {
19 | return palette.set('position', -1);
20 | }
21 | return palette;
22 | };
23 |
24 | const addColorToLastGridCell = (palette, newColor) => {
25 | const grid = palette.get('grid');
26 | const lastPosition = grid.size - 1;
27 | return palette.merge({
28 | grid: grid.setIn([lastPosition, 'color'], parseColorToString(newColor)),
29 | position: lastPosition
30 | });
31 | };
32 |
33 | const createPaletteGrid = () =>
34 | List([
35 | 'rgba(0, 0, 0, 1)',
36 | 'rgba(255, 0, 0, 1)',
37 | 'rgba(233, 30, 99, 1)',
38 | 'rgba(156, 39, 176, 1)',
39 | 'rgba(103, 58, 183, 1)',
40 | 'rgba(63, 81, 181, 1)',
41 | 'rgba(33, 150, 243, 1)',
42 | 'rgba(3, 169, 244, 1)',
43 | 'rgba(0, 188, 212, 1)',
44 | 'rgba(0, 150, 136, 1)',
45 | 'rgba(76, 175, 80, 1)',
46 | 'rgba(139, 195, 74, 1)',
47 | 'rgba(205, 220, 57, 1)',
48 | 'rgba(158, 224, 122, 1)',
49 | 'rgba(255, 235, 59, 1)',
50 | 'rgba(255, 193, 7, 1)',
51 | 'rgba(255, 152, 0, 1)',
52 | 'rgba(255, 205, 210, 1)',
53 | 'rgba(255, 87, 34, 1)',
54 | 'rgba(121, 85, 72, 1)',
55 | 'rgba(158, 158, 158, 1)',
56 | 'rgba(96, 125, 139, 1)',
57 | 'rgba(48, 63, 70, 1)',
58 | 'rgba(255, 255, 255, 1)',
59 | 'rgba(56, 53, 53, 1)',
60 | 'rgba(56, 53, 53, 1)',
61 | 'rgba(56, 53, 53, 1)',
62 | 'rgba(56, 53, 53, 1)',
63 | 'rgba(56, 53, 53, 1)',
64 | 'rgba(56, 53, 53, 1)'
65 | ]).map(color => Map({ color, id: shortid.generate() }));
66 |
67 | const isColorSelected = palette => palette.get('position') !== -1;
68 |
69 | const resetSelectedColorState = palette => palette.set('position', 0);
70 |
71 | const createPalette = () =>
72 | Map({
73 | grid: createPaletteGrid(),
74 | position: 0
75 | });
76 |
77 | const getCellColor = ({ color }) => color || GRID_INITIAL_COLOR;
78 |
79 | const eyedropColor = (palette, action) => {
80 | const cellColor = getCellColor(action);
81 | const grid = palette.get('grid');
82 |
83 | if (!isColorInPalette(grid, cellColor)) {
84 | return addColorToLastGridCell(palette, cellColor);
85 | }
86 | return palette.set(
87 | 'position',
88 | getPositionFirstMatchInPalette(grid, cellColor)
89 | );
90 | };
91 |
92 | const preparePalette = palette => {
93 | if (!isColorSelected(palette)) {
94 | return resetSelectedColorState(palette);
95 | }
96 | return palette;
97 | };
98 |
99 | const selectPaletteColor = (palette, action) =>
100 | palette.set('position', action.position);
101 |
102 | const setCustomColor = (palette, { customColor }) => {
103 | if (!isColorSelected(palette)) {
104 | return addColorToLastGridCell(palette, customColor);
105 | }
106 | const customColorRgba = parseColorToString(customColor);
107 | return palette.setIn(
108 | ['grid', palette.get('position'), 'color'],
109 | customColorRgba
110 | );
111 | };
112 |
113 | const setPalette = (palette, action) => {
114 | const defaultPalette = action.paletteGridData.length === 0;
115 | return palette.set(
116 | 'grid',
117 | fromJS(defaultPalette ? createPaletteGrid() : action.paletteGridData)
118 | );
119 | };
120 |
121 | export default function paletteReducer(palette = createPalette(), action) {
122 | switch (action.type) {
123 | case types.SET_INITIAL_STATE:
124 | case types.NEW_PROJECT:
125 | return createPalette();
126 | case types.APPLY_EYEDROPPER:
127 | return eyedropColor(palette, action);
128 | case types.APPLY_PENCIL:
129 | case types.APPLY_BUCKET:
130 | return preparePalette(palette);
131 | case types.SELECT_PALETTE_COLOR:
132 | return selectPaletteColor(palette, action);
133 | case types.SET_CUSTOM_COLOR:
134 | return setCustomColor(palette, action);
135 | case types.SWITCH_TOOL:
136 | return disableColor(palette, action);
137 | case types.SET_DRAWING:
138 | return setPalette(palette, action);
139 | default:
140 | return palette;
141 | }
142 | }
143 |
--------------------------------------------------------------------------------
/src/components/common/Button.jsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import PropTypes from 'prop-types';
3 | import styled, { ThemeProvider, css } from 'styled-components';
4 | import theme from 'styled-theming';
5 |
6 | const colors = {
7 | silver: '#bbb',
8 | mineShaft: '#313131',
9 | doveGray: '#707070',
10 | tundora: '#4b4949',
11 | lotus: '#803c3c',
12 | buccaneer: '#733939',
13 | cowboy: '#552a2a',
14 | steelblue: '#5786c1',
15 | sanMarino: '#4171ae',
16 | eastBay: '#3a587f',
17 | chathamsBlue: '#164075',
18 | chambray: '#2f5382',
19 | cloudBurst: '#253c5a',
20 | alto: '#e0e0e0',
21 | silveChalice: '#a0a0a0',
22 | nobel: '#b7b7b7',
23 | shrub: '#0e8044'
24 | };
25 |
26 | const textColor = theme.variants('mode', 'variant', {
27 | default: { default: colors.silver },
28 | action: { default: colors.silver },
29 | close: { default: colors.silver },
30 | info: { default: colors.silver },
31 | white: { default: 'black' },
32 | proceed: { default: colors.silver }
33 | });
34 |
35 | const bgColor = theme.variants('mode', 'variant', {
36 | default: { default: colors.mineShaft },
37 | action: { default: colors.lotus },
38 | close: { default: colors.steelblue },
39 | info: { default: colors.chathamsBlue },
40 | white: { default: colors.alto },
41 | proceed: { default: colors.shrub }
42 | });
43 |
44 | const boxShadowColor = theme.variants('mode', 'variant', {
45 | default: { default: colors.doveGray },
46 | action: { default: colors.buccaneer },
47 | close: { default: colors.sanMarino },
48 | info: { default: colors.chambray },
49 | white: { default: colors.silveChalice },
50 | proceed: { default: colors.nobel }
51 | });
52 |
53 | const bgActiveColor = theme.variants('mode', 'variant', {
54 | default: { default: colors.tundora },
55 | action: { default: colors.cowboy },
56 | close: { default: colors.eastBay },
57 | info: { default: colors.cloudBurst },
58 | white: { default: colors.nobel },
59 | proceed: { default: colors.shrub }
60 | });
61 |
62 | const ButtonCSS = css`
63 | background: none;
64 | border: none;
65 | outline: none;
66 | border-radius: 2px;
67 | padding: 10px;
68 | font-size: 1em;
69 | text-decoration: none;
70 | transition-duration: 0.1s;
71 | color: ${textColor};
72 | background-color: ${bgColor};
73 | box-shadow: 0 5px 0 0 ${boxShadowColor};
74 | margin: 0 auto;
75 | &:hover,
76 | &.selected {
77 | background-color: ${bgActiveColor};
78 | }
79 | &:hover {
80 | cursor: pointer;
81 | }
82 | &:active {
83 | transform: translate(0, 5px);
84 | box-shadow: 0 1px 0 ${bgActiveColor};
85 | background-color: ${bgActiveColor};
86 | }
87 |
88 | ${props => {
89 | const widthOptions = { full: '100%', half: '50%', normal: 'auto' };
90 | const size = widthOptions[props.size];
91 | return (
92 | props.size &&
93 | css`
94 | width: ${size};
95 | `
96 | );
97 | }};
98 | `;
99 |
100 | const ButtonStyled = styled.button.attrs(props => ({
101 | disabled: props.disabled
102 | }))`
103 | ${ButtonCSS}
104 | ${props =>
105 | props.size &&
106 | css`
107 | opacity: ${props.disabled ? '0.5' : '1'};
108 | `};
109 | `;
110 |
111 | const InputFileLabelStyled = styled.label.attrs({
112 | htmlFor: 'load-image-input'
113 | })`
114 | ${ButtonCSS}
115 | cursor: pointer;
116 | `;
117 |
118 | const InputFileStyled = styled.input.attrs({
119 | type: 'file',
120 | id: 'load-image-input',
121 | role: 'button'
122 | })`
123 | opacity: 0;
124 | position: absolute;
125 | z-index: -1;
126 | `;
127 |
128 | const Button = ({
129 | children,
130 | variant,
131 | onClick,
132 | onChange,
133 | type,
134 | size,
135 | ariaLabel,
136 | disabled = false
137 | }) => (
138 | 106 | ⚠️ Please Note: This repository is currently in a temporary idle state due to a refactor and tech upgrade. I am not accepting new Pull Requests or Issues at the moment. Sorry for the inconveniences. 107 |
108 |