mesurer 0.1.0 → 0.1.2
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 +18 -0
- package/README.md +32 -16
- package/dist/index.cjs +8895 -2430
- package/dist/index.d.cts +64 -7
- package/dist/index.d.ts +64 -7
- package/dist/index.js +9144 -2657
- package/dist/styles.css +1 -1
- package/package.json +16 -15
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";
|
|
@@ -82,20 +118,27 @@ type ScreenshotSettings = {
|
|
|
82
118
|
download: boolean;
|
|
83
119
|
};
|
|
84
120
|
type MesurerStoredSettings = {
|
|
121
|
+
lastToolMode?: PersistentToolMode;
|
|
85
122
|
highlightColor?: string;
|
|
86
123
|
guideColor?: string;
|
|
124
|
+
arrowColor?: string;
|
|
87
125
|
guideHighlightEnabled?: boolean;
|
|
88
126
|
hoverHighlightEnabled?: boolean;
|
|
127
|
+
layoutDetailsEnabled?: boolean;
|
|
89
128
|
colorPickerFormats?: ColorPickerFormat[];
|
|
90
129
|
colorPickerClickFormat?: ColorPickerFormat;
|
|
91
130
|
snapEnabled?: boolean;
|
|
92
131
|
snapGuidesEnabled?: boolean;
|
|
132
|
+
snapArrowsEnabled?: boolean;
|
|
133
|
+
arrowClickToPlace?: boolean;
|
|
93
134
|
selectNewGuideEnabled?: boolean;
|
|
94
135
|
multiMeasureEnabled?: boolean;
|
|
95
136
|
persistOnReload?: boolean;
|
|
137
|
+
shortcutsEnabled?: boolean;
|
|
96
138
|
guideStyle?: Partial<GuideStyle>;
|
|
97
139
|
rulerSettings?: Partial<RulerSettings>;
|
|
98
140
|
screenshotSettings?: Partial<ScreenshotSettings>;
|
|
141
|
+
textStyle?: Partial<TextStyleSettings>;
|
|
99
142
|
};
|
|
100
143
|
type MesurerStoredWorkspace = {
|
|
101
144
|
enabled: boolean;
|
|
@@ -105,6 +148,12 @@ type MesurerStoredWorkspace = {
|
|
|
105
148
|
guideOrientation: "vertical" | "horizontal";
|
|
106
149
|
guides: Guide[];
|
|
107
150
|
selectedGuideIds: string[];
|
|
151
|
+
arrows: Arrow[];
|
|
152
|
+
selectedArrowIds: string[];
|
|
153
|
+
selectedPenStrokeIds?: string[];
|
|
154
|
+
selectedTextIds?: string[];
|
|
155
|
+
penStrokes: PenStroke[];
|
|
156
|
+
textAnnotations: TextAnnotation[];
|
|
108
157
|
measurements: Measurement[];
|
|
109
158
|
activeMeasurement: Measurement | null;
|
|
110
159
|
heldDistances: DistanceOverlay[];
|
|
@@ -133,24 +182,31 @@ declare const createLocalStoragePersistence: (ownerWindow: Window, workspaceKey:
|
|
|
133
182
|
type MesurerProps = {
|
|
134
183
|
highlightColor?: string;
|
|
135
184
|
guideColor?: string;
|
|
185
|
+
arrowColor?: string;
|
|
136
186
|
guideHighlightEnabled?: boolean;
|
|
137
187
|
hoverHighlightEnabled?: boolean;
|
|
188
|
+
layoutDetailsEnabled?: boolean;
|
|
138
189
|
persistOnReload?: boolean;
|
|
190
|
+
shortcutsEnabled?: boolean;
|
|
139
191
|
portalTarget?: HTMLElement | ShadowRoot;
|
|
140
192
|
persistKey?: string;
|
|
141
193
|
colorPickerFormats?: ColorPickerFormat[];
|
|
142
194
|
colorPickerClickFormat?: ColorPickerFormat;
|
|
143
195
|
snapEnabled?: boolean;
|
|
144
196
|
snapGuidesEnabled?: boolean;
|
|
197
|
+
snapArrowsEnabled?: boolean;
|
|
198
|
+
arrowClickToPlace?: boolean;
|
|
145
199
|
selectNewGuideEnabled?: boolean;
|
|
146
200
|
multiMeasureEnabled?: boolean;
|
|
147
201
|
guideStyle?: Partial<GuideStyle>;
|
|
148
202
|
rulerSettings?: Partial<RulerSettings>;
|
|
203
|
+
textStyle?: Partial<TextStyleSettings>;
|
|
149
204
|
persistence?: MesurerPersistence;
|
|
150
205
|
onPersistenceError?: (error: unknown) => void;
|
|
151
206
|
captureVisibleTab?: () => Promise<Blob>;
|
|
152
207
|
};
|
|
153
|
-
|
|
208
|
+
|
|
209
|
+
declare function Mesurer({ highlightColor, guideColor, arrowColor, guideHighlightEnabled, hoverHighlightEnabled, layoutDetailsEnabled, persistOnReload, shortcutsEnabled, portalTarget, persistKey, colorPickerFormats, colorPickerClickFormat, snapEnabled, snapGuidesEnabled, snapArrowsEnabled, arrowClickToPlace, selectNewGuideEnabled, multiMeasureEnabled, guideStyle, rulerSettings, textStyle, persistence, onPersistenceError, captureVisibleTab, }: MesurerProps): react_jsx_runtime.JSX.Element | null;
|
|
154
210
|
|
|
155
211
|
type TypographyRow = {
|
|
156
212
|
label: string;
|
|
@@ -171,10 +227,11 @@ type TextInspectorAPI = {
|
|
|
171
227
|
isEnabled: () => boolean;
|
|
172
228
|
cleanup: () => void;
|
|
173
229
|
destroy: () => void;
|
|
174
|
-
clear: () =>
|
|
230
|
+
clear: () => boolean;
|
|
175
231
|
inspect: (element: HTMLElement) => boolean;
|
|
176
232
|
canUndo: () => boolean;
|
|
177
233
|
canRedo: () => boolean;
|
|
234
|
+
setPaused: (paused: boolean) => void;
|
|
178
235
|
};
|
|
179
236
|
type TextInspectorOptions = {
|
|
180
237
|
id?: string;
|
|
@@ -188,4 +245,4 @@ type TextInspectorOptions = {
|
|
|
188
245
|
declare const createTextInspector: (options?: TextInspectorOptions, legacy?: boolean) => TextInspectorAPI;
|
|
189
246
|
declare const TextInspector: TextInspectorAPI;
|
|
190
247
|
|
|
191
|
-
export { type ColorPickerFormat, type ColorSample, type GuidePattern, type GuideStyle, MESURER_STORAGE_VERSION, Mesurer, type MesurerPersistence, type MesurerPersistenceSnapshot, type MesurerProps, type MesurerStoredSettings, type MesurerStoredWorkspace, type RulerSettings, type ScreenshotSettings, TextInspector, type TextInspectorAPI, type TextInspectorOptions, type TypographyInfo, type TypographyRow, createLocalStoragePersistence, createTextInspector, normalizeStoredSettings, normalizeStoredWorkspace };
|
|
248
|
+
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";
|
|
@@ -82,20 +118,27 @@ type ScreenshotSettings = {
|
|
|
82
118
|
download: boolean;
|
|
83
119
|
};
|
|
84
120
|
type MesurerStoredSettings = {
|
|
121
|
+
lastToolMode?: PersistentToolMode;
|
|
85
122
|
highlightColor?: string;
|
|
86
123
|
guideColor?: string;
|
|
124
|
+
arrowColor?: string;
|
|
87
125
|
guideHighlightEnabled?: boolean;
|
|
88
126
|
hoverHighlightEnabled?: boolean;
|
|
127
|
+
layoutDetailsEnabled?: boolean;
|
|
89
128
|
colorPickerFormats?: ColorPickerFormat[];
|
|
90
129
|
colorPickerClickFormat?: ColorPickerFormat;
|
|
91
130
|
snapEnabled?: boolean;
|
|
92
131
|
snapGuidesEnabled?: boolean;
|
|
132
|
+
snapArrowsEnabled?: boolean;
|
|
133
|
+
arrowClickToPlace?: boolean;
|
|
93
134
|
selectNewGuideEnabled?: boolean;
|
|
94
135
|
multiMeasureEnabled?: boolean;
|
|
95
136
|
persistOnReload?: boolean;
|
|
137
|
+
shortcutsEnabled?: boolean;
|
|
96
138
|
guideStyle?: Partial<GuideStyle>;
|
|
97
139
|
rulerSettings?: Partial<RulerSettings>;
|
|
98
140
|
screenshotSettings?: Partial<ScreenshotSettings>;
|
|
141
|
+
textStyle?: Partial<TextStyleSettings>;
|
|
99
142
|
};
|
|
100
143
|
type MesurerStoredWorkspace = {
|
|
101
144
|
enabled: boolean;
|
|
@@ -105,6 +148,12 @@ type MesurerStoredWorkspace = {
|
|
|
105
148
|
guideOrientation: "vertical" | "horizontal";
|
|
106
149
|
guides: Guide[];
|
|
107
150
|
selectedGuideIds: string[];
|
|
151
|
+
arrows: Arrow[];
|
|
152
|
+
selectedArrowIds: string[];
|
|
153
|
+
selectedPenStrokeIds?: string[];
|
|
154
|
+
selectedTextIds?: string[];
|
|
155
|
+
penStrokes: PenStroke[];
|
|
156
|
+
textAnnotations: TextAnnotation[];
|
|
108
157
|
measurements: Measurement[];
|
|
109
158
|
activeMeasurement: Measurement | null;
|
|
110
159
|
heldDistances: DistanceOverlay[];
|
|
@@ -133,24 +182,31 @@ declare const createLocalStoragePersistence: (ownerWindow: Window, workspaceKey:
|
|
|
133
182
|
type MesurerProps = {
|
|
134
183
|
highlightColor?: string;
|
|
135
184
|
guideColor?: string;
|
|
185
|
+
arrowColor?: string;
|
|
136
186
|
guideHighlightEnabled?: boolean;
|
|
137
187
|
hoverHighlightEnabled?: boolean;
|
|
188
|
+
layoutDetailsEnabled?: boolean;
|
|
138
189
|
persistOnReload?: boolean;
|
|
190
|
+
shortcutsEnabled?: boolean;
|
|
139
191
|
portalTarget?: HTMLElement | ShadowRoot;
|
|
140
192
|
persistKey?: string;
|
|
141
193
|
colorPickerFormats?: ColorPickerFormat[];
|
|
142
194
|
colorPickerClickFormat?: ColorPickerFormat;
|
|
143
195
|
snapEnabled?: boolean;
|
|
144
196
|
snapGuidesEnabled?: boolean;
|
|
197
|
+
snapArrowsEnabled?: boolean;
|
|
198
|
+
arrowClickToPlace?: boolean;
|
|
145
199
|
selectNewGuideEnabled?: boolean;
|
|
146
200
|
multiMeasureEnabled?: boolean;
|
|
147
201
|
guideStyle?: Partial<GuideStyle>;
|
|
148
202
|
rulerSettings?: Partial<RulerSettings>;
|
|
203
|
+
textStyle?: Partial<TextStyleSettings>;
|
|
149
204
|
persistence?: MesurerPersistence;
|
|
150
205
|
onPersistenceError?: (error: unknown) => void;
|
|
151
206
|
captureVisibleTab?: () => Promise<Blob>;
|
|
152
207
|
};
|
|
153
|
-
|
|
208
|
+
|
|
209
|
+
declare function Mesurer({ highlightColor, guideColor, arrowColor, guideHighlightEnabled, hoverHighlightEnabled, layoutDetailsEnabled, persistOnReload, shortcutsEnabled, portalTarget, persistKey, colorPickerFormats, colorPickerClickFormat, snapEnabled, snapGuidesEnabled, snapArrowsEnabled, arrowClickToPlace, selectNewGuideEnabled, multiMeasureEnabled, guideStyle, rulerSettings, textStyle, persistence, onPersistenceError, captureVisibleTab, }: MesurerProps): react_jsx_runtime.JSX.Element | null;
|
|
154
210
|
|
|
155
211
|
type TypographyRow = {
|
|
156
212
|
label: string;
|
|
@@ -171,10 +227,11 @@ type TextInspectorAPI = {
|
|
|
171
227
|
isEnabled: () => boolean;
|
|
172
228
|
cleanup: () => void;
|
|
173
229
|
destroy: () => void;
|
|
174
|
-
clear: () =>
|
|
230
|
+
clear: () => boolean;
|
|
175
231
|
inspect: (element: HTMLElement) => boolean;
|
|
176
232
|
canUndo: () => boolean;
|
|
177
233
|
canRedo: () => boolean;
|
|
234
|
+
setPaused: (paused: boolean) => void;
|
|
178
235
|
};
|
|
179
236
|
type TextInspectorOptions = {
|
|
180
237
|
id?: string;
|
|
@@ -188,4 +245,4 @@ type TextInspectorOptions = {
|
|
|
188
245
|
declare const createTextInspector: (options?: TextInspectorOptions, legacy?: boolean) => TextInspectorAPI;
|
|
189
246
|
declare const TextInspector: TextInspectorAPI;
|
|
190
247
|
|
|
191
|
-
export { type ColorPickerFormat, type ColorSample, type GuidePattern, type GuideStyle, MESURER_STORAGE_VERSION, Mesurer, type MesurerPersistence, type MesurerPersistenceSnapshot, type MesurerProps, type MesurerStoredSettings, type MesurerStoredWorkspace, type RulerSettings, type ScreenshotSettings, TextInspector, type TextInspectorAPI, type TextInspectorOptions, type TypographyInfo, type TypographyRow, createLocalStoragePersistence, createTextInspector, normalizeStoredSettings, normalizeStoredWorkspace };
|
|
248
|
+
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 };
|