@solostylist/image-editor 1.0.9 → 1.0.11

package/lib/hooks/use-annotation/get-new-annotation-preview.js

@@ -1 +1,83 @@
-import _objectWithoutProperties from"@babel/runtime/helpers/objectWithoutProperties";import _defineProperty from"@babel/runtime/helpers/defineProperty";var _excluded=["width","height","startedX","startedY"];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{TOOLS_IDS}from"utils/constants";var annotationsNamesToKonvaClasses=_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({},TOOLS_IDS.RECT,Konva.Rect),TOOLS_IDS.ELLIPSE,Konva.Ellipse),TOOLS_IDS.POLYGON,Konva.RegularPolygon),TOOLS_IDS.LINE,Konva.Line),TOOLS_IDS.IMAGE,Konva.Image),TOOLS_IDS.TEXT,Konva.Text),TOOLS_IDS.ARROW,Konva.Arrow),ANNOTATIONS_WITH_POINTS=[TOOLS_IDS.LINE,TOOLS_IDS.ARROW];export var NO_WIDTH_HEIGHT_ANNOTATIONS=[].concat(ANNOTATIONS_WITH_POINTS,[TOOLS_IDS.ELLIPSE,TOOLS_IDS.POLYGON]);var getNewAnnotationPreview=function(a){var b,c,d;return new annotationsNamesToKonvaClasses[a.name](_objectSpread(_objectSpread({},a),{},{opacity:null!==(b=a.opacity)&&void 0!==b?b:.7,x:null!==(c=a.x)&&void 0!==c?c:0,y:null!==(d=a.y)&&void 0!==d?d:0,width:Math.abs(a.width)||0,height:Math.abs(a.height)||0},ANNOTATIONS_WITH_POINTS.includes(a.name)?{stroke:a.stroke||"#000000"}:{}))};export var dimensToProperAnnotationDimens=function(a,b,c){var d=a.width,e=a.height,f=a.startedX,g=a.startedY,h=_objectWithoutProperties(a,_excluded),i=Math.abs(d),j=Math.abs(e),k=0>d,l=0>e;switch(b){case TOOLS_IDS.RECT:c?(h.width=Math.sqrt(i*i+j*j),h.height=h.width,h.x-=k?h.width-i:0,h.y-=l?h.height-j:0):(h.width=i,h.height=j);break;case TOOLS_IDS.ELLIPSE:c?(h.radiusX=Math.sqrt(i*i+j*j)/2,h.radiusY=h.radiusX,h.x-=k?2*h.radiusX-i:0,h.y-=l?2*h.radiusY-j:0):(h.radiusX=i/2,h.radiusY=j/2),h.offsetX=-h.radiusX,h.offsetY=-h.radiusY;break;case TOOLS_IDS.POLYGON:h.radius=(i+j)/2,h.x-=k?2*h.radius-i:0,h.y-=l?2*h.radius-j:0,h.offsetX=-h.radius,h.offsetY=-h.radius;break;case TOOLS_IDS.LINE:case TOOLS_IDS.ARROW:h.x=f,h.y=g,h.points=[0,0],c?h.points.push(i>=j?d:0,j>i?e:0):h.points=[0,0,d,e];break;default:h.width=i,h.height=j}return h};export default getNewAnnotationPreview;
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+var _excluded = ["width", "height", "startedX", "startedY"];
+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 { TOOLS_IDS } from "../../utils/constants";
+var annotationsNamesToKonvaClasses = _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({}, TOOLS_IDS.RECT, Konva.Rect), TOOLS_IDS.ELLIPSE, Konva.Ellipse), TOOLS_IDS.POLYGON, Konva.RegularPolygon), TOOLS_IDS.LINE, Konva.Line), TOOLS_IDS.IMAGE, Konva.Image), TOOLS_IDS.TEXT, Konva.Text), TOOLS_IDS.ARROW, Konva.Arrow);
+var ANNOTATIONS_WITH_POINTS = [TOOLS_IDS.LINE, TOOLS_IDS.ARROW];
+export var NO_WIDTH_HEIGHT_ANNOTATIONS = [].concat(ANNOTATIONS_WITH_POINTS, [TOOLS_IDS.ELLIPSE, TOOLS_IDS.POLYGON]);
+var getNewAnnotationPreview = function getNewAnnotationPreview(annotation) {
+  var _annotation$opacity, _annotation$x, _annotation$y;
+  return new annotationsNamesToKonvaClasses[annotation.name](_objectSpread(_objectSpread({}, annotation), {}, {
+    opacity: (_annotation$opacity = annotation.opacity) !== null && _annotation$opacity !== void 0 ? _annotation$opacity : 0.7,
+    x: (_annotation$x = annotation.x) !== null && _annotation$x !== void 0 ? _annotation$x : 0,
+    y: (_annotation$y = annotation.y) !== null && _annotation$y !== void 0 ? _annotation$y : 0,
+    width: Math.abs(annotation.width) || 0,
+    height: Math.abs(annotation.height) || 0
+  }, ANNOTATIONS_WITH_POINTS.includes(annotation.name) ? {
+    stroke: annotation.stroke || '#000000'
+  } : {}));
+};
+export var dimensToProperAnnotationDimens = function dimensToProperAnnotationDimens(currentDimensions, annotationName, isShiftKeyPressed) {
+  var width = currentDimensions.width,
+    height = currentDimensions.height,
+    startedX = currentDimensions.startedX,
+    startedY = currentDimensions.startedY,
+    newAnnotationDimens = _objectWithoutProperties(currentDimensions, _excluded);
+  var absWidth = Math.abs(width);
+  var absHeight = Math.abs(height);
+  var isReversedX = width < 0;
+  var isReversedY = height < 0;
+  switch (annotationName) {
+    case TOOLS_IDS.RECT:
+      if (isShiftKeyPressed) {
+        newAnnotationDimens.width = Math.sqrt(absWidth * absWidth + absHeight * absHeight);
+        newAnnotationDimens.height = newAnnotationDimens.width;
+        newAnnotationDimens.x -= isReversedX ? newAnnotationDimens.width - absWidth : 0;
+        newAnnotationDimens.y -= isReversedY ? newAnnotationDimens.height - absHeight : 0;
+      } else {
+        newAnnotationDimens.width = absWidth;
+        newAnnotationDimens.height = absHeight;
+      }
+      break;
+    case TOOLS_IDS.ELLIPSE:
+      if (isShiftKeyPressed) {
+        newAnnotationDimens.radiusX = Math.sqrt(absWidth * absWidth + absHeight * absHeight) / 2;
+        newAnnotationDimens.radiusY = newAnnotationDimens.radiusX;
+        newAnnotationDimens.x -= isReversedX ? newAnnotationDimens.radiusX * 2 - absWidth : 0;
+        newAnnotationDimens.y -= isReversedY ? newAnnotationDimens.radiusY * 2 - absHeight : 0;
+      } else {
+        newAnnotationDimens.radiusX = absWidth / 2;
+        newAnnotationDimens.radiusY = absHeight / 2;
+      }
+      newAnnotationDimens.offsetX = -newAnnotationDimens.radiusX;
+      newAnnotationDimens.offsetY = -newAnnotationDimens.radiusY;
+      break;
+    case TOOLS_IDS.POLYGON:
+      newAnnotationDimens.radius = (absWidth + absHeight) / 2;
+      newAnnotationDimens.x -= isReversedX ? newAnnotationDimens.radius * 2 - absWidth : 0;
+      newAnnotationDimens.y -= isReversedY ? newAnnotationDimens.radius * 2 - absHeight : 0;
+      newAnnotationDimens.offsetX = -newAnnotationDimens.radius;
+      newAnnotationDimens.offsetY = -newAnnotationDimens.radius;
+      break;
+    case TOOLS_IDS.LINE:
+    case TOOLS_IDS.ARROW:
+      newAnnotationDimens.x = startedX;
+      newAnnotationDimens.y = startedY;
+      newAnnotationDimens.points = [0, 0];
+      if (isShiftKeyPressed) {
+        newAnnotationDimens.points.push(absWidth >= absHeight ? width : 0, absHeight > absWidth ? height : 0);
+      } else {
+        newAnnotationDimens.points = [0, 0, width, height];
+      }
+      break;
+    default:
+      newAnnotationDimens.width = absWidth;
+      newAnnotationDimens.height = absHeight;
+      break;
+  }
+  return newAnnotationDimens;
+};
+export default getNewAnnotationPreview;

