passing editing status to map

src/containers/map/Map/index.tsx

@@ -1,30 +1,46 @@
 import { Map as MapInterface, map } from "leaflet";
 import * as React from "react";
 import { createPortal } from "react-dom";
-import { MapContext } from "$utils/context.ts";
-import { selectMapProvider, selectMapRoute, selectMapStickers } from "$redux/map/selectors";
+import {
+  selectMapProvider,
+  selectMapRoute,
+  selectMapStickers
+} from "$redux/map/selectors";
 import { connect } from "react-redux";
 import * as MAP_ACTIONS from "$redux/map/actions";
 
 import { Route } from "$containers/map/Route";
 import { TileLayer } from "$containers/map/TileLayer";
 import { Stickers } from "$containers/map/Stickers";
+import { selectUserEditing } from '$redux/user/selectors'
 
 const mapStateToProps = state => ({
   provider: selectMapProvider(state),
   route: selectMapRoute(state),
   stickers: selectMapStickers(state),
+  editing: selectUserEditing(state),
 });
 
 const mapDispatchToProps = {
-  mapSetRoute: MAP_ACTIONS.mapSetRoute
+  mapSetRoute: MAP_ACTIONS.mapSetRoute,
+  mapDropSticker: MAP_ACTIONS.mapDropSticker,
+  mapSetSticker: MAP_ACTIONS.mapSetSticker
 };
 
 type IProps = React.HTMLAttributes<HTMLDivElement> &
   ReturnType<typeof mapStateToProps> &
   typeof mapDispatchToProps & {};
 
