@solostylist/image-editor 1.0.8 → 1.0.10

package/lib/components/layers/transformers-layer/transformers-layer.utils.js

@@ -1 +1,93 @@
-import _defineProperty from"@babel/runtime/helpers/defineProperty";import _slicedToArray from"@babel/runtime/helpers/slicedToArray";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 compareRatios from"utils/compare-ratios";import restrictNumber from"utils/restrict-number";import toPrecisedFloat from"utils/to-precised-float";export var boundDragging=function(a,b){var c=b.width-(2*a.radiusX||a.width),d=b.height-(2*a.radiusY||a.height);return{x:toPrecisedFloat(Math.min(Math.max(a.x,0),c)),y:toPrecisedFloat(Math.min(Math.max(a.y,0),d))}};export var getPositionByPlaceLabel=function(a,b,c){var d=a.split("-"),e=_slicedToArray(d,2),f=e[0],g=e[1],h={x:0,y:0};return"center"===f?h.y=b.height/2-c.height/2:"bottom"===f&&(h.y=b.height-c.height),"center"===g?h.x=b.width/2-c.width/2:"right"===g&&(h.x=b.width-c.width),h};export var boundResizing=function(a,b,c,d){var e=4<arguments.length&&void 0!==arguments[4]?arguments[4]:{},f={x:toPrecisedFloat(c.abstractX*c.scaledBy),y:toPrecisedFloat(c.abstractY*c.scaledBy),width:toPrecisedFloat(c.width*(e.noScale?1:c.scaledBy)),height:toPrecisedFloat(c.height*(e.noScale?1:c.scaledBy))},g=_objectSpread({},b);if(b.x<f.x&&(g.x=f.x,g.width=a.x-f.x+a.width),b.y<f.y&&(g.y=f.y,g.height=a.y-f.y+a.height),g.x+g.width>f.x+f.width&&(g.width=f.x+f.width-g.x),g.y+g.height>f.y+f.height&&(g.height=f.y+f.height-g.y),"number"==typeof d&&!compareRatios(g.width/g.height,d)){var h=g.height*d,i=g.width/d;toPrecisedFloat(g.y+i)<=f.y+f.height?g.height=i:g.width=h}if((e.minWidth&&g.width<=e.minWidth||e.maxWidth&&g.width>=e.maxWidth)&&(g.width=restrictNumber(g.width,e.minWidth,e.maxWidth),g.x=a.x,g.y=a.y,"number"==typeof d&&(g.height=g.width/d)),(e.minHeight&&b.height<=e.minHeight||e.maxHeight&&b.height>=e.maxHeight)&&(g.height=restrictNumber(g.height,e.minHeight,e.maxHeight),g.x=a.x,g.y=a.y,"number"==typeof d&&(g.width=g.height*d)),"string"==typeof e.lockCropAreaAt){var j=getPositionByPlaceLabel(e.lockCropAreaAt,f,g),k=j.x,l=j.y;g.x=k,g.y=l}return g};
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+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 compareRatios from 'utils/compare-ratios';
+import restrictNumber from 'utils/restrict-number';
+import toPrecisedFloat from 'utils/to-precised-float';
+export var boundDragging = function boundDragging(newDimensions, allowedArea) {
+  var maxAllowedX = allowedArea.width - (newDimensions.radiusX * 2 || newDimensions.width);
+  var maxAllowedY = allowedArea.height - (newDimensions.radiusY * 2 || newDimensions.height);
+  return {
+    x: toPrecisedFloat(Math.min(Math.max(newDimensions.x, 0), maxAllowedX)),
+    y: toPrecisedFloat(Math.min(Math.max(newDimensions.y, 0), maxAllowedY))
+  };
+};
+export var getPositionByPlaceLabel = function getPositionByPlaceLabel(position, allowedArea, currentDimensions) {
+  var _position$split = position.split('-'),
+    _position$split2 = _slicedToArray(_position$split, 2),
+    yPlace = _position$split2[0],
+    xPlace = _position$split2[1];
+  var newPosition = {
+    x: 0,
+    y: 0
+  };
+  if (yPlace === 'center') {
+    newPosition.y = allowedArea.height / 2 - currentDimensions.height / 2;
+  } else if (yPlace === 'bottom') {
+    newPosition.y = allowedArea.height - currentDimensions.height;
+  }
+  if (xPlace === 'center') {
+    newPosition.x = allowedArea.width / 2 - currentDimensions.width / 2;
+  } else if (xPlace === 'right') {
+    newPosition.x = allowedArea.width - currentDimensions.width;
+  }
+  return newPosition;
+};
+export var boundResizing = function boundResizing(oldDimensions, newDimensions, allowedArea, ratio) {
+  var cropRestrictions = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : {};
+  var scaledAllowedArea = {
+    x: toPrecisedFloat(allowedArea.abstractX * allowedArea.scaledBy),
+    y: toPrecisedFloat(allowedArea.abstractY * allowedArea.scaledBy),
+    width: toPrecisedFloat(allowedArea.width * (cropRestrictions.noScale ? 1 : allowedArea.scaledBy)),
+    height: toPrecisedFloat(allowedArea.height * (cropRestrictions.noScale ? 1 : allowedArea.scaledBy))
+  };
+  var boundedDimensions = _objectSpread({}, newDimensions);
+  if (newDimensions.x < scaledAllowedArea.x) {
+    boundedDimensions.x = scaledAllowedArea.x;
+    boundedDimensions.width = oldDimensions.x - scaledAllowedArea.x + oldDimensions.width;
+  }
+  if (newDimensions.y < scaledAllowedArea.y) {
+    boundedDimensions.y = scaledAllowedArea.y;
+    boundedDimensions.height = oldDimensions.y - scaledAllowedArea.y + oldDimensions.height;
+  }
+  if (boundedDimensions.x + boundedDimensions.width > scaledAllowedArea.x + scaledAllowedArea.width) {
+    boundedDimensions.width = scaledAllowedArea.x + scaledAllowedArea.width - boundedDimensions.x;
+  }
+  if (boundedDimensions.y + boundedDimensions.height > scaledAllowedArea.y + scaledAllowedArea.height) {
+    boundedDimensions.height = scaledAllowedArea.y + scaledAllowedArea.height - boundedDimensions.y;
+  }
+  if (typeof ratio === 'number' && !compareRatios(boundedDimensions.width / boundedDimensions.height, ratio)) {
+    var ratioedBoundedWidth = boundedDimensions.height * ratio;
+    var ratioedBoundedHeight = boundedDimensions.width / ratio;
+    if (toPrecisedFloat(boundedDimensions.y + ratioedBoundedHeight) <= scaledAllowedArea.y + scaledAllowedArea.height) {
+      boundedDimensions.height = ratioedBoundedHeight;
+    } else {
+      boundedDimensions.width = ratioedBoundedWidth;
+    }
+  }
+  if (cropRestrictions.minWidth && boundedDimensions.width <= cropRestrictions.minWidth || cropRestrictions.maxWidth && boundedDimensions.width >= cropRestrictions.maxWidth) {
+    boundedDimensions.width = restrictNumber(boundedDimensions.width, cropRestrictions.minWidth, cropRestrictions.maxWidth);
+    boundedDimensions.x = oldDimensions.x;
+    boundedDimensions.y = oldDimensions.y;
+    if (typeof ratio === 'number') {
+      boundedDimensions.height = boundedDimensions.width / ratio;
+    }
+  }
+  if (cropRestrictions.minHeight && newDimensions.height <= cropRestrictions.minHeight || cropRestrictions.maxHeight && newDimensions.height >= cropRestrictions.maxHeight) {
+    boundedDimensions.height = restrictNumber(boundedDimensions.height, cropRestrictions.minHeight, cropRestrictions.maxHeight);
+    boundedDimensions.x = oldDimensions.x;
+    boundedDimensions.y = oldDimensions.y;
+    if (typeof ratio === 'number') {
+      boundedDimensions.width = boundedDimensions.height * ratio;
+    }
+  }
+  if (typeof cropRestrictions.lockCropAreaAt === 'string') {
+    var _getPositionByPlaceLa = getPositionByPlaceLabel(cropRestrictions.lockCropAreaAt, scaledAllowedArea, boundedDimensions),
+      x = _getPositionByPlaceLa.x,
+      y = _getPositionByPlaceLa.y;
+    boundedDimensions.x = x;
+    boundedDimensions.y = y;
+  }
+  return boundedDimensions;
+};

