mesurer 0.1.0 → 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.
Files changed (8) hide show
  1. package/CHANGELOG.md +8 -0
  2. package/README.md +31 -16
  3. package/dist/index.cjs +8260 -2736
  4. package/dist/index.d.cts +61 -6
  5. package/dist/index.d.ts +61 -6
  6. package/dist/index.js +8235 -2688
  7. package/dist/styles.css +1 -1
  8. 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?: HTMLElement | null;
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?: HTMLElement | null;
45
- elementRefB?: HTMLElement | null;
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,26 @@ 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;
96
137
  guideStyle?: Partial<GuideStyle>;
97
138
  rulerSettings?: Partial<RulerSettings>;
98
139
  screenshotSettings?: Partial<ScreenshotSettings>;
140
+ textStyle?: Partial<TextStyleSettings>;
99
141
  };
100
142
  type MesurerStoredWorkspace = {
101
143
  enabled: boolean;
@@ -105,6 +147,12 @@ type MesurerStoredWorkspace = {
105
147
  guideOrientation: "vertical" | "horizontal";
106
148
  guides: Guide[];
107
149
  selectedGuideIds: string[];
150
+ arrows: Arrow[];
151
+ selectedArrowIds: string[];
152
+ selectedPenStrokeIds?: string[];
153
+ selectedTextIds?: string[];
154
+ penStrokes: PenStroke[];
155
+ textAnnotations: TextAnnotation[];
108
156
  measurements: Measurement[];
109
157
  activeMeasurement: Measurement | null;
110
158
  heldDistances: DistanceOverlay[];
@@ -133,8 +181,10 @@ declare const createLocalStoragePersistence: (ownerWindow: Window, workspaceKey:
133
181
  type MesurerProps = {
134
182
  highlightColor?: string;
135
183
  guideColor?: string;
184
+ arrowColor?: string;
136
185
  guideHighlightEnabled?: boolean;
137
186
  hoverHighlightEnabled?: boolean;
187
+ layoutDetailsEnabled?: boolean;
138
188
  persistOnReload?: boolean;
139
189
  portalTarget?: HTMLElement | ShadowRoot;
140
190
  persistKey?: string;
@@ -142,15 +192,19 @@ type MesurerProps = {
142
192
  colorPickerClickFormat?: ColorPickerFormat;
143
193
  snapEnabled?: boolean;
144
194
  snapGuidesEnabled?: boolean;
195
+ snapArrowsEnabled?: boolean;
196
+ arrowClickToPlace?: boolean;
145
197
  selectNewGuideEnabled?: boolean;
146
198
  multiMeasureEnabled?: boolean;
147
199
  guideStyle?: Partial<GuideStyle>;
148
200
  rulerSettings?: Partial<RulerSettings>;
201
+ textStyle?: Partial<TextStyleSettings>;
149
202
  persistence?: MesurerPersistence;
150
203
  onPersistenceError?: (error: unknown) => void;
151
204
  captureVisibleTab?: () => Promise<Blob>;
152
205
  };
153
- declare function Mesurer({ highlightColor, guideColor, guideHighlightEnabled, hoverHighlightEnabled, persistOnReload, portalTarget, persistKey, colorPickerFormats, colorPickerClickFormat, snapEnabled, snapGuidesEnabled, selectNewGuideEnabled, multiMeasureEnabled, guideStyle, rulerSettings, persistence, onPersistenceError, captureVisibleTab, }: MesurerProps): react_jsx_runtime.JSX.Element | null;
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;
154
208
 
155
209
  type TypographyRow = {
156
210
  label: string;
@@ -175,6 +229,7 @@ type TextInspectorAPI = {
175
229
  inspect: (element: HTMLElement) => boolean;
176
230
  canUndo: () => boolean;
177
231
  canRedo: () => boolean;
232
+ setPaused: (paused: boolean) => void;
178
233
  };
179
234
  type TextInspectorOptions = {
180
235
  id?: string;
@@ -188,4 +243,4 @@ type TextInspectorOptions = {
188
243
  declare const createTextInspector: (options?: TextInspectorOptions, legacy?: boolean) => TextInspectorAPI;
189
244
  declare const TextInspector: TextInspectorAPI;
190
245
 
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 };
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?: HTMLElement | null;
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?: HTMLElement | null;
45
- elementRefB?: HTMLElement | null;
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,26 @@ 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;
96
137
  guideStyle?: Partial<GuideStyle>;
97
138
  rulerSettings?: Partial<RulerSettings>;
98
139
  screenshotSettings?: Partial<ScreenshotSettings>;
140
+ textStyle?: Partial<TextStyleSettings>;
99
141
  };
100
142
  type MesurerStoredWorkspace = {
101
143
  enabled: boolean;
@@ -105,6 +147,12 @@ type MesurerStoredWorkspace = {
105
147
  guideOrientation: "vertical" | "horizontal";
106
148
  guides: Guide[];
107
149
  selectedGuideIds: string[];
150
+ arrows: Arrow[];
151
+ selectedArrowIds: string[];
152
+ selectedPenStrokeIds?: string[];
153
+ selectedTextIds?: string[];
154
+ penStrokes: PenStroke[];
155
+ textAnnotations: TextAnnotation[];
108
156
  measurements: Measurement[];
109
157
  activeMeasurement: Measurement | null;
110
158
  heldDistances: DistanceOverlay[];
@@ -133,8 +181,10 @@ declare const createLocalStoragePersistence: (ownerWindow: Window, workspaceKey:
133
181
  type MesurerProps = {
134
182
  highlightColor?: string;
135
183
  guideColor?: string;
184
+ arrowColor?: string;
136
185
  guideHighlightEnabled?: boolean;
137
186
  hoverHighlightEnabled?: boolean;
187
+ layoutDetailsEnabled?: boolean;
138
188
  persistOnReload?: boolean;
139
189
  portalTarget?: HTMLElement | ShadowRoot;
140
190
  persistKey?: string;
@@ -142,15 +192,19 @@ type MesurerProps = {
142
192
  colorPickerClickFormat?: ColorPickerFormat;
143
193
  snapEnabled?: boolean;
144
194
  snapGuidesEnabled?: boolean;
195
+ snapArrowsEnabled?: boolean;
196
+ arrowClickToPlace?: boolean;
145
197
  selectNewGuideEnabled?: boolean;
146
198
  multiMeasureEnabled?: boolean;
147
199
  guideStyle?: Partial<GuideStyle>;
148
200
  rulerSettings?: Partial<RulerSettings>;
201
+ textStyle?: Partial<TextStyleSettings>;
149
202
  persistence?: MesurerPersistence;
150
203
  onPersistenceError?: (error: unknown) => void;
151
204
  captureVisibleTab?: () => Promise<Blob>;
152
205
  };
153
- declare function Mesurer({ highlightColor, guideColor, guideHighlightEnabled, hoverHighlightEnabled, persistOnReload, portalTarget, persistKey, colorPickerFormats, colorPickerClickFormat, snapEnabled, snapGuidesEnabled, selectNewGuideEnabled, multiMeasureEnabled, guideStyle, rulerSettings, persistence, onPersistenceError, captureVisibleTab, }: MesurerProps): react_jsx_runtime.JSX.Element | null;
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;
154
208
 
155
209
  type TypographyRow = {
156
210
  label: string;
@@ -175,6 +229,7 @@ type TextInspectorAPI = {
175
229
  inspect: (element: HTMLElement) => boolean;
176
230
  canUndo: () => boolean;
177
231
  canRedo: () => boolean;
232
+ setPaused: (paused: boolean) => void;
178
233
  };
179
234
  type TextInspectorOptions = {
180
235
  id?: string;
@@ -188,4 +243,4 @@ type TextInspectorOptions = {
188
243
  declare const createTextInspector: (options?: TextInspectorOptions, legacy?: boolean) => TextInspectorAPI;
189
244
  declare const TextInspector: TextInspectorAPI;
190
245
 
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 };
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 };