mesurer 0.0.11 → 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/CHANGELOG.md +16 -0
- package/PRIVACY.md +63 -0
- package/README.md +47 -20
- package/dist/index.cjs +11986 -4697
- package/dist/index.d.cts +70 -7
- package/dist/index.d.ts +70 -7
- package/dist/index.js +11719 -4402
- package/dist/styles.css +1 -1165
- package/package.json +9 -6
package/dist/index.d.cts
CHANGED
|
@@ -8,6 +8,35 @@ type ColorSample = {
|
|
|
8
8
|
alpha: number;
|
|
9
9
|
};
|
|
10
10
|
|
|
11
|
+
type Point = {
|
|
12
|
+
x: number;
|
|
13
|
+
y: number;
|
|
14
|
+
};
|
|
15
|
+
type Arrow = {
|
|
16
|
+
id: string;
|
|
17
|
+
start: Point;
|
|
18
|
+
end: Point;
|
|
19
|
+
control?: Point;
|
|
20
|
+
color: string;
|
|
21
|
+
width: number;
|
|
22
|
+
rotation?: number;
|
|
23
|
+
};
|
|
24
|
+
type PenStroke = {
|
|
25
|
+
id: string;
|
|
26
|
+
points: Point[];
|
|
27
|
+
color: string;
|
|
28
|
+
width: number;
|
|
29
|
+
rotation?: number;
|
|
30
|
+
};
|
|
31
|
+
type TextAnnotation = {
|
|
32
|
+
id: string;
|
|
33
|
+
x: number;
|
|
34
|
+
y: number;
|
|
35
|
+
text: string;
|
|
36
|
+
scale?: number;
|
|
37
|
+
rotation?: number;
|
|
38
|
+
boxWidth?: number;
|
|
39
|
+
};
|
|
11
40
|
type Rect = {
|
|
12
41
|
left: number;
|
|
13
42
|
top: number;
|
|
@@ -24,7 +53,7 @@ type Measurement = {
|
|
|
24
53
|
id: string;
|
|
25
54
|
rect: Rect;
|
|
26
55
|
normalizedRect: NormalizedRect;
|
|
27
|
-
elementRef?:
|
|
56
|
+
elementRef?: Element | null;
|
|
28
57
|
originRect?: Rect;
|
|
29
58
|
deltaX: number;
|
|
30
59
|
deltaY: number;
|
|
@@ -41,8 +70,8 @@ type DistanceOverlay = {
|
|
|
41
70
|
rectB: Rect;
|
|
42
71
|
normalizedRectA: NormalizedRect;
|
|
43
72
|
normalizedRectB: NormalizedRect;
|
|
44
|
-
elementRefA?:
|
|
45
|
-
elementRefB?:
|
|
73
|
+
elementRefA?: Element | null;
|
|
74
|
+
elementRefB?: Element | null;
|
|
46
75
|
horizontal: {
|
|
47
76
|
x1: number;
|
|
48
77
|
x2: number;
|
|
@@ -62,7 +91,14 @@ type DistanceOverlay = {
|
|
|
62
91
|
y2: number;
|
|
63
92
|
}>;
|
|
64
93
|
};
|
|
65
|
-
type ToolMode = "none" | "select" | "guides" | "text-inspector" | "xray" | "rulers";
|
|
94
|
+
type ToolMode = "none" | "select" | "selection" | "guides" | "text-inspector" | "xray" | "rulers" | "arrows" | "pen" | "text";
|
|
95
|
+
type PersistentToolMode = Exclude<ToolMode, "none" | "text-inspector" | "xray" | "rulers">;
|
|
96
|
+
|
|
97
|
+
type TextFont = "handwritten" | "code" | "serif" | "sans-serif";
|
|
98
|
+
type TextStyleSettings = {
|
|
99
|
+
font: TextFont;
|
|
100
|
+
color: string;
|
|
101
|
+
};
|
|
66
102
|
|
|
67
103
|
declare const MESURER_STORAGE_VERSION = 2;
|
|
68
104
|
type GuidePattern = "solid" | "dashed" | "dotted";
|
|
@@ -77,19 +113,31 @@ type RulerSettings = {
|
|
|
77
113
|
opacity: number;
|
|
78
114
|
edgeReveal: boolean;
|
|
79
115
|
};
|
|
116
|
+
type ScreenshotSettings = {
|
|
117
|
+
copy: boolean;
|
|
118
|
+
download: boolean;
|
|
119
|
+
};
|
|
80
120
|
type MesurerStoredSettings = {
|
|
121
|
+
lastToolMode?: PersistentToolMode;
|
|
81
122
|
highlightColor?: string;
|
|
82
123
|
guideColor?: string;
|
|
124
|
+
arrowColor?: string;
|
|
125
|
+
guideHighlightEnabled?: boolean;
|
|
83
126
|
hoverHighlightEnabled?: boolean;
|
|
127
|
+
layoutDetailsEnabled?: boolean;
|
|
84
128
|
colorPickerFormats?: ColorPickerFormat[];
|
|
85
129
|
colorPickerClickFormat?: ColorPickerFormat;
|
|
86
130
|
snapEnabled?: boolean;
|
|
87
131
|
snapGuidesEnabled?: boolean;
|
|
132
|
+
snapArrowsEnabled?: boolean;
|
|
133
|
+
arrowClickToPlace?: boolean;
|
|
88
134
|
selectNewGuideEnabled?: boolean;
|
|
89
135
|
multiMeasureEnabled?: boolean;
|
|
90
136
|
persistOnReload?: boolean;
|
|
91
137
|
guideStyle?: Partial<GuideStyle>;
|
|
92
138
|
rulerSettings?: Partial<RulerSettings>;
|
|
139
|
+
screenshotSettings?: Partial<ScreenshotSettings>;
|
|
140
|
+
textStyle?: Partial<TextStyleSettings>;
|
|
93
141
|
};
|
|
94
142
|
type MesurerStoredWorkspace = {
|
|
95
143
|
enabled: boolean;
|
|
@@ -99,6 +147,12 @@ type MesurerStoredWorkspace = {
|
|
|
99
147
|
guideOrientation: "vertical" | "horizontal";
|
|
100
148
|
guides: Guide[];
|
|
101
149
|
selectedGuideIds: string[];
|
|
150
|
+
arrows: Arrow[];
|
|
151
|
+
selectedArrowIds: string[];
|
|
152
|
+
selectedPenStrokeIds?: string[];
|
|
153
|
+
selectedTextIds?: string[];
|
|
154
|
+
penStrokes: PenStroke[];
|
|
155
|
+
textAnnotations: TextAnnotation[];
|
|
102
156
|
measurements: Measurement[];
|
|
103
157
|
activeMeasurement: Measurement | null;
|
|
104
158
|
heldDistances: DistanceOverlay[];
|
|
@@ -124,10 +178,13 @@ declare const normalizeStoredSettings: (value: unknown) => MesurerStoredSettings
|
|
|
124
178
|
declare const normalizeStoredWorkspace: (value: unknown) => MesurerStoredWorkspace | null;
|
|
125
179
|
declare const createLocalStoragePersistence: (ownerWindow: Window, workspaceKey: string, settingsKey?: string, legacyKey?: string) => MesurerPersistence;
|
|
126
180
|
|
|
127
|
-
type
|
|
181
|
+
type MesurerProps = {
|
|
128
182
|
highlightColor?: string;
|
|
129
183
|
guideColor?: string;
|
|
184
|
+
arrowColor?: string;
|
|
185
|
+
guideHighlightEnabled?: boolean;
|
|
130
186
|
hoverHighlightEnabled?: boolean;
|
|
187
|
+
layoutDetailsEnabled?: boolean;
|
|
131
188
|
persistOnReload?: boolean;
|
|
132
189
|
portalTarget?: HTMLElement | ShadowRoot;
|
|
133
190
|
persistKey?: string;
|
|
@@ -135,14 +192,19 @@ type MeasurerProps = {
|
|
|
135
192
|
colorPickerClickFormat?: ColorPickerFormat;
|
|
136
193
|
snapEnabled?: boolean;
|
|
137
194
|
snapGuidesEnabled?: boolean;
|
|
195
|
+
snapArrowsEnabled?: boolean;
|
|
196
|
+
arrowClickToPlace?: boolean;
|
|
138
197
|
selectNewGuideEnabled?: boolean;
|
|
139
198
|
multiMeasureEnabled?: boolean;
|
|
140
199
|
guideStyle?: Partial<GuideStyle>;
|
|
141
200
|
rulerSettings?: Partial<RulerSettings>;
|
|
201
|
+
textStyle?: Partial<TextStyleSettings>;
|
|
142
202
|
persistence?: MesurerPersistence;
|
|
143
203
|
onPersistenceError?: (error: unknown) => void;
|
|
204
|
+
captureVisibleTab?: () => Promise<Blob>;
|
|
144
205
|
};
|
|
145
|
-
|
|
206
|
+
|
|
207
|
+
declare function Mesurer({ highlightColor, guideColor, arrowColor, guideHighlightEnabled, hoverHighlightEnabled, layoutDetailsEnabled, persistOnReload, portalTarget, persistKey, colorPickerFormats, colorPickerClickFormat, snapEnabled, snapGuidesEnabled, snapArrowsEnabled, arrowClickToPlace, selectNewGuideEnabled, multiMeasureEnabled, guideStyle, rulerSettings, textStyle, persistence, onPersistenceError, captureVisibleTab, }: MesurerProps): react_jsx_runtime.JSX.Element | null;
|
|
146
208
|
|
|
147
209
|
type TypographyRow = {
|
|
148
210
|
label: string;
|
|
@@ -167,6 +229,7 @@ type TextInspectorAPI = {
|
|
|
167
229
|
inspect: (element: HTMLElement) => boolean;
|
|
168
230
|
canUndo: () => boolean;
|
|
169
231
|
canRedo: () => boolean;
|
|
232
|
+
setPaused: (paused: boolean) => void;
|
|
170
233
|
};
|
|
171
234
|
type TextInspectorOptions = {
|
|
172
235
|
id?: string;
|
|
@@ -180,4 +243,4 @@ type TextInspectorOptions = {
|
|
|
180
243
|
declare const createTextInspector: (options?: TextInspectorOptions, legacy?: boolean) => TextInspectorAPI;
|
|
181
244
|
declare const TextInspector: TextInspectorAPI;
|
|
182
245
|
|
|
183
|
-
export { type ColorPickerFormat, type ColorSample, type GuidePattern, type GuideStyle, MESURER_STORAGE_VERSION,
|
|
246
|
+
export { type Arrow, type ColorPickerFormat, type ColorSample, type GuidePattern, type GuideStyle, MESURER_STORAGE_VERSION, Mesurer, type MesurerPersistence, type MesurerPersistenceSnapshot, type MesurerProps, type MesurerStoredSettings, type MesurerStoredWorkspace, type PenStroke, type Point, type RulerSettings, type ScreenshotSettings, type TextAnnotation, type TextFont, TextInspector, type TextInspectorAPI, type TextInspectorOptions, type TextStyleSettings, type TypographyInfo, type TypographyRow, createLocalStoragePersistence, createTextInspector, normalizeStoredSettings, normalizeStoredWorkspace };
|
package/dist/index.d.ts
CHANGED
|
@@ -8,6 +8,35 @@ type ColorSample = {
|
|
|
8
8
|
alpha: number;
|
|
9
9
|
};
|
|
10
10
|
|
|
11
|
+
type Point = {
|
|
12
|
+
x: number;
|
|
13
|
+
y: number;
|
|
14
|
+
};
|
|
15
|
+
type Arrow = {
|
|
16
|
+
id: string;
|
|
17
|
+
start: Point;
|
|
18
|
+
end: Point;
|
|
19
|
+
control?: Point;
|
|
20
|
+
color: string;
|
|
21
|
+
width: number;
|
|
22
|
+
rotation?: number;
|
|
23
|
+
};
|
|
24
|
+
type PenStroke = {
|
|
25
|
+
id: string;
|
|
26
|
+
points: Point[];
|
|
27
|
+
color: string;
|
|
28
|
+
width: number;
|
|
29
|
+
rotation?: number;
|
|
30
|
+
};
|
|
31
|
+
type TextAnnotation = {
|
|
32
|
+
id: string;
|
|
33
|
+
x: number;
|
|
34
|
+
y: number;
|
|
35
|
+
text: string;
|
|
36
|
+
scale?: number;
|
|
37
|
+
rotation?: number;
|
|
38
|
+
boxWidth?: number;
|
|
39
|
+
};
|
|
11
40
|
type Rect = {
|
|
12
41
|
left: number;
|
|
13
42
|
top: number;
|
|
@@ -24,7 +53,7 @@ type Measurement = {
|
|
|
24
53
|
id: string;
|
|
25
54
|
rect: Rect;
|
|
26
55
|
normalizedRect: NormalizedRect;
|
|
27
|
-
elementRef?:
|
|
56
|
+
elementRef?: Element | null;
|
|
28
57
|
originRect?: Rect;
|
|
29
58
|
deltaX: number;
|
|
30
59
|
deltaY: number;
|
|
@@ -41,8 +70,8 @@ type DistanceOverlay = {
|
|
|
41
70
|
rectB: Rect;
|
|
42
71
|
normalizedRectA: NormalizedRect;
|
|
43
72
|
normalizedRectB: NormalizedRect;
|
|
44
|
-
elementRefA?:
|
|
45
|
-
elementRefB?:
|
|
73
|
+
elementRefA?: Element | null;
|
|
74
|
+
elementRefB?: Element | null;
|
|
46
75
|
horizontal: {
|
|
47
76
|
x1: number;
|
|
48
77
|
x2: number;
|
|
@@ -62,7 +91,14 @@ type DistanceOverlay = {
|
|
|
62
91
|
y2: number;
|
|
63
92
|
}>;
|
|
64
93
|
};
|
|
65
|
-
type ToolMode = "none" | "select" | "guides" | "text-inspector" | "xray" | "rulers";
|
|
94
|
+
type ToolMode = "none" | "select" | "selection" | "guides" | "text-inspector" | "xray" | "rulers" | "arrows" | "pen" | "text";
|
|
95
|
+
type PersistentToolMode = Exclude<ToolMode, "none" | "text-inspector" | "xray" | "rulers">;
|
|
96
|
+
|
|
97
|
+
type TextFont = "handwritten" | "code" | "serif" | "sans-serif";
|
|
98
|
+
type TextStyleSettings = {
|
|
99
|
+
font: TextFont;
|
|
100
|
+
color: string;
|
|
101
|
+
};
|
|
66
102
|
|
|
67
103
|
declare const MESURER_STORAGE_VERSION = 2;
|
|
68
104
|
type GuidePattern = "solid" | "dashed" | "dotted";
|
|
@@ -77,19 +113,31 @@ type RulerSettings = {
|
|
|
77
113
|
opacity: number;
|
|
78
114
|
edgeReveal: boolean;
|
|
79
115
|
};
|
|
116
|
+
type ScreenshotSettings = {
|
|
117
|
+
copy: boolean;
|
|
118
|
+
download: boolean;
|
|
119
|
+
};
|
|
80
120
|
type MesurerStoredSettings = {
|
|
121
|
+
lastToolMode?: PersistentToolMode;
|
|
81
122
|
highlightColor?: string;
|
|
82
123
|
guideColor?: string;
|
|
124
|
+
arrowColor?: string;
|
|
125
|
+
guideHighlightEnabled?: boolean;
|
|
83
126
|
hoverHighlightEnabled?: boolean;
|
|
127
|
+
layoutDetailsEnabled?: boolean;
|
|
84
128
|
colorPickerFormats?: ColorPickerFormat[];
|
|
85
129
|
colorPickerClickFormat?: ColorPickerFormat;
|
|
86
130
|
snapEnabled?: boolean;
|
|
87
131
|
snapGuidesEnabled?: boolean;
|
|
132
|
+
snapArrowsEnabled?: boolean;
|
|
133
|
+
arrowClickToPlace?: boolean;
|
|
88
134
|
selectNewGuideEnabled?: boolean;
|
|
89
135
|
multiMeasureEnabled?: boolean;
|
|
90
136
|
persistOnReload?: boolean;
|
|
91
137
|
guideStyle?: Partial<GuideStyle>;
|
|
92
138
|
rulerSettings?: Partial<RulerSettings>;
|
|
139
|
+
screenshotSettings?: Partial<ScreenshotSettings>;
|
|
140
|
+
textStyle?: Partial<TextStyleSettings>;
|
|
93
141
|
};
|
|
94
142
|
type MesurerStoredWorkspace = {
|
|
95
143
|
enabled: boolean;
|
|
@@ -99,6 +147,12 @@ type MesurerStoredWorkspace = {
|
|
|
99
147
|
guideOrientation: "vertical" | "horizontal";
|
|
100
148
|
guides: Guide[];
|
|
101
149
|
selectedGuideIds: string[];
|
|
150
|
+
arrows: Arrow[];
|
|
151
|
+
selectedArrowIds: string[];
|
|
152
|
+
selectedPenStrokeIds?: string[];
|
|
153
|
+
selectedTextIds?: string[];
|
|
154
|
+
penStrokes: PenStroke[];
|
|
155
|
+
textAnnotations: TextAnnotation[];
|
|
102
156
|
measurements: Measurement[];
|
|
103
157
|
activeMeasurement: Measurement | null;
|
|
104
158
|
heldDistances: DistanceOverlay[];
|
|
@@ -124,10 +178,13 @@ declare const normalizeStoredSettings: (value: unknown) => MesurerStoredSettings
|
|
|
124
178
|
declare const normalizeStoredWorkspace: (value: unknown) => MesurerStoredWorkspace | null;
|
|
125
179
|
declare const createLocalStoragePersistence: (ownerWindow: Window, workspaceKey: string, settingsKey?: string, legacyKey?: string) => MesurerPersistence;
|
|
126
180
|
|
|
127
|
-
type
|
|
181
|
+
type MesurerProps = {
|
|
128
182
|
highlightColor?: string;
|
|
129
183
|
guideColor?: string;
|
|
184
|
+
arrowColor?: string;
|
|
185
|
+
guideHighlightEnabled?: boolean;
|
|
130
186
|
hoverHighlightEnabled?: boolean;
|
|
187
|
+
layoutDetailsEnabled?: boolean;
|
|
131
188
|
persistOnReload?: boolean;
|
|
132
189
|
portalTarget?: HTMLElement | ShadowRoot;
|
|
133
190
|
persistKey?: string;
|
|
@@ -135,14 +192,19 @@ type MeasurerProps = {
|
|
|
135
192
|
colorPickerClickFormat?: ColorPickerFormat;
|
|
136
193
|
snapEnabled?: boolean;
|
|
137
194
|
snapGuidesEnabled?: boolean;
|
|
195
|
+
snapArrowsEnabled?: boolean;
|
|
196
|
+
arrowClickToPlace?: boolean;
|
|
138
197
|
selectNewGuideEnabled?: boolean;
|
|
139
198
|
multiMeasureEnabled?: boolean;
|
|
140
199
|
guideStyle?: Partial<GuideStyle>;
|
|
141
200
|
rulerSettings?: Partial<RulerSettings>;
|
|
201
|
+
textStyle?: Partial<TextStyleSettings>;
|
|
142
202
|
persistence?: MesurerPersistence;
|
|
143
203
|
onPersistenceError?: (error: unknown) => void;
|
|
204
|
+
captureVisibleTab?: () => Promise<Blob>;
|
|
144
205
|
};
|
|
145
|
-
|
|
206
|
+
|
|
207
|
+
declare function Mesurer({ highlightColor, guideColor, arrowColor, guideHighlightEnabled, hoverHighlightEnabled, layoutDetailsEnabled, persistOnReload, portalTarget, persistKey, colorPickerFormats, colorPickerClickFormat, snapEnabled, snapGuidesEnabled, snapArrowsEnabled, arrowClickToPlace, selectNewGuideEnabled, multiMeasureEnabled, guideStyle, rulerSettings, textStyle, persistence, onPersistenceError, captureVisibleTab, }: MesurerProps): react_jsx_runtime.JSX.Element | null;
|
|
146
208
|
|
|
147
209
|
type TypographyRow = {
|
|
148
210
|
label: string;
|
|
@@ -167,6 +229,7 @@ type TextInspectorAPI = {
|
|
|
167
229
|
inspect: (element: HTMLElement) => boolean;
|
|
168
230
|
canUndo: () => boolean;
|
|
169
231
|
canRedo: () => boolean;
|
|
232
|
+
setPaused: (paused: boolean) => void;
|
|
170
233
|
};
|
|
171
234
|
type TextInspectorOptions = {
|
|
172
235
|
id?: string;
|
|
@@ -180,4 +243,4 @@ type TextInspectorOptions = {
|
|
|
180
243
|
declare const createTextInspector: (options?: TextInspectorOptions, legacy?: boolean) => TextInspectorAPI;
|
|
181
244
|
declare const TextInspector: TextInspectorAPI;
|
|
182
245
|
|
|
183
|
-
export { type ColorPickerFormat, type ColorSample, type GuidePattern, type GuideStyle, MESURER_STORAGE_VERSION,
|
|
246
|
+
export { type Arrow, type ColorPickerFormat, type ColorSample, type GuidePattern, type GuideStyle, MESURER_STORAGE_VERSION, Mesurer, type MesurerPersistence, type MesurerPersistenceSnapshot, type MesurerProps, type MesurerStoredSettings, type MesurerStoredWorkspace, type PenStroke, type Point, type RulerSettings, type ScreenshotSettings, type TextAnnotation, type TextFont, TextInspector, type TextInspectorAPI, type TextInspectorOptions, type TextStyleSettings, type TypographyInfo, type TypographyRow, createLocalStoragePersistence, createTextInspector, normalizeStoredSettings, normalizeStoredWorkspace };
|