@solostylist/image-editor 1.0.9 → 1.0.11

package/lib/hooks/use-finetune.js

@@ -1 +1,31 @@
-import _defineProperty from"@babel/runtime/helpers/defineProperty";function ownKeys(a,b){var c=Object.keys(a);if(Object.getOwnPropertySymbols){var d=Object.getOwnPropertySymbols(a);b&&(d=d.filter(function(b){return Object.getOwnPropertyDescriptor(a,b).enumerable})),c.push.apply(c,d)}return c}function _objectSpread(a){for(var b,c=1;c<arguments.length;c++)b=null==arguments[c]?{}:arguments[c],c%2?ownKeys(Object(b),!0).forEach(function(c){_defineProperty(a,c,b[c])}):Object.getOwnPropertyDescriptors?Object.defineProperties(a,Object.getOwnPropertyDescriptors(b)):ownKeys(Object(b)).forEach(function(c){Object.defineProperty(a,c,Object.getOwnPropertyDescriptor(b,c))});return a}import{useCallback,useEffect,useMemo}from"react";import{SET_FINETUNE}from"actions";import isDefaultZeroValuesOnly from"utils/is-default-zero-values-only";import useStore from"./use-store";var useFinetune=function(a,b){var c=useStore(),d=c.dispatch,e=c.finetunes,f=c.finetunesProps,g=useCallback(function(b){d({type:SET_FINETUNE,payload:{finetune:a,finetuneProps:b}})},[]);return useEffect(function(){e.includes(a)||isDefaultZeroValuesOnly(b,f)||g(_objectSpread(_objectSpread({},b),f))},[]),useMemo(function(){return[f,g]},[f])};export default useFinetune;
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+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 _objectSpread(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; }
+import { useCallback, useEffect, useMemo } from 'react';
+import { SET_FINETUNE } from "../actions";
+import isDefaultZeroValuesOnly from "../utils/is-default-zero-values-only";
+import useStore from "./use-store";
+var useFinetune = function useFinetune(finetune, initialProps) {
+  var _useStore = useStore(),
+    dispatch = _useStore.dispatch,
+    finetunes = _useStore.finetunes,
+    finetunesProps = _useStore.finetunesProps;
+  var setFinetuneWithProps = useCallback(function (newFinetuneProps) {
+    dispatch({
+      type: SET_FINETUNE,
+      payload: {
+        finetune: finetune,
+        finetuneProps: newFinetuneProps
+      }
+    });
+  }, []);
+  useEffect(function () {
+    if (!finetunes.includes(finetune) && !isDefaultZeroValuesOnly(initialProps, finetunesProps)) {
+      setFinetuneWithProps(_objectSpread(_objectSpread({}, initialProps), finetunesProps));
+    }
+  }, []);
+  return useMemo(function () {
+    return [finetunesProps, setFinetuneWithProps];
+  }, [finetunesProps]);
+};
+export default useFinetune;

package/lib/hooks/use-phone-screen.js

@@ -1 +1,5 @@
-var usePhoneScreen=function(){var a=0<arguments.length&&arguments[0]!==void 0?arguments[0]:438;return window.matchMedia("(max-width: ".concat(a,"px)")).matches};export default usePhoneScreen;
+var usePhoneScreen = function usePhoneScreen() {
+  var screenWidth = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 438;
+  return window.matchMedia("(max-width: ".concat(screenWidth, "px)")).matches;
+};
+export default usePhoneScreen;

package/lib/hooks/use-popover.js

@@ -1 +1,27 @@
-import _slicedToArray from"@babel/runtime/helpers/slicedToArray";import{useCallback,useState}from"react";var usePopover=function(){var a=useState(null),b=_slicedToArray(a,2),c=b[0],d=b[1],e=useCallback(function(a){d(a.currentTarget)},[]),f=useCallback(function(){d(null)},[]),g=useCallback(function(a){d(function(b){return b?null:a.currentTarget})},[]);return{anchorEl:c,open:!!c,handleOpen:e,handleClose:f,handleToggle:g}};export default usePopover;
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import { useCallback, useState } from 'react';
+var usePopover = function usePopover() {
+  var _useState = useState(null),
+    _useState2 = _slicedToArray(_useState, 2),
+    anchorEl = _useState2[0],
+    setAnchorEl = _useState2[1];
+  var handleOpen = useCallback(function (event) {
+    setAnchorEl(event.currentTarget);
+  }, []);
+  var handleClose = useCallback(function () {
+    setAnchorEl(null);
+  }, []);
+  var handleToggle = useCallback(function (event) {
+    setAnchorEl(function (prev) {
+      return prev ? null : event.currentTarget;
+    });
+  }, []);
+  return {
+    anchorEl: anchorEl,
+    open: Boolean(anchorEl),
+    handleOpen: handleOpen,
+    handleClose: handleClose,
+    handleToggle: handleToggle
+  };
+};
+export default usePopover;

package/lib/hooks/use-resize-observer.js

