@yorab/react-paint 0.8.0 → 0.9.0

package/dist/utils/migration.d.ts

@@ -1,165 +1,147 @@
 import { DrawableShapeJson, Point } from '../types/Shapes';
 export declare const migrateShapesV065: (shapes: DrawableShapeJson[]) => (({
-    translation?: Point | undefined;
-} & import("../types/Shapes").StyledShape & {
-    x: number;
-    y: number;
-    width: number;
-    height: number;
-} & {
-    id: string;
-    toolId?: string | undefined;
+    visible?: boolean | undefined;
+    locked?: boolean | undefined;
     rotation: number;
+    style?: import("../types/Shapes").StyleShape | undefined;
+} & import("../types/Shapes").Triangle & {
+    type: "triangle";
+    path?: Path2D | undefined;
 } & {
-    type: "rect";
-}) | ({
     translation?: Point | undefined;
-} & import("../types/Shapes").StyledShape & {
-    x: number;
-    y: number;
-    width: number;
-    height: number;
-} & {
-    id: string;
-    toolId?: string | undefined;
+}) | ({
+    visible?: boolean | undefined;
+    locked?: boolean | undefined;
     rotation: number;
+    style?: import("../types/Shapes").StyleShape | undefined;
+} & import("../types/Shapes").Line & {
+    type: "line";
+    selection?: import("../types/Shapes").SelectionLinesType | undefined;
+    path?: Path2D | undefined;
+    arrows?: import("../types/Shapes").DrawableShape<"triangle">[] | undefined;
 } & {
-    type: "square";
-}) | ({
     translation?: Point | undefined;
-} & import("../types/Shapes").StyledShape & {
-    x: number;
-    y: number;
-    width: number;
-    height: number;
-} & {
-    src: string;
-} & {
-    id: string;
-    toolId?: string | undefined;
+}) | ({
+    visible?: boolean | undefined;
+    locked?: boolean | undefined;
     rotation: number;
+    style?: import("../types/Shapes").StyleShape | undefined;
+} & import("../types/Shapes").Rect & {
+    src: string;
 } & {
     type: "picture";
-}) | ({
-    translation?: Point | undefined;
-} & import("../types/Shapes").StyledShape & {
-    x: number;
-    y: number;
-    width: number;
-    height: number;
+    img: HTMLImageElement;
+    selection?: import("../types/Shapes").SelectionDefaultType | undefined;
 } & {
+    translation?: Point | undefined;
+}) | ({
+    visible?: boolean | undefined;
+    locked?: boolean | undefined;
+    rotation: number;
+    style?: import("../types/Shapes").StyleShape | undefined;
+} & import("../types/Shapes").Rect & {
     value: string[];
     fontSize: number;
-} & {
-    id: string;
-    toolId?: string | undefined;
-    rotation: number;
 } & {
     type: "text";
-}) | ({
-    translation?: Point | undefined;
-} & import("../types/Shapes").StyledShape & {
-    points: [Point, Point];
+    selection?: import("../types/Shapes").SelectionDefaultType | undefined;
 } & {
-    id: string;
-    toolId?: string | undefined;
+    translation?: Point | undefined;
+}) | ({
+    visible?: boolean | undefined;
+    locked?: boolean | undefined;
     rotation: number;
+    style?: import("../types/Shapes").StyleShape | undefined;
+} & import("../types/Shapes").Rect & {
+    type: "rect";
+    selection?: import("../types/Shapes").SelectionDefaultType | undefined;
+    path?: Path2D | undefined;
 } & {
-    type: "line";
-}) | ({
     translation?: Point | undefined;
-} & import("../types/Shapes").StyledShape & {
-    points: Point[];
-} & {
-    id: string;
-    toolId?: string | undefined;
+}) | ({
+    visible?: boolean | undefined;
+    locked?: boolean | undefined;
     rotation: number;
+    style?: import("../types/Shapes").StyleShape | undefined;
+} & import("../types/Shapes").Rect & {
+    type: "square";
+    selection?: import("../types/Shapes").SelectionDefaultType | undefined;
+    path?: Path2D | undefined;
 } & {
-    type: "polygon";
-}) | ({
     translation?: Point | undefined;
-} & import("../types/Shapes").StyledShape & {
-    points: Point[];
-} & {
-    id: string;
-    toolId?: string | undefined;
+}) | ({
+    visible?: boolean | undefined;
+    locked?: boolean | undefined;
     rotation: number;
+    style?: import("../types/Shapes").StyleShape | undefined;
+} & import("../types/Shapes").Circle & {
+    type: "circle";
+    selection?: import("../types/Shapes").SelectionDefaultType | undefined;
+    path?: Path2D | undefined;
 } & {
-    type: "curve";
-}) | ({
     translation?: Point | undefined;
-} & import("../types/Shapes").StyledShape & {
-    points: Point[][];
-} & {
-    id: string;
-    toolId?: string | undefined;
+}) | ({
+    visible?: boolean | undefined;
+    locked?: boolean | undefined;
     rotation: number;
+    style?: import("../types/Shapes").StyleShape | undefined;
+} & import("../types/Shapes").Ellipse & {
+    type: "ellipse";
+    selection?: import("../types/Shapes").SelectionDefaultType | undefined;
+    path?: Path2D | undefined;
 } & {
-    type: "brush";
-}) | ({
     translation?: Point | undefined;
-} & import("../types/Shapes").StyledShape & {
-    x: number;
-    y: number;
-    radius: number;
-} & {
-    id: string;
-    toolId?: string | undefined;
+}) | ({
+    visible?: boolean | undefined;
+    locked?: boolean | undefined;
     rotation: number;
+    style?: import("../types/Shapes").StyleShape | undefined;
+} & import("../types/Shapes").Polygon & {
+    type: "polygon";
+    selection?: import("../types/Shapes").SelectionLinesType | undefined;
+    path?: Path2D | undefined;
 } & {
-    type: "circle";
-}) | ({
     translation?: Point | undefined;
-} & import("../types/Shapes").StyledShape & {
-    x: number;
-    y: number;
-    radiusX: number;
-    radiusY: number;
+}) | ({
+    visible?: boolean | undefined;
+    locked?: boolean | undefined;
+    rotation: number;
+    style?: import("../types/Shapes").StyleShape | undefined;
+} & import("../types/Shapes").Curve & {
+    type: "curve";
+    selection?: import("../types/Shapes").SelectionLinesType | undefined;
+    path?: Path2D | undefined;
 } & {
-    id: string;
-    toolId?: string | undefined;
+    translation?: Point | undefined;
+}) | ({
+    visible?: boolean | undefined;
+    locked?: boolean | undefined;
     rotation: number;
+    style?: import("../types/Shapes").StyleShape | undefined;
+} & import("../types/Shapes").Brush & {
+    type: "brush";
+    selection?: import("../types/Shapes").SelectionDefaultType | undefined;
+    path?: Path2D | undefined;
+    scaleX?: number | undefined;
+    scaleY?: number | undefined;
 } & {
-    type: "ellipse";
+    translation?: Point | undefined;
 }) | {
     x: number;
     y: number;
-    style?: {
-        fillColor?: string | undefined;
-        globalAlpha?: number | undefined;
-        strokeColor?: string | undefined;
-        lineWidth?: number | undefined;
-        lineDash?: number | undefined;
-        lineArrow?: number | undefined;
-        pointsCount?: number | undefined;
-        fontFamily?: string | undefined;
-        fontItalic?: boolean | undefined;
-        fontBold?: boolean | undefined;
-    } | undefined;
+    selection?: import("../types/Shapes").SelectionDefaultType | undefined;
+    style?: import("../types/Shapes").StyleShape | undefined;
     type: "rect" | "square" | "circle" | "ellipse" | "picture";
     rotation: number;
-    toolId?: string | undefined;
-    id: string;
     visible?: boolean | undefined;
     locked?: boolean | undefined;
 } | {
     points: Point[];
-    style?: {
-        fillColor?: string | undefined;
-        globalAlpha?: number | undefined;
-        strokeColor?: string | undefined;
-        lineWidth?: number | undefined;
-        lineDash?: number | undefined;
-        lineArrow?: number | undefined;
-        pointsCount?: number | undefined;
-        fontFamily?: string | undefined;
-        fontItalic?: boolean | undefined;
-        fontBold?: boolean | undefined;
-    } | undefined;
+    selection?: import("../types/Shapes").SelectionLinesType | undefined;
+    style?: import("../types/Shapes").StyleShape | undefined;
     type: "polygon" | "curve";
     rotation: number;
-    toolId?: string | undefined;
-    id: string;
+    path?: Path2D | undefined;
     visible?: boolean | undefined;
     locked?: boolean | undefined;
 } | undefined)[];

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

