From 8be18dd89972cf5a9cf8ff59a4a563ca8e601890 Mon Sep 17 00:00:00 2001 From: qq_41923622 Date: Fri, 14 Feb 2025 13:04:00 +0800 Subject: [PATCH] Fri Feb 14 13:04:00 CST 2025 inscode --- demos/Basic.tsx | 51 + dist2/tiny-image-editor.min.css | 273 +-- dist2/tiny-image-editor.min.js | 2001 ++++------------- .../src/components/Download.tsx | 4 +- .../src/components/Upload.tsx | 3 +- src/tiny-image-editor/src/util.ts | 1 + 6 files changed, 476 insertions(+), 1857 deletions(-) diff --git a/demos/Basic.tsx b/demos/Basic.tsx index e69de29..94d267e 100644 --- a/demos/Basic.tsx +++ b/demos/Basic.tsx @@ -0,0 +1,51 @@ +import React, { useRef } from 'react'; +import { Editor } from 'tiny-image-editor'; +import image from './basic.jpg'; +// + + +const Demo = () => { + const EditorRefID =useRef(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 ( +
+ +
+ ); +}; + +export default Demo; diff --git a/dist2/tiny-image-editor.min.css b/dist2/tiny-image-editor.min.css index c6e0a0b..08eb122 100644 --- a/dist2/tiny-image-editor.min.css +++ b/dist2/tiny-image-editor.min.css @@ -1,272 +1 @@ -.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:""} diff --git a/dist2/tiny-image-editor.min.js b/dist2/tiny-image-editor.min.js index 3c5cc34..304ffbe 100644 --- a/dist2/tiny-image-editor.min.js +++ b/dist2/tiny-image-editor.min.js @@ -1,13 +1,13 @@ (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, y: Array}} 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, diff --git a/src/tiny-image-editor/src/components/Download.tsx b/src/tiny-image-editor/src/components/Download.tsx index 9fb3cba..21181c9 100644 --- a/src/tiny-image-editor/src/components/Download.tsx +++ b/src/tiny-image-editor/src/components/Download.tsx @@ -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'); diff --git a/src/tiny-image-editor/src/components/Upload.tsx b/src/tiny-image-editor/src/components/Upload.tsx index b3f13ce..d93bb8e 100644 --- a/src/tiny-image-editor/src/components/Upload.tsx +++ b/src/tiny-image-editor/src/components/Upload.tsx @@ -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, diff --git a/src/tiny-image-editor/src/util.ts b/src/tiny-image-editor/src/util.ts index d107ebd..3a566aa 100644 --- a/src/tiny-image-editor/src/util.ts +++ b/src/tiny-image-editor/src/util.ts @@ -23,6 +23,7 @@ export interface IEditorContextProps extends IEditorProps { imageUrl: string, justBackground: boolean, callback?: () => void, + annotationsData?:any ) => void; } -- GitLab