@@ -1 +1,60 @@
-import{useCallback,useEffect,useMemo,useRef}from"react";var useResizeObserver=function(){var a=0<arguments.length&&void 0!==arguments[0]?arguments[0]:function(){},b=useRef(a),c=useRef(null),d=useCallback(function(a){a.forEach(function(a){if(a.contentRect){var c=a.contentRect,d=c.width,e=c.height;b.current({entry:a,width:d,height:e})}})},[]),e=useCallback(function(a){b.current=a},[]),f=useCallback(function(){c.current||(c.current=new ResizeObserver(d))},[]),g=useCallback(function(a,d){a&&(!c.current&&f(),c.current.observe(a),d&&(b.current=d))},[]),h=useCallback(function(a,d){c.current&&a&&(c.current.unobserve(a),d&&(b.current=d))},[]),i=useCallback(function(){c.current&&c.current.disconnect()},[]);return useEffect(function(){return f(),i},[]),useMemo(function(){return[g,h,e]},[])};export default useResizeObserver;
+import { useCallback, useEffect, useMemo, useRef } from 'react';
+var useResizeObserver = function useResizeObserver() {
+  var onResize = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : function () {};
+  var onResizeCallback = useRef(onResize);
+  var resizeObserver = useRef(null);
+  var observerCallback = useCallback(function (entries) {
+    entries.forEach(function (entry) {
+      if (entry.contentRect) {
+        var _entry$contentRect = entry.contentRect,
+          width = _entry$contentRect.width,
+          height = _entry$contentRect.height;
+        onResizeCallback.current({
+          entry: entry,
+          width: width,
+          height: height
+        });
+      }
+    });
+  }, []);
+  var updateOnResizeCallback = useCallback(function (newOnResizeCallback) {
+    onResizeCallback.current = newOnResizeCallback;
+  }, []);
+  var initObserver = useCallback(function () {
+    if (!resizeObserver.current) {
+      resizeObserver.current = new ResizeObserver(observerCallback);
+    }
+  }, []);
+  var observeElement = useCallback(function (element, newOnResizeCallback) {
+    if (element) {
+      if (!resizeObserver.current) {
+        initObserver();
+      }
+      resizeObserver.current.observe(element);
+      if (newOnResizeCallback) {
+        onResizeCallback.current = newOnResizeCallback;
+      }
+    }
+  }, []);
+  var unobserveElement = useCallback(function (element, newOnResizeCallback) {
+    if (resizeObserver.current && element) {
+      resizeObserver.current.unobserve(element);
+      if (newOnResizeCallback) {
+        onResizeCallback.current = newOnResizeCallback;
+      }
+    }
+  }, []);
+  var removeObserver = useCallback(function () {
+    if (resizeObserver.current) {
+      resizeObserver.current.disconnect();
+    }
+  }, []);
+  useEffect(function () {
+    initObserver();
+    return removeObserver;
+  }, []);
+  return useMemo(function () {
+    return [observeElement, unobserveElement, updateOnResizeCallback];
+  }, []);
+};
+export default useResizeObserver;

package/lib/hooks/use-store.js

@@ -1 +1,6 @@
-import{useContext}from"react";import AppContext from"context/app-context";var useStore=function(){return useContext(AppContext)};export default useStore;
+import { useContext } from 'react';
+import AppContext from "../context/app-context";
+var useStore = function useStore() {
+  return useContext(AppContext);
+};
+export default useStore;

package/lib/hooks/use-transformed-img-data.js