-const MapUnconnected: React.FC<IProps> = ({ provider, route, mapSetRoute, stickers }) => {
+const MapUnconnected: React.FC<IProps> = ({
+  provider,
+  route,
+  stickers,
+  editing,
+
+  mapSetRoute,
+  mapSetSticker,
+  mapDropSticker
+}) => {
   const ref = React.useRef(null);
   const [maps, setMaps] = React.useState<MapInterface>(null);
 
@@ -34,13 +50,17 @@ const MapUnconnected: React.FC<IProps> = ({ provider, route, mapSetRoute, sticke
     setMaps(map(ref.current).setView([55.0153275, 82.9071235], 13));
   }, [ref]);
 
-  // console.log('RERENDER!');
-
   return createPortal(
     <div ref={ref}>
-        <TileLayer provider={provider} map={maps} />
-        <Route route={route} mapSetRoute={mapSetRoute} map={maps} is_editing />
-        <Stickers stickers={stickers} map={maps} is_editing />
+      <TileLayer provider={provider} map={maps} />
+      <Route route={route} mapSetRoute={mapSetRoute} map={maps} is_editing={editing} />
+      <Stickers
+        stickers={stickers}
+        map={maps}
+        mapSetSticker={mapSetSticker}
+        mapDropSticker={mapDropSticker}
+        is_editing={editing}
+      />
     </div>,
     document.getElementById("canvas")
   );

src/containers/map/Sticker/index.tsx

@@ -10,27 +10,35 @@ import { createPortal } from "react-dom";
 interface IProps {
   map: Map;
   sticker: IStickerDump;
+  index: number;
+  is_editing: boolean;
+
+  mapSetSticker: (index: number, sticker: IStickerDump) => void;
+  mapDropSticker: (index: number) => void;
 }
 
-const preventPropagation = (e): void => {
-  if (!e || !e.stopPropagation) return;
-
-  e.stopPropagation();
-  e.preventDefault();
-};
+export const getLabelDirection = (angle: number): "left" | "right" =>
+  angle % Math.PI >= -(Math.PI / 2) && angle % Math.PI <= Math.PI / 2
+    ? "left"
+    : "right";
 
 const getX = e =>
   e.touches && e.touches.length > 0
     ? { pageX: e.touches[0].pageX, pageY: e.touches[0].pageY }
     : { pageX: e.pageX, pageY: e.pageY };
 
-const Sticker: React.FC<IProps> = ({ map, sticker }) => {
+const Sticker: React.FC<IProps> = ({ map, sticker, index, mapSetSticker, mapDropSticker, is_editing }) => {
   const [layer, setLayer] = React.useState<Marker>(null);
   const [dragging, setDragging] = React.useState(false);
+  const [angle, setAngle] = React.useState(sticker.angle);
 
+  const element = React.useMemo(() => document.createElement("div"), []);
   const stickerArrow = React.useRef(null);
   const stickerImage = React.useRef(null);
 
+  const onChange = React.useCallback(state => mapSetSticker(index, state), [mapSetSticker, index]);
+  const onDelete = React.useCallback(state => mapDropSticker(index), [mapSetSticker, index]);
+
   const onDragStart = React.useCallback(() => {
     layer.dragging.disable();
     map.dragging.disable();
@@ -43,29 +51,76 @@ const Sticker: React.FC<IProps> = ({ map, sticker }) => {
     map.dragging.enable();
 
     setDragging(false);
-  }, [setDragging, layer, map]);
+    onChange({
+      ...sticker,
+      angle
+    });
+  }, [setDragging, layer, map, sticker, angle]);
 
-  const onDrag = React.useCallback(event => {
-    // event.stopPrapagation();
-    // console.log("drag")
-  }, []);
+  const onMoveFinished = React.useCallback(event => {
+    const target = event.target as Marker;
 
-  const onDelete = console.log;
-  const setText = console.log;
+    onChange({
+      ...sticker,
+      latlng: target.getLatLng(),
+    });
+  }, [onChange, sticker]);
 
-  const direction = React.useMemo(() => "left", [sticker.angle]);
+  const onDrag = React.useCallback(
+    event => {
+      if (!element) return;
 
-  const element = React.useMemo(() => document.createElement("div"), []);
+      const { x, y } = element.getBoundingClientRect() as DOMRect;
+      const { pageX, pageY } = getX(event);
 
+      setAngle(parseFloat(Math.atan2(y - pageY, x - pageX).toFixed(2)));
+    },
+    [element]
+  );
+
+  const onTextChange = React.useCallback(text => onChange({
+    ...sticker, 
+    text,
+  }), [sticker, onChange])
+
+  const direction = React.useMemo(() => getLabelDirection(angle), [angle]);
+
+  // Updates html element accroding to current angle
+  React.useEffect(() => {
+    if (!stickerImage.current || !stickerArrow.current) return;
+
+    const x = Math.cos(angle + Math.PI) * 56 - 30;
+    const y = Math.sin(angle + Math.PI) * 56 - 30;
+
+    stickerImage.current.style.left = String(6 + x);
+    stickerImage.current.style.top = String(6 + y);
+
+    stickerArrow.current.style.transform = `rotate(${angle + Math.PI}rad)`;
+  }, [stickerArrow, stickerImage, angle]);
+
+  // Attaches onMoveFinished event to item
+  React.useEffect(() => {
+    if (!layer) return;
+
+    layer.addEventListener("dragend", onMoveFinished);
+
+    return () => layer.removeEventListener("dragend", onMoveFinished);
+  }, [layer, onMoveFinished]);
+
+  // Attaches and detaches handlers when user starts dragging
   React.useEffect(() => {
     if (dragging) {
       document.addEventListener("mousemove", onDrag);
-      document.addEventListener("mouseUp", onDragStop);
+      document.addEventListener("mouseup", onDragStop);
     }
 
-    return () => document.removeEventListener("mousemove", onDrag);
+    return () => {
+      document.removeEventListener("mousemove", onDrag);
+      document.removeEventListener("mouseup", onDragStop);
+    };
   }, [dragging, onDrag]);
 
+  // Initial leaflet marker creation, when element (dom element div) is ready
   React.useEffect(() => {
     if (!map) return;
 
@@ -75,12 +130,24 @@ const Sticker: React.FC<IProps> = ({ map, sticker }) => {
     });
 
     const item = marker(sticker.latlng, { icon, draggable: true }).addTo(map);
-
+    
     setLayer(item);
 
-    return () => item.removeFrom(map);
+    return () => {
+      item.removeFrom(map);
+      item.remove();
+    }
   }, [element, map, sticker]);
 
+  React.useEffect(() => {
+    if (is_editing) {
+      element.className = 'sticker-container';
+
+    } else {
+      element.className = 'sticker-container inactive';
+
+    }
+  }, [element, is_editing])
   return createPortal(
     <React.Fragment>
       <div className="sticker-arrow" ref={stickerArrow} />
@@ -88,7 +155,7 @@ const Sticker: React.FC<IProps> = ({ map, sticker }) => {
         className={classNames(`sticker-label ${direction}`, {})}
         ref={stickerImage}
       >
-        <StickerDesc value={sticker.text} onChange={setText} />
+        <StickerDesc value={sticker.text} onChange={onTextChange} />
 
         <div
           className="sticker-image"

src/containers/map/Stickers/index.tsx

@@ -1,39 +1,47 @@
 import * as React from "react";
 import { IStickerDump } from "$modules/Sticker";
-import { Layer, FeatureGroup, Map } from "leaflet";
-import { MapContext } from "$utils/context";
+import { FeatureGroup, Map } from "leaflet";
 import { Sticker } from "$containers/map/Sticker";
+import { mapSetSticker, mapDropSticker } from "$redux/map/actions";
 
 interface IProps {
   stickers: IStickerDump[];
   is_editing: boolean;
   map: Map;
+  mapSetSticker: typeof mapSetSticker;
+  mapDropSticker: typeof mapDropSticker;
 }
 
 // const { FC, useContext, useState, useEffect } = React;
 
-const Stickers: React.FC<IProps> = React.memo(({ stickers, is_editing, map }) => {
-  const [layer, setLayer] = React.useState<FeatureGroup>(null);
+const Stickers: React.FC<IProps> = React.memo(
+  ({ stickers, is_editing, map, mapSetSticker, mapDropSticker }) => {
+    const [layer, setLayer] = React.useState<FeatureGroup>(null);
 
-  React.useEffect(() => {
-    if (!map) return;
+    React.useEffect(() => {
+      if (!map) return;
 
-    setLayer(new FeatureGroup().addTo(map));
-  }, [map]);
+      setLayer(new FeatureGroup().addTo(map));
+    }, [map]);
 
-  return (
-    <div>
-      {layer &&
-        stickers.map((sticker, index) => (
-          <Sticker
-            map={map}
-            sticker={sticker}
-            key={`${sticker.set}.${sticker.sticker}.${index}`}
-          />
-        ))}
-    </div>
-  );
-  // return null;
-});
+    return (
+      <div>
+        {layer &&
+          stickers.map((sticker, index) => (
+            <Sticker
+              map={map}
+              sticker={sticker}
+              key={`${sticker.set}.${sticker.sticker}.${index}`}
+              index={index}
+              is_editing={is_editing}
+              mapSetSticker={mapSetSticker}
+              mapDropSticker={mapDropSticker}
+            />
+          ))}
+      </div>
+    );
+    // return null;
+  }
+);
 
 export { Stickers };