mesurer 0.0.9 → 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.
Files changed (8) hide show
  1. package/CHANGELOG.md +9 -0
  2. package/README.md +28 -7
  3. package/dist/index.cjs +2388 -539
  4. package/dist/index.d.cts +132 -2
  5. package/dist/index.d.ts +132 -2
  6. package/dist/index.js +2361 -515
  7. package/dist/styles.css +484 -0
  8. package/package.json +9 -8
package/dist/index.d.cts CHANGED
@@ -1,5 +1,125 @@
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;
@@ -7,8 +127,18 @@ type MeasurerProps = {
7
127
  persistOnReload?: boolean;
8
128
  portalTarget?: HTMLElement | ShadowRoot;
9
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;
10
140
  };
11
- declare function Measurer({ highlightColor, guideColor, hoverHighlightEnabled, persistOnReload, portalTarget, persistKey, }: MeasurerProps): react_jsx_runtime.JSX.Element | null;
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;
12
142
 
13
143
  type TypographyRow = {
14
144
  label: string;
@@ -46,4 +176,4 @@ type TextInspectorOptions = {
46
176
  declare const createTextInspector: (options?: TextInspectorOptions, legacy?: boolean) => TextInspectorAPI;
47
177
  declare const TextInspector: TextInspectorAPI;
48
178
 
49
- export { Measurer, TextInspector, type TextInspectorAPI, type TextInspectorOptions, type TypographyInfo, type TypographyRow, createTextInspector };
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,5 +1,125 @@
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;
@@ -7,8 +127,18 @@ type MeasurerProps = {
7
127
  persistOnReload?: boolean;
8
128
  portalTarget?: HTMLElement | ShadowRoot;
9
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;
10
140
  };
11
- declare function Measurer({ highlightColor, guideColor, hoverHighlightEnabled, persistOnReload, portalTarget, persistKey, }: MeasurerProps): react_jsx_runtime.JSX.Element | null;
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;
12
142
 
13
143
  type TypographyRow = {
14
144
  label: string;
@@ -46,4 +176,4 @@ type TextInspectorOptions = {
46
176
  declare const createTextInspector: (options?: TextInspectorOptions, legacy?: boolean) => TextInspectorAPI;
47
177
  declare const TextInspector: TextInspectorAPI;
48
178
 
49
- export { Measurer, TextInspector, type TextInspectorAPI, type TextInspectorOptions, type TypographyInfo, type TypographyRow, createTextInspector };
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 };