@@ -1 +1,156 @@
-import _slicedToArray from"@babel/runtime/helpers/slicedToArray";import _defineProperty from"@babel/runtime/helpers/defineProperty";function ownKeys(a,b){var c=Object.keys(a);if(Object.getOwnPropertySymbols){var d=Object.getOwnPropertySymbols(a);b&&(d=d.filter(function(b){return Object.getOwnPropertyDescriptor(a,b).enumerable})),c.push.apply(c,d)}return c}function _objectSpread(a){for(var b,c=1;c<arguments.length;c++)b=null==arguments[c]?{}:arguments[c],c%2?ownKeys(Object(b),!0).forEach(function(c){_defineProperty(a,c,b[c])}):Object.getOwnPropertyDescriptors?Object.defineProperties(a,Object.getOwnPropertyDescriptors(b)):ownKeys(Object(b)).forEach(function(c){Object.defineProperty(a,c,Object.getOwnPropertyDescriptor(b,c))});return a}import Konva from"konva";import{HIDE_LOADER,SET_SAVED}from"actions";import{ELLIPSE_CROP,IMAGE_NODE_ID,SUPPORTED_IMAGE_TYPES}from"utils/constants";import getFileFullName from"utils/get-file-full-name";import getSizeAfterRotation from"utils/get-size-after-rotation";import mapCropBox from"utils/map-crop-box";import{serializeDesignState}from"utils/serialize-design-state";import useStore from"./use-store";var useTransformedImgData=function(){var a=useStore(),b=a.dispatch,c=a.designLayer,d=a.shownImageDimensions,e=a.originalImage,f=a.resize,g=void 0===f?{}:f,h=a.adjustments,i=void 0===h?{}:h,j=i.crop,k=void 0===j?{}:j,l=i.rotation,m=void 0===l?0:l,n=a.config,o=n.savingPixelRatio,p=n.previewPixelRatio,q=n.forceToPngInEllipticalCrop,r=n.defaultSavedImageType;return function(){var f=0<arguments.length&&void 0!==arguments[0]?arguments[0]:{},h=!!(1<arguments.length&&void 0!==arguments[1])&&arguments[1],i=!!(2<arguments.length&&void 0!==arguments[2])&&arguments[2],j=_objectSpread({size:g},f);Konva.pixelRatio=h||o;var l=c.attrs,n=l.clipWidth,s=l.clipHeight,t=l.clipX,u=l.clipY;c.setAttr("isSaving",!0);var v=c.getStage().clone({width:e.width,height:e.height,scaleX:1,scaleY:1}),w=_slicedToArray(v.children,1),x=w[0];v.children[1].destroy();var y=v.findOne("#".concat(IMAGE_NODE_ID));null===y||void 0===y||y.cache();var z={x:v.width()/d.width,y:v.height()/d.height};x.setAttrs({rotation:0,offsetX:0,offsetY:0,x:0,y:0,scaleX:z.x,scaleY:z.y});var A=_objectSpread(_objectSpread({},(!j.name||!j.extension)&&getFileFullName(e.name,q&&k.ratio===ELLIPSE_CROP?"png":SUPPORTED_IMAGE_TYPES.includes(null===r||void 0===r?void 0:r.toLowerCase())&&r||void 0)),j),B=A.name,C=A.extension,D=A.quality,E=void 0===D?92:D,F=A.size,G=void 0===F?{}:F,H=["jpeg","jpg","webp"].includes(C),I=mapCropBox(k.noEffect?{x:0,y:0}:{x:k.x||t,y:k.y||u,width:k.width||n,height:k.height||s},d,v.attrs),J=getSizeAfterRotation(I.width,I.height,m);if(v.setAttrs({offsetX:I.width/2+(I.x||0),offsetY:I.height/2+(I.y||0),width:J.width,height:J.height,x:J.width/2,y:J.height/2,rotation:m}),G.width){var K=G.width/v.width();v.setAttrs({scaleX:K,width:G.width,x:v.x()*Math.abs(K)})}if(G.height){var L=G.height/v.height();v.setAttrs({scaleY:L,height:G.height,y:v.y()*Math.abs(L)})}var M=_objectSpread({mimeType:"image/".concat("jpg"===C?"jpeg":C)},H?{quality:E}:{}),N=v.toCanvas(M),O=v.toDataURL(M),P=serializeDesignState(a,!0),Q=_objectSpread({fullName:"".concat(B,".").concat(C),name:B,extension:C,mimeType:"image/".concat(C),imageCanvas:N,imageBase64:O,width:G.width||I.width,height:G.height||I.height},H?{quality:E}:{});c.setAttr("isSaving",!1),b({type:SET_SAVED}),null===y||void 0===y||y.clearCache(),v.destroy(),Konva.pixelRatio=p;var R=function(){b({type:HIDE_LOADER})};return i||R(),{imageData:Q,designState:P,hideLoadingSpinner:R}}};export default useTransformedImgData;
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+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 _objectSpread(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; }
+import Konva from 'konva';
+import { HIDE_LOADER, SET_SAVED } from "../actions";
+import { ELLIPSE_CROP, IMAGE_NODE_ID, SUPPORTED_IMAGE_TYPES } from "../utils/constants";
+import getFileFullName from "../utils/get-file-full-name";
+import getSizeAfterRotation from "../utils/get-size-after-rotation";
+import mapCropBox from "../utils/map-crop-box";
+import { serializeDesignState } from "../utils/serialize-design-state";
+import useStore from "./use-store";
+var useTransformedImgData = function useTransformedImgData() {
+  var state = useStore();
+  var dispatch = state.dispatch,
+    designLayer = state.designLayer,
+    shownImageDimensions = state.shownImageDimensions,
+    originalImage = state.originalImage,
+    _state$resize = state.resize,
+    resize = _state$resize === void 0 ? {} : _state$resize,
+    _state$adjustments = state.adjustments,
+    _state$adjustments2 = _state$adjustments === void 0 ? {} : _state$adjustments,
+    _state$adjustments2$c = _state$adjustments2.crop,
+    crop = _state$adjustments2$c === void 0 ? {} : _state$adjustments2$c,
+    _state$adjustments2$r = _state$adjustments2.rotation,
+    rotation = _state$adjustments2$r === void 0 ? 0 : _state$adjustments2$r,
+    _state$config = state.config,
+    savingPixelRatio = _state$config.savingPixelRatio,
+    previewPixelRatio = _state$config.previewPixelRatio,
+    forceToPngInEllipticalCrop = _state$config.forceToPngInEllipticalCrop,
+    defaultSavedImageType = _state$config.defaultSavedImageType;
+  var getTransformedImgData = function getTransformedImgData() {
+    var imageFileInfo = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+    var pixelRatio = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
+    var keepLoadingSpinnerShown = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
+    var currentImgFileInfo = _objectSpread({
+      size: resize
+    }, imageFileInfo);
+    Konva.pixelRatio = pixelRatio || savingPixelRatio;
+    var _designLayer$attrs = designLayer.attrs,
+      clipWidth = _designLayer$attrs.clipWidth,
+      clipHeight = _designLayer$attrs.clipHeight,
+      clipX = _designLayer$attrs.clipX,
+      clipY = _designLayer$attrs.clipY;
+    designLayer.setAttr('isSaving', true);
+    var preparedCanvas = designLayer.getStage().clone({
+      width: originalImage.width,
+      height: originalImage.height,
+      scaleX: 1,
+      scaleY: 1
+    });
+    var _preparedCanvas$child = _slicedToArray(preparedCanvas.children, 1),
+      preparedDesignLayer = _preparedCanvas$child[0];
+    preparedCanvas.children[1].destroy();
+    var imgNode = preparedCanvas.findOne("#".concat(IMAGE_NODE_ID));
+    imgNode === null || imgNode === void 0 || imgNode.cache();
+    var preparedDesignLayerScale = {
+      x: preparedCanvas.width() / shownImageDimensions.width,
+      y: preparedCanvas.height() / shownImageDimensions.height
+    };
+    preparedDesignLayer.setAttrs({
+      rotation: 0,
+      offsetX: 0,
+      offsetY: 0,
+      x: 0,
+      y: 0,
+      scaleX: preparedDesignLayerScale.x,
+      scaleY: preparedDesignLayerScale.y
+    });
+    var _ref = _objectSpread(_objectSpread({}, (!currentImgFileInfo.name || !currentImgFileInfo.extension) && getFileFullName(originalImage.name, forceToPngInEllipticalCrop && crop.ratio === ELLIPSE_CROP ? 'png' : SUPPORTED_IMAGE_TYPES.includes(defaultSavedImageType === null || defaultSavedImageType === void 0 ? void 0 : defaultSavedImageType.toLowerCase()) && defaultSavedImageType || undefined)), currentImgFileInfo),
+      name = _ref.name,
+      extension = _ref.extension,
+      _ref$quality = _ref.quality,
+      quality = _ref$quality === void 0 ? 92 : _ref$quality,
+      _ref$size = _ref.size,
+      size = _ref$size === void 0 ? {} : _ref$size;
+    var isQualityAcceptable = ['jpeg', 'jpg', 'webp'].includes(extension);
+    var mappedCropBox = mapCropBox(crop.noEffect ? {
+      x: 0,
+      y: 0
+    } : {
+      x: crop.x || clipX,
+      y: crop.y || clipY,
+      width: crop.width || clipWidth,
+      height: crop.height || clipHeight
+    }, shownImageDimensions, preparedCanvas.attrs);
+    var rotatedCropBox = getSizeAfterRotation(mappedCropBox.width, mappedCropBox.height, rotation);
+    preparedCanvas.setAttrs({
+      offsetX: mappedCropBox.width / 2 + (mappedCropBox.x || 0),
+      offsetY: mappedCropBox.height / 2 + (mappedCropBox.y || 0),
+      width: rotatedCropBox.width,
+      height: rotatedCropBox.height,
+      x: rotatedCropBox.width / 2,
+      y: rotatedCropBox.height / 2,
+      rotation: rotation
+    });
+    if (size.width) {
+      var newScaleX = size.width / preparedCanvas.width();
+      preparedCanvas.setAttrs({
+        scaleX: newScaleX,
+        width: size.width,
+        x: preparedCanvas.x() * Math.abs(newScaleX)
+      });
+    }
+    if (size.height) {
+      var newScaleY = size.height / preparedCanvas.height();
+      preparedCanvas.setAttrs({
+        scaleY: newScaleY,
+        height: size.height,
+        y: preparedCanvas.y() * Math.abs(newScaleY)
+      });
+    }
+    var finalOptions = _objectSpread({
+      mimeType: "image/".concat(extension === 'jpg' ? 'jpeg' : extension)
+    }, isQualityAcceptable ? {
+      quality: quality
+    } : {});
+    var finalCanvas = preparedCanvas.toCanvas(finalOptions);
+    var finalImgBase64 = preparedCanvas.toDataURL(finalOptions);
+    var finalImgDesignState = serializeDesignState(state, true);
+    var finalImgPassedObject = _objectSpread({
+      fullName: "".concat(name, ".").concat(extension),
+      name: name,
+      extension: extension,
+      mimeType: "image/".concat(extension),
+      imageCanvas: finalCanvas,
+      imageBase64: finalImgBase64,
+      width: size.width || mappedCropBox.width,
+      height: size.height || mappedCropBox.height
+    }, isQualityAcceptable ? {
+      quality: quality
+    } : {});
+    designLayer.setAttr('isSaving', false);
+    dispatch({
+      type: SET_SAVED
+    });
+    imgNode === null || imgNode === void 0 || imgNode.clearCache();
+    preparedCanvas.destroy();
+    Konva.pixelRatio = previewPixelRatio;
+    var hideLoadingSpinner = function hideLoadingSpinner() {
+      dispatch({
+        type: HIDE_LOADER
+      });
+    };
+    if (!keepLoadingSpinnerShown) {
+      hideLoadingSpinner();
+    }
+    return {
+      imageData: finalImgPassedObject,
+      designState: finalImgDesignState,
+      hideLoadingSpinner: hideLoadingSpinner
+    };
+  };
+  return getTransformedImgData;
+};
+export default useTransformedImgData;

