Skip to content

N
NodeJS_668036

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

Fork自 inscode / NodeJS

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

Mon Mar 3 13:23:00 CST 2025 inscode

上级 047e63a5
隐藏空白更改
内联 并排
Showing with 0 addition and 3486 deletion
dist3/tiny-image-editor.min.js
浏览文件 @ de3d36c5
(function webpackUniversalModuleDefinition(root, factory) {
if(typeof exports === 'object' && typeof module === 'object')
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.React", "window.ReactDom", "window.ReactPopper"], factory);
else if(typeof exports === 'object')
exports["fatherDemo"] = factory(require("window.Fabric"), require("window.React"), require("window.ReactDom"), require("window.ReactPopper"));
else
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__ = ({
/***/ 128:
/***/ (function(module) {
"use strict";
module.exports = __WEBPACK_EXTERNAL_MODULE__128__;
/***/ }),
/***/ 436:
/***/ (function(module) {
"use strict";
module.exports = __WEBPACK_EXTERNAL_MODULE__436__;
/***/ }),
/***/ 167:
/***/ (function(module) {
"use strict";
module.exports = __WEBPACK_EXTERNAL_MODULE__167__;
/***/ }),
/***/ 171:
/***/ (function(module) {
"use strict";
module.exports = __WEBPACK_EXTERNAL_MODULE__171__;
/***/ }),
/***/ 317:
/***/ (function(module) {
function _arrayLikeToArray(arr, len) {
if (len == null || len > arr.length) len = arr.length;
for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i];
return arr2;
}
module.exports = _arrayLikeToArray, module.exports.__esModule = true, module.exports["default"] = module.exports;
/***/ }),
/***/ 180:
/***/ (function(module) {
function _arrayWithHoles(arr) {
if (Array.isArray(arr)) return arr;
}
module.exports = _arrayWithHoles, module.exports.__esModule = true, module.exports["default"] = module.exports;
/***/ }),
/***/ 786:
/***/ (function(module, __unused_webpack_exports, __webpack_require__) {
var arrayLikeToArray = __webpack_require__(317);
function _arrayWithoutHoles(arr) {
if (Array.isArray(arr)) return arrayLikeToArray(arr);
}
module.exports = _arrayWithoutHoles, module.exports.__esModule = true, module.exports["default"] = module.exports;
/***/ }),
/***/ 374:
/***/ (function(module) {
function _assertThisInitialized(self) {
if (self === void 0) {
throw new ReferenceError("this hasn't been initialised - super() hasn't been called");
}
return self;
}
module.exports = _assertThisInitialized, module.exports.__esModule = true, module.exports["default"] = module.exports;
/***/ }),
/***/ 486:
/***/ (function(module) {
function _classCallCheck(instance, Constructor) {
if (!(instance instanceof Constructor)) {
throw new TypeError("Cannot call a class as a function");
}
}
module.exports = _classCallCheck, module.exports.__esModule = true, module.exports["default"] = module.exports;
/***/ }),
/***/ 702:
/***/ (function(module, __unused_webpack_exports, __webpack_require__) {
var toPropertyKey = __webpack_require__(281);
function _defineProperties(target, props) {
for (var i = 0; i < props.length; i++) {
var descriptor = props[i];
descriptor.enumerable = descriptor.enumerable || false;
descriptor.configurable = true;
if ("value" in descriptor) descriptor.writable = true;
Object.defineProperty(target, toPropertyKey(descriptor.key), descriptor);
}
}
function _createClass(Constructor, protoProps, staticProps) {
if (protoProps) _defineProperties(Constructor.prototype, protoProps);
if (staticProps) _defineProperties(Constructor, staticProps);
Object.defineProperty(Constructor, "prototype", {
writable: false
});
return Constructor;
}
module.exports = _createClass, module.exports.__esModule = true, module.exports["default"] = module.exports;
/***/ }),
/***/ 400:
/***/ (function(module, __unused_webpack_exports, __webpack_require__) {
var getPrototypeOf = __webpack_require__(242);
var isNativeReflectConstruct = __webpack_require__(424);
var possibleConstructorReturn = __webpack_require__(983);
function _createSuper(Derived) {
var hasNativeReflectConstruct = isNativeReflectConstruct();
return function _createSuperInternal() {
var Super = getPrototypeOf(Derived),
result;
if (hasNativeReflectConstruct) {
var NewTarget = getPrototypeOf(this).constructor;
result = Reflect.construct(Super, arguments, NewTarget);
} else {
result = Super.apply(this, arguments);
}
return possibleConstructorReturn(this, result);
};
}
module.exports = _createSuper, module.exports.__esModule = true, module.exports["default"] = module.exports;
/***/ }),
/***/ 143:
/***/ (function(module, __unused_webpack_exports, __webpack_require__) {
var toPropertyKey = __webpack_require__(281);
function _defineProperty(obj, key, value) {
key = toPropertyKey(key);
if (key in obj) {
Object.defineProperty(obj, key, {
value: value,
enumerable: true,
configurable: true,
writable: true
});
} else {
obj[key] = value;
}
return obj;
}
module.exports = _defineProperty, module.exports.__esModule = true, module.exports["default"] = module.exports;
/***/ }),
/***/ 55:
/***/ (function(module) {
function _extends() {
module.exports = _extends = Object.assign ? Object.assign.bind() : 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;
}, module.exports.__esModule = true, module.exports["default"] = module.exports;
return _extends.apply(this, arguments);
}
module.exports = _extends, module.exports.__esModule = true, module.exports["default"] = module.exports;
/***/ }),
/***/ 242:
/***/ (function(module) {
function _getPrototypeOf(o) {
module.exports = _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf.bind() : function _getPrototypeOf(o) {
return o.__proto__ || Object.getPrototypeOf(o);
}, module.exports.__esModule = true, module.exports["default"] = module.exports;
return _getPrototypeOf(o);
}
module.exports = _getPrototypeOf, module.exports.__esModule = true, module.exports["default"] = module.exports;
/***/ }),
/***/ 821:
/***/ (function(module, __unused_webpack_exports, __webpack_require__) {
var setPrototypeOf = __webpack_require__(687);
function _inherits(subClass, superClass) {
if (typeof superClass !== "function" && superClass !== null) {
throw new TypeError("Super expression must either be null or a function");
}
subClass.prototype = Object.create(superClass && superClass.prototype, {
constructor: {
value: subClass,
writable: true,
configurable: true
}
});
Object.defineProperty(subClass, "prototype", {
writable: false
});
if (superClass) setPrototypeOf(subClass, superClass);
}
module.exports = _inherits, module.exports.__esModule = true, module.exports["default"] = module.exports;
/***/ }),
/***/ 424:
/***/ (function(module) {
function _isNativeReflectConstruct() {
if (typeof Reflect === "undefined" || !Reflect.construct) return false;
if (Reflect.construct.sham) return false;
if (typeof Proxy === "function") return true;
try {
Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {}));
return true;
} catch (e) {
return false;
}
}
module.exports = _isNativeReflectConstruct, module.exports.__esModule = true, module.exports["default"] = module.exports;
/***/ }),
/***/ 682:
/***/ (function(module) {
function _iterableToArray(iter) {
if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter);
}
module.exports = _iterableToArray, module.exports.__esModule = true, module.exports["default"] = module.exports;
/***/ }),
/***/ 249:
/***/ (function(module) {
function _iterableToArrayLimit(r, l) {
var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"];
if (null != t) {
var e,
n,
i,
u,
a = [],
f = !0,
o = !1;
try {
if (i = (t = t.call(r)).next, 0 === l) {
if (Object(t) !== t) return;
f = !1;
} else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0);
} catch (r) {
o = !0, n = r;
} finally {
try {
if (!f && null != t["return"] && (u = t["return"](), Object(u) !== u)) return;
} finally {
if (o) throw n;
}
}
return a;
}
}
module.exports = _iterableToArrayLimit, module.exports.__esModule = true, module.exports["default"] = module.exports;
/***/ }),
/***/ 20:
/***/ (function(module) {
function _nonIterableRest() {
throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
}
module.exports = _nonIterableRest, module.exports.__esModule = true, module.exports["default"] = module.exports;
/***/ }),
/***/ 114:
/***/ (function(module) {
function _nonIterableSpread() {
throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
}
module.exports = _nonIterableSpread, module.exports.__esModule = true, module.exports["default"] = module.exports;
/***/ }),
/***/ 118:
/***/ (function(module, __unused_webpack_exports, __webpack_require__) {
var defineProperty = __webpack_require__(143);
function ownKeys(e, r) {
var t = Object.keys(e);
if (Object.getOwnPropertySymbols) {
var o = Object.getOwnPropertySymbols(e);
r && (o = o.filter(function (r) {
return Object.getOwnPropertyDescriptor(e, r).enumerable;
})), t.push.apply(t, o);
}
return t;
}
function _objectSpread2(e) {
for (var r = 1; r < arguments.length; r++) {
var t = null != arguments[r] ? arguments[r] : {};
r % 2 ? ownKeys(Object(t), !0).forEach(function (r) {
defineProperty(e, r, t[r]);
}) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) {
Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r));
});
}
return e;
}
module.exports = _objectSpread2, module.exports.__esModule = true, module.exports["default"] = module.exports;
/***/ }),
/***/ 5:
/***/ (function(module, __unused_webpack_exports, __webpack_require__) {
var objectWithoutPropertiesLoose = __webpack_require__(166);
function _objectWithoutProperties(source, excluded) {
if (source == null) return {};
var target = objectWithoutPropertiesLoose(source, excluded);
var key, i;
if (Object.getOwnPropertySymbols) {
var sourceSymbolKeys = Object.getOwnPropertySymbols(source);
for (i = 0; i < sourceSymbolKeys.length; i++) {
key = sourceSymbolKeys[i];
if (excluded.indexOf(key) >= 0) continue;
if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue;
target[key] = source[key];
}
}
return target;
}
module.exports = _objectWithoutProperties, module.exports.__esModule = true, module.exports["default"] = module.exports;
/***/ }),
/***/ 166:
/***/ (function(module) {
function _objectWithoutPropertiesLoose(source, excluded) {
if (source == null) return {};
var target = {};
var sourceKeys = Object.keys(source);
var key, i;
for (i = 0; i < sourceKeys.length; i++) {
key = sourceKeys[i];
if (excluded.indexOf(key) >= 0) continue;
target[key] = source[key];
}
return target;
}
module.exports = _objectWithoutPropertiesLoose, module.exports.__esModule = true, module.exports["default"] = module.exports;
/***/ }),
/***/ 983:
/***/ (function(module, __unused_webpack_exports, __webpack_require__) {
var _typeof = (__webpack_require__(944)["default"]);
var assertThisInitialized = __webpack_require__(374);
function _possibleConstructorReturn(self, call) {
if (call && (_typeof(call) === "object" || typeof call === "function")) {
return call;
} else if (call !== void 0) {
throw new TypeError("Derived constructors may only return object or undefined");
}
return assertThisInitialized(self);
}
module.exports = _possibleConstructorReturn, module.exports.__esModule = true, module.exports["default"] = module.exports;
/***/ }),
/***/ 687:
/***/ (function(module) {
function _setPrototypeOf(o, p) {
module.exports = _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function _setPrototypeOf(o, p) {
o.__proto__ = p;
return o;
}, module.exports.__esModule = true, module.exports["default"] = module.exports;
return _setPrototypeOf(o, p);
}
module.exports = _setPrototypeOf, module.exports.__esModule = true, module.exports["default"] = module.exports;
/***/ }),
/***/ 925:
/***/ (function(module, __unused_webpack_exports, __webpack_require__) {
var arrayWithHoles = __webpack_require__(180);
var iterableToArrayLimit = __webpack_require__(249);
var unsupportedIterableToArray = __webpack_require__(508);
var nonIterableRest = __webpack_require__(20);
function _slicedToArray(arr, i) {
return arrayWithHoles(arr) || iterableToArrayLimit(arr, i) || unsupportedIterableToArray(arr, i) || nonIterableRest();
}
module.exports = _slicedToArray, module.exports.__esModule = true, module.exports["default"] = module.exports;
/***/ }),
/***/ 44:
/***/ (function(module, __unused_webpack_exports, __webpack_require__) {
var arrayWithoutHoles = __webpack_require__(786);
var iterableToArray = __webpack_require__(682);
var unsupportedIterableToArray = __webpack_require__(508);
var nonIterableSpread = __webpack_require__(114);
function _toConsumableArray(arr) {
return arrayWithoutHoles(arr) || iterableToArray(arr) || unsupportedIterableToArray(arr) || nonIterableSpread();
}
module.exports = _toConsumableArray, module.exports.__esModule = true, module.exports["default"] = module.exports;
/***/ }),
/***/ 224:
/***/ (function(module, __unused_webpack_exports, __webpack_require__) {
var _typeof = (__webpack_require__(944)["default"]);
function _toPrimitive(input, hint) {
if (_typeof(input) !== "object" || input === null) return input;
var prim = input[Symbol.toPrimitive];
if (prim !== undefined) {
var res = prim.call(input, hint || "default");
if (_typeof(res) !== "object") return res;
throw new TypeError("@@toPrimitive must return a primitive value.");
}
return (hint === "string" ? String : Number)(input);
}
module.exports = _toPrimitive, module.exports.__esModule = true, module.exports["default"] = module.exports;
/***/ }),
/***/ 281:
/***/ (function(module, __unused_webpack_exports, __webpack_require__) {
var _typeof = (__webpack_require__(944)["default"]);
var toPrimitive = __webpack_require__(224);
function _toPropertyKey(arg) {
var key = toPrimitive(arg, "string");
return _typeof(key) === "symbol" ? key : String(key);
}
module.exports = _toPropertyKey, module.exports.__esModule = true, module.exports["default"] = module.exports;
/***/ }),
/***/ 944:
/***/ (function(module) {
function _typeof(o) {
"@babel/helpers - typeof";
return (module.exports = _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) {
return typeof o;
} : function (o) {
return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o;
}, module.exports.__esModule = true, module.exports["default"] = module.exports), _typeof(o);
}
module.exports = _typeof, module.exports.__esModule = true, module.exports["default"] = module.exports;
/***/ }),
/***/ 508:
/***/ (function(module, __unused_webpack_exports, __webpack_require__) {
var arrayLikeToArray = __webpack_require__(317);
function _unsupportedIterableToArray(o, minLen) {
if (!o) return;
if (typeof o === "string") return arrayLikeToArray(o, minLen);
var n = Object.prototype.toString.call(o).slice(8, -1);
if (n === "Object" && o.constructor) n = o.constructor.name;
if (n === "Map" || n === "Set") return Array.from(o);
if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return arrayLikeToArray(o, minLen);
}
module.exports = _unsupportedIterableToArray, module.exports.__esModule = true, module.exports["default"] = module.exports;
/***/ }),
/***/ 667:
/***/ (function(module, exports, __webpack_require__) {
var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;var _typeof = (__webpack_require__(944)["default"]);
/*!
Copyright (c) 2018 Jed Watson.
Licensed under the MIT License (MIT), see
http://jedwatson.github.io/classnames
*/
/* global define */
(function () {
'use strict';
var hasOwn = {}.hasOwnProperty;
function classNames() {
var classes = '';
for (var i = 0; i < arguments.length; i++) {
var arg = arguments[i];
if (arg) {
classes = appendClass(classes, parseValue(arg));
}
}
return classes;
}
function parseValue(arg) {
if (typeof arg === 'string' || typeof arg === 'number') {
return arg;
}
if (_typeof(arg) !== 'object') {
return '';
}
if (Array.isArray(arg)) {
return classNames.apply(null, arg);
}
if (arg.toString !== Object.prototype.toString && !arg.toString.toString().includes('[native code]')) {
return arg.toString();
}
var classes = '';
for (var key in arg) {
if (hasOwn.call(arg, key) && arg[key]) {
classes = appendClass(classes, key);
}
}
return classes;
}
function appendClass(value, newClass) {
if (!newClass) {
return value;
}
if (value) {
return value + ' ' + newClass;
}
return value + newClass;
}
if ( true && module.exports) {
classNames.default = classNames;
module.exports = classNames;
} else if ( true && _typeof(__webpack_require__.amdO) === 'object' && __webpack_require__.amdO) {
// register as 'classnames', consistent with npm package name
!(__WEBPACK_AMD_DEFINE_ARRAY__ = [], __WEBPACK_AMD_DEFINE_RESULT__ = (function () {
return classNames;
}).apply(exports, __WEBPACK_AMD_DEFINE_ARRAY__),
__WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__));
} else {
window.classNames = classNames;
}
})();
/***/ })
/******/ });
/************************************************************************/
/******/ // The module cache
/******/ var __webpack_module_cache__ = {};
/******/
/******/ // The require function
/******/ function __webpack_require__(moduleId) {
/******/ // Check if module is in cache
/******/ var cachedModule = __webpack_module_cache__[moduleId];
/******/ if (cachedModule !== undefined) {
/******/ return cachedModule.exports;
/******/ }
/******/ // Create a new module (and put it into the cache)
/******/ var module = __webpack_module_cache__[moduleId] = {
/******/ // no module.id needed
/******/ // no module.loaded needed
/******/ exports: {}
/******/ };
/******/
/******/ // Execute the module function
/******/ __webpack_modules__[moduleId](module, module.exports, __webpack_require__);
/******/
/******/ // Return the exports of the module
/******/ return module.exports;
/******/ }
/******/
/************************************************************************/
/******/ /* webpack/runtime/amd options */
/******/ !function() {
/******/ __webpack_require__.amdO = {};
/******/ }();
/******/
/******/ /* webpack/runtime/compat get default export */
/******/ !function() {
/******/ // getDefaultExport function for compatibility with non-harmony modules
/******/ __webpack_require__.n = function(module) {
/******/ var getter = module && module.__esModule ?
/******/ function() { return module['default']; } :
/******/ function() { return module; };
/******/ __webpack_require__.d(getter, { a: getter });
/******/ return getter;
/******/ };
/******/ }();
/******/
/******/ /* webpack/runtime/define property getters */
/******/ !function() {
/******/ // define getter functions for harmony exports
/******/ __webpack_require__.d = function(exports, definition) {
/******/ for(var key in definition) {
/******/ if(__webpack_require__.o(definition, key) && !__webpack_require__.o(exports, key)) {
/******/ Object.defineProperty(exports, key, { enumerable: true, get: definition[key] });
/******/ }
/******/ }
/******/ };
/******/ }();
/******/
/******/ /* webpack/runtime/hasOwnProperty shorthand */
/******/ !function() {
/******/ __webpack_require__.o = function(obj, prop) { return Object.prototype.hasOwnProperty.call(obj, prop); }
/******/ }();
/******/
/******/ /* webpack/runtime/make namespace object */
/******/ !function() {
/******/ // define __esModule on exports
/******/ __webpack_require__.r = function(exports) {
/******/ if(typeof Symbol !== 'undefined' && Symbol.toStringTag) {
/******/ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
/******/ }
/******/ Object.defineProperty(exports, '__esModule', { value: true });
/******/ };
/******/ }();
/******/
/************************************************************************/
var __webpack_exports__ = {};
// This entry need to be wrapped in an IIFE because it need to be in strict mode.
!function() {
"use strict";
// ESM COMPAT FLAG
__webpack_require__.r(__webpack_exports__);
// EXPORTS
__webpack_require__.d(__webpack_exports__, {
ACTION: function() { return /* reexport */ ACTION; },
ACTION_TEXT: function() { return /* reexport */ ACTION_TEXT; },
CURSOR: function() { return /* reexport */ CURSOR; },
DEFAULT_DIMENSION: function() { return /* reexport */ DEFAULT_DIMENSION; },
EMPTY_ARR: function() { return /* reexport */ EMPTY_ARR; },
EMPTY_STR: function() { return /* reexport */ EMPTY_STR; },
Editor: function() { return /* reexport */ Editor; },
FLIP_TYPE: function() { return /* reexport */ FLIP_TYPE; },
IMAGE_NAME: function() { return /* reexport */ IMAGE_NAME; },
INVALID_PROPS: function() { return /* reexport */ INVALID_PROPS; },
IPaintTypes: function() { return /* reexport */ IPaintTypes; },
LANG: function() { return /* reexport */ LANG; },
MAX_HISTORY_LEN: function() { return /* reexport */ MAX_HISTORY_LEN; },
MENU_TYPE_ENUM: function() { return /* reexport */ MENU_TYPE_ENUM; },
MENU_TYPE_TEXT: function() { return /* reexport */ MENU_TYPE_TEXT; },
WORK_SPACE_ID: function() { return /* reexport */ WORK_SPACE_ID; },
eventNames: function() { return /* reexport */ eventNames; },
keyCodes: function() { return /* reexport */ keyCodes; },
paintConfig: function() { return /* reexport */ paintConfig; },
stayRemain: function() { return /* reexport */ stayRemain; }
});
// EXTERNAL MODULE: external "window.React"
var external_window_React_ = __webpack_require__(436);
var external_window_React_default = /*#__PURE__*/__webpack_require__.n(external_window_React_);
// EXTERNAL MODULE: ./node_modules/@umijs/babel-preset-umi/node_modules/@babel/runtime/helpers/defineProperty.js
var defineProperty = __webpack_require__(143);
var defineProperty_default = /*#__PURE__*/__webpack_require__.n(defineProperty);
;// CONCATENATED MODULE: ./src/tiny-image-editor/src/constants/index.ts
var _MENU_TYPE_ENUM$crop, _MENU_TYPE_ENUM$histo, _MENU_TYPE_ENUM$downl, _MENU_TYPE_ENUM$draw, _MENU_TYPE_ENUM$flip, _MENU_TYPE_ENUM$reset, _MENU_TYPE_ENUM$rotat, _MENU_TYPE_ENUM$rect, _MENU_TYPE_ENUM$circl, _MENU_TYPE_ENUM$text, _MENU_TYPE_ENUM$uploa, _MENU_TYPE_ENUM$drag, _MENU_TYPE_ENUM$scale, _MENU_TYPE_ENUM$arrow, _MENU_TYPE_ENUM$mosai, _MENU_TYPE_ENUM$redo, _MENU_TYPE_ENUM$undo, _MENU_TYPE_TEXT, _ACTION$add, _ACTION$modified, _ACTION$delete, _placeholder, _init, _title, _ACTION_TEXT;
var eventNames = {
OBJECT_ACTIVATED: 'objectActivated',
OBJECT_MOVED: 'objectMoved',
OBJECT_SCALED: 'objectScaled',
OBJECT_CREATED: 'objectCreated',
TEXT_EDITING: 'textEditing',
TEXT_CHANGED: 'textChanged',
ICON_CREATE_RESIZE: 'iconCreateResize',
ICON_CREATE_END: 'iconCreateEnd',
ADD_TEXT: 'addText',
ADD_OBJECT: 'addObject',
ADD_OBJECT_AFTER: 'addObjectAfter',
MOUSE_DOWN: 'mousedown',
MOUSE_UP: 'mouseup',
MOUSE_MOVE: 'mousemove',
// UNDO/REDO Events
REDO_STACK_CHANGED: 'redoStackChanged',
UNDO_STACK_CHANGED: 'undoStackChanged',
SELECTION_CLEARED: 'selectionCleared',
SELECTION_CREATED: 'selectionCreated'
};
/** 菜单 */
var MENU_TYPE_ENUM = /*#__PURE__*/function (MENU_TYPE_ENUM) {
MENU_TYPE_ENUM["crop"] = "crop";
MENU_TYPE_ENUM["history"] = "history";
MENU_TYPE_ENUM["download"] = "download";
MENU_TYPE_ENUM["draw"] = "draw";
MENU_TYPE_ENUM["flip"] = "flip";
MENU_TYPE_ENUM["reset"] = "reset";
MENU_TYPE_ENUM["rotate"] = "rotate";
MENU_TYPE_ENUM["rect"] = "rect";
MENU_TYPE_ENUM["circle"] = "circle";
MENU_TYPE_ENUM["text"] = "text";
MENU_TYPE_ENUM["upload"] = "upload";
MENU_TYPE_ENUM["drag"] = "drag";
MENU_TYPE_ENUM["scale"] = "scale";
MENU_TYPE_ENUM["arrow"] = "arrow";
MENU_TYPE_ENUM["mosaic"] = "mosaic";
MENU_TYPE_ENUM["undo"] = "undo";
MENU_TYPE_ENUM["redo"] = "redo";
MENU_TYPE_ENUM["default"] = "";
return MENU_TYPE_ENUM;
}({});
var LANG = /*#__PURE__*/function (LANG) {
LANG["zh"] = "zh";
LANG["en"] = "en";
return LANG;
}({});
var MENU_TYPE_TEXT = (_MENU_TYPE_TEXT = {}, defineProperty_default()(_MENU_TYPE_TEXT, MENU_TYPE_ENUM.crop, (_MENU_TYPE_ENUM$crop = {}, defineProperty_default()(_MENU_TYPE_ENUM$crop, LANG.zh, '裁剪'), defineProperty_default()(_MENU_TYPE_ENUM$crop, LANG.en, MENU_TYPE_ENUM.crop), _MENU_TYPE_ENUM$crop)), defineProperty_default()(_MENU_TYPE_TEXT, MENU_TYPE_ENUM.history, (_MENU_TYPE_ENUM$histo = {}, defineProperty_default()(_MENU_TYPE_ENUM$histo, LANG.zh, '历史记录'), defineProperty_default()(_MENU_TYPE_ENUM$histo, LANG.en, MENU_TYPE_ENUM.history), _MENU_TYPE_ENUM$histo)), defineProperty_default()(_MENU_TYPE_TEXT, MENU_TYPE_ENUM.download, (_MENU_TYPE_ENUM$downl = {}, defineProperty_default()(_MENU_TYPE_ENUM$downl, LANG.zh, '下载'), defineProperty_default()(_MENU_TYPE_ENUM$downl, LANG.en, MENU_TYPE_ENUM.download), _MENU_TYPE_ENUM$downl)), defineProperty_default()(_MENU_TYPE_TEXT, MENU_TYPE_ENUM.draw, (_MENU_TYPE_ENUM$draw = {}, defineProperty_default()(_MENU_TYPE_ENUM$draw, LANG.zh, '画笔'), defineProperty_default()(_MENU_TYPE_ENUM$draw, LANG.en, MENU_TYPE_ENUM.draw), _MENU_TYPE_ENUM$draw)), defineProperty_default()(_MENU_TYPE_TEXT, MENU_TYPE_ENUM.flip, (_MENU_TYPE_ENUM$flip = {}, defineProperty_default()(_MENU_TYPE_ENUM$flip, LANG.zh, '翻转'), defineProperty_default()(_MENU_TYPE_ENUM$flip, LANG.en, MENU_TYPE_ENUM.flip), _MENU_TYPE_ENUM$flip)), defineProperty_default()(_MENU_TYPE_TEXT, MENU_TYPE_ENUM.reset, (_MENU_TYPE_ENUM$reset = {}, defineProperty_default()(_MENU_TYPE_ENUM$reset, LANG.zh, '重置'), defineProperty_default()(_MENU_TYPE_ENUM$reset, LANG.en, MENU_TYPE_ENUM.reset), _MENU_TYPE_ENUM$reset)), defineProperty_default()(_MENU_TYPE_TEXT, MENU_TYPE_ENUM.rotate, (_MENU_TYPE_ENUM$rotat = {}, defineProperty_default()(_MENU_TYPE_ENUM$rotat, LANG.zh, '旋转'), defineProperty_default()(_MENU_TYPE_ENUM$rotat, LANG.en, MENU_TYPE_ENUM.rotate), _MENU_TYPE_ENUM$rotat)), defineProperty_default()(_MENU_TYPE_TEXT, MENU_TYPE_ENUM.rect, (_MENU_TYPE_ENUM$rect = {}, defineProperty_default()(_MENU_TYPE_ENUM$rect, LANG.zh, '矩形'), defineProperty_default()(_MENU_TYPE_ENUM$rect, LANG.en, MENU_TYPE_ENUM.rect), _MENU_TYPE_ENUM$rect)), defineProperty_default()(_MENU_TYPE_TEXT, MENU_TYPE_ENUM.circle, (_MENU_TYPE_ENUM$circl = {}, defineProperty_default()(_MENU_TYPE_ENUM$circl, LANG.zh, '圆形'), defineProperty_default()(_MENU_TYPE_ENUM$circl, LANG.en, MENU_TYPE_ENUM.circle), _MENU_TYPE_ENUM$circl)), defineProperty_default()(_MENU_TYPE_TEXT, MENU_TYPE_ENUM.text, (_MENU_TYPE_ENUM$text = {}, defineProperty_default()(_MENU_TYPE_ENUM$text, LANG.zh, '文本'), defineProperty_default()(_MENU_TYPE_ENUM$text, LANG.en, MENU_TYPE_ENUM.text), _MENU_TYPE_ENUM$text)), defineProperty_default()(_MENU_TYPE_TEXT, MENU_TYPE_ENUM.upload, (_MENU_TYPE_ENUM$uploa = {}, defineProperty_default()(_MENU_TYPE_ENUM$uploa, LANG.zh, '上传'), defineProperty_default()(_MENU_TYPE_ENUM$uploa, LANG.en, MENU_TYPE_ENUM.upload), _MENU_TYPE_ENUM$uploa)), defineProperty_default()(_MENU_TYPE_TEXT, MENU_TYPE_ENUM.drag, (_MENU_TYPE_ENUM$drag = {}, defineProperty_default()(_MENU_TYPE_ENUM$drag, LANG.zh, '拖拽'), defineProperty_default()(_MENU_TYPE_ENUM$drag, LANG.en, MENU_TYPE_ENUM.drag), _MENU_TYPE_ENUM$drag)), defineProperty_default()(_MENU_TYPE_TEXT, MENU_TYPE_ENUM.scale, (_MENU_TYPE_ENUM$scale = {}, defineProperty_default()(_MENU_TYPE_ENUM$scale, LANG.zh, '缩放'), defineProperty_default()(_MENU_TYPE_ENUM$scale, LANG.en, MENU_TYPE_ENUM.scale), _MENU_TYPE_ENUM$scale)), defineProperty_default()(_MENU_TYPE_TEXT, MENU_TYPE_ENUM.arrow, (_MENU_TYPE_ENUM$arrow = {}, defineProperty_default()(_MENU_TYPE_ENUM$arrow, LANG.zh, '箭头'), defineProperty_default()(_MENU_TYPE_ENUM$arrow, LANG.en, MENU_TYPE_ENUM.arrow), _MENU_TYPE_ENUM$arrow)), defineProperty_default()(_MENU_TYPE_TEXT, MENU_TYPE_ENUM.mosaic, (_MENU_TYPE_ENUM$mosai = {}, defineProperty_default()(_MENU_TYPE_ENUM$mosai, LANG.zh, '马赛克'), defineProperty_default()(_MENU_TYPE_ENUM$mosai, LANG.en, MENU_TYPE_ENUM.mosaic), _MENU_TYPE_ENUM$mosai)), defineProperty_default()(_MENU_TYPE_TEXT, MENU_TYPE_ENUM.redo, (_MENU_TYPE_ENUM$redo = {}, defineProperty_default()(_MENU_TYPE_ENUM$redo, LANG.zh, '前进'), defineProperty_default()(_MENU_TYPE_ENUM$redo, LANG.en, MENU_TYPE_ENUM.redo), _MENU_TYPE_ENUM$redo)), defineProperty_default()(_MENU_TYPE_TEXT, MENU_TYPE_ENUM.undo, (_MENU_TYPE_ENUM$undo = {}, defineProperty_default()(_MENU_TYPE_ENUM$undo, LANG.zh, '后退'), defineProperty_default()(_MENU_TYPE_ENUM$undo, LANG.en, MENU_TYPE_ENUM.undo), _MENU_TYPE_ENUM$undo)), _MENU_TYPE_TEXT);
/** 鼠标形状 */
var CURSOR = /*#__PURE__*/function (CURSOR) {
CURSOR["default"] = "default";
CURSOR["crosshair"] = "crosshair";
CURSOR["pointer"] = "pointer";
CURSOR["move"] = "move";
CURSOR["grab"] = "grab";
CURSOR["grabbing"] = "grabbing";
CURSOR["zoomIn"] = "zoom-in";
CURSOR["zoomOut"] = "zoom-out";
return CURSOR;
}({});
var ACTION = /*#__PURE__*/function (ACTION) {
ACTION["add"] = "add";
ACTION["modified"] = "modified";
ACTION["delete"] = "delete";
return ACTION;
}({});
var ACTION_TEXT = (_ACTION_TEXT = {}, defineProperty_default()(_ACTION_TEXT, ACTION.add, (_ACTION$add = {}, defineProperty_default()(_ACTION$add, LANG.zh, '添加'), defineProperty_default()(_ACTION$add, LANG.en, ACTION.add), _ACTION$add)), defineProperty_default()(_ACTION_TEXT, ACTION.modified, (_ACTION$modified = {}, defineProperty_default()(_ACTION$modified, LANG.zh, '修改'), defineProperty_default()(_ACTION$modified, LANG.en, ACTION.modified), _ACTION$modified)), defineProperty_default()(_ACTION_TEXT, ACTION.delete, (_ACTION$delete = {}, defineProperty_default()(_ACTION$delete, LANG.zh, '删除'), defineProperty_default()(_ACTION$delete, LANG.en, ACTION.delete), _ACTION$delete)), defineProperty_default()(_ACTION_TEXT, "placeholder", (_placeholder = {}, defineProperty_default()(_placeholder, LANG.zh, '暂无历史'), defineProperty_default()(_placeholder, LANG.en, 'no logging'), _placeholder)), defineProperty_default()(_ACTION_TEXT, "init", (_init = {}, defineProperty_default()(_init, LANG.zh, '初始化'), defineProperty_default()(_init, LANG.en, 'init'), _init)), defineProperty_default()(_ACTION_TEXT, "title", (_title = {}, defineProperty_default()(_title, LANG.zh, '历史'), defineProperty_default()(_title, LANG.en, 'history'), _title)), _ACTION_TEXT);
var FLIP_TYPE = /*#__PURE__*/function (FLIP_TYPE) {
FLIP_TYPE["flipX"] = "flipX";
FLIP_TYPE["flipY"] = "flipY";
return FLIP_TYPE;
}({});
var WORK_SPACE_ID = 'workspace';
var IPaintTypes = /*#__PURE__*/function (IPaintTypes) {
IPaintTypes["size"] = "size";
IPaintTypes["color"] = "color";
return IPaintTypes;
}({}); //颜色
/** 一些绘画配置 */
var paintConfig = {
sizes: [5, 10, 20],
//通用画笔尺寸
colors: ['red', 'orange', 'yellow', 'green', 'blue', 'white'],
//通用画笔颜色
fontSizes: [30, 60, 90],
//通用文字颜色
rotates: [0, 45, 90, 135, 180, 225, 270, 315, 360],
//通用旋转角度
mosaicSizes: [10, 20, 30] //马赛克大小
};
/** 下载函数参数 */
var keyCodes = {
Z: 90,
Y: 89,
SHIFT: 16,
BACKSPACE: 8,
DEL: 46
};
var IMAGE_NAME = 'tie_image_editor';
var DEFAULT_DIMENSION = 8;
/** 前进和回退时保留的属性 */
var stayRemain = ['id', 'gradientAngle', 'selectable', 'hasControls', 'source', 'editable'];
/** 最大历史长度 */
var MAX_HISTORY_LEN = 30;
/** 空值 */
var EMPTY_STR = '';
var EMPTY_ARR = [];
/** 原生dom事件的interface */
/** 通用的需要从 props 过滤掉的不属于 dom 的属性 */
var INVALID_PROPS = ['onChange', 'loadData', 'onClick', 'onSelect', 'options', 'name', 'value', 'defaultValue', 'values', 'defaultValues', 'placeholder', 'large', 'small', 'iconRender', 'icon', 'activeIndex', 'swipeAble', 'fixedArrows', 'error', 'onVisibleChange'];
;// CONCATENATED MODULE: ./src/tiny-image-editor/src/util.ts
var EditorContext = /*#__PURE__*/external_window_React_default().createContext({
canvasInstanceRef: {
current: null
},
wrapperInstanceRef: {
current: null
},
currentMenuRef: {
current: MENU_TYPE_ENUM.default
},
currentMenu: MENU_TYPE_ENUM.default,
setCurrentMenu: function setCurrentMenu() {},
canvasIsRender: false,
canvasEl: {
current: null
},
initCanvasJson: {
current: null
},
unSaveHistory: {
current: null
},
historyRef: {
current: function current() {}
},
initBackGroundImage: function initBackGroundImage() {},
zoom: 1,
setZoom: function setZoom() {}
});
var isSupportFileApi = function isSupportFileApi() {
return !!(window.File && window.FileList && window.FileReader);
};
var base64ToBlob = function base64ToBlob(data) {
var rImageType = /data:(image\/.+);base64,/;
var mimeString = '';
var raw, uInt8Array, i;
raw = data.replace(rImageType, function (header, imageType) {
mimeString = imageType;
return '';
});
raw = atob(raw);
var rawLength = raw.length;
uInt8Array = new Uint8Array(rawLength); // eslint-disable-line
for (i = 0; i < rawLength; i += 1) {
uInt8Array[i] = raw.charCodeAt(i);
}
return new Blob([uInt8Array], {
type: mimeString
});
};
var clamp = function clamp(value, minValue, maxValue) {
if (minValue > maxValue) {
// eslint-disable-next-line no-param-reassign
var _ref = [maxValue, minValue];
minValue = _ref[0];
maxValue = _ref[1];
}
return Math.max(minValue, Math.min(value, maxValue));
};
var omit = function omit(object, array) {
// const mapObject = { ...object };
var mapObject = Object.assign({}, object);
array.forEach(function (key) {
delete mapObject[key];
});
return mapObject;
};
/**
* 移除非 Dom 属性的 props 的值
* @param props 需要过滤 props 的属性
* @param {string[]} invalidProps 需要从 props 过滤掉的不属于 dom 的属性.
*/
function removeNonHTMLProps(props) {
var invalidProps = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [];
// eslint-disable-next-line no-param-reassign
invalidProps = invalidProps.concat(INVALID_PROPS);
return omit(props, invalidProps);
}
/**获取IE浏览器版本 */
var getIEVersion = function getIEVersion() {
if (navigator) {
var userAgent = navigator.userAgent;
var ie11 = userAgent.indexOf('Trident') > -1 && userAgent.indexOf('rv:11.0') > -1;
if (ie11) {
return 11;
}
var versionArr = navigator.appVersion.split(';')[1];
if (!versionArr) {
return;
}
var version = versionArr.replace(/[ ]/g, '');
var result = /MSIE(\d+)\./.exec(version);
if (result) {
return parseInt(result[1]);
}
}
};
// EXTERNAL MODULE: ./node_modules/classnames/index.js
var classnames = __webpack_require__(667);
var classnames_default = /*#__PURE__*/__webpack_require__.n(classnames);
// EXTERNAL MODULE: ./node_modules/@umijs/babel-preset-umi/node_modules/@babel/runtime/helpers/extends.js
var helpers_extends = __webpack_require__(55);
var extends_default = /*#__PURE__*/__webpack_require__.n(helpers_extends);
// EXTERNAL MODULE: ./node_modules/@umijs/babel-preset-umi/node_modules/@babel/runtime/helpers/objectSpread2.js
var objectSpread2 = __webpack_require__(118);
var objectSpread2_default = /*#__PURE__*/__webpack_require__.n(objectSpread2);
// EXTERNAL MODULE: ./node_modules/@umijs/babel-preset-umi/node_modules/@babel/runtime/helpers/toConsumableArray.js
var toConsumableArray = __webpack_require__(44);
var toConsumableArray_default = /*#__PURE__*/__webpack_require__.n(toConsumableArray);
// EXTERNAL MODULE: ./node_modules/@umijs/babel-preset-umi/node_modules/@babel/runtime/helpers/objectWithoutProperties.js
var objectWithoutProperties = __webpack_require__(5);
var objectWithoutProperties_default = /*#__PURE__*/__webpack_require__.n(objectWithoutProperties);
// EXTERNAL MODULE: ./node_modules/@umijs/babel-preset-umi/node_modules/@babel/runtime/helpers/slicedToArray.js
var slicedToArray = __webpack_require__(925);
var slicedToArray_default = /*#__PURE__*/__webpack_require__.n(slicedToArray);
// EXTERNAL MODULE: external "window.ReactPopper"
var external_window_ReactPopper_ = __webpack_require__(171);
// EXTERNAL MODULE: ./node_modules/@umijs/babel-preset-umi/node_modules/@babel/runtime/helpers/classCallCheck.js
var classCallCheck = __webpack_require__(486);
var classCallCheck_default = /*#__PURE__*/__webpack_require__.n(classCallCheck);
// EXTERNAL MODULE: ./node_modules/@umijs/babel-preset-umi/node_modules/@babel/runtime/helpers/createClass.js
var createClass = __webpack_require__(702);
var createClass_default = /*#__PURE__*/__webpack_require__.n(createClass);
// EXTERNAL MODULE: ./node_modules/@umijs/babel-preset-umi/node_modules/@babel/runtime/helpers/assertThisInitialized.js
var assertThisInitialized = __webpack_require__(374);
var assertThisInitialized_default = /*#__PURE__*/__webpack_require__.n(assertThisInitialized);
// EXTERNAL MODULE: ./node_modules/@umijs/babel-preset-umi/node_modules/@babel/runtime/helpers/inherits.js
var inherits = __webpack_require__(821);
var inherits_default = /*#__PURE__*/__webpack_require__.n(inherits);
// EXTERNAL MODULE: ./node_modules/@umijs/babel-preset-umi/node_modules/@babel/runtime/helpers/createSuper.js
var createSuper = __webpack_require__(400);
var createSuper_default = /*#__PURE__*/__webpack_require__.n(createSuper);
// EXTERNAL MODULE: external "window.ReactDom"
var external_window_ReactDom_ = __webpack_require__(167);
var external_window_ReactDom_default = /*#__PURE__*/__webpack_require__.n(external_window_ReactDom_);
;// CONCATENATED MODULE: ./src/tiny-image-editor/src/components/setting/Portal.tsx
// eslint-disable-next-line @typescript-eslint/ban-types
var Portal = /*#__PURE__*/function (_React$Component) {
inherits_default()(Portal, _React$Component);
var _super = createSuper_default()(Portal);
function Portal(props) {
var _this;
classCallCheck_default()(this, Portal);
_this = _super.call(this, props);
defineProperty_default()(assertThisInitialized_default()(_this), "container", null);
_this.container = null;
_this.getContainer = _this.getContainer.bind(assertThisInitialized_default()(_this));
return _this;
}
createClass_default()(Portal, [{
key: "componentDidMount",
value: function componentDidMount() {
var _this2 = this;
this.container = this.props.container || document.body;
this.forceUpdate(function () {
if (_this2.props.onRendered) {
_this2.props.onRendered();
}
});
}
}, {
key: "componentDidUpdate",
value: function componentDidUpdate(prevProps) {
if (prevProps.container !== this.props.container) {
this.container = this.props.container || null;
}
}
}, {
key: "getContainer",
value: function getContainer() {
return this.container;
}
}, {
key: "render",
value: function render() {
var children = this.props.children;
return this.container && children ? /*#__PURE__*/external_window_ReactDom_default().createPortal(children, this.container) : null;
}
}]);
return Portal;
}((external_window_React_default()).Component);
;// CONCATENATED MODULE: ./src/tiny-image-editor/src/components/setting/Popover.tsx
var _excluded = ["className", "style", "children", "trigger", "visible", "popoverClassName", "popoverStyle", "showArrow", "content", "placement", "usePortal", "portalContainer", "positionFixed", "modifiers", "outlineColor", "backgroundColor", "scheduleUpdate", "onOpenChange", "maskClosable"];
/* eslint-disable @typescript-eslint/ban-types */
/* eslint-disable @typescript-eslint/no-unused-expressions */
var ArrowWrapper = function ArrowWrapper(props) {
return /*#__PURE__*/external_window_React_default().createElement("div", {
className: "popper__arrow",
style: defineProperty_default()({}, 'border' + (((props === null || props === void 0 ? void 0 : props.arrowPlacement[0]) || '').toLocaleUpperCase() + (props.arrowPlacement || '').substring(1)) + 'Color', props.backgroundColor)
}, props.children);
};
var Popover = function Popover(props) {
var popoverRef = (0,external_window_React_.useRef)(null);
var targetRef = (0,external_window_React_.useRef)(null);
var _useState = (0,external_window_React_.useState)(props.open),
_useState2 = slicedToArray_default()(_useState, 2),
open = _useState2[0],
setOpen = _useState2[1];
var className = props.className,
style = props.style,
children = props.children,
trigger = props.trigger,
visible = props.visible,
popoverClassName = props.popoverClassName,
popoverStyle = props.popoverStyle,
showArrow = props.showArrow,
content = props.content,
placement = props.placement,
usePortal = props.usePortal,
portalContainer = props.portalContainer,
positionFixed = props.positionFixed,
modifiers = props.modifiers,
outlineColor = props.outlineColor,
backgroundColor = props.backgroundColor,
scheduleUpdate = props.scheduleUpdate,
onOpenChange = props.onOpenChange,
_props$maskClosable = props.maskClosable,
maskClosable = _props$maskClosable === void 0 ? true : _props$maskClosable,
restProps = objectWithoutProperties_default()(props, _excluded);
var domProps = removeNonHTMLProps(restProps, ['popoverClassName', 'popoverStyle', 'showArrow', 'content', 'usePortal', 'positionFixed', 'outlineColor', 'backgroundColor', 'getPopoverRef', 'onOpenChange']);
var handleOpenChange = function handleOpenChange(openState) {
if (onOpenChange) {
onOpenChange(openState);
}
if (props.open !== undefined) {
setOpen(props.open);
} else {
setOpen(openState);
}
};
var handleClick = function handleClick(e) {
var _current, _current2;
if (!popoverRef || !targetRef) return;
if ((_current = popoverRef.current) !== null && _current !== void 0 && _current.contains(e.target) || (_current2 = targetRef.current) !== null && _current2 !== void 0 && _current2.contains(e.target)) {
return;
}
if (maskClosable) {
handleOpenChange(false);
}
};
var mouseEnter = function mouseEnter() {
var open = props.open,
onOpenChange = props.onOpenChange;
if (open !== undefined && onOpenChange === undefined) return;
if (trigger === 'hover') {
handleOpenChange(true);
}
};
var mouseLeave = function mouseLeave() {
var open = props.open,
onOpenChange = props.onOpenChange;
if (open !== undefined && onOpenChange === undefined) return;
if (trigger === 'hover') {
handleOpenChange(false);
}
};
var handleVisiblePopover = function handleVisiblePopover(e) {
e.nativeEvent.stopImmediatePropagation();
if (trigger === 'click') {
handleOpenChange(!open);
return;
}
if (trigger === 'focus') {
handleOpenChange(true);
}
};
(0,external_window_React_.useEffect)(function () {
if (props.getPopoverRef) {
props.getPopoverRef(popoverRef);
}
}, []);
(0,external_window_React_.useEffect)(function () {
if (trigger === 'click' || trigger === 'focus') {
document.body.addEventListener('click', handleClick, false);
}
return function () {
document.body.removeEventListener('click', handleClick, false);
};
}, [maskClosable, props.open]);
(0,external_window_React_.useEffect)(function () {
if (props.open !== undefined) {
handleOpenChange(props.open);
}
}, [props.open]);
/**
* 渲染 popover 弹层
*/
var renderPopper = function renderPopper() {
var strategy = positionFixed ? 'fixed' : 'absolute';
var defaultModifiers = [{
name: 'computeStyles',
options: {
gpuAcceleration: false // true by default
}
}, {
name: 'offset',
options: {
offset: [0, 10]
}
}];
// 获取（placement）方向并把首字母设置成大写
var direction = function direction(placement) {
if (placement) {
return placement.split('-')[0].toString().replace(/^\S/, function (s) {
return s.toUpperCase();
});
}
};
// 设置popover的边框和（arrow）三角形的边框颜色
var getOutlineColor = function getOutlineColor(type) {
if (type === 'content' && outlineColor) {
return {
borderColor: outlineColor
};
}
if (type === 'arrow' && outlineColor) {
return defineProperty_default()({}, "border".concat(direction(placement), "Color"), outlineColor);
}
};
// 设置popover的背景
var getBackgroundColor = function getBackgroundColor() {
if (backgroundColor) {
return {
color: '#fff',
background: backgroundColor
// border: 'none',
};
}
};
// 动态设置三角的背景色
var arrowPlacement = placement.split('-')[0];
var popperContent = open && /*#__PURE__*/external_window_React_default().createElement(external_window_ReactPopper_.Popper, {
placement: placement,
modifiers: [].concat(defaultModifiers, toConsumableArray_default()(modifiers ? modifiers : [])),
strategy: strategy
}, function (_ref3) {
var ref = _ref3.ref,
style = _ref3.style,
placement = _ref3.placement,
arrowProps = _ref3.arrowProps,
update = _ref3.update;
// eslint-disable-next-line react-hooks/rules-of-hooks
(0,external_window_React_.useEffect)(function () {
if (open) {
update();
}
}, [scheduleUpdate]);
return /*#__PURE__*/external_window_React_default().createElement("div", {
className: classnames_default()('tie-popover__popper', popoverClassName, {
'tie-popover__popper-background': backgroundColor
}),
style: objectSpread2_default()(objectSpread2_default()(objectSpread2_default()(objectSpread2_default()({}, style), popoverStyle), getOutlineColor('content')), getBackgroundColor()),
ref: ref
// eslint-disable-next-line react/no-unknown-property
,
"x-placement": placement,
onMouseEnter: mouseEnter,
onMouseLeave: mouseLeave
}, /*#__PURE__*/external_window_React_default().createElement("div", {
ref: popoverRef
}, open && /*#__PURE__*/external_window_React_default().createElement("div", {
className: "tie-popover__content"
}, /*#__PURE__*/external_window_React_default().createElement("span", null, content)), showArrow && /*#__PURE__*/external_window_React_default().createElement(ArrowWrapper, {
arrowPlacement: arrowPlacement,
backgroundColor: backgroundColor
}, /*#__PURE__*/external_window_React_default().createElement("div", {
"data-popper-arrow": true,
className: "tie-popper__arrow popper__arrow"
// eslint-disable-next-line react/no-unknown-property
,
"x-arrow": "true",
style: objectSpread2_default()(objectSpread2_default()({}, arrowProps.style), getOutlineColor('arrow')),
ref: arrowProps.ref
}))));
});
return usePortal ? /*#__PURE__*/external_window_React_default().createElement(Portal, {
container: portalContainer
}, popperContent) : popperContent;
};
// 解决children为Button元素且禁用的时候鼠标事件失效的问题
var getDisabledCompatibleChildren = function getDisabledCompatibleChildren(element) {
if (element.type.__BRICKS_BUTTON && element.props.disabled) {
var displayStyle = element.props.style && element.props.style.display ? element.props.style.display : 'inline-block';
var child = /*#__PURE__*/external_window_React_default().cloneElement(element, {
style: objectSpread2_default()(objectSpread2_default()({}, element.props.style), {}, {
pointerEvents: 'none'
})
});
return /*#__PURE__*/external_window_React_default().createElement("span", {
style: {
display: displayStyle,
cursor: 'not-allowed'
}
}, child);
}
return element;
};
return /*#__PURE__*/external_window_React_default().createElement((external_window_React_default()).Fragment, null, visible ? /*#__PURE__*/external_window_React_default().createElement("div", extends_default()({
className: classnames_default()('tie-popover', className)
}, domProps, {
style: style
}), /*#__PURE__*/external_window_React_default().createElement(external_window_ReactPopper_.Manager, null, /*#__PURE__*/external_window_React_default().createElement(external_window_ReactPopper_.Reference, null, function (_ref4) {
var ref = _ref4.ref;
return /*#__PURE__*/external_window_React_default().createElement("div", {
ref: targetRef,
className: "tie-popover__target"
}, /*#__PURE__*/external_window_React_default().createElement("div", {
ref: ref
}, external_window_React_default().Children.map(children, function (child) {
var ele = child;
ele = getDisabledCompatibleChildren(ele);
if (trigger === 'click') {
return /*#__PURE__*/external_window_React_default().cloneElement(ele, {
onClick: function onClick(e) {
handleVisiblePopover(e);
ele.props.onClick && ele.props.onClick();
}
});
}
if (trigger === 'focus') {
return /*#__PURE__*/external_window_React_default().cloneElement(ele, {
onFocus: function onFocus(e) {
handleVisiblePopover(e);
ele.props.onFocus && ele.props.onFocus();
}
});
}
if (trigger === 'hover') {
return /*#__PURE__*/external_window_React_default().cloneElement(ele, {
onMouseEnter: function onMouseEnter() {
mouseEnter();
ele.props.onMouseEnter && ele.props.onMouseEnter();
},
onMouseLeave: function onMouseLeave() {
mouseLeave();
ele.props.onMouseLeave && ele.props.onMouseLeave();
}
});
}
return ele;
})));
}), renderPopper())) : children);
};
Popover.defaultProps = {
visible: true,
trigger: 'hover',
placement: 'bottom',
showArrow: true,
usePortal: true,
modifiers: []
};
/* harmony default export */ var setting_Popover = (Popover);
;// CONCATENATED MODULE: ./src/tiny-image-editor/src/components/setting/Paint.tsx
/* eslint-disable @typescript-eslint/no-unused-vars */
/* eslint-disable @typescript-eslint/no-unused-expressions */
var Paint = function Paint(_ref) {
var children = _ref.children,
_ref$open = _ref.open,
open = _ref$open === void 0 ? false : _ref$open,
type = _ref.type,
onChange = _ref.onChange;
var handleChange = function handleChange(type, 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-paint-content"
}, /*#__PURE__*/external_window_React_default().createElement("div", {
className: "tie-image-editor_tool-paint-size-wrapper"
}, (type === MENU_TYPE_ENUM.text ? paintConfig.fontSizes : paintConfig.sizes).map(function (size, index) {
return /*#__PURE__*/external_window_React_default().createElement("div", {
onClick: function onClick() {
return handleChange(IPaintTypes.size, size);
},
key: size,
className: "tie-image-editor_tool-paint-size",
style: {
width: 10 + index * 5,
height: 10 + index * 5
}
});
})), /*#__PURE__*/external_window_React_default().createElement("div", {
className: "tie-image-editor_tool-paint-color-wrapper"
}, paintConfig.colors.map(function (color) {
return /*#__PURE__*/external_window_React_default().createElement("div", {
onClick: function onClick() {
return handleChange(IPaintTypes.color, color);
},
key: color,
className: "tie-image-editor_tool-paint-color",
style: {
background: color
}
});
}))),
placement: "bottom",
open: open
}, /*#__PURE__*/external_window_React_default().createElement("div", null, children));
};
/* harmony default export */ var setting_Paint = (Paint);
// EXTERNAL MODULE: external "window.Fabric"
var external_window_Fabric_ = __webpack_require__(128);
;// CONCATENATED MODULE: ./src/tiny-image-editor/src/helpers/Arrow.ts
/* eslint-disable no-param-reassign */
/** 自定义箭头 */
var Arrow = external_window_Fabric_.fabric.util.createClass(external_window_Fabric_.fabric.Line, {
type: 'arrow',
superType: 'drawing',
initialize: function initialize(points, options) {
if (!points) {
var _options = options,
x1 = _options.x1,
x2 = _options.x2,
y1 = _options.y1,
y2 = _options.y2;
points = [x1, y1, x2, y2];
}
options = options || {};
this.callSuper('initialize', points, options);
},
_render: function _render(ctx) {
this.callSuper('_render', ctx);
ctx.save();
var xDiff = this.x2 - this.x1;
var yDiff = this.y2 - this.y1;
var angle = Math.atan2(yDiff, xDiff);
ctx.translate((this.x2 - this.x1) / 2, (this.y2 - this.y1) / 2);
ctx.rotate(angle);
ctx.beginPath();
/** 箭头上的三角形大小 */
ctx.moveTo(this.strokeWidth * 2, 0);
ctx.lineTo(-this.strokeWidth * 2, this.strokeWidth * 2);
ctx.lineTo(-this.strokeWidth * 2, -this.strokeWidth * 2);
ctx.closePath();
ctx.fillStyle = this.stroke;
ctx.fill();
ctx.restore();
}
});
Arrow.fromObject = function (options, callback) {
var x1 = options.x1,
x2 = options.x2,
y1 = options.y1,
y2 = options.y2;
return callback(new external_window_Fabric_.fabric.Arrow([x1, y1, x2, y2], options));
};
/* harmony default export */ var helpers_Arrow = (Arrow);
;// CONCATENATED MODULE: ./src/tiny-image-editor/src/components/Arrow.tsx
/* eslint-disable @typescript-eslint/no-unused-expressions */
var useArrow = function useArrow() {
var _useContext = (0,external_window_React_.useContext)(EditorContext),
currentMenu = _useContext.currentMenu,
setCurrentMenu = _useContext.setCurrentMenu,
canvasInstanceRef = _useContext.canvasInstanceRef,
canvasIsRender = _useContext.canvasIsRender,
currentMenuRef = _useContext.currentMenuRef,
historyRef = _useContext.historyRef;
var isDrawingLine = (0,external_window_React_.useRef)(false);
var pointer = (0,external_window_React_.useRef)({
x: 0,
y: 0
});
var pointerPoints = (0,external_window_React_.useRef)([]);
var lineToDraw = (0,external_window_React_.useRef)(null);
var paintConfigValue = (0,external_window_React_.useRef)({
color: paintConfig.colors[0],
size: paintConfig.sizes[0]
});
var initArrow = function initArrow() {
var canvas = canvasInstanceRef.current;
if (!canvas) {
return;
}
canvas.on('mouse:down', function (o) {
if (canvas.getActiveObject() || currentMenuRef.current !== MENU_TYPE_ENUM.arrow) {
return;
}
canvas.discardActiveObject();
canvas.getObjects().forEach(function (obj) {
obj.selectable = false;
obj.hasControls = false;
});
canvas.requestRenderAll();
isDrawingLine.current = true;
pointer.current = canvas.getPointer(o.e);
pointerPoints.current = [pointer.current.x, pointer.current.y, pointer.current.x, pointer.current.y];
var lineToDrawNew = new helpers_Arrow(pointerPoints.current, {
strokeWidth: paintConfigValue.current.size,
stroke: paintConfigValue.current.color,
id: new Date().valueOf() + '_' + Math.random() * 4
});
// lineToDrawNew.selectable = false;
// lineToDrawNew.evented = false;
lineToDrawNew.strokeUniform = true;
lineToDraw.current = lineToDrawNew;
console.log("lineToDrawNew", lineToDrawNew);
canvas.add(lineToDrawNew);
});
canvas.on('mouse:move', function (o) {
if (!canvas.getActiveObject() && currentMenuRef.current === MENU_TYPE_ENUM.rect) {
canvas.setCursor(CURSOR.crosshair);
}
if (canvas.getActiveObject() || currentMenuRef.current !== MENU_TYPE_ENUM.arrow || !isDrawingLine.current || !lineToDraw.current) {
canvas.renderAll();
return;
}
pointer.current = canvas.getPointer(o.e);
if (o.e.shiftKey) {
// calc angle
var startX = pointerPoints.current[0];
var startY = pointerPoints.current[1];
var x2 = pointer.current.x - startX;
var y2 = pointer.current.y - startY;
var r = Math.sqrt(x2 * x2 + y2 * y2);
var angle = Math.atan2(y2, x2) / Math.PI * 180;
angle = parseInt('' + (angle + 7.5) % 360 / 15) * 15;
var cosx = r * Math.cos(angle * Math.PI / 180);
var sinx = r * Math.sin(angle * Math.PI / 180);
lineToDraw.current.set({
x2: cosx + startX,
y2: sinx + startY
});
} else {
if (!lineToDraw.current) {
return;
}
lineToDraw.current.set({
x2: pointer.current.x,
y2: pointer.current.y
});
}
canvas.renderAll();
});
canvas.on('mouse:up', function () {
if (currentMenuRef.current !== MENU_TYPE_ENUM.arrow || !lineToDraw.current || !isDrawingLine.current) return;
lineToDraw.current.setCoords();
isDrawingLine.current = false;
// canvas.discardActiveObject();
if (pointer.current.x === pointerPoints.current[0] && pointer.current.y === pointerPoints.current[1]) {
/** 无效矩形 */
canvas.remove(lineToDraw.current);
canvas.requestRenderAll();
historyRef.current.updateCanvasState(ACTION.add, true, false);
} else {
/** 有效矩形 */
canvas.setActiveObject(lineToDraw.current);
historyRef.current.updateCanvasState(ACTION.add, true, true);
}
});
};
(0,external_window_React_.useEffect)(function () {
if (canvasInstanceRef.current && canvasIsRender) {
initArrow();
}
}, [canvasInstanceRef, canvasIsRender]);
var handleArrowTrigger = function handleArrowTrigger() {
setCurrentMenu(currentMenu === MENU_TYPE_ENUM.arrow ? MENU_TYPE_ENUM.default : MENU_TYPE_ENUM.arrow);
};
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('stroke', value);
} else {
paintConfigValue.current.size = value;
activeObject && activeObject.set('strokeWidth', value);
}
canvas.renderAll();
};
return {
handleArrowTrigger: handleArrowTrigger,
handlePaintChange: handlePaintChange,
currentMenu: currentMenu
};
};
/** 箭头 */
var Arrow_Arrow = function Arrow() {
var _useContext2 = (0,external_window_React_.useContext)(EditorContext),
_useContext2$lang = _useContext2.lang,
lang = _useContext2$lang === void 0 ? LANG.en : _useContext2$lang;
var _useArrow = useArrow(),
handleArrowTrigger = _useArrow.handleArrowTrigger,
handlePaintChange = _useArrow.handlePaintChange,
currentMenu = _useArrow.currentMenu;
return /*#__PURE__*/external_window_React_default().createElement("div", {
className: classnames_default()('tie-image-editor_tool-item tie-image-editor_tool-arrow', defineProperty_default()({}, 'tie-image-editor_tool-item--checked', currentMenu === MENU_TYPE_ENUM.arrow))
}, /*#__PURE__*/external_window_React_default().createElement(setting_Paint, {
open: currentMenu === MENU_TYPE_ENUM.arrow,
onChange: handlePaintChange
}, /*#__PURE__*/external_window_React_default().createElement(setting_Popover, {
content: MENU_TYPE_TEXT.arrow[lang],
placement: "top"
}, /*#__PURE__*/external_window_React_default().createElement("i", {
className: classnames_default()('tie-image-editor_icon'),
onClick: handleArrowTrigger
}))));
};
;// CONCATENATED MODULE: ./src/tiny-image-editor/src/components/Circle.tsx
/* eslint-disable @typescript-eslint/no-unused-expressions */
var useCircle = function useCircle() {
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;
var startCircle = (0,external_window_React_.useRef)(false);
var circlePoint = (0,external_window_React_.useRef)({
x: 9,
y: 0
});
var currentCircle = (0,external_window_React_.useRef)(null);
var paintConfigValue = (0,external_window_React_.useRef)({
color: paintConfig.colors[0],
size: paintConfig.sizes[0]
});
var initCircle = function initCircle() {
var canvas = canvasInstanceRef.current;
if (!canvas) {
return;
}
canvas.on('mouse:down', function (o) {
if (canvas.getActiveObject() || currentMenuRef.current !== MENU_TYPE_ENUM.circle) {
return;
}
startCircle.current = true;
var pointer = canvas.getPointer(o.e);
circlePoint.current.x = pointer.x;
circlePoint.current.y = pointer.y;
currentCircle.current = new external_window_Fabric_.fabric.Circle({
left: circlePoint.current.x,
top: circlePoint.current.y,
originX: 'left',
originY: 'top',
radius: pointer.x - circlePoint.current.x,
angle: 0,
fill: '',
stroke: paintConfigValue.current.color,
strokeWidth: paintConfigValue.current.size
});
canvas.add(currentCircle.current);
});
canvas.on('mouse:move', function (o) {
if (!canvas.getActiveObject() && currentMenuRef.current === MENU_TYPE_ENUM.circle) {
canvas.setCursor(CURSOR.crosshair);
}
if (!startCircle.current || currentMenuRef.current !== MENU_TYPE_ENUM.circle) {
canvas.renderAll();
return;
}
var pointer = canvas.getPointer(o.e);
var radius = Math.max(Math.abs(circlePoint.current.y - pointer.y), Math.abs(circlePoint.current.x - pointer.x)) / 2;
if (radius > currentCircle.current.strokeWidth) {
radius -= currentCircle.current.strokeWidth / 2;
}
currentCircle.current.set({
radius: radius
});
if (circlePoint.current.x > pointer.x) {
currentCircle.current.set({
originX: 'right'
});
} else {
currentCircle.current.set({
originX: 'left'
});
}
if (circlePoint.current.y > pointer.y) {
currentCircle.current.set({
originY: 'bottom'
});
} else {
currentCircle.current.set({
originY: 'top'
});
}
canvas.renderAll();
});
canvas.on('mouse:up', function (o) {
if (!currentCircle.current || currentMenuRef.current !== MENU_TYPE_ENUM.circle) {
return;
}
var pointer = canvas.getPointer(o.e);
if (pointer.x === currentCircle.current.left && pointer.y === currentCircle.current.top) {
/** 无效 */
canvas.remove(currentCircle.current);
canvas.requestRenderAll();
historyRef.current.updateCanvasState(ACTION.add, true, false);
} else {
/** 有效 */
canvas.setActiveObject(currentCircle.current);
historyRef.current.updateCanvasState(ACTION.add, true, true);
}
startCircle.current = false;
currentCircle.current = null;
});
};
(0,external_window_React_.useEffect)(function () {
var canvas = canvasInstanceRef.current;
if (canvas && canvasIsRender) {
initCircle();
}
}, [canvasInstanceRef, canvasIsRender]);
var handleDrawCircle = function handleDrawCircle() {
setCurrentMenu(currentMenuRef.current === MENU_TYPE_ENUM.circle ? MENU_TYPE_ENUM.default : MENU_TYPE_ENUM.circle);
};
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('stroke', value);
} else {
paintConfigValue.current.size = value;
activeObject && activeObject.set('strokeWidth', value);
}
canvas.renderAll();
};
return {
handleDrawCircle: handleDrawCircle,
handlePaintChange: handlePaintChange,
currentMenu: currentMenu
};
};
/** 圆形 */
var Circle = function Circle() {
var _useContext2 = (0,external_window_React_.useContext)(EditorContext),
_useContext2$lang = _useContext2.lang,
lang = _useContext2$lang === void 0 ? LANG.en : _useContext2$lang;
var _useCircle = useCircle(),
handleDrawCircle = _useCircle.handleDrawCircle,
handlePaintChange = _useCircle.handlePaintChange,
currentMenu = _useCircle.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-circle', defineProperty_default()({}, 'tie-image-editor_tool-item--checked', currentMenu === MENU_TYPE_ENUM.circle))
}, /*#__PURE__*/external_window_React_default().createElement(setting_Paint, {
open: currentMenu === MENU_TYPE_ENUM.circle,
onChange: handlePaintChange
}, /*#__PURE__*/external_window_React_default().createElement(setting_Popover, {
content: MENU_TYPE_TEXT.circle[lang],
placement: "top"
}, /*#__PURE__*/external_window_React_default().createElement("i", {
className: classnames_default()('tie-image-editor_icon'),
onClick: handleDrawCircle
})))));
};
;// CONCATENATED MODULE: ./src/tiny-image-editor/src/components/Control.tsx
var deleteIcon = "data:image/svg+xml,%3C%3Fxml version='1.0' encoding='utf-8'%3F%3E%3C!DOCTYPE svg PUBLIC '-//W3C//DTD SVG 1.1//EN' 'http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd'%3E%3Csvg version='1.1' id='Ebene_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' width='595.275px' height='595.275px' viewBox='200 215 230 470' xml:space='preserve'%3E%3Ccircle style='fill:%23F44336;' cx='299.76' cy='439.067' r='218.516'/%3E%3Cg%3E%3Crect x='267.162' y='307.978' transform='matrix(0.7071 -0.7071 0.7071 0.7071 -222.6202 340.6915)' style='fill:white;' width='65.545' height='262.18'/%3E%3Crect x='266.988' y='308.153' transform='matrix(0.7071 0.7071 -0.7071 0.7071 398.3889 -83.3116)' style='fill:white;' width='65.544' height='262.179'/%3E%3C/g%3E%3C/svg%3E";
var useControl = function useControl() {
var _useContext = (0,external_window_React_.useContext)(EditorContext),
canvasInstanceRef = _useContext.canvasInstanceRef,
canvasIsRender = _useContext.canvasIsRender,
historyRef = _useContext.historyRef;
/** 初始化控制器 */
var initControl = function initControl() {
var img = document.createElement('img');
img.src = deleteIcon;
external_window_Fabric_.fabric.Object.prototype.transparentCorners = false;
external_window_Fabric_.fabric.Object.prototype.cornerColor = 'blue';
external_window_Fabric_.fabric.Object.prototype.cornerStyle = 'circle';
function deleteObject(eventData, transform) {
var target = transform.target;
var canvas = target.canvas;
canvas.remove(target);
canvas.requestRenderAll();
historyRef.current.updateCanvasState(ACTION.delete);
return true;
}
function renderIcon(ctx, left, top, styleOverride, fabricObject) {
var size = 24;
ctx.save();
ctx.translate(left, top);
ctx.rotate(external_window_Fabric_.fabric.util.degreesToRadians(fabricObject.angle));
ctx.drawImage(img, -size / 2, -size / 2, size, size);
ctx.restore();
}
external_window_Fabric_.fabric.Object.prototype.controls.deleteControl = new external_window_Fabric_.fabric.Control({
x: 0.5,
y: -0.5,
offsetY: 16,
cursorStyle: 'pointer',
mouseUpHandler: deleteObject,
render: renderIcon
});
};
(0,external_window_React_.useEffect)(function () {
if (canvasInstanceRef.current && canvasIsRender) {
initControl();
}
}, [canvasInstanceRef, canvasIsRender]);
};
/** 控制器 */
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/components/Download.tsx
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
// 其他属性可根据需要添加
};
// 如果是文本元素，还可以获取文本内容
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);
});
// 打印标注信息
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);
}
}
};
// 准备请求体数据
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
};
// 将数据转换为 JSON 字符串
var jsonData = JSON.stringify(data);
// 发送请求并传递请求体数据
xhr.send(jsonData);
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() {
var canvas = canvasInstanceRef.current;
if (!canvas) {
return;
}
canvas.selection = false;
canvas.defaultCursor = 'grab';
canvas.getObjects().forEach(function (obj) {
obj.selectable = false;
});
canvas.requestRenderAll();
};
var startDring = function startDring() {
var canvas = canvasInstanceRef.current;
if (!canvas) {
return;
}
console.log('startDring');
setCurrentMenu(MENU_TYPE_ENUM.drag);
canvas.defaultCursor = 'grab';
canvas.renderAll();
};
var endDring = function endDring() {
var canvas = canvasInstanceRef.current;
if (!canvas) {
return;
}
setCurrentMenu(MENU_TYPE_ENUM.default);
canvas.defaultCursor = 'default';
canvas.isDragging = false;
canvas.selection = false;
canvas.renderAll();
};
// 拖拽模式;
var initDring = function initDring() {
var canvas = canvasInstanceRef.current;
if (!canvas) {
return;
}
canvas.on('mouse:down', function (opt) {
var evt = opt.e;
if (evt.altKey || dragModeRef.current) {
canvas.defaultCursor = 'grabbing';
canvas.discardActiveObject();
_setDring();
canvas.selection = false;
canvas.isDragging = true;
canvas.lastPosX = evt.clientX;
canvas.lastPosY = evt.clientY;
canvas.requestRenderAll();
}
});
canvas.on('mouse:move', function (opt) {
if (canvas.isDragging) {
canvas.discardActiveObject();
canvas.defaultCursor = 'grabbing';
var e = opt.e;
if (!canvas.viewportTransform) return;
var vpt = canvas.viewportTransform;
vpt[4] += e.clientX - canvas.lastPosX;
vpt[5] += e.clientY - canvas.lastPosY;
canvas.lastPosX = e.clientX;
canvas.lastPosY = e.clientY;
canvas.requestRenderAll();
}
});
canvas.on('mouse:up', function () {
if (!canvas.viewportTransform || !dragModeRef.current) return;
canvas.setViewportTransform(this.viewportTransform);
canvas.isDragging = false;
canvas.selection = true;
canvas.getObjects().forEach(function (obj) {
if (obj.id !== WORK_SPACE_ID && obj.hasControls) {
obj.selectable = true;
}
});
canvas.defaultCursor = 'default';
canvas.requestRenderAll();
});
};
var handleWrapperKeyDown = function handleWrapperKeyDown(e) {
/** 空格拖拽功能 */
var canvas = canvasInstanceRef.current;
if (e.keyCode === 32 && canvas && !dragModeRef.current) {
startDring();
}
e.preventDefault();
};
var handleWrapperKeyUp = function handleWrapperKeyUp(e) {
/** 结束空格拖拽功能 */
var canvas = canvasInstanceRef.current;
if (e.keyCode === 32 && canvas) {
endDring();
}
};
(0,external_window_React_.useEffect)(function () {
if (canvasInstanceRef.current && canvasIsRender) {
initDring();
wrapperInstanceRef.current.tabIndex = 1000;
wrapperInstanceRef.current.addEventListener('keydown', handleWrapperKeyDown, false);
wrapperInstanceRef.current.addEventListener('keyup', handleWrapperKeyUp, false);
}
return function () {
var canvas = canvasInstanceRef.current;
if (canvas && wrapperInstanceRef.current) {
var _wrapperInstanceRef$c, _wrapperInstanceRef$c2;
(_wrapperInstanceRef$c = wrapperInstanceRef.current) === null || _wrapperInstanceRef$c === void 0 || _wrapperInstanceRef$c.removeEventListener('keydown', handleWrapperKeyDown, false);
(_wrapperInstanceRef$c2 = wrapperInstanceRef.current) === null || _wrapperInstanceRef$c2 === void 0 || _wrapperInstanceRef$c2.removeEventListener('keyup', handleWrapperKeyUp, false);
}
};
}, [canvasInstanceRef, canvasIsRender]);
var handleMoving = function handleMoving() {
setCurrentMenu(currentMenu !== MENU_TYPE_ENUM.drag ? MENU_TYPE_ENUM.drag : MENU_TYPE_ENUM.default);
};
return {
handleMoving: handleMoving,
currentMenu: currentMenu
};
};
var Drag = function Drag() {
var _useContext2 = (0,external_window_React_.useContext)(EditorContext),
_useContext2$lang = _useContext2.lang,
lang = _useContext2$lang === void 0 ? LANG.en : _useContext2$lang;
var _useDrag = useDrag(),
handleMoving = _useDrag.handleMoving,
currentMenu = _useDrag.currentMenu;
return /*#__PURE__*/external_window_React_default().createElement("div", {
className: classnames_default()('tie-image-editor_tool-item tie-image-editor_tool-hand', defineProperty_default()({}, 'tie-image-editor_tool-item--checked', currentMenu === MENU_TYPE_ENUM.drag))
}, /*#__PURE__*/external_window_React_default().createElement(setting_Popover, {
content: MENU_TYPE_TEXT.drag[lang],
placement: "top"
}, /*#__PURE__*/external_window_React_default().createElement("i", {
className: classnames_default()('tie-image-editor_icon'),
onClick: handleMoving
})));
};
;// CONCATENATED MODULE: ./src/tiny-image-editor/src/components/Draw.tsx
/* eslint-disable @typescript-eslint/no-unused-expressions */
var useDraw = function useDraw() {
var _useContext = (0,external_window_React_.useContext)(EditorContext),
canvasInstanceRef = _useContext.canvasInstanceRef,
currentMenuRef = _useContext.currentMenuRef,
setCurrentMenu = _useContext.setCurrentMenu,
currentMenu = _useContext.currentMenu;
var paintConfigValue = (0,external_window_React_.useRef)({
color: paintConfig.colors[0],
size: paintConfig.sizes[0]
});
var initDraw = function initDraw() {
var canvas = canvasInstanceRef.current;
if (!canvas) {
return;
}
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);
}
brush.width = paintConfigValue.current.size;
brush.shadow = new external_window_Fabric_.fabric.Shadow({
blur: paintConfigValue.current.size,
offsetX: 0,
offsetY: 0,
affectStroke: true,
color: '#333'
});
};
var handleDrawTrigger = function handleDrawTrigger() {
var canvas = canvasInstanceRef.current;
if (!canvas) {
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/History.tsx
/* eslint-disable @typescript-eslint/no-unused-vars */
// import { Icon, Popover } from '@casstime/bricks';
var useHistory = function useHistory() {
var _useContext = (0,external_window_React_.useContext)(EditorContext),
canvasInstanceRef = _useContext.canvasInstanceRef,
canvasIsRender = _useContext.canvasIsRender,
currentMenuRef = _useContext.currentMenuRef,
initCanvasJson = _useContext.initCanvasJson,
unSaveHistory = _useContext.unSaveHistory;
var _useState = (0,external_window_React_.useState)([]),
_useState2 = slicedToArray_default()(_useState, 2),
history = _useState2[0],
setHistory = _useState2[1];
var _useState3 = (0,external_window_React_.useState)(''),
_useState4 = slicedToArray_default()(_useState3, 2),
currentId = _useState4[0],
setCurrentId = _useState4[1];
/**
* action:操作类型
* remove：是否移除最后一项
* append：是否追加最新项目
*/
var updateCanvasState = (0,external_window_React_.useCallback)(function (action) {
var remove = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
var append = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
if (!canvasInstanceRef.current || unSaveHistory.current) {
return;
}
var canvas = canvasInstanceRef.current;
try {
/** 列表为空 */
var jsonData = canvas.toJSON(stayRemain);
var canvasAsJson = JSON.stringify(jsonData);
var id = Date.now() + '_' + Math.floor(Math.random() * 10000);
var currentIndex = history.findIndex(function (_ref) {
var _ref$id = _ref.id,
hId = _ref$id === void 0 ? '' : _ref$id;
return hId === currentId;
});
/**
* （如果当前索引在中间，需要把索引后边的历史去掉）
* 1、根据remove决定是否移除最后一条
* 2、根据append决定是否追加一条
* 3、根据MAX_HISTORY_LEN，最多存 MAX_HISTORY_LEN 条历史
* */
var newHistory = history.slice(0, currentIndex + 1 - +remove).concat(append || !remove && !append ? [{
id: id,
data: canvasAsJson,
type: action !== ACTION.delete ? currentMenuRef.current : MENU_TYPE_ENUM.default,
action: action
}] : []);
setHistory(newHistory.slice(Math.max(0, history.length - MAX_HISTORY_LEN)));
setCurrentId(id);
} catch (error) {
console.error(error);
}
}, [history, currentId]);
var objectModified = (0,external_window_React_.useCallback)(function (e) {
if (e.target.id === WORK_SPACE_ID || e.action === undefined && e.e) {
return;
}
updateCanvasState(ACTION.modified);
}, [updateCanvasState]);
var objectAdd = (0,external_window_React_.useCallback)(function (e) {
if (e.action === undefined && e.e) {
return;
}
updateCanvasState(ACTION.add);
}, [updateCanvasState]);
(0,external_window_React_.useEffect)(function () {
var canvas = canvasInstanceRef.current;
if (!canvas) {
return;
}
if (canvas && canvasIsRender) {
canvas.on('object:modified', objectModified);
canvas.on('object:added', objectAdd);
}
return function () {
canvas.off('object:modified', objectModified);
canvas.off('object:added', objectAdd);
};
}, [canvasInstanceRef, canvasIsRender, objectModified, objectAdd]);
var renderNewCanvas = (0,external_window_React_.useCallback)(function () {
var _history$find;
var id = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '';
var canvas = canvasInstanceRef.current;
if (!canvas) {
return;
}
if (id === currentId) {
return;
}
var newCanvasStr = ((_history$find = history.find(function (_ref2) {
var cId = _ref2.id;
return cId === id;
})) === null || _history$find === void 0 ? void 0 : _history$find.data) || initCanvasJson.current;
unSaveHistory.current = true;
canvas.loadFromJSON(newCanvasStr, function () {
canvas.renderAll();
unSaveHistory.current = false;
});
setCurrentId(id);
}, [currentId, history]);
/** 前进 */
var handleRedo = (0,external_window_React_.useCallback)(function () {
if (!canvasInstanceRef.current || !history.length) {
return;
}
var newId = '';
if (!currentId) {
var _history$;
newId = (_history$ = history[0]) === null || _history$ === void 0 ? void 0 : _history$.id;
} else {
history.forEach(function (_ref3, index) {
var id = _ref3.id;
if (id === currentId) {
var _history;
newId = (_history = history[index + 1]) === null || _history === void 0 ? void 0 : _history.id;
}
});
}
renderNewCanvas(newId);
}, [currentId, history]);
/** 后退 */
var handleUndo = (0,external_window_React_.useCallback)(function () {
if (!canvasInstanceRef.current || !history.length) {
return;
}
var newId = '';
history.forEach(function (_ref4, index) {
var id = _ref4.id;
if (id === currentId) {
var _history2;
newId = (_history2 = history[index - 1]) === null || _history2 === void 0 ? void 0 : _history2.id;
}
});
renderNewCanvas(newId);
}, [currentId, history]);
return {
history: history,
currentId: currentId,
renderNewCanvas: renderNewCanvas,
handleRedo: handleRedo,
handleUndo: handleUndo,
updateCanvasState: updateCanvasState
};
};
/** 历史 */
var History = /*#__PURE__*/(0,external_window_React_.forwardRef)(function (props, ref) {
var _history3, _history4;
var _useContext2 = (0,external_window_React_.useContext)(EditorContext),
_useContext2$lang = _useContext2.lang,
lang = _useContext2$lang === void 0 ? LANG.en : _useContext2$lang;
var _useHistory = useHistory(),
history = _useHistory.history,
currentId = _useHistory.currentId,
renderNewCanvas = _useHistory.renderNewCanvas,
handleRedo = _useHistory.handleRedo,
handleUndo = _useHistory.handleUndo,
updateCanvasState = _useHistory.updateCanvasState;
(0,external_window_React_.useImperativeHandle)(ref, function () {
return {
updateCanvasState: updateCanvasState
};
});
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-history', {
'tie-image-editor_tool-item--disabled': !history.length
})
}, /*#__PURE__*/external_window_React_default().createElement(setting_Popover, {
content: /*#__PURE__*/external_window_React_default().createElement("div", {
className: "tie-image-editor-history_pop"
}, !!history.length && /*#__PURE__*/external_window_React_default().createElement((external_window_React_default()).Fragment, null, /*#__PURE__*/external_window_React_default().createElement("div", {
className: "tie-image-editor-history_pop-title"
}, ACTION_TEXT.title[lang], /*#__PURE__*/external_window_React_default().createElement("span", {
className: "tie-image-editor-history_pop-len"
}, "\uFF08", history.length, "\uFF09")), /*#__PURE__*/external_window_React_default().createElement("div", {
onClick: function onClick() {
return renderNewCanvas('');
},
className: classnames_default()('tie-image-editor-history_pop-item', {
'tie-image-editor-history_pop-item--checked': !currentId
})
}, /*#__PURE__*/external_window_React_default().createElement("span", {
className: "tie-image-editor-history_pop-item-num"
}, "1."), ACTION_TEXT.init[lang], !currentId && /*#__PURE__*/external_window_React_default().createElement("i", {
className: "tie-image-editor-history_pop-item-icon"
}))), !history.length && /*#__PURE__*/external_window_React_default().createElement("span", null, ACTION_TEXT.placeholder[lang]), history.map(function (_ref5, index) {
var _ref5$action = _ref5.action,
action = _ref5$action === void 0 ? '' : _ref5$action,
id = _ref5.id,
type = _ref5.type;
return /*#__PURE__*/external_window_React_default().createElement("div", {
key: id,
onClick: function onClick() {
return renderNewCanvas(id);
},
className: classnames_default()('tie-image-editor-history_pop-item', {
'tie-image-editor-history_pop-item--checked': id === currentId
})
}, /*#__PURE__*/external_window_React_default().createElement("span", {
className: "tie-image-editor-history_pop-item-num"
}, index + 2, "."), !!ACTION_TEXT[action] && ACTION_TEXT[action][lang], ' ', !!MENU_TYPE_TEXT[type] && MENU_TYPE_TEXT[type][lang], id === currentId && /*#__PURE__*/external_window_React_default().createElement("i", {
className: "tie-image-editor-history_pop-item-icon"
}));
})),
placement: "bottom",
className: "tie-image-editor-history_target"
}, /*#__PURE__*/external_window_React_default().createElement("i", {
className: classnames_default()('tie-image-editor_icon')
}))), /*#__PURE__*/external_window_React_default().createElement("div", {
className: classnames_default()('tie-image-editor_tool-item tie-image-editor_tool-redo', {
'tie-image-editor_tool-item--disabled': !history.length || currentId === ((_history3 = history[history.length - 1]) === null || _history3 === void 0 ? void 0 : _history3.id)
})
}, /*#__PURE__*/external_window_React_default().createElement(setting_Popover, {
content: MENU_TYPE_TEXT.redo[lang],
placement: "top"
}, /*#__PURE__*/external_window_React_default().createElement("i", {
className: classnames_default()('tie-image-editor_icon'),
onClick: !history.length || currentId === ((_history4 = history[history.length - 1]) === null || _history4 === void 0 ? void 0 : _history4.id) ? undefined : handleRedo
}))), /*#__PURE__*/external_window_React_default().createElement("div", {
className: classnames_default()('tie-image-editor_tool-item tie-image-editor_tool-undo', {
'tie-image-editor_tool-item--disabled': !history.length || !currentId
})
}, /*#__PURE__*/external_window_React_default().createElement(setting_Popover, {
content: MENU_TYPE_TEXT.undo[lang],
placement: "top"
}, /*#__PURE__*/external_window_React_default().createElement("i", {
className: classnames_default()('tie-image-editor_icon'),
onClick: !history.length || !currentId ? undefined : handleUndo
}))));
});
History.displayName = 'History';
;// CONCATENATED MODULE: ./src/tiny-image-editor/src/components/Rect.tsx
/* eslint-disable @typescript-eslint/no-unused-expressions */
var useRect = function useRect() {
var _useContext = (0,external_window_React_.useContext)(EditorContext),
canvasInstanceRef = _useContext.canvasInstanceRef,
currentMenuRef = _useContext.currentMenuRef,
canvasIsRender = _useContext.canvasIsRender,
currentMenu = _useContext.currentMenu,
historyRef = _useContext.historyRef,
setCurrentMenu = _useContext.setCurrentMenu;
var startRect = (0,external_window_React_.useRef)(false);
var rectPoint = (0,external_window_React_.useRef)({
x: 9,
y: 0
});
var currentRect = (0,external_window_React_.useRef)(null);
var paintConfigValue = (0,external_window_React_.useRef)({
color: paintConfig.colors[0],
size: paintConfig.sizes[0]
});
/** 初始化矩形 */
var initRect = function initRect() {
var canvas = canvasInstanceRef.current;
if (!canvas) {
return;
}
canvas.on('mouse:down', function (o) {
if (canvas.getActiveObject() || currentMenuRef.current !== MENU_TYPE_ENUM.rect) {
return false;
}
startRect.current = true;
var pointer = canvas.getPointer(o.e);
rectPoint.current.x = pointer.x;
rectPoint.current.y = pointer.y;
currentRect.current = new external_window_Fabric_.fabric.Rect({
left: rectPoint.current.x,
top: rectPoint.current.y,
originX: 'left',
originY: 'top',
width: pointer.x - rectPoint.current.x,
height: pointer.y - rectPoint.current.y,
angle: 0,
fill: 'rgba(255,0,0,0)',
stroke: paintConfigValue.current.color,
strokeWidth: paintConfigValue.current.size,
transparentCorners: false
});
canvas.add(currentRect.current);
});
canvas.on('mouse:move', function (o) {
if (!canvas.getActiveObject() && currentMenuRef.current === MENU_TYPE_ENUM.rect) {
canvas.setCursor(CURSOR.crosshair);
}
if (!startRect.current || !currentRect.current || currentMenuRef.current !== MENU_TYPE_ENUM.rect) {
canvas.renderAll();
return;
}
var pointer = canvas.getPointer(o.e);
if (rectPoint.current.x > pointer.x) {
currentRect.current.set({
left: Math.abs(pointer.x)
});
}
if (rectPoint.current.y > pointer.y) {
currentRect.current.set({
top: Math.abs(pointer.y)
});
}
currentRect.current.set({
width: Math.abs(rectPoint.current.x - pointer.x)
});
currentRect.current.set({
height: Math.abs(rectPoint.current.y - pointer.y)
});
canvas.setCursor(CURSOR.crosshair);
canvas.renderAll();
});
canvas.on('mouse:up', function (o) {
if (!currentRect.current || currentMenuRef.current !== MENU_TYPE_ENUM.rect) {
return;
}
var pointer = canvas.getPointer(o.e);
if (pointer.x === currentRect.current.left && pointer.y === currentRect.current.top) {
/** 无效矩形 */
canvas.remove(currentRect.current);
canvas.requestRenderAll();
historyRef.current.updateCanvasState(ACTION.add, true, false);
} else {
/** 有效矩形 */
canvas.setActiveObject(currentRect.current);
historyRef.current.updateCanvasState(ACTION.add, true, true);
}
startRect.current = false;
currentRect.current = null;
});
};
(0,external_window_React_.useEffect)(function () {
if (canvasInstanceRef.current && canvasIsRender) {
initRect();
}
}, [canvasInstanceRef, canvasIsRender]);
var handleDrawRect = function handleDrawRect() {
var newMenu = currentMenuRef.current === MENU_TYPE_ENUM.rect ? MENU_TYPE_ENUM.default : MENU_TYPE_ENUM.rect;
console.log('currentMenuRef.current', newMenu, currentMenuRef.current);
setCurrentMenu(newMenu);
};
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('stroke', value);
} else {
paintConfigValue.current.size = value;
activeObject && activeObject.set('strokeWidth', value);
}
canvas.renderAll();
};
return {
handleDrawRect: handleDrawRect,
handlePaintChange: handlePaintChange,
currentMenu: currentMenu
};
};
var Rect = function Rect() {
var _useContext2 = (0,external_window_React_.useContext)(EditorContext),
_useContext2$lang = _useContext2.lang,
lang = _useContext2$lang === void 0 ? LANG.en : _useContext2$lang;
var _useRect = useRect(),
handleDrawRect = _useRect.handleDrawRect,
handlePaintChange = _useRect.handlePaintChange,
currentMenu = _useRect.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-rect', defineProperty_default()({}, 'tie-image-editor_tool-item--checked', currentMenu === MENU_TYPE_ENUM.rect))
}, /*#__PURE__*/external_window_React_default().createElement(setting_Paint, {
open: currentMenu === MENU_TYPE_ENUM.rect,
onChange: handlePaintChange
}, /*#__PURE__*/external_window_React_default().createElement(setting_Popover, {
content: MENU_TYPE_TEXT.rect[lang],
placement: "top"
}, /*#__PURE__*/external_window_React_default().createElement("i", {
className: classnames_default()('tie-image-editor_icon'),
onClick: handleDrawRect
})))));
};
;// CONCATENATED MODULE: ./src/tiny-image-editor/src/components/Reset.tsx
var useReset = function useReset() {
var _useContext = (0,external_window_React_.useContext)(EditorContext),
setCurrentMenu = _useContext.setCurrentMenu,
currentMenuRef = _useContext.currentMenuRef,
canvasInstanceRef = _useContext.canvasInstanceRef,
historyRef = _useContext.historyRef;
var handleReset = function handleReset() {
if (currentMenuRef.current !== MENU_TYPE_ENUM.reset) {
setCurrentMenu(MENU_TYPE_ENUM.reset);
}
var canvas = canvasInstanceRef.current;
if (!canvas) {
return;
}
/** 清空除了背景之外的图形 */
canvas.getObjects().forEach(function (o) {
if (o !== canvas.backgroundImage) {
canvas.remove(o);
}
});
/** 将缩放也重置 */
var center = canvas.getCenter();
canvas.zoomToPoint(new external_window_Fabric_.fabric.Point(center.left, center.top), 1);
/** 将画布拖回初始值位置 */
var viewportTransform = canvas.viewportTransform;
viewportTransform[4] = 0;
viewportTransform[5] = 0;
canvas.setViewportTransform(viewportTransform);
canvas.renderAll();
/** 保存历史 */
historyRef.current.updateCanvasState(ACTION.add);
};
return {
handleReset: handleReset
};
};
/** 重置 */
var Reset = function Reset() {
var _useContext2 = (0,external_window_React_.useContext)(EditorContext),
_useContext2$lang = _useContext2.lang,
lang = _useContext2$lang === void 0 ? LANG.en : _useContext2$lang;
var _useReset = useReset(),
handleReset = _useReset.handleReset;
return /*#__PURE__*/external_window_React_default().createElement("div", {
className: "tie-image-editor_tool-item tie-image-editor_tool-reset"
}, /*#__PURE__*/external_window_React_default().createElement(setting_Popover, {
content: MENU_TYPE_TEXT.reset[lang],
placement: "top"
}, /*#__PURE__*/external_window_React_default().createElement("i", {
className: "tie-image-editor_icon",
onClick: handleReset
})));
};
;// CONCATENATED MODULE: ./src/tiny-image-editor/src/components/setting/ScalePop.tsx
/* eslint-disable react/button-has-type */
/* eslint-disable @typescript-eslint/no-unused-vars */
/** 缩放参数 */
var ScalePop = function ScalePop(_ref) {
var children = _ref.children,
_ref$open = _ref.open,
open = _ref$open === void 0 ? false : _ref$open,
_ref$zoom = _ref.zoom,
zoom = _ref$zoom === void 0 ? 1 : _ref$zoom,
_ref$resetText = _ref.resetText,
resetText = _ref$resetText === void 0 ? "" : _ref$resetText,
onScaleUp = _ref.onScaleUp,
onScaleDown = _ref.onScaleDown,
onReset = _ref.onReset,
onOpenChange = _ref.onOpenChange;
return /*#__PURE__*/external_window_React_default().createElement(setting_Popover, {
content: /*#__PURE__*/external_window_React_default().createElement("div", {
className: "tie-image-editor_tool-scale-pop-content"
}, /*#__PURE__*/external_window_React_default().createElement("div", {
className: "tie-image-editor_tool-scale-pop-zoom"
}, +(zoom * 100).toFixed(0), "%"), /*#__PURE__*/external_window_React_default().createElement("div", {
className: "tie-image-editor_tool-scale-pop-icons"
}, /*#__PURE__*/external_window_React_default().createElement("div", {
className: "tie-image-editor_tool-item tie-image-editor_tool-subtract"
}, /*#__PURE__*/external_window_React_default().createElement("i", {
className: "tie-image-editor_tool-scale-pop-icon tie-image-editor_icon",
onClick: onScaleDown
})), /*#__PURE__*/external_window_React_default().createElement("div", {
className: "tie-image-editor_tool-item tie-image-editor_tool-add"
}, /*#__PURE__*/external_window_React_default().createElement("i", {
className: "tie-image-editor_tool-scale-pop-icon tie-image-editor_icon",
onClick: onScaleUp
}))), /*#__PURE__*/external_window_React_default().createElement("button", {
onClick: onReset
}, resetText)),
placement: "bottom-end",
open: open,
showArrow: false,
trigger: "click",
onOpenChange: onOpenChange
}, /*#__PURE__*/external_window_React_default().createElement("div", null, children));
};
/* harmony default export */ var setting_ScalePop = (ScalePop);
;// CONCATENATED MODULE: ./src/tiny-image-editor/src/components/Scale.tsx
/* eslint-disable @typescript-eslint/no-unused-vars */
// import { Popover } from '@casstime/bricks';
var useScale = function useScale() {
var _useContext = (0,external_window_React_.useContext)(EditorContext),
canvasInstanceRef = _useContext.canvasInstanceRef,
canvasIsRender = _useContext.canvasIsRender,
currentMenuRef = _useContext.currentMenuRef,
zoom = _useContext.zoom,
setZoom = _useContext.setZoom,
setCurrentMenu = _useContext.setCurrentMenu;
(0,external_window_React_.useEffect)(function () {
var canvas = canvasInstanceRef.current;
if (canvas && canvasIsRender) {
canvas.on('mouse:wheel', function (opt) {
var delta = opt.e.deltaY;
var newZoom = canvas.getZoom();
newZoom *= Math.pow(0.999, delta);
if (newZoom > 20) newZoom = 20;
if (newZoom < 0.01) newZoom = 0.01;
setZoom(newZoom);
// const center = canvas.getCenter();
// canvas.zoomToPoint(new fabric.Point(center.left, center.top), zoom);
canvas.requestRenderAll();
opt.e.preventDefault();
opt.e.stopPropagation();
});
}
}, [canvasInstanceRef, canvasIsRender]);
(0,external_window_React_.useEffect)(function () {
var canvas = canvasInstanceRef.current;
if (!canvas) {
return;
}
var center = canvas.getCenter();
canvas.zoomToPoint(new external_window_Fabric_.fabric.Point(center.left, center.top), zoom < 0 ? 0.01 : zoom);
if (currentMenuRef.current !== MENU_TYPE_ENUM.scale) {
setCurrentMenu(MENU_TYPE_ENUM.scale);
}
}, [zoom]);
/** 放大 */
var handleScaleUp = function handleScaleUp() {
if (!canvasInstanceRef.current) {
return;
}
var canvas = canvasInstanceRef.current;
var zoomRatio = canvas.getZoom();
zoomRatio += 0.05;
setZoom(zoomRatio);
// const center = canvas.getCenter();
// canvas.zoomToPoint(new fabric.Point(center.left, center.top), zoomRatio);
};
/** 缩小 */
var handleScaleDown = function handleScaleDown() {
if (!canvasInstanceRef.current) {
return;
}
var canvas = canvasInstanceRef.current;
var zoomRatio = canvas.getZoom();
zoomRatio -= 0.05;
setZoom(zoomRatio);
// const center = canvas.getCenter();
// canvas.zoomToPoint(new fabric.Point(center.left, center.top), zoomRatio < 0 ? 0.01 : zoomRatio);
};
var handleScaleTrigger = function handleScaleTrigger() {
setCurrentMenu(currentMenuRef.current === MENU_TYPE_ENUM.scale ? MENU_TYPE_ENUM.default : MENU_TYPE_ENUM.scale);
};
var handleReset = function handleReset() {
setZoom(1);
};
var handleOpenChange = (0,external_window_React_.useCallback)(function (open) {
setTimeout(function () {
/** 当前是缩放模式，点击其他区域才需要关闭缩放 */
if (MENU_TYPE_ENUM.scale === currentMenuRef.current) {
setCurrentMenu(!open ? MENU_TYPE_ENUM.default : MENU_TYPE_ENUM.scale);
}
});
}, []);
return {
zoom: zoom,
handleScaleUp: handleScaleUp,
handleScaleDown: handleScaleDown,
handleScaleTrigger: handleScaleTrigger,
handleReset: handleReset,
handleOpenChange: handleOpenChange
};
};
var Scale = function Scale() {
var _useContext2 = (0,external_window_React_.useContext)(EditorContext),
_useContext2$lang = _useContext2.lang,
lang = _useContext2$lang === void 0 ? LANG.en : _useContext2$lang,
currentMenu = _useContext2.currentMenu;
var _useScale = useScale(),
zoom = _useScale.zoom,
handleScaleDown = _useScale.handleScaleDown,
handleScaleUp = _useScale.handleScaleUp,
handleScaleTrigger = _useScale.handleScaleTrigger,
handleReset = _useScale.handleReset,
handleOpenChange = _useScale.handleOpenChange;
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-zoomIn', defineProperty_default()({}, 'tie-image-editor_tool-item--checked', currentMenu === MENU_TYPE_ENUM.scale))
}, /*#__PURE__*/external_window_React_default().createElement(setting_ScalePop, {
open: currentMenu === MENU_TYPE_ENUM.scale,
zoom: zoom,
onScaleDown: handleScaleDown,
onScaleUp: handleScaleUp,
onReset: handleReset,
onOpenChange: handleOpenChange,
resetText: MENU_TYPE_TEXT.reset[lang],
key: MENU_TYPE_ENUM.scale
}, /*#__PURE__*/external_window_React_default().createElement(setting_Popover, {
content: MENU_TYPE_TEXT.scale[lang],
placement: "top"
}, /*#__PURE__*/external_window_React_default().createElement("i", {
className: classnames_default()('tie-image-editor_icon'),
onClick: handleScaleTrigger
})))));
};
;// CONCATENATED MODULE: ./src/tiny-image-editor/src/components/Text.tsx
/* eslint-disable @typescript-eslint/no-unused-expressions */
// import { Popover } from '@casstime/bricks';
var useText = function useText() {
var _useContext = (0,external_window_React_.useContext)(EditorContext),
canvasInstanceRef = _useContext.canvasInstanceRef,
currentMenuRef = _useContext.currentMenuRef,
setCurrentMenu = _useContext.setCurrentMenu,
canvasIsRender = _useContext.canvasIsRender,
currentMenu = _useContext.currentMenu;
var paintConfigValue = (0,external_window_React_.useRef)({
color: paintConfig.colors[0],
size: paintConfig.fontSizes[0]
});
var isSelectingText = (0,external_window_React_.useRef)(false);
var mouseup = (0,external_window_React_.useCallback)(function (o) {
var canvas = canvasInstanceRef.current;
if (!canvas || o.target) {
return;
}
if (isSelectingText.current) {
isSelectingText.current = false;
return;
}
if (canvas.getActiveObject() || currentMenuRef.current !== MENU_TYPE_ENUM.text) {
return;
}
var pointer = canvas.getPointer(o.e);
var text = new external_window_Fabric_.fabric.IText('输入内容', {
left: pointer.x,
top: pointer.y,
fontSize: paintConfigValue.current.size,
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;
canvas.renderAll();
}, []);
var initText = function initText() {
var canvas = canvasInstanceRef.current;
if (!canvas) {
return;
}
canvas.on('mouse:up', mouseup);
};
(0,external_window_React_.useEffect)(function () {
var canvas = canvasInstanceRef.current;
if (!canvas || !canvasIsRender) {
return;
}
initText();
return function () {
canvas.off('mouse:up', mouseup);
};
}, [canvasIsRender]);
var handleTextTrigger = function handleTextTrigger() {
setCurrentMenu(currentMenuRef.current !== MENU_TYPE_ENUM.text ? MENU_TYPE_ENUM.text : 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('fontSize', value);
}
canvas.renderAll();
};
return {
handleTextTrigger: handleTextTrigger,
handlePaintChange: handlePaintChange,
currentMenu: currentMenu
};
};
var Text = function Text() {
var _useContext2 = (0,external_window_React_.useContext)(EditorContext),
_useContext2$lang = _useContext2.lang,
lang = _useContext2$lang === void 0 ? LANG.en : _useContext2$lang;
var _useText = useText(),
handleTextTrigger = _useText.handleTextTrigger,
handlePaintChange = _useText.handlePaintChange,
currentMenu = _useText.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-text', defineProperty_default()({}, 'tie-image-editor_tool-item--checked', currentMenu === MENU_TYPE_ENUM.text))
}, /*#__PURE__*/external_window_React_default().createElement(setting_Paint, {
open: currentMenu === MENU_TYPE_ENUM.text,
onChange: handlePaintChange,
type: MENU_TYPE_ENUM.text
}, /*#__PURE__*/external_window_React_default().createElement(setting_Popover, {
content: MENU_TYPE_TEXT.text[lang],
placement: "top"
}, /*#__PURE__*/external_window_React_default().createElement("i", {
className: "tie-image-editor_icon",
onClick: handleTextTrigger
})))));
};
;// 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,
canvasEl = _useContext.canvasEl,
currentMenuRef = _useContext.currentMenuRef,
historyRef = _useContext.historyRef,
setCurrentMenu = _useContext.setCurrentMenu,
initBackGroundImage = _useContext.initBackGroundImage;
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;
}
if (currentMenuRef.current !== MENU_TYPE_ENUM.upload) {
setCurrentMenu(MENU_TYPE_ENUM.upload);
}
var reader = new FileReader();
reader.onload = function (event) {
if (!event || !event.target) {
return;
}
var imgObj = new Image();
imgObj.src = event.target.result;
initBackGroundImage(event.target.result, true, function () {
historyRef.current.updateCanvasState(ACTION.add);
});
};
reader.readAsDataURL(e.target.files[0]);
};
return {
handleUpload: handleUpload
};
};
/** 上传 */
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;
(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 */
/** 初始化图像编辑组件 */
var useInit = function useInit(_ref) {
var url = _ref.url;
var canvasEl = (0,external_window_React_.useRef)(null);
var imageInstanceRef = (0,external_window_React_.useRef)();
var canvasInstanceRef = (0,external_window_React_.useRef)();
var wrapperInstanceRef = (0,external_window_React_.useRef)(null);
var _useState = (0,external_window_React_.useState)(false),
_useState2 = slicedToArray_default()(_useState, 2),
canvasIsRender = _useState2[0],
setCanvasIsRender = _useState2[1];
/** 当前菜单 */
var _useState3 = (0,external_window_React_.useState)(MENU_TYPE_ENUM.default),
_useState4 = slicedToArray_default()(_useState3, 2),
currentMenu = _useState4[0],
_setCurrentMenu = _useState4[1];
var currentMenuRef = (0,external_window_React_.useRef)(MENU_TYPE_ENUM.default);
/** canvas 初始化 */
var initCanvasJson = (0,external_window_React_.useRef)('{}');
/** 不应该保存历史 */
var unSaveHistory = (0,external_window_React_.useRef)(false);
/** 历史实例 */
var historyRef = (0,external_window_React_.useRef)({
updateCanvasState: function updateCanvasState() {}
});
/** 下载 */
var downloadRef = (0,external_window_React_.useRef)({
downLoad: function downLoad() {
return Promise.resolve({});
}
});
/** 缩放比例 */
var _useState5 = (0,external_window_React_.useState)(1),
_useState6 = slicedToArray_default()(_useState5, 2),
zoom = _useState6[0],
setZoom = _useState6[1];
/** 更新菜单 */
var setCurrentMenu = function setCurrentMenu(newMenu) {
_setCurrentMenu(newMenu);
currentMenuRef.current = newMenu;
var canvas = canvasInstanceRef.current;
if (!canvas) {
return;
}
/** 清空自由画状态 */
if (![MENU_TYPE_ENUM.draw, MENU_TYPE_ENUM.mosaic].includes(newMenu)) {
canvas.isDrawingMode = false;
}
/** 矩形 */
if ([MENU_TYPE_ENUM.rect, MENU_TYPE_ENUM.circle, MENU_TYPE_ENUM.arrow].includes(newMenu)) {
canvas.setCursor(CURSOR.crosshair);
} else if ([MENU_TYPE_ENUM.rect, MENU_TYPE_ENUM.circle, MENU_TYPE_ENUM.arrow].includes(currentMenuRef.current)) {
canvas.setCursor(CURSOR.default);
}
canvas.renderAll();
};
/** 初始化画布 */
var initCanvas = function initCanvas() {
if (wrapperInstanceRef.current && canvasEl.current) {
try {
var _wrapperInstanceRef$c = wrapperInstanceRef.current.getBoundingClientRect(),
width = _wrapperInstanceRef$c.width,
height = _wrapperInstanceRef$c.height;
var canvas = new external_window_Fabric_.fabric.Canvas(canvasEl.current, {
containerClass: 'tie-image-editor_canvas',
// enableRetinaScaling: false,
// isDrawingMode: true,
// fireRightClick: true, // 启用右键，button的数字为3
// stopContextMenu: true, // 禁止默认右键菜单
// controlsAboveOverlay: true, // 超出clipPath后仍然展示控制条
width: width,
height: height
});
canvasInstanceRef.current = canvas;
/** 通知其他组件，canvas已经实例化 */
setCanvasIsRender(true);
try {
/** 第一次初始化 */
initCanvasJson.current = JSON.stringify(canvas.toJSON(stayRemain));
} catch (error) {
console.error('initCanvasJson 初始化失败');
}
} catch (error) {
console.error(error);
}
}
};
/** 初始化背景图 */
var initBackGroundImage = function initBackGroundImage() {
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(),
height = _wrapperInstanceRef$c2.height;
imageInstanceRef.current = external_window_Fabric_.fabric.Image.fromURL(imageUrl, function (oImg) {
var center = canvas.getCenter();
var imgHeight = oImg.height;
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;
canvas.setBackgroundImage(oImg, canvas.renderAll.bind(canvas));
/** 仅仅替换背景 */
if (justBackground) {
callback && callback();
return;
}
try {
/** 加载图片后再初始化一次 */
initCanvasJson.current = JSON.stringify(canvas.toJSON(stayRemain));
} catch (error) {
console.error('initCanvasJson 初始化失败');
}
callback && callback();
}, {
crossOrigin: 'anonymous'
});
}
};
(0,external_window_React_.useEffect)(function () {
initCanvas();
}, [canvasEl, wrapperInstanceRef]);
(0,external_window_React_.useEffect)(function () {
initBackGroundImage(url);
}, [url, canvasInstanceRef, wrapperInstanceRef]);
return {
canvasEl: canvasEl,
imageInstanceRef: imageInstanceRef,
canvasInstanceRef: canvasInstanceRef,
wrapperInstanceRef: wrapperInstanceRef,
currentMenu: currentMenu,
setCurrentMenu: setCurrentMenu,
currentMenuRef: currentMenuRef,
canvasIsRender: canvasIsRender,
initCanvasJson: initCanvasJson,
unSaveHistory: unSaveHistory,
historyRef: historyRef,
initBackGroundImage: initBackGroundImage,
downloadRef: downloadRef,
zoom: zoom,
setZoom: setZoom
};
};
;// CONCATENATED MODULE: ./src/tiny-image-editor/src/Editor.tsx
/** 工具 */
/** 小组件 */
// // const { handleUpload } = useUpload();
// export const useUploadFnuc = ()=> ()
/** 图像编辑器组件 */
var Editor = /*#__PURE__*/(0,external_window_React_.forwardRef)(function (_ref, ref) {
var _ref$url = _ref.url,
url = _ref$url === void 0 ? EMPTY_STR : _ref$url,
style = _ref.style,
_ref$menus = _ref.menus,
menus = _ref$menus === void 0 ? EMPTY_ARR : _ref$menus,
onDownLoad = _ref.onDownLoad,
_ref$lang = _ref.lang,
lang = _ref$lang === void 0 ? LANG.zh : _ref$lang;
var _useInit = useInit({
url: url
}),
canvasEl = _useInit.canvasEl,
canvasInstanceRef = _useInit.canvasInstanceRef,
wrapperInstanceRef = _useInit.wrapperInstanceRef,
currentMenu = _useInit.currentMenu,
setCurrentMenu = _useInit.setCurrentMenu,
currentMenuRef = _useInit.currentMenuRef,
canvasIsRender = _useInit.canvasIsRender,
initCanvasJson = _useInit.initCanvasJson,
unSaveHistory = _useInit.unSaveHistory,
historyRef = _useInit.historyRef,
initBackGroundImage = _useInit.initBackGroundImage,
downloadRef = _useInit.downloadRef,
zoom = _useInit.zoom,
setZoom = _useInit.setZoom;
var uploadRef = (0,external_window_React_.useRef)(null);
/** 将下载方法透出去 */
(0,external_window_React_.useImperativeHandle)(ref, function () {
return {
downloadRef: downloadRef,
uploadRef: uploadRef
};
}, []);
return /*#__PURE__*/external_window_React_default().createElement(EditorContext.Provider, {
value: {
canvasInstanceRef: canvasInstanceRef,
wrapperInstanceRef: wrapperInstanceRef,
currentMenuRef: currentMenuRef,
currentMenu: currentMenu,
setCurrentMenu: setCurrentMenu,
canvasIsRender: canvasIsRender,
canvasEl: canvasEl,
url: url,
onDownLoad: onDownLoad,
initCanvasJson: initCanvasJson,
unSaveHistory: unSaveHistory,
historyRef: historyRef,
initBackGroundImage: initBackGroundImage,
zoom: zoom,
setZoom: setZoom,
lang: lang
}
}, /*#__PURE__*/external_window_React_default().createElement("div", {
className: "tie-image-editor",
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.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, {
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,
className: "tie-image-editor_modal__wrapper"
}, /*#__PURE__*/external_window_React_default().createElement("canvas", {
ref: canvasEl
}))));
});
Editor.displayName = 'Editor';
;// CONCATENATED MODULE: ./src/tiny-image-editor/styles/index.scss
// extracted by mini-css-extract-plugin
;// CONCATENATED MODULE: ./src/tiny-image-editor/src/index.tsx
;// CONCATENATED MODULE: ./src/tiny-image-editor/index.tsx
;// CONCATENATED MODULE: ./src/index.ts
}();
/******/ return __webpack_exports__;
/******/ })()
;
});
\ No newline at end of file
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或