@@ -0,0 +1,12 @@
+import { DrawableShape, Point, SelectionLinesType } from "src/types/Shapes";
+export declare const createLineSelectionPath: (shape: DrawableShape & {
+    points: readonly Point[];
+}, currentScale: number, selectionPadding: number, gravityAnchors?: boolean) => SelectionLinesType;
+export declare const drawLineSelection: ({ ctx, shape, withAnchors, selectionWidth, selectionColor, currentScale }: {
+    ctx: CanvasRenderingContext2D;
+    shape: DrawableShape<'line'> | DrawableShape<'polygon'> | DrawableShape<'curve'>;
+    withAnchors: boolean;
+    selectionWidth: number;
+    selectionColor: string;
+    currentScale?: number | undefined;
+}) => void;

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

@@ -0,0 +1,13 @@
+import type { Point, DrawableShape, SelectionDefaultType } from '../../types/Shapes';
+import type { SelectionModeResize } from '../../types/Mode';
+import type { GridFormatType } from '../../constants/app';
+export declare const createRecSelectionPath: (rect: DrawableShape, currentScale: number, selectionPadding: number) => SelectionDefaultType;
+export declare const drawSelectionRect: (ctx: CanvasRenderingContext2D, shape: DrawableShape & {
+    selection?: SelectionDefaultType;
+}, selectionColor: string, selectionWidth: number, currentScale: number, withAnchors: boolean) => void;
+export declare const resizeRectSelection: (cursorPosition: Point, originalShape: DrawableShape, selectionMode: SelectionModeResize, gridFormat: GridFormatType, selectionPadding: number, keepRatio?: boolean) => {
+    borderX: number;
+    borderHeight: number;
+    borderY: number;
+    borderWidth: number;
+};

