docs(Timeline): update the documentation

Author: SimbiozizV

docs/Timeline.md

@@ -21,6 +21,7 @@ const timeline = new Timeline({
     axes?: AxesViewOptions;
     events?: EventsViewOptions;
     markers?: MarkerViewOptions;
+    camera?: CameraViewOptions;
     hideRuler?: boolean;
   }
 });
@@ -73,6 +74,7 @@ const timeline = new Timeline({
       axes?: AxesViewOptions;
       events?: EventsViewOptions;
       markers?: MarkerViewOptions;
+      camera?: CameraViewOptions;
       hideRuler?: boolean;
     };
   };
@@ -152,6 +154,28 @@ timeline.emit('eventClick', { eventId: '123', time: Date.now() });
 **Returns:**
 - The created CustomEvent instance
 
+## Configuration Options
+
+### Camera Configuration
+
+The `camera` configuration controls timeline interaction behaviors, particularly zooming and panning:
+
+```typescript
+viewConfiguration: {
+  camera: {
+    zoom: ZoomMode.DEFAULT // or ZoomMode.NONE or ZoomMode.HORIZONTAL
+  }
+}
+```
+
+**Zoom Modes:**
+
+| Mode | Value | Behavior |
+|------|-------|----------|
+| `DEFAULT` | `"default"` | Standard zoom and pan behavior (mouse wheel zooms, Shift+wheel pans vertically) |
+| `HORIZONTAL` | `"horizontal"` | Mouse wheel pans horizontally without requiring Shift key |
+| `NONE` | `"none"` | Disables all zoom and pan interactions |
+
 ## Events
 
 The timeline emits the following events:
@@ -210,7 +234,7 @@ Fired when mouse leaves timeline elements.
 ### Basic Timeline Setup
 
 ```typescript
-import { Timeline } from '@gravity-ui/timeline';
+import { Timeline, ZoomMode } from '@gravity-ui/timeline';
 
 // Create timeline instance
 const timeline = new Timeline({
@@ -231,6 +255,11 @@ const timeline = new Timeline({
       axisId: 'main',
       trackIndex: 0
     }]
+  },
+  viewConfiguration: {
+    camera: {
+      zoom: ZoomMode.DEFAULT
+    }
   }
 });
 

docs/TimelineController.md

@@ -60,17 +60,38 @@ The TimelineController provides the following interaction capabilities:
 
 ### Zoom
 
-- **Mouse Wheel**: Zoom in/out centered on cursor position
-- **Zoom Limits**: 
-  - Minimum zoom: 5 seconds
-  - Maximum zoom: 2 months
-- **Zoom Speed**: Controlled by wheel delta
+The zoom behavior is controlled by the camera configuration's zoom mode:
+
+- **DEFAULT Mode**: 
+  - **Mouse Wheel**: Zoom in/out centered on cursor position
+  - **Zoom Limits**: 
+    - Minimum zoom: 5 seconds
+    - Maximum zoom: 2 months
+  - **Zoom Speed**: Controlled by wheel delta
+
+- **HORIZONTAL Mode**: 
+  - **Mouse Wheel**: Horizontal panning instead of zooming
+  - **No Zoom**: Zoom functionality is disabled in this mode
+
+- **NONE Mode**: 
+  - **Disabled**: All zoom and pan interactions are disabled
 
 ### Pan
 
-- **Shift + Wheel**: Vertical panning
-- **Wheel Delta X**: Horizontal panning
-- **Pan Speed**: Controlled by `WHEEL_PAN_SPEED` constant (0.00025)
+The pan behavior also depends on the zoom mode:
+
+- **DEFAULT Mode**:
+  - **Shift + Wheel**: Vertical panning
+  - **Wheel Delta X**: Horizontal panning
+  - **Pan Speed**: Controlled by `WHEEL_PAN_SPEED` constant (0.00025)
+
+- **HORIZONTAL Mode**:
+  - **Mouse Wheel**: Horizontal panning (no Shift key required)
+  - **Wheel Delta X**: Horizontal panning
+  - **Pan Speed**: Controlled by `WHEEL_PAN_SPEED` constant (0.00025)
+
+- **NONE Mode**:
+  - **Disabled**: All panning interactions are disabled
 
 ### Canvas Resizing
 
@@ -109,6 +130,44 @@ if (canvas instanceof HTMLCanvasElement) {
 timeline.destroy(); // This will also destroy the TimelineController
 ```
 
+### Configuring Interaction Modes
+
+You can control zoom and pan behavior by setting the camera configuration:
+
+```typescript
+import { Timeline, ZoomMode } from '@gravity-ui/timeline';
+
+// Default zoom behavior
+const timelineDefault = new Timeline({
+  settings: { /* settings */ },
+  viewConfiguration: {
+    camera: {
+      zoom: ZoomMode.DEFAULT
+    }
+  }
+});
+
+// Horizontal pan only (no zoom)
+const timelineHorizontal = new Timeline({
+  settings: { /* settings */ },
+  viewConfiguration: {
+    camera: {
+      zoom: ZoomMode.HORIZONTAL
+    }
+  }
+});
+
+// Disable all interactions
+const timelineStatic = new Timeline({
+  settings: { /* settings */ },
+  viewConfiguration: {
+    camera: {
+      zoom: ZoomMode.NONE
+    }
+  }
+});
+```
+
 ### Custom Interaction Handling
 
 While the TimelineController handles basic interactions automatically, you can extend its functionality by listening to timeline events:

docs/docs.md

@@ -14,14 +14,19 @@ The library consists of several core components that work together to create the
 The main class that orchestrates the timeline visualization. It manages the canvas, components, and user interactions.
 
 ```typescript
-import { Timeline } from '@gravity-ui/timeline';
+import { Timeline, ZoomMode } from '@gravity-ui/timeline';
 
 const timeline = new Timeline({
   settings: {
     start: Date.now(),
     end: Date.now() + 3600000,
     axes: [],
     events: []
+  },
+  viewConfiguration: {
+    camera: {
+      zoom: ZoomMode.DEFAULT
+    }
   }
 });
 ```