refactor: extract derived signals

ooooorobo · Dec 19, 2023 · f9b0760 · f9b0760
1 parent ff3bc87
commit f9b0760
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 9 deletions.
diff --git a/src/components/MarkerView.tsx b/src/components/MarkerView.tsx
@@ -12,16 +12,28 @@ type Props = {
 export const MarkerView = ({ data, initialMarked, onClickMarker }: Props) => {
   const [marked, setMarked] = createSignal(initialMarked);
   const imageUrl = DefaultMarkerImageMap[data.type];
+  const zoomScale = () => getZoomScale(level());
+  const markerSize = () => 36 * getZoomScale(level());
+  const xPos = () => mapLeftTop().x + data.position.x * zoomScale() - markerSize() / 2,
+    yPos = () => mapLeftTop().y + data.position.y * zoomScale() - markerSize() / 2;
   return (
     <div
       class={`marker ${marked() ? 'marked' : ''}`}
       onClick={() => {
         setMarked(prev => !prev);
         onClickMarker(data.id);
       }}
-      style={{
-        transform: `translate(${mapLeftTop().x + data.position.x * getZoomScale(level()) - 12}px, ${mapLeftTop().y + data.position.y * getZoomScale(level()) - 12}px)`,
-      }}
-    >{imageUrl ? <img src={imageUrl} alt={data.type} width={'24px'} height={'24px'} /> : data.type}</div>
+      style={{ transform: `translate(${xPos()}px, ${yPos()}px)` }}
+    >
+      {imageUrl ?
+        <img
+          draggable={'false'}
+          src={imageUrl}
+          alt={data.type}
+          width={markerSize()}
+          height={markerSize()}
+        /> : data.type
+      }
+    </div>
   );
 };
diff --git a/src/page/map.css b/src/page/map.css
@@ -34,16 +34,12 @@
 }
 
 .marker_layer .marker {
-    /*width: var(--marker-size);*/
-    height: var(--marker-size);
     position: absolute;
     border-radius: 999px;
-    background-color: darkgray;
     color: black;
     padding: 0 4px;
 }
 
 .marker.marked {
-    background-color: lightgray;
-    color: #888;
+    opacity: 30%;
 }