package/dist/utils/selection.d.ts

@@ -1,7 +1,7 @@
 import type { HoverModeData, SelectionModeData } from '../types/Mode';
-import type { Point, DrawableShape } from '../types/Shapes';
-export declare const getNewSelectionData: (hoverMode: HoverModeData, selectedShape: DrawableShape, cursorPosition: Point, selectionPadding: number) => SelectionModeData<Point | number> | undefined;
-export declare const selectShape: (shapes: DrawableShape[], cursorPosition: Point, currentScale: number, canvasOffset: Point, selectedShape: DrawableShape | undefined, selectionPadding: number) => {
+import type { Point, ShapeEntity } from '../types/Shapes';
+export declare const getNewSelectionData: (hoverMode: HoverModeData, selectedShape: ShapeEntity, cursorPosition: Point, selectionPadding: number) => SelectionModeData<Point | number> | undefined;
+export declare const selectShape: (shapes: ShapeEntity[], cursorPosition: Point, currentScale: number, canvasOffset: Point, selectedShape: ShapeEntity | undefined, selectionPadding: number) => {
     mode: SelectionModeData<Point | number>;
-    shape: DrawableShape | undefined;
+    shape: ShapeEntity | undefined;
 };

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

@@ -1,55 +1,20 @@
+import { GridFormatType } from '../../constants/app';
 import { SelectionModeResize } from '../../types/Mode';
-import type { Point, DrawableBrush, Brush, Rect } from '../../types/Shapes';
+import type { Point, Rect, DrawableShape, ShapeEntity } from '../../types/Shapes';
 import type { ToolsSettingsType } from '../../types/tools';
+export declare const refreshBrush: <T extends DrawableShape<"brush">>(brush: T, currentScale: number, selectionPadding: number) => T;
 export declare const createBrush: (shape: {
     id: string;
-    icon: string;
-    label: string;
     type: 'brush';
     settings: ToolsSettingsType<'brush'>;
-}, cursorPosition: Point) => DrawableBrush | undefined;
-export declare const drawBrush: (ctx: CanvasRenderingContext2D, brush: Brush) => void;
-export declare const getBrushBorder: (brush: Brush, selectionPadding: number) => Rect;
-export declare const resizeBrush: (cursorPosition: Point, canvasOffset: Point, originalShape: DrawableBrush, selectionMode: SelectionModeResize, selectionPadding: number, keepRatio: boolean) => DrawableBrush;
-export declare const addNewPointToShape: (shape: DrawableBrush, cursorPosition: Point) => {
+}, cursorPosition: Point, currentScale: number, selectionPadding: number) => ShapeEntity<'brush'>;
+export declare const drawBrush: (ctx: CanvasRenderingContext2D, shape: DrawableShape<'brush'>) => void;
+export declare const getBrushBorder: (brush: DrawableShape<'brush'>, selectionPadding: number) => Rect;
+export declare const translateBrush: <U extends DrawableShape<"brush">>(cursorPosition: Point, originalShape: U, originalCursorPosition: Point, gridFormat: GridFormatType, currentScale: number, selectionPadding: number) => U & {
     points: Point[][];
-    visible?: boolean | undefined;
-    locked?: boolean | undefined;
-    style?: {
-        fillColor?: string | undefined;
-        globalAlpha?: number | undefined;
-        strokeColor?: string | undefined;
-        lineWidth?: number | undefined;
-        lineDash?: number | undefined;
-        lineArrow?: number | undefined;
-        pointsCount?: number | undefined;
-        fontFamily?: string | undefined;
-        fontItalic?: boolean | undefined;
-        fontBold?: boolean | undefined;
-    } | undefined;
-    id: string;
-    toolId?: string | undefined;
-    rotation: number;
-    type: "brush";
 };
