editor - viewer buttons

src/components/panels/UserPanel.jsx

@@ -56,7 +56,7 @@ export class UserPanel extends React.PureComponent {
 
   render() {
     const {
-      props: { user, userLogout },
+      props: { user, userLogout, editor, editing },
       state: { menuOpened },
     } = this;
 
@@ -74,6 +74,26 @@ export class UserPanel extends React.PureComponent {
               <UserMenu user={user} userLogout={userLogout} />
             }
           </div>
+
+          <div className="control-sep" />
+
+          <div className="control-bar">
+            {
+              editing
+              ?
+                <button>
+                  <span>
+                    РЕДАКТОР
+                  </span>
+                </button>
+              : <button>
+                  <span>
+                    ПРОСМОТР
+                  </span>
+                </button>
+            }
+
+          </div>
         </div>
       </div>
     );

src/containers/App.jsx

@@ -14,6 +14,7 @@ import { getUrlData, pushPath } from '$utils/history';
 export class App extends React.Component {
   state = {
     mode: 'none',
+    editing: false,
     logo: DEFAULT_LOGO,
     routerPoints: 0,
     totalDistance: 0,
@@ -93,6 +94,11 @@ export class App extends React.Component {
     this.setState({ logo });
   };
 
+  setEditing = editing => {
+    console.log('editing', editing);
+    this.setState({ editing });
+  };
+
   editor = new Editor({
     container: 'map',
     mode: this.state.mode,
@@ -101,6 +107,7 @@ export class App extends React.Component {
     setTotalDist: this.setTotalDist,
     setActiveSticker: this.setActiveSticker,
     setLogo: this.setLogo,
+    setEditing: this.setEditing,
   });
 
   authInit = () => {
@@ -155,7 +162,7 @@ export class App extends React.Component {
     const {
       editor,
       state: {
-        mode, routerPoints, totalDistance, estimateTime, activeSticker, logo, user,
+        mode, routerPoints, totalDistance, estimateTime, activeSticker, logo, user, editing,
       },
     } = this;
 
@@ -167,6 +174,8 @@ export class App extends React.Component {
         <UserLocation editor={editor} />
 
         <UserPanel
+          editor={editor}
+          editing={editing}
           user={user}
           setUser={this.setUser}
           userLogout={this.userLogout}

src/modules/Editor.js

@@ -17,6 +17,7 @@ export class Editor {
     setTotalDist,
     setActiveSticker,
     setLogo,
+    setEditing,
   }) {
     this.logo = DEFAULT_LOGO;
     this.owner = null;
@@ -63,6 +64,7 @@ export class Editor {
     this.setActiveSticker = setActiveSticker;
     this.setLogo = setLogo;
     this.setMode = setMode;
+    this.setEditing = setEditing;
     this.mode = mode;
 
     map.addEventListener('mouseup', this.onClick);
@@ -196,11 +198,13 @@ export class Editor {
   startEditing = () => {
     this.poly.poly.enableEdit();
     this.stickers.startEditing();
+    this.setEditing(true);
   };
 
   stopEditing = () => {
     this.poly.poly.disableEdit();
     this.stickers.stopEditing();
+    this.setEditing(false);
   };
 
   dumpData = () => ({

src/modules/Sticker.js

@@ -92,6 +92,7 @@ export class Sticker {
   };
 
   estimateAngle = e => {
+    console.log('est');
     const { x, y } = this.element.getBoundingClientRect();
     const { pageX, pageY } = e;
     this.angle = Math.atan2((y - pageY), (x - pageX));

src/styles/stickers.less

@@ -2,6 +2,11 @@
   outline: none;
   position: relative;
   transition: transform 250ms;
+  cursor: pointer;
+
+  &.leaflet-drag-target {
+    transition: none !important;
+  }
 
   &:before {
     content: ' ';