@ews-admin/global-design-system 1.17.1 → 1.19.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/dist/components/DropdownMultiSelect/DropdownMultiSelect.d.ts +1 -1
- package/dist/components/DropdownMultiSelect/DropdownMultiSelect.d.ts.map +1 -1
- package/dist/components/ImageCropModal/ImageCropModal.d.ts +28 -0
- package/dist/components/ImageCropModal/ImageCropModal.d.ts.map +1 -0
- package/dist/components/ImageCropModal/cropImage.d.ts +3 -0
- package/dist/components/ImageCropModal/cropImage.d.ts.map +1 -0
- package/dist/components/ImageCropModal/index.d.ts +3 -0
- package/dist/components/ImageCropModal/index.d.ts.map +1 -0
- package/dist/components/Logo/Logo.d.ts +1 -1
- package/dist/components/Logo/Logo.d.ts.map +1 -1
- package/dist/components/Modal/Modal.d.ts +1 -1
- package/dist/components/Modal/Modal.d.ts.map +1 -1
- package/dist/components/MultiSearchAutocomplete/MultiSearchAutocomplete.d.ts +1 -1
- package/dist/components/MultiSearchAutocomplete/MultiSearchAutocomplete.d.ts.map +1 -1
- package/dist/components/RegionSelect/RegionSelect.d.ts +2 -1
- package/dist/components/RegionSelect/RegionSelect.d.ts.map +1 -1
- package/dist/components/SearchAutocomplete/SearchAutocomplete.d.ts +2 -1
- package/dist/components/SearchAutocomplete/SearchAutocomplete.d.ts.map +1 -1
- package/dist/index.css +1 -1
- package/dist/index.d.ts +69 -42
- package/dist/index.d.ts.map +1 -1
- package/dist/index.esm.css +1 -1
- package/dist/index.esm.js +1412 -13
- package/dist/index.esm.js.map +1 -1
- package/dist/index.js +1429 -11
- package/dist/index.js.map +1 -1
- package/package.json +3 -2
- package/src/components/ImageCropModal/ImageCropModal.tsx +110 -0
- package/src/components/ImageCropModal/cropImage.ts +48 -0
- package/src/components/ImageCropModal/index.ts +2 -0
- package/src/index.ts +3 -0
- package/src/utils/env-config.ts +1 -1
package/dist/index.js
CHANGED
|
@@ -4,6 +4,25 @@ var jsxRuntime = require('react/jsx-runtime');
|
|
|
4
4
|
var React = require('react');
|
|
5
5
|
var reactHookForm = require('react-hook-form');
|
|
6
6
|
|
|
7
|
+
function _interopNamespaceDefault(e) {
|
|
8
|
+
var n = Object.create(null);
|
|
9
|
+
if (e) {
|
|
10
|
+
Object.keys(e).forEach(function (k) {
|
|
11
|
+
if (k !== 'default') {
|
|
12
|
+
var d = Object.getOwnPropertyDescriptor(e, k);
|
|
13
|
+
Object.defineProperty(n, k, d.get ? d : {
|
|
14
|
+
enumerable: true,
|
|
15
|
+
get: function () { return e[k]; }
|
|
16
|
+
});
|
|
17
|
+
}
|
|
18
|
+
});
|
|
19
|
+
}
|
|
20
|
+
n.default = e;
|
|
21
|
+
return Object.freeze(n);
|
|
22
|
+
}
|
|
23
|
+
|
|
24
|
+
var React__namespace = /*#__PURE__*/_interopNamespaceDefault(React);
|
|
25
|
+
|
|
7
26
|
function r(e){var t,f,n="";if("string"==typeof e||"number"==typeof e)n+=e;else if("object"==typeof e)if(Array.isArray(e)){var o=e.length;for(t=0;t<o;t++)e[t]&&(f=r(e[t]))&&(n&&(n+=" "),n+=f);}else for(f in e)e[f]&&(n&&(n+=" "),n+=f);return n}function clsx(){for(var e,t,f=0,n="",o=arguments.length;f<o;f++)(e=arguments[f])&&(t=r(e))&&(n&&(n+=" "),n+=t);return n}
|
|
8
27
|
|
|
9
28
|
const LOCAL_PORTS = {
|
|
@@ -33,7 +52,7 @@ function buildUrls(environment) {
|
|
|
33
52
|
return {
|
|
34
53
|
bffUrl: `https://${prefix}api.${domain}/bff/api/v1`,
|
|
35
54
|
loginBffUrl: `https://${prefix}api.${domain}/login-bff/api/v1`,
|
|
36
|
-
appUrl: `https://${prefix}app.${domain}`,
|
|
55
|
+
appUrl: environment === "prod" ? `https://${prefix}${domain}` : `https://${prefix}app.${domain}`,
|
|
37
56
|
loginUrl: `https://${prefix}login.${domain}`,
|
|
38
57
|
dashboardUrl: `https://${prefix}dashboard.${domain}`,
|
|
39
58
|
adminUrl: `https://${prefix}admin.${domain}`,
|
|
@@ -11783,7 +11802,7 @@ const __iconNode$fN = [
|
|
|
11783
11802
|
["path", { d: "M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z", key: "1rqfz7" }],
|
|
11784
11803
|
["path", { d: "M14 2v4a2 2 0 0 0 2 2h4", key: "tnqrlb" }]
|
|
11785
11804
|
];
|
|
11786
|
-
const File = createLucideIcon("file", __iconNode$fN);
|
|
11805
|
+
const File$1 = createLucideIcon("file", __iconNode$fN);
|
|
11787
11806
|
|
|
11788
11807
|
/**
|
|
11789
11808
|
* @license lucide-react v0.544.0 - ISC
|
|
@@ -15460,7 +15479,7 @@ const __iconNode$cX = [
|
|
|
15460
15479
|
["circle", { cx: "9", cy: "9", r: "2", key: "af1f0g" }],
|
|
15461
15480
|
["path", { d: "m21 15-3.086-3.086a2 2 0 0 0-2.828 0L6 21", key: "1xmnt7" }]
|
|
15462
15481
|
];
|
|
15463
|
-
const Image = createLucideIcon("image", __iconNode$cX);
|
|
15482
|
+
const Image$1 = createLucideIcon("image", __iconNode$cX);
|
|
15464
15483
|
|
|
15465
15484
|
/**
|
|
15466
15485
|
* @license lucide-react v0.544.0 - ISC
|
|
@@ -31497,7 +31516,7 @@ var index = /*#__PURE__*/Object.freeze({
|
|
|
31497
31516
|
Fence: Fence,
|
|
31498
31517
|
FerrisWheel: FerrisWheel,
|
|
31499
31518
|
Figma: Figma,
|
|
31500
|
-
File: File,
|
|
31519
|
+
File: File$1,
|
|
31501
31520
|
FileArchive: FileArchive,
|
|
31502
31521
|
FileAudio: FileAudio,
|
|
31503
31522
|
FileAudio2: FileAudio2,
|
|
@@ -31730,7 +31749,7 @@ var index = /*#__PURE__*/Object.freeze({
|
|
|
31730
31749
|
IceCreamCone: IceCreamCone,
|
|
31731
31750
|
IdCard: IdCard,
|
|
31732
31751
|
IdCardLanyard: IdCardLanyard,
|
|
31733
|
-
Image: Image,
|
|
31752
|
+
Image: Image$1,
|
|
31734
31753
|
ImageDown: ImageDown,
|
|
31735
31754
|
ImageMinus: ImageMinus,
|
|
31736
31755
|
ImageOff: ImageOff,
|
|
@@ -33359,6 +33378,1404 @@ const ProfileImageUpload = ({ imageUrl, altText, readOnly = false, size = "lg",
|
|
|
33359
33378
|
return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs("div", { className: "inline-flex flex-col items-center", children: [jsxRuntime.jsxs("div", { className: "relative", onMouseEnter: () => setIsHovered(true), onMouseLeave: () => setIsHovered(false), children: [jsxRuntime.jsx("img", { src: imageUrl, alt: altText, className: cn("rounded-full border-4 border-white object-cover", SIZE_CLASSES[size]) }), jsxRuntime.jsx("div", { className: cn("absolute bottom-0 right-0 rounded-full border-4 border-white bg-green-400", INDICATOR_CLASSES[size]) }), jsxRuntime.jsx("input", { type: "file", ref: fileInputRef, accept: acceptAttr, className: "hidden", onChange: handleFileChange }), isHovered && !readOnly && !isLoading && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("button", { type: "button", onClick: handleEditClick, className: "absolute left-0 top-0 flex h-8 w-8 cursor-pointer items-center justify-center rounded-full bg-ews-primary transition-colors hover:bg-ews-secondary", "aria-label": "Edit profile image", children: jsxRuntime.jsx(Pencil, { className: "h-4 w-4 text-white" }) }), showDeleteButton && (jsxRuntime.jsx("button", { type: "button", onClick: () => setShowConfirm(true), className: "absolute left-0 top-10 flex h-8 w-8 cursor-pointer items-center justify-center rounded-full bg-red-600 transition-colors hover:bg-red-700", "aria-label": "Delete profile image", children: jsxRuntime.jsx(Trash, { className: "h-4 w-4 text-white" }) }))] }))] }), jsxRuntime.jsx(UploadProgressBar, { progress: uploadProgress, isLoading: isLoading }), aspectRatioHint && (jsxRuntime.jsxs("p", { className: "mt-1 text-xs text-gray-400", children: ["Ratio: ", aspectRatioHint] }))] }), jsxRuntime.jsx(Modal, { isOpen: showConfirm, onClose: () => setShowConfirm(false), title: deleteConfirmTitle, variant: "error", size: "sm", primaryAction: deleteConfirmLabel, secondaryAction: cancelLabel, onPrimaryAction: handleConfirmDelete, onSecondaryAction: () => setShowConfirm(false), children: jsxRuntime.jsx("p", { children: deleteConfirmMessage }) })] }));
|
|
33360
33379
|
};
|
|
33361
33380
|
|
|
33381
|
+
function getDefaultExportFromCjs (x) {
|
|
33382
|
+
return x && x.__esModule && Object.prototype.hasOwnProperty.call(x, 'default') ? x['default'] : x;
|
|
33383
|
+
}
|
|
33384
|
+
|
|
33385
|
+
/**
|
|
33386
|
+
* Copyright 2004-present Facebook. All Rights Reserved.
|
|
33387
|
+
*
|
|
33388
|
+
* @providesModule UserAgent_DEPRECATED
|
|
33389
|
+
*/
|
|
33390
|
+
|
|
33391
|
+
/**
|
|
33392
|
+
* Provides entirely client-side User Agent and OS detection. You should prefer
|
|
33393
|
+
* the non-deprecated UserAgent module when possible, which exposes our
|
|
33394
|
+
* authoritative server-side PHP-based detection to the client.
|
|
33395
|
+
*
|
|
33396
|
+
* Usage is straightforward:
|
|
33397
|
+
*
|
|
33398
|
+
* if (UserAgent_DEPRECATED.ie()) {
|
|
33399
|
+
* // IE
|
|
33400
|
+
* }
|
|
33401
|
+
*
|
|
33402
|
+
* You can also do version checks:
|
|
33403
|
+
*
|
|
33404
|
+
* if (UserAgent_DEPRECATED.ie() >= 7) {
|
|
33405
|
+
* // IE7 or better
|
|
33406
|
+
* }
|
|
33407
|
+
*
|
|
33408
|
+
* The browser functions will return NaN if the browser does not match, so
|
|
33409
|
+
* you can also do version compares the other way:
|
|
33410
|
+
*
|
|
33411
|
+
* if (UserAgent_DEPRECATED.ie() < 7) {
|
|
33412
|
+
* // IE6 or worse
|
|
33413
|
+
* }
|
|
33414
|
+
*
|
|
33415
|
+
* Note that the version is a float and may include a minor version number,
|
|
33416
|
+
* so you should always use range operators to perform comparisons, not
|
|
33417
|
+
* strict equality.
|
|
33418
|
+
*
|
|
33419
|
+
* **Note:** You should **strongly** prefer capability detection to browser
|
|
33420
|
+
* version detection where it's reasonable:
|
|
33421
|
+
*
|
|
33422
|
+
* http://www.quirksmode.org/js/support.html
|
|
33423
|
+
*
|
|
33424
|
+
* Further, we have a large number of mature wrapper functions and classes
|
|
33425
|
+
* which abstract away many browser irregularities. Check the documentation,
|
|
33426
|
+
* grep for things, or ask on javascript@lists.facebook.com before writing yet
|
|
33427
|
+
* another copy of "event || window.event".
|
|
33428
|
+
*
|
|
33429
|
+
*/
|
|
33430
|
+
|
|
33431
|
+
var _populated = false;
|
|
33432
|
+
|
|
33433
|
+
// Browsers
|
|
33434
|
+
var _ie, _firefox, _opera, _webkit, _chrome;
|
|
33435
|
+
|
|
33436
|
+
// Actual IE browser for compatibility mode
|
|
33437
|
+
var _ie_real_version;
|
|
33438
|
+
|
|
33439
|
+
// Platforms
|
|
33440
|
+
var _osx, _windows, _linux, _android;
|
|
33441
|
+
|
|
33442
|
+
// Architectures
|
|
33443
|
+
var _win64;
|
|
33444
|
+
|
|
33445
|
+
// Devices
|
|
33446
|
+
var _iphone, _ipad, _native;
|
|
33447
|
+
|
|
33448
|
+
var _mobile;
|
|
33449
|
+
|
|
33450
|
+
function _populate() {
|
|
33451
|
+
if (_populated) {
|
|
33452
|
+
return;
|
|
33453
|
+
}
|
|
33454
|
+
|
|
33455
|
+
_populated = true;
|
|
33456
|
+
|
|
33457
|
+
// To work around buggy JS libraries that can't handle multi-digit
|
|
33458
|
+
// version numbers, Opera 10's user agent string claims it's Opera
|
|
33459
|
+
// 9, then later includes a Version/X.Y field:
|
|
33460
|
+
//
|
|
33461
|
+
// Opera/9.80 (foo) Presto/2.2.15 Version/10.10
|
|
33462
|
+
var uas = navigator.userAgent;
|
|
33463
|
+
var agent = /(?:MSIE.(\d+\.\d+))|(?:(?:Firefox|GranParadiso|Iceweasel).(\d+\.\d+))|(?:Opera(?:.+Version.|.)(\d+\.\d+))|(?:AppleWebKit.(\d+(?:\.\d+)?))|(?:Trident\/\d+\.\d+.*rv:(\d+\.\d+))/.exec(uas);
|
|
33464
|
+
var os = /(Mac OS X)|(Windows)|(Linux)/.exec(uas);
|
|
33465
|
+
|
|
33466
|
+
_iphone = /\b(iPhone|iP[ao]d)/.exec(uas);
|
|
33467
|
+
_ipad = /\b(iP[ao]d)/.exec(uas);
|
|
33468
|
+
_android = /Android/i.exec(uas);
|
|
33469
|
+
_native = /FBAN\/\w+;/i.exec(uas);
|
|
33470
|
+
_mobile = /Mobile/i.exec(uas);
|
|
33471
|
+
|
|
33472
|
+
// Note that the IE team blog would have you believe you should be checking
|
|
33473
|
+
// for 'Win64; x64'. But MSDN then reveals that you can actually be coming
|
|
33474
|
+
// from either x64 or ia64; so ultimately, you should just check for Win64
|
|
33475
|
+
// as in indicator of whether you're in 64-bit IE. 32-bit IE on 64-bit
|
|
33476
|
+
// Windows will send 'WOW64' instead.
|
|
33477
|
+
_win64 = !!(/Win64/.exec(uas));
|
|
33478
|
+
|
|
33479
|
+
if (agent) {
|
|
33480
|
+
_ie = agent[1] ? parseFloat(agent[1]) : (
|
|
33481
|
+
agent[5] ? parseFloat(agent[5]) : NaN);
|
|
33482
|
+
// IE compatibility mode
|
|
33483
|
+
if (_ie && document && document.documentMode) {
|
|
33484
|
+
_ie = document.documentMode;
|
|
33485
|
+
}
|
|
33486
|
+
// grab the "true" ie version from the trident token if available
|
|
33487
|
+
var trident = /(?:Trident\/(\d+.\d+))/.exec(uas);
|
|
33488
|
+
_ie_real_version = trident ? parseFloat(trident[1]) + 4 : _ie;
|
|
33489
|
+
|
|
33490
|
+
_firefox = agent[2] ? parseFloat(agent[2]) : NaN;
|
|
33491
|
+
_opera = agent[3] ? parseFloat(agent[3]) : NaN;
|
|
33492
|
+
_webkit = agent[4] ? parseFloat(agent[4]) : NaN;
|
|
33493
|
+
if (_webkit) {
|
|
33494
|
+
// We do not add the regexp to the above test, because it will always
|
|
33495
|
+
// match 'safari' only since 'AppleWebKit' appears before 'Chrome' in
|
|
33496
|
+
// the userAgent string.
|
|
33497
|
+
agent = /(?:Chrome\/(\d+\.\d+))/.exec(uas);
|
|
33498
|
+
_chrome = agent && agent[1] ? parseFloat(agent[1]) : NaN;
|
|
33499
|
+
} else {
|
|
33500
|
+
_chrome = NaN;
|
|
33501
|
+
}
|
|
33502
|
+
} else {
|
|
33503
|
+
_ie = _firefox = _opera = _chrome = _webkit = NaN;
|
|
33504
|
+
}
|
|
33505
|
+
|
|
33506
|
+
if (os) {
|
|
33507
|
+
if (os[1]) {
|
|
33508
|
+
// Detect OS X version. If no version number matches, set _osx to true.
|
|
33509
|
+
// Version examples: 10, 10_6_1, 10.7
|
|
33510
|
+
// Parses version number as a float, taking only first two sets of
|
|
33511
|
+
// digits. If only one set of digits is found, returns just the major
|
|
33512
|
+
// version number.
|
|
33513
|
+
var ver = /(?:Mac OS X (\d+(?:[._]\d+)?))/.exec(uas);
|
|
33514
|
+
|
|
33515
|
+
_osx = ver ? parseFloat(ver[1].replace('_', '.')) : true;
|
|
33516
|
+
} else {
|
|
33517
|
+
_osx = false;
|
|
33518
|
+
}
|
|
33519
|
+
_windows = !!os[2];
|
|
33520
|
+
_linux = !!os[3];
|
|
33521
|
+
} else {
|
|
33522
|
+
_osx = _windows = _linux = false;
|
|
33523
|
+
}
|
|
33524
|
+
}
|
|
33525
|
+
|
|
33526
|
+
var UserAgent_DEPRECATED$1 = {
|
|
33527
|
+
|
|
33528
|
+
/**
|
|
33529
|
+
* Check if the UA is Internet Explorer.
|
|
33530
|
+
*
|
|
33531
|
+
*
|
|
33532
|
+
* @return float|NaN Version number (if match) or NaN.
|
|
33533
|
+
*/
|
|
33534
|
+
ie: function() {
|
|
33535
|
+
return _populate() || _ie;
|
|
33536
|
+
},
|
|
33537
|
+
|
|
33538
|
+
/**
|
|
33539
|
+
* Check if we're in Internet Explorer compatibility mode.
|
|
33540
|
+
*
|
|
33541
|
+
* @return bool true if in compatibility mode, false if
|
|
33542
|
+
* not compatibility mode or not ie
|
|
33543
|
+
*/
|
|
33544
|
+
ieCompatibilityMode: function() {
|
|
33545
|
+
return _populate() || (_ie_real_version > _ie);
|
|
33546
|
+
},
|
|
33547
|
+
|
|
33548
|
+
|
|
33549
|
+
/**
|
|
33550
|
+
* Whether the browser is 64-bit IE. Really, this is kind of weak sauce; we
|
|
33551
|
+
* only need this because Skype can't handle 64-bit IE yet. We need to remove
|
|
33552
|
+
* this when we don't need it -- tracked by #601957.
|
|
33553
|
+
*/
|
|
33554
|
+
ie64: function() {
|
|
33555
|
+
return UserAgent_DEPRECATED$1.ie() && _win64;
|
|
33556
|
+
},
|
|
33557
|
+
|
|
33558
|
+
/**
|
|
33559
|
+
* Check if the UA is Firefox.
|
|
33560
|
+
*
|
|
33561
|
+
*
|
|
33562
|
+
* @return float|NaN Version number (if match) or NaN.
|
|
33563
|
+
*/
|
|
33564
|
+
firefox: function() {
|
|
33565
|
+
return _populate() || _firefox;
|
|
33566
|
+
},
|
|
33567
|
+
|
|
33568
|
+
|
|
33569
|
+
/**
|
|
33570
|
+
* Check if the UA is Opera.
|
|
33571
|
+
*
|
|
33572
|
+
*
|
|
33573
|
+
* @return float|NaN Version number (if match) or NaN.
|
|
33574
|
+
*/
|
|
33575
|
+
opera: function() {
|
|
33576
|
+
return _populate() || _opera;
|
|
33577
|
+
},
|
|
33578
|
+
|
|
33579
|
+
|
|
33580
|
+
/**
|
|
33581
|
+
* Check if the UA is WebKit.
|
|
33582
|
+
*
|
|
33583
|
+
*
|
|
33584
|
+
* @return float|NaN Version number (if match) or NaN.
|
|
33585
|
+
*/
|
|
33586
|
+
webkit: function() {
|
|
33587
|
+
return _populate() || _webkit;
|
|
33588
|
+
},
|
|
33589
|
+
|
|
33590
|
+
/**
|
|
33591
|
+
* For Push
|
|
33592
|
+
* WILL BE REMOVED VERY SOON. Use UserAgent_DEPRECATED.webkit
|
|
33593
|
+
*/
|
|
33594
|
+
safari: function() {
|
|
33595
|
+
return UserAgent_DEPRECATED$1.webkit();
|
|
33596
|
+
},
|
|
33597
|
+
|
|
33598
|
+
/**
|
|
33599
|
+
* Check if the UA is a Chrome browser.
|
|
33600
|
+
*
|
|
33601
|
+
*
|
|
33602
|
+
* @return float|NaN Version number (if match) or NaN.
|
|
33603
|
+
*/
|
|
33604
|
+
chrome : function() {
|
|
33605
|
+
return _populate() || _chrome;
|
|
33606
|
+
},
|
|
33607
|
+
|
|
33608
|
+
|
|
33609
|
+
/**
|
|
33610
|
+
* Check if the user is running Windows.
|
|
33611
|
+
*
|
|
33612
|
+
* @return bool `true' if the user's OS is Windows.
|
|
33613
|
+
*/
|
|
33614
|
+
windows: function() {
|
|
33615
|
+
return _populate() || _windows;
|
|
33616
|
+
},
|
|
33617
|
+
|
|
33618
|
+
|
|
33619
|
+
/**
|
|
33620
|
+
* Check if the user is running Mac OS X.
|
|
33621
|
+
*
|
|
33622
|
+
* @return float|bool Returns a float if a version number is detected,
|
|
33623
|
+
* otherwise true/false.
|
|
33624
|
+
*/
|
|
33625
|
+
osx: function() {
|
|
33626
|
+
return _populate() || _osx;
|
|
33627
|
+
},
|
|
33628
|
+
|
|
33629
|
+
/**
|
|
33630
|
+
* Check if the user is running Linux.
|
|
33631
|
+
*
|
|
33632
|
+
* @return bool `true' if the user's OS is some flavor of Linux.
|
|
33633
|
+
*/
|
|
33634
|
+
linux: function() {
|
|
33635
|
+
return _populate() || _linux;
|
|
33636
|
+
},
|
|
33637
|
+
|
|
33638
|
+
/**
|
|
33639
|
+
* Check if the user is running on an iPhone or iPod platform.
|
|
33640
|
+
*
|
|
33641
|
+
* @return bool `true' if the user is running some flavor of the
|
|
33642
|
+
* iPhone OS.
|
|
33643
|
+
*/
|
|
33644
|
+
iphone: function() {
|
|
33645
|
+
return _populate() || _iphone;
|
|
33646
|
+
},
|
|
33647
|
+
|
|
33648
|
+
mobile: function() {
|
|
33649
|
+
return _populate() || (_iphone || _ipad || _android || _mobile);
|
|
33650
|
+
},
|
|
33651
|
+
|
|
33652
|
+
nativeApp: function() {
|
|
33653
|
+
// webviews inside of the native apps
|
|
33654
|
+
return _populate() || _native;
|
|
33655
|
+
},
|
|
33656
|
+
|
|
33657
|
+
android: function() {
|
|
33658
|
+
return _populate() || _android;
|
|
33659
|
+
},
|
|
33660
|
+
|
|
33661
|
+
ipad: function() {
|
|
33662
|
+
return _populate() || _ipad;
|
|
33663
|
+
}
|
|
33664
|
+
};
|
|
33665
|
+
|
|
33666
|
+
var UserAgent_DEPRECATED_1 = UserAgent_DEPRECATED$1;
|
|
33667
|
+
|
|
33668
|
+
/**
|
|
33669
|
+
* Copyright (c) 2015, Facebook, Inc.
|
|
33670
|
+
* All rights reserved.
|
|
33671
|
+
*
|
|
33672
|
+
* This source code is licensed under the BSD-style license found in the
|
|
33673
|
+
* LICENSE file in the root directory of this source tree. An additional grant
|
|
33674
|
+
* of patent rights can be found in the PATENTS file in the same directory.
|
|
33675
|
+
*
|
|
33676
|
+
* @providesModule ExecutionEnvironment
|
|
33677
|
+
*/
|
|
33678
|
+
|
|
33679
|
+
var canUseDOM = !!(
|
|
33680
|
+
typeof window !== 'undefined' &&
|
|
33681
|
+
window.document &&
|
|
33682
|
+
window.document.createElement
|
|
33683
|
+
);
|
|
33684
|
+
|
|
33685
|
+
/**
|
|
33686
|
+
* Simple, lightweight module assisting with the detection and context of
|
|
33687
|
+
* Worker. Helps avoid circular dependencies and allows code to reason about
|
|
33688
|
+
* whether or not they are in a Worker, even if they never include the main
|
|
33689
|
+
* `ReactWorker` dependency.
|
|
33690
|
+
*/
|
|
33691
|
+
var ExecutionEnvironment$1 = {
|
|
33692
|
+
|
|
33693
|
+
canUseDOM: canUseDOM};
|
|
33694
|
+
|
|
33695
|
+
var ExecutionEnvironment_1 = ExecutionEnvironment$1;
|
|
33696
|
+
|
|
33697
|
+
/**
|
|
33698
|
+
* Copyright 2013-2015, Facebook, Inc.
|
|
33699
|
+
* All rights reserved.
|
|
33700
|
+
*
|
|
33701
|
+
* This source code is licensed under the BSD-style license found in the
|
|
33702
|
+
* LICENSE file in the root directory of this source tree. An additional grant
|
|
33703
|
+
* of patent rights can be found in the PATENTS file in the same directory.
|
|
33704
|
+
*
|
|
33705
|
+
* @providesModule isEventSupported
|
|
33706
|
+
*/
|
|
33707
|
+
|
|
33708
|
+
var ExecutionEnvironment = ExecutionEnvironment_1;
|
|
33709
|
+
|
|
33710
|
+
var useHasFeature;
|
|
33711
|
+
if (ExecutionEnvironment.canUseDOM) {
|
|
33712
|
+
useHasFeature =
|
|
33713
|
+
document.implementation &&
|
|
33714
|
+
document.implementation.hasFeature &&
|
|
33715
|
+
// always returns true in newer browsers as per the standard.
|
|
33716
|
+
// @see http://dom.spec.whatwg.org/#dom-domimplementation-hasfeature
|
|
33717
|
+
document.implementation.hasFeature('', '') !== true;
|
|
33718
|
+
}
|
|
33719
|
+
|
|
33720
|
+
/**
|
|
33721
|
+
* Checks if an event is supported in the current execution environment.
|
|
33722
|
+
*
|
|
33723
|
+
* NOTE: This will not work correctly for non-generic events such as `change`,
|
|
33724
|
+
* `reset`, `load`, `error`, and `select`.
|
|
33725
|
+
*
|
|
33726
|
+
* Borrows from Modernizr.
|
|
33727
|
+
*
|
|
33728
|
+
* @param {string} eventNameSuffix Event name, e.g. "click".
|
|
33729
|
+
* @param {?boolean} capture Check if the capture phase is supported.
|
|
33730
|
+
* @return {boolean} True if the event is supported.
|
|
33731
|
+
* @internal
|
|
33732
|
+
* @license Modernizr 3.0.0pre (Custom Build) | MIT
|
|
33733
|
+
*/
|
|
33734
|
+
function isEventSupported$1(eventNameSuffix, capture) {
|
|
33735
|
+
if (!ExecutionEnvironment.canUseDOM ||
|
|
33736
|
+
capture && !('addEventListener' in document)) {
|
|
33737
|
+
return false;
|
|
33738
|
+
}
|
|
33739
|
+
|
|
33740
|
+
var eventName = 'on' + eventNameSuffix;
|
|
33741
|
+
var isSupported = eventName in document;
|
|
33742
|
+
|
|
33743
|
+
if (!isSupported) {
|
|
33744
|
+
var element = document.createElement('div');
|
|
33745
|
+
element.setAttribute(eventName, 'return;');
|
|
33746
|
+
isSupported = typeof element[eventName] === 'function';
|
|
33747
|
+
}
|
|
33748
|
+
|
|
33749
|
+
if (!isSupported && useHasFeature && eventNameSuffix === 'wheel') {
|
|
33750
|
+
// This is the only way to test support for the `wheel` event in IE9+.
|
|
33751
|
+
isSupported = document.implementation.hasFeature('Events.wheel', '3.0');
|
|
33752
|
+
}
|
|
33753
|
+
|
|
33754
|
+
return isSupported;
|
|
33755
|
+
}
|
|
33756
|
+
|
|
33757
|
+
var isEventSupported_1 = isEventSupported$1;
|
|
33758
|
+
|
|
33759
|
+
/**
|
|
33760
|
+
* Copyright (c) 2015, Facebook, Inc.
|
|
33761
|
+
* All rights reserved.
|
|
33762
|
+
*
|
|
33763
|
+
* This source code is licensed under the BSD-style license found in the
|
|
33764
|
+
* LICENSE file in the root directory of this source tree. An additional grant
|
|
33765
|
+
* of patent rights can be found in the PATENTS file in the same directory.
|
|
33766
|
+
*
|
|
33767
|
+
* @providesModule normalizeWheel
|
|
33768
|
+
* @typechecks
|
|
33769
|
+
*/
|
|
33770
|
+
|
|
33771
|
+
var UserAgent_DEPRECATED = UserAgent_DEPRECATED_1;
|
|
33772
|
+
|
|
33773
|
+
var isEventSupported = isEventSupported_1;
|
|
33774
|
+
|
|
33775
|
+
|
|
33776
|
+
// Reasonable defaults
|
|
33777
|
+
var PIXEL_STEP = 10;
|
|
33778
|
+
var LINE_HEIGHT = 40;
|
|
33779
|
+
var PAGE_HEIGHT = 800;
|
|
33780
|
+
|
|
33781
|
+
/**
|
|
33782
|
+
* Mouse wheel (and 2-finger trackpad) support on the web sucks. It is
|
|
33783
|
+
* complicated, thus this doc is long and (hopefully) detailed enough to answer
|
|
33784
|
+
* your questions.
|
|
33785
|
+
*
|
|
33786
|
+
* If you need to react to the mouse wheel in a predictable way, this code is
|
|
33787
|
+
* like your bestest friend. * hugs *
|
|
33788
|
+
*
|
|
33789
|
+
* As of today, there are 4 DOM event types you can listen to:
|
|
33790
|
+
*
|
|
33791
|
+
* 'wheel' -- Chrome(31+), FF(17+), IE(9+)
|
|
33792
|
+
* 'mousewheel' -- Chrome, IE(6+), Opera, Safari
|
|
33793
|
+
* 'MozMousePixelScroll' -- FF(3.5 only!) (2010-2013) -- don't bother!
|
|
33794
|
+
* 'DOMMouseScroll' -- FF(0.9.7+) since 2003
|
|
33795
|
+
*
|
|
33796
|
+
* So what to do? The is the best:
|
|
33797
|
+
*
|
|
33798
|
+
* normalizeWheel.getEventType();
|
|
33799
|
+
*
|
|
33800
|
+
* In your event callback, use this code to get sane interpretation of the
|
|
33801
|
+
* deltas. This code will return an object with properties:
|
|
33802
|
+
*
|
|
33803
|
+
* spinX -- normalized spin speed (use for zoom) - x plane
|
|
33804
|
+
* spinY -- " - y plane
|
|
33805
|
+
* pixelX -- normalized distance (to pixels) - x plane
|
|
33806
|
+
* pixelY -- " - y plane
|
|
33807
|
+
*
|
|
33808
|
+
* Wheel values are provided by the browser assuming you are using the wheel to
|
|
33809
|
+
* scroll a web page by a number of lines or pixels (or pages). Values can vary
|
|
33810
|
+
* significantly on different platforms and browsers, forgetting that you can
|
|
33811
|
+
* scroll at different speeds. Some devices (like trackpads) emit more events
|
|
33812
|
+
* at smaller increments with fine granularity, and some emit massive jumps with
|
|
33813
|
+
* linear speed or acceleration.
|
|
33814
|
+
*
|
|
33815
|
+
* This code does its best to normalize the deltas for you:
|
|
33816
|
+
*
|
|
33817
|
+
* - spin is trying to normalize how far the wheel was spun (or trackpad
|
|
33818
|
+
* dragged). This is super useful for zoom support where you want to
|
|
33819
|
+
* throw away the chunky scroll steps on the PC and make those equal to
|
|
33820
|
+
* the slow and smooth tiny steps on the Mac. Key data: This code tries to
|
|
33821
|
+
* resolve a single slow step on a wheel to 1.
|
|
33822
|
+
*
|
|
33823
|
+
* - pixel is normalizing the desired scroll delta in pixel units. You'll
|
|
33824
|
+
* get the crazy differences between browsers, but at least it'll be in
|
|
33825
|
+
* pixels!
|
|
33826
|
+
*
|
|
33827
|
+
* - positive value indicates scrolling DOWN/RIGHT, negative UP/LEFT. This
|
|
33828
|
+
* should translate to positive value zooming IN, negative zooming OUT.
|
|
33829
|
+
* This matches the newer 'wheel' event.
|
|
33830
|
+
*
|
|
33831
|
+
* Why are there spinX, spinY (or pixels)?
|
|
33832
|
+
*
|
|
33833
|
+
* - spinX is a 2-finger side drag on the trackpad, and a shift + wheel turn
|
|
33834
|
+
* with a mouse. It results in side-scrolling in the browser by default.
|
|
33835
|
+
*
|
|
33836
|
+
* - spinY is what you expect -- it's the classic axis of a mouse wheel.
|
|
33837
|
+
*
|
|
33838
|
+
* - I dropped spinZ/pixelZ. It is supported by the DOM 3 'wheel' event and
|
|
33839
|
+
* probably is by browsers in conjunction with fancy 3D controllers .. but
|
|
33840
|
+
* you know.
|
|
33841
|
+
*
|
|
33842
|
+
* Implementation info:
|
|
33843
|
+
*
|
|
33844
|
+
* Examples of 'wheel' event if you scroll slowly (down) by one step with an
|
|
33845
|
+
* average mouse:
|
|
33846
|
+
*
|
|
33847
|
+
* OS X + Chrome (mouse) - 4 pixel delta (wheelDelta -120)
|
|
33848
|
+
* OS X + Safari (mouse) - N/A pixel delta (wheelDelta -12)
|
|
33849
|
+
* OS X + Firefox (mouse) - 0.1 line delta (wheelDelta N/A)
|
|
33850
|
+
* Win8 + Chrome (mouse) - 100 pixel delta (wheelDelta -120)
|
|
33851
|
+
* Win8 + Firefox (mouse) - 3 line delta (wheelDelta -120)
|
|
33852
|
+
*
|
|
33853
|
+
* On the trackpad:
|
|
33854
|
+
*
|
|
33855
|
+
* OS X + Chrome (trackpad) - 2 pixel delta (wheelDelta -6)
|
|
33856
|
+
* OS X + Firefox (trackpad) - 1 pixel delta (wheelDelta N/A)
|
|
33857
|
+
*
|
|
33858
|
+
* On other/older browsers.. it's more complicated as there can be multiple and
|
|
33859
|
+
* also missing delta values.
|
|
33860
|
+
*
|
|
33861
|
+
* The 'wheel' event is more standard:
|
|
33862
|
+
*
|
|
33863
|
+
* http://www.w3.org/TR/DOM-Level-3-Events/#events-wheelevents
|
|
33864
|
+
*
|
|
33865
|
+
* The basics is that it includes a unit, deltaMode (pixels, lines, pages), and
|
|
33866
|
+
* deltaX, deltaY and deltaZ. Some browsers provide other values to maintain
|
|
33867
|
+
* backward compatibility with older events. Those other values help us
|
|
33868
|
+
* better normalize spin speed. Example of what the browsers provide:
|
|
33869
|
+
*
|
|
33870
|
+
* | event.wheelDelta | event.detail
|
|
33871
|
+
* ------------------+------------------+--------------
|
|
33872
|
+
* Safari v5/OS X | -120 | 0
|
|
33873
|
+
* Safari v5/Win7 | -120 | 0
|
|
33874
|
+
* Chrome v17/OS X | -120 | 0
|
|
33875
|
+
* Chrome v17/Win7 | -120 | 0
|
|
33876
|
+
* IE9/Win7 | -120 | undefined
|
|
33877
|
+
* Firefox v4/OS X | undefined | 1
|
|
33878
|
+
* Firefox v4/Win7 | undefined | 3
|
|
33879
|
+
*
|
|
33880
|
+
*/
|
|
33881
|
+
function normalizeWheel$2(/*object*/ event) /*object*/ {
|
|
33882
|
+
var sX = 0, sY = 0, // spinX, spinY
|
|
33883
|
+
pX = 0, pY = 0; // pixelX, pixelY
|
|
33884
|
+
|
|
33885
|
+
// Legacy
|
|
33886
|
+
if ('detail' in event) { sY = event.detail; }
|
|
33887
|
+
if ('wheelDelta' in event) { sY = -event.wheelDelta / 120; }
|
|
33888
|
+
if ('wheelDeltaY' in event) { sY = -event.wheelDeltaY / 120; }
|
|
33889
|
+
if ('wheelDeltaX' in event) { sX = -event.wheelDeltaX / 120; }
|
|
33890
|
+
|
|
33891
|
+
// side scrolling on FF with DOMMouseScroll
|
|
33892
|
+
if ( 'axis' in event && event.axis === event.HORIZONTAL_AXIS ) {
|
|
33893
|
+
sX = sY;
|
|
33894
|
+
sY = 0;
|
|
33895
|
+
}
|
|
33896
|
+
|
|
33897
|
+
pX = sX * PIXEL_STEP;
|
|
33898
|
+
pY = sY * PIXEL_STEP;
|
|
33899
|
+
|
|
33900
|
+
if ('deltaY' in event) { pY = event.deltaY; }
|
|
33901
|
+
if ('deltaX' in event) { pX = event.deltaX; }
|
|
33902
|
+
|
|
33903
|
+
if ((pX || pY) && event.deltaMode) {
|
|
33904
|
+
if (event.deltaMode == 1) { // delta in LINE units
|
|
33905
|
+
pX *= LINE_HEIGHT;
|
|
33906
|
+
pY *= LINE_HEIGHT;
|
|
33907
|
+
} else { // delta in PAGE units
|
|
33908
|
+
pX *= PAGE_HEIGHT;
|
|
33909
|
+
pY *= PAGE_HEIGHT;
|
|
33910
|
+
}
|
|
33911
|
+
}
|
|
33912
|
+
|
|
33913
|
+
// Fall-back if spin cannot be determined
|
|
33914
|
+
if (pX && !sX) { sX = (pX < 1) ? -1 : 1; }
|
|
33915
|
+
if (pY && !sY) { sY = (pY < 1) ? -1 : 1; }
|
|
33916
|
+
|
|
33917
|
+
return { spinX : sX,
|
|
33918
|
+
spinY : sY,
|
|
33919
|
+
pixelX : pX,
|
|
33920
|
+
pixelY : pY };
|
|
33921
|
+
}
|
|
33922
|
+
|
|
33923
|
+
|
|
33924
|
+
/**
|
|
33925
|
+
* The best combination if you prefer spinX + spinY normalization. It favors
|
|
33926
|
+
* the older DOMMouseScroll for Firefox, as FF does not include wheelDelta with
|
|
33927
|
+
* 'wheel' event, making spin speed determination impossible.
|
|
33928
|
+
*/
|
|
33929
|
+
normalizeWheel$2.getEventType = function() /*string*/ {
|
|
33930
|
+
return (UserAgent_DEPRECATED.firefox())
|
|
33931
|
+
? 'DOMMouseScroll'
|
|
33932
|
+
: (isEventSupported('wheel'))
|
|
33933
|
+
? 'wheel'
|
|
33934
|
+
: 'mousewheel';
|
|
33935
|
+
};
|
|
33936
|
+
|
|
33937
|
+
var normalizeWheel_1 = normalizeWheel$2;
|
|
33938
|
+
|
|
33939
|
+
var normalizeWheel = normalizeWheel_1;
|
|
33940
|
+
|
|
33941
|
+
var normalizeWheel$1 = /*@__PURE__*/getDefaultExportFromCjs(normalizeWheel);
|
|
33942
|
+
|
|
33943
|
+
//#region \0@oxc-project+runtime@0.134.0/helpers/esm/typeof.js
|
|
33944
|
+
function _typeof(o) {
|
|
33945
|
+
"@babel/helpers - typeof";
|
|
33946
|
+
return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function(o) {
|
|
33947
|
+
return typeof o;
|
|
33948
|
+
} : function(o) {
|
|
33949
|
+
return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o;
|
|
33950
|
+
}, _typeof(o);
|
|
33951
|
+
}
|
|
33952
|
+
//#endregion
|
|
33953
|
+
//#region \0@oxc-project+runtime@0.134.0/helpers/esm/toPrimitive.js
|
|
33954
|
+
function toPrimitive(t, r) {
|
|
33955
|
+
if ("object" != _typeof(t) || !t) return t;
|
|
33956
|
+
var e = t[Symbol.toPrimitive];
|
|
33957
|
+
if (void 0 !== e) {
|
|
33958
|
+
var i = e.call(t, r);
|
|
33959
|
+
if ("object" != _typeof(i)) return i;
|
|
33960
|
+
throw new TypeError("@@toPrimitive must return a primitive value.");
|
|
33961
|
+
}
|
|
33962
|
+
return ("string" === r ? String : Number)(t);
|
|
33963
|
+
}
|
|
33964
|
+
//#endregion
|
|
33965
|
+
//#region \0@oxc-project+runtime@0.134.0/helpers/esm/toPropertyKey.js
|
|
33966
|
+
function toPropertyKey(t) {
|
|
33967
|
+
var i = toPrimitive(t, "string");
|
|
33968
|
+
return "symbol" == _typeof(i) ? i : i + "";
|
|
33969
|
+
}
|
|
33970
|
+
//#endregion
|
|
33971
|
+
//#region \0@oxc-project+runtime@0.134.0/helpers/esm/defineProperty.js
|
|
33972
|
+
function _defineProperty(e, r, t) {
|
|
33973
|
+
return (r = toPropertyKey(r)) in e ? Object.defineProperty(e, r, {
|
|
33974
|
+
value: t,
|
|
33975
|
+
enumerable: true,
|
|
33976
|
+
configurable: true,
|
|
33977
|
+
writable: true
|
|
33978
|
+
}) : e[r] = t, e;
|
|
33979
|
+
}
|
|
33980
|
+
//#endregion
|
|
33981
|
+
//#region \0@oxc-project+runtime@0.134.0/helpers/esm/objectSpread2.js
|
|
33982
|
+
function ownKeys(e, r) {
|
|
33983
|
+
var t = Object.keys(e);
|
|
33984
|
+
if (Object.getOwnPropertySymbols) {
|
|
33985
|
+
var o = Object.getOwnPropertySymbols(e);
|
|
33986
|
+
r && (o = o.filter(function(r) {
|
|
33987
|
+
return Object.getOwnPropertyDescriptor(e, r).enumerable;
|
|
33988
|
+
})), t.push.apply(t, o);
|
|
33989
|
+
}
|
|
33990
|
+
return t;
|
|
33991
|
+
}
|
|
33992
|
+
function _objectSpread2(e) {
|
|
33993
|
+
for (var r = 1; r < arguments.length; r++) {
|
|
33994
|
+
var t = null != arguments[r] ? arguments[r] : {};
|
|
33995
|
+
r % 2 ? ownKeys(Object(t), true).forEach(function(r) {
|
|
33996
|
+
_defineProperty(e, r, t[r]);
|
|
33997
|
+
}) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function(r) {
|
|
33998
|
+
Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r));
|
|
33999
|
+
});
|
|
34000
|
+
}
|
|
34001
|
+
return e;
|
|
34002
|
+
}
|
|
34003
|
+
//#endregion
|
|
34004
|
+
//#region src/helpers.ts
|
|
34005
|
+
/**
|
|
34006
|
+
* Compute the dimension of the crop area based on media size,
|
|
34007
|
+
* aspect ratio and optionally rotation
|
|
34008
|
+
*/
|
|
34009
|
+
function getCropSize(mediaWidth, mediaHeight, containerWidth, containerHeight, aspect, rotation = 0) {
|
|
34010
|
+
const { width, height } = rotateSize(mediaWidth, mediaHeight, rotation);
|
|
34011
|
+
const fittingWidth = Math.min(width, containerWidth);
|
|
34012
|
+
const fittingHeight = Math.min(height, containerHeight);
|
|
34013
|
+
if (fittingWidth > fittingHeight * aspect) return {
|
|
34014
|
+
width: fittingHeight * aspect,
|
|
34015
|
+
height: fittingHeight
|
|
34016
|
+
};
|
|
34017
|
+
return {
|
|
34018
|
+
width: fittingWidth,
|
|
34019
|
+
height: fittingWidth / aspect
|
|
34020
|
+
};
|
|
34021
|
+
}
|
|
34022
|
+
/**
|
|
34023
|
+
* Compute media zoom.
|
|
34024
|
+
* We fit the media into the container with "max-width: 100%; max-height: 100%;"
|
|
34025
|
+
*/
|
|
34026
|
+
function getMediaZoom(mediaSize) {
|
|
34027
|
+
return mediaSize.width > mediaSize.height ? mediaSize.width / mediaSize.naturalWidth : mediaSize.height / mediaSize.naturalHeight;
|
|
34028
|
+
}
|
|
34029
|
+
/**
|
|
34030
|
+
* Ensure a new media position stays in the crop area.
|
|
34031
|
+
*/
|
|
34032
|
+
function restrictPosition(position, mediaSize, cropSize, zoom, rotation = 0) {
|
|
34033
|
+
const { width, height } = rotateSize(mediaSize.width, mediaSize.height, rotation);
|
|
34034
|
+
return {
|
|
34035
|
+
x: restrictPositionCoord(position.x, width, cropSize.width, zoom),
|
|
34036
|
+
y: restrictPositionCoord(position.y, height, cropSize.height, zoom)
|
|
34037
|
+
};
|
|
34038
|
+
}
|
|
34039
|
+
function restrictPositionCoord(position, mediaSize, cropSize, zoom) {
|
|
34040
|
+
const maxPosition = Math.abs(mediaSize * zoom / 2 - cropSize / 2);
|
|
34041
|
+
return clamp(position, -maxPosition, maxPosition);
|
|
34042
|
+
}
|
|
34043
|
+
function getDistanceBetweenPoints(pointA, pointB) {
|
|
34044
|
+
return Math.sqrt(Math.pow(pointA.y - pointB.y, 2) + Math.pow(pointA.x - pointB.x, 2));
|
|
34045
|
+
}
|
|
34046
|
+
function getRotationBetweenPoints(pointA, pointB) {
|
|
34047
|
+
return Math.atan2(pointB.y - pointA.y, pointB.x - pointA.x) * 180 / Math.PI;
|
|
34048
|
+
}
|
|
34049
|
+
/**
|
|
34050
|
+
* Compute the output cropped area of the media in percentages and pixels.
|
|
34051
|
+
* x/y are the top-left coordinates on the src media
|
|
34052
|
+
*/
|
|
34053
|
+
function computeCroppedArea(crop, mediaSize, cropSize, aspect, zoom, rotation = 0, restrictPosition = true) {
|
|
34054
|
+
const limitAreaFn = restrictPosition ? limitArea : noOp;
|
|
34055
|
+
const mediaBBoxSize = rotateSize(mediaSize.width, mediaSize.height, rotation);
|
|
34056
|
+
const mediaNaturalBBoxSize = rotateSize(mediaSize.naturalWidth, mediaSize.naturalHeight, rotation);
|
|
34057
|
+
const croppedAreaPercentages = {
|
|
34058
|
+
x: limitAreaFn(100, ((mediaBBoxSize.width - cropSize.width / zoom) / 2 - crop.x / zoom) / mediaBBoxSize.width * 100),
|
|
34059
|
+
y: limitAreaFn(100, ((mediaBBoxSize.height - cropSize.height / zoom) / 2 - crop.y / zoom) / mediaBBoxSize.height * 100),
|
|
34060
|
+
width: limitAreaFn(100, cropSize.width / mediaBBoxSize.width * 100 / zoom),
|
|
34061
|
+
height: limitAreaFn(100, cropSize.height / mediaBBoxSize.height * 100 / zoom)
|
|
34062
|
+
};
|
|
34063
|
+
const widthInPixels = Math.round(limitAreaFn(mediaNaturalBBoxSize.width, croppedAreaPercentages.width * mediaNaturalBBoxSize.width / 100));
|
|
34064
|
+
const heightInPixels = Math.round(limitAreaFn(mediaNaturalBBoxSize.height, croppedAreaPercentages.height * mediaNaturalBBoxSize.height / 100));
|
|
34065
|
+
const sizePixels = mediaNaturalBBoxSize.width >= mediaNaturalBBoxSize.height * aspect ? {
|
|
34066
|
+
width: Math.round(heightInPixels * aspect),
|
|
34067
|
+
height: heightInPixels
|
|
34068
|
+
} : {
|
|
34069
|
+
width: widthInPixels,
|
|
34070
|
+
height: Math.round(widthInPixels / aspect)
|
|
34071
|
+
};
|
|
34072
|
+
return {
|
|
34073
|
+
croppedAreaPercentages,
|
|
34074
|
+
croppedAreaPixels: _objectSpread2(_objectSpread2({}, sizePixels), {}, {
|
|
34075
|
+
x: Math.round(limitAreaFn(mediaNaturalBBoxSize.width - sizePixels.width, croppedAreaPercentages.x * mediaNaturalBBoxSize.width / 100)),
|
|
34076
|
+
y: Math.round(limitAreaFn(mediaNaturalBBoxSize.height - sizePixels.height, croppedAreaPercentages.y * mediaNaturalBBoxSize.height / 100))
|
|
34077
|
+
})
|
|
34078
|
+
};
|
|
34079
|
+
}
|
|
34080
|
+
/**
|
|
34081
|
+
* Ensure the returned value is between 0 and max
|
|
34082
|
+
*/
|
|
34083
|
+
function limitArea(max, value) {
|
|
34084
|
+
return Math.min(max, Math.max(0, value));
|
|
34085
|
+
}
|
|
34086
|
+
function noOp(_max, value) {
|
|
34087
|
+
return value;
|
|
34088
|
+
}
|
|
34089
|
+
/**
|
|
34090
|
+
* Compute crop and zoom from the croppedAreaPercentages.
|
|
34091
|
+
*/
|
|
34092
|
+
function getInitialCropFromCroppedAreaPercentages(croppedAreaPercentages, mediaSize, rotation, cropSize, minZoom, maxZoom) {
|
|
34093
|
+
const mediaBBoxSize = rotateSize(mediaSize.width, mediaSize.height, rotation);
|
|
34094
|
+
const zoom = clamp(cropSize.width / mediaBBoxSize.width * (100 / croppedAreaPercentages.width), minZoom, maxZoom);
|
|
34095
|
+
return {
|
|
34096
|
+
crop: {
|
|
34097
|
+
x: zoom * mediaBBoxSize.width / 2 - cropSize.width / 2 - mediaBBoxSize.width * zoom * (croppedAreaPercentages.x / 100),
|
|
34098
|
+
y: zoom * mediaBBoxSize.height / 2 - cropSize.height / 2 - mediaBBoxSize.height * zoom * (croppedAreaPercentages.y / 100)
|
|
34099
|
+
},
|
|
34100
|
+
zoom
|
|
34101
|
+
};
|
|
34102
|
+
}
|
|
34103
|
+
/**
|
|
34104
|
+
* Compute zoom from the croppedAreaPixels
|
|
34105
|
+
*/
|
|
34106
|
+
function getZoomFromCroppedAreaPixels(croppedAreaPixels, mediaSize, cropSize) {
|
|
34107
|
+
const mediaZoom = getMediaZoom(mediaSize);
|
|
34108
|
+
return cropSize.height > cropSize.width ? cropSize.height / (croppedAreaPixels.height * mediaZoom) : cropSize.width / (croppedAreaPixels.width * mediaZoom);
|
|
34109
|
+
}
|
|
34110
|
+
/**
|
|
34111
|
+
* Compute crop and zoom from the croppedAreaPixels
|
|
34112
|
+
*/
|
|
34113
|
+
function getInitialCropFromCroppedAreaPixels(croppedAreaPixels, mediaSize, rotation = 0, cropSize, minZoom, maxZoom) {
|
|
34114
|
+
const mediaNaturalBBoxSize = rotateSize(mediaSize.naturalWidth, mediaSize.naturalHeight, rotation);
|
|
34115
|
+
const zoom = clamp(getZoomFromCroppedAreaPixels(croppedAreaPixels, mediaSize, cropSize), minZoom, maxZoom);
|
|
34116
|
+
const cropZoom = cropSize.height > cropSize.width ? cropSize.height / croppedAreaPixels.height : cropSize.width / croppedAreaPixels.width;
|
|
34117
|
+
return {
|
|
34118
|
+
crop: {
|
|
34119
|
+
x: ((mediaNaturalBBoxSize.width - croppedAreaPixels.width) / 2 - croppedAreaPixels.x) * cropZoom,
|
|
34120
|
+
y: ((mediaNaturalBBoxSize.height - croppedAreaPixels.height) / 2 - croppedAreaPixels.y) * cropZoom
|
|
34121
|
+
},
|
|
34122
|
+
zoom
|
|
34123
|
+
};
|
|
34124
|
+
}
|
|
34125
|
+
/**
|
|
34126
|
+
* Return the point that is the center of point a and b
|
|
34127
|
+
*/
|
|
34128
|
+
function getCenter(a, b) {
|
|
34129
|
+
return {
|
|
34130
|
+
x: (b.x + a.x) / 2,
|
|
34131
|
+
y: (b.y + a.y) / 2
|
|
34132
|
+
};
|
|
34133
|
+
}
|
|
34134
|
+
function getRadianAngle(degreeValue) {
|
|
34135
|
+
return degreeValue * Math.PI / 180;
|
|
34136
|
+
}
|
|
34137
|
+
/**
|
|
34138
|
+
* Returns the new bounding area of a rotated rectangle.
|
|
34139
|
+
*/
|
|
34140
|
+
function rotateSize(width, height, rotation) {
|
|
34141
|
+
const rotRad = getRadianAngle(rotation);
|
|
34142
|
+
return {
|
|
34143
|
+
width: Math.abs(Math.cos(rotRad) * width) + Math.abs(Math.sin(rotRad) * height),
|
|
34144
|
+
height: Math.abs(Math.sin(rotRad) * width) + Math.abs(Math.cos(rotRad) * height)
|
|
34145
|
+
};
|
|
34146
|
+
}
|
|
34147
|
+
/**
|
|
34148
|
+
* Clamp value between min and max
|
|
34149
|
+
*/
|
|
34150
|
+
function clamp(value, min, max) {
|
|
34151
|
+
return Math.min(Math.max(value, min), max);
|
|
34152
|
+
}
|
|
34153
|
+
/**
|
|
34154
|
+
* Combine multiple class names into a single string.
|
|
34155
|
+
*/
|
|
34156
|
+
function classNames(...args) {
|
|
34157
|
+
return args.filter((value) => {
|
|
34158
|
+
if (typeof value === "string" && value.length > 0) return true;
|
|
34159
|
+
return false;
|
|
34160
|
+
}).join(" ").trim();
|
|
34161
|
+
}
|
|
34162
|
+
//#endregion
|
|
34163
|
+
//#region src/styles.css?raw
|
|
34164
|
+
var styles_default = ".reactEasyCrop_Container {\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n overflow: hidden;\n user-select: none;\n touch-action: none;\n cursor: move;\n display: flex;\n justify-content: center;\n align-items: center;\n}\n\n.reactEasyCrop_Image,\n.reactEasyCrop_Video {\n will-change: transform; /* this improves performances and prevent painting issues on iOS Chrome */\n max-width: unset; /* prevent global img/video reset rules from constraining the cropper media */\n}\n\n.reactEasyCrop_Contain {\n max-width: 100%;\n max-height: 100%;\n margin: auto;\n position: absolute;\n top: 0;\n bottom: 0;\n left: 0;\n right: 0;\n}\n.reactEasyCrop_Cover_Horizontal {\n width: 100%;\n height: auto;\n}\n.reactEasyCrop_Cover_Vertical {\n width: auto;\n height: 100%;\n}\n\n.reactEasyCrop_CropArea {\n position: absolute;\n left: 50%;\n top: 50%;\n transform: translate(-50%, -50%);\n border: 1px solid rgba(255, 255, 255, 0.5);\n box-sizing: border-box;\n box-shadow: 0 0 0 9999em;\n color: rgba(0, 0, 0, 0.5);\n overflow: hidden;\n}\n\n.reactEasyCrop_CropAreaRound {\n border-radius: 50%;\n}\n\n.reactEasyCrop_CropAreaGrid::before {\n content: ' ';\n box-sizing: border-box;\n position: absolute;\n border: 1px solid rgba(255, 255, 255, 0.5);\n top: 0;\n bottom: 0;\n left: 33.33%;\n right: 33.33%;\n border-top: 0;\n border-bottom: 0;\n}\n\n.reactEasyCrop_CropAreaGrid::after {\n content: ' ';\n box-sizing: border-box;\n position: absolute;\n border: 1px solid rgba(255, 255, 255, 0.5);\n top: 33.33%;\n bottom: 33.33%;\n left: 0;\n right: 0;\n border-left: 0;\n border-right: 0;\n}\n";
|
|
34165
|
+
//#endregion
|
|
34166
|
+
//#region src/Cropper.tsx
|
|
34167
|
+
const RESIZE_EMIT_DEBOUNCE_TIME = 250;
|
|
34168
|
+
const MIN_ZOOM = 1;
|
|
34169
|
+
const MAX_ZOOM = 3;
|
|
34170
|
+
const KEYBOARD_STEP = 1;
|
|
34171
|
+
var Cropper$1 = class Cropper extends React__namespace.Component {
|
|
34172
|
+
constructor(..._args) {
|
|
34173
|
+
super(..._args);
|
|
34174
|
+
this.cropperRef = React__namespace.createRef();
|
|
34175
|
+
this.imageRef = React__namespace.createRef();
|
|
34176
|
+
this.videoRef = React__namespace.createRef();
|
|
34177
|
+
this.containerPosition = {
|
|
34178
|
+
x: 0,
|
|
34179
|
+
y: 0
|
|
34180
|
+
};
|
|
34181
|
+
this.containerRef = null;
|
|
34182
|
+
this.styleRef = null;
|
|
34183
|
+
this.containerRect = null;
|
|
34184
|
+
this.mediaSize = {
|
|
34185
|
+
width: 0,
|
|
34186
|
+
height: 0,
|
|
34187
|
+
naturalWidth: 0,
|
|
34188
|
+
naturalHeight: 0
|
|
34189
|
+
};
|
|
34190
|
+
this.dragStartPosition = {
|
|
34191
|
+
x: 0,
|
|
34192
|
+
y: 0
|
|
34193
|
+
};
|
|
34194
|
+
this.dragStartCrop = {
|
|
34195
|
+
x: 0,
|
|
34196
|
+
y: 0
|
|
34197
|
+
};
|
|
34198
|
+
this.gestureZoomStart = 0;
|
|
34199
|
+
this.gestureRotationStart = 0;
|
|
34200
|
+
this.isTouching = false;
|
|
34201
|
+
this.lastPinchDistance = 0;
|
|
34202
|
+
this.lastPinchRotation = 0;
|
|
34203
|
+
this.rafDragTimeout = null;
|
|
34204
|
+
this.rafPinchTimeout = null;
|
|
34205
|
+
this.wheelTimer = null;
|
|
34206
|
+
this.resizeEmitTimer = null;
|
|
34207
|
+
this.currentDoc = typeof document !== "undefined" ? document : null;
|
|
34208
|
+
this.currentWindow = typeof window !== "undefined" ? window : null;
|
|
34209
|
+
this.resizeObserver = null;
|
|
34210
|
+
this.previousCropSize = null;
|
|
34211
|
+
this.isInitialized = false;
|
|
34212
|
+
this.state = {
|
|
34213
|
+
cropSize: null,
|
|
34214
|
+
hasWheelJustStarted: false,
|
|
34215
|
+
mediaObjectFit: void 0
|
|
34216
|
+
};
|
|
34217
|
+
this.initResizeObserver = () => {
|
|
34218
|
+
if (typeof window.ResizeObserver === "undefined" || !this.containerRef) return;
|
|
34219
|
+
let isFirstResize = true;
|
|
34220
|
+
this.resizeObserver = new window.ResizeObserver((entries) => {
|
|
34221
|
+
if (isFirstResize) {
|
|
34222
|
+
isFirstResize = false;
|
|
34223
|
+
return;
|
|
34224
|
+
}
|
|
34225
|
+
this.computeSizes({ isResizeTriggered: true });
|
|
34226
|
+
});
|
|
34227
|
+
this.resizeObserver.observe(this.containerRef);
|
|
34228
|
+
};
|
|
34229
|
+
this.onWindowResize = () => {
|
|
34230
|
+
this.computeSizes({ isResizeTriggered: true });
|
|
34231
|
+
};
|
|
34232
|
+
this.preventZoomSafari = (e) => e.preventDefault();
|
|
34233
|
+
this.cleanEvents = () => {
|
|
34234
|
+
if (!this.currentDoc) return;
|
|
34235
|
+
this.currentDoc.removeEventListener("mousemove", this.onMouseMove);
|
|
34236
|
+
this.currentDoc.removeEventListener("mouseup", this.onDragStopped);
|
|
34237
|
+
this.currentDoc.removeEventListener("touchmove", this.onTouchMove);
|
|
34238
|
+
this.currentDoc.removeEventListener("touchend", this.onDragStopped);
|
|
34239
|
+
this.currentDoc.removeEventListener("gesturechange", this.onGestureChange);
|
|
34240
|
+
this.currentDoc.removeEventListener("gestureend", this.onGestureEnd);
|
|
34241
|
+
this.currentDoc.removeEventListener("scroll", this.onScroll);
|
|
34242
|
+
};
|
|
34243
|
+
this.clearScrollEvent = () => {
|
|
34244
|
+
if (this.containerRef) this.containerRef.removeEventListener("wheel", this.onWheel);
|
|
34245
|
+
if (this.wheelTimer) clearTimeout(this.wheelTimer);
|
|
34246
|
+
};
|
|
34247
|
+
this.onMediaLoad = () => {
|
|
34248
|
+
const cropSize = this.computeSizes();
|
|
34249
|
+
if (cropSize) {
|
|
34250
|
+
this.previousCropSize = cropSize;
|
|
34251
|
+
this.emitCropData();
|
|
34252
|
+
this.setInitialCrop(cropSize);
|
|
34253
|
+
this.isInitialized = true;
|
|
34254
|
+
}
|
|
34255
|
+
if (this.props.onMediaLoaded) this.props.onMediaLoaded(this.mediaSize);
|
|
34256
|
+
};
|
|
34257
|
+
this.setInitialCrop = (cropSize) => {
|
|
34258
|
+
if (this.props.initialCroppedAreaPercentages) {
|
|
34259
|
+
const { crop, zoom } = getInitialCropFromCroppedAreaPercentages(this.props.initialCroppedAreaPercentages, this.mediaSize, this.props.rotation, cropSize, this.props.minZoom, this.props.maxZoom);
|
|
34260
|
+
this.props.onCropChange(crop);
|
|
34261
|
+
this.props.onZoomChange && this.props.onZoomChange(zoom);
|
|
34262
|
+
} else if (this.props.initialCroppedAreaPixels) {
|
|
34263
|
+
const { crop, zoom } = getInitialCropFromCroppedAreaPixels(this.props.initialCroppedAreaPixels, this.mediaSize, this.props.rotation, cropSize, this.props.minZoom, this.props.maxZoom);
|
|
34264
|
+
this.props.onCropChange(crop);
|
|
34265
|
+
this.props.onZoomChange && this.props.onZoomChange(zoom);
|
|
34266
|
+
}
|
|
34267
|
+
};
|
|
34268
|
+
this.computeSizes = ({ isResizeTriggered = false } = {}) => {
|
|
34269
|
+
const mediaRef = this.imageRef.current || this.videoRef.current;
|
|
34270
|
+
if (mediaRef && this.containerRef) {
|
|
34271
|
+
var _this$imageRef$curren, _this$videoRef$curren, _this$imageRef$curren2, _this$videoRef$curren2, _this$state$cropSize, _this$state$cropSize2;
|
|
34272
|
+
this.containerRect = this.containerRef.getBoundingClientRect();
|
|
34273
|
+
this.saveContainerPosition();
|
|
34274
|
+
const containerAspect = this.containerRect.width / this.containerRect.height;
|
|
34275
|
+
const naturalWidth = ((_this$imageRef$curren = this.imageRef.current) === null || _this$imageRef$curren === void 0 ? void 0 : _this$imageRef$curren.naturalWidth) || ((_this$videoRef$curren = this.videoRef.current) === null || _this$videoRef$curren === void 0 ? void 0 : _this$videoRef$curren.videoWidth) || 0;
|
|
34276
|
+
const naturalHeight = ((_this$imageRef$curren2 = this.imageRef.current) === null || _this$imageRef$curren2 === void 0 ? void 0 : _this$imageRef$curren2.naturalHeight) || ((_this$videoRef$curren2 = this.videoRef.current) === null || _this$videoRef$curren2 === void 0 ? void 0 : _this$videoRef$curren2.videoHeight) || 0;
|
|
34277
|
+
const isMediaScaledDown = mediaRef.offsetWidth < naturalWidth || mediaRef.offsetHeight < naturalHeight;
|
|
34278
|
+
const mediaAspect = naturalWidth / naturalHeight;
|
|
34279
|
+
let renderedMediaSize;
|
|
34280
|
+
if (isMediaScaledDown) switch (this.state.mediaObjectFit) {
|
|
34281
|
+
default:
|
|
34282
|
+
case "contain":
|
|
34283
|
+
renderedMediaSize = containerAspect > mediaAspect ? {
|
|
34284
|
+
width: this.containerRect.height * mediaAspect,
|
|
34285
|
+
height: this.containerRect.height
|
|
34286
|
+
} : {
|
|
34287
|
+
width: this.containerRect.width,
|
|
34288
|
+
height: this.containerRect.width / mediaAspect
|
|
34289
|
+
};
|
|
34290
|
+
break;
|
|
34291
|
+
case "horizontal-cover":
|
|
34292
|
+
renderedMediaSize = {
|
|
34293
|
+
width: this.containerRect.width,
|
|
34294
|
+
height: this.containerRect.width / mediaAspect
|
|
34295
|
+
};
|
|
34296
|
+
break;
|
|
34297
|
+
case "vertical-cover":
|
|
34298
|
+
renderedMediaSize = {
|
|
34299
|
+
width: this.containerRect.height * mediaAspect,
|
|
34300
|
+
height: this.containerRect.height
|
|
34301
|
+
};
|
|
34302
|
+
break;
|
|
34303
|
+
}
|
|
34304
|
+
else renderedMediaSize = {
|
|
34305
|
+
width: mediaRef.offsetWidth,
|
|
34306
|
+
height: mediaRef.offsetHeight
|
|
34307
|
+
};
|
|
34308
|
+
this.mediaSize = _objectSpread2(_objectSpread2({}, renderedMediaSize), {}, {
|
|
34309
|
+
naturalWidth,
|
|
34310
|
+
naturalHeight
|
|
34311
|
+
});
|
|
34312
|
+
if (this.props.setMediaSize) this.props.setMediaSize(this.mediaSize);
|
|
34313
|
+
const cropSize = this.props.cropSize ? this.props.cropSize : getCropSize(this.mediaSize.width, this.mediaSize.height, this.containerRect.width, this.containerRect.height, this.props.aspect, this.props.rotation);
|
|
34314
|
+
if (((_this$state$cropSize = this.state.cropSize) === null || _this$state$cropSize === void 0 ? void 0 : _this$state$cropSize.height) !== cropSize.height || ((_this$state$cropSize2 = this.state.cropSize) === null || _this$state$cropSize2 === void 0 ? void 0 : _this$state$cropSize2.width) !== cropSize.width) this.props.onCropSizeChange && this.props.onCropSizeChange(cropSize);
|
|
34315
|
+
this.setState({ cropSize }, () => this.recomputeCropPosition({ isResizeTriggered }));
|
|
34316
|
+
if (this.props.setCropSize) this.props.setCropSize(cropSize);
|
|
34317
|
+
return cropSize;
|
|
34318
|
+
}
|
|
34319
|
+
};
|
|
34320
|
+
this.saveContainerPosition = () => {
|
|
34321
|
+
if (this.containerRef) {
|
|
34322
|
+
const bounds = this.containerRef.getBoundingClientRect();
|
|
34323
|
+
this.containerPosition = {
|
|
34324
|
+
x: bounds.left,
|
|
34325
|
+
y: bounds.top
|
|
34326
|
+
};
|
|
34327
|
+
}
|
|
34328
|
+
};
|
|
34329
|
+
this.onMouseDown = (e) => {
|
|
34330
|
+
if (!this.currentDoc) return;
|
|
34331
|
+
e.preventDefault();
|
|
34332
|
+
this.currentDoc.addEventListener("mousemove", this.onMouseMove);
|
|
34333
|
+
this.currentDoc.addEventListener("mouseup", this.onDragStopped);
|
|
34334
|
+
this.saveContainerPosition();
|
|
34335
|
+
this.onDragStart(Cropper.getMousePoint(e));
|
|
34336
|
+
};
|
|
34337
|
+
this.onMouseMove = (e) => this.onDrag(Cropper.getMousePoint(e));
|
|
34338
|
+
this.onScroll = (e) => {
|
|
34339
|
+
if (!this.currentDoc) return;
|
|
34340
|
+
e.preventDefault();
|
|
34341
|
+
this.saveContainerPosition();
|
|
34342
|
+
};
|
|
34343
|
+
this.onTouchStart = (e) => {
|
|
34344
|
+
if (!this.currentDoc) return;
|
|
34345
|
+
this.isTouching = true;
|
|
34346
|
+
if (this.props.onTouchRequest && !this.props.onTouchRequest(e)) return;
|
|
34347
|
+
this.currentDoc.addEventListener("touchmove", this.onTouchMove, { passive: false });
|
|
34348
|
+
this.currentDoc.addEventListener("touchend", this.onDragStopped);
|
|
34349
|
+
this.saveContainerPosition();
|
|
34350
|
+
if (e.touches.length === 2) this.onPinchStart(e);
|
|
34351
|
+
else if (e.touches.length === 1) this.onDragStart(Cropper.getTouchPoint(e.touches[0]));
|
|
34352
|
+
};
|
|
34353
|
+
this.onTouchMove = (e) => {
|
|
34354
|
+
e.preventDefault();
|
|
34355
|
+
if (e.touches.length === 2) this.onPinchMove(e);
|
|
34356
|
+
else if (e.touches.length === 1) this.onDrag(Cropper.getTouchPoint(e.touches[0]));
|
|
34357
|
+
};
|
|
34358
|
+
this.onGestureStart = (e) => {
|
|
34359
|
+
if (!this.currentDoc) return;
|
|
34360
|
+
e.preventDefault();
|
|
34361
|
+
this.currentDoc.addEventListener("gesturechange", this.onGestureChange);
|
|
34362
|
+
this.currentDoc.addEventListener("gestureend", this.onGestureEnd);
|
|
34363
|
+
this.gestureZoomStart = this.props.zoom;
|
|
34364
|
+
this.gestureRotationStart = this.props.rotation;
|
|
34365
|
+
};
|
|
34366
|
+
this.onGestureChange = (e) => {
|
|
34367
|
+
e.preventDefault();
|
|
34368
|
+
if (this.isTouching) return;
|
|
34369
|
+
const point = Cropper.getMousePoint(e);
|
|
34370
|
+
const newZoom = this.gestureZoomStart - 1 + e.scale;
|
|
34371
|
+
this.setNewZoom(newZoom, point, { shouldUpdatePosition: true });
|
|
34372
|
+
if (this.props.onRotationChange) {
|
|
34373
|
+
const newRotation = this.gestureRotationStart + e.rotation;
|
|
34374
|
+
this.props.onRotationChange(newRotation);
|
|
34375
|
+
}
|
|
34376
|
+
};
|
|
34377
|
+
this.onGestureEnd = (e) => {
|
|
34378
|
+
this.cleanEvents();
|
|
34379
|
+
};
|
|
34380
|
+
this.onDragStart = ({ x, y }) => {
|
|
34381
|
+
var _this$props$onInterac, _this$props;
|
|
34382
|
+
this.dragStartPosition = {
|
|
34383
|
+
x,
|
|
34384
|
+
y
|
|
34385
|
+
};
|
|
34386
|
+
this.dragStartCrop = _objectSpread2({}, this.props.crop);
|
|
34387
|
+
(_this$props$onInterac = (_this$props = this.props).onInteractionStart) === null || _this$props$onInterac === void 0 || _this$props$onInterac.call(_this$props);
|
|
34388
|
+
};
|
|
34389
|
+
this.onDrag = ({ x, y }) => {
|
|
34390
|
+
if (!this.currentWindow) return;
|
|
34391
|
+
if (this.rafDragTimeout) this.currentWindow.cancelAnimationFrame(this.rafDragTimeout);
|
|
34392
|
+
this.rafDragTimeout = this.currentWindow.requestAnimationFrame(() => {
|
|
34393
|
+
if (!this.state.cropSize) return;
|
|
34394
|
+
if (x === void 0 || y === void 0) return;
|
|
34395
|
+
const offsetX = x - this.dragStartPosition.x;
|
|
34396
|
+
const offsetY = y - this.dragStartPosition.y;
|
|
34397
|
+
const requestedPosition = {
|
|
34398
|
+
x: this.dragStartCrop.x + offsetX,
|
|
34399
|
+
y: this.dragStartCrop.y + offsetY
|
|
34400
|
+
};
|
|
34401
|
+
const newPosition = this.props.restrictPosition ? restrictPosition(requestedPosition, this.mediaSize, this.state.cropSize, this.props.zoom, this.props.rotation) : requestedPosition;
|
|
34402
|
+
this.props.onCropChange(newPosition);
|
|
34403
|
+
});
|
|
34404
|
+
};
|
|
34405
|
+
this.onDragStopped = () => {
|
|
34406
|
+
var _this$props$onInterac2, _this$props2;
|
|
34407
|
+
this.isTouching = false;
|
|
34408
|
+
this.cleanEvents();
|
|
34409
|
+
this.emitCropData();
|
|
34410
|
+
(_this$props$onInterac2 = (_this$props2 = this.props).onInteractionEnd) === null || _this$props$onInterac2 === void 0 || _this$props$onInterac2.call(_this$props2);
|
|
34411
|
+
};
|
|
34412
|
+
this.onWheel = (e) => {
|
|
34413
|
+
if (!this.currentWindow) return;
|
|
34414
|
+
if (this.props.onWheelRequest && !this.props.onWheelRequest(e)) return;
|
|
34415
|
+
e.preventDefault();
|
|
34416
|
+
const point = Cropper.getMousePoint(e);
|
|
34417
|
+
const { pixelY } = normalizeWheel$1(e);
|
|
34418
|
+
const newZoom = this.props.zoom - pixelY * this.props.zoomSpeed / 200;
|
|
34419
|
+
this.setNewZoom(newZoom, point, { shouldUpdatePosition: true });
|
|
34420
|
+
if (!this.state.hasWheelJustStarted) this.setState({ hasWheelJustStarted: true }, () => {
|
|
34421
|
+
var _this$props$onInterac3, _this$props3;
|
|
34422
|
+
return (_this$props$onInterac3 = (_this$props3 = this.props).onInteractionStart) === null || _this$props$onInterac3 === void 0 ? void 0 : _this$props$onInterac3.call(_this$props3);
|
|
34423
|
+
});
|
|
34424
|
+
if (this.wheelTimer) clearTimeout(this.wheelTimer);
|
|
34425
|
+
this.wheelTimer = this.currentWindow.setTimeout(() => this.setState({ hasWheelJustStarted: false }, () => {
|
|
34426
|
+
var _this$props$onInterac4, _this$props4;
|
|
34427
|
+
return (_this$props$onInterac4 = (_this$props4 = this.props).onInteractionEnd) === null || _this$props$onInterac4 === void 0 ? void 0 : _this$props$onInterac4.call(_this$props4);
|
|
34428
|
+
}), 250);
|
|
34429
|
+
};
|
|
34430
|
+
this.getPointOnContainer = ({ x, y }, containerTopLeft) => {
|
|
34431
|
+
if (!this.containerRect) throw new Error("The Cropper is not mounted");
|
|
34432
|
+
return {
|
|
34433
|
+
x: this.containerRect.width / 2 - (x - containerTopLeft.x),
|
|
34434
|
+
y: this.containerRect.height / 2 - (y - containerTopLeft.y)
|
|
34435
|
+
};
|
|
34436
|
+
};
|
|
34437
|
+
this.getPointOnMedia = ({ x, y }) => {
|
|
34438
|
+
const { crop, zoom } = this.props;
|
|
34439
|
+
return {
|
|
34440
|
+
x: (x + crop.x) / zoom,
|
|
34441
|
+
y: (y + crop.y) / zoom
|
|
34442
|
+
};
|
|
34443
|
+
};
|
|
34444
|
+
this.setNewZoom = (zoom, point, { shouldUpdatePosition = true } = {}) => {
|
|
34445
|
+
if (!this.state.cropSize || !this.props.onZoomChange) return;
|
|
34446
|
+
const newZoom = clamp(zoom, this.props.minZoom, this.props.maxZoom);
|
|
34447
|
+
if (shouldUpdatePosition) {
|
|
34448
|
+
const zoomPoint = this.getPointOnContainer(point, this.containerPosition);
|
|
34449
|
+
const zoomTarget = this.getPointOnMedia(zoomPoint);
|
|
34450
|
+
const requestedPosition = {
|
|
34451
|
+
x: zoomTarget.x * newZoom - zoomPoint.x,
|
|
34452
|
+
y: zoomTarget.y * newZoom - zoomPoint.y
|
|
34453
|
+
};
|
|
34454
|
+
const newPosition = this.props.restrictPosition ? restrictPosition(requestedPosition, this.mediaSize, this.state.cropSize, newZoom, this.props.rotation) : requestedPosition;
|
|
34455
|
+
this.props.onCropChange(newPosition);
|
|
34456
|
+
}
|
|
34457
|
+
this.props.onZoomChange(newZoom);
|
|
34458
|
+
};
|
|
34459
|
+
this.getCropData = () => {
|
|
34460
|
+
if (!this.state.cropSize) return null;
|
|
34461
|
+
return computeCroppedArea(this.props.restrictPosition ? restrictPosition(this.props.crop, this.mediaSize, this.state.cropSize, this.props.zoom, this.props.rotation) : this.props.crop, this.mediaSize, this.state.cropSize, this.getAspect(), this.props.zoom, this.props.rotation, this.props.restrictPosition);
|
|
34462
|
+
};
|
|
34463
|
+
this.emitCropData = () => {
|
|
34464
|
+
if (this.resizeEmitTimer) {
|
|
34465
|
+
clearTimeout(this.resizeEmitTimer);
|
|
34466
|
+
this.resizeEmitTimer = null;
|
|
34467
|
+
}
|
|
34468
|
+
const cropData = this.getCropData();
|
|
34469
|
+
if (!cropData) return;
|
|
34470
|
+
const { croppedAreaPercentages, croppedAreaPixels } = cropData;
|
|
34471
|
+
if (this.props.onCropComplete) this.props.onCropComplete(croppedAreaPercentages, croppedAreaPixels);
|
|
34472
|
+
if (this.props.onCropAreaChange) this.props.onCropAreaChange(croppedAreaPercentages, croppedAreaPixels);
|
|
34473
|
+
};
|
|
34474
|
+
this.emitCropAreaChange = () => {
|
|
34475
|
+
const cropData = this.getCropData();
|
|
34476
|
+
if (!cropData) return;
|
|
34477
|
+
const { croppedAreaPercentages, croppedAreaPixels } = cropData;
|
|
34478
|
+
if (this.props.onCropAreaChange) this.props.onCropAreaChange(croppedAreaPercentages, croppedAreaPixels);
|
|
34479
|
+
};
|
|
34480
|
+
this.recomputeCropPosition = ({ isResizeTriggered = false } = {}) => {
|
|
34481
|
+
var _this$previousCropSiz, _this$previousCropSiz2;
|
|
34482
|
+
if (!this.state.cropSize) return;
|
|
34483
|
+
let adjustedCrop = this.props.crop;
|
|
34484
|
+
if (this.isInitialized && ((_this$previousCropSiz = this.previousCropSize) === null || _this$previousCropSiz === void 0 ? void 0 : _this$previousCropSiz.width) && ((_this$previousCropSiz2 = this.previousCropSize) === null || _this$previousCropSiz2 === void 0 ? void 0 : _this$previousCropSiz2.height)) {
|
|
34485
|
+
if (Math.abs(this.previousCropSize.width - this.state.cropSize.width) > 1e-6 || Math.abs(this.previousCropSize.height - this.state.cropSize.height) > 1e-6) {
|
|
34486
|
+
const scaleX = this.state.cropSize.width / this.previousCropSize.width;
|
|
34487
|
+
const scaleY = this.state.cropSize.height / this.previousCropSize.height;
|
|
34488
|
+
adjustedCrop = {
|
|
34489
|
+
x: this.props.crop.x * scaleX,
|
|
34490
|
+
y: this.props.crop.y * scaleY
|
|
34491
|
+
};
|
|
34492
|
+
}
|
|
34493
|
+
}
|
|
34494
|
+
const newPosition = this.props.restrictPosition ? restrictPosition(adjustedCrop, this.mediaSize, this.state.cropSize, this.props.zoom, this.props.rotation) : adjustedCrop;
|
|
34495
|
+
this.previousCropSize = this.state.cropSize;
|
|
34496
|
+
this.props.onCropChange(newPosition);
|
|
34497
|
+
if (isResizeTriggered) this.debouncedEmitCropData();
|
|
34498
|
+
else this.emitCropData();
|
|
34499
|
+
};
|
|
34500
|
+
this.debouncedEmitCropData = () => {
|
|
34501
|
+
if (!this.currentWindow) return;
|
|
34502
|
+
if (this.resizeEmitTimer) clearTimeout(this.resizeEmitTimer);
|
|
34503
|
+
this.resizeEmitTimer = this.currentWindow.setTimeout(() => {
|
|
34504
|
+
this.emitCropData();
|
|
34505
|
+
}, RESIZE_EMIT_DEBOUNCE_TIME);
|
|
34506
|
+
};
|
|
34507
|
+
this.onKeyDown = (event) => {
|
|
34508
|
+
const { crop, onCropChange, keyboardStep, zoom, rotation } = this.props;
|
|
34509
|
+
let step = keyboardStep;
|
|
34510
|
+
if (!this.state.cropSize) return;
|
|
34511
|
+
if (event.shiftKey) step *= .2;
|
|
34512
|
+
let newCrop = _objectSpread2({}, crop);
|
|
34513
|
+
switch (event.key) {
|
|
34514
|
+
case "ArrowUp":
|
|
34515
|
+
newCrop.y -= step;
|
|
34516
|
+
event.preventDefault();
|
|
34517
|
+
break;
|
|
34518
|
+
case "ArrowDown":
|
|
34519
|
+
newCrop.y += step;
|
|
34520
|
+
event.preventDefault();
|
|
34521
|
+
break;
|
|
34522
|
+
case "ArrowLeft":
|
|
34523
|
+
newCrop.x -= step;
|
|
34524
|
+
event.preventDefault();
|
|
34525
|
+
break;
|
|
34526
|
+
case "ArrowRight":
|
|
34527
|
+
newCrop.x += step;
|
|
34528
|
+
event.preventDefault();
|
|
34529
|
+
break;
|
|
34530
|
+
default: return;
|
|
34531
|
+
}
|
|
34532
|
+
if (this.props.restrictPosition) newCrop = restrictPosition(newCrop, this.mediaSize, this.state.cropSize, zoom, rotation);
|
|
34533
|
+
if (!event.repeat) {
|
|
34534
|
+
var _this$props$onInterac5, _this$props5;
|
|
34535
|
+
(_this$props$onInterac5 = (_this$props5 = this.props).onInteractionStart) === null || _this$props$onInterac5 === void 0 || _this$props$onInterac5.call(_this$props5);
|
|
34536
|
+
}
|
|
34537
|
+
onCropChange(newCrop);
|
|
34538
|
+
};
|
|
34539
|
+
this.onKeyUp = (event) => {
|
|
34540
|
+
var _this$props$onInterac6, _this$props6;
|
|
34541
|
+
switch (event.key) {
|
|
34542
|
+
case "ArrowUp":
|
|
34543
|
+
case "ArrowDown":
|
|
34544
|
+
case "ArrowLeft":
|
|
34545
|
+
case "ArrowRight":
|
|
34546
|
+
event.preventDefault();
|
|
34547
|
+
break;
|
|
34548
|
+
default: return;
|
|
34549
|
+
}
|
|
34550
|
+
this.emitCropData();
|
|
34551
|
+
(_this$props$onInterac6 = (_this$props6 = this.props).onInteractionEnd) === null || _this$props$onInterac6 === void 0 || _this$props$onInterac6.call(_this$props6);
|
|
34552
|
+
};
|
|
34553
|
+
}
|
|
34554
|
+
componentDidMount() {
|
|
34555
|
+
if (!this.currentDoc || !this.currentWindow) return;
|
|
34556
|
+
if (this.containerRef) {
|
|
34557
|
+
if (this.containerRef.ownerDocument) this.currentDoc = this.containerRef.ownerDocument;
|
|
34558
|
+
if (this.currentDoc.defaultView) this.currentWindow = this.currentDoc.defaultView;
|
|
34559
|
+
this.initResizeObserver();
|
|
34560
|
+
if (typeof window.ResizeObserver === "undefined") this.currentWindow.addEventListener("resize", this.onWindowResize);
|
|
34561
|
+
this.props.zoomWithScroll && this.containerRef.addEventListener("wheel", this.onWheel, { passive: false });
|
|
34562
|
+
this.containerRef.addEventListener("gesturestart", this.onGestureStart);
|
|
34563
|
+
}
|
|
34564
|
+
this.currentDoc.addEventListener("scroll", this.onScroll);
|
|
34565
|
+
if (!this.props.disableAutomaticStylesInjection) {
|
|
34566
|
+
this.styleRef = this.currentDoc.createElement("style");
|
|
34567
|
+
this.styleRef.setAttribute("type", "text/css");
|
|
34568
|
+
if (this.props.nonce) this.styleRef.setAttribute("nonce", this.props.nonce);
|
|
34569
|
+
this.styleRef.innerHTML = styles_default;
|
|
34570
|
+
this.currentDoc.head.appendChild(this.styleRef);
|
|
34571
|
+
}
|
|
34572
|
+
if (this.imageRef.current && this.imageRef.current.complete) this.onMediaLoad();
|
|
34573
|
+
if (this.props.setImageRef) this.props.setImageRef(this.imageRef);
|
|
34574
|
+
if (this.props.setVideoRef) this.props.setVideoRef(this.videoRef);
|
|
34575
|
+
if (this.props.setCropperRef) this.props.setCropperRef(this.cropperRef);
|
|
34576
|
+
}
|
|
34577
|
+
componentWillUnmount() {
|
|
34578
|
+
var _this$resizeObserver;
|
|
34579
|
+
if (!this.currentDoc || !this.currentWindow) return;
|
|
34580
|
+
if (typeof window.ResizeObserver === "undefined") this.currentWindow.removeEventListener("resize", this.onWindowResize);
|
|
34581
|
+
(_this$resizeObserver = this.resizeObserver) === null || _this$resizeObserver === void 0 || _this$resizeObserver.disconnect();
|
|
34582
|
+
if (this.resizeEmitTimer) clearTimeout(this.resizeEmitTimer);
|
|
34583
|
+
if (this.containerRef) this.containerRef.removeEventListener("gesturestart", this.preventZoomSafari);
|
|
34584
|
+
if (this.styleRef) {
|
|
34585
|
+
var _this$styleRef$parent;
|
|
34586
|
+
(_this$styleRef$parent = this.styleRef.parentNode) === null || _this$styleRef$parent === void 0 || _this$styleRef$parent.removeChild(this.styleRef);
|
|
34587
|
+
}
|
|
34588
|
+
this.cleanEvents();
|
|
34589
|
+
this.props.zoomWithScroll && this.clearScrollEvent();
|
|
34590
|
+
}
|
|
34591
|
+
componentDidUpdate(prevProps) {
|
|
34592
|
+
var _prevProps$cropSize, _this$props$cropSize, _prevProps$cropSize2, _this$props$cropSize2, _prevProps$crop, _this$props$crop, _prevProps$crop2, _this$props$crop2;
|
|
34593
|
+
if (prevProps.rotation !== this.props.rotation) {
|
|
34594
|
+
this.computeSizes();
|
|
34595
|
+
this.recomputeCropPosition();
|
|
34596
|
+
} else if (prevProps.aspect !== this.props.aspect) this.computeSizes();
|
|
34597
|
+
else if (prevProps.objectFit !== this.props.objectFit) this.computeSizes();
|
|
34598
|
+
else if (prevProps.zoom !== this.props.zoom) this.recomputeCropPosition();
|
|
34599
|
+
else if (((_prevProps$cropSize = prevProps.cropSize) === null || _prevProps$cropSize === void 0 ? void 0 : _prevProps$cropSize.height) !== ((_this$props$cropSize = this.props.cropSize) === null || _this$props$cropSize === void 0 ? void 0 : _this$props$cropSize.height) || ((_prevProps$cropSize2 = prevProps.cropSize) === null || _prevProps$cropSize2 === void 0 ? void 0 : _prevProps$cropSize2.width) !== ((_this$props$cropSize2 = this.props.cropSize) === null || _this$props$cropSize2 === void 0 ? void 0 : _this$props$cropSize2.width)) this.computeSizes();
|
|
34600
|
+
else if (((_prevProps$crop = prevProps.crop) === null || _prevProps$crop === void 0 ? void 0 : _prevProps$crop.x) !== ((_this$props$crop = this.props.crop) === null || _this$props$crop === void 0 ? void 0 : _this$props$crop.x) || ((_prevProps$crop2 = prevProps.crop) === null || _prevProps$crop2 === void 0 ? void 0 : _prevProps$crop2.y) !== ((_this$props$crop2 = this.props.crop) === null || _this$props$crop2 === void 0 ? void 0 : _this$props$crop2.y)) this.emitCropAreaChange();
|
|
34601
|
+
if (prevProps.zoomWithScroll !== this.props.zoomWithScroll && this.containerRef) this.props.zoomWithScroll ? this.containerRef.addEventListener("wheel", this.onWheel, { passive: false }) : this.clearScrollEvent();
|
|
34602
|
+
if (prevProps.video !== this.props.video) {
|
|
34603
|
+
var _this$videoRef$curren3;
|
|
34604
|
+
(_this$videoRef$curren3 = this.videoRef.current) === null || _this$videoRef$curren3 === void 0 || _this$videoRef$curren3.load();
|
|
34605
|
+
}
|
|
34606
|
+
const objectFit = this.getObjectFit();
|
|
34607
|
+
if (objectFit !== this.state.mediaObjectFit) this.setState({ mediaObjectFit: objectFit }, this.computeSizes);
|
|
34608
|
+
}
|
|
34609
|
+
getAspect() {
|
|
34610
|
+
const { cropSize, aspect } = this.props;
|
|
34611
|
+
if (cropSize) return cropSize.width / cropSize.height;
|
|
34612
|
+
return aspect;
|
|
34613
|
+
}
|
|
34614
|
+
getObjectFit() {
|
|
34615
|
+
if (this.props.objectFit === "cover") {
|
|
34616
|
+
if ((this.imageRef.current || this.videoRef.current) && this.containerRef) {
|
|
34617
|
+
var _this$imageRef$curren3, _this$videoRef$curren4, _this$imageRef$curren4, _this$videoRef$curren5;
|
|
34618
|
+
this.containerRect = this.containerRef.getBoundingClientRect();
|
|
34619
|
+
const containerAspect = this.containerRect.width / this.containerRect.height;
|
|
34620
|
+
return (((_this$imageRef$curren3 = this.imageRef.current) === null || _this$imageRef$curren3 === void 0 ? void 0 : _this$imageRef$curren3.naturalWidth) || ((_this$videoRef$curren4 = this.videoRef.current) === null || _this$videoRef$curren4 === void 0 ? void 0 : _this$videoRef$curren4.videoWidth) || 0) / (((_this$imageRef$curren4 = this.imageRef.current) === null || _this$imageRef$curren4 === void 0 ? void 0 : _this$imageRef$curren4.naturalHeight) || ((_this$videoRef$curren5 = this.videoRef.current) === null || _this$videoRef$curren5 === void 0 ? void 0 : _this$videoRef$curren5.videoHeight) || 0) < containerAspect ? "horizontal-cover" : "vertical-cover";
|
|
34621
|
+
}
|
|
34622
|
+
return "horizontal-cover";
|
|
34623
|
+
}
|
|
34624
|
+
return this.props.objectFit;
|
|
34625
|
+
}
|
|
34626
|
+
onPinchStart(e) {
|
|
34627
|
+
const pointA = Cropper.getTouchPoint(e.touches[0]);
|
|
34628
|
+
const pointB = Cropper.getTouchPoint(e.touches[1]);
|
|
34629
|
+
this.lastPinchDistance = getDistanceBetweenPoints(pointA, pointB);
|
|
34630
|
+
this.lastPinchRotation = getRotationBetweenPoints(pointA, pointB);
|
|
34631
|
+
this.onDragStart(getCenter(pointA, pointB));
|
|
34632
|
+
}
|
|
34633
|
+
onPinchMove(e) {
|
|
34634
|
+
if (!this.currentDoc || !this.currentWindow) return;
|
|
34635
|
+
const pointA = Cropper.getTouchPoint(e.touches[0]);
|
|
34636
|
+
const pointB = Cropper.getTouchPoint(e.touches[1]);
|
|
34637
|
+
const center = getCenter(pointA, pointB);
|
|
34638
|
+
this.onDrag(center);
|
|
34639
|
+
if (this.rafPinchTimeout) this.currentWindow.cancelAnimationFrame(this.rafPinchTimeout);
|
|
34640
|
+
this.rafPinchTimeout = this.currentWindow.requestAnimationFrame(() => {
|
|
34641
|
+
const distance = getDistanceBetweenPoints(pointA, pointB);
|
|
34642
|
+
const newZoom = this.props.zoom * (distance / this.lastPinchDistance);
|
|
34643
|
+
this.setNewZoom(newZoom, center, { shouldUpdatePosition: false });
|
|
34644
|
+
this.lastPinchDistance = distance;
|
|
34645
|
+
const rotation = getRotationBetweenPoints(pointA, pointB);
|
|
34646
|
+
const newRotation = this.props.rotation + (rotation - this.lastPinchRotation);
|
|
34647
|
+
this.props.onRotationChange && this.props.onRotationChange(newRotation);
|
|
34648
|
+
this.lastPinchRotation = rotation;
|
|
34649
|
+
});
|
|
34650
|
+
}
|
|
34651
|
+
render() {
|
|
34652
|
+
var _this$state$mediaObje;
|
|
34653
|
+
const { image, video, mediaProps, cropperProps, transform, crop: { x, y }, rotation, zoom, cropShape, showGrid, roundCropAreaPixels, style: { containerStyle, cropAreaStyle, mediaStyle }, classes: { containerClassName, cropAreaClassName, mediaClassName } } = this.props;
|
|
34654
|
+
const objectFit = (_this$state$mediaObje = this.state.mediaObjectFit) !== null && _this$state$mediaObje !== void 0 ? _this$state$mediaObje : this.getObjectFit();
|
|
34655
|
+
return /* @__PURE__ */ React__namespace.createElement("div", {
|
|
34656
|
+
onMouseDown: this.onMouseDown,
|
|
34657
|
+
onTouchStart: this.onTouchStart,
|
|
34658
|
+
ref: (el) => this.containerRef = el,
|
|
34659
|
+
"data-testid": "container",
|
|
34660
|
+
style: containerStyle,
|
|
34661
|
+
className: classNames("reactEasyCrop_Container", containerClassName)
|
|
34662
|
+
}, image ? /* @__PURE__ */ React__namespace.createElement("img", _objectSpread2(_objectSpread2({
|
|
34663
|
+
alt: "",
|
|
34664
|
+
className: classNames("reactEasyCrop_Image", objectFit === "contain" && "reactEasyCrop_Contain", objectFit === "horizontal-cover" && "reactEasyCrop_Cover_Horizontal", objectFit === "vertical-cover" && "reactEasyCrop_Cover_Vertical", mediaClassName)
|
|
34665
|
+
}, mediaProps), {}, {
|
|
34666
|
+
src: image,
|
|
34667
|
+
ref: this.imageRef,
|
|
34668
|
+
style: _objectSpread2(_objectSpread2({}, mediaStyle), {}, { transform: transform || `translate(${x}px, ${y}px) rotate(${rotation}deg) scale(${zoom})` }),
|
|
34669
|
+
onLoad: this.onMediaLoad
|
|
34670
|
+
})) : video && /* @__PURE__ */ React__namespace.createElement("video", _objectSpread2(_objectSpread2({
|
|
34671
|
+
autoPlay: true,
|
|
34672
|
+
playsInline: true,
|
|
34673
|
+
loop: true,
|
|
34674
|
+
muted: true,
|
|
34675
|
+
className: classNames("reactEasyCrop_Video", objectFit === "contain" && "reactEasyCrop_Contain", objectFit === "horizontal-cover" && "reactEasyCrop_Cover_Horizontal", objectFit === "vertical-cover" && "reactEasyCrop_Cover_Vertical", mediaClassName)
|
|
34676
|
+
}, mediaProps), {}, {
|
|
34677
|
+
ref: this.videoRef,
|
|
34678
|
+
onLoadedMetadata: this.onMediaLoad,
|
|
34679
|
+
style: _objectSpread2(_objectSpread2({}, mediaStyle), {}, { transform: transform || `translate(${x}px, ${y}px) rotate(${rotation}deg) scale(${zoom})` }),
|
|
34680
|
+
controls: false
|
|
34681
|
+
}), (Array.isArray(video) ? video : [{ src: video }]).map((item) => /* @__PURE__ */ React__namespace.createElement("source", _objectSpread2({ key: item.src }, item)))), this.state.cropSize && /* @__PURE__ */ React__namespace.createElement("div", _objectSpread2({
|
|
34682
|
+
ref: this.cropperRef,
|
|
34683
|
+
style: _objectSpread2(_objectSpread2({}, cropAreaStyle), {}, {
|
|
34684
|
+
width: roundCropAreaPixels ? Math.round(this.state.cropSize.width) : this.state.cropSize.width,
|
|
34685
|
+
height: roundCropAreaPixels ? Math.round(this.state.cropSize.height) : this.state.cropSize.height
|
|
34686
|
+
}),
|
|
34687
|
+
tabIndex: 0,
|
|
34688
|
+
onKeyDown: this.onKeyDown,
|
|
34689
|
+
onKeyUp: this.onKeyUp,
|
|
34690
|
+
"data-testid": "cropper",
|
|
34691
|
+
className: classNames("reactEasyCrop_CropArea", cropShape === "round" && "reactEasyCrop_CropAreaRound", showGrid && "reactEasyCrop_CropAreaGrid", cropAreaClassName)
|
|
34692
|
+
}, cropperProps)));
|
|
34693
|
+
}
|
|
34694
|
+
};
|
|
34695
|
+
Cropper$1.defaultProps = {
|
|
34696
|
+
zoom: 1,
|
|
34697
|
+
rotation: 0,
|
|
34698
|
+
aspect: 4 / 3,
|
|
34699
|
+
maxZoom: MAX_ZOOM,
|
|
34700
|
+
minZoom: MIN_ZOOM,
|
|
34701
|
+
cropShape: "rect",
|
|
34702
|
+
objectFit: "contain",
|
|
34703
|
+
showGrid: true,
|
|
34704
|
+
style: {},
|
|
34705
|
+
classes: {},
|
|
34706
|
+
mediaProps: {},
|
|
34707
|
+
cropperProps: {},
|
|
34708
|
+
zoomSpeed: 1,
|
|
34709
|
+
restrictPosition: true,
|
|
34710
|
+
zoomWithScroll: true,
|
|
34711
|
+
keyboardStep: KEYBOARD_STEP
|
|
34712
|
+
};
|
|
34713
|
+
Cropper$1.getMousePoint = (e) => ({
|
|
34714
|
+
x: Number(e.clientX),
|
|
34715
|
+
y: Number(e.clientY)
|
|
34716
|
+
});
|
|
34717
|
+
Cropper$1.getTouchPoint = (touch) => ({
|
|
34718
|
+
x: Number(touch.clientX),
|
|
34719
|
+
y: Number(touch.clientY)
|
|
34720
|
+
});
|
|
34721
|
+
//#endregion
|
|
34722
|
+
//#region src/index.ts
|
|
34723
|
+
var src_default = Cropper$1;
|
|
34724
|
+
|
|
34725
|
+
async function getCroppedFile(imageSrc, pixelCrop, originalFileName) {
|
|
34726
|
+
const image = await loadImage(imageSrc);
|
|
34727
|
+
const canvas = document.createElement("canvas");
|
|
34728
|
+
canvas.width = pixelCrop.width;
|
|
34729
|
+
canvas.height = pixelCrop.height;
|
|
34730
|
+
const ctx = canvas.getContext("2d");
|
|
34731
|
+
if (!ctx)
|
|
34732
|
+
throw new Error("Could not get 2d canvas context");
|
|
34733
|
+
ctx.drawImage(image, pixelCrop.x, pixelCrop.y, pixelCrop.width, pixelCrop.height, 0, 0, pixelCrop.width, pixelCrop.height);
|
|
34734
|
+
return new Promise((resolve, reject) => {
|
|
34735
|
+
canvas.toBlob((blob) => {
|
|
34736
|
+
if (!blob) {
|
|
34737
|
+
reject(new Error("canvas.toBlob produced no output"));
|
|
34738
|
+
return;
|
|
34739
|
+
}
|
|
34740
|
+
const ext = originalFileName.substring(originalFileName.lastIndexOf(".")) || ".jpg";
|
|
34741
|
+
resolve(new File([blob], `cropped${ext}`, { type: "image/jpeg" }));
|
|
34742
|
+
}, "image/jpeg");
|
|
34743
|
+
});
|
|
34744
|
+
}
|
|
34745
|
+
function loadImage(src) {
|
|
34746
|
+
return new Promise((resolve, reject) => {
|
|
34747
|
+
const img = new Image();
|
|
34748
|
+
img.addEventListener("load", () => resolve(img));
|
|
34749
|
+
img.addEventListener("error", reject);
|
|
34750
|
+
img.src = src;
|
|
34751
|
+
});
|
|
34752
|
+
}
|
|
34753
|
+
|
|
34754
|
+
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
34755
|
+
const Cropper = src_default;
|
|
34756
|
+
const ImageCropModal = ({ isOpen, imageSrc, originalFileName, aspectRatio = 1, onClose, onCropComplete, title = "Crop image", confirmLabel = "Crop & Upload", cancelLabel = "Cancel", zoomLabel = "Zoom", }) => {
|
|
34757
|
+
const [crop, setCrop] = React.useState({ x: 0, y: 0 });
|
|
34758
|
+
const [zoom, setZoom] = React.useState(1);
|
|
34759
|
+
const [croppedAreaPixels, setCroppedAreaPixels] = React.useState(null);
|
|
34760
|
+
const [isCropping, setIsCropping] = React.useState(false);
|
|
34761
|
+
const handleCropComplete = React.useCallback((_, pixels) => {
|
|
34762
|
+
setCroppedAreaPixels(pixels);
|
|
34763
|
+
}, []);
|
|
34764
|
+
const handleConfirm = async () => {
|
|
34765
|
+
if (!croppedAreaPixels)
|
|
34766
|
+
return;
|
|
34767
|
+
setIsCropping(true);
|
|
34768
|
+
try {
|
|
34769
|
+
const file = await getCroppedFile(imageSrc, croppedAreaPixels, originalFileName);
|
|
34770
|
+
onCropComplete(file);
|
|
34771
|
+
}
|
|
34772
|
+
finally {
|
|
34773
|
+
setIsCropping(false);
|
|
34774
|
+
}
|
|
34775
|
+
};
|
|
34776
|
+
return (jsxRuntime.jsxs(Modal, { isOpen: isOpen, onClose: onClose, title: title, size: "lg", primaryAction: confirmLabel, secondaryAction: cancelLabel, onPrimaryAction: handleConfirm, onSecondaryAction: onClose, isLoading: isCropping, closeOnOverlayClick: false, children: [jsxRuntime.jsx("div", { className: "relative h-80 w-full bg-gray-900", children: jsxRuntime.jsx(Cropper, { image: imageSrc, crop: crop, zoom: zoom, aspect: aspectRatio, onCropChange: setCrop, onZoomChange: setZoom, onCropComplete: handleCropComplete }) }), jsxRuntime.jsxs("div", { className: "mt-4 px-1", children: [jsxRuntime.jsx("label", { className: "mb-1 block text-sm text-gray-500", children: zoomLabel }), jsxRuntime.jsx("input", { type: "range", min: 1, max: 3, step: 0.05, value: zoom, onChange: (e) => setZoom(Number(e.target.value)), className: "w-full accent-ews-primary" })] })] }));
|
|
34777
|
+
};
|
|
34778
|
+
|
|
33362
34779
|
const DropdownMultiSelect = ({ options, name, control, placeholder = "Select options", searchPlaceholder = "Search...", onChange, value: controlledValue, defaultValue, onValidate, disabled = false, error, label, className, }) => {
|
|
33363
34780
|
const [isOpen, setIsOpen] = React.useState(false);
|
|
33364
34781
|
const [searchTerm, setSearchTerm] = React.useState("");
|
|
@@ -35076,7 +36493,7 @@ exports.FerrisWheel = FerrisWheel;
|
|
|
35076
36493
|
exports.FerrisWheelIcon = FerrisWheel;
|
|
35077
36494
|
exports.Figma = Figma;
|
|
35078
36495
|
exports.FigmaIcon = Figma;
|
|
35079
|
-
exports.File = File;
|
|
36496
|
+
exports.File = File$1;
|
|
35080
36497
|
exports.FileArchive = FileArchive;
|
|
35081
36498
|
exports.FileArchiveIcon = FileArchive;
|
|
35082
36499
|
exports.FileAudio = FileAudio;
|
|
@@ -35129,7 +36546,7 @@ exports.FileEdit = FilePen;
|
|
|
35129
36546
|
exports.FileEditIcon = FilePen;
|
|
35130
36547
|
exports.FileHeart = FileHeart;
|
|
35131
36548
|
exports.FileHeartIcon = FileHeart;
|
|
35132
|
-
exports.FileIcon = File;
|
|
36549
|
+
exports.FileIcon = File$1;
|
|
35133
36550
|
exports.FileImage = FileImage;
|
|
35134
36551
|
exports.FileImageIcon = FileImage;
|
|
35135
36552
|
exports.FileInput = FileInput;
|
|
@@ -35615,10 +37032,11 @@ exports.IdCard = IdCard;
|
|
|
35615
37032
|
exports.IdCardIcon = IdCard;
|
|
35616
37033
|
exports.IdCardLanyard = IdCardLanyard;
|
|
35617
37034
|
exports.IdCardLanyardIcon = IdCardLanyard;
|
|
35618
|
-
exports.Image = Image;
|
|
37035
|
+
exports.Image = Image$1;
|
|
37036
|
+
exports.ImageCropModal = ImageCropModal;
|
|
35619
37037
|
exports.ImageDown = ImageDown;
|
|
35620
37038
|
exports.ImageDownIcon = ImageDown;
|
|
35621
|
-
exports.ImageIcon = Image;
|
|
37039
|
+
exports.ImageIcon = Image$1;
|
|
35622
37040
|
exports.ImageMinus = ImageMinus;
|
|
35623
37041
|
exports.ImageMinusIcon = ImageMinus;
|
|
35624
37042
|
exports.ImageOff = ImageOff;
|
|
@@ -36497,7 +37915,7 @@ exports.LucideFeather = Feather;
|
|
|
36497
37915
|
exports.LucideFence = Fence;
|
|
36498
37916
|
exports.LucideFerrisWheel = FerrisWheel;
|
|
36499
37917
|
exports.LucideFigma = Figma;
|
|
36500
|
-
exports.LucideFile = File;
|
|
37918
|
+
exports.LucideFile = File$1;
|
|
36501
37919
|
exports.LucideFileArchive = FileArchive;
|
|
36502
37920
|
exports.LucideFileAudio = FileAudio;
|
|
36503
37921
|
exports.LucideFileAudio2 = FileAudio2;
|
|
@@ -36766,7 +38184,7 @@ exports.LucideIceCreamBowl = IceCreamBowl;
|
|
|
36766
38184
|
exports.LucideIceCreamCone = IceCreamCone;
|
|
36767
38185
|
exports.LucideIdCard = IdCard;
|
|
36768
38186
|
exports.LucideIdCardLanyard = IdCardLanyard;
|
|
36769
|
-
exports.LucideImage = Image;
|
|
38187
|
+
exports.LucideImage = Image$1;
|
|
36770
38188
|
exports.LucideImageDown = ImageDown;
|
|
36771
38189
|
exports.LucideImageMinus = ImageMinus;
|
|
36772
38190
|
exports.LucideImageOff = ImageOff;
|