package/lib/hooks/use-annotation/index.js

@@ -1 +1,138 @@
-import _objectWithoutProperties from"@babel/runtime/helpers/objectWithoutProperties";import _slicedToArray from"@babel/runtime/helpers/slicedToArray";import _defineProperty from"@babel/runtime/helpers/defineProperty";var _excluded=["fonts","onFontChange"],_excluded2=["x","y","width","height","radius","radiusX","radiusY","points","image","text","scaleX","scaleY","rotation"],_excluded3=["shouldSave","neverSave"];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,useRef,useState}from"react";import{SELECT_ANNOTATION,SET_ANNOTATION}from"actions";import randomId from"utils/random-id";import debounce from"utils/debounce";import{TOOLS_IDS}from"utils/constants";import{useStore}from"hooks";import previewThenCallAnnotationAdding from"./preview-then-call-annotation-adding";import useDebouncedCallback from"../use-debounced-callback";var useAnnotation=function(){var a,b=0<arguments.length&&void 0!==arguments[0]?arguments[0]:{},c=!(1<arguments.length&&void 0!==arguments[1])||arguments[1],d=useStore(),e=d.dispatch,f=d.previewGroup,g=d.annotations,h=d.selectionsIds,i=void 0===h?[]:h,j=d.config,k=_objectSpread(_objectSpread({},j.annotationsCommon),j[(null===(a=g[i[0]])||void 0===a?void 0:a.name)||b.name]),l=useState(function(){return _objectSpread(_objectSpread(_objectSpread({},k),b),g[i[0]])}),m=_slicedToArray(l,2),n=m[0],o=m[1],p=useRef(null),q=null===f||void 0===f?void 0:f.getStage(),r=useCallback(function(a){var c=a.fonts,d=a.onFontChange,f=_objectWithoutProperties(a,_excluded);e({type:SET_ANNOTATION,payload:f}),f.id&&b.name!==TOOLS_IDS.PEN&&debounce(function(){e({type:SELECT_ANNOTATION,payload:{annotationId:f.id}})},30)()},[b.name,e]),s=useDebouncedCallback(function(a){o(function(b){return _objectSpread(_objectSpread({},b),{},{shouldSave:!1,neverSave:!1},"function"==typeof a?a(b):a)})},15),t=useCallback(function(a,c){if(a.name===c){var d=a.x,e=a.y,f=a.width,g=a.height,h=a.radius,i=a.radiusX,j=a.radiusY,l=a.points,m=a.image,n=a.text,o=a.scaleX,p=a.scaleY,q=a.rotation,r=_objectWithoutProperties(a,_excluded2);return _objectSpread(_objectSpread(_objectSpread({},k),b),r)}return _objectSpread(_objectSpread({},k),b)},[k,b]),u=useCallback(function(a){o(function(c){var d=t(c,a.name||b.name);return _objectSpread(_objectSpread(_objectSpread({},d),a),{},{id:a.id||randomId(a.name||c.name),shouldSave:!0,neverSave:!1})})},[b.name,t]);return useEffect(function(){var a=n.shouldSave,b=n.neverSave,c=_objectWithoutProperties(n,_excluded3),d=1===i.length&&g[i[0]];!b&&(a||d)&&r(_objectSpread(_objectSpread({},c),{},{id:a?c.id:d.id}))},[n,i,g,r]),useEffect(function(){setTimeout(function(){1===i.length?(p.current=n,o(_objectSpread(_objectSpread({},g[i[0]]),{},{neverSave:!0}))):p.current&&(o(_objectSpread(_objectSpread({},p.current),{},{neverSave:!0})),p.current=null)})},[i,g]),useEffect(function(){var a=null;if(q&&c){var d=t(n,b.name);a=previewThenCallAnnotationAdding(q,_objectSpread(_objectSpread({},d),{},{name:b.name}),f,u)}return function(){a&&a()}},[q,n,f,t,b.name,u]),useMemo(function(){return[n,s,u]},[n,s,u])};export default useAnnotation;
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+var _excluded = ["fonts", "onFontChange"],
+  _excluded2 = ["x", "y", "width", "height", "radius", "radiusX", "radiusY", "points", "image", "text", "scaleX", "scaleY", "rotation"],
+  _excluded3 = ["shouldSave", "neverSave"];
+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, useRef, useState } from 'react';
+import { SELECT_ANNOTATION, SET_ANNOTATION } from "../../actions";
+import randomId from "../../utils/random-id";
+import debounce from "../../utils/debounce";
+import { TOOLS_IDS } from "../../utils/constants";
+import { useStore } from "./..";
+import previewThenCallAnnotationAdding from "./preview-then-call-annotation-adding";
+import useDebouncedCallback from "../use-debounced-callback";
+var useAnnotation = function useAnnotation() {
+  var _annotations$selectio;
+  var annotation = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  var enablePreview = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : true;
+  var _useStore = useStore(),
+    dispatch = _useStore.dispatch,
+    previewGroup = _useStore.previewGroup,
+    annotations = _useStore.annotations,
+    _useStore$selectionsI = _useStore.selectionsIds,
+    selectionsIds = _useStore$selectionsI === void 0 ? [] : _useStore$selectionsI,
+    config = _useStore.config;
+  var annotationDefaults = _objectSpread(_objectSpread({}, config.annotationsCommon), config[((_annotations$selectio = annotations[selectionsIds[0]]) === null || _annotations$selectio === void 0 ? void 0 : _annotations$selectio.name) || annotation.name]);
+  var _useState = useState(function () {
+      return _objectSpread(_objectSpread(_objectSpread({}, annotationDefaults), annotation), annotations[selectionsIds[0]]);
+    }),
+    _useState2 = _slicedToArray(_useState, 2),
+    tmpAnnotation = _useState2[0],
+    setTmpAnnotation = _useState2[1];
+  var annotationBeforeSelection = useRef(null);
+  var canvas = previewGroup === null || previewGroup === void 0 ? void 0 : previewGroup.getStage();
+  var saveAnnotation = useCallback(function (annotationData) {
+    var _fonts = annotationData.fonts,
+      _onFontChange = annotationData.onFontChange,
+      savableAnnotationData = _objectWithoutProperties(annotationData, _excluded);
+    dispatch({
+      type: SET_ANNOTATION,
+      payload: savableAnnotationData
+    });
+    if (savableAnnotationData.id && annotation.name !== TOOLS_IDS.PEN) {
+      debounce(function () {
+        dispatch({
+          type: SELECT_ANNOTATION,
+          payload: {
+            annotationId: savableAnnotationData.id
+          }
+        });
+      }, 30)();
+    }
+  }, [annotation.name, dispatch]);
+  var updateTmpAnnotation = useDebouncedCallback(function (updatesObjOrFn) {
+    setTmpAnnotation(function (latest) {
+      return _objectSpread(_objectSpread({}, latest), {}, {
+        shouldSave: false,
+        neverSave: false
+      }, typeof updatesObjOrFn === 'function' ? updatesObjOrFn(latest) : updatesObjOrFn);
+    });
+  }, 15);
+  var getAnnotationInitialProps = useCallback(function (currentAnnotation, newAnnotationName) {
+    if (currentAnnotation.name === newAnnotationName) {
+      var _x = currentAnnotation.x,
+        _y = currentAnnotation.y,
+        _width = currentAnnotation.width,
+        _height = currentAnnotation.height,
+        _radius = currentAnnotation.radius,
+        _radiusX = currentAnnotation.radiusX,
+        _radiusY = currentAnnotation.radiusY,
+        _points = currentAnnotation.points,
+        _image = currentAnnotation.image,
+        _text = currentAnnotation.text,
+        _scaleX = currentAnnotation.scaleX,
+        _scaleY = currentAnnotation.scaleY,
+        _rotation = currentAnnotation.rotation,
+        dimensionlessProps = _objectWithoutProperties(currentAnnotation, _excluded2);
+      return _objectSpread(_objectSpread(_objectSpread({}, annotationDefaults), annotation), dimensionlessProps);
+    }
+    return _objectSpread(_objectSpread({}, annotationDefaults), annotation);
+  }, [annotationDefaults, annotation]);
+  var saveAnnotationNoDebounce = useCallback(function (newAnnotationData) {
+    setTmpAnnotation(function (latest) {
+      var initialProps = getAnnotationInitialProps(latest, newAnnotationData.name || annotation.name);
+      return _objectSpread(_objectSpread(_objectSpread({}, initialProps), newAnnotationData), {}, {
+        id: newAnnotationData.id || randomId(newAnnotationData.name || latest.name),
+        shouldSave: true,
+        neverSave: false
+      });
+    });
+  }, [annotation.name, getAnnotationInitialProps]);
+  useEffect(function () {
+    var shouldSave = tmpAnnotation.shouldSave,
+      neverSave = tmpAnnotation.neverSave,
+      savableAnnotation = _objectWithoutProperties(tmpAnnotation, _excluded3);
+    var selection = selectionsIds.length === 1 && annotations[selectionsIds[0]];
+    if (!neverSave && (shouldSave || selection)) {
+      saveAnnotation(_objectSpread(_objectSpread({}, savableAnnotation), {}, {
+        id: shouldSave ? savableAnnotation.id : selection.id
+      }));
+    }
+  }, [tmpAnnotation, selectionsIds, annotations, saveAnnotation]);
+  useEffect(function () {
+    setTimeout(function () {
+      if (selectionsIds.length === 1) {
+        annotationBeforeSelection.current = tmpAnnotation;
+        setTmpAnnotation(_objectSpread(_objectSpread({}, annotations[selectionsIds[0]]), {}, {
+          neverSave: true
+        }));
+      } else if (annotationBeforeSelection.current) {
+        setTmpAnnotation(_objectSpread(_objectSpread({}, annotationBeforeSelection.current), {}, {
+          neverSave: true
+        }));
+        annotationBeforeSelection.current = null;
+      }
+    });
+  }, [selectionsIds, annotations]);
+  useEffect(function () {
+    var stopAnnotationEventsListening = null;
+    if (canvas && enablePreview) {
+      var annotationInitialProps = getAnnotationInitialProps(tmpAnnotation, annotation.name);
+      stopAnnotationEventsListening = previewThenCallAnnotationAdding(canvas, _objectSpread(_objectSpread({}, annotationInitialProps), {}, {
+        name: annotation.name
+      }), previewGroup, saveAnnotationNoDebounce);
+    }
+    return function () {
+      if (stopAnnotationEventsListening) {
+        stopAnnotationEventsListening();
+      }
+    };
+  }, [canvas, tmpAnnotation, previewGroup, getAnnotationInitialProps, annotation.name, saveAnnotationNoDebounce]);
+  return useMemo(function () {
+    return [tmpAnnotation, updateTmpAnnotation, saveAnnotationNoDebounce];
+  }, [tmpAnnotation, updateTmpAnnotation, saveAnnotationNoDebounce]);
+};
+export default useAnnotation;