package/lib/hooks/use-update-effect.js

@@ -1 +1,18 @@
-import{useEffect,useRef}from"react";var useUpdateEffect=function(a,b){var c=useRef(!0);useEffect(function(){return function(){c.current=!0}},[]),useEffect(function(){if(c.current)c.current=!1;else if("function"==typeof a)return a()},b)};export default useUpdateEffect;
+import { useEffect, useRef } from 'react';
+var useUpdateEffect = function useUpdateEffect(effectCallback, dependencies) {
+  var isFirstRender = useRef(true);
+  useEffect(function () {
+    return function () {
+      isFirstRender.current = true;
+    };
+  }, []);
+  useEffect(function () {
+    if (isFirstRender.current) {
+      isFirstRender.current = false;
+    } else if (typeof effectCallback === 'function') {
+      return effectCallback();
+    }
+    return undefined;
+  }, dependencies);
+};
+export default useUpdateEffect;

package/lib/index.js

@@ -1 +1,4 @@
-import ImageEditor from"components/assembly-point";import{TABS_IDS,TOOLS_IDS}from"utils/constants";export{TABS_IDS as TABS,TOOLS_IDS as TOOLS};export default ImageEditor;
+import ImageEditor from "./components/assembly-point";
+import { TABS_IDS, TOOLS_IDS } from "./utils/constants";
+export { TABS_IDS as TABS, TOOLS_IDS as TOOLS };
+export default ImageEditor;

package/lib/types/actions.js