package/lib/components/main-canvas/canvas-node.js

@@ -1 +1,177 @@
-import _defineProperty from"@babel/runtime/helpers/defineProperty";import _slicedToArray from"@babel/runtime/helpers/slicedToArray";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{memo,useCallback,useEffect,useMemo,useRef,useState}from"react";import{Stage,useStrictMode}from"react-konva";import{CHANGE_POINTER_ICON,CLEAR_ANNOTATIONS_SELECTIONS,ZOOM_CANVAS}from"actions";import{useStore}from"hooks";import{DEFAULT_ZOOM_FACTOR,POINTER_ICONS,TABS_IDS,TOOLS_IDS}from"utils/constants";import{endTouchesZooming,zoomOnTouchesMove}from"./touch-zooming-events";var ZOOM_DELTA_TO_SCALE_CONVERT_FACTOR=.006,CanvasNode=function(a){var b=a.children;useStrictMode(!0);var c=useRef(null),d=useStore(),f=d.dispatch,g=d.pointerCssIcon,h=d.tabId,i=d.toolId,j=d.canvasWidth,k=d.canvasHeight,l=d.canvasScale,m=d.selectionsIds,n=void 0===m?[]:m,o=d.zoom,p=void 0===o?{}:o,q=d.config,r=q.previewPixelRatio,s=q.disableZooming;Konva.pixelRatio=r;var t=DEFAULT_ZOOM_FACTOR,u=!s&&i!==TOOLS_IDS.CROP,v=useState(h!==TABS_IDS.ANNOTATE&&h!==TABS_IDS.WATERMARK&&p.factor>t),w=_slicedToArray(v,2),x=w[0],y=w[1],z=useMemo(function(){return{cursor:g===POINTER_ICONS.DEFAULT&&h===TABS_IDS.ANNOTATE?POINTER_ICONS.DRAW:g}},[h,g]),A=function(a){f({type:ZOOM_CANVAS,payload:a})},B=useCallback(function(a){var b;a.evt.preventDefault();var c=a.currentTarget;null===(b=c.container)||void 0===b||b.call(c).focus(),a.target instanceof Konva.Stage&&0<n.length&&f({type:CLEAR_ANNOTATIONS_SELECTIONS})},[n]),C=function(){return y(h!==TABS_IDS.ANNOTATE||h===TABS_IDS.WATERMARK)},D=function(a){("Space"===a.code||"Control"===a.key)&&!a.repeat&&p.factor>t&&u&&(a.preventDefault(),y(!0),f({type:CHANGE_POINTER_ICON,payload:{pointerCssIcon:POINTER_ICONS.DRAG}}))},E=function(a){"Space"===a.code&&(a.preventDefault(),C())},F=function(){c.current&&c.current.container().focus()};useEffect(function(){f({type:CHANGE_POINTER_ICON,payload:{pointerCssIcon:POINTER_ICONS[x?"DRAG":"DEFAULT"]}})},[x]),useEffect(function(){y(h!==TABS_IDS.ANNOTATE&&h!==TABS_IDS.WATERMARK&&p.factor>t);var a;return c.current&&(a=c.current.container(),a.addEventListener("mouseenter",F),a.addEventListener("keydown",D),a.addEventListener("keyup",E)),function(){a&&(a.removeEventListener("mouseenter",F),a.removeEventListener("keydown",D),a.removeEventListener("keyup",E))}},[h,p.factor,t]);var G=l*(u&&p.factor||t);return React.createElement(Stage,{tabIndex:-1,ref:c,width:j,height:k,scaleX:G,scaleY:G,x:u&&p.x||null,y:u&&p.y||null,zoomFactor:u&&p.factor||t,onWheel:u?function(a){a.evt.preventDefault();var b=a.currentTarget,c=b.getPointerPosition();if(c){var d=(p.factor||t)+a.evt.deltaY*-ZOOM_DELTA_TO_SCALE_CONVERT_FACTOR;A(_objectSpread(_objectSpread({},c),{},{factor:d}))}}:void 0,onTap:B,onClick:B,onTouchMove:u?function(a){return zoomOnTouchesMove(a,A)}:void 0,onDragStart:function(a){var b;1<(null===(b=a.evt.touches)||void 0===b?void 0:b.length)&&y(!1)},onTouchEnd:u?function(){endTouchesZooming(C)}:void 0,dragBoundFunc:function(a){var b=Math.min(0,Math.max(a.x,j*(1-p.factor))),c=Math.min(0,Math.max(a.y,k*(1-p.factor)));return{x:b,y:c}},draggable:u&&x,onDragEnd:function(a){a.currentTarget.draggable()&&"stage"===a.target.nodeType.toLowerCase()&&u&&x&&A({factor:p.factor,x:a.target.x(),y:a.target.y(),preparedDimensions:!0})},style:_objectSpread(_objectSpread({},z),{},{outline:"none",backgroundColor:"var(--s-palette-background-paper)"})},b)};export default memo(CanvasNode);
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+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 { memo, useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { Stage, useStrictMode } from 'react-konva';
+import { CHANGE_POINTER_ICON, CLEAR_ANNOTATIONS_SELECTIONS, ZOOM_CANVAS } from 'actions';
+import { useStore } from 'hooks';
+import { DEFAULT_ZOOM_FACTOR, POINTER_ICONS, TABS_IDS, TOOLS_IDS } from 'utils/constants';
+import { endTouchesZooming, zoomOnTouchesMove } from "./touch-zooming-events";
+var ZOOM_DELTA_TO_SCALE_CONVERT_FACTOR = 0.006;
+var CanvasNode = function CanvasNode(_ref) {
+  var children = _ref.children;
+  useStrictMode(true);
+  var canvasRef = useRef(null);
+  var _useStore = useStore(),
+    dispatch = _useStore.dispatch,
+    pointerCssIcon = _useStore.pointerCssIcon,
+    tabId = _useStore.tabId,
+    toolId = _useStore.toolId,
+    canvasWidth = _useStore.canvasWidth,
+    canvasHeight = _useStore.canvasHeight,
+    canvasScale = _useStore.canvasScale,
+    _useStore$selectionsI = _useStore.selectionsIds,
+    selectionsIds = _useStore$selectionsI === void 0 ? [] : _useStore$selectionsI,
+    _useStore$zoom = _useStore.zoom,
+    zoom = _useStore$zoom === void 0 ? {} : _useStore$zoom,
+    _useStore$config = _useStore.config,
+    previewPixelRatio = _useStore$config.previewPixelRatio,
+    disableZooming = _useStore$config.disableZooming;
+  Konva.pixelRatio = previewPixelRatio;
+  var defaultZoomFactor = DEFAULT_ZOOM_FACTOR;
+  var isZoomEnabled = !disableZooming && toolId !== TOOLS_IDS.CROP;
+  var _useState = useState(tabId !== TABS_IDS.ANNOTATE && tabId !== TABS_IDS.WATERMARK && zoom.factor > defaultZoomFactor),
+    _useState2 = _slicedToArray(_useState, 2),
+    isPanningEnabled = _useState2[0],
+    setIsPanningEnabled = _useState2[1];
+  var cursorStyle = useMemo(function () {
+    return {
+      cursor: pointerCssIcon === POINTER_ICONS.DEFAULT && tabId === TABS_IDS.ANNOTATE ? POINTER_ICONS.DRAW : pointerCssIcon
+    };
+  }, [tabId, pointerCssIcon]);
+  var saveZoom = function saveZoom(newZoomProps) {
+    dispatch({
+      type: ZOOM_CANVAS,
+      payload: newZoomProps
+    });
+  };
+  var handleCanvasDragEnd = function handleCanvasDragEnd(e) {
+    if (e.currentTarget.draggable() && e.target.nodeType.toLowerCase() === 'stage' && isZoomEnabled && isPanningEnabled) {
+      saveZoom({
+        factor: zoom.factor,
+        x: e.target.x(),
+        y: e.target.y(),
+        preparedDimensions: true
+      });
+    }
+  };
+  var clearSelections = useCallback(function (e) {
+    var _stage$container;
+    e.evt.preventDefault();
+    var stage = e.currentTarget;
+    (_stage$container = stage.container) === null || _stage$container === void 0 || _stage$container.call(stage).focus();
+    if (e.target instanceof Konva.Stage && selectionsIds.length > 0) {
+      dispatch({
+        type: CLEAR_ANNOTATIONS_SELECTIONS
+      });
+    }
+  }, [selectionsIds]);
+  var dragBoundFunc = function dragBoundFunc(pos) {
+    var x = Math.min(0, Math.max(pos.x, canvasWidth * (1 - zoom.factor)));
+    var y = Math.min(0, Math.max(pos.y, canvasHeight * (1 - zoom.factor)));
+    return {
+      x: x,
+      y: y
+    };
+  };
+  var handleZoom = function handleZoom(e) {
+    e.evt.preventDefault();
+    var stage = e.currentTarget;
+    var pointer = stage.getPointerPosition();
+    if (!pointer) return;
+    var newScale = (zoom.factor || defaultZoomFactor) + e.evt.deltaY * -ZOOM_DELTA_TO_SCALE_CONVERT_FACTOR;
+    saveZoom(_objectSpread(_objectSpread({}, pointer), {}, {
+      factor: newScale
+    }));
+  };
+  var preventDraggingIfMultiTouches = function preventDraggingIfMultiTouches(e) {
+    var _touches;
+    if (((_touches = e.evt.touches) === null || _touches === void 0 ? void 0 : _touches.length) > 1) {
+      setIsPanningEnabled(false);
+    }
+  };
+  var resetPanningAbility = function resetPanningAbility() {
+    return setIsPanningEnabled(tabId !== TABS_IDS.ANNOTATE || tabId === TABS_IDS.WATERMARK);
+  };
+  var endTouchesZoomingEnablePanning = function endTouchesZoomingEnablePanning() {
+    endTouchesZooming(resetPanningAbility);
+  };
+  var mapKeyboardKeys = function mapKeyboardKeys(e) {
+    if ((e.code === 'Space' || e.key === 'Control') && !e.repeat && zoom.factor > defaultZoomFactor && isZoomEnabled) {
+      e.preventDefault();
+      setIsPanningEnabled(true);
+      dispatch({
+        type: CHANGE_POINTER_ICON,
+        payload: {
+          pointerCssIcon: POINTER_ICONS.DRAG
+        }
+      });
+    }
+  };
+  var revertKeyboardKeysEffect = function revertKeyboardKeysEffect(e) {
+    if (e.code === 'Space') {
+      e.preventDefault();
+      resetPanningAbility();
+    }
+  };
+  var focusCanvasOnEnter = function focusCanvasOnEnter() {
+    if (canvasRef.current) {
+      canvasRef.current.container().focus();
+    }
+  };
+  useEffect(function () {
+    dispatch({
+      type: CHANGE_POINTER_ICON,
+      payload: {
+        pointerCssIcon: POINTER_ICONS[isPanningEnabled ? 'DRAG' : 'DEFAULT']
+      }
+    });
+  }, [isPanningEnabled]);
+  useEffect(function () {
+    setIsPanningEnabled(tabId !== TABS_IDS.ANNOTATE && tabId !== TABS_IDS.WATERMARK && zoom.factor > defaultZoomFactor);
+    var canvasContainer;
+    if (canvasRef.current) {
+      canvasContainer = canvasRef.current.container();
+      canvasContainer.addEventListener('mouseenter', focusCanvasOnEnter);
+      canvasContainer.addEventListener('keydown', mapKeyboardKeys);
+      canvasContainer.addEventListener('keyup', revertKeyboardKeysEffect);
+    }
+    return function () {
+      if (canvasContainer) {
+        canvasContainer.removeEventListener('mouseenter', focusCanvasOnEnter);
+        canvasContainer.removeEventListener('keydown', mapKeyboardKeys);
+        canvasContainer.removeEventListener('keyup', revertKeyboardKeysEffect);
+      }
+    };
+  }, [tabId, zoom.factor, defaultZoomFactor]);
+  var zoomedResponsiveCanvasScale = canvasScale * (isZoomEnabled && zoom.factor || defaultZoomFactor);
+  return React.createElement(Stage, {
+    tabIndex: -1,
+    ref: canvasRef,
+    width: canvasWidth,
+    height: canvasHeight,
+    scaleX: zoomedResponsiveCanvasScale,
+    scaleY: zoomedResponsiveCanvasScale,
+    x: isZoomEnabled && zoom.x || null,
+    y: isZoomEnabled && zoom.y || null,
+    zoomFactor: isZoomEnabled && zoom.factor || defaultZoomFactor,
+    onWheel: isZoomEnabled ? handleZoom : undefined,
+    onTap: clearSelections,
+    onClick: clearSelections,
+    onTouchMove: isZoomEnabled ? function (e) {
+      return zoomOnTouchesMove(e, saveZoom);
+    } : undefined,
+    onDragStart: preventDraggingIfMultiTouches,
+    onTouchEnd: isZoomEnabled ? endTouchesZoomingEnablePanning : undefined,
+    dragBoundFunc: dragBoundFunc,
+    draggable: isZoomEnabled && isPanningEnabled,
+    onDragEnd: handleCanvasDragEnd,
+    style: _objectSpread(_objectSpread({}, cursorStyle), {}, {
+      outline: 'none',
+      backgroundColor: 'var(--s-palette-background-paper)'
+    })
+  }, children);
+};
+export default memo(CanvasNode);

package/lib/components/main-canvas/index.js

@@ -1 +1,51 @@
-import _slicedToArray from"@babel/runtime/helpers/slicedToArray";import{useCallback,useEffect,useRef}from"react";import{Box}from"@mui/material";import{SET_CANVAS_SIZE}from"actions";import{DesignLayer,TransformersLayer}from"components/layers";import NodeControls from"components/node-controls";import{AppProviderOverridenValue}from"context";import{useResizeObserver,useStore}from"hooks";import CanvasNode from"./canvas-node";var MainCanvas=function(){var a,b=useResizeObserver(),c=_slicedToArray(b,1),d=c[0],e=useStore(),f=useRef(null),g=useCallback(function(a){var b=a.width,c=a.height;e.dispatch({type:SET_CANVAS_SIZE,payload:{canvasWidth:b,canvasHeight:c}})},[]);return useEffect(function(){d(f.current,g)},[]),React.createElement(Box,{height:"calc(100vh - 60px - 120px)",position:"relative",flexGrow:1,ref:f},!e.textIdOfEditableContent&&React.createElement(NodeControls,null),e.isShowOriginalImage&&React.createElement("img",{style:{maxWidth:"98%",maxHeight:"98%",position:"absolute",top:"50%",left:"50%",transform:"translate(-50%, -50%)",zIndex:2},src:null===(a=e.originalImage)||void 0===a?void 0:a.src}),React.createElement(CanvasNode,null,React.createElement(AppProviderOverridenValue,{overridingValue:e},React.createElement(DesignLayer,null),React.createElement(TransformersLayer,null))))};export default MainCanvas;
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import { useCallback, useEffect, useRef } from 'react';
+import { Box } from '@mui/material';
+import { SET_CANVAS_SIZE } from 'actions';
+import { DesignLayer, TransformersLayer } from 'components/layers';
+import NodeControls from 'components/node-controls';
+import { AppProviderOverridenValue } from 'context';
+import { useResizeObserver, useStore } from 'hooks';
+import CanvasNode from "./canvas-node";
+var MainCanvas = function MainCanvas() {
+  var _providedAppContext$o;
+  var _useResizeObserver = useResizeObserver(),
+    _useResizeObserver2 = _slicedToArray(_useResizeObserver, 1),
+    observeResize = _useResizeObserver2[0];
+  var providedAppContext = useStore();
+  var canvasContainerRef = useRef(null);
+  var setNewCanvasSize = useCallback(function (_ref) {
+    var containerWidth = _ref.width,
+      containerHeight = _ref.height;
+    providedAppContext.dispatch({
+      type: SET_CANVAS_SIZE,
+      payload: {
+        canvasWidth: containerWidth,
+        canvasHeight: containerHeight
+      }
+    });
+  }, []);
+  useEffect(function () {
+    observeResize(canvasContainerRef.current, setNewCanvasSize);
+  }, []);
+  return React.createElement(Box, {
+    height: "calc(100vh - 60px - 120px)",
+    position: "relative",
+    flexGrow: 1,
+    ref: canvasContainerRef
+  }, !providedAppContext.textIdOfEditableContent && React.createElement(NodeControls, null), providedAppContext.isShowOriginalImage && React.createElement("img", {
+    style: {
+      maxWidth: '98%',
+      maxHeight: '98%',
+      position: 'absolute',
+      top: '50%',
+      left: '50%',
+      transform: 'translate(-50%, -50%)',
+      zIndex: 2
+    },
+    src: (_providedAppContext$o = providedAppContext.originalImage) === null || _providedAppContext$o === void 0 ? void 0 : _providedAppContext$o.src
+  }), React.createElement(CanvasNode, null, React.createElement(AppProviderOverridenValue, {
+    overridingValue: providedAppContext
+  }, React.createElement(DesignLayer, null), React.createElement(TransformersLayer, null))));
+};
+export default MainCanvas;

package/lib/components/main-canvas/touch-zooming-events.js

@@ -1 +1,69 @@
-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"utils/constants";function getDistance(a,b){return Math.sqrt(Math.pow(b.x-a.x,2)+Math.pow(b.y-a.y,2))}function getCenter(a,b){return{x:(a.x+b.x)/2,y:(a.y+b.y)/2}}var lastCenter=null,lastDist=0;export var zoomOnTouchesMove=function(a,b){a.evt.preventDefault();var c=a.evt.touches[0],d=a.evt.touches[1];if(c&&d){var e=a.currentTarget;e.isDragging()&&e.stopDrag();var f={x:c.clientX,y:c.clientY},g={x:d.clientX,y:d.clientY};if(!lastCenter)return void(lastCenter=getCenter(f,g));var h=getCenter(f,g),i=getDistance(f,g);lastDist||(lastDist=i);var j=e.attrs.zoomFactor||DEFAULT_ZOOM_FACTOR,k={x:(h.x-e.x())/j,y:(h.y-e.y())/j},l=(j||DEFAULT_ZOOM_FACTOR)*(i/lastDist),m=h.x-lastCenter.x,n=h.y-lastCenter.y,o={x:h.x-k.x*l+m,y:h.y-k.y*l+n};lastDist=i,lastCenter=h,b(_objectSpread(_objectSpread({},o),{},{factor:l,preparedDimensions:!0}))}};export var endTouchesZooming=function(a){lastDist=0,lastCenter=null,"function"==typeof a&&a()};
+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 'utils/constants';
+function getDistance(p1, p2) {
+  return Math.sqrt(Math.pow(p2.x - p1.x, 2) + Math.pow(p2.y - p1.y, 2));
+}
+function getCenter(p1, p2) {
+  return {
+    x: (p1.x + p2.x) / 2,
+    y: (p1.y + p2.y) / 2
+  };
+}
+var lastCenter = null;
+var lastDist = 0;
+export var zoomOnTouchesMove = function zoomOnTouchesMove(e, saveZoomFn) {
+  e.evt.preventDefault();
+  var touch1 = e.evt.touches[0];
+  var touch2 = e.evt.touches[1];
+  if (!touch1 || !touch2) {
+    return;
+  }
+  var stageCanvas = e.currentTarget;
+  if (stageCanvas.isDragging()) {
+    stageCanvas.stopDrag();
+  }
+  var p1 = {
+    x: touch1.clientX,
+    y: touch1.clientY
+  };
+  var p2 = {
+    x: touch2.clientX,
+    y: touch2.clientY
+  };
+  if (!lastCenter) {
+    lastCenter = getCenter(p1, p2);
+    return;
+  }
+  var newCenter = getCenter(p1, p2);
+  var dist = getDistance(p1, p2);
+  if (!lastDist) {
+    lastDist = dist;
+  }
+  var currentZoomFactor = stageCanvas.attrs.zoomFactor || DEFAULT_ZOOM_FACTOR;
+  var pointTo = {
+    x: (newCenter.x - stageCanvas.x()) / currentZoomFactor,
+    y: (newCenter.y - stageCanvas.y()) / currentZoomFactor
+  };
+  var scale = (currentZoomFactor || DEFAULT_ZOOM_FACTOR) * (dist / lastDist);
+  var dx = newCenter.x - lastCenter.x;
+  var dy = newCenter.y - lastCenter.y;
+  var newPos = {
+    x: newCenter.x - pointTo.x * scale + dx,
+    y: newCenter.y - pointTo.y * scale + dy
+  };
+  lastDist = dist;
+  lastCenter = newCenter;
+  saveZoomFn(_objectSpread(_objectSpread({}, newPos), {}, {
+    factor: scale,
+    preparedDimensions: true
+  }));
+};
+export var endTouchesZooming = function endTouchesZooming(cb) {
+  lastDist = 0;
+  lastCenter = null;
+  if (typeof cb === 'function') {
+    cb();
+  }
+};

package/lib/components/node-controls/index.js

@@ -1 +1,79 @@
-import _slicedToArray from"@babel/runtime/helpers/slicedToArray";import{ContentCopy,DeleteOutlined}from"@mui/icons-material";import{SFlexBox,SIconButton}from"@solostylist/ui-kit/core";import{useEffect,useMemo,useState}from"react";import{DUPLICATE_ANNOTATIONS,REMOVE_ANNOTATIONS}from"actions";import{useStore}from"hooks";import{NODES_TRANSFORMER_ID,WATERMARK_ANNOTATION_ID}from"utils/constants";import debounce from"utils/debounce";var NodeControls=function(){var a=useStore(),b=a.selectionsIds,c=void 0===b?[]:b,d=a.designLayer,e=a.annotations,f=a.dispatch,g=useState({left:0,top:0}),h=_slicedToArray(g,2),i=h[0],j=h[1],k=useMemo(function(){var a,b=d;return null===b||void 0===b||null===(a=b.getStage())||void 0===a?void 0:a.findOne("#".concat(NODES_TRANSFORMER_ID))},[d]),l=c.length,m=debounce(function(){k&&j({left:(k.x()+k.width()/2)*k.scaleX(),top:(k.y()+k.height())*k.scaleY()})},0);if(useEffect(function(){m()},[c,k,e]),0===l||!k)return null;return React.createElement(SFlexBox,{sx:{position:"absolute",zIndex:1,bgcolor:"background.paper",borderRadius:4,alignItems:"center",justifyContent:"center",top:(i.top||0)+8,left:(i.left||0)+4,transform:"translateX(-50%)",gap:1,p:1}},c[0]!==WATERMARK_ANNOTATION_ID&&React.createElement(SIconButton,{onClick:function(){f({type:DUPLICATE_ANNOTATIONS,payload:{annotationsIds:c}})}},React.createElement(ContentCopy,null)),React.createElement(SIconButton,{onClick:function(){f({type:REMOVE_ANNOTATIONS,payload:{annotationsIds:c}})},color:"error"},React.createElement(DeleteOutlined,null)))};export default NodeControls;
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import { ContentCopy, DeleteOutlined } from '@mui/icons-material';
+import { SFlexBox, SIconButton } from '@solostylist/ui-kit/core';
+import { useEffect, useMemo, useState } from 'react';
+import { DUPLICATE_ANNOTATIONS, REMOVE_ANNOTATIONS } from 'actions';
+import { useStore } from 'hooks';
+import { NODES_TRANSFORMER_ID, WATERMARK_ANNOTATION_ID } from 'utils/constants';
+import debounce from 'utils/debounce';
+var NodeControls = function NodeControls() {
+  var _useStore = useStore(),
+    _useStore$selectionsI = _useStore.selectionsIds,
+    selectionsIds = _useStore$selectionsI === void 0 ? [] : _useStore$selectionsI,
+    designLayer = _useStore.designLayer,
+    annotations = _useStore.annotations,
+    dispatch = _useStore.dispatch;
+  var _useState = useState({
+      left: 0,
+      top: 0
+    }),
+    _useState2 = _slicedToArray(_useState, 2),
+    position = _useState2[0],
+    setPosition = _useState2[1];
+  var nodesTransformer = useMemo(function () {
+    var _layer$getStage;
+    var layer = designLayer;
+    return layer === null || layer === void 0 || (_layer$getStage = layer.getStage()) === null || _layer$getStage === void 0 ? void 0 : _layer$getStage.findOne("#".concat(NODES_TRANSFORMER_ID));
+  }, [designLayer]);
+  var selectionsLength = selectionsIds.length;
+  var updatePosition = debounce(function () {
+    if (!nodesTransformer) {
+      return;
+    }
+    setPosition({
+      left: (nodesTransformer.x() + nodesTransformer.width() / 2) * nodesTransformer.scaleX(),
+      top: (nodesTransformer.y() + nodesTransformer.height()) * nodesTransformer.scaleY()
+    });
+  }, 0);
+  useEffect(function () {
+    updatePosition();
+  }, [selectionsIds, nodesTransformer, annotations]);
+  if (selectionsLength === 0 || !nodesTransformer) return null;
+  var duplicateSelectedNodes = function duplicateSelectedNodes() {
+    dispatch({
+      type: DUPLICATE_ANNOTATIONS,
+      payload: {
+        annotationsIds: selectionsIds
+      }
+    });
+  };
+  var removeSelectedNodes = function removeSelectedNodes() {
+    dispatch({
+      type: REMOVE_ANNOTATIONS,
+      payload: {
+        annotationsIds: selectionsIds
+      }
+    });
+  };
+  return React.createElement(SFlexBox, {
+    sx: {
+      position: 'absolute',
+      zIndex: 1,
+      bgcolor: 'background.paper',
+      borderRadius: 4,
+      alignItems: 'center',
+      justifyContent: 'center',
+      top: (position.top || 0) + 8,
+      left: (position.left || 0) + 4,
+      transform: 'translateX(-50%)',
+      gap: 1,
+      p: 1
+    }
+  }, selectionsIds[0] !== WATERMARK_ANNOTATION_ID && React.createElement(SIconButton, {
+    onClick: duplicateSelectedNodes
+  }, React.createElement(ContentCopy, null)), React.createElement(SIconButton, {
+    onClick: removeSelectedNodes,
+    color: "error"
+  }, React.createElement(DeleteOutlined, null)));
+};
+export default NodeControls;

package/lib/components/tabs/index.js

@@ -1 +1,66 @@
-import{STabs}from"@solostylist/ui-kit/core";import{useCallback,useMemo}from"react";import{SELECT_TAB}from"actions";import{useStore}from"hooks";import{AVAILABLE_TABS}from"./tabs.constants";var Tabs=function(a){var b=a.toggleMainMenu,c=useStore(),d=c.t,e=c.tabId,f=void 0===e?null:e,g=c.dispatch,h=c.config,i=h.defaultTabId,j=h.tabsIds,k=useCallback(function(a,c){g({type:SELECT_TAB,payload:{tabId:c}}),null===b||void 0===b||b(!1)},[g,b]),l=useMemo(function(){var a=[],b=Array.isArray(j)?j:Object.keys(j||{});return 0<b.length?AVAILABLE_TABS.forEach(function(c){var d=b.indexOf(c.id);-1!==d&&(a[d]=c)}):a=AVAILABLE_TABS,(0<a.length?a:AVAILABLE_TABS).filter(function(a){return!!a}).map(function(a){return{label:d(a.labelKey),icon:React.createElement(a.icon,null),value:a.id,iconPosition:"top"}})},[j,d]);return 1>=l.length?null:React.createElement(STabs,{sx:{minWidth:120,width:120},tabs:l,activeTab:f||i,onTabChange:k,orientation:"vertical",variant:"scrollable",scrollButtons:"auto"})};export default Tabs;
+import { STabs } from '@solostylist/ui-kit/core';
+import { useCallback, useMemo } from 'react';
+import { SELECT_TAB } from 'actions';
+import { useStore } from 'hooks';
+import { AVAILABLE_TABS } from "./tabs.constants";
+var Tabs = function Tabs(_ref) {
+  var toggleMainMenu = _ref.toggleMainMenu;
+  var _useStore = useStore(),
+    t = _useStore.t,
+    _useStore$tabId = _useStore.tabId,
+    tabId = _useStore$tabId === void 0 ? null : _useStore$tabId,
+    dispatch = _useStore.dispatch,
+    _useStore$config = _useStore.config,
+    defaultTabId = _useStore$config.defaultTabId,
+    tabsIds = _useStore$config.tabsIds;
+  var currentTabId = tabId || defaultTabId;
+  var selectTab = useCallback(function (event, newTabId) {
+    dispatch({
+      type: SELECT_TAB,
+      payload: {
+        tabId: newTabId
+      }
+    });
+    toggleMainMenu === null || toggleMainMenu === void 0 || toggleMainMenu(false);
+  }, [dispatch, toggleMainMenu]);
+  var chosenTabsConfig = useMemo(function () {
+    var tabs = [];
+    var tabsIdsArray = Array.isArray(tabsIds) ? tabsIds : Object.keys(tabsIds || {});
+    if (tabsIdsArray.length > 0) {
+      AVAILABLE_TABS.forEach(function (tab) {
+        var index = tabsIdsArray.indexOf(tab.id);
+        if (index !== -1) {
+          tabs[index] = tab;
+        }
+      });
+    } else {
+      tabs = AVAILABLE_TABS;
+    }
+    return (tabs.length > 0 ? tabs : AVAILABLE_TABS).filter(function (tab) {
+      return Boolean(tab);
+    }).map(function (tab) {
+      return {
+        label: t(tab.labelKey),
+        icon: React.createElement(tab.icon, null),
+        value: tab.id,
+        iconPosition: 'top'
+      };
+    });
+  }, [tabsIds, t]);
+  if (chosenTabsConfig.length <= 1) {
+    return null;
+  }
+  return React.createElement(STabs, {
+    sx: {
+      minWidth: 120,
+      width: 120
+    },
+    tabs: chosenTabsConfig,
+    activeTab: currentTabId,
+    onTabChange: selectTab,
+    orientation: "vertical",
+    variant: "scrollable",
+    scrollButtons: "auto"
+  });
+};
+export default Tabs;

package/lib/components/tabs/tabs.constants.js

@@ -1 +1,27 @@
-import{BrandingWatermarkOutlined,CropOutlined,EditOutlined,PhotoFilterOutlined,PhotoSizeSelectLargeOutlined,TuneOutlined}from"@mui/icons-material";import{TABS_IDS}from"utils/constants";export var AVAILABLE_TABS=[{id:TABS_IDS.ADJUST,labelKey:"adjustTab",icon:CropOutlined},{id:TABS_IDS.FINETUNE,labelKey:"finetuneTab",icon:TuneOutlined},{id:TABS_IDS.FILTERS,labelKey:"filtersTab",icon:PhotoFilterOutlined},{id:TABS_IDS.WATERMARK,labelKey:"watermarkTab",icon:BrandingWatermarkOutlined},{id:TABS_IDS.ANNOTATE,labelKey:"annotateTabLabel",icon:EditOutlined},{id:TABS_IDS.RESIZE,labelKey:"resizeTab",icon:PhotoSizeSelectLargeOutlined}];
+import { BrandingWatermarkOutlined, CropOutlined, EditOutlined, PhotoFilterOutlined, PhotoSizeSelectLargeOutlined, TuneOutlined } from '@mui/icons-material';
+import { TABS_IDS } from 'utils/constants';
+export var AVAILABLE_TABS = [{
+  id: TABS_IDS.ADJUST,
+  labelKey: 'adjustTab',
+  icon: CropOutlined
+}, {
+  id: TABS_IDS.FINETUNE,
+  labelKey: 'finetuneTab',
+  icon: TuneOutlined
+}, {
+  id: TABS_IDS.FILTERS,
+  labelKey: 'filtersTab',
+  icon: PhotoFilterOutlined
+}, {
+  id: TABS_IDS.WATERMARK,
+  labelKey: 'watermarkTab',
+  icon: BrandingWatermarkOutlined
+}, {
+  id: TABS_IDS.ANNOTATE,
+  labelKey: 'annotateTabLabel',
+  icon: EditOutlined
+}, {
+  id: TABS_IDS.RESIZE,
+  labelKey: 'resizeTab',
+  icon: PhotoSizeSelectLargeOutlined
+}];