@yorab/react-paint 0.12.0 → 0.13.1

package/README.md

@@ -51,7 +51,7 @@ const SHAPES_INIT = [
       lineWidth: 1,
       lineDash: 0,
       lineArrow: 0,
-      pointsCount: 3,
+     closedPoints: 1,
       fontFamily: 'serif'
     }
   }
@@ -306,11 +306,8 @@ type SettingsFont = {
   }
 }
 
-type SettingsPointsCount = {
-  pointsCount: {
-    min: number
-    max: number
-    step: number
+type SettingsClosedPoints = {
+  closedPoints: {
     default: number
     hidden?: boolean
   }
@@ -335,14 +332,14 @@ type ToolsPolygonSettings = SettingsOpacity &
   SettingsFillColor &
   SettingsLineWidth &
   SettingsLineDash &
-  SettingsPointsCount
+  SettingsClosedPoints
 
 type ToolsCurveSettings = SettingsOpacity &
   SettingsStrokeColor &
   SettingsFillColor &
   SettingsLineWidth &
   SettingsLineDash &
-  SettingsPointsCount
+  SettingsClosedPoints
 
 type ToolsTriangleSettings = SettingsStrokeColor & SettingsFillColor & SettingsOpacity & SettingsLineWidth & SettingsLineDash
 

package/dist/canvas/components/Canvas.d.ts

@@ -13,7 +13,7 @@ type DrawerType = {
     shapes: ShapeEntity[];
     saveShapes: () => void;
     addShape: (newShape: ShapeEntity) => void;
-    updateSingleShape: (updatedShape: ShapeEntity) => void;
+    updateSingleShape: (updatedShape: ShapeEntity, withSave?: boolean) => void;
     selectedShape: ShapeEntity | undefined;
     setSelectedShape: React.Dispatch<React.SetStateAction<ShapeEntity | undefined>>;
     setSelectionFrame: React.Dispatch<React.SetStateAction<[Point, Point] | undefined>>;
@@ -36,6 +36,7 @@ type DrawerType = {
     selectionMode: SelectionModeData<number | Point>;
     setSelectionMode: React.Dispatch<React.SetStateAction<SelectionModeData<number | Point>>>;
     isShiftPressed: boolean;
+    isAltPressed: boolean;
     withFrameSelection: boolean;
     withSkeleton: boolean;
 };

package/dist/canvas/hooks/useDrawableCanvas.d.ts

@@ -7,7 +7,7 @@ type UseCanvasType = {
     shapes: ShapeEntity[];
     saveShapes: () => void;
     addShape: (newShape: ShapeEntity) => void;
-    updateSingleShape: (updatedShape: ShapeEntity) => void;
+    updateSingleShape: (updatedShape: ShapeEntity, withSave?: boolean) => void;
     selectedShape: ShapeEntity | undefined;
     setSelectedShape: React.Dispatch<React.SetStateAction<ShapeEntity | undefined>>;
     activeTool: ToolsType;
@@ -29,10 +29,11 @@ type UseCanvasType = {
     setSelectionFrame: React.Dispatch<React.SetStateAction<[Point, Point] | undefined>>;
     drawCanvasRef: React.RefObject<HTMLCanvasElement | null>;
     isShiftPressed: boolean;
+    isAltPressed: boolean;
     withFrameSelection: boolean;
     settings: UtilsSettings;
 };
-declare const useDrawableCanvas: ({ addShape, drawCanvasRef, setActiveTool, refreshHoveredShape, shapes, selectionMode, activeTool, isInsideComponent, setCanvasOffset, selectedShape, canvasOffsetStartData, refreshSelectedShapes, setSelectedShape, setSelectionFrame, setCanvasOffsetStartData, updateSingleShape, saveShapes, setSelectionMode, settings, isShiftPressed, withFrameSelection }: UseCanvasType) => {
+declare const useDrawableCanvas: ({ addShape, drawCanvasRef, setActiveTool, refreshHoveredShape, shapes, selectionMode, activeTool, isInsideComponent, setCanvasOffset, selectedShape, canvasOffsetStartData, refreshSelectedShapes, setSelectedShape, setSelectionFrame, setCanvasOffsetStartData, updateSingleShape, saveShapes, setSelectionMode, settings, isShiftPressed, isAltPressed, withFrameSelection }: UseCanvasType) => {
     hoverMode: HoverModeData;
 };
 export default useDrawableCanvas;

package/dist/canvas/hooks/useKeyboard.d.ts

@@ -1,5 +1,7 @@
 import type { UtilsSettings } from './../../canvas/constants/app';
-import type { ShapeEntity } from './../../common/types/Shapes';
+import type { SelectionModeData } from './../../common/types/Mode';
+import type { Point, ShapeEntity } from './../../common/types/Shapes';
+import type { ToolsType } from './../../common/types/tools';
 type UseKeyboardType = {
     isInsideComponent: boolean;
     selectedShape: ShapeEntity | undefined;
@@ -10,8 +12,12 @@ type UseKeyboardType = {
     backwardShape: () => void;
     forwardShape: () => void;
     setShiftPressed: (value: React.SetStateAction<boolean>) => void;
+    setAltPressed: (value: React.SetStateAction<boolean>) => void;
     isEditingText: boolean;
+    setActiveTool: (tool: ToolsType) => void;
+    setSelectionMode: (mode: SelectionModeData<number | Point>) => void;
+    setSelectionFrame: (frame: [Point, Point] | undefined) => void;
     settings: UtilsSettings;
 };
-declare const useKeyboard: ({ isInsideComponent, selectedShape, isEditingText, settings, setSelectedShape, removeShape, pasteShape, updateShape, backwardShape, forwardShape, setShiftPressed }: UseKeyboardType) => {};
+declare const useKeyboard: ({ isInsideComponent, selectedShape, isEditingText, settings, setSelectedShape, setActiveTool, setSelectionMode, setSelectionFrame, removeShape, pasteShape, updateShape, backwardShape, forwardShape, setShiftPressed, setAltPressed }: UseKeyboardType) => {};
 export default useKeyboard;

package/dist/canvas/utils/intersect.d.ts

@@ -11,7 +11,13 @@ export declare const getCursorPositionInTransformedCanvas: (e: MouseEvent | Touc
 export declare const isTouchGesture: (e: MouseEvent | TouchEvent) => e is TouchEvent;
 export declare const getPointPositionAfterCanvasTransformation: (point: Point, shapeRotation: number, [originX, originY]: Point) => Point;
 export declare const getPointPositionBeforeCanvasTransformation: (point: Point, shapeRotation: number, [originX, originY]: Point) => Point;
-export declare const checkSelectionIntersection: (shape: DrawableShape, position: Point, settings: UtilsSettings, checkAnchors?: boolean, radius?: number) => false | HoverModeData;
+export declare const checkSelectionIntersection: (ctx: CanvasRenderingContext2D, shape: DrawableShape, position: Point, settings: UtilsSettings, checkAnchors?: boolean, radius?: number) => false | HoverModeData;
+export declare const checkPolygonLinesSelectionIntersection: (ctx: CanvasRenderingContext2D, shape: DrawableShape<"polygon" | "curve">, position: Point, settings: UtilsSettings, radius?: number) => false | {
+    lineIndex: number;
+};
+export declare const checkCurveLinesSelectionIntersection: (ctx: CanvasRenderingContext2D, shape: DrawableShape<"curve">, position: Point, settings: UtilsSettings, radius?: number) => false | {
+    lineIndex: number;
+};
 export declare const checkPositionIntersection: (ctx: CanvasRenderingContext2D, shape: DrawableShape, position: Point, settings: UtilsSettings) => false | HoverModeData;
 export declare function getRectIntersection(rect1: Rect, rect2: Rect): Rect | undefined;
 export declare const checkSelectionFrameCollision: (ctx: CanvasRenderingContext2D, shape: DrawableShape, selectionFrame: [Point, Point], settings: UtilsSettings) => boolean;

package/dist/canvas/utils/selection/lineSelection.d.ts

@@ -2,7 +2,7 @@ import type { UtilsSettings } from './../../../canvas/constants/app';
 import type { DrawableShape, Point, SelectionLinesType } from './../../../common/types/Shapes';
 export declare const createLineSelectionPath: (path: Path2D | undefined, shape: DrawableShape<"line" | "polygon" | "curve"> & {
     points: readonly Point[];
-}, settings: UtilsSettings, gravityAnchors?: boolean) => SelectionLinesType;
+}, settings: UtilsSettings) => SelectionLinesType;
 export declare const drawLineSelection: ({ ctx, shape, withAnchors, selectionWidth, selectionColor, settings }: {
     ctx: CanvasRenderingContext2D;
     shape: DrawableShape<"line"> | DrawableShape<"polygon"> | DrawableShape<"curve">;

package/dist/canvas/utils/selection/rectSelection.d.ts

@@ -5,7 +5,7 @@ export declare const createRecSelectionPath: (path: Path2D | undefined, rect: Dr
 export declare const drawSelectionRect: (ctx: CanvasRenderingContext2D, shape: DrawableShape & {
     selection?: SelectionDefaultType;
 }, selectionColor: string, selectionWidth: number, settings: UtilsSettings, withAnchors: boolean) => void;
-export declare const resizeRectSelection: (cursorPosition: Point, originalShape: DrawableShape, selectionMode: SelectionModeResize, settings: UtilsSettings, keepRatio?: boolean) => {
+export declare const resizeRectSelection: (cursorPosition: Point, originalShape: DrawableShape, selectionMode: SelectionModeResize, settings: UtilsSettings, keepRatio?: boolean, resizeFromCenter?: boolean) => {
     borderX: number;
     borderHeight: number;
     borderY: number;

package/dist/canvas/utils/shapes/brush.d.ts

@@ -10,10 +10,10 @@ export declare const createBrush: (shape: {
 }, cursorPosition: Point, settings: UtilsSettings) => ShapeEntity<"brush">;
 export declare const drawBrush: (ctx: CanvasRenderingContext2D, shape: DrawableShape<"brush">) => void;
 export declare const getBrushBorder: (brush: DrawableShape<"brush">, { selectionPadding }: UtilsSettings) => Rect;
-export declare const translateBrush: <U extends DrawableShape<"brush">>(cursorPosition: Point, originalShape: U, originalCursorPosition: Point, settings: UtilsSettings) => U & {
+export declare const translateBrush: <U extends DrawableShape<"brush">>(cursorPosition: Point, originalShape: U, originalCursorPosition: Point, settings: UtilsSettings, singleAxis: boolean) => U & {
     points: Point[][];
 };
-export declare const resizeBrush: (cursorPosition: Point, originalShape: DrawableShape<"brush">, selectionMode: SelectionModeResize, settings: UtilsSettings, keepRatio: boolean) => DrawableShape<"brush">;
+export declare const resizeBrush: (cursorPosition: Point, originalShape: DrawableShape<"brush">, selectionMode: SelectionModeResize, settings: UtilsSettings, keepRatio: boolean, resizeFromCenter: boolean) => DrawableShape<"brush">;
 export declare const addNewPointToShape: <T extends DrawableShape<"brush">>(shape: T, cursorPosition: Point, settings: UtilsSettings) => T & {
     points: Point[][];
 };

package/dist/canvas/utils/shapes/circle.d.ts

@@ -10,8 +10,8 @@ export declare const createCircle: (shape: {
 }, cursorPosition: Point, settings: UtilsSettings) => ShapeEntity<"circle">;
 export declare const drawCircle: (ctx: CanvasRenderingContext2D, circle: DrawableShape<"circle">) => void;
 export declare const getCircleBorder: (circle: Circle, settings: UtilsSettings) => Rect;
-export declare const translateCircle: <U extends DrawableShape<"circle">>(cursorPosition: Point, originalShape: U, originalCursorPosition: Point, settings: UtilsSettings) => U & {
+export declare const translateCircle: <U extends DrawableShape<"circle">>(cursorPosition: Point, originalShape: U, originalCursorPosition: Point, settings: UtilsSettings, singleAxis: boolean) => U & {
     x: number;
     y: number;
 };
-export declare const resizeCircle: (cursorPosition: Point, originalShape: DrawableShape<"circle">, selectionMode: SelectionModeResize, settings: UtilsSettings) => DrawableShape<"circle">;
+export declare const resizeCircle: (cursorPosition: Point, originalShape: DrawableShape<"circle">, selectionMode: SelectionModeResize, settings: UtilsSettings, resizeFromCenter: boolean) => DrawableShape<"circle">;

package/dist/canvas/utils/shapes/curve.d.ts

@@ -11,7 +11,8 @@ export declare const createCurve: (shape: {
 export declare const resizeCurve: (cursorPosition: Point, originalShape: DrawableShape<"curve">, selectionMode: SelectionModeResize<number>, settings: UtilsSettings) => DrawableShape<"curve">;
 export declare const drawCurve: (ctx: CanvasRenderingContext2D, curve: DrawableShape<"curve">) => void;
 export declare const getCurveBorder: (polygon: import("./../../../common/types/Shapes").Polygon, settings: UtilsSettings) => import("./../../../common/types/Shapes").Rect;
-export declare const translateCurve: <U extends DrawableShape<"curve">>(cursorPosition: Point, originalShape: U, originalCursorPosition: Point, settings: UtilsSettings) => U & {
+export declare const translateCurve: <U extends DrawableShape<"curve">>(cursorPosition: Point, originalShape: U, originalCursorPosition: Point, settings: UtilsSettings, singleAxis: boolean) => U & {
     points: [number, number][];
 };
-export declare const updateCurveLinesCount: <T extends DrawableShape<"curve">>(shape: T, newPointsCount: number, settings: UtilsSettings) => T;
+export declare const addCurveLine: <T extends DrawableShape<"curve">>(shape: T, lineIndex: number, cursorPosition: Point, settings: UtilsSettings) => T;
+export declare const addCurvePoint: <T extends DrawableShape<"curve">>(shape: T, cursorPosition: Point, settings: UtilsSettings, temporary?: boolean) => T;

package/dist/canvas/utils/shapes/ellipse.d.ts

@@ -10,8 +10,8 @@ export declare const createEllipse: (shape: {
 }, cursorPosition: Point, settings: UtilsSettings) => ShapeEntity<"ellipse">;
 export declare const drawEllipse: (ctx: CanvasRenderingContext2D, ellipse: DrawableShape<"ellipse">) => void;
 export declare const getEllipseBorder: (ellipse: Ellipse, settings: UtilsSettings) => Rect;
-export declare const translateEllipse: <U extends DrawableShape<"ellipse">>(cursorPosition: Point, originalShape: U, originalCursorPosition: Point, settings: UtilsSettings) => U & {
+export declare const translateEllipse: <U extends DrawableShape<"ellipse">>(cursorPosition: Point, originalShape: U, originalCursorPosition: Point, settings: UtilsSettings, singleAxis: boolean) => U & {
     x: number;
     y: number;
 };
-export declare const resizeEllipse: (cursorPosition: Point, originalShape: DrawableShape<"ellipse">, selectionMode: SelectionModeResize, settings: UtilsSettings, keepRatio?: boolean) => DrawableShape<"ellipse">;
+export declare const resizeEllipse: (cursorPosition: Point, originalShape: DrawableShape<"ellipse">, selectionMode: SelectionModeResize, settings: UtilsSettings, keepRatio?: boolean, resizeFromCenter?: boolean) => DrawableShape<"ellipse">;

package/dist/canvas/utils/shapes/index.d.ts

@@ -11,11 +11,11 @@ export declare const getShapeInfos: (shape: DrawableShape, settings: UtilsSettin
     outerBorders: Rect;
     center: Point;
 };
-export declare const rotateShape: <T extends DrawableShape>(shape: T, cursorPosition: Point, originalShape: T, originalCursorPosition: Point, shapeCenter: Point, settings: UtilsSettings) => T & {
+export declare const rotateShape: <T extends DrawableShape>(shape: T, cursorPosition: Point, originalShape: T, originalCursorPosition: Point, shapeCenter: Point, settings: UtilsSettings, isShiftPressed: boolean) => T & {
     rotation: number;
 };
-export declare const resizeShape: <T extends DrawableShape>(ctx: CanvasRenderingContext2D, shape: T, cursorPosition: Point, originalShape: T, selectionMode: SelectionModeData<Point | number>, settings: UtilsSettings, isShiftPressed: boolean) => T;
-export declare const translateShape: (cursorPosition: Point, originalShape: ShapeEntity, originalCursorPosition: Point, settings: UtilsSettings) => ShapeEntity;
+export declare const resizeShape: <T extends DrawableShape>(ctx: CanvasRenderingContext2D, shape: T, cursorPosition: Point, originalShape: T, selectionMode: SelectionModeData<Point | number>, settings: UtilsSettings, isShiftPressed: boolean, isAltPressed: boolean) => T;
+export declare const translateShape: (cursorPosition: Point, originalShape: ShapeEntity, originalCursorPosition: Point, settings: UtilsSettings, isShiftPressed: boolean) => ShapeEntity;
 export declare const refreshShape: (shape: ShapeEntity, settings: UtilsSettings) => ShapeEntity;
 export declare const drawShapeSelection: ({ ctx, shape, settings, selectionWidth, selectionColor, withAnchors }: {
     ctx: CanvasRenderingContext2D;

package/dist/canvas/utils/shapes/line.d.ts

@@ -11,7 +11,7 @@ export declare const createLine: (shape: {
 export declare const buildTriangleOnLine: (center: Point, rotation: number, lineStyle: StyleShape) => Triangle;
 export declare const drawLine: (ctx: CanvasRenderingContext2D, shape: DrawableShape<"line">) => void;
 export declare const getLineBorder: (line: Line, settings: UtilsSettings) => Rect;
-export declare const translateLine: <U extends DrawableShape<"line">>(cursorPosition: Point, originalShape: U, originalCursorPosition: Point, settings: UtilsSettings) => U & {
+export declare const translateLine: <U extends DrawableShape<"line">>(cursorPosition: Point, originalShape: U, originalCursorPosition: Point, settings: UtilsSettings, singleAxis: boolean) => U & {
     points: [Point, Point];
 };
 export declare const resizeLine: <U extends DrawableShape<"line">>(cursorPosition: Point, originalShape: U, selectionMode: SelectionModeResize<number>, settings: UtilsSettings) => U;

package/dist/canvas/utils/shapes/path.d.ts

@@ -1,10 +1,12 @@
 import type { UtilsSettings } from './../../../canvas/constants/app';
-import type { Circle, DrawableShape, Line, Rect } from './../../../common/types/Shapes';
+import type { Circle, DrawableShape, Line, Point, Rect } from './../../../common/types/Shapes';
 export declare const createRecPath: (rect: Rect) => Path2D;
 export declare const createCirclePath: (shape: Circle) => Path2D;
 export declare const createEllipsePath: (ellipse: DrawableShape<"ellipse">) => Path2D;
 export declare const createLinePath: (line: Line) => Path2D;
 export declare const createBrushPath: (brush: DrawableShape<"brush">, { brushAlgo }: UtilsSettings) => Path2D | undefined;
+export declare const getCatmullRomPoints: (curve: DrawableShape<"curve">, points: Point[]) => [number, number][];
+export declare const catmullRomToBezier: (path: Path2D, p0: Point, p1: Point, p2: Point, p3: Point) => void;
 export declare const createCurvePath: (curve: DrawableShape<"curve">) => Path2D | undefined;
-export declare const createPolygonPath: (polygon: DrawableShape<"polygon">) => Path2D | undefined;
+export declare const createPolygonPath: (polygon: DrawableShape<"polygon"> | DrawableShape<"curve">) => Path2D | undefined;
 export declare const createTrianglePath: (triangle: DrawableShape<"triangle">) => Path2D;

package/dist/canvas/utils/shapes/picture.d.ts

@@ -5,8 +5,8 @@ export declare const refreshPicture: <T extends DrawableShape<"picture">>(shape:
 export declare const createPicture: (fileOrUrl: File | string, maxPictureWidth: number, maxPictureHeight: number, settings: UtilsSettings) => Promise<ShapeEntity<"picture">>;
 export declare const drawPicture: (ctx: CanvasRenderingContext2D, picture: DrawableShape<"picture">) => void;
 export declare const getPictureBorder: (picture: Picture, settings: UtilsSettings) => Rect;
-export declare const translatePicture: <U extends DrawableShape<"picture">>(cursorPosition: Point, originalShape: U, originalCursorPosition: Point, settings: UtilsSettings) => U & {
+export declare const translatePicture: <U extends DrawableShape<"picture">>(cursorPosition: Point, originalShape: U, originalCursorPosition: Point, settings: UtilsSettings, singleAxis: boolean) => U & {
     x: number;
     y: number;
 };
-export declare const resizePicture: (cursorPosition: Point, originalShape: DrawableShape<"picture">, selectionMode: SelectionModeResize, settings: UtilsSettings) => DrawableShape<"picture">;
+export declare const resizePicture: (cursorPosition: Point, originalShape: DrawableShape<"picture">, selectionMode: SelectionModeResize, settings: UtilsSettings, resizeFromCenter: boolean) => DrawableShape<"picture">;

package/dist/canvas/utils/shapes/polygon.d.ts

@@ -10,8 +10,9 @@ export declare const createPolygon: (shape: {
 }, cursorPosition: Point, settings: UtilsSettings) => ShapeEntity<"polygon">;
 export declare const drawPolygon: (ctx: CanvasRenderingContext2D, polygon: DrawableShape<"polygon">) => void;
 export declare const getPolygonBorder: (polygon: Polygon, settings: UtilsSettings) => Rect;
-export declare const translatePolygon: <U extends DrawableShape<"polygon">>(cursorPosition: Point, originalShape: U, originalCursorPosition: Point, settings: UtilsSettings) => U & {
+export declare const translatePolygon: <U extends DrawableShape<"polygon">>(cursorPosition: Point, originalShape: U, originalCursorPosition: Point, settings: UtilsSettings, singleAxis: boolean) => U & {
     points: [number, number][];
 };
 export declare const resizePolygon: (cursorPosition: Point, originalShape: DrawableShape<"polygon">, selectionMode: SelectionModeResize<number>, settings: UtilsSettings) => DrawableShape<"polygon">;
-export declare const updatePolygonLinesCount: <T extends DrawableShape<"polygon">>(shape: T, newPointsCount: number, settings: UtilsSettings) => T;
+export declare const addPolygonLine: <T extends DrawableShape<"polygon">>(shape: T, lineIndex: number, cursorPosition: Point, settings: UtilsSettings) => T;
+export declare const addPolygonPoint: <T extends DrawableShape<"polygon">>(shape: T, cursorPosition: Point, settings: UtilsSettings, temporary?: boolean) => T;

package/dist/canvas/utils/shapes/rectangle.d.ts

@@ -12,9 +12,9 @@ export declare const createRectangle: <T extends "rect" | "square">(shape: {
 export declare const drawRect: (ctx: CanvasRenderingContext2D, shape: DrawableShape<"rect" | "square">) => void;
 export declare const getRectBorder: (rect: Rect, settings: UtilsSettings) => Rect;
 export declare const getRectOppositeAnchorAbsolutePosition: <T extends DrawableShape & Rect>(anchor: Point, center: Point, shape: T, [negW, negH]?: [boolean, boolean]) => Point;
-export declare const translateRect: <T extends "rect" | "square", U extends DrawableShape<T>>(cursorPosition: Point, originalShape: U, originalCursorPosition: Point, settings: UtilsSettings) => U & {
+export declare const translateRect: <T extends "rect" | "square", U extends DrawableShape<T>>(cursorPosition: Point, originalShape: U, originalCursorPosition: Point, settings: UtilsSettings, singleAxis: boolean) => U & {
     x: number;
     y: number;
 };
-export declare const resizeRect: <T extends rectish>(cursorPosition: Point, originalShape: DrawableShape<T>, selectionMode: SelectionModeResize, settings: UtilsSettings, keepRatio?: boolean) => DrawableShape<T>;
+export declare const resizeRect: <T extends rectish>(cursorPosition: Point, originalShape: DrawableShape<T>, selectionMode: SelectionModeResize, settings: UtilsSettings, keepRatio?: boolean, resizeFromCenter?: boolean) => DrawableShape<T>;
 export {};

package/dist/canvas/utils/shapes/text.d.ts

@@ -11,9 +11,9 @@ export declare const createText: (ctx: CanvasRenderingContext2D, shape: {
 }, cursorPosition: Point, settings: UtilsSettings) => ShapeEntity<"text">;
 export declare const drawText: (ctx: CanvasRenderingContext2D, text: DrawableShape<"text">) => void;
 export declare const getTextBorder: (text: Text, settings: UtilsSettings) => Rect;
-export declare const translateText: <U extends DrawableShape<"text">>(cursorPosition: Point, originalShape: U, originalCursorPosition: Point, settings: UtilsSettings) => U & {
+export declare const translateText: <U extends DrawableShape<"text">>(cursorPosition: Point, originalShape: U, originalCursorPosition: Point, settings: UtilsSettings, singleAxis: boolean) => U & {
     x: number;
     y: number;
 };
-export declare const resizeText: (ctx: CanvasRenderingContext2D, cursorPosition: Point, originalShape: DrawableShape<"text">, selectionMode: SelectionModeResize, settings: UtilsSettings) => DrawableShape<"text">;
+export declare const resizeText: (ctx: CanvasRenderingContext2D, cursorPosition: Point, originalShape: DrawableShape<"text">, selectionMode: SelectionModeResize, settings: UtilsSettings, resizeFromCenter: boolean) => DrawableShape<"text">;
 export declare const resizeTextShapeWithNewContent: <U extends DrawableShape<"text">>(ctx: CanvasRenderingContext2D, shape: U, newValue: string[], settings: UtilsSettings) => U;

package/dist/canvas/utils/transform.d.ts

@@ -5,8 +5,9 @@ export declare const getNormalizedSize: (originalWidth: number, originalHeight:
 export declare const roundValues: (prop: number, precision?: number) => number;
 export declare const scalePoint: (point: Point, minX: number, minY: number, scaleX?: number, scaleY?: number) => Point;
 export declare const roundForGrid: (value: number, settings: UtilsSettings, gridOffset?: number) => number;
-export declare const roundRotationForGrid: (rotation: number, settings: UtilsSettings) => number;
-export declare const transformShape: (ctx: CanvasRenderingContext2D, shape: ShapeEntity, cursorPosition: Point, selectionMode: SelectionModeData<Point | number>, settings: UtilsSettings, isShiftPressed: boolean) => ShapeEntity;
+export declare const roundRotationForGrid: (rotation: number, settings: UtilsSettings, isShiftPressed: boolean) => number;
+export declare const boundVectorToSingleAxis: (vector: Point, isShiftPressed: boolean) => number[];
+export declare const transformShape: (ctx: CanvasRenderingContext2D, shape: ShapeEntity, cursorPosition: Point, selectionMode: SelectionModeData<Point | number>, settings: UtilsSettings, isShiftPressed: boolean, isAltPressed: boolean) => ShapeEntity;
 export declare const fitContentInsideContainer: (contentWidth: number, contentHeight: number, containerWidth: number, containerHeight: number, shouldFillContainer?: boolean) => number[];
 export declare const shortenLine: ({ line, size, direction }: {
     line: DrawableShape<"line">;

package/dist/common/types/Mode.d.ts

@@ -8,6 +8,9 @@ export type SelectionModeSelectionFrame = {
 export type SelectionModeBrush = {
     mode: 'brush';
 };
+export type SelectionModePreview = {
+    mode: 'preview';
+};
 export type SelectionModeEditText = {
     mode: 'textedition';
     defaultValue: string[];
@@ -29,7 +32,7 @@ export type SelectionModeTranslate = {
     cursorStartPosition: Point;
     originalShape: ShapeEntity;
 };
-export type SelectionModeData<AnchorType extends Point | number> = SelectionModeDefault | SelectionModeSelectionFrame | SelectionModeBrush | SelectionModeResize<AnchorType> | SelectionModeRotate | SelectionModeTranslate | SelectionModeEditText;
+export type SelectionModeData<AnchorType extends Point | number> = SelectionModeDefault | SelectionModeSelectionFrame | SelectionModeBrush | SelectionModeResize<AnchorType> | SelectionModeRotate | SelectionModeTranslate | SelectionModeEditText | SelectionModePreview;
 export type HoverModeData = {
     outOfView?: boolean;
 } & ({

package/dist/common/types/Shapes.d.ts

@@ -22,9 +22,11 @@ export type Triangle = {
 };
 export type Polygon = {
     points: Point[];
+    tempPoint?: Point;
 };
 export type Curve = {
     points: Point[];
+    tempPoint?: Point;
 };
 export type Brush = {
     points: Point[][];
@@ -47,7 +49,7 @@ export type StyleShape = {
     lineWidth?: number;
     lineDash?: number;
     lineArrow?: number;
-    pointsCount?: number;
+    closedPoints?: number;
     fontFamily?: string;
     fontItalic?: boolean;
     fontBold?: boolean;

package/dist/common/types/tools.d.ts

@@ -132,11 +132,8 @@ export type SettingsFont = {
         hidden?: boolean;
     };
 };
-export type SettingsPointsCount = {
-    pointsCount: {
-        min: number;
-        max: number;
-        step: number;
+export type SettingsClosedPoints = {
+    closedPoints: {
         default: number;
         hidden?: boolean;
     };
@@ -148,8 +145,8 @@ export type ToolsEllipseSettings = SettingsStrokeColor & SettingsFillColor & Set
 export type ToolsTextSettings = SettingsOpacity & SettingsStrokeColor & SettingsFont;
 export type ToolsLineSettings = SettingsOpacity & SettingsStrokeColor & SettingsLineWidth & SettingsLineDash & SettingsLineArrow;
 export type ToolsBrushSettings = SettingsOpacity & SettingsStrokeColor & SettingsLineWidth & SettingsLineDash;
-export type ToolsPolygonSettings = SettingsOpacity & SettingsStrokeColor & SettingsFillColor & SettingsLineWidth & SettingsLineDash & SettingsPointsCount;
-export type ToolsCurveSettings = SettingsOpacity & SettingsStrokeColor & SettingsFillColor & SettingsLineWidth & SettingsLineDash & SettingsPointsCount;
+export type ToolsPolygonSettings = SettingsOpacity & SettingsStrokeColor & SettingsFillColor & SettingsLineWidth & SettingsLineDash & SettingsClosedPoints;
+export type ToolsCurveSettings = SettingsOpacity & SettingsStrokeColor & SettingsFillColor & SettingsLineWidth & SettingsLineDash & SettingsClosedPoints;
 export type ToolsTriangleSettings = SettingsStrokeColor & SettingsFillColor & SettingsOpacity & SettingsLineWidth & SettingsLineDash;
 export type ToolsPictureSettings = SettingsOpacity;
 export type ToolsSettingsType<T extends ShapeType> = T extends 'rect' ? ToolsRectSettings : T extends 'square' ? ToolsSquareSettings : T extends 'circle' ? ToolsCircleSettings : T extends 'ellipse' ? ToolsEllipseSettings : T extends 'text' ? ToolsTextSettings : T extends 'line' ? ToolsLineSettings : T extends 'brush' ? ToolsBrushSettings : T extends 'polygon' ? ToolsPolygonSettings : T extends 'curve' ? ToolsCurveSettings : T extends 'triangle' ? ToolsTriangleSettings : T extends 'picture' ? ToolsPictureSettings : never;

package/dist/editor/components/settings/ClosedPointsField.d.ts

@@ -0,0 +1,10 @@
+import type React from 'react';
+type ClosedPointsType = {
+    selectedSettings: string | undefined;
+    setSelectedSettings: React.Dispatch<React.SetStateAction<string | undefined>>;
+    disabled?: boolean;
+    defaultValue?: number | undefined;
+    valueChanged: (field: string, value: string | number) => void;
+};
+declare const ClosedPointsField: ({ selectedSettings, setSelectedSettings, disabled, defaultValue, valueChanged }: ClosedPointsType) => import("react/jsx-runtime").JSX.Element;
+export default ClosedPointsField;