@@ -1 +1,31 @@
-export var SET_ORIGINAL_IMAGE="SET_ORIGINAL_IMAGE";export var SET_FEEDBACK="SET_FEEDBACK";export var SHOW_LOADER="SHOW_LOADER";export var HIDE_LOADER="HIDE_LOADER";export var CHANGE_POINTER_ICON="CHANGE_POINTER_ICON";export var SELECT_ANNOTATION="SELECT_ANNOTATION";export var CLEAR_ANNOTATIONS_SELECTIONS="CLEAR_ANNOTATIONS_SELECTIONS";export var TOGGLE_ORIGINAL_IMAGE_DISPLAY="TOGGLE_ORIGINAL_IMAGE_DISPLAY";export var SELECT_TAB="SELECT_TAB";export var SELECT_TOOL="SELECT_TOOL";export var ZOOM_CANVAS="ZOOM_CANVAS";export var SET_CANVAS_SIZE="SET_CANVAS_SIZE";export var SET_SHOWN_IMAGE_DIMENSIONS="SET_SHOWN_IMAGE_DIMENSIONS";export var ENABLE_TEXT_CONTENT_EDIT="ENABLE_TEXT_CONTENT_EDIT";export var SET_LATEST_COLOR="SET_LATEST_COLOR";export var SET_SHOWN_TABS_MENU="SET_SHOWN_TABS_MENU";export var SET_SAVING="SET_SAVING";export var ADD_FILTER="ADD_FILTER";export var SET_FINETUNE="SET_FINETUNE";export var SET_ANNOTATION="SET_ANNOTATION";export var SET_CROP="SET_CROP";export var CHANGE_ROTATION="CHANGE_ROTATION";export var TOGGLE_FLIP="TOGGLE_FLIP";export var SET_RESIZE="SET_RESIZE";export var REMOVE_ANNOTATIONS="REMOVE_ANNOTATIONS";export var DUPLICATE_ANNOTATIONS="DUPLICATE_ANNOTATIONS";export var UNDO="UNDO";export var REDO="REDO";export var RESET="RESET";export var SET_SAVED="SET_SAVED";export var UPDATE_STATE="UPDATE_STATE";
+export var SET_ORIGINAL_IMAGE = 'SET_ORIGINAL_IMAGE';
+export var SET_FEEDBACK = 'SET_FEEDBACK';
+export var SHOW_LOADER = 'SHOW_LOADER';
+export var HIDE_LOADER = 'HIDE_LOADER';
+export var CHANGE_POINTER_ICON = 'CHANGE_POINTER_ICON';
+export var SELECT_ANNOTATION = 'SELECT_ANNOTATION';
+export var CLEAR_ANNOTATIONS_SELECTIONS = 'CLEAR_ANNOTATIONS_SELECTIONS';
+export var TOGGLE_ORIGINAL_IMAGE_DISPLAY = 'TOGGLE_ORIGINAL_IMAGE_DISPLAY';
+export var SELECT_TAB = 'SELECT_TAB';
+export var SELECT_TOOL = 'SELECT_TOOL';
+export var ZOOM_CANVAS = 'ZOOM_CANVAS';
+export var SET_CANVAS_SIZE = 'SET_CANVAS_SIZE';
+export var SET_SHOWN_IMAGE_DIMENSIONS = 'SET_SHOWN_IMAGE_DIMENSIONS';
+export var ENABLE_TEXT_CONTENT_EDIT = 'ENABLE_TEXT_CONTENT_EDIT';
+export var SET_LATEST_COLOR = 'SET_LATEST_COLOR';
+export var SET_SHOWN_TABS_MENU = 'SET_SHOWN_TABS_MENU';
+export var SET_SAVING = 'SET_SAVING';
+export var ADD_FILTER = 'ADD_FILTER';
+export var SET_FINETUNE = 'SET_FINETUNE';
+export var SET_ANNOTATION = 'SET_ANNOTATION';
+export var SET_CROP = 'SET_CROP';
+export var CHANGE_ROTATION = 'CHANGE_ROTATION';
+export var TOGGLE_FLIP = 'TOGGLE_FLIP';
+export var SET_RESIZE = 'SET_RESIZE';
+export var REMOVE_ANNOTATIONS = 'REMOVE_ANNOTATIONS';
+export var DUPLICATE_ANNOTATIONS = 'DUPLICATE_ANNOTATIONS';
+export var UNDO = 'UNDO';
+export var REDO = 'REDO';
+export var RESET = 'RESET';
+export var SET_SAVED = 'SET_SAVED';
+export var UPDATE_STATE = 'UPDATE_STATE';

package/lib/types/annotations.js

@@ -1 +1,42 @@
-export var TextAlignment=function(a){return a.LEFT="left",a.CENTER="center",a.RIGHT="right",a}({});export function isTextAnnotation(a){return"Text"===a.name}export function isImageAnnotation(a){return"Image"===a.name}export function isRectAnnotation(a){return"Rect"===a.name}export function isPolygonAnnotation(a){return"Polygon"===a.name}export function isEllipseAnnotation(a){return"Ellipse"===a.name}export function isPenAnnotation(a){return"Pen"===a.name}export function isLineAnnotation(a){return"Line"===a.name}export function isArrowAnnotation(a){return"Arrow"===a.name}export function hasDimensions(a){return"Text"===a.name||"Image"===a.name||"Rect"===a.name}export function hasPoints(a){return"Pen"===a.name||"Line"===a.name||"Arrow"===a.name}export function hasRadius(a){return"Polygon"===a.name}export function hasRadii(a){return"Ellipse"===a.name}
+export var TextAlignment = function (TextAlignment) {
+  TextAlignment["LEFT"] = "left";
+  TextAlignment["CENTER"] = "center";
+  TextAlignment["RIGHT"] = "right";
+  return TextAlignment;
+}({});
+export function isTextAnnotation(annotation) {
+  return annotation.name === 'Text';
+}
+export function isImageAnnotation(annotation) {
+  return annotation.name === 'Image';
+}
+export function isRectAnnotation(annotation) {
+  return annotation.name === 'Rect';
+}
+export function isPolygonAnnotation(annotation) {
+  return annotation.name === 'Polygon';
+}
+export function isEllipseAnnotation(annotation) {
+  return annotation.name === 'Ellipse';
+}
+export function isPenAnnotation(annotation) {
+  return annotation.name === 'Pen';
+}
+export function isLineAnnotation(annotation) {
+  return annotation.name === 'Line';
+}
+export function isArrowAnnotation(annotation) {
+  return annotation.name === 'Arrow';
+}
+export function hasDimensions(annotation) {
+  return annotation.name === 'Text' || annotation.name === 'Image' || annotation.name === 'Rect';
+}
+export function hasPoints(annotation) {
+  return annotation.name === 'Pen' || annotation.name === 'Line' || annotation.name === 'Arrow';
+}
+export function hasRadius(annotation) {
+  return annotation.name === 'Polygon';
+}
+export function hasRadii(annotation) {
+  return annotation.name === 'Ellipse';
+}