package/lib/hooks/use-annotation/preview-then-call-annotation-adding.js

@@ -1 +1,159 @@
-import _objectWithoutProperties from"@babel/runtime/helpers/objectWithoutProperties";import _defineProperty from"@babel/runtime/helpers/defineProperty";var _excluded=["id","x","y","points"],_excluded2=["startedX","startedY","offsetX","offsetY","width","height"];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{TOOLS_IDS}from"utils/constants";import getElemDocumentCoords from"utils/get-elem-document-coords";import getPointerOffsetPositionBoundedToObject from"utils/get-pointer-offset-position-bounded-to-object";import getBoundingRectUnScaled from"./get-bounding-rect-un-scaled";import getNewAnnotationPreview,{dimensToProperAnnotationDimens,NO_WIDTH_HEIGHT_ANNOTATIONS}from"./get-new-annotation-preview";var pointerDown={startedX:void 0,startedY:void 0,isOutOfCanvas:!1},eventsOptions={passive:!0},MIN_PIXELS=1,shownAnnotationPreview=null,textAnnotationWrappedRect=null,latestAnnotationProps=null,previewThenCallAnnotationAdding=function(a,b,c,d){var f=function b(){return getElemDocumentCoords(a.content)},g=function b(a){textAnnotationWrappedRect=getNewAnnotationPreview(_objectSpread(_objectSpread({},a),{},{name:TOOLS_IDS.RECT,fill:"",stroke:"#000000",strokeWidth:2,shadowColor:"#ffffff",shadowBlur:1,shadowOpacity:.7})),c.add(textAnnotationWrappedRect)},h=function b(a){shownAnnotationPreview=getNewAnnotationPreview(a),c.add(shownAnnotationPreview),a.name===TOOLS_IDS.TEXT&&g(a),latestAnnotationProps=a},i=function c(a,b){if(latestAnnotationProps){var d=dimensToProperAnnotationDimens(a,latestAnnotationProps.name,b);textAnnotationWrappedRect&&textAnnotationWrappedRect.setAttrs(d),shownAnnotationPreview.setAttrs(d),latestAnnotationProps=_objectSpread(_objectSpread({},latestAnnotationProps),d)}},j=function b(a){var d=getPointerOffsetPositionBoundedToObject(c,f());i(getBoundingRectUnScaled(d,pointerDown,c),a.shiftKey)},k=function a(){c&&shownAnnotationPreview&&c.destroyChildren()},l=function e(d){var g;if(!(1<(null===(g=d.evt.touches)||void 0===g?void 0:g.length))){var k=getPointerOffsetPositionBoundedToObject(c,f());pointerDown.isOutOfCanvas&&(document.removeEventListener("mousemove",j,eventsOptions),document.removeEventListener("touchmove",j,eventsOptions),pointerDown.isOutOfCanvas=!1);var l=getBoundingRectUnScaled(k,pointerDown,c);if(shownAnnotationPreview)i(l,d.evt.shiftKey);else{var m=b.id,n=b.x,o=b.y,p=b.points,q=_objectWithoutProperties(b,_excluded);h(_objectSpread(_objectSpread({},q),l))}a.setAttrs({isDrawing:!0})}},m=function a(){pointerDown.isOutOfCanvas||(document.addEventListener("mousemove",j,eventsOptions),document.addEventListener("touchmove",j,eventsOptions),pointerDown.isOutOfCanvas=!0)},n=function c(){var e,f;if(k(),latestAnnotationProps&&(latestAnnotationProps.width>=MIN_PIXELS&&latestAnnotationProps.height>=MIN_PIXELS||latestAnnotationProps.radiusX>=MIN_PIXELS&&latestAnnotationProps.radiusY>=MIN_PIXELS||null!==(e=latestAnnotationProps.points)&&void 0!==e&&e[2]||null!==(f=latestAnnotationProps.points)&&void 0!==f&&f[3]||latestAnnotationProps.radius>=MIN_PIXELS)){var g=latestAnnotationProps,h=g.startedX,i=g.startedY,o=g.offsetX,p=g.offsetY,q=g.width,r=g.height,s=_objectWithoutProperties(g,_excluded2);NO_WIDTH_HEIGHT_ANNOTATIONS.includes(b.name)||(s.width=q,s.height=r),d(s,!0)}shownAnnotationPreview=null,textAnnotationWrappedRect=null,latestAnnotationProps=null,a.setAttrs({isDrawing:!1}),a.off("mousemove touchmove",l),a.off("mouseleave touchcancel",m),document.removeEventListener("mouseup",n,eventsOptions),document.removeEventListener("touchend",n,eventsOptions),document.removeEventListener("mouseleave",n,eventsOptions),document.removeEventListener("touchcancel",n,eventsOptions),document.removeEventListener("mousemove",j,eventsOptions),document.removeEventListener("touchmove",j,eventsOptions),pointerDown.isOutOfCanvas=!1},o=function d(b){var e;if(b.evt.preventDefault(),!(b.target.attrs.draggable||1<(null===(e=b.evt.touches)||void 0===e?void 0:e.length))){k();var g=getPointerOffsetPositionBoundedToObject(c,f());pointerDown.startedX=g.offsetX,pointerDown.startedY=g.offsetY,pointerDown.isOutOfCanvas=!1,a.on("mousemove touchmove",l),a.on("mouseleave touchcancel",m),document.addEventListener("mouseup",n,eventsOptions),document.addEventListener("touchend",n,eventsOptions),document.addEventListener("mouseleave",n,eventsOptions),document.addEventListener("touchcancel",n,eventsOptions)}};return a.on("mousedown touchstart",o),function(){k(),a.off("mousedown touchstart",o)}};export default previewThenCallAnnotationAdding;
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+var _excluded = ["id", "x", "y", "points"],
+  _excluded2 = ["startedX", "startedY", "offsetX", "offsetY", "width", "height"];
+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 { TOOLS_IDS } from "../../utils/constants";
+import getElemDocumentCoords from "../../utils/get-elem-document-coords";
+import getPointerOffsetPositionBoundedToObject from "../../utils/get-pointer-offset-position-bounded-to-object";
+import getBoundingRectUnScaled from "./get-bounding-rect-un-scaled";
+import getNewAnnotationPreview, { dimensToProperAnnotationDimens, NO_WIDTH_HEIGHT_ANNOTATIONS } from "./get-new-annotation-preview";
+var pointerDown = {
+  startedX: undefined,
+  startedY: undefined,
+  isOutOfCanvas: false
+};
+var eventsOptions = {
+  passive: true
+};
+var MIN_PIXELS = 1;
+var shownAnnotationPreview = null;
+var textAnnotationWrappedRect = null;
+var latestAnnotationProps = null;
+var previewThenCallAnnotationAdding = function previewThenCallAnnotationAdding(canvas, annotation, previewGroup, callbkAfterPreview) {
+  var getCanvasBoundingRect = function getCanvasBoundingRect() {
+    return getElemDocumentCoords(canvas.content);
+  };
+  var wrapTextBoundsPreviewByRect = function wrapTextBoundsPreviewByRect(textAnnotation) {
+    textAnnotationWrappedRect = getNewAnnotationPreview(_objectSpread(_objectSpread({}, textAnnotation), {}, {
+      name: TOOLS_IDS.RECT,
+      fill: '',
+      stroke: '#000000',
+      strokeWidth: 2,
+      shadowColor: '#ffffff',
+      shadowBlur: 1,
+      shadowOpacity: 0.7
+    }));
+    previewGroup.add(textAnnotationWrappedRect);
+  };
+  var previewAnnotation = function previewAnnotation(preparedAnnotation) {
+    shownAnnotationPreview = getNewAnnotationPreview(preparedAnnotation);
+    previewGroup.add(shownAnnotationPreview);
+    if (preparedAnnotation.name === TOOLS_IDS.TEXT) {
+      wrapTextBoundsPreviewByRect(preparedAnnotation);
+    }
+    latestAnnotationProps = preparedAnnotation;
+  };
+  var updateAnnotationPreview = function updateAnnotationPreview(preparedBoundingRect, isShiftKeyPressed) {
+    if (!latestAnnotationProps) {
+      return;
+    }
+    var transformedAnnotation = dimensToProperAnnotationDimens(preparedBoundingRect, latestAnnotationProps.name, isShiftKeyPressed);
+    if (textAnnotationWrappedRect) {
+      textAnnotationWrappedRect.setAttrs(transformedAnnotation);
+    }
+    shownAnnotationPreview.setAttrs(transformedAnnotation);
+    latestAnnotationProps = _objectSpread(_objectSpread({}, latestAnnotationProps), transformedAnnotation);
+  };
+  var updatePreviewWithBoundedDimens = function updatePreviewWithBoundedDimens(e) {
+    var pointerOffsets = getPointerOffsetPositionBoundedToObject(previewGroup, getCanvasBoundingRect());
+    updateAnnotationPreview(getBoundingRectUnScaled(pointerOffsets, pointerDown, previewGroup), e.shiftKey);
+  };
+  var destroyShownPreview = function destroyShownPreview() {
+    if (previewGroup && shownAnnotationPreview) {
+      previewGroup.destroyChildren();
+    }
+  };
+  var handlePointerMove = function handlePointerMove(e) {
+    var _e$evt$touches;
+    if (((_e$evt$touches = e.evt.touches) === null || _e$evt$touches === void 0 ? void 0 : _e$evt$touches.length) > 1) {
+      return;
+    }
+    var pointerOffsets = getPointerOffsetPositionBoundedToObject(previewGroup, getCanvasBoundingRect());
+    if (pointerDown.isOutOfCanvas) {
+      document.removeEventListener('mousemove', updatePreviewWithBoundedDimens, eventsOptions);
+      document.removeEventListener('touchmove', updatePreviewWithBoundedDimens, eventsOptions);
+      pointerDown.isOutOfCanvas = false;
+    }
+    var boundingRect = getBoundingRectUnScaled(pointerOffsets, pointerDown, previewGroup);
+    if (shownAnnotationPreview) {
+      updateAnnotationPreview(boundingRect, e.evt.shiftKey);
+    } else {
+      var _id = annotation.id,
+        _x = annotation.x,
+        _y = annotation.y,
+        _points = annotation.points,
+        currentAnnotationProps = _objectWithoutProperties(annotation, _excluded);
+      previewAnnotation(_objectSpread(_objectSpread({}, currentAnnotationProps), boundingRect));
+    }
+    canvas.setAttrs({
+      isDrawing: true
+    });
+  };
+  var handlePointerOut = function handlePointerOut() {
+    if (!pointerDown.isOutOfCanvas) {
+      document.addEventListener('mousemove', updatePreviewWithBoundedDimens, eventsOptions);
+      document.addEventListener('touchmove', updatePreviewWithBoundedDimens, eventsOptions);
+      pointerDown.isOutOfCanvas = true;
+    }
+  };
+  var _handlePointerUp = function handlePointerUp() {
+    var _latestAnnotationProp, _latestAnnotationProp2;
+    destroyShownPreview();
+    if (latestAnnotationProps && (latestAnnotationProps.width >= MIN_PIXELS && latestAnnotationProps.height >= MIN_PIXELS || latestAnnotationProps.radiusX >= MIN_PIXELS && latestAnnotationProps.radiusY >= MIN_PIXELS || (_latestAnnotationProp = latestAnnotationProps.points) !== null && _latestAnnotationProp !== void 0 && _latestAnnotationProp[2] || (_latestAnnotationProp2 = latestAnnotationProps.points) !== null && _latestAnnotationProp2 !== void 0 && _latestAnnotationProp2[3] || latestAnnotationProps.radius >= MIN_PIXELS)) {
+      var _latestAnnotationProp3 = latestAnnotationProps,
+        _startedX = _latestAnnotationProp3.startedX,
+        _startedY = _latestAnnotationProp3.startedY,
+        _offsetX = _latestAnnotationProp3.offsetX,
+        _offsetY = _latestAnnotationProp3.offsetY,
+        width = _latestAnnotationProp3.width,
+        height = _latestAnnotationProp3.height,
+        savableAnnotation = _objectWithoutProperties(_latestAnnotationProp3, _excluded2);
+      if (!NO_WIDTH_HEIGHT_ANNOTATIONS.includes(annotation.name)) {
+        savableAnnotation.width = width;
+        savableAnnotation.height = height;
+      }
+      callbkAfterPreview(savableAnnotation, true);
+    }
+    shownAnnotationPreview = null;
+    textAnnotationWrappedRect = null;
+    latestAnnotationProps = null;
+    canvas.setAttrs({
+      isDrawing: false
+    });
+    canvas.off('mousemove touchmove', handlePointerMove);
+    canvas.off('mouseleave touchcancel', handlePointerOut);
+    document.removeEventListener('mouseup', _handlePointerUp, eventsOptions);
+    document.removeEventListener('touchend', _handlePointerUp, eventsOptions);
+    document.removeEventListener('mouseleave', _handlePointerUp, eventsOptions);
+    document.removeEventListener('touchcancel', _handlePointerUp, eventsOptions);
+    document.removeEventListener('mousemove', updatePreviewWithBoundedDimens, eventsOptions);
+    document.removeEventListener('touchmove', updatePreviewWithBoundedDimens, eventsOptions);
+    pointerDown.isOutOfCanvas = false;
+  };
+  var handlePointerDown = function handlePointerDown(e) {
+    var _e$evt$touches2;
+    e.evt.preventDefault();
+    if (e.target.attrs.draggable || ((_e$evt$touches2 = e.evt.touches) === null || _e$evt$touches2 === void 0 ? void 0 : _e$evt$touches2.length) > 1) {
+      return;
+    }
+    destroyShownPreview();
+    var pointerOffsets = getPointerOffsetPositionBoundedToObject(previewGroup, getCanvasBoundingRect());
+    pointerDown.startedX = pointerOffsets.offsetX;
+    pointerDown.startedY = pointerOffsets.offsetY;
+    pointerDown.isOutOfCanvas = false;
+    canvas.on('mousemove touchmove', handlePointerMove);
+    canvas.on('mouseleave touchcancel', handlePointerOut);
+    document.addEventListener('mouseup', _handlePointerUp, eventsOptions);
+    document.addEventListener('touchend', _handlePointerUp, eventsOptions);
+    document.addEventListener('mouseleave', _handlePointerUp, eventsOptions);
+    document.addEventListener('touchcancel', _handlePointerUp, eventsOptions);
+  };
+  canvas.on('mousedown touchstart', handlePointerDown);
+  return function () {
+    destroyShownPreview();
+    canvas.off('mousedown touchstart', handlePointerDown);
+  };
+};
+export default previewThenCallAnnotationAdding;

