@molecule/app-image-crop 1.0.0
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/LICENSE +115 -0
- package/dist/index.d.ts +72 -0
- package/dist/index.d.ts.map +1 -0
- package/dist/index.js +71 -0
- package/dist/provider.d.ts +37 -0
- package/dist/provider.d.ts.map +1 -0
- package/dist/provider.js +48 -0
- package/dist/types.d.ts +123 -0
- package/dist/types.d.ts.map +1 -0
- package/dist/types.js +9 -0
- package/package.json +37 -0
package/LICENSE
ADDED
|
@@ -0,0 +1,115 @@
|
|
|
1
|
+
Apache License
|
|
2
|
+
Version 2.0, January 2004
|
|
3
|
+
http://www.apache.org/licenses/
|
|
4
|
+
|
|
5
|
+
TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION
|
|
6
|
+
|
|
7
|
+
1. Definitions.
|
|
8
|
+
|
|
9
|
+
"License" shall mean the terms and conditions for use, reproduction,
|
|
10
|
+
and distribution as defined by Sections 1 through 9 of this document.
|
|
11
|
+
|
|
12
|
+
"Licensor" shall mean the copyright owner or entity authorized by
|
|
13
|
+
the copyright owner that is granting the License.
|
|
14
|
+
|
|
15
|
+
"Legal Entity" shall mean the union of the acting entity and all
|
|
16
|
+
other entities that control, are controlled by, or are under common
|
|
17
|
+
control with that entity. For the purposes of this definition,
|
|
18
|
+
"control" means (i) the power, direct or indirect, to cause the
|
|
19
|
+
direction or management of such entity, whether by contract or
|
|
20
|
+
otherwise, or (ii) ownership of fifty percent (50%) or more of the
|
|
21
|
+
outstanding shares, or (iii) beneficial ownership of such entity.
|
|
22
|
+
|
|
23
|
+
"You" (or "Your") shall mean an individual or Legal Entity
|
|
24
|
+
exercising permissions granted by this License.
|
|
25
|
+
|
|
26
|
+
"Source" form shall mean the preferred form for making modifications,
|
|
27
|
+
including but not limited to software source code, documentation
|
|
28
|
+
source, and configuration files.
|
|
29
|
+
|
|
30
|
+
"Object" form shall mean any form resulting from mechanical
|
|
31
|
+
transformation or translation of a Source form, including but
|
|
32
|
+
not limited to compiled object code, generated documentation,
|
|
33
|
+
and conversions to other media types.
|
|
34
|
+
|
|
35
|
+
"Work" shall mean the work of authorship, whether in Source or
|
|
36
|
+
Object form, made available under the License, as indicated by a
|
|
37
|
+
copyright notice that is included in or attached to the work.
|
|
38
|
+
|
|
39
|
+
"Derivative Works" shall mean any work, whether in Source or Object
|
|
40
|
+
form, that is based on (or derived from) the Work and for which the
|
|
41
|
+
editorial revisions, annotations, elaborations, or other modifications
|
|
42
|
+
represent, as a whole, an original work of authorship.
|
|
43
|
+
|
|
44
|
+
"Contribution" shall mean any work of authorship, including the
|
|
45
|
+
original version of the Work and any modifications or additions
|
|
46
|
+
to that Work, that is intentionally submitted to the Licensor for
|
|
47
|
+
inclusion in the Work by the copyright owner or by an individual or
|
|
48
|
+
Legal Entity authorized to submit on behalf of the copyright owner.
|
|
49
|
+
|
|
50
|
+
"Contributor" shall mean Licensor and any individual or Legal Entity
|
|
51
|
+
on behalf of whom a Contribution has been received by the Licensor and
|
|
52
|
+
subsequently incorporated within the Work.
|
|
53
|
+
|
|
54
|
+
2. Grant of Copyright License. Subject to the terms and conditions of
|
|
55
|
+
this License, each Contributor hereby grants to You a perpetual,
|
|
56
|
+
worldwide, non-exclusive, no-charge, royalty-free, irrevocable
|
|
57
|
+
copyright license to reproduce, prepare Derivative Works of,
|
|
58
|
+
publicly display, publicly perform, sublicense, and distribute the
|
|
59
|
+
Work and such Derivative Works in Source or Object form.
|
|
60
|
+
|
|
61
|
+
3. Grant of Patent License. Subject to the terms and conditions of
|
|
62
|
+
this License, each Contributor hereby grants to You a perpetual,
|
|
63
|
+
worldwide, non-exclusive, no-charge, royalty-free, irrevocable
|
|
64
|
+
patent license to make, have made, use, offer to sell, sell, import,
|
|
65
|
+
and otherwise transfer the Work.
|
|
66
|
+
|
|
67
|
+
4. Redistribution. You may reproduce and distribute copies of the
|
|
68
|
+
Work or Derivative Works thereof in any medium, with or without
|
|
69
|
+
modifications, and in Source or Object form, provided that You
|
|
70
|
+
meet the following conditions:
|
|
71
|
+
|
|
72
|
+
(a) You must give any other recipients of the Work or
|
|
73
|
+
Derivative Works a copy of this License; and
|
|
74
|
+
|
|
75
|
+
(b) You must cause any modified files to carry prominent notices
|
|
76
|
+
stating that You changed the files; and
|
|
77
|
+
|
|
78
|
+
(c) You must retain, in the Source form of any Derivative Works
|
|
79
|
+
that You distribute, all copyright, patent, trademark, and
|
|
80
|
+
attribution notices from the Source form of the Work,
|
|
81
|
+
excluding those notices that do not pertain to any part of
|
|
82
|
+
the Derivative Works; and
|
|
83
|
+
|
|
84
|
+
(d) If the Work includes a "NOTICE" text file as part of its
|
|
85
|
+
distribution, then any Derivative Works that You distribute must
|
|
86
|
+
include a readable copy of the attribution notices contained
|
|
87
|
+
within such NOTICE file.
|
|
88
|
+
|
|
89
|
+
5. Submission of Contributions.
|
|
90
|
+
|
|
91
|
+
6. Trademarks. This License does not grant permission to use the trade
|
|
92
|
+
names, trademarks, service marks, or product names of the Licensor.
|
|
93
|
+
|
|
94
|
+
7. Disclaimer of Warranty. Unless required by applicable law or
|
|
95
|
+
agreed to in writing, Licensor provides the Work on an "AS IS" BASIS,
|
|
96
|
+
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND.
|
|
97
|
+
|
|
98
|
+
8. Limitation of Liability. In no event and under no legal theory shall
|
|
99
|
+
any Contributor be liable to You for damages.
|
|
100
|
+
|
|
101
|
+
9. Accepting Warranty or Additional Liability.
|
|
102
|
+
|
|
103
|
+
Copyright 2026 Molecule Dev, Inc.
|
|
104
|
+
|
|
105
|
+
Licensed under the Apache License, Version 2.0 (the "License");
|
|
106
|
+
you may not use this file except in compliance with the License.
|
|
107
|
+
You may obtain a copy of the License at
|
|
108
|
+
|
|
109
|
+
http://www.apache.org/licenses/LICENSE-2.0
|
|
110
|
+
|
|
111
|
+
Unless required by applicable law or agreed to in writing, software
|
|
112
|
+
distributed under the License is distributed on an "AS IS" BASIS,
|
|
113
|
+
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
|
114
|
+
See the License for the specific language governing permissions and
|
|
115
|
+
limitations under the License.
|
package/dist/index.d.ts
ADDED
|
@@ -0,0 +1,72 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Image crop core interface for molecule.dev.
|
|
3
|
+
*
|
|
4
|
+
* Framework-agnostic contract for image cropping: crop-region **state**
|
|
5
|
+
* (rect, rotation, zoom) plus cropped-canvas output. Bond a provider (e.g.
|
|
6
|
+
* `@molecule/app-image-crop-cropperjs`) to supply the crop math; your UI
|
|
7
|
+
* renders the preview and drag handles and feeds gestures into the instance.
|
|
8
|
+
*
|
|
9
|
+
* @example
|
|
10
|
+
* ```typescript
|
|
11
|
+
* import { setProvider, requireProvider } from '@molecule/app-image-crop'
|
|
12
|
+
* import { provider } from '@molecule/app-image-crop-cropperjs'
|
|
13
|
+
*
|
|
14
|
+
* setProvider(provider) // once, at app startup (bonds.ts)
|
|
15
|
+
*
|
|
16
|
+
* const cropper = requireProvider().createCropper({
|
|
17
|
+
* src: '/photos/avatar.jpg',
|
|
18
|
+
* aspectRatio: 1,
|
|
19
|
+
* circular: true,
|
|
20
|
+
* })
|
|
21
|
+
* const canvas = cropper.getCroppedCanvas({ width: 200, height: 200 })
|
|
22
|
+
* canvas.toBlob((blob) => uploadAvatar(blob))
|
|
23
|
+
* ```
|
|
24
|
+
*
|
|
25
|
+
* @remarks
|
|
26
|
+
* - **The instance is headless — no crop UI mounts anywhere.** Render the image,
|
|
27
|
+
* crop-box overlay, and handles yourself (styled via `getClassMap()`/`cm.*`) and
|
|
28
|
+
* translate drag/resize gestures into `setCropData()` / `rotate()` / `zoom()`;
|
|
29
|
+
* read `getCropData()` to draw the overlay.
|
|
30
|
+
* - **Verify the cropped output end-to-end before shipping** — draw the returned
|
|
31
|
+
* canvas into the page or upload-and-render it; an empty/blank result means the
|
|
32
|
+
* bonded provider does not implement canvas output, which is an integration bug
|
|
33
|
+
* to fix, not to skip.
|
|
34
|
+
* - **Wire with THIS package's `setProvider()` or `bond('image-crop', …)`** —
|
|
35
|
+
* `setProvider()` delegates into the shared `@molecule/app-bond` registry, so both
|
|
36
|
+
* write the same slot; `requireProvider()` throws until one has run.
|
|
37
|
+
* - Upload the result as a Blob (`canvas.toBlob`) through your upload path; the
|
|
38
|
+
* server must re-validate the file (type/size) — client cropping is UX, not a
|
|
39
|
+
* boundary.
|
|
40
|
+
*
|
|
41
|
+
* @e2e
|
|
42
|
+
* Integration checklist — drive the real UI (live preview, no mocks), adapt each
|
|
43
|
+
* item to this app's actual crop screen (avatar/photo upload, etc.), and check
|
|
44
|
+
* every box off one by one. A box you can't check is an integration bug to fix —
|
|
45
|
+
* not a skip. The cropper is headless, so verify the UI YOU rendered:
|
|
46
|
+
* - [ ] Opening the crop screen loads the source image (`createCropper({ src })`)
|
|
47
|
+
* and renders it with a visible crop-box overlay + drag handles drawn from
|
|
48
|
+
* `getCropData()` — not a blank or full-bleed image with no selection.
|
|
49
|
+
* - [ ] Dragging/resizing the crop box feeds the gesture into `setCropData()`,
|
|
50
|
+
* `getCropData()` reflects the new x/y/width/height, and the on-page preview
|
|
51
|
+
* (the `getCroppedCanvas()` output drawn into the page) updates to show ONLY
|
|
52
|
+
* the selected area, not the whole image.
|
|
53
|
+
* - [ ] With an aspect-ratio lock (e.g. `aspectRatio: 1` for an avatar) the crop
|
|
54
|
+
* box stays that ratio while you resize — `getCropData()` width == height for
|
|
55
|
+
* 1:1 — and `circular: true` clips the preview to a circle.
|
|
56
|
+
* - [ ] `rotate()` / `zoom()` transform the source and the crop overlay follows:
|
|
57
|
+
* `getCropData().rotate` / `scaleX` change and the preview re-renders the
|
|
58
|
+
* transformed region — the selection isn't stranded on the old orientation.
|
|
59
|
+
* - [ ] Applying the crop OUTPUTS the cropped image: `getCroppedCanvas()` pixels
|
|
60
|
+
* match the selected region (not the full source), and downstream the SAVED
|
|
61
|
+
* file is the cropped Blob (`canvas.toBlob` → upload) — re-fetch and render the
|
|
62
|
+
* stored image and confirm it shows the crop, never the original.
|
|
63
|
+
* - [ ] Min/max crop size is enforced — you cannot drag the box smaller than
|
|
64
|
+
* `minWidth`/`minHeight` or larger than `maxWidth`/`maxHeight`.
|
|
65
|
+
* - [ ] Cancel/close discards without mutating the source: the original image is
|
|
66
|
+
* unchanged and no cropped result is saved.
|
|
67
|
+
*
|
|
68
|
+
* @module
|
|
69
|
+
*/
|
|
70
|
+
export * from './provider.js';
|
|
71
|
+
export * from './types.js';
|
|
72
|
+
//# sourceMappingURL=index.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAoEG;AAEH,cAAc,eAAe,CAAA;AAC7B,cAAc,YAAY,CAAA"}
|
package/dist/index.js
ADDED
|
@@ -0,0 +1,71 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Image crop core interface for molecule.dev.
|
|
3
|
+
*
|
|
4
|
+
* Framework-agnostic contract for image cropping: crop-region **state**
|
|
5
|
+
* (rect, rotation, zoom) plus cropped-canvas output. Bond a provider (e.g.
|
|
6
|
+
* `@molecule/app-image-crop-cropperjs`) to supply the crop math; your UI
|
|
7
|
+
* renders the preview and drag handles and feeds gestures into the instance.
|
|
8
|
+
*
|
|
9
|
+
* @example
|
|
10
|
+
* ```typescript
|
|
11
|
+
* import { setProvider, requireProvider } from '@molecule/app-image-crop'
|
|
12
|
+
* import { provider } from '@molecule/app-image-crop-cropperjs'
|
|
13
|
+
*
|
|
14
|
+
* setProvider(provider) // once, at app startup (bonds.ts)
|
|
15
|
+
*
|
|
16
|
+
* const cropper = requireProvider().createCropper({
|
|
17
|
+
* src: '/photos/avatar.jpg',
|
|
18
|
+
* aspectRatio: 1,
|
|
19
|
+
* circular: true,
|
|
20
|
+
* })
|
|
21
|
+
* const canvas = cropper.getCroppedCanvas({ width: 200, height: 200 })
|
|
22
|
+
* canvas.toBlob((blob) => uploadAvatar(blob))
|
|
23
|
+
* ```
|
|
24
|
+
*
|
|
25
|
+
* @remarks
|
|
26
|
+
* - **The instance is headless — no crop UI mounts anywhere.** Render the image,
|
|
27
|
+
* crop-box overlay, and handles yourself (styled via `getClassMap()`/`cm.*`) and
|
|
28
|
+
* translate drag/resize gestures into `setCropData()` / `rotate()` / `zoom()`;
|
|
29
|
+
* read `getCropData()` to draw the overlay.
|
|
30
|
+
* - **Verify the cropped output end-to-end before shipping** — draw the returned
|
|
31
|
+
* canvas into the page or upload-and-render it; an empty/blank result means the
|
|
32
|
+
* bonded provider does not implement canvas output, which is an integration bug
|
|
33
|
+
* to fix, not to skip.
|
|
34
|
+
* - **Wire with THIS package's `setProvider()` or `bond('image-crop', …)`** —
|
|
35
|
+
* `setProvider()` delegates into the shared `@molecule/app-bond` registry, so both
|
|
36
|
+
* write the same slot; `requireProvider()` throws until one has run.
|
|
37
|
+
* - Upload the result as a Blob (`canvas.toBlob`) through your upload path; the
|
|
38
|
+
* server must re-validate the file (type/size) — client cropping is UX, not a
|
|
39
|
+
* boundary.
|
|
40
|
+
*
|
|
41
|
+
* @e2e
|
|
42
|
+
* Integration checklist — drive the real UI (live preview, no mocks), adapt each
|
|
43
|
+
* item to this app's actual crop screen (avatar/photo upload, etc.), and check
|
|
44
|
+
* every box off one by one. A box you can't check is an integration bug to fix —
|
|
45
|
+
* not a skip. The cropper is headless, so verify the UI YOU rendered:
|
|
46
|
+
* - [ ] Opening the crop screen loads the source image (`createCropper({ src })`)
|
|
47
|
+
* and renders it with a visible crop-box overlay + drag handles drawn from
|
|
48
|
+
* `getCropData()` — not a blank or full-bleed image with no selection.
|
|
49
|
+
* - [ ] Dragging/resizing the crop box feeds the gesture into `setCropData()`,
|
|
50
|
+
* `getCropData()` reflects the new x/y/width/height, and the on-page preview
|
|
51
|
+
* (the `getCroppedCanvas()` output drawn into the page) updates to show ONLY
|
|
52
|
+
* the selected area, not the whole image.
|
|
53
|
+
* - [ ] With an aspect-ratio lock (e.g. `aspectRatio: 1` for an avatar) the crop
|
|
54
|
+
* box stays that ratio while you resize — `getCropData()` width == height for
|
|
55
|
+
* 1:1 — and `circular: true` clips the preview to a circle.
|
|
56
|
+
* - [ ] `rotate()` / `zoom()` transform the source and the crop overlay follows:
|
|
57
|
+
* `getCropData().rotate` / `scaleX` change and the preview re-renders the
|
|
58
|
+
* transformed region — the selection isn't stranded on the old orientation.
|
|
59
|
+
* - [ ] Applying the crop OUTPUTS the cropped image: `getCroppedCanvas()` pixels
|
|
60
|
+
* match the selected region (not the full source), and downstream the SAVED
|
|
61
|
+
* file is the cropped Blob (`canvas.toBlob` → upload) — re-fetch and render the
|
|
62
|
+
* stored image and confirm it shows the crop, never the original.
|
|
63
|
+
* - [ ] Min/max crop size is enforced — you cannot drag the box smaller than
|
|
64
|
+
* `minWidth`/`minHeight` or larger than `maxWidth`/`maxHeight`.
|
|
65
|
+
* - [ ] Cancel/close discards without mutating the source: the original image is
|
|
66
|
+
* unchanged and no cropped result is saved.
|
|
67
|
+
*
|
|
68
|
+
* @module
|
|
69
|
+
*/
|
|
70
|
+
export * from './provider.js';
|
|
71
|
+
export * from './types.js';
|
|
@@ -0,0 +1,37 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Image crop provider wiring, backed by the shared `@molecule/app-bond` registry.
|
|
3
|
+
*
|
|
4
|
+
* Bond packages call `setProvider()` during setup; it delegates to
|
|
5
|
+
* `bond('image-crop', provider)`, so wiring via this package's `setProvider()`
|
|
6
|
+
* and via `bond('image-crop', …)` write the SAME registry slot — use either.
|
|
7
|
+
* Application code calls `getProvider()` / `requireProvider()` at runtime.
|
|
8
|
+
*
|
|
9
|
+
* @module
|
|
10
|
+
*/
|
|
11
|
+
import type { ImageCropProvider } from './types.js';
|
|
12
|
+
/**
|
|
13
|
+
* Registers an image crop provider as the active singleton.
|
|
14
|
+
*
|
|
15
|
+
* @param provider - The image crop provider implementation to bond.
|
|
16
|
+
*/
|
|
17
|
+
export declare function setProvider(provider: ImageCropProvider): void;
|
|
18
|
+
/**
|
|
19
|
+
* Retrieves the bonded image crop provider, or `null` if none is bonded.
|
|
20
|
+
*
|
|
21
|
+
* @returns The active image crop provider, or `null`.
|
|
22
|
+
*/
|
|
23
|
+
export declare function getProvider(): ImageCropProvider | null;
|
|
24
|
+
/**
|
|
25
|
+
* Checks whether an image crop provider has been bonded.
|
|
26
|
+
*
|
|
27
|
+
* @returns `true` if an image crop provider is available.
|
|
28
|
+
*/
|
|
29
|
+
export declare function hasProvider(): boolean;
|
|
30
|
+
/**
|
|
31
|
+
* Retrieves the bonded image crop provider, throwing if none is configured.
|
|
32
|
+
*
|
|
33
|
+
* @returns The active image crop provider.
|
|
34
|
+
* @throws {Error} if no provider has been bonded.
|
|
35
|
+
*/
|
|
36
|
+
export declare function requireProvider(): ImageCropProvider;
|
|
37
|
+
//# sourceMappingURL=provider.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"provider.d.ts","sourceRoot":"","sources":["../src/provider.ts"],"names":[],"mappings":"AAAA;;;;;;;;;GASG;AAIH,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,YAAY,CAAA;AAInD;;;;GAIG;AACH,wBAAgB,WAAW,CAAC,QAAQ,EAAE,iBAAiB,GAAG,IAAI,CAE7D;AAED;;;;GAIG;AACH,wBAAgB,WAAW,IAAI,iBAAiB,GAAG,IAAI,CAEtD;AAED;;;;GAIG;AACH,wBAAgB,WAAW,IAAI,OAAO,CAErC;AAED;;;;;GAKG;AACH,wBAAgB,eAAe,IAAI,iBAAiB,CAKnD"}
|
package/dist/provider.js
ADDED
|
@@ -0,0 +1,48 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Image crop provider wiring, backed by the shared `@molecule/app-bond` registry.
|
|
3
|
+
*
|
|
4
|
+
* Bond packages call `setProvider()` during setup; it delegates to
|
|
5
|
+
* `bond('image-crop', provider)`, so wiring via this package's `setProvider()`
|
|
6
|
+
* and via `bond('image-crop', …)` write the SAME registry slot — use either.
|
|
7
|
+
* Application code calls `getProvider()` / `requireProvider()` at runtime.
|
|
8
|
+
*
|
|
9
|
+
* @module
|
|
10
|
+
*/
|
|
11
|
+
import { bond, get, isBonded, requireSingleton } from '@molecule/app-bond';
|
|
12
|
+
const BOND_TYPE = 'image-crop';
|
|
13
|
+
/**
|
|
14
|
+
* Registers an image crop provider as the active singleton.
|
|
15
|
+
*
|
|
16
|
+
* @param provider - The image crop provider implementation to bond.
|
|
17
|
+
*/
|
|
18
|
+
export function setProvider(provider) {
|
|
19
|
+
bond(BOND_TYPE, provider);
|
|
20
|
+
}
|
|
21
|
+
/**
|
|
22
|
+
* Retrieves the bonded image crop provider, or `null` if none is bonded.
|
|
23
|
+
*
|
|
24
|
+
* @returns The active image crop provider, or `null`.
|
|
25
|
+
*/
|
|
26
|
+
export function getProvider() {
|
|
27
|
+
return get(BOND_TYPE) ?? null;
|
|
28
|
+
}
|
|
29
|
+
/**
|
|
30
|
+
* Checks whether an image crop provider has been bonded.
|
|
31
|
+
*
|
|
32
|
+
* @returns `true` if an image crop provider is available.
|
|
33
|
+
*/
|
|
34
|
+
export function hasProvider() {
|
|
35
|
+
return isBonded(BOND_TYPE);
|
|
36
|
+
}
|
|
37
|
+
/**
|
|
38
|
+
* Retrieves the bonded image crop provider, throwing if none is configured.
|
|
39
|
+
*
|
|
40
|
+
* @returns The active image crop provider.
|
|
41
|
+
* @throws {Error} if no provider has been bonded.
|
|
42
|
+
*/
|
|
43
|
+
export function requireProvider() {
|
|
44
|
+
if (!isBonded(BOND_TYPE)) {
|
|
45
|
+
throw new Error('ImageCrop provider not configured. Bond an image-crop provider first.');
|
|
46
|
+
}
|
|
47
|
+
return requireSingleton(BOND_TYPE);
|
|
48
|
+
}
|
package/dist/types.d.ts
ADDED
|
@@ -0,0 +1,123 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Image crop types for molecule.dev.
|
|
3
|
+
*
|
|
4
|
+
* Defines the provider interface and data types for image cropping
|
|
5
|
+
* UI components.
|
|
6
|
+
*
|
|
7
|
+
* @module
|
|
8
|
+
*/
|
|
9
|
+
/**
|
|
10
|
+
* Crop region data describing the selected area and transformations.
|
|
11
|
+
*/
|
|
12
|
+
export interface CropData {
|
|
13
|
+
/** X coordinate of the crop area origin. */
|
|
14
|
+
x: number;
|
|
15
|
+
/** Y coordinate of the crop area origin. */
|
|
16
|
+
y: number;
|
|
17
|
+
/** Width of the crop area. */
|
|
18
|
+
width: number;
|
|
19
|
+
/** Height of the crop area. */
|
|
20
|
+
height: number;
|
|
21
|
+
/** Rotation angle in degrees. */
|
|
22
|
+
rotate: number;
|
|
23
|
+
/** Horizontal scale factor. */
|
|
24
|
+
scaleX: number;
|
|
25
|
+
/** Vertical scale factor. */
|
|
26
|
+
scaleY: number;
|
|
27
|
+
}
|
|
28
|
+
/**
|
|
29
|
+
* Output options for generating the cropped image.
|
|
30
|
+
*/
|
|
31
|
+
export interface OutputOptions {
|
|
32
|
+
/** Output width in pixels. */
|
|
33
|
+
width?: number;
|
|
34
|
+
/** Output height in pixels. */
|
|
35
|
+
height?: number;
|
|
36
|
+
/** Fill color for empty areas (e.g. after rotation). Defaults to `'transparent'`. */
|
|
37
|
+
fillColor?: string;
|
|
38
|
+
/** Image quality for lossy formats (0-1). Defaults to `1`. */
|
|
39
|
+
quality?: number;
|
|
40
|
+
}
|
|
41
|
+
/**
|
|
42
|
+
* Configuration options for creating an image cropper.
|
|
43
|
+
*/
|
|
44
|
+
export interface CropperOptions {
|
|
45
|
+
/** Source image URL or data URI. */
|
|
46
|
+
src: string;
|
|
47
|
+
/** Fixed aspect ratio (width / height). `undefined` for free-form. */
|
|
48
|
+
aspectRatio?: number;
|
|
49
|
+
/** Minimum crop width in pixels. */
|
|
50
|
+
minWidth?: number;
|
|
51
|
+
/** Minimum crop height in pixels. */
|
|
52
|
+
minHeight?: number;
|
|
53
|
+
/** Maximum crop width in pixels. */
|
|
54
|
+
maxWidth?: number;
|
|
55
|
+
/** Maximum crop height in pixels. */
|
|
56
|
+
maxHeight?: number;
|
|
57
|
+
/** Whether the crop area should be circular. Defaults to `false`. */
|
|
58
|
+
circular?: boolean;
|
|
59
|
+
/** Whether to show crop guide lines. Defaults to `true`. */
|
|
60
|
+
guides?: boolean;
|
|
61
|
+
}
|
|
62
|
+
/**
|
|
63
|
+
* A live cropper instance returned by the provider.
|
|
64
|
+
*/
|
|
65
|
+
export interface CropperInstance {
|
|
66
|
+
/**
|
|
67
|
+
* Generates a canvas element containing the cropped image.
|
|
68
|
+
*
|
|
69
|
+
* @param options - Optional output configuration.
|
|
70
|
+
* @returns An HTMLCanvasElement with the cropped result.
|
|
71
|
+
*/
|
|
72
|
+
getCroppedCanvas(options?: OutputOptions): HTMLCanvasElement;
|
|
73
|
+
/**
|
|
74
|
+
* Returns the current crop region data.
|
|
75
|
+
*
|
|
76
|
+
* @returns The current crop data.
|
|
77
|
+
*/
|
|
78
|
+
getCropData(): CropData;
|
|
79
|
+
/**
|
|
80
|
+
* Sets the crop region programmatically.
|
|
81
|
+
*
|
|
82
|
+
* @param data - The crop data to apply.
|
|
83
|
+
*/
|
|
84
|
+
setCropData(data: CropData): void;
|
|
85
|
+
/**
|
|
86
|
+
* Resets the cropper to its initial state.
|
|
87
|
+
*/
|
|
88
|
+
reset(): void;
|
|
89
|
+
/**
|
|
90
|
+
* Rotates the image by the specified degrees.
|
|
91
|
+
*
|
|
92
|
+
* @param degrees - Rotation angle in degrees (positive = clockwise).
|
|
93
|
+
*/
|
|
94
|
+
rotate(degrees: number): void;
|
|
95
|
+
/**
|
|
96
|
+
* Zooms the image by the specified ratio.
|
|
97
|
+
*
|
|
98
|
+
* @param ratio - Zoom ratio (positive to zoom in, negative to zoom out).
|
|
99
|
+
*/
|
|
100
|
+
zoom(ratio: number): void;
|
|
101
|
+
/**
|
|
102
|
+
* Destroys the cropper instance and cleans up resources.
|
|
103
|
+
*/
|
|
104
|
+
destroy(): void;
|
|
105
|
+
}
|
|
106
|
+
/**
|
|
107
|
+
* Image crop provider interface.
|
|
108
|
+
*
|
|
109
|
+
* All image crop providers must implement this interface to create
|
|
110
|
+
* and manage image cropping UI.
|
|
111
|
+
*/
|
|
112
|
+
export interface ImageCropProvider {
|
|
113
|
+
/** Provider name identifier. */
|
|
114
|
+
readonly name: string;
|
|
115
|
+
/**
|
|
116
|
+
* Creates a new cropper instance.
|
|
117
|
+
*
|
|
118
|
+
* @param options - Configuration for the cropper.
|
|
119
|
+
* @returns A cropper instance for managing the crop operation.
|
|
120
|
+
*/
|
|
121
|
+
createCropper(options: CropperOptions): CropperInstance;
|
|
122
|
+
}
|
|
123
|
+
//# sourceMappingURL=types.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../src/types.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAEH;;GAEG;AACH,MAAM,WAAW,QAAQ;IACvB,4CAA4C;IAC5C,CAAC,EAAE,MAAM,CAAA;IAET,4CAA4C;IAC5C,CAAC,EAAE,MAAM,CAAA;IAET,8BAA8B;IAC9B,KAAK,EAAE,MAAM,CAAA;IAEb,+BAA+B;IAC/B,MAAM,EAAE,MAAM,CAAA;IAEd,iCAAiC;IACjC,MAAM,EAAE,MAAM,CAAA;IAEd,+BAA+B;IAC/B,MAAM,EAAE,MAAM,CAAA;IAEd,6BAA6B;IAC7B,MAAM,EAAE,MAAM,CAAA;CACf;AAED;;GAEG;AACH,MAAM,WAAW,aAAa;IAC5B,8BAA8B;IAC9B,KAAK,CAAC,EAAE,MAAM,CAAA;IAEd,+BAA+B;IAC/B,MAAM,CAAC,EAAE,MAAM,CAAA;IAEf,qFAAqF;IACrF,SAAS,CAAC,EAAE,MAAM,CAAA;IAElB,8DAA8D;IAC9D,OAAO,CAAC,EAAE,MAAM,CAAA;CACjB;AAED;;GAEG;AACH,MAAM,WAAW,cAAc;IAC7B,oCAAoC;IACpC,GAAG,EAAE,MAAM,CAAA;IAEX,sEAAsE;IACtE,WAAW,CAAC,EAAE,MAAM,CAAA;IAEpB,oCAAoC;IACpC,QAAQ,CAAC,EAAE,MAAM,CAAA;IAEjB,qCAAqC;IACrC,SAAS,CAAC,EAAE,MAAM,CAAA;IAElB,oCAAoC;IACpC,QAAQ,CAAC,EAAE,MAAM,CAAA;IAEjB,qCAAqC;IACrC,SAAS,CAAC,EAAE,MAAM,CAAA;IAElB,qEAAqE;IACrE,QAAQ,CAAC,EAAE,OAAO,CAAA;IAElB,4DAA4D;IAC5D,MAAM,CAAC,EAAE,OAAO,CAAA;CACjB;AAED;;GAEG;AACH,MAAM,WAAW,eAAe;IAC9B;;;;;OAKG;IACH,gBAAgB,CAAC,OAAO,CAAC,EAAE,aAAa,GAAG,iBAAiB,CAAA;IAE5D;;;;OAIG;IACH,WAAW,IAAI,QAAQ,CAAA;IAEvB;;;;OAIG;IACH,WAAW,CAAC,IAAI,EAAE,QAAQ,GAAG,IAAI,CAAA;IAEjC;;OAEG;IACH,KAAK,IAAI,IAAI,CAAA;IAEb;;;;OAIG;IACH,MAAM,CAAC,OAAO,EAAE,MAAM,GAAG,IAAI,CAAA;IAE7B;;;;OAIG;IACH,IAAI,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,CAAA;IAEzB;;OAEG;IACH,OAAO,IAAI,IAAI,CAAA;CAChB;AAED;;;;;GAKG;AACH,MAAM,WAAW,iBAAiB;IAChC,gCAAgC;IAChC,QAAQ,CAAC,IAAI,EAAE,MAAM,CAAA;IAErB;;;;;OAKG;IACH,aAAa,CAAC,OAAO,EAAE,cAAc,GAAG,eAAe,CAAA;CACxD"}
|
package/dist/types.js
ADDED
package/package.json
ADDED
|
@@ -0,0 +1,37 @@
|
|
|
1
|
+
{
|
|
2
|
+
"name": "@molecule/app-image-crop",
|
|
3
|
+
"version": "1.0.0",
|
|
4
|
+
"description": "",
|
|
5
|
+
"type": "module",
|
|
6
|
+
"main": "dist/index.js",
|
|
7
|
+
"types": "dist/index.d.ts",
|
|
8
|
+
"scripts": {
|
|
9
|
+
"build": "tsc",
|
|
10
|
+
"test": "vitest run",
|
|
11
|
+
"test:watch": "vitest"
|
|
12
|
+
},
|
|
13
|
+
"exports": {
|
|
14
|
+
".": {
|
|
15
|
+
"types": "./dist/index.d.ts",
|
|
16
|
+
"import": "./dist/index.js"
|
|
17
|
+
}
|
|
18
|
+
},
|
|
19
|
+
"files": [
|
|
20
|
+
"dist"
|
|
21
|
+
],
|
|
22
|
+
"keywords": [
|
|
23
|
+
"molecule",
|
|
24
|
+
"image",
|
|
25
|
+
"crop"
|
|
26
|
+
],
|
|
27
|
+
"license": "Apache-2.0",
|
|
28
|
+
"peerDependencies": {
|
|
29
|
+
"@molecule/app-bond": "^1.0.0"
|
|
30
|
+
},
|
|
31
|
+
"devDependencies": {
|
|
32
|
+
"@molecule/app-bond": "1.0.0",
|
|
33
|
+
"@types/node": "26.1.2",
|
|
34
|
+
"typescript": "6.0.3",
|
|
35
|
+
"vitest": "4.1.10"
|
|
36
|
+
}
|
|
37
|
+
}
|