package/lib/types/common.js

@@ -1 +1 @@
-export{};
+export {};

package/lib/types/config.js

@@ -1 +1,34 @@
-export var TABS={FINETUNE:"Finetune",FILTERS:"Filters",ADJUST:"Adjust",WATERMARK:"Watermark",ANNOTATE:"Annotate",RESIZE:"Resize"};export var TOOLS={CROP:"Crop",ROTATE:"Rotate",FLIP_X:"Flip_X",FLIP_Y:"Flip_Y",BRIGHTNESS:"Brightness",CONTRAST:"Contrast",HSV:"HueSaturationValue",WARMTH:"Warmth",BLUR:"Blur",THRESHOLD:"Threshold",POSTERIZE:"Posterize",PIXELATE:"Pixelate",NOISE:"Noise",FILTERS:"Filters",RECT:"Rect",ELLIPSE:"Ellipse",POLYGON:"Polygon",TEXT:"Text",LINE:"Line",IMAGE:"Image",ARROW:"Arrow",WATERMARK:"Watermark",PEN:"Pen",RESIZE:"Resize"};
+export var TABS = {
+  FINETUNE: 'Finetune',
+  FILTERS: 'Filters',
+  ADJUST: 'Adjust',
+  WATERMARK: 'Watermark',
+  ANNOTATE: 'Annotate',
+  RESIZE: 'Resize'
+};
+export var TOOLS = {
+  CROP: 'Crop',
+  ROTATE: 'Rotate',
+  FLIP_X: 'Flip_X',
+  FLIP_Y: 'Flip_Y',
+  BRIGHTNESS: 'Brightness',
+  CONTRAST: 'Contrast',
+  HSV: 'HueSaturationValue',
+  WARMTH: 'Warmth',
+  BLUR: 'Blur',
+  THRESHOLD: 'Threshold',
+  POSTERIZE: 'Posterize',
+  PIXELATE: 'Pixelate',
+  NOISE: 'Noise',
+  FILTERS: 'Filters',
+  RECT: 'Rect',
+  ELLIPSE: 'Ellipse',
+  POLYGON: 'Polygon',
+  TEXT: 'Text',
+  LINE: 'Line',
+  IMAGE: 'Image',
+  ARROW: 'Arrow',
+  WATERMARK: 'Watermark',
+  PEN: 'Pen',
+  RESIZE: 'Resize'
+};

package/lib/types/index.js

@@ -1 +1,5 @@
-export*from"./common";export*from"./annotations";export*from"./state";export*from"./config";export*from"./actions";
+export * from "./common";
+export * from "./annotations";
+export * from "./state";
+export * from "./config";
+export * from "./actions";

package/lib/types/state.js

@@ -1 +1 @@
-export{};
+export {};

package/lib/utils/assign-finetune-names-to-konva.js

@@ -1 +1,7 @@
-import Konva from"konva";var assignFinetuneNamesToKonva=function(){Object.keys(Konva.Filters).forEach(function(a){Konva.Filters[a].finetuneName=a})};export default assignFinetuneNamesToKonva;
+import Konva from 'konva';
+var assignFinetuneNamesToKonva = function assignFinetuneNamesToKonva() {
+  Object.keys(Konva.Filters).forEach(function (key) {
+    Konva.Filters[key].finetuneName = key;
+  });
+};
+export default assignFinetuneNamesToKonva;

package/lib/utils/calculate-zoom-data.js