package/lib/hooks/use-annotation-events.js

@@ -1 +1,83 @@
-import{useMemo,useCallback}from"react";import{SET_ANNOTATION,SELECT_ANNOTATION,SELECT_TOOL}from"actions";import{TOOLS_IDS,TABS_IDS,WATERMARK_ANNOTATION_ID}from"utils/constants";import useStore from"./use-store";var useAnnotationEvents=function(){var a=useStore(),b=a.tabId,c=a.dispatch,d=useMemo(function(){return b!==TABS_IDS.ANNOTATE&&b!==TABS_IDS.WATERMARK},[b]),f=useCallback(function(a){c({type:SET_ANNOTATION,payload:a})},[]),g=useCallback(function(a){f({id:a.target.id(),x:a.target.x(),y:a.target.y()})},[]),h=useCallback(function(a){var b={id:a.target.id(),rotation:a.target.rotation(),x:a.target.x(),y:a.target.y()};return a.target.name()===TOOLS_IDS.TEXT?(b.width=a.target.width()*a.target.scaleX(),b.height=a.target.height()*a.target.scaleY(),b.scaleX=1,b.scaleY=1):(b.scaleX=a.target.scaleX(),b.scaleY=a.target.scaleY()),b},[]),i=useCallback(function(a){f(h(a))},[]),j=useCallback(function(a){a.target.name()===TOOLS_IDS.TEXT&&a.target.setAttrs(h(a))},[]),k=useCallback(function(a){var b;if(!(a.target.id()===WATERMARK_ANNOTATION_ID||null!==(b=a.target.getStage())&&void 0!==b&&b.attrs.isDrawing)){var d=a.evt,e="ctrlKey"in d&&(d.ctrlKey||d.shiftKey||d.metaKey)||!1;c({type:SELECT_ANNOTATION,payload:{annotationId:a.target.id(),multiple:e}}),c({type:SELECT_TOOL,payload:{toolId:a.target.name(),keepSelections:e}})}},[]);return useMemo(function(){return d?{}:{onTransform:j,onTransformEnd:i,onDragEnd:g,onClick:k,onTap:k}},[d])};export default useAnnotationEvents;
+import { useMemo, useCallback } from 'react';
+import { SET_ANNOTATION, SELECT_ANNOTATION, SELECT_TOOL } from "../actions";
+import { TOOLS_IDS, TABS_IDS, WATERMARK_ANNOTATION_ID } from "../utils/constants";
+import useStore from "./use-store";
+var useAnnotationEvents = function useAnnotationEvents() {
+  var _useStore = useStore(),
+    tabId = _useStore.tabId,
+    dispatch = _useStore.dispatch;
+  var isAnnotationEventsDisabled = useMemo(function () {
+    return tabId !== TABS_IDS.ANNOTATE && tabId !== TABS_IDS.WATERMARK;
+  }, [tabId]);
+  var updateAnnotation = useCallback(function (annotationProps) {
+    dispatch({
+      type: SET_ANNOTATION,
+      payload: annotationProps
+    });
+  }, []);
+  var updatePositionOnDragEnd = useCallback(function (e) {
+    updateAnnotation({
+      id: e.target.id(),
+      x: e.target.x(),
+      y: e.target.y()
+    });
+  }, []);
+  var getAnnotationTransformProps = useCallback(function (e) {
+    var transformProps = {
+      id: e.target.id(),
+      rotation: e.target.rotation(),
+      x: e.target.x(),
+      y: e.target.y()
+    };
+    if (e.target.name() === TOOLS_IDS.TEXT) {
+      transformProps.width = e.target.width() * e.target.scaleX();
+      transformProps.height = e.target.height() * e.target.scaleY();
+      transformProps.scaleX = 1;
+      transformProps.scaleY = 1;
+    } else {
+      transformProps.scaleX = e.target.scaleX();
+      transformProps.scaleY = e.target.scaleY();
+    }
+    return transformProps;
+  }, []);
+  var updateAnnotationTransform = useCallback(function (e) {
+    updateAnnotation(getAnnotationTransformProps(e));
+  }, []);
+  var updateTextAnnotationOnTransform = useCallback(function (e) {
+    if (e.target.name() === TOOLS_IDS.TEXT) {
+      e.target.setAttrs(getAnnotationTransformProps(e));
+    }
+  }, []);
+  var selectAnnotationOnClick = useCallback(function (e) {
+    var _e$target$getStage;
+    if (e.target.id() === WATERMARK_ANNOTATION_ID || (_e$target$getStage = e.target.getStage()) !== null && _e$target$getStage !== void 0 && _e$target$getStage.attrs.isDrawing) {
+      return;
+    }
+    var evt = e.evt;
+    var multiple = 'ctrlKey' in evt && (evt.ctrlKey || evt.shiftKey || evt.metaKey) || false;
+    dispatch({
+      type: SELECT_ANNOTATION,
+      payload: {
+        annotationId: e.target.id(),
+        multiple: multiple
+      }
+    });
+    dispatch({
+      type: SELECT_TOOL,
+      payload: {
+        toolId: e.target.name(),
+        keepSelections: multiple
+      }
+    });
+  }, []);
+  return useMemo(function () {
+    return isAnnotationEventsDisabled ? {} : {
+      onTransform: updateTextAnnotationOnTransform,
+      onTransformEnd: updateAnnotationTransform,
+      onDragEnd: updatePositionOnDragEnd,
+      onClick: selectAnnotationOnClick,
+      onTap: selectAnnotationOnClick
+    };
+  }, [isAnnotationEventsDisabled]);
+};
+export default useAnnotationEvents;

