move shapes into a shape tool

Author: JeremyGamer13

src/components/mode-tools/mode-tools.jsx

@@ -11,6 +11,7 @@ import {changeBrushSize} from '../../reducers/brush-mode';
 import {changeBrushSize as changeEraserSize} from '../../reducers/eraser-mode';
 import {changeRoundedCornerSize} from '../../reducers/rounded-rect-mode';
 import {changeTrianglePolyCount} from '../../reducers/triangle-mode';
+import {changeCurrentlySelectedShape} from '../../reducers/sussy-mode';
 import {changeBitBrushSize} from '../../reducers/bit-brush-size';
 import {changeBitEraserSize} from '../../reducers/bit-eraser-size';
 import {setShapesFilled} from '../../reducers/fill-bitmap-shapes';
@@ -60,6 +61,8 @@ import bitRectOutlinedIcon from '../bit-rect-mode/rectangle-outlined.svg';
 
 import {MAX_STROKE_WIDTH} from '../../reducers/stroke-width';
 
+import selectableShapes from '../../helper/selectable-shapes.js';
+
 const LiveInput = LiveInputHOC(Input);
 const ModeToolsComponent = props => {
     const messages = defineMessages({
@@ -262,6 +265,73 @@ const ModeToolsComponent = props => {
                 </div>
             );
         }
+        case Modes.SUSSY:
+        {
+            const currentlySelectedShape = props.currentlySelectedShape;
+            const changeFunction = props.onCurrentlySelectedShapeChange;
+            const selectedShapeObject = selectableShapes
+                .filter(shape => shape.id === currentlySelectedShape)[0];
+            const generateShapeSVG = (shapeObject) => {
+                return `<svg
+                version="1.1"
+                xmlns="http://www.w3.org/2000/svg"
+                xmlns:xlink="http://www.w3.org/1999/xlink"
+
+                width="${shapeObject.icon.width}"
+                height="${shapeObject.icon.height}"
+                viewBox="${shapeObject.icon.viewBox}"
+                
+                >
+                <g transform="translate(${shapeObject.icon.x},${shapeObject.icon.y})">
+                <g data-paper-data="{&quot;isPaintingLayer&quot;:true}"
+                fill="none" fill-rule="nonzero" stroke="#575E75"
+
+                stroke-width="${shapeObject.icon.strokeWidth}"
+
+                stroke-linecap="butt"
+                stroke-linejoin="round" stroke-dashoffset="0" style="mix-blend-mode: normal">
+
+                <path d="${shapeObject.path}"/>
+
+                </g></g></svg>`
+            };
+            const selectableShapesList = (
+                <InputGroup className={classNames(styles.modDashedBorder, styles.modLabeledIconHeight)}>
+                    {selectableShapes.map(shape => {
+                        return (<LabeledIconButton
+                            hideLabel={hideLabel(props.intl.locale)}
+                            imgSrc={`data:image/svg+xml,${encodeURIComponent(generateShapeSVG(shape))}`}
+                            title={shape.name}
+                            onClick={() => changeFunction(shape.id)}
+                        />)
+                    })}
+                </InputGroup>
+            )
+            return (
+                <div className={classNames(props.className, styles.modeTools)}>
+                    <Dropdown
+                        className={styles.modUnselect}
+                        enterExitTransitionDurationMs={20}
+                        popoverContent={
+                            <InputGroup
+                                className={styles.modContextMenu}
+                                rtl={props.rtl}
+                            >
+                                {selectableShapesList}
+                            </InputGroup>
+                        }
+                        tipSize={.01}
+                    >
+                        <img
+                            src={`data:image/svg+xml,${encodeURIComponent(generateShapeSVG(selectedShapeObject))}`}
+                            alt={selectedShapeObject.name}
+                            title={selectedShapeObject.name}
+                            height={16}
+                        />
+                    </Dropdown>
+                </div>
+            );
+        }
         case Modes.RESHAPE:
             return (
                 <div className={classNames(props.className, styles.modeTools)}>
@@ -527,6 +597,7 @@ ModeToolsComponent.propTypes = {
     eraserValue: PropTypes.number,
     roundedCornerValue: PropTypes.number,
     trianglePolyValue: PropTypes.number,
+    currentlySelectedShape: PropTypes.string,
     fillBitmapShapes: PropTypes.bool,
     format: PropTypes.oneOf(Object.keys(Formats)),
     hasSelectedUncurvedPoints: PropTypes.bool,
@@ -571,7 +642,8 @@ const mapStateToProps = state => ({
     clipboardItems: state.scratchPaint.clipboard.items,
     eraserValue: state.scratchPaint.eraserMode.brushSize,
     roundedCornerValue: state.scratchPaint.roundedRectMode.roundedCornerSize,
-    trianglePolyValue: state.scratchPaint.triangleMode.trianglePolyCount
+    trianglePolyValue: state.scratchPaint.triangleMode.trianglePolyCount,
+    currentlySelectedShape: state.scratchPaint.sussyMode.currentlySelectedShape
 });
 const mapDispatchToProps = dispatch => ({
     onBrushSliderChange: brushSize => {
@@ -583,6 +655,9 @@ const mapDispatchToProps = dispatch => ({
     onPolyCountSliderChange: polyCount => {
         dispatch(changeTrianglePolyCount(polyCount));
     },
+    onCurrentlySelectedShapeChange: shape => {
+        dispatch(changeCurrentlySelectedShape(shape));
+    },
     onBitBrushSliderChange: bitBrushSize => {
         dispatch(changeBitBrushSize(bitBrushSize));
     },

src/components/paint-editor/paint-editor.jsx

@@ -30,7 +30,6 @@ import OvalMode from '../../containers/oval-mode.jsx';
 import RectMode from '../../containers/rect-mode.jsx';
 import RoundedRectMode from '../../containers/rounded-rect-mode.jsx';
 import SussyMode from '../../containers/sussy-mode.jsx';
-import DragonMode from '../../containers/dragon-mode.jsx';
 import TriangleMode from '../../containers/triangle-mode.jsx';
 import ArrowMode from '../../containers/arrow-mode.jsx';
 import ReshapeMode from '../../containers/reshape-mode.jsx';
@@ -184,9 +183,6 @@ const PaintEditorComponent = props => (
                     <SussyMode
                         onUpdateImage={props.onUpdateImage}
                     />
-                    <DragonMode
-                        onUpdateImage={props.onUpdateImage}
-                    />
                     <ArrowMode
                         onUpdateImage={props.onUpdateImage}
                     />

src/components/sussy-mode/sussy.html

@@ -0,0 +1,20 @@
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="15.89412"
+    height="15.89412" viewBox="-2,-2,19.89412,19.89412">
+    <g transform="translate(-232.05294,-172.05294)">
+        <g data-paper-data="{&quot;isPaintingLayer&quot;:true}" stroke-linecap="butt" stroke-linejoin="miter"
+            stroke-miterlimit="10" stroke-dasharray="" stroke-dashoffset="0" style="mix-blend-mode: normal">
+            <path
+                d="M232.80294,180c0,-3.97483 3.22223,-7.19706 7.19706,-7.19706c3.97483,0 7.19706,3.22223 7.19706,7.19706c0,3.97483 -3.22223,7.19706 -7.19706,7.19706c-3.97483,0 -7.19706,-3.22223 -7.19706,-7.19706z"
+                fill="none" fill-rule="evenodd" stroke="#575e75" stroke-width="1.5" />
+            <path
+                d="M237.08478,178.21688c0,-0.41421 0.33579,-0.75 0.75,-0.75c0.41421,0 0.75,0.33579 0.75,0.75c0,0.41421 -0.33579,0.75 -0.75,0.75c-0.41421,0 -0.75,-0.33579 -0.75,-0.75z"
+                fill="#575e75" fill-rule="nonzero" stroke="none" stroke-width="0.5" />
+            <path
+                d="M241.41522,178.21688c0,-0.41421 0.33579,-0.75 0.75,-0.75c0.41421,0 0.75,0.33579 0.75,0.75c0,0.41421 -0.33579,0.75 -0.75,0.75c-0.41421,0 -0.75,-0.33579 -0.75,-0.75z"
+                fill="#575e75" fill-rule="nonzero" stroke="none" stroke-width="0.5" />
+            <path
+                d="M236.07461,181.52292c0,-0.00043 3.92539,0.00434 3.92539,0.00434c0,0 3.92539,-0.00477 3.92539,-0.00434c0,2.11928 -1.75746,3.83729 -3.92539,3.83729c-2.16793,0 -3.92539,-1.71801 -3.92539,-3.83729z"
+                fill="none" fill-rule="nonzero" stroke="#575e75" stroke-width="1" />
+        </g>
+    </g>
+</svg><!--rotationCenter:7.947057591364199:7.947057591364143-->

src/components/sussy-mode/sussy.svg

@@ -197,8 +197,6 @@ class PaintEditor extends React.Component {
             case Modes.LINE:
                 this.props.changeMode(Modes.BIT_LINE);
                 break;
-            case Modes.DRAGON:
-                /* falls through */
             case Modes.OVAL:
                 this.props.changeMode(Modes.BIT_OVAL);
                 break;

src/containers/paint-editor.jsx

@@ -0,0 +1,104 @@
+const selectablePaths = {
+    dragon: 'M169.19262,341.94408c-5.80616,2.17958 -21.17199,0.24298 -33.38995,1.0916c-7.25679,0 -9.67935,-0.84862 -15.72487,-5.20415c-7.74276,-11.732 -18.51008,-29.51676 -23.10859,-48.2662c-1.20765,-6.17244 9.43637,-6.77446 4.23585,-12.70392c-5.32382,-8.95041 0.9683,-11.49264 3.26392,-11.97498c9.31669,0.23935 3.02457,20.92901 26.00986,15.36221c2.29925,-9.79903 -1.33096,-32.17867 4.71818,-38.95313c3.02457,19.96071 0.72532,26.25284 3.74989,32.29835c8.95403,-3.86956 12.09828,0.48596 14.87987,1.45426c2.54223,6.16882 7.98574,3.26392 8.71105,0.23935c-0.11968,-10.16169 -0.84499,-27.82315 0.60564,-39.55877c-3.14425,-1.93297 -5.80616,-7.86243 -3.50691,-18.2671c-0.36266,-0.9683 8.70743,-23.22464 -1.21128,-25.76687c-8.10541,2.54223 -11.61232,14.39754 -16.1528,19.33332c-3.77165,-11.7864 -7.26042,-25.55291 -7.97123,-44.80644c1.39623,-28.10239 14.28149,-28.10239 24.68253,-27.17036c-2.48421,-4.81248 -6.36465,-9.7809 -6.65841,-17.67234c-1.70812,-29.19037 5.90045,-48.59984 22.04963,-54.96812c-4.65653,7.60857 -4.96842,20.03325 -4.65653,24.06963c4.19233,15.99323 14.90526,28.87848 22.82209,30.74255c9.16438,-5.12436 13.82091,-13.81728 19.72136,-25.93007c2.17232,-4.50422 -2.02001,-24.68978 -0.15594,-36.79894c7.45263,-23.44586 28.41428,-34.47067 38.04286,-44.87534c-5.74451,15.68497 -11.49264,37.11083 -9.78452,42.85533c7.14437,18.01324 12.73293,31.67821 22.20557,47.04767c6.21234,-0.93203 11.02481,-6.98843 17.23352,-8.5406c-16.76932,25.30992 -3.10436,55.27638 -2.79247,57.45233c20.33788,-20.02962 35.24676,-43.94331 56.67262,-53.56826c25.62181,-25.93007 41.30316,-55.58827 65.83699,-89.12691c-2.7961,27.63819 -19.25353,67.23323 -29.50226,85.71067c-9.7809,20.64977 -19.25353,36.33111 -33.85053,58.92473c-17.90807,20.81296 -20.18556,24.60999 -26.83672,48.36411c0.23935,3.38723 4.23222,5.92946 7.01381,8.46807c-7.25679,1.81329 -8.70743,5.56681 -9.07371,11.37297c0,41.61504 5.32382,45.24525 5.20052,56.37524c-15.36221,32.41803 -28.67177,42.46004 -60.2448,65.565c-76.33595,21.41497 -51.90003,3.86956 -76.45563,-3.63021zM242.45,269.99185c3.089,-2.18347 3.8336,-19.71382 1.23123,-26.15118c-3.41142,-8.43867 -9.64814,-22.47456 -13.03123,-22.04882c-8.4,0.67715 -6.47716,12 -26,17.4c-2.36136,1.15845 -17.23312,6.73679 -30.28301,6.53392c-4.23102,-0.06578 -2.26453,29.16099 -0.51699,31.46608c5.4,7.12284 58.90584,-0.34765 68.6,-7.2z',
+    sussy: 'm 77 0 h 28 a 20 20 0 0 1 20 20 v 0 a 20 20 0 0 1 -20 20 V 40 H 77 V 112 A 1 1 0 0 1 42 111 A 1 1 0 0 0 16 112 A 1 1 0 0 1 -18 111 V 74 H -29 C -35 74 -36 73 -36 67 V 5 C -36 -1 -35 -2 -29 -2 H -18 A 1 1 0 0 1 76 0',
+    speechBubble: 'M204.14966,175.04472c-0.31482,-15.49173 8.58161,-20.45314 15.2824,-20.45314c8.15418,0 26.20534,-0.47063 40.10194,0c6.7857,0.22981 16.64329,5.37466 16.31655,20.45314c-0.30922,14.27018 -11.32079,18.61465 -16.43145,18.61465c-4.65217,0 -12.43125,0 -21.25748,0c-2.33362,0 -8.8706,12.31777 -19.5339,11.95015c-7.56289,-0.26073 4.2991,-11.95015 1.26396,-11.95015c-9.00032,0 -15.52291,-7.83267 -15.74202,-18.61465z',
+    smile: 'M218.60708,180c0,-11.81499 9.57794,-21.39292 21.39292,-21.39292c11.81499,0 21.39292,9.57794 21.39292,21.39292c0,11.81499 -9.57794,21.39293 -21.39292,21.39293c-11.81499,0 -21.39292,-9.57794 -21.39292,-21.39293zM239.89701,196.60775c14.70959,0.07281 16.22782,-13.7612 16.22782,-13.7612h-31.54689c0,0 1.12947,13.69096 15.31907,13.7612zM247.80316,176.22994c1.59793,0 2.8933,-1.29538 2.8933,-2.8933c0,-1.59793 -1.29538,-2.8933 -2.8933,-2.8933c-1.59793,0 -2.8933,1.29538 -2.8933,2.8933c0,1.59793 1.29538,2.8933 2.8933,2.8933zM232.19685,176.22994c1.59793,0 2.8933,-1.29538 2.8933,-2.8933c0,-1.59793 -1.29538,-2.8933 -2.8933,-2.8933c-1.59793,0 -2.8933,1.29538 -2.8933,2.8933c0,1.59793 1.29538,2.8933 2.8933,2.8933z',
+    frown: 'M218.60708,180c0,-11.81499 9.57794,-21.39292 21.39292,-21.39292c11.81499,0 21.39293,9.57794 21.39293,21.39292c0,11.81499 -9.57794,21.39292 -21.39293,21.39292c-11.81498,0 -21.39292,-9.57794 -21.39292,-21.39292zM247.80316,176.22993c1.59793,0 2.89331,-1.29538 2.89331,-2.8933c0,-1.59793 -1.29537,-2.89331 -2.89331,-2.89331c-1.59793,0 -2.8933,1.29538 -2.8933,2.89331c0,1.59793 1.29537,2.8933 2.8933,2.8933zM232.19685,176.22993c1.59793,0 2.8933,-1.29538 2.8933,-2.8933c0,-1.59793 -1.29538,-2.89331 -2.8933,-2.89331c-1.59793,0 -2.8933,1.29538 -2.8933,2.89331c0,1.59793 1.29538,2.8933 2.8933,2.8933zM226.26564,193.49228h28.1715c0,0 -1.35578,-10.96285 -14.49151,-10.90515c-12.67137,0.05566 -13.67999,10.90515 -13.67999,10.90515z',
+    thinkingBubble: 'M181.625,163.75c0,-9.03599 8.31115,-16.7148 19.88037,-19.50356c3.78813,-8.33365 14.94537,-14.37144 28.11963,-14.37144c10.60583,0 19.90445,3.91305 25.10344,9.78682c1.5942,-0.18873 3.22977,-0.28682 4.89656,-0.28682c7.20482,0 13.82617,1.83268 19.04507,4.89724c0.96891,-0.09722 1.95499,-0.14724 2.95493,-0.14724c13.66905,0 24.75,9.34606 24.75,20.875c0,6.80117 -3.85625,12.84269 -9.82521,16.65396c2.12223,2.1898 3.32521,4.69056 3.32521,7.34604c0,8.62945 -12.70392,15.625 -28.375,15.625c-5.79983,0 -11.19324,-0.9582 -15.68664,-2.60279c-5.37837,3.48673 -12.44651,5.60279 -20.18836,5.60279c-2.14277,0 -4.23392,-0.1621 -6.25193,-0.4705c0.00128,0.04563 0.00193,0.09136 0.00193,0.13717c0,4.55635 -6.37994,8.25 -14.25,8.25c-7.87006,0 -14.25,-3.69365 -14.25,-8.25c0,-1.85573 1.0583,-3.56835 2.84455,-4.9466c-12.33446,-0.48405 -22.09455,-6.7775 -22.09455,-14.47006c0,-4.13493 2.81999,-7.8656 7.34397,-10.50709c-4.57145,-3.63277 -7.34397,-8.39897 -7.34397,-13.61791zM202.125,220.66667c0,2.96853 -3.52576,5.375 -7.875,5.375c-4.34924,0 -7.875,-2.40647 -7.875,-5.375c0,-2.96853 3.52576,-5.375 7.875,-5.375c4.34924,0 7.875,2.40647 7.875,5.375zM183.375,226c0,2.27818 -2.18261,4.125 -4.875,4.125c-2.69239,0 -4.875,-1.84682 -4.875,-4.125c0,-2.27818 2.18261,-4.125 4.875,-4.125c2.69239,0 4.875,1.84682 4.875,4.125z',
+    codeblock: '',
+    cloud: '',
+    heart: '',
+    check: '',
+    cross: '',
+    blank: '',
+};
+
+// TODO: make icons easier to add
+const selectableShapes = [
+    {
+        id: "smile",
+        name: "Smile",
+        path: selectablePaths.smile,
+        size: 37,
+        icon: {
+            x: -218.60707,
+            y: -158.60707,
+            width: 42.78585,
+            height: 42.78585,
+            viewBox: "-1,-1,44.78585,44.78585",
+            strokeWidth: 3
+        }
+    },
+    {
+        id: "frown",
+        name: "Frown",
+        path: selectablePaths.frown,
+        size: 37,
+        icon: {
+            x: -218.60707,
+            y: -158.60707,
+            width: 42.78585,
+            height: 42.78585,
+            viewBox: "-1,-1,44.78585,44.78585",
+            strokeWidth: 3
+        }
+    },
+    {
+        id: "speechBubble",
+        name: "Speech Bubble",
+        path: selectablePaths.speechBubble,
+        size: 50,
+        icon: {
+            x: -204.14153,
+            y: -154.38241,
+            width: 71.71694,
+            height: 51.23518,
+            viewBox: "-2,2,75.71694,55.23518",
+            strokeWidth: 7
+        }
+    },
+    {
+        id: "thinkingBubble",
+        name: "Thinking Bubble",
+        path: selectablePaths.thinkingBubble,
+        size: 65,
+        icon: {
+            x: -173.625,
+            y: -129.875,
+            width: 132.75,
+            height: 100.25,
+            viewBox: "0,0,132.75,100.25",
+            strokeWidth: 8
+        }
+    },
+    {
+        id: "sussy",
+        name: "Sussy",
+        path: selectablePaths.sussy,
+        size: 100,
+        icon: {
+            x: 0,
+            y: 0,
+            width: 20,
+            height: 20,
+            viewBox: "-36 -55 161 192",
+            strokeWidth: 14
+        }
+    },
+    {
+        id: "dragon",
+        name: "Dragon",
+        path: selectablePaths.dragon,
+        size: 100,
+        icon: {
+            x: -82.87288,
+            y: -3,
+            width: 302.64767,
+            height: 345.05044,
+            viewBox: "0,0,330.64767,360.05044",
+            strokeWidth: 26
+        }
+    },
+];
+
+export default selectableShapes;