climbing: Add mocked points to climbing context

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/RouteFloatingMenu.tsx

@@ -84,11 +84,16 @@ export const RouteFloatingMenu = () => {
 
   const onPointTypeChange = useCallback(
     (type: PointType) => {
-      machine.execute('changePointType', { type });
+      // @TODO tady upravit aby se tam posílalo routeSelectedIndex=undefined a pointSelectedIndex podle indexu v mockedPoints. Zároveň bude potřeba sem předat informaci který index měním. Možná v climbing contextu?
+      machine.execute('changePointType', {
+        type,
+        routeSelectedIndex,
+        pointSelectedIndex,
+      });
 
       setShowRouteMarksMenu(false);
     },
-    [machine],
+    [machine, routeSelectedIndex, pointSelectedIndex],
   );
 
   const onMouseEnter = () => {