@pie-players/pie-tool-protractor 0.1.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +120 -0
- package/dist/index.d.ts +7 -0
- package/dist/index.d.ts.map +1 -0
- package/dist/tool-protractor.js +12707 -0
- package/dist/tool-protractor.js.map +1 -0
- package/index.ts +8 -0
- package/package.json +63 -0
- package/protractor.svg +294 -0
- package/tool-protractor.svelte +343 -0
package/README.md
ADDED
|
@@ -0,0 +1,120 @@
|
|
|
1
|
+
# Protractor Tool
|
|
2
|
+
|
|
3
|
+
A draggable and rotatable protractor overlay tool for geometry and measurement questions.
|
|
4
|
+
|
|
5
|
+
## Features
|
|
6
|
+
|
|
7
|
+
- **Draggable**: Click and drag anywhere on the protractor to move it
|
|
8
|
+
- **Rotatable**: Use the rotate handle (green circle) to rotate the protractor
|
|
9
|
+
- **180-degree scale**: Standard protractor with 0-180 degree markings
|
|
10
|
+
- **Major tick marks**: Every 30 degrees (0, 30, 60, 90, 120, 150, 180)
|
|
11
|
+
- **Minor tick marks**: Every 10 degrees
|
|
12
|
+
- **Semi-transparent**: Allows viewing content underneath
|
|
13
|
+
- **Z-index management**: Automatically brings to front when clicked
|
|
14
|
+
|
|
15
|
+
## Usage
|
|
16
|
+
|
|
17
|
+
### In Assessment Player
|
|
18
|
+
|
|
19
|
+
```svelte
|
|
20
|
+
<script>
|
|
21
|
+
import { ToolProtractor } from '$lib/tags/tool-protractor';
|
|
22
|
+
import { toolCoordinator } from '$lib/assessment-toolkit/tools';
|
|
23
|
+
|
|
24
|
+
let showProtractor = false;
|
|
25
|
+
|
|
26
|
+
$: {
|
|
27
|
+
const state = toolCoordinator.getToolState('protractor');
|
|
28
|
+
showProtractor = state?.isVisible ?? false;
|
|
29
|
+
}
|
|
30
|
+
</script>
|
|
31
|
+
|
|
32
|
+
<button on:click={() => toolCoordinator.toggleTool('protractor')}>
|
|
33
|
+
Toggle Protractor
|
|
34
|
+
</button>
|
|
35
|
+
|
|
36
|
+
<ToolProtractor visible={showProtractor} toolId="protractor" />
|
|
37
|
+
```
|
|
38
|
+
|
|
39
|
+
## Props
|
|
40
|
+
|
|
41
|
+
| Prop | Type | Default | Description |
|
|
42
|
+
|------|------|---------|-------------|
|
|
43
|
+
| `visible` | `boolean` | `false` | Controls tool visibility |
|
|
44
|
+
| `toolId` | `string` | `'protractor'` | Unique identifier for the tool |
|
|
45
|
+
|
|
46
|
+
## Interactions
|
|
47
|
+
|
|
48
|
+
### Moving
|
|
49
|
+
- Click and drag the protractor body or header to move it around the screen
|
|
50
|
+
- The cursor changes to indicate draggability
|
|
51
|
+
|
|
52
|
+
### Rotating
|
|
53
|
+
- Click and drag the green rotate handle (bottom right) to rotate the protractor
|
|
54
|
+
- Rotation is continuous and smooth
|
|
55
|
+
- Useful for aligning with different angles in diagrams
|
|
56
|
+
|
|
57
|
+
### Bringing to Front
|
|
58
|
+
- Clicking anywhere on the protractor brings it to the front
|
|
59
|
+
- Managed automatically by the tool coordinator
|
|
60
|
+
|
|
61
|
+
### Closing
|
|
62
|
+
- Click the × button in the header to close the protractor
|
|
63
|
+
- Can also be closed programmatically via `toolCoordinator.hideTool('protractor')`
|
|
64
|
+
|
|
65
|
+
## Implementation Details
|
|
66
|
+
|
|
67
|
+
### Component Structure
|
|
68
|
+
|
|
69
|
+
```
|
|
70
|
+
tool-protractor.svelte
|
|
71
|
+
├── Header (title + close button)
|
|
72
|
+
├── SVG Protractor
|
|
73
|
+
│ ├── Background semicircle
|
|
74
|
+
│ ├── Degree markings (0-180)
|
|
75
|
+
│ ├── Tick marks (major every 30°, minor every 10°)
|
|
76
|
+
│ ├── Degree labels
|
|
77
|
+
│ ├── Center point
|
|
78
|
+
│ └── Baseline
|
|
79
|
+
└── Rotate handle (bottom right)
|
|
80
|
+
```
|
|
81
|
+
|
|
82
|
+
### State Management
|
|
83
|
+
|
|
84
|
+
- Position: `{ x, y }` in pixels from top-left
|
|
85
|
+
- Rotation: Angle in degrees
|
|
86
|
+
- Drag state: Tracks active dragging
|
|
87
|
+
- Rotation state: Tracks active rotation
|
|
88
|
+
|
|
89
|
+
### Event Handling
|
|
90
|
+
|
|
91
|
+
- `mousedown`: Initiates drag or rotation
|
|
92
|
+
- `mousemove`: Updates position or rotation
|
|
93
|
+
- `mouseup`: Ends drag or rotation
|
|
94
|
+
- Events use global listeners for smooth interaction
|
|
95
|
+
|
|
96
|
+
## Styling
|
|
97
|
+
|
|
98
|
+
The protractor uses:
|
|
99
|
+
- White background with subtle transparency
|
|
100
|
+
- Black stroke for visibility
|
|
101
|
+
- Shadow for depth
|
|
102
|
+
- Rounded corners on container
|
|
103
|
+
- Hover effects on buttons
|
|
104
|
+
|
|
105
|
+
## Accessibility
|
|
106
|
+
|
|
107
|
+
- `role="dialog"`: Identifies the tool as a dialog
|
|
108
|
+
- `aria-label="Protractor Tool"`: Provides accessible name
|
|
109
|
+
- `tabindex="-1"`: Allows programmatic focus
|
|
110
|
+
- Close button has `aria-label="Close protractor"`
|
|
111
|
+
|
|
112
|
+
## Future Enhancements
|
|
113
|
+
|
|
114
|
+
- [ ] Degree readout showing current rotation
|
|
115
|
+
- [ ] Snap-to-grid option
|
|
116
|
+
- [ ] Measurement lines/guides
|
|
117
|
+
- [ ] Different protractor sizes
|
|
118
|
+
- [ ] Keyboard controls for precise positioning
|
|
119
|
+
- [ ] Save/restore position between questions
|
|
120
|
+
|
package/dist/index.d.ts
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../index.ts"],"names":[],"mappings":"AAAA;;;;;GAKG"}
|