@@ -1 +1,36 @@
-import _defineProperty from"@babel/runtime/helpers/defineProperty";function ownKeys(a,b){var c=Object.keys(a);if(Object.getOwnPropertySymbols){var d=Object.getOwnPropertySymbols(a);b&&(d=d.filter(function(b){return Object.getOwnPropertyDescriptor(a,b).enumerable})),c.push.apply(c,d)}return c}function _objectSpread(a){for(var b,c=1;c<arguments.length;c++)b=null==arguments[c]?{}:arguments[c],c%2?ownKeys(Object(b),!0).forEach(function(c){_defineProperty(a,c,b[c])}):Object.getOwnPropertyDescriptors?Object.defineProperties(a,Object.getOwnPropertyDescriptors(b)):ownKeys(Object(b)).forEach(function(c){Object.defineProperty(a,c,Object.getOwnPropertyDescriptor(b,c))});return a}import{DEFAULT_ZOOM_FACTOR}from"./constants";var calculateZoomData=function(a,b,c,d){if(a.factor===DEFAULT_ZOOM_FACTOR)return{x:0,y:0,factor:DEFAULT_ZOOM_FACTOR};var e=a.factor>b.factor,f={x:((a.x||0)-(b.x||0))/b.factor,y:((a.y||0)-(b.y||0))/b.factor},g={x:(a.x||0)-f.x*a.factor,y:(a.y||0)-f.y*a.factor};if(e&&1===b.factor||(g.x=Math.min(0,Math.max(g.x,c*(1-b.factor))),g.y=Math.min(0,Math.max(g.y,d*(1-b.factor)))),1>a.factor){var h=c-c*a.factor,i=d-d*a.factor;g.x+=h/2,g.y+=i/2}return _objectSpread(_objectSpread({},g),{},{factor:a.factor})};export default calculateZoomData;
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+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 _objectSpread(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; }
+import { DEFAULT_ZOOM_FACTOR } from "./constants";
+var calculateZoomData = function calculateZoomData(newZoom, oldZoom, canvasWidth, canvasHeight) {
+  if (newZoom.factor === DEFAULT_ZOOM_FACTOR) {
+    return {
+      x: 0,
+      y: 0,
+      factor: DEFAULT_ZOOM_FACTOR
+    };
+  }
+  var isZoomIn = newZoom.factor > oldZoom.factor;
+  var mousePointTo = {
+    x: ((newZoom.x || 0) - (oldZoom.x || 0)) / oldZoom.factor,
+    y: ((newZoom.y || 0) - (oldZoom.y || 0)) / oldZoom.factor
+  };
+  var newPos = {
+    x: (newZoom.x || 0) - mousePointTo.x * newZoom.factor,
+    y: (newZoom.y || 0) - mousePointTo.y * newZoom.factor
+  };
+  if (!isZoomIn || oldZoom.factor !== 1) {
+    newPos.x = Math.min(0, Math.max(newPos.x, canvasWidth * (1 - oldZoom.factor)));
+    newPos.y = Math.min(0, Math.max(newPos.y, canvasHeight * (1 - oldZoom.factor)));
+  }
+  if (newZoom.factor < 1) {
+    var initialAndScaledWidthDiff = canvasWidth - canvasWidth * newZoom.factor;
+    var initialAndScaledHeightDiff = canvasHeight - canvasHeight * newZoom.factor;
+    newPos.x += initialAndScaledWidthDiff / 2;
+    newPos.y += initialAndScaledHeightDiff / 2;
+  }
+  return _objectSpread(_objectSpread({}, newPos), {}, {
+    factor: newZoom.factor
+  });
+};
+export default calculateZoomData;

package/lib/utils/compare-ratios.js

@@ -1 +1,5 @@
-import toPrecisedFloat from"./to-precised-float";var compareRatios=function(a,b){return toPrecisedFloat(a)===toPrecisedFloat(b)};export default compareRatios;
+import toPrecisedFloat from "./to-precised-float";
+var compareRatios = function compareRatios(ratio1, ratio2) {
+  return toPrecisedFloat(ratio1) === toPrecisedFloat(ratio2);
+};
+export default compareRatios;

package/lib/utils/constants.js

