Skip to content

N
NodeJS_668036

Five-菜鸟级 / NodeJS_668036
与 Fork 源项目一致

Fork自 inscode / NodeJS

通知 1
Star 0
Fork 0
N
NodeJS_668036
提交 8be18dd8 编写于 作者: Q qq_41923622
浏览文件
操作

Fri Feb 14 13:04:00 CST 2025 inscode

上级 7ac2f57f
隐藏空白更改
内联 并排
Showing with 476 addition and 1857 deletion
demos/Basic.tsx
浏览文件 @ 8be18dd8
import React, { useRef } from 'react';
import { Editor } from 'tiny-image-editor';
import image from './basic.jpg';
//
const Demo = () => {
const EditorRefID =useRef<HTMLCanvasElement>(null);
setTimeout(()=>{
console.log(`dddd`,EditorRefID);
const handleUpload = EditorRefID?.current?.uploadRef?.current?.handleUpload;
handleUpload('https://erp-new.cdn.yingtaoyun.com/flw/1784/Q2406170015/jx/1241858/TY990010.jpg!w320')
},1000)
setTimeout(()=>{
const handleUpload = EditorRefID?.current?.uploadRef?.current?.handleUpload;
const xhr = new XMLHttpRequest();
// 要请求的 URL
const url = 'https://vercel-api.fivecc.cn/api/annotation';
xhr.open('GET', url, true);
xhr.onreadystatechange = function () {
if (xhr.readyState === 4) {
if (xhr.status === 200) {
const responseData = JSON.parse(xhr.responseText);
console.log(`asd`,responseData)
Object.keys(responseData.data).forEach((k)=>{
let itemObj = responseData.data[k]
handleUpload(itemObj.imgUrl,itemObj)
})
} else {
resultDiv.textContent = `Error: ${xhr.status}`;
}
}
};
xhr.send();
},6000)
return (
<div style={{width:"100%",height:"100%"}}>
<Editor ref={EditorRefID} url={image} />
</div>
);
};
export default Demo;
dist2/tiny-image-editor.min.css
浏览文件 @ 8be18dd8
.rc-slider {
position: relative;
width: 100%;
height: 14px;
padding: 5px 0;
border-radius: 6px;
touch-action: none;
box-sizing: border-box;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
.rc-slider * {
box-sizing: border-box;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
.rc-slider-rail {
position: absolute;
width: 100%;
height: 4px;
background-color: #e9e9e9;
border-radius: 6px;
}
.rc-slider-track,
.rc-slider-tracks {
position: absolute;
height: 4px;
background-color: #abe2fb;
border-radius: 6px;
}
.rc-slider-track-draggable {
z-index: 1;
box-sizing: content-box;
background-clip: content-box;
border-top: 5px solid rgba(0, 0, 0, 0);
border-bottom: 5px solid rgba(0, 0, 0, 0);
transform: translateY(-5px);
}
.rc-slider-handle {
position: absolute;
z-index: 1;
width: 14px;
height: 14px;
margin-top: -5px;
background-color: #fff;
border: solid 2px #96dbfa;
border-radius: 50%;
cursor: pointer;
cursor: grab;
opacity: 0.8;
touch-action: pan-x;
}
.rc-slider-handle-dragging.rc-slider-handle-dragging.rc-slider-handle-dragging {
border-color: #57c5f7;
box-shadow: 0 0 0 5px #96dbfa;
}
.rc-slider-handle:focus {
outline: none;
box-shadow: none;
}
.rc-slider-handle:focus-visible {
border-color: #2db7f5;
box-shadow: 0 0 0 3px #96dbfa;
}
.rc-slider-handle-click-focused:focus {
border-color: #96dbfa;
box-shadow: none;
box-shadow: initial;
}
.rc-slider-handle:hover {
border-color: #57c5f7;
}
.rc-slider-handle:active {
border-color: #57c5f7;
box-shadow: 0 0 5px #57c5f7;
cursor: grabbing;
}
.rc-slider-mark {
position: absolute;
top: 18px;
left: 0;
width: 100%;
font-size: 12px;
}
.rc-slider-mark-text {
position: absolute;
display: inline-block;
color: #999;
text-align: center;
vertical-align: middle;
cursor: pointer;
}
.rc-slider-mark-text-active {
color: #666;
}
.rc-slider-step {
position: absolute;
width: 100%;
height: 4px;
background: transparent;
}
.rc-slider-dot {
position: absolute;
bottom: -2px;
width: 8px;
height: 8px;
vertical-align: middle;
background-color: #fff;
border: 2px solid #e9e9e9;
border-radius: 50%;
cursor: pointer;
}
.rc-slider-dot-active {
border-color: #96dbfa;
}
.rc-slider-dot-reverse {
margin-right: -4px;
}
.rc-slider-disabled {
background-color: #e9e9e9;
}
.rc-slider-disabled .rc-slider-track {
background-color: #ccc;
}
.rc-slider-disabled .rc-slider-handle,
.rc-slider-disabled .rc-slider-dot {
background-color: #fff;
border-color: #ccc;
box-shadow: none;
cursor: not-allowed;
}
.rc-slider-disabled .rc-slider-mark-text,
.rc-slider-disabled .rc-slider-dot {
cursor: not-allowed !important;
}
.rc-slider-vertical {
width: 14px;
height: 100%;
padding: 0 5px;
}
.rc-slider-vertical .rc-slider-rail {
width: 4px;
height: 100%;
}
.rc-slider-vertical .rc-slider-track {
bottom: 0;
left: 5px;
width: 4px;
}
.rc-slider-vertical .rc-slider-track-draggable {
border-top: 0;
border-bottom: 0;
border-right: 5px solid rgba(0, 0, 0, 0);
border-left: 5px solid rgba(0, 0, 0, 0);
transform: translateX(-5px);
}
.rc-slider-vertical .rc-slider-handle {
position: absolute;
z-index: 1;
margin-top: 0;
margin-left: -5px;
touch-action: pan-y;
}
.rc-slider-vertical .rc-slider-mark {
top: 0;
left: 18px;
height: 100%;
}
.rc-slider-vertical .rc-slider-step {
width: 4px;
height: 100%;
}
.rc-slider-vertical .rc-slider-dot {
margin-left: -2px;
}
.rc-slider-tooltip-zoom-down-enter,
.rc-slider-tooltip-zoom-down-appear {
display: block !important;
animation-duration: 0.3s;
animation-fill-mode: both;
animation-play-state: paused;
}
.rc-slider-tooltip-zoom-down-leave {
display: block !important;
animation-duration: 0.3s;
animation-fill-mode: both;
animation-play-state: paused;
}
.rc-slider-tooltip-zoom-down-enter.rc-slider-tooltip-zoom-down-enter-active,
.rc-slider-tooltip-zoom-down-appear.rc-slider-tooltip-zoom-down-appear-active {
animation-name: rcSliderTooltipZoomDownIn;
animation-play-state: running;
}
.rc-slider-tooltip-zoom-down-leave.rc-slider-tooltip-zoom-down-leave-active {
animation-name: rcSliderTooltipZoomDownOut;
animation-play-state: running;
}
.rc-slider-tooltip-zoom-down-enter,
.rc-slider-tooltip-zoom-down-appear {
transform: scale(0, 0);
animation-timing-function: cubic-bezier(0.23, 1, 0.32, 1);
}
.rc-slider-tooltip-zoom-down-leave {
animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
}
@keyframes rcSliderTooltipZoomDownIn {
0% {
transform: scale(0, 0);
transform-origin: 50% 100%;
opacity: 0;
}
100% {
transform: scale(1, 1);
transform-origin: 50% 100%;
}
}
@keyframes rcSliderTooltipZoomDownOut {
0% {
transform: scale(1, 1);
transform-origin: 50% 100%;
}
100% {
transform: scale(0, 0);
transform-origin: 50% 100%;
opacity: 0;
}
}
.rc-slider-tooltip {
position: absolute;
top: -9999px;
left: -9999px;
visibility: visible;
box-sizing: border-box;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
.rc-slider-tooltip * {
box-sizing: border-box;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
.rc-slider-tooltip-hidden {
display: none;
}
.rc-slider-tooltip-placement-top {
padding: 4px 0 8px 0;
}
.rc-slider-tooltip-inner {
min-width: 24px;
height: 24px;
padding: 6px 2px;
color: #fff;
font-size: 12px;
line-height: 1;
text-align: center;
text-decoration: none;
background-color: #6c6c6c;
border-radius: 6px;
box-shadow: 0 0 4px #d9d9d9;
}
.rc-slider-tooltip-arrow {
position: absolute;
width: 0;
height: 0;
border-color: transparent;
border-style: solid;
}
.rc-slider-tooltip-placement-top .rc-slider-tooltip-arrow {
bottom: 4px;
left: 50%;
margin-left: -4px;
border-width: 4px 4px 0;
border-top-color: #6c6c6c;
}
.tie-image-editor{display:flex;flex-direction:column;width:800px;height:400px}.tie-image-editor_modal__wrapper{flex-grow:1}.tie-image-editor_target{width:100%;height:100%;outline:none}.tie-image-editor_tool{padding:8px;background-color:#e5e6e7;border-radius:4px 4px 0 0}.tie-image-editor_tool-item{float:left;display:flex;align-items:center;justify-content:center;width:24px;height:24px;margin-right:8px;border-radius:4px;line-height:1}.tie-image-editor_tool-item .tie-image-editor_icon{display:block;width:18px;height:18px;background-size:100% 100%;background-repeat:no-repeat;cursor:pointer;opacity:.8}.tie-image-editor_tool-item .tie-image-editor_icon:hover{opacity:1}.tie-image-editor_tool-item--disabled .tie-image-editor_icon,.tie-image-editor_tool-item--disabled .tie-image-editor_icon:hover{opacity:.5;cursor:not-allowed}.tie-image-editor_tool-crop .tie-image-editor_icon{background-image:url(data:image/svg+xml;base64,PHN2ZyBjbGFzcz0iaWNvbiIgd2lkdGg9IjIwMCIgaGVpZ2h0PSIyMDAiIHZpZXdCb3g9IjAgMCAxMDI0IDEwMjQiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZmlsbD0iIzUxNTE1MSIgZD0iTTg4NC43MzEgNjk4LjM2Nkg3NzIuOTA5VjI4OC4zNjVjMC0yMC41ODQtMTYuNjg1LTM3LjI3NS0zNy4yNjktMzcuMjc1SDMyNS42MzlWMTM5LjI3NGMwLTIwLjU4Mi0xNi42OTMtMzcuMjczLTM3LjI3NS0zNy4yNzMtMjAuNTgyIDAtMzcuMjc1IDE2LjY5MS0zNy4yNzUgMzcuMjczVjI1MS4wOUgxMzkuMjc1Yy0yMC41ODQgMC0zNy4yNzUgMTYuNjkxLTM3LjI3NSAzNy4yNzUgMCAyMC41ODIgMTYuNjkxIDM3LjI3MyAzNy4yNzUgMzcuMjczSDI1MS4wOXY0MTAuMDAzYzAgMjAuNTgyIDE2LjY5MyAzNy4yNjkgMzcuMjc1IDM3LjI2OWg0MTAuMDAzdjExMS44MmMwIDIwLjU4MyAxNi42ODUgMzcuMjY5IDM3LjI2NyAzNy4yNjkgMjAuNTg5IDAgMzcuMjc1LTE2LjY4NSAzNy4yNzUtMzcuMjY5Vjc3Mi45MWgxMTEuODIyYzIwLjU4MiAwIDM3LjI2OS0xNi42ODcgMzcuMjY5LTM3LjI2OS0uMDAxLTIwLjU4OC0xNi42ODgtMzcuMjc1LTM3LjI3LTM3LjI3NXptLTU1OS4wOTIgMFYzMjUuNjM4aDM3Mi43Mjh2MzcyLjcyOEgzMjUuNjM5em0wIDAiLz48L3N2Zz4=)}.tie-image-editor_tool-flip .tie-image-editor_icon{background-image:url(data:image/svg+xml;base64,PHN2ZyBjbGFzcz0iaWNvbiIgdmlld0JveD0iMCAwIDEwMjQgMTAyNCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iMjAwIiBoZWlnaHQ9IjIwMCI+PHBhdGggZD0iTTY0MCA4OTZoODUuMzMzdi04NS4zMzNINjQwVjg5NnptMTcwLjY2Ny01MTJIODk2di04NS4zMzNoLTg1LjMzM1YzODR6TTEyOCAyMTMuMzMzdjU5Ny4zMzRDMTI4IDg1Ny44MTMgMTY2LjE4NyA4OTYgMjEzLjMzMyA4OTZIMzg0di04NS4zMzNIMjEzLjMzM1YyMTMuMzMzSDM4NFYxMjhIMjEzLjMzM0MxNjYuMTg3IDEyOCAxMjggMTY2LjE4NyAxMjggMjEzLjMzM3pNODEwLjY2NyAxMjh2ODUuMzMzSDg5NkM4OTYgMTY2LjE4NyA4NTcuODEzIDEyOCA4MTAuNjY3IDEyOHpNNDY5LjMzMyA5ODEuMzMzaDg1LjMzNFY0Mi42NjdoLTg1LjMzNHY5MzguNjY2em0zNDEuMzM0LTI1Nkg4OTZWNjQwaC04NS4zMzN2ODUuMzMzek02NDAgMjEzLjMzM2g4NS4zMzNWMTI4SDY0MHY4NS4zMzN6bTE3MC42NjcgMzQxLjMzNEg4OTZ2LTg1LjMzNGgtODUuMzMzdjg1LjMzNHptMCAzNDEuMzMzQzg1Ny44MTMgODk2IDg5NiA4NTcuODEzIDg5NiA4MTAuNjY3aC04NS4zMzNWODk2eiIgZmlsbD0iIzUxNTE1MSIvPjwvc3ZnPg==)}.tie-image-editor_tool-flipX .tie-image-editor_icon{background-image:url(data:image/svg+xml;base64,PHN2ZyBjbGFzcz0iaWNvbiIgdmlld0JveD0iMCAwIDEwMjQgMTAyNCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iMjAwIiBoZWlnaHQ9IjIwMCI+PHBhdGggZD0iTTIxMC43NzMgNTIyLjI0YTQyLjY2NyA0Mi42NjcgMCAwIDAtNTEuNjI2IDMyLjQyN0wxMzguMjQgNjM3LjQ0YTQyLjY2NyA0Mi42NjcgMCAwIDAgMzIuNDI3IDUwLjM0NyA0Mi42NjcgNDIuNjY3IDAgMCAwIDUxLjYyNi0zMS4xNDdsMjAuOTA3LTgyLjc3M2E0Mi42NjcgNDIuNjY3IDAgMCAwLTMyLjQyNy01MS42Mjd6bTcyNS4zMzQgMzIwLjg1M0w3NjUuNDQgMTYwLjQyN0E0Mi42NjcgNDIuNjY3IDAgMCAwIDcyNS4zMzMgMTI4aC0xMjhhNDIuNjY3IDQyLjY2NyAwIDAgMC00Mi42NjYgNDIuNjY3djY4Mi42NjZBNDIuNjY3IDQyLjY2NyAwIDAgMCA1OTcuMzMzIDg5Nkg4OTZhNDIuNjY3IDQyLjY2NyAwIDAgMCAzMy43MDctMTYuMjEzIDQyLjY2NyA0Mi42NjcgMCAwIDAgOC45Ni0zNi42OTR6TTY0MCA4MTAuNjY3VjIxMy4zMzNoNTIuMDUzbDE0OS4zMzQgNTk3LjMzNHpNMjczLjA2NyAyNzMuOTJhNDIuNjY3IDQyLjY2NyAwIDAgMC01Mi4wNTQgMzEuMTQ3bC0yMC40OCA4Mi43NzNhNDIuNjY3IDQyLjY2NyAwIDAgMCAzMS4xNDcgNTEuNjI3aDEwLjI0YTQyLjY2NyA0Mi42NjcgMCAwIDAgNDIuNjY3LTMyLjQyN2wyMC40OC04Mi43NzNhNDIuNjY3IDQyLjY2NyAwIDAgMC0zMi01MC4zNDd6bTQ3LjM2LTYwLjU4N2g4NS4zMzNhNDIuNjY3IDQyLjY2NyAwIDAgMCAwLTg1LjMzM2gtODUuMzMzYTQyLjY2NyA0Mi42NjcgMCAwIDAgMCA4NS4zMzN6bS0xMzkuNTIgNTk3LjMzNGE0Mi42NjcgNDIuNjY3IDAgMCAwLTg1LjMzNC0xMC4yNGwtMTAuMjQgNDIuNjY2YTQyLjY2NyA0Mi42NjcgMCAwIDAgNy42OCAzNi42OTRBNDIuNjY3IDQyLjY2NyAwIDAgMCAxMjggODk2aDQyLjY2N2E0Mi42NjcgNDIuNjY3IDAgMCAwIDEwLjI0LTg1LjMzM3ptMjQ1Ljc2LTUzMi45MDdBNDIuNjY3IDQyLjY2NyAwIDAgMCAzODQgMzIwLjQyN3Y4NS4zMzNhNDIuNjY3IDQyLjY2NyAwIDAgMCA4NS4zMzMgMHYtODUuMzMzYTQyLjY2NyA0Mi42NjcgMCAwIDAtNDIuNjY2LTQyLjY2N3ptMCAyNTZBNDIuNjY3IDQyLjY2NyAwIDAgMCAzODQgNTc2LjQyN3Y4NS4zMzNhNDIuNjY3IDQyLjY2NyAwIDAgMCA4NS4zMzMgMHYtODUuMzMzYTQyLjY2NyA0Mi42NjcgMCAwIDAtNDIuNjY2LTQyLjY2N3ptMCAyNTZhNDIuNjY3IDQyLjY2NyAwIDAgMC0zNi42OTQgMjAuOTA3aC00OC42NGE0Mi42NjcgNDIuNjY3IDAgMCAwIDAgODUuMzMzaDg1LjMzNGE0Mi42NjcgNDIuNjY3IDAgMCAwIDQyLjY2Ni00Mi42Njd2LTIwLjkwNmE0Mi42NjcgNDIuNjY3IDAgMCAwLTQyLjY2Ni00Mi42Njd6IiBmaWxsPSIjNTE1MTUxIi8+PC9zdmc+)}.tie-image-editor_tool-flipY .tie-image-editor_icon{background-image:url(data:image/svg+xml;base64,PHN2ZyBjbGFzcz0iaWNvbiIgdmlld0JveD0iMCAwIDEwMjQgMTAyNCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iMjAwIiBoZWlnaHQ9IjIwMCI+PHBhdGggZD0iTTU2My42MjcgMjQzLjJhNDIuNjY3IDQyLjY2NyAwIDAgMCAxMC4yNCAwbDgyLjc3My0yMC45MDdhNDIuNjY3IDQyLjY2NyAwIDAgMCAzMS4xNDctNTEuNjI2IDQyLjY2NyA0Mi42NjcgMCAwIDAtNTEuNjI3LTMxLjE0N2wtODEuNDkzIDE5LjYyN2E0Mi42NjcgNDIuNjY3IDAgMCAwIDEwLjI0IDg1LjMzM3pNNDA1Ljc2IDM4NGgtODUuMzMzYTQyLjY2NyA0Mi42NjcgMCAxIDAgMCA4NS4zMzNoODUuMzMzYTQyLjY2NyA0Mi42NjcgMCAwIDAgMC04NS4zMzN6bTE3MC42NjcgMGE0Mi42NjcgNDIuNjY3IDAgMSAwIDAgODUuMzMzaDg1LjMzM2E0Mi42NjcgNDIuNjY3IDAgMCAwIDAtODUuMzMzem0tMjYxLjEyLTc4LjkzM2gxMC4yNGw4Mi43NzMtMjAuNDhhNDIuNjY3IDQyLjY2NyAwIDAgMC0yMC40OC04NC4wNTRsLTgyLjc3MyAyMC40OGE0Mi42NjcgNDIuNjY3IDAgMCAwIDEwLjI0IDg1LjMzNHptLTE0NC42NCAxNDMuMzZhNDIuNjY3IDQyLjY2NyAwIDAgMCA0Mi42NjYtNDIuNjY3di04NS4zMzNhNDIuNjY3IDQyLjY2NyAwIDAgMC04NS4zMzMgMHY4NS4zMzNhNDIuNjY3IDQyLjY2NyAwIDAgMCA0Mi42NjcgNDIuNjY3em03MDkuMTItMzU0LjEzNGE0Mi42NjcgNDIuNjY3IDAgMCAwLTM2LjY5NC04Ljk2bC00Mi42NjYgMTAuMjRBNDIuNjY3IDQyLjY2NyAwIDAgMCA3NjkuMjggMTQ3LjJhNDIuNjY3IDQyLjY2NyAwIDAgMCA0Mi42NjcgMzIuNDI3IDQyLjY2NyA0Mi42NjcgMCAwIDAgODQuMDUzLTguOTZWMTI4YTQyLjY2NyA0Mi42NjcgMCAwIDAtMTYuMjEzLTMzLjcwN3ptLTI2LjQ1NCAyMDQuMzc0YTQyLjY2NyA0Mi42NjcgMCAwIDAtNDIuNjY2IDQyLjY2NnY0OC42NGE0Mi42NjcgNDIuNjY3IDAgMCAwIDIxLjc2IDc5LjM2aDIwLjkwNkE0Mi42NjcgNDIuNjY3IDAgMCAwIDg5NiA0MjYuNjY3di04NS4zMzRhNDIuNjY3IDQyLjY2NyAwIDAgMC00Mi42NjctNDIuNjY2em0wIDI1NkgxNzAuNjY3QTQyLjY2NyA0Mi42NjcgMCAwIDAgMTI4IDU5Ny4zMzN2MTI4QTQyLjY2NyA0Mi42NjcgMCAwIDAgMTYwLjQyNyA3NjhsNjgyLjY2NiAxNzAuNjY3YTQyLjY2NyA0Mi42NjcgMCAwIDAgMTAuMjQgMEE0Mi42NjcgNDIuNjY3IDAgMCAwIDg5NiA4OTZWNTk3LjMzM2E0Mi42NjcgNDIuNjY3IDAgMCAwLTQyLjY2Ny00Mi42NjZ6bS00Mi42NjYgMjg2LjcyTDIxMy4zMzMgNjkyLjA1M1Y2NDBoNTk3LjMzNHoiIGZpbGw9IiM1MTUxNTEiLz48L3N2Zz4=)}.tie-image-editor_tool-rotate .tie-image-editor_icon{background-image:url(data:image/svg+xml;base64,PHN2ZyBjbGFzcz0iaWNvbiIgdmlld0JveD0iMCAwIDEwMjQgMTAyNCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iMjAwIiBoZWlnaHQ9IjIwMCI+PHBhdGggZD0iTTQ4MC41IDI1MS4yYzEzLTEuNiAyNS45LTIuNCAzOC44LTIuNXY2My45YzAgNi41IDcuNSAxMC4xIDEyLjYgNi4xTDY2MCAyMTcuNmM0LTMuMiA0LTkuMiAwLTEyLjNsLTEyOC0xMDFjLTUuMS00LTEyLjYtLjQtMTIuNiA2LjFsLS4yIDY0Yy0xMTguNi41LTIzNS44IDUzLjQtMzE0LjYgMTU0LjItNjkuNiA4OS4yLTk1LjcgMTk4LjYtODEuMSAzMDIuNGg3NC45Yy0uOS01LjMtMS43LTEwLjctMi40LTE2LjEtNS4xLTQyLjEtMi4xLTg0LjEgOC45LTEyNC44IDExLjQtNDIuMiAzMS04MS4xIDU4LjEtMTE1LjggMjcuMi0zNC43IDYwLjMtNjMuMiA5OC40LTg0LjMgMzctMjAuNiA3Ni45LTMzLjYgMTE5LjEtMzguOHoiIGZpbGw9IiM1MTUxNTEiLz48cGF0aCBkPSJNODgwIDQxOEgzNTJjLTE3LjcgMC0zMiAxNC4zLTMyIDMydjQxNGMwIDE3LjcgMTQuMyAzMiAzMiAzMmg1MjhjMTcuNyAwIDMyLTE0LjMgMzItMzJWNDUwYzAtMTcuNy0xNC4zLTMyLTMyLTMyem0tNDQgNDAySDM5NlY0OTRoNDQwdjMyNnoiIGZpbGw9IiM1MTUxNTEiLz48L3N2Zz4=)}.tie-image-editor_tool-draw .tie-image-editor_icon{background-image:url(data:image/svg+xml;base64,PHN2ZyBjbGFzcz0iaWNvbiIgdmlld0JveD0iMCAwIDEwMjQgMTAyNCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iMjAwIiBoZWlnaHQ9IjIwMCI+PHBhdGggZD0iTTgxOS4yIDEwMi40aC01Ni41MzVjLTE4Ljc3IDAtNDUuMDA1IDEwLjg3NS01OC4yNjYgMjQuMTM2bC01MS4yIDUxLjItMjQuMTI1LTI0LjEzNmMtMjYuNTczLTI2LjUzMi03MC0yNi41MzItOTYuNTc0IDBMMjY2Ljk5OCA0MTkuMTAzYTM0LjE2IDM0LjE2IDAgMCAwIDAgNDguMjcxbDEyLjA3MyAxMi4wNzMgMjg5LjYyOC0yODkuNjM4IDM2LjIyOSAzNi4yMzktMzYyLjAyNSAzNjIuMDI1LS4wMy0uMDMtOTIuMTcgOTIuMjNjLTI2LjU3NCAyNi41MjMtNDguMzAzIDc4Ljk3Mi00OC4yNzIgMTE2LjUwMUwxMDIuNCA5MjEuNmgxMjQuODI2YzM3LjQ5OCAwIDg5Ljk2OC0yMS43MyAxMTYuNS00OC4yNjFsOTIuMjQyLTkyLjIwMSA0NjEuNDk2LTQ2MS40OTZjMTMuMjYxLTEzLjI3MSAyNC4xMzYtMzkuNTA2IDI0LjEzNi01OC4yNzZWMjA0LjhMODE5LjIgMTAyLjR6TTI5NS40NjUgODI1LjA2OGMtMTMuNzQyIDEzLjczMS00OC44MDQgMjguMzAzLTY4LjI0IDI4LjMwM2wtNTYuNTM0LS4wM3YtNTYuNTY3Yy0uMDMxLTE5LjQyNSAxNC41LTU0LjQ2NiAyOC4yNzItNjguMjI5bDQzLjkzLTQzLjk0IDk2LjUzMiA5Ni41NDMtNDMuOTYgNDMuOTJ6bTkyLjIzMi05Mi4yMDEtOTYuNTMzLTk2LjUzM0w2NTMuMTkgMjc0LjNsOTYuNTc0IDk2LjU3My0zNjIuMDY2IDM2MS45OTV6TTc5OC4wMzQgMzIyLjZsLTk2LjU2My05Ni42MDQgNzIuMzk3LTcyLjM5NyA5Ni42MDQgOTYuNjA0LTcyLjQzOCA3Mi4zOTd6IiBmaWxsPSIjNTE1MTUxIi8+PC9zdmc+)}.tie-image-editor_tool-circle .tie-image-editor_icon{background-image:url(data:image/svg+xml;base64,PHN2ZyBjbGFzcz0iaWNvbiIgd2lkdGg9IjIwMCIgaGVpZ2h0PSIyMDAiIHZpZXdCb3g9IjAgMCAxMDI0IDEwMjQiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZmlsbD0iIzUxNTE1MSIgZD0iTTUxMiA5NjBDMjY0Ljk2IDk2MCA2NCA3NTkuMDQgNjQgNTEyUzI2NC45NiA2NCA1MTIgNjRzNDQ4IDIwMC45NiA0NDggNDQ4LTIwMC45NiA0NDgtNDQ4IDQ0OHptMC04MzJjLTIxMS43NDQgMC0zODQgMTcyLjI1Ni0zODQgMzg0czE3Mi4yNTYgMzg0IDM4NCAzODQgMzg0LTE3Mi4yNTYgMzg0LTM4NC0xNzIuMjU2LTM4NC0zODQtMzg0eiIvPjwvc3ZnPg==)}.tie-image-editor_tool-rect .tie-image-editor_icon{background-image:url(data:image/svg+xml;base64,PHN2ZyBjbGFzcz0iaWNvbiIgdmlld0JveD0iMCAwIDEwMjQgMTAyNCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iMjAwIiBoZWlnaHQ9IjIwMCI+PHBhdGggZD0iTTg0MS4zNCA5NTkuMzZIMTgyLjY2Yy02NS4wNiAwLTExNy45OS01Mi45NC0xMTcuOTktMTE4LjAyVjE4Mi42OWMwLTY1LjA4IDUyLjk0LTExOC4wNCAxMTcuOTktMTE4LjA0aDY1OC42OGM2NS4wNiAwIDExNy45OSA1Mi45NiAxMTcuOTkgMTE4LjA0djY1OC42NWMwIDY1LjA4LTUyLjkzIDExOC4wMi0xMTcuOTkgMTE4LjAyek0xODIuNjYgMTQyLjE3Yy0yMi4zMSAwLTQwLjUxIDE4LjE4LTQwLjUxIDQwLjUxdjY1OC42NWMwIDIyLjM0IDE4LjIgNDAuNDkgNDAuNTEgNDAuNDloNjU4LjY4YzIyLjMxIDAgNDAuNTEtMTguMTUgNDAuNTEtNDAuNDlWMTgyLjY5YzAtMjIuMzQtMTguMi00MC41MS00MC41MS00MC41MUgxODIuNjZ6IiBmaWxsPSIjNTE1MTUxIi8+PC9zdmc+)}.tie-image-editor_tool-undo .tie-image-editor_icon{background-image:url(data:image/svg+xml;base64,PHN2ZyBjbGFzcz0iaWNvbiIgdmlld0JveD0iMCAwIDEwMjQgMTAyNCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iMjAwIiBoZWlnaHQ9IjIwMCI+PHBhdGggZD0iTTI1OC45ODcgNTA5LjAxM0M1MzYuNzQ3IDIzNS4zOTIgOTU2LjAzMiAzOTEuNDY3IDk1OC4yOTMgNjk3LjlsLTcuNzY1IDIuNjQ1Yy0xNzYuODUzLTIxOC4xMTItNDE3LjAyNC0yOTEuODQtNjA1Ljg2Ny0xMDYuNDUzYTQuNTIzIDQuNTIzIDAgMCAwLS4wODUgNi4zMTRsMTE3LjU5IDExNy41OWE0LjI2NyA0LjI2NyAwIDAgMS0yLjk4NyA3LjI1M0gxMzIuMjY3YTQuMjY3IDQuMjY3IDAgMCAxLTQuMjY3LTQuMjY3VjM5NC4yNGMwLTMuODQgNC42MDgtNS43MTcgNy4yNTMtMi45ODdsMTE3Ljc2IDExNy43NmMxLjYyMiAxLjcwNyA0LjI2NyAxLjYyMiA1Ljg4OCAweiIgZmlsbD0iIzUxNTE1MSIvPjwvc3ZnPg==)}.tie-image-editor_tool-redo .tie-image-editor_icon{background-image:url(data:image/svg+xml;base64,PHN2ZyBjbGFzcz0iaWNvbiIgdmlld0JveD0iMCAwIDEwMjQgMTAyNCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iMjAwIiBoZWlnaHQ9IjIwMCI+PHBhdGggZD0iTTc2NS4wMTMgNTA5LjAxM0M0ODcuMjUzIDIzNS4zOTIgNjcuOTY4IDM5MS40NjcgNjUuNzkyIDY5Ny45NDFsNy43NjUgMi42NDZjMTc2Ljg1NC0yMTguMTEyIDQxNy4wMjQtMjkxLjg0IDYwNS44NjctMTA2LjQ1NCAxLjcwNyAxLjcwNyAxLjc5MiA0LjYwOC4wODUgNi4zMTVMNTYxLjkyIDcxOC4wOGE0LjI2NyA0LjI2NyAwIDAgMCAyLjk4NyA3LjI5NmgzMjYuODI2YTQuMjY3IDQuMjY3IDAgMCAwIDQuMjY3LTQuMjY3VjM5NC4yNGE0LjIyNCA0LjIyNCAwIDAgMC03LjI1My0yLjk4N2wtMTE3Ljc2IDExNy43NmE0LjA5NiA0LjA5NiAwIDAgMS01Ljg4OCAweiIgZmlsbD0iIzUxNTE1MSIvPjwvc3ZnPg==)}.tie-image-editor_tool-text .tie-image-editor_icon{background-image:url(data:image/svg+xml;base64,PHN2ZyBjbGFzcz0iaWNvbiIgdmlld0JveD0iMCAwIDEwMjQgMTAyNCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iMjAwIiBoZWlnaHQ9IjIwMCI+PHBhdGggZD0iTTg1My4zMzMgMTcwLjY2N0gxNzAuNjY3QTQyLjY2NyA0Mi42NjcgMCAwIDAgMTI4IDIxMy4zMzN2MTI4YTQyLjY2NyA0Mi42NjcgMCAwIDAgODUuMzMzIDBWMjU2aDI1NnY1NTQuNjY3SDM4NEE0Mi42NjcgNDIuNjY3IDAgMCAwIDM4NCA4OTZoMjU2YTQyLjY2NyA0Mi42NjcgMCAwIDAgMC04NS4zMzNoLTg1LjMzM1YyNTZoMjU2djg1LjMzM2E0Mi42NjcgNDIuNjY3IDAgMCAwIDg1LjMzMyAwdi0xMjhhNDIuNjY3IDQyLjY2NyAwIDAgMC00Mi42NjctNDIuNjY2eiIgZmlsbD0iIzUxNTE1MSIvPjwvc3ZnPg==)}.tie-image-editor_tool-upload .tie-image-editor_icon{position:relative;background-image:url(data:image/svg+xml;base64,PHN2ZyBjbGFzcz0iaWNvbiIgdmlld0JveD0iMCAwIDEwMjQgMTAyNCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iMjAwIiBoZWlnaHQ9IjIwMCI+PHBhdGggZD0iTTgxMC42NjcgMjU2SDIxMy4zMzNxLTQyLjY2NiAwLTQyLjY2Ni00Mi42NjcgMC00Mi42NjYgNDIuNjY2LTQyLjY2Nmg1OTcuMzM0cTQyLjY2NiAwIDQyLjY2NiA0Mi42NjYgMCA0Mi42NjctNDIuNjY2IDQyLjY2N1oiIGZpbGw9IiM1MTUxNTEiLz48cGF0aCBkPSJNODUzLjMzMyAyMTMuMzMzdjg1LjMzNHEwIDQyLjY2Ni00Mi42NjYgNDIuNjY2LTQyLjY2NyAwLTQyLjY2Ny00Mi42NjZ2LTg1LjMzNHEwLTQyLjY2NiA0Mi42NjctNDIuNjY2IDQyLjY2NiAwIDQyLjY2NiA0Mi42NjZaTTI1NiAyMTMuMzMzdjg1LjMzNHEwIDQyLjY2Ni00Mi42NjcgNDIuNjY2LTQyLjY2NiAwLTQyLjY2Ni00Mi42NjZ2LTg1LjMzNHEwLTQyLjY2NiA0Mi42NjYtNDIuNjY2IDQyLjY2NyAwIDQyLjY2NyA0Mi42NjZaTTM0MS4zMzMgNTk3LjMzM2E0Mi42NjcgNDIuNjY3IDAgMCAxLTM0LjEzMy0xNy4wNjYgNDIuNjY3IDQyLjY2NyAwIDAgMSA4LjUzMy01OS43MzRsMTcwLjY2Ny0xMjhhNDIuNjY3IDQyLjY2NyAwIDAgMSA1MC4zNDcgMGwxNzAuNjY2IDEyMC4zMmE0Mi42NjcgNDIuNjY3IDAgMCAxIDEwLjI0IDU5LjMwNyA0Mi42NjcgNDIuNjY3IDAgMCAxLTU5LjczMyAxMC4yNEw1MTIgNDc5LjU3MyAzNjYuOTMzIDU4OC44YTQyLjY2NyA0Mi42NjcgMCAwIDEtMjUuNiA4LjUzM3oiIGZpbGw9IiM1MTUxNTEiLz48cGF0aCBkPSJNNTEyIDg5NmE0Mi42NjcgNDIuNjY3IDAgMCAxLTQyLjY2Ny00Mi42NjdWNTEyYTQyLjY2NyA0Mi42NjcgMCAwIDEgODUuMzM0IDB2MzQxLjMzM0E0Mi42NjcgNDIuNjY3IDAgMCAxIDUxMiA4OTZ6IiBmaWxsPSIjNTE1MTUxIi8+PC9zdmc+)}.tie-image-editor_tool-download .tie-image-editor_icon{background-image:url(data:image/svg+xml;base64,PHN2ZyBjbGFzcz0iaWNvbiIgdmlld0JveD0iMCAwIDEwMjQgMTAyNCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iMjAwIiBoZWlnaHQ9IjIwMCI+PHBhdGggZD0iTTIxMy4zMzMgNzY4aDU5Ny4zMzRxNDIuNjY2IDAgNDIuNjY2IDQyLjY2NyAwIDQyLjY2Ni00Mi42NjYgNDIuNjY2SDIxMy4zMzNxLTQyLjY2NiAwLTQyLjY2Ni00Mi42NjYgMC00Mi42NjcgNDIuNjY2LTQyLjY2N1oiIGZpbGw9IiM1MTUxNTEiLz48cGF0aCBkPSJNMTcwLjY2NyA4MTAuNjY2OTk5OTk5OTk5OXYtODUuMzM0cTAtNDIuNjY2IDQyLjY2Ni00Mi42NjYgNDIuNjY3IDAgNDIuNjY3IDQyLjY2NnY4NS4zMzRxMCA0Mi42NjYtNDIuNjY3IDQyLjY2Ni00Mi42NjYgMC00Mi42NjYtNDIuNjY2Wk03NjggODEwLjY2Njk5OTk5OTk5OTl2LTg1LjMzNHEwLTQyLjY2NiA0Mi42NjctNDIuNjY2IDQyLjY2NiAwIDQyLjY2NiA0Mi42NjZ2ODUuMzM0cTAgNDIuNjY2LTQyLjY2NiA0Mi42NjYtNDIuNjY3IDAtNDIuNjY3LTQyLjY2NlpNNTEyIDY0MGE0Mi42NjcgNDIuNjY3IDAgMCAxLTI0Ljc0Ny03LjY4TDMxNi41ODcgNTEyYTQyLjY2NyA0Mi42NjcgMCAwIDEtMTAuMjQtNTkuMzA3IDQyLjY2NyA0Mi42NjcgMCAwIDEgNTkuNzMzLTEwLjI0TDUxMiA1NDQuNDI3IDY1Ny4wNjcgNDM1LjJhNDIuNjY3IDQyLjY2NyAwIDAgMSA1MS4yIDY4LjI2N2wtMTcwLjY2NyAxMjhBNDIuNjY3IDQyLjY2NyAwIDAgMSA1MTIgNjQweiIgZmlsbD0iIzUxNTE1MSIvPjxwYXRoIGQ9Ik01MTIgNTU0LjY2N0E0Mi42NjcgNDIuNjY3IDAgMCAxIDQ2OS4zMzMgNTEyVjE3MC42NjdhNDIuNjY3IDQyLjY2NyAwIDAgMSA4NS4zMzQgMFY1MTJBNDIuNjY3IDQyLjY2NyAwIDAgMSA1MTIgNTU0LjY2N3oiIGZpbGw9IiM1MTUxNTEiLz48L3N2Zz4=)}.tie-image-editor_tool-hand .tie-image-editor_icon{background-image:url(data:image/svg+xml;base64,PHN2ZyBjbGFzcz0iaWNvbiIgdmlld0JveD0iMCAwIDEwMjQgMTAyNCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iMjAwIiBoZWlnaHQ9IjIwMCI+PHBhdGggZD0iTTg3MC40IDIwNC44Yy0xOC42MzcgMC0zNi4xNDcgNS4wMTgtNTEuMiAxMy43NzNWMTUzLjZjMC01Ni40NzQtNDUuOTI2LTEwMi40LTEwMi40LTEwMi40LTIxLjA5NCAwLTQwLjY1MyA2LjQtNTYuOTg2IDE3LjM1N0M2NDUuNzg2IDI4LjY3MiA2MDcuNzk1IDAgNTYzLjIgMHMtODIuNjM3IDI4LjY3Mi05Ni42MTQgNjguNTU3QzQ1MC4zMDQgNTcuNiA0MzAuNjk0IDUxLjIgNDA5LjYgNTEuMmMtNTYuNDc0IDAtMTAyLjQgNDUuOTI2LTEwMi40IDEwMi40djM3Ny40OThsLTY4LjkxNS0xMTkuNDVjLTEzLjM2My0yNC4zMi0zNS4xNzUtNDEuNjI2LTYxLjM4OS00OC43OTQtMjUuNTQ5LTYuOTYzLTUyLjEyMi0zLjI3Ni03NC44NTQgMTAuMzQzLTQ2LjQzOSAyNy44NTMtNjQuMTU0IDkwLjgyOS0zOS40MjQgMTQwLjM5IDEuNTM2IDMuMTIzIDM0LjIwMSA3MC4wNDIgMTM2LjE5MiAyNzMuOTIgNDguMDI1IDk2IDEwMC43MSAxNjQuNjYgMTU2LjYyIDIwMy45ODEgNDMuODc5IDMwLjg3NCA3NC4xOSAzMi40NiA3OS44MjEgMzIuNDZoMjU2YzQzLjU3MSAwIDg0LjA3LTE0LjE4MiAxMjAuNDIzLTQyLjA4NiAzNC4xNS0yNi4yNjUgNjMuNzk1LTY0LjI1NiA4OC4wNjQtMTEyLjg0NCA0Ny44Mi05NS42NDIgNzMuMTEzLTIyNy45NDMgNzMuMTEzLTM4Mi42N3YtMTc5LjJjMC01Ni40NzMtNDUuOTI2LTEwMi40LTEwMi40LTEwMi40em01MS4yIDI4MS42YzAgMTQ2Ljc5LTIzLjM5OCAyNzEuMTU1LTY3LjY4NiAzNTkuNzMxQzgyNS4wMzcgOTAzLjg4NSA3NzMuMzI0IDk3Mi44IDY5MS4yIDk3Mi44SDQzNS43MTJjLTEuOTk3LS4xNTQtMjMuNTUyLTIuNTYtNTYuMDY0LTI2Ljg4LTMyLjQxLTI0LjI2OS04Mi4xNzYtNzUuMzY2LTEzNS4wNjYtMTgxLjI0OEMxNDAuOCA1NTcuMTA3IDEwOC45MDIgNDkxLjcyNSAxMDguNTk1IDQ5MS4xMWMtLjA1MS0uMTAyLS4wNTEtLjE1My0uMTAyLS4yMDQtMTIuODUxLTI1Ljc1NC0zLjczOC01OS40OTUgMTkuOTE3LTczLjY3NyAxMC42NS02LjQgMjMuMDktOC4wOSAzNS4wNzItNC44NjQgMTIuNzQ4IDMuNDgxIDIzLjQ1IDEyLjA4MyAzMC4wNTQgMjQuMTY2LjEwMi4xNTQuMjA1LjM1OS4zMDcuNTEybDc5LjkyMyAxMzguNDk2YzE2LjMzMyAyOS44NSAzNC43MTQgNDIuMzk0IDU0LjYzIDM3LjMyNSAxOS45NjktNS4wNjkgMzAuMDU1LTI1LjAzNyAzMC4wNTUtNTkuMjM4VjE1My42YzAtMjguMjExIDIyLjk4OS01MS4yIDUxLjItNTEuMnM1MS4yIDIyLjk4OSA1MS4yIDUxLjJ2MzMyLjhjMCAxNC4xMzEgMTEuNDY5IDI1LjYgMjUuNiAyNS42czI1LjYtMTEuNDY5IDI1LjYtMjUuNnYtMzg0YzAtMjguMjExIDIyLjk4OS01MS4yIDUxLjItNTEuMnM1MS4yIDIyLjk4OSA1MS4yIDUxLjJ2Mzg0YzAgMTQuMTMxIDExLjQ2OSAyNS42IDI1LjYgMjUuNnMyNS42LTExLjQ2OSAyNS42LTI1LjZWMTUzLjZjMC0yOC4yMTEgMjIuOTg5LTUxLjIgNTEuMi01MS4yczUxLjIgMjIuOTg5IDUxLjIgNTEuMnYzODRjMCAxNC4xMzEgMTEuNDY5IDI1LjYgMjUuNiAyNS42czI1LjYtMTEuNDY5IDI1LjYtMjUuNlYzMDcuMmMwLTI4LjIxMSAyMi45ODktNTEuMiA1MS4yLTUxLjJzNTEuMiAyMi45ODkgNTEuMiA1MS4ydjE3OS4yeiIgZmlsbD0iIzUxNTE1MSIvPjwvc3ZnPg==)}.tie-image-editor_tool-zoomOut .tie-image-editor_icon{background-image:url(data:image/svg+xml;base64,PHN2ZyBjbGFzcz0iaWNvbiIgdmlld0JveD0iMCAwIDEwMjQgMTAyNCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iMjAwIiBoZWlnaHQ9IjIwMCI+PHBhdGggZD0iTTYzNyA0NDNIMzI1Yy00LjQgMC04IDMuNi04IDh2NjBjMCA0LjQgMy42IDggOCA4aDMxMmM0LjQgMCA4LTMuNiA4LTh2LTYwYzAtNC40LTMuNi04LTgtOHoiIGZpbGw9IiM1MTUxNTEiLz48cGF0aCBkPSJNOTIxIDg2NyA3NzUgNzIxYzEyMi4xLTE0OC45IDExMy42LTM2OS41LTI2LTUwOS0xNDgtMTQ4LjEtMzg4LjQtMTQ4LjEtNTM3IDAtMTQ4LjEgMTQ4LjYtMTQ4LjEgMzg5IDAgNTM3IDEzOS41IDEzOS42IDM2MC4xIDE0OC4xIDUwOSAyNmwxNDYgMTQ2YzMuMiAyLjggOC4zIDIuOCAxMSAwbDQzLTQzYzIuOC0yLjcgMi44LTcuOCAwLTExek02OTYgNjk2Yy0xMTguOCAxMTguNy0zMTEuMiAxMTguNy00MzAgMC0xMTguNy0xMTguOC0xMTguNy0zMTEuMiAwLTQzMCAxMTguOC0xMTguNyAzMTEuMi0xMTguNyA0MzAgMCAxMTguNyAxMTguOCAxMTguNyAzMTEuMiAwIDQzMHoiIGZpbGw9IiM1MTUxNTEiLz48L3N2Zz4=)}.tie-image-editor_tool-zoomIn .tie-image-editor_icon{background-image:url(data:image/svg+xml;base64,PHN2ZyBjbGFzcz0iaWNvbiIgdmlld0JveD0iMCAwIDEwMjQgMTAyNCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iMjAwIiBoZWlnaHQ9IjIwMCI+PHBhdGggZD0iTTYzNyA0NDNINTE5VjMwOWMwLTQuNC0zLjYtOC04LThoLTYwYy00LjQgMC04IDMuNi04IDh2MTM0SDMyNWMtNC40IDAtOCAzLjYtOCA4djYwYzAgNC40IDMuNiA4IDggOGgxMTh2MTM0YzAgNC40IDMuNiA4IDggOGg2MGM0LjQgMCA4LTMuNiA4LThWNTE5aDExOGM0LjQgMCA4LTMuNiA4LTh2LTYwYzAtNC40LTMuNi04LTgtOHoiIGZpbGw9IiM1MTUxNTEiLz48cGF0aCBkPSJNOTIxIDg2NyA3NzUgNzIxYzEyMi4xLTE0OC45IDExMy42LTM2OS41LTI2LTUwOS0xNDgtMTQ4LjEtMzg4LjQtMTQ4LjEtNTM3IDAtMTQ4LjEgMTQ4LjYtMTQ4LjEgMzg5IDAgNTM3IDEzOS41IDEzOS42IDM2MC4xIDE0OC4xIDUwOSAyNmwxNDYgMTQ2YzMuMiAyLjggOC4zIDIuOCAxMSAwbDQzLTQzYzIuOC0yLjcgMi44LTcuOCAwLTExek02OTYgNjk2Yy0xMTguOCAxMTguNy0zMTEuMiAxMTguNy00MzAgMC0xMTguNy0xMTguOC0xMTguNy0zMTEuMiAwLTQzMCAxMTguOC0xMTguNyAzMTEuMi0xMTguNyA0MzAgMCAxMTguNyAxMTguOCAxMTguNyAzMTEuMiAwIDQzMHoiIGZpbGw9IiM1MTUxNTEiLz48L3N2Zz4=)}.tie-image-editor_tool-arrow .tie-image-editor_icon{background-image:url(data:image/svg+xml;base64,PHN2ZyBjbGFzcz0iaWNvbiIgdmlld0JveD0iMCAwIDEwMjQgMTAyNCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iMjAwIiBoZWlnaHQ9IjIwMCI+PHBhdGggZD0iTTgyMi43IDc2Ny42IDYyNi40IDU3MS4zbDE2My4xLTkwLjZjMzUuMS0xOS41IDMyLTcxLTUuMy04Ni4xbC01NTEuNi0yMjNjLTM5LjEtMTUuOC03OCAyMy4xLTYyLjIgNjIuMmwyMjMgNTUxLjZjMTUuMSAzNy4zIDY2LjYgNDAuNCA4Ni4xIDUuM2w5MC42LTE2My4xIDE5Ni4zIDE5Ni4zYzcuOCA3LjggMTggMTEuNyAyOC4yIDExLjdzMjAuNC0zLjkgMjguMi0xMS43YzE1LjUtMTUuNSAxNS41LTQwLjctLjEtNTYuM3oiIGZpbGw9IiM1MTUxNTEiLz48L3N2Zz4=)}.tie-image-editor_tool-mosaic .tie-image-editor_icon{background-image:url(data:image/svg+xml;base64,PHN2ZyBjbGFzcz0iaWNvbiIgdmlld0JveD0iMCAwIDEwMjQgMTAyNCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iMjAwIiBoZWlnaHQ9IjIwMCI+PHBhdGggZD0iTTg1LjM0NCAxMDYuNjU2SDI1NnYxNzAuNjU2SDg1LjM0NFYxMDYuNjU2em0wIDM0MS4zNDRIMjU2djE3MC42NTZIODUuMzQ0VjQ0OHpNMjU2IDI3Ny4zNDRoMTcwLjY1NlY0NDhIMjU2VjI3Ny4zNDR6bTE3MC42NTYtMTcwLjY4OGgxNzAuNjU2djE3MC42NTZINDI2LjY1NlYxMDYuNjU2em0wIDM0MS4zNDRoMTcwLjY1NnYxNzAuNjU2SDQyNi42NTZWNDQ4em0xNzAuNjg4LTE3MC42NTZINzY4VjQ0OEg1OTcuMzQ0VjI3Ny4zNDR6bTAgNDkwLjY1Nkg0MjYuNjg4VjYxOC42NTZIMjU2LjAzMlY3NjhIODUuMzc2djE3MC42NTZoMTcwLjY1NlY3ODkuMzEyaDE3MC42NTZ2MTQ5LjM0NGgxNzAuNjU2Vjc4OS4zMTJINzY4djE0OS4zNDRoMTcwLjY1NlY3NjhINzY4VjYxOC42NTZINTk3LjM0NHpNNzY4IDEwNi42NTZoMTcwLjY1NnYxNzAuNjU2SDc2OFYxMDYuNjU2ek03NjggNDQ4aDE3MC42NTZ2MTcwLjY1Nkg3NjhWNDQ4eiIgZmlsbD0iIzUxNTE1MSIgZGF0YS1zcG0tYW5jaG9yLWlkPSJhMzEzeC5zZWFyY2hfaW5kZXguMC5pMS43MDE1M2E4MXBIOFZEdyIvPjwvc3ZnPg==)}.tie-image-editor_tool-reset .tie-image-editor_icon{background-image:url(data:image/svg+xml;base64,PHN2ZyBjbGFzcz0iaWNvbiIgdmlld0JveD0iMCAwIDEwMjQgMTAyNCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iMjAwIiBoZWlnaHQ9IjIwMCI+PHBhdGggZD0iTTgzMS4xNjcgNjA3Ljg1MmMtMTUuMTI4LTYuMDk3LTMyLjA2MyAxLjM1NS0zOC4xNiAxNi40ODMtNDYuMjg5IDExNS42MS0xNTYuNDc5IDE5MC4zNDktMjgxLjEyIDE5MC4zNDktMTA0Ljc3IDAtMTk5LjYwNy01Mi44MzctMjU0LjQ3Ni0xMzguNjRsMTkzLjczNiAzOS41MTRjMTUuODA2IDMuMTYxIDMxLjM4Ni03IDM0LjU0Ny0yMi44MDYgMy4xNjItMTUuODA2LTctMzEuMzg2LTIyLjgwNS0zNC41NDdsLTI1Mi44OTYtNTEuOTM0aC0uOTAzYy0uNjc3LS4yMjYtMS41OC0uMjI2LTIuMjU4LS4yMjZoLTMuODM4Yy0uNjc4IDAtMS4zNTUgMC0yLjAzMy4yMjYtLjQ1MSAwLS42NzcgMC0xLjEyOS4yMjYtLjY3NyAwLTEuMTI5LjIyNi0xLjgwNi4yMjYtLjQ1MiAwLS45MDMuMjI2LTEuMTI5LjIyNi0uNDUyLjIyNS0xLjEyOS4yMjUtMS41OC40NTEtLjQ1Mi4yMjYtLjkwNC4yMjYtMS4zNTUuNDUyLS4yMjYuMjI2LS42NzguMjI2LS45MDQuMjI2LS4yMjUgMC0uMjI1LjIyNS0uNDUxLjIyNWwtMS4zNTUuNjc4LTEuMzU1LjY3N2MtLjQ1MS4yMjYtLjY3Ny40NTItMS4xMjkuNjc4LS40NTEuMjI1LTEuMTI5LjY3Ny0xLjU4LjkwMy0uMjI2IDAtLjIyNi4yMjYtLjQ1Mi4yMjYtLjIyNi4yMjUtLjQ1Mi4yMjUtLjQ1Mi40NTEtLjQ1MS40NTItLjkwMy42NzgtMS41OCAxLjEzLS4yMjYuMjI1LS40NTIuNDUtLjkwMy42NzdsLTEuMzU1IDEuMzU0Yy0uMjI2LjIyNi0uNDUyLjQ1Mi0uNjc4LjkwNC0uNDUxLjQ1MS0uNjc3LjkwMy0xLjEyOSAxLjM1NC0uMjI1LjIyNi0uNDUxLjY3OC0uNjc3LjkwNC0uMjI2LjQ1MS0uNjc3LjkwMy0uOTAzIDEuMzU0LS4yMjYuNDUyLS40NTIuNjc4LS42NzggMS4xM2wtLjY3NyAxLjM1NGMtLjIyNi40NTItLjQ1Mi42NzgtLjQ1MiAxLjEzLS4yMjUuNDUtLjQ1MS45MDItLjY3NyAxLjU4LS4yMjYuNDUxLS4yMjYuNjc3LS40NTIgMS4xMjktLjIyNS42NzctLjQ1MSAxLjEyOS0uNDUxIDEuODA2IDAgLjQ1Mi0uMjI2LjY3OC0uMjI2IDEuMTMtLjIyNi42NzctLjIyNiAxLjM1NC0uNDUyIDIuMjU3djEuMTNMMTQxLjM1IDg4Ny44NDJjLTIuMDMyIDE2LjAzMiA5LjI1OCAzMC43MDkgMjUuMjkgMzIuOTY3IDEuMzU1LjIyNiAyLjQ4NC4yMjYgMy44MzkuMjI2IDE0LjQ1IDAgMjcuMDk1LTEwLjgzOSAyOS4xMjgtMjUuNTE2bDIxLjY3Ni0xNjguNjcyYzIzLjQ4MyAzMS44MzggNTIuMzg2IDU5LjgzNyA4NS41NzggODIuODY4IDYwLjUxNSA0MS43NzMgMTMxLjE5IDYzLjY3NiAyMDUuMDI2IDYzLjY3NnMxNDQuNTEyLTIyLjEyOCAyMDUuMDI2LTYzLjY3NmM1OC45MzQtNDAuNjQzIDEwNC4wOTMtOTcuMzIgMTMwLjczOC0xNjMuNzA0IDUuODctMTUuMTI5LTEuMzU1LTMyLjI5LTE2LjQ4NC0zOC4xNnptMjUuOTY3LTUwNC42NjJjLTE2LjAzMS0yLjAzMi0zMC43MDggOS4yNTgtMzIuOTY2IDI1LjI5TDgwMi40OSAyOTcuMTUyYy0yMy40ODMtMzEuODM4LTUyLjM4Ni01OS44MzctODUuNTc4LTgyLjY0My02MC41MTQtNDEuNzczLTEzMS4xOS02My42NzUtMjA1LjAyNi02My42NzUtNzMuNjEgMC0xNDQuNTExIDIyLjEyOC0yMDUuMDI2IDYzLjY3NS01OC45MzMgNDAuNjQ0LTEwNC4wOTMgOTcuMzItMTMwLjczOCAxNjMuNzA1LTYuMDk2IDE1LjEyOCAxLjM1NSAzMi4wNjMgMTYuNDg0IDM4LjE2IDE1LjEyOCA2LjA5NyAzMi4wNjMtMS4zNTUgMzguMTYtMTYuNDgzIDQ2LjI4OS0xMTUuNjEgMTU2LjQ3OS0xOTAuMzUgMjgxLjEyLTE5MC4zNSAxMDQuNzcxIDAgMTk5LjYwNyA1Mi44MzggMjU0LjQ3NiAxMzguNjQybC0xOTMuNzM2LTM5Ljc0MWMtMTUuODA2LTMuMTYxLTMxLjM4NiA3LTM0LjU0NyAyMi44MDYtMy4xNjEgMTUuODA2IDcgMzEuMzg2IDIyLjgwNiAzNC41NDdsMjUzLjU3MiA1MS43MDhoLjQ1MmMuNjc3LjIyNiAxLjU4LjIyNiAyLjI1OC40NTJoLjQ1MWMuOTA0IDAgMS44MDcuMjI1IDIuNzEuMjI1aDIuMjU4Yy40NTIgMCAuOTAzIDAgMS4xMjktLjIyNS40NTIgMCAuOTAzLS4yMjYgMS4zNTUtLjIyNi40NTEgMCAuNjc3LS4yMjYgMS4xMjktLjIyNnMuOTAzLS4yMjYgMS41OC0uNDUyYy4yMjYgMCAuNjc4LS4yMjUuOTA0LS4yMjUuNjc3LS4yMjYgMS4zNTQtLjQ1MiAxLjgwNi0uNjc4LjIyNiAwIC4yMjYgMCAuNDUyLS4yMjYuOTAzLS4yMjUgMS41OC0uNjc3IDIuNDgzLTEuMTI5LjIyNi0uMjI1LjQ1Mi0uMjI1LjkwNC0uNDUxcy45MDMtLjQ1MiAxLjM1NC0uOTAzYy4yMjYtLjIyNi42NzgtLjQ1Mi45MDQtLjY3OC4yMjUgMCAuMjI1LS4yMjYuNDUxLS4yMjZsLjQ1Mi0uNDUxYy40NTEtLjQ1MiAxLjEyOS0uNjc4IDEuNTgtMS4xM2wuNjc4LS42NzcgMS4zNTUtMS4zNTRjLjIyNS0uMjI2LjQ1MS0uNDUyLjY3Ny0uOTA0LjQ1Mi0uNDUxLjY3Ny0uOTAzIDEuMTI5LTEuMzU0LjIyNi0uMjI2LjQ1Mi0uNjc4LjY3Ny0uOTA0LjIyNi0uNDUxLjY3OC0uOTAzLjkwNC0xLjM1NC4yMjUtLjQ1Mi40NTEtLjY3OC42NzctMS4xM2wuNjc3LTEuMzU0Yy4yMjYtLjQ1Mi40NTItLjkwMy42NzgtMS4xM2wuNjc3LTEuMzU0Yy4yMjYtLjQ1Mi4yMjYtLjkwMy40NTItMS4zNTUuMjI2LS40NTEuMjI2LTEuMTI5LjQ1MS0xLjU4IDAtLjQ1Mi4yMjYtLjY3OC4yMjYtMS4xMy4yMjYtLjY3Ny4yMjYtMS4zNTQuNDUyLTIuMDMyIDAtLjIyNSAwLS40NTEuMjI2LS42Nzd2LS4yMjZsMzIuOTY2LTI1Ni4yODJjMi43MS0xNi4yNTgtOC44MDYtMzAuOTM1LTI0LjgzOC0zMi45Njd6IiBmaWxsPSIjNTE1MTUxIiBkYXRhLXNwbS1hbmNob3ItaWQ9ImEzMTN4LnNlYXJjaF9pbmRleC4wLmk1Ljc5OTQzYTgxM25pbHFIIiBjbGFzcz0ic2VsZWN0ZWQiLz48L3N2Zz4=)}.tie-image-editor_tool-history .tie-image-editor_icon{background-image:url(data:image/svg+xml;base64,PHN2ZyBjbGFzcz0iaWNvbiIgdmlld0JveD0iMCAwIDEwMjQgMTAyNCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iMjAwIiBoZWlnaHQ9IjIwMCI+PHBhdGggZD0iTTUzMy4zMzMgODUuMzMzYy0xNDkuMzMzIDAtMjgxLjYgODEuMDY3LTM0OS44NjYgMjA0LjhMODUuMzMzIDE5MnYyNzcuMzMzaDI3Ny4zMzRMMjQzLjIgMzQ5Ljg2N2M1NS40NjctMTA2LjY2NyAxNjIuMTMzLTE3OS4yIDI5MC4xMzMtMTc5LjIgMTc0LjkzNCAwIDMyMCAxNDUuMDY2IDMyMCAzMjAgMCAxNzQuOTMzLTE0NS4wNjYgMzIwLTMyMCAzMjAtMTQwLjggMC0yNTYtODkuNi0zMDIuOTMzLTIxMy4zMzRoLTg5LjZDMTg3LjczMyA3NjggMzQ1LjYgODk2IDUzMy4zMzMgODk2YzIyNi4xMzQgMCA0MDUuMzM0LTE4My40NjcgNDA1LjMzNC00MDUuMzMzUzc1NS4yIDg1LjMzMyA1MzMuMzMzIDg1LjMzM3ptLTY0IDIxMy4zMzR2MjE3LjZsMjAwLjUzNCAxMTkuNDY2TDcwNCA1ODAuMjY3bC0xNzAuNjY3LTEwMi40di0xNzkuMmgtNjR6IiBvcGFjaXR5PSIuOSIgZmlsbD0iIzUxNTE1MSIvPjwvc3ZnPg==)}.tie-image-editor_tool-subtract .tie-image-editor_icon{background-image:url(data:image/svg+xml;base64,PHN2ZyBjbGFzcz0iaWNvbiIgdmlld0JveD0iMCAwIDEwMjQgMTAyNCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iMjAwIiBoZWlnaHQ9IjIwMCI+PHBhdGggZD0iTTUxMiA5NmMyMjkuNzYgMCA0MTYgMTg2LjI0IDQxNiA0MTZTNzQxLjc2IDkyOCA1MTIgOTI4IDk2IDc0MS43NiA5NiA1MTIgMjgyLjI0IDk2IDUxMiA5NnptMTk2LjI2NyAzODRIMzE1LjczM2ExNy4wNjcgMTcuMDY3IDAgMCAwLTE3LjA2NiAxNy4wNjd2MjkuODY2YzAgOS4zODcgNy42OCAxNy4wNjcgMTcuMDY2IDE3LjA2N2gzOTIuNTM0YTE3LjA2NyAxNy4wNjcgMCAwIDAgMTcuMDY2LTE3LjA2N3YtMjkuODY2QTE3LjA2NyAxNy4wNjcgMCAwIDAgNzA4LjI2NyA0ODB6IiBmaWxsPSIjNTE1MTUxIiBmaWxsLW9wYWNpdHk9Ii44NyIvPjwvc3ZnPg==)}.tie-image-editor_tool-add .tie-image-editor_icon{background-image:url(data:image/svg+xml;base64,PHN2ZyBjbGFzcz0iaWNvbiIgdmlld0JveD0iMCAwIDEwMjQgMTAyNCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iMjAwIiBoZWlnaHQ9IjIwMCI+PHBhdGggZD0iTTUxMiA5NmMyMjkuNzYgMCA0MTYgMTg2LjI0IDQxNiA0MTZTNzQxLjc2IDkyOCA1MTIgOTI4IDk2IDc0MS43NiA5NiA1MTIgMjgyLjI0IDk2IDUxMiA5NnptMTQuOTMzIDIwMi42NjdoLTI5Ljg2NkExNy4wNjcgMTcuMDY3IDAgMCAwIDQ4MCAzMTUuNzMzVjQ4MEgzMTUuNzMzYTE3LjA2NyAxNy4wNjcgMCAwIDAtMTcuMDY2IDE3LjA2N3YyOS44NjZjMCA5LjM4NyA3LjY4IDE3LjA2NyAxNy4wNjYgMTcuMDY3SDQ4MHYxNjQuMjY3YzAgOS4zODYgNy42OCAxNy4wNjYgMTcuMDY3IDE3LjA2NmgyOS44NjZBMTcuMDY3IDE3LjA2NyAwIDAgMCA1NDQgNzA4LjI2N1Y1NDRoMTY0LjI2N2ExNy4wNjcgMTcuMDY3IDAgMCAwIDE3LjA2Ni0xNy4wNjd2LTI5Ljg2NkExNy4wNjcgMTcuMDY3IDAgMCAwIDcwOC4yNjcgNDgwSDU0NFYzMTUuNzMzYTE3LjA2NyAxNy4wNjcgMCAwIDAtMTcuMDY3LTE3LjA2NnoiIGZpbGw9IiM1MTUxNTEiIGZpbGwtb3BhY2l0eT0iLjg3Ii8+PC9zdmc+)}.tie-image-editor_tool-done .tie-image-editor_icon{background-image:url(data:image/svg+xml;base64,PHN2ZyBjbGFzcz0iaWNvbiIgdmlld0JveD0iMCAwIDEwMjQgMTAyNCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iMjAwIiBoZWlnaHQ9IjIwMCI+PHBhdGggZD0ibTM0MS4wOSA0NjkuMDkgNzIuNzggNzIuNzhhNDguMjcgNDguMjcgMCAwIDAgNjguMjYgMEw3NDMuNCAyODAuNmE0OC4yNiA0OC4yNiAwIDAgMSA1NS43MS05bDM3IDE4LjVhNDguMjYgNDguMjYgMCAwIDEgMTIuNTQgNzcuMjlMNDc4LjU0IDczNy40NmE0OC4yNyA0OC4yNyAwIDAgMS02NC4yNyAzLjU0bC0yMTctMTczLjZjLTI5Ljg2LTIzLjktMjEuNC03MS4zOCAxNC44OS04My40N2w3OS41NC0yNi41MmE0OC4yNiA0OC4yNiAwIDAgMSA0OS4zOSAxMS42OHoiIGZpbGw9IiM1MTUxNTEiLz48L3N2Zz4=)}.tie-image-editor_tool-clear .tie-image-editor_icon{background-image:url(data:image/svg+xml;base64,PHN2ZyBjbGFzcz0iaWNvbiIgdmlld0JveD0iMCAwIDEwMjQgMTAyNCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iMjAwIiBoZWlnaHQ9IjIwMCI+PHBhdGggZD0ibTI1MS43MzMgMjYwLjI2MyA4LjUyOC04LjUyOHE1OS43MzYtNTkuNzM2IDExOS40NzIgMGwzOTIuNTMgMzkyLjUzcTU5LjczNiA1OS43MzYgMCAxMTkuNDcybC04LjUyOCA4LjUyOHEtNTkuNzM3IDU5LjczNi0xMTkuNDczIDBsLTM5Mi41My0zOTIuNTNxLTU5LjczNi01OS43MzYgMC0xMTkuNDcyWiIgZmlsbD0iIzUxNTE1MSIvPjxwYXRoIGQ9Im0yNTEuNzMzIDY0NC4yNjQgMzkyLjUyOS0zOTIuNTI5cTU5LjczNi01OS43MzYgMTE5LjQ3MyAwbDguNTI3IDguNTI4cTU5LjczNyA1OS43MzYgMCAxMTkuNDczTDM3OS43MzMgNzcyLjI2NXEtNTkuNzM2IDU5LjczNi0xMTkuNDcyIDBsLTguNTI4LTguNTI4cS01OS43MzctNTkuNzM2IDAtMTE5LjQ3M1oiIGZpbGw9IiM1MTUxNTEiLz48L3N2Zz4=)}.tie-image-editor_tool-upload .tie-image-editor_input{position:absolute;top:0;right:0;bottom:0;left:0;visibility:hidden}.tie-image-editor_tool-item .tie-image-editor_icon--disabled,.tie-image-editor_tool-item .tie-image-editor_icon--disabled:hover{background-color:#ccc;cursor:not-allowed;border-radius:2px;opacity:.5}.tie-image-editor_tool-item--checked{background-color:#fff}.tie-image-editor_color-popover{display:inline-block;vertical-align:middle}.tie-image-editor_color{width:20px;height:20px}.tie-image-editor_tool-reset,.tie-image-editor_tool-upload,.tie-image-editor_tool-download,.tie-image-editor_tool-zoomIn,.tie-image-editor_tool-zoomOut,.tie-image-editor_tool-redo,.tie-image-editor_tool-undo,.tie-image-editor_tool-hand,.tie-image-editor_tool-rotate,.tie-image-editor_tool-flip,.tie-image-editor_tool-reset,.tie-image-editor_tool-history{float:right}.tie-image-editor_icon-close,.tie-image-editor_icon-check{color:#666;font-size:14px;margin:0 8px;cursor:pointer}.tie-image-editor_tool-paint-size{border-radius:50%;border:1px solid #666;margin-right:8px;cursor:pointer}.tie-image-editor_tool-paint-size--checked{border:1px solid blue;background-color:blue}.tie-image-editor_tool-paint-color{width:20px;height:20px;margin-right:8px;cursor:pointer;border:1px solid #666}.tie-image-editor_tool-paint-size:hover,.tie-image-editor_tool-paint-color:hover{box-shadow:0px 0px 6px blue}.tie-image-editor_tool-paint-content,.tie-image-editor_tool-paint-size-wrapper,.tie-image-editor_tool-paint-color-wrapper{display:flex;align-items:center}.tie-image-editor_tool-rotate-pop-content{padding:4px 16px 16px;width:280px}.tie-image-editor_tool-crop-pop_icon{color:#515151;cursor:pointer}.tie-image-editor_tool-crop-pop_icon:hover{color:blue}.tie-image-editor_tool-crop-pop_icon:first-child{margin-right:12px}.tie-image-editor-history_pop{max-height:200px;overflow-y:auto}.tie-image-editor-history_pop-len{color:#b3111c;font-weight:bold}.tie-image-editor-history_pop-title{display:flex;align-items:center;justify-content:center;line-height:24px}.tie-image-editor-history_pop-item{display:flex;align-items:center;width:120px;padding:2px 8px;line-height:22px;cursor:pointer}.tie-image-editor-history_pop-item:hover{background-color:#f3f9ff}.tie-image-editor-history_pop-item--checked:hover,.tie-image-editor-history_pop-item--checked{background-color:#fff6ee}.tie-image-editor-history_pop-item-num{margin-right:4px}.tie-image-editor-history_pop-item-icon{font-size:14px;margin-left:4px;color:#b3111c}.tie-image-editor_tool-upload-input{z-index:2;position:absolute;width:100%;height:100%;opacity:0;cursor:pointer}.tie-image-editor_tool-scale-pop-content{width:200px;display:flex;align-items:center;justify-content:space-between}.tie-image-editor_tool-scale-pop-icons{margin-left:18px}.tie-image-editor_tool-scale-pop-icon{padding:4px;margin:0 4px;width:16px;height:16px;cursor:pointer;border-radius:50%}.tie-image-editor_tool-scale-pop-icon:hover{opacity:.8}.tie-image-editor_tool-scale-pop-zoom{width:50px;font-weight:bold}.tie-popover__target{display:inline-block}.tie-popover__popper{z-index:1000;padding:8px;background:#fff;border:1px solid rgba(0,0,0,0);border-radius:4px;box-shadow:0 2px 10px rgba(0,0,0,.14) \9 ;filter:drop-shadow(0 2px 10px rgba(0, 0, 0, 0.14))}.tie-popover__popper::after{position:absolute;display:block;content:""}.tie-popover__popper[x-placement^=top]::after{bottom:-11px;left:0;width:100%;height:10px}.tie-popover__popper[x-placement^=top]>div>div>.tie-popper__arrow{bottom:-8px;border-bottom-width:0;filter:drop-shadow(0 2px 12px rgba(0, 0, 0, 0.05))}.tie-popover__popper[x-placement^=top]>div>div>.tie-popper__arrow::after{bottom:1px;margin-left:-8px;border-top-color:#fff;border-bottom-width:0}.tie-popover__popper[x-placement^=bottom]::after{top:-11px;left:0;width:100%;height:10px}.tie-popover__popper[x-placement^=bottom]>div>div>.tie-popper__arrow{top:-8px;border-top-width:0}.tie-popover__popper[x-placement^=bottom]>div>div>.tie-popper__arrow::after{top:1px;margin-left:-8px;border-top-width:0;border-bottom-color:#fff}.tie-popover__popper[x-placement^=right]::after{top:0;left:-11px;width:10px;height:100%}.tie-popover__popper[x-placement^=right]>div>div>.tie-popper__arrow{left:-8px;border-left-width:0}.tie-popover__popper[x-placement^=right]>div>div>.tie-popper__arrow::after{left:1px;margin-top:-8px;border-right-color:#fff;border-left-width:0}.tie-popover__popper[x-placement^=left]::after{top:0;right:-11px;width:10px;height:100%}.tie-popover__popper[x-placement^=left]>div>div>.tie-popper__arrow{right:-8px;border-right-width:0}.tie-popover__popper[x-placement^=left]>div>div>.tie-popper__arrow::after{right:1px;margin-top:-8px;border-right-width:0;border-left-color:#fff}.tie-popover__popper .tie-popper__arrow,.tie-popover__popper .tie-popper__arrow::after{position:absolute;width:0;height:0;border-color:rgba(0,0,0,0);border-style:solid;border-width:8px;content:""}
body,html,#root{width:100%;height:100%}.tie-image-editor{display:flex;flex-direction:column;width:100%;max-width:1200px;height:100%}.tie-image-editor_modal__wrapper{flex-grow:1}.tie-image-editor_target{width:100%;height:100%;outline:none}.tie-image-editor_tool{padding:8px;background-color:#e5e6e7;border-radius:4px 4px 0 0}.tie-image-editor_tool-item{float:left;display:flex;align-items:center;justify-content:center;width:24px;height:24px;margin-right:8px;border-radius:4px;line-height:1}.tie-image-editor_tool-item .tie-image-editor_icon{display:block;width:18px;height:18px;background-size:100% 100%;background-repeat:no-repeat;cursor:pointer;opacity:.8}.tie-image-editor_tool-item .tie-image-editor_icon:hover{opacity:1}.tie-image-editor_tool-item--disabled .tie-image-editor_icon,.tie-image-editor_tool-item--disabled .tie-image-editor_icon:hover{opacity:.5;cursor:not-allowed}.tie-image-editor_tool-crop .tie-image-editor_icon{background-image:url(data:image/svg+xml;base64,PHN2ZyBjbGFzcz0iaWNvbiIgd2lkdGg9IjIwMCIgaGVpZ2h0PSIyMDAiIHZpZXdCb3g9IjAgMCAxMDI0IDEwMjQiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZmlsbD0iIzUxNTE1MSIgZD0iTTg4NC43MzEgNjk4LjM2Nkg3NzIuOTA5VjI4OC4zNjVjMC0yMC41ODQtMTYuNjg1LTM3LjI3NS0zNy4yNjktMzcuMjc1SDMyNS42MzlWMTM5LjI3NGMwLTIwLjU4Mi0xNi42OTMtMzcuMjczLTM3LjI3NS0zNy4yNzMtMjAuNTgyIDAtMzcuMjc1IDE2LjY5MS0zNy4yNzUgMzcuMjczVjI1MS4wOUgxMzkuMjc1Yy0yMC41ODQgMC0zNy4yNzUgMTYuNjkxLTM3LjI3NSAzNy4yNzUgMCAyMC41ODIgMTYuNjkxIDM3LjI3MyAzNy4yNzUgMzcuMjczSDI1MS4wOXY0MTAuMDAzYzAgMjAuNTgyIDE2LjY5MyAzNy4yNjkgMzcuMjc1IDM3LjI2OWg0MTAuMDAzdjExMS44MmMwIDIwLjU4MyAxNi42ODUgMzcuMjY5IDM3LjI2NyAzNy4yNjkgMjAuNTg5IDAgMzcuMjc1LTE2LjY4NSAzNy4yNzUtMzcuMjY5Vjc3Mi45MWgxMTEuODIyYzIwLjU4MiAwIDM3LjI2OS0xNi42ODcgMzcuMjY5LTM3LjI2OS0uMDAxLTIwLjU4OC0xNi42ODgtMzcuMjc1LTM3LjI3LTM3LjI3NXptLTU1OS4wOTIgMFYzMjUuNjM4aDM3Mi43Mjh2MzcyLjcyOEgzMjUuNjM5em0wIDAiLz48L3N2Zz4=)}.tie-image-editor_tool-flip .tie-image-editor_icon{background-image:url(data:image/svg+xml;base64,PHN2ZyBjbGFzcz0iaWNvbiIgdmlld0JveD0iMCAwIDEwMjQgMTAyNCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iMjAwIiBoZWlnaHQ9IjIwMCI+PHBhdGggZD0iTTY0MCA4OTZoODUuMzMzdi04NS4zMzNINjQwVjg5NnptMTcwLjY2Ny01MTJIODk2di04NS4zMzNoLTg1LjMzM1YzODR6TTEyOCAyMTMuMzMzdjU5Ny4zMzRDMTI4IDg1Ny44MTMgMTY2LjE4NyA4OTYgMjEzLjMzMyA4OTZIMzg0di04NS4zMzNIMjEzLjMzM1YyMTMuMzMzSDM4NFYxMjhIMjEzLjMzM0MxNjYuMTg3IDEyOCAxMjggMTY2LjE4NyAxMjggMjEzLjMzM3pNODEwLjY2NyAxMjh2ODUuMzMzSDg5NkM4OTYgMTY2LjE4NyA4NTcuODEzIDEyOCA4MTAuNjY3IDEyOHpNNDY5LjMzMyA5ODEuMzMzaDg1LjMzNFY0Mi42NjdoLTg1LjMzNHY5MzguNjY2em0zNDEuMzM0LTI1Nkg4OTZWNjQwaC04NS4zMzN2ODUuMzMzek02NDAgMjEzLjMzM2g4NS4zMzNWMTI4SDY0MHY4NS4zMzN6bTE3MC42NjcgMzQxLjMzNEg4OTZ2LTg1LjMzNGgtODUuMzMzdjg1LjMzNHptMCAzNDEuMzMzQzg1Ny44MTMgODk2IDg5NiA4NTcuODEzIDg5NiA4MTAuNjY3aC04NS4zMzNWODk2eiIgZmlsbD0iIzUxNTE1MSIvPjwvc3ZnPg==)}.tie-image-editor_tool-flipX .tie-image-editor_icon{background-image:url(data:image/svg+xml;base64,PHN2ZyBjbGFzcz0iaWNvbiIgdmlld0JveD0iMCAwIDEwMjQgMTAyNCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iMjAwIiBoZWlnaHQ9IjIwMCI+PHBhdGggZD0iTTIxMC43NzMgNTIyLjI0YTQyLjY2NyA0Mi42NjcgMCAwIDAtNTEuNjI2IDMyLjQyN0wxMzguMjQgNjM3LjQ0YTQyLjY2NyA0Mi42NjcgMCAwIDAgMzIuNDI3IDUwLjM0NyA0Mi42NjcgNDIuNjY3IDAgMCAwIDUxLjYyNi0zMS4xNDdsMjAuOTA3LTgyLjc3M2E0Mi42NjcgNDIuNjY3IDAgMCAwLTMyLjQyNy01MS42Mjd6bTcyNS4zMzQgMzIwLjg1M0w3NjUuNDQgMTYwLjQyN0E0Mi42NjcgNDIuNjY3IDAgMCAwIDcyNS4zMzMgMTI4aC0xMjhhNDIuNjY3IDQyLjY2NyAwIDAgMC00Mi42NjYgNDIuNjY3djY4Mi42NjZBNDIuNjY3IDQyLjY2NyAwIDAgMCA1OTcuMzMzIDg5Nkg4OTZhNDIuNjY3IDQyLjY2NyAwIDAgMCAzMy43MDctMTYuMjEzIDQyLjY2NyA0Mi42NjcgMCAwIDAgOC45Ni0zNi42OTR6TTY0MCA4MTAuNjY3VjIxMy4zMzNoNTIuMDUzbDE0OS4zMzQgNTk3LjMzNHpNMjczLjA2NyAyNzMuOTJhNDIuNjY3IDQyLjY2NyAwIDAgMC01Mi4wNTQgMzEuMTQ3bC0yMC40OCA4Mi43NzNhNDIuNjY3IDQyLjY2NyAwIDAgMCAzMS4xNDcgNTEuNjI3aDEwLjI0YTQyLjY2NyA0Mi42NjcgMCAwIDAgNDIuNjY3LTMyLjQyN2wyMC40OC04Mi43NzNhNDIuNjY3IDQyLjY2NyAwIDAgMC0zMi01MC4zNDd6bTQ3LjM2LTYwLjU4N2g4NS4zMzNhNDIuNjY3IDQyLjY2NyAwIDAgMCAwLTg1LjMzM2gtODUuMzMzYTQyLjY2NyA0Mi42NjcgMCAwIDAgMCA4NS4zMzN6bS0xMzkuNTIgNTk3LjMzNGE0Mi42NjcgNDIuNjY3IDAgMCAwLTg1LjMzNC0xMC4yNGwtMTAuMjQgNDIuNjY2YTQyLjY2NyA0Mi42NjcgMCAwIDAgNy42OCAzNi42OTRBNDIuNjY3IDQyLjY2NyAwIDAgMCAxMjggODk2aDQyLjY2N2E0Mi42NjcgNDIuNjY3IDAgMCAwIDEwLjI0LTg1LjMzM3ptMjQ1Ljc2LTUzMi45MDdBNDIuNjY3IDQyLjY2NyAwIDAgMCAzODQgMzIwLjQyN3Y4NS4zMzNhNDIuNjY3IDQyLjY2NyAwIDAgMCA4NS4zMzMgMHYtODUuMzMzYTQyLjY2NyA0Mi42NjcgMCAwIDAtNDIuNjY2LTQyLjY2N3ptMCAyNTZBNDIuNjY3IDQyLjY2NyAwIDAgMCAzODQgNTc2LjQyN3Y4NS4zMzNhNDIuNjY3IDQyLjY2NyAwIDAgMCA4NS4zMzMgMHYtODUuMzMzYTQyLjY2NyA0Mi42NjcgMCAwIDAtNDIuNjY2LTQyLjY2N3ptMCAyNTZhNDIuNjY3IDQyLjY2NyAwIDAgMC0zNi42OTQgMjAuOTA3aC00OC42NGE0Mi42NjcgNDIuNjY3IDAgMCAwIDAgODUuMzMzaDg1LjMzNGE0Mi42NjcgNDIuNjY3IDAgMCAwIDQyLjY2Ni00Mi42Njd2LTIwLjkwNmE0Mi42NjcgNDIuNjY3IDAgMCAwLTQyLjY2Ni00Mi42Njd6IiBmaWxsPSIjNTE1MTUxIi8+PC9zdmc+)}.tie-image-editor_tool-flipY .tie-image-editor_icon{background-image:url(data:image/svg+xml;base64,PHN2ZyBjbGFzcz0iaWNvbiIgdmlld0JveD0iMCAwIDEwMjQgMTAyNCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iMjAwIiBoZWlnaHQ9IjIwMCI+PHBhdGggZD0iTTU2My42MjcgMjQzLjJhNDIuNjY3IDQyLjY2NyAwIDAgMCAxMC4yNCAwbDgyLjc3My0yMC45MDdhNDIuNjY3IDQyLjY2NyAwIDAgMCAzMS4xNDctNTEuNjI2IDQyLjY2NyA0Mi42NjcgMCAwIDAtNTEuNjI3LTMxLjE0N2wtODEuNDkzIDE5LjYyN2E0Mi42NjcgNDIuNjY3IDAgMCAwIDEwLjI0IDg1LjMzM3pNNDA1Ljc2IDM4NGgtODUuMzMzYTQyLjY2NyA0Mi42NjcgMCAxIDAgMCA4NS4zMzNoODUuMzMzYTQyLjY2NyA0Mi42NjcgMCAwIDAgMC04NS4zMzN6bTE3MC42NjcgMGE0Mi42NjcgNDIuNjY3IDAgMSAwIDAgODUuMzMzaDg1LjMzM2E0Mi42NjcgNDIuNjY3IDAgMCAwIDAtODUuMzMzem0tMjYxLjEyLTc4LjkzM2gxMC4yNGw4Mi43NzMtMjAuNDhhNDIuNjY3IDQyLjY2NyAwIDAgMC0yMC40OC04NC4wNTRsLTgyLjc3MyAyMC40OGE0Mi42NjcgNDIuNjY3IDAgMCAwIDEwLjI0IDg1LjMzNHptLTE0NC42NCAxNDMuMzZhNDIuNjY3IDQyLjY2NyAwIDAgMCA0Mi42NjYtNDIuNjY3di04NS4zMzNhNDIuNjY3IDQyLjY2NyAwIDAgMC04NS4zMzMgMHY4NS4zMzNhNDIuNjY3IDQyLjY2NyAwIDAgMCA0Mi42NjcgNDIuNjY3em03MDkuMTItMzU0LjEzNGE0Mi42NjcgNDIuNjY3IDAgMCAwLTM2LjY5NC04Ljk2bC00Mi42NjYgMTAuMjRBNDIuNjY3IDQyLjY2NyAwIDAgMCA3NjkuMjggMTQ3LjJhNDIuNjY3IDQyLjY2NyAwIDAgMCA0Mi42NjcgMzIuNDI3IDQyLjY2NyA0Mi42NjcgMCAwIDAgODQuMDUzLTguOTZWMTI4YTQyLjY2NyA0Mi42NjcgMCAwIDAtMTYuMjEzLTMzLjcwN3ptLTI2LjQ1NCAyMDQuMzc0YTQyLjY2NyA0Mi42NjcgMCAwIDAtNDIuNjY2IDQyLjY2NnY0OC42NGE0Mi42NjcgNDIuNjY3IDAgMCAwIDIxLjc2IDc5LjM2aDIwLjkwNkE0Mi42NjcgNDIuNjY3IDAgMCAwIDg5NiA0MjYuNjY3di04NS4zMzRhNDIuNjY3IDQyLjY2NyAwIDAgMC00Mi42NjctNDIuNjY2em0wIDI1NkgxNzAuNjY3QTQyLjY2NyA0Mi42NjcgMCAwIDAgMTI4IDU5Ny4zMzN2MTI4QTQyLjY2NyA0Mi42NjcgMCAwIDAgMTYwLjQyNyA3NjhsNjgyLjY2NiAxNzAuNjY3YTQyLjY2NyA0Mi42NjcgMCAwIDAgMTAuMjQgMEE0Mi42NjcgNDIuNjY3IDAgMCAwIDg5NiA4OTZWNTk3LjMzM2E0Mi42NjcgNDIuNjY3IDAgMCAwLTQyLjY2Ny00Mi42NjZ6bS00Mi42NjYgMjg2LjcyTDIxMy4zMzMgNjkyLjA1M1Y2NDBoNTk3LjMzNHoiIGZpbGw9IiM1MTUxNTEiLz48L3N2Zz4=)}.tie-image-editor_tool-rotate .tie-image-editor_icon{background-image:url(data:image/svg+xml;base64,PHN2ZyBjbGFzcz0iaWNvbiIgdmlld0JveD0iMCAwIDEwMjQgMTAyNCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iMjAwIiBoZWlnaHQ9IjIwMCI+PHBhdGggZD0iTTQ4MC41IDI1MS4yYzEzLTEuNiAyNS45LTIuNCAzOC44LTIuNXY2My45YzAgNi41IDcuNSAxMC4xIDEyLjYgNi4xTDY2MCAyMTcuNmM0LTMuMiA0LTkuMiAwLTEyLjNsLTEyOC0xMDFjLTUuMS00LTEyLjYtLjQtMTIuNiA2LjFsLS4yIDY0Yy0xMTguNi41LTIzNS44IDUzLjQtMzE0LjYgMTU0LjItNjkuNiA4OS4yLTk1LjcgMTk4LjYtODEuMSAzMDIuNGg3NC45Yy0uOS01LjMtMS43LTEwLjctMi40LTE2LjEtNS4xLTQyLjEtMi4xLTg0LjEgOC45LTEyNC44IDExLjQtNDIuMiAzMS04MS4xIDU4LjEtMTE1LjggMjcuMi0zNC43IDYwLjMtNjMuMiA5OC40LTg0LjMgMzctMjAuNiA3Ni45LTMzLjYgMTE5LjEtMzguOHoiIGZpbGw9IiM1MTUxNTEiLz48cGF0aCBkPSJNODgwIDQxOEgzNTJjLTE3LjcgMC0zMiAxNC4zLTMyIDMydjQxNGMwIDE3LjcgMTQuMyAzMiAzMiAzMmg1MjhjMTcuNyAwIDMyLTE0LjMgMzItMzJWNDUwYzAtMTcuNy0xNC4zLTMyLTMyLTMyem0tNDQgNDAySDM5NlY0OTRoNDQwdjMyNnoiIGZpbGw9IiM1MTUxNTEiLz48L3N2Zz4=)}.tie-image-editor_tool-draw .tie-image-editor_icon{background-image:url(data:image/svg+xml;base64,PHN2ZyBjbGFzcz0iaWNvbiIgdmlld0JveD0iMCAwIDEwMjQgMTAyNCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iMjAwIiBoZWlnaHQ9IjIwMCI+PHBhdGggZD0iTTgxOS4yIDEwMi40aC01Ni41MzVjLTE4Ljc3IDAtNDUuMDA1IDEwLjg3NS01OC4yNjYgMjQuMTM2bC01MS4yIDUxLjItMjQuMTI1LTI0LjEzNmMtMjYuNTczLTI2LjUzMi03MC0yNi41MzItOTYuNTc0IDBMMjY2Ljk5OCA0MTkuMTAzYTM0LjE2IDM0LjE2IDAgMCAwIDAgNDguMjcxbDEyLjA3MyAxMi4wNzMgMjg5LjYyOC0yODkuNjM4IDM2LjIyOSAzNi4yMzktMzYyLjAyNSAzNjIuMDI1LS4wMy0uMDMtOTIuMTcgOTIuMjNjLTI2LjU3NCAyNi41MjMtNDguMzAzIDc4Ljk3Mi00OC4yNzIgMTE2LjUwMUwxMDIuNCA5MjEuNmgxMjQuODI2YzM3LjQ5OCAwIDg5Ljk2OC0yMS43MyAxMTYuNS00OC4yNjFsOTIuMjQyLTkyLjIwMSA0NjEuNDk2LTQ2MS40OTZjMTMuMjYxLTEzLjI3MSAyNC4xMzYtMzkuNTA2IDI0LjEzNi01OC4yNzZWMjA0LjhMODE5LjIgMTAyLjR6TTI5NS40NjUgODI1LjA2OGMtMTMuNzQyIDEzLjczMS00OC44MDQgMjguMzAzLTY4LjI0IDI4LjMwM2wtNTYuNTM0LS4wM3YtNTYuNTY3Yy0uMDMxLTE5LjQyNSAxNC41LTU0LjQ2NiAyOC4yNzItNjguMjI5bDQzLjkzLTQzLjk0IDk2LjUzMiA5Ni41NDMtNDMuOTYgNDMuOTJ6bTkyLjIzMi05Mi4yMDEtOTYuNTMzLTk2LjUzM0w2NTMuMTkgMjc0LjNsOTYuNTc0IDk2LjU3My0zNjIuMDY2IDM2MS45OTV6TTc5OC4wMzQgMzIyLjZsLTk2LjU2My05Ni42MDQgNzIuMzk3LTcyLjM5NyA5Ni42MDQgOTYuNjA0LTcyLjQzOCA3Mi4zOTd6IiBmaWxsPSIjNTE1MTUxIi8+PC9zdmc+)}.tie-image-editor_tool-circle .tie-image-editor_icon{background-image:url(data:image/svg+xml;base64,PHN2ZyBjbGFzcz0iaWNvbiIgd2lkdGg9IjIwMCIgaGVpZ2h0PSIyMDAiIHZpZXdCb3g9IjAgMCAxMDI0IDEwMjQiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZmlsbD0iIzUxNTE1MSIgZD0iTTUxMiA5NjBDMjY0Ljk2IDk2MCA2NCA3NTkuMDQgNjQgNTEyUzI2NC45NiA2NCA1MTIgNjRzNDQ4IDIwMC45NiA0NDggNDQ4LTIwMC45NiA0NDgtNDQ4IDQ0OHptMC04MzJjLTIxMS43NDQgMC0zODQgMTcyLjI1Ni0zODQgMzg0czE3Mi4yNTYgMzg0IDM4NCAzODQgMzg0LTE3Mi4yNTYgMzg0LTM4NC0xNzIuMjU2LTM4NC0zODQtMzg0eiIvPjwvc3ZnPg==)}.tie-image-editor_tool-rect .tie-image-editor_icon{background-image:url(data:image/svg+xml;base64,PHN2ZyBjbGFzcz0iaWNvbiIgdmlld0JveD0iMCAwIDEwMjQgMTAyNCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iMjAwIiBoZWlnaHQ9IjIwMCI+PHBhdGggZD0iTTg0MS4zNCA5NTkuMzZIMTgyLjY2Yy02NS4wNiAwLTExNy45OS01Mi45NC0xMTcuOTktMTE4LjAyVjE4Mi42OWMwLTY1LjA4IDUyLjk0LTExOC4wNCAxMTcuOTktMTE4LjA0aDY1OC42OGM2NS4wNiAwIDExNy45OSA1Mi45NiAxMTcuOTkgMTE4LjA0djY1OC42NWMwIDY1LjA4LTUyLjkzIDExOC4wMi0xMTcuOTkgMTE4LjAyek0xODIuNjYgMTQyLjE3Yy0yMi4zMSAwLTQwLjUxIDE4LjE4LTQwLjUxIDQwLjUxdjY1OC42NWMwIDIyLjM0IDE4LjIgNDAuNDkgNDAuNTEgNDAuNDloNjU4LjY4YzIyLjMxIDAgNDAuNTEtMTguMTUgNDAuNTEtNDAuNDlWMTgyLjY5YzAtMjIuMzQtMTguMi00MC41MS00MC41MS00MC41MUgxODIuNjZ6IiBmaWxsPSIjNTE1MTUxIi8+PC9zdmc+)}.tie-image-editor_tool-undo .tie-image-editor_icon{background-image:url(data:image/svg+xml;base64,PHN2ZyBjbGFzcz0iaWNvbiIgdmlld0JveD0iMCAwIDEwMjQgMTAyNCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iMjAwIiBoZWlnaHQ9IjIwMCI+PHBhdGggZD0iTTI1OC45ODcgNTA5LjAxM0M1MzYuNzQ3IDIzNS4zOTIgOTU2LjAzMiAzOTEuNDY3IDk1OC4yOTMgNjk3LjlsLTcuNzY1IDIuNjQ1Yy0xNzYuODUzLTIxOC4xMTItNDE3LjAyNC0yOTEuODQtNjA1Ljg2Ny0xMDYuNDUzYTQuNTIzIDQuNTIzIDAgMCAwLS4wODUgNi4zMTRsMTE3LjU5IDExNy41OWE0LjI2NyA0LjI2NyAwIDAgMS0yLjk4NyA3LjI1M0gxMzIuMjY3YTQuMjY3IDQuMjY3IDAgMCAxLTQuMjY3LTQuMjY3VjM5NC4yNGMwLTMuODQgNC42MDgtNS43MTcgNy4yNTMtMi45ODdsMTE3Ljc2IDExNy43NmMxLjYyMiAxLjcwNyA0LjI2NyAxLjYyMiA1Ljg4OCAweiIgZmlsbD0iIzUxNTE1MSIvPjwvc3ZnPg==)}.tie-image-editor_tool-redo .tie-image-editor_icon{background-image:url(data:image/svg+xml;base64,PHN2ZyBjbGFzcz0iaWNvbiIgdmlld0JveD0iMCAwIDEwMjQgMTAyNCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iMjAwIiBoZWlnaHQ9IjIwMCI+PHBhdGggZD0iTTc2NS4wMTMgNTA5LjAxM0M0ODcuMjUzIDIzNS4zOTIgNjcuOTY4IDM5MS40NjcgNjUuNzkyIDY5Ny45NDFsNy43NjUgMi42NDZjMTc2Ljg1NC0yMTguMTEyIDQxNy4wMjQtMjkxLjg0IDYwNS44NjctMTA2LjQ1NCAxLjcwNyAxLjcwNyAxLjc5MiA0LjYwOC4wODUgNi4zMTVMNTYxLjkyIDcxOC4wOGE0LjI2NyA0LjI2NyAwIDAgMCAyLjk4NyA3LjI5NmgzMjYuODI2YTQuMjY3IDQuMjY3IDAgMCAwIDQuMjY3LTQuMjY3VjM5NC4yNGE0LjIyNCA0LjIyNCAwIDAgMC03LjI1My0yLjk4N2wtMTE3Ljc2IDExNy43NmE0LjA5NiA0LjA5NiAwIDAgMS01Ljg4OCAweiIgZmlsbD0iIzUxNTE1MSIvPjwvc3ZnPg==)}.tie-image-editor_tool-text .tie-image-editor_icon{background-image:url(data:image/svg+xml;base64,PHN2ZyBjbGFzcz0iaWNvbiIgdmlld0JveD0iMCAwIDEwMjQgMTAyNCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iMjAwIiBoZWlnaHQ9IjIwMCI+PHBhdGggZD0iTTg1My4zMzMgMTcwLjY2N0gxNzAuNjY3QTQyLjY2NyA0Mi42NjcgMCAwIDAgMTI4IDIxMy4zMzN2MTI4YTQyLjY2NyA0Mi42NjcgMCAwIDAgODUuMzMzIDBWMjU2aDI1NnY1NTQuNjY3SDM4NEE0Mi42NjcgNDIuNjY3IDAgMCAwIDM4NCA4OTZoMjU2YTQyLjY2NyA0Mi42NjcgMCAwIDAgMC04NS4zMzNoLTg1LjMzM1YyNTZoMjU2djg1LjMzM2E0Mi42NjcgNDIuNjY3IDAgMCAwIDg1LjMzMyAwdi0xMjhhNDIuNjY3IDQyLjY2NyAwIDAgMC00Mi42NjctNDIuNjY2eiIgZmlsbD0iIzUxNTE1MSIvPjwvc3ZnPg==)}.tie-image-editor_tool-upload .tie-image-editor_icon{position:relative;background-image:url(data:image/svg+xml;base64,PHN2ZyBjbGFzcz0iaWNvbiIgdmlld0JveD0iMCAwIDEwMjQgMTAyNCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iMjAwIiBoZWlnaHQ9IjIwMCI+PHBhdGggZD0iTTgxMC42NjcgMjU2SDIxMy4zMzNxLTQyLjY2NiAwLTQyLjY2Ni00Mi42NjcgMC00Mi42NjYgNDIuNjY2LTQyLjY2Nmg1OTcuMzM0cTQyLjY2NiAwIDQyLjY2NiA0Mi42NjYgMCA0Mi42NjctNDIuNjY2IDQyLjY2N1oiIGZpbGw9IiM1MTUxNTEiLz48cGF0aCBkPSJNODUzLjMzMyAyMTMuMzMzdjg1LjMzNHEwIDQyLjY2Ni00Mi42NjYgNDIuNjY2LTQyLjY2NyAwLTQyLjY2Ny00Mi42NjZ2LTg1LjMzNHEwLTQyLjY2NiA0Mi42NjctNDIuNjY2IDQyLjY2NiAwIDQyLjY2NiA0Mi42NjZaTTI1NiAyMTMuMzMzdjg1LjMzNHEwIDQyLjY2Ni00Mi42NjcgNDIuNjY2LTQyLjY2NiAwLTQyLjY2Ni00Mi42NjZ2LTg1LjMzNHEwLTQyLjY2NiA0Mi42NjYtNDIuNjY2IDQyLjY2NyAwIDQyLjY2NyA0Mi42NjZaTTM0MS4zMzMgNTk3LjMzM2E0Mi42NjcgNDIuNjY3IDAgMCAxLTM0LjEzMy0xNy4wNjYgNDIuNjY3IDQyLjY2NyAwIDAgMSA4LjUzMy01OS43MzRsMTcwLjY2Ny0xMjhhNDIuNjY3IDQyLjY2NyAwIDAgMSA1MC4zNDcgMGwxNzAuNjY2IDEyMC4zMmE0Mi42NjcgNDIuNjY3IDAgMCAxIDEwLjI0IDU5LjMwNyA0Mi42NjcgNDIuNjY3IDAgMCAxLTU5LjczMyAxMC4yNEw1MTIgNDc5LjU3MyAzNjYuOTMzIDU4OC44YTQyLjY2NyA0Mi42NjcgMCAwIDEtMjUuNiA4LjUzM3oiIGZpbGw9IiM1MTUxNTEiLz48cGF0aCBkPSJNNTEyIDg5NmE0Mi42NjcgNDIuNjY3IDAgMCAxLTQyLjY2Ny00Mi42NjdWNTEyYTQyLjY2NyA0Mi42NjcgMCAwIDEgODUuMzM0IDB2MzQxLjMzM0E0Mi42NjcgNDIuNjY3IDAgMCAxIDUxMiA4OTZ6IiBmaWxsPSIjNTE1MTUxIi8+PC9zdmc+)}.tie-image-editor_tool-download .tie-image-editor_icon{background-image:url(data:image/svg+xml;base64,PHN2ZyBjbGFzcz0iaWNvbiIgdmlld0JveD0iMCAwIDEwMjQgMTAyNCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iMjAwIiBoZWlnaHQ9IjIwMCI+PHBhdGggZD0iTTIxMy4zMzMgNzY4aDU5Ny4zMzRxNDIuNjY2IDAgNDIuNjY2IDQyLjY2NyAwIDQyLjY2Ni00Mi42NjYgNDIuNjY2SDIxMy4zMzNxLTQyLjY2NiAwLTQyLjY2Ni00Mi42NjYgMC00Mi42NjcgNDIuNjY2LTQyLjY2N1oiIGZpbGw9IiM1MTUxNTEiLz48cGF0aCBkPSJNMTcwLjY2NyA4MTAuNjY2OTk5OTk5OTk5OXYtODUuMzM0cTAtNDIuNjY2IDQyLjY2Ni00Mi42NjYgNDIuNjY3IDAgNDIuNjY3IDQyLjY2NnY4NS4zMzRxMCA0Mi42NjYtNDIuNjY3IDQyLjY2Ni00Mi42NjYgMC00Mi42NjYtNDIuNjY2Wk03NjggODEwLjY2Njk5OTk5OTk5OTl2LTg1LjMzNHEwLTQyLjY2NiA0Mi42NjctNDIuNjY2IDQyLjY2NiAwIDQyLjY2NiA0Mi42NjZ2ODUuMzM0cTAgNDIuNjY2LTQyLjY2NiA0Mi42NjYtNDIuNjY3IDAtNDIuNjY3LTQyLjY2NlpNNTEyIDY0MGE0Mi42NjcgNDIuNjY3IDAgMCAxLTI0Ljc0Ny03LjY4TDMxNi41ODcgNTEyYTQyLjY2NyA0Mi42NjcgMCAwIDEtMTAuMjQtNTkuMzA3IDQyLjY2NyA0Mi42NjcgMCAwIDEgNTkuNzMzLTEwLjI0TDUxMiA1NDQuNDI3IDY1Ny4wNjcgNDM1LjJhNDIuNjY3IDQyLjY2NyAwIDAgMSA1MS4yIDY4LjI2N2wtMTcwLjY2NyAxMjhBNDIuNjY3IDQyLjY2NyAwIDAgMSA1MTIgNjQweiIgZmlsbD0iIzUxNTE1MSIvPjxwYXRoIGQ9Ik01MTIgNTU0LjY2N0E0Mi42NjcgNDIuNjY3IDAgMCAxIDQ2OS4zMzMgNTEyVjE3MC42NjdhNDIuNjY3IDQyLjY2NyAwIDAgMSA4NS4zMzQgMFY1MTJBNDIuNjY3IDQyLjY2NyAwIDAgMSA1MTIgNTU0LjY2N3oiIGZpbGw9IiM1MTUxNTEiLz48L3N2Zz4=)}.tie-image-editor_tool-hand .tie-image-editor_icon{background-image:url(data:image/svg+xml;base64,PHN2ZyBjbGFzcz0iaWNvbiIgdmlld0JveD0iMCAwIDEwMjQgMTAyNCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iMjAwIiBoZWlnaHQ9IjIwMCI+PHBhdGggZD0iTTg3MC40IDIwNC44Yy0xOC42MzcgMC0zNi4xNDcgNS4wMTgtNTEuMiAxMy43NzNWMTUzLjZjMC01Ni40NzQtNDUuOTI2LTEwMi40LTEwMi40LTEwMi40LTIxLjA5NCAwLTQwLjY1MyA2LjQtNTYuOTg2IDE3LjM1N0M2NDUuNzg2IDI4LjY3MiA2MDcuNzk1IDAgNTYzLjIgMHMtODIuNjM3IDI4LjY3Mi05Ni42MTQgNjguNTU3QzQ1MC4zMDQgNTcuNiA0MzAuNjk0IDUxLjIgNDA5LjYgNTEuMmMtNTYuNDc0IDAtMTAyLjQgNDUuOTI2LTEwMi40IDEwMi40djM3Ny40OThsLTY4LjkxNS0xMTkuNDVjLTEzLjM2My0yNC4zMi0zNS4xNzUtNDEuNjI2LTYxLjM4OS00OC43OTQtMjUuNTQ5LTYuOTYzLTUyLjEyMi0zLjI3Ni03NC44NTQgMTAuMzQzLTQ2LjQzOSAyNy44NTMtNjQuMTU0IDkwLjgyOS0zOS40MjQgMTQwLjM5IDEuNTM2IDMuMTIzIDM0LjIwMSA3MC4wNDIgMTM2LjE5MiAyNzMuOTIgNDguMDI1IDk2IDEwMC43MSAxNjQuNjYgMTU2LjYyIDIwMy45ODEgNDMuODc5IDMwLjg3NCA3NC4xOSAzMi40NiA3OS44MjEgMzIuNDZoMjU2YzQzLjU3MSAwIDg0LjA3LTE0LjE4MiAxMjAuNDIzLTQyLjA4NiAzNC4xNS0yNi4yNjUgNjMuNzk1LTY0LjI1NiA4OC4wNjQtMTEyLjg0NCA0Ny44Mi05NS42NDIgNzMuMTEzLTIyNy45NDMgNzMuMTEzLTM4Mi42N3YtMTc5LjJjMC01Ni40NzMtNDUuOTI2LTEwMi40LTEwMi40LTEwMi40em01MS4yIDI4MS42YzAgMTQ2Ljc5LTIzLjM5OCAyNzEuMTU1LTY3LjY4NiAzNTkuNzMxQzgyNS4wMzcgOTAzLjg4NSA3NzMuMzI0IDk3Mi44IDY5MS4yIDk3Mi44SDQzNS43MTJjLTEuOTk3LS4xNTQtMjMuNTUyLTIuNTYtNTYuMDY0LTI2Ljg4LTMyLjQxLTI0LjI2OS04Mi4xNzYtNzUuMzY2LTEzNS4wNjYtMTgxLjI0OEMxNDAuOCA1NTcuMTA3IDEwOC45MDIgNDkxLjcyNSAxMDguNTk1IDQ5MS4xMWMtLjA1MS0uMTAyLS4wNTEtLjE1My0uMTAyLS4yMDQtMTIuODUxLTI1Ljc1NC0zLjczOC01OS40OTUgMTkuOTE3LTczLjY3NyAxMC42NS02LjQgMjMuMDktOC4wOSAzNS4wNzItNC44NjQgMTIuNzQ4IDMuNDgxIDIzLjQ1IDEyLjA4MyAzMC4wNTQgMjQuMTY2LjEwMi4xNTQuMjA1LjM1OS4zMDcuNTEybDc5LjkyMyAxMzguNDk2YzE2LjMzMyAyOS44NSAzNC43MTQgNDIuMzk0IDU0LjYzIDM3LjMyNSAxOS45NjktNS4wNjkgMzAuMDU1LTI1LjAzNyAzMC4wNTUtNTkuMjM4VjE1My42YzAtMjguMjExIDIyLjk4OS01MS4yIDUxLjItNTEuMnM1MS4yIDIyLjk4OSA1MS4yIDUxLjJ2MzMyLjhjMCAxNC4xMzEgMTEuNDY5IDI1LjYgMjUuNiAyNS42czI1LjYtMTEuNDY5IDI1LjYtMjUuNnYtMzg0YzAtMjguMjExIDIyLjk4OS01MS4yIDUxLjItNTEuMnM1MS4yIDIyLjk4OSA1MS4yIDUxLjJ2Mzg0YzAgMTQuMTMxIDExLjQ2OSAyNS42IDI1LjYgMjUuNnMyNS42LTExLjQ2OSAyNS42LTI1LjZWMTUzLjZjMC0yOC4yMTEgMjIuOTg5LTUxLjIgNTEuMi01MS4yczUxLjIgMjIuOTg5IDUxLjIgNTEuMnYzODRjMCAxNC4xMzEgMTEuNDY5IDI1LjYgMjUuNiAyNS42czI1LjYtMTEuNDY5IDI1LjYtMjUuNlYzMDcuMmMwLTI4LjIxMSAyMi45ODktNTEuMiA1MS4yLTUxLjJzNTEuMiAyMi45ODkgNTEuMiA1MS4ydjE3OS4yeiIgZmlsbD0iIzUxNTE1MSIvPjwvc3ZnPg==)}.tie-image-editor_tool-zoomOut .tie-image-editor_icon{background-image:url(data:image/svg+xml;base64,PHN2ZyBjbGFzcz0iaWNvbiIgdmlld0JveD0iMCAwIDEwMjQgMTAyNCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iMjAwIiBoZWlnaHQ9IjIwMCI+PHBhdGggZD0iTTYzNyA0NDNIMzI1Yy00LjQgMC04IDMuNi04IDh2NjBjMCA0LjQgMy42IDggOCA4aDMxMmM0LjQgMCA4LTMuNiA4LTh2LTYwYzAtNC40LTMuNi04LTgtOHoiIGZpbGw9IiM1MTUxNTEiLz48cGF0aCBkPSJNOTIxIDg2NyA3NzUgNzIxYzEyMi4xLTE0OC45IDExMy42LTM2OS41LTI2LTUwOS0xNDgtMTQ4LjEtMzg4LjQtMTQ4LjEtNTM3IDAtMTQ4LjEgMTQ4LjYtMTQ4LjEgMzg5IDAgNTM3IDEzOS41IDEzOS42IDM2MC4xIDE0OC4xIDUwOSAyNmwxNDYgMTQ2YzMuMiAyLjggOC4zIDIuOCAxMSAwbDQzLTQzYzIuOC0yLjcgMi44LTcuOCAwLTExek02OTYgNjk2Yy0xMTguOCAxMTguNy0zMTEuMiAxMTguNy00MzAgMC0xMTguNy0xMTguOC0xMTguNy0zMTEuMiAwLTQzMCAxMTguOC0xMTguNyAzMTEuMi0xMTguNyA0MzAgMCAxMTguNyAxMTguOCAxMTguNyAzMTEuMiAwIDQzMHoiIGZpbGw9IiM1MTUxNTEiLz48L3N2Zz4=)}.tie-image-editor_tool-zoomIn .tie-image-editor_icon{background-image:url(data:image/svg+xml;base64,PHN2ZyBjbGFzcz0iaWNvbiIgdmlld0JveD0iMCAwIDEwMjQgMTAyNCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iMjAwIiBoZWlnaHQ9IjIwMCI+PHBhdGggZD0iTTYzNyA0NDNINTE5VjMwOWMwLTQuNC0zLjYtOC04LThoLTYwYy00LjQgMC04IDMuNi04IDh2MTM0SDMyNWMtNC40IDAtOCAzLjYtOCA4djYwYzAgNC40IDMuNiA4IDggOGgxMTh2MTM0YzAgNC40IDMuNiA4IDggOGg2MGM0LjQgMCA4LTMuNiA4LThWNTE5aDExOGM0LjQgMCA4LTMuNiA4LTh2LTYwYzAtNC40LTMuNi04LTgtOHoiIGZpbGw9IiM1MTUxNTEiLz48cGF0aCBkPSJNOTIxIDg2NyA3NzUgNzIxYzEyMi4xLTE0OC45IDExMy42LTM2OS41LTI2LTUwOS0xNDgtMTQ4LjEtMzg4LjQtMTQ4LjEtNTM3IDAtMTQ4LjEgMTQ4LjYtMTQ4LjEgMzg5IDAgNTM3IDEzOS41IDEzOS42IDM2MC4xIDE0OC4xIDUwOSAyNmwxNDYgMTQ2YzMuMiAyLjggOC4zIDIuOCAxMSAwbDQzLTQzYzIuOC0yLjcgMi44LTcuOCAwLTExek02OTYgNjk2Yy0xMTguOCAxMTguNy0zMTEuMiAxMTguNy00MzAgMC0xMTguNy0xMTguOC0xMTguNy0zMTEuMiAwLTQzMCAxMTguOC0xMTguNyAzMTEuMi0xMTguNyA0MzAgMCAxMTguNyAxMTguOCAxMTguNyAzMTEuMiAwIDQzMHoiIGZpbGw9IiM1MTUxNTEiLz48L3N2Zz4=)}.tie-image-editor_tool-arrow .tie-image-editor_icon{background-image:url(data:image/svg+xml;base64,PHN2ZyBjbGFzcz0iaWNvbiIgdmlld0JveD0iMCAwIDEwMjQgMTAyNCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iMjAwIiBoZWlnaHQ9IjIwMCI+PHBhdGggZD0iTTgyMi43IDc2Ny42IDYyNi40IDU3MS4zbDE2My4xLTkwLjZjMzUuMS0xOS41IDMyLTcxLTUuMy04Ni4xbC01NTEuNi0yMjNjLTM5LjEtMTUuOC03OCAyMy4xLTYyLjIgNjIuMmwyMjMgNTUxLjZjMTUuMSAzNy4zIDY2LjYgNDAuNCA4Ni4xIDUuM2w5MC42LTE2My4xIDE5Ni4zIDE5Ni4zYzcuOCA3LjggMTggMTEuNyAyOC4yIDExLjdzMjAuNC0zLjkgMjguMi0xMS43YzE1LjUtMTUuNSAxNS41LTQwLjctLjEtNTYuM3oiIGZpbGw9IiM1MTUxNTEiLz48L3N2Zz4=)}.tie-image-editor_tool-mosaic .tie-image-editor_icon{background-image:url(data:image/svg+xml;base64,PHN2ZyBjbGFzcz0iaWNvbiIgdmlld0JveD0iMCAwIDEwMjQgMTAyNCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iMjAwIiBoZWlnaHQ9IjIwMCI+PHBhdGggZD0iTTg1LjM0NCAxMDYuNjU2SDI1NnYxNzAuNjU2SDg1LjM0NFYxMDYuNjU2em0wIDM0MS4zNDRIMjU2djE3MC42NTZIODUuMzQ0VjQ0OHpNMjU2IDI3Ny4zNDRoMTcwLjY1NlY0NDhIMjU2VjI3Ny4zNDR6bTE3MC42NTYtMTcwLjY4OGgxNzAuNjU2djE3MC42NTZINDI2LjY1NlYxMDYuNjU2em0wIDM0MS4zNDRoMTcwLjY1NnYxNzAuNjU2SDQyNi42NTZWNDQ4em0xNzAuNjg4LTE3MC42NTZINzY4VjQ0OEg1OTcuMzQ0VjI3Ny4zNDR6bTAgNDkwLjY1Nkg0MjYuNjg4VjYxOC42NTZIMjU2LjAzMlY3NjhIODUuMzc2djE3MC42NTZoMTcwLjY1NlY3ODkuMzEyaDE3MC42NTZ2MTQ5LjM0NGgxNzAuNjU2Vjc4OS4zMTJINzY4djE0OS4zNDRoMTcwLjY1NlY3NjhINzY4VjYxOC42NTZINTk3LjM0NHpNNzY4IDEwNi42NTZoMTcwLjY1NnYxNzAuNjU2SDc2OFYxMDYuNjU2ek03NjggNDQ4aDE3MC42NTZ2MTcwLjY1Nkg3NjhWNDQ4eiIgZmlsbD0iIzUxNTE1MSIgZGF0YS1zcG0tYW5jaG9yLWlkPSJhMzEzeC5zZWFyY2hfaW5kZXguMC5pMS43MDE1M2E4MXBIOFZEdyIvPjwvc3ZnPg==)}.tie-image-editor_tool-reset .tie-image-editor_icon{background-image:url(data:image/svg+xml;base64,PHN2ZyBjbGFzcz0iaWNvbiIgdmlld0JveD0iMCAwIDEwMjQgMTAyNCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iMjAwIiBoZWlnaHQ9IjIwMCI+PHBhdGggZD0iTTgzMS4xNjcgNjA3Ljg1MmMtMTUuMTI4LTYuMDk3LTMyLjA2MyAxLjM1NS0zOC4xNiAxNi40ODMtNDYuMjg5IDExNS42MS0xNTYuNDc5IDE5MC4zNDktMjgxLjEyIDE5MC4zNDktMTA0Ljc3IDAtMTk5LjYwNy01Mi44MzctMjU0LjQ3Ni0xMzguNjRsMTkzLjczNiAzOS41MTRjMTUuODA2IDMuMTYxIDMxLjM4Ni03IDM0LjU0Ny0yMi44MDYgMy4xNjItMTUuODA2LTctMzEuMzg2LTIyLjgwNS0zNC41NDdsLTI1Mi44OTYtNTEuOTM0aC0uOTAzYy0uNjc3LS4yMjYtMS41OC0uMjI2LTIuMjU4LS4yMjZoLTMuODM4Yy0uNjc4IDAtMS4zNTUgMC0yLjAzMy4yMjYtLjQ1MSAwLS42NzcgMC0xLjEyOS4yMjYtLjY3NyAwLTEuMTI5LjIyNi0xLjgwNi4yMjYtLjQ1MiAwLS45MDMuMjI2LTEuMTI5LjIyNi0uNDUyLjIyNS0xLjEyOS4yMjUtMS41OC40NTEtLjQ1Mi4yMjYtLjkwNC4yMjYtMS4zNTUuNDUyLS4yMjYuMjI2LS42NzguMjI2LS45MDQuMjI2LS4yMjUgMC0uMjI1LjIyNS0uNDUxLjIyNWwtMS4zNTUuNjc4LTEuMzU1LjY3N2MtLjQ1MS4yMjYtLjY3Ny40NTItMS4xMjkuNjc4LS40NTEuMjI1LTEuMTI5LjY3Ny0xLjU4LjkwMy0uMjI2IDAtLjIyNi4yMjYtLjQ1Mi4yMjYtLjIyNi4yMjUtLjQ1Mi4yMjUtLjQ1Mi40NTEtLjQ1MS40NTItLjkwMy42NzgtMS41OCAxLjEzLS4yMjYuMjI1LS40NTIuNDUtLjkwMy42NzdsLTEuMzU1IDEuMzU0Yy0uMjI2LjIyNi0uNDUyLjQ1Mi0uNjc4LjkwNC0uNDUxLjQ1MS0uNjc3LjkwMy0xLjEyOSAxLjM1NC0uMjI1LjIyNi0uNDUxLjY3OC0uNjc3LjkwNC0uMjI2LjQ1MS0uNjc3LjkwMy0uOTAzIDEuMzU0LS4yMjYuNDUyLS40NTIuNjc4LS42NzggMS4xM2wtLjY3NyAxLjM1NGMtLjIyNi40NTItLjQ1Mi42NzgtLjQ1MiAxLjEzLS4yMjUuNDUtLjQ1MS45MDItLjY3NyAxLjU4LS4yMjYuNDUxLS4yMjYuNjc3LS40NTIgMS4xMjktLjIyNS42NzctLjQ1MSAxLjEyOS0uNDUxIDEuODA2IDAgLjQ1Mi0uMjI2LjY3OC0uMjI2IDEuMTMtLjIyNi42NzctLjIyNiAxLjM1NC0uNDUyIDIuMjU3djEuMTNMMTQxLjM1IDg4Ny44NDJjLTIuMDMyIDE2LjAzMiA5LjI1OCAzMC43MDkgMjUuMjkgMzIuOTY3IDEuMzU1LjIyNiAyLjQ4NC4yMjYgMy44MzkuMjI2IDE0LjQ1IDAgMjcuMDk1LTEwLjgzOSAyOS4xMjgtMjUuNTE2bDIxLjY3Ni0xNjguNjcyYzIzLjQ4MyAzMS44MzggNTIuMzg2IDU5LjgzNyA4NS41NzggODIuODY4IDYwLjUxNSA0MS43NzMgMTMxLjE5IDYzLjY3NiAyMDUuMDI2IDYzLjY3NnMxNDQuNTEyLTIyLjEyOCAyMDUuMDI2LTYzLjY3NmM1OC45MzQtNDAuNjQzIDEwNC4wOTMtOTcuMzIgMTMwLjczOC0xNjMuNzA0IDUuODctMTUuMTI5LTEuMzU1LTMyLjI5LTE2LjQ4NC0zOC4xNnptMjUuOTY3LTUwNC42NjJjLTE2LjAzMS0yLjAzMi0zMC43MDggOS4yNTgtMzIuOTY2IDI1LjI5TDgwMi40OSAyOTcuMTUyYy0yMy40ODMtMzEuODM4LTUyLjM4Ni01OS44MzctODUuNTc4LTgyLjY0My02MC41MTQtNDEuNzczLTEzMS4xOS02My42NzUtMjA1LjAyNi02My42NzUtNzMuNjEgMC0xNDQuNTExIDIyLjEyOC0yMDUuMDI2IDYzLjY3NS01OC45MzMgNDAuNjQ0LTEwNC4wOTMgOTcuMzItMTMwLjczOCAxNjMuNzA1LTYuMDk2IDE1LjEyOCAxLjM1NSAzMi4wNjMgMTYuNDg0IDM4LjE2IDE1LjEyOCA2LjA5NyAzMi4wNjMtMS4zNTUgMzguMTYtMTYuNDgzIDQ2LjI4OS0xMTUuNjEgMTU2LjQ3OS0xOTAuMzUgMjgxLjEyLTE5MC4zNSAxMDQuNzcxIDAgMTk5LjYwNyA1Mi44MzggMjU0LjQ3NiAxMzguNjQybC0xOTMuNzM2LTM5Ljc0MWMtMTUuODA2LTMuMTYxLTMxLjM4NiA3LTM0LjU0NyAyMi44MDYtMy4xNjEgMTUuODA2IDcgMzEuMzg2IDIyLjgwNiAzNC41NDdsMjUzLjU3MiA1MS43MDhoLjQ1MmMuNjc3LjIyNiAxLjU4LjIyNiAyLjI1OC40NTJoLjQ1MWMuOTA0IDAgMS44MDcuMjI1IDIuNzEuMjI1aDIuMjU4Yy40NTIgMCAuOTAzIDAgMS4xMjktLjIyNS40NTIgMCAuOTAzLS4yMjYgMS4zNTUtLjIyNi40NTEgMCAuNjc3LS4yMjYgMS4xMjktLjIyNnMuOTAzLS4yMjYgMS41OC0uNDUyYy4yMjYgMCAuNjc4LS4yMjUuOTA0LS4yMjUuNjc3LS4yMjYgMS4zNTQtLjQ1MiAxLjgwNi0uNjc4LjIyNiAwIC4yMjYgMCAuNDUyLS4yMjYuOTAzLS4yMjUgMS41OC0uNjc3IDIuNDgzLTEuMTI5LjIyNi0uMjI1LjQ1Mi0uMjI1LjkwNC0uNDUxcy45MDMtLjQ1MiAxLjM1NC0uOTAzYy4yMjYtLjIyNi42NzgtLjQ1Mi45MDQtLjY3OC4yMjUgMCAuMjI1LS4yMjYuNDUxLS4yMjZsLjQ1Mi0uNDUxYy40NTEtLjQ1MiAxLjEyOS0uNjc4IDEuNTgtMS4xM2wuNjc4LS42NzcgMS4zNTUtMS4zNTRjLjIyNS0uMjI2LjQ1MS0uNDUyLjY3Ny0uOTA0LjQ1Mi0uNDUxLjY3Ny0uOTAzIDEuMTI5LTEuMzU0LjIyNi0uMjI2LjQ1Mi0uNjc4LjY3Ny0uOTA0LjIyNi0uNDUxLjY3OC0uOTAzLjkwNC0xLjM1NC4yMjUtLjQ1Mi40NTEtLjY3OC42NzctMS4xM2wuNjc3LTEuMzU0Yy4yMjYtLjQ1Mi40NTItLjkwMy42NzgtMS4xM2wuNjc3LTEuMzU0Yy4yMjYtLjQ1Mi4yMjYtLjkwMy40NTItMS4zNTUuMjI2LS40NTEuMjI2LTEuMTI5LjQ1MS0xLjU4IDAtLjQ1Mi4yMjYtLjY3OC4yMjYtMS4xMy4yMjYtLjY3Ny4yMjYtMS4zNTQuNDUyLTIuMDMyIDAtLjIyNSAwLS40NTEuMjI2LS42Nzd2LS4yMjZsMzIuOTY2LTI1Ni4yODJjMi43MS0xNi4yNTgtOC44MDYtMzAuOTM1LTI0LjgzOC0zMi45Njd6IiBmaWxsPSIjNTE1MTUxIiBkYXRhLXNwbS1hbmNob3ItaWQ9ImEzMTN4LnNlYXJjaF9pbmRleC4wLmk1Ljc5OTQzYTgxM25pbHFIIiBjbGFzcz0ic2VsZWN0ZWQiLz48L3N2Zz4=)}.tie-image-editor_tool-history .tie-image-editor_icon{background-image:url(data:image/svg+xml;base64,PHN2ZyBjbGFzcz0iaWNvbiIgdmlld0JveD0iMCAwIDEwMjQgMTAyNCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iMjAwIiBoZWlnaHQ9IjIwMCI+PHBhdGggZD0iTTUzMy4zMzMgODUuMzMzYy0xNDkuMzMzIDAtMjgxLjYgODEuMDY3LTM0OS44NjYgMjA0LjhMODUuMzMzIDE5MnYyNzcuMzMzaDI3Ny4zMzRMMjQzLjIgMzQ5Ljg2N2M1NS40NjctMTA2LjY2NyAxNjIuMTMzLTE3OS4yIDI5MC4xMzMtMTc5LjIgMTc0LjkzNCAwIDMyMCAxNDUuMDY2IDMyMCAzMjAgMCAxNzQuOTMzLTE0NS4wNjYgMzIwLTMyMCAzMjAtMTQwLjggMC0yNTYtODkuNi0zMDIuOTMzLTIxMy4zMzRoLTg5LjZDMTg3LjczMyA3NjggMzQ1LjYgODk2IDUzMy4zMzMgODk2YzIyNi4xMzQgMCA0MDUuMzM0LTE4My40NjcgNDA1LjMzNC00MDUuMzMzUzc1NS4yIDg1LjMzMyA1MzMuMzMzIDg1LjMzM3ptLTY0IDIxMy4zMzR2MjE3LjZsMjAwLjUzNCAxMTkuNDY2TDcwNCA1ODAuMjY3bC0xNzAuNjY3LTEwMi40di0xNzkuMmgtNjR6IiBvcGFjaXR5PSIuOSIgZmlsbD0iIzUxNTE1MSIvPjwvc3ZnPg==)}.tie-image-editor_tool-subtract .tie-image-editor_icon{background-image:url(data:image/svg+xml;base64,PHN2ZyBjbGFzcz0iaWNvbiIgdmlld0JveD0iMCAwIDEwMjQgMTAyNCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iMjAwIiBoZWlnaHQ9IjIwMCI+PHBhdGggZD0iTTUxMiA5NmMyMjkuNzYgMCA0MTYgMTg2LjI0IDQxNiA0MTZTNzQxLjc2IDkyOCA1MTIgOTI4IDk2IDc0MS43NiA5NiA1MTIgMjgyLjI0IDk2IDUxMiA5NnptMTk2LjI2NyAzODRIMzE1LjczM2ExNy4wNjcgMTcuMDY3IDAgMCAwLTE3LjA2NiAxNy4wNjd2MjkuODY2YzAgOS4zODcgNy42OCAxNy4wNjcgMTcuMDY2IDE3LjA2N2gzOTIuNTM0YTE3LjA2NyAxNy4wNjcgMCAwIDAgMTcuMDY2LTE3LjA2N3YtMjkuODY2QTE3LjA2NyAxNy4wNjcgMCAwIDAgNzA4LjI2NyA0ODB6IiBmaWxsPSIjNTE1MTUxIiBmaWxsLW9wYWNpdHk9Ii44NyIvPjwvc3ZnPg==)}.tie-image-editor_tool-add .tie-image-editor_icon{background-image:url(data:image/svg+xml;base64,PHN2ZyBjbGFzcz0iaWNvbiIgdmlld0JveD0iMCAwIDEwMjQgMTAyNCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iMjAwIiBoZWlnaHQ9IjIwMCI+PHBhdGggZD0iTTUxMiA5NmMyMjkuNzYgMCA0MTYgMTg2LjI0IDQxNiA0MTZTNzQxLjc2IDkyOCA1MTIgOTI4IDk2IDc0MS43NiA5NiA1MTIgMjgyLjI0IDk2IDUxMiA5NnptMTQuOTMzIDIwMi42NjdoLTI5Ljg2NkExNy4wNjcgMTcuMDY3IDAgMCAwIDQ4MCAzMTUuNzMzVjQ4MEgzMTUuNzMzYTE3LjA2NyAxNy4wNjcgMCAwIDAtMTcuMDY2IDE3LjA2N3YyOS44NjZjMCA5LjM4NyA3LjY4IDE3LjA2NyAxNy4wNjYgMTcuMDY3SDQ4MHYxNjQuMjY3YzAgOS4zODYgNy42OCAxNy4wNjYgMTcuMDY3IDE3LjA2NmgyOS44NjZBMTcuMDY3IDE3LjA2NyAwIDAgMCA1NDQgNzA4LjI2N1Y1NDRoMTY0LjI2N2ExNy4wNjcgMTcuMDY3IDAgMCAwIDE3LjA2Ni0xNy4wNjd2LTI5Ljg2NkExNy4wNjcgMTcuMDY3IDAgMCAwIDcwOC4yNjcgNDgwSDU0NFYzMTUuNzMzYTE3LjA2NyAxNy4wNjcgMCAwIDAtMTcuMDY3LTE3LjA2NnoiIGZpbGw9IiM1MTUxNTEiIGZpbGwtb3BhY2l0eT0iLjg3Ii8+PC9zdmc+)}.tie-image-editor_tool-done .tie-image-editor_icon{background-image:url(data:image/svg+xml;base64,PHN2ZyBjbGFzcz0iaWNvbiIgdmlld0JveD0iMCAwIDEwMjQgMTAyNCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iMjAwIiBoZWlnaHQ9IjIwMCI+PHBhdGggZD0ibTM0MS4wOSA0NjkuMDkgNzIuNzggNzIuNzhhNDguMjcgNDguMjcgMCAwIDAgNjguMjYgMEw3NDMuNCAyODAuNmE0OC4yNiA0OC4yNiAwIDAgMSA1NS43MS05bDM3IDE4LjVhNDguMjYgNDguMjYgMCAwIDEgMTIuNTQgNzcuMjlMNDc4LjU0IDczNy40NmE0OC4yNyA0OC4yNyAwIDAgMS02NC4yNyAzLjU0bC0yMTctMTczLjZjLTI5Ljg2LTIzLjktMjEuNC03MS4zOCAxNC44OS04My40N2w3OS41NC0yNi41MmE0OC4yNiA0OC4yNiAwIDAgMSA0OS4zOSAxMS42OHoiIGZpbGw9IiM1MTUxNTEiLz48L3N2Zz4=)}.tie-image-editor_tool-clear .tie-image-editor_icon{background-image:url(data:image/svg+xml;base64,PHN2ZyBjbGFzcz0iaWNvbiIgdmlld0JveD0iMCAwIDEwMjQgMTAyNCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iMjAwIiBoZWlnaHQ9IjIwMCI+PHBhdGggZD0ibTI1MS43MzMgMjYwLjI2MyA4LjUyOC04LjUyOHE1OS43MzYtNTkuNzM2IDExOS40NzIgMGwzOTIuNTMgMzkyLjUzcTU5LjczNiA1OS43MzYgMCAxMTkuNDcybC04LjUyOCA4LjUyOHEtNTkuNzM3IDU5LjczNi0xMTkuNDczIDBsLTM5Mi41My0zOTIuNTNxLTU5LjczNi01OS43MzYgMC0xMTkuNDcyWiIgZmlsbD0iIzUxNTE1MSIvPjxwYXRoIGQ9Im0yNTEuNzMzIDY0NC4yNjQgMzkyLjUyOS0zOTIuNTI5cTU5LjczNi01OS43MzYgMTE5LjQ3MyAwbDguNTI3IDguNTI4cTU5LjczNyA1OS43MzYgMCAxMTkuNDczTDM3OS43MzMgNzcyLjI2NXEtNTkuNzM2IDU5LjczNi0xMTkuNDcyIDBsLTguNTI4LTguNTI4cS01OS43MzctNTkuNzM2IDAtMTE5LjQ3M1oiIGZpbGw9IiM1MTUxNTEiLz48L3N2Zz4=)}.tie-image-editor_tool-upload .tie-image-editor_input{position:absolute;top:0;right:0;bottom:0;left:0;visibility:hidden}.tie-image-editor_tool-item .tie-image-editor_icon--disabled,.tie-image-editor_tool-item .tie-image-editor_icon--disabled:hover{background-color:#ccc;cursor:not-allowed;border-radius:2px;opacity:.5}.tie-image-editor_tool-item--checked{background-color:#fff}.tie-image-editor_color-popover{display:inline-block;vertical-align:middle}.tie-image-editor_color{width:20px;height:20px}.tie-image-editor_tool-reset,.tie-image-editor_tool-upload,.tie-image-editor_tool-download,.tie-image-editor_tool-zoomIn,.tie-image-editor_tool-zoomOut,.tie-image-editor_tool-redo,.tie-image-editor_tool-undo,.tie-image-editor_tool-hand,.tie-image-editor_tool-rotate,.tie-image-editor_tool-flip,.tie-image-editor_tool-reset,.tie-image-editor_tool-history{float:right}.tie-image-editor_icon-close,.tie-image-editor_icon-check{color:#666;font-size:14px;margin:0 8px;cursor:pointer}.tie-image-editor_tool-paint-size{border-radius:50%;border:1px solid #666;margin-right:8px;cursor:pointer}.tie-image-editor_tool-paint-size--checked{border:1px solid blue;background-color:blue}.tie-image-editor_tool-paint-color{width:20px;height:20px;margin-right:8px;cursor:pointer;border:1px solid #666}.tie-image-editor_tool-paint-size:hover,.tie-image-editor_tool-paint-color:hover{box-shadow:0px 0px 6px blue}.tie-image-editor_tool-paint-content,.tie-image-editor_tool-paint-size-wrapper,.tie-image-editor_tool-paint-color-wrapper{display:flex;align-items:center}.tie-image-editor_tool-rotate-pop-content{padding:4px 16px 16px;width:280px}.tie-image-editor_tool-crop-pop_icon{color:#515151;cursor:pointer}.tie-image-editor_tool-crop-pop_icon:hover{color:blue}.tie-image-editor_tool-crop-pop_icon:first-child{margin-right:12px}.tie-image-editor-history_pop{max-height:200px;overflow-y:auto}.tie-image-editor-history_pop-len{color:#b3111c;font-weight:bold}.tie-image-editor-history_pop-title{display:flex;align-items:center;justify-content:center;line-height:24px}.tie-image-editor-history_pop-item{display:flex;align-items:center;width:120px;padding:2px 8px;line-height:22px;cursor:pointer}.tie-image-editor-history_pop-item:hover{background-color:#f3f9ff}.tie-image-editor-history_pop-item--checked:hover,.tie-image-editor-history_pop-item--checked{background-color:#fff6ee}.tie-image-editor-history_pop-item-num{margin-right:4px}.tie-image-editor-history_pop-item-icon{font-size:14px;margin-left:4px;color:#b3111c}.tie-image-editor_tool-upload-input{z-index:2;position:absolute;width:100%;height:100%;opacity:0;cursor:pointer}.tie-image-editor_tool-scale-pop-content{width:200px;display:flex;align-items:center;justify-content:space-between}.tie-image-editor_tool-scale-pop-icons{margin-left:18px}.tie-image-editor_tool-scale-pop-icon{padding:4px;margin:0 4px;width:16px;height:16px;cursor:pointer;border-radius:50%}.tie-image-editor_tool-scale-pop-icon:hover{opacity:.8}.tie-image-editor_tool-scale-pop-zoom{width:50px;font-weight:bold}.tie-popover__target{display:inline-block}.tie-popover__popper{z-index:1000;padding:8px;background:#fff;border:1px solid rgba(0,0,0,0);border-radius:4px;box-shadow:0 2px 10px rgba(0,0,0,.14) \9 ;filter:drop-shadow(0 2px 10px rgba(0, 0, 0, 0.14))}.tie-popover__popper::after{position:absolute;display:block;content:""}.tie-popover__popper[x-placement^=top]::after{bottom:-11px;left:0;width:100%;height:10px}.tie-popover__popper[x-placement^=top]>div>div>.tie-popper__arrow{bottom:-8px;border-bottom-width:0;filter:drop-shadow(0 2px 12px rgba(0, 0, 0, 0.05))}.tie-popover__popper[x-placement^=top]>div>div>.tie-popper__arrow::after{bottom:1px;margin-left:-8px;border-top-color:#fff;border-bottom-width:0}.tie-popover__popper[x-placement^=bottom]::after{top:-11px;left:0;width:100%;height:10px}.tie-popover__popper[x-placement^=bottom]>div>div>.tie-popper__arrow{top:-8px;border-top-width:0}.tie-popover__popper[x-placement^=bottom]>div>div>.tie-popper__arrow::after{top:1px;margin-left:-8px;border-top-width:0;border-bottom-color:#fff}.tie-popover__popper[x-placement^=right]::after{top:0;left:-11px;width:10px;height:100%}.tie-popover__popper[x-placement^=right]>div>div>.tie-popper__arrow{left:-8px;border-left-width:0}.tie-popover__popper[x-placement^=right]>div>div>.tie-popper__arrow::after{left:1px;margin-top:-8px;border-right-color:#fff;border-left-width:0}.tie-popover__popper[x-placement^=left]::after{top:0;right:-11px;width:10px;height:100%}.tie-popover__popper[x-placement^=left]>div>div>.tie-popper__arrow{right:-8px;border-right-width:0}.tie-popover__popper[x-placement^=left]>div>div>.tie-popper__arrow::after{right:1px;margin-top:-8px;border-right-width:0;border-left-color:#fff}.tie-popover__popper .tie-popper__arrow,.tie-popover__popper .tie-popper__arrow::after{position:absolute;width:0;height:0;border-color:rgba(0,0,0,0);border-style:solid;border-width:8px;content:""}
dist2/tiny-image-editor.min.js
浏览文件 @ 8be18dd8
(function webpackUniversalModuleDefinition(root, factory) {
if(typeof exports === 'object' && typeof module === 'object')
module.exports = factory(require("window.Fabric"), require("window.RcSlider"), require("window.React"), require("window.ReactDom"), require("window.ReactPopper"));
module.exports = factory(require("window.Fabric"), require("window.React"), require("window.ReactDom"), require("window.ReactPopper"));
else if(typeof define === 'function' && define.amd)
define(["window.Fabric", "window.RcSlider", "window.React", "window.ReactDom", "window.ReactPopper"], factory);
define(["window.Fabric", "window.React", "window.ReactDom", "window.ReactPopper"], factory);
else if(typeof exports === 'object')
exports["fatherDemo"] = factory(require("window.Fabric"), require("window.RcSlider"), require("window.React"), require("window.ReactDom"), require("window.ReactPopper"));
exports["fatherDemo"] = factory(require("window.Fabric"), require("window.React"), require("window.ReactDom"), require("window.ReactPopper"));
else
root["fatherDemo"] = factory(root["window.Fabric"], root["window.RcSlider"], root["window.React"], root["window.ReactDom"], root["window.ReactPopper"]);
})(self, function(__WEBPACK_EXTERNAL_MODULE__128__, __WEBPACK_EXTERNAL_MODULE__760__, __WEBPACK_EXTERNAL_MODULE__436__, __WEBPACK_EXTERNAL_MODULE__167__, __WEBPACK_EXTERNAL_MODULE__171__) {
root["fatherDemo"] = factory(root["window.Fabric"], root["window.React"], root["window.ReactDom"], root["window.ReactPopper"]);
})(self, function(__WEBPACK_EXTERNAL_MODULE__128__, __WEBPACK_EXTERNAL_MODULE__436__, __WEBPACK_EXTERNAL_MODULE__167__, __WEBPACK_EXTERNAL_MODULE__171__) {
return /******/ (function() { // webpackBootstrap
/******/ var __webpack_modules__ = ({
......@@ -19,14 +19,6 @@ module.exports = __WEBPACK_EXTERNAL_MODULE__128__;
/***/ }),
/***/ 760:
/***/ (function(module) {
"use strict";
module.exports = __WEBPACK_EXTERNAL_MODULE__760__;
/***/ }),
/***/ 436:
/***/ (function(module) {
......@@ -1455,6 +1447,7 @@ var useArrow = function useArrow() {
// lineToDrawNew.evented = false;
lineToDrawNew.strokeUniform = true;
lineToDraw.current = lineToDrawNew;
console.log("lineToDrawNew", lineToDrawNew);
canvas.add(lineToDrawNew);
});
canvas.on('mouse:move', function (o) {
......@@ -1780,1067 +1773,223 @@ var Control = function Control() {
useControl();
return /*#__PURE__*/external_window_React_default().createElement((external_window_React_default()).Fragment, null);
};
;// CONCATENATED MODULE: ./src/tiny-image-editor/src/helpers/CropZone.ts
/* eslint-disable no-param-reassign */
;// CONCATENATED MODULE: ./src/tiny-image-editor/src/components/Download.tsx
var CORNER_TYPE_TOP_LEFT = 'tl';
var CORNER_TYPE_TOP_RIGHT = 'tr';
var CORNER_TYPE_MIDDLE_TOP = 'mt';
var CORNER_TYPE_MIDDLE_LEFT = 'ml';
var CORNER_TYPE_MIDDLE_RIGHT = 'mr';
var CORNER_TYPE_MIDDLE_BOTTOM = 'mb';
var CORNER_TYPE_BOTTOM_LEFT = 'bl';
var CORNER_TYPE_BOTTOM_RIGHT = 'br';
var CORNER_TYPE_LIST = [CORNER_TYPE_TOP_LEFT, CORNER_TYPE_TOP_RIGHT, CORNER_TYPE_MIDDLE_TOP, CORNER_TYPE_MIDDLE_LEFT, CORNER_TYPE_MIDDLE_RIGHT, CORNER_TYPE_MIDDLE_BOTTOM, CORNER_TYPE_BOTTOM_LEFT, CORNER_TYPE_BOTTOM_RIGHT];
var NOOP_FUNCTION = function NOOP_FUNCTION() {};
/**
* Align with cropzone ratio
* @param {string} selectedCorner - selected corner type
* @returns {{width: number, height: number}}
* @private
*/
function cornerTypeValid(selectedCorner) {
return CORNER_TYPE_LIST.indexOf(selectedCorner) >= 0;
}
/**
* return scale basis type
* @param {number} diffX - X distance of the cursor and corner.
* @param {number} diffY - Y distance of the cursor and corner.
* @returns {string}
* @private
*/
function getScaleBasis(diffX, diffY) {
return diffX > diffY ? 'width' : 'height';
function extractImageNames(str) {
// 定义更通用的正则表达式
var regex = /([^\/!]+?)\.(?:jpeg|jpg|png|gif|bmp)(?![^!]*\.)/gi;
var matches = [];
var match;
// 使用 while 循环多次匹配
while ((match = regex.exec(str)) !== null) {
matches.push(match[1]);
}
return matches;
}
var useDownload = function useDownload() {
var _useContext = (0,external_window_React_.useContext)(EditorContext),
canvasInstanceRef = _useContext.canvasInstanceRef,
canvasEl = _useContext.canvasEl,
onDownLoad = _useContext.onDownLoad;
var handleDownload = function handleDownload() {
var auto = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
var canvas = canvasInstanceRef.current;
// 获取画布上的所有元素
var allObjects = canvas.getObjects();
// 存储标注信息的数组
var annotations = [];
function getDeviceId() {
var deviceId = localStorage.getItem('deviceId');
if (!deviceId) {
// 使用 crypto 生成随机的 UUID
var array = new Uint8Array(8);
crypto.getRandomValues(array);
deviceId = ([1e7] + -1e3 + -4e3 + -8e3 + -1e11).replace(/[018]/g, function (c) {
return (c ^ array[Math.floor(Math.random() * 16)] & 15 >> c / 4).toString(8);
});
localStorage.setItem('deviceId', deviceId);
}
return deviceId;
}
var deviceId = getDeviceId();
// 遍历所有元素，提取标注信息
allObjects.forEach(function (object) {
var annotation = {
type: object.type,
// 元素类型，如 'rect', 'text', 'circle' 等
left: object.left,
// 元素的左坐标
top: object.top,
// 元素的上坐标
width: object.width,
// 元素的宽度
height: object.height,
// 元素的高度
angle: object.angle,
// 元素的旋转角度
fill: object.fill,
// 元素的填充颜色
stroke: object.stroke,
// 元素的边框颜色
size: object.strokeWidth
// 其他属性可根据需要添加
};
/**
* 裁剪框定义
*/
var Cropzone = external_window_Fabric_.fabric.util.createClass(external_window_Fabric_.fabric.Rect, /** @lends Cropzone.prototype */{
/**
* Constructor
* @param {Object} canvas canvas
* @param {Object} options Options object
* @param {Object} extendsOptions object for extends "options"
* @override
*/
initialize: function initialize(canvas, options, extendsOptions) {
options = objectSpread2_default()(objectSpread2_default()({}, options), extendsOptions);
options.type = 'cropzone';
this.callSuper('initialize', options);
this._addEventHandler();
this.canvas = canvas;
this.options = options;
},
canvasEventDelegation: function canvasEventDelegation(eventName) {
var delegationState = 'unregistered';
var isRegistered = this.canvasEventTrigger[eventName] !== NOOP_FUNCTION;
if (isRegistered) {
delegationState = 'registered';
} else if ([eventNames.OBJECT_MOVED, eventNames.OBJECT_SCALED].indexOf(eventName) < 0) {
delegationState = 'none';
}
return delegationState;
},
canvasEventRegister: function canvasEventRegister(eventName, eventTrigger) {
this.canvasEventTrigger[eventName] = eventTrigger;
},
_addEventHandler: function _addEventHandler() {
var _this$canvasEventTrig;
this.canvasEventTrigger = (_this$canvasEventTrig = {}, defineProperty_default()(_this$canvasEventTrig, eventNames.OBJECT_MOVED, NOOP_FUNCTION), defineProperty_default()(_this$canvasEventTrig, eventNames.OBJECT_SCALED, NOOP_FUNCTION), _this$canvasEventTrig);
this.on({
moving: this._onMoving.bind(this),
scaling: this._onScaling.bind(this)
// 如果是文本元素，还可以获取文本内容
if (object.type === 'textbox' || object.type === 'i-text') {
annotation.text = object.text;
annotation.fontSize = object.fontSize;
}
if (object.type === 'arrow') {
annotation.pointList = [object.x1, object.y1, object.x2, object.y2];
}
if (object.type === 'path') {
annotation.path = object.path;
}
annotations.push(annotation);
});
external_window_Fabric_.fabric.util.addListener(document, 'keydown', this._onKeyDown.bind(this));
external_window_Fabric_.fabric.util.addListener(document, 'keyup', this._onKeyUp.bind(this));
},
_renderCropzone: function _renderCropzone(ctx) {
var cropzoneDashLineWidth = 7;
var cropzoneDashLineOffset = 7;
// Calc original scale
var originalFlipX = this.flipX ? -1 : 1;
var originalFlipY = this.flipY ? -1 : 1;
var originalScaleX = originalFlipX / this.scaleX;
var originalScaleY = originalFlipY / this.scaleY;
// Set original scale
ctx.scale(originalScaleX, originalScaleY);
// Render outer rect
this._fillOuterRect(ctx, 'rgba(0, 0, 0, 0.5)');
if (this.options.lineWidth) {
this._fillInnerRect(ctx);
this._strokeBorder(ctx, 'rgb(255, 255, 255)', {
lineWidth: this.options.lineWidth
});
} else {
// Black dash line
this._strokeBorder(ctx, 'rgb(0, 0, 0)', {
lineDashWidth: cropzoneDashLineWidth
});
// White dash line
this._strokeBorder(ctx, 'rgb(255, 255, 255)', {
lineDashWidth: cropzoneDashLineWidth,
lineDashOffset: cropzoneDashLineOffset
});
}
// Reset scale
ctx.scale(1 / originalScaleX, 1 / originalScaleY);
},
/**
* Render Crop-zone
* @private
* @override
*/
_render: function _render(ctx) {
this.callSuper('_render', ctx);
this._renderCropzone(ctx);
},
/**
* Cropzone-coordinates with outer rectangle
*
* x0 x1 x2 x3
* y0 +--------------------------+
* |///////|//////////|///////| // <--- "Outer-rectangle"
* |///////|//////////|///////|
* y1 +-------+----------+-------+
* |///////| Cropzone |///////| Cropzone is the "Inner-rectangle"
* |///////| (0, 0) |///////| Center point (0, 0)
* y2 +-------+----------+-------+
* |///////|//////////|///////|
* |///////|//////////|///////|
* y3 +--------------------------+
*
* @typedef {{x: Array<number>, y: Array<number>}} cropzoneCoordinates
* @ignore
*/
/**
* Fill outer rectangle
* @param {CanvasRenderingContext2D} ctx - Context
* @param {string|CanvasGradient|CanvasPattern} fillStyle - Fill-style
* @private
*/
_fillOuterRect: function _fillOuterRect(ctx, fillStyle) {
var _this$_getCoordinates = this._getCoordinates(),
x = _this$_getCoordinates.x,
y = _this$_getCoordinates.y;
console.log("_fillOuterRect", x, y);
ctx.save();
ctx.fillStyle = fillStyle;
ctx.beginPath();
// 打印标注信息
console.log('用户标注信息:', annotations, canvas.backgroundImage, canvas.backgroundImage._element.currentSrc);
var currentSrc = canvas.backgroundImage._element.currentSrc;
var currentSrcSplit = currentSrc.split('/');
var imageTitle = currentSrcSplit.pop();
var dirName = currentSrcSplit.pop();
var imgkey = dirName + '_' + extractImageNames(imageTitle);
console.log('Device ID:', deviceId);
// 创建 XMLHttpRequest 对象
var xhr = new XMLHttpRequest();
// 要请求的 URL
var url = 'https://vercel-api.fivecc.cn/api/annotation';
// 打开一个 POST 请求
xhr.open('POST', url, true);
// 设置请求头，指定请求体的格式为 JSON
xhr.setRequestHeader('Content-Type', 'application/json');
// 监听请求状态变化
xhr.onreadystatechange = function () {
if (xhr.readyState === 4) {
if (xhr.status === 200) {
console.log('请求成功:', xhr.responseText);
} else {
console.log('请求失败:', xhr.status);
}
}
};
// Outer rectangle
// Numbers are +/-1 so that overlay edges don't get blurry.
// ctx.moveTo(x[0] - 1, y[0] - 1);
// ctx.lineTo(x[3] + 1, y[0] - 1);
// ctx.lineTo(x[3] + 1, y[3] + 1);
// ctx.lineTo(x[0] - 1, y[3] + 1);
// ctx.lineTo(x[0] - 1, y[0] - 1);
// ctx.closePath();
// Inner rectangle
ctx.moveTo(x[1], y[1]);
ctx.lineTo(x[1], y[2]);
ctx.lineTo(x[2], y[2]);
ctx.lineTo(x[2], y[1]);
ctx.lineTo(x[1], y[1]);
ctx.closePath();
ctx.fill();
ctx.restore();
},
/**
* Draw Inner grid line
* @param {CanvasRenderingContext2D} ctx - Context
* @private
*/
_fillInnerRect: function _fillInnerRect(ctx) {
var _this$_getCoordinates2 = this._getCoordinates(),
outerX = _this$_getCoordinates2.x,
outerY = _this$_getCoordinates2.y;
var x = this._caculateInnerPosition(outerX, (outerX[2] - outerX[1]) / 3);
var y = this._caculateInnerPosition(outerY, (outerY[2] - outerY[1]) / 3);
ctx.save();
ctx.strokeStyle = 'rgba(255, 255, 255, 0.7)';
ctx.lineWidth = this.options.lineWidth;
ctx.beginPath();
ctx.moveTo(x[0], y[1]);
ctx.lineTo(x[3], y[1]);
ctx.moveTo(x[0], y[2]);
ctx.lineTo(x[3], y[2]);
ctx.moveTo(x[1], y[0]);
ctx.lineTo(x[1], y[3]);
ctx.moveTo(x[2], y[0]);
ctx.lineTo(x[2], y[3]);
ctx.stroke();
ctx.closePath();
ctx.restore();
},
/**
* Calculate Inner Position
* @param {Array} outer - outer position
* @param {number} size - interval for calculate
* @returns {Array} - inner position
* @private
*/
_caculateInnerPosition: function _caculateInnerPosition(outer, size) {
var position = [];
position[0] = outer[1];
position[1] = outer[1] + size;
position[2] = outer[1] + size * 2;
position[3] = outer[2];
return position;
},
/**
* Get coordinates
* @returns {cropzoneCoordinates} - {@link cropzoneCoordinates}
* @private
*/
_getCoordinates: function _getCoordinates() {
var canvas = this.canvas,
width = this.width,
height = this.height,
left = this.left,
top = this.top;
var halfWidth = width / 2;
var halfHeight = height / 2;
var canvasHeight = canvas.getHeight(); // fabric object
var canvasWidth = canvas.getWidth(); // fabric object
return {
x: [-(halfWidth + left),
// x0
-halfWidth,
// x1
halfWidth,
// x2
halfWidth + (canvasWidth - left - width) // x3
].map(Math.ceil),
y: [-(halfHeight + top),
// y0
-halfHeight,
// y1
halfHeight,
// y2
halfHeight + (canvasHeight - top - height) // y3
].map(Math.ceil)
// 准备请求体数据
var data = {};
data[deviceId + '_' + imgkey] = {
annotations: annotations,
imageWidth: canvas.backgroundImage.width,
imageHeight: canvas.backgroundImage.height,
imageLeft: canvas.backgroundImage.left,
imageTop: canvas.backgroundImage.top,
originalCanvasWidth: canvas.getWidth(),
originalCanvasHeight: canvas.getHeight(),
imgUrl: currentSrc,
imgTitle: imageTitle
};
},
/**
* Stroke border
* @param {CanvasRenderingContext2D} ctx - Context
* @param {string|CanvasGradient|CanvasPattern} strokeStyle - Stroke-style
* @param {number} lineDashWidth - Dash width
* @param {number} [lineDashOffset] - Dash offset
* @param {number} [lineWidth] - line width
* @private
*/
_strokeBorder: function _strokeBorder(ctx, strokeStyle, _ref) {
var lineDashWidth = _ref.lineDashWidth,
lineDashOffset = _ref.lineDashOffset,
lineWidth = _ref.lineWidth;
var halfWidth = this.width / 2;
var halfHeight = this.height / 2;
ctx.save();
ctx.strokeStyle = strokeStyle;
if (ctx.setLineDash) {
ctx.setLineDash([lineDashWidth, lineDashWidth]);
// 将数据转换为 JSON 字符串
var jsonData = JSON.stringify(data);
// 发送请求并传递请求体数据
xhr.send(jsonData);
if (!canvas || !canvasEl.current) {
return Promise.reject();
}
if (lineDashOffset) {
ctx.lineDashOffset = lineDashOffset;
var dataURL = canvas.toDataURL();
var imageName = Date.now() + IMAGE_NAME;
var blob, type;
if (onDownLoad) {
onDownLoad({
downLoadUrl: dataURL
});
return Promise.resolve({
downLoadUrl: dataURL
});
}
if (lineWidth) {
ctx.lineWidth = lineWidth;
if (!auto) {
return Promise.resolve({
downLoadUrl: dataURL
});
}
ctx.beginPath();
ctx.moveTo(-halfWidth, -halfHeight);
ctx.lineTo(halfWidth, -halfHeight);
ctx.lineTo(halfWidth, halfHeight);
ctx.lineTo(-halfWidth, halfHeight);
ctx.lineTo(-halfWidth, -halfHeight);
ctx.stroke();
ctx.restore();
},
/**
* onMoving event listener
* @private
*/
_onMoving: function _onMoving() {
var height = this.height,
width = this.width,
left = this.left,
top = this.top;
var maxLeft = this.canvas.getWidth() - width;
var maxTop = this.canvas.getHeight() - height;
this.left = clamp(left, 0, maxLeft);
this.top = clamp(top, 0, maxTop);
this.canvasEventTrigger[eventNames.OBJECT_MOVED](this);
},
/**
* onScaling event listener
* @param {{e: MouseEvent}} fEvent - Fabric event
* @private
*/
_onScaling: function _onScaling(fEvent) {
var selectedCorner = fEvent.transform.corner;
var pointer = this.canvas.getPointer(fEvent.e);
var settings = this._calcScalingSizeFromPointer(pointer, selectedCorner);
// On scaling cropzone,
// change real width and height and fix scaleFactor to 1
this.scale(1).set(settings);
this.canvasEventTrigger[eventNames.OBJECT_SCALED](this);
},
/**
* Calc scaled size from mouse pointer with selected corner
* @param {{x: number, y: number}} pointer - Mouse position
* @param {string} selectedCorner - selected corner type
* @returns {Object} Having left or(and) top or(and) width or(and) height.
* @private
*/
_calcScalingSizeFromPointer: function _calcScalingSizeFromPointer(pointer, selectedCorner) {
var isCornerTypeValid = cornerTypeValid(selectedCorner);
return isCornerTypeValid && this._resizeCropZone(pointer, selectedCorner);
},
/**
* Align with cropzone ratio
* @param {number} width - cropzone width
* @param {number} height - cropzone height
* @param {number} maxWidth - limit max width
* @param {number} maxHeight - limit max height
* @param {number} scaleTo - cropzone ratio
* @returns {{width: number, height: number}}
* @private
*/
adjustRatioCropzoneSize: function adjustRatioCropzoneSize(_ref2) {
var width = _ref2.width,
height = _ref2.height,
leftMaker = _ref2.leftMaker,
topMaker = _ref2.topMaker,
maxWidth = _ref2.maxWidth,
maxHeight = _ref2.maxHeight,
scaleTo = _ref2.scaleTo;
width = maxWidth ? clamp(width, 1, maxWidth) : width;
height = maxHeight ? clamp(height, 1, maxHeight) : height;
if (!this.presetRatio) {
if (this._withShiftKey) {
// make fixed ratio cropzone
if (width > height) {
height = width;
} else if (height > width) {
width = height;
}
if (isSupportFileApi() && window.saveAs) {
blob = base64ToBlob(dataURL);
type = blob.type.split('/')[1];
if (imageName.split('.').pop() !== type) {
imageName += ".".concat(type);
}
return {
width: width,
height: height,
left: leftMaker(width),
top: topMaker(height)
};
}
if (scaleTo === 'width') {
height = width / this.presetRatio;
window.saveAs(blob, imageName);
} else {
width = height * this.presetRatio;
}
var maxScaleFactor = Math.min(maxWidth / width, maxHeight / height);
if (maxScaleFactor <= 1) {
var _map = [width, height].map(function (v) {
return v * maxScaleFactor;
});
var _map2 = slicedToArray_default()(_map, 2);
width = _map2[0];
height = _map2[1];
}
return {
width: width,
height: height,
left: leftMaker(width),
top: topMaker(height)
};
},
/**
* Get dimension last state cropzone
* @returns {{rectTop: number, rectLeft: number, rectWidth: number, rectHeight: number}}
* @private
*/
_getCropzoneRectInfo: function _getCropzoneRectInfo() {
var _this$canvas = this.canvas,
canvasWidth = _this$canvas.width,
canvasHeight = _this$canvas.height;
var _this$getBoundingRect = this.getBoundingRect(false, true),
rectTop = _this$getBoundingRect.top,
rectLeft = _this$getBoundingRect.left,
rectWidth = _this$getBoundingRect.width,
rectHeight = _this$getBoundingRect.height;
return {
rectTop: rectTop,
rectLeft: rectLeft,
rectWidth: rectWidth,
rectHeight: rectHeight,
rectRight: rectLeft + rectWidth,
rectBottom: rectTop + rectHeight,
canvasWidth: canvasWidth,
canvasHeight: canvasHeight
};
},
/**
* Calc scaling dimension
* @param {Object} position - Mouse position
* @param {string} corner - corner type
* @returns {{left: number, top: number, width: number, height: number}}
* @private
*/
_resizeCropZone: function _resizeCropZone(_ref3, corner) {
var x = _ref3.x,
y = _ref3.y;
var _this$_getCropzoneRec = this._getCropzoneRectInfo(),
rectWidth = _this$_getCropzoneRec.rectWidth,
rectHeight = _this$_getCropzoneRec.rectHeight,
rectTop = _this$_getCropzoneRec.rectTop,
rectLeft = _this$_getCropzoneRec.rectLeft,
rectBottom = _this$_getCropzoneRec.rectBottom,
rectRight = _this$_getCropzoneRec.rectRight,
canvasWidth = _this$_getCropzoneRec.canvasWidth,
canvasHeight = _this$_getCropzoneRec.canvasHeight;
var resizeInfoMap = {
tl: {
width: rectRight - x,
height: rectBottom - y,
leftMaker: function leftMaker(newWidth) {
return rectRight - newWidth;
},
topMaker: function topMaker(newHeight) {
return rectBottom - newHeight;
},
maxWidth: rectRight,
maxHeight: rectBottom,
scaleTo: getScaleBasis(rectLeft - x, rectTop - y)
},
tr: {
width: x - rectLeft,
height: rectBottom - y,
leftMaker: function leftMaker() {
return rectLeft;
},
topMaker: function topMaker(newHeight) {
return rectBottom - newHeight;
},
maxWidth: canvasWidth - rectLeft,
maxHeight: rectBottom,
scaleTo: getScaleBasis(x - rectRight, rectTop - y)
},
mt: {
width: rectWidth,
height: rectBottom - y,
leftMaker: function leftMaker() {
return rectLeft;
},
topMaker: function topMaker(newHeight) {
return rectBottom - newHeight;
},
maxWidth: canvasWidth - rectLeft,
maxHeight: rectBottom,
scaleTo: 'height'
},
ml: {
width: rectRight - x,
height: rectHeight,
leftMaker: function leftMaker(newWidth) {
return rectRight - newWidth;
},
topMaker: function topMaker() {
return rectTop;
},
maxWidth: rectRight,
maxHeight: canvasHeight - rectTop,
scaleTo: 'width'
},
mr: {
width: x - rectLeft,
height: rectHeight,
leftMaker: function leftMaker() {
return rectLeft;
},
topMaker: function topMaker() {
return rectTop;
},
maxWidth: canvasWidth - rectLeft,
maxHeight: canvasHeight - rectTop,
scaleTo: 'width'
},
mb: {
width: rectWidth,
height: y - rectTop,
leftMaker: function leftMaker() {
return rectLeft;
},
topMaker: function topMaker() {
return rectTop;
},
maxWidth: canvasWidth - rectLeft,
maxHeight: canvasHeight - rectTop,
scaleTo: 'height'
},
bl: {
width: rectRight - x,
height: y - rectTop,
leftMaker: function leftMaker(newWidth) {
return rectRight - newWidth;
},
topMaker: function topMaker() {
return rectTop;
},
maxWidth: rectRight,
maxHeight: canvasHeight - rectTop,
scaleTo: getScaleBasis(rectLeft - x, y - rectBottom)
},
br: {
width: x - rectLeft,
height: y - rectTop,
leftMaker: function leftMaker() {
return rectLeft;
},
topMaker: function topMaker() {
return rectTop;
},
maxWidth: canvasWidth - rectLeft,
maxHeight: canvasHeight - rectTop,
scaleTo: getScaleBasis(x - rectRight, y - rectBottom)
if (imageName.split('.').pop() !== type) {
imageName += ".png";
}
};
return this.adjustRatioCropzoneSize(resizeInfoMap[corner]);
},
/**
* Return the whether this cropzone is valid
* @returns {boolean}
*/
isValid: function isValid() {
return this.left >= 0 && this.top >= 0 && this.width > 0 && this.height > 0;
},
/**
* Keydown event handler
* @param {{number}} keyCode - Event keyCode
* @private
*/
_onKeyDown: function _onKeyDown(_ref4) {
var keyCode = _ref4.keyCode;
if (keyCode === keyCodes.SHIFT) {
this._withShiftKey = true;
}
},
/**
* Keyup event handler
* @param {{number}} keyCode - Event keyCode
* @private
*/
_onKeyUp: function _onKeyUp(_ref5) {
var keyCode = _ref5.keyCode;
if (keyCode === keyCodes.SHIFT) {
this._withShiftKey = false;
var anchorEl = document.createElement('a');
anchorEl.href = dataURL;
anchorEl.download = imageName;
document.body.appendChild(anchorEl);
anchorEl.click();
anchorEl.remove();
}
}
});
/* harmony default export */ var CropZone = (Cropzone);
;// CONCATENATED MODULE: ./src/tiny-image-editor/src/components/setting/CropPop.tsx
/* eslint-disable @typescript-eslint/no-unused-vars */
/* eslint-disable @typescript-eslint/no-unused-expressions */
/** 旋转参数 */
var CropPop = function CropPop(_ref) {
var children = _ref.children,
_ref$open = _ref.open,
open = _ref$open === void 0 ? false : _ref$open,
onChange = _ref.onChange;
var handleChange = function handleChange(value) {
onChange && onChange(value);
return Promise.resolve({
downLoadUrl: dataURL
});
};
return {
handleDownload: handleDownload
};
return /*#__PURE__*/external_window_React_default().createElement(setting_Popover, {
content: /*#__PURE__*/external_window_React_default().createElement("div", {
className: "tie-image-editor_tool-crop-pop"
}, /*#__PURE__*/external_window_React_default().createElement("div", {
className: "tie-image-editor_tool-item tie-image-editor_tool-done"
}, /*#__PURE__*/external_window_React_default().createElement("i", {
className: "tie-image-editor_icon",
onClick: function onClick() {
return handleChange(true);
}
})), /*#__PURE__*/external_window_React_default().createElement("div", {
className: "tie-image-editor_tool-item tie-image-editor_tool-clear"
}, /*#__PURE__*/external_window_React_default().createElement("i", {
className: "tie-image-editor_icon",
onClick: function onClick() {
return handleChange(false);
}
}))),
placement: "bottom",
open: open
}, /*#__PURE__*/external_window_React_default().createElement("div", null, children));
};
/* harmony default export */ var setting_CropPop = (CropPop);
;// CONCATENATED MODULE: ./src/tiny-image-editor/src/components/Crop.tsx
/** 下载 */
var Download = /*#__PURE__*/(0,external_window_React_.forwardRef)(function (props, ref) {
var _useContext2 = (0,external_window_React_.useContext)(EditorContext),
_useContext2$lang = _useContext2.lang,
lang = _useContext2$lang === void 0 ? LANG.en : _useContext2$lang;
var _useDownload = useDownload(),
handleDownload = _useDownload.handleDownload;
(0,external_window_React_.useImperativeHandle)(ref, function () {
return {
download: handleDownload
};
}, [handleDownload]);
return /*#__PURE__*/external_window_React_default().createElement("div", {
className: "tie-image-editor_tool-item tie-image-editor_tool-download"
}, /*#__PURE__*/external_window_React_default().createElement(setting_Popover, {
content: MENU_TYPE_TEXT.download[lang],
placement: "top"
}, /*#__PURE__*/external_window_React_default().createElement("i", {
className: "tie-image-editor_icon",
onClick: function onClick() {
return handleDownload(true);
}
})));
});
Download.displayName = 'Download';
;// CONCATENATED MODULE: ./src/tiny-image-editor/src/components/Drag.tsx
var MOUSE_MOVE_THRESHOLD = 10;
var useCrop = function useCrop() {
var useDrag = function useDrag() {
var _useContext = (0,external_window_React_.useContext)(EditorContext),
canvasInstanceRef = _useContext.canvasInstanceRef,
currentMenuRef = _useContext.currentMenuRef,
setCurrentMenu = _useContext.setCurrentMenu,
wrapperInstanceRef = _useContext.wrapperInstanceRef,
canvasIsRender = _useContext.canvasIsRender,
currentMenu = _useContext.currentMenu,
wrapperInstanceRef = _useContext.wrapperInstanceRef,
historyRef = _useContext.historyRef,
unSaveHistory = _useContext.unSaveHistory;
/** 裁剪框实例 */
var cropzone = (0,external_window_React_.useRef)(null);
/** 裁剪开始X */
var startX = (0,external_window_React_.useRef)(0);
/** 裁剪开始Y */
var startY = (0,external_window_React_.useRef)(0);
/** 是否有ShiftKey */
var withShiftKey = (0,external_window_React_.useRef)(false);
/** 计算裁剪框坐标 */
var calcRectDimensionFromPoint = (0,external_window_React_.useCallback)(function (x, y) {
var presetRatio = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : null;
var canvas = canvasInstanceRef.current;
if (!canvas) {
return;
}
var canvasWidth = canvas.getWidth();
var canvasHeight = canvas.getHeight();
var startXNew = startX.current;
var startYNew = startY.current;
var left = clamp(x, 0, startXNew);
var top = clamp(y, 0, startYNew);
var width = clamp(x, startXNew, canvasWidth) - left; // 开始坐标小于鼠标坐标小于画布坐标
var height = clamp(y, startYNew, canvasHeight) - top; //
if (withShiftKey.current && !presetRatio) {
if (width > height) {
height = width;
} else if (height > width) {
width = height;
}
if (startXNew >= x) {
left = startXNew - width;
}
if (startYNew >= y) {
top = startYNew - height;
}
} else if (presetRatio) {
height = width / presetRatio;
if (startXNew >= x) {
left = clamp(startXNew - width, 0, canvasWidth);
}
if (startYNew >= y) {
top = clamp(startYNew - height, 0, canvasHeight);
}
if (top + height > canvasHeight) {
height = canvasHeight - top;
width = height * presetRatio;
if (startXNew >= x) {
left = clamp(startXNew - width, 0, canvasWidth);
}
if (startYNew >= y) {
top = clamp(startYNew - height, 0, canvasHeight);
}
}
}
return {
left: left,
top: top,
width: width,
height: height
};
}, []);
var keydown = (0,external_window_React_.useCallback)(function (e) {
if (currentMenuRef.current !== MENU_TYPE_ENUM.crop) {
return;
}
if (e.keyCode === keyCodes.SHIFT) {
withShiftKey.current = true;
}
}, []);
var keyup = (0,external_window_React_.useCallback)(function (e) {
if (currentMenuRef.current !== MENU_TYPE_ENUM.crop) {
return;
}
if (e.keyCode === keyCodes.SHIFT) {
withShiftKey.current = false;
}
}, []);
var mousemove = (0,external_window_React_.useCallback)(function (fEvent) {
var canvas = canvasInstanceRef.current;
if (!canvas) {
return;
}
if (currentMenuRef.current !== MENU_TYPE_ENUM.crop) {
return;
}
var pointer = canvas.getPointer(fEvent.e);
var x = pointer.x,
y = pointer.y;
var cropzoneNew = cropzone.current;
if (!cropzoneNew) {
return;
}
if (Math.abs(x - startX.current) + Math.abs(y - startY.current) > MOUSE_MOVE_THRESHOLD) {
canvas.remove(cropzoneNew);
cropzoneNew.set(calcRectDimensionFromPoint(x, y, cropzoneNew.presetRatio));
canvas.add(cropzoneNew);
canvas.setActiveObject(cropzoneNew);
}
}, [canvasIsRender]);
var mouseup = (0,external_window_React_.useCallback)(function () {
var canvas = canvasInstanceRef.current;
if (!canvas) {
return;
}
if (currentMenuRef.current !== MENU_TYPE_ENUM.crop) {
return;
}
var cropzoneNew = cropzone.current;
canvas.setActiveObject(cropzoneNew);
canvas.off('mouse:move', mousemove);
canvas.off('mouse:up', mouseup);
}, [canvasIsRender]);
var mousedown = (0,external_window_React_.useCallback)(function (fEvent) {
if (fEvent.target) {
return;
}
var canvas = canvasInstanceRef.current;
if (!canvas) {
return;
}
if (currentMenuRef.current !== MENU_TYPE_ENUM.crop) {
return;
}
canvas.selection = false;
var coord = canvas.getPointer(fEvent.e);
startX.current = coord.x;
startY.current = coord.y;
canvas.on('mouse:move', mousemove);
canvas.on('mouse:up', mouseup);
}, [canvasIsRender]);
var start = (0,external_window_React_.useCallback)(function () {
var canvas = canvasInstanceRef.current;
if (!canvas || !canvasIsRender) {
return;
}
if (cropzone.current) {
return;
}
/** 不让触发ObjectAdd事件 */
unSaveHistory.current = true;
canvas.getObjects().forEach(function (obj) {
obj.evented = false;
});
cropzone.current = new CropZone(canvasInstanceRef.current, {
left: 0,
top: 0,
width: 0.5,
height: 0.5,
strokeWidth: 0,
cornerSize: 16,
cornerColor: 'blue',
fill: 'transparent',
hasRotatingPoint: false,
hasBorders: false,
lockScalingFlip: true,
lockRotation: true,
lockSkewingX: true,
lockSkewingY: true,
cornerStyle: 'circle',
cornerStrokeColor: 'blue',
transparentCorners: false,
lineWidth: 2,
borderColor: 'blue'
});
canvas.discardActiveObject();
canvas.add(cropzone.current);
canvas.on('mouse:down', mousedown);
canvas.selection = false;
canvas.defaultCursor = 'crosshair';
external_window_Fabric_.fabric.util.addListener(document, 'keydown', keydown);
external_window_Fabric_.fabric.util.addListener(document, 'keyup', keyup);
}, [canvasIsRender]);
var end = (0,external_window_React_.useCallback)(function () {
var canvas = canvasInstanceRef.current;
if (!canvas) {
return;
}
var cropzoneNew = cropzone.current;
if (!cropzoneNew) {
return;
}
canvas.remove(cropzoneNew);
canvas.selection = true;
canvas.defaultCursor = 'default';
canvas.off('mouse:down', mousedown);
canvas.off('mouse:move', mousemove);
canvas.off('mouse:up', mouseup);
canvas.forEachObject(function (obj) {
obj.evented = true;
});
cropzone.current = null;
external_window_Fabric_.fabric.util.removeListener(document, 'keydown', keydown);
external_window_Fabric_.fabric.util.removeListener(document, 'keyup', keyup);
/** 解除，可以触发ObjectAdd事件 */
unSaveHistory.current = false;
}, [canvasIsRender]);
/** 切换裁剪 */
var handleCropTrigger = function handleCropTrigger() {
if (currentMenuRef.current !== MENU_TYPE_ENUM.crop) {
start();
} else {
end();
}
setCurrentMenu(currentMenuRef.current !== MENU_TYPE_ENUM.crop ? MENU_TYPE_ENUM.crop : MENU_TYPE_ENUM.default);
};
/** 获取裁剪框参数 */
var getCropzoneRect = function getCropzoneRect() {
var cropzoneNew = cropzone.current;
if (!cropzoneNew || !cropzoneNew.isValid()) {
return null;
}
return {
left: cropzoneNew.left,
top: cropzoneNew.top,
width: cropzoneNew.width,
height: cropzoneNew.height
};
};
/** 获取裁剪部分图片数据 */
var getCroppedImageData = function getCroppedImageData() {
var canvas = canvasInstanceRef.current;
if (!canvas) {
return;
}
var containsCropzone = canvas.contains(cropzone.current);
var cropRect = getCropzoneRect();
if (!cropRect) {
return null;
}
if (containsCropzone) {
canvas.remove(cropzone.current);
}
var imageData = {
imageName: IMAGE_NAME,
url: canvas.toDataURL(cropRect)
};
if (containsCropzone) {
canvas.add(cropzone.current);
}
return imageData;
};
/** 确认或取消裁剪 */
var handleCropChange = function handleCropChange(value) {
var canvas = canvasInstanceRef.current;
if (!canvas) {
return;
}
if (!value) {
end();
start();
} else {
var data = getCroppedImageData();
if (!data) {
return;
}
if (!data.url.includes('base64')) {
// Toast.warn('请划分裁剪区域', 1500);
return;
}
canvas.clear();
canvas.setBackgroundImage(data.url, function () {
var oImg = canvas.backgroundImage;
var _wrapperInstanceRef$c = wrapperInstanceRef.current.getBoundingClientRect(),
height = _wrapperInstanceRef$c.height;
var center = canvas.getCenter();
var imgHeight = oImg.height;
/** 图片过大，使其大小正好跟容器一致 */
oImg.scale(height / imgHeight);
/** 使得图片在canvas中间 */
oImg.set({
left: center.left - oImg.width * (height / imgHeight) / 2,
top: center.top - oImg.height * (height / imgHeight) / 2
});
/** 不让直接操作图片 */
oImg.selectable = false;
oImg.id = WORK_SPACE_ID;
canvas.renderAll();
/** 准备下一次裁剪 */
end();
historyRef.current.updateCanvasState(ACTION.add);
start();
});
}
};
(0,external_window_React_.useEffect)(function () {
if (currentMenu !== MENU_TYPE_ENUM.crop && cropzone.current) {
/** 切换到其他菜单时清空 */
end();
}
}, [currentMenu]);
return {
handleCropTrigger: handleCropTrigger,
handleCropChange: handleCropChange,
currentMenu: currentMenu
};
};
/** 裁剪 */
var Crop = function Crop() {
var _useContext2 = (0,external_window_React_.useContext)(EditorContext),
_useContext2$lang = _useContext2.lang,
lang = _useContext2$lang === void 0 ? LANG.en : _useContext2$lang;
var _useCrop = useCrop(),
handleCropTrigger = _useCrop.handleCropTrigger,
handleCropChange = _useCrop.handleCropChange,
currentMenu = _useCrop.currentMenu;
return /*#__PURE__*/external_window_React_default().createElement((external_window_React_default()).Fragment, null, /*#__PURE__*/external_window_React_default().createElement("div", {
className: classnames_default()('tie-image-editor_tool-item tie-image-editor_tool-crop', defineProperty_default()({}, 'tie-image-editor_tool-item--checked', currentMenu === MENU_TYPE_ENUM.crop))
}, /*#__PURE__*/external_window_React_default().createElement(setting_CropPop, {
open: currentMenu === MENU_TYPE_ENUM.crop,
onChange: handleCropChange
}, /*#__PURE__*/external_window_React_default().createElement(setting_Popover, {
content: MENU_TYPE_TEXT.crop[lang],
placement: "top"
}, /*#__PURE__*/external_window_React_default().createElement("i", {
className: "tie-image-editor_icon",
onClick: handleCropTrigger
})))));
};
;// CONCATENATED MODULE: ./src/tiny-image-editor/src/components/Download.tsx
var useDownload = function useDownload() {
var _useContext = (0,external_window_React_.useContext)(EditorContext),
canvasInstanceRef = _useContext.canvasInstanceRef,
canvasEl = _useContext.canvasEl,
onDownLoad = _useContext.onDownLoad;
var handleDownload = function handleDownload() {
var auto = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
console.log('heheh');
var canvas = canvasInstanceRef.current;
if (!canvas || !canvasEl.current) {
return Promise.reject();
}
var dataURL = canvas.toDataURL();
var imageName = Date.now() + IMAGE_NAME;
var blob, type;
if (onDownLoad) {
onDownLoad({
downLoadUrl: dataURL
});
return Promise.resolve({
downLoadUrl: dataURL
});
}
if (!auto) {
return Promise.resolve({
downLoadUrl: dataURL
});
}
if (isSupportFileApi() && window.saveAs) {
blob = base64ToBlob(dataURL);
type = blob.type.split('/')[1];
if (imageName.split('.').pop() !== type) {
imageName += ".".concat(type);
}
window.saveAs(blob, imageName);
} else {
if (imageName.split('.').pop() !== type) {
imageName += ".png";
}
var anchorEl = document.createElement('a');
anchorEl.href = dataURL;
anchorEl.download = imageName;
document.body.appendChild(anchorEl);
anchorEl.click();
anchorEl.remove();
}
return Promise.resolve({
downLoadUrl: dataURL
});
};
return {
handleDownload: handleDownload
};
};
/** 下载 */
var Download = /*#__PURE__*/(0,external_window_React_.forwardRef)(function (props, ref) {
var _useContext2 = (0,external_window_React_.useContext)(EditorContext),
_useContext2$lang = _useContext2.lang,
lang = _useContext2$lang === void 0 ? LANG.en : _useContext2$lang;
var _useDownload = useDownload(),
handleDownload = _useDownload.handleDownload;
(0,external_window_React_.useImperativeHandle)(ref, function () {
return {
download: handleDownload
};
}, [handleDownload]);
return /*#__PURE__*/external_window_React_default().createElement("div", {
className: "tie-image-editor_tool-item tie-image-editor_tool-download"
}, /*#__PURE__*/external_window_React_default().createElement(setting_Popover, {
content: MENU_TYPE_TEXT.download[lang],
placement: "top"
}, /*#__PURE__*/external_window_React_default().createElement("i", {
className: "tie-image-editor_icon",
onClick: function onClick() {
return handleDownload(true);
}
})));
});
Download.displayName = 'Download';
;// CONCATENATED MODULE: ./src/tiny-image-editor/src/components/Drag.tsx
var useDrag = function useDrag() {
var _useContext = (0,external_window_React_.useContext)(EditorContext),
canvasInstanceRef = _useContext.canvasInstanceRef,
wrapperInstanceRef = _useContext.wrapperInstanceRef,
canvasIsRender = _useContext.canvasIsRender,
currentMenu = _useContext.currentMenu,
setCurrentMenu = _useContext.setCurrentMenu;
var dragModeRef = (0,external_window_React_.useRef)(false);
(0,external_window_React_.useEffect)(function () {
dragModeRef.current = currentMenu === MENU_TYPE_ENUM.drag;
}, [setCurrentMenu, currentMenu]);
var _setDring = function _setDring() {
setCurrentMenu = _useContext.setCurrentMenu;
var dragModeRef = (0,external_window_React_.useRef)(false);
(0,external_window_React_.useEffect)(function () {
dragModeRef.current = currentMenu === MENU_TYPE_ENUM.drag;
}, [setCurrentMenu, currentMenu]);
var _setDring = function _setDring() {
var canvas = canvasInstanceRef.current;
if (!canvas) {
return;
......@@ -3004,6 +2153,7 @@ var useDraw = function useDraw() {
}
canvas.freeDrawingBrush = new external_window_Fabric_.fabric['PencilBrush'](canvas);
var brush = canvas.freeDrawingBrush;
console.log("canvas.freeDrawingBrush", brush, canvas.freeDrawingBrush);
brush.color = paintConfigValue.current.color;
if (brush.getPatternSrc) {
brush.source = brush.getPatternSrc.call(brush);
......@@ -3023,206 +2173,54 @@ var useDraw = function useDraw() {
return;
}
if (currentMenuRef.current !== MENU_TYPE_ENUM.draw) {
canvas.isDrawingMode = true;
initDraw();
} else {
canvas.isDrawingMode = false;
}
setCurrentMenu(currentMenuRef.current !== MENU_TYPE_ENUM.draw ? MENU_TYPE_ENUM.draw : MENU_TYPE_ENUM.default);
};
var handlePaintChange = function handlePaintChange(type, value) {
if (!canvasInstanceRef.current) {
return;
}
var canvas = canvasInstanceRef.current;
var activeObject = canvas.getActiveObjects()[0];
if (type === IPaintTypes.color) {
paintConfigValue.current.color = value;
activeObject && activeObject.set('fill', value);
} else {
paintConfigValue.current.size = value;
activeObject && activeObject.set('width', value);
}
canvas.renderAll();
initDraw();
};
return {
handleDrawTrigger: handleDrawTrigger,
handlePaintChange: handlePaintChange,
currentMenu: currentMenu
};
};
var Draw = function Draw() {
var _useContext2 = (0,external_window_React_.useContext)(EditorContext),
_useContext2$lang = _useContext2.lang,
lang = _useContext2$lang === void 0 ? LANG.en : _useContext2$lang;
var _useDraw = useDraw(),
handleDrawTrigger = _useDraw.handleDrawTrigger,
handlePaintChange = _useDraw.handlePaintChange,
currentMenu = _useDraw.currentMenu;
return /*#__PURE__*/external_window_React_default().createElement((external_window_React_default()).Fragment, null, /*#__PURE__*/external_window_React_default().createElement("div", {
className: classnames_default()('tie-image-editor_tool-item tie-image-editor_tool-draw', defineProperty_default()({}, 'tie-image-editor_tool-item--checked', currentMenu === MENU_TYPE_ENUM.draw))
}, /*#__PURE__*/external_window_React_default().createElement(setting_Paint, {
open: currentMenu === MENU_TYPE_ENUM.draw,
onChange: handlePaintChange
}, /*#__PURE__*/external_window_React_default().createElement(setting_Popover, {
content: MENU_TYPE_TEXT.draw[lang],
placement: "top"
}, /*#__PURE__*/external_window_React_default().createElement("i", {
className: "tie-image-editor_icon",
onClick: handleDrawTrigger
})))));
};
;// CONCATENATED MODULE: ./src/tiny-image-editor/src/components/setting/FlipPop.tsx
/* eslint-disable @typescript-eslint/no-unused-vars */
/* eslint-disable @typescript-eslint/no-unused-expressions */
/** 旋转参数 */
var FlipPop = function FlipPop(_ref) {
var children = _ref.children,
_ref$open = _ref.open,
open = _ref$open === void 0 ? false : _ref$open,
onChange = _ref.onChange;
var _useState = (0,external_window_React_.useState)(false),
_useState2 = slicedToArray_default()(_useState, 2),
flipX = _useState2[0],
setFlipX = _useState2[1];
var _useState3 = (0,external_window_React_.useState)(false),
_useState4 = slicedToArray_default()(_useState3, 2),
flipY = _useState4[0],
setFlipY = _useState4[1];
var handleAngelChange = function handleAngelChange(type, value) {
if (type === FLIP_TYPE.flipX) {
setFlipX(value);
} else {
setFlipY(value);
}
onChange && onChange(type, value);
};
return /*#__PURE__*/external_window_React_default().createElement(setting_Popover, {
content: /*#__PURE__*/external_window_React_default().createElement("div", {
className: "tie-image-editor_tool-flip-pop"
}, /*#__PURE__*/external_window_React_default().createElement("div", {
className: "tie-image-editor_tool-item tie-image-editor_tool-flipX",
onClick: function onClick() {
return handleAngelChange(FLIP_TYPE.flipX, !flipX);
}
}, /*#__PURE__*/external_window_React_default().createElement("i", {
className: "tie-image-editor_icon"
})), /*#__PURE__*/external_window_React_default().createElement("div", {
className: "tie-image-editor_tool-item tie-image-editor_tool-flipY",
onClick: function onClick() {
return handleAngelChange(FLIP_TYPE.flipY, !flipY);
}
}, /*#__PURE__*/external_window_React_default().createElement("i", {
className: "tie-image-editor_icon"
}))),
placement: "bottom",
open: open
}, /*#__PURE__*/external_window_React_default().createElement("div", null, children));
};
/* harmony default export */ var setting_FlipPop = (FlipPop);
;// CONCATENATED MODULE: ./src/tiny-image-editor/src/components/Flip.tsx
var useFlip = function useFlip() {
var _useContext = (0,external_window_React_.useContext)(EditorContext),
canvasInstanceRef = _useContext.canvasInstanceRef,
currentMenuRef = _useContext.currentMenuRef,
setCurrentMenu = _useContext.setCurrentMenu,
canvasIsRender = _useContext.canvasIsRender,
currentMenu = _useContext.currentMenu,
historyRef = _useContext.historyRef;
(0,external_window_React_.useEffect)(function () {
var canvas = canvasInstanceRef.current;
if (!canvas || !canvasIsRender) {
return;
canvas.isDrawingMode = true;
initDraw();
} else {
canvas.isDrawingMode = false;
}
}, [canvasIsRender]);
var handleFlipTrigger = function handleFlipTrigger() {
setCurrentMenu(currentMenuRef.current !== MENU_TYPE_ENUM.flip ? MENU_TYPE_ENUM.flip : MENU_TYPE_ENUM.default);
setCurrentMenu(currentMenuRef.current !== MENU_TYPE_ENUM.draw ? MENU_TYPE_ENUM.draw : MENU_TYPE_ENUM.default);
};
var handleFlipChange = function handleFlipChange(type, value) {
var canvas = canvasInstanceRef.current;
if (!canvas) {
var handlePaintChange = function handlePaintChange(type, value) {
if (!canvasInstanceRef.current) {
return;
}
/** 针对底图翻转的原理是将图标先旋转相反角度，再重新计算坐标，最后翻转 */
canvas.getObjects().forEach(function (obj) {
obj.originalPoint = obj.originalPoint || {
left: obj.left,
top: obj.top
};
var options = defineProperty_default()({}, type, value);
if (type === FLIP_TYPE.flipX) {
if (value) {
options = objectSpread2_default()(objectSpread2_default()({}, options), {}, {
left: canvas.width - obj.originalPoint.left - obj.width
});
} else {
options = objectSpread2_default()(objectSpread2_default()({}, options), {}, {
left: obj.originalPoint.left
});
}
} else {
if (value) {
options = objectSpread2_default()(objectSpread2_default()({}, options), {}, {
top: canvas.height - obj.originalPoint.top - obj.height
});
} else {
options = objectSpread2_default()(objectSpread2_default()({}, options), {}, {
top: obj.originalPoint.top
});
}
}
obj.set(options).rotate(parseFloat((obj.angle * -1).toString())).setCoords();
});
var canvasImage = canvas.backgroundImage;
var angle = canvasImage.angle;
if (value) {
angle *= -1;
var canvas = canvasInstanceRef.current;
var activeObject = canvas.getActiveObjects()[0];
if (type === IPaintTypes.color) {
paintConfigValue.current.color = value;
activeObject && activeObject.set('fill', value);
} else {
paintConfigValue.current.size = value;
activeObject && activeObject.set('width', value);
}
canvasImage.set(defineProperty_default()({}, type, value));
canvasImage.rotate(parseFloat(angle)).setCoords(); // parseFloat for -0 to 0
canvasImage.setCoords();
canvas.renderAll();
historyRef.current.updateCanvasState(ACTION.add);
initDraw();
};
return {
handleFlipTrigger: handleFlipTrigger,
handleFlipChange: handleFlipChange,
handleDrawTrigger: handleDrawTrigger,
handlePaintChange: handlePaintChange,
currentMenu: currentMenu
};
};
var Flip = function Flip() {
var Draw = function Draw() {
var _useContext2 = (0,external_window_React_.useContext)(EditorContext),
_useContext2$lang = _useContext2.lang,
lang = _useContext2$lang === void 0 ? LANG.en : _useContext2$lang;
var _useFlip = useFlip(),
handleFlipTrigger = _useFlip.handleFlipTrigger,
handleFlipChange = _useFlip.handleFlipChange,
currentMenu = _useFlip.currentMenu;
var _useDraw = useDraw(),
handleDrawTrigger = _useDraw.handleDrawTrigger,
handlePaintChange = _useDraw.handlePaintChange,
currentMenu = _useDraw.currentMenu;
return /*#__PURE__*/external_window_React_default().createElement((external_window_React_default()).Fragment, null, /*#__PURE__*/external_window_React_default().createElement("div", {
className: classnames_default()('tie-image-editor_tool-item tie-image-editor_tool-flip', defineProperty_default()({}, 'tie-image-editor_tool-item--checked', currentMenu === MENU_TYPE_ENUM.flip))
}, /*#__PURE__*/external_window_React_default().createElement(setting_FlipPop, {
open: currentMenu === MENU_TYPE_ENUM.flip,
onChange: handleFlipChange
className: classnames_default()('tie-image-editor_tool-item tie-image-editor_tool-draw', defineProperty_default()({}, 'tie-image-editor_tool-item--checked', currentMenu === MENU_TYPE_ENUM.draw))
}, /*#__PURE__*/external_window_React_default().createElement(setting_Paint, {
open: currentMenu === MENU_TYPE_ENUM.draw,
onChange: handlePaintChange
}, /*#__PURE__*/external_window_React_default().createElement(setting_Popover, {
content: MENU_TYPE_TEXT.flip[lang],
content: MENU_TYPE_TEXT.draw[lang],
placement: "top"
}, /*#__PURE__*/external_window_React_default().createElement("i", {
className: "tie-image-editor_icon",
onClick: handleFlipTrigger
onClick: handleDrawTrigger
})))));
};
;// CONCATENATED MODULE: ./src/tiny-image-editor/src/components/History.tsx
......@@ -3472,204 +2470,6 @@ var History = /*#__PURE__*/(0,external_window_React_.forwardRef)(function (props
}))));
});
History.displayName = 'History';
;// CONCATENATED MODULE: ./src/tiny-image-editor/src/components/setting/MosaicPop.tsx
/* eslint-disable @typescript-eslint/no-unused-vars */
/* eslint-disable @typescript-eslint/no-unused-expressions */
/** 马赛克参数 */
var MosaicPop = function MosaicPop(_ref) {
var children = _ref.children,
_ref$open = _ref.open,
open = _ref$open === void 0 ? false : _ref$open,
onChange = _ref.onChange;
var handleSizeChange = function handleSizeChange(value) {
onChange && onChange(value);
};
return /*#__PURE__*/external_window_React_default().createElement(setting_Popover, {
content: /*#__PURE__*/external_window_React_default().createElement("div", {
className: "tie-image-editor_tool-crop-pop"
}, /*#__PURE__*/external_window_React_default().createElement("div", {
className: "tie-image-editor_tool-paint-size-wrapper"
}, paintConfig.mosaicSizes.map(function (size, index) {
return /*#__PURE__*/external_window_React_default().createElement("div", {
onClick: function onClick() {
return handleSizeChange(size);
},
key: size,
className: "tie-image-editor_tool-paint-size",
style: {
width: 10 + index * 5,
height: 10 + index * 5
}
});
}))),
placement: "bottom",
open: open
}, /*#__PURE__*/external_window_React_default().createElement("div", null, children));
};
/* harmony default export */ var setting_MosaicPop = (MosaicPop);
;// CONCATENATED MODULE: ./src/tiny-image-editor/src/components/Mosaic.tsx
var blockSize = paintConfig.mosaicSizes[0];
var mosaicify = function mosaicify(imageData) {
var data = imageData.data;
var iLen = imageData.height;
var jLen = imageData.width;
var index;
var i;
var j;
var r;
var g;
var b;
var a;
var _i;
var _j;
var _iLen;
var _jLen;
for (i = 0; i < iLen; i += blockSize) {
for (j = 0; j < jLen; j += blockSize) {
index = i * 4 * jLen + j * 4;
r = data[index];
g = data[index + 1];
b = data[index + 2];
a = data[index + 3];
_iLen = Math.min(i + blockSize, iLen);
_jLen = Math.min(j + blockSize, jLen);
for (_i = i; _i < _iLen; _i++) {
for (_j = j; _j < _jLen; _j++) {
index = _i * 4 * jLen + _j * 4;
data[index] = r;
data[index + 1] = g;
data[index + 2] = b;
data[index + 3] = a;
/*
data[index] = 0;
data[index + 1] = 0;
data[index + 2] = 0;
*/
}
}
}
}
};
var useMosaic = function useMosaic() {
var _useContext = (0,external_window_React_.useContext)(EditorContext),
canvasInstanceRef = _useContext.canvasInstanceRef,
canvasIsRender = _useContext.canvasIsRender,
currentMenu = _useContext.currentMenu,
currentMenuRef = _useContext.currentMenuRef,
setCurrentMenu = _useContext.setCurrentMenu;
var mosaicBrush = (0,external_window_React_.useRef)(null);
var initMosaic = (0,external_window_React_.useCallback)(function () {
var canvas = canvasInstanceRef.current;
if (!canvas) {
return;
}
mosaicBrush.current = new external_window_Fabric_.fabric.PatternBrush(canvas);
mosaicBrush.current.getPatternSrc = function () {
// 创立一个暂存 canvas 来绘製要画的图案
var cropping = {
left: 0,
top: 0,
width: canvas.width,
height: canvas.height
};
var imageCanvas = canvas.toCanvasElement(1, cropping);
var imageCtx = imageCanvas.getContext('2d');
var imageData = imageCtx.getImageData(0, 0, imageCanvas.width, imageCanvas.height);
mosaicify(imageData);
imageCtx.putImageData(imageData, 0, 0);
var patternCanvas = external_window_Fabric_.fabric.document.createElement('canvas'); // 这里的ceateElement一定要使用fabric内置的方法
var patternCtx = patternCanvas.getContext('2d');
patternCanvas.width = canvas.width || 0;
patternCanvas.height = canvas.height || 0;
patternCtx.drawImage(imageCanvas, 0, 0, imageCanvas.width, imageCanvas.height, cropping.left, cropping.top, cropping.width, cropping.height);
return patternCanvas;
};
}, []);
(0,external_window_React_.useEffect)(function () {
if (canvasIsRender) {
initMosaic();
}
}, [canvasIsRender]);
var handleMosaicTrigger = (0,external_window_React_.useCallback)(function () {
var canvas = canvasInstanceRef.current;
if (!canvas) {
return;
}
if (currentMenuRef.current !== MENU_TYPE_ENUM.mosaic) {
/** 启动马赛克 */
canvas.isDrawingMode = true;
canvas.freeDrawingBrush = mosaicBrush.current;
var brush = canvas.freeDrawingBrush;
if (brush.getPatternSrc) {
brush.source = brush.getPatternSrc.call(brush);
}
brush.width = 30;
brush.shadow = new external_window_Fabric_.fabric.Shadow({
blur: 0,
offsetX: 0,
offsetY: 0,
affectStroke: true
});
} else {
canvas.isDrawingMode = false;
}
setCurrentMenu(currentMenuRef.current === MENU_TYPE_ENUM.mosaic ? MENU_TYPE_ENUM.default : MENU_TYPE_ENUM.mosaic);
}, [initMosaic]);
var handleSizeChange = function handleSizeChange(size) {
var canvas = canvasInstanceRef.current;
if (!canvas) {
return;
}
blockSize = size;
var brush = canvas.freeDrawingBrush;
if (brush.getPatternSrc) {
brush.source = brush.getPatternSrc.call(brush);
}
};
return {
currentMenu: currentMenu,
handleMosaicTrigger: handleMosaicTrigger,
handleSizeChange: handleSizeChange
};
};
/**
* 马赛克
*/
var Mosaic = function Mosaic() {
var _useContext2 = (0,external_window_React_.useContext)(EditorContext),
_useContext2$lang = _useContext2.lang,
lang = _useContext2$lang === void 0 ? LANG.en : _useContext2$lang;
var _useMosaic = useMosaic(),
currentMenu = _useMosaic.currentMenu,
handleMosaicTrigger = _useMosaic.handleMosaicTrigger,
handleSizeChange = _useMosaic.handleSizeChange;
return /*#__PURE__*/external_window_React_default().createElement((external_window_React_default()).Fragment, null, /*#__PURE__*/external_window_React_default().createElement("div", {
className: classnames_default()('tie-image-editor_tool-item tie-image-editor_tool-mosaic', defineProperty_default()({}, 'tie-image-editor_tool-item--checked', currentMenu === MENU_TYPE_ENUM.mosaic))
}, /*#__PURE__*/external_window_React_default().createElement(setting_MosaicPop, {
open: currentMenu === MENU_TYPE_ENUM.mosaic,
onChange: handleSizeChange
}, /*#__PURE__*/external_window_React_default().createElement(setting_Popover, {
content: MENU_TYPE_TEXT.mosaic[lang],
placement: "top"
}, /*#__PURE__*/external_window_React_default().createElement("i", {
className: "tie-image-editor_icon",
onClick: handleMosaicTrigger
})))));
};
/* harmony default export */ var components_Mosaic = (Mosaic);
;// CONCATENATED MODULE: ./src/tiny-image-editor/src/components/Rect.tsx
/* eslint-disable @typescript-eslint/no-unused-expressions */
......@@ -3891,132 +2691,6 @@ var Reset = function Reset() {
onClick: handleReset
})));
};
// EXTERNAL MODULE: external "window.RcSlider"
var external_window_RcSlider_ = __webpack_require__(760);
var external_window_RcSlider_default = /*#__PURE__*/__webpack_require__.n(external_window_RcSlider_);
;// CONCATENATED MODULE: ./node_modules/rc-slider/assets/index.css
// extracted by mini-css-extract-plugin
;// CONCATENATED MODULE: ./src/tiny-image-editor/src/components/setting/RotatePop.tsx
/* eslint-disable @typescript-eslint/no-unused-vars */
/* eslint-disable @typescript-eslint/no-unused-expressions */
/** 旋转参数 */
var RotatePop = function RotatePop(_ref) {
var children = _ref.children,
_ref$open = _ref.open,
open = _ref$open === void 0 ? false : _ref$open,
onChange = _ref.onChange;
var _useState = (0,external_window_React_.useState)(paintConfig.rotates[0]),
_useState2 = slicedToArray_default()(_useState, 2),
angel = _useState2[0],
setAngel = _useState2[1];
var handleAngelChange = function handleAngelChange(value) {
setAngel(+value);
onChange && onChange(+value);
};
return /*#__PURE__*/external_window_React_default().createElement(setting_Popover, {
content: /*#__PURE__*/external_window_React_default().createElement("div", {
className: "tie-image-editor_tool-rotate-pop-content"
}, /*#__PURE__*/external_window_React_default().createElement((external_window_RcSlider_default()), {
min: paintConfig.rotates[0],
max: paintConfig.rotates[paintConfig.rotates.length - 1],
onChange: handleAngelChange,
value: angel,
marks: paintConfig.rotates.reduce(function (pre, cur) {
return objectSpread2_default()(objectSpread2_default()({}, pre), {}, defineProperty_default()({}, cur, cur + '°'));
}, {})
})),
placement: "bottom-end",
open: open
}, /*#__PURE__*/external_window_React_default().createElement("div", null, children));
};
/* harmony default export */ var setting_RotatePop = (RotatePop);
;// CONCATENATED MODULE: ./src/tiny-image-editor/src/components/Rotate.tsx
// import { Popover } from '@casstime/bricks';
var useRotate = function useRotate() {
var _useContext = (0,external_window_React_.useContext)(EditorContext),
canvasInstanceRef = _useContext.canvasInstanceRef,
currentMenuRef = _useContext.currentMenuRef,
setCurrentMenu = _useContext.setCurrentMenu,
canvasIsRender = _useContext.canvasIsRender,
currentMenu = _useContext.currentMenu,
historyRef = _useContext.historyRef;
(0,external_window_React_.useEffect)(function () {
var canvas = canvasInstanceRef.current;
if (!canvas || !canvasIsRender) {
return;
}
}, [canvasIsRender]);
var handleRotateTrigger = function handleRotateTrigger() {
setCurrentMenu(currentMenuRef.current !== MENU_TYPE_ENUM.rotate ? MENU_TYPE_ENUM.rotate : MENU_TYPE_ENUM.default);
};
var handleRotateChange = function handleRotateChange(value) {
var canvas = canvasInstanceRef.current;
if (!canvas) {
return;
}
canvas.getObjects().forEach(function (obj) {
/** 记录第一次形状的位置，方便计算相对位置 */
obj.originalPoint = obj.originalPoint || new external_window_Fabric_.fabric.Point(obj.left, obj.top);
var posNewCenter = external_window_Fabric_.fabric.util.rotatePoint(obj.originalPoint, canvas.getVpCenter(), external_window_Fabric_.fabric.util.degreesToRadians(value));
obj.set({
left: posNewCenter.x,
top: posNewCenter.y,
angle: value
});
});
/** 单独对背景图进行旋转 */
var canvasImage = canvas.backgroundImage;
canvasImage.rotate(value);
canvasImage.setCoords();
canvas.requestRenderAll();
historyRef.current.updateCanvasState(ACTION.add);
};
return {
handleRotateTrigger: handleRotateTrigger,
handleRotateChange: handleRotateChange,
currentMenu: currentMenu
};
};
var Rotate = function Rotate() {
var _useContext2 = (0,external_window_React_.useContext)(EditorContext),
_useContext2$lang = _useContext2.lang,
lang = _useContext2$lang === void 0 ? LANG.en : _useContext2$lang;
var _useRotate = useRotate(),
handleRotateTrigger = _useRotate.handleRotateTrigger,
handleRotateChange = _useRotate.handleRotateChange,
currentMenu = _useRotate.currentMenu;
return /*#__PURE__*/external_window_React_default().createElement((external_window_React_default()).Fragment, null, /*#__PURE__*/external_window_React_default().createElement("div", {
className: classnames_default()('tie-image-editor_tool-item tie-image-editor_tool-rotate', defineProperty_default()({}, 'tie-image-editor_tool-item--checked', currentMenu === MENU_TYPE_ENUM.rotate))
}, /*#__PURE__*/external_window_React_default().createElement(setting_RotatePop, {
open: currentMenu === MENU_TYPE_ENUM.rotate,
onChange: handleRotateChange
}, /*#__PURE__*/external_window_React_default().createElement(setting_Popover, {
content: MENU_TYPE_TEXT.rotate[lang],
placement: "top"
}, /*#__PURE__*/external_window_React_default().createElement("i", {
className: "tie-image-editor_icon",
onClick: handleRotateTrigger
})))));
};
;// CONCATENATED MODULE: ./src/tiny-image-editor/src/components/setting/ScalePop.tsx
/* eslint-disable react/button-has-type */
/* eslint-disable @typescript-eslint/no-unused-vars */
......@@ -4234,6 +2908,11 @@ var useText = function useText() {
id: Math.random() * 4 + '_' + Date.now(),
fill: paintConfigValue.current.color
});
window._anicCanvasData = window._anicCanvasData || [];
window._anicCanvasData.push({
type: 'text',
data: text
});
canvas.add(text);
canvas.setActiveObject(text);
isSelectingText.current = true;
......@@ -4303,11 +2982,113 @@ var Text = function Text() {
})))));
};
;// CONCATENATED MODULE: ./src/tiny-image-editor/src/components/Upload.tsx
// import { Popover } from '@casstime/bricks';
function annotationsInit(imgData, canvas, historyRef, positionInfo) {
var scaleX = positionInfo.scaleX,
scaleY = positionInfo.scaleY,
leftOffset = positionInfo.leftOffset,
topOffset = positionInfo.topOffset;
// 遍历标注信息，重新创建元素并添加到画布上
imgData.annotations.forEach(function (annotation) {
var newObject;
switch (annotation.type) {
case 'rect':
newObject = new external_window_Fabric_.fabric.Rect({
left: annotation.left * scaleX + leftOffset,
top: annotation.top * scaleY + topOffset,
originX: 'left',
originY: 'top',
width: annotation.width * scaleX,
height: annotation.height * scaleY,
angle: annotation.angle || 0,
fill: annotation.fill || 'rgba(255,0,0,0)',
stroke: annotation.stroke,
strokeWidth: annotation.size * Math.max(scaleX, scaleY),
transparentCorners: false,
opacity: annotation.opacity || 1
});
break;
case 'textbox':
case 'i-text':
case 'text':
newObject = new external_window_Fabric_.fabric.IText(annotation.text, {
left: annotation.left * scaleX + leftOffset,
top: annotation.top * scaleY + topOffset,
width: annotation.width * scaleX,
fontSize: annotation.fontSize,
fill: annotation.fill,
id: Math.random() * 4 + '_' + Date.now(),
opacity: annotation.opacity || 1
});
break;
case 'circle':
newObject = new external_window_Fabric_.fabric.Circle({
left: annotation.left * scaleX + leftOffset,
top: annotation.top * scaleY + topOffset,
radius: annotation.width / 2 * Math.max(scaleX, scaleY),
angle: annotation.angle || 0,
fill: annotation.fill || '',
originX: 'left',
originY: 'top',
stroke: annotation.stroke,
strokeWidth: annotation.size * Math.max(scaleX, scaleY),
opacity: annotation.opacity || 1
});
break;
case 'arrow':
var pointList = annotation.pointList || [annotation.left, annotation.top, annotation.left, annotation.top];
pointList[0] = pointList[0] * scaleX + leftOffset;
pointList[1] = pointList[1] * scaleY + topOffset;
pointList[2] = pointList[2] * scaleX + leftOffset;
pointList[3] = pointList[3] * scaleY + topOffset;
newObject = new helpers_Arrow(pointList, {
strokeWidth: annotation.size * Math.max(scaleX, scaleY),
stroke: annotation.stroke,
id: new Date().valueOf() + '_' + Math.random() * 4
});
newObject.strokeUniform = true;
break;
case 'path':
var adjustedPath = annotation.path.map(function (segment) {
var newSegment = toConsumableArray_default()(segment);
for (var i = 1; i < newSegment.length; i++) {
if (typeof newSegment[i] === 'number') {
if (i % 2 === 1) {
newSegment[i] = newSegment[i] * scaleX + leftOffset;
} else {
newSegment[i] = newSegment[i] * scaleY + topOffset;
}
}
}
return newSegment;
});
newObject = new external_window_Fabric_.fabric.Path(adjustedPath, {
fill: annotation.fill,
stroke: annotation.stroke,
strokeWidth: annotation.size * Math.max(scaleX, scaleY),
opacity: annotation.opacity || 1
});
break;
// 可以根据需要添加更多元素类型的处理
}
if (newObject) {
console.log("annotation", newObject, annotation, canvas);
canvas.add(newObject);
canvas.setActiveObject(newObject);
historyRef.current.updateCanvasState(ACTION.add, true, true);
// canvas.setActiveObject(newObject);
}
});
}
var useUpload = function useUpload() {
var _useContext = (0,external_window_React_.useContext)(EditorContext),
canvasInstanceRef = _useContext.canvasInstanceRef,
......@@ -4316,9 +3097,59 @@ var useUpload = function useUpload() {
historyRef = _useContext.historyRef,
setCurrentMenu = _useContext.setCurrentMenu,
initBackGroundImage = _useContext.initBackGroundImage;
var handleUpload = function handleUpload(e) {
var handleUpload = function handleUpload(e, imgData) {
var _e$target$files$;
console.log("e", e, imgData);
var canvas = canvasInstanceRef.current;
if (canvasEl !== null && canvasEl !== void 0 && canvasEl.current && typeof e === 'string') {
var imgObj = new Image();
if (imgData) {
// 获取当前图片和画布尺寸
var currentImageWidth = canvas.backgroundImage.width;
var currentImageHeight = canvas.backgroundImage.height;
var currentCanvasWidth = canvas.getWidth();
var currentCanvasHeight = canvas.getHeight();
var imageWidth = imgData.imageWidth || imgData.imgWidth;
var imageHeight = imgData.imageHeight || imgData.imgHeight;
// 计算缩放比例
var originalScaleX = imgData.originalCanvasWidth / imageWidth;
var originalScaleY = imgData.originalCanvasHeight / imageHeight;
var currentScaleX = currentCanvasWidth / currentImageWidth;
var currentScaleY = currentCanvasHeight / currentImageHeight;
var scaleX = currentScaleX / originalScaleX;
var scaleY = currentScaleY / originalScaleY;
var newScaleFactor = Math.min(currentCanvasWidth / imageWidth, currentCanvasHeight / imageHeight);
var newLeft = (currentCanvasWidth - imageWidth * newScaleFactor) / 2;
var newTop = (currentCanvasHeight - imageHeight * newScaleFactor) / 2;
var leftOffset = newLeft - imgData.imageLeft * scaleX;
var topOffset = newTop - imgData.imageTop * scaleY;
imgObj.src = e;
initBackGroundImage(e, true, function () {
historyRef.current.updateCanvasState(ACTION.add);
annotationsInit(imgData, canvas, historyRef, {
scaleX: scaleX,
scaleY: scaleY,
newLeft: newLeft,
newTop: newTop,
leftOffset: leftOffset,
topOffset: topOffset
});
return;
}, {
newLeft: newLeft,
newTop: newTop,
newScaleFactor: newScaleFactor
});
} else {
imgObj.src = e;
initBackGroundImage(e, true, function () {
historyRef.current.updateCanvasState(ACTION.add);
return;
});
}
return;
}
if (!canvas || !canvasEl.current || !e.target.files.length || !((_e$target$files$ = e.target.files[0]) !== null && _e$target$files$ !== void 0 && (_e$target$files$ = _e$target$files$.type) !== null && _e$target$files$ !== void 0 && _e$target$files$.includes('image'))) {
return;
}
......@@ -4344,26 +3175,19 @@ var useUpload = function useUpload() {
};
/** 上传 */
var Upload = function Upload() {
var Upload = /*#__PURE__*/(0,external_window_React_.forwardRef)(function (props, ref) {
var _useContext2 = (0,external_window_React_.useContext)(EditorContext),
_useContext2$lang = _useContext2.lang,
lang = _useContext2$lang === void 0 ? LANG.en : _useContext2$lang;
var _useUpload = useUpload(),
handleUpload = _useUpload.handleUpload;
return /*#__PURE__*/external_window_React_default().createElement("div", {
className: "tie-image-editor_tool-item tie-image-editor_tool-upload"
}, /*#__PURE__*/external_window_React_default().createElement(setting_Popover, {
content: MENU_TYPE_TEXT.upload[lang],
placement: "top"
}, /*#__PURE__*/external_window_React_default().createElement("i", {
className: "tie-image-editor_icon"
}, /*#__PURE__*/external_window_React_default().createElement("input", {
onChange: handleUpload,
type: "file",
className: "tie-image-editor_tool-upload-input",
accept: "image/*"
}))));
};
(0,external_window_React_.useImperativeHandle)(ref, function () {
return {
handleUpload: handleUpload
};
}, [handleUpload]);
return /*#__PURE__*/external_window_React_default().createElement((external_window_React_default()).Fragment, null);
});
;// CONCATENATED MODULE: ./src/tiny-image-editor/src/components/init.tsx
/* eslint-disable @typescript-eslint/no-unused-expressions */
......@@ -4473,6 +3297,7 @@ var useInit = function useInit(_ref) {
var imageUrl = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '';
var justBackground = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
var callback = arguments.length > 2 ? arguments[2] : undefined;
var annotationsData = arguments.length > 3 ? arguments[3] : undefined;
var canvas = canvasInstanceRef.current;
if (imageUrl.trim() && canvas && wrapperInstanceRef.current) {
var _wrapperInstanceRef$c2 = wrapperInstanceRef.current.getBoundingClientRect(),
......@@ -4480,13 +3305,26 @@ var useInit = function useInit(_ref) {
imageInstanceRef.current = external_window_Fabric_.fabric.Image.fromURL(imageUrl, function (oImg) {
var center = canvas.getCenter();
var imgHeight = oImg.height;
/** 图片过大，使其大小正好跟容器一致 */
oImg.scale(height / imgHeight);
/** 使得图片在canvas中间 */
oImg.set({
left: center.left - oImg.width * (height / imgHeight) / 2,
top: center.top - oImg.height * (height / imgHeight) / 2
});
if (annotationsData) {
var imgScaleFactor = height / imgHeight;
// let newScaleFactor = imgScaleFactor/annotationsData.newScaleFactor
//oImg.scale(imgScaleFactor);
oImg.set({
left: annotationsData.newLeft,
top: annotationsData.newTop,
scaleX: annotationsData.newScaleFactor,
scaleY: annotationsData.newScaleFactor
});
} else {
/** 图片过大，使其大小正好跟容器一致 */
oImg.scale(height / imgHeight);
/** 使得图片在canvas中间 */
oImg.set({
left: center.left - oImg.width * (height / imgHeight) / 2,
top: center.top - oImg.height * (height / imgHeight) / 2
});
}
/** 不让直接操作图片 */
oImg.selectable = false;
oImg.id = WORK_SPACE_ID;
......@@ -4555,10 +3393,8 @@ var useInit = function useInit(_ref) {
// // const { handleUpload } = useUpload();
// export const useUploadFnuc = ()=> ()
/** 图像编辑器组件 */
var Editor = /*#__PURE__*/(0,external_window_React_.forwardRef)(function (_ref, ref) {
var _ref$url = _ref.url,
......@@ -4586,11 +3422,12 @@ var Editor = /*#__PURE__*/(0,external_window_React_.forwardRef)(function (_ref,
downloadRef = _useInit.downloadRef,
zoom = _useInit.zoom,
setZoom = _useInit.setZoom;
console.log(menus);
var uploadRef = (0,external_window_React_.useRef)(null);
/** 将下载方法透出去 */
(0,external_window_React_.useImperativeHandle)(ref, function () {
return {
downloadRef: downloadRef
downloadRef: downloadRef,
uploadRef: uploadRef
};
}, []);
return /*#__PURE__*/external_window_React_default().createElement(EditorContext.Provider, {
......@@ -4617,9 +3454,11 @@ var Editor = /*#__PURE__*/(0,external_window_React_.forwardRef)(function (_ref,
style: style
}, /*#__PURE__*/external_window_React_default().createElement(Control, null), /*#__PURE__*/external_window_React_default().createElement("div", {
className: "tie-image-editor_tool clearfix"
}, (!menus.length || menus.includes(MENU_TYPE_ENUM.rect)) && /*#__PURE__*/external_window_React_default().createElement(Rect, null), (!menus.length || menus.includes(MENU_TYPE_ENUM.circle)) && /*#__PURE__*/external_window_React_default().createElement(Circle, null), (!menus.length || menus.includes(MENU_TYPE_ENUM.arrow)) && /*#__PURE__*/external_window_React_default().createElement(Arrow_Arrow, null), (!menus.length || menus.includes(MENU_TYPE_ENUM.draw)) && /*#__PURE__*/external_window_React_default().createElement(Draw, null), (!menus.length || menus.includes(MENU_TYPE_ENUM.text)) && /*#__PURE__*/external_window_React_default().createElement(Text, null), (!menus.length || menus.includes(MENU_TYPE_ENUM.mosaic)) && /*#__PURE__*/external_window_React_default().createElement(components_Mosaic, null), (!menus.length || menus.includes(MENU_TYPE_ENUM.crop)) && /*#__PURE__*/external_window_React_default().createElement(Crop, null), (!menus.length || menus.includes(MENU_TYPE_ENUM.download)) && /*#__PURE__*/external_window_React_default().createElement(Download, {
}, (!menus.length || menus.includes(MENU_TYPE_ENUM.rect)) && /*#__PURE__*/external_window_React_default().createElement(Rect, null), (!menus.length || menus.includes(MENU_TYPE_ENUM.circle)) && /*#__PURE__*/external_window_React_default().createElement(Circle, null), (!menus.length || menus.includes(MENU_TYPE_ENUM.arrow)) && /*#__PURE__*/external_window_React_default().createElement(Arrow_Arrow, null), (!menus.length || menus.includes(MENU_TYPE_ENUM.draw)) && /*#__PURE__*/external_window_React_default().createElement(Draw, null), (!menus.length || menus.includes(MENU_TYPE_ENUM.text)) && /*#__PURE__*/external_window_React_default().createElement(Text, null), (!menus.length || menus.includes(MENU_TYPE_ENUM.download)) && /*#__PURE__*/external_window_React_default().createElement(Download, {
ref: downloadRef
}), (!menus.length || menus.includes(MENU_TYPE_ENUM.upload)) && /*#__PURE__*/external_window_React_default().createElement(Upload, null), (!menus.length || menus.includes(MENU_TYPE_ENUM.drag)) && /*#__PURE__*/external_window_React_default().createElement(Drag, null), (!menus.length || menus.includes(MENU_TYPE_ENUM.reset)) && /*#__PURE__*/external_window_React_default().createElement(Reset, null), (!menus.length || menus.includes(MENU_TYPE_ENUM.rotate)) && /*#__PURE__*/external_window_React_default().createElement(Rotate, null), (!menus.length || menus.includes(MENU_TYPE_ENUM.flip)) && /*#__PURE__*/external_window_React_default().createElement(Flip, null), (!menus.length || menus.includes(MENU_TYPE_ENUM.scale)) && /*#__PURE__*/external_window_React_default().createElement(Scale, null), (!menus.length || menus.includes(MENU_TYPE_ENUM.history)) && /*#__PURE__*/external_window_React_default().createElement(History, {
}), (!menus.length || menus.includes(MENU_TYPE_ENUM.upload)) && /*#__PURE__*/external_window_React_default().createElement(Upload, {
ref: uploadRef
}), (!menus.length || menus.includes(MENU_TYPE_ENUM.drag)) && /*#__PURE__*/external_window_React_default().createElement(Drag, null), (!menus.length || menus.includes(MENU_TYPE_ENUM.reset)) && /*#__PURE__*/external_window_React_default().createElement(Reset, null), (!menus.length || menus.includes(MENU_TYPE_ENUM.scale)) && /*#__PURE__*/external_window_React_default().createElement(Scale, null), (!menus.length || menus.includes(MENU_TYPE_ENUM.history)) && /*#__PURE__*/external_window_React_default().createElement(History, {
ref: historyRef
})), /*#__PURE__*/external_window_React_default().createElement("div", {
ref: wrapperInstanceRef,
......
src/tiny-image-editor/src/components/Download.tsx
浏览文件 @ 8be18dd8
......@@ -3,7 +3,7 @@ import { IMAGE_NAME, LANG, MENU_TYPE_TEXT } from '../constants';
import { EditorContext, base64ToBlob, isSupportFileApi } from '../util';
import Popover from './setting/Popover';
function extractImageNames(str) {
function extractImageNames(str:any) {
// 定义更通用的正则表达式
const regex = /([^\/!]+?)\.(?:jpeg|jpg|png|gif|bmp)(?![^!]*\.)/gi;
const matches = [];
......@@ -25,7 +25,7 @@ const useDownload = () => {
// 获取画布上的所有元素
const allObjects = canvas.getObjects();
// 存储标注信息的数组
const annotations = [];
const annotations:[] = [];
function getDeviceId() {
let deviceId = localStorage.getItem('deviceId');
......
src/tiny-image-editor/src/components/Upload.tsx
浏览文件 @ 8be18dd8
......@@ -14,7 +14,6 @@ function annotationsInit(imgData, canvas, historyRef, positionInfo) {
// 遍历标注信息，重新创建元素并添加到画布上
imgData.annotations.forEach((annotation) => {
let newObject;
switch (annotation.type) {
case 'rect':
newObject = new fabric.Rect({
......@@ -157,7 +156,7 @@ export const useUpload = () => {
});
return;
}, {
},{
newLeft,
newTop,
newScaleFactor,
......
src/tiny-image-editor/src/util.ts
浏览文件 @ 8be18dd8
......@@ -23,6 +23,7 @@ export interface IEditorContextProps extends IEditorProps {
imageUrl: string,
justBackground: boolean,
callback?: () => void,
annotationsData?:any
) => void;
}
......
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或