package/lib/hooks/use-app-reducer.js

@@ -1 +1,53 @@
-import _toConsumableArray from"@babel/runtime/helpers/toConsumableArray";import _objectWithoutProperties from"@babel/runtime/helpers/objectWithoutProperties";import _defineProperty from"@babel/runtime/helpers/defineProperty";var _excluded=["isDesignState"];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{useReducer}from"react";import{REDO,RESET,UNDO}from"actions";import extractCurrentDesignState from"utils/extract-current-design-state";var timeout,applyModifyFn=function(a,b){timeout=setTimeout(function(){clearTimeout(timeout),"function"==typeof a&&b&&a(b)})},useAppReducer=function(a,b){var c=2<arguments.length&&arguments[2]!==void 0?arguments[2]:{},d=_objectSpread(_objectSpread({},b),{},{pastDesignStates:[],futureDesignStates:[],hasRedo:!1,hasUndo:!1});return useReducer(function(b,e){var f=a(b,e)||d;if([UNDO,REDO,RESET].includes(e.type))return applyModifyFn(c.onModify,f),f;if(f.isDesignState){var g=extractCurrentDesignState(b,!1),h=f.isDesignState,i=_objectWithoutProperties(f,_excluded),j=_objectSpread(_objectSpread({},i),{},{isDesignState:!1,pastDesignStates:[g].concat(_toConsumableArray(b.pastDesignStates)),hasUndo:!0,hasRedo:!1,futureDesignStates:[],isResetted:!1,haveNotSavedChanges:!0});return applyModifyFn(c.onModify,j),j}return f},d)};export default useAppReducer;
+import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+var _excluded = ["isDesignState"];
+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 { useReducer } from 'react';
+import { REDO, RESET, UNDO } from "../actions";
+import extractCurrentDesignState from "../utils/extract-current-design-state";
+var timeout;
+var applyModifyFn = function applyModifyFn(onModify, newState) {
+  timeout = setTimeout(function () {
+    clearTimeout(timeout);
+    if (typeof onModify === 'function' && newState) {
+      onModify(newState);
+    }
+  });
+};
+var useAppReducer = function useAppReducer(reducer, initialState) {
+  var passedConfig = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
+  var initialStateWithUndoRedo = _objectSpread(_objectSpread({}, initialState), {}, {
+    pastDesignStates: [],
+    futureDesignStates: [],
+    hasRedo: false,
+    hasUndo: false
+  });
+  var undoRedoResetReducer = function undoRedoResetReducer(state, action) {
+    var newPresentState = reducer(state, action) || initialStateWithUndoRedo;
+    if ([UNDO, REDO, RESET].includes(action.type)) {
+      applyModifyFn(passedConfig.onModify, newPresentState);
+      return newPresentState;
+    }
+    if (newPresentState.isDesignState) {
+      var currentState = extractCurrentDesignState(state, false);
+      var _isDesignState = newPresentState.isDesignState,
+        neededNewPresentState = _objectWithoutProperties(newPresentState, _excluded);
+      var newState = _objectSpread(_objectSpread({}, neededNewPresentState), {}, {
+        isDesignState: false,
+        pastDesignStates: [currentState].concat(_toConsumableArray(state.pastDesignStates)),
+        hasUndo: true,
+        hasRedo: false,
+        futureDesignStates: [],
+        isResetted: false,
+        haveNotSavedChanges: true
+      });
+      applyModifyFn(passedConfig.onModify, newState);
+      return newState;
+    }
+    return newPresentState;
+  };
+  return useReducer(undoRedoResetReducer, initialStateWithUndoRedo);
+};
+export default useAppReducer;

