image-editor-little
Version:
1,039 lines (978 loc) • 76.9 kB
JavaScript
'use strict';
function __$styleInject(css) {
if (!css) return;
if (typeof window == 'undefined') return;
var style = document.createElement('style');
style.setAttribute('media', 'screen');
style.innerHTML = css;
document.head.appendChild(style);
return css;
}
function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'default' in ex) ? ex['default'] : ex; }
var React = require('react');
var React__default = _interopDefault(React);
var reactDom = _interopDefault(require('react-dom'));
var commonjsGlobal = typeof globalThis !== 'undefined' ? globalThis : typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {};
function unwrapExports (x) {
return x && x.__esModule && Object.prototype.hasOwnProperty.call(x, 'default') ? x['default'] : x;
}
function createCommonjsModule(fn, module) {
return module = { exports: {} }, fn(module, module.exports), module.exports;
}
var classnames = createCommonjsModule(function (module) {
/*!
Copyright (c) 2017 Jed Watson.
Licensed under the MIT License (MIT), see
http://jedwatson.github.io/classnames
*/
/* global define */
(function () {
var hasOwn = {}.hasOwnProperty;
function classNames () {
var classes = [];
for (var i = 0; i < arguments.length; i++) {
var arg = arguments[i];
if (!arg) continue;
var argType = typeof arg;
if (argType === 'string' || argType === 'number') {
classes.push(arg);
} else if (Array.isArray(arg) && arg.length) {
var inner = classNames.apply(null, arg);
if (inner) {
classes.push(inner);
}
} else if (argType === 'object') {
for (var key in arg) {
if (hasOwn.call(arg, key) && arg[key]) {
classes.push(key);
}
}
}
}
return classes.join(' ');
}
if ( module.exports) {
classNames.default = classNames;
module.exports = classNames;
} else {
window.classNames = classNames;
}
}());
});
var getFileName = (function (cacheMap) { return function () {
var name = '';
var fn = function () {
name = '';
for (var i = 0; i < 16; i++) {
name += String.fromCharCode(Math.floor(Math.random() * 26) + 65).toLocaleLowerCase();
}
return name;
};
fn();
while (cacheMap.has(name)) {
fn();
}
cacheMap.set(name, true);
return name;
}; })(new Map());
var rgb2hex = function (r, g, b) {
var str1 = r.toString(16);
var str2 = g.toString(16);
var str3 = b.toString(16);
return "#" + (str1.length < 2 ? '0' + str1 : str1) + (str2.length < 2 ? '0' + str2 : str2) + (str3.length < 2 ? '0' + str3 : str3);
};
var getLocInfo = function (firstLoc, lastLoc) {
var x;
var y;
if (lastLoc.x < firstLoc.x) {
x = lastLoc.x;
}
else {
x = firstLoc.x;
}
if (lastLoc.y < firstLoc.y) {
y = lastLoc.y;
}
else {
y = firstLoc.y;
}
var w = Math.abs(lastLoc.x - firstLoc.x);
var h = Math.abs(lastLoc.y - firstLoc.y);
return [x, y, w, h];
};
/** 获取长宽 */
var getWidthAndHeight = function (image, width, height) {
if (width === void 0) { width = window.innerWidth; }
if (height === void 0) { height = window.innerHeight; }
var t = image.width / image.height;
if (height < image.height || width < image.width) {
var ws = image.width / width;
var hs = image.height / height;
if (ws <= hs) {
return [Math.floor(height * t), Math.floor(height)];
}
else {
return [Math.floor(width), Math.floor(width / t)];
}
}
return [Math.floor(image.width), Math.floor(image.height)];
};
/** 获取鼠标坐标, 相对 canvas */
var windowToCanvas = function (ele, x, y) {
var box = ele.getBoundingClientRect();
var curX;
var curY;
if (x > box.right) {
curX = box.width;
}
else if (x < box.left) {
curX = 0;
}
else {
curX = x - box.left;
}
if (y > box.bottom) {
curY = box.height;
}
else if (y < box.top) {
curY = 0;
}
else {
curY = y - box.top;
}
return {
x: curX,
y: curY
};
};
var realWindowToCanvas = function (ele, x, y) {
var box = ele.getBoundingClientRect();
return {
x: x - box.left,
y: y - box.top
};
};
var handleMoveEffect = function (_a) {
var firstLoc = _a.firstLoc, lastLoc = _a.lastLoc, puzzleEle = _a.puzzleEle, ratioRef = _a.ratioRef, parentEle = _a.parentEle, context = _a.context, image = _a.image;
var _b = getLocInfo(firstLoc, lastLoc), x = _b[0], y = _b[1], w = _b[2], h = _b[3];
puzzleEle.width = w * ratioRef.current;
puzzleEle.height = h * ratioRef.current;
Object.assign(puzzleEle.style, {
width: w + "px",
height: h + "px"
});
Object.assign(parentEle.style, {
top: y + "px",
left: x + "px"
});
var draw = function () {
context.drawImage(image, x * ratioRef.current, y * ratioRef.current, w * ratioRef.current, h * ratioRef.current, 0, 0, w * ratioRef.current, h * ratioRef.current);
};
draw();
return draw;
};
var getPointByLoc = function (firstLoc, curLoc) {
var x1 = firstLoc.x, y1 = firstLoc.y;
var x2 = curLoc.x, y2 = curLoc.y;
if (x2 >= x1 && y2 >= y1) {
return [
{ x: x1, y: y1 },
{ x: x2, y: y1 },
{ x: x1, y: y2 },
{ x: x2, y: y2 }
];
}
if (x2 >= x1 && y2 < y1) {
return [
{ x: x1, y: y2 },
{ x: x2, y: y2 },
{ x: x1, y: y1 },
{ x: x2, y: y1 }
];
}
if (x2 < x1 && y2 >= y1) {
return [
{ x: x2, y: y1 },
{ x: x1, y: y1 },
{ x: x2, y: y2 },
{ x: x1, y: y2 }
];
}
return [
{ x: x2, y: y2 },
{ x: x1, y: y2 },
{ x: x2, y: y1 },
{ x: x1, y: y1 }
];
};
var setToolsLocEffect = function (puzzleEle, toolsEle, toolsLoc, parentH) {
var puzzleInfo = puzzleEle.getBoundingClientRect();
if (puzzleInfo.top >= window.innerHeight - parentH - toolsLoc.height - 16) {
Object.assign(toolsEle.style, { bottom: '16px' });
}
else {
Object.assign(toolsEle.style, {
bottom: -16 - toolsLoc.height + "px"
});
}
if (puzzleInfo.left <= toolsLoc.width - puzzleInfo.width) {
Object.assign(toolsEle.style, { left: '0px', right: 'unset' });
}
else {
Object.assign(toolsEle.style, { right: '0px', left: 'unset' });
}
};
var useCombinedRefs = function () {
var refs = [];
for (var _i = 0; _i < arguments.length; _i++) {
refs[_i] = arguments[_i];
}
var targetRef = React.useRef(null);
React.useEffect(function () {
refs.forEach(function (ref) {
if (!ref)
return;
if (typeof ref === 'function') {
ref(targetRef.current);
}
else {
ref.current = targetRef.current;
}
});
}, [refs]);
return targetRef;
};
var drawHorizontalLine = function (context) {
context.strokeStyle = '#30ca30';
context.lineWidth = 1;
context.beginPath();
context.moveTo(0, context.canvas.height / 2 + 0.5);
context.lineTo(context.canvas.width, context.canvas.height / 2 + 0.5);
context.stroke();
};
var drawVerticalLine = function (context) {
context.strokeStyle = '#30ca30';
context.lineWidth = 1;
context.beginPath();
context.moveTo(context.canvas.width / 2 + 0.5, 0);
context.lineTo(context.canvas.width / 2, context.canvas.height);
context.stroke();
};
var drawLocCanvas = function (_a) {
var image = _a.image, box = _a.box, ele = _a.ele, loc = _a.loc, ratioRef = _a.ratioRef, event = _a.event, _b = _a.size, size = _b === void 0 ? 10 : _b;
var context = ele.getContext('2d');
var boxLoc = box.getBoundingClientRect();
ele.width = size * 10;
ele.height = size * 10;
if (window.innerWidth - event.clientX - boxLoc.width - 16 <= 0) {
box.style.left = loc.x - boxLoc.width - 16 + "px";
}
else {
box.style.left = loc.x + 16 + "px";
}
if (window.innerHeight - event.clientY - boxLoc.height - 16 <= 0) {
box.style.top = loc.y - boxLoc.height - 16 + "px";
}
else {
box.style.top = loc.y + 16 + "px";
}
context.drawImage(image, (loc.x - size) * ratioRef.current, (loc.y - size) * ratioRef.current, size * ratioRef.current * 2, size * ratioRef.current * 2, 0, 0, size * 10, size * 10);
drawHorizontalLine(context);
drawVerticalLine(context);
};
var drawSvg = function (firstLoc, lastLoc, svgEle) {
var _a = getLocInfo(firstLoc, lastLoc), x = _a[0], y = _a[1], w = _a[2], h = _a[3];
svgEle.style.left = x + "px";
svgEle.style.top = y + "px";
return [w, h];
};
var drawSvgOnCanvas = function (type, firstLoc, lastLoc, context, ratio, info) {
var _a = getLocInfo(firstLoc, lastLoc), x = _a[0], y = _a[1], w = _a[2], h = _a[3];
var draw = function () {
context.beginPath();
var linW = info.size / 2;
if (type === 'rect') {
context.lineJoin = 'round';
context.rect(x * ratio + linW, y * ratio + linW, w * ratio - info.size, h * ratio - info.size);
}
else {
context.ellipse(x * ratio + (w / 2) * ratio, y * ratio + (h / 2) * ratio, (w / 2) * ratio, (h / 2) * ratio, 0, 0, 2 * Math.PI);
}
context.strokeStyle = info.color;
context.lineWidth = info.size * ratio;
context.stroke();
context.closePath();
};
draw();
return draw;
};
var drawLine = function (lastLoc, curLoc, context, ratio, info) {
context.beginPath();
context.moveTo(lastLoc.x * ratio, lastLoc.y * ratio);
context.lineTo(curLoc.x * ratio, curLoc.y * ratio);
context.lineWidth = info.size * ratio;
context.strokeStyle = info.color;
context.lineCap = 'round';
context.lineJoin = 'round';
context.stroke();
};
var drawMosaic = function (context, x, y, size,
// 画笔宽度, 先不做这个功能
trackSize) {
if (trackSize === void 0) { trackSize = 0; }
var pointList = [];
var imgData = context.getImageData(0, 0, context.canvas.width, context.canvas.height);
var w = Math.ceil(context.canvas.width / size);
var h = Math.ceil(context.canvas.height / size);
var startRow = Math.max(0, Math.floor((x - trackSize) / size));
var startCol = Math.max(0, Math.floor((y - trackSize) / size));
var endRow = Math.min(w, Math.ceil(x + trackSize) / size);
var endCol = Math.min(h, Math.ceil(y + trackSize) / size);
while (startCol < endCol) {
var row = startRow;
var _loop_1 = function () {
row += 1;
var index = startCol * w + row;
var locX = index % w - 1;
var locY = Math.floor(index / w);
var dataIndex = Math.floor(locY * size) * context.canvas.width + Math.floor(locX * size);
var r = imgData.data[dataIndex * 4];
var g = imgData.data[dataIndex * 4 + 1];
var b = imgData.data[dataIndex * 4 + 2];
var color = rgb2hex(r, g, b);
if (!pointList.find(function (point) { return point.x === locX && point.y === locY; })) {
pointList.push({ x: locX, y: locY, color: color });
}
};
while (row < endRow) {
_loop_1();
}
startCol += 1;
}
pointList.forEach(function (point) {
context.fillStyle = point.color;
context.fillRect(point.x * size, point.y * size, size, size);
});
};
var Status;
(function (Status) {
Status[Status["loading"] = 0] = "loading";
Status[Status["loaded"] = 1] = "loaded";
Status[Status["failed"] = 2] = "failed";
})(Status || (Status = {}));
__$styleInject(".image-editor {\n display: flex;\n justify-content: center;\n align-items: center;\n background: black;\n}\n.image-editor .hold {\n color: white;\n font-size: 24px;\n font-weight: bold;\n}\n.image-editor .img-box {\n position: relative;\n display: flex;\n user-select: none;\n}\n.image-editor .drag-box {\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n background-color: rgba(0, 0, 0, 0.5);\n}\n.image-editor .drag-parent {\n position: absolute;\n left: -99999px;\n}\n.image-editor .drag-border {\n display: flex;\n box-sizing: border-box;\n position: relative;\n width: 100%;\n height: 100%;\n}\n.image-editor .tools {\n display: flex;\n padding: 0 20px;\n align-items: center;\n justify-content: space-between;\n position: absolute;\n background: #272323;\n width: 300px;\n height: 40px;\n right: -99999px;\n}\n.image-editor .tools svg {\n cursor: pointer;\n}\n.image-editor .tools-text {\n color: #fff;\n border: 1px solid #fff;\n}\n.image-editor .tools-rect {\n border: 1px solid #fff;\n}\n.image-editor .tools-circle {\n border: 1px solid #fff;\n border-radius: 50%;\n}\n.image-editor .tools-hold {\n width: 1px;\n height: 20px;\n background: #403c3c;\n}\n.image-editor .tools-item {\n cursor: pointer;\n width: 20px;\n height: 20px;\n line-height: 20px;\n text-align: center;\n}\n.image-editor .tool-selected {\n color: #30ca30;\n border-color: #30ca30;\n}\n.image-editor .canvas {\n width: 100%;\n}\n.image-editor .point {\n position: absolute;\n width: 8px;\n height: 8px;\n border-radius: 50%;\n background: #fff;\n border: 0.5px solid #000;\n}\n.image-editor .left-top {\n left: -4px;\n top: -4px;\n cursor: nwse-resize;\n}\n.image-editor .center-top {\n left: 50%;\n transform: translateX(-50%);\n top: -4px;\n cursor: ns-resize;\n}\n.image-editor .right-top {\n right: -4px;\n top: -4px;\n cursor: nesw-resize;\n}\n.image-editor .left-center {\n left: -4px;\n top: 50%;\n transform: translateY(-50%);\n cursor: ew-resize;\n}\n.image-editor .right-center {\n right: -4px;\n top: 50%;\n transform: translateY(-50%);\n cursor: ew-resize;\n}\n.image-editor .left-bottom {\n left: -4px;\n bottom: -4px;\n cursor: nesw-resize;\n}\n.image-editor .center-bottom {\n left: 50%;\n transform: translateX(-50%);\n bottom: -4px;\n cursor: ns-resize;\n}\n.image-editor .right-bottom {\n right: -4px;\n bottom: -4px;\n cursor: nwse-resize;\n}\n.image-editor .tools-location {\n position: absolute;\n left: -99999px;\n display: flex;\n border: 1px solid #30ca30;\n}\n.image-editor .svg-options {\n position: absolute;\n left: -99999px;\n}\n.image-editor-pop {\n display: flex;\n padding: 0 8px;\n align-items: center;\n justify-content: space-between;\n background: #272323;\n height: 30px;\n}\n.image-editor-pop .size-item {\n display: flex;\n align-items: center;\n justify-content: center;\n cursor: pointer;\n width: 20px;\n height: 20px;\n box-sizing: border-box;\n}\n.image-editor-pop .size-item:not(:last-child) {\n margin-right: 8px;\n}\n.image-editor-pop .color-item {\n cursor: pointer;\n width: 20px;\n height: 20px;\n box-sizing: border-box;\n}\n.image-editor-pop .color-item:not(:last-child) {\n margin-right: 3px;\n}\n.image-editor-pop .color-item:first-child {\n margin-left: 8px;\n}\n.image-editor-pop .color-green {\n background: #30ca30;\n}\n.image-editor-pop .color-red {\n background: #f71f1f;\n}\n.image-editor-pop .color-yellow {\n background: #f1f117;\n}\n.image-editor-pop .color-blue {\n background: #31e9f9;\n}\n.image-editor-pop .color-white {\n background: #fff;\n}\n.image-editor-pop .stroke-small {\n background: #564e4e;\n width: 4px;\n height: 4px;\n border-radius: 50%;\n}\n.image-editor-pop .stroke-default {\n background: #564e4e;\n width: 8px;\n height: 8px;\n border-radius: 50%;\n}\n.image-editor-pop .stroke-large {\n background: #564e4e;\n width: 16px;\n height: 16px;\n border-radius: 50%;\n}\n.image-editor-pop .tools-size-selected {\n background: #fff;\n}\n.image-editor-pop .tools-color-selected {\n border: 1px solid #fff;\n}\n.image-editor-loading {\n display: flex;\n}\n");
/*! *****************************************************************************
Copyright (c) Microsoft Corporation. All rights reserved.
Licensed under the Apache License, Version 2.0 (the "License"); you may not use
this file except in compliance with the License. You may obtain a copy of the
License at http://www.apache.org/licenses/LICENSE-2.0
THIS CODE IS PROVIDED ON AN *AS IS* BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
KIND, EITHER EXPRESS OR IMPLIED, INCLUDING WITHOUT LIMITATION ANY IMPLIED
WARRANTIES OR CONDITIONS OF TITLE, FITNESS FOR A PARTICULAR PURPOSE,
MERCHANTABLITY OR NON-INFRINGEMENT.
See the Apache Version 2.0 License for specific language governing permissions
and limitations under the License.
***************************************************************************** */
var __assign = function() {
__assign = Object.assign || function __assign(t) {
for (var s, i = 1, n = arguments.length; i < n; i++) {
s = arguments[i];
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
}
return t;
};
return __assign.apply(this, arguments);
};
function __spreadArrays() {
for (var s = 0, i = 0, il = arguments.length; i < il; i++) s += arguments[i].length;
for (var r = Array(s), k = 0, i = 0; i < il; i++)
for (var a = arguments[i], j = 0, jl = a.length; j < jl; j++, k++)
r[k] = a[j];
return r;
}
var Svg = React.forwardRef(function (_a, ref) {
var type = _a.type, width = _a.width, height = _a.height, stroke = _a.stroke, strokeWidth = _a.strokeWidth;
return (React.createElement("svg", { className: "svg-options", width: width, height: height, xmlns: "http://www.w3.org/2000/svg", ref: ref },
type === 'rect' && (React.createElement("rect", { width: width, height: height, stroke: stroke, fill: "transparent", strokeWidth: strokeWidth })),
type === 'circle' && (React.createElement("ellipse", { cx: width / 2, cy: height / 2, rx: width / 2, ry: height / 2, stroke: stroke, fill: "transparent", strokeWidth: strokeWidth }))));
});
Svg.defaultProps = {
stroke: '#f1f117',
strokeWidth: 4
};
var util = createCommonjsModule(function (module, exports) {
Object.defineProperty(exports, "__esModule", { value: true });
exports.Constants = {
POPOVER_CONTAINER_CLASS_NAME: 'react-tiny-popover-container',
DEFAULT_PADDING: 6,
DEFAULT_WINDOW_PADDING: 6,
FADE_TRANSITION: 0.35,
DEFAULT_ARROW_COLOR: 'black',
DEFAULT_POSITIONS: ['top', 'left', 'right', 'bottom'],
EMPTY_CLIENT_RECT: {
top: 0,
left: 0,
bottom: 0,
height: 0,
right: 0,
width: 0,
},
};
exports.arrayUnique = function (array) { return array.filter(function (value, index, self) { return self.indexOf(value) === index; }); };
});
unwrapExports(util);
var util_1 = util.Constants;
var util_2 = util.arrayUnique;
var ArrowContainer_1 = createCommonjsModule(function (module, exports) {
var __assign = (commonjsGlobal && commonjsGlobal.__assign) || function () {
__assign = Object.assign || function(t) {
for (var s, i = 1, n = arguments.length; i < n; i++) {
s = arguments[i];
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
t[p] = s[p];
}
return t;
};
return __assign.apply(this, arguments);
};
Object.defineProperty(exports, "__esModule", { value: true });
var ArrowContainer = function (_a) {
var position = _a.position, children = _a.children, style = _a.style, _b = _a.arrowColor, arrowColor = _b === void 0 ? util.Constants.DEFAULT_ARROW_COLOR : _b, _c = _a.arrowSize, arrowSize = _c === void 0 ? 10 : _c, arrowStyle = _a.arrowStyle, popoverRect = _a.popoverRect, targetRect = _a.targetRect;
return (React__default.createElement("div", { style: __assign({ paddingLeft: position === 'right' ? arrowSize : 0, paddingTop: position === 'bottom' ? arrowSize : 0, paddingBottom: position === 'top' ? arrowSize : 0, paddingRight: position === 'left' ? arrowSize : 0 }, style) },
React__default.createElement("div", { style: __assign({ position: 'absolute' }, (function () {
var arrowWidth = arrowSize * 2;
var top = (targetRect.top - popoverRect.top) + (targetRect.height / 2) - (arrowWidth / 2);
var left = (targetRect.left - popoverRect.left) + (targetRect.width / 2) - (arrowWidth / 2);
left = left < 0 ? 0 : left;
left = left + arrowWidth > popoverRect.width ? popoverRect.width - arrowWidth : left;
top = top < 0 ? 0 : top;
top = top + arrowWidth > popoverRect.height ? popoverRect.height - arrowWidth : top;
switch (position) {
case 'right':
return {
borderTop: arrowSize + "px solid transparent",
borderBottom: arrowSize + "px solid transparent",
borderRight: arrowSize + "px solid " + arrowColor,
left: 0,
top: top,
};
case 'left':
return {
borderTop: arrowSize + "px solid transparent",
borderBottom: arrowSize + "px solid transparent",
borderLeft: arrowSize + "px solid " + arrowColor,
right: 0,
top: top,
};
case 'bottom':
return {
borderLeft: arrowSize + "px solid transparent",
borderRight: arrowSize + "px solid transparent",
borderBottom: arrowSize + "px solid " + arrowColor,
top: 0,
left: left,
};
case 'top':
default:
return {
borderLeft: arrowSize + "px solid transparent",
borderRight: arrowSize + "px solid transparent",
borderTop: arrowSize + "px solid " + arrowColor,
bottom: 0,
left: left,
};
}
})(), arrowStyle) }),
children));
};
exports.ArrowContainer = ArrowContainer;
});
unwrapExports(ArrowContainer_1);
var ArrowContainer_2 = ArrowContainer_1.ArrowContainer;
var Popover_1 = createCommonjsModule(function (module, exports) {
var __extends = (commonjsGlobal && commonjsGlobal.__extends) || (function () {
var extendStatics = function (d, b) {
extendStatics = Object.setPrototypeOf ||
({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
return extendStatics(d, b);
};
return function (d, b) {
extendStatics(d, b);
function __() { this.constructor = d; }
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
};
})();
Object.defineProperty(exports, "__esModule", { value: true });
exports.ArrowContainer = ArrowContainer_1.ArrowContainer;
var Popover = /** @class */ (function (_super) {
__extends(Popover, _super);
function Popover() {
var _this = _super !== null && _super.apply(this, arguments) || this;
_this.target = null;
_this.targetRect = null;
_this.targetPositionIntervalHandler = null;
_this.popoverDiv = null;
_this.positionOrder = null;
_this.willUnmount = false;
_this.willMount = false;
_this.onResize = function (e) {
_this.renderPopover();
};
_this.onClick = function (e) {
var _a = _this.props, onClickOutside = _a.onClickOutside, isOpen = _a.isOpen;
if (!_this.willUnmount && !_this.willMount && !_this.popoverDiv.contains(e.target) && !_this.target.contains(e.target) && onClickOutside && isOpen) {
onClickOutside(e);
}
};
return _this;
}
Popover.prototype.componentDidMount = function () {
var _this = this;
window.setTimeout(function () { return _this.willMount = false; });
var _a = this.props, position = _a.position, isOpen = _a.isOpen;
this.target = reactDom.findDOMNode(this);
this.positionOrder = this.getPositionPriorityOrder(position);
this.updatePopover(isOpen);
};
Popover.prototype.componentDidUpdate = function (prevProps) {
if (this.target == null) {
this.target = reactDom.findDOMNode(this);
}
var prevIsOpen = prevProps.isOpen, prevPosition = prevProps.position, prevBody = prevProps.content;
var _a = this.props, isOpen = _a.isOpen, content = _a.content, position = _a.position;
this.positionOrder = this.getPositionPriorityOrder(this.props.position);
var hasNewDestination = prevProps.contentDestination !== this.props.contentDestination;
if (prevIsOpen !== isOpen ||
prevBody !== content ||
prevPosition !== position ||
hasNewDestination) {
if (hasNewDestination) {
this.removePopover();
this.popoverDiv.remove();
}
this.updatePopover(isOpen);
}
};
Popover.prototype.componentWillMount = function () {
this.willUnmount = false;
this.willMount = true;
};
Popover.prototype.componentWillUnmount = function () {
this.willUnmount = true;
this.removePopover();
};
Popover.prototype.render = function () {
return this.props.children;
};
Popover.prototype.updatePopover = function (isOpen) {
if (isOpen && this.target != null) {
if (!this.popoverDiv || !this.popoverDiv.parentNode) {
var transitionDuration = this.props.transitionDuration;
this.popoverDiv = this.createContainer();
this.popoverDiv.style.opacity = '0';
this.popoverDiv.style.transition = "opacity " + (transitionDuration || util.Constants.FADE_TRANSITION) + "s";
(this.props.contentDestination || window.document.body).appendChild(this.popoverDiv);
window.addEventListener('resize', this.onResize);
window.addEventListener('click', this.onClick);
}
this.renderPopover();
}
else if (this.popoverDiv && this.popoverDiv.parentNode) {
this.removePopover();
}
};
Popover.prototype.renderPopover = function (positionIndex) {
var _this = this;
if (positionIndex === void 0) { positionIndex = 0; }
if (positionIndex >= this.positionOrder.length) {
this.removePopover();
return;
}
this.renderWithPosition({ position: this.positionOrder[positionIndex], targetRect: this.target.getBoundingClientRect() }, function (violation, rect) {
var _a;
var _b = _this.props, disableReposition = _b.disableReposition, contentLocation = _b.contentLocation;
if (violation && !disableReposition && !(typeof contentLocation === 'object')) {
_this.renderPopover(positionIndex + 1);
}
else {
var _c = _this.props, contentLocation_1 = _c.contentLocation, align = _c.align;
var _d = _this.getNudgedPopoverPosition(rect), nudgedTop = _d.top, nudgedLeft = _d.left;
var rectTop = rect.top, rectLeft = rect.left;
var position = _this.positionOrder[positionIndex];
var _e = disableReposition ? { top: rectTop, left: rectLeft } : { top: nudgedTop, left: nudgedLeft }, top_1 = _e.top, left = _e.left;
if (contentLocation_1) {
var targetRect = _this.target.getBoundingClientRect();
var popoverRect = _this.popoverDiv.getBoundingClientRect();
(_a = typeof contentLocation_1 === 'function' ? contentLocation_1({ targetRect: targetRect, popoverRect: popoverRect, position: position, align: align, nudgedLeft: nudgedLeft, nudgedTop: nudgedTop }) : contentLocation_1, top_1 = _a.top, left = _a.left);
_this.popoverDiv.style.left = left.toFixed() + "px";
_this.popoverDiv.style.top = top_1.toFixed() + "px";
}
else {
var destinationTopOffset = 0;
var destinationLeftOffset = 0;
if (_this.props.contentDestination) {
var destRect = _this.props.contentDestination.getBoundingClientRect();
destinationTopOffset = -destRect.top;
destinationLeftOffset = -destRect.left;
}
var _f = [top_1 + window.pageYOffset, left + window.pageXOffset], absoluteTop = _f[0], absoluteLeft = _f[1];
var finalLeft = absoluteLeft + destinationTopOffset;
var finalTop = absoluteTop + destinationLeftOffset;
_this.popoverDiv.style.left = finalLeft.toFixed() + "px";
_this.popoverDiv.style.top = finalTop.toFixed() + "px";
}
_this.popoverDiv.style.width = null;
_this.popoverDiv.style.height = null;
_this.renderWithPosition({
position: position,
nudgedTop: nudgedTop - rect.top,
nudgedLeft: nudgedLeft - rect.left,
targetRect: _this.target.getBoundingClientRect(),
popoverRect: _this.popoverDiv.getBoundingClientRect(),
}, function () {
_this.startTargetPositionListener(10);
if (_this.popoverDiv.style.opacity !== '1') {
_this.popoverDiv.style.opacity = '1';
}
});
}
});
};
Popover.prototype.startTargetPositionListener = function (checkInterval) {
var _this = this;
if (this.targetPositionIntervalHandler === null) {
this.targetPositionIntervalHandler = window.setInterval(function () {
var newTargetRect = _this.target.getBoundingClientRect();
if (_this.targetPositionHasChanged(_this.targetRect, newTargetRect)) {
_this.renderPopover();
}
_this.targetRect = newTargetRect;
}, checkInterval);
}
};
Popover.prototype.renderWithPosition = function (_a, callback) {
var _this = this;
var position = _a.position, _b = _a.nudgedLeft, nudgedLeft = _b === void 0 ? 0 : _b, _c = _a.nudgedTop, nudgedTop = _c === void 0 ? 0 : _c, _d = _a.targetRect, targetRect = _d === void 0 ? util.Constants.EMPTY_CLIENT_RECT : _d, _e = _a.popoverRect, popoverRect = _e === void 0 ? util.Constants.EMPTY_CLIENT_RECT : _e;
var _f = this.props, padding = _f.windowBorderPadding, content = _f.content, align = _f.align;
var getContent = function (args) {
return typeof content === 'function'
? content(args)
: content;
};
reactDom.unstable_renderSubtreeIntoContainer(this, getContent({ position: position, nudgedLeft: nudgedLeft, nudgedTop: nudgedTop, targetRect: targetRect, popoverRect: popoverRect, align: align }), this.popoverDiv, function () {
if (_this.willUnmount) {
return;
}
var targetRect = _this.target.getBoundingClientRect();
var popoverRect = _this.popoverDiv.getBoundingClientRect();
var _a = _this.getLocationForPosition(position, targetRect, popoverRect), top = _a.top, left = _a.left;
callback(position === 'top' && top < padding ||
position === 'left' && left < padding ||
position === 'right' && left + popoverRect.width > window.innerWidth - padding ||
position === 'bottom' && top + popoverRect.height > window.innerHeight - padding, { width: popoverRect.width, height: popoverRect.height, top: top, left: left });
});
};
Popover.prototype.getNudgedPopoverPosition = function (_a) {
var top = _a.top, left = _a.left, width = _a.width, height = _a.height;
var padding = this.props.windowBorderPadding;
top = top < padding ? padding : top;
top = top + height > window.innerHeight - padding ? window.innerHeight - padding - height : top;
left = left < padding ? padding : left;
left = left + width > window.innerWidth - padding ? window.innerWidth - padding - width : left;
return { top: top, left: left };
};
Popover.prototype.removePopover = function () {
var _this = this;
if (this.popoverDiv) {
var transitionDuration = this.props.transitionDuration;
this.popoverDiv.style.opacity = '0';
var remove = function () {
if (_this.willUnmount || !_this.props.isOpen || !_this.popoverDiv.parentNode) {
window.clearInterval(_this.targetPositionIntervalHandler);
window.removeEventListener('resize', _this.onResize);
window.removeEventListener('click', _this.onClick);
_this.targetPositionIntervalHandler = null;
if (_this.popoverDiv.parentNode) {
_this.popoverDiv.parentNode.removeChild(_this.popoverDiv);
}
}
};
if (!this.willUnmount) {
window.setTimeout(remove, (transitionDuration || util.Constants.FADE_TRANSITION) * 1000);
}
else {
remove();
}
}
};
Popover.prototype.getPositionPriorityOrder = function (position) {
if (position && typeof position !== 'string') {
if (util.Constants.DEFAULT_POSITIONS.every(function (defaultPosition) { return position.find(function (p) { return p === defaultPosition; }) !== undefined; })) {
return util.arrayUnique(position);
}
else {
var remainingPositions = util.Constants.DEFAULT_POSITIONS.filter(function (defaultPosition) { return position.find(function (p) { return p === defaultPosition; }) === undefined; });
return util.arrayUnique(position.concat(remainingPositions));
}
}
else if (position && typeof position === 'string') {
var remainingPositions = util.Constants.DEFAULT_POSITIONS.filter(function (defaultPosition) { return defaultPosition !== position; });
return util.arrayUnique([position].concat(remainingPositions));
}
};
Popover.prototype.createContainer = function () {
var _a = this.props, containerStyle = _a.containerStyle, containerClassName = _a.containerClassName;
var container = window.document.createElement('div');
container.style.overflow = 'hidden';
if (containerStyle) {
Object.keys(containerStyle).forEach(function (key) { return container.style[key] = containerStyle[key]; });
}
container.className = containerClassName;
container.style.position = 'absolute';
container.style.top = '0';
container.style.left = '0';
return container;
};
Popover.prototype.getLocationForPosition = function (position, newTargetRect, popoverRect) {
var _a = this.props, padding = _a.padding, align = _a.align;
var targetMidX = newTargetRect.left + (newTargetRect.width / 2);
var targetMidY = newTargetRect.top + (newTargetRect.height / 2);
var top;
var left;
switch (position) {
case 'top':
top = newTargetRect.top - popoverRect.height - padding;
left = targetMidX - (popoverRect.width / 2);
if (align === 'start') {
left = newTargetRect.left;
}
if (align === 'end') {
left = newTargetRect.right - popoverRect.width;
}
break;
case 'left':
top = targetMidY - (popoverRect.height / 2);
left = newTargetRect.left - padding - popoverRect.width;
if (align === 'start') {
top = newTargetRect.top;
}
if (align === 'end') {
top = newTargetRect.bottom - popoverRect.height;
}
break;
case 'bottom':
top = newTargetRect.bottom + padding;
left = targetMidX - (popoverRect.width / 2);
if (align === 'start') {
left = newTargetRect.left;
}
if (align === 'end') {
left = newTargetRect.right - popoverRect.width;
}
break;
case 'right':
top = targetMidY - (popoverRect.height / 2);
left = newTargetRect.right + padding;
if (align === 'start') {
top = newTargetRect.top;
}
if (align === 'end') {
top = newTargetRect.bottom - popoverRect.height;
}
break;
}
return { top: top, left: left };
};
Popover.prototype.targetPositionHasChanged = function (oldTargetRect, newTargetRect) {
return oldTargetRect === null
|| oldTargetRect.left !== newTargetRect.left
|| oldTargetRect.top !== newTargetRect.top
|| oldTargetRect.width !== newTargetRect.width
|| oldTargetRect.height !== newTargetRect.height;
};
Popover.defaultProps = {
padding: util.Constants.DEFAULT_PADDING,
windowBorderPadding: util.Constants.DEFAULT_WINDOW_PADDING,
position: ['top', 'right', 'left', 'bottom'],
align: 'center',
containerClassName: util.Constants.POPOVER_CONTAINER_CLASS_NAME,
};
return Popover;
}(React__default.Component));
exports.default = Popover;
});
var Popover = unwrapExports(Popover_1);
var Popover_2 = Popover_1.ArrowContainer;
var Stroke = function (_a) {
var isHideColor = _a.isHideColor, info = _a.info, onChange = _a.onChange;
return (React.createElement("div", { className: "image-editor-pop" },
React.createElement("div", { className: "size-item", onClick: function () { return onChange({ size: 4 }); } },
React.createElement("div", { className: classnames('stroke-small', {
'tools-size-selected': info.size === 4
}) })),
React.createElement("div", { className: "size-item", onClick: function () { return onChange({ size: 8 }); } },
React.createElement("div", { className: classnames('stroke-default', {
'tools-size-selected': info.size === 8
}) })),
React.createElement("div", { className: "size-item", onClick: function () { return onChange({ size: 16 }); } },
React.createElement("div", { className: classnames('stroke-large', {
'tools-size-selected': info.size === 16
}) })),
!isHideColor && (React.createElement(React.Fragment, null,
React.createElement("div", { className: classnames('color-item color-yellow', {
'tools-color-selected': info.color === '#f1f117'
}), onClick: function () { return onChange({ color: '#f1f117' }); } }),
React.createElement("div", { className: classnames('color-item color-red', {
'tools-color-selected': info.color === '#f71f1f'
}), onClick: function () { return onChange({ color: '#f71f1f' }); } }),
React.createElement("div", { className: classnames('color-item color-green', {
'tools-color-selected': info.color === '#30ca30'
}), onClick: function () { return onChange({ color: '#30ca30' }); } }),
React.createElement("div", { className: classnames('color-item color-blue', {
'tools-color-selected': info.color === '#31e9f9'
}), onClick: function () { return onChange({ color: '#31e9f9' }); } })))));
};
Stroke.defaultProps = {
isHideColor: false
};
function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
var _ref =
/*#__PURE__*/
React__default.createElement("path", {
stroke: "green",
fill: "transparent",
d: "M0 8l8 8L20 0"
});
var SvgConfirm = function SvgConfirm(props) {
return React__default.createElement("svg", _extends({
width: 20,
height: 20
}, props), _ref);
};
function _extends$1() { _extends$1 = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$1.apply(this, arguments); }
var _ref$1 =
/*#__PURE__*/
React__default.createElement("defs", null, React__default.createElement("style", null));
var _ref2 =
/*#__PURE__*/
React__default.createElement("path", {
d: "M793 242H366v-74c0-6.7-7.7-10.4-12.9-6.3l-142 112c-4.1 3.2-4.1 9.4 0 12.6l142 112c5.2 4.1 12.9.4 12.9-6.3v-74h415v470H175c-4.4 0-8 3.6-8 8v60c0 4.4 3.6 8 8 8h618c35.3 0 64-28.7 64-64V306c0-35.3-28.7-64-64-64z",
fill: "#fff"
});
var SvgRollback = function SvgRollback(props) {
return React__default.createElement("svg", _extends$1({
className: "rollback_svg__icon",
viewBox: "0 0 1024 1024",
width: 20,
height: 20
}, props), _ref$1, _ref2);
};
function _extends$2() { _extends$2 = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$2.apply(this, arguments); }
var _ref$2 =
/*#__PURE__*/
React__default.createElement("defs", null, React__default.createElement("style", null));
var _ref2$1 =
/*#__PURE__*/
React__default.createElement("path", {
d: "M760.474 493.926a25.6 25.6 0 00-36.199 0L512 706.202V128a25.6 25.6 0 00-51.2 0v578.202L248.525 493.926a25.6 25.6 0 00-36.199 36.199l256 256a25.498 25.498 0 0036.25-.051l256-256a25.6 25.6 0 000-36.199z",
fill: "#fff"
});
var _ref3 =
/*#__PURE__*/
React__default.createElement("path", {
d: "M896 972.8H76.8C34.458 972.8 0 938.342 0 896V793.6a25.6 25.6 0 0151.2 0V896a25.6 25.6 0 0025.6 25.6H896a25.6 25.6 0 0025.6-25.6V793.6a25.6 25.6 0 0151.2 0V896c0 42.342-34.458 76.8-76.8 76.8z",
fill: "#fff"
});
var SvgDownload = function SvgDownload(props) {
return React__default.createElement("svg", _extends$2({
className: "download_svg__icon",
viewBox: "0 0 1024 1024",
width: 20,
height: 20
}, props), _ref$2, _ref2$1, _ref3);
};
function _extends$3() { _extends$3 = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$3.apply(this, arguments); }
var _ref$3 =
/*#__PURE__*/
React__default.createElement("defs", null, React__default.createElement("style", null));
var _ref2$2 =
/*#__PURE__*/
React__default.createElement("path", {
d: "M544.448 499.2l284.576-284.576a32 32 0 00-45.248-45.248L499.2 453.952 214.624 169.376a32 32 0 00-45.248 45.248L453.952 499.2 169.376 783.776a32 32 0 0045.248 45.248L499.2 544.448l284.576 284.576a31.904 31.904 0 0045.248 0 32 32 0 000-45.248L544.448 499.2z",
fill: "#d81e06"
});
var SvgClose = function SvgClose(props) {
return React__default.createElement("svg", _extends$3({
className: "close_svg__icon",
viewBox: "0 0 1024 1024",
width: 21,
height: 21
}, props), _ref$3, _ref2$2);
};
var Tools = React.forwardRef(function (_a, ref) {
var type = _a.type, info = _a.info, setInfo = _a.setInfo, onChange = _a.onChange, onClose = _a.onClose, onCancel = _a.onCancel, onDownload = _a.onDownload, onCopy = _a.onCopy;
var _b = React.useState(''), selected = _b[0], setSelected = _b[1];
var _c = React.useState('bottom'), position = _c[0], setPosition = _c[1];
var toolsRef = React.useRef(null);
var combinedRef = useCombinedRefs(ref, toolsRef);
var handleClick = function (curType) {
var pos = combinedRef.current.getBoundingClientRect();
if (pos.bottom >= window.innerHeight - pos.height - 5) {
setPosition('top');
}
else {
setPosition('bottom');
}
onChange(curType);
setSelected(curType);
};
var handleClose = function () {
onClose();
setSelected('');
};
return (React.createElement("div", { className: "tools", ref: combinedRef },
React.createElement(Popover, { position: position, align: "start", isOpen: selected === 'rect', content: function (_a) {
var position = _a.position, targetRect = _a.targetRect, popoverRect = _a.popoverRect;
return (React.createElement(Popover_2, { position: position, targetRect: targetRect, popoverRect: popoverRect, arrowColor: '#272323', arrowSize: 5 },
React.createElement(Stroke, { info: info, onChange: function (options) {
return setInfo(function (opt) { return (__assign(__assign({}, opt), options)); });
} })));
} },
React.createElement("div", { className: classnames('tools-item tools-rect', {
'tool-selected': type === 'rect'
}), onClick: function () { return handleClick('rect'); } })),
React.createElement(Popover, { position: position, align: "start", isOpen: selected === 'circle', content: function (_a) {
var position = _a.position, targetRect = _a.targetRect, popoverRect = _a.popoverRect;
return (React.createElement(Popover_2, { position: position, targetRect: targetRect, popoverRect: popoverRect, arrowColor: '#272323', arrowSize: 5 },
React.createElement(Stroke, { info: info, onChange: function (options) {
return setInfo(function (opt) { return (__assign(__assign({}, opt), options)); });
} })));
} },
React.createElement("div", { className: classnames('tools-item tools-circle', {
'tool-selected': type === 'circle'
}), onClick: function () { return handleClick('circle'); } })),
React.createElement(Popover, { position: position, align: "start", isOpen: selected === 'line', content: function (_a) {
var position = _a.position, targetRect = _a.targetRect, popoverRect = _a.popoverRect;
return (React.createElement(Popover_2, { position: position, targetRect: targetRect, popoverRect: popoverRect, arrowColor: '#272323', arrowSize: 5 },
React.createElement(Stroke, { info: info, onChange: function (options) {
return setInfo(function (opt) { return (__assign(__assign({}, opt), options)); });
} })));
} },
React.createElement("div", { className: classnames('tools-item tools-text', {
'tool-selected': type === 'line'
}), onClick: function () { return handleClick('line'); } }, "L")),
React.createElement(Popover, { position: position, align: "start", isOpen: selected === 'mosaic', content: function (_a) {
var position = _a.position, targetRect = _a.targetRect, popoverRect = _a.popoverRect;
return (React.createElement(Popover_2, { position: position, targetRect: targetRect, popoverRect: popoverRect, arrowColor: '#272323', arrowSize: 5 },
React.createElement(Stroke, { info: info, onChange: function (options) {
return setInfo(function (opt) { return (__assign(__assign({}, opt), options)); });
}, isHideColor: true })));
} },
React.createElement("div", { className: classnames('tools-item tools-text', {
'tool-selected': type === 'mosaic'
}), onClick: function () { return handleClick('mosaic'); } }, "M")),
React.createElement("div", { className: "tools-hold" }),
React.createElement(SvgRollback, { onClick: onCancel }),
React.createElement(SvgDownload, { onClick: onDownload }),
React.createElement(SvgClose, { onClick: handle