climbing: add unfinished point type (#237)

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

@@ -20,9 +20,11 @@ const PointElement = styled.circle<{ isHovered: boolean }>`
 
 const usePointColor = (type, isHovered) => {
   const config = useConfig();
+  const invisiblePointsForTypes = ['bolt', 'piton', 'unfinished'];
 
-  if (type === 'bolt' || type === 'piton')
+  if (invisiblePointsForTypes.includes(type))
     return { pointColor: 'transparent', pointStroke: 'transparent' };
+
   if (isHovered)
     return {
       pointColor: config.pathBorderColor,

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

@@ -0,0 +1,43 @@
+import React from 'react';
+import { useClimbingContext } from '../../contexts/ClimbingContext';
+import { useConfig } from '../../config';
+import { PointProps } from './pointTypes';
+
+export const UnfinishedPoint = ({
+  x,
+  y,
+  isPointSelected,
+  onClick,
+  pointerEvents,
+}: PointProps) => {
+  const { isEditMode, photoZoom } = useClimbingContext();
+  const config = useConfig();
+  const strokeWidth = 1;
+  const size = 12;
+  const dx = x - size / 2 - strokeWidth / 2;
+  const dy = y + size / 2 + strokeWidth / 2;
+  const foregroundColor = isPointSelected
+    ? config.anchorColorSelected
+    : config.anchorColor;
+  const borderColor = isPointSelected
+    ? config.anchorBorderColorSelected
+    : config.anchorBorderColor;
+
+  return (
+    <g
+      transform={`translate(${dx} ${dy}) scale(${1 / photoZoom.scale})`}
+      cursor={!isEditMode && 'help'}
+      onClick={onClick}
+    >
+      <polygon
+        stroke={borderColor}
+        fill={foregroundColor}
+        pointerEvents={pointerEvents}
+        strokeWidth={strokeWidth}
+        points={`0,0 ${size},0 ${size / 2},-${size}`}
+      >
+        <title>Unfinished point</title>
+      </polygon>
+    </g>
+  );
+};

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

@@ -116,6 +116,13 @@ export const RouteFloatingMenu = () => {
             >
               Piton
             </Button>
+            <Button
+              onClick={() => {
+                onPointTypeChange('unfinished');
+              }}
+            >
+              Unfinished
+            </Button>
             <Button
               onClick={() => {
                 onPointTypeChange(null);

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

@@ -7,6 +7,7 @@ import { Sling } from './Points/Sling';
 import { useClimbingContext } from '../contexts/ClimbingContext';
 import { Anchor } from './Points/Anchor';
 import { ClimbingRoute } from '../types';
+import { UnfinishedPoint } from './Points/UnfinishedPoint';
 
 type Props = {
   route: ClimbingRoute;
@@ -55,6 +56,7 @@ export const RouteMarks = ({
         const isAnchorVisible = type === 'anchor';
         const isSlingVisible = type === 'sling';
         const isPitonVisible = type === 'piton';
+        const isUnfinishedPointVisible = type === 'unfinished';
         const position = getPixelPosition({ x, y, units: 'percentage' });
         const isActualPointSelected = isSelected && isPointSelected(index);
         const pointerEvents = isSelected ? 'auto' : 'none';
@@ -104,6 +106,15 @@ export const RouteMarks = ({
                 onClick={handleClick}
               />
             )}
+            {isUnfinishedPointVisible && (
+              <UnfinishedPoint
+                x={position.x}
+                y={position.y}
+                isPointSelected={isActualPointSelected}
+                pointerEvents={pointerEvents}
+                onClick={handleClick}
+              />
+            )}
             {isThisRouteEditOrExtendMode && (
               <Point
                 x={position.x}

src/components/FeaturePanel/Climbing/contexts/osmToClimbingRoutes.ts

@@ -13,6 +13,7 @@ const boltCodeMap: Record<string, PointType> = {
   A: 'anchor',
   P: 'piton',
   S: 'sling',
+  U: 'unfinished',
 };
 
 const parsePathString = (pathString?: string): PathPoints =>

src/components/FeaturePanel/Climbing/types.ts

@@ -1,7 +1,7 @@
 import { gradeSystem } from './utils/gradeData';
 import { Feature } from '../../../services/types';
 
-export type PointType = 'anchor' | 'bolt' | 'piton' | 'sling';
+export type PointType = 'anchor' | 'bolt' | 'piton' | 'sling' | 'unfinished';
 
 export type Position = {
   x: number;