package/lib/hooks/use-debounced-callback.js

@@ -1 +1,7 @@
-import{useCallback}from"react";import debounce from"utils/debounce";var useDebouncedCallback=function(a,b){var c=2<arguments.length&&arguments[2]!==void 0?arguments[2]:[];return useCallback(debounce(a,b),c)};export default useDebouncedCallback;
+import { useCallback } from 'react';
+import debounce from "../utils/debounce";
+var useDebouncedCallback = function useDebouncedCallback(func, timeout) {
+  var dependencies = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : [];
+  return useCallback(debounce(func, timeout), dependencies);
+};
+export default useDebouncedCallback;

package/lib/hooks/use-drag.js

@@ -1 +1,37 @@
-var useDrag=function(a,b,c){var d=function(b){if("function"==typeof a){var c;a((null===(c=b.touches)||void 0===c?void 0:c[0])||b)}},f=function(a){if(document.removeEventListener("mousemove",d),document.removeEventListener("mouseup",f),document.removeEventListener("mouseleave",f),document.removeEventListener("touchmove",d),document.removeEventListener("touchend",f),document.removeEventListener("touchcancel",f),"function"==typeof c){var b;c((null===(b=a.touches)||void 0===b?void 0:b[0])||a)}},g=function(a){if(document.addEventListener("mousemove",d),document.addEventListener("mouseup",f),document.addEventListener("mouseleave",f),document.addEventListener("touchmove",d),document.addEventListener("touchend",f),document.addEventListener("touchcancel",f),"function"==typeof b){var c;b((null===(c=a.touches)||void 0===c?void 0:c[0])||a)}};return{onMouseDown:g,onTouchStart:g}};export default useDrag;
+var useDrag = function useDrag(onMove, onStart, onEnd) {
+  var onDragging = function onDragging(e) {
+    if (typeof onMove === 'function') {
+      var _touches;
+      onMove(((_touches = e.touches) === null || _touches === void 0 ? void 0 : _touches[0]) || e);
+    }
+  };
+  var _disableSliding = function disableSliding(e) {
+    document.removeEventListener('mousemove', onDragging);
+    document.removeEventListener('mouseup', _disableSliding);
+    document.removeEventListener('mouseleave', _disableSliding);
+    document.removeEventListener('touchmove', onDragging);
+    document.removeEventListener('touchend', _disableSliding);
+    document.removeEventListener('touchcancel', _disableSliding);
+    if (typeof onEnd === 'function') {
+      var _touches2;
+      onEnd(((_touches2 = e.touches) === null || _touches2 === void 0 ? void 0 : _touches2[0]) || e);
+    }
+  };
+  var enableDrag = function enableDrag(e) {
+    document.addEventListener('mousemove', onDragging);
+    document.addEventListener('mouseup', _disableSliding);
+    document.addEventListener('mouseleave', _disableSliding);
+    document.addEventListener('touchmove', onDragging);
+    document.addEventListener('touchend', _disableSliding);
+    document.addEventListener('touchcancel', _disableSliding);
+    if (typeof onStart === 'function') {
+      var _touches3;
+      onStart(((_touches3 = e.touches) === null || _touches3 === void 0 ? void 0 : _touches3[0]) || e);
+    }
+  };
+  return {
+    onMouseDown: enableDrag,
+    onTouchStart: enableDrag
+  };
+};
+export default useDrag;

package/lib/hooks/use-filter.js

@@ -1 +1,20 @@
-import{useCallback,useMemo}from"react";import{ADD_FILTER}from"actions";import useStore from"./use-store";var useFilter=function(){var a=useStore(),b=a.dispatch,c=a.filter,d=useCallback(function(a){b({type:ADD_FILTER,payload:{filter:a}})},[]);return useMemo(function(){return[c,d]},[c])};export default useFilter;
+import { useCallback, useMemo } from 'react';
+import { ADD_FILTER } from "../actions";
+import useStore from "./use-store";
+var useFilter = function useFilter() {
+  var _useStore = useStore(),
+    dispatch = _useStore.dispatch,
+    filter = _useStore.filter;
+  var setFilter = useCallback(function (filterToApply) {
+    dispatch({
+      type: ADD_FILTER,
+      payload: {
+        filter: filterToApply
+      }
+    });
+  }, []);
+  return useMemo(function () {
+    return [filter, setFilter];
+  }, [filter]);
+};
+export default useFilter;