diff --git a/package.json b/package.json index 05d81460..a4a7510e 100644 --- a/package.json +++ b/package.json @@ -75,6 +75,7 @@ "regenerator-runtime": "^0.10.5", "rimraf": "^2.6.1", "style-loader": "^0.18.0", + "svg-url-loader": "^2.2.0", "tap": "^10.2.0", "webpack": "^3.5.4", "webpack-dev-server": "^2.7.0" diff --git a/src/components/brush-mode.jsx b/src/components/brush-mode.jsx deleted file mode 100644 index 84a831dd..00000000 --- a/src/components/brush-mode.jsx +++ /dev/null @@ -1,19 +0,0 @@ -import React from 'react'; -import PropTypes from 'prop-types'; -import {FormattedMessage} from 'react-intl'; - -const BrushModeComponent = props => ( - -); - -BrushModeComponent.propTypes = { - onMouseDown: PropTypes.func.isRequired -}; - -export default BrushModeComponent; diff --git a/src/components/brush-mode/brush-mode.jsx b/src/components/brush-mode/brush-mode.jsx new file mode 100644 index 00000000..f5446652 --- /dev/null +++ b/src/components/brush-mode/brush-mode.jsx @@ -0,0 +1,25 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import ToolSelectComponent from '../tool-select-base/tool-select-base.jsx'; + +import brushIcon from './brush.svg'; + +const BrushModeComponent = props => ( + +); + +BrushModeComponent.propTypes = { + isSelected: PropTypes.bool.isRequired, + onMouseDown: PropTypes.func.isRequired +}; + +export default BrushModeComponent; diff --git a/src/components/brush-mode/brush.svg b/src/components/brush-mode/brush.svg new file mode 100755 index 00000000..5b8fece6 --- /dev/null +++ b/src/components/brush-mode/brush.svg @@ -0,0 +1,12 @@ + + + + brush + Created with Sketch. + + + + + + + \ No newline at end of file diff --git a/src/components/button/button.css b/src/components/button/button.css new file mode 100644 index 00000000..ee592e08 --- /dev/null +++ b/src/components/button/button.css @@ -0,0 +1,22 @@ +$border-radius: .25rem; + +.button { + padding: 0.25rem; + outline: none; + background: white; + border-radius: $border-radius; + border: 1px solid #ddd; + cursor: pointer; + font-size: 0.85rem; + transition: 0.2s; +} + +.button > img { + flex-grow: 1; + width: 1.5rem; + height: 1.5rem; +} + +.button:disabled > img { + opacity: 0.25; +} diff --git a/src/components/button/button.jsx b/src/components/button/button.jsx new file mode 100644 index 00000000..4e6b49d1 --- /dev/null +++ b/src/components/button/button.jsx @@ -0,0 +1,33 @@ +// Copied from scratch-gui for now + +import classNames from 'classnames'; +import PropTypes from 'prop-types'; +import React from 'react'; + +import styles from './button.css'; + +const ButtonComponent = ({ + className, + onClick, + children, + ...props +}) => ( + + {children} + +); + +ButtonComponent.propTypes = { + children: PropTypes.node, + className: PropTypes.string, + onClick: PropTypes.func.isRequired +}; +export default ButtonComponent; diff --git a/src/components/color-button.css b/src/components/color-button/color-button.css similarity index 100% rename from src/components/color-button.css rename to src/components/color-button/color-button.css diff --git a/src/components/color-button.jsx b/src/components/color-button/color-button.jsx similarity index 100% rename from src/components/color-button.jsx rename to src/components/color-button/color-button.jsx diff --git a/src/components/color-picker.css b/src/components/color-picker/color-picker.css similarity index 100% rename from src/components/color-picker.css rename to src/components/color-picker/color-picker.css diff --git a/src/components/color-picker.jsx b/src/components/color-picker/color-picker.jsx similarity index 98% rename from src/components/color-picker.jsx rename to src/components/color-picker/color-picker.jsx index 4e1217a0..4411a9a0 100644 --- a/src/components/color-picker.jsx +++ b/src/components/color-picker/color-picker.jsx @@ -5,9 +5,9 @@ import classNames from 'classnames'; import parseColor from 'parse-color'; import bindAll from 'lodash.bindall'; -import {MIXED} from '../helper/style-path'; +import {MIXED} from '../../helper/style-path'; -import Slider from './forms/slider.jsx'; +import Slider from '../forms/slider.jsx'; import styles from './color-picker.css'; const colorStringToHsv = hexString => { diff --git a/src/components/eraser-mode.jsx b/src/components/eraser-mode.jsx deleted file mode 100644 index 33536bfd..00000000 --- a/src/components/eraser-mode.jsx +++ /dev/null @@ -1,19 +0,0 @@ -import React from 'react'; -import PropTypes from 'prop-types'; -import {FormattedMessage} from 'react-intl'; - -const EraserModeComponent = props => ( - -); - -EraserModeComponent.propTypes = { - onMouseDown: PropTypes.func.isRequired -}; - -export default EraserModeComponent; diff --git a/src/components/eraser-mode/eraser-mode.jsx b/src/components/eraser-mode/eraser-mode.jsx new file mode 100644 index 00000000..847d1400 --- /dev/null +++ b/src/components/eraser-mode/eraser-mode.jsx @@ -0,0 +1,25 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import ToolSelectComponent from '../tool-select-base/tool-select-base.jsx'; + +import eraserIcon from './eraser.svg'; + +const EraserModeComponent = props => ( + +); + +EraserModeComponent.propTypes = { + isSelected: PropTypes.bool.isRequired, + onMouseDown: PropTypes.func.isRequired +}; + +export default EraserModeComponent; diff --git a/src/components/eraser-mode/eraser.svg b/src/components/eraser-mode/eraser.svg new file mode 100755 index 00000000..56ab603e --- /dev/null +++ b/src/components/eraser-mode/eraser.svg @@ -0,0 +1,12 @@ + + + + eraser + Created with Sketch. + + + + + + + \ No newline at end of file diff --git a/src/components/fill-color-indicator.jsx b/src/components/fill-color-indicator.jsx index 3450890d..91ed96ba 100644 --- a/src/components/fill-color-indicator.jsx +++ b/src/components/fill-color-indicator.jsx @@ -4,10 +4,10 @@ import Popover from 'react-popover'; import {defineMessages, injectIntl, intlShape} from 'react-intl'; import Label from './forms/label.jsx'; -import ColorPicker from './color-picker.jsx'; -import ColorButton from './color-button.jsx'; +import ColorPicker from './color-picker/color-picker.jsx'; +import ColorButton from './color-button/color-button.jsx'; -import styles from './paint-editor.css'; +import styles from './paint-editor/paint-editor.css'; const messages = defineMessages({ fill: { diff --git a/src/components/line-mode.jsx b/src/components/line-mode.jsx deleted file mode 100644 index 17affefa..00000000 --- a/src/components/line-mode.jsx +++ /dev/null @@ -1,19 +0,0 @@ -import React from 'react'; -import PropTypes from 'prop-types'; -import {FormattedMessage} from 'react-intl'; - -const LineModeComponent = props => ( - -); - -LineModeComponent.propTypes = { - onMouseDown: PropTypes.func.isRequired -}; - -export default LineModeComponent; diff --git a/src/components/line-mode/line-mode.jsx b/src/components/line-mode/line-mode.jsx new file mode 100644 index 00000000..7a676117 --- /dev/null +++ b/src/components/line-mode/line-mode.jsx @@ -0,0 +1,25 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import ToolSelectComponent from '../tool-select-base/tool-select-base.jsx'; + +import lineIcon from './line.svg'; + +const LineModeComponent = props => ( + +); + +LineModeComponent.propTypes = { + isSelected: PropTypes.bool.isRequired, + onMouseDown: PropTypes.func.isRequired +}; + +export default LineModeComponent; diff --git a/src/components/line-mode/line.svg b/src/components/line-mode/line.svg new file mode 100755 index 00000000..836bd6c9 --- /dev/null +++ b/src/components/line-mode/line.svg @@ -0,0 +1,12 @@ + + + + line + Created with Sketch. + + + + + + + \ No newline at end of file diff --git a/src/components/oval-mode.jsx b/src/components/oval-mode.jsx deleted file mode 100644 index eb179517..00000000 --- a/src/components/oval-mode.jsx +++ /dev/null @@ -1,19 +0,0 @@ -import React from 'react'; -import PropTypes from 'prop-types'; -import {FormattedMessage} from 'react-intl'; - -const OvalModeComponent = props => ( - -); - -OvalModeComponent.propTypes = { - onMouseDown: PropTypes.func.isRequired -}; - -export default OvalModeComponent; diff --git a/src/components/oval-mode/oval-mode.jsx b/src/components/oval-mode/oval-mode.jsx new file mode 100644 index 00000000..45a44b54 --- /dev/null +++ b/src/components/oval-mode/oval-mode.jsx @@ -0,0 +1,25 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import ToolSelectComponent from '../tool-select-base/tool-select-base.jsx'; + +import ovalIcon from './oval.svg'; + +const OvalModeComponent = props => ( + +); + +OvalModeComponent.propTypes = { + isSelected: PropTypes.bool.isRequired, + onMouseDown: PropTypes.func.isRequired +}; + +export default OvalModeComponent; diff --git a/src/components/oval-mode/oval.svg b/src/components/oval-mode/oval.svg new file mode 100755 index 00000000..95bf8a1d --- /dev/null +++ b/src/components/oval-mode/oval.svg @@ -0,0 +1,12 @@ + + + + oval + Created with Sketch. + + + + + + + \ No newline at end of file diff --git a/src/components/pen-mode.jsx b/src/components/pen-mode.jsx deleted file mode 100644 index 2f17bee4..00000000 --- a/src/components/pen-mode.jsx +++ /dev/null @@ -1,19 +0,0 @@ -import React from 'react'; -import PropTypes from 'prop-types'; -import {FormattedMessage} from 'react-intl'; - -const PenModeComponent = props => ( - -); - -PenModeComponent.propTypes = { - onMouseDown: PropTypes.func.isRequired -}; - -export default PenModeComponent; diff --git a/src/components/pen-mode/pen-mode.jsx b/src/components/pen-mode/pen-mode.jsx new file mode 100644 index 00000000..b34d52b0 --- /dev/null +++ b/src/components/pen-mode/pen-mode.jsx @@ -0,0 +1,25 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import ToolSelectComponent from '../tool-select-base/tool-select-base.jsx'; + +import penIcon from './pen.svg'; + +const PenModeComponent = props => ( + +); + +PenModeComponent.propTypes = { + isSelected: PropTypes.bool.isRequired, + onMouseDown: PropTypes.func.isRequired +}; + +export default PenModeComponent; diff --git a/src/components/pen-mode/pen.svg b/src/components/pen-mode/pen.svg new file mode 100755 index 00000000..4cddfe65 --- /dev/null +++ b/src/components/pen-mode/pen.svg @@ -0,0 +1,12 @@ + + + + pen + Created with Sketch. + + + + + + + \ No newline at end of file diff --git a/src/components/rect-mode.jsx b/src/components/rect-mode.jsx deleted file mode 100644 index 1c18b067..00000000 --- a/src/components/rect-mode.jsx +++ /dev/null @@ -1,19 +0,0 @@ -import React from 'react'; -import PropTypes from 'prop-types'; -import {FormattedMessage} from 'react-intl'; - -const RectModeComponent = props => ( - -); - -RectModeComponent.propTypes = { - onMouseDown: PropTypes.func.isRequired -}; - -export default RectModeComponent; diff --git a/src/components/rect-mode/rect-mode.jsx b/src/components/rect-mode/rect-mode.jsx new file mode 100644 index 00000000..ff9ce822 --- /dev/null +++ b/src/components/rect-mode/rect-mode.jsx @@ -0,0 +1,25 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import ToolSelectComponent from '../tool-select-base/tool-select-base.jsx'; + +import rectIcon from './rectangle.svg'; + +const RectModeComponent = props => ( + +); + +RectModeComponent.propTypes = { + isSelected: PropTypes.bool.isRequired, + onMouseDown: PropTypes.func.isRequired +}; + +export default RectModeComponent; diff --git a/src/components/rect-mode/rectangle.svg b/src/components/rect-mode/rectangle.svg new file mode 100755 index 00000000..4a26c352 --- /dev/null +++ b/src/components/rect-mode/rectangle.svg @@ -0,0 +1,12 @@ + + + + rectangle + Created with Sketch. + + + + + + + \ No newline at end of file diff --git a/src/components/reshape-mode.jsx b/src/components/reshape-mode.jsx deleted file mode 100644 index a2b06f40..00000000 --- a/src/components/reshape-mode.jsx +++ /dev/null @@ -1,19 +0,0 @@ -import React from 'react'; -import PropTypes from 'prop-types'; -import {FormattedMessage} from 'react-intl'; - -const ReshapeModeComponent = props => ( - -); - -ReshapeModeComponent.propTypes = { - onMouseDown: PropTypes.func.isRequired -}; - -export default ReshapeModeComponent; diff --git a/src/components/reshape-mode/reshape-mode.jsx b/src/components/reshape-mode/reshape-mode.jsx new file mode 100644 index 00000000..8e0ca264 --- /dev/null +++ b/src/components/reshape-mode/reshape-mode.jsx @@ -0,0 +1,25 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import ToolSelectComponent from '../tool-select-base/tool-select-base.jsx'; + +import reshapeIcon from './reshape.svg'; + +const ReshapeModeComponent = props => ( + +); + +ReshapeModeComponent.propTypes = { + isSelected: PropTypes.bool.isRequired, + onMouseDown: PropTypes.func.isRequired +}; + +export default ReshapeModeComponent; diff --git a/src/components/reshape-mode/reshape.svg b/src/components/reshape-mode/reshape.svg new file mode 100755 index 00000000..acf27689 --- /dev/null +++ b/src/components/reshape-mode/reshape.svg @@ -0,0 +1,17 @@ + + + + reshape + Created with Sketch. + + + + + + + + + + + + \ No newline at end of file diff --git a/src/components/rounded-rect-mode.jsx b/src/components/rounded-rect-mode.jsx deleted file mode 100644 index fe240c11..00000000 --- a/src/components/rounded-rect-mode.jsx +++ /dev/null @@ -1,19 +0,0 @@ -import React from 'react'; -import PropTypes from 'prop-types'; -import {FormattedMessage} from 'react-intl'; - -const RoundedRectModeComponent = props => ( - -); - -RoundedRectModeComponent.propTypes = { - onMouseDown: PropTypes.func.isRequired -}; - -export default RoundedRectModeComponent; diff --git a/src/components/rounded-rect-mode/rounded-rect-mode.jsx b/src/components/rounded-rect-mode/rounded-rect-mode.jsx new file mode 100644 index 00000000..f5c93df0 --- /dev/null +++ b/src/components/rounded-rect-mode/rounded-rect-mode.jsx @@ -0,0 +1,25 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import ToolSelectComponent from '../tool-select-base/tool-select-base.jsx'; + +import roundedRectIcon from './rounded-rectangle.svg'; + +const RoundedRectModeComponent = props => ( + +); + +RoundedRectModeComponent.propTypes = { + isSelected: PropTypes.bool.isRequired, + onMouseDown: PropTypes.func.isRequired +}; + +export default RoundedRectModeComponent; diff --git a/src/components/rounded-rect-mode/rounded-rectangle.svg b/src/components/rounded-rect-mode/rounded-rectangle.svg new file mode 100755 index 00000000..d5915431 --- /dev/null +++ b/src/components/rounded-rect-mode/rounded-rectangle.svg @@ -0,0 +1,12 @@ + + + + rounded-rectangle + Created with Sketch. + + + + + + + \ No newline at end of file diff --git a/src/components/select-mode.jsx b/src/components/select-mode.jsx deleted file mode 100644 index 78e976f7..00000000 --- a/src/components/select-mode.jsx +++ /dev/null @@ -1,19 +0,0 @@ -import React from 'react'; -import PropTypes from 'prop-types'; -import {FormattedMessage} from 'react-intl'; - -const SelectModeComponent = props => ( - -); - -SelectModeComponent.propTypes = { - onMouseDown: PropTypes.func.isRequired -}; - -export default SelectModeComponent; diff --git a/src/components/select-mode/select-mode.jsx b/src/components/select-mode/select-mode.jsx new file mode 100644 index 00000000..3a8b5d4b --- /dev/null +++ b/src/components/select-mode/select-mode.jsx @@ -0,0 +1,25 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import ToolSelectComponent from '../tool-select-base/tool-select-base.jsx'; + +import selectIcon from './select.svg'; + +const SelectModeComponent = props => ( + +); + +SelectModeComponent.propTypes = { + isSelected: PropTypes.bool.isRequired, + onMouseDown: PropTypes.func.isRequired +}; + +export default SelectModeComponent; diff --git a/src/components/select-mode/select.svg b/src/components/select-mode/select.svg new file mode 100755 index 00000000..a0b219d2 --- /dev/null +++ b/src/components/select-mode/select.svg @@ -0,0 +1,12 @@ + + + + select + Created with Sketch. + + + + + + + \ No newline at end of file diff --git a/src/components/stroke-color-indicator.jsx b/src/components/stroke-color-indicator.jsx index 6911420b..f490bf24 100644 --- a/src/components/stroke-color-indicator.jsx +++ b/src/components/stroke-color-indicator.jsx @@ -4,10 +4,10 @@ import Popover from 'react-popover'; import {defineMessages, injectIntl, intlShape} from 'react-intl'; import Label from './forms/label.jsx'; -import ColorPicker from './color-picker.jsx'; -import ColorButton from './color-button.jsx'; +import ColorPicker from './color-picker/color-picker.jsx'; +import ColorButton from './color-button/color-button.jsx'; -import styles from './paint-editor.css'; +import styles from './paint-editor/paint-editor.css'; const messages = defineMessages({ stroke: { diff --git a/src/components/stroke-width-indicator.jsx b/src/components/stroke-width-indicator.jsx index 6bdc28bc..8dc6173d 100644 --- a/src/components/stroke-width-indicator.jsx +++ b/src/components/stroke-width-indicator.jsx @@ -6,7 +6,7 @@ import Input from './forms/input.jsx'; import {MAX_STROKE_WIDTH} from '../reducers/stroke-width'; -import styles from './paint-editor.css'; +import styles from './paint-editor/paint-editor.css'; const BufferedInput = BufferedInputHOC(Input); const StrokeWidthIndicatorComponent = props => ( diff --git a/src/components/tool-select-base/tool-select-base.css b/src/components/tool-select-base/tool-select-base.css new file mode 100644 index 00000000..174b561e --- /dev/null +++ b/src/components/tool-select-base/tool-select-base.css @@ -0,0 +1,19 @@ +@import '../../css/colors.css'; + +.tool-select { + background: none; + border: none; +} + +.tool-select.is-selected { + background-color: $ui-background-blue; +} + +.tool-select:focus { + outline: none; +} + +img.tool-select-icon { + width: 2rem; + height: 2rem; +} diff --git a/src/components/tool-select-base/tool-select-base.jsx b/src/components/tool-select-base/tool-select-base.jsx new file mode 100644 index 00000000..3a679b47 --- /dev/null +++ b/src/components/tool-select-base/tool-select-base.jsx @@ -0,0 +1,44 @@ +import classNames from 'classnames'; +import React from 'react'; +import PropTypes from 'prop-types'; +import {injectIntl, intlShape} from 'react-intl'; + +import Button from '../button/button.jsx'; + +import styles from './tool-select-base.css'; + +const ToolSelectComponent = props => ( + +); + +ToolSelectComponent.propTypes = { + className: PropTypes.string, + imgDescriptor: PropTypes.shape({ + defaultMessage: PropTypes.string, + description: PropTypes.string, + id: PropTypes.string + }).isRequired, + imgSrc: PropTypes.string.isRequired, + intl: intlShape.isRequired, + isSelected: PropTypes.bool.isRequired, + onMouseDown: PropTypes.func.isRequired +}; + +export default injectIntl(ToolSelectComponent); diff --git a/src/containers/brush-mode.jsx b/src/containers/brush-mode.jsx index 0ffdde41..f525deab 100644 --- a/src/containers/brush-mode.jsx +++ b/src/containers/brush-mode.jsx @@ -10,7 +10,7 @@ import {changeMode} from '../reducers/modes'; import {clearSelectedItems} from '../reducers/selected-items'; import {clearSelection} from '../helper/selection'; -import BrushModeComponent from '../components/brush-mode.jsx'; +import BrushModeComponent from '../components/brush-mode/brush-mode.jsx'; class BrushMode extends React.Component { constructor (props) { @@ -41,8 +41,8 @@ class BrushMode extends React.Component { }); } } - shouldComponentUpdate () { - return false; // Static component, for now + shouldComponentUpdate (nextProps) { + return nextProps.isBrushModeActive !== this.props.isBrushModeActive; } activateTool () { // TODO: Instead of clearing selection, consider a kind of "draw inside" @@ -71,7 +71,10 @@ class BrushMode extends React.Component { } render () { return ( - + ); } } diff --git a/src/containers/eraser-mode.jsx b/src/containers/eraser-mode.jsx index 87a7925d..cd7149df 100644 --- a/src/containers/eraser-mode.jsx +++ b/src/containers/eraser-mode.jsx @@ -6,7 +6,7 @@ import Modes from '../modes/modes'; import Blobbiness from '../helper/blob-tools/blob'; import {changeBrushSize} from '../reducers/eraser-mode'; import {clearSelectedItems} from '../reducers/selected-items'; -import EraserModeComponent from '../components/eraser-mode.jsx'; +import EraserModeComponent from '../components/eraser-mode/eraser-mode.jsx'; import {changeMode} from '../reducers/modes'; class EraserMode extends React.Component { @@ -37,8 +37,8 @@ class EraserMode extends React.Component { }); } } - shouldComponentUpdate () { - return false; // Static component, for now + shouldComponentUpdate (nextProps) { + return nextProps.isEraserModeActive !== this.props.isEraserModeActive; } activateTool () { this.props.canvas.addEventListener('mousewheel', this.onScroll); @@ -59,7 +59,10 @@ class EraserMode extends React.Component { } render () { return ( - + ); } } diff --git a/src/containers/line-mode.jsx b/src/containers/line-mode.jsx index 72b435b2..8ba4de6c 100644 --- a/src/containers/line-mode.jsx +++ b/src/containers/line-mode.jsx @@ -10,7 +10,7 @@ import {changeMode} from '../reducers/modes'; import {changeStrokeWidth} from '../reducers/stroke-width'; import {clearSelectedItems, setSelectedItems} from '../reducers/selected-items'; -import LineModeComponent from '../components/line-mode.jsx'; +import LineModeComponent from '../components/line-mode/line-mode.jsx'; class LineMode extends React.Component { static get SNAP_TOLERANCE () { @@ -42,8 +42,8 @@ class LineMode extends React.Component { this.deactivateTool(); } } - shouldComponentUpdate () { - return false; // Static component, for now + shouldComponentUpdate (nextProps) { + return nextProps.isLineModeActive !== this.props.isLineModeActive; } activateTool () { clearSelection(this.props.clearSelectedItems); @@ -266,7 +266,10 @@ class LineMode extends React.Component { } render () { return ( - + ); } } diff --git a/src/containers/oval-mode.jsx b/src/containers/oval-mode.jsx index 34ccf091..703301f5 100644 --- a/src/containers/oval-mode.jsx +++ b/src/containers/oval-mode.jsx @@ -10,7 +10,7 @@ import {clearSelectedItems, setSelectedItems} from '../reducers/selected-items'; import {getSelectedLeafItems} from '../helper/selection'; import OvalTool from '../helper/tools/oval-tool'; -import OvalModeComponent from '../components/oval-mode.jsx'; +import OvalModeComponent from '../components/oval-mode/oval-mode.jsx'; class OvalMode extends React.Component { constructor (props) { @@ -36,8 +36,8 @@ class OvalMode extends React.Component { this.deactivateTool(); } } - shouldComponentUpdate () { - return false; // Static component, for now + shouldComponentUpdate (nextProps) { + return nextProps.isOvalModeActive !== this.props.isOvalModeActive; } activateTool () { this.tool = new OvalTool( @@ -56,7 +56,10 @@ class OvalMode extends React.Component { } render () { return ( - + ); } } diff --git a/src/containers/paint-editor.jsx b/src/containers/paint-editor.jsx index 0b039e8a..2492f1d0 100644 --- a/src/containers/paint-editor.jsx +++ b/src/containers/paint-editor.jsx @@ -1,6 +1,6 @@ import PropTypes from 'prop-types'; import React from 'react'; -import PaintEditorComponent from '../components/paint-editor.jsx'; +import PaintEditorComponent from '../components/paint-editor/paint-editor.jsx'; import {changeMode} from '../reducers/modes'; import {undo, redo, undoSnapshot} from '../reducers/undo'; diff --git a/src/containers/pen-mode.jsx b/src/containers/pen-mode.jsx index 0519f963..ae435cf0 100644 --- a/src/containers/pen-mode.jsx +++ b/src/containers/pen-mode.jsx @@ -10,7 +10,7 @@ import {clearSelectedItems, setSelectedItems} from '../reducers/selected-items'; import {getSelectedLeafItems} from '../helper/selection'; import PenTool from '../helper/tools/pen-tool'; -import PenModeComponent from '../components/pen-mode.jsx'; +import PenModeComponent from '../components/pen-mode/pen-mode.jsx'; class PenMode extends React.Component { constructor (props) { @@ -36,8 +36,8 @@ class PenMode extends React.Component { this.deactivateTool(); } } - shouldComponentUpdate () { - return false; // Static component, for now + shouldComponentUpdate (nextProps) { + return nextProps.isPenModeActive !== this.props.isPenModeActive; } activateTool () { this.tool = new PenTool( @@ -56,7 +56,10 @@ class PenMode extends React.Component { } render () { return ( - + ); } } diff --git a/src/containers/rect-mode.jsx b/src/containers/rect-mode.jsx index 7a0d8cde..4e75c3bf 100644 --- a/src/containers/rect-mode.jsx +++ b/src/containers/rect-mode.jsx @@ -10,7 +10,7 @@ import {clearSelectedItems, setSelectedItems} from '../reducers/selected-items'; import {getSelectedLeafItems} from '../helper/selection'; import RectTool from '../helper/tools/rect-tool'; -import RectModeComponent from '../components/rect-mode.jsx'; +import RectModeComponent from '../components/rect-mode/rect-mode.jsx'; class RectMode extends React.Component { constructor (props) { @@ -36,8 +36,8 @@ class RectMode extends React.Component { this.deactivateTool(); } } - shouldComponentUpdate () { - return false; // Static component, for now + shouldComponentUpdate (nextProps) { + return nextProps.isRectModeActive !== this.props.isRectModeActive; } activateTool () { this.tool = new RectTool( @@ -56,7 +56,10 @@ class RectMode extends React.Component { } render () { return ( - + ); } } diff --git a/src/containers/reshape-mode.jsx b/src/containers/reshape-mode.jsx index bffb65bd..3dfe2c2c 100644 --- a/src/containers/reshape-mode.jsx +++ b/src/containers/reshape-mode.jsx @@ -10,7 +10,7 @@ import {clearSelectedItems, setSelectedItems} from '../reducers/selected-items'; import {getSelectedLeafItems} from '../helper/selection'; import ReshapeTool from '../helper/selection-tools/reshape-tool'; -import ReshapeModeComponent from '../components/reshape-mode.jsx'; +import ReshapeModeComponent from '../components/reshape-mode/reshape-mode.jsx'; class ReshapeMode extends React.Component { constructor (props) { @@ -36,8 +36,8 @@ class ReshapeMode extends React.Component { this.deactivateTool(); } } - shouldComponentUpdate () { - return false; // Static component, for now + shouldComponentUpdate (nextProps) { + return nextProps.isReshapeModeActive !== this.props.isReshapeModeActive; } activateTool () { this.tool = new ReshapeTool( @@ -58,7 +58,10 @@ class ReshapeMode extends React.Component { } render () { return ( - + ); } } diff --git a/src/containers/rounded-rect-mode.jsx b/src/containers/rounded-rect-mode.jsx index 350835f7..fc61eceb 100644 --- a/src/containers/rounded-rect-mode.jsx +++ b/src/containers/rounded-rect-mode.jsx @@ -10,7 +10,7 @@ import {clearSelectedItems, setSelectedItems} from '../reducers/selected-items'; import {getSelectedLeafItems} from '../helper/selection'; import RoundedRectTool from '../helper/tools/rounded-rect-tool'; -import RoundedRectModeComponent from '../components/rounded-rect-mode.jsx'; +import RoundedRectModeComponent from '../components/rounded-rect-mode/rounded-rect-mode.jsx'; class RoundedRectMode extends React.Component { constructor (props) { @@ -36,8 +36,8 @@ class RoundedRectMode extends React.Component { this.deactivateTool(); } } - shouldComponentUpdate () { - return false; // Static component, for now + shouldComponentUpdate (nextProps) { + return nextProps.isRoundedRectModeActive !== this.props.isRoundedRectModeActive; } activateTool () { this.tool = new RoundedRectTool( @@ -56,7 +56,10 @@ class RoundedRectMode extends React.Component { } render () { return ( - + ); } } diff --git a/src/containers/select-mode.jsx b/src/containers/select-mode.jsx index 572aa12a..a9f09d84 100644 --- a/src/containers/select-mode.jsx +++ b/src/containers/select-mode.jsx @@ -10,7 +10,7 @@ import {clearSelectedItems, setSelectedItems} from '../reducers/selected-items'; import {getSelectedLeafItems} from '../helper/selection'; import SelectTool from '../helper/selection-tools/select-tool'; -import SelectModeComponent from '../components/select-mode.jsx'; +import SelectModeComponent from '../components/select-mode/select-mode.jsx'; class SelectMode extends React.Component { constructor (props) { @@ -36,8 +36,8 @@ class SelectMode extends React.Component { this.deactivateTool(); } } - shouldComponentUpdate () { - return false; // Static component, for now + shouldComponentUpdate (nextProps) { + return nextProps.isSelectModeActive !== this.props.isSelectModeActive; } activateTool () { this.tool = new SelectTool( @@ -56,7 +56,10 @@ class SelectMode extends React.Component { } render () { return ( - + ); } } diff --git a/webpack.config.js b/webpack.config.js index fd5935d6..6c794946 100644 --- a/webpack.config.js +++ b/webpack.config.js @@ -49,6 +49,10 @@ const base = { } } }] + }, + { + test: /\.svg$/, + loader: 'svg-url-loader?noquotes' }] }, plugins: []