@@ -1 +1,84 @@
-export var ROOT_CONTAINER_CLASS_NAME="FIE_root";export var DESIGN_LAYER_ID="FIE_design-layer";export var TRANSFORMERS_LAYER_ID="FIE_transformers-layer";export var IMAGE_NODE_ID="FIE_original-image";export var NODES_TRANSFORMER_ID="FIE_nodes-transformer";export var WATERMARK_ANNOTATION_ID="watermark";export var DEFAULT_SAVE_QUALITY=.92;export var TABS_IDS={FINETUNE:"Finetune",FILTERS:"Filters",ADJUST:"Adjust",WATERMARK:"Watermark",ANNOTATE:"Annotate",RESIZE:"Resize"};export var TOOLS_IDS={CROP:"Crop",ROTATE:"Rotate",FLIP_X:"Flip_X",FLIP_Y:"Flip_Y",BRIGHTNESS:"Brightness",CONTRAST:"Contrast",HSV:"HueSaturationValue",WARMTH:"Warmth",BLUR:"Blur",THRESHOLD:"Threshold",POSTERIZE:"Posterize",PIXELATE:"Pixelate",NOISE:"Noise",FILTERS:"Filters",RECT:"Rect",ELLIPSE:"Ellipse",POLYGON:"Polygon",TEXT:"Text",LINE:"Line",IMAGE:"Image",ARROW:"Arrow",WATERMARK:"Watermark",PEN:"Pen",RESIZE:"Resize"};export var FLIP_DIRECTIONS={X:"X",Y:"Y"};export var DEFAULT_ZOOM_FACTOR=1;export var SUPPORTED_IMAGE_TYPES=["png","jpeg","jpg","webp"];export var POSSIBLE_IMAGE_TYPES=[].concat(SUPPORTED_IMAGE_TYPES,["svg","gif","avif","apng"]);export var DEFAULT_IMAGE_TYPE=SUPPORTED_IMAGE_TYPES[0];export var POINTER_ICONS={DEFAULT:"default",DRAW:"crosshair",SELECT:"pointer",MOVE:"move",DRAG:"GRAB"};export var DEFAULT_ENABLED_ANCHORS=["top-left","top-center","top-right","middle-right","middle-left","bottom-left","bottom-center","bottom-right"];export var ORIGINAL_CROP="Crop";export var CUSTOM_CROP="custom";export var ELLIPSE_CROP="ellipse";export var POSITIONS={TOP_LEFT:"top-left",TOP_CENTER:"top-center",TOP_RIGHT:"top-right",MIDDLE_LEFT:"middle-left",MIDDLE_CENTER:"middle-center",MIDDLE_RIGHT:"middle-right",BOTTOM_LEFT:"bottom-left",BOTTOM_CENTER:"bottom-center",BOTTOM_RIGHT:"bottom-right"};export var MIN_CROP={WIDTH:14,HEIGHT:14};export var CLOSING_REASONS={AFTER_SAVE:"after-saving",CLOSE_BUTTON:"close-button-clicked",BACK_BUTTON:"back-button-clicked"};export var FEEDBACK_STATUSES={WARNING:"warning",ERROR:"error"};
+export var ROOT_CONTAINER_CLASS_NAME = 'FIE_root';
+export var DESIGN_LAYER_ID = 'FIE_design-layer';
+export var TRANSFORMERS_LAYER_ID = 'FIE_transformers-layer';
+export var IMAGE_NODE_ID = 'FIE_original-image';
+export var NODES_TRANSFORMER_ID = 'FIE_nodes-transformer';
+export var WATERMARK_ANNOTATION_ID = 'watermark';
+export var DEFAULT_SAVE_QUALITY = 0.92;
+export var TABS_IDS = {
+  FINETUNE: 'Finetune',
+  FILTERS: 'Filters',
+  ADJUST: 'Adjust',
+  WATERMARK: 'Watermark',
+  ANNOTATE: 'Annotate',
+  RESIZE: 'Resize'
+};
+export var TOOLS_IDS = {
+  CROP: 'Crop',
+  ROTATE: 'Rotate',
+  FLIP_X: 'Flip_X',
+  FLIP_Y: 'Flip_Y',
+  BRIGHTNESS: 'Brightness',
+  CONTRAST: 'Contrast',
+  HSV: 'HueSaturationValue',
+  WARMTH: 'Warmth',
+  BLUR: 'Blur',
+  THRESHOLD: 'Threshold',
+  POSTERIZE: 'Posterize',
+  PIXELATE: 'Pixelate',
+  NOISE: 'Noise',
+  FILTERS: 'Filters',
+  RECT: 'Rect',
+  ELLIPSE: 'Ellipse',
+  POLYGON: 'Polygon',
+  TEXT: 'Text',
+  LINE: 'Line',
+  IMAGE: 'Image',
+  ARROW: 'Arrow',
+  WATERMARK: 'Watermark',
+  PEN: 'Pen',
+  RESIZE: 'Resize'
+};
+export var FLIP_DIRECTIONS = {
+  X: 'X',
+  Y: 'Y'
+};
+export var DEFAULT_ZOOM_FACTOR = 1;
+export var SUPPORTED_IMAGE_TYPES = ['png', 'jpeg', 'jpg', 'webp'];
+export var POSSIBLE_IMAGE_TYPES = [].concat(SUPPORTED_IMAGE_TYPES, ['svg', 'gif', 'avif', 'apng']);
+export var DEFAULT_IMAGE_TYPE = SUPPORTED_IMAGE_TYPES[0];
+export var POINTER_ICONS = {
+  DEFAULT: 'default',
+  DRAW: 'crosshair',
+  SELECT: 'pointer',
+  MOVE: 'move',
+  DRAG: 'GRAB'
+};
+export var DEFAULT_ENABLED_ANCHORS = ['top-left', 'top-center', 'top-right', 'middle-right', 'middle-left', 'bottom-left', 'bottom-center', 'bottom-right'];
+export var ORIGINAL_CROP = 'Crop';
+export var CUSTOM_CROP = 'custom';
+export var ELLIPSE_CROP = 'ellipse';
+export var POSITIONS = {
+  TOP_LEFT: 'top-left',
+  TOP_CENTER: 'top-center',
+  TOP_RIGHT: 'top-right',
+  MIDDLE_LEFT: 'middle-left',
+  MIDDLE_CENTER: 'middle-center',
+  MIDDLE_RIGHT: 'middle-right',
+  BOTTOM_LEFT: 'bottom-left',
+  BOTTOM_CENTER: 'bottom-center',
+  BOTTOM_RIGHT: 'bottom-right'
+};
+export var MIN_CROP = {
+  WIDTH: 14,
+  HEIGHT: 14
+};
+export var CLOSING_REASONS = {
+  AFTER_SAVE: 'after-saving',
+  CLOSE_BUTTON: 'close-button-clicked',
+  BACK_BUTTON: 'back-button-clicked'
+};
+export var FEEDBACK_STATUSES = {
+  WARNING: 'warning',
+  ERROR: 'error'
+};

package/lib/utils/crop-image.js

@@ -1 +1,10 @@
-import{ELLIPSE_CROP}from"./constants";var cropImage=function(a,b){var c=!!(2<arguments.length&&arguments[2]!==void 0)&&arguments[2];b.ratio!==ELLIPSE_CROP||c?a.rect(b.x,b.y,b.width,b.height):a.ellipse(b.x+b.width/2,b.y+b.height/2,b.width/2,b.height/2,0,0,2*Math.PI)};export default cropImage;
+import { ELLIPSE_CROP } from "./constants";
+var cropImage = function cropImage(context, cropBox) {
+  var noEllipticalCrop = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
+  if (cropBox.ratio === ELLIPSE_CROP && !noEllipticalCrop) {
+    context.ellipse(cropBox.x + cropBox.width / 2, cropBox.y + cropBox.height / 2, cropBox.width / 2, cropBox.height / 2, 0, 0, 2 * Math.PI);
+  } else {
+    context.rect(cropBox.x, cropBox.y, cropBox.width, cropBox.height);
+  }
+};
+export default cropImage;