stickers: drawing arrow + text

src/modules/Editor.js

@@ -18,6 +18,7 @@ import {
   setTitle,
 } from '$redux/user/actions';
 import { DEFAULT_PROVIDER, PROVIDERS } from '$constants/providers';
+import { STICKERS } from '$constants/stickers';
 
 export class Editor {
   constructor() {
@@ -136,7 +137,7 @@ export class Editor {
     if (!e || !e.latlng || !this.activeSticker) return;
     const { latlng } = e;
 
-    this.stickers.createSticker({ latlng, sticker: this.activeSticker });
+    this.stickers.createSticker({ latlng, sticker: this.activeSticker.sticker, set: this.activeSticker.set });
     this.setActiveSticker(null);
     this.setChanged(true);
   };
@@ -232,12 +233,18 @@ export class Editor {
 
     this.stickers.clearAll();
     if (stickers) {
-      stickers.map(sticker => this.stickers.createSticker({
-        latlng: sticker.latlng,
-        angle: parseStickerAngle({ sticker, version }),
-        sticker: parseStickerStyle({ sticker, version }),
-        text: sticker.text,
-      }));
+      stickers.map(sticker =>
+        sticker.set && STICKERS[sticker.set].url &&
+          this.stickers.createSticker({
+            latlng: sticker.latlng,
+            // angle: parseStickerAngle({ sticker, version }),
+            // sticker: parseStickerStyle({ sticker, version }),
+            angle: sticker.angle,
+            sticker: sticker.sticker,
+            set: sticker.set,
+            text: sticker.text,
+          })
+      );
     }
 
     if (owner) this.owner = owner;

src/modules/Sticker.js

@@ -10,7 +10,7 @@ import classnames from 'classnames';
 
 export class Sticker {
   constructor({
-    latlng, deleteSticker, map, lockMapClicks, sticker, triggerOnChange, angle = 2.2, text = '',
+    latlng, deleteSticker, map, lockMapClicks, sticker, set, triggerOnChange, angle = 2.2, text = '',
   }) {
     this.text = text;
     this.latlng = latlng;
@@ -18,6 +18,7 @@ export class Sticker {
     this.isDragging = false;
     this.map = map;
     this.sticker = sticker;
+    this.set = set;
     this.editable = true;
     this.triggerOnChange = triggerOnChange;
     this.direction = 'right';
@@ -38,7 +39,7 @@ export class Sticker {
           onMouseUp={this.onDragStop}
         >
           <StickerDesc value={this.text} onChange={this.setText} />
-          {this.generateStickerSVG(sticker)}
+          {this.generateStickerSVG(set, sticker)}
           <div
             className="sticker-delete"
             onMouseDown={this.onDelete}
@@ -163,20 +164,23 @@ export class Sticker {
     this.stickerArrow.style.transform = `rotate(${angle + Math.PI}rad)`;
   };
 
-  generateStickerSVG = ({ set, sticker }) => (
-    <div
-      className="sticker-image"
-      style={{
+  generateStickerSVG = (set, sticker) => {
+    return (
+      <div
+        className="sticker-image"
+        style={{
           backgroundImage: `url('${STICKERS[set].url}`,
           backgroundPosition: `${-STICKERS[set].layers[sticker].off * 72} 50%`,
         }}
-    />
-  );
+      />
+    );
+  };
 
   dumpData = () => ({
     angle: this.angle,
     latlng: { ...this.marker.getLatLng() },
     sticker: this.sticker,
+    set: this.set,
     text: this.text,
   });
 

src/modules/Stickers.js

@@ -20,7 +20,7 @@ export class Stickers {
   //   this.createSticker({ latlng });
   // };
 
-  createSticker = ({ latlng, sticker, angle = 2.2, text = '' }) => {
+  createSticker = ({ latlng, sticker, angle = 2.2, text = '', set }) => {
     const marker = new Sticker({
       latlng,
       angle,
@@ -28,6 +28,7 @@ export class Stickers {
       map: this.map,
       lockMapClicks: this.lockMapClicks,
       sticker,
+      set,
       triggerOnChange: this.triggerOnChange,
       text,
     });