christianandClaude Opus 5
0db5e9b07d
First commit on the local Gitea server, made after moving the tree off the Windows machine. Build outputs, node_modules and the AI models stay out (see .gitignore); everything the installer build needs is tracked. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
102 lines
4.7 KiB
Markdown
102 lines
4.7 KiB
Markdown
# Media Drawing Fix - Annotations Move with Media Items
|
|
|
|
## Problem
|
|
Previously, when drawing annotations on media items in the Bible app, the strokes were "stuck" to the canvas coordinates and didn't move when the media items were repositioned or scaled. This made it impossible to maintain the relationship between annotations and their associated media content.
|
|
|
|
## Solution
|
|
Implemented a coordinate transformation system that associates strokes with specific media items and transforms coordinates relative to media item positions.
|
|
|
|
## Key Changes
|
|
|
|
### 1. Stroke Association System
|
|
- **`findMediaItemAtPosition(point, tabId)`**: Determines which media item (if any) a stroke belongs to based on the starting point
|
|
- **`transformStrokeToMediaItem(strokeData, mediaItem)`**: Converts canvas coordinates to media item-relative coordinates
|
|
- **`transformStrokeFromMediaItem(strokeData, mediaItem)`**: Converts media item-relative coordinates back to canvas coordinates
|
|
|
|
### 2. Enhanced Stroke Saving
|
|
- **`saveMediaStroke(tabId, strokeData)`**: Now associates strokes with media items and stores coordinates relative to the media item
|
|
- Strokes are tagged with `mediaItemId` to track their association
|
|
- Background strokes (not on media items) are marked with `mediaItemId: null`
|
|
|
|
### 3. Dynamic Redrawing
|
|
- **`redrawStrokesForMediaItem(tabId, mediaItem)`**: Redraws all strokes when a media item moves or scales
|
|
- **`redrawAllStrokes(tabId)`**: Redraws all strokes (used when media items are deleted)
|
|
- **`removeStrokesForMediaItem(tabId, mediaPath)`**: Removes strokes associated with deleted media items
|
|
|
|
### 4. Updated Movement Handlers
|
|
- Mouse, touch, and wheel handlers now call `updateMediaItemPosition()` which triggers stroke redrawing
|
|
- All movement and scaling operations automatically update associated annotations
|
|
|
|
### 5. Drawing System Updates
|
|
- **`startDrawing(e)`**: Now allows drawing on media items and tracks which item is being drawn on
|
|
- **`endDrawing()`**: Associates completed strokes with the media item they were drawn on
|
|
|
|
## How It Works
|
|
|
|
1. **Drawing Phase**:
|
|
- When user starts drawing, the system checks if the starting point is over a media item
|
|
- If drawing on a media item, the stroke is tagged with that item's ID
|
|
- Coordinates are stored relative to the media item's position
|
|
|
|
2. **Movement Phase**:
|
|
- When a media item moves or scales, `updateMediaItemPosition()` is called
|
|
- This triggers `redrawStrokesForMediaItem()` which:
|
|
- Clears the drawing canvas
|
|
- Transforms all stroke coordinates back to canvas space using the new media item position
|
|
- Redraws all strokes in their new positions
|
|
|
|
3. **Deletion Phase**:
|
|
- When a media item is deleted, `removeMediaItemFromTab()` is called
|
|
- This triggers `removeStrokesForMediaItem()` which removes all associated strokes
|
|
- The canvas is redrawn to reflect the changes
|
|
|
|
## Coordinate Transformation
|
|
|
|
### To Media Item Coordinates (for storage):
|
|
```javascript
|
|
const itemOffsetX = itemRect.left - canvasRect.left;
|
|
const itemOffsetY = itemRect.top - canvasRect.top;
|
|
const transformedPoints = strokeData.points.map(point => ({
|
|
x: point.x - itemOffsetX,
|
|
y: point.y - itemOffsetY
|
|
}));
|
|
```
|
|
|
|
### From Media Item Coordinates (for display):
|
|
```javascript
|
|
const itemOffsetX = itemRect.left - canvasRect.left;
|
|
const itemOffsetY = itemRect.top - canvasRect.top;
|
|
const transformedPoints = strokeData.points.map(point => ({
|
|
x: point.x + itemOffsetX,
|
|
y: point.y + itemOffsetY
|
|
}));
|
|
```
|
|
|
|
## Benefits
|
|
|
|
1. **Annotations Stay with Content**: Drawings on media items now move and scale with the items
|
|
2. **Background Annotations**: Strokes not on media items remain as background annotations
|
|
3. **Automatic Cleanup**: Deleting media items removes their associated annotations
|
|
4. **Performance**: Only redraws when necessary (movement/scaling events)
|
|
5. **Persistence**: All coordinate transformations are preserved in tab data
|
|
|
|
## Testing
|
|
|
|
Use the test file `test-media-drawing-fix.html` to verify:
|
|
1. Draw on media items with different tools (pen, highlight, erase)
|
|
2. Switch to select tool and drag media items around
|
|
3. Scale media items with mouse wheel
|
|
4. Verify annotations move and scale correctly
|
|
5. Delete media items and confirm annotations are removed
|
|
|
|
## File Changes
|
|
|
|
- **`local-media-handler.js`**: Main implementation of coordinate transformation system
|
|
- **`test-media-drawing-fix.html`**: Test file for verifying functionality
|
|
|
|
## Future Enhancements
|
|
|
|
- Support for multiple media items with overlapping annotations
|
|
- Undo/redo for media item movements
|
|
- Annotation layering and z-index management
|
|
- Export annotations with media items |