graphics-debug 0.0.21 → 0.0.22
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 +62 -16
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -36,23 +36,52 @@ https://github.com/user-attachments/assets/9f3f41e6-b0fe-416a-a551-ba5c5b920cad
|
|
|
36
36
|
The `graphics` json object is very simple, here's the basic schema:
|
|
37
37
|
|
|
38
38
|
```typescript
|
|
39
|
+
interface Point {
|
|
40
|
+
x: number
|
|
41
|
+
y: number
|
|
42
|
+
color?: string
|
|
43
|
+
label?: string
|
|
44
|
+
layer?: string
|
|
45
|
+
step?: number
|
|
46
|
+
}
|
|
47
|
+
|
|
48
|
+
interface Line {
|
|
49
|
+
points: { x: number; y: number }[]
|
|
50
|
+
strokeWidth?: number
|
|
51
|
+
strokeColor?: string
|
|
52
|
+
strokeDash?: string
|
|
53
|
+
layer?: string
|
|
54
|
+
step?: number
|
|
55
|
+
label?: string
|
|
56
|
+
}
|
|
57
|
+
|
|
58
|
+
interface Rect {
|
|
59
|
+
center: { x: number; y: number }
|
|
60
|
+
width: number
|
|
61
|
+
height: number
|
|
62
|
+
fill?: string
|
|
63
|
+
stroke?: string
|
|
64
|
+
color?: string
|
|
65
|
+
layer?: string
|
|
66
|
+
step?: number
|
|
67
|
+
label?: string
|
|
68
|
+
}
|
|
69
|
+
|
|
70
|
+
interface Circle {
|
|
71
|
+
center: { x: number; y: number }
|
|
72
|
+
radius: number
|
|
73
|
+
fill?: string
|
|
74
|
+
stroke?: string
|
|
75
|
+
layer?: string
|
|
76
|
+
step?: number
|
|
77
|
+
label?: string
|
|
78
|
+
}
|
|
79
|
+
|
|
39
80
|
interface GraphicsObject {
|
|
40
|
-
points?:
|
|
41
|
-
lines?:
|
|
42
|
-
rects?:
|
|
43
|
-
|
|
44
|
-
width: number
|
|
45
|
-
height: number
|
|
46
|
-
fill?: string
|
|
47
|
-
stroke?: string
|
|
48
|
-
}>
|
|
49
|
-
circles?: Array<{
|
|
50
|
-
center: { x: number; y: number }
|
|
51
|
-
radius: number
|
|
52
|
-
fill?: string
|
|
53
|
-
stroke?: string
|
|
54
|
-
}>
|
|
55
|
-
grid?: { cellSize: number; label?: boolean }
|
|
81
|
+
points?: Point[]
|
|
82
|
+
lines?: Line[]
|
|
83
|
+
rects?: Rect[]
|
|
84
|
+
circles?: Circle[]
|
|
56
85
|
coordinateSystem?: "cartesian" | "screen"
|
|
57
86
|
title?: string
|
|
58
87
|
}
|
|
@@ -131,6 +160,23 @@ const graphicsObjects = getGraphicsObjectsFromLogString(logString)
|
|
|
131
160
|
// Array<GraphicsObject>
|
|
132
161
|
```
|
|
133
162
|
|
|
163
|
+
### Generate SVG directly from a GraphicsObject
|
|
164
|
+
|
|
165
|
+
```tsx
|
|
166
|
+
import { getSvgFromGraphicsObject } from "graphics-debug"
|
|
167
|
+
|
|
168
|
+
// Create your graphics object
|
|
169
|
+
const graphicsObject = {
|
|
170
|
+
points: [{ x: 0, y: 0, label: "Origin" }, { x: 100, y: 100, color: "red" }],
|
|
171
|
+
lines: [{ points: [{ x: 0, y: 0 }, { x: 100, y: 100 }], strokeColor: "blue" }],
|
|
172
|
+
title: "My Graph"
|
|
173
|
+
}
|
|
174
|
+
|
|
175
|
+
// Generate SVG string directly from the object
|
|
176
|
+
const svg = getSvgFromGraphicsObject(graphicsObject)
|
|
177
|
+
// Returns a formatted SVG string ready to be written to a file or embedded in HTML
|
|
178
|
+
```
|
|
179
|
+
|
|
134
180
|
### Example Graphics JSON
|
|
135
181
|
|
|
136
182
|
An example graphics JSON file is provided in the repository to help you get started quickly.
|