pixedi 1.3.0 → 1.4.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/CHANGELOG.md +4 -0
- package/README.md +10 -7
- package/README.npm.md +10 -7
- package/dist/lib/index.js +838 -692
- package/dist/lib/index.umd.js +3 -3
- package/dist/widget/pixedi-widget.js +6 -6
- package/package.json +1 -1
package/dist/lib/index.js
CHANGED
|
@@ -1,15 +1,15 @@
|
|
|
1
|
-
(function(){try{if(typeof document<`u`){var e=document.createElement(`style`);e.appendChild(document.createTextNode(`._button_1vpzl_1{cursor:pointer;white-space:nowrap;-webkit-user-select:none;user-select:none;box-sizing:border-box;background-color:#0000;border:1px solid #0000;border-radius:4px;justify-content:center;align-items:center;gap:8px;height:32px;padding:0 8px;font-family:inherit;font-size:14px;font-weight:500;transition:background-color .2s,border-color .2s,opacity .2s;display:inline-flex}._button_1vpzl_1:disabled{pointer-events:none;opacity:.5}._button_1vpzl_1 svg{flex-shrink:0;width:16px;height:16px}._default_1vpzl_35{background-color:var(--primary);color:var(--primary-foreground)}._default_1vpzl_35:hover{opacity:.9}._outline_1vpzl_44{border-color:var(--border);background-color:var(--background);color:var(--foreground)}._outline_1vpzl_44:hover{background-color:var(--secondary)}._ghost_1vpzl_54{color:var(--foreground);padding:0 8px}._ghost_1vpzl_54:hover{background-color:var(--secondary)}._rect_1vpzl_63{width:32px;height:32px}._separator_gp8ff_1{background-color:var(--border);box-sizing:border-box;border:none;flex-shrink:0;display:block}._separator_gp8ff_1[data-orientation=horizontal]{width:100%;height:1px}._separator_gp8ff_1[data-orientation=vertical]{align-self:stretch;width:1px;height:100%;margin:0}._wrapper_1aw0m_1{box-sizing:border-box;width:100%;position:relative}._trigger_1aw0m_6{width:100%;height:32px;color:var(--foreground);background-color:var(--background);border:1px solid var(--border);cursor:pointer;box-sizing:border-box;-webkit-user-select:none;user-select:none;border-radius:4px;outline:none;justify-content:space-between;align-items:center;padding:0 8px 0 10px;font-family:inherit;font-size:14px;transition:border-color .2s;display:flex}._trigger_1aw0m_6:hover,._trigger_1aw0m_6:focus{border-color:var(--muted-foreground)}._triggerArrow_1aw0m_31{width:16px;height:16px;color:var(--muted-foreground);transition:transform .2s}._wrapper_1aw0m_1[data-state=open] ._triggerArrow_1aw0m_31{transform:rotate(180deg)}._content_1aw0m_40{background-color:var(--background);border:1px solid var(--border);z-index:50;box-sizing:border-box;border-radius:4px;width:100%;max-height:282px;padding:4px;position:absolute;top:calc(100% + 4px);left:0;overflow-y:auto;box-shadow:0 10px 15px -3px #0000001a,0 4px 6px -2px #0000000d}._content_1aw0m_40::-webkit-scrollbar{width:4px}._content_1aw0m_40::-webkit-scrollbar-track{background:0 0}._content_1aw0m_40::-webkit-scrollbar-thumb{background-color:var(--border);border-radius:10px}._wrapper_1aw0m_1[data-state=closed] ._content_1aw0m_40{display:none}._groupLabel_1aw0m_74{color:var(--muted-foreground);-webkit-user-select:none;user-select:none;padding:8px 10px;font-size:12px;font-weight:500}._item_1aw0m_81{width:100%;color:var(--foreground);cursor:pointer;-webkit-user-select:none;user-select:none;box-sizing:border-box;background:0 0;border-radius:4px;justify-content:space-between;align-items:center;padding:4px 10px;display:flex}._item_1aw0m_81:hover{background-color:var(--secondary)}._itemLeft_1aw0m_98{font-size:14px;font-weight:400}._itemAddon_1aw0m_102{align-items:center;gap:8px;display:flex}._itemAddon_1aw0m_102 span{color:var(--muted-foreground);font-size:12px}._itemAddon_1aw0m_102 svg{font-size:14px}._itemAddon_1aw0m_102 b{flex-shrink:0;width:16px;height:16px}._itemRightContainer_1aw0m_122{align-items:center;gap:8px;display:flex}._itemRight_1aw0m_122{color:var(--muted-foreground);font-size:14px}._itemCheck_1aw0m_131{width:16px;height:16px;color:var(--foreground);flex-shrink:0}:host{height:100%;display:block}:host *{box-sizing:border-box}._root_c6gk7_8{width:100%;height:100%;font-size:16px;font-family:var(--font-sans);--font-sans:system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Tahoma, Helvetica, Arial, sans-serif;--font-mono:"Courier New", Courier, monospace;--color-white:#fff;--color-white-fade:color-mix(in srgb, var(--color-white) 40%, transparent);--color-black:#000;--color-red:oklch(63.7% .237 25.331);--color-green:oklch(76.8% .188 151.716);--background:oklch(100% 0 0);--foreground:oklch(14.5% 0 0);--primary:oklch(20.5% 0 0);--primary-foreground:oklch(98.5% 0 0);--secondary:oklch(97% 0 0);--secondary-foreground:oklch(20.5% 0 0);--muted:oklch(97% 0 0);--muted-foreground:oklch(75.6% 0 0);--accent:oklch(97% 0 0);--accent-foreground:oklch(20.5% 0 0);--accent-blue:oklch(60.9% .221 251.687);--accent-blue-light:oklch(96% .02 250);--accent-blue-fade:color-mix(in srgb, var(--accent-blue) 60%, transparent);--border:oklch(92.2% 0 0);--input:oklch(92.2% 0 0);--ring:oklch(70.8% 0 0);--overlay-bg:color-mix(in srgb, var(--color-black) 50%, transparent);--overlay-bg-white:color-mix(in srgb, var(--color-white) 80%, transparent);position:relative}._root_c6gk7_8[data-theme=dark]{--background:oklch(24.5% 0 0);--foreground:oklch(78.5% 0 0);--primary:oklch(92.2% 0 0);--primary-foreground:oklch(20.5% 0 0);--secondary:oklch(26.9% 0 0);--secondary-foreground:oklch(98.5% 0 0);--muted:oklch(24.5% 0 0);--muted-foreground:oklch(50% 0 0);--accent:oklch(26.9% 0 0);--accent-foreground:oklch(98.5% 0 0);--accent-blue-light:oklch(25% .06 250);--border:oklch(100% 0 0/.1);--input:oklch(100% 0 0/.15);--ring:oklch(55.6% 0 0);--overlay-bg:color-mix(in srgb, var(--color-black) 75%, transparent)}._root_c6gk7_8 h1,._root_c6gk7_8 h2,._root_c6gk7_8 h3,._root_c6gk7_8 h4,._root_c6gk7_8 h5,._root_c6gk7_8 h6{color:var(--foreground);margin:0;font-weight:600}._textRed_c6gk7_73{color:var(--color-red)}._bgRed_c6gk7_76{background-color:var(--color-red)}._bgGreen_c6gk7_79{background-color:var(--color-green)}._textGreen_c6gk7_82{color:var(--color-green)}._mask_c6gk7_85{background-color:var(--overlay-bg)}._semibold_c6gk7_88{letter-spacing:.4px;font-weight:600}._bold_c6gk7_92{letter-spacing:.4px;font-weight:700}._system_c6gk7_96{color:var(--muted-foreground);background-color:var(--background);justify-content:center;align-items:center;display:flex;position:absolute;inset:0}._wrapper_c6gk7_106{width:100%;height:100%;min-height:480px;position:relative;overflow:hidden}._grid_c6gk7_113{grid-template:"header header"48px"sidebar frame"minmax(0,1fr)"sidebar infobar"32px/48px 1fr;height:100%;display:grid;position:relative}._grid_c6gk7_113._mobile_c6gk7_124{grid-template-columns:0 1fr}._gridNoInfobar_c6gk7_128{grid-template:"header header"48px"sidebar frame"1fr/48px 1fr;height:100%;display:grid;position:relative}._gridNoInfobar_c6gk7_128._mobile_c6gk7_124{grid-template-columns:0 1fr}._input_kyavx_1{width:100%;height:32px;color:var(--foreground);background-color:var(--background);border:1px solid var(--input);box-sizing:border-box;border-radius:4px;outline:none;padding:0 8px;font-family:inherit;font-size:14px;line-height:normal;transition:border-color .2s,box-shadow .2s;display:block}._input_kyavx_1:hover:not(:disabled):not(:focus){border-color:var(--muted-foreground)}._input_kyavx_1:focus{box-shadow:0 0 0 1px var(--ring)}._input_kyavx_1:disabled{cursor:not-allowed;opacity:.5;background-color:var(--secondary)}._input_kyavx_1::placeholder{color:var(--muted-foreground);opacity:1}._numberClean_kyavx_39::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}._numberClean_kyavx_39::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}._numberClean_kyavx_39[type=number]{-moz-appearance:textfield}._container_14vsv_1{position:relative}._legend_14vsv_4{color:var(--muted-foreground);background:var(--background);margin-left:8px;padding:0 4px;font-size:12px;position:absolute;top:-9px}._suffix_14vsv_13{color:var(--muted-foreground);pointer-events:none;-webkit-user-select:none;user-select:none;font-size:14px;position:absolute;bottom:2px;right:8px}._group_1e7jm_1{margin-left:4px;display:flex}._save_1e7jm_6{width:36px;color:var(--color-green);border-top-right-radius:0;border-bottom-right-radius:0}._close_1e7jm_13{width:36px;color:var(--color-red);border-top-left-radius:0;border-bottom-left-radius:0;margin-left:-1px}._header_25ynx_1{box-sizing:border-box;background-color:var(--background);border-bottom:1px solid var(--border);grid-area:header;justify-content:space-between;align-items:center;height:48px;padding:0 8px;display:flex}._left_25ynx_12{align-items:center;gap:0;display:flex}._sidebarToggle_25ynx_17{border-right:solid 1px var(--border);cursor:pointer;justify-content:center;align-items:center;width:48px;height:48px;transition:all .2s;display:none;position:relative;left:-8px}._sidebarToggle_25ynx_17._mobile_25ynx_29{display:flex}._sidebarIcon_25ynx_33{stroke-width:1.6px;width:18px;height:18px}._tools_25ynx_38{gap:8px;display:flex}._history_25ynx_42{align-items:center;gap:4px;display:flex}._historyText_25ynx_47{color:var(--muted-foreground);font-size:14px;font-family:var(--font-mono)}._sidebar_16gr5_1{background:var(--background);border-right:1px solid var(--border);z-index:10;grid-area:sidebar;width:48px;position:relative;overflow:hidden}._sidebar_16gr5_1._mobile_16gr5_10{transition:transform .2s ease-out;transform:translate(-110%);box-shadow:0 4px 6px #0000001a}._sidebar_16gr5_1._mobile_16gr5_10._open_16gr5_15{transform:translate(0%)}._item_16gr5_20{cursor:pointer;justify-content:center;align-items:center;height:48px;transition:all .2s;display:flex;position:relative}._item_16gr5_20 svg{width:16px;height:16px}._item_16gr5_20:hover{background-color:var(--accent)}._item_16gr5_20._selected_16gr5_38{color:var(--accent-blue);background-color:var(--accent)}._item_16gr5_20._selected_16gr5_38:before{content:"";background-color:var(--accent-blue);width:2px;position:absolute;top:0;bottom:0;left:0}._infobar_ofe91_1{background:var(--muted);font-family:var(--font-mono);grid-area:infobar;justify-content:space-between;align-items:center;padding:0 16px;font-size:14px;display:flex}._resize_s127g_1{background-color:var(--background);border-radius:4px;align-items:center;gap:6px;padding:15px 8px 8px;display:flex;position:absolute;bottom:24px;left:50%;overflow:hidden;transform:translate(-50%);box-shadow:0 2px 8px #0000001a}._toolsLock_s127g_15{width:12px;height:12px;color:var(--muted-foreground)}._indicatorWrapper_s127g_20{justify-content:center;width:100%;height:1px;display:flex;position:absolute;top:0;left:0}._indicator_s127g_20{background:var(--accent-blue);opacity:.6;border-radius:2px;width:30%;height:100%;transition:width .2s}._preview_dvanl_1{box-sizing:border-box;max-width:calc(100% - 32px);max-height:calc(100% - 32px);margin:auto;transition:all .2s linear;position:absolute;inset:0;overflow:hidden}._rotate_dvanl_12{box-sizing:border-box;width:100%;height:100%;transition:all .2s linear;position:absolute;top:50%;left:50%;overflow:hidden;transform:translate(-50%,-50%)}._flip_dvanl_24{box-sizing:border-box;transition:all .2s linear;position:absolute;inset:0;overflow:hidden}._image_dvanl_32{max-width:none;max-height:none;transition:all .2s linear;display:block;position:absolute}._wrapper_1yhyo_1{box-sizing:border-box;max-width:calc(100% - 32px);max-height:calc(100% - 32px);margin:auto;position:absolute;inset:0}._box_1yhyo_9{cursor:move;box-sizing:border-box;-webkit-user-select:none;user-select:none;touch-action:none;border:1px solid var(--color-white-fade);position:absolute}._tools_1yhyo_18{background-color:var(--background);box-sizing:border-box;border:1px solid var(--border);border-radius:4px;align-items:center;gap:6px;padding:4px;display:flex;position:absolute;bottom:24px;left:50%;transform:translate(-50%);box-shadow:0 4px 6px -1px #0000001a,0 2px 4px -1px #0000000f}._toolsInfo_1yhyo_35{-webkit-user-select:none;user-select:none;min-width:54px;margin-top:-2px;display:inline-block}._toolsInfoLabel_1yhyo_42{color:var(--muted-foreground);font-size:12px;line-height:12px}._toolsInfoValue_1yhyo_47{color:var(--foreground);font-size:14px;line-height:14px}._linesBox_1yhyo_52{pointer-events:none;position:absolute;inset:1px}._line_1yhyo_52{border:1px dashed var(--color-white);opacity:.5;position:absolute}._lineV_1yhyo_62{border-top:0;border-bottom:0;width:33%;height:100%;top:0;left:33%}._lineH_1yhyo_70{border-left:0;border-right:0;width:100%;height:33%;top:33%;left:0}._pointer_1yhyo_78{box-sizing:border-box;width:14px;height:14px;position:absolute}._pointerTopLeft_1yhyo_84{border-top:3px solid var(--accent-blue);border-left:3px solid var(--accent-blue);cursor:nwse-resize;top:-6px;left:-6px}._pointerTopRight_1yhyo_91{border-top:3px solid var(--accent-blue);border-right:3px solid var(--accent-blue);cursor:nesw-resize;top:-6px;right:-6px}._pointerBottomRight_1yhyo_98{border-bottom:3px solid var(--accent-blue);border-right:3px solid var(--accent-blue);cursor:nwse-resize;bottom:-6px;right:-6px}._pointerBottomLeft_1yhyo_105{border-bottom:3px solid var(--accent-blue);border-left:3px solid var(--accent-blue);cursor:nesw-resize;bottom:-6px;left:-6px}._mobileBorder_1yhyo_112{box-sizing:border-box;border:2px solid var(--accent-blue);position:absolute;inset:0}._mobilePointer_1yhyo_118{background-color:var(--overlay-bg-white);border:3px solid var(--accent-blue);box-sizing:border-box;border-radius:50%;width:32px;height:32px;position:absolute;bottom:-16px;right:-16px}._info_1yhyo_129{height:16px;font-family:var(--font-mono);color:#000;background-color:var(--color-white-fade);box-sizing:border-box;align-items:center;padding:0 6px;font-size:12px;display:flex;position:absolute}._info_1yhyo_129 b{font-weight:600;transform:translateY(1px)}._infoX_1yhyo_146{border-left:solid 2px var(--accent-blue);top:-12px;left:16px}._infoY_1yhyo_151{transform-origin:100%;border-right:solid 2px var(--accent-blue);top:8px;right:calc(100% + 4px);transform:rotate(-90deg)}._infoW_1yhyo_158{border-right:solid 2px var(--accent-blue);bottom:-12px;right:16px}._infoH_1yhyo_163{transform-origin:0%;border-left:solid 2px var(--accent-blue);bottom:8px;left:calc(100% + 4px);transform:rotate(-90deg)}._group_1yhyo_170{flex-shrink:0;width:max-content;display:flex}._group_1yhyo_170 button{color:var(--foreground);border-radius:0}._group_1yhyo_170 button._active_1yhyo_179{color:var(--accent-blue);background:var(--muted)}._group_1yhyo_170 button:not(:first-child){margin-left:-1px}._group_1yhyo_170 button:first-child{border-top-left-radius:4px;border-bottom-left-radius:4px}._group_1yhyo_170 button:last-child{border-top-right-radius:4px;border-bottom-right-radius:4px}._preset_1rbuc_1{background-color:var(--background);border-radius:4px;gap:4px;padding:4px;display:flex;position:absolute;bottom:24px;left:50%;transform:translate(-50%);box-shadow:0 2px 8px #0000001a}._select_1rbuc_14{width:210px}._flip_17ic5_1{background-color:var(--background);border-radius:4px;gap:4px;padding:4px;display:flex;position:absolute;bottom:24px;left:50%;transform:translate(-50%);box-shadow:0 2px 8px #0000001a}._btnH_17ic5_14{border-top-right-radius:0;border-bottom-right-radius:0;width:36px}._btnV_17ic5_20{border-top-left-radius:0;border-bottom-left-radius:0;width:36px;margin-left:-1px}._rotate_gkt07_1{background-color:var(--background);border-radius:4px;gap:4px;padding:4px;display:flex;position:absolute;bottom:24px;left:50%;transform:translate(-50%);box-shadow:0 2px 8px #0000001a}._btnH_gkt07_14{border-top-right-radius:0;border-bottom-right-radius:0;width:36px}._btnV_gkt07_20{border-top-left-radius:0;border-bottom-left-radius:0;width:36px;margin-left:-1px}._frame_15mog_1{box-sizing:border-box;grid-area:frame;width:100%;height:100%;margin:0 auto;position:relative;overflow:hidden}/*$vite$:1*/`)),document.head.appendChild(e)}}catch(e){console.error(`vite-plugin-css-injected-by-js`,e)}})();
|
|
2
|
-
import {
|
|
1
|
+
(function(){try{if(typeof document<`u`){var e=document.createElement(`style`);e.appendChild(document.createTextNode(`._button_1vpzl_1{cursor:pointer;white-space:nowrap;-webkit-user-select:none;user-select:none;box-sizing:border-box;background-color:#0000;border:1px solid #0000;border-radius:4px;justify-content:center;align-items:center;gap:8px;height:32px;padding:0 8px;font-family:inherit;font-size:14px;font-weight:500;transition:background-color .2s,border-color .2s,opacity .2s;display:inline-flex}._button_1vpzl_1:disabled{pointer-events:none;opacity:.5}._button_1vpzl_1 svg{flex-shrink:0;width:16px;height:16px}._default_1vpzl_35{background-color:var(--primary);color:var(--primary-foreground)}._default_1vpzl_35:hover{opacity:.9}._outline_1vpzl_44{border-color:var(--border);background-color:var(--background);color:var(--foreground)}._outline_1vpzl_44:hover{background-color:var(--secondary)}._ghost_1vpzl_54{color:var(--foreground);padding:0 8px}._ghost_1vpzl_54:hover{background-color:var(--secondary)}._rect_1vpzl_63{width:32px;height:32px}._separator_gp8ff_1{background-color:var(--border);box-sizing:border-box;border:none;flex-shrink:0;display:block}._separator_gp8ff_1[data-orientation=horizontal]{width:100%;height:1px}._separator_gp8ff_1[data-orientation=vertical]{align-self:stretch;width:1px;height:100%;margin:0}._wrapper_1aw0m_1{box-sizing:border-box;width:100%;position:relative}._trigger_1aw0m_6{width:100%;height:32px;color:var(--foreground);background-color:var(--background);border:1px solid var(--border);cursor:pointer;box-sizing:border-box;-webkit-user-select:none;user-select:none;border-radius:4px;outline:none;justify-content:space-between;align-items:center;padding:0 8px 0 10px;font-family:inherit;font-size:14px;transition:border-color .2s;display:flex}._trigger_1aw0m_6:hover,._trigger_1aw0m_6:focus{border-color:var(--muted-foreground)}._triggerArrow_1aw0m_31{width:16px;height:16px;color:var(--muted-foreground);transition:transform .2s}._wrapper_1aw0m_1[data-state=open] ._triggerArrow_1aw0m_31{transform:rotate(180deg)}._content_1aw0m_40{background-color:var(--background);border:1px solid var(--border);z-index:50;box-sizing:border-box;border-radius:4px;width:100%;max-height:282px;padding:4px;position:absolute;top:calc(100% + 4px);left:0;overflow-y:auto;box-shadow:0 10px 15px -3px #0000001a,0 4px 6px -2px #0000000d}._content_1aw0m_40::-webkit-scrollbar{width:4px}._content_1aw0m_40::-webkit-scrollbar-track{background:0 0}._content_1aw0m_40::-webkit-scrollbar-thumb{background-color:var(--border);border-radius:10px}._wrapper_1aw0m_1[data-state=closed] ._content_1aw0m_40{display:none}._groupLabel_1aw0m_74{color:var(--muted-foreground);-webkit-user-select:none;user-select:none;padding:8px 10px;font-size:12px;font-weight:500}._item_1aw0m_81{width:100%;color:var(--foreground);cursor:pointer;-webkit-user-select:none;user-select:none;box-sizing:border-box;background:0 0;border-radius:4px;justify-content:space-between;align-items:center;padding:4px 10px;display:flex}._item_1aw0m_81:hover{background-color:var(--secondary)}._itemLeft_1aw0m_98{font-size:14px;font-weight:400}._itemAddon_1aw0m_102{align-items:center;gap:8px;display:flex}._itemAddon_1aw0m_102 span{color:var(--muted-foreground);font-size:12px}._itemAddon_1aw0m_102 svg{font-size:14px}._itemAddon_1aw0m_102 b{flex-shrink:0;width:16px;height:16px}._itemRightContainer_1aw0m_122{align-items:center;gap:8px;display:flex}._itemRight_1aw0m_122{color:var(--muted-foreground);font-size:14px}._itemCheck_1aw0m_131{width:16px;height:16px;color:var(--foreground);flex-shrink:0}:host{height:100%;display:block}:host *{box-sizing:border-box}._root_c6gk7_8{width:100%;height:100%;font-size:16px;font-family:var(--font-sans);--font-sans:system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Tahoma, Helvetica, Arial, sans-serif;--font-mono:"Courier New", Courier, monospace;--color-white:#fff;--color-white-fade:color-mix(in srgb, var(--color-white) 40%, transparent);--color-black:#000;--color-red:oklch(63.7% .237 25.331);--color-green:oklch(76.8% .188 151.716);--background:oklch(100% 0 0);--foreground:oklch(14.5% 0 0);--primary:oklch(20.5% 0 0);--primary-foreground:oklch(98.5% 0 0);--secondary:oklch(97% 0 0);--secondary-foreground:oklch(20.5% 0 0);--muted:oklch(97% 0 0);--muted-foreground:oklch(75.6% 0 0);--accent:oklch(97% 0 0);--accent-foreground:oklch(20.5% 0 0);--accent-blue:oklch(60.9% .221 251.687);--accent-blue-light:oklch(96% .02 250);--accent-blue-fade:color-mix(in srgb, var(--accent-blue) 60%, transparent);--border:oklch(92.2% 0 0);--input:oklch(92.2% 0 0);--ring:oklch(70.8% 0 0);--overlay-bg:color-mix(in srgb, var(--color-black) 50%, transparent);--overlay-bg-white:color-mix(in srgb, var(--color-white) 80%, transparent);position:relative}._root_c6gk7_8[data-theme=dark]{--background:oklch(24.5% 0 0);--foreground:oklch(78.5% 0 0);--primary:oklch(92.2% 0 0);--primary-foreground:oklch(20.5% 0 0);--secondary:oklch(26.9% 0 0);--secondary-foreground:oklch(98.5% 0 0);--muted:oklch(24.5% 0 0);--muted-foreground:oklch(50% 0 0);--accent:oklch(26.9% 0 0);--accent-foreground:oklch(98.5% 0 0);--accent-blue-light:oklch(25% .06 250);--border:oklch(100% 0 0/.1);--input:oklch(100% 0 0/.15);--ring:oklch(55.6% 0 0);--overlay-bg:color-mix(in srgb, var(--color-black) 75%, transparent)}._root_c6gk7_8 h1,._root_c6gk7_8 h2,._root_c6gk7_8 h3,._root_c6gk7_8 h4,._root_c6gk7_8 h5,._root_c6gk7_8 h6{color:var(--foreground);margin:0;font-weight:600}._textRed_c6gk7_73{color:var(--color-red)}._bgRed_c6gk7_76{background-color:var(--color-red)}._bgGreen_c6gk7_79{background-color:var(--color-green)}._textGreen_c6gk7_82{color:var(--color-green)}._mask_c6gk7_85{background-color:var(--overlay-bg)}._semibold_c6gk7_88{letter-spacing:.4px;font-weight:600}._bold_c6gk7_92{letter-spacing:.4px;font-weight:700}._system_c6gk7_96{color:var(--muted-foreground);background-color:var(--background);justify-content:center;align-items:center;display:flex;position:absolute;inset:0}._wrapper_c6gk7_106{width:100%;height:100%;min-height:480px;position:relative;overflow:hidden}._grid_c6gk7_113{grid-template:"header header"48px"sidebar frame"minmax(0,1fr)"sidebar infobar"32px/48px 1fr;height:100%;display:grid;position:relative}._grid_c6gk7_113._mobile_c6gk7_124{grid-template-columns:0 1fr}._gridNoInfobar_c6gk7_128{grid-template:"header header"48px"sidebar frame"1fr/48px 1fr;height:100%;display:grid;position:relative}._gridNoInfobar_c6gk7_128._mobile_c6gk7_124{grid-template-columns:0 1fr}._input_kyavx_1{width:100%;height:32px;color:var(--foreground);background-color:var(--background);border:1px solid var(--input);box-sizing:border-box;border-radius:4px;outline:none;padding:0 8px;font-family:inherit;font-size:14px;line-height:normal;transition:border-color .2s,box-shadow .2s;display:block}._input_kyavx_1:hover:not(:disabled):not(:focus){border-color:var(--muted-foreground)}._input_kyavx_1:focus{box-shadow:0 0 0 1px var(--ring)}._input_kyavx_1:disabled{cursor:not-allowed;opacity:.5;background-color:var(--secondary)}._input_kyavx_1::placeholder{color:var(--muted-foreground);opacity:1}._numberClean_kyavx_39::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}._numberClean_kyavx_39::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}._numberClean_kyavx_39[type=number]{-moz-appearance:textfield}._container_14vsv_1{position:relative}._legend_14vsv_4{color:var(--muted-foreground);background:var(--background);margin-left:8px;padding:0 4px;font-size:12px;position:absolute;top:-9px}._suffix_14vsv_13{color:var(--muted-foreground);pointer-events:none;-webkit-user-select:none;user-select:none;font-size:14px;position:absolute;bottom:2px;right:8px}._group_1e7jm_1{margin-left:4px;display:flex}._save_1e7jm_6{width:36px;color:var(--color-green);border-top-right-radius:0;border-bottom-right-radius:0}._close_1e7jm_13{width:36px;color:var(--color-red);border-top-left-radius:0;border-bottom-left-radius:0;margin-left:-1px}._tooltip_gohf2_1{position:relative}._container_gohf2_5{gap:0;display:flex}._container_gohf2_5[data-orientation=vertical]{flex-direction:column}._container_gohf2_5 [data-tooltip]{pointer-events:auto}._popup_gohf2_18{top:var(--tooltip-y,0px);left:var(--tooltip-x,0px);background-color:var(--foreground);color:var(--background);z-index:999;pointer-events:none;opacity:var(--tooltip-opacity,0);width:var(--tooltip-w,auto);height:var(--tooltip-h,auto);transition:opacity var(--tooltip-fade,.2s);border-radius:4px;font-size:14px;position:absolute;transform:translate(-50%,-100%);box-shadow:0 2px 8px #0000001a}._popup_gohf2_18:before{content:"";background-color:inherit;width:10px;height:10px;position:absolute;bottom:-3px;left:50%;transform:translate(-50%)rotate(45deg)}._popup_gohf2_18[data-orientation=vertical]{transform:translateY(-50%)}._popup_gohf2_18[data-orientation=vertical]:before{content:"";background-color:inherit;width:10px;height:10px;position:absolute;top:50%;left:-3px;transform:translateY(-50%)rotate(45deg)}._popup_gohf2_18._animated_gohf2_62{transition:left var(--tooltip-slide,.4s), top var(--tooltip-slide,.4s), width var(--tooltip-slide,.4s), height var(--tooltip-slide,.4s), opacity var(--tooltip-fade,.2s)}._mask_gohf2_71{border-radius:inherit;width:100%;height:100%;overflow:hidden}._track_gohf2_78{width:max-content;height:max-content;transform:translateX(calc(-1 * var(--tooltip-offset,0px)));display:flex}._track_gohf2_78[data-orientation=vertical]{transform:translateY(calc(-1 * var(--tooltip-offset,0px)));flex-direction:column}._animated_gohf2_62 ._track_gohf2_78{transition:transform var(--tooltip-slide,.4s)}._title_gohf2_94{min-width:var(--tooltip-item-w,auto);max-width:var(--tooltip-item-w,none);min-height:var(--tooltip-item-h,32px);max-height:var(--tooltip-item-h,none);white-space:nowrap;box-sizing:border-box;flex:none;justify-content:center;align-items:center;padding:0 10px;display:flex}._header_1yueu_1{box-sizing:border-box;background-color:var(--background);border-bottom:1px solid var(--border);grid-area:header;justify-content:space-between;align-items:center;height:48px;padding:0 8px;display:flex}._left_1yueu_12{align-items:center;gap:0;display:flex}._sidebarToggle_1yueu_17{border-right:solid 1px var(--border);cursor:pointer;justify-content:center;align-items:center;width:48px;height:48px;transition:all .2s;display:none;position:relative;left:-8px}._sidebarToggle_1yueu_17._mobile_1yueu_29{display:flex}._sidebarIcon_1yueu_33{stroke-width:1.6px;width:18px;height:18px}._tools_1yueu_38{gap:8px;display:flex}._history_1yueu_42{align-items:center;gap:6px;display:flex}._historyText_1yueu_47{color:var(--muted-foreground);font-size:14px;font-family:var(--font-mono)}._sidebar_1j9gh_1{background:var(--background);border-right:1px solid var(--border);z-index:10;grid-area:sidebar;width:48px;position:relative}._sidebar_1j9gh_1._mobile_1j9gh_9{transition:transform .2s ease-out;transform:translate(-110%);box-shadow:0 2px 8px #0000001a}._sidebar_1j9gh_1._mobile_1j9gh_9._open_1j9gh_14{transform:translate(0%)}._wrapper_1j9gh_19{flex-direction:column;display:flex}._item_1j9gh_23{cursor:pointer;justify-content:center;align-items:center;height:48px;transition:all .2s;display:flex;position:relative}._item_1j9gh_23 svg{width:16px;height:16px}._item_1j9gh_23:hover{background-color:var(--accent)}._item_1j9gh_23._selected_1j9gh_41{color:var(--accent-blue);background-color:var(--accent)}._item_1j9gh_23._selected_1j9gh_41:before{content:"";background-color:var(--accent-blue);width:2px;position:absolute;top:0;bottom:0;left:0}._infobar_ofe91_1{background:var(--muted);font-family:var(--font-mono);grid-area:infobar;justify-content:space-between;align-items:center;padding:0 16px;font-size:14px;display:flex}._resize_s127g_1{background-color:var(--background);border-radius:4px;align-items:center;gap:6px;padding:15px 8px 8px;display:flex;position:absolute;bottom:24px;left:50%;overflow:hidden;transform:translate(-50%);box-shadow:0 2px 8px #0000001a}._toolsLock_s127g_15{width:12px;height:12px;color:var(--muted-foreground)}._indicatorWrapper_s127g_20{justify-content:center;width:100%;height:1px;display:flex;position:absolute;top:0;left:0}._indicator_s127g_20{background:var(--accent-blue);opacity:.6;border-radius:2px;width:30%;height:100%;transition:width .2s}._preview_dvanl_1{box-sizing:border-box;max-width:calc(100% - 32px);max-height:calc(100% - 32px);margin:auto;transition:all .2s linear;position:absolute;inset:0;overflow:hidden}._rotate_dvanl_12{box-sizing:border-box;width:100%;height:100%;transition:all .2s linear;position:absolute;top:50%;left:50%;overflow:hidden;transform:translate(-50%,-50%)}._flip_dvanl_24{box-sizing:border-box;transition:all .2s linear;position:absolute;inset:0;overflow:hidden}._image_dvanl_32{max-width:none;max-height:none;transition:all .2s linear;display:block;position:absolute}._wrapper_1yhyo_1{box-sizing:border-box;max-width:calc(100% - 32px);max-height:calc(100% - 32px);margin:auto;position:absolute;inset:0}._box_1yhyo_9{cursor:move;box-sizing:border-box;-webkit-user-select:none;user-select:none;touch-action:none;border:1px solid var(--color-white-fade);position:absolute}._tools_1yhyo_18{background-color:var(--background);box-sizing:border-box;border:1px solid var(--border);border-radius:4px;align-items:center;gap:6px;padding:4px;display:flex;position:absolute;bottom:24px;left:50%;transform:translate(-50%);box-shadow:0 4px 6px -1px #0000001a,0 2px 4px -1px #0000000f}._toolsInfo_1yhyo_35{-webkit-user-select:none;user-select:none;min-width:54px;margin-top:-2px;display:inline-block}._toolsInfoLabel_1yhyo_42{color:var(--muted-foreground);font-size:12px;line-height:12px}._toolsInfoValue_1yhyo_47{color:var(--foreground);font-size:14px;line-height:14px}._linesBox_1yhyo_52{pointer-events:none;position:absolute;inset:1px}._line_1yhyo_52{border:1px dashed var(--color-white);opacity:.5;position:absolute}._lineV_1yhyo_62{border-top:0;border-bottom:0;width:33%;height:100%;top:0;left:33%}._lineH_1yhyo_70{border-left:0;border-right:0;width:100%;height:33%;top:33%;left:0}._pointer_1yhyo_78{box-sizing:border-box;width:14px;height:14px;position:absolute}._pointerTopLeft_1yhyo_84{border-top:3px solid var(--accent-blue);border-left:3px solid var(--accent-blue);cursor:nwse-resize;top:-6px;left:-6px}._pointerTopRight_1yhyo_91{border-top:3px solid var(--accent-blue);border-right:3px solid var(--accent-blue);cursor:nesw-resize;top:-6px;right:-6px}._pointerBottomRight_1yhyo_98{border-bottom:3px solid var(--accent-blue);border-right:3px solid var(--accent-blue);cursor:nwse-resize;bottom:-6px;right:-6px}._pointerBottomLeft_1yhyo_105{border-bottom:3px solid var(--accent-blue);border-left:3px solid var(--accent-blue);cursor:nesw-resize;bottom:-6px;left:-6px}._mobileBorder_1yhyo_112{box-sizing:border-box;border:2px solid var(--accent-blue);position:absolute;inset:0}._mobilePointer_1yhyo_118{background-color:var(--overlay-bg-white);border:3px solid var(--accent-blue);box-sizing:border-box;border-radius:50%;width:32px;height:32px;position:absolute;bottom:-16px;right:-16px}._info_1yhyo_129{height:16px;font-family:var(--font-mono);color:#000;background-color:var(--color-white-fade);box-sizing:border-box;align-items:center;padding:0 6px;font-size:12px;display:flex;position:absolute}._info_1yhyo_129 b{font-weight:600;transform:translateY(1px)}._infoX_1yhyo_146{border-left:solid 2px var(--accent-blue);top:-12px;left:16px}._infoY_1yhyo_151{transform-origin:100%;border-right:solid 2px var(--accent-blue);top:8px;right:calc(100% + 4px);transform:rotate(-90deg)}._infoW_1yhyo_158{border-right:solid 2px var(--accent-blue);bottom:-12px;right:16px}._infoH_1yhyo_163{transform-origin:0%;border-left:solid 2px var(--accent-blue);bottom:8px;left:calc(100% + 4px);transform:rotate(-90deg)}._group_1yhyo_170{flex-shrink:0;width:max-content;display:flex}._group_1yhyo_170 button{color:var(--foreground);border-radius:0}._group_1yhyo_170 button._active_1yhyo_179{color:var(--accent-blue);background:var(--muted)}._group_1yhyo_170 button:not(:first-child){margin-left:-1px}._group_1yhyo_170 button:first-child{border-top-left-radius:4px;border-bottom-left-radius:4px}._group_1yhyo_170 button:last-child{border-top-right-radius:4px;border-bottom-right-radius:4px}._preset_1rbuc_1{background-color:var(--background);border-radius:4px;gap:4px;padding:4px;display:flex;position:absolute;bottom:24px;left:50%;transform:translate(-50%);box-shadow:0 2px 8px #0000001a}._select_1rbuc_14{width:210px}._flip_17ic5_1{background-color:var(--background);border-radius:4px;gap:4px;padding:4px;display:flex;position:absolute;bottom:24px;left:50%;transform:translate(-50%);box-shadow:0 2px 8px #0000001a}._btnH_17ic5_14{border-top-right-radius:0;border-bottom-right-radius:0;width:36px}._btnV_17ic5_20{border-top-left-radius:0;border-bottom-left-radius:0;width:36px;margin-left:-1px}._rotate_gkt07_1{background-color:var(--background);border-radius:4px;gap:4px;padding:4px;display:flex;position:absolute;bottom:24px;left:50%;transform:translate(-50%);box-shadow:0 2px 8px #0000001a}._btnH_gkt07_14{border-top-right-radius:0;border-bottom-right-radius:0;width:36px}._btnV_gkt07_20{border-top-left-radius:0;border-bottom-left-radius:0;width:36px;margin-left:-1px}._frame_15mog_1{box-sizing:border-box;grid-area:frame;width:100%;height:100%;margin:0 auto;position:relative;overflow:hidden}/*$vite$:1*/`)),document.head.appendChild(e)}}catch(e){console.error(`vite-plugin-css-injected-by-js`,e)}})();
|
|
2
|
+
import { Children as e, createContext as t, forwardRef as n, isValidElement as r, useCallback as i, useContext as a, useEffect as o, useLayoutEffect as s, useMemo as c, useRef as l, useState as u } from "react";
|
|
3
3
|
//#region \0rolldown/runtime.js
|
|
4
|
-
var
|
|
4
|
+
var d = (e, t) => () => (t || (e((t = { exports: {} }).exports, t), e = null), t.exports), f = /* @__PURE__ */ ((e) => typeof require < "u" ? require : typeof Proxy < "u" ? new Proxy(e, { get: (e, t) => (typeof require < "u" ? require : e)[t] }) : e)(function(e) {
|
|
5
5
|
if (typeof require < "u") return require.apply(this, arguments);
|
|
6
6
|
throw Error("Calling `require` for \"" + e + "\" in an environment that doesn't expose the `require` function. See https://rolldown.rs/in-depth/bundling-cjs#require-external-modules for more details.");
|
|
7
|
-
}),
|
|
7
|
+
}), p = {
|
|
8
8
|
sm: 480,
|
|
9
9
|
md: 768,
|
|
10
10
|
lg: 1024,
|
|
11
11
|
xl: 1280
|
|
12
|
-
},
|
|
12
|
+
}, m = {
|
|
13
13
|
INITIAL: "initial",
|
|
14
14
|
RESIZE: "resize",
|
|
15
15
|
CROP: "crop",
|
|
@@ -17,7 +17,7 @@ var l = (e, t) => () => (t || (e((t = { exports: {} }).exports, t), e = null), t
|
|
|
17
17
|
FLIP: "flip",
|
|
18
18
|
ROTATE: "rotate",
|
|
19
19
|
FILTERS: "filters"
|
|
20
|
-
},
|
|
20
|
+
}, h = {
|
|
21
21
|
tools: [
|
|
22
22
|
"resize",
|
|
23
23
|
"crop",
|
|
@@ -30,14 +30,14 @@ var l = (e, t) => () => (t || (e((t = { exports: {} }).exports, t), e = null), t
|
|
|
30
30
|
quality: .85,
|
|
31
31
|
saveAsWEBP: !1,
|
|
32
32
|
exportAs: "blob"
|
|
33
|
-
},
|
|
33
|
+
}, g = (e, t, n, r, i, a, o) => ({
|
|
34
34
|
history: {
|
|
35
35
|
pointer: 0,
|
|
36
36
|
items: [{
|
|
37
37
|
width: t,
|
|
38
38
|
height: n,
|
|
39
39
|
action: {
|
|
40
|
-
name:
|
|
40
|
+
name: m.INITIAL,
|
|
41
41
|
args: null
|
|
42
42
|
}
|
|
43
43
|
}]
|
|
@@ -49,7 +49,7 @@ var l = (e, t) => () => (t || (e((t = { exports: {} }).exports, t), e = null), t
|
|
|
49
49
|
sidebar: !1,
|
|
50
50
|
settings: o,
|
|
51
51
|
isAlpha: a
|
|
52
|
-
}),
|
|
52
|
+
}), _ = t(void 0), v = /* @__PURE__ */ d(((e) => {
|
|
53
53
|
var t = Symbol.for("react.transitional.element"), n = Symbol.for("react.fragment");
|
|
54
54
|
function r(e, n, r) {
|
|
55
55
|
var i = null;
|
|
@@ -64,19 +64,19 @@ var l = (e, t) => () => (t || (e((t = { exports: {} }).exports, t), e = null), t
|
|
|
64
64
|
};
|
|
65
65
|
}
|
|
66
66
|
e.Fragment = n, e.jsx = r, e.jsxs = r;
|
|
67
|
-
})),
|
|
67
|
+
})), y = /* @__PURE__ */ d(((e) => {
|
|
68
68
|
process.env.NODE_ENV !== "production" && (function() {
|
|
69
69
|
function t(e) {
|
|
70
70
|
if (e == null) return null;
|
|
71
|
-
if (typeof e == "function") return e.$$typeof ===
|
|
71
|
+
if (typeof e == "function") return e.$$typeof === k ? null : e.displayName || e.name || null;
|
|
72
72
|
if (typeof e == "string") return e;
|
|
73
73
|
switch (e) {
|
|
74
74
|
case v: return "Fragment";
|
|
75
75
|
case b: return "Profiler";
|
|
76
76
|
case y: return "StrictMode";
|
|
77
|
-
case
|
|
78
|
-
case
|
|
79
|
-
case
|
|
77
|
+
case w: return "Suspense";
|
|
78
|
+
case T: return "SuspenseList";
|
|
79
|
+
case O: return "Activity";
|
|
80
80
|
}
|
|
81
81
|
if (typeof e == "object") switch (typeof e.tag == "number" && console.error("Received an unexpected object in getComponentNameFromType(). This is likely a bug in React. Please file an issue."), e.$$typeof) {
|
|
82
82
|
case _: return "Portal";
|
|
@@ -85,8 +85,8 @@ var l = (e, t) => () => (t || (e((t = { exports: {} }).exports, t), e = null), t
|
|
|
85
85
|
case C:
|
|
86
86
|
var n = e.render;
|
|
87
87
|
return e = e.displayName, e ||= (e = n.displayName || n.name || "", e === "" ? "ForwardRef" : "ForwardRef(" + e + ")"), e;
|
|
88
|
-
case
|
|
89
|
-
case
|
|
88
|
+
case E: return n = e.displayName || null, n === null ? t(e.type) || "Memo" : n;
|
|
89
|
+
case D:
|
|
90
90
|
n = e._payload, e = e._init;
|
|
91
91
|
try {
|
|
92
92
|
return t(e(n));
|
|
@@ -112,7 +112,7 @@ var l = (e, t) => () => (t || (e((t = { exports: {} }).exports, t), e = null), t
|
|
|
112
112
|
}
|
|
113
113
|
function i(e) {
|
|
114
114
|
if (e === v) return "<>";
|
|
115
|
-
if (typeof e == "object" && e && e.$$typeof ===
|
|
115
|
+
if (typeof e == "object" && e && e.$$typeof === D) return "<...>";
|
|
116
116
|
try {
|
|
117
117
|
var n = t(e);
|
|
118
118
|
return n ? "<" + n + ">" : "<...>";
|
|
@@ -121,14 +121,14 @@ var l = (e, t) => () => (t || (e((t = { exports: {} }).exports, t), e = null), t
|
|
|
121
121
|
}
|
|
122
122
|
}
|
|
123
123
|
function a() {
|
|
124
|
-
var e =
|
|
124
|
+
var e = A.A;
|
|
125
125
|
return e === null ? null : e.getOwner();
|
|
126
126
|
}
|
|
127
127
|
function o() {
|
|
128
128
|
return Error("react-stack-top-frame");
|
|
129
129
|
}
|
|
130
130
|
function s(e) {
|
|
131
|
-
if (
|
|
131
|
+
if (ee.call(e, "key")) {
|
|
132
132
|
var t = Object.getOwnPropertyDescriptor(e, "key").get;
|
|
133
133
|
if (t && t.isReactWarning) return !1;
|
|
134
134
|
}
|
|
@@ -136,7 +136,7 @@ var l = (e, t) => () => (t || (e((t = { exports: {} }).exports, t), e = null), t
|
|
|
136
136
|
}
|
|
137
137
|
function c(e, t) {
|
|
138
138
|
function n() {
|
|
139
|
-
|
|
139
|
+
M || (M = !0, console.error("%s: `key` is not a prop. Trying to access it will result in `undefined` being returned. If you need to access the same value within the child component, you should pass it as a different prop. (https://react.dev/link/special-props)", t));
|
|
140
140
|
}
|
|
141
141
|
n.isReactWarning = !0, Object.defineProperty(e, "key", {
|
|
142
142
|
get: n,
|
|
@@ -145,9 +145,9 @@ var l = (e, t) => () => (t || (e((t = { exports: {} }).exports, t), e = null), t
|
|
|
145
145
|
}
|
|
146
146
|
function l() {
|
|
147
147
|
var e = t(this.type);
|
|
148
|
-
return
|
|
148
|
+
return ne[e] || (ne[e] = !0, console.error("Accessing element.ref was removed in React 19. ref is now a regular prop. It will be removed from the JSX Element type in a future release.")), e = this.props.ref, e === void 0 ? null : e;
|
|
149
149
|
}
|
|
150
|
-
function
|
|
150
|
+
function u(e, t, n, r, i, a) {
|
|
151
151
|
var o = n.ref;
|
|
152
152
|
return e = {
|
|
153
153
|
$$typeof: g,
|
|
@@ -183,56 +183,56 @@ var l = (e, t) => () => (t || (e((t = { exports: {} }).exports, t), e = null), t
|
|
|
183
183
|
value: a
|
|
184
184
|
}), Object.freeze && (Object.freeze(e.props), Object.freeze(e)), e;
|
|
185
185
|
}
|
|
186
|
-
function
|
|
186
|
+
function d(e, n, i, o, l, d) {
|
|
187
187
|
var f = n.children;
|
|
188
|
-
if (f !== void 0) if (o) if (
|
|
188
|
+
if (f !== void 0) if (o) if (te(f)) {
|
|
189
189
|
for (o = 0; o < f.length; o++) p(f[o]);
|
|
190
190
|
Object.freeze && Object.freeze(f);
|
|
191
191
|
} else console.error("React.jsx: Static children should always be an array. You are likely explicitly calling React.jsxs or React.jsxDEV. Use the Babel transform instead.");
|
|
192
192
|
else p(f);
|
|
193
|
-
if (
|
|
193
|
+
if (ee.call(n, "key")) {
|
|
194
194
|
f = t(e);
|
|
195
195
|
var m = Object.keys(n).filter(function(e) {
|
|
196
196
|
return e !== "key";
|
|
197
197
|
});
|
|
198
|
-
o = 0 < m.length ? "{key: someKey, " + m.join(": ..., ") + ": ...}" : "{key: someKey}",
|
|
198
|
+
o = 0 < m.length ? "{key: someKey, " + m.join(": ..., ") + ": ...}" : "{key: someKey}", ie[f + o] || (m = 0 < m.length ? "{" + m.join(": ..., ") + ": ...}" : "{}", console.error("A props object containing a \"key\" prop is being spread into JSX:\n let props = %s;\n <%s {...props} />\nReact keys must be passed directly to JSX without using spread:\n let props = %s;\n <%s key={someKey} {...props} />", o, f, m, f), ie[f + o] = !0);
|
|
199
199
|
}
|
|
200
200
|
if (f = null, i !== void 0 && (r(i), f = "" + i), s(n) && (r(n.key), f = "" + n.key), "key" in n) for (var h in i = {}, n) h !== "key" && (i[h] = n[h]);
|
|
201
201
|
else i = n;
|
|
202
|
-
return f && c(i, typeof e == "function" ? e.displayName || e.name || "Unknown" : e),
|
|
202
|
+
return f && c(i, typeof e == "function" ? e.displayName || e.name || "Unknown" : e), u(e, f, i, a(), l, d);
|
|
203
203
|
}
|
|
204
204
|
function p(e) {
|
|
205
|
-
m(e) ? e._store && (e._store.validated = 1) : typeof e == "object" && e && e.$$typeof ===
|
|
205
|
+
m(e) ? e._store && (e._store.validated = 1) : typeof e == "object" && e && e.$$typeof === D && (e._payload.status === "fulfilled" ? m(e._payload.value) && e._payload.value._store && (e._payload.value._store.validated = 1) : e._store && (e._store.validated = 1));
|
|
206
206
|
}
|
|
207
207
|
function m(e) {
|
|
208
208
|
return typeof e == "object" && !!e && e.$$typeof === g;
|
|
209
209
|
}
|
|
210
|
-
var h =
|
|
210
|
+
var h = f("react"), g = Symbol.for("react.transitional.element"), _ = Symbol.for("react.portal"), v = Symbol.for("react.fragment"), y = Symbol.for("react.strict_mode"), b = Symbol.for("react.profiler"), x = Symbol.for("react.consumer"), S = Symbol.for("react.context"), C = Symbol.for("react.forward_ref"), w = Symbol.for("react.suspense"), T = Symbol.for("react.suspense_list"), E = Symbol.for("react.memo"), D = Symbol.for("react.lazy"), O = Symbol.for("react.activity"), k = Symbol.for("react.client.reference"), A = h.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE, ee = Object.prototype.hasOwnProperty, te = Array.isArray, j = console.createTask ? console.createTask : function() {
|
|
211
211
|
return null;
|
|
212
212
|
};
|
|
213
213
|
h = { react_stack_bottom_frame: function(e) {
|
|
214
214
|
return e();
|
|
215
215
|
} };
|
|
216
|
-
var
|
|
216
|
+
var M, ne = {}, re = h.react_stack_bottom_frame.bind(h, o)(), N = j(i(o)), ie = {};
|
|
217
217
|
e.Fragment = v, e.jsx = function(e, t, n) {
|
|
218
|
-
var r = 1e4 >
|
|
219
|
-
return
|
|
218
|
+
var r = 1e4 > A.recentlyCreatedOwnerStacks++;
|
|
219
|
+
return d(e, t, n, !1, r ? Error("react-stack-top-frame") : re, r ? j(i(e)) : N);
|
|
220
220
|
}, e.jsxs = function(e, t, n) {
|
|
221
|
-
var r = 1e4 >
|
|
222
|
-
return
|
|
221
|
+
var r = 1e4 > A.recentlyCreatedOwnerStacks++;
|
|
222
|
+
return d(e, t, n, !0, r ? Error("react-stack-top-frame") : re, r ? j(i(e)) : N);
|
|
223
223
|
};
|
|
224
224
|
})();
|
|
225
|
-
})),
|
|
226
|
-
process.env.NODE_ENV === "production" ? t.exports =
|
|
227
|
-
})))(),
|
|
228
|
-
let [
|
|
229
|
-
|
|
230
|
-
|
|
225
|
+
})), b = (/* @__PURE__ */ d(((e, t) => {
|
|
226
|
+
process.env.NODE_ENV === "production" ? t.exports = v() : t.exports = y();
|
|
227
|
+
})))(), x = ({ children: e, mimeType: t, width: n, height: r, originalBlob: i, previewUrl: a, isAlpha: s, settings: d }) => {
|
|
228
|
+
let [f, p] = u(g(t, n, r, i, a, s, d)), h = l(null);
|
|
229
|
+
o(() => () => {
|
|
230
|
+
h.current &&= (URL.revokeObjectURL(h.current), null);
|
|
231
231
|
}, []);
|
|
232
|
-
let
|
|
232
|
+
let v = (e) => p((t) => ({
|
|
233
233
|
...t,
|
|
234
234
|
currentAction: e
|
|
235
|
-
})),
|
|
235
|
+
})), y = (e) => p((t) => {
|
|
236
236
|
let n = t.history.pointer + 1, r = [...t.history.items.slice(0, n), e];
|
|
237
237
|
return {
|
|
238
238
|
...t,
|
|
@@ -243,77 +243,77 @@ var l = (e, t) => () => (t || (e((t = { exports: {} }).exports, t), e = null), t
|
|
|
243
243
|
}
|
|
244
244
|
};
|
|
245
245
|
}), x = () => {
|
|
246
|
-
let { items: e, pointer: t } =
|
|
246
|
+
let { items: e, pointer: t } = f.history;
|
|
247
247
|
return e.at(t) ?? e.at(0) ?? {
|
|
248
248
|
width: 0,
|
|
249
249
|
height: 0,
|
|
250
250
|
action: {
|
|
251
|
-
name:
|
|
251
|
+
name: m.INITIAL,
|
|
252
252
|
args: null
|
|
253
253
|
}
|
|
254
254
|
};
|
|
255
255
|
}, S = () => {
|
|
256
|
-
let { items: e, pointer: t } =
|
|
256
|
+
let { items: e, pointer: t } = f.history;
|
|
257
257
|
if (e.length === 0 || t < 0) return 0;
|
|
258
|
-
let n = e.slice(0, t + 1).findLast((e) => e.action.name ===
|
|
259
|
-
return n?.action.name ===
|
|
260
|
-
}, C = () =>
|
|
258
|
+
let n = e.slice(0, t + 1).findLast((e) => e.action.name === m.ROTATE);
|
|
259
|
+
return n?.action.name === m.ROTATE ? n.action.args.degrees : 0;
|
|
260
|
+
}, C = () => p((e) => ({
|
|
261
261
|
...e,
|
|
262
262
|
history: {
|
|
263
263
|
items: [e.history.items[0]],
|
|
264
264
|
pointer: 0
|
|
265
265
|
}
|
|
266
|
-
})),
|
|
266
|
+
})), w = () => p((e) => e.history.pointer <= 0 ? e : {
|
|
267
267
|
...e,
|
|
268
268
|
history: {
|
|
269
269
|
...e.history,
|
|
270
270
|
pointer: e.history.pointer - 1
|
|
271
271
|
}
|
|
272
|
-
}),
|
|
272
|
+
}), T = () => p((e) => e.history.pointer >= e.history.items.length - 1 ? e : {
|
|
273
273
|
...e,
|
|
274
274
|
history: {
|
|
275
275
|
...e.history,
|
|
276
276
|
pointer: e.history.pointer + 1
|
|
277
277
|
}
|
|
278
|
-
}),
|
|
278
|
+
}), E = (e) => p((t) => ({
|
|
279
279
|
...t,
|
|
280
280
|
sidebar: e
|
|
281
|
-
})),
|
|
282
|
-
|
|
281
|
+
})), D = c(() => new EventTarget(), []), O = (e) => {
|
|
282
|
+
h.current && URL.revokeObjectURL(h.current), h.current = URL.createObjectURL(e.previewBlob), p(g(e.mimeType, e.width, e.height, e.newBlob, h.current, e.isAlpha, d));
|
|
283
283
|
};
|
|
284
|
-
return /* @__PURE__ */ (0,
|
|
284
|
+
return /* @__PURE__ */ (0, b.jsx)(_, {
|
|
285
285
|
value: {
|
|
286
|
-
...
|
|
287
|
-
setImage:
|
|
288
|
-
setCurrentAction:
|
|
286
|
+
...f,
|
|
287
|
+
setImage: O,
|
|
288
|
+
setCurrentAction: v,
|
|
289
289
|
getLastHistoryItem: x,
|
|
290
290
|
getLastRotation: S,
|
|
291
|
-
addToHistory:
|
|
291
|
+
addToHistory: y,
|
|
292
292
|
resetHistory: C,
|
|
293
|
-
undo:
|
|
294
|
-
redo:
|
|
295
|
-
setSidebar:
|
|
296
|
-
eventBus:
|
|
293
|
+
undo: w,
|
|
294
|
+
redo: T,
|
|
295
|
+
setSidebar: E,
|
|
296
|
+
eventBus: D
|
|
297
297
|
},
|
|
298
298
|
children: e
|
|
299
299
|
});
|
|
300
|
-
},
|
|
301
|
-
function
|
|
300
|
+
}, S = "(function(){let e=async e=>{let{width:t,height:n}=e,r=Math.min(1,1920/Math.max(t,n)),i=Math.round(t*r),a=Math.round(n*r),o=new OffscreenCanvas(i,a),s=o.getContext(`2d`);if(!s)throw Error(`Failed to get 2D context for preview canvas`);return s.drawImage(e,0,0,i,a),o.convertToBlob({type:`image/webp`,quality:.85})};function t(e){let t=new OffscreenCanvas(e.width,e.height),n=t.getContext(`2d`);if(!n)throw Error(`Failed to create 2D context for canvas.`);n.drawImage(e,0,0);try{let e=n.getImageData(0,0,t.width,t.height).data;for(let t=3;t<e.length;t+=4)if(e[t]<255)return!0;return!1}catch(e){throw Error(`Error reading pixels: ${e}`,{cause:e})}}self.onmessage=async n=>{let r=``;try{let i;if(n.data instanceof Blob)i=n.data;else{let e=n.data.trim();!e.startsWith(`http://`)&&!e.startsWith(`https://`)&&!e.startsWith(`blob:`)&&!e.startsWith(`data:`)&&(r=`image/png`,e=`data:${r};base64,${e}`);let t=await fetch(e);if(!t.ok)throw Error(`HTTP error! Status: ${t.status}`);i=await t.blob()}let a=i.type||r||`image/unknown`,o=await createImageBitmap(i),{width:s,height:c}=o,l=await e(o),u=t(o);o.close(),self.postMessage({success:!0,originalBlob:i,previewBlob:l,mimeType:a,width:s,height:c,isAlpha:u})}catch(e){self.postMessage({success:!1,error:e instanceof Error?e.message:`An error occurred during image loader worker execution.`})}}})();", C = typeof self < "u" && self.Blob && new Blob(["(self.URL || self.webkitURL).revokeObjectURL(self.location.href);", S], { type: "text/javascript;charset=utf-8" });
|
|
301
|
+
function w(e) {
|
|
302
302
|
let t;
|
|
303
303
|
try {
|
|
304
|
-
if (t =
|
|
304
|
+
if (t = C && (self.URL || self.webkitURL).createObjectURL(C), !t) throw "";
|
|
305
305
|
let n = new Worker(t, { name: e?.name });
|
|
306
306
|
return n.addEventListener("error", () => {
|
|
307
307
|
(self.URL || self.webkitURL).revokeObjectURL(t);
|
|
308
308
|
}), n;
|
|
309
309
|
} catch {
|
|
310
|
-
return new Worker("data:text/javascript;charset=utf-8," + encodeURIComponent(
|
|
310
|
+
return new Worker("data:text/javascript;charset=utf-8," + encodeURIComponent(S), { name: e?.name });
|
|
311
311
|
}
|
|
312
312
|
}
|
|
313
313
|
//#endregion
|
|
314
314
|
//#region src/shared/components/Pixedi/hooks/useImageLoader.tsx
|
|
315
|
-
var
|
|
316
|
-
let [n, r] =
|
|
315
|
+
var T = ({ src: e, skip: t = !1 }) => {
|
|
316
|
+
let [n, r] = u({
|
|
317
317
|
loading: !t,
|
|
318
318
|
error: "",
|
|
319
319
|
width: 0,
|
|
@@ -322,20 +322,20 @@ var C = ({ src: e, skip: t = !1 }) => {
|
|
|
322
322
|
originalBlob: null,
|
|
323
323
|
previewUrl: "",
|
|
324
324
|
isAlpha: !1
|
|
325
|
-
}),
|
|
326
|
-
return
|
|
325
|
+
}), i = l(null);
|
|
326
|
+
return o(() => {
|
|
327
327
|
if (!e || t) return;
|
|
328
|
-
let n = new
|
|
328
|
+
let n = new w();
|
|
329
329
|
return n.postMessage(e), n.onmessage = (e) => {
|
|
330
330
|
let t = e.data;
|
|
331
|
-
t.success ? (
|
|
331
|
+
t.success ? (i.current && URL.revokeObjectURL(i.current), i.current = URL.createObjectURL(t.previewBlob), r({
|
|
332
332
|
loading: !1,
|
|
333
333
|
error: "",
|
|
334
334
|
mimeType: t.mimeType,
|
|
335
335
|
width: t.width,
|
|
336
336
|
height: t.height,
|
|
337
337
|
originalBlob: t.originalBlob,
|
|
338
|
-
previewUrl:
|
|
338
|
+
previewUrl: i.current,
|
|
339
339
|
isAlpha: t.isAlpha
|
|
340
340
|
})) : r((e) => ({
|
|
341
341
|
...e,
|
|
@@ -343,32 +343,32 @@ var C = ({ src: e, skip: t = !1 }) => {
|
|
|
343
343
|
error: t.error || "Error processing image."
|
|
344
344
|
}));
|
|
345
345
|
}, () => {
|
|
346
|
-
n.terminate(),
|
|
346
|
+
n.terminate(), i.current &&= (URL.revokeObjectURL(i.current), null);
|
|
347
347
|
};
|
|
348
348
|
}, [t, e]), n;
|
|
349
|
-
},
|
|
349
|
+
}, E = () => {
|
|
350
350
|
if (typeof window > "u" || !window.navigator) return null;
|
|
351
351
|
let e = window.navigator.userAgent.toLowerCase();
|
|
352
352
|
return /android/.test(e) ? "android" : /iphone|ipad|ipod/.test(e) ? "ios" : /windows phone/.test(e) ? "windows-phone" : /blackberry|bb10/.test(e) ? "blackberry" : /opera mini/.test(e) ? "opera-mini" : /mobile/.test(e) ? "mobile" : null;
|
|
353
|
-
},
|
|
354
|
-
let [e] =
|
|
353
|
+
}, D = () => {
|
|
354
|
+
let [e] = u(() => E());
|
|
355
355
|
return e;
|
|
356
356
|
};
|
|
357
357
|
//#endregion
|
|
358
358
|
//#region src/shared/components/Pixedi/hooks/useBellow.tsx
|
|
359
|
-
function
|
|
360
|
-
let [n, r] =
|
|
361
|
-
return
|
|
359
|
+
function O(e, t) {
|
|
360
|
+
let [n, r] = u(!0);
|
|
361
|
+
return o(() => {
|
|
362
362
|
if (!t) return;
|
|
363
363
|
let n = new ResizeObserver(([t]) => {
|
|
364
|
-
t && r(t.contentRect.width <
|
|
364
|
+
t && r(t.contentRect.width < p[e]);
|
|
365
365
|
});
|
|
366
366
|
return n.observe(t), () => n.disconnect();
|
|
367
367
|
}, [e, t]), n;
|
|
368
368
|
}
|
|
369
369
|
//#endregion
|
|
370
370
|
//#region src/shared/components/Pixedi/assets/icons.tsx
|
|
371
|
-
var
|
|
371
|
+
var k = {
|
|
372
372
|
xmlns: "http://w3.org",
|
|
373
373
|
width: "24",
|
|
374
374
|
height: "24",
|
|
@@ -378,50 +378,50 @@ var E = {
|
|
|
378
378
|
strokeWidth: "2",
|
|
379
379
|
strokeLinecap: "round",
|
|
380
380
|
strokeLinejoin: "round"
|
|
381
|
-
},
|
|
382
|
-
...
|
|
381
|
+
}, A = (e) => /* @__PURE__ */ (0, b.jsx)("svg", {
|
|
382
|
+
...k,
|
|
383
383
|
...e,
|
|
384
|
-
children: /* @__PURE__ */ (0,
|
|
385
|
-
}),
|
|
386
|
-
...
|
|
384
|
+
children: /* @__PURE__ */ (0, b.jsx)("path", { d: "M20 6 9 17l-5-5" })
|
|
385
|
+
}), ee = (e) => /* @__PURE__ */ (0, b.jsxs)("svg", {
|
|
386
|
+
...k,
|
|
387
387
|
...e,
|
|
388
|
-
children: [/* @__PURE__ */ (0,
|
|
389
|
-
}),
|
|
390
|
-
...
|
|
388
|
+
children: [/* @__PURE__ */ (0, b.jsx)("path", { d: "M18 6 6 18" }), /* @__PURE__ */ (0, b.jsx)("path", { d: "m6 6 12 12" })]
|
|
389
|
+
}), te = (e) => /* @__PURE__ */ (0, b.jsxs)("svg", {
|
|
390
|
+
...k,
|
|
391
391
|
...e,
|
|
392
|
-
children: [/* @__PURE__ */ (0,
|
|
392
|
+
children: [/* @__PURE__ */ (0, b.jsx)("rect", {
|
|
393
393
|
width: "18",
|
|
394
394
|
height: "11",
|
|
395
395
|
x: "3",
|
|
396
396
|
y: "11",
|
|
397
397
|
rx: "2",
|
|
398
398
|
ry: "2"
|
|
399
|
-
}), /* @__PURE__ */ (0,
|
|
400
|
-
}),
|
|
401
|
-
...
|
|
399
|
+
}), /* @__PURE__ */ (0, b.jsx)("path", { d: "M7 11V7a5 5 0 0 1 10 0v4" })]
|
|
400
|
+
}), j = (e) => /* @__PURE__ */ (0, b.jsxs)("svg", {
|
|
401
|
+
...k,
|
|
402
402
|
...e,
|
|
403
|
-
children: [/* @__PURE__ */ (0,
|
|
404
|
-
}),
|
|
405
|
-
...
|
|
403
|
+
children: [/* @__PURE__ */ (0, b.jsx)("path", { d: "m12 19-7-7 7-7" }), /* @__PURE__ */ (0, b.jsx)("path", { d: "M19 12H5" })]
|
|
404
|
+
}), M = (e) => /* @__PURE__ */ (0, b.jsx)("svg", {
|
|
405
|
+
...k,
|
|
406
406
|
...e,
|
|
407
|
-
children: /* @__PURE__ */ (0,
|
|
408
|
-
}),
|
|
409
|
-
...
|
|
407
|
+
children: /* @__PURE__ */ (0, b.jsx)("path", { d: "m6 9 6 6 6-6" })
|
|
408
|
+
}), ne = (e) => /* @__PURE__ */ (0, b.jsxs)("svg", {
|
|
409
|
+
...k,
|
|
410
410
|
...e,
|
|
411
|
-
children: [/* @__PURE__ */ (0,
|
|
412
|
-
}), re = (e) => /* @__PURE__ */ (0,
|
|
413
|
-
...
|
|
411
|
+
children: [/* @__PURE__ */ (0, b.jsx)("path", { d: "M3 7v6h6" }), /* @__PURE__ */ (0, b.jsx)("path", { d: "M21 17a9 9 0 0 0-9-9 9 9 0 0 0-6 2.3L3 13" })]
|
|
412
|
+
}), re = (e) => /* @__PURE__ */ (0, b.jsxs)("svg", {
|
|
413
|
+
...k,
|
|
414
414
|
...e,
|
|
415
|
-
children: [/* @__PURE__ */ (0,
|
|
416
|
-
}),
|
|
417
|
-
...
|
|
415
|
+
children: [/* @__PURE__ */ (0, b.jsx)("path", { d: "M21 7v6h-6" }), /* @__PURE__ */ (0, b.jsx)("path", { d: "M3 17a9 9 0 0 1 9-9 9 9 0 0 1 6 2.3l3 2.7" })]
|
|
416
|
+
}), N = (e) => /* @__PURE__ */ (0, b.jsxs)("svg", {
|
|
417
|
+
...k,
|
|
418
418
|
...e,
|
|
419
|
-
children: [/* @__PURE__ */ (0,
|
|
420
|
-
}), ie = (e) => /* @__PURE__ */ (0,
|
|
421
|
-
...
|
|
419
|
+
children: [/* @__PURE__ */ (0, b.jsx)("path", { d: "M6 2v14a2 2 0 0 0 2 2h14" }), /* @__PURE__ */ (0, b.jsx)("path", { d: "M18 22V8a2 2 0 0 0-2-2H2" })]
|
|
420
|
+
}), ie = (e) => /* @__PURE__ */ (0, b.jsxs)("svg", {
|
|
421
|
+
...k,
|
|
422
422
|
...e,
|
|
423
423
|
children: [
|
|
424
|
-
/* @__PURE__ */ (0,
|
|
424
|
+
/* @__PURE__ */ (0, b.jsx)("rect", {
|
|
425
425
|
width: "18",
|
|
426
426
|
height: "18",
|
|
427
427
|
x: "3",
|
|
@@ -429,52 +429,52 @@ var E = {
|
|
|
429
429
|
rx: "2",
|
|
430
430
|
ry: "2"
|
|
431
431
|
}),
|
|
432
|
-
/* @__PURE__ */ (0,
|
|
432
|
+
/* @__PURE__ */ (0, b.jsx)("circle", {
|
|
433
433
|
cx: "9",
|
|
434
434
|
cy: "9",
|
|
435
435
|
r: "2"
|
|
436
436
|
}),
|
|
437
|
-
/* @__PURE__ */ (0,
|
|
437
|
+
/* @__PURE__ */ (0, b.jsx)("path", { d: "m21 15-3.086-3.086a2 2 0 0 0-2.828 0L6 21" })
|
|
438
438
|
]
|
|
439
|
-
}),
|
|
440
|
-
...
|
|
439
|
+
}), ae = (e) => /* @__PURE__ */ (0, b.jsx)("svg", {
|
|
440
|
+
...k,
|
|
441
441
|
...e,
|
|
442
|
-
children: /* @__PURE__ */ (0,
|
|
442
|
+
children: /* @__PURE__ */ (0, b.jsx)("rect", {
|
|
443
443
|
width: "18",
|
|
444
444
|
height: "18",
|
|
445
445
|
x: "3",
|
|
446
446
|
y: "3",
|
|
447
447
|
rx: "2"
|
|
448
448
|
})
|
|
449
|
-
}),
|
|
450
|
-
...
|
|
449
|
+
}), oe = (e) => /* @__PURE__ */ (0, b.jsx)("svg", {
|
|
450
|
+
...k,
|
|
451
451
|
...e,
|
|
452
|
-
children: /* @__PURE__ */ (0,
|
|
452
|
+
children: /* @__PURE__ */ (0, b.jsx)("rect", {
|
|
453
453
|
width: "20",
|
|
454
454
|
height: "12",
|
|
455
455
|
x: "2",
|
|
456
456
|
y: "6",
|
|
457
457
|
rx: "2"
|
|
458
458
|
})
|
|
459
|
-
}),
|
|
460
|
-
...
|
|
459
|
+
}), se = (e) => /* @__PURE__ */ (0, b.jsx)("svg", {
|
|
460
|
+
...k,
|
|
461
461
|
...e,
|
|
462
|
-
children: /* @__PURE__ */ (0,
|
|
462
|
+
children: /* @__PURE__ */ (0, b.jsx)("rect", {
|
|
463
463
|
width: "20",
|
|
464
464
|
height: "15",
|
|
465
465
|
x: "2",
|
|
466
466
|
y: "4.5",
|
|
467
467
|
rx: "2"
|
|
468
468
|
})
|
|
469
|
-
}),
|
|
470
|
-
...
|
|
469
|
+
}), ce = (e) => /* @__PURE__ */ (0, b.jsxs)("svg", {
|
|
470
|
+
...k,
|
|
471
471
|
...e,
|
|
472
472
|
children: [
|
|
473
|
-
/* @__PURE__ */ (0,
|
|
474
|
-
/* @__PURE__ */ (0,
|
|
475
|
-
/* @__PURE__ */ (0,
|
|
476
|
-
/* @__PURE__ */ (0,
|
|
477
|
-
/* @__PURE__ */ (0,
|
|
473
|
+
/* @__PURE__ */ (0, b.jsx)("path", { d: "M3 7V5a2 2 0 0 1 2-2h2" }),
|
|
474
|
+
/* @__PURE__ */ (0, b.jsx)("path", { d: "M17 3h2a2 2 0 0 1 2 2v2" }),
|
|
475
|
+
/* @__PURE__ */ (0, b.jsx)("path", { d: "M21 17v2a2 2 0 0 1-2 2h-2" }),
|
|
476
|
+
/* @__PURE__ */ (0, b.jsx)("path", { d: "M7 21H5a2 2 0 0 1-2-2v-2" }),
|
|
477
|
+
/* @__PURE__ */ (0, b.jsx)("rect", {
|
|
478
478
|
width: "10",
|
|
479
479
|
height: "8",
|
|
480
480
|
x: "7",
|
|
@@ -482,93 +482,93 @@ var E = {
|
|
|
482
482
|
rx: "1"
|
|
483
483
|
})
|
|
484
484
|
]
|
|
485
|
-
}),
|
|
486
|
-
...
|
|
485
|
+
}), le = (e) => /* @__PURE__ */ (0, b.jsxs)("svg", {
|
|
486
|
+
...k,
|
|
487
487
|
...e,
|
|
488
488
|
children: [
|
|
489
|
-
/* @__PURE__ */ (0,
|
|
490
|
-
/* @__PURE__ */ (0,
|
|
491
|
-
/* @__PURE__ */ (0,
|
|
492
|
-
/* @__PURE__ */ (0,
|
|
493
|
-
/* @__PURE__ */ (0,
|
|
494
|
-
/* @__PURE__ */ (0,
|
|
489
|
+
/* @__PURE__ */ (0, b.jsx)("path", { d: "M8 3H5a2 2 0 0 0-2 2v14c0 1.1.9 2 2 2h3" }),
|
|
490
|
+
/* @__PURE__ */ (0, b.jsx)("path", { d: "M16 3h3a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2h-3" }),
|
|
491
|
+
/* @__PURE__ */ (0, b.jsx)("path", { d: "M12 20v2" }),
|
|
492
|
+
/* @__PURE__ */ (0, b.jsx)("path", { d: "M12 14v2" }),
|
|
493
|
+
/* @__PURE__ */ (0, b.jsx)("path", { d: "M12 8v2" }),
|
|
494
|
+
/* @__PURE__ */ (0, b.jsx)("path", { d: "M12 2v2" })
|
|
495
495
|
]
|
|
496
|
-
}),
|
|
497
|
-
...
|
|
496
|
+
}), ue = (e) => /* @__PURE__ */ (0, b.jsxs)("svg", {
|
|
497
|
+
...k,
|
|
498
498
|
...e,
|
|
499
499
|
children: [
|
|
500
|
-
/* @__PURE__ */ (0,
|
|
501
|
-
/* @__PURE__ */ (0,
|
|
502
|
-
/* @__PURE__ */ (0,
|
|
503
|
-
/* @__PURE__ */ (0,
|
|
504
|
-
/* @__PURE__ */ (0,
|
|
505
|
-
/* @__PURE__ */ (0,
|
|
500
|
+
/* @__PURE__ */ (0, b.jsx)("path", { d: "M21 8V5a2 2 0 0 0-2-2H5a2 2 0 0 0-2 2v3" }),
|
|
501
|
+
/* @__PURE__ */ (0, b.jsx)("path", { d: "M21 16v3a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-3" }),
|
|
502
|
+
/* @__PURE__ */ (0, b.jsx)("path", { d: "M4 12H2" }),
|
|
503
|
+
/* @__PURE__ */ (0, b.jsx)("path", { d: "M10 12H8" }),
|
|
504
|
+
/* @__PURE__ */ (0, b.jsx)("path", { d: "M16 12h-2" }),
|
|
505
|
+
/* @__PURE__ */ (0, b.jsx)("path", { d: "M22 12h-2" })
|
|
506
506
|
]
|
|
507
|
-
}),
|
|
508
|
-
...
|
|
507
|
+
}), de = (e) => /* @__PURE__ */ (0, b.jsxs)("svg", {
|
|
508
|
+
...k,
|
|
509
509
|
...e,
|
|
510
|
-
children: [/* @__PURE__ */ (0,
|
|
511
|
-
}),
|
|
512
|
-
...
|
|
510
|
+
children: [/* @__PURE__ */ (0, b.jsx)("path", { d: "M21 12a9 9 0 1 1-9-9c2.52 0 4.93 1 6.74 2.74L21 8" }), /* @__PURE__ */ (0, b.jsx)("path", { d: "M21 3v5h-5" })]
|
|
511
|
+
}), fe = (e) => /* @__PURE__ */ (0, b.jsxs)("svg", {
|
|
512
|
+
...k,
|
|
513
513
|
...e,
|
|
514
|
-
children: [/* @__PURE__ */ (0,
|
|
515
|
-
}),
|
|
516
|
-
...
|
|
514
|
+
children: [/* @__PURE__ */ (0, b.jsx)("path", { d: "M3 12a9 9 0 1 0 9-9 9.75 9.75 0 0 0-6.74 2.74L3 8" }), /* @__PURE__ */ (0, b.jsx)("path", { d: "M3 3v5h5" })]
|
|
515
|
+
}), pe = (e) => /* @__PURE__ */ (0, b.jsxs)("svg", {
|
|
516
|
+
...k,
|
|
517
517
|
...e,
|
|
518
518
|
children: [
|
|
519
|
-
/* @__PURE__ */ (0,
|
|
519
|
+
/* @__PURE__ */ (0, b.jsx)("rect", {
|
|
520
520
|
width: "7",
|
|
521
521
|
height: "7",
|
|
522
522
|
x: "3",
|
|
523
523
|
y: "3",
|
|
524
524
|
rx: "1"
|
|
525
525
|
}),
|
|
526
|
-
/* @__PURE__ */ (0,
|
|
526
|
+
/* @__PURE__ */ (0, b.jsx)("rect", {
|
|
527
527
|
width: "7",
|
|
528
528
|
height: "7",
|
|
529
529
|
x: "3",
|
|
530
530
|
y: "14",
|
|
531
531
|
rx: "1"
|
|
532
532
|
}),
|
|
533
|
-
/* @__PURE__ */ (0,
|
|
534
|
-
/* @__PURE__ */ (0,
|
|
535
|
-
/* @__PURE__ */ (0,
|
|
536
|
-
/* @__PURE__ */ (0,
|
|
533
|
+
/* @__PURE__ */ (0, b.jsx)("path", { d: "M14 4h7" }),
|
|
534
|
+
/* @__PURE__ */ (0, b.jsx)("path", { d: "M14 9h7" }),
|
|
535
|
+
/* @__PURE__ */ (0, b.jsx)("path", { d: "M14 15h7" }),
|
|
536
|
+
/* @__PURE__ */ (0, b.jsx)("path", { d: "M14 20h7" })
|
|
537
537
|
]
|
|
538
|
-
}),
|
|
539
|
-
...
|
|
538
|
+
}), me = (e) => /* @__PURE__ */ (0, b.jsxs)("svg", {
|
|
539
|
+
...k,
|
|
540
540
|
...e,
|
|
541
541
|
children: [
|
|
542
|
-
/* @__PURE__ */ (0,
|
|
542
|
+
/* @__PURE__ */ (0, b.jsx)("rect", {
|
|
543
543
|
width: "18",
|
|
544
544
|
height: "18",
|
|
545
545
|
x: "3",
|
|
546
546
|
y: "3",
|
|
547
547
|
rx: "2"
|
|
548
548
|
}),
|
|
549
|
-
/* @__PURE__ */ (0,
|
|
550
|
-
/* @__PURE__ */ (0,
|
|
549
|
+
/* @__PURE__ */ (0, b.jsx)("path", { d: "M9 3v18" }),
|
|
550
|
+
/* @__PURE__ */ (0, b.jsx)("path", { d: "m14 9 3 3-3 3" })
|
|
551
551
|
]
|
|
552
|
-
}),
|
|
553
|
-
...
|
|
552
|
+
}), he = (e) => /* @__PURE__ */ (0, b.jsxs)("svg", {
|
|
553
|
+
...k,
|
|
554
554
|
...e,
|
|
555
555
|
children: [
|
|
556
|
-
/* @__PURE__ */ (0,
|
|
556
|
+
/* @__PURE__ */ (0, b.jsx)("rect", {
|
|
557
557
|
width: "18",
|
|
558
558
|
height: "18",
|
|
559
559
|
x: "3",
|
|
560
560
|
y: "3",
|
|
561
561
|
rx: "2"
|
|
562
562
|
}),
|
|
563
|
-
/* @__PURE__ */ (0,
|
|
564
|
-
/* @__PURE__ */ (0,
|
|
563
|
+
/* @__PURE__ */ (0, b.jsx)("path", { d: "M9 3v18" }),
|
|
564
|
+
/* @__PURE__ */ (0, b.jsx)("path", { d: "m16 15-3-3 3-3" })
|
|
565
565
|
]
|
|
566
|
-
}),
|
|
567
|
-
...
|
|
566
|
+
}), ge = (e) => /* @__PURE__ */ (0, b.jsx)("svg", {
|
|
567
|
+
...k,
|
|
568
568
|
...e,
|
|
569
|
-
children: /* @__PURE__ */ (0,
|
|
569
|
+
children: /* @__PURE__ */ (0, b.jsx)("path", {
|
|
570
570
|
d: "M21 12a9 9 0 1 1-6.219-8.56",
|
|
571
|
-
children: /* @__PURE__ */ (0,
|
|
571
|
+
children: /* @__PURE__ */ (0, b.jsx)("animateTransform", {
|
|
572
572
|
attributeType: "xml",
|
|
573
573
|
attributeName: "transform",
|
|
574
574
|
type: "rotate",
|
|
@@ -578,31 +578,31 @@ var E = {
|
|
|
578
578
|
repeatCount: "indefinite"
|
|
579
579
|
})
|
|
580
580
|
})
|
|
581
|
-
}),
|
|
582
|
-
let e =
|
|
581
|
+
}), P = () => {
|
|
582
|
+
let e = a(_);
|
|
583
583
|
if (!e) throw Error("usePixediContext must be used within an PixediProvider");
|
|
584
584
|
return e;
|
|
585
|
-
},
|
|
585
|
+
}, F = {
|
|
586
586
|
button: "_button_1vpzl_1",
|
|
587
587
|
default: "_default_1vpzl_35",
|
|
588
588
|
outline: "_outline_1vpzl_44",
|
|
589
589
|
ghost: "_ghost_1vpzl_54",
|
|
590
590
|
rect: "_rect_1vpzl_63"
|
|
591
|
-
},
|
|
591
|
+
}, I = ({ className: e = "", variant: t = "default", children: n, ref: r, ...i }) => /* @__PURE__ */ (0, b.jsx)("button", {
|
|
592
592
|
ref: r,
|
|
593
|
-
className: `${
|
|
593
|
+
className: `${F.button} ${F[t]} ${e}`.trim(),
|
|
594
594
|
...i,
|
|
595
595
|
children: n
|
|
596
|
-
}),
|
|
596
|
+
}), _e = { separator: "_separator_gp8ff_1" }, ve = n(({ className: e = "", orientation: t = "horizontal", ...n }, r) => /* @__PURE__ */ (0, b.jsx)("hr", {
|
|
597
597
|
ref: r,
|
|
598
598
|
role: "separator",
|
|
599
599
|
"aria-orientation": t,
|
|
600
600
|
"data-orientation": t,
|
|
601
|
-
className: `${
|
|
601
|
+
className: `${_e.separator} ${e}`.trim(),
|
|
602
602
|
...n
|
|
603
603
|
}));
|
|
604
|
-
|
|
605
|
-
var
|
|
604
|
+
ve.displayName = "Separator";
|
|
605
|
+
var L = {
|
|
606
606
|
wrapper: "_wrapper_1aw0m_1",
|
|
607
607
|
trigger: "_trigger_1aw0m_6",
|
|
608
608
|
triggerArrow: "_triggerArrow_1aw0m_31",
|
|
@@ -614,7 +614,7 @@ var R = {
|
|
|
614
614
|
itemRightContainer: "_itemRightContainer_1aw0m_122",
|
|
615
615
|
itemRight: "_itemRight_1aw0m_122",
|
|
616
616
|
itemCheck: "_itemCheck_1aw0m_131"
|
|
617
|
-
},
|
|
617
|
+
}, R = {
|
|
618
618
|
root: "_root_c6gk7_8",
|
|
619
619
|
textRed: "_textRed_c6gk7_73",
|
|
620
620
|
bgRed: "_bgRed_c6gk7_76",
|
|
@@ -628,7 +628,7 @@ var R = {
|
|
|
628
628
|
grid: "_grid_c6gk7_113",
|
|
629
629
|
mobile: "_mobile_c6gk7_124",
|
|
630
630
|
gridNoInfobar: "_gridNoInfobar_c6gk7_128"
|
|
631
|
-
},
|
|
631
|
+
}, ye = (e) => {
|
|
632
632
|
let t = 0, n = window.innerHeight;
|
|
633
633
|
for (let r = e.parentElement; r; r = r.parentElement) {
|
|
634
634
|
let { overflow: e, overflowY: i } = getComputedStyle(r);
|
|
@@ -640,124 +640,238 @@ var R = {
|
|
|
640
640
|
top: t,
|
|
641
641
|
bottom: n
|
|
642
642
|
};
|
|
643
|
-
},
|
|
644
|
-
let [d, f] =
|
|
643
|
+
}, be = ({ items: e, value: t, onChange: n, placeholder: r = "Select an option", className: i = "", renderOption: a }) => {
|
|
644
|
+
let [d, f] = u(!1), p = l(null), m = l(null), h = l(null), g = c(() => {
|
|
645
645
|
let t = (e) => e.reduce((e, n) => n.options ? [...e, ...t(n.options.map((e) => ({
|
|
646
646
|
...e,
|
|
647
647
|
fullName: `${n.label} ${e.label}`
|
|
648
648
|
})))] : [...e, n], []);
|
|
649
649
|
return t(e);
|
|
650
650
|
}, [e]).find((e) => e.value === t);
|
|
651
|
-
|
|
651
|
+
o(() => {
|
|
652
652
|
let e = (e) => {
|
|
653
653
|
p.current && !e.composedPath().includes(p.current) && f(!1);
|
|
654
654
|
};
|
|
655
655
|
return document.addEventListener("mousedown", e), () => document.removeEventListener("mousedown", e);
|
|
656
|
-
}, []),
|
|
656
|
+
}, []), s(() => {
|
|
657
657
|
let e = p.current, t = m.current, n = h.current;
|
|
658
658
|
if (!d || !e || !t || !n) return;
|
|
659
659
|
n.style.removeProperty("top"), n.style.removeProperty("max-height");
|
|
660
|
-
let { top: r, bottom: i } =
|
|
660
|
+
let { top: r, bottom: i } = ye(e), a = e.getBoundingClientRect().top, o = t.getBoundingClientRect(), s = n.offsetHeight, c = i - 8 - o.bottom - 4, l = o.top - 4 - r - 8, u = o.bottom + 4, f = 0;
|
|
661
661
|
s > c && (s <= l ? u = o.top - 4 - s : l > c ? (f = Math.max(l, 0), u = o.top - 4 - f) : f = Math.max(c, 0)), f && (n.style.maxHeight = `${f}px`), n.style.top = `${u - a}px`;
|
|
662
662
|
}, [d, e]);
|
|
663
663
|
let _ = (e) => {
|
|
664
664
|
n(e), f(!1);
|
|
665
665
|
};
|
|
666
|
-
return /* @__PURE__ */ (0,
|
|
666
|
+
return /* @__PURE__ */ (0, b.jsxs)("div", {
|
|
667
667
|
ref: p,
|
|
668
|
-
className: `${
|
|
668
|
+
className: `${L.wrapper} ${i}`.trim(),
|
|
669
669
|
"data-state": d ? "open" : "closed",
|
|
670
|
-
children: [/* @__PURE__ */ (0,
|
|
670
|
+
children: [/* @__PURE__ */ (0, b.jsxs)("button", {
|
|
671
671
|
ref: m,
|
|
672
672
|
type: "button",
|
|
673
|
-
className:
|
|
673
|
+
className: L.trigger,
|
|
674
674
|
onClick: () => f(!d),
|
|
675
|
-
children: [/* @__PURE__ */ (0,
|
|
676
|
-
}), /* @__PURE__ */ (0,
|
|
675
|
+
children: [/* @__PURE__ */ (0, b.jsx)("span", { children: g ? g.fullName : r }), /* @__PURE__ */ (0, b.jsx)(M, { className: L.triggerArrow })]
|
|
676
|
+
}), /* @__PURE__ */ (0, b.jsx)("div", {
|
|
677
677
|
ref: h,
|
|
678
|
-
className:
|
|
679
|
-
children: e.map((e, n) => e.options ? /* @__PURE__ */ (0,
|
|
680
|
-
className: `${
|
|
678
|
+
className: L.content,
|
|
679
|
+
children: e.map((e, n) => e.options ? /* @__PURE__ */ (0, b.jsxs)("div", { children: [/* @__PURE__ */ (0, b.jsx)("div", {
|
|
680
|
+
className: `${L.groupLabel} ${R.semibold}`,
|
|
681
681
|
children: e.label
|
|
682
|
-
}), e.options.map((e) => /* @__PURE__ */ (0,
|
|
683
|
-
className:
|
|
682
|
+
}), e.options.map((e) => /* @__PURE__ */ (0, b.jsxs)("div", {
|
|
683
|
+
className: L.item,
|
|
684
684
|
onClick: () => _(e.value),
|
|
685
|
-
children: [
|
|
686
|
-
className:
|
|
685
|
+
children: [a ? a(e) : /* @__PURE__ */ (0, b.jsx)("span", {
|
|
686
|
+
className: L.itemLeft,
|
|
687
687
|
children: e.label
|
|
688
|
-
}), /* @__PURE__ */ (0,
|
|
689
|
-
className:
|
|
688
|
+
}), /* @__PURE__ */ (0, b.jsxs)("div", {
|
|
689
|
+
className: L.itemAddon,
|
|
690
690
|
children: [
|
|
691
|
-
e.rightLabel && /* @__PURE__ */ (0,
|
|
692
|
-
t === e.value && /* @__PURE__ */ (0,
|
|
693
|
-
t !== e.value && /* @__PURE__ */ (0,
|
|
691
|
+
e.rightLabel && /* @__PURE__ */ (0, b.jsx)("span", { children: e.rightLabel }),
|
|
692
|
+
t === e.value && /* @__PURE__ */ (0, b.jsx)(A, { className: L.itemCheck }),
|
|
693
|
+
t !== e.value && /* @__PURE__ */ (0, b.jsx)("b", {})
|
|
694
694
|
]
|
|
695
695
|
})]
|
|
696
|
-
}, e.value))] }, `group-${n}`) : /* @__PURE__ */ (0,
|
|
697
|
-
className:
|
|
696
|
+
}, e.value))] }, `group-${n}`) : /* @__PURE__ */ (0, b.jsxs)("div", {
|
|
697
|
+
className: L.item,
|
|
698
698
|
onClick: () => _(e.value),
|
|
699
|
-
children: [
|
|
700
|
-
className:
|
|
699
|
+
children: [a ? a(e) : /* @__PURE__ */ (0, b.jsx)("span", {
|
|
700
|
+
className: L.itemLeft,
|
|
701
701
|
children: e.label
|
|
702
|
-
}), t === e.value && /* @__PURE__ */ (0,
|
|
702
|
+
}), t === e.value && /* @__PURE__ */ (0, b.jsx)(A, { className: L.itemCheck })]
|
|
703
703
|
}, e.value))
|
|
704
704
|
})]
|
|
705
705
|
});
|
|
706
|
-
},
|
|
706
|
+
}, xe = {
|
|
707
707
|
input: "_input_kyavx_1",
|
|
708
708
|
numberClean: "_numberClean_kyavx_39"
|
|
709
|
-
},
|
|
710
|
-
let a = t === "number" && n ?
|
|
711
|
-
return /* @__PURE__ */ (0,
|
|
709
|
+
}, Se = ({ className: e = "", type: t = "text", hideArrows: n = !0, ref: r, ...i }) => {
|
|
710
|
+
let a = t === "number" && n ? xe.numberClean : "";
|
|
711
|
+
return /* @__PURE__ */ (0, b.jsx)("input", {
|
|
712
712
|
ref: r,
|
|
713
713
|
type: t,
|
|
714
|
-
className: `${
|
|
714
|
+
className: `${xe.input} ${a} ${e}`.trim(),
|
|
715
715
|
...i
|
|
716
716
|
});
|
|
717
|
-
},
|
|
717
|
+
}, Ce = {
|
|
718
718
|
container: "_container_14vsv_1",
|
|
719
719
|
legend: "_legend_14vsv_4",
|
|
720
720
|
suffix: "_suffix_14vsv_13"
|
|
721
|
-
},
|
|
722
|
-
className: `${
|
|
721
|
+
}, we = ({ label: e, className: t = "", style: n, ref: r, ...i }) => /* @__PURE__ */ (0, b.jsxs)("div", {
|
|
722
|
+
className: `${Ce.container} ${t}`.trim(),
|
|
723
723
|
style: n,
|
|
724
724
|
children: [
|
|
725
|
-
/* @__PURE__ */ (0,
|
|
726
|
-
className:
|
|
725
|
+
/* @__PURE__ */ (0, b.jsx)("span", {
|
|
726
|
+
className: Ce.legend,
|
|
727
727
|
children: e
|
|
728
728
|
}),
|
|
729
|
-
/* @__PURE__ */ (0,
|
|
729
|
+
/* @__PURE__ */ (0, b.jsx)(Se, {
|
|
730
730
|
ref: r,
|
|
731
731
|
type: "number",
|
|
732
732
|
...i
|
|
733
733
|
}),
|
|
734
|
-
/* @__PURE__ */ (0,
|
|
735
|
-
className:
|
|
734
|
+
/* @__PURE__ */ (0, b.jsx)("span", {
|
|
735
|
+
className: Ce.suffix,
|
|
736
736
|
children: "px"
|
|
737
737
|
})
|
|
738
738
|
]
|
|
739
|
-
}),
|
|
739
|
+
}), Te = {
|
|
740
740
|
group: "_group_1e7jm_1",
|
|
741
741
|
save: "_save_1e7jm_6",
|
|
742
742
|
close: "_close_1e7jm_13"
|
|
743
|
-
},
|
|
744
|
-
className:
|
|
745
|
-
children: [/* @__PURE__ */ (0,
|
|
743
|
+
}, z = ({ onSave: e, onClose: t, saving: n = !1, disabled: r = !1 }) => /* @__PURE__ */ (0, b.jsxs)("div", {
|
|
744
|
+
className: Te.group,
|
|
745
|
+
children: [/* @__PURE__ */ (0, b.jsx)(I, {
|
|
746
746
|
variant: "outline",
|
|
747
|
-
className:
|
|
747
|
+
className: Te.save,
|
|
748
748
|
"aria-label": "Save",
|
|
749
749
|
disabled: r || n,
|
|
750
750
|
onClick: e,
|
|
751
|
-
children: n ? /* @__PURE__ */ (0,
|
|
752
|
-
}), /* @__PURE__ */ (0,
|
|
751
|
+
children: n ? /* @__PURE__ */ (0, b.jsx)(ge, {}) : /* @__PURE__ */ (0, b.jsx)(A, {})
|
|
752
|
+
}), /* @__PURE__ */ (0, b.jsx)(I, {
|
|
753
753
|
variant: "outline",
|
|
754
|
-
className:
|
|
754
|
+
className: Te.close,
|
|
755
755
|
"aria-label": "Close",
|
|
756
756
|
disabled: n,
|
|
757
757
|
onClick: t,
|
|
758
|
-
children: /* @__PURE__ */ (0,
|
|
758
|
+
children: /* @__PURE__ */ (0, b.jsx)(ee, {})
|
|
759
759
|
})]
|
|
760
|
-
}),
|
|
760
|
+
}), B = {
|
|
761
|
+
tooltip: "_tooltip_gohf2_1",
|
|
762
|
+
container: "_container_gohf2_5",
|
|
763
|
+
popup: "_popup_gohf2_18",
|
|
764
|
+
animated: "_animated_gohf2_62",
|
|
765
|
+
mask: "_mask_gohf2_71",
|
|
766
|
+
track: "_track_gohf2_78",
|
|
767
|
+
title: "_title_gohf2_94"
|
|
768
|
+
}, Ee = (t, n = "horizontal") => {
|
|
769
|
+
let [i, a] = u(null), [d, f] = u(null), [p, m] = u(!1), [h, g] = u(!1), [_, v] = u([]), y = l(null), b = l(null), x = l([]), S = n === "vertical", C = c(() => {
|
|
770
|
+
let n = [];
|
|
771
|
+
return e.forEach(t, (e) => {
|
|
772
|
+
if (r(e)) {
|
|
773
|
+
let { "data-tooltip": t } = e.props;
|
|
774
|
+
t && n.push(t);
|
|
775
|
+
}
|
|
776
|
+
}), n;
|
|
777
|
+
}, [t]), w = C.join("\0"), T = C.length;
|
|
778
|
+
s(() => {
|
|
779
|
+
let e = () => {
|
|
780
|
+
let e = x.current.slice(0, T).map((e) => ({
|
|
781
|
+
w: e?.offsetWidth ?? 0,
|
|
782
|
+
h: e?.offsetHeight ?? 0
|
|
783
|
+
}));
|
|
784
|
+
v((t) => t.length === e.length && t.every((t, n) => t.w === e[n].w && t.h === e[n].h) ? t : e);
|
|
785
|
+
};
|
|
786
|
+
e();
|
|
787
|
+
let t = b.current;
|
|
788
|
+
if (!t || typeof ResizeObserver > "u") return;
|
|
789
|
+
let n = new ResizeObserver(e);
|
|
790
|
+
return n.observe(t), () => n.disconnect();
|
|
791
|
+
}, [w, T]), o(() => {
|
|
792
|
+
if (!p || h) return;
|
|
793
|
+
let e = 0, t = requestAnimationFrame(() => {
|
|
794
|
+
e = requestAnimationFrame(() => g(!0));
|
|
795
|
+
});
|
|
796
|
+
return () => {
|
|
797
|
+
cancelAnimationFrame(t), cancelAnimationFrame(e);
|
|
798
|
+
};
|
|
799
|
+
}, [p, h]);
|
|
800
|
+
let E = (e) => {
|
|
801
|
+
let t = e.target.closest("[data-tooltip]");
|
|
802
|
+
if (!t) {
|
|
803
|
+
m(!1);
|
|
804
|
+
return;
|
|
805
|
+
}
|
|
806
|
+
let n = t.parentElement;
|
|
807
|
+
if (!n) return;
|
|
808
|
+
let r = Array.from(n.children).indexOf(t);
|
|
809
|
+
if (r === -1 || p && r === i) return;
|
|
810
|
+
let o = y.current?.getBoundingClientRect();
|
|
811
|
+
if (!o) return;
|
|
812
|
+
let s = t.getBoundingClientRect(), c = S ? {
|
|
813
|
+
x: s.right - o.left + 4,
|
|
814
|
+
y: s.top - o.top + s.height / 2
|
|
815
|
+
} : {
|
|
816
|
+
x: s.left - o.left + s.width / 2,
|
|
817
|
+
y: s.top - o.top - 8
|
|
818
|
+
};
|
|
819
|
+
p || g(!1), f(c), a(r), m(!0);
|
|
820
|
+
}, D = () => m(!1), O = i ?? 0, k = _[O], A = _.slice(0, O).reduce((e, t) => e + (S ? t.h : t.w), 0);
|
|
821
|
+
return {
|
|
822
|
+
containerRef: y,
|
|
823
|
+
trackRef: b,
|
|
824
|
+
titleRefs: x,
|
|
825
|
+
titles: C,
|
|
826
|
+
isVertical: S,
|
|
827
|
+
isVisible: p,
|
|
828
|
+
isAnimated: h,
|
|
829
|
+
cssVars: {
|
|
830
|
+
"--tooltip-x": d ? `${d.x}px` : "0px",
|
|
831
|
+
"--tooltip-y": d ? `${d.y}px` : "0px",
|
|
832
|
+
"--tooltip-opacity": p ? "1" : "0",
|
|
833
|
+
"--tooltip-w": k?.w ? `${k.w}px` : "auto",
|
|
834
|
+
"--tooltip-h": k?.h ? `${k.h}px` : "auto",
|
|
835
|
+
"--tooltip-offset": `${A}px`
|
|
836
|
+
},
|
|
837
|
+
handleMouseMove: E,
|
|
838
|
+
handleMouseLeave: D
|
|
839
|
+
};
|
|
840
|
+
}, V = ({ children: e, orientation: t = "horizontal", className: n = "", classNameTitle: r = "" }) => {
|
|
841
|
+
let { containerRef: i, trackRef: a, titleRefs: o, titles: s, isVertical: c, isAnimated: l, cssVars: u, handleMouseMove: d, handleMouseLeave: f } = Ee(e, t);
|
|
842
|
+
return /* @__PURE__ */ (0, b.jsxs)("div", {
|
|
843
|
+
ref: i,
|
|
844
|
+
onMouseMove: d,
|
|
845
|
+
onMouseLeave: f,
|
|
846
|
+
onBlur: f,
|
|
847
|
+
className: B.tooltip,
|
|
848
|
+
style: u,
|
|
849
|
+
children: [/* @__PURE__ */ (0, b.jsx)("div", {
|
|
850
|
+
"data-orientation": c ? "vertical" : "horizontal",
|
|
851
|
+
className: B.container,
|
|
852
|
+
children: e
|
|
853
|
+
}), /* @__PURE__ */ (0, b.jsx)("div", {
|
|
854
|
+
"aria-hidden": "true",
|
|
855
|
+
"data-orientation": c ? "vertical" : "horizontal",
|
|
856
|
+
className: `${B.popup} ${l ? B.animated : ""} ${n}`,
|
|
857
|
+
children: /* @__PURE__ */ (0, b.jsx)("div", {
|
|
858
|
+
className: B.mask,
|
|
859
|
+
children: /* @__PURE__ */ (0, b.jsx)("div", {
|
|
860
|
+
ref: a,
|
|
861
|
+
"data-orientation": c ? "vertical" : "horizontal",
|
|
862
|
+
className: B.track,
|
|
863
|
+
children: s.map((e, t) => /* @__PURE__ */ (0, b.jsx)("div", {
|
|
864
|
+
ref: (e) => {
|
|
865
|
+
o.current[t] = e;
|
|
866
|
+
},
|
|
867
|
+
className: `${B.title} ${r}`,
|
|
868
|
+
children: e
|
|
869
|
+
}, t))
|
|
870
|
+
})
|
|
871
|
+
})
|
|
872
|
+
})]
|
|
873
|
+
});
|
|
874
|
+
}, De = 1920, Oe = .85, ke = [
|
|
761
875
|
{
|
|
762
876
|
label: "Facebook",
|
|
763
877
|
value: "facebook",
|
|
@@ -860,7 +974,7 @@ var R = {
|
|
|
860
974
|
}
|
|
861
975
|
]
|
|
862
976
|
}
|
|
863
|
-
], H = 32,
|
|
977
|
+
], H = 32, Ae = (e, t, n, r, i, a, o, s, c, l) => {
|
|
864
978
|
let { x: u, y: d, w: f, h: p } = c;
|
|
865
979
|
if (e) {
|
|
866
980
|
let e = o - c.w - c.x;
|
|
@@ -883,7 +997,7 @@ var R = {
|
|
|
883
997
|
w: f,
|
|
884
998
|
h: p
|
|
885
999
|
};
|
|
886
|
-
},
|
|
1000
|
+
}, je = (e, t, n, r, i, a, o, s, c, l) => {
|
|
887
1001
|
let { x: u } = c, { y: d, w: f, h: p } = c;
|
|
888
1002
|
if (e) {
|
|
889
1003
|
f += i - n, f + u > o && (f = o - u), f < H && (f = H);
|
|
@@ -905,7 +1019,7 @@ var R = {
|
|
|
905
1019
|
w: f,
|
|
906
1020
|
h: p
|
|
907
1021
|
};
|
|
908
|
-
},
|
|
1022
|
+
}, Me = (e, t, n, r, i, a, o, s, c, l) => {
|
|
909
1023
|
let { y: u } = c, { x: d, w: f, h: p } = c;
|
|
910
1024
|
if (e) {
|
|
911
1025
|
p += a - r, p + u > s && (p = s - u), p < H && (p = H);
|
|
@@ -927,7 +1041,7 @@ var R = {
|
|
|
927
1041
|
w: f,
|
|
928
1042
|
h: p
|
|
929
1043
|
};
|
|
930
|
-
},
|
|
1044
|
+
}, Ne = (e, t, n, r, i, a, o, s, c, l) => {
|
|
931
1045
|
let { x: u, y: d } = c, { w: f, h: p } = c;
|
|
932
1046
|
if (e) f += i - n, f + u > o && (f = o - u), f < H && (f = H), p += a - r, p + d > s && (p = s - d), p < H && (p = H);
|
|
933
1047
|
else {
|
|
@@ -946,7 +1060,7 @@ var R = {
|
|
|
946
1060
|
w: f,
|
|
947
1061
|
h: p
|
|
948
1062
|
};
|
|
949
|
-
},
|
|
1063
|
+
}, Pe = (e, t, n, r, i, a, o, s, c) => {
|
|
950
1064
|
let l = e === "tl" || e === "bl", u = e === "tl" || e === "tr", d = c.x + c.w, f = c.y + c.h, p = i - n, m = a - r, h = t >= 1 ? c.w + (l ? -p : p) : (c.h + (u ? -m : m)) * t, g = l ? d : o - c.x, _ = u ? f : s - c.y, v = Math.min(g, _ * t), y = Math.max(H, H * t), b = Math.min(Math.max(h, y), v), x = b / t;
|
|
951
1065
|
return {
|
|
952
1066
|
x: l ? d - b : c.x,
|
|
@@ -954,12 +1068,12 @@ var R = {
|
|
|
954
1068
|
w: b,
|
|
955
1069
|
h: x
|
|
956
1070
|
};
|
|
957
|
-
},
|
|
1071
|
+
}, Fe = (e, t, n, r, i, a, o, s, c, l, u) => t ? e === "tl" ? Ae(t, n, r, i, a, o, s, c, l, u) : e === "tr" ? je(t, n, r, i, a, o, s, c, l, u) : e === "bl" ? Me(t, n, r, i, a, o, s, c, l, u) : e === "br" ? Ne(t, n, r, i, a, o, s, c, l, u) : {
|
|
958
1072
|
x: 0,
|
|
959
1073
|
y: 0,
|
|
960
1074
|
w: 0,
|
|
961
1075
|
h: 0
|
|
962
|
-
} :
|
|
1076
|
+
} : Pe(e, n, r, i, a, o, s, c, l), U = (e, t, n) => {
|
|
963
1077
|
let r = .12, i = t / n, a = 0, o = 0;
|
|
964
1078
|
e === 1 && (a = (i > 1 ? n : t) * (1 - r * 2), o = a), e > 1 && (i > e ? (o = n * (1 - r * 2), a = o * e) : (a = t * (1 - r * 2), o = a / e)), e < 1 && (i > e ? (o = n * (1 - r * 2), a = o * e) : (a = t * (1 - r * 2), o = a / e));
|
|
965
1079
|
let s = a / t * 100, c = o / n * 100, l = (t - a) / 2 / t * 100, u = (n - o) / 2 / n * 100;
|
|
@@ -973,7 +1087,7 @@ var R = {
|
|
|
973
1087
|
wP: Math.round(s / 100 * t),
|
|
974
1088
|
hP: Math.round(c / 100 * n)
|
|
975
1089
|
};
|
|
976
|
-
},
|
|
1090
|
+
}, Ie = (e, t, n, r) => {
|
|
977
1091
|
let i = e.w / 100 * n, a = e.h / 100 * r;
|
|
978
1092
|
t >= 1 ? a = i / t : i = a * t;
|
|
979
1093
|
let o = i / n * 100, s = a / r * 100, c = Math.max(o / (100 - e.x), s / (100 - e.y), 1);
|
|
@@ -982,21 +1096,21 @@ var R = {
|
|
|
982
1096
|
w: o,
|
|
983
1097
|
h: s
|
|
984
1098
|
};
|
|
985
|
-
}, W = (e) => Math.abs(Math.round(e / 90)) % 2 == 1,
|
|
1099
|
+
}, W = (e) => Math.abs(Math.round(e / 90)) % 2 == 1, Le = (e, t, n, r) => W(n) === W(r) ? {
|
|
986
1100
|
width: e,
|
|
987
1101
|
height: t
|
|
988
1102
|
} : {
|
|
989
1103
|
width: t,
|
|
990
1104
|
height: e
|
|
991
|
-
},
|
|
992
|
-
let { width: t, height: n } = e, r = Math.min(1,
|
|
1105
|
+
}, Re = async (e) => {
|
|
1106
|
+
let { width: t, height: n } = e, r = Math.min(1, De / Math.max(t, n)), i = Math.round(t * r), a = Math.round(n * r), o = new OffscreenCanvas(i, a), s = o.getContext("2d");
|
|
993
1107
|
if (!s) throw Error("Failed to get 2D context for preview canvas");
|
|
994
1108
|
return s.drawImage(e, 0, 0, i, a), o.convertToBlob({
|
|
995
1109
|
type: "image/webp",
|
|
996
|
-
quality:
|
|
1110
|
+
quality: Oe
|
|
997
1111
|
});
|
|
998
1112
|
};
|
|
999
|
-
function
|
|
1113
|
+
function ze(e) {
|
|
1000
1114
|
let t = new OffscreenCanvas(e.width, e.height), n = t.getContext("2d");
|
|
1001
1115
|
if (!n) throw Error("Failed to create 2D context for canvas.");
|
|
1002
1116
|
n.drawImage(e, 0, 0);
|
|
@@ -1010,14 +1124,14 @@ function Pe(e) {
|
|
|
1010
1124
|
}
|
|
1011
1125
|
//#endregion
|
|
1012
1126
|
//#region src/shared/components/Pixedi/utils/imageProcessor.ts
|
|
1013
|
-
var
|
|
1127
|
+
var Be = (e) => new Promise((t, n) => {
|
|
1014
1128
|
let r = new FileReader();
|
|
1015
1129
|
r.onloadend = () => {
|
|
1016
1130
|
let e = r.result;
|
|
1017
1131
|
typeof e == "string" ? t(e) : n(/* @__PURE__ */ Error("Failed to read blob as base64"));
|
|
1018
1132
|
}, r.onerror = () => n(r.error ?? /* @__PURE__ */ Error("FileReader error")), r.readAsDataURL(e);
|
|
1019
1133
|
});
|
|
1020
|
-
async function
|
|
1134
|
+
async function Ve(e) {
|
|
1021
1135
|
let t = await createImageBitmap(e), n = e.type || "image/png", r = n === "image/gif" ? "image/png" : n, i = document.createElement("canvas"), a = i.getContext("2d", { alpha: !0 });
|
|
1022
1136
|
i.width = t.width, i.height = t.height, a?.drawImage(t, 0, 0), t.close();
|
|
1023
1137
|
let o = () => {
|
|
@@ -1052,7 +1166,7 @@ async function Ie(e) {
|
|
|
1052
1166
|
}, a, t) : i.toBlob((t) => {
|
|
1053
1167
|
t ? e(t) : o(/* @__PURE__ */ Error("Failed to encode image as image/png"));
|
|
1054
1168
|
}, "image/png");
|
|
1055
|
-
}), s = await createImageBitmap(o), c = await
|
|
1169
|
+
}), s = await createImageBitmap(o), c = await Re(s), { width: l, height: u } = s, d = ze(s);
|
|
1056
1170
|
return s.close(), {
|
|
1057
1171
|
newBlob: o,
|
|
1058
1172
|
previewBlob: c,
|
|
@@ -1066,17 +1180,17 @@ async function Ie(e) {
|
|
|
1066
1180
|
}
|
|
1067
1181
|
//#endregion
|
|
1068
1182
|
//#region src/shared/components/Pixedi/utils/preview.ts
|
|
1069
|
-
var G = (e, t, n) => Math.max(t, Math.min(n, e)),
|
|
1070
|
-
switch (
|
|
1183
|
+
var G = (e, t, n) => Math.max(t, Math.min(n, e)), He = (e, t) => [[e[0][0] * t[0][0] + e[0][1] * t[1][0], e[0][0] * t[0][1] + e[0][1] * t[1][1]], [e[1][0] * t[0][0] + e[1][1] * t[1][0], e[1][0] * t[0][1] + e[1][1] * t[1][1]]], Ue = (e) => (Math.round(e / 90) % 4 + 4) % 4 * 90, We = (e) => {
|
|
1184
|
+
switch (Ue(e)) {
|
|
1071
1185
|
case 90: return [[0, -1], [1, 0]];
|
|
1072
1186
|
case 180: return [[-1, 0], [0, -1]];
|
|
1073
1187
|
case 270: return [[0, 1], [-1, 0]];
|
|
1074
1188
|
default: return [[1, 0], [0, 1]];
|
|
1075
1189
|
}
|
|
1076
|
-
},
|
|
1077
|
-
let r =
|
|
1190
|
+
}, Ge = (e, t) => [[e ? -1 : 1, 0], [0, t ? -1 : 1]], Ke = (e, t, n) => He(Ge(t, n), We(-e)), qe = (e) => [+(e[0][0] < 0 || e[0][1] < 0), +(e[1][0] < 0 || e[1][1] < 0)], K = (e, t, n) => {
|
|
1191
|
+
let r = qe(e);
|
|
1078
1192
|
return [e[0][0] * t + e[0][1] * n + r[0], e[1][0] * t + e[1][1] * n + r[1]];
|
|
1079
|
-
},
|
|
1193
|
+
}, Je = (e) => {
|
|
1080
1194
|
let t = 1, n = 1, r = {
|
|
1081
1195
|
x: 0,
|
|
1082
1196
|
y: 0,
|
|
@@ -1085,14 +1199,14 @@ var G = (e, t, n) => Math.max(t, Math.min(n, e)), Le = (e, t) => [[e[0][0] * t[0
|
|
|
1085
1199
|
}, i = 0, a = !1, o = !1;
|
|
1086
1200
|
for (let s = 0; s < e.length; s++) {
|
|
1087
1201
|
let c = e[s];
|
|
1088
|
-
if (c.action.name ===
|
|
1202
|
+
if (c.action.name === m.INITIAL) t = c.width, n = c.height, r = {
|
|
1089
1203
|
x: 0,
|
|
1090
1204
|
y: 0,
|
|
1091
1205
|
w: 1,
|
|
1092
1206
|
h: 1
|
|
1093
1207
|
}, i = 0, a = !1, o = !1;
|
|
1094
|
-
else if (c.action.name ===
|
|
1095
|
-
let e = (c.action.args.x ?? 0) / 100, t = (c.action.args.y ?? 0) / 100, n = (c.action.args.w ?? 100) / 100, s = (c.action.args.h ?? 100) / 100, l =
|
|
1208
|
+
else if (c.action.name === m.CROP) {
|
|
1209
|
+
let e = (c.action.args.x ?? 0) / 100, t = (c.action.args.y ?? 0) / 100, n = (c.action.args.w ?? 100) / 100, s = (c.action.args.h ?? 100) / 100, l = Ke(i, a, o), u = [
|
|
1096
1210
|
K(l, e, t),
|
|
1097
1211
|
K(l, e + n, t),
|
|
1098
1212
|
K(l, e, t + s),
|
|
@@ -1109,13 +1223,13 @@ var G = (e, t, n) => Math.max(t, Math.min(n, e)), Le = (e, t) => [[e[0][0] * t[0
|
|
|
1109
1223
|
t && (a = !a), n && (o = !o);
|
|
1110
1224
|
} else c.action.name === "rotate" && (i = c.action.args.degrees);
|
|
1111
1225
|
}
|
|
1112
|
-
let s = r.w * t, c = r.h * n, l = W(i), u = l ? c : s, d = l ? s : c,
|
|
1226
|
+
let s = r.w * t, c = r.h * n, l = W(i), u = l ? c : s, d = l ? s : c, f = e.at(-1)?.width || 0, p = e.at(-1)?.height || 0;
|
|
1113
1227
|
return {
|
|
1114
1228
|
box: r,
|
|
1115
1229
|
boxWidth: s,
|
|
1116
1230
|
boxHeight: c,
|
|
1117
|
-
newWidth:
|
|
1118
|
-
newHeight:
|
|
1231
|
+
newWidth: f,
|
|
1232
|
+
newHeight: p,
|
|
1119
1233
|
initWidth: t,
|
|
1120
1234
|
initHeight: n,
|
|
1121
1235
|
viewWidth: u,
|
|
@@ -1124,13 +1238,13 @@ var G = (e, t, n) => Math.max(t, Math.min(n, e)), Le = (e, t) => [[e[0][0] * t[0
|
|
|
1124
1238
|
flipH: a,
|
|
1125
1239
|
flipV: o
|
|
1126
1240
|
};
|
|
1127
|
-
},
|
|
1128
|
-
let { box: t, flipH: n, flipV: r, rotation: i, newWidth: a, newHeight: o, initWidth: s, initHeight: c, viewWidth: l, viewHeight: u } =
|
|
1241
|
+
}, Ye = (e) => {
|
|
1242
|
+
let { box: t, flipH: n, flipV: r, rotation: i, newWidth: a, newHeight: o, initWidth: s, initHeight: c, viewWidth: l, viewHeight: u } = Je(e), d = G(t.x, 0, 1), f = G(t.y, 0, 1), p = {
|
|
1129
1243
|
x: d,
|
|
1130
1244
|
y: f,
|
|
1131
1245
|
w: G(t.w, 0, 1 - d),
|
|
1132
1246
|
h: G(t.h, 0, 1 - f)
|
|
1133
|
-
}, m =
|
|
1247
|
+
}, m = Ue(i);
|
|
1134
1248
|
return {
|
|
1135
1249
|
...p.x === 0 && p.y === 0 && p.w === 1 && p.h === 1 ? {} : { crop: {
|
|
1136
1250
|
x: Math.round(s * t.x),
|
|
@@ -1148,18 +1262,18 @@ var G = (e, t, n) => Math.max(t, Math.min(n, e)), Le = (e, t) => [[e[0][0] * t[0
|
|
|
1148
1262
|
height: o
|
|
1149
1263
|
} } : {}
|
|
1150
1264
|
};
|
|
1151
|
-
},
|
|
1152
|
-
let [t, n] =
|
|
1265
|
+
}, Xe = (e) => {
|
|
1266
|
+
let [t, n] = u(!1), { setImage: r, settings: i, history: a, originalBlob: o, setCurrentAction: s, resetHistory: c } = P();
|
|
1153
1267
|
return {
|
|
1154
1268
|
save: async () => {
|
|
1155
1269
|
if (!o) return;
|
|
1156
1270
|
n(!0);
|
|
1157
|
-
let t =
|
|
1271
|
+
let t = Ye(a.items.slice(0, a.pointer + 1));
|
|
1158
1272
|
try {
|
|
1159
|
-
let n = await
|
|
1273
|
+
let n = await Ve(o);
|
|
1160
1274
|
t.crop && n.crop(t.crop.x, t.crop.y, t.crop.w, t.crop.h), t.flip && n.flip(t.flip.horizontal, t.flip.vertical), t.rotate && n.rotate(t.rotate.degrees), t.resize && n.resize(t.resize.width, t.resize.height);
|
|
1161
1275
|
let { newBlob: a, previewBlob: s, mimeType: c, width: l, height: u, isAlpha: d } = await n.get(i), f = "";
|
|
1162
|
-
i.exportAs === "base64" && (f = await
|
|
1276
|
+
i.exportAs === "base64" && (f = await Be(a)), await e(f || a), r({
|
|
1163
1277
|
newBlob: a,
|
|
1164
1278
|
previewBlob: s,
|
|
1165
1279
|
mimeType: c,
|
|
@@ -1174,51 +1288,53 @@ var G = (e, t, n) => Math.max(t, Math.min(n, e)), Le = (e, t) => [[e[0][0] * t[0
|
|
|
1174
1288
|
}
|
|
1175
1289
|
},
|
|
1176
1290
|
reset: () => {
|
|
1177
|
-
s(null),
|
|
1291
|
+
s(null), c();
|
|
1178
1292
|
},
|
|
1179
1293
|
isSaving: t
|
|
1180
1294
|
};
|
|
1181
1295
|
}, q = {
|
|
1182
|
-
header: "
|
|
1183
|
-
left: "
|
|
1184
|
-
sidebarToggle: "
|
|
1185
|
-
mobile: "
|
|
1186
|
-
sidebarIcon: "
|
|
1187
|
-
tools: "
|
|
1188
|
-
history: "
|
|
1189
|
-
historyText: "
|
|
1190
|
-
},
|
|
1191
|
-
let { save: r, reset: i, isSaving: a } =
|
|
1192
|
-
return /* @__PURE__ */ (0,
|
|
1296
|
+
header: "_header_1yueu_1",
|
|
1297
|
+
left: "_left_1yueu_12",
|
|
1298
|
+
sidebarToggle: "_sidebarToggle_1yueu_17",
|
|
1299
|
+
mobile: "_mobile_1yueu_29",
|
|
1300
|
+
sidebarIcon: "_sidebarIcon_1yueu_33",
|
|
1301
|
+
tools: "_tools_1yueu_38",
|
|
1302
|
+
history: "_history_1yueu_42",
|
|
1303
|
+
historyText: "_historyText_1yueu_47"
|
|
1304
|
+
}, Ze = ({ onBack: e, onSave: t, isMobile: n }) => {
|
|
1305
|
+
let { save: r, reset: i, isSaving: a } = Xe(t), { sidebar: o, history: s, undo: c, redo: l, setSidebar: u, setCurrentAction: d } = P(), f = s.items.length > 1 && !a, p = s.pointer === 0, m = s.pointer === s.items.length - 1, h = s.items.length < 2 || a, g = h || s.pointer === 0;
|
|
1306
|
+
return /* @__PURE__ */ (0, b.jsxs)("div", {
|
|
1193
1307
|
className: q.header,
|
|
1194
|
-
children: [/* @__PURE__ */ (0,
|
|
1308
|
+
children: [/* @__PURE__ */ (0, b.jsxs)("div", {
|
|
1195
1309
|
className: q.left,
|
|
1196
|
-
children: [/* @__PURE__ */ (0,
|
|
1310
|
+
children: [/* @__PURE__ */ (0, b.jsx)("div", {
|
|
1197
1311
|
className: `${q.sidebarToggle} ${n ? q.mobile : ""}`,
|
|
1198
1312
|
onClick: () => {
|
|
1199
1313
|
u(!o);
|
|
1200
1314
|
},
|
|
1201
|
-
children: o ? /* @__PURE__ */ (0,
|
|
1202
|
-
}), /* @__PURE__ */ (0,
|
|
1315
|
+
children: o ? /* @__PURE__ */ (0, b.jsx)(he, { className: q.sidebarIcon }) : /* @__PURE__ */ (0, b.jsx)(me, { className: q.sidebarIcon })
|
|
1316
|
+
}), /* @__PURE__ */ (0, b.jsx)(I, {
|
|
1203
1317
|
variant: "ghost",
|
|
1204
|
-
className:
|
|
1318
|
+
className: F.rect,
|
|
1205
1319
|
onClick: e,
|
|
1206
|
-
children: /* @__PURE__ */ (0,
|
|
1320
|
+
children: /* @__PURE__ */ (0, b.jsx)(j, {})
|
|
1207
1321
|
})]
|
|
1208
|
-
}), /* @__PURE__ */ (0,
|
|
1322
|
+
}), /* @__PURE__ */ (0, b.jsxs)("div", {
|
|
1209
1323
|
className: q.tools,
|
|
1210
1324
|
children: [
|
|
1211
|
-
|
|
1325
|
+
f && /* @__PURE__ */ (0, b.jsxs)("div", {
|
|
1212
1326
|
className: q.history,
|
|
1213
1327
|
children: [
|
|
1214
|
-
/* @__PURE__ */ (0,
|
|
1328
|
+
/* @__PURE__ */ (0, b.jsx)(I, {
|
|
1215
1329
|
variant: "outline",
|
|
1216
|
-
disabled:
|
|
1217
|
-
className:
|
|
1218
|
-
onClick:
|
|
1219
|
-
|
|
1330
|
+
disabled: p,
|
|
1331
|
+
className: F.rect,
|
|
1332
|
+
onClick: () => {
|
|
1333
|
+
c(), d(null);
|
|
1334
|
+
},
|
|
1335
|
+
children: /* @__PURE__ */ (0, b.jsx)(ne, {})
|
|
1220
1336
|
}),
|
|
1221
|
-
/* @__PURE__ */ (0,
|
|
1337
|
+
/* @__PURE__ */ (0, b.jsxs)("div", {
|
|
1222
1338
|
className: q.historyText,
|
|
1223
1339
|
children: [
|
|
1224
1340
|
s.pointer + 1,
|
|
@@ -1226,88 +1342,82 @@ var G = (e, t, n) => Math.max(t, Math.min(n, e)), Le = (e, t) => [[e[0][0] * t[0
|
|
|
1226
1342
|
s.items.length
|
|
1227
1343
|
]
|
|
1228
1344
|
}),
|
|
1229
|
-
/* @__PURE__ */ (0,
|
|
1345
|
+
/* @__PURE__ */ (0, b.jsx)(I, {
|
|
1230
1346
|
variant: "outline",
|
|
1231
|
-
disabled:
|
|
1232
|
-
className:
|
|
1233
|
-
onClick:
|
|
1234
|
-
|
|
1347
|
+
disabled: m,
|
|
1348
|
+
className: F.rect,
|
|
1349
|
+
onClick: () => {
|
|
1350
|
+
l(), d(null);
|
|
1351
|
+
},
|
|
1352
|
+
children: /* @__PURE__ */ (0, b.jsx)(re, {})
|
|
1235
1353
|
})
|
|
1236
1354
|
]
|
|
1237
1355
|
}),
|
|
1238
|
-
/* @__PURE__ */ (0,
|
|
1356
|
+
/* @__PURE__ */ (0, b.jsx)(I, {
|
|
1239
1357
|
variant: "outline",
|
|
1240
|
-
disabled:
|
|
1358
|
+
disabled: h,
|
|
1241
1359
|
onClick: i,
|
|
1242
1360
|
children: "Reset"
|
|
1243
1361
|
}),
|
|
1244
|
-
/* @__PURE__ */ (0,
|
|
1245
|
-
disabled:
|
|
1362
|
+
/* @__PURE__ */ (0, b.jsxs)(I, {
|
|
1363
|
+
disabled: g,
|
|
1246
1364
|
onClick: r,
|
|
1247
|
-
children: [a ? /* @__PURE__ */ (0,
|
|
1365
|
+
children: [a ? /* @__PURE__ */ (0, b.jsx)(ge, {}) : /* @__PURE__ */ (0, b.jsx)(A, {}), "Save"]
|
|
1248
1366
|
})
|
|
1249
1367
|
]
|
|
1250
1368
|
})]
|
|
1251
1369
|
});
|
|
1252
|
-
},
|
|
1253
|
-
|
|
1254
|
-
|
|
1255
|
-
|
|
1256
|
-
|
|
1257
|
-
|
|
1258
|
-
|
|
1259
|
-
|
|
1260
|
-
|
|
1261
|
-
|
|
1262
|
-
|
|
1263
|
-
|
|
1264
|
-
|
|
1265
|
-
|
|
1266
|
-
|
|
1267
|
-
|
|
1268
|
-
|
|
1269
|
-
|
|
1270
|
-
|
|
1271
|
-
|
|
1272
|
-
case f.FLIP: return {
|
|
1273
|
-
icon: /* @__PURE__ */ (0, v.jsx)(se, {}),
|
|
1274
|
-
label: "Flip"
|
|
1275
|
-
};
|
|
1276
|
-
case f.ROTATE: return {
|
|
1277
|
-
icon: /* @__PURE__ */ (0, v.jsx)(le, {}),
|
|
1278
|
-
label: "Rotate"
|
|
1279
|
-
};
|
|
1280
|
-
default: return null;
|
|
1370
|
+
}, Qe = {
|
|
1371
|
+
[m.RESIZE]: {
|
|
1372
|
+
icon: /* @__PURE__ */ (0, b.jsx)(ce, {}),
|
|
1373
|
+
label: "Resize"
|
|
1374
|
+
},
|
|
1375
|
+
[m.CROP]: {
|
|
1376
|
+
icon: /* @__PURE__ */ (0, b.jsx)(N, {}),
|
|
1377
|
+
label: "Crop"
|
|
1378
|
+
},
|
|
1379
|
+
[m.PRESET_CROP]: {
|
|
1380
|
+
icon: /* @__PURE__ */ (0, b.jsx)(pe, {}),
|
|
1381
|
+
label: "Presets"
|
|
1382
|
+
},
|
|
1383
|
+
[m.FLIP]: {
|
|
1384
|
+
icon: /* @__PURE__ */ (0, b.jsx)(le, {}),
|
|
1385
|
+
label: "Flip"
|
|
1386
|
+
},
|
|
1387
|
+
[m.ROTATE]: {
|
|
1388
|
+
icon: /* @__PURE__ */ (0, b.jsx)(de, {}),
|
|
1389
|
+
label: "Rotate"
|
|
1281
1390
|
}
|
|
1282
|
-
},
|
|
1283
|
-
let { settings:
|
|
1284
|
-
|
|
1285
|
-
|
|
1391
|
+
}, $e = (e) => Qe[e] ?? null, et = () => {
|
|
1392
|
+
let { settings: e, currentAction: t, getLastRotation: n, getLastHistoryItem: r, setCurrentAction: i, setSidebar: a } = P(), o = e?.tools || [], s = t?.name, { width: c, height: l } = r();
|
|
1393
|
+
return { click: (e) => {
|
|
1394
|
+
if (o.includes(e) && s === e) {
|
|
1395
|
+
i(null);
|
|
1286
1396
|
return;
|
|
1287
1397
|
}
|
|
1288
1398
|
switch (e) {
|
|
1289
|
-
case
|
|
1290
|
-
|
|
1291
|
-
name:
|
|
1399
|
+
case m.RESIZE:
|
|
1400
|
+
i({
|
|
1401
|
+
name: m.RESIZE,
|
|
1292
1402
|
args: {
|
|
1293
|
-
width:
|
|
1294
|
-
height:
|
|
1403
|
+
width: c,
|
|
1404
|
+
height: l
|
|
1295
1405
|
}
|
|
1296
1406
|
});
|
|
1297
1407
|
break;
|
|
1298
|
-
case
|
|
1299
|
-
|
|
1300
|
-
name:
|
|
1408
|
+
case m.CROP:
|
|
1409
|
+
i({
|
|
1410
|
+
name: m.CROP,
|
|
1301
1411
|
args: {
|
|
1302
1412
|
id: "freeform",
|
|
1303
|
-
ratio:
|
|
1413
|
+
ratio: c / l,
|
|
1304
1414
|
isFree: !0
|
|
1305
1415
|
}
|
|
1306
1416
|
});
|
|
1307
1417
|
break;
|
|
1308
|
-
case
|
|
1309
|
-
|
|
1310
|
-
name:
|
|
1418
|
+
case m.PRESET_CROP:
|
|
1419
|
+
i({
|
|
1420
|
+
name: m.PRESET_CROP,
|
|
1311
1421
|
args: {
|
|
1312
1422
|
id: "facebook-post",
|
|
1313
1423
|
ratio: 1200 / 630,
|
|
@@ -1319,47 +1429,61 @@ var G = (e, t, n) => Math.max(t, Math.min(n, e)), Le = (e, t) => [[e[0][0] * t[0
|
|
|
1319
1429
|
}
|
|
1320
1430
|
});
|
|
1321
1431
|
break;
|
|
1322
|
-
case
|
|
1323
|
-
|
|
1324
|
-
name:
|
|
1432
|
+
case m.FLIP:
|
|
1433
|
+
i({
|
|
1434
|
+
name: m.FLIP,
|
|
1325
1435
|
args: {
|
|
1326
1436
|
horizontal: !1,
|
|
1327
1437
|
vertical: !1
|
|
1328
1438
|
}
|
|
1329
1439
|
});
|
|
1330
1440
|
break;
|
|
1331
|
-
case
|
|
1332
|
-
|
|
1333
|
-
name:
|
|
1334
|
-
args: { degrees:
|
|
1441
|
+
case m.ROTATE:
|
|
1442
|
+
i({
|
|
1443
|
+
name: m.ROTATE,
|
|
1444
|
+
args: { degrees: n() }
|
|
1335
1445
|
});
|
|
1336
1446
|
break;
|
|
1337
1447
|
}
|
|
1338
|
-
|
|
1339
|
-
};
|
|
1340
|
-
|
|
1448
|
+
a(!1);
|
|
1449
|
+
} };
|
|
1450
|
+
}, J = {
|
|
1451
|
+
sidebar: "_sidebar_1j9gh_1",
|
|
1452
|
+
mobile: "_mobile_1j9gh_9",
|
|
1453
|
+
open: "_open_1j9gh_14",
|
|
1454
|
+
wrapper: "_wrapper_1j9gh_19",
|
|
1455
|
+
item: "_item_1j9gh_23",
|
|
1456
|
+
selected: "_selected_1j9gh_41"
|
|
1457
|
+
}, tt = ({ isMobile: e }) => {
|
|
1458
|
+
let { settings: t, sidebar: n, currentAction: r } = P(), i = t?.tools || [], a = r?.name, { click: o } = et();
|
|
1459
|
+
return /* @__PURE__ */ (0, b.jsx)("nav", {
|
|
1341
1460
|
className: `${J.sidebar} ${e ? J.mobile : ""} ${e && n ? J.open : ""}`,
|
|
1342
|
-
children:
|
|
1343
|
-
|
|
1344
|
-
|
|
1345
|
-
|
|
1346
|
-
|
|
1347
|
-
|
|
1348
|
-
|
|
1349
|
-
|
|
1350
|
-
|
|
1351
|
-
|
|
1461
|
+
children: /* @__PURE__ */ (0, b.jsx)(V, {
|
|
1462
|
+
orientation: "vertical",
|
|
1463
|
+
className: J.tooltip,
|
|
1464
|
+
children: i.map((e) => {
|
|
1465
|
+
let t = $e(e);
|
|
1466
|
+
if (!t) return null;
|
|
1467
|
+
let { icon: n, label: r } = t;
|
|
1468
|
+
return /* @__PURE__ */ (0, b.jsx)("div", {
|
|
1469
|
+
className: `${J.item} ${a === e ? J.selected : ""}`,
|
|
1470
|
+
onClick: () => o(e),
|
|
1471
|
+
"data-tooltip": r,
|
|
1472
|
+
"aria-label": r,
|
|
1473
|
+
children: n
|
|
1474
|
+
}, e);
|
|
1475
|
+
})
|
|
1352
1476
|
})
|
|
1353
1477
|
});
|
|
1354
|
-
},
|
|
1355
|
-
let { originalBlob: e, getLastHistoryItem: t } =
|
|
1356
|
-
return /* @__PURE__ */ (0,
|
|
1357
|
-
className:
|
|
1358
|
-
children: [/* @__PURE__ */ (0,
|
|
1359
|
-
className:
|
|
1360
|
-
children: e ?
|
|
1361
|
-
}), /* @__PURE__ */ (0,
|
|
1362
|
-
className:
|
|
1478
|
+
}, nt = { infobar: "_infobar_ofe91_1" }, rt = (e) => e < 1024 ? `${e} B` : e < 1024 * 1024 ? `${(e / 1024).toFixed(2)} KB` : `${(e / 1024 / 1024).toFixed(2)} MB`, it = () => {
|
|
1479
|
+
let { originalBlob: e, getLastHistoryItem: t } = P(), { width: n, height: r } = t();
|
|
1480
|
+
return /* @__PURE__ */ (0, b.jsxs)("div", {
|
|
1481
|
+
className: nt.infobar,
|
|
1482
|
+
children: [/* @__PURE__ */ (0, b.jsx)("div", {
|
|
1483
|
+
className: nt.filesize,
|
|
1484
|
+
children: e ? rt(e.size) : "0 B"
|
|
1485
|
+
}), /* @__PURE__ */ (0, b.jsxs)("div", {
|
|
1486
|
+
className: nt.sizes,
|
|
1363
1487
|
children: [
|
|
1364
1488
|
n,
|
|
1365
1489
|
" / ",
|
|
@@ -1367,30 +1491,30 @@ var G = (e, t, n) => Math.max(t, Math.min(n, e)), Le = (e, t) => [[e[0][0] * t[0
|
|
|
1367
1491
|
]
|
|
1368
1492
|
})]
|
|
1369
1493
|
});
|
|
1370
|
-
},
|
|
1494
|
+
}, at = (e, t) => {
|
|
1371
1495
|
let n = new CustomEvent("crop-update", { detail: t });
|
|
1372
1496
|
e.dispatchEvent(n);
|
|
1373
|
-
},
|
|
1497
|
+
}, ot = (e, t) => {
|
|
1374
1498
|
let n = new CustomEvent("clip-path-update", { detail: t });
|
|
1375
1499
|
e.dispatchEvent(n);
|
|
1376
|
-
},
|
|
1500
|
+
}, st = (e, t) => {
|
|
1377
1501
|
let n = new CustomEvent("resize-update", { detail: t });
|
|
1378
1502
|
e.dispatchEvent(n);
|
|
1379
|
-
},
|
|
1380
|
-
let r = Math.min(
|
|
1503
|
+
}, ct = 15, lt = 200, ut = 2, dt = (e, t, n) => {
|
|
1504
|
+
let r = Math.min(lt, Math.max(ct, e));
|
|
1381
1505
|
return {
|
|
1382
1506
|
scale: r,
|
|
1383
1507
|
width: Math.round(r / 100 * t),
|
|
1384
1508
|
height: Math.round(r / 100 * n)
|
|
1385
1509
|
};
|
|
1386
|
-
},
|
|
1387
|
-
let { getLastHistoryItem: e, setCurrentAction: t, addToHistory:
|
|
1388
|
-
let t =
|
|
1389
|
-
|
|
1510
|
+
}, ft = () => {
|
|
1511
|
+
let { getLastHistoryItem: e, setCurrentAction: t, addToHistory: n, setSidebar: r, eventBus: a } = P(), { width: s, height: c } = e(), [d, f] = u(s), [p, h] = u(c), [g, _] = u(100), v = l(g), y = l(0), b = l(null), x = i((e) => {
|
|
1512
|
+
let t = dt(e, s, c);
|
|
1513
|
+
f(t.width), h(t.height), _(t.scale), v.current = t.scale, st(a, t.scale);
|
|
1390
1514
|
}, [
|
|
1391
|
-
|
|
1392
|
-
|
|
1393
|
-
|
|
1515
|
+
c,
|
|
1516
|
+
s,
|
|
1517
|
+
a
|
|
1394
1518
|
]), S = (e, t) => {
|
|
1395
1519
|
let n = Number.parseInt(e, 10);
|
|
1396
1520
|
if (!Number.isFinite(n)) {
|
|
@@ -1399,50 +1523,50 @@ var G = (e, t, n) => Math.max(t, Math.min(n, e)), Le = (e, t) => [[e[0][0] * t[0
|
|
|
1399
1523
|
}
|
|
1400
1524
|
x(n / t * 100);
|
|
1401
1525
|
};
|
|
1402
|
-
return
|
|
1526
|
+
return o(() => {
|
|
1403
1527
|
let e = (e) => {
|
|
1404
1528
|
let t = b.current?.parentElement;
|
|
1405
1529
|
return e.target instanceof Node && !!t?.contains(e.target);
|
|
1406
1530
|
}, t = (t) => {
|
|
1407
|
-
e(t) && x(v.current - Math.sign(t.deltaY) *
|
|
1531
|
+
e(t) && x(v.current - Math.sign(t.deltaY) * ut);
|
|
1408
1532
|
}, n = (t) => {
|
|
1409
1533
|
e(t) && (y.current = t.touches[0].clientY);
|
|
1410
1534
|
}, r = (t) => {
|
|
1411
1535
|
if (!e(t)) return;
|
|
1412
1536
|
let n = t.touches[0].clientY, r = y.current - n;
|
|
1413
|
-
Math.abs(r) < 10 || (x(v.current + Math.sign(r) *
|
|
1537
|
+
Math.abs(r) < 10 || (x(v.current + Math.sign(r) * ut), y.current = n);
|
|
1414
1538
|
}, i = new AbortController(), { signal: a } = i;
|
|
1415
1539
|
return window.addEventListener("wheel", t, { signal: a }), window.addEventListener("touchstart", n, { signal: a }), window.addEventListener("touchmove", r, { signal: a }), () => i.abort();
|
|
1416
1540
|
}, [x]), {
|
|
1417
1541
|
resizeRef: b,
|
|
1418
1542
|
width: d,
|
|
1419
|
-
height:
|
|
1543
|
+
height: p,
|
|
1420
1544
|
scale: g,
|
|
1421
|
-
currentWidth:
|
|
1422
|
-
currentHeight:
|
|
1423
|
-
setWidth:
|
|
1545
|
+
currentWidth: s,
|
|
1546
|
+
currentHeight: c,
|
|
1547
|
+
setWidth: f,
|
|
1424
1548
|
setHeight: h,
|
|
1425
1549
|
handleWidthBlur: (e) => {
|
|
1426
|
-
S(e.target.value,
|
|
1550
|
+
S(e.target.value, s);
|
|
1427
1551
|
},
|
|
1428
1552
|
handleHeightBlur: (e) => {
|
|
1429
|
-
S(e.target.value,
|
|
1553
|
+
S(e.target.value, c);
|
|
1430
1554
|
},
|
|
1431
1555
|
save: () => {
|
|
1432
|
-
|
|
1556
|
+
n({
|
|
1433
1557
|
width: d,
|
|
1434
|
-
height:
|
|
1558
|
+
height: p,
|
|
1435
1559
|
action: {
|
|
1436
|
-
name:
|
|
1560
|
+
name: m.RESIZE,
|
|
1437
1561
|
args: {
|
|
1438
1562
|
width: d,
|
|
1439
|
-
height:
|
|
1563
|
+
height: p
|
|
1440
1564
|
}
|
|
1441
1565
|
}
|
|
1442
|
-
}),
|
|
1566
|
+
}), st(a, 100), r(!0);
|
|
1443
1567
|
},
|
|
1444
1568
|
close: () => {
|
|
1445
|
-
|
|
1569
|
+
st(a, 100), t(null), r(!0);
|
|
1446
1570
|
}
|
|
1447
1571
|
};
|
|
1448
1572
|
}, Y = {
|
|
@@ -1450,20 +1574,20 @@ var G = (e, t, n) => Math.max(t, Math.min(n, e)), Le = (e, t) => [[e[0][0] * t[0
|
|
|
1450
1574
|
toolsLock: "_toolsLock_s127g_15",
|
|
1451
1575
|
indicatorWrapper: "_indicatorWrapper_s127g_20",
|
|
1452
1576
|
indicator: "_indicator_s127g_20"
|
|
1453
|
-
},
|
|
1454
|
-
let { resizeRef: e, width: t, height: n, scale: r, currentWidth: i, currentHeight: a, setWidth: o, setHeight: s, handleWidthBlur: c, handleHeightBlur: l, save: u, close: d } =
|
|
1455
|
-
return /* @__PURE__ */ (0,
|
|
1577
|
+
}, pt = () => {
|
|
1578
|
+
let { resizeRef: e, width: t, height: n, scale: r, currentWidth: i, currentHeight: a, setWidth: o, setHeight: s, handleWidthBlur: c, handleHeightBlur: l, save: u, close: d } = ft();
|
|
1579
|
+
return /* @__PURE__ */ (0, b.jsxs)("div", {
|
|
1456
1580
|
ref: e,
|
|
1457
1581
|
className: Y.resize,
|
|
1458
1582
|
children: [
|
|
1459
|
-
/* @__PURE__ */ (0,
|
|
1583
|
+
/* @__PURE__ */ (0, b.jsx)("div", {
|
|
1460
1584
|
className: Y.indicatorWrapper,
|
|
1461
|
-
children: /* @__PURE__ */ (0,
|
|
1585
|
+
children: /* @__PURE__ */ (0, b.jsx)("div", {
|
|
1462
1586
|
className: Y.indicator,
|
|
1463
1587
|
style: { width: `${r / 2}%` }
|
|
1464
1588
|
})
|
|
1465
1589
|
}),
|
|
1466
|
-
/* @__PURE__ */ (0,
|
|
1590
|
+
/* @__PURE__ */ (0, b.jsx)(we, {
|
|
1467
1591
|
value: t,
|
|
1468
1592
|
name: "width",
|
|
1469
1593
|
label: "Width",
|
|
@@ -1471,8 +1595,8 @@ var G = (e, t, n) => Math.max(t, Math.min(n, e)), Le = (e, t) => [[e[0][0] * t[0
|
|
|
1471
1595
|
onChange: (e) => o(Number(e.target.value)),
|
|
1472
1596
|
onBlur: c
|
|
1473
1597
|
}),
|
|
1474
|
-
/* @__PURE__ */ (0,
|
|
1475
|
-
/* @__PURE__ */ (0,
|
|
1598
|
+
/* @__PURE__ */ (0, b.jsx)(te, { className: Y.toolsLock }),
|
|
1599
|
+
/* @__PURE__ */ (0, b.jsx)(we, {
|
|
1476
1600
|
value: n,
|
|
1477
1601
|
name: "height",
|
|
1478
1602
|
label: "Height",
|
|
@@ -1480,19 +1604,19 @@ var G = (e, t, n) => Math.max(t, Math.min(n, e)), Le = (e, t) => [[e[0][0] * t[0
|
|
|
1480
1604
|
onChange: (e) => s(Number(e.target.value)),
|
|
1481
1605
|
onBlur: l
|
|
1482
1606
|
}),
|
|
1483
|
-
/* @__PURE__ */ (0,
|
|
1607
|
+
/* @__PURE__ */ (0, b.jsx)(z, {
|
|
1484
1608
|
onSave: u,
|
|
1485
1609
|
onClose: d,
|
|
1486
1610
|
disabled: t === i && n === a
|
|
1487
1611
|
})
|
|
1488
1612
|
]
|
|
1489
1613
|
});
|
|
1490
|
-
},
|
|
1491
|
-
let { history: t, previewUrl: n, currentAction: r, getLastRotation:
|
|
1492
|
-
|
|
1614
|
+
}, mt = ({ isClipped: e }) => {
|
|
1615
|
+
let { history: t, previewUrl: n, currentAction: r, getLastRotation: i, eventBus: a } = P(), c = l(null), u = l(r?.name), d = l(n);
|
|
1616
|
+
s(() => {
|
|
1493
1617
|
let e = u.current, t = r?.name, i = d.current !== n;
|
|
1494
1618
|
if (u.current = t, d.current = n, !(e && t && e !== t) && !i) return;
|
|
1495
|
-
let a =
|
|
1619
|
+
let a = c.current;
|
|
1496
1620
|
if (!a) return;
|
|
1497
1621
|
let o = [a, ...a.querySelectorAll("*")];
|
|
1498
1622
|
o.forEach((e) => {
|
|
@@ -1502,70 +1626,70 @@ var G = (e, t, n) => Math.max(t, Math.min(n, e)), Le = (e, t) => [[e[0][0] * t[0
|
|
|
1502
1626
|
o.forEach((e) => {
|
|
1503
1627
|
e.style.removeProperty("transition");
|
|
1504
1628
|
});
|
|
1505
|
-
},
|
|
1629
|
+
}, l = requestAnimationFrame(s);
|
|
1506
1630
|
return () => {
|
|
1507
|
-
cancelAnimationFrame(
|
|
1631
|
+
cancelAnimationFrame(l), s();
|
|
1508
1632
|
};
|
|
1509
1633
|
}, [r?.name, n]);
|
|
1510
|
-
let
|
|
1634
|
+
let f = t.items.slice(0, t.pointer + 1);
|
|
1511
1635
|
if (r) {
|
|
1512
1636
|
let { width: e, height: n } = t.items.at(t.pointer);
|
|
1513
|
-
|
|
1514
|
-
...r.name ===
|
|
1637
|
+
f.push({
|
|
1638
|
+
...r.name === m.ROTATE ? Le(e, n, i(), r.args.degrees) : {
|
|
1515
1639
|
width: e,
|
|
1516
1640
|
height: n
|
|
1517
1641
|
},
|
|
1518
1642
|
action: r
|
|
1519
1643
|
});
|
|
1520
1644
|
}
|
|
1521
|
-
let
|
|
1522
|
-
return
|
|
1523
|
-
e &&
|
|
1645
|
+
let p = Je(f);
|
|
1646
|
+
return o(() => {
|
|
1647
|
+
e && c.current && (c.current.style.transition = "none"), r?.name !== m.RESIZE && c.current && (c.current.style.transform = "scale(1)");
|
|
1524
1648
|
let t = (e) => {
|
|
1525
1649
|
let t = e.detail;
|
|
1526
|
-
|
|
1650
|
+
c.current && (c.current.style.transform = `scale(${t / 100})`);
|
|
1527
1651
|
}, n = (t) => {
|
|
1528
1652
|
if (!e) return;
|
|
1529
1653
|
let { x: n, y: r, w: i, h: a } = t.detail;
|
|
1530
|
-
|
|
1654
|
+
c.current && (c.current.style.clipPath = `xywh(${n}% ${r}% ${i}% ${a}%)`);
|
|
1531
1655
|
};
|
|
1532
|
-
return
|
|
1533
|
-
|
|
1656
|
+
return a.addEventListener("resize-update", t), a.addEventListener("clip-path-update", n), () => {
|
|
1657
|
+
a.removeEventListener("resize-update", t), a.removeEventListener("clip-path-update", n);
|
|
1534
1658
|
};
|
|
1535
1659
|
}, [
|
|
1536
1660
|
e,
|
|
1537
1661
|
r?.name,
|
|
1538
|
-
|
|
1662
|
+
a
|
|
1539
1663
|
]), {
|
|
1540
|
-
previewRef:
|
|
1664
|
+
previewRef: c,
|
|
1541
1665
|
previewUrl: n,
|
|
1542
|
-
...
|
|
1666
|
+
...p
|
|
1543
1667
|
};
|
|
1544
1668
|
}, X = {
|
|
1545
1669
|
preview: "_preview_dvanl_1",
|
|
1546
1670
|
rotate: "_rotate_dvanl_12",
|
|
1547
1671
|
flip: "_flip_dvanl_24",
|
|
1548
1672
|
image: "_image_dvanl_32"
|
|
1549
|
-
},
|
|
1550
|
-
let { previewRef: n, previewUrl: r, box: i, boxWidth: a, boxHeight: o, viewWidth: s, viewHeight: c, rotation: l, flipH: u, flipV: d } =
|
|
1551
|
-
return /* @__PURE__ */ (0,
|
|
1673
|
+
}, ht = ({ isClipped: e, style: t = {} }) => {
|
|
1674
|
+
let { previewRef: n, previewUrl: r, box: i, boxWidth: a, boxHeight: o, viewWidth: s, viewHeight: c, rotation: l, flipH: u, flipV: d } = mt({ isClipped: e });
|
|
1675
|
+
return /* @__PURE__ */ (0, b.jsx)("div", {
|
|
1552
1676
|
ref: n,
|
|
1553
1677
|
className: X.preview,
|
|
1554
1678
|
style: {
|
|
1555
1679
|
aspectRatio: `${s} / ${c}`,
|
|
1556
1680
|
...t
|
|
1557
1681
|
},
|
|
1558
|
-
children: /* @__PURE__ */ (0,
|
|
1682
|
+
children: /* @__PURE__ */ (0, b.jsx)("div", {
|
|
1559
1683
|
className: X.rotate,
|
|
1560
1684
|
style: {
|
|
1561
1685
|
width: `${a / s * 100}%`,
|
|
1562
1686
|
height: `${o / c * 100}%`,
|
|
1563
1687
|
transform: `translate(-50%, -50%) rotate(${l}deg)`
|
|
1564
1688
|
},
|
|
1565
|
-
children: /* @__PURE__ */ (0,
|
|
1689
|
+
children: /* @__PURE__ */ (0, b.jsx)("div", {
|
|
1566
1690
|
className: X.flip,
|
|
1567
1691
|
style: { transform: `scale(${u ? -1 : 1}, ${d ? -1 : 1})` },
|
|
1568
|
-
children: /* @__PURE__ */ (0,
|
|
1692
|
+
children: /* @__PURE__ */ (0, b.jsx)("img", {
|
|
1569
1693
|
className: X.image,
|
|
1570
1694
|
src: r,
|
|
1571
1695
|
alt: "Preview Image",
|
|
@@ -1604,162 +1728,168 @@ var G = (e, t, n) => Math.max(t, Math.min(n, e)), Le = (e, t) => [[e[0][0] * t[0
|
|
|
1604
1728
|
infoH: "_infoH_1yhyo_163",
|
|
1605
1729
|
group: "_group_1yhyo_170",
|
|
1606
1730
|
active: "_active_1yhyo_179"
|
|
1607
|
-
},
|
|
1608
|
-
let { getLastHistoryItem: e } =
|
|
1609
|
-
return /* @__PURE__ */ (0,
|
|
1731
|
+
}, gt = () => {
|
|
1732
|
+
let { getLastHistoryItem: e } = P(), t = D(), n = l(null), { handleCropStart: r, initialCrop: i } = Ot({ boxRef: n }), { width: a, height: o } = e(), { x: s, y: c, w: u, h: d } = i;
|
|
1733
|
+
return /* @__PURE__ */ (0, b.jsxs)(b.Fragment, { children: [/* @__PURE__ */ (0, b.jsx)(ht, {
|
|
1610
1734
|
isClipped: !0,
|
|
1611
|
-
style: { clipPath: `xywh(${
|
|
1612
|
-
}), /* @__PURE__ */ (0,
|
|
1735
|
+
style: { clipPath: `xywh(${s}% ${c}% ${u}% ${d}%)` }
|
|
1736
|
+
}), /* @__PURE__ */ (0, b.jsx)("div", {
|
|
1613
1737
|
className: Z.wrapper,
|
|
1614
1738
|
style: { aspectRatio: `${a} / ${o}` },
|
|
1615
|
-
children: /* @__PURE__ */ (0,
|
|
1739
|
+
children: /* @__PURE__ */ (0, b.jsxs)("div", {
|
|
1616
1740
|
ref: n,
|
|
1617
1741
|
className: Z.box,
|
|
1618
1742
|
style: {
|
|
1619
1743
|
width: `${u}%`,
|
|
1620
1744
|
height: `${d}%`,
|
|
1621
|
-
top: `${
|
|
1622
|
-
left: `${
|
|
1745
|
+
top: `${c}%`,
|
|
1746
|
+
left: `${s}%`
|
|
1623
1747
|
},
|
|
1624
|
-
children: [/* @__PURE__ */ (0,
|
|
1748
|
+
children: [/* @__PURE__ */ (0, b.jsx)(xt, {}), t ? /* @__PURE__ */ (0, b.jsx)(kt, { onMouseDown: r }) : /* @__PURE__ */ (0, b.jsxs)(b.Fragment, { children: [/* @__PURE__ */ (0, b.jsx)(St, { onMouseDown: r }), /* @__PURE__ */ (0, b.jsx)(At, {})] })]
|
|
1625
1749
|
})
|
|
1626
1750
|
})] });
|
|
1627
|
-
},
|
|
1751
|
+
}, _t = [
|
|
1752
|
+
{
|
|
1753
|
+
id: "freeform",
|
|
1754
|
+
icon: /* @__PURE__ */ (0, b.jsx)(N, {}),
|
|
1755
|
+
label: "Freeform"
|
|
1756
|
+
},
|
|
1757
|
+
{
|
|
1758
|
+
id: "origin",
|
|
1759
|
+
icon: /* @__PURE__ */ (0, b.jsx)(ie, {}),
|
|
1760
|
+
label: "Original"
|
|
1761
|
+
},
|
|
1762
|
+
{
|
|
1763
|
+
id: "1:1",
|
|
1764
|
+
icon: /* @__PURE__ */ (0, b.jsx)(ae, {}),
|
|
1765
|
+
label: "1 : 1"
|
|
1766
|
+
},
|
|
1767
|
+
{
|
|
1768
|
+
id: "4:3",
|
|
1769
|
+
icon: /* @__PURE__ */ (0, b.jsx)(se, {}),
|
|
1770
|
+
label: "4 : 3"
|
|
1771
|
+
},
|
|
1772
|
+
{
|
|
1773
|
+
id: "16:9",
|
|
1774
|
+
icon: /* @__PURE__ */ (0, b.jsx)(oe, {}),
|
|
1775
|
+
label: "16 : 9"
|
|
1776
|
+
}
|
|
1777
|
+
], vt = ({ value: e, onChange: t }) => /* @__PURE__ */ (0, b.jsx)("div", {
|
|
1628
1778
|
className: Z.group,
|
|
1629
|
-
children:
|
|
1630
|
-
|
|
1779
|
+
children: /* @__PURE__ */ (0, b.jsx)(V, {
|
|
1780
|
+
orientation: "horizontal",
|
|
1781
|
+
className: Z.tooltip,
|
|
1782
|
+
children: _t.map((n) => /* @__PURE__ */ (0, b.jsx)(I, {
|
|
1631
1783
|
variant: "outline",
|
|
1632
|
-
className: `${Z.groupBtn} ${e ===
|
|
1633
|
-
onClick: () => t(
|
|
1634
|
-
|
|
1635
|
-
|
|
1636
|
-
|
|
1637
|
-
|
|
1638
|
-
|
|
1639
|
-
|
|
1640
|
-
|
|
1641
|
-
}),
|
|
1642
|
-
/* @__PURE__ */ (0, v.jsx)(L, {
|
|
1643
|
-
variant: "outline",
|
|
1644
|
-
className: `${Z.groupBtn} ${e === "1:1" ? Z.active : ""}`,
|
|
1645
|
-
onClick: () => t("1:1"),
|
|
1646
|
-
children: /* @__PURE__ */ (0, v.jsx)(M, {})
|
|
1647
|
-
}),
|
|
1648
|
-
/* @__PURE__ */ (0, v.jsx)(L, {
|
|
1649
|
-
variant: "outline",
|
|
1650
|
-
className: `${Z.groupBtn} ${e === "4:3" ? Z.active : ""}`,
|
|
1651
|
-
onClick: () => t("4:3"),
|
|
1652
|
-
children: /* @__PURE__ */ (0, v.jsx)(ae, {})
|
|
1653
|
-
}),
|
|
1654
|
-
/* @__PURE__ */ (0, v.jsx)(L, {
|
|
1655
|
-
variant: "outline",
|
|
1656
|
-
className: `${Z.groupBtn} ${e === "16:9" ? Z.active : ""}`,
|
|
1657
|
-
onClick: () => t("16:9"),
|
|
1658
|
-
children: /* @__PURE__ */ (0, v.jsx)(N, {})
|
|
1659
|
-
})
|
|
1660
|
-
]
|
|
1661
|
-
}), dt = () => {
|
|
1662
|
-
let { setCurrentAction: e, currentAction: t, getLastHistoryItem: n, addToHistory: r, setSidebar: a, eventBus: o } = F(), { width: c, height: l } = n(), { name: u, args: d } = t || {}, p = u === f.CROP ? d?.id : "", m = c / l, h = s({
|
|
1784
|
+
className: `${Z.groupBtn} ${e === n.id ? Z.active : ""}`,
|
|
1785
|
+
onClick: () => t(n.id),
|
|
1786
|
+
"aria-label": n.label,
|
|
1787
|
+
"data-tooltip": n.label,
|
|
1788
|
+
children: n.icon
|
|
1789
|
+
}, n.id))
|
|
1790
|
+
})
|
|
1791
|
+
}), yt = () => {
|
|
1792
|
+
let { setCurrentAction: e, currentAction: t, getLastHistoryItem: n, addToHistory: r, setSidebar: i, eventBus: a } = P(), { width: s, height: c } = n(), { name: u, args: d } = t || {}, f = u === m.CROP ? d?.id : "", p = s / c, h = l({
|
|
1663
1793
|
x: 0,
|
|
1664
1794
|
y: 0,
|
|
1665
1795
|
w: 0,
|
|
1666
1796
|
h: 0
|
|
1667
1797
|
});
|
|
1668
|
-
return
|
|
1669
|
-
if (t?.name !==
|
|
1670
|
-
let e = U(t.args.ratio,
|
|
1798
|
+
return o(() => {
|
|
1799
|
+
if (t?.name !== m.CROP) return;
|
|
1800
|
+
let e = U(t.args.ratio, s, c);
|
|
1671
1801
|
h.current = e;
|
|
1672
1802
|
let n = (e) => {
|
|
1673
1803
|
h.current = e.detail;
|
|
1674
1804
|
};
|
|
1675
|
-
return
|
|
1676
|
-
|
|
1805
|
+
return a.addEventListener("clip-path-update", n), () => {
|
|
1806
|
+
a.removeEventListener("clip-path-update", n);
|
|
1677
1807
|
};
|
|
1678
1808
|
}, [
|
|
1679
1809
|
t,
|
|
1810
|
+
s,
|
|
1680
1811
|
c,
|
|
1681
|
-
|
|
1682
|
-
o
|
|
1812
|
+
a
|
|
1683
1813
|
]), {
|
|
1684
|
-
currentValue:
|
|
1814
|
+
currentValue: f,
|
|
1685
1815
|
handleChange: (t) => {
|
|
1686
|
-
t !==
|
|
1687
|
-
name:
|
|
1816
|
+
t !== f && (e({
|
|
1817
|
+
name: m.CROP,
|
|
1688
1818
|
args: {
|
|
1689
1819
|
id: t,
|
|
1690
|
-
ratio: /^\d+:\d+$/.test(t) ? t.split(":").map(Number).reduce((e, t) => e / t) :
|
|
1820
|
+
ratio: /^\d+:\d+$/.test(t) ? t.split(":").map(Number).reduce((e, t) => e / t) : p,
|
|
1691
1821
|
isFree: t === "freeform"
|
|
1692
1822
|
}
|
|
1693
|
-
}),
|
|
1823
|
+
}), i(!0));
|
|
1694
1824
|
},
|
|
1695
1825
|
handleSave: () => {
|
|
1696
|
-
if (!t || t.name !==
|
|
1697
|
-
let e = t.args?.preset?.width || Math.round(
|
|
1826
|
+
if (!t || t.name !== m.CROP) return;
|
|
1827
|
+
let e = t.args?.preset?.width || Math.round(s * h.current.w / 100), n = t.args?.preset?.height || Math.round(c * h.current.h / 100);
|
|
1698
1828
|
r({
|
|
1699
1829
|
width: e,
|
|
1700
1830
|
height: n,
|
|
1701
1831
|
action: {
|
|
1702
|
-
name:
|
|
1832
|
+
name: m.CROP,
|
|
1703
1833
|
args: {
|
|
1704
1834
|
...t.args,
|
|
1705
1835
|
...h.current
|
|
1706
1836
|
}
|
|
1707
1837
|
}
|
|
1708
|
-
}),
|
|
1838
|
+
}), i(!0);
|
|
1709
1839
|
},
|
|
1710
1840
|
handleClose: () => {
|
|
1711
|
-
e(null),
|
|
1841
|
+
e(null), i(!0);
|
|
1712
1842
|
}
|
|
1713
1843
|
};
|
|
1714
|
-
},
|
|
1715
|
-
let { currentValue: e, handleChange: t, handleSave: n, handleClose: r } =
|
|
1716
|
-
return /* @__PURE__ */ (0,
|
|
1844
|
+
}, bt = () => {
|
|
1845
|
+
let { currentValue: e, handleChange: t, handleSave: n, handleClose: r } = yt();
|
|
1846
|
+
return /* @__PURE__ */ (0, b.jsxs)("div", {
|
|
1717
1847
|
className: Z.tools,
|
|
1718
|
-
children: [/* @__PURE__ */ (0,
|
|
1848
|
+
children: [/* @__PURE__ */ (0, b.jsx)(vt, {
|
|
1719
1849
|
value: e,
|
|
1720
1850
|
onChange: t
|
|
1721
|
-
}), /* @__PURE__ */ (0,
|
|
1851
|
+
}), /* @__PURE__ */ (0, b.jsx)(z, {
|
|
1722
1852
|
onSave: n,
|
|
1723
1853
|
onClose: r
|
|
1724
1854
|
})]
|
|
1725
1855
|
});
|
|
1726
|
-
},
|
|
1856
|
+
}, xt = () => /* @__PURE__ */ (0, b.jsxs)("div", {
|
|
1727
1857
|
className: Z.linesBox,
|
|
1728
|
-
children: [/* @__PURE__ */ (0,
|
|
1729
|
-
}),
|
|
1730
|
-
/* @__PURE__ */ (0,
|
|
1858
|
+
children: [/* @__PURE__ */ (0, b.jsx)("span", { className: `${Z.line} ${Z.lineV}` }), /* @__PURE__ */ (0, b.jsx)("span", { className: `${Z.line} ${Z.lineH}` })]
|
|
1859
|
+
}), St = ({ onMouseDown: e }) => /* @__PURE__ */ (0, b.jsxs)(b.Fragment, { children: [
|
|
1860
|
+
/* @__PURE__ */ (0, b.jsx)("div", {
|
|
1731
1861
|
className: `${Z.pointer} ${Z.pointerTopLeft}`,
|
|
1732
1862
|
onMouseDown: (t) => e(t, "tl", "nwse")
|
|
1733
1863
|
}),
|
|
1734
|
-
/* @__PURE__ */ (0,
|
|
1864
|
+
/* @__PURE__ */ (0, b.jsx)("div", {
|
|
1735
1865
|
className: `${Z.pointer} ${Z.pointerTopRight}`,
|
|
1736
1866
|
onMouseDown: (t) => e(t, "tr", "nesw")
|
|
1737
1867
|
}),
|
|
1738
|
-
/* @__PURE__ */ (0,
|
|
1868
|
+
/* @__PURE__ */ (0, b.jsx)("div", {
|
|
1739
1869
|
className: `${Z.pointer} ${Z.pointerBottomRight}`,
|
|
1740
1870
|
onMouseDown: (t) => e(t, "br", "nwse")
|
|
1741
1871
|
}),
|
|
1742
|
-
/* @__PURE__ */ (0,
|
|
1872
|
+
/* @__PURE__ */ (0, b.jsx)("div", {
|
|
1743
1873
|
className: `${Z.pointer} ${Z.pointerBottomLeft}`,
|
|
1744
1874
|
onMouseDown: (t) => e(t, "bl", "nesw")
|
|
1745
1875
|
})
|
|
1746
1876
|
] });
|
|
1747
1877
|
//#endregion
|
|
1748
1878
|
//#region src/shared/components/Pixedi/crop/useCropInteraction.ts
|
|
1749
|
-
function
|
|
1879
|
+
function Ct(e, t, n) {
|
|
1750
1880
|
return Math.min(Math.max(e, t), n);
|
|
1751
1881
|
}
|
|
1752
|
-
function
|
|
1882
|
+
function wt(e, { x: t, y: n, w: r, h: i }) {
|
|
1753
1883
|
e.style.left = `${t}%`, e.style.top = `${n}%`, e.style.width = `${r}%`, e.style.height = `${i}%`;
|
|
1754
1884
|
}
|
|
1755
|
-
function
|
|
1885
|
+
function Tt(e) {
|
|
1756
1886
|
let { width: t, height: n } = e.getBoundingClientRect();
|
|
1757
1887
|
return {
|
|
1758
1888
|
frameW: t,
|
|
1759
1889
|
frameH: n
|
|
1760
1890
|
};
|
|
1761
1891
|
}
|
|
1762
|
-
function
|
|
1892
|
+
function Et({ x: e, y: t, w: n, h: r }, i, a) {
|
|
1763
1893
|
return {
|
|
1764
1894
|
x: e / 100 * i,
|
|
1765
1895
|
y: t / 100 * a,
|
|
@@ -1767,7 +1897,7 @@ function vt({ x: e, y: t, w: n, h: r }, i, a) {
|
|
|
1767
1897
|
h: r / 100 * a
|
|
1768
1898
|
};
|
|
1769
1899
|
}
|
|
1770
|
-
function
|
|
1900
|
+
function Dt({ x: e, y: t, w: n, h: r }, i, a) {
|
|
1771
1901
|
return {
|
|
1772
1902
|
x: e / i * 100,
|
|
1773
1903
|
y: t / a * 100,
|
|
@@ -1775,22 +1905,22 @@ function yt({ x: e, y: t, w: n, h: r }, i, a) {
|
|
|
1775
1905
|
h: r / a * 100
|
|
1776
1906
|
};
|
|
1777
1907
|
}
|
|
1778
|
-
var
|
|
1779
|
-
let { currentAction: t, getLastHistoryItem: n, eventBus: r } =
|
|
1908
|
+
var Ot = ({ boxRef: e }) => {
|
|
1909
|
+
let { currentAction: t, getLastHistoryItem: n, eventBus: r } = P(), i = D(), { width: a, height: s } = n(), u = t?.name === m.CROP || t?.name === m.PRESET_CROP, d = u ? t.args.ratio : 1, f = !u || t.args.isFree, p = c(() => U(d, a, s), [
|
|
1780
1910
|
d,
|
|
1781
|
-
|
|
1782
|
-
|
|
1783
|
-
]), h =
|
|
1784
|
-
return
|
|
1785
|
-
_.current =
|
|
1786
|
-
}, [
|
|
1911
|
+
a,
|
|
1912
|
+
s
|
|
1913
|
+
]), h = l(null), g = l(""), _ = l(p), v = l(p);
|
|
1914
|
+
return o(() => {
|
|
1915
|
+
_.current = p, ot(r, p);
|
|
1916
|
+
}, [p, r]), o(() => {
|
|
1787
1917
|
let t = (e, t) => {
|
|
1788
|
-
_.current = t,
|
|
1789
|
-
x: Math.round(t.x / 100 *
|
|
1790
|
-
y: Math.round(t.y / 100 *
|
|
1791
|
-
w: Math.round(t.w / 100 *
|
|
1792
|
-
h: Math.round(t.h / 100 *
|
|
1793
|
-
}),
|
|
1918
|
+
_.current = t, wt(e, t), at(r, {
|
|
1919
|
+
x: Math.round(t.x / 100 * a),
|
|
1920
|
+
y: Math.round(t.y / 100 * s),
|
|
1921
|
+
w: Math.round(t.w / 100 * a),
|
|
1922
|
+
h: Math.round(t.h / 100 * s)
|
|
1923
|
+
}), ot(r, t);
|
|
1794
1924
|
}, n = (e) => {
|
|
1795
1925
|
e.preventDefault(), v.current = _.current;
|
|
1796
1926
|
let t = "clientX" in e ? e.clientX : e.touches[0].clientX, n = "clientY" in e ? e.clientY : e.touches[0].clientY;
|
|
@@ -1803,126 +1933,126 @@ var bt = ({ boxRef: e }) => {
|
|
|
1803
1933
|
t.preventDefault();
|
|
1804
1934
|
let n = e.current, r = n.parentElement;
|
|
1805
1935
|
if (!r) return;
|
|
1806
|
-
let { frameW: i, frameH:
|
|
1936
|
+
let { frameW: i, frameH: a } = Tt(r);
|
|
1807
1937
|
if (g.current) {
|
|
1808
|
-
|
|
1938
|
+
o(t, n, i, a);
|
|
1809
1939
|
return;
|
|
1810
1940
|
}
|
|
1811
|
-
|
|
1812
|
-
}, a = (e, n, r, i) => {
|
|
1813
|
-
if (!h.current) return;
|
|
1814
|
-
let a = "clientX" in e ? e.clientX : e.touches[0].clientX, o = "clientY" in e ? e.clientY : e.touches[0].clientY, s = yt(Ae(g.current, p, d, h.current.x, h.current.y, a, o, r, i, vt(v.current, r, i), vt(_.current, r, i)), r, i);
|
|
1815
|
-
t(n, p ? s : je(s, d, c, l));
|
|
1941
|
+
c(t, n, i, a);
|
|
1816
1942
|
}, o = (e, n, r, i) => {
|
|
1943
|
+
if (!h.current) return;
|
|
1944
|
+
let o = "clientX" in e ? e.clientX : e.touches[0].clientX, c = "clientY" in e ? e.clientY : e.touches[0].clientY, l = Dt(Fe(g.current, f, d, h.current.x, h.current.y, o, c, r, i, Et(v.current, r, i), Et(_.current, r, i)), r, i);
|
|
1945
|
+
t(n, f ? l : Ie(l, d, a, s));
|
|
1946
|
+
}, c = (e, n, r, i) => {
|
|
1817
1947
|
if (!h.current) return;
|
|
1818
1948
|
let { x: a, y: o, w: s, h: c } = v.current, l = "clientX" in e ? e.clientX : e.touches[0].clientX, u = "clientY" in e ? e.clientY : e.touches[0].clientY, d = (l - h.current.x) / r * 100, f = (u - h.current.y) / i * 100;
|
|
1819
1949
|
t(n, {
|
|
1820
|
-
x:
|
|
1821
|
-
y:
|
|
1950
|
+
x: Ct(a + d, 0, Math.max(0, 100 - s)),
|
|
1951
|
+
y: Ct(o + f, 0, Math.max(0, 100 - c)),
|
|
1822
1952
|
w: s,
|
|
1823
1953
|
h: c
|
|
1824
1954
|
});
|
|
1825
|
-
},
|
|
1955
|
+
}, l = () => {
|
|
1826
1956
|
e.current && (h.current = null, g.current = "", e.current.style.cursor = "move", document.body.style.cursor = "auto");
|
|
1827
1957
|
};
|
|
1828
1958
|
if (!e.current) return;
|
|
1829
|
-
let u = new AbortController(), { signal:
|
|
1830
|
-
return e.current.addEventListener("mousedown", n, { signal:
|
|
1831
|
-
signal:
|
|
1959
|
+
let u = new AbortController(), { signal: p } = u;
|
|
1960
|
+
return e.current.addEventListener("mousedown", n, { signal: p }), e.current.addEventListener("touchstart", n, {
|
|
1961
|
+
signal: p,
|
|
1832
1962
|
passive: !1
|
|
1833
|
-
}), document.addEventListener("mousemove", i, { signal:
|
|
1834
|
-
signal:
|
|
1963
|
+
}), document.addEventListener("mousemove", i, { signal: p }), document.addEventListener("touchmove", i, {
|
|
1964
|
+
signal: p,
|
|
1835
1965
|
passive: !1
|
|
1836
|
-
}), document.addEventListener("mouseup",
|
|
1966
|
+
}), document.addEventListener("mouseup", l, { signal: p }), document.addEventListener("touchend", l, { signal: p }), () => u.abort();
|
|
1837
1967
|
}, [
|
|
1838
|
-
|
|
1968
|
+
f,
|
|
1839
1969
|
d,
|
|
1840
|
-
|
|
1841
|
-
|
|
1970
|
+
a,
|
|
1971
|
+
s,
|
|
1842
1972
|
e,
|
|
1843
1973
|
r
|
|
1844
1974
|
]), {
|
|
1845
1975
|
handleCropStart: (t, n, r) => {
|
|
1846
1976
|
if (!e.current) return;
|
|
1847
1977
|
t.stopPropagation(), t.preventDefault(), v.current = _.current;
|
|
1848
|
-
let
|
|
1978
|
+
let a = "clientX" in t ? t.clientX : t.touches[0].clientX, o = "clientY" in t ? t.clientY : t.touches[0].clientY;
|
|
1849
1979
|
h.current = {
|
|
1850
|
-
x:
|
|
1980
|
+
x: a,
|
|
1851
1981
|
y: o
|
|
1852
|
-
}, g.current = n,
|
|
1982
|
+
}, g.current = n, i || (e.current.style.cursor = `${r}-resize`, document.body.style.cursor = `${r}-resize`);
|
|
1853
1983
|
},
|
|
1854
|
-
initialCrop:
|
|
1984
|
+
initialCrop: p
|
|
1855
1985
|
};
|
|
1856
|
-
},
|
|
1986
|
+
}, kt = ({ onMouseDown: e }) => /* @__PURE__ */ (0, b.jsx)("div", {
|
|
1857
1987
|
className: Z.mobileBorder,
|
|
1858
|
-
children: /* @__PURE__ */ (0,
|
|
1988
|
+
children: /* @__PURE__ */ (0, b.jsx)("div", {
|
|
1859
1989
|
className: Z.mobilePointer,
|
|
1860
1990
|
onTouchStart: (t) => e(t, "br", "nwse")
|
|
1861
1991
|
})
|
|
1862
|
-
}),
|
|
1863
|
-
let e =
|
|
1864
|
-
return
|
|
1865
|
-
if (!(
|
|
1866
|
-
let { xP:
|
|
1867
|
-
e.current && (e.current.textContent =
|
|
1868
|
-
let
|
|
1992
|
+
}), At = () => {
|
|
1993
|
+
let e = l(null), t = l(null), n = l(null), r = l(null), { currentAction: i, getLastHistoryItem: a, eventBus: s } = P(), { width: c, height: u } = a();
|
|
1994
|
+
return o(() => {
|
|
1995
|
+
if (!(i?.name === m.CROP || i?.name === m.PRESET_CROP)) return;
|
|
1996
|
+
let { xP: a, yP: o, wP: l, hP: d } = U(i.args.ratio, c, u);
|
|
1997
|
+
e.current && (e.current.textContent = a.toString()), t.current && (t.current.textContent = o.toString()), n.current && (n.current.textContent = l.toString()), r.current && (r.current.textContent = d.toString());
|
|
1998
|
+
let f = (i) => {
|
|
1869
1999
|
let { x: a, y: o, w: s, h: c } = i.detail;
|
|
1870
2000
|
e.current && (e.current.textContent = a.toString()), t.current && (t.current.textContent = o.toString()), n.current && (n.current.textContent = s.toString()), r.current && (r.current.textContent = c.toString());
|
|
1871
2001
|
};
|
|
1872
|
-
return
|
|
1873
|
-
|
|
2002
|
+
return s.addEventListener("crop-update", f), () => {
|
|
2003
|
+
s.removeEventListener("crop-update", f);
|
|
1874
2004
|
};
|
|
1875
2005
|
}, [
|
|
1876
|
-
|
|
2006
|
+
i,
|
|
1877
2007
|
u,
|
|
1878
|
-
|
|
1879
|
-
|
|
1880
|
-
]), /* @__PURE__ */ (0,
|
|
1881
|
-
/* @__PURE__ */ (0,
|
|
2008
|
+
c,
|
|
2009
|
+
s
|
|
2010
|
+
]), /* @__PURE__ */ (0, b.jsxs)(b.Fragment, { children: [
|
|
2011
|
+
/* @__PURE__ */ (0, b.jsx)("div", {
|
|
1882
2012
|
className: `${Z.info} ${Z.infoX}`,
|
|
1883
|
-
children: /* @__PURE__ */ (0,
|
|
2013
|
+
children: /* @__PURE__ */ (0, b.jsx)("b", { ref: e })
|
|
1884
2014
|
}),
|
|
1885
|
-
/* @__PURE__ */ (0,
|
|
2015
|
+
/* @__PURE__ */ (0, b.jsx)("div", {
|
|
1886
2016
|
className: `${Z.info} ${Z.infoY}`,
|
|
1887
|
-
children: /* @__PURE__ */ (0,
|
|
2017
|
+
children: /* @__PURE__ */ (0, b.jsx)("b", { ref: t })
|
|
1888
2018
|
}),
|
|
1889
|
-
/* @__PURE__ */ (0,
|
|
2019
|
+
/* @__PURE__ */ (0, b.jsx)("div", {
|
|
1890
2020
|
className: `${Z.info} ${Z.infoW}`,
|
|
1891
|
-
children: /* @__PURE__ */ (0,
|
|
2021
|
+
children: /* @__PURE__ */ (0, b.jsx)("b", { ref: n })
|
|
1892
2022
|
}),
|
|
1893
|
-
/* @__PURE__ */ (0,
|
|
2023
|
+
/* @__PURE__ */ (0, b.jsx)("div", {
|
|
1894
2024
|
className: `${Z.info} ${Z.infoH}`,
|
|
1895
|
-
children: /* @__PURE__ */ (0,
|
|
2025
|
+
children: /* @__PURE__ */ (0, b.jsx)("b", { ref: r })
|
|
1896
2026
|
})
|
|
1897
2027
|
] });
|
|
1898
|
-
},
|
|
1899
|
-
let { currentAction: e, getLastHistoryItem: t, addToHistory: n, setSidebar: r, setCurrentAction:
|
|
2028
|
+
}, jt = ke.map((e) => e.options).flat(), Mt = () => jt, Nt = () => {
|
|
2029
|
+
let { currentAction: e, getLastHistoryItem: t, addToHistory: n, setSidebar: r, setCurrentAction: i, eventBus: a } = P(), { width: s, height: c } = t(), u = e?.name === m.PRESET_CROP && jt.some((t) => t.value === e.args.id) ? e.args.id : "", d = l({
|
|
1900
2030
|
x: 0,
|
|
1901
2031
|
y: 0,
|
|
1902
2032
|
w: 0,
|
|
1903
2033
|
h: 0
|
|
1904
2034
|
});
|
|
1905
|
-
return
|
|
1906
|
-
if (e?.name !==
|
|
1907
|
-
let t = U(e.args.ratio,
|
|
2035
|
+
return o(() => {
|
|
2036
|
+
if (e?.name !== m.PRESET_CROP) return;
|
|
2037
|
+
let t = U(e.args.ratio, s, c);
|
|
1908
2038
|
d.current = t;
|
|
1909
2039
|
let n = (e) => {
|
|
1910
2040
|
d.current = e.detail;
|
|
1911
2041
|
};
|
|
1912
|
-
return
|
|
1913
|
-
|
|
2042
|
+
return a.addEventListener("clip-path-update", n), () => {
|
|
2043
|
+
a.removeEventListener("clip-path-update", n);
|
|
1914
2044
|
};
|
|
1915
2045
|
}, [
|
|
1916
2046
|
e,
|
|
2047
|
+
s,
|
|
1917
2048
|
c,
|
|
1918
|
-
|
|
1919
|
-
o
|
|
2049
|
+
a
|
|
1920
2050
|
]), {
|
|
1921
2051
|
currentValue: u,
|
|
1922
|
-
presetsData:
|
|
2052
|
+
presetsData: ke,
|
|
1923
2053
|
handleChange: (e) => {
|
|
1924
2054
|
if (!e) return;
|
|
1925
|
-
let t =
|
|
2055
|
+
let t = Mt().find((t) => t.value === e);
|
|
1926
2056
|
if (!t) return;
|
|
1927
2057
|
let n = {
|
|
1928
2058
|
id: e,
|
|
@@ -1933,17 +2063,17 @@ var bt = ({ boxRef: e }) => {
|
|
|
1933
2063
|
height: t.h
|
|
1934
2064
|
}
|
|
1935
2065
|
};
|
|
1936
|
-
|
|
1937
|
-
name:
|
|
2066
|
+
i({
|
|
2067
|
+
name: m.PRESET_CROP,
|
|
1938
2068
|
args: n
|
|
1939
2069
|
});
|
|
1940
2070
|
},
|
|
1941
2071
|
handleSave: () => {
|
|
1942
|
-
!e || e.name !==
|
|
2072
|
+
!e || e.name !== m.PRESET_CROP || (n({
|
|
1943
2073
|
width: e.args?.preset?.width || 0,
|
|
1944
2074
|
height: e.args?.preset?.height || 0,
|
|
1945
2075
|
action: {
|
|
1946
|
-
name:
|
|
2076
|
+
name: m.CROP,
|
|
1947
2077
|
args: {
|
|
1948
2078
|
...e.args,
|
|
1949
2079
|
...d.current
|
|
@@ -1952,31 +2082,31 @@ var bt = ({ boxRef: e }) => {
|
|
|
1952
2082
|
}), r(!0));
|
|
1953
2083
|
},
|
|
1954
2084
|
handleClose: () => {
|
|
1955
|
-
|
|
2085
|
+
i(null), r(!0);
|
|
1956
2086
|
}
|
|
1957
2087
|
};
|
|
1958
|
-
},
|
|
2088
|
+
}, Pt = {
|
|
1959
2089
|
preset: "_preset_1rbuc_1",
|
|
1960
2090
|
select: "_select_1rbuc_14"
|
|
1961
|
-
},
|
|
1962
|
-
let { currentValue: e, presetsData: t, handleChange: n, handleSave: r, handleClose: i } =
|
|
1963
|
-
return /* @__PURE__ */ (0,
|
|
1964
|
-
className:
|
|
1965
|
-
children: [/* @__PURE__ */ (0,
|
|
2091
|
+
}, Ft = () => {
|
|
2092
|
+
let { currentValue: e, presetsData: t, handleChange: n, handleSave: r, handleClose: i } = Nt();
|
|
2093
|
+
return /* @__PURE__ */ (0, b.jsxs)("div", {
|
|
2094
|
+
className: Pt.preset,
|
|
2095
|
+
children: [/* @__PURE__ */ (0, b.jsx)(be, {
|
|
1966
2096
|
value: e,
|
|
1967
2097
|
placeholder: "Select a preset",
|
|
1968
2098
|
onChange: n,
|
|
1969
2099
|
items: t,
|
|
1970
|
-
className:
|
|
1971
|
-
}), /* @__PURE__ */ (0,
|
|
2100
|
+
className: Pt.select
|
|
2101
|
+
}), /* @__PURE__ */ (0, b.jsx)(z, {
|
|
1972
2102
|
onSave: r,
|
|
1973
2103
|
onClose: i
|
|
1974
2104
|
})]
|
|
1975
2105
|
});
|
|
1976
|
-
},
|
|
1977
|
-
let { getLastHistoryItem: e, setCurrentAction: t, addToHistory: n, setSidebar: r } =
|
|
2106
|
+
}, It = () => {
|
|
2107
|
+
let { getLastHistoryItem: e, setCurrentAction: t, addToHistory: n, setSidebar: r } = P(), { width: i, height: a } = e(), [o, s] = u(!1), [c, l] = u(!1), d = (e, n) => {
|
|
1978
2108
|
t({
|
|
1979
|
-
name:
|
|
2109
|
+
name: m.FLIP,
|
|
1980
2110
|
args: {
|
|
1981
2111
|
horizontal: e,
|
|
1982
2112
|
vertical: n
|
|
@@ -1985,24 +2115,24 @@ var bt = ({ boxRef: e }) => {
|
|
|
1985
2115
|
};
|
|
1986
2116
|
return {
|
|
1987
2117
|
flipHorizontal: o,
|
|
1988
|
-
flipVertical:
|
|
2118
|
+
flipVertical: c,
|
|
1989
2119
|
handleFlipHorizontal: () => {
|
|
1990
2120
|
let e = !o;
|
|
1991
|
-
s(e), d(e,
|
|
2121
|
+
s(e), d(e, c);
|
|
1992
2122
|
},
|
|
1993
2123
|
handleFlipVertical: () => {
|
|
1994
|
-
let e = !
|
|
1995
|
-
|
|
2124
|
+
let e = !c;
|
|
2125
|
+
l(e), d(o, e);
|
|
1996
2126
|
},
|
|
1997
2127
|
handleSave: () => {
|
|
1998
2128
|
n({
|
|
1999
2129
|
width: i,
|
|
2000
2130
|
height: a,
|
|
2001
2131
|
action: {
|
|
2002
|
-
name:
|
|
2132
|
+
name: m.FLIP,
|
|
2003
2133
|
args: {
|
|
2004
2134
|
horizontal: o,
|
|
2005
|
-
vertical:
|
|
2135
|
+
vertical: c
|
|
2006
2136
|
}
|
|
2007
2137
|
}
|
|
2008
2138
|
}), r(!0);
|
|
@@ -2015,43 +2145,51 @@ var bt = ({ boxRef: e }) => {
|
|
|
2015
2145
|
flip: "_flip_17ic5_1",
|
|
2016
2146
|
btnH: "_btnH_17ic5_14",
|
|
2017
2147
|
btnV: "_btnV_17ic5_20"
|
|
2018
|
-
},
|
|
2019
|
-
let { flipHorizontal: e, flipVertical: t, handleFlipHorizontal: n, handleFlipVertical: r, handleSave: i, handleClose: a } =
|
|
2020
|
-
return /* @__PURE__ */ (0,
|
|
2148
|
+
}, Lt = () => {
|
|
2149
|
+
let { flipHorizontal: e, flipVertical: t, handleFlipHorizontal: n, handleFlipVertical: r, handleSave: i, handleClose: a } = It();
|
|
2150
|
+
return /* @__PURE__ */ (0, b.jsxs)("div", {
|
|
2021
2151
|
className: Q.flip,
|
|
2022
|
-
children: [/* @__PURE__ */ (0,
|
|
2152
|
+
children: [/* @__PURE__ */ (0, b.jsx)("div", {
|
|
2023
2153
|
className: Q.scGroup,
|
|
2024
|
-
children:
|
|
2025
|
-
|
|
2026
|
-
className: Q.
|
|
2027
|
-
|
|
2028
|
-
|
|
2029
|
-
|
|
2030
|
-
|
|
2031
|
-
|
|
2032
|
-
|
|
2033
|
-
|
|
2034
|
-
|
|
2035
|
-
|
|
2154
|
+
children: /* @__PURE__ */ (0, b.jsxs)(V, {
|
|
2155
|
+
orientation: "horizontal",
|
|
2156
|
+
className: Q.tooltip,
|
|
2157
|
+
children: [/* @__PURE__ */ (0, b.jsx)(I, {
|
|
2158
|
+
variant: "outline",
|
|
2159
|
+
className: Q.btnH,
|
|
2160
|
+
onClick: n,
|
|
2161
|
+
"aria-label": "Horizontal",
|
|
2162
|
+
"data-tooltip": "Horizontal",
|
|
2163
|
+
children: /* @__PURE__ */ (0, b.jsx)(le, { style: { color: e ? "var(--accent-blue)" : "var(--foreground)" } })
|
|
2164
|
+
}), /* @__PURE__ */ (0, b.jsx)(I, {
|
|
2165
|
+
variant: "outline",
|
|
2166
|
+
className: Q.btnV,
|
|
2167
|
+
onClick: r,
|
|
2168
|
+
"aria-label": "Vertical",
|
|
2169
|
+
"data-tooltip": "Vertical",
|
|
2170
|
+
children: /* @__PURE__ */ (0, b.jsx)(ue, { style: { color: t ? "var(--accent-blue)" : "var(--foreground)" } })
|
|
2171
|
+
})]
|
|
2172
|
+
})
|
|
2173
|
+
}), /* @__PURE__ */ (0, b.jsx)(z, {
|
|
2036
2174
|
disabled: !e && !t,
|
|
2037
2175
|
onSave: i,
|
|
2038
2176
|
onClose: a
|
|
2039
2177
|
})]
|
|
2040
2178
|
});
|
|
2041
|
-
},
|
|
2042
|
-
let { getLastRotation: e, getLastHistoryItem: t, addToHistory: n, setSidebar: r, setCurrentAction: i } =
|
|
2179
|
+
}, Rt = () => {
|
|
2180
|
+
let { getLastRotation: e, getLastHistoryItem: t, addToHistory: n, setSidebar: r, setCurrentAction: i } = P(), { width: a, height: o } = t(), s = e(), c = l(s), u = l(s);
|
|
2043
2181
|
return {
|
|
2044
2182
|
handleRotate: (e) => {
|
|
2045
2183
|
u.current += e, i({
|
|
2046
|
-
name:
|
|
2184
|
+
name: m.ROTATE,
|
|
2047
2185
|
args: { degrees: u.current }
|
|
2048
2186
|
});
|
|
2049
2187
|
},
|
|
2050
2188
|
handleSave: () => {
|
|
2051
2189
|
n({
|
|
2052
|
-
...
|
|
2190
|
+
...Le(a, o, c.current, u.current),
|
|
2053
2191
|
action: {
|
|
2054
|
-
name:
|
|
2192
|
+
name: m.ROTATE,
|
|
2055
2193
|
args: { degrees: u.current }
|
|
2056
2194
|
}
|
|
2057
2195
|
}), r(!0);
|
|
@@ -2064,107 +2202,115 @@ var bt = ({ boxRef: e }) => {
|
|
|
2064
2202
|
rotate: "_rotate_gkt07_1",
|
|
2065
2203
|
btnH: "_btnH_gkt07_14",
|
|
2066
2204
|
btnV: "_btnV_gkt07_20"
|
|
2067
|
-
},
|
|
2068
|
-
let { handleRotate: e, handleSave: t, handleClose: n } =
|
|
2069
|
-
return /* @__PURE__ */ (0,
|
|
2205
|
+
}, zt = () => {
|
|
2206
|
+
let { handleRotate: e, handleSave: t, handleClose: n } = Rt();
|
|
2207
|
+
return /* @__PURE__ */ (0, b.jsxs)("div", {
|
|
2070
2208
|
className: $.rotate,
|
|
2071
|
-
children: [/* @__PURE__ */ (0,
|
|
2209
|
+
children: [/* @__PURE__ */ (0, b.jsx)("div", {
|
|
2072
2210
|
className: $.scGroup,
|
|
2073
|
-
children:
|
|
2074
|
-
|
|
2075
|
-
className: $.
|
|
2076
|
-
|
|
2077
|
-
|
|
2078
|
-
|
|
2079
|
-
|
|
2080
|
-
|
|
2081
|
-
|
|
2082
|
-
|
|
2083
|
-
|
|
2084
|
-
|
|
2211
|
+
children: /* @__PURE__ */ (0, b.jsxs)(V, {
|
|
2212
|
+
orientation: "horizontal",
|
|
2213
|
+
className: $.tooltip,
|
|
2214
|
+
children: [/* @__PURE__ */ (0, b.jsx)(I, {
|
|
2215
|
+
variant: "outline",
|
|
2216
|
+
className: $.btnH,
|
|
2217
|
+
onClick: () => e(90),
|
|
2218
|
+
"aria-label": "+90°",
|
|
2219
|
+
"data-tooltip": "+90°",
|
|
2220
|
+
children: /* @__PURE__ */ (0, b.jsx)(de, {})
|
|
2221
|
+
}), /* @__PURE__ */ (0, b.jsx)(I, {
|
|
2222
|
+
variant: "outline",
|
|
2223
|
+
className: $.btnV,
|
|
2224
|
+
onClick: () => e(-90),
|
|
2225
|
+
"aria-label": "-90°",
|
|
2226
|
+
"data-tooltip": "-90°",
|
|
2227
|
+
children: /* @__PURE__ */ (0, b.jsx)(fe, {})
|
|
2228
|
+
})]
|
|
2229
|
+
})
|
|
2230
|
+
}), /* @__PURE__ */ (0, b.jsx)(z, {
|
|
2085
2231
|
onSave: t,
|
|
2086
2232
|
onClose: n
|
|
2087
2233
|
})]
|
|
2088
2234
|
});
|
|
2089
|
-
},
|
|
2090
|
-
let { currentAction: e } =
|
|
2091
|
-
return /* @__PURE__ */ (0,
|
|
2092
|
-
className: `${
|
|
2235
|
+
}, Bt = { frame: "_frame_15mog_1" }, Vt = () => {
|
|
2236
|
+
let { currentAction: e } = P(), t = e?.name === m.RESIZE, n = e?.name === m.CROP, r = e?.name === m.PRESET_CROP, i = e?.name === m.FLIP, a = e?.name === m.ROTATE, o = n || r;
|
|
2237
|
+
return /* @__PURE__ */ (0, b.jsxs)("div", {
|
|
2238
|
+
className: `${Bt.frame} ${o ? R.mask : ""}`,
|
|
2093
2239
|
children: [
|
|
2094
|
-
/* @__PURE__ */ (0,
|
|
2095
|
-
t && /* @__PURE__ */ (0,
|
|
2096
|
-
(n || r) && /* @__PURE__ */ (0,
|
|
2097
|
-
n && /* @__PURE__ */ (0,
|
|
2098
|
-
r && /* @__PURE__ */ (0,
|
|
2099
|
-
i && /* @__PURE__ */ (0,
|
|
2100
|
-
a && /* @__PURE__ */ (0,
|
|
2240
|
+
/* @__PURE__ */ (0, b.jsx)(ht, { style: o ? { opacity: .4 } : {} }),
|
|
2241
|
+
t && /* @__PURE__ */ (0, b.jsx)(pt, {}),
|
|
2242
|
+
(n || r) && /* @__PURE__ */ (0, b.jsx)(gt, {}, e?.args?.id),
|
|
2243
|
+
n && /* @__PURE__ */ (0, b.jsx)(bt, {}),
|
|
2244
|
+
r && /* @__PURE__ */ (0, b.jsx)(Ft, {}),
|
|
2245
|
+
i && /* @__PURE__ */ (0, b.jsx)(Lt, {}),
|
|
2246
|
+
a && /* @__PURE__ */ (0, b.jsx)(zt, {})
|
|
2101
2247
|
]
|
|
2102
2248
|
});
|
|
2103
|
-
},
|
|
2104
|
-
let [a, o] =
|
|
2105
|
-
...
|
|
2249
|
+
}, Ht = ({ image: e, onSave: t, onBack: n, theme: r = "light", settings: i = h }) => {
|
|
2250
|
+
let [a, o] = u(null), s = O("sm", a), c = {
|
|
2251
|
+
...h,
|
|
2106
2252
|
...i
|
|
2107
|
-
}, { loading:
|
|
2253
|
+
}, { loading: l, error: d, mimeType: f, width: p, height: m, originalBlob: g, previewUrl: _, isAlpha: v } = T({
|
|
2108
2254
|
src: e,
|
|
2109
|
-
skip:
|
|
2255
|
+
skip: c?.tools?.length === 0
|
|
2110
2256
|
});
|
|
2111
|
-
return
|
|
2112
|
-
className: `${
|
|
2257
|
+
return c?.tools?.length === 0 ? /* @__PURE__ */ (0, b.jsx)("div", {
|
|
2258
|
+
className: `${R.root} ${R.wrapper}`,
|
|
2113
2259
|
"data-theme": r,
|
|
2114
|
-
children: /* @__PURE__ */ (0,
|
|
2115
|
-
className:
|
|
2116
|
-
children: /* @__PURE__ */ (0,
|
|
2117
|
-
className:
|
|
2260
|
+
children: /* @__PURE__ */ (0, b.jsx)("div", {
|
|
2261
|
+
className: R.system,
|
|
2262
|
+
children: /* @__PURE__ */ (0, b.jsx)("div", {
|
|
2263
|
+
className: R.textRed,
|
|
2118
2264
|
children: "No tools selected."
|
|
2119
2265
|
})
|
|
2120
2266
|
})
|
|
2121
|
-
}) :
|
|
2122
|
-
className: `${
|
|
2267
|
+
}) : l || d || !g || !f ? /* @__PURE__ */ (0, b.jsx)("div", {
|
|
2268
|
+
className: `${R.root} ${R.wrapper}`,
|
|
2123
2269
|
"data-theme": r,
|
|
2124
|
-
children: /* @__PURE__ */ (0,
|
|
2125
|
-
className:
|
|
2270
|
+
children: /* @__PURE__ */ (0, b.jsxs)("div", {
|
|
2271
|
+
className: R.system,
|
|
2126
2272
|
children: [
|
|
2127
|
-
|
|
2273
|
+
l && /* @__PURE__ */ (0, b.jsx)(ge, { style: {
|
|
2128
2274
|
width: 48,
|
|
2129
2275
|
height: 48
|
|
2130
2276
|
} }),
|
|
2131
|
-
d && /* @__PURE__ */ (0,
|
|
2132
|
-
className:
|
|
2277
|
+
d && /* @__PURE__ */ (0, b.jsx)("div", {
|
|
2278
|
+
className: R.textRed,
|
|
2133
2279
|
children: d
|
|
2134
2280
|
}),
|
|
2135
|
-
!
|
|
2136
|
-
className:
|
|
2281
|
+
!l && !d && (!g || !f) && /* @__PURE__ */ (0, b.jsx)("div", {
|
|
2282
|
+
className: R.textRed,
|
|
2137
2283
|
children: "Failed to load image."
|
|
2138
2284
|
})
|
|
2139
2285
|
]
|
|
2140
2286
|
})
|
|
2141
|
-
}) : /* @__PURE__ */ (0,
|
|
2287
|
+
}) : /* @__PURE__ */ (0, b.jsx)(x, {
|
|
2142
2288
|
mimeType: f,
|
|
2143
|
-
width:
|
|
2144
|
-
height:
|
|
2289
|
+
width: p,
|
|
2290
|
+
height: m,
|
|
2145
2291
|
originalBlob: g,
|
|
2146
2292
|
previewUrl: _,
|
|
2147
|
-
isAlpha:
|
|
2148
|
-
settings:
|
|
2149
|
-
children: /* @__PURE__ */ (0,
|
|
2293
|
+
isAlpha: v,
|
|
2294
|
+
settings: c,
|
|
2295
|
+
children: /* @__PURE__ */ (0, b.jsx)("div", {
|
|
2150
2296
|
ref: o,
|
|
2151
|
-
className: `${
|
|
2297
|
+
className: `${R.root} ${R.wrapper}`,
|
|
2152
2298
|
"data-theme": r,
|
|
2153
|
-
children: /* @__PURE__ */ (0,
|
|
2154
|
-
className: `${
|
|
2299
|
+
children: /* @__PURE__ */ (0, b.jsxs)("div", {
|
|
2300
|
+
className: `${c?.infobar ? R.grid : R.gridNoInfobar} ${s ? R.mobile : ""}`,
|
|
2155
2301
|
children: [
|
|
2156
|
-
/* @__PURE__ */ (0,
|
|
2302
|
+
/* @__PURE__ */ (0, b.jsx)(Ze, {
|
|
2157
2303
|
onSave: t,
|
|
2158
2304
|
onBack: n,
|
|
2159
2305
|
isMobile: s
|
|
2160
2306
|
}),
|
|
2161
|
-
/* @__PURE__ */ (0,
|
|
2162
|
-
|
|
2163
|
-
/* @__PURE__ */ (0,
|
|
2307
|
+
/* @__PURE__ */ (0, b.jsx)(tt, { isMobile: s }),
|
|
2308
|
+
c?.infobar && /* @__PURE__ */ (0, b.jsx)(it, {}),
|
|
2309
|
+
/* @__PURE__ */ (0, b.jsx)(Vt, {})
|
|
2164
2310
|
]
|
|
2165
2311
|
})
|
|
2166
2312
|
})
|
|
2167
2313
|
});
|
|
2168
2314
|
};
|
|
2169
2315
|
//#endregion
|
|
2170
|
-
export {
|
|
2316
|
+
export { Ht as Pixedi };
|