From de3d36c56af773374a84f22a7a76a5b86d932c4c Mon Sep 17 00:00:00 2001 From: qq_41923622 Date: Mon, 3 Mar 2025 13:23:00 +0800 Subject: [PATCH] Mon Mar 3 13:23:00 CST 2025 inscode --- dist3/tiny-image-editor.min.js | 3486 -------------------------------- 1 file changed, 3486 deletions(-) diff --git a/dist3/tiny-image-editor.min.js b/dist3/tiny-image-editor.min.js index 304ffbe..e69de29 100644 --- a/dist3/tiny-image-editor.min.js +++ b/dist3/tiny-image-editor.min.js @@ -1,3486 +0,0 @@ -(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 -- GitLab