Logo selecting dialog

src/components/logo/LogoDialog.jsx

@@ -0,0 +1,22 @@
+import React from 'react';
+import { LOGOS } from '$constants/logos';
+import { Icon } from '$components/panels/Icon';
+
+export class LogoDialog extends React.Component {
+  render() {
+    return (
+      <div className="helper logo-helper">
+        <div className="helper-back">
+          <Icon icon="icon-logo" size={200} />
+        </div>
+        {
+          Object.keys(LOGOS).map(logo => (
+            <div className="helper-menu-item" key={logo}>
+              {LOGOS[logo][0]}
+            </div>
+          ))
+        }
+      </div>
+    );
+  }
+}

src/components/panels/EditorDialog.jsx

@@ -1,9 +1,10 @@
 import React from 'react';
 import { MODES } from '$constants/modes';
 
-import { RouterHelper } from '$components/router/RouterHelper';
-import { StickersHelper } from '$components/stickers/StickersHelper';
-import { TrashHelper } from '$components/trash/TrashHelper';
+import { RouterDialog } from '$components/router/RouterDialog';
+import { StickersDialog } from '$components/stickers/StickersDialog';
+import { TrashDialog } from '$components/trash/TrashDialog';
+import { LogoDialog } from '$components/logo/LogoDialog';
 
 export const EditorDialog = ({
   mode, routerPoints, editor, activeSticker
@@ -12,14 +13,16 @@ export const EditorDialog = ({
     mode === MODES.ROUTER
     || (mode === MODES.STICKERS && !activeSticker)
     || mode === MODES.TRASH
+    || mode === MODES.LOGO
   );
 
   return (
     showDialog &&
       <div id="control-dialog">
-        { mode === MODES.ROUTER && <RouterHelper routerPoints={routerPoints} editor={editor} /> }
-        { mode === MODES.STICKERS && <StickersHelper editor={editor} /> }
-        { mode === MODES.TRASH && <TrashHelper editor={editor} /> }
+        { mode === MODES.ROUTER && <RouterDialog routerPoints={routerPoints} editor={editor} /> }
+        { mode === MODES.STICKERS && <StickersDialog editor={editor} /> }
+        { mode === MODES.TRASH && <TrashDialog editor={editor} /> }
+        { mode === MODES.LOGO && <LogoDialog editor={editor} /> }
       </div>
   );
 };

src/components/panels/EditorPanel.jsx

@@ -18,6 +18,8 @@ export class EditorPanel extends React.PureComponent {
 
   startTrashMode = () =>  this.props.editor.changeMode(MODES.TRASH);
 
+  startLogoMode = () => this.props.editor.changeMode(MODES.LOGO);
+
   render() {
     const {
       mode, routerPoints, editor, totalDistance, estimateTime, activeSticker
@@ -97,6 +99,13 @@ export class EditorPanel extends React.PureComponent {
               <Icon icon="icon-trash" />
             </button>
 
+            <button
+              className={classnames({ active: mode === MODES.LOGO })}
+              onClick={this.startLogoMode}
+            >
+              <Icon icon="icon-logo" />
+            </button>
+
             <button
               className="highlighted"
             >

src/components/router/RouterDialog.jsx

@@ -45,7 +45,7 @@ const draggablePoints = ({ cancelDrawing, submitDrawing }) => (
   </div>
 );
 
-export class RouterHelper extends React.Component {
+export class RouterDialog extends React.Component {
   cancelDrawing = () => {
     this.props.editor.router.cancelDrawing();
   };

src/components/stickers/StickersDialog.jsx

@@ -3,7 +3,7 @@ import React from 'react';
 import { stickers } from '$constants/stickers';
 import sprite from '$sprites/stickers.svg';
 
-export class StickersHelper extends React.Component {
+export class StickersDialog extends React.Component {
   render() {
     return (
       <div className="helper stickers-helper">

src/components/trash/TrashDialog.jsx

@@ -2,7 +2,7 @@ import React from 'react';
 
 import { MODES } from '$constants/modes';
 
-export class TrashHelper extends React.Component {
+export class TrashDialog extends React.Component {
   clearPoly = () => {
     this.props.editor.poly.clearAll();
     this.props.editor.changeMode(MODES.NONE);

src/constants/logos.js

@@ -0,0 +1,10 @@
+export const LOGOS = {
+  default: ['Без логотипа', null, 'bottom-right'],
+  nvs: ['НВС', '/misc/lgo.png', 'bottom-right'],
+  pinmix: ['Пин-Микс', '/misc/pin-mix.png', 'top-right'],
+  jolly: ['Пин-Микс + JW', '/misc/jw.png', 'top-right'],
+  pedals: ['Усталые Педальки', '/misc/pedals.png', 'bottom-right'],
+  rider: ['Райдер', '/misc/rider.png', 'bottom-right'],
+  // rider_evening: ['Вечерние городские', '/misc/rider_evening.png', 'top-right'],
+  // fas: ['Алкоспорт', '/misc/fas.png', 'bottom-right'],
+};

src/constants/modes.js

@@ -5,4 +5,5 @@ export const MODES = {
   SHOTTER: 'SHOTTER',
   TRASH: 'TRASH',
   NONE: 'NONE',
+  LOGO: 'LOGO',
 };

src/modules/Editor.js

@@ -4,6 +4,7 @@ import { MODES } from '$constants/modes';
 import { Stickers } from '$modules/Stickers';
 import { Router } from '$modules/Router';
 import { Shotter } from '$modules/Shotter';
+import { LOGOS } from '$constants/logos';
 
 export class Editor {
   constructor({
@@ -71,7 +72,7 @@ export class Editor {
 
   changeMode = mode => {
     if (this.mode === mode) {
-      if (this.switches[mode].toggle) {
+      if (this.switches[mode] && this.switches[mode].toggle) {
         this.switches[mode].toggle(); // if we have special function on mode when it toggles
       } else {
         this.disableMode(mode);

src/sprites/icon.svg

@@ -39,7 +39,7 @@
         </g>
 
         <g id="icon-trash">
-            <g transform="matrix(4.2 0 0 4.2 -3 -2  )" stroke="none">
+            <g transform="matrix(4.6 0 0 4.6 -4 -4)" stroke="none">
                 <path fill="white" d="M2.783 3.626h2.923v2.923H2.783z"/>
                 <path fill="white" d="M2.479 2.597h3.508v.748H2.479z"/>
                 <path fill="white" d="M3.438 1.919h1.473v.865H3.438z"/>
@@ -94,6 +94,7 @@
                     <path id="rect4978" stroke-width="1.405" d="M4.958 3.906h.444v2.315h-.444z"/>
                 </g>
             </g>
+
             <g id="g5188" transform="translate(-96)">
                 <path id="rect5180" stroke-opacity=".941" stroke-width=".265" d="M0 0h32v32H0z"/>
                 <g id="g5322" fill="#fff" transform="translate(7.066 7.065) scale(.04494)">
@@ -116,6 +117,18 @@
                     </g>
                 </g>
             </g>
+
+            <g id="icon-logo">
+                <path fill="black" stroke="none" d="M0 0h32v32H0z"/>
+                <g transform="matrix(1 0 0 1 2 -1)">
+                    <path fill="none" stroke="#fff" stroke-width="2" d="M23.423 9.284c-6.673-4.127-12.713-4.175-19.269 0 .174 4.944-.354 13.294 9.635 17.855 10.323-4.9 9.545-13.305 9.634-17.855z"/>
+                    <path fill="#fff" stroke="none" d="M13.435 5.925v21.037s10.695-3.27 9.988-17.678c0 0-3.447-2.828-9.988-3.359z"/>
+                    <path fill="none" stroke-width="2" stroke="#fff" d="M5.773 15.118L15.7 6.19"/>
+                    <path fill="none" stroke-width="2" stroke="#fff" d="M6.276 20.333l7.778-7.778"/>
+                    <path fill="none" stroke-width="2" stroke="#fff" d="M8.574 23.691c.442-.53 5.612-5.612 5.612-5.612"/>
+                    <path fill="none" stroke-width="2" stroke="#fff" d="M11.932 25.636l2.343-2.342"/>
+                </g>
+            </g>
         </svg>
     </defs>
 </svg>

src/sprites/icons_draft.svg

@@ -26,11 +26,11 @@
      borderopacity="1.0"
      inkscape:pageopacity="0"
      inkscape:pageshadow="2"
-     inkscape:zoom="1"
-     inkscape:cx="2.6244114"
-     inkscape:cy="33.722"
+     inkscape:zoom="11.313708"
+     inkscape:cx="-2.2387215"
+     inkscape:cy="4.6847445"
      inkscape:document-units="px"
-     inkscape:current-layer="g5360"
+     inkscape:current-layer="svg8"
      showgrid="false"
      inkscape:window-width="1920"
      inkscape:window-height="1036"
@@ -326,7 +326,8 @@
     </g>
   </g>
   <g
-     id="g5360">
+     id="g5360"
+     transform="translate(-128)">
     <rect
        y="0"
        x="0"
@@ -469,4 +470,49 @@
          style="fill:#ffffff" />
     </g>
   </g>
+  <g
+     id="icon-logo">
+    <rect
+       style="opacity:1;fill:#000000;fill-opacity:1;stroke:none;stroke-width:0.26458332;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:0.94117647"
+       id="rect5611"
+       width="32"
+       height="32"
+       x="0"
+       y="0" />
+    <g
+       id="g5792"
+       transform="matrix(0.77498581,0,0,0.77498581,5.3156895,3.0643897)">
+      <path
+         sodipodi:nodetypes="cccc"
+         inkscape:connector-curvature="0"
+         id="path5774"
+         d="m 23.422912,9.2841946 c -6.673016,-4.1271355 -12.713117,-4.1751388 -19.2686597,0 C 4.3276468,14.227863 3.7999932,22.578308 13.788583,27.138641 24.112354,22.238283 23.334112,13.834188 23.422912,9.2841946 Z"
+         style="fill:none;fill-rule:evenodd;stroke:#ffffff;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1" />
+      <path
+         inkscape:connector-curvature="0"
+         id="path5776"
+         d="M 13.435029,5.9254374 V 26.961864 c 0,0 10.69499,-3.270369 9.987883,-17.6776694 0,0 -3.447145,-2.8284271 -9.987883,-3.3587572 z"
+         style="fill:#ffffff;fill-rule:evenodd;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1" />
+      <path
+         inkscape:connector-curvature="0"
+         id="path5778"
+         d="M 4.7729708,15.117826 13.700194,6.1906024"
+         style="fill:none;fill-rule:evenodd;stroke:#ffffff;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1" />
+      <path
+         inkscape:connector-curvature="0"
+         id="path5780"
+         d="M 6.2755727,20.332738 14.053747,12.554563"
+         style="fill:none;fill-rule:evenodd;stroke:#ffffff;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1" />
+      <path
+         inkscape:connector-curvature="0"
+         id="path5782"
+         d="m 8.5736697,23.691495 c 0.4419418,-0.53033 5.6126603,-5.61266 5.6126603,-5.61266"
+         style="fill:none;fill-rule:evenodd;stroke:#ffffff;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1" />
+      <path
+         inkscape:connector-curvature="0"
+         id="path5784"
+         d="m 11.932427,25.636039 2.342291,-2.342291"
+         style="fill:none;fill-rule:evenodd;stroke:#ffffff;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1" />
+    </g>
+  </g>
 </svg>

src/styles/panel.less

@@ -131,3 +131,34 @@
   display: flex;
   align-items: center;
 }
+
+.logo-helper {
+  width: 200px;
+  flex-direction: column;
+  padding: 16px 0 0 0;
+  position: relative;
+  overflow: hidden;
+}
+
+.helper-back {
+  width: 200px;
+  height: 200px;
+  z-index: -1;
+  position: absolute;
+  bottom: 0;
+  right: 0;
+
+  svg {
+    fill: #333333;
+  }
+}
+
+.helper-menu-item {
+  padding: 8px 20px;
+  user-select: none;
+  cursor: pointer;
+
+  &:hover {
+    background: rgba(255, 255, 255, 0.1);
+  }
+}