Climbing mock points

src/components/FeaturePanel/Climbing/Editor/MockedPoints.tsx

@@ -0,0 +1,59 @@
+import React from 'react';
+import { useClimbingContext } from '../contexts/ClimbingContext';
+import { machine } from 'node:os';
+import { PointWithType } from './PointWithType';
+
+const data = [
+  {
+    x: 0.1,
+    y: 0.4,
+    type: 'piton',
+    units: 'percentage' as const,
+  },
+  {
+    x: 0.2,
+    y: 0.5,
+    type: 'bolt',
+    units: 'percentage' as const,
+  },
+];
+
+export const MockedPoints = () => {
+  const { isEditMode, getPixelPosition, mockedPoints, getMachine } =
+    useClimbingContext();
+  const machine = getMachine();
+
+  console.log('___', mockedPoints);
+  return (
+    <>
+      {mockedPoints.map((point) => {
+        const position = getPixelPosition({
+          x: point.x,
+          y: point.y,
+          units: 'percentage',
+        });
+
+        return (
+          <PointWithType
+            key={`mocked-point-${point.x}-${point.y}`}
+            isOtherRouteSelected={false}
+            isRouteSelected={true}
+            isPointSelected={true}
+            isWithOffset={isEditMode}
+            isPulsing={false}
+            onMarkedPointClick={() => {}}
+            x={position.x}
+            y={position.y}
+            isEditMode={isEditMode}
+            type={point.type}
+            onPointClick={() => {
+              console.log('___!!');
+              machine.execute('showPointMenu');
+            }}
+            pointIndex={0}
+          />
+        );
+      })}
+    </>
+  );
+};

src/components/FeaturePanel/Climbing/Editor/PointWithType.tsx

@@ -0,0 +1,96 @@
+import React from 'react';
+import { PulsedPoint } from './Points/PulsedPoint';
+import { Bolt } from './Points/Bolt';
+import { Piton } from './Points/Piton';
+import { Sling } from './Points/Sling';
+import { Anchor } from './Points/Anchor';
+import { UnfinishedPoint } from './Points/UnfinishedPoint';
+import { Point } from './Points/Point';
+
+export const PointWithType = ({
+  onPointClick,
+  type,
+  x,
+  y,
+  isOtherRouteSelected,
+  isRouteSelected,
+  isPointSelected,
+  onMarkedPointClick,
+  isPulsing,
+  isEditMode,
+  isWithOffset,
+  pointIndex,
+  routeNumber,
+}) => {
+  const xOffset = isWithOffset ? 15 : 0;
+
+  const isBoltVisible = !isOtherRouteSelected && type === 'bolt';
+  const isAnchorVisible = !isOtherRouteSelected && type === 'anchor';
+  const isSlingVisible = !isOtherRouteSelected && type === 'sling';
+  const isPitonVisible = !isOtherRouteSelected && type === 'piton';
+  const isUnfinishedPointVisible =
+    !isOtherRouteSelected && type === 'unfinished';
+
+  const pointerEvents = isRouteSelected || isEditMode ? 'auto' : 'none';
+  return (
+    <React.Fragment>
+      {isPulsing && <PulsedPoint x={x} y={y} />}
+
+      {isBoltVisible && (
+        <Bolt
+          x={x + xOffset}
+          y={y}
+          isPointSelected={isPointSelected}
+          pointerEvents={pointerEvents}
+          onClick={onMarkedPointClick}
+        />
+      )}
+      {isPitonVisible && (
+        <Piton
+          x={x + xOffset}
+          y={y}
+          isPointSelected={isPointSelected}
+          pointerEvents={pointerEvents}
+          onClick={onMarkedPointClick}
+        />
+      )}
+      {isSlingVisible && (
+        <Sling
+          x={x}
+          y={y}
+          isPointSelected={isPointSelected}
+          pointerEvents={pointerEvents}
+          onClick={onMarkedPointClick}
+        />
+      )}
+      {isAnchorVisible && (
+        <Anchor
+          x={x + xOffset}
+          y={y}
+          isPointSelected={isPointSelected}
+          pointerEvents={pointerEvents}
+          onClick={onMarkedPointClick}
+        />
+      )}
+      {isUnfinishedPointVisible && (
+        <UnfinishedPoint
+          x={x + xOffset}
+          y={y}
+          isPointSelected={isPointSelected}
+          pointerEvents={pointerEvents}
+          onClick={onMarkedPointClick}
+        />
+      )}
+      <Point
+        x={x}
+        y={y}
+        type={type}
+        isRouteSelected={isRouteSelected}
+        isOtherRouteSelected={isOtherRouteSelected}
+        onPointInSelectedRouteClick={onPointClick}
+        index={pointIndex}
+        routeNumber={routeNumber}
+      />
+    </React.Fragment>
+  );
+};

src/components/FeaturePanel/Climbing/Editor/Points/Point.tsx

@@ -41,14 +41,27 @@ const usePointColor = (type, isHovered) => {
   };
 };
 
+type PointType = {
+  x: number;
+  y: number;
+  onPointInSelectedRouteClick: (e: any) => void;
+  type: any;
+  index: number;
+  routeNumber?: number;
+  isRouteSelected: boolean;
+  isOtherRouteSelected: boolean;
+};
+
 export const Point = ({
   x,
   y,
   onPointInSelectedRouteClick,
   type,
   index,
   routeNumber,
-}) => {
+  isRouteSelected,
+  isOtherRouteSelected,
+}: PointType) => {
   const [isHovered, setIsHovered] = useState(false);
   const {
     setPointSelectedIndex,
@@ -61,17 +74,13 @@ export const Point = ({
     photoZoom,
     getCurrentPath,
     setIsPanningDisabled,
-    isRouteSelected,
     isPointSelected,
-    isOtherRouteSelected,
     isEditMode,
   } = useClimbingContext();
   const isMobileMode = useMobileMode();
-  const isSelected = isRouteSelected(routeNumber);
-  const isOtherSelected = isOtherRouteSelected(routeNumber);
   const { pointColor, pointStroke } = usePointColor(type, isHovered);
 
-  const isPointOnRouteSelected = isSelected && isPointSelected(index);
+  const isPointOnRouteSelected = isRouteSelected && isPointSelected(index);
 
   const onPointClick = (e) => {
     e.stopPropagation();
@@ -80,7 +89,7 @@ export const Point = ({
   const onPointMouseEnter = () => {
     setIsHovered(true);
     const isLastPoint = getCurrentPath().length - 1 === index;
-    if (!isLastPoint) {
+    if (!isLastPoint && routeNumber) {
       setRouteIndexHovered(routeNumber);
     }
   };
@@ -130,13 +139,13 @@ export const Point = ({
   };
   const title = type && <title>{type}</title>;
 
-  if (isOtherSelected && isEditMode)
+  if (isOtherRouteSelected && isEditMode)
     return (
       <g transform={`translate(${x},${y}) scale(${1 / photoZoom.scale})`}>
         <circle cx={0} cy={0} r={2.5 * photoZoom.scale} fill="white" />
       </g>
     );
-  if (!isSelected || !isEditMode) return null;
+  if (!isRouteSelected || !isEditMode) return null;
 
   return (
     <g transform={`translate(${x},${y}) scale(${1 / photoZoom.scale})`}>