-export declare const addNewPointGroupToShape: (shape: DrawableBrush, cursorPosition: Point) => {
+export declare const resizeBrush: (cursorPosition: Point, originalShape: DrawableShape<'brush'>, selectionMode: SelectionModeResize, gridFormat: GridFormatType, selectionPadding: number, currentScale: number, keepRatio: boolean) => DrawableShape<'brush'>;
+export declare const addNewPointToShape: <T extends DrawableShape<"brush">>(shape: T, cursorPosition: Point, currentScale: number, selectionPadding: number) => T & {
     points: Point[][];
-    visible?: boolean | undefined;
-    locked?: boolean | undefined;
-    style?: {
-        fillColor?: string | undefined;
-        globalAlpha?: number | undefined;
-        strokeColor?: string | undefined;
-        lineWidth?: number | undefined;
-        lineDash?: number | undefined;
-        lineArrow?: number | undefined;
-        pointsCount?: number | undefined;
-        fontFamily?: string | undefined;
-        fontItalic?: boolean | undefined;
-        fontBold?: boolean | undefined;
-    } | undefined;
-    id: string;
-    toolId?: string | undefined;
-    rotation: number;
-    type: "brush";
 };
+export declare const addNewPointGroupToShape: <T extends DrawableShape<"brush">>(shape: T, cursorPosition: Point, currentScale: number, selectionPadding: number) => T;

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

@@ -1,13 +1,17 @@
+import { GridFormatType } from '../../constants/app';
 import { SelectionModeResize } from '../../types/Mode';
-import type { Point, DrawableCircle, Circle, Rect } from '../../types/Shapes';
+import type { Point, Circle, Rect, DrawableShape, ShapeEntity } from '../../types/Shapes';
 import type { ToolsSettingsType } from '../../types/tools';
+export declare const refreshCircle: <T extends DrawableShape<"circle">>(shape: T, currentScale: number, selectionPadding: number) => T;
 export declare const createCircle: (shape: {
     id: string;
-    icon: string;
-    label: string;
     type: 'circle';
     settings: ToolsSettingsType<'circle'>;
-}, cursorPosition: Point) => DrawableCircle | undefined;
-export declare const drawCircle: (ctx: CanvasRenderingContext2D, circle: Circle) => void;
+}, cursorPosition: Point, currentScale: number, selectionPadding: number) => ShapeEntity<'circle'>;
+export declare const drawCircle: (ctx: CanvasRenderingContext2D, circle: DrawableShape<'circle'>) => void;
 export declare const getCircleBorder: (circle: Circle, selectionPadding: number) => Rect;
