mesurer 0.0.8 → 0.0.10
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 +22 -0
- package/README.md +30 -5
- package/dist/index.cjs +4283 -686
- package/dist/index.d.cts +169 -2
- package/dist/index.d.ts +169 -2
- package/dist/index.js +4258 -667
- package/dist/styles.css +518 -0
- package/package.json +5 -3
package/dist/index.d.cts
CHANGED
|
@@ -1,12 +1,179 @@
|
|
|
1
1
|
import * as react_jsx_runtime from 'react/jsx-runtime';
|
|
2
2
|
|
|
3
|
+
type ColorPickerFormat = "hex" | "rgb" | "hsl" | "oklch";
|
|
4
|
+
type ColorSample = {
|
|
5
|
+
red: number;
|
|
6
|
+
green: number;
|
|
7
|
+
blue: number;
|
|
8
|
+
alpha: number;
|
|
9
|
+
};
|
|
10
|
+
|
|
11
|
+
type Rect = {
|
|
12
|
+
left: number;
|
|
13
|
+
top: number;
|
|
14
|
+
width: number;
|
|
15
|
+
height: number;
|
|
16
|
+
};
|
|
17
|
+
type NormalizedRect = {
|
|
18
|
+
left: number;
|
|
19
|
+
top: number;
|
|
20
|
+
width: number;
|
|
21
|
+
height: number;
|
|
22
|
+
};
|
|
23
|
+
type Measurement = {
|
|
24
|
+
id: string;
|
|
25
|
+
rect: Rect;
|
|
26
|
+
normalizedRect: NormalizedRect;
|
|
27
|
+
elementRef?: HTMLElement | null;
|
|
28
|
+
originRect?: Rect;
|
|
29
|
+
deltaX: number;
|
|
30
|
+
deltaY: number;
|
|
31
|
+
snapped?: boolean;
|
|
32
|
+
};
|
|
33
|
+
type Guide = {
|
|
34
|
+
id: string;
|
|
35
|
+
orientation: "vertical" | "horizontal";
|
|
36
|
+
position: number;
|
|
37
|
+
};
|
|
38
|
+
type DistanceOverlay = {
|
|
39
|
+
id: string;
|
|
40
|
+
rectA: Rect;
|
|
41
|
+
rectB: Rect;
|
|
42
|
+
normalizedRectA: NormalizedRect;
|
|
43
|
+
normalizedRectB: NormalizedRect;
|
|
44
|
+
elementRefA?: HTMLElement | null;
|
|
45
|
+
elementRefB?: HTMLElement | null;
|
|
46
|
+
horizontal: {
|
|
47
|
+
x1: number;
|
|
48
|
+
x2: number;
|
|
49
|
+
y: number;
|
|
50
|
+
value: number;
|
|
51
|
+
} | null;
|
|
52
|
+
vertical: {
|
|
53
|
+
y1: number;
|
|
54
|
+
y2: number;
|
|
55
|
+
x: number;
|
|
56
|
+
value: number;
|
|
57
|
+
} | null;
|
|
58
|
+
connectors: Array<{
|
|
59
|
+
x1: number;
|
|
60
|
+
y1: number;
|
|
61
|
+
x2: number;
|
|
62
|
+
y2: number;
|
|
63
|
+
}>;
|
|
64
|
+
};
|
|
65
|
+
type ToolMode = "none" | "select" | "guides" | "text-inspector" | "xray" | "rulers";
|
|
66
|
+
|
|
67
|
+
declare const MESURER_STORAGE_VERSION = 2;
|
|
68
|
+
type GuidePattern = "solid" | "dashed" | "dotted";
|
|
69
|
+
type GuideStyle = {
|
|
70
|
+
opacity: number;
|
|
71
|
+
width: number;
|
|
72
|
+
pattern: GuidePattern;
|
|
73
|
+
dashLength: number;
|
|
74
|
+
gap: number;
|
|
75
|
+
};
|
|
76
|
+
type RulerSettings = {
|
|
77
|
+
opacity: number;
|
|
78
|
+
edgeReveal: boolean;
|
|
79
|
+
};
|
|
80
|
+
type MesurerStoredSettings = {
|
|
81
|
+
highlightColor?: string;
|
|
82
|
+
guideColor?: string;
|
|
83
|
+
hoverHighlightEnabled?: boolean;
|
|
84
|
+
colorPickerFormats?: ColorPickerFormat[];
|
|
85
|
+
colorPickerClickFormat?: ColorPickerFormat;
|
|
86
|
+
snapEnabled?: boolean;
|
|
87
|
+
snapGuidesEnabled?: boolean;
|
|
88
|
+
selectNewGuideEnabled?: boolean;
|
|
89
|
+
multiMeasureEnabled?: boolean;
|
|
90
|
+
persistOnReload?: boolean;
|
|
91
|
+
guideStyle?: Partial<GuideStyle>;
|
|
92
|
+
rulerSettings?: Partial<RulerSettings>;
|
|
93
|
+
};
|
|
94
|
+
type MesurerStoredWorkspace = {
|
|
95
|
+
enabled: boolean;
|
|
96
|
+
xrayVisible: boolean;
|
|
97
|
+
toolMode: ToolMode;
|
|
98
|
+
rulersVisible: boolean;
|
|
99
|
+
guideOrientation: "vertical" | "horizontal";
|
|
100
|
+
guides: Guide[];
|
|
101
|
+
selectedGuideIds: string[];
|
|
102
|
+
measurements: Measurement[];
|
|
103
|
+
activeMeasurement: Measurement | null;
|
|
104
|
+
heldDistances: DistanceOverlay[];
|
|
105
|
+
};
|
|
106
|
+
type MesurerPersistenceSnapshot = {
|
|
107
|
+
settings: MesurerStoredSettings;
|
|
108
|
+
workspace: MesurerStoredWorkspace | null;
|
|
109
|
+
};
|
|
110
|
+
type MesurerPersistence = {
|
|
111
|
+
load: () => MesurerPersistenceSnapshot | null;
|
|
112
|
+
saveSettings: (settings: MesurerStoredSettings) => void;
|
|
113
|
+
saveWorkspace: (workspace: MesurerStoredWorkspace) => void;
|
|
114
|
+
clearWorkspace: () => void;
|
|
115
|
+
clearSettings: () => void;
|
|
116
|
+
subscribe?: (listener: (snapshot: MesurerPersistenceSnapshot | null) => void) => () => void;
|
|
117
|
+
setErrorHandler?: (handler: ((error: unknown) => void) | undefined) => void;
|
|
118
|
+
};
|
|
119
|
+
declare const normalizeStoredSettings: (value: unknown) => MesurerStoredSettings;
|
|
120
|
+
declare const normalizeStoredWorkspace: (value: unknown) => MesurerStoredWorkspace | null;
|
|
121
|
+
declare const createLocalStoragePersistence: (ownerWindow: Window, workspaceKey: string, settingsKey?: string, legacyKey?: string) => MesurerPersistence;
|
|
122
|
+
|
|
3
123
|
type MeasurerProps = {
|
|
4
124
|
highlightColor?: string;
|
|
5
125
|
guideColor?: string;
|
|
6
126
|
hoverHighlightEnabled?: boolean;
|
|
7
127
|
persistOnReload?: boolean;
|
|
8
128
|
portalTarget?: HTMLElement | ShadowRoot;
|
|
129
|
+
persistKey?: string;
|
|
130
|
+
colorPickerFormats?: ColorPickerFormat[];
|
|
131
|
+
colorPickerClickFormat?: ColorPickerFormat;
|
|
132
|
+
snapEnabled?: boolean;
|
|
133
|
+
snapGuidesEnabled?: boolean;
|
|
134
|
+
selectNewGuideEnabled?: boolean;
|
|
135
|
+
multiMeasureEnabled?: boolean;
|
|
136
|
+
guideStyle?: Partial<GuideStyle>;
|
|
137
|
+
rulerSettings?: Partial<RulerSettings>;
|
|
138
|
+
persistence?: MesurerPersistence;
|
|
139
|
+
onPersistenceError?: (error: unknown) => void;
|
|
140
|
+
};
|
|
141
|
+
declare function Measurer({ highlightColor, guideColor, hoverHighlightEnabled, persistOnReload, portalTarget, persistKey, colorPickerFormats, colorPickerClickFormat, snapEnabled, snapGuidesEnabled, selectNewGuideEnabled, multiMeasureEnabled, guideStyle, rulerSettings, persistence, onPersistenceError, }: MeasurerProps): react_jsx_runtime.JSX.Element | null;
|
|
142
|
+
|
|
143
|
+
type TypographyRow = {
|
|
144
|
+
label: string;
|
|
145
|
+
value: string;
|
|
146
|
+
varName: string | null;
|
|
147
|
+
};
|
|
148
|
+
type TypographyInfo = {
|
|
149
|
+
rows: TypographyRow[];
|
|
150
|
+
tagName: string;
|
|
151
|
+
textSnippet: string;
|
|
152
|
+
};
|
|
153
|
+
|
|
154
|
+
type TextInspectorAPI = {
|
|
155
|
+
enable: () => void;
|
|
156
|
+
disable: () => void;
|
|
157
|
+
undo: () => boolean;
|
|
158
|
+
redo: () => boolean;
|
|
159
|
+
isEnabled: () => boolean;
|
|
160
|
+
cleanup: () => void;
|
|
161
|
+
destroy: () => void;
|
|
162
|
+
clear: () => void;
|
|
163
|
+
inspect: (element: HTMLElement) => boolean;
|
|
164
|
+
canUndo: () => boolean;
|
|
165
|
+
canRedo: () => boolean;
|
|
166
|
+
};
|
|
167
|
+
type TextInspectorOptions = {
|
|
168
|
+
id?: string;
|
|
169
|
+
ignoredTags?: readonly string[];
|
|
170
|
+
maxPinned?: number;
|
|
171
|
+
portalTarget?: HTMLElement | ShadowRoot;
|
|
172
|
+
onInspect?: (element: HTMLElement, info: TypographyInfo) => void;
|
|
173
|
+
onPin?: (element: HTMLElement, info: TypographyInfo) => void;
|
|
174
|
+
onUnpin?: (element: HTMLElement) => void;
|
|
9
175
|
};
|
|
10
|
-
declare
|
|
176
|
+
declare const createTextInspector: (options?: TextInspectorOptions, legacy?: boolean) => TextInspectorAPI;
|
|
177
|
+
declare const TextInspector: TextInspectorAPI;
|
|
11
178
|
|
|
12
|
-
export { Measurer };
|
|
179
|
+
export { type ColorPickerFormat, type ColorSample, type GuidePattern, type GuideStyle, MESURER_STORAGE_VERSION, Measurer, type MeasurerProps, type MesurerPersistence, type MesurerPersistenceSnapshot, type MesurerStoredSettings, type MesurerStoredWorkspace, type RulerSettings, TextInspector, type TextInspectorAPI, type TextInspectorOptions, type TypographyInfo, type TypographyRow, createLocalStoragePersistence, createTextInspector, normalizeStoredSettings, normalizeStoredWorkspace };
|
package/dist/index.d.ts
CHANGED
|
@@ -1,12 +1,179 @@
|
|
|
1
1
|
import * as react_jsx_runtime from 'react/jsx-runtime';
|
|
2
2
|
|
|
3
|
+
type ColorPickerFormat = "hex" | "rgb" | "hsl" | "oklch";
|
|
4
|
+
type ColorSample = {
|
|
5
|
+
red: number;
|
|
6
|
+
green: number;
|
|
7
|
+
blue: number;
|
|
8
|
+
alpha: number;
|
|
9
|
+
};
|
|
10
|
+
|
|
11
|
+
type Rect = {
|
|
12
|
+
left: number;
|
|
13
|
+
top: number;
|
|
14
|
+
width: number;
|
|
15
|
+
height: number;
|
|
16
|
+
};
|
|
17
|
+
type NormalizedRect = {
|
|
18
|
+
left: number;
|
|
19
|
+
top: number;
|
|
20
|
+
width: number;
|
|
21
|
+
height: number;
|
|
22
|
+
};
|
|
23
|
+
type Measurement = {
|
|
24
|
+
id: string;
|
|
25
|
+
rect: Rect;
|
|
26
|
+
normalizedRect: NormalizedRect;
|
|
27
|
+
elementRef?: HTMLElement | null;
|
|
28
|
+
originRect?: Rect;
|
|
29
|
+
deltaX: number;
|
|
30
|
+
deltaY: number;
|
|
31
|
+
snapped?: boolean;
|
|
32
|
+
};
|
|
33
|
+
type Guide = {
|
|
34
|
+
id: string;
|
|
35
|
+
orientation: "vertical" | "horizontal";
|
|
36
|
+
position: number;
|
|
37
|
+
};
|
|
38
|
+
type DistanceOverlay = {
|
|
39
|
+
id: string;
|
|
40
|
+
rectA: Rect;
|
|
41
|
+
rectB: Rect;
|
|
42
|
+
normalizedRectA: NormalizedRect;
|
|
43
|
+
normalizedRectB: NormalizedRect;
|
|
44
|
+
elementRefA?: HTMLElement | null;
|
|
45
|
+
elementRefB?: HTMLElement | null;
|
|
46
|
+
horizontal: {
|
|
47
|
+
x1: number;
|
|
48
|
+
x2: number;
|
|
49
|
+
y: number;
|
|
50
|
+
value: number;
|
|
51
|
+
} | null;
|
|
52
|
+
vertical: {
|
|
53
|
+
y1: number;
|
|
54
|
+
y2: number;
|
|
55
|
+
x: number;
|
|
56
|
+
value: number;
|
|
57
|
+
} | null;
|
|
58
|
+
connectors: Array<{
|
|
59
|
+
x1: number;
|
|
60
|
+
y1: number;
|
|
61
|
+
x2: number;
|
|
62
|
+
y2: number;
|
|
63
|
+
}>;
|
|
64
|
+
};
|
|
65
|
+
type ToolMode = "none" | "select" | "guides" | "text-inspector" | "xray" | "rulers";
|
|
66
|
+
|
|
67
|
+
declare const MESURER_STORAGE_VERSION = 2;
|
|
68
|
+
type GuidePattern = "solid" | "dashed" | "dotted";
|
|
69
|
+
type GuideStyle = {
|
|
70
|
+
opacity: number;
|
|
71
|
+
width: number;
|
|
72
|
+
pattern: GuidePattern;
|
|
73
|
+
dashLength: number;
|
|
74
|
+
gap: number;
|
|
75
|
+
};
|
|
76
|
+
type RulerSettings = {
|
|
77
|
+
opacity: number;
|
|
78
|
+
edgeReveal: boolean;
|
|
79
|
+
};
|
|
80
|
+
type MesurerStoredSettings = {
|
|
81
|
+
highlightColor?: string;
|
|
82
|
+
guideColor?: string;
|
|
83
|
+
hoverHighlightEnabled?: boolean;
|
|
84
|
+
colorPickerFormats?: ColorPickerFormat[];
|
|
85
|
+
colorPickerClickFormat?: ColorPickerFormat;
|
|
86
|
+
snapEnabled?: boolean;
|
|
87
|
+
snapGuidesEnabled?: boolean;
|
|
88
|
+
selectNewGuideEnabled?: boolean;
|
|
89
|
+
multiMeasureEnabled?: boolean;
|
|
90
|
+
persistOnReload?: boolean;
|
|
91
|
+
guideStyle?: Partial<GuideStyle>;
|
|
92
|
+
rulerSettings?: Partial<RulerSettings>;
|
|
93
|
+
};
|
|
94
|
+
type MesurerStoredWorkspace = {
|
|
95
|
+
enabled: boolean;
|
|
96
|
+
xrayVisible: boolean;
|
|
97
|
+
toolMode: ToolMode;
|
|
98
|
+
rulersVisible: boolean;
|
|
99
|
+
guideOrientation: "vertical" | "horizontal";
|
|
100
|
+
guides: Guide[];
|
|
101
|
+
selectedGuideIds: string[];
|
|
102
|
+
measurements: Measurement[];
|
|
103
|
+
activeMeasurement: Measurement | null;
|
|
104
|
+
heldDistances: DistanceOverlay[];
|
|
105
|
+
};
|
|
106
|
+
type MesurerPersistenceSnapshot = {
|
|
107
|
+
settings: MesurerStoredSettings;
|
|
108
|
+
workspace: MesurerStoredWorkspace | null;
|
|
109
|
+
};
|
|
110
|
+
type MesurerPersistence = {
|
|
111
|
+
load: () => MesurerPersistenceSnapshot | null;
|
|
112
|
+
saveSettings: (settings: MesurerStoredSettings) => void;
|
|
113
|
+
saveWorkspace: (workspace: MesurerStoredWorkspace) => void;
|
|
114
|
+
clearWorkspace: () => void;
|
|
115
|
+
clearSettings: () => void;
|
|
116
|
+
subscribe?: (listener: (snapshot: MesurerPersistenceSnapshot | null) => void) => () => void;
|
|
117
|
+
setErrorHandler?: (handler: ((error: unknown) => void) | undefined) => void;
|
|
118
|
+
};
|
|
119
|
+
declare const normalizeStoredSettings: (value: unknown) => MesurerStoredSettings;
|
|
120
|
+
declare const normalizeStoredWorkspace: (value: unknown) => MesurerStoredWorkspace | null;
|
|
121
|
+
declare const createLocalStoragePersistence: (ownerWindow: Window, workspaceKey: string, settingsKey?: string, legacyKey?: string) => MesurerPersistence;
|
|
122
|
+
|
|
3
123
|
type MeasurerProps = {
|
|
4
124
|
highlightColor?: string;
|
|
5
125
|
guideColor?: string;
|
|
6
126
|
hoverHighlightEnabled?: boolean;
|
|
7
127
|
persistOnReload?: boolean;
|
|
8
128
|
portalTarget?: HTMLElement | ShadowRoot;
|
|
129
|
+
persistKey?: string;
|
|
130
|
+
colorPickerFormats?: ColorPickerFormat[];
|
|
131
|
+
colorPickerClickFormat?: ColorPickerFormat;
|
|
132
|
+
snapEnabled?: boolean;
|
|
133
|
+
snapGuidesEnabled?: boolean;
|
|
134
|
+
selectNewGuideEnabled?: boolean;
|
|
135
|
+
multiMeasureEnabled?: boolean;
|
|
136
|
+
guideStyle?: Partial<GuideStyle>;
|
|
137
|
+
rulerSettings?: Partial<RulerSettings>;
|
|
138
|
+
persistence?: MesurerPersistence;
|
|
139
|
+
onPersistenceError?: (error: unknown) => void;
|
|
140
|
+
};
|
|
141
|
+
declare function Measurer({ highlightColor, guideColor, hoverHighlightEnabled, persistOnReload, portalTarget, persistKey, colorPickerFormats, colorPickerClickFormat, snapEnabled, snapGuidesEnabled, selectNewGuideEnabled, multiMeasureEnabled, guideStyle, rulerSettings, persistence, onPersistenceError, }: MeasurerProps): react_jsx_runtime.JSX.Element | null;
|
|
142
|
+
|
|
143
|
+
type TypographyRow = {
|
|
144
|
+
label: string;
|
|
145
|
+
value: string;
|
|
146
|
+
varName: string | null;
|
|
147
|
+
};
|
|
148
|
+
type TypographyInfo = {
|
|
149
|
+
rows: TypographyRow[];
|
|
150
|
+
tagName: string;
|
|
151
|
+
textSnippet: string;
|
|
152
|
+
};
|
|
153
|
+
|
|
154
|
+
type TextInspectorAPI = {
|
|
155
|
+
enable: () => void;
|
|
156
|
+
disable: () => void;
|
|
157
|
+
undo: () => boolean;
|
|
158
|
+
redo: () => boolean;
|
|
159
|
+
isEnabled: () => boolean;
|
|
160
|
+
cleanup: () => void;
|
|
161
|
+
destroy: () => void;
|
|
162
|
+
clear: () => void;
|
|
163
|
+
inspect: (element: HTMLElement) => boolean;
|
|
164
|
+
canUndo: () => boolean;
|
|
165
|
+
canRedo: () => boolean;
|
|
166
|
+
};
|
|
167
|
+
type TextInspectorOptions = {
|
|
168
|
+
id?: string;
|
|
169
|
+
ignoredTags?: readonly string[];
|
|
170
|
+
maxPinned?: number;
|
|
171
|
+
portalTarget?: HTMLElement | ShadowRoot;
|
|
172
|
+
onInspect?: (element: HTMLElement, info: TypographyInfo) => void;
|
|
173
|
+
onPin?: (element: HTMLElement, info: TypographyInfo) => void;
|
|
174
|
+
onUnpin?: (element: HTMLElement) => void;
|
|
9
175
|
};
|
|
10
|
-
declare
|
|
176
|
+
declare const createTextInspector: (options?: TextInspectorOptions, legacy?: boolean) => TextInspectorAPI;
|
|
177
|
+
declare const TextInspector: TextInspectorAPI;
|
|
11
178
|
|
|
12
|
-
export { Measurer };
|
|
179
|
+
export { type ColorPickerFormat, type ColorSample, type GuidePattern, type GuideStyle, MESURER_STORAGE_VERSION, Measurer, type MeasurerProps, type MesurerPersistence, type MesurerPersistenceSnapshot, type MesurerStoredSettings, type MesurerStoredWorkspace, type RulerSettings, TextInspector, type TextInspectorAPI, type TextInspectorOptions, type TypographyInfo, type TypographyRow, createLocalStoragePersistence, createTextInspector, normalizeStoredSettings, normalizeStoredWorkspace };
|