-export declare const resizeCircle: (cursorPosition: Point, canvasOffset: Point, originalShape: DrawableCircle, selectionMode: SelectionModeResize, selectionPadding: number) => DrawableCircle;
+export declare const translateCircle: <U extends DrawableShape<"circle">>(cursorPosition: Point, originalShape: U, originalCursorPosition: Point, gridFormat: GridFormatType, currentScale: number, selectionPadding: number) => U & {
+    x: number;
+    y: number;
+};
+export declare const resizeCircle: (cursorPosition: Point, originalShape: DrawableShape<'circle'>, selectionMode: SelectionModeResize, gridFormat: GridFormatType, selectionPadding: number, currentScale: number) => DrawableShape<'circle'>;

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

@@ -1,11 +1,16 @@
-import type { Point, DrawableCurve, Curve } from '../../types/Shapes';
+import { GridFormatType } from '../../constants/app';
+import { SelectionModeResize } from '../../types/Mode';
+import type { Point, DrawableShape, ShapeEntity } from '../../types/Shapes';
 import type { ToolsSettingsType } from '../../types/tools';
+export declare const refreshCurve: <T extends DrawableShape<"curve">>(shape: T, currentScale: number, selectionPadding: number) => T;
 export declare const createCurve: (shape: {
     id: string;
-    icon: string;
-    label: string;
     type: 'curve';
     settings: ToolsSettingsType<'curve'>;
-}, cursorPosition: Point) => DrawableCurve | undefined;
-export declare const drawCurve: (ctx: CanvasRenderingContext2D, curve: Curve) => void;
+}, cursorPosition: Point, currentScale: number, selectionPadding: number) => ShapeEntity<'curve'>;
+export declare const resizeCurve: (cursorPosition: Point, canvasOffset: Point, originalShape: DrawableShape<'curve'>, selectionMode: SelectionModeResize<number>, gridFormat: GridFormatType, selectionPadding: number, currentScale: number) => DrawableShape<'curve'>;
+export declare const drawCurve: (ctx: CanvasRenderingContext2D, curve: DrawableShape<'curve'>) => void;
 export declare const getCurveBorder: (polygon: import("../../types/Shapes").Polygon, selectionPadding: number) => import("../../types/Shapes").Rect;
+export declare const translateCurve: <U extends DrawableShape<"curve">>(cursorPosition: Point, originalShape: U, originalCursorPosition: Point, gridFormat: GridFormatType, currentScale: number, selectionPadding: number) => U & {
+    points: [number, number][];
+};

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

@@ -1,13 +1,17 @@
+import { GridFormatType } from '../../constants/app';
 import { SelectionModeResize } from '../../types/Mode';
-import type { Point, DrawableEllipse, Ellipse, Rect } from '../../types/Shapes';
+import type { Point, Ellipse, Rect, DrawableShape, ShapeEntity } from '../../types/Shapes';
 import type { ToolsSettingsType } from '../../types/tools';
+export declare const refreshEllipse: <T extends DrawableShape<"ellipse">>(shape: T, currentScale: number, selectionPadding: number) => T;
 export declare const createEllipse: (shape: {
     id: string;
-    icon: string;
-    label: string;
     type: 'ellipse';
     settings: ToolsSettingsType<'ellipse'>;
-}, cursorPosition: Point) => DrawableEllipse | undefined;
-export declare const drawEllipse: (ctx: CanvasRenderingContext2D, ellipse: Ellipse) => void;
+}, cursorPosition: Point, currentScale: number, selectionPadding: number) => ShapeEntity<'ellipse'>;
+export declare const drawEllipse: (ctx: CanvasRenderingContext2D, ellipse: DrawableShape<'ellipse'>) => void;
 export declare const getEllipseBorder: (ellipse: Ellipse, selectionPadding: number) => Rect;
-export declare const resizeEllipse: (cursorPosition: Point, canvasOffset: Point, originalShape: DrawableEllipse, selectionMode: SelectionModeResize, selectionPadding: number, keepRatio?: boolean) => DrawableEllipse;
+export declare const translateEllipse: <U extends DrawableShape<"ellipse">>(cursorPosition: Point, originalShape: U, originalCursorPosition: Point, gridFormat: GridFormatType, currentScale: number, selectionPadding: number) => U & {
+    x: number;
+    y: number;
+};
+export declare const resizeEllipse: (cursorPosition: Point, originalShape: DrawableShape<'ellipse'>, selectionMode: SelectionModeResize, gridFormat: GridFormatType, selectionPadding: number, currentScale: number, keepRatio?: boolean) => DrawableShape<'ellipse'>;